Olá amigos.

Chegamos a terceira e ultima parte da nossa série sobre como construir um Projeto de Navegação Web. Se caso perdeu os outros dois, basta clicar no link abaixo:

Como construir um projeto de navegação web – Parte 1

Como construir um projeto de navegação web – Parte 2

Nesse post irei expor os 5 últimos fatores de sucesso que levam a excelência em um projeto de navegação web de acordo com o livro Web Navigation – Designing the User Experience e falaremos sobre wireframes.

 

Modelos de Wireframes

Let’s go.

  1. Garantir economia de tempo e ações: O website deve ser projetado de maneira que o usuário encontre o que procura rapidamente, evitando caminhos desnecessários. A utilização de atalhos, mapa do site e breadcrumbs são excelentes saídas para websites grandes. Formulários não devem ser extensos, dependendo do número de dados que precisa do usuário é aconselhável que o formulário seja separado em 2 ou 3 etapas e os campos possuam total usabilidade, como o campo que receberá o CPF pode ser aplicado uma máscara para minimizar a chance de erro do usuário.
  1. Prover mensagens visuais claras: Como dito anteriormente o design ser apenas bonito não basta. Deve ser funcional e oferecer meios que guiem o usuário e ele não se perca na navegação.
  1. Criar nomenclaturas claras: Procure falar a língua do usuário, determinados termos não devem ser aplicados em determinados sites, por exemplo, dependendo do site não é viável usar a palavra “home” e sim o termo “Página Inicial”, não se esqueça do nosso mantra apresentado no nosso post anterior!
  1. Seguir o propósito do site: É importante ter a consciência de oferecer ao usuário apenas o que é necessário, nem a mais nem a menos. Páginas irrelevantes confundem e frustram o usuário e faz com que o mesmo se desinteresse pelo website.
  1. Apoiar e ajudar os objetivos do usuário: Último e mais importante fator de sucesso. As perguntas: “o que as pessoas vão querer fazer?” e “como elas vão se comportar?” são a base para projetar uma navegação eficiente, atendendo os dois pontos que falamos desde o inicio dessa série de posts: rápida e intuitiva.

Wireframes

O wireframe é um desenho estrutural, funciona como uma planta do website, ele organiza os requisitos funcionais de um sistema, explanando as exigências do usuário. O wireframe é sem duvida a melhor ferramenta para realizar a modelagem da interface em conjunto com planejamento da navegação e teste da usabilidade. Também serve como um meio de comunicação com os clientes e todos os demais envolvidos no projeto, onde é testado se o projeto atende todas as necessidades.

Podemos observar na imagem acima que o wireframe é simples, nada de cores ou imagens. Antigamente era desenvolvido em softwares de edição de imagem como Photoshop, Gimp, Fireworks…, onde o desenvolvedor desenhava página por página. Porém o teste de navegação ficava comprometido, já que não havia como navegar de imagem em imagem. Mas isso é passado! Hoje há no mercado softwares para produção de wireframes que simulam uma navegação de alta fidelidade, como é o caso do Axure RP, ProtoShare, Justinmind e Irise.

É isso meus amigos, espero que vocês tenham gostado da nossa série de posts. Deixe seu comentário abaixo caso tenham dúvidas, sugestões, críticas, elogios…

Nos vemos em breve.

Sucesso!!!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *