34
Foco no ser humano: pensando em usabilidade por meio de responsive web design. Alexandre Pires @AGraffitti

Apresentação UX2013 - Usabilidade por meio de responsive web design

Embed Size (px)

Citation preview

Page 1: Apresentação UX2013 - Usabilidade por meio de responsive web design

Foco no ser humano: pensando em usabilidade por meio de responsive web design.

Alexandre Pires

@AGraffitti

Page 2: Apresentação UX2013 - Usabilidade por meio de responsive web design

Ou seja...

Pensar na satisfação do usuário nas mais variadas resoluções ou nos variados dispositivos!

Page 3: Apresentação UX2013 - Usabilidade por meio de responsive web design

Porque?

Onde fica a usabilidade em um mundo mobile?

Desde o último trimestre de 2010, a venda de smartphones ultrapassa a de computadores pessoais em escala global.

(WEINTRAUB, 2011)

Page 4: Apresentação UX2013 - Usabilidade por meio de responsive web design

As tecnologias atuais estão preocupadas com a satisfação do usuário em plataformas móveis?

Mobile first, responsive web design, UX, NBR 9241-11...

Page 5: Apresentação UX2013 - Usabilidade por meio de responsive web design

É possível e como seria o desenvolvimento de um protótipo ou são apenas tecnologias de momento?

Twitter Boostrap, Foundation, UIKit, usabilidade, NBR 9241-11, responsive web design, mobile first...

Page 6: Apresentação UX2013 - Usabilidade por meio de responsive web design

A hipótese é que SIM!

{ Twitter Boostrap, Foundation, UIKit } + usabilidade + NBR 9241-11 + responsive web design + mobile first

Page 7: Apresentação UX2013 - Usabilidade por meio de responsive web design

Objeto

Escola Técnica Estadual Fernando Prestes

• Desde 1929

• Atualmente 16 cursos

• Possui site desde 1999

• + de 10 mil acessos ao mês

Page 8: Apresentação UX2013 - Usabilidade por meio de responsive web design

Pesquisa

Levantamento de dados

•Pesquisa socioeconômica

•Análise do histórico do Google Analytics

•Análise heurística

Criação do protótipo

Page 9: Apresentação UX2013 - Usabilidade por meio de responsive web design

706 entrevistados

Page 10: Apresentação UX2013 - Usabilidade por meio de responsive web design

Grau de escolaridade

0,0%2,2%

8,6%

22,2%

10,1%

47,6%

9,3%

Qual o grau de escolaridade?

Curso superior completo.

Curso superior incompleto.

Ensino médio completo.

2ª série do ensino médio.

1ª série do ensino médio.

Ensino fundamental completo.

Ensino fundamental incompleto.

Page 11: Apresentação UX2013 - Usabilidade por meio de responsive web design

Empregados

17,0%

29,7%

10,2%

4,3%

38,8%

Trabalho na área do curso que escolhi

Trabalho fora da área do curso queescolhiEstou desempregado

Estou desempregado mais já trab. Naárea

Page 12: Apresentação UX2013 - Usabilidade por meio de responsive web design

Acesso a internet

Page 13: Apresentação UX2013 - Usabilidade por meio de responsive web design

Google Analytics

Page 14: Apresentação UX2013 - Usabilidade por meio de responsive web design

Dashboard Google Analytics

Page 15: Apresentação UX2013 - Usabilidade por meio de responsive web design

Visão por dispositivos

Page 16: Apresentação UX2013 - Usabilidade por meio de responsive web design

Analise Heurística

Page 17: Apresentação UX2013 - Usabilidade por meio de responsive web design

Gravidade

• A frequência com que ocorre o problema.

• O impacto do problema caso ocorra.

• A persistência do problema.

(NIELSEN, 1995, tradução nossa)

Page 18: Apresentação UX2013 - Usabilidade por meio de responsive web design

Classificar gravidade

0 = não concordo que este é um problema

1 = problema cosmético

2 = problema de usabilidade menor

3 = problema de usabilidade maior

4 = Usabilidade catástrofe

(NIELSEN, 1995, tradução nossa)

Page 19: Apresentação UX2013 - Usabilidade por meio de responsive web design

Navegação + Antecipação

Page 20: Apresentação UX2013 - Usabilidade por meio de responsive web design

Site atual em 1366x769

1º 2º 3º 4º

Page 21: Apresentação UX2013 - Usabilidade por meio de responsive web design

Protótipo

Page 22: Apresentação UX2013 - Usabilidade por meio de responsive web design
Page 23: Apresentação UX2013 - Usabilidade por meio de responsive web design

Off-canvas

Page 24: Apresentação UX2013 - Usabilidade por meio de responsive web design

Protótipo

Page 25: Apresentação UX2013 - Usabilidade por meio de responsive web design

Protótipo

Page 26: Apresentação UX2013 - Usabilidade por meio de responsive web design

Conclusão

Page 27: Apresentação UX2013 - Usabilidade por meio de responsive web design

Funcionou!

Page 28: Apresentação UX2013 - Usabilidade por meio de responsive web design

Seria bom...

• Comunicação com um CMS.

• Focar em acessibilidade (ARIA).

Page 29: Apresentação UX2013 - Usabilidade por meio de responsive web design

É errado...

• Considerar a solução definitiva.

• Tratar de forma isolada.

• Esquecer do usuário.

Page 30: Apresentação UX2013 - Usabilidade por meio de responsive web design

Não acabou!

Page 31: Apresentação UX2013 - Usabilidade por meio de responsive web design

Github

Etec Web

Page 32: Apresentação UX2013 - Usabilidade por meio de responsive web design

Apresentação

SlideShare

Page 33: Apresentação UX2013 - Usabilidade por meio de responsive web design

Alexandre Pires

facebook.com/agraffitti

twitter.com/agraffitti

slideshare.net/agraffitti

[email protected]

www.graffitti.com.br

Page 34: Apresentação UX2013 - Usabilidade por meio de responsive web design

No deje de completar su evaluación online

ux2013.com.ar/encuesta¡Muchas gracias!

Foco no ser humano: pensando em usabilidade por meio de responsive web

designAlexandre Pires