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 ;
  
  
• Toda interface deve 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
• Mantenha ações (botões, links...) sempre no infinitivo (ex.:detalhar, alterar, comparar...);
• Toda interface deverá apresentar dados e ações;
• O conteúdo é o rei: Dedique 80% dos espaço para os dados do usuário e não apenas 20% para os 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 terá uma interpretação);
• Lembre de adicionar "tooltips" nos objetos que forem importantes;
• (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 para o usuário entender onde estavam os objetos e 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 documento de comportamentos o que o 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 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, ícone) 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 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 e 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