Cidade Expandida - FAU - USP · Cidade Expandida • TCC 2 • Design • FAUUSP • 2014 • Luiza Campanelli Marçal Vieira Palavras- Chave 2 Cibercultura, ... 7.2.2 Usabilidade

Cidade Expandida

Universidade de São PauloFaculdade de Arquitetura e UrbanismoDesign 2014

Interação informacional e afetiva no contexto urbano contemporâneo: uma proposta de aplicativo

Aluna: Luiza Campanelli Marçal Vieira 6517171Orientadora: Giselle Beiguelman

Cidade Expandida • TCC 2 • Design • FAUUSP • 2014 • Luiza Campanelli Marçal Vieira

2Palavras- Chave

Cibercultura,

Era da Conexão,

Cidade Expandida,

Design de Interface,

Realidade Aumentada,

Aplicativos


3Agradecimentos

Agradeço primeiramente à minha orientadora Giselle Beiguelman pela motivação e positividade nesta jornada;

Aos meus pais pelo amor, atenção e apoio em todas as esferas possíveis. Obrigada por exercerem com tanta maestria este papel na minha vida;

À minha irmã Mari agradeço pela amizade e irmandade de sempre, fico feliz por ver o quanto crescemos juntas;

Ao José pela compreensão e paciência neste período crítico. Melhores dias estão por vir!

Às Sardenhas, irmãs do coração, por mantermos nossa amizade passando por todas fases da vida, nos apoiando e amadurecendo juntas;

À Mariana Osone, um obrigada especial ela sabe o por quê;

À Galerinha do Mal, Luciana Heuko, Amanda Mota, Isabela Galle-go, Gabriela Martins, Luciana Fernandes, Patrícia Jenny, Daiana e Caroline Magalhães pela amizade, leveza, risadas, pela boa com-panhia nas noites mal dormidas de entregas, pelo conhecimento e sentimentos compartilhados nestes anos todos de faculdade;


4Resumo

O presente trabalho tem como tema principal a interação da cidade/ cidadão por meio das interfaces digitais. Inicialmente foi feito um recorte teórico buscando analisar o cenário atual da cidade e o modo como as mídias digitais, associadas à internet, participam das mudanças políticas e sociais nas metrópoles.

Foram mapeados exemplos de iniciativas que só foram possíveis no contexto dessa realidade emergente e analisadas esteticamente, como serviço e pela sua usabilidade. O objetivo desse estudo teórico e do mapeamento foi desenvolver um aplicativo para compartilha-mento e criação coletiva de guias culturais, tendo o centro de São Paulo como ponto de partida.

No desenvolvimento, chegou-se até a proposta do design de inter-face do aplicativo e suas principais funcionalidades. Ao final, será apresentada uma proposta de serviço que visa melhorar a relação cidadão com a cidade no seu momento de lazer.


5Abstract

This work has as main theme the interaction of the city and its citi-zens through digital interfaces. Initially a theoretical framework was done trying to analyze the current urban landscape and how digital media associated with the internet, participate in political and social changes in cities.

Examples of initiatives representing this criteria were mapped and analyzed aesthetically, in terms of service and usability. The pur-pose of this mapping and theoretical study was to develop an appli-cation for sharing and collective creation of cultural guides, taking as the starting point downtown São Paulo.

In the project development, a proposal for the application interface design and its main features is presented. In the end a proposal for a service that aims to improve the the citizens’ relationship with the city in their leisure time will be displayed.

Sumário

1. Introdução..........................................10

2. Proposta.............................................12

3. Recorte Teórico..................................13

4. Tecnologia e a Cidade.........................15

5. Mobilidade e Conexão........................18

6. Tecnologias Sociais............................21

7. Estudos de Caso..................................22

7.1 Gestão Urbana................................................22

7.1.1 Plano Diretor.............................................................227.1.1.2 Layout.............................................................................237.1.1.3 Usabilidade.....................................................................247.1.1.4 Apontamentos.................................................................25

7.1.2 Arco Tietê..................................................................257.1.2.1 Layout.............................................................................257.1.2.2 Apontamentos.................................................................26

7.1.3 Conclusão..................................................................24

7.2 Aplicativo e Site Cidadeira..............................28

7.2.1 Layout........................................................................28

7.2.1.1 Aplicativo........................................................................287.2.1.2 Site.................................................................................29

7.2.2 Usabilidade................................................................307.2.2.1 Aplicativo.........................................................................307.2.2.2 Site.................................................................................31

7.2.3 Problemas Apontados...............................................33

7.2.4 Redes Sociais...........................................................33

7.2.5 Apontamentos...........................................................33

7.3 Cidade Legal...................................................34

7.3.1. Layout.......................................................................34

7.3.2 Usabilidade...............................................................357.3.2.1. Aplicativo.......................................................................347.3.2.2 Site.................................................................................36

7.3.3 Problemas Apontados...............................................36

7.3.4 Rede Social................................................................36

7.3.5 Apontamentos...........................................................36

7.4 Onde fui roubado............................................37

7.4.1 Layout........................................................................37

7.4.2 Usabilidade................................................................37

7.4.3 Apontamentos...........................................................38

8. Desenvolvimento................................39

9. Metodologia........................................40

9.1 Pesquisa Qualitativa.......................................40

9.1.1 Roteiro de entrevistas para pesquisa qualitativa.....40

9.1.2 Pelo questionário foi possível avaliar que................41

9.1.3 Principais problemas ir para novos lugares.............42

9.2 Brainstorm.....................................................43


8

9.3 Requisitos.......................................................44

9.3.1 Requisitos do Aplicativo............................................44

9.3.2 Requisitos do Serviço................................................45

9.4 Criação de Personas e Mapas de Experiências..46

9.4.1 Personas...................................................................46

9.4.2 Mapas de Experiência...............................................46

10. Naming e Identidade Visual.............51

10.1 Naming.........................................................51

10.2 Identidade Visual..........................................51

10.2.1 Estudo de Fontes.....................................................51

10.3 Versão Final..................................................52

11. Layout...............................................53

11.1 Esboços.........................................................53

11.2 Ícones...........................................................54

11.2.1 Referências.............................................................54

11.2.2 Ícones Finais...........................................................5511.2.2.1 Feedback.......................................................................55

11.3 Grupos..........................................................55

12. Protótipo do Aplicativo.....................57

12.1 Ícone na Tela Inicial......................................57

12. 2 Tela Inicial....................................................58


9

12.3 Configurações...............................................59

12.4 Preferências de Procura...............................60

12.5 Adicionar aos “amados”...............................61

12.6 Adicionar aos favoritos.................................62

12.7 Acessar o perfil............................................63

12.8 Adicionar um novo local...............................64

12.9 Amigos..........................................................64

13. Fluxo Funcionamento......................66

14.Conclusão.........................................68

15.Considerações Finais........................70

16.Referências.......................................71


1 01. Introdução

As mídias digitais evoluíram. Elas se desprenderam dos meios fixos e se instalaram nas interfaces móveis. Neste contexto sua relação com o meio “real” mudou e vice-versa.

Com o GPS atrelado aos telefones celulares, tablets e computado-res, qualquer um pode ter acesso à internet em qualquer lugar n a rua. Nos tornamos “corpos “ciborguizados”” (BEIGUELMAN, 2013 Arte Pós-Virtual) e assim os objetos das nossas realidades (real e digital) se conectam entre si, transformando a circulação de produção e de conhecimento.

A cidade se expandiu e surgiu uma nova relação do cidadão com o ambiente urbano, Manifestações políticas como Ocuppy Wall Street, Occupy Gezi e as manifestações em junho de 2013 nas cidades bra-sileiras, iniciadas pelo Movimento Passe Livre, não foram causadas por, mas só aconteceram na escala e da forma como forma organi-zadas no contexto dessa realidade híbrida real/digital (BEIGUEL-MAN, 2013, p 160).

Esses movimentos revelaram o potencial de comunicação das mídias e uma demanda da população em expor suas carências, necessidades e reinvidicações.

São também recentes diversos sites e aplicativos que mapeiam problemas, dão informações sobre a cidade alimentados por quem a utiliza em tempo real, associados às redes sociais.

Em seu último projeto de Planejamento Urbano, a Prefeitura de São Paulo utilizou a participação direta dos cidadãos através de


1 1

um site com mapa no qual a pessoa apontaria problemas e soluções na cidade. Estes fatos fomentaram a pesquisa que deu origem a este Trabalho de Conclusão de Curso.

Afinal como as interfaces digitais podem ser utilizadas e expandidas a fim de otimizar a relação da cidade com seus cidadãos?


1 2

2. Proposta

“Como as interfaces digitais podem ser utilizadas e expandidas a fim de otimizar a relação da cidade com seus cidadãos?”

Foi esta pergunta que me trouxe inquietação e me motivou a estudar o tema no meu Trabalho de Conclusão de Curso. Será que é possível ampliar a participação do cidadão na cidade muito além do voto? Praticando a cidadania no seu cotidiano? Como as novas tecnologias podem influenciar neste processo?

Foi feito um recolhimento de informações que fazem parte do universo do tema, para identificar os recursos existentes e as possibilidades de melhoria.

Após a realização de entrevistas com usuários, elaboração de requisitos de projetos e estudos de layouts foi prototipado um aplicativo que tem como finalidade melhorar a interação do cidadão com a cidade.


1 33. Recorte Teórico

Para definir a proposta do Trabalho de Conclusão de Curso, foi feito um levantamento bibliográfico preliminar, para que fosse possível compreender o tema e organizá-lo.

O levantamento foi dividido em três grandes temas:

Tecnologia e a Cidade Busca entender as relações entre a cidade e a tecnologia no que tange ao uso da cidade pelos cidadãos através das tecnologias disponíveis, abrangendo temas como cidade expandida e o impacto e conseqüências desta nova realidade.

Mobilidade e ConexãoO advento dos aparelhos celulares e o seu encontro com a rede wireless tornou a rede ubíqua, praticamente onipresente nos dias atuais. Este tema abrange o que seria chamado “era da conexão” e seus desdobramentos na comunicação e troca de informações pelos seus usuários.

Tecnologias SociaisNeste tópico busca-se entender o conceito de “Tecnologia Social” e como ela pode ser agente de mudança na sociedade.

Para tanto foram consultados os seguintes autores:

Giselle Beiguelman “Arte pós- virtual: criação e agenciamento no tempo da internet das coisas e da próxima natureza” “Espaços de Subordinação e Contestação nas Redes Sociais”


1 4

Nomadismos Tecnológicos

André Lemos Cibercidade: As cidades na cibercultura

aGNuS VaLeNTe e NARDO GERMANO1CIDADE EXPANDIDA: hibridismo e expansão de um conceito para o contexto das redes tecnológicas

Juan Freire (http://nomada.blogs.com/jfreire/2010/11/territorio-geologia infraestructuras-politica.html)

Ana Lúcia Suárez MacielI; Rosa Maria Castilhos FernandesTecnologias sociais: interface com as políticas públicas e o Serviço Social


1 54. Tecnologia e a Cidade

No que diz respeito à relação entre a tecnologia e a cidade podemos começar pensando no que a cidade representa. Parafraseando McLuhan, se a cidade era em seu tempo uma extensão dos grupos humanos organizados, hoje ela alcança um nível mais complexo visto que estamos diante de uma realidade que traz novos paradigmas para a sociedade.

Quando André Lemos ( 2004, p 62) afirma que:

A cidade apresenta-se como uma estrutura dinâmica de fluxos entre espaços de informação, de conhecimento, de valores econômicos, de tradição, de religião, de discussão, de ludicidade, de encontro fortuito, etc. Estes fluxos dão-se graças à teia de relações estabelecidas entre os diferentes agentes socioeconômi-cos e culturais sustentadas em redes materiais e imateriais ele confirma a definição de cidade expandida, que diz respeito ao hibridismo entre meios e sistemas, arte, tecnologia e urbanismo na cidade (GERMANO; VALENTE, 2012, p 10).

Com o advento da internet e, principalmente, sua mobilidade através das redes wireless, o conceito de Cidade Expandida atinge níveis extremos. Encontros são marcados em redes sociais para lugares físicos. A manifestação é vivida nas ruas e nas redes sociais ao mesmo tempo, através de marcações de hashtag em fotos ou depoimentos.

Essa vivência real/ virtual no espaço urbano é acentuada na medida em que a rede se tornou ubíqua, as cidades oferecem wi-fi aos cidadãos em lugares como praças, ônibuse metrôs.


1 6

Na cidade de São Paulo está sendo testada, desde agosto de 2013, wifi gratuito em praças.

Em situações pontuais, como nas manifestações contra o aumento da tarifa do ônibus em junho de 2013, empresas disponibilizaram suas redes para que os manifestantes pudessem utilizá-las durante as passeatas.

“Neste contexto o espaço urbano reconfigura-se e o espaço público, na sociedade de rede em rede, é o das redes de comunicação” (CASTELLS, 2009 apud BEIGUELMAN, 2001, p 249, grifo do autor).

Como consequência o pensamento que separa a cidade real e virtual se tornou anacrônico (BEIGUELMAN, 2013, p 148) já que as redes estão tão profundamente ligadas à cidade que seria impossível separá-las.

Essas relações complexas entre a cidade real, virtual, a política, leis e restrições ambientais apontam a existência da necessi-dade de reinterpretar as realidades urbanas, observando a rotina dos cidadãos, já que as antigas interpretações podem estar ob-soletas (Juan Freire, Disponível em < http://nomada.blogs.com/jfreire/2010/11/territorio-geologia infraestructuras-politica.html >. Acesso em: 20/11/2013), para trazer novas formas mais eficientes e atuais de administrar e se apropriar das cidades.

1.Movimentos Sociais ac-ontecem simultaneamente na rua e nas redes sociais.


1 75. Mobilidade e Conexão

Se as grandes navegações do século XV foram as impulsionadoras do processo de Globalização, o advento da internet, em meados dos anos 70, trouxe uma nova perspectiva de estreitamento mundial.

Popularizada nos anos 80, hoje, em 2013, a internet se multiplicou e se tornou praticamente onipresente. Este fato possível foi graças a “radicalização” (Lemos, 2004, p 19) trazida pelos telefones celu-lares, aparelhos nômades que já representavam em 2010 75% da adesão mundial (ITU apud BEIGUELMAN, 2011), associado a rede wireless, que livrou a rede dos cabos e a expandiu sem limites para a cidade.

André Lemos (2004, p 17) pontua que a fase vivida hoje, dos com-putadores coletivos móveis nos insere em uma nova fase:

A era da informação, caracterizada pela transformação de átomos em bits (Negroponte, 1995), pela convergência tecnológica e pela infor-matização total das sociedades contemporâneas (Vastells, 1996) passa hoje por uma nova fase, a dos computadores coletivos móveis, que chamaremos aqui de “era da conexão” (Weinberger, 2003) caracterizando-se pela emergência da computação ubíqua, pervasiva (“pervasive computing”, permeaste, disseminada) ou senciente.

O celular pode ser visto, como qualquer ferramenta de trabalho do homem, como uma extensão sua. Esta ferramenta hoje nos ofe-rece diversas funções como telefone, máquina fotográfica, reprodu-tor de vídeos, musicas, rádio, mini computador com internet, GPS.

Ele aumenta o campo dos sentidos do homem, sua relação com


1 8

a cidade e com a dinâmica do mundo virtual. Como disse Giselle Beigueman, o celular virou o controle remoto do cotidiano, ele nos tornou corpos ciborguizados que ”nos expande para além do aqui e nos insere em um tempo de eterno agora” (BEIGUELMAN, 2013, p 147).

Esta ferramenta, além de apresentar as funções acima descritas, também apresenta diversos serviços em formato de aplicativos. Os aplicativos podem oferecer desde serviços simples, como a função de uma lanterna, a complexos, como transações financeiras.

A quantidade e variedade de serviços são tantas que tornou o celu-lar personalizável, como é enfatizado por Juan Freire:

Los teléfonos móviles inteligentes están pensados para las multitudes. Bajo la apariencia de un producto se esconde una plataforma de servi-cios. Los usos originales han ido perdiendo relevancia y hoy en día un móvil es un artefacto que permite acceder a múltiples servicios a partir de aplicaciones. La oferta de apps es tan elevada que en realidad cada usuario tiene su propio móvil totalmente diferente al de otros. En un grupo de usuarios todos serán diferentes y todos aportarán conocimien-to (usarán algunas apps distintas) al común.

Sendo assim esta ferramenta se tornou algo essencial no trabalho, na vida e nas relações sociais e determina a era em que vivemos:

Não estamos na era da informação. Não estamos na era da Internet. Nós estamos na era das conexões. Ser conectado está no cerne da nossa democracia e nossa economia. Quanto maior e melhor forem essas conexões, mais fortes serão nossos governos, negócios, ciência, cultura, educação…(WEINHERGER apud LEMOS, 2004, p 17)

Ao mesmo tempo em que o celular e a internet ampliam a troca de informações entre as pessoas, não se pode dizer que ele aumen-ta a comunicação entre os indivíduos.

Segundo André Lemos ( 2004, p 27, grifo do autor) “a ação comuni-cativa se dá entre indivíduos que estão engajados em um processo comum onde, pela razão, serão possíveis argumentações e contra-argumentações, buscando o consenso”, já o uso do celular, por caracterizar-se troca rápida de informações, no formato SMS, de bate-papo como o facebook, gtalk, Message e etc, talvez não ofer-eça um grande enriquecimento ao processo comunicativo, como pontua Lemos. Isso nos faz refletir que talvez a era da conexão não seja a era da comunicação. (LEMOS, 2004, p 28)

Neste processo de trocas de informações as redes sociais tem


1 9

um papel fundamental: elas se tornaram o meio mais efetivo de troca de informações. Elas têm uma grande adesão mundial, per-mitem mobilizações e foram protagonistas em recentes movimen-tações sociais como a Primavera Árabe, 15M Espanhol, Occupy Gezi e no Brasil houve as grandes mobilizações iniciadas pelo descon-tentamento com o aumento da tarifa do ônibus.

Os dados em comum nestes movimentos foram a sintonia da grande massa com as redes sociais.

Foram levantes híbridos. Produzidos pelas pessoas, em um contexto histórico determinado, com os recursos do Facebook e do Twitter. Sem pessoas, obviamente não ocorreriam. Sem as redes sociais, tampouco.(BEIGUELMAN, 2013, p 160)

Embora esses levantes tenham focos distintos, eles mostram o poder transformador em potencial da auto-comunicação de massa, a sua capacidade de mudança social e a necessidade de expor suas carências.

Todas essas ações têm focos e estratégias muito distintos. Contudo, como bem frisa Castells (2009, apud BEIGUELMAN, 2013, p 161), todas evidenciam

A sinergia potencial entre a ascensão da autocomunicação de massas (mass self-communication) e a capacidade autônoma da sociedade civil ao redor do mundo de definir o processo de mudança social.


2 06. Tecnologias Sociais

Neste contexto que une as tecnologias, a cidade e os cidadãos surgem as tecnologias sociais (TS). Segundo Juan Freire (Disponível em < http://nomada.blogs.com/jfreire/2010/11/territorio-geologia infraestructuras-politica.html>, acessado no dia 20/11/2013) são elas todas as tecnologias de infraestrutura, hardware, software, serviços, web e aplicativos, que são caracterizadas pelo uso aberto e a colaborações individuais, que dão um poder aos cidadãos de reconfigurar e remixar seus conteúdos.

Alguns dos fundamentos da TS:

São a transformação social, a participação direta da população, o sen-tido de inclusão social, a melhoria das condições de vida, a sustentabili-dade socioambiental e econômica, a inovação, a capacidade de atender necessidades sociais específicas, a organização e a sistematização da tecnologia, o diálogo entre diferentes saberes - acadêmicos e popu-lares -, a acessibilidade e a apropriação das tecnologias, a difusão e a ação educativa, a construção da cidadania e de processos democráticos, entre outros, que são sustentados por valores de justiça social, democracia e direitos humanos.” (FERNANDES; MACIEL, 2011)

Deste modo a tecnologia se torna social e é incorporada à prática cotidiana e dela podem resultar em usos inovadores, normalmente associado ao baixo custo e grande poder transformador.


2 17. Estudos de Caso

Foram feitos estudos de caso preliminares de aplicativos e sites que têm seus dados inseridos de modo colaborativo pelos usuários/ cidadãos para mapeamento de problemas na cidade, visando sua melhoria, indo ao encontro com a definição acima de Tecnologias Sociais.

7.1 Gestão Urbana

O site <http://gestaourbana.prefeitura.sp.gov.br> foi feito durante o governo do Prefeito Fernando Haddad com a proposta de incluir e firmar um diálogo com o cidadão, de modo a construir uma parce-ria entre o poder público e a sociedade.

Deste modo o site se comporta como um canal com a população para mostrar projetos e acompanhar notícias do planejamento da cidade. Embora a comunicação vise a participação da população, acredito que seu conteúdo não seja facilmente compreendido por ela.

Segundo a projeto, como o cidadão habita a cidade é ele quem pode dar o feedback necessário para direcionar ”as ações públicas e privadas na produção de uma cidade mais justa e sustentável” (Disponível em <http://gestaourbana.prefeitura.sp.gov.br/a-revisao-participativa/>. Acessado no dia 18/08/2013).

Sendo assim o site foi plataforma para, durante um tempo, levantar problemas através de um mapa da cidade no qual os cidadãos apontavam problemas e soluções para a cidade.


2 2

2.A divisão dos conteúdos facilita a navegação

no site. Disponível em: < http://gestaourbana.prefeitura.sp.gov.br/ >

No dia 16/11/2013

3.Infográfico auxilia a compreensão

do conteúdo do site.Disponível em:

< http://gestaourbana.prefeitura.sp.gov.br/ >

No dia 18/08/2013

4.Ilustração reforça a ideia do projeto. Disponível em:

< http://gestaourbana.prefeitura.sp.gov.br/ >

No dia 18/08/2013

O levantamento de dados foi feito através do <http://www.open-streetmap.org/copyright que é um mapa gratuito desenvolvido por todos. No mapeamento dos problemas é possível ver o que outras pessoas escreveram e pode haver diálogo entre as pessoas.

7.1.1 Plano Diretor

7.1.1.2 Layout

Acredito que em termos visuais o site da Gestão Urbana atende às demandas desejadas: as informações são dispostas com hierar-quia, de maneira clara, concisa.

Há uma diferenciação dos conteúdos através das barras: na primeira barra temos a informação de quem faz o projeto e como se cadastrar para receber as informações, na segunda in-formações gerais do projeto (“entenda”, “notícias”, “agenda”e “biblioteca”) e na terceira os projetos que estão acontecendo no momento.

O Site também se utiliza de imagens ícones, infográficos e ilus-trações para reafirmar os conteúdos descritos.


2 3

7.1.1.3 Usabilidade

Como a página na qual o mapa estava inserido continha muitas informações, era comum que demorasse bastante tempo para ser carregada.

Uma vez carregada havia a demora para conseguir mexer no mapa, para encontrar uma região específica, por exemplo, pelo mesmo motivo acima citado.Assim que a localização foi definida era fácil a interação com o mapa. Havia dois botões “enviar solução” e “enviar problema”.

Com o botão apertado você podia discorrer sobre o problema/solução apontados e haver diálogo entre os participantes.

Infelizmente não experimentei participar e esta parte do projeto já foi retirada do ar.

5.Botões no cabeçalho “enviar solução”e “enviar

problema”. Disponível em: < http://gestaourbana.prefeitura.sp.gov.br/ >

No dia 19/08/2013

6.Era possível visualizar as denúncias feitas

e respondê-la. Disponível em: < http://gestaourbana.

prefeitura.sp.gov.br/ >No dia 19/08/2013

Era possível haver diálogo dentro do projeto.

Disponível em: < http://gestaourbana.prefeitura.sp.gov.br/ >

No dia 19/08/2013


2 4

7.1.1.4 Apontamentos

A iniciativa da Prefeitura em estabelecer um contato com a popu-lação a fim de entender as demandas da sociedade foi muito posi-tiva. Isto porque, de fato, somente quem vive e habita a cidade é capaz de apontar os problemas vividos no dia-a-dia.

No entanto, no site, não havia um canal de comunicação aberto entre a prefeitura e o cidadão, o que eu vi ali foram apontamentos feitos pelos cidadãos e discutido entre eles. Os debates diretos en-tre a população e o governo foram feitos em lugares fechados.

Tive a experiência de ver o projeto ser apresentado em uma pale-stra na Faculdade de Arquitetura e Urbanismo na USP. Como o tempo era escasso, após a apresentação do projeto algumas per-guntas foram feitas para o secretário Fernando de Mello Francoe logo se encerrou a sessão. Se no ambiente “real” o tempo é res-trito por que não levar esta discussão para o mundo virtual?

Ademais não houve uma divulgação do projeto em larga escala, o que me faz questionar quem foram as pessoas que colaboraram no projeto, será que o projeto ficou restrito a apenas uma parcela da população?

7.1.2 Arco TietêOutro exemplo que aconteceu no site foi o Projeto do Arco Tietê, que aconteceu pelo mesmo site do Governo da Cidade de São Paulo, o < http://gestaourbana.prefeitura.sp.gov.br/ > (Disponível em < http://gestaourbana.prefeitura.sp.gov.br/arcotiete/>. Acessado no dia 24/11/2013).

7.1.2.1 LayoutComo podemos notar, visualmente o projeto é convidativo para ser visto. Fundo chapado, ícones arredondados, que tentam ser menos formal, infográficos.

7.Interface convidativa. Disponível em:

< http://gestaourbana.prefeitura.sp.gov.br/

arcotiete/ >No dia 24/11/2013


2 5

7.1.2.2 Apontamentos

Quando se foca a atenção no conteúdo, é possível notar que ele não é disposto para a população em geral. É preciso ter um co-nhecimento prévio do assunto para compreendê-lo.

No fim do projeto, as pessoas são convidadas para dar sua con-tribuição no projeto, mas como? Será que a página dá informações suficientes para um leigo entender o projeto a ponto de conseguir contribuir com a sua opinião?

Sendo assim embora haja uma iniciativa muito interessante acredi-to que ela possa ser aperfeiçoada para que aja uma maior adesão da população.

7.1.3 Redes Sociais

8.Infográficos e ilustrações para auxiliar a compreen-

são dos usuários. Disponível em:

< http://gestaourbana.prefeitura.sp.gov.br/

arcotiete/ >No dia 24/11/2013


2 6

É possível acompanhar as notícias da Secretaria Municipal de Desenvolvimento Urbano no Twitter e no Facebook.

Podemos notar que não houve uma grande adesão do projeto nas redes sociais, visto que no Facebook a página tem apenas 1.889 “curtidas”e no Twitter apenas 203 “seguidores”.

7.1.3 Conclusão

Acredito que a iniciativa de criar um portal de comunicação com os cidadãos seja muito positiva. No entanto acredito que o portal demonstre mais uma comunicação entre cidadãos do que dos ci-dadãos com a prefeitura.

Outro ponto que deveria ser levado em consideração é a baixa adesão ao projeto. Porque as pessoas não participam? Foi notado que o conteúdo do site pode ser muito específico e não estar dentro do domínio da maioria dos cidadãos e também a pouca difusão do projeto nas mídias existentes.

9.O Projeto da Prefeitura nas Redes Sociais

Disponível em: < https://www.facebook.

com/pmsp.smdu?fref=ts >No dia 24/11/2013

e < https://twitter.com/pmsp_smdu >

No dia 24/11/2013


2 7

7.2 Aplicativo e Site Cidadera

O Cidadera é um programa, que pode ser em formato de aplicativo ou site, no qual os usuários reportam problemas da cidade.

Segundo um dos idealizadores do projeto, Victor Stabile, a idéia do aplicativo Cidadera:

Surgiu por uma insatisfação nossa com a falta de transparência das prefeituras, porque hoje se alguém faz uma reclamação de um buraco na rua, essa reclamação fica entre a prefeitura e quem reclamou. O cidadão comum não tem acesso a todos os problemas que estão na ci-dade, há quanto tempo esses problemas estão sem solução e assim fica difícil avaliar como está sendo feito o trabalho da gestão para escolher um prefeito e ter dados concretos de desempenho.(Vídeo Disponível em <https://www.youtube.com/watch?feature=player_embedded&v=25ohC8oEe9I#t=34>. Acessado no dia 24/09/2013)

A proposta é firmar parcerias com as prefeituras, no entanto foi feita apenas uma parceria com a Associação Brasileira dos Pequenos Consumidores Conscientes (ABRAPECON), de São Carlos, voltada para a defesa dos consumidores em geral, que irá reunir as denúncias e protocolá-las na Prefeitura de São Carlos. (Disponível em <http://www.revide.com.br/gerais/aplicativo-de-denuncia/>. Acessado dia 25/09/2013).

7.2.1 Layout

7.2.1.1 Aplicativo

O layout do aplicativo é muito simples. Na barra acima estão con-centradas as funções do aplicativo do Menu (que concentra o login, a função de sair do seu login, e suas denúncias, chamadas de “tickets”) e o botão de denúncia.

O aplicativo utiliza de formas arredondadas e a cor laranja possi-bilita um destaque em relação às cores do mapa.

10.Interface principal do aplicativo Cidadera


2 8

Acredito que os ícones poderiam ser melhor construídos, não há uma uniformidade formal nos desenhos, ora há arestas cegas, ora há o arredondamento do desenho, e olhando o ícone sem sua descrição ao lado às vezes não é tão intuitivo o que ele representa, como em “iluminação”.

7.2.1.2 Site

Enquanto o layout do aplicativo é claro e contêm poucos elementos o mesmo não pode ser dito sobre o site. Isto porque ao invés de abrir direto no mapa, onde pode ser feita a denúncia, a primeira página é cheia de elementos e não há respiro entre eles, o que torna a página poluída.

7.2.2 Usabilidade

7.2.2.1 Aplicativo

O aplicativo é muito fácil de ser utilizado. Isso porque existem pou-cas opções de uso.

12.Disponível em <http://cidadera.com>.

Acessado no dia 24/11/2013.

11.Menu do Aplicativo cidadeira.


2 9

Quando aberto, o aplicativo já localiza o usuário na sua posição do mapa e deixa três botões aparentes: o de apoio (simbolizado por três listras, que é o menos intuitivo de todos) que pode ser aces-sado quando apertado e/ou deslizando o dedo para a direita; nele pode-se fazer o login, que dá acesso às suas denúncias e dá para saber se ela foi atendida ou não. Há também as opções “fale com a gente” e “ajuda”.

O botão com maior destaque é o “denúncia”. Ele permite que você escolha primeiro se a denúncia é no local onde você está ou se em outro endereço. Após ser feita a escolha uma lista de “temas” aparece, com ítens muito abrangentes como “pedestre” e “trans-porte”. Com o tema elencado aparecem os problemas que podem ocorrer a partir dele e que serão denunciados.

Com o problema escolhido, antes dele sê-lo divulgado você pode adicionar uma descrição a ele e uma foto, além de ainda poder corrigir o endereço. Com tudo acertado o problema é então divulga-do. O usuário ainda pode compartilhar na sua timeline no facebook, assim outras pessoas podem ver o problema e “protestar”.




3 0

7.2.2.2 Site

O uso do site não é tão intuitivo quanto o do aplicativo. Isso porque ele abre em uma página que contêm muitas informações, mas ao mesmo tempo não acrescentam muito ao que o aplicativo oferece. Explico, além das funções do aplicativo, a página do site atualiza as denúncias feitas no momento, mostra um banner com informação de quantos problemas foram denunciados, quantos foram resolvi-dos e quantos protestos foram feitos, quem curtiu no Facebook e onde saiu nas mídias sociais.

Enquanto no aplicativo a função principal é, visualmente, a mais destacada, no site ela fica perdida no meio dos elementos apre-sentados. No aplicativo temos o botão “denúncia”e no site “Mapa”, deveria ter sido mantido o mesmo padrão em ambos.

O aplicativo te localiza, já no site é necessário se encontrar no mapa, ou digitando o endereço, ou colocando no mapa um pino.




3 1

Quando o usuário se localiza no mapa, a página da denúncia aparece. Esta sim está organizada e facilita o uso.




3 2

7.2.3 Problemas Apontados

Os problemas apontados pelo aplicativo:

ACESSIBILIDADE• acessibilidade em mal estado;• alta de acessibilidade;

áGUA E ESGOTO• falta de saneamento básico;• esgoto a céu aberto;• tratamento de esgoto inadequado;• vazamento de água;• bueiro entupidoalagamento;• ponto de alagamento;

áRVORE• árvore caída;• poda de árvore necessária;

BURACO• buraco no asfalto;• buraco no chão;• rua esburacada;

EDUCAçãO• ensino precário;• escola em mal estado;• falta de funcionários em escola; • falta de material escolar;• falta de material escolar;• falta de professores em escola;• falta de vagas em escola

energia;• falta constante de ener-gia elétrica;

ILUMINAçãO• falta de iluminação;•poste de luz em mal estado;• poste de luz queimadolixo;

LIxO OU ENTULhO• veículo abandonadolocal público;• bem público em mal estado de conservação• pichação;• vandalismo;

MATO ALTO• mato alto;

OBRA PúBLICA• obra pública irregular;• obra pública necessária;• obra pública parada;

PEDESTRE• ausência de calçada;• calçada em mal estado;• faixa de pedestre em mal estado;• falta de faixa de pedestre;• semáforo de pedestre quebrado;

POLUIçãO DO AR• ponto de poluição do ar;

POLUIçãO SONORA• ponto de poluição sonora;

POLUIçãO VISUAL• ponto de poluição visual

QUEIMADA;• ponto de queimada

TRANSPORTE• estação em mal estado • ponto de ônibus em mal estado;

TRâNSITO• falta de placa de sinal-izão;• placa de sinalização em mal estado;• ponto de congestiona-mento;• semáforo quebrado;• semáforo necessário;• via de trânsito em mal estado;

SAúDE• atendimento de saúde precário;• falta de profissionais de saúde;• falta de leitos;• instalações de saúde precárias;

7.2.4 Redes Sociais

Comunica com o facebook e o twitter (este apenas no aplicativo).

7.2.5 Apontamentos

Diante da análise feita acima, acredito que entre os formatos esco-lhidos o aplicativo faz muito mais sentido do que o site neste caso.

Isso porque seu uso é muito mais intuitivo, sua linguagem é mais clara e parece que faz mais sentido com o tipo de denúncia ser feito no momento.


3 3

Pois o aplicativo já localiza o usuário, o que faz com que seu uso seja prático e rápido, não demanda tanta atenção do usuário, ao contrário do site, que demanda mais atenção do usuário para que seja fornecida o mesmo tipo de informação do aplicativo.

A iniciativa em si é muito interessante, mas sem a ligação com os órgãos municipais será que faz sentido? O que será feito com este levantamento?

7.3 Cidade Legal

7.3.1. LayoutPode-se notar que o layout do aplicativo e do site da Cidade Legal têm uma maior uniformidade formal do que do aplicativo Cidadera. A faixa horizontal existente no aplicativo é usada também no site.As imagens com os problemas se aproximam mais de uma ilus-tração do que de ícones e seguem a mesma linguagem em todos eles.

15.Disponível em <http://www.cidadelegal.com/>.



3 4

7.3.2 Usabilidade

7.3.2.1. Aplicativo

O aplicativo do Cidade Legal é muito fácil de ser utilizado. Logo na página principal o aplicativo já encontra o usuário no mapa.

Assim que se aperta “Grave este ponto”o aplicativo abre para a página na qual estão dispostos os problemas.

Sem ordem alfabética, os problemas estão dispostos de maneira confusa, agrupados por tema.

O aplicativo não deixa você escrever comentários para anexar ao problema denunciado, ou comentar sobre o problema que alguém denunciou, você só pode colaborar dizendo se o ponto denunciado por outra pessoa se de fato existe ou não.

7.3.2.2 Site

O site do aplicativo na verdade funciona como parte da divulgação do programa, o mapa que aparece na tela principal, apesar de ter a função de zoom, não é interativo. O site só apresenta con-tato de quem fez o aplicativo e um vídeo apresentando o projeto.


3 5

7.3.3 Problemas Apontados

7.3.4 Rede SocialO aplicativo mostra a opção de se comunicar pelo o facebook, pos-tando na página do usuário sua denúncia.

7.3.5 ApontamentosO aplicativo é muito fácil de usar, mas, talvez, aponte muito superfi-cialmente os problemas. Não há feedback para o usuário se o problema foi resolvido, não há comunicação entre os usuários do aplicativo.

Também existe uma dúvida da finalidade deste aplicativo. Afinal para onde vão os dados levantados no aplicativo? Não há nenhuma informação dizendo o que eles farão com as informações ou qual é o propósito final do aplicativo.

INCIDENTES;

SEMáFORO DE RUA QUE-BRADO;

SEMáFORO DE PEDESTRE QUEBRADO;

LIxEIRA QUEBRADA;

BUEIRO ENTUPIDO;

BUEIRO SEM TAMPA;

BURACO NA CALçADA;

BURACO NA RUA;

BURACO NA CICLOVIA;

POSTE DE LUz ACABADO;

POSTE DE LUz SEM LâM-PADA;

POSTE DE LUz CAÍDO;

FALTA DE PLACA: NOME DE RUA;

FALTA DE PLACA: SINALI-zAçãO DE TRâNSITO;

PLACA DE SINALIzAçãO QUEBRADA;

PLACA DE SINALIzAçãO PIChADA;

BANCO DE PRAçA QUEB-RADO;

PRAIA SUJA;

TERRENO BALDIO SUJO;

áRVORE CAÍDA;

FAIxA DE PEDESTRE SEM TINTA;

PONTO DE ôNIBUS QUE-BRADO;

PONTO DE ALAGAMENTO;

áRVORE SEM PODA;

JARDIM SEM PODA;

VAzAMENTO DE áGUA;

VAzAMENTO DE GáS;

LIxO SEM RECOLhI-MENTO;

IxO hOSPITALAR SEM RECOLhIMENTO;

CAçAMBA DE LIxO ABAN-DONADA;

VEÍCULO ABANDONADO;DEJETOS - RESÍDUOS EM RIO - CóRREGO;

ESGOTO A CéU ABERTO;FOCO DE DENGUE;

FALTA DE ACESSIBILI-DADE;

PONTE - VIADUTO QUE-BRADA;

PASSARELA QUEBRADA;FALTA DE MURETA DE PROTEçãO;

MURETA DE PROTEçãO QUEBRADA;

ESTABELECIMENTO SEM hIGIENE;

BANhEIRO PúBLICO SEM hIGIENE;

PATRIMôNIO PúBLICO DEPREDADO;

MáQUINA zONA AzUL QUEBRADA;

ABELhAS - VESPAS - FORMIGAS;

PRAçA SUJA.


3 6

7.4 Onde fui roubado

O site “Onde Fui Roubado” é um mapeamento colaborativo dos assaltos que acontencem na cidade. O usuário consegue filtrar as ocorrências por data (anual, mensal ou semanal) e ver estastís-cas das vitimas, o que mais roubam e o tipo de assalto.

7.4.1 LayoutNa primeira página do site entramos em uma página preta, que não foi muito bem diagramada. A marca não tem um respiro satisfatório, os espaços entre a marca, título, texto e box com múlti-plas escolhas não têm a mesma distância entre si, o que gera um desconforto visual.

Com o site já aberto na sua página principal podemos notar a mesma solução adotada pelos outros casos citados: o mapa no fundo com duas tarjas com as informações.

Como este site contêm mais informações foram usados boxes nas laterais: o da direita mostra as últimas ocorrências, as opções de filtrar o período, fazer a denúncia de onde foi roubado e mostra o painel de estatística.

16.Disponível em: http://www.ondefuiroubado.

com.br/. Acessado no dia 24/11/2013




3 7

A barra inferior contêm o espaço de busca de um endereço especí-fico, o número de crimes cometidos no espaço de tempo escolhido, a cidade que está sendo mostrada no mapa, o link com as redes sociais e o espaço de contato com a equipe do site.

Nesta barra, os elementos estão dispostos sem organização de espaço, o que gera a impressão de bagunça.

Enquanto a página principal se caracteriza pela sua bagunça, o espaço no qual o usuário fará sua denúncia é mais organizado: as colunas de informação são melhor distribuídas, há menos ele-mentos visuais e o fundo com uma leve textura não atrapalha a visualização dos dados.

7.4.2 UsabilidadePode-se considerar que o site tem duas funções principais: fazer a denúncia de roubo e a consulta dos roubos. Quando se entra no site, o mapa já demonstra os roubos que aconteceram e na barra inferior pode-se fazer uma busca de algum lugar específico.

Para denunciar um roubo, há um botão à direita que fica “acenden-do” e “apagando”, o que visa chamar a atenção do usuário.




3 8

O botão nos leva a uma outra página, como foi descrita acima, muito organizada. Isto facilita seu uso pois as informações são facilmente encontradas.

7.4.3 ApontamentosNeste caso faz sentido o formato do programa ser site já que a maioria dos assaltados apontados pelo site são de celulares, sendo assim a pessoa não teria como denunciar o roubo.


3 98. Desenvolvimento

Durante a apresentação do Trabalho de Conclusão de Curso I, a banca definiu que o aplicativo deveria ser desenvolvido para uma região específica da cidade. Também questionou o foco deste, visto que os objetos de estudo dessa primeira fase eram projetos nos quais as pessoas denunciavam problemas existentes na cidade e não abriam espaço para visualizar seus aspectos positivos.

Esse questionamento gerou uma reflexão de qual era o foco do estudo e como seria possível alterar essa realidade e fazer com que os cidadãos vivenciassem melhor a cidade e as oportuni-dades de lazer que ela proporciona. Sendo assim, foram feitas entrevistas para entender como essa relação com a cidade acontece e, a partir dela, foi gerado um protótipo de aplicativo que visa melhorar a interação com a cidade e suas opções de lazer.


4 09. Metodologia

A companhia global de design IDEO criou um guia com elementos do HCD – Human Centered Design de como inovar os projetos de empresas, buscando ensinar a “Ouvir de um jeito novo as necessi-dades dos usuários, criar ideias inovadoras para atender a essas necessidades e implementar soluções” (IDEO, p. 05)

9.1 Pesquisa Qualitativa

Segundo a IDEO (IDEO. P 24) pesquisa qualitativa é mais próxima do usuário e é capaz de revelar e compreender “necessidades, desejos e aspirações” mais profundas pois se tem um contato maior com o entrevistado e é possível que ele use suas próprias palavras para descrever situações.

9.1.1 Roteiro de entrevistas para pesquisa qualitativaSegundo a metodologia definida pela IDEO (2011), na pesquisa qualitativa é necessário recrutar participantes que representem as personas, isto é, os indivíduos extremos que possuem três perfis: um terço deles devem representar os membros “ideais”, aqueles que já adotam as tecnologias e que apresentam comporta-mentos desejáveis; o outro terço deve representar o extremo oposto ao anterior, de pessoas que são muito pobres ou resistentes a novi-dades; e o terceiro deve ser composto por membros que represen-tam uma média dos dois extremos anteriores. (IDEO, 2011, p. 27)

Deste modo, foram traçados os perfis dividido em três terços: Os membros ideais


4 1

- Têm como lazer vivenciar a cidade;- São abertos a novas experiências e lugares;- São disseminadores - compartilham com conhecidos as novas informações;- Procuram saber as novidades tecnológicas e de serviço. Os opostos aos membros ideais

- Têm preferência a lugares que já conhecem;- Preferem lugares fechados como shoppings;- São resistentes a novidades tecnológicas e de serviço.

Os intermediários

- Consideram a opinião de um amigo essencial para conhecer um novo lugar;- São abertos a novas experiências, mas têm dificuldades para encontrá-las;- São indiferentes a novidades tecnológicas e de serviço.

Para as entrevistas foi feito um guia geral que deveria contemplar as seguintes perguntas: - Pessoais: - Idade - Profissão- Relação da pessoa com a cidade: - A quanto tempo habita a cidade - Qual tipo de lazer que pratica hoje em dia - Em qual tipo de lazer tem interesse - Qual seu principal meio de transporte- Relação com tecnologia: - Possui smartphone - Usa aplicativos- Meio de conhecer novos lugares Como as entrevistas eram conduzidas em forma de conversa,os assuntos eram abordados conforme surgiam na ocasião.Foram feitas entrevistas com 6 pessoas que atendiam aos perfils determinado anteriormente. Os entrevistados tinham dentre 23 a 28 anos e residiam na cidade de São Paulo. Dentre as profissões haviam estudantes de medicina e administração, empresário, jor-nalista, arquiteta e bancário.

9.1.2 Pelo questionário foi possível avaliar que:

Principais meios de encontrar novos lugares


4 2

1º Amigos (todos);2º Aplicativo;3º Site;4º Guia.

Aplicativos

Os que usam aplicativos citam que gostam deles porque, segundo Flávia: “Se você fizer uma busca na internet, como fazia antiga-mente antes dos aplicativos, você precisa organizar uma interface das suas coisas no papel e imprimir... no aplicativo já está tudo ali.” Ou seja, o aplicativo é interessante por dispor a informação de um modo organizado.

Os aplicativos citados nas entrevistas foram: Foursquare e Veja Comer e Beber.

Amigos fornecem as opções mais seguras

Todos os entrevistados disseram que o principal meio de conhecer lugares novos é pelos amigos.

Existe a procura por lugares novos

A maioria dos entrevistados demonstrou a vontade de conhecer lugares “novos” mas, exceto pela indicação dos amigos, não sabiam onde encontrar essa informação. Segundo Gregório: “Às vezes, quero sair à noite, quero ir em um lugar novo e não sei onde”. Outro problema apontado por José foi a dificuldade em encontrar uma informação rápida e adequada ao que procura, associado ao fato de ter muitas opções que dificultam a escolha do lugar final: “Se vejo muitas opções, às vezes acabo não escolhendo nenhum lugar com meu estilo.”

Muitos decidem seu destino no momento que estão saindo de casa ou alteram o destino final durante o percurso.

Esta informação me fez refletir sobre a falta de informação. Se o usuário pretende ter uma informação rápida e naquele momento, porque os aplicativos mostram lugares inviáveis? Por exemplo, lo-cais fechados naquele horário, ou muito longe de onde a pessoa se propõe a ir, o que normalmente é perto de onde ela mora.

9.1.3 Principais problemas ir para novos lugares:

Filas

Muitas vezes os entrevistados chegam nos lugares e a fila está muito extensa, assim como o tempo de espera, o que resulta na


4 3

alteração do local escolhido.

Falta de informações sobre o local

Informações básicas como horário de funcionamento muitas vezes se mostram difíceis de serem encontradas. Segundo José: “Você nunca sabe se vai estar aberto no final de semana.”

Preguiça

Este fator foi associado às filas e à dificuldade de mobilidade, como trânsito e estacionamento.

Dificuldade em achar sugestões confiáveis

Enquanto os amigos mostram as opções mais “seguras”, os aplica-tivos e guias muitas vezes não passam segurança de que a suge-stão vai realmente agradar a pessoa que está buscando informação.

Idéia restrita de lazer

Pôde-se observar que muitas vezes o lazer foi associado apenas a programas pagos, como cinema, bares e restaurantes. Parques e passeios pela cidade praticamente não foram lembrados.

9.2 Brainstorm

A partir dos pontos levantados, foi feito um brainstorm com as propostas listadas abaixo:

Perfil do centro da cidade no Instagram

Poderia-se usar o Instagram como uma ferramenta focada no bairro, usando, por exemplo, ícones nas imagens dos lugares para ser fácil entender suas propostas: como café, música, restau-rante, etc. As pessoas do próprio bairro poderiam tirar fotos e alimentar o conteúdo do perfil.

Positivo: gerar o espírito de comunidade.Negativo: não é tão interessante para o desenvolvimento de projeto

Cartaz

Convidar a pessoa que está andando a sair de seu percurso através de cartazes que indicam lugares próximos e interessantes para se conhecer, ou a olhar algum ponto turístico ou histórico com uma breve descrição.

Positivo: convidaria as pessoas a saírem de seu trajeto e terem um novo olhar sobre a cidade.


4 4

Negativo: seria restrito às pessoas que andam a pé ou de bicicleta na cidade.

Proposta de Aplicativo I

Um aplicativo que seria uma plataforma para enviar mensagens com indicações entre amigos, servindo apenas para este propósito.

Positivo: Facilitar e estimular a troca de informações entre pessoas.Negativo: Muito específico, usuário não conseguiria fazer buscas.

Proposta de Aplicativo II

Rede social de lugares que mostra apenas programas que podem ser feitos no momento, ou seja, o aplicativo seria utilizado no mo-mento de sair de casa. O usuário poderia ainda ter um perfil com seus lugares de interesse, entrar no perfil dos amigos para ver o que eles indicam e adicionar lugares que ele considera interes-sante.

Positivo: coerente com o resultado das entrevistas e tema deste trabalho.Negativo: usuário só poderia usá-lo no momento em que sai de casa.

9.3 Requisitos

Como o objeto de estudo deste trabalho visa compreender a relação entre a cidade e o cidadão através das mídias digitais, acredito que o projeto que é mais coerente com a proposta e com as necessi-dades dos usuários é a Proposta de Aplicativo II.

Ele une o aplicativo, que é a ferramenta mais lembrada, aos ami-gos, que apresentam as sugestões mais bem aceitas pelos usuári-os.

9.3.1 Requisitos do AplicativoPara elaborar os requisitos foi utilizado o “Guia Acelerador - De-senvolvimento Interno de Apps” fornecido pela Apple. Segundo ele:

- O tamanho mínimo confortável para toque é de 44x44pontos;

- Barras de rolagem não e menus “pull-down” não apresentam bom desempenho;

- O dispositivo móvel é mais indicado para tarefas menos complexas.


4 5

Para ajudar a simplificar o design, antes de definir os elementos da interface do usuário do aplicativo devemos nos perguntar:

“É importante que esse elemento apareça na tela?Esse elemento viabiliza o acesso a um recurso importante?Ele é utilizado frequentemente? Quase sempre?O usuário precisa desse elemento para fazer uma seleção?Com base no fluxo do app, é importante colocar esse elemento na tela agora?” (Guia Acelerador - Desenvolvimento Interno de Apps, Apple, p.12)

- É desejável que os padrões de design já existentes nos aplicativos sejam mantidos, pois os usuários já estão habituados com eles o que torna o uso do aplicativo mais fácil;

- Segundo o guia consultado deve-se deixar as informações mais importantes na parte superior do aplicativo. No entanto, acredito que esta informação esteja desatualizada, pois os novos lançamen-tos de celulares estão maiores do que os anteriores, o que dificulta o acesso fácil à parte superior do mesmo. Sendo assim penso que seria mais interessante deixar as partes mais importantes abaixo.

9.3.2 Requisitos do ServiçoOs requisitos do serviço foram idealizados através da pesquisa com usuários e se refere ao que se pretende atingir com o aplicativo desenvolvido.

- Incentivar os usuários a conhecer novos lugares na cidade;

- Ampliar o conceito de lazer existente, através de propostas de programas considerados alternativos, como festa de rua, pique-nique no parque, etc;

- Facilitar o acesso às informações desejadas pelos usuários;

- Garantir que o conteúdo do aplicativo seja compreendido desde o primeiro acesso do usuário;

19.Exemplo de menu “pull-down”no site nastygal.

https://www.nastygal.com/


4 6

- Ser atraente esteticamente;

- Permitir que o usuário participe do conteúdo do programa, adicio-nando lugares novos, com comentários, mandando mensagens, etc.

9.4 Criação de Personas e Mapas de Experiências

9.4.1 PersonasAs “personas” são arquétipos criados a partir de características dos usuários que são extremas. Elas “representam as motivações, desejos, expectativas e necessidades, reunindo característiscas significativas de um grupo mais abrangente.” (MJV, 2012, p. 80).

difusor de conteúdo ←→ receptor de conteúdotecnológico ←→ avesso às tecnologiasvaloriza novas experiências ←→ prefere as opções segurasprocura vivenciar a cidade de modo pleno ←→ ideia de lazer res-trita

A partir desse estudo pode-se fazer uma imersão nos perfis dessas personas para posteriormente criar Mapas de Experiências das mesmas.

9.4.2 Mapas de ExperiênciaOs mapas de experiências consistem em uma simulação da jornada do usuário a partir do momento do contato com a ideia, durante sua experiência e finalização (IDEO e +Acumen, 2013). Esse exercício é interessante para viver a jornada através do usuário, suas expecta-tivas e frustações e gerar alternativas visuais através de sketches. Este ponto ajuda a identificar o que necessita de aprimoramento, que será definido na fase de prototipação (JENNY, 2013) PERSONA 1Amanda, 29 anos, jornalista

Característica

- Interessada em conhecer as novidades tecnológicas, ela sempre tem o aparelho mais atual, mesmo que isso represente grande por-centagem do seu salário;- Quer saber de todas as novidades dos amigos jornalistas para difundir com seus amigos que estão fora desse eixo;- Conhece novos lugares durante o trabalho;


4 7

- Ela faz longos passeios pela cidade, saindo a pé, indo almoçar, pegando a bicicleta para prolongar a saída, passando em um café, onde encontra uma feirinha e fecha a noite no cinema.- Ela é comunicativa e quando gosta e acredita em algo, difunde para as outras pessoas.

Jornada

- Amanda recebe na redação um email com a resenha deste novo aplicativo;- Ela fica atraída pela ideia de difundir seus gostos pessoais;- Baixa o aplicativo na App Store (1) e começa a testar os filtros da

tela principal (2);- Olha as primeiras opções e já cria sua opinião sobre os lugares abordados, se são atuais, legais ou não;- Clica em um lugar para testar e ver as opções que existem, então decide compartilhar uma delas com uma amiga;- Aparece a mensagem para fazer um cadastro, e sem tempo ela prefere se cadastrar pelo Facebook;- Depois compartilha a dica de lugar com a amiga, volta para a tela principal e testa os botões. Clica no ícone de pessoa solitária e encontra seu perfil. Passa os olhos pelas informações e encontra o botão “adicionar local”;- Fica curiosa se a feirinha que vai no fim de semana está disponível no aplicativo;- Começa a preencher os dados na busca do aplicativo, mas nenhum local aparece com o mesmo nome então ela continua a preencher.

20. À esquerda (1), à direita (2)


4 8

- Não lembra direito do endereço da feirinha e, para adicionar o local com exatidão, ela sai do aplicativo, entra no Safari, faz uma busca no Google e copia o endereço;- Abre o aplicativo de novo e os dados ainda estão lá, então ela cola a informaç!ao e finaliza seu cadastro com uma foto que tirou de seu prato para o Instagram.- Compartilha a feirinha com um amigo com a mensagem: “Essa é a feirinha que te falei que é animal!”

PERSONA 2henrique, 30 anos,engenheiro agrônomo

Características

- Desinteressado das novas mídias sociais, Henrique comprou seu smartphone após reclamações insistentes de sua namorada por não ter WhatsApp;- Ele não gosta de lugares novos, prefere não arriscar e ir naqueles que já conhece e gosta;- Ele ama comer arroz, bife e batata frita;- Ele sai de casa para apenas um programa, não é muito flexível

Jornada

- Henrique combina de encontrar seus amigos, mas o restaurante que sempre vão está fechado;- Ele recebe através de um amigo uma mensagem por WhatsApp com um novo lugar para ir com o aplicativo “sp <3”;- Clica no link e abre o aplicativo na App Store, solicitando que o aplicativo seja baixado;

21. (3)


4 9

- Henrique baixa o aplicativo, um pouco irritado com o trabalho que está tendo;- Volta na mensagem e clica de novo na sugestão do amigo;- Quando o lugar aparece (3), ele vê quantas pessoas curtiram, lê a resenha e fica interessado. Lê o endereço e clica para abri-lo no mapa;- Usando o Google Maps e sai de casa para encontrar seu amigo.

PERSONA 3Alexandre, administrador, 27 anos

Características

- Alexandre adora estar por dentro das novidades, mas não é o primeiro a conhecê-las- Ele está aberto a ir a novos lugares, mas não sabe onde procurá-los- Alexandre normalmente conhece novos lugares através das dicas de seus amigos- Ele tem por hobby possuir todas as novidades tecnológicas possíveis, como os últimos modelos de celulares e tablets e conhecer as integrações destes aparelhos com outros como carros e aparelho de som.

Jornada

- Alexandre conhece o aplicativo através de uma atualização do feed de uma amiga;- Ele entra na App Store e o baixa;- Aparece a opção de se cadastrar e ele o faz através do Facebook porque já está cansado de tantos perfis diferentes;

22. À esquerda (4), à direita (5)


5 0

- Ele clica nos ícones do menu para entender como funciona;- Encontra seus amigos (4) e procura o perfil de sua amiga descolada (5);- Já pensando no programa de sexta-feira à noite, entra no filtro “festas” (6) e se interessa pela festa que acontecerá no Buraco da Minhoca (7);- Alexandre então adiciona o programa à sua lista e compartilha (8) para seu grupo de amigos no WhastApp: “Fechou sexta-feira?”

23. À esquerda (6), à direita (7)e abaixo (8)


5 110. Naming e Identidade Visual

10.1 Naming

Para o desenvolvimento do naming foram levantadas algumas alternativas ainda na fase de brainstorm. Dentre as opções foram cogitados os nomes:

- sp <3;- conta mais;- me leva;- indico.

Destes o que mais se mostrou satisfatório para o ideal do aplica-tivo foi o “sp <3”. Isto porque a ideia é usar a linguagem de web, do coração formado pelos caracteres “<” e “3”, como sinônimo de carinho pela cidade que se habita. O modo de representar São Paulo pela sua abreviação permite que sejam feitas outras versões para outras cidades como “mg <3”, “rn<3”.

10.2 Identidade Visual

10.2.1 Estudo de FontesSendo assim foram iniciados os estudos com possíveis fontes. O requisito era que a fonte deveria ter o “3” levemente simétrico, para remeter mais facilmente ao coração, ser regular de modo a ter fácil legibilidade e não ficar distorcida quando reduzida.


5 2Após estudos foi escolhida a fonte DaxlinePro. Embora a intenção fosse manter a impressão dos caracteres “<” e “3”; seus tamanhos eram muito desproporcionais, por isso foi feito um ajuste no taman-ho, mas mantendo uma leve diferença entre eles.

10.3 Versão Final

Como o conceito do aplicativo é se expandir para outras cidades, optou-se por utilizar apenas tons de cinza no logo ao invés de uti-lizar cores normalmente relacionadas à cidade.

26.Versões positiva e negativa finais do logo.

25.Estudo do logo ainda não finalizado

24.Estudo de fontes para o desenvolvimento do logo.


5 311. Layout

Definida a identidade visual começaram os estudos para o layout do aplicativo.

11.1 EsboçosForam feitos esboços de como seriam as telas principais, a dis-posição dos elementos e como que essas telas vão interagir.

Como foram escolhidos doze temas para serem dispostos na página principal, optou-se por fazer uma diagramação na qual todos os temas aparecessem ao mesmo tempo sem que o usuário tivesse que arrastar a tela para cima.

27.Esboços da tela principal do aplicativo


5 4

11.2 Ícones

Os ícones são utilizados como representações das funções exerci-das no aplicativo.

11.2.1 ReferênciasAs referências para a escolha do símbolo foram aplicações já usa-das em outros aplicativos e sites, respeitando o design já existente em outros aplicativos para facilitar o entendimento do usuário.

28.Esboços da tela principal do aplicativo,

e de algumas funcion-alidades, como acesso ao

menu e um local


5 5

11.2.2.1 Feedback

É de extrema importância dar um feedback para o usuário quando ele estiver usando o aplicativo.

No caso dos ícones, ele deve ter uma resposta a sua ação e saber que está acessando o que desejou, por isso quando o ícone for sele-cionado sua cor mudará tornando-se mais clara.

11.2.2 Ícones Finais

Amigos

Preferências

Amar

BuscaFavoritos

VoltarPerfil

Compartilhar

Configurações

Inativo Ativo

11.3 Grupos

Foram selecionados doze temas para enquadrar todas as opções de lazer existentes. Optou-se por nomes de temas mais genéricos para nomear os grupos de forma que todos os tipos de lugares fos-sem contemplados, não importando se o local é aberto ou fechado, temporário ou fixo. São eles:

1. Comida

Restaurantes, feiras e food trucks.

29.Referências de ícones de aplicativos e sites.


5 6

2. Arte

Arte de rua, exposições em museus, feirinhas de arte, locais de venda de arte, instalações, dança, teatro e musicais.

3. Filmes

Cinema, corujões, filme no museu e no vão do MASP.

4. Festa

Festas em boates, festas de rua e carnaval fora de época.

5. Arquitetura

Construções importantes para a arquitetura, prédios, casas, pontes.

6. Praça

Praças e parklets.

7. Bike

Pontos de aluguel e bicicletários.

8. Parque

Parques.

9. Café

Cafés.

10. Bar

Bares da cidade.

11. Música

Casas de show, shows na rua.

12. ?

Opção para o usuário receber uma sugestão do aplicativo do que fazer.


5 712. Protótipo do Aplicativo

12.1 Ícone na Tela Inicial

O ícone do aplicativo usou o logo na versão negativa.

Sp <3

ícone do aplicativo na tela inicial

30.Ícone do aplicativo aplicao na tela de um

smartphone.


5 8

12. 2 Tela Inicial

A proposta da tela inicial é mostrar de uma forma direta todas as funcionalidades do aplicativo sem que seja necessário fazer o cadastro, isso para que o usuário tenha vontade de navegar pelo aplicativo sem impedimentos neste primeiro contato. Para facilitar a busca os botões foram dispostos em ordem alfabética.

Da tela inicial será possível acessar a maioria das funções do aplicativo como: acessar o próprio perfil, buscar pessoas e lugares, acessar os amigos e ver o que o usuário amou.

A barra de busca foi pensada no caso do usuário conhecer ou saber o nome do que pretende buscar, ou caso ele não saiba dizer em qual seção está o que ele procura.

Favorito x “Amou”

Quando escolhido como favorito, o usuário adicionará o programa ao seu perfil, já quando o usuário “ama” algum lugar, ajudará a mostrar um ranking do local e o mesmo ficará exposto em uma tela à parte, isso para os casos em que o usuário deseja armazenar um local sem mostrá-lo no seu perfil.

31.Simulação da tela inicial do aplicativo


5 9

12.3 Configurações

Para acessar as configurações, é necessário que o usuário toque no ícone do lado inferior esquerdo. O menu deslizara e as funções dele são fazer login e logout, ter acesso aos lugares que o usuário inseriu e buscar informações e o contato da equipe do aplicativo.

O login poderá ser realizado através de outra rede social, como o Facebook, para facilitar o acesso dos usuários ou pelo cadastro no próprio aplicativo. O interessante de fazer o cadastro por outras redes sociais é importar os contatos existentes para o aplicativo.

dois toques

um toque

arraste

32.Telas de acesso às configurações

a partir da tela inicial.


6 0

dois toques

um toque

arraste

12.4 Preferências de Procura

Quando o usuário acessar um dos filtros dispostos na tela inicial (como bar, bicicleta, etc) ele será direcionado para uma tela conten-do várias opções de programas. Nela poderá acessar um menu de configurações de busca, com um toque ou arrastando o ícone para o lado, na qual ele poderá optar por qual será seu critério:

- aberto agora: configurar a procura apenas para o que pode ser feito no momento;

- novo: lugares que abriram recentemente;

- preço: filtrar a procura pelo preço do evento, que pode ser gratuito (como ir para a praça) ou caro em alguma festa ou restaurante, dentre outros;

- localização: filtrar a procura para o usuário que quiser procurar apenas lugares perto de onde se encontra;

- recomendações: neste caso a busca funciona a partir dos favoritos dos amigos do usuário e/ou caso ele não tenha amigos, dos que os usuário em geral “amam”.

33.Acesso às prefer-ências de procura.


6 1

Quando o usuário optar por ver um programa, uma nova tela abrirá com uma descrição dele, quantas pessoas o “amaram” e com co-mentários de amigos e usuários.

Com isso, ele poderá adicionar aos seus favoritos, “amar”, adicio-nar comentário, compartilhar a informação em mensagens fora do aplicativo e/ou ir para o local com o gps acessando o link “hey ho! let’s go!” (em referência à música “Blitzkrieg Bop” dos Ramones).

12.5 Adicionar aos “amados”

Quando o usuário tiver interesse em algum programa, mas não quiser deixá-lo disponível em seu perfil, ele poderá adicioná-lo aos “amados.

Assim somente ele terá acesso ao programa através do menu prin-cipal clicando no ícone de coração.

dois toques

um toque

arraste

34.Exemplo de como um local pode ser adicionado

aos lugares “amados”


6 2

dois toques

um toque

arraste

12.6 Adicionar aos favoritos

Para adicionar um programa como favorito e, assim, adicioná-lo ao seu mural de programas, o usuário deve tocar na estrela que aparece em outline, que ao ser selecionada, fica preenchida.

Para dar um feedback para o usuário após o local ser escolhido como favorito, uma mensagem aparecerá na tela com uma grande estrela e uma frase afirmando em qual pasta o programa foi in-serido.

Caso o usuário queira ver a opção seguinte, ele poderá voltar à tela anterior com o toque na seta do lado superior esquerdo para visu-alizar as opções em miniaturas; ou poderá passar para o lado com o toque arrastado da direita para a esquerda e visualizar a próxima opção.

35.Imagem explicativa de navegação entre lugares.

Imagem exemplifi-cando como adicionar um local aos favoritos


6 3

12.7 Acessar o perfil

A opção de manter a barra do menu inicial em todas as outras telas foi pensada para garantir o acesso a algumas funcionalidades não importa em qual tela o usuário estiver navegando, como o acesso ao perfil.

No perfil do usuário é possível fazer uma procura através da barra de procura, visualizar suas pastas com seus favoritos, visualizar todos os programas inseridos sem estarem dentro das divisões e adicionar um local novo.

dois toques

um toque

arraste

36.Visualização pela perspectiva do usuá-

rio de seu perfil


6 4

12.8 Adicionar um novo local

Embora não seja a função principal do aplicativo, Adicionar um novo local é muito importante para que o usuário seja parte ativa do aplicativo e interaja ajudando a criar o seu conteúdo ao adicionar lugares que gosta e se identifica.

Para realizar o cadastro o usuário deverá fornecer algumas infor-mações do lugar obrigatoriamente. Caso já tenha algum lugar com o mesmo nome e/ou a localização o cadastro não será efetuado.

12.9 Amigos

O usuário poderá encontrar seus amigos buscando seu nome direto na barra de procura. Depois de adicionados, ele conseguirá encon-trar seus amigos ao clicar no ícone de “amigos”.

Lá estarão todos seus amigos dispostos em ordem alfabética. Ao visualizar o perfil de um amigo, ele terá acesso aos programas que o amigo adicionou como favorito divididos por pastas, haverá a opção de olhar todos os programas recentemente adicionados e os

37.Demonstração da tela de cadastro de novos

locais.


6 5

dois toques

um toque

arraste

amigos dele.

38.Exemplo do acesso ao perfil de um amigo

39.Como visualizar os amigos de um amigo


6 613. Fluxo Funcionamento

Na página seguinte segue um esquema do Fluxo de Funcionamento do Aplicativo com suas princiapais funções.


6 814.Conclusão

Este trabalho partiu da concepção da cidade expandida, uma es-trutura dinâmica de fluxos entre diferentes espaços graças à teia de relações estabelecidas entre os diferentes agentes socioeco-nômicos e culturais apoiadas em redes materiais e imateriais, entre elas, as redes sociais.

Observou-se que entre os maiores problemas para conhecer novos locais de entretenimento configuravam-se as filas, a falta de infor-mações sobre o local, a preguiça, a dificuldade em achar sugestões confiáveis e a ideia restrita de lazer.

Este levantamento foi importante para o desenvolvimento do Apli-cativo, um tipo de rede social de lugares que mostra programas que mostram programas que os usuários podem fazer na cidade, poderia ainda ter um perfil com seus lugares de interesse, entrar no perfil dos amigos para ver o que eles indicam e adicionar lugares que ele considera interessante.

Os requisitos do serviço foram concebidos através da pesquisa com usuários e se refere ao que se pretende atingir com o aplicativo desenvolvido, como incentivar os usuários a conhecer novos lugares na cidade; ampliar o conceito de lazer existente, através de propostas de programas considerados alternativos, como festa de rua, piquenique no parque, facilitar o acesso às informações desejadas pelos usuários; garantir que o conteúdo do aplicativo seja compreendido desde o primeiro acesso do usuário; ser atraente esteticamente; permitir que o usuário participe do con-teúdo do programa, adicionando lugares novos e compartilhando seus gostos.


6 9

A identificação das necessidades dos usuários e a criação de ideias inovadoras, implementadas no aplicativo apresentado neste estudo, pode traduzir como a tecnologia social poderia atender necessi-dades sociais do grupo específico.

Sua incorporação à prática cotidiana, poderia resultar em usos ino-vadores, de baixo custo e grande poder transformador na maneira vivenciar o lazer e a cultura na cidade. Sendo assim acredito que foi alcançado um resultado coerente com os objetivos do projeto.


7 015.Considerações Finais

Este trabalho surgiu da visão de uma designer sobre a cidade. Visão esta possível graças ao ensino que tive no curso de Design na Fac-uldade de Arquitetura e Urbanismo da Universidade de São Paulo.

Com menos tempo para me dedicar ao projeto, pois já estou in-serida no mercado de trabalho e só me restaram as horas que estão fora do horário comercial para estudar, tive algumas dificul-dades com prazo, o que resultou no postergamento da entrega do trabalho e me fez, algumas vezes, ter de priorizar certas etapas em detrimento de outras para que o projeto fosse finalizado no tempo correto.

Ainda assim, pude desenvolver mais um trabalho, utilizando princi-palmente a metodologia de Design de Serviço centrada no usuário e refletir que, mesmo que o relatório tenha uma ordem pontual, muitas vezes é necessário voltar etapas, principalmente no se refere à pesquisa de referências, que a gestão do tempo é essencial para que o trabalho termine com o melhor resultado possível e que escolhas fazem parte do processo.

Pude exercitar o design de serviço, muito pouco trabalhado durante a minha formação aliado à área com a qual mais me identifico den-tro do design: o Desing Gráfico, buscando uma relação melhor do cidadão com a cidade.

Por isso, fico satisfeita com o resultado deste projeto, ele represen-ta o que levo comigo desta formação tão completa, que me ensinou a ver/ enxergar em todas as escalas possíveis, como designer, como pessoa e como cidadã.


7 116.Referências

BEIGUELMAN, G. Arte pós-virtual: criação e agenciamento na era da internet das coisas e da próxima natureza. In: Fernando Pessoa. (Org.). Cyber-arte-cultura. 1 ed. Vitória/Rio de Janeiro: Museu Vale ES/ Suzy Muniz Produções, 2013

BEIGUELMAN, G. Espaços de Subordinação e Contestação nas Redes Sociais. Revista USP, Brasil, n. 92, p. 20-31, fev. 2012. ISSN 2316-9036. Disponível em: <http://www.revistas.usp.br/revusp/article/view/34880>. Acesso em: 12 Jan. 2015. doi:http://dx.doi.org/10.11606/issn.2316-9036.v0i92p20-31.BEIGUELMAN, LA FERLA. Nomadismos Tecnológicos. Editora Senac, São Paulo. 2011

LEMOS, A. Cibercidade: As cidades na cibercultura Derivas: cartografias do ciberespaço. In: Derivas: cartografias do ciberespaço, LEÃO, Lucia. São Paulo: Annablume, 2004

GERMANO, VALENTE. CIDADE ExPANDIDA: hibridismo e expansão de um conceito para o contexto das redes tecnológicas. 2012 Dis-ponível em < http://medialab.ufg.br/art/anais/textos/AgnusValente-NardoGermano.pdf>. Acessado no dia 24/11/2013.

FREIRE, J. ¿Qué es la tecnología social?, 2011. Disponível em < http://nomada.blogs.com/jfreire/2011/08/qu-es-la-tecnologa-so-cial.html >. Acessado no dia 24/11/2013

FREIRE, J. Territorio = geología x infraestructuras x política, 2011. Disponível em < (http://nomada.blogs.com/jfreire/2010/11/terri-torio-geologia-infraestructuras-politica.html >. Acessado no dia


7 2

24/11/2013

FERNANDES, MACIEL, Tecnologias sociais: interface com as políti-cas públicas e o Serviço Social, 2011, Disponível em <http://www.scielo.br/scielo.php?pid=S0101-66282011000100009&script=sci_arttext>. Acessado no dia 20/11/2013.

IDEO. Human Centered Design: Kit de ferramentas. 2o ed.

http://www.apple.com/br/iphone/business/docs/In-house_App_Ac-celerator_Guide.pdf

Documents

Cidade Expandida - FAU - USP · Cidade Expandida • TCC 2 • Design • FAUUSP • 2014 • Luiza Campanelli Marçal Vieira Palavras- Chave 2 Cibercultura, ... 7.2.2 Usabilidade