aulas 7. ihc – projeto de interface com o usuário
TRANSCRIPT
![Page 1: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/1.jpg)
A
Prof. Dra. Sílvia Dotta
Aulas 7. IHC – Projeto de Interface com o Usuário
IHM Interface Humano-Máquina
![Page 2: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/2.jpg)
Processo de desenvolvimento da interface
![Page 3: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/3.jpg)
Projeto de Interface com o usuá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”
![Page 4: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/4.jpg)
• 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.
Projeto de Interface - requisitos
• 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.
![Page 5: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/5.jpg)
A informação “comunica” e se torna consistente quando:
� Possui uma categorização lógica e natural para o usuário dentro do cenário de uso.
Projeto de Interface – design de informação
� 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.
![Page 6: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/6.jpg)
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.
Projeto de Interface - AI
� 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.
![Page 7: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/7.jpg)
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 agregampistas sobre os subníveis.� Se errarmos na definição das primeiras categorias, o trabalho
Projeto de Interface - AI
� Se errarmos na definição das primeiras categorias, o trabalhoestará 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.
![Page 8: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/8.jpg)
Elementos de linguagem e comunicação
•Cores.•Símbolos.•Idioma.•Padrões Estéticos.•Tipos e temas de fotos.
Projeto de Interface - AI
•Tipos e temas de fotos.•Sons e música.• Etc..
![Page 9: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/9.jpg)
Wireframes
•Wireframes devem determinar a proporcionalidade dos elementos de informação e interação.•Wireframe deve determinar quais os tipos de interação aparecemem cada nível de informação.•Wireframe deve determinar o comportamento e a posição dos
Projeto de Interface - AI
•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.
![Page 10: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/10.jpg)
Projeto de Interface - AI
Wireframes
![Page 11: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/11.jpg)
Projeto de Interface - AI
Wireframes
![Page 12: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/12.jpg)
Projeto de Interface - AI
Wireframes
![Page 13: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/13.jpg)
Projeto de Interface - AI
Wireframes
![Page 14: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/14.jpg)
Projeto de Interface - AI
Wireframes
![Page 15: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/15.jpg)
Projeto de Interface - AI
Wireframes
![Page 16: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/16.jpg)
Projeto de Interface - AIhttp://www.axure.com/features
![Page 17: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/17.jpg)
Aná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;
Processo de desenvolvimento da interface
– Identificar quais são;
– Refiná-las;
– Tarefas resultam em objetos (ícones, menus,
etc) e ações (como manipular/organizar estes
objetos).
![Page 18: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/18.jpg)
Processo de desenvolvimento da interface
Projeto
• 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.
![Page 19: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/19.jpg)
Prototipaçã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.
Processo de desenvolvimento da interface
com funcionalidade reduzida.
• Protótipo vertical: Profundidade: Interface e Funcionalidade completas de uma parte do sistema.
![Page 20: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/20.jpg)
Avaliaçã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.
Processo de desenvolvimento da interface
versão final do sistema.
![Page 21: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/21.jpg)
AVALIAÇÃ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
Processo de desenvolvimento da interface
• 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).
![Page 22: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/22.jpg)
Processo de desenvolvimento da interface
![Page 23: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/23.jpg)
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• Guias para Projeto de Interface
• Lay-outs de tela e cenários
de usuários
• Prototipação
![Page 24: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/24.jpg)
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. antes que o sistema venha realmente a ser construído.
![Page 25: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/25.jpg)
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)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?
![Page 26: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/26.jpg)
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•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
![Page 27: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/27.jpg)
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 em ganho de aniversário dos pais e avós com o que conseguiu em
três meses dando aulas de tênis no condomínio e transformou tudo em quase um
lote de ações Vale. “No primeiro mês, meu lucro foi de 31%. Achei a Bolsa de
Valores um paraíso”, conta.
Sallum acompanha os gráficos de mais de 80 ações na tela do seu sistema de
Home Broker. A um movimento destoante, busca o motivo. Se a justificativa
convence e sugere mais alta, compra o papel que geralmente fica pouco na
carteira. O estudante gosta de negociar ações de empresas menores e mais
sujeitas à volatilidade. E já aprendeu que para evitar perdas nesses casos, deve
entrar já de olho na saída. “Programo o stop loss (ordem de venda que limita o
prejuízo) logo abaixo do preço da compra”, ensina. “Pois quando vem um tubarão
vendendo, não tem para onde correr.”
Cenário construído para o investbolsa.com.br
![Page 28: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/28.jpg)
A
Tipos de Protótipos
![Page 29: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/29.jpg)
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.dispendioso.
![Page 30: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/30.jpg)
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 permitem demonstrar o comportamento da interface muito cedo no desenvolvimento
![Page 31: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/31.jpg)
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.
![Page 32: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/32.jpg)
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
![Page 33: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/33.jpg)
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
![Page 34: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/34.jpg)
Exemplo de Protótipo de baixa fidelidade
• 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.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).
![Page 35: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/35.jpg)
![Page 36: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/36.jpg)
Interface Humano Máquina
![Page 37: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/37.jpg)
A
Protótipos de Alta Fidelidade
![Page 38: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/38.jpg)
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
![Page 39: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/39.jpg)
Protótipos de Alta Fidelidade
• A apresentação formal sugere “produto acabado”, pois além de visualizar as conexões, conexões, conseguimos visualizar o design: o arranjo gráfico, o uso das cores, os tipos, etc.Soft-shell mobile phone –
http://www.nec-design.co.jp/showcase/
![Page 40: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/40.jpg)
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
Package http://www.nec-design.co.jp/showcase/
![Page 41: Aulas 7. IHC – Projeto de Interface com o Usuário](https://reader037.vdocuments.net/reader037/viewer/2022100304/555b2db2d8b42ae82e8b4b62/html5/thumbnails/41.jpg)
Comparativamente temos:
Tipo Protótipo
Fator + positivo
Aplicação no ciclo de desenvolv.
Custo de alterar a aparência
Custo de alterar a seqüência
Baixa
Flexibilidade, facilidade de alterar
InícioQuase
BaixoBaixa fidelidade
alterar seqüência, comportamento geral
InícioQuase
nenhumBaixo
Alta fidelidade
Fidelidade da aparência (Look & Feel)
Final Baixo Alto