A maioria dos sites de clube tem a informação certa e o layout errado. Os horários de treino estão lá, mas três telas abaixo, depois de um histórico do clube. As taxas de associação estão lá, no quarto parágrafo da página Sobre. O e-mail de contato está no rodapé, em cinza, com 12 pixels.
Ninguém começa querendo montar uma página assim. Ela acontece porque a página é escrita de cima para baixo, como uma carta, e depois as coisas vão sendo acrescentadas no fim. Este guia trata do outro jeito de montar uma página: decidir para que ela serve, colocar isso na coluna principal e colocar tudo o que o visitante pode querer em seguida numa barra lateral ao lado. Ele cobre os blocos de construção, os layouts que funcionam para as páginas que todo clube tem e os erros que tornam uma página mais difícil de usar.
Os exemplos usam o construtor de páginas do ClubHelix, que tem quarenta e cinco tipos de seção e barras laterais de até oito seções de cada lado, mas o raciocínio funciona em qualquer plataforma.
As duas colunas, e para que serve cada uma
Uma página de clube com barra lateral faz dois trabalhos lado a lado.
A coluna principal conta a história da página. Numa página de associação, é o que a associação inclui e como se associar. Numa página de treinos, é para quem são as sessões e o que levar. Um visitante que lê só a coluna principal deve sair sabendo o que a página prometeu.
A barra lateral responde "e agora?". Ela serve para o que um visitante desta página provavelmente vai querer logo em seguida, ou em vez disso: os próximos três eventos, o e-mail para tirar uma dúvida, um botão para se associar, a situação do campo hoje, links para as páginas relacionadas. O conteúdo da barra lateral é curto, fácil de bater o olho e útil por si só.
Um bom teste: se você apagasse a barra lateral, a página ainda faria sentido? Deveria. Se você apagasse a coluna principal, a barra lateral ainda seria útil? Deveria ser, um pouco. Quando uma seção da barra lateral só faz sentido depois de ler a coluna principal, o lugar dela é a coluna principal.
No celular, a barra lateral vai para baixo do conteúdo principal, então a ordem se mantém: primeiro a história da página, depois os próximos passos.
Os blocos de construção
A maioria das páginas de clube é montada com as mesmas dez ou doze seções. Saber para que cada uma é boa evita muita página que é só um paredão de texto.
Para contar a história (coluna principal):
- Texto para o que realmente precisa de parágrafos. Limite-se a poucos e curtos, com títulos.
- Imagem e texto para o momento "é isto que nós somos": uma foto ao lado de um título, algumas linhas e um botão.
- Cartões para três ou quatro opções paralelas, como formas de participar ou faixas etárias.
- Linha do tempo para a história do clube. Uma linha do tempo com cinco marcos é lida; seis parágrafos de história, não.
- Números para os dados principais: sócios, times, o ano de fundação do clube.
- Citação para as palavras de um sócio. Uma frase verdadeira de um pai ou de uma mãe vale mais do que um parágrafo de "somos um clube acolhedor".
- Perguntas frequentes para as perguntas que as pessoas de fato fazem, com respostas que abrem e fecham.
Para informações práticas (qualquer uma das colunas):
- Horários de treino como tabela, ou como lista agrupada por dia quando fica na barra lateral.
- Preços de associação, que se preenchem sozinhos a partir dos seus tipos de associação, cada um com um botão para se associar.
- Programas, Equipes e Produtos da loja, que listam o que você já gerencia em outro lugar e linkam para cada item.
- Cargos, que lista os cargos da diretoria e do voluntariado com quem ocupa cada um, e pode mostrar quais estão vagos.
- Dados de contato, Redes sociais e Links rápidos.
- Eventos, Notícias, Locais e Patrocinadores, que se atualizam sozinhos conforme você publica.
- Próximas aulas, Passes e cartões de sessões, Dias de avaliação e Níveis de avaliação, lidos dos seus programas e da sua escada de níveis, para que um horário de aula ou o preço de um passe nunca seja digitado duas vezes.
- Jogos e resultados e Competições, a partir das suas próprias competições, cada um com link para a página da competição.
- Reservar um espaço, Formulários, Doar e Rifas, para o que o visitante pode fazer agora mesmo: reservar uma quadra, preencher um formulário, doar ou comprar um bilhete.
- Galerias recentes, Boletins, Relatos de jogo e Clubes filiados, que listam o que você já publicou.
Para mensagens do momento:
- Aviso, nos tons informação, boa notícia, alerta ou urgente, para "o treino mudou esta semana".
- Situação do campo, que mostra a sua decisão de campo liberado, com restrição por chuva ou fechado enquanto ela vale, e some quando expira.
- Chamada para ação, um título com um ou dois botões, para todo "associe-se" e "venha experimentar".
As seções que se preenchem sozinhas a partir do resto da plataforma são as que impedem a página de ficar desatualizada. Um parágrafo de taxas digitado em fevereiro está errado em julho; uma seção de preços de associação está certa porque lê os preços que você cobra.
O que merece lugar na barra lateral
A barra lateral é estreita, cerca de 280 pixels num notebook. Isso define o que funciona ali. Boas seções de barra lateral são curtas e têm uma ação clara:
- Próximos eventos, de três a cinco, numa lista compacta.
- Dados de contato, com o e-mail e o telefone como links que dá para tocar.
- Links rápidos para as páginas que um visitante desta página costuma querer em seguida.
- Horários de treino, agrupados por dia.
- Situação do campo, em qualquer clube que decide suspender atividades por causa da chuva.
- Uma chamada para ação para se associar, se inscrever ou vir experimentar.
- Redes sociais e Patrocinadores.
- Próximas aulas, Jogos e resultados ou Dias de avaliação, uma lista curta do que vem a seguir.
- Doar ou Rifas, uma campanha com o seu botão.
O que raramente funciona numa barra lateral: texto longo, uma galeria de fotos completa, um formulário com mais de três ou quatro campos e qualquer coisa que o visitante precise ler antes de a coluna principal fazer sentido.
Oito seções por lado é um teto, não uma meta. Três ou quatro seções bem escolhidas valem mais do que oito que empurram as úteis para baixo da dobra.
Layouts página por página que funcionam
Estes são pontos de partida. Adapte-os ao seu clube e deixe de fora tudo o que você não conseguir preencher com informação real.
Página inicial
- Coluna principal: uma imagem de banner no topo, um texto de boas-vindas com imagem, uma faixa de números, as últimas notícias e uma chamada para ação para se associar.
- Barra lateral direita: situação do campo, próximos eventos, links rápidos (Associe-se, Treinos, Contato), patrocinadores.
Um banner no topo da página continua ocupando a largura toda, e a barra lateral começa embaixo dele, então você não precisa escolher entre uma imagem de destaque e uma barra lateral.
Para destacar uma seção da coluna principal, dê a ela um estilo de seção em vez de acrescentar outra seção: o estilo Destaque para o banner de abertura, ou o estilo Faixa de destaque na cor da sua marca para a chamada para se associar.
Página de associação ou "Associe-se"
- Coluna principal: um parágrafo curto sobre o que a associação inclui, os preços de associação com botões para se associar e perguntas frequentes (Posso experimentar antes de me associar? Existe desconto para famílias? O que a taxa cobre?).
- Barra lateral direita: dados de contato do responsável pelo cadastro de sócios, horários de treino, uma citação de um sócio.
Página de treinos
- Coluna principal: para quem é cada sessão, o que levar e uma tabela de horários de treino.
- Barra lateral direita: um aviso sobre qualquer mudança desta semana, locais com instruções de como chegar, situação do campo, uma chamada para ação para vir experimentar.
Página "Sobre" e da diretoria
- Coluna principal: imagem e texto sobre o clube, uma linha do tempo da sua história e uma seção de cargos listando a diretoria.
- Barra lateral direita: dados de contato, links rápidos para o estatuto e as políticas, redes sociais.
Marque Mostrar cargos vagos na seção de cargos e aponte-a para a sua página de voluntariado. Uma página da diretoria que diz "Tesoureiro: vago, tem interesse?" recruta voluntários toda semana sem ninguém escrever uma publicação.
Página de contato
- Coluna principal: um formulário de contato curto e os seus locais.
- Barra lateral direita: dados de contato, redes sociais e perguntas frequentes com as três dúvidas que mais chegam por e-mail.
Erros comuns de layout
Tudo numa coluna comprida. Doze seções empilhadas são uma página que ninguém termina. Leve os itens práticos e independentes para uma barra lateral e a coluna principal encolhe pela metade.
Uma barra lateral que repete a navegação. Se a sua barra lateral é só uma lista de links para as mesmas páginas do menu, ela está usando o espaço mais valioso da página para não dizer nada de novo. Linke as páginas de que um visitante desta página precisa em seguida.
Informação que fica desatualizada. Taxas digitadas, jogos digitados, "próximo evento: 14 de março". Onde uma seção consegue ler os dados reais (preços, programas, eventos, times, situação do campo), use-a.
Detalhes inventados. Nunca preencha uma seção com telefones fictícios ou citações inventadas para a página parecer completa. Uma seção vazia no ClubHelix simplesmente não aparece na página publicada, então deixá-la de fora não custa nada.
Nenhuma forma de agir. Toda página deve terminar com algo para fazer: se associar, aparecer, entrar em contato, ser voluntário. Se uma página não tem botão, acrescente uma chamada para ação.
Seções que se repetem, e seções que nem todo mundo vê
Algumas seções pertencem a muitas páginas: uma faixa de patrocinadores, uma chamada "venha experimentar", um link para o seu código de conduta. Monte-as uma vez em vez de refazer em cada página. Uma seção salva é uma cópia que você pode adaptar onde a colocar. Uma seção sincronizada fica igual em todo lugar, então uma edição atualiza todas as páginas que a usam. Entidades dirigentes podem pedir aos clubes abaixo delas que coloquem uma seção sincronizada, como um aviso de proteção infantil ou uma faixa de patrocinador nacional: cada clube a coloca nas próprias páginas, e a entidade dirigente vê apenas quantos clubes já fizeram isso.
Para conteúdo que deve ficar em volta das páginas nativas, e não numa página que você montou, use as regiões compartilhadas: seções antes ou depois de cada notícia, evento, time e programa, uma faixa acima do rodapé em todas as páginas e uma barra lateral compartilhada ao lado de notícias, eventos, times e programas individuais. Uma página que você montou mantém a própria configuração de barra lateral, então a barra lateral compartilhada nunca a substitui.
Uma seção também pode ser mostrada só para sócios, ou só para visitantes que não entraram na conta, o que combina com uma faixa "Associe-se" de que os sócios não precisam. Conteúdo exclusivo para sócios nunca é enviado a mais ninguém, mas uma seção sincronizada é sempre pública, então mantenha material privado fora dela. Limitar uma seção a celulares ou computadores é uma escolha de layout, não uma configuração de privacidade. O nosso guia sobre conteúdo exclusivo para sócios trata do que deve ficar atrás de um login.
Como montar tudo sem um desenvolvedor web
No ClubHelix você monta tudo isso na própria página: clique numa seção para editá-la, arraste-a para a barra lateral ou de volta e veja a prévia antes de publicar. Uma página comporta até quarenta seções, e o contador no topo avisa quando você está chegando perto. A página do editor visual de páginas mostra o editor em mais detalhes, e o nosso guia sobre como criar o site de um clube esportivo trata do site como um todo: quais páginas criar, domínios e custos.
Se preferir descrever a página em vez de montá-la, o assistente integrado pode rascunhar um layout nessa linha para você revisar antes de qualquer coisa ir ao ar. Quando quiser experimentar, crie o site do seu clube.
Perguntas frequentes
Toda página do site de um clube deve ter barra lateral?
Não. Páginas de conteúdo como Início, Associação, Treinos, Sobre e Contato costumam se beneficiar de uma. Uma página que é um único formulário, uma galeria de fotos completa ou um documento longo fica melhor numa coluna só, para o conteúdo ocupar a largura toda.
Barra lateral à esquerda ou à direita?
À direita, para a maioria dos clubes. Os visitantes leem primeiro a coluna principal, e uma barra lateral à direita a mantém onde o olhar começa. Use as duas barras laterais só em páginas largas com muita informação secundária realmente útil, como uma central de dia de jogo.
Quantas seções deve ter uma página do site de um clube?
Quantas a página precisar, e nenhuma a mais. A maioria das boas páginas de clube tem entre cinco e dez seções no total. O ClubHelix permite até quarenta, o que dá espaço para páginas longas de referência, mas uma página que chega a tantas geralmente são duas páginas.
O que acontece com a barra lateral no celular?
Ela vai para baixo do conteúdo principal, na mesma ordem. É por isso que a coluna principal deve fazer sentido sozinha: no celular, é tudo o que o visitante vê antes de rolar a tela.
Uma seção da barra lateral vai ficar desatualizada?
Só se guardar informação digitada. As seções que leem os seus dados, como eventos, preços de associação, programas, times, situação do campo, próximas aulas e jogos, continuam em dia conforme você atualiza o resto do seu painel. Revise as seções digitadas, como horários de treino e dados de contato, no começo de cada temporada.
