Projeto da Interface do Usuário

Apresentação em tema: "Projeto da Interface do Usuário"— Transcrição da apresentação:

1 Projeto da Interface do Usuário
Baseado no material de Fred Niederman Capítulos 10 & 11 do livro de Dennis & Wixom.

2 Definições A interface do usuário define como o sistema irá interagir com entidades externas As interfaces do sistema definem como o sistema troca informações com outros sistemas

3 Definições O mecanismo de navegação oferece a maneira que os usuários dizem ao sistema o que deve ser feito O mecanismo de entrada define a maneira que o sistema captura as informações O mecanismo de saída define a maneira que o sistema oferece informações aos usuários ou a outros sistemas A interface gráfica do usuário (GUI) é provavelmente o tipo mais comum de interface.

4 Princípios para o Projeto da Interface do Usuário
Layout Atenção ao conteúdo Estética Experiência do usuário Consistência Minimização do esforço do usuário

5 Conceitos de Layout A tela é geralmente dividida em três partes
Área de navegação (topo) Área de status (baixo) Área de trabalho (meio) Informações podem ser apresentadas em múltiplas áreas Como áreas devem ser agrupadas juntas?

6 Conceitos de Layout Áreas e informações devem minimizar o movimento do usuário de uma para outra Levar em consideração Tamanho Forma Localização da entrada de dados Como relatar os dados recuperados

7 Layout: Exemplo 1

8 Layout: Exemplo 2

9 Layout: Exemplo 3

10 Atenção ao Conteúdo Todas as interfaces devem ter títulos
Menus devem mostrar onde você está de onde você veio Deve estar claro qual informação está dentro de cada área Campos e rótulos dos campos devem ser selecionados com cuidado Use datas e números de versões para auxiliar usuários do sistema

11 Estética Interfaces precisarm ser funcionais e convidativas para o uso
Evite colocar informações em excesso, particularmente para usuários novatos Projete texto com cuidado Esteja consciente do fonte e do tamanho Evite o uso de todas as letras maiúsculas

12 Estética Cores e padrões devem ser usados com cuidado
Teste a qualidade de cores, mas também veja a interface num monitor preto/branco Use cores para separar ou categorizar itens

13 Experiência do Usuário
O sistema é fácil de aprender? O sistema é fácil de usar para os especialistas? Considere adição de atalhos para especialistas Quando a rotatividade de funionários for pequena o treinamento pode diminuir o impacto da imprecisão de interfaces

14 Consistência Permite que os usuários saibam antecipadamente o que irá acontecer Reduz a curva de aprendizagem Considera itens dentro de uma aplicação e através de aplicações Mantém para muitos níveis diferentes Controles de navegação Terminologia Projeto de formulário e relatório

15 Minimize o Esforço Regra três cliques
Usuários devem ser capazes de ir do começo ou do menu principal de um sistema para a informação ou ação que eles quiserem com não mais que três cliques no mouse ou três teclas

16 Processo de Projeto da Interface do Usuário: cinco passos

17 Desenvolvimento do Cenário de Uso
Um resumo dos passos para realizar o trabalho Apresentado numa simples narrativa Documenta os casos mais comuns de forma que o projeto da interface de usuário seja adequado para estas situações

18 Diagrama da Estrutura da Interface
Mostra como todas as telas, formulários e relatórios são relacionados Mostra como o usuário move de um para outro Usa caixas e linhas Caixas denotam telas Linhas mostram movimentos de uma para outra

19 Exemplo de Diagrama da Estrutura da Interface

20 Padrões de Projeto de Interface
Os elementos básicos que são comuns nas telas, nos formulários e nos relatórios da aplicação Metáfora da interface Desktop, carrinho de compras Objetos de interface Ações de interface Ícones de interface Templates de interface

21 Protótipo do Projeto de Interface
Uma simulação de tela, formulário ou relatório Métodos comuns incluem Papel Narrar estórias HTML Linguagem

22 Exemplo de Storyboard

23 Métodos de Avaliação de Interface
Avaliação heurística Use lista de checagem para avaliar projetos Avaliação através de caminhos (Walkthrough) A equipe de projeto apresenta o protótipo aos usuários e navegam através de várias partes da interface Avaliação interativa Usuários tentam usar o sistema Teste formal de usabilidade Caro, uso detalhado de laboratório teste

24 Componentes do Projeto de Interface do Usuário
Projeto de Navegação Projeto de Entradas Projeto de Saídas

25 Projeto de Navegação: Princípios Básicos
Assume que os usuários Não lêem o manual Não têm treinamento Não têm ajuda disponível Todos os controles devem estar claros e entendíveis e colocados num local intuitivo da tela.

26 Projeto de Navegação: Princípios Básicos
Prevenção de erros Limite as escolhas Nunca exiba comandos que não possam ser usados (ou “desabilite”) Confirme ações que seja difíceis ou impossíveis de serem desfeitas Simplifique a recuperação de erros Use uma ordem gramatical consistente (ex. objeto-ação)

27 Tipos de Controle de Navegação
Linguagens Linguagem de comandos Linguagem natural Menus Geralmente visam um menu amplo com pouca profundidade Considere o uso de “teclas de atalho” Manipulação Direta Usada com ícones para começar programas Usada para dar forma e tamanho a objetos Pode não ser intuitiva para todos os comandos

28 Um Menu Tradicional no Sistema UNIX

29 Tipos Comuns de Menus

30 Exemplo de Mapa de Imagem

31 Tipos de Menus Quando você usaria cada um destes tipos de Menu?
Menu bar Drop-down menu Pop-up menu Tab menu Toolbar Image map Quando você usaria cada um destes tipos de Menu?

32 Dicas de Mensagens Devem ser claras, concisas e completas
Devem ser gramaticamente corretas e livres de abreviações e jargões (a menos que sejam os do usuário) Evite mensagens negativas e humoristas

33 Tipos de Mensagens Quando você usaria cada um destes tipos de
Error message Confirmation message Acknowledgment message Delay message Help message Quando você usaria cada um destes tipos de Mensagens?

34 Projeto de Entradas: Princípios Básicos
Use adequadamente o processamento On-line e Batch Capture dados na fonte Minimize o número de teclas digitadas

35 Uso adequado do processamento Online e Batch
Processamento online imediatamente grava a transação na base de dados apropriada Processamente Batch coleciona entradas durante um período Processamento batch simplifica comunicações de dados e outros processos, mas por ex. ö “estoque” e outros “relatórios”podem não estar consistentes em tempo real

36 Capture Dados na Fonte Reduz a duplicação de trabalho
Reduz tempo de processamento Diminui o custo Diminui a probabilidade de erros

37 Minimize o número de teclas digitadas
O sistema nunca deve pedir informações que podem ser obtidas de outra forma (ex. Recuperando da base de dados ou realizando um cálculo) Um sistema não deve requerer que um usuário digite informações que podem ser selecionadas de uma lista Use valores padrões

38 Tipos de Entradas Itens de dados ligados a campos Texto Números
Caixas de seleção

39 Tipos de Formulários de Entrada

40 Tipos de Caixas de Seleção
Check box Radio button On-screen list box Drop-down list box Combo box Slider Quando você usaria cada um destes tipos de Caixas?

41 Tipos de Validação de Entrada
Completeness check Format check Range check Check digit check Consistency check Database checks Quando você usaria cada um destes métodos de Validação?

42 Projeto de Saídas: Princípios Básicos
Entenda o uso de relatório Referência ou início a fim? Freqüência? Relatórios em tempo real ou batch? Gerencie informações carregadas Todas as informações necessárias, não mais Minimize a tendência (ex. entradas que aparecem na lista primeiro pode receber maior atenção)

43 Tendência em Gráficos

44 Tipos de Relatórios Quando você usaria cada um destes tipos de
Detail reports Summary report Turnaround document (ex. credit card bills) Graphs Quando você usaria cada um destes tipos de Relatórios?