O documento apresenta padrões e propostas de soluções de navegação e interação para websites, abordando problemas comuns enfrentados por usuários, como navegação complexa e comunicação com a organização. As soluções incluem menus fixos, galerias de slideshow, seções de notícias, formulários de contato e botões de compartilhamento em redes sociais, todas visando facilitar a experiência do usuário. Cada proposta é detalhada com sua aplicabilidade e benefícios, assegurando que a informação esteja acessível e que a interação seja intuitiva.

1. Biblioteca Axure
Patterns e Propostas de Soluções
18/09/2014
Trabalho Grupo
Padrões de Interação AIT9

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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.

13. 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