CRP-5215-0420-2014-10

525 visualizações

Publicada em

Aula 10 de Comunicação Digital: Design de Interfaces.

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
525
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
33
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CRP-5215-0420-2014-10

  1. 1. CRP-5215 COMUNICAÇÃO DIGITAL E ENSINO À DISTÂNCIA. Aula 10: Design de interfaces.
  2. 2. CRP-0420: COMUNICAÇÃO DIGITAL. Aula 10: Design de interfaces.
  3. 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. 4. Vamos discutir ideias: TRABALHO FINAL. Qual é o seu produto? O que ele faz? Por que deve ser inteligente/sensível?
  5. 5. 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.
  6. 6. 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?
  7. 7. WTF?
  8. 8. 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.
  9. 9. 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.
  10. 10. 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?
  11. 11. 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?
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. O espaço em BRANCO facilita a compreensão.
  16. 16. 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?
  17. 17. 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 PERCEP&usÇt=1Ã406O830:6 8G399E223S1 TALT Organização entre elementos. Figuras fortes são estáveis.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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 EM&uEst=R140G683Ê06N839C922I31A O objeto aparece por inteiro, depois identificamos suas partes.
  21. 21. 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 EM&uEst=R140G683Ê06N839C922I31A Ao contrário de um texto escrito, não se vê pedaços da imagem aos poucos compondo o todo.
  22. 22. 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 RE&uIstF=1I40C683A068Ç39Ã9223O1 A forma é construída pelos espaços vazios.
  23. 23. 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 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.
  24. 24. 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 PERCEPÇÃO MULTI-ESTÁVEL %2F&ei=4zbZU8i8JpHgsASRy4HgDA&bvm=bv. 71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA &ust=1406830683992231 A percepção oscila entre formas ambíguas, permitindo várias interpretações. Pense nos quadros do M. C. Escher.
  25. 25. 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 PERCEPÇÃO MULTI-ESTÁVEL %2F&ei=4zbZU8i8JpHgsASRy4HgDA&bvm=bv. 71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA &ust=1406830683992231 A visão “não para” em um lugar. Todos os lugares são interessantes: o rosto, o nome, o fundo.
  26. 26. 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 INV&usAt=1R406I83Â068N399C223I1A Formas são reconhecidas pouco importa seu tamanho, distorção ou escala.
  27. 27. 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 INV&usAt=1R406I83Â068N399C223I1A As letras são reconhecidas e podem ser lidas, pouco importa seu tamanho, distorção ou escala.
  28. 28. 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 FE&CusHt=14A068M306E839N922T31O Tendemos a “completar” a figura, ligando áreas similares para fechar espaços próximos.
  29. 29. 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 FE&CusHt=14A068M306E839N922T31O É fácil ver as bochechas, a língua. É o mesmo princípio que permite compreender formas feitas de linhas pontilhadas.
  30. 30. 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 SIM&uIsLt=1A406R830I6D839A922D31 E Agrupamos elementos parecidos instintivamente.
  31. 31. 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 SIM&uIsLt=1A406R830I6D839A922D31 E Por mais que você tente evitar, o rosto se destaca do fundo, mesmo sendo da mesma cor.
  32. 32. 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 PR&OustX=14I0M6830I6D839A922D31E Elementos próximos são considerados partes de um mesmo grupo.
  33. 33. 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 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.
  34. 34. 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 S&uIstM=14E068T306R83I99A2231 Imagens simétricas são vistas como partes de um mesmo grupo, pouco importa sua distância.
  35. 35. 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 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.
  36. 36. 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 CON&usTt=1I4N068U306I8D399A223D1 E Padrões são vistos como contínuos, mesmo que se interrompam.
  37. 37. 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 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.
  38. 38. 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 DEST&usIt=N14O0683 0C683O992M231UM Elementos em uma mesma direção são vistos como se estivessem em movimento.
  39. 39. 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 DEST&usIt=N14O0683 0C683O992M231UM Elementos em uma mesma direção formam uma unidade, percebida na “explosão” que acontece no fundo.
  40. 40. EMERGÊNCIA REIFICAÇÃO GESTALT: PERCEPÇÃO MULTI-ESTÁVEL INVARIÂNCIA FECHAMENTO SIMILARIDADE PROXIMIDADE SIMETRIA CONTINUIDADE DESTINO COMUM
  41. 41. 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
  42. 42. Três atributos da COR: tom, saturação e brilho.
  43. 43. 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 LO&RustE=14M068 3I06P83S992U231M Texto falso ajuda a gestalt do wireframe. http://www.lipsum.com
  44. 44. 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 &uUst=1I4 0K683I0T683S992231 Ajudam a compor o layout
  45. 45. FIM
  46. 46. TRABALHO FINAL: Equipamento de Internet das coisas, acompanhado de painel de controle para iPad + resposta ao questionário.
  47. 47. 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
  48. 48. 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

×