Histórico da Página

Home

Visão Geral

Este artigo apresenta um conjunto de informações para o auxílio das boas práticas e orientações gerais sobre as interfaces.

• Busque cobrir as tarefas seguindo a filosofia By You: Monitorar, Detalhar e decidir, Agir, Comportailhar Mantenha ações (botões, links...) sempre no infinitivo (ex.:detalhar, alterar, comparar...) ;
  
  
• Toda interface deve ter ser composta de dados e ações;;
  
  
• Simples primeiro, avançado depois: Busque abordagens simples (microondas) e depois as avançadas (crisp, descongelar,...);
  
  
• Paretto, paretto, paretto: Em vários níveis. A lei de Paretto diz que por exemplo 80% do faturamento de uma empresa vem dos 20% de maiores ou mais importantes clientes. Usamos Paretto para focalidade. Desde a decisão do papel mais importante, passando por casos de uso, campos e açoes. E neste contexto, o O conteúdo é o rei: Dedique 80% dos espaço pro aos dados não pros controles;
• Tente alinhar números sempre à direita;
• Deixe a largura dos campos no tamanho dos seus caracteres no banco;
• Use sempre nas janelas/folders o controlbar no rodapé e o Applicationcontrolbar no cabeçalho;
• Evite abreviaturas: com Flex temos mais possibilidades de estados e portanto espaços;
• Defina os estados dos portlets (pequeno, médio e grande);
• Evite ícones sem label (cada usuário vai ter um interpretação);
• Lembre de adicionar tooltips nos objetos que forem importantes;
• para os dados do usuário e apenas 20% para os controles (ações); Dedidque também espaço e energia aos 20% de funcionalidades que resolvem 80% dos problemas. Só inivista naquilo que merece ou dará retorno; Se o mercado usa, copie, convenção (veja templates do ByYou);
  
  
• Seja consistente, repita padrões para tarefas parecidas, não reinvente a roda, já temos várias...busque das interfaces já geradas no By You idéias as metáforas e abordagens para cobrir o seu caso de uso;
  
  
• O design influencia no uso, lembre de espaços e ancoramentos (layout constraints);
  
  
• Menos é mais: Exiba sempre apenas a quantidade de campos que é necessária para aquele papel e aquele caso de uso. Evite "scrollbars". Os demais podem ser acionados sob demanda;
  
  
• Dê feedback, sempre, o tempo todo, converse com o usuário, diga o que está havendo...
  
  
• Usuários erram sempre, evite, cerque-o, guie-o, use máscaras, componentes prontos...;
  
  
• Evite ao máximo janelas de alerta!!!!! Prefira mensagens toaster ou labels no contextos (próximos de onde ele estava lendo);
  
  
• Lei de Fitts -  usuários não mira, ele apenas "joga" o mouse - os extremos da tela são "infinitosUtilize  o ícone de information nos campos importantes e/ou complexos;
  
  
• Verifique se é aplicável arrastar e soltar nas entidades e o que ocorre ao soltar;
  
  
• Considere a utilização de botão direito nas entidades e objetos (menu contextual);
  
  
• Para volumes de dados, considere totais no cabeçalho ou rodapé;
  
  
• Em interfaces com estados, procure usar animações pro para o usuário entender onde estavam os objetos e pra para onde eles foram;
• O design influencia no uso, lembre de espaços e ancoramentos (layout constraints);
• Mantenha os formulários com labels em cima, campos abaixo por causa da internacionalização;
  
• Procure ter sempre uma ação focal (focalButton);
• Ao haver muitas ações deixe as mais focais em destaque (botões) e agrupe as subfocais em controles como combobox;
• 
  
• Muitas vezes é possível evitar termos "várias interfaces" usando o conceito de estados do Flex;
  
  
• Para acelerar as entregas, ao invés de prototipar, registre os alguns dos comportamentos da interface no documento previsto na metodologia para isto (UI Comportamentos), isto acelera entregas porém prejudica testes com maquetes;
  
  
• Considere no documeto documento de comportamentos o que o queo usuário pode fazer via teclado (combinações e atalho);
  
• Considere a utilização de botão direito nas entidades e objetos (menu contextual);
• Deixe claro com asterisco ( * ) o que é de preenchimento ou resposta obrigatória;
• 
  
• Agrupe os vários campos de uma entidade por assunto usando um label Agrupe - Agrupe o maximo que puder, entre controles e dados, entre dados e sempre que possível. As várias informações de um entidade por exemplo, agrupamos por assunto usando um "label" em negrito e um "Hrule" (ex.: dados de entrega, dados de cobrança);Quando houver uma ação (botão,link,icone) que abre ou expande um outro painel, utilize a seta de abre/fecha do framework;
  
  
• Para informações apresentadas em "datagrids", considere também o modo gráfico que permite verificar tendências em grandes volumes de dados;Os ícones para mudar entre modo gráfico e modo lista são os mesmos dos portlets;
  
  
• Ao utilizar gráficos, lembre de aplicar legendas e da possibildade de mostrar os valores diretamente no gráfico;
  
  
• Os graficos gráficos podem exibir mais dados ao haver o evento de mouse over nas séries, explore esta possibilidade para manter o gráfico simples;
• No modo portlet pequeno as legendas e dados nas séries devem ser evitados dando preferência ao mouse over/tooltips;
• O padrão de botões para janelas / folders de confirmação é Confirmar e Cancelar;
• Exiba no datagrid apenas a quantidade de campos que é sempre necessária. Evite scrollbars. Os demais podem ser acionados pelo usuário através do GridOptions;
• Para partes das interfaces ou navegadores e similares, utilize o objeto painel do Flex. Considerando também que pode-se utilizar o super panel que pemite maximizar;
• Menos é mais  - Apenas os campos e ações necessárias para aquele papel e para aquele caso de uso em questão;
• Não reinvente a roda, já temos várias...;
• Simples primeiro, avançado depois;
• Paretto, paretto, paretto;
• Seja consistente, repita padrões, não proponha algo diferente quando o UC for igual ou parecido com algo já existente;
• Dê feedback, sempre, o tempo todo;
• Não utilize alerts !!!!! Prefira toaster ou labels no contextos (próximos de onde ele estava lendo);
• Usuários erram sempre, cerque-o... evite, guie, use máscaras, componentes prontos...;
• Se o mercado usa, copie, convenção;
• Só inivista naquilo que merece ou dará retorno;
• Lei de Fitts - Os extremos da tela são "infinitos" - usuário não mira apenas "joga" o mouse;
Agrupe - Agrupe o maximo que puder, entre controles e dados, entre dados e sempre que possível.
• .
  
  

Referências

Padronização e ergonomia de Interfaces By You Flex

Veja Também