Eng.ª do Software - 8. Desenho de interfaces com o utilizador
Transferir como PPTX, PDF2 gostaram2,429 visualizações
O documento aborda os princípios e práticas do desenho de interfaces com o utilizador na engenharia de software, enfatizando a importância da usabilidade e interação. São discutidos fatores humanos, estilos de interação, processos de design e avaliação de interfaces, destacando a necessidade de considerar as necessidades e expectativas dos utilizadores. O texto também apresenta heurísticas e métodos para prototipagem e análise de interfaces, visando melhorar a experiência do utilizador.
Eng.ª do Software - 8. Desenho de interfaces com o utilizador
- 1. Engenharia do Software IManuel Menezes de SequeiraDCTI, ISCTE-IULManuel.Sequeira@iscte.pt, D6.02As 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 anteriorDesenho arquitectónicoDecisões no desenho arquitectónicoOrganização de sistemasEstilos de decomposiçãoEstilos de controloArquitecturas de referência2009/20102Engenharia do Software I
- 3. Desenho de interfaces com o utilizador2009/20103Engenharia do Software I
- 4. SumárioDesenho de interfaces com o utilizadorProblemas de desenhoHeurísticas de Nielsen para interfaces com o utilizadorEstilos de interacçãoProcesso de desenho de interfaces com o utilizadorAnálise dos utilizadoresPrototipagem de interfaces com o utilizadorAvaliação de interfaces2009/20104Engenharia do Software I
- 5. ObjectivosSugerir princípios gerais do desenho de interfacesExplicarDiferentes estilos de interacção e sua utilizaçãoQuando usar apresentações gráficas e textuais de informaçãoPrincipais actividades do processo de desenho de interfacesApresentar atributos de usabilidade e abordagens à avaliação de sistemas2009/20105Engenharia do Software I
- 6. A interface com o utilizadorDeve ajustar-se a competências, experiência e expectativas de prospectivos utilizadoresUtilizadores muitas vezes julgam sistema pela interface e não pela funcionalidadeInterface mal desenhada pode induzir utilizador a erros catastróficosMau desenho leva muitos sistemas não serem usados2009/20106Engenharia do Software I
- 7. Factores humanos no desenho de interfaces2009/2010Engenharia do Software I7
- 8. Princípios do desenho de interfaces com o utilizadorDesenho considera necessidades, experiência e capacidades de utilizadoresDesigners cientes de limitações físicas e mentais de humanos (e.g., memória de curta duração limitada) e reconhecem que humanos erramPrincípios subjazem a desenho de interfaces, nem todos os princípios aplicáveis a todos os desenhos2009/2010Engenharia do Software I8
- 9. Princípios do desenho de interfaces com o utilizador2009/2010Engenharia do Software I9
- 10. FamiliaridadeTermos e conceitos recolhidos da experiência das pessoas que mais usarão sistemaTermos e conceitos orientados para utilizador e não computacionaisPor exemplo, sistema administrativo deve usar cartas, documentos e pastas e não ficheiros, identificadores ou directórios2009/2010Engenharia do Software I10
- 11. ConsistênciaSempre que possível, operações comparáveis activadas da mesma formaExemplosComandos e menus com o mesmo formatoPontuação de comandos semelhanteUtilização consistente de maiúsculas e minúsculas2009/2010Engenharia do Software I11
- 12. Mínima surpresaUtilizadores nunca são surpreendidos pelo comportamento do sistemaSe utilizador conhece efeito de um comando, deve conseguir prever efeitos de comandos comparáveis2009/2010Engenharia do Software I12
- 13. RecuperabilidadeIncluir mecanismos para utilizadores recuperarem de errosResiliência face a erros do utilizadorAnular ou desfazer comandosConfirmação de acções destrutivasRemoções com possibilidade de recuperação2009/2010Engenharia do Software I13
- 14. OrientaçãoDisponibilizar informação quando erros ocorrem e mecanismos de ajuda sensíveis ao contextoDisponibilização de orientaçãoSistemas de ajudaManuais em linha2009/2010Engenharia do Software I14
- 15. DiversidadeProporcionar mecanismos de interacção para diferentes tipos de utilizadores do sistemaAlguns utilizadores têm dificuldades de visão: disponibilizar texto com maiores caracteres2009/2010Engenharia do Software I15
- 16. Heurísticas de Nielsen2009/2010Engenharia do Software I16
- 17. Heurísticas de Nielsen2009/2010Engenharia do Software I17
- 18. Heurísticas de Nielsen2009/2010Engenharia do Software I18
- 19. Dois problemas de desenhoComo 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/2010Engenharia do Software I19
- 20. Estilos de interacçãoManipulação directaSelecção em menusPreenchimento de formuláriosComandosLinguagem natural2009/2010Engenharia do Software I20
- 21. Estilos de interacção2009/2010Engenharia do Software I21Jogos.
- 22. Sistemas CAD.Maioria dos sistemas de utilização geral.Controlo de stocks.
- 23. Gestão pessoal de empréstimos.
- 25. Sistemas de comando e controlo.Sistemas de recuperação de informação.
- 26. Múltiplas interfaces2009/201022Engenharia do Software IInterface gráfica de utilização (Gnome/KDE)Interface de linha de comandos (bash/ksh)Gestor da interface gráfica de utilização do X WindowSystemInterpretador de comandosSistema operativo Linux
- 27. Interacção LIBSYS2009/2010Engenharia do Software I23
- 28. Interfaces baseadas na WebMuitos sistemas baseados na Web têm interfaces baseadas em formulários cujos campos podem serMenusCaixa de texto livreBotões de rádioEtc.LIBSYS: Menu para escolher onde pesquisar e caixa de texto para frase a procurar2009/2010Engenharia do Software I24
- 29. Formulário de pesquisa do LIBSYS2009/201025Engenharia do Software ILIBSYS: PesquisaEscolher colecçãoTodasTítuloPalavra ou fraseProcurar usandoPalavras adjacentesSimNãoCancelarLimparPesquisar
- 30. Apresentação da informaçãoApresentação ao utilizador de informação do sistemaInformação pode ser apresentadaDirectamente – Texto num processador de textoTransformada – Formato gráficoAbordagem Modelo-Vista-Controlador suporta múltiplas vistas dos mesmos dados2009/2010Engenharia do Software I26Padrão de desenho.
- 31. Apresentação da informação2009/201027Engenharia do Software IInformação a mostrarSoftware de apresentaçãoEcrã
- 32. Modelo-vista-controlador2009/201028Engenharia do Software IMensagens de modificação da vistaEntradas do utilizadorControladorVistaModeloestadoestadoestadométodosmétodosmétodosInterrogações e actualizações do modeloEdições do modelo
- 33. Apresentação da informaçãoInformação estáticaInicializada no início de uma sessãoNão muda durante uma sessãoPode ser numérica ou textualInformação dinâmicaMuda durante a sessãoMudanças têm de ser comunicadas ao utilizadorPode ser numérica ou textual2009/2010Engenharia do Software I29
- 34. Factores da apresentação da informaçãoUtilizador 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/2010Engenharia do Software I30
- 35. Apresentações alternativas da informação2009/201031Engenharia do Software IJan.2842Fev.2851Mar.3164Abr.2789Mai.1273Jun.283540003000200010000Jan.Fev.Mar.Abr.Mai.Jun.
- 36. Apresentação analógica ou digital?Apresentação digitalCompacta – Ocupa pouco espaço no ecrãPermite comunica valores precisosApresentação analógicaFácil ter ideia dos valores num relancePossível mostrar valores relativosFácil ver valores excepcionais dos dados2009/2010Engenharia do Software I32
- 37. Métodos de apresentação2009/201033Engenharia do Software I142010203Mostrador eagulhaGráfico emqueijoBarrahorizontalTermómetro
- 38. Mostrando valores relativos2009/201034Engenharia do Software IPressãoTemperatura02004001003000501002575
- 39. Visualização de dadosGrandes quantidades de informaçãoRevela tendências e relações entre entidadesPossíveis visualizaçõesInformação meteorológica recolhida em vários locaisEstado de rede como conjunto de nós ligadosFábrica como conjunto de tanques e tubos mostrando pressões e temperaturasModelo 3D de moléculaPáginas Web como árvore hiperbólica2009/2010Engenharia do Software I35
- 40. Ecrãs coloridosCor adiciona dimensão extra à interfaceAjuda a compreender estruturas complexas de informaçãoUsada para destacar eventos excepcionais2009/2010Engenharia do Software I36
- 41. Erros comunsUsar a cor para comunicar significadoSuperabundância de cor no ecrã2009/2010Engenharia do Software I37
- 42. Mau exemplo2009/201038Engenharia do Software I
- 43. Orientações para uso de coresLimitar o número de coresSer conservadorMostrar alterações de estadoSuportar tarefas do utilizador com código de coresUsar de forma pensada e consistenteCautela com emparelhamentos2009/2010Engenharia do Software I39
- 44. Bom exemplo2009/201040Engenharia do Software I
- 45. Mensagens de erroBom desenho é crítico: más mensagens de erro podem levar à rejeição do sistemaDevem serEducadasConcisasConsistentesConstrutivasFormação e experiência dos utilizadores é factor determinante no desenho2009/2010Engenharia do Software I41
- 46. Factores na redacção de mensagens de erro2009/2010Engenharia do Software I42
- 47. Erro do utilizador2009/201043Engenharia do Software INome do pacienteIntroduza o nome do paciente:Ximenes, XistoAssuma que um(a) enfermeira(o) se engana no nome do paciente de cujo registo necessita.CancelarOK
- 48. Mau desenho: mensagem de erro orientada para o sistema2009/201044Engenharia do Software IErro!!Erro 27ID de paciente inválido!CancelarOK
- 49. Bom desenho: mensagem de erro orientada para o utilizador2009/201045Engenharia do Software IPaciente “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.CancelarDe novoAjudaPacientes
- 50. Processo de desenho de interfaces com o utilizadorÉ processo iterativoRelações estreitas entre utilizadores e designersTrês actividades centraisAnálise do utilizadorPrototipagem do sistemaAvaliação da interface2009/2010Engenharia do Software I46
- 51. Actividades centrais do processo2009/2010Engenharia do Software I47
- 52. Processo de desenho2009/201048Engenharia do Software IAnalisar e compreender actividades dos utilizadoresProduzir primeiro protótipo em papelAvaliar desenho com utilizadores finaisAvaliar desenho com utilizadores finaisProtótipo de desenhoProtótipo executávelProduzir protótipo dinâmicoImplementar interface com o utilizador final
- 53. Análise de utilizadoresSem perceber o que utilizadores pretendem fazer não é possível desenhar interface eficazAnálises descritas em termos que utilizadores e designers possam entenderCenários descrevendo casos de uso típicos são forma de descrever análises2009/2010Engenharia do Software I49
- 54. Cenário de interacção com o utilizadorA 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/2010Engenharia do Software I50
- 55. Requisitos do cenárioUtilizadores podem não estar cientes de termos de pesquisa mais apropriadosPrecisam de ajuda na escolha dos termosTêm de poder escolher colecções a pesquisarTêm de poder pesquisar e pedir cópias do material relevante encontrado2009/2010Engenharia do Software I51
- 56. Técnicas de análise2009/2010Engenharia do Software I52
- 57. Análise hierárquica de tarefas2009/201053Engenharia do Software IObter imagens a partir de bibliotecas remotasFazer 1, 2 e 3 até imagens encontradas, 4Descobrir possíveis fontesEstabelecer termos de pesquisaPesquisar imagensPedir fotocópias dos itens encontrados1234Fazer 3.1, 3.2 e 3.3 até imagens encontradas, 3.4 se necessário, 3.5Seleccionar bibliotecaAutenticar no catálogoPesquisar imagensModificar termos de pesquisaRegistar itens relevantes3.23.33.43.53.13.3.1, 3.3.2 e 3.3.3Introduzir termos de pesquisaIniciar pesquisaAnalisar resultados3.3.13.3.23.3.3
- 58. EntrevistasConceber entrevistas semi-estruturadas baseadas em perguntas abertasUtilizadores fornecem informação que julgam essencial, e não apenas informação que se previu recolherEntrevistas de grupo e grupos foco permitem a utilizadores discutirem entre si o que fazem2009/2010Engenharia do Software I54
- 59. EtnografiaObservador externo observa utilizadores trabalhando e questiona-os sobre o seu trabalhoValor decorre de muitas tarefas serem intuitivas e difíceis de descrever e explicar pelos utilizadoresAjuda a compreender papel de influências sociais e organizacionais no trabalho2009/2010Engenharia do Software I55
- 60. Registos etnográficosO 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/2010Engenharia do Software I56
- 61. Resultados da análise etnográficaControladores 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 aproxima2009/2010Engenharia do Software I57
- 62. Prototipagem da interface com o utilizadorDar aos utilizadores experiência directa com interfaceSem ela é impossível aferir usabilidade da interfacePode ser processo com duas etapasInicialmente protótipos em papelDepois desenho é refinado e desenvolvem-se protótipos automatizados com sofisticação crescente2009/2010Engenharia do Software I58
- 63. Prototipagem em papelEstudar cenários usando esboços da interfaceUsar guião para apresentar série de interacções com sistemaEficaz para obter reacções dos utilizadores a uma proposta de desenho2009/2010Engenharia do Software I59
- 64. Técnicas de prototipagem2009/2010Engenharia do Software I60Capítulo 17
- 65. Avaliação de interfaces com o utilizadorNecessária para aferir se desenho é adequadoAvaliação completa muito cara e impraticável para maioria dos sistemasIdealmente interfaces avaliadas face a especificação de usabilidade; mas é raro serem produzidas especificações2009/2010Engenharia do Software I61
- 66. Atributos de usabilidade2009/2010Engenharia do Software I62
- 67. Técnicas de avaliação simplesQuestionários ao utilizadorGravação vídeo de utilização do sistema e posterior avaliaçãoInstrumentação de código para recolher informação acerca da utilização de funcionalidades e da ocorrência de erros do utilizadorDisponibilização de código para recolha em linha de opiniões do utilizador2009/2010Engenharia do Software I63
- 68. A reterPrincípios do desenho guiam desenho de interfaces com utilizadorEstilos de interacção incluemManipulação directaSistemas de menuPreenchimento de formuláriosLinguagens de comandosLíngua natural2009/2010Engenharia do Software I64
- 69. A reterApresentações gráficas mostram tendências e valores aproximadosApresentações digitais mostram valores precisosCor usada com parcimónia e consistênciaProcesso de desenho incluiAnálise de utilizadoresPrototipagem do sistemaAvaliação da interface2009/2010Engenharia do Software I65
- 70. A reterAnálise de utilizadores sensibiliza designers para forma de trabalho efectiva de utilizadoresPrototipagem é processo em etapas; protótipos iniciais em papel base para protótipos automáticosAvaliação da interface informa como melhorar desenho e afere cumprimento de requisitos de usabilidade2009/2010Engenharia do Software I66
- 71. A lerIanSommerville, Software Engineering, 8.ª edição, Addison-Wesley, 2006Capítulo 162009/2010Engenharia do Software I67
- 72. A veruseit.com: JakobNielsen's Website2009/2010Engenharia do Software I68