COMUNICAÇÃO DIGITAL CRP-0420 AULA 09: EXPERIÊNCIA DO USUÁRIO (2)
COMUNICAÇÃODIGITAL
CRP-0420
AULA 09: EXPERIÊNCIA DO USUÁRIO (2)
TRABALHO FINAL:2100: RETROSPECTIVA DO SÉCULO 21.
INVENTÁRIO DOS PRINCIPAIS OBJETOS
E SERVIÇOS QUE MUDARAM O SÉCULO.
SUA IDEIA:PROPOSTA DE ANO
CONTEXTO / PROBLEMA A ABORDAR
HARDWARE, SOFTWARE E SERVIÇOS;
PITCH DE EXPLICAÇÃO
TIMELINE
UX/UI
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.
COMUNICA MAL. O PROBLEMA DO “MAU DESIGN”:
COMO A MÁ MÚSICA OU COZINHA.
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.
PERSONAS
PERSONASARQUÉTIPOS DE USUÁRIOS:
A MELHOR FORMA DE ACOMODAR UM
GRANDE NÚMERO DE USUÁRIOS É
DESENHAR PARA TIPOS DEFINIDOS
POR ATITUDES E COMPORTAMENTOS.
USUÁRIO:A JORNADA DO
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?
CARD SORTING:TÉCNICA DE CRIAR NAVEGAÇÃO
ATRAVÉS DE PROTÓTIPOS DE PAPEL.
PROTÓTIPOS
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
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
QUANTIDADECOMECE COM UMA GRANDE
DE IDEIAS. A QUALIDADE VEM COM O
TEMPO.
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
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.
UI KITS
Ajudam a compor o layout
WIREFRAMES
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.
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
DESIGN GRÁFICO
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 TROCAM DE PÁGINA.
CUIDADO COM ELEMENTOS FLUTUANTES.
BRANCOO ESPAÇO EM
FACILITA A COMPREENSÃO.
MOOD BOARDSCOMO SÃO AS REFERÊNCIAS VISUAIS
DE SUAS PERSONAS?
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?
FIM
TAREFAS:
GDOCSATUALIZE 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
GDOCSDE 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
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
DOCUMENTÁRIOS:EVERYTHING IS A REMIX
FORECASTING, PHILIP TETLOCK
FUTURESCAPE - S01 E01, 03 E 04
LEITURASTHE 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
PENSADOR DO TEMA:GEORGE FRIEDMAN - BIT.LY/CD08-1
DOUGLAS RUSHKOFF - HTTPS://
YOUTU.BE/DQKQKCE1XL0