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. EDUe-mail: gabriele.sant@gmail.com

(2) Mestre em Design, UFPEe-mail: isabella.aragao@gmail.com

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 deviceMobile 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 Dotmobi1. 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

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).

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 desktop2. 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

2 www.ipernambuco.com.br; www.peconhecepe.com.br; www.visitcalifornia.com; londonengland.mobi; berlin.mobi; srilankan.mobi.

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 sorting3) 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.

3 Método de design participativo para montar uma estrutura de informações a partir de um conjunto de cartões.

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 indiretos4 (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

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)

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: <http://smeira.blog.terra.com.br/2010/05/05/entrevista-celular-vai-conectar-todo-mundo-web/>. 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.