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.

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

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