Design de Interação e Cores

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Qual é uma das funções da cor na interação pessoa-máquina?

Aumentar o espaço de armazenamento

Limitar a navegação do usuário

Reduzir o tempo de carregamento

Transmitir informação (correct)

No modelo RGB da cor, quais são os componentes utilizados?

Red, Blue, White

Red, Green, Yellow

Red, Yellow, Green

Red, Blue, Green (correct)

Qual das opções abaixo descreve o que a saturação mede no modelo HSV?

A mistura com o branco

A intensidade da cor (correct)

O tom da cor

A quantidade de luz refletida

Qual é a cor associada ao estado de 'parar' na cultura ocidental?

Vermelho Signup and view all the answers

Qual tipo de protótipo é frequentemente utilizado para testes iniciais não digitais?

Protótipos de Papel Signup and view all the answers

Qual é a principal característica das cores complementares?

São radialmente opostas na roda de cores. Signup and view all the answers

Qual esquema de cores é descrito como a opção mais simples?

Esquema monocromático. Signup and view all the answers

Qual é a recomendação para criar um alto contraste entre cores?

Usar cores complementares. Signup and view all the answers

O que deve ser evitado ao escolher cores para design, de acordo com a regra de contraste?

Misturar cores adjacentes. Signup and view all the answers

Qual é um problema comum relacionado ao daltonismo em relação às cores?

Dificuldade em diferenciar vermelho e verde. Signup and view all the answers

Qual é um dos principais objetivos da prototipagem?

Obter retorno o mais depressa possível Signup and view all the answers

O que significa abrangência em um protótipo?

Fração de tarefas oferecidas pelo protótipo Signup and view all the answers

Qual é uma vantagem da prototipagem em relação a métodos tradicionais?

Testa rapidamente várias alternativas Signup and view all the answers

O que representa a fidelidade em um protótipo?

Aspeto visual do protótipo Signup and view all the answers

O que caracteriza um protótipo de alta profundidade?

Tem muitas funcionalidades em tarefas específicas Signup and view all the answers

Qual das opções descreve corretamente o conceito de design paralelo?

Várias pessoas criam soluções para os mesmos requisitos Signup and view all the answers

Por que protótipos abrangentes são mais comuns em design?

Permitem testar uma maior quantidade de ideias Signup and view all the answers

Qual dos fatores deve ser considerado ao escolher a profundidade do protótipo?

Os riscos a minimizar Signup and view all the answers

Quais das seguintes características descrevem um Protótipo Baixa Fidelidade (PBF)?

São representações artísticas usando esboços. Signup and view all the answers

Qual é a principal vantagem de usar protótipos de papel em vez de código?

Menos tempo a criar esboços em papel Signup and view all the answers

Qual das opções descreve corretamente a funcionalidade dos Protótipos Alta Fidelidade (PAF)?

Apresentam um aspeto semelhante ao do produto final. Signup and view all the answers

O que é um Cenário de Interação?

Histórias de utilizadores a realizarem tarefas específicas. Signup and view all the answers

Quais materiais são necessários para criar protótipos de papel?

Cartolina, papel branco, marcadores e tesouras Signup and view all the answers

Qual afirmação sobre a funcionalidade dos protótipos é verdadeira?

Os PBF estão implementados em código e têm funcionalidades limitadas. Signup and view all the answers

O que caracteriza o foco do designer ao usar o desenho à mão livre?

Atenção nas questões que realmente importam Signup and view all the answers

Por que os usuários tendem a fazer sugestões mais criativas ao avaliar protótipos de papel?

Porque não se distraem com detalhes irrelevantes Signup and view all the answers

Qual das afirmações sobre os Cenários de Interação é incorreta?

Incluem flexibilidade para o utilizador ao realizar tarefas. Signup and view all the answers

Qual das seguintes opções é considerada um protótipo digital?

Aplicativos como Figma e Balsamiq Signup and view all the answers

Qual é a principal diferença entre Protótipos Funcionais e Não Funcionais?

Os Funcionais são implementados em código, enquanto os Não Funcionais não são. Signup and view all the answers

Qual é a relação entre o tempo de criação e a eficácia dos protótipos de papel?

A criação de protótipos de papel é rápida e permite múltiplas iterações Signup and view all the answers

Em um Cenário de Interação, qual das informações é tipicamente incluída?

O que um utilizador tem de fazer e o que ele verá. Signup and view all the answers

No exemplo de Cenário de Utilização fornecido, qual é a primeira ação que o José realiza?

Ele carrega na opção Compor. Signup and view all the answers

Qual das alternativas não é uma fase do projeto mencionada para a criação de protótipos?

Fase 1: Prototipagem Signup and view all the answers

Qual é um benefício do reconhecimento de fala na prototipagem inicial?

Facilita a comunicação do usuário com o sistema Signup and view all the answers

Qual é a primeira etapa na construção de um protótipo de papel?

Desenhar uma moldura Signup and view all the answers

Qual é a razão para os protótipos de papel serem monocromáticos?

Melhoram a leitura e não distraem a atenção Signup and view all the answers

Qual é uma das responsabilidades do coordenador durante a avaliação do protótipo de papel?

Explicar o processo e dar instruções ao utilizador Signup and view all the answers

Quais elementos podem ser usados nos protótipos de papel para simular interações?

Marcadores e acetatos Signup and view all the answers

O que deve ser avaliado para verificar se o protótipo atende às expectativas dos usuários?

A terminologia usada nos elementos Signup and view all the answers

Qual é uma vantagem da prototipagem em papel?

Toma apenas algumas horas e não requer equipamentos dispendiosos Signup and view all the answers

Qual é uma desvantagem de não usar protótipos de papel?

Não ajuda a identificar problemas de usabilidade Signup and view all the answers

O que deve ser feito após a conclusão dos testes do protótipo de papel?

Registrar comentários e sugestões dos usuários Signup and view all the answers

Como os acetatos podem ser utilizados em um protótipo de papel?

Para realçar seleções e permitir escrita Signup and view all the answers

Qual deve ser a dimensão de um protótipo de papel em relação ao sistema final?

Maior que o sistema final Signup and view all the answers

Study Notes

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

Tópicos da aula: Desenho de Ecrãs II, Prototipagem, Cor, Tipografia, Escrita de Mensagens.
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])

Uso da Cor

Cor - Estético: A cor pode ser utilizada para fins estéticos, criando impacto visual.
Cor - Imagem de Marca: As cores podem influenciar a imagem de uma marca (exemplos: Coca-Cola, Facebook, Twitter, McDonald's).
Cor - Transmitir Informação: A cor pode ser usada para transmitir informações, como densidade populacional (em mapas).
Cor - Atrair o Olhar: Cores vibrantes ou contrastantes podem ser utilizadas para chamar a atenção.
Cor - Indicar Estado: Cores diferentes podem indicar o estado de um dispositivo (exemplo: LED vermelho indica bateria fraca, LED amarelo indica carregamento).
Significado da Cor - Cultura Ocidental: Existe uma associação de cores a conceitos específicos na cultura ocidental (exemplo: vermelho para parar, verde para avançar).

Modelo RGB da Cor

Usado em computadores.
Três componentes: Vermelho, Azul e Verde.
Hue: Cor base.
Saturation: Intensidade da cor (pureza).
Value: Brilho da cor.

Roda das Cores

Cores complementares: Radialmente opostas. A mistura resulta em cor neutra (preto, branco, cinzento).
Cores adjacentes: Juntas na roda.

Esquemas de Cores

Monocromático: Usa variações de um único tom.
Complementares: Usa duas cores opostas na roda. Aumenta o contraste.
Análogos: Usa uma cor principal e duas cores adjacentes.
Triádicos/Tetrádicos: Usam três/quatro cores equidistantes na roda.

Contraste - Escuro/Claro

Aumentar o contraste: Escurecer cores escuras; Clarear cores claras.
Usar cores complementares para aumentar o contraste (ex. amarelo e azul).
Evitar cores adjacentes (exceção é o contraste 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.
Mecanismos analógicos (calibração, temperatura de cor) determinam cores diferentes.

Desenhar Primeiro Sem Cor

Otimizar desenho do ecrã antes da escolha das cores.

Utilizar Cores de Acordo com Convenções

Seguir as convenções de cores para tornar a interface mais intuitiva.

Tipografia

Variedade de tipos de letras (Arial, Comic Sans MS, Courier New, Georgia, Times New Roman, etc.).
Tipos com/sem serifas.
Tamanhos e espaçamento adequados para legibilidade em tela e impressão.

Dentro do mesmo tipo

Variações de um tipo de letra (ex: Myriad Pro - Light, Regular, Semibold, Bold).

Duas grandes famílias

Tipos sem serifas e com serifas.
Serifas auxiliam a leitura de texto corrido, mas telas nem sempre oferecem resolução para detalhes finos.

Legibilidade - Serifas

Serifas auxiliam a leitura de texto corrido.
Ecrãs têm limitações que interferem com a legibilidade.

Tamanho de Texto

Tamanho de texto para ecrã é aproximadamente 12 pontos.

Espaçamento do Texto

Espaçamento mínimo de 30% da altura do tipo para melhorar a legibilidade.

Escrita de Mensagens

Mensagens concisas e diretas.
Exemplo: "Erro: n° do vestido deve estar entre 32 e 48".

Mensagens Afirmativas/Construtivas/Específicas

Mensagens informativas e/ou corretivas
Execução dos erros das mensagens especificas do texto, que permitem concluir ações ou procedimentos de forma eficaz e completa

Utilizador tem controlo

Introduzir comando.
Pronto para receber comando.

Indicadoras de Ação

Ex. "Trem de aterragem está recolhido".
"Para aterrar deve abrir o trem de aterragem".

Voz Activa

O João recebeu o documento.

Erros Típicos - Desenho de Ecrãs

Posição de componentes arbitrária.
Dimensões de componentes arbitrárias.
Layouts arbitrários de janelas.
Incoerência em vários ecrãs.
Elementos muito 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? : Represent. concreta, mas parcial, do sistema. Permite aos utiliz. interagirem.
Objetivo da Prototipagem: Retorno rápido, Estudo de altern., Apresentar novas ideias, Ide. Potenciais Problemas.

Vantagens da Prototipagem

Poupar tempo e custos.
Testar várias alternativas.
Alterar problemas com facilidade.
Desenho centrado no utilizador.
Máximo local/Máximo Absoluto: Não ficar preso a uma só abordagem. Experimente várias alternativas.

Design Paralelo

Várias pessoas criam soluções alternativas para o mesmo requisito.
Partilham conceitos, analisam e escolhem ideias e soluções como um todo integrado.

Características dos Protótipos

Duas dimensões: Profundidade de funcionalidades/tarefas, e fidelidade de aspeto e implementação.

Abrangência e Profundidade dos Protótipos

Abrangência: Fração de tarefas oferecidas no protótipo.
Profundidade: Quantidade de funcionalidade de cada tarefa.
Permite poupar recursos e testar mais coisas.

Fidelidade vs. Funcionalidade

Fidelidade: aspeto do protótipo.
Funcionalidade: implementação em código.

Tipos de Protótipos

Protótipo Baixa Fidelidade (PBF): Esboços.
Protótipo Alta Fidelidade (PAF): Aspeto semelhante ao produto final.
Protótipo Funcional: Programa que corre, resultados visíveis para o utilizador.

Diferenças entre PBF e PAF

PBF é rápido e flexível, mas tem pouca funcionalidade.
PAF é mais fidedigno, mas tem mais custo de produção.

Funcionalidade dos Protótipos

Funcionais: Implementados em código.
Não funcionais: Precisam de intervenção humana.

Cenários de Interação - Exemplos

Histórico de utilização dos utentes na solução, e como realizam tarefas.
Como os utentes irão interagir no uso do sistema.
Descrição em detalhes, para auxiliar na construção do protótipo

Storyboards

Representações visuais de diferentes cenários.
Sequência de ecrãs e interações.

Storyboards - Exemplo

Exemplos de diferentes tarefas simples e complexas.

Protótipos de Papel

Esboços de ecrãs da IU em papel.
Testagem com os utilizadores.
Baixa fidelidade.
Não funcionais.

Construir o Protótipo de Papel

Desenha uma moldura.
Crie os ecrãs da interface.
Use cartões e papel para criar os menus e diálogos.

Avaliar o Protótipo de Papel

Avaliação e ensaios do funcionamento do protótipo.
"Executar" o protótipo várias vezes.
Identificar falhas ou melhorias necessárias.
Feedback para os utilizadores sobre os testes.

Vantagens dos Protótipos de Papel

Rápido e barato.
Permite testar múltiplas alternativas.
Qualidade melhorada.
Permite simulações eficazes, sem custos associados a tecnologias mais evoluídas.

Avaliação de Protótipos

Avaliar se pode revelar problemas de usabilidade.
Avaliação dos utilizadores quanto à funcionalidade, navegação, terminologia, e eficácia para utilização do sistema.

Mais Informações (Links)

Links para guia e artigos relacionados com prototipagem em papel e digitais.

Resumo - Prototipagem

Revisão dos principais conceitos abordados sobre o tema.

Wizard-of-Oz

Máquina de escrever com reconhecimento de fala, inteligência artificial.
Metodologia complementar para sistemas exigentes.

Tipo de Protótipo vs. Tempo

Diferenciação de tipos de protótipos em relação ao tempo disponível, e por consequência custos.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Este quiz explora conceitos fundamentais sobre a interação entre usuários e máquinas, focando especificamente na teoria das cores e na prototipagem. Responda perguntas sobre modelos de cores, saturação, contraste, e práticas de design eficazes. Teste seus conhecimentos sobre a importância das cores e protótipos no design de interação.