2020-tcc-rbamonteiro

Prévia do material em texto

UNIVERSIDADE FEDERAL DO CEARÁ 
INSTITUTO UFC VIRTUAL 
CURSO DE GRADUAÇÃO EM SISTEMAS E MÍDIAS DIGITAIS 
 
 
 
 
 
ROMULO BARBOSA DE ALENCAR MONTEIRO 
 
 
 
 
 
 
ANÁLISE E REDESIGN DA PLATAFORMA E3 NO CONTEXTO DO ENSINO DE 
ORIENTAÇÃO E MOBILIDADE 
 
 
 
 
 
 
 
 
 
 
 
 
FORTALEZA 
2020 
 
 
ROMULO BARBOSA DE ALENCAR MONTEIRO 
 
 
 
 
 
 
 
ANÁLISE E REDESIGN DA PLATAFORMA E3 NO CONTEXTO DO ENSINO DE 
ORIENTAÇÃO E MOBILIDADE 
 
 
 
 
 
 
Trabalho de Conclusão de Curso apresentado ao 
Curso de Graduação em Sistemas e Mídias 
Digitais do Instituto UFC Virtual da 
Universidade Federal do Ceará, como requisito 
parcial à obtenção do grau de bacharel em 
Sistemas e Mídias Digitais. 
 
Orientador: Prof. Dr. Windson Viana de 
Carvalho. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
FORTALEZA 
2020 
Dados Internacionais de Catalogação na Publicação 
Universidade Federal do Ceará
Biblioteca Universitária
Gerada automaticamente pelo módulo Catalog, mediante os dados fornecidos pelo(a) autor(a)
M779a Monteiro, Romulo Barbosa de Alencar.
 Análise e redesign da plataforma E3 no contexto do ensino de orientação e mobilidade / Romulo
Barbosa de Alencar Monteiro. – 2020.
 59 f. : il. color.
 Trabalho de Conclusão de Curso (graduação) – Universidade Federal do Ceará, Instituto UFC Virtual,
Curso de Sistemas e Mídias Digitais, Fortaleza, 2020.
 Orientação: Prof. Dr. Windson Viana de Carvalho.
 1. Redesign. 2. Interface. 3. Orientação e mobilidade. I. Título.
 CDD 302.23
 
 
ROMULO BARBOSA DE ALENCAR MONTEIRO 
 
 
 
 
 
 
 
ANÁLISE E REDESIGN DA PLATAFORMA E3 NO CONTEXTO DO ENSINO DE 
ORIENTAÇÃO E MOBILIDADE 
 
 
 
 
 
 
 
Relatório Técnico apresentado ao Curso de 
Bacharelado em Sistemas e Mídias Digitais da 
Universidade Federal do Ceará, como requisito 
à obtenção do título de Bacharel em Sistemas e 
Mídias Digitais. Área de concentração: Mídias 
Digitais. 
 
Aprovada em: ___/___/______. 
 
 
BANCA EXAMINADORA 
 
 
________________________________________ 
Prof. Dr. Windson Viana de Carvalho (Orientador) 
Universidade Federal do Ceará (UFC) 
 
 
_________________________________________ 
Prof. Ms. Agebson Rocha Façanha 
Instituto Federal do Ceará (IFCE) 
 
 
_________________________________________ 
Prof. Ms. Carlos Eduardo Brito Novais 
Universidade Federal do Ceará (UFC) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
A Deus. 
Aos meus pais, Carlos Augusto e Solange. 
A minha esposa, Elaine. 
A minha irmã Júlia. 
A minha tia Francisca e meus avós. 
 
 
 
 
 
 
 
AGRADECIMENTOS 
 
À Deus, primeiramente, que esteve comigo durante todos os momentos difíceis e 
especialmente durante todo o meu período de formação. 
À minha família que foi porto seguro e sempre presente perante a épocas 
complicadas de minha vida, onde pude encontrar conforto e palavras de disciplina para que 
continuasse em minha jornada, sempre me motivando, nunca duvidando de meu potencial. 
À minha esposa que foi extremamente compreensiva durantes as noites em claro 
para a construção deste TCC, que me apoiou quando pensei que não seria possível. 
Ao Prof. Dr. Windson Viana Carvalho por ter me orientado durante todo o projeto e 
ter me confiado esta tarefa, acreditando que seria realizada da melhor forma possível. 
Ao Prof. Ms. Agebson Rocha Façanha pelo apoio e suporte, e principalmente, por 
ter me acompanhado durante toda essa jornada, muito obrigado pelas dicas. 
À Universidade Federal do Ceará por ter proporcionado anos incríveis e 
inesquecíveis na minha vida, por ter me dado a oportunidade de realizar um sonho, de estudar 
em uma universidade norte-americana na área que sempre amei. 
Aos meus amigos, que são muitos, por estarem comigo e mesmo parecendo que 
esse dia nunca iria chegar, continuaram a me apoiar e sempre proporcionando momentos que 
irei levar para toda a vida. 
 
 
 
RESUMO 
 
Atualmente, cerca de 18% da população brasileira declara ter deficiência visual, dentre esses, 
3,4% declaram-se com alto grau de deficiência. O ensino de técnicas de Orientação e 
Mobilidade (OM) tem papel fundamental na reabilitação de casos mais graves de deficiência 
visual. Novas tecnologias estão sendo desenvolvidas para melhorar o ensino e a aprendizagem 
destas técnicas, uma delas é a utilização de simuladores de Realidade Virtual que simulam 
ambientes físicos reais e inserem atividades de OM para serem realizadas pelos usuários com 
deficiência visual. Um desses sistemas é o E3 que possibilita a professores de OM criarem 
mapas personalizados para que os alunos apliquem os conceitos aprendidos em sala de aula 
usando um dispositivo móvel como simulador. O professor modifica a abordagem e os cenários 
da simulação de acordo com a necessidade e especificidades de cada aluno. Para isso, a interface 
do E3 foi elaborada por meio de estudos e pesquisas para entender as necessidades do usuário 
(professor de OM) e como ele se comporta no ambiente inserido. Sabendo desta necessidade, 
testes de usabilidade e de heurísticas foram feitos com 48 participantes, sendo eles: 24 
Professores de OM e 24 Especialistas em IHC. Foi a partir dos resultados destes testes que se 
iniciou este trabalho de TCC. De posse dos resultados e de um estudo relacionado à produção 
de interfaces para aplicações, uma proposta de redesign foi elaborada para solucionar os erros 
e considerações apontadas pelos avaliadores e otimizações no fluxo de navegação, para 
melhorar a experiência do usuário. Foram produzidas 43 telas da aplicação, um novo conjunto 
de ícones e uma nova abordagem relacionada a interação do sistema. Estes modelos foram 
validados por dois especialistas, através de uma avaliação da interface com base nas 
observações levantadas pelos especialistas em IHC, e comparada com o que foi dito pelos 
usuários finais (professores de OM), para manter uma interface amigável e que não fugisse do 
propósito original da plataforma E3. Toda a interface foi pensada com o intuito de futuramente 
adaptá-la para o ambiente mobile. 
Palavras-chave: Redesign. Interface. Orientação e Mobilidade. 
 
 
 
ABSTRACT 
 
Currently around 18% of the Brazilian population declares to have a visual impairment, among 
these, 3,4% declares themselves to have a high degree of impairment. Teaching Orientation and 
Mobility (OM) techniques is fundamental in a case of high degree of impairment and in the 
rehabilitation process. New technologies are being developed to enhance the teaching and 
learning of said techniques, one of them is the use of Virtual Reality simulators that can mimic 
a real environment and apply OM tasks to users with any degree of impairment. One of those 
systems is the E3 Web Application, which provide the OM instructors the tools to create custom 
maps so the students can practice all the concepts and techniques learned in-class through a 
mobile device as the simulator. The maps are completely custom allowing the instructor to 
modify and adapt them judging by the student’s needs and specificities. For that to happen the 
interface must be elaborated based on research and studies so the designer can understand the 
necessities of the OM instructors and how they behave inside a virtual environment. Kno wing 
all this, usability and heuristic tests were arranged with 48 participants, among them: 24 OM 
instructors and 24 MMI specialists. In possession of all the data gathered from these trials that 
this paper started the process of an interface redesign proposal, which focused on: solving all 
errors and considerations that the evaluators brought up through the analysis, and enhance the 
navigational flow thus improving the user experience. A totalof 43 interface mockups were 
produced, an iconography overhaul and a new interface interaction proposal. Two specialists 
validated all the material produced based on the research data and the concept of the original 
interface purpose. All the production was inspired by the desire of porting the application to 
mobile devices. 
Keywords: Redesign. Interface. Orientation and Mobility. 
 
 
LISTA DE FIGURAS 
 
Figura 1 − Interface atual da ferramenta........................................................................ 35 
Figura 2 − Interface Inicial do redesign da aplicação web E3....................................... 38 
Figura 3 − Menu expansivo ativo................................................................................... 39 
Figura 4 − Menu do tipo botão ativado (Menu Opções)................................................ 39 
Figura 5 − Submenu de Construção Pisos ativado......................................................... 40 
Figura 6 − Submenu Mostrar Mais ativado.................................................................... 41 
Figura 7 − Menus e Ferramentas E3 atual..................................................................... 42 
Figura 8 − Mecânica Drag and Drop............................................................................. 43 
Figura 9 − Sistema de Pintura para Pisos e Paredes....................................................... 44 
Figura 10 − Sistema de Objeto para Pisos e Paredes....................................................... 44 
Figura 11 − Excluindo Objetos........................................................................................ 45 
Figura 12 − Excluindo múltiplos tipos de elementos....................................................... 46 
Figura 13 − Travamento de objeto................................................................................... 47 
Figura 14 − Rotação mecânica atual................................................................................ 48 
Figura 15 − Menu Elementos........................................................................................... 49 
Figura 16 − Menu Atributos versão para Objetos Interativos.......................................... 50 
Figura 17 − Menu Ajuda.................................................................................................. 51 
Figura 18 − Menu Exibir.................................................................................................. 51 
Figura 19 − Menu Preview............................................................................................... 52 
Figura 20 − Menu Opções com mudança de idioma........................................................ 53 
Figura 21 − Menu “Controles” atual do E3..................................................................... 56 
Figura 22 − Tutorial Inicial.............................................................................................. 57 
Figura 23 − Sistema de Tutoriais...................................................................................... 58 
 
 
LISTA DE GRÁFICOS 
 
Gráfico 1 − Categorias de avaliação Professores de OM (incidência)................................ 26 
Gráfico 2 − Categorias de avaliação Especialistas em IHC (incidência)............................ 33 
Gráfico 3 − Considerações da categoria de Feedback Insatisfatório.................................. 33 
 
 
 
LISTA DE ABREVIATURAS E SIGLAS 
 
IBGE Instituto Brasileiro de Geografia e Estatística 
IHC Interação Humano-Computador 
OM Orientação e Mobilidade 
SUS System Usability Scale 
TLX NASA Task Load Index 
UI User Interface 
UX User Experience 
 
 
SUMÁRIO 
 
1 INTRODUÇÃO ................................................................................................. 13 
1.1 Contexto.............................................................................................................. 13 
1.2 Motivação............................................................................................................ 14 
1.3 Objetivo do TCC................................................................................................ 15 
1.4 Organização do Documento.............................................................................. 16 
2 REFERENCIAL TEÓRICO............................................................................. 17 
3 METODOLOGIA, PROCESSAMENTO DE DADOS E 
COMPILAMENTO........................................................................................... 21 
3.1 Processo avaliativo do E3 – Professores de OM.............................................. 21 
3.2 Análise dos dados da avaliação do E3 – Professores de OM............................ 23 
3.3 Processo avaliativo do E3 – Especialistas em IHC........................................... 27 
3.4 Análise da avaliação do E3 – Especialistas em IHC......................................... 29 
4 DESENVOLVIMENTO DO REDESIGN ....................................................... 34 
4.1 Paradigma Navegacional................................................................................... 34 
4.2 Feedback constante para o usuário.................................................................. 53 
4.3 Sistema de ajuda e aprendizado....................................................................... 55 
5 CONCLUSÃO................................................................................................... 59 
 REFERÊNCIAS ................................................................................................ 61 
 
 
 
 
 
 
 
 
 
 
 
 
 
13 
 
1 INTRODUÇÃO 
1.1 Contexto 
A deficiência visual sempre foi presente em vários locais do mundo, e independente 
de nível escolar, poder aquisitivo e situação social, o ato de locomover e se localizar em 
ambientes fechados e abertos sempre será um desafio a ser vencido para muitos. Atualmente 
no Brasil, de acordo com o censo do IBGE no ano de 2010, a deficiência visual está presente 
em 18,8% da população, destes 3,4% declararam ter um grau de deficiência alto e que geravam 
grandes dificuldades. Percebendo este cenário, o ensino de técnicas de Orientação e Mobilidade 
é de primordial importância para esta parcela da sociedade. De acordo com Golkman (1969), 
conforme citado por Machado et al (2003), crianças cegas só poderão se tornar adultos 
independentes, capazes e livres com a implementação de programas de ensino destes princípios 
e que é de suma importância que os professores e a comunidade percebam a necessidade dessas 
ações e iniciativas. 
Desta forma um programa efetivo para o ensino de técnicas de Orientação e 
Mobilidade foi projetado e distribuído para todo o Brasil no ano de 2003, um manual completo 
com orientações e um plano de ensino para os educadores da categoria. Para Weishaln (1990) 
orientação é o ato de utilizar dos sentidos remanescentes para se localizar em ambientes e saber 
como se posicionar em relação aos objetos significativos que estão ao redor no meio ambiente 
e mobilidade corresponde a habilidade do ser se locomover com segurança, eficiência e 
conforto nos ambientes utilizando os sentidos remanescentes, ressaltando a importância de 
portadores de deficiência visual tenham acesso a um programa adequado e versátil de ensino, 
garantindo o seu bem estar mediante a sua vida social e principalmente para que este não se 
sinta excluído ou impotente mediante situações cotidianas. O ato de se orientar de acordo com 
Machado et al (2003) é baseado em três perguntas básicas que o aluno deve se perguntar: “Onde 
estou?”; “Para onde quero ir?”; e “Como vou chegar ao local desejado?". Sabendo que os alunos 
têm origens diferentes e podem ter adquirido a deficiência em diferentes etapas da vida, as 
formas de abordagens do professor devem se adaptar as necessidades de cada um e ter uma 
didática que envolva o aluno e dê o máximo de assistência necessária para que oprocesso de 
aprendizado seja efetivo e propicie um senso constante de segurança e conforto, gerando 
confiabilidade nas habilidades recém adquiridas dos alunos. 
Com o avanço tecnológico é perceptível que várias formas de interações através de 
ambientes virtuais foram possibilitadas nos últimos dez anos, avanços que permitiram diminuir 
distâncias e simular várias sensações a partir de equipamentos e softwares dedicados. Tais 
avanços levaram ao barateamento de várias tecnologias, permitindo que uma grande parcela 
14 
 
das pessoas pudesse se tornar usuários potenciais, dentre estas tecnologias, a Realidade Virtual 
(RV) tem crescido de forma rápida. De acordo com Kirner e Siscoutto (2007) a realidade virtual 
compreende a uma “interface avançada do usuário”, onde ele pode manipular elementos 
gerados, através da softwares em conjuntura com o hardware, propiciando uma vivência onde 
a visão será o senso mais estimulado e preponderante, porém outros sentidos não serão 
descartados. Antes esta tecnologia requeria um alto custo de investimento para a utilização, 
contudo pode ser feito atualmente com um smartphone e um óculos de realidade virtual, que 
pode ser obtido a baixo custo. Atualmente vários estudos vêm sendo conduzidos em como essa 
tecnologia pode ser implementada em sala de aula, e dentro dessas pesquisas existem vertentes 
voltadas ao uso de RV no ensino de OM, uma delas, a revisão sistemática realizada por Façanha 
et al (2020b). 
Percebendo esta necessidade de um currículo mais robusto e versátil para as 
práticas de OM e com a massificação de ferramentas que utilizem de RV, que a aplicação web 
de construção de mapas indoor E3 foi idealizado para trabalhar em conjunto com o simulador 
de RV ENA (FAÇANHA; VIANA e SÁNCHEZ, 2019), permitindo que professores pudessem 
criar mapas personalizados de acordo com a necessidade de seus alunos e estes pudessem testa-
los sem a necessidade de fazer uma visitação presencial aos locais originais, permitindo uma 
versatilidade maior para os professores e coordenando seu uso juntamente das aulas presencias, 
permitindo um processo de aprendizado mais lúdico e completo. 
Através da aplicação, os professores têm acesso a um catálogo de utensílios, tipos 
de pisos, paredes e até objetos interativos para que o aluno possa praticar as técnicas ensinadas 
no curso de OM. Com poucas horas de uso, os professores estão aptos a criar mapas de vários 
tamanhos e formas, cada mapa tem seus objetivos próprios, a ordem deles é dada de acordo 
com a proximidade com o aluno. Este mapa pode ser exportado através de um arquivo .xml e 
então importado para o simulador ENA que irá ler as informações e recriar todo o cenário de 
acordo com o arquivo base. Dentro do simulador o aluno poderá se mover pelo mapa através 
de passos que são efetuados um de vez, todos os sons da simulação são em 3D, permitindo uma 
imersão mais efetiva e assim utilizando de um dos sensos restantes do usuário. A variedade de 
sons ajuda o aluno a ter uma melhor noção de sua situação, localização em relação ao objetivo 
e dá ao professor uma ferramenta mais robusta para trabalhar em suas aulas. 
 
1.2. Motivação 
Porém, a experiência durante o processo de utilização da ferramenta está 
comprometida por conta de sua interface que não oferece um fluxo de navegação claro, por 
15 
 
muitas vezes não oferecer explicações claras sobre as funcionalidades principais do software, 
como se dá o processo de construção, peca em vários setores quando se trata do aspecto de 
feedbacks, além de não oferecer um sistema de ajuda que dê suporte ao usuário. 
Com o propósito de melhorar estes pontos uma série de testes e análises foram 
conduzidos pelo especialista e criador da plataforma E3, onde analisou-se a forma que 
professores de OM se comportavam na ferramenta, durante o processo de criação de mapas; 
salvamento e exportação dos arquivos para o simulador ENA; e “jogar” o mapa. As sessões 
foram estruturadas em três momentos: apresentação da plataforma, onde o especialista informa 
aos usuários os conceitos que regem a plataforma e seus objetivos; o segundo momento 
compreende ao usuário efetuar tarefas predeterminadas dentro da plataforma, sendo algumas 
destas a construção de mapas, salvamento e exportar arquivos para o simulador de RV; e por 
fim efetuar uma avaliação da aplicação, que abrange pontos referentes ao nível de esforço do 
usuário, através do modelo NASA TLX e System Usability Scale (SUS). 
Sabendo da necessidade de uma condução e abordagem mais especializada, sessões 
avaliativas foram feitas com especialistas em IHC, estruturada de forma similar como a 
anterior, estes encontros foram divididos em dois dias, o primeiro dia focado na utilização da 
plataforma Web e o segundo focado no simulador ENA. Diferentemente do encontro com os 
professores de OM, esta avaliação foi focada nas heurísticas de Nielsen e nas regras de ouro de 
Schneiderman. 
 
1.3 Objetivo do TCC 
Dentro deste contexto, o objetivo principal deste TCC é propor uma releitura de 
toda a interface do E3 e de seus modelos de interações. A ideia é permitir um ambiente mais 
seguro para a navegação dos construtores de mapas, dando um constante fluxo de feedback e 
providenciando um robusto sistema de ajuda e a implementação de tutoriais que ensine por 
completo o uso da aplicação. 
Um total de quarenta e três telas foram produzidas, um novo conjunto de ícones e 
uma nova abordagem relacionada ao sistema de construção de mapas, através de todo os dados 
coletados e analisados. Dentre as interações simuladas em todas as telas estão: o processo de 
inserção de dois tipos de blocos, objetos interativos e pisos/paredes; processo de exclusão de 
blocos; telas de menus como, menu principal, menu de atributos, menu de exibição, menu de 
elementos, menu de ajuda, tutoriais, sobre e etc. 
Estes modelos foram validados por dois especialistas, através de uma avaliação da 
interface com base nas observações levantadas pelos especialistas em IHC, e comparada com 
16 
 
o que foi dito pelos usuários finais (professores de OM), para manter uma interface amigável e 
que não fugisse do propósito original da plataforma E3. 
 
1.4 Organização do Documento 
O presente trabalho será dividido em cinco capítulos: introdução; referencial 
teórico; metodologia, processamento de dados e compilação; desenvolvimento do redesign; e 
conclusão. 
No próximo capítulo haverá a apresentação de todo o embasamento deste trabalho, 
mostrando quais os atributos e guias que serão utilizadas como régua no processo de construção 
e idealização do redesign. 
Em seguida, no capítulo de Metodologia, mostraremos como se deu os encontros 
entre o especialista e os avaliadores, dissertando todos os momentos que ocorreram nas sessões, 
detalhando os formulários que foram preenchidos e demonstrando como estes dados foram 
processados e analisados. 
No capítulo 4, desenvolvimento do redesign, será demonstrado todas as escolhas e 
abordagens tomadas para criar a nova interface da aplicação, nele será demonstrado telas e 
descrições sobre como foram pensadas as interações e novas abordagens, baseadas no feedback 
e análise de dados dos professores de OM e especialistas em IHC, após passado pela avaliação 
dos dois especialistas que contribuíram durante todo o processo de idealização. 
No capítulo 5, conclusões, iremos abordar a importância deste redesign e quais 
serão os planos futuros pós-redesign. 
 
17 
 
2 REFERENCIAL TEÓRICO 
 
O foco deste capítulo é apresentar o a importância de desenvolver uma interface 
que seja de fácil leitura e navegação para o usuário, pensando na quantidade de cliques 
necessários para executar tarefas, o número de níveis presentes em cada menu, a organização 
de informações e o agrupamento correto, um sistema de ajuda robusto e eficiente para prover a 
melhor experiência para o usuário. Todos estes aspectos são baseados em pesquisasartigos que 
reforcem o grau de atenção necessário para uma etapa chave do desenvolvimento de uma 
ferramenta web. 
De acordo com Barbosa & Silva (2010) desde o princípio do processo de concepção 
de um sistema interativo é necessário manter como propósito primordial a ideia de apoiar o 
usuário a alcançar seus objetivos. Sendo assim o processo de idealização da interface e de seus 
elementos devem ser pensados de forma que possam guiar o seu usuários a completar as tarefas 
necessárias de forma fluida e ininterruptas, evitando erros graves e frustrações que possam levar 
o utilizador a uma desistência por não conseguir obter o resultado desejado, dentro das 
limitações e possibilidades ofertadas pela ferramenta. 
Novos usuários, comumente, têm medos e ânsias quando inseridos em um novo 
ambiente virtual, pois temem constantemente que a má utilização da ferramenta possa gerar 
perdas irreversíveis e horas dedicadas a execução de uma tarefa podem ser perdidas por um 
simples clique, por não saberem quais interações estão disponíveis ao seu arsenal, podem se 
tornar acuados e ficarem receosos em testar e se aventurar nas funcionalidades do software. 
Por isso existe a necessidade do designer perceber quais são as melhores formas 
para estabelecer interações e prover ferramentas inerentes do sistema para providenciar uma 
máxima efetividade e segurança, de acordo com Nielsen (1993) o designer deve focar no 
princípio de que menos é mais, onde o mínimo de cliques podem realizar ações, o mesmo 
princípio pode ser relacionado com os níveis dos menus, dentre outras características que 
variam de sistema para sistema. 
Outro aspecto que tem grande relevância durante o desenvolvimento de aplicações 
com foco no usuário são os esquemas de cores que serão utilizados no ambiente virtual, visando 
sempre criar um ambiente que alivie o stress de usuários novatos, esta propriedade de 
influenciar a psiquê humana é apontada por Farina, Perez e Bastos (2006) que discorrem sobre 
como as cores tem grande influência, que as cores exercem não somente no campo do caráter 
fisiológico, como também no campo psicológico, elas interveem diariamente nas nossas vidas, 
transmitindo noções de alegria, tristeza, exaltação, depressão, passividade, calor, frio, dentre 
18 
 
outros sentimentos que são conhecidos por todos. Barros (2006) também confirma que as cores 
tem um poder diferenciado de compartilhar e transmitir ideias, por isso a escolha deve ser bem 
pesquisada pois como é mostrado na pesquisa de Heller (2000), cada cor tem seu significado 
quando isolados, porém quando combinados com outras, este sentido pode ser associado, 
expandido e/ou modificado, tudo isto é fruto de como somos expostos a vários conceitos que 
são associados com cores e estes são diferentes, podendo-se modificar de acordo com a cultura 
em que o usuário esteja imerso. As cores também podem propiciar um guia dentro de um 
ambiente, guiando o usuário e mantendo-o sempre ciente de seus passos como relata Thomazi 
(2017, p.44): 
“A cor, em todas as práticas desenvolvidas, tem como objetivo colocá-la no 
surgimento do projeto, quebrando o paradigma de elemento decorativo. Ela é aqui 
encarada como condutora do olhar numa textura sutil, que revela as intenções do 
projetista [...]” (apud Araújo, 2007, p. 153). 
 
De acordo com Norman (2013), um dos principais pilares de um sistema é o ato de 
feedback, é necessário que o usuário esteja em total controle da aplicação, mas para isso ele 
deve estar sempre informado de sua performance e seu fluxo de navegação, assim seu progresso 
está sempre evidente para que o mesmo possa continuar a suas tomadas de decisões e efetuar 
as suas tarefas com êxito, sem margem para dúvidas. Muitos programas pecam por não 
alimentarem seus utilizadores de suas ações, tornando o ato de realizar tarefas e funções em 
algo temeroso e incerto, propiciando momentos de erros constantes ou confusões recorrentes. 
Para isso, é necessário mapear todo o fluxo navegacional da ferramenta durante a 
etapa de concepção de interações e Norman novamente traz à tona a necessidade de que 
ocorram bons mapeamentos, facilitando o processo de utilização do programa e seus controles 
e possíveis interações serão memorizados com mais facilidade e rapidez, esta memorização se 
dá com mais efetividade quando interligado com o sistema de feedbacks da ferramenta. 
Mas isso tudo só funciona de forma efetiva quando sendo embasado por um bom 
modelo conceitual, que irá estabelecer o máximo de interações permitidas para o usuário e quais 
serão os seus efeitos, como estas ações irão ajudar na completude de tarefas, criando uma 
ligação concreta entre sistema e utilizador, permitindo uma maior efetividade no trabalho 
empenhado. Ainda trabalhando os pilares principais descritos por Norman, a necessidade de 
affordances bem elaboradas para guiar o usuário, descrevendo as formas de interações sem a 
necessidade de tutoriais extensos e complexos, botões que permitam uma fácil “leitura”, este 
conceito é alcançado quando o designer tem total compreensão da visibilidade dos elementos 
dentro do projeto, quais devem estar visíveis e sem a necessidade de vários cliques para que o 
usuário venha a acessar aquela informação, um exemplo que explica melhor o preceito é quando 
19 
 
uma pessoa necessita salvar um arquivos no programa Microsoft Word, o desenvolvedor sabe 
que esta é uma das funções mais importantes para o usuário por isso ela deve estar ao alcance, 
um clique de distância, essa localização visível dentro da página principal de um software é 
parte do conceito de visibilidade defendida por Norman. 
Porém, todos esses conceitos só se tornam completos quando associados com 
símbolos e associações de conceitos com signos, tendo em vista esta necessidade de cuidado 
com associações, faz-se prioridade a aplicação dos princípios estabelecidos por Pierce (2005) 
que signos devem conter significados para aqueles que o veem dentro do contexto que ele está 
sendo aplicado, visando concretizar este propósito, toda a iconografia de um projeto deve se 
basear na cultura que a aplicação será inserida, para que os usuários não precisem de recursos 
ou ajudas externas para compreender o significado dos símbolos. 
Com a popularização do mercado de jogos e uma grande evolução nas produções 
deste ramo, vários avanços foram feitos em diversos setores associados na construção de tais 
artefatos digitais, muito sendo trabalhados durantes décadas até conseguirem ser veiculados, 
com o passar do tempo outras áreas decidiram adaptar estes conceitos, técnicas e abordagens 
aos seus contextos, com isso surgiu o processo de Gamificação, de acordo com a definição de 
Cunegato e Dick (2016) a gamificação é o ato de utilizar mecânicas de jogos em conceitos que 
não se encaixam no entretenimento puro, é um processo que quando utilizado, tem como 
objetivo tornar tarefas e atividades comuns mais atrativas, incorporando um sentido lúdico. 
Com esta abordagem o processo de aprendizado e familiarização se torna mais divertido e 
efetivo, pois isto mantém o usuário engajado em suas atividades e permite que algo que é 
considerado exaustivo, referenciando ao processo de aprendizado, se tornar leve e consegue 
gerar mais engajamento do utilizador. 
 Uma parte integrante do processo de gamificação é traduzida através do sistema 
de recompensas, estes servem para encorajar e instigar, criando o hábito de que conhecer a 
ferramenta é prazeroso, recompensador. Existem várias formas que os desenvolvedores podem 
utilizar para manter este progresso registrado, deixando os usuários cientes de seu avanço e 
ainda instigando a utilização através de, por exemplo, missões, objetivos curtos e longos, 
desafios e outras formas de engajar a audiência durante o período de aprendizagem. Atualmente 
estes sistemas sempre estão associados a conquistas e troféus, porém ainda há muito o que ser 
exploradopara expandir este conceito. 
Com a chegada, popularização e constate avanço das tecnologias móveis, vários 
paradigmas antes já utilizados no meio da navegação em ambientes virtuais foram explorados 
mais profundamente, ampliados e adaptados, muitos desses modelos extrapolaram o âmbito 
20 
 
dos smartphones e seus conceitos e mecânicas foram trazidos para outras plataformas, uma das 
técnicas que é comumente utilizadas para quase todas as aplicações interativas, com foco em 
jogos e editores de mapas, é o sistema de inserção através de drag and drop, este paradigma 
torna a navegação mais intuitiva e acelerada, tornando a construção de mapas, quando trazido 
para o conceito trabalhado na ferramenta abordada neste estudo, mais rápida e diminuindo a 
recorrência de erros, pois a partir do sistema, pode-se integrar um sistema de correção ou 
prevenção de erros mais efetivo e com isso proporcionar uma experiência agradável para o 
utilizador. 
 
21 
 
3 METODOLOGIA, PROCESSAMENTO DE DADOS E COMPILAMENTO 
 
Neste capítulo, é apresentado o processo de coleta, análise e compilação de dados, 
estes separados em duas categorias: os dados relativos aos professores de OM e os dos 
especialistas em IHC. Logo após, será entendido como se deu o processo de análise dos dados, 
dos formulários preenchidos para cada grupo e qual a sua importância. Terminando com o 
processo de filtragem e compilação dos dados, estes que serão usados como base para guiar, 
juntamente do referencial teórico, o processo de redesign da ferramenta. 
 
3.1 Processo avaliativo do E3 – Professores de OM 
 
Durante a criação da plataforma o principal foco foi na experiência que o criador 
(FAÇANHA, 2020a), nesse caso um professor de OM, iria ter e consequentemente 
compreender os conceitos inseridos na ferramenta, trazendo de forma simples e intuitiva os 
passos necessários para que o usuário pudesse criar mapas de forma independente e sem a 
necessidade de ajuda ou assistência contínua. 
Utilizando este pensamento como norteador na construção da atual interface 
presente na plataforma de criação Web E3, várias decisões foram tomadas com o princípio de 
trabalhar o sistema de camadas e pintura de uma forma unificada e que prevenisse dúvidas 
sobre a sua lógica e principalmente sobre seu funcionamento. Sabendo disso, o especialista e 
criador da ferramenta, reuniu vinte e quatro professores atuantes na prática de OM, de várias 
regiões do Brasil, com backgrounds diferentes e vivências diversas para ter um primeiro contato 
e gerar feedbacks relacionados ao funcionamento, navegação e utilização da ferramenta. 
A partir das informações coletadas, análises seriam geridas em conjunção com o 
feedback gerado com as sessões de análise de vinte e quatro especialistas em IHC, para perceber 
possíveis erros relacionados a interação dos construtores e principalmente evitar que durante o 
processo de confecção dos mapas, erros gravíssimos e graves ocorram e consequentemente 
estimulando um ambiente de aprendizado e desenvolvimento prazeroso para todos os usuários. 
Para levantar os dados juntamente dos professores de OM, realizou-se sessões que 
eram divididas em três grandes etapas: a primeira consistia na apresentação da ferramenta aos 
usuários, durante este momento o criador da plataforma informava-os a finalidade e objetivo 
do ambiente virtual, uma extensa explicação de suas funções e funcionalidades, além de 
adentrar no conceito lógico da ferramenta, detalhando de forma compreensiva toda a estrutura 
relacionada com o sistema de camadas e a mecânica de pintura, partes integrantes no 
22 
 
funcionamento do confeccionador de mapas. Ainda no processo de apresentação da plataforma, 
o criador demonstrava a transição do processo de criação de mapas para a renderização via o 
aplicativo mobile ENA. 
A segunda etapa da sessão foi dedicada a realização de tarefas pré-estabelecidas, 
onde os professores deveriam iniciar o processo de confecção de um mapa seguindo o estilo de 
caça ao tesouro. Dentro dele deveriam ser inseridos elementos interativos para que o 
jogador/aluno pudesse procurar, estes elementos não teriam ordem exata para serem 
encontrados. Na segunda tarefa, os usuários deveriam exportar um mapa. Em seguida a terceira 
tarefa deveria ser executada, abrir um mapa existente, e finalmente terminando a lista de tarefas 
com o quarto objetivo: exportar um novo mapa. Durante toda a segunda etapa os construtores 
poderiam lançar dúvidas relativas ao funcionamento da aplicação e comentar sobre o seu 
processo de aprendizado e experiência mediante o avanço no uso da aplicação. 
Findadas as duas primeiras etapas, deu-se início ao processo avaliativo, que 
compreende a terceira e última etapa da sessão. Cada avaliador preencheu três questionários 
distintos, sendo eles o relatório NASA TLX, que mensura de forma estimada a carga de trabalho 
do usuário ao executar uma tarefa, este foi levemente modificado para também abordar e 
compreender a carga mental exigida para realizar o conjunto de tarefas supracitadas. O relatório 
se divide em duas partes: a primeira refere-se a um quadro onde o avaliador deve escolher entre 
um par de alternativas, qual delas foi mais relevante e que expressasse o seu estado mental 
atual. Podendo o respondente selecionar o mesmo aspecto no mínimo de zero vezes até cinco, 
do menos ao mais relevante, respectivamente. Estes fatores são referentes a: Demanda Física, 
Demanda Mental, Demanda de Tempo, Desempenho Próprio, Nível de Frustração e Nível de 
Esforço. A recorrência da aparição de tais aspectos irão gerar uma tabela de pesos que será 
utilizada para gerar um score relativo a cada usuário, este peso terá sua importância mais 
explorada no processo de filtragem e compilação de dados. Continuando, a segunda parte 
referente ao relatório TLX é relacionada a notas que o usuário poderá dar aos mesmos aspectos 
utilizados na primeira parte do questionário. As notas são de zero a dez, considerando a variação 
de meio, um exemplo rápido para melhor compreensão seria: o usuário A1 pontuou em seu 
relatório que o aspecto de Demanda Mental compreende como um nove na escala de zero a 
dez. O aspecto de Demanda Física compreende a um quatro e meio em uma escala de zero a 
dez e assim por diante. 
Todas as duas etapas do relatório propiciavam um campo para comentários, onde 
os avaliadores poderiam complementar as suas respostas e justificar as suas escolhas, além de 
utilizar o campo para escrever dúvidas ao criador da ferramenta. Este campo é de teor opcional. 
23 
 
O segundo relatório preenchido durante a segunda etapa da avaliação é o 
questionário SUS, que compreende a um checklist composto de dez itens que oferece uma visão 
global das avaliações de usabilidade. As afirmações de cunho objetivo, obedeciam a uma escala 
de Likert onde seus parâmetros de avaliação saiam de Discordo Totalmente para Concordo 
Totalmente, em uma escala composta de cinco níveis de escolha. As afirmações utilizadas no 
questionário foram: “Eu acho que gostaria de usar esse sistema com frequência”, “Eu acho o 
sistema desnecessariamente complexo”, “Eu achei o sistema fácil de usar”, “Eu acho que 
precisaria de ajuda de uma pessoa com conhecimentos técnicos para usar o sistema”, “Eu acho 
que as várias funções do sistema estão muito bem integradas.”, “Eu acho que o sistema 
apresenta muita inconsistência”, “Eu imagino que as pessoas aprenderão como usar esse 
sistema rapidamente”, “Eu achei o sistema atrapalhado de usar”, “Eu me senti confiante ao usar 
o sistema” e “Eu precisei aprender várias coisas novas antes de conseguir usar o sistema”. Este 
quadro também era composto por um campo opcional para observações. 
E por fim, visando complementar os questionários anteriores, uma entrevista de 
abordagem estruturada contendo perguntas específicas sobre as expectativas do usuário e o uso 
dos aplicativos avaliados durante a sessão. Na primeiraseção da entrevista está presente uma 
tabela que o usuário avaliará os aspectos propostos nela numa escala de Discordo Totalmente 
a Concordo Totalmente, sendo os tópicos avaliados: “Aspecto visual dos elementos”, “Aspecto 
sonoro”, “Movimentação”, “Posição do personagem no cenário”, “Posicionamento relativo dos 
objetos”; além do campo opcional para observações. Na segunda parte do questionário foram 
apresentadas questões de cunho discursivas, onde os usuários iriam expressar as suas 
experiências relacionadas ao uso da aplicação, quais foram as suas expectativas e se elas foram 
atendidas, quais funções deveriam ser implementadas na ferramenta, em quais âmbitos no 
processo de ensino das técnicas de OM que a ferramenta seria melhor utilizada, e por fim, qual 
o perfil de público que se encaixa com o propósito e forma de interação da aplicação. 
 
3.2 Análise dos dados da avaliação do E3 – Professores de OM 
 
Terminadas as sessões de coleta de dados e entrevistas, uma série de processos para 
a compilação e classificação dos dados se inicia. No primeiro momento, um levantamento sobre 
o perfil dos professores que avaliaram a aplicação WEB foi efetuado para nortear o processo 
de reestruturação da interface, tendo em mente todas as pontuações efetuadas por eles durante 
as avaliações em conjunto com as considerações e correções pontuadas pelos especialistas em 
IHC. 
24 
 
O perfil padrão que conseguiu-se levantar através da coleta de dados dos vinte e 
quatro profissionais de OM é: dezessete participantes se definem como o gênero feminino e 
sete do gênero masculino; a média de idade é de quarenta e seis anos, destes vinte e quatro, 
quatro estão na faixa etária de até trinta anos, três estão no intervalo de trinta e um até quarenta 
anos, quatro estão no intervalo de quarenta e um até cinquenta anos, e por fim treze estão no 
intervalo de acima dos cinquenta anos; no quesito de nível de ensino: dois avaliadores eram 
graduandos, dezesseis eram graduados, quatro eram especialistas e dois eram mestres. Suas 
áreas de formação são diversas, desde Educação Física, Psicologia, Pedagogia, Fisioterapia, 
Terapia Ocupacional e outras; o tempo de atuação na área dos profissionais é de dezesseis anos, 
destes: sete correspondem a um tempo de atuação de até cinco anos, três participantes entre seis 
e dez anos de atuação, treze entre onze e vinte anos, e um profissional com mais de vinte anos 
de atuação na área de OM. 
Com o perfil do professor de OM traçado, inicia-se o processo de organização e 
tabulação dos dados. Foram contabilizados noventa e três pontos ressaltados nos formulários 
discursivos, e a partir deste número, obedecendo as regras presentes no modelo de análise de 
conteúdo proposto por Bardin (2016), todas as considerações e ponderações foram classificadas 
e agrupadas de acordo com as suas afinidades e assuntos relacionados. Gerando um montante 
de quatorze categorias, sendo estas divididas em: “Facilidade de uso”, “Flexibilidade da 
ferramenta”, “Escassez de recursos”, “Sistema de camadas”, “Ludicidade”, “Feedback”, 
“Ajuda”, “Erros de usabilidade”, “Ferramentas e suas interações”, “Elementos e suas 
interações”, “Limitações da ferramenta”, “Sistema de pintura” e “Problemas de 
funcionalidade” (Gráfico 1). 
De acordo com 50% dos avaliadores a ferramenta é de fácil uso (Gráfico 1), 
proporcionando uma experiência prazerosa, com um sistema intuitivo que facilita o processo 
de construção através de sua interface simples e objetiva. Os avaliadores também relatam que 
por conta de tais características os usuários se sentem bem por terem um senso de autonomia 
bem consolidado, pois a qualquer momento podem efetuar modificações sem a necessidade de 
qualquer assistência ou tutoria constante. 
Este aspecto entra em consonância com outras características apontada por 45% 
dos participantes, que informam da flexibilidade que a aplicação oferece (Gráfico 1), 
especialmente quando se trata da facilidade de emular ambientes, pois de acordo com os 
profissionais eles podem retratar ambientes já conhecidos dos alunos e com isso começar o 
processo de ensino das técnicas básicas. Tal oportunidade só é alcançada através da variedade 
25 
 
de objetos e materiais presentes na biblioteca da plataforma, tornando possível a montagem de 
cenários que respeitem e se encaixem nas necessidades do aluno. 
Juntamente dos resultados dos relatórios SUS que reiteram este aspecto onde 
temos: uma média 4 a qual afirma que os usuários utilizariam o aplicativo com frequência e 
que essa adesão é graças ao sistema que a aplicação apresenta; com média 1,6 é apontada a 
simplicidade do sistema e como as interações se dão, este dado é reforçado com a média 4 que 
demonstra a facilidade de utilização da aplicação; com a média de 4 na escala, os usuários 
afirmam que a aplicação consegue integrar todas as suas funções de forma coesa e natural e 
sem muitas inconsistências (média 1,8 na escala), proporcionando assim um processo de 
aprendizado mais fácil, o qual se consolida com o uso constante, de acordo com a média de 3,8. 
Porém, em contrapartida ao que foi afirmado, o índice relativo à necessidade de aprendizado 
anterior ao uso da aplicação nos informa a média de 2,3, o que pode parecer baixo, todavia, 
veremos em seguida que muitas dúvidas não foram sanadas no primeiro momento e vários 
participantes necessitaram de assistência para ter uma plena compreensão da ferramenta e de 
seus sistemas e interações. 
É perceptível que a ferramenta ainda não apresenta a variedade de materiais 
necessária para possibilitar a construção de ambientes que suportem o ensino de mais técnicas 
de OM. De acordo com 50% dos avaliadores a ferramenta peca por não apresentar uma gama 
de obstáculos presentes no cotidiano dos alunos (Gráfico 1), elementos como: desníveis, 
buracos, rampas, batentes, obstáculos aéreos etc. Outra limitação que acentua o argumento da 
falta de materiais, é que os alunos não terão uma noção realista de algumas estruturas que 
obedecem a uma ordem e padrão, um exemplo é o piso direcional que só apresenta a 
possibilidade de ser inserido no sentido horizontal. 
Outro desafio que foi pontuado por 33% dos usuários, é a dificuldade de 
compreender os elementos e suas possíveis interações (Gráfico 1). Parte dos avaliadores não 
compreenderam o uso de ângulos para informar qual direção os objetos estariam posicionados 
em relação ao personagem. No atual estado da aplicação, a direção que o objeto aponta é 
indicado pela angulação dele em relação ao sistema de graus, caso os usuários estiverem 
buscando um micro-ondas que esteja apontado para a direção sul do canvas, devem procurar 
pelo objeto com o nome de “Micro-ondas 180°”, supondo que os futuros usuários não tenham 
a mesma afinidade e compreensão de um sistema por graus, essa tarefa pode se tornar uma 
etapa frustrante durante o processo de construção. Outro problema encontrado pelos 
avaliadores é como o sistema não informa ao usuário que existem objetos compostos por 
múltiplas partes, mesmo que o usuário compreenda a existência de tais objetos, a aplicação não 
26 
 
dá nenhum feedback ou instrução que informe o usuário da possibilidade de inserir múltiplos 
tiles em um único clique. 
Sabendo que estas dificuldades são advindas da forma como a plataforma trabalha 
uma das suas principais mecânicas, o sistema de pintura pode ser mal compreendido e dificultar 
todo o processo de aprendizado do construtor, esse obstáculo é apontado por 20% dos 
avaliadores, os quais ressaltam que a forma como a interação é apresentada é muito vaga e 
deixa brechas para dúvidas (Gráfico 1). Pois durante os primeiros minutos com a ferramenta a 
ideia de que era necessário pintar os tiles no canvas para que esses fossem inseridos pode ser 
comprometida a partir do momento em que o usuário necessite alternar entre os modos de 
pintura e de apagar, sendo que ambos ocupam o mesmobotão. Alguns relatam o fato de serem 
levados a reiniciarem o processo de construção e, consequentemente, perderem seus progressos 
por não saberem apagar elementos e corrigir os erros cometidos. Cerca de 8% dos avaliadores 
apresentaram dificuldades de compreender o sistema de camadas (Gráfico 1), o qual está 
intrinsecamente atrelado ao sistema de pintura. O principal motivo pela qual tal dificuldade 
sentida pelos avaliadores está constantemente presente é apontada por 37% dos participantes. 
Todos relataram que mesmo após as explicações previamente fornecidas ainda havia dúvidas 
relativas à forma de inserção de objetos, angulação de objetos e giro relacionado ao 
personagem, sistema de camadas, dentre os vários conceitos presentes na plataforma. 
 
Gráfico 1 – Categorias de avaliação Professores de OM (incidência) 
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Fa
ci
lid
ad
e
 d
e
 u
so
Es
ca
ss
e
z 
d
e 
 r
ec
u
rs
o
s
Fl
ex
ib
ili
d
ad
e 
d
a 
fe
rr
am
e
n
ta
A
ju
d
a
El
em
en
to
s 
e 
su
as
 in
te
ra
çõ
e
s
Fe
rr
am
en
ta
s 
e 
su
as
 in
te
ra
çõ
es
Si
st
em
a 
d
e 
p
in
tu
ra
Fe
ed
b
ac
k
Li
m
it
aç
õ
e
s 
d
a 
fe
rr
am
e
n
ta
Lu
d
ic
id
ad
e
Si
st
em
a 
d
e 
ca
m
ad
as
P
ro
b
le
m
as
 d
e 
fu
n
ci
o
n
al
id
ad
e
Er
ro
s 
d
e
 u
sa
b
ili
d
ad
e
Su
ge
st
ão
Gráfico 1: elaborado pelo autor (2020). 
27 
 
Reforçando esta necessidade de melhoria no sistema e em suas interações, fora 
apontada a necessidade de uma tutoria ou assistência de alguém que domine a ferramenta, pois 
a média apontada no formulário SUS, no aspecto de necessidade de assistência para o uso da 
aplicação é de 2,3 e o índice relativo à aplicação gerar dificuldades é de 1,4. Este parâmetro 
será revisitado durante as análises dos especialistas em IHC, onde o aspecto de ajuda e tutoria 
serão aprofundados e explorados para tentar melhorar esta necessidade do sistema, além de 
serem dadas sugestões por partes dos analistas. 
A aplicação finaliza o seu SUS Score Geral com média de 76, na pontuação de 0 a 
100, classificando-a na categoria Boa. 
Através dos resultados obtidos pelo questionário NASA TLX, pode-se perceber 
uma predominância em três aspectos chaves para retratar a carga de trabalho sentida pelos 
usuários, estes são: “Demanda Mental”, “Demanda de Tempo” e “Desempenho Próprio”, tendo 
estes pontuado respectivamente 263, 215 e 224 em uma escala de 0 a 500. Como analisado 
anteriormente, os usuários necessitam dedicar tempo para iniciar o aprendizado da ferramenta 
por terem que memorizar e se habituar com suas mecânicas. Por esta aplicação ser digital 
percebemos que o a demanda mental se sobressai em comparação com a demanda física, mas 
não isenta o usuário de seu desempenho próprio, pois a finalidade da ferramenta é que o 
construtor tenha total autonomia em suas ações e decisões, portanto é de grande importância 
que o sistema e a aplicação consiga transmitir e ajudar o seu usuário a ter total controle e 
feedbacks constantes, para assegurar que o mesmo possa compreender o seu fluxo de 
construção, assegurando-o que o processo seja prazeroso e intuitivo. 
 
3.3 Processo avaliativo do E3 – Especialistas em IHC 
 
Testes foram organizados com 24 especialistas na área de IHC (Interação Humano-
Computador) para avaliar as duas interfaces da aplicação, o criador e editor de mapas online 
E3 e a plataforma de renderização em smartphones ENA. Como o propósito principal deste 
trabalho é focado exclusivamente na reestruturação e redesign da plataforma online E3, iremos 
nos ater no que consiste a primeira sessão dos avaliadores e os dados coletados da referida 
sessão. 
Todos os encontros foram estruturados para a modalidade presencial, porém com o 
início do quadro mundial de pandemia do Covid-19, os encontros restantes para a primeira e 
segunda sessões foram adaptados para o contexto online, através de reuniões realizadas pela 
plataforma de vídeo Google Meet. Todas as vinte e quatro sessões foram gravadas com o 
28 
 
consentimento de seus participantes através do preenchimento e assinatura do termo de 
consentimento, onde eles concordam com os termos e responsabilidades relativos à pesquisa e 
confirmam a sua atuação na área de IHC. Todas as sessões foram conduzidas pelo especialista 
e criador da plataforma E3. 
O propósito desta primeira sessão é apresentar a ferramenta Web E3, explicar onde 
ela irá se encaixar no contexto de auxílio aos professores de Orientação e Mobilidade, 
demonstrar as suas funcionalidades, guiar os avaliadores dentro do ambiente mostrando-os 
menus, fluxo de navegação e elementos que serão utilizados para a construção do mapa. Além 
de explicar como funciona a lógica de funcionamento por trás dos conceitos de pintura em 
camadas. Durante todos os encontros os avaliadores eram acompanhados pelo criador da 
ferramenta. Ao término das apresentações os participantes partiram para o processo avaliativo 
do software de acordo com as heurísticas guias para criação de aplicações para soluções 
digitais. 
Relativo aos participantes, a faixa etária média de todos é de aproximadamente 
trinta e três anos de idade, a divisão de gêneros entre eles são iguais, doze pessoas que se 
identificam com o gênero masculino e doze que se identificam com o feminino, sendo oito 
graduados, três pós-graduados, um mestrando, sete mestres, dois doutorandos, dois doutores e 
um com graduação incompleta. Suas áreas de atuação começam em IHC, UX, UI, Design de 
Informação, Jogos digitais e várias outras. O tempo de atuação na área é em média de seis anos. 
Dos vinte e quatro participantes, vinte e um afirmam já ter realizado avaliações de aplicativos 
e a média entre eles é de nove aplicativos por avaliador. Os participantes também se 
autoavaliaram para definir o seu nível de expertise relacionado a avaliações de aplicativos, 
sendo ofertadas as opções: iniciante, intermediário e avançado. Com base nisso temos um total 
de: quinze avaliadores os quais se declaram de nível intermediário, seis de nível iniciante, dois 
de nível avançado e um participante que não especificou. 
Após todas as instruções e apresentações serem encerradas, era propiciado um 
momento de interação para que os avaliadores pudessem executar uma lista predeterminada e 
padronizada de tarefas que consistiam em: criar um mapa para o jogo seguindo o estilo de caça 
ao tesouro, no qual ao final da caça o jogador deveria voltar ao ponto inicial. Não seria exigido 
ao usuário seguir uma sequência pré-estabelecida de objetos; exportar um mapa; importar um 
mapa pré-existente; e para finalizar, exportar um novo mapa. Durante todas as etapas do 
primeiro encontro, os avaliadores poderiam tirar quaisquer dúvidas e questionamentos relativos 
ao uso da ferramenta, conceitos do sistema, e caso quisessem, poderiam comentar as suas 
experiências durante o uso e sugestões para melhorias em futuras atualizações. 
29 
 
Ao término da lista de atividades, dá-se início ao processo avaliativo de fato, onde 
cada especialista recebe um relatório em formato de questionário relacionado aos diferentes 
aspectos da ferramenta, o documento foi estruturado em duas etapas, baseadas na categorização 
das heurísticas de Nielsen e nas regras de ouro de Schneiderman. Na primeira etapa, os dados 
eram mensurados através de uma reprodução da escala estruturada por Likert, começando com 
“Totalmente de acordo” e indo até “Totalmente em desacordo”. A segunda etapa, tinha um 
cunho menor e relativo às observações gerais a aplicação e com sua escala avaliativa composta 
por cinco níveis: excelente, bom, neutro, regular e insuficiente. Além das perguntas com teor 
quantitativo, campos de observações foram inseridos para recolher dados mais específicos 
como: observações e justificativas para as notas assinaladas pelos especialistas, sendo este 
campo de preenchimento de teor totalmente opcional.3.4 Análise da avaliação do E3 – Especialistas em IHC 
 
Recolhidos os dados, estes, passaram por um processo de levantamento e filtragem 
em tabelas. Na primeira etapa do questionário, foram associados os números de 1 a 5, 1 para 
“Totalmente em acordo” e 5 para “Totalmente em desacordo. Na segunda etapa, os números 1 
e 5 foram associados a “Excelente” e “Insuficiente”, respectivamente. Médias foram geradas 
com base nos dados colhidos e estes serão comparados futuramente. 
Já as informações classificadas com teor qualitativo foram estruturadas baseadas 
no método de Análise de Conteúdo, criado por Bardin (2016), onde os dados são divididos e 
categorizados por suas afinidades e correlações, sendo 13 (treze) o número total de categorias, 
saindo de “Feedback Insatisfatório” à “Sugestões”, e apurando um total de duzentos e vinte 
observações que foram organizadas de acordo com o suas recorrências e similaridades. A partir 
desta otimização na catalogação, pode-se mensurar a recorrência e convergência das 
informações através de porcentagens geradas a partir do número de avaliadores que apontaram 
tais pontos em relação ao número total de participantes das entrevistas. Estes cruzamentos de 
dados qualitativos são reforçados pelos dados quantitativos. A partir de agora serão relatar as 
principais e maiores categorias, ressaltando as reclamações e pontuações mais urgentes e estas 
servirão de base para o processo de redesign da plataforma. 
Durante as vinte e quatro sessões de avaliação foi perceptível para 79% (setenta e 
nove porcento) dos avaliadores a escassez de feedback relacionadas à várias ações exercidas 
pelos usuários (Gráfico 2), ao todo foram registradas trinta e cinco menções, cerca de 15% 
(quinze porcento) de todas as menções coletadas. 
30 
 
Dentro desta categoria de “Feedback Insatisfatório” começamos com ações críticas 
e de severidade catastrófica como sair da aba do navegador durante a etapa de construção, ao 
exercer tal ação nenhum prompt ou janela de diálogo é acionada para avisar o usuário que ele 
irá perder todas as alterações feitas em seu mapa, caso efetuada a ação, não há nenhuma forma 
para que o usuário reverta tal decisão. Outra ação que não ocorreu nenhuma forma de feedback 
foi durante a tentativa de inserção de dois personagens. É permitido ao usuário inseri-los, mas 
somente ao tentar exportar que a aplicação barra o construtor e informa que é necessário retirar 
um dos personagens, assim gerando um nível de frustração desnecessário, podendo ser evitado 
através de avisos no momento da inserção. Esse evento foi experienciado por 16% dos 
especialistas (Gráfico 3), tal erro foi categorizado como um problema grande na escala de 
severidade, pois impede o prosseguimento do usuário no processo de exportação de seus mapas. 
Outro erro, que fora apontado por 20% dos avaliadores (Gráfico 3), ocorre na nomenclatura do 
personagem pois ele é referido como Ponto Inicial, não existindo nenhuma informação ou aba 
de ajuda que associe os dois termos. 
Além dos feedbacks relacionados a janelas de diálogo, 12% dos avaliadores 
também apontaram que não existem efeitos sonoros os quais confirmem as ações dos usuários 
ao inserir objetos e/ou elementos durante a fase de construção (Gráfico 3), pois com a 
implementação deles, o construtor sempre estará ciente de suas ações e comandos, dando um 
suporte contínuo ao percurso cognitivo e domínio da ferramenta. Ainda mantendo a 
continuidade na categoria de feedbacks, um elemento que foi ressaltado por 25% dos 
avaliadores é a implementação de feedbacks visuais (Gráfico 3) para auxiliar o usuário no 
processo de construção, pois de acordo com suas declarações ocorreram momentos em que 
houveram falhas no processo de exportação pois objetos formados por mais de um tile não 
tinham nenhum tipo de indicação informando a obrigatoriedade de sua inserção. Duas soluções 
apresentadas foram: uma marcação em vermelho informando que o tile restante era de inserção 
obrigatória; a segunda solução era uma caixa de diálogo aparecendo ao usuário quando 
houvesse uma tentativa de ir para outra camada ou ao tentar exportar. 
Tendo em vista todos os erros apontados na categoria de feedback e todos 
relacionados ao sistema de pintura, 16% dos especialistas indicaram modificar o paradigma de 
construção do mapa. Atualmente o modelo adotado pela ferramenta é o conceito de pintura, 
onde a cada clique um tile é inserido no canvas e caso o usuário deseje retirar algo que fora 
inserido, deve-se selecionar a borracha e então apagar tile por tile. Essa interação também é 
prejudicada pela forma que a disposição dos itens foi efetuada, ambas as ferramentas (pincel e 
borracha) compartilham do mesmo botão que alterna entre os dois modos (draw e erase), ao 
31 
 
clicar no pincel o modo de pintura é ativado e o ícone é substituído pela borracha. O ato de 
substituir os símbolos gerou dúvidas para 33% dos avaliadores, pois não souberam ao certo em 
que modo estavam durante a construção, somente tendo essa dúvida sanada através de dois 
cenários: olhar o cursor do mouse e perceber que agora ele se transformou no ícone do pincel, 
ou através da interação com o canvas. Uma sugestão que fora citada é modificar a organização 
das ferramentas e suas disposições com base nas ferramentas Adobe e deixar todas visíveis, 
dando o feedback visual para qual das ferramentas está selecionada. Também fora relatado por 
41% dos especialistas em que as abas de cada camada apresentavam certas dificuldades na 
seleção de suas ferramentas, pois nelas eram apresentados os nomes das descrições de cada tile 
e em algumas descrições o número máximo de caracteres para uma boa visualização era 
ultrapassado e parte das letras sobrepunham os ícones. 
Sabendo que a maioria dos futuros usuários terão vivências diferentes com 
ferramentas digitais, o menu de ajuda oferecido pela aplicação não apresentou um bom 
desempenho em sanar as dúvidas e nem em solucionar problemas advindos de suas interações, 
de acordo com 66% dos participantes (Gráfico 2). A aplicação oferece seções com poucas 
descrições e falta de imagens para melhor situar o usuário e guiá-lo durante todo o processo de 
construção. Por isso, foi sugerido por treze especialistas a necessidade de implementação de 
tutoriais visuais através de vídeos, passo-a-passos e imagens ilustrativas para que o usuário se 
sinta seguro e possa avançar em suas tarefas. Outro ponto, levantado por 54% dos participantes, 
fora o uso constante de termos técnicos que para usuários de primeiro uso ou para pessoas as 
quais não conhecem a área ou termos em inglês (Gráfico 2), poderão sentir dificuldades em 
compreender de forma eficaz os significados de alguns termos utilizados como: tiles, ponto de 
início, importar, exportar etc. Além dos termos técnicos, fora percebido que o ambiente virtual 
tem sentenças não traduzidas da língua inglesa, falha apontada por 41% dos avaliadores 
(porcentagem gerada a partir do número de dados da categoria de termos técnicos), gerando 
uma barreira para aqueles os quais não têm conhecimento do idioma. As descrições de algumas 
ferramentas não são claras o suficiente para dar a entender a sua função ao usuário, juntamente 
da falta de padrão visual apresentado em seus ícones. 
O aspecto mais apontado pelos especialistas foi na categoria de “Erros de 
usabilidade”, de acordo com 87% dos avaliadores (Gráfico 2), nesta categoria foram 
contabilizadas quarenta e quatro observações, cerca de 20% do total de observações recolhida, 
de todas as categorias. A ausência de funções de desfazer ações e seus respectivos atalhos, 
visando melhorar o fluxo e diminuir a frustração do usuário ao errar durante o processo de 
criação, demonstrou um apanhado de 75% dos profissionais, este é considerado um problema 
32 
 
grande na escala de severidade. Outro tipo de interação que não estava presente durante todo o 
uso e nos menus foio botão voltar, os únicos presentes eram os botões fechar e fechar aba. Sua 
visibilidade era pequena fazendo o usuário passar alguns segundos para encontrar e conseguir 
interagir com ele, tornando o processo mais frustrante, especialmente durante o uso da 
aplicação em sua versão mobile, a qual apresenta vários problemas relativos ao formato de 
interação idealizado e ao comumente utilizado em smartphones, este ocorrido com 20% dos 
participantes. 
A aplicação não apresenta função de salvamento automático, para solucionar esse 
aspecto 20% dos avaliadores sugeriram a criação de um sistema de login para a plataforma. 
Todas as criações seriam cadastradas a uma conta, para tornar possível ao usuário criar e alterar 
seus mapas independentemente se ele estiver em um computador ou dispositivo móvel. 
Relativo aos elementos de criação, alguns usuários pontuaram na dificuldade de 
distinguir o piso de gesso em comparação com o fundo do canvas, que compartilha da mesma 
cor branca (16%). O aspecto de rotação presente nos objetos pode ser mal interpretado ou não 
entendido por conta de sua descrição, o programa utiliza de uma diferenciação através dos 
números de graus que o objeto apresenta, ex.: computador 270°, geladeira 90°. Essa confusão 
foi apontada por 20% dos profissionais. 
Um pedido que fora externado por 16% dos participantes é que a ferramenta suporte 
um modo de pré-visualização da renderização, antes do mapa ser exportado e renderizado pelo 
aplicativo móvel. Pois vários professores e avaliadores demonstraram interesse em visualizar 
seus mapas antes de exportar para coibir erros e insatisfação relativo às expectativas em 
comparação com a sua ideia inicial. 
E por fim, foi percebido a necessidade de a aplicação manter o mapa criado após a 
mudança de idioma da ferramenta (16% dos avaliadores), pois ao trocar no menu superior 
direito, o navegador atualiza a página atual e descarta todas as alterações para aplicar o idioma 
escolhido. 
33 
 
Gráfico 2 - Categorias de avaliação Especialistas em IHC (incidência) 
Gráfico 3 – Considerações da categoria de Feedback Insatisfatório 
 
Gráfico 3: elaborado pelo autor (2020). 
 
Inserção de Personagem Nomenclatura do Personagem Feedback Sonoro Feedback Visual
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Er
ro
s 
d
e
 u
sa
b
ili
d
ad
e
Fe
ed
b
ac
k 
In
sa
ti
sf
at
ó
ri
o
A
ju
d
a
El
em
en
to
s 
e 
su
as
 in
te
ra
çõ
e
s
N
o
m
en
cl
at
u
ra
 d
e
 m
en
u
s 
e
el
em
to
s
D
is
p
o
si
çã
o
 d
e 
el
em
en
to
s 
e
in
fo
rm
aç
õ
e
s
Su
ge
st
õ
es
C
o
m
p
re
e
n
sã
o
 d
a 
m
ec
ân
ic
a 
d
e
p
in
tu
ra
Te
rm
o
s 
e 
lin
gu
ag
em
 d
e
in
fo
rm
aç
õ
e
s
Fe
rr
am
en
ta
s 
e 
su
as
 in
te
ra
çõ
es
Er
ro
s 
d
e
 in
te
ra
çã
o
 m
o
b
ile
B
u
gs
 e
m
 F
e
rr
am
en
ta
s
Si
st
em
a 
d
e 
ca
m
ad
as
Gráfico 2: elaborado pelo autor (2020). 
34 
 
4 DESENVOLVIMENTO DO REDESIGN 
 
Se apropriando de todos os dados e feedbacks coletados através das sessões com os 
professores de Orientação e Mobilidade e dos especialistas em IHC, iniciou-se o processo de 
concepção do novo design para a plataforma web E3, visando solucionar os pontos levantados 
e aprimorar a interação com a aplicação, tornando o processo mais intuitivo e utilizando de 
conceitos já estabelecidos no mercado, também antecipando uma futura portabilidade do 
sistema para as plataformas mobiles. Para isso, três grandes mudanças foram implementadas: 
mudança de paradigma navegacional, feedback constante para o usuário e um sistema de ajuda 
e aprendizado completo. 
 
4.1 Paradigma Navegacional 
 
Primeiro, foi necessária uma remodelagem da forma de navegação da ferramenta, 
pois como fora apontado durante os testes com os avaliadores, alguns menus não exerciam uma 
função efetiva e, muitas vezes, geravam dúvidas e confusão para os usuários finais. Os termos 
utilizados eram desconhecidos para aqueles que não eram inseridos no meio ou que não 
dominam a língua inglesa, pecando assim no aspecto de comunicabilidade para o usuário e no 
de conversação (BARBOSA e SILVA, 2010) por não deixar a informação ser passada de forma 
mais clara, gerando incertezas. Além de apresentar vários problemas na legibilidade dos nomes 
e da iconografia, contando com mecânicas que não eram bem explicadas, um sistema de ajuda 
que não sanava as dúvidas dos usuários, além de outras características apontadas pelos 
relatórios e apurações. 
Pensando nisso, uma pesquisa foi realizada para conhecer mais sobre o universo de 
aplicações voltadas para o princípio de construção de mapas e simulação de ambientes indoor. 
Tendo como base os comentários realizados pelos professores de OM em relação ao aspecto 
lúdico da aplicação, esse princípio foi então extrapolado para que o ambiente se tornasse mais 
informal e com aspectos relacionados a menus e interações realizadas em jogos como: The 
Sims, Minecraft, Animal Crossing e Sim City. 
Emulando este formato e adaptando-o para o atual cenário da interface, sempre 
prezando pela intuitividade, com o objetivo de diminuir o impacto de um período de adaptação 
inicial do programa, tornando assim a experiência do usuário mais amigável e seu aprendizado 
mais efetivo por gerar um fluxo de navegação mais objetivo durante o seu uso, diminuindo a 
carga de esforço e permitindo-o atingir um nível de competência e bom desempenho quando 
35 
 
devotado o tempo necessário (BARBOSA E SILVA, 2010). Sem esquecer os princípios de 
ferramentas com seu fluxo de navegação bem estabelecido, com uma organização de menus e 
termos coerentes para seus usuários, estes foram ressaltados pelos especialistas em IHC durante 
seu processo avaliativo. Alguns dos softwares citados foram o Adobe Photoshop e Corel Draw, 
programas utilizados frequentemente para os processos de pintura e construção de peças visuais 
avançadas, estes paralelos se deram pelo sistema atual da aplicação onde utiliza um sistema de 
construção baseado em um modelo de pintura. 
Partindo do princípio de que busca-se uma ferramenta mais amigável e intuitiva 
para o usuário, um estudo de cores foi realizado para estipular quais cores serão utilizadas na 
interface do software, pensado principalmente numa paleta reduzida para torná-la simples e 
objetiva em sua leitura, trazendo como principal forma de feedback visual o contraste entre as 
cores. O conceito atual traz uma abordagem mais séria e focada no paradigma da maioria das 
ferramentas formais de trabalho, gerando um ambiente monocromático em escala de cinza 
(Figura 1). 
 
Figura 1 – Interface atual da ferramenta 
 
Utilizando como parâmetro para a escolha das cores de acordo com Heller (2000) 
no seu livro A psicologia das cores, onde percebe-se que as grandes marcas e campanhas 
comerciais utilizam desta teoria para embasar seus produtos e associar os seus objetivos e 
percepções através das cores, e se utilizando da forma como o cérebro humano processa-as e 
relaciona-as com algum sentimento, lembrança ou quaisquer materiais que possam ser 
Fonte: Elaborado pelo autor (2020). 
36 
 
direcionados ao inconsciente, assim gerando um ambiente totalmente controlado pelo designer 
ou desenvolvedor. 
Além do aspecto emocional das cores, outro atributo foi levado em consideração e 
que já fora supracitado, é que serão utilizados durante todo o processo de navegação os 
conceitos de contraste. Com o objetivo de tornar a interface simples e de fácil entendimento, 
foi estabelecido que o contraste entre duas cores opostas seria a ferramenta necessária para 
guiar a navegação do construtor de mapas e manter o usuário sempre ciente de onde ele está e 
para onde ele poderá ir, gerando pontos focais durante o uso, de acordo com a teoria de Gestalt 
(CHANG; DOOLEY e TOUVINEN, 2002). Este ponto será abordado de forma mais extensa 
na sessão referente ao segundo parâmetro de mudança de feedback constantepara o usuário. A 
partir dessa linha de pensamento a tétrade de cores escolhidas para compor a identidade visual 
foram: azul, laranja, preto e branco. 
A cor azul foi escolhida por ter como característica principal a sua relação ao 
sentimento de confiança, força, calma, tecnologia e estabilidade (HELLER, 2000) (DIAS, 
2009), além de ser escolhida como a cor que a maioria das pessoas gostam (HELLER, 2000), 
e dentro do contexto brasileiro ela é a mais apreciada seguida de verde e vermelho (DIAS, 
2009). O conceito de confiança é referente ao sentimento que o usuário irá sentir ao estar 
navegando e operando uma aplicação segura, a qual oferece todos os recursos necessários para 
efetuar suas tarefas, este sentimento é reforçado pelo aspecto da estabilidade, onde o construtor 
irá perceber que este sistema é bem construído e bem pensado para que não ocorram perdas 
durante o seu uso. A característica de calma é necessária, pois usuários durante o seu primeiro 
acesso a uma nova ferramenta ou interface, sentem uma pressão e medo contínuo por não 
saberem os resultados de suas ações e interações, por isso é necessário um ambiente que suscite 
nele um sentimento de calma e de receptividade, aliviando esta ansiedade gerara pela situação 
de primeiro contato, estudo e compreensão da aplicação. E por fim, a cor azul, remete a um 
ambiente tecnológico que incita a inventividade e a novas formas de interação, tendo em vista 
que os usuários atuais, de acordo com o levantamento da pesquisa, são de uma faixa etária mais 
avançada. 
A segunda cor utilizada para o redesign foi a cor laranja, a qual tem como principais 
características associadas a ela: energia, equilíbrio, entusiasmo, expansão e humor (HELLER, 
2000) (DIAS, 2009). A energia e o entusiasmo são sentimentos necessários durante o processo 
de aprendizagem, pois este processo demanda tempo e pode levar a vários momentos de 
frustração por uma possível não compreensão das interações e possibilidade oferecidas pela 
ferramenta. Já no âmbito do equilíbrio, este entra em consonância com o aspecto de estabilidade 
37 
 
gerado pela cor azul, assim propiciando um ambiente onde o usuário se sinta seguro de si e 
possa se sentir livre para experimentar e vivenciar o contexto da aprendizagem. O principal 
ponto relacionado a cor laranja é o humor que ela traz para a composição, pois quebra a 
seriedade estabelecida pelo azul e deixa o ambiente mais amigável e instiga o construtor a 
conhecer mais da aplicação. 
Outro fator determinante para a escolhas das respectivas cores foi a sua visibilidade 
para pessoas portadores de daltonismo e para alguns portadores de baixa visão leve, porém o 
programa irá apresentar um modo para usuários de baixa visão, utilizando cores que gerem 
grande contraste como: amarelo, preto e branco. Para usuários daltônicos, o contraste geral será 
similar as cores azul e amarela, conseguindo diferenciar as demais estâncias propiciadas por 
este contraste. Complementado o conceito de contraste, utilizou-se as cores branco e preto para 
facilitar a leitura de textos mais longos e gerar um tom intermediário nos momentos de 
separação dos elementos por cores, pois ao colocar tons azuis juntos dos tons laranjas, em 
determinados momentos, o contraste pode prejudicar na leitura e diferenciação de caixas de 
diálogo, dentre outros objetos de importância da aplicação. 
Para acentuar mais os conceitos trazidos pelas cores, as formas e formatos dos 
objetos e elementos utilizados na aplicação também foram pensados para que os usuários 
possam interagir e prever a forma de interação através da affordance, por isso utilizou-se dos 
princípios e conceitos da psicologia da forma aplicada no design, onde é estudada a forma que 
o ser humano entende e compreende as formas, trazendo estes conceitos para o contexto de 
botões, menus e afins. Formatos quadrados e retangulares reforçam o conceito de estabilidade, 
de solidez e de confiabilidade, porém, para evitar um ambiente formal, sério ou engessado 
demais, arredondou-se os cantos dos retângulos e quadrados para gerar um sentimento de bom 
humor, ludicidade e informalidade, propiciando um ambiente amigável e receptível, reforçando 
o propósito de criar um ambiente propício ao aprendizado. A iconografia foi refeita para seguir 
o padrão estabelecido com formas arredondadas em suas bordas e por ter sido um dos pontos 
ressaltado durante as avaliações, pois como seu tamanho era bem diminuto em relação aos 
outros elementos presentes no editor de mapas, sua legibilidade era comprometida e em alguns 
casos os ícones não seguiam uma direção de arte base. Seguindo o mesmo propósito, a fonte 
escolhida MADE TOMMY, utilizada em seu formato Regular e Bold, também propicia uma 
boa leitura independente da resolução do monitor, visor ou tela, demonstrando letras de fácil 
diferenciação, além de ter um bom peso para que haja uma boa legibilidade. 
 
38 
 
Figura 2 - Interface Inicial do redesign da aplicação web E3 
 
Os menus principais foram formatados em duas formas: expansivos e janelas. 
Estes, tiveram suas affordances (NORMAN, 2013) trabalhadas de formas distintas, primeiro 
os menus de estilos expansivos (Figura 3) tem suas formas contínuas como se elas estivessem 
extrapolando a área de trabalho da interface, para gerar a ideia de que, ao clica-lo, ele irá se 
expandir para o lado referente a sua extremidade. Esta característica é reforçada durante o 
estado hover do mouse, na qual ele se expande revelando o nome do menu e somente 
apresentando os seus submenus ao ser clicado. Menus com o paradigma de botão (Figura 4) 
tem seus formatos referentes ao quadrado de extremidades arredondadas, mantendo a unidade 
visual, suas descrições são exibidas durante o estado hover do mouse (Figura 5). Esta decisão 
foi tomada para que o espaço visual do canvas não fosse prejudicado e os usuários 
apresentassem alguma forma de dificuldade para manusear os objetos inseridos por conta de 
muita informação presente, deixando a visualização comprometida. 
Fonte: Elaborado pelo autor (2020). 
39 
 
Figura 3 – Menu expansivo ativo 
 
Figura 4 – Menu do tipo botão ativado (Menu Opções) 
 
Da mesma forma, os menus referentes aos materiais de cada categoria para 
construção do mapa também apresentaram diferentes formas de apresentação, a primeira sendo 
utilizada uma barra horizontal onde parte dos elementos pertencentes àquela categoria são 
Fonte: elaborado pelo autor (2020). 
Fonte: elaborado pelo autor (2020). 
40 
 
mostrados, podendo os demais serem revelados através dos botões das extremidades das barras, 
onde estes movimentam os ícones para revelar os demais elementos que estavam ocultados 
(Figura 5). 
Figura 5 – Submenu de Construção Pisos ativado 
 
Caso o usuário queira uma visualização geral de todos os elementos de determinada 
categoria, ele poderá exibir todos através do botão “Mostrar tudo” no canto superior direito da 
barra slide de visualização de elementos, expandindo-a e dispondo todos os elementos presentes 
da categoria. Caso queira voltar para o modelo de visualização anterior, este poderá ser feito 
através do botão “Mostrar menos” (Figura 6). 
 
 
Fonte: elaborado pelo autor (2020). 
41 
 
Figura 6 – Submenu Mostrar Mais ativado 
 
Ao selecionar uma categoria, a ativa torna-se laranja e as demais mudam a suas 
cores para uma cor cinza (Figura 5 e 6), assim informando que elas estão inativas enquanto o 
usuário esteja utilizando a categoria atual, mas ao passar o mouse por cima das categorias 
inativas, elas expandirão no estado hover e sua cor irá modificar para o azul. Ao sair da seção, 
todos voltarão para a cor original informando que podem ser selecionadas novamente. 
Este princípio de mudança de cores entre azul, laranja e cinza será constantemente 
utilizado para informar as seguintes informações: cinza é relacionado aos menus ou objetos não 
ativos, azul para elementos