Crítica Web Design # 43: Abdominais no Trabalho
Toda semana, damos uma olhada em um novo site e analisamos o design. Vamos apontar as áreas que foram bem executadas, além daquelas que poderiam usar algum trabalho. Por fim, finalizamos solicitando que você forneça seus próprios comentários.
A crítica de hoje é o Abdominals at Work, um site de aplicativos para iPhone.
Explorar recursos de design
Se você deseja enviar seu site para ser apresentado em uma futura Crítica de design, leva apenas alguns minutos. Cobramos US $ 34 pela crítica do seu design - consideravelmente menos do que você pagaria por um consultor para dar uma olhada no seu site! Você pode encontrar mais aqui.
Sobre o aplicativo Abdominais no trabalho
“Método passivo de contrações isométricas. Se você passa muito tempo na frente de um computador ou da televisão, pode usar esse método para exercitar os músculos abdominais enquanto realiza outras tarefas. Você escolhe a hora e o local, e o aplicativo ensinará como fazer o exercício, marcando seu ritmo e a intensidade por vibração ou melodia de maneira discreta. ”
Aqui está uma captura de tela da página inicial:
Primeira impressão
Meus pensamentos iniciais nesta página foram bastante positivos. Gosto da aparência geral do site e de como ela se parece com a do aplicativo. Uma cena de céu nublado definitivamente não sugere exercícios para mim, mas o aplicativo é sobre como se exercitar de uma maneira relaxante, então suponho que tudo esteja bem.
As cores e gráficos são bastante amigáveis e criam um ambiente acolhedor. Meu aspecto favorito é o quão simples o conteúdo geral foi mantido: apenas um iPhone com algumas capturas de tela, uma breve descrição, algumas maneiras de compartilhar e um link de destaque para a loja do iTunes, onde você pode descobrir mais e baixar o aplicativo. É apenas o suficiente para interessá-lo sem sobrecarregá-lo.
Embora eu goste da direção geral do aplicativo, como sempre, tenho muitas sugestões para melhorias. Vamos detalhar algumas áreas específicas para ver quais mudanças positivas podem ser feitas.
Som
Todo mundo que já enviou uma solicitação de crítica de design para um site que contém som recebe o mesmo conselho. Eu sempre prefiro que os desenvolvedores do site ofereçam aos visitantes a opção de adicionar som inicialmente, em vez de removê-lo. A navegação na Web é uma experiência tipicamente silenciosa e ruídos repentinos não deixam seus visitantes nada irritados.
É certo que este site é muito melhor do que a maioria nesta área. Embora o som comece automaticamente, é pelo menos um tema de oceano bastante sereno e relaxante, com pássaros e ondas. Você também pode desligar o som clicando na imagem do pássaro cantando perto da parte inferior da página.
Eu tenho vários pensamentos sobre isso. Primeiro, tive que rolar para encontrá-lo (apesar de estar em uma pequena tela do MacBook). Se alguém visitar seu site no trabalho, em uma biblioteca ou em qualquer outro local público, não será necessário que eles tenham que embaralhar enquanto tentam, de maneira embaraçosa, encontrar uma maneira de desativá-lo. Você pensaria que o usuário apenas apertaria o botão de silenciar, mas com mais frequência provavelmente fechará a janela o mais rápido possível.
Além disso, eu posso definitivamente ver como o pássaro com as notas musicais sugerindo um controle de som, mas tem uma infeliz semelhança com um link de pássaro do Twitter, como agora vemos em quase todos os sites da web. Isso não torna imediatamente aparente que o pássaro é o controle de som, porque não há texto para reforçar a mensagem.
O conselho simples aqui é que, se você preferir a reprodução automática de áudio, coloque o controle perto da parte superior da página e deixe mais claro o que faz. Sugiro um gráfico de gaivota (o pássaro do Twitter não corresponde ao tema do oceano) e uma mensagem de "som ligado / desligado" perto do pássaro. Além disso, faça com que a animação das notas musicais pare quando o site estiver mudo e inicie com o som ligado, em vez de continuar o tempo todo.
Animação
Além do som, a página possui várias nuvens flutuantes que passam à frente e atrás do conteúdo. Isso adiciona um pouco de diversão à página e é reconhecidamente mais interessante que os gráficos estáticos.
Na maioria das vezes, as nuvens não impedem a usabilidade, mas ocasionalmente interferem na legibilidade do texto. Além disso, como em qualquer animação em loop, elas podem ficar um pouco monótonas se você gastar tanto tempo quanto eu olhando o site! Uma ideia sólida que vimos no nosso ToonyTuts Critique foi um sistema de controle simples de dois ícones para interromper a música e / ou as nuvens animadas. O tema do site era muito semelhante ao site de hoje, então acho que um controle semelhante funcionaria perfeitamente aqui.
Mensagens e Texto
Acho que o site faz um bom trabalho ao deixar bem claro que estamos discutindo exercícios abdominais. No entanto, pode ser um pouco técnico, para uma página de aparência divertida. Considere o título principal "Método passivo de contração isométrica". É agradável e nobre, mas realmente não tem um toque amigável, não é?
Você não precisa abandonar esta mensagem, mas talvez considere incorporá-la ao parágrafo em favor de uma manchete mais interessante como "Crie um pacote de seis litros enquanto assiste TV!" Este não é o melhor exemplo, mas está no cerne da minha sugestão. Uma manchete como essa o atrai e faz com que você queira aprender mais, em vez de desligá-lo, porque se sente estúpido e não tem o seu dicionário de sinônimos à mão.
Talvez o maior problema que tenho com a página inteira seja o texto amarelo sobre fundo azul. Essas duas cores estão entrando em conflito no texto pequeno e dificultando a leitura dessas informações.
O problema é o conflito clássico versus o complemento na teoria das cores. Quando duas cores simplesmente não são diferentes o suficiente, elas tendem a entrar em conflito, especialmente quando uma é colocada sobre a outra. Considere o exemplo abaixo e quão mais legível é o texto amarelo mais claro e menos saturado do que a versão que o precede.
Agora, percebo que essas são, de fato, as cores do seu aplicativo, portanto, não é lógico alterá-las no site. Minha sugestão é, portanto, simplesmente descartar a ênfase amarela no texto e usar outra coisa, texto em negrito, sublinhado, etc., que não interfira na legibilidade.
Iphone
O gráfico do iPhone com a apresentação de slides é extremamente popular nos sites de aplicativos do iPhone e por boas razões. Torna instantaneamente claro o que é o site. No entanto, acho que isso poderia ser refinado um pouco.
Para iniciantes, os pequenos pontos que servem como navegação na apresentação de slides têm um círculo de carregamento giratório ao lado deles. Essa pequena animação nunca para; então, a que finalidade ela serve? Quando a vejo girando, isso sugere que a página não terminou de carregar (fomos ensinados que é isso que este gráfico significa) e, quando ela nunca termina, faz com que pareça que seu site está quebrado. Bottom line, este gráfico é perturbador, confuso e não serve a nenhum propósito prático, remova-o.
Além disso, como um pequeno aborrecimento, o nerd da Apple em mim não pode deixar de notar que a imagem do iPhone está desatualizada. O iPhone 5 está quase chegando e este site ainda não possui um gráfico do iPhone 4. Eu sei, é ridículo ter que acompanhar isso, mas como o site é realmente para um aplicativo para iPhone, isso pode ser importante. Ter imagens desatualizadas faz com que o aplicativo pareça antigo e desatualizado, o que me faz pensar duas vezes antes de comprá-lo!
Navegação
Um último pensamento sobre o site é que a navegação realmente parece uma reflexão tardia. Ele contém links que alteram o conteúdo textual da página com informações relevantes para os visitantes, mas, por algum motivo, é minúsculo e oculto no rodapé.
Se isso fosse algo menor, eu não me importaria, mas na verdade parece mais importante do que o designer atribuiu. A solução simples é jogá-lo no local típico na parte superior da página e ampliar um pouco o texto.
Sua vez!
Agora que você leu meus comentários, participe e ajude, dando ao designer mais alguns conselhos. Deixe-nos saber o que você acha que é ótimo no design e o que você acha que poderia ser mais forte. Como sempre, solicitamos que você também seja respeitoso com o designer do site e ofereça conselhos construtivos claros, sem quaisquer insultos severos.
