Aula CRP-0420-2015-12

1.097 visualizações

Publicada em

Aula 10 de Comunicação Digital: Interfaces.

Na apresentação está escrito #12. Ignore.

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

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

Nenhuma nota no slide

Aula CRP-0420-2015-12

  1. 1. COMUNICAÇÃO DIGITAL. CRP-0420: AULA 12: DESIGN DE INTERAÇÃO.
  2. 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. 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. 4. MENOS = MAIS ESFORÇO EFICIÊNCIA
  5. 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. 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. 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. 8. INTERFACES
  9. 9. FÍSICAS NOVAS INTERFACES DEMANDAM NOVAS EXPRESSÕES IDIOMÁTICAS.
  10. 10. DADOS. OBJETOS FÍSICOS SE TRANSFORMAM EM OBJETOS DE
  11. 11. AVATARES DIGITAIS, OBJETOS FÍSICOS AGORA TEM OU SEJA, TEM PERSONALIDADES.
  12. 12. EXPERIÊNCIA COMO SE DETERMINA A DO USUÁRIO EM OBJETOS FÍSICOS?
  13. 13. CASEIRA AUTOMAÇÃO AJUDA OU ATRAPALHA?
  14. 14. CONTINUIDADE. UM PROBLEMA DE COMO DIVIDIR AÇÕES ENTRE DISPOSITIVOS
 SE MAL CONSEGUIMOS COMPARTILHAR CONTEÚDOS ENTRE ELES?
  15. 15. ABISMO COMO FAZER PARA TRANSPOR O ENTRE DOIS EQUIPAMENTOS?
  16. 16. LIMITAM TELAS NOS E SE TORNARAM A MAIOR PARTE DO COMPUTADOR.
  17. 17. MÁQUINA COMO MEDIAR A CONVERSA QUANDO UMA FALA COM OUTRA MÁQUINA?
  18. 18. TRANSPARENTE A TRANSIÇÃO DEVE SER SENÃO SERÁ EXAUSTIVA.
  19. 19. PESSOAS, O DESIGN DEVE SER FEITO PARA SER USADO POR NÃO TELAS.
  20. 20. MOUSE? PERGUNTA ERRADA: COMO FAZER O PRODUTO SE COMPORTAR COMO UM OU COM OS SISTEMAS QUE JÁ CONHECEMOS?
  21. 21. ESCALÁVEL SOFTWARE TORNA O HARDWARE SE FOR POTENCIALIZADO POR SEU USUÁRIO.
  22. 22. IMAGINAÇÃO, O MAIOR DESAFIO É DE NÃO DE CONHECIMENTO.
  23. 23. INVENTAR A MELHOR MANEIRA DE É BRINCAR. OS MELHORES BRINQUEDOS E JOGOS
 SÃO POUCO FAMILIARES.
  24. 24. IMAGINAÇÃO. BRINQUEDOS SÃO AVATARES DA ELES PRECISAM EVOLUIR COM SEUS DONOS
  25. 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. 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. 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. 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. 29. TOUCHSCREENS E TOUCHPADS As comuns em tablets e smartphones. Touchpads começam a substituir mouses por seu maior
 conforto e precisão.
  30. 30. COMMAND LINE INTERFACES (CLI) Linhas de comando, usadas para desenvolver código.
  31. 31. GESTUAIS, HÁPTICAS E TANGÍVEIS Dependentes de gestos. Podem responder ao toque, identificar movimentos ou responder a pressões.
  32. 32. INTERFACES DE ATENÇÃO Chamam a sua atenção. Só devem ser usadas em ocasiões importantes, senão serão irritantes.
  33. 33. INTERFACES MISTAS Comandos de diversos tipos,
 usadas para operações complexas.
  34. 34. INTERFACES DE PROCESSOS Pouco interativas. Avisam quando o processo acabou.
  35. 35. AGENTES CONVERSACIONAIS De Clippy a Siri.
  36. 36. ESPACIAIS Determinam fronteiras. Usadas em museus e lojas.
  37. 37. GEOLOCALIZADAS Reorganizam suas coordenadas
 de acordo com a posição do usuário.
  38. 38. RECONHECIMENTO
 DE VOZ E DE LINGUAGEM NATURAL Compreensão de comandos e frases comuns.
  39. 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. 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. 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. 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. 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. 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. 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. 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. 47. VOCÊS
  48. 48. TRABALHO FINAL: REFLECONS + PROTÓTIPO
  49. 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. 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. 51. PRÓXIMAS AULAS: 19/11: DEBATE DE IDEIAS 26/11: PECHA KUCHA 1 03/12: PECHA KUCHA 2
  52. 52. PRAZOS: 25/11: PECHA KUCHA (TODOS) 20 TELAS EM JPG OU 6’40” DE VÍDEO 07/12: REFLECONS
  53. 53. PECHA KUCHA: EM CASA, COM BREJAS.
  54. 54. FIM
  55. 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. 56. FICÇÃO HALT AND CATCH FIRE - S01 MINORITY REPORT IRON MAN OBLIVION CONTINUUM
  57. 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. 58. PENSADOR DO TEMA: DON NORMAN - BIT.LY/CD10-1 DENIS DUTTON - BIT.LY/CD10-2

×