guidelines for papers to the international information...

Realidade aumentada por dispositivo móvel: proposta de aplicativo para exploração da cidade através da música, história e interatividade Augmented reality by mobile devices: proposed application to explore the city through music, history and interactivity

Ana Helena T. M. da Fonseca, Bruna Di Gioia, Raquel Cordeiro

REALIDADE AUMENTADA, APLICATIVO, DISPOSITIVOS MÓVEIS, MÚSICA

Esse projeto objetiva promover um novo olhar da população com a cidade através da música. Em um ambiente virtual, a partir da realidade aumentada com o uso de dispositivos móveis, propõe-se o desenvolvimento de um aplicativo que proporciona navegar pela cidade do Rio de Janeiro por pontos de interesse relacionados a músicas consagradas da cultura popular brasileira. Foi feito um teste de usabilidade em um produto similar e a partir do resultado, criou-se uma proposta de navegação e layout.

AUGMENTED REALITY, APPLICATION, MOBILE, MUSIC

This project aims to promote a new way for the user to relate with the city through music. In a virtual environment, using the concept of augmented reality in mobile devices, we propose to develop an application that provides the possibility to browse throughout the city of Rio de Janeiro, signalizing points of interest related to consecrated songs of the Brazilian popular culture. We conducted a usability test on a similar product and, based on the results found, we created a proposal for navigation and layout for our project.

1 Introdução

Através de relações estabelecidas entre a plataforma virtual e a realidade, esse artigo promove um novo olhar do usuário para com seu entorno. Desta forma, o espaço urbano é encarado como algo ativo, manuseável e com o qual se convive, interfere e constrói.

A partir deste conceito, propõe-se o desenvolvimento de um aplicativo para dispositivos móveis, que proporciona navegar pela cidade do Rio de Janeiro através da música. A ideia principal é sinalizar pontos de interesse relacionados a músicas consagradas da cultura popular brasileira para que o usuário possa identificá-los, estabelecendo um relacionamento expandido com o real através do ambiente virtual e do multimídia. Para que isso ocorra, o aplicativo apresenta opções de rotas temáticas relativas a ritmos musicais característicos da cidade (por exemplo: bossa nova, samba...), em cada rota estão sinalizados um conjunto de lugares e construções que são representados por uma de suas músicas.

Fonseca, Ana Helena T. M. da; Gioia, Bruna Di; Cordeiro, Raquel. 2014. Realidade aumentada por dispositivo móvel: proposta de aplicativo para exploração da cidade através da música, história e interatividade. In: Coutinho, Solange G.; Moura, Monica; Campello, Silvio Barreto; Cadena, Renata A.; Almeida, Swanne (orgs.). Proceedings of the 6th Information Design International Conference, 5th InfoDesign, 6th CONGIC [= Blucher Design Proceedings, num.2, vol.1]. São Paulo: Blucher, 2014. ISSN 2318-6968, ISBN 978-85-212-0824-2DOI http://dx.doi.org/10.5151/designpro-CIDI-99

Anais do 6º Congresso Internacional de Design da Informação 5º InfoDesign Brasil 6º Congic Solange G. Coutinho, Monica Moura (orgs.) Sociedade Brasileira de Design da Informação – SBDI Recife | Brasil | 2013

Proceedings of the 6th Information Design International Conference 5th InfoDesign Brazil 6th Congic Solange G. Coutinho, Monica Moura (orgs.) Sociedade Brasileira de Design da Informação – SBDI Recife | Brazil | 2013

CIDI 2013 6TH CIDI 5TH InfoDesign 6TH CONGIC5 th Brazilian Conferenceof In form ation Design

6 th Inform ation DesignStudent Conference

6 th Inform ation DesignInternational Conference

Blucher Design ProceedingsMay 2014 , Vol. 1, Num. 2www.proceedings.blucher.com.br/evento/cidi

| 2

Azuma (1997) define realidade aumentada como uma variação de ambiente virtual ou realidade virtual, que é uma tecnologia que insere o usuário em um ambiente sintético. Em contrapartida, realidade aumentada permite ao usuário ver o mundo real, com objetos virtuais sobrepostos ou composto com o mundo real. “RA complementa a realidade, ao invés de substituir completamente.” (Azuma, 1997)

As novas tecnologias vêm ao encontro da possibilidade de exploração do espaço, conferindo novo sentido de apropriação criativa da realidade, em que é possível articular com o entorno ao mesmo tempo que com outros grupos e dimensões. A facilidade de disposição e acesso à informação fazem com que a dimensão do tempo seja dilatada, já que permitem interações em tempo real e feedback remoto, que ampliam as possibilidades de relação com outras pessoas. No caso do aplicativo, é possível movimentar-se no tempo e espaço reais, remetendo a outro tempo e espaço remoto, o de criação ou enunciação das letras e músicas. Ambas temporalidades se sobrepõem quando o usuário tem a experiência com o app.

2 Objetivos

Através do entendimento da cidade como espaço de convivência e memória, o objetivo principal desse trabalho é apresentar uma tentativa de resgatar outros códigos que revelem os significados da cidade. Usaremos aqui a música e as relações que ela pode estabelecer com o espaço urbano como código para promover um conhecimento não convencional sobre as peculiaridades do ambiente e das pessoas que nele circulam. Propomos assim que o usuário conheça a cidade através do dispositivo móvel, promovendo novos registros de recordações.

O trânsito de moradores e turistas pode ser ainda mais enriquecido pela valorização e reconhecimento da história presente nas ruas da cidade. Objetiva-se ainda que esse aplicativo tenha o papel de redirecionar o olhar de seu usuário para a cidade, percebendo e refletindo de fato sobre o que está à sua volta. Esse sistema evidencia a ação do tempo e do ser humano no espaço urbano na medida em que oferece ao usuário imagens antigas e textos históricos que podem ser comparadas com o estado atual da localização visitada.

Aplicativos para interfaces móveis são facilmente distribuídos, acessados e utilizados pelo usuário, que tem autonomia para adquirir e navegar pela plataforma, sem depender de lojas ou vendedores físicos. Pretendemos assim aproveitar esses aspectos positivos para propor uma nova abordagem de representação espacial urbana através da interface digital, atribuindo novas significações à cidade.

No que diz respeito aos objetivos da configuração formal e parâmetros de uso do aplicativo, é necessário esclarecer que existem basicamente dois tipos de aplicativos para dispositivos móveis: aplicativo nativo ou webapp. Um app nativo é instalado a um aparelho específico (celular, tablet etc.) e não precisa necessariamente de conexão à internet para funcionar (pelo menos não todas as suas funcionalidades). Os usuários geralmente baixam esses apps através de uma loja online, como “App Store” ou “Google Play”. Diferentemente, o webapp, refere-se a aplicativos habilitados na internet com funções específicas para dispositivos móveis. Eles são acessados através de navegadores e não precisam ser baixados e instalados no aparelho. Propomos aqui desenvolver um aplicativo nativo com alto nível de interação com o usuário. Ou seja, seu conteúdo não será meramente expositivo, para consulta, seu funcionamento e os caminhos e possibilidades que nele serão apresentados vão depender das escolhas feitas pelos usuário na navegação. Ele poderá ser adquirido em loja online e possui recursos que dispensam conexão à internet, facilitando um maior alcance e mobilidade.

3 Metodologia

A metodologia de trabalho inclui as seguintes etapas: investigação de aplicativos semelhantes; teste de usabilidade preliminar; identificação de pontos fortes e fracos de aplicativos disponíveis; brainstorming; projeto conceitual; seleção e escopo de elaboração de conteúdo, estrutura e interface.

A proposta de estrutura e layout que é apresentada aqui foi feita a partir da análise e identificação de pontos fracos e fortes de aplicativos que estão no mercado e que também

Anais do 6º Congresso Internacional de Design da Informação | 5º InfoDesign Brasil | 6º Congic Proceedings of the 6th Information Design International Conference | 5th InfoDesign Brazil | 6th Congic

| 3

propõem maneiras de explorar o espaço real através da interface virtual.

Contudo, realizou-se também um teste de usabilidade em um aplicativo de turismo semelhante a nossa proposta, o guia da cidade do Rio de Janeiro da revista Wallpaper. A modalidade escolhida foi avaliação cooperativa com técnica de Think Aloud (em que o usuário narra seus pensamentos e ações) (NIELSEN, 2012). A pesquisa elaborada seguiu a estrutura informal, foram entrevistadas 6 pessoas naturais e residentes do Rio de Janeiro, de variadas faixas etárias e hábitos culturais, envolvidos no setor de comunicação/design/novas mídias. Foram entrevistados 2 estudantes (1 em nível de graduação, 1 cursando mestrado), 1 professor, 1 psicólogo e 3 designers atuantes no mercado. A análise informal tem por objetivo ter acesso a informações qualitativas, características, experiência do usuário e clareza do que funciona e do que não funciona. (GOTO & COTLER: 2002, 229)

Os usuários foram convidados para uma navegação livre, fazendo comentários de suas impressões. Assim que consideraram terminada a exploração do aplicativo, lhes foi dada uma tarefa: encontrar a rota para um ponto turístico escolhido. Dessa forma foi testada a facilidade de familiarização e de execução de trajetos intencionais na ferramenta. Finalmente, um questionário de avaliação foi aplicado para descrição das impressões, com formulação conclusiva por parte dos participantes. O ambiente de teste era informal (escritório, sala de aula, café ou restaurante) e o equipamento utilizado foi o smartphone iPhone 4, com aplicativo instalado, bateria suficiente, gravador e 3G em funcionamento. Ainda foi disponibilizado um exemplar do livro de bolso e folhas de avaliação para os comentários dos entrevistados. As medidas de avaliação são o questionário, nível de satisfação reportado, sugestões e demais comentários escritos, comentários gravados e tempo de execução da tarefa.

Tabela 1: Resumo de sugestões dos usuários

Comentário Tema Teor Ícones difíceis de ler/compreender

Aparência Ponto Negativo

Dificuldade para entender o significado das cores

Aparência Ponto Negativo

Interface limpa Aparência Ponto Positivo Introdução sobre o aplicativo Conteúdo Sugestão Abandona o aplicativo (mapa deveria rodar no aplicativo)

Mídia Ponto Negativo

Favoritos Mídia Ponto Positivo Mostra a distância de onde está Mídia Ponto Positivo Integração com redes sociais Mídia Sugestão Muitos cliques até chegar na rota Usabilidade Ponto Negativo Sistema de busca Usabilidade Sugestão

Durante todas essas etapas, foram utilizados também uma série de conceitos apontados por teóricos do campo. Saffer (2009) evoca detectabilidade, confiabilidade, capacidade de resposta, adequação, relevância, inteligência, sutileza, diversão, estética e ética como características de um bom design de interface gestual. Nielsen (2011) recomenda áreas tocáveis explícitas e ícones adaptáveis para diversos tamanhos de dedos. Agner (2012) sugere projetar gestos diferentes para ações distintas, para evitar que o usuário acidentalmente ative uma ação. Pearrow (2002) destaca as camadas de interação entre o dispositivo e o usuário: físico, lógico e cognitivo. Garrett (2003) acrescenta várias outras 'camadas' que ajudam o bom funcionamento destas três: objetivos estratégicos; escopo; esqueleto e visual. Garrett (2003) define também o design de navegação onde os âmbitos global; local; adicional; contextual; cortesia e navegação remota devem ser considerados. Sentidos de escala, direção e espaço devem ser contemplados no projeto de navegação e apresentação do layout.

A partir das avaliações feitas e dos dados coletados, foi possível realizar um levantamento de funcionalidades necessárias e chegar à estrutura de navegação que segue. Isso foi pensado também levando sempre em conta o objetivo de estabelecer relações entre cidade e música, atribuindo novas significações ao espaço urbano.

É muito importante salientar que a estrutura de navegação e layout que serão apresentados nesse artigo não foram submetidos a testes de usabilidade. Desenvolvemos uma proposta


| 4

conceitual que visa, através da realidade aumentada, estabelecer relações de significação entre ambiente virtual e real, utilizando a música como meio de representar essas conexões. Compreende-se aqui que a próxima etapa do projeto será a realização de testes de usabilidade no modelo apresentado para repensar, modificar e concluir o produto final.

4 Descrição do Objeto

Abaixo segue uma descrição dos possíveis caminhos para a navegação através do aplicativo, levando-se em conta as camadas de interação já comentadas anteriormente. Como pode-se perceber na figura abaixo, a estrutura do aplicativo baseia-se em três possibilidades básicas e diferentes de visualização do conteúdo: galeria de fotos, playlist e mapa. Através desses caminhos chega-se sempre a tela “Ponto”, onde é possível acessar através de suas sub seções todas as informações referentes a uma localização geográfica específica.

Figuras 1 e 2. Estrutura de navegação do aplicativo e estrutura de aplicação com layout. Fonte: Elaboradas pelas

Autoras, 2013


| 5

Ao acessar o aplicativo, o usuário irá necessariamente cair na tela home (figura 3), onde lhes são apresentadas todas as possibilidades de caminho que se pode fazer. Levando em consideração a necessidade de tornar o conteúdo do aplicativo mais “enxuto” devido às restrições de espaço físico da tela já mencionadas, optou-se por utilizar ícones visuais, ao invés de texto, para sinalizar os botões. Os significados desses ícones já são habitualmente conhecidos por usuários de computadores, celulares e tablets, o que facilita a sua rápida compreensão. Além disso, essa tela e todas as demais contam com uma ferramenta de busca, para facilitar que o usuário chegue até o ponto desejado, caso não tenha conseguido fazê-lo pelo caminho convencional. A busca serve também para o caso dele apenas desejar chegar a uma informação específica sem percorrer todo o caminho necessário, economizando tempo (por exemplo, querer simplesmente escutar algumas músicas específicas).


| 6

Figura 3. Tela “Home” com os ícones para galeria de fotos, playlists, mapas e busca. Fonte: Elaborada pelas Autoras,

2013

A tela “Mapa” (figura 4) proporciona a visualização dos pontos de interesse das rotas temáticas dispostas em um mapa esquemático. Para facilitar a identificação das diferentes rotas, elas são discriminadas através da distinção por cores. Nesse trabalho estão expostas rotas relacionadas apenas a quatro estilos musicais: Samba, Bossa Nova, Rock e Funk. Porém, outras rotas poderiam ser incluídas futuramente. Nessa tela é possível ter uma visualização geral do conteúdo do aplicativo, ou seja, da música, distribuída pela cidade. A representação do espaço urbano sob forma de mapa permite associar os grupos de músicas selecionados com lugares determinados, fazendo com que o usuário estabeleça novos tipos de relação com a cidade.

Com o objetivo de tornar a navegação do aplicativo mais objetiva e simples, com o mínimo de sub seções e sub divisões para evitar com que o usuário se perca ao utilizar o aplicativo, todas as rotas são apresentadas no mesmo mapa. Para estruturar esse tipo de organização, é possível selecionar na parte superior da tela cada rota que se deseja visualizar, ativando-as e desativando-as separadamente (inclusive, pode-se ver todos os pontos de todas as rotas ao mesmo tempo dispostos). Ao lado dos ícones das rotas, na extrema esquerda, há o botão de geolocalização que pode ser acionado para fornecer a localização atual do usuário na cidade, para que ele tenha noção de sua distância em relação a cada ponto de interesse. Quando se toca em um determinado ponto apresentado no mapa, são apresentadas as informações básicas da localidade em questão: nome do local, endereço e bairro. Para obter as informações específicas, ou seja, chegar à tela “Ponto”, o usuário deverá tocar nessa caixa.


| 7

Figura 4. Tela “Mapa” com a visualização de todas as rotas ativada. Fonte: Elaborada pelas Autoras, 2013

A visualização das rotas dá ao usuário a possibilidade de percorrer todo um trajeto no mundo real, guiando-se através da música. Porém, o aplicativo oferece a possibilidade de visualizar apenas a listagem das músicas (figura 5), sendo dessa forma flexível a diferentes tipos de uso. As músicas podem ser organizadas ainda de acordo com diferentes critérios: por ordem cronológica, por ordem alfabética em relação ao título, por ordem alfabética em relação ao nome do autor ou por estilo, ou seja, pelas rotas temáticas. Cada música é discriminada pela cor da rota que pertence. Nessa tela, o usuário pode ainda criar uma hierarquia entre as músicas através do ícone de coração localizado no lado direito da tela, que dá o status de “Favorito” quando ativado. O usuário poderá ativar o ícone do coração nas músicas que mais gosta e usar isso como um critério de organização, determinando os itens que mais gosta em sua playlist.


| 8

Figura 5. Tela “Músicas” com todas as possibilidades de critérios de organização do conteúdo. Fonte: Elaborada pelas

Autoras, 2013

Em todas as telas já apresentadas pode-se acessar a categoria “Ponto”, ou seja, obter as informações específicas sobre o local de interesse sinalizado no mapa.


| 9

Figuras 6 e 7. Telas referentes a pontos de interesse de duas rotas diferentes distinguidas pela cor. Fonte: Elaborada

pelas Autoras, 2013

Nessa tela estão disponíveis diversas informações relacionadas a um único lugar (figuras 6 e 7). Na parte superior está discriminada a música que o representa, assim como um botão de


| 10

retorno para que o usuário tenha a possibilidade de retornar à tela anterior. Além da foto histórica, referente à época do surgimento da música em questão, são apresentados também um texto de caráter didático, complementando as informações visuais, links de compartilhamento nas redes sociais Foursquare, Twitter, Facebook e Google Plus, e um botão que permite a visualização de fotos daquele lugar tiradas por outros usuários do aplicativo, assim como o envio de novas imagens para essa rede de contatos.

Ainda nessa tela, há um botão para ampliar a imagem de forma que ela a ocupe totalmente.

Figura 8. Opção de tela cheia para a visualização de uma foto histórica. Fonte: Elaborada pelas Autoras, 2013

Tendo em vista que um dos objetivos do projeto é promover a associação de imagens da época em que cada música foi escrita com a realidade atual de cada lugar, é de grande importância que o usuário tenha a possibilidade de ver a imagem no maior tamanho possível (figura 8), sem as outras informações competindo por sua atenção.

Ainda na seção relativa ao ponto turístico, é possível ter acesso à letra da música (figura 9) que o caracteriza e ainda, ao selecionar o ícone “mapa”, presente no menu principal no canto inferior esquerdo, vê-se a marcação do local no mapa (figura 10). Assim como no caso da fotografia, a tela do mapa também pode ser expandida, permitindo que o usuário o utilize para orientação.


| 11

Figura 9. Tela com letra da música. Fonte: Elaborada pelas Autoras, 2013

Figura 10. Tela com a localização do ponto turístico no mapa – Fonte: Elaborada pelas Autoras, 2013


| 12

5 Conclusão

Além do aplicativo da Wallpaper, que foi usado no teste de usabilidade, outros aplicativos que tem a função de guia foram avaliados pelo grupo. Percebemos que muitos deles funcionam de maneira muito similar aos guias impressos com textos e fotos para consulta. Eles não exploram todas as possibilidades de interação que os dispositivos móveis oferecem.

Um dos diferenciais deste aplicativo em relação a outros guias, é seu sistema de geolocalização, essa funcionalidade só pode ser usada quando o dispositivo móvel tem acesso à internet, que emite alertas quando se está perto de um local relevante culturalmente, ou seja, que possui relação com alguma música da lista. Além disso, é possível calcular a distância e o tempo necessários para percorrer cada rota.

Tecnologia interativa agrega aos smartphones e tablets portabilidade e compressão de informações, extremamente adequadas para o uso turístico, em que a necessidade de orientação espacial é primordial para a riqueza da experiência. Este estudo procurou embasar consistentemente o desenvolvimento de um projeto interativo, agregando pesquisa teórica com testes práticos, visando a aplicação real. Isso mostra que as abordagens acadêmicas e técnicas, quando realizadas simultaneamente, são complementares e igualmente enriquecedoras. Esta metodologia também pode ser utilizada para estudos e compilações de outros tipos de materiais históricos.

Finalmente, é importante que a ferramenta permita que o usuário chegue a seu objetivo, com a tranquilidade de que conseguirá realizar as tarefas desejadas e confiança nas informações e processos oferecidos pelo desenvolvedor.

Referências Bibliograficas:

AGNER, Luiz et al. 2012. Design de interação no jornalismo para tablets: avaliando interfaces gestuais em um aplicativo de notícias. São Paulo: 4º Congresso Internacional de Design de Interação.

AZUMA, Ronald T. A Survey of Augmented Reality. 1997. In: Teleoperators and Virtual Environments 6: 355 - 385.

GARRETT, Jesse James. 2003. The elements of user experience: user centered design for the web. Indiana: New Riders.

GOTO, Kelly e COTLER, Emily. 2002. Web ReDesign: Workflow that works. Indiana: New Riders.

NIELSEN, Jakob e BUDIU, Raluca. 2011. Usability of iPad Apps and Websites, Fremont, Nielsen Norman Group. Disponível em < http://www.nngroup.com/reports/mobile/ipad/>. Acesso em 15 Novembro de 2012.

NIELSEN, Jakob. 2012. Thinking Aloud: The #1 Usability Tool, Fremont, Nielsen Norman Group. Disponível em <http://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/>. Acesso em 15 Novembro de 2012.

PEARROW, Mark. 2002. The wireless usability handbook. Higham: Charles River Media.

SAFFER, Dan. 2009. Designing gestural interfaces. O´Reilly: Sebastopol.

Sobre o(a/s) autor(a/es)

Ana Helena T. M. Da Fonseca, mestranda, ESDI, Brasil <[email protected]>

Bruna P. Di Gioia, mestranda, ESDI, Brasil <[email protected]>

Raquel Corrêa Cordeiro, mestranda, ESDI, Brasil <[email protected]>


guidelines for papers to the international information...

Documents