TCC - Aplicativo com informações de vagas em estacionamentos públicos e privados by Ricardo Goldstein

Aplicativo com informações de vagas em estacionamentos públicos e privados no centro do Rio de Janeiro Graduação em Design Gráfico

Ricardo Goldstein Daniel Netto

Aplicativo com informações de vagas em estacionamentos públicos e privados no centro do Rio de Janeiro Graduação em Design Gráfico Alunos:

Ricardo Goldstein Daniel Netto Orientador:

Leando Calvão 2016

Resumo | Abstract

Resumo

Abstract

O número de automóveis em circulação nas ruas vem crescendo cada vez mais. Com isso, a dificuldade de estacionamento desses veículos acompanha esse crescimento. Esse projeto tem como objetivo a redução de tempo na busca de estacionamentos e locais de paradas de automóveis, através da criação de uma interface para um aplicativo móvel, que possui foco em usabilidade e experiência do usuário.

The number of cars circulating in the streets is growing increasingly. Thus, the difficulty of parking these vehicles follow this growth. This project aims to reduce time in finding parking lots and car stops locations by creating an interface for a mobile application , which has a focus on usability and user experience .

Palavras-Chave:

Key words:

Aplicativo, estacionamento, design de interfaces, usabilidade, design social.

Application, parking, interface design , usability, social design.

Lista de figuras Figura 1 - Ícone do aplicativo Let’sPark ……………...………...……………...........

Figura 23 - Menu OndeParar …................................................…………........…

Figura 2 - Ícone do aplicativo OndeParar ………………………..…….……............

Figura 24 - Menu ParkMe ……………................................................……...........

Figura 3 - Ícone do aplicativo ParkMe ………………..…….………………............... 21

Figura 25 - Tutorial LetsPark ……................................................…................

Figura 4 - Mapa LetsPark …..........................…………....….................................. 23

Figura 26 - Filtro OndeParar ………...............................................……............ 37

Figura 5 - Favoritos OndeParar …...............................................…...….........

Figura 27 - Menu ParkMe ………………................................................…...........

Figura 6 - Ajuda no ParkMe …..........................................……………....….........

Figura 28 - Mapa LetsPark ……………..............................................……........... 39

Figura 7 - Preferências LetsPark ….................................................……........

Figura 29 - Erro OndeParar ……................................................…………...........

Figura 8 - Detalhes OndeParar…................................................…………........

Figura 30 - Mapa ParkMe ……….............................................…......……........... 39

Figura 9 - Opções ParkMe ………………...................................................…....... 25

Figura 31 - Tutorial LetsPark ………….................................................….......... 41

Figura 10 - Detalhes LetsPark …….................................................……….......

Figura 32 - Sobre OndeParar ………................................................……........... 41

Figura 11 - Detalhes OndeParar …….................................................……....... 27

Figura 33 - Ajuda ParkMe ……................................................……………........... 41

Figura 12 - Detalhes ParkMe …….................................................………….......

Figura 34 - Mapa de empatia …..........................................………...……........... 45

Figura 13 - Tutorial LetsPark …….................................................……….…......

Figura 35 - Canvas da proposta de valor ….........................…....……........... 47

Figura 14 - Filtro OndeParar…………................................................…………..... 29

Figura 36 - Fluxograma de navegação ………….........................………........... 48

Figura 15 - Mapa ParkMe ………….................................................…….….........

Figura 37 - Rabiscoframes …………..............................................………...........

37 39

Figura 16 - Tutorial LetsPark ….................................................……….…......... 31

Figura 38 - Rabiscoframes ................................................………………............ 49

Figura 17 - Mapa OndeParar …………..................................................…......... 31

Figura 39 - Rabiscoframes ….............................................………………............

Figura 18 - Detalhes ParkMe ……….…............................................................

Figura 40 - Wireframe do mapa …............................………………....................

Figura 19 - Mapa LetsPark ………….................................................….….........

Figura 41 - Wireframe do mapa …............................………………....................

Figura 20 - Mapa OndeParar ……………........................................................... 33

Figura 42 - Wireframe detalhes ….................................……….........…............

Figura 21 - Mapa ParkMe ………...................................................…………........

Figura 43 - Wireframe detalhes ….................................……….........…............

Figura 22 - Menu LetsPark …………..................................................……….......

Figura 44 - Wireframe lista …..........…….............................…..…......…............. 53

Figura 45 - Wireframe lista …..........……............................…..…......….............

Figura 72 - Detalhes de um estacionamento ...........................................

Figura 46 - Wireframe do menu …..................................……….....……….........

Figura 73 - Detalhes de um estacionamento ...........................................

Figura 47 - Wireframe Favoritos …......…………............................…………........

Figura 74 - Detalhes de um estacionamento ...........................................

Figura 48 - Wireframe Favoritos …......…………............................…………........

Figura 75 - Detalhes de um estacionamento ...........................................

Figura 49 - Wireframe Configurações ………...........................…………….......

Figura 76 - Lista de estacionamento ao redor .........................................

Figura 50 - Wireframe Sobre …...............…..........................………………….......

Figura 77 - Detalhes da lista ........................................................................

Figura 51 - Wireframe Ajuda ………...................................................…….…..... 55

Figura 78 - Detalhes da lista ........................................................................

Figura 52 - Wireframe Filtro ….......................................................................

Figura 79 - Detalhes da lista ........................................................................

Figura 53 - Wireframe Personalizar …................………...............…………….....

Figura 80 - Detalhes da lista ........................................................................

Figura 54 - Wireframe Avaliar ……...........................……...............……………..... 56

Figura 81 - Detalhes da lista ........................................................................

Figura 55 - Mapa ............................................................................................. 58

Figura 82 - Menu ............................................................................................. 72

Figura 56 - Mapa ............................................................................................. 59

Figura 83 - Lista de favoritos vazia ............................................................

Figura 57 - Lista ..............................................................................................

Figura 84 - Favoritos ......................................................................................

Figura 58 - Detalhes .......................................................................................

Figura 85 - Configurações ............................................................................

Figura 59 - Detalhes .......................................................................................

Figura 86 - Sobre ............................................................................................. 74

Figura 60 - Menu ............................................................................................. 59

Figura 87 - Filtros............................................................................................. 75

Figura 61 - Filtros ............................................................................................ 59

Figura 88 - Ajuda.............................................................................................. 76

Figura 62- Simbologia …....................................................……………………........ 63

Figura 89 - Personalizar.................................................................................

Figura 63- Logotipo …...................................................……………………............

Figura 90 - Avaliação de estacionamento ................................................. 77

Figura 64 - Paleta de cores …..............................................……………….......…

Figura 65 - Tipografia Roboto ......................................................................

Figura 66 - Mapa ............................................................................................. 66 Figura 67 - Mapa ............................................................................................. 67 Figura 68 - Mapa modo noturno .................................................................. 67 Figura 69 - Mapa modo noturno .................................................................

Figura 70 - Detalhes de um estacionamento ...........................................

Figura 71 - Detalhes de um estacionamento ...........................................

Sumário 1. Introdução .................................................................................................................................................................................................. 15 2. Objetivos ...................................................................................................................................................................................................... 17 3. Fundamentação Teórica .......................................................................................................................................................................... 19 3.1. Design ............................................................................................................................................................................................ 19 3.2. Experiência do Usuário ............................................................................................................................................................... 19 3.3. Usabilidade ................................................................................................................................................................................... 20 3.4. Design Estratégico ...................................................................................................................................................................... 20 4. Análise de Similares ................................................................................................................................................................................. 21 4.1. Pesquisa ......................................................................................................................................................................................... 21 4.2. Avaliação Heurística .................................................................................................................................................................. 21 4.2.1. Feedback .................................................................................................................................................................... 22 4.2.2. Utilizar a linguagem do usuário ............................................................................................................................. 24 4.2.3. Liberdade de ações par a o usuário ...................................................................................................................... 26 4.2.4. Consistência ............................................................................................................................................................... 28 4.2.5. Prevenir erros ............................................................................................................................................................. 30 4.2.6. Torne as coisas reconhecíveis ............................................................................................................................... 32 4.2.7. Flexibilidade e eficiência de uso ............................................................................................................................ 34 4.2.8. Visualmente simples ................................................................................................................................................ 36 4.2.9. Desenvolva boas mensagens de erro .................................................................................................................. 38 4.2.10. Ajuda e documentação .......................................................................................................................................... 40 4.3. Conclusão ..................................................................................................................................................................................... 42 4.3.1. Harmonia cromática ................................................................................................................................................ 42

4.3.2. Iconografia .................................................................................................................................................................. 42 4.3.3. Tipografia .................................................................................................................................................................... 42 4.3.4. Interface ...................................................................................................................................................................... 43 5. Desenvolvimento ....................................................................................................................................................................................... 43 5.1. Análise S.W.O.T. ......................................................................................................................................................................... 43 5.2. Mapa de empatia ....................................................................................................................................................................... 43 5.3. Canvas da proposta de valor .................................................................................................................................................. 46 5.4. Fluxograma de navegação ...................................................................................................................................................... 48 5.5. Rabiscoframes ........................................................................................................................................................................... 49 5.6. Wireframes .................................................................................................................................................................................. 51 5.7. Testes de usabilidade ............................................................................................................................................................... 57 5.7.1. Roteiro do teste de usabilidade ........................................................................................................................ 57 5.7.2. Resultados ................................................................................................................................................................ 60 5.7.3. Conclusão ................................................................................................................................................................. 61 6. Resultado final ........................................................................................................................................................................................... 63 6.1. Marca .............................................................................................................................................................................................. 63 6.1.1. Naming ........................................................................................................................................................................ 63 6.1.2. Logotipo ..................................................................................................................................................................... 63 6.1.3. Paleta de cores .......................................................................................................................................................... 64 6.1.4. Família tipográfica .................................................................................................................................................. 64 6.2. Interface ......................................................................................................................................................................................... 64 6.2.1. Mapa ............................................................................................................................................................................. 66 6.2.2. Detalhes ....................................................................................................................................................................... 68 6.2.3. Modo Lista .................................................................................................................................................................. 70 6.2.4. Menu ............................................................................................................................................................................. 72 6.2.5. Favoritos ...................................................................................................................................................................... 73 6.2.6. Configurações e Sobre ............................................................................................................................................. 74

6.2.7. Ajuda e Filtros ............................................................................................................................................................. 75 6.2.8. Avaliação de estacionamentos .............................................................................................................................. 77 7. Conclusão ................................................................................................................................................................................................... 79 8. Referências Bibliográficas....................................................................................................................................................................... 81

1. Introdução O tema deste projeto é a localização de vagas para veículos, tanto em estacionamentos públicos quanto em privados, no centro da cidade do Rio de Janeiro, através da criação de uma interface de aplicativo para aparelhos móveis. O motivo para a escolha deste tema é a grande dificuldade de estacionar veículos no centro do Rio de Janeiro. Em 2014, com a interdição do Elevado da Perimetral, via que ligava importantes àreas no centro da cidade, a dificuldade em localizar vagas no centro do Rio de Janeiro aumentou. “Após as mudanças viárias no Centro do Rio por causa da interdição do Elevado da Perimetral, os motoristas enfrentam dificuldades para estacionar o carro na região, como mostrou o Bom Dia Rio. São menos mil vagas e a tarefa de parar o veículo em determinadas regiões exige sorte e paciência.” (G1 - 2014)¹. Muitos motoristas encontram dificuldade e acabam cometendo irregularidades para conseguir estacionar o veículo, como relata a notícia feita pelo G1¹ : “(...) foi possível flagrar vários motoristas cometendo irregularidades. Eles param em fila dupla e estacionam em local proibido. Ao todo, desde o ano passado, 3058 vagas foram retiradas e apenas 1729 vagas continuam existindo no bairro, em cerca de 30 ruas. Nos bairros da Praça 15, Praça Mauá e Saúde quase não existem mais vagas disponíveis.” (G1 - 2014)

¹ Acesso em: 23 de julho de 2016 http://goo.gl/qloVvU

O valor da multa por estacionamento em local irregular aumen-tou de R$ 53,20 para R$ 127,69 e a infração mudou de leve para grave (JORNAL NACIONAL, 2016)². O aumento desse valor é um dos motivos que comprova a relevância social da construção do projeto e o fator que motivou a escolha do mesmo. A falta de sinalização também é um problema para os motoristas. Carros sendo rebocados e motoristas sendo multados aumentam a cada dia. No Rio de Janeiro, de acordo com a Secretária de Ordem Pública³, no ano de 2015 foram mais de 67.000 reboques. A Guarda Municipal também informou que o total de multas por infrações de estacionamento ultrapassavam 4.900 ³. “Questionadas quanto ao número de reboques por infrações deste tipo no ano passado e até hoje em 2015, a Secretaria de Ordem Pública informou não poder precisar infrações do gênero e se limitou a informar que em 2014, considerando todas as infrações possíveis de estacionamento, rebocou 47.107 veículos. Nesse ano (2015), até 2 de outubro, foram 67.673 reboques. A Guarda Municipal também informou o total de multas por infrações de estacionamento de forma genérica, neste ano, que seria de 4.914 sanções.” (SABÓIA, Gabriel - 2015) Outras cidades também sofrem com o mesmo problema em relação a vagas de estacionamento para veículos. De acordo com notícia feita pelo site G1 ⁴, Ferraz Antônio do Amaral, um morador da cidade de Angra dos Reis, localizada na costa verde do Rio de Janeiro, contou: “São muitos ² Acesso em: 25 de julho de 2016 http://goo.gl/WFo8HD ³ Acesso em: 23 de julho de 2016 http://goo.gl/br3IPC ⁴ Acesso em: 23 de julho de 2016 http://goo.gl/TVcwen

carros. As vagas não são suficientes para a quantidade de carros. Leva meia hora, uma hora e às vezes não se consegue vaga”. O público-alvo do projeto são pessoas como o Ferraz Antônio, que perdem muito tempo na procura de um a vaga. De acordo com o DETRAN-RJ duas das maiores incidências de infrações no ano de 2016 foram referentes ao estacionamento de veículos em locais irregulares. ‘Estacionar fora das condições em estacionamento regulamentado’ somam mais de 48 mil multas e a infração ‘Estacionar em local e hora em desacordo com sinalização’ somam mais de 31 mil multas dentre os meses de Janeiro, Fevereiro e Março de 2016. No município de Nova Friburgo, no Rio de Janeiro, o número de multas por parada em local proibido é uma das infrações mais recorrentes. “A principal infração detectada, de acordo com Smomu, é a parada ou estacionamento em fila dupla. Outras infrações comuns são: dirigir falando ao celular, estacionar em desacordo com a sinalização, estacionar em cima do passeio público, estacionar em fila dupla e dirigir sem cinto de segurança.” (A Voz da Serra, 2015) A proposta de valor deste projeto é contribuir com a resolução de problemas relacionados ao estacionamento de veículos no centro da cidade do Rio de Janeiro, ao reduzir a quantidade de multas por estacionamento em local proibido e informar aos motoristas sobre em quais locais esse estacionamento é permitido. A solução escolhida para atender a essa proposta de valor é um aplicativo mobile. O objetivo do aplicativo é facilitar a busca por vagas de estacionamentos no centro do Rio de Janeiro, sejam públicos ou privados. O aplicativo tem como objetivos secundários diminuir a quantidade de multas causadas por estacionamento irregular e o tempo gasto na procura de um local adequado para o estacionamento de veículos, evitar o congestionamento nas vias, diminuir o consumo de

combustível e reduzir o estresse causado pelo trânsito. O projeto desse aplicativo envolve o design de interfaces gráficas, experiência do usuário com foco em usabilidade, interação humano-computador, e branding.

2. Objetivos Objetivo geral:

Objetivos específicos:

Desenvolver um aplicativo mobile pelo qual os usuários poderão consultar locais públicos ou privados para estacionar seu veículo, no centro da cidade do Rio de Janeiro, sem correr o risco ou ter receio de ser multado e/ou ter seu carro rebocado.

1. Identificar o comportamento das pessoas que costumam estacionar no centro do Rio de Janeiro. 2. Identificar e listar concorrentes diretos, com o intuito de levantar dados, melhorias e features adicionais para o nosso produto final. 3. Levantar dados da Prefeitura do Rio de Janeiro e/ou do DETRAN, referentes ao número de condutores multados por parar em locais proibidos. 4. Levantar dados de pessoas que deixam de ir a algum lugar devido ao desconhecimento da existência de locais permitidos para paradas de veículos. 5. Construir um protótipo de baixa fidelidade demonstrando o funcionamento do aplicativo. 6. Construir um protótipo de alta fidelidade do aplicativo para celulares, com foco na experiência do usuário. 7. Executar testes com usuários-alvo para aplicação de melhorias na interface do aplicativo.

3. Fundamentação Teórica 3.1. Design O Design envolve o conhecimento de diversas habilidades e possui muitas definições. SANTOS¹ (2000, p. 24 )¹ “O design é uma atividade integradora e compatibilizadora de diversos tipos de informação que são necessários para se desenvolver e lançar um produto no mercado”. Nota-se que o design vem atuando e interagindo com outras profissões, com isso causando uma diferenciação no mercado. Mas o trabalho é desenvolvido da melhor maneira quando cabe a cada área de conhecimento resultados mais expressivos e troca de experiências e informações. NORMAN² (2006, p. 15) acrescenta que “Design apropriado e concentrado no humano exige que todas as considerações sejam abordadas desde o princípio”. A partir disso, pode-se afirmar que o designer está presente em todas as etapas do projeto, do início ao fim, sempre analisando e planejando, até encontrar a melhor forma ou solução para o produto final, sempre respeitando as necessidades e levando em conta todas as informações coletadas, sem sacrificar a estética do produto ou do projeto. Para BERNESEN³ (1995, p. 15), “Um bom design não é somente a solução de um problema, mas também a sua definição apropriada. E isto é uma arte tanto quanto é uma técnica.” O design não é apenas a conclusão, ele estabelece resultados e metas do início ao fim. Observando a evolução da tecnologia e a velocidade da mesma,

em seus conhecimentos teóricos e práticos. O designer é o diferencial em cada projeto e seu papel é transformar produtos e/ou projetos idênticos em objetos opostos. SANTOS¹ (2000 p.107) “Podemos concluir que na medida em que os produtos se tornam cada vez mais parecidos, tecnologicamente, resta ao processo de design exercer o papel de diferencial.” A prática do Design envolve conhecimento em diversas disciplinas, entre elas o design gráfico, que tem como objetivo facilitar a comunicação visual por meio do projeto de materiais impressos utilizando técnicas de diagramação, uso de cores, tipografia e branding . O design de interface utiliza essas mesmas técnicas do design gráfico adaptadas ao meio digital e aliadas ao conhecimento de princípios de usabilidade e design de interação.

3.2. Experiência do Usuário De acordo com NORMAN e NIELSEN (2012)¹ , Experiência do Usuário está relacionada com “todos os aspectos da interação do usuário final com a empresa, seus serviços e seus produtos. (...) A fim de alcançar a experiência do usuário de alta qualidade, deve haver uma fusão perfeita dos serviços de várias disciplinas , incluindo engenharia , marketing, design gráfico, industrial e de interface”. Denominada em inglês como User Experience, ou UX, a experiência do usuário abrange todas as etapas da criação e desenvolvimento de um projeto: Design de

é correto afirmar que o designer necessita estar sempre atento às mudanças e sempre se reciclando de todas as maneiras possíveis, evoluindo

Interface, Usabilidade, Design Estratégico e Inovação são exemplos de etapas pertencentes ao ciclo geral da experiência. Para McNamara & Kirakowski² (2006), “a experiência do usuário considera a relação mais

¹ SANTOS, Flavio Anthero dos. O design com diferencial competitivo (2000) ² NORMAN, Donald. A. O design do dia a dia. 2006 ³ Bernsen, Jens. Design: defina primeiro o problema. SENAI/LBDI, 1995.

¹ Acesso em 22 de julho de 2016 http://goo.gl/VyCuoW ² Acesso em 22 de julho de 2016 http://goo.gl/n4l6cv

ampla entre o produto e o usuário , a fim de investigar a experiência pessoal do indivíduo em usá-lo”. O desenvolvimento e pesquisas quando são focados na experiência geral do usuário, podem gerar ideias e aperfeiçoamentos que serão fatores decisivos para o sucesso de um produto ou projeto.

3.3. Usabilidade O objetivo do design focado em usabilidade é tornar a interação do usuário mais eficiente, eficaz e satisfatória. O design deve manter o equilíbrio entre funcionalidade e elementos visuais, com foco em criar um sistema que não é somente funcional, mas também é adaptável às necessidades do usuário. De acordo com NIELSEN (2012)³ , a usabilidade é “um atributo de qualidade que avalia o quão fácil é o uso de uma interface. A palavra ‘usabilidade’ também se refere a métodos que melhoram o uso da interface durante o processo de design.” Nielsen ainda afirma que a usabilidade é definida em cinco componentes de qualidade: Apreensibilidade, Eficiência, Memorização, Erros e Satisfação. A Apreensibilidade é, de acordo com NIELSEN, “o quão fácil é para os usuários realizarem tarefas básicas na primeira vez que encontram o design?”. Eficiência: “depois que os usuários aprenderam o design, qual a rapidez com que podem realizar as tarefas ?”. Memorização: “Quando o usuário voltar para o projeto após um período sem usá-lo , com que facilidade pode-se restabelecer a proficiência ?”. O componente de qualidade Erro é definido pelo seguinte questionamento: “Quantos erros os usuários cometem , quão grave são esses erros, e quão facilmente pode-se recuperar dos erros ?”. Por fim, NIELSEN descreve o componente Satisfação, com a seguinte pergunta: “O quão prazeroso é o uso do design projetado?”. Existem diversos atributos de qualidade mas, para NIELSEN, o ponto chave é a utilidade do design, ou seja, “Faz o que o usuário necessita?”. NIELSEN ainda coloca que a união

³ Acesso em: 30 de julho de 2016 http://goo.gl/HcJM8w

de usabilidade e utilidade é o que diz se algo é útil ou não, ou seja, ambos são igualmente importantes.

3.4. Design Estratégico “O Design estratégico é uma abordagem metodológica do design relacionada com a elaboração das estratégias de uma organização.” (Ikeda, Minako⁴ 2008). Envolve elaborar fases e etapas de uma marca ou um negócio de uma maneira mais estratégia. Para CAMPOS, Daniel (2013), o Design Estratégico “ diz respeito a você trabalhar na identidade de uma marca, mas com um pensamento estratégico. Ou seja, trazer outros motivos, outras razões que justifiquem as suas soluções visuais, não sendo apenas uma exploração visual. Mas uma exploração visual, uma solução visual baseado em outros subsídios: um plano de negócios, posicionamento de marca, uma plataforma de marca”.

⁴ IKEDA, Minako. Strategic Design (2008) Acesso em: 28 de julho de 2016 http://goo.gl/Cv9hTr

4. Análise de similares ser consistente e compreensível, oferecer atalhos e meios de controle por parte do usuário e simplicidade de uso, requerendo o mínimo esforço durante a tarefa. As 10 Heurísticas de Nielsen são:

Figura 1 - LetsPark

Figura 2 - OndeParar

Figura 3 - ParkMe

4.1. Pesquisa O diferencial deste projeto em relação aos seus similares no mercado é a localização e informação sobre vagas de estacionamento presentes em ruas e locais públicos. Os similares utilizados para a análise foram os aplicativos LetsPark (Figura 1), OndeParar (Figura 2) e ParkMe (Figura 3), todos têm como objetivo principal informar sobre locais de estacionamentos privados e seus preços e funcionalidades como lista com os estacionamentos perto do usuário e indicação da melhor opção naquele momento.

4.2. Avaliação Heurística Para a análise foi utilizada como referência a lista das 10 heurísticas da usabilidade no design de interfaces (NIELSEN, Jakob. 1995)¹. Jakob Nielsen é um dos mais conceituados especialistas em usabilidade da Web, suas heurísticas são muito utilizadas no meio profissional, pois são princípios que facilitam analisar um sistema com base na sua capacidade de oferecer feedback, ajuda e prevenção de erros adequados ¹ Acesso em 22 de julho de 2016 http://goo.gl/QyBKK4

1. Feedback - “o sistema sempre tem que manter o usuário informado a cada ação feita” ¹. De acordo com NIELSEN, para cada ação que o usuário fizer, o sistema tem que demonstrar ao mesmo o que está acontecendo, para que o usuário não se perca. 2. Utilizar a linguagem do usuário - “o sistema deve utilizar a linguagem do usuário, com frases, palavras e conceitos familiares ao usuário.” ¹ Para NIELSEN, os termos utilizados no sistema devem ser pensados para serem de fácil entendimento do usuário, por isso deve-se evitar o uso de termos técnicos. 3. Liberdade de ações para o usuário - “o usuário poderá cometer erros, para isso é necessária uma ‘saída de emergência’ para o usuário retornar ao estado ‘normal’ sem a necessidade de diálogos desnecessários”.¹ Por essa definição é possível entender que o usuário precisa estar no controle da navegação, podendo desfazer ou refazer qualquer interação. 4. Consistência - “os usuários não devem ter que se perguntar se diferentes palavras , situações ou ações significam a mesma coisa”.¹ É necessário tratar ações ou coisas similares da mesma maneira para o usuário ter uma melhor identificação.

¹ Acesso em 22 de julho de 2016 http://goo.gl/QyBKK4

5. Prevenir erros - “evitar situações que são consideradas propensas a erro, projetar um design com o mínimo de erros possíveis”. ¹ NIELSEN afirma que é necessário entender bem o modelo de navegação e de utilização do usuário com a interface, afim de construi-la da melhor maneira possível e com o mínimo de erros possíveis. 6. Torne as coisas reconhecíveis - “evitar que o usuário pense em como executar uma ação; instruções do sistema devem estar visíveis”. ¹ As ações devem ser claras para que o usuário não precise ativar a memória ou pensar em como executa-la. Para NIELSEN, o sistema precisa dialogar com o usuário. 7. Flexibilidade e eficiência de uso - “ações como atalhos, por exemplo, podem acelerar a interação para o usuário experiente e, mesmo assim, o sistema pode servir para ambos os usuários, inexperientes e experientes”. ¹ Tendo em vista essa afirmação, o sistema e a interface necessitam ser fáceis para usuários novos, porém, também podem ser flexíveis para usuários experientes, por meio do uso, por exemplo, de atalhos que agilizam a navegação desses usuários. 8. Visualmente simples - “a interface deve ser simples, mostrar ao usuário apenas o que ele precisa saber, e não possuir informações irrelevantes pois elas podem entrar em conflito com as informações que realmente importam”.¹ De acordo com NIELSEN, as interfaces precisam ser simples, deve-se evitar o uso de informações irrelevantes e demonstrar informações úteis apenas quando necessárias.

¹ Acesso em 22 de julho de 2016 http://goo.gl/QyBKK4

9. Desenvolva boas mensagens de erro - “as mensagens de erro de vem se comunicar com frases e palavras, sem códigos. Indicar o problema e sugerir uma solução”.¹ Sistemas e interfaces devem se comunicar com clareza quando emitem notificações de erro ao usuário. De acordo com o autor, as mensagens de erro devem ser claras e sugerir uma solução direta ao usuário. 10. Ajuda e documentação - “mesmo em uma boa interface, é necessário prover ajuda e uma boa documentação e qualquer informação deve ser de fácil acesso e listar etapas e soluções concretas”.¹

4.2.1. Feedback Aplicativo LetsPark (Figura 4) O usuário recebe o feedback imediato ao procurar por estacionamentos próximos ao local em que ele está. Ao clicar na busca por estacionamentos, a mensagem ‘Carregando estacionamentos’ aparece demonstrando ao usuário a resposta do sistema à sua ação de busca.

Aplicativo OndeParar (Figura 5) O feedback não está presente em todas as telas, o que deixa o usuário confuso. Por exemplo, na primeira visita à tela de favoritos, o usuário a vê em branco, sem apresentar qualquer informação.

Aplicativo ParkMe (Figura 6) Ao entrar em qualquer página nova, o sistema exibe um ícone de carregamento, feedback que mostra que ainda falta finalizar o carregamento da página. Poderia ter um feedback maior, como utilizar um ícone e a frase ‘Carregando’ ao lado, para servir de apoio e reforço visual.

Figura 4 - Mapa do LetsPark

Figura 5 - Favoritos do OndeParar

Figura 6 - Ajuda no ParkMe

4.2.2. Utilizar a linguagem do usuário: Aplicativo LetsPark (Figura 7) Todas as frases e informações são compreensíveis e dialogam com o universo do usuário. Frases informais como ‘E aí, vai ficar quanto tempo?’ são utilizadas, o que gera melhor entendimento do usuário.

Aplicativo OndeParar (Figura 8) Frases e palavras identificam a significado de cada funcionalidade, porém, faltam detalhes ou uma informação mais detalhada.

Aplicativo ParkMe (Figura 9) Frases e palavras identificam bem a funcionalidade de cada filtro, como apresentado na (Figura 9).

Figura 7 - Preferências LetsPark

Figura 8 - Detalhes OndeParar

Figura 9 - Opções ParkMe

4.2.3. Liberdade de ações para o usuário: Aplicativo LetsPark (Figura 10) Em algumas telas, a opção de retornar fica visível, porém, muito escondida. Nesta imagem de exemplo, o ícone de voltar fica bem pequeno ao lado direito do logo do aplicativo.

Aplicativo OndeParar (Figura 11) Em algumas telas, o ícone de retornar está presente, mas, na maioria delas, como na Figura 11, não há indicação de como voltar à tela anterior.

Aplicativo ParkMe (Figura 12) Em todas as telas, o ícone para retornar para à tela anterior está presente, proporcionando maior liberdade de ações para o usuário.

Figura 10 - Detalhes LetsPark

Figura 11 - Detalhes OndeParar

Figura 12 - Detalhes ParkMe

4.2.4. Consistência: Aplicativo LetsPark (Figura 13) O aplicativo LetsPark facilita a distinção entre elementos de significados diferentes e a identificação daqueles que tem o mesmo significado. Os pins (marcadores de localização de cada estacionamento), possuem cores e significados diferentes. Por exemplo, o verde será sempre o estacionamento que estará aberto naquele momento, causando consistência de um significado em cor para o usuário.

Aplicativo OndeParar (Figura 14) A imagem ao lado demonstra a consistência no uso das cores e formas para botões, demonstrando, assim a sua funcionalidade. Essas formas e cores, assim como os ícones de informação e pagamento, estão presentes por todo o aplicativo.

Aplicativo ParkMe (Figura 15) Os marcadores de estacionamento são sempre iguais, apenas diferenciando os preços cobrados em cada local como pode ser observado na Figura 15.

Figura 13 - Tutorial LetsPark

Figura 14 - Filtro OndeParar

Figura 15 - Mapa ParkMe

4.2.5. Prevenir erros: Aplicativo LetsPark (Figura 16) O LetsPark tenta prevenir os possíveis erros explicando a função de cada ícone, através de um mini tutorial na primeira utilização do aplicativo. Porém, o design deveria ser intuitivo o bastante para não haver a necessidade de tutoriais.

Aplicativo OndeParar (Figura 17) Diversos pontos no OndeParar são propensos ao erro. Por exemplo, na imagem ao lado o usuário tem o ícone de um relógio, porém não há informações suficientes para o entendimento da função do botão, o que pode gerar atrito do usuário com a interface

Aplicativo ParkMe (Figura 18) Ícones e legendas são utilizados para explicar a função de cada botão, tornando a interação menos propensa a erros.

Figura 16 - Tutorial LetsPark

Figura 17 - Mapa OndeParar

Figura 18 - Detalhes ParkMe

4.2.6. Torne as coisas reconhecíveis: Todos os três aplicativos utilizam o ícone de um pin (marcador), que os usuários reconhecem como um marcador, no caso, informando o local dos estacionamentos em um mapa.

Figura 19 - Mapa LetsPark

Figura 20 - Mapa OndeParar

Figura 21 - Mapa ParkMe

4.2.7. Flexibilidade e eficiência de uso: O menu do aplicativo pode ser acessado tanto pelo toque no ícone de menu ao lado do logo, ou deslizando o dedo para a direita. Isso torna a interface mais flexível e eficiente para usuários experientes.

Figura 22 - Menu LetsPark

Figura 23 - Menu OndeParar

Figura 24 - Menu ParkMe

4.2.8. Visualmente simples: Aplicativo LetsPark (Figura 25) A interface é bem simples, tem apenas algumas funções e todas importantes. Logo, nenhuma informação irrelevante está em conflito com alguma relevante.

Aplicativo OndeParar (Figura 26) Interface simples, porém faltam informações importantes para o usuário. O usuário fica sem saber qual será o próximo passo.

Aplicativo ParkMe (Figura 27) Interface simples e com informações relevantes ao usuário, porém, filtro inferior pode causar confusão.

Figura 25 - Tutorial LetsPark

Figura 26 - Filtro OndeParar

Figura 27 - Mapa ParkMe

4.2.9. Desenvolva boas mensagens de erro: Todos os três aplicativos possuem boas mensagens de erro; porém, faltam soluções ao longo do texto. Mensagens como ‘Nenhum endereço foi encontrado’, ou então ‘Não foi possível localizar o endereço’ estão presentes.

Figura 28 - Mapa LetsPark

Figura 29 - Erro OndeParar

Figura 30 - Mapa ParkMe

4.2.10. Ajuda e documentação: Aplicativo LetsPark (Figura 31) A tela de ajuda do aplicativo é o tutorial de como utilizá-lo. O aplicativo não possui maiores informações de ajuda, o que pode frustrar o usuário.

Aplicativo OndeParar (Figura 32) A página sobre o aplicativo funciona como uma ajuda. Possui informações extras sobre como ele funciona e links para maiores explicações logo abaixo. Porém, o layout e a formatação do conteúdo poderiam estar mais organizados e separados por tópicos.

Aplicativo ParkMe (Figura 33) Informações de ajuda estão numa tela com layout totalmente diferente das outras telas presentes no aplicativo, o que pode gerar confusão. Tamanho de fonte muito pequeno, o que dificulta à leitura do usuário.

Figura 31 - Tutorial LetsPark

Figura 32 - Sobre OndeParar

Figura 33 - Ajuda ParkMe

4.3. Conclusão A partir dessa análise, podemos concluir que é possível melhorar e aplicar uma interface aprimorada ao artefato final seguindo as 10 heurísticas de usabilidade. Também é possível perceber que as 10 heurísticas de NIELSEN¹ em geral são respeitadas, conforme observado na maioria dos similares analisados. Além de atender a essas heurísticas de usabilidade, foram consideradas de grande relevância para o projeto analisar aspectos referentes ao design gráfico dos aplicativos similares: harmonia cromática, iconografia, tipografia e interface.

4.3.1. Harmonia cromática Ao analisar os três aplicativos, ParkMe, Onde Parar e LetsPark, pode-se observar que eles não seguem um padrão pré-estabelecido de cores. Cada aplicativo utilizou uma paleta de matiz diferente. Dois aplicativos usam duas matizes. ParkMe e LetsPark utilizam uma harmonia análoga com a paleta contendo cores frias, utilizando o matiz azul e verde. Já o aplicativo Onde Parar utiliza uma harmonia monocromática, usando o matiz laranja. Essas harmonias cromáticas são interessantes, porém não se enquadram no nosso projeto, no qual usaremos uma harmonia dupla complementar, possibilitando maiores variedades de matizes para produzir o artefato final.

4.3.2. Iconografia Os três aplicativos analisados fazem uso da iconografia como forma de ajuda na comunicação com o usuário.

“Os ícones são parte fundamental do mecanismo de interação dos usuários com os computadores, indicando zonas de acionamento de comandos ou ainda simplesmente reforçando visualmente alguma informação que o sistema apresenta” (PINHEIRO, Mauro - 2013). Diante dessa importante função na usabilidade decidimos implementar a iconografia no nosso artefato.

4.3.3. Tipografia Os três aplicativos, ParkMe, Onde Parar e LetsPark utilizam uma família tipográfica sem serifa. A família tipográfica escolhida para o artefato final foi a Roboto. Essa família é a padrão de todos os celulares Android e navegadores Chrome (Google, 2016)³, o que consiste em mais de 1.6 bilhões de usuários Android ao redor de mundo (The Verge, 2015). Sendo assim, a maioria dos usuários está acostumada com a leitura dessa fonte .

4.3.4. Interface

As telas principais dos três aplicativos fazem o uso de mapa de localização, com pins nos locais onde existem os estacionamentos cadastrados, ou seja, onde o usuário pode parar e estacionar. Neste projeto será incluída essa mesma funcionalidade, pois ela informa bem sobre uma localização geográfica e de uma forma com a qual muitos usuários já estão acostumados, pela consistência do uso dessa funcionalidade em diversos aplicativos. O aplicativo a ser desenvolvido terá como interface principal um mapa para localizar estacionamentos.

¹ Acesso em 22 de julho de 2016 http://goo.gl/QyBKK4

³ Acesso em: 2 de agosto de 2016 http://goo.gl/dFQUy5

² Acesso em 28 de julho de 2016 http://goo.gl/txqrI9

⁴ Acesso em 1 de agosto de 2016 http://goo.gl/qR4qQk

5. Desenvolvimento 5.1. Análise SWOT A análise SWOT é uma ferramenta que serve para “analisar os pontos fortes e fracos, e as oportunidades e ameaças de um negócio. Em seguida, o empreendedor pode organizar um plano de ação para reduzir os riscos e aumentar as chances de sucesso da empresa.” (NAKAGAWA , Marcelo - 2013).

Forças: • •

• •

Localização de estacionamentos legalizados em ruas e estacionamentos privados no centro do Rio de Janeiro. Facilidade de acesso pelos usuários, pois basta fazer o download do aplicativo em uma loja de aplicativos, como Apple Store ou Google Play. Acesso gratuito. Design focado no usuário.

Fraquezas: • •

Necessita de acesso à Internet. Inicialmente, só mostrará informações do centro da cidade do Rio de Janeiro.

Oportunidades: • • •

Mercado mobile em alto crescimento. Usuários cada vez mais preocupados com a praticidade. Aumento no valor da multa para estacionamento em local proibido, facilitando a adesão da Prefeitura ao aplicativo.

¹ Acesso em: 29 de julho de 2016 http://goo.gl/3hHCtb

Ameaças: • • • • • • •

Lei do limite na internet de banda larga Gasto dos dados móveis de pacotes de internet 3G ou 4G. Incorporação em aplicativos já populares, como o Waze, de funcionalidades para localização de estacionamentos. Sistema de GPS falho. Desrespeito às vagas de prioridades pelos motoristas. Alteração constante das ruas legalizadas para estacionar. Disputa entre os usuários para estacionar o veiculo.

5.2. Mapa de empatia O Mapa de Empatia (Figura 34) é uma ferramenta visual utilizada para descrever um grupo de pessoas ou perfis, ou seja, utiliza-se o mapa de empatia na criação e melhor entendimento do público-alvo de um produto ou empresa. “ Normalmente, você constrói um Mapa de Empatia quando precisa documentar ou montar uma hipótese de perfil de cliente. Esse perfil pode ser utilizado para melhorar campanhas de marketing, aprimorar produtos ou auxiliar em outras decisões sobre o negócio.” (KAIO, Ramon - 2014)¹. De acordo com a SOLUTIONS iQ (2016)², é necessário responder algumas dessas perguntas, em relação ao problema que o nosso produto irá resolver: ¹ Acesso em 26 de julho de 2016 http://goo.gl/y1O3PO ² Acesso em: 25 de julho de 2016 http://goo.gl/r1ccIm

1. 2. 3. 4. 5. 6. 7.

O que o usuário está pensando e sentindo? Quais são algumas de suas preocupações e aspirações? O que o usuário ouve? O que o usuário vê em seu ambiente? O que o usuário pode falar e / ou fazer? Quais são as dores do usuário ou medos? Que ganhos pode o usuário ter com a experiência de usar nosso produto?

Para montar o mapa de empatia do projeto, usamos como base uma entrevista realizada pelo Google Forms (56 entrevistados) com nosso público alvo. Nessa entrevista podemos observar como eles pensam, veem, falam, escutam, as suas maiores dores e os principais objetivos que eles esperam. A seguir, alguns comentários dos entrevistados³: “Poderia ter um aplicativo que indicasse os locais permitidos para estacionar, bem como uma parte destinada aos comentários de outras pessoas que estiveram lá e podem dizer que há flanelinha nesse horário, se sempre tem vagas ou se é preciso chegar cedo, se tem estacionamento e até que horas fica aberto, e todas essas dúvidas pertinentes para todo mundo que tem carro e tem fica receoso de ir em algum restaurante, teatro, por medo de não achar vaga”. (Anônimo, 2016) “Mostrando localização exata de vaga para estacionar. E não somente de estacionamentos pagos.” (Anônimo, 2016) “Falta mais informação em relação onde poder estacionar. Acho que algum aplicativo com detalhamento dos locais seguros para estacionar.” (Anônimo, 2016)

³ Resultado de pesquisa com usuários-alvo http://goo.gl/9NKYEM

Segmento do Cliente: Motoristas e seus passageiros que se dirigem a destino localizado no centro do Rio de Janeiro

Figura 34 - Mapa de empatia

5.3. Canvas da proposta de valor Para analisarmos melhor o desenvolvimento do produto e construir uma melhor relação entre produto e usuário, utilizamos a ferramenta Canvas da proposta de valor (Figura 35). “O Canvas da Proposta de Valor (Value Proposition Canvas) é uma ferramenta de desenvolvimento de cliente (...) criado pelo Alexander Osterwalder. Este quadro (Canvas) auxilia a entender o mundo do cliente e como o seu produto se enquadra às necessidades deste nicho, ou seja, assim como o Experiment Board, confirma se você esta entregando a solução ideal para o cliente resolver o problema que você esta tentando solucionar, isto se realmente existir um problema que o cliente queira pagar por isso.” (RECCHIA, Giovanni - 2015)¹. A partir da construção do canvas, é possível desenvolver o produto conforme a real necessidade do usuário, evitando assim, perda de tempo e até mesmo de dinheiro. O canvas é dividido em duas etapas: a etapa do cliente e a proposta de valor do produto oferecido. A etapa do cliente é dividida em 3 partes: tarefas do cliente, dores e ganhos.

Dores Nessa etapa, “(...) descreva qualquer coisa que aborreça o seu cliente, antes, durante ou depois de realizar a tarefa para resolver o problema, relativo a custos financeiros, emoções negativas ou riscos.” (RECCHIA, Giovanni - 2015)¹.

Ganhos Ganhos é o que o cliente espera de tal ação, ou deseja, ou até mesmo um ganho em que ele seria surpreendido. Terminada a etapa do cliente, é iniciado a etapa da proposta de valor que o produto oferece. Também dividido em três partes: Produtos e Serviços, Aliviam as dores, e Criadores de ganho.

Produtos e Serviços Identificação do produto ou serviço que está sendo oferecido, desenvolvido. Neste caso, o artefato final, que será um aplicativo com informações de vagas em estacionamentos públicos e privados no centro da cidade do Rio de Janeiro.

Aliviam as Dores Descrição de como o produto ou serviço aliviam e ajudam as dores do cliente.

Tarefas do Cliente

Criadores de Ganho

Nessa parte é descrito o que o usuário faz para tentar resolver o problema em questão, nesse caso, procurar por locais ou estacionamentos com vagas disponíveis.

“Este campo é sobre como a sua proposta de valor cria ganhos para o seu cliente, como os benefícios são criados e se o desejo ou a expectativa serão supridos” (RECCHIA, Giovanni - 2015)¹. A partir dessa ferramenta, criamos o Canvas (Figura 35), que descreve o valor que o nosso artefato final tem para os usuários-alvo.

¹ Acesso em 29 de julho de 2016 http://goo.gl/R1Skjm

Figura 35 - Canvas da proposta de valor

5.4. Fluxograma de navegação

A partir dos ganhos e dores do usuário (Figura 35), a lista de

funcionalidades que o aplicativo deveria ter para suprir as necessiddes do usuário final foi feita: • • • • • • • • •

Com as funcionalidades descritas e com o intuito de organizar e criar uma hieraquia de informação dentro do aplicativo, foi criado um Fluxograma de navegação (Figura 36). Essa ferramenta é utilizada para diagramar como será feita a navegação de telas e informações dentro de um serviço, nesse caso, o aplicativo final.

apa de localização. M Localização do usuário. Retornar para a localização do usuário. Busca por locais (bairros, estabelecimentos). Busca por ruas. Busca por nome de estacionamentos. Estacionamentos disponíveis na região. Ruas permitidas para estacionar; Detalhamento (horário, preço, dia de funcionamento, opção de favoritar).

Figura 36 - Fluxograma de navegação

5.5. Rabiscoframes “A expressão (rabiscoframes) é uma mistura bem humorada do termo sketch (esboço, rabisco) com o tão conhecido termo wireframe. Em muitos times de desenvolvimento já se tornou parte essencial do processo de desenho de interfaces, especialmente naquele momento do projeto em que as ideias começam a tomar forma e sair do etéreo mundo do powerpoint.” (TEIXEIRA, Fabricio - 2009)¹ Após essas análises, alguns rabiscoframes (Figura 37, 38, 39) foram feitos. Os “rabiscoframes” ajudam na organização de ideias e localização espacial dos elementos em uma interface.

Figura 38 - Rabiscoframe

Figura 37 - Rabiscoframe ¹ Acesso em 20 de agosto de 2016 http://goo.gl/fawlJn

Figura 39 - Rabiscoframe

Tela inicial - Visualização do mapa (Figura 37 - 1) Nesta parte o aplicativo mostra no mapa a localização do usuário naquele momento, com a ajuda do dispositivo GPS presente em seu celular. Nesta tela o usuário possui cinco tipos possíveis de interação:

1. Clicar no menu. 2. Pesquisar algum local específico. 3. Filtrar a sua pesquisa. 4. Ver o resultado dos estacionamentos presentes no mapa em uma organização de lista. 5. Clicar em algum marcador (pin) no mapa, o que representa algum tipo de estacionamento perto do usuário.

Tela de Resultados (Figura 37 - 2) Caso o usuário escolha pesquisar algum local específico, o mapa é deslocado para a localização pesquisada, indicando se ali possui estacionamentos privados ou públicos para o estacionamento do veículo.

Detalhes do estacionamento

(Figura 37 - 3)

Clicando em algum marcador (pin) no mapa, uma janela abre apresentando os detalhes do estacionamento selecionado. Nesta tela é possível ver os preço, horário de funcionamento, veículos aceitos, formas de pagamentos e informações mais detalhadas sobre aquele estacionamento, como localização, avaliações e nome.

Modo lista (Figura 38 - 1 e 2) Ao clicar no botão do modo em lista, presente na tela inicial, o usuário poderá ver a listagem de todos os estacionamentos encontrados

próximo da sua localização, tanto na geolocalização como a localização de uma pesquisa feita. Clicando em “detalhes” em algum dos estacionamentos mostrados na lista, o usuário tem acesso a todas os detalhes deste estacionamento, da mesma forma como se ele estivesse clicado no pin de um resultado de pesquisa no mapa. Nesta tela, o usuário também poderá avaliar algum estacionamento, e também salvar os seus favoritos.

Menu (Figura 38 - 3) O ícone de menu é uma das ações possíveis na tela inicial. Ao clicar, uma janela lateral é deslizada da esquerda para direita, apresentando as possíveis ações dentro do menu. Dentro desta tela, o usuário poderá acessar sua lista de estacionamentos favoritos, acessar a tela de configurações, acessar a tela de informações sobre o aplicativo e acessar a tela de ajuda.

Configurações e Ajuda Na tela de configurações, o usuário poderá alterar o recebimento de notificações que recebe no celular sobre os estacionamentos perto de sua localização. Na tela “Ajuda”, o usuário poderá ver perguntas e respostas frequentes sobre a utilização do aplicativo.

Sobre e Favoritos (Figura 39 - 2 e 3) Na tela de ‘Sobre’, o usuário poderá ter acesso a todo tipo de informação referente ao aplicativo, ex: Termos e Condições, Versão do aplicativo, Termos legais e etc. Na tela de ‘Favoritos’ fica a lista de todos os estacionamentos em que o usuário selecionar como ‘favorito’. Para adicionar à essa lista, basta o usuário clicar no botão ‘favoritar’ em qualquer estacionamento visualizado. A apresentação da informação nessa tela, é a mesma visualização do modo Lista.

Filtros (Figura 39 - 1) A tela ‘Filtros’ permite o usuário escolher quais tipo de estacionamento, ele deseja visualizar na tela de mapa. É possível filtrar entre diversas informações, dentre elas: Preço, Horário de funcionamento, tipo de veículo e forma de pagamento.

5.6. Wireframes “Wireframing é um importante passo no processo de design. Ele permite que você defina a hieraquia da informação no seu design, fazendo com que seja mais fácil planejar o layout de acordo com a maneira na qual você espera que o usuário processe a informação.” (LIM, Winnie - 2012)¹ No wireframe, são organizadas as informações da interface do aplicativo, utilizando caixas com diferentes escalas de cinza. É bem similar aos rabiscoframes. Neste projeto foi utilizado para concretizar uma melhor visão dos rascunho no papel. Com a finalização dos rabiscoframes, os wireframes foram feitos. (Figura 40 a 54) Durante o desenvolvimento dos wireframes, alguns elementos e ícones foram adicionados e alguns removidos.

¹ Acesso em 22 de agosto de 2016 http://goo.gl/zQ710c

Figura 40 - Wireframe do mapa

Figura 41 - Wireframe do mapa

Figura 42 - Wireframe de detalhes

Figura 43 - Wireframe de detalhes

Figura 44 - Wireframe de listas

Figura 45 - Wireframe de listas

Figura 46 - Wireframe do menu

Figura 47 - Wireframe Favoritos

Figura 48 - Wireframe Favoritos

Figura 49 - Wireframe ConfiguraĂ§Ăľes

Figura 50 - Wireframe Sobre

Figura 51 - Wireframe Ajuda

Figura 52 - Wireframe Filtros

Figura 53 - Wireframe Personalizar

Figura 54 - Wireframe Avaliar

5.7. Testes de usabilidade (Prototipação em papel) “Teste de usabilidade é uma técnica de pesquisa utilizada para avaliar um produto ou serviço. Os testes são realizados com usuários representativos do público-alvo. Cada participante tenta realizar tarefas típicas enquanto o analista observa, ouve e anota.” (Usability.gov - 2012) ¹ Um número de pessoas, possíveis usuários do aplicativo final, foram selecionadas para a realização do teste de usabilidade. Através do uso dos wireframes impressos, as telas foram montadas em sequência de acordo com o uso real do aplicativo, para que o usuário que testar a interface possa utilizá-la da forma mais real possível, dentro dos conceitos iniciais. Para que o teste ocorra sem problemas, fizemos o seu roteiro indicando uma tarefa a ser feita pelo usuário com o intuito de estudar o uso do aplicativo. Os testes foram feitos utilizando protótipos de papel. “Prototipagem de papel é uma técnica que permite criar e testar interfaces de usuário de forma rápida e barata onde os protótipos de papel, geram um excelente feedback de observação sobre o comportamento do usuário sobre o design se baseando em wireframes que podem ter alta ou baixa fidelidade, quanto mais próximos com a aparência final, melhor serão os dados obtidos com os testes.” (GONZALEZ, Guilherme - 2013) ²

• •

No dia do teste, antes da sessão: • • • • •

5.7.1. Roteiro do teste de usabilidade

• •

Pré-teste:

•

¹ Acesso em 20 de agosto de 2016 http://goo.gl/e6LqbA ² Acesso em 2 de agosto de 2016 http://goo.gl/XdBOMj

Preparar todas as telas, imprimindo e recortando. Ver exemplos de protótipos no Google e da realização do teste no YouTube Dividir a equipe em moderador, que interage com o usuário, computador, que exibe as telas de acordo com o clique do usuário, e observador que anota os problemas, pontos positivos, fluxo realizado pelo usuário e frases que ele disse ao longo do teste. Se houver só dois membros, o moderador fará o papel de observador. Prever todos os fluxos da tarefa. O computador deve estar treinado para isso. Enviar convite para 3 usuários, dentro do perfil motorista que frequenta o Centro e usa aplicativos, participarem de uma sessão em horários diferentes, informando o tipo de aplicativo, tipo de teste a ser feito, o propósito de pesquisa acadêmica para TCC, duração e local do teste (de preferência de fácil acesso para o usuário). informações sobre o registro em anotações e fotos para fins de pesquisa e anonimato do usuário.

Agradecer a presença do usuário convidado Apresentar-se Informar objetivo da sessão: tarefas executadas Informar que não estão ali para criticar o usuário ou seu desempenho, mas sim, para avaliar o aplicativo Informar como o teste será realizado e os papéis do moderador/ observador e computador Informar duração prevista de cerca de 10 a 20 minutos Pedir para assinar a permissão para gravar e tirar fotos (termo de confidencialidade) Começar o teste.

Tarefa: “Você está indo para o centro da Cidade do Rio de Janeiro, na Cinelândia, se encontrar com alguns amigos em um bar. Resolveu ir de carro e necessita saber onde consegue estacioná-lo. Utilize o aplicativo para buscar informações sobre vagas e estacionamentos.”

Perguntas pós-tarefa: • • •

Qual foi sua maior dificuldade durante a realização da tarefa? O que você sentiu falta durante o uso do aplicativo? Por quê? Qual foi sua impressão geral do aplicativo?

Perguntas a serem respondidas observando o usuário: • • • •

O usuário consegue completar o fluxo da tarefa? O usuário consegue diferenciar os ícones do mapa? O usuário consegue entender a funcionalidade de cada botão? O usuário consegue identificar qual conteúdo ele verá em cada página a partir da compreensão do rótulo do seu link?

Nos testes utilizamos os protótipos demonstrados nas figuras 55 a 61.

Figura 55 - Mapa

Figura 56 - Mapa

Figura 57 - Listas

Figura 58 - Detalhes

Figura 59 - Detalhes

Figura 60 - Menu

Figura 61 - Filtros

5.7.2. Resultados

•

Após testes com 3 convidados, foram notados alguns problemas em relação à usabilidade do aplicativo. Para demonstração dos resultados, descreveremos a seguir, dois usuários participantes dos testes.

Perguntas pós-tarefa:

Usuário 1: O usuário utiliza inicialmente o aplicativo sem problemas, percebe a funcionalidade de praticamente todos os ícones, e o que possivelmente aconteria se clicasse neles. O problema percebido, foi a dificuldade em entender alguns ícones e a falta de visibilidade de outros. “Se eu estou indo para um bar, colocaria o nome ou endereço na barra de busca em cima do mapa. Creio que ele me levaria ao bar o qual desejo demonstrando os estacionamentos em volta.” (Usuário 1)¹ Ao ser questionado sobre a localização dos botões ‘Modo Lista’ e ‘Filtro’, o usuário não soube responder.

Perguntas a serem respondidas observando o usuário: • O usuário consegue completar o fluxo da tarefa? Resposta: Sim. • O usuário consegue diferenciar os ícones do mapa? Resposta: Somente ícones de verde e vermelho. • O usuário consegue entender a funcionalidade de cada botão? Resposta: Usuário não entendeu botões de filtro e não achou o botão de modo Lista.

¹ Documento com resposta do USUÁRIO 1 e áudio de gravação do teste http://goo.gl/rZdcn7

O usuário consegue identificar qual conteúdo ele verá em cada página a partir da compreensão do rótulo do seu link? Resposta: Sim.

• Qual foi sua maior dificuldade durante a realização da tarefa? Resposta: Averiguar se um estacionamento possui vagas disponíveis ou não. • O que você sentiu falta durante o uso do aplicativo? Por quê? Resposta: Opção de fazer o perfil e escolher tamanho do meu carro. • Qual foi sua impressão geral do aplicativo? Resposta: Foi bem intuitivo.

Usuário 2: Ao ser dito para o usuário qual seria a tarefa a ser realizada, o mesmo observa atentamente a tela inicial do aplicativo, e logo clica na barra de busca e comenta “Eu digitaria aqui o nome da rua de destino, e olharia se tem algum estacionamento por perto”. Após ser entregue a tela do resultado da pesquisa feita pelo usuário, ele observa e diz: “Eu estacionaria nesse onde o valor é mais barato”. Diante desse começo de teste com o usuário 2 já podemos apontar 2 pontos positivos, o primeiro foi que o usuário rapidamente encontrou o campo de busca, e o segundo ponto foi que o valor no marcador (pin) é um fator relevante para a tomada de decisão. No entando foi observado que o usuário 2 não selecionou o pin, para saber mais detalhes do estacionamento, e nem usou o filtro antes de fazer a sua pesquisa.

Perguntas a serem respondidas observando o usuário:

5.7.3. Conclusão

•

Após a execução dos testes, foi analisado que alguns pontos na interface precisariam ser modificados. O maior problema foi o entendimento dos botões e seus significados. No geral, todos os usuários conseguiram completar suas tarefas de maneira simples e fácil. Porém, todos passaram por dificuldades no entendimento dos marcadores presentes no mapa (Figura 55). Esses pins (marcadores) precisavam de maior detalhamento ou algo que pudesse ajudar a compreensão de sua função para o usuário. A resolução nas interfaces seguintes foi a implementação de ícones, cada um com o seu respectivo significado.

O usuário consegue completar o fluxo da tarefa?

Resposta: Sim. • O usuário consegue diferenciar os ícones do mapa? Resposta: Não, ficou levemente com o impressão que o vermelho seria proibido estacionar. • O usuário consegue entender a funcionalidade de cada botão? Resposta: Não, o usuário achou que a tarefa foi finalizada logo após o resultado da busca. •

O usuário consegue identificar qual conteúdo ele verá em cada página a partir da compreensão do rótulo do seu link? Resposta: Em alguns.

Perguntas pós-tarefa: • Qual foi sua maior dificuldade durante a realização da tarefa? Resposta: Nenhuma. • O que você sentiu falta durante o uso do aplicativo? Por quê? Resposta: O entendimento de alguns botões. • Qual foi sua impressão geral do aplicativo? Resposta: Aparentemente fácil, pois eu só cliquei em buscar e já obtive o resultado que eu desejava, e encontrei logo um estacionamento.

6. Resultado final 6.1. Marca Com o objetivo de sustentar e guiar o design da interface, foi necessária a criação de uma marca com logotipo, tipografia e cores.

6.1.1. Naming Naming é o nome do processo que os designers utilizam para dar o nome a um certo produto, serviço ou marca. O nome escolhido foi “Paraki” (Parar + Aqui), devido a sua sonoridade e o seu significado que possui relação direto ao objetivo do aplicativo.

A família tipográfica escolhida como base para o logotipo foi a Traffic. A escolha foi feita por ela ser bastante utilizada nas placas de sinalização de trânsito. Para contrastar com os cantos pontiagudos do símbolo, a tipografia foi modificada, os cantos arredondados, trazendo para a marca o mesmo contraste harmônico que existe entre as vagas de estacionamento, retangulares e retas com as curvas sinuosas dos designers de automóveis. No desenvolvimento do logo (Figura 62) foi utilizado a proporção áurea, tanto no símbolo como no kerning (espaçamento entre letras) da tipografia, tornando o logo mais harmonioso.

6.1.2. Logotipo No símbolo estão sintetizados três elementos (Figura 62) essenciais e importantes no processo de conceitualização do aplicativo: estacionamento, pin (marcador padrão de localização no mapa em aplicativos móveis) e a letra P do nome escolhido (Paraki). Com a junção desses três elemento, o símbolo foi criado (Figura 63).

Figura 62 - Simbologia

“Símbolo constituído de uma letra ou grupo de letras, com traçado peculiar, criado especialmente para a identificação de uma empresa, instituição, produto, marca etc.” (MICHAELIS - Dicionário Brasileiro da Língua Portuguesa, ‘Definição de Logotipo’) Figura 63 - Logotipo

6.1.3. Paleta de cor

6.1.4. Família tipográfica

A harmonia cromática, para nossa paleta de cores, escolhida foi a dupla complementar. Essa harmonia nos permite uma grande variedade de combinações e contrastes, já que nos testes de usabildiade do artefato observamos que a diversidade das cores nos pins de resultados influenciou bastante a navegação do usuário. Era necessária uma harmonia cromática com pouca saturação, desta forma a navegação do usuário ficaria suave e não incomodaria sua visão, contendo cores vibrantes e mais agressivas.

A família tipográfica escolhida para o aplicativo foi a Roboto. É a família padrão de todos os aparelhos Android, oficializada pela Google¹. A fonte é de fácil leitura tanto em aparelhos com resoluções grandes e pequenas, no caso, importante para o nosso aplicativo por ser utilizado em aparelhos móveis, com telas pequenas. A Roboto possui também diversos tipos de pesos diferentes (Figura 65), o que ajuda bastante na construção da hierarquia tipográfica.

Verde - utilizado para demonstrar os estacionamentos públicos presentes no aplicativo. Azul - utilizado para demonstrar os estacionamentos privados. Vermelho - utilizado para demonstrar os locais proibidos de estacionar em um determinado horário. Amarelo - é utilizado na tela de filtros, para enfatizar e contrastar a ação de filtragem. Cinza e/ou verde - são utilizados nos botões. Quando não estão ativos eles ficam cinzas, quando o botão é ativado eles ficam na cor verde, dando destaque dentre os demais botões.

ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO

Figura 65 - Tipografia Roboto

6.2. Interface Após os testes de usabilidade (Página 57), notou-se a necessidade de algumas alterações na interface do aplicativo como um todo. A maioria dos usuários testados não compreendiam a funcionalidade de alguns ícones presentes no mapa. Por isso, os pins (marcador no mapa) presentes no mapa foram incrementados com a utilização de ícones com maiores siginificados como, por exemplo, o ícone de proibido estacionar referenciando que aquele estacionamento, naquele horário apresentado, estava fechado ou não era permitida a parada.

Figura 64 - Paleta de cores

¹ https://material.google.com/style/typography.html Acesso em: 2 de agosto de 2016

Outro problema percebido através dos testes, foi a dificuldade de localização do “Modo Lista”, no qual o usuário poderia visualizar todos os estacionamentos ao seu redor em uma lista, podendo ajudar a visualização naquele momento. Para resolução desse problema, uma barra foi adicionada abaixo do elemento de busca, descrevendo quantos estacionamentos existem ao redor do usuário e ao mesmo tempo, indicando o “Modo Lista”.

6.2.1. Mapa Ao abrir o aplicativo, a interface de mapa é apresentada ao usuário. Caso o usuário esteja em uma área sem estacionamentos próximos, uma mensagem de alerta (“Nenhum estacionamento ao seu redor”) aparece logo abaixo da ferramenta de busca (Figura 66). Se o aplicativo localizar estacionamentos próximos, a interface inicial de mapa é preenchida por marcadores representando os diversos estacionamentos ao redor do usuário (Figura 67). Marcadores na cor vermelha indicam que o estacionamento está fechado. Marcadores na cor verde demonstram estacionamentos públicos (no caso, de rua) com disponibilidade de parada naquele momento, e os marcadores azuis indicam estacionamentos privados. Na interface de mapa é possível acessar os detalhes do estacionamento, filtrar resultados, fazer buscas por estacionamentos ou ruas, acessar o menu, acessar o modo lista e também retornar a posição em que o usuário está no mapa. Também foram desenvolvidas interfaces noturnas para melhorar a experiência do usuário. (Figura 68 e 69)

Figura 66 - Mapa

Figura 67 - Mapa

Figura 68 - Mapa modo noturno

Figura 69 - Mapa modo noturno

6.2.2. Detalhes Ao clicar em algum marcador no mapa (Figura 67), o usuário é levado para a interface de detalhes (Figura 70) do estacionamento selecionado. Nele é possível acessar diversas informações relevantes sobre o estacionamento como preço, tipo de veículo aceito, horário de funciona mento, etc. É possível também avaliar o estacionamento e adicioná-lo à lista de favoritos.

Figura 70 - Detalhes de estacionamento

Figura 71 a 75 - Detalhes de estacionamento

6.2.3. Modo Lista Caso o usuário prefira, o modo lista (Figura 76) é uma outra forma de visualização dos estacionamentos ao redor dele. Invés de apresentados por marcadores no mapa, o modo lista permite ver todos os estacionamentos ao seu redor em um formato sequencial de itens.

Figura 76 - Lista de estacionamentos ao redor

Figura 77 a 81 - Detalhes da Lista

6.2.4. Menu O menu (Figura 82) é localizado na parte lateral do aplicativo. Quando o usuário selecionar o ícone de menu na interface de mapa (Figura 67), um efeito acontece, deslizando a interface do menu da esquerda para direita. No menu é possível acessar a lista de favoritos, as configurações, informações sobre o aplicativo e ajuda ao usuário.

Figura 82 - Menu

6.2.5. Favoritos O usuรกrio pode salvar qualquer estacionamento como favorito. Caso ele faรงa isso, todo estacionamento salvo pode ser acessado na interface de favoritos (Figura 84) localizada no menu (Figura 82). Quando o usuรกrio nรฃo possui nenhum estacionamento salvo, uma mensagem notifica o problema. (Figura 83).

Figura 83 - Lista de favoritos vazia

Figura 84 - Favoritos

6.2.6. Configurações e Sobre Na interface de configurações (Figura 85), o usuário poderá escolher receber notificações no celular sobre estacionamentos por perto e também compartilhar o aplicativo Paraki com seus amigos. Já na interface Sobre (Figura 86), o usuário pode acessar informações específicas sobre o aplicativo.

Figura 85 - Configurações

Figura 86 - Sobre

6.2.7. Ajuda e Filtros Na interface de Filtros (Figura 87), o usuário poderá selecionar exatamente quais tipos de estacionamentos ele quer visualizar no mapa, escolhendo o tipo de veículo, preço, horários entre outros tipos de filtro. O usuário poderá personalizar a quantidade de horas em que ele irá ficar naquele estacionamento (Figura 89). Na interface de Ajuda (Figura 88), o usuário pode acessar perguntas frequentes sobre o aplicativo com suas devidas respostas.

Figura 87 - Filtros

Figura 88 - Ajuda

Figura 89 - Personalizar

6.2.8. Avaliação de estacionamentos O usuário poderá avaliar os estacionamentos clicando no botão de ‘Avaliar’ e selecionando quantas estrelas aquele estacionamento deve ter. (Figura 90).

Figura 90 - Avaliação de estacionamento

7. Conclusão Resolver os problemas de estacionamento de veículos não é uma tarefa simples. Este projeto tem como objetivo amenizar essas dificuldades através da interface para aplicativo de celulares que foi desenvolvida nos capítulos anteriores. Como a preocupação principal do projeto foi o foco na usabilidade, foi possível perceber o quão amplo é o campo de estudo envolvendo design e usabilidade. Existem diversas ferramentas que ajudam o designer na hora de decisões focadas no usuários. Algumas delas foram utilizadas nesse projeto. A utilização da ferramenta do Mapa de Empatia e do Canvas de Proposta de Valor ajuda a compreender mais profundamente o público-alvo e reduzir os possíveis erros que um projeto possa vir a ter no futuro. Essas ferramentas ajudam a entrega ser mais conectada com o usuário, ou seja, entregar o que realmente ele deseja. Durante os testes de usabilidade ficaram nítidas as diferenças entre cada tipo de usuário. Cada um reage e interage de forma diferente com a interface testada. Isso demonstra a importância desses testes e que cada usuário tem uma opinião que pode mudar toda a direção do projeto. A comunicação do designer com o usuário-alvo é de extrema importância para o possível sucesso de um produto. “O design é realmente um ato de comunicação , o que significa compreender profundamente a pessoa com quem o designer está se comunicando.” (Norman, Donald A. - O design do dia a dia)¹

¹ NORMAN, Donald. A. O design do dia a dia. 2006

8. Referências Bibliográficas A VOZ DA SERRA, Jornal. Conheça as principais infrações de trânsito detectadas pela Cidade Inteligente [Acesso em 1 de julho de 2016] Disponível em: http://avozdaserra.com.br/noticias/conheca-principais-infracoes-de-transito-detectadas-pelo-cidade-inteligente

FREITAS, Ana Karina Miranda. PSICODINÂMICA DAS CORES EM COMUNICAÇÃO. Unicamp; Dezembro de 2007 [Acesso em: 25 de julho de 2016] Disponível em: http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comunicacao.pdf

BLAND, David. Agile Coaching Tip: What Is an Empathy Map? Solutionsiq; 21 de abril de 2016. [Acesso em: 25 de julho de 2016] Disponível em: http://www.solutionsiq.com/what-is-an-empathy-map/

GLOBO.COM. Com menos vagas, motoristas têm dificuldade de estacionar no Centro. Globo.com; 28 de janeiro de 2014 [Acesso em 23 de julho de 2016] Disponível em: http://goo.gl/qloVvU

BERNSEN, Jens. Design: defina primeiro o problema. Florianópolis: SENAI/LBDI, 1995.

GLOBO.COM. Falta de vagas para estacionar no Centro causa reclamações em Angra. Globo.com; 21 de março de 2016. [Acesso em 25 de julho de 2016]. Disponível em: http://goo.gl/m7hniW

CAMPOS, Daniel. Design estratégico [Acesso em: 28 de julho de 2016] Disponível em: http://www.revistacliche.com.br/exp/design-estrategico-daniel-campos/#t=04:04 DETRAN, Rj. ESTATÍSTICAS. [Acesso em: 24 de julho de 2016] Disponível em: http://www.detran.rj.gov.br/_estatisticas.veiculos/09. asp FERRAZ, Aline Martins Faria. O uso das cores em publicidade: um estudo do caso Itaú. UFRJ; 2008 [Acesso em: 26 de julho de 2016] Disponível em: http://www.latec.ufrj.br/monografias/Monografia%20-%20 Aline%20Martins.pdf

GLOBO.COM. Multa para estacionamento irregular vai mais do que dobrar. Globo.com; 4 de janeiro de 2016 [Acesso em 23 de julho de 2016]. Disponível em: http://goo.gl/7no2mO GONZALEZ, Guilherme. Protótipos de Papel. 24 de Outubro de 2013 [ Acesso em 2 de agosto de 2016] Disponível em: http://goo.gl/XdBOMj GOOGLE. Tipography. Material Design; [Acesso em 2 de agosto de 2016] Disponível em: https://material.google.com/style/typography. html IKEDA, Minako (2008). Strategic Design p. 373-376. ISBN 978-37643-7739-7.

INRIX, Inc. Aplicativo ParkMe; Google Play Store [Acesso em: 23 de julho de 2016] Disponível em: https://play.google.com/store/apps/details?id=com.parkme.consumer&hl=pt_BR

LET’S PARK COMPANY. Aplicativo Let’s Park. Google Play Store [Acesso em: 23 de julho de 2016] Disponível em: https://play.google.com/ store/apps/details?id=br.com.letspark.app&hl=pt_BR

KAYO, Ramon. O que é Mapa de Empatia e para que serve? [Acesso em: 26 de julho de 2016] Disponível em: http://ramonkayo.com/conceitose-metodos/o-que-e-mapa-de-empatia-e-para-que-serve

MEMORIA, Felipe. Ícones: quando usar? [Acesso em: 23 de julho de 2016] Disponível em: http://www.fmemoria.com.br/entrevistas/entrevista_icones.pdf

LIM, Winnie. Guia Sobre Wireframing Para Iniciantes - Tutsplus. 18 de junho de 2012. [ Acesso em 22 de agosto de 2016] Disponível em: http://webdesign.tutsplus.com/pt/articles/a-beginners-guide-to-wireframing--webdesign-7399

NIELSEN, Jakob. Designing Web Usability. 2000 p.100-120. ISBN-13: 978-1562058104

LET’S PARK COMPANY. Aplicativo Let’s Park. Google Play Store [Acesso em: 23 de julho de 2016] Disponível em: https://play.google.com/ store/apps/details?id=br.com.letspark.app&hl=pt_BR MEMORIA, Felipe. Ícones: quando usar? [Acesso em: 23 de julho de 2016] Disponível em: http://www.fmemoria.com.br/entrevistas/entrevista_icones.pdf

NIELSEN, Jakob. Usability 101: Introduction to Usability. 4 de janeiro de 2012. [Acesso em: 30 de julho de 2016] Disponível em: https://www. nngroup.com/articles/usability-101-introduction-to-usability/ NORMAN, Don; NIELSEN, Jakob. The Definition of User Experience, Nielsen Norman Group. [Acesso em 22 de julho de 2016]. Disponível em: https://www.nngroup.com/articles/definition-user-experience/ NORMAN, Donald. A. O design do dia a dia. 2006

KAYO, Ramon. O que é Mapa de Empatia e para que serve? [Acesso em: 26 de julho de 2016] Disponível em: http://ramonkayo.com/conceitose-metodos/o-que-e-mapa-de-empatia-e-para-que-serve

NAKAGAWA, Marcelo. Ferramenta: ANÁLISE SWOT (CLÁSSICO). SEBRAE [Acesso em: 29 de julho de 2016] Disponível em: http://www.sebrae.com.br/Sebrae/Portal%20Sebrae/Anexos/ME_Analise-Swot.PDF

ONDEPARAR. Aplicativo OndeParar; Google Play Store [Acesso em: 23 de julho de 2016] Disponível em: https://play.google.com/store/apps/ details?id=br.com.ondeparar

PARIZOTTO, Rosamelia. Elaboração de um Guia de Estilos para Serviços de Informação em Ciência e Tecnologia via Web. [Acesso em 25 de julho de 2016] Disponível em: http://asmayr.pro.br/arquivos/Semiotica/Guia_de_estilos.pdf

VINCENT, James. Android is now used by 1.4 billion people. The verge; 29 de setembro de 2015. [Acesso em 1 de agosto de 2016] Disponível em: http://goo.gl/mYO1wF

RAFAEL, André. Tipografia para Web. ORIGAMID; [Acesso em 24 de julho de 2016] Disponível em: https://www.origamid.com/wp-content/ uploads/2015/05/tipografia-para-web.pdf RECCHIA, Giovanni. Canvas da Proposta de Valor, o que é e como usar . 25 de setembro de 2015 [Acesso em 29 de julho de 2016] Disponível em: http://colisoes.com.br/2015/09/canvas-da-proposta-de-valor-oque-e-e-como-usar/ SABÓIA, Gabriel. Parada, informatização das vagas na cidade depende de ajustes da prefeitura. O Dia. 6 de outubro de 2015. [Acesso em: 23 de julho de 2016]. Disponível em: http://goo.gl/br3IPC SANTOS, Flavio Anthero dos. O design com diferencial competitivo. 2000 STANFORD. Empathy Map [Acesso em 29 de julho de 2016] Disponível em: https://dschool.stanford.edu/wp-content/themes/dschool/method-cards/empathy-map.pdf TEIXEIRA, Fabricio. O valor do rabiscoframe - Blogo de AI. 2009 [Acesso em 20 de agosto de 2016]. Disponível em: http://arquiteturadeinformacao.com/recursos/metodologia/o-valor-do-rabiscoframe/ USABILITY, Gov. Usability Testing [Acesso em 20 de agosto de 2016] Disponível em: https://www.usability.gov/how-to-and-tools/methods/ usability-testing.html