Design de Interação

Profª Leila Laís Gonçalves -

llg@unesc.net

Aula 03 - Presencial
T2: 17/09/2022
XXI A – 005 e XXIA 202
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 1
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 2
 Roteiro Aula 03 (presencial)
• Conteúdo do Plano de ensino
– 1. Fundamentos de UX, IxD: Interface de Usuário
– Interface de usuário (UI): conceitos, características (elementos e estilos) e
aplicações
• Objetivos de aprendizagem:
– Reconhecer o conceito, características e aplicações de Interface de
usuário;
– Identificar elementos, estilos e princípios de design aplicados em interfaces
de usuários.
• Atividades:
– Acolhida
– Verificação Aulas e atividades 01 e 02
– Apresentação e discussão do tópico do plano de ensino
– Indicação de leituras e de vídeos sobre os temas
– Orientação da atividade Aula 03 (Design de Interface)

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 3

 Plano de Ensino
Competências
• Compreender e aplicar fundamentos de UX, IxD, UI e
RESULTADOS
Design Thinking no desenvolvimento de interfaces interativas, (fazer com
propósito)
considerando a abordagem centrada no usuário.
• Analisar interfaces interativas observando o atendimento a princípios e
boas práticas de design de interação e aplicando técnicas de pesquisa
em UX e avaliação de usabilidade a partir de uma perspectiva crítica,
reflexiva e ética.
• Projetar e prototipar interfaces interativas utilizando abordagens, boas
práticas, técnicas e ferramentas de forma criativa, ética e autoral.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 4

 Plano de Ensino
Un. aprendizagem 1: Fundamentos de Experiência de uso (UX), Design de Interação
(IxD), Usabilidade, Interface de usuário (UI) e Design Thinking
• Objetivo de aprendizagem:
1. Identificar e discutir conceitos características, relações e aplicações relacionados à UX, IxD e Design
Thinking considerando a abordagem centrada no usuário.
Un. aprendizagem 2: Pesquisa em UX: processos, métodos, técnicas, características,
objetivos, instrumentos e análise de resultados
• Objetivo/s de aprendizagem:
1. Reconhecer e descrever as dimensões, métodos, técnicas, estrutura e instrumentos da pesquisa em UX
e avaliação de usabilidade.
2. Elaborar instrumentos de pesquisa e avaliação para identificação de problemas de uso em interfaces.
3. Analisar resultados da pesquisa e avaliação de interface e elaborar um relatório identificando
problemas de uso e de não conformidades com base em fundamentos de UI, IxD, UX.
Un. aprendizagem 3: Projeto de IxD: abordagem, design system, entregáveis
• Objetivo/s de aprendizagem:
1. Identificar abordagens, princípios, processos, entregáveis e modelos no Projeto de IxD.
2. Projetar interfaces interativas aplicando abordagens, boas práticas, técnicas e ferramentas.
Un. aprendizagem 4: Prototipação de Interfaces Interativas: técnicas e ferramentas
• Objetivo/s de aprendizagem:
– Prototipar interfaces interativas utilizando boas práticas, técnicas e ferramentas.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 5

 Design Thinking
Percurso e Avaliação Universidade de Stanford - d.school

Etapa 1: Etapa 2: Etapa 3:

N1: Relatório UX N2: Projeto de Redesign N3: Protótipo

Ideias
“Dores”

Personas Wireframes
Jornada Blueprints
Pesquisa de UX Canvas UX Mockup
Protótipo

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 6

 8 competências de um Profissional de UX

• Pesquisa de necessidades do usuário (User needs research)

• Avaliação de usabilidade (Usability evaluation)
• Arquitetura da Informação (Information architecture)
• Design de interação (Interaction design)
• Design visual (Visual design)
• Escrita técnica (Technical writing)
• Prototipação de interfaces (User interface prototyping)
• Liderança de UX (User experience leadership)
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 7
 Verificação Atividade Aula 02
UX, IxD e Usabilidade

1. Revise o conteúdo da aula e responda mentalmente as questões abaixo:

1. O que é UX?
2. Termos, conceitos, palavras, ideias importantes sobre UX.
3. O que é IxD?
4. Termos, conceitos, palavras, ideias importantes sobre IxD.
5. O que é Usabilidade?
6. Quais as diferença entre UX e Usabilidade?
7. Quais são as Heurísticas de Usabilidade de Nielsen?
8. Dúvidas, curiosidades, pontos de vista diferentes do que foi abordado em aula
sobre UX, IxD e usabilidade.
2. Leia o artigo obrigatório: 10 heurísticas de Nielsen para o design de interface
https://brasil.uxdesign.cc/10-heur%C3%ADsticas-de-nielsen-para-o-design-de-interface-58d782821840
3. Responda a questão no AVA (Atividades/Publicações – Aula 02– 09/08) para
validar a presença
4. Escolha leituras e/ou vídeos extra, leia/assista para aprofundamento dos temas.
5. Identifique, nos exemplos das 10 Heurísticas de Usabilidade de Nielsen (slides),
como e onde (interface, interação) as heurísticas foram e não foram aplicadas.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 8

 Considerando a situação hipotética: um usuário acessa um site na Internet e deseja cadastrar-se. Ao
acessar a tela de cadastro ele preenche dados para acesso, como, nome, e-mail, senha e confirmação da
senha e clica no botão “Cadastrar”. Ao clicar no botão nenhuma mensagem é exibida e ele é direcionado
para outra tela, onde ele deve continuar o cadastro digitando os dados referentes ao endereço. O
usuário nota que o formulário dessa tela é diferente do formulário da tela anterior (tamanho e
disposição dos campos do formulário, cores, formatação do texto, entre outros), mas mesmo assim
finaliza o cadastro e clica no botão “Salvar dados”. Ao clicar nesse botão, o usuário é direcionado para a
tela inicial do site sem receber uma mensagem clara se o cadastro foi ou não concluído com sucesso, a
confirmação do cadastro aconteceu apenas alguns minutos depois por meio do recebimento de um e-
mail. Tendo por base a situação hipotética exposta, caso se realizasse uma avaliação de usabilidade no
cadastro descrito utilizando as “10 Heurísticas de usabilidade para o projeto de interface do usuário”
propostas por Jakob Nielsen, o cadastro, como descrito, apresentaria falhas, principalmente, em duas
das 10 heurísticas. Assinale a alternativa que apresenta as duas principais.

a) Reconhecimento em vez de lembrança (Recognition rather than recall); Ajuda e documentação

(Help and documentation).

b) Visibilidade do status do sistema (Visibility of system status); Consistência e padrões (Consistency

and standards).

c) Controle e liberdade do usuário (User control and freedom); Correspondência entre o sistema e o
mundo real (Match between system and the real world).

d) Consistência e padrões (Consistency and standards); Reconhecimento em vez de lembrança

(Recognition rather than recall).

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 9

 Hierarquia de necessidades de usuários - Aaron Walter
Assim como a hierarquia de Maslow, a hierarquia de
necessidades do usuário de Aarron Walter define as
necessidades básicas do usuário que as interfaces
devem atender antes que as necessidades mais UX Prazerosa
avançadas possam ser atendidas.

Peter Morvill

1. Valioso (entrega valor ao usuário)

2. Útil (propósito e utilidade)
3. Confiável (durável, preciso)
4. Desejável (estética e emoção)
5. Usabilidade (facilidade, eficiência e
eficácia de uso)
6. Acessibilidade (acessível)
7. Localizável (fácil de encontrar)

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 10

 Usabilidade x UX
Eficácia Satisfação
Eficiência Alegria
Segurança no uso Prazer
Fácil de aprender
Diversão
Fácil de lembrar
Valor

A USABILIDADE é estreita e focada A UX é ampla e holística

Objetivos: Objetivos:
Tornar uma tarefa fácil e intuitiva Tornar uma tarefa significativa e valiosa
Minimizar etapas e remover barreiras Criar conexão emocional
Foco: Foco:
O que os usuários fazem / Como eles fazem O que os usuários sentem
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 11
 10 Heurísticas de Usabilidade Nielsen

Visibilidade do Compatibilidade Controle e Consistência e

Status do Sistema entre o sistema e o liberdade para o Padronização
mundo real Prevenção de erros
usuário

Eficiência e Estética e design Ajuda e

Reconhecimento Ajuda aos usuários
flexibilidade de uso minimalista documentação
em vez de com erros
memorização

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 12

 AP – Aula Presencial – Unesc
Cronograma de aulas – DI 2022/2 Turma 02 AM – Aula Mediada - Meet

01. 03/08 AP Fundamentos de Experiência de uso (UX) e Design de interação (IxD)

02. 10/08 AM Usabilidade: conceitos, características, aplicações, heurísticas
03. 17/08 AP Interface de usuário (UI): conceitos, características e aplicações
04. 24/08 AM Arquitetura de informação (AI): elementos, heurísticas, boas práticas
05. 31/08 AP Pesquisa de UX: Dimensões, métodos, técnicas, características e objetivo
06. 10/09 AM S Pesquisa de UX: Instrumento
07. 14/09 AM Pesquisa de UX: Resultados e problemas Relatório – Nota 1
08. 21/09 AP Projeto em Design de Interação: abordagem, processo, artefatos, entregas
09. 28/09 AM Revisão Relatório Pesquisa UX – Nota 1
10. 05/10 AP Projeto de Redesign – Persona, Jornada do usuário
11. 08/10 AM Projeto de Redesign – Relatório do Projeto de Redesign
12. 19/10 AM Projeto de Redesign – Canvas UX
13. 26/10 AP Semana de Ciência e Tecnologia – XIII SCT
14. 09/11 AM Projeto de Redesign – Nota 2: Revisão
15. 16/11 AP Prototipação: técnicas e ferramentas
16. 19/11 AM Prototipação do projeto – Wireframe + Blueprints
17. 23/11 AM Prototipação do projeto – Mockup
18. 30/11 AP Prototipação do projeto – Mockup
19. 07/12 AM Prototipação do projeto – Relatório
20. 14/12 AP Entrega do Relatório e Apresentação do Protótipo – Nota 3
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 13
 Interface de Usuário (UI)
• User Interface ou Interface de Usuário é a parte
”visível” do projeto ou sistema em qual o usuário
interage, ou seja, se refere a interface gráfica.
• UI Design ou User Interface Design (Design de
Interface do Usuário) é área que estuda o meio pelo
qual uma pessoa interage ou controla um dispositivo,
software ou aplicativo.
• A UI é composta de elementos que são criados e
alocados dentro do layout para cumprir uma função
determinada dentro da interface.
– Os elementos permitem que o usuário possa realizar uma ação,
ser informado sobre algo, receber respostas de sua interação.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 14

 Parte “interativa” – o uso Parte “física” - a forma Parte “sensorial” – o sentimento
Ações, Cenários de uso Desenho, Mockup Compartilho depois de usar

DxI - Interação UI - Interface UX – Experiência

• Definição de fluxos que • Definição de padrões e • Criação e sincronização
serão apresentados de elementos gráficos dos elementos que
para os usuários, como botões, campos, afetam a experiência
definindo como esses áreas, entre outras dos usuários com um
interagem com as formas de produto. Com isso é
funcionalidades tendo apresentação de possível influenciar
como objetivo facilitar conteúdos na interface. suas percepções e
suas tarefas comportamentos.
aumentando sua
eficiência, eficácia e
satisfação.

O que O que acontece

acontece em frente da tela
na tela
Dispositivo Usuário
Ciência da Computação – Tópicos III – UX e Design de Interação – Profª Leila Laís Gonçalves 15
 Interface de Usuário (UI) Tipos

1. Interface gráfica do usuário (GUIs) - os usuários interagem

com representações visuais em painéis de controle digital.
Exemplo: a área de trabalho de um computador.

2. Interfaces controladas por voz (VUIs) - os usuários interagem

com elas por meio de suas vozes.
Exemplo: assistentes inteligentes (Siri no iPhone e Alexa nos
dispositivos Amazon).

3. Interfaces baseadas em gestos - os usuários se envolvem com

espaços de design 3D por meio de movimentos corporais
Exemplo: : realidade virtual (VR) jogos.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 16

 Termos UI
Estética, organização, comunicação, interação, navegação
• Layout: é estrutura composta pelos elementos visuais de uma interface: disposição, fontes, cores,
imagens, composição, dimensões
Grid: referências ortogonais que se mantêm consistentes em todas as páginas, permitindo a
criação de ambientes visualmente harmoniosos e com rigor conceitual.
• Wireframes: estruturas visuais
• Design responsivo: modo como a interface se apresenta em diversos dispositivos e em
diferentes contextos de uso e acesso
• Mobile First, Mobile Only
• Design atômico
• Elementos da UI
• Estilos de Design de Interface
• Princípios, guias de estilo (style guides) e padrões de design (design patterns)
• Moodboard (prancha de temperamento): é um painel que reúne referências visuais para um
projeto – personalidade (objetos, amostras de materiais e imagens)

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 17

 Atividades do Design de Interface

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 18

 Design responsivo

Combinação de grades e layouts flexíveis, onde as imagens, conteúdos, textos ou

qualquer outra coisa que estiver na tela, mude a forma de visualizar, se
adaptando a qualquer tela em que o usuário estiver.
Ele representa a adaptação de uma interface a qualquer resolução de tela,
adaptando a experiência de navegação de acordo com as necessidades dos
usuários e também de cada tipo de mídia.

Técnica: Design fluído (liquido), uso de grids

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 19

 Mobile First/Only

Luke Wroblewski (diretor de produtos do Google), um site é feito para

rodar em desktop trazendo consigo muitas informações e
componentes, dificultando, então, que o mesmo tenha bom
desempenho em um celular.
O mobile only é a evolução do mobile first: novas estratégias e formatos
de produtos que sejam feitos apenas como aplicações mobile, tendo
como base a experiência completa e satisfatória do usuário.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 20

 Design Atômico

Design Atômico - metodologia de Brad Frost que estabelece cinco

níveis distintos que compreendem o design atômico: átomos,
moléculas, organismos, modelos e páginas.
O átomo é o bloco de construção fundamental de design a partir do
qual se constrói os demais elementos buscando consistência e
escala.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 21

 Design Atômico

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 22

 Elementos da UI
• Os elementos da UI são agrupados em:
1. Controles de entrada (input controls) – usuário escreve, marca e
seleciona opções e informações: campos de texto e data (inputs), botões de
opção (radio buttons), botões de ativar ou desativar (toggles), listas suspensas
(dropdown list, button dropdown list), caixas de seleção (checkboxes), caixas de
listagem, ícones, controle deslizante (slide bar), seleção de datas e ou horas (Date
and time pickers);
2. Componentes de navegação: menu, campo de pesquisa (search field),
“caminhos de migalhas de pão”(breadcrumb), slides (slider, image carousel),
paginação (pagination), tags, ícones, links.
3. Componentes informativos (information components) - passam
instruções para o usuário: caixas com dicas de ferramentas (tool tips), ícones,
barra de progresso (progress bars), notificações (notifications), caixas de
mensagem (message boxes), janelas modais (pop-up);
4. Containers: lista vertical empilhada de itens (accordion), boxes estruturais,
entre outros.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 23

 Elementos da UI

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 24

 Estilos de Design UI
• Skeumorfismo: estilo que faz referência aos
objetos reais (mais fieis) no meio digital/gráfico.
– Uso de artifícios como texturas, sombras, gradientes,
proporções, entre outros para simular os objetos do
cotidiano.
– Foi muito utilizado por muito tempo, atualmente
perdeu o status.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 25

 Estilos de Design UI
• Flat Design: “Design Plano” com estilo minimalista
que utiliza cores e formas chapadas, com poucos
(ou quase sem) efeitos de volume, sombras e
texturas.
– Mais simples, leve,
rápido, maleável e
adaptável
– Popularizou o
conceito de
Design Responsivo.

iOS 6: Skeumorfista / iOS 7: Flat

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 26
 Estilos de Design UI
• Metro Design: um estilo minimalista (+ que o
Flat design) com influência nítida do estilo Suíço
criado pela Microsoft.
– Nome inspirado na sinalização do metrô de Londres.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 27

 Estilos de Design UI
• Material Design: estilo criado pelo Google que
utiliza as características do Flat Design, porém
adiciona outros artifícios como efeitos 3D.
– Utiliza a física e um pouco de Skeumorfismo para
comunicar e
criar o visual.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 28

 Estilos de Design UI

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 29

 Neumorfismo
• Neumorfismo (neumorphism)
– Traz uma “nova sensação” para a interface e faz com
que ela se destaque.
– Pode ser misturado com outros estilos para que não
fique “plástico extrudado”
em todos os lugares.

Problemas:
1.Visibilidade / Acessibilidade
2.Maneiras eficientes de codificação

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 30

 Princípios de Design

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 31

 Fundamentos de layout no DUI
• Tamanho: a hierarquia de tamanhos facilita a decisão do
usuário.
• Jornada Visual: direcionar o percurso do usuário.
• Assimetria: layouts assimétricos expressam mais movimento
e dinamismo.
• Espaço: o espaçamento correto define o layout.
• Intervalo: quebrar um esquema tradicional prende a atenção
do usuário.
• Sobreposição: sobrepor um elemento a outro cria
profundidade.
• Grades: o uso da grade é matematicamente agradável aos
olhos.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 32

 Dicas de Design UI

PROJETO PARA OS A ESTÉTICA É O SEGREDO DA ORGANIZAÇÃO,

USUÁRIOS E NÃO PARA IMPORTANTE, MAS O SOFISTICAÇÃO ESTEJA CONSISTÊNCIA,
O DESIGNER. FOCO É PROPORCIONAR NA SIMPLICIDADE. CLAREZA E COESÃO NA
UMA BOA EXPERIÊNCIA ESTRUTURAÇÃO DO
AO USUÁRIO TÃO CONTEÚDO.
EFICIENTE E SIMPLES
POSSÍVEL.

PADRÃO NOS O PRINCÍPIO OS ELEMENTOS DEVEM MANTER A ATENÇÃO DO

COMPONENTES E VISIBILIDADE: OPÇÕES SEGUIR A FORMA DA USUÁRIO E EVITAR
COMPORTAMENTOS. PRIMÁRIAS, SUA FUNÇÃO. DISTRAÇÕES.
FUNDAMENTAIS DE
FORMA VISÍVEL SEM
DISTRAIR O USUÁRIO

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 33

 • “Estado zero“ intuitivo (estado em que nada ocorreu ainda, mas
que fornece orientação e instrução para iniciar)
• Interatividade - esclarecer, iluminar, capacitar, mostrar
relacionamentos, unir, separar, gerenciar expectativas e dar
acesso a serviços (cria vínculo)
• Manipulação direta e natural (a melhor interface é nenhuma)
• Clareza (inspira confiança)
• Design invisível (o usuário se concentra nos objetivos, ao invés de
preocupar com a interface)
• Sentimento de controle - feedback (traz conforto)
• Foco (retém a atenção)
• Ação de valor real (uma ação principal por tela, mantenha ações
secundárias, secundárias)
• Divulgação progressiva (não explicar demais ou mostrar tudo de
uma vez)
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 34
 • Ajuda inline e contextual (disponível apenas quando e onde for
necessária)
• Condução natural (sensação de ser guiado a um próximo passo)
• Consistência (a forma segue a função, a aparência segue
comportamento)
• Hierarquia visual (ordenação na visualização dos elementos)
• Organização inteligente (reduz a carga cognitiva)
• Uso cuidadosa de cores (pode ser usada para destacar, guiar a
atenção, mas não deve ser o único diferenciador das coisas.
• Apoio multidisciplinar (design visual e gráfico, tipografia,
copywriting, arquitetura de informação)
• Interfaces existem para serem usadas (o design da interface é
bem-sucedido quando as pessoas o usam da maneira como foi
projetado)

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 35

 Design de UI
• Princípios, regras, dicas, estilos
• Elementos de interação, navegação e comunicação
• Movimento: Transições e Motion
• Layout (posicionamento, dimensões, espaçamento e área em
branco)
• Design responsivo
• Wireframe: priorização de conteúdo e alocação de espaço
• Cor: Paleta de Cores, Mesclagem de cores e gradientes,
Sobreposição
• Fonte: Tipografia, espaçamento, família de fontes, tamanho
• Comunicação: Mensagens e Notificações
• Guia de Estilo: CSS, padronização

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 36

 Design System
Nathan Curtis: “um sistema de design não é um projeto, é um produto que serve
produtos”.

Entendendo Design Systems

https://brasil.uxdesign.cc/entendendo-design-system-f375bbb6f704

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 37

 Design System
• Design System é o conjunto completo de padrões do projeto
ou padrões do design, documentação e princípios,
juntamente com o kit de ferramentas de design e código para
atingir esses padrões (orientações de design, bibliotecas de
código, opiniões de desenvolvimento e documentação de API)
• Pattern Library é uma subclasse no sistema de design, é o
conjunto de padrões de design para uso em uma empresa.
Um conjunto de símbolos e recursos no Sketch

• Style Guide é outra subclasse no sistema de design. Uma

documentação que descreve o próprio sistema de design:
como os produtos devem parecer e se comportar, padrões de
interface do usuário como tamanho de fonte, cores, botões e
etc.
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 38
 Design System
• Orientações de design (valores da experiência, acessibilidade,
internacionalização, arquitetura de informação, moeda)
• Design (cores, tipografia, ilustrações, sons, ícones, estados de interação,
espaço, visualizações de dados)
• Conteúdo (Voz e tom, Linguagem acessível e inclusiva, Gramática e
mecânica, Nomeação, Linguagem acionável, Conteúdo do produto)
• Padrões (Padrões de design, Carregando, Layouts de página, Cartões iniciais,
Mensagens de erro, Campos de texto, Conteúdo de ajuda, Catadores)
• Componentes (são os menores elementos de interface do usuário - blocos
de construção reutilizáveis ​feitos de elementos e estilos de interface,
empacotados por meio de código)
• Tokens de design (decisões de design codificadas reutilizáveis, como cor,
espaçamento e tipografia)
• Composições (resultado de tokens de design e/ou componentes reunidos
para criar uma experiência de usuário específica)

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 39

 Padrão de Design
Um padrão de design é uma solução repetível para um problema
comum de UX em uma situação específica.
Princípios
– Contexto (ser contextual): está sempre associado ao problema que ele resolve e à situação
em que aparece.
– Consistência (ser consistente): são sempre usados ​da mesma maneira pelos mesmos
motivos.
– Unificação (ser unificado): são sempre informados e projetados em conjunto com padrões
semelhantes. Por exemplo, padrões com finalidade semelhante devem se complementar
compartilhando aparência e comportamento.

Objetivo padrão de design Aplicação padrão de design

• Apoiar o projeto para uma melhor • Resolução problemas de usabilidade
experiência de uso possível • Garantia de uma experiência consistente
• Simplificar o aprendizado da IU do produto
• Melhorar o reconhecimento e a • Componentes:
facilidade de uso
• Melhorar o desempenho
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 40
 Padrão de Design
Um padrão de design é uma solução repetível para um problema
comum de UX em uma situação específica.
Orientações para projetar a melhor experiência:
• Tarefas, como pesquisar e filtrar
• Situações, como erros e carregamento
• Características da interface do usuário, como feedback
• Arquitetura, como navegação e layout de página

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 41

 Componentes da IU
https://polaris.shopify.com/components
Ações: Conexão da conta, Lista de Ação, Grupo de botões, Botão, Ponto de largada, Alternar
configuração
Estrutura: Provedor de aplicativos, Cartão de destaque, Cartão, Propriedades personalizadas,
Estado vazio, Quadro, Rede, Esquema, Cartão de mídia, Ações da página, Página, Pilha
Formulários: Autocompletar, Caixa de seleção, Lista de opções, Seletor de cores, Caixa combo,
Barra de salvamento contextual, Seletor de data, Layout do formulário, Forma, Erro embutido,
Botão de radio, Controle deslizante de intervalo, Selecionar, Marcação, Campo de texto
Imagens e ícones: Avatar, Distintivo, Ícone, Tecla de atalho, Miniatura, Miniatura do vídeo
Indicadores de feedback: Bandeira, Carregando, Barra de progresso, Wireframe, Texto de
exibição do esqueleto, Texto do corpo do esqueleto, Página de esqueleto, Abas de esqueleto,
Miniatura de esqueleto, Spinner, Brinde
Títulos e texto: Rubrica, Exibir texto, Cabeçalho, Subtítulo, Contêiner de texto, Estilo de texto,
Visualmente oculto
Comportamento: Dobrável, Rolagem
Listas e tabelas: Tabela de dados, Lista de descrição, Lista de exceções, Filtros, Tabela de índice,
Lista, Caixa de listagem, Lista de opções, Item de recurso, Lista de recursos
Navegação: Ajuda de rodapé, Barra de tela cheia, Link, Navegação, Paginação, Abas, Barra
superior
Sobreposições: Modal, Dar um pulo, Dica de ferramenta,
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 42
 Design System
• Design System Shopify
– https://polaris.shopify.com/
– Polaris é o sistema de design para o admin da Shopify.
– É a linguagem compartilhada que orienta como criar
experiências de comerciante de alta qualidade e é
fundamentada no profundo entendimento do
comerciante.
– O Polaris é usado internamente na Shopify e externamente
por desenvolvedores e designers de terceiros.
– Da acessibilidade ao desempenho e à experiência em
design, ele oferece as ferramentas para criar uma
experiência administrativa de classe mundial.

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 43

 Design System

https://polaris.shopify.com/foundations

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 44

 Design System
Cores
• Princípios
– Comunicação é fundamental
– As cores têm significado
– As cores seguem as diretrizes de acessibilidade
• Papéis de cores na interface e suas variações
– Superfície de componentes (página, cartão, folha e popover)
– Cores primárias (botões, ícones e texto na navegação e guias, e para o plano de fundo na
navegação e estados interativos de guias)
– Cores secundárias (botões secundários e terciários e o plano de fundo dos elementos do
formulário)
– Interações (links, indicadores de foco e estados interativos selecionados)
– Sucesso (indicam algo positivo)
– Aviso (selos, banners e listas de exceção)
– Crítico (elementos interativos destrutivos, erros e eventos críticos)
– Realçar (banners e crachás informativos, indicadores que chamam a atenção para novas
informações, barras de carregamento ou progresso e visualização de dados)
– Decorativo (comunicações expressivas - presença da marca)

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 45

 Design System

https://polaris.shopify.com/foundations

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 46

 Design System
Exemplos
• O Stack Overflow possui um Design System com padrões que vão de
classes CSS, uso de marca e até mesmo e-mail marketing -
https://stackoverflow.design/

• O Adobe Spectrum, na seção sobre cores do Design System da Adobe ela

se preocupa com o modo noturno da aplicação
https://spectrum.adobe.com/

• Claro Mondrian, exemplo brasileiro, inclui bibliotecas em React de

componentes específicos - https://mondrian.claro.com.br

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 47

 Guia de estilos
• Style Guide (guia de estilo) é um documento que contempla as diretrizes de
design de uma empresa, ou, em menor escala, de um projeto, marca ou
produto específico.
– Cores
• Paleta de cores: cores primárias, secundárias e terciárias
• Cores: links, botões de chamada (CTA), mensagens de erro, status de interações, texto
(título, subtítulos, corpo de texto), background
– Tipografia:
• Fonte, Espaços; altura das linhas; hierarquia tipográfica; Peso e cores
– Elementos de UI:
• Tamanhos, espaços e margens
– Layout, Grids e Breakpoints:
• Estrutura dos grids: colunas, lacunas e margens
• Intervalos pré-determinados de layout para diferentes tipos de tamanho de tela para os
Breakpoints
– Logo, imagens e ícones
• Diretrizes para uso

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 48

 Style Guide Design System Brand Guidelines
• Diretrizes visuais e • Propósitos e valores; Manual de identidade
estéticas do design • Princípios de design; da marca
• Documento “vivo” • Identidade da marca; • Estático
• Constantemente • Componentes, • Regras e padrões
atualizado padrões e elementos; definidos e imutáveis,
• Evolução acompanha • Diretrizes e regras de até que a marca seja
as transformações do uso. atualizada
design resultantes
dos processos Como os componentes e
iterativos. elementos funcionais se
adequam aos visuais.
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 49
 Guia de estilos
• Biblioteca de padrões Starbucks
– https://www.starbucks.com/developer/pattern-library

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 50

 UI e DUI
• Fundamentos de layout no DUI
– https://uxdesign.cc/fundamentals-of-layout-in-interface-design-ui-
3a9dba31f1
• 6 princípios de DUI
– https://medium.com/@gabriel.cclnd/espa%C3%A7o-em-branco-o-
elemento-principal-de-uma-boa-interface-princ%C3%ADpios-de-ui-design-
parte-01-de-4a746422fe02
• 20 princípios do design
– https://tutano.trampos.co/10530-elemento-principios-do-design/
– https://www.canva.com/pt_br/aprenda/20-principios-elementos-do-design/
• Um guia completo sobre grids para design responsivo
– https://brasil.uxdesign.cc/um-guia-completo-sobre-grids-para-design-
responsivo-6b192fea0124
• Atomic Design: O que? Porque? Como?
– https://vidadeproduto.com.br/atomic-design/
Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 51
 UI e DUI
• UI Design – O que é User Interface Design (UI DESIGN)? -
https://www.chiefofdesign.com.br/ui-design/
• Elementos da interface do usuário – UI Design elements -
https://www.chiefofdesign.com.br/ui-design-elementos-da-interface-
do-usuario/
• https://developer.gnome.org/hig/stable/ui-elements.html.en
• https://www.usability.gov/how-to-and-tools/methods/user-interface-
elements.html
• PREECE, ROGERS & SHARP, Design de Interação - Além da
interação homem-computador, Ed Bookman, 2013

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 52

 UI e DUI
• Material Design - https://material.google.com/
• Material Design para Android -
https://developer.android.com/guide/topics/ui/look-and-feel?hl=pt
• Introdução ao Material Design -
https://www.androidpro.com.br/blog/design-layout/android-material-
design-introducao/
• Entendendo o Material Design -
https://www.alura.com.br/artigos/entendendo-o-material-design

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 53

 DUI e Design System
• Entendendo Design Systems -
https://brasil.uxdesign.cc/entendendo-design-system-f375bbb6f704
• Design Systems: exemplos práticos -
https://www.alura.com.br/artigos/design-systems-exemplos-praticos
• Dicas UX - Design System - http://www.dicasux.com.br/design-
system/
• Diferença entre um style guide e um Design System -
https://www.dicasux.com.br/design-system/qual-diferenca-entre-
style-guide-design-system/
• O que é, e porque criar um Design System? -
https://uxdesign.blog.br/design-system-90036c034225
• Style Guide: Como Desenvolver o Guia de Estilo da Sua Interface? -
https://aelaschool.com/designvisual/style-guide-como-desenvolver-
o-guia-de-estilo-da-sua-interface/

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 54

 Atividade Aula 03
Design de Interface de usuário

1. Revise o conteúdo da aula respondendo as questões abaixo:

• O que é Interface de Usuário (UI)?
• Atividades do Design de Interface (DUI)
• Elementos UI e Estilos de DUI
• Princípios de DUI
• Diferença entre UX, DxI, DUI

2. Selecione um produto interativo (aplicativo, site, jogo) para o

redesign desse produto a partir de pesquisa, identificação de
dores/problemas de uso, projeto e prototipação.
• Descreva o produto: o que é, para que serve, quem usa
• Link e Prints

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 55

 Atividade Aula 03
Design de interface de usuário

3. Observe a aplicação das 10 heurísticas de usabilidade de

Nielsen na interface do APP escolhido e identifique com
imagens:
• Quais as heurísticas foram aplicadas e onde?
• Quais os benefícios para a experiência de uso as heurísticas
trouxeram?
• Alguma heurística não foi aplicada?
• Quais desconfortos a não aplicação das heurísticas
acarretaram na experiência de uso?

4. Escolha leituras e/ou vídeos extra, leia/assista para

aprofundamento dos temas.

Poste no AVA: Atividade 2 Aula 03 – Design de Interface de usuário até 23/08/2022

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 56

 Atividades para a semana de 17 a 23/08:
• (Re) Leia o Roteiro de aula
Bom estudo!
• (Re) Leia os Slides da aula
Depois me diz como foi a
aula, o que aprendeu, suas • Realize a atividade Aula 03 - Design de interface de usuário
dúvidas, sugestões... Entre em contato para tirar dúvidas, dar feedback da aula,
Conta comigo! propor sugestões e contribuições via e-mail ou chat no AVA.
Estou à disposição!
Juntos faremos melhor!

Contato
• Email - llg@unesc.net

Ciência da Computação –Design de Interação (DI) – Profª Leila Laís Gonçalves 57