Design de interface para iPhone OS: no papel

Dando sequência aos artigos sobre ícones e usabilidade na interface do iPhone OS, desta vez o assunto é o primeiro passo para organizar as ideias e construir um app. Qual a melhor forma de começar? Quem tem experiência no desenvolvimento de aplicações já deve ter sua rotina de trabalho, mas ainda assim algumas dicas podem ajudar! 😉

Mapa mental

A criação de mapas mentais (ou mind mapping) é um método que usa diagramas para expressar ideias, pensamentos, tarefas ou itens a partir de uma palavra-chave.

Segundo a Wikipédia:

Mapas mentais são usados para gerar, visualizar, estruturar e classificar ideias, ajudar no estudo, organização, solução de problemas, tomada de decisões e escrita.

Às vezes, essa linha de pensamento é focada apenas no código, e o desenvolvedor deixa de observar o lado da experiência do usuário. Esse é o momento não só de organizar as ideias que vão surgindo, mas também de analisar quais funções são mais importantes, a melhor forma de agrupar os itens, que padrão de menu usar, etc.

Uma das aplicações mais usadas é o MindMeister, cujas principais vantagens são a interface e o compartilhamento online. Via browser, há a opção gratuita — com a limitação de três mapas — e a paga — com pacotes de US$59 por ano ou US$9 por mês. E como não poderia faltar, existe também uma versão para iPhones/iPods touch, que custa US$7 na App Store.

Para quem prefere offline, o MindNode é um programa simples e gratuito para Mac OS X. Comparando com o anterior, ele poderia ter mais opções gráficas, como uma biblioteca de elementos, mas neste caso a simplicidade é um ponto positivo da ferramenta. A versão Pro traz mais recursos por US$20 e o app está disponível por US$8 na App Store.

Para conseguir mais alternativas, é só buscar pelo termo no MacUpdate — ou outros sites de softwares, no caso de usuários PC e Linux — para ver o número de opções! O FreeMind, por exemplo, é um open source disponível para os três. E, na falta de um software (ou até mesmo antes de ir para um programa de mind mapping), uma lousa pode ser a solução, afinal, esse método já tem alguns séculos de uso… Muito antes de gráficos bonitinhos e toda essa facilidade, hehe!

Pedi algumas dicas no Twitter e fica aqui o agradecimento pelas respostas: valeu, @hofnik, @gilbertojr, @philosopho@fabianumpierre, @jplages e @carl_toons. 😉

Rabiscando no papel

Como deve ser esse processo no caso de apps famosos? O last.fm lotou a mesa de impressões e canetas, como pode ser visto no Flickr da empresa e, assim como eles, encontrei diversos flickers que fizeram o mesmo.

Quando as ideias aparecem, nada substitui a boa e velha dupla papel e caneta. Vale pegar o guardanapo do restaurante, imprimir um iPhone com “tela vazia”, utilizar um estêncil feito em aço inox, ou mesmo encomendar um caderno ou bloco de notas próprio para a tarefa.

Esta etapa é fundamental, porque olhando as primeiras linhas desenhadas podemos pensar em novas ideias, enquanto outras se mostram não tão boas quanto a gente imaginava.

Rabiscando na tela

E se você precisa apresentar seu “rascunho” para um cliente? Um guardanapo não deve resolver, então é melhor levar isso para a tela.

Uma maneira prática de criar essa representação — seja para poupar trabalho, seja para os que não se dão bem com o Photoshop — é o uso de diagramas, fazendo um wireframe básico das telas. Os usuários Mac podem usar o OmniGraffle. Além das formas básicas disponíveis no Omni, que também podem montar um mapa mental, não é difícil encontrar bibliotecas de elementos de interface para ele, como o site Graffletopia, cheio de stencils, inclusive de iPhone e de gestos multi-touch.

A má notícia é que não é um programa barato, custando US$100 na versão básica e US$200 na versão completa, então se você não o pretende utilizar com frequência pode valer a procura por uma opção mais acessível.

Como uso o Mac OS X, não tenho recomendações de softwares para outros sistemas operacionais, mas leitores que tiverem dicas podem abusar dos comentários para acrescentar ao artigo! 😉

A diferença entre o OmniGraffle e o iPhone Mockup...

Mas a boa notícia fica com as aplicações via browser que quebram o galho para todos os tipos de usuários — e ainda com preços menores.

O site iPhone Mockup é gratuito, porém, de tão limitado só funciona bem para projetos muito simples. Você pode escolher entre o modo ilustração — com as formas básicas — ou lápis — levando a sério a ideia de “rabisco”.

Também utilizando o “clica e arrasta”, o iPlotz é mais complexo que o Mockup, com uma biblioteca maior e colorida, mas muitos elementos ficaram de fora, além das poucas opções de personalização. A versão gratuita comporta apenas um projeto e a paga pode custar de US$15 mensais a US$99 por ano. Para os apps não é tão bom, mas no caso de sites e aplicações maiores pode compensar!

iPhone GUI no Photoshop

Indo mais além, é possível deixar tudo com uma cara mais real sem passar horas criando os elementos de interface do zero. É só procurar por “iPhone GUI” — “Graphical User Interface” — no Google para ver como existem arquivos de referência para esse fim.

Já falamos sobre três deles: do Yahoo!, da Teehan+Lax e da Smashing Magazine, além de outros que encontrei, como da The Creative District e da FreshBooks.

Com as referências em .psd, é possível ter um controle bem maior sobre cada padrão, além de facilitar a visualização do app “dentro do iPhone” para posicionar e recortar as imagens rumo ao resultado final!

· · ·

Para terminar, o mais importante: não podemos esquecer que nada disso adianta se a gente não tirar essas ideias do papel! Mesmo que você não saiba programar, apresente suas ideias para quem sabe… Até porque a App Store anda muito monótona ultimamente, não acham? Aproveitem que o processo de aprovação está rápido e vamos dar trabalho para a Apple, haha!

Espero que tenham gostado da leitura e, como sempre, o que tiverem a acrescentar é sempre bem-vindo. 🙂

Posts relacionados

Comentários