o papel do front-end na ux

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.

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.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 ;)