SlideShare uma empresa Scribd logo
1 de 102
Baixar para ler offline
EDU AGNI
Criador do UX.BLOG, trabalha há nove anos com projetos
nas áreas de direção de arte, usabilidade, design de
interfaces e front-end. Atualmente é designer no iMasters
e curador da área de Design da Campus Party Brasil.
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
“O produto não é um fim em si,
mas a porta de entrada para uma
infinidade de experiências.”
(The Nokia Design Manifesto)
//UX.BLOG
O que é a tal da
experiência do usuário?
“I thought human interface and usability
were too narrow. I wanted to cover all
aspects of a user’s experience with the
system, including industrial design
graphics, the interface, the physical
attraction, and the manual.”
Don Norman
//UX.BLOG
Avaliação rápida de um produto
★ Eu consigo usá-lo? (usabilidade)
★ Eu devo usá-lo? (utilidade)
★ Eu quero usá-lo? (desejo)
Projetar para
pessoas
Projetar para
pessoas
Compartilhar
boas histórias
Projetar para
pessoas
Compartilhar
boas histórias
Estimular os
sentidos
Tríade da
Experiência
Digital
Projetar para
pessoas
Compartilhar
boas histórias
Estimular os
sentidos
<
usabilidade
>
<
desejo
>
< utilidade >
Não podemos projetar a
experiência do usuário.
Nós podemos projetar para a
experiência do usuário.
"Se a facilidade de uso fosse o
único requisito, estaríamos
todos andando em triciclos"
(Douglas Engelbart, inventor do mouse)
//UX.BLOG
Segundo Peter Merholz (Subject to Change),
a experiência de uma pessoa emerge das
seguintes qualidades:
★ motivações
★ expectativas
★ percepções
★ habilidades
★ fluxo
★ cultura
//UX.BLOG
Mesmo com tanto
investimento em UX, muitos
produtos digitais são
medíocres.
Uma boa experiência do
usuário exige um bom
desenvolvimento front-end.
Equipes de UX precisam
possuir mais do que apenas
designers. Precisam de
desenvolvedores front-end.
Você deve estar
querendo saber o
porquê, certo?
Facets of the User Experience
(The User Experience Honeycomb)
Peter Morville
//UX.BLOG
</>
</> </>
</>
</> </>
O desenvolvedor front-end deve ser
capaz de entender, criticar e ajudar a
melhorar um modelo de interação
básica e wireframes.
Processo de Design
Centrado no Usuário
http://www.flickr.com/photos/kake_pugh/1307255998
Fluxo de trabalho de
Design Centrado no Usuário
//UX.BLOG
Fluxo de trabalho de
Design Centrado no Usuário
//UX.BLOG
Definição
Fluxo de trabalho de
Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa
Fluxo de trabalho de
Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia
Fluxo de trabalho de
Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia Protótipo
Fluxo de trabalho de
Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia Protótipo Desenvolvimento
Fluxo de trabalho de
Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia Protótipo Desenvolvimento Testes
UCD
//UX.BLOG
Definição
Pesquisa
Estratégia
Protótipo
Desenvol.Testes
Em 2003, Mike Davidson foi responsável pelo redesign do
site site da ESPN, utilizando os padrões web.
Com isso obteve uma redução de 50kb por página, e com
isso a economia de banda foi de:
2 Terabytes / dia
61 Terabytes / mês
730 Terabytes / ano
E o que vem a ser a tal da
Web Semântica?
★ Semântica é o estudo
do significado
Incide sobre a relação entre significante
e o que eles representam.
★ Web Semântica é uma
extensão da Web atual
Máquinas e humanos trabalhando em cooperação,
interligando conteúdos pelos significados.
★ Organizar e dar relevância
para a informação
Desenvolver tecnologias que tornem a informação
legível para as máquinas.
Validar o código não
garante a semântica
Validadores encontram erros de sintaxe,
mas não reconhecem se um código é
bem estruturado, e muito menos a
semântica do documento.
Padrões de Acessibilidade
garantem a semântica
Um dos primeiros sites acessíveis
produzidos por uma empresa comercial.
Todo o redesign foi baseado na Web
Content Accessibility Guidelines
(http://www.w3.org/TR/WCAG/), e com
isso as taxas de conversão aumentaram
300%, custos de manutenção caíram
66%, o tempo de carregamento caiu
75%, e a listagem natural nas buscas
aumentou 50%.
Melhorar a sua
capacidade de inovar
significa tornar mais
próximas duas funções
que criam inovações:
UX e Front-End
Como acessamos a
web hoje em dia?
O que nos
aguarda o futuro?
Design Responsivo
★ Grids Fluidos
★ Design Adaptatívo
★ Conteúdo Flexível
★ Otimização de desempenho
O Google recomenda,
e também te recompensa.
“Sites que usam Web Design Responsivo, isto é, sites que
funcionam em todos os dispositivos com o mesmo conjunto
de URLs, com cada URL fornecendo o mesmo HTML a todos
os dispositivos e usando apenas CSS para alterar como a
página é processada no dispositivo. Essa é a configuração
recomendada pelo Google.”
https://developers.google.com/webmasters/smartphone-sites/details
Arquitetura de Informação
Arquitetura de Informação
★ Estabelecer uma escala hierárquica de importância
das informações textuais e gráficas do site
★ Repensar a pertinência de apresentação dessas
informações em diferentes contextos e dispositivos
Otimize sua
performance
Front-End
Renomeie ou remova elementos não-semânticos
do seu HTML, e remova seletores ineficientes do CSS.
Reduza o número de requisições do site,
principalmente de Javascript.
Otimize suas imagens com o uso de sprites, compressores,
Base64 encode, ou substituindo-as por CSS3.
http://browserdiet.com/pt/
https://developers.google.com/speed/pagespeed/insights?hl=pt-br
Rich Snippets
★ Para se qualificar para os Rich Snippets,
você deve marcar as páginas de seu site
usando um dos três formatos suportados:
Microdados, Microformatos ou RDFa;
★ Uma vez que seu conteúdo é marcado com
dados estruturados, teste-o usando a
ferramenta de teste de dados estruturados
(http://www.google.com/webmasters/
tools/richsnippets);
★ Após você implementar e testar
corretamente a marcação, pode levar
algum tempo até que os Rich Snippets
apareçam nos resultados de pesquisa,
conforme indexamos e processamos as
páginas.
Schema.org
O padrão semântico dos
mecanismos de busca.
★ Os três maiores mecanismos de busca da
web - Google, Yahoo! e Bing - se juntaram
na criação de um padrão para prover
melhores práticas semânticas na
publicação de conteúdos na web, de
forma que sejam indexados com maior
precisão e qualidade;
★ O Schema é baseado no Microdata do
HTML5, o que mostra que nada novo
está sendo criado, mas sim algo já
existente está sendo extendido;
★ O Schema.org contempla diferentes
tipos de conteúdos, possuindo
marcações específicas para livros,
filmes, música, receitas, séries de TV,
eventos, organizações, pessoas,
lugares, restaurantes, produtos,
ofertas, reviews, etc.
Schema.org » Organization
HTML Original
Google.Org
Contact Details:
Main address: 38 avenue de l'Opera, F-75002 Paris, France
Tel: ( 33 1) 42 68 53 00, Fax: ( 33 1) 42 68 53 01
E-mail: secretariat (at) google.org
URL: <a href="http://www.google.org">www.google.org</a>
Members:
- National Scientific Members in 100 countries and territories: Country1,
Country2, ...
- Scientific Union Members, 30 organizations listed in this Yearbook:
Member 1, Member 2
History:
Schema.org » Organization
HTML com Schema
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Google.org (GOOG)</span>
Contact Details:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Main address:
<span itemprop="streetAddress">38 avenue de l'Opera</span>
<span itemprop="postalCode">F-75002</span>
<span itemprop="addressLocality">Paris, France</span>
,
</div>
Tel:<span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
Fax:<span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
E-mail: <span itemprop="email">secretariat(at)google.org</span>
...
Schema.org » Organization
HTML com Schema
...
Members:
- National Scientific Members in 100 countries and territories: Country1,
Country2, ...
- Scientific Union Members, 30 organizations listed in this Yearbook:
<span itemprop="member" itemscope itemtype="http://schema.org/
Organization">
Member1
</span>,
<span itemprop="member" itemscope itemtype="http://schema.org/
Organization">
Member2
</span>,
History:
</div>
Schema.org » TVSeries
HTML Original
Grey's Anatomy is a medical drama television series created by Shonda
Rimes
Starring:
Justin Chambers
Jessica Capshaw
Season 1 - May 22, 2005
Season 2 - May 14, 2006
Schema.org » TVSeries
HTML com Schema
<div itemscope itemtype="http://schema.org/TVSeries">
<span itemprop="name">Greys Anatomy</span> is a medical drama television
series created by
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="author">Shonda Rimes</span>
</div>
Starring:
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Justin Chambers</span>
</div>
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Jessica Capshaw</span>
</div>
...
Schema.org » TVSeries
HTML com Schema
...
<div itemprop="season" itemscope itemtype="http://schema.org/TVSeason">
<span itemprop="name">Season 1</span> -
<meta itemprop="numberofEpisodes" content="14"/>
<meta itemprop="datePublished" content="2005-05-22">May 22, 2005
</div>
<div itemprop="season" itemscope itemtype="http://schema.org/TVSeason">
<span itemprop="name">Season 2</span> -
<meta itemprop="numberofEpisodes" content="27"/>
<meta itemprop="datePublished" content="2006-05-14">May 14, 2006
<div itemprop="episode" itemscope itemtype="http://schema.org/
TVEpisode">
<span itemprop="name">Episode 1</span> -
<meta itemprop="episodeNumber" content="1"/>
</div>
</div>
</div>
http://www.google.com/webmasters/tools/richsnippets
Conclusões
O desenvolvimento front-end
não é sobre como resolver
problemas de tecnologia.
O desenvolvimento front-end
é sobre como assegurar uma
boa experiência do usuário
em um produto.
Referências
★ Improving UX Through Front-End Performance (bit.ly/15K5zV2)
★ Livro: Subject to Change, de Peter Merholz
★ Facets of the User Experience (http://bit.ly/IGs40)
★ The Disciplines of User Experience (http://bit.ly/Z7XffS)
★ The Nokia Design Manifesto (http://bit.ly/14tr4o)
★ Holy Trinity of Digital Experience Design (http://bit.ly/1agOZi6)
★ Hi, I'm a UX Developer - You're a what? (bit.ly/13nz0sK)
★ What is a UX Developer and are they really a thing? (bit.ly/zSWtPY)
★ Great User Experiences Require Great Front-End Development (bit.ly/IrRjqo)
★ Schema (schema.org)
Perguntas?
Dúvidas?
Edu Agni
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
Obrigado ;)

Mais conteúdo relacionado

Mais procurados

As Media Queries são só um detalhe!
As Media Queries são só um detalhe!As Media Queries são só um detalhe!
As Media Queries são só um detalhe!Edu Agni
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioEdu Agni
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilDiogo Riker
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UXEdu Agni
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para DesenvolvedoresAnderson Façanha
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosPriscilla Albuquerque
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframeFabricio Teixeira
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface DesignEdu Agni
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Práticas e Processos de UX
Práticas e Processos de UXPráticas e Processos de UX
Práticas e Processos de UXBruno Polidoro
 
Usabilidade para sistemas
Usabilidade para sistemasUsabilidade para sistemas
Usabilidade para sistemasanatofol
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design • Suzi Sarmento
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilLariane Rossanese
 
Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Greg Palmieri
 
Maturidade UX nas Empresas
Maturidade UX nas EmpresasMaturidade UX nas Empresas
Maturidade UX nas EmpresasMarconi Pacheco
 

Mais procurados (20)

As Media Queries são só um detalhe!
As Media Queries são só um detalhe!As Media Queries são só um detalhe!
As Media Queries são só um detalhe!
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no Usuário
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015
 
DevUX
DevUXDevUX
DevUX
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo Ágil
 
UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UX
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para Desenvolvedores
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Práticas e Processos de UX
Práticas e Processos de UXPráticas e Processos de UX
Práticas e Processos de UX
 
Usabilidade para sistemas
Usabilidade para sistemasUsabilidade para sistemas
Usabilidade para sistemas
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no Brasil
 
Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4
 
Maturidade UX nas Empresas
Maturidade UX nas EmpresasMaturidade UX nas Empresas
Maturidade UX nas Empresas
 

Destaque

O papel e a carreira de um desenvolvedor de software
O papel e a carreira de um desenvolvedor de softwareO papel e a carreira de um desenvolvedor de software
O papel e a carreira de um desenvolvedor de softwareMichel Graciano
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digitalEdu Agni
 
SEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSSEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSFabio Ricotta
 
Seminário - Video game e suas convergências
Seminário - Video game e suas convergênciasSeminário - Video game e suas convergências
Seminário - Video game e suas convergênciasRafael da Silva
 
Jogos em Python utilizando PyGame
Jogos em Python utilizando PyGameJogos em Python utilizando PyGame
Jogos em Python utilizando PyGameMayron Cachina
 
The User Experience Iceberg
The User Experience IcebergThe User Experience Iceberg
The User Experience IcebergTrevor van Gorp
 
Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação Leonardo Foletto
 
Desmistificando a experiência do usuário
Desmistificando a experiência do usuárioDesmistificando a experiência do usuário
Desmistificando a experiência do usuárioTalissonn Buchinger
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.Edmo Jeova
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoRodrigo Nogueira
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end DevelopmentEdy Segura
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performanceAnderson Solano
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceEdu Agni
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceEdu Agni
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Minicurso de python - CACC UFPA 2010
Minicurso de python - CACC UFPA 2010Minicurso de python - CACC UFPA 2010
Minicurso de python - CACC UFPA 2010Diego Damasceno
 

Destaque (20)

O papel e a carreira de um desenvolvedor de software
O papel e a carreira de um desenvolvedor de softwareO papel e a carreira de um desenvolvedor de software
O papel e a carreira de um desenvolvedor de software
 
SEO para Front-End
SEO para Front-EndSEO para Front-End
SEO para Front-End
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digital
 
SEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSSEO para Front-End - BeagaJS
SEO para Front-End - BeagaJS
 
android
androidandroid
android
 
Seminário - Video game e suas convergências
Seminário - Video game e suas convergênciasSeminário - Video game e suas convergências
Seminário - Video game e suas convergências
 
Jogos em Python utilizando PyGame
Jogos em Python utilizando PyGameJogos em Python utilizando PyGame
Jogos em Python utilizando PyGame
 
The User Experience Iceberg
The User Experience IcebergThe User Experience Iceberg
The User Experience Iceberg
 
Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação
 
Desmistificando a experiência do usuário
Desmistificando a experiência do usuárioDesmistificando a experiência do usuário
Desmistificando a experiência do usuário
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundo
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerce
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerce
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Minicurso de python - CACC UFPA 2010
Minicurso de python - CACC UFPA 2010Minicurso de python - CACC UFPA 2010
Minicurso de python - CACC UFPA 2010
 

Semelhante a O papel do Front-End na UX

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de InterfacesAna Migowski
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Patricia Mallmann
 
Website Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EWebsite Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EIsabela Loepert
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenáriosposgraduacaorj
 
Design Webdesign
Design WebdesignDesign Webdesign
Design WebdesignDaniel Soto
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoRodrigo Correia
 
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinhaTime de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinhaDeblyn Prado
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
 
Palestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaPalestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaLuiz Agner
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte Iigorpimentel
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informaçãopospipoca
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - IntroduçãoMarcos César
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxGelvazioCamargo
 

Semelhante a O papel do Front-End na UX (20)

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Website Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EWebsite Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto E
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Design Webdesign
Design WebdesignDesign Webdesign
Design Webdesign
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinhaTime de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Palestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaPalestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, Brasília
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
User experience
User experienceUser experience
User experience
 
Ap iii
Ap iiiAp iii
Ap iii
 

Mais de Edu Agni

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEdu Agni
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEdu Agni
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User ExperienceEdu Agni
 
UX Maturity
UX MaturityUX Maturity
UX MaturityEdu Agni
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaEdu Agni
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceEdu Agni
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência DigitalEdu Agni
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosEdu Agni
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalEdu Agni
 
Design Emocional
Design EmocionalDesign Emocional
Design EmocionalEdu Agni
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasEdu Agni
 

Mais de Edu Agni (12)

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do Design
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentena
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User Experience
 
UX Maturity
UX MaturityUX Maturity
UX Maturity
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-Estruturada
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da Interface
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência Digital
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessários
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência Digital
 
Design Emocional
Design EmocionalDesign Emocional
Design Emocional
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoas
 

O papel do Front-End na UX

  • 1.
  • 2. EDU AGNI Criador do UX.BLOG, trabalha há nove anos com projetos nas áreas de direção de arte, usabilidade, design de interfaces e front-end. Atualmente é designer no iMasters e curador da área de Design da Campus Party Brasil. www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni //UX.BLOG
  • 3.
  • 4. “O produto não é um fim em si, mas a porta de entrada para uma infinidade de experiências.” (The Nokia Design Manifesto) //UX.BLOG
  • 5. O que é a tal da experiência do usuário?
  • 6.
  • 7. “I thought human interface and usability were too narrow. I wanted to cover all aspects of a user’s experience with the system, including industrial design graphics, the interface, the physical attraction, and the manual.” Don Norman //UX.BLOG
  • 8.
  • 9. Avaliação rápida de um produto ★ Eu consigo usá-lo? (usabilidade) ★ Eu devo usá-lo? (utilidade) ★ Eu quero usá-lo? (desejo)
  • 10.
  • 14. Tríade da Experiência Digital Projetar para pessoas Compartilhar boas histórias Estimular os sentidos < usabilidade > < desejo > < utilidade >
  • 15. Não podemos projetar a experiência do usuário.
  • 16. Nós podemos projetar para a experiência do usuário.
  • 17.
  • 18. "Se a facilidade de uso fosse o único requisito, estaríamos todos andando em triciclos" (Douglas Engelbart, inventor do mouse) //UX.BLOG
  • 19.
  • 20. Segundo Peter Merholz (Subject to Change), a experiência de uma pessoa emerge das seguintes qualidades: ★ motivações ★ expectativas ★ percepções ★ habilidades ★ fluxo ★ cultura //UX.BLOG
  • 21. Mesmo com tanto investimento em UX, muitos produtos digitais são medíocres.
  • 22. Uma boa experiência do usuário exige um bom desenvolvimento front-end.
  • 23. Equipes de UX precisam possuir mais do que apenas designers. Precisam de desenvolvedores front-end.
  • 24. Você deve estar querendo saber o porquê, certo?
  • 25.
  • 26. Facets of the User Experience (The User Experience Honeycomb) Peter Morville //UX.BLOG
  • 27.
  • 30. O desenvolvedor front-end deve ser capaz de entender, criticar e ajudar a melhorar um modelo de interação básica e wireframes.
  • 33. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG
  • 34. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição
  • 35. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa
  • 36. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia
  • 37. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia Protótipo
  • 38. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia Protótipo Desenvolvimento
  • 39. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia Protótipo Desenvolvimento Testes
  • 41.
  • 42.
  • 43.
  • 44. Em 2003, Mike Davidson foi responsável pelo redesign do site site da ESPN, utilizando os padrões web. Com isso obteve uma redução de 50kb por página, e com isso a economia de banda foi de: 2 Terabytes / dia 61 Terabytes / mês 730 Terabytes / ano
  • 45. E o que vem a ser a tal da Web Semântica?
  • 46. ★ Semântica é o estudo do significado Incide sobre a relação entre significante e o que eles representam.
  • 47. ★ Web Semântica é uma extensão da Web atual Máquinas e humanos trabalhando em cooperação, interligando conteúdos pelos significados.
  • 48. ★ Organizar e dar relevância para a informação Desenvolver tecnologias que tornem a informação legível para as máquinas.
  • 49.
  • 50.
  • 51. Validar o código não garante a semântica
  • 52. Validadores encontram erros de sintaxe, mas não reconhecem se um código é bem estruturado, e muito menos a semântica do documento.
  • 54. Um dos primeiros sites acessíveis produzidos por uma empresa comercial. Todo o redesign foi baseado na Web Content Accessibility Guidelines (http://www.w3.org/TR/WCAG/), e com isso as taxas de conversão aumentaram 300%, custos de manutenção caíram 66%, o tempo de carregamento caiu 75%, e a listagem natural nas buscas aumentou 50%.
  • 55. Melhorar a sua capacidade de inovar significa tornar mais próximas duas funções que criam inovações: UX e Front-End
  • 56. Como acessamos a web hoje em dia?
  • 57.
  • 58.
  • 59. O que nos aguarda o futuro?
  • 60.
  • 61.
  • 62.
  • 63. Design Responsivo ★ Grids Fluidos ★ Design Adaptatívo ★ Conteúdo Flexível ★ Otimização de desempenho
  • 64. O Google recomenda, e também te recompensa. “Sites que usam Web Design Responsivo, isto é, sites que funcionam em todos os dispositivos com o mesmo conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para alterar como a página é processada no dispositivo. Essa é a configuração recomendada pelo Google.” https://developers.google.com/webmasters/smartphone-sites/details
  • 65.
  • 66.
  • 67.
  • 69. Arquitetura de Informação ★ Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site ★ Repensar a pertinência de apresentação dessas informações em diferentes contextos e dispositivos
  • 71. Renomeie ou remova elementos não-semânticos do seu HTML, e remova seletores ineficientes do CSS.
  • 72. Reduza o número de requisições do site, principalmente de Javascript.
  • 73. Otimize suas imagens com o uso de sprites, compressores, Base64 encode, ou substituindo-as por CSS3.
  • 76.
  • 77.
  • 79. ★ Para se qualificar para os Rich Snippets, você deve marcar as páginas de seu site usando um dos três formatos suportados: Microdados, Microformatos ou RDFa;
  • 80. ★ Uma vez que seu conteúdo é marcado com dados estruturados, teste-o usando a ferramenta de teste de dados estruturados (http://www.google.com/webmasters/ tools/richsnippets);
  • 81. ★ Após você implementar e testar corretamente a marcação, pode levar algum tempo até que os Rich Snippets apareçam nos resultados de pesquisa, conforme indexamos e processamos as páginas.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86. Schema.org O padrão semântico dos mecanismos de busca.
  • 87. ★ Os três maiores mecanismos de busca da web - Google, Yahoo! e Bing - se juntaram na criação de um padrão para prover melhores práticas semânticas na publicação de conteúdos na web, de forma que sejam indexados com maior precisão e qualidade;
  • 88. ★ O Schema é baseado no Microdata do HTML5, o que mostra que nada novo está sendo criado, mas sim algo já existente está sendo extendido;
  • 89. ★ O Schema.org contempla diferentes tipos de conteúdos, possuindo marcações específicas para livros, filmes, música, receitas, séries de TV, eventos, organizações, pessoas, lugares, restaurantes, produtos, ofertas, reviews, etc.
  • 90. Schema.org » Organization HTML Original Google.Org Contact Details: Main address: 38 avenue de l'Opera, F-75002 Paris, France Tel: ( 33 1) 42 68 53 00, Fax: ( 33 1) 42 68 53 01 E-mail: secretariat (at) google.org URL: <a href="http://www.google.org">www.google.org</a> Members: - National Scientific Members in 100 countries and territories: Country1, Country2, ... - Scientific Union Members, 30 organizations listed in this Yearbook: Member 1, Member 2 History:
  • 91. Schema.org » Organization HTML com Schema <div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Google.org (GOOG)</span> Contact Details: <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> Main address: <span itemprop="streetAddress">38 avenue de l'Opera</span> <span itemprop="postalCode">F-75002</span> <span itemprop="addressLocality">Paris, France</span> , </div> Tel:<span itemprop="telephone">( 33 1) 42 68 53 00 </span>, Fax:<span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>, E-mail: <span itemprop="email">secretariat(at)google.org</span> ...
  • 92. Schema.org » Organization HTML com Schema ... Members: - National Scientific Members in 100 countries and territories: Country1, Country2, ... - Scientific Union Members, 30 organizations listed in this Yearbook: <span itemprop="member" itemscope itemtype="http://schema.org/ Organization"> Member1 </span>, <span itemprop="member" itemscope itemtype="http://schema.org/ Organization"> Member2 </span>, History: </div>
  • 93. Schema.org » TVSeries HTML Original Grey's Anatomy is a medical drama television series created by Shonda Rimes Starring: Justin Chambers Jessica Capshaw Season 1 - May 22, 2005 Season 2 - May 14, 2006
  • 94. Schema.org » TVSeries HTML com Schema <div itemscope itemtype="http://schema.org/TVSeries"> <span itemprop="name">Greys Anatomy</span> is a medical drama television series created by <div itemscope itemtype="http://schema.org/Person"> <span itemprop="author">Shonda Rimes</span> </div> Starring: <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Justin Chambers</span> </div> <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Jessica Capshaw</span> </div> ...
  • 95. Schema.org » TVSeries HTML com Schema ... <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason"> <span itemprop="name">Season 1</span> - <meta itemprop="numberofEpisodes" content="14"/> <meta itemprop="datePublished" content="2005-05-22">May 22, 2005 </div> <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason"> <span itemprop="name">Season 2</span> - <meta itemprop="numberofEpisodes" content="27"/> <meta itemprop="datePublished" content="2006-05-14">May 14, 2006 <div itemprop="episode" itemscope itemtype="http://schema.org/ TVEpisode"> <span itemprop="name">Episode 1</span> - <meta itemprop="episodeNumber" content="1"/> </div> </div> </div>
  • 98. O desenvolvimento front-end não é sobre como resolver problemas de tecnologia.
  • 99. O desenvolvimento front-end é sobre como assegurar uma boa experiência do usuário em um produto.
  • 100. Referências ★ Improving UX Through Front-End Performance (bit.ly/15K5zV2) ★ Livro: Subject to Change, de Peter Merholz ★ Facets of the User Experience (http://bit.ly/IGs40) ★ The Disciplines of User Experience (http://bit.ly/Z7XffS) ★ The Nokia Design Manifesto (http://bit.ly/14tr4o) ★ Holy Trinity of Digital Experience Design (http://bit.ly/1agOZi6) ★ Hi, I'm a UX Developer - You're a what? (bit.ly/13nz0sK) ★ What is a UX Developer and are they really a thing? (bit.ly/zSWtPY) ★ Great User Experiences Require Great Front-End Development (bit.ly/IrRjqo) ★ Schema (schema.org)