CRP-5215-0420-2014-10

CRP-5215
COMUNICAÇÃO DIGITAL
E ENSINO
À DISTÂNCIA.
Aula 10: Design de interfaces.

CRP-0420:
COMUNICAÇÃO
DIGITAL.
Aula 10: Design de interfaces.

PROGRAMA:
1. Contexto
2. Emergência
e redes
3. A coisa
4. Ideologias e
Tendências
5. Inteligência Artificial
6. Educação
7. Experiência
do usuário
8. Design
de interação
9. Interfaces
10.Design de interfaces
11. Design thinking
12. Código
13. Games
14.Planejamento
estratégico

Vamos discutir ideias:
TRABALHO FINAL.
Qual é o seu produto? O que ele faz?
Por que deve ser inteligente/sensível?

Processo de ideação:
MAPA MENTAL.
Diagrama usado para organizar ideias visualmente.
Criado em torno de um conceito inicial, em torno do
qual ideias associadas, palavras
e imagens são associadas.
As ideias principais são conectadas ao conceito central,
outras derivam delas.

Pontos de
ACESSO:
• Cada elemento da interface - imagem, texto,
cabeçalho, ícone, link - é um ponto de acesso a
novas informações.
• O usuário não precisa saber o que o texto vai
dizer, o que a barra de navegação conterá, ou
o que os gráficos dirão.
• Cada elemento requer debate e exploração
• Que novas funcionalidades podem expandir o
produto e seus serviços?

Confusão de
OBJETIVOS:
Procure identificar claramente a função e os
objetivos de cada elemento, diminuindo o
esforço de reconhecimento pelo usuário.

Estruturas bem
PLANEJADAS:
• Ajudam o layout a concentrar a atenção de seus
usuários em um ponto específico
• Estimulam e facilitam a conversão
• Determinam a posição de links, barras de
navegação e elementos de conteúdo.
• Podem identificar inconsistências e falhas na
estrutura de interação.

Questões para o
DESIGN:
• Quem usará o produto?
• Quais são as principais tarefas?
• Que tecnologia de comunicação será utilizada?
• Há alguma limitação a considerar?
• Por que usar o produto e seu painel de
controle em um lugar e não em outro?
• Como estimular o uso?
• Como dar suporte?

Questões para o
REDESIGN:
• Onde pega? Quais são as características ou
complexidades existentes que prejudicam ou
atrapalham a experiência do usuário?
• Quais são as características adicionais que o
usuário gostaria de ver?
• Que novas funcionalidades podem expandir o
produto e seus serviços?
• Há problemas de compatibilidade ou
restrições de uso?

Identifique os elementos
PRINCIPAIS:
• Comece a estrutura pelos elementos mais
importantes para a experiência do usuário.
• Qual é sua principal finalidade?
• Como garantir que esteja visível e seja fácil de
encontrar?
• O que se espera que ele faça depois de atingir
seu objetivo?
• Como tornar clara a ação?
• Essa divisão deve ser feita por persona.

Foco na
COMUNICAÇÃO:
• Interfaces são muito variáveis.
• É importante evidenciar os pontos mais
importantes e como chegar a eles.
• Apresente os elementos mais importantes em um
ponto visível para que não seja preciso usar
múltiplas telas ou barras de rolagem.
• Nunca deixe que a estrutura se sobreponha ao
conteúdo.
• Sempre que possível, conduza a ação.

Projeto
GRÁFICO:
Reproduza elementos usados em todo o
site na mesma posição, para que não
“pulem” quando se troca de página.
Cuidado com elementos flutuantes.

O espaço em
BRANCO
facilita a compreensão.

http://www.google.com.br/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&docid=_drQP5Vo8ilLpM&
tbnid=4ioKWlxpf3DKaM:&ved=0CAUQjRw&url=http%3A%2F
%2F981theriver.com%2Fhand-picked
%2F&ei=4zbZU8i8JpHgsASRy4HgDA&bvm=bv.
71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA
MO&OustD=14 0B683O068A399R223D1 S
Como são as referências visuais de sua persona?

PERCEP&usÇt=1Ã406O830:6 8G399E223S1 TALT
Organização entre elementos.
Figuras fortes são estáveis.

PSICOLOGIA GESTALT (FORMA EM ALEMÃO)
• Busca entender os princípios da capacidade de adquirir e
manter percepções significativas em um mundo caótico.
• Para a Gestalt, percepções são produtos de interações
complexas entre vários estímulos. O efeito gestalt é a
capacidade do cérebro de gerar padrões a partir de
elementos independentes.
• A mente absorve um todo, e tem tendências de auto-organização.
Primeiro consideramos objetos por inteiro,
depois identificamos suas partes.
• O conjunto é diferente da soma de suas partes.

PERCEPÇÃO: GESTALT
• Figuras fortes são estáveis – certas figuras são mais
resistentes e estáveis. São formas neutras, normalmente
simples, regulares, simétricas e fechadas, com um
contorno regular e visível.
• Organização entre elementos – por sua arrumação e
hierarquia: “parabéns a você,I Feel Good”.Assim que
reconhecemos cadeiras dos materiais mais estranhos.
CAPTCHA funciona assim.

EM&uEst=R140G683Ê06N839C922I31A
O objeto aparece por inteiro,
depois identificamos suas partes.

EM&uEst=R140G683Ê06N839C922I31A
Ao contrário de um texto escrito, não se vê pedaços da
imagem aos poucos compondo o todo.

RE&uIstF=1I40C683A068Ç39Ã9223O1
A forma é construída pelos espaços vazios.

RE&uIstF=1I40C683A068Ç39Ã9223O1
O rosto é construído pelos traços que se formam nos
espaços entre as linhas e letras (repare a franja).
Espaços vazios dão suporte para os outros elementos.

PERCEPÇÃO
MULTI-ESTÁVEL
&ust=1406830683992231
A percepção oscila entre formas ambíguas,
permitindo várias interpretações.
Pense nos quadros do M. C. Escher.

PERCEPÇÃO
MULTI-ESTÁVEL
&ust=1406830683992231
A visão “não para” em um lugar. Todos os lugares
são interessantes: o rosto, o nome, o fundo.

INV&usAt=1R406I83Â068N399C223I1A
Formas são reconhecidas
pouco importa seu tamanho, distorção ou escala.

INV&usAt=1R406I83Â068N399C223I1A
As letras são reconhecidas e podem ser lidas,
pouco importa seu tamanho, distorção ou escala.

FE&CusHt=14A068M306E839N922T31O
Tendemos a “completar” a figura,
ligando áreas similares
para fechar espaços próximos.

FE&CusHt=14A068M306E839N922T31O
É fácil ver as bochechas, a língua.
É o mesmo princípio que permite compreender
formas feitas de linhas pontilhadas.

SIM&uIsLt=1A406R830I6D839A922D31 E
Agrupamos elementos parecidos instintivamente.

SIM&uIsLt=1A406R830I6D839A922D31 E
Por mais que você tente evitar, o rosto se destaca
do fundo, mesmo sendo da mesma cor.

PR&OustX=14I0M6830I6D839A922D31E
Elementos próximos
são considerados partes de um mesmo grupo.

PR&OustX=14I0M6830I6D839A922D31E
Elementos próximos são considerados partes de
um mesmo grupo.
Por isso os dados do cartaz têm de estar próximos.

S&uIstM=14E068T306R83I99A2231
Imagens simétricas são vistas como partes
de um mesmo grupo, pouco importa sua distância.

S&uIstM=14E068T306R83I99A2231
Imagens simétricas são vistas como parte de um
mesmo grupo, pouco importa sua distância.
É o que forma o fundo - e o separa do rosto.

CON&usTt=1I4N068U306I8D399A223D1 E
Padrões são vistos como contínuos,
mesmo que se interrompam.

CON&usTt=1I4N068U306I8D399A223D1 E
É o que nos faz ver a “pele” do sr. Brown como algo
contínuo, mesmo com todos os “buracos” das letras.

DEST&usIt=N14O0683 0C683O992M231UM
Elementos em uma mesma direção
são vistos como se estivessem em movimento.

DEST&usIt=N14O0683 0C683O992M231UM
Elementos em uma mesma direção
formam uma unidade, percebida na “explosão”
que acontece no fundo.

EMERGÊNCIA REIFICAÇÃO
GESTALT:
PERCEPÇÃO MULTI-ESTÁVEL
INVARIÂNCIA FECHAMENTO
SIMILARIDADE PROXIMIDADE SIMETRIA
CONTINUIDADE DESTINO COMUM

GESTALT:
• EMERGÊNCIA - o rosto aparece inteiro
• REIFICAÇÃO - ele é construído pelos traços formados nos
espaços “vazios”
• PERCEPÇÃO MULTI-ESTÁVEL - a visão “não para”
• INVARIÂNCIA - letras podem ser lidas, mesmo deformadas
• FECHAMENTO - “completamos” a figura,
• SIMILARIDADE - elementos parecidos formam um grupo
• PROXIMIDADE - elementos próximos formam um grupo
• SIMETRIA - imagens simétricas formam um grupo
• CONTINUIDADE - padrões formam contínuos
• DESTINO COMUM - elementos na mesma direção parecem
ter movimento

Três atributos da
COR:
tom, saturação e brilho.

LO&RustE=14M068 3I06P83S992U231M
Texto falso ajuda a gestalt do wireframe.
http://www.lipsum.com

&uUst=1I4 0K683I0T683S992231
Ajudam a compor o layout

TRABALHO FINAL:
Equipamento de Internet das coisas,
acompanhado de painel de controle para
iPad + resposta ao questionário.

QUESTIONÁRIO:
1. Descrição do produto
• Em que rede ele se encaixa? Que necessidade supre?
Descreva o modelo mental de seu usuário.
2. Ele usa recursos de Inteligência Artificial? Como e quando?
3. Descreva um mínimo de 3 Personas, com jornadas de usuário.
4. Como é a curva de aprendizado (iniciante a expert) por persona?
5. Que interface(s) o produto usa? Quando e como?
6. Como se comunica com outras máquinas sem intervenção humana?
7. Wireframe do painel de controle, descritivo.
8. Mood Board do painel de controle
9. Descrição do objeto + foto de algo parecido
10. Planejamento estratégico simplificado

QUESTIONÁRIO:
1. Descrição do produto
• Em que rede ele se encaixa? Que necessidade supre?
Descreva o modelo mental de seu usuário.
2. Qual é sua função didática? Como se adaptaria ao sistema atual?
3. Descreva um mínimo de 3 Personas, com jornadas de usuário.
4. Como é a curva de aprendizado (iniciante a expert) por persona?
5. Que interface(s) o produto usa? Quando e como?
6. Como se comunica com outras máquinas sem intervenção humana?
7. Wireframe do painel de controle, descritivo.
8. Mood Board do painel de controle
9. Descrição do objeto + foto de algo parecido
10. Planejamento estratégico simplificado

CRP-5215-0420-2014-10

Mais conteúdo relacionado

Destaque

Semelhante a CRP-5215-0420-2014-10

Mais de Aulas LULI: CRP-0357, CRP-0422 e CRP-0420

Último

CRP-5215-0420-2014-10