Os Fundamentos do Redesign de Site - Um Estudo de Caso

Não é incomum terminar um projeto de redesenho de um site apenas para olhar para trás e pensar: “Eu teria feito as coisas de maneira diferente se soubesse o que sei hoje”.

Todos nós já estivemos lá. Ficamos empolgados com um novo projeto, brincamos com o cliente, assinamos contratos e começamos a criar protótipos. A vida parece boa, mas as fundações do projeto são instáveis.

Inevitavelmente, as revisões e o aumento do escopo começam a aparecer assim que o primeiro conceito de design é apresentado, e é ladeira abaixo a partir daí. A comunicação desmorona, nada sai como planejado e, finalmente, o site recém-projetado se assemelha à monstruosidade que você foi contratado para consertar.

O design de classe mundial e a experiência do usuário não começam com uma maquete bonita - são fundamentados no planejamento estratégico e em uma visão de design que se concentra nos objetivos da empresa. O objetivo principal não pode ser “Vamos fazer um site mais bonito”.

Os designers de sites são responsáveis ​​pela experiência do usuário (UX) e pela interface do usuário (UI). É nosso trabalho garantir que os usuários tenham uma experiência ideal ao interagir com as interfaces que projetamos. Isso requer um planejamento completo desde a concepção do projeto.

Este artigo descreve um processo confiável que ajudará a garantir que a próxima reformulação do seu site seja construída sobre uma base sólida.

O valor do redesenho do site Pesquisa pré-projeto

Para demonstrar o processo, vamos percorrer as fases de uma reformulação do site concluída para a Archaeology Southwest, uma organização sem fins lucrativos que explora e protege sítios arqueológicos no sudoeste dos Estados Unidos.

Após uma investigação preliminar do campo e da concorrência do cliente, inspecione de perto todos os ativos do site disponíveis. Essa análise é cobrada separadamente e ocorre antes que uma cotação do projeto seja escrita. Trabalhar dessa maneira evita estimativas ambíguas ou infladas que resultam quando os web designers tentam explicar problemas que podem rastejar para a superfície posteriormente em um projeto.

No caso da Archaeology Southwest, me deparei com um site que precisava urgentemente de atenção – montanhas e montanhas de conteúdo desordenado dentro de um antigo portal CMS. Era ruim, então comecei a criar ordem.

Passo 1: Familiarize-se com o conteúdo

Ao reformar uma casa, é importante tentar recuperar materiais valiosos antes do dia da demolição. O mesmo princípio se aplica ao design do site. Você precisa percorrer o site página por página e retirar todo o conteúdo. Como designers, devemos descobrir qual conteúdo merece ser um tipo de postagem exclusivo e quais páginas são estáticas.

Feito isso, crie uma estratégia de como organizar tudo, mas não decida qual conteúdo deve ficar e o que deve ser removido. Por que não?

Ao lidar com empresas e organizações do mundo real, há várias pessoas diferentes responsáveis ​​pelo conteúdo de um site, e a quantidade de conteúdo existente pode ser impressionante. A melhor abordagem é classificar tudo primeiro.

Eu normalmente começo com a navegação principal e vou página por página. Dessa forma, terei a arquitetura da informação e o mapa do site prontos antes da primeira reunião com o cliente.

Infelizmente, o site da Archaeology Southwest não era típico. A maioria dos links não era acessível por meio da navegação superior e ficava oculta no conteúdo. Eu teria uma surpresa desagradável se tivesse citado o projeto baseado apenas na navegação.

Ao conversar com várias pessoas da equipe do cliente, consegui ter uma visão melhor do escopo do projeto e, após uma reunião com o cliente, pude identificar o foco, o fluxo de trabalho, o conteúdo e os recursos do site. A partir daí, criamos os seguintes tipos principais de conteúdo (alguns novos, outros existentes):

Etapa 2: criar foco. Simplificar. Organizar.

Depois que todo o conteúdo estiver organizado em caixas rotuladas, é hora de desenvolver o plano para uma nova estrutura, que mostrará o conteúdo em sua melhor forma. Mas primeiro, precisamos criar foco.

De acordo com a Archaeology Southwest, as pessoas visitam seu site para pesquisar informações sobre projetos em andamento, saber sobre os próximos eventos e ler uma revista mensal. Essas atividades respondem à pergunta: “ O que as pessoas fazem no site?” mas não revele por que as pessoas visitam o site em primeiro lugar.

O “ porquê ” é o foco do site. Para encontrar o foco, olhe para o núcleo da organização.

Neste caso, identifiquei “localização” como o coração da Arqueologia Sudoeste. Sem localização, não haveria sítios arqueológicos, ruínas e certamente não haveria museus ou exposições. Tudo na arqueologia se relaciona com a localização.

Com um foco identificado, podemos simplificar e organizar. Para a Archaeology Southwest, comecei dividindo o conteúdo em categorias que não estavam relacionadas a locais, como páginas de equipe e relatórios anuais. Depois de uma pequena arrumação, acabei com este mapa grosseiro:

A imagem acima representa as duas áreas principais que surgiram: Coisas para fazer e Locais . Coisas a fazer (à esquerda) abrange atividades que um visitante do site pode aprender e fazer. Locais (à direita) concentra-se no conteúdo do site relacionado a locais específicos. Por que estruturar dessa forma?

A ideia é que um usuário comum pode não saber o nome de um vídeo ou projeto, mas provavelmente saberá o nome de um local. Dessa forma, os visitantes podem encontrar conteúdo relacionado à localização.

Além disso, cada bloco de cor em Locais representa um tipo de postagem exclusivo. Do ponto de vista organizacional, exposições, aulas e exibições online são eventos de natureza diferente.

No antigo site da Archaeology Southwest, havia páginas estáticas separadas para uma revista e uma loja online onde os visitantes podiam comprar a revista. Para simplificar a compra, integrei uma opção de compra no template da revista.

A estrutura organizacional restante era simples:

• Uma página “Sobre” para saber mais sobre a organização
• Um link direto para a página "Loja"
• Uma página de “Doação”
• Uma nova página "Atualizações"

As páginas de loja e de doação são geradoras de dinheiro, por isso era essencial incluí-las na navegação principal.

Quando o plano organizacional estiver concluído, é hora de conectar o conteúdo real.

Etapa 3: envolva o cliente

O mapa do site inclui tipos de página, mas não inclui o mapeamento de conteúdo. Web designers experientes sabem que a maioria dos problemas ocorre quando um cliente começa a adicionar conteúdo ao seu site. Para evitar esse problema, mantenha o cliente em loop desde o início.

Para o Archaeology Southwest, criei um Google Doc que incluía o mapa do site e pedi ao cliente para mapear seu conteúdo antigo com a nova estrutura.

Se algo não se encaixava, abordamos isso mais tarde. Este é um passo crítico. Por quê? Além de envolver o cliente no processo, ele descobre problemas com a estrutura antes do início da implementação.

Nesse caso, alguns itens do menu do mapa do site foram alterados e, como o cliente tinha várias páginas de doação, fazia sentido criar um tipo de postagem exclusivo apenas para isso.

Crie uma estrutura visual por meio de wireframes

Nesta etapa, começo a dar ao trabalho uma estrutura visual. Para que o sistema funcione bem e integre com sucesso a noção de que “tudo está relacionado à localização”, criei uma relação bidirecional entre os tipos de postagem.

Aqui está a ideia básica: quando os visitantes acessarem o site da Archaeology Southwest e selecionarem o Grand Canyon, eles verão informações sobre esse local, mas também encontrarão informações relacionadas a projetos, eventos, exposições e tudo o mais que os administradores do site marcam como localização. específico.

Como o link é bidirecional, os visitantes também podem chegar ao Grand Canyon visitando uma página do projeto. Enfim, acabei com isso:

A página de índice de locais mostra todos os locais com o mais recente no topo. A barra de pesquisa é a primeira coisa que o usuário vê ao chegar na página. O mapa do Google ocupará cerca de 80% da tela. Isso permite que os usuários escolham pontos no mapa e, à medida que rolam ou pesquisam, a grade da lista será exibida.

Em uma única página de localização, o corpo principal fica à esquerda, pois é a informação mais importante. As metainformações relacionadas são secundárias, portanto, estão à direita. Para obter um layout bem equilibrado, é crucial ter uma hierarquia distinta entre os blocos do primeiro, segundo e terceiro elemento. Isso permite que o olho se mova sem esforço entre as seções.

No layout Arqueologia Sudoeste, o olho do usuário começa com o cabeçalho, depois se move para o bloco de conteúdo e, finalmente, segue para a barra lateral direita. Cada parte do conteúdo relacionado é exibida em ordem de relevância. Por exemplo, se o usuário estiver lendo sobre o Grand Canyon, esse conteúdo provavelmente será seguido por fotos e um mapa.

Como este é principalmente um site educacional, é importante ter uma opção “Relacionado a este local”. No entanto, não há muito conteúdo associado exclusivamente a cada local, então combinei conteúdo raramente usado (mas relacionado) em um único bloco sob o corpo.

Colocar miniaturas de revistas e vídeos em conteúdo relacionado adiciona elementos visuais adicionais e direciona os usuários para a página “Comprar”. A página é concluída mostrando locais relacionados. Esta é uma ótima maneira de atrair os usuários para explorar ainda mais o site. O próximo passo é continuar essa estrutura para outros tipos de postagem.

Forneça à página inicial um objetivo claro

Com um modelo geral para tipos de postagem, posso me concentrar na página inicial. A primeira etapa é definir o objetivo da página inicial – essa é uma parte importante do design da interface do usuário. A pesquisa do cliente mostrou que muitos usuários se deparam com o site sem entender completamente o que é. Portanto, uma introdução e um texto de boas-vindas precisam ser a primeira coisa que os usuários veem.

O novo foco central gira em torno do bloco secundário de locais. Isso é seguido por tudo o que está acontecendo em archaeologysouthwest.org (a revista atual, blog, eventos, boletim informativo e assim por diante). Aqui está a iteração do processo de layout:

Com a V1 (esquerda), desenhei um layout básico que lembra a página inicial original. Não há muita hierarquia. A primeira coisa que os usuários veem é o local em destaque, mas a partir daí, eles provavelmente se perderão nas colunas.

Para V2 (centro), criei uma coluna separada que é mais fácil para os olhos seguirem. No entanto, ainda pode ser melhorado. É aqui que o conhecimento do conteúdo desempenha um papel importante. Eu sei que o Archaeology Southwest nunca tem mais de dois eventos acontecendo ao mesmo tempo, então não faz sentido ter espaço para vários eventos na página inicial.

Na V3 (à direita), concentrei-me nos próximos eventos. Se, por algum motivo, houver mais de dois eventos, o usuário poderá clicar em um botão “Mais” e ver o restante. Também coloco ênfase adicional na revista atual, já que é a fonte de dinheiro do cliente. Os usuários começam no topo e descem em um padrão F. O fluxo ocular é:

Local em destaque > Bem-vindo > Revista > Eventos > Notícias

Com um wireframe visual e a estrutura do site no lugar, é muito mais fácil solidificar os recursos e como as coisas funcionarão. Neste ponto, tenho outra reunião com o cliente para analisar a funcionalidade e o fluxo de interação do usuário, ambos muito mais claros neste estágio.

Ainda haverá revisões no futuro? Sim, mas serão ajustes, não mudanças no processo inteiro. Mais importante ainda, não haverá surpresas.

Incorporar o Guia de Estilo de Marca

Agora vem a parte empolgante - converter os wireframes em algo que as pessoas usarão e experimentarão. Para este projeto, tive como objetivo tornar o conteúdo escrito fácil de digerir, implementando cores e tipografia da marca.

Experimente combinações de tipografia

A tipografia é essencial para um bom web design, por isso devemos descobrir nosso esquema de tipos com antecedência. A maior parte da identidade da Archaeology Southwest usa a fonte Univers Condensed Light e Adobe Caslon. Não havia regras para quando o Adobe Caslon deveria ser usado, mas notei que ele não era utilizado com tanta frequência quanto o Univers.

Conduzi um pequeno estudo de fontes para ver quais combinações criam a melhor sensação para uma organização profissional sem fins lucrativos. No entanto, eu também não queria que meu esquema de tipos parecesse muito diferente do material de marketing do cliente.

Depois de fazer comparações de fontes, ficou claro que Adobe Caslon deveria ser a fonte do título e Univers seria usado para legendas. Definir os títulos principais em maiúsculas dá à marca uma sensação mais pessoal, enquanto todas as letras maiúsculas criam mais uma vibração corporativa.

Polir a aparência do site

Eu me propus a criar uma experiência leve e aberta para que os usuários sentissem que o Archaeology Southwest é acessível e altamente competente. Com base em dados analíticos, a maioria dos visitantes usa navegadores de desktop (provavelmente porque a maioria das pessoas visita o site para pesquisar). Portanto, meu foco inicial era projetar para usuários de desktop.

Ao vir de desktops, eu queria que os visitantes vissem imediatamente o local em destaque, o texto de boas-vindas e os próximos eventos seguidos por parte do título da revista. Dessa forma, as pessoas primeiro veem sobre o que é a empresa e o que estão promovendo.

Em dispositivos móveis, as prioridades são um pouco diferentes. Como os usuários estão acessando as informações em movimento, os eventos são mais importantes, então eles são colocados no topo da lista.

Também atualizei o botão de doação no rodapé para ficar mais amigável, transformando-o de um botão em uma frase.

Acabamento forte: cuidado com os detalhes

Há dois motivos pelos quais os usuários acessam a página de detalhes: eles querem saber mais sobre um ponto de referência ou já conhecem um local e estão procurando informações adicionais (direções, números de telefone etc.). Portanto, é importante apresentar as duas opções imediatamente para que os usuários não precisem pesquisar.

Decidi separar a coluna de detalhes da área de conteúdo para dar mais peso e tornar a página mais interessante. Isso ajuda a criar uma hierarquia de composição, então, quando um visitante chegar à página, ele verá primeiro o título da página, seguido por uma pequena galeria de imagens e, em seguida, a coluna de detalhes.

Esse tipo de design garante que os usuários notem os detalhes adicionais de um local imediatamente. Um pouco de preenchimento extra ao redor da coluna mantém os olhos focados e facilita a leitura das informações.

A visualização móvel entra em colapso como seria de esperar. O conteúdo é apagado primeiro e as meta-informações seguem. Coloquei vídeos e revistas por último na página móvel, pois são menos importantes para os usuários móveis. Outras páginas seguem a mesma estrutura para criar um fluxo e uma experiência consistentes.

O redesenho da web é construído sobre uma base de planejamento cuidadoso

Olhando para trás no processo de redesenho do site, é evidente que a maior parte do tempo foi dedicada à organização e planejamento. Apenas 30 por cento do projeto foi gasto projetando o site.

Muitas vezes, quando os designers mostram seu trabalho, eles não conseguem transmitir quanto tempo é dedicado às porcas e parafusos da comunicação, levando designers inexperientes a pular direto para os modelos. O resultado? Projetos descarrilados e clientes insatisfeitos.

O planejamento detalhado deve ser feito para que o redesenho do site seja bem-sucedido. Reservar um tempo para realizar pesquisas pré-projeto, familiarizar-se com o conteúdo existente e envolver o cliente são etapas cruciais.

Em última análise, não há como contornar isso; o caminho para reformulações incríveis de sites e confiança profissional é pavimentado por uma abordagem metódica à organização do projeto.