PADRÕES DE INTERFACE NO DATASUL BY YOU

Apresentação em tema: "PADRÕES DE INTERFACE NO DATASUL BY YOU"— Transcrição da apresentação:

1 PADRÕES DE INTERFACE NO DATASUL BY YOU
CLEITON LUIZ CORADELLI ARQUITETURA DE INTERFACES COM USABILIDADE E DESIGN

2 HORA DE CORRIGIR OS CAMINHOS
Richard Faust

3 ALGUMAS CONSIDERAÇÕES
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

4 USABILIDADE Richard Faust

5 LEIA O TEXTO ABAIXO… comusabilidadeconseguimosfazerascoisasmaisrapidocommenoserrosecommaissatisfacaoeumaqualidadealcancadaatravesdemecanismosquemuitasvezesnosparecemapenasdetalhesmasquefazemmuitafaltaquandonaotemos Abra a Porta

6 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 >

7 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

8 VERSÕES 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

9

10 USABILIDADE PERCEBIDA
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 REAL

11 AS VEZES O DESIGN ATRAPALHA O USO
Original Novos Skins Qual skin é melhor de usar?

12 PARA O USUÁRIO A INTERFACE É O SISTEMA!
ALGO USÁVEL É Fácil de aprender Fácil de lembrar Eficiente Confiável Traz satisfação Projetar com usabilidade inclui 1 APRESENTAÇÃO estrutura, design, informações, ações, … 2 FORMATO DA INTERAÇÃO eventos, comportamentos, estados, ... É PENSAR EM: o que, onde e como apresentar como interagir (usuário) como se comportar (sistema)

13 “FILOSOFIAS” da interface by you
Richard Faust

14 ESTRATÉGIA DE INTERFACE
Produto Padrão Sistemas Internos cliente servidor Server

15 O QUE O USUÁRIO QUER? 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

16 O QUE O USUÁRIO QUER? 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

17 O QUE O USUÁRIO QUER? 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

18 OS PADRÕES VEM DOS PROJETOS - REUSO
Framework: Reuso da “metáfora”, templates e tudo que independe de contexto Projetos Aproveitam itens reusáveis ou geram itens reusáveis pro framework

19 INTERFACE EXPLORER – MEIU
Richard Faust

20 INTERFACE EXPLORER – MEIU
ORIENTAÇÕES, PADRÕES E EXEMPLOS VERSÃO 1.0 Ricardo Santos

21 SITUAÇÕES DA ONDA 2 EM CORREÇÃO
Richard Faust

22 RESOLUÇÃO Somos contra 800x600, mas… Base de clientes (40% 800x600)
Vendedores, projetores 1024 com área lateral restam 800x600 EMS 640 X 480

23

24 LAYOUTS E MARGENS (ESPAÇAMENTOS)
Alinhamentos e ancoramentos com layoutConstraints Agrupamentos (áreas da interface) Falta de margens nos containers e entre itens

25

26 CABEÇALHOS Alinhar itens do cabeçalho à esquerda
Agrupadores de cabeçalho Filtros (próximo slide) Cabeçalho duplicado Altura do cabeçalho

27

28 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

29

30 AGRUPADORES Hierarquia da informação
Organização da interface (agrupamento por localização) Melhor Orientação

31 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) 

32 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)

33 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)

34 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

35 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)

36 Exemplo do meiu procure por pasta de interação
Richard Faust

37

38 Princípios e boas Práticas
Richard Faust

39 DETALHES DETALHES DETALHES…

40 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 Macintosh: 1984, grande responsividade, estudos de usabilidade, melhor guia de estilo Windows: 1985, só agora chega a um amadurecimento Motif: geralmente são mais complicados para os usuários do que os para micros Há a possibilidade de usar ferramentas multiplataformas, por ex. classes abstratas e concretas. Contra Exemplo: StuffIt, desenvolvimento do sistemas de CAD antes do Windows Richard Faust

41 EXEMPLO: NAVEGADOR BI - DO ITUNES
Richard Faust

42 MEMÓRIA Gato Maracujá Elefante Semblante Ocorrência Definição Oliveira
Santos Goiabada Cabo Domingo Rádio Origami Vassoura Pastel Amarelo Distância Som 1. recognição sobre lembrança, conhecimento na cabeça e no mundo (Norman), ajudas cognitivas 2. exemplo: help deve estar disponível junto com a tarefa (por isso manuais muitas vezes tem mais chance) … informação a ser usada junta deve ser apresentada ao mesmo tempo 3. pode levar a erros, carga não relacionada a tarefa Richard Faust

43 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 Richard Faust

44 RECONHECIMENTO DECORA RECONHECE Richard Faust

45 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 ? lembrar do modelo de resolução de problemas, com metas, submetas, planos, volta atrás. 1. casar submetas e ações com opções do sw 2. sentir que estão avançando para a solução do problema e que a partir daquele estado uma outra submeta pode ser atingida 3. planos podem estar errados, assim como o reconhecimento de opções e feedbacks, então usuários tem que poder voltar atrás Richard Faust

46 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) Richard Faust

47 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 Richard Faust

48 CONVENÇÃO Richard Faust

49 PRINCÍPIO DA CONSISTÊNCIA
USE TELAS SIMILARES PARA FUNÇÕES SIMILARES MESMO QUE NÃO SEJA UMA CONVENÇÃO EXTERNA CADA VEZ DE UM JEITO?? Label Label economia: pode-se projetar telas básicas e então modificá-las Label Label Richard Faust

50 PARETTO - IMPORTÂNCIA DOS UCS
Interações Importantes Merecem Mais Atenção Criar Novas Interações 20% Interações Comuns Não reinventar Usar Templates 80%

51 PARETTO - FOCALIDADE NAS INTERFACES
Aplique Paretto - Destacar os 20% mais importantes, ocultar o resto Itens nas Telas e Espaço ocupado 80% 20% 20% 80% Resultado

52 PARETTO 80/20 – O CONTEÚDO É O REI

53 AFFORDANCE – É CLICÁVEL, É LINK…

54 REAPROVEITE OS ESPAÇOS COM ESTADOS
Isto gera interfaces menos carregadas por não termos tudo na tela ao mesmo tempo

55 TAMANHO INFINITO MAIS “MIRA” 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: MENOS “MIRA” ･Buttons and other widgets to be selected in GUIs should be a reasonable size; it is very difficult to click on small ones.･ Edges (e.g. the menubar in Mac OS) and corners of the computer display (e.g. "Start" button in Windows XP) are particularly easy to acquire because the pointer remains at the screen edge regardless of how much further the mouse is moved, thus can be considered as having infinite width.･ Popup menus can usually be opened faster than pull-down menus, since the user avoids travel.･ Pie menu items typically are selected faster and have a lower error rate than linear menu items, for two reasons: because pie menu items are all the same, small distance from the centre of the menu; and because their wedge-shaped target areas (which usually extend to the edge of the screen) are very large. TAMANHO INFINITO Richard Faust

56 PRINCÍPIO DO AGRUPAMENTO

57 AGRUPAMENTO POR FORMATO
Richard Faust

58 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. Richard Faust

59 PRINCÍPIO DA BAIXA POLUIÇÃO DA TELA
MENOS É MAIS não significa também colocar coisas de menos, o que acabará estendendo os diálogos Exemplo de caso não tratado: tamanho e tipo de fonte. Não tente usar uma fonte para cada menu e não use muitos tamanhos: usuários não percebem a diferença mas notam que está poluído. PENSE POR PAPEL Richard Faust

60 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

61 EQUILÍBRIO NAS DECISÕES
PRINCÍPIO DA FOCALIDADE USABILIDADE DESIGN TECNOLOGIA

62 EQUILÍBRIO NAS DECISÕES
Não há certo ou errado, tudo depende das premissas e critérios que queremos atender

63 Referências Richard Faust

64 REFERÊNCIAS - OS QUERIDINHOS
Apple MAC OS - Apple IPod IPhone MS Windows Vista - Office Google - Gmail Nintendo Wii…

65 HALL OF FAME AND SHAME Há outros… google it!
Há outros… google it!

66 REFERÊNCIAS Dia Mundial da Usabilidade – 03/11
Flex ( e componentes além do básico)

67 REFERÊNCIAS Usabilidade e UI Design Usabilidade e UI Design
Dia Mundial da Usabilidade – 03/11 Usabilidade e UI Design (Larry Constantine) (Jakob Nielsen) Usabilidade e UI Design Patterns e Guias Apple Microsoft

68 REFERÊNCIAS 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

69 cleiton.coradelli@totvs.com.br cleiton.coradelli@gmail.com
MUITO OBRIGADO

70 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.