EDU AGNI
Criador do UX.BLOG, trabalha há nove anos com projetos
nas áreas de direção de arte, usabilidade, design de
inter...
“O produto não é um fim em si,
mas a porta de entrada para uma
infinidade de experiências.”
(The Nokia Design Manifesto)
//U...
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
sy...
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
>
<
de...
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 mo...
Segundo Peter Merholz (Subject to Change),
a experiência de uma pessoa emerge das
seguintes qualidades:
★ motivações
★ exp...
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 wirefra...
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 ...
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 sig...
★ 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 do...
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 Accessi...
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...
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
...
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...
★ Uma vez que seu conteúdo é marcado com
dados estruturados, teste-o usando a
ferramenta de teste de dados estruturados
(h...
★ Após você implementar e testar
corretamente a marcação, pode levar
algum tempo até que os Rich Snippets
apareçam nos res...
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
mel...
★ O Schema é baseado no Microdata do
HTML5, o que mostra que nada novo
está sendo criado, mas sim algo já
existente está s...
★ O Schema.org contempla diferentes
tipos de conteúdos, possuindo
marcações específicas para livros,
filmes, música, recei...
Schema.org » Organization
HTML Original
Google.Org
Contact Details:
Main address: 38 avenue de l'Opera, F-75002 Paris, Fra...
Schema.org » Organization
HTML com Schema
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">...
Schema.org » Organization
HTML com Schema
...
Members:
- National Scientific Members in 100 countries and territories: Cou...
Schema.org » TVSeries
HTML Original
Grey's Anatomy is a medical drama television series created by Shonda
Rimes
Starring:
...
Schema.org » TVSeries
HTML com Schema
<div itemscope itemtype="http://schema.org/TVSeries">
<span itemprop="name">Greys An...
Schema.org » TVSeries
HTML com Schema
...
<div itemprop="season" itemscope itemtype="http://schema.org/TVSeason">
<span it...
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
★ F...
Perguntas?
Dúvidas?
Edu Agni
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
Obrigado ;)
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
O papel do Front-End na UX
Upcoming SlideShare
Loading in...5
×

O papel do Front-End na UX

6,350

Published on

Palestra ministrada na Tableless Conference, no dia 16 de maio de 2013 em São Paulo, e no Front in Aracaju no dia 31/08, sobre o papel do desenvolvedor Front-End na experiência do usuário.

Published in: Design
3 Comments
41 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,350
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
136
Comments
3
Likes
41
Embeds 0
No embeds

No notes for slide

O papel do Front-End na UX

  1. 1. 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
  2. 2. “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
  3. 3. O que é a tal da experiência do usuário?
  4. 4. “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
  5. 5. Avaliação rápida de um produto ★ Eu consigo usá-lo? (usabilidade) ★ Eu devo usá-lo? (utilidade) ★ Eu quero usá-lo? (desejo)
  6. 6. Projetar para pessoas
  7. 7. Projetar para pessoas Compartilhar boas histórias
  8. 8. Projetar para pessoas Compartilhar boas histórias Estimular os sentidos
  9. 9. Tríade da Experiência Digital Projetar para pessoas Compartilhar boas histórias Estimular os sentidos < usabilidade > < desejo > < utilidade >
  10. 10. Não podemos projetar a experiência do usuário.
  11. 11. Nós podemos projetar para a experiência do usuário.
  12. 12. "Se a facilidade de uso fosse o único requisito, estaríamos todos andando em triciclos" (Douglas Engelbart, inventor do mouse) //UX.BLOG
  13. 13. 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
  14. 14. Mesmo com tanto investimento em UX, muitos produtos digitais são medíocres.
  15. 15. Uma boa experiência do usuário exige um bom desenvolvimento front-end.
  16. 16. Equipes de UX precisam possuir mais do que apenas designers. Precisam de desenvolvedores front-end.
  17. 17. Você deve estar querendo saber o porquê, certo?
  18. 18. Facets of the User Experience (The User Experience Honeycomb) Peter Morville //UX.BLOG
  19. 19. </> </> </>
  20. 20. </> </> </>
  21. 21. O desenvolvedor front-end deve ser capaz de entender, criticar e ajudar a melhorar um modelo de interação básica e wireframes.
  22. 22. Processo de Design Centrado no Usuário
  23. 23. http://www.flickr.com/photos/kake_pugh/1307255998
  24. 24. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG
  25. 25. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição
  26. 26. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa
  27. 27. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia
  28. 28. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia Protótipo
  29. 29. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia Protótipo Desenvolvimento
  30. 30. Fluxo de trabalho de Design Centrado no Usuário //UX.BLOG Definição Pesquisa Estratégia Protótipo Desenvolvimento Testes
  31. 31. UCD //UX.BLOG Definição Pesquisa Estratégia Protótipo Desenvol.Testes
  32. 32. 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
  33. 33. E o que vem a ser a tal da Web Semântica?
  34. 34. ★ Semântica é o estudo do significado Incide sobre a relação entre significante e o que eles representam.
  35. 35. ★ Web Semântica é uma extensão da Web atual Máquinas e humanos trabalhando em cooperação, interligando conteúdos pelos significados.
  36. 36. ★ Organizar e dar relevância para a informação Desenvolver tecnologias que tornem a informação legível para as máquinas.
  37. 37. Validar o código não garante a semântica
  38. 38. Validadores encontram erros de sintaxe, mas não reconhecem se um código é bem estruturado, e muito menos a semântica do documento.
  39. 39. Padrões de Acessibilidade garantem a semântica
  40. 40. 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%.
  41. 41. Melhorar a sua capacidade de inovar significa tornar mais próximas duas funções que criam inovações: UX e Front-End
  42. 42. Como acessamos a web hoje em dia?
  43. 43. O que nos aguarda o futuro?
  44. 44. Design Responsivo ★ Grids Fluidos ★ Design Adaptatívo ★ Conteúdo Flexível ★ Otimização de desempenho
  45. 45. 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
  46. 46. Arquitetura de Informação
  47. 47. 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
  48. 48. Otimize sua performance Front-End
  49. 49. Renomeie ou remova elementos não-semânticos do seu HTML, e remova seletores ineficientes do CSS.
  50. 50. Reduza o número de requisições do site, principalmente de Javascript.
  51. 51. Otimize suas imagens com o uso de sprites, compressores, Base64 encode, ou substituindo-as por CSS3.
  52. 52. http://browserdiet.com/pt/
  53. 53. https://developers.google.com/speed/pagespeed/insights?hl=pt-br
  54. 54. Rich Snippets
  55. 55. ★ 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;
  56. 56. ★ 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);
  57. 57. ★ 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.
  58. 58. Schema.org O padrão semântico dos mecanismos de busca.
  59. 59. ★ 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;
  60. 60. ★ O Schema é baseado no Microdata do HTML5, o que mostra que nada novo está sendo criado, mas sim algo já existente está sendo extendido;
  61. 61. ★ 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.
  62. 62. 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:
  63. 63. 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> ...
  64. 64. 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>
  65. 65. 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
  66. 66. 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> ...
  67. 67. 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>
  68. 68. http://www.google.com/webmasters/tools/richsnippets
  69. 69. Conclusões
  70. 70. O desenvolvimento front-end não é sobre como resolver problemas de tecnologia.
  71. 71. O desenvolvimento front-end é sobre como assegurar uma boa experiência do usuário em um produto.
  72. 72. 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)
  73. 73. Perguntas? Dúvidas?
  74. 74. Edu Agni www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni //UX.BLOG Obrigado ;)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×