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 claro que algo acontecerá quando o utilizador clicar no objecto sobre o qual está o cursor.
• Quando o utilizador está a interagir directamente com o objecto (ex: rating).
• Quando necessitamos de uma descrição textual que torne explícita a acção desencadeada caso o utilizador interaja com o objecto.
• Quando queremos levar o utilizador a interagir com um recurso.

Solução

• Fornecer um "aviso da ferramenta/tooltip" — após o "hover" do rato sobre a área de interacção — que sugira uma acção da parte do utilizador.
• Mostrar o "aviso da ferramenta/tooltip" o mais rápido possível (menos de 1/4 de segund) ou imediatamente após o "hover" do rato sobre a área de interacção.
• Manter o "aviso da ferramenta/tooltip" visível enquanto o rato não sair da área de interacção.
• Esconder o "aviso da ferramenta/tooltip" quando o rato sair da área de interacção.
• Fornecer uma frase curta que sugira uma acção da parte do utilizador.
• Utilizar frases verbais, tais como "Clique para editar".

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 qual é criado quando o cursor se encontra sobre o mesmo.

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 claro que algo acontecerá se o utilizador clicar no objecto sobre o qual está o cursor.
• Quando o utilizador está a interagir directamente com o objecto (ex: rating / feedback / feedforward).
• Quando queremos levar o utilizador a interagir com um recurso.
• Quando a interacção do utilizador for baseada num estado (ex: rating, flag no mail, etc.).

Solução

• Fornecer uma resposta imediata, quando o cursor se encontra sobre a área-alvo, que sugira uma acção da parte do utilizador.
• Mostrar ao utilizador o que acontecerá caso clique no objecto sobre o qual se encontra o cursor.
• Pré-visualizar o estado final, mas de forma ligeiramente contrastada (normalmente recorrendo à mudança de cor ou da linha), por forma a indicar que está apenas a pré-visualizar o estado final. Contudo, este estado deve ser o mais aproximado possível do estado final, ou seja, aquele com que o utilizador se irá defrontar após clicar no objecto.
• Possibilitar ao utilizador agir mediante interacção directa com o objecto.
• Se o objecto for de escrita única (como por exemplo a maioria dos comentários), não faz sentido manter o convite através do "hover" a partir do momento em que a acção for realizada. Se o valor do objecto puder ser mudado (assinalar um email com "flag"), o convite através do "hover" deve manter-se activo.

Porquê usar este padrão

Visto querermos uma resposta ou acção da parte do utilizador, devemos socorrer-nos de técnicas que são visualmente estimulantes e simples no que concerne à interacção. Contudo, nem sempre envolvem os controlos normais de interface do utilizador. Ao estimular o utilizador com o "hover", tornamos a interacção tão simples e leve quanto possível, e aumentamos a probabilidade do utilizador recorrer às ferramentas postas à disposição.

Acessibilidade

Para tornar o convite ao cursor através do "hover" acessível a tecnologias assistivas, recorra às seguintes técnicas:

• Considere definir o foco nos items em "hover". Isto possibilitará ao utilizador navegar utilizando — alternadamente e à consideração do mesmo — o rato e/ou o teclado para a navegação. Para além disso, as tecnologias assistivas detectarão a mudança no "focus" e procederão à leitura do texto.
• Se o item tem uma imagem (como num item de menu), coloque a imagem "inline" no texto e defina o texto ALT para transmitir o estado do item (por exemplo: menu aberto, menu fechado, ou desligado). Se não tiver uma imagem, pode usar uma imagem pequena de preenchimento (1x1 pixel), e colocá-la incluída no texto. Isto permitirá que a tecnologia assistiva leia o texto ALT à medida que lê o texto inline.
• Além de comunicar o estado, o texto do ALT também pode comunicar o convite. Pode por exemplo, num sistema de menu, colocar o seguinte texto ALT num item do submenu: "As opções de pesquisa estão escondidas Clique para as tornar visíveis." Um bom efeito colateral é o facto do Internet Explorer mostrar o texto ALT como uma dica, se nenhum atributo TITLE for especificado.
• Dê suporte à activação do item através do teclado.

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 de cada vez. Contudo, navegando no aplicativo de calendário poderão visualizar os meses seguintes ou anteriores.

Num intervalo de tempo:

• O aplicativo de calendário de dois meses exibe dois meses consecutivos ao mesmo tempo.
• Navegando no aplicativo de calendário é exibido o mês seguinte na sequência. O mês situado no bloco à direita move-se para a esquerda e o mês seguinte na sequência aparece no bloco direito.

Interacção

Seleccionar apenas uma data com uma instância:

1. É apresentado ao utilizador um ícone de calendário onde pode clicar para seleccionar outra data (dia, mês ou ano), através de uma caixa de opções (pulldown).

2. O utilizador clica no ícone de calendário e o aplicativo de calendário é aberto e posicionado por baixo dos formulários de escolha de data de modo a não se sobrepor. A data por defeito será o dia actual.

3. O utilizador pode escolher uma data da representação gráfica do calendário ao clicar numa das datas activas. Estas datas podem ser no futuro ou no passado dependendo do âmbito da informação e da tarefa a executar.

4. Clicando numa data no aplicativo de calendário de apenas um mês, é registada a data como uma opção de selecção e o aplicativo de calendário fecha.

Seleccionar um intervalo de tempo em duas instâncias sucessivas:

O site easyjet disponibiliza um aplicativo de calendário com duas instâncias sucessivas.

1. É exibido ao utilizador um ícone de calendário que pode clicar em alternativa à primeira caixa de opções para a selecção do primeiro campo de data do formulário de escolha de data.

2. O utilizador clica no icone de calendário e o aplicativo de calendário é aberto. Por defeito, a data seleccionada deverá ser a actual.

3. O utilizador selecciona uma data de começo do intervalo de tempo.

4. O utilizador repete o passo nº.2 para o icone de calendário associado ao segundo campo de data para abrir o aplicativo de calendário.

5. A data por defeito exibida no aplicativo de calendário para o segundo campo deverá ser subsequente à do primeiro campo (não é a actual).

6. O utilizador escolhe a data final para determinar o intervalo de tempo.

7. À medida que cada data é escolhida, deverá ser exibido ao utilizador feedback visual sobre a data que seleccionou.

8. Assim que ambas as data estão seleccionadas, o sistema regista o intervalo de tempo com uma opção de selecção e o aplicativo de calendário fecha.

Seleccionar um intervalo de tempo numa instância apenas:

O site Google Analytics disponibiliza um aplicativo de calendário com uma instância apenas.

1. É exibido ao utilizador um ícone de calendário que pode clicar em alternativa às duas caixas de opções para a selecção de datas no formulário. Por defeito, a data deverá ser a actual.

2. O utilizador selecciona uma data de início e uma data final para definir o intervalo de tempo por forma a limitar uma procura. É exibido ao utilizador um aplicativo de calendário com dois, ou mais, meses simultaneamente. Navegando no aplicativo de calendário é possível visualizar meses passados ou futuros, um mês de cada vez.

3. À medida que cada data é escolhida, deverá ser exibido ao utilizador feedback visual sobre a data que seleccionou.

4. Assim que ambas as data estão seleccionadas, o sistema regista o intervalo de tempo com uma opção de selecção e o aplicativo de calendário fecha.

Quando usar

• Quando o utilizador que interage com uma aplicação ou experiência pretende escolher facilmente uma data ou um intervalo de tempo para um campo de introdução de informação. Isto inclui contextos onde a aplicação ou experiência requer que seja aplicada uma data ou um intervalo de tempo por forma a encontrar, filtrar ou ordenar informação.
• Cenários comuns incluem eventos, tarefas e compromissos; bem como informação útil disponibilizada em ordem cronológica ou inversa, tal como blogs, imagens e mensagens de email.

Porque utilizar este padrão

• O aplicativo de calendário fornece um interface gráfico familiar por forma que o utilizador possa facilmente seleccionar uma, ou múltiplas datas utilizando uma metáfora familiar em alternativa a interfaces mais difíceis de utilizar como caixas de opções e caixas de texto.
• Adicionalmente, a utilização do aplicativo de calendário garante a correcta introdução de informação de datas evitando erros de escrita e reduz o registo de informação errada.

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 clique nos cabeçalhos das colunas. Um segundo clique no botão/link de ordenação pode reordenar no sentido inverso. Deve ser sempre assinalado qual o critério de ordenação activo e se a ordem da coluna é ascendente ou descendente.

Outros Exemplos

eBay também permite ordenar a lista de produtos por diversos critérios.

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 o utilizador vai escrevendo é mostrada uma lista de sugestões numa caixa por baixo da caixa de texto.
• A sugestão mais próxima do texto introduzido pelo utilizador deve aparecer em primeiro lugar na lista.
• Deve ser possível escolher uma das sugestões do menu usando o teclado ou o rato.
• Se possível, mostrar informação adicional sobre o item na lista de sugestões, para que seja mais fácil de identificar.

Outros Exemplos

Campo de pesquisa do Last.fm.

Campo de pesquisa do Google.

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 pesquisa for feito com base em palavras-chave.
• Quando for necessário ver conteúdos relacionados.

Solução

Permitir aos criadores dos conteúdos categorizar livremente os mesmos com utilização de palavras-chave, sem a imposição de um conjunto de categorias pré-estabelecido. Posteriormente deverá ser possível ver todos os conteúdos categorizados com uma determinada tag ou um conjunto de tags.

Outros Exemplos

Tags ordenadas alfabeticamente em dribbble.com.

Formulário de bookmarks no site Delicious.

Lista de tags de uma fotografia no site Flickr.

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 o número de tags for muito grande para a área disponível,  atribuir um número máximo de tags visíveis ou ver apenas as mais frequentes.
• As tags devem ser clicáveis para possibilitarem a visualização de todos os conteúdos associados.
• A nuvem de tags deve estar organizada por ordem alfabética.

Outros Exemplos

Nuvem de tags do blog Abduzeedo.

Nuvem de tags da web magazine Scrunchup.

Nuvem de tags em Gadgeterija.

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 haver um conjunto de controlos que permitam visualizar apenas uma parte da informação. Por exemplo, visualizar apenas uma categoria ou informação com determinados atributos.
• Os filtros permitem reduzir a quantidade de informação visível e mostrar apenas a informação que se pretende consultar.
• Esses controlos podem ser dropdown boxes ou listas de opções como radio buttons e checkboxes.
• Quando existirem muitos controlos de filtragem e os utilizadores precisarem de aceder, com frequência, a filtros complexos , é importante ter uma funcionalidade que permita gravar esses filtros para, posteriormente, poderem ser facilmente utilizados.
• Como se trata de listas extensas pode ser necessário aplicar um sistema de paginação.

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 logotipo do web site uma ligação para a página inicial.
• Se o web site não tiver um logotipo deve existir uma ligação para a página inicial em todas as páginas.
• A ligação deve estar sempre no mesmo local, em todas as páginas.
• A ligação deve estar localizada no topo da página.

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 em páginas com múltiplos artigos.

Solução

Colocar uma ou várias ligações que direccionam o utilizador para o topo da página. As ligações devem ser colocadas em locais como finais de parágrafos, artigos ou secções. Isto permite aos utilizadores voltarem rapidamente para o topo da página sem terem de fazer scroll.