crp-5215-0420-2014-10

COMUNICAÇÃO DIGITAL E ENSINO

À DISTÂNCIA.

CRP-5215

Aula 10: Design de interfaces.

COMUNICAÇÃO DIGITAL.

CRP-0420:

Aula 10: Design de interfaces.

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.

BRANCOO espaço em

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&ust=1406830683992231MOOD BOARDS

Como são as referências visuais de sua persona?



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231EMERGÊNCIA

O objeto aparece por inteiro,depois identificamos suas partes.



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231REIFICAÇÃO

A forma é construída pelos espaços vazios.



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.



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.



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231INVARIÂNCIA

Formas são reconhecidaspouco importa seu tamanho, distorção ou escala.



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231FECHAMENTO

Tendemos a “completar” a figura,ligando áreas similares

para fechar espaços próximos.



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231SIMILARIDADE

Agrupamos elementos parecidos instintivamente.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231SIMILARIDADE

Por mais que você tente evitar, o rosto se destaca

do fundo, mesmo sendo da mesma cor.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231PROXIMIDADEElementos próximos

são considerados partes de um mesmo grupo.



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231SIMETRIA

Imagens simétricas são vistas como partesde um mesmo grupo, pouco importa sua distância.



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231CONTINUIDADE

Padrões são vistos como contínuos,mesmo que se interrompam.



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.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231DESTINO COMUM

Elementos em uma mesma direção são vistos como se estivessem em movimento.



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

COR:Três atributos da

tom, saturação e brilho.



71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231LOREM IPSUM

Texto falso ajuda a gestalt do wireframe.

http://www.lipsum.com

http://www.lipsum.com



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

crp-5215-0420-2014-10

Education