Your SlideShare is downloading. ×
Eng.ª do Software - 8. Desenho de interfaces com o utilizador
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Eng.ª do Software - 8. Desenho de interfaces com o utilizador

3,990
views

Published on

Desenho de interfaces com o utilizador. Unidade de Engenharia do Software I para o curso de METI no ISCTE-IUL no 2.º semestre do ano lectivo de 2009/2010.

Desenho de interfaces com o utilizador. Unidade de Engenharia do Software I para o curso de METI no ISCTE-IUL no 2.º semestre do ano lectivo de 2009/2010.

Published in: Education

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,990
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
225
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Engenharia do Software I
    Manuel Menezes de Sequeira
    DCTI, ISCTE-IUL
    Manuel.Sequeira@iscte.pt, D6.02
    As apresentações desta série baseiam-se nas apresentações disponibilizadas por IanSommerville, tendo sido alteradas e adaptadas primeiro por  Anders Lyhne Christensen e finalmente por Manuel Menezes de Sequeira.
  • 2. Na aula anterior
    Desenho arquitectónico
    Decisões no desenho arquitectónico
    Organização de sistemas
    Estilos de decomposição
    Estilos de controlo
    Arquitecturas de referência
    2009/2010
    2
    Engenharia do Software I
  • 3. Desenho de interfaces com o utilizador
    2009/2010
    3
    Engenharia do Software I
  • 4. Sumário
    Desenho de interfaces com o utilizador
    Problemas de desenho
    Heurísticas de Nielsen para interfaces com o utilizador
    Estilos de interacção
    Processo de desenho de interfaces com o utilizador
    Análise dos utilizadores
    Prototipagem de interfaces com o utilizador
    Avaliação de interfaces
    2009/2010
    4
    Engenharia do Software I
  • 5. Objectivos
    Sugerir princípios gerais do desenho de interfaces
    Explicar
    Diferentes estilos de interacção e sua utilização
    Quando usar apresentações gráficas e textuais de informação
    Principais actividades do processo de desenho de interfaces
    Apresentar atributos de usabilidade e abordagens à avaliação de sistemas
    2009/2010
    5
    Engenharia do Software I
  • 6. A interface com o utilizador
    Deve ajustar-se a competências, experiência e expectativas de prospectivos utilizadores
    Utilizadores muitas vezes julgam sistema pela interface e não pela funcionalidade
    Interface mal desenhada pode induzir utilizador a erros catastróficos
    Mau desenho leva muitos sistemas não serem usados
    2009/2010
    6
    Engenharia do Software I
  • 7. Factores humanos no desenho de interfaces
    2009/2010
    Engenharia do Software I
    7
  • 8. Princípios do desenho de interfaces com o utilizador
    Desenho considera necessidades, experiência e capacidades de utilizadores
    Designers cientes de limitações físicas e mentais de humanos (e.g., memória de curta duração limitada) e reconhecem que humanos erram
    Princípios subjazem a desenho de interfaces, nem todos os princípios aplicáveis a todos os desenhos
    2009/2010
    Engenharia do Software I
    8
  • 9. Princípios do desenho de interfaces com o utilizador
    2009/2010
    Engenharia do Software I
    9
  • 10. Familiaridade
    Termos e conceitos recolhidos da experiência das pessoas que mais usarão sistema
    Termos e conceitos orientados para utilizador e não computacionais
    Por exemplo, sistema administrativo deve usar cartas, documentos e pastas e não ficheiros, identificadores ou directórios
    2009/2010
    Engenharia do Software I
    10
  • 11. Consistência
    Sempre que possível, operações comparáveis activadas da mesma forma
    Exemplos
    Comandos e menus com o mesmo formato
    Pontuação de comandos semelhante
    Utilização consistente de maiúsculas e minúsculas
    2009/2010
    Engenharia do Software I
    11
  • 12. Mínima surpresa
    Utilizadores nunca são surpreendidos pelo comportamento do sistema
    Se utilizador conhece efeito de um comando, deve conseguir prever efeitos de comandos comparáveis
    2009/2010
    Engenharia do Software I
    12
  • 13. Recuperabilidade
    Incluir mecanismos para utilizadores recuperarem de erros
    Resiliência face a erros do utilizador
    Anular ou desfazer comandos
    Confirmação de acções destrutivas
    Remoções com possibilidade de recuperação
    2009/2010
    Engenharia do Software I
    13
  • 14. Orientação
    Disponibilizar informação quando erros ocorrem e mecanismos de ajuda sensíveis ao contexto
    Disponibilização de orientação
    Sistemas de ajuda
    Manuais em linha
    2009/2010
    Engenharia do Software I
    14
  • 15. Diversidade
    Proporcionar mecanismos de interacção para diferentes tipos de utilizadores do sistema
    Alguns utilizadores têm dificuldades de visão: disponibilizar texto com maiores caracteres
    2009/2010
    Engenharia do Software I
    15
  • 16. Heurísticas de Nielsen
    2009/2010
    Engenharia do Software I
    16
  • 17. Heurísticas de Nielsen
    2009/2010
    Engenharia do Software I
    17
  • 18. Heurísticas de Nielsen
    2009/2010
    Engenharia do Software I
    18
  • 19. Dois problemas de desenho
    Como disponibilizar ao sistema informação vinda do utilizador?
    Como disponibilizar ao utilizador informação vinda do sistema?
    Interacção com utilizador e apresentação de informação podem ser integradas em estrutura coerente (e.g., metáfora de interface com o utilizador)
    2009/2010
    Engenharia do Software I
    19
  • 20. Estilos de interacção
    Manipulação directa
    Selecção em menus
    Preenchimento de formulários
    Comandos
    Linguagem natural
    2009/2010
    Engenharia do Software I
    20
  • 21. Estilos de interacção
    2009/2010
    Engenharia do Software I
    21
    Maioria dos sistemas de utilização geral.
    • Controlo de stocks.
    • 23. Gestão pessoal de empréstimos.
    • 24. Sistemas operativos.
    • 25. Sistemas de comando e controlo.
    Sistemas de recuperação de informação.
  • 26. Múltiplas interfaces
    2009/2010
    22
    Engenharia do Software I
    Interface gráfica de utilização (Gnome/KDE)
    Interface de linha de comandos (bash/ksh)
    Gestor da interface gráfica de utilização do X WindowSystem
    Interpretador de comandos
    Sistema operativo Linux
  • 27. Interacção LIBSYS
    2009/2010
    Engenharia do Software I
    23
  • 28. Interfaces baseadas na Web
    Muitos sistemas baseados na Web têm interfaces baseadas em formulários cujos campos podem ser
    Menus
    Caixa de texto livre
    Botões de rádio
    Etc.
    LIBSYS: Menu para escolher onde pesquisar e caixa de texto para frase a procurar
    2009/2010
    Engenharia do Software I
    24
  • 29. Formulário de pesquisa do LIBSYS
    2009/2010
    25
    Engenharia do Software I
    LIBSYS: Pesquisa
    Escolher colecção
    Todas
    Título
    Palavra ou frase
    Procurar usando
    Palavras adjacentes
    Sim
    Não
    Cancelar
    Limpar
    Pesquisar
  • 30. Apresentação da informação
    Apresentação ao utilizador de informação do sistema
    Informação pode ser apresentada
    Directamente – Texto num processador de texto
    Transformada – Formato gráfico
    Abordagem Modelo-Vista-Controlador suporta múltiplas vistas dos mesmos dados
    2009/2010
    Engenharia do Software I
    26
    Padrão de desenho.
  • 31. Apresentação da informação
    2009/2010
    27
    Engenharia do Software I
    Informação a mostrar
    Software de apresentação
    Ecrã
  • 32. Modelo-vista-controlador
    2009/2010
    28
    Engenharia do Software I
    Mensagens de modificação da vista
    Entradas do utilizador
    Controlador
    Vista
    Modelo
    estado
    estado
    estado
    métodos
    métodos
    métodos
    Interrogações e actualizações do modelo
    Edições do modelo
  • 33. Apresentação da informação
    Informação estática
    Inicializada no início de uma sessão
    Não muda durante uma sessão
    Pode ser numérica ou textual
    Informação dinâmica
    Muda durante a sessão
    Mudanças têm de ser comunicadas ao utilizador
    Pode ser numérica ou textual
    2009/2010
    Engenharia do Software I
    29
  • 34. Factores da apresentação da informação
    Utilizador interessa-se por informação precisa ou relações entre dados?
    Quão depressa mudam os valores da informação? Alterações devem ser indicadas imediatamente?
    Utilizador deve responder a alterações?
    Há interface de manipulação directa?
    Informação textual ou numérica? Valores relativos importantes?
    2009/2010
    Engenharia do Software I
    30
  • 35. Apresentações alternativas da informação
    2009/2010
    31
    Engenharia do Software I
    Jan.
    2842
    Fev.
    2851
    Mar.
    3164
    Abr.
    2789
    Mai.
    1273
    Jun.
    2835
    4000
    3000
    2000
    1000
    0
    Jan.
    Fev.
    Mar.
    Abr.
    Mai.
    Jun.
  • 36. Apresentação analógica ou digital?
    Apresentação digital
    Compacta – Ocupa pouco espaço no ecrã
    Permite comunica valores precisos
    Apresentação analógica
    Fácil ter ideia dos valores num relance
    Possível mostrar valores relativos
    Fácil ver valores excepcionais dos dados
    2009/2010
    Engenharia do Software I
    32
  • 37. Métodos de apresentação
    2009/2010
    33
    Engenharia do Software I
    1
    4
    2
    0
    10
    20
    3
    Mostrador e
    agulha
    Gráfico em
    queijo
    Barra
    horizontal
    Termómetro
  • 38. Mostrando valores relativos
    2009/2010
    34
    Engenharia do Software I
    Pressão
    Temperatura
    0
    200
    400
    100
    300
    0
    50
    100
    25
    75
  • 39. Visualização de dados
    Grandes quantidades de informação
    Revela tendências e relações entre entidades
    Possíveis visualizações
    Informação meteorológica recolhida em vários locais
    Estado de rede como conjunto de nós ligados
    Fábrica como conjunto de tanques e tubos mostrando pressões e temperaturas
    Modelo 3D de molécula
    Páginas Web como árvore hiperbólica
    2009/2010
    Engenharia do Software I
    35
  • 40. Ecrãs coloridos
    Cor adiciona dimensão extra à interface
    Ajuda a compreender estruturas complexas de informação
    Usada para destacar eventos excepcionais
    2009/2010
    Engenharia do Software I
    36
  • 41. Erros comuns
    Usar a cor para comunicar significado
    Superabundância de cor no ecrã
    2009/2010
    Engenharia do Software I
    37
  • 42. Mau exemplo
    2009/2010
    38
    Engenharia do Software I
  • 43. Orientações para uso de cores
    Limitar o número de cores
    Ser conservador
    Mostrar alterações de estado
    Suportar tarefas do utilizador com código de cores
    Usar de forma pensada e consistente
    Cautela com emparelhamentos
    2009/2010
    Engenharia do Software I
    39
  • 44. Bom exemplo
    2009/2010
    40
    Engenharia do Software I
  • 45. Mensagens de erro
    Bom desenho é crítico: más mensagens de erro podem levar à rejeição do sistema
    Devem ser
    Educadas
    Concisas
    Consistentes
    Construtivas
    Formação e experiência dos utilizadores é factor determinante no desenho
    2009/2010
    Engenharia do Software I
    41
  • 46. Factores na redacção de mensagens de erro
    2009/2010
    Engenharia do Software I
    42
  • 47. Erro do utilizador
    2009/2010
    43
    Engenharia do Software I
    Nome do paciente
    Introduza o nome do paciente:
    Ximenes, Xisto
    Assuma que um(a) enfermeira(o) se engana no nome do paciente de cujo registo necessita.
    Cancelar
    OK
  • 48. Mau desenho: mensagem de erro orientada para o sistema
    2009/2010
    44
    Engenharia do Software I
    Erro!
    !
    Erro 27
    ID de paciente inválido!
    Cancelar
    OK
  • 49. Bom desenho: mensagem de erro orientada para o utilizador
    2009/2010
    45
    Engenharia do Software I
    Paciente “Xisto Ximenes” desconhecido
    “Xisto Ximenes” não está registado como paciente.
    Carregue em “Pacientes” para ver uma lista de pacientes.
    Carregue em “De novo” para introduzir o nome de novo.
    Carregue em “Ajuda” para obter mais ajuda.
    Cancelar
    De novo
    Ajuda
    Pacientes
  • 50. Processo de desenho de interfaces com o utilizador
    É processo iterativo
    Relações estreitas entre utilizadores e designers
    Três actividades centrais
    Análise do utilizador
    Prototipagem do sistema
    Avaliação da interface
    2009/2010
    Engenharia do Software I
    46
  • 51. Actividades centrais do processo
    2009/2010
    Engenharia do Software I
    47
  • 52. Processo de desenho
    2009/2010
    48
    Engenharia do Software I
    Analisar e compreender actividades dos utilizadores
    Produzir primeiro protótipo em papel
    Avaliar desenho com utilizadores finais
    Avaliar desenho com utilizadores finais
    Protótipo de desenho
    Protótipo executável
    Produzir protótipo dinâmico
    Implementar interface com o utilizador final
  • 53. Análise de utilizadores
    Sem perceber o que utilizadores pretendem fazer não é possível desenhar interface eficaz
    Análises descritas em termos que utilizadores e designers possam entender
    Cenários descrevendo casos de uso típicos são forma de descrever análises
    2009/2010
    Engenharia do Software I
    49
  • 54. Cenário de interacção com o utilizador
    A Joana é aluna de Estudos Religiosos. Está a trabalhar num ensaio sobre arquitectura indiana e sobre a forma como foi influenciada pela prática religiosa. Para melhor compreender o assunto, gostaria de aceder a fotografias de pormenores de edifícios importantes. No entanto, não conseguiu encontrar nada de relevante na sua biblioteca local.
    Aborda o bibliotecário para discutir as suas necessidades. Este sugere-lhe alguns termos de pesquisa. Também lhe sugere algumas bibliotecas em Nova Deli e Londres que talvez tenham o material desejado. Entram nos catálogos da biblioteca e fazem pesquisas com esses termos. Encontram algum material e fazem um pedido para serem enviadas directamente à Joana fotocópias das fotografias com pormenores arquitectónicos que encontraram.
    2009/2010
    Engenharia do Software I
    50
  • 55. Requisitos do cenário
    Utilizadores podem não estar cientes de termos de pesquisa mais apropriados
    Precisam de ajuda na escolha dos termos
    Têm de poder escolher colecções a pesquisar
    Têm de poder pesquisar e pedir cópias do material relevante encontrado
    2009/2010
    Engenharia do Software I
    51
  • 56. Técnicas de análise
    2009/2010
    Engenharia do Software I
    52
  • 57. Análise hierárquica de tarefas
    2009/2010
    53
    Engenharia do Software I
    Obter imagens a partir de bibliotecas remotas
    Fazer 1, 2 e 3 até imagens encontradas, 4
    Descobrir possíveis fontes
    Estabelecer termos de pesquisa
    Pesquisar imagens
    Pedir fotocópias dos itens encontrados
    1
    2
    3
    4
    Fazer 3.1, 3.2 e 3.3 até imagens encontradas, 3.4 se necessário, 3.5
    Seleccionar biblioteca
    Autenticar no catálogo
    Pesquisar imagens
    Modificar termos de pesquisa
    Registar itens relevantes
    3.2
    3.3
    3.4
    3.5
    3.1
    3.3.1, 3.3.2 e 3.3.3
    Introduzir termos de pesquisa
    Iniciar pesquisa
    Analisar resultados
    3.3.1
    3.3.2
    3.3.3
  • 58. Entrevistas
    Conceber entrevistas semi-estruturadas baseadas em perguntas abertas
    Utilizadores fornecem informação que julgam essencial, e não apenas informação que se previu recolher
    Entrevistas de grupo e grupos foco permitem a utilizadores discutirem entre si o que fazem
    2009/2010
    Engenharia do Software I
    54
  • 59. Etnografia
    Observador externo observa utilizadores trabalhando e questiona-os sobre o seu trabalho
    Valor decorre de muitas tarefas serem intuitivas e difíceis de descrever e explicar pelos utilizadores
    Ajuda a compreender papel de influências sociais e organizacionais no trabalho
    2009/2010
    Engenharia do Software I
    55
  • 60. Registos etnográficos
    O controlo do tráfego aéreo usa um determinado número de ‘pacotes’ em que os pacotes de controlo de sectores adjacentes do espaço aéreo são fisicamente colocados lado a lado. Os voos num sector são representados por tiras de papel enfiadas nas ranhuras de um suporte de madeira por uma ordem que reflecte a sua posição no sector. Se não houver suficientes ranhuras num suporte (e.g., o espaço aéreo está muito intenso), os controladores espalham as tiras na secretária em frente do suporte.
    Enquanto observávamos os controladores, notámos que os controladores olhavam regularmente para os suportes de tiras no sector adjacente. Chamámos a atenção para este facto e perguntámos-lhes porque o faziam. Responderam que, quando um controlador adjacente tem tiras na sua secretária, há muitos voos que se preparam para entrar no seu sector. Quando isso acontece, eles tentam acelerar a velocidade das aeronaves no seu sector para ‘fazer espaço’ para os voos que para ele se dirigem.
    2009/2010
    Engenharia do Software I
    56
  • 61. Resultados da análise etnográfica
    Controladores têm de ver todos os voos num sector: deve evitar-se visualizações em que voos deslizem para fora do ecrã (quer pelo topo, quer pela base)
    Interface deve mostrar quantos voos estão em sectores adjacentes de modo a que controlador possa planear como lidar com pico de esforço que se aproxima
    2009/2010
    Engenharia do Software I
    57
  • 62. Prototipagem da interface com o utilizador
    Dar aos utilizadores experiência directa com interface
    Sem ela é impossível aferir usabilidade da interface
    Pode ser processo com duas etapas
    Inicialmente protótipos em papel
    Depois desenho é refinado e desenvolvem-se protótipos automatizados com sofisticação crescente
    2009/2010
    Engenharia do Software I
    58
  • 63. Prototipagem em papel
    Estudar cenários usando esboços da interface
    Usar guião para apresentar série de interacções com sistema
    Eficaz para obter reacções dos utilizadores a uma proposta de desenho
    2009/2010
    Engenharia do Software I
    59
  • 64. Técnicas de prototipagem
    2009/2010
    Engenharia do Software I
    60
    Capítulo 17
  • 65. Avaliação de interfaces com o utilizador
    Necessária para aferir se desenho é adequado
    Avaliação completa muito cara e impraticável para maioria dos sistemas
    Idealmente interfaces avaliadas face a especificação de usabilidade; mas é raro serem produzidas especificações
    2009/2010
    Engenharia do Software I
    61
  • 66. Atributos de usabilidade
    2009/2010
    Engenharia do Software I
    62
  • 67. Técnicas de avaliação simples
    Questionários ao utilizador
    Gravação vídeo de utilização do sistema e posterior avaliação
    Instrumentação de código para recolher informação acerca da utilização de funcionalidades e da ocorrência de erros do utilizador
    Disponibilização de código para recolha em linha de opiniões do utilizador
    2009/2010
    Engenharia do Software I
    63
  • 68. A reter
    Princípios do desenho guiam desenho de interfaces com utilizador
    Estilos de interacção incluem
    Manipulação directa
    Sistemas de menu
    Preenchimento de formulários
    Linguagens de comandos
    Língua natural
    2009/2010
    Engenharia do Software I
    64
  • 69. A reter
    Apresentações gráficas mostram tendências e valores aproximados
    Apresentações digitais mostram valores precisos
    Cor usada com parcimónia e consistência
    Processo de desenho inclui
    Análise de utilizadores
    Prototipagem do sistema
    Avaliação da interface
    2009/2010
    Engenharia do Software I
    65
  • 70. A reter
    Análise de utilizadores sensibiliza designers para forma de trabalho efectiva de utilizadores
    Prototipagem é processo em etapas; protótipos iniciais em papel base para protótipos automáticos
    Avaliação da interface informa como melhorar desenho e afere cumprimento de requisitos de usabilidade
    2009/2010
    Engenharia do Software I
    66
  • 71. A ler
    IanSommerville, Software Engineering, 8.ª edição, Addison-Wesley, 2006
    Capítulo 16
    2009/2010
    Engenharia do Software I
    67
  • 72. A ver
    useit.com: JakobNielsen's Website
    2009/2010
    Engenharia do Software I
    68