Aulao de Design

Aulão de De a
a
lu
a
n
lu
os
nos
par
design
Processo seletivo
Apple Developer Academy PUCPR
2022

BEM VINDES!
QUEM SOMOS?
Alunes da Academy :)
Nosso
Nosso backstage
backstage
de
de milhões
milhões
Barbra
Chaotic UX Designer
barbraeliza.com ;)
 
CONTEÚDOS
1 O que é UX? Processos e métodos

Neidi & Jessie
2 O que é UI? Composição visual, gestalt e interface

Ana & Taci
3 Heurísticas Usabilidade de Nielsen

Barbs & Malu
4 Acessibilidade Foco digital

Deborah e Lari

1
O que é UX?
Processos e métodos
Neidi & Jessie

Neidi Jessie
UI/UX Designer UI/UX & Research
@vanderluste @jessiemeguro
1 O que é UX?
UX User Experience
Desenvolver de forma consciente experiências de um produto
mantendo em foco as pessoas que o usarão.
Indo além da interface, pensando em seu uso e poder transformativo.
✴ UX: User Experience
• Passarinho, que
sigla é essa? Experiência
• Design thinking

1 O que é UX?
UX User Experience
Design thinking é o pretinho básico, arroz com feijão,
o simples do simples dos processos de UX, e que
também nos fala muito sobre o trabalho da área.
• Passarinho, que
sigla é essa?
• Design thinking

1 O que é UX?
UX User Experience
Uma das fases mais importantes do processo,
consiste em entender os problemas de quem faz uso
do produto. As pessoas devem sempre ser o foco.
• Passarinho, que
sigla é essa?
• Design thinking

1 O que é UX?
UX User Experience
Vários problemas, e agora?
É necessário fazer um recorte de quais problemas
são prioridade para o momento.
• Passarinho, que
sigla é essa?
• Design thinking

1 O que é UX?
UX User Experience
Com um escopo definido é hora de gerar alternativas
e pensar soluções.
Criar cenários ideais em que o produto consegue
resolver os problemas definidos.
• Passarinho, que
sigla é essa?
• Design thinking

1 O que é UX?
UX User Experience
Então chega a hora de criar protótipos, limitar as
ideias aos processos e recursos do mundo real.
Nem sempre essa pate é feita em conjunto com o
time que produz o produto.
• Passarinho, que
sigla é essa?
• Design thinking

1 O que é UX?
UX User Experience
Testar. O momento onde você descobre que tudo
que você projetou e planejou melhorou a experiência,
ou não. Independente do resultado do teste,
entramos em um processo de iteração.
• Passarinho, que
sigla é essa?
• Design thinking

1 O que é UX?
UX User Experience
Embora seja um objetivo, a experiência perfeita não
existe, é só um ideal distante. Usuários são pessoas,
pessoas mudam. O objetivo da UX é monitorar e
acompanhar essas mudanças.
• Passarinho, que
sigla é essa?
• Design thinking

1 Métodos e Processos
Um problema exposto com

clareza já está metade
resolvido.
Charles Kettering
🔎 Definindo um problema
| Obstáculo que desa a a capacidade de solucionar de alguém.

✴ Métodos e Processos
• O que é um problema?
• Double Diamond
• Imersão
• Definição
É necessário:
• Ideação
• Prototipação 1. Saber o problema.
2. Entender o problema.
3. Agir com base nos dados coletados.

fi

1 Métodos e Processos Para pesquisar mais sobre:

https://blog.somostera.com/ux-design/double-diamond
Imersão Definição Ideação Prototipação
✴ Métodos e Processos
• Double Diamond
• Imersão
Descobrir Definir Desenvolver Entregar
• Definição
• Ideação
• Prototipação
Quais são e de Qual problema Quais são as A nossa solução de

onde vem os devemos focar em soluções possíveis fato resolve o
problemas? resolver? para esse problema? problema?

✴ Métodos e Processos 1. Matriz CSD

Certezas suposições e dúvidas.
2. Entrevistas
• Double Diamond Estruturada, semi estruturada
ou livre.
• Imersão
3. Pesquisa Quantitativa
• Definição
Dados numéricos e demográ cos.
• Ideação
4. Pesquisa Qualitativa
• Prototipação Dados mais profundos e complexos.

fi


2. Entrevistas
ou livre.
• Imersão
• Definição
• Ideação

fi


2. Entrevistas
ou livre.
• Imersão
• Definição
• Ideação

fi


2. Entrevistas
ou livre.
• Imersão
• Definição
• Ideação

fi

✴ Métodos e Processos 1. Mapa de Empatia

O que o usuário ouve, vê, sente, fala,
• O que é um problema? pensa e faz.
• Double Diamond 2. 5W2H

O quê, como, porquê, quem, onde,
• Imersão quanto e quando.
• Definição 3. Card Sorting

Agrupamento da pesquisa por similares.
• Ideação
• Prototipação 4. Persona
Construção do usuário que vai
usar seu produto.




• Ideação
usar seu produto.




• Ideação
usar seu produto.




• Ideação
usar seu produto.

✴ Métodos e Processos 1. Brainstorming

Toró de ideias de forma livre e sem
• O que é um problema? julgamentos.
• Double Diamond 2. Crazy Eight

Técnica pra geração rápida de
• Imersão alternativas.
• Definição 3. Benchmarking
Pesquisa de projetos similares.
• Ideação
• Prototipação 4. Moodboard
Agrupamento visual da ideia do projeto.



• Ideação



• Ideação



• Ideação

✴ Métodos e Processos 1. Wireframing

Criação de protótipos: versão
• O que é um problema? simulada ou amostra do produto nal.
• Double Diamond 2. Navegação

Protótipos que são clicáveis e
• Imersão podem mostrar uxo e usabilidade.
• Definição 3. Testes de Conceito

Con rmação do valor e ideia do produto.
• Ideação
• Prototipação 4. Teste de Usabilidade

Con rmação da boa navegação, se os
usuários conseguem usar de forma intuitiva.
fi
fi

fl

fi



• Ideação

fi
fi

fl

fi



• Ideação

fi
fi

fl

fi



• Ideação

fi
fi

fl

fi
2
O que é UI?
Composição visual, gestalt e interface
Ana & Taci
Aulinha
Aulinha linda
linda
preparada
preparada por
por
Ana Taci
UX-UI & Research UX-UI & Ilustradora
@ana.carolina.s.costa @tacila_evangelista

2 O que é UI?
UI User Interface
Facilitar e melhorar a interação e experiência dos usuários  
com os sistemas focado na sua aparência e forma.
- UI User Interface
- Composição visual
- Gestalt e interfaces INTER
FACE
USUÁRIO SOFTWARE

2 O que é UI?
UI User Interface
Principais elementos de uma interface:
- Tipografia
- Cores
- UI User Interface
- Composição visual - Botões
- Gestalt e interfaces
- Ícones

2 O que é UI?
Composição visual
Processo de organização de elementos visuais
de forma equilibrada guia o espectador.  
Exemplos:
- UI User Interface - Pintura

- Composição visual - Escultura
- Grafite
- Cartazes
- Outros

2 O que é UI?
Gestalt e interfaces
Estudo da percepção humana em

relação as formas e padrões de
comportamento visual.
- UI User Interface
No design a comunicação
ocorre por composições
visuais.
􀌭

2 O que é UI?
1. Proximidade 5. Segregação
2. Semelhança 6. Unidade
- UI User Interface
3. Continuidade 7. Fechamento
- Gestalt e interfaces 4. Pregnância 8. Figura Fundo

2 O que é UI?
1. Proximidade
Elementos próximos tendem a
formar uma unidade.
- UI User Interface

2 O que é UI?
2. Semelhança
Objetos semelhantes se agrupam (cor,
forma, tamanho, textura, etc) entre si.
- UI User Interface

2 O que é UI?
3. Continuidade
Nosso sistema adiciona informações a fim
de perceber o objeto com continuidade.
- UI User Interface

2 O que é UI?
4. Pregnância
Os objetos são registrados da forma mais
simples pelo nosso cérebro.
- UI User Interface Quanto mais simples é uma figura, mais

fácil ela será lembrada.

2 O que é UI?
5. Segregação
Nosso cérebro percebe, identifica, separa
e destaca informações dentro de uma
composição.
- UI User Interface
Hierarquia entre os elementos da UI.

2 O que é UI?
6. Unidade
Um elemento se encerra nele mesmo,
ou vários elementos podem ser
percebidos como um todo.
- UI User Interface
São relações de igualdade ou
- Composição visual semelhança de estímulos produzidos
pelo campo visual do objeto.

2 O que é UI?
7. Fechamento
São forças de organização, de forma
que se dirigem espontaneamente
para uma ordem espacial, para
- UI User Interface formação de unidades.
- Composição visual Nas formas interrompidas realizamos

o preenchimento visual das lacunas.

2 O que é UI?
8. Figura Fundo
Refere-se a relação entre os elementos do
espaço positivo e do espaço negativo.
- UI User Interface A ideia é que o olho separe a “figura

completa” do fundo para o processo de
- Composição visual cognição. É um dos primeiros aspectos que
as pessoas observam em uma composição.

3
Heurísticas
Top 10 heurísticas de usabilidade do Nielsen
Barbs & Malu

Aulinha
Aulinha linda
linda
preparada
preparada por
por
Barbra Malu
UX/UI Designer UX/UI Designer
3 Heurísticas
Eficiência e eficácia
Ser e caz, quer dizer que você conseguiu atingir um objetivo
da melhor forma.
Ser e ciente, quer dizer que você conseguiu atingir o

- Eficiência x eficácia objetivo.
- O que são heurísticas?

- 10 heurísticas de Nielsen
Dá pra ser e ciente sem ser e caz
- Exemplos
- Outras Leis para
conhecer
fi
fi

fi

fi
3 Heurísticas
10 heurísticas de Nielsen
São regras gerais desenvolvidas por Nielsen em colaboração com
Rolf Molich em 1990 para desenvolver uma maneira de encontrar a
maior parte dos problemas de interface sem precisar realizar longos
testes.
- Eficiência x eficácia
- 10 heurísticas de
Nielsen
Jakob Nielsen e suas heurísticas
- Exemplos
“Even the best designers produce successful products only if
- Outras Leis para their designs solve the right problems. A wonderful interface to
conhecer the wrong features will fail.”
Nielsen

3 Heurísticas
1. Visibilidade do status do sistema
Informar a usuária qual ambiente ela está,
estava e para onde ela poderá ir.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
2. Compatibilidade entre o sistema e o mundo real
Utilize convenções que já existem no mundo real
e que pareçam lógicas e naturais.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
3. Controle da usuária e liberdade
Crie “saídas de emergência” no seu sistema para que a
usuária possa desfazer ações indesejadas.
Liberdade para fazer e desfazer.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
4. Consistência e padronização
A usuária deve saber quando diferentes elementos
significam a mesma coisa ou fazer parte de um grupo.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
5. Prevenção de erros
Previna deslizes e enganos e ofereça sugestões e
confirmação de ações importantes dentro do sistema.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
6. Reconhecimento ao invés de memorização
Oferecer as usuárias elementos que sejam possíveis de reconhecer.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
7. Eficiência e flexibilidade de uso
Permita que as usuárias personalizem ações frequentes e
atenda tanto usuários experientes, como novatos.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
8. Estética e design minimalista
Mantenha apenas as informações que são realmente
necessárias, evitando elementos desnecessários ou
que possam estar em segundo plano.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
9. Ajude as usuárias a reconhecerem e se
recuperarem de erros
Permita que a usuária tenha como reparar um erro.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
10. Ajuda e documentação
O sistema deve funcionar sem documentação, mas
deve prover ajuda para a usuária caso ela precise.
Nielsen
- Exemplos
- Outras Leis para
conhecer

3 Heurísticas
Outras leis para conhecer
Facilitar e melhorar a interação e experiência dos usuários  
com os sistemas focado na sua aparência e forma
lawsofux.com
101 - Introduction to Usability
Nielsen
- Exemplos
- Outras leis para
conhecer

4
Acessibilidade
7 princípios do design universal e Inclusão
Deborah & Larissa
Deborah Larissa
UX-UI Designer Mestranda e Designer
@deh_eberle @laripaschoalin
4 O que é Deficiência?
Limitação do Indivíduo ou da Sociedade?
"A de ciência é entendida "Ser cego não é uma tragédia.

como uma limitação do Mas um estilo de vida possível
- O que é Deficiência? indivíduo, para um modelo dos homens. E como um estilo
social mais abrangente..." de vida, necessita de
- O que é Acessibilidade? condições favoráveis para
Ministério Público do Paraná
- 7 princípios do design levar adiante, com autonomia."
universal Jorge Luís Borges
- Exemplos
- Inclusão
fi

4 O que é Acessibilidade?
Geral
Possibilidade de utilização, com segurança e autonomia, de
espaços, tecnologias, equipamentos urbanos, transporte,
comunicação e todos os demais serviços e instalações abertos
ao público por todas as pessoas, principalmente as com
de ciência ou mobilidade reduzida.
- O que é Deficiência?
Digital
- O que é Acessibilidade?
Sites, aplicativos, ferramentas e tecnologias projetadas e
- 7 princípios do design desenvolvidas para que pessoas com de ciência possam usá-los.
universal Mais especi camente possam: perceber, entender, navegar,
interagir e contribuir com a web.
- Exemplos
- Inclusão
Indo além:
WCAG - Diretrizes de
Acessibilidade web
fi
fi

fi

4 O que é Acessibilidade?
Interface apenas
com textos sem
contraste Assistência
- O que é Deficiência? por áudio
- 7 princípios do design
Erro de digitação
universal
que con gura
voto nulo Teclas
- Exemplos Analógicas
e com Braile
- Inclusão
fi

4 7 princípios do design universal
1. Uso equitativo
Design Universal
Ser utilizável e comercializável para pessoas diversas
Ronald Mace, fundador
do The Center for
2. Flexibilidade de Uso Universal Design
Projetar uma experiência adaptável e/ou customizável
3. Uso Simples e Intuitivo

Reduzir a complexidade e carga cognitiva
4. Informação Perceptível
Usar vários modos de comunicar
universal 5. Tolerância a Erros
Minimizar os riscos de ações acidentais e advertir dessas possibilidades
- Exemplos
6. Baixo Esforço Físico
- Inclusão Ser usado confortável e e cientemente com o mínimo de fadiga
7. Tamanho e Espaço para Acesso de Uso

Fornecer espaço para aproximação, uso, alcance e manipulação

fi

1. Uso equitativo
2. Flexibilidade de Uso

- Exemplos


fi

1. Uso equitativo

- Exemplos


fi

1. Uso equitativo

- Exemplos


fi

1. Uso equitativo

- Exemplos


fi

1. Uso equitativo

- Exemplos


fi

1. Uso equitativo

- Exemplos


fi

1. Uso equitativo

- Exemplos


fi

4 Exemplos
Interface apenas
com textos sem
Assistência
contraste
por áudio
4. Informação 2. Flexibilidade
Perceptível de Uso
- O que é Acessibilidade? Erro de digitação
que con gura Teclas
- 7 princípios do design voto nulo Analógicas
universal 6. Baixo
5. Tolerância Braile
a Erros 1. Uso Esforço Físico
- Exemplos
equitativo
- Inclusão
fi

4 Exemplos Quais princípios encontramos aqui?
universal
- Exemplos
- Inclusão

4 Exemplos Quais princípios encontramos aqui?
universal
- Exemplos
5. Tolerância a Erros
- Inclusão

Apenas seguir regrinhas

faz das interfaces
totalmente acessíveis?
Não
4 Inclusão
Universal,
Inclusivo e
Acessível
universal Construir uma interface solidária
- Exemplos Se esforçar para explorar maneiras de servir as pessoas que
compõem um mercado consumidor mais diverso a cada dia. Isso
- Inclusão pode signi car diferentes soluções para diferentes grupos de
pessoas, ao invés de uma única versão que atenda a todos.
fi

VALEU

Aulao de Design

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aulao de Design

Enviado por

Direitos autorais:

Formatos disponíveis

Aulão de De a

1 O que é UX? Processos e métodos

2 O que é UI? Composição visual, gestalt e interface

3 Heurísticas Usabilidade de Nielsen

4 Acessibilidade Foco digital

✴ UX: User Experience

✴ UX: User Experience

✴ UX: User Experience

✴ UX: User Experience

✴ UX: User Experience

✴ UX: User Experience

✴ UX: User Experience

✴ UX: User Experience

Um problema exposto com

| Obstáculo que desa a a capacidade de solucionar de alguém.

• Prototipação 1. Saber o problema.

3. Agir com base nos dados coletados.

1 Métodos e Processos Para pesquisar mais sobre:

Imersão Definição Ideação Prototipação

Quais são e de Qual problema Quais são as A nossa solução de

✴ Métodos e Processos 1. Matriz CSD

✴ Métodos e Processos 1. Matriz CSD

✴ Métodos e Processos 1. Matriz CSD

✴ Métodos e Processos 1. Matriz CSD

✴ Métodos e Processos 1. Mapa de Empatia

• Double Diamond 2. 5W2H

• Definição 3. Card Sorting

✴ Métodos e Processos 1. Mapa de Empatia

• Double Diamond 2. 5W2H

• Definição 3. Card Sorting

✴ Métodos e Processos 1. Mapa de Empatia

• Double Diamond 2. 5W2H

• Definição 3. Card Sorting

✴ Métodos e Processos 1. Mapa de Empatia

• Double Diamond 2. 5W2H

• Definição 3. Card Sorting

✴ Métodos e Processos 1. Brainstorming

• Double Diamond 2. Crazy Eight

✴ Métodos e Processos 1. Brainstorming

• Double Diamond 2. Crazy Eight

✴ Métodos e Processos 1. Brainstorming

• Double Diamond 2. Crazy Eight

✴ Métodos e Processos 1. Brainstorming

• Double Diamond 2. Crazy Eight

✴ Métodos e Processos 1. Wireframing

• Double Diamond 2. Navegação

• Definição 3. Testes de Conceito

• Prototipação 4. Teste de Usabilidade

✴ Métodos e Processos 1. Wireframing

• Double Diamond 2. Navegação

• Definição 3. Testes de Conceito

• Prototipação 4. Teste de Usabilidade

✴ Métodos e Processos 1. Wireframing

• Double Diamond 2. Navegação

• Definição 3. Testes de Conceito

• Prototipação 4. Teste de Usabilidade

✴ Métodos e Processos 1. Wireframing

• Double Diamond 2. Navegação

• Definição 3. Testes de Conceito

• Prototipação 4. Teste de Usabilidade

- UI User Interface - Pintura

Estudo da percepção humana em

- UI User Interface Quanto mais simples é uma figura, mais