JÁ NÃO VIRIA TUDO DECIDO?
Sim, porém nem tudo foi prototipado,
padronizado ou componentizado
NÃO POSSO “CUSTOMIZAR” PADRÕES NO MEU CASO?
- Teremos retrabalho quando algum padrão for atualizado
- Fazer coisas parecidas de formas diferentes confunde e
baixa a qualidade da experiência
ISSO DEVERIA SER PREOCUPAÇÃO MINHA?
SIM E NÃO. Até certo ponto os padrões devem garantir consistência, mas sempre
teremos níveis específicos a tratar
comusabilidadeconseguimosfazerascoisasmai
srapidocommenoserrosecommaissatisfacaoeu
maqualidadealcancadaatravesdemecanismosq
uemuitasvezesnosparecemapenasdetalhesmas
quefazemmuitafaltaquandonaotemos
Com usabilidade, conseguimos fazer as coisas mais
rápido, com menos erros e com mais satisfação. É
uma qualidade alcançada através de mecanismos que
muitas vezes nos parecem apenas detalhes, mas que
fazem muita falta quando não temos.
 “Quando perguntamos aos usuários o
que eles queriam que o Office tivesse, 9
de cada 10 vezes, eles citam algo que já
está no produto, eles só não conseguem
encontrar”
 Chris Capossela,
Microsoft VP
O Word já foi bem básico, porém teve sucesso nas questões primárias
Nas evoluções foram adicionados mecanismos avançados como botão direito,
Drag’nDrop e combinações de teclas, que melhoram a produtividade
Evoluiu
tanto que a
metáfora
foi reprojetada










Gera percepção
Impressão do usuário
Conquista o usuário
“Dá vontade de usar”
Apelo visual, Design, IPod...
Mantém o usuário satisfeito
Números de Erros
Performance
Cobertura de tarefas
Gera referência
Original
Novos Skins
Qual skin é melhor de usar?
ALGO USÁVEL É

Fácil de aprender

Fácil de lembrar
Projetar com usabilidade inclui
1 APRESENTAÇÃO
estrutura, design,
informações, ações, …

Eficiente
2 FORMATO DA INTERAÇÃO
eventos, comportamentos, estados, ...

Confiável
É PENSAR EM:

Traz satisfação
 o que, onde e como apresentar
 como interagir (usuário)
 como se comportar (sistema)
Produto Padrão
Sistemas Internos
Ter uma forma única para acessar os
produtos e interagir com a Datasul
Datasul By You
 Central de Acessos
 Login Unificado
 SSO - Integração com SO
 Suporte onLine
Acessar rápida e facilmente as
funcionalidades
Datasul By You
Seletor de Aplicativos
Web ou Não
Menus Rápidos e
Personalizáveis
Troca de Empresa
na sessão
1 Ter a atenção gerenciada
2 Decidir
3 Ser conduzido nos
processos de negócio
Datasul By You
Desktop de trabalho orientado a papéis
e tarefas
1 Monitoramento
2 Detalhamento
3 Ação
4 Colaboração
Framework:
Reuso da “metáfora”, templates e tudo
que independe de contexto
Projetos
Aproveitam itens reusáveis ou geram itens
reusáveis pro framework
ORIENTAÇÕES, PADRÕES E EXEMPLOS
VERSÃO 1.0
Ricardo Santos
[email protected]
 Somos contra 800x600, mas…
 Base de clientes (40% 800x600)
 Vendedores, projetores
 1024 com área lateral restam 800x600
 EMS 640 X 480
 Alinhamentos
 Agrupamentos ínternos
 “Bom Design” com espaços nas margens e entre itens
 Painéis agrupadores (externos)
 Alinhar itens do cabeçalho à esquerda
 Agrupadores de cabeçalho
 Filtros (próximo slide)
 Cabeçalho duplicado
 Altura do cabeçalho
 Filtros rápidos (checkboxes)
 Filtros simples que não encontram partes de um texto.
 Filtros de períodos não são exibidos no cabeçalho dando a ilusão de que a
consulta corrente reflete toda a base de dados, porém o filtro de período
pode estar ocultando muita informação.
 Filtros avançados, vários modelos
 Hierarquia da informação
 Organização da interface (agrupamento por localização)
 Melhor Orientação
 Diferenciação das ações botões (focal, normais) e Ações Relacionadas
 Botão ou ação focal com clique, Enter e duplo clique
 Relação ações da folder (botões) e ações de entidades internas (links em
grids)


 Portlets
 Formulários
 DataGrids
 Feedbacks (mensageria)
 Comportamentos (drag, right click, teclado,…)





Windows
Macintosh
Gnome
Web
Adobe Flex/Flash
 Vantagens:
VEJA
SLIDES DE REFERÊNCIA
 usuários já familiarizados
 guia de estilo
 ferramentas para prototipação e implementação






Gato
Maracujá
Elefante
Semblante
Ocorrência
Definição






Oliveira
Santos
Goiabada
Cabo
Domingo
Rádio






Origami
Vassoura
Pastel
Amarelo
Distância
Som









Gato
Cachorro
Maracujá
Arquitetura
Amarelo
Semblante
Domingo
Sábado
Origami








Caixa
Documento
Oliveira
Distância
Ocorrência
Santos
Goiabada
Cabo








Rádio
Som
Vassoura
Cobra
Elefante
Pastel
Velocidade
Definição
DECORA
RECONHECE
 Os rótulos (labels) devem casar com a maneira que os usuários
pensam sobre a tarefa
 Dê algum retorno - o usuário precisa saber o que uma operação
realmente fez…. ou está fazendo para ações demoradas
 Usuários vão errar, tente cercá-lo com mecanismos como voltar,
máscaras, valores default, auto seleções
 Informação com uma grande mudança na tela tem maior probabilidade de ser
lida
 Informação próxima de onde o usuário está lendo também
 Sinais acústicos não podem ser ignorados tão facilmente quanto sinais visuais
(faca de dois gumes – as vezes queremos poder ignorar as coisas)
 Gerando interfaces na maneira que seu usuário
está acostumado o deixará mais satisfeito
 menor frustração inicial e assim menor ansiedade
 aprendizagem mais rápida
 reforça noção do empréstimo
 Convenções passaram pelo teste do tempo,
qualquer inovação ainda não, teremos problemas difíceis de prever
 Norman:

Efeito de transferência

Dialetos e Estereótipos da população
USE TELAS SIMILARES PARA FUNÇÕES SIMILARES
MESMO QUE NÃO SEJA UMA CONVENÇÃO EXTERNA
CADA VEZ DE UM JEITO??
Label
Label
Label
Label
Interações Importantes
Merecem Mais Atenção
20%
Criar Novas Interações
Interações Comuns
Não reinventar
80%
Usar Templates
Aplique Paretto - Destacar os 20% mais importantes, ocultar o resto
Itens nas Telas e
Espaço ocupado
80%
20%
20%
80%
Resultado
Isto gera interfaces menos carregadas por
não termos tudo na tela ao mesmo tempo
TAMANHO INFINITO
MAIS “MIRA”
 Modelo do movimento humano, que prevê que o tempo
necessário para se mover de uma posição inicial para um posição
MENOS
meta, é uma função da distância da meta
e “MIRA”
do tamanho da meta
(Paul Fitts, 1954).
 Teste na web:
 http://www.tele-actor.net/fitts/index.html
TAMANHO INFINITO
 Controles freqüentemente usados visíveis,
e fáceis de acessar;
 Esconda ou encolha controles que são
usados com menor freqüência.
MENOS É MAIS
PENSE POR PAPEL
 Formulários preenchidos com valores padrão
 Responsabilidades, ação é do usuário ou do sistema?
 Guiar o usuário em processos complexos “wizards”.
 Crie formas simples e
avançadas (apenas se necessário)
de fazer as coisas
USABILIDADE
DESIGN
TECNOLOGIA
Não há certo ou errado, tudo depende das
premissas e critérios que queremos atender




Apple MAC OS - Apple IPod IPhone
MS Windows Vista - Office
Google - Gmail
Nintendo Wii…
http://www.frankmahler.de/mshame/HallFame.htm
http://homepage.mac.com/bradster/iarchitect/shame.htm
Há outros… google it!
Dia Mundial da Usabilidade –
03/11
Flex ( e componentes além do básico)
http://www.flex.org/
http://www.onflex.org/
http://flexbox.mrinalwadhwa.com/
http://www.adobe.com/devnet/flex/
http://www.adobe.com/cfusion/exchange/index.cfm?view=sn610#loc=en_us&view=sn610&viewName=Adobe%20Exchange&av
m=1
http://code.google.com/p/flexlib/
http://www.quietlyscheming.com
http://www.cflex.net/
Dia Mundial da Usabilidade –
03/11
Usabilidade e UI Design
http://www.foruse.com (Larry Constantine)
http://www.usabilitybok.org/
http://www.lukew.com/
http://www.ivogomes.com
http://www.useit.com (Jakob Nielsen)
http://www.usabilidoido.com.br
http://www.mhavila.com.br/link/prog/usability.html
Usabilidade e UI Design
http://www.ixda.org/en/
http://www.uie.com/
http://gmoura.com/blog
http://www.usabilitynet.org/home.htm
http://www.ok-cancel.com/
http://www.ergonomia.com.br/
http://www.sapdesignguild.org/
Patterns e Guias
Apple http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines
Microsoft http://msdn.microsoft.com/library/?url=/library/en-us/UxGuide/UXGuide/Home.asp
http://designinginterfaces.com/
http://www.welie.com/patterns/
http://www.mit.edu/~jtidwell/interaction_patterns.html
Livros
 Contextual Design: A Customer-Centered Approach to Systems Designs - Beyer, Hugh; Holtzblatt,
Karen
 Writing Effective Use Cases - Cockburn, Alistair
 Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design Constantine, Larry; Lockwood,A.D.
 Usability Engineering - Nielsen, Jakob
 The Usability Engineering Life Cycle - Mayhew, Deborah
 Institutionalization of Usability: A Step-by-Step Guide - Eric Schaffer
 http://www.sapdesignguild.org/community/book_people/books.asp