Engenharia de Software - Aula 12 - Projeto de Interface do Usuário

Prévia do material em texto

Aula de Hoje
• Projeto de Interfaces do Usuário
HCI – Human Computer Interface
Motivação
• O mundo está rodeado de sistemas
• E, os sistemas requerem interação humana
• Daí surge a necessidade de boa Usabilidade
Usabilidade
“Usabilidade é uma medida qualitativa da 
facilidadefacilidade e eficiênciaeficiência com a qual um ser humano 
consegue empregar as funções e os recursos consegue empregar as funções e os recursos 
oferecidos pelo produto de alta tecnologia”
[Pressman, 2011]
Usabilidade
• Nas três primeiras décadas da era computacional, 
usabilidade não era uma preocupação dominante 
entre os que construíam softwareentre os que construíam software
• Em 1988, Donald Norman argumentou que já era 
tempo de uma mudança de atitude
Usabilidade
“ Para criar tecnologia que se adapte ao ser humano, 
é necessário estudá-lo. Hoje temos uma tendência 
de estudar apenas a tecnologia. Como 
consequência, exige-se que as pessoas se adaptem consequência, exige-se que as pessoas se adaptem 
à tecnologia. É chegada a hora de inverter a 
tendência, a hora de fazer com que a tecnologia se 
adapte às pessoas” [Donald Norma] 
Estudo da Interação Humana
• A partir dos estudos das interações humanas 
surgiram duas questões importantes
• Conjunto de Regras de Ouro que se aplicam a toda • Conjunto de Regras de Ouro que se aplicam a toda 
interação humana com produtos tecnológicos
• Conjunto de Mecanismos de Interação para permitir aos 
projetistas de sw construir sistemas que implementam de 
forma apropriada essas regras de ouro
As Regras de Ouro
1. Deixar o usuário no comando
2. Reduzir a carga de memória do usuário
3. Tornar a interface consistente
1. Deixar o usuário no comando
“O que eu realmente gostaria é de um sistema que leia a 
minha mente. Ele saberia o que eu quero fazer antes mesmo 
de eu ter de fazê-lo e isso me facilitaria tremendamente a de eu ter de fazê-lo e isso me facilitaria tremendamente a 
vida. Isso é tudo, apenas isso.” [Ass: usuário]
1. Deixar o usuário no comando
• O usuário quer um sistema que reaja às suas
necessidades e o ajude a concretizar suas tarefas
• O usuário quer controlar o computador,
e não que o computador o controle
1. Deixar o usuário no comando
• Como projetistas, somos tentados a introduzir
restrições e limitações para simplificar a
implementação da interfaceimplementação da interface
• O resultado é uma interface fácil de ser construída,
mas frustrante sob o ponto de vista do usuário
1. Deixar o usuário no comando
• Theo Mandel em 1997 definiu 6 (seis) princípios
de projeto que possibilitam a um usuário manter o
controle
1. Deixar o usuário no comando
1.1. Defina modos de interação para não forçar o usuário a
realizar ações desnecessárias ou indesejadas
• Ex: sistema solicita todos os dados para o cadastro de um
funcionário, depois do usuário preencher tudo e clicar em
salvar, o sistema avisa que o CPF já existe e apaga todos os
dados digitados. �
1. Deixar o usuário no comando
1.2. Proporcione interação flexível: ofereça diferentes opções
de interação
• Ex: permitir ao usuário interagir por meio de comandos do
teclado (teclas de atalhos), movimentação do mouse, caneta
digitalizadora, tela multitoque, etc...
• Ex: Sistema de controle de eventos em calendário,
visualização dos eventos em lista ou em forma de calendário
Exemplo Google Calendar
OPÇÃO 1
OPÇÃO 2
Exemplo Google Calendar
Diversas opções de visualização
1. Deixar o usuário no comando
1.3. Possibilite que a interação possa ser interrompida e
desfeita
• Permitir ao usuário interromper o que está fazendo para fazer
outra coisa SEM perder o que já tinha feito
• Ex: usuário preenchendo um formulário enorme que só pode
salvar no final, ou seja, quando começa a preencher TEM que
ir até o final, senão perde tudo� solução salvar parcial ☺
• Ex: telas sem opção de cancelar uma ação e voltar ao passo
anterior �
1. Deixar o usuário no comando
1.4. Simplifique a interação à medida que os níveis de
competência avançam e permita que a interação possa ser
personalizada
• Ex: No Microsoft Office Word 2007, é possível automatizar
tarefas usadas frequentemente criando macros. Uma macro é
uma série de comandos e instruções agrupadas como um
único comando para realizar uma tarefa automaticamente. Por
exemplo, para inserir uma tabela com um tamanho e bordas
específicos e com um número específico de linhas e colunas
1. Deixar o usuário no comando
1.5. Oculte os detalhes técnicos de funcionamento interno do
usuário casual
• A interface não deve exigir que o usuário interaja em um nível
“interno” à máquina
• Ex: digitar comandos do SO a partir do ambiente de aplicação
• Ex: editor de texto LATEX
Exemplo LATEX
1. Deixar o usuário no comando
1.6. Projete uma interação direta com objetos que aparecem
na tela
• Usuário tem sensação de controle quando manipula objetos
para realizar uma tarefa no sistema de maneira similar como
aconteceria no mundo físicoaconteceria no mundo físico
• Ex: uma interface de aplicação que permita “esticar” um objeto
(aumentar ou diminuir seu tamanho) é uma implementação de
manipulação direto
• Ex: Talking Ginger, Talking Tom Cat
As Regras de Ouro
1. Deixar o usuário no comando
2.2. Reduzir a carga de memória do usuárioReduzir a carga de memória do usuário
3. Tornar a interface consistente
2. Reduzir a carga de memória 
do usuário
“Quanto mais o usuário tiver de se lembrar, mais 
sujeita a erros está a interação com o sistema.” sujeita a erros está a interação com o sistema.” 
[Pressman, 2011]
2. Reduzir a carga de memória 
do usuário
• Theo Mandel em 1997 definiu 5 (cinco)
princípios de projeto que possibilitam a um
interface reduzir a carga de memória do usuário
2. Reduzir a carga de memória 
do usuário
2.1. Reduza a demanda de memória recente
• A interface deve ser projetada para reduzir a exigência de
recordar ações, entradas e resultados passados. Isso poderecordar ações, entradas e resultados passados. Isso pode
ser obtido pelo fornecimento de pistas visuais que permitam
a um usuário reconhecer ações passadas, em vez de ter de
recordar delas
• Ex: escolhi tipo de evento e data desejada, quando mostrar
a lista de eventos, mostrar qual tipo e data eu havia
escolhido
Exemplo Windows Explorer
O sistema mostra onde você está 
hierarquicamente nas pastas
2. Reduzir a carga de memória 
do usuário
2.2. Estabeleça defaults significativos
• um conjunto de parâmetros iniciais devem fazer
sentido para um usuário comum, porém o usuáriosentido para um usuário comum, porém o usuário
deve poder altera-lo para definir suas preferência.
Mas, tenha sempre a opção de “reset” para voltar
aos valores padrões iniciais
• Ex: filtro de eventos da próxima semana...
Exemplo Google Calendar
2. Reduzir a carga de memória 
do usuário
2.3. Defina atalhos intuitivos
• Quando forem usados mnemônicos para alguma
função de sistema, esse deve estar ligado à ação,função de sistema, esse deve estar ligado à ação,
ser intuitivo e de fácil memorização
• Ex: a primeira letra da ação = CTRL + P = print
2. Reduzir a carga de memória 
do usuário
2.4. O layout visual da interface deve se basear na
metáfora do mundo real
• Para que o usuário se apoie em indicações visuais• Para que o usuário se apoie em indicações visuais
compreensíveis em vez de memorizar sequência
de interações misteriosas
• Ex: um sistema de pagamento de contas, pode
usar uma metáfora de talão de cheque para
orientar o usuário no processo de pagamento de
contas
Exemplo metáfora do mundo real
2. Reduzir a carga de memória 
do usuário
2.5. Revele informações de maneira progressiva
• Organize a interface hierarquicamente• Informações sobre uma tarefa,
um objeto ou um comportamentoum objeto ou um comportamento
devem ser apresentadas inicialmente
em um alto nível de abstração.
Mais detalhes devem ser apresentados
após o usuário demonstrar interesse
por meio de alguma seleção
• Ex: função sublinhado
As Regras de Ouro
1. Deixar o usuário no comando
2. Reduzir a carga de memória do usuário
3.3. Tornar a interface consistenteTornar a interface consistente
3. Tornar a interface consistente
• As informações visuais devem ser organizadas de acordo
com regras de projetos mantidas ao longo de todas as
telas – Ex: botão de voltar sempre no mesmo lugar
• Os mecanismos de entrada devem ser usados de forma
consistente por toda a aplicação
• Os mecanismos de navegação para passar de uma
tarefa a outra devem ser implementados de forma
consistente
3. Tornar a interface consistente
• Theo Mandel em 1997 definiu um conjunto de
princípios de projeto para tornar uma interface
consistente
3. Tornar a interface consistente
3.1. Permita ao usuário inserir a tarefa atual em um
contexto significativo
• É importante fornecer indicadores que permitam o
usuário saber o contexto do trabalho em mãosusuário saber o contexto do trabalho em mãos
3. Tornar a interface consistente
3.2. Mantenha a consistência ao longo de uma família de
aplicações
• Um conjunto de aplicações devem implementar as• Um conjunto de aplicações devem implementar as
mesmas regras de projeto para manter consistência
na interação
• Ex: CTRL + C = copiar no Excel = Word = Power Point
3. Tornar a interface consistente
3.3. Se modelos interativos anteriores tiverem criado
expectativa nos usuários, não faça alterações
• Uma vez que a sequência interativa for definida o• Uma vez que a sequência interativa for definida o
usuário pressupõe que isso vá ocorrer em qualquer
aplicação futura
Projeto de Interface do Usuário
• O projeto de interface do usuário deve enfatizar a 
necessidade do usuário final e a facilidade de uso
Exemplo de Projeto de Interface
Exemplo de Projeto de Interface
Exemplo de Projeto de Interface
Análise X Projeto
use-cases - text 
use-case diagrams 
activity diagrams 
data flow diagrams 
control-flow diagrams 
f l ow- or i ent e d 
e l ement s
scena r i o- based
e l ement s
Com pone nt - 
Le v e l De sign
Analysis Model
activity diagrams 
swim lane diagrams
control-flow diagrams 
processing narratives
behav ior a l
e l ement s
c l a ss- based
e l ement s
class diagrams 
analysis packages 
CRC models 
collaboration diagrams 
state diagrams 
sequence diagrams
Da t a / Cla ss De sign
A rc h it e c t u ra l De sign
In t e rf a c e De sign
Design Model
Interface Design
Trabalho em Grupo
– Fazer o projeto de interface do sistema do 
grupo
– Como fazer?– Como fazer?
– Analise o diagrama dos casos de uso e crie as telas 
na sequencia das interações
– Para cada tela criada, indique quais regras de ouro 
foram consideradas
– Pode utilizar ferramentas que apoiem o projeto de 
interface. Ex: Pencil
Leitura Recomendada
– Capítulo 11 do livro texto: Pressman, Roger. 
Engenharia de Software, 7ed. McGrawHill, 
Porto Alegre, RS, 2011.