B OAS PRTICAS PARA

DESENVOLVIMENTO
WEB MOBILE
Relatrio Tcnico

Nmero do relatrio pegar com o gerente!

Este documento apresenta uma seleo de regras e sugestes de projeto
de interfaces de aplicaes para celulares.

Mauricio Cirelli
Fevereiro de 2009

Grupo de Estudos em interao do LTS

Escola Politcnica da Universidade de So Paulo

Fevereiro de 2009

CONTROLE DE REVISES

No.
00
01
02
03
04
05

Data

Proj.RT.NNN.vv

Reviso

Fevereiro de 2009

Sumrio
RESUMO ................................................................................................................................................. 3
INTRODUO ....................................................................................................................................... 3
DIFICULDADES ..................................................................................................................................... 4
O COMEO............................................................................................................................................. 5
BOAS PRTICAS ................................................................................................................................... 5
Interface ............................................................................................................................................... 6
Contedo .......................................................................................................................................... 6
Navegao e Links ............................................................................................................................ 8
Layout ............................................................................................................................................ 10
Formulrios .................................................................................................................................... 13
Tecnologia.......................................................................................................................................... 15
CONCLUSO ....................................................................................................................................... 18
REFERNCIAS ..................................................................................................................................... 19

Proj.RT.NNN.vv

Fevereiro de 2009

RESUMO
Este trabalho prope recomendaes para os principais problemas de usabilidade encontrados
em pginas web exibidas por dispositivos mveis, fornecendo um guia de boas prticas e
princpios a ser seguido por desenvolvedores do framework x-gov.
O contedo ser inicialmente apresentado a partir das dificuldades existentes para
desenvolvedores e web designers nos quesitos de usabilidade e restries tecnolgicas e, a
seguir, sero propostas diversas tcnicas e prticas de desenvolvimento que podem
solucionar ou, ao menos, minimizar estes problemas.
Palavras-chave: web mobile, boas prticas, x-gov, usabilidade

INTRODUO
Estimativas mostram que aproximadamente 730 milhes de pessoas acessam a Internet via
dispositivo mvel. Cada vez mais as empresas e corporaes esto fazendo uso de solues
web mobile, seja para integrar grandes equipes de funcionrios ou para fornecer seus servios
a uma gama maior de usurios [1].
Entretanto, desenvolver uma pgina web mobile no simplesmente migrar uma soluo
desktop para uma verso para celulares. Segundo a Little Springs Design [2], uma aplicao
mvel deve possuir objetivos muito diferentes de uma aplicao convencional, pois os
recursos disponveis so outros. Uma aplicao mobile pode ser acessada a qualquer
momento de qualquer lugar e esta caracterstica deve ser explorada ao mximo pelos
desenvolvedores.
Por exemplo, a pgina web de uma pizzaria pode possuir um catlogo de pizzas, com fotos,
ingredientes utilizados, receitas e, at mesmo, vdeos do local. Todo este contedo bem
visvel e explora muito bem as capacidades de um computador. Porm, no seria agradvel se
um usurio acessasse este site por um celular e enfrentasse uma longa demora para carregar a
pgina devido s imagens e vdeos, sendo que, ao final, no obteria boa resoluo do
contedo que foi exibido.
Considere uma situao em que o usurio deseja encomendar uma pizza de um local prximo
de sua casa.Ao acessar a pgina pelo celular, o cliente provavelmente:
1. J conhece a pizzaria, pois sabia seu endereo eletrnico ou a encontrou rapidamente
em um site de buscas como o Apontador (http://www.apontador.com.br)
2. Est em movimento ou em um local que no possui um computador disponvel
3. Deseja apenas encomendar uma pizza, normalmente, que ele j conhece
A navegao se tornaria muito confusa, se a pgina exibida fosse apenas uma miniaturizao
do site convencional. Os objetivos so muito diferentes, pois as intenes dos usurios so
diferentes.

Proj.RT.NNN.vv

Fevereiro de 2009
Alm dos objetivos, a estilizao e a apresentao do contedo em ambiente mobile devem
ser muito bem estudadas e estruturadas. No possvel, por questes fsicas dos aparelhos,
exibir todo o contedo que se deseja em uma pgina.
Apontaremos e discutiremos, de agora em diante, uma relao de solues e princpios a
serem seguidos pelos desenvolvedores mobile a fim de criarem pginas bem definidas e
apresentveis em dispositivos mveis.

DIFICULDADES
Alguns dos problemas foram apontados a partir de um estudo de usabilidade com muitos
usurios, realizados de 2004 a 2007 por Y. Cui e V. Roto em How people use the web on
mobile devices, publicado em 2008 [8] e por S. Shrestha em Mobile web
browsing: usability study, publicado em 2007 [10].
A portabilidade e mobilidade de aparelhos como celulares, Palms, SmartPhones, PDAs, entre
outros, se deve, essencialmente, ao tamanho fsico do dispositivo. A reduo deste tamanho
favorece a mobilidade em sacrifcio da usabilidade e dos recursos tecnolgicos da web [1].
Ao trabalhar com um espao reduzido, o desenvolvedor no poder utilizar muitas formas
diferentes para exibio de contedo. Como veremos mais adiante, o contedo fica restrito a,
basicamente, texto curtos e diretos [3]. Isto pode tornar o contedo impreciso, gerar
problemas com rolamento de pgina e m organizao dos tpicos do site [8].
A velocidade de conexo aparece como um segundo grande empecilho encontrado pelos
programadores. Apesar do advento da tecnologia 3G, a maioria dos aparelhos com acesso a
Internet o faz a partir de conexes WAP [1].
A conexo wireless WAP est restrita a uma baixa velocidade, o que impede a exibio de
grandes contedos ou pginas web com muitos recursos visuais ou de interao, alm de
apresentar um alto custo de utilizao.
A digitao em ambiente mobile muito complexa [9]. A maioria dos dispositivos utiliza
teclados reduzidos, normalmente baseados no teclado numrico convencional. A digitao
feita com apenas dois dedos pela maioria das pessoas, o que a torna lenta e muito suscetvel a
erros. Formulrios, campos de busca e caixas de texto se tornam grandes viles da
usabilidade de uma pgina mobile.
Uma ltima dificuldade reside nos navegadores mobile, ou mini-browsers, e nos sistemas
operacionais dos aparelhos. Atualmente, muitos navegadores j oferecem suporte s
tradicionais linguagens de programao para Web Convencional, como XHTML,
JavaScript e Cascade StyleSheets. Apesar disto, no so todos os sistemas operacionais
mobile que aceitam estes navegadores e ainda existem muitas diferenas de interpretao por
parte dos browsers [1].
Isto incmodo e gera dificuldades de desenvolvimento no aspecto tecnolgico. At ento,
as dificuldades apresentadas eram apenas de conotao fsica. Ou seja, relacionadas ao
tamanho das telas dos aparelhos ou quantidade de teclas disponveis, afetando diretamente
apenas a interface com o usurio e a usabilidade.
Proj.RT.NNN.vv

Fevereiro de 2009

O COMEO
Antes de iniciar o desenvolvimento de qualquer projeto, uma das etapas a Especificao do
Sistema, a qual deve definir metas de usabilidade e metas de experincia do usurio [6].
Nesta etapa, algumas reflexes devem ser feitas:

Entender o que o usurio espera ao utilizar o sistema

Quais tarefas o usurio poder executar?
Analisar se estas tarefas atendem s expectativas do usurio
Definir como o usurio realizar estas tarefas

Especificamente no ambiente web mobile, fundamental entender que os objetivos do

usurio so diferentes daqueles definidos no ambiente desktop.
Podemos comparar as atividades dos usurios da Internet Mobile com relao aos da Internet
Desktop da seguinte maneira:

Normalmente, ele no buscou o site atravs de um servio buscador, como o Google

[4]
Ele tem uma meta bem definida e deseja realiz-la o mais rpido possvel
Ele tem um problema para resolver e precisa de uma soluo ou resposta eficiente e
rpida
Ele abandonar seu site caso demore em atingir seu objetivo ou se perca na
hierarquia do contedo [5]

Em funo disto, um bom comeo definir bem as metas do usurio e a hierarquia do

contedo de sua pgina. Ao acessar seu web site, o usurio dever saber exatamente o que ele
poder encontrar ou realizar quais os objetivos que seu site atende e entender rapidamente
de que forma o contedo do site est estruturado.
A maneira com a qual o usurio ir realizar as tarefas em uma pgina varia muito e depende,
essencialmente, da criatividade do desenvolvedor. Entretanto, um sistema criativo no
necessariamente eficiente, fcil de usar ou que respeita as limitaes da plataforma.

BOAS PRTICAS
Conforme discutido na sesso Dificuldades, no ambiente mobile, os problemas podem ser
subdivididos em duas categorias: Recursos Tecnolgicos e Interface com o Usurio.
As limitaes tecnolgicas so aquelas padres da plataforma, definidas pelo fabricante do
dispositivo, e pelo navegador utilizado pelo usurio. So problemas como portabilidade de
softwares, incompatibilidade de plataformas de desenvolvimento, linguagens de programao
suportadas, alm de padres de codificao de caracteres, entre muitos outros.
No plano de Interface com o Usurio, os problemas esto relacionados usabilidade e esto
intimamente ligados s dificuldades descritas na sesso Dificuldades. A interface abrange
caractersticas de layout, contedo das pginas, recursos visuais e de multimdia, organizao
e estrutura do site, formulrios e mecanismos de navegao.

Proj.RT.NNN.vv

Fevereiro de 2009
Para cada um dos tipos de problema apresentados, existe um conjunto de recomendaes
especificadas, a fim de minimizar as dificuldades do usurio melhorar a usabilidade e a
interface e aumentar as chances de que seu projeto seja bem exibido pelos diferentes
dispositivos.
A equipe de desenvolvedor deve balancear as recomendaes. Usualmente, uma pode
conflitar com outra, de forma que a equipe deve ponderar cada uma delas, baseado no
pblico-alvo, tecnologia disponvel e testes de usabilidade.
Em funo disto, os princpios propostos sero discutidos em duas grandes categorias:
Interface e Tecnologia.

Interface
Contedo
O contedo a ser exibido , to somente, aquele que o usurio procura.
Segundo J. Nielsen [5], a interface deve fornecer apenas o contedo que o usurio deseja ver
e no local que ele espera que o contedo seja exibido. Embora seja muito criativo exibir o
contedo de um site sobre aqurios, por exemplo, em posies randmicas da tela tendo um
oceano de fundo e em caixas de texto com formato de peixes, o usurio se sentir perdido e
desamparado, pois no saber o que fazer ou o que est acontecendo. Tudo que ele queria era
saber o preo de um peixe Beta e se deparou com um mar de informaes que no lhe servia,
dispostas de forma ilgica, dificultando sua acessibilidade.

O contedo principal deve sobrepor o contedo extra.

Este tipo de problema normalmente encontrado quando nos deparamos com aplicaes que
foram migradas do ambiente web convencional para o ambiente mobile. comum
encontrarmos aplicaes que foram apenas miniaturizadas ou apenas adaptadas para
dispositivos mveis. Desta forma, o contedo original passa por um processo de reduo de
tamanho de exibio e a pgina web fica extremamente poluda por informaes que no so
relevantes para o usurio.
Mesmo em aplicaes criadas sem baseamento em pginas convencionais, comum se
encontrar textos que descrevem alguma informao ou no pertencem ao assunto principal da
pgina.
Devido s dificuldades de navegao e restrio de espao para exibio de contedo, sempre
que possvel deve-se exibir somente a informao procurada. Quando esta informao for
muito vaga ou dependente de um aparato extra, deve-se ter o cuidado de que estes textos
complementares sejam curtos e no sobreponham o assunto principal [5].

O contedo deve ser bem apresentado em qualquer dispositivo que o usurio utilize.

Proj.RT.NNN.vv

Fevereiro de 2009
A maioria dos dispositivos mveis consegue exibir claramente, em uma pgina sem scrolling,
de 3 a 10 linhas de texto [7]. Esta grande variao devida grande variedade de
dispositivos, os quais no seguem um padro de tamanho e resoluo de tela.
Analisar quais so os possveis usurios de uma aplicao e quais tipos de dispositivos eles
utilizaro para acessar o contedo desta pgina so procedimentos j descritos na sesso
anterior. Uma vez conhecidas as restries de dispositivos existentes no pblico-alvo, devese testar a exibio do contedo em todos estes aparelhos.
A W3C [4] recomenda que o contedo seja hierarquizado em subpginas, a fim de respeitar
as limitaes de tamanho, trfego de dados e velocidade de conexo dos dispositivos.
Este aninhamento de contedo deve manter a legibilidade e navegabilidade da pgina. O
usurio no pode ser obrigado a executar muitos passos para realizar uma tarefa simples,
devido ao fato de sua pgina estar hierarquizada em um nmero excessivo de subpginas.
Lembre-se de que o contedo a ser exibido , to somente, o necessrio.

O contedo deve estar hierarquizado, atravs de um ndice ou menu com lista de opes [4]
Como j mencionado em outros tpicos, fundamental entender que o usurio acessar o
contedo pressupondo que um determinado link o levar ao seu objetivo.
Dar ao usurio uma lista de opes possveis, como uma listagem dos tpicos abordados e
funes disponveis no site ndice ou menu far com que ele elimine as opes que no se
relacionam com o que ele deseja e v direto ao tpico que lhe interessa.
So inmeras as situaes em que o usurio se depara com uma lista de opes e nenhuma
delas parece atender ao que ele procura. Quando isto acontece, ele imediatamente pensa que
a informao no existe neste local e se sente perdido. Muitas vezes isto o leva a sair da
pgina e buscar as informaes em outro site.
Existem, ainda, os casos em que em uma lista de opes, existam trs ou mais alternativas
que parecem resolver o problema. Nestas situaes, pode-se perder muito tempo verificando
cada uma delas at encontrar o que se buscava. Tanto pior ser se, ao se escolher todas as
opes existentes, descobrir-se que o contedo que buscamos no existia naquele site.
Em uma boa hierarquia, ao eliminar as opes que no lhe interessa, o usurio ter apenas
uma alternativa disponvel, e esta opo deve lev-lo informao procurada.

Utilize navegao drill-down ao exibir contedos muito extensos e com subdivises em

uma mesma pgina.
Segundo a W3C [4], a navegao drill-down aquela que lista os principais tpicos
relacionados ao contedo a ser exibido na forma de um ndice e utiliza ncoras HTML para a
navegao na mesma pgina.
Desta forma, sem recarregar a pgina o usurio pode ler todos os tpicos sobre determinado
assunto, navegando dentro de um ndice algo que ele j est familiarizado. Este tipo de

Proj.RT.NNN.vv

Fevereiro de 2009
exibio de contedo fornece, sempre, uma forma de o usurio voltar ao ndice ao topo da
pgina atravs de um boto ou link Voltar, por exemplo.

A apresentao do contedo deve ser feita de forma vertical.

O guia de melhores prticas para web mobile da W3C [4] sugere que a barra de rolagem
scrolling da pgina seja feita em uma nica direo. As pessoas esto acostumadas a lidar
com contedo disposto verticalmente. Planilhas so escritas de forma vertical, tabelas, livros
e elementos visuais crescem na direo vertical. O acompanhamento de um texto em uma
pgina deve ser feito desta maneira, pois o usurio j est familiarizado com isto.
Embora respeite a sugesto da W3C, utilizar scrolling lateral no recomendvel, pois deixa
o usurio confuso quanto seqncia lgica das informaes exibidas e quanto estrutura do
site.
Scrolling em duas direes no deve ser utilizado de forma alguma, pois a experincia do
usurio se torna demasiado confusa, e o problema se agrava ainda mais se a informao
relevante no estiver localizada em uma posio bvia da pgina.

Navegao e Links
No utilizar endereos eletrnicos longos e com muita pontuao.
Digitar utilizando teclados mobile, como j foi discutido anteriormente, pode se tornar uma
tarefa muito rdua. Se o usurio for obrigado a digitar o endereo de um site, interessante
minimizar o trabalho que ele ter [4].
Isto pode ser feito adicionando os caracteres http://, previamente, ao contedo do campo
que est sendo preenchido, por exemplo.
Uma boa prtica manter as URIs (Uniform Resource Identifier) pequenas e entender
simplificaes via cdigo, como interpretar exemplo.com da mesma maneira que
http://www.exemplo.com/.

Destaque e identifique claramente os links, assim como o que eles fazem.

O texto de um link muito importante para que o usurio entenda o que acontecer caso ele
clique. Imagine-se clicando em um link que diz Home e no ser levado pgina inicial do
site. Voc ter de voltar pgina anterior, esperar que ela seja recarregada e procurar onde
o local correto para executar determinada tarefa.
Segundo a W3C [4], ao clicar em um link o usurio deve saber exatamente para onde este
link o levar, quais aes sero executadas e qual tipo de arquivo ele receber como retorno
se for o caso.
Se o usurio desejar exibir um vdeo ao clicar em um link e o mesmo no especifica qual
formato de arquivo tal vdeo est gravado, h uma possibilidade de o usurio se frustrar por

Proj.RT.NNN.vv

Fevereiro de 2009
no possuir o plug-in necessrio para execuo do arquivo. Alm da perda de tempo, o
usurio teve uma perda financeira considervel, pois utilizou trfego de internet mobile e no
pde utilizar o contedo que recebeu.
Certifique-se tambm, de que o link possui um alvo vlido. A consistncia da pgina depende
de o usurio no receber um erro do tipo: 404 Not Found.
Links em ambiente mobile devem estar destacados, sob algum tipo de efeito de estilo ou
formatados de forma diferente do restante da pgina. muito comum e eficiente, links
receberem realce ao terem o mouse por cima. Este realce pode ser uma mudana de cor de
fundo do link, sublinhados ou mudana de tamanho ou estilo de fonte.
Alm disto, os botes devem estar bem dispostos, de maneira que o uso do tabulador do
teclado seja eficiente e leve o usurio ao longo da pgina seguindo uma seqncia lgica.

A barra de navegao deve estar disposta no rodap da pgina e um link para a sesso
anterior ou home Page deve ser exibido no topo.
Devido ao espao disponvel e recomendao de exibir o contedo principal de forma clara
e visvel, a navegao deve ser feita ao final da pgina [4].
Ao entrar na pgina, o usurio visualizar o contedo principal. Se for o que lhe interessa, ele
o ler at o fim, chegando ao rodap e continuando sua navegao a partir de l, sem precisar
voltar ao topo da pgina para ver os links disponveis. Mesmo que se usem ncoras para
voltar ao topo, neste caso prefervel que o espao primrio da pgina seja utilizado pelo
contedo principal e no pelas opes de navegao.
Caso o contedo exibido no seja o que o usurio procurava, imediatamente ele recorrer ao
link de home ou voltar existente na parte superior da tela.
importante fornecer mecanismos de desfazer ou exigir confirmao ao do usurio, de
forma que erros de clique missclicks sejam contornados.

Utilize teclas de atalho para as tarefas e aes mais comuns.

O estudo prvio dos objetivos do usurio lhe fornecer quais tipos de aes sero mais
comuns por parte dos visitantes.
Estas aes devem possuir teclas de atalho a W3C [4] as chama de Access Keys a fim de
poupar tempo e tornar a navegao mais eficiente. Um exemplo clssico e padro do HTML
o uso da tecla ENTER para submeter informaes de formulrios. Na verdade, ao clicar na
tecla ENTER, disparamos um evento Submit.
Explicite nos botes e locais utilizados para iniciar determinadas tarefas que eles possuem
uma tecla de atalho e qual tecla .

Proj.RT.NNN.vv

Fevereiro de 2009

No recarregue a pgina, no utilize pop-ups e no redirecione o usurio sem seu

consentimento.
Sempre que uma destas aes for necessria, pea permisso ao usurio para execut-las.
Qualquer uma delas gera trfego extra, utiliza a conexo e faz com que o custo de navegao
aumente.
Tarefas como recarregar a pgina e redirecionar o usurio so agravadas pelo fato de que o
usurio pode se sentir perdido, caso isto seja feito sem que ele seja notificado. Todas as aes
que a pgina necessite fazer devem estar claras ao visitante, a fim de que ele tenha controle
sobre o que ir acontecer.
A W3C [4] recomenda que estes tipos de aes sejam feitas do lado do servidor, utilizando
conexes http sob configurao do cdigo 3xx.
De forma alguma se recomenda o uso de pop-ups. Todo contedo que seria exibido por ele
pode ser exibido pela prpria pgina, sem sacrificar ainda mais o espao destinado
visualizao do contedo.

Layout
No se deve utilizar frames ou tabelas como recursos de layout.
Utilizar frames como forma de organizar e estruturar o layout de uma pgina web , hoje em
dia, uma prtica muito antiquada. Com o grande crescimento e aprimoramento dos Cascade
Style Sheets (CSS), possvel posicionar, dimensionar e estilizar as pginas web da maneira
que o designer preferir.
No ambiente mobile, a utilizao de frames possui trs agravantes:

No verstil. Um frame ter sempre a mesma aparncia, no podendo ser

reposicionado ou estilizado
Exige o carregamento de pginas (documentos xhtml) extras
Aumenta o custo de navegao do site

O uso de tabelas deve se restringir funo semntica de uma tabela: relacionar dados. A
W3C [4] recomenda que seja seguida a filosofia tableless, a qual define que o layout deve ser
definido exclusivamente por tags <div> e <span> do XHTML e formatadas de acordo com
as folhas de estilo CSS em um arquivo separado.
Os problemas da utilizao de tabelas como estrutura de layout em ambiente mobile so:

Distorcem o contedo na medida em que o texto torna-se maior

Tornam o cdigo confuso e no reutilizvel
Esto restritas a poucas colunas, devido ao tamanho da tela

De fato, uma tabela em ambiente mobile no deve possuir mais do que 4 colunas. Este
nmero pode variar dependendo do tamanho das palavras que esto sendo colocadas nas
clulas. Em geral, 4 colunas o limite recomendvel para que o contedo no perca a

Proj.RT.NNN.vv

10

Fevereiro de 2009
disposio nos diferentes aparelhos. No se deve, desta forma, utilizar mais do que 2 palavras
em cada clula.

Utilize headings e subheadings para exibio de textos longos.

As tags <h1>, <h2>, <h3>,<h4>,<h5> e <h6> do XHTML permitem a hierarquizao do
contedo de uma forma semanticamente mais clara e correta. So tags criadas com a inteno
de hierarquizar o texto de forma que o leitor sinta-se familiarizado com a estrutura do
contedo.
comum se encontrar livros e apostilas cujos tpicos do ndice esto dispostos como na
figura ao lado. Este tipo de estrutura facilita a compreenso do texto e permite a utilizao da
navegao drill-down de forma mais clara tanto para o programador, quanto para o

Figura 1: Headings

visitante.

O ttulo da pgina deve ser curto e objetivo, com o propsito nico de identificao.
Devido ao tamanho reduzido de tela, alguns navegadores no exibem a barra de ttulo da
pgina. Geralmente, em pginas desktop, encontramos o mapa completo do site, indicando
toda a trajetria do usurio, no ttulo da mesma, como:
Site X :: Busca por ID :: Resultados da Busca :: Tpicos Relacionados :: Tpico XYZ
Isto no deve ser feito em ambiente mobile. O tamanho da tela no permite que toda esta
informao seja exibida.
Adicionar um site com esta formatao aos favoritos pode ser extremamente difcil. Ao pedir
para o navegador realizar esta tarefa, o usurio ter que editar o ttulo que est sendo
armazenado para que o mesmo torne-se legvel. Como j foi discutido anteriormente, a
digitao complicada e muito sujeita a erros nesta plataforma.
Uma boa apresentao para o ttulo do exemplo acima seria: X : XYZ, apenas.

O tamanho total da pgina a ser carregada no deve exceder os 10kb.

Esta uma recomendao da W3C [4]. Devido a fatores j discutidos, como velocidade,
custo e desempenho de conexo, exigir que o usurio faa download de uma pgina grande
exigir que ele seja paciente e esteja disposto a pagar mais caro pelo contedo que ser
exibido.
Geralmente, os usurios se mantm atentos ao que est acontecendo em carregamentos de at
1s [5]. Em casos de demoras maiores, eles procuraro algo para se distrair no caso do
ambiente desktop ou desistiro e procuraro a soluo em outro site caso do ambiente
mobile.

Proj.RT.NNN.vv

11

Fevereiro de 2009
Este tamanho de 10kb inclui o arquivo da pgina (.html, .xhtml, .asp, .php, entre outros), as
imagens e quaisquer contedos multimdia, como arquivos Flash, MPEG, AVI ou MP3.

Utilize medidas relativas ao especificar tamanho de elementos da pgina.

Medidas relativas so valores acompanhados por unidades que dependem de outras
medies. No caso do XHTML, isto pode ser feito utilizando porcentagem.
A W3C [4] especifica que, para melhorar a visibilidade do site em diversos tamanhos e
resolues de tela, devem-se substituir as medies em pixels, polegadas ou centmetros para
medidas em porcentagem.
Se isto for feito corretamente, o contedo se adaptar automaticamente ao tamanho da tela
que est o exibindo, sem grandes distores. A prtica to eficiente que, na maioria dos
casos, nenhuma distoro ocorre e o contedo exibido da mesma forma nos diversos
dispositivos.

No utilize imagens spacers para alinhar verticalmente o contedo.

Spacers so arquivos de imagem com comprimento pequeno e altura de 1 pixel. So muito
utilizados em pginas desktop para alinhar verticalmente o contedo interno a uma tag
<div>.
Isto feito devido inexistncia de um atributo com esta caracterstica na especificao do
XHTML ou do CSS.
Podemos listar alguns problemas na utilizao desta tcnica:

Estes arquivos, em geral, possuem tamanho de 1kb, podendo comprometer o tamanho

total de uma pgina a ser carregada
No so eficientes, pois o tamanho da tela pode variar e o alinhamento pode deixar de
existir
No caracterizam uma boa prtica de programao, pois exige o carregamento de
contedo que no ser exibido intil para o usurio e foge s especificaes e
recomendaes da W3C [4] sobre CSS e XHTML.

O alinhamento vertical da tag <div> deve ser feito a partir do conhecimento do tamanho
vertical da clula. Uma vez conhecido, utilize as propriedades padding-top e padding-bottom
para centralizar o contedo. Este procedimento eficiente em muitos casos, falhando apenas
quando no se conhece o tamanho do contedo que ser exibido.

Utilize textos alternativos para a exibio de contedo multimdia.

A maioria dos navegadores possui suporte para imagens, porm, possvel que o usurio
desabilite esta opo a fim de economizar tempo e custo em sua navegao.

Proj.RT.NNN.vv

12

Fevereiro de 2009
Por este motivo, sempre que se desejar fazer uso de imagem, som, vdeo ou arquivo flash,
deve-se utilizar a propriedade alt do XHTML para exibir um texto descritivo a este
contedo, o qual ser exibido caso o arquivo multimdia no possa ser carregado.

No utilize imagens no plano de fundo da pgina.

O uso de imagens como plano de fundo acarreta alguns problemas:

Maior latncia demora ao carregar a pgina

Esto sujeitas a no serem exibidas pelos browsers
Tornam a estilizao de cores do site dependente da visualizao da imagem
Se a imagem no for exibida, o contedo pode se tornar ilegvel dependendo das
escolhas de cores.
Geram custos extras para serem exibidas

Caso seja necessrio utilizar imagens para esta finalidade, garanta que o usurio possa
escolher entre uma visualizao com ou sem este recurso, de forma que ele no se frustre
caso algo acontea de forma inesperada.

Formulrios
Fornea formas alternativas para o preenchimento de caixas de texto sempre que possvel.
Em diversos casos possvel substituir uma caixa
de texto por uma caixa de seleo mltipla
dropdown list. Esta substituio resolve o
problema de digitao e elimina possveis erros na
entrada de dados.
Em casos onde esta substituio no possvel,
outra alternativa o uso de tecnologia
AutoComplete. Esta tecnologia a mesma utilizada
Figura 2: Google Home http://www.google.com

pelo Google Suggest na imagem ao lado.

O recurso baseia-se em fornecer opes para o

usurio conforme ele digita em um campo. No exemplo da figura, ao digitarmos a letra a,
automaticamente temos a opo de escolher uma entre dez possibilidades. Conforme
digitamos mais caracteres, as opes se tornam mais especficas, at que, em dado momento,
o texto que digitvamos aparece na lista e podemos escolh-lo sem ter de terminar de digitlo.
Uma desvantagem o uso de linguagens client-sided, as quais podem no ser interpretadas
por todos os navegadores.
Estas alternativas tm por objetivo reduzir a quantidade de texto digitada pelo usurio em
formulrios de qualquer natureza.

Proj.RT.NNN.vv

13

Fevereiro de 2009

Utilize mscaras de entrada em campos de preenchimento padro.

Entende-se por campos de preenchimento padro as caixas de texto que devem ser
preenchidas seguindo uma estrutura pr-determinada, chamada mscara de entrada. Por
exemplo, um campo CPF em determinado sistema deve seguir a estrutura XXX.XXX.XXX-XX.
Neste caso, exige-se que o usurio digite quatorze caracteres, sendo trs deles especiais, ou
seja, de digitao ainda menos direta.
Uma soluo para este caso pode ser o uso de linguagem client-sided, a qual preenche
automaticamente o campo conforme o usurio digita. Um bom script para isto colocaria os
caracteres especiais automaticamente aps a digitao das trades de nmeros e no
permitiria que o campo aceitasse qualquer valor fora desta regra ou mscara.
O uso deste recurso deve ser estendido, de forma que o usurio no possa preencher um
campo ou posio de campo numrico com caracteres alfabticos ou especiais, por
exemplo.
As mscaras de entrada tm por objetivo reduzir as chances de erro de digitao do usurio,
para que no perca tempo tendo que corrigir os dados fornecidos.

Sinalize de forma clara e direta o que o deve ser preenchido em determinado campo de
formulrio.
A descrio do campo seja ele uma caixa de texto, de seleo mltipla ou um simples
checkbox deve ser limitada a uma ou duas palavras, porm deve descrever exatamente o
que deve ser preenchido.
Caso o campo utilize alguma mscara de entrada, indique ao lado, abaixo ou com um
lembrete que aparea quando ele receber o foco, qual a mscara e como o seu
preenchimento deve ser feito. Assim, se o script de mascaramento automtico no funcionar,
o usurio ainda saber como preencher o campo.
Indique quais so os campos obrigatrios. Normalmente isto feito adicionando uma estrela
(*) vermelha ao lado do campo ou da descrio do campo.

Utilize uma seleo hierrquica se as buscas possam ser realizadas por assuntos ou tpicos
especficos.
Imagine uma situao em que o usurio deseja realizar um agendamento mdico em
determinado hospital da rede pblica de sua cidade. Ele ter de escolher um hospital de sua
preferncia, a especialidade mdica desejada e um dos mdicos que possuem horrio
disponvel.
Em um formulrio tradicional, o usurio teria que buscar o hospital a partir do nome digitado,
escolher a especialidade entre uma lista disponvel e escolher um dos mdicos em uma lista.

Proj.RT.NNN.vv

14

Fevereiro de 2009
Se o preenchimento for feito de forma assncrona, ainda possvel evitar que o usurio
escolha um mdico que no pertence ao hospital. Mas isto exige que o sistema suporte
linguagens client-sided, ou diversos reloads da pgina um para cada opo selecionada.
Ainda assim a busca pouco interativa e exige o uso de controles de formulrios.
Uma soluo mais eficiente fazer esta busca de forma hierrquica utilizando hyperlinks. Em
uma primeira tela, o usurio receberia a lista de hospitais da regio. Aps a escolha do
hospital, uma nova pgina recarregada exibindo a lista de especialidades disponveis e, em
seguida, a lista dos mdicos.
Esta soluo ainda exige que a pgina seja recarregada algumas vezes, porm exibe os
resultados de uma forma mais clara para o usurio e mais fcil de ser utilizada, pois exige
apenas uma tabulao em uma nica pgina, em um rolamento unidimensional.
A diferena fundamental que o usurio sabe o que esperar ao clicar em um hyperlink. Ao
mudar a opo selecionada em uma dropdown list o usurio no espera que a pgina seja
recarregada ou que uma nova lista de opes aparea assincronamente o que no acontece
quando se clica em um hyperlink.
Desta forma, a interao com o usurio favorecida pela transparncia com que o site
executa as solicitaes do usurio, por poup-lo de preencher um formulrio e por eliminar
quaisquer erros de digitao.

Determine a tabulao do site de modo a seguir a orientao do rolamento da pgina.

A tabulao a ordem com que os campos do formulrio devem ser preenchidos.
Geralmente, dentro de um formulrio, ao apertar a tecla TAB ou equivalente em um
dispositivo mvel o usurio direcionados ao prximo campo.
Esta tecla muito utilizada dentro do ambiente mobile em funo de fornecer uma
navegao mais rpida e direta dentro de um site. Porm, a navegao se tornaria muito
desgastante e confusa caso a tabulao ocorresse de maneira aleatria ou incoerente com a
estrutura do contedo.
A melhor maneira de manter a orientao da pgina e no tornar a navegao confusa
ordenar os campos seguindo o sentido de rolamento da pgina normalmente o vertical.

Tecnologia
Fornea alternativas para exibio de contedo ou realizao de funes que possam no
ser exibidas corretamente.
Esta recomendao envolve recursos multimdia no mbito de tecnologia, cookies e o uso de
scripts client-sided.

Proj.RT.NNN.vv

15

Fevereiro de 2009
Entenda-se por recursos multimdias quaisquer animaes, vdeos, sons ou arquivos de
streaming. Nem todos os navegadores suportam estas tecnologias, apesar de todas estarem
presentes no XHTML tradicional.
Estes recursos fornecem boas interaes e favorecem a exibio de grandes quantidades de
contedo de forma mais limpa e assimilvel para o visitante, por isto devem ser utilizados.
Entretanto, deve-se ressaltar que estes recursos no devem ferir outras limitaes, como
tamanho da pgina e latncia de carregamento. Portanto, devem ser utilizados
ponderadamente e em situaes muito especficas, como pequenas demonstraes.
Como exigem que o usurio carregue um contedo de tamanho maior, sempre devem estar
inicialmente escondidos, sendo carregados somente se o usurio desejar.
Linguagens client-sided como Javascript j foram mencionadas e, at mesmo, utilizadas por
algumas recomendaes. No entanto, devemos salientar que nem sempre esta tecnologia
devidamente interpretada pelos navegadores, existindo casos em que os mesmos sequer
oferecem suporte a elas.
Embora promovam um grande avano na questo da interatividade, estas ferramentas devem
ser utilizadas com a ressalva de que o sistema no dependa exclusivamente do funcionamento
delas. sempre possvel substitu-las por tcnicas tradicionais, sem perder o objetivo, como
no caso da mscara de entrada, em que se o mtodo automatizado falhar, ainda existe uma
explicao da mscara ao lado ou abaixo do campo.
A W3C [4] recomenda que recursos multimdia e elementos client-sided no devam ser
utilizados. Esta uma postura radical, pois possvel contornar o problema conforme
descrito acima e, quando existe portabilidade para tal, estes elementos tornam a navegao e
interao do usurio com a pgina muito melhores.
Cookies so arquivos que o site salva no dispositivo do usurio e que contm informaes
utilizadas pela prpria pgina. Normalmente so utilizados para memorizar localmente
usurios e senhas, de forma que o usurio no precise fazer sua identificao quando retornar
pgina em um momento posterior.
A utilizao de cookies anloga s outras mencionadas acima, com o diferencial de que a
W3C no se posiciona deliberadamente contra seu uso em ambiente mobile. Segundo a
organizao, apenas no se deve confiar que cookies estaro habilitados.

Siga a especificao das linguagens definidas pela W3C.

Embora parea bvia, esta recomendao de suma importncia e est presente no
documento publicado pela W3C [4]. A maioria dos desenvolvedores no segue a
especificao da linguagem definida pela organizao. Um bom meio de verificar se
determinado site est dentro das normas de programao utilizar o sistema da prpria W3C
para validao de cdigo, presente em: http://validator.w3.org/mobile/.
Ao seguir estas normas, o desenvolvedor est, automaticamente, garantindo que os
navegadores desenvolvidos a partir delas a grande maioria interpretem e exibam o
contedo da maneira correta.

Proj.RT.NNN.vv

16

Fevereiro de 2009
Uma destas normas diz respeito codificao de caracteres utilizada. A W3C recomenda o
uso exclusivo do padro UTF-8.

Realize testes reais sobre sua aplicao em todos os dispositivos e browsers possveis.
Devido a todas estas possveis incompatibilidades ou ms interpretaes e exibies de
contedo por parte dos browsers e dispositivos, um teste abrangente pode no ser satisfatrio.
Aps analisar e descobrir as caractersticas do pblico-alvo, o desenvolvedor deve estudar
quais tipos de dispositivos e navegadores estes futuros usurios estaro utilizando ao acessar
a pgina. Isto pode ser feito atravs de pesquisa, questionrios, entrevistas ou testes de campo
[6].
Durante a fase de desenvolvimento, comum os programadores realizarem testes a partir de
emuladores de ambiente mobile. Estes testes so eficientes durante a esta fase, pois fornecem
uma visualizao prvia, com certo grau de preciso, sobre como seria se o site fosse exibido
em determinado dispositivo.
Existem muitos emuladores mobile. A maioria das grandes empresas do ramo, como Nokia,
Sony Ericsson e Motorola possuem emuladores para seus aparelhos que esto disponveis na
Web1.
Entretanto, a fase de testes no deve ser realizada exclusivamente a partir destas ferramentas.
Realizar testes reais fundamental para ter a garantia de que a aplicao ser exibida
corretamente em determinado dispositivo sobre determinado navegador.
Aps a realizao de testes utilizando a prpria equipe de desenvolvimento, necessrio
realizar testes de campo, a fim de obter a aprovao dos usurios e receber comentrios a
respeito do que pode mudar para tornar a aplicao mais amigvel.
A fase de testes fundamental para verificar se o site atende aos requisitos de usabilidade,
interface de interao e tecnologia dos dispositivos.

Armazene informaes e arquivos muito requisitados em cache.

Em qualquer site existe um conjunto de informaes ou arquivos, como imagens, que so
requisitados com certa freqncia pelos seus visitantes.
Estas informaes podem ser logotipos, slogans ou mensagens de alerta, por exemplo.
Sempre que o usurio acessa uma pgina do site, ele far o download destas informaes
novamente. Em funo disto, uma boa prtica pr-armazenar temporariamente estas
informaes localmente ou atualizar apenas a rea da pgina que ter o contedo afetado.

Motorola: http://developer.motorola.com/docstools/sdks/
Nokia/Sony: http://mtld.mobi/emulator.php
Emulador Nokia (aplicaes no-web): http://www.ramalhoblog.com/simulador-nokia-s60-download/
Proj.RT.NNN.vv

17

Fevereiro de 2009

CONCLUSO
Ao final de toda esta discusso, pode-se dizer que definir metas de usabilidade e de
experincia do usurio so fundamentais para que se possam seguir as polticas de boas
prticas. Sendo, desta forma, possvel construir uma aplicao amigvel, eficiente e que
explore os bons recursos disponveis pela plataforma mvel.
As recomendaes de desenvolvimento esto listadas abaixo:

O contedo a ser exibido , to somente, aquele que o usurio procura

O contedo principal deve sobrepor o contedo extra
O contedo deve ser bem apresentado em qualquer dispositivo que o usurio utilize
O contedo deve estar hierarquizado, atravs de um ndice ou menu com lista de
opes
Utilize navegao drill-down ao exibir contedos muito extensos e com
subdivises em uma mesma pgina
A apresentao do contedo deve ser feita de forma vertical
No utilizar endereos eletrnicos longos e com muita pontuao
Destaque e identifique claramente os links, assim como o que eles fazem
A barra de navegao deve estar disposta no rodap da pgina e um link para a
sesso anterior ou home Page deve ser exibido no topo
Utilize teclas de atalho para as tarefas e aes mais comuns
No recarregue a pgina, no utilize pop-ups e no redirecione o usurio sem seu
consentimento
No se deve utilizar frames ou tabelas como recursos de layout
Utilize headings e subheadings para exibio de textos longos
O ttulo da pgina deve ser curto e objetivo, com o propsito nico de identificao
O tamanho total da pgina a ser carregada no deve exceder os 10kb
Utilize medidas relativas ao especificar tamanho de elementos da pgina
No utilize imagens spacers para alinhar verticalmente o contedo
Utilize textos alternativos para a exibio de contedo multimdia
No utilize imagens no plano de fundo da pgina
Utilize mscaras de entrada em campos de preenchimento padro
Sinalize de forma clara e direta o que o deve ser preenchido em determinado campo
de formulrio
Utilize uma seleo hierrquica se as buscas possam ser realizadas por assuntos ou
tpicos especficos
Determine a tabulao do site de modo a seguir a orientao do rolamento da
pgina
Fornea alternativas para exibio de contedo ou realizao de funes que
possam no ser exibidas corretamente
Siga a especificao das linguagens definidas pela W3C
Realize testes reais sobre sua aplicao em todos os dispositivos e browsers
possveis
Armazene informaes e arquivos muito requisitados em cache

Proj.RT.NNN.vv

18

Fevereiro de 2009
Aps a concluso do projeto de desenvolvimento, deve-se fazer uma avaliao interna quanto
s questes abordadas pelas recomendaes de boas prticas e, a seguir, uma avaliao
externa de usabilidade e interao, utilizando possveis usurios testes de campo.
Deve-se ressaltar que nem sempre possvel adotar todas as polticas. Por este motivo, a
equipe de desenvolvedores deve ponderar as mais relevantes para suas aplicaes, levando
em considerao os objetivos de usabilidade definidos na fase de inicial do projeto.

REFERNCIAS
[1] M. Chae e J. Kim, What's so different about the mobile Internet?, Commun. ACM, vol. 46, 2003, pp.
240-247.
[2] Little Springs Design, Mobilize, Dont Miniaturize, http://www.littlespringsdesign.com/
[3] X. Xiao, Q. Luo, D. Hong, H. Fu, X. Xie, e W. Ma, Browsing on small displays by transforming Web
pages into hierarchically structured subpages, ACM Trans. Web, vol. 3, 2009, pp. 1-36.
[4] World Wide Web Consortium, Mobile Web Best Practices, http://www.w3.org/TR/mobile-bp/
[5] J. Nielsen, Usability Engineering, Morgan Kaufmann, 1993.
[6] H. Sharp, Y. Rogers, e J. Preece, Interaction Design: Beyond Human-Computer Interaction, Wiley,
2007.
[7] J. Trevor, D.M. Hilbert, B.N. Schilit, e T.K. Koh, From desktop to phonetop: a UI for web interaction
on very small devices, Proceedings of the 14th annual ACM symposium on User interface software and
technology, Orlando, Florida: ACM, 2001, pp. 121-130.
[8] Y. Cui e V. Roto, How people use the web on mobile devices, Proceeding of the 17th international
conference on World Wide Web, Beijing, China: ACM, 2008, pp. 905-914.
[9] S. Trewin, Physical usability and the mobile web, Proceedings of the 2006 international crossdisciplinary workshop on Web accessibility (W4A): Building the mobile web: rediscovering accessibility?,
Edinburgh, U.K.: ACM, 2006, pp. 109-112.
[10] S. Shrestha, Mobile web browsing: usability study, Proceedings of the 4th international conference
on mobile technology, applications, and systems and the 1st international symposium on Computer human
interaction in mobile technology, Singapore: ACM, 2007, pp. 187-194.

Proj.RT.NNN.vv

19