Biblioteca Axure

Patterns e Propostas de Soluções

18/09/2014

Trabalho Grupo

Padrões de Interação AIT9

Padrões Selecionados Menu de navegação horizontal sobrecarregado 1

Galeria slideshow 2

Formulário de contato 4

Caixa de notícias 3

Caixa de comentários Facebook 5

Barra redes sociais 6

Caixa de busca 7

Botão compartilhar Facebook 8

Galeria de fotos

Seletor de datas

10

9

Lightbox 10

Problema Usuário precisa navegar pelo site e encontrar o que está buscando.

Solução Posicionar sempre um menu visível e em uma posição fixa na página, suportando este menu principal com ferramentas adicionais de navegação.

Quando Todos os sites precisam oferecer alguma forma de navegação principal ao usuário.

Como Uma barra horizontal de 5 a 7 itens, que ao clicar em um dos itens, caso possua subitens, uma nova barra horizontal abaixo é disponibilizada como sub menu para navegação local, com 5 a 7 itens também.

Por que Tornar a informação do site acessível para os usuários. Esta solução pode ser utilizada quando é necessário uma navegação local, mas se desejada dar bastante foco e espaço na tela para fotos em grande escala. Deixando o menu apenas acima, possibilita utilizar o máximo horizontal da tela para a imagem

Menu de navegação horizontal sobrecarregado 1

Problema Usuário deseja ver uma série de histórias sem rolar a página ou qualquer outro movimento desnecessário do mouse.

Solução Apresentar em slides uma história por vez, com imagens e texto, por um intervalo especifico de tempo.

Quando Utilizado tipicamente para destacar histórias com o apelo visual de uma imagem

Como Colocar de 4 a 7 histórias com imagens em destaques e um pequeno texto, apresentando-os automaticamente de forma sequencial. Manter um controle manual para a navegação entre os slides, logo abaixo das fotos, com uma barra horizontal de 4 a 7 bolinhas representando a sequencia das histórias.

Por que Faz a informação ser direcionada e chegar mais fácil ao usuário, sem muito esforço, comparando-se com a funcionalidade de uma TV.

Galeria slideshow 2

Problema Os usuários querem saber sobre novidades no conteúdo do site

Solução Adicionar uma seção que contenha o cabeçalho das notícias ordenadas por data de publicações mais recentes

Quando Utilizar em sites que são regularmente atualizados, como por exemplo, em blogs e sites de notícias

Como Alocar uma área separada para notícias recentes, apresentando-as em pequenas descrições com título e imagem. Possui um número limitado de itens por página, mas pode-se continuar a listagem com uma navegação numerada, a partir de uma barra horizontal com o número de páginas.

Por que Quando as notícias são apresentadas na página home, e o usuário apenas precisa ir para uma notícia específica.

Caixa de notícias 3

Problema Os usuários precisam entrar em contato com a organização ou a pessoa por trás do site

Solução Prover uma página dedicada que auxilie o usuário a contatar a organização/pessoa.

Quando É aplicável principalmente para sites e-commerce, prestadores de serviços e/ou corporativos. Prover o contato faz com que o site pareça mais confiável e honesto.

Como A página de contato deve ser de fácil acesso de qualquer página do site. Prover um formulário para contato, requerendo apenas campos relevantes e realmente necessários para se iniciar a conversa com o usuário. A ação de enviar o formulário deve retornar um feedback de entrega da mensagem realizada com sucesso.

Por que Usuários não querem se incomodar em sair do site para procurar por informações de contato, a página e formulário de contato devem ser de fácil acesso e preenchimento.

Formulário de contato 4

Problema Os usuários desejam comentar/opinar sobre um artigo ou produto

Solução Adicionar um pequeno formulário abaixo do artigo que permita o usuário submeter seu comentário e ver o comentário de outras pessoas

Quando A caixa de comentários é utilizada geralmente em blogs, mas pode ser utilizada sempre que se desejar a interação dos usuários com o conteúdo da página.

Como Utilizando o plugin de comentários do Facebook, não há a necessidade de preencher nenhum outro campo de identificação. Os comentários anteriores são posicionados ordenadamente por data e hora, e é possível curtir e responder os comentários de outros usuários.

Por que A caixa de comentários é uma maneira de criar um mecanismo de feedback de um site, usando apenas um formulário.

Caixa de comentários Facebook 5

Problema Os usuários desejam encontrar meios de se comunicar com a marca

Solução Disponibilizar os links das redes sociais e mídias digitais que utilizam para interagir com o usuário

Quando Em qualquer site que utiliza redes sociais e outras mídias digitais para se comunicar com o usuário

Como Disponibilizar em uma linha, os ícones representando cada rede social ou mídia digital utilizada, cada ícone é um link externo redirecionando para a respectiva mídia.

Por que Facilitar o atendimento ao usuário

Redes sociais 6

Problema Usuário precisa encontrar um item ou informação especifica

Solução Oferecer uma ferramenta de busca

Quando Qualquer web site

Como Posicionar a funcionalidade de busca que consiste em uma caixa de texto, um filtro se necessário, o botão de buscar e um texto indicando que é um buscador. Pode ser utilizado junto com um autocomplete, onde, conforme o usuário for digitando na caixa de texto suas palavras-chaves, é fornecido sugestões de palavras de acordo com as combinações de letras já colocadas.

Por que Utilizando isto facilita muito a vida do usuário que deseja praticidade e já entra no site com um objetivo específico

Caixa de busca 7

Problema Usuário quer informar outras pessoas sobre alguma coisa que ele encontrou

Solução Oferecer a possibilidade de compartilhar o conteúdo no Facebook

Quando Quando você está tentando vender ou divulgar coisas, os usuários podem achar legal e ter amigos com interesses parecidos

Como Utilizar o plugin compartilhar do Facebook, onde é disponibilizado um botão “Compartilhar” na página, e se caso o usuário já estiver conectado com o seu perfil do Facebook, o botão já reconhece o perfil e o compartilhamento pode ser feito em apenas um clique

Por que Porque os usuários gostam de interagir e compartilhar conteúdos que encontra com amigos, muitas vezes pela rede social Facebook mesmo.

Botão compartilhar Facebook 8

Problema Usuários precisam selecionar uma data ou período de tempo

Solução Usar uma combinação de caixa de texto e uma interface gráfica de um calendário

Quando Utilizar quando é preciso selecionar uma data simples em um formulário.

Como Posicionar uma caixa de texto para o campo de data, quando este é clicado/focado, abre-se uma interface gráfica de um calendário, onde se é possível navegar e selecionar a data desejada. Ao selecionar a data, a caixa de texto é preenchida no formato correto, evitando inconsistências.

Por que Usuários já estão bem familiarizados com calendários. Isto permite que eles consigam selecionar a data mais rapidamente.

Seletor de datas 9

Galeria de fotos 10

Problema Usuário deseja ver fotos e imagens

Solução Apresentar uma galeria ou vitrine com várias fotos e imagens organizadas e em formatos padronizados

Quando Tipicamente quando o site utiliza muitas imagens e precisa apresentar fotos ou outros trabalhos gráficos

Como Organizar as imagens em uma estrutura de tabela, onde se pode colocar as fotos de maneira padronizada em colunas e linhas. Manter um controle manual para a navegação, caso haja mais de uma página, logo abaixo das fotos, com uma barra horizontal com números representando a paginação.

Por que Facilitar a visualização das imagens para o usuário, onde ele pode ter uma visão panorâmica de todo as imagens, para depois ir para mais detalhes se desejar.

Lightbox 10

Problema Usuário deseja visualizar com mais detalhes uma imagem ou foto

Solução Tirar o foco da página escurecendo a tela e utilizar o espaço do navegador para expandir a imagem

Quando Quando se há a necessidade de apresentar muitas fotos e imagens em uma página

Como Apresentar uma miniatura da foto, que apresenta a foto expandida ao se clicar na miniatura. A foto é apresentada em foco, utilizando a resolução disponível no navegador, se escurece ou esconde as outras informações que estão na página.

Por que Facilitar a visualização das imagens para o usuário, onde ele pode ter uma visão mais detalhada de todas as imagens com foco total