1 / 70

PADRÕES DE INTERFACE NO DATASUL BY YOU

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

hidi
Download Presentation

PADRÕES DE INTERFACE NO DATASUL BY YOU

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PADRÕES DE INTERFACENO DATASUL BY YOU CLEITON LUIZ CORADELLIARQUITETURA DE INTERFACES COM USABILIDADE E DESIGN

  2. HORA DE CORRIGIR OS CAMINHOS

  3. ALGUMAS CONSIDERAÇÕES JÁ NÃO VIRIA TUDO DECIDO?Sim, porémnemtudofoiprototipado, padronizadooucomponentizado NÃO POSSO “CUSTOMIZAR” PADRÕES NO MEU CASO?- Teremosretrabalhoquandoalgumpadrão for atualizado- Fazercoisasparecidas de formasdiferentesconfunde e baixa a qualidade da experiência ISSO DEVERIA SER PREOCUPAÇÃO MINHA?SIM E NÃO. Atécertopontoospadrõesdevemgarantirconsistência, massempreteremosníveisespecíficos a tratar

  4. USABILIDADE

  5. LEIA O TEXTO ABAIXO… Abra a Porta comusabilidadeconseguimosfazerascoisasmaisrapidocommenoserrosecommaissatisfacaoeumaqualidadealcancadaatravesdemecanismosquemuitasvezesnosparecemapenasdetalhesmasquefazemmuitafaltaquandonaotemos

  6. TENTE NOVAMENTE Abra a Porta Agora sim > 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.

  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émteve 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. 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

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

  11. 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)

  12. “FILOSOFIAS” da interface by you

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

  14. O QUE O USUÁRIO QUER? Teruma forma únicaparaacessarosprodutos e interagir com a Datasul Datasul By You • Central de Acessos • Login Unificado • SSO - Integração com SO • SuporteonLine

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

  16. O QUE O USUÁRIO QUER? 1 Ter a atençãogerenciada 2 Decidir 3 Ser conduzidonosprocessos 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

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

  18. INTERFACE EXPLORER – MEIU

  19. INTERFACE EXPLORER – MEIU ORIENTAÇÕES, PADRÕES E EXEMPLOS VERSÃO 1.0 Ricardo Santosricardo.s@totvs.com.br

  20. SITUAÇÕES DA ONDA 2 EM CORREÇÃO

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

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

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

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

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

  26. 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)

  27. 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 • Portletssematalhosalém do detalhar (açõespossíveis)

  28. 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 margensnaesquerda 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élagrupador (ao redor do form)

  29. 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. • Faltatratamento de botãodireito do mouse

  30. 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)

  31. Exemplo do meiuprocure por pasta de interação

  32. Princípiose boas Práticas

  33. DETALHES DETALHESDETALHES…

  34. PLATAFORMAS DE INTERFACE • Windows • Macintosh • Gnome • Web • Adobe Flex/Flash • Vantagens: • usuáriosjáfamiliarizados • guia de estilo • ferramentasparaprototipação e implementação VEJA SLIDES DE REFERÊNCIA

  35. EXEMPLO: NAVEGADOR BI - DO ITUNES

  36. MEMÓRIA • Oliveira • Santos • Goiabada • Cabo • Domingo • Rádio • Origami • Vassoura • Pastel • Amarelo • Distância • Som • Gato • Maracujá • Elefante • Semblante • Ocorrência • Definição

  37. QUANTAS PALAVRAS VOCÊ RECONHECE? • Caixa • Documento • Oliveira • Distância • Ocorrência • Santos • Goiabada • Cabo • Rádio • Som • Vassoura • Cobra • Elefante • Pastel • Velocidade • Definição • Gato • Cachorro • Maracujá • Arquitetura • Amarelo • Semblante • Domingo • Sábado • Origami

  38. RECONHECIMENTO • DECORA • RECONHECE

  39. EVITANDO PROBLEMAS • Os rótulos(labels) devemcasar com a maneiraqueosusuáriospensamsobre a tarefa • Dêalgumretorno - o usuárioprecisa saber o queumaoperaçãorealmente fez…. ouestáfazendoparaaçõesdemoradas • Usuáriosvãoerrar, tentecercá-lo com mecanismos como voltar, máscaras, valores default, auto seleções ?

  40. 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)

  41. CONVENÇÃO – EX.: FECHAR NO CANTO • Gerando interfaces namaneiraqueseuusuárioestáacostumado o deixarámaissatisfeito • menorfrustraçãoinicial e assimmenoransiedade • aprendizagemmaisrápida • reforçanoção do empréstimo • Convençõespassarampeloteste do tempo, qualquerinovaçãoaindanão, teremosproblemasdifíceis de prever • Norman: • Efeito de transferência • Dialetos e Estereótipos da população

  42. CONVENÇÃO

  43. 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 Label Label

  44. 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%

More Related