Aula8. Projeto de Interface com o usuário

A

Prof. Dra. Sílvia Dotta

Aula 8. IHC – Projeto de Interface com o Usuário

IHM Interface Humano-Máquina

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

A

Etapas do Projeto de Interface

Etapas do Projeto de Interface• Identificação dos requisitos do usuário, das

tarefas e do ambiente

• Criação de diferentes cenários dos usuários

• Criação do lay-out de tela (a partir de Protótipos) que ilustra o projeto gráfico, Protótipos) que ilustra o projeto gráfico, colocação de ícones, definição de textos, títulos, janelas, menus principais e secundários

Projeto de Interface

• Para que uma interface proporcione usabilidade é necessário fazer uma análise criteriosa do usuário

• Características Humanas Relevantes no • Características Humanas Relevantes no projeto de uma interface:–Percepção–Memória–Aprendizado–Habilidade–Diferenças Individuais

Uso de Guidelines para projeto de interfaces

• Ergonomia

• Metáforas (uso de conhecimento prévio para o entendimento de novas situações. Ex: sala virtual para conversa)virtual para conversa)

• Mensagens de erro

• Feedback

• Ajuda

• Apresentação visual (lay-out, cores, fontes, textos, ícones, animações...)

1. Busca de consistência

2. Permitir uso de atalhos para experientes

3. Oferecer feedback informativo

4. Organização dos diálogos de interação

Regras de ouro no desenvolvimento de interfaces Shneiderman (1998)

4. Organização dos diálogos de interação

5. Prover prevenção de erros e fácil tratamento

6. Prover fácil reversão das ações

7. Suportar controle local das ações

8. Reduzir a demanda por memorização

Regras de ouro no desenvolvimento de interfaces• Consistência: este item cobre aspectos relativos

desde terminologia empregada, passando por seqüências de ações executadas em situações semelhantes, até detalhes como cores, fontes e menus;menus;

• Atalhos para usuários experientes: a disponibilização de teclas de atalho ou de outras formas de acelerar o processo de interação é muito importante para tornar o sistema mais produtivo a usuários experientes;

Regras de ouro no desenvolvimento de interfaces• Feedback informativo: é essencial que o usuário

saiba o que está acontecendo com o sistema para ter segurança sobre a execução das tarefas requisitadas;

• Organização dos diálogos de interação: as seqüências de ações para desempenhar uma determinada tarefa devem ser organizadas em grupos com início e fim bem definidos, a fim de deixar claro ao usuário o que deve ser feito para executar algo e quando uma tarefa está concluída;

Regras de ouro no desenvolvimento de interfaces• Prevenção de erros de usuários: Todos os

esforços devem ser empenhados no sentido de prevenir a maior quantidade de falhas possível.

• Reversibilidade de ações: Devem ser oferecidos recursos para corrigir erros durante a execução recursos para corrigir erros durante a execução do sistema, como o comando de desfazer ações anteriores. Prover boas mensagens de erros e possuir recursos de ajuda on-line para facilitar a busca de soluções em situações confusas são expedientes que também facilitam bastante a vida dos usuários;

Regras de ouro no desenvolvimento de interfaces• Controle do usuário sobre o sistema: sendo o usuário o

elemento racional da relação homem-computador, ele deve se sentir com o controle da situação em que está envolvido com o sistema;

• Redução da necessidade de memorização: o usuário • Redução da necessidade de memorização: o usuário deve precisar memorizar o mínimo de informações possível sobre a interação com o sistema. Para tanto, na medida do possível, comandos devem ser substituídos por opções de menu, números de objetos por nomes, dentre outros, além de ser essencial o acesso do usuário à documentação do sistema para esclarecer eventuais dúvidas.

Projeto de Interface

• Que informação colocar numa tela?

• Fornecer somente informações essenciais à tomada de decisão ou execução de uma açãoexecução de uma ação

• Fornecer todos os dados relacionados a uma tarefa em uma única tela (se possível). Não se deve ter que lembrar de um dados da tela anterior.

Características de uma boa tela

– Aparência limpa e ordenada;

– Indicação óbvia dos dados que estão sendo mostrados e o que deve ser feito com eles;

– Informação esteja onde se espera que esteja;

– Indicação clara do que se relaciona com o que (cabeçalhos, instruções,

Projeto de Interface

Indicação clara do que se relaciona com o que (cabeçalhos, instruções, opções, etc);

– Vocabulário simples e explícito;

– Modo simples de encontrar o que está no sistema e como obtê-lo;

– Indicação de quando uma ação poderia realizar mudanças permanentes nos dados ou no sistema.

Projeto de Telas

• Como colocar informações na tela

– Apresentar a informação de forma utilizável diretamente, sem pedir consultas a documentos, manuais, etc;

– Usar técnicas de destaque de vídeo (negrito, sublinhado, – Usar técnicas de destaque de vídeo (negrito, sublinhado, outra cor, etc) para chamar a atenção de• ítens urgentes;

• diferentes componentes da tela

• Itens a serem manipulados

– Telas não têm pauta, logo, às vezes é preciso guiar o olhar do usuário através de linhas, tracejados, pontilhados ou outra técnica;

– A aparência e os procedimentos devem ser coerentes.

Características de um bom diálogo (comunicação/ interação)

• Fácil de aprender

• Fácil de usar

• Fácil de adaptar e modificar• Fácil de adaptar e modificar

• Capacidade de detectar erros

• Eficiente

• Consistente

Metas de Projetos de Interfaces

• Redução da carga de trabalho visual

• Redução da carga de trabalho intelectual

• Redução da carga de trabalho motora

• Redução da carga de trabalho mental• Redução da carga de trabalho mental

• Minimização ou eliminação de quaisquer encargos ouinstruções impostas por aspectos tecnológicos

• Elevação da produtividade

• Aumento do grau de satisfação

Erros mais comuns em Projetos

• Legendas confusas e questões mal formuladas

• Ênfase inadequada de tipos e gráficos

• Cabeçalhos desorientadores

• Solicitações de informações irrelevantes oudesnecessáriasdesnecessárias

• Solicitações de informações que impliquem o retrospectode respostas e/ou contextos

• Distribuição restrita e/ou desordenada das componentesna tela

• Deficiência em nível da qualidade da apresentação,legibilidade, aparência e disposição da informação

Erros mais comuns em Projetos• Inconsistência visual na apresentação dos

detalhes na tela• Necessidade de restrição no uso de

características e elementos de projeto

• Sobrecarga de apresentações 3D• Sobrecarga de apresentações 3D

• Sobrecarga de cores muito brilhantes

• Uso de ícones mal projetados

• Deficiência tipográfica

Princípios Básicos para Projeto de interface• Proximidade (organização das informações por proximidade,

isto é os elementos logicamente conectados também serão organizados visualmente)

• Alinhamento (não colocar os elementos de forma arbitrária em uma tela, organizá-las)

• Contraste (diferenciar claramente o conjunto de elementos gráficos)

• Repetição (de elementos do design)

•Alinhamento•Organização•Repetição de elementos de design•Contraste

FIM