UNIVERSIDADE ESTADUAL PAULISTA INSTITUTO DE BIOCINCIAS, LETRAS E CINCIAS EXATAS DEPARTAMENTO DE CINCIAS DE COMPUTAO E ESTATSTICA

Projeto de Interface com o usurio

Engenharia de Software 2o. Semestre de 2005

Slide 1

Objetivo Projetar interfaces efetivas para sistemas de software

Slide 2

Tpicos
q q q q q

Princpios de projeto de interface com o usurio Interao com o usurio Apresentao de informao Suporte ao usurio Avaliao de interface

Slide 3

A interface com o usurio

q

Usualmente, os usurios julgam um sistema pela sua interface ao invs de sua funcionalidade. Um projeto de interface pobre pode levar o usurio a cometer erros catastrficos. Um projeto de interface pobre a razo pela qual muitos sistemas de software nunca foram utilizados.

Slide 4

Interfaces Grficas
q

A maioria dos usurios de sistemas comerciais interagem com esses sistemas atravs de interfaces grficas, embora em alguns casos, sistemas legados, com interfaces baseadas em texto, ainda so usados.

Slide 5

Caractersticas de Interfaces Grficas com o usurio (GUI)

Caracterstica Descrio

Janelas

Mltiplas janelas permite que diferentes informaes sejam apresentadas simultaneamente na tela do usurio. Os cones representam diferentes tipos de informaes.

cones Menus

Os comandos so selecionados a partir de um menu, em vez de serem digitados em uma linguagem de comando. Apontamentos Um dispositivo de apontamento (mouse) utilizado para selecionar as opes em um menu ou indicar os itens de interesse em uma janela. Grficos Elementos grficos podem ser misturados com texto no mesmo monitor
Slide 6

Vantagens das GUI

q

Elas so relativamente fceis de aprender e utilizar. O usurio tem vrias telas (janelas) para a interao com o sistema. possvel alternar de uma tarefa para outra. possvel a interao rpida de tela inteira, com acesso imediato a qualquer ponto da tela.

Slide 7

Projeto centrado no usurio

q

O principal objetivo de projeto de interface sensibilizar os engenheiros de software sobre algumas questes bsicas importantes para o projeto de interface com o usurio. O projeto centrado no usurio uma abordagem de projeto de interface onde a anlise das atividades do usurio primordial para o sucesso do projeto como um todo. Projeto de interface sempre envolve o desenvolvimento de prottipos de interfaces.
Slide 8

Processo de Projeto de Interface com o usurio

Analisar e Analyse and compreenderer understand us as acti vities atividades do usurio
Produce paperprottipo de bas ed design projeto em prototype

Produzir um

Avaliar o projeto Evaluate design com os usurios wi th end-users finais

papel
Design Prottipo de prototype projeto Produce Produzir um dynamic design prottipo dinmico prototype de projeto Executable Prottipo prototype executvel

Avaliar o projeto Evaluate design com os usurios with end-us ers finais
Implement Implementar a final us er interface final int erface de usurio

Slide 9

Princpios de projeto de interface com o usurio (dicas valiosas)

Princpio Familiaridade com o usurio Consistncia Descrio A interface deve utilizar termos e conceitos que tenham como base a experincia das pessoas que mais vo utilizar o sistema. A interface deve ser consistente, no sentido de que, sempre que possvel, operaes semelhantes devem ser ativadas da mesma maneira. Aes semelhantes devem ter efeitos equivalentes. A interface deve incluir mecanismos para permitir aos usurios recuperao a partir de erros.

Mnimo de surpresa Facilidade de recuperao

Orientao para A interface deve fornecer repostas significativas, quando o usurio ocorrem erros, e oferecer recursos sensveis ao contexto de ajuda ao usurio. Diversidade de usurio A interface deve fornecer recursos de interao apropriados a diferentes tipos de usurios de sistema.
Slide 10

Interao dos usurios e Apresentao de Informaes

q

Duas questes aparecem ao se projetar uma interface com o usurio:

Como as informaes podem, a partir do usurio, ser fornecidas ao sistema de computador? Como as informaes do computador podem ser apresentadas ao usurio?

A interao dos usurios e a apresentao de informao devem ser integradas em uma formulao coerente de interface.

Slide 11

Interao do Usurio
Estilos de interao (Shneiderman): q Manipulao direta q Seleo de menu q Preenchimento de formulrios q Linguagens de comandos q Linguagem natural

Slide 12

Estilo de interao Manipulao direta

Principais vantagens Interao rpida e intuitiva Fcil de aprender

Principais desvantagens Pode ser difcil de implementar Somente apropriada quando existe uma metfora para as tarefas e objetos

Exemplos de aplicao Video games Sistemas CAD

Seleo de menus

Preenchimento de Formulrios Linguagem de comando Linguagem Natural

Evita erros do usurio Lenta para usurios Requer pouca experientes digitao Pode se tornar complexas se existirem muitas opes de menu. Entrada de dados Ocupa muito espao simples na tela Fcil de aprender Poderosa e flexvel Difcil de aprender Gerenciamento de erros inadequado Acessvel a usurio Requer mais digitao casual Sistemas de Fcil de ser extendida compreenso de linguagem natural no so confiveis.

A maioria dos sistemas de propsito geral

Controle de estoque, Processamento pessoal Sistemas operacionais Sisremas de recuperao de informaes de biblioteca Sistemas de recuperao de dados na Web

Vantagens e desvantagens

Exemplo de Interface atravs de painel de controle

Ti tle M eth od Ty pe Select io n JSD. examp le JSD Net wo rk Pro ces s Un i ts Redu ce cm Fu ll PRIN T NO DE LIN KS FO NT LA BEL ED IT OU IT Gri d Bu sy

Slide 14

Exemplo de Interface baseada em formulrio

NE W BO OK

Ti tle Auth or Pub lisher Ed itio n Classifi catio n Date of p urchase

ISBN Price Pu blicatio n date Number of copies Lo an status Ord er status

Slide 15

Interfaces de mltiplos usurios

Interface grfica com o usurio Interface de linguagem de comando

Gerenciador da GUI

Interpretador de linguagem de comando

Sistema operacional
Slide 16

Apresentao das informaes

q

A apresentao das informaes se ocupa em apresentar as informaes do sistema aos usurios do sistema. A informao pode ser apresentada diretamente (texto) ou pode ser transformada para a apresentao (em alguma forma grfica) interessante manter separado os dados gerados pela aplicao, camada de apresentao (maior flexibilidade para apresentar os
dados em formatos diferentes)
Slide 17

Apresentao das informaes

Info rm atio n to Informao a be ser di sp lay ed exibida

Presen tati on Software de s oft ware apresentao

Dis play

Slide 18

Apresentao da informao
q

Informao esttica
Inicializada no incio de uma sesso e que no se altera durante a sesso. Pode ser numrica ou textual. Alteram durante uma sesso e as alteraes devem ser comunicadas ao usurio do sistema. Pode ser numrica ou textual

Informao dinmica

Slide 19

Fatores para escolha da melhor forma de apresentar informaes

q

O usurio est interessado em informaes precisas ou relacionamento entre os dados? Com que rapidez os valores das informaes so modificados? A mudana deve ser indicada imediatamente ao usurio? O usurio deve tomar alguma iniciativa em resposta a uma mudana? O usurio precisa interagir com as informaes por meio de uma interface de manipulao direta? As informaes so textuais ou numricas? Os valores relativos dos itens das informaes so importantes?
Slide 20

Apresentaes alternativas de informao

Jan 2 84 2 Feb 2 85 1 M ar 3 16 4 Ap ri l 2 78 9 M ay 1 27 3 Ju ne 2 83 5

4 00 0

3 00 0

2 00 0

1 00 0

0 Jan Feb M ar Ap ri l M ay Ju ne
Slide 21

Modelos de apresentao dinmicos

1 4 3 2 0 10 20

Mostrador com ponteiro Dial with need le

Grfico em forma de pizza Pie c hart

ThTermmetro ermo meter

Barra horizontal Ho rizo ntal bar

Slide 22

Apresentao analgica contnua vs. digital

q

Apresentao digital
Compacta - ocupa pouco espao na tela Valores precisos podem ser comunicados Do ao observador algum senso de valor relativo Mais fcil de obter uma impresso imediata de um valor Mais fcil para visualizar valores de dados excepcionais ou anmalos.

Apresentao analgica

Slide 23

Displays de informaes que mostram valores relativos

Press u re 0 1 00 2 00 3 00 4 00 0 25

Tem p er a tu re 50 75 1 00

Slide 24

Destaque Textual

OTnomelenaarquivo have vocsen h as been he fi do me y o u que cho escolheu j us ed. P lea se favor, an other na me foi usado. Por cho os e escolha outro nome
C h 1 6 U ser i nte rfa ce d esi com Ch.. 16 Projeto de Interfacegn o usurio

OK

Ca ncel

Slide 25

Visualizao de dados
q q

Tcnicas para mostrar grandes quantidades de informao. A visualizao pode revelar relacionamentos entre entidades e tendncias nos dados. Exemplos de visualizaes so:
Informaes meteorolgicas recolhidas a partir de uma srie de fontes mostradas atravs de mapas. O estado de uma rede de telefonia exibido graficamente como um conjunto de ns vinculados. Conjunto de pginas Web mostrado como uma rvore hierrquica.

Slide 26

Cores nos projetos de interface

q

Cores adicionam uma dimenso extra em uma interface e podem ajudar o usurio a entender estruturas complexas de informaes. Podem ser usadas para destacar eventos que lidam com excees. Cuidado deve ter tomado com:
Associar significado a cores Cores em demasia em uma interface

Slide 27

Diretrizes para uso de cores

q q

No usar cores em excesso. Usar cdigo de cores para apoiar a tarefa que os usurios esto tentando realizar (casos anmalos ou similaridades ) Permitir que os usurios controle a codificao de cores. Usar codificao de cores de maneira consistente. Usar mudana de cores para mostrar uma modificao no status do sistema. Seja cuidadoso quanto a pares de cores
Slide 28

Apoio ao usurio
q

Diretrizes ao usurio inclui todas as facilidades do sistema para dar apoio ao usurios, incluindo mensagens de erro, ajuda on-line, manuais, etc. O sistema de apoio ao usurio deve ser integrado interface para ajudar os usurios quando eles precisam de informaes sobre o sistema ou quando ocorre algum tipo de erro. O sistema de mensagens e ajuda devem, se possvel, serem integrados.
Slide 29

Sistema de ajuda e mensagens

Aplicao

Interface de ajuda

Sistema de mensagem de erro

Sistema de apresentao de mensagem Textos com mensagens de erro

Slide 30

Janelas de ajuda

Mensagens de erro
q

O projeto de mensagem de erro muito importante. Mensagens de erros mal projetadas levam o usurio a rejeitar o sistema. Mensagens devem ser educadas, concisas, consistentes e construtivas. O conhecimento e a experincia dos usurios devem ser previstos, quando se projetam mensagens de erro.

Slide 31

Fatores de projeto na redao de mensagens

Contexto O sistema de orientao ao usurio deve estar ciente do que o usurio est fazendo e deve ajustar a mensagem emitida ao contexto atual.

Experincia medida que os usurios se familiarizam com um sistema, eles ficam irritados com mensagens longas e complexas. Contudo, os iniciantes acham difcil compreender declaraes curtas. O sistema deve oferecer recursos para ambos. Nvel de habilidade Estilo As mensagens devem ser ajustadas s habilidades do usurio, como tambm a sua experincia. As mensagens devem ser positivas, e no negativas. Elas devem utilizar o modo ativo em vez do modo passivo de expresso. No devem ser ofensivas ou engraadas. Sempre que possvel, o projetista deve estar familiarizado com a cultura do pas em que o sistema vendido. Uma mensagem adequada para uma cultura pode ser inaceitvel para outra. Slide 32

Cultura

Entrada do nome de um paciente por uma enfermeira

Please type o nome do paciente na caixa e em seguida clicarok OK Favor digitar the patient name in the box then click em

Bates J. ,

OK

Cancel

Slide 33

Mensagens orientadas ao usurio e ao sistema

Mensagem de erro error message sistema System-oriented orientada ao Mensagem de erro orientada ao usurio User-oriented error message
O paciente J. Bates no est registrado Patient J . Bates is not registered Clique em Pacientes para uma lista de pacientes C k l ai o t o ni r e c P a t n s l i f s Cliqueon Retr y to re-input apara uma nova entrada Click em nova tentativa patient name Cliqueon Help f or para obter mais informaes Click em Ajuda more inf ormation
Patients Help Retry C a n t

?
O

Error #27 Erro #27

Entrada de ID do paciente Invalid patient id entered invlida

K Cancel

Slide 34

Sistemas de ajuda
q

No deve simplesmente ser uma reproduo do manual do usurio. Telas ou janelas so pequenas, portanto no apropriadas para reproduzir textos em papel. As pessoas lem textos em papel e em telas de maneiras diferentes. A apresentao do texto em telas podem aproveitar de suas caractersticas dinmicas (hipertexto, por ex.)
Slide 35

Uso de sistema de ajuda

q

O sistema de ajuda deve fornecer diferentes pontos de entrada, assim os usurios podem entrar no sistema a partir de pontos especficos do sistema. Deve-se ter uma indicao de onde o usurio se encontra posicionado no sistema de ajuda. Facilidades de navegao devem ser fornecidas ao usurio, mostrando, por exemplo, uma janela de histricos.
Slide 36

Pontos de entrada em um sistema de ajuda

To Entradap-lev el no ent ry nvel superior

En try fro m a Entrada ap pl icat io n da partir

aplicao Entrada a En try fro doerro r partir m

m ess ag e sy st em

sistema de mensagens de erro

Hel p fram e n etwo de Rede do esquema rk ajuda

Slide 37

Janelas do sistema de ajuda

Help frame map M ail redirection M ail m ay be redirected to an other n etwo rk user b y pressing th e redirect bu tton in the co nt ro l p an el. Th e system asks fo r the n ame of t he us er or us ers to wh om th e m ail h as b een sen t Yo u are h ere
m o re n ext top ics

Hel p history 1. 2. 3. 4. M ail Sen d mail Read m ail Redirection

Slide 38

Documentao do usurio
q

Assim como informao on-line, a documentao em papel deve ser fornecida. Documentao deve ser projetada para serem utilizadas por diferentes classes de usurios finais do sistema.

Slide 39

Tipos de documentao do usurio

Avaliadores de sistemas Descrio funcional Descrio de servios Administradores de sistemas Documento de instalao Como instalar o sistema Usurios novatos Manual de introduo Primeiros passos Usurios experientes Manual de consulta Descrio de recursos Administradores de sistemas Guia do administrador Operao e manuteno

Slide 40

Avaliao de interface com o usurio (tcnicas simples)

q

q q

Questionrios sobre o que o usurio pensam a respeito da interface. Observao dos usurios operando a interface. Incluso de software que coleta informaes sobre os recursos mais utilizados e os erros mais comuns.

Slide 41

Atributos de usabilidade
Atributo Descrio

Facilidade de Quanto tempo leva um novo usurio para se tornar Aprendizado produtivo com o sistema? Velocidade de Em que grau a resposta do sistema combina com a Operao prtica de trabalho do usurio? Robustez Qual o nvel de tolerncia do sistema aos erros do usurio?

Facilidade de Com que eficincia o sistema se recupera a partir de Recuperao erros cometidos pelos usurios? Facilidade At que ponto o sistema est integrado a um nico de adaptao modelo de trabalho?
Slide 42

Tcnicas de avaliao simples

q

Questionrios que coletam impresses do usurio. Observaes dos usurios que trabalham com o sistema (reaes e comentrios em voz alta). Instrumentao do cdigo para reunir informaes sobre facilidade de uso e erros do usurio. Registros de uso tpico de sistema em ncleo.

Slide 43

Pontos chave
q q

Projeto de interface deve ser centrado no usurio. Uma interface deve ser lgica e consistente e incluir recursos para ajudar os usurios a conseguir se recuperar de erros. Telas grficas devem ser utilizadas para apresentar tendncias e valores aproximados. Displays digitais devem ser utilizados somente quando a preciso necessria.

Slide 44

Pontos chave
q

q q q

Cores devem ser usadas de maneira consistente e em equilbrio. Os sistemas devem fornecer ajuda on-line. Mensagens de erro devem ser positivas. Um conjunto de diferentes tipos de documentos do usurio devem ser fornecidos juntamente com o sistema. Idealmente, uma interface com o usurio deve ser avaliada com relao a uma especificao de usabilidade.
Slide 45