Page 1

Interface de Aplicativo GPS

Matheus Faria Bueno


Interface de Aplicativo GPS ALUNO

Matheus Faria Bueno ORIENTADOR

CĂŠlio Martins da Matta 2014


Dedicatória Dedico este trabalho primeiramente a Deus, sem o qual eu nada sou, e que por graça me deu uma nova vida e seu amor incondicional. Dedico aos meu pais que foram exemplos de sabedoria e de perseverança na minha vida, ensinado-me a sempre dar meu melhor em tudo para Deus. E também à Martha, minha companheira e auxiliadora todo esse tempo, sempre ao meu lado com todo amor.


Sumário 1. Introdução.............................................................................................08 2. Desinformação vs. Decisão Rápida..............................................10 3. Objetivos................................................................................................12 4. Fundamentação Teórica...................................................................14 4.1 Mundo interligado 14 4.2 Otimização do tempo 19 4.3 Nenhum sistema é uma “ilha” 22 4.4 Agrupar para enxergar 24 5. Conceitos Estudados.........................................................................30 5.1 Arquitetura da Informação 30 5.2 Usabilidade 31 5.3 Ergonomia 31 5.4 Gamificação 32 6. Aplicativos Similares........................................................................34 6.1 Waze 34


6.2 Omnibus 42 6.3 Google Maps 46 6.4 Moovit 52 7. Referências Projetuais.....................................................................58 7.1 Flat design 58 7.2 Pregnância da informação 58 8. Desenvolvimento do Projeto..........................................................60 8.1 Fluxograma 60 8.2 Rabiscoframes 62 8.3 Wireframe 79 9. Resultado Final....................................................................................86 9.1 Marca e elementos gráficos 86 9.2 Interface final 90 10. Considerações Finais.................................................................... 108 11. Referências Bibliográficas.......................................................... 110


1.

Introdução O design de interface vem se tornando um aliado muito importante quando falamos de Interação Homem-Máquina (HCI). Ele está presente em celulares smartphones proporcionando, através da parte gráfica, estrutural e funcional do produto, a interação inteligente entre o produto e o usuário. Os celulares, segundo Beiguelman (apud VALLE, 2013), “estão se tornando uma espécie de ‘controle remoto urbano’, dada a convergência de recursos nos aparelhos”, e por isso eles tem um potencial cada vez maior de serem meios que abranjam soluções de fácil acesso. Assim, esse trabalho tem como objetivo projetar a interface de um aplicativo GPS para smartphones Android, focado em usuários do transporte público, em que ele obtenha de forma rápida, prática e confiável a melhor opção de trajeto, não só

8

tecnicamente, mas também parametricamente. Um GPS que conheça seus gostos pessoais, suas limitações físicas e entenda suas vontades. O aplicativo se faz necessário quando nos deparamos com a escassez de soluções de mobilidade urbana em metrópoles como São Paulo, onde a tomada de decisão rápida é feita a partir de informações desatualizadas e/ou confusas, acarretando em escolhas errôneas por parte do usuário. O trabalho se iniciará com a sugestão da lógica do aplicativo; buscando entender como possibilitar a melhor opção de trajeto sempre, baseando-se em dados sobre trânsito, valor da passagem, tempo estimado, meteorologia e individualidades do usuário (velocidade média de caminhada, gosto pessoal, limitação física, vontades).


Posteriormente será necessária a criação de toda navegação do aplicativo, visando sempre uma experiência agradável e prática para o usuário. E ainda, toda interface gráfica, desde os ícones, passando pela escolha tipográfica, paleta de cor, hierarquia das informações, até a composição gráfica das telas.

9


Desinformação vs. Decisão rápida

2.

Um grande problema, mencionado anteriormente, enfrentado pelos usuários de transporte público, em metrópoles como São Paulo, é a falta de informação fornecida pelos órgãos responsáveis versus a necessidade do usuário em decidir algo rapidamente a partir dessas informações. Em setembro de 2013, a Revista do IDEC (Instituto Brasileiro de Defesa do Consumidor) publicou uma avaliação, realizada pelo próprio IDEC, sobre a qualidade dos ônibus e metrôs da cidade de São Paulo. Foram encontradas 93 irregularidades que tornaram tangíveis realidades dessa dissonância, como informações incompletas nos ônibus e o difícil acesso às informações nos sites (IDEC, 2013). Se tomarmos a informação como um meio de democratizar o acesso e a locomoção das pessoas pela cidade, podemos 10

presumir, segundo Redig (2004, p. 50), que “não existe democracia sem informação clara, e verdadeira”. Um dos sintomas dessa falta de democracia hoje, dentro do transporte público, é o descaso no fornecimento de informações atualizadas e com clareza à população. Isso acarreta numa má distribuição do fluxo de usuários pela cidade, devido à ausência e/ou má comunicação da informação, como rotas alternativas ou situação dos intervalos entre trens e ônibus, gerando assim graves problemas, como a superlotação, que influem diretamente no tempo de espera dos usuários pelo transporte (IDEC, 2013). Evidencia-se através da pesquisa do IDEC e da fala de Redig que, a falha na transmissão da informação por parte dos órgãos responsáveis implica diretamente nos problemas do


transporte público, e essa falha toma forma mais nítida quando entendemos que “a desordem visual é uma falha de design, não um atributo da informação” (TUFTE apud BAER, VACARRA, 2008, p. 2). A “incomunicação” não é decorrente da informação, do conteúdo ou dos dados, e sim do meio pelo qual esse dado, conteúdo ou informação é repassado e comunicado. Se os órgãos responsáveis têm falhado em fornecer a informação existente, devemos reavaliar a forma que a tornamos acessível e inteligível ao usuário. O acesso à informação é crucial quando entendemos que a cidade é um organismo interdependente, onde a administração e o usuário-cidadão participam, colaboram e interagem para o bom andamento da mesma. Devemos ter em mente a democratização da informação como um recurso para uma mobilidade inteligente, como corrobora Sakaria: “O acesso à informação torna-se um grande democratizador. Ele pode começar a criar equidade entre transporte público, bicicletas e carros pessoais.” (apud BARRY, 2011). Percebemos então, que necessitamos de incentivos a projetos voltados à distribuição de informação, uma distribuição de forma democrática, segundo o conceito de Redig, que atenda o usuário individualmente. Esses projetos podem ser grandemente auxiliados pela tecnologia, é através dela que trans-

pomos barreiras físicas para além do tangível, pois, conforme Sakaria, “há coisas que a tecnologia pode fazer para melhorar a percepção do transporte público, que pode superar algumas das barreiras em torno de infraestrutura. Ela pode superar alguns dos obstáculos que a infraestrutura não pode.” (apud BARRY, 2011). Este projeto também visa suprir essa defasagem no acesso à informação, abrindo diálogo com uma área pouco explorada, mas muito valiosa; um projeto em que ambos os lados são favorecidos, considerando a inserção do produto no contexto de uma cidade, ainda, não inteligente, repleta de conflitos e falta de diálogo. O projeto pensa à frente, como um pequeno passo rumo a uma cidade inteligente, “[...] onde as funções básicas da cidade – estabelecer trocas econômicas, sociais e culturais e gerar liberdade de vida e locomoção – são otimizadas por novas formas de tecnologia da informação e comunicação.” (LEITE, 2012, p. 174).

11


3.

Objetivos

12

Objetivo geral

Objetivos específicos

O presente projeto tem como objetivo principal criar a interface de um aplicativo GPS para smartphones Android, que entenda o perfil e características de seu usuário com o foco unicamente no transporte público. A ideia é que ele torne mais prático e dinâmico o deslocamento de um ponto a outro. Sua finalidade é agregar funções que estão diluídas e dispersas atualmente. Junto a isso será criada a identidade gráfica do projeto, contendo o namming da marca, o logo, a paleta cromática, os ícones e a escolha da família tipográfica - baseados em conceitos de ergonomia para dispositivos móveis e no perfil do público alvo.

Secundariamente o trabalho terá objetivos como, eliminar as etapas no acesso à informação, agilizando as escolhas do usuário em tomadas rápidas de decisão, apresentando a melhor opção de trajeto, configurada de acordo com o perfil físico e gostos pessoais do usuário. Para isso será realizada uma pesquisa de identificação das reais necessidades e perfil do usuário de transporte público em metrópoles, a fim de propor, da melhor forma compatível, soluções através do aplicativo. Será sugerida uma lógica paramétrica para o aplicativo. Ela filtrará informações em tempo real, baseando-se em dados como tempo, clima, trânsito (ex.: acidentes e congestionamen-


tos), gasto financeiro do percurso, tipo de meio de transporte (ônibus, metrô, trem e bicicleta) e individualidades físicas, como velocidade de caminhada, possíveis deficiências, gostos de alimentação, preferência de loja, etc. Buscando parâmetros estruturais de organização do conteúdo, será elaborado a navegação do aplicativo, um esqueleto esquemático de como se comportará e direcionará as páginas, e também, por meio do wireframe, a estrutura para composição visual. Serão criadas “telas” que arranjarão todos esses elementos, seguindo as diretrizes definidas pelo wireframe, se desdobrando em: tela inicial/principal, tela de configuração geral, tela de notificação, tela de visualização do trajeto, tela de características e outros possíveis desmembramentos.

13


Fundamentação Teórica

4. 4.1

Mundo interligado

No correr da história as cidades, antes “ilhas” independentes e pouco ligadas ao seu entorno, modificaram essa relação solitária para conceitos de relação mais comunitários, como metrópoles e megalópoles. Cidades cuja influência permeia as outras que estão a sua volta, cidades que se interligam, se relacionam, tornando-se mais próximas e interdependentes. A cidade passa a englobar tudo que se interliga a ela, pois ultrapassa os limites de sua espacialidade geográfica, permeando territórios circunvizinhos, deixando de ser uma cidade solitária para fazer parte de um sistema urbano. Bruce Mau e Leonard corroboram dizendo-nos que: “a cidade agora representa todo o território, e todo o território precisa ser considera14

do e gerenciado como um único sistema urbano.” (2007, p. 45). Um exemplo próximo disto é a cidade de São Paulo, pois não mais a consideramos separadamente, mas agora como parte de um sistema urbano chamado Grande São Paulo. Sistema que gera um entrelaçamento geográfico, frustrando-nos na tentativa de delimitar suas fronteiras, e que interliga as cidades que o compõem, por meio de funções como transporte público. À medida que essas cidades se tornam territórios geridos por sistemas, evidenciamos que as simples relações de troca agora se encontram inseridas em um complexo que os engloba. Onde, dentro desses novos territórios, quanto mais interligamos para que haja maior aproximação e diá-


logo, mais a mediação dessas trocas deve ser gerida por uma gestão inteligente [GRÁFICO 01]. Pois conforme Carlos Leite, “uma gestão inteligente do território será capaz de propiciar maior agilidade na gestão integrada on line das diversas mobilidades urbanas.” (2012, p. 172). Ela, então, proporciona e facilita os diálogos dentro do território.

Sistemas

Gestão Inteligente

Complexo

Território Cidades

GRÁFICO 01

15


A gestão inteligente de um sistema urbano é de suma importância para o bom andamento da cidade, principalmente quando falamos sobre o tempo gasto em deslocamentos. Baseado em dados da Pesquisa Nacional por Domicílio (Pnad), realizada em 2012 pelo o IBGE (Instituto Brasileiro de Geografia e Estatística), o IPEA (Instituto de Pesquisa Econômica Aplicada) nos mostra que 23,5% dos trabalhadores da cidade de São Paulo gastam em média 45,6 minutos para chegar ao trabalho (BRASIL, 2013) [GRÁFICO 02]. Se formos mais fundo veremos que além do tempo despendido, o cidadão necessita lidar com informações dúbias e desatualizadas. Em 28 de outubro de 2013 o site do Terra noticiou a mudança nas linhas de ônibus da zona leste em São GRÁFICO 02

23,5% Trabalhador

16

Paulo, onde ocorreu muita confusão, inclusive protesto (TERRA, 2013). O motivo principal disto? Falta de informação. Isso se confirma quando lemos neste trecho da notícia que uns dos motivos eram a “[...] falta de informações e falhas na comunicação sobre as alterações feitas [...]” (TERRA, 2013). Percebe-se que, a falha na transmissão de informações é derivada da forma que os órgãos responsáveis a comunicam (conforme citado no capítulo “Desinformação vs. Decisão rápida”, p.10). Assim, supomos que, ou há despreparo no gerenciamento dessas informações, ou há descaso no fornecimento delas à população, ou até pior, os dois. A quantidade de informação gerida e gerada pela cidade é muito grande, conforme ela expande seu sistema começa a se

45,6min Casa

Tempo gasto

Trabalho


ligar a outros sistemas, criando novas relações de interdependência, agregando mais informação. Entretanto, se durante essas ligações os sistemas aderidos contêm grandes falhas e precárias estruturas, os outros sistemas que se ligam a ele, irão conflitar-se gerando mais falhas e problemas. Assim, uma trama é armada, onde teias se entrelaçam e um efeito dominó se inicia, tornando mais densa ainda a complexidade do sistema. Quando nos deparamos com panoramas como esse, percebemos que um ponto muitas vezes nos passa despercebido, conforme a afirmação de Mau: “Precisamos de melhorias tecnológicas, porque o mundo é complexo. Mas às vezes as complexidades que encontramos são resultado das próprias tecnologias.” (LEONARD, 2007, p. 99). Precisamos de novas tecnologias para sanar tecnologias defasadas, mas até que ponto nós não estamos remendando problemas viscerais? É bom diferenciar complexo de complexidade antes de prosseguirmos. Quando citamos “complexo” nos referimos a um agrupamento, ou grupo, de sistemas interligados, já “complexidade” refere-se à informações densas de difícil apreensão. Como vimos até agora, muitas vezes esses sistemas compostos por territórios não são dirigidos por uma gestão inteligente. Dentro desse cenário, recortando para o transporte público, percebemos o quão necessária é a transmissão e comunicação da informação através de tecnologias, a fim de re-

duzir sua complexidade. Mau e Leonard nos sugerem o design como um meio para soluções, onde: “Um bom design aumenta a possibilidade humana e reduz a complexidade.” (2007, p. 99). Design, então, pode ser um auxílio eficaz na solução desses problemas, pois, como visto anteriormente: “A desordem visual é uma falha de design, não um atributo da informação” (TUFTE apud BAER, VACARRA, 2008, p. 2). E de que forma solucionar essa desordem visual que encontramos hoje? Como resposta, este projeto une seus objetivos, como eliminar as etapas no acesso à informação, aos problemas aqui expostos, como tomadas de decisão feitas a partir de informações desatualizadas. Partindo disto, podemos pensar na criação de uma gestão inteligente como solução, direcionada unicamente para o transporte público e suas demandas por soluções em mobilidade urbana. Dessa forma, evidencia-se a necessidade deste projeto, um aplicativo GPS (nova tecnologia), onde as informações são fornecidas pelos órgãos responsáveis, como SPTrans, EMTU, Metrô e CPTM, mas comunicadas e transmitidas pelo aplicativo, tendo como parâmetro para o cálculo dos trajetos as características e especificidades do usuário (design), ajudando, de maneira inteligente e pessoal, seu deslocamento pela cidade (mobilidade urbana) [GRÁFICO 03]. 17


GRÁFICO 03

A B

APP

B

A

APP

B A

Informação dos órgãos responsáveis

18

Gestão Inteligente do aplicativo

Parâmetros do usuário

Melhor trajeto

Deslocamento inteligente


4.2

Otimização do tempo

Conforme avançamos vemos que o mundo está interligado em diversas escalas e quanto mais nos aprofundamos, encontramos mais e maiores complexidades nas ligações. A globalização é um exemplo macro desse entranhamento e entrelaçamento de complexos, sistemas e gestões, pois tudo está interligado e relacionado, dialogando entre si nos âmbitos econômico, cultural e social. Se sairmos da esfera global e formos para a esfera nacional, continuaremos vendo complexas interligações, interdependências e diálogos. Conforme adentramos, percebemos que, salvo devidas proporções, em todos os sistemas a complexidade desmembra-se em mais complexidade, e ao avaliarmos os problemas que eles enfrentam notaremos que as dificuldades são bem próximas. Podemos presumir que a diferença entre sistemas e seus problemas, está em suas escalas, proporções e dimensões. Seguindo o pensamento, os problemas contêm complexidades próximas a de outros problemas, assim, o transporte público, de maneira geral, terá a mesma complexidade que a mobilidade urbana individual. Por exemplo: a dificuldade que os engenheiros de trafego têm em coordenar o fluxo dos transportes na cidade será complexamente semelhante à do usuário gerenciando seu deslocamento na cidade. Metodo-

logias e ferramentas se diferem, mas em um panorama geral a necessidade e busca dos dois é a otimização do tempo, a economia financeira e a locomoção fluida (GRÁFICO 04). GRÁFICO 04

Usuário

Engenheiro de Tráfego

A

B

Deslocamento na cidade

Otimização do Tempo

Coordenação do fluxo de Transportes

Economia Financeira

Locomoção Fluida

19


Entendemos agora que, em diferentes níveis, os sistemas se assemelham em sua complexidade, pois muitas vezes objetivam a mesma coisa. Se pensarmos dessa maneira, nosso caminho à solução não terá como primeira etapa encontrar os problemas, mas sim, entender o contexto em que esse sistema está inserido e identificar onde existem pontos de contatos com os outros, entender a complexidade para poder simplificar. Quando compreendemos o entorno conseguimos ter um diagnóstico bem completo e preciso, possibilitando-nos unir as necessidades comuns, alinhar as funções exercidas e propor um diálogo, antes inexistente, para enfim termos uma solução abrangente e concisa. O presente projeto visa o diálogo entre sistemas afastados que contêm o mesmo objetivo. A exemplo desse afastamento vemos informações sobre trânsito, desconexas de informações sobre o tempo de espera dos transportes, assim como as informações dos itinerários dos ônibus que não dialogam com as informações do metrô, as quais também não conversam com as do trem. É nesse ambiente disperso e confuso que os usuários precisam capturar, relacionar e analisar os dados para tomar uma decisão. Em meio a esse contexto “silencioso” o projeto vem trazer voz à união dessas informações, a fim de que os usuários possam “ouvir” soluções inteligentes. Parece muito abstrato ter em mente essas ligações entre 20

sistemas e diálogo dentro do complexo, porém analisando o seguinte exemplo poderemos entender melhor o que o projeto viabilizará aos usuários. No dia 11 de fevereiro de 2014, o jornal Folha de S. Paulo publicou uma comparação do tempo de viagem entre a linha 3-vermelha e o ônibus 4310, o trajeto se dava da zona leste até o Parque Dom Pedro durante os horários de pico da manhã. De acordo com a medição, o tempo do ônibus foi de 55 minutos e do metrô 52, e em um dia com falha no metrô e trânsito congestionado o tempo foi de 1 hora e 15 minutos para o metrô e 1 hora e 18 para o ônibus (MONTEIRO, MACHADO, 2014). O que quero ressaltar com esses dados não é o desempenho do ônibus em vista do metrô, muito menos os problemas que os meios de transporte apresentaram, mas o fato de que existem alternativas possíveis e que a divulgação desse tipo de informação poderia auxiliar, e muito, na otimização do tempo dos usuários. O aplicativo visa, como no exemplo, unir informações que estão dispersas, como dados sobre trânsito (ex.: congestionamento), situação dos transportes (ex.: ônibus quebrado), situações adversas (ex.: objeto na via do metrô) e excepcionais (ex.: protestos), valor do trajeto total e tempo de espera pelo transporte. Junto às informações a sugestão de trajeto se basearia em individualidades do usuário, como velocidade média de


caminhada, possíveis deficiências e gostos (ex.: o usuário vai a uma Cafeteria e quando chega ao local adiciona uma tag “café” ao seu gosto no aplicativo, então, o mesmo quando traçar as rotas apontará Cafeterias próximas ao trajeto, caso haja). A preocupação do aplicativo com tantos parâmetros é de ser flexível, é de poder propor um trajeto que melhor nos atenda, que saiba sobre a cidade em tempo real, que leve em conta o que precisamos e quem somos. E Niemeyer reforça a necessidade de um projeto flexível, dizendo-nos que: “[...] as nossas ‘ferramentas’ devem desenvolver a habilidade de ser adaptáveis e sensíveis às mudanças de nossas tarefas, interesses, comunicações, e, certamente, afetos e emoções.” (2008, p. 51). É importante frisar que o aplicativo permitirá ao usuário definir a prioridade do trajeto, pois nem sempre o usuário precisará otimizar seu tempo. Ainda assim, isso não quer dizer que o aplicativo não levará em conta as outras opções, ele somente encarará as prioridades dentro de um sistema hierárquico. Retomando a comparação citada a pouco, supomos que um usuário estivesse indo a algum local pretendendo utilizar o metrô e o mesmo estivesse com problemas, o aplicativo sugeriria uma rota alternativa, no caso o ônibus, pois os dois levariam o mesmo tempo, custariam o mesmo valor e percorriam trajetos semelhantes (GRÁFICO 05). Isso propiciaria uma utilização inteligente das alternativas oferecidas,

uma melhor distribuição no fluxo de usuários nos meios de transporte disponíveis, um menor desgaste físico-psicológico e, claramente, a redução no tempo de deslocamento. A otimização do tempo é reflexo de uma gestão inteligente onde há diálogo entre os sistemas. São nessas “conversações” que evidenciamos: nenhum sistema é uma “ilha”. Quando pensamos no transporte público dialogar é pensar em comunidade, é beneficiar e, consequentemente, ser beneficiado. GRÁFICO 05

APP

A

Usuário

Ônibus

Trem

B

APP

Usuário

21


4.3

Nenhum sistema é uma “ilha”

Quando falamos em sistemas é estranho adjetiva-los como uma “ilha”, pois naturalmente o sistema se desmembra em um conjunto de funções interligadas. Entretanto, o isolamos quando pensamos em soluções para os seus problemas sem considerarmos onde ele está situado. Mais uma vez frisamos a necessidade de projetar avaliando o todo e não apenas uma parcela. Dentro desse complexo de sistemas interligados precisamos utilizar um recurso eficaz, o senso de coletividade. Tomamos a definição de senso como uma direção a ser seguida e praticada por todos. Quando falamos dentro de mobilidade urbana, ele deve sobrepujar qualquer traço de pensamento individualista, pois segundo Mau e Leonard “A nova cultura da mobilidade considera não só o trânsito, mas também a saúde, a educação, a habitação, os resíduos e as necessidades sociais. Nenhum sistema de transporte é uma ilha; deve-se coordenar todos os sistemas compartilhados para um máximo desempenho.” (2007, p. 57) (GRÁFICO 06). Essa coletividade deve estar presente em todos os níveis, desde o usuário, seja ele passageiro, controlador, motorista, engenheiro de tráfego ou qualquer outro, até os sistemas em si, coordenando ações em conjunto a outros sistemas, favorecendo uma melhor performance do complexo e uma provável 22

solução de problemas através do compartilhamento de funções e informações. Quando entendemos nosso contexto, aprendemos a lidar multifocalmente com os problemas, eles serão pra nós parcelas interligadas a um todo, membros do mesmo corpo. Não mais os limitamos a pontos específicos ou os generalizamos em um único problema, mas agora os entendemos como integrantes de um sistema. Mau e Leonard lembram-nos que: “A nova cidade global agora é definida por zonas urbanas, suburbanas, rurais, de lazer e até mesmo recintos ‘naturais’ - tudo gerenciado, tudo parte de um sistema projetado.” (2007, p. 45). Compreender a contexto do sistema nos ajuda a entender os problemas, propondo-nos a agir coletivamente, considerando todo recinto e zona durante a projetação. GRÁFICO 06

Habitação Transporte

Resíduos

Saúde

Educação


GRÁFICO 07

Cidade em tempo real

Meios de Transporte

Individualidades do usuário

APP

A partir desse diagnóstico de dispersão, o presente projeto propõe ligações entre sistemas e informações relacionadas já existentes, entretanto, espalhadas em diferentes meios. A ideia central é unir 3 complexos de informação: o primeiro é o complexo composto pelos meios de transporte; o segundo é composto pela situação da cidade em tempo real; e o terceiro é composto pelas individualidades do usuário (GRÁFICO 07).

O primeiro complexo abrange as informações do sistema de ônibus municipal e intermunicipal, metrô e trem, como problemas nas vias do metrô e trem, ônibus quebrado, acidentes relacionados diretamente aos transportes, tempo de intervalo entre veículos, percurso realizado e valor da passagem. O segundo é composto por informações fornecidas em tempo real sobre a cidade, o foco são dados que auxiliem com maior precisão o cálculo do percurso feito pelo aplicativo, a fim de que ele tenha uma noção atualizada da cidade. As informações seriam sobre pontos de alagamento, engarrafamento, congestionamento e acidentes indiretos aos transportes, como colisão entre carros. O terceiro é composto pelas informações que o usuário completará ao longo de seu uso, por isso o foco no smartphone, pois se trata de um objeto pessoal utilizado individualmente. O aplicativo trará, baseado no usuário do aplicativo, informações paramétricas, como velocidade média de caminhada, possíveis deficiências ou limitações e gostos pessoais. Isso trará um cálculo mais preciso no tempo e um traçado de trajeto individualizado, pois entendemos que cada indivíduo tem suas especificidades físicas e diferentes comportamentos. No último item o usuário “adicionaria” seu gosto através de “tags”, ou etiquetas, pré-determinadas ao aplicativo, assim, durante o cálculo do trajeto o aplicativo sugeriria 23


locais que se encaixassem ao gosto adicionado, como estabelecimentos comerciais (ex.: lojas; restaurantes), culturais (ex.: museus; teatros; exposições) e locais de lazer (ex.: parques; praças) (GRÁFICO 08). Isso propicia ao usuário trajetos diferentes e dinâmicos, buscando não só a melhor opção tecnicamente, mas também parametricamente. GRÁFICO 08 APP

CAFÉ Usuário

TAG adicionada aos gostos

Trajeto Cafeteria Alemanha

4.4 A

Sugestão

Sugestão

24

Agrupar para enxergar

No decorrer dos capítulos vimos que o mundo se encontra completamente interligado e que a falta de uma gestão inteligente ocasiona em sérios problemas, como desordem e caos, principalmente quando falamos sobre a democratização e o acesso à informação, um exemplo muito utilizado foi a atual situação do sistema de transporte público da cidade de São Paulo. Em seguida, vimos que a diferença entre os sistemas e seus problemas está em suas escalas, proporções e dimensões, e que propiciar diálogo entre eles é caminhar às soluções. Assim,

Café & Quadrinhos

B

Será a partir desses 3 complexos de informação que o aplicativo funcionará, isso será sua força motriz para ser flexível ao usuário, na grande maioria das vezes inconstante, imprevisível e instável. Stanton e Baber nos esclarecem sobre isso: “O produto deve ser capaz de lidar com um limite de variação de tarefas, além daquelas inicialmente especificadas.” (apud MONT’ALVÃO, 2008, p. 24). Assim, o aplicativo mune-se com todos os artifícios possíveis a fim de fornecer a melhor experiência e serviço, através de um produto flexível que agrupa funções para poder enxergar a melhor solução.

Padaria do Manoel

Sugestão

concluímos que nenhum sistema pode ser uma “ilha”, tendo em vista que quando coordenamos a forma que ele será “compartilhado” com outros sistemas obtemos maior desempenho


do complexo e do próprio sistema. Com os conceitos reforçados em nossa mente prosseguimos para o último capítulo de nossa fundamentação teórica, sabidos que compreendê-lo nos auxiliará na projetação de uma solução coerente e eficaz para o aplicativo, organizando vigentes caos dos sistemas, a fim de transformá-los em grupos (agrupamentos) simples, acessíveis e tangíveis ao usuário.

A cada dia que passa aparecem novas funções solucionando problemas de diferentes escalas inseridos em diferentes complexos de sistemas, os quais abrangem sistemas com diferentes usuários, estes dependentes de serviços interdependentes que pertencer a diversos sistemas (GRÁFICO 09). Apesar de parecer complicado, somente quando entendemos nosso contexto vemos claramente essa grande “ca-

GRÁFICO 09

Problema

Sistema

Usuário

Nova Função

Problemas

Complexo de Sistemas

Serviços Interdependentes

25


deia” fortemente interligada, onde se evidencia a necessidade de sintetizar as novas e as já existentes funções, transformando as complexidades em simplicidade. Percebe-se que agrupando conseguimos visualizar com clareza os problemas, as ligações, os dependentes, os servidos, enfim, tudo que integra e permeia o sistema, pois, como reforçado no capítulo anterior, nenhum complexo, sistema, território, usuário ou problema é uma “ilha”, entender sua inserção nos permite enxergar as tramas que os envolvem e as possibilidades que os cercam. Mau e Leonard nos dizem que, “Devemos criar um distanciamento crítico suficiente das informações para que possamos fazer perguntas sobre as forças operacionais que as trazem à existência.” (2007, p. 91). O afastamento nos permite entender com o que estamos lidando, entender o contexto, para que, a partir do nosso conhecimento e compreensão, possamos adentrar em detalhes e minucias dos problemas. É importante frisar que os grupos (agrupamentos) também não são “ilhas”, assim como vimos anteriormente que sistemas podem se interligar, do mesmo jeito os grupos formados se entrelaçam, se complementam e se interdependem para se valerem de funções existentes. Em alguns pontos as funções que encontramos em um determinado grupo são utilizadas por outro (GRÁFICO 10), por exemplo: posso ter um grupo de in26

formação exclusivamente sobre ônibus contendo o estado do veículo, seu horário, o nome e número da sua linha, seu percurso, seus pontos de parada, quem está dirigindo, o valor de sua passagem, etc.; esse grupo se interliga a outro grupo através de seu “conteúdo”, no caso a informação sobre o estado dos ônibus também é encontrada em um grupo de informação sobre a qualidade dos meios de transporte público da cidade. O grupo não retira nem isola a informação, problema, função ou sistema de seu contexto, ele apenas cria uma espécie de “tag”, ou etiqueta, no seu conteúdo para que a gestão inteligente possa compreendê-lo com clareza e geri-lo com maior facilidade. GRÁFICO 10

Grupo sobre os ônibus

Função compartilhada

Grupo sobre a qualidade dos transportes


Como citado outras vezes, “Uma gestão inteligente do território será capaz de propiciar maior agilidade na gestão integrada on line das diversas mobilidades urbanas.” (LEITE, 2012, p.172). A partir disso, podemos presumir que uma gestão inteligente será responsável e capaz por agrupar as informações e os sistemas dispersos de forma coerente e ágil, fornecendo um panorama que possa ser “enxergado”, executando, assim, a função proposta pela solução. Agrupar é simplificar, é tornar sistemas e complexos mais claros para que aja maior liberdade, entendimento e controle em seu manuseio, pois quando os agrupamos conseguimos organizar, elencar, categorizar e resolver os problemas de um modo mais conciso. Trazendo esses conceitos para o presente trabalho, precisamos conhecer o meio ao qual estamos inserindo nossa solução para o problema encontrado. É necessário ter consciência que a cidade de São Paulo contém diversas falhas e defasagens no fornecimento de informação sobre o transporte público, pois cada órgão responsável se comunica de uma forma e por um meio diferente. O projeto não tem a pretensão de sanar os defeitos na comunicação dos órgãos ou construir um perfeito sistema de transporte público, entretanto quer apresentar uma saída através da fácil absorção e acesso da informação pelo usuário. O aplicativo busca solucionar os problemas gerados pela

desinformação através de uma gestão inteligente que reúna e agrupe os dados esparsos necessários para o deslocamento pela cidade unicamente via transporte público, apresentando-os de forma palpável e clara. Em síntese, o aplicativo será para o usuário uma gestão inteligente do conteúdo disperso sobre transporte público. Quando levamos as informações e funções dos sistemas ao usuário de um modo simples por um meio prático, avançamos na democratização do acesso à informação, possibilitando a todos uma melhor administração dos deslocamentos pela cidade. É no momento que o usuário detém as informações necessárias para sua mobilidade que o benefício mútuo fica claro, onde não só um, mas todos ao seu redor, como outros usuários, trabalhadores e gestores do sistema, o próprio sistema e o complexo, são favorecidos. Assim, retomamos brevemente o senso de coletividade citado no capítulo anterior, uma direção a ser seguida e praticada por todos, onde, conforme Redig nos fala, “O próprio emissor, se quiser cumprir sua função, deve se colocar também nessa posição diante do receptor.” (2004, p. 51). À medida que a gestão inteligente pôr-se no lugar do usuário, diálogos entre sistemas, antes inexistentes, surgirão, recursos serão agrupados, dúvidas serão esclarecidas, problemas encontrarão solução e complexidades se tornarão simples. 27


Somente através do agrupamento poderemos maximizar nossas ações dentro da mobilidade, é por meio de grupos de informações, de sistemas, de complexos, de problemas, de funções e de usuários que conseguiremos organizar tudo aquilo que está disperso, a fim de que possamos ver com clareza as áreas carentes de informações, as localidades dos problemas, as possíveis dificuldades das interligações e as deficiências das funções. Portanto, o aplicativo se propõe a ser essa gestão inteligente, consciente não só do problema a ser enfrentado, a falta de informação fornecida pelos órgãos responsáveis versus a necessidade do usuário em decidir algo rapidamente a partir dessas informações, mas também seu contexto, o confuso sistema de transporte público da grande São Paulo. Ele se põe como uma gestão responsável por agrupar as informações sobre os transportes e repassá-las aos usuários de uma forma inteligível, prática e eficiente, pois acredita que, conforme Niemeyer, “fazer design é mais do que projetar produtos: é resolver problemas de diálogo do ser humano com os outros e consigo mesmo.” (2008, p. 53).

28


29


Conceitos Estudados

5.

Este capítulo foi desenvolvido a fim de explicar, de forma breve e objetiva, os conceitos estudados para a realização das análises no capítulo seguinte, pois entende-se que os termos utilizados, por pertencerem a uma área relativamente nova, são pouco conhecidos por pessoas que não estão habituadas à áreas como design de interface, interação humano-computador (IHC) e experiência do usuário (User Experience / UX).

30

5.1

Arquitetura da Informação

Arquitetura da informação, segundo Brancheau e Wetherbe é: “[...] uma metodologia para estruturação de sistemas de informação aplicada a qualquer ambiente informacional, sendo este compreendido como o espaço que integra contexto, conteúdos e usuários.” (apud MACEDO; LIMA-MARQUES, 2006, p.246).

Ela será útil durante as análises, pois trará parâmetros reais para a avaliação dos aspectos positivos e negativos das estruturas dos aplicativos similares. Dentro do projeto ela será utilizada durante a criação do fluxo de navegação, que mapeará os caminhos da informação dentro do aplicativo, durante o desenvolvimento dos wireframes, que são, segundo Santa Rosa e Moraes, “(...) diagramas


que fornecem uma representação visual do fluxo entre as diferentes telas apresentadas ao usuário.” (2010, p. 80), e durante a produção da interface gráfica. É importante pontuar a diferença entre Arquitetura da Informação e Experiência do Usuário (UX), pois os dois trabalham juntos, entretanto de formas e hierarquias de importância diferentes. Para Northcott (2012) a Experiência do Usuário se vale da Arquitetura como alicerce, ela utiliza a lógica estrutural da informação adicionando contexto e história à experiência do usuário. A Arquitetura então trata diretamente com a estrutura, enquanto o UX lida com a estrutura objetivando a experiência do usuário.

5.2 Usabilidade A usabilidade é um atributo qualitativo que engloba vários conceitos focados em aspectos mais exatos e técnicos, como Ergonomia e Arquitetura da Informação, tomando-os como parâmetro para medir a facilidade do uso de uma interface. Nielsen nos explica que "(...) a usabilidade é um atributo qualitativo que determina quão fácil é usar as interfaces do usuário. O termo usabilidade também se refere aos métodos para facilitar o uso durante o processo de design.” (apud SANTA ROSA; MORAES, 2010, p. 14).

Usabilidade então é um atributo pertencente a todo produ-

to (DUMAS; REDISH apud SANTA ROSA; MORAES, 2010) que visa otimizar e facilitar o uso, por isso esse atributo se faz importante para a análise correta de produtos similares mensurando sua eficácia baseado em seus conceitos embutidos, citados a pouco. Tendo esse atributo definido, podemos utilizá-lo na produção da interface deste projeto, objetivando como propiciar um uso intuitivo e fácil, que concilie uma boa usabilidade com uma boa expressão estética, pois “Segundo Teixeira (2004), a criatividade não deve ser sacrificada em detrimento de algum objetivo específico de usabilidade (...)” (SANTA ROSA; MORAES, 2010, p. 20).

5.3 Ergonomia A definição de ergonomia, segundo Grandjean, é: “(...) nova ciência, que estuda o comportamento e reações do homem em relação ao seu trabalho, à maneira que ele opera e ao ambiente da estação de trabalho. A pesquisa ergonômica objetiva adaptar o trabalho ou a máquina às capacidades humanas, de modo a facilitar o trabalho e garantir máquinas amigáveis.” (apud MONT’ALVÃO, p. 19).

Dentro das análises a ciência da Ergonomia será utilizada para julgar o quão adaptável e flexível foram projetadas as interfaces, abarcando conceitos como leiturabilidade e contraste que apontam para a usabilidade. 31


A Ergonomia será aplicada ao presente projeto com o intuito de prever dificuldades e sofrimentos durante o uso, que indiretamente afetam na usabilidade e na Experiência do Usuário, pois "(...) a ênfase da ergonomia está na prevenção de dores e sofrimento dos usuários na interação com os sistemas cotidianos (...)" (HANCOCK et al. apud MONT’ALVÃO, 2008, p. 26)

5.4 Gamificação Gamificação é um conceito que hoje vem sendo muito aplicado aos produtos, pois se baseia no ensino atráves de jogos (WERBACH apud VADER, 2013), abordando o conteúdo de maneira convidativa, divertida e envolvente, atraindo assim muitos usuários. Por definição teremos o conceito Gamificação como “(...) o uso de mecânicas de jogos, estética lúdica e ‘game thinking’ para engajar pessoas, motivar ações, promover aprendizado e resolver problemas” (KAPP apud VADER, 2013). Assim, durante as análises avaliaremos, de maneira simples, as estratégias de interação utilizadas pelos aplicativos similares, sua eficácia e sua abordagem. Já no presente projeto, o conceito auxiliará na motivação da participação do envio de informações para o aplicativo, objetivando tornar mais complexo e completo as sugestões de trajeto.

32


33


Aplicativos Similares

6. 34

Neste capítulo serão analisados aplicativos que se assemelhem ao proposto pelo presente trabalho com o intuito de entender o mercado de aplicativos GPS, como transmitem as informações, como se comunicam graficamente, como estruturam a hierarquia, como possibilitam trajetos inteligentes, enfim, tendo parâmetros de como se comportam, seus aspectos positivos e negativos, suas novas funções e suas falhas, podemos criar novas soluções ou identificar ainda pouco exploradas. Nem todos os aplicativos aqui analisados estão diretamente relacionados uns aos outros, pois enquanto o Waze é direcio-

6.1 Waze

nado apenas para carro, o Omnibus é direcionado apenas para ônibus, mas todos idealizam novas formas de otimizar o deslocamento.

A inicialização do Waze é bem veloz, em poucos instantes o aplicativo lhe dá acesso às suas primeiras configurações. Sua interface é objetiva quanto à ação requisitada ao usuário, são

O Waze é um aplicativo criado por um israelense chamado Uri Levine e que atualmente foi comprado pelo Google. Os dados obtidos pelo aplicativo são utilizados e direcionados para o Google Maps (RUIC, 2013), entretanto os serviços ainda se diferenciam em vários aspectos, sendo o Waze um aplicativo baseado na gameficação e o Google Maps um aplicativo apenas de serviço.

Análise


poucas, ou apenas uma opção a ser escolhida, sendo uma contribuição muito positiva para a usabilidade do produto, pois a facilidade e a clareza no entendimento do produto em muito influenciam em sua usabilidade e na experiência do usuário, assim como corrobora Nielsen: "(...) a usabilidade é um atributo qualitativo que determina quão fácil é usar as interfaces do usuário.” (apud SANTA ROSA; MORAES, p. 14, 2010). Em alguns momentos percebemos, quando a pergunta tem uma única opção de resposta, como no caso da IMAGEM 02, o aplicativo insere no botão um "timer", uma espécie de cronômetro em contagem regressiva, para caso o usuário demore para responder ele entenda a confirmação automaticamente. Isso é positivo quando se entende que algumas perguntas são apenas para concordância, entretanto, quando tratamos de configurações do aparelho confere ao usuário decidir se deseja habilitar ou não, pois ainda sem é possível o uso do aplicativo. A leiturabilidade do texto é muito boa, pois o contraste entre tipografia e fundo é muito nítido, e como Miyagawa apresenta o conceito: "Leiturabilidade se relaciona a quantidade de esforço que uma pessoa tem para ler um texto." (2013). O aplicativo pouco varia em sua paleta cromática, ele se vale das gradações da mesmas cores, o azul e o preto, trabalhando muito bem a hierarquia das informações, dando ênfase ao conteúdo mais importante.

IMAGEM 01

IMAGEM 02

35


IMAGEM 03

IMAGEM 05

36

IMAGEM 04

IMAGEM 06

Um recurso simples pouco visto nos outros aplicativos, e que se mostrou como um diferencial no Waze, foi o vídeo de inicialização (IMAGEM 03) apresentando ao usuário seus recursos, suas possibilidades e seu funcionamento, proporcionando um entendimento prévio do comportamento do aplicativo. O tratamento verbal que o aplicativo usa para se comunicar com usuário é bem pessoal, uma conversa mais leve, um diálogo que, de certa forma, se aproxima do usuário, pois tem-se a sensação que o mesmo não é uma máquina. Seguindo nessa linha menos “formal”, o usuário inicia seu progresso como uma criança, um bebê Waze (IMAGEM 04), cujo só crescerá mediante a continuidade do uso do aplicativo, quanto mais quilômetros rodados, mapas editados e alertas emitidos, mais o personagem crescerá. Outro recurso utilizado para estimular a progressão do usuário, é que para ter acesso à customização do personagem é necessário atingir uma determinada quilometragem (IMAGEM 05 / 06). Um problema detectado foi o excesso de informações desnecessárias no mapa durante o deslocamento, como a visualização dos “Wazers” (outros usuários), alertas e propagandas (IMAGEM 08), porém, há a possibilidade de desativá-los (IMAGEM 07). Quando pensamos no aplicativo como rede social isso é muito positivo, porém quando pensamos apenas em sua função primeira, um aplicativo GPS, percebemos que há difi-


IMAGEM 09

culdade em captar a informação necessária durante a direção. Entretanto, algo confuso é que o Waze dispõe de dois modos de visualização do mapa, 2D e 3D, e quando optamos pelo plano bidimensional tanto os alertas quanto as informações excedentes diminuem a quantidade no mapa, nos deparamos com uma hierarquia da informação mais clara, possibilitando-nos identificar o caminho a ser seguido e os alertas que são relevantes (IMAGEM 08). IMAGEM 07

IMAGEM 08

37


IMAGEM 10

Assim como vimos, a gama de variações dos personagens do Waze propicia ao usuário um sentimento de exclusividade e personalização do aplicativo, aliado à interação com as redes sociais, despertam sentimentos nas pessoas que podem as satisfazer socialmente, como diz Russo e Hekkert, “Produtos que encorajam e facilitam a construção e familiarização da auto-identidade de uma pessoa, além da comunicação dessa identidade, podem satisfazer prazeres sociais.” (2008, p. 41).

Uma recurso muito inteligente foram os modos de visualização do mapa, “dia” e “noite”. Nelas o aspecto ergonômico foi muito bem pensado, durante o uso do modo “dia” o mapa é luminoso com cores bem claras amenas, já no modo “noite” a luminosidade da tela é reduzida, invertendo as cores do mapa, entendendo o ambiente escuro do carro durante a noite e que por isso a luz emitida pelo smartphone poderia incomodar o campo de visão do usuário-motorista (IMAGEM 10). Visando ampliar o controle e as preferências do usuário, o Waze fornece a opção de escolher qual será a prioridade do cálculo do trajeto , se será pelo caminho mais curto ou se será pelo caminho mais rápido (IMAGEM 11). As duas opções tem seus prós e seus contras, entretanto a possibilidade de escolher conforme a necessidade do momento em muito agrega à experiência do usuário. Na visualização do mapa, encontramos uma caixa de pesqui38


IMAGEM 11

IMAGEM 12

e junto com ela a possibilidade de ver esses outros endereços, também em mapa (IMAGEM 13). A segunda etapa relevante a considerações é a pré-visualização do trajeto, pois nela é possível não somente aceitar iniciar a rota, mas também identificar os alertas existentes, o tempo necessário, a quantidade de quilômetros a ser rodada, a principal via pela qual o carro passará, consultar outras rotas e convidar amigos para dirigir junto (IMAGEM 14). Com isso o usuário pode ter uma noção completa de como será seu trajeto antes mesmo de iniciá-lo. IMAGEM 13

IMAGEM 14

sa (texto e voz) muito útil, seu propósito é agilizar a busca do usuário por algum endereço ou local, entretanto alguns detalhes o tornam ineficazes, pois quando se seleciona a caixa para digitar, o mecanismo direciona a busca para outra tela, impossibilitando o usuário de realizar a ação na própria (IMAGEM 12). Posterior a busca do endereço desejado o aplicativo apresenta duas etapas que merecem destaque. A primeira é a visualização em mapa das redondezas do endereço facilitando a identificação do local, caso haja destinos com nomes semelhantes, 39


Ainda na tela do mapa encontramos o botão de alertas no canto inferior direito, onde o usuário pode notificar aos outros o que está acontecendo a sua volta durante seu trajeto; assim, de uma forma prática e rápida o usuário pode compartilhar e contribuir com sua informação (IMAGEM 15 / 16 / 17). IMAGEM 15

40

Os ícones são bem definidos e diferem entre si, suas variações cromáticas são próprias de cada alerta, os desenhos seguem uma linguagem sintética um pouco infantil, muito por conta da proposta de comunicação do aplicativo, e por isso a representação dos ícones é de fácil compreensão.

IMAGEM 16

IMAGEM 17


Como último ponto da análise quero ressaltar algo ergonomicamente bem pensado, a marcação do trajeto na mapa. A cor roxa utilizada se destaca de qualquer elemento do mapa, seja ele alerta, propaganda ou o próprio ambiente do mapa. A visibilidade e diferenciação que pode ser feita entre o trajeto e os demais elementos é muito clara e agradável, funciona De maneira geral o Waze é muito eficiente em seu propósito e cumpre seu objeto, pois destoa de todos os outros GPS voltados para carro e aborda uma nova forma de se encarar um simples trajeto. E essa eficiência, como diz Jordan, “(...) se refere à quantidade de esforço necessário para se chegar a um determinado objetivo. Os desvios que o usuário faz durante a interação bem como a quantidade de erros cometidos servem para avaliar o nível de eficiência do aplicativo.” (apud MONT’ALVÃO, p. 23).

41


IMAGEM 18

6.2 Omnibus O Omnibus é um aplicativo de serviço que permite aos usuários acompanharem as linhas de ônibus em tempo real. O aplicativo é limitado apenas para a cidade de São Paulo, pois suas informações provém do serviço da SPTrans chamado “Olho Vivo”.

Análise Quando abrimos o aplicativo somos direcionados para o menu contendo o campo de pesquisa, uma área para as linhas favoritas, três botões com cores luminosas (“sobre”, “remover” e “ver”), grafismos das linhas de ônibus de São Paulo, presente também no site (http://omnibusapp.com/), e ao fundo vemos a tela de visualização do mapa (IMAGEM 18). Observarmos que a interface é bem simples, provavelmente objetivando direcionar o olhar do usuário para sua função principal, a pesquisa das linhas de ônibus. As cores principais do Omnibus são branco, predominante em textos, preto e poucas gradações de cinza, as quais, por trazem contraste máximo entre si, auxiliam na leitura dos textos e identificação dos elementos. As cores secundárias utilizadas nos três botões inferiores são verde, rosa e azul, muito distintas entre si e muito luminosas, chamando a atenção do usuário para suas ações. 42


Entretanto quando pensamos na ergonomia da escolha da cor vemos que graves falhas aconteceram, podemos evidenciar isso na cor verde, onde texto, em cor branca, pouco contrasta. Outro erro de contraste foi visto durante a pesquisa das linhas de ônibus, onde o texto se encontra numa tonalidade de cinza muito próxima do branco da caixa de pesquisa, assim, o usuário praticamente não consegue visualizar o que está digitando (IMAGEM 19 / 20). IMAGEM 19

IMAGEM 20

Após a pesquisa, que tanto pode ser feita pelo número quanto pelo nome da linha, os resultados aproximados são dispostos em lista com a opção de adiciona-los aos favoritos. Quando voltamos para a visualização do menu encontramos as adições nos favoritos e uma caixa para seleção que nos permite escolher as linhas que desejamos visualizar no mapa (IMAGEM 21), e que se não for selecionada emitirá ao usuário um alerta pedindo para que o mesmo escolha ao menos uma linha (IMAGEM 22). IMAGEM 21

IMAGEM 22

43


IMAGEM 23

44

IMAGEM 24

IMAGEM 25

O aplicativo disponibiliza duas opções de visualização do mapa, 2D e 3D, entretanto percebemos uma grande falha de

posterior a seleção do trajeto, apenas podemos visualizar o modo 2D, a função some da tela, impossibilitando-nos de aces-

usabilidade durante a escolha do modo desejado. Quando ainda não selecionamos nenhuma linha de ônibus, no ícone localizado no canto superior esquerdo da tela em vermelho, temos a escolha por optar entre o modo 2D e o 3D (IMAGEM 23), porém,

sar o modo 3D do mapa (IMAGEM 24). Dentro da visualização do trajeto no mapa, evidenciamos que a hierarquia das informações foi pouco pensada, pois, após clicarmos no ícone do ônibus, um balão com os dados referen-


tes à localização do usuário aparece, nele pouco diferenciamos a importância das informações, acabamos visualizando dados que não foram fornecidos ao aplicativo, nomeados como “null”, ou vemos informações com relevância distinta com o mesmo destaque visual, como o número do carro com o mesmo peso hierárquico que o tempo estimado (IMAGEM 25). Apesar do aplicativo Omnibus prometer poucas funcionalidades ao seu usuário, a usabilidade e a ergonomia do produto são fracas, percebemos várias falhas durante o primeiro uso e acreditamos que isto só tende a piorar conforme a utilização. Poucos pontos foram positivos no aplicativo e muitos aspectos serviram de alerta para o desenvolvimento do presente projeto.

45


6.3

Google Maps

Análise

O Google Maps é um aplicativo derivado de um website (https://maps.google.com.br/), ele tem em sua essência a visualização de mapas, entretanto o mesmo engloba também a navegação GPS, as informações das vias, como trânsito, pesquisa de empresas e estabelecimentos, mapa do interior de prédios, visualização da rua e mapeamento dos trajetos e preferências do usuário no decorrer de seu uso. IMAGEM 26

46

IMAGEM 27

O Google Maps possui uma interface realmente muito limpa, clara e objetiva, tanto no mapa quanto nas funções encontramos poucos elementos, suas cores neutras são branco, muito predominante na identidade do aplicativo, e preto com suas gradações de cinza, assim, o foco do usuário é voltado para os elementos principais com cores fortes, como o indicador de local em azul e o marcador da pesquisa em vermelho, deixando as demais informações como complementares (IMAGEM 26). A arquitetura da informação direciona muito bem a composição das informações das telas, vemos que a hierárquica é em grande parte definida pela luminosidade das cores, como as gradações de cinza, mas igualmente pela dimensão dos elementos. A construção estrutural dos ícones propicia a flexibilidade durante a aplicação em diferentes tamanhos, eles conseguem transmitir muito claramente a informação por si só, pois em alguns momentos não são acompanhados pelo texto (IMAGEM 27). Quando acessamos o menu lateral da tela de visualização do mapa (IMAGEM 28), encontramos uma lista de filtros que apresentam informações gráficas dentro do mapa como trânsito, pontos de transporte público e vias para ciclistas (IMAGEM 29), e também podemos acessar os modos de visualização do


IMAGEM 28

IMAGEM 29

mapa, via imagens de satélite ou Google Earth – outro serviço da empresa Google. Essas funções dão ao usuário maior controle sobre a forma que o aplicativo se comporta na continuidade do uso e o tipo de conteúdo que o interessa ver, evitando a poluição visual decorrente do excesso de informação, muitas vezes desnecessárias ao usuário.

IMAGEM 30

Pensando em usabilidade um ponto positivo visto na pesquisa por locais do Google Maps é que ele se baseia na localização atual do smartphone, fazendo com que o usuário não precise se localizar (IMAGEM 30). Essa função é muito inteligente quando pensamos nos possíveis contextos que o aplicativo estará sendo utilizado, contextos em que o usuário não poderá 47


ou não conseguirá localizar-se, seja por ausência de informação ou por exigir uma resposta rápida do aplicativo. Na tela inicial do Google Maps visualizamos uma abordagem diferente do propósito apresentado em outros aplicativos GPS, ao invés de mapas ou rotas, o aplicativo traz para o usuário pontos de interesse próximos e serviços como táxi, correios, hospital, floriculturas, farmácias, supermercados, posto de gasolina e muitos outros (IMAGEM 31 / 32). Ao explorarmos os locais IMAGEM 31

48

IMAGEM 32

próximos somos direcionados para uma tela com as categorias de locais para comer, beber, fazer compras, se divertir e dormir (IMAGEM 33), ao clicarmos em uma delas podemos ver os tipos de estabelecimentos (ex.: restaurantes, pizzarias ou cafés) com as opções mais próximas (IMAGEM 34). Um detalhe interessante do aplicativo é que ele não possui tutorial quando o utilizamos pela primeira vez, podemos navegar por seus menus e telas superficialmente, entretanto após IMAGEM 33

IMAGEM 34


IMAGEM 37

a primeira utilização de fato somos introduzidos a uma espécie de aula prática, onde recebemos as instruções das ações a serem realizadas e as repetimos na prática (IMAGEM 35 / 36). Outro aspecto muito inteligente quando pensamos na experiência do usuário é a forma que o Google Maps apresenta seus tutoriais, pois ao invés de colocar inúmeras informações sobre como usar o aplicativo de uma única vez ao usuário, ele os apresenta, conforme a tela, a função executada, o estágio de imersão e a profundidade do uso, as instruções são dispostas de maneira fácil e leve de serem aprendida (IMAGEM 37). IMAGEM 35

IMAGEM 36

49


Ao explorarmos o mapa com os pontos de interesse próximos, navegamos de forma fluida pelas opções, conforme aprendemos no tutorial, sem sair da visualização do mapa (IMAGEM 38 / 39). Junto com o nome dos estabelecimentos são apresentadas duas informações apenas, a avaliação do local baseado na votação de outros usuários e o tempo necessário para se chegar ao local.

IMAGEM 38

IMAGEM 39

A hierarquia das informações e o fluxo de navegação do aplicativo merecem destaque pela inteligência que foram projetados, pois se evidencia um pensamento não só estético e funcional, mas igualmente na experiência do usuário. Durante a utilização nos deparamos com telas que propiciam fluidez no uso, como visto nas IMAGENS 40, 41, 42 e 43, a sequência lógica permite ao usuário, em cada etapa, adentrar na complexidade da informação, assim, conforme o mesmo avança em suas escolhas, o aplicativo avança a informação em especificidade. O entendimento do aplicativo de que nem tudo precisa estar explícito ou de que a superficialidade basta, o torna efetivo em termo ergonômicos, podemos citar Jordan que nos expõe: “A efetividade geralmente é observada em termos de finalização de uma tarefa e também em termos de qualidade do resultado obtido.” (apud MONT’ALVÃO, 2008, p. 23). Um recurso muito inteligente, e diferente dos outros aplicativos GPS, que o Google Maps tem é o entendimento do gosto e das preferências do usuário através de seu histórico, isso faz com que o aplicativo sugira rotas automaticamente de trajetos feitos com certa frequência e locais que o usuário possa ter se interessado ou tem interesse. Mais uma vez o foco do Google Maps não é apenas fornecer funcionalmente seu serviço, mas propiciar experiências surpreendam que o usa, pois “satisfeitos os requisitos de funcionalidade e usabilidade, o que

50


IMAGEM 40

IMAGEM 41

IMAGEM 42

IMAGEM 43

se objetiva alcançar com o projeto são as necessidades psicológicas e sociológicas do usuário, como suas necessidades de pertencer, alcançar, ser competente e independente (no uso do sistema), tornando a interação uma experiência prazerosa.” (HANCOCK et al. apud MONT’ALVÃO, 2008, p. 27).

Esses aspectos ergonômicos, de arquitetura da informação e de usabilidade, mesmo que muitas vezes menosprezados durante o projeto do produto, influem diretamente na experiência do usuário com o aplicativo, pois conforme Johnson & Wiles, “[...] se a experiência não for positiva não há motivação por parte do usuário em interagir com o sistema, e a sua utilização não será considerada uma experiência prazerosa ou de lazer.” (apud MONT’ALVÃO, 2008, p. 28).

Assim, concluímos que o Google Maps se destaca como um aplicativo bem distinto dos demais, principalmente por almejar que o usuário tenha uma experiência única que o faça utilizá-lo novamente, que o faça dar continuidade. De certa forma o esperado é que o uso se torne um gráfico crescente, à medida que o usuário tem experiências mais ele o utilizará, fornecendo, assim, mais informação, fazendo com que o aplicativo propicie novas experiências baseada em um conhecimento mais complexo e denso acerca de seu usuário.

51


IMAGEM 44

IMAGEM 19

6.4 Moovit Moovit é um aplicativo direcionado para usuários de transporte público que tem como objetivo facilitar a utilização dos meios de transporte, por meio de informações fornecidas pelos usuários e informações em tempo real. Análise O Moovit possui apenas duas etapas de inicialização, sendo apenas necessário optar pela ativação, ou não, do GPS e visualizar as funções presentes na tela inicial. A interface é bem simples quanto à quantidade de elementos, encontramos apenas a barra superior com os botões, o personagem do usuário em laranja, os outros usuários em amarelo, as informações do mapa e os pontos de transporte público (IMAGEM 44). As cores são harmonizadas, pois encontramos cores de contraste total trabalhando juntas, como laranja e azul. A laranja é caracterizada às informações principais como títulos e destaques, as gradações de preto e o azul são complementares, auxiliando na hierarquização das demais informações. Os ícones são muito bem construídos, possuem uma linguagem única, simples, sem ornamentos e objetiva para que o usuário obtenha a informação rapidamente (IMAGEM 45). Um ponto aparentemente pequeno é a função de alertas, nessa opção o aplicativo apresenta as informações sobre o 52

transporte público, como alterações de itinerário e linhas especiais para eventos (IMAGEM 46). Essa função é muito útil para o usuário, pois influencia em seu deslocamento e em sua opção pelo melhor meio de transporte, entretanto, os alertas por si só são pouco relevantes se não estiverem inseridos durante o cálculo e apresentação do trajeto. Na função “Mapas de Linha” podemos encontrar o download de um arquivo PDF com os mapas das linhas do metrô, mas o recurso pode ser considerado pobre perto das possibilidades


dadas pelo aplicativo (IMAGEM 47). Existe uma função, no próprio aplicativo, chamada “Horário” (IMAGEM 48) que permite pesquisar informações das linhas de ônibus, trem e metrô, cuja poderia estar vinculada a “Mapas de Linha”, inclusive, seria interessante se dentro dele pudéssemos consultar não só informações, mas os trajetos nas linhas. Dentro da função “Planejador de Viagens” pode ser configurada a distância máxima de caminhada e os tipos de transporte IMAGEM 46

IMAGEM 47

que o usuário deseja andar, opções muito válidas quando entendemos que cada indivíduo é tem suas limitações e gostos diferente dos outros (IMAGEM 49). Direcionando-nos para aspectos ergonômicos, vemos que os nomes das ruas ficam desproporcionais durante a na visualização do mapa quando nos aproximamos ou nos afastamos. Supomos que o objetivo fosse favorecer a leitura do texto independente da distância, entretanto a falta de planejamento IMAGEM 48

IMAGEM 49

53


do comportamento dos textos faz com que os nomes das ruas, principalmente em cruzamentos, se encontrem, dificultando e confundindo a leitura do usuário (IMAGEM 50) e que ao girarmos o mapa percebemos que os textos ficam de ponta cabeça (IMAGEM 51). Por menores que pareçam, os detalhes impensados fazem diferença durante o uso, pois “(...) a ênfase da ergonomia está na prevenção de dores e sofrimento dos usuários na interaIMAGEM 50

54

IMAGEM 51

ção com os sistemas cotidianos (...)” (HANCOCK et al. apud MONT’ALVÃO, p. 26). O cuidado com os detalhes contribui para que o usuário não se frustre ou desista durante o uso do produto, são eles que garantem a fluidez de uma experiência agradável, pois conforme Csikszentmihalyi essa experiência é “(...) um estado mental (cognitivo) de operação em que a pessoa está completamente imersa em uma atividade que envolve processos como interpretação, recuperação de memória e associações.” (RUSSO; HEKKERT, p. 37).

Ergonomia e usabilidade trabalhando em conjunto, por uma interação fluida do usuário. Ao nos dirigirmos para a pesquisa do trajeto, vemos que a interface é objetiva e com poucas etapas para a busca, um ponto positivo para quem visa praticidade e velocidade no uso (IMAGEM 52). Entretanto, um problema encontrado foi o excesso de propagandas durante a visualização dos resultados da busca pelos endereços (IMAGEM 53), a poluição de informações geradas pelo aplicativo confunde e retarda a escolha do usuário. Posterior à pesquisa, somos direcionamos para “Rotas Sugeridas”, uma tela que nos mostra as opções de rota disponíveis para chegar ao destino final. É apresentado o tempo do deslocamento, a distância a ser caminhada, breves informações sobre os meios de transporte a serem pegos e o horário de saída. As informações são bem claras e fáceis de serem entendi-


IMAGEM 52

IMAGEM 53

IMAGEM 54

das, porém um ponto deve ser ressaltado, o horário de saída em certos momentos já se passou. No exemplo da (IMAGEM 54) o horário de saída no aplicativo é as 12h07, entretanto o horário atual do smartphone era 12h09. Isso é ruim, principalmente quando entendemos que o horário de saída do usuário deve ser calculado baseado em seu horário atual, independente se o tempo de deslocamento ainda o permite concluir o trajeto. O usuário precisa estar ciente de que o trajeto ainda é possível, mesmo saindo posterior ao horário de saída. 55


Uma função muito interessante é a sugestão de outra rota para o trajeto pesquisado. A contribuição para o funcionamento mais eficiente do aplicativo faz com que aquele que contribui se valha da contribuição de outro posteriormente, assim como explicitado neste projeto, dentro de transporte público dialogar é pensar em comunidade, é beneficiar e, consequentemente, ser beneficiado. Um erro de usabilidade foi a inconstância desses botões (IMAGEM 55 / 56), eles aparecem com texto e cores IMAGEM 55

56

IMAGEM 56

diferentes, sendo reconhecidos apenas pelo ícone. Entendemos que o produto deve se moldar conforme o uso, Niemeyer nos explica que, “Ademais, graças à tecnologia corrente, os produtos não estão obrigados a um papel passivo e estável: eles podem se modificar no processo de interação com destinatário cujos sentimentos e expectativas afetem e determinem alterações no desempenho do produto.” (2008, p. 52).

Durante o trajeto, a visualização das etapas e do caminho a ser percorrido foi muito bem construída e estruturada. A praticidade de se avançar de etapa apenas passando para a próxima informação e, ao mesmo tempo, ser direcionado para o outro local do mapa foi muito positiva (IMAGEM 57 / 58 / 59). Junto a isso, a pré-visualização do “próximo passo” é muito útil, pois deixa o usuário ciente do que terá que fazer após a conclusão de sua tarefa. O Moovit é um aplicativo bem completo e cumpre grande parte de seu propósito, como facilitar o uso do transporte público, entretanto em alguns pontos sofre com a falta de cuidado com aspectos que concernem a ergonomia e usabilidade. Ele auxiliará grandemente o desenvolvimento deste projeto, pois contempla objetivos semelhantes e retrata novas possibilidades.


IMAGEM 57

IMAGEM 58

IMAGEM 59

57


Referências Projetuais

7. 7.1

Flat design

Como resultado da análise dos aplicativos similares, um conceito muito presente foi o Flat design. Esse tipo de linguagem e abordagem do design traz um enfoque maior na informação, como afirma o consultor de UX, Edu Agni: “(...) o Flat Design nos traz uma proposta mais minimalista, com cores chapadas, tipografia nítida e bons contrastes, aonde a estética privilegia a compreensão e não interfere nos conteúdos, facilitando inclusive os filtros de informação.”¹

Para o contexto e objetivo do projeto, usuários pesquisando e consultando a informação rapidamente, o privilégio à informação é crucial, pois o mesmo deverá prover a absorção do conteúdo para tomadas de decisão rápida e precisa. 58

A partir disso, o conceito foi incorporado ao projeto, direcionando toda a hierarquia e estética para alcançar a rápida absorção e uma clara compreensão da informação.

7.2

Pregnância da Informação

Valendo-se da lei da Pregnância da Forma da Gestalt, foi aplicada a pregância à informação na projetação da interface. Assim, a consistência, clareza e objetividade se tornaram pilares para as escolhas. João Gomes Filho, autor do livro "Gestalt do Objeto", expõe mais sobre a importância da pregnância: “(...) quanto melhor for a organização visual da forma do objeto e mais rápida e fácil for a compreensão da leitura, maior será o índice de pregnância. (...) Não pode suscitar dúvidas!” ²


Essas referências podem ser vistas nas imagens abaixo, com exemplos de Flat Design e de Pregnância da Informação na interface do Moovit e do Google Maps.

¹ http://www.uxdesign.blog.br/design-de-interfaces/flat-design-recultura-interface/ ² http://www.joaogomes.com.br/7-Ges-TEORIA-palestra-OUTUBRO-06%20ok.pdf Acesso em: 03 de novembro de 2014

59


Desenvolvimento do Projeto

8.

Neste capítulo serão apresentadas as etapas do processo de desenvolvimento da interface do aplicativo, onde inicialmente será produzida a parte de Arquitetura da Informação, contendo o Fluxograma, o “Rabiscoframe” e o Wireframe. Para compreendermos melhor essas três etapas serão expostas breves explicações sobre cada uma, pois esses parâmetros subsidiarão as escolhas estéticas e as possibilidades de interação da interface.

60

8.1 Fluxograma Para entender este conceito traremos a citação de Fabricio Teixeira, Experience Design Director (UX), como introdução: “Fluxogramas são fundamentais para o olhar realista do projeto, pois além de se compreender os caminhos ainda permite encontrar fluxos mais objetivos para a visualização de determinadas seções ou telas.”¹

O Fluxograma torna tangível e visível os possíveis fluxos do usuário dentro do sistema do aplicativo, pois com ele há, não só um controle sobre como serão as interfaces a serão produzidas, mas sobre quantas e quais serão necessárias. Essa é uma etapa do projeto muito importante que auxilia na organização e estruturação, ela será o “chão” para todo o resto do aplicativo.

¹ http://arquiteturadeinformacao.com/usabilidade/entregaveis-de-arquitetura-de-informacao/ Acesso em: 20 de maio de 2014


FLUXOGRAMA DO APLICATIVO IMAGEM 60

61


8.2 Rabiscoframe

. Boas Vindas

Mais uma vez nos valemos dos argumentos de Fabricio Teixeira, que nos explica em seu site dizendo que:

Nesta etapa o usuário poderá fazer o Login no aplicativo ou se Cadastrar, caso seja a primeira vez do usuário. Fluxograma: IMAGEM 61 Rabiscoframe: IMAGEM 62

“A expressão é uma mistura bem humorada do termo sketch (esboço, rabisco) com o tão conhecido termo wireframe. Em muitos times de desenvolvimento já se tornou parte essencial do processo de desenho de interfaces, especialmente naquele momento do projeto em que as ideias começam a tomar forma (...)”²

IMAGEM 61

O “Rabiscoframe” viabiliza de forma prática a organização espacial dos elementos na tela, possibilita-nos elaborar propostas variadas de forma rápida, e nos ajuda a construir as visualmente o fluxograma, compondo a tela com quadrados representando botões, imagens, funções, mapas, ou o que quer que necessitemos. Assim, esse recurso foi introduzido à metodologia do projeto, principalmente, por agregar praticidade e rapidez ao processo de estruturação da interface do aplicativo. Os seguintes "Rabiscoframes" serão apresentados juntamente com partes do Fluxograma, exemplificando a importância dos dois na etapa inicial do projeto.

62

² http://arquiteturadeinformacao.com/recursos/metodologia/o-valor-do-rabiscoframe/ Acesso em: 20 de maio de 2014


IMAGEM 62

63


. Cadastro e "Primeira Vez" Partindo da tela de Boas Vindas o usuário poderia ser destinado tanto para o Cadastro, quanto para a tela de instruções de Primeira Vez. Fluxograma: IMAGEM 63 / 64 Rabiscoframe: IMAGEM 65 / 66 IMAGEM 63

64

IMAGEM 64


IMAGEM 65

IMAGEM 66

65


. Home A Home será a tela mais acessada pelo usuário, pois será nela que o aplicativo iniciará, assim, as funções dispostas são objetivas e poucas, a fim de que o usuário tenha acesso rápido ao que realmente precisa. Fluxograma: IMAGEM 67 Rabiscoframe: IMAGEM 68

IMAGEM 67

66


IMAGEM 68

67


IMAGEM 69

. Configurações As Configurações foram pensadas para atender da forma mais rápida a busca pela função do usuário. No estudo 2A os tamanhos das caixas variam conforme a importância, sendo maiores os mais utilizados, e segundo a proximidade do campo de alcance confortável do dedo, evitando que haja desconforto durante o touch. Fluxograma: IMAGEM 69 Rabiscoframe: IMAGEM 70 IMAGEM 70

68


. Trajetos Editados Em Trajetos Editados o usuário poderá criar, editar ou excluir trajetos que ele sugeriu para as rotas que realizou. Visando eliminar edições erradas todos os trajetos editados serão obrigatoriamente utilizados pelo aplicativo do usuário durante o cálculo do trajeto, aquilo que ele editar será utilizado. Fluxograma: IMAGEM 71 Rabiscoframe: IMAGEM 72

IMAGEM 71

IMAGEM 72

69


IMAGEM 74

. Todos os Eventos IMAGEM 73

70

Com Todos os Eventos o usuário poderá agendar locais com data e horário, desta forma, quando o evento estivesse próximo o aplicativo sugeriria o melhor horário para chegar ao local agendado. Isso evitará com que o usuário precise pesquisar como chegar ou que horas sair, pois o próprio aplicativo fará. Fluxograma: IMAGEM 73 Rabiscoframe: IMAGEM 74


. Favoritos e Tag Dentro de Favoritos será possível visualizar o local do ponto favorito no mapa, juntamente com seu nome. Seu foco é agilizar o acesso do usuário a determinados destinos comumente traçados, como sua casa, trabalho ou faculdade. Em Tag o usuário poderá adicionar e remover gostos e preferências, como café, ou, quadrinhos, e durante o cálculo do trajeto o aplicativo sugerirá pontos de interesse. Assim, o tempo de espera é diminuído através da ida do usuário a esses locais. Fluxograma: IMAGEM 75 Rabiscoframe: IMAGEM 76 IMAGEM 75

IMAGEM 76

71


IMAGEM 77

. Você Nesta tela o usuário poderá acessar e inserir observações a seu respeito, como uma possível deficiência física ou problema de saúde. Essas observações, assim como a função "Velocidade Média de Caminhada" igualmente presente na tela "Você", dão ao aplicativo um cálculo mais preciso do tempo e do melhor trajeto para cada perfil de usuário. Fluxograma: IMAGEM 77 Rabiscoframe: IMAGEM 78 IMAGEM 78

72


IMAGEM 80

. Configuração de Conta

IMAGEM 79

Dentro de Configuração de Conta o usuário terá acesso a edição de seus dados básicos, como Nome, Senha e Email. Fluxograma: IMAGEM 79 Rabiscoframe: IMAGEM 80

73


. Tutorial, Suporte e Sobre Dentro da tela Tutorial o usuário encontrará uma introdução geral ao sistema do aplicativo. Prevendo que possivelmente podem surgir dúvidas individualizadas acerca do aplicativo, lições sobre assuntos específicos, como as funções e recursos, serão disponibilizadas. Em Suporte será disposta uma tela para reportar eventuais problemas do aplicativo, com gêneros pré-definidos a fim de facilitar e padronizar as mensagens enviadas. Na tela Sobre estará contido as informações sobre os desenvolvedores do aplicativo. Fluxograma: IMAGEM 81 Rabiscoframe: IMAGEM 82

74

IMAGEM 81


IMAGEM 82

75


IMAGEM 84

. Visualização do Mapa Durante a Visualização do Mapa estará disposto na tela a etapa atual com acesso às próximas, o trajeto a ser percorrido, a posição do usuário no mapa e o Menu de Preferências. Fluxograma: IMAGEM 83 Rabiscoframe: IMAGEM 84

IMAGEM 83

76


IMAGEM 86

. Menu de Preferências da Visualização do Mapa Dentro da tela de Visualização do Mapa o usuário poderá acessar um menu com preferências durante o trajeto, contendo: adicionar trajetos aos favoritos, modo de visualização, objetivo do trajeto e sugestão de trajeto. Fluxograma: IMAGEM 85 Rabiscoframe: IMAGEM 86

IMAGEM 85

77


. Sugestão de Trajeto

IMAGEM 87

A Sugestão de Trajeto é uma tela derivada de Trajetos Editados e está presente no Menu de Preferências da Visualização do Mapa, dentro dela o usuário poderá sugerir um trajeto que considere melhor para a rota que realizou. Assim, como dito anteriormente, objetivando eliminar edições falsas ou erradas, todos os trajetos editados pelo usuário serão obrigatoriamente utilizados pelo seu aplicativo durante os cálculos. Fluxograma: IMAGEM 87 Rabiscoframe: IMAGEM 88

IMAGEM 88

78


8.3 Wireframe

. Referência das imagens

Uma etapa muito importante durante o desenvolvimento de interfaces são os wireframes, que tem como finalidade, segundo Santa Rosa e Moraes, "(...) fornecer um modo rápido de projetar, avaliar e interagir na maneira como deve ser feito o layout do conteúdo e da funcionalidade do site.” (2010, p. 93). É nessa etapa que fazemos a prevenção de erros, os testes de usabilidade simples (como tamanho da área de toque) e verificamos a consistência dos elementos, evitando refazer a interface visual a cada alteração. Por meio de quadrados cinza organizamos, estruturamos e hierarquizamos a informação que há de vir, aplicando posteriormente a parte visual/gráfica. Durante a produção dos wireframes percebeu-se a necessidade de modificar, acrescentar e retirar algumas nomenclaturas, telas e funções do fluxograma conforme o avanço do projeto.

IMAGEM 89 - Boas Vindas IMAGEM 90 - Login IMAGEM 91 - Home IMAGEM 92 / 93 - Configurações IMAGEM 94 / 95 / 96- Configurações (Interação) IMAGEM 97 / 98 - Minhas Tags IMAGEM 99 /100 - Meus Locais IMAGEM 101 / 102 - Meus Eventos IMAGEM 103 / 104 - Trajetos Sugeridos IMAGEM 105 / 106 - Configuração de Conta IMAGEM 107 - Suporte IMAGEM 108 - Sobre IMAGEM 109 - Cadastro IMAGEM 110 - Começar Tour IMAGEM 111 (...) 118 - Tour IMAGEM 119 - Começar a Usar IMAGEM 120 - Home (Primeira vez) IMAGEM 121 / 122 - Pesquisa de Local IMAGEM 123 - Dashboard IMAGEM 124 - Menu IMAGEM 125 - Visualização do Mapa IMAGEM 126 - Novo Fluxograma

79


80

IMAGEM 89

IMAGEM 90

IMAGEM 91

IMAGEM 92

IMAGEM 93

IMAGEM 94

IMAGEM 95

IMAGEM 96


IMAGEM 97

IMAGEM 98

IMAGEM 99

IMAGEM 100

IMAGEM 101

IMAGEM 102

IMAGEM 103

IMAGEM 104

81


82

IMAGEM 105

IMAGEM 106

IMAGEM 107

IMAGEM 108

IMAGEM 109

IMAGEM 110

IMAGEM 111

IMAGEM 112


IMAGEM 113

IMAGEM 114

IMAGEM 115

IMAGEM 116

IMAGEM 117

IMAGEM 118

IMAGEM 119

IMAGEM 120

83


IMAGEM 121

84

IMAGEM 125

IMAGEM 122

IMAGEM 123

IMAGEM 124


NOVO FLUXOGRAMA IMAGEM 126

85


Resultado Final

9. 9.1

Marca e elementos gráficos

Antes de projetar o design da interface, foi criada essa pré-etapa para auxiliar e melhor fundamentar as decisões visuais. Nela foram desenvolvidos a marca do aplicativo, o naming (nome da marca), a paleta de cor, a família tipografia e os ícones.

. Naming Naming é o processo de escolha do nome da marca, ele traz personalidade e reconhecimento sonoro ao produto. Inicialmente foram definidos três parâmetros para a escolha do nome: ter uma pronúncia veloz, expressar pessoalidade e transmitir direta, ou indiretamente, o conceito de "meu trajeto", algo próprio e individual, assim como o aplicativo. 86

Durante os estudos, recorreu-se ao grego em busca da raíz das palavras e a partir disso surgiu a palavra "μου"(mô), ou, "mou", que quer dizer "meu". Unindo a palavra "mou" com a letra "t" de trajeto surgiu o nome da marca:

mout (môtchi) μου + trajeto

meu + trajeto

. Marca Com o naming definido o desenho da marca pode pautar melhor seus caminhos e decisões. O objetivo foi retratar figurativamente essa pessoalidade e sonoridade do nome. A primeira etapa adotada foi a criação de um personagem


com características amigáveis e pessoais, porém de uma forma que não o limitasse a uma linguagem muito restrita, que pudesse ser reconhecido por grande parte dos perfis de usuário do público alvo (IMAGEM 127).

. Paleta de Cor

G060 R020

B070

G200 R000

B150

G235

A etapa seguinte foi a criação do logotipo e sua união com o personagem. A tipografia Matiz foi escolhida, por ser forte, estruturada e ao mesmo tempo pessoal. (Ao lado a marca em suas duas versões para aplicação)

R235

IMAGEM 127

B235

As cores foram escolhidas para que trouxessem pessoalidade ao aplicativo, confiança (por ser algo novo) e vivacidade. O branco e/ou cinza claro são colocados em destaque e maior quantidade na interface para criar respiro visual. O azul escuro traz peso visual, contrastando com o branco/ cinza claro, sem carregar a tela tanto quanto o preto. O verde-água, por fim, reforça a vivacidade através de sua alta saturação e luminosidade.

87


. Família Tipográfica

. Ícones

Por se tratar de um aplicativo para o sistema operacional Android, a tipografia escolhida foi a Roboto, fonte desenvolvida por Christian Robertson do Google, criada em 2011 especificamente para telas de alta resolução e para as necessidades do Design de Interface. Hoje a Roboto é recomendada no próprio guia de estilo do Google¹. Além da recomendação, a escolha da Roboto se deu por mais dois aspectos: • Tipografia sans-serif: propicia uma melhor visualização em telas com baixa resolução; • Variedade de pesos: ajuda na criação da hierarquia visual;

Os ícones são detalhes muito importantes dentro de uma interface, principalmente porque sintetizam textos através de pictogramas. Essas representações visuais tendem a prezar pela universalidade da forma, a fim de que todos entendam e compreendam a informação sem a necessidade de ler. No aplicativo mout os ícones seguiram a linguagem do Flat design (conforme explicado na página 58), uma grande referência vista nos aplicativos similares analisados, por isso os ícones são bidimensionais, têm cantos arredondados e são criados a partir de formas simples e reconhecíveis. Suas cores foram definidas pela paleta de cor (ver página 87) e variam conforme a cor do fundo aplicado. Exemplo de aplicação dos ícones em diferentes fundos:

Roboto

*

AaBb123 A partir desses aspectos pontuados a Roboto foi adotada como a família tipográfica do aplicativo.

88

¹ http://developer.android.com/design/style/typography.html Acesso em: 08 de novembro de 2014

* Depende do contexto


MODO DE VISUALIZAÇÃO

SOL

NUBLADO

CHUVA FRACA

CHUVA FORTE

TEMPORAL

CONFIGURAÇÕES

DASHBOARD

LIMITAÇÃO

LOCAL SUGERIDO

GPS

USUÁRIO

SENHA

MENU

MEUS EVENTOS

MEUS LOCAIS

OBJETIVO DO TRAJETO

BUSCA

SOBRE O MOUT

SUPORTE

CONFIGURAÇÃO DA CONTA

MINHAS TAGS

SUGESTÃO DE TRAJETO

A PÉ

ÔNIBUS

METRÔ

TREM

ÍCONES DO APLICATIVO

89


9.2

Interface final

Todas essas etapas anteriores foram cruciais para a projetação, desenvolvimento e criação da interface das telas, durante o processo muitos erros e problemas foram sanados antes mesmo de atingir a parte gráfico-visual. Ainda que nesse momento os alicerces do projeto estejam bem consolidados, a usabilidade e a ergonomia não podiam ser deixadas de lado, pois elas são parte integrante no desenvolvimento da interface. Por isso, Badre (2002 apud SANTA ROSA; MORAES, p. 20, 2010) nos diz que “(...) é importante lembrar que é possível oferecer uma expressão estética sofisticada sem violar os limites da usabilidade”. Assim, foi preciso equilibrar a usabilidade/ergonomia com a expressão estética para que um não lançasse mão do outro. Ressaltamos que, conforme descrito na página 79 e 85, o fluxograma do aplicativo foi modificado ao longo do processo, por isso algumas telas deixaram de existir e outras foram criadas. Durante o desenvolvimento da interface o Flat design foi amplamente explorado, unindo-se com recursos de profundidade, como sombras. A tipografia foi responsável pela hierarquização da informação através de seus pesos, juntamente

com as cores que trouxeram respiro e divisão visual. Os ícones apareceram como suporte textual e até mesmo, em alguns casos, como substitutos do texto. Sua composição através de formas simples comunica de maneira mais rápida a informação e auxiliam na memorização. O conceito de call-to-action, que segundo Jacob Gube "(...) é um termo usado para elementos na página do site que solicitam uma ação do usuário"¹, foi aplicado exaustivamente em todas as telas para que a ação desejada sempre estivesse óbvia. Outro conceito chamado just in time education, uma espécie de ensino em tempo real, foi aplicado durante o "tour" feito pelo novo usuário (ver página 102). Luke Wroblewski, Diretor de Produtos do Google, esclarece que: "A dica para se obter uma correta 'just in time education' é mostrar informações úteis quando as pessoal realmente precisam delas, e não quando não precisam." Com tudo isso desenvolvido, a interface pode ser consolidada através de um sistema, onde as informações referenciais aparecem no topo (nome da tela, menu, sair), seguido de uma call-to-action primária (pesquisar e adicionar), tendo abaixo o conteúdo principal (eventos, locais, mapa, etc.), e por fim uma call-to-action secundária (salvar, criar, sugerir).

¹ http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/ (tradução nossa)

90

² http://www.lukew.com/ff/entry.asp?1786 (tradução nossa) Acesso em: 10 de novembro de 2014


IMAGEM 128

IMAGEM 129

IMAGEM 130

IMAGEM 131

IMAGEM 132

IMAGEM 133

. Fazer Login Nessa primeira etapa podemos ver um simples login, porém que prevê os possíveis erros. Após surgir o erro, o aplicativo avisa ao usuário o campo específico que está incorreto para que o usuário saiba o quê precisa ser consertar (IMAGEM 132 / 133).

91


IMAGEM 134

IMAGEM 135

IMAGEM 136

. Configurações Dentro do menu de configurações algumas interações foram pensadas para facilitar e simplificar o acesso à informação. Alguns botões possibilitam ao usuário não precisar entrar em outra tela para modificar a informação ou opção; ele, na mesma tela, toca e altera (IMAGENS 136 / 137 / 138).

92

IMAGEM 137

IMAGEM 138


IMAGEM 139

IMAGEM 140

IMAGEM 142

IMAGEM 143

IMAGEM 141

. Minhas Tags Ao adicionar a tag o usuário fornece ao aplicativo seus gostos e preferências. Elas são oriundas de um banco de tags previamente determinado pelo próprio aplicativo, por isso é possível fazer o autocomplete durante a pesquisa e ter um controle maior das palavras adicionadas (IMAGEM 141). A partir dessas tags o aplicativo pode sugerir locais de interesse durante o trajeto do usuário.

93


IMAGEM 144

IMAGEM 145

. Meus Locais O "Meus Locais" tem como função salvar os trajetos favoritos e/ ou mais utilizados. O usuário pode adicionar quantos locais quiser apenas preenchendo o nome e o endereço. O autocomplete auxilia o usuário na busca pelo endereço desejado, evitando a necessidade de sair do aplicativo para pesquisar (IMAGEM 147 / 148).

94

IMAGEM 147


IMAGEM 146

IMAGEM 149

IMAGEM 150

IMAGEM 151

IMAGEM 148

IMAGEM 152

IMAGEM 153

IMAGEM 154

95


96

IMAGEM 155

IMAGEM 156

IMAGEM 157

IMAGEM 158

IMAGEM 159


IMAGEM 160

IMAGEM 161

IMAGEM 162

IMAGEM 163

IMAGEM 164

IMAGEM 165

. Meus Eventos Dentro de "Meus eventos" o usuário pode agendar seus compromissos apenas inserindo o nome do evento, o endereço, a data e o horário (IMAGEM 156). Durante a etapa de criação do evento o aplicativo busca proporcionar uma boa experiência ao usuário através de detalhes como os teclados específicos (IMAGEM 160) e as funcionalidades internas (IMAGEM 159). O aplicativo prevê a variação no tamanho dos nomes dos eventos variando a dimensão dos elementos conforme o tamanho do conteúdo (IMAGEM 162 / 165).

97


IMAGEM 166

IMAGEM 167

IMAGEM 168

IMAGEM 169

IMAGEM 170

IMAGEM 171

. Trajetos Sugeridos Nessa área do aplicativo o usuário pode sugerir trajetos que conheça e sejam mais práticos, econômicos e/ou rápidos. Os trajetos sugeridos são obrigatoriamente utilizados pelo próprio usuário, evitando falsas sugestões. Conforme a sugestão do usuário é possível determinar o local de partida e o destino, especificar o meio de transporte, escolher a linha do meio e adicionar etapas (IMAGEM 168). Ainda durante a sugestão o usuário encontra campos específicos para cada informação requerida (IMAGEM 168 - 171). Todos os campos de busca trabalham com autocomplete, puxando os dados dos bancos da SPTrans, CPTM, Metrô e EMTU (IMAGEM 174 - 176). 98


IMAGEM 172

IMAGEM 173

IMAGEM 174

IMAGEM 175

IMAGEM 176

IMAGEM 177

IMAGEM 178

IMAGEM 179

99


IMAGEM 180

IMAGEM 181

IMAGEM 182

IMAGEM 182

IMAGEM 183

IMAGEM 184

. Configuração de Conta Nas configurações da conta o usuário encontra três alterações simples: nome, email e senha. Durante a edição das informações a senha conta com o botão "mostrar senha" (IMAGEM 181 / 182), facilitando o processo, evitando erros e repetições.

. Suporte Nessa tela o usuário pode reportar possíveis erros ou bugs do aplicativo aos desenvolvedores (IMAGEM 182 / 183).

. Sobre o Mout Breve descrição sobre a criação do aplicativo (IMAGEM 184).

100


IMAGEM 185

IMAGEM 186

. Cadastro O cadastro segue o padrão: nome, email e senha. Durante sua projetação foi levantada a preocupação ergonômica com a área de toque, para que o usuário consiga visualizar os campos de digitação mesmo com o teclado acionado (IMAGEM 186).

IMAGEM 187

101


IMAGEM 188

IMAGEM 189

IMAGEM 190

IMAGEM 191

IMAGEM 192

IMAGEM 193

. Tour O Tour inicial, posterior ao cadastro, apresenta o aplicativo (IMAGEM 189 / 190) e recolhe dados básicos para os primeiros cálculos de trajeto (IMAGEM 191 / 192). Através do "just in time education" (ver página 90) o tour introduz o usuário às tags. Mesmo estando no tour o usuário sempre pode "pular essa parte", pois o botão está localizado na parte inferior das telas. Dentro do tour também são apresentadas às sugestões de locais de interesse próximos a sua localidade, baseado nas tags adicionadas (IMAGEM 196 -198).

102


IMAGEM 194

IMAGEM 195

IMAGEM 196

IMAGEM 197

IMAGEM 198

IMAGEM 199

103


IMAGEM 200

IMAGEM 201

IMAGEM 202

. Home (primeiro uso) No primeiro uso do aplicativo a home estará vazia, pois o usuário ainda não adicionou locais ou eventos (IMAGEM 200). Os locais e eventos podem ser adicionados por meio dos botões tracejados. À medida que os elementos forem acrescentados à home esses botões sumirão (IMAGEM 205).

. Pesquisa (depois) O mecanismo de pesquisa feita pela home propicia ao usuário duas opções: agora e depois (IMAGEM 203). Quando o "depois" é selecionado o aplicativo entende que deve sugerir a criação de um evento para aquele local. O usuário pode selecionar o nome, o horário, a data, e depois, criar o evento (IMAGEM 204). 104

IMAGEM 203

IMAGEM 204

IMAGEM 205


IMAGEM 206

IMAGEM 208

. Pesquisa (agora) Utilizando a opção "agora" da pesquisa da home o usuário é direcionado para o Dashboard, antes de visualizar o mapa (IMAGEM 208).

. Dashboard O "dashboard" é o quadro com as informações necessárias para o deslocamento do usuário. Nele contém o local de destino, o tempo estimado do deslocamento, o valor e o descritivo do trajeto com informações de cada etapa (IMAGEM 208).

IMAGEM 207

105


IMAGEM 209

IMAGEM 210

IMAGEM 211

. Menu O "menu" é um atalho para funções que podem ser constantemente alteradas: sugerir trajeto; meus locais; modo de visualização; objetivo do trajeto. Por isso ele está presente tanto no dashboard quanto na visualização do mapa (IMAGEM 209 / 214).

. Visualização do Mapa Posterior a pesquisa e o dashboard, o usuário é direcionado para o mapa aonde visualiza sua localização pelo ícone do "mout" (IMAGEM 217), os botões do dashboard e do menu, e a informação para a próxima etapa. Quando houver o "local de interesse" no mapa, um ícone verde com coração aparecerá na tela (IMAGEM 221 / 222). 106

IMAGEM 212

IMAGEM 213

IMAGEM 214


IMAGEM 215

IMAGEM 216

IMAGEM 217

IMAGEM 218

IMAGEM 219

IMAGEM 220

IMAGEM 221

IMAGEM 222

107


Conclusões Finais

10. 108

Desenvolver um projeto na área de design de interface foi uma experiência desafiadora, tanto pela mudança da minha concepção inicial à medida que me aprofundava no assunto, quanto pela complexidade das áreas e ciências que a tangenciaram ao longo do projeto. Estudar a área de interface é se deparar com um campo novo repleto de pesquisas em desenvolvimento e constantes descobertas, com uma gama enorme de materiais disponíveis para consulta na internet. O leque de sites e materiais consultados possibilitou um amadurecimento do projeto e um maior

pouco nos valemos de seus recursos, e o quanto precisamos avançar nas formas que projetamos interfaces, interações e experiências dos usuários. Ao contrário da superficialidade que área aparenta ter, o design de interface é, além do carácter estético, projetar a experiência e as interações do usuário com a interface. Pra mim, hoje, design de interface é não ser notado como solução, mas como complemento da função. Durante a elaboração da Fundamentação Teórica, ficou nítido que conhecer o contexto e a profundidade da inserção

conhecimento sobre as ferramentas utilizadas. Com toda certeza, estudar o design de interface é descobrir o quão permeado estamos por ele em nosso dia-a-dia, o quão

do projeto amplia suas possibilidades de alcance e força-nos a repensar ideias iniciais. Foram as pesquisas que abriram os caminhos para a elaboração de novas funcionalidades do apli-


cativo, foram elas que corroboraram as escolhas projetuais, e são elas que justificam a criação de mais um aplicativo GPS. Como o próprio nome diz, são elas que fundamentam as escolhas, sejam elas funcionais ou estéticas, e fazem com que o projeto saia da mera especulação do designer para solucionar a real necessidade das pessoas. Durante a etapa de análise de aplicativos similares a bagagem teórica trazida foi essencial para o questionamento maduro das interfaces e suas interações. As críticas saíram do nível superficial da estética e entraram em questões substanciais sobre usabilidade, ergonomia e experiência do usuário. Os resultados ajudaram a perceber erros graves que deveriam ser evitados e ferramentas interessantes que poderiam ser úteis ao aplicativo. Ao longo da parte prática, o exercício de se projetar pensando no usuário moldou e mudou as direções do projeto. Muitas coisas foram repensadas decorrentes desse exercício, vide o fluxograma (ver página 61 e 85), e em muitos casos as descobertas não vinham das pesquisas ou livros, mas de conversas com potenciais usuários do aplicativo. Acredito que essa falta de comunicação do designer com seu usuário, com aquela pessoa que utilizará sua interface, é prejudicial ao projeto, é como colocar toda sua confiança em algo não se sabe se é útil, eficiente e válido para quem usa.

Como disse anteriormente, design de interface é não ser notado como solução, mas como complemento da função. Assim concluo afirmando que projetar a interface do aplicativo foi simplificar complexidades, tornando dados, métodos e informações dispersas em interfaces inteligíveis, úteis, afetivas e simples às pessoas.

109


Referências Bibliográficas

11.

BARRY, Keith. How Smartphones Can Improve Public Transit. Wired Magazine; 04 de agosto de 2013 [acesso em 22 de outubro de 2013]. Disponível em: http://www.wired.com/autopia/2011/04/how-smartphones-can-improve-public-transit/ BRASIL, Agência. Ipea: brasileiro gasta em média 30 minutos para chegar ao trabalho. Terra; 24 de outubro de 2013 [acesso em 12 de março de 2014]. Disponível em: http://noticias.terra.com.br/brasil/ipea-brasileiro-gasta-em-media-30-minutos-para-chegar-ao-trabalho,31294ef654be1410VgnCLD 2000000dc6eb0aRCRD.html RUIC, Gabriela. Google inicia integração do Waze ao Maps. EXAME.com; 20 de agosto de 2013 [acesso em 28 de abril de 110

2014]. Disponível em: http://exame.abril.com.br/tecnologia/ noticias/google-inicia-integracao-do-waze-ao-maps Miyagawa, Mamoru. Legibilidade e Leiturabilidade – Qual a diferença?. Choco la Design; 18 de março de 2013 [acesso em 28 de abril de 2014]. Disponível em: http://chocoladesign.com/ qual-a-diferenca-legibilidade-e-leiturabilidade MONTEIRO, André; MACHADO, Leandro. Exceção, ônibus e metrô levam o mesmo tempo de Itaquera ao centro. São Paulo: Folha de S.Paulo; 11 de fevereiro de 2014 [acesso em 12 de março de 2014]. Disponível em: http://www1.folha.uol.com. br/cotidiano/2014/02/1410456-excecao-onibus-e-metro-levam-o-mesmo-tempo-na-viagem-de-itaquera-ao-centro.shtml


TERRA. Mudanças em linhas de ônibus causam confusão e protestos em SP. Terra; 28 de outubro de 2013 [acesso em 12 de março de 2014]. Disponível em: http://noticias.terra.com. br/brasil/cidades/mudancas-em-linhas-de-onibus-causam-confusao-e-protestos-em-sp,3fc899e4abef1410VgnVCM20000 099cceb0aRCRD.html VALLE, Caio do. Celulares poderão desbancar Bilhete Único. São Paulo: O Estadão de São Paulo; 22 de janeiro de 2013 [acesso em 16 de agosto de 2013]. Disponível em: http://www. estadao.com.br/noticias/impresso,celulares-poderao--desbancar-bilhete-unico-,987165,0.htm NORTHCOTT, Darren. The difference between Information Architecture and UX design. UX Booth; 21 de agosto de 2012 [acesso em 24 de outubro de 2013] Disponível em: http://www. uxbooth.com/articles/the-difference-between-ia-and-ux-design/ VADER, Vince. Um pouco de gamification . Update or Die; 18 de janeiro de 2013 [acesso em 12 de maio de 2014] Disponível em: http://www.updateordie.com/2013/01/18/um-pouco-de-gamification/ LEITE, Carlos; AWAD, Juliana di Cesare Marques. Cidades

sustentáveis, cidades inteligentes: desenvolvimento sustentável num planeta urbano. Porto Alegre: Bookman, 2012, p. 264. BAER, Kim; VACARRA, Jill. Information design workbook: graphic approaches, solutions, and inspiration + 30 case studies. Beverly, Mass.: Rockport, c2008, p. 239. REDIG, Joaquim. Não há cidadania sem informação, nem informação sem design. Revista Brasileira de Design da Informação, v.1, n.1, jan./dez. 2004, p. 47-56. IDEC. Transporte público, insatisfação coletiva. Revista do IDEC, n.180, set. 2013, p. 14-18. NIEMEYER, Lucy. Design Atitudinal: Uma abordagem projetual; In: Design, ergonomia e emoção. Rio de Janeiro: Mauad X: FAPERJ, 2008. RUSSO, Beatriz; HEKKERT, Paul. Sobre amar um produto: Os princípios fundamentais; In: Design, ergonomia e emoção. Rio de Janeiro: Mauad X: FAPERJ, 2008. MONT’ALVÃO, Cláudia. Hedonomia, Ergonomia Afetiva: Afinal, do que estamos falando?; In: Design, ergonomia e emoção. Rio de Janeiro: Mauad X: FAPERJ, 2008. 111


MAU, Bruce; LEONARD, Jennifer. INSTITUTE WITHOUT BOUNDARIES. Massive change. London: Paidon, 2007, p. 240. SANTA ROSA, José Guilherme; MORAES, Anamaria de. Avaliação e projeto no design de interfaces. Rio de Janeiro: 2AB, 2010, p. 223. LIMA-MARQUES, Mamede; MACEDO, Flávia. Arquitetura da informação: base para a gestão do conhecimento. In: TARAPANOFF, Kira (Org.). Inteligência, informação e conhecimento. São Paulo, 2006, p. 241-256.

112


113


TCC - Interface de Aplicativo GPS  

Criação da interface de aplicativo GPS focado em transporte público. Trabalho de Conclusão do Curso de Design pela Universidade Presbiterian...

Read more
Read more
Similar to
Popular now
Just for you