Aula CRP-0420-2015-12

COMUNICAÇÃO DIGITAL.

CRP-0420:

AULA 12: DESIGN DE INTERAÇÃO.

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.

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.

MENOS = MAIS ESFORÇO EFICIÊNCIA

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.

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

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.

INTERFACES

FÍSICASNOVAS INTERFACES

DEMANDAM NOVAS EXPRESSÕES IDIOMÁTICAS.

DADOS.

OBJETOS FÍSICOS SE TRANSFORMAM EM OBJETOS DE

AVATARES DIGITAIS,OBJETOS FÍSICOS AGORA TEM

OU SEJA, TEM PERSONALIDADES.

EXPERIÊNCIACOMO SE DETERMINA A

DO USUÁRIO EM OBJETOS FÍSICOS?

CASEIRAAUTOMAÇÃO

AJUDA OU ATRAPALHA?

CONTINUIDADE.UM PROBLEMA DE

COMO DIVIDIR AÇÕES ENTRE DISPOSITIVOS

SE MAL CONSEGUIMOS COMPARTILHAR CONTEÚDOS ENTRE ELES?

ABISMOCOMO FAZER PARA TRANSPOR O

ENTRE DOIS EQUIPAMENTOS?

LIMITAMTELAS NOS

E SE TORNARAM A MAIOR PARTE DO COMPUTADOR.

MÁQUINACOMO MEDIAR A CONVERSA QUANDO UMA

FALA COM OUTRA MÁQUINA?

TRANSPARENTEA TRANSIÇÃO DEVE SER

SENÃO SERÁ EXAUSTIVA.

PESSOAS,

O DESIGN DEVE SER FEITO PARA SER USADO POR

NÃO TELAS.

MOUSE?

PERGUNTA ERRADA: COMO FAZER O PRODUTO SE COMPORTAR COMO UM

OU COM OS SISTEMAS QUE JÁ CONHECEMOS?

ESCALÁVELSOFTWARE TORNA O HARDWARE

SE FOR POTENCIALIZADO POR SEU USUÁRIO.

IMAGINAÇÃO,O MAIOR DESAFIO É DE

NÃO DE CONHECIMENTO.

INVENTARA MELHOR MANEIRA DE

É BRINCAR.

OS MELHORES BRINQUEDOS E JOGOS SÃO POUCO FAMILIARES.

IMAGINAÇÃO.BRINQUEDOS SÃO AVATARES DA

ELES PRECISAM EVOLUIR COM SEUS DONOS

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.

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.

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

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.

TOUCHSCREENS E TOUCHPADS

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

conforto e precisão.

COMMAND LINE INTERFACES (CLI)

Linhas de comando, usadas para desenvolver código.

GESTUAIS, HÁPTICAS E TANGÍVEIS

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

INTERFACES DE ATENÇÃO

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

INTERFACES MISTAS Comandos de diversos tipos,

usadas para operações complexas.

INTERFACES DE PROCESSOS

Pouco interativas. Avisam quando o processo acabou.

AGENTES CONVERSACIONAIS

De Clippy a Siri.

ESPACIAIS

Determinam fronteiras. Usadas em museus e lojas.

GEOLOCALIZADASReorganizam suas coordenadas

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

RECONHECIMENTODE VOZ E DE

LINGUAGEM NATURAL

Compreensão de comandos e frases comuns.

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

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

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.

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.

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

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

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.

VOCÊS

TRABALHO FINAL:REFLECONS

+ PROTÓTIPO

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

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

PRÓXIMAS AULAS:

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

PRAZOS:

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

OU 6’40” DE VÍDEO

07/12: REFLECONS

PECHA KUCHA:EM CASA,

COM BREJAS.

FIM

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

FICÇÃOHALT AND CATCH FIRE - S01

MINORITY REPORT IRON MAN OBLIVION

CONTINUUM

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

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

DENIS DUTTON - BIT.LY/CD10-2