Interação Pessoa-Máquina - Desenho de Ecrãs II e Prototipagem PDF

Interação Pessoa-Máquina IPM Aula Teórica 10 – Desenho de Ecrãs II e Prototipagem João L. M. Pereira [email protected] Apresentação baseada em slides do Manuel J. Fonseca e conteúdos do liv...

Interação Pessoa-Máquina IPM Aula Teórica 10 – Desenho de Ecrãs II e Prototipagem João L. M. Pereira [email protected] Apresentação baseada em slides do Manuel J. Fonseca e conteúdos do livro Introdução ao Design de Interfaces  Aula de Hoje Desenho de Ecrãs II – Cor – Tipografia – Escrita de Mensagens Prototipagem – O que são protótipos? – Características – Tipos de Protótipos – Protótipos de Papel Uso da Cor Cor -Estético Imagem de Marca Cor – Imagem de Marca Imagem de Marca Cor – Imagem de Marca Cor – Transmitir Informação Cor – Atrair o Olhar Cor – Indicar Estado Significado – Cultura Ocidental Conceito Cor % Parar Vermelho 100 Avançar Verde 99 Frio Azul 96 Quente Vermelho 95 Perigo Vermelho 90 Precaução Amarelo 81 Segurança Verde 61 Ligado Vermelho 50 Desligado Azul 32  Modelo RBG da Cor RBG – Usado em computadores – Três componentes Red Blue Green HSV – Hue – Cor base – Saturation – Intensidade da cor. Mede a pureza da cor. Alta -> cor pura; Baixa -> mistura com cinzento – Value – Brilho da cor.  Roda das Cores Cores complementares – Radialmente opostas – A mistura resulta numa cor neutra (preto, branco, cinzento) Cores adjacentes – Juntas na roda  Esquema de Cores – Monocromático Opção mais simples Escolhe-se uma única cor – Esquema contêm vários tons  Esquema de Cores – Complementares Opção muito usada Escolhe-se 2 cores complementares – Aumenta o Contraste – Exemplo: Uma cor para o fundo Outra para o texto  Esquema de Cores – Outras opções Análogos – Uma cor principal – 2 cores adjacentes Triádicos e terádicos – três/quarto cores Contraste – Escuro/Claro Aumentar o contraste – Escurecer cores escuras – Clarear cores claras Contraste – Cores Complementares Usar cores complementares – Ex. amarelo – azul Evitar cores adjacentes – A exceção é o contraste anterior Claro/Escuro Contraste - Daltonismo Problemas de visão (exemplo daltonismo e miopia) – Difícil distinguir cores próximas no espectro – Difícil distinguir verde e vermelho (cones)  Cor Tem Problemas Cores no ecrã variam muito entre dispositivos Os mecanismos analógicos do ecrã (calibração – temperatura de cor) determinam cores diferentes  Primeiro Passo: sem cor! Desenhar primeiro sem cor Otimizar desenho do ecrã Utilizar a Cor de acordo com convenções Parar Avançar Utilizar a Cor de acordo com convenções Utilizar a Cor de acordo com convenções  Esquema de Cores Usar cor de modo e com significado consistente  Limitar o Número de Cores Limitar codificação a quatro cores distintas distribuídas pelo espectro visível No máximo OITO cores Cores “extra” usadas em casos específicos  Cores em Contexto Somos atraídos por alterações de cor – Usar isso para mostrar alterações de estado A “cor de um objecto” é influenciada pelo fundo – Escolham as cores num contexto e não isoladamente Iguais? Tipografia Tipos de Letras Dentro de um mesmo tipo… Duas grandes famílias Sans Serif Serif A A  Legibilidade - Serifas Serifas ajudam a ler “texto corrido” Mas… Ecrãs não têm resolução para detalhes tão pequenos!  Serifas - Recomendação Ecrãs (72dpi) – Sem serifas Impressões/Papel (300dpi) – Com serifas  Tamanho de Texto Aproximadamente 12 pontos Isto é texto de 32 pontos Isto é texto de 14 pontos Este texto tem 12 pontos Este texto tem 8 pontos Este texto tem 8 pontos com itálico  Espaçamento do Texto Pelo menos 30% da altura do tipo Muitas pessoas com problemas visuais (e não só) têm problemas em ler texto em linhas demasiado juntas Escrita de Mensagens  Breves e Concisas O processamento do editor de texto conduziu a 23 páginas impressas Foram impressas 23 páginas  Usar a Linguagem do Utilizador Erro no campo Nº do Vestido Erro: nº do vestido deve estar entre 32 e 48  Mensagens Afirmativas Não é possível sair sem antes guardar o ficheiro Guardar o ficheiro antes de sair  Construtivas e Não Críticas Nome de ficheiro Mau/ilegal/inválido Nº máximo de caracteres do nome do ficheiro: 8  Específicas Erro sintáctico nº 1542 Parêntesis esquerdo na linha 210, não tem parêntesis direito  Utilizador Tem o Controlo Introduza comando Pronto para receber comando  Indicadoras de Ação Trem de aterragem está recolhido Para aterrar deve abrir o trem de aterragem  Voz Activa Documento foi recebido pelo João O João recebeu o documento  Erros Típicos – Desenho de Ecrãs Posição arbitrária de componentes Dimensões arbitrárias dos componentes Layouts arbitrários das janelas Incoerência nos vários ecrãs Incoerência com o dispositivo físico – Elementos demasiado pequenos (ex. touch) – Resolução do ecrã Portotipagem Prototipagem no Ciclo Iterativo  O que são Protótipos? Representação concreta, mas parcial, do sistema. – Permite aos utilizadores interagirem – Rapidamente identificam o que não querem  Objetivos da Prototipagem Obter retorno o mais depressa possível Estudar designs alternativos Apresentar ideias/inovações novas Identificar potenciais problemas  Vantagens da Prototipagem Poupa tempo e custos – Testar rápido e com poucos recursos Testar várias alternativas Ou  Vantagens da Prototipagem Fácil e rápido alterar problemas Se é grave -> Fazer de novo Desenho centrado no utilizador  Máximo Local / Máximo Absoluto Não fiquem presos a uma única abordagem – Bom design para uma má solução Solução: Experimentem várias alternativas  Design Paralelo Várias pessoas criam soluções alternativas – Mesmo requisitos No fim – Partilham conceitos – Analisam e escolhem as melhores ideias – Integram numa única solução Características dos Protótipos  Características dos Protótipos Duas dimensões: 1. Funcionalidades/Tarefas 2. Aspeto e implementação  Abrangência e Profundidade Abrangência - fração de tarefas oferecidas pelo protótipo Profundidade - a quantidade de funcionalidades que cada tarefa tem implementada Permite poupar recursos (reduzir) – As tarefas abrangidas – Funcionalidade existente em cada tarefa A escolha depende dos riscos a minimizar – Protótipos abrangentes são mais comuns em design (testam mais coisas) – Mais profundidade é útil em tarefas especificas em que temos dúvidas que conseguimos implementar Abrangência e Profundidade  Fidelidade e Funcionalidade Fidelidade - aspeto visual do protótipo Funcionalidade - implementação em código  Fidelidade Traduz a sua semelhança com o resultado final – Tipos de letra – Mensagens – Cores – Imagens – etc... Baixa Alta  Protótipo Baixa Fidelidade (PBF) Representações artísticas usando esboços, omitem muitos detalhes, como cores, imagens e ícones  Protótipo Alta Fidelidade (PAF) Apresentam um aspeto bastante semelhante ao do produto final PBF e PAF  Funcionalidade Funcionais – Implementados em código Executáveis num sistema computacional Não funcionais – Intervenção humana para funcionarem  Fidelidade e Funcionalidade PAF não funcionais – Feitos em papel – Aspeto semelhante ao final PBF funcionais – Implementados em código – Aspeto é um esboço (sem cores ou imagens) Tipos de Protótipos  Tipos de Protótipos Cenários de Interação Storyboards Protótipos de Papel Protótipos Funcionais  Cenários de Interação Não confundir com cenários de utilização e tarefa (Aula 8) Histórias de utilizadores a realizarem tarefas Dizem o que um utilizador – tem de fazer – o que ele verá Dependente do desenho da IU Criados a partir dos Cenários de Utilização Descrevem apenas uma sessão de interação para completar uma tarefa, sem flexibilidade para o utilizador Cenários de Interação  Cenários de Interação - Exemplo Cenário de Utilização: O José, que aprendeu a compor recentemente, pretende compor uma nova música para exercitar o que aprendeu. Para isso, pega na "pauta mágica", cria uma nova música intitulada "A minha primeira música" e começa a compor. Cenário de Interação: O José, que aprendeu a compor recentemente, pretende compor uma nova música para exercitar o que aprendeu. Para isso, ele pega na pauta mágica e carrega na opção Compor. Quando o sistema lhe pede o nome da música, o José escreve no campo de texto "A minha primeira música" e depois carrega no botão OK.  Cenários de Interação - Exemplo O João dirigiu-se à máquina de vender bilhetes de comboio, escolheu o seu destino carregando no botão correspondente ao Porto e, em seguida, selecionou um bilhete de ida e volta carregando na opção correspondente. Quando lhe apareceu um diálogo para confirmar a informação introduzida, o João carregou no botão , e o sistema passou para o ecrã de pagamento. O João selecionou a opção de pagar com multibanco, passou o multibanco na ranhura e introduziu o PIN correspondente. Finalmente, o João carregou no botão para receber um recibo da sua operação.  Utilização dos Cenários de Interação Fase inicial do design – Perceber como utilizadores irão interagir com futuro sistema Avaliações iniciais – Avaliar o desenho inicial da IU – Obter retorno dos utilizadores – Sem custos de construir um protótipo  Storyboards Origem – Filmes e Animação O que são? – Sequências de ecrãs chave – Apenas detalhes importantes  Storyboards O que são? – Principais interações – Mostram como se passa de um ecrã para o seguinte (Flow diagram) Um por cenário de Tarefa Storyboards - Exemplo Storyboards - Exemplo  Protótipos de Papel Esboços de ecrãs da IU Podem ser testados com utilizadores Baixa fidelidade Não funcionais  Storyboard vs P. Papel Primeiro Storyboard, depois P. Papel, baixa fidelidade  Protótipos Funcionais Fase seguinte, depois dos protótipos em papel Programas que correm – Computador ou dispositivo computacional – Apresentam resultados à interação do utilizador Protótipos horizontais (muito abrangentes/tarefas) – Sem back-end (pouca funcionalidade/profundidade) Fidelidade elevada  Protótipos Funcionais vs em Papel Permitem organizar os elementos no ecrã Rato e teclado podem ser testados em vez do uso do dedo – Incluí a aplicação da Lei de Fits Retorno dinâmico – Animações – Barras de progresso Medir tempos de execução de tarefas Podem ser usados no contexto em que vão ser utilizados – Como o local de trabalho, estação do metro etc.. Wizard-of-Oz  Wizard-of-Oz Máquina de escrever com reconhecimento de fala  Wizard-of-Oz Fases iniciais do desenvolvimento Para testar sistemas exigentes / difíceis – Reconhecimento de escrita, fala, gestos – Inteligência artificial Para efeitos de prototipagem é substituída pela “inteligência humana” Tipo de Protótipo vs Tempo Protótipo Funcional Interativo Tipo de Protótipo Protótipo Funcional (Código) Protótipo Digital (Fase 4 do projeto) (Ex. Figma, Pencil, Balsamiq, etc.) Protótipo de Papel (Fase 3 do projeto) Storyboards (Fase 3 do projeto) Cenários de Interação Tempo Protótipos de Papel  Papel vs Código Menos tempo a criar esboços em papel – Dá para criar vários no tempo em que se programa a interface Mais fácil e mais rápido fazer alterações no papel do que no código – Caso se detete algum problema, os protótipos em papel podem ser alterados entre testes  Mão livre vs Aplicação de desenho No inicio do desenvolvimento, mão livre concentra a atenção do designer nas questões que importam sem o distrair com detalhes – não nos preocupamos com detalhes como o tipo de letra, as cores, o alinhamento, o espaço em branco, etc. – mas sim a interface como um todo Utilização de uma aplicação de desenho é mais lenta – Obriga o designer a tomar um conjunto de decisões relacionadas com detalhes Mãos livre melhora o retorno que recebemos dos utilizadores – Menos propensos a procurar pequenos defeitos em detalhes não relevantes nesta fase do desenvolvimento Como queixar do esquema de cores ou do alinhamento – Os utilizadores farão sugestões mais criativas e não pequenas alterações de pormenor, como a cor do botão ou o tipo de letra usada  Materiais necessários Cartolina Papel branco Cartões pequenos Fita cola, cola branca, corretor Marcadores de várias cores Acetatos Tesouras, X-actos, etc...  Construir o Protótipo de Papel Começamos por desenhar uma moldura – Onde colocam depois os ecrãs da interface Podem desenhar um ecrã principal – Depois usar cartões ou pedaços de papel para fazer os menus – Diálogos que vão surgindo ao longo da interação  Construir o Protótipo de Papel Os acetatos podem ser usados – Realçar uma seleção efetuada pelo utilizador – Camada onde o utilizador pode escrever dados que seriam introduzidos num campo de texto Podem fotocopiar elementos que tenham muito uso Deve ser maior do que o tamanho real do sistema final – Garantir que as pessoas conseguem apontar com o dedo – Que se consegue ver a uma certa distância  Construir o Protótipo de Papel Devem ser monocromáticos – É mais simples e não distrai a atenção das coisas importantes – Para melhorar a leitura, podem usar marcadores – Não se preocupem em desenhar todos os efeitos visuais em papel Por vezes podem dizer ao utilizador o que se está a passar. – Barra de progresso, dizem: "25%, 50%, 75%, Concluído" – Efeitos drag and drop – Animações  Avaliar o Protótipo de Papel Responsabilidades da equipa de avaliação: Computador – Troca ecrãs – Simula funcionamento - Dá feedback Coordenador – Responsável pela sessão de avaliação Explica o processo e dá instruções ao utilizador – Pode interagir com o utilizador Pedir para falar em voz alta Observador – Observa e toma notas – Não interage  Avaliar o Protótipo de Papel Ensaiar funcionamento do protótipo – “Executar” o protótipo várias vezes p/ treinar – Verificar se não falta nenhum componente – Quem faz de “computador” não deve ter dúvidas  ”Execução” do Protótipo de Papel Depois de concluídos os testes – falar com os utilizadores para registarem mais alguns comentários e sugestões Vantagens dos Protótipos de Papel Toma apenas algumas horas – Não requer equipamento dispendioso Podem testar múltiplas alternativas – Iterações rápidas – Quantas mais melhor Melhora qualidade final Praticamente qualquer interação pode ser simulada  Avaliação de Protótipos Podem revelar problemas de usabilidade Permite avaliar se os utilizadores: – Percebem o modelo conceptual e a metáfora – Funcionalidade oferecida é aquela que estão à espera ou se faltam algumas características – Se a navegação e fluxo de realização das tarefas é fácil de perceber – A terminologia usada nos menus, botões, mensagens, etc., é a mais indicada para este tipo de utilizadores – O conteúdo de cada um dos ecrãs do protótipo tem a informação necessária e suficiente ou se tem Informação a mais/menos  Mais informação (Links) How to Make Paper Prototypes – https://www.sitepoint.com/how-to-make-paper-prototypes/ A guide to paper prototyping & testing for web interfaces – https://medium.com/digital-experience-design/a-guide-to-paper- prototyping-testing-for-web-interfaces-49e542ba765f Stop Talking and Start Sketching: A Guide to Paper Prototyping – https://blog.marvelapp.com/stop-talking-start-sketching-guide-paper- prototyping/ Looking Back on 16 Years of Paper Prototyping – https://articles.uie.com/looking_back_on_paper_prototyping/  Resumo - Prototipagem O que são Protótipos? Características – Abrangência e Profundidade – Fidelidade e Funcionalidade Tipos de Protótipos – Cenários de Interação – Storyboards – Protótipos de Papel – Protótipos Funcionais – Wizard-of-Oz Protótipos de Papel – Fazer e Avaliar