3. 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.
4. 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ÊM
E AONDE ESTÃO; E
• REDEFINIR DADOS PESSOAIS OU PREFERÊNCIAS.
6. 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.
7. 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
8. 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.
38. 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.
39. 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.
40. 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
41. 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.
58. 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
59. 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
60.
61.
62.
63.
64.
65. 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
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79. 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.
80. 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.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92. 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
106. 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.
115. 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
117. 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