O documento discute conceitos e técnicas de design de experiência do usuário, como personas, prototipação, wireframes e design gráfico. Ele fornece orientações sobre como projetar interfaces digitais que sejam intuitivas e atendam às necessidades dos usuários.
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.
22. 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.
24. 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.
29. 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?
37. 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
38. 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
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.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56. 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.
71. 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.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83. 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
85. 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?
86.
87.
88.
89.
90.
91.
92. 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?
93.
94.
95.
96.
97.
98.
99.
100. 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.
101.
102.
103.
104.
105.
106. 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.
126. 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?
129. 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
130. 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
131. 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
133. 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
134. PENSADOR DO TEMA:
GEORGE FRIEDMAN - BIT.LY/CD08-1
DOUGLAS RUSHKOFF - HTTPS://
YOUTU.BE/DQKQKCE1XL0