O papel do Front-End na UX
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

O papel do Front-End na UX

  • 5,510 views
Uploaded 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.

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,510
On Slideshare
2,395
From Embeds
3,115
Number of Embeds
21

Actions

Shares
Downloads
112
Comments
3
Likes
40

Embeds 3,115

http://tableless.com.br 1,250
http://www.uxdesign.blog.br 791
http://www.frontend.blog.br 625
http://localhost 254
http://reader.local 89
http://sommaweb.com.br 28
http://cloud.feedly.com 19
http://www.feedspot.com 14
http://purisco.com 11
http://newsblur.com 6
http://www.feedly.com 5
http://www.newsblur.com 4
http://flavors.me 4
https://twitter.com 3
http://hoob.com.br 3
http://m.hoob.com.br 3
http://bealector.com 2
http://www.sommaweb.com.br 1
http://plus.url.google.com 1
http://127.0.0.1 1
http://www.inoreader.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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