Interação Pessoa-Máquina (IPM) - Aula Teórica 9 - Modelos Conceptuais, Princípios de Design e Desenho de Ecrãs PDF

Interação Pessoa-Máquina IPM Aula Teórica 9 – Modelos Conceptuais, Princípios de Design e Desenho de Ecrãs João L. M. Pereira [email protected] Apresentação baseada em slides do Alan Dix (Lancaster University), slides do Manuel...

Interação Pessoa-Máquina IPM Aula Teórica 9 – Modelos Conceptuais, Princípios de Design e Desenho de Ecrãs João L. M. Pereira [email protected] Apresentação baseada em slides do Alan Dix (Lancaster University), slides do Manuel J. Fonseca, e conteúdos do livro Introdução ao Design de Interfaces  Aula de Hoje Modelos conceptuais – Metáforas Princípios e Regras de Design – Princípios de Design (Norman) – Princípios de Usabilidade de Nielsen Desenho de Ecrãs  Modelo Conceptual Descrição de alto-nível de como um sistema está organizado e funciona Modelo Conceptual no Ciclo Iterativo  Objetivos Resolver mapeamento – Conceitos IU conceitos domínio do problema Dar visão funcionamento sistema – Facilitar criação Modelo Mental  Características Simples (“Menos é mais!”) – Tão simples quanto possível, mas com funcionalidade – Ex. “Vire à direita” em vez de “Vire NNE”. Focado na Tarefa – Mapeamento direto operações sistema tarefa Exemplo de um site  Modelo Conceptual Descreve apenas – O que as pessoas podem fazer – Conceitos que precisam perceber Refere-se apenas – Objetos, atributos e operações do domínio da tarefa Ferramenta de desenho dos designers – Arrumar ideias antes do design da IU  Componentes do Modelo Conceptual Metáforas e analogias Conceitos – Objetos – Atributos – Operações Relações entre conceitos Mapeamento  Metáforas Elemento central Explicam situações não familiares por comparação com algo que seja familiar ou mais fácil de perceber Descrição usada para sugerir semelhança – Ex. Átomo = Sistema Solar  Metáforas na Interface Facilitar – aprendizagem – criação do modelo mental Novo sistema – Semelhante a um já conhecido. Exploram conhecimento familiar – Compreender o “não familiar” Metáfora do Tampo de Secretária  Outras Metáforas Dados e Funcionalidades – to-do list, calendário Coleções – Pastas, diretórios, ficheiros, álbuns Ações – Cortar, copiar, colar Qual foi a última vez que fizeram isto no mundo real?  Desvantagens das metáforas Interpretação demasiado literal – Calculadora física já era má  Desvantagens das metáforas Violam regras culturais e convenções – Caixote do lixo no tampo da secretária?  Resumo Metáforas Dispositivos de orientação familiares Aprendizagem de novos sistemas mais fácil Ajudam a aprender modelo conceptual Simplificam a descrição do sistema Podem ser inovadoras  Princípios e Regras de Design Os designers podem usar como diretrizes para orientar a conceção das suas interfaces Podem ser usadas para avaliar as interfaces (Mais tarde na Fase 5 do projeto) Lista – O que Fazer – O que não Fazer Origem – Teoria – Experiência – Senso comum Determinam – O que se deve ver e fazer Princípios de Design de Norman  Princípios de Design (Norman) Conjunto de princípios considerados essenciais – Garantir uma boa usabilidade – Perceber porque alguns designs são mais usáveis que outros Visibilidade Retorno (Feedback) Restrições Coerência Mapeamento Evidência  Visibilidade Aquilo que se consegue ver num passo da interação As interfaces devem mostrar – O seu estado – Possíveis ações que os utilizadores podem realizar Exemplo: – Os controlos dos carros estão posicionados de modo a serem facilmente encontrados e usados (bom) – Torneiras com sensores difíceis de ver/ativar  Retorno (Feedback) Enviar de volta para o utilizador informação Ação que realizou Os resultados produzidos com a ação  Restrições Impedem os utilizadores de fazer outras coisas que não a ação certa do modo correto – Evitam que o sistema entre num estado invalido – Ajudam o utilizador a completar a tarefa  Coerência Operações similares e elementos similares para alcançar tarefas similares – Crítico para a aprendizagem – Ajuda utilizadores a reconhecer padrões Cores diferentes Mesmas cores (Melhor) Mau  Mapeamento Relação entre duas coisas No caso da interface – Relação entre os controlos desta e os resultados da sua atuação  Evidência (Affordance) ‘affords’ agarrar A qualidade de um objeto para sugerir como é que podemos e devemos interagir com ele – Sem necessidade de explicação prévia Capacidade que um objeto tem de nos dar pistas sobre a sua utilização Princípios de Usabilidade de Nielsen  Heurísticas de Usabilidade Princípios de Usabilidade Designers usam para guiar Avaliadores usam para avaliar As heurísticas de Nielsen – Abrangem mais princípios – Mais defendidas e usadas  As 10 Heuristicas de Nielsen H2-1 - Tornar estado do sistema visível H2-2 - Correspondência entre o sistema e o mundo real H2-3 - Utilizador controla e exerce livre arbítrio H2-4 – Coerência e adesão a Normas H2-5 – Evitar erros H2-6 - Reconhecimento em vez de lembrança H2-7 - Flexibilidade e eficiência H2-8 - Desenho estético e minimalista H2-9 - Ajudar o utilizador a reconhecer, diagnosticar e recuperar de erros H2-10 - Dar ajuda e documentação  H2-1: Tornar o estado do sistema visível Dar a conhecer aos utilizadores onde estão – De onde vêm e para onde podem ir Retorno a dar (enquanto os utilizadores esperam pelo sistema) – < 0.1s: não são precisos indicadores – 0.1s - 1s: mudar cursor – 1s - 10s: tempo em falta – > 10s: indicadores de progresso H2-1: Tornar o estado do sistema visível Bom Mau H2-1: Tornar estado do sistema visível H2-1: Tornar estado do sistema visível  H2-2 Correspondência com o mundo real Falar a linguagem do utilizador – Usar terminologia familiar ao utilizador Não usar termos orientados ao sistema – Evitar gíria técnica Modelo conceptual – Garantia que estamos a usar a linguagem dos utilizadores – Uso de metáforas ajuda na correspondência H2-2 Correspondência com o mundo real H2-2 Correspondência com o mundo real Real Sistema  H2-3 Utilizador controla e exerce livre arbítrio Oferecer meios para sair de situações – Inesperadas (erros) Não obrigar a caminhos inflexíveis – Como se estivessem a jogar a um RPG de mundo aberto (e.g., Minecraft), em vez de fechado (e.g., Halo) Mundo Aberto vs Fechado  H2-3 Utilizador controla e exerce livre arbítrio Botão de Cancel – Diálogos que esperam dados de entrada Undo / Redo Opção de Sair – Deixar o programa em qualquer altura Defaults (recuperar configurações) H2-3: O utilizador controla e exerce livre arbítrio Mau Bom H2-4: Coerência e adesão a normas Minimizar fator surpresa Palavras, situações ou ações semelhantes – Significados semelhantes Palavras, situações ou ações diferentes – Significados diferentes H2-4: Coerência e adesão a normas Terminologia Cor Zonas da interface Localização de elementos Aspeto visual dos elementos Tipos de letra H2-4: Coerência e adesão a normas Convenções da plataforma – Ok – Cancel ou Cancel – Ok ? Coerência com outras aplicações – Quit ou Exit para sair ? H2-4: Coerência e adesão a normas Desenho de navegação standard H2-4: Coerência e adesão a normas Inconsistência na ordem dos botões  H2-5: Evitar erros Deve ser difícil cometer erros Melhor que uma boa mensagem de erro é evitar o erro – (ou: “as desculpas não se pedem, evitam-se”)  H2-5: Evitar erros Minimizar uso do teclado – Número de erros é proporcional ao número de teclas premidas Verificar valores introduzidos – Comprar 5 000 Livros de IPM ?! Widgets que só aceitam dados válidos H2-5: Evitar erros H2-5: Evitar erros  H2-6: Reconhecimento em vez de lembrança Tornar objetos, ações e indicações visíveis – Reduz carga cognitiva Não obrigar a lembrar de informação – De um ecrã para outro Privilegiar o uso de – Menus – Caixas de seleção – Imagens – Ícones  H2-6: Reconhecimento em vez de lembrança Não usar – Linha de comandos – Campos de texto Maus exemplos: – Ícones sem significado – Nomes mal escolhidos – Indicações insuficientes – Ações mal identificadas H2-6: Reconhecimento em vez de lembrança  H2-7: Flexibilidade e eficiência Permitir a realização mais eficiente das tarefas Deixar fazer as tarefas de vários modos – Ex: Utilização de aceleradores/atalhos de teclado  H2-7: Flexibilidade e eficiência Valores por omissão (defaults) Valores mais comuns  H2-7: Flexibilidade e eficiência Macros para programar ações repetitivas  H2-7: Flexibilidade e eficiência Escolher que ações são mais frequentes  H2-8: Desenho estético e minimalista Apresentar apenas a informação que o utilizador necessita  H2-8: Desenho estético e minimalista Em 1999  H2-8: Desenho estético e minimalista Em 2023  H2-8: Desenho estético e minimalista Informação na ordem natural e agrupada – Acesso à informação na ordem esperada (ex. morada) – Informação relacionada deve estar próxima  H2-9: Reconhecer, diagnosticar e recuperar de erros Ser precisa – Indicar claramente o problema Falar a linguagem do utilizador – Evitar códigos e termos técnicos Dar ajuda construtiva – Permite recuperar e evitar novos erros Ser cortês – Não colocar a culpa no utilizador H2-9: Reconhecer, diagnosticar e recuperar de erros H2-9: Reconhecer, diagnosticar e recuperar de erros H2-9: Reconhecer, diagnosticar e recuperar de erros  H2-10: Dar ajuda e documentação Fácil de pesquisar Contextual Centrada na tarefa do utilizador Listar passos concretos para concretizar a tarefa Não demasiado extensa  H2-10: Dar ajuda e documentação Ajuda usada apenas quando há problemas – Não leem antes de usar Ter isso em consideração – Oferecer acesso rápido à informação  H2-10: Dar ajuda e documentação Ajuda não substitui mau desenho da IU! Sistema não deve depender dela para ser utilizado H2-10: Dar ajuda e documentação  Atenção! Bom Design não é apenas – Seguir Princípios – Respeitar Heurísticas – Seguir Guidelines Ajuda, mas não chega! É importante saber como e onde se usam Desenho de Ecrãs Um desenho de ecrã Outro desenho de ecrã  Ecrã bem concebido Cumpre dois propósitos – Funcionalidade – Estética Torna clara a informação apresentada Ajuda os utilizadores compreender como podem interagir Omitem detalhes supérfluos – Mostram o que precisam de ver e quando – Todos os elementos devem ter um propósito e significado  Desenho Visual Proximidade Alinhamento Repetição Contraste Ordenação Espaço em branco Decoração  Proximidade Elementos relacionados devem aparecer juntos – Proximidade lógica/significado = proximidade física  Proximidade Todos elementos estão igualmente próximos (mau)  Proximidade Existem 3 grupos de elementos distintos (bom)  Alinhamento + arrumado e organizado = + apelativo e fácil de compreender Elementos no ecrã devem estar alinhados se estiverem relacionados É mais estético e apelativo Sem alinhamento Com alinhamento  Alinhamento - Hierarquias Linhas guias ajudam a alinhar elementos – Pequenas diferenças podem ser notórias  Alinhamento – Texto Texto preferencialmente alinhado à esquerda – Caso contrário é mais difícil encontrar o inicio da linha Texto justificado pode deixar grandes espaços em branco – Usar com reservas – Bom quando temos muito texto condensado em colunas  Alinhamento - Números Inteiros alinhar à Direita – Diretamente comparáveis – Facilita perceção da ordem de grandeza Perde-se com o uso de zeros à esquerda  Alinhamento - Números Reais alinhar pelas Vírgulas – Algarismos da mesma grandeza estão alinhados Caso sejam muitos extensos – Separar em três 45355444233 (evitar) 45 355 444 233 (melhor)  Alinhamento – Datas Depende do formato – Textuais (23 de Novembro de 2024) alinhadas à esquerda – Notação abreviada (23/11/2024) Alinhar os dias, meses e anos  Alinhamento – Tabelas O espaçamento entre colunas dificulta a leitura  Alinhamento – Tabelas Soluções possíveis: – Linhas guias – Realçar linhas alternadas – Alinhamento da primeira coluna à direita (apenas para 2 colunas)  Repetição Repetir elementos ou propriedades gráficas ao longo da interface – Sempre que possível e relevante – Aumenta a coerência, facilita o reconhecimento – Por exemplo: Manter o mesmo tipo de letra Mesmo espaçamentos Botões Qual é o site?  Contraste Reforça a ideia da diferença Tamanho Tamanho Cor Cor  Ordenação Não deve ser aleatória Pode ser – Alfabética – Tarefa – Importância – Frequência  Espaço em branco Deve ser usado conscientemente – Usado para organizar elementos  Decoração Elementos decorativos – Embelezem – Tornam mais apelativas as interfaces