Projeto de Interface para Carnaval em Natal

Prévia do material em texto

<p>.</p><p>UNIVERSIDADE FEDERAL DO RIO GRANDE DO NORTE</p><p>CENTRO DE CIÊNCIAS HUMANAS, LETRAS E ARTES - CCHLA</p><p>DEPARTAMENTO DE ARTES – BACHARELADO EM DESIGN</p><p>ISABELA OLIVEIRA DA GRAÇA</p><p>Carnaval em Natal: Projeto de interface digital destinada a auxiliar no</p><p>acompanhamento da programação do Carnaval da cidade de Natal.</p><p>NATAL/RN</p><p>2023</p><p>ISABELA OLIVEIRA DA GRAÇA</p><p>Carnaval em Natal: Projeto de interface digital destinada a auxiliar no</p><p>acompanhamento da programação do Carnaval da cidade de Natal.</p><p>Trabalho apresentado na disciplina de</p><p>Trabalho de Conclusão de Curso II</p><p>para a obtenção do grau de Bacharel</p><p>em Design pela Universidade Federal</p><p>do Rio Grande do Norte.</p><p>ORIENTADOR: Prof. Dr. José</p><p>Guilherme Santa Rosa</p><p>NATAL/RN</p><p>2023</p><p>ISABELA OLIVEIRA DA GRAÇA</p><p>Carnaval em Natal: Projeto de interface digital destinada a auxiliar no</p><p>acompanhamento da programação do Carnaval da cidade de Natal.</p><p>Trabalho apresentado na disciplina de</p><p>Trabalho de Conclusão de Curso II</p><p>para a obtenção do grau de Bacharel</p><p>em Design pela Universidade Federal</p><p>do Rio Grande do Norte.</p><p>ORIENTADOR: Prof. Dr. José</p><p>Guilherme Santa Rosa</p><p>Aprovado em: ___/___/____</p><p>BANCA EXAMINADORA</p><p>___________________________________________________________________</p><p>Prof. Dr. José Guilherme Santa Rosa</p><p>Orientador</p><p>Universidade Federal do Rio Grande do Norte</p><p>___________________________________________________________________</p><p>Prof. Dra. Jamille Noretza De Lima Lanutti</p><p>Universidade Federal do Rio Grande do Norte</p><p>___________________________________________________________________</p><p>Prof. Dr. Rodrigo Naumann Boufleur</p><p>Universidade Federal do Rio Grande do Norte</p><p>NATAL/RN</p><p>2023</p><p>Agradecimentos</p><p>À minha mãe, Maria Alice de Oliveira da Graça, que sempre deixou claro seu apoio</p><p>incondicional à minha trajetória profissional e guiou meus passos na vida desde o</p><p>primeiro momento. Ao meu pai, Ivan Correa da Graça, e ao meu tio Curuquete que não</p><p>se encontram mais conosco em plano terreno, mas que quando em vida estiveram</p><p>sempre ao meu lado e nunca deixaram de acreditar em mim. Sem eles, eu não estaria</p><p>aqui.</p><p>Aos meus amigos, que me acolhem, me dão força e não permitem que eu me sinta</p><p>sozinha, mesmo nos momentos mais desafiadores.</p><p>Ao meu orientador Prof. Dr. José Guilherme Santa Rosa por me auxiliar com</p><p>conhecimento nesse período tão importante de finalização de um ciclo acadêmico.</p><p>As professoras Elizabeth Romani e Helena Rugai, que são mulheres inspiradoras</p><p>dentro do departamento de Design e sempre estiveram dispostas a me ajudar desde</p><p>questões burocráticas a serem resolvidas à dúvidas teóricas e referências.</p><p>Resumo</p><p>O presente trabalho apresenta o desenvolvimento de um artefato digital que auxilia o</p><p>folião da cidade de Natal, no Rio Grande do Norte, a se situar dentro da programação</p><p>do Carnaval da cidade. Para tal, foi utilizada como base a programação das</p><p>festividades promovidas pela prefeitura no ano de 2020. Buscou-se alcançar o objetivo</p><p>proposto a partir de bibliografias de autores das áreas de design centrado no humano,</p><p>usabilidade, interação humano-computador e acessibilidade digital. Além do</p><p>embasamento teórico-conceitual, foram empregadas as metodologias de análise de</p><p>similares, prototipagem e teste de usabilidade. Com isso, criou-se um produto digital</p><p>acessível, intuitivo, centrado no humano e que cumpriu o objetivo de servir como um</p><p>guia de bolso para as festividades de Carnaval na cidade de Natal.</p><p>Palavras-chave: Carnaval, Artefato Digital, Aplicativo, Design Centrado no Humano.</p><p>Abstract</p><p>This work presents the development of a digital device which helps revelers in the city</p><p>of Natal, Rio Grande do Norte, to getting to know the city's event schedule during the</p><p>Carnival. To this end, the schedule of festivities promoted by the city hall in 2020 was</p><p>used as a basis. The aim was to achieve the proposed objective from bibliographies of</p><p>authors in the areas of user-centered design, usability, human-computer interaction and</p><p>digital accessibility. In addition to the theoretical-conceptual basis, the methodologies of</p><p>similarity analysis, prototyping and possibilities tests were used. Considering this, it was</p><p>developed an accessible, intuitive, user-centered digital product which achieved the</p><p>objective of serving as a pocket guide for the Carnival festivities in the city of Natal.</p><p>Key-words: Carnival, Digital Artefact, Application, Human Centered Design.</p><p>Lista de Figuras</p><p>Figura 01 - Ônibus da Guanabara envolvido na “Tragédia do Baldo”...........................18</p><p>Figura 02 - Fatores que definem a experiência do usuário de um artefato mobile</p><p>segundo Hiltunen (2002)................................................................................................30</p><p>Figura 03 - Tela Inicial Blocos de Rua.com………………………………………………..35</p><p>Figura 04 - Home Blocos de Rua.com……………………………………………………..36</p><p>Figura 05 - Telas de “Veja Mais Programação” e “Ver Mais Notícias” Blocos de</p><p>Rua.com……………………………………………………………………………………..…37</p><p>Figura 06 - Menu Blocos de Rua.com………………………………………..…………….38</p><p>Figura 07 - Funções “Programação” e de filtro Blocos de Rua.com…………………….39</p><p>Figura 08 - Função de Notícias Blocos de Rua.com…………………………………...…40</p><p>Figura 09 - Blocos e Informações Blocos de Rua.com………………………………..…41</p><p>Figura 10 - Função de “Minha Agenda” e informações sobre o evento Blocos de</p><p>Rua.com……………………………………………………………………………………….42</p><p>Figura 11 - Tela Inicial Carnaval do Rio - 2020……………………………………………44</p><p>Figura 12 - Tela de Programação Carnaval do Rio - 2020………………………………45</p><p>Figura 13 - Telas de Busca por Programação e por Polos Carnaval do Rio - 2020….46</p><p>Figura 14 - Tela de Filtros da Programação Carnaval do Rio - 2020…………………..47</p><p>Figura 15 - Tela de Login e de Mensagem Externa de inatividade Carnaval do Rio -</p><p>2020……………………………………………………………………………………………48</p><p>Figura 16 - Tela Inicial Blocos da Folia 2019……………………………………………..50</p><p>Figura 17 - Tela com descrição de atividade Blocos da Folia 2019……………………51</p><p>Figura 18 - Telas de Filtro por data e lugar Blocos da Folia 2019……………………..52</p><p>Figura 19 - As duas dimensões da prototipagem segundo Jakob Nielsen: Prototipagem</p><p>horizontal mantém os recursos mas elimina profundidade e funcionalidade. E a</p><p>prototipagem vertical mantém profundidade e funcionalidade para poucos recursos....56</p><p>Figura 20 - Representação de um protótipo de baixa fidelidade………………………...57</p><p>Figura 21 - Protótipos de Alta Fidelidade de Aplicativo de E-Commerce…………..….58</p><p>Figura 22 - Planos de Garret………………………………………………………………..60</p><p>Figura 23 - Fluxograma do Usuário…………………………………………………………61</p><p>Figura 24 - Wireframes de Login e Cadastro…………………………………………...….62</p><p>Figura 25 - Wireframes da Tela Inicial e do Menu…………………………………………63</p><p>Figura 26 - Wireframes das Informações dos Polos e da descrição da atividade……..64</p><p>Figura 27 - Wireframes da Agenda Personalizada e Blocos……………………………..65</p><p>Figura 28 - Notícias……………………………………………………………………….…..66</p><p>Figura 29 - Círculo Cromático……………………………………………………………….68</p><p>Figura 30 - Paleta de Cores do Aplicativo………………………………………………….69</p><p>Figura 31 - Logotipo Carnaval em Natal……………………………………………………70</p><p>Figura 32 - Tela de Prototipagem do Figma………………………………………………..71</p><p>Figura 33 - Launch Screen…………………………………………………………………..72</p><p>Figura 34 - Tela de Login……………………………………………………………………..73</p><p>Figura 35 - Cadastro………………………………………………………………………….74</p><p>Figura 36 - Tela Inicial………………………………………………………………………..75</p><p>Figura 37 - Pop Up……………………………………………………………………………76</p><p>Figura 38 - Informações detalhadas…………………………………………….…….……77</p><p>Figura 39 - Minha Agenda e Excluir Atividade………………………………………….…78</p><p>Figura 40 - Empty Space da tela Minha Agenda………………………………………….79</p><p>Figura 41 - Menu………………………………………………………………………………80</p><p>Figura 42 - Notícias…………………………………………………………………………..81</p><p>Figura 43 - Listagem dos Blocos……………………………………………………………82</p><p>Figura 44 - Acessibilidade……………………………………………………………………83</p><p>Figura 45 - Print do Fluxo Clicável no Figma………………………………………………84</p><p>Figura 46 - Fluxo de telas do cadastro refatoradas……………………………………….88</p><p>Figura 47 - Fluxo de telas de início refatoradas…………………………………………..89</p><p>Figura 48 - Tela do menu refatorada………………………………………………………..90</p><p>ao texto. O nome foi desenhado em vetor no software</p><p>Illustrator. E os elementos pictóricos se misturam ao lettering, na forma de confetes de</p><p>carnaval. Assim como no naming, o logo também foi idealizado para ser o mais literal</p><p>possível, para que de primeira já demonstre ao usuário sobre o que se trata o</p><p>aplicativo.</p><p>5.2. PROTÓTIPO DE ALTA FIDELIDADE</p><p>A interface da aplicação proposta foi projetada considerando os critérios ergonômicos,</p><p>de usabilidade e acessibilidade elencados durante o texto. O software utilizado para o</p><p>desenvolvimento foi o Figma (Figura 32), um editor gráfico vetorial com ferramentas</p><p>voltadas para prototipagem e criação de interfaces web.</p><p>71</p><p>Figura 32 - Tela de Prototipagem do Figma</p><p>Fonte: Autora</p><p>O fluxo de navegação inicial consiste em uma launch screen (figura 33), com o logotipo</p><p>do Carnaval em Natal 2024, essa é a primeira tela visualizada pelo usuário ao abrir o</p><p>app. Logo ele é redirecionado para a tela de login (figura 34), caso ainda não esteja</p><p>logado, deverá realizar o seu login inserindo e-mail e senha, ou entrando com as</p><p>opções de conexão via Google ou Facebook. Caso o usuário tenha esquecido sua</p><p>senha, também há opção para que seja feita sua recuperação.</p><p>72</p><p>Figura 33 - Launch Screen</p><p>Fonte: Autora</p><p>73</p><p>Figura 34 - Tela de Login</p><p>Fonte: Autora</p><p>O usuário em seu primeiro acesso deverá realizar o cadastro clicando no botão de</p><p>Cadastre-se, presente na tela de login (figura 34). Ele deverá inserir suas informações</p><p>e criar sua conta (Figura 35), se não houver nenhum erro ao seguir as diretrizes para a</p><p>74</p><p>criação da senha (Figura 35), ele retornará a tela de login onde poderá inserir suas</p><p>informações recém cadastradas, para ter acesso integral às funcionalidades da</p><p>aplicação.</p><p>Figura 35 - Cadastro</p><p>Fonte: Autora</p><p>Ao ter acesso ao aplicativo, o usuário irá visualizar todos os pólos onde acontecerão as</p><p>atividades do Carnaval da cidade de Natal. As informações inseridas neste protótipo</p><p>foram baseadas na programação do carnaval de Natal do ano de 2020. Portanto, há a</p><p>75</p><p>exibição de sete botões (Figura 36) que representam os 7 polos onde foram realizadas</p><p>as atividades da programação do carnaval de tal ano. Ao clicar no polo, há o</p><p>comportamento de dropdown, onde o elemento se expande para baixo, exibindo as</p><p>informações da programação a partir do dia selecionado (Figura 36).</p><p>Figura 36 - Tela Inicial</p><p>Fonte: Autora</p><p>76</p><p>Ao clicar no ícone de adicionar, que se encontra do lado do nome da atração, deverá</p><p>aparecer um pop up na tela (Figura 37) perguntando ao usuário se ele deseja inserir a</p><p>atração na sua agenda personalizada.</p><p>Figura 37 - Pop Up</p><p>Fonte: Autora</p><p>77</p><p>Na página com as informações detalhadas da atração, o usuário também terá a</p><p>possibilidade de adicionar a atividade na sua agenda pessoal. Nesse caso, ele deverá</p><p>clicar no botão localizado na parte inferior da tela, com o texto [Adicionar a Minha</p><p>Agenda] (Figura 38).</p><p>Figura 38 - Informações detalhadas</p><p>Fonte: Autora</p><p>78</p><p>Na tela de informações detalhadas da atividade, também estão dispostas a data,</p><p>horário de início e fim, o polo, o logradouro, um breve resumo sobre a atividade e um</p><p>mapa para o folião se localizar.</p><p>Em [Minha Agenda] a interface apresenta as atividades que o usuário já selecionou</p><p>previamente (Figura 39), caso deseje retirar a atração da sua agenda, ele poderá clicar</p><p>no X, aparecerá um Pop Up (Figura 39) para que ele confirme que deseja remover a</p><p>atração da sua agenda. Caso o usuário acessa a tela e não haja nenhuma atração</p><p>adicionada até o momento, a interface ficará em estado de Empty Space, (Figura 40)</p><p>com um botão de [Adicionar à Minha Agenda] que o levará novamente ao início, onde</p><p>se encontram os pólos com a listagem de todas as atrações.</p><p>Figura 39 - Minha Agenda e Excluir Atividade</p><p>Fonte: Autora</p><p>79</p><p>Figura 40 - Empty Space da tela Minha Agenda</p><p>Fonte: Autora</p><p>Na parte superior esquerda fica localizado o menu, que consiste num elemento de três</p><p>traços, esse tipo de menu é chamado de menu hamburger. Ao clicar nele, são</p><p>mostradas algumas opções (Figura 41), sendo a primeira delas as informações do</p><p>usuário. Logo em seguida estão as opções para seguir até a tela ‘Minha Agenda’,</p><p>‘Notícias’, ‘Blocos’, ‘Acessibilidade’, ‘Dúvidas’ e ‘Sair’, onde o usuário pode fazer o log</p><p>out do aplicativo. Das opções citadas, a única que não teve uma tela desenvolvida foi a</p><p>de ‘Dúvidas’.</p><p>80</p><p>Figura 41 - Menu</p><p>Fonte: Autora</p><p>Ao seguir para Notícias (Figura 42), a interface apresenta notícias sobre o carnaval da</p><p>cidade extraídas de portais e jornais locais e nacionais.</p><p>81</p><p>Figura 42 - Notícias</p><p>Fonte: Autora</p><p>Na tela onde estão listados os blocos, o usuário terá acesso apenas aos blocos</p><p>cadastrados na programação de Natal e também poderão adicionar as atividades às</p><p>suas agendas (Figura 43).</p><p>82</p><p>Figura 43 - Listagem dos Blocos</p><p>Fonte: Autora</p><p>No Menu também há a seção para acessibilidade (Figura 44), nela o usuário tem a</p><p>opção de ativar o assistente de voz, que realiza a leitura do conteúdo clicado para</p><p>pessoas de baixa visão e a opção de esconder as imagens, que, além de deixar a</p><p>interface mais limpa, também auxilia na hora da leitura por aplicativos leitores, utilizado</p><p>83</p><p>por pessoas que possuem algum tipo de deficiência visual. Com a opção de imagens</p><p>habilitadas, todas elas terão uma descrição, que não fica aparente na interface, mas</p><p>que é reconhecida por aplicativos de leitura e pelo assistente de voz. Há também a</p><p>opção de aumentar o tamanho das fontes nas telas.</p><p>Figura 44 - Acessibilidade</p><p>Fonte: Autora</p><p>5.3. AVALIAÇÃO DO PROTÓTIPO</p><p>Lowdermilk (2013) diz que a maneira mais eficiente de perceber as necessidades dos</p><p>usuários é observando-os diretamente, e com a aplicação de Testes de Usabilidade</p><p>84</p><p>podemos quantificar essas observações. Dessa maneira, o teste de usabilidade</p><p>a130plicado nesse projeto permitiu observar os usuários e documentar seus</p><p>comentários, catalogando suas ações na utilização do produto.</p><p>A partir do protótipo foi criado um fluxo clicável (Figura 45) utilizando o Figma e foram</p><p>recrutados 4 usuários entre 23 e 35 anos que se consideram foliões para a realização</p><p>do teste.</p><p>Figura 45 - Print do Fluxo Clicável no Figma</p><p>Fonte: Autora</p><p>Foram definidas 5 tarefas através de 5 cenários hipotéticos. A Tabela X mostra as</p><p>tarefas que foram solicitadas que os usuários realizassem.</p><p>Quadro 07 - Lista de Tarefas</p><p>Tarefa 01 Você vai sair para curtir o carnaval e após</p><p>fazer o download do app para ajudá-lo a</p><p>se guiar na programação, irá realizar o</p><p>seu primeiro acesso.</p><p>Tarefa 02 Você criou sua conta e agora irá</p><p>adicionar uma atividade a sua agenda</p><p>personalizada.</p><p>85</p><p>Tarefa 03 Imagine que você desistiu de ir a uma</p><p>das atividades que pretendia e agora irá</p><p>retirá-la da sua agenda personalizada.</p><p>Tarefa 04 Você escolheu uma atividade para ir e</p><p>quer saber mais detalhes sobre ela, como</p><p>data, horário, logradouro e classificação</p><p>indicativa.</p><p>Tarefa 05 Imagine que você quer convencer um</p><p>amigo a ir com você para as festividades</p><p>e quer mostrar notícias sobre o Carnaval</p><p>em Natal para ajudá-lo nessa missão.</p><p>Fonte: Autora</p><p>Após a realização das tarefas, foi definido um roteiro de perguntas (Tabela X),</p><p>conduzidas de forma mais informal, como se em uma conversa, para avaliar a</p><p>percepção dos usuários em relação ao aplicativo.</p><p>Quadro 08 - Lista de perguntas</p><p>Pergunta 01 Houve alguma dificuldade na hora de</p><p>realizar o cadastro inicial?</p><p>Pergunta 02 Qual a tarefa que lhe demandou mais</p><p>esforço?</p><p>Pergunta 03 Você conseguiu adicionar uma atividade</p><p>à agenda personalizada com facilidade?</p><p>Pergunta 04 Você identificou algum erro durante a</p><p>navegação?</p><p>Pergunta 05 Você utilizaria esse aplicativo durante o</p><p>Carnaval de Natal?</p><p>Fonte: Autora</p><p>Para a pergunta 01, todos os quatro participantes responderam que não houve</p><p>dificuldade com o fluxo de cadastro do aplicativo. Foi sugerido por um dos participantes</p><p>que houvesse mais campos de informações na hora de realizar o cadastro, como de</p><p>qual a área da cidade a pessoa é ou se é turista, por exemplo.</p><p>86</p><p>Para a pergunta de número 02, três dos quatro participantes responderam que acessar</p><p>a tela onde estão listados os blocos foi a tarefa que mais lhes demandou esforços, pois</p><p>está presente no menu, foi sugerido que o botão para a listagem dos blocos ficasse na</p><p>página inicial junto com a listagem dos polos. Dois dos participantes disseram que</p><p>ficaram confusos em relação ao botão com o símbolo de + ao lado das atrações na</p><p>listagem de polos, por acharem que se tratava de um botão que os levaria até a página</p><p>com as informações detalhadas da atividade, quando na verdade abria o pop up para</p><p>adicionar a atividade a agenda personalizada.</p><p>Quanto à terceira pergunta, os quatro participantes disseram achar simples a ação de</p><p>adicionar a atividade de adicionar atividade à agenda a partir da tela de informações</p><p>detalhadas. Dois dos participantes acharam confuso o botão de adicionar atividade à</p><p>agenda presente na listagem das atrações da página inicial, onde estão localizados os</p><p>polos, como citado anteriormente.</p><p>Na pergunta 04, foi questionado se os participantes identificaram algum erro na</p><p>navegação. Os quatro relataram dificuldades na hora de retornar para a página inicial</p><p>ou sair das páginas. No fluxo atual, não há botão de retornar dentro da aplicação e o</p><p>usuário deverá usar o botão de retorno do próprio smartphone. Esse botão de retorno</p><p>do smartphone não aparece na simulação do Figma, o que explica a dificuldade.</p><p>Todos os usuários afirmaram que sim, utilizariam o aplicativo para se guiar durante o</p><p>Carnaval da cidade de Natal.</p><p>Além das perguntas presentes no roteiro, também os questionei em relação à</p><p>legibilidade de cores e fontes, e todos teceram comentários positivos sobre a facilidade</p><p>de leitura e ao contraste da interface.</p><p>87</p><p>5.4. RESULTADOS OBTIDOS</p><p>Ao final do teste, foi concluído que o resultado foi satisfatório. Abaixo, estão listados os</p><p>comentários dos participantes em relação a melhorias que podem ser incluídas no</p><p>aplicativo.</p><p>● Mais campos de informações na tela de cadastro, como por exemplo em qual</p><p>área da cidade o usuário reside ou se é turista.</p><p>● Realocar acesso a listagem de bloco para a página inicial junto a listagem de</p><p>polos, no lugar do menu.</p><p>● Refatorar o botão de adicionar agenda presente ao lado do nome das atividades</p><p>na listagem de polos.</p><p>● Botão de retornar a página inicial nas páginas. Ou botão flutuante que leve ao</p><p>início do fluxo (página inicial).</p><p>A partir dos comentários dos participantes, foram refatoradas algumas das telas da</p><p>interface. Refatorar é o termo utilizado para representar o processo de alterar uma</p><p>parte do sistema de uma interface sem que essa mudança interfira no seu</p><p>comportamento.</p><p>Foi adicionado o campo de região a tela de cadastro (Figura 46), dando possibilidade</p><p>ao usuário de informar em qual zona da cidade ele reside, se é da região</p><p>metropolitana, do interior ou se é turista.</p><p>Na tela inicial foram adicionadas duas tags, uma para os pólos e outra para blocos</p><p>(Figura 47). Desse jeito, o usuário terá acesso a listagem dos blocos logo na página</p><p>inicial. Foi retirado o botão com o símbolo de + para inserção da atividade na agenda</p><p>personalizada e adicionado um underline ao texto, para expressar que os textos com</p><p>os nomes das atividades são clicáveis, ao clicar na atividade o usuário irá para a</p><p>página de informações detalhadas, e a partir daí poderá adicionar a atividade a sua</p><p>agenda se assim desejar.</p><p>88</p><p>No lugar de inserir uma seta de retorno em todas as telas, optei por colocar um botão</p><p>que leve ao início dentro do menu (Figura 48), dessa forma o usuário poderá retornar</p><p>ao início do fluxo se assim preferir. E para voltar poderá utilizar a funcionalidade de</p><p>retorno presente no próprio aparelho smartphone.</p><p>Figura 46 - Fluxo de telas do cadastro refatoradas</p><p>Fonte: Autora</p><p>89</p><p>Figura 47 - Fluxo de telas de início refatoradas</p><p>Fonte: Autora</p><p>90</p><p>Figura 48 - Tela do menu refatorada</p><p>Fonte: Autora</p><p>91</p><p>6. CONSIDERAÇÕES FINAIS</p><p>O Carnaval é uma festa importantíssima na cultura do Brasil e movimenta a economia</p><p>de forma significativa. Na nossa realidade pós-pandêmica, as festividades começam a</p><p>se restabelecer no calendário anual, e este projeto de artefato digital, caso</p><p>implementado na realidade das festividades, pode ser mais um meio de aproximar o</p><p>cidadão da sua cidade.</p><p>Projetar utilizando métodos de design centrado no humano foi essencial para o</p><p>desenvolvimento de um produto coerente e que vá de fato fazer diferença na vida do</p><p>usuário, mesmo que seja em detrimento de algo simples, como o acompanhamento de</p><p>uma programação de uma festividade.</p><p>O objetivo geral do projeto foi alcançado, foi criado um artefato digital a partir dos</p><p>conceitos de usabilidade que auxilia o folião potiguar no acompanhamento da</p><p>programação do Carnaval da cidade de Natal. As telas finalizadas estão dispostas no</p><p>apêndice deste documento assim como os links para o protótipo navegável.</p><p>92</p><p>REFERÊNCIAS</p><p>DOZENA, A. O imaginário utópico brasileiro nas práticas festivas europeias. In</p><p>GEOUSP Espaço e Tempo (Online), [S. l.], v. 20, n. 3, p. 568-584, 2016. DOI:</p><p>10.11606/issn.2179-0892.geousp.2016.115328. Disponível em:</p><p>https://www.revistas.usp.br/geousp/article/view/115328. Acesso em: 29 nov. 2022.</p><p>PEDREIRA, Flávia de Sá. Chiclete eu misturo com banana: Carnaval e cotidiano de</p><p>guerra em Natal 1920-1945. (Tese de Doutorado). Universidade de Campinas, 2004.</p><p>TRIBUNA DO NORTE;Acidente no Baldo completa 23 anos de impunidade. Edição</p><p>25/02/2007. Disponível em:</p><p>http://www.tribunadonorte.com.br/noticia/acidente-no-baldo-completa-23-anos-de-impun</p><p>idade/35450 Acesso: 23 Set 2022</p><p>PREFEITURA DO NATAL; Carnaval de Natal movimenta R$ 111 milhões, aponta</p><p>pesquisa Fecomércio. Disponível em: https://www.natal.rn.gov.br/news/post/32685</p><p>Acesso: 23 Set 2022</p><p>PORTAL IFRN; Pesquisa sobre o Carnaval de Natal 2020 conta com a participação</p><p>dos Campi Canguaretama e Cidade Alta do IFRN. Disponível em:</p><p>https://portal.ifrn.edu.br/campus/canguaretama/noticias/pesquisa-sobre-o-carnaval-de-n</p><p>atal-2020-conta-com-a-participacao-dos-campi-canguaretama-e-cidade-alta-do-ifrn</p><p>Acesso: 23 Set 2022</p><p>Abras, C., Maloney-Krichmar, D., Preece, J. (2004) User-Centered Design. In</p><p>Bainbridge, W. Encyclopedia of Human-Computer Interaction. Thousand Oaks:</p><p>Sage Publications</p><p>LOWDERMILK, T. Design Centrado no Usuário: um guia para o desenvolvimento de</p><p>aplicativos amigáveis. São Paulo: Novatec Editora, 2013.</p><p>NORMAN, Donald. O Design do Dia-a-dia. Rio de Janeiro: Rocco, 2006.</p><p>SANTA ROSA, J. G.; MORAES, A. Avaliação e Projeto no Design de Interfaces. 2a</p><p>ed. Rio de Janeiro: 2AB, 2012.</p><p>WURMAN, R. S. Information architects. 2a. ed. Lakewood: Watson-Guptill Pubns,</p><p>1997.</p><p>https://www.revistas.usp.br/geousp/article/view/115328</p><p>http://www.tribunadonorte.com.br/noticia/acidente-no-baldo-completa-23-anos-de-impunidade/35450</p><p>http://www.tribunadonorte.com.br/noticia/acidente-no-baldo-completa-23-anos-de-impunidade/35450</p><p>http://www.tribunadonorte.com.br/noticia/acidente-no-baldo-completa-23-anos-de-impunidade/35450</p><p>http://www.tribunadonorte.com.br/noticia/acidente-no-baldo-completa-23-anos-de-impunidade/35450</p><p>https://www.natal.rn.gov.br/news/post/32685</p><p>https://portal.ifrn.edu.br/campus/canguaretama/noticias/pesquisa-sobre-o-carnaval-de-natal-2020-conta-com-a-participacao-dos-campi-canguaretama-e-cidade-alta-do-ifrn</p><p>https://portal.ifrn.edu.br/campus/canguaretama/noticias/pesquisa-sobre-o-carnaval-de-natal-2020-conta-com-a-participacao-dos-campi-canguaretama-e-cidade-alta-do-ifrn</p><p>93</p><p>SHARP, H., ROGERS, Y., & Preece, J. (2013). Design de interação [recurso</p><p>eletrônico]: Além da interação humano-computador. 3a ed. (I. Gasparini, Trans.) Porto</p><p>Alegre: Bookman Editora.</p><p>CYBIS, Walter; BETIOL, Adriana Holtz; FAUST, Richard. Ergonomia e Usabilidade –</p><p>Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora Ltda, 2015.</p><p>NIELSEN, Jakob. Design Web Usability. Indiana: New Riders Publishing, 2000.</p><p>NIELSEN, Jakob. Usability Engineering. San Francisco: Morgan Kaufmann, 1993.</p><p>Hiltunen, M., Laukka,</p><p>M., Luomala, J. Mobile User Experience. Finland: Edita</p><p>Publishing Inc., 2002.</p><p>NORMAN, Donald A. Emotional Design:Why We Love Or Hate Everyday Things.</p><p>Nova York: Basic Books, 2004</p><p>WC3. Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 Disponível em:</p><p>https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#:~:text=As%20 Diretrizes%20de%20</p><p>Acessibilidade%20para%20 Conte%C3%BAdo%20Web%20(WCAG)%202.1%20</p><p>definem,linguagem%2C%20de%20aprendizagem%20e%20 neurol%C3%B3gica. Acesso: 23 Out 2022</p><p>BERKUN, S. The Art of UI Prototyping. Novembro de 2000. Disponível em:</p><p>http://www.scottberkun.com/essays/essay12.htm. Acesso em: Novembro de 2022</p><p>YABLONSKI, Jon. Leis da Psicologia Aplicadas a UX: Usando Psicologia Para</p><p>Projetar Produtos e Serviços Melhores. São Paulo: Novatec Editora, 2020.</p><p>AGENCIA BRASIL; Carnaval movimenta R$ 4 bilhões na economia do Rio de</p><p>Janeiro. Edição 02/2022. Disponível em:</p><p>https://agenciabrasil.ebc.com.br/geral/noticia/2022-02/carnaval-movimenta-r-4-bilhoes-n</p><p>a-economia-do-rio-de-janeiro Acesso: 23 Set 2022.</p><p>FECOMERCIO; Carnaval Multicultural de Natal movimentou mais de R$ 111</p><p>milhões e investimentos têm aprovação de 89,6% dos foliões, diz Fecomércio RN.</p><p>Disponível em:</p><p>https://fecomerciorn.com.br/noticias/carnaval-multicultural-de-natal-movimentou-mais-d</p><p>e-r-111-milhoes-e-investimentos-tem-aprovacao-de-896-dos-folioes-diz-fecomercio-rn/</p><p>Acesso: 23 Set 2022</p><p>https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#:~:text=As%20Diretrizes%20de%20Acessibilidade%20para%20Conte%C3%BAdo%20Web%20(WCAG)%202.1%20definem,linguagem%2C%20de%20aprendizagem%20e%20neurol%C3%B3gica</p><p>https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#:~:text=As%20Diretrizes%20de%20Acessibilidade%20para%20Conte%C3%BAdo%20Web%20(WCAG)%202.1%20definem,linguagem%2C%20de%20aprendizagem%20e%20neurol%C3%B3gica</p><p>https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#:~:text=As%20Diretrizes%20de%20Acessibilidade%20para%20Conte%C3%BAdo%20Web%20(WCAG)%202.1%20definem,linguagem%2C%20de%20aprendizagem%20e%20neurol%C3%B3gica</p><p>http://www.scottberkun.com/essays/essay12.htm</p><p>https://agenciabrasil.ebc.com.br/geral/noticia/2022-02/carnaval-movimenta-r-4-bilhoes-na-economia-do-rio-de-janeiro</p><p>https://agenciabrasil.ebc.com.br/geral/noticia/2022-02/carnaval-movimenta-r-4-bilhoes-na-economia-do-rio-de-janeiro</p><p>https://fecomerciorn.com.br/noticias/carnaval-multicultural-de-natal-movimentou-mais-de-r-111-milhoes-e-investimentos-tem-aprovacao-de-896-dos-folioes-diz-fecomercio-rn/</p><p>https://fecomerciorn.com.br/noticias/carnaval-multicultural-de-natal-movimentou-mais-de-r-111-milhoes-e-investimentos-tem-aprovacao-de-896-dos-folioes-diz-fecomercio-rn/</p><p>94</p><p>AGENCIA IBGE NOTICIAS; PIB cresce 1,0% no primeiro trimestre, impulsionado</p><p>pelo setor de serviços. Disponível em:</p><p>https://agenciadenoticias.ibge.gov.br/agencia-noticias/2012-agencia-de-noticias/noticias</p><p>/33936-pib-cresce-1-0-no-primeiro-trimestre-impulsionado-pelo-setor-de-servicos</p><p>Acesso: 23 Set 2022</p><p>CASTRO, Ruy. Metrópole à beira-mar: O Rio moderno dos anos 20. São Paulo:</p><p>Companhia das Letras; 2019.</p><p>BAKHTIN, M. A Cultura Popular na Idade Média: o contexto de François Rabelais.</p><p>São Paulo: Hucitec, 1987.</p><p>WHEELER, A. Design de identidade da marca. 2a ed. Porto Alegre: Bookman, 2008.</p><p>https://agenciadenoticias.ibge.gov.br/agencia-noticias/2012-agencia-de-noticias/noticias/33936-pib-cresce-1-0-no-primeiro-trimestre-impulsionado-pelo-setor-de-servicos</p><p>https://agenciadenoticias.ibge.gov.br/agencia-noticias/2012-agencia-de-noticias/noticias/33936-pib-cresce-1-0-no-primeiro-trimestre-impulsionado-pelo-setor-de-servicos</p><p>95</p><p>Apêndice I - Links Importantes</p><p>Link do projeto no Figma:</p><p>https://www.figma.com/file/tm17nqYw0nBRkXzEvqdCY6/TCC-APP-CARNAVAL-DE-NA</p><p>TAL?type=design&node-id=702-646&mode=design&t=BHcBFjBmoMH8LEPc-0</p><p>Link do protótipo navegável:</p><p>https://www.figma.com/proto/tm17nqYw0nBRkXzEvqdCY6/TCC-APP-CARNAVAL-DE-N</p><p>ATAL?type=design&node-id=674-118&scaling=scale-down&page-id=0%3A1&starting-p</p><p>oint-node-id=674%3A69</p><p>https://www.figma.com/file/tm17nqYw0nBRkXzEvqdCY6/TCC-APP-CARNAVAL-DE-NATAL?type=design&node-id=702-646&mode=design&t=BHcBFjBmoMH8LEPc-0</p><p>https://www.figma.com/file/tm17nqYw0nBRkXzEvqdCY6/TCC-APP-CARNAVAL-DE-NATAL?type=design&node-id=702-646&mode=design&t=BHcBFjBmoMH8LEPc-0</p><p>https://www.figma.com/proto/tm17nqYw0nBRkXzEvqdCY6/TCC-APP-CARNAVAL-DE-NATAL?type=design&node-id=674-118&scaling=scale-down&page-id=0%3A1&starting-point-node-id=674%3A69</p><p>https://www.figma.com/proto/tm17nqYw0nBRkXzEvqdCY6/TCC-APP-CARNAVAL-DE-NATAL?type=design&node-id=674-118&scaling=scale-down&page-id=0%3A1&starting-point-node-id=674%3A69</p><p>https://www.figma.com/proto/tm17nqYw0nBRkXzEvqdCY6/TCC-APP-CARNAVAL-DE-NATAL?type=design&node-id=674-118&scaling=scale-down&page-id=0%3A1&starting-point-node-id=674%3A69</p><p>96</p><p>Apêndice II - Telas</p><p>97</p><p>98</p><p>99</p><p>100</p><p>101</p><p>102</p><p>103</p><p>Lista de Quadros</p><p>Quadro 01 - Vantagens e Desvantagens do Design Centrado no Usuário…………….22</p><p>Quadro 02 - Exemplos de Atributos de Usuário, tarefas e sistema a serem</p><p>considerados na coleta de dados e análise visando ao desenvolvimento de interfaces</p><p>com o usuário…………………………………………………………………………………..24</p><p>Quadro 03 - Heuristicas de Nielsen…………………………………………………………27</p><p>Quadro 04 - Quadro com Levantamento da Análise de Similares………………………53</p><p>Quadro 05 - Vantagens e Desvantagem do Protótipo de Baixa Fidelidade…………….57</p><p>Quadro 06 - Vantagens e Desvantagens do protótipo de alta fidelidade……………….58</p><p>Quadro 07 - Lista de Tarefas……………………………………………………………..…84</p><p>Quadro 08 - Lista de perguntas……………………………………………………………..85</p><p>Lista de Abreviaturas e Siglas</p><p>FECOMÉRCIO - Federação do Comércio de Bens, Serviços e Turismo do Estado do</p><p>RN</p><p>IBGE - Instituto Brasileiro de Geografia e Estatística</p><p>OBSERVATUR - Observatório de Turismo do RN</p><p>DCU - Design Centrado no Usuário</p><p>ISO - International Organization for Standardization</p><p>UX - User Experience</p><p>APP - Application</p><p>https://www.iso.org/home.html</p><p>11</p><p>Sumário</p><p>1. INTRODUÇÃO........................................................................................................................ 12</p><p>1.1. TEMA..............................................................................................................................14</p><p>1.2. OBJETIVO GERAL.........................................................................................................14</p><p>1.3. OBJETIVOS ESPECÍFICOS.......................................................................................... 14</p><p>2. CARNAVAL DE NATAL.......................................................................................................... 16</p><p>2.1. PROGRAMAÇÃO DO CARNAVAL DE NATAL 2020......................................................19</p><p>3. REFERENCIAL TEÓRICO CONCEITUAL............................................................................. 20</p><p>3.1. DESIGN CENTRADO NO HUMANO............................................................................. 20</p><p>3.2. DESIGN DE INTERAÇÃO.............................................................................................. 23</p><p>3.3. USABILIDADE................................................................................................................ 24</p><p>3.4. USABILIDADE NA INTERAÇÃO MÓVEL...................................................................... 29</p><p>3.5. ACESSIBILIDADE.......................................................................................................... 30</p><p>3.5.1. ALTERNATIVAS EM TEXTO................................................................................. 31</p><p>3.5.2. MÍDIAS COM BASE DE TEMPO...........................................................................32</p><p>3.5.3. ADAPTÁVEL..........................................................................................................32</p><p>3.5.4. COMPATÍVEL........................................................................................................ 33</p><p>4. MÉTODOS E TÉCNICAS........................................................................................................34</p><p>4.1. ANÁLISE DE SIMILARES.............................................................................................. 34</p><p>4.1.1. BLOCOS DE RUA.COM........................................................................................34</p><p>4.1.2. CARNAVAL DO RIO - 2020................................................................................... 43</p><p>4.1.3. BLOCOS DA FOLIA - 2019................................................................................... 49</p><p>4.1.4. CONCLUSÕES A PARTIR DA ANÁLISE DE SIMILARES.................................... 53</p><p>4.1.5. LISTA DE CONTEÚDO A PARTIR DOS RESULTADOS DA ANÁLISE DE</p><p>SIMILARES......................................................................................................................54</p><p>4.2. PROTOTIPAGEM........................................................................................................... 55</p><p>5. DESENVOLVIMENTO DO PROTÓTIPO................................................................................ 60</p><p>5.1. IDENTIDADE VISUAL.................................................................................................... 67</p><p>5.1.1. NAMING.................................................................................................................67</p><p>5.1.2. CORES.................................................................................................................. 68</p><p>5.1.3 TIPOGRAFIA.......................................................................................................... 69</p><p>5.1.4. LOGOTIPO............................................................................................................ 69</p><p>5.2. PROTÓTIPO DE ALTA FIDELIDADE............................................................................. 70</p><p>5.3. AVALIAÇÃO DO PROTÓTIPO....................................................................................... 83</p><p>5.4. RESULTADOS OBTIDOS...............................................................................................87</p><p>6. CONSIDERAÇÕES FINAIS.................................................................................................... 91</p><p>REFERÊNCIAS...........................................................................................................................92</p><p>Apêndice I - Links Importantes................................................................................................ 95</p><p>Apêndice II - Telas..................................................................................................................... 96</p><p>12</p><p>1. INTRODUÇÃO</p><p>De acordo com o filósofo Mikhail Bakhtin (1987), as festividades, qualquer que sejam</p><p>elas, são forma primordial e marcante da civilização humana. O Carnaval é sem</p><p>dúvidas a festividade mais popular e culturalmente intrínseca ao povo brasileiro desde</p><p>seus primórdios no país, e tem grande importância no calendário do Brasil. As</p><p>principais cidades possuem sua própria programação que vão de festas mais</p><p>tradicionais, como desfiles de escolas de samba e blocos de rua, a festejos com shows</p><p>e atrações variadas promovidas de forma privada ou pelo poder público.</p><p>Só na cidade do Rio de Janeiro em 2022, por exemplo, segundo os dados da</p><p>AGÊNCIA BRASIL (2022), o carnaval movimentou o impressionante número de R$4</p><p>bilhões na economia.</p><p>A cidade de Natal/RN, mesmo não sendo um destino turístico comumente associado às</p><p>suas festividades carnavalescas, conta com uma extensa programação anual de</p><p>festejos organizada pela prefeitura, tanto com blocos de rua em diversos polos como</p><p>também polos com shows de artistas locais e nacionais.</p><p>No ano de 2020, foi apurado que os foliões colocaram em circulação R$111 milhões</p><p>(FECOMÉRCIO/RN) durante os festejos carnavalescos na capital norte-rio-grandense.</p><p>Diante do cenário pós pandemia, já se é observado uma elevação de 1% (IBGE) na</p><p>indústria de serviços dentro do Produto Interno Bruto, esse aumento reflete a maior</p><p>procura por serviços de bares, festas, restaurantes e eventos, por exemplo. Estes</p><p>foram os setores mais afetados durante o período de fechamento na pandemia de 104</p><p>COVID-19 que teve início em março de 2020. Essa procura maior se dá pois,</p><p>historicamente após períodos de recolhimento, grandes guerras ou epidemias, vem</p><p>períodos de grande euforia. A tendência portanto é um retorno entusiasmado ao que</p><p>deixou de ser vivenciado no período de isolamento.</p><p>13</p><p>O Carnaval do ano de 1919, por exemplo, que se deu logo após a primeira guerra</p><p>mundial e a pandemia de gripe espanhola (que estima-se ter vitimado em torno de 100</p><p>milhões de pessoas ao redor do mundo, 40 mil apenas no Brasil), ocorreu em março e</p><p>levou uma multidão de brasileiros a tomarem as ruas no maior Carnaval já visto até</p><p>então. “Na quarta-feira de cinzas, o Rio despertou convicto de que vivera o maior</p><p>Carnaval de sua história”, destacou o escritor Ruy Castro no livro “Metrópole à</p><p>Beira-Mar”</p><p>(2019). Portanto, levando em consideração o contexto histórico e a sua</p><p>importância cultural, é esperado que as próximas festividades sejam ainda mais</p><p>grandiosas do que quando ocorriam no período pré-pandêmico.</p><p>Com base nos dados supracitados, que corroboram a importância do Carnaval no</p><p>contexto atual e histórico, proponho com este trabalho o desenvolvimento de um</p><p>protótipo de uma interface digital mobile acessível, funcional e intuitiva que auxilie o</p><p>folião em terras potiguares a se localizar dentro da programação dos festejos do</p><p>Carnaval de Natal. Possibilitando conhecer as atrações, as localidades e os horários</p><p>para que seja possível organizar uma agenda personalizada ao longo dos dias de</p><p>festividade. Juntamente com a criação de uma identidade visual atrativa e apoiada em</p><p>pilares estéticos agradáveis e coesos com a temática proposta.</p><p>Para isso, o presente trabalho busca entender as necessidades dos foliões/usuários a</p><p>partir de pesquisas, fundamentação teórica e aplicação de metodologias tais como</p><p>análise de similares, avaliação heurística e prototipagem. E em posse desses</p><p>resultados desenvolver protótipos de baixa e alta fidelidade, aplicar testes de</p><p>usabilidade e posterior avaliação dos resultados coletados.</p><p>Importante ressaltar que as informações presentes no aplicativo a ser desenvolvido</p><p>serão extraídas da programação do Carnaval que ocorreu na cidade de Natal no</p><p>período de fevereiro de 2020, por ter sido o último carnaval organizado por órgãos</p><p>públicos e privados em larga escala antes da pandemia de COVID-19. A aplicação em</p><p>desenvolvimento no presente trabalho deverá permitir que as informações sejam</p><p>atualizadas ao passo que uma nova programação seja atualizada em outro período,</p><p>14</p><p>entretanto a identidade visual proposta será utilizada apenas para o aplicativo em</p><p>desenvolvimento.</p><p>1.1. TEMA</p><p>Desenvolvimento de um protótipo de aplicação mobile que possibilite ao folião obter</p><p>informações sobre a programação do Carnaval de Natal de modo rápido e eficiente</p><p>para que possa usufruir das atividades programadas de modo simples e com</p><p>segurança.</p><p>1.2. OBJETIVO GERAL</p><p>O objetivo geral deste projeto consiste na criação de um protótipo de interface digital</p><p>que auxilie o folião potiguar a se localizar dentro da programação do Carnaval de Natal,</p><p>conhecer as atrações, os horários e trazer contextualização sobre as festas promovidas</p><p>pela prefeitura da cidade.</p><p>Serão abordadas a história do Carnaval de Natal, sua contextualização, desde os</p><p>primórdios da festividade até os dias atuais. Também serão apresentados conceitos do</p><p>referencial teórico conceitual de usabilidade, design centrado no usuário, design de</p><p>interação, acessibilidade e suas nuances e as metodologias a serem utilizadas no</p><p>presente trabalho, além do desenvolvimento do protótipo de alta fidelidade.</p><p>1.3. OBJETIVOS ESPECÍFICOS</p><p>i) realizar análise de similares com ao menos três aplicativos;</p><p>ii) conceituar metodologias;</p><p>iii) compreender a importância das festividades de Carnaval;</p><p>iv) aplicar conceitos de usabilidade no desenvolvimento de protótipos de baixa, média e</p><p>alta fidelidade;</p><p>v) criar uma identidade visual a partir de um design system;</p><p>15</p><p>vi) desenvolver protótipo clicável;</p><p>vii) testar o protótipo final e avaliar os resultados.</p><p>16</p><p>2. CARNAVAL DE NATAL</p><p>Em 1930 foi criado o “plano modernizador” pelo então presidente Getúlio Vargas, que</p><p>buscava homogeneizar e disseminar a cultura pelo país. Sendo que a representação</p><p>cultural do Carnaval presente nesse plano desconsiderava as particularidades locais do</p><p>restante do país e atrelava as festividades ao samba carioca (DOZENA, 2016), sendo o</p><p>Rio de Janeiro a capital do país na época. Mesmo assim, segundo PEDREIRA (2004),</p><p>houve bastante preocupação do povo potiguar em manter as especificidades culturais</p><p>locais nos festejos, entre as quais os bailes populares e os papangús.</p><p>Três anos após a instauração do plano político cultural de Getúlio Vargas, em 1933, o</p><p>Carnaval foi oficializado em Natal, mas com algumas restrições e normatizações,</p><p>dentre elas a proibição a alusões ofensivas às autoridades, à moral e aos bons</p><p>costumes.</p><p>Com o Carnaval se tornando tradicional na cidade, o tamanho da festa crescia</p><p>exponencialmente a cada ano. A Avenida Tavares de Lira na Ribeira era onde se</p><p>concentravam as festividades oficiais. Mudando depois para a Avenida Rio Branco no</p><p>ano de 1936. E mesmo com a participação de Natal na segunda guerra mundial a partir</p><p>de 1939, os festejos não cessaram, pelo contrário, a chegada de militares cariocas na</p><p>cidade contribuiu para agregar novos elementos às festividades, pontua DOZENA</p><p>(2016).</p><p>Depois da oficialização do Carnaval, os órgãos públicos começaram a incentivar e a</p><p>auxiliar financeiramente blocos e bailes carnavalescos e inseri-los na programação</p><p>oficial das festas na cidade. Destaca-se a atuação do político Djalma Maranhão, que foi</p><p>secretário da cultura, deputado federal e esteve à frente da prefeitura da cidade entre</p><p>as décadas de 1940 e 1960 e contribuiu consideravelmente na disseminação das</p><p>manifestações culturais locais.</p><p>No expediente de 31.01.1959, A República realizou um balanço dos três anos de</p><p>administração do político, tendo sido relatados os festivais folclóricos promovidos</p><p>17</p><p>ininterruptamente nos anos de sua gestão – de 1956 a 1959. O jornal ainda lembrou o</p><p>“fandango, lapinha, pastoril, boi calemba, chegança, bambelô, congo e cavalhada” que</p><p>eram apresentados em praça pública e no Teatro Alberto Maranhão. Conforme o</p><p>expediente, um outro motivo de atração turística, a exemplo dos folguedos, foi o</p><p>“Carnaval natalense considerado pela imprensa do Sul como o terceiro maior</p><p>Carnaval do Brasil”. (DOZENA, 2016 p.16)</p><p>Porém o Carnaval da cidade nunca mais foi o mesmo após o trágico acidente</p><p>conhecido como a “Tragédia do Baldo”, ocorrido no dia 25 de Fevereiro de 1984</p><p>durante a passagem do bloco “Puxa Saco” entre a Avenida Coronel Estevam e a</p><p>Avenida Rio Branco. O motorista de ônibus Aluizio Batista Farias da empresa</p><p>Guanabara, ao saber que trabalharia além do expediente, atropelou deliberadamente</p><p>os foliões em um acesso de raiva, vitimando 19 pessoas e ferindo gravemente outras</p><p>12.</p><p>18</p><p>Figura 01 - Ônibus da Guanabara envolvido na “Tragédia do Baldo”</p><p>Fonte - No Minuto</p><p>Em consequência desse episódio, a cidade sofreu com o declínio de suas festividades</p><p>de Carnaval. Em entrevista à Tribuna do Norte, o carnavalesco Dickson Medeiros, que</p><p>era o diretor do bloco “Puxa Saco” na época do acidente, disse que se tal fato não</p><p>tivesse acontecido, hoje em dia o carnaval da cidade estaria na “crista da onda”.</p><p>Apesar do abrupto decaimento no ritmo que vinha se consolidando ano após ano, a</p><p>cidade continuou com os festejos anuais que seguem até os dias atuais. Hoje em dia o</p><p>Carnaval natalense é conhecido como “Carnaval Multicultural” e conta com uma folia</p><p>diversificada, blocos de rua e shows com a presença de artistas locais e nacionais.</p><p>19</p><p>2.1. PROGRAMAÇÃO DO CARNAVAL DE NATAL 2020</p><p>O Carnaval de Natal do ano de 2020, o último a ocorrer antes da pandemia, contou</p><p>com 7 polos espalhados pela cidade: Ribeira, Ponta Negra, Petrópolis, Redinha,</p><p>Rocas, Centro Histórico e o da Zona Oeste. Foram 49 bandas de frevo, 1.151 músicos</p><p>instrumentistas, 94 atrações de palco com 584 músicos e intérpretes, além de 49</p><p>blocos e troças contratados. Também dispôs de 20 prévias e 15 blocos incentivados</p><p>por leis municipais, com a participação de 52 mil foliões, além de 14 escolas de samba</p><p>e nove tribos de índios no Polo Ribeira (Prefeitura do Natal).</p><p>Entre os artistas de grande porte nacional, se apresentaram Iza, Glória Groove, Alceu</p><p>Valença, Duda Beat, entre outros, atraindo em torno de 254 mil foliões, sendo 82% de</p><p>moradores de Natal e 18% de visitantes, que movimentaram R$18 milhões na</p><p>economia. (OBSERVATUR/RN).</p><p>20</p><p>3. REFERENCIAL TEÓRICO CONCEITUAL</p><p>Ao desenvolver um produto interativo o designer deve estar a par de conceitos e</p><p>abordagens que irão basear suas escolhas e auxiliar na melhor compreensão</p><p>do</p><p>usuário. É essencial levar em consideração o que poderá proporcionar uma experiência</p><p>de qualidade no uso do artefato a ser desenvolvido, utilizar técnicas que possam ser</p><p>testadas e aprovadas, ouvir e entender o que o usuário tem a dizer e otimizar a</p><p>interação dele com o sistema.</p><p>3.1. DESIGN CENTRADO NO HUMANO</p><p>Antes de adentrarmos na conceituação da abordagem do design centrado no usuário, é</p><p>importante entender a concepção de “usuário”. De acordo com Abras,</p><p>Maloney-Krichmar e Preece (2004), podemos classificar os usuários dentro de três</p><p>categorias: primária, secundária e terciária. Os usuários primários são as pessoas que</p><p>de fato utilizam o artefato; os secundários são aqueles que ocasionalmente o utilizam</p><p>ou fazem uso através de um intermediário; e os terciários são os usuários que são</p><p>afetados pelo uso do produto mesmo que não estejam o utilizando de forma direta.</p><p>Exemplificando com o uso de automóveis: Quem dirige o veículo é considerado o</p><p>usuário primário, já o passageiro se encaixa na categoria de usuário secundário, e o</p><p>pedestre seria o terciário, pois mesmo não fazendo uso direto do produto (automóvel),</p><p>é afetado por ele. Portanto, no desenvolvimento de um artefato, seja ele físico ou</p><p>digital, é essencial que as três categorias sejam consideradas.</p><p>Muitas vezes, para evitar críticas e custos, o usuário era excluído do processo de</p><p>desenvolvimento de um produto. Não era considerado que a falta de compreensão do</p><p>espectro de suas necessidades, ou decisões tomadas com base em preferências</p><p>pessoais podem acabar acarretando em decisões equivocadas e tempo desperdiçado,</p><p>pois soluções sem embasamento estatístico e descontextualizadas eventualmente</p><p>terão que ser corrigidas mais a frente no processo. LOWDERMILK (2013) nos diz que o</p><p>processo de design centrado no usuário exige provas de que as decisões de design</p><p>21</p><p>são eficazes. Se o DCU for usado corretamente, a aplicação desenvolvida terá como</p><p>resultado usuários ativamente engajados.</p><p>O termo Design Centrado no Usuário (DCU) foi originado no laboratório de pesquisa de</p><p>Donald Norman, situado na Universidade de San Diego na Califórnia durante os anos</p><p>80, e foi difundido após o lançamento do livro no qual Norman participou como co-autor</p><p>intitulado “User Center System Design: new perspectives on Human-Computer</p><p>Interaction” (Norman & Draper, 1986).</p><p>No livro “The Psychology Of Everyday Things” (1988), “Design do Dia-a-Dia” (2006) em</p><p>sua versão brasileira, Norman se aprofunda ainda mais na conceitualização do Design</p><p>Centrado no Usuário e reconhece a importância das necessidades e os interesses do</p><p>mesmo. Ele oferece quatro sugestões básicas de como o Design deve ser:</p><p>- Torne fácil determinar quais ações são possíveis a qualquer momento.</p><p>- Torne as coisas visíveis, incluindo o modelo conceitual do sistema, as ações</p><p>alternativas e o resultado das ações.</p><p>- Torne fácil de avaliar o estado atual do sistema.</p><p>- Siga os mapeamentos naturais entre a intenção e a ação requerida; entre a ação</p><p>e o efeito resultante; e entre a informação visível e a interpretação do estado</p><p>atual.</p><p>Essas recomendações inserem o usuário no centro do design. O papel do designer é</p><p>facilitar a tarefa pro usuário e certificar que o usuário vá ser capaz de fazer uso do</p><p>produto como o pretendido e com o mínimo de esforço para aprender a usá-lo.</p><p>(ABRAS, MALONEY-KRICHMAR e PREECE, 2004)</p><p>O Quadro 01 apresenta vantagens e desvantagens do Design centrado no usuário</p><p>segundo ABRAS, MALONEY-KRICHMAR e PREECE, 2004.</p><p>22</p><p>Quadro 01 - Vantagens e Desvantagens do Design Centrado no Usuário</p><p>Vantagens Desvantagens</p><p>Produtos são mais eficientes, efetivos e</p><p>seguros</p><p>É mais caro</p><p>Auxiliam em gerenciar as expectativas dos</p><p>usuários e os níveis de satisfação com o</p><p>produto</p><p>Demanda mais tempo</p><p>Usuários desenvolvem um senso de</p><p>propriedade sobre o produto</p><p>Pode ser que necessite do envolvimento de</p><p>membros adicionais do time de design. (por</p><p>exemplo, etnógrafos e experts em</p><p>usabilidade) e uma vasta gama de</p><p>stakeholders</p><p>Produtos requerem menos redesign e se</p><p>integram ao ambiente com mais rapidez</p><p>Pode ser difícil de traduzir alguns tipos de</p><p>informações para o design</p><p>O processo colaborativo gera soluções de</p><p>design mais criativas para os problemas</p><p>O produto pode ser muito específico para um</p><p>uso mais geral, portanto, não facilmente</p><p>transferível para outros clientes; portanto</p><p>mais caro</p><p>Fonte: ABRAS, MALONEY-KRICHMAR e PREECE, 2004</p><p>Neste capítulo vale também ressaltar as diferenças entre o Design Centrado no</p><p>Usuário e o conceito de Design Participativo, que apesar de semelhantes não são a</p><p>mesma coisa, mas as similaridades podem acabar por confundir os mais desavisados.</p><p>SANTA ROSA E MORAES (2012) colocam que uma das principais diferenças entre as</p><p>abordagens é que no Design Participativo o envolvimento dos usuários vai muito além</p><p>da experimentação, teste de alternativas de design ou da aplicação de entrevistas e</p><p>métodos qualitativos. No Design Participativo, os usuários podem participar do projeto</p><p>de design como se fossem membros da equipe. Em resumo, no design participativo os</p><p>usuários são em essência co-designers. (ABRAS, MALONEY-KRICHMAR e PREECE,</p><p>2004.)</p><p>23</p><p>3.2. DESIGN DE INTERAÇÃO</p><p>O design de interação se faz a cada dia mais imprescindível por se tratar de uma</p><p>disciplina multidisciplinar que supre a necessidade cada vez mais crescente de atender</p><p>as demandas de diversos tipos de mídias interativas. É necessário, portanto, que uma</p><p>gama de profissionais estejam envolvidos no processo, tais como psicólogos,</p><p>sociólogos, além de designers de produto, fotógrafos e afins, por exemplo. Essa</p><p>multidisciplinaridade é essencial para entender ações e reações dos usuários e criar</p><p>uma experiência prazerosa e eficaz.</p><p>Entende-se que a interação é um processo onde o usuário se comunica com um</p><p>artefato a partir de uma interface, e um dos fatores mais importantes para a elaboração</p><p>de uma boa interface digital é a arquitetura de informação, pois é ela que vai</p><p>determinar a disposição dos conteúdos e a forma que o usuário irá navegar. O arquiteto</p><p>Richard Saul Wurman (1997) entendia a arquitetura de informação a partir de analogias</p><p>à arquitetura de edifícios onde o projetista deve cumprir a função de servir as</p><p>necessidades de seus ocupantes. Se formos pensar a partir dessa perspectiva, a</p><p>principal função do designer ao estruturar uma interface interativa é colocar o usuário</p><p>no centro e servir as suas necessidades</p><p>Segundo Preece (2013) o processo de design de interação envolve quatro atividades</p><p>básicas em sua essência: a identificação e o estabelecimento de requisitos, o</p><p>desenvolvimento de designs alternativos que preencham esses requisitos, a construção</p><p>de versões alternativas e a avaliação do que está sendo construído durante o</p><p>processo. Preece, Rogers e Sharp (2005) destacam a importância de que o produto</p><p>deve se manter constantemente em avaliação. Repetir essas atividades dá um retorno</p><p>constante de quais requisitos podem estar faltando e quais mudanças podem ser feitas.</p><p>E ainda segundo Preece, Rogers e Sharp (2005) esse é o centro do design de</p><p>interação, pois assim assegura-se que o produto se mantenha usável.</p><p>24</p><p>3.3. USABILIDADE</p><p>Segundo os autores Cybis, Betiol e Faust a usabilidade é uma exigência para o</p><p>desempenho do usuário nas atividades que ele realiza por meio de um dispositivo</p><p>interativo. A qualidade do uso de um sistema requer medidas para uma boa</p><p>usabilidade. A norma ISO 9242111 define essas medidas como:</p><p>- Eficácia: É medida pela quantidade e pela qualidade dos objetivos alcançados</p><p>pelo usuário em uma atividade com um sistema.</p><p>- Eficiência: É medida pela quantidade de recursos (por exemplo, tempo, esforço</p><p>físico e cognitivo) empregados pelo usuário para a obtenção dos objetivos em</p><p>sua atividade com o sistema.</p><p>- Satisfação: É a medida do contentamento subjetivo dos usuários com o uso do</p><p>sistema.</p><p>Quadro 02 - Exemplos de Atributos de Usuário, tarefas e sistema a serem</p><p>considerados na coleta de dados e análise visando ao desenvolvimento</p><p>de interfaces</p><p>com o usuário.</p><p>Usuários Tarefas atuais Sistema atual</p><p>Habilidades e</p><p>conhecimentos</p><p>● Habilidade/conhecime</p><p>nto do produto</p><p>● Habilidade/conhecime</p><p>nto do sistema</p><p>● Experiência na tarefa</p><p>● Experiência na</p><p>organização</p><p>● Nível de treinamento</p><p>● Habilidades nos</p><p>dispositivos de</p><p>entrada (teclado e</p><p>mouse)</p><p>● Qualificações</p><p>● Habilidades de</p><p>linguagem</p><p>● Conhecimento geral</p><p>Estrutura da tarefa</p><p>● Nome da tarefa</p><p>● Frequência de</p><p>realização/Duração</p><p>da tarefa</p><p>● Frequência de</p><p>eventos</p><p>● Flexibilidade da tarefa</p><p>● Demanda física e</p><p>mental</p><p>● Dependências de</p><p>outras tarefas</p><p>● Resultado da tarefa</p><p>● Risco resultante de</p><p>erro</p><p>● Demandas essenciais</p><p>de segurança</p><p>Descrição de base</p><p>● Indentificação e</p><p>descrição</p><p>● Principais áreas de</p><p>aplicação</p><p>● Funções principais</p><p>Especificações</p><p>● Equipamento</p><p>● Software</p><p>● Documentos</p><p>● Serviços</p><p>● Outros itens</p><p>25</p><p>Atributos pessoais</p><p>● Faixa etária</p><p>● Sexo predominante</p><p>● Capacidades e</p><p>incapacidades físicas</p><p>● Capacidades e</p><p>incapacidades</p><p>intelectuais</p><p>● Atitude</p><p>● Motivação</p><p>Fonte: norma ISO 924111 (2011)</p><p>Um problema de usabilidade pode ser visto como uma perturbação na produtividade</p><p>das interações entre um sistema e um usuário que busca adaptar-se a sua falta de</p><p>ergonomia. Este tipo de problema se faz sentir tanto sobre a atividade como sobre o</p><p>usuário. Do ponto de vista do usuário, o problema tomará a forma de um</p><p>aborrecimento, de um constrangimento temporário ou mesmo de um trauma de mais</p><p>longo efeito.</p><p>Além de afetar os usuários, problemas de usabilidade também geram prejuízos para a</p><p>empresa que está desenvolvendo o artefato, um sistema difícil de usar pode implicar</p><p>em erros e na perda de tempo, levando muitos usuários a desistir de utilizar o produto,</p><p>gerando perda financeira.</p><p>Outra característica importante a ser considerada em termos de usabilidade ao se</p><p>pensar em um projeto é que uma mesma interface pode gerar uma interação</p><p>satisfatória para um tipo de usuário enquanto um outro usuário pode ter dificuldades</p><p>com a mesma. Isso pode acontecer devido a diversos fatores, por exemplo, se um</p><p>usuário tem experiência com um determinado sistema e o outro não. Por isso, é</p><p>importante que o projetista saiba como é a estrutura dos processos cognitivos humanos</p><p>e ter ciência que os usuários se diferem em níveis de inteligência, estilos cognitivos e</p><p>personalidade. (CYBIS, BETIOL, FAUST, 2010)</p><p>26</p><p>Jon Yablonski, em seu livro “Leis da Psicologia Aplicadas a UX (2020)”, nos apresenta</p><p>ao conceito de “modelos mentais”, que consiste em como a mente do ser humano cria</p><p>um modelo do funcionamento de um sistema e aplica esse modelo a novas situações</p><p>onde se depara com sistemas semelhantes. Seguindo essa linha de raciocínio, uma</p><p>boa experiência para um usuário é quando a usabilidade do produto está alinhada com</p><p>o modelo mental pré concebido. Para que isso se torne concreto, se faz necessária a</p><p>aplicação de diversos métodos como entrevistas, personas e mapas, para que seja</p><p>obtida uma visão mais ampla e que vá beneficiar uma gama maior de usuários.</p><p>O especialista em usabilidade Jakob Nielsen (2000) observou que os usuários têm uma</p><p>tendência de desenvolver certa expectativa sobre o design com base em suas</p><p>experiências anteriores. Essa observação é comumente conhecida como “Lei de</p><p>Jakob” (ou “Lei de Jakob da experiência de usuário na Internet”). A partir dela, ele</p><p>incentiva que os designers sigam convenções comuns, já que se os usuários não</p><p>estiverem familiarizados com o que estão usando, podem ficar frustrados, confusos e</p><p>com maior chance de não dar continuidade ao uso do artefato digital. Já se o projeto</p><p>partir de um pressuposto da ideia de como as coisas devem funcionar, os usuários</p><p>poderão se concentrar mais no conteúdo, no produto ou na mensagem do site, devido</p><p>a familiaridade previamente adquirida com os aspectos da interface.</p><p>Nielsen, no seu livro Usability Engineering (1993), também foi responsável pela</p><p>proposição de dez qualidades essenciais no desenvolvimento de qualquer interface,</p><p>qualidades essas que o mesmo chamou de "Heurísticas de Usabilidade”, que são elas:</p><p>Visibilidade do estado do sistema; Mapeamento entre o sistema e o mundo real;</p><p>Liberdade e controle ao usuário; Consistência e Padrões; Prevenção de Erros;</p><p>Reconhecer em vez de relembrar; Flexibilidade e Eficiência de Uso; Design Estético e</p><p>Minimalista; Suporte para o usuário reconhecer, diagnosticar e recuperar erros; Ajuda e</p><p>documentação.</p><p>27</p><p>Essas diretrizes visam reduzir a carga cognitiva do usuário, fazendo com que ele utilize</p><p>o sistema de forma mais intuitiva, eficaz, eficiente e satisfatória, que são também</p><p>qualidades definidas pela norma ISO 9242111.</p><p>Quadro 03 - Heuristicas de Nielsen</p><p># Heurística Abreviação Notas</p><p>1 Visibilidade do status</p><p>do sistema</p><p>Visibilidade ● O site mantém o usuário</p><p>informado sobre o que está</p><p>acontecendo de maneira</p><p>construtiva, apropriada e</p><p>com feedback simultâneo.</p><p>2 Correspondência</p><p>entre o sistema e o</p><p>mundo real</p><p>Correspondência ● O uso da linguagem, tais</p><p>como termos, frases,</p><p>símbolos e conceitos são</p><p>similares com os que são</p><p>usados pelo usuário no seu</p><p>ambiente do dia-a-dia</p><p>● Informações são arranjadas</p><p>em ordem natural e lógica</p><p>3 Controle do usuário</p><p>e liberdade</p><p>Controle ● O usuário controla o sistema</p><p>● O usuário pode sair do</p><p>sistema a qualquer momento</p><p>mesmo quando houver</p><p>cometido algum erro</p><p>● Há recursos para refazer e</p><p>desfazer ações</p><p>4 Consistência e</p><p>adesão a padrões</p><p>Consistência ● Conceitos, palavras,</p><p>símbolos, situações ou</p><p>ações sempre se referem a</p><p>mesma coisa</p><p>● São seguidos padrões</p><p>comuns da plataforma</p><p>5 Prevenção de erros,</p><p>especificamente</p><p>prevenção de erros</p><p>relacionados a</p><p>usabilidade</p><p>Erro ● O sistema é criado de tal</p><p>maneira que os usuários não</p><p>conseguem cometer erros de</p><p>usabilidade facilmente</p><p>● Quando o usuário comete</p><p>um erro, o sistema mostra</p><p>28</p><p>uma mensagem de erro</p><p>apropriada</p><p>6 Reconhecimento no</p><p>lugar de memorizar</p><p>Reconhecimento ● Objetos a serem</p><p>manipulados, opções para</p><p>seleção e ações a serem</p><p>tomadas são visíveis</p><p>● O usuário não precisa</p><p>memorizar informações de</p><p>uma parte do sistema para</p><p>outra</p><p>● Instruções em como usar o</p><p>sistema são visíveis e</p><p>facilmente encontradas</p><p>quando necessário</p><p>7 Flexibilidade e</p><p>eficiência de uso</p><p>Flexibilidade ● O site atende a usuários em</p><p>diferentes níveis, de</p><p>iniciantes a experts</p><p>● Atalhos e aceleradores,</p><p>invisíveis para o usuário</p><p>inexperiente, são</p><p>providenciados para acelerar</p><p>a interação e o cumprimento</p><p>de tarefas por usuários mais</p><p>experientes</p><p>8 Estética e design</p><p>minimalista</p><p>Estética ● A estrutura do site não</p><p>contém informações</p><p>irrelevantes ou pouco</p><p>usadas, as quais poderiam</p><p>distrair o usuário enquanto</p><p>ele completa tarefas</p><p>● Displays são simples e</p><p>páginas com múltiplos</p><p>displays são minímas</p><p>9 Reconhecimento,</p><p>diagnóstico e</p><p>recuperação de</p><p>erros</p><p>Recuperação ● Mensagens de erro são</p><p>expressas em linguagem</p><p>simples</p><p>● Mensagens de erro indicam</p><p>precisamente o que é o</p><p>problema e dá instruções</p><p>rápidas, simples,</p><p>construtivas e específicas</p><p>para a recuperação</p><p>29</p><p>10 Ajuda e</p><p>documentação</p><p>Ajuda ● O sistema tem uma área de</p><p>ajuda e outras</p><p>documentações para dar</p><p>suporte às necessidades do</p><p>usuário</p><p>● As informações nesses</p><p>documentos são fáceis de</p><p>procurar, focadas na tarefa</p><p>do usuário, e lista passos</p><p>concretos para a realização</p><p>de uma tarefa</p><p>Fonte: NIELSEN, Jakob (1993)</p><p>A partir de todas as diretrizes e convenções supracitadas é possível para o designer</p><p>criar um artefato agradável e funcional sem deixar de lado o envolvimento do usuário</p><p>durante o desenvolvimento. Pois só com testagem e o envolvimento constante e</p><p>adequado do usuário é que será provado que a interface satisfaz os requisitos de</p><p>usabilidade e poderá ser liberada para implementação. (CYBIS, BETIOL, FAUST, 2010)</p><p>3.4. USABILIDADE NA INTERAÇÃO MÓVEL</p><p>Levando em consideração que o objetivo deste trabalho é o desenvolvimento de uma</p><p>interface mobile, é importante enfatizar a aplicação específica dos conceitos de</p><p>usabilidade na interação móvel. Hiltunen (2002), define a experiência do usuário de um</p><p>artefato mobile a partir de cinco fatores:</p><p>Utilidade, que diz respeito às vantagens</p><p>oferecidas ao usuário em relação a outros serviços ou outros meios de realizar a</p><p>mesma tarefa proposta; Usabilidade, a interação do usuário com o artefato deve ser</p><p>eficaz e eficiente para que o mesmo consiga cumprir com seu objetivo dentro do</p><p>sistema; Disponibilidade do sistema, por se tratar de um dispositivo que está sempre</p><p>com o usuário, o projetista deve considerar fatores como falta de disponibilidade de</p><p>conexão com a internet em certos momentos, o que não pode acarretar em perda de</p><p>informações para o usuário, por exemplo; Estética, a aplicação deve ser atrativa e</p><p>esteticamente agradável; Processo offline, o usuário deve confiar no serviço e em</p><p>30</p><p>quem o fornece, deve contar com a segurança dos seus dados e com um suporte ágil e</p><p>eficiente.</p><p>Figura 02 - Fatores que definem a experiência do usuário de um artefato mobile</p><p>segundo Hiltunen (2002).</p><p>Fonte: Hiltunen (2002)</p><p>Norman (2004) enfatiza que um usuário de um dispositivo mobile geralmente está</p><p>envolvido em diversas tarefas simultaneamente ao uso do computador de mão. Assim,</p><p>sua atenção fica dividida entre o uso do equipamento e outras atividades que possa</p><p>estar realizando. Muitas vezes o foco principal do usuário não é a interação com o</p><p>equipamento, mas a busca de informação enquanto interage com o ambiente à sua</p><p>volta. Como é o caso da proposta do aplicativo a ser desenvolvido nesse trabalho, que</p><p>visa possibilitar ao usuário obter informações sobre o Carnaval de Rua da cidade de</p><p>Natal. Por isso, é de extrema importância que as aplicações desenvolvidas para</p><p>aparelhos móveis sejam eficazes, eficientes e que permitam ao usuário retomar a</p><p>interação do ponto onde parou, caso sua ação seja interrompida por fatores externos.</p><p>3.5. ACESSIBILIDADE</p><p>A Internet hoje em dia é onipresente no cotidiano do ser humano, muitas das nossas</p><p>atividades diárias envolvem a utilização da web seja por meio de um dispositivo</p><p>desktop ou através de interações móveis. Das tarefas mais essenciais como pedir um</p><p>31</p><p>almoço, checar o saldo bancário a tarefas mais simples como engajar em redes sociais</p><p>ou trocas de mensagens instantâneas. Fato é que é quase impossível dissociar as</p><p>atividades do dia a dia da utilização da internet. Partindo disso, é essencial que</p><p>qualquer aplicação desenvolvida seja acessível para todos, independente das suas</p><p>limitações.</p><p>Para que isso seja possível, é recomendado que o projetista siga algumas diretrizes</p><p>que venham a tornar o conteúdo a ser apresentado acessível para um maior número</p><p>de pessoas, dentre elas pessoas com deficiências visuais, auditivas, que possuam</p><p>limitações de movimento, cognitivas dentre outras características. Essas diretrizes</p><p>foram concebidas pela W3C, um consórcio internacional que possui como finalidade</p><p>estabelecer padrões para criação e interpretação de conteúdos na web. Elas são</p><p>conhecidas pela sigla WCAG21 ou Diretrizes de Acessibilidade para Conteúdo Web</p><p>2.1.</p><p>No desenvolvimento deste projeto, serão elencadas algumas dessas diretrizes</p><p>essenciais para que o usuário consiga se localizar dentro do aplicativo e usufruir da</p><p>melhor maneira possível do seu conteúdo.</p><p>3.5.1. ALTERNATIVAS EM TEXTO</p><p>A diretriz 1.1 presente no WCAG21 se refere a alternativas textuais que possam</p><p>equivaler a elementos não-textuais presentes no aplicativo web. De acordo com essa</p><p>regra, todos os elementos que não contenham texto devem dispor de uma alternativa</p><p>textual. Essa alternativa deve servir de descrição do que está sendo apresentado.</p><p>O primeiro critério apresentado para o sucesso dessa diretriz (critério 1.1.1 - Conteúdo</p><p>Não-Textual) coloca que todo o conteúdo Não-Textual como padrões, emoticons e</p><p>imagens que representem textos, devem possuir uma alternativa textual equivalente.</p><p>Essas alternativas podem ser um nome descrevendo sua finalidade, identificação</p><p>descritiva do conteúdo apresentado. Já se o conteúdo for meramente decorativo e sem</p><p>32</p><p>influência no entendimento do conteúdo, o mesmo deve ser apresentado de tal forma a</p><p>ser ignorado pela tecnologia assistiva utilizada pelo usuário.</p><p>3.5.2. MÍDIAS COM BASE DE TEMPO</p><p>Essa diretriz diz respeito à elaboração de alternativas para mídias não-estáticas, que</p><p>são baseadas em tempo, como áudios e vídeos. Nesses casos, a WCAG21 elenca os</p><p>critérios de sucesso tais como legendas, se o elemento em questão for áudio</p><p>pré-gravado com mídia sincronizada ou audiodescrição quando o conteúdo for vídeo</p><p>pré-gravado.</p><p>3.5.3. ADAPTÁVEL</p><p>O conteúdo deve possibilitar ser apresentado de diferentes maneiras sem que se perca</p><p>informação ou haja um déficit na estrutura. Isso é importante na criação de um layout</p><p>simplificado, por exemplo, que vá facilitar a leitura para pessoas de baixa visão. Os</p><p>critérios de sucesso atribuídos a essa diretriz incluem recomendações para que as</p><p>instruções de utilização não dependam somente de características sensoriais como</p><p>forma, cores, tamanhos, sons ou localização visual. Se é recomendado também que o</p><p>fator da cor não seja o único meio visual para transmissão de informações ou indicativo</p><p>de ação. São essenciais também a utilização de uma relação de contraste de no</p><p>mínimo 4:5:1 em textos e imagens de texto, exceto em textos ampliados que já</p><p>possuam uma relação de contraste de no mínimo 3:1, textos em planos secundários</p><p>que estejam cumprindo função meramente decorativa e que não vá afetar na jornada</p><p>do usuário em direção ao objetivo da aplicação ou logotipos ou marcas comerciais, pois</p><p>os mesmos não possuem requisito mínimo de contraste. A funcionalidade de</p><p>redimensionar texto também deve estar disponível em até 200% sem que haja perda</p><p>no conteúdo.</p><p>Outro item importante a ser pensado no desenvolvimento de uma aplicação adaptável</p><p>é o espaçamento do texto. De acordo com as diretrizes WCAG21 a altura da linha</p><p>33</p><p>(espaçamento entre as linhas) deve ser de pelo menos 1,5 vezes o tamanho da fonte</p><p>utilizada. O espaçamento entre os parágrafos deve ser de 2 vezes o tamanho da fonte.</p><p>Já o espaçamento de letras (rastreamento) e de palavras deve ser de 0,12 e 0,16</p><p>vezes o tamanho da fonte, respectivamente.</p><p>3.5.4. COMPATÍVEL</p><p>A aplicação deve ser capaz de ser interpretada de forma eficaz por uma ampla</p><p>variedade de agentes de usuário, incluindo tecnologias assistivas. Por exemplo, todos</p><p>os componentes da interface devem possuir nome e função determinadas por meio de</p><p>códigos de programação.</p><p>34</p><p>4. MÉTODOS E TÉCNICAS</p><p>Neste capítulo serão apresentadas as conceituações dos métodos e técnicas que</p><p>serão utilizadas no desenvolvimento do presente projeto.</p><p>4.1. ANÁLISE DE SIMILARES</p><p>A análise de similares, também conhecida como análise comparativa, possui como</p><p>objetivo avaliar outros produtos com propósito similar ao projeto em desenvolvimento</p><p>para que possam ser identificados pontos positivos e negativos e a partir dessa</p><p>avaliação elencar as características desejáveis a serem inseridas na aplicação, tais</p><p>como características a serem evitadas.</p><p>Nielsen (1993) conceitualiza que a análise comparativa, ou análise de similares,</p><p>possibilita a geração de novas ideias e de recomendações a partir da observação,</p><p>fornecendo material para que os desenvolvedores superem a concorrência em relação</p><p>às soluções de design.</p><p>Os aplicativos escolhidos para a realização dessa análise para o presente projeto</p><p>foram a) Blocos de Rua.com b) Carnaval do Rio - 2020 c) Blocos da Folia 2019.</p><p>4.1.1. BLOCOS DE RUA.COM</p><p>O Blocos de Rua.com é uma aplicação desenvolvida pela startup mexeri.ca e se</p><p>autodenomina a maior plataforma de conteúdo sobre carnaval do Brasil. Dispõe de</p><p>acesso a partir de um site e de um aplicativo móvel, ambos contendo informações dos</p><p>festejos de Carnaval de 10 cidades brasileiras, sendo elas: São Paulo, Rio de Janeiro,</p><p>Belo Horizonte, Salvador, Florianópolis, Recife, Olinda, Brasília, Porto Alegre e</p><p>Fortaleza. Tanto o aplicativo como o site são gratuitos e o usuário pode realizar o</p><p>download através da Play Store (Android) ou na App Store (iOS).</p><p>35</p><p>A tela inicial da aplicação</p><p>dá ao usuário a possibilidade de escolher de qual cidade ele</p><p>pretende visualizar as informações. As alternativas são apresentadas no formato radio</p><p>button, onde o usuário deverá selecionar apenas uma opção para que consiga acessar</p><p>o aplicativo com os dados da cidade escolhida (figura 2).</p><p>Figura 03 - Tela Inicial</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>Após selecionar a cidade desejada o usuário é direcionado para a Home (Figura 3),</p><p>que contém um cabeçalho com o logotipo do aplicativo, um ícone de menu no formato</p><p>hamburguer, uma segunda seção indicando qual a cidade selecionada e que dá ao</p><p>usuário a possibilidade de trocar a cidade se assim desejar, uma seção com uma</p><p>36</p><p>notícia principal (não há clareza sobre os critérios adotados para a seleção da notícia a</p><p>ser exibida no topo). Logo abaixo se encontra a programação com a indicação da data</p><p>e uma área clicável contendo as informações sobre o evento programado para a</p><p>mesma, juntamente com a localidade onde o evento acontecerá. Se o usuário continuar</p><p>no rolamento da página, encontrará a opção de “Veja Mais Programação” (Figura 4),</p><p>mais notícias cadastradas e a opção de “Ver Mais Notícias” (Figura 4).</p><p>Figura 04 - Home</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>37</p><p>Figura 05 - Telas de “Veja Mais Programação” e “Ver Mais Notícias”</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>Ao clicar no ícone do menu presente no topo direito da página, o usuário é apresentado</p><p>a cinco opções: a opção de retornar a home, de visualizar a programação, de visualizar</p><p>a seção de notícias, de ir para a área com informações sobre os blocos ou para a área</p><p>“minha agenda” (Figura 5).</p><p>38</p><p>Figura 06 - Menu</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>Na seção “programação” estão presentes os dados sobre a programação do carnaval</p><p>na cidade escolhida, mas neste momento, diferentemente da seção exibida na página</p><p>inicial, também é fornecida ao usuário a opção de filtrar os dados a fim de serem</p><p>mostrados de acordo com o bairro e datas desejadas, também há a possibilidade da</p><p>pesquisa por informações de um Bloco específico (Figura 6).</p><p>39</p><p>Figura 07 - Funções “Programação” e de filtro.</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>Ao clicar em notícias no menu superior direito, todas as notícias são mostradas em</p><p>ordem cronológica decrescente, da notícia mais atual até a mais antiga (Figura 7)</p><p>40</p><p>Figura 08 - Função de Notícias</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>Ao optar pela seção de Blocos, é fornecida uma lista dos blocos cadastrados na cidade</p><p>(Figura 8). E ao clicar no bloco desejado são apresentadas suas informações (que</p><p>parecem ser cadastradas pelos próprios responsáveis pelo bloco), como origem e</p><p>localidade, sem obrigatoriedade aparente do nível das informações apresentadas, com</p><p>alguns blocos inclusive sem nenhuma informação cadastrada. Há também uma área</p><p>contendo as próximas datas de saída dos blocos nas ruas (Figura 8).</p><p>41</p><p>Figura 09 - Blocos e Informações</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>A função que aparenta ser a mais essencial na utilização da aplicação é a de Minha</p><p>Agenda, que possibilita ao usuário selecionar as atividades carnavalescas nas quais</p><p>deseja comparecer e salvar dentro do aplicativo, mantendo uma organização e se</p><p>guiando através da programação.</p><p>42</p><p>Figura 10 - Função de “Minha Agenda” e informações sobre o evento</p><p>Fonte: PrintScreen do Aplicativo Blocos de Rua.com</p><p>Nessa área são mostradas as atividades que o usuário salvou nas seções onde é</p><p>apresentada a programação no geral. Que dispõe das informações sobre o evento, tais</p><p>como uma descrição, horários, endereço, preços e até mesmo compartilhamento</p><p>externo via Whatsapp. A partir dela o usuário pode visualizar as festividades das quais</p><p>pretende participar (Figura 9).</p><p>43</p><p>Pontos favoráveis: O aplicativo é atualizado e mantém uma gama diversa de</p><p>atividades carnavalescas. Possui muitos blocos cadastrados e informações sobre eles,</p><p>o que serve de auxílio ao folião mesmo se ele não optar por criar uma agenda</p><p>individual personalizada. Dispõe de recursos centralizados para o acesso as áreas.</p><p>Pontos desfavoráveis: É visualmente pesado, não possui uma arquitetura</p><p>informacional bem definida. Ao acessar seções internas presentes no menu não</p><p>permite que o usuário volte a partir da tecla de voltar do dispositivo móvel, somente</p><p>clicando novamente no ícone do menu e selecionando Home. A agenda individual não</p><p>dispõe de um calendário para melhor visualização das datas e os elementos são</p><p>dispostos em tamanhos desproporcionais e com cores de baixo contraste.</p><p>4.1.2. CARNAVAL DO RIO - 2020</p><p>Esse aplicativo foi desenvolvido em conjunto com a cervejaria Brahma e o Governo do</p><p>Estado do Rio de Janeiro. Ele está disponível tanto para o sistema Android como para</p><p>o iOs. Na página de download os desenvolvedores o descrevem como um produto</p><p>criado para facilitar a vida dos foliões e para que eles não percam nenhum momento do</p><p>maior carnaval do planeta.</p><p>A primeira tela (Figura 10) que é mostrada ao acessar o aplicativo é um menu com as</p><p>opções disponibilizadas: Programação, onde o folião tem acesso a toda a programação</p><p>do carnaval do Rio de Janeiro; Mapa, que permite a visualização da localização dos</p><p>blocos e festividades através de pontos marcados em um mapa da cidade; Minha</p><p>Agenda, onde o usuário tem a opção de personalizar as atividades de seu interesse</p><p>dentro da festa; Selfie, recurso que possibilita que o usuário registre o momento com a</p><p>câmera dentro do aplicativo, adicionando filtros carnavalescos; Blocos, onde se</p><p>concentram as informações sobre os blocos disponibilizadas em ordem alfabética e</p><p>com a opção de selecionar apenas blocos infantis. Utilidade, seção onde se encontram</p><p>informações relevantes a serem usadas em caso de emergência, como telefone de</p><p>serviços de saúde, delegacias, aeroportos e informações turísticas.</p><p>44</p><p>Figura 11 - Tela Inicial</p><p>Fonte: Print Screen do aplicativo Carnaval do Rio - 2020</p><p>Ao clicar no item 1 - programação, o usuário é direcionado para uma tela onde se</p><p>encontram as informações sobre todos os blocos cadastrados, divididos inicialmente</p><p>por data e ordem de horário e com um campo para busca por bairro ou atração (Figura</p><p>11). Há também as possibilidades de filtrar apenas por polos, por uma data específica</p><p>(Figura 12) e outros filtros mais afunilados como quantidade de pessoas e turno (Figura</p><p>13).</p><p>45</p><p>Figura 12 - Tela de Programação</p><p>Fonte: Print Screen do aplicativo Carnaval do Rio - 2020</p><p>46</p><p>Figura 13 - Telas de Busca por Programação e por Polos</p><p>Fonte: Print Screen do aplicativo Carnaval do Rio - 2020</p><p>47</p><p>Figura 14 - Tela de Filtros da Programação</p><p>Fonte: Print Screen do aplicativo Carnaval do Rio - 2020</p><p>Os demais recursos presentes no aplicativo necessitam de um cadastro para serem</p><p>acessados, mas ao tentar realizar tal tarefa é-se informado que o app está inativo</p><p>(Figura 14).</p><p>48</p><p>Figura 15 - Tela de Login e de Mensagem Externa de inatividade</p><p>Fonte: Print Screen do aplicativo Carnaval do Rio - 2020</p><p>Pontos favoráveis: É dada ao usuário diversas possibilidades de filtrar a informação</p><p>que ele deseja, como buscar apenas por horário, região, quantitativo de público ou polo</p><p>de atividades. A opção de busca por mapas também facilita bastante na hora da</p><p>visualização dos locais das atividades. É um aplicativo intuitivo que possui uma</p><p>arquitetura de informação bem definida. Não é necessário login para acessar a maioria</p><p>das áreas.</p><p>49</p><p>Pontos desfavoráveis: Só é atualizado durante o período carnavalesco e algumas</p><p>áreas só podem ser acessadas com login, este que só pode ser realizado caso o</p><p>aplicativo esteja atualizado, ou seja, somente durante o carnaval. Não existe um</p><p>refinamento da interface para a utilização por parte de pessoas com deficiência. Os</p><p>botões do início, por exemplo, não são bem delimitados sendo apenas em texto em</p><p>fonte bastante fina que não possibilita boa leitura ou área clicável adequada para</p><p>possíveis usuários</p><p>problemas de coordenação motora.</p><p>4.1.3. BLOCOS DA FOLIA - 2019</p><p>Esse aplicativo tem como função disponibilizar a programação do carnaval de São</p><p>Paulo do ano de 2019. O primeiro acesso do usuário já o leva para uma página que</p><p>contém as informações sobre a programação, não existe tela de onboarding ou menu</p><p>inicial (Figura 15). Nessa tela já estão dispostos todos os blocos presentes na</p><p>programação do carnaval e três abas superiores que levam ao mapa e a uma área</p><p>intitulada “sobre”.</p><p>50</p><p>Figura 16 - Tela Inicial</p><p>Fonte: Print Screen do aplicativo Blocos da Folia 2019</p><p>Ao clicar em um dos blocos o usuário é levado para uma tela com informações sobre a</p><p>atividade escolhida, na qual ele consegue visualizar um mapa de onde a atividade irá</p><p>acontecer, uma opção de “como chegar”, de compartilhar a atividade e de pesquisar</p><p>sobre a mesma na internet. Além de um texto descritivo da atividade, de uma</p><p>estimativa de público, data, horário e classificação indicativa. (FIgura 16)</p><p>51</p><p>Figura 17 - Tela com descrição de atividade</p><p>Fonte: Print Screen do aplicativo Blocos da Folia 2019</p><p>52</p><p>Figura 18 - Telas de Filtro por data e lugar</p><p>Fonte: Print Screen do aplicativo Blocos da Folia 2019</p><p>Pontos favoráveis: Possui layout simples, é disponibilizado um mapa mostrando onde</p><p>a atividade irá ocorrer, além da classificação indicativa e da estimativa de público.</p><p>Pontos desfavoráveis: Não dispõe de outros recursos além da programação em si. O</p><p>mapa não pode ser acessado offline.</p><p>53</p><p>4.1.4. CONCLUSÕES A PARTIR DA ANÁLISE DE SIMILARES</p><p>Pode-se ser percebido algumas funções essenciais e comuns aos três aplicativos</p><p>analisados, como a função da agenda individual, por exemplo. É necessário que o</p><p>folião tenha acesso a uma agenda a qual ele possa ter liberdade para atualizar e</p><p>personalizar de acordo com as festividades as quais pretende comparecer. Para tal,</p><p>observou-se que é de suma importância que o aplicativo apresente as informações</p><p>atualizadas da grade de programação além de disponibilizar horários, classificação</p><p>indicativa, estimativa de público e um mapa situando a localidade da atração.</p><p>O Carnaval é uma festividade que acontece majoritariamente em locais abertos, com</p><p>grande parte das atividades promovidas pelo poder público e como foi observado nos</p><p>aplicativos analisados há a necessidade que a agenda individual esteja disponível</p><p>offline e que o folião tenha acesso a programação caso não tenha acesso a internet.</p><p>Outro ponto importante identificado através do método de análise de similares é a</p><p>presença do mapa informando a localidade onde a atividade ocorrerá. Blocos de</p><p>Carnaval são muito populares e em sua maioria possuem trajetos pré-definidos de um</p><p>lugar a outro, portanto seria relevante que houvesse, além de um mapa disponível</p><p>offline, um mapa que já mostrasse de antemão o trajeto ao usuário.</p><p>Quadro 04 - Quadro com Levantamento da Análise de Similares</p><p>Aplicativo Funcionalidades</p><p>Blocos de Rua.com ● Possibilidade de escolher entre</p><p>cidades disponíveis</p><p>● Notícias do Carnaval</p><p>● Programação</p><p>● Agenda Personalizada</p><p>● Informações sobre as atividades</p><p>● Filtro por data e localidade</p><p>● Listagem de Blocos Cadastrados</p><p>Carnaval do Rio - 2020 ● Programação</p><p>● Mapa</p><p>● Agenda Personalizada</p><p>54</p><p>● Selfie</p><p>○ Listagem de Blocos</p><p>Cadastrados</p><p>● Telefones de Emergência</p><p>● Filtro por data, localidade, quantidade</p><p>de pessoas e tipo de público</p><p>Blocos da Folia - 2019 ● Programação</p><p>● Mapa</p><p>● Listagem de Blocos Cadastrados</p><p>● Filtro por data e localidade</p><p>Fonte: Autor(a)</p><p>4.1.5. LISTA DE CONTEÚDO A PARTIR DOS RESULTADOS DA ANÁLISE DE</p><p>SIMILARES</p><p>● Agenda Individual Personalizável: O usuário terá a possibilidade de criar sua</p><p>própria agenda personalizada escolhendo na listagem de atividades dentro da</p><p>programação cadastrada no aplicativo.</p><p>● Informações atualizadas da grade de programação: Informações sobre a</p><p>programação, contendo horários, datas e locais de forma atualizada para que o</p><p>folião consiga se guiar corretamente.</p><p>● Classificação Indicativa: Idade mínima recomendada para determinados</p><p>eventos, e se são específicos para o público infantil.</p><p>● Mapa/Trajeto dos Blocos: Mapa linkado com (maps) com direcionamento de</p><p>onde ocorrerá a atividade ou o trajeto, caso exista.</p><p>● Listagem dos Blocos: Lista com os blocos, nomes, horários, data e</p><p>informações sobre temática e trajetos dos blocos e seus respectivos polos.</p><p>● Listagem dos Shows: Lista com informações sobre os shows, horários, artistas</p><p>e localidades.</p><p>● Filtro por polo: Possibilidade do usuário filtrar por polo de atividades.</p><p>● Busca: Possibilidade do usuário realizar uma busca através de termos</p><p>específicos.</p><p>55</p><p>● Disponibilidade Offline: É importante que o usuário tenha acesso as</p><p>informações de forma offline, visto que as atividades acontecem na rua em sua</p><p>maioria, e possa ser que não haja sinal de conexão com a internet.</p><p>● Notícias: Uma sessão com notícias de portais sobre as festividades do</p><p>carnaval, sua história, os shows e outras atividades que irão acontecer além de</p><p>notícias afins, para que o folião possa se manter informado.</p><p>4.2. PROTOTIPAGEM</p><p>A implementação de uma interface deve ser baseada em avaliações de protótipos que</p><p>possam ser construídos de forma simples e acessível, e que permitam mudanças até</p><p>que o melhor entendimento do design seja alcançado (Nielsen, 1993).</p><p>Segundo Nielsen (1993) existem dois tipos de prototipagem para a construção de uma</p><p>interface, são elas a prototipagem horizontal e a vertical. As dimensões de tais tipos de</p><p>prototipagens estão ilustradas na Figura 18. Na prototipagem vertical a ideia principal é</p><p>diminuir tempo e custo, para tal é necessário reduzir a quantidade de recursos</p><p>disponíveis no protótipo, trabalhando apenas em uma parte do sistema com as funções</p><p>necessárias para realização e avaliação de tarefas específicas, mas de forma realista.</p><p>Nesse caso, o usuário iria de fato acessar um sistema funcional com informações reais.</p><p>Já na prototipagem horizontal, o usuário de teste tem acesso a toda a interface do</p><p>sistema com todos os seus recursos, porém sem acesso a informações reais ou a uma</p><p>base de dados, ele só terá contato com uma simulação. O objetivo é testar de forma</p><p>integral toda a interface do usuário, mas de forma menos realista, levando em</p><p>consideração que o usuário não estará interagindo com um sistema funcional. Esse</p><p>tipo de prototipagem pode ser executada em papel, por exemplo.</p><p>56</p><p>Figura 19 - As duas dimensões da prototipagem segundo Jakob Nielsen: Prototipagem</p><p>horizontal mantém os recursos mas elimina profundidade e funcionalidade. E a</p><p>prototipagem vertical mantém profundidade e funcionalidade para poucos recursos.</p><p>Fonte: NIELSEN, Jakob. Usability Engineering. San Francisco (California), Morgan</p><p>Kaufmann, 1993. p. 94.</p><p>BERKUN (2000) fundamenta que a definição de protótipo é a representação de</p><p>qualquer produto em um projeto. E quando se trata de um protótipo de uma interface, é</p><p>importante separar a classificação a partir do grau de similaridade do projeto ao</p><p>produto.</p><p>De acordo com PREECE, ROGERS e SHARP (2005), o protótipo de baixa fidelidade</p><p>(Figura 20) é útil pois é simples e propicia a aplicação fácil de modificações,</p><p>incentivando assim a exploração de ideias alternativas. O Quadro 05 apresenta as</p><p>vantagens e desvantagens do protótipo de baixa fidelidade.</p><p>57</p><p>Figura 20 - Representação de um protótipo de baixa fidelidade</p><p>Fonte: https://www.thinklions.com/blog/low-fidelity-prototype/ Acesso: 28 nov 2022</p><p>Quadro 05 - Vantagens e Desvantagem do Protótipo de Baixa Fidelidade</p><p>Vantagens Desvantagens</p><p>Custo mais baixo de desenvolvimento Verificação limitada de erros</p><p>Avalia múltiplos conceitos de design Especificação pobre em detalhe para</p><p>codificação</p><p>Instrumento de comunicação útil “Uso” conduzido pelo facilitador</p><p>Aborda questões de layout de tela Utilidade limitada após estabelecimento</p><p>dos requisitos</p><p>Útil para identificação de requisitos de</p><p>mercado</p><p>Utilidade limitada para testes de</p><p>usabilidade</p><p>Proof-of-concept (demonstrações de que</p><p>o conceito funciona)</p><p>Limitações</p><p>de fluxo de navegação</p><p>Fonte: Preece, Rogers e Sharp (2005)</p><p>O protótipo de média fidelidade se encaixa no conceito de prototipagem vertical</p><p>cunhado por Nielsen (2003), pois deve representar apenas funções específicas, mas</p><p>de forma realista a fim de testar tarefas pré-determinadas.</p><p>https://www.thinklions.com/blog/low-fidelity-prototype/</p><p>58</p><p>Como exemplificado na Figura 21, o protótipo de alta fidelidade deve se assemelhar o</p><p>máximo ao produto final. Se possível com a utilização de linguagem de programação e</p><p>apresentando aspectos de design e principais funcionalidades que deverão estar</p><p>presentes no futuro sistema.</p><p>Figura 21 - Protótipos de Alta Fidelidade de Aplicativo de E-Commerce</p><p>Fonte: https://www.jyst.agency/services/prototypes/ Acesso: 28 nov 2022</p><p>O quadro 06 apresenta as vantagens e desvantagens do protótipo de alta fidelidade.</p><p>Quadro 06 - Vantagens e Desvantagens do protótipo de alta fidelidade</p><p>Vantagens Desvantagens</p><p>Funcionalidade completa Desenvolvimento mais caro</p><p>Totalmente interativo Sua criação demanda tempo</p><p>Uso conduzido pelo usuário Ineficiente para designs proof-of-concept</p><p>(Demonstrações de que o conceito</p><p>funciona)</p><p>Define claramente a navegação Não serve para coleta de requisitos</p><p>Mesmo look and feel do produto final</p><p>Serve como uma especificação viva</p><p>59</p><p>Ferramenta de venda e marketing</p><p>Fonte: Preece, Rogers e Sharp (2004)</p><p>60</p><p>5. DESENVOLVIMENTO DO PROTÓTIPO</p><p>O protótipo desenvolvido e relatado aqui neste trabalho pode ser considerado dentro do</p><p>conceito de protótipo horizontal, cunhado por Nielsen (1993), por se tratar de uma</p><p>representação fiel de um sistema em sua totalidade, mas que não disponibiliza acesso</p><p>a suas funções, se atendo apenas ao layout, permitindo uma visão geral da solução</p><p>proposta.</p><p>Para o desenvolvimento de uma interface, Garrett (2003), sugere cinco elementos de</p><p>experiência de usuário, são eles: estratégia, escopo, estrutura, esqueleto e superfície</p><p>Figura 22 - Planos de Garret</p><p>Fonte: Garret (2003)</p><p>O primeiro plano, o da estratégia, é onde é fundamentado o que os usuários devem</p><p>encontrar na aplicação. No caso deste trabalho, os objetivos do plano estratégico são a</p><p>criação de uma interface intuitiva, onde os usuários tenham acesso a um guia de bolso</p><p>digital que contenha as informações completas sobre o carnaval da cidade de Natal.</p><p>61</p><p>Para tal, foram levantados conceitos teoricamente embasados nos âmbitos da</p><p>experiência do usuário, usabilidade, ergonomia informacional e acessibilidade digital.</p><p>O plano escopo define as características e delimitações do projeto. A partir da análise</p><p>de similares e das informações levantadas sobre as programações do carnaval da</p><p>cidade de Natal, foi possível criar uma lista dos conteúdos que deverão estar presentes</p><p>no projeto.</p><p>Na estrutura (terceiro plano), é onde são criados os mapas que irão ilustrar a</p><p>arquitetura de informação e a estrutura da interação da aplicação. Aqui, foi</p><p>desenvolvido um fluxograma (Figura 23) que alinha o caminho que o usuário irá</p><p>percorrer.</p><p>O fluxograma foi desenvolvido levando em consideração as ações necessárias para o</p><p>usuário conseguir navegar de forma intuitiva na aplicação e alcançar os objetivos</p><p>propostos. A página principal concentra a disposição dos polos e o menu superior, de</p><p>onde o usuário poderá seguir para as demais funcionalidades.</p><p>Figura 23 - Fluxograma do Usuário</p><p>Fonte: Autora</p><p>62</p><p>O penúltimo plano é o plano esqueleto, onde são criados os arranjos que irão</p><p>comportar o conteúdo e o fluxo das informações. Portanto, foram criados wireframes,</p><p>que consistem em diagramas visuais que esboçam a estrutura do aplicativo. As telas</p><p>desenvolvidas são de baixa fidelidade, sem muitos detalhes, apenas para mapear o</p><p>layout e servir de base para a criação do protótipo final.</p><p>Figura 24 - Wireframes de Login e Cadastro</p><p>Fonte: Autora</p><p>63</p><p>Figura 25 - Wireframes da Tela Inicial e do Menu</p><p>Fonte: Autora</p><p>64</p><p>Figura 26 - Wireframes das Informações dos Pólos e da descrição da atividade</p><p>Fonte: Autora</p><p>65</p><p>Figura 27 - Wireframes da Agenda Personalizada e Blocos</p><p>Fonte: Autora</p><p>66</p><p>Figura 28 - Notícias</p><p>Fonte: Autora</p><p>A proposta desenvolvida focou nas principais funções que devem estar presentes no</p><p>aplicativo. A página inicial é onde o usuário terá acesso aos polos, e a partir daí ele</p><p>poderá navegar pelas atrações, que consistem em blocos e shows. Os blocos são</p><p>manifestações carnavalescas onde grupos de pessoas se reúnem em local</p><p>previamente definido, com trajetos que vão de um lugar ao outro. Muitas vezes são</p><p>67</p><p>temáticos. Em Natal, por exemplo, existe o bloco “Cores de Krishna”, que se propõe a</p><p>propagar a cultura indiana. E shows são atos musicais espalhados pelos palcos da</p><p>cidade. Para ambos os casos, o usuário terá como visualizar informações mais</p><p>completas, como localização, classificação indicativa e um texto explicativo sobre o que</p><p>se trata a atividade. O usuário poderá também adicionar as atividades a sua agenda</p><p>individual, podendo assim visualizar sua própria programação de forma personalizada.</p><p>No quinto e último plano, que Garrett denomina como Superfície, é onde é</p><p>desenvolvida a parte gráfica do projeto, criando os elementos da interface onde são</p><p>levados em consideração o layout, tipografias, cores e outros elementos visuais.</p><p>5.1. IDENTIDADE VISUAL</p><p>Segundo Wheeler (2008) a marca é a promessa, a grande ideia e as expectativas que</p><p>residem na mente de cada consumidor a respeito de um produto, de um serviço ou de</p><p>uma empresa. A marca precisa transmitir ao usuário uma série de valores e</p><p>sentimentos. Ao mesmo tempo que deve se destacar em meio aos similares. Portanto,</p><p>é necessária a criação de um sistema de identidade visual que vá além de apenas o</p><p>logotipo. No presente projeto, foram estabelecidas algumas diretrizes para a</p><p>identidade.</p><p>5.1.1. NAMING</p><p>Wheeler (2008) cita que a identidade sintetiza e visualiza a marca, sendo o nome parte</p><p>da marca o escolhido foi ‘Carnaval em Natal’, que resume de forma clara e direta sobre</p><p>o que trata o aplicativo. Visto que o público alvo são cidadãos da cidade e turistas, é</p><p>essencial que o nome seja auto-explicativo e que não necessite de tagline.</p><p>68</p><p>5.1.2. CORES</p><p>As cores escolhidas foram pensadas para que houvesse contraste sem a necessidade</p><p>da utilização do branco. Por se tratar de um aplicativo que remete a festividade, quis</p><p>utilizar o máximo de cores possível sem que ficasse visualmente poluído. O fundo</p><p>amarelo remete ao sol, por Natal ser conhecida como a Cidade do Sol, e é uma cor de</p><p>tom claro, que contrasta bem com a cor escolhida para o texto do aplicativo, que é o</p><p>preto. Para o logotipo foram utilizados tons de vermelho e roxo. Amarelo e vermelho</p><p>por se tratarem de cores primárias e o tom de roxo por ser complementar ao amarelo</p><p>(Figura 29).</p><p>Figura 29 - Círculo Cromático</p><p>Fonte - http://www.dcoracao.com/2010/10/teoria-das-cores-circulo-cromatico.html</p><p>http://www.dcoracao.com/2010/10/teoria-das-cores-circulo-cromatico.html</p><p>69</p><p>Figura 30 - Paleta de Cores do Aplicativo</p><p>Fonte: Autora</p><p>5.1.3 TIPOGRAFIA</p><p>Ainda segundo Aline Wheeler (2008) os caracteres devem ser flexíveis e fáceis de</p><p>usar. Para facilitar a leitura foi escolhida uma fonte sem serifa desenvolvida pelo</p><p>Google. A Open Sans é otimizada tanto para impressão como para a web. Levando em</p><p>consideração que o material de divulgação offline não vá fugir da estética do app ela foi</p><p>escolhida. E por também manter sua legibilidade tanto em telas grandes como</p><p>pequenas, no caso da aplicação ser utilizada em um smartphone ou em um tablet.</p><p>5.1.4. LOGOTIPO</p><p>Um logotipo é uma palavra ou palavras independentes.</p><p>Pode ser o nome de uma empresa ou um acrônimo. Os</p><p>melhores logotipos impregnam uma palavra legível (ou</p><p>palavras) com as características distintivas de uma fonte</p><p>tipográfica e podem integrar elementos abstratos ou</p><p>pictóricos. (Wheeler, 2008)</p><p>70</p><p>Figura 31 - Logotipo Carnaval em Natal</p><p>Fonte: Autora</p><p>Segundo a descrição de Wheeler (2008), o logotipo é baseado em uma tipografia com</p><p>um elemento pictórico mesclado</p>