Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2010 05-06 b - desenho de interfaces com o utilizador

1,027 views

Published on

  • Be the first to comment

2010 05-06 b - desenho de interfaces com o utilizador

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

×