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 e ancoramentos com layoutConstraints
 Agrupamentos (áreas da interface)
 Falta de margens nos containers e entre itens
 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 que não exploram ou se adaptam aos estados e tamanhos possíveis,
por vezes ficando vazios e outras com muitas barras de rolagem.
 Sempre que não houver dados nos portlets informar o usuário para verificar
as configurações do portlet para identificar inconsistência dos dados atuais.
 Ao selecionar uma série de um gráfico e clicar em detalhar, a consulta que
abre deve trazer filtro aplicado.
 Vários estão com o cabeçalho vazio
 Portlets sem atalhos além do detalhar (ações possíveis)
 I18n - Layout apresenta campos sem espaçamento (grudados). Utilizar o
component formItem com label interno para posicionar em cima do campo
 Falta de margens na esquerda e topo do form (20px)
 Pista de obrigatoriedades(*)
 Falta de agrupadores de conteudo (groupContent)
 Falta de Validadores (modelo CRUD)
 Falta de Máscaras
 Falta de painél agrupador (ao redor do form)
 Falta de itens definidos (gridtools, painel agrupador com total de registros e
nome da entidade, seleção múltipla com checkboxes, Ordenar não funciona
 Ordenar coluna do Grid em bases grandes, leva muito tempo e não tem
feedback de carga, só trava e retorna depois do tempo de carga total. O
mesmo ocorre com o scroll que gera nova carga no servidor.
 As ordens das colunas do grid nas buscas e consultas não estão sendo salvas.
 Falta tratamento de botão direito do mouse
 Falta de tratamento de duplo clique e teclado (Enter/ESC) e botão direito.
 Painéis internos não são maximizáveis (resolução)
 Não há workflows entre os papéis e quando há, não temos feedback das ações
(via toaster)
 Interface permite ao usuário executar ações que não estão nas suas metas (ex.:
Técnico alterar OMs)





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
• - Portlets não exploram ou se adaptam aos estados e tamanhos possíveis, por
vezes ficando vazios e outras com muitas barras de rolagem.
- Sempre que não houver dados nos portlets informar o usuário para verificar
as configurações do portlet para identificar inconsistência dos dados atuais.
- Ao selecionar uma série de um gráfico e clicar em detalhar, a consulta
aberta não vem com o filtro avançado.
- Várias interfaces estão com o cabeçalho de portlet vazio.