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