O documento discute o desenvolvimento de um protótipo de site responsivo para uma escola técnica com foco na satisfação do usuário em diferentes dispositivos. O autor realizou pesquisas com usuários e análises do site atual para identificar problemas e criar um novo design mobile first e responsivo que melhore a usabilidade. Os resultados indicam que o protótipo melhorou a experiência do usuário em diferentes telas.

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

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

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

4. 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...

5. É 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...

6. A hipótese é que SIM!
{ Twitter Boostrap, Foundation, UIKit } + usabilidade + NBR
9241-11 + responsive web design + mobile first

7. Objeto
Escola Técnica Estadual Fernando Prestes
• Desde 1929
• Atualmente 16 cursos
• Possui site desde 1999
•
+ de 10 mil acessos ao mês

8. Pesquisa
Levantamento de dados
•Pesquisa socioeconômica
•Análise do histórico do Google Analytics
•Análise heurística
Criação do protótipo

9. 706 entrevistados

10. Grau de escolaridade
47,6%
Qual o grau de escolaridade?
Curso superior completo.
Curso superior incompleto.
Ensino médio completo.
2ª série do ensino médio.
22,2%
1ª série do ensino médio.
Ensino fundamental completo.
Ensino fundamental incompleto.
8,6%
0,0%
2,2%
10,1%
9,3%

11. Empregados
38,8%
29,7%
Trabalho na área do curso que escolhi
Trabalho fora da área do curso que
escolhi
Estou desempregado
Estou desempregado mais já trab. Na
área
17,0%
10,2%
4,3%

12. Acesso a internet

13. Google Analytics

14. Dashboard Google Analytics

15. Visão por dispositivos

16. Analise Heurística

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

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

19. Navegação + Antecipação

20. 1º
2º
3º
4º
Site atual em 1366x769

21. Protótipo

23. Off-canvas

24. Protótipo

25. Protótipo

26. Conclusão

27. Funcionou!

28. Seria bom...
• Comunicação com um CMS.
• Focar em acessibilidade (ARIA).

29. É errado...
• Considerar a solução definitiva.
• Tratar de forma isolada.
• Esquecer do usuário.

30. Não acabou!

31. Github
Etec Web

32. Apresentação
SlideShare

33. Alexandre Pires
facebook.com/agraffitti
twitter.com/agraffitti
slideshare.net/agraffitti
alexandre@graffitti.com.br
www.graffitti.com.br

34. 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 design
Alexandre Pires