Aula CRP-0420-2015-12

of 118 /118
COMUNICAÇÃO DIGITAL. CRP-0420: AULA 12: DESIGN DE INTERAÇÃO.

Transcript of Aula CRP-0420-2015-12

Page 1: Aula CRP-0420-2015-12

COMUNICAÇÃO DIGITAL.

CRP-0420:

AULA 12: DESIGN DE INTERAÇÃO.

Page 2: Aula CRP-0420-2015-12
Page 3: Aula CRP-0420-2015-12

REQUISITOS: DO QUE O PRODUTO

PRECISA?• DADOS INFORMAÇÕES QUE CIRCULARÃO PELO

SISTEMA. INPUTS E OUTPUTS;

• FUNCIONALIDADES OPERAÇÕES E AÇÕES;

• MERCADO CRONOGRAMA, LEGISLAÇÃO ETC;

• EXPERIÊNCIA VALORES DA ORGANIZAÇÃO;

• APRENDIZADO CURVA E PRÉ-REQUISITOS; E

• TÉCNICA PLATAFORMAS E TECNOLOGIAS.

Page 4: Aula CRP-0420-2015-12

ESFORÇO DESNECESSÁRIO

MUITAS VEZES NÃO NOS DAMOS CONTA DELE.

• IR DE UMA JANELA A OUTRA, POSICIONÁ-LAS E REDIMENSIONÁ-LAS; CLICAR EM BOTÕES;

• PREEENCHER FORMULÁRIOS DESNECESSÁRIOS;

• CONFIRMAR AÇÕES;

• LEMBRAR QUE NOME SEUS ARQUIVOS TÊME AONDE ESTÃO; E

• REDEFINIR DADOS PESSOAIS OU PREFERÊNCIAS.

Page 5: Aula CRP-0420-2015-12

MENOS = MAIS ESFORÇO EFICIÊNCIA

Page 6: Aula CRP-0420-2015-12

Ladrões de EFICIÊNCIA:

• COGNIÇÃO COMPREENSÃO DA ESTRUTURA DO PRODUTO E SEU FUNCIONAMENTO.

• MEMÓRIA LEMBRAR FUNÇÕES, SENHAS, POSIÇÃO

DE OBJETOS, METÁFORAS, CAMINHOS.

• ESFORÇO VISUAL DESCOBRIR HIERARQUIA E SIGNIFICADO DOS OBJETOS MOSTRADOS.

• ESFORÇO FÍSICO TECLAS, GESTUAIS, MOVIMENTO DE MOUSE, NÚMERO DE CLIQUES.

Page 7: Aula CRP-0420-2015-12

Navegação é esforço DESNECESSÁRIO.

• ENTRE JANELAS, VISUALIZAÇÕES E PÁGINAS;

• ENTRE PARTES DE UMA JANELA OU PÁGINA;

• ENTRE FERRAMENTAS, COMANDOS E MENUS; E

• DENTRO DE PARTES DA INFORMAÇÃO:

• ZOOM

• ROLAGEM

• LINKS

Page 8: Aula CRP-0420-2015-12

Melhorando a NAVEGAÇÃO:

• REDUZIR O NÚMERO DE LUGARES A IR.

• MOSTRAR SINALIZAÇÃO CLARA.

• MOSTRAR VISÕES AMPLAS E GERAIS.

• MAPEAR CONTROLES, FUNÇÕES E ÁREAS.

• SE ADEQUAR ÀS NECESSIDADES DO USUÁRIO;.

• COLOCAR AS FUNÇÕES MAIS ÚTEIS E DESEJADAS EM LOCAIS CONVENIENTES E PRÓXIMOS.

• EVITAR HIERARQUIAS.

Page 10: Aula CRP-0420-2015-12

INTERFACES

Page 11: Aula CRP-0420-2015-12

FÍSICASNOVAS INTERFACES

DEMANDAM NOVAS EXPRESSÕES IDIOMÁTICAS.

Page 12: Aula CRP-0420-2015-12

DADOS.

OBJETOS FÍSICOS SE TRANSFORMAM EM OBJETOS DE

Page 13: Aula CRP-0420-2015-12

AVATARES DIGITAIS,OBJETOS FÍSICOS AGORA TEM

OU SEJA, TEM PERSONALIDADES.

Page 14: Aula CRP-0420-2015-12

EXPERIÊNCIACOMO SE DETERMINA A

DO USUÁRIO EM OBJETOS FÍSICOS?

Page 15: Aula CRP-0420-2015-12
Page 16: Aula CRP-0420-2015-12

CASEIRAAUTOMAÇÃO

AJUDA OU ATRAPALHA?

Page 17: Aula CRP-0420-2015-12
Page 18: Aula CRP-0420-2015-12
Page 19: Aula CRP-0420-2015-12
Page 20: Aula CRP-0420-2015-12

CONTINUIDADE.UM PROBLEMA DE

COMO DIVIDIR AÇÕES ENTRE DISPOSITIVOS

SE MAL CONSEGUIMOS COMPARTILHAR CONTEÚDOS ENTRE ELES?

Page 21: Aula CRP-0420-2015-12
Page 22: Aula CRP-0420-2015-12

ABISMOCOMO FAZER PARA TRANSPOR O

ENTRE DOIS EQUIPAMENTOS?

Page 23: Aula CRP-0420-2015-12
Page 24: Aula CRP-0420-2015-12

LIMITAMTELAS NOS

E SE TORNARAM A MAIOR PARTE DO COMPUTADOR.

Page 25: Aula CRP-0420-2015-12

MÁQUINACOMO MEDIAR A CONVERSA QUANDO UMA

FALA COM OUTRA MÁQUINA?

Page 26: Aula CRP-0420-2015-12

TRANSPARENTEA TRANSIÇÃO DEVE SER

SENÃO SERÁ EXAUSTIVA.

Page 27: Aula CRP-0420-2015-12
Page 28: Aula CRP-0420-2015-12

PESSOAS,

O DESIGN DEVE SER FEITO PARA SER USADO POR

NÃO TELAS.

Page 29: Aula CRP-0420-2015-12
Page 30: Aula CRP-0420-2015-12
Page 31: Aula CRP-0420-2015-12

MOUSE?

PERGUNTA ERRADA: COMO FAZER O PRODUTO SE COMPORTAR COMO UM

OU COM OS SISTEMAS QUE JÁ CONHECEMOS?

Page 32: Aula CRP-0420-2015-12
Page 33: Aula CRP-0420-2015-12

ESCALÁVELSOFTWARE TORNA O HARDWARE

SE FOR POTENCIALIZADO POR SEU USUÁRIO.

Page 34: Aula CRP-0420-2015-12

IMAGINAÇÃO,O MAIOR DESAFIO É DE

NÃO DE CONHECIMENTO.

Page 35: Aula CRP-0420-2015-12

INVENTARA MELHOR MANEIRA DE

É BRINCAR.

OS MELHORES BRINQUEDOS E JOGOS SÃO POUCO FAMILIARES.

Page 36: Aula CRP-0420-2015-12

IMAGINAÇÃO.BRINQUEDOS SÃO AVATARES DA

ELES PRECISAM EVOLUIR COM SEUS DONOS

Page 37: Aula CRP-0420-2015-12
Page 38: Aula CRP-0420-2015-12

INTERAÇÃO HUMANO-COMPUTADOR OU

HCI:• PLANEJAMENTO E CONCEPÇÃO DE FORMAS DE

INTERAÇÃO ENTRE PESSOAS E COMPUTADORES.

• INTERSECÇÃO DE COMPUTAÇÃO, CIÊNCIAS DO COMPORTAMENTO, DESIGN E ESTUDOS DE MÍDIA.

• A META DE LONGO PRAZO DA HCI É PROJETAR SISTEMAS QUE MINIMIZEM A BARREIRA ENTRE O MODELO MENTAL DO USUÁRIO E A MÁQUINA.

Page 39: Aula CRP-0420-2015-12

AVALIAÇÃO DE

INTERFACES:• CLAREZA: EVITA AMBIGUIDADES

• CONCISÃO: USA POUCOS ELEMENTOS

• FAMILIARIDADE: 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, FORNECE MEIOS PARA SANÁ-LOS.

Page 40: Aula CRP-0420-2015-12

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

Page 41: Aula CRP-0420-2015-12

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.

Page 42: Aula CRP-0420-2015-12

TOUCHSCREENS E TOUCHPADS

As comuns em tablets e smartphones. Touchpads começam a substituir mouses por seu maior

conforto e precisão.

Page 43: Aula CRP-0420-2015-12

COMMAND LINE INTERFACES (CLI)

Linhas de comando, usadas para desenvolver código.

Page 44: Aula CRP-0420-2015-12

GESTUAIS, HÁPTICAS E TANGÍVEIS

Dependentes de gestos. Podem responder ao toque, identificar movimentos ou responder a pressões.

Page 45: Aula CRP-0420-2015-12
Page 46: Aula CRP-0420-2015-12

INTERFACES DE ATENÇÃO

Chamam a sua atenção. Só devem ser usadas em ocasiões importantes, senão serão irritantes.

Page 47: Aula CRP-0420-2015-12

INTERFACES MISTAS Comandos de diversos tipos,

usadas para operações complexas.

Page 48: Aula CRP-0420-2015-12

INTERFACES DE PROCESSOS

Pouco interativas. Avisam quando o processo acabou.

Page 49: Aula CRP-0420-2015-12

AGENTES CONVERSACIONAIS

De Clippy a Siri.

Page 50: Aula CRP-0420-2015-12
Page 51: Aula CRP-0420-2015-12

ESPACIAIS

Determinam fronteiras. Usadas em museus e lojas.

Page 52: Aula CRP-0420-2015-12
Page 53: Aula CRP-0420-2015-12

GEOLOCALIZADASReorganizam suas coordenadas

de acordo com a posição do usuário.

Page 54: Aula CRP-0420-2015-12
Page 55: Aula CRP-0420-2015-12
Page 56: Aula CRP-0420-2015-12

RECONHECIMENTODE VOZ E DE

LINGUAGEM NATURAL

Compreensão de comandos e frases comuns.

Page 57: Aula CRP-0420-2015-12
Page 58: Aula CRP-0420-2015-12

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

Page 59: Aula CRP-0420-2015-12

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

Page 60: Aula CRP-0420-2015-12
Page 61: Aula CRP-0420-2015-12
Page 62: Aula CRP-0420-2015-12
Page 63: Aula CRP-0420-2015-12
Page 64: Aula CRP-0420-2015-12
Page 65: Aula CRP-0420-2015-12

Painéis de

CONTROLE:• CONCENTRAM INFORMAÇÕES MAIS IMPORTANTES

• DEVEM FACILITAR A COMPREENSÃO, MANIPULAÇÃO E CONTEXTO.

• DETERMINAM PRIORIDADES, CONSOLIDAM E ORGANIZAM A INFORMAÇÃO EM UMA ÚNICA TELA, PARA QUE SEJA FACILMENTE MONITORADA

• NEM TODA INFORMAÇÃO É QUANTIFICÁVEL

Page 66: Aula CRP-0420-2015-12
Page 67: Aula CRP-0420-2015-12
Page 68: Aula CRP-0420-2015-12
Page 69: Aula CRP-0420-2015-12
Page 70: Aula CRP-0420-2015-12
Page 71: Aula CRP-0420-2015-12
Page 72: Aula CRP-0420-2015-12
Page 73: Aula CRP-0420-2015-12
Page 74: Aula CRP-0420-2015-12
Page 75: Aula CRP-0420-2015-12
Page 76: Aula CRP-0420-2015-12
Page 77: Aula CRP-0420-2015-12
Page 78: Aula CRP-0420-2015-12
Page 79: Aula CRP-0420-2015-12

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.

Page 80: Aula CRP-0420-2015-12

Planejamento estrutural:

WIREFRAMES• NÃO SÃO RASCUNHOS DO LAYOUT FINAL.

• COMO PLANTAS BAIXAS DE ARQUITETURA, SÃO 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.

Page 81: Aula CRP-0420-2015-12
Page 82: Aula CRP-0420-2015-12
Page 83: Aula CRP-0420-2015-12
Page 84: Aula CRP-0420-2015-12
Page 85: Aula CRP-0420-2015-12
Page 86: Aula CRP-0420-2015-12
Page 87: Aula CRP-0420-2015-12
Page 88: Aula CRP-0420-2015-12
Page 89: Aula CRP-0420-2015-12
Page 90: Aula CRP-0420-2015-12
Page 91: Aula CRP-0420-2015-12
Page 92: Aula CRP-0420-2015-12

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

Page 93: Aula CRP-0420-2015-12

http://www.google.com.br/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&docid=_drQP5Vo8ilLpM&tbnid=4ioKWlxpf3DKaM:&ved=0CAUQjRw&url=http%3A%2F

%2F981theriver.com%2Fhand-picked%2F&ei=4zbZU8i8JpHgsASRy4HgDA&bvm=bv.

71778758,d.cWc&psig=AFQjCNHdbi0P8BkMh3YNi9xamMBcSFReWA&ust=1406830683992231UI KITS

Ajudam a compor o layout

Page 94: Aula CRP-0420-2015-12
Page 95: Aula CRP-0420-2015-12
Page 96: Aula CRP-0420-2015-12
Page 97: Aula CRP-0420-2015-12
Page 98: Aula CRP-0420-2015-12
Page 99: Aula CRP-0420-2015-12
Page 100: Aula CRP-0420-2015-12
Page 101: Aula CRP-0420-2015-12
Page 102: Aula CRP-0420-2015-12
Page 103: Aula CRP-0420-2015-12
Page 104: Aula CRP-0420-2015-12
Page 105: Aula CRP-0420-2015-12
Page 106: Aula CRP-0420-2015-12

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.

Page 107: Aula CRP-0420-2015-12

VOCÊS

Page 108: Aula CRP-0420-2015-12

TRABALHO FINAL:REFLECONS

+ PROTÓTIPO

Page 109: Aula CRP-0420-2015-12

TRABALHO FINAL:REFLEXÃO 1: CONTEXTO

REFLEXÃO 2: A COISA E EMERGÊNCIA REFLEXÃO 3: IDENTIDADE E TRANSUMANISMO

REFLEXÃO 4: BIG DATA, LIVRE ARBÍTRIO E ÉTICA REFLEXÃO 5: EDUCAÇÃO

REFLEXÃO 6: INTELIGÊNCIA ARTIFICIAL REFLEXÃO 7: TENDÊNCIAS

REFLEXÃO 8: GAMES

REFLEXÃO 9: EXCLUSÃO DIGITAL REFLEXÃO 10: INTERFACES

Page 110: Aula CRP-0420-2015-12

PROTÓTIPO: MECÂNICA, DINÂMICA E ESTÉTICA

3 PERSONAS 1 EXEMPLO DE CENÁRIO

REQUISITOS INTERFACE(S)

WIREFRAMES JORNADA DO USUÁRIO EFEITOS ESPERADOS

Page 111: Aula CRP-0420-2015-12

PRÓXIMAS AULAS:

19/11: DEBATE DE IDEIAS 26/11: PECHA KUCHA 1 03/12: PECHA KUCHA 2

Page 112: Aula CRP-0420-2015-12

PRAZOS:

25/11: PECHA KUCHA (TODOS) 20 TELAS EM JPG

OU 6’40” DE VÍDEO

07/12: REFLECONS

Page 113: Aula CRP-0420-2015-12

PECHA KUCHA:EM CASA,

COM BREJAS.

Page 114: Aula CRP-0420-2015-12

FIM

Page 115: Aula CRP-0420-2015-12

PALESTRAS TED:JAMES PATTEN: THE BEST COMPUTER INTERFACE?

NICHOLAS NEGROPONTE: 30-YEAR HISTORY OF FUTURE APARNA RAO: ART THAT CRAVES YOUR ATTENTION

SERGEY BRIN: WHY GOOGLE GLASS? JOHN UNDERKOFFLER: POINTING TO THE FUTURE OF UI

JEFF HAN: PROMISE OF MULTI-TOUCH INTERFACE DON NORMAN: 3 WAYS GOOD DESIGN MAKES YOU HAPPY

DENIS DUTTON: A DARWINIAN THEORY OF BEAUTY

Page 116: Aula CRP-0420-2015-12

FICÇÃOHALT AND CATCH FIRE - S01

MINORITY REPORT IRON MAN OBLIVION

CONTINUUM

Page 117: Aula CRP-0420-2015-12

LEITURAS

ABOUT FACE 3 - CAPS 5 E 6 BRAVE NUI WORLD - CAPS 2 E 3 CHANGE BY DESIGN - CAPS 1 E 2

DESIGNING FOR EMOTION - CAPS 1, 2 E 3 EFFECTIVE UI - CAP 2

THE ELEMENTS OF USER EXPERIENCE - CAPS 1 E 2 THE INVISIBLE COMPUTER_ - CAPS 11 E 12

STORYTELLING FOR USER EXPERIENCE - CAPS 2 E 3 THE UX BOOK - CAPS 1, 2 E 3

Page 118: Aula CRP-0420-2015-12

PENSADOR DO TEMA:DON NORMAN - BIT.LY/CD10-1

DENIS DUTTON - BIT.LY/CD10-2