O melhor pedaço da Maçã.

Design de interface para iPhone OS: ícones

Ícones na App Store

Um dos principais diferenciais da Apple é o design de interfaces. No Mac OS, no iPhone OS ou mesmo nos iPods, tanto os elementos visuais quanto a usabilidade são conhecidos como pontos fortes da Maçã. Consequentemente, uma plataforma famosa pelo design — como é o caso do iPhone — gera a expectativa de que os aplicativos de terceiros também tragam essa qualidade em suas interfaces.

Publicidade

App Store

Vale lembrar que — apesar de muitos ainda acreditarem nisso — encher a tela de efeitos aqua e reflexos não é o suficiente para gerar uma boa experiência para o usuário. Nas palavras do próprio Jobs, design não se trata apenas da aparência, mas também de como as coisas funcionam.

Design is not just what it looks like and feels like.
Design is how it works.

No processo de produção, o SDK da Apple possui uma biblioteca de elementos gráficos, então muitas vezes os aplicativos são projetados apenas por desenvolvedores, sem a participação de um designer. Não que essas ações independentes não tragam bons resultados — pois trazem, sim —, mas algumas dicas podem ajudar desde o início, evitando deslizes comuns que encontramos por aí.

Publicidade

Com base nos artigos publicados pela Smashing Magazine e pelo PixelResort, reuni alguns pontos e acrescentei outros que considero importantes para a tarefa. Este é o primeiro de uma série de artigos, a qual começo falando dos ícones! Afinal, em meio a 70 mil apps, é o ícone que vai representar sua ideia na App Store.

Um ícone na multidão

Podem achar pura frescura, mas um ícone “tosco” prejudica a percepção do aplicativo. Em uma leitura rápida, é como se o cuidado que tiveram para produzir o ícone já mostrasse o nível do app. Nem sempre isso é verdade, mas quando você encontra uma lista com dezenas de ícones listados, não vai clicar em um por um para chegar às descrições, telas e avaliações de usuários.

Publicidade

Nessa disputa visual, qual ganha a atenção do visitante?

Apps de gerenciamento de tarefas

Uma busca por “tasks”, por exemplo, retorna centenas de itens no resultado, incluindo estes quatro apps da imagem acima. Se você estivesse à procura dum organizador de tarefas, qual seria sua primeira opção para clicar e ver mais informações?

E qual você acha que é o mais caro?

Publicidade

Enquanto o Todo (primeiro) tem o preço de US$10, o quarto ícone é o Todo+Cal+Sync e custa US$15 na App Store. Mesmo que ele tenha boas funções e atenda à sua necessidade, a primeira impressão não é lá um bom incentivo para clicar, não é mesmo?

Ícones do Simplenote

Outro exemplo é o Simplenote, cujo primeiro ícone foi fortemente criticado pelos usuários até chegar à versão atual. Enquanto o editor é uma simples tela branca para escrever e sincronizar textos via Wi-Fi, o primeiro ícone mostrava um Post-it colorido que não tinha nada a ver com a proposta.

Ícones do Byline

Já o Byline (leitor de RSS) passou por mudanças tão radicais durante suas versões que acabou perdendo a identidade: cada vez que encontramos um artigo ou comentário sobre ele, tem uma imagem diferente para representá-lo. Será que na próxima atualização eles mudam de novo? Hehehe!

Apps do Pocket God

Por outro lado, o Pocket God usa essa troca constante de forma positiva. A cada atualização do app, o ícone ilustra as novidades, mas o fato de eles manterem sempre o mesmo personagem — o nativo da ilha — na ilustração marca um padrão entre os ícones e deixa os updates mais atrativos.

Para quem gosta do assunto, o pessoal do blog Macenstein entrevistou Allan Dye, responsável pela arte do “Deus de Bolso” — vale a pena conferir.

O espaço dos ícones

A imagem original deve ter 512 pixels na largura e na altura, mas não adianta querer entulhar textos, desenhos e efeitos neste espaço, pois ele será exibido com 75px na galeria da App Store e apenas 57px na tela do iPhone/iPod touch.

Texto
Para que serve um texto ilegível? São poucos os casos em que é necessário ter palavras dentro do ícone, até porque (tomando cuidado para que não sejam muito longos) os próprios títulos já resolvem esse problema.

Redimensionando os ícones

Efeitos
No projeto, os desenvolvedores podem aplicar um efeito de brilho na imagem, explicando porque existem tantos apps com o mesmo padrão. Todos nós sabemos que “está na moda” usar esses efeitos, mas, para que o ícone seja atrativo, o “gloss” não é uma regra e muitas vezes acaba prejudicando a qualidade do resultado final.

Aplicação de brilho nos ícones

Alguns ícones ficariam bem mais “limpos” sem o efeito sobrepondo a imagem, não? A dica é aplicar o seu próprio efeito, ou mesmo o efeito padrão com mais transparência — mas somente quando ele melhora (e não piora) o ícone!

Detalhes
Por mais que a simplicidade seja defendida, não quer dizer que os ícones não possam ter riqueza de detalhes. O próprio Mapsapp nativo do iPhone — é um composto de pequenos elementos, mas nem por isso fica confuso ou “sujo”.

Assim como a Apple tem uma preocupação com seus ícones no tamanho real (512 pixels), os ícones do iPhone OS também podem ter essa visualização. E mesmo que pouquíssimas pessoas tenham a curiosidade de ver a imagem original, vale caprichar no trabalho para ter um bom resultado.

Groceries

Este é um dos apps de que mais ouço falar a esse respeito: o Groceries. Uma das melhores listas de compras da App Store (se não a melhor), com direito a ilustração toda detalhada, sombras, texturas, texto e ainda uma gotinha no canto do tomate, mas que mesmo na miniatura consegue ser bem representativo.

Consistência

Assim como já foi dito no caso do Simplenote, a ligação visual entre ícone e app é importante para que o usuário não confunda a função/proposta do aplicativo.

O exemplo dado por Michael Flarup não poderia ser melhor. O Classics, um leitor de eBooks, tem como ícone uma prateleira quadrada com livros encostados. Abrindo o aplicativo, os livros são organizados em prateleiras para a leitura.

Classics

Dessa forma, os elementos visuais são tão próximos que fica impossível confundir o ícone.

. . .

Para terminar, não se surpreenda ao encontrar um ícone medonho entre os mais populares da App Store, afinal, não se trata de uma fórmula de certos e errados. Vale o raciocínio de que um ícone bem feito não sustenta um app ruim, mas um ícone ruim pode atrapalhar bastante o sucesso de um app bacana.

Tudo isso, é claro, faz parte da minha opinião como designer e heavy-user do iPhone, então quem tiver outros pontos interessantes sobre o tema, comentários são sempre bem-vindos para acrescentar ao artigo! 😉

Espero que esta tenha sido uma boa leitura para usuários e desenvolvedores: dentro de alguns dias já trago mais um artigo para a série… Aguardem!

Ver comentários do post

Compartilhe este artigo
URL compartilhável
Post Ant.

Com a chegada do Windows 7, Microsoft planeja abertura das suas primeiras lojas

Próx. Post

A.T. Kearney coloca Apple em terceiro lugar entre as Global Champions de 2009

Posts Relacionados