Aspectos a considerar - interfaces web em celulares
Interfaces de uso intuitivo, funcionalidades fáceis de achar, tarefas realizáveis em poucas etapas, facilitam a vida dos usuários e efetivam as promessas dos serviços móveis de oferecer informações e produtos para acesso a qualquer hora, e, acima de tudo, em qualquer lugar.
Aspectos a considerar na usabilidade de interfaces web em celulares:
◊ Formatar as páginas para telas com, no máximo, 240 pixels, embora telas como as do iPhone tenham largura de até 480 pixels. Usar linguagem XHTML Basic Profile com CSS (External CSS Level 1). Se possível, prover, via CSS, um layout para dispositivos móveis.
Cada tela deve ter autonomia funcional e de conteúdo, pois os usuários só podem abrir uma janela de cada vez. Além disso, se o uso for interrompido por uma ligação ou outra necessidade mais urgente, deve ser fácil retornar à última janela acessada.
◊ Situar o conteúdo mais importante no alto da tela, o "hot spot" (vale para PCs, mas na tela pequena é um fator mais crítico), para evitar muitas rolagens de tela ou seleções de links no deslocamento entre telas. O conteúdo menos importante deve ficar localizado na base das telas.
◊ Usar CSS se possível, especialmente nos elementos da interface, como os botões. A separação entre apresentação e conteúdo facilita a adaptação para diversos dispositivos.
◊ Usar as marcações HTML como na web, com H1, H2, H3, divs para layout, marcações de parágrafo para textos, listas para ordenar itens.
◊ Preparar páginas com tamanho máximo de 20Kb, para acelerar a sua carregação e prover resposta imediata ao uso. Em operações que exijam espera, o aplicativo deve mostrar o status da operação em progresso.
◊ Localizar a barra de navegação, referência para o deslocamento, no alto, com menos opções que na web "fixa".
◊ Criar URLs curtas e fáceis de digitar e restringir a entrada de dados em formulários, devido às limitações dos teclados, que dificultam a escrita de textos longos.
◊ Explicar os textos no título, com o mínimo de palavras, e redigi-los 50% menores do que os publicados na web. As palavras devem ser de fácil compreensão, em liguagem familiar à maioria dos usuários.
Os rótulos da interface também devem curtos, para serem facilmente localizáveis, legíveis e compreensíveis.
◊ Definir uma medida mínima para a largura das colunas em layouts líquidos, que se adaptam à largura das telas. A adaptação irrestrita às telas estreitas dos dispositivos faz com que muitos textos fiquem ilegíveis, especialmente se o layout tiver muitas colunas.
◊ Evitar imagens decorativas ou anúncios em janelas independentes (pop ups), que congestionam as telas dos aparelhos. As imagens, em JPEG e GIF (sem entrelaçamento, transparência ou animação), devem ser identificáveis tanto em monitores coloridos quanto em preto e branco.
◊ Como na web para PCs, evitar arquivos Flash em elementos críticos de navegação, para permitir o acesso sem o plug-in instalado.
◊ Evitar funcionalidades dependentes de Javascript, que cria alguns problemas de compatibilidade e aumentam o tempo de carregação.
◊ Em formulários, facilitar a entrada de dados com valores default nos campos de entrada, em menus e caixas de opções, permitindo que o foco mude com o uso das setinhas do teclado.
◊ Usar cores contrastadas, sem muitas sombras e meios tons, em palheta que diferencie bem a funcionalidade dos elementos.
Nas imagens:
▪ Prover texto alternativo com descrição, para facilitar a leitura antes da carregação (a velocidade de transmissão ainda é lenta).
▪ Não ultrapassar a altura do monitor com uma única imagem (240 x 320 ou 320 x 240 pixels no modo de visualização como paisagem).
▪ Publicar galerias de imagens pequenas ampliáveis, para evitar a carregação de imagens grandes na área de conteúdo.
▪ Usar CSS para imagens em backgroud, que mantém a página estruturada mesmo se o browser não puder mostrá-las.
▪ Usar CSS em vez de Javascript em rollovers, que não precisam carregar duas imagens diferentes para os estados "ativo" e "inativo".
◊ Prover um botão "Voltar ao alto" no pé das páginas para facilitar a volta à barra de navegação.
■ Outros aspectos a considerar:
◊ Levar em conta os objetivos de comunicação de cada publicação, pois o tratamento do conteúdo muda em cada situação. Se a peça se dirige a um público mais popular e jovem, deve ter linguagem coloquial, se chegará a um público mais formal, deve ter um tom mais neutro e formal.
◊ Verificar as circunstâncias em que os usuários vão procurar as informações para dimensionar os textos e imagens. Informações de localização da programação de eventos, por exemplo, devem ser objetivas e ter a data e o local em lugares fáceis de achar.
◊ Priorizar a publicação das informações mais importantes, pois o usuário não se atém muito tempo em cada tela.
◊ Esconder os recursos avançados dos usuários principiantes, mas aos usuários avançados oferecer teclas de atalhos, por exemplo.
◊ Na adaptação de um programa para diferentes dispositivos, redesenhar o programa e reescrever os textos para os modelos principais, considerando as diferenças de uso e dos sistemas operacionais de cada um.
◊ Testar a visualização e uso em vários dispositivos, com diferentes capacidades de processamento, embora seja impossível testar em todos, pela grande variedade. Plataformas importantes: Palm, Motorola, Blackberry, Nokia, Apple.
Há também outros emuladores online (mtld.mobi, dev.mobi ) e offline das principais interfaces móveis que permitem uma visualização genérica do layout em contexto, embora nem sempre os resultados sejam muito precisos.
Pode-se também adquirir aparelhos das principais marcas do mercado e testar/ preparar a interface para estes aparelhos em caráter prioritário, considerando sempre as características do público-alvo. Aparelhos muito vendidos nas operadoras incluem smartfones com iPhone, Windows, Nokia rodando o sistema operacional Symbian e browsers Opera, Motorola Safari.
◊ Desenhar aplicativos flexíveis, baseados no fato de que a maioria dos usuários desconhece ou não está acostumado a usar muitas funcionalidades básicas dos aparelhos.
Assuntos relacionados
► O tamanho do monitor e a resolução de tela
► Testes
► Testes de usabilidade
► Flexibilidade
► Sobre este site : Adaptação para PDAs
Mais informação sobre o assunto (links externos)
► Consider these design issues when developing mobile applications (TechRepublic, acesso em 17.7.2006)
► W3CMobile web best practices 1.0 - Documento do W3C sobre o desenvolvimento de aplicativos web para dispositivos móveis. Foi redigido com a ajuda de profissionais da Ericsson, Google, Nokia, Microsoft, AOL, Microsoft, e desenvolve temas como layout, publicação de conteúdo, preparo de imagens
► Forum Nokia : Usability - Linhas de ação para a usabilidade de aplicativos para dispositivos móveis
► Tech companies agree on mobile web rules (Znet, acesso em 27.6.2006)