InterfacesComoUsuário

(1)

PROJETO DE INTERFACE

COM O USUÁRIO

(2)

OBJETIVOS

 Sugerir princípios de projeto para interfaces

com o usuário

 Explicar os diferentes estilos de interação e

suas utilidades

 Explicar quando usar apresentação de

informações gráficas e textuais

 Explicar as principais atividades no processo

de projetar as interfaces com o usuário

 Introduzir atributos de usabilidade e

(3)

TÓPICOS ABORDADOS

 Questões relativas ao projeto

 O processo de projetar uma interface com o

usuário

 Análise dos usuários

 Prototipação da interface com o usuário  Avaliação da interface com o usuário

(4)

CITAÇÕES

 “Um erro comum que as pessoas cometem

quanto projetam interfaces completamente a prova de tolices é subestimar a engenhosidade dos completamente tolos.” Douglas Adams

 “A interface do inferno: Entre com qualquer

número primo de 11 dígitos para continuar…”

 “USUÁRIO, substantivo: palavra que os

profissionais de computação usam quando querem dizer ‘idiota’.” Dave Barry

 “Eu nunca projeto um edifício antes de ter

(5)

A INTERFACE COM O USUÁRIO

 Interfaces para o usuário devem ser

projetadas para se adequar às habilidades, experiência e expectativas de seus

potenciais usuários.

 O usuário de um sistema frequentemente

julga um sistema pela interface e não por sua funcionalidade.

 Uma interface mal projetada pode levar um

usuário a causar erros catastróficos.

 Interfaces com o usuário fracas é a razão

pelas quais vários sistemas não são utilizadas.

(6)

FATORES HUMANOS NO PROJETO DE

INTERFACES

 As Pessoas tem Memória de curto-prazo limitado

 As pessoas só conseguem lembrar de 7 itens de informação. Se você apresenta mais que isso ao

mesmo tempo, elas provavelmente não serão capazes de interpretar estas informações.

 As Pessoas erram

 Quando pessoas erram e o sistema sai errado,

alarmes inapropriados e mensagens podem estressá-los, levando-os a cometer mais erros.

 As Pessoas são diferentes

 As pessoas tem uma grande quantidade de

habilidades. Os projetistas não devem desenvolver a interface pensando em suas próprias limitações.

 As Pessoas possuem diferentes preferências de

(7)

PRINCÍPIOS DE PROJETO DA

INTERFACE COM USUÁRIO (UI)

 Projeto de UI devem levar em consideração

as necessidades, experiência e capacidade dos futuros usuários do sistema.

 Projetistas devem estar atentos às limitações

físicas e mentais das pessoas (ex. Memória de curto prazo) e entender que as pessoas cometem erros.

 Os princípios de projeto UI são a base dos

projetos de interface, apesar de que nem todos os princípios são aplicados em

(8)

PRINCÍPIOS DE PROJETO DA

INTERFACE COM USUÁRIO (UI)

(9)

PRINCÍPIOS DE PROJETO

 Familiaridade

 A interface deve ser baseada em termos e conceitos

com os quais os usuários estejam familiarizados. Por exemplo, um sistema de escritório deve usar

conceitos como cartas, documentos, pastas, etc. E não diretórios, arquivos, identificadores, etc.

 Consistência

 O sistema deve apresentar um nível apropriado de

consistência. Comandos e menus devem ter o

mesmo formato, a pontuação dos comandos deve ser similar, etc.

 Mínima surpresa

 Se uma surpresa operar de maneira conhecida, os

(10)

PRINCÍPIOS DE PROJETO

 Recuperabilidade

 O sistema deve prover poder de recuperação aos

erros dos usuários . Pode ser um comando de desfazer, confirmação de ações destrutivas, deletes ‘virtuais’, etc.



Guia aos usuários

 Guias para os usuários como sistemas de ajuda,

manuais on-line, etc. devem ser providos 

Diversidade dos usuários

 Facilidades de interação para diferentes tipos de

usuário devem ser permitidos. Por exemplo, alguns usuários tem deficiência visual e um texto maior deve estar disponível.

(11)

REGRAS DE OURO

 Definidas por Theo Mandel

 Coloque o usuário no Controle

 Reduza a carga de memória do usuário  Faça a Interface consistente

(12)

REGRAS DE OURO – COLOQUE O

USUÁRIO NO CONTROLE

 Defina os modos de interação de uma forma

que não force o usuário a tomar ações desnecessárias ou indesejadas(ex.

Verificação ortográfica)

 Permita que a interação possa ser

interrompida e desfeita

 Simplifique a interação com o progresso do

usuário

 Esconda detalhes técnicos do usuário

esporádico

 Projete a interação direta com os objetos que

(13)

REGRAS DE OURO – REDUZA A

CARGA DE MEMÓRIA DO USUÁRIO

 Reduza a demanda da memória de curto

prazo

 Estabeleça padrões significativos – mas o

usuário deve poder especificar preferências e retornar aos valores padrões!

 Defina atalhos intuitivos (control + P para

imprimir…)

 O Leiaute visual deve ser baseado em uma

metáfora do mundo real

 Revele informação de modo progressivo (ex.

(14)

REGRAS DE OURO – FAÇA A

INTERFACE CONSISTENTE

 Permita ao usuário situar a tarefa atual em

um contexto significativo

 O usuário deve saber de onde veio e para onde

pode ir

 Mantenha consistência em uma família de

aplicações

 Se modelos interativos anteriores criaram

expectativas, não os modifique (A não ser que haja forte razão para isso!).

 Ex.: Control + S para grande parte dos

(15)

QUESTÕES DE PROJETO DE

INTERFACES COM O USUÁRIO

 Dois problema devem ser considerados no

projeto de sistemas interativos.

 Como a informação vinda do usuário deve ser

provida ao sistema?

 Como a informação vinda de um sistema de

computação deve ser apresentada ao usuário?

 A interação com os usuários e a

apresentação da informação podem ser integrados através de um arcabouço

(16)

ESTILOS DE INTERAÇÃO

 Manipulação direta  Seleção do menu  Preenchimento de formulário  Linguagem de comandos  Linguagem Natural

(17)

(18)

INTERFACES MÚLTIPLAS COM O

USUÁRIO

Interface gráfica com o usuário (Gnome/KDE) Gerenciadores de Janelas X Interface Shell Unix Interpretador de linguagem de comandos Sistema Operacional Linux

(19)

INTERAÇÃO LIBSYS

 Procura por documento

 Usuários precisam ser capazes de usar as

facilidades de busca para encontrar os documentos que procuram.

 Requisição de documento

 Requisições dos usuários são enviados a

(20)

INTERFACES BASEADAS EM WEB

 Muitos sistemas baseados em web possuem

interfaces baseadas em formulários web.

 Os campos dos formulários podem ser

menus, entrada de texto, botões de rádio, etc.

 No exemplo LIBSYS, usuários podem escolher

onde querem procurar a partir de um menu e digitar a frase em um campo de texto.

(21)

FORMULÁRIO DE PESQUISA LIBSYS

LIBSYS: Search Choose collection Keyword or phrase Search using Adjacent words

Search Reset Cancel All

Title

(22)

APRESENTAÇÃO DA INFORMAÇÃO

 A apresentação da informação diz respeito a

apresentar informações do sistema aos usuários do sistema.

 A informação deve ser apresentada

diretamente (ex. Texto em um processador de textos) ou podem ser transformadas em alguma outra forma de apresentação (ex. Em algum formulário gráfico).

 A abordagem MVC (Model-View-Controller) é

uma forma de permitir múltiplas apresentações dos dados.

(23)

APRESENTAÇÃO DA INFORMAÇÃO

Information to be displayed Presentation software Display Informação a ser exibida Programa para apresentação

(24)

MODEL-VIEW-CONTROLLER

Model methods

Controller methods View methods User

inputs view modification_messages

Model edits

Model queries and updates Controller state View state

(25)

APRESENTAÇÃO DA INFORMAÇÃO

 Informação estática

 Inicializada no começo de uma sessão. Não

muda durante a sessão.

 Pode ser tanto numérica quanto textual.  Informação dinâmica

 Muda durante a sessão e as mudanças devem

ser comunicadas ao usuário do sistema.

(26)

FATORES PARA EXIBIÇÃO DA

INFORMAÇÃO

 O usuário está interessado em informações

precisas ou relacionamento dos dados?

 Quão rapidamente os valores mudam?

Estas mudanças precisam ser indicadas imediatamente?

 O usuário tomará alguma atitude na

ocorrência de mudanças de valores?

 Existe uma interface de manipulação direta?  A informação é textual ou numérica? Valores

(27)

APRESENTAÇÃO ALTERNATIVA DE

INFORMAÇÕES

0 1000 2000 3000 4000 Jan 2842 Feb 2851 Mar 3164 April 2789 May 1273 June 2835

(28)

APRESENTAÇÃO DIGITAL OU ANALÓGICA?

 Apresentação Digital

 Compcatas – usam pouco espaço na tela;  São informados valores precisos.

 Apresentação Analógica

 Fáceis para se obter uma informação ‘em um

piscar de olhos’ dos valores;

 Possíveis de mostrar valores relativos;  Fáceis de verificar valores de dados

(29)

MÉTODOS DE APRESENTAÇÃO

1

3

4 2 0 10 20

(30)

MOSTRANDO VALORES RELATIVOS

0 100 200 300 400 0 25 50 75 100

(31)

VISUALIZAÇÃO DOS DADOS

 Preocupa-se com técnicas para exibição de

grandes quantidades de informação.

 A Visualização pode revelar relacionamentos

entre entidades tendencias nos dados.

 Visualizações de dados possíveis são:

 Previsão do tempo coletado de várias fontes;

 O estado de uma companhia telefônica como um

conjunto de nós conectados;

 Planta química, a qual mostra as pressões e

temperaturas em um conjunto de tanques canos;

 Um modelo de molecula exibida em 3 dimensões;

 Páginas Web exibidas através de uma árvore

(32)

TELAS COLORIDAS

 As cores dão uma dimensão extra à interface

e podem ajudar o usuário a entender estruturas de informação complexa.

 Cores podem ser utilizadas para destacar

eventos importantes.

 Erros comuns no uso de cores no projeto de

interface incluem:

 A utilização de cores para comunicar um

determinado significado;

(33)

GUIA PARA USO DE CORES

 Limite o número de cores utilizadas e seja

conservador no seu uso.

 Use mudança de cores para exibir uma

mudança no status do sistema.

 Use codificação por cor para dar suporte à

tarefa que os usuários estão tentando desempenhar.

 Use codificação através de cores de maneira

planejada e consistente.

(34)

MENSAGENS DE ERRO

 O Projeto de Mensagens de Erro é

criticamente importante.

 Mensagens de erro confusas podem fazer um

usuário desistir da utilização de um sistema.

 Mensagens devem ser educadas, concisas,

consistentes e construtivas.

 O conhecimento prévio e experiência dos

usuários deve ser o fator determinante no projeto de mensagens de erro.

(35)

FATORES DE PROJETO NA ESCRITA

MENSAGENS

(36)

ERRO DO USUÁRIO

 Assuma que uma enfermeira digitou

erradamente o nome de um paciente cujos dados ela tenta recuperar.

Please type the patient’s name in the box then click on OK

MacDonald, R.

OK Cancel Patient’s name

(37)

MENSAGEM APROPRIADA E A

NÃO-APROPRIADA

Error #27 Invalid patient id

OK Cancel

System-oriented error message User-oriented error message

R. MacDonald is not a reg istered patient Click on Patients for a list of patients

Click on Retry to re-input the patient’s name Click on Help for more information

Patients Help Retry Cancel Mensagem de erro orientada ao projetista Mensagem de erro orientada ao usuário

(38)

O PROCESSO DE PROJETO DA

INTERFACE COM O USUÁRIO

 O projeto da UI é um processo iterativo e que

requer uma ligação próxima entre os usuários e os projetistas.

 As 3 principais atividades neste processo

são:

 Análise do Usuário. Entenda o que os usuários

irão realizar com o sistema;

 Prototipação do Sistema. Desenvolva uma série

de protótipos para experimentação;

 Avaliação da interface. Testes os protótipos com

(39)

O PROJETO

Analise e entenda as atividades dos usuários Produzir Protótipo Em papel Avaliar projeto Com usuário-final Projeto do protótipo Produza Protótipos dinâmicos Protótipo Executável Avalie projeto Com usuário-final Implementação Da interface final

(40)

ANÁLISE DOS USUÁRIOS

 Se você não entende o que os usuários

querem fazer com o sistema, você não tem condições realísticas de projetar uma

interface eficiente.

 A análise dos usuários precisa ser descrita de

maneira que os usuários e os projetistas possam entender.

 Cenários onde episódios típicos de uso são

descritos, são formas de realizar e descrever estas análises.

(41)

CENÁRIO DE INTERAÇÃO COM O

USUÁRIO

Jane é uma estudante de Estudos Religiosos e tem trabalhado em um artigo sobre arquitetura indígena e como esta foi influenciada pelas práticas religiosas. Para ajudá-la a melhor entender seu trabalho, ele gostaria de acessar algumas figuras contendo

detalhes de construções, mas nada encontrou em busca realizada na biblioteca da cidade.

Ao conversar com o bibliotecário sobre o assunto, ela descreve suas necessidades e ele sugere termos para que ela realize sua busca. Ele também sugere bibliotecas em Nova Delhi e Londres, as quais podem conter este tipo de material. Lá eles também podem buscar por estas palavras-chave. Eles encontram alguns materiais, requerem as cópias das figuras e postam detalhes da arquitetura indígena para Jane.

(42)

REQUERIMENTOS DESTE CENÁRIO

 Usuários comumente não sabem as

palavras-chave adequadas, de maneira que podem precisar de ajuda para descobrir estas

palavras-chave..

 Usuários precisam ser capazes de selecionar

coleções para realizar sua busca.

 Usuários precisam ser capazes de conduzir

pesquisas e requerimentos de cópias de materiais relevantes.

(43)

TÉCNICAS DE ANÁLISE

 Análise das Tarefas

 Modelam os passos envolvidos em completar

uma tarefa.

 Entrevistas e questionários

 Perguntar ao usuário sobre o trabalho que eles

realizam.

 Etnografia

(44)

ENTREVISTAS

 Projeto de entrevistas parcialmente

estruturadas através de perguntas “abertas”.

 Usuários podem prover informação que ele

pensa ser essencial, não apenas informação que você julga ser essencial.

 Entrevistas em grupos permite aos usuários

(45)

ETNOGRAFIA

 Envolve observar externamente o trabalho

do usuário e perguntá-los de forma clara sobre seu trabalho.

 É extremamente importante pois muitas

tarefas dos usuários são intuitivas e eles sentem dificuldades em explicar estas tarefas.

 Também ajuda a entender o papel de

influências externas (sociais e

(46)

REGISTROS ETNOGRÁFICOS

Controladores de tráfego aéreo realizam diversos conjunto de controles onde cada tipo permite que eles controlem setores adjacentes de um espaço aéreo localizados próximos uns aos outros. Voos em um setor são representados por tiras de papel que são presas em murais de maneira a representar a posição em um determinado setor. Se não houver espaço sucificente nestes murais (ex. Quando o espaço aéreo está congestionado), os controladores espalham as tiras pela mesa em frente ao mural.

Quando observávamos controladores, percebemos que eles regularmente espiavam o estado de um setor adjacente. Pertungamos a eles o porque.

Eles responderam que se o controlado do espaço adjacente tiver tiras em sua mesa, isto significava que eles teriam diversos voos entrando em seu setor em breve. Logo, seria interessante limpar o espaço aéreo, pedindo para os voos existentes acelerarem a passagem para o próximo setor, de maneira a limpar o espaço aéreo para os voos que viriam em seguida.

(47)

INSPIRAÇÕES A PARTIR DA

ETNOGRAFIA

 Controladores precisam ver todos os voos em

um setor. Portanto, rolar a tela para seguir um dado voo que cruzou a borda da tela deve ser evitado.

 A interface precisa, de alguma maneira,

permitir que os controladores vejam quantos voos existem em setores adjacentes de

maneira que possam planejar sua carga de trabalho.

(48)

PROTOTIPAÇÃO DA INTERFACE COM O

USUÁRIO

 O objetivo da prototipação é permitir aos

usuários terem uma experiência diretamente com a interface.

 Sem esta experiência, é impossível julgar a

usabilidade da interface.

 A prototipação pode ser feita em duas

etapas:

 No início, protótipos em papel podem ser usados;  O projeto é então refinado e, posteriomente,

(49)

PROTOTIPAÇÃO EM PAPEL

 Trabalha atravrés de cenários usando

esboços da interface.

 Usar uma “storyboard” para apresentar a

sequencia de interações com o sistema.

 Prototipação em papel é uma forma efetiva

de conseguir reações dos usuários para uma proposta de projeto.

(50)

TÉCNICAS DE PROTOTIPAÇÃO

 Prototipação baseada em scripts

 Desenvolve uma série de scripts e telas usando

ferramentas como o Macromedia Director. Quando o usuário interagir com estas, a tela muda para a próxima interface.

 Programação visual

 Use uma linguagem que permita

desenvolvimento rápido como o Delphi.

 Prototipação baseada na internet

(51)

AVALIAÇÃO DA INTERFACE COM O

USUÁRIO

 Algum tipo de avaliação precisa ser

conduzida para avaliar o quanto ela se encaixa com os requisitos dos usuários.

 Avaliações em larga escala são caras e

impraticáveis para a maioria dos sistemas.

 Idealmente, uma interface precisa ser

avaliada a partir de uma especificação de

usabilidade. Entretanto, são raras estes tipos de especificação.

(52)

(53)

TÉCNICAS PARA AVALIAÇÃO SIMPLES

 Questionários para os usuários emitirem suas

opiniões.

 Gravação da utilização por parte de um

usuário e subsequente avaliação desta gravação.

 Instrumentação do código para coletar

informações sobre facilidade de uso e erros comuns.

(54)

PONTOS-CHAVE

 Princípios de projeto para interfaces com o

usuário devem guiar o projeto de boas interfaces.

 Estilos de interação direta, menus,

formulários, comandos e linguagem natural.

 Gráficos devem ser usadas para exibição de

tendências nos dados e valores aproximados. Formatos digitais devem ser usados quando a precisão é um requerimento.

 Cores devem ser usadas de forma moderada

(55)

PONTOS-CHAVE

 A interface com o usuário envolve análise do

usuário, prototipação do sistema e avaliação destes protótipos.

 O objetivo das análises dos usuários é que o

projetista conheça a forma de trabalho dos usuários.

 Prototipação das Interfaces com o Usuário

devem ser feitas em etapas ilustrando em papel o funcionamento básico da interface.

 Os objetivos da avaliação de uma Interface é

obter retorno do usuário em como a interface pode ser melhorada para que os