2010 05-06 b - desenho de interfaces com o utilizador

ENGENHARIA DO SOFTWARE I

Manuel Menezes de Sequeira

DCTI, ISCTE-IUL

[email protected], D6.02

As apresentações desta série baseiam-se nas apresentações disponibilizadas por Ian Sommerville, tendo sido alteradas e adaptadas primeiro por Anders Lyhne Christensen e finalmente por Manuel

Menezes de Sequeira.

mailto:[email protected]

http://www.comp.lancs.ac.uk/computing/resources/IanS/SE8/Presentations/index.html



Engenharia do Software I 2

Na aula anterior

Desenho arquitectónicoDecisões no desenho arquitectónicoOrganização de sistemasEstilos de decomposiçãoEstilos de controloArquitecturas de referência

2009/2010


Desenho de interfaces com o utilizador

2009/2010


Sumário

Desenho de interfaces com o utilizadorProblemas de desenhoHeurísticas de Nielsen para interfaces com

o utilizadorEstilos de interacçãoProcesso de desenho de interfaces com o

utilizadorAnálise dos utilizadoresPrototipagem de interfaces com o utilizadorAvaliação de interfaces

2009/2010


Objectivos Sugerir princípios gerais do desenho de interfaces

ExplicarDiferentes estilos de interacção e sua utilizaçãoQuando usar apresentações gráficas e textuais de

informaçãoPrincipais actividades do processo de desenho de

interfaces

Apresentar atributos de usabilidade e abordagens à avaliação de sistemas

2009/2010


A interface com o utilizador Deve ajustar-se a competências, experiência e

expectativas de prospectivos utilizadores

Utilizadores muitas vezes julgam sistema pela interface e não pela funcionalidade

Interface mal desenhada pode induzir utilizador a erros catastróficos

Mau desenho leva muitos sistemas não serem usados

2009/2010


Factores humanos no desenho de interfacesMemória de curta duração limitada

Humanos recordam instantaneamente cerca de sete itens de informação. Mais informação, mais probabilidade de erro.

Humanos erram Quando humanos erram e sistemas falham, alertas e mensagens inapropriados aumentam stress e, por isso, probabilidade de novos erros.

Humanos são diferentes Humanos têm grande gama de capacidades físicas. Designers não devem desenhar para si mesmos.

Humanos têm diferentes preferências de interacção

Alguns preferem imagens, outros preferem texto.

2009/2010


Princípios do desenho de interfaces com o utilizador Desenho considera necessidades, experiência

e capacidades de utilizadores

Designers cientes de limitações físicas e mentais de humanos (e.g., memória de curta duração limitada) e reconhecem que humanos erram

Princípios subjazem a desenho de interfaces, nem todos os princípios aplicáveis a todos os desenhos

2009/2010


Princípios do desenho de interfaces com o utilizadorFamiliaridade Usar termos e conceitos recolhidos da experiência

das pessoas que mais usarão sistema.

Consistência Sempre que possível, operações comparáveis activadas da mesma forma.

Mínima surpresa Utilizadores nunca são surpreendidos pelo comportamento do sistema.

Recuperabilidade Incluir mecanismos para utilizadores recuperarem de erros.

Orientação Disponibilizar informação quando erros ocorrem e mecanismos de ajuda sensíveis ao contexto.

Diversidade Proporcionar mecanismos de interacção para diferentes tipos de utilizadores do sistema.

2009/2010


Familiaridade Termos e conceitos recolhidos da

experiência das pessoas que mais usarão sistema

Termos e conceitos orientados para utilizador e não computacionais

Por exemplo, sistema administrativo deve usar cartas, documentos e pastas e não ficheiros, identificadores ou directórios

2009/2010


Consistência

Sempre que possível, operações comparáveis activadas da mesma forma

ExemplosComandos e menus com o mesmo formatoPontuação de comandos semelhanteUtilização consistente de maiúsculas e

minúsculas

2009/2010


Mínima surpresa

Utilizadores nunca são surpreendidos pelo comportamento do sistema

Se utilizador conhece efeito de um comando, deve conseguir prever efeitos de comandos comparáveis

2009/2010


Recuperabilidade

Incluir mecanismos para utilizadores recuperarem de erros

Resiliência face a erros do utilizadorAnular ou desfazer comandosConfirmação de acções destrutivasRemoções com possibilidade de

recuperação

2009/2010


Orientação

Disponibilizar informação quando erros ocorrem e mecanismos de ajuda sensíveis ao contexto

Disponibilização de orientaçãoSistemas de ajudaManuais em linha

2009/2010


Diversidade

Proporcionar mecanismos de interacção para diferentes tipos de utilizadores do sistema

Alguns utilizadores têm dificuldades de visão: disponibilizar texto com maiores caracteres

2009/2010


Heurísticas de NielsenVisibilidade do estado do sistema

Manter utilizadores informados acerca do que está a acontecer através da disponibilização atempada de informação.

Correspondência entre sistema e mundo real

Falar a língua do utilizador, usando palavras, frases e conceitos familiares e não termos orientados para o sistema. Seguir convenções do mundo real, fazendo informação surgir de forma natural e por uma ordem lógica.

Controlo e liberdade do utilizador

Dar aos utilizadores uma “saída de emergência” para abandonarem estado do sistema no qual entraram por engano. Não forçar o utilizador a diálogo extenso para sair desses estados. Suportar mecanismos para desfazer e refazer.

Consistência e padrões

Não forçar utilizadores a pensar se diferentes palavras, situações ou acções têm o mesmo significado. Seguir convenções.

2009/2010


Heurísticas de NielsenPrevenção de erros Mostrar boas mensagens de erro e sobretudo

desenhar de forma a evitar ocorrência de problemas. Eliminar condições propensas a erros ou verificá-las e dar possibilidade de confirmar antes de realizar acções.

Reconhecer em vez de recordar

Minimizar recurso a memória do utilizador tornando visíveis objectos, acções e opções. Não obrigar utilizador a recordar dados de uma parte para outra de diálogo. Tornar instruções de utilização visíveis ou fáceis de obter.

Flexibilidade e eficiência de utilização

Criar atalhos – invisíveis para utilizador iniciado – que acelerem interacção de utilizador experiente. Adequar sistema simultaneamente a utilizadores iniciados e experientes. Permitir configuração de acções frequentes.

2009/2010


Heurísticas de NielsenDesenho estético e minimalista

Desenhar diálogos sem informação irrelevante ou raramente necessária. Itens adicionais de informação num diálogo competem com unidades de informação relevantes e diminuem a sua visibilidade relativa.

Ajudar a reconhecer, diagnosticar e recuperar de erros

Exprimir mensagens de erro em linguagem simples (sem códigos) precisando qual o problema e sugerindo construtivamente uma solução.

Ajuda e documentação

Pode ser necessário disponibilizar ajuda e documentação, apesar de ser preferível que o sistema possa ser usado sem documentação. Informação de ajuda e documentação deve ser fácil de pesquisar, estar focada na tarefa do utilizador e listar passos concretos a dar. Não deve ser demasiado grande.

2009/2010


Dois problemas de desenho

Como disponibilizar ao sistema informação vinda do utilizador?

Como disponibilizar ao utilizador informação vinda do sistema?

Interacção com utilizador e apresentação de informação podem ser integradas em estrutura coerente (e.g., metáfora de interface com o utilizador)

2009/2010


Estilos de interacção

Manipulação directa Selecção em menus Preenchimento de formulários Comandos Linguagem natural

2009/2010


Estilos de interacçãoEstilo Vantagens Desvantagens

Manipulação directa

Interacção rápida e intuitiva; fácil aprender.

Difícil implementar; aplicável só se tarefas e objectos têm metáfora visual.

Selecção em menus

Evita erros do utilizador; pouca digitação.

Lento para utilizadores experientes;com muitas opções é complexo.

Formulários Introdução simples de dados; fácil aprender; verificável.

Ocupa muito ecrã; opções do utilizador podem não corresponder a campos.

Comandos Poderoso e flexível. Difícil aprender; gestão fraca de erros.

Linguagem natural

Acessível a utilizadores ocasionais; fácil estender.

Muita digitação; pouca fiabilidade.

2009/2010

• Jogos.• Sistemas CAD.Maioria dos sistemas de utilização geral.

• Controlo de stocks.• Gestão pessoal de

empréstimos.

• Sistemas operativos.• Sistemas de comando

e controlo.

Sistemas de recuperação de informação.

22Engenharia do Software I

Múltiplas interfaces

2009/2010

Gestor da interface gráfica de utilização

do X Window System

Interface gráfica de utilização (Gnome/KDE)

Interpretador de comandos

Interface de linha de comandos (bash/ksh)

Sistema operativo Linux


Interacção LIBSYSPesquisa de documentos Utilizadores usam os mecanismos de

pesquisa para procurar os documentos de que precisam.

Pedido de documentos Utilizadores pedem a entrega de um documento na sua máquina ou num servidor para impressão.

2009/2010


Interfaces baseadas na Web Muitos sistemas baseados na Web têm

interfaces baseadas em formulários cujos campos podem serMenusCaixa de texto livreBotões de rádioEtc.

LIBSYS: Menu para escolher onde pesquisar e caixa de texto para frase a procurar

2009/2010


Formulário de pesquisa do LIBSYS

2009/2010

TodasEscolher colecção

Palavra ou frase

TítuloProcurar usando

Palavras adjacentes Sim Não

CancelarLimparPesquisar

LIBSYS: Pesquisa


Apresentação da informação Apresentação ao utilizador de informação

do sistema

Informação pode ser apresentadaDirectamente – Texto num processador de textoTransformada – Formato gráfico

Abordagem Modelo-Vista-Controlador suporta múltiplas vistas dos mesmos dados

2009/2010

Padrão de desenho.


Apresentação da informação

2009/2010

Informação a mostrar

Software de apresentação

Ecrã


Modelo-vista-controlador

2009/2010

estadométodos

Controlador

estadométodos

Vista

estadométodos

Modelo

Entradas do utilizador

Edições do modelo

Interrogações e actualizações do modelo

Mensagens de modificação da

vista


Apresentação da informação Informação estática

Inicializada no início de uma sessãoNão muda durante uma sessãoPode ser numérica ou textual

Informação dinâmicaMuda durante a sessãoMudanças têm de ser comunicadas ao

utilizadorPode ser numérica ou textual

2009/2010


Factores da apresentação da informação Utilizador interessa-se por informação precisa ou

relações entre dados?

Quão depressa mudam os valores da informação? Alterações devem ser indicadas imediatamente?

Utilizador deve responder a alterações?

Há interface de manipulação directa?

Informação textual ou numérica? Valores relativos importantes?

2009/2010


Apresentações alternativas da informação

2009/2010

4000

3000

2000

1000

0Jan. Fev. Mar. Abr. Mai. Jun.

Jan.2842

Fev.2851

Mar.3164

Abr.2789

Mai.1273

Jun.2835


Apresentação analógica ou digital? Apresentação digital

Compacta – Ocupa pouco espaço no ecrãPermite comunica valores precisos

Apresentação analógicaFácil ter ideia dos valores num relancePossível mostrar valores relativosFácil ver valores excepcionais dos dados

2009/2010


Métodos de apresentação

2009/2010

1

2

3

4

0 10 20

Mostrador eagulha

Gráfico emqueijo Termómetr

o

Barrahorizontal


Mostrando valores relativos

2009/2010

0 200 400100 300

Pressão

0 50 10025 75

Temperatura


Visualização de dados Grandes quantidades de informação

Revela tendências e relações entre entidades

Possíveis visualizaçõesInformação meteorológica recolhida em vários locaisEstado de rede como conjunto de nós ligadosFábrica como conjunto de tanques e tubos

mostrando pressões e temperaturasModelo 3D de moléculaPáginas Web como árvore hiperbólica

2009/2010


Ecrãs coloridos

Cor adiciona dimensão extra à interface

Ajuda a compreender estruturas complexas de informação

Usada para destacar eventos excepcionais

2009/2010


Erros comuns

Usar a cor para comunicar significado

Superabundância de cor no ecrã

2009/2010


Mau exemplo

2009/2010


Orientações para uso de cores

Limitar o número de cores Ser conservador Mostrar alterações de estado Suportar tarefas do utilizador com

código de cores Usar de forma pensada e consistente Cautela com emparelhamentos

2009/2010


Bom exemplo

2009/2010


Mensagens de erro Bom desenho é crítico: más mensagens de erro

podem levar à rejeição do sistema

Devem serEducadasConcisasConsistentesConstrutivas

Formação e experiência dos utilizadores é factor determinante no desenho

2009/2010


Factores na redacção de mensagens de erroContexto Reflectir contexto corrente do utilizador. Deve-se estar

ciente das suas acções e gerar mensagens relevantes.

Experiência Mensagens longas e “cheias de significado” irritam utilizadores experientes. Mensagens concisas não são percebidas por utilizadores iniciados. Disponibilizar ambas: utilizador controla grau de concisão.

Nível de competência

Adequar mensagens a competências e experiência do utilizador. Conceber mensagens diferentes para tipos de utilizador diferentes usando diferentes terminologias.

Estilo Redigir mensagens de forma positiva. Usar a voz activa e não a voz passiva. Não insultar nem tentar ter piada.

Cultura Estudar culturas locais dos utilizadores. Há diferenças culturais assinaláveis entre Europa, Ásia e os EUA: mensagens adequadas numa cultura podem não o ser noutra.

2009/2010


Erro do utilizador

2009/2010

Introduza o nome do paciente: Ximenes, Xisto

CancelarOK

Nome do paciente

Assuma que um(a) enfermeira(o) se engana no nome do paciente de cujo registo necessita.


Mau desenho: mensagem de erro orientada para o sistema

2009/2010

! Erro 27ID de paciente inválido!

CancelarOK

Erro!


Bom desenho: mensagem de erro orientada para o utilizador

2009/2010

“Xisto Ximenes” não está registado como paciente.Carregue em “Pacientes” para ver uma lista de pacientes.Carregue em “De novo” para introduzir o nome de novo.Carregue em “Ajuda” para obter mais ajuda.

CancelarDe novo

Paciente “Xisto Ximenes” desconhecido

AjudaPacientes


Processo de desenho de interfaces com o utilizador

É processo iterativo

Relações estreitas entre utilizadores e designers

Três actividades centraisAnálise do utilizadorPrototipagem do sistemaAvaliação da interface

2009/2010


Actividades centrais do processoAnálise de utilizadores Compreender o que os utilizadores irão

fazer com o sistema.

Prototipagem do sistema Desenvolver uma série de protótipos para realizar experiências.

Avaliação da interface Fazer experiências com os protótipos envolvendo os utilizadores.

2009/2010


Processo de desenho

2009/2010

Analisar e compreender

actividades dos utilizadores

Produzir primeiro protótipo em papel

Produzir protótipo dinâmico

Implementar interface com

o utilizador final

Protótipo de desenho

Avaliar desenho com utilizadores

finais

Protótipo executável

Avaliar desenho com utilizadores

finais


Análise de utilizadores

Sem perceber o que utilizadores pretendem fazer não é possível desenhar interface eficaz

Análises descritas em termos que utilizadores e designers possam entender

Cenários descrevendo casos de uso típicos são forma de descrever análises

2009/2010


Cenário de interacção com o utilizadorA Joana é aluna de Estudos Religiosos. Está a trabalhar num ensaio sobre arquitectura indiana e sobre a forma como foi influenciada pela prática religiosa. Para melhor compreender o assunto, gostaria de aceder a fotografias de pormenores de edifícios importantes. No entanto, não conseguiu encontrar nada de relevante na sua biblioteca local.

Aborda o bibliotecário para discutir as suas necessidades. Este sugere-lhe alguns termos de pesquisa. Também lhe sugere algumas bibliotecas em Nova Deli e Londres que talvez tenham o material desejado. Entram nos catálogos da biblioteca e fazem pesquisas com esses termos. Encontram algum material e fazem um pedido para serem enviadas directamente à Joana fotocópias das fotografias com pormenores arquitectónicos que encontraram.

2009/2010


Requisitos do cenário Utilizadores podem não estar cientes de

termos de pesquisa mais apropriados

Precisam de ajuda na escolha dos termos

Têm de poder escolher colecções a pesquisar

Têm de poder pesquisar e pedir cópias do material relevante encontrado

2009/2010


Técnicas de análiseAnálise de tarefas Modelar os passos que completar uma

tarefa envolve.

Entrevistas e questionários Perguntar aos utilizadores acerca do trabalho que realizam.

Etnografia Observar os utilizadores enquanto trabalham.

2009/2010


Análise hierárquica de tarefas

2009/2010

Obter imagens a partir de bibliotecas

remotas

Descobrir possíveis

fontes

Estabelecer termos de pesquisa

Pesquisar imagens

Seleccionar biblioteca

Autenticar no catálogo

Pesquisar imagens

Modificar termos de pesquisa

Registar itens

relevantes

Introduzir termos de pesquisa

Iniciar pesquisa

Analisar resultados

Pedir fotocópias dos itens

encontrados

1 2 3 4

3.1

3.2

3.3

3.4

3.5

3.3.1

3.3.2

3.3.3

Fazer 1, 2 e 3 até imagens encontradas, 4

Fazer 3.1, 3.2 e 3.3 até imagens encontradas, 3.4 se necessário, 3.5

3.3.1, 3.3.2 e 3.3.3


Entrevistas Conceber entrevistas semi-estruturadas

baseadas em perguntas abertas

Utilizadores fornecem informação que julgam essencial, e não apenas informação que se previu recolher

Entrevistas de grupo e grupos foco permitem a utilizadores discutirem entre si o que fazem

2009/2010


Etnografia Observador externo observa utilizadores

trabalhando e questiona-os sobre o seu trabalho

Valor decorre de muitas tarefas serem intuitivas e difíceis de descrever e explicar pelos utilizadores

Ajuda a compreender papel de influências sociais e organizacionais no trabalho

2009/2010


Registos etnográficosO controlo do tráfego aéreo usa um determinado número de ‘pacotes’ em que os pacotes de controlo de sectores adjacentes do espaço aéreo são fisicamente colocados lado a lado. Os voos num sector são representados por tiras de papel enfiadas nas ranhuras de um suporte de madeira por uma ordem que reflecte a sua posição no sector. Se não houver suficientes ranhuras num suporte (e.g., o espaço aéreo está muito intenso), os controladores espalham as tiras na secretária em frente do suporte.

Enquanto observávamos os controladores, notámos que os controladores olhavam regularmente para os suportes de tiras no sector adjacente. Chamámos a atenção para este facto e perguntámos-lhes porque o faziam. Responderam que, quando um controlador adjacente tem tiras na sua secretária, há muitos voos que se preparam para entrar no seu sector. Quando isso acontece, eles tentam acelerar a velocidade das aeronaves no seu sector para ‘fazer espaço’ para os voos que para ele se dirigem.

2009/2010


Resultados da análise etnográfica Controladores têm de ver todos os voos

num sector: deve evitar-se visualizações em que voos deslizem para fora do ecrã (quer pelo topo, quer pela base)

Interface deve mostrar quantos voos estão em sectores adjacentes de modo a que controlador possa planear como lidar com pico de esforço que se aproxima

2009/2010


Prototipagem da interface com o utilizador Dar aos utilizadores experiência directa com

interface

Sem ela é impossível aferir usabilidade da interface

Pode ser processo com duas etapasInicialmente protótipos em papelDepois desenho é refinado e desenvolvem-se

protótipos automatizados com sofisticação crescente

2009/2010


Prototipagem em papel

Estudar cenários usando esboços da interface

Usar guião para apresentar série de interacções com sistema

Eficaz para obter reacções dos utilizadores a uma proposta de desenho

2009/2010


Técnicas de prototipagemCom guião Desenvolver conjunto de guiões e ecrãs usando

ferramenta como Macromedia Director. Quando utilizador interage com ecrã, salta para próximo ecrã.

Programação visual Usar linguagem concebida para desenvolvimento rápido como o Visual Basic.

Baseada na Web Usar navegador Web e linguagens associadas

2009/2010

Capítulo 17


Avaliação de interfaces com o utilizador Necessária para aferir se desenho é

adequado

Avaliação completa muito cara e impraticável para maioria dos sistemas

Idealmente interfaces avaliadas face a especificação de usabilidade; mas é raro serem produzidas especificações

2009/2010


Atributos de usabilidadeApreensibilidade Quanto demora um utilizador a se tornar produtivo

com o sistema?

Velocidade de operação

Quão próxima está a resposta do sistema da prática do utilizador?

Robustez Quão tolerante é o sistema face a erros do utilizador?

Recuperabilidade Quão bem recupera o sistema de erros do utilizador?

Adaptabilidade Quão preso está o sistema a um único modelo de trabalho?

2009/2010


Técnicas de avaliação simples

Questionários ao utilizador

Gravação vídeo de utilização do sistema e posterior avaliação

Instrumentação de código para recolher informação acerca da utilização de funcionalidades e da ocorrência de erros do utilizador

Disponibilização de código para recolha em linha de opiniões do utilizador

2009/2010


A reter

Princípios do desenho guiam desenho de interfaces com utilizador

Estilos de interacção incluemManipulação directaSistemas de menuPreenchimento de formuláriosLinguagens de comandosLíngua natural

2009/2010


A reter Apresentações gráficas mostram tendências e

valores aproximados

Apresentações digitais mostram valores precisos

Cor usada com parcimónia e consistência

Processo de desenho incluiAnálise de utilizadoresPrototipagem do sistemaAvaliação da interface

2009/2010


A reter Análise de utilizadores sensibiliza designers

para forma de trabalho efectiva de utilizadores

Prototipagem é processo em etapas; protótipos iniciais em papel base para protótipos automáticos

Avaliação da interface informa como melhorar desenho e afere cumprimento de requisitos de usabilidade

2009/2010


A ler

Ian Sommerville, Software Engineering, 8.ª edição, Addison-Wesley, 2006

Capítulo 16

2009/2010


A ver

useit.com: Jakob Nielsen's Website

2009/2010

http://www.useit.com/

Documents

2010 05-06 b - desenho de interfaces com o utilizador