Redesign feliz de Cog de VisitPhilly.Com:
Um site moderno exemplar
Em janeiro, Jason Santa Maria enviou um tweet anunciando que visitphilly.com foi redesenhado pelo estúdio de design de renome mundial Cog feliz . Meu interesse foi despertado e não pude deixar de dar uma olhada.
Posso dizer honestamente que nunca fiquei tão impressionado com o redesign de um site do que com este.
A Happy Cog conseguiu transformar um site tão grande em uma experiência de usuário bonita, acessível, funcional e convidativa que atesta o talento da equipe da Happy Cog.
De modo algum estou em posição de oferecer uma crítica que faça justiça ao planejamento, design e desenvolvimento que deve ter sido feito neste projeto.
Mas eu pensei que seria útil apontar porque este redesenho simboliza um design de site bonito e eficaz para o mercado de hoje.
Um propósito claro
O nome do domínio, o logo atraente, os menus drop-down claros, a bela fotografia: tudo isso e mais papéis importantes na comunicação do propósito distinto do site (para incentivar os usuários a visitar a cidade de Filadélfia) e convidar os usuários a explorar o site que é (surpreendentemente) uma bela cidade americana.
Os primeiros itens de navegação que o usuário observa são mega links de menu suspenso e os grandes links de texto que cobrem a imagem giratória principal.
A captura de tela abaixo destaca esses links, ou seja, "Coisas para fazer" (mostradas como ativas), "Planejar sua viagem", "Philly Now" e a superposição de imagens "Power Lunch".
Obviamente, esses itens deveriam ser notados imediatamente. Na foto abaixo, mapeei o caminho do olho mais provável de um usuário que está digitalizando a página inicial.
Depois de observar (e possivelmente explorar) um ou mais dos menus suspensos, o usuário digitalizaria o texto relacionado à imagem ativa e, em seguida, mover-se-ia naturalmente até a seção rotulada "Novidades", voltando ao círculo quase completo para o cabeçalho perto da caixa de pesquisa.
O conteúdo é organizado para que o usuário possa fazer uma caminhada informativa e visualmente memorável nas seções mais importantes da página em questão de segundos.
O usuário provavelmente não seria atrasado, confuso ou sobrecarregado, apesar de muito conteúdo estar disponível para ser explorado.
Um mínimo de links primários
Como mencionado, uma das áreas mais proeminentes é o menu suspenso. A decisão de manter um número mínimo de links primários aqui é a correta.
Ter apenas três links permite que os itens sejam exibidos em uma fonte maior, mantendo assim a atenção do usuário e demonstrando a estrutura focada do site.
A barra de navegação mínima é uma das principais mudanças no novo design e traz grandes benefícios. Compare-o com a seção de cabeçalho no design antigo, que não é tão focado:
Embora o cabeçalho antigo não seja mal projetado ou inutilizado, ele não é tão focado e nem tão bonito quanto o novo. Outro ponto fraco é a falta de indicadores do menu suspenso, que no novo site são claros e atraentes.
Quando um usuário acessa um site como esse (geralmente por meio de uma pesquisa no Google), é mais frequente que ele queira fazer uma das duas coisas: ver o que a cidade de Filadélfia tem a oferecer ou planejar sua viagem.
A navegação despojada no cabeçalho ajuda o usuário a atingir essas metas de maneira rápida e eficiente.
Tipografia Bonita
Será que esperávamos menos do Happy Cog? Eu absolutamente amo a fonte usada para o logotipo "Philadelphia and the Countryside".
Tem uma sensação sutilmente ocidental, mas ainda é moderna e digna. Para manter o branding consistente, a fonte é reutilizada para muitos títulos em todo o site, alguns dos quais são destacados na imagem abaixo.
A maior parte do texto no resto do site está na fonte da Geórgia, com o uso ocasional de Arial, mas feito de forma bastante elegante. A mistura diversificada de cabeçalhos, cópias corporais, legendas e outros elementos descritivos do site é extremamente legível e apresentada com bom gosto.
Apesar da quantidade de conteúdo, mesmo em páginas internas, o usuário raramente se sente sobrecarregado, ao contrário da experiência no site antigo .
Maior Desempenho e Velocidade Percebida
Um site com muito conteúdo e tantas imagens inevitavelmente leva um bom desempenho. Os desenvolvedores estavam conscientes disso e tomaram muito cuidado para garantir que qualquer conteúdo de carregamento atrasado não distraísse ou fizesse com que os visitantes desistissem e procurassem outra cidade da Pensilvânia .
Como mostrado abaixo, quando o usuário visita a home page, o último item a carregar é um dos elementos mais importantes do novo layout: a principal imagem rotativa. Mas a lentidão real é mitigada pelo indicador de carregamento de conteúdo (o gráfico animado giratório):
Esse aprimoramento de usabilidade também não está restrito a imagens grandes. Devido à diversidade de conteúdo nos menus suspensos, um gráfico semelhante de carregamento de conteúdo é exibido enquanto o conteúdo do menu é carregado por meio do Ajax:
Para este menu, o aprimoramento é imperativo, porque os menus suspensos normalmente não são atrasados quando acionados.
Nenhum indicador de carregamento teria causado confusão, possivelmente fazendo com que o mouse do usuário se afastasse e, em seguida, o mouse para trás, imaginando por que a funcionalidade está presa.
Portanto, embora a página não carregue mais rapidamente, a velocidade percebida é aumentada. Esta é uma lição para todos os designers e desenvolvedores pensarem não apenas na velocidade real, mas também na velocidade percebida.
Recursos orientados ao usuário
Uma das características mais importantes do novo site é a forma como a transição para o novo design foi feita, o que garante que os visitantes que retornam não fiquem chocados com as mudanças drásticas.
Quando você visita o site pela primeira vez, percebe um grande banner vermelho na parte superior da página, informando que o site foi reformulado e ainda está na versão beta. Você tem a opção de navegar pelo site usando a interface antiga.
Dar aos visitantes que estão acostumados com o antigo layout e estruturar a opção de voltar a ele é fundamental, pois garante que eles não fiquem frustrados ao tentar encontrar conteúdo familiar.
Em um site tão grande, especialmente um redesenhado por uma empresa conhecida por seus projetos focados no usuário, essas mudanças arquitetônicas e aprimoramentos importantes tendem a prejudicar os visitantes que estavam acostumados com o estilo antigo.
A mensagem na faixa vermelha, então, impede qualquer confusão ou frustração por parte dos visitantes.
Não gastei muito tempo comparando o site antigo com o novo, por isso não posso confirmar o quão semelhantes são os conteúdos e as arquiteturas, mas porque temos a opção de visitar o site antigo, o conteúdo deve ser semelhante o suficiente se conseguirmos acessar eventos atuais e outros itens regularmente atualizados em ambas as versões.
Um elemento comum é o link que aparece acima da caixa de pesquisa, solicitando comentários sobre o novo design, convidando os usuários a preencher uma "pesquisa beta". Esse recurso mostra que os proprietários estão preocupados com a forma como os usuários experimentam e percebem o site.
Conteúdo totalmente acessível
Muitos dos membros da equipe Happy Cog são bem conhecidos on-line por sua defesa dos padrões da Web e do conteúdo acessível, por isso não é surpresa que esse site seja totalmente acessível a praticamente qualquer usuário em qualquer plataforma.
Com o JavaScript desabilitado, a experiência do usuário no site é muito semelhante, embora muitas melhorias não estejam mais disponíveis.
O CSS text-indent propriedade é usada para substituir o texto nos títulos por imagens que mostram a fonte personalizada. Isso garante que as páginas permaneçam semânticas, amigáveis com SEO e visíveis para todos os usuários.
A imagem abaixo mostra um título em uma página interna, à esquerda, com o estilo desativado, à direita, com a opção ativada.
Podemos ver como os títulos são aprimorados por imagens sem perder seu valor semântico e sem que os designers recorram a métodos desnecessariamente complexos de substituição de fontes.
Outro recurso importante de acessibilidade é como os aprimoramentos do JavaScript são implementados. A página inicial tem dois alternadores de conteúdo com guias, um chamado "Reserve on-line" e o outro conectando-se às redes sociais do site visitphilly.com:
Quando o JavaScript está desativado, todo o conteúdo nas duas caixas com guias é exibido. Muitos sites com widgets com guias exibem apenas uma das caixas quando o JavaScript está desabilitado, mas geralmente essa não é a melhor prática.
Essa técnica é usada consistentemente em todo o site para vários recursos, garantindo que a camada comportamental (ou seja, o Ajax e o JavaScript) seja um aprimoramento, não uma necessidade.
Isso torna o conteúdo acessível não apenas para usuários que estão navegando sem JavaScript, mas também para mecanismos de busca como o Googlebot.
Alguma Fraqueza no Design?
Mais uma vez, não estou em posição de criticar bastante um projeto feito por uma empresa como a Happy Cog. Mas vou apontar (com cautela) duas pequenas fraquezas no novo design e estrutura.
Primeiro, acho o texto do terceiro link no menu de navegação primário um pouco vago (“Philly Now”).
Eu não sabia de imediato o que isso significava. Eu tinha assumido que significava eventos atuais, mas aparentemente é uma combinação de eventos, clima e fotos atuais. Ainda não tenho certeza de como descrevê-lo e tenho a impressão de que o link raramente será clicado.
A outra falha é o triângulos apontando para a direita no menu de navegação secundário nas páginas internas:
Presumi que esses triângulos indicassem menus flutuantes, mas não há fly-outs. Os triângulos são apenas ponteiros para chamar a atenção do usuário para a área de conteúdo. Os triângulos apontando para a direita são mais bem reservados para links autônomos e menus suspensos, e não navegação vertical como essa.
Encontramos a mesma coisa na página inicial, mas não é tão ruim porque as setas fazem parte de um alternador de conteúdo baseado em JavaScript.
Nenhuma dessas “fraquezas” prejudica muito a experiência do usuário. E o fato de eu poder encontrar apenas duas fraquezas mostra quão grande é o novo design.
Digno de Exame e Imitação
Muito mais poderia ser dito sobre a eficácia do design e do código de visitphilly.com, além do escopo deste artigo.
Além do que discutimos aqui, eu poderia apontar o código válido e bem comentado, o uso efetivo do espaço em branco, a hierarquia visual, as excelentes opções de cores, a experiência praticamente idêntica no IE6 e muito mais.
Espero que esta análise forneça uma visão geral decente de algumas das principais características deste novo design e como ele sintetiza o design moderno da web na indústria.
Leitura Adicional
- Greater Philadelphia Tourism Marketing Corp lança nova marca visitphilly.com
- Portfólio Happy Cog Studios
- A revisão feliz da roda denteada de VisitPhilly
Este post foi escrito exclusivamente para Webdesigner Depot por Louis Lazaris, um escritor freelance e desenvolvedor web. Louis corre Webs impressionantes onde ele publica artigos e tutoriais sobre web design. Você pode seguir Louis no Twitter ou entre em contato com ele através de seu site .
Você gosta do novo visitphilly.com? Quaisquer outros recursos do design, layout ou arquitetura melhoram a experiência do usuário? Por favor, ofereça seus comentários abaixo.