Metodologia 5is - Projetos e Processos

Metodologia
projetos e processos
Débora Aita Gasparetto(Org.)
1
Débora Aita Gasparetto(Org.)
Metodologia
projetos e processos
1ª edição
2
Diagramação: Débora Aita Gasparetto
Capa: Débora Aita Gasparetto
Projeto gráfico: Débora Aita Gasparetto
Este trabalho está licenciado sob uma Licença Creative

Commons Atribuição-NãoComercial-SemDerivações 4.0
Internacional. Para ver uma cópia desta licença, visite
http://creativecommons.org/licenses/by-nc-nd/4.0/.
Ao Luiz Augusto que me proporciona serenidade em
momentos de turbulência e ao pequeno e doce Mathias,
o melhor projeto de todos! Aos filhos não-humanos que são luz
nas nossas vidas! Aos meus pais pelo apoio de sempre!
Aos alunos, com quem aprendo a cada dia, inspirem-se e

contribuam na formação de um mundo mais igualitário, justo e pacífico!
SUMÁRIO
Introdução 8
Débora Aita Gasparetto
Redesenho da interface digital da Revista Arco:

o design centrado no usuário com a utilização 17
do método 5 I’s
Juliana Krupahtz
AlterECO: Projetação de uma plataforma digital 38

interativa e colaborativa para a substituição do uso
de animais no ensino e na pesquisa
A metodologia 5I`s na projetação do aplicativo Baloo 54

O Design de interação na prototipação de Planit 101

Milena Dutra Kosciuk
Prototipação de uma interface gamificada de inglês 122

para crianças com base na metodologia 5I’s
Gabriela Nehring
O Design de Informação na Projetação de um Website 144

voltado à Desenvolvedores de Jogos
Fabricio Arend Maica Pereira
Nathalie Coelho Crispim
Findtype – uma interface gameficada para introduzir 175
e aprofundar no universo da tipografia
Lucas Pozzobon
Projeto Aplicativo para leitura de 185

Mangás e Comics (Yume)
Valentina Montenegro da Silva
Revisado por Milena Dutra Kosciuk
Protótipo interativo do aplicativo de 199

cuidados capilares HairCare
Felipe Lázaro de Lima Carvalho
Utilização da metodologia 5i’s para projetação 212

de um aplicativo de alimentação saudável
Laura Muller
UX Design no desenvolvimento de um aplicativo 232

para comunicação na área de construção civil
Joao Vitor de Mello
A projetação do aplicativo SmartHomie 242

Gustavo Lago Quatrin
Protótipo Interativo para o aplicativo de 251

mobilidade urbana Meet
Julia Lima
BIKED APP: projeto de interface para 263

transporte alternativo
Natã da Silva
Utilização da metodologia 5i’s para criação de 272
um aplicativo de caronas
Lidiane Castagna Gonçalves
Interfaces Interativas e a capacidade excedente na 285

indústria têxtil: Reutilização e reaproveitamento
de resíduos na era da economia compartilhada
Micheli da S. Grigolo
Shelter: um refúgio em design de interface para o 302

contexto sociopolítico atual
Andressa Dotto Colusso
Henrique Pivetta Viero
A elaboração de um website em prol das 316

intervenções sociais: exercer a cidadania
por meio de interfaces digitais
Taynane Senna
Sobre o(a)s autore(a)s - vídeos 332
Confira outros projetos desenvolvidos no 336

Laboratório com a metodologia 5I`s
Introdução
Em 2015 iniciei minha trajetória no Curso de Desenho Industrial

da UFSM (Universidade Federal de Santa Maria). Durante esse período
em que tenho atuado junto ao Laboratório de Interfaces perguntei-
me diversas vezes qual seria o método mais adequado de ensinar uma
disciplina tão complexa e interdisciplinar. Sou Bacharel em Publicidade
e Propaganda (FACOS/UFSM), com Mestrado (PPGART/UFSM) e
Doutorado (PPGAV/UFRGS) na área de Artes Visuais. A pós-graduação
com ênfase em Arte Digital. Uma formação tão diversa que encontra no
Desenho Industrial o fio condutor, entre estética, função e comunicação.
No primeiro ano junto ao Laboratório estive imersa no estudo
de metodologias de projeto e de Design Interfaces, sendo que
minha vivência prática no mercado me tornou expressiva, intuitiva,
experimentalista e ágil, muito ágil. Embora essas características
possam ser adequadas a algumas empresas, sou desafiada a remar
contra a corrente do mercado voraz e topo desafios! Projetos de
Desenho Industrial são focados em incríveis recursos gráficos, no uso
indiscriminado de grids, em tipografias analíticamente estudadas e no
abuso de métodos que costumam deixar o projeto mais demorado e ao
mesmo tempo mais refinado.
Esse timing do mercado faz parecer inadequado levar um semestre
inteiro projetando apenas uma interface, ou duas, no máximo. Entretanto,
há uma oportunidade de apreender na íntegra um método e poder
fazer seu uso total ou parcial para cada projeto, adaptando o método às
necessidades reais do projetista.
A aproximação com autores como Bonsiepe (1984, 2011, 2012)
Lobach (2001) e Munari (2008) trouxeram uma visão do Desenho
Industrial, orientando processos criativos, guiando etapas de projeto que
são comuns como geração de ideias, pesquisa, geração de alternativas
e desenvolvimento. Mas, sobretudo, aprendi a pensar com foco na
solução de problemas. Já na área do Design de Interfaces explorei o
8
universo de conceitos, métodos e práticas de Garret(2011), Lowdermilk
(2013) e Teixeira (2014), mas li uma lista bastante razoável de livros sobre
a área, algumas indicações estão citadas no artigo “A metodologia 5I`s na
projetação do aplicativo Baloo”, que é leitura obrigatória para compreender
a metodologia 5I`s na íntegra.
Busquei me aprofundar em cada conexão que pude dos círculos
que se interceptam do Design de Interação (SAFFER, 2010). Cada
termo abre um mundo em que é possível se econtrar e se perder. Aqui
fica tão fácil compreender a Ansiedade da Informação (WURMAN,
2001) que vivemos.
A partir dessas leituras, experimentei com os alunos alguns dos
métodos, basicamente os planos de Garret (2011) e o Projeto E, proposto
por Meurer (2010). Ambos pareceram interessantes, porém sentia que
precisava reduzir algumas etapas, aprofundar outras e inserir técnicas
e fases que a mim pareciam adequadas. Uma das minhas principais
questões era reduzir as etapas que antecedem o desenho do protótipo
interativo sem perder a bagagem analítica e desenhística que o designer
deve obter. A ferramentas de prototipagem interativas presentes no
mercado até o momento, facilitaram muito esse processo. Por exemplo,
não vejo a necessidade de trabalhar com wireframes desenhados no
Adobe Illustrator ou Adobe Photoshop se utilizarmos ferramentas
como Adobe XD, Figma, UXPIN, Proto.io, JustInMind, entre outros que já
permitem organizar a navegação e os testes com usuários.
Por não sentir conforto em alterar as metodologias propostas com
tanto estudo e resultados incríveis, achei mais coerente propor uma
metodologia didática, que segue a ideia das cinco grandes fases do
Garret, mas reorganizando algumas prioridades e condensando alguns
processos, sendo que a maioria dos projetos é executada por um ou
dois alunos.
No artigo intitulado “Design centrado no usuário: redesenho
da interface digital da Revista Arco” (KRUPAHTZ;GASPARETTO, 2017)
publicado no 16° USIHC – Congresso Internacional de Ergonomia e
Usabilidade de Interfaces Humano Computador(2017) e na Revista HFD
(Human Factors in Design) (2018), e republicado aqui, no intuito de organizar
o maior número de referências sobre o método, é possível se aproximar
da primeira ideia do que seria a metodologia, com as fases macro
estabelecidas, mas ainda com nomes de fases diferentes daquelas
usadas atualmente. O projeto realizado na ocasião era real: o redesign
9
de um website institucional, que abriga a Revista ARCO, produzida pelo
Laboratório de Experimentação em Jornalismo (LEx), o que serviu para
testar o método dentro e fora do contexto do Laboratório de Interfaces.
Uma experiência que motivou o seu aprimoramento e aproximou o
Laboratório coordenado pela professora Laura Storch do Laboratório de
interfaces do DI.
O segundo artigo aqui apresentado “AlterECO: Projetação de uma
plataforma digital interativa e colaborativa para a substituição do uso
de animais no ensino e na pesquisa” expõe a coletividade do projeto
AlterECO, uma plataforma destinada aos métodos substitutivos ao uso
de animais no ensino e pesquisa. Foi realizado com a turma do segundo
semestre de 2018, na proposta de testar a metodologia em equipe. O
resultado foi um projeto que ainda está em desenvolvimento, mas traz
uma aproximação com a Educação Humanitária, movimento ao qual
estou integrada.
“A metodologia 5I`s na projetação do aplicativo Baloo” explica a
aplicação do método 5I`s na projetação de uma rede social de doação/
troca no segmento da moda. Foi escrito justamente para exemplificar
o método e oferecer suporte teórico aos alunos. Nele são encontradas
grande parte das referências utilizadas no laboratório, para cada um dos
temas ali discutidos. É o texto mais completo que consegui reunir sobre
a metodologia e contém sua versão mais recente.
Os Capítulos “O Design de interação na prototipação de Planit” e
“Prototipação de uma interface gamificada de inglês para crianças com base
na metodologia 5I’s” trazem artigos que resumem os TCCs (Trabalhos de
Conclusão de Curso) de duas alunas orientadas por mim, Milena Dutra
Kosciuk e Gabriela Nehring. Eles foram os primeiros TCCs a utilizarem a
metodologia 5 I`s e conseguiram um resultado muito relevante. Sugiro
a leitura, para a compreensão da aplicação, mas também pelo contato
com o design de interação, no primeiro, e com a gamificação e o estudo
de línguas, no segundo.
Em 2010, no Festival de Arte e Tecnologia de Mato Grosso do Sul
(FAT 2.0) ouvi Lúcia Santaella dar seu testemunho em uma palestra. Ali,
a autora de mais de 50 publicações solo, contava que primeiramente
escrevia para entender, depois para aprender e por fim para ensinar. Levo
esse ensinamento como ferramenta didática e incluí nas disciplinas que
ministro a prática de exigir artigos dos alunos, para que compreendam
conceitos e aprendam com a prática e escrita de projetos. Como nem
10
sempre os alunos têm a prática da escrita científica, muitos apresentam
relatórios, os quais considero bastante ricos, pois documentam o
processo e narram as trajetórias do projetista, ou criam um storytelling,
termo que está na moda na área de UX e de marketing.
Os treze capítulos seguintes devem ser entendidos como relatórios
de projeto, realizados em um curso de nível graduação. Mesmo que
alguns consigam fazer um aprofundamento mais teórico. Os artigos
escritos por Taynane Senna e Micheli da S. Grigolo foram previamente
aprovados no evento internacional SIGraDi 2017, mas como não tivemos
condições de participar, acabaram não sendo publicados, então essa é a
oportunidade de mostrarem-se!
Para quem como eu gosta de se aventurar na busca por soluções
para problemas reais, é preciso observar mais de perto os projetos aqui
descritos. Todos são pensados com esse intuito, por mais lúdicos
ou fúteis que pareçam, como uma interface para desenvolvedores de
jogos, outra gamificada sobre tipografia ou mangás, ou ainda aquela para
os que apostam no cuidado com os cabelos. Bem, a indústria dos jogos
move uma economia que já ultrapassa o cinema e a música juntos, sendo
uma das mais lucrativas em meio ao momento COVID-191 faturando mais
de R$ 56 bilhões, apenas em abril de 2020. Nada mais justo e útil do que
projetar visando preparar as pessoas para trabalharem nesse mercado
emergente! Em “O Design de Informação na Projetação de um Website
voltado à Desenvolvedores de Jogos”, Fabricio Arend Maica Pereira e
Nathalie Coelho Crispim conduzem de modo sério e com embasamento
de pesquisa o projeto, que tem uma estética encantadora e autoral.
Já imaginou o mundo sem tipografia ou o uso inadequado das
fontes nas principais coisas do seu dia-a-dia? Seja o texto de uma
mensagem rápida que troca na rede social, ou na compra que acaba de
fazer? Ou pior ainda, imagine uma baixa leituralidade ou legibilidade em
todos os smarths que estão a sua volta. Isso levaria ao caos e também
a erros que poderiam ser fatais! Os designers que estudam tipos são
responsáveis por pesquisar e aplicar os detalhes certos de cada fonte
em qualquer meio de comunicação com o qual você possa interagir. Por
isso a interface projetada por Lucas Pozzobon, relatada em “Findtype
– uma interface gameficada para introduzir e aprofundar no universo
1 Dados disponíveis em https://www.folhape.com.br/economia/isolamento-social-

-e-alta-do-dolar-alimentam-mercado-de-games/144652/ - Acesso em 08 agosto 2020
11
da tipografia”, tem uma importância democrática, além da didática.
Inclusive esse projeto do Lucas está sendo aprofundado em seu TCC,
com orientação do professor Volnei Antônio Matté e minha co-orientação.
A seriedade com que Valentina Montenegro da Silva conduz o
“Aplicativo para leitura de Mangás e Comics (Yume), demonstra que não
apenas a tipografia mas o estudo de modos mais imersivos para a leitura
de mangás e comics pode contribuir para a formação de leitores. O
entretenimento tem sido tão substimado ultimamente! Essa imersão,
viabilizada também por meio da ergonomia, arquitetura da informação,
design de interação e de informação, pode impactar na criação de
imaginários, na contação de histórias e no próprio mercado desse tipo
de produção.
O aplicativo HairCare, projetado pelo Felipe Lázaro de Lima
Carvalho e descrito em “Protótipo interativo do aplicativo de cuidados
capilares HairCare”, mostra que os consumidores começam a ser ouvidos
e sugere marcas e linhas de produtos capilares que atendem às minorias
como pessoas crespas, cacheadas, onduladas, veganas, alérgicas, que
optam por produtos naturais, entre outras, que não se encaixam em
alguns padrões estabelecidos pela sociedade. Essa amplitude, assim
como um olhar sobre si mesmo fazem com que o projeto seja também
político e crítico.
Esse cuidado com o eu, também reflete no cuidado com a natureza.
A alimentação das pessoas e seus maus hábitos alimentares impacta
no aquecimento global, no desperdício de toneladas de alimentos e na
miséria e fome de milhões de outras pessoas. Impacta na saúde pessoal
e coletiva. Mas como se engajar na mudança de um hábito? A interface
Livethy, projetada por Laura Muller está focada no planejamento diário,
no engajamento e na mudança de hábitos alimentares. O texto “Utilização
da metodologia 5i’s para projetação de um aplicativo de alimentação
saudável” traz uma pesquisa bem detalhada da autora.
Os problemas pessoais também nos interessam, afinal fazem
o dia ficar melhor ou pior e contribuem para afetar a nossa atitude em
relação ao todo. Quem já fez alguma obra em casa, por menor que
seja, sabe que pode causar uma imensa dor de cabeça, mas muitas
vezes, o problema é apenas de comunicação. Essa é a proposta que
João Vitor de Mello defende com o app Minha Obra, descrito em “UX
Design no desenvolvimento de um aplicativo para comunicação na área de
12
construção civil”. A solução pode estar no acompanhamento do projeto,
na sua documentação ou em uma conversa rápida entre profissionais,
equipes e clientes.
E quem nunca imaginou viver em uma casa do futuro? O que
parecia tão longe de acontecer já faz parte do cotidiano de muitas famílias
com a popularização de dispositivos inteligentes que vão do relógio, à
TV e à casa inteira. Pensando nisso, Gustavo Lago Quatrin descreve “A
projetação do aplicativo SmartHomie”. A proposta do app é controlar a
casa toda, além de oferecer segurança ao usuário.
Seguindo a linha dos smarts, Julia Lima, pensa no âmbito das
cidades, as cidades inteligentes e o controle dos seus fluxos. Seu
foco está nos estacionamentos e no problema cotidiano da falta de
vagas, seja para carros, motos ou bikes. “Protótipo Interativo para o
aplicativo de mobilidade urbana Meet” expõem a primeira versão do
projeto, que atualmente está sendo trabalhado no TCC1, da autora,
sob minha orientação.
E, quem busca modos mais ecológicos de percorrer a cidade,
pode se aproximar do Biked, aplicativo prototipado pelo Natã da Silva
e descrito no texto “BIKED APP: projeto de interface para transporte
alternativo”. O projeto é bastante ativista, colaborativo e contemporâneo,
sendo que busca reduzir os carros nas ruas, bem como a poluição e
congestionamento que eles geram, além de aproximar pessoas que tem,
e que não tem bicicleta, da natureza, de modo comunitário.
A preocupação com o trânsito e a poluição também integram
a problemática de Lidiane Castagna Gonçalves, aqui com foco nos
deslocamentos para a UFSM. O projeto pode ser compreendido em
“Utilização da metodologia 5i’s para criação de um aplicativo de caronas”.
Anterior a ela, outra aluna, Cristiane Ziegler Leal, já havia projetado uma
interface semelhante, porém a segurança dos passageiros sempre é um
problema nesse tipo de contrução. Nesse sentido, a partir da geração de
alternativas e testes, a segurança foi um requisito bastante trabalhado
nessa interface, que insere-se no contexto da economia compartilhada.
Também relacionado à economia compartilhada está o projeto de
Micheli da S. Grigolo, relatado em “Interfaces Interativas e a capacidade
excedente na indústria têxtil: Reutilização e reaproveitamento de
resíduos na era da economia compartilhada”. Como também relatei no
desenvolvimento do projeto Baloo, a indútria da moda é uma das maiores
13
poluentes no planeta e ainda condiciona inúmeras pessoas ao trabalho
escravo. Reutilizar resíduos da insústria textil é mote do website REUSE,
visando minimizar esse problema.
Já, preocupados com o bem estar da comunidade LGBTQ+,
Andressa Dotto Colusso, Henrique Pivetta Viero projetam Shelter,
um abrigo para as pessoas desse grupo que estão em situação de
vulnerabilidade. O projeto foi iniciado pelos dois no Laboratório
Profissionalizante de 2018 e Henrique deu sequência a ele no Laboratório
Orientado de 2019. É um projeto que além de confrontar os retrocessos
em relação aos direitos humanos, da democracia e liberdade, ampara os
LGBTQ+ tanto oferecendo moradia, quanto possibilidades de trabalho
e ajuda psicológica. Nesses tempos difíceis e obscuros, podemos
nos apoiar em Agamben (2009) para pensar que o contemporâneo é
aquele que consegue ver além do escuro, ir além do óbvio, buscando
justamente o que não é apropriado ou oportuno ao momento.
O último projeto aqui descrito é, assim como Shelter, um dos mais
urgentes de serem implementados. “A elaboração de um website em
prol das intervenções sociais: exercer a cidadania por meio de interfaces
digitais”, escrito por Taynane Senna narra um pouco dessa proposta que
foi iniciada ainda no primeiro semestre de 2017, junto ao Laboratório
Profissionalizante, tendo sido aprofundado no segundo semestre de 2018
e adquirido fôlego de TCC, sob minha orientação. O website responsivo
consiste em uma rede social que une as pessoas que precisam de ajuda
àquelas que podem ajudar. A ideia nasceu a partir da observação da
autora ao seu entorno, em um período de desastres ambientais que
deixaram inúmeros desabrigados. Atualmente, o Dá um Help aí? tornou-
se uma oportunidade de auxiliar no enfrentamento das catástrofes
contemporâneas, que incluem a pandemia do COVID-19.
Estamos em uma universidade pública, a UFSM, que tem
como missão: “Construir e difundir conhecimento, comprometida
com a formação de pessoas capazes de inovar e contribuir com o
desenvolvimento da sociedade, de modo sustentável”2. Temos muito
orgulho de sermos UFSM, assim como nos orgulhamos de sermos
Desenho Industrial.
O PPC Projeto Pedagógico do Curso prevê como papel do docente:
(...) - promover experiências de aprendizagem considerando
a motivação e a realidade social dos alunos no contexto
local e global, integrando o Curso à sociedade; - promover
2 Extratído do PDI Plano de Desenvolvimento Institucional 2016-2026 https://www.ufsm.br/pro-rei-
torias/proplan/pdi/- Acesso em 08 agosto 2020
14
a consciência ecológica e a ética profissional; - oportunizar
a interdisciplinaridade, a inovação em projetos e a busca
constante por pesquisa3
Esse papel reflete na formação que desejamos que nossos alunos
tenham, onde cabe destacar que o mesmo documento credita ao aluno a
autonomia na realização dos projetos e pesquisas, bem como a iniciativa
e a busca pela essência do Desenho Industrial. É nesse sentido que o
Laboratório tem trabalhado, buscando estimular seres humanos capazes
de inovar para melhorar o mundo a sua volta, levando em conta aspectos
sociais, ecológicos e humanos.
Em um âmbito muito mais amplo tenho buscado, a cada ano, propor
aos alunos refletirem e projetarem com foco na empatia e na promoção
de um mundo mais humanitário e justo com todos. Por isso, também
estamos inspirados nos 17 objetivos do desenvolvimento sustentável
da ONU4, cada vez mais urgentes de serem cumpridos. Tenho
certeza de que o desenvolvimento real desses protótipos impactaria
significativamente no mundo de modo positivo.
Ao memso tempo, compreendemos que cada projetista tem
seus objetivos pessoais, que o trabalho de design de interfaces não se
esgota, que os projetos levam muito tempo até saírem do papel e que,
sobretudo, demandam conhecimentos e ou equipes interdisciplinares,
que nem sempre são facilmente organizadas. Ainda, para que as ideias
se sustentem financeiramente é necessário o estudo e planejamento
muito coerentes, algo que os alunos podem buscar no decorrer do curso,
em laboratórios como o de gestão, coordenado pela professora Fabiane
Vieira Romano. Essas frustrações acompanham o nosso dia-a-dia, mas
nos animam no sentido de estabelecermos outras parcerias, como
algumas que tenho traçado com professores do Centro de Tecnologia e
da Comunicação, que certamente renderão novas publicações.
É importante mencionar que outros projetos, embora não tenham
ganhado artigos ou relatórios também se destacaram no Laboratório,
no período de 2017 a 2019, por isso ganharam um espaço ao final da
publicação, trazendo a interação, para servir de inspiração ao leitor e
registro acadêmico.

3 Extraído do PPC do Curso. disponível em: https://www.ufsm.br/cursos/gradu-

acao/santa-maria/desenho-industrial/projeto-pedagogico. Acesso em 08 agosto 2020
4 Os objetivos da Agenda 2030 estão descritos e podem ser acessados no se-
guinte link https://nacoesunidas.org/pos2015/agenda2030/- Acesso em 08 agosto 2020
15
A presente organização nada mais é do que o aprendizado de
alguns dos alunos que passaram pelo Laboratório de Interfaces, com
seus projetos encantadores, propositores e resolutores de problemas
reais, simples e pessoais ou extremamente complexos e coletivos.
Como algumas de suas escritas iniciaram antes de 2019, quando
substituí nomes de fases na metodologia 5I`s, tomei a liberdade de
alterá-las junto aos textos para não confundir os leitores. Boa leitura!
REFERÊNCIAS
AGAMBEN, G. O que é o contemporâneo? e outros ensaios. Tradução. Vinícius

Nicastro Honesko. Chapecó: Argos, 2009
BONSIEPE, G. Metodologia experimental: desenho industrial. Brasília: Cnpq/

Coordenação Editorial, 1984.
BONSIEPE, Gui Design, cultura e sociedade. São Paulo: Blucher, 2011.
BONSIEPE, Gui. Design: como prática de projeto. São Paulo: Blucher, 2012.
GARRETT, Jesse James. The Elements of User Experience: User-Centered Design

for the Web and Beyond. Second Edition. Berkley: New Riders Press, 2011
LOBACH, Bernd. Design Industrial. São Paulo, Editora Edgar. 2001
LOWDERMILK, T. Design Centrado no Usuário: um guia para o desenvolvimento de

aplica[vos amigáveis. São Paulo: Novatec Editora, 2013.
SAFFER, D. Designing for Interac[on, Second Edi[on: Crea[ng Innova[ve Applica[ons

and Devices. Berkeley, CA: New Riders , 2010
TEIXEIRA, F. Introdução e boas prá[cas em UX Design. São Paulo: Casa do Código,

2014.
WURMAN, R. S. Informa[on Anxiety2. Indianapolis: Que,2001
16
Redesenho da interface digital da Revista
Arco: o design centrado no usuário com
a utilização do método 5 I’s
Juliana Krupahtz
RESUMO: Este artigo tem o objetivo de expor e analisar o método de

desenvolvimento de interfaces centrado no usuário, a partir do redesenho
do site da Revista Arco da Universidade Federal de Santa Maria (UFSM).
A metodologia de projeto tem sido utilizada no Laboratório de Interfaces
do Desenho Industrial da mesma Instituição e mescla etapas propostas
pelos autores [GARRET, 2011] e [LOWDERMILK, 2013]. Como resultado,
pretende-se compartilhar um método eficiente para projetar adequadas
experiências de usuário nas interfaces digitais. A proposta inclui pensar
em pontos de interação entre a interface do website oficial da revista e
projetos interativos que encaminhem o usuário à experiência completa
que a revista oferece.
1. INTRODUÇÃO
O design centrado no usuário tem ganhado espaço nas principais
discussões sobre as interfaces digitais. No entanto, a pergunta que surge é
se todo o design não deve ser centrado no usuário. Pensando no projetista
como um resolutor de problemas reais, um facilitador de experiências
entre o usuário e o mundo, seja ele digital ou analógico, a resposta é sim,
todo o design deve ser centrado no usuário. Todavia, centrar o projeto no
usuário significa incluí-lo no processo de desenvolvimento de Interfaces,
abrir espaço para que não apenas o cliente e o projetista decidam os
caminhos que irão oferecer.
Conforme Lowdermilk (2013) o design centrado no usuário é
uma metodologia que deriva da Interação Humano-Computador (IHC)
e tem foco na experiência de usuário, por isso analisa o que o usuário
precisa, o contexto de uso de determinado dispositivo e o próprio
comportamento humano.
Como o webdesign está focado na experiência do usuário, diversos
autores irão abordar a User Experience. No Brasil, Fabricio Teixeira
(2014), reúne alguns princípios sobre User Experience (UX). Conforme
17
ele os UX designers são responsáveis por definir como as pessoas irão
interagir com o produto, é este profissional que desenha a estrutura dos
produtos digitais. UX é muito mais ampla que o webdesign, mas também
é aplicada a ele. Conforme ele a UX envolve as áreas de arquitetura de
informação, usabilidade, design de interação, taxonomia, estratégia de
design e pesquisa com usuários.
Esse artigo aborda as dificuldades e as oportunidades que se
abrem quando o usuário é incluído no projeto, quando se utiliza pesquisa
e cruzamento de dados reais para aprimorar o desenvolvimento de
cada etapa da projetação. Para iniciar essas análises, é fundamental
contextualizar o projeto de Redesenho do website da Revista Arco,
desenvolvida em conjunto com o Laboratório de Experimentação em
Jornalismo (LEx) e o Laboratório de Interfaces do Desenho Industrial da
UFSM, no qual o projeto foi desenvolvido.
O LEx é um laboratório do Curso de Comunicação Social – Jornalismo
(UFSM) e concentra suas atividades na produção jornalística na era das
mídias digitais, além de também participar da produção da Revista Arco
– veículo da Coordenadoria de Comunicação Social da Universidade –
de jornalismo científico e cultural impresso e digital.
A Arco é a revista institucional da UFSM produzida por técnico-
administrativos, alunos do curso de Comunicação Social – Jornalismo
e uma docente, no LEx. O material elaborado é divulgado pelo site da
revista, no endereço http://ufsm.br/arco. Essa revista, que circula on e
off-line, é o projeto que pauta o presente artigo, pois seu site não atendia
mais os requisitos e funcionalidades exigidos pela equipe de produção.
Assim, o foco é a Arco Digital (Figura 01), mesmo que pontos de contato
com a Arco Impressa tenham sido estrategicamente propostos.
O Curso de Desenho Industrial da UFSM tem uma nova estratégia
curricular, com foco na relação mestre-aprendiz, por meio de trocas entre
alunos dos Laboratórios Profissionalizante e Orientado, sob coordenação
dos professores responsáveis. Nesse contexto, no segundo semestre de
2016, o Laboratório de Interfaces teve como propos-ta projetar interfaces
digitais partindo de problemas reais e de clientes reais, mas pensando
para além da usabilidade, acessibilidade e aspectos tecnológicos dos
websites, nas novas possibilidades de experiência de usuário abertas
pela realidade aumentada e virtual. É importante mencionar que todos
os alunos participantes do laboratório estão envolvidos semanalmente
em discussões sobre os projetos, participando de dinâmicas de testes.
18
Isso, de fato, foi extremamente importante para o Projeto da Revista
Arco, pelo fato de que os alunos também fazem parte do público-alvo
da Revista.

Figura 1: Captura de Tela Website da Revista Arco Digital, antes do redesenho.
Fonte: http://ufsm.br/arco
O encontro dos dois laboratórios, LEx e de Interface, permitiu

que necessidades reais proporcionassem aprendizado e unificassem
o trabalho da bolsista e autora, tornando-o interdisciplinar. A
interdisciplinaridade é sempre recorrente em projetos digitais, pois
os mesmos envolvem conhecimentos desenhísticos, artísticos,
ergonômicos e de programação, ao menos, de FrontEnd. Profissionais,
cada vez mais, híbridos ganham destaque no mercado de webdesign.
Porém, nessa oportunidade, a área de Comunicação Social ofereceu
um suporte para que estratégias de ponto de contato com o website da
revista fossem melhor desenvolvidas, em um projeto que, normalmente,
não pensa para além da página que projeta. É importante destacar que
19
essa proposta interdisciplinar também contou com a participação do
bolsista Guilherme Bastos, do curso de Ciência da Computação.
A responsável pelo LEx, Prof.ª Dra. Laura Storch, e a editora-chefe
da revista Arco, a jornalista Luciane Treulieb, clientes deste projeto, foram
peças-chave, estando sempre presentes durante o processo criativo para
o redesenho da nova interface do site da revista, que foi desenvolvida no
Laboratório Profissionalizante de Interface, com a orientação de uma das
autoras.
Como em todo projeto de design, o briefing foi o ponto de partida.
Ainda em uma primeira reunião com as clientes, foi pautada uma divisão
para a exibição das matérias da Arco Digital e Arco Impressa, tendo as
publicações organizadas por ordem cronológica na página principal.
Em acesso às informações proporcionadas pelo Google Analytics, em
relação à edição da revista percebeu-se o número muito baixo de acesso
à seção do site destinada à revista impressa, localizada na metade inferior
da página principal, por isso foi requisitado também um destaque melhor
estruturado a essa divisão do site. Ainda na homepage, também deveria
ser organizado o leiaute com espaço para matéria destaque, porém que
não ocupasse o espaço de uma lateral da tela a outra, pois acabava
prejudicando as fotografias utilizadas, que são produzidas pela própria
equipe do LEx. Um processo criativo com participação tanto do usuário
que irá produzir o conteúdo para a interface – usuário publicador – quanto
do usuário que irá consumir a informação ali publicada – usuário leitor –,
faz com que o projeto se torne muito mais eficiente nos seus resultados.
Tanto na aplicação de pesquisa com usuário, no estudo das personas
como no contato direto com o público-alvo da revista (professores, alunos
e membros da comunidade da UFSM), percebeu-se que a interface do
website antigo da revista dizia respeito a um espaço-tempo anterior,
necessitando uma adaptação de linguagem para que mais pessoas do
seu público-alvo tivessem acesso a ela. Diversas alterações foram feitas
conforme as considerações de todas as partes envolvidas no processo
de projetação com foco no usuário. A seguir descreve-se a metodologia
utilizada, elaborada por uma das autoras, com base nas fases sugeridas
pelos autores Jesse James Garret (2011) e Travis Lowdermilk (2013). A
metodologia dos 5Is, publicada em primeira mão no presente artigo,
é baseada na ação, envolve as seguintes fases: ideação, incubação,
implementação, inspeção e instauração.
20
2. CONSIDERAÇÕES SOBRE A METODOLOGIA
Trabalhar com design centrado no usuário em Interfaces digitais

significa basear o projeto na experiência que se quer oferecer ao usuário.
Para isso é imprescindível recorrer a referências chaves como Garret
(2011). O autor propõe um método simples de projetar que pode ser
aplicado desde websites até projetos interativos mais complexos, para
web e além, método esse baseado na experiência de usuário e subdividido
em 5 grandes etapas (Figura 02), que vão de um nível mais abstrato e
mais próximo do designer até um mais concreto, que está mais próximo
do usuário. A proposta divide o produto em funcionalidade e informação,
ambas ocorrendo concomitantemente em cada etapa.
Na etapa preliminar, representada pela Estratégia, busca-se um
diálogo projetual entre o que o usuário precisa e o que o produto objetiva.
A próxima etapa, Escopo, traz as especificações funcionais e os requisitos
de conteúdo da interface. Após resolvê-los, é planejada a Estrutura do
projeto, com a arquitetura de Informação e o design de Interação. Na
sequência vem o Esqueleto, com o Design de Interface, o Design de
Navegação e também de Informação. A última etapa, na Superfície e já
mais perto do usuário, há o Design Sensorial. Esse na primeira publicação
de Garret (2003) era considerado como Design Visual, no entanto, as
interfaces sonoras, táteis, as Natural User Interface (NUIs), que estimulam
e são acionadas por meio de outros sentidos, e com a emergência da
internet das coisas, o termo sensorial ficou mais adequado.
Figura 2: Esquema visual da metodologia proposta por [Garret, 2011]
Figura 2: Esquema visual da metodologia proposta por [Garret, 2011]
21
Embora a metodologia sugerida por Garret seja bastante
pertinente, cada projetista, adapta-se melhor ou pior a uma metodologia.
Com a emergência de ferramentas de prototipagem interativas como
UxPin, Proto Io, JustInMind, entre várias outras em um campo crescente
de ferramentas, essa divisão mais delimitada pode ser ainda mais
simplificada, agrupando etapas de estrutura e esqueleto, por exemplo.
Ainda inserir testes com usuário a cada etapa e inseri-lo na projetação
da interface, ouvindo suas críticas e considerações, pode eliminar erros
e ajustar a interface a um padrão de pensamento que é diferente do
padrão do designer ou do cliente. É importante mencionar que pesquisa
recente do Nielsen Group [NIELSEN, 2016] demonstrou que apenas 5%
da população de 33 países ricos se considera avançada em informática.
Isso demonstra como a própria pesquisa sugere, que o designer ou
programador não é o usuário. Assim coisas que parecem óbvias para os
avançados, não são tão óbvias assim para 95% da população.
É por isso que o Design Centrado no Usuário de Lowdermilk (2013)
pode contribuir para a elaboração de uma metodologia que não inclui
apenas pesquisas e desenvolvimento de personas, mas também um
usuário acompanhando as etapas. Embora a publicação desse referido
autor seja bastante facilitada ao público leigo, traz preciosas dicas para
quem está iniciando o desenvolvimento de interfaces, sobretudo de
aplicativos. “O processo de design centrado no usuário funciona contra
pressupostos subjetivos acerca do comportamento dos usuários. Ele
exige provas de que suas decisões de design são eficazes” [LOWDERMILK,
2013, p. 27]. Assim aceitar feedbacks, compreender fluxos e tarefas de
um padrão mental do usuário fazem parte desse método.
Visando unir as questões mais focadas no usuário e nas personas
de Lowdermilk, com as etapas muito bem documentadas de Garret,
o método 5Is propõe ser um facilitador ao projetista iniciante, de fácil
assimilação pelas “5” etapas que iniciam com a letra “i”, focadas no
sujeito eu “I”, mas que no plural “s” significará nós. Essa ação conjunta
entre projetistas, clientes e usuários torna a projetação compartilhada e
mais eficiente, no sentido de minimizar erros. As etapas dividem-se do
seguinte modo: 1) IdeAção – fase que inclui o briefing, que é realizado e
explorado; o brainstorming, a tempestade cerebral das boas e más ideias;
uma busca inicial por referências na área para não casar com uma ideia
que já existe ou para aprimorar uma ideia mal elaborada; a elaboração de
mapas mentais com as ideias-chaves do projeto; as primeiras pesquisas
22
com usuário para verificar questões que o briefing possa ter deixado
em aberto; elaboração de personas, a partir dos resultados dessas
pesquisas, mas também da análise do público-alvo em contextos de
uso e ainda pontos de contato, que levam a criar situações de encontro
entre o usuário e o projeto de interface digital. Nessa fase é primordial
que o projetista se aproxime de campos como psicologia cognitiva e,
sobretudo, neurociência, porque tudo é sobre experiência.
A etapa 2 é a da IncubAção, aqui busca-se compreender as
personas criadas para extrair os requisitos e funcionalidades, os
primeiros voltados às necessidades do usuário e os segundos ao
detalhamento técnico da interface. Ainda nessa fase realiza-se uma
pesquisa mais profunda com análise de referências, que podem ser
tanto de interfaces concorrentes, quanto de interfaces que dispõem de
requisitos e parâmetros que o projeto tem como base. Aqui levantam-
se os prós e contras. Nessa fase escolhe-se também as tecnologias a
serem utilizadas para a implementação do projeto.
Na etapa 3, a da ImplementAção, realizam-se rabiscoframes
[Teixeira, 2014], o sitemap, o cardsorting, os protótipos em papel e
interativos, organizando a arquitetura de informação e design de
interação. Aqui é fundamental a participação do usuário no processo de
rotulagem e arquitetura de informação, deixando o projeto adequado
as suas necessidades. Simultaneamente, nessa etapa é pensado o design
sensorial, que é refinado na etapa seguinte. Assim, conhecimentos do
campo do design, como simetria, harmonia, proporção, uso de grids,
forma/função, trabalho de ícones, fontes, imagens, vídeos e sons já são
previamente escolhidos nessa etapa e refinados ou atualizados depois.
A 4ª etapa traz a Inspeção, aqui o refinamento é realizado após
serem implementados testes de usabilidade e acessibilidade com
usuários, aqui se faz análise detalhada da interface e se verificam as
heurísticas de avaliação. É importante inspecionar se além de agradável
visualmente e sensorialmente, o projeto está consistente, se gera
feedbacks adequados, se previne erros, se segue padrões, entre outros
itens que normalmente são avaliados, no contexto do Laboratório com
base em Jackob Nielsen. Essas etapas valem para todos os formatos de
responsividade, ou seja, capacidade do projeto de se adaptar a diferentes
formatos de tela, sobretudo quando falamos de web.
Por fim, parte-se para a InstaurAção, momento em que se
executa e entrega do produto final e são realizadas novas inspeções e
23
substituições, caso sejam necessárias. Como afirma Lowdermilk (2013),
um projeto de interface digital nunca está pronto. Isso acontece porque
diferentemente de edições impressas, a atualização dos meios digitais é
dinâmica, pode-se observar erros e prontamente corrigi-los sem custos
onerosos. Ainda é importante mencionar que a linguagem digital se
atualiza constantemente, forçando as interfaces a ajustarem-se às novas
tendências, com risco de ficarem obsoletas ou datadas.
Outro ponto importante de se destacar em relação à metodologia
dos 5Is é a abertura para trabalhar em sintonia com outras metodologias,
como o Documentos de Game Design (GDD), Roteiros para vídeos
hipermídia ou ainda social media. Isso porque a base dela é semelhante
a qualquer outro método de design, uma das poucas diferenças é
a discussão de cada etapa não apenas com o cliente, mas também
com o usuário, focando na sua experiência e buscando resolver os
seus problemas. Ainda a proposta é flexível permitindo ao projetista a
supressão de algumas etapas, como wireframes estáticos em Illustrator,
por exemplo, ou das personas, quando se trabalha com um usuário real
em todo o projeto.
Porém, no contexto contemporâneo em que a pressa acaba
suprimindo etapas e a voracidade do mercado inibe pesquisas mais
aprofundadas, essa metodologia centrada no usuário pode parecer
impraticável, pelo tempo que dispende nas etapas que antecedem o
projeto visual e sensorial. No entanto, toda a pesquisa anterior quando bem
empregada e a possibilidade de trabalhar com o público, diretamente,
previne erros e refações. Quando se fala em inserir o usuário no processo,
pode-se simplificar o caminho até ele, escolhendo pessoas próximas da
persona criada, como filhos, pais, mães, amigos. Pessoas diferentes que
tenham pontos em comum com o público-alvo da interface são melhores
do que não testar com ninguém.
3. APLICAÇÃO DA METODOLOGIA 5IS NO REDESENHO DO WEBSITE DA

REVISTA ARCO
Durante o processo de construção do briefing com o cliente foi

estruturado quais eram os problemas identificados na interface digital
anterior ao redesenho, tanto estéticos quanto de funcionamento, como
recursos limitados em termos de programação. Dentre esta lista de
requisitos estavam: (i) destaque para a edição da revista impressa, com a
24
capa da revista aparecendo na página inicial; (ii) melhor divulgação das
redes sociais institucionais da Revista Arco; (iii) maior destaque às fotogra-
fias, como já mencionado; (iv) comentários vinculados às redes sociais;
(v) publicações relacionadas no final do texto da matéria da revista; (vi)
serviço de publicação com mais recursos e melhor controle do banco
de dados; (vii) paleta cromática mais dinâmica e atendendo melhor ao
público-alvo da Revista – que será melhor estuda-do na próxima etapa;
(viii) pontos de contato com o usuário mais direto e em diálogo com o
perfil desse público.
3.1 Ideação e incubação: buscando o perfil do usuário e o contexto de uso
Conforme a metodologia utilizada, foi realizada uma pesquisa

online, via Google Forms, para sintetizar o perfil do usuário da interface
e poder definir quais os requisitos e funcionalidades exigidos para cada
persona. Foram feitas 25 perguntas rápidas, direcionadas conforme as
respostas dos respondentes, com uma abordagem de 52 pessoas, em 13
dias. O formulário foi divulgado pelo sistema de comunicação via e-mail
da UFSM, ou seja, enviado para todos os e-mails cadastrados no sistema
da universidade, entre servidores, professores e alunos. Apesar do número
não muito alto de respostas, os resultados foram significativos para
determinar o público interessado em colabo-rar para o desenvolvimento
da revista e, consequentemente, mais interessado em seu conteúdo.
A construção do questionário foi dividida em (i) perfil do usuário:
faixa etária, nível de escolaridade, vínculo com a UFSM, ocupação e se
possuía deficiência física ou intelectual; (ii) consumo de informação:
qual o instrumento utilizado para acessar a internet e quais meios de
comunicação utilizados para isso (sites de revistas e jornais, edições
impressas, blogs, vídeos na internet, televisão e redes sociais); (iii) vínculo
com a Revista Arco: se já conhecia a Revista, se já havia conhecido a edição
impressa, se já havia acessado o website da Revista, preferência entre
versão impressa e digital, como acessava o website (mecanismo de busca,
links direcionados ou pela página institucional da Universidade) e qual
setor do site era o mais frequentado; por fim (iv) as tecnologias utilizadas:
uso de aplicativos, se possuía aplicativos específicos para notícias e se
já havia tido experiências com realidades aumentada e virtual. Essas
três últimas perguntas foram feitas pensando em projetos futuros que
possam ser realizados junto à Revista, como o desenvolvimento de um
25
aplicativo para armazenamento das edições impressas, e projetos de
realidade aumentada e realidade virtual.
Dos resultados obtidos, 57,1% dos respondentes tinham entre
18 e 25 anos e 49% eram estudantes de graduação. Na seção sobre
o consumo de informação, 91,8% disse acessar por sites de revistas
e/ou jornais, enquanto a opção “Links direcionados a partir de redes
sociais” teve 86,5% de taxa de resposta, ficando como segunda opção
mais selecionada. A partir da associação apenas dessa única pergunta,
é possível entender a forma de navegação na web do público-alvo,
considerando, ainda, os altos números de acesso em matérias divulgadas
na página inicial do site institucional da UFSM, mas que não revertiam
em acesso a outras páginas do site da revista, ou seja, o usuário visita o
site com o propósito de ler aquela única publicação, e fecha logo que
conclui a leitura da matéria.
A partir da pesquisa direta com o usuário foi traçado o perfil de três
personas, chamadas de (i) Diego, (ii) Samanta e (iii) Gabriela. Diego tem o
perfil de estudante de graduação da Universidade, acadêmico do curso
de Psicologia, com 21 anos. Ele cultiva o hábito da leitura e já tem contato
com a revista Arco na versão impressa, que se destaca entre os alunos
do campus por ter um bom projeto editorial. A partir da análise específica
dessa persona, é possível definir como requisitos particulares: (i) a neces-
sidade de uma interface objetiva, (ii) boa leiturabilidade e legibilidade,
(iii) acesso por múltiplas telas, para que o site conquiste leitores que
gostam de ler no papel, e uma consequente (iv) coerência estética com a
versão impressa. Quanto às funcionalidades associadas seriam (i) poucos
caminhos para se fazer uma tarefa, (ii) vínculo mais eficaz com as redes
sociais e um (iii) bom contraste entre texto e imagem.
Samanta, a segunda persona criada, também é acadêmica da
Universidade, porém do curso de Publicidade e Propaganda, está
sempre atualizada com as últimas tecnologias lançadas no mercado.
Ela não conhece a revista Arco impressa e somente teve contato com
algumas matérias do site, vinculadas com as suas redes sociais. Os
requisitos da Samanta são: (i) um bom planejamento estético, (ii) interface
mais atemporal, (iii) leiaute minimalista, (iv) chamadas de publicações
atraentes com textos curtos como descrição. Das funcionalidades,
destacam-se as de (i) notícias em destaque na página principal, (ii)
matérias relacionadas no final da página, logo abaixo do texto principal,
(iii) menus interativos e (iv) responsividade.
26
A terceira e última persona, Gabriela, tem 34 anos e é professora
da Universidade, do curso de Medicina Veterinária. Ela está começando
a se atualizar em relação às tecnologias, vai de bicicleta para o trabalho
e cresceu em uma cidade do interior, nas redondezas de Santa Maria.
Para Gabriela, é importante se manter informada sobre as notícias
relacionadas à UFSM e ao seu departamento, por isso conheceu a revista
Arco ao clicar em um link no site institucional da universidade, e gostaria
de poder sugerir pautas para matérias futuras. Ela irá requerer (i) matérias
de cunho acadêmico, (ii) expediente da equipe da revista, para entrar
em contato e um (iii) leiaute objetivo. Nas funcionalidades, destaca-se
a importância de (i) uma barra de pesquisa bem localizada, (ii) o uso de
tags nas matérias, para facilitar a pesquisa do usuário, (iii) página com
for-mulário e informações de contato e (iv) um mapa do site. Essas três
personas resumem a maior parte do diverso público que acessa tanto
a Arco Digital quando a Impressa. Todavia, ele ainda é composto por
uma parcela de servidores da universidade, professores, e também da
população da cidade.
Durante o briefing, as clientes expuseram um projeto de extensão –
mesmo não sendo o foco da Revista, que é de cunho científico e cultural
– com as escolas públicas de Santa Maria, e a vontade de mostrar mais da
Universidade Federal para esses alunos que estavam tendo contato com
as matérias da Revista. Com essa informação, foi iniciada a estrutura de
um projeto de realidade aumentada, com planos de ser implementado
futuramente, que mapeasse o espaço físico do campus, marcando
pontos relacionados às matérias já publicadas pela revista.
Além disso, um aplicativo para servir como suporte a esta
plataforma, com espaço para agendamento de visitas ao campus por
turmas das escolas já mencionadas. Devido à necessidade prioritária das
clientes ser a implementação do site, este projeto foi deixado para ser
finalizado após a conclusão dessa etapa.
Após a definição das categorias de usuário que estariam no
centro do projeto, foi feita uma busca por sites da mesma categoria
e listados os elementos possíveis de serem usados como referência,
para atender os requisitos e funcionalidades listados acima. Entre eles
estão os sites da revista Piauí, pertencente à Folha de São Paulo, da
revista Super Interessante, da editora Abril, e da Port Magazine, que se
destacou pelo leiaute minimalista, pouco uso de cores e relevância da
tipografia (Figura 03).
27
Figura 3: Página inicial com destaque à matéria principal da revista Port.
Fonte: http://www.port-magazine.com
3.2 Implementação - primeira geração de alternativas
Nesta etapa, onde foi iniciada a concepção gráfica, com o recurso

de rabiscoframes (Figura 04) e card sorting, é importante destacar
que devido à importância da responsividade e acesso por múltiplas
telas do website, foi associado o método Mobile First (Figura 05) para
o planejamento das telas [WROBLEWSKI, 2011]. Esse método se
popularizou após Wroblewski ter escrito, em 2009, que frequentemente
o design para disposivos móveis é pensado posteriormente à versão
para desktop. Ele propõe uma inversão dessa relação, especialmente
devido à popularização da tecnologia mobile. O design para mobile
exclui elementos desnecessários e os dispositivos móveis agregam
novas funcionalidades de uso. Wroblewski argumenta que pensar
primeiro na versão mobile significa inovar por meio de possibilidades
que não existiam antes das mídias móveis. O referido autor sugere que
se inicie pela menor tela, pois se as informações couberem nela, logo
se adaptarão bem a todas as demais telas. Isso ajuda a simplificar os
projetos.
28
Figura 4: Rabiscoframes.
Fonte: Desenvolvido pela autora
Figura 5: Geração de Alternativas leiaute Mobile.
Para o desenvolvimento do protótipo, tanto na versão mobile quanto

na versão desktop (Figura 06), foi utilizado o programa Adobe Muse na
versão CC 2015. Devido a sua interface voltada aos profissionais da área
criativa, sendo bastante visual e intuitivo, o processo acabou sendo
29
facilitado, por ter poucas etapas envolvendo programação. Contudo,
algumas dificuldades foram encontradas, como na (i) configuração
do menu na versão mobile, (ii) interações com as redes sociais, (iii)
configuração da barra de pesquisa, (iv) o fato do código HTML gerado
pelo software não poder ter aproveitamento adequado na parte de
implementação, por trazer bibliotecas próprias que não são padronizadas
e (v) não oferece programação de BackEnd de modo intuitivo como faz
com FrontEnd, exigindo a presença de um programador.
Figura 6: Geração de Alternativas versão Desktop.
3.3 Inspeção: as rodadas de testes com usuários
No contexto do Laboratório de Interface e também do LEx,

semanalmente foram realizados testes com os usuários-publicadores
(profissionais e alunos vinculados à Arco e ao Lex que são responsáveis
pela produção que abastece o banco de dados do site e participam
diretamente do processo de construção da Revista Digital) e também com
os usuários-leitores (alunos do Laboratório de Interface e professores,
ambos parte do público da Revista). Nestes testes, inicialmente era
apresentada a interface superficialmente, para que dessem opiniões
sobre estética e estrutura, e logo após também eram destinadas tarefas
para que uma pessoa cumprisse, como: acessar uma matéria específica,
ou entrar em contato com a Revista. Então se observava a interação do
30
usuário com a interface para que o caminho escolhido por ele fosse no
final o caminho com o menor número de cliques e menor tempo.
Estes testes auxiliaram na simplificação da interface e na
implementação da UX, além de levantarem problemas com a paleta de
cores inicialmente pensada para o projeto, bem como a hierarquização
das informações de menu e a padronização dos ícones. Juntamente
com os testes feitos pelos usuários da revista e a análise das clientes
foi realizada a decisão editorial de remover duas das seis editorias da
revista, para que o menu não ficasse tão poluído e impreciso aos leitores.
3.4 Implementação: escolhendo cores, ícones, fontes e grids
Na etapa de Implementação, partiu-se para as mudanças

propostas tanto por parte das clientes, quanto pelos resultados dos
testes feitos com os usuários. A primeira mudança foi feita na paleta
cromática (Figura 07), como já mencionado, onde optou-se pelo uso
de cores menos saturadas e frias, tendo apenas uma cor quente para
os detalhes, o tom de laranja que já acompanhava a interface anterior,
utilizadas nas tags e em alguns pontos específicos. O grid foi organizado
para um melhor aproveitamento do maior número de telas, já que o
site anterior desperdiçava muita área branca sem conteúdo, por isso foi
escolhida a largura de tela de 1140px e divisão em 14 colunas, para um
melhor alinhamento de todo o conteúdo (Figura 08).
Figura 7: Tela da versão final do site com paleta cromática de referência na parte inferior.
No início do projeto, as clientes apresentaram o Guia de Estilo da

Revista, já existente, para auxílio na preservação da identidade visual. Por
este motivo, a família tipográfica escolhida para os títulos foi a mesma já
utilizada na edição impressa, a Bebas Neue, de Ryoichi Tsunekawa, livre
31
para uso comercial tanto de webfont quanto versão desktop. Para fonte
de texto foi escolhida a Lato, desenhada por Łukasz Dziedzic, gratuita,
livre para uso comercial, com cinco pesos disponíveis, inclusos os
itálicos, além de ter boa legibilidade e leiturabilidade. Para acompanhar
o desenho da tipografia de texto, foi definida uma biblioteca de ícones
com traços arredondados e visual minimalista (Figura 09).
Figura 8: Grid utilizado para composição do site.
Figura 9: Biblioteca de ícones utilizada.
3.5 A instauração da nova Arco Digital
O protótipo interativo do website (Figura 10) foi realizado com

o uso da ferramenta Adobe Muse, já mencionada, que exporta em
HTML 5, CSS3 e JavaScript. No entanto, a programação de BackEnd
32
permite a replicabilidade de conteúdo, a facilidade de abastecimento
e gerenciamento para o cliente. O projeto de programação foi
implementado pela empresa júnior de Tecnologia da Informação,
CompAct Jr., que engloba os cursos de Ciência da Computação,
Engenharia de Computação, Si-temas para Internet, Sistemas de
Informação e Tecnologia em Redes de Computadores, do Centro de
Tecnologia e do Colégio Politécnico da UFSM.
Para um melhor entendimento de como foi feito o projeto gráfico,
foi elaborado um material auxiliar a ser utilizado como manual de
estilo durante o projeto de programação. Como conteúdo expõe-se as
referências de cores (Figura 07), grids (Figura 08), ícones (Figura 09) e
também os estilos tipográficos utilizados (Figura 11).
Figura 10: Tela da página inicial da versão final do protótipo.
33
Figura 11: Página do manual referente aos estilos tipográficos utilizados.
Este material foi disponibilizado no início da programação do

novo site e acabou facilitando muito o processo de comunicação entre
designer e programadores, para que o produto final se mantivesse
visualmente fiel ao protótipo.
Esta fase consistiu em reuniões semanais com a equipe da
empresa júnior, a autora e uma amostra dos usuários-publicadores, e
uma das maiores dificuldades encontradas foi a adaptação do leiaute.
Algumas margens e objetos da interface tiveram que sofrer reajuste de
tamanho por limitações da programação, o que poderia ter sido evitado
ao ter um acompanhamento mais próximo de um profissional da área no
processo de criação gráfica, ou até mesmo maior embasamento técnico
de programação por parte do designer.
A nova interface da edição digital da Revista Arco foi divulgada
no dia 21 de agosto de 2017, com forte campanha nas redes sociais da
revista. Além do visual do site ter sido modificado, novas editorias da
revista foram acrescentadas para o lançamento, como o Mitômetro –
um método de checagem de dados desenvolvido pela equipe do LEx –,
publicações em listas e quizzes interativos.
Utilizando do Google Analytics para fazer uma comparação entre
a versão antiga do website e após o lançamento da nova interface, é
possível perceber o aumento no número de visualizações de página,
aumento no tempo médio de permanência da página e diminuição na
taxa de rejeição (Figura 12). A página com maior número de visualizações
34
foi a reportagem especial feita para o lançamento do novo site, com um
número total de 5.723 visualizações.
Figura 12: Dados retirados do Google Analytics com comparação entre os períodos de 20/03/17 –
20/08/17 e 21/08/17 – 21/01/18.
Fonte: Google Analytics
Em termos de design, pode-se testar toda a consistência do projeto

entre designers, clientes e usuário final, obtendo-se até agora resultado
satisfatório, tanto no uso da metodologia, quanto nas escolhas projetuais.
4. CONSIDERAÇÕES FINAIS

O design centrado no usuário, inserindo-o no processo de
projetação, demonstra maturidade no espaço do desenhista industrial.
Obter feedbacks e críticas e saber lidar com elas faz parte do cotidiano
desse profissional, mas, sobretudo, enriquece a interface e a experiência
do usuário. O mantra de que o bom design é invisível deve ser replicado
nas interfaces digitais, facilitando que o usuário possa experienciar
o projeto sem percebê-lo negativamente, objetivando suas ações
e oferecendo as reações corretas para o padrão mental do usuário.
Simplificar os projetos em uma era de excessos informacionais pode
proporcionar experiências de usuários mais agradáveis.
No contexto do Projeto de Redesenho da Revista Arco, esses
objetivos foram atingidos por meio de boas escolhas desenhísticas
– paleta cromática, grids, tipografia, por exemplo – que foram se
aperfeiçoando durante o projeto, com análises das clientes e dos
usuários. Por isso, no contexto desse projeto se pode lançar a revista
após com muitas interações, oriundas da inserção do usuário no
processo e do apontamento de possíveis erros ou dificuldades de
acesso, impactando positivamente.
Essas escolhas tornaram o projeto bem-sucedido principalmente
nos requisitos de legibilidade, leiturabilidade e adequação ao público
da revista. A página de matéria teve uma grande aceitação por parte
daqueles que a testaram, garantindo uma boa experiência de leitura.
35
Além disso, as etapas metodológicas utilizadas, claramente
especificadas, ordenaram e fizeram com que as várias mudanças
projetuais feitas durante o processo fossem descomplicadas. Desse
modo, a metodologia de projeto 5Is mostrou-se adequada e de fácil
compreensão.
REFERÊNCIAS
GARRETT, J J. The Elements of User Experience: User-Centered Design for the Web
and Beyond. Berkley: New Riders Press, 2011

aplicativos amigáveis. São Paulo: Novatec Editora, 2013
NIELSEN, J. The Distribution of Users’ Computer Skills: Worse Than You Think.
Disponível em: https://www.nngroup.com/articles/computer-skill-levels. Acesso
em: 18 de mar. 2017.
TEIXEIRA, F. Introdução e Boas Práticas em UX Design. São Paulo: Casa do Código,

2014.
WROBLEWSKI, l. Mobile First. New York: A Book Apart, 2011.
36
Apresentação Visual do Projeto
Vídeo da Interface com as interações
37
AlterECO: Projetação de uma plataforma
digital interativa e colaborativa para a
substituição do uso de animais
no ensino e na pesquisa
RESUMO: O artigo tem o objetivo de demonstrar o processo de

projetação da plataforma digital interativa e colaborativa AlterECO. Esta
expõe métodos, artigos, materiais didáticos, calendário de eventos,
prêmios e notícias para a substituição do uso de animais no ensino e
na pesquisa. O projeto, que teve início em 2016 e foi retomado em 2019,
foi idealizado no contexto do Grupo de Pesquisa Design, Ciência e
Tecnologia UFSM/Cnpq e está sendo desenvolvido no Laboratório de
Interfaces DI/UFSM. A metodologia de projeto utilizada é a 5I`s, proposta
pela autora do artigo, com foco no design centrado no usuário (NORMAN,
2004; LOWDERMILK, 2013) e na experiência de usuário (GARRET, 2011;
TEIXEIRA, 2014). O referencial teórico no qual se pauta o presente estudo
é multidisciplinar, contando com autores como Bachinski (2017) Tréz
(2015), Singer (2004), Regan (2006) e Francione (2013). Como o projeto
ainda não foi instaurado não temos dados suficientes para apontar os
resultados, porém a partir das pesquisas realizadas com profissionais da
área, espera-se contribuir para a construção de um espaço colaborativo
para trocas de pesquisas, métodos, projetos, notícias e eventos entre
pesquisadores de um modo interdisciplinar, incidindo no abolicionismo
animal. Como conclusão esperamos conectar pesquisadores, pesquisas
e métodos que contribuam para a humanização da ciência e possibilitem
maior predição nos resultados das pesquisas.
1. INTRODUÇÃO
A ausência de um neocórtex não parece impedir que um organismo

experimente estados afetivos. Evidências convergentes indicam
que os animais não humanos têm os substratos neuroanatômicos,
neuroquímicos e neurofisiológicos de estados de consciência
juntamente com a capacidade de exibir comportamentos intencionais.
38
Consequentemente, o peso das evidências indica que os humanos
não são os únicos a possuir os substratos neurológicos que geram a
consciência. Animais não humanos, incluindo todos os mamíferos e as
aves, e muitas outras criaturas, incluindo polvos, também possuem
esses substratos neurológicos.1
Diante de tal declaração, assinada por neurocientistas renomados,
não podemos ficar omissos. Atuando na área de design de interfaces,
trabalhamos com a resolução de problemas cotidianos, utilizando design,
arte, ciência e tecnologia para projetar ideias que facilitem a usabilidade,
a acessibilidade e uma melhor experiência de usuário. Um projeto de
design de Interfaces trabalha a relação entre humanos e computadores
e visa melhorá-la.
Não basta apenas utilizar as descobertas da ciência e da
neurociência para melhorar projetos, a fim de facilitar o uso de sistemas
ou propor experiências artísticas e projetações. Não basta utilizar os
resultados destas e de outras pesquisas científicas, sem questionar os
métodos e contribuir para a construção de uma ciência mais humanitária.
É possível pensar em uma contrapartida das interfaces para a substituição
dos animais no ensino e na pesquisa, unindo ciência e tecnologia para
propor novas, criativas e eficazes experiências facilitadas pela interação
humano-computador.
Nesse sentido, o Grupo de Pesquisas Design, Ciência e Tecnologia
UFSM/Cnpq vem propondo desde 2015 projetos e ações voltados
à reflexão em relação ao uso e consumo de animais em todas as
áreas. Um exemplo é o game LabChange (Figura 01), que faz parte do
projeto de pesquisa e desenvolvimento Interação humano-animal-
computacional: produção de interfaces para games. Esse projeto ainda
está em desenvolvimento e propõe uma relação empática entre animais
humanos e não-humanos por meio de métodos substitutivos.
A partir das pesquisas para guiar o GDD (Game Design Document) de
LabChange nos deparamos com uma descentralização de informações
sobre métodos substitutivos em várias áreas. Assim nasceu o projeto
paralelo, que abordaremos a seguir: uma plataforma digital colaborativa
1 A Declaração de Cambridge sobre a Consciência foi escrita por Philip Low e editado por Jaak Pank-
sepp, Diana Reiss, David Edelman, Bruno Van Swinderen, Philip Low e Christof Koch. A Declara-
ção foi proclamada publicamente em Cambridge, Reino Unido, em 7 de julho de 2012, no Fran-
cis Crick Conferência Memorial sobre a Consciência em animais humanos e não-humanos, no
Churchill College, Universidade de Cambridge, por baixo, Edelman e Koch. A Declaração foi assi-
nada pelos participantes da conferência, naquela mesma noite, na presença de Stephen Hawking,
na Sala de Balfour no Hotel du Vin, em Cambridge, Reino Unido. A cerimônia de assinatura foi imorta-
lizada pela CBS 60 Minutes. Tradução disponível em: http://www.labea.ufpr.br/portal/wp-content/
uploads/2014/05/Declara%C3%A7%C3%A3o-de-Cambridge-sobre-Consci%C3%AAncia-Animal.pdf
39
que possibilita o compartilhamento de pesquisas, referências, métodos e
experiências relacionadas às alternativas para a substituição de animais
no ensino e na pesquisa.
Figura 01 - Capturas de Tela do Game LabChange
Fonte: Grupo de Pesquisa Design, Ciência e Tecnologia UFSM/Cnpq
` É importante mencionar que ao aplicar um questionário junto ao

público-alvo de LabChange, em 2017, percebemos que a maior parte dos
entrevistados é contra o uso de animais no ensino e pesquisa 66,7%. Ainda,
há um interesse dos pesquisadores da área pela substituição animal,
por isso 72,2% dos entrevistados responderam que jogariam um game
voltado à causa animal. O questionário foi realizado via Google Forms e
enviado para a Redeh, uma rede de pesquisadores e professores voltados
à educação humanitária e também para alguns professores das áreas de
Biologia e Medicina Veterinária da UFSM. Como foram obtidas apenas
18 respostas, buscamos outros dados para comprovar a relevância de
desenvolver o projeto AlterECO, abordado no presente artigo, junto à
comunidade de pesquisadores, professores, alunos e profissionais de
áreas afins.
Assim, somam-se as pesquisas robustas realizadas por (FISHER;
FURLAN, 2017) que demonstram o quanto são urgentes as questões
relacionadas à bioética ambiental e, sobretudo, à substituição do uso
de animais, não apenas em relação a uma conduta ética com o animal,
mas também moral, quanto a sua relação com a natureza. Nesse sentido,
sua pesquisa aponta que também os alunos estão buscando outros
paradigmas em relação ao uso dos animais, eles estão questionando mais
os métodos. Entretanto, a maioria dos 259 estudantes e 46 professores
da área da Zoologia, que foram submetidos às questões sobre o uso
de animais no ensino e seu conhecimento sobre métodos alternativos,
40
reconhece a Senciência Animal, embora continue utilizando os animais
para ensino. Conforme as autoras: (…) apesar do desejo do rompimento de
paradigmas, é fundamental ampliar as discussões bioéticas e promover
o conhecimento e desmistificando ideias retrogradas afim de elevar a
valorização da vida animal independente de sua complexidade celular e
bioquímica” (FISHER; FURLAN, 2017, p. 14071).
Analisando a mesma pesquisa, é possível verificar que 76% dos
professores entrevistados conhecem o Princípio dos 3R`s2. Embora
seja a maioria, ainda é grande o número de professores, que atuam na
formação de outros professores e profissionais que ainda não tomaram
contato com essas práticas oriundas dos anos 1950, propostas por
William Russell e Rex Burch. Mais espantoso ainda é o dado de que entre
todos os entrevistados, 75,3% nunca ouviram falar sobre a Lei da Objeção
da Consciência. Esta refere-se ao direito que toda pessoa tem de não ser
obrigada a fazer ou deixar de fazer algo relacionado as suas convicções
religiosas, políticas ou filosóficas. Ou seja, os alunos que não concordam
com o uso de animais no ensino não precisam participar dessas práticas.
Ainda constata-se que 48% dos professores entrevistados não utiliza
métodos alternativos em suas aulas práticas.
Nesse sentido, cabe situar o papel da Educação Humanitária
nesse contexto:
A educação humanitária trabalha na formação de um mundo

igualitário, através do descobrimento do mundo em que
estamos inseridos e da auto-identificação dos indivíduos como
seres ativos na mudança da realidade, na transformação social
através do posicionamento do indivíduo frente as relações
sistêmicas que o envolvem. O mundo, para ser transformado,
deve ser entendido. E o entendimento do mundo pelo indivíduo
possibilita a reconfiguração das relações com os outros
humanos, outros animais e com o conjunto de relações.
(BACHINSKY, 2017, p. 142)
` O autor demonstra que o uso de animais na ciência não apenas inside

na aprendizagem técnica dos alunos, mas nas questões ligadas à moral,
aos valores e a uma dessensibilização dos mesmos. Como ferramentas
alternativas a esse uso, temos opções acessíveis em realidade virtual e
aumentada, entre outras tecnologias e ferramentas para substituições.
Linha na qual temos atuado juntos na Redeh.
2 O princípio dos 3R`s recomenda a redução (reduction), a substituição (replacement) e o refinamen-
to (refinement) no uso de animais vivos. O Instituto 1`R atualiza esses princípios, promovendo, im-
plementando e pesquisando métodos substitutivos, visando apenas a substituição do uso de ani-
mais. Veja mais em: Instituto 1R. Disponível em: http://instituto1r.org/ - Acesso em 28/03/2019
41
1.1 Algumas teorias, filosofias e pesquisas que dão suporte à substituição
animal
No campo da medicina veterinária e zootecnia, Carniato (2017)

traz uma ampla revisão bibliográfica e dados que comprovam que é
possível substituir o uso de animais, impactando nas áreas biomédicas,
farmacêuticas e toxicológicas. Mais do que possível é essencial que
isso seja feito mais rápido possível, tanto pela vida de inúmeras cobaias,
quanto pela maior eficiência nos resultados, comprovada por estudos
apontados pelo autor. Partindo da bioética ele chama os professores
para serem agentes de mudança na academia e na sociedade e também
propõe que a sociedade precisa ter consciência sobre o impacto do uso
de cobaias, as quais são conscientes e protegidas por leis. Para o autor a
substituição animal é uma forte tendência para o século XXI.
O biólogo Tréz (2015), em Experimentação animal: um obstáculo ao
avanço científico faz um levantamento histórico sobre a experimentação
animal, trazendo dados importantes sobre a urgência de se instaurar
métodos substitutivos. Isso, não apenas para poupar a vida das quase 120
milhões de cobaias animais mortas nas universidades e nos institutos de
pesquisa, mas para ter uma melhor predição nas pesquisas. Mais uma vez
esse argumento é posto e merece destaque junto ao campo científico.
Conforme o autor: “(…) os dados gerados a partir de modelos animais não
contribuem, em última análise, para os avanços clínicos relevantes à
nossa condição de saúde. (TRÉZ, 2015, p. 227).
O movimento da bioética e também da libertação animal tem em
Singer (2004) um dos pioneiros ainda nos anos 1970. Ao constatar que os
animais não são capazes de exigir a sua libertação, sugere altruísmo de
nós, seres humanos para lutar por eles. O autor é compreendido como
bem-estarista, por lutar por condições melhores aos animais explorados,
seja nas indústrias, seja nas pesquisas, ao menos até que se substitua o
seu uso. Singer tem uma importância significativa para a libertação animal,
porém, se aprofundarmos na questão, não existe bem-estar animal. Por
mais que se criem CEUAs (Comissões de Ética no Uso de Animais) ou que
haja regulamentação do CONCEA (Conselho Nacional de Controle de
Experimentação Animal), ainda há crueldade, dor e sofrimento, muitas
vezes para motivos triviais e com baixa predição para humanos, o que
não os justifica. Acreditamos que esses órgãos devem ser responsáveis
42
pela indução à substituição completa, assim de fato estarão alinhados
com a preservação da vida.
Os direitos dos animais devem prevalecer. Sobre o assunto,
autores como Tom Regan (2006) demonstram que se os animais são
sujeitos-de-uma-vida, eles têm direitos, assim como nós. Em outra
via, Gary Francione (2013) pontua a “esquizofrenia moral” que os seres
humanos têm em relação à exploração e ao sofrimento que causam
aos não-humanos, mesmo que acreditem que esse sofrimento é para
um bem maior, normalmente, humano. Esse último autor é um ícone do
abolicionismo animal e defende que animais têm o direito básico de não
serem tratados propriedade, assim como os humanos têm; eles também
têm direito de não serem usados exclusivamente como meios para fins
de outros seres. Para Francione resta apenas a abolição animal e não uma
suavização do seu sofrimento. Nessa via, a partir do campo do design
de interfaces busca-se oferecer ferramentas para a abolição animal, no
caso da interface aqui abordada especificamente no campo do ensino e
da pesquisa.
A partir dos dados e referenciais aqui brevemente expostos, não
resta outra saída além de contribuir para a substituição de modelos
animais. Avançar na ciência significa ter um olhar humanizado sobre
esses sujeitos não-humanos, esses sujeitos-de-uma-vida há séculos
cruelmente explorados em nome de uma tradição científica obsoleta. Ao
projetar essa plataforma visamos oferecer ferramentas aos pesquisadores,
professores, estudantes, ativistas e público em geral para que substituam
os animais e obtenham as informações corretas para isso.

2. A PROJETAÇÃO A PARTIR DO MÉTODO DE PROJETO DE INTERFACES
5I`S
A metodologia 5I`s foi desenvolvida pela autora como um método de

ensino de design de interfaces no Laboratório de Interfaces do DI/UFSM.
Consiste em 5 etapas: Ideação, Incubação, Implementação, Inspeção e
Instauração. No que concerne ao presente projeto, realizamos as quatro
primeiras fases, que aqui serão expostas, mas estamos indo rumo à
instauração. A metodologia reúne o design centrado no usuário, termo
proposto inicialmente por Norman (2004) e abordado por Lowdermilk
(2013). Assim como a experiência de usuário foi inspirada em Garret (2011)
e nas dicas práticas de Teixeira (2014). O projeto foi desenvolvido com
43
a Turma do Laboratório de Interfaces DI/UFSM - 2019 e contou com a
participação ativa dos seguintes alunos: Alexandre Martins Vidor, Biara
Simoes De Freitas, Fabricio Arend Maica Pereira, Felipe Lazaro De Lima
Carvalho, Joao Marco De Abreu Christo, Lara Isadora Rodrigues Talhaferro,
Leopoldo Engroff Da Silva, Lidiane Castagna Gonçalves, Nathalie Coelho
Crispim, Talita Leticia De Moraes, Giuliano Berlese Longoni, Laura
De Aguiar Muller, Lucas Santos Pozzobon e Mariela Francisca Penna
Miranda. O projeto coletivo contribuiu para promover reflexões sobre a
temática também junto aos alunos do Desenho Industrial. Ressaltamos
um empenho da equipe para propor algo que seja uma contribuição
real para a problemática e que seja fácil de usar, eficiente e gere uma
experiência que de fato possa substituir os modelos animais. A seguir
descrevemos as fases de projetação.
2.1. A Ideação
Essa fase reúne dados sobre o projeto e o usuário. O primeiro passo

é partir do problema que queremos ajudar a resolver: O uso de animais no
ensino e na pesquisa. A próxima etapa é tentar responder essas perguntas
do brieﬁng: O quê? Uma interface digital interativa e colaborativa que
reúna métodos substitutivos ao uso de animais no ensino e na pesquisa.
Como? Por meio de um website responsivo que integre informações e
projetos relacionados à temática e seja um espaço de troca de métodos,
materiais e ideais. Porquê? Para poupar a vida de milhares de cobaias.
Por uma atualização da ciência/ensino. Para uma melhor predição na
pesquisa/resultados mais precisos. Por uma humanização da ciência. Para
quem? Professores, pesquisadores, estudantes, ativistas e entusiastas.
Por quem? Pelas pessoas, pelos animais e pelo planeta. Em que lugar?
Instituições de ensino e pesquisa, ambientes de pesquisa, desde casa
até os laboratórios.
O próximo passo foi fazer um brainstorm, geração de ideias,
conhecida como tempestade cerebral. A partir dele geramos as palavras,
ideias e ideais, entre estas destacaram-se: “empatia, pesquisa, coletivo,
fórum, artigos, notícias, espaço de pesquisa, métodos consolidados,
sistema de tags, interdisciplinar, acessível, objetivo”, entre outras.
Ainda no brainstorm surgiu o nome da plataforma, sugerido pela aluna
Nathalie Coelho Crispim. AlterECO mescla as alternativas existentes
ao uso de animais para garantir a vida (ECO, ecologia, equilíbrio), com
44
uma sonoridade próxima de alterego. Ideias também foram coletadas
a partir das análises Heurísticas realizadas em 14 interfaces, não apenas
relacionadas às áreas que a plataforma visa abranger, mas interfaces cuja
funcionalidade, acessibilidade e experiência de usuário sejam próximas
aos objetivos do projeto.
As análises foram realizadas a partir dos 10 critérios de (Nielsen;
Molich, 1990): 1 Feedback; 2 Falar a linguagem do usuário; 3 Liberdade
e controle do usuário; 4 Consistência; 5 Prevenir erros; 6 Reconhecer
ao invés de lembrar; 7 Oferecer atalhos; 8 Diálogos naturais e simples
(estética e design minimalista); 9 Boas mensagens de erro; 10 Ajuda
na documentação. Acrescentamos ainda o quesito Acessibilidade.
Normalmente, essas análises acontecem na fase 2 da metodologia,
porém como a metodologia é maleável, para este projeto optou-se por
fazer uma análise mais profunda nessa fase, a fim de tornar mais familiar
aos alunos envolvidos na projetação aspectos das interfaces, como
usabilidade, padrões de navegação e interação, além de referências
estéticas.
Ainda na fase de Ideação foram concebidas 14 personas, entre elas
estudantes, professores, pesquisadores e ativistas pelos direitos dos
animais. A construção das personas permite que o projetista visualize
durante todo o processo de projetação o usuário, conseguindo remeter-
se a ele na hora das escolhas tecnológicas, técnicas ou estéticas.
Recomenda-se ainda que haja sempre ao menos uma persona com
requisitos de acessibilidade, para que possa tornar o projeto de fato
acessível. Nas imagens a seguir (Figura 02) há o exemplo de uma
personas criada para o projeto. Ainda nessa fase foram criados painéis
com os “Golden Moments”, ou seja, os momentos-chaves em que os
usuários entrarão em contato com a interface. Esse processo permite
traçar alguns requisitos de usuário e as funcionalidades que o sistema
precisa oferecer, sendo um guia para a fase seguinte.
45
Figura 02 - Criação das Personas
Fonte - Biara Simoes De Freitas - Grupo de Pesquisa Design, Ciência e Tecnologia UFSM/Cnpq
2.2.A Incubação
Nessa fase são elaborados os requisitos e funcionalidades. Aqui

também apontamos as tecnologias a serem utilizadas no projeto. No
caso dessa plataforma optou-se por criar um website responsivo, que
se adapte aos vários tamanhos de tela, partindo da proposta do Mobile
First (WROBLESKY, 2011). Iniciamos a projetação a partir da versão
mobile, se todo o conteúdo consegue ser ali exposto, ficará mais fácil
visualizá-lo também em telas maiores de desktop. Como o projeto é web
usaremos as linguagens HTML, CSS e Javascript para a parte do FRONT-
END, mas precisaremos de um profissional da área da computação para
implementar o BACK-END.
2.3. A Implementação
A fase mais complexa e longa da metodologia é a da

Implementação, nela são gerados desde o Sitemap, que aponta todos
os rótulos e hiperlinks de cada página do website; os primeiros rabiscos
ou Rabiscoframes (TEIXEIRA, 2014); o Cardsorting; todas as gerações de
46
protótipos, até a parte mais complexa com o design de interação e o
design sensorial (GARRET, 2011). O design sensorial envolve a área de
maior fluência dos alunos, pela familiaridade com outras áreas do design
gráfico. Para o projeto, partimos do Sitemap, que ajuda a hierarquizar a
informação e definir, por exemplo, as áreas de menu: Sobre, Notícias,
Biblioteca, Métodos, Fórum, Calendário, Perfil, Suporte e Termos de Uso.
Avançamos pelos Rabiscoframes que ajudaram a tomar decisões
como manter o menu fixo em todas as páginas, ter páginas com scroll
vertical maior, aproveitando o estilo do mobile, em que as pessoas já
têm uma familiaridade com esse recurso. Também manter um mapa do
site em todas as páginas com as informações essenciais da plataforma,
que facilitem o acesso aos usuários menos avançados. Manter uma área
superior de acessibilidade, para abranger o que é o princípio da web,
e do design universal: ser de fácil acesso para todos. Para isso todo o
website foi reprojetado na versão acessível.
Na etapa posterior, quando já tínhamos alguma ideia mais
elaborada do projeto, testamos o Cardsorting3 com uma usuária real.
Essa técnica consiste em disponibilizar todos os rótulos e informações
disponíveis na página ao usuário e permitir que ele monte a estrutura de
organização da informação que lhe parece ser mais familiar. Esse processo
favorece o desempenho dos usuários nas páginas. Como trabalhamos
com o design centrado no usuário, não no designer, sempre priorizamos
projetar e testar com o usuário cada etapa. Importante mencionar o
engajamento de todos os alunos nesse processo de construção conjunta,
o que gera um resultado muito positivo em relação à posição deles sobre
a substituição animal e também sobre a importância de observar o outro.
Planejar e compor coletivamente um projeto de interfaces contribui não
apenas para o aprendizado das técnicas e metodologias, como melhora
consideravelmente o resultado da interface, pois gera muitas alternativas
e traz perguntas e respostas em várias vias.
A elaboração do design sensorial consistiu em buscar referências
estético-formais para o projeto, bem como possíveis microinterações.
Cada aluno gerou uma paleta de cores, um guia tipográfico para título,
fonte para texto, subtítulos, menu, botões e alertas, buscando ainda
referências em termos de ícones para guiar o design sensorial. A partir
dessa pesquisa prévia, cada um realizou um padrão de protótipo interativo
da plataforma, construindo apenas a primeira página dela, utilizando a
ferramenta UXPIN4. Após uma rodada de apresentações definimos uma
3 O Cardsorting foi realizado virtualmente, por isso utilizou-se a ferramenta https://miro.com/apps/
47
linha a seguir a partir de todas as propostas apresentadas. Esse é um
esqueleto do projeto final, podendo se compreendido como Wireframe.
Assim, voltamos a trabalhar em conjunto, agora na projetação de todas as
páginas, ficando cada aluno com uma tarefa diferente na sua construção.
Alguns focaram-se na construção da identidade visual do projeto (Figura
03), outros na biblioteca de ícones (Figura 04), outros nas interações e
microinterações entre as páginas e outros na aplicação dos padrões de
tipo e cor, outros trabalharam na responsividade e na acessibilidade e
outros ainda na coleta de materiais que serão disponibilizados, como
artigos, experiências interativas e vídeos.
Figura 03 - Identidade Visual AlterECO - Versões principal e horizontal, respectivamente
Fonte - Lucas Santos Pozzobon - Grupo de Pesquisa Design, Ciência e Tecnologia UFSM/Cnpq
Esses serão os primeiros materiais disponíveis, pois haverá uma

curadoria de conteúdo, ou seja, serão convidados profissionais de
várias áreas para enviar conteúdo e também para verificar os materiais
compartilhados pelos usuários, o que possibilitará maior segurança e
seriedade nas pesquisas.
Figura 04 - Biblioteca de ícones
Fonte - Alexandre Martins Vidor, e Lidiane Castagna Gonçalves - Grupo de Pesquisa Design, Ciência e
Tecnologia UFSM/Cnpq
48
2.4. A Inspeção
Após a implementação do protótipo interativo, vem a parte mais

iterativa do projeto. Aqui são testadas repetidas vezes as funções de cada
parte do projeto. Nesse projeto, por enquanto, testamos apenas com
uma usuária real, para isso foram criadas tarefas-chaves para realizar
dentro da plataforma, como: Cadastrar seu perfil como pesquisadora.
Encontrar um método substitutivo ao Draize in vivo. Postar uma notícia na
página. Inserir um comentário no Fórum. Encontrar o Game LabChange
na Biblioteca. Essas tarefas são funções essenciais que o usuário pode
fazer interagindo. Importante mencionar que no momento o projeto está
sendo testado também com uma pessoa com Daltonismo.
Com os resultados obtidos é hora de avaliar cada teste e alterar o
que ficou faltando ou reorganizar as informações que foram difíceis de
encontrar. São muitas as variáveis em um projeto deste tamanho e apenas
testando, poderemos obter um melhor resultado. A fase da Inspeção e
da Implementação acontecem de certo modo simultaneamente, pela
alta iteratividade a partir dos testes. Na figura 05 a versão mais final da
interface após rodada de testes.
2.5. A Instauração
No período da escrita deste artigo, estamos iniciando a fase de

instauração, realizando a parte de FRONT-END do projeto. É interessante
mencionar, que o projeto como um todo serviu para o aprendizado dos
alunos, não apenas em termos de métodos, mas também foi o modelo de
template escolhido para o ensino do básico em HTML, CSS e Javascript.
A partir dessa definição, será escolhido um profissional da área da
computação capaz de projetar as estruturas de BACK-END. A próxima
etapa será a definição de curadores para cada área afim à plataforma,
bem como a estruturação das estratégias de divulgação da mesma.
49
Figura 05 - Página inicial da plataforma AlterECO
Fonte - Grupo de Pesquisa Design, Ciência e Tecnologia UFSM/Cnpq
50
A partir das pesquisas realizadas, tanto em termos de coletas

de dados, quanto do levantamento teórico realizado para o projeto,
percebeu-se que essa plataforma pode afetar positivamente inúmeras
vidas animais, no sentido de poupá-las ao levar conhecimento aos
professores, pesquisadores e profissionais de áreas como Veterinária,
Zootecnia, Biologia, Química e Áreas da Saúde de um modo mais amplo.
Além de trabalhar em prol desses animais, a plataforma AlterECO pode
também contribuir para resultados científicos mais precisos, para a troca
de ideias e debates além de impactar na construção de uma ciência mais
humanitária e colaborativa.

REFERÊNCIAS BIBLIOGRÁFICAS
BACHINSKI, R . Biológica, Virtual, Aumentada e MOral: As realidades e suas

interfaces. In: GASPARETTO, D.A. (Org.). Design+: Arte, Ciência e Tecnologia. 1ed.
Santa Maria: Editora PPGARTE, 2017, v. , p. 141-153.
CARNIATO, C. H. O. Propostas pedagógicas substitutivas ao uso de animais no

ensino superior: Uma revisão. PUBVET, 2017. Disponível em: http://www.pubvet.
com.br/artigo/3764/propostas-pedagoacutegicas-substitutivas-ao-uso-de-
animais-no-ensino-superior-uma-revisatildeo - Acesso em 08/03/2019
FRANCIONE, G. Introdução aos direitos animais. Campinas: Editora da Unicamp,

2013.
FISCHER, M. L. FURLAN, A. L.D. AVALIAÇÃO DE MÉTODOS ALTERNATIVOS NO

USO DE ANIMAIS NO ENSINO DA ZOOLOGIA . Anais Educere XIII Congresso
Nacional de Educação, 2017. Disponível em: http://educere.bruc.com.br/arquivo/
pdf2017/24238_12264.pdf - Acesso em 08/03/2019
GARRET, J.J . 2011. The Elements of User Experience: User-Centered Design for the
Web and
Beyond, Second Edition. Berkley, CA: New Riders
LOWDERMILK, T. 2013. Design Centrado no Usuário: um guia para o desenvolvimento

de aplicativos amigáveis. São Paulo: Novatec Editora.
51
NIELSEN, J.; Molich, R. 1990. Heuristic Evaluation of User Interfaces. Proc. ACM
CHI’90 Conf. (Seattle, WA, 1-5 April), 249-256
NORMAN, D. Emotional Design: Why we love (or hate) everyday things. NY: Basic
Books, 2004
REGAN, T. Jaulas vazias: encarando o desafio dos direitos dos animais. Porto
Alegre: Lugano, 2006.
SINGER, P. Libertação animal. Porto Alegre: Lugano, 2004.
TEIXEIRA, F. 2014. Introdução e boas práticas em UX Design. São Paulo: Casa do

Código.
WROBLEWSKI, L. 2011. Mobile First. New York: A Book Apart.
52
53
A metodologia 5I`s na projetação do
aplicativo Baloo
RESUMO
O intuito do presente artigo é descrever a projetação do aplicativo Baloo,

com ênfase no uso da metodologia 5I`s, desenvolvida pela autora junto
ao Laboratório nome extraído para a avaliação. Este aplicativo consiste
em um organizador de guarda-roupas que mostra peças sem uso e
permite trocá-las ou doá-las em uma comunidade de moda sustentável.
A inovação e o espírito da proposta estão conectados ao Grupo de
pesquisa nome extraído para a avaliação. A metodologia empregada tem
bases em (Garret, 2011), (Norman, 2004; Lowdermilk, 2013) e (Teixeira,
2014) e tem o objetivo de ser um guia para os estudantes realizarem os
primeiros contatos com a área. O artigo demonstra a aplicação desta
metodologia, trazendo conceitos, exemplificando e justificando etapas e
escolhas. Como resultado percebemos que o uso do design centrado no
usuário favorece a usabilidade, acessibilidade e experiência de usuário.
Em termos de metodologia, esta tem se mostrado eficaz no ensino de
design de interfaces junto ao Desenho Industrial, ao focar o projeto no
usuário, propor etapas que simplificam o desenvolvimento e, por meio de
testes e avaliações iterativas, proporcionam um trabalho mais completo,
mesmo no contexto acadêmico. Em relação ao aplicativo Baloo, este está
na fase de implementação, e como resultado temos um projeto pensado
para a economia compartilhada, que pretende impactar na diminuição
do consumo. O desenvolvimento deste aplicativo guia a metodologia
de projeto dos alunos e já tem impactado na sua percepção sobre a
moda e o consumo consciente. Assim, a cada semestre propomos criar
dispositivos que favoreçam um impacto positivo do designer no mundo
em que atua e do design como resolução de problemas.
54
1. A METODOLOGIA 5I`S
No primeiro semestre de 2016 iniciamos o desenvolvimento do

método 5I`s no Laboratório de Interfaces do Desenho Industrial da UFSM
para facilitar aos alunos o desenvolvimento de interfaces interativas
cujo foco não é o designer, nem o cliente, nem o desenvolvedor, mas
sim o usuário/interator. A proposta era facilitar o processo projetual
de uma área tão complexa, sem perder a essência, os conceitos, as
práticas e as técnicas.
É importante situar que a propositora do método é bacharel em
Publicidade e Propaganda, com mestrado e doutorado na área de Artes
Visuais, atuando no laboratório de Interfaces, o que por si só já demonstra
uma pluralidade de métodos e técnicas. Nesse aspecto, tornou-se
importante aprofundar as metodologias do campo do desenho industrial.
Ajudaram nesse caminho autores como Gomes, Brod e Medeiros
(2017, 2010a, 2010b) e Gomes e Brod (2007), compartilhando métodos
de ensino de projeto, sistematizando os principais autores nessa área,
esquematizando visualmente, por meio de logogramas, etapas, fases,
procedimentos e técnicas, além de construirem um processo diferencial
de classificação dos métodos.
Em Gomes, Brod e Medeiros (2010b) essa classificação divide-se em
(i) Metódicas Gerais de Projetação (ii) Metódicas Específicas em Desenho
Industrial, (iii) Métodos Particulares em Desenho de Produtos (de Serviço)
e (iv) Método Especialista. Na publicação, eles exemplificam o método
especialista de projeto de produto, orientado pelo Processo Criativo de
Gomes. Na área de design de interfaces tem se mostrado eficaz o método
especialista proposto por Meurer e Szabluk (2010), intitulado Projeto E, o
qual tem base em Garret (2003). O método constitui-se de seis etapas
projetuais: Estratégia, Escopo, Estrutura, Esqueleto, Estética e Execução.
Como os métodos e os processos criativos são bastante pessoais, há
uma tentativa da autora de construir um método especialista em design
de interfaces pautado nos autores de referência na área de Interfaces e
junto ao Desenho Industrial.
Nesse sentido, trazendo também uma bagagem interdisciplinar de
formação, a metodologia 5I`s é inicialmente composta por cinco fases:
Ideação, Incubação, Implementação, Inspeção e Instauração, todas com
foco no usuário e na experiência de usuário (KUPRATZ;GASPARETTO;2018).
Para isso, a iteração em cada fase é requerida. Ou seja, repetem-se
55
processos a partir de testes e pesquisas com os usuários, sucessivamente,
dentro do prazo estimado, a fim de chegar a um resultado ideal para
público-alvo, minimizando problemas posteriores na fase final. Nessa
última fase os testes com usuários são primordiais também, unindo-se a
outras ferramentas de avaliação de uso.
No primeiro semestre de 2019, após ser apresentada em bancas de
defesa de TCC1, melhorias e sugestões foram generosamente feitas pelos
professores que compunham as bancas: Fabiane Vieira Romano, Marcos
Brod Júnior e Volnei Antônio Matté. As contribuições proporcionaram um
avanço e uma remodelação em termos de rótulos no método proposto.
A primeira sugestão foi repensar o nome da fase Incubação, pois esta
representa um período em que não há etapas para serem cumpridas.
Essa fase seria de descanso e processamento das ideias. Vários autores,
como Kneller (1978), Petterson (1991) e Gomes, Brod, Medeiros (2010a)
apontam esse momento como uma pausa para a conexão das ideias,
com atividades não-conscientes. “Não pode vir a inspiração sem o
trabalho do inconsciente”(KNELLER, 1978, p. 67). Para esse autor, as fases
de preparação, onde se lê, anota e coleta informações, e de incubação
raramente são nitidamente divididas. Nesse sentido a ideia inicial do nome
da fase foi baseada no processo criativo da propositora, onde as ideias
vão surgindo simultaneamente à pesquisa e à coleta de informações, seja
em uma busca desinteressada ou em um processo mais aprofundado de
pesquisa, porém sem um longo período de incubação, o processamento
acontece enquanto há trabalho a fazer.
Contudo, percebemos como adequada a proposta de mudança de
nome, pois o sugerido foi imersão. Como imersão não traz a palavra ação
ao final, ingrediente importante para elaboração dos nomes das fases,
houve uma nova geração de alternativas. O segundo “i” do método foi
substituído pela palavra Inambulação. Conforme o dicionário Michelis
de Língua Brasileira a palavra refere-se ao “ato de passear ou andar de
um lado para outro”. Esse transitar lembra Walter Benjamin (BENJAMIN,
1994; MASSAGLI, 2008) e o flâneur, que descreve com pauta na obra
de Charles Baudelaire. Esse flâneur é um vadio, observador, de olhar
distraído, caminhante, questionador. Ele “capta as coisas em pleno vôo”
(BENJAMIN, 1984, p. 38). Essa mobilidade, “vagabundagem” sem preguiça,
o olhar distraído (que lembra o período de incumbação) e a observação
apaixonada tem muita relação com as etapas propostas nessa fase da
metodologia. Se o flâneur inambula pela cidade, ao projetista sugerimos
56
que passeie pela experiência de usuário, que observe os usuários em
suas tarefas, que analise a diversidade da multidão, que atente para
o mundo, que navegue por interfaces relacionadas e que especule
tecnologias que atendam as demandas do usuário. Perder-se nesse
labirinto de informações contribui para que a fase seguinte seja menos
complexa, pois aqui juntamos as informações necessárias para avançar,
ao buscar caminhos entre as contradições.
Outra questão discutida foi a rotulação das fases 03 (Implementação)
e 05 (Instauração). Essa era uma dúvida inicial, no momento da
rotulação, porque uma dá início à fase de prototipação e a outra de
desenvolvimento, respectivamente. Optamos por inverter os rótulos das
fases, pois a “instauração”, conforme o Dicionário Michaelis, refere-se
à fundar, instalar, iniciar processo, enquanto “implementação” significa
elaborar, pôr em execução, aqui entendido como o desenvolvimento do
projeto em termos técnicos.
Ainda foi sugerida a elaboração de um padrão gráfico que
sistematizasse a aplicação da metodologia 5I`s, facilitando a visualização
de todos os elementos de cada fase. A representação a seguir (Figura 1)
demonstra linearidade na construção das fases, mas flexibilidade para
iterar técnicas e processos em cada uma delas em vários momentos,
pois está pautada na figura do sujeito e na construção coletiva por meio
de testes com usuários e técnicas de projetação centradas nele.
Atualmente, o método é composto por cinco fases: (i) Ideação,
composta por técnicas de Briefing, Brainstorming, Mapas Mentais,
Pesquisas com usuários, Personas, Busca de Referências, Atlas
Mnemosyne (WARBURG, 2015), Pontos de Contato com a interfaces, os
“Golden Moments”, Dados de Mercado e para interfaces relacionadas aos
games, elaboração de GDD (Game Design Document) e à gamificação,
a elaboração de estratégias de engajamento, sistemas de recompensa
e pontuação, por exemplo. No caso do desenvolvimento dos games
sugerimos a leitura de autores como Schell (2008), Chandler (2012) e
Schuytema (2014). Já em relação às estratégias de gamificação a leitura
de Mcgonigal (2011), Zichermann e Cunningham (2011) e Medina [et al.]
(2013) é básica. Apenas após concluir essa fase conseguimos avançar,
caso contrário as idas e vindas proporcionarão grande retrabalho. Ao
mesmo tempo, em determinadas ocasiões é importante retornar e rever
certos pontos para poder de fato estar centrado no usuário.
A fase seguinte é a (ii) Inambulação, com a elaboração de Requisitos
57
e Funcionalidades; Análise de Referências; Análises Heurísticas e Escolha
de Tecnologias. Aqui foi sugerido pelo prof. Marcos Brod Júnior que
fossem incluídas Análises Gráficas nessa fase, item muito bem recebido
com o detalhamento não apenas de Tipografia, de Sistemas de cores e
de Padrões de Interação, como também de Malhas Gráficas.
Figura 01 - Fases da metodologia 5Is com o desdobramento de a[vidades realizadas.
Fonte - autora
A terceira fase é a (iii) Instauração, momento em que

simultaneamente são pensados os conceitos e aplicações referentes
à arquitetura de informação, ao design de interação, ao design
de navegação, ao design de informação e ao design sensorial.
Essa simultaneidade é propiciada pelas ferramentas interativas de
prototipagem, que permitem uma otimização das técnicas. De todo
modo a Instauração prevê técnicas de Sitemap, Rabiscoframes (Teixeira,
2014), Cardsorting e Protótipos de papel e interativos.
A fase de (iv) Inspeção é a única que não leva ação no rótulo,
porém é uma das mais ativas e ativistas, colocando o usuário ao lado do
projetista, testando, avaliando e proporcionando dados que permitirão
que mais usuários tenham uma melhor experiência de uso. Aqui técnicas
como Teste A/B, Testes de Usabilidade, Análises Heurísticas da interface
58
projetada e Avaliação são extremamente importantes tanto enquanto se
prototipa e itera, a partir das melhorias apontadas, quanto na fase da (v)
Implementação, onde temos o produto final sendo gerado e testado.
Essa última fase é composta pelo desenvolvimento técnico, pela geração
do produto final com outras inspeções e substituições até chegar ao
usuário, incluindo atualizações.
Ainda em relação ao visual do método 5I`s, o prof. Volnei Antônio
Matté desenhou o selo da metodologia, (topo da Figura 1), pois percebeu
que com fontes sem serifa o “i” pareceria com o “l”. O selo traz curvas
mais quadradas relacionadas ao contexto tecnológico no qual o método
é aplicado. Inclusive a fonte utilizada na presente publicação, Raleway,
demonstra essa problemática.
Em um primeiro momento a metodologia proposta foi inspirada
na estrutura de desenvolvimento de projetos baseada em planos
para facilitar a experiência de usuário, proposta por (Garret, 2011), no
design centrado no usuário, de (Norman, 2004; Lowdermilk, 2013), e nas
orientações bem práticas de (Teixeira, 2014).
Garret(2011) propõe 5 planos interdependentes de
desenvolvimento, com subdivisões, indo de uma base bastante abstrata
até a superfície sensorial, mais concreta ao usuário. Na primeira
publicação de Garret (2003) o último plano, a superfície era representada
como Design Visual, mas com o passar do tempo, foi atualizado pelo
termo Design Sensorial.
Figura 02 -Metodologia proposta por Garret (2011)
Fonte - (imagem extraída do livro do autor)
59
O autor divide todos os planos no produto como funcionalidade e
no produto como informação. É importante compreender esse esquema
(Figura 2) para pensar nas alterações que se sucederam na metodologia
5I`s, as quais aqui pretendemos demonstrar com aprofundamento
para justificar escolhas e proporcionar ao aluno um entendimento dos
autores relacionados. Em (Garret, 2011) o plano da estratégia alinha o que
o usuário precisa ao que o produto objetiva. Está bastante focado nos
objetivos de negócio e na estratégia de marca do produto, além de visar
compreender o usuário por meio de pesquisas e da criação de personas.
Ele inclui grupos focais e cardsorting nessa fase.
A metodologia 5I`s foi desenvolvida para o contexto do laboratório,
um contexto acadêmico, como método de ensino. A esse contexto
soma-se a experiência de mercado da propositora, o que contribuiu para
a simplificação de algumas etapas, para otimizar o processo, sendo que
o mercado é voraz, mas não podemos deixar essa voracidade atrapalhar
o processo criativo e o processo de projetação. A ideia é que os alunos
possam continuar aplicando esse método no mercado de trabalho.
Ainda, o foco está na inovação e no potencial inventivo, por isso,
prevê um briefing com as perguntas: Qual é o problema que a interface
irá resolver? Afinal este é o ponto de partida de um projeto de design:
a solução inteligente de problemas (Bonsiepe, 2011). Os projetos do
laboratório só serão realizados se souberem responder essa pergunta de
um modo inteligente. Além das questões: O quê? Como? Porquê? Para
quem? Por quem? Em que lugar? A pergunta “por quem?” dá um viés
ativista para cada projeto que será executado. Já, pensar “em que lugar”
ativa os pontos de contato com o público, visando otimizar estratégias
tanto de design quanto de marketing.
Depois de responder a essas perguntas, o desenhista é incentivado
a fazer o brainstorming (tempestade cerebral) e a encontrar o conceito-
chave que quer desenvolver. Esse brainstorming inicia solo, mas ganha
amplitude quando exposto à professora e aos colegas de laboratório,
que contribuem na geração de ideias.
Jake Knapp, idealizador do método Design Sprint, do Google,
diz em um post, ainda em 2013 que brainstormings não funcionam,
por mais animadores e motivadores que pareçam ser para as equipes.
Nas experiencias dele, as equipes não tiravam ideias do papel pós-
brainstorming e apenas os que sabiam vender melhor suas ideias
ganhavam destaque. O Design Sprint é bastante utilizado em Startup
60
Weekends, e propõe cinco fases em cinco dias, discutindo desde
questões chaves para o negócio, como objetivos e desafios até soluções,
protótipos de interfaces e testes. Existem inúmeros métodos e cada
indivíduo deve usar o que achar mais adequado para cada projeto. No
contexto do laboratório, o brainstorming tem funcionado bem e vem
amparado de pesquisas e da construção de um background conceitual e
imagético, além da observação e aproximação constante com o público.
Na sequência dessa etapa, inicia-se uma busca por referências,
tanto em interfaces afins, quanto em experiências transversais ao projeto.
Essas referências culminam na elaboração de um Atlas Mnemosyne,
método utilizado pelo historiador Aby Warburg (2015) para encontrar
pontos em comum que aparecem como fantasmas nas imagens. Essa
sobrevivência de formas, cores e elementos, direciona as escolhas do
design sensorial do projeto. No campo do design já é algo comum montar
um Moodboard, quadro de referências, a especificidade aqui é encontrar
pontos em comum entre as imagens que formam esse background de
referências. Antecipar essas escolhas de design, ainda que possam ser
revistas mais tarde, facilitam a prototipação digital e, para alguns projetos,
dispensam a etapa da projetação de wireframes cinzas.
Ainda na mesma fase de projeto, são traçados mapas mentais com
as ideias iniciais. Indica-se três ferramentas para a criação desses mapas
mentais online, o Miro, o Mind Meister e o GoConqr. Mas, fazer à mão
também tem sua importância, o desenhista vai escolher qual é o modo
mais adequado para a sua expressividade e intenção. Isso demonstra
flexibilidade na metodologia. Esses mapas avançam o brainstorming e
a coleção de imagens, já indicando possíveis tarefas e requisitos, ainda
que validados apenas na mente do designer de interfaces e da equipe.
Obtidas estas primeiras impressões, a projetação irá voltar-se até o
final para o usuário, então a próxima fase é entender quem ele é por meio
de pesquisas. Como lembra (Teixeira, 2014), as pessoas nem sempre têm
a perspicácia de Steve Jobs de lançar produtos a partir da máxima “as
pessoas não sabem o que querem até mostrarmos a elas”. Por isso, escutar
o usuário é essencial, a menos que se trate do desenvolvimento de uma
interface de arte, que pode visar, justamente uma provocação. Ou que o
projeto seja muito inovador, a ponto de o usuário nem compreendê-lo no
momento atual, sem imaginar a sua necessidade.
Em relação às pesquisas com usuário é importante, mas não
essencial, que em um primeiro momento seja elaborado um questionário
61
que será aplicado junto ao público-alvo que se objetiva atingir. Entre as
ferramentas para aplicação de questionários on-line indicamos o Google
Forms, o Type Form, o Wufoo, o Survey Kiwi e o Survey Monkey.
Elaborar a pesquisa contribui para a validação da ideia junto ao
público e também serve para descobrir requisitos para a interface a
ser desenvolvida. Por isso sempre é bom inserir ao final do questionário
uma pergunta aberta para que o usuário possa se expressar e traçar
informações relacionadas ao projeto. O questionário pode ser enviado
online ou aplicado com pessoas do nicho que se pretende atingir.
Recomendamos que antes de montar o questionário se crie uma
persona, para que esta possa guiar o desenvolvimento das perguntas,
bem como direcionar ao público-alvo o questionário. As demais personas
podem ser elaboradas a partir de dados reais obtidos nas pesquisas
com usuários. Conforme (LOWDERMILK, 2013, p. 73): “uma persona é um
elemento determinado segundo a personalidade que ajuda você a se
lembrar para quem o aplicativo está sendo criado”.
O referido autor sugere que sejam imaginados cenários de uso
para essas personas criadas. São situações que permitem ao desenhista
verificar as necessidades do usuário e como a interface vai reagir a elas.
Já (TEIXEIRA, 2014, p. 18;23) inclui outros métodos de estudar o perfil
do público e traçar estratégias para captá-lo, entre eles, destaca-se o
Blueprint, um mapa de pontos de contato e caminhos para chegar às
interações da marca com o usuário e o Ecossistema, uma visualização das
propriedades digitais da marca, visando a integração com o marketing.
Mais recentemente, o conceito de Jobs to be Done tem ganhado
relevância. Em um post no blog Vida de Startup, Matt Montenegro vai
dizer para esquecer o público-alvo e as personas e focar no Jobs to be
Done, pois segundo ele não importa se você é homem ou mulher, velho
ou jovem, o que importa é como você realiza tarefas. Para isso a proposta
é resolver problemas focando nas tarefas e não nas pessoas. Porém,
analisando o comportamento dessas pessoas no desenrolar das tarefas.
No contexto do laboratório, temos adotado a construção das
personas, mas colocando um quesito básico: que elas possam ditar as
tarefas que a interface poderá resolver por meio das suas funcionalidades.
Mais uma vez, a metodologia 5I`s é adaptável para cada projetista e para
cada projeto, trazendo um contexto de outros métodos e processos no
seu guarda-chuva.
62
Como as interfaces geradas no laboratório, na maior parte das
vezes, estão iniciando sua trajetória como marca, nessa fase, optamos por
trabalhar apenas com pontos de contato, ‘Golden Moments’. Esses são
simulados por meio de um painel imagético, com fotografias de banco
de imagens ou situações capturadas pelo desenhista, os momentos
de ouro, ou seja, as situações em que o usuário vai encontrar-se com a
interface planejada.
Nesse ponto indicamos um aprofundamento do projeto na parte de
gestão, por meio de plano de negócios e de marketing. Há um laboratório
no curso que trata justamente da gestão de projeto, coordenado pela
professora Fabiane Vieira Romano. Porém, é importante para que a ideia
saia do papel, que já se tenha em mente como viabilizá-la. Aqui, a partir
de alguns anos trabalhando com essa metodologia aprimoramos essa
etapa, instigando o aluno a trazer dados do mercado no qual irá atuar e
buscar referências e suporte em concorrentes, pois as ideias precisam
ser sustentáveis no sentido de manutenção da interface gerada pelo
designer.
Amplia-se o primeiro plano de Garret (2011), com base em
(LOWDERMILK, 2013, p. 37, 50), ao trabalhar em conjunto com o usuário.
No contexto do laboratório, nem sempre é possível trazer os usuários
para dentro do laboratório para testar cada etapa, mas cada projeto
é pensado a partir do contato com algumas pessoas da rede de
contatos dos desenhistas, cujo perfil é o mesmo do público-alvo do
projeto. Praticamente todo mundo tem em seu círculo alguém que
usaria determinada interface, que é a cara do projeto e sintetiza seu
público-alvo. É melhor trabalhar/testar com uma pessoa do que não
planejar/testar com ela. Validar essas ideias de mercado com o usuário
é indispensável. Por exemplo, perguntando-se como ele pagaria pela
interface proposta. Isso é um item que pode ser inserido inclusive nas
pesquisas com o usuário.
O design centrado no usuário para Donald Norman (2004) significa
centrar o projeto nas necessidades do usuário. Pensando nisso o autor
propõe simplificar as tarefas; tornar as coisas mais visíveis, incluindo o
que pode ou não ser clicado; oferecer feedback ao usuário; trabalhar
com padrões; considerar os erros, tentando minimizá-los restringindo a
ação do usuário; entre outras indicações úteis ao projetista. É importante
mencionar que Norman também pensa a UX (User Experience -
Experiência de Usuário), uma potencialidade do design centrado no
63
usuário. Esses termos aparecem também em Lowdermilk (2013), Garret
(2011) e autoras chaves para a área Preece, Rogers e Sharp (2005).
Voltando à metodologia de Garret (2011) o escopo, segundo plano,
envolve especificações funcionais e os requisitos de conteúdo. Na
metodologia 5 I`s os requisitos e funcionalidades também são pensados
na fase dois. Sobre os requisitos e as funcionalidades (LOWDERMILK,
2013, p. 60) esclarece: “um requisito de usuário refere-se ao que o
usuário necessita; um requisito funcional refere-se ao que o aplicativo
necessita”. É importante ainda destacar (LOWDERMILK, 2013, p. 58):
“coletar requisitos de usuário representa a parte mais importante de sua
estratégia centrada no usuário”.
Ainda na fase dois propomos uma análise heurística de outras
interfaces de sistemas concorrentes ou afins, realizada a partir dos 10
princípios traçados por (NIELSEN; MOLICH, 1990). Trazer as heurísticas
para esse momento contribui para que os alunos consigam perceber
analiticamente as interfaces humano-computador, levantando ideias
também para seu projeto. Nesse momento a análise pode ser de
interfaces afins ao projeto ou que tenham funcionalidades semelhantes.
Sobre a análise heurística, são analisados os 10 princípios: (1) Feedback;
(2) Falar a linguagem do usuário; (3) Liberdade e controle do usuário;
(4) Consistência; (5) Prevenir erros; (6) Reconhecer ao invés de lembrar;
(7) Oferecer atalhos; (8) Diálogos naturais e simples (estética e design
minimalista); (9) Boas mensagens de erro; (10) Ajuda na documentação. A
eles sempre acrescentamos a pergunta (11) a interface é acessível? E (12)
qual é o impacto ambiental que essa proposta gera?
A análise gráfica mais aprofundada vem com a sistematização das
interfaces analisadas trazendo informações visuais sobre Tipografias
utilizadas, paletas de cores e malhas gráficas. Em web as malhas gráficas
tem um papel fundamental na responsividade, definindo a flexibilidade
da interface em vários tamanhos de tela, por meio de pontos de quebra
que apresentam diagramações readequadas.
Ainda padrões de interação são observados, sobretudo para
aplicativos; estratégias gamificadas para interfaces que incluem
essas técnicas e jogabilidade para games. Essas últimas análises são
específicas apenas para projetos afins a essas áreas.
É na fase de Inambulação as tecnologias são analisadas. Fabricio
Teixeira (2014) cita a famosa frase de Steve Jobs: “Comece com a
experiência do usuário e depois defina a tecnologia usada”. Esse é um
64
bom início quando pensamos em projetos de interfaces interativas. O
autor ainda argumenta que é fundamental que o designer conheça as
tecnologias, mas sobretudo, que saiba como as pessoas interagem
com elas.
Quando a fase de escolher as tecnologias chega, após definir o
problema que o produto está tentando resolver e passada a fase mais
longa de conceitualização e pesquisa, é preciso definir a tecnologia que
faça sentido junto ao público-alvo e ao contexto no qual o produto será
utilizado. Para escolher a tecnologia ideal para um projeto de interface
alguns critérios podem ser levados em consideração (TEIXEIRA, 2014):
o primeiro deles é o conteúdo, que está associado ao produto e às
funcionalidades; o segundo diz respeito ao usuário, às suas expectativas
e uso. Esses dois primeiros critérios dialogam com o plano escopo do
Garret (2011), mas acresce outros dois: tempo, ou seja, quanto demora
para desenvolver a interface, e marketing. Esse último diz respeito às
estratégias de divulgação que serão utilizadas. Por isso pensar os pontos
de contato do público com essa interface é essencial.
Em relação às tecnologias, diferenciam-se as utilizadas para
prototipar e as usadas para implementar, pois ambas impactarão no
tempo de desenvolvimento da proposta. Atualmente, uma série de
ferramentas de prototipagem interativa é lançada e, semestralmente,
elas têm sido testadas no laboratório de interfaces no qual trabalhamos.
Entre as inúmeras ferramentas disponíveis, as que melhor têm respondido
às necessidades do laboratório são as seguintes: XD da Adobe, UXPIN,
Just In Mind, Figma e InVision App. Priorizamos ferramentas online e/
ou gratuitas, ao menos para um projeto, para que os estudantes tenham
acesso também em casa.
Sobre as tecnologias utilizadas para implementar, é preciso
considerar cada interface em específico, mas as linguagens utilizadas
para web envolvem HTML, linguagem de marcação, que compõe a
estrutura da página; CSS, folha de estilos, que vai dar a “cara” da página
e Javascript, que é responsável pelas interações. No entanto, várias
bibliotecas como o JQuery e o React são desdobramentos do Javascript
para facilitar aspectos de desenvolvimento. Há também o Php muito
utilizado para páginas em que o usuário pode ter maior controle de
conteúdo, entre outras linguagens que inclusive podem ser associadas.
Importante mencionar, para quem está começando, o Bootstrap, que é
um framework que facilita o desenvolvimento de web responsiva, ou
65
seja, websites que se adaptam aos diferentes tamanhos de tela, entre
outras funcionalidades que emprega. Ainda, em relação às interfaces
Web é necessário considerar os vários tamanhos de telas e para atender
a essas demandas utiliza-se Design Responsivo (Marcotte, 2011) e
Adaptativo (GUSTAFSON, 2011).
A história do Web design é escrita a partir das novas descobertas
no campo da tecnologia. Clarissa Peterson (2014), em Learning
Responsive Web Design, inicia sua abordagem lembrando que, em
2007, quando o iPhone foi lançado, aconteceu uma grande virada no
campo do Web design, momento em que foi preciso criar métodos para
a construção de sites flexíveis. Se a web 2.0 é sobre pessoas, a web 3.0
é da mobilidade. A web 3.0 é também conhecida como web semântica
e é base fundamental para a web 4.0, pautada nas tecnologias de
interfaces pervasivas e inteligentes.
Fluidez é uma das características primordiais do Web design
na contemporaneidade. Diferentemente de projetar peças gráficas
impressas, a web possibilita flexibilidade, com os diferentes formatos de
dispositivos que fluem de modos distintos nas variadas telas que fazem
parte do cotidiano do usuário. Acessar um site em um smartphone é uma
experiência distinta de acessá-lo em um desktop, notebook, tablet ou
console de videogame. Por isso atualmente o foco do Web design tem
se voltado ao design responsivo ou adaptável.
O termo design responsivo é cunhado por Ethan Marcotte (2011)
e ele assim como Clarissa Peterson (2014) e no Brasil, Maurício Samy
Silva (2014), entre outros ensinam métodos adequados para programar
websites responsivos nesse contexto fluido, flexível e adaptativo.
Marcotte (2011), em Responsive Web Design (RWD), enfatiza que
é natural nos basearmos nos princípios do design gráfico para projetar
websites, afinal há uma rica história que precisa ser considerada, mas
a linguagem das telas traz certas especificidades. O ritmo de um
desenvolvimento tecnológico que não podemos acompanhar faz com
que Ethan Marcotte nos sugira utilizar a arquitetura responsiva. Ele está
baseado em Nicholas Negroponte, e na robótica aplicada à arquitetura.
Conforme ele: “designers responsivos estão investigando modos para
que partes da arquitetura e seus habitantes influenciem-se mutuamente
e comuniquem-se uns com os outros” (MARCOTTE, 2011, p. 07). A proposta
dele é que possamos criar sites que sejam mais flexíveis e que possam
se adaptar aos diferentes meios em que circulam, respondendo ao
66
contexto. Conforme Marcotte, são necessários três “ingredientes” para
fazer sites com design responsivo: um layout flexível, baseado em grids;
imagens e mídias flexíveis e as Media Queries do CSS3. Esses designs
responsivos estão relacionados às porcentagens, ao invés de inserir
valores em pixels, o autor ensina inserirmos larguras relativas em termos
proporcionais, assim substituiremos, por exemplo, a largura 960 px, pelo
valor 90%. É calculando porcentagens que teremos um layout adaptável.
E essa flexibilidade deve ser aplicada aos demais elementos do site.
Conforme Peterson (2014), ao design já não basta ser apenas
adaptativo ao tamanho do dispositivo, mas também às capacidades
dos dispositivos e variados tipos de conexão. Conforme ela o design
responsivo permite que a web esteja disponível para todos, por isso
conteúdo e funcionalidade devem estar em primeiro lugar em um
website, com foco sempre no usuário.
Guerreto (In: SILVA, 2014, p.40) enfatiza que a internet é uma só,
então quando se pensa um site, é preciso centralizar a URL. Conforme ela:
“Tablets, smartphones, desktops, televisores e games portáteis formam
um verdadeiro ecossistema de telas”.
Web Design Adaptativo (AWD), também é um termo que surge
nessa fase das mídias móveis, cunhado por Aaron Gustafson (2011).
Diferentemente do RWD, Gustafson vai pensar o ADW a partir de interfaces
que se adaptem às capacidades do usuário (formas e funções). Ele
sugere “pense no usuário, não no navegador”, pois visa criar experiências
que servem ao usuário, proporcionando acesso ao conteúdo, sem
restrições tecnológicas. Para que os sites sejam visualizados como o
designer os pensou e em todos os navegadores, ele também enfatiza o
uso de otimização progressiva com HTML, CSS e JavaScript. Gustafson
vai para o campo da biologia para relacionar a adaptação e a evolução,
comparando o que acontece na natureza às linguagens de programação
que precisam ser compatíveis, mesmo se o ambiente de programação
mudar. As linguagens são programadas para evoluir e os navegadores
para tolerar falhas e ignorar o que não entendem. Ele argumenta que
a otimização progressiva dessas ferramentas e seu uso em camadas
é fundamentado em acessibilidade. Todos nós temos necessidades
especiais quando nos conectamos em diferentes tipos de dispositivos
tecnológicos, utilizar a otimização progressiva promove o acesso. Essa
estratégia leva em consideração cinco níveis de experiência: a base é
sempre o texto, aqui se utiliza HTML; o segundo nível é a semântica da
67
linguagem HTML em si; o terceiro nível é audiovisual, construído com o
CSS; o quarto nível é o interativo, construído com JavaScript; e o quinto
nível é a aplicação semântica das melhores práticas que contem a
especificação do Web Accessibility Initiative’s Accessible Rich Internet
Applications (WAI-ARIA), ou seja, normas de funcionalidade para
criar soluções para pessoas com deficiência. A cada nível são criadas
experiências mais ricas ao usuário (GUSTAFSON, 2011).
Porém, se a interface for um App, deve-se analisar se o público-alvo
é usuário de Android ou iOS, pois as linguagens para os desenvolvedores
são diferentes. O Android Studio é o atalho para desenvolver para Android
e o XCODE para iOs. Ainda há a questão dos padrões de interação que
são distintos entre os dois sistemas. Thereza Neil (2012) aborda diferentes
exemplos de padrões de interação. Mesmo que muitos já estejam
desatualizados, pela efervescente busca por atualizações nessa área, o
livro demonstra e conceitua padrões-chaves e anti-padrões e ajuda a
historicizá-los ao catalogá-los.
Conforme as pesquisas realizadas pela Kantar Word Panel, no
Brasil, em dezembro de 2018, 94,9% dos entrevistados utilizavam sistema
operacional Android, enquanto 4,3% dos usuários utilizavam iOS, 0,6%
Windows Phone e 0,2% outros smartphones. Já em comparação com os
Estados Unidos, o número de usuários de Android cai para 54,3%, o de
usuários de iOS sobe para 45,5% e o de Windows vai para 0,1%. Assim
depende do mercado que se visa atingir. Ainda, se o público-alvo da
interface a ser desenvolvida for usuário de Iphone no Brasil, em sua maioria,
estes dados pouco importam, é preciso considerar individualmente os
objetivos da interface e seu público-alvo. Outro exemplo é a versão, se
há uma funcionalidade de realidade virtual para Cardboard, no Android,
deve-se projetar para a versão mínima 4.1 e no iOS a partir da 8.0.
É notável que a cada semestre os alunos já chegam com a
proposta de desenvolvimento de um APP no laboratório, mas muitas
vezes é necessário perguntar se tem mesmo que ser um aplicativo.
Atualmente desenvolver para a web pode ser uma solução mais eficaz,
pois há um número considerável de aplicativos nas App Stores e o que
irá diferenciar a interface que se está criando das demais? Como ela
ganhará destaque junto ao consumidor? Esse aplicativo irá precisar de
internet para rodar? Irá acessar quais das funcionalidades do mobile?
Ainda aplicativos híbridos conseguem utilizar alguns recursos como
notificações e geolocalização. Há de se perguntar se é mais eficiente e
68
adequado ao público e ao projetista, desenvolver um aplicativo nativo,
um aplicativo híbrido ou um web app. O nativo utiliza a linguagem nativa
do sistema operacional, como por exemplo o Java para Android, ele não
precisa necessariamente de conexão com a internet. Já um aplicativo
híbrido é construído utilizando HTML, CSS e Javascript, mas é integrado
aos recursos nativos do sistema operacional. Esses aplicativos híbridos
costumam ser mais simples e fáceis de desenvolver, porém são mais
lentos em relação aos nativos. Já os web apps não são de fato aplicativos,
e sim websites que são projetados para mobile, eles não estarão
disponíveis em App Stores. Como desvantagem, os web apps dependem
de conexão com a internet, são menos seguros e não conseguem usar
todas as funcionalidades do dispositivo. A grande vantagem é que eles
dialogam com todos os sistemas operacionais, uma vez que haja um
navegador instalado no mobile. Eles não consomem memória e não
precisam ser baixados. Isso pode ser uma vantagem tendo em vista a
pesquisa recente da App Annie (2018), disseminada pelo CanalTech, a
qual afirma que o Brasil é o quinto maior usuário de smartphones no
mundo, mas os nossos usuários tem em média de 70 a 80 aplicativos
instalados, usando apenas a metade deles.
Para quem estiver pensando em desenvolver web apps, em termos
de projetação, outro conceito que emerge nesta era da mobilidade é o
Mobile First, termo cunhado por Luke Wroblewski (2011). Ficou popular
após Wroblewski ter escrito, em 2009, que normalmente se pensa
no design para os dispositivos móveis depois de se pensar no Web
design para desktop. Ele vai propor inverter essa relação, pois há uma
explosão da tecnologia mobile, o design para mobile exclui elementos
desnecessários e os dispositivos móveis trazem novas funcionalidades
de uso. Wroblewski argumenta que pensar primeiro na versão mobile
significa inovar por meio de possibilidades que não existiam antes das
mídias móveis.
No contexto do laboratório, na maioria dos projetos buscamos
desenvolver a partir do Mobile First. Ainda há uma tendência que impacta
diretamente no design das páginas, que é o Amp Project, este consiste
em reduzir ao máximo as informações, visando uma acessibilidade
ainda mais universal da web, em diversas plataformas e navegadores,
consistindo em um projeto de código aberto.
Após tomar essas decisões centradas no usuário, o método 5I`s,
passa para sua terceira fase, a Instauração, que condensa e objetiva ao
69
aluno os planos estrutura, esqueleto e superfície de Garret (2011). Na
metodologia de Garret, a estrutura inclui a arquitetura de informação
e o design de interação; o esqueleto abrange o design de interface, o
design de navegação e o design de informação, este atuando em nível
de funcionalidade e de informação. Já o último nível no desenvolvimento,
ou seja o design sensorial, fica no plano da superfície e é o primeiro a
impactar no usuário.
Esta divisão proposta por Garret é bastante interessante para
equipes maiores, em que existem profissionais especializados em cada
uma dessas funções. Kalback (2009), por exemplo, escreve um livro sobre
design de navegação. No mercado de trabalho há vagas específicas
para cada uma dessas funções. No entanto, no laboratório, em um nível
acadêmico, é necessário compreender na íntegra todas estas áreas,
possibilitando especialização futura. Também existe uma limitação a
projetos que envolvem uma ou duas pessoas no seu desenvolvimento,
de modo que esse conhecimento interdisciplinar torna-se híbrido. Assim,
sintetizamos esses três planos em uma fase macro, repleta de iterações.
Aqui deve-se cuidar para que não haja apenas uma simplificação,
mas sim um estudo aprofundado de cada área que influenciará na
implementação da ideia por meio de processos sugeridos por cada
área que fazem sentido ou não para cada interface desenvolvida. Por
exemplo, para alguns projetos cabe fazer um protótipo em papel mais
bem elaborado, em outros, apenas um “rabiscoframe”resolve aquela
etapa de projeto. Para fortalecer o conhecimento teórico de cada área
propomos seminários em que os alunos devem buscar referências, as
quais posteriormente são usadas nos artigos relatórios que escrevem ao
final do projeto.
É importante que os conceitos fiquem bem definidos. Por isso,
trazemos aqui também algumas indicações-chaves para pensar as
áreas macro, envolvidas na fase 03 da metodologia 5I`s: design de
interfaces, arquitetura da informação, ergodesign, design de interação,
navegação, design de informação e design sensorial. Em outras
ocasiões já escrevemos sobre o design de interfaces, conceituando-o
(GASPARETTO, 2016; GASPARETTO; PEDROSO; OLIVEIRA; 2016; ). Talvez
a melhor definição para resumir uma área tão ampla seja: um projeto
que resolve problemas comunicacionais entre humanos e máquinas,
para isso flerta com a usabilidade, a acessibilidade e a experiência de
usuário, aproximando-se interdisciplinarmente das demais áreas citadas.
70
Conforme Rocha (2014) é exclusivamente por meio das interfaces que o
sistema torna-se acessível. O autor traz um detalhamento conceitual e
técnico do campo das interfaces e IHC (Interação Humano-Computador),
demonstrando o fundamental e central papel do design de interfaces
na produção simbólica da cultura contemporânea. Ele destaca que as
interfaces podem ser físicas, perceptivas, sonoras, gráficas, de marcação
e cognitivas.
Um dos autores pioneiros a conceituar as interfaces é Steven
Johnson (2001) e em termos mais aplicados uma referência interessante
para quem está começando é Joshua Porter. Ele escreve 19 princípios
para o design de interfaces, com foco nas interfaces gráficas. Muitos
deles são compatíveis com os princípios utilizados para projetos de
design gráfico, no entanto adaptados ao contexto de interatividade da
hipermídia. A filosofia de Porter (2007) parte de princípios simples: “a
experiência pertence ao usuário, a tecnologia serve aos seres humanos,
design não é arte, grandes projetos são invisíveis e simplicidade é a
sofisticação final”. Além de um livro sobre design para a web social
(PORTER, 2008), Joshua Porter, em 2010, une-se a Joshua Brewer para
projetar um site com 52 semanas de UX, ou seja, regras e dicas sobre
experiência de usuário e usabilidade. Anteriores a dupla Joshua, outros
escritores como Nielsen e Molich (1990), Zeldman (2001), Norman (2004,
2006), Preece, Rogers e Sharp (2005), Nielsen (2007;2013), Krug (2008),
ROYO (2008) Tindwel (2011), entre outros, escreveram sobre design de
interfaces, usabilidade e experiência de usuário, desde as coisas do dia-
a-dia até a web e os projetos interativos. Todos os livros são excelentes
recomendações para se aproximar do tema, em âmbito mais generalista
sobre o tema interfaces. No contexto de interfaces para Web Design
também os brasileiros Luli Radfahrer (2000), Felipe Memória (2005) e
Fabrício Teixeira (2014) são boas indicações para quem está começando.
Usabilidade e User Experience (UX) são temas associados ao design
de interfaces, porque o projeto de interface está centrado no usuário.
Recomendamos ainda a verificação de recomendações do W3C e de
padrões para acessibilidade disponibilizados pelo eMAG.
Em relação ao termo arquitetura da informação, foi cunhado
em meados dos anos 1970 pelo arquiteto Richard Saul Wurman, autor
de vários livros, entre eles “Information Anxiety”, publicado em 1989 e
atualizado em 2001. O objetivo de Wurman era simplificar ao usuário
a complexidade do sistema computacional. Diante de um excesso
71
de informações que provoca ansiedade, a função da arquitetura da
informação é imprescindível para direcionar o usuário em sua trajetória
pelo ciberespaço.
É necessário situar que em projetos interativos (de um website, a
um app, um game ou qualquer outra interface multimídia ou hipermídia),
a arquitetura da informação não é uma área isolada, está associada ao
ergodesign, mas vincula-se também ao design de interfaces, ao design
de experiência, ao design de interação, às pesquisas em IHC, à engenharia
de usabilidade, ao desenvolvimento de softwares e a um conjunto
multi e interdisciplinar. Nesse contexto, a arquitetura da informação é
responsável por organizar os itens dentro de uma estrutura mais ampla
para que sejam facilmente encontrados pelo usuário, criando ambientes
informacionais em meio ao excesso informacional da era digital. O foco
da arquitetura da informação em interfaces multimídia parte sempre do
usuário (MORVILLE; ROSENFELD, 2006).
As funções desenvolvidas nessa área de arquitetura da informação
abrangem: “organizar padrões dos dados e transformar o que é complexo
ou confuso em algo mais claro” (AGNER, 2009, p. 78). E ainda, o arquiteto
da informação “mapeia a informação e nos disponibiliza o mapa”. Entre
as suas habilidades deve estar o conhecimento de IHC. A partir dos anos
1990, com a emergência da internet, o papel do arquiteto da informação
passou a ser ainda mais fundamental.
Louis Rosenfeld e Peter Morville, desde 1994 vêm se dedicando
a arquitetura da informação e contribuindo para o crescimento desse
campo. Na terceira edição de Information Architecture for the World Wide
Web (2006), livro que tem apresentação de Jackob Nielsen, um mestre
em usabilidade, eles repensam o que mudou desde os anos 1990 até a
web 2.0, bem como reafirmam o que continua válido nesse campo. Eles
definem arquitetura de informação como “(…) a arte e ciência de elaborar
produtos informacionais e experiências para dar suporte a usabilidade e
a fácil localização dos mesmos (…)” (ROSENFELD; MORVILLE, 2006, p. 04).
Os autores acreditam que o foco no usuário é fundamental, mas não é
o suficiente, é necessário equilibrar as necessidades do usuário com as
da empresa. Por isso, estão baseados na ecologia da informação e nos
três famosos círculos em interseção, o dos usuários, o do contexto e o
do conteúdo. Os três círculos são interdependentes dentro da complexa
ecologia da informação.
72
Em Ergodesign e arquitetura da informação > trabalhando com o
usuário, livro que tem apresentação de Peter Morville, Luiz Agner (2009),
entende esses círculos como os 3C: contexto, comportamento e conteúdo.
O contexto está relacionado à organização, por isso é prioritário conhecer
os seus objetivos; os conteúdos estão voltados ao informacional, envolve
a seleção de informações que se inclui em uma interface multimídia,
aplicativos, textos, vídeos, imagens, plug-ins; e o comportamento está
associado aos usuários, é primordial conhecer os usuários, aqui aplica-
se a ergonomia e o ergodesign. Conforme Agner, o ergodesign orienta a
usabilidade e a arquitetura da informação está inserida no ergodesign. O
autor ainda discorre sobre os componentes da arquitetura da informação:
sistemas de organização, voltados à organização e categorização da
informação, são estruturas e esquemas de apresentação da informação;
sistemas de navegação, que definem o modo que o usuário vai se mover
no espaço; sistemas de rotulação, que podem conter rótulos textuais
e icônicos e precisam ser coerentes ao usuário; e de busca, que são
aplicações de software para a busca de palavras dentro do espaço
multimídia proposto. Os sistemas de navegação subdividem-se em:
navegação embutida, que é composta por subsistemas de navegação
global, local e contextual; navegação suplementar, com guias, índices,
mapas e a busca; e navegação avançada, composta por personalização,
customização e navegação social (AGNER, 2009).
Após termos a informação organizada é necessário pensar
como o usuário vai interagir com ela, quais serão as respostas nessa
comunicação humano/máquina. Embora um dos autores mais
representativos na área de design de interação seja Dan Saffer (2010,
2013), foi Bill Moggridge o primeiro a nomeá-lo e nos anos 1990 o termo
transformou-se em um campo de atuação e pesquisa. Saffer demonstra
que as pessoas normalmente lembram do design de interação quando
ele não funciona, sendo que este é o responsável por comunicar
visualmente as tarefas ao usuário que deve responder ao sistema.
Assim como as demais áreas essa tem uma gama de metodologias e
de processos. Mas há um gráfico (Figura 3) disponibilizado por Saffer
(2010) que resume bem a interdisciplinaridade das áreas e o momento
em que se tocam. Assim o design de interação faz parte do amplo
mundo da User Experience unindo fatores humanos, computacionais,
desenho industrial, design visual e de som, além de tocar nos campos da
arquitetura e da arquitetura de informação. Estamos em sintonia com a
73
afirmação do autor (SAFFER, 2010, p. 22, tradução nossa): “Os melhores
produtos envolvem múltiplas disciplinas trabalhando em harmonia”.
Mais recentemente têm se popularizado as práticas e estéticas
de microinterações, a elas Saffer dedica um livro (2013). Consistem nas
principais tarefas que realizamos a cada momento de contato com
a interface e que são essenciais, como dar um like no facebook ou
preencher o login. São tão importantes que ganham regras específicas e
exigem feedbacks constantes. Ele as distingue de features, pois são mais
simples e breves, enquanto as features são mais complexas e macros. As
microinterações podem aparecer dentro das features, por exemplo. O
autor demonstra que recursos macro e micro, quando bem combinados,
prestando a atenção nos detalhes, geram excelentes experiências de uso.
Saffer é uma referência também para a implementação técnica dessas
microinterações trazendo especificações em termos de Triggers, Regras,
Feedback e Loops e Modos. Entre as publicações na área de design de
interação destaca-se o guia proposto por Prrece, Rogers e Sharp (2005),
uma das principais e mais completas referências.
Figura 3 Gráfico das disciplinas de UX
Fonte: Extraído do livro de Saffer (2010)
74
Mais recentemente têm se popularizado as práticas e estéticas
de microinterações, a elas Saffer dedica um livro (2013). Consistem nas
principais tarefas que realizamos a cada momento de contato com
a interface e que são essenciais, como dar um like no facebook ou
preencher o login. São tão importantes que ganham regras específicas e
exigem feedbacks constantes. Ele as distingue de features, pois são mais
simples e breves, enquanto as features são mais complexas e macros. As
microinterações podem aparecer dentro das features, por exemplo. O
autor demonstra que recursos macro e micro, quando bem combinados,
prestando a atenção nos detalhes, geram excelentes experiências de uso.
Saffer é uma referência também para a implementação técnica dessas
microinterações trazendo especificações em termos de Triggers, Regras,
Feedback e Loops e Modos. Entre as publicações na área de design de
interação destaca-se o guia proposto por Prrece, Rogers e Sharp (2005),
uma das principais e mais completas referências.
Já o design de navegação é sobre como vincular páginas e
conteúdos facilitando às pessoas o acesso, conforme Kalback (2009)
as metodologias adotadas pelo designer em relação a web colocam
o usuário como integrante do processo de desenvolvimento de um
projeto para a web, por isso testes são imprescindíveis. O autor traz a
ideia de que a navegação se foca em movimentar-se pela interface,
isso acontece por meio de hiperlinks, de sistemas de busca e rótulos
adequados. Também enfatiza os seguintes pontos: internacionalização e
acessibilidade, como princípios básicos para serem pensados no design
de navegação. Por isso sugere rótulos fáceis e alcance global, em termos
de línguas, regras legais e cultura. Essas três grandes áreas são muito
atreladas e decisões tomadas em uma delas devem ser comunicadas,
pois impactam diretamente no desenvolvimento das outras. Tendo a
estrutura da informação e o fluxo de acesso a ela, com a interação com
o usuário bem pensada, é hora de estabelecer o design de informação.
Mônica Moura (2007), em Design de Hipermídia, traz um subcapítulo
em que pensa “O design da informação como a essência do projeto de
hipermídia”. Nessa oportunidade, ela argumenta que diante o excesso de
informação que pode haver em um projeto hipermídia, é preciso organizar
e estruturar em níveis de prioridade cada conjunto de informações.
O designer de informação trabalha em conjunto com o designer
hipermídia e é a base de um projeto. É o design de informação que
estrutura a navegabilidade e a interatividade. Moura enfatiza que ainda
75
há confusão entre Arquitetura da Informação e Design de Informação,
algo que parece interessante esclarecer. A arquitetura da informação
é responsável pela organização dos espaços e o design da informação
cuida da comunicação visual desse espaço. O designer da informação
planeja, prepara e organiza as estruturas de navegação, como títulos,
botões, barras de navegação, tornando a interface coerente.
O designer de informação está focado no aspecto visual da interface,
criando ícones, pensando no texto e nas imagens, na hierarquia adequada
para cada informação no que se refere a sua ordem de importância para o
usuário/interator, impactando na experiência de usuário. Fazer o design de
informação é a parte que o desenhista industrial tem mais facilidade, pois
remete ao design gráfico e até mesmo editorial. É importante mencionar
que o design de informação vai além do campo das interfaces interativas,
como no exemplo-chave para a compreensão do termo, sua aplicação
no mapa do metrô de Londres, projetado na década de 1930 por Harry
Beck a fim de simplificar a gama de informações. Jacobson (1999) edita
um livro clássico sobre design de informação, reunindo pesquisadores e
conceitos das áreas afins, publicado pelo MIT com prefácio escrito por
Wurman. Recentemente, chama a atenção a publicação de Cunha (2017)
e como periódico mais emblemático no Brasil nessa área destaca-se a
Infodesign, Revista Brasileira de Design da Informação, publicada pela
SBDI (Sociedade Brasileira de Design de Informação).
O plano do Design Sensorial de Garret (2011) é aquele que tem
atributos estéticos e sensoriais, mas de fato consegue apresentar ao
usuário toda a composição planejada nos outros planos. O principal
nesse plano é pensar a experiência do usuário e como a interface irá
impactar nos sentidos das pessoas, nos cinco sentidos, pois eles serão
impactados conforme o objetivo do projeto. Aqui estabelecer um guia de
estilos é fundamental para que as decisões tomadas sejam lembradas e
mantidas mesmo quando a equipe muda. Esse guia envolve grids, cores,
tipografia, padrões e diretrizes. Do mesmo modo, na metodologia 5I`s
esse guia de estilos é imprescindível, sobretudo para dar continuidade
às interfaces e para organizar as informações para o desenvolvedor.
Voltando para a aplicação prática desses conceitos, no contexto
da metodologia 5I`s, a fase da instauração é iterativa e alternada com
a fase da inspeção, avaliando e validando junto ao usuário/interator.
Em um primeiro momento o desenhista realiza o sitemap, ou seja, lista
e rotula todos os aspectos da interface. Na sequência, faz os primeiros
76
esboços sobre como estas informações irão aparecer tela a tela. Faz-
se uma referência a Teixeira (2014), que trata esses esboços como
rabiscoframes. Esses rabiscos são bastante improvisados e servem para
guiar a técnica do cardsorting. Esta técnica consiste em colocar todos os
rótulos em cards e pedir ao usuário que organize esses cards para cada
tela da interface. Os cards físicos costumam ser feitos em post-its e os
online podem usar ferramentas como o Real Time Board.
Rabiscando antes o designer pode testar suas ideias em relação
ao usuário. É importante manter esses rabiscos até o final para que se
possa verificar o que foi sendo alterado e o porquê, por isso vale colocar
anotações também. Após verificar as diferenças e semelhanças entre o
cardsorting e o projeto inicial do designer, por meio dos rabiscoframes,
sintetiza-se o que mais faz sentido e indica-se que o próximo passo seja
realizar um protótipo em papel. Os protótipos em papel, permitem que
seja testada a arquitetura da informação com o usuário. É um modo
muito barato e simples de validar as ideias e coletar informações básicas
em relação à interface. Esses protótipos podem ser bem elaborados e
desenhados ou apenas de modo simples, mas proporcionando que o
usuário compreenda tarefas que serão colocadas a ele pelo designer.
Essas tarefas, sugerimos no mínimo cinco, ajudam a retomar a importância
de cada requisito e funcionalidade apontados na fase anterior.
Aqui fazemos um bate-volta entre práticas e teorias novamente.
Nesse momento do projeto sugere-se que o projetista volte-se à
simplicidade. John Maeda (2007) traça dez “leis da simplicidade”, as quais
podem servir como guia para projetar produtos interativos. Conforme
o autor, o mercado está cheio de promessas de produtos e serviços
descomplicados e “simplicidade vende”. “A procura por maneiras mais
simples e mais eficientes de fazer a economia crescer está a todo o
vapor” (MAEDA, 2007, p. 06). Maeda organiza a simplicidade em três níveis,
básica, intermediária e profunda. As leis são as seguintes: (i) Reduzir, a
maneira mais simples de alcançar a simplicidade é por meio de uma
redução conscienciosa, ou seja, se houver dúvida, elimine; (ii) Organizar,
a organização faz com que um sistema de muitos pareça de poucos;
(iii) Tempo, economia de tempo transmite simplicidade; (iv) Aprender,
o conhecimento torna tudo mais simples; (v)Diferenças, simplicidade e
complexidade necessitam uma da outra; (vi) Contexto, o que reside na
periferia da simplicidade é definitivamente não-periférico; (vii) Emoção,
mais emoções é melhor que menos; (viii) Confiança, na simplicidade
77
nós confiamos; (ix) Fracasso, algumas coisas nunca podem ser simples;
(x) A única, simplicidade consiste em subtrair o óbvio e acrescentar o
significativo. Ele ainda aponta três soluções: (i) Distanciamento, mais
parece menos afastando-se para bem longe; (ii) Abertura significa
simplicidade; (iii) Energia, use menos, ganhe mais (MAEDA, 2007, p. 11). O
autor ainda adota o método ELA (Encolher/Ocultar/Agregar) para definir
o que reduzir em um projeto hipermídia. E sugere o uso do processo
que denomina SLIP (Selecionar, Rotular, Integrar e Priorizar) quando
pensa a organização. Para a lei Aprender, Maeda sugere o método
BRAIN (Básico é o início de tudo; Repita-se com frequência; Abstenha-
se de se desesperar; Inspire-se com exemplos; e Nunca deixe de se
repetir). “Os melhores designers casam a função com a forma a fim de
criar experiências intuitivas que compreendemos imediatamente. (...)”
(MAEDA, 2007, p. 39-40). Mas o próprio autor reconhece que nem sempre
as coisas precisam ser simples, então para cada projeto, utiliza-se o
dueto simplicidade/complexidade com parcimônia. Nesse momento é
adequado adotar essa perspectiva, pois o processo seguinte envolve
a prototipação digital, o que envolve mais trabalho e tudo que não for
necessário deve cair fora.
Há uma fase comum nas metodologias de projetos de interfaces
conhecida como wireframes, que seriam rabiscoframes mais elaborados,
mas ainda em cinza, com caixas de imagens e sem nenhum aspecto
visual muito elaborado. Normalmente estes wireframes são realizados
em programas de edição como Photoshop e Illustrator. No caso da
metodologia 5I`s, indica-se suprimir esta etapa e passar diretamente para
a ferramenta de prototipagem interativa, pois aqui já se pode testar com
o usuário incluindo as interações e a navegação. Esses testes também
requerem oferecer tarefas ao usuário e monitorá-lo. Muitas ferramentas
de prototipagem interativa dispõem de recursos como gravação das
interações e inclusive comentários para que tanto cliente, quanto
usuário e desenvolvedor possam interagir e enriquecer a prototipação.
Ferramentas como o XD da Adobe e o UXPin proporcionam esses
recursos.
É possível fazer uma versão mais simplificada para testar
inicialmente, para que não seja perdido muito tempo com o design
sensorial antes de testar. Por exemplo, utilizando ícones prontos e depois
substituindo-os pelos desenhados especificamente para a interface. Ao
mesmo tempo sugere-se que já se tenha um direcionamento para fontes
78
que serão usadas e cores, assim facilita um trabalho de rediagramação
posterior. Utilizar o Adobe Photoshop e o Illustrator acaba sendo uma
perda de tempo, pois as ferramentas de prototipagem apresentam
funcionalidade semelhantes e permitem a interação, já com suporte
para testes.
Ao conceber o protótipo interativo automaticamente os projetistas
já estão criando os fluxos, a navegação e o design de interação. As
ferramentas de prototipagem já disponibilizam inclusive os padrões
de interação mais comuns. Sugerimos fazer uma Inspeção, fase quatro
da metodologia 5I`s, antes de elaborar todo o design de informação e
sensorial do projeto. Essa parte conta com novas rodadas de tarefas
direcionadas ao usuário, testes A/B para reconhecer qual é o projeto que
mais se assemelha com o que o usuário espera ou sente-se confortável
em usar, testando inclusive dúvidas do projetista e da equipe. Além de
uma análise das respostas dos usuários e dos seus testes.
Após considerar as questões avaliadas nessa etapa, retorna-se
ao projeto e dirige-se o foco para o design sensorial, que constitui o
guia de estilos incluindo cores, fontes, ícones, imagens, vídeos, todos
os recursos gráficos e as microinterações. Após essa estilização da
interface, sugere-se uma nova rodada de testes com os usuários e esse
processo de iteração deve acontecer mais duas vezes, até se refinar
todos os elementos da interface.
No contexto do laboratório, a cada fase são realizadas rodadas de
testes com os alunos, a partir de tarefas colocadas a eles. Deve-se levar
em consideração que nem sempre o padrão mental de um usuário para
determinada tarefa é o correto, por isso é preciso validar diversas vezes.
Em relação à quarta etapa do método 5I`s, a Inspeção, é preciso
considerá-la como cíclica, remetendo e interagindo com a etapa de
instauração e também com a de implementação. A Inspeção traz um
olhar analítico sobre a interface projetada, a partir dos olhos do usuário,
do designer, do cliente e do desenvolvedor. Faz sentido testar e avaliar
junto a cada um desses públicos verificando aspectos estéticos-formais,
técnicos, de usabilidade, experiência de usuário e acessibilidade.
Envolve teste A/B para validar as dúvidas do designer com o usuário;
mas também testes de usabilidade, que podem ser gravados pela
maioria das ferramentas de prototipagem interativa; além de análises
e avaliação. Autores como Moraes (2002) e Cybis (2010) trazem artigos
dinâmicos que ajudam a compreender as técnicas de avaliação e as
79
especificidades que se visa avaliar, como leiturabilidade, ergonomia, os
sistemas de navegação, entre outras questões que podem ser avaliadas
individualmente ou no todo da interação. Aqui as leis heurísticas voltam
a aparecer, sendo agora utilizadas para avaliar a própria interface
concebida. Preece, Rogers e Sharp (2005) trazem um framework para
orientar a avaliação de projetos interativos, apontando várias técnicas
e métodos para avaliar. Conforme as autoras “O design progride
em ciclos iterativos de design - avaliação - novo design(redesign)”.
(PREECE;ROGERS;SHARP, 2005, p. 339).
A próxima fase do método 5I`s, a Implementação, consiste no
desenvolvimento do produto final, o que exige novas inspeções e
substituições. Aqui diálogos com os desenvolvedores são essenciais,
assim como novos testes com usuários para verificar se de fato todas as
interações e propostas inseridas no protótipo interativo estão funcionando
adequadamente. É comum que nessa etapa hajam novas adaptações.
Ao mesmo tempo, para facilitar a vida dos desenvolvedores a maior
parte dessas ferramentas de prototipagem interativa já disponibilizam
uma área para os desenvolvedores, tornando o trabalho um pouco
mais fácil de ser instaurado. Por exemplo, disponibilizando a posição
dos elementos no HTML e também o CSS dos componentes. Porém,
diferentemente de uma peça gráfica impressa, um projeto de interface
nunca está pronto, pois exige atualização constante. As tendências na
área mudam rapidamente e sugere-se estar sempre atualizado tanto
em relação aos padrões sensoriais, quanto aos de interação. Aqui nessa
fase também estão incluídas técnicas para avaliar o usuário enquanto
interage com a interface. O Google Analytics, por exemplo, vai fornecer
informações bem específicas sobre o usuário como: local de acesso,
sexo, idade, além de dados de tráfego, demonstrando o comportamento
do usuário página à página.
Ferramentas de Eye-Tracking, ou seja, de rastreamento ocular,
que disponibilizam mapas com as zonas mais quentes da interface
também podem ser usadas quando o projeto for implementado, seja
para validar o que se planejou, seja para facilitar a vida do usuário ou
para continuar monitorando sua relação com a interface em termos de
usabilidade e acessibilidade. Entre essas ferramentas estão o Eyequant
e o TobiiPRo, este é um produto brasileiro, sendo bastante difundido na
área do neuromarketing.
80
Após essa breve introdução metodológica, de conceitos e de
indicação de referências sobre as áreas, demonstramos a aplicação do
método 5I`s no texto a seguir, representando cada subitem uma fase.
2. A IDEAÇÃO NO APP BALOO
Quem viveu nos anos 1990 também deve ter sonhado em ter um
organizador de guarda-roupas como o da Cher, personagem principal
do filme As Patricinhas de Beverly Hills (1995). O design de interfaces
costuma contribuir para a realização de alguns sonhos. Atualmente,
existem diversos aplicativos que permitem organizar seu guarda-roupas,
mas se nos anos 1990, era glamuroso ter inúmeras peças de roupas e
adquirir novas era uma meta, atualmente percebe-se que a indústria da
moda é uma das maiores causadoras de impactos ambientais e também
do uso de trabalho escravo nas fábricas.
Em novembro de 2017, a Ellen Macarthurs Foundation publicou um
relatório intitulado A New Textiles Economy: Redesigning fashion’s future.
Esse documento traz o impacto causado pela indústria têxtil no planeta,
demonstrando que a produção de roupas quase dobou nos últimos
15 anos, em uma onda fast fashion, impulsionada pelo crescimento
da classe média no mundo. A previsão do relatório é que entre 2015 e
2050 sejam adicionados 22 milhões de toneladas de microfibras no mar,
oriundas do descarte das roupas. A produção de CO2 no mesmo período
tende a crescer 24% e o consumo de recursos não renováveis, como o
petróleo usado para a produção de fibras sintéticas, alcançará a facha
de trezentos milhões de toneladas. Menos de 1% do material utilizado
para produzir novas roupas é reaproveitado e o número cai para menos
de 0,1% em se tratando de reciclagem de roupas. Mas há também
nesse documento um direcionamento para princípios de uma economia
circular, que cause menos impactos. Nesse aspecto, serão valorizados
produtos mais duráveis e estratégias que valorizem o reaproveitamento
das roupas, gerando a colaboração.
Temos observado tendências que pregam o minimalismo,
mostrando que organização, consumir menos e desapegar são
essenciais para uma vida mais equilibrada com o planeta. Minimalismo:
um documentário sobre coisas importantes é uma das referências sobre
o assunto, assim como a proposta do project 333, que propõe por meio
da organização reduzir drasticamente as peças do guarda-roupas a 33
itens por pelo menos 3 meses. O blog incentiva as pessoas a participarem
81
enviando relatos. Essas, entre outras propostas no campo da economia
compartilhada, a exemplo da Roupateca de São Paulo, que mantém um
guarda-roupas compartilhado, levaram a ideação do aplicativo Baloo,
O Baloo surgiu com a conexão dessas três ideias: moda,
organização e resiliência. O problema que se busca resolver é o
seguinte: Falta de organização do guarda-roupas, excesso de roupas
que não são usadas, gerando consumismo desnecessário. O briefing
foi montado do seguinte modo: O QUÊ: Uma interface que possibilite
o controle do consumo de roupas e melhor aproveitamento das que
já tem. COMO: Por meio de um aplicativo auto-organizador de roupas
que permita catalogar, montar looks conforme o dia, o humor, o tempo
e compartilhar peças que não servem em uma comunidade de trocas
e doações. PORQUÊ? Para evitar gastos desnecessários e frear o
consumismo. PARA QUEM?Jovens consumistas, ligad@s ao mundo da
moda, que buscam um novo estilo de vida, o qual pode gerar menos
impactos no planeta. POR QUEM? Pelas pessoas, pelos animais e pelo
planeta. EM QUE LUGAR? Em casa e na rua, nas horas vagas.
O Brainstorming realizado inclui algumas palavras jogadas no
papel como resiliência, planeta, #govegan, lowsumerism, somente o
necessário. Essa tempestade cerebral gerou o nome do App, com base
no filme Mogli, o menino Lobo (2016), que traz uma cena em que Baloo,
o urso, e o menino Mogli cantam a música “Somente o necessário, o
extraordinário é demais. Eu digo necessário, somente o necessário. Por
isso é que essa vida eu vivo em paz (…)”.
Na fase de Ideação buscou-se a primeira rodada de referências,
inspecionando que outras interfaces têm a mesma proposta. No início,
o foco era o organizador de guarda-roupas, para entender a lógica
desses aplicativos, posteriormente procuramos mais especificamente
referências no campo da moda consciente. Foram encontrados alguns
Apps organizadores de guarda-roupas, eles não são superpopulares, mas
pode-se notar um crescimento no número de downloads desde que o
app foi pensado, em 2016. Para iOS destaca-se o Style Book App, o Style
Me e o GlamOut Fit closet organizer & outfit planner. Para Android: Your
Closet App, My Dressing Fashion Closet e o Dress App, recentemente
atualizado para Android e iOS. Ainda foram encontrados alguns sites e
apps cuja proposta é voltada à sustentabilidade: Roupa Livre, um app
para troca de roupas, com sistema semelhante ao Tinder, e Enjoei, um
app e website para venda de roupas usadas, além de projetos como o
82
Fashion Revolution, o website da estilista Stella McCartney e de marcas
como a vegana Insecta Shoes. Observar essas interfaces permite que na
fase seguinte possam ser escolhidas uma ou duas para serem analisadas
mais profundamente, com uma análise sobre elas.
A elaboração de um Atlas Mnemosyne (Figura 4) é a próxima etapa,
pensando na sobrevivência de formas e imagens em relação à proposta
que se imagina criar. Esse ponto já é um guia para a estética da interface.
No caso das referências para Baloo buscou-se formas arredondadas,
com base na fofura do urso Baloo, além de bolinhas de sabão, que
apresentam gradientes, e balões com tons pastéis.
Figura 4 Atlas Mnemosyne do projeto Baloo
Fonte: autora
Os mapas mentais são uma versão mais bem elaborada que

o Brainstorming, já indicando requisitos que o usuário poderia ter. Em
Baloo partiu-se da palavra Moda + Resiliência para fazer um mapa com
palavras, requisitos, desenhos e referências afins.
O foco no usuário começa por prestar a atenção nos comentários
deixados em aplicativos afins e por analisar quantos usuários baixaram
tais aplicativos. Por exemplo, o App Your Closet - Smart Fashion tem
mais 500 mil downloads na Google Play. Nas suas avaliações percebeu-
se como seria importante manter um calendário com looks do dia, pois
essa era uma funcionalidade bastante elogiada no aplicativo. Já o Roupa
83
livre tem pouco mais de 15 mil usuários e das pessoas que o avaliaram
na Google Play, apenas 256, a nota foi 2.6, relativamente baixa. Um dos
poucos comentários critica o modo de login, apenas por Facebook. Na
Apple Store a nota foi 1,7 e uma das principais críticas é em relação a
favoritar peças e para onde essas peças vão após essa ação, algo não
intuitivo ao usuário.
A próxima meta é criar uma persona, para facilitar o entendimento
de quem seria esse público-alvo. (Figura 5). Foi aplicado junto ao público-
alvo um questionário on-line com o intuito de testar a viabilidade e
possível uso da interface. Os resultados geraram novos dados que foram
utilizados na criação de outras três personas, uma inicialmente não
imaginada como usuário no princípio da ideia. Esta última representa um
público de mulheres classe C e D, que costumam consumir produtos de
moda e beleza de baixo preço.
Figura 5 Exemplo de persona construída para o projeto Baloo, com imagens, informações sobre
comportamento, tecnologias e tarefas.
Fonte: autora
Percebeu-se que a ideia de poder trocar e receber doações de

peças, além da organização do guarda-roupas pode ser um atrativo
para elas e um ponto de entrada para a interface, para uma posterior
conscientização sobre os impactos do consumismo no meio ambiente.
84
Ainda em pesquisa com usuários potenciais constatou-se que as pessoas
não teriam paciência para fotografar os itens de seu guarda-roupas,
isso levou a pensar na possibilidade de self com a roupa para facilitar a
manutenção da ideia. Assim as duas opções ficarão disponíveis.
O questionário on-line contava com 16 perguntas, divididas em
4 blocos. No primeiro bloco, informações rápidas de responder, em
questões fechadas com informações pessoais do usuário. O segundo,
direciona-se à interface em questões que tem respostas em escala,
por exemplo: Quanto você gosta de moda; Quanto você se considera
consumista? Você acredita que se o seu guarda-roupas fosse melhor
organizado, consumiria menos? No terceiro, busca-se compreender
que funcionalidades a interface pode ter, também em questões com
respostas em escala, como: Quanto gostaria de compartilhar o que não
lhe serve mais? Já o último bloco diz respeito às tecnologias que esse
público utiliza, bem como ao uso de aplicativos. Também, vale deixar
uma questão aberta para que o público insira informações relevantes,
como outras referências, especificações e requisitos.
Em Baloo, os pontos de contato, foram pensados a partir de imagens
que simulariam os lugares em que o app será utilizado, por exemplo na
cama, antes de acordar, planejando o dia, em frente ao guarda-roupas.
Em frente ao espelho, para uma self com a roupa. Em um café, enquanto
espera por alguém, entre outras situações.
Em relação ao mercado, como a proposta do App é divulgar a moda
consciente e sustentável, visualizamos sua distribuição gratuita, mas a
sustentabilidade econômica da proposta pode acontecer no momento
em que aceitar Ads, por exemplo. O Google admobs é uma importante
ferramenta para isso.
3. INAMBULAÇÃO
Na fase de inambulação destacaram-se os seguintes requisitos de

usuário, a partir de tarefas atreladas às personas: - Ser de fácil acesso,
sobretudo para fotografar as peças do guarda-roupas; - Organizar peças
por cor e humor; - Se divertir montando Looks nas horas vagas; - Ser
uma rede social de trocas/doações - Ser fácil de compartilhar nas redes
sociais.
Já as especificações técnicas, ou requisitos de funcionalidade são
os seguintes: acesso à câmera, acesso ao GPS, acesso às notificações,
85
acesso ao calendário, filtro para organização de peças, possibilidade de
formar galerias de looks, possibilidade de compartilhar e trocar peças
no App, na lojinha do Enjoei e em outras redes sociais como Facebook
e Instagram, e espaço para notícias sobre moda sustentável. A análise
gráfica foi realizada no App do Roupa Livre (Figura 6).
Figura 6 Análise gráfica App Roupa Livre
Fonte: autora
Além de uma análise heurística no Roupa Livre, foi realizada uma

sobre o Dress App (Figura 7), essa compartilhada aqui. Apresentou
falhas nos seguintes aspectos: não fala uma linguagem adequada com
o usuário, não previne erros, nem oferece boas mensagens de erros.
Peca também no quesito Liberdade e Controle ao usuário, pois em
determinadas páginas houve uma sensação de se estar perdido. Ainda
não proporciona uma versão para acessibilidade. Como o App permite
compras de peças de roupas, acreditamos que tem um impacto ruim em
termos de sustentabilidade.
A tecnologia de prototipagem escolhida inicialmente foi o UXPIN,
na primeira fase do projeto, em 2017, mas a segunda fase, já em 2018,
foi projetada em XD da Adobe, apenas por uma questão de estudo de
86
software, pois ambos serviriam para a proposta. Em relação às tecnologias
de implementação opta-se por desenvolver para o sistema operacional
Android, versão 4.4.
Figura 7 Análise heurística no Dress App
Fonte: autora
4. A INSTAURAÇÃO DO APP BALOO
Esta fase inicia com o sitemap, onde tela por tela, lista-se os
rótulos necessários. Exemplo: TELA 01 - Cadastrar/Entrar; MENU -
Guarda-roupas, Looks, Combinar, Calendário, Compartilhar Peças, Sobre
e Configurações. Logo, os primeiros rabiscoframes, orientam como o
conteúdo fica exposto.
Após, o cardsorting foi realizado com três usuários em potencial do
aplicativo e percebeu-se, que havia sido esquecido o rótulo das notícias
e que o espaço troca estava muito escondido, sem acesso direto no
menu, precisando o usuário rolar o scroll da tela para acessar. Para esse
projeto não foi realizado o protótipo de papel, etapa que acredita-se ser
bastante importante no processo de projetação. Partiu-se direto para o
UXPIN com uma versão simplificada e interativa do projeto (Figura 8),
para que o usuário já pudesse testar os fluxo e interações. Essa versão
é uma espécie de Wireframe interativa, com pouco aprofundamento do
design sensorial.
87
Figura 8 Telas principais do primeiro protótipo interativo do projeto Baloo no UXPIN
Fonte: autora
5. INSPEÇÃO
A fase de inspeção veio com testes com usuários, na própria

plataforma UXPIN, onde eles comentavam no aplicativo o que conseguiam
ou não fazer das tarefas dadas a eles. Os primeiros testes aconteceram
durante uma aula, com um dos alunos do laboratório fazendo as tarefas
e os demais observando e anotando outros modos de interação que
lhes ocorriam para cada tarefa. Bem como comentários sobre o design
sensorial e as funcionalidades.
Não houve a necessidade da realização de teste A/B. Mas a partir
dos testes obteve-se a seguinte avaliação: Interface simples demais para
o público-alvo; é necessário o desenvolvimento de ícones específicos. O
rótulo Moda Eco não remete às notícias, por isso deve ser repensado.
Ainda é preciso criar um perfil, pois a comunidade de trocas mostrou-se
nos testes, como o ponto alto e o diferencial do aplicativo em relação às
outras interfaces similares para organização de guarda-roupas.
Essa fase de inspeção gerou uma iteração no protótipo interativo. Assim
voltou-se à fase de implementação para atender as demandas do usuário.
Com o encerramento das aulas e a mudança de semestre optou-se por
trocar a ferramenta de prototipagem, agora com o XD da Adobe.
88
6. ITERAÇÃO - RETORNO À INSTAURAÇÃO - INSPEÇÃO - RETORNO À
INSTAURAÇÃO
O novo protótipo interativo (Figura 9) agora tem foco no design

sensorial e nos fluxos.
Figura 9 segundo protótipo interativo do projeto Baloo, no XD da Adobe
Fonte: autora
Indica-se que o desenhista possa criar o seu guia de estilos para a

interface. Em relação a esse guia (Figura 10), o aplicativo Baloo, baseou-
se em uma paleta de cores que se aproxima do movimento Rococó,
pelos tons pastéis empregados.
Figura 10 Guia de estilos do Aplicativo Baloo
Fonte: autora
89
Ao mesmo tempo, buscou-se trabalhar em sintonia com as
tendências de web design expostas no Google Material, com degradês,
leves sombreados e arredondamento.
A fonte escolhida foi a Rubik, desenvolvida por Meir Sadan, por ser
uma web fonte, que conta com 10 estilos diferentes, o que facilita na hora
de escolher padrões para títulos, menu e texto corrido. Os ícones foram
criados para o projeto, priorizando formas arredondadas, em diálogo
com as pesquisas do Atlas Mnemosyne.
Já as fotos, são provisoriamente extraídas de bancos de imagens
gratuitos como o Pixabay e Pexels. Foram realizadas outras duas rodadas
de testes com usuários e novas avaliações levaram a alterações no
design. A (Figura 11) mostra as principais telas, com a versão 4.0.
Figura 11 Versão 4.0 do protótipo interativo de Baloo
Fonte: autora
As análises heurísticas (Figura 12) apontaram que era preciso

construir uma versão acessibilidade, devido ao uso de gradientes e ao
uso de ícones sem rótulos, a fim de deixar a interface mais minimalista.
Observou-se que haviam muitas telas até o usuário poder favoritar
ou salvar uma peça de roupas, dentro do espaço troca. Por isso era
preciso repensar a liberdade e controle do usuário e os diálogos
naturais e simples.
90
Figura 12 Análise Heurística do projeto Baloo
Fonte: Autora
Para abranger um número maior de usuários e ser de fato acessível,

buscamos no website colorsafe complementos em azul e marrom,
que dialogassem, com bom contraste com a cor base do aplicativo o
#C58882. Foram encontrados o HEX: #2B0000 para marrons, com Current
Ratio 6.55 e Goal Ratio AA - 3 e o HEX: #004055 para azuis, com menor
aproveitamento: Current Ratio 3.87 e Goal Ratio AA - 3. A acessibilidade é
por enquanto visual.
Em relação aos ícones, foram criados com base nos padrões de
interação de redes sociais como Instagram e Enjoei, assim tornam mais
familiar ao usuário a trajetória pela interface. Em relação aos ícones e à
acessibilidade, acreditamos que ao discriminar textualmente o que cada
ícone significa, na aba “Ajuda”pode ser uma estratégia positiva.
O impacto ambiental é muito positivo então esse item ganhou
apenas um ponto, porque o organizador de roupas pode mostrar que
o usuário precisa de roupas novas e se ele não estiver disposto a
trocar ou a aceitar doações ele vai acabar consumindo. Isso levaria a
um impacto negativo.
Ainda, após mais um teste com usuário, percebemos que as peças
disponíveis para doação e para troca deveriam ficar melhor explicitadas,
pois poderia chamar mais a atenção do usuário. Para isso foram
desenhados ícones. Ainda seguindo a linha das críticas ao app Roupa
Livre, por não explicitar intuitivamente para onde vão as peças curtidas
91
ou favoritadas, optou-se por desenvolver ícones também para salvar
peças favoritadas, doações e trocas realizadas, além de notícias, pois
é algo relevante para acompanhar ou compartilhar mais tarde. Assim,
em formato de aba são separadas as roupas favoritadas, as doações ou
trocas efetuadas e as notícias salvas. O Espaço Troca e o Perfil do usuário
(Figura 13) ganharam uma dinâmica mais intuitiva após essas análises
realizadas tanto pelas heurísticas, quanto pelo teste com usuário.
Figura 13 Tela do espaço troca e perfil do usuário com os novos ícones
Fonte: Autora
7. IMPLEMENTAÇÃO
Essa fase está sendo realizada junto ao Departamento de

Linguagens e Sistemas de Computação, com a coordenação do Prof.
Dr. Joao Carlos D. Lima. Aqui novas rodadas de testes permitirão avaliar
aprimoramentos. Lembrando sempre de inserir o usuário no processo
de validação.
No início desta fase, após reunião com o professor responsável
pela implementação foi sugerido por ele que fosse pensado, a partir
92
desse aplicativo, em um sistema que pudesse trazer as mesmas
funcionalidades para outras aplicações, servindo a programação de
base para outros projetos de interfaces. Isso porque, no contexto da
computação, o design de interfaces é a camada superior em termos de
desenvolvimento tecnológico.
Assim o trabalho do laboratório coordenado pelo professor pode
ser reaproveitado para esses outros projetos. Nesse intuito, no segundo
semestre de 2019, no laboratório de interfaces do DI/UFSM, foi proposto
aos alunos que se dividissem em duas equipes para trabalharem em dois
projetos que utilizem o mesmo modelo aplicado a contexto diferentes.
Simultaneamente os alunos da computação irão trabalhar nos módulos
exigidos em cada parte do App. Assim, simultaneamente à implementação
do Baloo, as equipes estarão projetando o design de interfaces.
Em relação ao Baloo, após a segunda reunião com a equipe de
implementação, outras ideias foram geradas, como o desenvolvimento
de um selo sustentável para as roupas cadastradas, um melhor
aproveitamento da tela principal do aplicativo, trazendo estatísticas e
gráficos, indicando looks conforme a temperatura do dia para o usuário,
bem como a simplificação da aba superior, levando a busca e o filtro para
as telas específicas.
Essa proposta pode gerar um modelo de negócios que certamente
impactará no contexto da economia compartilhada (RIFKIN, 2014;
CHASE, 2015). Conforme Chase (2015, p. 35): “A capacidade excedente é o
combustível de baixo custo que faz valer a pena o empenho de criar uma
plataforma. As plataformas organizam e simplificam a participação”.
Aproveitar a capacidade excedente dos dispositivos e dos recursos que
já existem traz a possibilidade de construir conjuntamente e compartilhar
de pessoa a pessoa, produtos, serviços, sonhos, contribuindo para a
formação de uma consciência biosférica. Essa construção gera impactos
positivos ao meio ambiente e às pessoas que se engajam em um processo
de mudança individual e coletiva.
8. RESULTADOS E CONSIDERAÇÕES PARCIAIS
A metodologia 5I`s tem sido eficaz para a projetação de interfaces

dos mais variados tipos, desde Web à Apps, até games, interfaces
gamificadas e outros projetos interativos, unindo-se a metodologias mais
específicas, como o GDD (Game Design Document). É importante reforçar
93
que tem sido adequada em um contexto acadêmico, de laboratório, na
qual foi proposta. É essencial que sua aplicação venha amparada por
referenciais teóricos, de inambulações constantes e de vivência prática,
seja por meio da análise de outras interfaces, seja pelo constante hábito
de projetação. Encerramos essa explanação sobre o método didático 5I`s
com a esperança de termos atingido a cada semestre, o que Bonsiepe
(1984, p.10) em sua introdução a como ensinar a projetar produtos coloca
como “o método que se baseia na hipótese de que a ‘melhor forma de
aprender a projetar é projetar mesmo’. Utiliza-se nesse caso um método
de diálogo”. Adotar uma posição horizontal a do aluno projetista permite
que ele tenha maior liberdade criativa e diálogo, inclusive para sugerir
técnicas ou suprimi-las com base na argumentação prévia. Afinal,
conforme Bonsiepe (1984, p. 34) “Metodologia não tem finalidade em si
mesmo! É só uma ajuda no processo projetual”.
Em relação ao aplicativo Baloo, é interessante perceber como uma
simples ideia, concebida para demonstrar a aplicação de um método de
ensino pode impactar positivamente no mundo, ainda no contexto de
laboratório ao trazer reflexão aos alunos sobre o impacto do design no
meio ambiente e o papel social do projetista. Em relação à sociedade seu
impacto configura-se como uma alternativa ao consumismo no campo
da moda, educando o usuário para a sustentabilidade. As ideias de
aplicativos cuja sistemática seja semelhante ao Baloo ainda estão sendo
discutidas, mas certamente terão um impacto muito positivo na natureza,
cultura e sociedade contemporâneas, pois esse é um dos requisitos aos
alunos projetistas.
REFERÊNCIAS
AGNER, L. Ergodesign e Arquitetura da Informação: trabalhando com o usuário.

Rio de Janeiro: Quartet, 2a ed. 2009
BENJAMIN, W. Obras escolhidas III: Charles Baudelaire um lírico no auge do

capitalismo. 3a . ed. São Paulo: Brasiliense, 1994.
BE MORE WITH LESS. <Disponível em: https://bemorewithless.com/project-333/>

Acesso em 06/10/2018
BONSIEPE, G. Metodologia experimental: desenho industrial. Brasília: Cnpq/

Coordenação Editorial, 1984.
94
BONSIEPE, G. Design, Cultura e Sociedade. São Paulo: Bluncher, 2011
CanalTech, 2019. <Disponível em: https://canaltech.com.br/comportamento/

brasil-e-o-quinto-pais-que-mais-usa-smartphones-destaque-sao-videos-e-
mensagens-131177/> Acesso em 23/06/2019
CHANDLER, H. M. Manual de produção de jogos digitais. 2ª ed. Porto Alegre:

Bookman, 2012.
CHASE, R. Economia Compartilhada: como as pessoas e as plataformas estão

inventando a economia colaborativa e reinventando o capitalismo. São Paulo:
HSM do Brasil, 2015.
COLOR SAFE <Disponível em: http://colorsafe.co/> Acesso em 08/07/2019
DICIONÁRIO MICHAELIS. <Disponível em: http://michaelis.uol.com.br/

busca?id=Wo15Y> Acesso em 08/07/2019
ELLEN MACARTHUR FOUNDATION. A New Textiles Economy: Redesigning

fashion’s future. Publicado em novembro de 2017. <Disponível em: https://www.
ellenmacarthurfoundation.org/assets/downloads/A-New-Textiles-Economy_
Full-Report_Updated_1-12-17.pdf> Acesso em 07/07/2019
eMAG (Modelo de Acessibilidade em Governo Eletrônico). Publicado em abril

de 2014 <Disponível em http://emag.governoeletronico.gov.br/> Acesso em
03/08/2019
GASPARETTO, D. Arte Digital no Brasil e as (re) configurações no sistema da arte.

Tese de doutorado. Universidade Federal do Rio Grande do Sul, Instituto de Artes,
Programa de Pós-Graduação em Artes Visuais, Porto Alegre, 2016.
GASPARETTO, D. A.; PEDROZO, D. D. ; OLIVEIRA, F. . Design Conectado: por um

mundo de experiências. Estudos em Design (Online), v. 24, p. 146-165, 2016.
GARRETT, J. J. The Elements of User Experience, New York, NY – USA: AIGA –

American Institute of Graphic Arts, 2003.
GARRET, J.J. The Elements of User Experience: User-Centered Design for the Web
and Beyond, Second Edition. Berkley, CA: New Riders, 2011.
GOMES, L. V. N. ; BROD, J. M. ; MEDEIROS, L. M. S. . LOGOGRAMAS: DESENHOS PARA

PROJETO. Estudos em Design (Online), v. 18.2, p. 2453-2464, 2010a.
GOMES, L. V. N.; BROD, J. M.; MEDEIROS, L. M. S. . Saberes clássicos e fazeres ecléticos

do Desenho Industrial.. In: Debora Aita Gasparetto. (Org.). Design+ Arte | Ciência|
95
Tecnologia: conexões teórico-práticas.. 1ed.Santa Maria: Editora do PPGART, 2017
GOMES, L. V. N.; BROD, J. M.; MEDEIROS, L. M. S. . Educação do Design: Ensino

do Projeto de produto à Moda Clássica.. In: 9 Congresso Brasileiro de Pesquisa e
Desenvolvimento em Design, 2010, 2010, São Paulo. 9 P&D Design 2010. São Paulo:
UniversidadeAnhembi Morumbi / Blucher, 2010 a.
GOMES, L. V. N. ; BROD, J. M. ; MEDEIROS, L. M. S. . Sobre Metódicas, Metodologia

e Métodos para Projeto e Desenho de Produto Industrial. In: 9 Congresso Brasileiro
de Pesquisa e Desenvolvimento em Design 2010, 2010, São Paulo. 9 P&D Design
2010. São Paulo: UniVersidade Anhembi Morumbi / Blucher, 2010b.
GOMES, L. V. N. ; BROD J. M. Logogramas - Desenho para projeto. 1. ed. Porto Alegre:

Editora sCHDs, 2007.
GUSTAFSON, A. Adaptative Web Design. Tennessee: Easy Readers, 2011.
Infodesign. <Disponível em: https://www.infodesign.org.br/infodesign> Acesso em

03/08/2019
KALBACH, J. Design de Navegação Web: Otimizando a Experiência do Usuário.

Porto Alegre: Bookman, 2009.
Kantar Word Panel. <Disponível em: https://www.kantarworldpanel.com/global/

smartphone-os-market-share/> Acesso em 23/06/2019
KNAPP, J. How to Decide What Ideas To Prototype. Fast Company, 2013. <Disponível
em: https://www.fastcompany.com/1672929/how-to-decide-what-ideas-to-
prototype > Acesso em: 22 de jun de 2019
KNELLER, G. F. A arte e ciência da criatividade. São Paulo: Ibrasa, 1978.
KRUG, S. Não me faça pensar! Uma abordagem do bom senso à navegabilidade

da Web. Rio de Janeiro: Alta Books, 2008
KRUPAHTZ, J. ; GASPARETTO, D. A.. REDESENHO DA INTERFACE DIGITAL DA

REVISTA ARCO: O DESIGN CENTRADO NO USUÁRIO COM A UTILIZAÇÃO DO
MÉTODO 5 I’S. Human Factors in Design, v. 7, p. 02-18, 2018.

aplicativos amigáveis. São Paulo: Novatec Editora, 2013.
MAEDA, J. As leis da simplicidade: design, tecnologia, negócios, vida. Sao Paulo:

Editora novo conceito, 2007
96
MASSAGLI, S. R.. Homem da multidão e o flâneur no conto “O homem da multidão”
de Edgar Allan Poe. Terra roxa e outras terras. Revista de Estudos Literários, 12,
2008.
MARCOTTE, E. Responsive Web Design. New York: A Book Apart, 2011.
MCGONIGAL, J. Reality Is Broken - Why Games Make Us Better and How They Can
Change the World. New York: The Pequim Press, 2011.
MEDINA B. [et al.]. Gamification, Inc.: como reinventar empresas a partir de jogos –
1. ed. – Rio de Janeiro: mjv Press, 2013
MEMORIA, F. Design para a internet: Projetando a experiência perfeita. Rio de

Janeiro: Elsevier, 2005.
MEURER, H.; SZABLUK, D. . Projeto E: aspectos metodológicos para o desenvolvimento

de projetos dígito-virtuais. Ação Ergonômica, v. 5, p. 1-10, 2010.
MEURER, H. Projeto em ação aprendizagem baseada em projetos. <Disponível

em:https://projetoemacao.com/. Acesso em 23/07/2019>
MINIMALISMO. <Disponível em: https://vimeo.com/216982177 >Acesso em

06/10/2018
MONTENEGRO, M. Como validar uma ideia de Startup: O guia definitivo. Vida de

Startup, 2016. <Disponível em: http://vidadestartup.org/como-validar-uma-ideia/
> Acesso em: 22 de jun de 2019.
MORVILLE, P; ROSENFELD, L. Information architecture for the world wide web. 3.

ed. Sebastopol, CA: O’Reilly, 2006.
MOURA, M. Design de Hipermídia: dos princípios aos elementos. São Paulo: Co-
edição NMD e Edições Rosari, 2007.
NEIL, T. Padrões de Design para aplicativos móveis. São Paulo: Novatec, 2012
NIELSEN, J.; MOLICH, R. Heuristic Evaluation of User Interfaces. Proc. ACM CHI’90
Conf. (Seattle, WA, 1-5 April), 249-256, 1990.
NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007.
NIELSEN, J.; BUDIU, R. Mobile Usability. Berkeley: New Riders Press, 2013.
NORMAN, D. Emotional Design: Why we love (or hate) everyday things. NY: Basic
Books, 2004.
97
NORMAN, D. O design do dia-a-dia. Rio de Janeiro: Rocco, 2006
PETERSON, W. A arte do pensamento Criativo. São Paulo: Editora Best Seller, 1991.
PETERSON, C. Learning Responsive Web Design. Califórnia: O’Reilly Media, 2014.
PREECE, J.; ROGERS, Y; SHARP, H. Design de Interação: além da interação homem-

computador. Porto Alegre: Bookman, 2005.
PORTER, J. Principles of User Interface Design. Texto publicado em março de 2007.

<Disponível em http://bokardo.com/principles-of-user-interface-design/> Acesso
em 03/08/2019.
PORTER, J. Designing for the Social Web. Berkeley:New Riders, 2008
PORTER, J; BREWER, J.; 52 weeks of UX. Website publicado em 2010. <Disponível

em: https://52weeksofux.com> Acesso em 03/08/2019.
RADFAHRER, L. Design web design: 2. São Paulo: Market Press, 2000
RIFKIN, J. The zero marginal cost society: the internet of things, the collaborative
commons, and the eclipse of capitalism. New York: Palgrave Macmillan, 2014
ROCHA, C. Pontes, janelas e peles: cultura, poéticas e perspectivas das interfaces

computacionais. 1. ed. Goiânia: FUNAPE: Media Lab / Ciar / UFG, 2014.
ROUPATECA <Disponível em http://aroupateca.com/> Acesso em 08/07/2019.
ROYO, J.Fundamentos do design: Design Digital. 1. ed. São Paulo: Rosari, 2008
SAFFER, D. Designing for Interaction, Second Edition: Creating Innovative

Applications and Devices. Berkeley, CA: New Riders , 2010
SAFFER, D. Microinteractions, 2013. <Disponível em: http://microinteractions.com/>

Acesso em: 22 de jun de 2019.
SBDI. Sociedade Brasileira de Design de Informação. <Disponível em: http://sbdi.

org.br/> Acesso em 04/08/2019
SCHELL, J. The Art of Game Design. Burlington: Elsevier, 2008.
SCHUYTEMA, P. Design de games: uma abordagem prática. São Paulo: Cengage

Learning, 2014.
SILVA, M. S. Web Design Responsivo. São Paulo: Novatec, 2014.
JOHNSON, S. Cultura da Interface Como o computador transforma nossa maneira
98
de criar e comunicar. Rio de Janeiro; Jorge Zahar Ed., 2001
TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do Código,

2014.
TIDWELL, J Designing Interfaces. 2ª ed. Sebastopol: O’Reilly Media, 2011
W3C. <Disponível em: http://www.w3c.br/Padroes/WebDesignAplicacoes> Acesso

em 03/08/2019
WROBLEWSKI, L.. Mobile First. New York: A Book Apart, 2011.
WARBURG, A. Histórias de fantasmas para gente grande. Escritos, Esboços e

Conferências. Tradução Lenin Bicudo Bárbara. São Paulo: Companhia das Letras,
2015.
WURMAN, R. S. Information Anxiety2. Indianapolis: Que, 2001
ZELDMAN, J. Taking Your Talent to the Web A Guide for the Transitioning Designer.
Indianápolis. New Riders Publishing, 2001
ZICHERMANN, G.; CUNNINGHAM Christopher. Gamification by Design Implementing

Game Mechanics in Web and Mobile Apps. Sebastopol: O’Reilly, 2011.
99
100
O Design de interação na
prototipação de Planit
Milena Dutra Kosciuk
RESUMO: O mercado de trabalho está passando por mudanças e abrindo

mais espaço para trabalhadores sem vínculos fixos com apenas uma
empresa, os freelancers. Costumam estar inseridos dentro da economia
criativa, atuando em áreas como Design, desenvolvimento de softwares e
jornalismo por exemplo e quem quer se inserir neste método de trabalho
costuma ter dúvidas quanto à organização, métodos de precificação,
entre outros. A partir desta necessidade, surgiu a ideia de um aplicativo
que facilitasse esses pontos, contribuindo na gestão de projetos e de
tempo e ajudando na precificação. O trabalho é estruturado por meio
de uma parte teórica e uma prática. São estudados conceitos sobre a
economia Freelance, Design de interação, microinterações e por fim estes
são aplicados na prototipação de uma interface utilizando a Metodologia
5I’s (Gasparetto, 2019 no prelo).
1. INTRODUÇÃO
Este artigo propõe explorar conceitos de Design de interação e
microinterações. A partir de uma pesquisa teórica e prática, explorando
bibliografias sobre o assunto assim como análises de referências já
existentes no mercado de interfaces. Na sequência, a experimentação
para aplicação dos conceitos estudados concentra-se em um projeto de
Design de aplicativo e sua versão web.
O projeto foi proposto durante as aulas do Laboratório Orientado
de Interface, no curso de Desenho Industrial da UFSM, que se expandiu
como tema do Trabalho de Conclusão de Curso. Inicialmente foram
explorados diferentes problemas que poderiam ser resolvidos por meio
de uma interface. Notou-se a dificuldade que freelancers possuem,
durante o início da carreira, de organizar seus projetos, tempo e valores.
A partir disso, foram realizadas pesquisas, experimentações com o
objetivo de gerar um protótipo interativo de alta fidelidade do aplicativo
idealizado e sua extensão para navegador Chrome.
101
Os objetivos específicos são 1. Compreender o mercado de trabalho
freelance e conceitos da gig economy 2. Estudar os conceitos de
Design de interação, User Experience e User Interface. 3. Analisar
aplicativos de organização; 4. Compreender o serviço oferecido, seu
público alvo e necessidades.
Para a projetação, é usada a Metodologia 5 I’s, montada por
Gasparetto (2019), que desde 2016, está sendo usada como método
didático para o ensino de design de interfaces. Reúne elementos de
Lowdermilk (2013) que tem foco na experiência do usuário, a estrutura de
planos de Garret (2011) e diversas práticas indicadas por Teixeira (2014).
O texto a seguir será dividido em uma parte teórica, onde foram
estudados conceitos relacionados ao público alvo escolhido para a
pesquisa, ou seja, freelancers. E uma parte prática, onde é apresentado o
processo de criação do protótipo do aplicativo.
2. ECONOMIA FREELANCE
De acordo com Business Dictionary1 (em tradução livre), freelance

é a modalidade de trabalho na qual o trabalhador presta seus serviços
a diferentes empresas, ao contrário de ser empregado por apenas uma
empresa.
Segundo estudos feitos no ano de 2017 (ERNESTO, 2017), o
trabalho freelance iria crescer em pelo menos 20% em 2018 no Brasil,
a pesquisa mostra que uma das principais motivações para o brasileiro
buscar este mercado é a possibilidade de aumentar a renda (59%),
seguida pela flexibilidade que o trabalho proporciona (já que, com a crise
muitos optam por uma dupla jornada de trabalho, 42%), dificuldade de
encontrar emprego (30%) e, assumir o controle da própria carreira (16%).
Dentre os desafios listados pelos entrevistados se destacam encontrar
clientes (59%), definir o preço do próprio trabalho (49%), administrar a vida
financeira (16%) e controlar os prazos para os projetos (16%) entre outros.
Parte considerável do aumento da procura por esses trabalhos se deu
pela instabilidade financeira econômica do país, que desencadeou um
cenário oportuno para o empreendedorismo.

1 “Working on a contract basis for a variety of companies, as opposed to working as an em-

ployee for a single company. Freelancers are often considered to be self-employed, and have the
freedom to pick and choose their projects and companies they would like to be associated with.”
102
Os profissionais que decidem por esta carreira têm a opção de se
formalizar no mercado como Microempreendedor Individual (MEI), com
inscrição CNPJ, com recolhimento de impostos com baixo custo, ainda
contendo benefícios como aposentadoria e auxílio-doença, por exemplo.
Esta modalidade de trabalho ganhou mais destaque a partir de
plataformas que reúnem pessoas para realização de serviços, usualmente
por meio de aplicativos, como Airbnb2, Uber,3 99freelas4 e GetNinjas5.
Existem diferentes tipos de profissionais nestas, mas, o público alvo
do aplicativo a ser criado são os freelancers que trabalham dentro do
contexto da economia criativa, ou seja, designers, desenvolvedores,
tradutores entre outros.
2.1 Notas sobre a gestão no trabalho freelancer
Segundo a pesquisa “Perfil do freelancer no Brasil, 2018” (APARELHO

ELÉTRICO, 2018), realizada anualmente pelo blog Aparelho Elétrico,
depois da renda variável, com 29% dos votos, a maior dificuldade relatada
pelos microempreendedores é lidar com sua própria falta de disciplina,
algo o que é representado em 24% dos votos.
Organização pessoal e produtividade são palavras que estão
sendo muito usadas, que se destacaram nos últimos anos, e são
facilmente relacionadas como atributos essenciais para freelancers.
A lógica é simples, um profissional freelancer depende de sua
produtividade para garantir sua renda mensal, e a organização pessoal
é responsável por garantir que a produtividade se mantenha durante
o mês entre outras coisas.
Segundo Pochmann (2019) dados de como é gasto o tempo
diariamente contribui para a visualização de tempo perdido e aproveitado,
ajudando na organização já que mostra o quanto está sendo gasto até
mesmo em tarefas menores ou em distrações. Conhecer esta média de
tempo que se demora em uma tarefa, aprender a definir prioridades,
ter um limite pré estabelecido para a conclusão da atividade e um
sistema claro e constante de organização se mostram importantes na
vida do freelancer, mantendo a disciplina e assim gerenciando com mais
efetividade os projetos.
2 https://www.airbnb.com.br/
3 https://www.uber.com/br/pt-br/
4 https://www.99freelas.com.br/
5 https://www.getninjas.com.br/
103
Esta organização costuma ser feita por meio da gestão de
diferentes projetos, que é auxiliada por aplicativos conhecidos no
mercado, como Todoist6, ClickUp7, Trello8 e Asana9, que têm entre 1 e 10
milhões de downloads no Google Play Store. Possuem planos individuais
e empresariais, chamam atenção de profissionais independentes por
poder se organizar a nível pessoal e se comunicar com as empresas ou
empregadores compartilhando suas tarefas.
Ainda segundo a pesquisa Perfil do freelancer no Brasil (APARELHO
ELÉTRICO, 2018), a terceira dificuldade listada foi a de administração
financeira (15%). A dúvida de quanto cobrar por seu trabalho e a
desvalorização do profissional criativo no Brasil traz inseguranças quanto
ao “preço justo”. Segundo Beltrão (2010), definir um preço para um serviço
é mais complicado que para um produto produzido em série, já que será
prestado uma vez, em um determinado espaço de tempo.
Apesar de existirem instituições como a Adegraf (Associação dos
designers gráficos do Distrito Federal), que divulga a cada dois anos uma
tabela com preços para materiais gráficos que serve como parâmetro
para a precificação de serviços de design, esta tem dificuldade de ser
adaptada à um mercado local.
3. DESIGN DE INTERAÇÃO
De acordo com Preece, Rogers e Sharp (2005, p. 28), “por design

de interação, entendemos o seguinte: design de produtos interativos
que fornecem suporte às atividades cotidianas das pessoas, seja no
lar ou no trabalho”. É focado em criar experiências que melhoram, a
partir de abordagens centradas no usuário, a maneira como as pessoas
“trabalham, se comunicam e interagem”, pode-se portanto, entender o
design de interação como uma linguagem de comunicação.
É a disciplina que estuda a relação entre o usuário e o sistema que
ele usa, se refere à estrutura e comportamento da interface, sua principal
preocupação é projetar produtos interativos que tenham aprendizagem
fácil, que possam ser eficientes em seu uso e são capazes de proporcionar
ao usuário uma experiência gratificante (ARNALDO, 2011).
6 https://todoist.com/?lang=ptBR
7 https://clickup.com/
8 https://trello.com/
9 https://asana.com/
104
Para Saffer (2010, p. 4), interação é “uma transação entre duas
entidades, tipicamente uma troca de informações, mas pode ser uma
troca de bens ou serviços”. É incluída no espectro de disciplinas da
Experiência do Usuário (UX), que pode ser vista abaixo, na Figura 1.
Figura 1. Gráfico com disciplinas de UX.
Fonte: Saffer, 2010.
Para Nielsen e Norman (2016) User Experience engloba todos os

aspectos do lado do usuário em uma interação com uma companhia, seus
serviços e produtos. É um esforço conjunto de equipes e conhecimentos
multidisciplinares que incluem Marketing, Design gráfico, Design de
interface, desenvolvimento entre outras.
Se difere assim da Interface do usuário (UI Design ou User Interface
Design) que se preocupa com como parte das informações necessárias
para uma boa experiência é apresentada, ainda segundo Nielsen e
Norman (2016), é uma área essencial dentro da User Experience, que
ainda deve ser diferenciada de usabilidade, sendo esta, por sua vez
um atributo da User Interface (UI) e que valida se um sistema é fácil de
aprender, eficiente e agradável em seu uso por exemplo.
Pode-se pensar em um produto de software como uma casa
(ALEXSOFT, 2018), onde o UX design seria tudo que torna a casa
aconchegante e um lugar bom de se viver, assim o design de interação
seriam todas as pequenas ações que deixam a casa conveniente, como
105
o interruptor de luz próximo à entrada dos cômodos, uma mesa de jantar
grande o suficiente para acomodar a família.
Costuma-se lembrar apenas das experiências gerais de se viver
na casa, mas são pequenos detalhes como poltronas confortáveis e a
proximidade do quarto do casal do quarto dos filhos que constroem a
experiência. Esta experiência seria enriquecida supondo que o UI design
fosse a cuidadosa decoração da casa, compondo cômodos com cores
agradáveis, cadeiras ergonomicamente confortáveis, adaptadas às
necessidades do usuário.
3.1 Microinterações
Dan Saffer (2013) define microinterações como um momento

contido em um produto que envolve apenas um caso de uso, um
pequeno pedaço de funcionalidade que faz uma única coisa. Elas podem
estar contidas em um produto maior ou ocupar um produto inteiro, são
também os pequenos momentos que ocorrem ao utilizar um produto,
podendo ser esquecíveis e sem graça, ou prazerosos e cativantes. São
os detalhes funcionais e interativos de um produto. Apesar de levarem
em sua nomenclatura o prefixo “micro”, tem um peso considerável na
diferença entre produtos amados e tolerados.
Esse tipo de interação muitas vezes passa despercebida
mesmo estando muito presente em tarefas diárias, como no ato de
mudar uma configuração, sincronizar dados, ativar o despertador,
curtir postagens no Facebook. Olhar a previsão do tempo ou usar
a calculadora no celular por exemplo, são microinterações que
preenchem um aplicativo por completo.
São recomendadas para ações como completar uma tarefa,
conectar dispositivos, controlar um processo, ajustes rápidos, ligar e
desligar algum recurso, interagir com pequenos “pedaços” de dados,
como conferir o valor de um produto.
Historicamente, microinterações são fortemente ligadas com
o design de interação e a própria interação humano-computador.
Começou a se estabelecer com estes, mas sua aplicação não é restrita
ao mundo virtual.
Microinterações, segundo Saffer (2013) são estruturadas em quatro
fases, sendo elas triggers, regras, feedback e loops. O trigger dá o início
da ação, enquanto as regras determinam como a microinteração deve
106
funcionar, e o feedback é o resultado destas regras aplicadas, e os loops
e modos são as meta regras que afetam esta ação.
Estas fases podem ser vistas pensando em um aplicativo de
streaming de música, como o Spotify por exemplo. O aplicativo possui
diversos recursos e interações possíveis, mas vamos escolher a
microinteração usada para aumentar o volume. É iniciada por um trigger,
ou seja, o botão geralmente localizado na lateral de um celular.
Existe um conjunto de regras que determinam que o volume só
tem duas direções (para cima e para baixo, ou aumentar e diminuir), e
quantas vezes se pode clicar no trigger antes do volume máximo ou
mínimo ser atingido.
Estas regras ativam um feedback, ele é sonoro (o volume da música
foi aumentado) e visual, como pode ser visto na tela da direita da Figura
2 e mostra como as regras funcionam, e é muitas vezes usado para
expressar a personalidade da marca. A ação, por fim pode ser repetida
quantas vezes o usuário desejar, gerando um loop.

Figura 2. Spotify (recurso para ouvir música) e microinteração de aumentar o volume.
Fonte: Adaptado de Spotify, 2019.
Os triggers e regras definidos por Saffer (2013) podem ser

relacionados com os conceitos de affordances e signifiers usados por
Norman (2013). Affordances podem ser definidas como a relação entre as
propriedades de um objeto e o agente que determina como este objeto
pode ser usado. Para serem efetivas precisam ser visíveis. É importante
107
ressaltar que affordances são uma relação, não uma característica de
um objeto.
Regras definem o que a microinteração é capaz de fazer, o que
acontece quando o trigger é acionado, e portanto definem também como
um objeto (microinteração contida em uma interface), pode ser usado,
não são uma característica da interação, mas fazem a ligação entre o que
o usuário deve fazer com o seu objetivo, sendo, portanto, uma relação
entre estes.
Enquanto affordances determinam quais ações são possíveis,
signifiers comunicam onde a ação deve ocorrer. São as “pistas” de que
algo é importante, são a comunicação da ação que deve ser tomada.
Trigger é a representação visual (ou não) que ativa a microinteração, que,
portanto, comunicam onde a ação vai ocorrer, conforme as regras.
O design de interação quando trabalhado em conjunto com técnicas
de design centrado no usuário pode melhorar consideravelmente a
Experiência do Usuário ao utilizar o produto. Microinterações por sua
vez deixaram de ser pequenas atividades feitas no produto para se
tornarem um dos principais meios em que se pode expressar o tom e
personalidade de uma marca, se aproximando e engajando usuários.
Sendo assim capazes de mostrar sua importância por se diferenciarem
no mercado e gerar interações mais pessoais e com mais impacto.
4. METODOLOGIA 5I’S NA PROJETAÇÃO DO APLICATIVO PLANNIT
Para Gasparetto e Krupahtz (2017), a metodologia dos 5I’s visa

unir as questões focadas no usuário propostas por Lowdermilk, com as
etapas de Garret e que tem fácil assimilação por projetistas iniciantes.
É incentivado, portanto, manter o usuário como parte do processo,
realizando testes criando personas, evitando presunções sobre a atitude
que o usuário tomaria, o que ainda é complementado pelas orientações
práticas que são indicadas por Teixeira (2014),
A metodologia 5I`s se divide em 5 etapas: Ideação, Inambulação,
Instauração, Inspeção e Implementação, todas iniciadas com a letra “I” e
terminadas com o sufixo “a+ção”, com o objetivo de relembrar o projetista
das Iterações que necessitam ser feitas ao final de cada etapa, conforme
a necessidade do projeto (Figura 3).
108
Figura 3. Esquema metodologia dos 5I’s.
Fonte: Gasparetto, 2019, no prelo.
4.1 Ideação
A etapa da ideação se relaciona com o plano de estratégia de

Garret (2011), onde é feito o reconhecimento do problema com técnicas
de briefing, brainstorming, mapas mentais, pesquisas com usuários,
personas criadas a partir dos resultados das pesquisas, busca de
referências, que age como uma pequena pesquisa de mercado, com
o objetivo de identificar outras interfaces que tentam solucionar um
problema parecido com o em questão, e pontos de contato com a
interfaces ou seja, “Golden Moments”.
O objetivo da fase é que o projetista se aproxime do usuário e
defina pontos que serão a base da interface, conhecer as necessidades
do usuário e o objetivo do projeto. Para Gasparetto e Krupahtz (2017)
aqui é primordial o uso de conhecimentos como da psicologia cognitiva
e neurociência.
O briefing feito para o planejamento do aplicativo Planit pode
ser visto na Figura 4. Foi realizada uma pesquisa por meio do Google
Formulários, para validar a ideia com freelancers e responder dúvidas
quanto ao público-alvo. A pesquisa foi divulgada em grupos de freelancers
e estudantes do cursos de design, incluindo da UFSM, e obteve o total
de 58 respostas e ficou ativa durante aproximadamente 10 dias. A partir
109
dos resultados recolhidos foram criadas três personas para facilitar a
resposta de perguntas ao decorrer do projeto e para manter o usuário
em mente durante a projetação.
Figura 4. Briefing.
Fonte: Elaborado pela autora.
Também foram elaborados um painel com Pontos de contato

com a interface e um Atlas Mnemosyne. Este é utilizado pelo historiador
Aby Warburg (2015, apud GASPARETTO 2019), que reúne imagens
não diretamente interligadas com o projeto, mas que podem ajudar a
construir escolhas de design sensorial para ser utilizado posteriormente,
relacionado com um Moodboard, mas com o objetivo de encontrar
similaridades nas formas e elementos dentre as referências (Figura 5).
Figura 5. Atlas Mnemosyne.
110
3.2 Inambulação
Durante a fase de inambulação, após a compreensão das personas,

são definidos a partir delas requisitos de usuário e de funcionalidade,
e é feita uma análise gráfica com outros aplicativos com propostas
semelhantes para referência assim como análises heurísticas e é
finalizada com a escolha de tecnologias para continuidade do projeto.
Os requisitos estabelecidos a partir da pesquisa e criação de
personas foram uma lista de tarefas para organização de projetos,
um timer para controlar tempo que é usado no trabalho, bloqueio de
notificações para evitar distrações, cálculo da hora de trabalho e das
horas trabalhadas. Para cumprir estas seriam necessários requisitos
de funcionalidade como acesso ao relógio, acesso ao controle de
notificações, possibilidade de gráfico de desempenho e a possibilidade
de exportar os gráficos.
Quanto a tecnologias de prototipagem, na primeira parte do projeto,
realizada durante o Laboratório de Interface, foi usado o aplicativo UXPin,
por ser acessível pelo navegador, facilmente podendo ser usado durante
as aulas e em casa, mas por ser um aplicativo pago com várias limitações
na versão gratuíta, optou-se, ao retomar o projeto para o trabalho de
conclusão de curso usar o aplicativo web e desktop Figma, que é gratuito
e possui conta específica para estudantes.
Para o aplicativo, foi pensado para ser desenvolvido como um
Progressive Web App (PWA), que podem ser feitos com linguagens
como HTML, CSS e JavaScript. A extensão para navegador também é
feita usando HTML, CSS e JavaScript.
Para a análise gráfica e heurística foram selecionados três aplicativos
com propostas diferentes, com o objetivo de explorar as funcionalidades
que foram elencadas para o aplicativo a ser criado. Forest como uma
interface gamificada de controle de tempo, Asana, focado na gestão de
projetos, muito usado por startups e freelancers e por fim Boosted, que
possui uma lista de tarefas divididas em projetos e um temporizador que
acompanha o tempo que foi gasto em cada um (Figura 5).
111
Figura 5. Aplicativos escolhidos para análises gráfica e heurística.
Fonte: Adaptado de Forest, Asana e Boosted, 2019.
3.3 Instauração
A instauração é a fase em que para Gasparetto (no prelo) define

como a condensação e simplificação dos planos de estrutura, esqueleto
e superfície de Garret (2011), e, portanto inclui os processos de Arquitetura
de informação, Design de interação, Design de interface, Design de
navegação, Design de informação e Design sensorial. Para simplificar
estes processos, são usadas técnicas de Sitemap, Rabiscoframes
(TEIXEIRA, 2014), e diferentes protótipos como de papel, que é de baixa
fidelidade e interativos, que são de alta fidelidade.
Foi realizado um Sitemap, usado para definir as nomenclaturas de
páginas e iniciar um plano de fluxo do aplicativo. Rabiscoframes (Figura
6) também foram utilizados, Teixeira (2014) define como uma forma
rápida de expressar e explorar ideias sem o comprometimento de um
protótipo. São usados para explorar ideias diferentes sem a limitação
da tela do computador.
112
Figura 6. Rabiscoframes.
Com o objetivo de validar o fluxo do aplicativo, foi realizado um teste

com a técnica de prototipagem em papel, para explorar diferentes ideias,
ainda sem o comprometimento de um protótipo, mas validando algumas
interações simples. O protótipo foi feito com papel quadriculado e foram
desenhados um rabiscoframe por tela, o teste foi feito em aula, com
alunos que faziam parte do público alvo do projeto, trazendo portanto
o usuário como parte da projetação. Um pouco do processo do teste
pode ser visto na Figura 7. Após o teste, o fluxo foi adaptado conforme os
feedbacks dados durante o experimento.

113
Figura 7. Protótipo de papel.
O design sensorial do aplicativo também foi idealizado nesta fase

resultando em um pequeno guia de estilo, com os ícones criados para o
projeto, as cores principais que foram usadas, e a definição de tamanhos
e estilo de fontes. A família tipográfica utilizada na interface é a Lato,
uma fonte sem serifa, open source e desenhada por Łukasz Dziedzic, é
usual em interfaces que possuem diferentes plataformas como Slack, e
foi escolhida por ser de fácil legibilidade em diferentes telas e pela sua
grande variedade de pesos, os usados neste projeto foram nas variações
bold e regular.
Os ícones foram elaborados usando o Illustrator, conforme a
necessidade do aplicativo, com a aplicação de uma grade para manter
a consistência e tamanhos, formando uma pequena biblioteca que pode
ser aplicada nas diversas telas do aplicativo. As cores foram definidas
com base nas imagens usadas no Atlas Mnemosyne, em que prevalecem
o fundo escuro com cores vibrantes para destaque (Figura 8).

Figura 8. Guia de estilo.
O design sensorial da interface foi feito usando como base

inspirações em interfaces de modo noturno, que têm se popularizado
e sendo adotadas pelos aplicativos dos sistemas operacionais IOS e
114
Android. Também estava presente no aplicativo Boosted, analisado
anteriormente, que possui as duas versões.
Segundo o guia Google Material Design10(2019), as principais
vantagens de temas escuros são a economia de bateria em telas OLED
e AMOLED, e a melhora da acessibilidade, ajudando pessoas com
visão reduzida. Um dos pontos negativos é o reflexo causado quando a
interface é usada em ambientes com muita luz, mas durante o período
de pesquisa, foi constatado que a maior parte dos usuários trabalha
em ambientes internos, onde a quantidade de luz normalmente é mais
controlada e não interfere na tela.
O nome foi definido após pesquisas e discussões como “Planit”,
combinação das palavras “Plan” e “It”, o que pode ser traduzido livremente
como “planeje-se”, o que tornou o nome simples, de pronúncia fácil e faz
relação com o planejamento de projetos e tempo, funções principais do
aplicativo. Sonoramente pode lembrar a palavra planeta, tanto em inglês
quanto em português, e pode remeter a uma estética mais futurista, com
contraste entre tons escuro e luzes, o que conversa com a interface com
fundo escuro e com o Atlas Mnemosyne montado no início do projeto.
Foi realizado, utilizando a ferramenta UxPin um protótipo de alta
fidelidade, com os elementos gráficos que foram definidos no design
sensorial, conteúdo e simulação de interações e microinterações.
3.4 Inspeção
A fase de inspeção, na metodologia 5I’s, contém etapas que possuem

como objetivo de testar e validar o protótipo criado anteriormente, como
a realização de testes A/B, quando necessários, testes com usuários,
avaliação heurística e a reavaliação da interface, que ocorre como
consequência dos testes anteriores.
Além do teste com o usuário com o protótipo em papel, foram feitas
rodadas de testes com cinco usuários, número recomendado por Nielsen
(2000), tanto fora quanto dentro da sala de aula, na própria plataforma
do UXPin, que simula as interações e microinterações no aplicativo. Os
testes foram feitos com pessoas que são consideradas possíveis usuários,
que se encaixam no público alvo e mostraram interesse no aplicativo,
algumas tarefas gerais foram dadas, como “Adicione um projeto”, “Onde
você iria para calcular a sua hora de trabalho?” entre outras.
10 https://material.io/
115
3.5 Iterações
Para Preece, Rogers e Sharp (2005, p.190), o processo de iteração

é aquilo que “permite refinar o design com base em feedback”. Durante
a avaliação do aplicativo na fase de Inspeção, notou-se por meio dos
testes com usuários e outros feedbacks algumas falhas na usabilidade
que poderiam ser evitadas, por isso, o aplicativo passou pelo processo
de iteração, em que foram revisadas algumas etapas das fases de
instauração e inspeção. As sugestões dadas durante a apresentação da
primeira parte do projeto de TCC pela banca composta pelos professores
Marcos Brod Júnior e Fabiane Vieira Romano, também foram levadas
em consideração.
O fluxo foi revisado, um módulo do aplicativo retirado, botões foram
alterados, layout ajustado no grid indicado no Material Design entre
outras mudanças foram feitas. Estas ajudam a simplificar o aplicativo e
ajusta-lo melhor às necessidades do usuário. O protótipo foi novamente
colocado em testes, passando pela fase de inspeção para novamente
ser validade, resultando em um ciclo de testes e alterações. Além disso,
o software de prototipação foi alterado para o Figma.
3.6 Instauração
O design de interfaces, como pode-se perceber, requer um

processo de constante iteração e contato com o usuário. É necessário
também interdisciplinaridade entre as diferentes áreas envolvidas no
processo. User experience possui enfoque em aspectos psicológicos
no relacionamento com o usuário, o design de interação reúne estes
aspectos relacionando eles com o uso da interface.
O aplicativo não foi efetivamente implementado, mas foi pensado
para ser lançado como um Progressive Web App (PWA), um tipo de
aplicação web que apresenta características de aplicativo nativo. São
considerados mais simples de desenvolver, por usarem linguagens
web estabelecidas como HTML, CSS e JavaScript. Oferecem uma
série de vantagens para os usuários como utilização do espaço de
armazenamento reduzido, responsividade, segurança, são mais rápidos
e são independentes do sistema operacional utilizado. O tamanho de
instalação de um PWA, por exemplo, pode chegar a ser 157 vezes menor
do que um aplicativo nativo feito em React (BIØRN-HANSEN et al. 2017).
116
Na Figura 9 é possível ver as principais telas do aplicativo, a
principal, para visualização geral dos projetos, a visualização de tarefas
em um projeto e o timer para gerenciamento do tempo.
Figura 9. Telas de projetos, tarefas e timer.
4. EXTENSÃO PARA NAVEGADOR
Extensões são utilizadas para personalizar a experiência do

usuário que utiliza o navegador, diversas opções de tipos e funções de
extensões estão disponíveis em lojas como a Chrome Web Store. Na
página para desenvolvedores é definido que uma extensão deve cumprir
um único propósito, mesmo que contenha diversos componentes ou
funcionalidades, sendo facilmente relacionadas microinterações.
Foi considerada a necessidade do usuário acessar o aplicativo
não apenas no celular, já que alguns usuários relataram se afastar deste
para trabalhar e optou-se por uma extensão ao invés de uma página
web porque os recursos poderiam ser reduzidos. O processo de criação
da extensão foi mais rápido por herdar seus elementos do aplicativo já
validado, por isso também foi deixada para o final do projeto.
Existem diversos tipos de extensões, como por exemplo as que
ocupam a tela inteira, no formato de um Web App como o Google keep,
as que ficam como um modal em um canto da tela, como a usada pelo
aplicativo Todoist, e as que são usadas quando uma nova aba é aberta
como Muzli.
117
Para o Planit, foi decidido que a extensão seria seguindo o padrão
do Todoist, ficando no canto da tela, sem interromper o fluxo da página
já aberta no navegador. As funcionalidades foram resumidas em duas
microinterações: (i) o timer, para que o usuário possa registrar seu tempo
mesmo longe do celular, e (ii) a lista de tarefas do projeto, para fácil
acesso e visualização (Figura 10).
Figura 10. Extensão.
Ao realizar a pesquisa sobre o trabalho freelancer, foi possível

reconhecer melhor as dificuldades encontradas por quem começa na
profissão. A partir do estudo do design centrado no usuário, ficou mais
claro entender como esses usariam o aplicativo, o que deixou o processo
de projetação mais simples, por ter objetivos bem estabelecidos. A
pesquisa na área de interações e microinterações, por sua vez, trouxe
nitidez aos processos feitos durante a metodologia 5 I’s , dando mais
segurança na tomada de decisões. Metodologia que se mostrou eficaz
e flexível, guiando o caminho a ser tomado para uma interface mais
completa, por enfatizar a participação do usuário.
Este trabalho encerra um processo que iniciou durante as aulas do
Laboratório Orientado de Interface, assim teve tempo para amadurecer
e progredir, fechando portanto um ciclo de aprendizagem.
Como resultado, acredita-se ter atingido os objetivos que foram
estabelecidos no início da pesquisa. Incluir o usuário no processo
de desenvolvimento do protótipo se mostrou desafiador, sendo um
constante aprendizado de como compreender melhor as necessidades
não faladas do outro.
118
Como trabalho futuro, espera-se implementar o aplicativo e
continuar o processo de iteração, pois ainda há espaço para melhorias e
evolução. Também deseja-se desenvolver uma versão desktop completa,
com todas as funcionalidades compreendidas no aplicativo, mantendo
sempre o contato com o usuário.
REFERÊNCIAS
ADEGRAF. Tabela Adegraf 2019-2020. Disponível em: http://www.adegraf.org.br/

artigo/2019/04/nova-tabela-adegraf/ Acesso em 28 de julho de 2019.
ALEXSOFT. Principles of interaction design: What it takes to create positive human-

computer interactions. AlexSoft, 2018. Disponível em: https://www.altexsoft.com/
blog/uxdesign/principles-of-interaction-design/ Acesso em 20 de maio de 2019.
APARELHO ELÉTRICO. Dados sobre o Perfil do Freelancer no Brasil 2018. Disponível

em: https://aparelhoeletrico.com/infograficos/infografico-dados-sobre-o-perfil-
do-freelancer-no-brasil-2018/ Acesso em 22 de maio de 2019
ARNALDO, Tatiane Cristine. Além da interação homem computador: O Design de

Interação, seus processos e metas, em busca da satisfação do usuário final. 2011.
BIØRN-HANSEN, Andreas; MAJCHRZAK, Tim A.; GRØNLI, Tor-Morten. Progressive

Web Apps: The Possible Web-native Unifier for Mobile Development. WEBIST. 2017.
p. 344-351.
ERNESTO, M. Demanda por trabalho freelancer deve crescer 20% em 2018.

Disponível em https://www.em.com.br/app/noticia/economia/2017/12/25/
internas_economia,926873/demanda-por-trabalho-freelancer-deve-crescer-20-
em-2018.shtml Acesso em 10 de abril de 2019.
Web and Beyond, Second Edition. Berkley, CA: New Riders.
GASPARETTO, D. A.; KRUPAHTZ, J. Design Centrado no Usuário: Redesenho da

Interface Digital da Revista Arco. Artigo 16° Ergodesign, 2017.
GASPARETTO, Débora. Metodologia 5I’s. Laboratório de Interface. Santa Maria:

Universidade Federal de Santa Maria, 2019. Notas de Aula.
GOOGLE. Material Design. Disponível em: https://material.io/ Acesso em 10 de

outubro de 2019.
119
aplicativos amigáveis. São Paulo: Novatec Editora. 2013.
NIELSEN, Jacob; NORMAN, Don. The Definition of User Experience (UX). 2016.
Disponível em: https://www.nngroup.com/articles/definition-user-experience/
Acesso em 23 de junho de 2019.
NIELSEN, Jacob. Why You Only Need to Test with 5 Users. 2000. Disponível em:
https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
Acesso em 20 de agosto de 2019.
POCHMANN, Henrique. Trabalhar como freelancer: como começar, onde encontrar

trabalho e muito mais. 2015. Disponível em: https://aparelhoeletrico.com/artigos/
trabalhar-como-freelancer/#7 Acesso em 5 de maio de 2019.
PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de Interação: além da

interação humano-computador. Bookman Editora, 2013.
SAFFER, Dan. Designing for Interaction: Creating Innovative Applications and

Devices. 2nd ed. New Riders. Berkeley. 2010.
SAFFER, Dan. Microinteractions: designing with details. “ O’Reilly Media, Inc.”, 2013.
SPOTIFY. Disponível em: https://www.spotify.com/br/ Acesso em 25 de julho de

2019.
TEIXEIRA, Fabrício. Introdução e boas práticas em UX Design. 2014. São Paulo:

Casa do Código.
120
121
Prototipação de uma interface gamificada
de inglês para crianças com base na
metodologia 5I’s
Gabriela Nehring;
RESUMO: Expor crianças a novas línguas quando são novas auxilia

no aprendizado mais fácil de outro idioma, porque a capacidade de
formar novas sinapses no cérebro é maior do que no cérebro já adulto.
Unindo entretenimento com educação, há mais chances de despertar o
verdadeiro interesse em aprender nas crianças. Por isso, o objetivo desse
trabalho é a projetação de um protótipo de interface gamificada que
auxilie e incentive o ensino da língua inglesa para crianças de 1 a 4 anos.
Foram pesquisados conceitos de aprendizado no cérebro das crianças,
como elas são motivadas, conceitos de gamificação e jogos educativos,
para chegar em uma interface que promova o conhecimento sem deixar
de ser divertida. O projeto foi desenvolvido com base na metodologia
5I’s, com foco no usuário, inovação e no potencial inventivo.
1. INTRODUÇÃO
Esse trabalho tem como objetivo propor a utilização de conceitos

relacionados à aprendizagem e à gamificação de atividades do dia-a-
dia para a projetação de uma interface que possa auxiliar crianças de
1 a 4 anos na aprendizagem de uma segunda língua. Esses conceitos
são utilizados em conjunto para motivar a criança a aprender e assim,
quando for mais velha, poderá ter mais facilidade para dar continuação
à aprendizagem.
Para chegar ao resultado esperado, foram realizadas pesquisas
teóricas para entender mais sobre como o aprendizado acontece no
cérebro das crianças e como elas são motivadas (Cosenza e Guerra, 2011;
Atkinson e Hilgard, 2018; Changeux, 2013). Também foram pesquisados
os conceitos de gamificação e jogos educativos (Deterding,2011; Jane
McGonigal, 2011; Zichermann e Cunningham,2011), para compreender
como podem auxiliar no ensino de uma língua estrangeira e despertar o
122
interesse na criança. Na sequência, foram realizados testes de usabilidade
com o usuário para entender se os objetivos estão sendo atingidos e se o
funcionamento fica claro.
Expor crianças a novas línguas quando são pequenas é importante,
pois o sistema nervoso ainda é muito plástico, porque a capacidade de
formar novas sinapses no cérebro é maior do que no cérebro já adulto.
Portanto, quanto mais cedo obtiverem contato com outro idioma, mais
facilidade terão em aprendê-lo. As interfaces gamificadas, principalmente
em jogos educacionais, tendem a reforçar o aprendizado, pois levam em
consideração o aspecto da diversão e utilizam técnicas para prender a
atenção do usuário e o motivar a querer jogar mais. Unindo entretenimento
com educação, há mais chances de despertar o verdadeiro interesse em
aprender nas crianças.
2 FATORES QUE CONTRIBUEM PARA A APRENDIZAGEM
Para dar início a este trabalho é importante saber como o cérebro

funciona para entender como ele aprende. Nosso cérebro é preparado
para receber alguns tipos de estímulos e energias, alguns animais
conseguem perceber estímulos que nosso cérebro não consegue,
como por exemplo algumas frequências de luz e som, porque não
temos receptores para isso. Os processos sensoriais começam sempre
nos receptores especializados em captar um tipo de energia, como por
exemplo visão e tato. A informação é processada de modo consciente
quando chega nos locais especializados, sendo em sua maioria
localizados no córtex (Cosenza e Guerra, 2011).
Segundo Cosenza e Guerra (2011), os bebês desenvolvem o
cérebro durante os 9 meses de gestação, nascendo com um sistema
nervoso já bem parecido com o que terão na vida adulta (Figura 1). As
outras modificações que o cérebro irá formar durante a vida virão das
experiências e interações que a criança terá com o mundo que a cerca.
Durante muito tempo imaginava-se que o cérebro não formava novos
neurônios após o nascimento e que a medida em que envelhecemos
haveria uma grande perda de neurônios. Hoje se sabe que algumas
regiões do cérebro ainda produzem algumas novas células e que a perda
é menor.
123
Figura 1: a medida que o bebê se desenvolve, são criados circuitos maiores e mais intrincados.
Fonte: adaptado de Cosenza e Guerra, 2011.
Os padrões cronológicos de aprendizados na infância são etapas

cumpridas regularmente com o amadurecimento das conexões que
fazemos, mas há capacidades que dependem mais de uma interação
específica, como a linguagem falada. As crianças vão aprender a falar e
compreender a linguagem de uma forma natural, sem precisarem ser
ensinadas. A criança tem a capacidade de aprender qualquer língua, mas
qual idioma vão dominar é ensinado através das interações sociais.
Como o cérebro não tem capacidade nem necessidade de
processar todas as informações que chegam até ele, é por meio da
atenção que ele escolhe as mais importantes. O cérebro foi aperfeiçoado
durante milhões de anos pela natureza para que consiga detectar no
ambiente os estímulos que sejam importantes para a sobrevivência do
ser humano. Ou seja, “o cérebro está permanentemente preparado para
apreender os estímulos significantes e aprender as lições que daí possam
decorrer” (Cosenza e Guerra, 2011, p. 48).
É dessa forma que a atenção será capturada na hora de aprender
algo, temos que ter a percepção de que aquelas informações são
importantes. Terá mais chance se ser significante aquilo que tenha
ligações com o que já é conhecido, que atenda a expectativas ou que
seja estimulante e agradável. Um ambiente estimulante ajuda que o
estudante assuma um papel ativo e não seja apenas espectador, com
lições centradas nos alunos, interatividade e colocação de metas a
serem atingidas.
124
É sabido que a atenção é melhor capturada quando tem uma
recompensa imediata, mas Atkinson e Hilgard (2018) lembram que
muitos comportamentos humanos não podem ser motivados apenas
por essa expectativa, alguns comportamentos são motivados por
objetivos de longo prazo, como objetivos intelectuais, participações
sociais e de autoestima.
Após a captura da atenção, é possível começar a absorver
informações, gerando as memórias. As memórias podem ser distinguidas,
segundo Cosenza e Guerra (2011), em conhecimentos adquiridos,
lembrados e utilizados conscientemente, como a lembrança do que
comemos no almoço e nosso número de telefone, que é a memória
explícita. E a memória implícita, que se manifesta sem esforço ou
intenção consciente, como a habilidade de escovar os dentes ou andar
de bicicleta.
As técnicas de ensino que levam em conta a forma do cérebro
de aprender, respeitando seus processos de repetição, elaboração e
consolidação tem mais chances de terem sucesso, pois estarão seguindo
o caminho mais eficaz para a permanência dos conteúdos ensinados no
cérebro do aluno.
Cosenza e Guerra (2011) acreditam que existe um período em que a
aprendizagem é mais fácil, por exemplo o aprendizado de uma segunda
língua. É feito com muita facilidade nos primeiros anos de vida, depois
disso precisa de mais esforço para ser aprendido com perfeição, sem
sotaques por exemplo. O sistema nervoso é muito plástico nos primeiros
anos de vida, porque a capacidade de formação de novas sinapses é
muito grande e o cérebro adulto não tem a mesma facilidade (Cosenza
e Guerra, 2011). Por isso, quanto antes a criança for exposta ao ensino
de uma outra língua e com as técnicas de ensino que mais estimulam o
cérebro, terá mais facilidade em aprendê-la.
Como o ensino de uma nova língua é o objetivo da interface a
ser criada neste trabalho, é preciso entender como ela acontece no
ser humano. Atkinson e Hilgard (2018) dizem que a linguagem é nosso
principal meio para comunicar o pensamento. Além disso, é universal: toda
sociedade humana usa a linguagem, e cada ser humano de inteligência
normal adquire sua língua nativa e a usa sem esforço. A maioria das
crianças normais desempenha as tarefas linguísticas sem esforço, como
falar e compreender a língua nativa. A comunicação por sons existe em
125
várias espécies de animais, seja por troca de sons ou até por conversas
primitivas, como é o caso dos chimpanzés, diz Changeux (2013).
Para desenvolver a linguagem (Feldman, 2015), as crianças
começam a produzir sons que não têm sentido, mas são semelhantes à
fala. A partir de um ano, elas param de produzir esses sons e começam a
tentar reproduzir a fala, começando com palavras curtas e já são capazes
de entender uma boa parte do que escutam.
Após essa idade, as crianças começam a produzir discursos mais
complexos e aos dois anos já estão com um vocabulário de mais de 50
palavras (Feldman, 2015), apesar de não terem domínio das regras da
gramática. Existem teorias que falam sobre esse aprendizado tão rápido
do uso da linguagem por crianças e Feldman (2015) explica que são três:
uma baseada na teoria da aprendizagem, outra baseada em processos
inatos e uma terceira que envolve uma combinação das duas.
Tendo conhecimento de como a linguagem funciona, é
compreendida e reproduzida, é possível ter uma melhor noção de como
ensiná-la. As escolas com ensino bilíngue estão cada vez mais comuns, já
que evidências mostram que a capacidade de falar duas línguas oferece
benefícios cognitivos se comparada com a de falar só uma língua. Falantes
bilíngues mostram mais flexibilidade cognitiva e podem compreender
conceitos com mais facilidade do que os que falam apenas uma língua,
já que eles possuem mais ferramentas linguísticas para pensar. Isso
torna os bilíngues mais criativos e flexíveis na resolução de problemas
(Heyman & Diesendruck, 2002, apud Feldman, 2015).
Além disso, Feldman (2015) ainda diz que as crianças bilíngues têm
desenvolvimento cognitivo superior ao de crianças que falam apenas um
idioma e essa vantagem segue até a velhice, pois o bilinguismo protege
o cérebro de perder sua eficácia, o que é comum nos seres humanos
após uma idade mais avançada.
Com todas essas vantagens, podemos estipularque aprender
uma segunda língua é importante tanto para a saúde do cérebro e o
desenvolvimento de novas conexões, quanto para interações sociais e
uma maior possibilidade de comunicação durante a vida adulta. Como
essa aprendizagem é mais fácil durante a infância, não há motivos para não
a estimular desde cedo, assim criando um maior interesse e facilidade na
criança, para que ela possa prosseguir com os estudos enquanto cresce.
126
3. A GAMIFICAÇÃO E JOGOS EDUCATIVOS
Os números de jogadores nos Estados Unidos, segundo Jane

McGonigal (2011), estão crescendo e as estatísticas de outros países,
incluindo Brasil, tendem a crescer também.Em2018, no Brasil, o mercado
de games movimentou mais de 1,5 bilhão de dólares apesar da crise
na economia do país, segundo o Estadão de Minas (2018). É necessário
decidir que tipo de jogos construiremos e como iremos jogá-los juntos,
pois irão impactar na sociedade e em nossas vidas reais, como afirma
Jane McGonial (2011).
De acordo com Deterding (2011), a indústria usa o termo “gamificação”
em dois diferentes conceitos, sendo o primeiro a crescente adoção e
presença de jogos no dia a dia da população. O segundo é a noção de que
se os jogos são feitos primordialmente com o intuito de serem divertidos
e motivarem os jogadores a passarem horas jogando, seus mecanismos
podem ser utilizados para que outros produtos possam se beneficiar e
consigam capturar a atenção e motivação de seus usuários assim como
os jogos.
As estratégias de jogos e suas outras ferramentas de engajamento
começaram a ser notadas por desenvolvedores de interfaces e outras
áreas fora da indústria dos jogos, explorando a jogabilidade como uma
característica importante para a interação dos usuários.
O jogo transforma algo chato em uma competição, fazendo com que
as atividades fiquem mais divertidas e criativas, causando impacto na
vida real de quem joga (Jane McGonigal, 2011) . Transforma uma tarefa
obrigatória em algo que se quer fazer.
Para criar uma interface gamificada, de acordo com Zichermann
e Cunningham (2011), são levados em consideração os aspectos do
design de jogos que irão produzir os melhores impactos nos jogadores.
Um dos processos do design de jogos é o “MDAFramework”, que analisa
os elementos do jogo e permite a aplicação fora deles. Esse processo
foca na mecânica, dinâmica e estética. A mecânica faz os componentes
funcionais do jogo, ou seja, guia as ações do jogador. A dinâmica é
a interação dos jogadores com a mecânica, determinando o que os
jogadores estão fazendo em resposta à mecânica do sistema. Por fim,
para esses autores, a estética é o que traz o sentimento e diz como o
jogador vai se sentir durante as ações e interações com o jogo.
127
A mecânica de uma interface gamificada, para Zichermann e
Cunningham (2011), pode levar à uma resposta significativa dos usuários.
Ela é composta de algumas ferramentas que levam a esse sucesso,
como pontos, níveis, quadro de líderes, distintivos, desafios/missões,
onboardinge ciclos de engajamento.
Para Zichermann e Cunningham (2011), o jogador é a parte mais
importante da gamificação e a sua motivação é o que determina o sucesso
do jogo, portanto, entender essa motivação é essencial para projetar uma
boa interface gamificada. Os jogos já oferecem uma boa motivação com
seus três componentes principais (Zichermann e Cunningham, 2011):
prazer, recompensas e tempo. Com isso, conseguem fazer o jogador
tomar decisões de ações que normalmente não tomaria, mas de um jeito
previsível e baseado na diversão.
Um fator importante para criar a motivação no jogador é o fluxo
do jogo (Zichermann e Cunningham, 2011), pois vai colocar o jogador
em um estado entre a ansiedade e o tédio, onde ele pode encontrar sua
motivação na experiência. Nesse estado, o tempo passa mais rápido e
o mundo exterior é esquecido por um momento. Isso se conecta com
o que Donald Olding Hebb (apud Atkinson e Hilgard, 2018) diz sobre
a teoria da motivação, citado no capítulo anterior: para que haja uma
ativação da motivação, é preciso que o indivíduo esteja em um nível
intermediário de ativação, entre calma e ansiedade, para que a atividade
seja melhor realizada.
Uma das maneiras que os desenvolvedores de jogos usam para
que o jogador chegue nesse estado é através do reforço. O reforço é
“como convertemos uma recompensa em uma ação do jogador através
da variação de quantidade e tempo de entrega dessa recompensa”
(Zichermann e Cunningham, 2011, p. 18). Entender o reforço é essencial
para estruturar um bom sistema de recompensas.
Como o objetivo deste trabalho é o desenvolvimento de uma
interface voltada ao estímulo da aprendizagem através da gamificação, é
importante estudar essa categoria de jogos: os jogos sérios. Zichermann e
Cunningham (2011) afirmam que nos últimos 20 anos não surgiu nenhum
jogo muito popular no ramo da educação, que são geralmente focados
em crianças e devem ser divertidos para atraí-las.
Pesquisas da Universidade de Regensburg (Zichermann e
Cunningham, 2011) mostraram que aprender uma nova tarefa estimula
o cérebro e o sistema dos jogos de “desafio-conquista-recompensa”
128
promove a produção de dopamina. Portanto, unir o aprendizado e jogos
é um jeito eficaz de aumentar o interesse pelo estudo, mas o aspecto de
diversão nos jogos educativos não pode ser deixado em segundo plano.
4. PROCESSO DE PROJETAÇÃO DO APLICATIVO COM BASE NA

METODOLOGIA 5I’S
A metodologia aplicada para esse projeto é a metodologia 5I’s, uma

união das metodologias de Garret (2011), Lowdermilk (2013) e Teixeira
(2014), proposta por Gasparetto, a partir de 2016. Foi desenvolvida do
Laboratório de Interface do curso de Desenho Industrial, como método
para o desenvolvimento de interfaces interativas com foco no usuário.
A metodologia é composta por 5 fases: Ideação, Inambulação, Instauração,
Inspeção e Implementação. Como foi desenvolvida dentro de um
laboratório, foi pensada como um método de ensino por Gasparetto (2019).
Apesar disso, o objetivo é que os alunos possam continuar aplicando a
metodologia no mercado de trabalho, pois tem foco está na inovação e
no potencial inventivo.
4.1. Ideação
A ideação é a parte da metodologia 5I’s composta por por técnicas

de Briefing, Brainstorming, Mapas Mentais, Pesquisas com usuários,
Personas, Busca de Referências, Atlas Mnemosyne, Pontos de Contato
com a interfaces, Dados de Mercado e elaboração de GDD (Game Design
Document) ou de estratégias de gamificação, quando o projeto demandar.
No briefing são respondidas as questões: O quê?Como? Porquê? Para
quem? Por quem? Em que lugar?
Para o desenvolvimento do presente projeto, o briefing foi definido:
Problema:falta de um meio para ensinar crianças a língua inglesa em que
elas aprendam a partir da experiência, do engajamento e do contato com
a natureza. O quê: uma interface gamificada que promova a introdução
ao aprendizado da língua inglesa, com interação com o ambiente.
Como:por meio de um aplicativo que promova o aprendizado.
Porquê:as crianças aprendem mais facilmente uma nova língua do
que adultos.
Para quem:crianças de 1 a 4 anos.
Em que lugar:em casa ou na rua, preferencialmente, com a ajuda
dos pais.
129
Após esta etapa ser definida, foi realizado um brainstorm e mapa
mental (Figura 2) para pensar em possíveis temas que seriam seguidos
na construção da interface. Foram pesquisadas referências de outros
aplicativos já existentes, como Khan Academy Kids, LingoKids e Timmy’s
First Words in English. Também foi realizada uma visita à escola de inglês
Yázigi, onde foi assistida uma aula para crianças de 3 anos e alguns
requisitos para o aplicativo puderam ser retirados a partir da observação
do comportamento das crianças. Essa visita foi utilizada como pesquisa
com o usuário, já que não seriam as crianças que respoderiam o
questionário, e sim os pais.
Figura 2: mapa mental de ideias para o aplicativo.
O Atlas de Mnemosyne (Figura 3), é o método utilizado pelo

historiador Aby Warburg (2015, apud Gasparetto, 2019) para encontrar
pontos em comum entre as imagens de referência. As formas, cores
e elementos predominantes darão o sentido das escolhas para o
projeto. Para esse projeto foi elaborado um Atlas de Mnemosyne onde
se destacaram as formas com cantos arredondados, texturas, cores
relacionadas à natureza e ao mundo infantil.
130
Figura 3: Atlas de Mnemosyne do projeto.
Fonte: elaborada pela autora.
A partir dessas informações, foram concebidas 4 personas para

que se pudesse entender melhor as necessidades do público-alvo e
dos pais, já que as crianças não poderiam responder questionários de
pesquisa com o usuário. As personas, segundo Lowdermilk (2013), ajudam
o projetista a lembrar para quem o aplicativo está sendo criado. Cada
uma das personas representa algum requisito que o aplicativo precisa
ter e um propósito diferente para o uso da interface. Já Teixeira (2014),
diz que as personas são um retrato de quem é o público-alvo do projeto,
para que a comunicação com o usuário seja feita na linguagem natural
para ele.
Das personas criadas para esse projeto, uma é Maria Luiza, que
quer jogos que saiam da tela do celular e aprender sobre a natureza; a
outra persona é Vicente, que necessita um aplicativo que prenda sua
atenção e que tenha a possibilidade de jogar sem ajuda mesmo não
sabendo ler; Fernando é pai e usa os jogos para interagir mais com os
filhos, mas os jogos não podem ocupar muito espaço no celular; por fim,
Adriana é mãe e quer que os jogos divirtam as crianças enquanto ela não
pode dar atenção e que sejam fáceis de entender.
Os pontos de contato, ou “golden moments”, são os momentos em
que o aplicativo será utilizado pelos usuários. Para essa interface, foram
definidos como: durante viagens de carro, em casa, durante refeições e
na hora de brincar.
131
4.2. Inambulação
A segunda fase da metodologia 5i’s, a Inambulação, é onde são

pensados os requisitos e funcionalidades do projeto, também como as
análises gráfica e heurística e escolha das tecnologias. Os requisitos
representam o que os usuários precisam e as funcionalidades são o que
a interface precisa ter para funcionar.
Os requisitos foram definidos a partir das personas e da observação das
aulas na escola Yázigi, sendo eles: facilidade para entender como utilizar
a interface, para que os usuários consigam autonomia; uso de narração,
pois os usuários não saberão ler; personagens cativantes para chamar
atenção; atividades com interação com o meio e com os pais; liberdade
para trocar entre os níveis e escolher as tarefas que querem fazer. Para
que esses requisitos sejam alcançados, é preciso que estejam disponíveis
as seguintes funcionalidades: acesso à câmera, alto falantes no celular,
níveis para marcar a evolução no jogo.
Para as análises gráficas e heurísticas, foram selecionados três
aplicativos destinados ao ensino da língua inglesa para crianças: Khan
Academy Kids, LingoKids e Timmy’s First Words in English. As análises
gráficas fazem a sistematização (Gasparetto, 2019) das interfaces
analisadas, observando as informações visuais sobre tipografia, paleta
de cores e até malhas gráficas. Além disso, são analisados os padrões
de interação.
Já as análises heurísticas são feitas a partir dos 10 critérios de
Nielsen (1994), para que possa ser levado para o projeto o que for retirado
desses critérios. Os critérios são visibilidade do status do sistema,
compatibilidade entre o sistema e o mundo real, controle e liberdade
do usuário, consistência e padronização, prevenção de erros, reconhecer
ao invés de lembrar, flexibilidade e eficiência de uso, estética e design
minimalista, ajudar o usuário a reconhecer, diagnosticar e se recuperar de
erros, ajuda e documentação. Além dos critérios de Nielsen, Gasparetto
(2019) sugere mais dois: acessibilidade e impacto ambiental. Esses
critérios foram avaliados em uma nota de zero a dez.
As análises dos aplicativos foram fundamentais para definir
requisitos do aplicativo projetado, como a parte para pais e temas que
devem ser tratados durante os níveis. Também foi importante a análise
dos padrões de interação, utilização de personagens nos jogos e a
variedade de atividades.
132
Sobre a tecnologia, optou-se por desenvolver um protótipo de
aplicativo para sistema Android com a ferramenta Adobe XD, um programa
em parte gratuito da Adobe. Oferece facilidade para o aprendizado de
como funciona por ter semelhança com os outros programas da Adobe,
além de interagir com eles, facilitando o fluxo de trabalho. Foi definido
que a estratégia de gamificação será um sistema de recompensas: para
cada etapa concluída a criança ganhará um item como retribuição,
estimulando a motivação para continuar no jogo e assim é esperado
se crie uma sensação de conquista na criança. Também se espera que
a possibilidade de escolher o que irá jogar e não ser obrigada a seguir
níveis seja um diferencial do aplicativo, pois isso dará independência
para a criança.
4.3. Instauração
Conforme Gasparetto (2019), na fase de instauração é realizado o

sitemap (Figura 4), para listar e rotular todos os aspectos da interface. Na
sequência, são feitos os primeiros esboços sobre como estas informações
irão aparecer nas telas, como rabiscoframes e o protótipo interativo.
O sitemap, segundo Teixeira (2014), consiste em um diagrama das
páginas do site (ou aplicativo) organizadas hierarquicamente. Ele ajuda a
visualizar a estrutura básica e a navegação do sistema.
Figura 4: sitemap.
Fonte: elaborado pela autora.
133
A seguir, iniciou-se o processo de desenhar os rabiscoframes.
Os rabiscoframes (Figura 5), segundo Teixeira (2014), são um rascunho
de como a interface será, para que depois o projetista possa passar
as ideias para uma forma de protótipo. Nessa etapa foi decidido que a
maneira de classificar os níveis do sistema será representada através de
uma árvore. Cada galho da árvore tem um tema e dentro desse tema
há alguns jogos. Os níveis poderão ser jogados na ordem preferida pela
criança, para que ela possa ter autonomia no que deseja aprender no
dia. Assim, a possibilidade de que a criança crie um interesse genuíno no
jogo aumenta, e como foi citado no segundo capítulo, quando se está
verdadeiramente motivado a aprendizagem é mais espontânea e eficaz.
Além disso, foi determinado que em cada nível haverá uma atividade
externa, para incentivar a criança a sair da tela e interagir com o meio.
Nessa atividade será incentivada a ajuda dos pais, para que a criança
também interaja com eles. Quando finalizada, o usuário poderá informar
à interface que a tarefa foi concluída para que ganhe a recompensa.
Figura 5: rabiscoframes.
Alguns testes para definição das cores principais e secundárias

foram realizados, sendo definidos tons mais pastéis para compor a paleta.
134
As cores principais serão o verde e verde claro, para que a estética fique
minimalista e remeta à natureza. A fonte escolhida é Fresca Regular,
desenvolvida por Fontstage, de espessura média, com formas irregulares
e que transmite uma mensagem lúdica. O tamanho de fonte utilizado
para títulos é 30 pontos e para texto é 16 pontos. Após isso, o primeiro
protótipo da interface foi desenvolvido na ferramenta Adobe XD.
O nome do aplicativo foi definido como Tree House - Inglês para
Crianças, já que os temas de jogos são distribuídos em uma árvore, como
se o usuário estivesse subindo na árvore. O personagem da criança
também fica em uma casa da árvore, sempre remetendo ao meio externo.
Na casa da árvore é possível trocar a roupa, cabelo, pele e acessórios
do personagem por outros que serão dados como recompensa por
completar alguma atividade nos jogos. Também será possível modificar
a decoração da casa da árvore por outros itens conquistados.
As ilustrações foram desenvolvidas no software Adobe Illustrator
e Adobe Photoshop. Todo os personagens possuem a mesma estrutura,
mas a criança poderá modificar a aparência no decorrer do jogo e das
conquistas das recompensas. Todas as ilustrações têm aparência infantil,
lúdica e com textura para que fiquem atraentes para a criança e se
comuniquem o mundo dela.
A marca do aplicativo projetado é composta pela paleta de cores
usada no projeto, com letras desenhadas de uma forma lúdica e com
variações de tamanho para trazer movimento. Está contida em um selo
irregular, mas que permite uma melhor visualização da marca quando for
aplicada em diferentes superfícies.
Para os jogos do protótipo (Figura 6), foram desenvolvidos os da
categoria cores. Quatro jogos foram pensados para familiarizar o usuário
com os nomes das cores e saber identificá-los e com interação com o
meio externo. Os jogos das outras categorias seguirão o mesmo padrão
da categoria cores, com ênfase em identificar na vida da criança esses
aspectos.
As recompensas para tentar ativar a atenção do usuário, que são a
parte de gamificação do protótipo, foram estabelecidas como itens para
personalização do personagem e do ambiente da casa da árvore. Quando
uma tarefa for concluída com sucesso, a criança será recompensada
com um item aleatório para a composição do personagem ou decoração
da casa da árvore. Assim, espera-se que o desejo por ganhar mais
objetos diferentes leve a criança a querer continuar no jogo e cumprir
135
mais objetivos. Como mencionado no segundo capítulo, até os dois anos
de idade a criança está formando seu vocabulário e uma das teorias
da aprendizagem exploradas propõe que o reforço positivo, como a
recompensa do jogo, incentiva a criança a continuar explorando esses
aspectos e entende quando fez algo correto.
Figura 6: jogos da categoria cores.
Quando algum erro for cometido, uma mensagem de erro

foi elaborada para incentivar a criança a continuar tentando e não se
desestimular com o jogo. Após essa tela avisando do erro, o jogo retorna
para onde parou.
Os itens conquistados durante os jogos ficam guardados no baú
na casa da árvore. Ao ser clicado é possível usar os itens, trocando as
roupas ou características físicas do personagem. Também é possível
visualizar todos os itens conquistados durante o jogo, acessando pelo
botão “seeall items” na tela de customização do personagem. Com esse
recurso, o jogador pode observar o quanto já jogou pela quantidade de
itens adquiridos, funcionando como um quadro de líderes, que mede o
progresso no jogo. Ao clicar no item de decoração da casa da árvore,
acima do baú, é possível utilizar os itens de decoração ganhos para
personalizar a casa da árvore.
Espera-se que com essas estratégias aplicadas, a criança tenha
a sensação de que está aprendendo e também de que é independente
nas escolhas que faz para chegar ao aprendizado. Como foi observado
durante a visita à escola de inglês na fase de Ideação, a independência da
criança para decidir o que quer aprender foi destacada como um ponto
136
importante no processo de aprendizado e no interesse despertado pela
atividade. As outras fases do protótipo que estão distribuídas na árvore
têm os temas de comidas, animais, números, família e sentimentos. Para
essas fases não foram elaborados os jogos, mas elas seguem o mesmo
padrão da fase cores: dois jogos para se familiarizar com o conteúdo,
apenas na tela do celular, e dois jogos que fazem conexão com o meio
externo. Na fase de comidas a criança poderá aprender o nome dos
alimentos, reconhecer as comidas que tem em casa e ter uma experiência
com alimentos no meio externo com ajuda dos pais. Na fase de animais
serão ensinados os nomes de alguns animais, conectando com animais
que a criança possa ver no dia-a-dia e com a atividade externa. Nos
números, serão ensinadas quantidades e como contar até dez, agrupar
uma quantidade de objetos na casa e com a ajuda dos pais. Na fase família,
serão ensinados como chamar cada membro da família, montando uma
espécie de árvore genealógica com as fotos das pessoas que moram
na sua casa. Por fim, na fase sentimentos a criança poderá aprender
como nomear sentimentos como felicidade e tristeza, reconhecendo se
alguém está feliz ou triste e aprendendo o que significam. Com essas
fases, espera-se que a criança comece a familiarização com a língua e
fique motivada para seguir os estudos quando for mais velha.
4.4. Inspeção
A inspeção é a fase da metodologia em que acontecem testes

e avaliações junto do público-alvo, para verificar os aspectos estético-
formais, técnicos, de usabilidade, experiência do usuário e acessibilidade
(Gasparetto, 2019). São realizados testes para validar com o usuário as
decisões tomadas pelo designer na construção da interface, por isso
também essa fase é cíclica com a fase de instauração e implementação.
Primeiramente, a interface foi inspecionada pela orientadora
e algumas mudanças foram feitas antes do teste com usuários. Foi
adicionado um menu para que os pais possam ajustar o perfil da
criança, um pequeno tutorial para instruir os pais como o jogo funciona,
informação de porquê e por quem a interface foi desenvolvida e a opção
de compartilhar o aplicativo. Além disso, outras mudanças para o melhor
funcionamento e aperfeiçoamento da estética foram adicionadas.
137
A orientadora fez uma segunda avaliação e outros pontos foram
levantados, como a necessidade de criar uma versão do aplicativo para
quem escolhe o personagem inicial menino, ajustes de tamanho de
fonte, ajustes de cor de fonte para melhor contraste com o
fundo e correções ortográficas.
Esses ajustes foram feitos e o teste com usuário foi realizado.
O protótipo (Figura 7) foi testado com 3 mães, entre 33 e 55 anos. Foi
requisitado que elas realizassem três tarefas:
1. Cadastrar o filho e jogar um jogo
2. Acessar o perfil da criança e ativar o aviso de tempo de tela
3. Encontrar onde estão as recompensas.
Figura 7: versão do protótipo.
Todas conseguiram realizar as atividades, com alguma confusão

pelo protótipo não ser totalmente funcional como um aplicativo normal.
Conseguiram com facilidade cadastrar a criança e encontrar os jogos
138
para jogar, foi sugerido inserir tempo no jogo onde a criança precisa
fazer mistura de cores. Conseguiram acessar o menu e o perfil da criança
rapidamente, acharam que a opção de restrição do tempo de tela é
útil, porém comentaram que não costumam restringir o tempo de tela
dos filhos. Por fim, demoraram algum tempo para encontrar o baú das
recompensas, então foi adicionado movimento no baú ao acessar a casa
da árvore, para que fique mais intuitivo de que é um objeto clicável.
4.5. Implementação
A implementação é a fase final da metodologia, onde o produto

final é gerado, mas exige novas inspeções e substituições. Nessa fase, a
interface deixa de ser um protótipo e é executada pelos desenvolvedores,
por isso é importante manter contato com os desenvolvedores durante
o projeto, para que acompanhem todo o processo e estejam a par das
funcionalidades que o aplicativo precisa. Essa relação é tão importante
quanto a relação com o usuário.
Na implementação, novos testes com usuário serão feitos para
ter certeza que todas as interações estão funcionando. As ferramentas
de prototipagem normalmente oferecem algumas áreas para os
desenvolvedores com informações sobre a interface, facilitando seu
trabalho. Apesar disso, uma interface nunca está pronta e sempre precisa
de atualizações constantes (Gasparetto, 2019). Novas ferramentas são
lançadas e erros podem ser encontrados, sendo necessárias atualizações
para sempre dar uma boa resposta para o usuário.
Essa é uma fase que não está sendo cumprida nesse projeto, pois
foi feito apenas o protótipo. Para que fosse realizada, seria necessária
uma equipe interdisciplinar para desenvolver o aplicativo e revisar o
conteúdo, pessoas das áreas de Letras/Inglês e também dos Sistemas
de Informação.
Link para acesso ao protótipo interativo
139
No decorrer do desenvolvimento deste trabalho, foram pesquisados

assuntos relacionados ao funcionamento do cérebro e como a informação
é absorvida, que não são aprofundados no curso de Desenho Industrial,
mas tem importância para o desenvolvimento da profissão. Levar em
consideração esses aspectos foi essencial para pensar uma interface
mais eficiente para o público alvo.
Durante a pesquisa, conceitos gamificação e estratégias utilizadas
nos jogos vistas foram analisados e utilizados no desenvolvimento do
protótipo interativo, buscando aplicar as estratégias encontradas para
que a interface ficasse a mais motivadora e divertida possível.
Acredita-se ter conseguido atingir o objetivo principal, que era utilizar
os conceitos relacionados à aprendizagem e à gamificação aprendidos
durante a pesquisa, para a criação de uma interface que possa auxiliar
crianças de 1 a 4 anos na aprendizagem de uma segunda língua e
promover a interação com o meio externo. Tentou-se promover, com o
uso da interface criada, uma utilização consciente das telas e o incentivo
de interação com os pais e com o meio, para que a criança possa ter um
desenvolvimento completo.
Alguns objetivos não foram cumpridos por falta de recursos da
ferramenta utilizada para fazer o protótipo, como a narração durante as
atividades. Apesar disso, acredita-se que a interface tenha cumprido o
papel de representar a ideia pretendida.
Por fim, a metodologia 5I’s foi essencial para o desenvolvimento
do trabalho, mantendo o foco no usuário durante todo o processo e
permitindo uma liberdade criativa nas etapas.
ATKISON, R C; HILGARD, E. R. Introdução à psicologia. São Paulo: Cengage, 2018.
BOLZAN, M M. Desenvolvimento de jogo em realidade
aumentada/alternativa: o projeto “Undercover”. 2017. Tese (Desenho Industrial) –

Centro de Artes e Letras, UFSM, Santa Maria.
CHANGEUX, J. O Verdadeiro, o Belo e o Bem- Uma nova abordagem neuronal. Rio

de Janeiro: Civilização Brasileira, 2013.
140
COSENZA, R M.; GUERRA, L B. Neurociência e Educação: como o cérebro aprende;
São Paulo: Artmed, 2011.
DETERDING, S et al. From Game Design Elements to Gamefulness: Defining

“Gamification”. Hamburg University, 2011.
FELDMAN, R S. Introdução a psicologia. Porto Alegre, RS: AMGH, 2015.
GARRETT, J. J. The Elements of User Experience: User-Centered Design for the Web
and Beyond. Second Edition. Berkley: New Riders Press, 2011.
GASPARETTO, D. A.; KRUPAHTZ, J. Design Centrado no Usuário: Redesenho da

Interface Digital da Revista Arco. Artigo 16° Ergodesign, 2017.
GASPARETTO, Débora Aita; A metodologia 5I`s na projetação do aplicativo Baloo.
GOMES, L. V. N. ; BROD, J. M. ; MEDEIROS, L. M. S. . Sobre Metódicas, Metodologia e
Métodos para Projeto e Desenho de Produto Industrial. In: 9 Congresso Brasileiro

de Pesquisa e Desenvolvimento em Design 2010, 2010, São Paulo. 9 P&D Design
2010. São Paulo: Universidade Anhembi Morumbi / Blucher, 2010b.
LOWDERMILK, T. Design Centrado no Usuário:um guia para o desenvolvimento de

aplicativos amigáveis. São Paulo: Novatec Editora. 2013.
Mamilos #218 - Crianças e telas. Entrevistadores: Cris Bartis e Juliana Wallauer.

Entrevistados: Daniel Becker e George Stein. Brainstorm9, 11 de outubro de 2019.
Disponível em <https://www.b9.com.br/shows/mamilos/mamilos-218-criancas-
telas/>. Acesso em: 28 de outubro de 2019.
MCGONIGAL, J. Reality Is Broken- Why Games Make Us Better and How They Can
Change the World. New York: The Pequim Press, 2011.
MICHAEL, D; CHEN, S. Serious games: games that educate, train,
and inform. Cengage Learning, 2005.
NIELSEN, J. 10 Usability Heuristics for User Interface Design. 1994. Disponível em
<https://www.nngroup.com/articles/ten-usability-heuristics/> Acesso em 17 de
setembro de 2019.
PACHECO, P.Mercado de games no Brasil cresce, apesar da crise. Estado de Minas,

24 de julho de 2018. Disponível em
<https://www.em.com.br/app/noticia/economia/2018/07/24/internas_
economia,975277/mercado-de-games-no-brasil-cresce-apesar-da-crise.shtml>.
Acesso em: 12 de novembro de 2019.
141
TEIXEIRA, F. Introdução e boas práticas em UX Design. 2014. São Paulo: Casa do
Código.
SILVA, L. S.; MENEZES, E. M. Metodologia da pesquisa e elaboração de dissertação

. Manual de orientação. Florianópolis, 2001
ZICHERMANN, G; CUNNINGHAM C.. Gamification by Design. Sebastopol: O’Reilly,

2011.
142
143
O Design de Informação na Projetação de
um Website voltado à
Desenvolvedores de Jogos
Fabricio Arend Maica Pereira

Nathalie Coelho Crispim
RESUMO: O presente texto busca descrever a projetação da interface

do website “CubeJam”, enfatizando a aplicação do método dos 5I’s e a
utilização do conceito Design de informação. O projeto foi desenvolvido
pelos discentes no Laboratório Profissionalizante de Interface do Curso
de Desenho Industrial da Universidade Federal de Santa Maria. Este
website compreende a centralização das principais áreas constituintes
do desenvolvimento de jogos, criando um ambiente auspicioso aos
amadores que desejam aprimorar seus conhecimentos e, também,
auxiliando os principiantes em maratonas de desenvolvimento de jogos.
A proposta estimula-se nas experiências vividas dentro das atividades
promovidas pelo grupo do evento Game Jam de Santa Maria. Utiliza-
se como estudo para aplicação dos conhecimentos e metodologia
explicitados durante o laboratório. A metodologia 5I`s, que tem base
em autores como Garret (2011), Lowdermilk (2013) e Teixeira (2014). Ao
mesmo tempo, está interessado no conceito de Design da Informação,
com base em Jacobson (1999) e no artigo de Quintão e Triska (2013), que
sintetiza história, conceito e definições dessa área. Por conseguinte,
constata-se a importância do design de interface e do design centrado
no usuário no aprimoramento da experiência do usuário, assim como à
centralização e foco de conteúdo. Como principal resultado demonstra-
se o desenvolvimento do protótipo interativo.
1. O DESIGN DE INFORMAÇÃO: ORGANIZAR, TRADUZIR E APRESENTAR
Propôs-se durante o Laboratório Profissionalizante de Interface,

no primeiro semestre de 2019, uma pesquisa de seminário voltada ao
Design de Informação, buscando uma maneira de introduzir brevemente
uma definição e um objetivo da área no contexto do Design Gráfico.
Assim, esquematizando a noção vital de organizar, traduzir e apresentar
um projeto visando a maior assimilação do conteúdo pelo interator.
144
É imprescindível compreender os fatores fundamentais do
Design de Informação para usufruir de suas aplicabilidades, logo
resumiu-se o tópico a três perguntas primordiais: O que é? ; Por que
usar? ; e, Quando usar?; considerando a carga de informação passada e o
meio no qual o público-alvo é inserido, o entendimento desses conceitos
leva a facilitação da análise projetual, a fim de promover uma melhor
implementação do produto.
Inicialmente, adiciona-se sentido aplicando uma definição, todavia
a diversidade de conceitos expostos por diferentes autores torna
difícil a delimitação da área, apesar de todos convergirem inúmeras
vezes suas definições. Por exemplo, para (Lipton, 2007) interpreta-se “o
estudo e prática de se trazer clareza e compreensibilidade a produtos
visuais voltados a orientar, ensinar, explicar, ou informar”, enquanto para
(Jacobson, 1999) “ o designer de informação trabalha inicialmente com os
campos de significação, não com os materiais usados para o transporte
de significados”.
Ambos os autores concordam que o Design de Informação
procura pela compreensão do significado e como realizar a transmissão
da mensagem, mesmo que discordem quanto à responsabilidade do
envio da informação. Para fins de estudo, a definição que melhor integra
de maneira concisa é exposta pela Sociedade Brasileira do Design de
Informação (SBDI, 2008):
Design de Informação é uma área do Design Gráfico que
objetiva equacionar os aspectos sintáticos, semânticos e
pragmáticos que envolvem os sistemas de informação através
da contextualização, planejamento, produção e interface
gráfica da informação junto ao seu público alvo. Seu princípio
básico é o de otimizar o processo de aquisição da informação
efetivado nos sistemas de comunicação analógicos e digitais.
A aquisição de informação no contexto da sociedade atual encara

a falta de manejo, a necessidade da presença do Design de Informação
no trabalho cotidiano do designer acaba por evitar a saturação de
conteúdo ao usuário e auxilia na recepção do conteúdo relevante. Isso
é o direcionamento de conteúdo (Figura 1), ao direcionar a carga de
informação mantemos a tênue barreira entre gerador e consumidor, pois
no momento em que se perde o controle do fluxo da informação ocorre
a sobrecarga da capacidade cognitiva do usuário - falha na transmissão
145
do conteúdo. Para aprimorar a compreensão, o meio ao qual se atribui
a dispersão do conteúdo é vital, a escolha entre o digital e analógico
carrega diferenças nos meios de comunicação, audiência, signos e
canais.
Figura 1: Resumo esquematizado do fluxo do Design de informação (2019)
Fonte: autores
Dessa forma, visualiza-se a organização, tradução e apresentação

da informação pelos aspectos iniciais, como exemplificado pela (Figura
2). O aspecto sintático é a análise das relações, interpretar a relação e
similaridade para construir ganchos de memória e visuais, como aplicado
na Metodologia dos 5I’s, é o sistema cognitivo percebendo pelo passado
e contexto, pois reconhecer é mais fácil do que lembrar.
Figura 2: Infográfico exemplificando os aspectos do Design de informação (2014)
Fonte: (imagem criada por Jeniffer Gutierres, Behance
146
Já o aspecto semântico interfere na compreensão do significado
para o usuário, variando conforme a experiência e reconhecimento
gerados pelo primeiro contato de sintaxe. Por último, o aspecto
pragmático é aquele com o qual o designer irá trabalhar após identificar
os campos sintáticos e semânticos do conteúdo, desenvolvendo
direcionando de forma visualmente compreensível para o público-alvo.
No entanto, por que utilizar o Design de Informação? O designer
projeta objetivando desenvolver uma estrutura mais apropriada para
o tipo de informação a ser apresentada, dessa forma quanto maior a
assimilação de conteúdo maior o número de pessoas atingidas dentro
do público-alvo (Figura 3). Essa assimilação acontece devido a fluidez da
conexão, associação e hierarquia exposta ao usuário, utilizar os aspectos
mencionados facilitam a atender as expectativas do público de adicionar
a informação ao repertório e tomar uma decisão. O papel do designer
de informação é tentar minimizar ou eliminar frustrações durante o
cumprimento da tarefa.
Figura 3: Esquema de assimilação do Design de informação (2019)
Fonte: autores
Então, quando utilizar o Design de informação? Uma mensagem

bem transmitida é importante a qualquer momento, o designer deve
estar familiarizado com o conteúdo que irá desenvolver e procurar
interpretar a melhor forma de traduzir para apresentar. Podemos utilizar
o Design de Informação na construção dos mais diversos projetos,
marcas podem usufruir dos conhecimentos de fluidez de informação,
assim como comunicações durante entrevistas ou apresentações. Não
há restrições para o manejo organizado de informações, sendo o Design
de Informação abordado no website que inspirou este artigo.
147
Figura 4: Utilização do Design de informação (2019)
Fonte: autores
2. A IDEAÇÃO DO WEBSITE THE CUBE JAM
Seja o extremamente simples jogo de tênis desenvolvido por

Willy Higinbotham em 1958, ou o jogo das horas vagas SpaceWar de Slug
Russel, Wayne Witanen e Martin Graetz em 1962, até o símbolo cultural
dos anos 80: o fenômeno do Atari 2600 por Nolan Bushnell e lançado
em 1978, quem nunca foi deslumbrado pelos universos criados pelos
videogames? Os jogos prosperaram continuamente dentro do farto
mercado voltado para todas as idades, afinal, todos somos jogadores,
mesmo que casualmente. Essa evolução crescente tornou o mercado
de jogos atual, unido ao acesso cada vez mais fácil e diversificado, o
maior do mundo, superando, inclusive, o mercado do cinema. Segundo
a Newzoo, o mercado global de jogos chegou a lucrar US$ 150 bilhões
em 2019 com incremento de +9,6% em relação ao ano anterior, sendo
a maior concentração entre a China e os Estados Unidos (Figura 5).
Frente à difusão do mercado de jogos, abrem-se portas ao aumento
de profissionais interessados nas diversas áreas que compõem o
desenvolvimento de jogos.
148
Figura 5: Global Game Market (2019)
Fonte: Levantamento de dados realizado pela Newzoo, retirado diretamente do site
A despeito de existirem múltiplas fontes de informação para os

ingressantes do mercado de desenvolvimento de jogos, ademais as
diferentes oportunidades relacionadas a especialização de habilidades,
não é possível encontrar uma fonte vinculando todo o processo de forma
consistente. A título de exemplo, um interessado na arte para jogos não
saberá de sua dependência do game design, ou esse segundo, como
transmitir a informação com clareza ao programador. Dentro de um jogo,
o elo entre as quatro principais áreas de desenvolvimento deve ser
fluido, como explica o Design de Informação, a tradução do conteúdo
precisa ser voltada ao alvo, nesse caso, a linguagem do profissional de
cada âmbito.
Isto posto, o The Cube Jam procura centralizar o processo de
desenvolvimento de jogos para descomplexificar a organização,
tradução e apresentação do ambiente aos principiantes que desejam
adentrar o mercado de jogos. Entretanto, “como se tornar um designer
de jogos? Faça um jogo!”. Conectando a fala de Jesse Schell do livro
“The Art of Game Design” à ideia do Design de Informação, localiza-se a
filosofia do projeto. O The Cube Jam predispõe um foco em Game Jams,
as maratonas de desenvolvimento de jogos, pois, além de introduzir
os novatos, necessita-se favorecer o ganho de experiências, afinal não
deve-se ignorar o papel da experiência ainda que viabilizando uma
melhor assimilação do processo de desenvolvimento de jogos, apenas
compreender o procedimento não é o suficiente para tornar o iniciante
um profissional.
149
Para desenvolvimento da proposta, utiliza-se a Metodologia dos
5I’s proposta no laboratório de interface, seguindo as etapas do processo,
elucida-se através da formação de um briefing, composto por uma
série de perguntas, os objetivos e foco do projeto, conforme a filosofia
anteriormente explicada (Figura 6). Em consequência à ideia inicial bem
definida para a proposta do projeto, o estágio de briefing expressou-se de
forma clara, abrindo espaço para maior elaboração das fases seguintes.
Figura 6: Briefing: Objetivos, filosofia e foco do projeto.
Fonte: autores
Em decorrência da situação inicial bem definida, o brainstorming

voltou-se a investigar os elementos necessários para compor o design
centrado no usuário, como exemplificado pelo Design de Informação,
identificou-se a carga de informação a ser passada para o público-alvo
definido na etapa anterior e iniciou-se o processo de manejamento do
conteúdo (Figura 7).
Quais áreas são fundamentais ao desenvolvimento de jogos para
iniciantes? Pode-se dividir em quatro segmentos: arte, game design,
programação e música. Cada âmbito abundante em segmentos a serem
estudados conforme preferência do usuário, assim listou-se aqueles
com maior destaque. Por exemplo, arte é estruturada em nove parcelas
(Figura 8), dessas Pixel Art foi colocada fora do ambiente do 2D, por qual
motivo sendo um estilo do meio de duas dimensões? Essa forma de
arte é amplamente conhecida por sua baixa complexidade, acabando
por favorecer artistas menos experientes e, ainda por cima, é o estilo
relativamente simples de aplicar animação.
150
Figura 7: Organização de conteúdos do website (2019) - (Mapa mental e Sitemap, realizado com Miro)
Fonte: autores
Durante uma maratona de desenvolvimento de jogos não

há tempo para artes extremamente finalizadas, uma animação em pixel
art de quatro quadros acaba por finalizar um resultado consistente
e atraente mais rapidamente do que uma alternativa em cartoon ou
tridimensional. Por conta desses fatores, Pixel arte destacou-se dentro
do âmbito, assim os usuários podem localizar a informação concentrada
em um único local, inclusive durante as Game Jams.
O website enquanto ferramenta objetiva em trazer a informação
de forma rápida àquele que necessita, dessa maneira a aba de dicas
rápidas é ideal para entregar soluções velozes para possíveis problemas
durante uma maratona, por exemplo. Por fim, o brainstorming acabou por
organizar a carga de informação necessária para construção do projeto,
identificar as necessidades e realizar a análise sintática dos elementos
das Game Jams e desenvolvimento de jogos.
151
Figura 8: Subdivisões de categorias do âmbito Arte (2019) - (Mapa mental e Sitemap, Miro)
Fonte: autores
A ideação do projeto constituiu de apanhar a organização do

estágio anterior para buscar a construção semântica, como o público-
alvo vem recebendo os diversos conteúdos, quais mídias e linguagens
utilizadas. Encontrou-se referências nas páginas das maiores Game
Jams, presenciais e online, como a Global Game Jam e a Ludun Dare,
enquanto Itch.Io é hospedagem, venda e distribuição de jogos. Todas
interfaces voltadas aos usuários de computador, porém o aplicativo de
Jesse Schell “Art of Game Design: Lenses” também inspirou o projeto.
Uma análise heurística foi aplicada ao website da Global Game
Jam (Figura 9), visando um levantamento dos pontos fortes e fracos
da plataforma que proporciona o contato com os sítios de Game Jam
ao redor do mundo. Demais referências visuais destaque incluem:
“DogStudio” com sua interação e movimentação de tela; “Ubisoft”
e trocas de tela com menu simples; “B9”, cores atraentes e menu em
“cards”. Devido ao conceito visual idealizado inicialmente, DogStudio
foi selecionado para sofrer análise heurística da interação do usuário a
interface com “scrolling”.
Um mapa mental foi construído para verificação dos requisitos e
funcionalidades que a página deveria oferecer ao usuário, baseando-se
na listagem feita durante o brainstorming (Figura 6 e 7).
152
Figura 9: Interface site Global Game Jam (2019)
Fonte: Screenshot
Figura 10: Referências B9, ojetivando hover e cores.
Fonte: Screenshot
The Cube Jam é um espaço para o desenvolvedor de jogos, deve

ser convidativa e intuitiva, porém ainda divertida e interessante. Além
disso, as palavras-chave encontradas nessa etapa foram “otimização”,
“feedback”, “espaço” e “informação”. Vale destacar a importância da
ideia de “feedback”, dentro do projeto não é apenas o conceito de
responsividade, mas, sim, a percepção de erros e acertos nos jogos
executados pelos usufruintes da plataforma, além da divulgação dos
trabalhos, através de “reviews” e galeria dentro do website.
153
Figura 11: Atlas de Mnemosyne (2019) - (Conjunto de referências)
Fonte: autores
Destaca-se o requisito de produção de conteúdo pela organização

do projeto, trazer entrevistas e profissionais da área para falar de questões
de interesse do usuário.
Para melhor representar as funcionalidades e requisitos, gerou-se
uma persona representando o público-alvo desejado pelo projeto. Essa
persona deveria utilizar principalmente o computador, ser um jovem
iniciante dentro do desenvolvimento de jogos e possuir interesse em
participar de Game Jams. (Figura 12).
Aplicou-se junto ao público-alvo um questionário online, através
da ferramenta de formulários do “Google”, contendo vinte e quatro (24)
questões divididas em seções relacionadas às principais informações
relevantes ao projeto com intuito de testar o interesse, a experiência e a
forma de acesso a mídia e informações. O primeiro bloco coletava dados
básicos do questionado, baseado em seu interesse por uma plataforma
digital voltada aos conteúdos de Game Jams e desenvolvimento de jogos
o questionário iria continuar ou se encerrar.
154
Figura 12: Persona idealizada ao Projeto (2019) - Criada sem referência ou feedback de público-alvo
Fonte: autores
O segundo bloco investigava a participação e experiência,
avaliando com algumas perguntas quantitativas e várias em escala -
discordo completamente até concordo completamente. Por último,
perguntou-se as formas de acesso e a opinião dos questionados sobre
o quão intuitivos são as páginas que costumam acessar, também
verificou-se possibilidade de suporte, monetização e doações ao
desenvolvimento do projeto.
Figura 13: Gráficos gerados pelo questionário.
Fonte: autores
155
Os resultados geraram tanto dados esperados, quanto novos, que
foram utilizados para criação de novas personas e fortalecer os requisitos
e funcionalidades da interface (Figura 13). Ademais, todos os dados
contribuíram para justificar as escolhas da continuação da projetação,
inclusive na prioridade da ordem das etapas da metodologia. Mediante
decisão de tornar a interface globalizada, o questionário foi aplicado em
dois idiomas - inglês e português - para abranger a maior quantidade
possível de interessados. Grande quantidade dos correspondentes se
encaixam no sexo masculino, possuindo entre 21 à 25 anos de idade, tendo
participado previamente ao questionário de uma Game Jam e todos os
entrevistados afirmam que gostariam de participar de mais maratonas
de desenvolvimento no futuro.
Figura 14: Cartaz de divulgação Décima Game Jam de Santa Maria, RS (2019)
Fonte: Retirado da página do evento no facebook
Além do questionário, houve uma pesquisa de campo, onde foi

possível participar de uma Game Jam local (Figura 14) e interagir com os
correspondentes do questionário, realizando uma segunda análise entre
as respostas dos questionários e a real experiência vivida. Primeiramente,
é possível ver a dificuldade de integração de participantes sem grupo
pré-definido, apesar do processo de formação ser rápido e simples,
nem sempre os interesses do participante em ir na Game Jam podem
ser explorados adequadamente, já que o time disponível não possui o
mesmo foco.
O interesse do participante pode vir a influenciar fortemente seu
trabalho em equipe, como durante a maratona a exploração de ideias
deve ser feita da forma mais rápida e dentro das limitações de cada
integrante do grupo, aqueles que possuem dificuldade em refrear suas
156
próprias idealizações acabam por frustrar-se e, por vezes, abandonar a
atividade antes do final. Esse abandono pode acarretar em consequências
grandes ao grupo, ainda mais se a ideia não estiver dentro dos padrões
normalmente sugeridos pela organização, por exemplo, manter o jogo o
mais simples possível com a mecânica básica o mais bem estruturada,
evitando preencher demais e acabar sem nenhum produto no final.
Diferente de outras maratonas, nesta edição não houve nenhum
grupo sem produto, entretanto diversos enfrentaram o caso de não possuir
o produto minimamente viável, logo, as respostas ao questionário quanto
à compreensão da função e cumprimento do papel dentro da equipe
contrastam com a experiência real e apresentam uma abertura para a
falha na resposta dos participantes quando a sentirem necessidade de
um guia para realizarem seus projetos durante a Game Jam.
É evidente a dificuldade extrair a sintaxe da ideia, planejar a
execução no tempo e perceber os próprios limites de conhecimento
e dos colegas de equipe, e a utilização de ferramentas aos quais já se
está confiante e habituado. Ainda assim, mesmo não acreditando ser
necessário durante a maratona, todos os participantes expressaram sua
vontade de possuir um guia sobre como executar o projeto, entretanto
a pesquisa de campo indica que é possível alterar a opinião e tornar a
ferramenta verdadeiramente útil durante o evento.
Foram geradas mais duas personas para representarem os dados
coletados pelo questionário e pesquisa de campo.
Em The Cube Jam, os pontos de contato foram pensados a partir
dos locais onde os usuários poderiam estar estudando ou pesquisando,
além de participando de uma Game Jam. Como indicou a pesquisa, a
grande maioria dos questionados utiliza computador ou notebook, logo,
optou-se por não executar o “mobile first” e desenvolver uma interface
boa e atrativa em formato de website. Considerando as referências
iniciais de revistas, a decisão mostrou-se positiva e mais consistente com
os objetivos da filosofia do projeto.
3. INAMBULAÇÃO
Durante a fase de Inambulação, destacou-se o fator de usuários

que muitas vezes participam sozinhos de Game Jams, o que retomou a
ideia de uma área para auxiliar o usuário a encontrar uma equipe quando
desejado, tanto para Game Jams online, quanto para as presenciais.
157
Além disso, para avaliar a situação inicial do projeto, foi realizada uma
entrevista e teste de usuário com o professor Cássio F. Lemos do Curso
de Design de Jogos da Unifra, antigo professor de Design de Jogos
para o Curso de Desenho Industrial da Universidade Federal de Santa
Maria. Foram apontadas questões de visibilidade do menu, elementos
que deveriam estar dispostos junto das quatro principais áreas, como
galeria para gerar alcance aos jogos desenvolvidos durante a Game Jam
promovida pelo The Cube Jam; espaço para a comunidade, espécie de
fórum e perguntas frequentes; dar uma explicação do papel da área
antes ou depois do usuário acessá-la.
Partindo das personas, temos os seguintes requisitos atrelados
às tarefas: tenha uma interface intuitiva e convidativa; contenha notícias
sobre as diversas áreas do desenvolvimento de jogos; proporcionar uma
Game Jam online; forneça uma área para procurar equipes para participar
ou para que pessoas que não tem uma equipe fechada possam convidar
pessoas à participar da equipe delas; fale sobre games produzidos
em Game Jams; dê dicas sobre como se comportar e otimizar seu
desempenho em Game Jams; contenha entrevistas e dicas de pessoas
já dentro da indústria. Já as especificações técnicas, ou requisitos de
funcionalidade, com maior destaque: interface atraente e intuitiva; um
guia relacionado a Game Jams e forma de encontrar uma para participar;
resenhar e análise de jogos, principalmente dos feitos na Game Jam;
possua informações sobre as áreas do desenvolvimento de jogos.
A análise heurística aplicada sobre a interface da Global Game
Jam localizou falhas nos seguintes aspectos: não reflete em linguagem
ou estética o tema diversificado que aborda; interface sem identidade
própria, sem o logo na posição de banner não haveria indicação do tema;
o grande tráfego de usuário durante o evento acaba por sobrecarregar
o site e inviabilizar o envio de jogos participantes da edição até o final
do período de postagem do evento; não existem ícones de apoio para
nenhuma área do site, exceção para redes sociais; não oferece atalhos;
interface apresenta mensagem para login todo momento que se troca de
tela; não existe área de “ajuda” na página, apenas perguntas frequentes.
(Figura 15)
158
Figura 15: Resultados da Análise Heurística.
Fonte: autores
4. INSTAURAÇÃO DO THE CUBE JAM
Inicia-se este estágio utilizando a ferramenta MIRO para geração

e organização do sitemap (Figura 7) da interface, listando todas as
conexões das páginas. Esta etapa apresentou grande debate, devido
a dificuldade em integrar o tema a grande escala de informação, a
estrutura inicial foi modificada diversas vezes até chegar ao resultado
apresentado no primeiro protótipo.
Juntamente a organização do sitemap, foi-se desenhando os
wireframes para serem utilizados durante o cardsorting. Devido ao
requisito atraente e intuitivo, tornou-se inviável separar os processos e
optou-se por misturar, realizando a metodologia de forma cíclica ao invés
de linear. Esses wireframes continuaram sendo desenhados no papel em
formato de thumbnails mesmo após o início da utilização da ferramenta
para prototipagem.
O cardsorting foi realizado com dois usuários em potencial do
website, ambos com perspectivas diferentes quanto ao desenvolvimento
de jogos e funções e preferências distintas de área. Após o primeiro teste,
percebeu-se, através de debate, que havia uma quantidade excessiva
de “cliques” para chegar a um determinado local e a nomenclatura e
hierarquia de informação não estava suficientemente clara. Durante o
segundo teste surgiram mais pontos importantes para a construção da
estrutura final, como a necessidade de uma galeria mais visível e de fácil
acesso, integração de seções aos quatro âmbitos do desenvolvimento de
jogos e destacou-se a importância de um menu mais visível. Novamente
foram utilizadas thumbnails para procurar a melhor disposição dos
159
elementos em tela, dentro desse debate organizacional o menu foi
eliminado da página inicial, sendo ele inspirado em jogos e formando a
tela de introdução do website. Ainda, elementos foram realocados em
locais mais adequados e iniciou o desenvolvimento da ideia do menu
condensado sempre visível ao sair da página inicial.
O protótipo interativo começou a ganhar forma após muitas
tentativas de estruturas de página inicial, optou-se pela inspiração de
“huds” de videogames e alta responsividade de interações. Assim, a
página inicial foi construída enfatizando a marca centralizada e as quatro
áreas em ícones na parte inferior central da interface. O acesso rápido
ao perfil e a busca localizam-se no canto superior direito, enquanto
informações sobre o projeto são reveladas ao posicionar o cursor
do mouse sobre a marca. Cada ícone ilumina a interface em sua cor,
facilitando o reconhecimento da interação e iniciando o processo de
memorização pela cognição do usuário.
Após selecionar uma opção desse menu, o usuário é enviado para
a página contendo todas as áreas diagramadas ao estilo de revistas
digitais, como o site B9. Os tópicos se alinham com seus conteúdos mais
recentes e uma área de notícias acompanha a tela com as novidades e
curiosidades, um botão também acompanha conforme o usuário desce a
página, ele representa o acesso rápido a dicas e tutoriais. Essa estrutura
é utilizada em todos os quatro âmbitos do desenvolvimento de jogos.
4.1 Prototipação
A geração de alternativas para a página inicial (Index) em estilo de

“HUD” futurista se deu, primeiramente, através da geração de alternativas
simples, rabiscos em papel e posteriormente adaptadas para wireframes
até a seleção de um design satisfatório. Após estabelecimento do layout,
partiu-se para a instauração no software online UXPIN, como primeira
etapa do desenvolvimento geral da interface, pois esta seria uma parte
integral da plataforma uma vez que - mais do que apenas uma tela de
entrada - tenta estabelecer um vínculo, uma conexão com o usuário por
trazer elementos que podem ser reconhecidos por iniciados no mundo
dos jogos. (Figura 16)
Os vários elementos do index possuem animações, sendo feitos
em formato de “.gif” para garantir arquivos mais leves em relação às suas
contra-partes de vídeo, bem como o reconhecimento do formato pelo
160
UXPin. As animações instigam o usuário a focar no que está acontecendo
na tela - considerando que a atenção do seres humanos tende a ser
captada melhor por objetos em movimento -, além de garantir um
impacto visual visual forte àqueles que estão entrando em contato com
a plataforma pela primeira vez.
Figura 16: Menu na Página Inicial da Interface
Fonte: autores
Uma vez posicionando o mouse sobre os elementos do menu, sua

aparência é alternada de acordo com a interação, como, por exemplo,
ao selecionar algum dos quatro âmbitos do desenvolvimento de jogos, o
ícone representativo da área aparecerá na parte central da página, junto
de informações e tópicos instrutivos que os usuários poderão se deparar
ao acessá-la, exibidos nos retângulos alusivos a monitores na lateral
esquerda. A interface, também, mudará para a cor representativa da área
quando o mouse for colocado em cima do botão (cada um contando com
doze interações necessárias para fazer todas as interações, com exceção
do círculo central, contando com apenas sete), isso serve ao propósito do
Design de Informação de aliar a cor ao tópico e ainda ao ícone, fazendo o
usuário criar uma conexão destes elementos e facilmente compreender
para qual espaço da plataforma seria rapidamente enviado. (Figura 17).
161
Figura 17: Exemplo de interação ao passar o mouse sobre os ícones.
Fonte: autores
Ainda no index, ao descer a página o usuário encontra inicialmente

uma galeria dedicada a exibição de jogos feitos durante a Game Jam
ofertada pelo próprio site, como uma forma de apresentar ao novo usuário
a comunidade de frequentadora do website, buscando gerar interesse
de novos participantes. Continuando, encontra uma breve amostra de
cada área do desenvolvimento de jogos em sua respectiva cor e alguns
links para os artigos mais recentes adicionados àquele espaço, além das
notícias mais recentes. (Figura 18)
Figura 18: Imagens das demonstrações ao descer a página.
Fonte: autores
Ao selecionar uma das quatro áreas na página inicial, o usuário é

levado para local correspondente. Todas as páginas seguem um padrão
semelhante de diagramação (com algumas exceções, como as páginas
para encontrar Game Jams) e tentam manter uma consistência visual
com a página inicial. Como no index, o objetivo aqui também foi utilizar-
se de um impacto visual forte e elementos que retomam a ideia de “HUD”
para manter uma conexão, como é o caso de algumas formas e uso de
animações em “.gif” para ilustrar cada uma das sub-áreas internas de
cada página, tentando gerar um ambiente mais divertido e descontraído
162
para o público alvo. Uma das primeiras coisas que nota-se na maioria
das páginas (com exceção da página que fala sobre Game Jams) é a
grande ausência de texto, em sua maioria, pois foi optado por dar grande
ênfase à questão imagética para chamar a atenção do usuário ao colocar
o mouse sobre o “card”, revelando o título do conteúdo editorial para
o qual seria encaminhado. Opta-se por essa aproximação para tentar
atingir uma navegação “direto ao ponto”, o que facilita a seleção visual e
otimiza o tempo durante as Game Jams, eventos que costumam ter uma
janela temporal bem pequena para inclusão de longas leituras de texto.
(Figura 19)
Figura 19: Exemplo das páginas de Game Design e Música ao serem acessadas.
Fonte: autores
A página de Game Jam diferencia-se do padrão da maioria das

páginas, ofertando mais textos e menos imagens devido à sua natureza.
Sendo idealizada como uma concentração de informações relativas
ao comportamento durante uma Game Jam, como encontrar as mais
próximas ou online, e também, acessar a plataforma de montagem de
equipes, espera-se que o usuário acessasse essa área anteriormente à
Game Jams, o que proporciona tempo para leitura de textos de caráter
instrutivos. (Figura 20)
Nas páginas de localização de Game Jam, tanto online quanto
presenciais, é possível encontrar um calendário que marcando o dia
atual e os dias do mês de ocorrência de Game Jams. Ao clicar, a interface
mostraria quantos eventos foram encontrados naquela data (pois
podem haver mais de um acontecendo simultâneamente) e informações
referentes, no caso de presenciais, um mapa para mostrar a sua
localização. (Figura 21)
163
Figura 20: Página acessada para Game Jam.
Fonte: autores
Figura 21: Exemplo de página para encontrar uma Game jam presencial.
Fonte: autores
Todas as páginas contam com um menu superior sendo mostrado

a todo instante, inclusive ao descer a página. Nesse menu, o usuário tem
fácil acesso à todas as áreas do site e ele também é responsivo às cores
de cada área, modificando-se para auxiliar o usuário na identificação
rápida da página que ele se encontra, uma vez que essa conexão já havia
sido previamente estabelecida no Index do site. (Figura 16)
164
Figura 22: Acesso ao perfil para login.
Fonte: Autores
A galeria apresentaria um jogo em destaque, selecionado dentre

os participantes da “The Jamming Cubes” (Game Jam fictícia da página)
que também fossem colaboradores financeiros com o projeto através
do sistema de doação. Isso serviria com um propósito duplo: 1) Dar
reconhecimento aos colaboradores quando estes fizessem um trabalho
exemplar; 2) Fazer com que usuários não colaboradores viessem a
interessar-se em colaborar para ter o seu jogo em destaque. Além
disso, gera-se uma competição saudável (apesar de esta Game Jam
não ser uma competição de fato) entre os usuários, visando o desejo
de sempre melhorarem seus projetos de maratona, para chegarem ao
ponto de destaque, porém, ainda mais importante que isso, melhorarem
suas habilidades nas áreas em que atuam e gostariam de atuar no
desenvolvimento de jogos. (Figura 23)
Figura 23: Página de Galeria e relação de coleção.
Fonte: Autores
165
4.2 Design sensorial, reconhecimento e associação
Ao invés de preocupar-se com adição de inovações, as interfaces

sensoriais consistem na implementação do aumento de mapas sensoriais
dentro do objeto. Assim como o Design de Informação, o Design sensorial
também busca traduzir um conteúdo àquele que consumirá o produto,
logo é importante entender os elementos dos sentidos humanos -
visão, tato, olfato, paladar e audição - e compreender a semântica do
objeto, além de sua utilização. Conforme mencionado anteriormente,
desenvolveu-se a interface separada por áreas com suas respectivas
cores e com alto nível de interação e movimento, essas escolhas
influenciam-se pela relação emocional que os estímulos sensoriais
proporcionam ao usuário.
A memória visual é constantemente incentivada no universo
dos jogos, os jogadores identificam mais rapidamente itens ou outros
elementos dentro do espaço de jogo devido a semelhança por ícones ou
associação de outros jogos, assim dentro do “The Cube Jam” ao optar-se
por um menu semelhante a “HUD” de videogames, os usuários, também
jogadores, poderiam ativar o reconhecimento e facilitar sua compreensão
de como movimentar-se pelo espaço. Esse reconhecimento ocorre
por conta das experiências prévias com jogos, um usuário não jogador
acaba por não possuir a mesma lógica e facilmente poderia acabar mais
confuso quanto a disposição de elementos, entretanto, para este, utiliza-
se de outros artifícios, como, por exemplo, ícones bem representativos
de cada tópico.
Segundo a avaliação durante teste com usuários e a turma
do laboratório de interface, foi possível reparar o quão impactante o
sistema proposto é para ambos os públicos (jogadores e não jogadores),
considerando que para os não jogadores apesar de ser visualmente
atraente ainda não é tão compreensível, enquanto para aqueles que são
jogadores se tornou intuitiva a movimentação e compreensão do que são
e o que não são botões clicáveis. Ainda assim, retornando aos elementos
de reconhecimento, o menu dentro do index é um chamariz visual,
sendo simplificado após descer a página ou mudar para áreas dentro do
website, logo os usuários não necessitam ter grande preocupação em
compreender profundamente o espaço.
Todavia, adentrando os espaços da interface, a brincadeira inicial
do index não deixa de influenciar, pois ainda existe o uso do recurso das
166
cores. O contato inicial com o menu de entrada auxilia todos os usuários
a ativarem a associação, cada área sendo uma cor sempre predominante
quando apresenta-se um assunto relacionado. Ao posicionar o cursor do
mouse sobre qualquer elemento do menu condensado, ele altera para a
cor da respectiva área, assim como dentro do index ao realizar o “hover”
sobre o ícone.
Ao mencionar a interação do mouse com o ícone, retoma-se a
importância das diversas interações dentro do website em geral. Um
espaço voltado para jogadores precisa incluir um grande feedback visual
de funcionamento dos elementos, pois dentro dos jogos é comum uma
resposta imediata a qualquer ação realizada, se nada ocorre o usuário
tende a associar como falha e buscar outra alternativa, ou ainda ficar
confuso e desistir. “The Cube Jam” utiliza-se de fortes interações dentro
do index, deixando bem claro ao jogador quais opções ele possui para
interagir, enquanto dentro dos demais ambientes as interações são
sutis para não atrapalhar a pesquisa e estudo. Toda a construção ao
redor da interação e reconhecimento visual, torna o website dinâmico e
interessante, o usuário possui algo para atrair seu olhar.
Por conseguinte, o website foca em elementos visuais para sua
formação, apesar de num futuro ser interessante a adição de efeitos
de som para aumentar o feedback e iconografia para erros, além de
um botão visível para retornar ao topo e a página anterior. Ademais, os
comentários dos usuários foram em sua maioria positivos, adicionando
críticas bem similares para melhorias, porém sempre adicionando o quão
esteticamente atraente apresentou-se o produto.
4.3 Desafios da Instauração
O maior desafio de instauração do protótipo da plataforma foi a

quantidade de interações necessárias para fazer aquilo almejado e
a necessidade de utilização de Gifs feitos por terceiros. Por melhor
que seja a plataforma do UXPin (que está sempre sendo atualizada,
adicionando conteúdos e opções novas), existem ainda muitas
limitações nas possibilidades, existindo maneiras muito mais rápidas
e fáceis de implementar certos elementos se houvessem recursos de
programação (como Java Script, por exemplo) para serem utilizados
167
durante a prototipagem. Essas limitações forçaram soluções diferentes
ao problema, o que tornou tarefas outrora simples em grandes blocos de
interações sequenciadas de forma algorítmica repetiram-se para cada
botão.
Outro problema reconhecido é o mau funcionamento visualmente
de elementos ou comportamentos inesperados de tempos em tempos,
devido a forma como o próprio UXPin processa a informação, gerando
estranhamento por parte do usuário e diminuindo a integridade do
protótipo para aqueles que não tem conhecimento da complexidade de
implementação de websites, como “The Cube Jam”, ou a forma como o
UXPin comporta-se nativamente.
Dito isso, porém, ainda é imprescindível dizer que o UXPin é uma
excelente plataforma para prototipagem, oferecendo todos os seus
recursos de desenvolvimento online pelo acesso à página ou baixando o
aplicativo para desktop, de forma gratuita. Adicionando apenas algumas
limitações após o período de teste terminar, porém não impossibilitando
a realização de projetos com uma documentação auxiliar razoável para
quem está começando a utilizá-lo.

4.4 Iconografia
A construção da iconografia do website foi mencionada durante

todos os demais tópicos deste artigo, contudo para uma melhor avaliação
e exibição do processo, optou-se por descrever melhor o processo
de construção. Assim, iniciamos falando sobre a primeira ideação dos
ícones: Pixel Art. Já dito que a estética de Pixel Art costuma estar muito
presente nas maratonas de desenvolvimento de jogos, foi-se idealizado
o aproveitamento dentro da interface como outro elemento associativo
para o público. Mas, os ícones não apresentaram um resultado satisfatório
ao serem integrados dentro da interface, gerando contraste negativo
com os elementos circulares e vetoriais implementados. (Figura 24)
Figura 24: Primeira geração de ícones do projeto.
Fonte: autores
168
Após, tentou-se modificar os ícones para formatos mais
arredondados, ainda utilizando a estética de Pixel Art. Ainda assim, não
obteve-se sucesso. Iniciou-se alguns garatujas utilizando o aplicativo
Procreate para rabiscar novas concepções. Finalmente, os resultados
tomaram um rumo mais próximo daquele desejado para o projeto.
Os ícones finais foram simplificados ao máximo tentando não
perder elementos de reconhecimento, acabaram por serem vetorizados
para conversar com a estética geral da interface. Os fones representam
a área da música, imersão; o pincel com o godê para a Arte, expressão
e criação; um antigo controle de atari para Game Design, controle do
processo; e um computador antigo para programação, representando
uma parte pouco vista o processo, mas presente a muito tempo não só
em jogos. (Figura 25)
Figura 25: Ícones das quatro áreas finalizados em vetor.
Fonte: Autores
A marca foi criada seguindo um cubo mágico, pois é necessário

treino, raciocínio e memória para solucionar o enigma. O desenvolvimento
de jogos é um processo por vezes longo e demorado, mas muitos
profissionais aperfeiçoam suas áreas para executar tarefas de forma
acelerada, assim como durante Game Jams, onde a velocidade é
essencial. Logo, o cubo representa a paciência e prática, é uma analogia ao
processo e ao desenvolvimento do novato da área de desenvolvimento
de jogos. A cada novo jogo feito, outro conhecimento é adquirido, assim
como na resolução do cubo. A marca contém todas as cores das áreas
do desenvolvimento de jogos para deixar ainda mais forte o elemento
visual. (Figura 26)
169
Figura 26: Marca final.
Fonte: Autores
5. INSPEÇÃO: A ADIÇÃO DE TESTES COM USUÁRIOS
Devido ao longo processo de prototipação, o teste com usuários

só pode ser realizado tardiamente na apresentação final do laboratório.
Ainda assim, foram realizados dois testes com usuários com experiências
distintas no desenvolvimento de jogos e participações em Game Jam.
Aqui menciona-se apenas o primeiro teste, que foi realizado com
uma usuária participativa do universo dos jogos, joga frequentemente
principalmente por console (PS4, Nintendo Switch), além de já ter
participado em ao menos uma Game Jam anteriormente ao teste.
Primeiramente, pediu-se a usuária para localizar a área de arte - sua
maior afinidade - e dentro desta área localizar tópicos sobre animação.
Conseguiu localizar-se bem até o momento de encontrar a parte de
animação e procurou inclusive no menu superior condensado, devido a
não existir um tópico específico a usuária afirmou não compreender bem
onde ela deveria procurar pelo assunto dentro dos âmbitos existentes.
Na sequência, pediu-se para buscar uma Game Jam presencial ou
Online, ela conseguiu chegar ao ponto de localizar uma Game Jam sem
grandes problemas e ocorreu de partir da página de arte onde estava
anteriormente. Foi requisitado que tentasse acessar seu perfil e não
houve problemas, achar notícias também. Pediu-se para achar o jogo em
destaque da última Game Jam promovida pelo site, a usuária localizou
170
dentro da Galeria sem nenhuma dificuldade. Ainda, foi pedido que
encontrasse a área destinada a formação de times, ela localizou, porém
teve dificuldades em compreender se deveria clicar em “Join” ou “Team
Builder”. Também conseguiu retornar ao menu principal sem nenhum
problema utilizando a marca do projeto.
Comentários adicionais pós-utilização a respeito de visual, a
usuária afirmou que a interface é esteticamente atraente e conversa
bem com a temática proposta, possuindo cores bem chamativas que
auxiliam na compreensão e mantém o tema forte. Continuou sobre
os ícones, afirmando serem intuitivos e que teve a sensação de tudo
dentro da interface ser interativo e clicável. Sobre o conteúdo, disse que
a apresentação foi limpa, não havia sobrecarga e muito bem dividido,
mesmo com pequenos detalhes que poderiam ser adicionados como
tópicos nos âmbitos de desenvolvimento. Como críticas, a usuária diz que
preferiria um aumento nos espaçamentos entre os âmbitos dentro das
páginas das quatro áreas, gerar maior área de respiro; separar melhor as
áreas, respectivamente arte ficou muito voltada para conceitos e estilos.
Todavia, o tamanho não incomodou a usuária, mas o ícone para dicas
rápidas passou despercebido e ela recomenda uma maior valorização
da área. Quanto às interações, referiu-se dizendo que apreciou a
possibilidade de mexer e obter respostas visuais, adorou o fato de tudo
ser muito clicável, porém deixaria a seta indicando que é possível descer
a página inicial mais visível. Concluiu afirmando que utilizaria bastante
o site, principalmente por ser esteticamente agradável e incluir muita
informação no mesmo local sobre sua área de interesse, a iluminação
e cores são agradáveis e não se sentiu incomodada por glitches e gifs,
acredita ser um espaço muito equilibrado e pouco poluído, segue uma
boa fluidez de conteúdo. As iconografias são intuitivas e apresentam o
que se espera, além disso se divertiu com o teste e esperava que as
matérias fossem reais.
CONSIDERAÇÕES FINAIS
A apresentação da interface para a turma do Laboratório

Profissionalizante de Interface rendeu diversos comentários positivos
e críticas para melhoria do produto final. A interface foi recebida
positivamente, os alunos apresentaram interesse pela proposta e pelo
apelo visual, entretanto levantou-se a necessidade de prever um público
171
com problemas de acessibilidade e epilepsia (devido aos glitches).
Essas questões já haviam sido discutidas previamente, entretanto para
construção do protótipo foram deixadas de lado temporariamente,
considerando a implementação real do produto a análise de tempo de
exibição do menu index e teste com usuários com necessidades especiais
ou problemas de epilepsia seriam necessários para chegar ao melhor
resultado final. Comentários quanto ao tamanho dos elementos em tela
variam entre os alunos e os usuários, os alunos argumentaram em defesa
de uma redução dos elementos na tela, para melhorar a visualização,
em oposição, um usuário real afirmou não sentir-se incomodado nem ver
necessidade na mudança de tamanho dos elementos, apenas concordou
com a turma do laboratório sobre aumento de espaçamento entre os
tópicos das áreas dentro dos âmbitos.
Os testes com usuário foram realizados tardiamente em relação ao
desenvolvimento do protótipo, mas as argumentações coincidiram com os
aspectos analisados pelos alunos de interface e pelos desenvolvedores
do projeto. Não pode-se adicionar alterações devido ao período de
tempo de desenvolvimento do projeto para o laboratório, mas todas as
observações foram anotadas para caso o projeto continuasse no futuro.
O projeto foi complexo para desenvolvimento, entretanto adicionou
grande carga de conhecimento ao grupo idealizador. Explorar a
possibilidade baseado na experiência real foi uma prática que acarretou
maior domínio de processos para ser aplicado em diversas disciplinas
futuras do Curso de Desenho Industrial, além do aprimoramento da
compreensão de interfaces, do design voltado para o usuário e como
entender as necessidades e traduzi-las para o público alvo, ainda a
aplicação do Design de Informação como parte integral de todo o
processo. A experiência foi considerada um sucesso apesar de críticas
e falhas de desenvolvimento, o protótipo ainda possui elementos o
suficiente para ser visto e analisado por possíveis investidores ou curiosos
interessados como exemplo de desenvolvimento de projeto de interface.
REFERÊNCIAS
Sociedade Brasileira do Design de Informação. Disponível em: <http://sbdi.org.br/

sobre/> Acesso em junho de 2019.
JACOBSON, R. E. Information Design. MIT Press, 2019.
FALCÃO, F. S.; Martins, Anny Caroline Castelo Branco. Card sorting e teste de
172
performance: Técnicas para compreender e avaliar o entendimento da informação
pelo usuário. InfoDesign, Revista Brasileira de Design de Informação, 2019.
QUINTÃO, F. S.; TRISKA, R.. Design de informação em interfaces digitais: origens,

definições e fundamentos. InfoDesign, Revista Brasileira de Design de Informação,
2013.
CHANG, A.; HIROSHI, I.. Sensorial Interfaces. DIS 2006, June 26–28, 2006, University
Park, Pennsylvania, USA.
Equipe Educamundo. Mercado de games no Brasil: conheça o setor que fatura

bilhões por ano. Março de 2019. Acesso em: <https://www.educamundo.com.br/
blog/mercado-games>
NEWZOO, infographics. 2019 Global Games Market per Region.
História de Tudo. História dos Videogames. Acesso em: <https://www.historiadetudo.

com/videogame>
173
174
Findtype – uma interface gameficada
para introduzir e aprofundar no
universo da tipografia
Lucas Pozzobon
RESUMO:
1. INTRODUÇÃO
O presente artigo tem como intuito descrever, a partir da
metodologia dos 5I’s, o processo de projetação da interface Findtype,
desenvolvida no laboratório de Interface do Curso de Desenho Industrial
da Universidade Federal de Santa Maria (UFSM) sob orientação da
professora Débora Aita Gasparetto, autora da metodologia que tem
bases em (Garret, 2011), (Lowdermilk, 2013) e (Teixeira, 2014).
Findtype é uma interface gameficada elaborada com o propósito
de introduzir ou aprofundar o usuário no universo da tipografia, através
de exercícios interativos com viés educativo.

2. METODOLOGIA
A metodologia dos 5I’s, a qual esse artigo se ampara, foi

implementada em 2016, no Laboratório de Interfaces DI/UFSM, para
auxiliar no desenvolvimento de interfaces tendo como foco o usuário. As
fases que compõe o percurso metodológico são: Ideação; Inambulação;
Instauração; Inspeção e Implementação. Todas essas fases requerem
iteração, testes e pesquisas com usuário com intuito de facilitar e
minimizar problemas nas fases finais.
A estrutura da metodologia foi arquitetada a partir dos planos
de (Garret, 2011) para facilitar experiência do usuário, no design
centrado no usuário de (Lowdermilk, 2013) e nas orientações práticas
de (Teixeira, 2014).
175
2.1 Fase 1 - Ideação
A partir do entendimendo dos processos da metodologia adotada

iniciou-se o projeto da interface aqui proposto. Na fase de ideação, a
primeira etapa do projeto foi responder as seguintes questões para
identificar o problema e nortear o projeto:
Problema: Dificuldade de encontrar jogos de tipografia em uma

interface centralizada que apresentem viés educativo.
O quê: Uma interface que aborde o tema com um layout mais
atrativo e intuitivo.
Como: Desenvolvendo uma estrutura simples e intuitiva utilizando
técnicas de gamificação para engajar e desafiar o usuário.
Porquê: Para difundir e ampliar noções sobre tipografia.
Para quem: Para estudantes de design, designers, publicitários e
amantes da tipografia.
Por quem: Pela tipografia
Em que lugar: Em todos os lugares onde se possa ter contato com
um computador ou um smartphone.
A partir dessas diretrizes deu-se início a etapa de brainstorm, Com

esse processo começaram a surgir diversas ideias - tanto referentes
ao desenvolvimento da interface, quanto para o nome da mesma. No
decorrer da presente etapa ficou definido que o conceito chave do
projeto seria criar uma interface com exercícios interativos, abordando a
temática da tipografia. Foi, então, estabelecido que a interface teria três
jogos principais, porém, deixando aberta a possibilidade de adição de
novos jogos posteriormente. Durante essa geração de ideias foi definido,
também, o nome Findtype para a interface, que remete a ideia de procura
e busca por tipografias.
Para avançar na fase de ideação realizou-se uma pesquisa de
referências, buscando encontrar, mapear e analisar outras plataformas
que abordassem o tema proposto. Além de uma busca por referências
visuais para estabelecer um padrão gráfico. A metodologia propõe o
uso do Atlas Mnemosyne, método utilizado por Aby Warburg (2015) que
se assemelha a um moodboard (quadro de referências que serve para
mapear pontos em comum e guiar a fase de desenho do projeto).
176
Dentre a interfaces encontradas nessa pesquisa, destacam-se
as apresentados nas figuras 1, 2 e 3, que serviram como inspiração e
conduziram o rumo que a interface proposta tomou. Uma delas é o Type
Method com o jogo Kerntype, onde são apresentadas palavras com o
kearning² desajustado para o usuário fazer o ajuste ótico manualmente.
Em cada fase o usuário recebe um feedback visual, onde seu kearning é
comparado com o original, e outro através de uma nota de acordo com
o desempenho. Ao longo das dez fases o usuário vai sendo testado com
níveis diferentes de dificuldade.

Figura 1 - Tela inicial do Kerntype, interface gameficada para ajuste manual de kearning e Feedback com
nota mostrando o kearning do usuário e o original sobrepostos.
Fonte: Screenshot
Outra inferface que serviu como referência foi a Better Web Type,
que reúne uma série de informações sobre tipografia para Web, além
de alguns jogos, como um quiz sobre tipografia para web e um jogo de
memória com diferentes tipografias, o que pode ser conferido na (Figura
2), chamado Font Memory Game.
177
Figura 2 - Tela inicial do Font Memory Game do Better Web Type.
Fonte: Screenshot
E, também, outro jogo, chamado The Equilateral Triangle of a

PERFECT PARAGRAPH onde o usuário deve, a cada fase, ajustar blocos de
texto para web, definindo o espaço de entrelinhas, a largura do parágrafo
e o tamanho de diferentes fontes.
Figura3 - Tela inicial do jogo The Equilateral Triangle of Perfect paragraph.
Fonte: Screenshot
Ambos os jogos do Better Web Type, supracitados, funcionam

bem e têm um viés educativo, que vão ae encontro do que é buscado
pela interface aqui planejada, desafiando o usuário a testar seus
conhecimentos, porém, não é possível verificar as respostas certas
quando você erra.
178
2.2 Fase 2 - Inambulação
Na fase de incubação o projeto começa a se deparar com questões

práticas da interface, como: definição de requisitos, funcionalidades,
análises de referências e quais tecnologias usar. Os requisitos da
interface são as demandas do usuário, o que eles necessitam. Portanto,
com base nas especifidades do projeto e, por ser voltado para designers
e estudantes, optou-se por suprimir algumas etapas da metodologia
para otimizar o processo.
As premissas que orientam o projeto deveriam vir das personas
mas, nesse caso, foram sendo definidas ao longo do desenvolvimento
do projeto através de testes com os usuários. Grande parte dos testes
foi realizada com a turma do laboratório, usuários potenciais, sendo que
são estudantes de design. Ao longo dos testes foi possível ir averiguando
as seguintes demandas como requisitos dos usuários, entre elas:
aprender sobre tipografia, entender melhor classificações tipográficas,
ter instruções e dicas sobre tipografia, ter acesso a resposta certa, caso
tenha errado.
Já as funcionalidades referem-se as especificações técnicas e
acabaram por restringir o projeto, inicialmente, somente a navegadores
desktop, por conter muitas informações que poderiam se perder e
empobrecer a experiência do usuário em telas pequenas.
As principais funcionalidades verificadas durante os testes foi ter
acesso as instruções ao longo dos jogos, ter acesso as respostas certas
e comparar com as erradas, possibilidade de compartilhar os resultados
e a visualização de telas com diferentes contrastes.
Outra etapa da fase de inambulação é a análise heurística,
apresentada por Rolf Molich e Jakob Nielsen em 1990. As Heurísticas
de Nielsen, com perguntas simples e objetivas, têm a finalidade de
serem empregadas para verificar de forma rápida e prática os problemas
inerentes a uma determinada interface.
Mesmo os melhores designers só produzem produtos de

sucesso se seus projetos resolverem os problemas certos. Uma
linda interface com os recursos errados irá falhar. (Nielsen, 2007,
tradução nossa)
O Kerntype do Type Method foi a plataforma escolhida para essa

análise por se tratar de uma interface simples, intuitiva e que cumpre os
179
requisitos educativos, alinhando-se a proposta de interface a ser gerada
e por apresentar feedback sobre a resposta do usuário.
A partir da análise da interface, seguem os seguintes apontamentos:
Figura 4 - Análise Heurística
Fonte: autor
O software utilizado para criar as gerações de layout iniciais foi

o Illustrator, software da Adobe voltado para confecção de arquivos
vetoriais, como ilustrações, diagramações básicas e gráficos. Isso
porque o projetista já tinha familiaridade com o software e está inserido
no mercado, tendo um ritmo de demandas mais intenso, por isso sentiu
segurança em avançar algumas etapas. Logo em seguida, após alguns
testes de usuários já realizados, no quesito de design sensorial sobre
botôes e informações básicas, os esboços começaram a ser criados no
XD, Ferramenta da Adobe para prototipação de interfaces.
O Adobe XD possibilita que o projetista consiga montar toda
a interface, já responsiva, de forma que já gere interações e
microinterações a partir do direcionamento dos botões. É uma
ferramenta bem completa e que vem sendo uma das mais utilizadas
na prototipação de interfaces nos últimos anos, principalmente por
permitir que o projetista consiga criar, mesmo sem conhecimentos em
programação, um protótipo funcional.
As plataformas tecnológicas utilizadas para implementação do
produto final envolvem HTML, que é uma linguagem de marcação e
180
compõe a estrutura da página; CSS, que é um mecanismo de estilos e
interações, e Javascript, que é responsável pelo restante das interações.
2.3 Fase 3 - Instauração
Nessa fase, antes de iniciar os sitemaps e rabiscoframes, conforme

a metodologia, optou-se por escrever um roteiro da interface e dos jogos,
apenas descrevendo, resumidamente, como ela iria funcionar. Isso porque
a interface é gamificada e era necessário, antes de seguir oprojeto definir
estratégias. Na metodologia, sugere-se que essa definição aconteça
ainda na primeira fase, de ideação, mas aqui o autor teve liberdade para
adequar a metodologia ao processo criativo. Segue abaixo um roteiro
descrevendo o que o usuário encontrará em cada tela:
Ao acessar a interface, o usuário irá se deparar com uma tela inicial
dividida em cards com cada um dos jogos disponíveis. Inicialmente serão
três e nessa mesma tela já será possível ver um breve tutorial, através de
microinterações, para guiar o usuário quando ele passar o mouse sobre
cada card. A escolha de qual jogo será jogado é livre e cada card terá um
botão direcionando para o mesmo.
O primeiro jogo terá como intuito fazer com que o jogador
perceba singularidades de tipografias de classificações parecidas. Será
apresentada uma palavra (sempre relacionada ao universo da tipografia)
com fontes diferentes em cada caractere. O objetivo do usuário é ir
alternando essas letras através das setas ou com o mouse para deixar
todas as letras da palavra com a mesma fonte.
O segundo jogo trabalhará com tipografia variável, será
apresentada uma palavra com pesos e larguras diferentes nas letras,
o jogador terá que se basear na primeira letra da palavra e variar as
mensurações das letras seguintes através de barras para cada medida.
O terceiro jogo apresentará uma palavra durante três segundos
mostrando uma barra para indicar o tempo de visualização da palavra.
Logo em seguida essa palavra some e um segundo depois aparece
escrita quatro vezes com tipografias parecidas, porém distintas entre si,
o usuário deve então, escolher com qual tipografia a palavra havia sido
apresentada. Todos os jogos apresentarão a pontuação a cada fase e
haverá a possibilidade de compartilhar a nota em rede sociais no final.
Com essas informações em mente começaram a ser
desenvolvidos os primeiros esboços da interface. O SiteMap e os
181
Rabiscoframes foram sendo criados simultaneamente nos esboços,
já com a arquitetura de informação e o design de interação em mente
para otimizar o tempo que essas quatro etapas levariam. Ao mesmo
tempo foram sendo feitos testes com os usuários para validar as
escolhas e definir os fluxos da interface.
A elaboração do processo de Design Sensorial foi pensado para
passar simplicidade e deixar o foco do usuário totalmente voltado
para as tipografias dos exercícios/jogos. As escolhas cromáticas foram
adotadas para conferir bastante contraste, sendo elas: preto, branco,
tons de cinza e azul. A tipografia padrão adotada foi a Titillium, família
tipográfica desenhada por Diego Giusti na Accademia di Belle Arti Urbino,
é uma webfont otimizada para tela e está disponível na biblioteca do
Google Fonts.
Espaço na tipografia é como o tempo na música. É infinitamente

divisível, mas alguns intervalos proporcionais podem ser muito
mais úteis do que uma escolha ilimitada de quantidades
aleatórias (BRINGHURST, 2005).
As instruções e informações básicas, em todos os jogos,

concentram-se sempre do lado esquerdo da tela para manter um padrão
de consistência entre as telas. As escolhas de tamanhos de fontes
tomaram como base o tamanhos mínimo de 19px como referência para
os textos menores. O restante foi definido a partir do uso de uma escala
modular, neste caso foi adotada a sequencia fibonacci. Robert Bringhurst
(2005) aponta que “Uma escala modular é um conjunto preestabelecido
de proporções harmoniosas, como uma escala musical”, enfatizando que
é necessário que as escolhas, tanto dos espaços quanto dos tamanhos
dos elementos e textos não deve ser aleatória.
2.4 Fase 4 - Inspeção
Nessa fase foram realizados testes com usuários do laboratório e

também aconteceu uma sintonia com o programador, que ajudou muito
na tomada de decisões. Entre os testes, notou-se que era necessário um
menu de acesso rápido a todos os conteúdos e também a elaboração
da responsividade, pois atualmente os dispositivos móveis são vias
importantes de acesso ao conteúdo.
182
2.5 Fase 5 - Implementação
Essa fase será desenvolvida como projeto de TCC e começará a ser

implementada no segundo semestre de 2019. Conforme metodologia,
ainda serão feitas novas inspeções a partir de testes com usuário antes
de começar a implementar a interface definitiva.
Por fim, acredita-se que o resultado foi satisfatório no que concerne

ao laboratório orientado, cujo aprofundamento da própria metodologia,
permite ajustes e certa independência. Certamente o trabalho ganhará
mais aprofundamento no contexto do TCC, orientado pelo professor
Volnei Antônio Matté, com foco na tipografia.
REFERÊNCIAS
BRINGHURST, R. Elementos do estilo tipográfico. Editora Cosac Naify, 2005.
and Beyond. Second Edition. Berkley: New RidersPress, 2011
LOWDERMILK, T. Design Centrado no Usuário: um guia para o desenvolvimento

deaplicativos amigáveis. São Paulo: Novatec Editora,2013
NIELSEN, J; MOLICH, R.. Heuristic evaluation of user interfaces. In: Proceedings of

the SIGCHI conference on Human factors in computing systems. ACM, 1990. p. 249-
256.
NIELSEN, J. The Myth of the Genius Designer. Disponível em: https://www.nngroup.

com/articles/the-myth-of-the-genius-designer/ Acesso em 15/08/2020
SPIEKERMANN, E. Stop Stealing Sheep & find out how type works. Pearson
Education, 2014.

2014.
183
184
Projeto Aplicativo para leitura de Mangás e
Comics (Yume)
Valentina Montenegro da Silva

Revisado por Milena Dutra Kosciuk
RESUMO: O propósito deste artigo é estudar o desenvolvimento de uma

interface para aplicativo centrado nos usuários que utilizam o telefone
celular para leituras de mangás e histórias em quadrinhos. A metodologia
dos 5I`s que está sendo utilizada no Laboratório de Interfaces do Desenho
Industrial da Universidade Federal de Santa Maria foi desenvolvida pela
professora Débora Aita Gasparetto e mescla etapas propostas pelos
autores Garret (2011), Lowdermilk (2013) e Teixeira (2014) . Como resultado,
pretende-se desenvolver uma interface de aplicativo que atenda todas
as necessidades citadas pelos usuários através de pesquisas.
1. INTRODUÇÃO
As revistas em quadrinhos fazem parte do crescimento de várias

gerações, dentro de suas características seus próprios heróis nascem
nessa versão moderna de mitos. Entretanto, por muitas vezes é inviável
logisticamente transportar ou armazenar dezenas de volumes de
histórias em quadrinhos, o que acaba por torna-se desinteressante o
investimento de tempo e dinheiro nestas coleções, como uma alternativa
para contornar este cenário, a tecnologia abriu um caminho, através de
aplicativos móveis, para simplificar a vida dos colecionadores. Os avanços
tecnológicos não fizeram essa paixão por colecionar as histórias de heróis
se ruir, ajudaram a se adaptar. Por causa desse alcance, abrangência
e funcionalidade, a leitura digital é cada vez mais considerada como
prática utilitária, pois permite que qualquer conteúdo seja acessado em
qualquer parte do planeta, a qualquer hora, por um ou vários leitores.
A palavra “comics” vem da expressão inglesa que pode ser
traduzida como cômicos, isto por que, originalmente, as comics só
traziam comédia no enredo. Como tudo evolui, hoje em dia as comics
trazem vários temas, desde horror até romance. Mas o gênero mais
185
famoso é ação, em especial os de super heróis. Uma característica
importante das comics é a riqueza dos detalhes e as cores. Já os mangás
são as histórias em quadrinhos japonesas, que são caracterizadas por
serem lidos da direita para a esquerda, ao contrário das convencionais
história em quadrinhos ocidentais. Sua origem está no Teatro das
Sombras, que na época feudal percorria diversos vilarejos contando
lendas por meio de fantoches. Essas lendas acabaram sendo escritas
em rolos de papel e ilustradas, dando origem às histórias em sequência,
e consequentemente originando os mangás.
2. CONSIDERAÇÕES SOBRE A METODOLOGIA
Trabalhar com design centrado no usuário em interfaces digitais

significa basear o projeto na experiência que se quer oferecer ao
usuário. Para isso é imprescindível recorrer a referências chaves como
Garret (2011). O autor propõe um método simples de projetar que pode
ser aplicado desde websites até projetos interativos mais complexos,
para web e além. Método este baseado na experiência de usuário e
subdividido em 5 grandes etapas, que vão de um nível mais abstrato e
mais próximo do designer até um mais concreto, que está mais próximo
do usuário. A proposta divide o produto em funcionalidade e informação,
ambas ocorrendo concomitantemente em cada etapa.
Na etapa preliminar, representada pela estratégia, busca-se
um diálogo projetual entre o que o usuário precisa e o que o produto
objetiva. A próxima etapa, Escopo, traz as especificações funcionais e
os requisitos de conteúdo da interface. Após resolvê-los, é planejada
a Estrutura do projeto, com a arquitetura de Informação e o design de
Interação. Na sequência vem o Esqueleto, com o design de interface,
o design de navegação e também de Informação. A última etapa, na
superfície e já mais perto do usuário, há o design sensorial, que, na
primeira publicação de Garret (2003) era considerado como design
visual, no entanto, as interfaces sonoras, táteis e Natural User Interface
(NUIs), que estimulam e são acionadas por meio de outros sentidos, o
termo sensorial ficou mais adequado.
Embora a metodologia sugerida por Garret (2011) seja bastante
pertinente, cada projetista, adapta-se melhor ou pior a uma metodologia.
Com o surgimento de ferramentas de prototipagem interativas como
UxPin, Proto Io, JustInMind, entre outras neste campo crescente, essa
186
divisão mais delimitada pode ser ainda mais simplificada, agrupando
etapas de estrutura e esqueleto, por exemplo. Ainda inserir testes com
usuário a cada etapa e inseri-lo na projetação da interface, ouvindo suas
críticas e considerações, pode eliminar erros e ajustar a interface a um
padrão de pensamento que é diferente do padrão do designer ou do
cliente. É importante mencionar que uma pesquisa recente do Nielsen
Group [NIELSEN, 2016] demonstrou que apenas 5% da população de
33 países ricos se considera avançada em informática. Isso demonstra
como a própria pesquisa sugere, que o designer ou programador não é
o usuário. Assim coisas que parecem óbvias para os avançados, não são
tão óbvias assim para 95% da população.
É por isso que o Design Centrado no Usuário de Lowdermilk (2013)
pode contribuir para a elaboração de uma metodologia que não inclui
apenas pesquisas e desenvolvimento de personas, mas também um
usuário acompanhando as etapas. Embora a publicação desse referido
autor seja bastante facilitada ao público leigo, traz preciosas dicas para
quem está iniciando o desenvolvimento de interfaces, sobretudo de
aplicativos. “O processo de design centrado no usuário funciona contra
pressupostos subjetivos acerca do comportamento dos usuários. Ele
exige provas de que suas decisões de design são eficazes” [LOWDERMILK,
2013, p. 27]. Assim aceitar feedbacks, compreender fluxos e tarefas de
um padrão mental do usuário fazem parte desse método.
Visando unir as questões mais focadas no usuário e nas personas
de Lowdermilk, com as etapas muito bem documentadas de Garret,
o método 5Is propõe ser um facilitador ao projetista iniciante, de fácil
assimilação pelas “5” etapas que iniciam com a letra “i”, focadas no
sujeito eu “I”, mas que no plural “s” significará nós. Essa ação conjunta
entre projetistas, clientes e usuários torna a projetação compartilhada e
mais eficiente, no sentido de minimizar erros.
3. APLICAÇÃO DA METODOLOGIA 5IS NO DESENVOLVIMENTO DO

APLICATIVO YUME
Durante a construção do Briefing foram citados vários erros e

incômodos que os usuários obtinham dos aplicativos de leitura que
utilizavam. Os problemas variam desde estética de difícil entendimento,
até funcionalidades que eram confusas. Dentro desta lista de requisitos
estavam: (i) possibilidade de download; (ii) organizar as comics lidas; (iii)
187
aviso de atualizações; (iv) ver a estante de livros; (v) acesso rápido aos
títulos mais lidos; (vi) possibilidade de fazer anotações; (vii) facilidade no
uso das configurações; (viii) Filtros personalizáveis; (ix) mais dinâmica; (x)
design minimalista e neutro (Figura 02).
Figura 02 – Mapa Mental do Briefing
Fonte: autora
3.1 Ideação e incubação - buscando o perfil do usuário e contexto de uso
Conforme a metodologia usada no laboratório, foi realizada

uma pesquisa online, via Google Forms, para identificar as sugestões,
incômodos, insatisfações e necessidades dos usuários, e assim poder
formular a lista de requisitos que o aplicativo iria necessitar ter. Foram
feitas 22 perguntas rápidas, direcionadas ao público alvo do aplicativo,
49 pessoas responderam ao questionário, em um período de 7 dias. O
formulário foi divulgado via Facebook, mais especificamente em grupos
voltados a cultura japonesa e geek.
A construção do questionário foi dividida em (i) informações
pessoais: faixa etária e gênero; (ii) informações técnicas: Qual aplicativo
utiliza, qual o tipo de dispositivo, com que frequência baixa aplicativos,
qual o sistema operacional do celular, quantas horas por dia passa lendo,
em que local passa mais tempo lendo, e o que sente falta nos aplicativos
que utiliza; (iii) informações voltadas para a leitura: Se a interface que
utilizavam era agradável, se sentia imerso na leitura, se a leiturabilidade
do aplicativo fosse melhor passaria mais tempo lendo, se acreditavam
que os aplicativos que utilizavam oferecia uma boa legibilidade, se
sentia frustração com os aplicativos que utilizava, se usaria um aplicativo
voltado a leitura de mangás e comics; (iv) informações específicas para
a elaboração da interface: Preferiam capítulos em listas ou quadrados,
gostariam de receber atualizações sobre novos capítulos, gostariam
188
de poder adicionar marcadores nos capítulos, gostariam de saber
a porcentagem que avançou nos capítulos, uma legenda colorida
indicando qual capítulo havia parado ou já leu, ajudaria na organização
do app, receber um alerta de quando ficar mais de uma hora lendo, há
algum requisito específico que gostariam de encontrar em uma interface
para leitura de mangás e comics.
Dos resultados obtidos, 40,4% dos respondentes tinham entre 21
e 24 anos e 74,5% eram do sexo feminino. Na seção sobre informações
técnicas, 14% não utilizavam aplicativos de leitura, 89,4% usam o celular
para ler, 27,7% não baixam aplicativos com frequência, 89,4% utilizam o
sistema operacional android, 31,9% dos respondentes passam mais de
quatro horas lendo, 52,2% responderam que o local que passam mais
tempo lendo é na cama. Na seção sobre informações voltadas a leitura,
37% responderam que a interface dos aplicativos que utilizam para ler é
agradável, 37% dos respondentes se sentem imerso na leitura, 37% dos
respondentes acreditam que se o aplicativo possuísse uma leiturabilidade
melhor passariam mais horas lendo, 34% acreditam que os aplicativos que
utilizam possuem uma boa legibilidade e 39% dizem se sentir frustrados
com seus aplicativos de leitura atuais. A partir da análise desta pesquisa,
já podemos definir algumas das necessidades do público-alvo, como por
exemplo, o aplicativo deve ser de fácil entendimento, sem muitas cores e
opções difíceis, voltado apenas para a leiturabilidade agradável e fluída.
A partir da pesquisa direta com os usuários foram traçados três
perfis de personas, chamadas de (i) Heitor Pereira, (ii) Mariana Santos, (iii)
Samuel Oliveira. Heitor Pereira é um estudante do Ensino Médio de 15
anos, que possui o hábito de passar horas no celular olhando as redes
sociais e lendo quadrinhos japoneses (mangás). Adora principalmente os
gêneros de ação e drama. A partir da análise desta persona, podemos
definir seus requisitos particulares: (i) necessita de um aplicativo
organizado, (ii) possibilidade de configurar notificações e escolher quais
comics quer ser alertado, (iii) poder organizar sua lista de favoritos, (iv)
colocar um lembrete na agenda.
A segunda persona se chama Mariana Santos, ela possui 26 anos,
e é estudante universitária do curso de Medicina Veterinária. É uma
pessoa festiva, disciplinada e prática, adora suas coisas muito bem
organizadas de forma que seja o mais prático possível. A partir desta
persona podemos analisar seus requisitos particulares: (i) possuir filtros
personalizáveis, (ii) marcadores que mostram onde parou a leitura, (iii)
189
uma interface prática e minimalista, (iv) ícones simples e minimalistas
para facilitar a memorização.
A terceira e última persona se chama Samuel Oliveira, ele tem 30
anos e é formado em Artes. Ele é um amante da cultura geek, comparece
a vários eventos e coleciona diversos mangás e comics diferentes. Sua
rotina é corrida e não possui muito tempo disponível para sentar e
ler. A partir da análise desta persona, podemos definir seus requisitos
particulares: (i) um aplicativo que mostre com frequência as novidades
da semana, (ii) uma lista sobre os melhores mangás e comics (top 10), (iii)
uma lista de comics e mangás centradas nas últimas pesquisas feitas, (iv)
versatilidade na hora de ler, podendo aumentar e diminuir o brilho, virar a
tela e editar a página.
As três personas mostram a variedade que existe no público-alvo do
aplicativo. Após a conclusão desta etapa, iniciam as buscas de referências,
procurando elementos para comparar e se basear no desenvolvimento
do aplicativo. Entre eles estão o aplicativo Tapastic (Figura 02), que foi o
mais utilizado neste projeto. Sua disposição de comics e interação com
os elementos, foram o que mais chamaram a atenção.
Figura 02 – Exemplos de tela do aplicativo Tapastic
Fonte: Screenshot
190
3.2 Implementação - primeira geração de alternativas
Nesta etapa foi iniciada o desenvolvimento gráfico do aplicativo,

sendo usado como recurso SiteMap (Figura 04), Rabiscoframes (Figura
05) e Cardsorting (Figura 06). O recurso de Cardsorting tem como objetivo
categorizar o conteúdo de forma coerente dentro do projeto e que seja
compreensivo para o usuário final. Em ergonomia, o Cardsorting é um dos
métodos utilizados para se construir uma arquitetura de informação.
O objetivo de se trabalhar com a arquitetura de informação é
propor a melhor maneira de organizar as informações e funcionalidades
do projeto que estamos trabalhando. É crucial que o entendimento do
usuário seja eficiente quando organizamos as informações e que elas
sejam coerentes com o conteúdo e a realização da tarefa.
Esta etapa foi realizada via internet, pois a grande maioria do
público-alvo não se encontrava na região para a realização frente a frente
que seria o ideal. Foi utilizado o site Realtime Board para criação de um
Cardsorting que fosse viável e de fácil entendimento, para ser enviado via
e-mail ao público-alvo. Todavia, como foi usado um método online para
a realização da tarefa, foi necessário o auxílio de um usuário do meio
familiar que utiliza frequentemente estes aplicativos de leitura.
Figura 04 – SiteMap e rabiscoframe
Fonte: autora
Nesta etapa de Cardsorting foram encontrados com o auxílio do

usuário (Figura 07) alguns poucos problemas de entendimento, sendo
estes: (i) a identificação do que seriam os tips; (ii) dificuldade de diferenciar
os menus; (iii) alguns problemas em interpretar as configurações.
191
Figura 06 – Cardsorting realizado pelo site Realtime Board
Fonte: autora
Figura 07 – Cardsorting realizado com o auxílio das percepções do usuário
Fonte: autora
Para o desenvolvimento do Wireframe (Figura 08), foi utilizado o

software Adobe XD, na versão CC 2018. É um aplicativo da Adobe Systems
que ajuda aos profissionais de design a organizar o fluxo de trabalho para
criação de aplicativos móveis e desktop, englobando os passos desde a
concepção do projeto até visualização de protótipos e compartilhamento.
Figura 08 – Wireframe desenvolvido no aplicativo Adobe XD
Fonte: autora
192
Na etapa de Wireframe algumas limitações do software fizeram
ser difícil a interpretação de algumas funcionalidades pelo usuário,
como: (i) a movimentação da barra de brilho; (ii) mover os elementos
da esquerda para a direita de forma que mostrasse como uma lista;
(iii) descer a página de forma fluída para mostrar mais elementos.
Nesta etapa ainda ocorreram erros de entendimento dos ícones e suas
propostas, foi necessário reavaliar a simplicidade e conceito para que
fosse claro sua funcionalidade.
3.3 Inspeção - rodada de testes com usuários
De acordo com a metodologia do laboratório, foram feitas rodadas

de testes com usuários e rodada de teste com colegas de disciplina.
Inicialmente nestes testes foram apresentadas ao usuário uma interface
superficial, para identificar possíveis falhas e imperfeições na estética
e estrutura do aplicativo. Após a conclusão desta etapa, foram feitos
testes com colegas, dando tarefas para que tentassem concluir, como:
acessar as configurações, ou acessar o menu e definir um alarme. Então
era observado a interação entre usuário e interface, anotando todos os
possíveis ajustes e erros. Com a ajuda destes testes, foram identificados
os seguintes ajustes: (i) criar uma página de login; (ii) colocar uma seta
para voltar à página anterior; (iii) mover as configurações para a barra
de baixo colocando como um ícone; (iv) colocar funções de explorar e
catálogo como uma mesma página; (v) funções de mover favoritos, sair,
editar perfil para o menu do perfil; (vi) funções de mover termos de uso,
feedback, compartilhar aplicativo para o menu de configurações; (vii)
colocar um ícone de zoom no modo de leitura; (viii) arrumar a palavra
“sua estante” para “minha estante” em todos que aparecer.
Figura 09 – Teste de usuário feito com Wireframe do aplicativo
Fonte: Autora
193
Toda esta etapa foi feita com cores monocromáticas, sem imagens
e sem ícones, apenas para a visualização da interação das páginas e o
usuário (Figura 09).
3.4 Implementação - escolhendo cores, ícones, fontes e grids
Nesta etapa da implementação foram feitas as devidas correções e

ajustes na interface para atender às sugestões dos usuários e professora.
O grid utilizado foi quadriculado (Figura 10), sendo fornecido pelo próprio
aplicativo Adobe XD.
Figura 10 – Grid utilizado para desenvolvimento do aplicativo
Fonte: Autora
Os tons de cores escolhidos para o aplicativo foram alguns testes em

gradiente, anteriormente as cores estavam muito saturadas de azul, após
alguns ajustes, optamos por deixar tons frios de azul e roxo. As cores
ficam apenas nos menus e tela inicial de perfil para não atrapalhar o fluxo
e interação da leitura (Figura 11).
194
Figura 11 – Demonstração da paleta de cores no aplicativo Yume
Fonte: Autora
A família tipográfica escolhida para este projeto foi Ubuntu, de

Dalton Maag, desenvolvida justamente para webfonts prevenindo
possíveis erros na hora dos usuários utilizarem o aplicativo. Sua
legibilidade e leiturabilidade são ótimas, além de ser uma fonte simples
e sem muitos arabescos, deixando a interface limpa e minimalista. Já
a família tipográfica do título foi escolhida para passar a sensação de
fantasia, magia e fluidez, foi escolhida então a Dream American Diner
demo, da fontsandfashion (Figura 12).
Figura 12 – Família tipográfica escolhida para o aplicativo Yume
Fonte: Autora
195
Os ícones foram pensados da mesma forma que a família tipográfica
do aplicativo, não possuindo muitas cores ou texturas, são simples e de
fácil entendimento (Figura 13).
Figura 13 – Ícones desenvolvidos para o aplicativo Yume
Fonte: Autora
O ícone do aplicativo foi desenvolvido baseando-se no mito da

deusa Atena, que é referida como a deusa da sabedoria e artes. Sua
mascote é a coruja, que também é conhecida como o animal soberano
da noite. Para muitos povos a coruja significa mistério, inteligência,
sabedoria e conhecimento (Figura 14). A paleta de cores escolhida para o
ícone foi baseada nas cores do aplicativo, mantendo um padrão.
Figura 14 – Ícones desenvolvidos para o aplicativo Yume
Fonte: Autora
Criar uma interface centrada no usuário é criar experiências mais

eficientes, satisfatórias e amigáveis ao usuário. Ao invés de exigir que o
196
usuário se adapte e mude suas atitudes e comportamentos para aprender
a utilizar uma ferramenta, o design centrado no usuário cria sistemas que
se relacionam com o que o usuário crê, como age e vê o mundo. Possuir
a possibilidade de receber Feedbacks diretamente do seu público-alvo,
enriquece a interface e ajuda a compreensão de para quem você está
desenvolvendo o produto. O usuário que utilizar este tipo de interface
terá uma experiência muito mais agradável que qualquer outro.
No desenvolvimento deste projeto, o objetivo sempre foi deixar a
interface o mais intuitiva e simples possível, sempre ouvindo e pedindo
opiniões de usuários para corrigir possíveis erros. Desde a escolha de
ícones, até a definição da paleta de cores, o usuário sempre se encontrou
presente. Quesitos como leiturabilidade e legibilidade também foram
postos na balança, sendo testado e adaptado ao público-alvo. A
metodologia do laboratório se mostrou simples e de fácil compreensão,
sendo possível montar rapidamente um plano de desenvolvimento de
projeto e interação com o usuário.
BIBLIOGRAFIA
GUIMARÃES, F. M. O que é Design Centrado no Usuário?. Disponível em: <https://

bit.ly/2Q2NfUe>. Acesso em: 18 de out. 2018.
PUPPI, M. B; PADOVANI, S; SCHLEMMES, A. Modelo descritivo para interfaces de

aplicativos em smartphones. Artigo Revista Brasileira de Design de Informação.
São Paulo: Infodesign, 2017.
KRUPAHTZ, J. Design Centrado no Usuário: Redesenho da Interface Digital da

Revista Arco. Artigo 16° Ergodesign, 2017.
Significado de Mangá. Disponível em: <https://www.significados.com.br/manga/>.

Acesso em: 20 de out. 2018.
O que são comics, hqs ou quadrinhos?.
Disponível em: <https://www.comicszone.com.br/o-que-sao-comics-hqs-ou-

quadrinhos/>. Acesso em: 22 de out. 2018.
197
198
Protótipo interativo do aplicativo de
cuidados capilares HairCare
Felipe Lázaro de Lima Carvalho
RESUMO: O presente artigo tem como objetivo explicar o processo de

criação do protótipo interativo digital de um aplicativo sobre cuidados
capilares chamado HairCare. O protótipo desenvolvido no Laboratório
Profissionalizante de Interface, do Curso de Desenho Industrial da
Universidade Federal de Santa Maria (UFSM), foi orientado pela Prof.ª
Dra. Débora Aita Gasparetto e seguiu a metodologia dos 5Is, composta
por 5 fases. A metodologia foi baseada nos autores Jesse James Garrett
(2011), Travis Lowdermilk (2013) e Fabrício Teixeira (2014). O protótipo visa
atender algumas das necessidades de um nicho de mercado que vem
ganhando cada vez mais espaço, que é ramo da beleza natural, mais
especificamente de cabelos naturais. Pode-se observar um processo
de empoderamento das mulheres através da livre decisão de voltar ao
cabelo natural e no sentido de ir contra os padrões de beleza impostos
pela sociedade.
1. INTRODUÇÃO
Nos últimos anos, com a exponencial evolução tecnológica, os

smartphones se tornaram parte integrante do dia a dia de milhares
de pessoas. Com estes dispositivos evoluindo tão rapidamente, a
quantidade de usuários cresce a todo instante e bate recordes de
crescimento todos os anos. Pesquisas já apontam que a quantidade de
smartphones presentes já ultrapassa o número de computadores.
É inegável que a sociedade mudou e o ritmo da vida das pessoas
que utilizam essas tecnologias tem acompanhado essa evolução, quase
na mesma velocidade em que elas acontecem. (Vieira, 2011). Sendo
assim, surge a necessidade de criação de interfaces com características
como: facilidade de aprendizagem, simplicidade de uso, emitir clareza,
etc. Segundo Pressman (1995), todos nós já nos deparamos com alguma
interface confusa ou até mesmo frustrante. Uma interface é vista como a
199
embalagem do aplicativo e por isso exige tamanho cuidado e dedicação
na hora de sua criação.
Com o surgimento da preocupação com o humanismo projetual,
o designer tem buscado interpretar as necessidades de grupos sociais
e elaborar propostas viáveis e emancipatórias (Bonsiepe, 2005). A
mentalidade de projetar “para pessoas” mudou para projetar “com
pessoas”, tendo o usuário como parceiro em todo o processo de criação,
e proporcionando uma aprendizagem enriquecida sobre as experiências
do indivíduo para o projeto e a equipe de pesquisa multidisciplinar.
Atualmente, existem diferentes tipos de projetos de design que
visam atender à diversidade dos usuários, projetando sistemas cada vez
mais acessíveis e amigáveis. Isso propicia que ainda mais pessoas se
beneficiem dos recursos tecnológicos e das suas possibilidades.
2. CRESCIMENTO DO MERCADO DE BELEZA E ESTÉTICA NO BRASIL
Na contramão do crescimento do Brasil, que se recupera

lentamente, o mercado de beleza e estética se destaca como um dos
mais promissores do país. As perspectivas são as melhores diante de
dados divulgados pela Associação Brasileira da Indústria de Higiene
Pessoal, Perfumaria e Cosméticos (ABIHPEC), que mostra que entre os
anos de 2010 e 2015, o mercado cresceu 567% no Brasil.
O desejo por produtos que atendam às necessidades individuais
tem crescido cada vez mais no Brasil. Uma categoria que se movimentou
rapidamente para oferecer opções mais personalizadas foi a de cabelos.
A empresa Salon Line, por exemplo, foi uma das que identificou o forte
anseio dos consumidores por produtos específicos para cabelos crespos,
cacheados e ondulados e criou um extensa linha de cuidados. Além
disso, desenvolveu a campanha #todecacho, que valoriza a beleza do
cabelo enrolado e empodera as donas e donos de cachos.
Com o crescimento também da procura por produtos de beleza
com foco em ingredientes de origem natural, aumentam o conhecimento
e a exigência dos consumidores por marcas consideradas ecofriendly.
Buscar a certificação de institutos internacionais, já que ainda não
existe uma normatização oficial no Brasil, e ter uma comunicação
clara e transparente com o consumidor tem sido a saída para marcas
que querem se posicionar nesse segmento. Algumas marcas vem
crescendo cada vez mais apoiadas em um posicionamento de respeito
200
à natureza (uso responsável dos recursos naturais), formulações de
origem vegetal (não usam matérias-primas de origem animal) e com
ingredientes ecocertificados.
Essas tendências giram em torno da definição de empoderamento
e autonomia, pois se referem à capacidade dos indivíduos e grupos
poderem decidir sobre as questões que lhes dizem respeito nas mais
variadas esferas. Numa perspectiva emancipatória, empoderar é o
processo pelo qual indivíduos e comunidades conquistam recursos que
lhes permitam ter voz, visibilidade, influência e capacidade de ação e
decisão. (Horochovski, 2007).
3. METODOLOGIA
Para desenvolvimento do protótipo interativo HairCare foi
utilizada a metodologia dos 5I’s elaborada pela Prof.ª Dra. Débora Aita
Gasparetto (2017) para o contexto do Laboratório Profissionalizante
de Interface, do Curso de Desenho Industrial da UFSM, com foco na
inovação e no potencial inventivo dos alunos, em busca de facilitar a
experiência do usuário, proposta por James Garret (2011), no design
centrado no usuário, de Travis Lowdermilk (2013), e nas orientações
práticas de Fabrício Teixeira (2014).
O método é dividido em 5 fases: Ideação, Inambulação, Instauração,
Inspeção e Implementação. Cada fase se subdivide em etapas que guiam
o desenvolvimento da interface com foco no usuário e na experiência de
usuário e, para isso, é fundamental a iteração em cada fase.
4. DESENVOLVIMENTO DA INTERFACE
4.1 IDEAÇÃO E INAMBULAÇÃO
O aplicativo HairCare surgiu com a ideia de ajudar as pessoas a

compreender melhor a composição dos produtos que elas utilizam no
seu dia a dia e assim terem autonomia para escolher melhor os que
mais se adequam às suas necessidades, seja por opção pessoal por
determinados componentes ou por questões de saúde, quando há
necessidade de evitar algum componente.
O briefing foi preenchido da seguinte forma: O QUÊ? Uma
interface que facilite o acesso e a compra de produtos sem componentes
prejudiciais à saúde e também permita verificar se os produtos que
201
temos em casa possuem ou não estes mesmos componentes; COMO?
Por meio de um aplicativo para celular que reuna um catálogo atualizado
de produtos para cabelo sem componentes que causam danos ao meio
ambiente e à saúde, um scanner de código de barras para verificar um
produto já comprado, um calendário para montar seu cronograma de
cuidados capilares e uma área para compartilhamento de promoções
encontradas; PORQUÊ? Em prol da saúde, da prática do autocuidado
e de um impacto menor no meio ambiente; PARA QUEM? Pessoas que
gostam de cuidar dos cabelos, tem alguma alergia a determinados
componentes ou simplesmente estão interessadas em cuidar de si e
também do ambiente em que vivem; POR QUEM? Pelas pessoas e pelo
planeta; EM QUE LUGAR SERÁ UTILIZADO? O aplicativo será utilizado
em casa e/ou nas horas vagas.
No brainstorm foi citado o livro Manual da Garota Cacheada
(Lorraine Massey, 2010), identificação de produtos liberados/proibidos,
produtos sem agentes agressivos (sulfato, petrolatos, silicones, etc), os
4 tipos de curvatura (cabelos lisos, ondulados, cacheados e crespos),
cabelos mais saudáveis de forma mais “natural” possível, cronograma
capilar (hidratação, nutrição e reconstrução), produtos veganos e livres
de crueldade animal, e também receitas caseiras e produtos naturais
(óleos vegetais, leites vegetais, etc), entre outros.
Na etapa de pesquisa de referências foi realizada uma busca por
aplicativos similares nas lojas Play Store e App Store. Foram encontrados
aplicativos como o Meu Cronograma Capilar, com mais de 1 milhão de
downloads, e o Cabelo Poo (figura 1), com mais de 50 mil downloads,
ambos na Play Store. O aplicativo que possui maior semelhança com
as informações definidas no brefing do projeto foi o CabeloPoo, sendo
assim foi feita uma análise heurística conforme a figura 2.
.
Figura 1 - Telas do aplicativo CabeloPoo
Fonte: Screenshots do aplicativo
202
Figura 2 - Análise Heurística do aplicativo CabeloPoo
Fonte: Autor
Em seguida, o Atlas Mnemosyne (Figura 3) foi gerado para
ter uma base de referências de como foram imaginadas algumas
das características estéticas como, por exemplo, o minimalismo
representado através do monocromatismo, formas arredondadas,
ampla utilização do branco, preto e cinza, etc. Tudo planejando transmitir
um sentimento de clareza, objetividade e facilidade de visualização por
parte do usuário.
Figura 3 - Atlas Mnemosyne
Fonte: Autor
Uma pesquisa foi realizada através da ferramenta Formulários do

Google com possíveis usuários do aplicativo para verificar sua viabilidade,
compreender as reais necessidades, descobrir qual o sistema operacional
que utilizam e a frequência que instalam aplicativos em seu smartphone.
Das 311 respostas, 67% são pessoas entre 18 e 29 anos, em sua grande
maioria mulheres. 42% dá preferência para produtos que sejam veganos
e livres de crueldade animal. 83% considera muito útil um scanner de
código de barras para saber mais informações sobre a composição do
produto. De forma concomitante com a pesquisa, foram criadas personas
para ajudar a entender melhor quem são os potenciais usuários (figura 4).
203
Figura 4 - Personas Ana Louise e Beatriz
Fonte: Autor
No que diz respeito aos pontos de contato do usuário com o
aplicativo, foi imaginado uma possível utilização do aplicativo durante o
tempo de pausa de um tratamento de cabelo no salão, em casa durante
as horas vagas ou tempo separado para praticar o autocuidado, antes/
depois do banho diariamente, entre outros momentos.
Após a análise dos resultados da pesquisa e das personas, foram
definidos alguns requisitos do usuários: 1 - Um scanner de código de
barras para saber se o produto é proibido/liberado; 2 - Lista de produtos
separados em categorias para facilmente encontrar algum produto
específico; 3 - Calendário para organização do cronograma capilar; e
4 - Compartilhamento de resenhas/avaliação sobre os produtos.
Com relação a especificações técnicas que a interface necessitaria,
foi levantado: acesso à câmera (scanner), acesso às notificações (alerta
cronograma), acesso ao 3G, filtros para pesquisar produtos e ordenar a
204
pesquisa, calendário para cronograma capilar, espaço para avaliação de
produtos, para promoções encontradas e para receitas caseiras.
Para dar início a prototipagem do aplicativo foi escolhida
a ferramenta Adobe XD, por uma mera questão de familiaridade
preexistente com os outros programas da mesma empresa. Levando
em consideração o resultado da pesquisa, 83% dos possíveis usuários
utilizam Android em seu smartphone, portanto optou-se por desenvolver
o aplicativo para este sistema operacional.
4.2 INSTAURAÇÃO
Nesta fase, a primeira etapa é fazer o sitemap, que serve para

organizar o conteúdo do aplicativo de uma forma que a navegação
do usuário flua com melhor qualidade. O sitemap (figura 5) foi iniciado
durante uma das aulas do Laboratório Profissionalizante de Interface
como um exemplo de como fazer um sitemap, tendo a Prof.ª Dra. Débora
Aita Gasparetto como orientadora e com a participação de toda a turma
para entender o processo de organização da arquitetura de informação
e design de interação. Posteriormente foi reorganizado e finalizado
utilizando a ferramenta Miro (figura 6).
Figura 5 - Sitemap feito durante a aula
Fonte: Autor
205
Figura 6 - Sitemap finalizado na ferramenta Miro Realtimeboard
Fonte: Autor

Também foram feitos alguns rabiscoframes (Figura 7) (TEIXEIRA,
2014) para organizar melhor as ideias diretamente no papel antes de
partir para os wireframes no Adobe XD, seguindo o método Mobile First
(WROBLEWSKI, 2011).
206
Figura 7 - Rabiscoframes
Fonte: Autor
O design sensorial começou a ser elaborado através da escolha da

tipografia. A fonte escolhida foi a Poppins, lançada pela foundry Indian
Type (ITF) em 2016. Ela possui 9 pesos diferentes, de Thin a Black e é
classificada como uma fonte sem serifa geométrica e monolinear, com
correções ópticas de traçado para manter-se uniforme. A fonte Poppins
está disponível de forma gratuita através do Google Fonts (figura 8). Os
ícones utilizados na interface também foram obtidos de forma gratuita
através do site Flat Icon.
Figura 8 - Página de download da font Poppins no Google Fonts
Fonte: Autor
Quanto ao padrão cromático (figura 9), foram escolhidas as

cores bordô, preto, cinza e branco. O bordô é um tom terroso com um
pouco de vermelho que o torna mais quente e vivo, busca incentivar
a ação de mudança, por exemplo, para hábitos mais saudáveis e por
ser considerado forte e elegante é amplamente utilizado no mundo
da beleza, moda e decoração. O preto, branco e cinza enfatizam o
minimalismo, modernidade, elegância do aplicativo.
207
Figura 9 - Padrão cromático
Fonte: Autor
4.3 INSPEÇÃO
Um protótipo de papel foi realizado de maneira bem simplificada

e testado apenas com um usuário e então partiu-se para o Adobe XD
para fazer protótipo interativo (figura 10), para que posteriormente outros
usuários pudessem testar questões relacionadas ao o design sensorial.
Figura 10 - Protótipo interativo digital no Adobe XD
Fonte: Autor
Após fazer testes com usuários foram encontrados alguns pontos
da interface a serem corrigidos, como: 1 - Marca do produto maior
e em um cinza mais forte; 2 - Aviso no scanner ao não encontrar um
produto (Deseja cadastrar?); 3 - Explicação sobre as cores no calendário
(hidratação, nutrição e reconstrução); 4 - Ícone do calendário e não das
receitas na barra de navegação; 5 - Trocar do posição filtro ordenar e
pesquisar entre si; 6 - Descrição do produto inserida pela curadoria,
conforme disponibilizado pela marca. A maior parte parte dos pontos
citados foram de extrema importância e realmente geraram alterações
no protótipo (figura 11).
208
Figura 11 - Telas do aplicativo após os testes de usabilidade
Fonte: Autor
Mesmo ainda havendo necessidade de mais testes de usabilidade

e criação de algumas telas, a versão mais recente do protótipo até o
momento pode ser acessada através do link e algumas telas podem
ser visualizadas logo abaixo aplicadas em um mockup (figura 12). Para
o Laboratório Profissionalizante de Interface foi preciso entregar até a
parte de inspeção, a parte de Implementação fica por conta e interesse
individual de cada aluno.
Figura 12 - Mockup digital
Fonte: Autor
209

Através da metodologia dos 5I’s foi possível desenvolver o
protótipo interativo do aplicativo HairCare de forma prática e flexível,
pois o método consegue facilmente ser seguido e também adaptado
a diferentes situações. O projeto, por ser centrado no usuário desde o
princípio, teve como consequência um melhor entendimento das reais
necessidades e objetivos dos usuários, resultando em propostas de
soluções bem adequados e de maior utilidade. Pode-se concluir que a
abordagem da usabilidade e da influência das percepções do usuário é
extremamente relevante e trazer consigo resultados importantes quando
aplicada.
REFERÊNCIAS

aplicativos amigáveis. São Paulo: Novatec Editora, 2013.

2014.
WROBLEWSKI, L. Mobile First. New York: A Book Apart, 2011.
BONSIEPE, G. Design e democracia. Disponível em: <pt.scribd.com/

document/196042416/Design-e-Democracia-Gui-Bonsiepe>. Acesso em: 18 de
Junho de 2019.
HOROCHOVSKI, R. R.; MEIRELLES, G. Problematizando o conceito de

empoderamento. In.: II Seminário Nacional Movimentos Sociais, Participação
e Democracia. Universidade Federal de Santa Catarina. Florianópolis, 2007.
Disponível em: <www.sociologia.ufsc.br/npms/rodrigo_horochovski_meirelles.
pdf>. Acesso em: 18 de Junho de 2019.
VIEIRA, E.; CARVALHO, L. Invasão tecnológica: geração tablet. Disponível em: <www.
com.ufv.br/disciplinas/cibercultura/2011/03/invasaotecnologica-geracao-
tablet/>. Acesso em: 18 de Junho de 2019.
210
211
Utilização da metodologia 5i’s para
projetação de um aplicativo de
alimentação saudável
Laura Muller
RESUMO: Este artigo tem como objetivo informar e apresentar a

metodologia e o processo utilizado no desenvolvimento de um aplicativo
para auxiliar no hábito de ter uma alimentação saudável. A ideia do
aplicativo é que o usuário fosse capaz de colocar lembretes, registrar
refeições, buscar e criar receitas, monitorar o progresso no hábito,
comprar alimentos pelo aplicativo, dentro outros. Para projetar a interface
foi utilizada a metodologia 5I’s criada por Débora Aita Gasparetto, que
possui as seguintes fases: Ideação, Inambulação, Instauração, Inspeção e
Implementação. A metodologia tem base em (Garret, 2011), (Lowdermilk,
2013) e (Teixeira, 2014), além disso o aplicativo possui como princípio a
Usabilidade, por este motivo, tem como apoio (Krug, 2014). Este projeto
foi realizado no Laboratório de Interface Orientado do Curso de Desenho
Industrial da Universidade Federal de Santa Maria.
1. IDEAÇÃO

A primeira fase da metodologia se inicia com o Briefing ou o
Brainstorming, no caso, desse desenvolvimento, essas etapas ocorreram
de maneira simultânea. No briefing o foco era responder as seguintes
perguntas: Qual o problema que deve ser resolvido? O quê? Como?
Porquê? Para quem? Por quem? Em que lugar?
Assim, o Briefing foi respondido da seguinte maneira: Qual o
Problema? Sociedade atual tem dificuldade para ter e manter uma
alimentação mais saudável de maneira mais livre. Muitos não possuem
hábitos saudáveis, como, comer alimentos industrializados, com
muita gordura ou açúcar, comer demais ou muito pouco. O que? Uma
interface para auxiliar no hábito de ter uma alimentação saudável e ter
conhecimento sobre alimentos e quantidade de calorias que a pessoa
está ingerindo. Como? Por meio de um aplicativo, onde seja possível
organizar os alimentos, montar refeições, fazer lista de compras e registrar
212
a alimentação, conferir quantidades inseridas e ver sobre cada alimento.
Porquê? Para que as pessoas possuam mais saúde, saibam e entendam
o que estão ingerindo e percebam o valor e a diferença de seguir uma
alimentação saudável para ter uma alta qualidade de vida. Para quem?
Qualquer pessoa que busca mudar e precisa de auxílio nesse tipo de
alimentação. Por quem? Pelas pessoas e pelo planeta. Em que lugar? Em
casa, restaurantes e mercados.
O Brainstorming segundo (Teixeira, 2014) se caracteriza por
um processo de geração de ideias, com o objetivo de ser livre, sem
julgamentos sobre a ideia. Ele auxilia a visualizar uma variedade de
soluções ou funcionalidades para o problema. As ideias que surgiram
durante a etapa estão representadas na figura abaixo.
Figura 1: Brainstorming
Fonte: autora
Neste processo também surgiu a ideia do nome do aplicativo, com

a união da palavra “Live” e “Healthy”, formando assim o nome Livethy.
A etapa seguinte da metodologia é a busca de referências, neste caso,
foram realizados três tipos de busca. A primeira com o objetivo de
analisar e entender os dois principais concorrentes, a segunda analisou
de maneira superficial outros dois aplicativos da área que não são líderes
do mercado, e a terceira para analisar aplicativos com funcionalidades
que poderiam ser integradas no desenvolvimento do app Livethy. As
análises dos principais concorrentes:
213
# My Fitness Pal - É o líder no nicho. O que promete (segundo a descrição
do Google Play): Monitorar a dieta e exercícios. Possui um banco vasto
de dados de alimentos. Registro de alimentos - favoritos são lembrados,
podem-se adicionar vários alimentos de uma só vez, salvar e adicionar
refeições inteiras. Cria um plano para o usuário seguir. Escanear alimentos
por meio de código de barras. Monitorar nutrientes: calorias, gorduras,
proteínas, carboidratos, açúcar, fibras, colesterol e outros. Monitorar
exercícios de força e cardio, incluindo sequências, repetições e peso.
Conectar-se com amigos para motivar e apoiar uns aos outros. Resumo
nutricional diário, com todos os principais nutrientes.
Possui +50.000.000 downloads, +2.070.000 avaliações no Google
Play e média de avaliação de 4,6 estrelas. O aplicativo possui versão para
iOs, mas durante o projeto foi analisado somente ele em Android.
As resenhas positivas elogiam o aplicativo e que os usuários
conseguiram realizar o objetivo, enquanto as negativas reclamaram que
a versão premium não vale a pena, pois não traz novas funcionalidades e
que a qualidade de processamento depois de uma recente atualização
diminui muito. O aplicativo também possui uma interface online, que
possui loja de roupas, pois é feito pela empresa Under Armour, possui
blog, comunidade e o mapmyfitness que é exclusivamente para treinos.
O aplicativo possui uma interface aparentemente simples, com
poucas cores e com alguns padrões de interação bem comuns. O
principal problema é que essa configuração não consegue suportar
a complexidade das funções que ele tem, pois, além de ser muitas,
algumas são difíceis de encontrar ou são confusas. Além disso, uma parte
do aplicativo possui qualidade de projetação inferior as telas principais,
talvez um problema ocorrido pela quantidade de funcionalidades e falta
de tempo de desenvolvimento.
Figura 2 – Logo e Telas App My Fitness Pal
Fonte: Screenshot
214
#Lifesum - Algumas funcionalidades do aplicativo:
Registro em onboarding, onde primeiro se colocam objetivo,
gênero, idade, altura e peso. Dashboard - Visualizar quantas calorias
precisam ser consumidas e as que faltam ser, além de caso faça
exercício, quantas foram queimadas. Quanto de carboidratos, proteínas
e gorduras forma e devem ser consumidas. Podem ser adicionados
alimentos conforme tipo de refeição (café da manhã, lanche, almoço
e janta), pode se adicionar um exercício também. Por ele se acessa o
menu. Para cadastrar o alimento, há categorias, os recentes, os favoritos,
os frequentes, pode se criar um novo, ou uma nova refeição ou uma
nova receita. É permitido favoritar os alimentos, e adicionar a quantidade
consumida, o aplicativo gera calorias automaticamente. Menu é dividido
em - diário (dashboard), eu (configurações de conta do usuário), planos
(encontre sua dieta), Premium (acesso para novas funcionalidade do
app pagas) e receitas. Receitas são divididas em Novidades e nos tipos
de refeição. Há um “termômetro” que indica o quanto o usuário está
saudável, perguntas precedem e dizem o resultado. O aplicativo indica
quando a pessoa comeu pouco, ou demais, ou sinaliza quando comeu
alimentos muito calóricos.
Possui +10.000.000 downloads, +200.000 avaliações no Google
Play e média de avaliação com média de 4,4 estrelas. O aplicativo
possui versão para iOs, mas durante o projeto foi analisado somente
ele em Android.
As resenhas positivas dizem que conseguiram realizar o objetivo
e gostam da interface, enquanto as negativas reclamaram que a versão
premium não vale a pena, pois não traz novas funcionalidades e que
possui problemas de linguagem em relação a tradução para o português
e questionam se as informações nutricionais estão de acordo com o
sistema da tabela nutricional brasileira.
O aplicativo no geral se comporta de maneira positiva, possui
menos funcionalidades que o My Fitness Pal, mas realiza elas de maneira
mais efetiva, é muito agradável esteticamente e utiliza personagens
divertidos para interagir com o usuário. Em algumas telas se torna
confuso o adicionar uma receita criada ou refeição, mas com um pouco
mais de esforço, é possível realizar a tarefa.
215
Figura 3 – Logo e Telas App Lifesum
Fonte: Screenshot
As outras análises foram dos aplicativos 8fit, onde foi possível

observar um design mais minimalista e bem resolvido, as perguntas
do cadastro serviram de inspiração para o aplicativo Livethy. Outro
aplicativo analisado foi o Runstactic Balance, é mais simples que o My
Fitness Pal e o Lifesum, mas dele foi possível observar outra maneira
de registrar alimentos que é mais rápida e que tem um menor esforço
cognitivo do usuário.
O aplicativo Todoist foi analisado para entender o processo de
adicionar, editar e excluir uma tarefa, e o aplicativo TudoGostoso para
compreender como criar uma receita numa única tela.
Figura 4 – Promoções no Google Play dos aplicativos 8fit, Balance, Todoist e Tudo Gostoso
Fonte: Screenshot
216
Em relações a referência visual, foi montado um Moodbord que
segundo (Teixeira, 2014) é uma coleção de imagens, cores e referências,
que vão se tornar o estilo visual do produto. Nesta etapa, ideia era utilizar
cores vivas em complemento cores mais claras, além disso, ter no
mínimo três cores, ou seja, o aplicativo deveria ser bem colorido para
representar a diversidade de alimentos. Posteriormente surgiu a ideia
de utilizar temas de cores para o usuário personalizar o aplicativo, assim
criando uma identificação no produto, por razões de tempo de projeto,
essa funcionalidade não foi implementada, mas será testada em breve.

Figura 5 – Moodboard
Fonte: autora
Outra etapa da metodologia que auxiliou a definir o design

sensorial do produto e entender as necessidades do usuário foi o Atlas
Mnemosyne, método utilizado pelo historiador Aby Warburg (2015) para
encontrar pontos em comum entre imagens que se relacionam com o
objetivo do produto ou seu nicho, nele é possível visualizar formas, cores
e elementos.
217
Figura 6 – Atlas Mnemosyne
Fonte: autora
Por seguinte, foi realizado outro tipo de análise que normalmente

é usada na etapa de Inambulação da metodologia, porém durante o
desenvolvimento do aplicativo foi necessário realizá-la nesta etapa. A
Análise Heurística que segundo (Teixeira, 2014) é uma análise minuciosa
de um produto, no caso o escolhido foi o My Fitness Pal, com o objetivo
de entender boas e más práticas de UX, utilizando princípios do
Design de Interação. São analisados os 10 princípios criados por (Jakob
Nielsen e Rolf Molich, 1990), são eles: Feedback; Falar a linguagem do
usuário; Liberdade e controle do usuário; Consistência; Prevenir erros;
Reconhecer ao invés de lembrar; Oferecer atalhos; Diálogos naturais e
simples (estética e design minimalista); Boas mensagens de erro; Ajuda
na documentação.
O aplicativo My Fitness Pal representou maiores falhas nos
seguintes aspectos: fala a linguagem do usuário, mas não promove uma
conexão com o tipo de usuário que busca o serviço; apenas em algumas
telas preveniu erros, no geral, é um pouco confuso na realização de
tarefas. Abaixo estão as notas de 1 a 10.
218
Figura 7 – Análise Heurística My Fitness Pal
Fonte: autora
Na próxima etapa da fase de Ideação, talvez a mais importante

tarefa seja a pesquisa com usuários. Nela foi realizado um formulário
com as perguntas abaixo e enviado para 5 usuários potenciais, o que
posteriormente foi percebido como um erro, o ideal era pesquisar
primeiramente com um público em geral para identificar se existe a
necessidade do aplicativo, mais tarde foi feita uma pesquisa em artigos
e notícias sobre o assunto que minimizou esse erro, essa pesquisa é
relatada na página (nº) desse artigo. Abaixo estão os resultados obtidos
com a pesquisa.
Algumas conclusões foram tiradas deste formulário, são elas:
70% deles possui dificuldade de comer saudável; A dificuldade está
relacionada a ansiedade, ao prazer que sentem ao comer, a outros hábitos
ruins (fumar, dormir tarde) e a pessoas próximas que não possuem o
mesmo objetivo, A maioria planeja o que vai comer um dia antes ou no
domingo; Poucos registram o que comem, o que fazem isto usam um
app (My Fitness Pal é mais usado), outros, cadernos; Começam o dia bem,
mas no final do dia já não prestam atenção no objetivo; Reconhecem que
se ficam muito tempo sem comer algo com desejo, acabam comendo
muito depois.
Alguns dados numéricos foram usados na análise também: 40%
considera ter uma alimentação regular, 60% consideram que tem uma
alimentação boa; 80% gostaria de ter ou manter uma alimentação
saudável, 70% possui dificuldade de ter uma alimentação saudável,
metade deles faz uma lista de compras quando vai ao mercado, 80%
come fora com frequência, 70% destes buscam alternativas de alimentos
saudáveis ao sair, 80% registra a alimentação, destes, 80% utiliza um
aplicativo e o restante um caderno.
219
Com tantas informações e ideias acontecendo nesta etapa do
processo, foi feito um mapa mental para organizá-las e também gerar
algumas ideias de funcionalidades.
Figura 8– Mapa Mental feito na plataforma MindMaister
Fonte: autora
A criação de Personas foi a próxima tarefa, o objetivo da criação de

personas é entender como seria o possível usuário, seu comportamento,
objetivos, frustações e necessidades, para assim, criar tarefas para o
aplicativo baseadas naquela persona e também pensar nela durante a
concepção do produto, se ela utilizaria ou se as funções fazem sentido
para ela e se estão de acordo com o que ela precisa. Foram criadas três
personas baseadas nas pessoas que responderam o formulário.
220
Figura 9 – Personas 1, 2 e 3
Fonte: autora
221
Antes de seguir para a fase da Inambulação, foi necessário
fazer uma pesquisa em artigos e notícias para entender melhor o
comportamento do consumidor e também validar a ideia do aplicativo.
A ideia foi validada, pois segundo uma pesquisa de 2017 realizada
por Federação das Indústrias do Estado de São Paulo (Fiesp), mostra
que 80% dos brasileiros buscam uma alimentação saudável. Outros
resultados da pesquisa demonstram que a percepção de “ter comido
demais” aumentou nos últimos sete anos, passando de 52% em 2010
para 56% no ano passado. Na hora de escolher entre um alimento mais
saudável e outro com melhor sabor, 61% admitiram preferir aqueles mais
saborosos. A percepção de “ter comido demais” aumentou nos últimos
sete anos, passando de 52% em 2010 para 56% no ano passado. Na hora
de escolher entre um alimento mais saudável e outro com melhor sabor,
61% admitiram preferir aqueles mais saborosos. A internet se tornou a
principal fonte de informações, com 40% da participação, a televisão
tem 24% e médicos e nutricionistas responderam por 18%. Outra fonte
consultada foi o artigo “Dificuldades para alimentação saudável entre
usuários da atenção básica em saúde e fatores associados”, que teve
como resultado o seguinte: “Do total de entrevistados, 31,1% percebiam
dificuldades para ter uma alimentação saudável. Dentre os motivos pelos
quais referiram dificuldades, 57,6% mencionaram o custo elevado dos
alimentos considerados saudáveis, 49,4% a força de vontade insuficiente,
41,6% a necessidade de abrir mão de alimentos considerados não
saudáveis, 35,7% a falta de tempo e 31,3% o conhecimento insuficiente”.
Com estas pesquisas foi percebido o quanto é latente esse
problema na população brasileira, e que este problema está relacionado
a não saber de alternativas mais baratas para se alimentar saudável, a
inflexibilidade de dietas, o tempo e o esforço necessário para ter este
estilo de vida. Com isso, foi percebido que a maior dificuldade se
encontra em manter ou começar o hábito de se alimentar saudável e
este se tornou o principal objetivo da interface.
2. INAMBULAÇÃO
Nesta fase a etapa realizada foi a definição de requisitos e

funcionalidades, tendo como base todos os processos da Ideação, estes
foram os finais: Onboarding de cadastro e especificações para entender
a necessidade do usuário, a tela deve se modificar para atendê-las;
222
Lembretes de alimentação e água - colocar e editar; Contar calorias;
Registrar alimento; Ver sobre cada alimento, nutrientes e calorias;
Termômetro da alimentação; Feedbacks se a pessoa está se alimentando
de maneira saudável; Registro das refeições de maneira rápida; Planejar
cardápio - alinhar com registro da alimentação; Salvar cardápios; Sugerir
receitas baseadas no que a pessoa gosta e não gosta, e na capacidade
de comprar; Visualizar se tem conseguido manter o hábito; Visualizar
Progresso; Criar refeições; Comprar no app; Sugestão de alimentos
bons e baratos para comprar; Criar Receitas; Visualizar metas e Criar
metas. Este processo também foi importante para entender como a ideia
poderia ser monetizada, que seria por meio das vendas de alimentos pelo
aplicativo, para isso seria necessário o contato com empresas e fazer o
intermédio entre elas e o consumidor dos produtos e do aplicativo.
3. INSTAURAÇÃO
Na fase de Instauração, primeiramente foi realizado o Sitemap

que segundo (Teixeira, 2014) é um diagrama das páginas do aplicativo
organizadas hierarquicamente, ela ajuda a visualizar a estrutura básica
e a navegação entre as telas. O sitemap criado para o aplicativo está
na imagem abaixo, em rosa é o momento que o usuário acessa ou se
cadastra no aplicativo, em laranja as telas principais do aplicativo ou as
“áreas” deste, as partes que fazem parte do menu, e em amarelo o que
há dentro de cada uma dessas área.
A segunda etapa da fase da fase é pensar na Arquitetura
de Informação, o Design de Interação e a Usabilidade, esses três
princípios foram materializados em Rabiscoframes e Wireframes que
serão descritos em seguida. Segundo (Teixeira, 2014) a Arquitetura
de Informação teve base na biblioteconomia, nela é necessário
pensar como as informações serão organizadas na tela, como serão
agrupadas, ordenadas e hierarquizadas, portanto, como será a
estrutura do produto digital.
223
Figura 10 - Sitemap
Fonte: autora
Já o Design de Interação é a maneira que o usuário interage

com a interface, o que acontece quando ele clica, arrasta, escreve em
cada elemento, também como é a interação entre telas. A Usabilidade
basicamente se caracteriza por ter interfaces fáceis de usar, se o usuário
consegue realizar uma tarefa sem problemas e se segundo (Krug, 2014)
essa pessoa não utiliza muito tempo nem muito esforço cognitivo para
realizar a tarefa, para este autor a primeira lei ou regra de Usabilidade
é “Não me faça pensar”. Seguir todos estes princípios foi um objetivo
durante o desenvolvimento do aplicativo, e para isso, foi necessário
colocar todas essas ideias no papel.
Assim, o primeiro recurso utilizado foram os Rabiscoframes, que
foram feitos de maneira bem rudimentar, alguns deles estão na imagem
a seguir (Figura 11).
224
Figura 11 - Rabiscoframes
Fonte: autora
Segundo (Teixeira, 2014), a palavra Rabiscoframe é uma união entre

a palavra “rabisco” e “wireframe”, esse recurso tem como objetivo pensar e
desenhar as alternativas de telas de maneira informal, utilizando papel,
lápis e canetas (a borracha é dispensável), ajuda no pensamento criativo
e organizacional, além de se uma maneira de mostrar as primeiras ideias
de maneira simples e rápida.
A partir do Rabiscoframe foi realizado o Wireframe, que de acordo
com (Teixeira, 2014), é um desenho básico, mais avançado, da estrutura
da interface, que busca mostrar de maneira simplificada como deve ser o
produto final. Este recurso permite visualizar a navegação, as interações,
se há necessidade de mais telas para realizar uma determinada tarefa,
a disposição e quantidade de informações, e outros requisitos que a
interface permita Durante o processo, as telas foram realizadas em
tons de cinza, esta foi a etapa mais longa do projeto, pois o objetivo era
conseguir resolver bem a interface para depois partir para as decisões
de Design Sensorial e alterações finais, portanto, houve muita iteração
durante a etapa.
225
Figura 13 – Wireframes
Fonte: autora
O Design Sensorial foi definido, a primeira parte foram os ícones,

em que por questões de tempo, foram utilizados os ícones da plataforma
FontAwesome, muito conhecida por desenvolvedores e utilizada em
vários projetos do mundo. No futuro, os ícones serão desenhados,
portanto, exclusivos. Abaixo estão os ícones utilizados da plataforma.
226
Figura 13 – Ícones FontAwesome
Fonte: Ícones FontAwesome
A segunda parte é a escolha da fonte que seria utilizada na

interface, a busca foi por uma fonte gratuita e mais amigável, geométrica
com formas mais arredondas e não alongada, sem serifa e minimalista.
Durante o Wireframe foram utilizadas a Source Sans e a Segouei UI, mas
por fim, a fonte escolhida foi a Muli disponibilizada pelo Google Fonts,
criada por Vernon Adams e foi projetada principalmente para uso como
fonte digital, mas também pode ser usada como fonte de texto. O único
problema que ela apresentou foi pouca diferença entre pesos.
Figura 14 – Caracteres fonte Muli
Fonte:
A terceira parte foi a escolha de cores, várias opções foram

testadas, mas por fim a opção que teve melhor desempenho na interface
foram um tom de azul, um de verde e um de laranja. Além disso, foram
escolhidos quatro tons de cinza e um de branco para os neutros. Algumas
das opções testadas vão ser aplicadas na opção de personalização que
será aplicada futuramente no projeto. Além disso, o padrão de tamanho
de telas utilizado foi o Android (360x640).
227
Figura 15 – Cores
Fonte: autora
Posteriormente, os ícones, as ilustrações, a fonte e as cores foram

aplicados a interface, neste período, houve muita iteração e revisão
de como as telas ficariam. Em seguida, as telas desenhadas foram
prototipadas, que seria criar links entre as telas para poder realizar os
testes de usabilidade. O software utilizado para isso foi o Adobe XD
de autoria da empresa Adobe Inc. Além disso, para os Empty States
temporariamente ilustrações do site UnDraw foram utilizadas, mas
futuramente ilustrações exclusivas vão ser desenhadas.
4. INSPEÇÃO
Na etapa de Inspeção foi realizado testes de usabilidade que

segundo (Krug, 2014) consistem em observar uma pessoa (usuário)
realizando tarefas na interface que está sendo utilizada, e verificar se
esta pessoa está conseguindo realizar as tarefas com sucesso e rapidez,
para que assim seja possível entender o que não está funcionando na
interface. Krug recomenda que para o teste sejam elaboradas as tarefas
como um roteiro, com uma sequência de eventos, que seja realizado
num lugar calmo e que a pessoa tenha atenção a interface, além disso,
que tenha apenas uma pessoa dirigindo o teste e anotando as tarefas.
Todas essas recomendações foram seguidas, porém ele aconselha que
o teste seja filmado e gravado o áudio da conversa, infelizmente não foi
possível de ser realizado por conta de ausência de estrutura.
O teste foi realizado com três pessoas, as tarefas que realizaram
de maneira sequencial foram as seguintes: Se cadastre no aplicativo;
adicione um lembrete de refeição; adicione um lembre de água; registre
228
a água consumida; registre o café da manhã; conclua um lembrete de
refeição; conclua um lembrete de água; crie uma refeição; como você
editaria uma refeição; adicione uma refeição ao registro de alimentação
do café da manhã; crie um alimento; salve uma receita rápida; crie uma
receita; faça uma lista de compras; favorite a lista de compras; adicione um
produto sugerido carrinho de compras; adicione uma maçã ao carrinho
de compras; adicione uma alface do mercado vermelho ao carrinho de
compras; compre todos os alimentos adicionados no carrinho; visualize
seu progresso; monitore o seu corpo; visualize suas metas e objetivos no
app; faça o teste de quão saudável você é.
O resultado do teste foi muito positivo, os usuários conseguiram
realizar todas as tarefas, mas houveram certos atritos durante os testes,
são eles: O Registro da Água Consumida está difícil de entender e
visualizar, além de que era necessária uma maneira de editá-lo; Na
pesquisa de alimentos, estava confuso os salvos; Alimentos salvos
se confundem com adicionar alimentos; Ter opção de não colocar
as instruções; Botão de finalizar compra e continuar a comprar se
confundem; Aumentar o tom de cinza do botão desativado; Carrinho de
Compras mais visível; Falta o botão alterar no “corpo”.

Figura 15 – Algumas das telas finais
Fonte: autora
Após essa análise, a interface foi alterada e finalizada, a última

versão dela será apresentada neste artigo, mas posteriormente ela
229
ainda sofrerá alterações, pois, além de ser necessário mais testes de
usabilidade, algumas funcionalidades não foram aplicadas por questões
de tempo de entrega, são elas: o teste de quanto a pessoa é saudável
e a função de poder adicionar metas. Como todo projeto se encontra
atualmente pode ser acessado pelo o link: Protótipo Livethy.
5. INSTAURAÇÃO
A última fase da metodologia 5I’s é a Implementação, porém

esta fase ainda não foi aplicada ao projeto. Para realizá-la é necessário
desenvolver o projeto em código e iterar novamente, além disso é
preciso a criação de um banco de dados muito grande de alimentos
e o acompanhamento de nutricionistas para que todo o conteúdo da
interface esteja devidamente correto.
Todo o processo do projeto mostrou como o desenvolvimento de

uma interface é complexo e longo, pois é necessário muito estudo e
pesquisas para poder realizar uma interface com qualidade e que atenda
às necessidades do usuário. Com a metodologia 5I’s foi possível projetar o
aplicativo de maneira adequada, a flexibilidade da metodologia também
auxiliou no processo, fazendo que cada etapa pudesse ser adaptada e
ordenada da maneira que fosse necessário. A leitura e estudo dos livros:
Introdução e boas práticas em UX Design de Fabrício Teixeira e Não Me
Faça Pensar de Steve Krug, ajudaram a entender cada passo e realizá-los
de maneira correta, além disso, foi possível trabalhar com conhecimento
sobre a Usabilidade do aplicativo, princípio profundamente importante
em UX/UI Design. Apesar de problemas durante o desenvolvimento, o
resultado final do projeto foi muito satisfatório.
REFERÊNCIAS
GASPARETTO, D. A metodologia 5I’s na projetação do aplicativo Baloo. 2018.
TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do Código.,

2014
STEVE, K... Não Me Faça Pensa: atualizado: uma abordagem de bom senso à
usabilidade web e mobile. Rio de Janeiro: Alta Books, 2014
230
231
UX Design no desenvolvimento de um
aplicativo para comunicação na
área de construção civil
Joao Vitor de Mello
RESUMO: Este trabalho tem como objetivo mostrar a projetação do

aplicativo MINHA OBRA, cuja principal função é resolver problemas
de comunicação com profissionais da área da construção civil e
seus clientes. Após pesquisas realizadas, via Google Forms, durante
o primeiro semestre de 2018 com pouco mais de 50 respostas, no
contexto acadêmico, foi constatada uma insatisfação na forma como
os clientes se comunicavam com os profissionais, através de redes
sociais e aplicativos de conversação, muitas vezes em horários e dias
importunos. A metodologia utilizada na projetação foi a 5I’s desenvolvida
pela professora Débora Aita Gaspareto no Laboratório de Interface do
curso de Desenho Industrial na Universidade Federal de Santa Maria,
baseada nos autores, (Garret, 2011), (Lowdermilk, 2013) e (Teixeira, 2014).
Para a criação do protótipo Interativo foi utilizado o Software Adobe XD.
Como resultado, esperamos desenvolver um aplicativo que atenda as
necessidades citadas pelos usuários através da pesquisa.
1. INTRODUÇÃO
Nos dias de hoje, com a tecnologia avançada e os meios de

comunicação cada vez mais atualizados, ficou muito mais rápido e fácil se
comunicar com pessoas do mundo todo em segundos, em contrapartida,
essa facilidade de mandar mensagens instantâneas para as pessoas
também causa desconforto se utilizada sem limites.
A ideia do aplicativo Minha Obra veio através da falta de uma
interface própria para comunicação e troca de informações entre
profissionais da construção civil e clientes. Além de sanar esse gap, o
aplicativo mostra ao usuário informações sobre o andamento de obras
e reformas, atualiza o cliente de como vai a sua reforma através de
fotos, vídeos e comentários adicionados pelo profissional em tempo
232
real, e ainda conta com um bate-papo dentro do aplicativo, isso faz com
que a comunicação entre eles fique exclusivamente pelo aplicativo,
dispensando outros de uso pessoal.
2. METODOLOGIA
A metodologia usada dos 5I’s é composta por cinco etapas: Ideação,

Inambulação, Instauração, Inspeção e Implementação. A primeira fase
da metodologia, Ideação tem as fases de Briefing, Brainstorm, Mapas
Mentais, Pesquisas com Usuários, Percepção|Cognição|Neurociência,
Personas, Busca de Referências, Atlas Mnemosyne. No decorrer do texto
será apresentada cada fase da metodologia relacionada à projetação
do aplicativo.
3. IDEAÇÃO
O briefing foi feito respondendo algumas perguntas como,

Problema: Falta de um meio de comunicação direto entre cliente-
profissional no campo da construção civil e mais especificamente na área
de arquitetura O quê: Uma interface que possibilite ao profissional da área
mostrar para o cliente o andamento do projeto. Como? Por meio de um
aplicativo que disponibilize através de fotos, textos e videos, informações
instantâneas de como está o projeto. Por quê? Para diminuir ligações e
mensagens desnecessárias e para organizar as informações tudo em um
único aplicativo. Para quem? Para arquitetos, engenheiros, escritórios e
seus clientes. Em que lugar? O app será usado pelos profissionais durante
as obras e processos de reforma, e pelo cliente a qualquer momento que
tiver interesse.
Nesta primeira fase também foi feito o Atlas Mnemosyne que onde
reunimos diversos momentos e imagens de referências sobre o aplicativo
e onde as pessoas poderiam utilizá-lo. Na Figura 1 há uma mescla de
Atlas com Pontos de Contato.
233
Figura 1 - Atlas Mnemosyne.
Fonte:Autor, 2019.
Nesta fase também foi aplicado um questionário através do

Google Forms, com o objetivo de perceber os principais problemas e
necessidades do público-alvo, o questionário foi destinado a arquitetos
e engenheiros civis, com perguntas como “Qual o nível de satisfação
em relação a comunicação com o cliente por meios de aplicativo de
mensagens“ deixando a resposta com uma escala de 0 a 5 para preencher.
Abaixo alguns resultados obtidos:
Figura 2 - Resultados da pergunta 1.
Fonte: Autor 2019.
234
Figura 2 - Resultados da pergunta 2
Fonte: Autor, 2019.
Após foram criadas 3 personas como possíveis usuárias do

aplicativo, foram descritas três vidas distintas com suas profissões,
idades, e hobbies diferentes, abordando em que situações elas usariam
a interface. A partir das personas foi possível identificar funcionalidades
ainda não descritas.
Figura 3 - Persona 1.
Fonte: Autor 2019
Com base nas personas criadas foram definidos alguns requisitos

como: Ser de fácil manuseio para os clientes; Ter onde colocar muitas
fotos do andamento; Informar sobre gastos imprevistos; Check-list de
etapas; Compartilhar informações; Enviar notificações avisando tarefas
concluídas; Ser um app simples e direto; Ver informações e fotos; pode
comentar nas atualizações do andamento; Receber notificações quando
houver problemas
235
Em contrapartida, também foi criada a persona pensando no
usuário da plataforma, um perfil jovem com o dia corrido, que gostaria
de conferir tudo por um aplicativo de uma forma mais organizada, com
fotos, videos, bate papo de como anda a obra e assim poder acompanhar.
4. INAMBULAÇÃO
A fase dois da metodologia chamada inambulação, inclui as

fases de requisitos, funcionalidades, as heurísticas e tecnologia
usada. As funcionalidades do aplicativo ficaram definidas por Notificar
Tarefas concluídas; Cronograma; Compartilhar imagens e vídeos;
Compartilhar briefing estabelecido; Compartilhar arquivos; Espaço
para mensagens e recados; Notificações para possíveis imprevistos;
Novidades e Comentários.
Na criação do aplicativo foi decidido dividi-lo em duas partes: a do
profissional e a do cliente. Na primeira, apenas o profissional tem acesso,
apresentando mais funções e oferecendo a liberdade de adicionar,
editar e excluir etapas, e a versão do cliente com as funções de visualizar
todo processo, adicionar comentários quando necessário. O bate-papo
é compartilhado com os dois perfis, assim evitando comunicação por
outros meios.
A escolha da tecnologia para o desenvolvimento do protótipo
foi do software Adobe XD, que configura-se como uma ferramenta de
prototipagem interativa, a qual possibilita realizar a criação de telas e
a interação de alta fidelidade com estilos (tipografia, cores, tamanhos,
posicionamentos) e fluxo de navegação pré definidos.
Na etapa de Instauração foram realizados rascunhos de sitemap
e rabiscoframes (figura 4) para melhor visualizar as telas do aplicativo,
logo após testes com o usuário também foram feitos para que fossem
estudados como seriam os comportamentos do usuário durante a
interação com o aplicativo.
236
Figura 4 - Rabiscoframes.
Fonte: Autor 2019.
Logo após ainda na primeira etapa desta fase da metodologia,

antes de começar a prototipagem do aplicativo no software, foram
desenhados os wireframes com o intuito de decidir qual melhor lugar
para os menus, botões e imagens, na figura 05 podemos ver a tela de
login e as telas iniciais do aplicativo.
Figura 5 - Wireframes
Fonte: Autor 2019
Nas telas abaixo, podemos ver o resultado da primeira

prototipação de alta fidelidade do aplicativo, realizado no laboratório
profissionalizante de interface, definindo a escolha de cores, tipografia
e ícones, e inserindo as primeiras interações entre telas, assim podendo
testar com os possíveis usuários.
237
Figura 6 - Protótipo versão 1.
Fonte: Autor, 2019
Durante a realização do laboratório orientado de interface, em

2019, foi desenvolvida a versão 2 do protótipo, após testes feitos com os
colegas foram identificados alguns problemas na usabilidade. A versão
2 do aplicativo foi pensada como uma interface mais limpa e minimalista,
deixando somente o essencial na tela, e levando em consideração as 10
heurísticas de Nielsen, como Consistência e padronização, em todas as
telas da interface, e Estética e design minimalista.
Figura 7 - Telas do aplicativo geradas pelo Adobe XD. Fonte:
Autor, 2019.
238
Na escolha das telas foi usado um layout com poucas informações
na tentativa de ser simples e usual com um design mais flat, como
pesquisado nos autores voltados para UX design. Segundo Teixeira
(2017,p. 32) “A linguagem visual das interfaces digitais amadureceu
muito nos últimos anos; foi ficando mais sóbria, flat, com menos
elementos decorativos e mais foco em permitir que o usuário realize
tarefas com facilidade.”
A fonte escolhida para identidade visual do aplicativo é Montserrat
feita por Julieta Ulanovsky, e a família tipográfica no aplicativo foi Rubik
dos criadores Hubert & Fischer, fontes que são bem legíveis, retas e sem
serifa para complementar o design do aplicativo.
Os estilos de parágrafos foram definidos como tamanho em texto
corrido Rubik 12, títulos Rubik Bold 14 e as outras informações menos
importantes com Rubik regular 10.
Já as cores predominantes no Aplicativo Minha Obra ficaram por
laranja assim como na logo, e azul como cor complementar, essa escolha
também ajuda no contraste da cor do texto auxiliando a acessibilidade, e
a coleção de ícones foi editada a partir de ícones prontos do site flaticon.
com, um site com bastante variedades de ícones, e de compatibilidade
com os softwares de prototipagem.
Na imagem abaixo podemos ver o padrão cromático do aplicativo,
como cores principais, de apoio e cores para os textos, e também a família
tipográfica que foi utilizada na interface.
Figura 7 estilo do aplicativo.
Fonte: Autor, 2019.
Apesar problemas pontuais na criação do protótipo, a interface

continuará sempre tendo que fazer algumas mudanças e alterações,
mas o objetivo principal foi alcançado tendo um protótipo de alta
239
fidelidade do aplicativo mostrando as principais ferramentas de
comunicação e compartilhamento de imagens e vídeos entre o
profissional e o cliente, incluindo as interações entre telas e mostrando
avisos de erro quando necessário.
O projeto trouxe a oportunidade de aprender novas ferramentas
de prototipagem como software Adobe XD e novos métodos de
aprendizado como a metodologia dos 5I’s. O protótipo continuará em
desenvolvimento para o trabalho de conclusão de curso em 2020,
aprofundando o conhecimento em UI/UX design e nas ferramentas de
desenvolvimento de interfaces.
REFERÊNCIAS
TEIXEIRA, F T Introdução e boas práticas em UX Desgign -- São Paulo : Casa do

Código, 2017.
Site Adobe fonts , 2019. Disponível em: <https://fonts.adobe.com/fonts/rubik#fonts-

section>. Acesso em: 13, de dezembro de 2019.
Site flat icon, 2019. Disponível em: <https://www.flaticon.com/L>. Acesso em: 13, de
dezembro de 2019.
Site Adobe XD, 2019. Disponível em: <https://www.adobe.com/br/products/xd/

details.html>. Acesso em: 13, de dezembro de 2019.
O que é UI Design 2019. Disponível em: <https://designculture.com.br/o-que-e-ui-

design-e-ux-design>. Acesso em: 13, de dezembro de 2019.
10 heurísticas de Nielsen para o design de interface. Disponível em: <https://brasil.

uxdesign.cc/10-heur%C3%ADsticas-de-nielsen-para-o-design-de-interface-
58d782821840>.Acesso em: 13, de dezembro de 2019.

240
241
A projetação do aplicativo SmartHomie
Gustavo Lago Quatrin
RESUMO: O propósito desse artigo é descrever a projeção da interface do

aplicativo SmartHomie, a partir do uso da metodologia 5I’s, desenvolvida
pela professora Débora Aita Gasparetto, docente do Curso de Desenho
Industrial da UFSM. O aplicativo está vinculado ao projeto Neurociência e
Design de Interface: projetando para a Internet das Coisas, desenvolvido
junto ao Grupo de Pesquisa Design, Ciência e Tecnologia UFSM/
Cnpq. A proposta permite ao usuário o controle remoto de dispositivos
inteligentes conectados à rede, possibilitando a criação de rotinas,
modos e programação diária. Como resultado espera-se entender
melhor as necessidades e requisitos do usuário, assim como a aplicação
e compreensão da metodologia utilizada.
1. INTRODUÇÃO
Para o desenvolvimento do aplicativo foi utilizada a metodologia

dos 5i’s, desenvolvida para um contexto acadêmico, visando unir o design
centrado no usuário, de Lowdermilk (2013) e os elementos de experiência
de usuário sugeridos na metodologia de Garret (2011). Ainda, aspectos
práticos de projetação têm base em Teixeira (2014). A metodologia é
composta por cinco fases: Ideação, Incubação, Implementação, Inspeção
e Instauração, todas com foco no usuário e na experiência de usuário. A
seguir, descreve-se cada uma dessas etapas no contexto do SmartHomie.
2. A IDEAÇÃO DO APP SMARTHOMIE
Com a limitação de tempo do nosso estilo de vida contemporâneo

há uma revolução tecnológica pervasiva, que visa conectar ítens
de nosso dia a dia à internet e dispositivos como computadores e
smartphones, derrubando barreiras entre o físico e o digital. Em 1999,
242
Kevin Ashton do MIT sugeriu o termo “Internet das Coisas” para este
fenômeno que vem ganhando forças a cada ano. Atualmente, são muitos
os objetos conectados, como eletrodomésticos, elevadores, carros,
entre outros dispositivos, desde pequenos gadgets, como relógios, até
equipamentos de alta complexidade.
O aplicativo SmartHomie surgiu desta idéia, buscando facilitar o
controle de aparelhos eletrodomésticos, TV’s e luzes de nossa casa a
partir do smartphone, com o objetivo de trazer maior praticidade para
nossa rotina.
O briefing foi montado do seguinte modo: O QUE: Aplicativo
que possibilite o controle de dispositivos inteligentes remotamente
COMO: Projetação de aplicativo que possa integrar e controlar diversos
dispositivos inteligentes diretamente do smartphone e em qualquer
lugar PORQUE: Para ter praticidade, segurança e melhoria de vida PARA
QUEM: Para pessoas com pouco tempo interessadas em praticidade
POR QUEM: Pelas pessoas interessadas em tecnologia que passam o dia
fora de casa EM QUE LUGAR? Em residências, escritórios ou lojas.
No Brainstorm foram levantadas diversas palavras, dentre elas:
praticidade, automatização e controle remoto de aparelhos inteligentes.
A partir daí surgiu a ideia do aplicativo ser chamado de “SmartHomie”,
sendo “Homie” um amigo de casa e “Smart” inteligente.
Na fase de ideação houve uma busca por referências de interfaces
com propostas parecidas. Foram encontrados alguns aplicativos para
controle de eletrodomésticos e eletroportáteis, o primeiro, Stringify
conta com a criação de “Flows” que é basicamente a conexão de duas
coisas para criar uma experiência automatizada, tendo ao menos um
“trigger” e uma “action”, funcionando com aplicativos e eletrodomésticos.
Também foi estudado o aplicativo “Housy”, voltado somente à casa
e aos eletrodomésticos, possibilitando o controle de luzes, câmeras,
alarmes, sensores de presença, persianas, entre outros eletrônicos com
a possibilidade de serem conectados virtualmente.
Outro elemento a ser pensado nessa primeira fase da pesquisa é
a elaboração do Atlas Mnemosye (Figura 1). Essa metodologia vem da
História da arte, a partir dos estudos do historiador cultural Aby Warburg,
que buscava elementos comuns em imagens de diferentes áreas,
compondo um painel. Essas imagens de referências trazem pontos
em comum que auxiliam o desenhista a planejar o conceito que busca
para a proposta. Esta etapa é uma referência estética para a criação da
243
interface. Nas referências buscou-se tecnologia, desde smartphones até
espelhos interativos e uso de luzes neon.
Figura 1: Atlas Mnemosyne do aplicativo SmartHomie.
Fonte: Autor
Após foi realizado o mapa mental, onde foram organizadas as

funcionalidades e necessidades a serem preenchidas pelo aplicativo,
como o controle da intensidade e cor das luzes, planejamento e
acompanhamento de alarmes, câmeras e trancas, climatização, persianas
retráteis, captação de energia solar e água da chuva entre outros.
Figura 2: Mapa Mental aplicativo SmartHomie.
Fonte: Autor
244
Foram aplicadas pesquisas com usuários a partir do Google Forms
para ajudar a nortear o projeto quanto aos consumidores do aplicativo.
Essas pesquisas com possíveis usuários do aplicativo ajudaram a nortear
o projeto. A partir de algumas dessas respostas guiaram a elaboração
das personas (figura 2) como comportamento, frustrações, objetivos e
tarefas diferentes e condizentes com a ideação do aplicativo.
Figura 4: Pesquisa
Fonte: Autor
O questionário online contava com 10 perguntas divididas em

blocos. O primeiro conta com informações pessoais do usuário. O
segundo com perguntas em escala relacionada a preferências pessoais
e gostos e o terceiro com perguntas como “Que sistema operacional
você usa no celular?”, “Você passa muito tempo fora de casa?”, “Costuma
utilizar aplicativos que auxiliem na rotina?”, “Você utilizaria um aplicativo
para controlar os eletrônicos de sua casa?” e “Marque os dispositivos que
gostaria de controlar remotamente”, assim podendo trazer uma maior
compreensão das necessidades de cada usuário.
Os resultados da pesquisa com usuários geraram dados que foram
utilizados na criação de três personas com diferentes necessidades.
Esta última (Figura 2), Cardigan da Silva, representa pessoas que tem um
estilo de vida agitado e não passam muito tempo em casa e gostariam
de acompanhar a rotina para ter mais confiança e segurança quanto à
sua família e moradores.
245
Figura 2: Persona criada para o projeto SmartHomie.
Fonte: Autor
Os pontos de contato foram pensados a partir de imagens que
simulam onde o aplicativo seria utilizado, como no trânsito, enquanto
volta do trabalho, ao acordar, ao estar viajando, entre outras situações.
3. INAMBULAÇÃO
Na fase de inambulação, destacam-se os segundos requisitos,

levantados a partir das personas: - Ter acesso às câmeras de
segurança diretamente do smartphone; - Acompanhamento do fluxo
da casa, sensores de presença; - Controle de portas, trancas e outros
eletrodomésticos à distância; - Otimização da rotina; - Possibilidade de
diferentes rotinas de iluminação.
Já os requisitos de funcionalidade são os seguintes: Acesso ao Wifi,
câmera, GPS, notificações, criação de rotinas para os apps adicionados,
controle individual e em grupo, organização por cômodos, acesso
em tempo real às câmeras, controle de alarme e fechaduras e planner
vinculado à casa.
A Análise Heurística foi realizada com o aplicativo Loxone, que
apresentou falhas nos seguintes tópicos: prevenir erros, boas mensagens
de erro e ajuda na documentação. Pois alguns aparelhos são adicionados
sem muitos requisitos e podem ficar com erros.
A tecnologia de prototipagem escolhida foi o UXPIN. Em relação
às tecnologias de implementação e sistema operacional utilizado pelos
usuários optou-se por desenvolver para o sistema iOS.
246
4. INSTAURAÇÃO
Esta fase inicia com o sitemap, levantando os rótulos necessários,

tela por tela. Tela 01 - Carregamento; Tela 02 - Primeiros passos; Tela 03 -
Cadastro/login; Tela 04 - Timeline; Menu: perfil, casa, planner, aparelhos,
configurações, sobre. Logo, os rabiscoframes (TEIXEIRA, 2014) orientam
como o conteúdo será exposto, como na figura abaixo.
Figura 3: Site Map.
Fonte: Autor
Figura 3: Primeiros rabiscoframes do aplicativo SmartHomie.
Fonte: Autor
247
Após o Sitemap e Rabiscoframes, foi realizado o card sorting, onde
percebeu-se que faltavam botões de adicionar novo aparelho e de editar
em algumas telas. Após acrescentar esse conteúdo, partiu-se direto para
o UXPIN para criar uma versão interativa e simplificada do projeto (Figura
4), para testar o fluxo e interações.
Figura 4: Telas do protótipo interativo do aplicativo SmartHomie no UXPIN.
Fonte: Autor
5. INSPEÇÃO
A fase de inspeção veio com testes com usuários, na própria

plataforma UXPIN, onde eles comentavam no aplicativo o que
conseguiam ou não fazer das tarefas dadas a eles. Os testes aconteceram
durante as aulas, com um dos alunos do laboratório fazendo as tarefas e
os demais observando e anotando outros modos de interação que lhes
ocorriam para cada tarefa.
A partir dos testes obteve-se a seguinte avaliação: Ícones e linhas
poderiam estar com a mesma espessura, as câmeras de vigilâncias
poderiam ter popups para cada cômodo, necessidade de um botão de
editar e adicionar novo para cada dispositivo, melhorar o contraste da
tela configurações e possibilidade de um gráfico.
Essa fase de inspeção gerou a iteração do protótipo. Assim, voltou-
se à fase de instauração, onde foram realizadas as alterações para
248
atender as demandas do usuário, permanecendo na mesma ferramenta
de prototipagem do UXPIN.
6. ITERAÇÃO - RETORNO À INSTAURAÇÃO - INSPEÇÃO - RETORNO À

INSTAURAÇÃO
Foram realizadas as alterações necessárias levantadas no
processo de Inspeção.
7. IMPLEMENTAÇÃO
Esta etapa ainda não foi implementada devido à não finalização
do protótipo, que ainda irá passar por outras avaliações de usuários para
assim aprimorar o projeto.
8. RESULTADOS E CONSIDERAÇÕES PARCIAIS
A metodologia 5I`s foi muito eficaz na projetação da interface,

apresentou bases muito fundamentadas desde a primeira fase do
projeto. Levando em consideração que conta com o design centrado no
usuário de Lowdermilk e elementos de experiência de usuário de Garret,
a metodologia torna-se completa e muito eficaz.
REFERÊNCIAS
GASPARETTO, D. A.; PEDROZO, D. D. ; OLIVEIRA, F. . Design Conectado: por um

mundo de experiências. Estudos em Design (Online), v. 24, p. 146-165, 2016.


2014.
249
250
Protótipo Interativo para o aplicativo de
mobilidade urbana Meet
Julia Lima
RESUMO: Este artigo aborda a prototipagem do aplicativo Meet, que

tem como objetivo auxiliar condutores de veículos na procura por vagas
em estacionamentos rotativos ou privados, viabilizando a reserva e
pagamento pelas vagas. Com base em dados coletados na pesquisa,
observou-se a ausência de softwares de mobilidade urbana que
contenham informações necessárias para atender as necessidades
dos usuários na cidade de Santa Maria-RS. A metodologia utilizada na
projetação foi a metodologia 5 I’s desenvolvida pela no Laboratório de
Interfaces DI/UFSM, baseada nos autores, (Garret, 2011), (Lowdermilk,
2013) e (Teixeira, 2014). Como resultado pretende-se melhorar a condição
de deslocamento das pessoas nos espaços urbanos, visando o equilíbrio
entre os aspectos ambientais, econômicos e sociais.
1. INTRODUÇÃO
Em dias atuais, a mobilidade urbana está diretamente ligada

às atividades cotidianas das pessoas, com crescimento urbano e o
aumento do uso excessivo de veículos a poluição do meio ambiente tem
aumentado progressivamente.
As cidades inteligentes buscam por meio de projetos utilizar a
tecnologia para solucionar as necessidades sociais e econômicas da
sociedade no gerenciamento e planejamento de um determinado
espaço urbano.
A proposta de desenvolver um aplicativo para mobilidade urbana
surgiu por meio de uma experiência negativa obtida em um percurso
recorrido diariamente. Assim, como todo o projeto de design, focamos na
resolução de um problema.
Existe uma falha no segmento de serviços de GPS para
smartphones ou dispositivos móveis similares que contenham
251
informações e detalhes sobre estacionamentos e vagas disponíveis em
estabelecimentos, dependendo da localização do dispositivo portátil na
rede, portanto este projeto visa ocupar este espaço.
A metodologia 5 I’s foi desenvolvida para o contexto do Laboratório
de Interface do curso de Desenho Industrial na UFSM para auxiliar
no desenvolvimento de interfaces interativas centradas no usuário/
interator. O modelo é composto de cinco etapas: Ideação, Inambulação,
Instauração, Inspeção e Implementação.
Em seu desenvolvimento, a etapa 1 foi nomeada como Ideação,
com isso foram realizados o briefing e o brainstorm. Na elaboração do
briefing dos projetos, foram respondidas as questões básicas: “O quê?
Como? Porquê? Para quem? Por quem? Em que lugar?”. Com isso, o
brainstorm reuniu informações para estimular o pensamento criativo
através de palavras e novos conceitos a fim de gerar alternativas para a
concepção do projeto.
Para tanto, foi elaborado um Atlas Mnemosyne, método utilizado
pelo historiador Aby Warburg (2015) que compreendia relacionar os
pontos de contato entre essas imagens, trabalhando a sobrevivência
da forma. No processo de desenvolvimento para a concepção do Atlas
Mnemosyne foram usadas como referência imagens condizentes a
temática do aplicativo e em que lugar a pessoa faria o uso do mesmo. A
Figura 1 traz essa mistura de Atlas com Pontos de Contato.
Figura 1 - Atlas Mnemosyne,
Fonte: autora
252
Os mapas mentais primeiramente foram realizados manualmente
para que o desenhista tivesse a liberdade de expressar simultaneamente
suas ideias no papel e através do aplicativo de mapeamento mental
online Mindmeister.
Figura 2 - Mapa mental realizado no aplicativo Mindmeister.
Fonte: autora
A partir da etapa de Inambulação, busca-se estruturar os

requisitos e funcionalidades de cada persona criada em relação às suas
necessidades, questões técnicas e tecnologia a serem usadas. Além
disso aplica-se uma pesquisa para a análise de referências voltada às
interfaces concorrentes para o aperfeiçoamento do projeto.
A sistematização da arquitetura de informação e do design de
interação na fase de Instauração, incluem a produção de protótipos em
papel e interativos, passando pelas técnicas iniciais de rabiscoframes,
sitemap e cardsorting, para incluir o usuário no projeto e solucionar seus
problemas.
253
Figura 3 - Protótipo em papel do aplicativo Meet.
Fonte: autora

Então, a partir da fase 4 da Inspeção, com base nos testes de
usabilidade e acessibilidade realizados com os usuários foi possível partir
para o design sensorial e a estética do que o aplicativo terá em si.
2. A METODOLOGIA 5I`s EM UM APLICATIVO DE MOBILIDADE URBANA
Para a estruturação do briefing com o cliente foram identificados

os problemas tanto estéticos como técnicos que o usuário encontrava
ao estacionar seu veículo em um estacionamento. Dentre essa lista de
requisitos estavam: (i) localizar estacionamentos próximos; (i) meios
de pagamento através de cartão de crédito e débito; (iii) possibilidade
de visualizar e reservar vagas disponíveis; (iv) possibilidade de salvar a
localização de seu veículo; (v) exibir o tempo restante para vencimento
do seu ticket no estacionamento pago ou estacionamento rotativo; (vi)
definir se prefere pagar mais barato ou um lugar mais próximo, (vii) quanto
tempo pretende ficar estacionado e qual o tipo de veículo utilizado,
vaga especial ou não e (viii) possuir duas interfaces, uma para o dono do
estacionamento e outra para o usuário, o que exige um perfil.
254
2.1. Ideação e Inambulação do aplicativo Meet
A fase de Ideação teve início com o briefing estruturado com base

nas perguntas iniciais, já relacioandas, para identificar problemas a serem
solucionados durante o projeto
Após a problematização realizaram-se exercícios mentais
como Brainstorming e Mapas mentais com referência na palavra
estacionamento, e desta forma organizadas as informações sobre o
esqueleto dos elementos que seriam encontrados na interface
Na pesquisa com usuários, buscou-se aplicativos e sites de
mobilidade urbana e softwares disponibilizados gratuitamente em
serviços de distribuição digital a fim de utilizá-los como referência no
desenvolvimento de funcionalidades e requisitos.
Conforme a metodologia utilizada, foi realizada uma pesquisa
online via Google Forms, estruturada por perguntas rápidas para que
auxiliassem na definição dos requisitos e funcionalidades. A partir dos
relatórios e dados coletados foram definidas cinco personas chamadas
de (i) Laura, (ii) Felipe, (iii) Renato, (iii) Camila e (iv) Ricardo.
Figura 4- Questionário online realizado no Google Forms.
Fonte: autora
Essas cinco personas sintetizam o público alvo esperado para o

aplicativo Meet, criadas com requisitos distintos especificamente para
255
identificar os usuários que usariam o aplicativo, todas elas procuram
otimizar seu tempo de trajeto e filtrar estacionamentos conforme sua
preferência.
Após a definição das personas foram analisados aplicativos
de mobilidade urbana e gestão de estacionamentos para IOS e
Android, destacam-se Let’s park, aplicativo gamificado para localizar
estacionamentos, SJS Estacionamento, aplicativo para estacionamento
rotativo do município do interior de São José dos Campos em São Paulo e
Jump Park Gestor, um aplicativo para gestores que buscam gerenciar seu
estacionamento em tempo real. Ainda foram considerados aplicativos
voltados a locomoção urbana ; Waze e Garupa.
Os pontos de contato foram realizados a partir de imagens que
representassem os lugares em que o app será utilizado, por exemplo, no
carro, no estacionamento, no shopping com os amigos, ao se locomover
para o trabalho, entre outros casos.
A análise heurística foi feita sobre o aplicativo de reserva de
estacionamento Let’s Park, que possui mais de 10 mil downloads no
Google Play, com nota 3,5. Assim foram analisadas diversas falhas
em sua interface como em botões, interações e carregamento dos
estacionamentos. Apresenta pontos para melhorar nos seguintes
aspectos: Feedback; Falar a linguagem do usuário; Liberdade e controle
do usuário; prevenir erros e oferecer atalhos.
Na estrutura da lista de requisitos entre os principais tópicos
se destacam: (i) informações sobre distância, preços e horários em
estacionamentos; (ii) visualizar vagas disponíveis e monitorar seu veículo;
(iii) filtrar informações sobre o estacionamento de acordo com sua
preferência; (iv) fluxo de movimento em horários de pico.
Desse modo, foi elaborado, conforme a metodologia uma pesquisa
online, via Google Forms, para determinar os requisitos e funcionalidades
das personas. Foram realizadas 16 perguntas semi- estruturadas,
respondidas por 27 pessoas, em um prazo curto de 10 dias.
O questionário foi organizado em pelo perfil: faixa etária, gênero,
deficiência física ou intelectual; se possui algum veículo e convênio
com estacionamentos, informações sobre o trânsito: frequência de
deslocamento diariamente, se possui dificuldades de se deslocar
para lugares públicos e comerciais, se precisa utilizar alguma vaga
preferencial e como costuma encontrar estas vagas; em seguida
compartilhado através de redes sociais e via-email.
256
Foram realizadas perguntas com o objetivo de solucionar os
problemas dos usuários, por exemplo: funcionalidades que gostaria
de encontrar em uma interface para mobilidade urbana; e informações
relacionadas aos dispositivos móveis, como qual sistema operacional
e aplicativos específicos de mobilidade urbana e em que situações
utilizava, e com que frequência instala aplicativos e quais utiliza.
Figura 5- Questionário online realizado no Google Forms.
Fonte: autora
Dos resultados obtidos 85,6% dos usuários incluídos na pesquisa

tinham entre 18 a 29 anos e 70,4% eram do gênero feminino, 55,6% não
possuem veículo, 29,6% possui carro, 3,7% motocicleta, 18,5% possuem
bicicleta, a maioria muitas vezes tem dificuldade de se deslocar para
lugares públicos e comerciais e utiliza algum aplicativo para mobilidade
urbana, não possuem convênio com estacionamentos e desloca em
frequentemente no cotidianamente. Todos procuram as vagas pelo
trajeto.
Observa-se que a amostra total de respostas é baixa, portanto
serão realizadas novas pesquisas com foco em usuários que possuem
veículo.
257
2.2. Inspeção, Instauração e Implementação: Feedback dos usuários
Na instauração foram geradas alternativas por meio de

rabiscoframes; realizados no papel esboços manuais livremente, mas
também wireframes; realizados através de uma plataforma online e
gratuita Realtimeboard, onde foi realizado um desenho básico das telas
do aplicativo e card sorting; com post-its foram organizados com as
informações para que fosse observada a interação do usuário com a
interface, a arquitetura de informação estabelecida pelos usuários.
Figura 6 - Wireframes do aplicativo Meet.
Fonte: autora
Na fase de inspeção, já do protótipo interativo, foram realizados

testes com os usuários por meio da plataforma UXpin, onde foram
relatadas as principais dificuldades que se depararam ao usar o
aplicativo. Foram feitas perguntas sobre leiaute, estética, cor, imagem,
identidade visual e tipografia, seguidamente eram atribuídas tarefas
para o usuário cumprir, como criar uma conta e efetuar o pagamento do
estacionamento com cartão de crédito.
258
Figura 7 - Telas do primeiro protótipo interativo do projeto Meet no UXPIN.
Fonte: autora
A partir dos testes aplicados observou-se que: as cores estavam

dificultando a legibilidade; a identidade visual deve ser modificada;
desenvolvimento de novos ícones; nova tela para garantir a reserva da
vaga desejada, os ícones devem ser arredondados, a tela para login não
deve conter imagem ao fundo para boa leiturabilidade e legibilidade,
poucos caminhos para realizar uma tarefa.

Figura 8 - Telas do segundo protótipo interativo do projeto Meet
Fonte: autora
259
Assim, a interface do aplicativo foi sintetizada, para seu
aperfeiçoamento na usabilidade e distribuição das informações e
conteúdo. Para o desenvolvimento do protótipo na versão mobile foi
utilizado o programa Uxpin.
No padrão tipográfico foram escolhidas as web fonts Montserrat
Regular; utilizada no texto corrido com tamanho 14; e Montserrat
Bold nos títulos no tamanho 16, ambas foram criadas pela designer
Julieta Ulanovsky e aplicadas nos tamanhos 12 e boa legibilidade e
leiturabilidade, contém 36 estilos diferentes.
A primeira alteração foi no padrão cromático, optou-se por cores
frias que remetem a harmonia e serenidade.
Figura 9 - Estilo do aplicativo Mett.
Fonte: autora
As cores predominantes no aplicativo Meet são roxo e azul

elencados a um gradiente variando entre as cores azul e roxo para
possibilitar a legibilidade e o contraste da interface.
No logotipo optou-se por uma webfont sem serifa Arciform
Regular, foi elencada a um elemento visual, “pin“ com a forma circular,
representada visualmente como destino no aplicativo. O conceito para a
marca foi modernidade e integridade.
A quinta e última etapa, a Implementação, ainda não foi
desenvolvida, e a próxima etapa a ser cumprida é prototipar o aplicativo
para sistema operacional IOS, adicionar a opção mensalista para usuários,
incluir estacionamentos rotativos e zona azul e criar uma nova interface
para proprietário do estacionamento.
A metodologia 5I’s foi essencial para que a projeção do aplicativo
fosse realizada, é necessário investigar sobre o assunto no primeiro
contato com o design de interfaces. Protótipo está disponível no link.
260

O aplicativo meet foi a primeira aproximação da autora com o
campo do design de interfaces e a partir do seu projeto e estudo, em
2020 foi continuado no Laboratório Orientado de Interfaces do Desenho
Industrial. Além de incrementar melhorias, possibilitar a testagem
ainda maior com usuários e elaborar a parte de gerenciamento para os
estacionamentos, visualizou-se que o nome do app também precisaria
ser alterado. Ainda é importante mencionar que o projeto ganhou foco
no design de informação, ponto que está sendo aprofundado no TCC 1
da autora.
REFERÊNCIAS

Websites acessados
https://realtimeboard.com/
https://www.mindmeister.com/ Acesso em 07/10/2018
http://www.waze.com/ Acesso em 09/11/2018
http://www.garupa.co/ Acesso em 09/11/2018
http://www,jumppark..com.br/ Acesso em 09/11/2018
https://play.google.com/store/apps/details?id=com.br.mobilicidade.android.sjc.
gui&hl=pt_BR Acesso em 09/11/2018
https://realtimeboard.com
261
262
BIKED APP: projeto de interface para
transporte alternativo
Natã da Silva
RESUMO: O seguinte trabalho apresenta o desenvolvimento de uma

interface desenvolvida no Laboratório Orientado de Interface do Curso
de Desenho Industrial da UFSM tendo como foco principal meios
de transporte alternativos sustentáveis. É notória uma problemática
associada à emissão de poluentes a nível mundial atualmente. O foco do
trabalho está na redução de meios de transporte movidos a combustíveis
fósseis utilizando o apoio da tecnologia para reduzir impactos ambientais
por estes ocasionados. Este trabalho visa a contribuição para a melhoria
de vida em sociedade, bem como a conscientização dos usuários deste
transporte.
1. INTRODUÇÃO
O termo “interface” possui uma diversificada série de significados;

estes se ampliam com as criações de novas tecnologias, desde
computadores até os mais tecnológicos smartphones. No início do
século XX, os designers já praticavam interações entre usuário e
interface, assim era constituído sentido através de elementos visuais.
“A interface de usuário deve ser entendida como sendo a parte de um
sistema computacional com a qual uma pessoa entra em contato, física,
perceptiva ou conceitualmente”. (Moran, 1981).
A adequação de um objeto ao usuário pode ser considerada o
segredo para a obtenção de um design de sucesso, utilizando formas
as quais este usuário de identifica. Essa identificação pode ser de forma
clara, racional e consciente ou pode estar ligada através do psicológico
e suas vivências.
Segundo Moura (2003), a interação advinda das tecnologias digitais
ampliou quatro qualidades do ser humano: a curiosidade, a criatividade,
263
a cooperação e a vivência do lúdico, sendo a interatividade apontada
como uma das melhores aberturas para o pensamento dos projetistas.
Com base nisso, o presente artigo apresenta a elaboração de uma
interface voltada para o pensamento sustentável, visando a redução da
emissão de poluentes que causam impacto no meio ambiente. O projeto
da interface ocorre no Laboratório Orientado de Interface do Curso de
Desenho Industrial da UFSM. Este tem como intuito ampliar a relação
mestre—aprendiz por meio da troca de experiências e conhecimentos,
procurando solucionar problemas reais do cotidiano aliando usabilidade,
acessibilidade a aspectos tecnológicos.
Semanalmente, os alunos do laboratório participam de discussões
e realizam testes com usuários das interfaces projetadas no laboratório,
para que se possam identificar problemas e realizar ajustes nas mesmas.
Assim como em todos os projetos de Design, o briefing definiu o ponto
de partida deste trabalho. Diante disso, o tema escolhido foi um meio
de transporte alternativo que fosse capaz de auxiliar na redução de
danos ambientais, assim como na vida e bem-estar da população,
contribuindo também para o movimento crescente e já consolidado da
economia compartilhada (CHASE, 2015; RIFKIN, 2015). Optou-se então
pela elaboração de uma aplicação de transporte de passageiros feito
com bicicletas tandem, essas são comumente vistas no exterior e se
trata de bicicletas para duas ou mais pessoas; criando assim, além de
um inovador meio de transporte, um novo estilo de vida.
2. A EVOLUÇÃO TECNOLÓGICA E SEU COMPROMISSO COM O MEIO

AMBIENTE
A comercialização do telefone celular começou no ano de 1983,

dez anos após o teste do seu primeiro protótipo; a partir daí, percorreu-
se um longo caminho através de funções como SMS, introdução de cores
na tela, câmera, mensagens multimídia, música e internet.
Juntamente com a mudança do mundo de forma rápida e constante,
a evolução dos produtos está sempre em recorrência, todo dia são
encontradas melhorias a serem feitas. Desta forma torna-se necessário
a adaptação dos projetistas a novos pensamentos e práticas visto que o
avanço tecnológico também deve trabalhar em benefício da natureza.
264
Latour (2004) em Políticas da Natureza, busca a reformulação da
ecologia política e supõe que dividir o mundo em humanos políticos e
não-humanos políticos é uma ideia absurda, visto que ambos pertencem
à mesma sociedade. Nota-se então a relação entre os ideais de Latour
e a interface em questão: tornar mais harmoniosa e contributiva nossas
relações com a natureza e meio ambiente. Assim cabe aos desenhadores
e projetistas atuar de forma mais ativa na prevenção e solução de
problemas na mesma medida que a tecnologia avança.
O aplicativo, surge como uma forma de intermediar as relações
humanas com o meio ambiente, uma vez que é notório o aumento
recorrente do número de automóveis que transitam em nosso país.
Nota-se pouco compromisso dos fabricantes de automóveis em relação
a infraestrutura das cidades, já que muitas não comportam tantos
automóveis, a única prioridade é comercializá-los. Já o transporte público
não é capaz de acompanhar o crescimento das vendas, o que induz cada
vez mais a população a buscar por um meio de transporte alternativo.
3. METODOLOGIA
A experiência de usuário, traz como uma de suas principais funções

a interação; e é através dela que o usuário conversa com seu sistema,
para que isso aconteça de forma mais prazerosa e descomplicada,
o designer conta com alguns fatores como estética, legibilidade,
usabilidade e funcionalidade.
Garret (2011), diz que o trabalho com base na experiência de
usuário tem como necessidade ser realizado por uma equipe formada
por analistas de usabilidade, designer de interação e arquiteto de
informação, e sugere a união dessas áreas intitulando-os como designers
da experiência de usuário. Para isso, Garret (2011) propõe um simples
método de projetação que pode ser aplicado a websites ou projetos
mais interativos; essa metodologia parte de níveis mais abstratos, ou
seja, mais próximo do Designer e seu pensamento projetual, até chegar
em uma estrutura mais sólida, que pode ser representada pelo usuário e
seus desejos.
Além disso, o Design Centrado no Usuário de Lowdermilk (2013),
auxilia na criação de interfaces, desde que a mesma esteja apenas no
papel; pois além de criação de personas, pode-se trabalhar com um
usuário acompanhando cada etapa, para que se possa obter feedbacks,
265
compreender fluxos e tarefas de um padrão mental com o qual o usuário
mais se adapta.
Propondo então uma forma de união dos métodos de Garret (2011),
Lowdermilk (2013) e Teixeira (2014), o método dos “5I’s” age de forma a
facilitar a projetação, buscando uma ação conjunta entre projetistas,
clientes e usuários, minimizando o maior número de erros possíveis.
O método é constituído por cinco etapas iniciadas pela letra “I”. Estas
etapas dividem-se da seguinte maneira:
1 - IdeAção: Fase na qual é criado o briefing, este inclui o brainstorming,

uma tempestade cerebral de todas as ideias que possam ser usadas,
sendo classificadas como boas e más ideias; busca por referências na
área, para que se possa saber quais ideias já existem; mapas mentais com
as ideias chaves do projeto; e pesquisas com usuário, para que se possa
verificar questões que ainda ficaram em aberto na criação do briefing. O
projetista deve estar ligado a fatores como a neurociência, pois muitos
itens estão ligados a experiências dos usuários.
2 - InambulAção: Nesta, busca-se compreender as necessidades das

personas, para que sejam reconhecidos os requisitos e funcionalidades
que a interface deve possuir. Ainda são escolhidas as tecnologias para
implementação do projeto.
3 - InstaurAção: Na terceira fase da metodologia, são realizados os

rabiscoframes, cardsorting, sitemap e protótipos em papel e interativos,
para que se possa organizar as informações. Esta etapa necessita de
intervenção direta do usuário, para a arquitetura de informações esteja
completa e de acordo com sua necessidade.
4 - Inspeção: O refinamento é realizado após serem feitos os testes de

usabilidade e acessibilidade com usuários; é feita a análise detalhada da
interface e são verificadas as heurísticas de avaliação.
5 - ImplementAção: A última fase, onde é feita a entrega do produto final

e são realizadas novas inspeções e alterações caso sejam necessárias.
Lowdermilk (2013) afirma que uma interface digital nunca está pronta; isso
deve-se ao fato que diferentemente das versões impressas, a atualização
266
dos meios digitais é dinâmica; assim os erros podem ser observados e
corrigidos sem problemas maiores.
4. APLICAÇÃO DO MÉTODO PARA ELABORAÇÃO DA INTERFACE

De acordo com a metodologia, iniciou-se a criação da interface
pelas etapas de ideação e inambulação com a elaboração do questionário
de análise da viabilidade de criação do aplicativo, para que pudessem
ser analisados dados de possíveis usuários, novas ideias para a interface
e motivos pelos quais a mesma seria utilizada. Partindo disso, fez-se
a separação e classificação das funcionalidades, orientando-se pelo
briefing em busca de referências em aplicativos já existentes através dos
relatos de usuários, a fim de identificar problemas e melhorias a serem
aplicadas à interface a ser criada.
Na segunda etapa, alcunhada como instauração, elaborou-se
a estrutura do aplicativo mediante sugestões dos possíveis usuários
e do padrão mental de interações e organização. O estudo da IHC,
abreviação do termo Interação Humano-Computador (em inglês, HCI
- HumanComputer Interaction), foi essencial para a definição desses
padrões mentais, pois trata-se de uma disciplina que aborda design,
avaliação e implementação de sistemas de computadores com ênfase
na usabilidade. Primeiramente, acreditava-se que a adaptação deveria
partir do homem, e não da máquina.
Segundo Mayhew (1992) e Padovani (1998), a Interação Humano-
Computador se dá pelo revezamento de controle de situações; esse
revezamento divide-se em três etapas, são eles: ler/examinar, pensar
e responder, onde em alguns momentos o usuário tem controle e
em outros o entrega a máquina; em suma, o usuário, através do que
a interface apresenta, interpreta a informação e a responde através
de uma ação. Com base nessa teoria, formulou-se o SiteMap a fim de
organizar as funcionalidades essenciais e prioridades, de forma a facilitar
a criação dos rabiscoframes. A criação dos rabiscoframes (Figura 2),
foi um ponto crucial para a definição de posicionamentos de botões,
leiaute e disposição de informações, uma vez que o aplicativo se trata de
interações em tempo real, essas exigem respostas rápidas e intuitivas,
além do uso da internet para interagir com os usuários responsáveis por
transportar o passageiro.
267
Figura 2: Rabiscoframes elaborados para o Biked.
Fonte: Elaborado pelo autor (2019).
Dando seguimento ao projeto, iniciou-se a fase de inspeção, onde

passou a ser elaborado o protótipo funcional com o auxílio do Adobe
XD, software destinado a criação de protótipos de alta fidelidade,
criando testes de funcionalidades, para isso foi necessário consolidar a
arquitetura de informação (Figura 3), estudo aprofundado do leiaute e
paleta de cores para a apresentação na tela do smartphone.
Figura 3: Organização da arquitetura da informação do Biked.
Fonte: Elaborada pelo autor (2019).
Em projetos de websites e aplicativos, a arquitetura da informação

se torna responsável por definir a estrutura organizadora de informações
onde as demais partes do projeto irão apoiar-se. Segundo Rosenfeld
e Morville (2006), o trabalho da arquitetura da informação consiste em
compreender e atender a três variáveis:
268
1. Usuários: necessidades, tarefas, hábitos e comportamentos;
2. Conteúdo: características do que será apresentado (objetivo,
uso, formato, volume, estrutura, dinamismo).
3. Contexto: Especificidades do contexto de uso do sistema de
informação (proposta de valor de website, cultura e política de empresa,
restrições tecnológicas, localização e etc.).
Esse trio se faz único para cada website ou aplicativo; o papel do
arquiteto é equilibrá-los para que a informação correta, seja acessada
pela pessoa correta em tempo correto. Com a definição das etapas já
descritas, iniciam-se as criações do protótipo final para realizar a fase de
implementação e desenvolvimento da aplicação.
Na fase final do projeto, foram elaborados protótipos de alta
fidelidade (Figura 4), além disso foram listadas as correções de problemas
identificados durante os testes com usuários, além da elaboração de
ícones, transições e melhorias para a interatividade do app.
Figura 4: Protótipo final da primeira versão do Biked.
Fonte: Elaborado pelo autor (2019).
O protótipo do aplicativo, pode ser acessado através do link.
269
O Biked segue sendo elaborado em busca de melhorias de

interface, além da relação entre humanos, tecnologia e meio ambiente, a
fim de oferecer as melhores e mais inclusivas condições, para que todos
tenham acesso a tecnologia e uso da bicicleta, de forma responsável. Esse
pode ser expandido para além de um aplicativo de meio de transporte
alternativo, uma forma de contribuir com o meio ambiente, influenciando
usuários e não usuários a agir em comunidade, e progressivamente,
substituir automóveis e meios de transporte emissores de poluentes, por
meios saudáveis e contribuintes para um melhor estilo de vida.
and Beyond. Second Edition. Berkley: New Riders Press, 2011
LATOUR, Bruno. Políticas da natureza: como fazer ciência na democracia. Bauru,

SP: EDUSC, 2004.

MAYHEW, D. J. Princípios e Diretrizes em Design de Interface de Usuário de Software.

Englewood Cliffs (New Jersey), PTR Prentice Hall. 1992.
MORAN, T. The Command Language Grammars: A representation for the user

interface of interactive computer systems. International Journal of Man-Machine
Studies, 15:3-50, Academic Press, 1981.
MOURA. M. C. O Design de hipermídia. Tese (Doutorado). Programa de Pós-

Graduação em Comunicação e Semiótica. PUC/SP, São Paulo, 2003.
TEIXEIRA, F. 2014. Introdução e boas práticas em UX Design. São Paulo: Casa do

Código.
270
271
Utilização da metodologia 5i’s para criação
de um aplicativo de caronas
Lidiane Castagna Gonçalves
RESUMO: Este artigo tem por objetivo expor as etapas de criação de

um aplicativo de caronas para a Universidade Federal de Santa Maria
utilizando a metodologia 5I’s. Esta metodologia, elaborada pela profa
dra. Débora Aita Gasparetto, é utilizada no Laboratório de Interface do
Desenho Industrial e tem como foco o design centrado no usuário. O
aplicativo de caronas apresentado neste artigo é pautado na economia
colaborativa e na mobilidade urbana e visa auxiliar a comunidade
acadêmica da UFSM, impactando no fluxo de trânsito entre Camobi e
Santa Maria.
1. INTRODUÇÃO
Existe uma mudança de paradigmas no que diz respeito ao

consumo. Em contraponto a um modo de compra desenfreado e
excessivo surgiu a necessidade de uma sociedade mais coletiva com
uma maior consciência ambiental e social. A Economia Colaborativa
ou Economia Compartilhada, acompanha e auxilia essa mudança de
pensamento tão necessária.
A economia compartilhada trata-se de um emergente modelo

socioeconômico baseado na partilha, aluguel, escambo, troca e
financiamentos colaborativos. A partir desse modelo, o consumo
colaborativo potencializa-se pela interação entre comunidades
e, principalmente, pelo uso das tecnologias de rede. Esse tema
está ampliando seu espaço na economia, pois constantemente
surgem novas formas de compartilhamento, enfatizando que
não é necessário possuir um bem, mas sim ter acesso aos
benefícios propostos. (Denning, 2014; Rifkin, 2014 apud PIRAN et
al., 2018, p.70)
A Economia Colaborativa traz mudanças na forma como as

pessoas estabelecem a relação com o consumo, permitindo a troca,
272
partilha, permuta de serviços e experiências. Uma dessas possibilidades
de interação se dá por aplicativos de celulares, uma forma de facilitar a
interação na economia colaborativa.
Por fim, a teoria mais recente será a de Nicholas A. John,

que defende que a partilha e o consumo colaborativo estão
inteiramente relacionados com a Web 2.0., conseguindo
demonstrar que o consumo colaborativo resulta de um fenômeno
tecnológico como fio condutor e facilitador. (TABORDA, 2018,
p.0 9)
A Economia Colaborativa consegue se desenvolver ainda mais

com a expansão da comunicação na internet, nos celulares e das redes
sociais. É um meio que une pessoas com interesses e necessidades
em comum, uma realidade atual que auxilia no desenvolvimento
sustentável e também está mudando o sistema de mobilidade urbana.
Diversos aplicativos de celular surgiram nos últimos anos, como uma
forma de contribuir para a mobilidade no país, essas tecnologias estão
transformando a forma de locomoção dos cidadãos nos centros urbanos.
Segundo Costa (2008) os problemas de mobilidade urbana no
país afetam na qualidade de vida das pessoas, gerando um aumento de
custo, de tempo de viagem, poluição, acidentes, ruído e está diretamente
relacionado com problemas ambientais, econômicas e sociais.
O aumento das taxas de urbanização, a ineficiência e sobrecarga
dos meios de transporte público amplifica esses problemas, trazendo
também um aumento na taxa de motorização da população. O Relatório
do Mapa da Motorização Individual no Brasil (OBSERVATÓRIO DAS
METRÓPOLES, 2019) aponta que o total da frota veicular no país entre
2008 e 2018 aumentou de 37,1 milhões para 65,7 milhões. Apenas na
Região Sul, a frota nesse período, teve um aumento de 74%.
De acordo com o levantamento estatístico do Departamento
Estadual de Trânsito (DETRAN, 2019), o município de Santa Maria tem a
sétima maior frota de automóveis em circulação do Rio Grande do Sul.
Neste município existe um grande fluxo entre o Centro e o bairro Camobi,
onde fica localizado o Campus principal da Universidade Federal de Santa
Maria (UFSM). Martin (2017) afirma que a UFSM atrai e produz uma grande
quantidade de viagens devido a alta população que estuda e trabalha
no Campus, somado aos visitantes, pacientes e funcionários do Hospital
Universitário de Santa Maria (HUSM).
273
Esta demanda gera uma alta quantidade de viagens diárias que
sobrecarrega o acesso ao Campus. Uma das formas de auxiliar na
resolução desse problema é a criação de um aplicativo de caronas que
ajude a diminuir a frota de carros no trajeto à UFSM. Dentro do Laboratório
de Interface, orientado pela professora Débora Aita Gasparetto, do curso
de Desenho Industrial da UFSM, este projeto pode ser estudado.
A facilidade de comunicação que as tecnologias empregam,
o design centrado no usuário, associado ao modelo da Economia
Colaborativa são a base para a criação deste aplicativo de caronas.
Através da Metodologia 5I’s, é apresentado o processo da criação deste
aplicativo que tem como foco principal auxiliar a comunidade acadêmica
da UFSM, impactando no fluxo de trânsito entre Camobi e o Centro de
Santa Maria.
2. IDEAÇÃO
Na primeira fase de ideação do projeto foi realizado o briefing

que é composto das seguintes perguntas: O problema, o quê, como,
o porquê, para quem, por quem e em que lugar. O problema que
envolve a necessidade da criação de um aplicativo de caronas é um
trânsito com superlotação de ônibus, carros com apenas uma pessoa
sem aproveitamento do espaço total, acumulando mais um carro
desnecessários para o trânsito, o que gera maiores congestionamentos
e consequentemente aumento da quantidade de poluição no ambiente.
O quê? Utilizar uma interface que possibilite a troca de caronas entre
pessoas ligadas a instituição. Como? Por meio de um aplicativo que facilite
a comunicação e a locomoção das pessoas em segurança. Porquê? Para
uma maior colaboração entre as pessoas, para a diminuição de poluentes
e para um menor gasto de tempo de deslocamento. Para quem? Para
pessoas ligadas a UFSM, que se deslocam até a universidade e que
desejam contribuir com o meio ambiente e com as pessoas no geral. Por
quem? Pelas pessoas, pelo meio ambiente, para um modo de vida mais
sustentável. Em que lugar? O aplicativo será usado em casa, na UFSM, e
no trajeto entre esses dois locais.
Após traçar, de forma breve, as metas gerais do projeto é
elaborado um brainstorming para juntar informações, desenvolver e
estimular o pensamento criativo e encontrar um conceito-chave para o
274
projeto. Esse processo inclui palavras como: Compartilhar, cuidar, ajudar,
mover, juntos, alternativa, ir, vir, partir, conhecer, fluxo, conexões, rede,
caminhos, flexibilidade e altruísmo.
Nessa mesma fase do projeto iniciam-se os processos de Busca
de Referências para análise do que já existe semelhante no mercado
e demais interfaces que possam contribuir para o projeto; Atlas
Mnemosyne e Mapas Mentais. As buscas de referências foram voltadas
para aplicativos semelhantes com o tema, não necessariamente apenas
com a proposta de caronas, mas de apps de mobilidade urbana no geral,
como: Move Carona, SoMo, Caronaê, Carona Solidária, 4move, Zumpy. Na
composição do Atlas Mnemosyne destaca-se bastante os tons de azul e
verde que predomina para guiar o design sensorial. Já o mapa mental foi
elaborado à mão e partiu das palavras carona, socialização, mobilidade,
meio ambiente e economia para guiar o resto do processo.
Figura 1: Atlas Mnemosyne para a criação de app de caronas
Fonte: autora
A próxima etapa abrange a pesquisa com o usuário e a criação

das personas a fim de obter conhecimento a respeito do público-
alvo e estabelecer requisitos para o aplicativo. A princípio foi realizado
uma pesquisa analisando comentários de usuários que baixaram pela
PlayStore os aplicativos: Caronaê, SoMo e Move Carona. Nenhum dos
aplicativos tem uma nota acima de 4 em um total de 5. O Caronaê é um
275
aplicativo de carona solidária da UFRJ, com mais de 10 mil downloads,
o app tem um índice de reclamação alto a respeito do acesso inicial ao
aplicativo, que contém bugs e consistentemente trava. O Move Carona
tem um número menor de downloads, apenas mil, recebeu críticas a
respeito do sistema de rotas e por não ter um sistema de localização
que mostre os motoristas mais próximos. O SoMo tem um total de 1
milhão de downloads recebeu mais feedbacks a respeito de não ter um
sistema de integração com redes sociais e a interação de grupo ter que
ser feita apenas a partir de números de celulares. A seguir foi elaborado
um questionário com aplicação online pelo Google Forms, com um total
de 12 perguntas subdivididas em: perguntas com informações pessoais;
Informações mais específicas do aplicativo relacionado ao meio de
locomoção para a instituição, se ofereceria ou pegaria caronas, o que
é essencial para dar ou receber caronas; O último bloco questiona a
respeito de tecnologias e aplicativos semelhantes que são utilizados
pelos usuários. A partir dessa pesquisa se faz necessário a criação das
personas para auxiliar na criação dos requisitos.
As personas são representações de possíveis usuários, citando
características, rotina, objetivos do usuário é possível desenvolver as
necessidades dele para com o produto criado. Para este aplicativo
foram elaboradas personas como estudantes e servidores vinculados a
instituição e que tem sua rota diária atrelada a ela. Foram criadas as quatro
personas Lia Amaral, Ana Margarida, Lisa Bianchini e Rafael Amaral com
diferentes personalidades, idades, meios de locomoção e rotinas.
Essas personas com modos de vida tão distintos auxiliaram no
desenvolvimento de requisitos e funcionalidades para o aplicativo, que só
foi possível a partir da criação das mesmas. Uma delas é Rafael Amaral
é servidor da UFSM, tem 55 anos e vai de carro para a instituição. Sempre
combina caronas com seus amigos que alternam seus carros. Também
gostaria de dar mais caronas, porém não conhece outras pessoas que
vão no mesmo horário que ele. É um pouco introspectivo e nem sempre
está disposto a oferecer caronas. Tem dificuldade com tecnologias, e
não utiliza muitos aplicativos. A persona Rafael trouxe a possibilidade
de combinar caronas com antecedência, formar uma rede de amigos e
conhecer a rotina de horário de cada um, a possibilidade de ficar visível
ou não em dias específicos, um aplicativo que seja fácil, ágil e prático de
utilizar devido a sua falta de habilidade com tecnologias.
276
Figura 2: Personas para a criação de app de caronas
Fonte: autora
A última etapa da fase de Ideação é composta pelos Pontos de

Contato ou Golden Moments, onde é elaborado, por meio de um painel,
situações onde os usuários utilizariam o aplicativo. Nesse caso, um
aplicativo de caronas seria utilizado em casa, na universidade ou em
algum trajeto na rua entre esses pontos.
277
Figura 3: Golden Moments para a criação de app de caronas
Fonte: autora
3. INAMBULAÇÃO
Nesta etapa de InambulaçÃo são pensados os requisitos;

Funcionalidades; Análise Heurística; E as tecnologias utilizadas. Os
requisitos são obtidos a partir das personas criadas, e têm a função
de atender as necessidades do usuário, foram extraídos os seguintes
requisitos: Existir uma rede de segurança e a opção de obter carona só
com mulheres, especificar restrições com alergias ou qualquer problema
que a carona possa proporcionar, ter chats para conversa e facilitar os
pontos de encontro de carona, ter a opção de combinar caronas em dias
anteriores, que seja um aplicativo ágil e prático de utilizar, e que tenha a
criação de redes para contatos dentro do app.
As funcionalidades se referem ao que o aplicativo necessita ter
para atender as demandas necessárias de funcionamento. São elas:
Acesso a câmera, Acesso ao GPS, Vínculo ao sistema da UFSM, Acesso
às notificações, Possibilidade de formar uma rede para trajetos, Ativar
ou desativar localização, Calendário de rotas, Possibilidade de mostrar
a rota a partir de um ponto específico, Chat entre os passageiros e
motoristas, Opção de trajeto somente para mulheres.
Entre as tecnologias de prototipagem interativas aplicadas para
o desenvolvimento do projeto foi escolhido o XD da Adobe, por ser
gratuito e facilmente utilizável. E as tecnologias de implementação serão
desenvolvidas para Android e IOS.
278
4. INSTAURAÇÃO
A fase de instauração inicia com o sitemap e rabiscoframes, onde

são listados os aspectos da interface e desenhada a sequência de
telas do aplicativo. A tela inicial começa com um login e senha, onde
o usuário também tem a opção de se cadastrar. Logo após é feita uma
confirmação de dados, que já terá dados do usuário ligado a matrícula/
siape do estudante ou servidor ligados a UFSM, e preenchimento de
outros requisitos do aplicativo.
Figura 4: Primeiros sitemaps para a criação de app de caronas
Fonte: Autora
Figura 5: Primeiros rabiscoframes para a criação de app de caronas
Fonte: Autora
279
Foram também apontados um mapa de localização que
acompanha a rota das pessoas, uma rede de contatos com quem já pegou
carona, memória de rotas já estabelecidas pelo motorista, calendário,
chat, restrições dos usuários, sistema de qualificação.
Após, foi realizado o teste com usuário utilizando o protótipo em
papel, essa fase tem a função de testar a arquitetura da informação,
validar ideias e coletar feedbacks a respeito da funcionalidade. A partir
desses testes foram feitas diversas modificações com etapas que não
estavam bem definidas e rótulos de difícil entendimento para o usuário,
também foram elaboradas medidas novas de segurança como a opção
de localização não ficar sempre visível, ocultar local principal de saída,
compartilhar sua localização com algum conhecido.

Figura 6:protótipo
Fonte: Autora
A seguir foi elaborado um protótipo interativo no software XD da

Adobe, onde pôde ser elaborado mais testes com o usuário afim de
documentar as interações e verificar os fluxos do design de interação.
Foram agregados e modificados os seguintes requisitos: Títulos para
esclarecer o que é pedido em cada tela de cadastro, de qualificação, etc;
280
Ter mais feedbacks dos acontecimentos; Add um sistema de denúncia de
perfil. Após avaliar as considerações desta etapa, foi realizado as devidas
modificações e acrescentado a etapa do design sensorial.
Esta etapa abrange toda a escolha de cores, tipos, ícones, estilos,
imagens, todo recurso gráfico que possa ser agregado a interface. Esse
aplicativo de caronas tem uma ligação com a UFSM e se aproxima ao
máximo dos recursos gráficos institucionais. A paleta de cores segue o
azul como cor principal e o laranja como complemento. Além de ser a
cor institucional, o azul também reforça a pesquisa da fase de Ideação
em que a cor mais utilizada era a mesma. A tipografia é a Zapf Humanist
seguindo o tipo oficial da UFSM. E os ícones escolhidos são limpos e
simples de entender, compostos apenas por linhas e a cor sólida.
Figura 7: design sensorial
Fonte: Autora
Figura 8: design sensorial protótipo interativo
Fonte: Autora
281
Foi realizado um teste com os protótipos de papel e dois testes com
o usuário com o protótipo interativo. Os testes foram realizados dentro
da sala de aula com colegas e a professora do laboratório, a partir disso
obteve-se as seguintes avaliações: Os rótulos de motorista e passageiro
não esclareciam se era uma busca ou uma classificação para o próprio
usuário e necessitavam de uma frase auxiliar para complementar, foi
escolhido “buscar por:” para esclarecer que era para selecionar o que
estava procurando; Foram inseridos títulos nas telas, tanto nas de cadastro
quanto nas demais necessárias, para situar o usuário das ações que
seriam seguidas na tela; Foram acrescentados chats e as viagens que
já foram feitas no menu principal para facilitar a conversa e a devolução
de algum item dentro do carro, caso seja necessário; Será pensado um
sistema de denúncia de usuário, assim que existir mais de 3 denúncias o
caso deverá ser avaliado;
O aplicativo foi concluído faltando algumas interações e a criação

de um design sensorial mais forte, porém foi extremamente proveitoso
testar com os usuários e foi possível utilizar muito do feedback dos
usuários para complementar no sistema de segurança, na facilidade e
entendimento de rótulos e fluxo de telas.
REFERÊNCIAS
COSTA, M. S. Mobilidade Urbana Sustentável: Um Estudo Comparativo e as

Bases de um Sistema de Gestão Para Brasil e Portugal. Dissertação (Mestre em
Engenharia Civil)– Escola de Engenharia de São Carlos, Universidade de São
Paulo, São Carlos, 2003..
COSTA, M. S. Um índice de Mobilidade Urbana Sustentável. Tese (Doutorado em

Engenharia Civil)– Escola de Engenharia de São Carlos, Universidade de São
Paulo, São Carlos, 2008.
MARTIN, J. A. Análise da Mobilidade em um Campus Universitário – Estudo de

Caso: Universidade Federal de Santa Maria. 2017. 91 f. Monografia (Graduação em
Engenharia Civil)–Universidade Federal de Santa Maria, Santa Maria, 2017.
282
MULLER, E. Projeto carona univates: proposta de redesign e criação de interface
para dispositivo móvel. Monografia (Graduação em Design)–Centro Universitário
UNIVATES, Lajeado, 2015.
OBSERVATÓRIO DAS METRÓPOLES. Mapa da motorização individual no Brasil. Rio

de Janeiro: Observatório das Metrópoles, 2019. Disponível em:
<https://www.observatoriodasmetropoles.net.br/wpcontent/uploads/2019/09/
mapa_moto2019v2.pdf> Acesso em 03 jul. 2019.
PIRAN, F. et al. A economia compartilhada e a percepção de seus efeitos por parte

dos estudantes de uma instituição de ensino superior. Consumer Behavior Review,
2(Special Edition), p. 69-80, 2018.
TABORDA, R. F. Economia de Partilha e os Casos de Referência AIRBNB, UBER E

BOATBOUN. 2016. 79 f. Dissertação (Mestrado em Gestão)–Instituto Universitário
de Lisboa, Lisboa, 2016.
283
284
Interfaces Interativas e a capacidade
excedente na indústria têxtil: Reutilização e
reaproveitamento de resíduos
na era da economia compartilhada
Micheli da S. Grigolo
RESUMO: O texto aborda o projeto desenvolvido no Laboratório

Profissionalizante de Interfaces no primeiro semestre de 2017. O foco é
demonstrar o processo metodológico,com apoio nas referências da área,
na projetação de um website voltado à indústria da moda e um upgrade
ecológico, focando no reaproveitamento de tecidos excedentes dessas
indústrias. Como resultado temos o protótipo interativo realizado no
Adobe Muse.
1. INTRODUÇÃO
O mercado da moda é um dos grandes responsáveis pelos

impactos ambientais, devido ao consumismo exacerbado e alta
volatilidade do setor da moda caracterizada como fast fashion, seus
produtos são descartados muito antes do final da sua vida potencial, na
maioria das vezes de forma inadequada, produzindo grande quantidade
de resíduo têxtil. Existem também as indústrias têxteis que produzem
seus produtos fora de seu país de origem, onde conseguem a mão-de-
obra mais barata, até por muitas vezes escrava, visando apenas o valor
final desses produtos, sem se importar com a condição de trabalho
precária das pessoas que fabricam as roupas, e nem com os impactos
ambientais que geram por produzirem seus produtos de forma “ilegal”,
porém nós consumidores não nos perguntamos o porquê daquela peça
de roupa ter um valor baixo, ou quem deixou de receber para aquele
produto estar com este preço, é o que nos mostra o documentário “The
True Cost” (O Verdadeiro Custo) onde são questionados os custos reais
da indústria da moda atual.
O documentário apresenta inicialmente o colapso da fábrica
de roupas em Dhaka, Bangladesh, que tirou a vida de mais de 1.000
pessoas e feriu gravemente mais de milhares, o colapso do Rana
Plaza, que aconteceu em 2013. Circunstância marcante que ganhou as
285
manchetes do mundo em meio a vários outros eventos isolados dos quais
geralmente não se fala. As pessoas começaram a notar os problemas da
indústria têxtil a partir do colapso do Rana Plaza, que até então passavam
despercebidos a maior parte do tempo desde 1980 (COLERATO, 2015).
A indústria do vestuário é a indústria mais dependente do trabalho

humano no mundo, empregando milhões de trabalhadores
que são os mais pobres de todo o sistema, muitos dos quais
são mulheres. Muitas destas mulheres recebem menos do que
um salário mínimo, trabalham em condições inseguras, e são
privadas de direitos humanos básicos. Além do impacto humano,
a moda se tornou a segunda indústria mais poluente do mundo
– perdendo apenas para a indústria do petróleo. (Entrevista do
documentário The True Cost).
Assim como o descarte incorreto de peças de roupas, existe

a capacidade excedente na indústria têxtil em forma de retalhos
inutilizáveis para as empresas, as quais descartam estes “resíduos
têxteis” de forma inadequada agravando os impactos ao ambiente. A
reciclagem e o reaproveitamento de resíduos têxteis ainda são temas
pouco explorados, pois ainda persiste a predominância de programas
sem logística reversa. Segundo citam Vieira, Soares e Soares (2009, p.
124) sobre a logística reversa:
Este conceito mostra de forma geral o verdadeiro papel da

logística reversa, que é de facilitar o retorno do produto ao ciclo
produtivo o remanufatura, reduzindo desta forma a poluição
da natureza e o desperdício de insumos. A logística reversa
possibilita a devolução do produto pelo consumidor não apenas
para o fornecedor direto, mas também para seu fabricante.
O fabricante, por sua vez, se encarregará pela reciclagem ou
reutilização do produto como insumo. Dada a destinação
adequada ao produto, o mesmo poderá ser remetido novamente
ao mercado consumidor quando possível.
Conforme a Política Nacional de Resíduos Sólidos (Lei nº

12.305/2010) que,
[...]reúne o conjunto de princípios, objetivos, instrumentos,
diretrizes, metas e ações adotados pelo Governo Federal,
isoladamente ou em regime de cooperação com Estados,
Distrito Federal, Municípios ou particulares, com vistas à gestão
integrada e ao gerenciamento ambientalmente adequado dos
resíduos sólidos.
286
São princípios dessa política:
(i) a prevenção e a precaução; (ii) o poluidor-pagador e o

protetor-recebedor; (iii) a visão sistêmica, na gestão dos
resíduos sólidos, que considere as variáveis ambiental, social,
cultural, econômica, tecnológica e de saúde pública; (iv) o
desenvolvimento sustentável; (v) a ecoeficiência, mediante a
compatibilização entre o fornecimento, a preços competitivos,
de bens e serviços qualificados que satisfaçam as necessidades
humanas e tragam qualidade de vida e a redução do impacto
ambiental e do consumo de recursos naturais a um nível, no
mínimo, equivalente à capacidade de sustentação estimada do
planeta; (vi) a cooperação entre as diferentes esferas do poder
público, o setor empresarial e demais segmentos da sociedade;
(vii) a responsabilidade compartilhada pelo ciclo de vida dos
produtos; (viii) o reconhecimento do resíduo sólido reutilizável e
reciclável como um bem econômico e de valor social, gerador
de trabalho e renda e promotor de cidadania; [...]
O presente artigo abordará sobre a temática do reuso, reutilização

e reaproveitamento de resíduos têxteis e apresentará o desenvolvimento
de uma interface voltada à reutilização e reaproveitamento destes
resíduos como alternativa para a redução dos impactos ambientais,
onde a maior parte destes resíduos têxteis, atualmente, é descartada
de forma inadequada.
O curso de Desenho Industrial da Universidade Federal de Santa
Maria (UFSM), implantou em 2015 um novo projeto pedagógico, o qual
possui como um dos aspectos mais característicos a união das duas
habilitações ofertadas no projeto pedagógico anterior: Projeto de Produto
e Programação Visual, visando a formação de um profissional completo,
com conhecimento ampliado e capaz de transitar pelas duas áreas
antes independentes. O novo projeto pedagógico propõe uma formação
que desenvolva autonomia e a profissionalização do aluno durante a
graduação, através da interdisciplinaridade, da inovação em projetos e
busca constante por pesquisa, de trabalhos com diversidade de métodos
de ensino, utilizando experiências de aprendizagem diversificadas
estimulando o trabalho em equipe em todos os âmbitos.
O atual currículo do Curso de Desenho Industrial tem sua ênfase
nos laboratórios profissionalizantes e orientados que abrangem várias
áreas do Design. As disciplinas introdutórias ou de base, tem a finalidade
de proporcionar a formação básica de conhecimentos necessários às
especialidades que serão tratadas posteriormente nos laboratórios.
287
Para iniciar as análises, é fundamental contextualizar que o projeto
abordado neste artigo foi desenvolvido no Laboratório de Interfaces do
curso de Desenho Industrial da Universidade Federal de Santa Maria.
O Laboratório de Interfaces no primeiro semestre de 2017 teve como
proposta, projetar interfaces digitais partindo de problemas reais, aliando
teoria e prática e pensando na usabilidade, acessibilidade, aspectos
tecnológicos dos websites, além de viabilização econômica da interface
a ser desenvolvida.
2. METODOLOGIA
Segundo Lowdermilk (2013, pg.21), “Qualquer pessoa envolvida

no processo de criação de um aplicativo (não apenas os designers)
deveria tentar compreender quais são as necessidades dos usuários
para determinar o propósito de um aplicativo.” Considerando que ao
compreender as necessidades dos usuários, possíveis erros e equívocos
podem ser evitados, o design centrado no usuário pode ser implementado
para garantir que seu aplicativo proporcionará uma ótima experiência
para o usuário, além de proporcionar um progresso apropriado, partindo
dos requisitos do usuário em direção à solução tecnológica.
Trabalhar com design centrado no usuário em Interfaces digitais
significa basear o projeto na experiência que se quer oferecer ao usuário.
Para isso é fundamental recorrer a referências como Garret (2011) que
propõe um método simples de projetar. O método de Garret pode ser
aplicado desde websites até projetos interativos mais complexos, este
método baseia-se na experiência de usuário e é subdividido em 5 grandes
planos, que vão de um nível mais abstrato até um mais concreto, que
está mais próximo do usuário.
Estes cinco planos - estratégia, escopo, estrutura, esqueleto e

superfície - fornecem uma estrutura conceitual para falar sobre
os problemas da experiência do usuário e as ferramentas que
usamos para resolvê-los. Em cada plano, as questões com
as quais devemos lidar se tornam um pouco menos abstratas
e um pouco mais concretas. No plano mais baixo, não nos
preocupamos com a forma final do site, produto ou serviço -
só nos interessamos sobre como o site se encaixa na nossa
estratégia (atendendo às necessidades de nossos usuários).
No plano mais alto, nos preocupamos com os detalhes mais
concretos da aparência do produto. Plano por plano, as decisões
que temos de fazer tornam-se um pouco mais específicas e
envolve níveis mais finos de detalhes. (GARRET, 2011)
288
Conforme Garret (2011), cada plano depende dos planos abaixo
dele. Logo, a superfície depende do esqueleto, que depende da estrutura,
que depende do escopo, que depende da estratégia.
Segundo Rifkin (2015), nos próximos anos um sistema colaborativo
estará convivendo com o capitalismo, que se tornará cada vez menos
importante. Para ele, a economia colaborativa já se apresenta nos sites
de compartilhamento de carros e casas e nos cursos online, os quais
permitem que um professor ensine muitos alunos de uma só vez.
Na economia colaborativa, vendedores e compradores dão
lugar a prosumers (prosumidores, produtores e consumidores ao
mesmo tempo), os direitos de propriedade cedem espaço para o
compartilhamento de código aberto, a propriedade é menos importante
do que o acesso, os mercados são substituídos pelas redes e o custo
marginal de produzir informações, gerar energia, produzir produtos, e
ensinar alunos é quase zero.
2.1. Pesquisa com usuários
Com o objetivo de obter melhores resultados neste projeto e

baseando em Lowdermilk (2013) ao compreender as necessidades dos
usuários, possíveis erros e equívocos podem ser evitados, foi realizado
um questionário voltado às empresas, possíveis usuárias do website a
ser desenvolvido. Primeiramente foi feito um levantamento de empresas
têxteis locais para aplicar o questionário, após o levantamento, as
principais questões que permearam o desenvolvimento desta pesquisa
foram elaboradas, tais como: 1.Qual é a sua empresa?; 2.Que tipo de
vestuário sua empresa produz?; 3.Sua empresa tem um público, local,
regional ou nacional?; 4.Você se considera conectado digitalmente?; 5.Por
quais meios você costuma se conectar a internet?; 6.Sua empresa gera
resíduos têxteis?; 7.Qual o destino dos resíduos da sua empresa?; 8.De
zero a cinco qual a importância dos resíduos têxteis para sua empresa?;
9.Qual a sua opinião sobre dar um destino totalmente sustentável e
rápido para os resíduos têxteis de sua empresa via site?; 10.Você como
empresário, estaria disposto a pagar uma pequena taxa mensal para
descartar de forma correta e sustentável os resíduos têxteis gerados pela
sua empresa? 11.Como você gerencia a relação de sua empresa com o
meio ambiente?; 12.Você gostaria de ter acesso aos resíduos de outras
empresas têxteis? 13.Você utilizaria um website para trocar resíduos ou
289
disponibilizar os que sobram na sua empresa?; 14.Você pagaria por isso?.
Após a elaboração do questionário, foi realizada a divulgação do mesmo
para as empresas.
Dentre as respostas obtidas, todas as empresas que responderam
o questionário produzem resíduos têxteis. Em relação ao descarte,
100% das empresas afirmaram que realizam a doação do material têxtil,
entretanto 25% além da doação, também descartam o resíduo em lixo
comum. Destaca-se que as empresas reconhecem os resíduos como
parte importante de todo processo, além disso a partir das respostas,
nota-se que propor um destino correto e rápido via site para os resíduos
é uma excelente opção, visto que todas as empresas utilizam a internet
como principal ferramenta para comercialização de seus produtos.
Porém, ao questionar as empresas sobre o pagamento de uma pequena
taxa mensal para utilizar o site, apenas 50% aceitaram. Constatou-se
também que a maioria delas têm uma preocupação com o destino destes
resíduos e procuram de alguma forma dar um rumo correto.
Neste sentido, o website proposto por esta pesquisa, surge como
um meio facilitador às empresas que não possuem uma política de
descarte correto, bem como alternativa de descarte sustentável para as
demais empresas. Do total de empresas que responderam o questionário,
50% utilizariam o website proposto para disponibilizar resíduos têxteis,
mas apenas 25% pagaria pelo serviço oferecido pela plataforma.
2.2. Desenvolvimento da Interface
A plataforma desenvolvida proporciona a colaboração e o

compartilhamento entre empresas e usuários na medida que ambos
colaboram entre si, as primeiras doando o resíduo têxtil que seria
descartado e os usuários reutilizando esse resíduo têxtil, seguindo os
preceitos de economia colaborativa propostos por Rifkin (2015).
Com a metodologia dos 5 planos proposta por Garret (2011),
os conceitos de Design centrado no usuário de Lowdermilk (2013)
e as propostas de Rifkin (2015) a plataforma desenvolvida seguiu o
método 5I`s que propõe ser um facilitador ao projetista iniciante, de
fácil assimilação pelas “5” etapas que iniciam com a letra “i”. As etapas
dividem-se do seguinte modo: IdeAção; InambulAção; InstaurAção;
Inspeção; Implementação.
290
A ideia surgiu a partir da necessidade de obtenção de tecidos
para realizar trabalhos no curso Tecnólogo de Design de Moda da
Universidade Franciscana e pela dificuldade de aproximação e contato
entre designers/estudantes de moda/pessoas autônomas e as
empresas de vestuário. Seguindo o método dos 5I’s primeiramente na
etapa 1 foi realizado o briefing, brainstorming e a busca por referências.
Iniciou-se também os primeiros mapas mentais e as pesquisas iniciais
com usuários além da elaboração das personas.
Na etapa 2 InambulAção, as pesquisas sobre as personas foram
aprofundadas a fim de desenvolver as necessidades dos usuários e
requisitos funcionais, foi realizado também um aprofundamento nas
análises de referências e a escolha das tecnologias que seriam utilizadas.
Segundo Lowdermilk (2013, pg. 73) “Uma persona é um elemento
determinado segundo a personalidade que ajuda você a se lembrar para
quem o aplicativo está sendo criado.”
Stella 28 anos, estilista formada em Design de Moda há 6 anos.
Criou seu ateliê próprio há 3 anos e trabalha criando e desenvolvendo
vestidos de festas seguindo o viés sustentável da moda. Sempre
busca criar vestidos aliando beleza e sustentabilidade, Stella gostaria
que existisse um website onde pudesse encontrar facilmente lugares
com resíduos têxteis disponíveis e gostaria de publicar o resultado do
reaproveitamento do resíduo por ela adquirido como forma de feedback
para a empresa e como forma de publicar seu trabalho e divulgar as
diversas formas de reaproveitar resíduos têxteis.
Beatriz 21 anos, estudante de moda, vegana e mãe de um felino
e um canino. Está sempre antenada nas novas tendências de moda e
se veste de maneira estilosa e consciente, compra a maioria de suas
roupas em brechós e frequentemente faz trocas de roupas com suas
colegas a fim de evitar a compra de novas roupas. Beatriz precisa fazer
muitos trabalhos de moda e para isso ela sempre está buscando novas
alternativas e soluções para desenvolvê-los de forma consciente com
desperdício mínimo. Beatriz gostaria que houvesse um site para divulgar
empresas que possuem resíduos têxteis disponíveis para doação, e que
fossem empresas da própria cidade.
DC empresa nacional de vestuário feminino, gera muitos quilos de
resíduos têxteis por mês. Necessita de uma forma de descarte adequado
para seus resíduos, pois vendê-los não compensa, levando em conta o
rendimento obtido com a venda dos produtos da empresa. Está aberta
291
a negociações e soluções para seu resíduo têxtil, inclusive muitos
projetos envolvendo a comunidade foram pensados, porém percebeu-
se a necessidade de repassar a informação às pessoas com interesse na
reutilização dos resíduos.
Após a criação das personas que definiram as categorias de
usuário que estariam no centro do projeto, foi realizada uma busca
por interfaces da mesma categoria e listados os elementos possíveis
de serem usados como referência, para atender os requisitos e
funcionalidades listados acima. Entre estas interfaces pesquisadas estão:
o site Banco de Tecidos e o aplicativo TheSquirrelz.
O Banco de Tecidos é um lugar onde as pessoas podem depositar
seus tecidos, sobras de suas criações. As unidades do Banco de Tecidos
estão localizadas em São Paulo e Florianópolis. Estes resíduos têxteis
serão pesados, organizados e higienizados. As sobras selecionadas ficam
à disposição no Banco e pequenos retalhos são doados. Por cada quilo
depositado o usuário recebe créditos, e com esses créditos pode sacar
tecidos do Banco, para serem reutilizados.
Figura 1 - Tela inicial do site Banco de Tecidos
Fonte: Screenshot
The Squirrelz é um aplicativo para iOS que permite o

compartilhamento de produtos que o usuário não utiliza mais, para que
292
outros designers possam encontrá-los e reaproveitá-los. O lema do
aplicativo é “Reduza o desperdício através da criatividade”. Criado pela
designer de moda Bunny Yan, este aplicativo encontra-se na fase de
testes nos Estados Unidos.
Figura 2 - Website do aplicativo The Squirrelz
Fonte: Screenshot
Figura 3 - Website do aplicativo The Squirrelz
Fonte: Screenshot
Na etapa 3 de InstaurAção foram realizados os Rabiscoframes;

Cardsorting; Wireframes, buscando visualizar a hierarquia visual; os
Protótipos que segundo Lowdermilk (2013) “permitem que você converta
os requisitos de usuário e os requisitos funcionais em algo mais tangível”;
realizou-se organização da Arquitetura de Informação; e foi pensado
o Design de Interação através dos fluxos da interface, bem como o
Design Sensorial.
293
Figura 4 - Processo de Card Sorting realizado
Fonte: autora
Segundo Lowdermilk (2013) “os protótipos permitem que você

converta os requisitos de usuário e os requisitos funcionais em algo
mais tangível”.
Figura 5 - Protótipo de papel desenvolvido
Fonte: autora
A 4ª etapa é a Inspeção, o momento em que são realizados os
Testes de Usabilidade para análises e avaliações.
294
Nos testes realizados com usuários, constatou-se que o texto
utilizado na página “SOBRE” estava com pouco espaçamento entrelinha,
dificultando a leiturabilidade. Verificou-se também que o menu do
cabeçalho estava grande demais para o tamanho de tela 1366px, assim
como os ícones das redes sociais localizados no rodapé. Foi possível
constatar também que a seta de rolagem do slide de fotos da “PÁGINA
INICIAL” deveria ter consistência com a apresentação dos tecidos do
“PERFIL DO USUÁRIO”, uma vez que ter consistência constitui uma das
categorias do checklist proposto por Heikkila (2013).
Na 5ª e última etapa dos métodos do 5Is chamada de
ImplementAção, ocorre a finalização produto; e são realizadas novas
inspeções e substituições conforme forem necessárias.
2.3. Estrutura da Interface
A interface desenvolvida apresenta um menu que não é fixo, pois

a cada página o menu troca suas opções. A interface possui rodapé, o
qual foi pensado como um meio mais rápido de se dirigir à página que o
usuário deseja.
Para o desenvolvimento do protótipo, tanto na versão mobile,
quanto na versão desktop, foi utilizado o programa Adobe Muse na versão
CC 2017. Devido a sua interface voltada aos profissionais da área criativa
ser bastante visual e intuitiva, o processo tornou-se simplificado por ter
poucas etapas envolvendo programação.
Figura 6 - Fluxo de informações
Fonte: autora
295
Figura 7 - Arquitetura de Informação
Fonte: autora
2.4. Aspectos visuais da Interface
Quanto aos aspectos visuais da interface desenvolvida deve-

se destacar a produção de fotografias para o website, realizadas com
resíduo têxtil de uma empresa local da cidade. A tipografia utilizada no
website pode ser classificada como moderna por não possuir serifas,
foram utilizadas duas fontes: Unica One e Oswald. A fonte Oswald foi
utilizada Regular e Light e foi escolhida para textos. A fonte Unica One foi
escolhida para o menu, botões clicáveis e títulos de páginas. Utilizou-se
para as fontes as cores branco e cinza. Foi criado um ícone para a interface,
com a finalidade de representar as empresas doando seus produtos
aos usuários, para estes reusarem, reutilizarem e reaproveitarem estes
resíduos têxteis. Além desse ícone criado, foram utilizados os ícones das
redes sociais no rodapé do website.
Figura 8 - Ícones utilizados no Website
Fonte: Autora
296
Figura 9- Fotografias da apresentação na página inicial
Fonte: Autora
Figura 10 - Fotografias utilizadas como plano de fundo em cada página
Fonte: Autora
Figura 11 - Página inicial do website desenvolvido
Fonte: Autora
297
2.5. Viabilidade econômica da Interface
A interface desenvolvida tem como principais objetivos (i) aproximar

o usuário das empresas para que ocorra o recolhimento do resíduo têxtil
cedido pela empresa; (ii) Estabelecer conexões/conectar/aproximar os
usuários dos fornecedores; (iii) Localizar e apresentar empresas com
resíduos têxteis disponíveis; (iv) Facilitar acesso dos designers de moda
às indústrias.
Para viabilizar economicamente esta interface desenvolvida, são
ofereceridos aos usuários e empresas 3 pacotes de cadastro, um primeiro
pacote mensal, um pacote com duração de 6 meses e um anual. Para se
cadastrar na plataforma o usuário ou empresa deve, antes de preencher
o formulário, optar entre estes 3 pacotes oferecidos pelo website para o
uso dos serviços da plataforma.
3. Considerações finais
Atualmente, o consumo despretensioso está se reduzindo e os

consumidores estão se tornando mais exigentes com relação a produtos
de alta qualidade e durabilidade, evidenciando a necessidade de uma
produção consciente, que vise a redução de impactos no meio ambiente
porém, ainda pensa-se pouco na logística reversa da peça de vestuário e na
quantidade de resíduo têxtil descartado incorretamente pelas empresas
têxteis. A compreensão da reciclagem de resíduos têxteis surge como
uma alternativa para a redução dos impactos ambientais. Percebe-se a
capacidade de resiliência dos resíduos têxteis, uma vez que, por meio da
interface desenvolvida, estes poderão ser reaproveitados e reutilizados.
As metodologias e os métodos aplicados no desenvolvimento
da interface, mostraram-se pertinentes, esclarecendo e otimizando o
processo de desenvolvimento de interfaces. A partir das metodologias
e métodos utilizados foi possível desenvolver um website partindo das
análises realizadas junto aos usuários.
Para este projeto pretende-se realizar uma pesquisa de campo
com empresas e ateliês locais, para analisar como o resíduo têxtil
destas empresas é descartado. Essa pesquisa será realizada através de
questionário enviado por email ou para o site da empresa e via entrevista
em empresas ou ateliês que não possuem website.
298
4. REFERÊNCIAS
ANDERSON, C. Makers - A Nova Revolução Industrial. Rio de Janeiro: Elsevier, 2012.
ARMSTRONG, D L; YU, K W. O princípio persona: como ter sucesso nos negócios

com o marketing de imagem. Rio de Janeiro: Editora Rocco, 1996.
Banco de Tecido. Disponível em: <http://bancodetecido.com.br/>. Acesso em: 12

Abr 2017.
CHASE, R. Economia Compartilhada: Como Pessoas e Plataformas da Peers Inc.

Estão Reinventando o Capitalismo. São Paulo: Hsm Management, 2015.
COLERATO, M. Documentário “The True Cost” Questiona Os Custos Reais Da

Indústria Da Moda Atual. MODEFICA. 28 de Mai 2015. Disponível em: <http://www.
modefica.com.br/documentario-the-true-cost/#.WV0Q6ITysdU>. Acesso em: 05
Jul de 2017
GARRETT , J J. The Elements of User Experience: User-Centered Design for the Web
and Beyond. CA: New Riders, 2011.
HEIKKILA, H. Towards tablet publication heuristics. Aalto, Finlândia: 2013. Acesso

em: 05 Jul 2017.
Lei nº 12.305. Presidência da República. Disponível em: <http://www.planalto.gov.

br/ccivil_03/_ato2007-2010/2010/lei/l12305.htm>. Acesso em: 28 de Mar 2017.
LOWDERMILK, T. Design centrado no usuário: um guia para o desenvolvimento de

aplicativos amigáveis. São Paulo : Novatec Editora, 2013.
MACHADO, P G. S.; LEONEL, J N. Práticas de reciclagem de resíduos têxteis: uma

contribuição para a gestão ambiental no Brasil. Competência: Revista da Educação
Superior do Senac - RS, Porto Alegre, v.7, n.1, p. 129-145, 2014.
AGNI, E. Avaliação heurística na análise de interfaces. iMasters. 16 Out 2015.

Disponível em: <https://imasters.com.br/design-ux/usabilidade/avaliacao-
heuristica-na-analise-de-interfaces/?trace=1519021197&source=single>. Acesso
em: 06 Jul 2017.
RIFKIN, J. The Zero Marginal Cost Society. NY: Palgrave Macmillan, 2015.
The Squirrelz. SANG. 2016. Disponível em: <https://thesquirrelz.com/>. Acesso em:

12 Abr 2017.
299
VIEIRA, K N. ; SOARES, T. O. R. ; SOARES, L. R. A logística reversa do lixo tecnológico:
um estudo sobre o projeto de coleta de lâmpadas, pilhas e baterias da Braskem.
RGSA - Revista de Gestão Social e Ambiental, São Paulo, v.3, n.3, p. 120-136, 2009.
<http://www.spell.org.br/documentos/ver/1335/a-logistica-reversa-do-lixo-
tecnologico--um-est--->. Acesso em: 04 de Jul 2017.
300
301
Shelter: um refúgio em design de interface
para o contexto sociopolítico atual
Andressa Dotto Colusso

Henrique Pivetta Viero
RESUMO: O presente artigo tem como objetivo evidenciar a metodologia

para o desenvolvimento de uma interface digital, gerada no Laboratório
Profissionalizante de Interface, na Universidade Federal de Santa Maria,
orientada pela Prof.ª Dra. Débora Aita Gasparetto. O estudo aprofundado
desta interface foi baseado na metodologia dos 5Is, que permite o estudo
aprofundado das especificações e fatores projetuais que devem ser
levados em consideração para a materialização adequada de uma nova
interface evidenciando o design centrado no usuário. Este usuário em que
o projeto é centrado, no contexto de Shelter, é o público LGBTQ+, devido
à atual onda de conservadorismo que negligencia as necessidades desta
comunidade com simples demandas de equidade de direitos. O objetivo
principal do projeto é usar recursos disponíveis para reconhecer as
necessidades e dificuldades de grupos marginalizados pela sociedade
e, assim, se apropriar da tecnologia para transformar este ambiente tão
hostil em um lugar um pouco mais acolhedor.
1. INTRODUÇÃO
A tecnologia está cada vez mais presente na vida de todos nós e

ela deve se tornar acessível para os mais diversos públicos, permitindo
que esta ferramenta tão versátil possa ter real utilidade para pessoas
com necessidades variadas e, algumas vezes, vitais. Por isso, quando
falamos de interfaces digitais, é imprescindível levar em consideração o
design centrado no usuário (DCU). Segundo Lowdermilk (2013), o DCU é
uma metodologia para design de softwares que se originou da interação
humano-computador (IHC), baseada na usabilidade e focada no modo
como seres humanos interagem com produtos ligados à computação.
“O conceito de design centrado no usuário é muito simples: levar
o usuário em consideração em todos os passos do desenvolvimento do
302
produto” (GARRETT, 2011, tradução nossa), o que significa não mais resumir
o projeto a decisões tomadas pelo projetista somente com o cliente,
trazendo o usuário final - com necessidades diferentes dos próprios
criadores - para dentro do design, afinal é ele quem terá a experiência
de utilizá-lo. Isso é prestar atenção na experiência do usuário (UX: user
experience), que define como as pessoas irão interagir com qualquer
produto, suprindo ou não as suas variadas necessidades.
2 COMUNIDADE LGBTQ+ E CONTEXTO SOCIOPOLÍTICO
Em um mundo no qual mais de 70 países ainda possuem legislação

criminalizando orientações sexuais diferentes da heterossexualidade ou
identidades de gênero discrepantes da cisgeneridade, 8 desses países
tendo a pena de morte como punição (ILGA, 2018), o Brasil se coloca
como campeão mundial de violência contra as minorias sexuais, com 445
mortes noticiadas em 2017 (GGB, 2018).
Neste contexto agressivo para a comunidade LGBTQ+, onde a
expectativa de vida de transexuais gira em torno de 35 anos (ANTUNES,
2010), menos da metade da média nacional de 76 anos (IBGE, 2018), e
os retrocessos para com esse grupo social crescem com casos como a
liminar de 2017, que libera psicólogos para tratarem homossexualidade
como doença com terapias de “reversão sexual” (COSTA; JÚNIOR; SILVA,
2018), o Programa Escola sem Partido, que pretende vetar a discussão
sobre gênero e sexualidade na sala de aula, ambiente chave para o
combate ao preconceito (MIGUEL, 2016), e a recente eleição de Jair
Bolsonaro, representante da direita radical conservadora que já afirmou
em rede nacional que “ter filho gay é falta de porrada (sic)” (NOGUES,
2014); os sentimentos de ameaça e de ter suas identidades colocadas
em xeque se agravam.
Apesar disso, ao passo em que os retrocessos acontecem,
movimentos e grupos de resistência e amparo dentro da comunidade
surgem em contrapartida. Um dos maiores exemplos disso é a Casa 1
em São Paulo, um centro de acolhimento de até 20 jovens que também
se coloca como um centro cultural, com programações socioeducativas
para a comunidade em geral, e uma clínica social, com atendimentos
psicoterápicos gratuitos ou de baixo custo para LGBTQs que não
têm condições financeiras. O direito à resistência é, como referido na
Declaração dos Direitos do Homem e do Cidadão de 1793, inerente
303
aos movimentos retrógrados de um governo, imprescindível para a
consolidação e a manutenção de direitos sociais: “quando o governo
viola os direitos do povo, a insurreição é para o povo e para cada porção
do povo, o mais sagrado dos direitos e o mais indispensável dos deveres”
(FILHO, 2013 apud SÉMELIN, 1994).
Com as discussões sobre gênero e sexualidade sendo, ao mesmo
tempo, acaloradas e censuradas cada vez mais, as necessidades
de comunidades que dependem dessas discussões para terem sua
humanidade reconhecida se tornam mais sérias e relevantes. Por
isso o design centrado no usuário aplicado ao design de interações é
fundamental, pois conforme Helen Sharp, Yvonne Rogers e Jennifer
Preece (2013), tem como primeira meta identificar essas necessidades
do usuário para estabelecer requisitos de projeto, dando oportunidade e
voz a pessoas que são estruturalmente marginalizadas.
3 METODOLOGIA E PROJETO
O projeto Shelter foi desenvolvido utilizando a metodologia dos 5Is

elaborada pela Prof.ª Dra. Débora Aita Gasparetto (2017) alicerçada nas
fases propostas por Jesse James Garret (2011) e Travis Lowdermilk (2013).
O método é dividido em 5 fases (IdeAção, InambulAção, ImplementAção,
Inspeção e InstaurAção) que são subdivididos em etapas que permitem o
estudo aprofundado das especificações e fatores projetuais que devem
ser levados em consideração para a materialização adequada de uma
nova interface.
O desenvolvimento da interface tem como objetivo primário um
trabalho acadêmico do Laboratório Profissionalizante de Interface do
Curso de Desenho Industrial da Universidade Federal de Santa Maria.
A partir disso, foi levado em consideração o contexto sociopolítico em
que estamos inseridos para direcionar o projeto a objetivos que atendam
essa temática: proteção, empoderamento e valorização da comunidade
LGBTQ+ como grupo social impelido institucional e estruturalmente às
margens da sociedade.
Para projetar esta interface, utilizou-se o conceito de Mobile First,
cunhado pelo autor Luke Wroblewski (2011), em que, para atender à
recente explosão de celulares inteligentes e dispositivos móveis com
acesso à internet e seu protagonismo no mundo digital, primeiro se
desenha uma interface para versões móveis, que caibam em telas
304
menores. Se um desenho de interface pode ser contido em uma tela
de 360x640 px (dimensões médias de dispositivos móveis em geral), ele
pode ser, posteriormente, reorganizado para telas maiores. Isso depende
de layouts flexíveis baseados em grades, e o uso de mídias fluídas, isso,
segundo Ethan Marcotte (2011) é o que define um design responsivo.
3.1 IdeAção e InambulAção: definição do problema e contexto de uso
Na fase de IdeAção ocorre a definição do problema, com pesquisa

por referências, pesquisa com usuários, desenvolvimento de personas
e definição de pontos de contato do público-alvo com a interface
a ser projetada, trazendo o usuário para dentro da metodologia. Na
InambulAção é feita a análise das pesquisas realizadas na fase anterior
para extrair os requisitos de projeto e as funcionalidades que esses
requisitos exigem.
3.1.1 Problematização
O problema em questão é complexo e se origina da falta de

educação para inclusao herdada de gerações anteriores baseadas em
preconceitos tradicionais inerentes ao patriarcado que gera uma série de
prejuízos para a comunidade LGBTQ+, como instabilidade familiar, que
obriga os jovens da comunidade a conquistar independência financeira
mais cedo que a maioria das pessoas, se deparando com as dificuldades
e o preconceito no mercado de trabalho. E sua necessidade foi definida
através de um briefing gerado a partir das perguntas bonsiepianas
(BONSIEPE, 1984), “o quê?”, “como?” e “por quê?” acrescidas de “para
quem?”, “por quem?” e “em que lugar?” pela metodologia dos 5Is:
Uma interface que possibilite o contato de pessoas da comunidade
LGBTQ+ que precisam de ajuda com pessoas que estão dispostas a ajudar.
Isso se consolidará por meio de uma rede que concentre informações
sobre vagas de hospedagem e oportunidades de empregos para
pessoas que vivem em ambientes tóxicos e são excluídas do mercado
de trabalho. A interface terá como público alvo lésbicas, gays, bissexuais,
travestis e transexuais que não veem outra alternativa à obrigação de
conquistar independência financeira muito cedo para se desvencilhar de
um ambiente tóxico que recrudesce transtornos psicológicos e prejudica
a vida como um todo; por uma sociedade melhor e mais empática,
305
aberta às diferenças; em qualquer lugar que se fizer necessário. A ideia
é oferecer oportunidades alternativas à marginalização social à qual a
comunidade LGBTQ+ é estruturalmente impelida.
3.1.2 Pesquisa com usuário

Uma pesquisa foi feita por meio da ferramenta Google Forms com
um grupo de potenciais usuários da interface para definir e comprovar sua
necessidade. Foram obtidas 77 respostas, em sua maioria por estudantes
entre 19 e 25 anos. 63% dos LGBTQs que responderam consideram o
ambiente em que vivem potencialmente tóxico e 40% já pensaram em
sair de casa por causa de LGBTQfobia.
67,5% das pessoas que responderam já enfrentaram ou conhecem
alguém que enfrentou dificuldades em conseguir emprego por ser
LGBTQ+ e o percentual de pessoas que foram ou conhecem alguém que
foi expulso de casa sobe para 71,4%.
Das pessoas que participaram da pesquisa, 90,9% consideraram
muito necessário que exista um local que abarque as necessidades da
comunidade explanados durante a pesquisa, e 85,7% respondeu que
hospedaria algum LGBTQ+ que precisa de abrigo se tivesse condições
(Figura 1).
Figura 1 - Gráfico de resposta
Fonte: elaborado pelos autores (2018)
306
3.1.3 Personas, tarefas, requisitos e funcionalidades
A partir da pesquisa com usuário e da problematização, foram

criadas quatro personas, uma para cada letra da sigla LGBT, com desejos
e necessidades compatíveis às do público alvo para serem extraídas
tarefas às quais nossa interface precisa corresponder.
As tarefas destacadas foram: conectar pessoas que precisam de
abrigo a pessoas dispostas a abrigarem, mediar um acordo de troca
mútuo entre hospedeiro e hóspede, oferecendo possibilidades de troca
de serviços, disponibilizar um espaço para divulgação de atendimento
psicológico voluntário e gratuito para pessoas com grande necessidade
e, por fim, estimular a conexão e a troca de conhecimentos para
crescimento pessoal e profissional. Essas tarefas originaram a definição
dos requisitos na fase de InambulAção e, consequentemente, auxiliaram
na definição das funcionalidades que a interface deve ter.
3.1.4 Análise heurística
A partir da pesquisa de referências, analisou-se o aplicativo de

hospedagem “Roomi”1. A análise heurística (Figura 2) é importante para a
avaliação e definição de parâmetros significativos para aprimorar a IHC
(NIELSEN, 1994).
Figura 2 - Análise heurística do Roomi
A partir da análise do Roomi, ressaltou-se a importância da

consistência e uniformidade em uma interface digital, que precisa falar a
1 https://roomiapp.com/
307
linguagem do usuário e fazê-lo reconhecer os caminhos que deve tomar
ao invés de obrigá-lo a memorizar e lembrar cada vez que deseja utilizar
a interface.
3.2 ImplementAção: design de informação
Na fase de ImplementAção começa a concepção gráfica da

interface propriamente dita, é quando é pensado o design de informação.
Segundo Garrett (2011), o design de informação é uma ferramenta utilizada
para mostrar ao usuário todas as informações da melhor forma que ele
possa compreender, facilitando as decisões que ele venha a tomar, sendo
uma espécie de “cola” que une todos os outros componentes do design,
facilitando a navegação por toda a interface.
Já que o design de interface não é responsável apenas por coletar
informações dos usuários, mas também transmitir informações a eles, o
design de informação tem o papel de dissecar as tarefas e os objetivos dos
usuários e refletir a forma como ele pensa, de modo a prevenir possíveis
enganos utilizando, por exemplo, tutoriais e mensagens de erro. Além
disso, outra função do design de informação é o agrupamento adequado
de informações, de uma forma com a qual o usuário já esteja habituado,
e é por isso que foi identificada a necessidade de desenvolver uma
biblioteca de ícones próprias para a interface (Figura 3), em consonância
com a linguagem do padrão tipográfico escolhido e com harmonia gráfica
entre os próprios ícones, com o intuito de facilitar o reconhecimento do
usuário de formas e padrões já existentes no seu inconsciente.
Figura 3 - Set de ícones do Shelter
308
Os ícones desenhados utilizam todos a mesma grade e vão do
símbolo da interface até as setas direcionais básicas, passando por ícones
de calendário, galeria, câmera, busca, configurações, localização, entre
outros, e foram pensados para auxiliar a navegação pela plataforma.
Ademais, o design de informação também atua juntamente com o
design de navegação para formar o waifinding, responsável por mostrar
ao usuário onde ele está e aonde ele quer chegar (GARRETT, 2011), e
para aprimorá-lo, é nessa fase que começam os esboços do sitemap
(Figura 4) com o auxílio da técnica de rabiscoframes (Figura 5) (TEIXEIRA,
2014), para possibilitar testes mais concretos com usuários antes do
desenvolvimento de um protótipo interativo digital.
Figura 4 - Primeiro esboço de sitemap criado na plataforma mindmeister.com
309
Figura 5 - Primeiros rabiscoframes esboçados para testar interações da interface

Depois dos primeiros testes com usuários por meio da técnica de
card sorting, um protótipo interativo digital começou a ser desenvolvido
utilizando a ferramenta “Adobe XD” (Figura 5), um software desenvolvido
pela Adobe Inc. voltado para a prototipação simples e interativa de design
de interface, possibilitando ao designer simular seu projeto da maneira
mais fiel possível.
Figura 5 - Prototipagem interativa digital com o Adobe XD
310
Além disso, nesta fase também é pensado o design sensorial,
que utiliza conhecimentos básicos do campo do design em cromática
e imagética para definir previamente padrões cromáticos, tipográficos e
gráficos no geral que serão refinados na fase seguinte.
A técnica de brainstorm foi utilizada para geração de alternativas
para o nome da interface. O termo escolhido foi “Shelter”, que significa
abrigo em inglês, e traz a conotação de segurança e rede de apoio que
o conceito da plataforma quer evidenciar, e, apesar de ser uma palavra
estrangeira, sua grafia em inglês é muito semelhante à pronúncia do
vocábulo, não acarretando dificuldades ou discrepâncias em relação às
da identidade.
3.3 Inspeção: testes e avaliações
A fase de Inspeção é marcada por testes com usuários, sendo

primordial para a boa execução do DCU. É quando se testa o que foi
pensado e gerado nas fases anteriores com caráter avaliativo para refinar
o projeto e deixá-lo pronto para a InstaurAção.
Durante esses testes foi constatado que nos esboços iniciais a
tarefa “oferecer possibilidades de troca de serviços” foi deixada de
lado e precisava ser resgatada. Além disso alguns testes com padrões
cromáticos evidenciaram a importância de um bom contraste para a
acessibilidade de pessoas com baixa visão.
O padrão tipográfico utilizado consiste na webfont “M PLUS
Rounded 1c”, por Coji Morishita (Figura 6), uma família tipográfica sem
serifa com terminações arredondadas que produzem uma mancha de
texto suave e contribuem para a conotação conceitual da interface. O
padrão cromático deriva das cores da bandeira LGBTQ+ em tons pastéis
mais suaves (Figura 7).
Figura 6 - Padrão tipográfico
311
Figura 7 - Padrão cromático
4 CONSIDERAÇÕES FINAIS: O RESULTADO
Apesar de um projeto de interface ser marcado pela sua não-

finalização, com constantes repetições das últimas etapas de avaliação,
já que a forma como os usuários interagem com o design pode ser
constantemente aperfeiçoada, dentro do prazo estabelecido para o
desenvolvimento do trabalho, ele se finaliza de maneira satisfatória
(Figura 8) em uma plataforma com função e utilidade real dentro de um
contexto sociopolítico e histórico problemático para uma comunidade
com demandas e necessidades comumente silenciadas.
Figura 8 - Aplicação das telas da interface em mockup digital
312
O design centrado no usuário foi fundamental para o adequado
desenvolvimento do projeto, suprindo, no contexto dos testes com
usuários, as necessidades do público-alvo e garantindo que ele fosse
sempre ouvido, considerando seus feedbacks e críticas, sendo inserido
em todas as etapas do projeto. O projeto ainda não foi implementado,
mas tem grande potencial para tornar-se de fato um refúgio, sobretudo,
no atual momento político-social-econômico que estamos vivenciando.
Para a implementação é essencial que uma pesquisa mais aprofundada
de mercado seja desenvolvida, mostrando também sustentabilidade
financeira, sendo que é um projeto que pode impactar de fato na vida de
inúmeras pessoas e persistirá a longo prazo, por isso essa análise precisa
ser bem detalhada com um planejamento consistente a longo prazo.
REFERÊNCIAS
ANTUNES, P. P. S. Travestis envelhecem?. 2010. 268 p. Dissertação (Mestrado em

Gerontologia) - Pontifícia Universidade Católica de São Paulo, São Paulo. 2010
BONSIEPE, G. Metodologia experimental: desenho industrial. Brasília: CNPq, 1984
COSTA, A. E. O.; JUNIOR, J. I. L.; SILVA, D. M. V. Reorientação sexual: compromisso

científico ou subterfúgio para cura gay? Maceió: GEP NEWS, 2018
FILHO, J. V. R. História, memória e historiografia: o mito da resistência e os desafios

para o estudo da ditadura civil-militar no Brasil. Maringá: UEM, 2013.
and Beyond. Second Edition. Berkley: New Riders Press, 2011
GGB. Pessoas LGBT Mortas no Brasil - Relatório 2017. Disponível em: <https://
homofobiamata.files.wordpress.com/2017/12/relatorio-2081.pdf> Acesso em: 30
de novembro de 2018
IBGE. Em 2017, expectativa de vida era de 76 anos. Disponível em: <https://

agenciadenoticias.ibge.gov.br/agencia-sala-de-imprensa/2013-agencia-de-
noticias/releases/23200-em-2017-expectativa-de-vida-era-de-76-anos> Acesso
em: 30 de novembro de 2018
ILGA. Sexual orientation laws in the world - criminalisation. Disponível em: <https://
ilga.org/downloads/2017/ILGA_WorldMap_ENGLISH_Criminalisation_2017.pdf>
Acesso em: 30 de novembro de 2018
KRUPAHTZ, J.; GASPARETTO, D. A. Design centrado no usuário: redesenho da
313
interface digital da Revista Arco. São Paulo: Blucher, 2017
LOWDERMILK, T. Design Centrado no Usuário: Um guia para o desenvolvimento de

MARCOTTE, E. Responsive web design. New York: A Book Apart, 2011
MIGUEL, L. F. Da “doutrinação marxista” à “ideologia de gênero” - Escola Sem

Partido e as leis da mordaça no parlamento brasileiro. Rio de Janeiro: UERJ, 2016
NIELSEN, J. Enhancing the explanatory power of usability heuristics. Boston: ACM,

1994
NOGUES, N. C. A bancada evangélica no poder legislativo brasileiro: os limites ao

discurso na democracia. Curitiba: UniBrasil, 2014
SHARP, H.; ROGERS, Y.; PREECE, J. Design de Interação - Além da Interação Homem-
Computador. Terceira edição. Porto Alegre: Bookman, 2013

2014
WROBLEWSKI, L. Mobile First. New York: A Book Apart, 2011
314
315
A elaboração de um website em prol das
intervenções sociais: exercer a cidadania
por meio de interfaces digitais
Taynane Senna
RESUMO: O objetivo do texto é apresentar a elaboração do projeto “Dá

um Help Aí”, desenvolvido no Laboratório de Interface do curso Desenho
Industrial da Universidade Federal de Santa Maria. Baseada nas
metodologias de Jesse James Garrett (2011), que estuda a experiência
do usuário, Travis Lowdermilk (2013), que analisa o usuário como o centro
do projeto e nas boas práticas de Fabrício Teixeira (2014), a metodologia
usada para desenvolver o projeto, no Laboratório, é chamada de “5I`s”. O
processo é dividido em 5 etapas e foi adaptado pela professora Débora
Aita Gasparetto. O presente trabalho prevê um meio que gera alternativas
para minimizar os danos causados por desastres naturais, por meio de um
website com a interface similar ao de uma rede social. O projeto busca a
interação entre usuários que procuram ajuda e os usuários que querem
e podem ajudar. Um projeto que busca trabalhar a cidadania e gerar
empatia entre as pessoas envolvidas e como resultado visualizamos sua
prototipação.
1. INTRODUÇÃO
A partir da divulgação do IBGE, segundo o Perfil dos Município

Brasileiros (Munic) 2017, às áreas urbanas dos municípios brasileiros
são as mais afetada pelos desastres naturais, devido a construções de
moradias, rodovias e outras obras que interferem na drenagem da água
das chuvas e nos processos erosivos. Devido ao crescimento acelerado
da população urbana, segundo dados do IBGE (2010), pessoas com a
classe social menos favorecida por vez se instalam em locais de risco,
onde a probabilidade de enchentes e alagamentos se torna maior e mais
frequente. A população que não está incluída nessas regiões, muitas
vezes, não possui informações suficientes que às façam perceber as
reais necessidades e dificuldades vivida por pessoas que habitam estes
locais de risco.
316
De acordo com dados do IBGE, mais da metade, (59,4%) dos 5.570
municípios brasileiros, não contavam com instrumentos de planejamento
e gerenciamento de riscos em 2017. Sendo deles, 25% tinham o Plano
Diretor que contemplem a prevenção de enchentes e enxurradas.
Ao observar tais problemas e ao analisar o fato de que o uso de
Smartphones apresenta crescimento de 9% em 2016, em relação ao ano
anterior, ou seja, são mais de 168 milhões de usuários (FGV-SP, 2016), o
objetivo do presente projeto é fazer com que a comunidade se una em
prol da colaboração coletiva, por meio de uma interface digital web que
possibilite essa interação e a exibição destes problemas sociais.
Com base nisso, é indispensável aumentar a interação e empatia
social. Sempre existe a necessidade de ajuda após um desastre natural,
seja com doações, ajuda financeira ou presencial. Mas, como estar
informado das necessidades e das dificuldades da nossa comunidade?
2.METODOLOGIA
O propósito do website responsivo “Dá um Help Aí” é servir para a

comunidade como um meio de pedir auxílio e de oferecer ajuda, diante
disso o processo e o produto final não podem criar dificuldades para as
pessoas leigas ou que possuem alguma deficiência. Por isso, o website foi
pensado e projetado por meio das metodologias que fazem do usuário
o centro do projeto de design. A partir dessa premissa, foram adotadas
as seguintes etapas; [1] a criação de personas, que facilita na criação
e a compreensão de como os usuários de diferentes personalidades,
idades, círculo social, e interesses utilizam o produto; [2] a elaboração de
um sitemap, que possibilita imaginar os elementos básicos do projeto,
como funcionam as interações e os posicionamentos da arquitetura de
informação, que sofre evolução durante o processo de [3]card sorting.
Este permite mudar as interações e as posições dos menus e links para
que ofereça uma experiência prática. A projetação dos [4]Wireframes,
seguida pela implementação das interações e fluxos. Eles possibilitam
os primeiros testes com os usuários. Tais testes propõem alterações e
gerações de alternativas, iterações que trazem melhorias e tornam o
website mais acessível.
A determinação da usabilidade do produto é considerada por
meio da abordagem da Análise da Heurística, implementada por
Jakob Nielsen e Rolf Molich (1990), que consiste em testar o Feedback,
317
respostas do website para ações do usuário; Verificar se o produto possui
a linguagem do usuário; Dar a liberdade e o controle para o usuário; Ter
consistência; Prevenir erros; Reconhecer ao invés de lembrar; Oferecer
atalhos; Diálogos naturais e simples (estética e design minimalista); Boas
mensagens de erro; Ajuda na documentação.
Outro fator importante no contexto do projeto desenvolvido é a
interação com as redes sociais, para isso recorreu-se às contribuições de
Joshua Porter (2008). A metodologia (método AOF) proposta por ele inclui
[1] focar a atividade primária, ou seja o que o público fará na interface.
No caso de “Dá um Help Aí”, o público vai pedir ajuda e/ou oferecê-la.
[2] identificar os objetivos sociais; para este projeto, os objetivos são
aproximar quem precisa de ajuda de quem pode oferecê-la. [3] escolher
os recursos principais, ou seja, as tarefas que os usuários poderão
fazer na interface. Nesse sentido a interface desenvolvida precisa ter
basicamente uma linha do tempo atualizada com pedidos de ajuda, um
botão para ajudar, um chat para efetivar a ajuda e uma garantia de que
os usuários são confiáveis. Conforme o autor:
O design das aplicações das redes sociais baseia-se na nossa

habilidade de identificar e oferecer suporte às motivações
básicas das pessoas que usam nosso software. Uma vez que
identificamos essas motivações, podemos ajustar nosso design
de modo adequado” (PORTER, 2008, p.124, tradução nossa).
Detectou-se que os usuários de “Dá um Help Aí” são pessoas

altruístas e com alto grau de empatia e engajamento social.
Existem alguns projetos nesse sentido, já em andamento para
tentar amenizar esse grande problema social causado por fenômenos
naturais já citados. Pesquisas para saber quais propostas estão sendo
desenvolvidas com tais finalidades pelo país introduziram ao estudo duas
iniciações feitas pelo Ministério da Integração Nacional na Secretaria de
Proteção e Defesa Civil. A primeira foi o Centro Nacional de Gerenciamento
de Riscos e Desastres (Cenad), criado em fevereiro de 2005, por meio
do Decreto nº 5.376 com objetivo gerenciar ações estratégicas de
preparação e resposta a desastres em território nacional. O órgão atua
em diferentes posições: uma responsável pela atividade e mobilização
para atendimento às vítimas e outra que corresponde ao monitoramento
constante de informações sobre possíveis desastres em áreas de risco,
com o objetivo de reduzir impactos e preparar a população.
318
As informações obtidas de diversos órgãos do governo federal, tais
como, Centro Nacional de Monitoramento e Alertas de Desastres Naturais
(Cemaden), o Serviço Geológico do Brasil (CPRM), o Instituto Brasileiro do
Meio Ambiente e dos Recursos Naturais Renováveis (Ibama), a Agência
Nacional de Águas (ANA), a Agência Brasileira de Inteligência (Abin), o
Centro de Previsão de Tempo e Estudos Climáticos (CPTEC/INPE), o
Instituto Nacional de Meteorologia (Inmet), o Centro Gestor e Operacional
do Sistema de Proteção da Amazônia (Censipam), as Forças Armadas e
demais órgãos do Poder Executivo Federal são avaliadas e processadas
no Cenad e encaminhadas aos órgãos de Proteção e Defesa Civil dos
estados e municípios com risco de ocorrência de desastres, sendo
que o alerta ocorre de acordo com a intensidade do evento adverso. E
a segunda, o Projeto de Mapeamento, que tem como objetivo realizar
o mapeamento de áreas com riscos de deslizamentos e inundações
em municípios prioritários do Governo Federal. Essas duas propostas
servem para conhecer e compreender melhor a quais órgãos recorrer, e
agregam ao estudo e desenvolvimento do website “Dá um Help Aí”, onde
se coloca à disposição da comunidade o conhecimento e contato com
os tais projetos.
Outros projetos também serviram de referência à presente
pesquisa, como Chance, um aplicativo desenvolvido por Marcelo Dantas
e Gustavo Fernandes, no ano de 2015 que promove ajuda e colaboração
coletiva, por meio de encontros de diversas necessidades e desejos,
como tarefas de casa, ensino de um novo idioma, organização de eventos,
usuários disponíveis para doação de roupas, procura de emprego,
entre outros. E o website Hemotify, uma plataforma desenvolvida por
Fernando Henrique Berwanger, Gabriel Branco e Ricardo Morcelli, com
o objetivo conectar doadores de sangue aos hemocentros locais, na
cidade de Santa Maria (RS), por meio de notificações em redes sociais,
onde o usuário se cadastra no website e quando o hemocentro precisa
do seu tipo sanguíneo ele é notificado através do Facebook. Estas duas
plataformas também funcionam por meio da ajuda mútua, que exige a
interação e empatia das pessoas envolvidas.
3.APLICAÇÃO DA METODOLOGIA 5IS
Para a aplicação de metodologia dos 5Is, foi criado um briefing

para começar a estruturar o website, que dá destaque para firmar os
319
conceitos, as definições de público-alvo e os objetivos para o projeto; a
criação de personas, elaboradas para embasar melhor o público usuário
do website; e a procura por referências na área para não duplicar uma ideia
existente ou para aprimorar uma ideia que pode ser melhor elaborada.
Para a segunda etapa, a Incubação, buscou-se compreender as personas
criadas para extrair os requisitos e funcionalidades. Na terceira etapa,
a da InstaurAção, realizam-se rabiscoframes [Teixeira, 2014], o sitemap,
o card sorting, os protótipos em papel e interativos, que organizam a
arquitetura de informação e o design de interação. Para a quarta etapa,
foram realizados testes de usabilidade e acessibilidade com os usuários.
3.1 Ideação e Inambulação - Contextualizar o projeto e analisar possíveis

usuários
A partir do briefing bem resolvido, foi possível desenvolver um

conceito: projetar um website que possibilita que pessoas de uma
mesma região peçam ou ofereçam ajuda para outras pessoas por meio
de uma rede social; as definições de público-alvo: pessoas que moram
em locais de risco, que sofreram alguma perda material ou que tiveram
seus bens perdidos e pessoas que estão dispostas a ajudar ou a divulgar
os pedidos; e os objetivos do projeto: sensibilizar e estimular a população
a trabalhar a cidadania, por meio de ajuda mútua através do website.
A geração de personas foi baseada em perfis de pessoas que viriam
a usar o website. Assim, foram criadas três delas, (i) Alexandre, (ii) Helena
e (iii) Carla. Alexandre tem um perfil de estudante de ensino médio, com
16 anos. É um adolescente tímido, que mora em uma casa pequena com
sua mãe e seus quatro irmãos com quem divide um único notebook com
acesso à internet. Sua casa se encontra em uma das ruas da cidade que
mais alagam quando há chuva forte, portanto sempre ocorre o mesmo
problema, eles perdem tudo o que não conseguem carregar. Pelo fato
de sua renda financeira não ser muito alta, Alexandre e sua família não
conseguem repor tudo o que perdem, e procuram ajuda de amigos e
familiares que nem sempre conseguem ajudá-los. Com base no perfil
desenvolvido, é possível definir como requisitos: (i) o website precisa abrir
em múltiplas telas, (ii) ter boa leiturabilidade e legibilidade e (iii) ter uma
interface objetiva. Quanto às funcionalidades, (i) a necessidade de haver
responsividade, para que haja acesso pelo celular após o alagamento,
(ii) praticidade ao querer realizar um pedido de ajuda, ou seja, botão de
320
help com alta visibilidade (iii) vínculo com as redes sociais, que facilitam
o acesso e diminui o tempo de criação de contas.
A segunda persona projetada, Helena, uma senhora de 60 anos,
aposentada e com pouco condicionamento físico. Ela é um ser empático
que mora sozinha em uma rua onde a maioria dos moradores é idosa. Seus
três filhos moram em outra cidade, portanto ela se preocupa muito com
o bem-estar deles e comprou um celular com acesso às redes sociais.
Dona Helena gosta muito da tecnologia, mas tem medo de sites confusos
e complexos. Os requisitos de dona Helena são: (i) leiaute simples e
minimalista, (ii) boa leiturabilidade e legibilidade e (iii) semelhança com
redes sociais que ela já conhece e usa, como Facebook.
As funcionalidades necessárias são: (i) responsividade, (ii) bom
contraste entre texto e imagem e (iii) sistema de avaliação de usuários.
Carla, a terceira persona, tem 23 anos e cursa Medicina em uma
universidade pública. Ela pratica esportes no seu dia-a-dia, e possui
um bom condicionamento físico, adora as redes sociais e está sempre
por dentro de tudo, inclusive de trabalhos voluntários. Carla sempre
ajuda como pode. Seus requisitos são: (i) um bom planejamento
estético da interface, (ii) acesso à comunicação entre os usuários. Nas
funcionalidades, destacam-se as necessidades de: (i) Interface interativa
e intuitiva (ii) atualização e interface dinâmica.
A definição dessas três personas possibilita a compreensão das
necessidades e resume o público que terá acesso ao website, além de
estabelecer o público que estaria no centro do projeto.
Após determinar o público, foi feita uma pesquisa de plataformas
que buscam os mesmos objetivos, para serem usados como referências
para solucionar os requisitos e funcionalidades exigidos pelos usuários.
Entre eles estão os projetos já citados: o website Hemotify (Figura 01)
e o aplicativo Chance (Figura 02) que teve maior destaque no estudo,
por ser um aplicativo com uma proposta semelhante ao do projeto “Dá
um Help Aí”. A partir dos estudos do aplicativo Chance e detalhamento
da sua arquitetura de informação, foi possível organizar as expectativas
criadas e melhorar as ideias elaboradas pelos desenvolvedores, como
por exemplo, a plataforma ser apenas um aplicativo, que exige do usuário
espaço e organização do seu aparelho digital, o que o torna algo que
possa ser removido. Além disso, a web é universal, e atinge um maior
número de usuários. Ainda em função das atualizações constantes
nos pedidos de ajuda, é necessário estar conectado à internet. A partir
321
dessa observação, o projeto “Dá um Help Aí” tornou-se um website que
as pessoas podem acessar do seu Facebook ou apenas pesquisar no
seu navegador, com a possibilidade de acesso pelo computador, TV
digital, notebooks, tablets e outros dispositivos móveis. Ainda existe
possibilidade de colocar o acesso direto em seu navegador móvel, sem
ocupação do espaço de armazenamento do dispositivo móvel.
Figura 01 - Interface do website Hemotify.
Fonte: Screenshot
Figura 02 - Interface do aplicativo Chance.
Fonte: Screenshot
3.2 InstaurAção - Estudar possibilidades
Nesta etapa inicia-se a concepção gráfica. Para isso usou-se os

recursos de rabiscoframes e card sorting, voltado primeiro para a versão
mobile, que faz com que o desenvolvimento para outros tamanhos de tela
se tornem mais prático e fácil. Esse método, Mobile First, foi desenvolvido
322
por Wroblewski em 2009, quando propõe que se inicie um projeto pela
a menor tela, pois ela remove elementos desnecessários e traz melhor
compreensão no momento de organizar para os demais tamanhos de
tela. (WROBLEWSKI, 2011). Por meio dos recursos rabiscoframes e card
sorting (Figura 03) é possível desenvolver e organizar diversos modelos
de arquitetura de informação para buscar a simplicidade e organização
para dentro do projeto, com foco nos padrões mentais do usuário.
Também foi elaborado o protótipo (Figura 04), para versão mobile.
Esse protótipo foi desenvolvido no programa Adobe Experience Design,
versão CC 2018, que por ser um programa desenvolvido para profissionais
da área criativa, que permite que designers criem protótipos e os testem
de forma que o processo de criação e os testes com usuários se tornem
mais fácil, intuitivo e rápido, sem exigir nenhum conhecimento de
programação.
Figura 03 - Processo Card sorting
Fonte: autora
323
Figura 04 - Protótipo para versão mobile.
Fonte: autora
3.3 Inspeção - Experiência dos usuários

Diante da metodologia adotada, implementar testes com usuários
é indispensável. A cada modificação feita foram realizados testes
para que o público citasse o que não estava totalmente acessível ou
esteticamente inadequado. A partir das avaliações dos usuários notou-
se problemas como: (i) Acessar as sub divisórias (Ajuda presencial, Ajuda
com doações ou Ajuda financeira) para poder optar o tipo de ajuda que
o usuário pode oferecer, que no modelo antigo, precisava acessar uma
outra página, que seria hiperlinkada com a página inicial, e fez com que
o usuário não percebesse essa ferramenta que o website oferece; (ii) Os
botões para a seleção de tipo de ajuda solicitada ou que pode oferecer
não estavam destacados, portanto não funcionava intuitivamente,
conforme os critérios apontados na fase inicial do projeto.
324
3.4 InstaurAção - Avanço nos requisitos
Após as avaliações dos usuários durante os testes, foi possível

refinar o website e retirar o que causava problemas na percepção e na
compreensão das suas capacidades. Sendo assim, os problemas foram
resolvidos das seguintes maneiras: (i) posicionou-se as sub divisórias
das categorias de ajuda, já mencionadas, para página inicial do site,
juntamente com o feed de pedidos de ajuda, com o botão “Tipos de
ajuda” juntamente com um ícone que passa a ideia de filtros e opções,
para deixar clara a possibilidade que o site oferece de optar para ver
apenas os pedidos de ajuda de uma única categoria, por exemplo, ver
no feed apenas pessoas que estão a procura de ajuda com doações. (ii)
os botões para a seleção das categorias agora destacados e intuitivos,
melhora a capacidade de percepção das capacidades do website;
3.5. Implementação - “O projeto nunca está pronto”
Atualmente o projeto “Dá um Help Aí” ainda se encontra na etapa de

implementação. O protótipo interativo e online do website, fornecido pelo
programa Adobe Experience CC 2018, já citado, permite que o website
seja testado e traz a possibilidade de aplicar testes e questionários a
respeito do seu uso. Contudo, o programa não apresenta programação
de FrontEnd e BackEnd, sendo assim, exige a ajuda de um programador.
A partir desta complexidade, buscou-se a parceria de um estudante do
curso Ciência da Computação da Universidade Federal de Santa Maria,
que se dispôs a dar início ao processo de programação e implementação
do website, após todos os testes realizados com o protótipo funcional.
Isso minimiza o retrabalho do programador e objetiva uma comunicação
eficaz entre designer e programador, algo muito importante quando se
trabalha de modo interdisciplinar.
4. ELABORAÇÃO DA INTERFACE
O projeto elaborado permite que a comunidade se una por meio

de uma rede social colaborativa, e oferece a possibilidade de que se
pratique a cooperação coletiva e ajuda mútua. A plataforma deste website
permite que pessoas que procuram por ajuda entrem em contato com
pessoas que estão dispostas a ajudar.
325
Na página inicial do site foi projetado um Feed de pedidos de ajuda
( Figura 05), nele estão as solicitações, as quais mostram a foto do usuário
que solicita a ajuda, seu nome, a categoria de ajuda, uma breve descrição
e um botão de “Posso ajudar” para que os usuários que navegam pelo
site e dispostos a oferecer ajuda possam clicar e começar uma nova
conversa pelo chat. O chat (Figura 05) foi desenvolvido para que os
usuários possam se comunicar e definir como o auxílio será realizado.
Outra função que o usuário, que está disposto a ajudar, pode
realizar, é a de compartilhar o pedido de ajuda do usuário pedinte no seu
perfil do Facebook, para que demais pessoas possam entrar em contato
e auxiliar a pessoa que solicitou a ajuda.
Figura 05- Feed de pedidos de ajuda e Chat.
Fonte: Autora
Foram projetadas três categorias de ajuda: Ajuda presencial, Ajuda

com doações e Ajuda financeira, para facilitar na percepção de qual o
tipo de auxílio foi solicitado e por meio de uma ferramenta que o usuário
pode escolher o tipo de ajuda, que ele está disposto a doar, tornar mais
rápida essa tarefa. Ainda isso permite que aqueles usuários que não
dispõem de recursos financeiros também possam contribuir.
326
Na barra de menu, também se encontra o recurso “Quem estou
ajudando” (Figura 06), que possibilita a visão da ação do usuário que
oferece a ajuda com o usuário que recebe a ajuda. Com a capacidade
de fazer a avaliação de ambos os usuários (Figura 06), e a opção de
“contagiar”. Na busca de como proporcionar que os usuários colaborem
entre si com segurança, foram analisados métodos que outras redes
sociais, como o Uber e Airbnb. Métodos como: sistema de avaliação, o
qual permite que após a interação entre dois usuários, eles se avaliem
com uma breve descrição e estrelas que vão de 1 (Ruim), 2 (Razoável), 3
(Bom), 4 (Muito bom) e 5 (Excelente) e essa avaliação aparece no perfil
do usuário avaliado; outro método de segurança é ter acesso a qualquer
perfil de dentro do site e, se o usuário estiver logado com o seu perfil do
Facebook qualquer um poderá acessá-lo para verificar que se não é um
perfil falso.
Figura 06 - Quem estou ajudando e Perfil avaliado
Fonte: Autora
Ao considerar que o site servirá para sensibilizar e provocar outras

pessoas a interagirem, adotou-se o mecanismo “Contagiar” (Figura 07),
que permite que os usuários do site descrevam as suas experiências e as
compartilhem no Facebook e ao usar a hashtag “#DáumHelpAí” facilita
327
que novos usuários conheçam e acessem o website, para também
conquistar experiências de ajudar o próximo ou ser ajudado.
Também possui outras ferramentas, como as Configurações,
Sobre, e opção para Pedir ajuda. (Figura 07) Ao selecionar que se precisa
de ajuda, uma nova aba se abre, nela existe a ferramenta para selecionar
o tipo de ajuda que está sendo procurado e um espaço para escrever o
pedido de ajuda (Figura 07). Assim que enviado, o pedido se junta aos
demais pedidos no feed inicial.
Figura 08 - Contagiar, Menu e Pedir Ajuda.
Fonte: Autora
Ainda na fase de instauração foi elaborado um manual de estilos,

que ajuda na melhor compreensão de como o projeto gráfico do website
foi preparado. Como referências de paleta cores, cores que predominam
em redes sociais e o estudo no livro A Psicologia das Cores: Como as cores
afetam a emoção e a razão, de Eva Heller (2012), foram aplicados tons
de vermelho, que busca incentivar ações e confiança, amor, compaixão
e fornece um sentido de proteção; a cor cinza e branca, que buscam a
neutralidade para backgrounds. Às cores vermelho e branco, também
são utilizadas para ícones. (Figura 11). Os ícones utilizados foram pensados
de modo minimalista e intuitivos (Figura 12) e o estilo tipográfico, a webfont
Montserrat foi encontrada no banco de fontes gratuitas do Google Fonts,
ela oferece boa leiturabilidade e legibilidade para os textos. O projeto
foi inicialmente elaborado o tamanhos de 360px para mobile. Até agora,
os resultados obtidos tanto nas escolhas projetuais quanto no uso da
328
metodologia são satisfatórios, baseados no histórico e resultados dos
testes aplicados mais recentemente.
Figura 11 - Paleta de cores do website.
Fonte: Autora
Figura 12 - Biblioteca de ícones.
Fonte: site FlatIcon.
Diante de fenômenos naturais desastrosos sempre há pessoas que

perdem algo, e diversas vezes a comunidade em geral não está ciente
desses eventos. Com os desastres naturais cada vez mais presentes devido
ao mau descarte de lixo, alterações climáticas e mal posicionamentos de
moradias precárias, é fundamental que os designers também comecem
a trabalhar a empatia em prol do auxílio comunitário.
As metodologias utilizadas na elaboração da interface do website
instruíram melhorias e otimizaram os serviços que foram idealizados
para essa plataforma. O método usado de ter ao menos um usuário para
acompanhar todo o processo de desenvolvimento da interface traz no
resultado final a segurança de que o site irá satisfazer as necessidades
dos usuários.
Afirmado por Lowdermilk (2013), um projeto de interface nunca
está pronto. Diante dos meios digitais em que esses projetos são
desenvolvidos, existe a possibilidade de observar erros, e buscar
correções por meio de atualizações. Em geral, para qualquer projeto
digital existe a importância de se manter atualizado as novas tendências
estéticas e de linguagem.
329
O projeto visa trabalhar exatamente com a possibilidade de
empatia, ou seja, de se colocar no lugar do outro, e assim ajudar e, se
necessário, ser ajudado. A plataforma coopera de maneira em que todos
os usuários sejam beneficiados, ao receber o apoio e ao oferecê-lo, onde
se trabalha a cidadania.
REFERÊNCIAS
GARRET,J. J.. The Elements of User Experience: User-Centered Design for the Web
and Beyond. Editora New Riders, 2011
LOWDERMILK, T. O Design Centrado no Usuário. São Paulo, Novatec Editora, 2013

2014
HELLER, E. . A Psicologia das Cores: Como as cores afetam a emoção e a razão. 1.

ed. Barcelona, 2012
NIELSEN, J. .Ten Usability Heuristics by Jakob Nielsen. 1995 . Disponível em: http://
www.useit.com/papers/heuristic/heuristic_list.html - Acesso em 14 Jul 2017
PORTER, J. Designing for the Social Web. Berkeley:New Riders, 2008
WROBLEWSKI, L. . Mobile First. New York: A Book Apart, 2011
IBGE, Instituto Brasileiro de Geografia e Estatistica. Censo 2010. Disponível

em:<http://censo2010.ibge.gov.br/>. Acesso em: 12 de Julho de 2017.
GOOGLE, Play Store. Chance. Disponível em:<https://play.google.com/store/

apps/details?id=br.com.iterative.rede.chance>. Acesso em: 12 de Julho de 2017
HEMOTIFY. Disponível em: < https://www.hemotify.com/index.php > . Acesso em:

12 de Julho de 2017.
FLATICON. Disponível em: < https://www.flaticon.com// >. Acesso em: 12 de

dezembro de 2018.
AGENCIA DE NOTÍCIAS IBGE, Desastres naturais: 59,4% dos municípios não têm
plano de gestão de riscos. Disponível em : <https://agenciadenoticias.ibge.gov.br/
agencia-noticias/2012-agencia-de-noticias/noticias/21633-desastres-naturais-
59-4-dos-municipios-nao-tem-plano-de-gestao-de-riscos>. Acesso em: 12 de
dezembro de 2018.
330
331
Sobre o(a)s autore(a)s
Andressa Dotto Colusso Felipe Lázaro de Lima

Carvalho
Gabriela Nehring Gustavo Lago Quatrin
332
Henrique Pivetta Viero Joao Vitor de Mello
Julia Lima Juliana Krupahtz
Laura Muller Lucas Pozzobon
333
Micheli da S. Grigolo Natã da Silva
Taynane Senna
Fabricio Arend Lidiane Castagna

Maica Pereira Gonçalves
Aluno de Graduação Aluna de Graduação

Desenho Industrial da UFSM Desenho Industrial da UFSM
334
Milena Dutra Nathalie Coelho
Kosciuk Crispim
Bacharela em Aluna de Graduação

Desenho Industrial da UFSM Desenho Industrial da UFSM
Valentina
Montenegro
da Silva
Aluna de Graduação
Desenho Industrial da UFSM
335
Confira outros projetos desenvolvidos no
Laboratório com essa metodologia
336
Insert (2ºsemestre|2019)
Daniela Amaral Gomes e Cristhian Machado
337
Kangoroo (2ºsemestre|2019)
Antonela Chiesa , Fabio Trennepohl, Luisa Lobato Panegalli,
Marina Tiemi e William Bernardo Libardi Andreatta
338
Aipo (2ºsemestre|2019)
Marina Tiemi
339
Manjerona (2ºsemestre|2019)
Valentina Ortiz Ribeiro
340
Pepino (2ºsemestre|2019)
Luisa Lobato Panegalli
341
Alum (2ºsemestre|2019)
Antonela Chiesa
342
Financial Up (2ºsemestre|2019)
William Bernardo Libardi Andreatta
343
Atlas (2ºsemestre|2019)
Daniela Amaral Gomes
344
Surrounded (1ºsemestre|2019)
Biara Simões
345
JORO (2ºsemestre|2018)
Eduardo Sendtko
346
BUS - i (1ºsemestre|2017)
Ayrton Viana
347
Collecta (1ºsemestre|2017)
Christian Cambruzzi
348
LocalizaPet (2ºsemestre|2016)
Driéli Fontanive
349
Plataforma Arte Digital (2ºsemestre|2016)
Bruno Saldanha
350
Site Projeto Zelo (2ºsemestre|2016)
Nicolas de Almeida da Silva e Gabriel Brum
Vídeo da Interface app com as interações
Vídeo da Interface site com as interações
351

Metodologia 5is - Projetos e Processos

Enviado por

Direitos autorais:

Formatos disponíveis

Metodologia 5is - Projetos e Processos

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Metodologia 5is - Projetos e Processos

Enviado por

Direitos autorais:

Formatos disponíveis

Metodologia

Este trabalho está licenciado sob uma Licença Creative

Aos alunos, com quem aprendo a cada dia, inspirem-se e

Redesenho da interface digital da Revista Arco:

AlterECO: Projetação de uma plataforma digital 38

A metodologia 5I`s na projetação do aplicativo Baloo 54

O Design de interação na prototipação de Planit 101

Prototipação de uma interface gamificada de inglês 122

O Design de Informação na Projetação de um Website 144

Projeto Aplicativo para leitura de 185

Protótipo interativo do aplicativo de 199

Utilização da metodologia 5i’s para projetação 212

UX Design no desenvolvimento de um aplicativo 232

A projetação do aplicativo SmartHomie 242

Protótipo Interativo para o aplicativo de 251

BIKED APP: projeto de interface para 263

Interfaces Interativas e a capacidade excedente na 285

Shelter: um refúgio em design de interface para o 302

A elaboração de um website em prol das 316

Sobre o(a)s autore(a)s - vídeos 332

Confira outros projetos desenvolvidos no 336

Débora Aita Gasparetto

Em 2015 iniciei minha trajetória no Curso de Desenho Industrial

1 Dados disponíveis em https://www.folhape.com.br/economia/isolamento-social-

3 Extraído do PPC do Curso. disponível em: https://www.ufsm.br/cursos/gradu-

AGAMBEN, G. O que é o contemporâneo? e outros ensaios. Tradução. Vinícius

BONSIEPE, G. Metodologia experimental: desenho industrial. Brasília: Cnpq/

BONSIEPE, Gui Design, cultura e sociedade. São Paulo: Blucher, 2011.

GARRETT, Jesse James. The Elements of User Experience: User-Centered Design

LOBACH, Bernd. Design Industrial. São Paulo, Editora Edgar. 2001

LOWDERMILK, T. Design Centrado no Usuário: um guia para o desenvolvimento de

SAFFER, D. Designing for Interac[on, Second Edi[on: Crea[ng Innova[ve Applica[ons

TEIXEIRA, F. Introdução e boas prá[cas em UX Design. São Paulo: Casa do Código,

WURMAN, R. S. Informa[on Anxiety2. Indianapolis: Que,2001

RESUMO: Este artigo tem o objetivo de expor e analisar o método de

O encontro dos dois laboratórios, LEx e de Interface, permitiu

Trabalhar com design centrado no usuário em Interfaces digitais

Figura 2: Esquema visual da metodologia proposta por [Garret, 2011]

Figura 2: Esquema visual da metodologia proposta por [Garret, 2011]

3. APLICAÇÃO DA METODOLOGIA 5IS NO REDESENHO DO WEBSITE DA

Durante o processo de construção do briefing com o cliente foi

3.1 Ideação e incubação: buscando o perfil do usuário e o contexto de uso

Conforme a metodologia utilizada, foi realizada uma pesquisa

3.2 Implementação - primeira geração de alternativas

Nesta etapa, onde foi iniciada a concepção gráfica, com o recurso

Fonte: Desenvolvido pela autora

Figura 5: Geração de Alternativas leiaute Mobile.

Fonte: Desenvolvido pela autora

Para o desenvolvimento do protótipo, tanto na versão mobile quanto

Figura 6: Geração de Alternativas versão Desktop.

Fonte: Desenvolvido pela autora

3.3 Inspeção: as rodadas de testes com usuários

No contexto do Laboratório de Interface e também do LEx,

3.4 Implementação: escolhendo cores, ícones, fontes e grids

Na etapa de Implementação, partiu-se para as mudanças

Fonte: Desenvolvido pela autora

No início do projeto, as clientes apresentaram o Guia de Estilo da

Figura 8: Grid utilizado para composição do site.

Fonte: Desenvolvido pela autora