O melhor pedaço da Maçã.

Design de interface para iPhone OS: usabilidade

Dando sequência à série de posts que comecei há duas semanas, falando sobre ícones no iPhone OS, a ideia deste artigo é apresentar de forma sucinta algumas dicas de usabilidade para o desenvolvimento de apps.

Publicidade

Design de interface para iPhone OS

Segundo a Wikipédia

A usabilidade pode também se referir […] ao estudo dos princípios por trás da eficiência percebida de um objeto.

A usabilidade está diretamente ligada ao diálogo na interface. […] Ser de fácil aprendizagem, permitir uma utilização eficiente e apresentar poucos erros, são os aspectos fundamentais para a percepção da boa usabilidade por parte do usuário.

Mais uma vez, esclareço que estas não são regras absolutas e a intenção não é querer ensinar usabilidade em um artigo só — afinal, para abordar o tema a fundo, precisaria de um blog inteiro dedicado a isso! 😉

Publicidade

Estas são orientações que fazem parte da minha opinião como designer e heavy-user do iPhone, além, é claro, do apoio de artigos citados no decorrer do post.

Elementos nativos

Uma boa maneira de facilitar a navegação é tomar como base alguns padrões que os aplicativos do iPhone OS já trazem. O Interface Builder facilita bastante esse trabalho com a sua biblioteca de elementos, mas ainda assim valem umas dicas!

Publicidade

O botão “voltar”
Manter a posição padrão faz com que o usuário encontre mais facilmente as ações que procura. O exemplo mais básico disso é a ação de “voltar”, que nos apps nativos — assim como na maioria dos softwares que conhecemos — é posicionada no cantor superior esquerdo da tela.

iPod
iPod
Superguia.TV
Superguia.TV

É intuitivo procurar o botão nessa posição, porém, provando que essas não são regras ou certezas, o Mobile Safari dos iPhones/iPods touch não segue o padrão e deixa as setas de voltar/avançar na base da tela.

Safari
Safari

Como os campos de URL e busca não ficam sempre visíveis, não confunde tanto, mas confesso que já procurei pelo botão de “Back” algumas vezes no topo do browser.

Publicidade

Fugindo dessa estrutura de título no topo, principalmente no caso de games e simuladores — desde que isso não atrapalhe a jogabilidade —, é comum utilizar o duplo-clique sobre a tela para retornar ao menu principal. Alguns apps tentam inovar, trazendo o menu com o deslizar de cima para baixo, mas não seria a primeira tentativa do usuário, levando um tempo para que ele “aprenda”.

As listas
Mais um padrão é a ação de deslizar o toque da direita para a esquerda sobre listas, mostrando a opção “delete” de cada item. Isso acontece no Mensagens (Messages), Mail, App Store, Notas (Notes), entre outros.

Notes
Notes
Genius da App Store
Genius da App Store

E a questão nem é copiar o recurso, mas, dependendo da situação, adaptá-lo. O Tweetie fez bom proveito disso, pois, deslizando o toque sobre um tweet, ele mostra as ações relacionadas àquela mensagem, como responder e retwittar.

Tweetie
Tweetie

Ainda sobre listas, os desenvolvedores do Simplenote receberam feedback de diversos usuários — incluindo esta que vos escreve — querendo alterar a ordem das notas. Nem o próprio Notes tem essa opção, mas existe um padrão para ela usado pelo Groceries e até pelo app oficial do Google.

App do Google
App do Google
Arrastando um item do Groceries
Arrastando um item do Groceries

Geralmente, chegamos a esta alteração de ordem por um botão “Edit” do aplicativo.

A busca
Já que não podemos dar um “Command + F” (ou “Ctrl + F”) para achar as chaves do carro ou uma palavrinha num livro gigante, vamos usar e abusar da busca onde ela é possível, hehehe! Se o seu app envolve conteúdo — como listas, textos, músicas, nomes ou seja lá o que for —, eventualmente o usuário vai precisar procurar por alguma coisa em meio a tanta informação.

WordBook
Dicionário WordBook

Melhor ainda se a busca filtrar o resultado enquanto as letras são inseridas, não é?

Mais informações
Já estamos familiarizados com o ícone da letra “i” em algum cantinho da tela, mas nem todos sabem tirar proveito dele. Quando você quer saber quem produziu o aplicativo daquela marca, que outros apps aquele desenvolvedor possui, ou quer um link para o site oficial… Pra tudo isso existe o tal ícone de informações.

How2Draw
How2Draw: o texto poderia ser mais resumido, mas traz tudo que você precisa saber.

É claro que, trabalhando com grandes marcas, nem sempre essa divulgação é permitida bem vista, ou então é controlada; caso contrário, utilizem bem esse espaço! 😉

Soluções criativas
Uma saída criativa de alguns apps é o uso de elementos do próprio Mac OS. Nem todos que têm iPhones/iPods touch são Mac-users, mas ainda assim isso gera uma ligação positiva. O Best Camera, por exemplo, dispõe seus filtros como um Dock, e o jogo brasileiro Senha gera uma “fumacinha” ao dispensar as peças, a exemplo do Dock do Mac OS.

Filtros do Best Camera
Filtros do Best Camera
Senha
Senha

Para os que estão acostumados a desenvolver para web ou para outros dispositivos móveis, get out of the box! Não se esqueçam das possibilidades da touchscreen: arrastar, aumentar, diminuir, girar, apontar, rabiscar… Você ainda tem acelerômetro, localizador (geotagging), browser, câmera, lista de contatos, biblioteca de músicas, fotos, vídeos… e até um telefone! Tudo isso para interagir e não ficar no “comum”.

E aí vai da criatividade: não adianta fazer um aplicativo cheio de recursos de acelerômetro, se eles não forem pertinentes às funções a que se propuserem. Em outras palavras, não adianta fazer a pessoa chacoalhar o iPhone só porque é “diferente” — faça isso quando realmente couber ao projeto.

As configurações

Por recomendação da Apple, as configurações devem ficar reunidas no “Ajustes” (“Settings”) do iPhone OS, mas nem todos os usuários sabem disso ou então esquecem de verificar essas opções escondidas depois que fecham o aplicativo.

Alguns desenvolvedores receberam feedback de pessoas procurando por recursos que já existem em seus apps, mas não foram encontrados, gerando um questionamento a respeito dessa separação. Para evitar que as configurações passem despercebidas, elas podem fazer parte do próprio aplicativo. Nada muito grave, mas nessa situação o usuário fica um pouco perdido, sem saber onde procurar… No app do LinkedIn, por exemplo, eu buscava pelo botão de “logout” e só depois de percorrer todas as telas pensei em procurá-lo no “Settings”.

Está na hora de rever essa recomendação, né, Apple?

Boas práticas, bons costumes

Já que o princípio da usabilidade é criar uma boa experiência para o usuário, comece a pensar como alguém que acabou de instalar seu app em meio a dezenas de outras opções e está pronto para criticá-lo. A partir desse ponto de vista, aí vão mais dicas…

Tipo de teclado
Qual a diferença entre essas duas telas de login? Apesar de ambas terem um campo de email, o teclado do Fring não traz as duas únicas teclas que com certeza o usuário irá usar: a arroba e o ponto final. Pode parecer bobagem, mas tudo que puder facilitar o processo é bem-vindo.

Fring e Facebook
Fring e Facebook

São tão poucos os apps que trazem o teclado específico de email para suas telas de login, que eu até achava que não era algo disponível entre os padrões do SDK, mas sim, ele existe!

Outra diferença? No Facebook, você tem acesso aos dois campos sem precisar mover a tela, já que o espaço é mais bem aproveitado, mesmo com o teclado aberto.

Calculando o espaço
Desenvolvendo jogos e simuladores, não adianta ficar só olhando pra tela. Vale conferir, por exemplo, se ao segurar o iPhone/iPod touch a pessoa não vai tapar a saída de som com as mãos ou esbarrar em algum botão (por engano) durante o jogo.

BoxedIn
BodexIn: perdi a conta de quantas vezes esbarrei no "atualizar" sem querer e reiniciou a fase... 🙁

E caso esse “esbarrar sem querer” seja proposital, não preciso nem comentar que vai contra qualquer bom costume, certo? Nada de “sem-querer-querendo”, hehehe! Você poderá até conseguir alguns cliques pagos, mas deixará seus usuários bem irritados.

Áudio
Desde que não seja um app musical, deixe que a pessoa continue ouvindo a música do seu próprio iPod. Provavelmente este é o item que mais vi em updates na App Store: “Agora você pode ouvir suas músicas enquanto joga!”

Vídeo
Quando o projeto é patrocinado, às vezes não tem como evitar aquele vídeo incômodo de introdução, mas cuidado para não “zunar” seu app, hein! Nos games, os vídeos trazem um contexto da história, mas, quando o aplicativo é usado com frequência, pode ser bem irritante. Contornando o problema, uma simples imagem estática pode ser a solução (e ainda sem aborrecer).

Compartilhando
Se o app envolve conteúdo, é bem provável que seus usuários queiram enviá-lo por email, certo? Mas as opções de compartilhamento não ficam só nisso! Desde a notícia de um leitor de RSS até o ranking de pontos de um jogo, o poder social de redes como Facebook e Twitter pode ser um bom meio de divulgação do seu aplicativo.

Monster Pinball no Facebook
Monster Pinball no Facebook

Aproveitando o assunto, rankings são uma boa maneira de incentivar o chamado “poder social” entre os jogadores do seu game.

Rotacionar a tela
Cogite a visão horizontal da tela, principalmente na presença de textos, notícias e/ou campos de digitação, pois ela tem mais espaço e facilita a leitura e a escrita. Por ser mais cômodo segurar o iPhone/iPod touch na horizontal, até alguns jogos de puzzle e cartas têm essa opção.

Tweetie
Tweetie

Entretanto, para a satisfação geral dos usuários do iPhone OS, vale permitir que eles mesmos desativem a rotação automática.

Alerta… só quando necessário!
Lembra da web 1.0, aquela dos anos 1990? A gente entrava nos sites e já vinha um “alert” dando as boas-vindas, acompanhado do barulhinho assustador de “PAM!” do Windows 98 ou XP. Bons tempos? Não! Os alertas sobre a tela têm sua função e ela não é divulgar, já que a tela fica congelada até você clicar no “OK” e prosseguir.

LocaTop
Mesmo depois de instalar o app, o LocaTop explica como funciona em alert...

Assim como os alertas de browser, no iPhone eles também são chatos e incômodos por natureza, exatamente porque não devem ser usados sem necessidade. 😛

Feedback

Mais uma vez fica clara a importância do feedback. Essa é uma tarefa tanto para os desenvolvedores — incentivando o contato e aceitando críticas —, quanto para os usuários — escrevendo resenhas (reviews) ou mesmo entrando em contato pelo site oficial dos apps. E não vale só reclamar, hein! O feedback positivo também é essencial para saber o que está dando certo, além de ser um reconhecimento para os bons desenvolvedores.

Uma dica para manter esse contato é criar um site — mesmo que simples — e uma conta no Twitter. Essas ferramentas ajudam você a receber opiniões, divulgar updates, realizar promoções e até filtrar as críticas, já que é impossível atender a todos, né?

. . .

Já viram o vídeo do Convert? Chegar à interface ideal não é tarefa fácil, tampouco rápida. Mesmo quando testamos exaustivamente as aplicações — para iPhone ou qualquer outra plataforma —, deixamos passar alguns pontos que podem parecer óbvios, mas que, por não estarem no foco do desenvolvimento, não receberam tanta atenção.

Seria este o artigo mais longo do MacMagazine? 😛

O assunto é farto e pode gerar muito mais discussão. Vale conferir o post do Jen Gordon (da Smashing Magazine) sobre o tema e, quem tiver outros pontos interessantes, comentários são sempre bem-vindos para acrescentar ao artigo!

E o próximo? A terceira parte da série já está em produção. Espero que tenham gostado da leitura e aguardem por mais um post… sucinto? 😀

Ver comentários do post

Compartilhe este artigo
URL compartilhável
Post Ant.

AdMob comemora dois anos e traça evolução de smartphones de setembro de 2007 até hoje

Próx. Post

iPhones/iPods touch contribuem para queda nos lucros da Nintendo

Posts Relacionados