AIHMInterface Humano-MáquinaProf. Dra. Sílvia DottaAulas 7. IHC – Projeto de Interface com o Usuário
Processo de desenvolvimento da interface
Projeto de Interface com ousuário• O projeto de interface com o usuário cria um meio efetivo de  comunicação entre o ser h...
Projeto de Interface - requisitos• Mapa de Informações (Matrizes Categorizadas de Escopo).• Análise de Tarefas (Matrizes e...
Projeto de Interface – design deinformaçãoA informação “comunica” e se torna consistente quando: Possui uma categorização ...
Projeto de Interface - AI O que é mais importante ao projetarmos e construírmos interfaces?  Harmonizar Elementos de Inter...
Projeto de Interface - AI Não-linearidade e resgate do “fio da meada”:   É o grande desafio.   Conteúdo linear e com grand...
Projeto de Interface - AI Elementos de linguagem e comunicação •Cores. •Símbolos. •Idioma. •Padrões Estéticos. •Tipos e te...
Projeto de Interface - AI Wireframes •Wireframes devem determinar a proporcionalidade dos elementos de informação e intera...
Projeto de Interface - AI Wireframes
Projeto de Interface - AI Wireframes
Projeto de Interface - AI                            Wireframes
Projeto de Interface - AI                            Wireframes
Projeto de Interface - AI                            Wireframes
Projeto de Interface - AIWireframes
Projeto de Interface - AIhttp://www.axure.com/features
Processo de desenvolvimento da interfaceAnálise• Qual o perfil do usuário ?  – Podem haver várias percepções do sistema ?•...
Processo de desenvolvimento da interfaceProjeto• Que mecanismos de controle utilizar  – Formas de alterar e perceber alter...
Processo de desenvolvimento da interfacePrototipação  • Visa provocar críticas/sugestões do usuário  • Prototipação     • ...
Processo de desenvolvimento da interfaceAvaliação• Deve ser feita a cada ciclo;• Submetida aos usuários de diferentes perf...
Processo de desenvolvimento da interfaceAVALIAÇÃO DAS INTERFACES• O papel da avaliação é verificar se realmente o sistema ...
Processo de desenvolvimento da interface
Iniciando o projeto de interface....• Conhecer o usuário (reuniões,pesquisa, entrevistas,   questionários...). Definir tar...
Prototipação - Conceitos • É uma abordagem baseada numa visão evolutiva do   desenvolvimento de software, afetando o proce...
Personas É um personagem fictício, arquétipo hipotético de um grupo de usuários reais, criada para descrever um usuário tí...
Cenários Descrevem o comportamento e as experiências dos atores, para atender a vários objetivos:    •Descrever uma histór...
Personas e Cenários                    Luiz Fernando Sallum, 16 anos, Masculino,                    Rio de Janeiro, Classe...
ATipos de Protótipos
Protótipo de Baixa Fidelidade• Fidelidade refere-se ao nível de detalhe.• é uma representação artística, um esboço, com  m...
Protótipos de Baixa Fidelidade• são construídos, na  maioria das vezes, em  papel e podem ser  testados com  usuários reai...
Protótipos de baixa fidelidade• seu uso pode aumentar a qualidade das  interfaces, pois, permitem várias avaliações pelo  ...
Protótipos de baixa fidelidade• com eles, os usuários são obrigados a pensar no  conteúdo em vez da aparência, uma vez que...
Protótipos Físicos de Baixa Fidelidade  • Neste tipo de protótipo, as dimensões e o    aspecto são importantes, embora ain...
Exemplo de Protótipo de baixafidelidade • Protótipos em papel: é desenvolvido um conjunto de   interfaces associadas a cen...
Interface Humano Máquina
AProtótipos de Alta Fidelidade
Protótipos de Alta Fidelidade• assemelham-se ao produto final, neles os detalhes são  importantes, pois, simulam todas as ...
Protótipos de Alta Fidelidade                                        • A apresentação                                     ...
Protótipos de Alta Fidelidade• acarreta mais tempo  e dinheiro investido  em sua confecção do  que no protótipo de  baixa ...
Comparativamente temos:                             Aplicação     Custo de    Custo deTipo         Fator +                ...
Aulas 7. IHC – Projeto de Interface com o Usuário
Upcoming SlideShare
Loading in...5
×

Aulas 7. IHC – Projeto de Interface com o Usuário

1,312

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,312
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
87
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Aulas 7. IHC – Projeto de Interface com o Usuário

  1. 1. AIHMInterface Humano-MáquinaProf. Dra. Sílvia DottaAulas 7. IHC – Projeto de Interface com o Usuário
  2. 2. Processo de desenvolvimento da interface
  3. 3. Projeto de Interface com ousuário• O projeto de interface com o usuário cria um meio efetivo de comunicação entre o ser humano e o computador “Para o usuário, a interface é o sistema”
  4. 4. Projeto de Interface - requisitos• Mapa de Informações (Matrizes Categorizadas de Escopo).• Análise de Tarefas (Matrizes e Fluxogramas de Tarefas).• Regras de Negócios Fluxogramas e Documentos de Negócios).• Testes taxonômicos.• Escolher os elementos da interface. (texto, áudio, vídeo, foto,infográficos)• Contexto de uso.• Cenário de uso.• Requisitos para “fazer acontecer”. Determinar os recursos técnicos para a construção da interface. Introduzir os elementos corretos de linguagem na comunicaçãocom o público-alvo. Criar conceito estético. Introduzir a Direção de Arte no timing correto.
  5. 5. Projeto de Interface – design deinformaçãoA informação “comunica” e se torna consistente quando: Possui uma categorização lógica e natural para o usuário dentro docenário de uso. Pode ser localizada sempre no mesmo lugar. Não perde a identidade quando associada a outros conteúdos, masagrega outros sentidos. É importante e útil dentro dos contexto e cenário de uso propostospara o projeto.
  6. 6. Projeto de Interface - AI O que é mais importante ao projetarmos e construírmos interfaces? Harmonizar Elementos de Interação. Distribuir a informação de forma lógica e natural. Nunca sobrepor conceitos estéticos à Arquitetura da Informação. Harmonizar menus e categorias de navegação. Flexibilizar sem bagunçar. Refletir com exatidão as regras de negócio. Tratar a parte de conteúdo como um produto editorial. Tratar a interação com sistema como produto interativo. Mensurar retornos para possíveis correções. Cuidado extremo com a redudância taxonômica. Observar o quesito acessibilidade. Mensurar o momento correto de introduzir inovações. Dosar o conteúdo e a oferta de novas áreas ou recursos/ conteúdos.
  7. 7. Projeto de Interface - AI Não-linearidade e resgate do “fio da meada”: É o grande desafio. Conteúdo linear e com grande profundidade pode ser editado. As taxonomias são de grande importância porque agregam pistas sobre os subníveis. Se errarmos na definição das primeiras categorias, o trabalho estará comprometido. A memorização da informação depende também da forma como ela é apresentada. As associações feitas durante a navegação substituem a sequência temporal. Definir núcleos da informação é algo fundamental.
  8. 8. Projeto de Interface - AI Elementos de linguagem e comunicação •Cores. •Símbolos. •Idioma. •Padrões Estéticos. •Tipos e temas de fotos. •Sons e música. • Etc..
  9. 9. Projeto de Interface - AI Wireframes •Wireframes devem determinar a proporcionalidade dos elementos de informação e interação. •Wireframe deve determinar quais os tipos de interação aparecem em cada nível de informação. •Wireframe deve determinar o comportamento e a posição dos elementos nas páginas. •Wireframe reflete a sensibilidade editorial do projeto. •Wireframe deve refletir a taxonomia final. •Wireframe deve especificar as etapas de interação.
  10. 10. Projeto de Interface - AI Wireframes
  11. 11. Projeto de Interface - AI Wireframes
  12. 12. Projeto de Interface - AI Wireframes
  13. 13. Projeto de Interface - AI Wireframes
  14. 14. Projeto de Interface - AI Wireframes
  15. 15. Projeto de Interface - AIWireframes
  16. 16. Projeto de Interface - AIhttp://www.axure.com/features
  17. 17. Processo de desenvolvimento da interfaceAnálise• Qual o perfil do usuário ? – Podem haver várias percepções do sistema ?• Quais as tarefas usadas para atingir as metas? – Identificar quais são; – Refiná-las; – Tarefas resultam em objetos (ícones, menus, etc) e ações (como manipular/organizar estes objetos).
  18. 18. Processo de desenvolvimento da interfaceProjeto• Que mecanismos de controle utilizar – Formas de alterar e perceber alterações do estado do sistema; – Menus ? Formulários ? Comandos ?• Como será a ajuda ao usuário – Mensagens (construtivas, a culpa não é do usuário); – Sistema de ajuda on-line.
  19. 19. Processo de desenvolvimento da interfacePrototipação • Visa provocar críticas/sugestões do usuário • Prototipação • Versão simplificada do sistema • Protótipo horizontal: Amplitude: Interface quase completa mas com funcionalidade reduzida. • Protótipo vertical: Profundidade: Interface e Funcionalidade completas de uma parte do sistema.
  20. 20. Processo de desenvolvimento da interfaceAvaliação• Deve ser feita a cada ciclo;• Submetida aos usuários de diferentes perfis (caso existam);• A cada novo ciclo os protótipos tendem a se aproximar da versão final do sistema.
  21. 21. Processo de desenvolvimento da interfaceAVALIAÇÃO DAS INTERFACES• O papel da avaliação é verificar se realmente o sistema comporta-se como esperado e atende os requisitos dos usuários.• Revisão de Guidelines: a interface é checada com os itens do guideline de desenvolvimento de interfaces;• Inspeção formal de usabilidade: os méritos e defeitos da interface são discutidos com relação aos itens que caracterizam a usabilidade das interfaces. (Shneiderman, 1998).
  22. 22. Processo de desenvolvimento da interface
  23. 23. Iniciando o projeto de interface....• Conhecer o usuário (reuniões,pesquisa, entrevistas, questionários...). Definir tarefas, necessidades ... Ver o contexto • Geração de Idéias (brainstorming, mindmaps) • Guias para Projeto de Interface • Lay-outs de tela e cenários de usuários • Prototipação
  24. 24. Prototipação - Conceitos • É uma abordagem baseada numa visão evolutiva do desenvolvimento de software, afetando o processo como um todo. Esta abordagem envolve a produção de versões de protótipos (análogo a maquetes para a arquitetura) - de um sistema futuro com o qual pode-se realizar verificações e experimentações para se avaliar algumas de suas qualidades antes que o sistema venha realmente a ser construído.
  25. 25. Personas É um personagem fictício, arquétipo hipotético de um grupo de usuários reais, criada para descrever um usuário típico. Elementos de uma persona •Identidade: nome, idade e outros dados demográficos •Status: primária, secundária ou outro stakeholder (p. ex.: antiusuário) •Objetivos: com o sistema e fora dele •Habilidades: especialidade (educação, treinamento e competências) •Tarefas: quais? Frequência? Importância? Duração? •Relacionamentos: ajuda a identificar stakeholders •Requisitos: de que a persona precisa? •Expectativas: como a persona organiza as informações? Como acredita que o sistema funciona?
  26. 26. Cenários Descrevem o comportamento e as experiências dos atores, para atender a vários objetivos: •Descrever uma história num domínio de atividade •Capturar requisitos e auxiliar do entendimento da atividade •Levantar questões sobre a introdução de tecnologia •Explorar diferentes soluções de design •Avaliar se um produto satisfaz a necessidade de seus usuários Elementos de um cenário: ambiente ou contexto; atores, objetivos, planejamento, ações, eventos, avaliação
  27. 27. Personas e Cenários Luiz Fernando Sallum, 16 anos, Masculino, Rio de Janeiro, Classe social B, Mora com os pais e avós, estudante do Ensino Médio, dá aula de tênis no condomínio onde mora. Do alto dos seus 16 anos, o carioca Luiz Fernando Sallum é um investidor do tipo “agressivo”. O estudante do Ensino Médio acompanha de perto as notícias sobre o pregão há um ano e comprou suas primeiras ações em janeiro. Juntou o dinheiro ganho de aniversário dos pais e avós com o que conseguiu emtrês meses dando aulas de tênis no condomínio e transformou tudo em quase umlote de ações Vale. “No primeiro mês, meu lucro foi de 31%. Achei a Bolsa deValores um paraíso”, conta.Sallum acompanha os gráficos de mais de 80 ações na tela do seu sistema deHome Broker. A um movimento destoante, busca o motivo. Se a justificativaconvence e sugere mais alta, compra o papel que geralmente fica pouco nacarteira. O estudante gosta de negociar ações de empresas menores e maissujeitas à volatilidade. E já aprendeu que para evitar perdas nesses casos, deveentrar já de olho na saída. “Programo o stop loss (ordem de venda que limita oprejuízo) logo abaixo do preço da compra”, ensina. “Pois quando vem um tubarãovendendo, não tem para onde correr.” Cenário construído para o investbolsa.com.br
  28. 28. ATipos de Protótipos
  29. 29. Protótipo de Baixa Fidelidade• Fidelidade refere-se ao nível de detalhe.• é uma representação artística, um esboço, com muitos detalhes omissos• Vantagem: não tomam muito tempo para seu desenvolvimento e não requer equipamento dispendioso.
  30. 30. Protótipos de Baixa Fidelidade• são construídos, na maioria das vezes, em papel e podem ser testados com usuários reais, assim, permitem demonstrar o comportamento da interface muito cedo no desenvolvimento
  31. 31. Protótipos de baixa fidelidade• seu uso pode aumentar a qualidade das interfaces, pois, permitem várias avaliações pelo usuário em pouco tempo e o retorno imediato.
  32. 32. Protótipos de baixa fidelidade• com eles, os usuários são obrigados a pensar no conteúdo em vez da aparência, uma vez que somente são realizados esboços que servem como protótipos
  33. 33. Protótipos Físicos de Baixa Fidelidade • Neste tipo de protótipo, as dimensões e o aspecto são importantes, embora ainda possam ser feitos com materiais simples como cartolina e massa de modelar
  34. 34. Exemplo de Protótipo de baixafidelidade • Protótipos em papel: é desenvolvido um conjunto de interfaces associadas a cenários de utilização que são apresentados aos usuários. • Este tipo de prototipação é barata e eficiente (Rogers, Sharp, Preece, 2002)(Kotonya, Sommerville 1998). • É mais indicada quando o sistema a desenvolver é software. Não é necessário desenvolver software executável. • Os analistas e usuários percorrem estes cenários, simulando a utilização do sistema, sendo analisado as reações dos utilizadores, a informação requerida e a forma de interação com o sistema. • Este método é muito eficiente para sistemas interativos, sendo considerado como protótipo de baixa fidelidade (Rogers, Sharp, Preece, 2002).
  35. 35. Interface Humano Máquina
  36. 36. AProtótipos de Alta Fidelidade
  37. 37. Protótipos de Alta Fidelidade• assemelham-se ao produto final, neles os detalhes são importantes, pois, simulam todas as funcionalidades do sistema. Wearable computer - Eurotech
  38. 38. Protótipos de Alta Fidelidade • A apresentação formal sugere “produto acabado”, pois além de visualizar as conexões, conseguimos visualizar o design: o arranjo gráfico, o uso das cores, os tipos,Soft-shell mobile phone – etc.http://www.nec-design.co.jp/showcase/
  39. 39. Protótipos de Alta Fidelidade• acarreta mais tempo e dinheiro investido em sua confecção do que no protótipo de baixa fidelidade P-ISM : Pen-style Personal Networking Gadget Packagehttp://www.nec-design.co.jp/showcase/
  40. 40. Comparativamente temos: Aplicação Custo de Custo deTipo Fator + no ciclo de alterar a alterar aProtótipo positivo desenvolv. aparência seqüência Flexibilidade, facilidade deBaixa alterar Quase Início Baixofidelidade seqüência, nenhum comportament o geral Fidelidade daAlta aparência Final Baixo Altofidelidade (Look & Feel)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×