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
1
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.
2
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
3
DESENVOLVIMENTO DO DESIGN FÍSICO ........................................................ 36
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
4
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?").
5
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.
6
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ócioeconômico de cada país.
7
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.
8
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.
9
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 emails 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, enxergase 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
10
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
11
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.
12
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.
13
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,
14
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.
15
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.
16
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.
17
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
18
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.
19
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.
20
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,
21
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.
22
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) :
23
Imagem 01 – Fluxograma de análise hierárquica de tarefas (AHT) do aplicativo “bora!”.
24
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!”.
25
Imagem 03 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.
26
Imagem 04 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.
27
Imagem 05 – Prototipação de baixa fidelidade elaborada pelos desenvolvedores do aplicativo “bora!”.
28
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 seqüê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.
29
Imagem 07 – Prototipação de média fidelidade.
30
Imagem 08 – Prototipação de média fidelidade.
31
Imagem 09 – Prototipação de média fidelidade.
32
Imagem 10 – Prototipação de média fidelidade.
33
Imagem 11 – Prototipação de média fidelidade.
34
Imagem 12 – Prototipação de média fidelidade.
35
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.
36
37
38
39
40
41
42
43
44
45
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.
46
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.
47
7.1.2 PROTOTIPAÇÃO DE MÉDIA FIDELIDADE
Imagem 14 – Prototipação de média fidelidade; home do site (alternativa 1).
48
Imagem 15 – Prototipação de média fidelidade; home do site (alternativa 2).
49
Imagem 16 – Prototipação de média fidelidade; home do site (alternativa 3).
50
Imagem 17 – Prototipação de média fidelidade; página do clube de benefícios.
51
Imagem 18 – Prototipação de média fidelidade; home do site no iPhone.
52
Imagem 19 – Prototipação de média fidelidade; home do site no iPad.
53
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.
54
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.
55
Imagem 22 – Clube de benefícios (antes do usuário efetuar o login).
56
Imagem 23 – Clube de benefícios (depois do usuário ter efetuado o login).
57
Imagem 24 – Home do site no desktop.
Imagem 25 – Home do site no desktop (vantagens).
58
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).
59
Imagem 28 – Seção de produtos, paginação e rodapé.
60
Imagem 29 – Home do site no tablet.
61
Imagem 30 – Home do site no tablet.
62
Imagem 31 – Home do site no smartphone.
63
Imagem 32 – Home do site no smartphone.
Imagem 33 – Demonstração de responsividade do site.
.
64
8. CRONOGRAMA
Imagem 34 – Cronograma contendo as etapas e períodos de desenvolvimento do aplicativo “bora!”.
65
9. ORÇAMENTOS
Imagem 35 - Orçamento 1: Wireframe (Tabela Referencial de Valores para Freellas em Design)
66
Imagem 36 - Orçamento 2: Programação (Orçado por Pedro Araújo – Analista e desenvolvedor web)
67
10. REFERÊNCIAS
PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interação: Além da interação homemcomputador. 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-mistakesweb-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-deinterfaces/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-demodo-exponencial-dino890962131>. Acessado em: 09 jun. 2013.
68
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-napratica/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-mistakesweb-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-josecarlos-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/flatdesign-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-oagora/>. Acessado em: 05
69
ago. 2013.
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/googlemaps-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
Dribbble.
Disponível
em:
<http://dribbble.com/shots/703378-Arounded-homepage-Find-a-car-to-
drive/attachments/64891>. Acessado em: 05
70
ago. 2013.
ago. 2013.
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-preocupamontadora/>. 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/ptbr/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-smartphones14052013-27.shl>. Acessado em: 05
71
ago. 2013.
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-aparelhoscom-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-daodicas/?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-celularajuda-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-oscarros/ >. Acessado em: 05
ago. 2013.
Bike Lane Safety Light-USB rechargeable. Thex Fire. Disponível em: <http://thexfire.com/productspage/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/gettingaround/car-sharing>. Acessado em: 05
72
ago. 2013.
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-terespaco-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
Inteligente.
TEDx
Pelourinho
-
Cidades
Slide
Share.
<http://www.slideshare.net/PabloFlorentino/pablo-florentino-tedx>. Acessado em: 05
Disponível
em:
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-guidelinesfrom-companies/>. Acessado em: 05
Android.
Disponível
Acessado em: 05
20
User
em:
ago. 2013.
<http://developer.android.com/guide/practices/ui_guidelines/index.html>.
ago. 2013.
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:
generation>. Acessado em: 05
73
<http://www.slideshare.net/cruzk/resumo-do-livro-business-model-
ago. 2013.
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-quenao-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
Caroneiros. Disponível em: <http://www.caroneiros.com>. Acessado em: 08
ago. 2013.
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-quevoce-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-praticada-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-londresum-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/mobilefirst-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-designatomic/#.Uh7uXeCWHFk>. Acessado em: 20
ago. 2013.
Boas práticas de acessibilidade. Tableless. Disponível em: <http://tableless.com.br/boas-praticasde-acessibilidade/#.Uh7ytuCWHFk>. Acessado em: 20
74
ago. 2013.
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):
___________________________________________________________________
______________
___________________________________________________________________
______________
___________________________________________________________________
______________
75
ORIENTAÇÃO
Horário
Data
Início Término
Assinatura
Orientador(a)
Orientado(s)(as)
____________________________
______
____________________________
__________
____________________________
__________
____________________________
______
____________________________
______
____________________________
______
____________________________
______
____________________________
______
____________________________
______
____________________________
______
____________________________
______
____________________________
______
76
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
_______________________________________________________________________
_______________________________________________________________________
77
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_____________________________________________________________________
Avaliador
78
Assinatura
Nota
12. ANEXOS
ANEXO 1 – ALGUMAS GUIDELINES IOS
79
ANEXO 2 – ALGUMAS GUIDELINES ANDROID
80