ERGONOMIAINFORMACIONAL E IHCInteração Humano-ComputadorRosendy Jess Fernandez Galaborj@fgalabo.com@zndgalabo
DESENVOLVIMENTOMapas de site,Fluxos de Tarefa,WireframePrototipagem
Mapas do site• Os mapas do site ajudam a identificar a estrutura dossites na web e das aplicações.• Eles podem mostrar hie...
Mapas do site• Na maioria dos casos, um mapa do site, você usará ummapa do site para mostrar aos membros da equipe aaos cl...
Mapas do site
Fluxo de tarefas• Identificam caminhos ou processos que os usuários (e,às vezes, um sistema) farão enquanto avançam atravé...
Mapa do site e Fluxo de tarefasEmbora os mapas do site e os fluxos de tarefas possamser parecidos inicialmente, os dois ti...
Elementos Básicos de Mapas do site efluxo de tarefas• Para que as criações possam ser interpretadas por umpúblico maior, é...
Elementos Básicos de Mapas do site efluxo de tarefasPágina• Uma página é a unidade básica da experiência dousuário na web,...
Elementos Básicos de Mapas do site efluxo de tarefasPágina• Uma página é a unidade básica da experiência dousuário na web,...
Elementos Básicos de Mapas do site efluxo de tarefasPilha de Páginas• Representa várias páginas de conteúdo semelhante.• U...
Elementos Básicos de Mapas do site efluxo de tarefasPonto de decisão• Um ponto de decisão é usado para mostrar o caminhoqu...
Elementos Básicos de Mapas do site efluxo de tarefasPonto de decisão• Um ponto de decisão é usado para mostrar o caminhoqu...
Elementos Básicos de Mapas do site efluxo de tarefasConectores e Setas• São utilizados para mostrar o movimento ou progres...
Elementos Básicos de Mapas do site efluxo de tarefasConectores e Setas• Os conectores com barra cruzada podem ser utilizad...
Elementos Básicos de Mapas do site efluxo de tarefasCondições• Uma linha tracejada é uma forma bem comum de exibiruma cond...
Elementos Básicos de Mapas do site efluxo de tarefas• Outros elementos para ajudar a articular os mapas de sitee fluxos de...
WIREFRAMES
Wireframe• Desenho da interface• É utilizado para identificar os elementos que serãoexibidos na página ou na tela, tais co...
Wireframe• Geralmente são criados em preto e branco ou emsombras de cinza, utiliza substituintes para as imagense não entr...
Wireframe• É chamado de “Rectangle phase” porque os esboçoscomeçar por subdividir cada exibição em rígidas áreasretangular...
Wireframe: AnotaçõesAs anotações são explicações e notas sobre um elementoou uma interação em um wireframe. Normalmente, e...
Criando Wireframes• Para criar um wireframe, geralmente se precisa de umasérie de requisições.• É preciso ter uma compreen...
Criando Wireframes• Na adaptive pathutiliza-se seismodelos, quesimplesmenteoferecem espaço parafazer seis pequenosesboços ...
Criando Wireframes• O wireframe com anotações detalha cada elemento dapágina, assim como as chamadas para ação esperadas e...
Técnica de cardsorting• É utilizada para entender como os usuários categorizamo conteúdo a ser apresentado em um site. (SA...
Técnica de cardsorting• O cardsorting é empregado para verificar a diferençaentre o modo pelo qual os usuários inexperient...
Técnica de cardsorting• A técnica consiste em escrever pequenos cartõesvários tópicos ou temas. Eles são distribuídos a um...
Técnica de cardsortingOs objetivos da aplicação da técnica de cardsorting são:• Perceber como cada perfil de usuário pode ...
PROTOTIPAGEM
Prototipagem• É uma representação limitada de um design quepermite aos usuários interagir com ele e explorar a suaconveniê...
Prototipagem• Tem como finalidade: Testar a viabilidade técnica deuma ideia, esclarecer alguns requisitos vagos, realizara...
PrototipagemSegundo (Santa Rosa e Moraes, 2005) os protótipos sãoclassificados em:• Prototipagem de baixa-precisão - Utili...
Prototipagem: Vantagens e desvantagensProblemas da prototipagem em alta precisão• Tempo necessário para construção• Após d...
Prototipagem: Vantagens e desvantagensVantagens da prototipagem em papel• Rapidez e Baixo custo• Identificação de problema...
Prototipagem: Vantagens e desvantagensDesvantagens da prototipagem em papel• Dificuldade de simular o comportamento de alg...
Prototipagem em papelSuprimentos utilizados na prototipagem em papel• Quadro de avisos branco• Papel em branco• Fichas• Ca...
Referências bibliográficas• BARBOSA, S.D.J.; SILVA, B.S. Interacao Humano-Computador.Editora Campus - Elsevier, 2010.• COO...
Mapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Próximos SlideShares
Carregando em…5
×

Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem

4.219 visualizações

Publicada em

Ergonomia Informacional e IHC (Interação Humano-computador) -
Design - UFMA

Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem em IHC

Prof. Dr. Carlos de Salles Soares Neto

Estágio a docência
Professor Auxiliar: Rosendy Jess Fernandez Galabo

Publicada em: Design
1 comentário
10 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
4.219
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
114
Comentários
1
Gostaram
10
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem

  1. 1. ERGONOMIAINFORMACIONAL E IHCInteração Humano-ComputadorRosendy Jess Fernandez Galaborj@fgalabo.com@zndgalabo
  2. 2. DESENVOLVIMENTOMapas de site,Fluxos de Tarefa,WireframePrototipagem
  3. 3. Mapas do site• Os mapas do site ajudam a identificar a estrutura dossites na web e das aplicações.• Eles podem mostrar hierarquias e conexões quepermitem que o seu público obtenha uma compreensãode onde os usuários podem localizar o conteúdo.• Um mapa do site é simplesmente uma maneira visual deexibir páginas representativas de um website ouqualquer tipo de aplicação.
  4. 4. Mapas do site• Na maioria dos casos, um mapa do site, você usará ummapa do site para mostrar aos membros da equipe aaos clientes como conteúdo de um website seráorganizado.• Ele fornecerá um panorama da navegação do site e emalguns casos, exibirá todas as conexões que cadapágina tem.
  5. 5. Mapas do site
  6. 6. Fluxo de tarefas• Identificam caminhos ou processos que os usuários (e,às vezes, um sistema) farão enquanto avançam atravésdo website ou aplicação.
  7. 7. Mapa do site e Fluxo de tarefasEmbora os mapas do site e os fluxos de tarefas possamser parecidos inicialmente, os dois tipos de diagramasservem para finalidades diferentes:• Um mapa do site lhe diz a hierarquia visual do layoutou de uma aplicação• Um fluxo de tarefa lhe dá detalhes das opções dosusuários e dos caminhos que eles poderão seguir.
  8. 8. Elementos Básicos de Mapas do site efluxo de tarefas• Para que as criações possam ser interpretadas por umpúblico maior, é melhor utilizar um grupo de formatospadrão.• O Vocabulário Visual da arquitetura da informação é umpadrão criado por Jesse James Garret.
  9. 9. Elementos Básicos de Mapas do site efluxo de tarefasPágina• Uma página é a unidade básica da experiência dousuário na web, uma página é bastante significativa.• O formato mais simples e comumente usado é umretângulo simples.
  10. 10. Elementos Básicos de Mapas do site efluxo de tarefasPágina• Uma página é a unidade básica da experiência dousuário na web, uma página é bastante significativa.• O formato mais simples e comumente usado é umretângulo simples.
  11. 11. Elementos Básicos de Mapas do site efluxo de tarefasPilha de Páginas• Representa várias páginas de conteúdo semelhante.• Uma maneira fácil para compreender pilha de páginas épensar no conteúdo dinâmico, como a página de blogcomum criada usando um sistema de publicação.• As páginas são feitas uma vez e são modelos de design
  12. 12. Elementos Básicos de Mapas do site efluxo de tarefasPonto de decisão• Um ponto de decisão é usado para mostrar o caminhoque um usuário pode seguir dependendo da respostapara um pergunta.• A resposta para essa pergunta determinaria qual página(ou visualização de conteúdo seria exibida).
  13. 13. Elementos Básicos de Mapas do site efluxo de tarefasPonto de decisão• Um ponto de decisão é usado para mostrar o caminhoque um usuário pode seguir dependendo da respostapara um pergunta.• A resposta para essa pergunta determinaria qual página(ou visualização de conteúdo seria exibida).
  14. 14. Elementos Básicos de Mapas do site efluxo de tarefasConectores e Setas• São utilizados para mostrar o movimento ou progressoentre páginas, pilhas de páginas, pontos de decisão eassim por diante. Os conectores geralmente aparecemonde há uma chamada para ação de uma página paraoutra.
  15. 15. Elementos Básicos de Mapas do site efluxo de tarefasConectores e Setas• Os conectores com barra cruzada podem ser utilizadospara identificar que o movimento que retorna para apágina de onde você originou (fluxo contrário) não estámais disponível.
  16. 16. Elementos Básicos de Mapas do site efluxo de tarefasCondições• Uma linha tracejada é uma forma bem comum de exibiruma condição. Ela pode aparecer em mapas de site e emfluxos de tarefa.• Pode-se utilizar uma linha tracejada como um conectorou como uma caixa em volta de uma área paradestacar que uma conexão para uma página écondicional baseada em alguma outra ação ou evento
  17. 17. Elementos Básicos de Mapas do site efluxo de tarefas• Outros elementos para ajudar a articular os mapas de sitee fluxos de tarefa podem ser encontrados em:• www.jjg.net/ia/visiovocab/
  18. 18. WIREFRAMES
  19. 19. Wireframe• Desenho da interface• É utilizado para identificar os elementos que serãoexibidos na página ou na tela, tais como:• Navegação• Seções de conteúdo• Necessidades de imagem e/ou mídia• Elementos de forma• Chamadas para ações (CTA)
  20. 20. Wireframe• Geralmente são criados em preto e branco ou emsombras de cinza, utiliza substituintes para as imagense não entram nas especificidades das fontes (emboramuitos apliquem o tamanho da fonte para conduzirseparações dos tipos de cópias). (UNGER e CHANDLER, 2009)
  21. 21. Wireframe• É chamado de “Rectangle phase” porque os esboçoscomeçar por subdividir cada exibição em rígidas áreasretangulares correspondentes a painéis, componentesde controle (como barras de ferramentas) e outrosrecipientes de nível superior. Rotule os retângulos,ilustre e descreva como um grupo ou elemento afetaos outros. (COOPER , REINMANN E CRONIN 2007)
  22. 22. Wireframe: AnotaçõesAs anotações são explicações e notas sobre um elementoou uma interação em um wireframe. Normalmente, elascontêm informações como:• Identificação do conteúdo ou rotulação• Fonte(s) de conteúdo• Regras de exibição• Regras de interação• Destinos de interação• Regras de processo• Conteúdo/mensagem de erro
  23. 23. Criando Wireframes• Para criar um wireframe, geralmente se precisa de umasérie de requisições.• É preciso ter uma compreensão do que é que você estátentando criar para um usuário, quais as conexões euma compreensão geral das limitações e expectativastecnológicas.
  24. 24. Criando Wireframes• Na adaptive pathutiliza-se seismodelos, quesimplesmenteoferecem espaço parafazer seis pequenosesboços minimizados.
  25. 25. Criando Wireframes• O wireframe com anotações detalha cada elemento dapágina, assim como as chamadas para ação esperadas eos resultados da ação (como o carregamento de umapágina específica).
  26. 26. Técnica de cardsorting• É utilizada para entender como os usuários categorizamo conteúdo a ser apresentado em um site. (SANTA ROSA eMORAES, 2008)• Cardsorting é uma técnica de usabilidade utilizada paradescobrir o modelo mental do usuário num espaço deinformação. Uma aplicação típica é obter ideias paraestruturas de menu, pedindo aos usuários paraordenarem cartões com nome dos comandos. (Nielsen,2003)
  27. 27. Técnica de cardsorting• O cardsorting é empregado para verificar a diferençaentre o modo pelo qual os usuários inexperientes eexperientes entendem o sistema. O cardsorting geraainda sugestões de nomenclatura, visto que osusuários participam rotulando esses grupos sob títulosque consideram eficazes (Zilse, 2003).
  28. 28. Técnica de cardsorting• A técnica consiste em escrever pequenos cartõesvários tópicos ou temas. Eles são distribuídos a umconjunto de pessoas, que devem agrupá-los de formaa fazer sentido semanticamente, sendo depoisanalisados na procura por similaridade. Como resultado,obtém-se um “protótipo” de uma arquitetura deinformação de um sistema.
  29. 29. Técnica de cardsortingOs objetivos da aplicação da técnica de cardsorting são:• Perceber como cada perfil de usuário pode acessar umdeterminado conteúdo• Perceber como diferentes públicos-alvo agrupam conteúdos,possibilitando que sejam criadas estruturas de organização deinformação mais adequadas.• Identificar terminologia mais fácil de ser compreendida pelousuário.• Perceber como diferentes públicos-alvo categorizam oconteúdo.• Identificar os itens difíceis de classificar.• Identificar informações que possam pertencer a mais de umgrupo
  30. 30. PROTOTIPAGEM
  31. 31. Prototipagem• É uma representação limitada de um design quepermite aos usuários interagir com ele e explorar a suaconveniência. Pode ser imaginado como um modelo emescala menor ou parte de um software emdesenvolvimento. Entretanto, um protótipo também podeser de papel de uma tela ou conjunto de telas. (PREECE,ROGERS e SHARP. 2005)
  32. 32. Prototipagem• Tem como finalidade: Testar a viabilidade técnica deuma ideia, esclarecer alguns requisitos vagos, realizaralguns testes com usuários e avaliações ou verificar secerto rumo que se tomou no design é compatível com oresto do desenvolvimento do sistema. (SANTA ROSA e MORAES,2008)
  33. 33. PrototipagemSegundo (Santa Rosa e Moraes, 2005) os protótipos sãoclassificados em:• Prototipagem de baixa-precisão - Utiliza materiaismuito diferentes da versão final pretendida, como papel ecartolina, em vez de telas eletrônicas e metal. São úteisporque tendem a ser simples, baratos e de rápidaprodução.• Prototipagem de alta-precisão – Utiliza materiais quevocê espera que estejam no produto final e realiza umprotótipo que se parece muito mais com algo acabado.
  34. 34. Prototipagem: Vantagens e desvantagensProblemas da prototipagem em alta precisão• Tempo necessário para construção• Após desenvolvimento, programadores relutam emimplementar as alterações sugeridas• A prototipagem em alta-precisão é útil para vender ideiasa pessoas e testar questões técnicas
  35. 35. Prototipagem: Vantagens e desvantagensVantagens da prototipagem em papel• Rapidez e Baixo custo• Identificação de problemas antes da implementação• Mais e melhores opiniões dos usuários• Ajuda os desenvolvedores a pensar criativamente• Permite que os usuários se envolvam no processo• Proporcionar trabalho em grupo e comunicação• Evitar conflitos de opinião
  36. 36. Prototipagem: Vantagens e desvantagensDesvantagens da prototipagem em papel• Dificuldade de simular o comportamento de algunselementos de interface, tais como scrollbars• Dificuldade de transmissão da informação através decores e animações• Esse tipo de metodologia não permite a detecção detodos os tipos de problema de usabilidade
  37. 37. Prototipagem em papelSuprimentos utilizados na prototipagem em papel• Quadro de avisos branco• Papel em branco• Fichas• Canetas e lápis (Pretas ecoloridas)• Marca-texto• Tesoura• Fita gomadatransparente• Cola em bastão• Fita adesiva• Transparência• Corretor líquido• Post-it• Flip chart• Régua• Lápis ou coneta deponta fina• Plastificação
  38. 38. Referências bibliográficas• BARBOSA, S.D.J.; SILVA, B.S. Interacao Humano-Computador.Editora Campus - Elsevier, 2010.• COOPER,A.; Reinamann, R.; Cronin, D. About face 3: TheEssentials of Interaction Design. New York, NY: John Wiley & Sons,2007.• ZILSE, R. Análise ergonômica do trabalho dos desenvolvedoresversus o modelo mental dos usuários, tendo como foco aarquitetura da informação de websites. Rio de Janeiro, 2004.222p. Dissertação (Mestrado em Design) – Departamento de Artes eDesign, Universidade Pontíficia Católica do Rio de Janeiro• SANTA ROSA, José Guilherme; MORAES, Anamaria de. Avaliação eprojeto no design de interfaces. 1. Ed. Teresópolis, RJ: 2AB, 2008.• UNGER, R. CHANDLER, C. O Guia para Projetar UX: A Experiênciado Usuário (UX) para projetistas de conteúdo digital, aplicações eweb sites. Rio de Janeiro: Alta Books, 2009. 268p.

×