Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rapid Prototyping

802 views

Published on

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

Published in: Technology
  • Be the first to like this

Rapid Prototyping

  1. 1. Rapid Ivo Gomes Prototyping
  2. 2. 1 imagem vale por 1000 palavras
  3. 3. 1 imagem já não vale por 1000 palavras
  4. 4. Case Study • O mesmo cliente • Situações semelhantes • Metodologias iguais • Apresentação de resultados diferente
  5. 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. 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. 7. Card Sorting desfocado de propósito :)
  8. 8. Card Sorting desfocado de propósito :)
  9. 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. 10. Principais Diferenças...
  11. 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. 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
  13. 13. 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
  14. 14. 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.
  15. 15. Desvantagens • É preciso saber (algum) HTML
  16. 16. Frameworks • Usar frameworks de HTMLagiliza bastante este processo • Amaior parte dos elementos já estão pré-concebidos (ex: menus com sub-menus)
  17. 17. E vocês? • Experiências parecidas? • Reultados semelhantes ou totalmente diferentes? • Outras alternativas?
  18. 18. Obrigado IvoGomes ivo.gomes@co.sapo.pt

×