Embed Size (px)
Citation preview
PADRÕES DE INTERFACENO DATASUL BY YOU
CLEITON LUIZ CORADELLIARQUITETURA DE INTERFACES COM USABILIDADE E DESIGN
HORA DE CORRIGIR OS CAMINHOS
ALGUMAS CONSIDERAÇÕESJÁ 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
USABILIDADE
Abra a Porta
LEIA O TEXTO ABAIXO…
comusabilidadeconsegui
mosfazerascoisasmaisra
pidocommenoserroseco
mmaissatisfacaoeumaqu
alidadealcancadaatraves
demecanismosquemuita
svezesnosparecemapena
sdetalhesmasquefazem
muitafaltaquandonaote
mos
TENTE NOVAMENTE
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.
Abra a Porta
Agora sim >
FOCALIDADE “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
VERSÕESO Word já foi bem básico, porém teve sucesso nas questões primáriasNas 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
USABILIDADE PERCEBIDA
USABILIDADE REAL
Novos SkinsOriginal
AS VEZES O DESIGN ATRAPALHA O USO
Qual skin é melhor de usar?
ALGO USÁVEL É
Fácil de aprender
Fácil de lembrar
Eficiente
Confiável
Traz satisfação
2 FORMATO DA INTERAÇÃOeventos, comportamentos, estados, ...
PARA O USUÁRIO A INTERFACE É O SISTEMA!
Projetar com usabilidade inclui
1 APRESENTAÇÃO estrutura, design, informações, ações, …
É PENSAR EM: o que, onde e como apresentar como interagir (usuário) como se comportar (sistema)
“FILOSOFIAS” DA INTERFACE BY YOU
Produto Padrão Sistemas Internos
ESTRATÉGIA DE INTERFACE
Ter uma forma única para acessar os produtos e interagir com a Datasul
Central de Acessos
Login Unificado
SSO - Integração
com SO
Suporte onLine
Datasul By You
O QUE O USUÁRIO QUER?
Acessar rápida e facilmente as funcionalidades
Seletor de Aplicativos Web ou Não
Menus Rápidos e Personalizáveis
Troca de Empresana sessão
Datasul By You
O QUE O USUÁRIO QUER?
1 Ter a atenção gerenciada2 Decidir 3 Ser conduzido nos processos de negócioDesktop de trabalho orientado a papéis e tarefas 1 Monitoramento2 Detalhamento3 Ação 4 Colaboração
Datasul By You
O QUE O USUÁRIO QUER?
OS PADRÕES VEM DOS PROJETOS - REUSO
Framework:Reuso da “metáfora”, templates e tudo que independe de contexto
ProjetosAproveitam itens reusáveis ou geram itens reusáveis pro framework
INTERFACE EXPLORER – MEIU
ORIENTAÇÕES, PADRÕES E EXEMPLOS
VERSÃO 1.0Ricardo Santos
INTERFACE EXPLORER – MEIU
SITUAÇÕES DA ONDA 2 EM CORREÇÃO
RESOLUÇÃO
Somos contra 800x600, mas…
Base de clientes (40% 800x600)
Vendedores, projetores
1024 com área lateral restam 800x600
EMS 640 X 480
LAYOUTS E MARGENS (ESPAÇAMENTOS) Alinhamentos e ancoramentos com
layoutConstraints
Agrupamentos (áreas da interface)
Falta de margens nos containers e entre
itens
CABEÇALHOS
Alinhar itens do cabeçalho à esquerda
Agrupadores de cabeçalho
Filtros (próximo slide)
Cabeçalho duplicado
Altura do cabeçalho
FILTROS 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
AGRUPADORES
Hierarquia da informação
Organização da interface (agrupamento por
localização)
Melhor Orientação
RODAPÉS – PAINÉIS DE AÇÕES
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
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)
FORMULÁRIOS
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)
DATAGRIDS
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
COMPORTAMENTOS
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)
EXEMPLO DO MEIUPROCURE POR PASTA DE
INTERAÇÃO
PRINCÍPIOS E BOAS PRÁTICAS
DETALHES DETALHES DETALHES…
PLATAFORMAS DE INTERFACE Windows Macintosh Gnome Web Adobe Flex/Flash
Vantagens: usuários já familiarizados guia de estilo ferramentas para prototipação e implementação
VEJA SLIDES DE
REFERÊNCIA
EXEMPLO: NAVEGADOR BI - DO ITUNES
MEMÓRIA
Gato Maracujá Elefante Semblante Ocorrência Definição
Oliveira Santos Goiabada Cabo Domingo Rádio
Origami Vassoura Pastel Amarelo Distância Som
QUANTAS PALAVRAS VOCÊ RECONHECE? 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
RECONHECIMENTO
DECORA RECONHECE
EVITANDO PROBLEMAS 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
?
CHAME A ATENÇÃO
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)
CONVENÇÃO – EX.: FECHAR NO CANTO
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
CONVENÇÃO
PRINCÍPIO DA CONSISTÊNCIA
USE TELAS SIMILARES PARA FUNÇÕES SIMILARES
MESMO QUE NÃO SEJA UMA CONVENÇÃO EXTERNA
Label
Label
Label
Label
CADA VEZ DE UM JEITO??
PARETTO - IMPORTÂNCIA DOS UCS
Interações Importantes
Merecem Mais Atenção
Criar Novas Interações20%
80%
Interações Comuns
Não reinventar
Usar Templates
PARETTO - FOCALIDADE NAS INTERFACESAplique Paretto - Destacar os 20% mais importantes, ocultar
o resto
Itens nas Telas e Espaço ocupado
Resultado
20%
80%
80%
20%
PARETTO 80/20 – O CONTEÚDO É O REI
AFFORDANCE – É CLICÁVEL, É LINK…
REAPROVEITE OS ESPAÇOS COM ESTADOS
Isto gera interfaces menos carregadas por não termos tudo na tela ao mesmo tempo
LEI DE FITTS
Modelo do movimento humano, que prevê que o tempo necessário para se mover de uma posição inicial para um posição meta, é uma função da distância da meta e do tamanho da meta (Paul Fitts, 1954).
Teste na web: http://www.tele-actor.net/fitts/index.html
TAMANHO INFINITO
TAMANHO INFINITO
MENOS “MIRA”
MAIS “MIRA”
PRINCÍPIO DO AGRUPAMENTO
AGRUPAMENTO POR FORMATO
PRINCÍPIO “A VISIBILIDADE REFLETE A UTILIDADE”
Controles freqüentemente usados visíveis, e fáceis de acessar; Esconda ou encolha controles que são usados com menor freqüência.
PRINCÍPIO DA BAIXA POLUIÇÃO DA TELA
MENOS É MAIS
PENSE POR PAPEL
NÃO ME FAÇA PENSAR! 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
EQUILÍBRIO NAS DECISÕES
USABILIDADE DESIGN TECNOLOGIA
Não há certo ou errado, tudo depende das premissas e critérios que queremos atender
EQUILÍBRIO NAS DECISÕES
REFERÊNCIAS
REFERÊNCIAS - OS QUERIDINHOS Apple MAC OS - Apple IPod IPhone MS Windows Vista - Office Google - Gmail Nintendo Wii…
HALL OF FAME AND SHAME
Há outros… google it!
http://www.frankmahler.de/mshame/HallFame.htm
http://homepage.mac.com/bradster/iarchitect/shame.htm
REFERÊNCIAS
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&avm=1
http://code.google.com/p/flexlib/
http://www.quietlyscheming.com
http://www.cflex.net/
Dia Mundial da Usabilidade – 03/11
REFERÊNCIAS
Patterns e GuiasApple
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelinesMicrosoft http://msdn.microsoft.com/library/?url=/library/en-us/UxGuide/UXGuide/Home.asphttp://designinginterfaces.com/http://www.welie.com/patterns/http://www.mit.edu/~jtidwell/interaction_patterns.html
Dia Mundial da Usabilidade – 03/11
Usabilidade e UI Designhttp://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 Designhttp://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/
REFERÊNCIASLivros
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
• - 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.
