Edu Agni é um designer e criador do blog UX.BLOG que trabalha há nove anos com projetos de design de interfaces e usabilidade. O documento discute vários tópicos relacionados à experiência do usuário, como avaliação de produtos, design centrado no usuário, desenvolvimento front-end, semântica, acessibilidade e design responsivo.

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

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?

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

9. Avaliação rápida de um produto
★ Eu consigo usá-lo? (usabilidade)
★ Eu devo usá-lo? (utilidade)
★ Eu quero usá-lo? (desejo)

11. Projetar para
pessoas

12. Projetar para
pessoas
Compartilhar
boas histórias

13. Projetar para
pessoas
Compartilhar
boas histórias
Estimular os
sentidos

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.

18. "Se a facilidade de uso fosse o
único requisito, estaríamos
todos andando em triciclos"
(Douglas Engelbart, inventor do mouse)
//UX.BLOG

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?

26. Facets of the User Experience
(The User Experience Honeycomb)
Peter Morville
//UX.BLOG

28. </>
</> </>

29. </>
</> </>

30. O desenvolvedor front-end deve ser
capaz de entender, criticar e ajudar a
melhorar um modelo de interação
básica e wireframes.

31. Processo de Design
Centrado no Usuário

32. http://www.flickr.com/photos/kake_pugh/1307255998

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

40. UCD
//UX.BLOG
Definição
Pesquisa
Estratégia
Protótipo
Desenvol.Testes

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.

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.

53. Padrões de Acessibilidade
garantem a semântica

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?

59. O que nos
aguarda o futuro?

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

68. Arquitetura de Informação

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

70. Otimize sua
performance
Front-End

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.

74. http://browserdiet.com/pt/

75. https://developers.google.com/speed/pagespeed/insights?hl=pt-br

78. Rich Snippets

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.

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>

96. http://www.google.com/webmasters/tools/richsnippets

97. Conclusões

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)

101. Perguntas?
Dúvidas?

102. Edu Agni
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
Obrigado ;)