aulas 7. ihc – projeto de interface com o usuário
TRANSCRIPT
A
Prof. Dra. Sílvia Dotta
Aulas 7. IHC – Projeto de Interface com o Usuário
IHM Interface Humano-Máquina
Processo de desenvolvimento da interface
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”
• 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.
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.
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.
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.
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..
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.
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 - AI
Wireframes
Projeto de Interface - AIhttp://www.axure.com/features
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).
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.
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.
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.
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).
Processo de desenvolvimento da interface
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
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.
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?
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
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
A
Tipos 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 muitos detalhes omissos
• Vantagem: não tomam muito tempo para seu desenvolvimento e não requer equipamento dispendioso.dispendioso.
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
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.
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
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
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).
Interface Humano Máquina
A
Protótipos de Alta Fidelidade
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
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/
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/
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