Case study sobre duas abordagens diferentes de apresentação de resultados de um estudo de usabilidade a um menu de navegação: com wireframes vs. com protótipos HTML

1. Rapid
Ivo Gomes
Prototyping

2. 1 imagem vale por 1000 palavras

3. 1 imagem já não vale por 1000 palavras

4. Case Study
• O mesmo cliente
• Situações semelhantes
• Metodologias iguais
• Apresentação de resultados diferente

5. Case Study
• É preciso criar um menu
com base numa lista de
itens
• É preciso remodelar o
menu de modo a
podermos adicionar a
nova componente de
negócio da empresa
• Lista de itens para o menu
mais extensa do que a
anterior
2012 2013
PROBLEMA

6. Case Study
• Card Sorting com grupo
de utilizadores
• Testes de usabilidade
com várias versões
possíveis de menu
• Card Sorting com grupo
de utilizadores
• Testes de usabilidade
com várias versões
possíveis de menu
2012 2013
METODOLOGIA

7. Card Sorting
desfocado de propósito :)

8. Card Sorting
desfocado de propósito :)

9. Case Study
• Wireframes (incluiam
todos os menus e sub-
menus abertos e
fechados)
• Versão em Excel da
arquitetura de informação
• Página HTMLcom
menus e sub-menus a
abrir e fechar
• Versão em Excel da
arquitetura de informação
2012 2013
APRESENTAÇÃO DOS RESULTADOS

10. Principais Diferenças...

11. Com Wireframes
• Ainteracção com os intervenientes não foi tão ágil, pois são
pessoas que precisam de ver as coisas a acontecer e a
mexer para poderem tomar decisões.
• Processo iterativo mais lento, pois era necessário actualizar
os wireframes entre reuniões.

12. Com Protótipo HTML
• Ainteracção foi bastante mais ágil.
• As alterações podem ser feitas durante as reuniões em
tempo real.
• Todos os participantes têm acesso a um URLpara poderem
experimentar e partilhar mais facilmente com outros
intervenientes e tomadores de decisão.
• Processo com muito mais iterações e feedback bastante
positivo por parte dos intervenientes

15. Porquê preferir HTML?
• Amaioria do software de criação de wireframes já permite ter
elementos clicáveis e interativos.
• Mas implica conhecer e saber usar o software e as
alerações nunca são imediatas para um cliente menos tech-
savvy
• HTMLpode ser visto e interagido por vários intervenientes,
num browser

16. Vantagens a longo prazo
• Alterações à estrutura podem ser feitas em vários momentos
do projecto.
• O URLdo protótipo é sempre o mesmo, acessível em
qualquer browser e em qualquer altura por qualquer pessoa.

17. Desvantagens
• É preciso saber (algum) HTML

18. Frameworks
• Usar frameworks de HTMLagiliza bastante este processo
• Amaior parte dos elementos já estão pré-concebidos (ex:
menus com sub-menus)

20. E vocês?
• Experiências parecidas?
• Reultados semelhantes ou totalmente
diferentes?
• Outras alternativas?

21. Obrigado
IvoGomes
ivo.gomes@co.sapo.pt