Conformidade e Divergência Entre Versões Desktop e Mobile de Uma Aplicação Web

CONFORMIDADE E DIVERGÊNCIA ENTRE VERSÕES DESKTOP E MOBILE DE UMA APLICAÇÃO
WEB


CONCORDANCE AND DIVERGENCE BETWEEN DESKTOP AND MOBILE VERSIONS OF WEB
APPLICATION


Gabriele Santos1, Isabella Aragão2





(1) Especialista em design e desenvolvimento de widget, C.E.S.A.R. EDU
e-mail: [email protected]


(2) Mestre em Design, UFPE
e-mail: [email protected]




Websites, Projeto web, Dispositivos móveis
Os usuários da web mobile possuem necessidades específicas para garantir a
qualidade da interação. Em um projeto web que atenda usuários desktop e
mobile, alguns aspectos devem ser ajustados ao longo do desenvolvimento.
Propõe-se aqui, a partir da descrição de um projeto web, apresentar alguns
pontos de fundamental atenção ao levar conteúdos para dispositivos móveis.

Websites, Web design, Mobile device
Mobile web users have specific needs to safeguard the quality of
interaction. In a web project to desktop and mobile users, some aspects
should be adjusted throughout the development. We propose here, with the
description of a web project, to present some key points of attention when
bring content to mobile devices.


1. Introdução

Se compararmos o primeiro aparelho de celular, o Dyna TAC, de 1973, com os
aparelhos atuais, é fácil percebermos o quanto estes evoluíram.

Várias funcionalidades foram incorporadas ao que antes era apenas um meio
móvel de comunicação de voz. Essas melhorias se baseiam na crescente
necessidade de convergência das mídias e questões de mobilidade. A
sociedade exige cada vez mais recursos a qualquer hora e em qualquer lugar.

"O termo 'pervasive computing' tem sido utilizado para designar o contexto
no qual as tecnologias de informação e comunicação (TICs) combinam-se com
objetos diversos (como celulares, pagers, relógios, carros, espaços
arquitetônicos) para compor novos dispositivos de mediação." (PARAGUAI e
TRAMONTANO apud PINHEIRO e SPITZ, 2007)

Entre as funcionalidades incorporadas aos aparelhos de celular, o acesso a
internet satisfaz o desejo de estar online permanentemente, enviar e
receber informações em tempo real.

Ultimamente, surgiu a discussão de que o principal uso dos celulares, a
curto médio prazo, será mesmo o acesso à internet, já que há três vezes
mais celulares do que computadores no mundo.

Meira (2010) defende que o celular é uma plataforma de informatização
pessoal, um browser de serviços e aplicações na rede, e que o recurso
"telefone" se tornou apenas mais uma aplicação dentro dessa plataforma.
Segundo o pesquisador, em breve o celular será o principal meio de conectar
todo mundo à web.

Aproveitando essa oportunidade de mercado, empresas de todo o mundo estão
conciliando esforços para adaptar seus produtos ao universo dos aparelhos
móveis.

Dados da ITU (International Telecommunication Union) de 2010, apontam que o
número de assinaturas de telefonia móvel é crescente em todo o mundo. O
acesso à redes móveis está disponível para 90% da população mundial. A ITU
identifica ainda que em 2010, 143 países ofereceram comercialmente serviços
de 3G, em 2007 eram apenas 95.

O percentual de acesso a internet é diferente entre países desenvolvidos e
países em desenvolvimento. Só a China, segundo a ITU (2010), possui quase
500 milhões de usuários conectados a internet. No Brasil esse número é bem
menor, mas vertiginosamente crescente. O Plano Nacional de
Banda Larga no Brasil é a promessa de universalização da conexão de banda
larga que recairá também sobre as tecnologias sem fio. Em reposta a estas
especulações, Meira (2010) prevê que "dentro desta década haverá 150
milhões de acessos móveis à web no Brasil."

Dessa maneira, vários argumentos justificam levar conteúdos da web
tradicional (web desktop) para a web mobile. No entanto, esse acesso pode
gerar inúmeras frustrações para o usuário, tendo em vista que a interação
nos celulares ocorre de maneira diferente da interação nos computadores
pessoais. Seja por recursos dos aparelhos, por variações nos tamanhos dos
dispositivos, por situações de uso etc.

Por conta disso, os profissionais desenvolvedores devem se preocupar com a
eficiência das aplicações mobile. É de extrema importância que os recursos
levados para dispositivos móveis sejam os mais usáveis possíveis e que as
experiências de interação com essas aplicações, fora desses dispositivos,
sejam reavaliadas e adaptadas quando necessário.

O objetivo desse artigo é apresentar as modificações e adaptações ocorridas
no desenvolvimento de um site com versões desktop e mobile. O artigo foca
em uma metodologia centrada no usuário e expõem as decisões tomadas para
cada versão. Essas decisões tiveram o objetivo de garantir qualidade no
design da interação e unidade entre o site desktop e o site mobile.

2. Design da interação desktop e mobile

Confrontando definições de Nielsen (2000), Preece, Rogers e Sharp (2005) e
Krug (2006), pode-se concluir que cada vez que uma pessoa interage com um
artefato, acontece uma espécie de diálogo entre eles.

Cada ação do usuário gera uma resposta do artefato que provoca uma nova
resposta do usuário, e assim o diálogo continua. Para que haja essa
"conversa" é necessário, no mínimo, dois elementos exercendo ações entre
eles. Assim, interação pode ser definida como a ação ou influência mútua
entre dois ou mais elementos. Essa ação é recíproca e seu sucesso dependerá
de uma série de fatores envolvidos.

Tomando-se como exemplo o acesso a um site através do celular, pode-se
observar uma sequência de interações que envolvem basicamente três
elementos: o usuário, o celular e o site. O primeiro diálogo ocorre entre o
usuário e o aparelho e consiste em compreender o funcionamento do
dispositivo, posicionamento das teclas, intensidade do toque, identificação
dos comandos etc. A segunda relação de interação ocorre entre o usuário e o
site, e consiste em entender o sistema de navegação web e a disposição das
informações. Acessar um site por meio do celular dependerá não somente da
interação usuário/site, mas também da interação usuário/celular, pois se o
diálogo do usuário com o aparelho não for bem sucedido, a navegação no site
também estará comprometida.

Essa mesma relação de interação pode ser feita para o acesso web por meio
de computadores do tipo desktop, pois também envolve três elementos: o
usuário, o computador e o site. No entanto, as possibilidades de interação
do usuário com os aparelhos (celular ou computador desktop) são distintas.
A interação com os computadores desktops já são mais padronizadas se
comparadas com as variações de interação com os aparelhos de celular. Além
das diferenças que se destacam facilmente, como o tamanho da tela e
ausência do mouse, o acesso web pelo celular possui ambientes de uso bem
mais abrangentes, criando assim particularidades na interação que devem ser
pensadas no projeto.

Segundo Preece, Rogers e Sharp (2005), para se projetar um sistema
interativo de qualidade para o usuário e claro quanto ao objetivo
principal, deve-se atingir componentes de usabilidade e componentes
decorrentes da experiência do usuário. Podemos ainda inserir um terceiro
aspecto: componentes de acessibilidade.

A usabilidade preocupa-se em satisfazer critérios específicos como
segurança, facilidade de aprendizado, eficácia, entre outros. Os
componentes decorrentes da experiência do usuário preocupam-se em explicar
a qualidade dessa experiência: satisfatória, motivadora, etc. Já os
componentes de acessibilidade envolvem formas de fazer compensações para
características que a pessoa não pode mudar facilmente, sejam elas
diferenças das características humanas (dificuldades de visão, por
exemplo); características tecnológicas (capacidade de processamento,
tamanho da tela etc.); e características do ambiente (ambientes com muito
ruído, muita iluminação).

Dessa forma, identificar e entender o equilíbrio entre usabilidade,
experiência do usuário e acessibilidade é de fundamental importância na
produção de um site ou de qualquer sistema interativo. O objetivo do
produto, a identificação dos usuários pretendidos e o conhecimento de suas
habilidades e limitações no uso do sistema, garantem o sucesso no design de
interação. Tendo em vista que as diretrizes de design para a web mobile são
pouco difundidas, faz-se necessária, então, a discussão a seguir.

3. Diretrizes de design para a web mobile

De acordo com Melgar (2008), uma grande quantidade das páginas web é
projetada para atender apenas usuários de computadores do tipo desktop.
Explorando somente a capacidade desse tipo de dispositivo. Assim, acessar
esses sites em dispositivos móveis pode ser muito frustrante.

As diretrizes de desenvolvimento móvel apóiam-se em uma série de questões,
algumas compartilhadas com a web desktop e outras mais específicas para
mobile. As diretrizes aqui definidas são baseadas nos guias de
desenvolvimento para web mobile elaborados por Cremin, Rabin, Fling e
Robinson (2007) e publicados pela Dotmobi[1]. Vejamos algumas delas:

3.1 Estratégias

Um projeto mobile deve centrar na oferta de conteúdo útil para dispositivos
móveis e levar em consideração as diferenças de dispositivos. Se mal
projetado, o site pode se tornar lento e custoso.

Recomenda-se iniciar um projeto para celular através da definição das metas
globais para o site, considerando três categorias (a empresa, os usuários e
a tecnologia) para facilitar a gestão e definição dos objetivos. As
decisões tomadas devem manter um equilíbrio em todas as três categorias.

Ainda no que diz respeito à estratégia, existem duas vertentes do
desenvolvimento para celulares. A primeira defende a elaboração de um único
site que se adapte aos diferentes dispositivos. Já a segunda, recomenda que
se façam versões específicas para cada dispositivo desktop e mobile. Essa
escolha depende de uma série de fatores que devem ser estudados. Na
elaboração de um único site que se adapte às duas realidades, por exemplo,
deverão ser adotadas questões de design e arquitetura da informação que
satisfaçam as duas situações. Por enquanto a tendência maior está na
segunda vertente, a de versões específicas para celulares.

3.2 Arquitetura da informação

Na web mobile é extremamente importante estruturar as informações da
maneira mais simples possível. Isso é uma prática para garantir qualidade
na experiência do usuário. Deve-se escolher o que é mais relevante no
conteúdo e o que deve ser descartado em relação à versão desktop.

Entre as sugestões que auxiliam na arquitetura da informação de um site
móvel estão:
Limitar ao máximo as categorias. Os usuários se tornam cada vez mais
desorientados à medida que entram na subseção de uma página.
Ficar atento para a quantidade de links por página, a menos que se
tenha a certeza de que o dispositivo pode apresentar mais informações
com qualidade.
Priorizar os links por popularidade. Tornar mais fácil os links com
maior freqüência, garantindo que o conteúdo mais procurado será
encontrado facilmente pelo usuário.

3.3 Design visual

O design visual das páginas web mobile deve levar em consideração
diferenças de resolução, paradigmas de navegação e o próprio layout do
site, como veremos a seguir.

Diferentes resoluções: na web mobile há uma grande diversidade nos
atributos físicos dos dispositivos. O tamanho das telas e a configuração do
teclado variam consideravelmente em cada aparelho.

Não só as dimensões, a proporção das telas dos aparelhos também variam.
Essas proporções devem ser usadas criteriosamente com os demais elementos
que compõem a página. Deve-se lembrar, por exemplo, que imagens
aparentemente boas na menor resolução podem preencher apenas metade ou um
terço da tela de um celular de resolução alta.


Conhecer o público alvo e os dispositivos que eles utilizam trará mais
segurança nas definições do projeto, e entre elas a escolha do tamanho da
tela.

Paradigmas da navegação: os sistemas de navegação nos dão pistas visuais
sobre onde estamos localizados dentro do site e fornecem referências sobre
a forma de navegar dentro dele. Embora não seja impossível, o estilo de
sistema de navegação desktop não costuma funcionar para um dispositivo
móvel. O método normalmente utilizado na criação de sistemas de navegação
móvel é a utilização de uma simples lista de opções verticais.

Exibir múltiplos níveis de navegação em uma lista, normalmente mostra-se
ineficaz, porque dá aos usuários muitas opções, além de consumir a valiosa
área da tela. A melhor maneira é mostrar apenas as opções relacionadas com
a página que o usuário está vendo, links de retorno e de acesso à página
inicial.

Layout: na concepção de um projeto desktop tendemos a um layout no formato
paisagem (horizontal), onde a largura é um pouco maior que a altura. Já
para a web mobile as páginas possuem maior verticalidade. Por isso não é
aconselhável o uso de guias de navegação dispostas na horizontal ou
utilização de mais de uma coluna de texto nas páginas para celulares. Sendo
assim, recomenda-se que o layout possua uma única coluna e que o texto
esteja alinhado à esquerda.

4. Site Rota Recife: uma aplicação desktop e mobile

O projeto do site Rota Recife, roteiros turísticos na cidade do Recife, foi
desenvolvido com base na metodologia de Garrett (2003). Essa metodologia
centrada no usuário divide-se em:

Plano de estratégia: objetivos do cliente e necessidades dos usuários;
Plano de escopo: conteúdo e funcionalidades;
Plano de estrutura: arquitetura da informação e hierarquia de páginas;
Plano de esqueleto: desenho estrutural das telas (wireframes) e navegação;
Plano de superfície: design gráfico ou design visual.

Segundo o autor (ibid.), cada plano depende do anterior e juntos seguem de
um estado de abstração a concretização. A cada nova fase as decisões se
tornam mais específicas até a conclusão do projeto.
Vejamos a seguir como cada uma dessas etapas foi desenvolvida, junto com as
adaptações necessárias para cada versão.

4.1 Plano de estratégia

Objetivos do site:
Oferecer roteiros turísticos de um dia na cidade do Recife
Atender usuários locais e turistas
Ser acessado pelos usuários antes e durante a viagem
Fazer uso de sistema de navegação claro e intuitivo
Adotar um layout limpo e objetivo
Oferecer o carregamento das páginas de forma rápida
Possuir duas versões: desktop e mobile

Público alvo: jovens e adultos de 20 a 40 anos, nacionais e estrangeiros,
que gostam de viajar ou fazer roteiros pela própria cidade como forma de
lazer. Essas pessoas são usuárias da internet e acessam, ou estão dispostas
a acessar, sites pelo celular. Este público alvo foi segmentado em dois
grupos: usuários locais e turistas.

Para entender melhor o perfil e necessidades dos usuários foram realizados
questionários para cada grupo.

Necessidades: com os dados levantados por meio da pesquisa com os usuários,
foi possível definir as seguintes necessidades:
Informações de localização: mapas e pontos de referência
Informações sobre o transporte e dicas de como funcionam o metrô, as
linhas de ônibus e os táxis
Acesso a preços dos serviços e produtos
Veracidade nas informações
Informações de pontos turísticos: história, agendamento de visitas,
valor e horários de visitação
Informações de estadia
Enviar para o celular, através de sms, informações diárias sobre,
temperatura, agenda cultural, entre outros.

4.2 Plano de escopo

O plano de escopo teve início com uma pesquisa de similares para avaliar o
conteúdo de sites relacionados ao tema, sendo sites mobile e sites
desktop[2]. Em seguida, foram confrontados os resultados dessa análise de
similares e as informações levantadas no plano de estratégia, definindo
assim as informações gerais para cada uma das versões do projeto.

Informações gerais do site desktop: layout fixo, adequado a resolução de
1024 X 768, com as informações disposta de forma clara e direta, seções com
o maior detalhamento possível de informações referentes à localização,
preços e contatos.

Informações gerais do site mobile: layout fluido, de melhor visualização em
resolução de 176 X 220, com as informações disposta de forma direta para
evitar a existência de grandes massas de texto. Páginas com poucas imagens,
mas com opção de visualizar mais figuras.

Posteriormente, o conteúdo comum para as duas versões foi definido:
Informações gerais sobre a cidade
Informações de temperatura
Agenda cultural
Sugestões de roteiros turísticos de um dia
Atrativos da cidade
Cadastramento para recebimento de informativos
Indicação de locais para refeição
Indicação de locais de compra

As adaptações de conteúdo consideradas necessárias para cada versão são
descritas a seguir:

Página principal:
desktop: na página principal da versão para desktop, o usuário pode
escolher o idioma do site, realizar buscas simples ou ir para as
opções de busca avançada, visualizar sugestões de roteiros e destaques
de eventos culturais. A página disponibiliza todas as categorias do
menu e um destaque para o cadastramento.
mobile: na versão mobile, não existe a possibilidade de cadastramento
pelo site (requisitos do formulário muito cansativo para preenchimento
em dispositivos móveis), não há o destaque de eventos culturais, porém
o destaque dos roteiros se mantém.

Idioma
desktop: opções de idiomas (inglês, português e espanhol) disponíveis
no topo de todas as telas.
mobile: opções de idiomas disponíveis apenas na tela inicial.

Opções de busca:
desktop: a opção de busca aparece no topo de todas as seções e existe
a possibilidade de fazer buscas detalhadas.
mobile: no site mobile é utilizada apenas a opção de busca simples
para evitar a dificuldade de preenchimento de muitos campos. Esta
busca aparece apenas na página inicial.

Detalhamento de hospedagem:
desktop: descrição geral sobre hotéis e pousadas, com fotos, endereço,
e-mail, telefones e localização no mapa.
mobile: são contempladas as mesmas informações da versão desktop,
porém com apenas uma foto do hotel/pousada. Facilitando assim o
carregamento da página.

Detalhamento sobre transportes, localização e mapas:
desktop: explicações sobre o funcionamento e tarifas de ônibus, metrôs
e táxis; visualização e download de mapas da cidade com destaque para
localização de pontos turísticos, informações de percurso através de
pesquisa de como se deslocar de um ponto a outro da cidade, com
indicação de transportes e visualização de mapa.
mobile: são disponibilizadas as mesmas informações da versão desktop,
porém sem a opção de fazer o download dos mapas.



4.3 Plano de estrutura

Por meio da aplicação de uma técnica para definir a estrutura hierárquica
de informações junto aos usuários (card sorting[3]) e das sugestões dos 8
participantes da técnica, foi possível fazer uma série de observações sobre
a estrutura do site que resultou nas arquiteturas da versão desktop (figura
1) e da versão mobile (figura 2).

Em todas elas as caixas em cinza representam o menu principal, as caixas
brancas representam os submenus e as linhas pontilhadas representam
ligações entre subseções de categorias diferentes, que para o usuário
possuem fácil relação.



Figura 1: Arquitetura para o site desktop.


Figura 2: Arquitetura com adaptações para o site mobile.

Comparando as duas imagens, podemos perceber que o conteúdo da versão
mobile perdeu algumas subseções para tornar o acesso ao conteúdo mais
direto. Tendo em vista que para a web mobile os conteúdos em texto não
devem ser muito extensos, as seções sobre História, Cultura e Gastronomia,
subseções de "Recife" na arquitetura desktop, foram reunidas em uma única
seção (Características) onde as informações são condensadas.

As seções de Transporte e Compras ficaram sem submenus. Em "Transportes" as
informações sobre cada transporte e como se deslocar aparecem juntas,
quando na arquitetura desktop possuem as subseções: Taxi, Ônibus, Metrô e
Como se deslocar. Já no caso de "Compras", que na primeira arquitetura
possui três seções (Shopping Centers, Mercados e Supermercados, e Feiras e
Artesanato), na arquitetura mobile tem "Compras" como uma seção única, com
todo o conteúdo separado por subtítulos.


4.4 Plano de esqueleto

No plano do esqueleto, dois sistemas de navegação foram elaborados, um para
cada uma das versões.

Sistema de navegação desktop: O site desktop tem sua navegação dividida em:
navegação global, navegação local e navegação contextual (consiste em
hyperlinks inseridos no conteúdo da página para levar o usuário a temas
relacionados). O usuário tem acesso à navegação global primária e global
utilitária, presente em todas as páginas.

Sistema de navegação mobile: Na versão para a web mobile, não foi utilizada
a navegação contextual. A navegação global primária é visível apenas na
homepage, para que se priorize o espaço para o conteúdo de cada página.
Sendo assim, em todas as páginas, exceto na home, o usuário encontra as
opções "Home" e "Voltar" para que possa voltar à página onde encontra a
navegação primária ou voltar para a seção um nível acima.

Para muitos usuários web mobile a navegação é feita por meio das teclas
direcionais do aparelho. Levando em consideração os modelos dos celulares
do público alvo entrevistado (modelos que utilizam exclusivamente o
teclado) e o tamanho da tela que foi definido no plano de escopo, algumas
páginas internas ficaram longas o suficiente para se justificar a repetição
dos links "Home" e "Voltar" na navegação global de rodapé. Dessa forma
diminui-se o desgaste de percorrer a barra de rolagem até o topo do site,
ou mesmo usar inúmeras vezes as teclas direcionais para chegar aos links no
topo.

Na versão mobile desse projeto não foi utilizada a navegação contextual.
Dessa forma, evita-se que o usuário se perca ao percorrer longos caminhos e
permutar entre diferentes seções.

Observe a seguir os links e informações de cada navegação:

Navegação global primária
desktop: Recife, Roteiros, Atrativos, Agenda Cultural, Alimentação,
Hospedagem, Transportes, Compras, Mapas e Contato.
mobile: Recife, Roteiros, Atrativos, Agenda Cultural, Alimentação,
Hospedagem, Transportes, Compras, Mapas, Temperatura, Busca e
Contatos.
Navegação global utilitária
desktop: Idiomas, Busca e Mapa do Site. O link para a home encontra-se
apenas na marca, na parte superior do site.
mobile: Idiomas e Mapa do Site.


Navegação global de rodapé
mobile: Home e Voltar.

Navegação local
desktop: História, Cultura, Gastronomia, Depoimentos, Fotos, Naturais,
Noturnos, Culturais, Restaurantes, Lanchonetes, Bares, Hotéis,
Pousadas, Taxi, Ônibus, Metrô, Como se deslocar, Shopping Centers,
Mercados e Supermercados, e Feiras de Artesanato.
mobile: Características, Depoimentos, Fotos, Naturais, Noturnos,
Culturais, Restaurantes, Lanchonetes, Bares, Hotéis e Pousadas.


Navegação contextual:
desktop: A navegação contextual do site ocorre entre a página de
roteiros e as páginas de história e cultura; entre Agenda Cultural e
atrativos culturais e noturnos e entre as páginas de alimentação e
gastronomia. Todas representadas pelas linhas pontilhadas no mapa
(figura 1) apresentado anteriormente. Essa navegação pode ser
disponibilizada através de hyperlinks no decorrer do texto.


Com base no sistema de navegação definido para cada versão, foram feitos
os wireframes da tela inicial e das páginas internas da versão mobile
(figura 3), assim como os wireframes da tela inicial (figura 4) e páginas
internas (figura 5) da versão desktop.



Figura 3: wireframe da versão mobile - tela inicial e estrutura geral das
páginas internas
Figura 4: wireframe da versão desktop - tela inicial
Figura 5: wireframe geral das páginas internas da versão desktop

4.5 Plano de superfície

O plano de superfície teve início com a análise de similares para buscar
referências estéticas e definir a identidade visual do site. A análise
incluiu similares diretos e indiretos[4] (site, folder, livros, etc.) que
tivessem relação com os temas viagem, turismo, agenda cultural, eventos ou
Recife.

Dos similares, surgiram idéias como a utilização de linhas preenchidas,
linhas tracejadas, uso de suaves texturas, mistura de cores suaves com
cores intensas, destaque para imagens e formas arredondadas. Após algumas
alternativas, o design visual do site Rota Recife foi definido com a
predominância de um azul suave em contraste com cores mais fortes como
vermelho, laranja e azul escuro. Foram utilizadas formas retangulares com
cantos arredondados e uma simulação de passagens de páginas interligadas
por argolas, como podemos perceber nas telas a seguir (figuras 6 e 7).


Figura 6: tela inicial da versão desktop.


Figura 7: tela inicial da versão mobile.

A página inicial da versão desktop é composta por destaques da agenda
cultural; temperatura; destaques de roteiros turísticos, onde são
apresentados por meio de animação os roteiros mais procurados; área de
cadastramento com preenchimento de dados iniciais; e destaque do acesso
mobile.

A tela inicial da versão mobile também possui imagens com destaques de
roteiros turísticos, mas estas não são animadas. As informações da
temperatura e o campo de busca, visíveis na versão desktop, se tornaram
seções na versão para dispositivos móveis, decisão tomada no plano da
estrutura.

Ao escolher a opção "Roteiro", por exemplo, o usuário é direcionado a lista
com todos os roteiros disponíveis. O usuário pode encontrar um roteiro,
procurando pela lista ou utilizando um campo de busca específico para esta
seção.

Na versão para desktop (figura 8), os roteiros são organizados por ordem
alfabética e divididos por paginação. Cada roteiro é exibido em um quadro
com o título, uma foto representativa e texto com alguns dos pontos que o
roteiro contempla. A coluna da direita traz a navegação contextual:
Histórias da Cidade e Cultura Recifense. Abaixo se vê o campo de busca para
os roteiros e ainda na mesma área, é possível ver os roteiros mais
procurados.


Figura 8: página de roteiros da versão desktop.

A versão mobile (figura 9) é bem mais direta se comparada com a anterior. O
usuário encontra as informações sobre a busca por roteiros e a lista de
todos os roteiros, visualizados apenas pelo título e ordenados pela
quantidade de acesso (os mais procurados aparecem no topo).


Figura 9: página de roteiros da versão mobile.

Ao escolher um dos roteiros disponíveis, o usuário tem acesso à página com
o detalhamento das informações. O roteiro aqui exemplificado é o Roteiro
Recife Antigo. O usuário encontra a descrição em texto de todo o roteiro,
fotos, depoimentos e mapas.

Na versão desktop (figura 10), a primeira coluna conta com a descrição do
percurso e destaca os pontos principais. Esses pontos principais estão em
fonte com corpo maior que os demais textos e dão acesso a uma foto e
legenda. Essa legenda apresenta algumas informações básicas, como horário
de funcionamento e entradas. A coluna de apoio é dividida em três áreas:
Fotos, Depoimentos e Mapas do Roteiro. Na área de fotos, a foto
representativa do roteiro aparece maior, com miniaturas abaixo. As
miniaturas, quando clicadas, levam também à visualização da fotografia e
respectiva informação em texto. Na área de depoimentos é possível ver o
último depoimentos e links para ver todos ou submeter um novo relato.
Abaixo do título "Mapas do Roteiro" é possível visualizar ou fazer download
dos mapas com os pontos turísticos e as linhas de transportes.



Figura 10: descrição de um roteiro na versão desktop.

Na versão mobile (figura 11) é exibida apenas uma foto do roteiro, o volume
de todo o texto sofreu adaptações, ficando o mais conciso possível para
transmitir as informações de forma objetiva e evitar que a página ficasse
demasiadamente longa. Ao final do texto encontram-se links que levam o
usuário para uma nova página, com fotos, depoimentos ou mapas.


Figura 11: descrição de um roteiro na versão mobile.

4.6 Analisando convergências e divergências

Analisando o desenvolvimento do projeto de maneira geral, é possível mapear
em que momentos do desenvolvimento as versões do site Rota Recife
precisaram de tratamento específico (figura 12).
Os pontos de interseção das elipses na figura 12 representam os pontos em
comum entre cada versão, em cada um dos planos. Isso nos ajuda a perceber
que do plano de estratégia até o plano de superfície as versões foram se
distanciando, porém, não chegaram a ser totalmente desconectadas.


Figura 12: representação dos pontos em comum entre as versões durante cada
etapa do desenvolvimento.

No plano de estratégia, os objetivos e definição de público alvo foram
definidos igualmente, tendo assim um plano único. Não se discute o que é
mobile e o que é desktop. No plano de escopo, diante de tudo que o site
oferece, poucas foram as diferenças entre conteúdo desktop e conteúdo
mobile.
Já partir do plano de estrutura as adaptações específicas para cada versão
começam a tomar proporções maiores. Isso fica claro na confecção de
resultados específicos, pois cada versão passa a ter seu esquema de
arquitetura da informação. Alguns trechos do mapa ficaram iguais, mas boa
parte precisou de adaptações para o número de páginas e para as
nomenclaturas utilizadas. No plano de esqueleto o sistema de navegação
converge em boa parte no tipo de navegação utilizada (navegação global,
navegação local, etc.), porém o conteúdo de cada um dos tipos possui
particularidades e resultam em wireframes diferentes.
Por fim, é no plano de superfície que de fato a maior parte do trabalho é
feita separadamente para cada versão. O que conecta as versões nessa etapa
do desenvolvimento é a definição estética adotada, afinal aplicou-se uma
mesma identidade ao site. Porém, após definido os elementos gráficos e
referências visuais que dariam unidade estética ao projeto, cada tela tem
seu layout independente, finalizando o projeto e suas versões.
Vale ressaltar que esse esquema visual apresentado na figura12 não deve ser
seguido como um padrão rígido. Como cada plano depende do anterior, cada
decisão tomada, a contar do plano de estratégia, levará à versões com mais
ou menos pontos em comum, atendendo as necessidades de cada projeto.

5. Considerações finais

O acesso à internet pelo celular de fato ainda nos trará muitas discussões.
As interações com esses dispositivos móveis é apenas uma delas, mas,
isoladamente, já rende muitos estudos. Essas novas tecnologias não cessam
de evoluir. Novas formas de interação vão sendo desenvolvidas e os estudos
contínuos garantem usuários mais satisfeitos. Entender as limitações,
situações de uso e necessidades dos usuários, são alguns pontos de
fundamental importância para levar informações para a web mobile.

Uma maneira de manter unidade e qualidade no desenvolvimento de duas
versões de um mesmo produto, e como atender as necessidades dessas duas
modalidades da web, foi apresentada aqui. O projeto descrito, no entanto,
não tem o objetivo de se tornar um modelo para desenvolvimento mobile,
afinal cada projeto terá objetivos específicos a serem atingidos.

Percebemos, entretanto, que as etapas de desenvolvimento de um projeto do
tipo desktop, aqui expostas, podem ser facilmente aplicadas no
desenvolvimento de uma versão mobile. Para isso, foi preciso traçar
paralelos constantes entre as duas modalidades. Todas as etapas realizadas
tiveram o intuito de garantir a qualidade da experiência por parte dos
usuários e para tal foram identificadas as necessidades no uso dos
dispositivos distintos, computadores e celulares.

Antes de projetar para um dispositivo específico, precisamos conhecê-lo,
saber quais os sistemas que o envolvem, como ocorre a interação e quais as
vantagens e limitações que oferece ao usuário.

Vale lembrar que ao longo do desenvolvimento do projeto corre-se o risco
de, precipitadamente, deduzir a melhor maneira de solucionar algo, antes
mesmo de levantar dados que comprovem a eficácia da solução. Recorrer aos
conhecimentos e impressões dos usuários é um dos melhores recursos para
garantir coerência com o universo deles. As entrevistas iniciais e a
aplicação do card sorting são bons exemplos disso, formas de feedback do
usuário que garantiram maior segurança para o projeto.

O artigo aqui apresentado empenhou-se na exploração da metodologia de
desenvolvimento e fez uso das impressões dos usuários em diversas etapas. A
participação do usuário, através de testes de usabilidade, é também
importante para o sucesso da interface. No entanto, a aplicação e avaliação
destes testes não fizeram parte do intuito deste artigo.

Pretende-se, em trabalhos futuros, mesurar a qualidade da interação por
parte do usuário com cada versão desse e de outros sites que atendem as
modalidades desktop e mobile. Avaliação esta que pode ser feita através de
diversos tipos de testes com usuários, teste de exploração, teste de
avaliação, de comparação etc., juntamente com uma análise paralela da
coerência entre as versões.

6. Referências Bibliográficas

KRUG, Steve. Não me Faça Pensar. 2. ed. Tradução de Acauan Pereira. Rio de
Janeiro: Alta Books, 2006.

GARRETT, Jesse James. The Elements of User Experience: User-Centered Design
for the web. New Riders, 2003.

INTERNATIONAL TELECOMMUNICATION UNION (ITU). The World in 2010.Geneva:2010.

MEIRA, Sílvio. Entrevista: "celular vai conectar todo mundo à web". Recife:
2010. Disponível em: . Acesso em: 23 de out. 2010

MTLD - DOTMOBI. Mobile Web Developer's Guide: Creating Simple Mobile Sites
for Common Handsets. [S.I.]. 2007.

MELGAR, Robinson. Web móvel: a internet de bolso já é realidade. Revista
Locaweb, 5. ed. Rio de Janeiro: Europa Ltda, p. 23-31, Abril. 2008.

NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000.

PINHEIRO, Mauro; SPITZ, Rejane. O design de interação em ambientes de
ubiqüidade computacional. Congresso Internacional de Design da Informação,
3., 2007, Curitiba; Anais...CD-ROM. Curitiba, 2007.

PREECE, Jenifer; ROGERS, Yvonne; SHARP, Helen. Design de interação: além da
interação homem computador. Tradução de Viviane Possamai. Porto Alegre:
Bookman, 2005.
-----------------------
[1] O grupo Dotmobi corresponde a TLD .mobi.(TLD - Top Level Domain, que
define o tipo de domínio - .com , .net, .org e .mobi são exemplos de TLDs).
[2] www.ipernambuco.com.br; www.peconhecepe.com.br;
www.visitcalifornia.com; londonengland.mobi; berlin.mobi; srilankan.mobi.
[3] Método de design participativo para montar uma estrutura de informações
a partir de um conjunto de cartões.
[4] Folder do Parque Temático da Madeira; Calendário e coleção de postais –
Recife: pontes, rios e histórias; Livro de Bolso – Mercados do Recife;
Revista – In Magazine; Site – 180 Degrees (www.180degrees.co.uk); Site –
Northeast England (www.visitnortheastengland.com); Site – South Africa
(www.southafrica.net); Site – Tourisme Montréal (www.tourisme-montreal.org)