PADRÕES DE INTERFACE NO DATASUL BY YOU
70
PADRÕES DE INTERFACE NO DATASUL BY YOU CLEITON LUIZ CORADELLI ARQUITETURA DE INTERFACES COM USABILIDADE E DESIGN
description
PADRÕES DE INTERFACE NO DATASUL BY YOU CLEITON LUIZ CORADELLI ARQUITETURA DE INTERFACES COM USABILIDADE E DESIGN. HORA DE CORRIGIR OS CAMINHOS. ALGUMAS CONSIDERAÇÕES. JÁ NÃO VIRIA TUDO DECIDO? Sim , porém nem tudo foi prototipado , padronizado ou componentizado - PowerPoint PPT Presentation
Transcript of PADRÕES DE INTERFACE NO DATASUL BY YOU
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…comusabilidadeconseguimosfazerascoisasmaisrapidocommenoserrosecommaissatisfacaoeumaqualidadealcancadaatravesdemecanismosquemuitasvezesnosparecemapenasdetalhesmasquefazemmuitafaltaquandonaotemos
TENTE NOVAMENTECom 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ÊNCIAUSE TELAS SIMILARES PARA FUNÇÕES
SIMILARESMESMO QUE NÃO SEJA UMA CONVENÇÃO
EXTERNA
Label
Label
Label
Label
CADA VEZ DE UM JEITO??
PARETTO - IMPORTÂNCIA DOS UCSInterações ImportantesMerecem Mais AtençãoCriar Novas Interações20%
80%
Interações ComunsNão reinventarUsar 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ÊNCIASFlex ( 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=1http://code.google.com/p/flexlib/http://www.quietlyscheming.comhttp://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.comhttp://www.useit.com (Jakob Nielsen)http://www.usabilidoido.com.brhttp://www.mhavila.com.br/link/prog/usability.html
Usabilidade e UI Designhttp://www.ixda.org/en/http://www.uie.com/http://gmoura.com/bloghttp://www.usabilitynet.org/home.htmhttp://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.
