17/09/2020

PROJETO DE INTERFACE
DE SISTEMAS
Profas. Denise Franzotti Togneri e Eliana Cáus Sampaio

SUMÁRIO
• conceituação
• Elementos do Projeto de Interface de um Sistema
• Projeto de Interface com o Usuário
• Definição
• As três regras de ouro
• Modelos de análise e de projeto de interface
• Tipos de usuários de um sistema
• Análise de interfaces
• Questões de projeto
• A experiência do usuário (UX – User Experience)
• Projeto de Interface de sistemas e aplicações Web (WebApps)
• Projeto de Interface de aplicativos móveis

1
 17/09/2020

PROJETO DE INTERFACE DE UM
SISTEMA - CONCEITUAÇÃO
• É uma atividade de modelagem que descreve como o software
deverá se comunicar
• dentro dele mesmo (interface interna entre os componentes do
software - importante para software distribuído, arquitetura
cliente/servidor, para analisar como os componentes irão se
comunicar);
• com outros sistemas que interagem com ele (interface externa
com outras entidades, outros sistemas, dispositivos, redes ou
outros produtores ou consumidores de informação ) e
• com pessoas que o utilizam (interface com o usuário).

ELEMENTOS DO PROJETO DE
INTERFACE DE UM SISTEMA
• Consiste em projetar três importantes elementos:
• interface com o usuário;
• interfaces externas com outros sistemas e
• interfaces internas entre os vários componentes de projeto.

2
 17/09/2020

PROJETO DE INTERFACE COM O USUÁRIO

PROJETO DE INTERFACE
COM O USUÁRIO
• É aquele que cria um meio efetivo de comunicação entre o ser
humano e o computador.

• Seguindo um conjunto de princípios de projeto de interface, o projeto

identifica objetos e ações de interface e então cria um layout de tela
que forma a base para um protótipo de interface do usuário
(PRESSMAN; MAXIM, 2016, p. 317).

3
 17/09/2020

PROJETO DE INTERFACE
COM O USUÁRIO
• É feito pelo engenheiro de software (de preferência especializado em UX -
User Experience), que aplica um processo iterativo que se apoia sobre
princípios de projeto predefinidos.

• Produtos do trabalho:
• Cenários do usuário são criados e layouts de telas são gerados.
• Um protótipo de interface é desenvolvido e modificado de modo iterativo.

AS TRÊS REGRAS DE OURO DO

PROJETO DE INTERFACE COM USUÁRIO

• Existem três regras de ouro que formam a base para um conjunto de

princípios para o projeto de interface do usuário (PRESSMAN; MAXIM, 2016,
p. 318):
• Deixar o usuário no comando
• Reduzir a carga de memória do usuário
• Tornar a interface consistente.

4
 17/09/2020

AS TRÊS REGRAS DE OURO DO

PROJETO DE INTERFACE COM USUÁRIO
1. DEIXE O USUÁRIO NO COMANDO.
• O projetista não deve introduzir restrições e limitações na interface para simplificar
sua implementação se o resultado for frustrante para o usuário
2. REDUZA A CARGA DE MEMÓRIA DO USUÁRIO
• Quanto mais um usuário tiver que lembrar, mais sujeita a erros será a interação
com o sistema. O sistema deve “lembrar” informação pertinente e assistir o usuário
com um cenário de interação que ajude a lembrar
3. TORNE A INTERFACE CONSISTENTE
1. Toda a informação visual deve ser organizada de acordo com um padrão de
projeto mantido ao longo de todos os mostradores de tela
2. Mecanismos de entrada devem ser restritos a um conjunto limitado, usado
consistentemente ao longo de toda a aplicação e
3. Mecanismos para navegar de tarefa a tarefa devem ser consistentemente
definidos e implementados.
9

TRÊS REGRAS DE OURO DO

PROJETO DE INTERFACE COM O USUÁRIO

Cada uma dessas regras de ouro forma a base para um conjunto de

princípios de projeto de interface com o usuário e pautam essa importante
atividade de projeto de software.

10

10

5
 17/09/2020

DEIXAR O USUÁRIO NO
COMANDO
• Defina os modos de interação para não forçar o usuário a realizar ações
desnecessárias ou indesejadas.
• Proporcione interação flexível → o usuário deve escolher como interagir de
acordo com sua preferência (ex. teclado, mouse, caneta digitalizadora,
comando de voz) .
• Permita que a interação com o usuário possa ser interrompida (para fazer
alguma outra coisa sem perder o trabalho que já tinha sido feito) e desfeita.
• Simplifique a interação à medida que os níveis de competência avançam e
permita que a interação seja personalizada.
• Oculte os detalhes técnicos de funcionamento interno do usuário esporádico
(casual) → o usuário não deve, por exemplo, teclar comandos do S.O. de
dentro de um software de aplicação.
• Projete a interação direta com objetos que aparecem na tela (ex. permitir ao
usuário “esticar” um objeto (aumentá-lo no tamanho) como se fosse um
11
objeto físico), aumentar tamanho de letra, arrastar documento para lixo, ...
11

REDUZA A CARGA DE
MEMÓRIA DO USUÁRIO
• Reduza a demanda da memória recente → a interface deve ser projetada para
reduzir a necessidade de lembrar ações e resultados anteriores. Deve-se fornecer
indicações visuais que permitem ao usuário reconhecer ações anteriores, em vez de
ter de se lembrar delas.
• Estabeleça defaults significativos → os defaults devem fazer sentido para o usuário
médio, mas o usuário poderá especificar preferências individuais. No entanto, a
opção reset (refazer os parâmetros iniciais) deve estar disponível .
• Defina atalhos intuitivos → usar mnemônicos que devem ser ligados à ação de um
modo fácil de lembrar (ex. ALT-P para print).
• O layout visual da interface deve ser baseado em uma metáfora do mundo real → ex.
usar metáfora de talão e canhoto de cheques para guiar o usuário durante o
processo de pagamento de contas.
• Revele informação de maneira progressiva → a informação deve ser organizada
hierarquicamente, inicialmente em um alto nível de abstração e, à medida que
usuário indicar interesse com um clique do mouse, apresentar detalhes.
12

12

6
 17/09/2020

TORNE A INTERFACE
CONSISTENTE
• Permita ao usuário inserir a tarefa atual em um contexto significativo → deve-
se fornecer indicadores (títulos de janela, ícones gráficos, código de cores
consistentes) que permitam ao usuário saber o contexto do trabalho em
mãos, ao invés, por exemplo, de camadas de interação complexas com
muitas imagens de tela.

• Mantenha a consistência em uma linha de produtos completa →

implementando por exemplo as mesmas regras de projeto.

• Se modelos interativos anteriores criaram expectativas para o usuário, não

faça modificações, ao menos que haja forte razão para isso.

13

13

MODELOS DE ANÁLISE E DE
PROJETO DE INTERFACE
• Quatro diferentes modelos entram em jogo quando uma interface com o
usuário deve ser analisada e projetada (PRESSMAN; MAXIM, 2016, p. 322):
• modelo de usuário → estabelecer o perfil dos usuários finais do sistema (ex. perfis
de idade, sexo, habilidades físicas, educação, background étnico ou cultural,
motivação, metas e personalidade, além de levantar se são novatos, usuários
esporádicos ou frequentes, etc)
• modelo de projeto do sistema → incorpora representações de dados, arquitetural,
de interface e procedural do software.
• modelo mental do usuário (percepção do sistema) → é a imagem do sistema que
os usuários finais têm em suas mentes.
• modelo de implementação → combina a manifestação externa do sistema
baseado em computador (a aparência e a percepção da interface) acoplada a
toda informação de apoio (livros, manuais, vídeos, arquivos de ajuda) que
descreve a sintaxe e a semântica do sistema.

14

14

7
 17/09/2020

MODELOS DE ANÁLISE E DE
PROJETO DE INTERFACE
• Quando o modelo de implementação e o modelo mental do usuário são
coincidentes, os usuários geralmente se sentem confortáveis com o
software e o usam efetivamente.

• Para conseguir esta coincidência dos modelos, o modelo de projeto deve

ter sido desenvolvido para acomodar a informação contida no modelo do
usuário, e o modelo de implementação deve refletir precisamente a
informação sintática e semântica sobre a interface.

15

15

TIPOS DE USUÁRIOS DE UM
SISTEMA
• Novatos
• Nenhum conhecimento sintático (se refere à mecânica de interação) do sistema
e pouco conhecimento semântico (compreensão das funções que são
realizadas, significado da entrada e da saída, e metas e objetivos do sistema) da
aplicação ou do uso de computadores em geral.
• Usuários esporádicos e conhecedores
• Razoável conhecimento semântico da aplicação, mas lembrança
relativamente pequena da informação sintática necessária para usar a
interface.
• Usuários frequentes e conhecedores
• Bom conhecimento semântico e sintático que frequentemente leva à síndrome
do usuário possante; isto é, indivíduos que buscam atalhos e modos de interação
abreviados.

16

16

8
 17/09/2020

ANÁLISE DE INTERFACES
• Um princípio fundamental de todos os modelos de processos de Engenharia
de Software é o seguinte: entender o problema antes de tentar desenvolver
uma solução.
• No caso de projeto de interfaces do usuário, entender o problema significa
entender (PRESSMAN; MAXIM, 2016, p. 325):
(1) As pessoas (usuários) que vão interagir com o sistema por meio da interface
(2) As tarefas que os usuários devem realizar para completar seus trabalhos
(3) O conteúdo que é apresentado como parte da interface
(4) O ambiente onde essas tarefas serão conduzidas.

17

ANÁLISE DE INTERFACES
1 – ANÁLISE DE USUÁRIOS
Para entender melhor os usuários de um sistema, as seguintes perguntas
devem ser respondidas:
• Os usuário são profissionais treinados, técnicos, do setor administrativo ou
pessoal de fábrica?
• Que nível de educação formal o usuário médio possui?
• Os usuários são capazes de aprender por meio de material escrito ou
expressaram seu desejo por um treinamento em sala de aula?
• Os usuários são digitadores experientes ou têm fobia a teclados?
• Qual a faixa etária da comunidade de usuários?
• Os usuários serão representados predominantemente por um gênero?
• Como os usuários são recompensados pelo trabalho realizado?

18

9
 17/09/2020

ANÁLISE DE INTERFACES
1 – ANÁLISE DE USUÁRIOS
Para entender melhor os usuários de um sistema, as seguintes perguntas
devem ser respondidas:
• Os usuários trabalham em expediente normal ou ficam até que o trabalho
seja concluído?
• O software deverá ser parte do trabalho dos usuários ou será usado apenas
esporadicamente?
• Qual o principal idioma falado pelos usuários?
• Quais as consequências se um usuário cometer um erro ao usar o sistema?
• Os usuários são especialistas no assunto tratado pelo sistema?
• Os usuários querem saber sobre a tecnologia que se encontra por trás da
interface?

19

ANÁLISE DE INTERFACES
2 – ANÁLISE E MODELAGEM DE TAREFAS
Conhecer a análise das tarefas busca responder as seguintes perguntas:

• Que trabalho o usuário vai realizar em circunstâncias específicas?

• Quais tarefas e subtarefas serão realizadas à medida que o usuário
desenvolve seu trabalho?
• Quais os objetos do domínio de problema específicos que o usuário vai
manipular à medida que o trabalho é desenvolvido?
• Qual a sequência de tarefas – o fluxo de trabalho?
• Qual é a hierarquia das tarefas?

20

10
 17/09/2020

ANÁLISE DE INTERFACES
3 – ANÁLISE DO CONTEÚDO EXIBIDO
Para conhecer a estética do conteúdo, deve-se responder as seguintes
perguntas:
• Os diferentes tipos de dados são alocados em posições geográficas
padronizadas na tela (por exemplo, fotos sempre apareceriam no canto
superior direito) ?
• O usuário pode personalizar a localização do conteúdo na tela?
• Foi atribuída identificação apropriada na tela para todos os conteúdos?
• Se for preciso apresentar um relatório grande, como seria subdividido para
facilitar sua compreensão?
• Haverá mecanismos disponíveis para ir diretamente a informações
resumidas em conjuntos de dados volumosos?

21

ANÁLISE DE INTERFACES
3 – ANÁLISE DO CONTEÚDO EXIBIDO
Para conhecer a estética do conteúdo, deve-se responder as seguintes
perguntas:
• A saída gráfica será apresentada em escala para caber nos limites do
dispositivo de exibição utilizado?
• Como serão usadas cores para melhorar o entendimento?
• Como serão apresentadas ao usuário mensagens de erro e alertas?

22

11
 17/09/2020

ANÁLISE DE INTERFACES
4 – ANÁLISE DO AMBIENTE DE TRABALHO
No que diz respeito à análise do ambiente de trabalho, deve-se observar:

• Que as pessoas não realizam seus trabalhos de forma isolada. São

influenciadas pela atividade em torno delas, pelas características físicas do
local de trabalho, pelo tipo de equipamento utilizado e pelas relações de
trabalho que tem com outras pessoas.
• Se a interface facilita o usuário (iluminação apropriada, altura adequada
da tela, fácil acesso ao teclado).
• A cultura do local de trabalho também entra em cena.
• Se a interação do sistema será medida de alguma maneira (por exemplo,
tempo por transação ou precisão de uma transação)?
• Se duas ou mais pessoas terão de compartilhar informações antes de uma
opinião poder ser fornecida?
• Como será oferecido suporte aos usuários do sistema?

23

QUESTÕES DE PROJETO
Tempo de resposta do sistema
• É medido a partir do ponto no qual o usuário realiza alguma ação de
controle (ex. pressiona a tecla de retorno ou clica no mouse) até que o
software responda com a saída ou a ação desejada. Tem duas
características importantes: duração e variabilidade.

Recursos de ajuda a usuário

• A ajuda vai estar disponível para todas as funções do sistema em todos os
momentos durante a interação com o sistema?
• Como o usuário solicitará ajuda? (menu? chave especial de função?
comando?)
• Como a ajuda será representada? (janela separada? Referência a algum
documento impresso? Uma mensagem de uma ou duas linhas numa
localização fixa da tela?)
• Como a informação de ajuda será estruturada? (Estrutura plana?
Hierarquia de informação em camadas? )
24

24

12
 17/09/2020

QUESTÕES DE PROJETO
Tratamento de erros
• A mensagem deve descrever o problema em um jargão que o usuário possa
entender
• Deve fornecer sugestão construtiva para recuperação do erro
• Deve indicar quais consequências negativas do erro de modo que o usuário possa
verificar para assegurar-se de que elas não ocorreram (ou corrigi-las se tiverem
ocorrido)
• Deve ser acompanhada por uma indicação audível ou visual (bip, piscar ou cor de
erro)
• A mensagem não deve colocar a culpa no usuário.
Atribuição de nomes a comandos e menus
• Cada opção de menu terá um comando correspondente?
• Que forma os comandos vão tomar? (ex. alt-P, teclas de função ou palavra?)
• Quão difícil será aprender e lembrar os comandos?
• Os comandos podem ser personalizados ou abreviados pelo usuário?
25

25

QUESTÕES DE PROJETO
Acessibilidade da aplicação
• Os sistemas devem possibilitar fácil acesso para aqueles com necessidades
especiais (portadores de deficiências visual, auditiva, motora, de fala e de
aprendizado).

Internacionalização
• A interface com o usuário deve acomodar as necessidades de diferentes
locais e línguas.
• Sendo assim, as necessidades locais devem ser personalizadas para um
mercado específico.

26

26

13