Usando tecnologia para incentivar o uso da bicicleta no dia-a-dia

Cristiano Dalbem
bike de boa
Published in
9 min readJan 15, 2018

Essa história começa em Outubro de 2016, na Hackathon da Isobar, em Porto Alegre. Naquele dia programadores e designers se reuniram para pensar e implementar, em 24 horas, ideias que pretendiam nada menos que melhorar a vida das pessoas com tecnologia. O bike de boa nasceu como uma possível resposta à pergunta: como a tecnologia poderia incentivar o uso da bicicleta no dia-a-dia das cidades brasileiras? 🤔

Neste artigo vamos falar sobre:

  • Qual era problema e como pensamos em resolvê-lo.
  • O que é um PWA, e porque decidimos usar essa tecnologia.
  • Quais foram nossas principais decisões de Design.
  • O que há por vir, e como se envolver.

Estacionamentos de bicicletas

Pensando na jornada comum do ciclista procuramos pontas soltas em que poderíamos ajudar. Em nossa pesquisa de mercado vimos que pouquíssimo se falava sobre o que fazer com a bicicleta depois que chegamos no destino. A maioria dos aplicativos para ciclistas era voltada à bicicleta como esporte, ou ao cálculo de rotas. Mas de que adianta ter os mais avançados algoritmos para calcular itinerários se na nossa cidade faltam ciclovias e não nos sentimos seguros de compartilhar a via com os carros?

Este é um grande problema cultural, que talvez um aplicativo não dê conta de resolver. Vivemos em cidades feitas com uma lógica “carrocêntrica”, onde os carros são priorizados sobre outros meios de transporte. Motoristas acham que as ruas só servem para seus veículos motores, barulhentos e poluentes. E ainda insistem em botar nossas vidas em risco com suas “finas educativas”.

Bicicletários, como são chamados estacionamentos de bicicletas, são feitos para oferecer conforto e segurança para os ciclistas e funcionam como um “marketing subliminar para o uso da bicicleta no dia-a-dia”. Há até pesquisas que comprovam que a instalação desse tipo de mobiliário traz benefícios para a economia local aumentando a clientela e as vendas. 🚲=💰

Exemplos de estacionamentos de bicicleta. Alguns adequados, outros nem tanto.

Em Porto Alegre era muito difícil encontrar bicicletários, e os poucos que encontrávamos raramente ofereciam boas condições de uso. Pensamos em como poderíamos mapeá-los, de maneira a dar visibilidade pra quem se preocupa com os ciclistas. Mais ainda: quem sabe no processo ainda ensinaríamos sobre o que diferenciam bicicletários bons dos ruins e que vantagens trazem, incentivando que mais fossem instalados.

O primeiro mapa colaborativo de bicicletários de Porto Alegre, criado em 2010. Link

Este foi o primeiro mapeamento colaborativo de bicicletários de Porto Alegre, criado pelo usuário aislan’ Aln’ em 2010. Ele nunca divulgou muito o mapa, e acabou o esquecendo. Mal sabia ele que ao longo dos próximos anos o mapa acumularia mais de 150 contribuições e seria divulgado nos principais blogs e sites da região!

A ideia parecia ótima, e ver que havia outras semelhantes pelo Brasil demonstrou que mais gente pensava como a gente. Mas como programadores e designers achamos que podíamos desenvolver uma plataforma melhor, que atendesse às necessidades dos usuários. Os principais problemas que gostaríamos de resolver eram:

  • 👍 Confiabilidade. O quão bons eram esses bicicletários mapeados? Não havia como consolidar opiniões em uma "nota" que pudesse ser classificada.
  • 👌 Consistência nos dados. A maioria dos usuários se contentava em cadastrar o bicicletário apenas com um nome e um endereço, e uma minoria tinha mais conhecimento e era mais caprichosa.
  • 🍰 Facilidade de uso. Há sempre uma troca entre uma solução genérica, que atende a todos os casos, e uma que é focada em resolver apenas um problema. Achamos que poderíamos oferecer uma experiência melhor criando uma plataforma focada no nosso problema.
  • 🔍 Indexação. O conteúdo destes mapas não é indexável por motores de busca, o que significa que não dá pra achar esses bicicletários no Google. (Aliás, este é um problema recorrente em apps que não tem versão web, e portanto o conteúdo só é acessível por smartphones com o aplicativo instalado. Convenhamos que isso não é muito democrático.)

Construir apps nativos é trabalhoso, normalmente exigindo ser refeito pra cada plataforma (Android, iOS, …). Para nós a Web se mostrou a melhor plataforma, pois atendia nossas necessidades e fazia sentido dado o tamanho da nossa equipe. E descobrimos que usando uma nova tecnologia chamada PWA poderíamos oferecer uma experiência excelente em qualquer dispositivo com o mínimo de esforço.

"É preciso que as pessoas exijam as coisas certas.

Se você, por exemplo, perguntar a uma criança o que ela quer de natal, ela vai responder uma lista de coisas que já conhece. Uma criança nunca pediria algo de que nunca ouviu falar. O mesmo vale para as demandas das pessoas em relação às cidades. É fundamental que haja informação sobre como uma cidade pode ser melhor para que a sociedade exija as coisas certas”—Jan Gehl, Arquiteto e Urbanista

Progressive Web Apps

O escritor e empreendedor Eric Eliott, em sua série de artigos Why Native Apps are Doomed (pt.1 e pt.2) cita que:

  • 60% dos apps no Google Play nunca foram baixados.
  • Na média um usuário baixa menos de 3 apps por mês.
  • Usuários de dispositivos móveis passam a maior parte do tempo em apps, mas 94% da receita vem de 1% dos fornecedores, e usuários gastam 80% do seu tempo em apenas 5 apps (Facebook, Instagram, …)
  • 80% dos usuários que baixam um app não se tornam usuários ativos.

Há cerca de 2 anos os engenheiros da Google decidiram virar uma nova página na história da Web e criaram o conceito de PWA, que tenta criar uma ponte entre o mundo dos sites e dos apps trazendo o melhor dos dois mundos. PWAs são tecnicamente sites normais, mas que podem se comportar como aplicativos nativos.

Segundo a Google, estes são os 3 principais benefícios PWAs trazem para a Web:

  • Rápidos. Pesquisas apontam 53% dos usuários abandonam um site se ele leva mais de 3 segundos pra carregar—e na média os sites levam muito mais tempo que isso.
  • 🎮 Atraentes. PWAS oferecem a mesma experiência de uso consagrada dos apps convencionais. Isso significa ter na web funcionalidade como Push Notifications, atalho na tela inicial do celular, tela cheia (esconde a barra de endereços do navegador), etc.
  • 👍 Confiáveis. Usam conexões seguras (HTTPS) e funcionam em condições diversas de conectividade, seja uma rápida wifi ou uma 3G meia-boca.
Uma lista inicial das vantagens de ser um PWA.

Projetando o Bike de Boa

Mapa

Em um aplicativo de geolocalização e mapas não poderiam faltar os clássicos pins. Os nossos trazem, já em sua cor, uma sinalização da qualidade do bicicletário segundo a média das avaliações dos usuários.

Os em cinza são bicicletários mapeados que ainda não tiveram nenhuma avaliação. Entendemos que o ato de mapear um bicicletário e avaliá-lo são coisas distintas. Queremos facilitar ao máximo a contribuição, e entendemos que o usuário pode ter avistado um lugar na rua, numa parte da cidade que não conhecia bem, e portanto não faria sentido obrigar a avaliá-lo.

Graças às cores dos pins, o nosso usuário já de cara tem uma visualização da distribuição de bicicletários pela cidade e a qualidade deles. Para contrabalancear o ruído visual, simplificamos a paleta de cores e as informações mostradas no mapa através do editor Snazzy Maps.

Qualquer usuário pode adicionar novos pontos, e estes aparecem automaticamente no mapa. Achamos importante o projeto não depender de uma curadoria, visto a quantidade de projetos semelhantes que morreram por falta de uma manutenção ativa. Dando mais controle aos usuários a plataforma é mais escalável e fácil de manter, tendo um mínimo de ferramentas para reverter facilmente abusos pontuais.

O Google Maps permite personalizar completamente o mapa. Ferramentas como o site Snazzy Maps ajudam a fazer isso sem tocar em uma linha de código.

Modelagem

Quando começamos a pensar num aplicativo de mapeamento de bicicletários não queríamos apenas localizá-los geograficamente, ou dar um campo de texto livre pro usuário preencher livremente. Nós nos perguntamos: “o que é essencial que todos saibam sobre bicicletários?”

É importante saber se o local é acessível publicamente, ou se ele tem acesso restrito. Qualquer um pode usá-lo, ou deve ser cliente/morador/funcionário?

Também achamos importante mapear o tipo de bicicletário. Há vários tipos diferentes, cada um com seus pontos fortes e pontos fracos. Alguns são bem melhores que outros. Alguns nem são bicicletários de fato, mas são usados frequentemente pelas pessoas pra deixar suas bikes. Aqui usamos como material de pesquisa guias de "bicicletários adequados" do Brasil e do mundo, e esse estudo foi resumido no nosso Guia de Tipos de Bicicletários.

Filtrar os resultados no mapa fica fácil com dados estruturados.

Vale notar que o projeto almeja mapear não só o que seria considerado estritamente bicicletário ou paraciclo. Quando damos as opções de "grades" ou "traves" estamos sugerindo que há mobiliários urbanos que são ressignificados pela população como estacionamentos de bicicleta. Essas ocorrências também podem ajudar servindo como termômetro para regiões da cidade carentes de estruturas melhores.

Tooltips contextuais informam os usuários sobre os pontos fortes e pontos fracos de cada tipo de bicicletário, além de boas práticas para prender a bicicleta com segurança.

Outros atributos mais "subjetivos" dos bicicletários são colaborativamente preenchidos atráves das avaliações. Com elas as pessoas podem ter uma noção real do quão seguro um bicicletário é. Além de uma nota, o usuário pode atribuir tags que trazem em detalhes as vantagens de cada bicicletário e ajudam a fazer o bike de boa uma plataforma mais confiável, e por que não educativa.

As avaliações que os usuários deixam nos bicicletários também são estruturadas.

Instalação

No Chrome foi implementado um sistema de banner de instalação. Ele não é muito auto-explicativo, e além disso o desenvolvedor tem pouco controle sobre a sua ativação. Outros navegadores como Firefox, Samsung e Opera estão começando a adicionar tratamentos especiais pra PWA que parecem promissores.

Encontramos no GIF uma boa maneira de ensinar o conceito de instalar um PWA na tela inicial do celular.

Para ensinar os usuários a instalar o PWA na tela inicial do celular nós usamos GIFs animados: há um para cada um dos principais navegadores, e na seção Como Instalar o App nós detectamos (ou pelo menos tentamos) o navegador do usuário para mostrar o GIF correto. 😊

Tecnologia

Temos apenas um código fonte que atende todos dispositivos, separados em um repositório para o front-end e outro para o backend e API. Todo nosso projeto é Open Source, o que significa que o código e nossos dados são abertos, e a ideia é facilitar ao máximo que qualquer pessoa contribua.

Em um artigo futuro iremos descrever em mais detalhes as tecnologias que usamos. 🤓

Próximos Passos

“O bike de boa terá atingido seu propósito quando ele não for mais necessário.”

Como todo trabalho de ativismo, nosso principal objetivo é um dia ele não ser mais necessário. Em cidades onde a cultura da bicicleta já está em alta já há tantos bicicletários pela cidade que um app como este é inútil: tu simplesmente pega tua bici e vai pra onde quiser, com a confiança de que terá um bom lugar pra deixá-la 😎 . Mas até isso acontecer, temos algumas ideias:

  • 🌎 Expandir. Achamos que nossa solução é escalável para o país inteiro. Uma ideia é integrar na plataforma outras fontes de dados, como o OpenStreetMaps, que é a maior iniciativa de mapa colaborativo do mundo.
  • 📢 Divulgação e SEO. Em projetos colaborativos quanto mais pessoas usam, melhor ele fica. Nosso desafio então é como fazer mais pessoas conhecerem o projeto com os recursos limitados que temos, e SEO é um forte aliado.
  • 👥 Incentivar a contribuição. Aplicativos como o Waze e TripAdvisor são excelentes em criar “mecanismos de recompensa” que incentivam os usuários a contribuir mais. Queremos deixar claro pro usuário o valor que cada contribuição dele traz para as outras pessoas.
  • 📚 Geração de conteúdo. Temos lido muito para embasar melhor nosso trabalho, e queremos compartilhar isso.
  • 📈 Visualização de dados. Estamos cheios de dados sobre a estrutura cicloviária das cidades brasileiras e a relação das pessoas com ela. Queremos encontrar maneiras interessantes de visualizar estes dados para incentivar que as decisões das cidades sejam tomadas com base em dados.

Como se envolver

  • ❤️ Se tu se interessa pelo tema, quer aprender mais ou tem ideias que quer conversar com a gente, temos um grupo de discussão projeto no Slack, é só chegar.
  • ☕ ️Tu pode nos ajudar com os nossos custos mensais de manutenção nos pagando um cafezinho pela nossa página no Apoia.se. Qualquer dois reais já ajuda, e demonstra que tu apoia a causa.
  • 🤓 Se tu manja de Desenvolvimento Web (front-end ou back-end) ou curte Design de Interação temos um bom backlog de tarefas de todos níveis de complexidade. Toda ajuda é bem vinda!
  • Ou se tu manja de Marketing, Urbanismo, Jornalismo, é empreendedor, curte fazer umas artes, ou qualquer coisa bacana e acha que pode somar, chega junto!

Acompanhe o projeto nas redes sociais: Facebook, Instagram, ou aqui mesmo no Medium. 🙋

Acesse o site: https://www.bikedeboa.com.br

--

--