CRP-5215-0420-2014-09

415 visualizações

Publicada em

Aula 09 de Comunicação Digital: Interfaces.

Links:
- Drumpants: https://www.kickstarter.com/projects/1400947701/drumpants-an-entire-band-in-your-pocket
- Termostato Nest: https://www.youtube.com/watch?v=L8TkhHgkBsg
- Conjunto de sensores Mother: https://sen.se/store/mother/
- EggMinder: https://www.youtube.com/watch?v=_9tVckcCz-c
- Chromecast: https://www.youtube.com/watch?v=cKG5HDyTW8o
- Anel bluetooth: https://www.kickstarter.com/projects/1761670738/ring-shortcut-everything
- Transferência de música: http://vimeo.com/86287024
- Trailer Men, women & children: https://www.youtube.com/watch?v=MHMqpwnUazY
- Grab magic: https://www.youtube.com/watch?v=eYveEdhTgBs
- Feynman e o processo científico: https://www.youtube.com/watch?v=viaDa43WiLc
- Toymail walkie-talkie: http://www.toymail.co/
- Relógio Apple: https://www.youtube.com/watch?v=y-waTi8BPdk
- Google Now 1: https://www.youtube.com/watch?v=pPqliPzHYyc
- Google Now 2: https://www.youtube.com/watch?v=2vT0AWDq3DE
Interface Robocop: http://vimeo.com/86511029
Interface Oblivion: http://vimeo.com/64377100

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

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

Nenhuma nota no slide

CRP-5215-0420-2014-09

  1. 1. CRP-5215 COMUNICAÇÃO DIGITAL E ENSINO À DISTÂNCIA. Aula 09: Wireframes e painéis de controle.
  2. 2. CRP-0420: COMUNICAÇÃO DIGITAL. Aula 09: Wireframes e painéis de controle.
  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. PARA CASA: Definir o produto digital que definirá seu trabalho final. Meia página.
  5. 5. Tudo que puder ser conectado será CONECTADO. E tudo pode ser conectado. O gênio saiu da garrafa.
  6. 6. A nova barreira: entre o digital e o FÍSICO.
  7. 7. Novas interfaces FÍSICAS demandam novas expressões idiomáticas.
  8. 8. Pessoas e coisas se transformam em INTERFACES. Qualquer hardware pode ter acesso à Internet.
  9. 9. Objetos físicos se transformam em objetos de DADOS.
  10. 10. Objetos físicos agora tem AVATARES DIGITAIS, ou seja, tem personalidades.
  11. 11. Como se determina a EXPERIÊNCIA do usuário em objetos físicos?
  12. 12. Automação CASEIRA ajuda ou atrapalha?
  13. 13. Divisão de TAREFAS: • O usuário realizará tarefas com maior facilidade se dividir ações complexas em tarefas menores. • Os desafios devem ser do tamanho apropriado • Indicações de progresso são estimulantes • Conquistas são motivadoras.
  14. 14. um problema de CONTINUIDADE. Como dividir ações entre dispositivos se mal conseguimos compartilhar conteúdos entre eles?
  15. 15. Como fazer para transpor o ABISMO entre dois equipamentos?
  16. 16. Separação física vs. separação de COMPORTAMENTOS
  17. 17. Como mediar a conversa quando uma MÁQUINA fala com outra máquina?
  18. 18. A transição deve ser TRANSPARENTE senão será exaustiva.
  19. 19. Telas nos LIMITAM e se tornaram a maior parte do computador.
  20. 20. O design deve ser feito para ser usado por PESSOAS, não telas.
  21. 21. pergunta errada: como fazer o produto se comportar como um MOUSE? Ou com os sistemas que já conhecemos?
  22. 22. Software torna o hardware ESCALÁVEL se for potencializado por seu usuário.
  23. 23. O maior desafio é de IMAGINAÇÃO, não de conhecimento.
  24. 24. a melhor maneira de INVENTAR é brincar. Os melhores brinquedos e jogos são pouco familiares.
  25. 25. Brinquedos são avatares da IMAGINAÇÃO. Eles precisam evoluir com seus donos
  26. 26. Interação humano-computador ou HCI: • Estudo, planejamento e concepção de formas de interação entre as pessoas e computadores. • Intersecção de ciência da computação, ciências do comportamento, design e estudos de mídia. • Ao contrário de outras ferramentas com usos só limitados (como um martelo), um computador tem muitas variações (e tolerâncias) de uso, o que cria um diálogo aberto e infinito.
  27. 27. HCI: OBJETIVOS • Tornar máquinas mais amigáveis. Usa: • metodologias e processos de design de interfaces e sua implementação • técnicas para avaliar e comparar interfaces • desenvolvimento de modelos e teorias de interação descritivos e preditivos • A meta de longo prazo da HCI é projetar sistemas que minimizem a barreira entre o modelo mental do usuário e a máquina.
  28. 28. Avaliação de INTERFACES: • Clareza: evita ambiguidades • Concisão: usa poucos elementos • Familiaridade: tem 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, fornecer meios para saná-los.
  29. 29. 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
  30. 30. 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.
  31. 31. TOUCHSCREENS E TOUCHPADS As comuns em tablets e smartphones. Touchpads começam a substituir mouses por seu maior conforto e precisão.
  32. 32. COMMAND LINE INTERFACES (CLI) Linhas de comando, usadas para desenvolver código.
  33. 33. GESTUAIS, HÁPTICAS E TANGÍVEIS Dependentes de gestos. Podem responder ao toque, identificar movimentos ou responder a pressões.
  34. 34. INTERFACES DE ATENÇÃO Chamam a sua atenção. Só devem ser usadas em ocasiões importantes, senão serão irritantes.
  35. 35. INTERFACES MISTAS Comandos de diversos tipos, usadas para operações complexas.
  36. 36. INTERFACES DE PROCESSOS Pouco interativas. Avisam quando o processo acabou.
  37. 37. AGENTES CONVERSACIONAIS De Clippy a Siri.
  38. 38. ESPACIAIS Determinam fronteiras. Usadas em museus e lojas.
  39. 39. GEOLOCALIZADAS Reorganizam suas coordenadas de acordo com a posição do usuário.
  40. 40. RECONHECIMENTO DE VOZ E DE LINGUAGEM NATURAL Compreensão de comandos e frases comuns.
  41. 41. FLUXOGRAMA: • Representação esquemática de processos, ilustrando de forma descomplicada sua sequência operacional: o trabalho que está sendo realizado, o tempo necessário para a realização, a trajetória dos documentos, interações do usuário.
  42. 42. 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
  43. 43. 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
  44. 44. Comece com uma grande QUANTIDADE de ideias. A qualidade vem com o tempo.
  45. 45. Painéis de CONTROLE: • Apresentam as informações mais importantes, necessárias para atingir os objetivos • São gráficos não pela beleza, mas para facilitar a compreensão, manipulação e contexto. • Devem determinar prioridades, consolidar e organizar a informação em uma única tela, para que seja facilmente monitorada • Nem todas as informações são quantificáveis
  46. 46. 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.
  47. 47. Planejamento estrutural: WIREFRAMES • Não são rascunhos do layout final. • Como plantas baixas de arquitetura, 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.
  48. 48. 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
  49. 49. FIM

×