JÁ NÃO VIRIA TUDO DECIDO? Sim, porém nem tudo foi prototipado, padronizado ou componentizado NÃO...

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

ricardo.s@totvs.com.br

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

MUITO OBRIGADO

cleiton.coradelli@totvs.com.br

cleiton.coradelli@gmail.com

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.