1

Geórgia Nunes

Jeferson Vieira

Laís Lage

Projeto “bora!” - Desenvolvimento de Interface

Pós-Graduação em Design Estratégico – Turma 2011 A

Salvador - Bahia

2013

2

APRESENTAÇÃO

A experiência de ser confrontando diariamente com todos os problemas de mobilidade

urbana da cidade de Salvador levou à inquietação um grupo de estudantes do curso

de Design Estratégico da UNIFACS e este foi o ponto de partida para o

desenvolvimento de um aplicativo para smartphones denominado “bora!”.

Objetivando melhorar a mobilidade urbana, reduzindo a quantidade de carros nas

ruas, concomitante à mudança de posicionamento dos usuários frente aos

problemas coletivos, os quais sairão da esfera do individual para a esfera do

colaborativo, o aplicativo visa promover a integração entre os “caronas” e os

motoristas, estimulando dessa forma a concretização, de fato, da carona.

3

SUMÁRIO

1. INTRODUÇÃO ................................................................................................... 06

2. HIPÓTESES ........................................................................................................ 07

3. QUAIS OS OBJETIVOS DO “BORA!” ? ............................................................ 09

4. JUSTIFICATIVA .................................................................................................. 10

4.1 PORQUE PROJETAR UMA INTERFACE PARA AUXILIAR CARONAS? ........... 10

5. FUNDAMENTAÇÃO TEÓRICA .......................................................................... 11

5.1 QUEM SÃO OS USUÁRIOS DO “BORA!”? ........................................................ 11

5.2 QUAIS AS NECESSIDADES DOS USUÁRIOS .................................................. 11

5.3 ESTABELECIMENTO DOS REQUISITOS .......................................................... 13

5.3.1 Requisitos funcionais........................................................................................... 13

5.3.2 Requisitos técnicos e de dados ........................................................................... 13

5.3.3 Requisitos ambientais ......................................................................................... 15

5.3.4 Requisitos do usuário .......................................................................................... 16

5.3.5 Requisitos de usabilidade .................................................................................... 18

6. METODOLOGIA ................................................................................................. 19

6.1 DESENVOLVENDO A INTERFACE .................................................................... 19

6.1.1 Cenários .............................................................................................................. 19

6.1.2 Casos de uso ...................................................................................................... 20

6.2 ANÁLISE DE TAREFAS ...................................................................................... 21

6.2.1 Análise hierárquica de tarefas (AHT) ................................................................... 24

6.3 PROTOTIPAÇÃO ................................................................................................ 25

6.3.1 Prototipação de baixa fidelidade (storyboard) ..................................................... 25

6.3.2 Prototipação de média fidelidade ........................................................................ 29

6.4 DESENVOLVIMENTO DO DESIGN FÍSICO ........................................................ 36

4

7. LAYOUT DO SITE “BORA!” ............................................................................... 46

7.1 PROTOTIPAÇÃO ................................................................................................ 47

7.1.1 Prototipação de baixa fidelidade ........................................................................ 47

7.1.2 Prototipação de média fidelidade ........................................................................ 48

7.2 DESENVOLVIMENTO DO DESIGN FÍSICO ........................................................ 54

8. CRONOGRAMA .................................................................................................. 65

9. ORÇAMENTO ...................................................................................................... 66

10. REFERÊNCIAS .................................................................................................. 68

11. APÊNDICES ........................................................................................................ 75

APÊNDICE A – LISTA DE PRESENÇA DA ORIENTAÇÃO

APÊNDICE B – FICHA AVALIATIVA DOS DOCUMENTOS ESCRITOS

12. ANEXOS .............................................................................................................. 79

ANEXO1 – Algumas guidelines IOS

ANEXO2 – Algumas guidelines Android

5

Design é a capacidade de tornar tangível

uma intenção de transformação.

(Rique Nitzsche - Design Thinker, autor do

livro "Afinal, o que é design thinking?").

6

1. INTRODUÇÃO - O projeto “bora!” - de onde começou?

A cidade de Salvador está emersa em problemas urbanísticos e estruturais que

afetam diariamente os mais de 2 milhões de habitantes. O trânsito da cidade é um

completo caos, o qual tende a aumentar na medida em que milhares de novos

veículos particulares são inseridos nas ruas diariamente, e o desrespeito da

população para com as leis de trânsito compete para aumentar o estado de

calamidade instaurado na cidade. Por conta deste problema, que não apenas

cultural, mas configura, sobretudo, como um problema histórico, por consequência

da falta de planejamento com as qual as vias se formaram e as linhas foram criadas,

que se faz necessária providenciar medidas para repensar o trânsito da cidade e

criar alternativas que possam contribuir para a melhoria do tráfego na cidade.

Recentemente, em entrevista concedida a Radio CBN Salvador, quando tratava da

falta de mobilidade urbana na capital baiana, o secretário Municipal de Urbanismo e

Transporte de Salvador, José Carlos Aleluia, falou sobre a forma como a cidade foi

construída, como as vias nasceram e como as linhas de ônibus privilegiam os

empresários administradores de cada linha. Ele aponta, por exemplo, como um erro

grave de conjuntura, a falta de uma linha espinha dorsal com sub-linhas que

permeiem esta, e alega que o problema se configura por conta das linhas não terem

sido pensadas para levar o indivíduo de um ponto ao outro, tal como ocorre no metrô

dos grandes centros, mas as linhas de ônibus da cidade de Salvador foram pensadas

para abastecer o ônibus, e quanto maior a distância do ponto A ao ponto B, mais

passageiros conseguiria transportar e, consequentemente, maior seria o seu lucro.

Na entrevista ele afirma ainda que: “Quem engarrafa são os carros e não os ônibus”

e declara que o grande erro da população é acreditar que a solução para mobilidade

urbana é o transporte individual. Aleluia informa que a quantidade de pessoas que

usa carros é muito pequena, se comparada aos 60% de parcela da população que

utilizam ônibus, e ainda assim, os carros ocupam toda a rua.

Dessa forma, estando de acordo com os argumentos do secretário de Urbanismo e

Transporte, e tendo pleno conhecimento de que um problema coletivo não pode ser

resolvido de forma individual, o “bora!” visa buscar uma alternativa para os

problemas atuais de trânsito em Salvador, dentro da realidade dos centros

universitários, que integre a população em prol de um bem comum: a mobilidade.

7

O projeto configura como um aplicativo para smartphones, que integra motoristas e

não motoristas (os quais foram intitulados de “caronas”) para que a concretização da

carona ocorra, de forma rápida, simples e segura.

O projeto de interface do “bora!” visa desenvolver uma interface funcional, intuitiva,

harmônica, e que supra com eficácia as necessidades de todos os integrantes das

instituições de educação em que o projeto irá atuar.

A execução deste projeto, o qual integra a tarefa de conclusão do curso de

Especialização em Design Estratégico da Universidade Salvador – UNIFACS,

contará com orientação do Prof. Laert Yamazaki e supervisão da Coordenadora

Alessandra Carvalho.

2. HIPÓTESES

A mobilidade urbana é um tema abordado constantemente em todos os veículos de

comunicação, fator que leva a população a debater esse assunto de forma cada vez

mais intensa. Em Salvador, o tema ganhou repercussão recentemente, no mês de

agosto de 2013, com as medidas tomadas pela prefeitura da cidade que incentivam

os motoristas a adotarem a carona solidária.

Em 2012 o TEDx Pelourinho, evento de visibilidade internacional, foi palco de

discussões sobre mobilidade urbana. Pablo Fiorentino, defensor de cidades

humanizadas reforçou a ideia de que não é possível resolver problemas coletivos de

forma individual. Na sua palestra ele mostrou o quão importante são atitudes de

gentileza, respeito, e compartilhamento dos espaços, para o bom funcionamento do

fluxo da cidade.

Todas essas discussões levam a população a pensar sobre modelos de gestão e

gerenciamento da mobilidade urbana, e citar modelos adotados em localidades

como Londres e Bogotá, os quais vão de encontro à tendência da adoção de

soluções individualizadas para o setor transporte, pois é sabido que o aumento dos

índices de motorização mostra-se ineficiente quando analisado sob aspectos

ambientais, energéticos, e de ocupação espacial.

Sabe-se que o problema a ser enfrentado pelo gerenciamento de mobilidade é

alterado de acordo com a cultura de cada região e de acordo com o contexto sócio-

econômico de cada país.

8

Em Bogotá as diretrizes gerais para o projeto estão vinculadas a um conjunto de

aspectos que envolvem o estímulo da participação cidadã, tanto dos movimentos

populares, quanto da sociedade civil organizada, fomentando o efetivo controle

social das políticas públicas de mobilidade; a priorização dos investimentos no

sistema viário urbano e interurbano onde houver prioridade aos modos coletivos e os

não motorizados; estimula a adoção, nos Planos Diretores Urbanos, de princípios de

mobilidade que possibilitem uma melhor distribuição das atividades no território e

reduzam os deslocamentos motorizados permanentes; estimulam a implementação

de ciclovias, integrando-as à rede de transporte público existente. Em paralelo, são

utilizadas estratégias voltadas a uma maior integração entre aspectos vinculados a

transportes e uso do espaço urbano, valorizaram áreas degradadas da cidade,

possibilitando uma maior qualidade de vida para os residentes nessas áreas.

Em Londres o programa de Gerenciamento de Mobilidade é mais difundido e

consolidado, o qual aborda diferentes estratégias, utilizadas em conjunto ou

separadamente. Dentre as diversas campanhas existentes na capital, é importante

destacar a “Car Pooling”, campanha para compartilhamento de carros, a qual

incentive o uso de um único carro por dois ou mais motoristas, reduzindo dessa

forma o congestionamento e a poluição. Lá são criados sites e programas que fazem

cadastro de usuários e suas respectivas viagens, visando facilitar a identificação de

possíveis parcerias para compartilhamento do carro para viagens rotineiras como

casa-trabalho-casa com usuários residentes na mesma área.

No Brasil, na tentativa de amenizar o engarrafamento e congestionamento do

trânsito algumas cidades já adotam o sistema de caronas solidárias, como a

megalópole São Paulo.

Em São Paulo e na região metropolitana, existem hoje 8,5 milhões de carros.

Segundo o site Notícias Automotivas, (www.noticiasautomotivas.com.br) a cidade

tem média de 27.000 emplacamentos por mês, que provocam uma média diária de

200km de congestionamento e levam cerca de 30% dos trabalhadores da cidade a

passarem 3 horas e 30 minutos no trânsito todos os dias. A partir desse panorama,

percebe-se a necessidade de melhorar o trânsito dos grandes centros urbanos do

Brasil tomando como base os modelos assertivos utilizados ao redor do mundo.

Práticas como caronas solidárias, rodízio de veículos, cobrança de pedágios urbanos,

e compartilhamento de carros foram soluções encontradas por outros países.

9

A partir desse cenário, a filosofia de “carona solidária” ganha força. Hoje, são

oferecidos pela internet serviços que facilitam a carona. Sites como o Caronetas

(www.caronetas.com.br) que estimulam carona entre funcionários de empresas,

Caroneiros (www.caroneiros.com) intitulado como a primeira rede social de caronas

no país , e Carona Solidária (www.caronasolidaria.com) que utiliza-se da carona

direcionado para a vertente ecológica, que já atuam por todo o Brasil . O site

Caroneiros, por exemplo, já tem aproximadamente 29.000 usuários cadastrados.

Dessa forma, fica claro que adotar políticas colaborativas de carona é um caminho

correto a ser trilhado.

3. QUAIS OS OBJETIVOS DO “BORA!”?

O livro "Haverá a idade das coisas leves - Design e desenvolvimento sustentável",

de Thierry Kazazian, editora Senac, afirma que devemos ampliar nossa percepção

do desenvolvimento à complexidade dos sistemas naturais. O ser humano busca

sempre imitar a complexidade dos sistemas naturais toda vez que desenvolve

alguma nova interface, e afirmar que um sistema é complexo não significa afirmar

que o mesmo seja de difícil entendimento. O próprio autor do livro afirma que o caos

é uma ordem natural cuja complexidade ainda ultrapassa nossa compreensão.

Dando prosseguimento à sua afirmação, ele cita Margaret Mead (1901-1978)

antropóloga americana, que diz: "Nunca duvide que um pequeno grupo de pessoas

possa mudar o mundo; de fato, é sempre assim que acontece".

A intenção do “bora!” não é, de fato, atingir a gigante parcela da população do mundo,

de 7,2 bilhões de habitantes, mas melhorar a forma de ir e vir das pessoas da pequena

comunidade soteropolitana de integrantes da comunidade UNIFACS. Se o projeto

conseguir mudar o pensamento e atitudes desse pequeno grupo, direcionando-as para

um bem comum já será um grande passo para uma mudança maior.

Dessa forma, o grande objetivo do “bora!” é facilitar a mobilidade urbana da cidade

de Salvador, diminuindo a quantidade de carros nas ruas, desenvolvendo um

sistema de alta complexidade para que se possa prever nele todas as tarefas a ser

executadas pelo usuário, e ainda assim, permitir que a sua interface seja de simples

entendimento e usabilidade.

10

O objetivo específico do projeto é desenvolver um aplicativo para promover a

integração entre o “carona” e motorista, viabilizando, dessa forma, de fato, a

concretização da carona.

4. JUSTIFICATIVA – Por que projetar uma interface para auxiliar caronas?

A experiência de ser confrontado diariamente com todos os problemas de mobilidade

urbana da cidade de Salvador levou à inquietação um grupo de estudantes da

UNIFACS e este foi o ponto de partida para o desenvolvimento de um aplicativo para

smartphones denominado “bora!”.

Dentre os problemas de mobilidade urbana encontrados em Salvador, pode-se listar

os seguintes: a cidade não oferece um sistema de transporte público eficiente, com

linhas bem distribuídas e não há uma política pública em prol de qualquer

mobilidade, projetos que prevêem transportes alternativos não saem do papel, o

metrô virou uma lenda urbana e piada nacional, e atrelado a todos esses fatores o

trânsito para em diversos horários (não somente nos picos de trânsito), com

engarrafamentos diários, que afetam a vida do soteropolitano. Hoje, o morador de

Salvador pode gastar no trânsito até 2h por dia, segundo dados divulgados pelo

IPEA (Instituto de Pesquisa Econômica Aplicada).

Concomitante a esses problemas tem-se percebido um crescimento no senso de

coletividade e consciência sustentável entre os jovens baianos. Ainda não se

equivale a países europeus, mas é freqüente encontrar movimentos que buscam no

coletivo a solução para algum problema da cidade.

Aliado a todos esses fatores, por outro lado, é notável o crescente número de

smartphones no mercado. Em matéria publicada pelo Wall Street Journal e reproduzida

no Valor Econômico, as lojas de aplicativos da Apple e do Google cresceram 62% em

2013. O fator determinante para isso deve-se ao consumo de smartphones, que é cada

vez mais comum, inclusive no Brasil. O brasileiro vem aquecendo o mercado de

smartphones, pois este tipo de aparelho possibilita o acesso rápido às informações e e-

mails através da internet, além dos downloads de aplicativos.

Dessa forma, congregando esses três fatores: falta de mobilidade urbana, aumento

do senso de coletividade e crescente número de smartphones no mercado, enxerga-

se uma oportunidade de inserção de novo produto neste mercado, no qual a

sociedade está carente, mesmo sem saber disto ainda, pois, tal como explanou

11

Steve Jobs (1998), na maioria das vezes as pessoas não sabem o que querem até

que mostremos algo para elas. E foi com base nesta conjuntura que houve o insight

por parte dos desenvolvedores do “bora!” e analisou-se a viabilidade do projeto,

tanto do ponto de vista colaborativo/coletivo, quanto do ponto de vista econômico.

5. FUNDAMENTAÇÃO TEÓRICA

5.1 QUEM SÃO OS USUÁRIOS DO “BORA!”?

De acordo com definição de Holtzblatt e Jones (1993), os usuários nem sempre são

aqueles indivíduos que interagem diretamente com os produtos, seja de forma

assídua ou ocasional. Os escritores incluem em sua definição aqueles que

gerenciam usuários diretos, aqueles que recebem produtos do sistema, que testam o

sistema, que tomam decisões de compra e aqueles que utilizam produtos de

concorrentes. Eason (1987) identifica três categorias de usuário: primário,

secundário, e terciário. Usuários primários são aqueles que provavelmente serão

usuários frequentes do sistema; secundários aqueles ocasionais ou que utilizam o

sistema por meio de um intermediário; e terciários, são aqueles afetados pela

introdução do sistema ou que terão influencia na sua compra.

Por conseguinte, seguindo os conceitos de Holtzblatt, os usuários do aplicativo

“bora!” são listados da seguinte forma:

- Primários: Estudantes da UNIFACS.

- Secundários: Demais colaboradores da Instituição e toda a sua rede de parceiros.

- Terciários: Os desenvolvedores do aplicativo, os quais se envolveram diretamente

na elaboração e implementação deste, além dos possíveis investidores. Segundo

Soares Pimenta (2007). “Geralmente o cliente formal que encomenda o sistema é

um dos últimos dos que serão afetados por ele”.

5.2 QUAIS SÃO AS NECESSIDADES DOS USUÁRIOS?

Reiterando Steve Jobs, Suzanne Robertson (2002), declarou que quando se fala em

identificar necessidades, não se trata de apenas de perguntar às pessoas “Do que

você precisa?” e providenciar isso, uma vez que eles não sabem necessariamente o

que é possível. Diante disso, fica claro que cada usuário possui uma necessidade

12

diferente e alguns deles não sabem ou ainda não perceberam o que realmente

necessitam até encontrar soluções. Desta forma, podemos identificar necessidades

gerais e específicas do grupo de usuários do aplicativo.

As necessidades gerais foram percebidas através de pesquisa aplicada a uma

amostra de 192 estudantes de graduação e 93 de pós-graduação de diversas

instituições de ensino da cidade de Salvador durante os meses de maio e junho de

2013. 60% dos motoristas responderam que o motivo pelo qual não costumam

oferecer carona é desconhecer pessoas com o mesmo itinerário que o seu contra

55% de potenciais “caronas” que afirmaram não pegar carona pelo mesmo motivo.

Dessa forma, percebe-se que a necessidade primordial do aplicativo é permitir a

integração entre motoristas e “caronas”, para viabilizar o acontecimento da carona.

Das necessidades específicas tem-se:

Necessidades do motorista

- Fornecer carona;

- Encontrar de forma ágil e segura os “caronas”;

- Ter alguma segurança a respeito do indivíduo a que pretende dar carona.

Necessidades do “carona”

- Ter acesso a uma carona segura;

- Chegar em casa/universidade de forma mais rápida;

- Encontrar de forma ágil e segura os motoristas;

- Ter um dispositivo que possa melhorar a qualidade de vida.

Necessidades dos usuários secundários

- Ter reconhecimento e visibilidade;

- Ter sua marca divulgada e reconhecida como empresa que apoia a melhoria da

mobilidade urbana.

Necessidades dos usuários terciários

- Lucrar com o seu produto;

- Ter reconhecimento e visibilidade.

13

5.3 ESTABELECIMENTOS DOS REQUISITOS

“Um requisito consiste em uma declaração sobre um produto pretendido que

especifica o que ele deveria fazer ou como deveria operar” (Preece et al., 2005

p.224). Essa etapa do projeto tem como objetivo definir o tipo de suporte útil que o

produto deve oferecer tendo foco no usuário. Os requisitos são divididos em:

5.3.1 REQUISITOS FUNCIONAIS

Os requisitos funcionais captam o que o produto deve fazer, a sua atividade

primordial. No caso do aplicativo “bora!” o requisito funcional é promover a

interação entre o motorista e o “carona” para viabilizá-la.

5.3.2 REQUISITOS TÉCNICOS E DE DADOS

Smartphones possuem, em geral, interface touch-screen, a qual dá às pessoas um

senso de conexão imediata com os seus dispositivos e reforça o seu sentimento de

manipulação direta de objetos na tela.

O aplicativo deverá ser compatível com o iOS, sistema operacional que funciona no

iPhone. O sistema operacional gerencia o hardware do dispositivo e fornece as

tecnologias necessárias para implementar aplicativos nativos. Aplicativos nativos são

construídos usando as estruturas do sistema IOS e linguagem Objective-C. Demais

aplicativos poderão ser construídos nessa linguagem também, desde que obedeçam

às guidelines e sejam baseados no framework do sistema.

É primordial que o “bora!” seja preciso nas informações de localização, haja vista que

é um aplicativo que fornecerá a todo momento rotas com usuários localizados em

determinados pontos. Será necessário enriquecer a visualização de mapas com

informações adicionais. Os usuários esperam que os mapas dos seus aplicativos se

comportem de forma semelhante a outros mapas que já utilizaram. Além de permitir

zoom, deve-se exibir as anotações que darão aos usuários as informações que eles

precisam. Por exemplo, pode-se exibir os pinos que representam a localização do

usuário atual, o destino, e as transferências ou pontos de interesse ao longo do

caminho. Importante também considerar o uso de notificações push para fornecer aos

usuários as informações importantes sobre o seu percurso, para que elas saibam

quando as informações de trânsito mudam, de modo que possam ajustar seus planos.

14

No quesito iconografia as guidelines do iOS determinam que os ícones possuam, no

mínimo, 57 x 57 pixels. O designer não precisa se preocupar em arredondar as

bordas nem colocar efeito tridimensional, pois o próprio iOS adiciona cantos

arredondados e as sombras e reflexos tridimensional ao ícone (Anexo 1). Isso

explica o fato de não existir nenhum aplicativo no iOS que não possua cantos

arredondados. Além disso, determina-se a criação de um título da atividade, o qual

descreve sucintamente o seu serviço. O título é exibido abaixo do ícone da atividade

no controlador de vista de atividade.

As guidelines para mapas no iOS determinam ainda as cores dos pinos de marcação

de local. Estas sugerem utilizar as cores dos pinos padrão de uma forma

consistente. Um pino mapa mostra a localização de um ponto de interesse em seu

mapa. Os usuários estão familiarizados com as cores pino no aplicativo nativo de

mapa que vem no aparelho, e por isso é melhor evitar a redefinição do significado

dessas cores em sua aplicação. As cores são:

- Vermelho: um ponto de destino

- Verde: um ponto de partida

- Roxo: um ponto especificado pelo usuário

O aplicativo deverá também ser compatível com Android, sistema operacional que

funciona em centenas de milhões de dispositivos móveis, em mais de 190 países ao

redor do mundo. Com base nas contribuições da comunidade open-source Linux e

mais de 300 hardwares, softwares e operadoras parceiras, o Android tornou-se

rapidamente a maior base instalada de qualquer plataforma móvel. Deverá ser

desenvolvido em Java, com recursos XML.

Assim como o iOS, o Android também tem uma guideline, que estabelece tamanhos

e comportamentos dos elementos. Para o tamanho de elementos ele estabelece

48dp, que equivale no tamanho físico a cerca de 9 mm (com alguma variabilidade).

Segundo a guideline do Android, este é o tamanho recomendado (7-10 mm) para

objetos touch-screen, pois está dentro do limite que os usuários serão capazes de

manusear de forma confortável. O guia estabelece para nunca criar elementos com

menos de 7 mm, independente do que eles indiquem na tela. Estabelece o

espaçamento entre cada elemento da tela para 8DP.

No que diz respeito à tipografia, a interface do usuário Android utiliza os seguintes

estilos de cores padrão: textColorPrimary e textColorSecondary . Numa escala PB,

15

na qual o fundo seja preto, o textColorPrimary representando o título viria em branco

100%, tendo como auxiliar o subtítulo, textColorSecondary, que viria em branco

50%. O inverso vale para um fundo branco, na qual a o título viria em preto 100% e o

subtítulo em preto 50%.

Em relação à iconografia, o Android estabelece que o tamanho mínimo para os

exibição dos ícones seja de 48 x 48 dp na tela inicial dos dispositivos móveis, de 512

x 512 dp no Google Play (loja do Android), de 32 x 32 dp nas barras de ação, e de

16 x 16 dp dentro do aplicativo (caso o ícone interno esteja submetido a um

quadrado que possui os 16 x 16, o ícone deverá manter o padrão de 12 x 12 dp).

Para ícones de notificação o padrão estabelecido é de 24 x 24 dp (área ativa total) e

22 x 22 dp o esquadro óptico caso o ícone possua bordas arredondadas. (Anexo 2).

5.3.3 REQUISITOS AMBIENTAIS

Os requisitos ambientais referem-se às circunstâncias em que se espera que o

produto interativo opere. Devem ser considerados neste caso o ambiente físico, e

fatores tais como poeira, barulho, iluminação; o ambiente social, que envolve

questões como colaboração e coordenação, compartilhamento de dados e o

ambiente técnico, que do respeito a que tecnologias o produto utilizará ou com as

quais deverá ser compatível e quais limitações tecnológicas vem ser relevantes.

Portanto, a partir da conceituação acima, definimos circunstâncias em que o

aplicativo poderá funcionar:

Ambiente físico:

Será muito importante que o aplicativo seja fácil de usar, pois os usuários tenderão

que utilizá-lo sob condições adversas. É necessário certificar-se de que o texto é de

fácil leitura em qualquer tipo de iluminação e que os botões são fáceis de tocar com

precisão. Exemplo de circunstâncias onde o aplicativo poderá não funcionar de

forma esperada:

Numa garagem, onde há má qualidade de conexão de internet, haja vista que é um

local com baixa qualidade de sinal de telefonia móvel;

Num local sob alta iluminação solar, levando em consideração que a tela do celular reflete

quando exposta a intensa luminosidade, interferindo na visibilidade do conteúdo.

16

Ambiente Social:

O “bora!” necessita da interação entre motoristas e “caronas”. Essa interação

ocorre quando há uma busca por carona e um motorista responde a essa busca.

Sendo assim, é extremamente importante e fundamental que os usuários do

aplicativo sejam conectados, possuam redes sociais, e permitam que o aplicativo

possa conectar com o seu perfil de Facebook, para que o aplicativo possa localizar

amigos em comum que já o utilizem.

Ambiente Técnico:

O aplicativo será desenvolvido para as plataformas Android e iOS, sendo assim,

deverá integrar com as guidelines de ambos os sistemas, as quais já foram descritas

acima no tópico de requisitos técnicos.

5.3.4 REQUISITOS DO USUÁRIO

Os requisitos do usuário tratam das características do grupo de usuários pretendido.

O aplicativo deve utilizar uma linguagem que atinja todos os públicos. Desde usuários

menos ambientados com interfaces digitais até usuários avançados nessa tecnologia.

Para que funcione bem e atinja todos os públicos uma interface deve seguir os

princípios de design de interface humana, os quais são baseados na forma como as

pessoas (usuários) pensam e trabalham e não nas capacidades do dispositivo. Uma

interface pouco atraente, complicada, ou ilógica pode tornar um aplicativo com

grande potencial comercial em um sistema extremamente difícil de usar. Sendo que

a dificuldade gera frustração, que resulta no abandono do uso aplicativo. Da mesma

forma, uma interface intuitiva e convincente melhora a funcionalidade de um

aplicativo e inspira um apego emocional positivo nos usuários.

A interface precisa ter integridade estética, a qual não configura uma medida de

quão belo é um aplicativo, mas como uma medida de quão bem a aparência do

aplicativo integra-se com a sua função. Por exemplo, um aplicativo que exiba uma

tarefa produtiva geralmente mantém elementos decorativos apenas de forma sutil,

concentrando o destaque na tarefa, fornecendo controles padrão e comportamentos.

Comportando-se dessa forma, o aplicativo fornece aos usuários uma mensagem

clara e unificada sobre seu propósito e sua identidade. Se, por outro lado permite-se

que a tarefa produtiva pareça extravagante ou frívola, os usuários podem não saber

como interpretar esses sinais contraditórios. É necessário ter consistência.

17

Um aplicativo consistente não é uma cópia servil de outros aplicativos. Pelo

contrário, é um aplicativo que tira proveito dos padrões e paradigmas com os quais

as pessoas já estão confortáveis. Para determinar se um aplicativo segue o princípio

de coerência se faz necessário pensar sobre essas questões: é compatível com os

padrões do iOS? O sistema utiliza controles, elementos e ícones corretamente?

Incorpora as funções do dispositivo de forma confiável? Os textos utilizam

terminologia uniforme? Será que os mesmos ícones sempre significam a mesma

coisa? Os usuários podem prever o que vai acontecer quando eles executarem a

mesma ação em diferentes lugares? Todo aplicativo precisa estar de acordo com as

regras do sistema para o qual foi desenvolvido, e tendo sido desenvolvido em duas

linguagens distintas, para dois sistemas operacionais diferentes, este precisa se

adaptar a cada um da melhor forma possível, cumprindo o que estabelece as

guidelines específicas de cada um.

O aplicativo precisa fornecer ao usuário um feedback informativo sobre o

processamentos que está ocorrendo. As pessoas esperam um feedback imediato

quando operam algum controle, seja este luminoso, sonoro ou textual, e as mesmas

apreciam atualizações de status durante operações longas.

Aplicativos iOS são desenvolvidos para responderem a cada ação do usuário com

alguma mudança perceptível. Por exemplo, os itens da lista são ressaltados quando

tocados. Durante operações que duram mais do que alguns segundos, um controle

mostra na tela o progresso decorrer, e se for o caso, o aplicativo exibe uma

mensagem explicativa. Animações sutis podem fornecer às pessoas um retorno

significativo que ajuda a esclarecer os resultados de suas ações. Por exemplo, as

listas podem animar a adição de uma nova linha para ajudar as pessoas a controlar

a mudança visualmente. O som também pode fornecer aos usuários um feedback

útil, mas o som não deve ser o mecanismo de feedback primário ou único, porque as

pessoas podem usar seus aparelhos em locais onde eles não podem ouvir ou onde

o som deve ser silenciado.

O aplicativo deve aproveitar-se das metáforas na sua linguagem intuitiva. Quando os

objetos virtuais e ações em um aplicativo são metáforas de objetos e ações no

mundo real, os usuários rapidamente compreendem como usar o aplicativo.

18

Exemplo clássico disto é a pasta: as pessoas colocam as coisas em pastas no

mundo real, e imediatamente compreendem a ideia de colocar arquivos em pastas

no computador.

A vantagem é que as metáforas mais apropriadas sugerem um uso ou experiência

sem impor as mesmas limitações do objeto do mundo, por exemplo, as pessoas

podem preencher pastas de software com muito mais conteúdo do que caberia em

uma pasta física. O iOS oferece grande espaço para metáforas porque suporta ricas

imagens gráficas e gestos. Por ter uma interface multi-touch as pessoas interagem

fisicamente, de forma realista com os objetos na tela, e em muitos casos os

exploram como se fossem objetos do mundo real.

5.3.5 REQUISITOS DE USABILIDADE

A interação humano - computador surgiu nos anos 80 como um novo campo de estudo

que preocupava-se com a inserção do computador no cotidiano das pessoas de forma

que este fosse um adicional importante em suas vidas pessoais e profissionais.

Segundo Preece (1994), os objetivos do IHC são desenvolver e aprimorar sistemas

computacionais nos quais os usuários possam executar tarefas com segurança, eficiência

e satisfação. Tais características, juntas, são hoje denominadas de usabilidade.

Usabilidade é um atributo que se refere ao ato de fácil reconhecimento e

interatividade do usuário com as funções de determinado produto.

A usabilidade já foi, por muito tempo, considerada um quesito sem muita importância

dentro dos processos de desenvolvimento de produtos ou sistemas. De acordo com

Shneiderman (1998), o aparecimento de testes e laboratórios de usabilidade, desde

o início dos anos 1980, é um indicador do desvio profundo na atenção em direção às

necessidades do usuário. Hoje os desenvolvimentos de sistemas são baseados nos

aspectos de usabilidade, tornando-a um requisito mínimo e um diferencial.

Com a ocorrência da convergência digital, migração de variadas funções para um

dispositivo único, a criação de interfaces interativas deve adequar-se a cada

dispositivo e suas tarefas específicas.

A estética e a usabilidade devem caminhar juntas, comprovando a possibilidade de

uma experiência visual agradável e satisfatória dentro dos limites da usabilidade. Os

projetos de interfaces interativas têm como objetivo gerar soluções confortáveis e

19

intuitivas adequadas às regras de usabilidade para otimizar a interação e melhor

atender às necessidades dos usuários.

“... usabilidade é geralmente considerada como fator que assegura que os produtos

são fáceis de usar, eficientes e agradáveis - da perspectiva do usuário.” (ROGERS E

PREECE, 2007).

Os requisitos de usabilidade captam quais as metas de usabilidade, as quais variam

em decorrência do tipo de usuário. As metas utilizadas no “bora!” estipulam que o

aplicativo deverá:

Ser eficaz no uso (eficácia);

Ser eficiente no uso (eficiência);

Ser segura no uso (segurança);

Ser de boa utilidade (utilidade);

Ser fácil de aprender (learnbility);

Ser fácil de lembrar como se utiliza (memorability).

6. METODOLOGIA

6.1 DESENVOLVENDO A INTERFACE

Depois de conhecer os usuários, ter analisado quais as suas necessidades, e ter

estabelecido todos os requisitos do projeto, é necessário identificar quais os cenários

nos quais o aplicativo está inserido, e estudar todos os casos de uso possíveis para

a operacionalização da tarefa que o mesmo se propõe a desenvolver. Tudo isso, é

para que posteriormente exista uma base completa para desenvolvimento de uma

interface funcional e íntegra esteticamente.

6.1.1 CENÁRIOS

Um cenário descreve as atividades ou tarefas humanas em uma história que permite

a exploração e discussão de contextos, necessidades e requisitos. Não descreve

explicitamente o uso do software, é uma descrição sobre o que se pretende.

Tomando como base o exemplo fictício abaixo, baseado, todavia numa situação real,

desenvolveu-se um terreno fértil para germinar a ideia de desenvolver um aplicativo

para melhoria da mobilidade urbana da cidade de Salvador.

20

Joel é estudante do turno da noite em uma turma de administração numa faculdade

de Salvador. Analisando o horário de seus colegas Joel percebeu que estes sempre

chegavam atrasados, por diversos motivos. Ele chegava sempre no horário, pois

conseguia sair mais cedo do trabalho, o qual era relativamente próximo da

faculdade, mas isto não acontecia com os outros colegas, que tinham que “cruzar a

cidade”, enfrentando um engarrafamento de algumas horas para chegar ao destino.

Amanda chegava atrasada por causa do ônibus, que sempre demorava pra chegar

ao ponto de ônibus. Pedro, apesar de trabalhar perto, encontrava congestionamento

por causa do número de carros nas ruas. Ronaldo sempre encontrava fila no

estacionamento da Faculdade. O fato é que a maioria dos alunos chegavam

atrasados, por algum motivo adverso, fato que comprometia o rendimento deles em

sala de aula.

O cenário descreve um contexto que pode ser exemplificado por estudantes de

qualquer universidade da cidade de Salvador. E foi analisando este cenário que se

chegou à conclusão de que algo precisaria ser feito para melhorar a mobilidade

urbana da cidade.

6.1.2 CASOS DE USO

Tendo analisado o cenário de caos no qual o trânsito soteropolitano está emerso,

pensou-se nas soluções possíveis para melhorar a mobilidade urbana. A proposta

mais efetivamente possível de ser realizada foi a criação de um aplicativo no qual

se estimulasse a troca de caronas entre estudantes da instituição. Para isto, foi

preciso estudar os casos de uso quando um usuário pretende pegar carona do

modo convencional, para que este caso fosse replicado de forma semelhante no

ambiente virtual.

O caso de uso para pegar carona do modo convencional segue os seguintes passos:

1. Indivíduo 1 questiona com seus amigos e conhecidos se alguém estaria indo para

o mesmo destino que o seu.

2. Caso exista um indivíduo 2 que irá percorrer o mesmo trajeto que o seu, o

indivíduo 1 questiona se há a possibilidade de receber carona.

3. Caso a resposta do indivíduo 2 seja positiva, o indivíduo 1 aguarda até o horário

disponível para a carona.

4. O usuário 1 recebe carona, chega ao seu destino, agradece e vai embora.

21

No caso de uso do modo convencional podem ocorrer ações fora do script, as quais

são denominadas “cursos alternativos”. Neste caso, os cursos alternativos que

podem ser descritos são:

2.1. Caso não haja nenhum indivíduo 2 com o mesmo trajeto que o indivíduo 1, o

mesmo recorre a outras alternativas de transporte.

3.1. Caso o indivíduo 2 não possa oferecer carona, o indivíduo 2 volta para o passo

1 ou recorre a outras alternativas de transporte.

Dessa forma, utilizando o caso de uso convencional como metáfora, pode-se

descrever o caso de uso para o ambiente virtual da seguinte forma:

Ambiente virtual visto sob a ótica do “carona” (indivíduo 1):

1. Indivíduo 1 faz login no aplicativo, define seu trajeto e aguarda.

2. Caso haja um indivíduo 2 que irá percorrer o mesmo trajeto que o indivíduo 1, o

indivíduo 2 notificará que está disponível para oferecer carona ao 1.

3. O indivíduo 1 aceita a carona do indivíduo, chega ao seu destino, agradece e ai

embora.

Cursos alternativos:

2.1 Caso o indivíduo 1 não encontre um motorista no seu trajeto ele redefinirá o

trajeto ou tentará outras alternativas de transporte.

Ambiente virtual visto sob a ótica do “motorista” (indivíduo 2):

1. Indivíduo 1 faz login no aplicativo, define seu trajeto e aguarda o sistema lhe

mostrar os usuários que estão no mesmo trajeto que o seu.

2. Indivíduo 1 escolhe um (ou mais de um) indivíduo 2 para oferecer carona.

3. O indivíduo 2 é notificado, aceita a carona do indivíduo, chega ao seu destino,

agradece e vai embora.

Cursos alternativos:

2.1 Caso o indivíduo 1 não encontre um motorista no seu trajeto ele redefinirá o

trajeto ou tentará outras alternativas de transporte.

6.2 ANÁLISES DE TAREFAS

Após ter traçado os casos de uso dos ambientes físico e virtual, é realizada uma

análise mais completa da todas as possíveis tarefas a serem realizadas pelos

indivíduos no sistema, tanto sob a ótica do “carona” quanto motorista. Dessa forma,

22

foi criado um passo a passo com todas as telas pelas quais os usuários passariam

para finalizar a tarefa.

1.0 Tela inicial

Haverá a tela com o mapa da cidade mostrando os usuários do aplicativo (motorista

à “carona”).

1.1 O usuário faz login no aplicativo com o número de matrícula.

1.2 Caso não seja cadastrado prossegue na tela 2. Caso já possua cadastro é

transportado para a tela 3.

2.0 Cadastro

É exibida uma tela de notificação informando que foi percebido que o usuário ainda

não possui cadastro e pedindo que ele aceite os termos de uso para continuar.

2.1 Primeira tela de acesso.

2.1.1 Fotografia: na primeira tela de acesso é solicitada a fotografia de perfil.

2.1.2 Dados adicionais: na primeira tela de acesso são solicitadas também algumas

preferências do usuário, que irão ajudar mais tarde nos filtros de usuários com perfis

parecidos. Estará inclusa nessas preferências o gosto musical do usuário e se este é

fumante ou não.

2.2 O usuário tem a possibilidade de integrar ou não seu perfil do aplicativo ao

Facebook para conhecer os amigos que já usam o aplicativo.

3.0 Perfil do usuário

Se o usuário já utilizou alguma vez o aplicativo aparece uma notificação em sua tela,

solicitando que ele qualifique sua última viagem.

3.1. Qualificação da última viagem.

3.1.1 Se o usuário for um “carona” ele deverá qualificar seu último acompanhante de

viagem sobre prudência no trânsito, comportamento e conforto.

3.1.2 Se o usuário for um motorista ele deverá qualificar seu último acompanhante

de viagem sobre comportamento, pontualidade e higiene.

3.2 Entrada no perfil.

3.3.1 Configurações de perfil - Estatísticas de usuário: nesta tela o usuário acessará

gráficos com suas estatísticas de utilização o do sistema, tais como últimas caronas

fornecidas ou recebidas.

3.3.2 Configurações de perfil - Último trajeto: nesta tela o usuário verá seus últimos

trajetos.

23

3.3.3 Configurações de perfil – sincronização com Facebook: nesta tela o usuário

poderá sincronizar com seus amigos do Facebook (ou conectar com a rede social

caso ainda não tenha o feito).

3.3.4 Configurações de perfil – resgate de "Nicas" (moeda de troca utilizada para

receber os benefícios): nesta tela o usuário é direcionado para a loja online, onde

poderá realizar a troca de bônus.

3.3.5 Configurações de perfil – avaliação do aplicativo: nesta tela o usuário poderá

avaliar o aplicativo na Apple Store ou Google Play, a depender da plataforma

utilizada.

4.0 Tela de definição de trajeto exibida para motorista

4.1 Definição de trajeto: solicita-se que o usuário defina o seu trajeto e selecione se

estará de carro ou moto.

4.2 Tela de confirmação de trajeto: nesta tela pede-se que o usuário confirme se o

seu trajeto é aquele que o aplicativo exibiu no mapa, e se não for, que ele altere o

trajeto de acordo com sua necessidade.

4.3 Tela com exibição de “caronas” existentes no trajeto definido pelo motorista:

nesta tela o motorista vê todos os usuários “caronas” existentes no seu trajeto e

seleciona o que deseja oferecer carona.

5.0 Tela de definição de trajeto exibida para o “carona”

5.1 Definição de trajeto: solicita-se que o usuário defina o seu trajeto e selecione se

prefere ir de carro ou moto.

5.2 Tela de confirmação de trajeto: nesta tela pede-se que o usuário confirme se o

seu trajeto é aquele que o aplicativo exibiu no mapa, e se não for, que ele altere o

trajeto de acordo com sua necessidade.

6. Tela de notificação de novas caronas

6.1 Ao motorista é notificado que o “carona” aceitou a carona.

6.2 Ao “carona” é notificado que há um motorista que deseja oferecer uma carona.

Após terem sido analisadas passo a passo todas as tarefas desempenhadas no

sistema, é traçada uma análise hierárquica de tarefas, representada através do

gráfico exibido a seguir (Página 24) :

24

Imagem 01 – Fluxograma de análise hierárquica de tarefas (AHT) do aplicativo “bora!”.

25

6.3 PROTOTIPACÃO

“Um protótipo é uma representação limitada de um design que permite aos usuários

interagir com ele e explorar a sua conveniência.” (ROGERS E PREECE, 2007).

É comum que os usuários muitas vezes não saibam transmitir o que querem, mas,

ao utilizar algo, percebem logo o que não querem. Por isso o protótipo, que pode ser

uma fotografia, desenho, maquete, esboço de papel, entre outros, tem importância

significativa na construção de algo. O protótipo é a materialização da ideia, que sai

do mundo irreal, do imaginário e se transforma em algo físico, palpável, onde

qualquer pessoa tem a possibilidade de visualizar e entender o projeto. É um

processo importante para testar a viabilidade das ideias, esclarecer requisitos que

ficaram vagos no meio do processo, realizar testes com usuários e verificar se o

rumo que o projeto está tomando é compatível com o restante do processo.

6.3.1 PROTOTIPAÇÃO DE BAIXA FIDELIDADE (STORYBOARD)

Prototipação de baixa fidelidade não se assemelha ao produto final, e em geral utiliza

papel e lápis, ou materiais tão simples quanto. São úteis justamente por serem simples,

barato e de rápida produção, com a vantagem de ser rapidamente modificável, o que

facilita a exploração de ideias alternativas. Podem ser representados por gráficos,

textos, desenhos ou qualquer outra representação de uma ideia. É, portanto,

imprescindível nos primeiros estágios do processo. A seguir os protótipos de baixa

fidelidade do “bora!”, desde os esboços mais simples nos estágios iniciais do processo

até os mais elaborados, quando o projeto já tomava forma.

Imagem 02 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.

26

Imagem 03 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.

27

Imagem 04 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.

28

Imagem 05 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.

29

Imagem 06 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.

6.3.2 PROTOTIPAÇÃO DE MÉDIA FIDELIDADE

A Prototipação de média fidelidade é mais realística que a de baixa fidelidade, mas

não possui o mesmo grau de funcionalidade e similaridade do protótipo final.

Apresenta algumas sequências de diálogo com o usuário, para simular a navegação.

A média fidelidade pode ser implementada na forma de uma apresentação de telas

em sequência, com algumas zonas de salto predefinidas para simular a navegação.

Um protótipo de média fidelidade, em termos de similaridade estética com o produto

final, fica entre a baixa fidelidade e a alta fidelidade e guarda algumas vantagens e

desvantagens em relação aos dois outros níveis. De forma geral, é uma versão

aprimorada do protótipo de baixa fidelidade e é criado já no computador. Esse tipo

de alternativa se assemelha mais ao produto final que o de baixa fidelidade e

demanda menos esforço do que o de alta fidelidade. Confira as telas a seguir.

30

Imagem 07 – Prototipação de média fidelidade.

31

Imagem 08 – Prototipação de média fidelidade.

32

Imagem 09 – Prototipação de média fidelidade.

33

Imagem 10 – Prototipação de média fidelidade.

34

Imagem 11 – Prototipação de média fidelidade.

35

Imagem 12 – Prototipação de média fidelidade.

36

6.4 DESENVOLVIMENTO DO DESIGN FÍSICO

Tucker Viemeister conceitua a beleza como elemento útil, sobretudo para ajudar a

vender algo. Segundo o autor, algo com boa aparência vende mais que o contrário.

Fica claro, com isso, que tornar os produtos esteticamente mais agradáveis ajuda no

sucesso do negócio.

Quem se apropriava desse mesmo conceito era Steve Jobs, que incorporava a

beleza dos produtos da Apple como uma máxima constante em sua vida profissional,

em todos os projetos que desenvolvia. Há um caso famoso, no qual Jobs solicitou ao

seu engenheiro que a Placa interna do iMac fosse bela. O engenheiro da empresa

argumentou que ninguém iria olhar a placa do computador e que a única coisa que

as pessoas olhariam seria se o produto funcionava ou não. Jobs reagiu, à sua

maneira prática, dizendo "Eu quero que seja o mais bonito possível, mesmo que

esteja dentro da caixa.” ressaltando assim uma das características marcantes dos

produtos Apple: a estética simples e agradável, característica esta que faz os

produtos serem o sucesso de vendas que são.

E esta mesma característica é explorada no “bora!”, a estética que reúne

simplicidade e objetividade, alinhado à completa funcionalidade. O aplicativo se

apropria no seu layout final, das cores da marca, amarelo, cinza e preto, e se

apropria de linhas retas e ícones opacos, para reforçar a ideia do minimalismo, do

“less is more”, tão conhecida pela comunidade designer.

Sabe-se que para cada interação no aplicativo, telas diferentes são retornadas ao

usuário. Se este é motorista, ele não visualiza a mesma tela do “carona”. Se já utilizou

o aplicativo antes, obviamente não precisará passar novamente pelas telas de

cadastro. Dessa forma, a seguir serão exibidas as telas, de acordo com cada perfil de

usuário.

37

38

39

40

41

42

43

44

45

46

7. LAYOUT DO SITE “BORA!”

Para o aplicativo de mobilidade urbana “bora!”, foi desenvolvido o site no qual tem

como objetivos a divulgação do aplicativo, a explicação, descrição e demonstração de

suas funções para os usuários e o redirecionamento destes para a “loja de compras”

de cada um dos sistemas operacionais iOS (App Store) e Android (Google Play).

Atualmente, a abrangência da inclusão digital permite que uma grande porcentagem

da população adquira dispositivos móveis, como tablets e smartphones, com uma

maior facilidade, financeiramente falando. Sendo assim, a utilização frequente de

tais dispositivos móveis acarretou o crescimento de acessos aos websites utilizando

smartphones.

Através do acompanhamento destas mudanças comportamentais dos usuários,

chegou-se a um novo conceito de desenvolvimento de sites, que vai de encontro à

convenção anterior, chamado de Mobile First.

O conceito de Mobile First transmite a ideia de dar início à prototipação do site, roughs

e wireframes primeiramente para os smartphones, em seguida para os tablets e por

ultimo para os desktops. Além desta diversidade de dimensões de telas dentre os

dispositivos, ainda há a variação de posições, a depender do modo em que o usuário

está utilizando o dispositivo, na vertical ou na horizontal, sendo um fator que também

altera a organização do layout do site, incluindo a utilização dos princípios de

responsividade no momento de criação do layout e da programação do site.

O objetivo do Mobile First, além de auxiliar o designer na arquitetura de informação,

usabilidade e acessibilidade dentro do processo de desenvolvimento do layout,

também tem como finalidade sintetizar as informações da página, focando apenas

nos conteúdos indispensáveis e necessários para a composição das informações,

tornando o site simples, objetivo, direto em relação ao conteúdo que deseja

transmitir ao usuário e às vezes até minimalista.

Já o design responsivo tornou-se, ultimamente, um quesito importante quando

inserido na convergência digital. Esta técnica possibilita a unificação de um único

conteúdo em múltiplos dispositivos, onde o conteúdo se adapta às variadas

dimensões de tela, sendo este reorganizado para manter sua aparência em ordem,

tornando o site fluido e flexível.

47

Tanto o Mobile First quanto o Responsive Design são personagens integrantes do

cenário da acessibilidade na web, consumo da informação por qualquer pessoa e

qualquer tipo de meio de acesso.

Portanto, seguindo estes conceitos, o layout do site do “bora!” foi assim pensado,

prototipado e desenvolvido, visando atender seus usuários da melhor maneira possível,

dentro dos padrões de usabilidade da web e utilizando-se da estética amigável.

7.1 PROTOTIPAÇÃO

7.1.1 PROTOTIPAÇÃO DE BAIXA FIDELIDADE

Imagem 13 – Prototipação de baixa fidelidade do site.

48

7.1.2 PROTOTIPAÇÃO DE MÉDIA FIDELIDADE

Imagem 14 – Prototipação de média fidelidade; home do site (alternativa 1).

49

Imagem 15 – Prototipação de média fidelidade; home do site (alternativa 2).

50

Imagem 16 – Prototipação de média fidelidade; home do site (alternativa 3).

51

Imagem 17 – Prototipação de média fidelidade; página do clube de benefícios.

52

Imagem 18 – Prototipação de média fidelidade; home do site no iPhone.

53

Imagem 19 – Prototipação de média fidelidade; home do site no iPad.

54

7.2 DESENVOLVIMENTO DO DESIGN FÍSICO

Página do site inserida no sistema de Grid.

Imagem 20 – Home do site no sistema de grid.

55

A página principal do site foi definida em uma Single Page, onde o conteúdo se

encaixa em uma única página web. Tornando o site fluido e aprimorando a

experiência de navegação do usuário.

Imagem 21 – Home do site.

56

Imagem 22 – Clube de benefícios (antes do usuário efetuar o login).

57

Imagem 23 – Clube de benefícios (depois do usuário ter efetuado o login).

58

Imagem 24 – Home do site no desktop.

Imagem 25 – Home do site no desktop (vantagens).

59

Imagem 26 – Clube de benefícios no desktop (antes do usuário efetuar o login).

Imagem 27 – Clube de benefícios no desktop (depois do usuário ter efetuado o login).

60

Imagem 28 – Seção de produtos, paginação e rodapé.

61

Imagem 29 – Home do site no tablet.

62

Imagem 30 – Home do site no tablet.

63

Imagem 31 – Home do site no smartphone.

64

Imagem 32 – Home do site no smartphone.

Imagem 33 – Demonstração de responsividade do site.

.

65

8. CRONOGRAMA

Imagem 34 – Cronograma contendo as etapas e períodos de desenvolvimento do aplicativo “bora!”.

66

9. ORÇAMENTOS

Imagem 35 - Orçamento 1: Wireframe (Tabela Referencial de Valores para Freellas em Design)

67

Imagem 36 - Orçamento 2: Programação (Orçado por Pedro Araújo – Analista e desenvolvedor web)

68

10. REFERÊNCIAS

PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interação: Além da interação homem-

computador. Porto Alegre, Bookman, 2007.

ISAACSON, W. Steve Jobs: A Biografia. São Paulo, Companhia das Letras, 2011.

NITZSCHE, R. Afinal, o que é design thinking? São Paulo, Rosari, 2008.

[Editorial] D2B - Design To Branding Magazine. Número 03, Ano XIII, Dez 2007.

ROCHA, A. C. B.; FROTA, C. D.; TRIDAPALLI, J. P.; KUWAHARA, N.; PEIXOTO, T. F. A.;

BALASSIANO, R. Gerenciamento Da Mobilidade: Experiências Em Bogotá. Londres e

Alternativas Pós-Modernas, v. 1, n. 1.

MORAES, A.; SANTA-ROSA, J. G. Avaliação e projeto no design de interfaces. Rio de Janeiro,

2AB, 2008.

KRUG, S. Não me faça pensar – Uma abordagem de bom senso à usabilidade na web. 2006. Alta Books. Rio de Janeiro.

Top Usability Mistakes in Web Design. Disponível em: <http://designmodo.com/usability-mistakes-web-design/#>. Acessado em: 09 jun. 2013. Tempo que o soteropolitano gasta no trânsito pode chegar a 2 horas por dia. Disponível em: <http://www.tribunadabahia.com.br/2013/03/19/soteropolitanos-passam-ate-2-horas-no-transito>. Acessado em: 09 jun. 2013.

MEMORIA, F. F. P. Usabilidade de Interfaces e Arquitetura da Informação: Navegação Estrutural.

Disponível em: <http://www.fmemoria.com.br/artigos/nav_estr.pdf>. Acessado em: 09 jun. 2013.

Princípios do design de interfaces, parte 1. Disponível em: <http://www.uxdesign.blog.br/design-de-

interfaces/principios-do-design-de-interfaces/>. Acessado em: 09 jun. 2013.

A oportunidade de mercado. Disponível em:

<http://www.professorcezar.adm.br/Textos/A%20oportunidade%20de%20mercado.pdf>. Acessado

em: 09 jun. 2013.

Mercado de aplicativos para celular cresce mundialmente de modo exponencial. Disponível em:

<http://www.dino.com.br/releases/mercado-de-aplicativos-para-celular-cresce-mundialmente-de-

modo-exponencial-dino890962131>. Acessado em: 09 jun. 2013.

69

Uma extensa Guia para formar Usabilidade Web. Disponível em: <http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/>. Acessado em: 04 jul. 2013.

Disponível em: <http://usabilitygeek.com/&usg=ALkJrhiE4ihYgqvw_N1_twEUoa8RIcOXsg>. Acessado

em: 04 jul. 2013.

Projetando interações. Disponível em: <http://irlabr.wordpress.com/apostila-de-ihc/parte-1-ihc-na-

pratica/projetando-interacoes>. Acessado em: 04 jul. 2013.

FRANZATO, C. O Processo de criação no design conceitual. Explorando o potencial reflexivo e

dialético do Projeto. Disponível em:

<http://revistas.pucsp.br/index.php/tessituras/article/view/5612/3967>. Acessado em: 04 jul. 2013.

Top Usability Mistakes in Web Design. Disponível em: <http://designmodo.com/usability-mistakes-

web-design/>. Acessado em: 04 jul. 2013.

Rádio CBN Salvador. Disponível em:

<http://www.cbnsalvador.com.br/index.php?id=189&tx_cwradios%5Bcategoria%5D=0&offset=4&cHas

h=6407e365c5873da8ba085bf8d07867a4>. Acessado em: 05 ago. 2013.

“Quem engarrafa são os carros, e não os ônibus”, diz José Carlos Aleluia. Disponível em:

<http://www.ibahia.com/detalhe/noticia/quem-engarrafa-sao-os-carros-e-nao-os-onibus-diz-jose-

carlos-aleluia/ >. Acessado em: 05 ago. 2013.

Apple. Disponível em: <http://developer.apple.com/library/ios/documentation/UserExperience/ >.

Acessado em: 05 ago. 2013.

Apple. Disponível em:

<http://developer.apple.com/library/ios/documentation/Miscellaneous/Conceptual/ >. Acessado em: 05

ago. 2013.

Fonthaus. Disponível em: <http://www.fonthaus.com/fonts/FlatIt/Yummo/FI001270>. Acessado em:

05 ago. 2013.

36 High-Quality Flat Design Resources. Disponível em: <http://mashable.com/2013/07/29/flat-

design-ui-kits/>. Acessado em: 05 ago. 2013.

6 tendências para o agora . Disponível em: <http://www.abstratil.com.br/2013/6-tendencias-para-o-

agora/>. Acessado em: 05 ago. 2013.

70

Jules Bassoleil. Disponível em: <http://www.julesbassoleil.fr/trmty>. Acessado em: 05 ago. 2013.

Hell Is Other People 'Anti-social network' helps users to avoid their friends. Youtube. Disponível

em: <http://youtu.be/doigRz2fZ48>. Acessado em: 05 ago. 2013.

Google Maps chega ao Android e tablets . Disponível em: <http://blogs.estadao.com.br/link/google-

maps-chega-ao-android-e-tablets/>. Acessado em: 05 ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/ParkItForward/8235875>. Acessado em: 05

ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/ShortBeam-App/3373273>. Acessado em:

05 ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/-Point-of-Acceptance/9458103>. Acessado

em: 05 ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/MetroLite-App/8703587>. Acessado em: 05

ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/nextr-app-public-transportation-

guidance/7121205>. Acessado em: 05 ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/ParkItForward/8235875>. Acessado em: 05

ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/Volta/6748253>. Acessado em: 05 ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/YouTurn/6712727>. Acessado em: 05 ago. 2013.

Behance. Disponível em: <http://www.behance.net/gallery/App-Trekd-Concept/7746907>. Acessado

em: 05 ago. 2013.

Waze. Disponível em: <http://www.waze.com/>. Acessado em: 05 ago. 2013.

Arounded. Disponível em: <http://arounded.com/>. Acessado em: 05 ago. 2013.

Dribbble. Disponível em: <http://dribbble.com/shots/703378-Arounded-homepage-Find-a-car-to-

drive/attachments/64891>. Acessado em: 05 ago. 2013.

71

Dribbble. Disponível em: <http://dribbble.com/shots/729950-The-Minimalistic-Homepage-for-

Arounded-AirBnB-for->. Acessado em: 05 ago. 2013.cars/attachments/69576

Dribbble. Disponível em: <http://dribbble.com/shots/734996-This-is-it/attachments/70344>. Acessado

em: 05 ago. 2013.

Disponível em: <http://cl.ly/0G3f2s0S310f1F082G3O>. Acessado em: 05 ago. 2013.

Nova tendência do Flat Design. O que? Por que? Disponível em:

<http://www.des1gnon.com/2013/06/a-nova-tendencia-do-flat-design-o-que-por-que/>. Acessado em:

05 ago. 2013.

Mobilize. Disponível em: <http://www.mobilize.org.br/>. Acessado em: 05 ago. 2013.

Prefeitura apresenta projeto da nova Orla de Salvador. Youtube. Disponível em:

<http://www.youtube.com/watch?v=2cTp0Eprf1A>. Acessado em: 05 ago. 2013.

Disponível em: <http://thecityfixbrasil.com/2012/03/26/desinteresse-dos-jovens-por-carros-preocupa-

montadora/>. Acessado em: 05 ago. 2013.

Disponível em: <http://designmodo.com/usability-mistakes-web-design/#ixzz2VXftjzZU>. Acessado

em: 05 ago. 2013.

Disponível em: <http://designyoutrust.com/2013/05/crystal-mobile-application-ui-design-psd/ >.

Acessado em: 05 ago. 2013.

Ônibus ao Vivo (app). Windows Phone. Disponível em: <http://www.windowsphone.com/pt-

br/store/app/ônibus-ao-vivo/140618cd-7be1-44d6-a6c4-4774bf21d40a>. Acessado em: 05 ago. 2013.

15 apps essenciais para Windows Phone. Tecmundo. Disponível em:

<http://www.tecmundo.com.br/selecao/28875-15-apps-essenciais-para-windows-phone-video-.htm>.

Acessado em: 05 ago. 2013.

Brasileiros são inexperientes em relação aos smartphones. Info Exame. Disponível em:

<http://info.abril.com.br/noticias/mercado/brasileiros-sao-inexperientes-em-relacao-aos-smartphones-

14052013-27.shl>. Acessado em: 05 ago. 2013.

72

Morreu de vez: Nokia não vai mais produzir aparelhos com Symbian. Tecmundo. Disponível em:

<http://www.tecmundo.com.br/symbian/35749-morreu-de-vez-nokia-nao-vai-mais-produzir-aparelhos-

com-symbian.htm>. Acessado em: 05 ago. 2013.

De bike para o trabalho? Soteropolitanos contam a experiência e dão dicas. iBahia. Disponível em:

<http://www.ibahia.com/detalhe/noticia/de-bike-para-o-trabalho-soteropolitanos-contam-a-experiencia-e-dao-

dicas/?cHash=f5253aa9f972ce9d2720381f8d4917c1>. Acessado em: 05 ago. 2013.

Vou de Buzu. Disponível em: <http://www.voudebuzu.com.br/>. Acessado em: 05 ago. 2013.

Sala de Imprensa – Ciclovias. Youtube. Disponível em:

<http://www.youtube.com/watch?v=FH5h0fDmrKM&list=UUCSSol4oU6GcCUh0qw9eVHw&index=6>.

Acessado em: 05 ago. 2013.

Lunartic_Hubless Wheel Prototype. Youtube. Disponível em:

<http://www.youtube.com/watch?feature=player_embedded&v=cPsY2NfPJtw#!>. Acessado em: 05

ago. 2013.

Aplicativo baiano para celular ajuda abordagem na hora da paquera. Disponível em:

<http://www.correio24horas.com.br/noticias/detalhes/detalhes-1/artigo/aplicativo-baiano-para-celular-

ajuda-abordagem-na-hora-da-paquera/ >. Acessado em: 05 ago. 2013.

Como prototipar mobile sites e apps no Axure. Disponível em:

<http://arquiteturadeinformacao.com/2012/05/28/como-prototipar-mobile-sites-e-apps-no-axure/ >.

Acessado em: 05 ago. 2013.

Produto projeta luz, dividindo o espaço entre o ciclista e os carros. Hypeness. Disponível em: <

http://www.hypeness.com.br/2012/09/produto-projeta-luz-dividindo-espaco-entre-o-ciclista-e-os-

carros/ >. Acessado em: 05 ago. 2013.

Bike Lane Safety Light-USB rechargeable. Thex Fire. Disponível em: <http://thexfire.com/products-

page/lighting-system/bike-lane-safety-light>. Acessado em: 05 ago. 2013.

Me Leva. Disponível em: <http://meleva.com/ >. Acessado em: 05 ago. 2013.

99 Taxis. Disponível em: <http://www.99taxis.com/>. Acessado em: 05 ago. 2013.

Car sharing. City of Sydney. Disponível em: <http://www.cityofsydney.nsw.gov.au/explore/getting-

around/car-sharing>. Acessado em: 05 ago. 2013.

73

Disponível em: <http://www.nilobook.com.br/produto.asp?p=24263>. Acessado em: 05 ago. 2013.

Serviço de compartilhamento de carro começa a ter espaço no Brasil. Auto Esporte. Disponível

em: <http://g1.globo.com/carros/noticia/2013/04/servico-de-compartilhamento-de-carro-comeca-ter-

espaco-no-brasil.html>. Acessado em: 05 ago. 2013.

Urbotip. Disponível em: <www.urbotip.com>. Acessado em: 05 ago. 2013.

GIZMODO - Digital Subway Maps. Vimeo. Disponível em: <http://vimeo.com/62789141>. Acessado

em: 05 ago. 2013.

Cidade Inteligente é uma cidade pensada para as pessoas: Pablo Florentino at TEDxPelourinho

2012. Youtube. Disponível em:

https://www.youtube.com/watch?v=akMTtEejAgE&playnext=1&list=PLCGnWG4yX0xa0cmfEdyFj9FUd

LZEf0wPY&feature=results_main>. Acessado em: 05 ago. 2013.

Apresentação TEDx Pelourinho - Cidades Inteligente. Slide Share. Disponível em:

<http://www.slideshare.net/PabloFlorentino/pablo-florentino-tedx>. Acessado em: 05 ago. 2013.

Design the New Business. Vimeo. Disponível em: <http://vimeo.com/33531612 >. Acessado em: 05

ago. 2013.

Arquitetura de Informação. Disponível em: <http://arquiteturadeinformacao.com/>. Acessado em: 05

ago. 2013.

Official Usability, User Experience & User Interface Guidelines From Companies. Usability Geek.

Disponível em: <http://usabilitygeek.com/official-usability-user-experience-user-interface-guidelines-

from-companies/>. Acessado em: 05 ago. 2013.

Android. Disponível em: <http://developer.android.com/guide/practices/ui_guidelines/index.html>.

Acessado em: 05 ago. 2013.

20 User Experience Books you should own. Ux by Design. Disponível em:

<http://www.uxbydesign.org/2009/06/24/20-user-experience-books-you-should-own/>. Acessado em:

05 ago. 2013.

Slide Share. Disponível em: <http://www.slideshare.net/cruzk/resumo-do-livro-business-model-

generation>. Acessado em: 05 ago. 2013.

74

Infragistic. Disponível em: <http://www.infragistics.com/products/indigo-studio>. Acessado em: 05

ago. 2013.

Typeform. Disponível em: <http://www.typeform.com/ >. Acessado em: 05 ago. 2013.

1/6 . Alexandre Wollner e a formação do design moderno no Brasil. Youtube. Disponível em:

<https://www.youtube.com/watch?v=kK0sYReP5OU>. Acessado em: 05 ago. 2013.

Disponível em: <http://empreenderepreciso.blogspot.com.br/2011/09/fala-galera-tem-um-tempo-que-

nao-venho.html>. Acessado em: 05 ago. 2013.

Business Model Generation. Disponível em: <http://www.businessmodelgeneration.com/>. Acessado

em: 05 ago. 2013.

Caronetas. Disponível em: <http://www.caronetas.com.br>. Acessado em: 08 ago. 2013.

Caroneiros. Disponível em: <http://www.caroneiros.com>. Acessado em: 08 ago. 2013.

Carona Solidária. Disponível em: <http://www.caronasolidaria.com>. Acessado em: 08 ago. 2013.

Carona Solidária. Sistema Ambiental Paulista. Disponível em: <http://www.ambiente.sp.gov.br/o-que-

voce-pode-fazer/transporte-solidario/>. Acessado em: 08 ago. 2013.

Empresas de São Paulo incentivam a prática da carona solidária. Globo. Disponível em:

<http://g1.globo.com/sao-paulo/anda-sp/noticia/2013/06/empresas-de-sao-paulo-incentivam-pratica-

da-carona-solidaria.html>. Acessado em: 08 ago. 2013.

Mobilidade urbana de Londres: um exemplo a ser seguido. Zero Hora. Disponível em:

<http://zerohora.clicrbs.com.br/rs/esportes/olimpiada/noticia/2012/08/mobilidade-urbana-de-londres-

um-exemplo-a-ser-seguido-3848379.html>. Acessado em: 08 ago. 2013.

Mobile First – A arte de pensar com foco. Tableless. Disponível em: <http://tableless.com.br/mobile-

first-a-arte-de-pensar-com-foco/>. Acessado em: 20 ago. 2013.

O que é design atômico? Tableless. Disponível em: <http://tableless.com.br/o-que-e-design-

atomic/#.Uh7uXeCWHFk>. Acessado em: 20 ago. 2013.

Boas práticas de acessibilidade. Tableless. Disponível em: <http://tableless.com.br/boas-praticas-

de-acessibilidade/#.Uh7ytuCWHFk>. Acessado em: 20 ago. 2013.

75

11. APÊNDICES

APÊNDICE A – LISTA DE PRESENÇA DA ORIENTAÇÃO

UNIVERSIDADE SALVADOR | UNIFACS PÓS-GRADUAÇÃO EM DESIGN ESTRATÉGICO

Trabalho de Conclusão de Curso

Título do Projeto:

___________________________________________________________________

______________

Orientador(a):

___________________________________________________________________

______________

Orientando(s)(as):

___________________________________________________________________

______________

___________________________________________________________________

______________

___________________________________________________________________

______________

76

ORIENTAÇÃO Horário Assinatura

Data Início Término Orientador(a) Orientado(s)(as)

__________________________________

______________________________________

______________________________________

__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

77

APÊNDICE B – FICHA AVALIATIVA DOS DOCUMENTOS ESCRITOS

UNIVERSIDADE SALVADOR | UNIFACS PÓS-GRADUAÇÃO EM DESIGN ESTRATÉGICO Trabalho de Conclusão de Curso

Título do Projeto:

___________________________________________________________________

______________

Orientador(a):

___________________________________________________________________

______________

Orientando(s)(as):

___________________________________________________________________

______________

___________________________________________________________________

______________

___________________________________________________________________

______________

Data: ____ / ____ / ____.

Critérios que devem ser observados:

conteúdo

análise dos dados/resultado esperado

metodologia científica e/ou metodologia projetual

linguagem/ABNT

Parecer do avaliador

_______________________________________________________________________

_______________________________________________________________________

78

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_____________________________________________________________________

Avaliador Assinatura Nota

79

12. ANEXOS

ANEXO 1 – ALGUMAS GUIDELINES IOS

80

ANEXO 2 – ALGUMAS GUIDELINES ANDROID