1.
COMUNICAÇÃO
DIGITAL.
CRP-0420:
AULA 12: DESIGN DE INTERAÇÃO.

2.
REQUISITOS:
DO QUE O PRODUTO
PRECISA?
• DADOS INFORMAÇÕES QUE CIRCULARÃO PELO
SISTEMA. INPUTS E OUTPUTS;
• FUNCIONALIDADES OPERAÇÕES E AÇÕES;
• MERCADO CRONOGRAMA, LEGISLAÇÃO ETC;
• EXPERIÊNCIA VALORES DA ORGANIZAÇÃO;
• APRENDIZADO CURVA E PRÉ-REQUISITOS; E
• TÉCNICA PLATAFORMAS E TECNOLOGIAS.

3.
ESFORÇO
DESNECESSÁRIO
MUITAS VEZES NÃO NOS DAMOS CONTA DELE.
• IR DE UMA JANELA A OUTRA, POSICIONÁ-LAS E
REDIMENSIONÁ-LAS; CLICAR EM BOTÕES;
• PREEENCHER FORMULÁRIOS DESNECESSÁRIOS;
• CONFIRMAR AÇÕES;
• LEMBRAR QUE NOME SEUS ARQUIVOS TÊM
E AONDE ESTÃO; E
• REDEFINIR DADOS PESSOAIS OU PREFERÊNCIAS.

4.
MENOS = MAIS
ESFORÇO EFICIÊNCIA

5.
Ladrões de
EFICIÊNCIA:
• COGNIÇÃO COMPREENSÃO DA ESTRUTURA DO
PRODUTO E SEU FUNCIONAMENTO.
• MEMÓRIA LEMBRAR FUNÇÕES, SENHAS, POSIÇÃO
DE OBJETOS, METÁFORAS, CAMINHOS.
• ESFORÇO VISUAL DESCOBRIR HIERARQUIA E
SIGNIFICADO DOS OBJETOS MOSTRADOS.
• ESFORÇO FÍSICO TECLAS, GESTUAIS, MOVIMENTO
DE MOUSE, NÚMERO DE CLIQUES.

6.
Navegação é esforço
DESNECESSÁRIO.
• ENTRE JANELAS, VISUALIZAÇÕES E PÁGINAS;
• ENTRE PARTES DE UMA JANELA OU PÁGINA;
• ENTRE FERRAMENTAS, COMANDOS E MENUS; E
• DENTRO DE PARTES DA INFORMAÇÃO:
• ZOOM
• ROLAGEM
• LINKS

7.
Melhorando a
NAVEGAÇÃO:
• REDUZIR O NÚMERO DE LUGARES A IR.
• MOSTRAR SINALIZAÇÃO CLARA.
• MOSTRAR VISÕES AMPLAS E GERAIS.
• MAPEAR CONTROLES, FUNÇÕES E ÁREAS.
• SE ADEQUAR ÀS NECESSIDADES DO USUÁRIO;.
• COLOCAR AS FUNÇÕES MAIS ÚTEIS E DESEJADAS
EM LOCAIS CONVENIENTES E PRÓXIMOS.
• EVITAR HIERARQUIAS.

8.
INTERFACES

9.
FÍSICAS
NOVAS INTERFACES
DEMANDAM NOVAS EXPRESSÕES
IDIOMÁTICAS.

10.
DADOS.
OBJETOS FÍSICOS SE TRANSFORMAM
EM OBJETOS DE

11.
AVATARES DIGITAIS,
OBJETOS FÍSICOS AGORA TEM
OU SEJA, TEM PERSONALIDADES.

12.
EXPERIÊNCIA
COMO SE DETERMINA A
DO USUÁRIO EM OBJETOS FÍSICOS?

13.
CASEIRA
AUTOMAÇÃO
AJUDA OU ATRAPALHA?

14.
CONTINUIDADE.
UM PROBLEMA DE
COMO DIVIDIR AÇÕES ENTRE
DISPOSITIVOS
SE MAL CONSEGUIMOS COMPARTILHAR
CONTEÚDOS ENTRE ELES?

15.
ABISMO
COMO FAZER PARA TRANSPOR O
ENTRE DOIS EQUIPAMENTOS?

16.
LIMITAM
TELAS NOS
E SE TORNARAM A MAIOR PARTE DO
COMPUTADOR.

17.
MÁQUINA
COMO MEDIAR A CONVERSA QUANDO UMA
FALA COM OUTRA MÁQUINA?

18.
TRANSPARENTE
A TRANSIÇÃO DEVE SER
SENÃO SERÁ EXAUSTIVA.

19.
PESSOAS,
O DESIGN DEVE SER FEITO PARA SER
USADO POR
NÃO TELAS.

20.
MOUSE?
PERGUNTA ERRADA: COMO FAZER O
PRODUTO SE COMPORTAR COMO UM
OU COM OS SISTEMAS QUE JÁ
CONHECEMOS?

21.
ESCALÁVEL
SOFTWARE TORNA O HARDWARE
SE FOR POTENCIALIZADO POR SEU
USUÁRIO.

22.
IMAGINAÇÃO,
O MAIOR DESAFIO É DE
NÃO DE CONHECIMENTO.

23.
INVENTAR
A MELHOR MANEIRA DE
É BRINCAR.
OS MELHORES BRINQUEDOS E JOGOS
SÃO POUCO FAMILIARES.

24.
IMAGINAÇÃO.
BRINQUEDOS SÃO AVATARES DA
ELES PRECISAM EVOLUIR COM SEUS
DONOS

25.
INTERAÇÃO HUMANO-COMPUTADOR OU
HCI:
• PLANEJAMENTO E CONCEPÇÃO DE FORMAS DE
INTERAÇÃO ENTRE PESSOAS E COMPUTADORES.
• INTERSECÇÃO DE COMPUTAÇÃO, CIÊNCIAS DO
COMPORTAMENTO, DESIGN E ESTUDOS DE MÍDIA.
• A META DE LONGO PRAZO DA HCI É PROJETAR
SISTEMAS QUE MINIMIZEM A BARREIRA ENTRE O
MODELO MENTAL DO USUÁRIO E A MÁQUINA.

26.
AVALIAÇÃO DE
INTERFACES:
• CLAREZA: EVITA AMBIGUIDADES
• CONCISÃO: USA POUCOS ELEMENTOS
• FAMILIARIDADE: PEQUENA CURVA DE APRENDIZADO
• FEEDBACK: OFERECE RESPOSTAS ADEQUADAS
• CONSISTÊNCIA: IDENTIFICA PADRÕES DE USO
• ESTÉTICA: TORNA A EXPERIÊNCIA AGRADÁVEL
• EFICIÊNCIA: ACELERA A REALIZAÇÃO DE TAREFAS
• TOLERÂNCIA: EVITA PUNIR USUÁRIOS POR SEUS
ERROS, FORNECE MEIOS PARA SANÁ-LOS.

27.
Tipos de
INTERFACES:
• GRAPHICAL USER INTERFACES (GUI) E WEB-BASED (WUI)
• TOUCHSCREENS E TOUCHPADS
• COMMAND LINE INTERFACES (CLI)
• GESTUAIS, HÁPTICAS E TANGÍVEIS
• INTERFACES DE ATENÇÃO
• INTERFACES MISTAS
• INTERFACES DE PROCESSOS
• AGENTES CONVERSACIONAIS
• ESPACIAIS - SAÍDAS DE LOJAS, MUSEUS
• GEOLOCALIZADAS
• RECONHECIMENTO DE VOZ E DE LINGUAGEM NATURAL

28.
GRAPHICAL USER
INTERFACES (GUI) E
WEB-BASED (WUI)
As mais populares, usadas em PCs, tablets e
smartphones. WUIs são geradas automaticamente,
como acontece com extratos bancários.

29.
TOUCHSCREENS E
TOUCHPADS
As comuns em tablets e smartphones. Touchpads
começam a substituir mouses por seu maior
conforto e precisão.

30.
COMMAND LINE
INTERFACES (CLI)
Linhas de comando, usadas para desenvolver código.

31.
GESTUAIS, HÁPTICAS E
TANGÍVEIS
Dependentes de gestos. Podem responder ao toque,
identificar movimentos ou responder a pressões.

32.
INTERFACES DE
ATENÇÃO
Chamam a sua atenção. Só devem ser usadas em
ocasiões importantes, senão serão irritantes.

33.
INTERFACES MISTAS
Comandos de diversos tipos,
usadas para operações complexas.

34.
INTERFACES DE
PROCESSOS
Pouco interativas. Avisam quando o processo acabou.

35.
AGENTES
CONVERSACIONAIS
De Clippy a Siri.

36.
ESPACIAIS
Determinam fronteiras. Usadas em museus e lojas.

37.
GEOLOCALIZADAS
Reorganizam suas coordenadas
de acordo com a posição do usuário.

38.
RECONHECIMENTO
DE VOZ E DE
LINGUAGEM NATURAL
Compreensão de comandos e frases comuns.

39.
PROTOTIPAÇÃO:
• REDUZ INTERPRETAÇÕES EQUIVOCADAS
• PROPORCIONA EXPERIÊNCIAS REAIS
• GERA NOVAS EXPERIÊNCIAS
• COMUNICA SEUS OBJETIVOS AO MOSTRAR E
CONTAR
• ECONOMIZA TEMPO, ESFORÇO E DINHEIRO
• FACILITA O FEEDBACK RÁPIDO
• REDUZ O RISCO

40.
Finalidades mais comuns de
PROTÓTIPOS:
• CRIAR COMUNICAÇÃO COMPARTILHADA
• TRABALHAR COM PROJETOS COMUNS
• VENDER IDEIAS INTERNAMENTE E PARA CLIENTES
• TESTAR INTERAÇÕES E USABILIDADE
• AFERIR DE VIABILIDADE TÉCNICA E VALOR

41.
Painéis de
CONTROLE:
• CONCENTRAM INFORMAÇÕES MAIS IMPORTANTES
• DEVEM FACILITAR A COMPREENSÃO,
MANIPULAÇÃO E CONTEXTO.
• DETERMINAM PRIORIDADES, CONSOLIDAM E
ORGANIZAM A INFORMAÇÃO EM UMA ÚNICA TELA,
PARA QUE SEJA FACILMENTE MONITORADA
• NEM TODA INFORMAÇÃO É QUANTIFICÁVEL

42.
Erros
COMUNS:
• EXCEDER OS LIMITES DE UMA TELA (SCROLL)
• FALTA DE CONTEXTO
• EXCESSO DE DETALHES
• MÍDIAS INADEQUADAS
• TELA CONGESTIONADA
• DECORAÇÃO INÚTIL
• MAU USO DE COR
• MÉTRICAS RUINS
• DADOS DESORGANIZADOS
• CODIFICAÇÃO IMPRECISA
Só esses elementos
são técnicos.

43.
Planejamento estrutural:
WIREFRAMES
• NÃO SÃO RASCUNHOS DO LAYOUT FINAL.
• COMO PLANTAS BAIXAS DE ARQUITETURA, SÃO
INTERMEDIÁRIOS ENTRE A TÉCNICA E A
COMUNICAÇÃO.
• CRIAM ARGUMENTOS RACIONAIS PARA A
DISCUSSÃO DO LAYOUT, AUMENTANDO A
USABILIDADE E CONSISTÊNCIA.
• COMEÇAM SIMPLES, SE TORNAM MAIS
DETALHADOS À MEDIDA QUE AUMENTA SUA
FUNCIONALIDADE.

44.
Construindo
WIREFRAMES:
1. DEIXE O OBJETIVO BEM CLARO
2.SEJA FUNCIONAL, NÃO BONITO
3.TENHA O MÍNIMO DE ELEMENTOS
4.DESENHE TODAS AS AÇÕES
5.ORGANIZE-O POR PERSONAS
6.PROCURE ELEMENTOS REPETITIVOS
7.TESTE HIERARQUIAS E SENTIDO

45.
http://www.google.com.br/url?
=i&rct=j&q=&esrc=s&source=images&cd=&docid=_drQP5Vo8ilL
tbnid=4ioKWlxpf3DKaM:&ved=0CAUQjRw&url=http%3A%2
%2F981theriver.com%2Fhand-picked
%2F&ei=4zbZU8i8JpHgsASRy4HgDA&bvm=bv.
778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFR
&ust=1406830683992231UI KITS
Ajudam a compor o layout

46.
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.

47.
VOCÊS

48.
TRABALHO FINAL:
REFLECONS
+
PROTÓTIPO

49.
TRABALHO FINAL:
REFLEXÃO 1: CONTEXTO
REFLEXÃO 2: A COISA E EMERGÊNCIA
REFLEXÃO 3: IDENTIDADE E TRANSUMANISMO
REFLEXÃO 4: BIG DATA, LIVRE ARBÍTRIO E ÉTICA
REFLEXÃO 5: EDUCAÇÃO
REFLEXÃO 6: INTELIGÊNCIA ARTIFICIAL
REFLEXÃO 7: TENDÊNCIAS
REFLEXÃO 8: GAMES
REFLEXÃO 9: EXCLUSÃO DIGITAL
REFLEXÃO 10: INTERFACES

50.
PROTÓTIPO:
MECÂNICA, DINÂMICA E ESTÉTICA
3 PERSONAS
1 EXEMPLO DE CENÁRIO
REQUISITOS
INTERFACE(S)
WIREFRAMES
JORNADA DO USUÁRIO
EFEITOS ESPERADOS

51.
PRÓXIMAS AULAS:
19/11: DEBATE DE IDEIAS
26/11: PECHA KUCHA 1
03/12: PECHA KUCHA 2

52.
PRAZOS:
25/11: PECHA KUCHA (TODOS)
20 TELAS EM JPG
OU 6’40” DE VÍDEO
07/12: REFLECONS

53.
PECHA KUCHA:
EM CASA,
COM BREJAS.

54.
FIM

55.
PALESTRAS TED:
JAMES PATTEN: THE BEST COMPUTER INTERFACE?
NICHOLAS NEGROPONTE: 30-YEAR HISTORY OF FUTURE
APARNA RAO: ART THAT CRAVES YOUR ATTENTION
SERGEY BRIN: WHY GOOGLE GLASS?
JOHN UNDERKOFFLER: POINTING TO THE FUTURE OF UI
JEFF HAN: PROMISE OF MULTI-TOUCH INTERFACE
DON NORMAN: 3 WAYS GOOD DESIGN MAKES YOU HAPPY
DENIS DUTTON: A DARWINIAN THEORY OF BEAUTY

56.
FICÇÃO
HALT AND CATCH FIRE - S01
MINORITY REPORT
IRON MAN
OBLIVION
CONTINUUM

57.
LEITURAS
ABOUT FACE 3 - CAPS 5 E 6
BRAVE NUI WORLD - CAPS 2 E 3
CHANGE BY DESIGN - CAPS 1 E 2
DESIGNING FOR EMOTION - CAPS 1, 2 E 3
EFFECTIVE UI - CAP 2
THE ELEMENTS OF USER EXPERIENCE - CAPS 1 E 2
THE INVISIBLE COMPUTER_ - CAPS 11 E 12
STORYTELLING FOR USER EXPERIENCE - CAPS 2 E 3
THE UX BOOK - CAPS 1, 2 E 3

58.
PENSADOR DO TEMA:
DON NORMAN - BIT.LY/CD10-1
DENIS DUTTON - BIT.LY/CD10-2