Aula CRP-0420-2016-09-UX (2)

127 visualizações

Publicada em

Aula 08 de Comunicação Digital: Experiência do Usuário (2)

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

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Aula CRP-0420-2016-09-UX (2)

  1. 1. COMUNICAÇÃO
 DIGITAL CRP-0420 AULA 09: EXPERIÊNCIA DO USUÁRIO (2)
  2. 2. TRABALHO FINAL: 2100: RETROSPECTIVA DO SÉCULO 21. INVENTÁRIO DOS PRINCIPAIS OBJETOS E SERVIÇOS QUE MUDARAM O SÉCULO.
  3. 3. SUA IDEIA: PROPOSTA DE ANO CONTEXTO / PROBLEMA A ABORDAR HARDWARE, SOFTWARE E SERVIÇOS; PITCH DE EXPLICAÇÃO
  4. 4. TIMELINE
  5. 5. UX/UI
  6. 6. EXERCÍCIO: IMAGINE PERSONAS, AÇÕES E INTERFACES PARA UM APLICATIVO SIMPLES DE GRAVAÇÃO DE ÁUDIO NO SMARTPHONE. USE A PLATAFORMA QUE VOCÊ ACHAR ADEQUADA.
  7. 7. COMUNICA MAL. O PROBLEMA DO “MAU DESIGN”: COMO A MÁ MÚSICA OU COZINHA.
  8. 8. O PROCESSO DE DESIGN DE INTERAÇÃO E SUAS ETAPAS: 1. PESQUISAR USUÁRIOS E SEU AMBIENTE; 2. MODELAR INTERAÇÕES E SEU CONTEXTO; 3. DEFINIR OBJETIVOS E DEMANDAS DE TODOS; 4. DETERMINAR ESTRUTURA E FLUXO DE INTERAÇÃO; 5. REFINAR COMPORTAMENTOS, FORMATOS E CONTEÚDOS; 6. DAR SUPORTE A DEMANDAS E NECESSIDADES.
  9. 9. PERSONAS
  10. 10. PERSONAS ARQUÉTIPOS DE USUÁRIOS: A MELHOR FORMA DE ACOMODAR UM GRANDE NÚMERO DE USUÁRIOS É DESENHAR PARA TIPOS DEFINIDOS POR ATITUDES E COMPORTAMENTOS.
  11. 11. USUÁRIO: A JORNADA DO
  12. 12. 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?
  13. 13. CARD SORTING: TÉCNICA DE CRIAR NAVEGAÇÃO ATRAVÉS DE PROTÓTIPOS DE PAPEL.
  14. 14. PROTÓTIPOS
  15. 15. 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
  16. 16. 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
  17. 17. QUANTIDADE COMECE COM UMA GRANDE DE IDEIAS. A QUALIDADE VEM COM O TEMPO.
  18. 18. 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
  19. 19. 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.
  20. 20. UI KITS Ajudam a compor o layout
  21. 21. WIREFRAMES
  22. 22. 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.
  23. 23. 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
  24. 24. DESIGN GRÁFICO
  25. 25. 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?
  26. 26. 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?
  27. 27. 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.
  28. 28. 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.
  29. 29. GRÁFICO: PROJETO REPRODUZA ELEMENTOS USADOS EM TODO O SITE NA MESMA POSIÇÃO, PARA QUE NÃO “PULEM” QUANDO 
 TROCAM DE PÁGINA. CUIDADO COM ELEMENTOS FLUTUANTES.
  30. 30. BRANCO O ESPAÇO EM FACILITA A COMPREENSÃO.
  31. 31. MOOD BOARDS COMO SÃO AS REFERÊNCIAS VISUAIS DE SUAS PERSONAS?
  32. 32. PERGUNTAS: 1. QUAL É A MOTIVAÇÃO PARA O PRODUTO? 2. QUE NECESSIDADE ELE SUPRE? 3. QUAL É SUA MECÂNICA, DINÂMICA E ESTÉTICA? 4. QUE PERSONAS O UTILIZARIAM, COMO SERIAM OS CENÁRIOS E JORNADAS DE USUÁRIO? 5. COMO É A CURVA DE APRENDIZADO (INICIANTE A EXPERT) POR PERSONA? 6. QUE INTERFACE(S) O PRODUTO USA? QUANDO E COMO? 7. ELE TEM PAINEL DE CONTROLE? QUAL É O WIREFRAME?
  33. 33. FIM
  34. 34. TAREFAS:
  35. 35. GDOCS ATUALIZE SEU PROJETO, “CALIBRADO” PELA CLASSE. DESCREVA SUA PROPOSTA DE ANO, QUAL O CONTEXTO E PROBLEMA A ABORDAR. FUNDAMENTE COM BIBLIOGRAFIAS DE AULAS ANTERIORES OU PAPERS. FONTES PODEM SER BUSCADAS EM SCHOLAR.GOOGLE.COM
  36. 36. GDOCS DE ONDE VIRÃO SEUS DADOS? QUE APIS VOCÊ PRETENDE USAR, E QUE DADOS VOCÊ PRETENDE USAR DE CADA API? FONTES PODEM SER BUSCADAS EM PROGRAMMABLEWEB.COM/APIS
  37. 37. PALESTRAS TED: HANNAH FRY: THE MATHEMATICS OF LOVE AARON KOBLIN: VISUALIZING OURSELVES WITH CROWD-SOURCED DATA NOREENA HERTZ: HOW TO USE EXPERTS KEVIN ALLOCCA: WHY VIDEOS GO VIRAL STEVEN LEVITT: FREAKONOMICS OF CRACK DEALING AL GORE: AVERTING THE CLIMATE CRISIS
  38. 38. DOCUMENTÁRIOS: EVERYTHING IS A REMIX FORECASTING, PHILIP TETLOCK FUTURESCAPE - S01 E01, 03 E 04
  39. 39. LEITURAS THE NEXT 100 YEARS - CAPS 7 E 8 WHAT TECHNOLOGY WANTS - CAPS 13 E 14 THE FUTURE: 6 DRIVERS OF CHANGE - CAPS FUTURE PERFECT - CAP 6 FUTURE, DECLASSIFIED - CAPS 3 E 4 THE NEW DIGITAL AGE - CAPS 1 E 2 THE NEXT DECADE - CAPS 1 E 3 PRESENT SHOCK - CAPS 1 E 4
  40. 40. PENSADOR DO TEMA: GEORGE FRIEDMAN - BIT.LY/CD08-1 DOUGLAS RUSHKOFF - HTTPS:// YOUTU.BE/DQKQKCE1XL0

×