Embed Size (px)
Citation preview
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
