Post on 27-Jul-2015
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