O site do software Transmit recorre ao convite através da dica da ferramenta em alguns botões. Problema É necessário alertar o utilizador sobre o que irá acontecer caso clique com o rato no botão seleccionado. Quando usar Quando se quer convidar o utilizador a clicar ou interagir com o objecto sobre o qual está o cursor. Quando se quer tornar [...]

Convite Através da Dica da Ferramenta

O site dribbble ���� um bom exemplo do convite atavés do “hover”. Fornece uma resposta imediata, quando o cursor se encontra sobre a área-alvo, que sugere uma acção da parte do utilizador. Problema É necessário alertar o utilizador para a acção que será desencadeada caso clique no botão — recorrendo para isso ao estado “hover” — o [...]

Convite Através do "Hover"

O site Booking disponibiliza um aplicativo de calendário com duas instâncias sucessivas. Problema O utilizador pretende procurar ou submeter uma informação particular baseada numa data ou num intervalo de tempo específico. Solução Layout Por uma data específica: O aplicativo (Widget) de calendário de apenas um mês exibe os dias do mês e ano corrente. Os utilizadores só podem visualizar um mês [...]

Selecção de Calendário

Behance disponibiliza uma lista de imagens ordenável segundo diversos critérios predefinidos. Problema O utilizador precisa de consultar uma lista de dados. Quando usar O utilizador precisa de consultar, reordenar ou pesquisar informação numa longa lista de dados. Solução Deve ser possível ordenar a lista segundo um ou mais critérios. Se for uma lista tabular deve ser possível ordenar através de um [...]

Listas Reordenáveis

Ao preencher o campo de pesquisa no Yahoo, são automaticamente sugeridos termos relacionados. Problema Os utilizadores precisam de introduzir dados no sistema. Quando usar É frequente a informação não ser escrita correctamente. A informação pode ser escrita de múltiplas formas. Há uma vasta lista de opções possíveis, mas a lista é grande demais para se mostrar num menu dropdown. Solução À medida que [...]

Preenchimento Automático

Lista de tags em last.fm. Problema Os utilizadores precisam de categorizar informação inserida no sistema. Quando usar Os conteúdos distinguem-se entre si e podem ser descritos por palavras-chave. Quando for necessário  categorizar conteúdos facilmente. Quando os conteúdos não encaixarem numa estrutura de informação hierárquica. Quando os conteúdos forem criados pelos utilizadores. Quando for necessário pesquisar os conteúdos inseridos, e quando o modelo de [...]

Tags

Nuvem de tags no site Dribbble. Problema Os utilizadores precisam de navegar utilizando tags e/ou de saber quais as tags mais frequentes. Quando usar Quando existirem conteúdos categorizados com tags. Se for necessário pesquisar conteúdos. Quando se pretender ter a noção do tipo de conteúdos mais populares. Solução Mostrar todas as tags numa área do interface. As tags mais usadas podem ser destacadas visualmente. Se [...]

Nuvem de Tags

A lista de artigos do WordPress tem filtros por data e por categoria. Problema Os utilizadores precisam de filtrar a informação de uma lista de dados com base em vários critérios. Quando usar Quando a lista for extensa. Quando for difícil encontrar a informação pretendida. Quando os utilizadores precisarem de consultar apenas informação de uma determinada categoria ou com determinado atributo. Solução Deve [...]

Filtro de Dados

O site da Euronews tem uma ligação para a página inicial presente em todo o site (o logotipo). Problema Os utilizadores precisam de voltar à página inicial (home page) do web site. Quando usar É comum os utilizadores entrarem no web site directamente para páginas internas. O utilizador precisa de encontrar facilmente uma ligação para a página inicial. Solução Tornar o [...]

Ligação para a Página Inicial

O site da Apple — nas páginas em que o conteúdo é extenso — disponibiliza uma ligação para o topo. Problema A página é longa e os utilizadores precisam de ir rapidamente para o topo da página. Quando usar Quando a página for longa. Quando a página tiver um índice no topo com “âncoras” para conteúdos na página. Em FAQ’s e [...]

Ligação para o Topo

A Adobe reserva o espaço à direita – imediatamente a seguir ao logotipo – para a navegação de suporte. Problema Os utilizadores precisam de consultar informação sobre o web site. Quando usar Quando existirem funcionalidades que devam estar presentes em todas as páginas e facilmente acessíveis. Solução Reservar uma área, igual em todas as páginas, que não ocupe muito espaço e [...]

Navegação de Suporte

A Apple disponibiliza “Migalhas de pão” tanto no cabeçalho (na imagem) como no rodapé. Problema Os utilizadores precisam de se localizar e navegar na estrutura hier��rquica do web site, no percurso que fizeram. Quando usar Quando o web site tiver uma estrutura hierárquica fixa. Se o web site tiver uma estrutura hierárquica com mais do que três níveis. Tipicamente aplica-se a [...]

Migalhas de Pão (Breadcumbs)

No formulário de registo do Twitter aparece uma pequena descrição no campo activo, facilitando o preenchimento. Problema O nome do campo só por si não é suficiente para descrever a informação e formato pretendido ou é preciso explicar qual o motivo da existência do campo. Solu��������������������ão Colocar uma explicação textual junto dos respectivos campos. Quando usar Quando o nome do campo [...]

Ajuda no Preenchimento

No Vimeo existem duas opções para a visualização dos resultados de uma pesquisa, encadeadas numa frase Problema Os utilizadores precisam de introduzir dados no sistema. Quando usar Os campos são difíceis de descrever com uma label. Os campos podem ser encadeados numa frase. Os campos são de preenchimento obrigatório. O formulário tem poucos campos. Solução Escrever uma frase, curta e clara. Os elementos de [...]

Preencher os Espaços

No formulário de registo do Linkedin, quando o formulário é submetido com erros, é usada uma mensagem de erro global e mensagens contextuais para cada campo. Problema O utilizador está a introduzir dados e precisa de ser notificado se alguns dos dados não forem introduzidos correctamente. Quando usar Quando o utilizador precisar de introduzir dados no sistema que têm [...]

Mensagens de Resposta

Google Docs, um processador de texto web. Problema Os utilizadores precisam de introduzir conteúdos com formatação visual no sistema. Quando usar Quando o utilizador tiver o conhecimento necessário para fazer uma correcta formatação visual dos conteúdos. Se o utilizador não se sente à vontade a utilizar código para formatar os conteúdos. Se for importante perceber imediatamente como os conteúdos vão aparecer [...]

Editor de Texto Avançado

O serviço reCAPTCHA tem uma opção de áudio que visa ultrapassar alguns obstáculos de acessibilidade, essencial, por exemplo, para utilizadores invisuais. Oferece também a possibilidade de gerar um novo código, útil quando o código visível for difícil de decifrar. Problema Formulários públicos podem ser alvo de ataques de spambots. O sistema tem de verificar se os dados [...]

CAPTCHA

No site da TAP o formulário de reservas tem alguns campos pré-preenchidos com opções comuns, ajudando a maioria dos utilizadores. Problema Os utilizadores precisam de introduzir dados no sistema ou configurar um conjunto de propriedades. Quando usar O utilizador tem de escolher uma de várias opções, e é provável que escolha a mesma de outros utilizadores. O sistema tem a [...]

Definição Inicial

Tolerância

Múltiplos Passos

Acções e Botões

Ordem e Grupos

Preenchimento Obrigatório e Opcional

Labels

Convite ao Cursor

Tabs de Navegação

Paginação

Tabs Modulares