O documento discute conceitos de design de interfaces como: 1) a percepção gestalt e como formas são reconhecidas independente de tamanho ou escala; 2) a percepção multi-estável e como formas podem ter múltiplas interpretações; 3) como os espaços vazios constroem a forma e objetos são reconhecidos como um todo antes de suas partes.
3. 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
4. Vamos discutir ideias:
TRABALHO FINAL.
Qual é o seu produto? O que ele faz?
Por que deve ser inteligente/sensível?
5.
6. 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.
7.
8.
9.
10. 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?
12. 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.
13.
14.
15.
16. 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.
17.
18. 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?
19.
20.
21.
22.
23. 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?
24.
25.
26.
27.
28.
29.
30. 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.
31.
32.
33.
34.
35.
36. 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.
37.
38.
39.
40. 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.
63. 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.
64.
65.
66.
67.
68.
69. 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.
141. 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
172. TRABALHO FINAL:
Equipamento de Internet das coisas,
acompanhado de painel de controle para
iPad + resposta ao questionário.
173. 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
174. 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