Escolar Documentos
Profissional Documentos
Cultura Documentos
3.1 Portabilidade
A portabilidade diz respeito à adequação do conteúdo e das
funcionalidades da aplicação às diferentes características dos
dispositivos móveis e do aproveitamento destas características
para promover uma satisfatória experiência para o usuário.
O MWBP aborda esta questão de duas maneiras: a questão de
explorar as capacidades do dispositivo e a questão de personalizar
o conteúdo de acordo com o aparelho requisitante.
A primeira é uma abordagem muito semelhante à proposta pela
Little Springs Design em seu artigo “Mobilize, Don't Miniaturize”
[8]. Neste trabalho, os autores propõem que a aplicação móvel
deve ser projetada especificamente para a mídia móvel e deve se Figura 1: Formulário de busca por resultados de um exame médico,
aproveitar dos benefícios trazidos pela mobilidade dos exibida em um Apple iPhone. Após receber um SMS, o usuário fica
dispositivos. Exemplificando, os autores mostram um caso fictício sabendo que os resultados de seu exame estão prontos para ser retirados.
de uma viagem, na qual uma mulher está a caminho do aeroporto
Em relação à segunda maneira, existem apenas duas diretivas que
para receber seu marido que volta de um compromisso exterior.
tratam das diferenças de características entre os dispositivos. Elas
No caminho, ela deseja saber a situação do vôo, tais como:
sugerem que o conteúdo a ser mostrado seja enviado em um
atrasos, horários e previsões de chegada. A aplicação web da
formato que o dispositivo do usuário suporte, a partir de dados
companhia aérea disponibiliza ferramentas para compra de
contidos no cabeçalho da requisição HTTP (HyperText Transfer
passagens, enquanto a aplicação móvel desta empresa deveria
Protocol) feita pelos dispositivos. Este cabeçalho contém
fornecer fácil acesso às informações do momento.
informações que, em conjunto com uma base de dados adequada,
Um aparelho móvel está conectado o tempo todo e pode ser são capazes de identificar o dispositivo requisitante e suas
acessado a qualquer momento de qualquer lugar e em quaisquer características.
situações. Esta característica deve ser explorada pelos
Estas diretivas tratam de forma superficial uma questão de vital
desenvolvedores ao projetarem suas aplicações.
importância para uma aplicação, pois, dificilmente, após acessar
No projeto desenvolvido pelo grupo de pesquisa explorou-se o um site em que o conteúdo carregado não pôde ser exibido
conceito de mobilidade em um sistema de agendamento de exame corretamente, o visitante irá retornar [9]. Além disto, estas
médico. Isto foi feito com auxilio da tecnologia de mensagens diretivas são desencorajadas a partir do momento que o MWBP
instantâneas (SMS) presente em quase todos os dispositivos aponta diversas possíveis falhas desta abordagem.
atuais. Esta mensagem poderia ser lida a qualquer momento e de
Algumas recomendações citam que se deve ter cuidado ao utilizar
qualquer lugar, trazendo ao usuário a informação de que os
uma determinada tecnologia, como Flash ou JavaScript, pois
resultados do exame realizado estavam concluídos.
existem aparelhos e navegadores que não possuem suporte para
Neste momento o usuário poderia do lugar em que estivesse, elas.
acessar o serviço eletrônico de agendamento e verificar a sua
Durante o desenvolvimento do Projeto X-Gov, notou-se a
situação de saúde.
necessidade de distribuir diversos conteúdos em diferentes
Explorar as capacidades do dispositivo, como a mobilidade, formatos de forma a atingir a maioria da população. Para tanto,
portanto, significa utilizar todos recursos nele disponíveis, não foram utilizadas técnicas de detecção das características dos
restringido-se apenas à uma interface Web. Deve-se considerar o dispositivos visitantes para elaborar um conteúdo, em tempo de
uso de envio e recebimento de mensagens de texto, conexão em execução, que o usuário pudesse visualizar em seu aparelho. Além
qualquer instante ou local e tecnologias como TouchScreen – telas disto, foi necessária a criação deste conteúdo em diferentes
sensíveis ao toque , sempre que disponíveis. formatos.
Existem algumas ferramentas que podem ser utilizadas pelos
desenvolvedores para atender a esta necessidade e, com isto,
promover sua aplicação para uma maior quantidade de visitantes,
tais como:
• WURFL [10]
• DeviceAtlas [11]
• Mobile Device Browser File [12]
Todas estas ferramentas são semelhantes e caracterizam-se por
possuir um banco de dados o qual armazena características físicas
e tecnológicas de muitos (milhares) de aparelhos e relaciona-as
com o cabeçalho da requisição HTTP que o dispositivo realiza ao
acessar uma aplicação web móvel.
Desta forma é possível que o desenvolvedor personalize o
conteúdo de acordo com a característica do dispositivo utilizado
pelo visitante ao acessar sua aplicação.
Apesar das falhas que esta abordagem possa apresentar como
cabeçalhos incompletos, informações incorretas na requisição ou
impossibilidade de reconhecimento do requisitante, esta prática
deve ser encorajada pelo MWBP e investigada mais a fundo. Até
mesmo na web convencional, existe este problema de
compatibilidade entre navegadores. Minimizar estas
possibilidades torna o site mais confiável e atraente para o
público.
Para o caso de a detecção falhar, por algum dos motivos citados, o
desenvolvedor ainda tem a possibilidade de exibir um conteúdo
enxuto, possivelmente somente textos, exibindo um pequeno Figura 3: Menu da aplicação de agendamento de exames médicos: Apple
aviso e uma opção ao usuário para ignorar o detector de iPhone (TouchScreen) possui um menu de ícones e Nokia N95 8GB
dispositivos. possui menu em lista.
No Projeto X-Gov, estes conceitos foram explorados de forma a Observa-se nas imagens anteriores que o conteúdo da tela ficou
exibir ao usuário informações multimídia sobre o serviço ajustado à resolução do dispositivo automaticamente. A Figura 2
eletrônico de agendamento de exames médicos. Desta forma, o ilustra algumas das diferentes capacidades tecnológicas de cada
conteúdo foi criado em diversos formatos de som, vídeo e um dos dispositivos mencionados, enquanto a Figura 3 explora a
imagem, além de ser adaptável ao tamanho da tela do dispositivo capacidade de TouchScreen do Apple iPhone, sem prejudicar a
requisitante. navegação do Nokia N95 8GB.
A utilização de ícones em um menu constitui um design pattern
explorado no trabalho de Welie [5], chamado Icon Menu.
Segundo o autor, este pattern deve ser usado quando o espaço
para um menu é limitado ou ícones podem ser utilizados com
muita eficiência, exatamente como o caso de celulares com
TouchScreen.
3.2 Navegação
Nesta categoria, serão abordadas as questões relacionadas ao
formato e localização de menus, identificação de links e barras de
navegação.
Neste ponto, o MWBP fornece poucos princípios de design de
navegação, recomendando aos desenvolvedores que:
• Mantenham a navegação da página em uma única
direção, preferencialmente vertical
• Identifiquem os links com cores ou efeitos diferentes do
restante do texto
Figura 2: Características detectadas de um Apple iPhone e de um Nokia • Garantam que o usuário atinja o conteúdo procurado em
N95 8GB
poucos passos
Outro exemplo de como foi abordada esta questão pelo projeto
Todas estas diretivas deveriam ser seguidas por todos os
explora a tecnologia TouchScreen – telas sensíveis ao toque –
desenvolvedores de aplicações web, não somente os de aplicações
presentes em alguns dispositivos mais modernos. A aplicação
móveis.
desenvolvida possui dois tipos de menus: um em forma de ícones,
favorecendo dispositivos que possuem suporte ao TouchScreen; e Diversos autores tratam destas questões, fornecendo análises de
outro em forma de lista, favorecendo os demais dispositivos. sites existentes e propondo design patterns para resolver estas
questões de usabilidade e acessibilidade, como a Little Springs
Design, James Kalbach em “Designing Web Navigation” [13],
Jakob Nielsen em “Designing Web Usability” [9] e Steve Krug Este tipo de navegação é chamado pelo MWBP de navegação
em “Don’t Make Me Think!” [14]. drill-down e é fortemente recomendado, porém nenhum exemplo
é fornecido e este tipo de navegação exige o cuidado para que a
No Projeto X-Gov, foram estudadas e aplicadas todas estas
quantidade de tópicos não seja muito extensa. O usuário não
diretivas propostas pelo MWBP e por estes autores, obtendo uma
deveria ter que rolar a página para alcançar o final do índice, por
navegação simples e clara, sempre ao rodapé da página. Desta
exemplo.
forma, o usuário pode ler o conteúdo da página e, sem precisar
retornar a um menu superior, continuar sua navegação.
3.3 Layout e Interatividade
O MWBP explora bastante as questões relacionadas ao layout das
páginas. Em geral, as recomendações são:
• Evite o uso de elementos gráficos e multimídia
• Teste o site em diferentes resoluções de dispositivos
• O uso de cores não deve ser essencial para o
entendimento do conteúdo
• Questões relacionadas ao uso de frames, tabelas e
imagens.
Segundo o MWBP, a utilização de imagens e outros elementos
multimídia em uma aplicação web mobile devem ser evitados,
pois gera um aumento no tráfego de informações o que pode
acarretar maiores custos para o usuário e maior espera de
carregamento dos elementos.
No entanto, com o avanço da tecnologia 3G, melhorias no
desempenho de hardware dos dispositivos e na qualidade dos
navegadores permitem que estes elementos sejam utilizados.
Figura 4: Exemplos dos sites para mídia móvel do eBay®
Nossa experiência no Projeto X-Gov mostrou que pequenos
(www.ebay.com) e da Amazon.com® (www.amazon.com). Em ambos os vídeos e sons podem ser carregados em curto intervalo de tempo
casos, existe uma barra de navegação – vertical ou horizontal – ao final do utilizando conexão 3G ou wireless local, além disto, as questões
conteúdo principal da página. de portabilidade já discutidas anteriormente são capazes de
resolver os problemas de exibição de conteúdo em diversos
Nota-se que estas práticas constituem um padrão de projeto – aparelhos.
design pattern – muito difundido, como nas amostras dos sites do
eBay e da Amazon.com. O tamanho ou resolução da tela é uma questão abordada por
muitos autores. Métodos de ampliação de trechos da página [15]
Pode-se estender as diretivas do MWBP, acrescentando aspectos ou mecanismos de detecção de resolução de tela e adaptação do
fundamentais não mencionados ou tratados superficialmente, conteúdo em tempo de execução são abordagens bastante usuais.
como a questão de menus e o posicionamento da barra de
navegação, que são assuntos muito abordados pelos autores O desenvolvedor deve estar atento a estas diferenças. Os
citados anteriormente. aparelhos possuem resoluções muitos distintas. Segundo a base de
dados da DeviceAtlas, grande parte dos dispositivos trabalham
A experiência mostra que, inclusive em aplicações web com a resolução de 280x120 pixels, no entanto há dados de
convencional, o usuário está acostumado a ter uma barra de diferentes dispositivos, mostrando a existência de pelo menos
rolagem apenas no sentido vertical. Isto é encorajado por estes outros 13 tamanhos possíveis de resolução. Por este motivo é
autores. altamente recomendável que sua aplicação móvel seja flexível
É comum para as pessoas iniciarem uma leitura no topo de uma quanto às medidas e adaptável ao dispositivo do usuário,
folha de papel, por exemplo, e terminarem na parte inferior da utilizando ferramentas de detecção e adaptação de conteúdo.
folha. Processo semelhante acontece na web. O usuário, portanto, Com relação ao uso de cores, o MWBP possui demasiada cautela.
espera por uma abordagem neste sentido. Se a navegação for É verdadeira a afirmação de que existem aparelhos celulares sem
horizontal ou em ambos os sentidos, o usuário ficará perdido e suporte a cores. No entanto, segundo a base de dados da
terá problemas em encontrar o que deseja. DeviceAtlas, a grande maioria dos dispositivos possui monitores
Se o conteúdo exibido for muito extenso, é recomendável que o coloridos e navegadores com suporte a estes recursos. Além disto,
divida em subseções. Apenas neste caso, é recomendável que haja com o avanço da tecnologia de celulares, percebe-se uma
uma listagem dos tópicos com links para os mesmos no início da tendência no desenvolvimento de aparelhos cada vez mais
página. Se isto for feito, devem existir links para o início da poderosos graficamente. Este é um exemplo de diretiva abordada
página ao final de cada tópico. Esta abordagem caracteriza outro pelo W3C que tende a se tornar obsoleta, com o avanço
design pattern especificado por Welie [5], chamado To-the-Top tecnológico, em curto espaço de tempo.
Link.
No Projeto X-Gov, o uso de cores foi tratado como um elemento de boas práticas do MWBP. Design Patterns são uma excelente
de fundamental importância para a navegação e obtenção de um forma de abordar esta questão de um modo timeless, ou seja, de
layout claro da aplicação. Cores ajudam a identificação de um modo que as diretivas não sejam comprometidas pelo avanço
elementos da navegação, como links, e destacam trechos de tecnológico extremamente rápido destes dispositivos e sejam mais
conteúdo que podem ser de maior interesse para o usuário, focadas nos conceitos de design de navegação e usabilidade.
melhorando sua experiência na aplicação.
Outras diretivas que poderão não se aplicar em dado momento, 5. AGRADECIMENTOS
são as relacionadas ao uso de Cookies, frames, JavaScript e Este trabalho e o Projeto X-Gov são financiados pelo convênio
tabelas. As melhorias tecnológicas dos dispositivos já Fapesp/MSR no. 2007/54488-3.
proporcionam, nos modelos mais atuais, a utilização destes
recursos, mostrando que esta é uma tendência dos fabricantes.Para 6. REFERÊNCIAS
um futuro próximo, nota-se que estas tecnologias já estarão
[1] World Wide Web Consortium. 2008. Mobile Web Best
disponíveis para os usuários, deixando de ser de grande relevância
Practices 1.0, http://www.w3.org/TR/mobile-bp/
para os desenvolvedores.
[2] Boumans, J. 2004. Crossmedia - e-content report 8,
ACTeN - Anticipating Content Technology Needs.
4. CONCLUSÃO
Analisando as diretivas do MWBP relacionadas à interação [3] Nokia. 2005. S60 Platform: Designing XHTML Mobile
homem-computador e à definição de interfaces com o usuário, a Profile Content, Version 1.4.
partir da experiência obtida no Projeto X-Gov e de estudos de [4] Tidwell, J. 2005. Designing Interfaces - Patterns for Effective
outras publicações sobre o assunto, pode-se concluir que muitas Interaction Design, O'Reilly Media.
diretivas do MWBP poderiam ser complementadas ou
modificadas com: [5] Welie, R. http://www.welie.com/
• Exemplos de uso [6] Little Springs Design, http://patterns.littlespringsdesign.com