Cores e Prototipagem em Design Gráfico

Interação Pessoa-Máquina (IPM) - Aula Teórica 10

• Foco: Desenho de Ecrãs II e Prototipagem
• Apresentação baseada em slides do Manuel J. Fonseca e conteúdos do livro Introdução ao Design de Interfaces
• Apresentada por João L. M. Pereira ([email protected])

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

• Diversos usos da cor: estético, imagem de marca e transmitir informações
• Cor pode atrair o olhar, indicar estado e ter significado cultural

Cor - Estético

• A cor tem um papel estético importante na experiência do utilizador, influenciando a percepção e a estética geral do design.

Cor - Imagem de Marca

• A cor pode ser usada para construir e reforçar a identidade de uma marca, tornando-a reconhecível e memorável.
• Exemplos: Coca-Cola (vermelho), Facebook (azul), Mcdonalds (amarelo)

Cor - Transmitir Informação

• A cor pode ser usada para comunicar informações, como densidade populacional em mapas.
• Há padrões culturais comuns para determinados significados de cores em diferentes contextos.
• Exemplo: mapa de densidade populacional usando diferentes cores para diferentes níveis de densidade populacional

Cor - Atrair o Olhar

• Cores vibrantes e contrastantes podem ser usadas para atrair a atenção para elementos específicos.
• Uso de vermelho em transportes públicos como ônibus para destacar o carro.

Cor - Indicar Estado

• A cor pode ser usada para indicar o estado de um dispositivo ou sistema, como no caso de um pendrive com LEDs para indicar o nível da bateria e o seu estado de carregamento.
• A cor do LED indica se a bateria está baixa ou está a carregar.

Significado - Cultura Ocidental

• Há padrões culturais associados a certas cores, como por exemplo o vermelho para parar e o verde para avançar.

• Exemplos: significado cultural de cores (parar=vermelho, avançar=verde, frio=azul, quente=vermelho, perigo=vermelho...)

Modelo RGB da Cor

• Modelo RGB; usado em computadores; três componentes (Vermelho, Azul, Verde)

• HSV

• Hue: cor básica

• Saturation: intensidade da cor

• Value: brilho da cor

Roda das Cores

• Cores complementares: radialmente opostas (mistura resulta em cor neutra); cores adjacentes: juntas na roda

Esquema de Cores - Monocromático

• Escolher uma única cor
• O esquema contém vários tons

Esquema de Cores - Complementares

• Escolher duas cores complementares, aumentando o contraste (exemplo: uma cor para o fundo e outra para o texto)

Esquema de Cores - Outras Opções

• Análogos (uma cor principal + 2 cores adjacentes)
• Triádicos e tetrádicos (três/quatro cores uniformemente espaçadas na roda de cores)

Contraste - Escuro/Claro

• Aumentar contraste; escurecer cores escuras e clarear cores claras

Contraste - Cores Complementares

• Usar cores complementares (exemplo: amarelo e Azul) e evitar cores adjacentes

Contraste - Daltonismo

• Problemas de visão (exemplo: daltonismo, miopia) e dificuldade de distinguir cores próximas
• Também dificuldade de distinguir verde e vermelho (cones)

Cor tem Problemas

• Cores em ecrãs variam muito entre dispositivos; mecanismos analógicos(temperatura de cor) afetam as cores

Primeiro Passo: sem cor!

• Desenhar o ecrã sem cores inicialmente para otimizar o design

Utilizar a cor de acordo com convenções

• Usar a cor de acordo com as convenções para a comunicação, como, por exemplo, no semáforo para criar diferentes significados de cores (parar = vermelho, avançar = verde)

Esquema de Cores

• Usar cor de forma consistente e com significado
• Exemplo: barra com diferentes tons de cor, sendo um deles mais destacado

Limitar o número de cores

• Limitar as cores utilizadas a um total de oito, ou menos
• Uso de cores extra em casos específicos

Cores em Contexto

• A cor de um objeto é influenciada pelo fundo
• Escolher as cores em contexto

Tipografia

Tipos de Letras

• Várias famílias de fontes de letra (Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman)

Dentro de um mesmo tipo...

• Exemplos dos diferentes tipos e como se relacionam (exemplos de família da letra Myriad Pro com diferentes variações como Bold, Light e semibold)

Duas grandes famílias

• Sans Serif e Serif (tipos de fontes de letras)

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

• Tamanho recomendado para o texto: aproximadamente 12 pontos

Espaçamento do texto

• Espaçamento mínimo de 30% da altura do tipo para o texto

Escrita de Mensagens

• Processamento de texto resultou em 23 páginas impressas

Usar a Linguagem do Utilizador

• Exemplos de mensagens de erro sobre entrada de dados incorretos ou fora de um determinado intervalo.

Mensagens Afirmativas

• Mensagens informando o utilizador sobre guardar o ficheiro antes de sair do programa

Construtivas e Não Críticas

• Exemplos de mensagens sobre erros em nomes de ficheiros; erros de sintaxe na escrita.

Específicas

• Exemplo de Erro sintáctico no processamento de texto, com parêntesis incompletos no código

Utilizador tem o Controlo

• Introduzir 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
• Elementos demasiado pequenos (ex: touch)
• Resolução do ecrã

Prototipagem

Prototipagem no Ciclo Iterativo

• Analisar necessidades
• Conceber soluções
• Prototipar soluções
• Avaliar protótipos

O que são Protótipos?

• Representação concreta, mas parcial, do sistema
• Permitir aos utilizadores interagirem
• Rapidez para identificar 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 para testar designs rapidamente
• Testar várias alternativas de forma rápida e fácil
• Ser fácil e rápido alterar problemas
• Ser centralizado no utilizador

Máximo Local / Máximo Absoluto

• Não ficar preso a uma única abordagem
• Bom design para uma má solução
• Experimentem alternativas.

Design Paralelo

• Várias pessoas criam soluções alternativas
• Mesmo requisitos
• Partilham conceitos
• Analisam e escolhem as melhores ideias
• Integram numa única solução

Características dos Protótipos

• Duas dimensões:
  • Profundidade (funcionalidades/tarefas)
  • Abrangência (aspecto/implementação)
  • Fidelidade
  • Funcionalidade

Abrangência e Profundidade

• Abrangência - fração de tarefas oferecidas pelo protótipo
• Profundidade - quantidade de funcionalidades de cada tarefas
• Permitir poupar recursos
• Escolha dependente de riscos a minimizar
• Protótipos abrangentes são mais comuns
• Maiors profundidade para tarefas específicas

Fidelidade e Funcionalidade

• Fidelidade - aspeto visual do protótipo
• Funcionalidade - implementação em código

Fidelidade

• Traduz a semelhança com o resultado final (tipos de letra, mensagens, cores, imagens)
• Baixa Fidelidade vs Alta Fidelidade

Protótipo Baixa Fidelidade (PBF)

• Representações artísticas
• Usando esboços, omitindo detalhes como cores, imagens e ícones

Protótipo Alta Fidelidade (PAF)

• Apresentam um aspeto bastante semelhante ao do produto final

PBF e PAF

• Tabela compartiva de protótipos PBF e PAF mostrando os fatores positivos e as aplicações, custos para alterar o Look&Feel e a sequência dos protótipos

Funcionalidade

• Funcionais (implementados em código, executáveis num sistema computacional)
• Não funcionais (necessitando intervenção humana para funcionamento)

Fidelidade e Funcionalidade

• Relação entre fidelidade em PAF e PBF e funcionalidade

Tipos de Protótipos

• Cenários de Interação
• Storyboards
• Protótipos de Papel
• Protótipos Funcionais
• Wizard-of-Oz

Cenários de Interação

• Não confundir com cenários de utilização e tarefa
• Histórias de utilizadores
• O que o utilizador pode fazer
• Dependência do desenho da IU
• Criados a partir de cenários de utilização
• Descrevem uma sessão de interação para completar uma tarefa sem flexibilidade

Storyboards

• Origem: filmes e animação
• Sequências chave de ecrãs
• Apenas detalhes importantes

Storyboards - Exemplo

• Exemplos de diagramas de fluxo, mostrando interações entre diferentes ecrãs.

Protótipos de Papel

• Esboços de ecrãs da IU
• Podem ser testados com os utilizadores
• Baixa fidelidade
• Não funcionais

Storyboard vs P. Papel

• Storyboard primeiro, depois P. Papel, com baixa fidelidade

Protótipos Funcionais

• Fase seguinte, após os protótipos em papel
• Programas que correm no computador ou dispositivo computacional
• Apresenta resultados à interação do utilizador
• Protótipos horizontais (com boa abrangência de tarefas)
• Sem back-end
• Fidelidade elevada

Protótipos Funcionais vs em Papel

• Benefícios da utilização de protótipos funcionais vs protótipos em papel
• Organizar elementos no ecrã
• Testar rato e teclado em vez do dedo
• Incluir a aplicação da lei de Fitts
• Retorno dinâmico (animações, barra de progresso)

Wizard-of-Oz

• Máquina de escrever com reconhecimento de fala
• Fases iniciais de desenvolvimento para sistemas complexos
• Inteligência humana substitui a prototipagem em casos de reconhecimento de fala e gestos

Tipo de Protótipo vs Tempo

• Relação entre diferentes categorias de protótipos e o tempo de desenvolvimento.

Protótipos de Papel (parte 2)

Papel vs Código

• Menos tempo a criar esboços em papel
• Mais fácil e mais rápido fazer alterações no papel em comparação com no código

Mão Livre vs Aplicação de Desenho

• No início, mão livre para focar nas questões importantes sem ser desviado por detalhes
• Utilização de aplicações de desenho é mais lenta devido às decisões relacionadas com detalhes
• Manter o foco na interface em seu conjunto
• Boas sugestões de utilizadores

Materiais Necessários

• Lista de materiais para a criação de protótipos de papel

Construir o Protótipo de Papel

• Começar por desenhar uma moldura
• Utilizar cartões para criar menus e diálogos
• Usar acetatos para elementos que precisam de um destaque
• Tamanho de protótipo igual ao tamanho do sistema final

Avaliar o Protótipo de Papel

• Ensaia o funcionamento do protótipo (execução)
• Verificar se faltam componentes
• Discussão com o utilizador depois do teste (registar comentários e sugestões)

"Execução” do Protótipo de Papel

• Depois dos testes, falar com os utilizadores para obter mais comentários e sugestões

Vantagens dos Protótipos de Papel

• Rápido e simples de produzir
• Teste de várias alternativas
• Iterações rápidas são possíveis
• Melhorar a qualidade final da experiência
• Simulação de qualquer interação

Avaliação de Protótipos

• Quais problemas de usabilidade podem ser descobertos
• Avalia a compreensão pelos utilizadores do modelo, da metáfora, da navegação e do fluxo de tarefa, da terminologia
• Avaliar se a informação em cada ecrã é suficiente.

Mais informação (Links)

• Links para recursos adicionais sobre prototipagem em papel

Resumo - Prototipagem

• O que são protótipos?
• Características (abrangência, profundidade, fidelidade, funcionalidade)
• Tipos de Protótipos (cenários de interação, storyboards, protótipos de papel, protótipos funcionais, wizard-of-oz)
• Protótipo de papel. Como fazer e como avaliar

Teste seus conhecimentos sobre cores complementares, esquemas de cores e prototipagem no design gráfico. Este quiz aborda as características dos diferentes esquemas de cores, as dificuldades enfrentadas por pessoas daltônicas e as vantagens da prototipagem. Prepare-se para responder perguntas que desafiam sua compreensão sobre o design visual.