Componentes da Interface

Tabelas

Habitualmente as tabelas são usadas para apresentar conteúdos complexos e com diversas categorias. A apresentação desta informação torna-se uma tarefa quase impossível quando lidamos com dispositivos móveis com limitações de espaço devido a ecrãs de pequena dimensão e resolução.

Algumas regras básicas para apresentar tabelas em dispositivos móveis:

  • Rodar o dispositivo deveria ser um último recurso - quando se roda o telefone para uma vista horizontal, o espaço ganho em largura é diretamente inverso ao espaço perdido a nível vertical.

     
    Exemplo de visualização horizontal vs. vertical
     
    Exemplo de visualização horizontal vs. vertical
  • Indicar claramente se o scroll horizontal é necessário - existem muitos casos onde será necessário disponibilizar um scroll horizontal porque há mais conteúdo do que é possível apresentar. Nestes casos, para se conseguir que seja óbvio para o utilizador a utilização do scroll horizontal, deverá ser apresentado o conteúdo cortado ou em alternativa apresentar setas que indiquem que há mais conteúdo na horizontal.

     
    Exemplo de indicação visual de mais conteúdo horizontal
     
    Exemplo de indicação de mais conteúdo horizontal com o uso de setas
  • Deixar o utilizador escolher a informação a visualizar - quando o espaço disponível não possibilita apresentar toda a informação, deveremos dar ao utilizador a possibilidade de filtrar a informação, para que possa selecionar a informação útil.

     
    Exemplo de como apresentar filtros
     
    Exemplo de como apresentar ordenação
  • Utilizar acordeões para grupos de dados - se o conteúdo inclui dados que conseguem ser agrupados em categorias lógicas, então poderá fazer sentido a utilização de um acordeão. Assim o utilizador consegue ter uma ideia geral do conteúdo, observando as categorias; e ter um acesso mais direto a informação que considera útil.

     
    Exemplo de agrupamento de conteúdos e uso de acordeões
  • Utilizar ícones e cores - com o uso correto de cores e ícones, o utilizador consegue distinguir os conteúdos da tabela de uma forma mais fácil e comparar dados de uma forma mais eficaz.

     
    Exemplo de como usar cores e ícones