Advertisement
  1. Web Design
  2. SEO
  3. Conversion

Como Criar um Modelo de Navegação Web

Scroll to top
Read Time: 6 min

() translation by (you can also view the original English article)

Um "modelo de navegação" descreve o caminho para cada objetivo do usuário em um website. Geralmente seu produto terá mais de um usuário, e cada usuário pode ter vários objetivos, então modelos como este podem ser bem extensos. Criar um modelo de navegação também uma oportunidade de revisar qualquer conteúdo existente que você possa ter e entender o contexto no qual você estará criando a estrutura.

Como um web designer, é seu trabalho ajudar os usuários a achar o caminho para o que eles estão procurando. Pode ser fácil colocar as necessidades dos seus usuários de lado, mas entender seus usuários, entender seus papéis, objetivos, motivos e comportamento vão confirmar como você estrutura seu modelo de navegação. Um modelo de navegação bem projetado promove descobertas.

Neste artigo, eu montei um guia de como criar um modelo de navegação, para que seu design de interação suporte os objetivos do usuário, do seu cliente e de outras partes interessadas envolvidas no projeto.

Os Objetivos do Seu Usuário

Antes de mais nada, crie uma persona,

Faça seu dever de casa. Entenda os objetivos do seu usuário, motivações e pontos fracos antes de ir adiante no seu design de navegação.

Por exemplo, vamos dizer que seu produto conecta os donos de cachorros com pessoas que vão cuidar desses cachorros enquanto os donos estão viajando em um feriado. Considere toda informação que os donos dos cachorros irão precisar para alcançar seus objetivos e mapeie os passos envolvidos.

Papel: Dono do Cachorro

Objetivo: Achar um cuidador de cachorro para zelar (incluindo lavar, passear e cuidar) pelo seu cachorro enquanto estão viajando no feriado.

Passos: Encontrar o Cuidador de Cães Perfeito → Agendar e Marcar Online → Viajar com Absoluta Tranquilidade

Considere o que o usuário vai precisar ver e fazer em cada estágio para atingir seus objetivos. Como eles sabem que alcançaram isso com sucesso?

Estabelecendo Níveis de Usuários

É importante entender os níveis de navegação necessários e fazer um plano para cada nível separadamente.

Navigation Model showing Primary users primary goal find a dog minderNavigation Model showing Primary users primary goal find a dog minderNavigation Model showing Primary users primary goal find a dog minder
Modelo de Navegação mostrando os objetivos primários do Usuário Primário (achar um cuidador de cães).

Considere Outros Caminhos do Usuário

Às vezes, existem vários caminhos do usuário para considerar. No exemplo acima, o dono do cachorro que está procurando por alguém pra tomar conta do seu animal de estimação está dependendo de um cuidador de cães, cujas necessidades e motivações variam.

Considere sua audiencia chave, mas também se preocupe com quaisquer 'atores' secundários. Isso vai te ajudar a capturar as estórias do seu usuário, para que você possa planejar sua navegação effetivamente.

Navigation Model showing Secondary users primary goalNavigation Model showing Secondary users primary goalNavigation Model showing Secondary users primary goal
Modelo de Navegação mostrando o objetivo primário dos Usuários Secundários (ganhar dinheiro cuidando de cachorros)

Entendendo o Contexto do seu Projeto

Também considere os objetivos de negócio para o site. No que as partes interessadas estarão envolvidas? Quais são algumas das constantes que você irá encontrar?

Em resumo, seu objetivo é entregar uma interface centralizada no usuário com uma interface intuitiva para usuários, mas também algo que funcione com os negócios envolvidos.

Quais são os Objetivos do Projeto?

Qual tipo de modelo de negócio o seu cliente tem? Eles estão tentando criar uma loja virtual para vender produtos? Ou estão tentando monetizar a inscrição, propaganda... ou alguma outra coisa?

É muito importante entender o resultado desejado–isso irá influenciar como você estrutura sua navegação. Se você não sabe, entreviste as partes interessadas do projeto e explore o problema do negócio com eles mais a fundo.

Uma vez que você elaborou um rascunho do modelo de navegação web, você pode também considerar aonde o produto será utilizado, plataforma, frequência de uso e o que o usuário estará fazendo no momento.

Assegure-se de priorizar seus usuários e esboce as muitas variadas e diferentes jornadas que eles farão para atingir seus objetivos.

Considere Seu Conteúdo

Se você está redesenhando uma navegação web que já existe ou pesquisou websites similares, você terá uma ideia do tipo de conteúdo acessado.

Nesse estágio, cheque as analíticas disponíveis. Observe de qual conteúdo os usuários estão tirando proveito atualmente. Tente entender o que eles estão procurando mais e menos frequentemente.

No exemplo acima, pense sobre a informação que o usuário primário (o dono do cachorro) vai precisar para completar o primeiro passo (achar o cuidador de cães ideal). Antes de fazer a busca, eles podem se importar com a legitimidade do site, ou com cuidadores veterinários. Ou até mesmo entender como funciona o processo do seu site ou aplicação. Nesse caso, você precisa assegurar que a informação está disponível antes de um processo mais direto, como o de se mover até um objetivo, comece. Esse caminho é provavelmente uma experiência única, tida apenas pelos novatos.

Categorização de Cartões

Copyright © 2009 Rosenfeld Media licença Attribution-commercial-Share Alike 2.0

Categorizar cartões é um bom meio de organizar e priorizar sua A.I. (arquitetura de informação), ou revisar conteúdos existentes com os quais você precisa trabalhar, o que pode ajudar você a entender a atual estrutura de navegação.

Preparar algumas das estórias do seu usuário em cartões e organizar eles em grupos podem ajudar você a expandir seu modelo de navegação.

Aqui está uma rápida visão geral sobre categorização de cartões:

  1. Agrupe cartões similares
  2. Empilhe cartões parecidos
  3. Discuta incertezas
  4. Conte cartões parecidos e coloque um número no topo da pilha
  5. Discuta tendências, padrões e questões

Materiais:

  • Marcadores (preto, azul e vermelho)
  • Cartões de Papel
  • Massa Adesiva
  • Adesivos
  • Papel Craft
  • Fita Adesiva

Ferramentas Online:

Há também várias ferramentas de editoração eletrônica e computação na nuvem disponíveis.

Recursos:

Para discussões mais detalhadas e exemplos de categorização de cartões, por favor visite os recursos mais compreensivos a seguir:

Conclusão

Um modelo de navegação web sólido é a espinha dorsal da sua A.I. Uma vez que você completou essa fase do seu projeto com sucesso, você pode considerar criar uma definição de busca (o que os usuários provavelmente vão digitar quando fazem uma busca) e um sitemap (a estrutura das diferentes páginas). Essas são as principais arquiteturas de informação entregáveis, mas existem algumas outras dependendo da natureza do seu projeto.

A fim de criar um modelo de navegação sólido, considere seus usuários e coloque-se no lugar deles.

Ajude-os a superar seus pontos fracos e atingir seus objetivos de um jeito que seja fácil. Considere o contexto em que eles estão utilizando o site. Ele será assimilado em um formato mobile? Eles estarão prontos?

E finalmente, pesquise produtos similares. Veja como outros estruturam caminhos que você está projetando.

Você está trabalhando em um modelo de navegação no momento? Deixe sua opinião abaixo!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.