View
337
Download
0
Embed Size (px)
Citation preview
PROGRAMA:1. Contexto
2. Emergênciae redes
3. A coisa
4. Ideologias e
Tendências
5. Inteligência Artificial
6. Educação
7. Experiênciado usuário
8. Designde interação
9. Interfaces
10.Design de interfaces
11. Design thinking
12. Código
13. Games
14.Planejamento
estratégico
TRABALHO FINAL.Vamos discutir ideias:
Qual é o seu produto? O que ele faz?Por que deve ser inteligente/sensível?
MAPA MENTAL.Processo de ideação:
Diagrama usado para organizar ideias visualmente.
Criado em torno de um conceito inicial, em torno do
qual ideias associadas, palavrase 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?
OBJETIVOS:Confusão de
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.
GRÁFICO:Projeto
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.
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&ust=1406830683992231MOOD BOARDS
Como são as referências visuais de sua persona?
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&ust=1406830683992231PERCEPÇÃO: GESTALT
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.
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&ust=1406830683992231EMERGÊNCIA
O objeto aparece por inteiro,depois identificamos suas partes.
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&ust=1406830683992231EMERGÊNCIA
Ao contrário de um texto escrito, não se vê pedaços da
imagem aos poucos compondo o todo.
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&ust=1406830683992231REIFICAÇÃO
A forma é construída pelos espaços vazios.
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&ust=1406830683992231REIFICAÇÃO
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.
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&ust=1406830683992231
PERCEPÇÃOMULTI-ESTÁVEL
A percepção oscila entre formas ambíguas,permitindo várias interpretações.
Pense nos quadros do M. C. Escher.
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&ust=1406830683992231
PERCEPÇÃOMULTI-ESTÁVEL
A visão “não para” em um lugar. Todos os lugares
são interessantes: o rosto, o nome, o fundo.
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&ust=1406830683992231INVARIÂNCIA
Formas são reconhecidaspouco importa seu tamanho, distorção ou escala.
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&ust=1406830683992231INVARIÂNCIA
As letras são reconhecidas e podem ser lidas,
pouco importa seu tamanho, distorção ou escala.
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&ust=1406830683992231FECHAMENTO
Tendemos a “completar” a figura,ligando áreas similares
para fechar espaços próximos.
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&ust=1406830683992231FECHAMENTO
É fácil ver as bochechas, a língua.
É o mesmo princípio que permite compreender
formas feitas de linhas pontilhadas.
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&ust=1406830683992231SIMILARIDADE
Agrupamos elementos parecidos instintivamente.
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&ust=1406830683992231SIMILARIDADE
Por mais que você tente evitar, o rosto se destaca
do fundo, mesmo sendo da mesma cor.
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&ust=1406830683992231PROXIMIDADEElementos próximos
são considerados partes de um mesmo grupo.
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&ust=1406830683992231PROXIMIDADE
Elementos próximos são considerados partes de
um mesmo grupo.
Por isso os dados do cartaz têm de estar próximos.
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&ust=1406830683992231SIMETRIA
Imagens simétricas são vistas como partesde um mesmo grupo, pouco importa sua distância.
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&ust=1406830683992231SIMETRIA
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.
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&ust=1406830683992231CONTINUIDADE
Padrões são vistos como contínuos,mesmo que se interrompam.
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&ust=1406830683992231CONTINUIDADE
É o que nos faz ver a “pele” do sr. Brown como algo
contínuo, mesmo com todos os “buracos” das letras.
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&ust=1406830683992231DESTINO COMUM
Elementos em uma mesma direção são vistos como se estivessem em movimento.
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&ust=1406830683992231DESTINO COMUM
Elementos em uma mesma direção formam uma unidade, percebida na “explosão”
que acontece no fundo.
GESTALT:EMERGÊNCIA REIFICAÇÃO
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
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&ust=1406830683992231LOREM IPSUM
Texto falso ajuda a gestalt do wireframe.
http://www.lipsum.com
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&ust=1406830683992231UI KITS
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