Upload
edu-agni
View
6.195
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
EDU AGNICriador 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 daexperiê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 DesignCentrado 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
PesquisaEstraté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ãogarante 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 aweb 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 suaperformance
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.
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.orgO 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, FranceTel: ( 33 1) 42 68 53 00, Fax: ( 33 1) 42 68 53 01E-mail: secretariat (at) google.orgURL: <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 RimesStarring:Justin ChambersJessica Capshaw
Season 1 - May 22, 2005Season 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 ;)