16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de

Interfaces Humano Tecnolgica: Produto, Informaes Ambientes

Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

DESIGN CENTRADO NO USURIO: REDESENHO DA INTERFACE

DIGITAL DA REVISTA ARCO

USER CENTERED DESIGN: REDESIGN OF DIGITAL INTERFACE OF

ARCO MAGAZINE

Juliana Krupahtz1
Dbora Aita Gasparetto2, Dra.

(1)Universidade Federal de Santa Maria (UFSM)

e-mail: juliana.krupahtz@gmail.com

(2) Universidade Federal de Santa Maria (UFSM)

e-mail:deboraaitagasparetto@gmail.com

Palavras-chave: experincia de usurio, design de interface, redesenho

Este artigo tem o objetivo de expor e analisar o mtodo de desenvolvimento de interfaces centrado no usurio, a
partir do redesenho do site da Revista Arco da Universidade Federal de Santa Maria (UFSM). A metodologia de
projeto tem sido utilizada no Laboratrio de Interfaces do Desenho Industrial da mesma instituio e mescla etapas
propostas pelos autores [GARRET, 2011] e [LOWDERMILK, 2013]. Como resultado, pretende-se compartilhar um
mtodo eficiente para projetar adequadas experincias de usurio nas interfaces digitais. A proposta inclui pensar em
pontos de interao entre a interface do website oficial da revista e projetos interativos que encaminhem o usurio
experincia completa que a revista oferece.

Key-word: user experience, interface design, redesign

This articles objective is to expose and analyze the method of user centered interface development from the redesign
of Arco magazines website that belongs to Federal University of Santa Maria (UFSM). The project methodology
has been used at the Interfaces Laboratory of Industrial Design, from the same institution, and merges the steps
proposed by the authors [GARRET, 2011] and [LOWDERMILK, 2013]. As a result, it is intended to share an
efficient method to project appropriate user experiences on digital interfaces. The proposal includes thinking in
interaction points between the interface of the journal official website and interactive projects that guide the user to
a complete experience already offered by the journal.

digitais. No entanto, a pergunta que surge se todo

1 Introduo o design no deve ser centrado no usurio.
Pensando no projetista como um resolutor de
O design centrado no usurio tem ganhado espao problemas reais, um facilitador de experincias
nas principais discusses sobre as interfaces entre o usurio e o mundo, seja ele digital ou
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

analgico, a resposta sim, todo o design deve ser
centrado no usurio. Todavia, centrar o projeto no
usurio significa inclu-lo no processo de
desenvolvimento de interfaces, abrir espao para
que no apenas o cliente e o projetista decidam os
caminhos que iro oferecer.
Conforme Lowdermilk (2013) o design centrado
no usurio uma metodologia que deriva da
Interao Humano-Computador (IHC) e tem foco
na experincia de usurio, por isso analisa o que o
usurio precisa, o contexto de uso de determinado
dispositivo e o prprio comportamento humano.
da UFSM produzida por tcnico-administrativos,
alunos do curso de Comunicao Social
Jornalismo e uma docente, no LEx. O material
elaborado divulgado pelo site da revista, no
endereo http://ufsm.br/arco. Essa revista, que
circula on e off-line, o projeto que pauta o
presente artigo, pois seu site no atendia mais os
requisitos e funcionalidades exigidos pela equipe
de produo. Assim, o foco a Arco Digital
(Figura 01), mesmo que pontos de contato com a
Arco Impressa tenham sido estrategicamente
propostos.

Como o webdesign est focado na experincia do

usurio, diversos autores iro abordar a User
Experience. No Brasil, Fabricio Teixeira (2014),
rene alguns princpios sobre User Experience
(UX). Conforme ele os UX designers so
responsveis por definir como as pessoas iro
interagir com o produto, este profissional que
desenha a estrutura dos produtos digitais. A UX
muito mais ampla que o webdesign, mas tambm
aplicada a ele. Conforme ele a UX envolve as reas
de arquitetura de informao, usabilidade, design
de interao, taxonomia, estratgia de design e
pesquisa com usurios.

Esse artigo aborda as dificuldades e as

oportunidades que se abrem quando o usurio
includo no projeto, quando se utiliza pesquisa e
cruzamento de dados reais para aprimorar o
desenvolvimento de cada etapa da projetao. Para
iniciar essas anlises, fundamental contextualizar
o projeto de Redesenho do website da Revista
Arco, desenvolvida em conjunto com o
Laboratrio de Experimentao em Jornalismo
(LEx) e o Laboratrio de Interfaces do Desenho
Industrial da UFSM, no qual o projeto foi
desenvolvido.

O LEx um laboratrio do Curso de Comunicao

Social Jornalismo (UFSM) e concentra suas
atividades na produo jornalstica na era das
mdias digitais, alm de tambm participar da
produo da Revista Arco veculo da
Coordenadoria de Comunicao Social da
Universidade de jornalismo cientfico e cultural Figura 01 Captura de Tela Website da Revista Arco
impresso e digital. A Arco a revista institucional Digital, antes do Redesenho

O Curso de Desenho Industrial da UFSM tem uma
nova estratgia curricular, com foco na relao
mestre-aprendiz, por meio de trocas entre alunos
dos Laboratrios Profissionalizante e Orientado,
sob coordenao dos professores responsveis.
Nesse contexto, no segundo semestre de 2016, o
Laboratrio de Interfaces teve como proposta
projetar interfaces digitais partindo de problemas
reais e de clientes reais, mas pensando para alm
da usabilidade, acessibilidade e aspectos
tecnolgicos dos websites, nas novas
possibilidades de experincia de usurio abertas
pela realidade aumentada e virtual. importante
mencionar que todos os alunos participantes do
laboratrio esto envolvidos semanalmente em
discusses sobre os projetos, participando de
dinmicas de testes. Isso, de fato, foi extremamente
importante para o Projeto da Revista Arco, pelo
fato de que os alunos tambm fazem parte do
pblico-alvo da Revista.
O encontro dos dois laboratrios, LEx e de
Interface, permitiu que necessidades reais
proporcionassem aprendizado e unificassem o
trabalho da bolsista Juliana Krupahtz, tornando-o
interdisciplinar. A interdisciplinaridade sempre
recorrente em projetos digitais, pois os mesmos
envolvem conhecimentos desenhsticos, artsticos,
ergonmicos e de programao, ao menos, de
FrontEnd. Profissionais, cada vez mais, hbridos
ganham destaque no mercado de webdesign.
Porm, nessa oportunidade, a rea de Comunicao
Social ofereceu um suporte para que estratgias de
ponto de contato com o website da revista fossem
melhor desenvolvidas, em um projeto que,
normalmente, no pensa para alm da pgina que
projeta. importante destacar que essa proposta
interdisciplinar tambm contou com a participao
do bolsista Guilherme Bastos, do curso de Cincia
da Computao.
A responsvel pelo LEx, Prof. Dra. Laura Storch,
e a editora-chefe da revista Arco, a jornalista
Luciane Treulieb, clientes deste projeto, foram
peas-chave, estando sempre presentes durante o
processo criativo para o redesenho da nova
interface do site da revista, que foi desenvolvida no
Laboratrio Profissionalizante de Interface, com a
orientao da Prof. Dra. Dbora Aita Gasparetto.
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
Como em todo projeto de design, o briefing foi o
ponto de partida. Ainda em uma primeira reunio
com as clientes, foi pautada uma diviso para a
exibio das matrias da Arco Digital e Arco
Impressa, tendo as publicaes organizadas por
ordem cronolgica na pgina principal. Em acesso
s informaes proporcionadas pelo Google
Analytics, em relao edio da revista percebeu-
se o nmero muito baixo de acesso seo do site
destinada revista impressa, localizada na metade
inferior da pgina principal, por isso foi requisitado
tambm um destaque melhor estruturado a essa
diviso do site. Ainda na homepage, tambm
deveria ser organizado o leiaute com espao para
matria destaque, porm que no ocupasse o
espao de uma lateral da tela a outra, pois acabava
prejudicando as fotografias utilizadas, que so
produzidas pela prpria equipe do LEx. Um
processo criativo com participao tanto do usurio
que ir produzir o contedo para a interface
usurio publicador quanto do usurio que ir
consumir a informao ali publicada usurio
leitor , faz com que o projeto se torne muito mais
eficiente nos seus resultados. Tanto na aplicao de
pesquisa com usurio, no estudo das personas
como no contato direto com o pblico-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 espao-tempo anterior, necessitando uma
adaptao de linguagem para que mais pessoas do
seu pblico-alvo tivessem acesso a ela. Diversas
alteraes foram feitas conforme as consideraes
de todas as partes envolvidas no processo de
projetao com foco no usurio. A seguir descreve-
se a metodologia utilizada, elaborada pela Prof.
Dra. Dbora Aita Gasparetto, com base nas fases
sugeridas pelos autores Jesse James Garret (2011)
e Travis Lowdermilk (2013). A metodologia dos
5Is, publicada em primeira mo no presente artigo,
baseada na ao, envolve as seguintes fases:
ideao, incubao, implementao, inspeo e
instaurao.
2 Consideraes sobre a Metodologia
Trabalhar com design centrado no usurio em
Interfaces digitais significa basear o projeto na
experincia que se quer oferecer ao usurio. Para
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

isso imprescindvel recorrer a referncias chaves
como Garret (2011). O autor prope um mtodo
simples de projetar que pode ser aplicado desde
websites at projetos interativos mais complexos,
para web e alm, mtodo esse baseado na
experincia de usurio e subdividido em 5 grandes
etapas (Figura 02), que vo de um nvel mais
abstrato e mais prximo do designer at um mais
concreto, que est mais prximo do usurio. A
proposta divide o produto em funcionalidade e
informao, ambas ocorrendo concomitantemente
em cada etapa.
Na etapa preliminar, representada pela Estratgia,
busca-se um dilogo projetual entre o que o
usurio precisa e o que o produto objetiva. A
prxima etapa, Escopo, traz as especificaes
funcionais e os requisitos de contedo da interface.
Aps resolv-los, planejada a Estrutura do
projeto, com a arquitetura de Informao e o
design de Interao. Na sequncia vem o
Esqueleto, com o Design de Interface, o Design de
Navegao e tambm de Informao. A ltima
etapa, na Superfcie e j mais perto do usurio, h
o Design Sensorial. Esse na primeira publicao de
Garret (2003) era considerado como Design Visual,
no entanto, as interfaces sonoras, tteis, as Natural
User Interface (NUIs), que estimulam e so
acionadas por meio de outros sentidos, e com a
emergncia da internet das coisas, o termo
sensorial ficou mais adequado.
Embora a metodologia sugerida por Garret seja
bastante pertinente, cada projetista, adapta-se
melhor ou pior a uma metodologia. Com a
emergncia de ferramentas de prototipagem
interativas como UxPin, Proto Io, JustInMind,
entre vrias outras em um campo crescente de
ferramentas, essa diviso mais delimitada pode ser
ainda mais simplificada, agrupando etapas de
estrutura e esqueleto, por exemplo. Ainda inserir
testes com usurio a cada etapa e inseri-lo na
projetao da interface, ouvindo suas crticas e
consideraes, pode eliminar erros e ajustar a
interface a um padro de pensamento que
diferente do padro do designer ou do cliente.
importante mencionar que pesquisa recente do
Nielsen Group [NIELSEN, 2016] demonstrou que
apenas 5% da populao de 33 pases ricos se
considera avanada em informtica. Isso
demonstra como a prpria pesquisa sugere, que o
designer ou programador no o usurio. Assim
coisas que parecem bvias para os avanados, no
so to bvias assim para 95% da populao.
por isso que o Design Centrado no Usurio de
Lowdermilk (2013) pode contribuir para a
elaborao de uma metodologia que no inclui
apenas pesquisas e desenvolvimento de personas,
mas tambm um usurio acompanhando as etapas.
Embora a publicao desse referido autor seja
bastante facilitada ao pblico leigo, traz preciosas
dicas para quem est iniciando o desenvolvimento
de interfaces, sobretudo de aplicativos. O
processo de design centrado no usurio funciona
contra pressupostos subjetivos acerca do
comportamento dos usurios. Ele exige provas de
que suas decises de design so eficazes
[LOWDERMILK, 2013, p. 27]. Assim aceitar
feedbacks, compreender fluxos e tarefas de um
padro mental do usurio fazem parte desse
mtodo.

Visando unir as questes mais focadas no usurio e

Figura 02 Esquema visual da metodologia proposta
por [Garret, 2011]
nas personas de Lowdermilk, com as etapas muito
bem documentadas de Garret, o mtodo 5Is prope
ser um facilitador ao projetista iniciante, de fcil
assimilao pelas 5 etapas que iniciam com a
letra i, focadas no sujeito eu I, mas que no
plural s significar ns. Essa ao conjunta entre
projetistas, clientes e usurios torna a projetao

compartilhada e mais eficiente, no sentido de
minimizar erros. As etapas dividem-se do seguinte
modo: 1) IdeAo fase que inclui o briefing, que
realizado e explorado; o brainstorming, a
tempestade cerebral das boas e ms ideias; uma
busca inicial por referncias na rea para no casar
com uma ideia que j existe ou para aprimorar uma
ideia mal elaborada; a elaborao de mapas
mentais com as ideias-chaves do projeto; as
primeiras pesquisas com usurio para verificar
questes que o briefing possa ter deixado em
aberto; elaborao de personas, a partir dos
resultados dessas pesquisas, mas tambm da
anlise do pblico-alvo em contextos de uso e
ainda pontos de contato, que levam a criar
situaes de encontro entre o usurio e o projeto de
interface digital. Nessa fase primordial que o
projetista se aproxime de campos como psicologia
cognitiva e, sobretudo, neurocincia, porque tudo
sobre experincia.
A etapa 2 a da IncubAo, aqui busca-se
compreender as personas criadas para extrair os
requisitos e funcionalidades, os primeiros voltados
s necessidades do usurio e os segundos ao
detalhamento tcnico da interface. Ainda nessa
fase realiza-se uma pesquisa mais profunda com
anlise de referncias, que podem ser tanto de
interfaces concorrentes, quanto de interfaces que
dispem de requisitos e parmetros que o projeto
tem como base. Aqui levantam-se os prs e
contras. Nessa fase escolhe-se tambm as
tecnologias a serem utilizadas para a
implementao do projeto.
Na etapa 3, a da ImplementAo, realizam-se
rabiscoframes [Teixeira, 2014], o sitemap, o
cardsorting, os prottipos em papel e interativos,
organizando a arquitetura de informao e design
de interao. Aqui fundamental a participao do
usurio no processo de rotulagem e arquitetura de
informao, 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, proporo, uso
de grids, forma/funo, trabalho de cones, fontes,
imagens, vdeos e sons j so previamente
escolhidos nessa etapa e refinados ou atualizados
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
mais tarde.
A 4 etapa traz a Inspeo, aqui o refinamento
realizado aps serem implementados testes de
usabilidade e acessibilidade com usurios, aqui se
faz anlise detalhada da interface e se verificam as
heursticas de avaliao. importante inspecionar
se alm de agradvel visualmente e
sensorialmente, o projeto est consistente, se gera
feedbacks adequados, se previne erros, se segue
padres, entre outros itens que normalmente so
avaliados, no contexto do Laboratrio 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 InstaurAo, momento em
que se executa e entrega do produto final e so
realizadas novas inspees e substituies, caso
sejam necessrias. Como afirma Lowdermilk
(2013), um projeto de interface digital nunca est
pronto. Isso acontece porque diferentemente de
edies impressas, a atualizao dos meios digitais
dinmica, pode-se observar erros e prontamente
corrigi-los sem custos onerosos. Ainda
importante mencionar que a linguagem digital se
atualiza constantemente, forando as interfaces a
ajustarem-se s novas tendncias, com risco de
ficarem obsoletas ou datadas.
Outro ponto importante de se destacar em relao
metodologia dos 5Is a abertura para trabalhar em
sintonia com outras metodologias, como o
Documentos de Game Design (GDD), Roteiros
para vdeos hipermdia ou ainda social media. Isso
porque a base dela semelhante a qualquer outro
mtodo de design, uma das poucas diferenas a
discusso de cada etapa no apenas com o cliente,
mas tambm com o usurio, focando na sua
experincia e buscando resolver os seus problemas.
Ainda a proposta flexvel permitindo ao
projetista a supresso de algumas etapas, como
wireframes estticos em Illustrator, por exemplo,
ou das personas, quando se trabalha com um
usurio real em todo o projeto.
Porm, no contexto contemporneo em que a
pressa acaba suprimindo etapas e a voracidade do
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

mercado inibe pesquisas mais aprofundadas, essa
metodologia centrada no usurio pode parecer
impraticvel, 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
pblico, diretamente, previne erros e refaes.
Quando se fala em inserir o usurio no processo,
pode-se simplificar o caminho at ele, escolhendo
pessoas prximas da persona criada, como filhos,
pais, mes, amigos. Pessoas diferentes que tenham
pontos em comum com o pblico-alvo da interface
so melhores do que no testar com ningum.
3 Aplicao da metodologia 5Is no
redesenho do website da Revista Arco
Durante o processo de construo do briefing com
o cliente foi estruturado quais eram os problemas
identificados na interface digital anterior ao
redesenho, tanto estticos quanto de
funcionamento, como recursos limitados em
termos de programao. Dentre esta lista de
requisitos estavam: (i) destaque para a edio da
revista impressa, com a capa da revista aparecendo
na pgina inicial; (ii) melhor divulgao das redes
sociais institucionais da Revista Arco; (iii) maior
destaque s fotografias, como j mencionado; (iv)
comentrios vinculados s redes sociais; (v)
publicaes relacionadas no final do texto da
matria da revista; (vi) servio de publicao com
mais recursos e melhor controle do banco de
dados; (vii) paleta cromtica mais dinmica e
atendendo melhor ao pblico-alvo da Revista que
ser melhor estudado na prxima etapa; (viii)
pontos de contato com o usurio mais direto e em
dilogo com o perfil desse pblico.
3.1 Ideao e Incubao: buscando o perfil do
usurio e o contexto de uso
Conforme a metodologia utilizada, foi realizada
uma pesquisa online, via Google Forms, para
sintetizar o perfil do usurio da interface e poder
definir quais os requisitos e funcionalidades
exigidos para cada persona. Foram feitas 25
perguntas rpidas, direcionadas conforme as
respostas dos respondentes, com uma abordagem
de 52 pessoas, em 13 dias. O formulrio foi
divulgado pelo sistema de comunicao 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 nmero
no muito alto de respostas, os resultados foram
significativos para determinar o pblico
interessado em colaborar para o desenvolvimento
da Revista e, consequentemente, mais interessado
em seu contedo.
A construo do questionrio foi dividida em (i)
perfil do usurio: faixa etria, nvel de
escolaridade, vnculo com a UFSM, ocupao e se
possua deficincia fsica ou intelectual; (ii)
consumo de informao: qual o instrumento
utilizado para acessar a internet e quais meios de
comunicao utilizados para isso (sites de revistas
e jornais, edies impressas, blogs, vdeos na
internet, televiso e redes sociais); (iii) vnculo
com a Revista Arco: se j conhecia a Revista, se j
havia conhecido a edio impressa, se j havia
acessado o website da Revista, preferncia entre
verso impressa e digital, como acessava o website
(mecanismo de busca, links direcionados ou pela
pgina institucional da Universidade) e qual setor
do site era o mais frequentado; por fim (iv) as
tecnologias utilizadas: uso de aplicativos, se
possua aplicativos especficos para notcias e se j
havia tido experincias com realidades aumentada
e virtual. Essas trs ltimas perguntas foram feitas
pensando em projetos futuros que possam ser
realizados junto Revista, como o
desenvolvimento de um aplicativo para
armazenamento das edies 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 graduao. Na seo sobre o consumo de
informao, 91,8% disse acessar por sites de
revistas e/ou jornais, enquanto a opo Links
direcionados a partir de redes sociais teve 86,5%
de taxa de resposta, ficando como segunda opo
mais selecionada. A partir da associao apenas
dessa nica pergunta, possvel entender a forma
de navegao na web do pblico-alvo,
considerando, ainda, os altos nmeros de acesso
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

em matrias divulgadas na pgina inicial do site
institucional da UFSM, mas que no revertiam em
acesso a outras pginas do site da revista, ou seja, o
usurio visita o site com o propsito de ler aquela
nica publicao, e fecha logo que conclui a leitura
da matria.
A partir da pesquisa direta com o usurio foi
traado o perfil de trs personas, chamadas de (i)
Diego, (ii) Samanta e (iii) Gabriela. Diego tem o
perfil de estudante de graduao da Universidade,
acadmico do curso de Psicologia, com 21 anos.
Ele cultiva o hbito da leitura e j tem contato com
a revista Arco na verso impressa, que se destaca
entre os alunos do campus por ter um bom projeto
editorial. A partir da anlise especfica dessa
persona, possvel definir como requisitos
particulares: (i) a necessidade de uma interface
objetiva, (ii) boa leiturabilidade e legibilidade, (iii)
acesso por mltiplas telas, para que o site
conquiste leitores que gostam de ler no papel, e
uma consequente (iv) coerncia esttica com a
verso impressa. Quanto s funcionalidades
associadas seriam (i) poucos caminhos para se
fazer uma tarefa, (ii) vnculo mais eficaz com as
redes sociais e um (iii) bom contraste entre texto e
imagem.
Samanta, a segunda persona criada, tambm
acadmica da Universidade, porm do curso de
Publicidade e Propaganda, est sempre atualizada
com as ltimas tecnologias lanadas no mercado.
Ela no conhece a revista Arco impressa e somente
teve contato com algumas matrias do site,
vinculadas com as suas redes sociais. Os requisitos
da Samanta so: (i) um bom planejamento esttico,
(ii) interface mais atemporal, (iii) leiaute
minimalista, (iv) chamadas de publicaes
atraentes com textos curtos como descrio. Das
funcionalidades, destacam-se as de (i) notcias em
destaque na pgina principal, (ii) matrias
relacionadas no final da pgina, logo abaixo do
texto principal, (iii) menus interativos e (iv)
responsividade.
A terceira e ltima persona, Gabriela, tem 34 anos
e professora da Universidade, do curso de
Medicina Veterinria. Ela est comeando a se
atualizar em relao 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 notcias 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 matrias futuras. Ela ir requerer (i) matrias
de cunho acadmico, (ii) expediente da equipe da
revista, para entrar em contato e um (iii) leiaute
objetivo. Nas funcionalidades, destaca-se a
importncia de (i) uma barra de pesquisa bem
localizada, (ii) o uso de tags nas matrias, para
facilitar a pesquisa do usurio, (iii) pgina com
formulrio e informaes de contato e (iv) um
mapa do site.
Essas trs personas resumem a maior parte do
diverso pblico que acessa tanto a Arco Digital
quando a Impressa. Todavia, ele ainda composto
por uma parcela de servidores da universidade,
professores, e tambm da populao da cidade.
Durante o briefing, as clientes expuseram um
projeto de extenso mesmo no sendo o foco da
Revista, que de cunho cientfico e cultural com
as escolas pblicas de Santa Maria, e a vontade de
mostrar mais da Universidade Federal para esses
alunos que estavam tendo contato com as matrias
da Revista. Com essa informao, foi iniciada a
estrutura de um projeto de realidade aumentada,
com planos de ser implementado futuramente, que
mapeasse o espao fsico do campus, marcando
pontos relacionados s matrias j publicadas pela
revista. Alm disso, um aplicativo para servir como
suporte a esta plataforma, com espao para
agendamento de visitas ao campus por turmas das
escolas j mencionadas. Devido necessidade
prioritria das clientes ser a implementao do site,
este projeto foi deixado para ser finalizado aps a
concluso dessa etapa.
Aps a definio das categorias de usurio que
estariam no centro do projeto, foi feita uma busca
por sites da mesma categoria e listados os
elementos possveis de serem usados como
referncia, para atender os requisitos e
funcionalidades listados acima. Entre eles esto os
sites da revista Piau, pertencente Folha de So
Paulo, da revista Super Interessante, da editora
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

Abril, e da Port Magazine, que se destacou pelo

leiaute minimalista, pouco uso de cores e
relevncia da tipografia (Figura 03).

Figura 03 Pgina inicial com destaque matria

principal da revista Port

3.2 Implementao primeira gerao de

alternativas

Nesta etapa, onde foi iniciada a concepo grfica, Figura 04. Rabiscoframes
com o recurso de rabiscoframes (Figura 04) e card
sorting, importante destacar que devido
importncia da responsividade e acesso por
mltiplas telas do website, foi associado o mtodo
Mobile First (Figura 05) para o planejamento das
telas [WROBLEWSKI, 2011]. Esse mtodo se
popularizou aps Wroblewski ter escrito, em 2009,
que normalmente se pensa no design para os
dispositivos mveis depois de se pensar no
webdesign para desktop. Ele vai propor inverter
essa relao, pois h uma exploso da tecnologia
mobile, o design para mobile exclui elementos
desnecessrios e os dispositivos mveis trazem
novas funcionalidades de uso. Wroblewski
argumenta que pensar primeiro na verso mobile
significa inovar por meio de possibilidades que no
existiam antes das mdias mveis. O referido autor
sugere que se inicie pela menor tela, pois se as
informaes couberem nela, logo se adaptaro bem
a todas as demais telas. Isso ajuda a simplificar os
projetos.

Figura 05. Gerao de Alternativas leiaute Mobile


Para o desenvolvimento do prottipo, tanto na
verso mobile quanto na verso desktop (Figura
06), foi utilizado o programa Adobe Muse na
verso CC 2015. Devido a sua interface voltada
aos profissionais da rea criativa, sendo bastante
visual e intuitivo, o processo acabou sendo
facilitado, por ter poucas etapas envolvendo
programao. Contudo, algumas dificuldades
foram encontradas, como na (i) configurao do
menu na verso mobile, (ii) interaes com as
redes sociais, (iii) configurao da barra de
pesquisa, (iv) o fato do cdigo HTML gerado pelo
software no poder ter aproveitamento adequado
na parte de implementao, por trazer bibliotecas
prprias que no so padronizadas e (v) no
oferece programao de BackEnd de modo
intuitivo como faz com FrontEnd, exigindo a
presena de um programador.
3.3 Inspeo: as rodadas de testes com usurios
No contexto do Laboratrio de Interface e tambm
do LEx, semanalmente foram realizados testes com
os usurios-publicadores (profissionais e alunos
vinculados Arco e ao Lex que so responsveis
pela produo que abastece o banco de dados do
site e participam diretamente do processo de
construo da Revista Digital) e tambm com os
usurios-leitores (alunos do Laboratrio de
Interface e professores, ambos parte do pblico da
Revista). Nestes testes, inicialmente era
apresentada a interface superficialmente, para que
dessem opinies sobre esttica e estrutura, e logo
aps tambm eram destinadas tarefas para que uma
pessoa cumprisse, como: acessar uma matria
especfica, ou entrar em contato com a Revista.
Ento se observava a interao do usurio com a
interface para que o caminho escolhido por ele
fosse no final o caminho com o menor nmero de
cliques e menor tempo.
Estes testes auxiliaram na simplificao da
interface e na implementao da UX, alm de
levantarem problemas com a paleta de cores
inicialmente pensada para o projeto, bem como a
hierarquizao das informaes de menu e a
padronizao dos cones. Juntamente com os testes
feitos pelos usurios da revista e a anlise das
clientes foi realizada a deciso editorial de remover
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
duas das seis editorias da revista, para que o menu
no ficasse to poludo e impreciso aos leitores.
Figura 06. Gerao de Alternativas verso Desktop
importante destacar que em um primeiro
momento, se trabalhou com uma paleta cromtica
com cores bastante saturadas, porm incluindo o
laranja, que j estava presente na verso do site
anterior. Conforme os testes feitos com os usurios
na parte de leitura de texto, percebeu-se que essas
cores acabavam prejudicando a leitura e
consequentemente fazendo com que o usurio
sasse do site mais rapidamente, sem capturar a
experincia que se intua oferecer a ele.
3.4 Implementao: escolhendo cores, cones,
fontes e grids
Na etapa de Implementao, partiu-se para as
mudanas propostas tanto por parte das clientes,
quanto pelos resultados dos testes feitos com os
usurios. A primeira mudana foi feita na paleta
cromtica (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
especficos. O grid foi organizado para um melhor
aproveitamento do maior nmero de telas, j que o
site anterior desperdiava muita rea branca sem
contedo, por isso foi escolhida a largura de tela de
1140px e diviso em 14 colunas, para um melhor
alinhamento de todo o contedo (Figura 08).

Figura 07 Tela da verso final do site com paleta
cromtica de referncia na parte inferior
No incio do projeto, as clientes apresentaram o
Guia de Estilo da Revista, j existente, para auxlio
na preservao da identidade visual. Por este
motivo, a famlia tipogrfica escolhida para os
ttulos foi a mesma j utilizada na edio impressa,
a Bebas Neue, de Ryoichi Tsunekawa, livre para
uso comercial tanto de webfont quanto verso
desktop. Para fonte de texto foi escolhida a Lato,
desenhada por ukasz Dziedzic, gratuita, livre para
uso comercial, com cinco pesos disponveis,
inclusos os itlicos, alm de ter tima legibilidade
e leiturabilidade. Para acompanhar o desenho da
tipografia de texto, foi definida uma biblioteca de
cones com traos arredondados e visual
minimalista (Figura 09).
Figura 08 Grid utilizado para composio do site
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
Figura 09 Biblioteca de cones utilizada
3.5 A instaurao da nova Arco Digital
Atualmente o projeto da Revista Arco na web est
na fase de instaurao e a prxima etapa
desenvolver os pontos de conexo do pblico com
a revista dentro da UFSM. O prottipo 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 programao de BackEnd permite a
replicabilidade de contedo, a facilidade de
abastecimento e gerenciamento para o cliente.
Assim o projeto de programao est sendo
implementado pela empresa jnior de Tecnologia
da Informao, CompAct Jr., que engloba os
cursos de Cincia da Computao, Engenharia de
Computao, Sistemas para Internet, Sistemas de
Informao e Tecnologia em Redes de
Computadores, do Centro de Tecnologia e do
Colgio Politcnico da UFSM.
Para um melhor entendimento de como foi feito o
projeto grfico, foi elaborado um material auxiliar
a ser utilizado como manual de estilo durante o
projeto de programao. Como contedo expe-se
as referncias de cores (Figura 07), grids (Figura
08), cones (Figura 09) e tambm os estilos
tipogrficos utilizados (Figura 11).
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

4 Consideraes Finais

O design centrado no usurio, inserindo-o no

Figura 10 Tela da pgina inicial da verso final do
prottipo
processo de projetao, demonstra maturidade no
espao do desenhista industrial. Obter feedbacks e
crticas e saber lidar com elas faz parte do
cotidiano desse profissional, mas, sobretudo,
enriquece a interface e a experincia de usurio. O
mantra de que o bom design invisvel deve ser
replicado nas interfaces digitais, facilitando que o
usurio possa experienciar o projeto sem perceb-
lo negativamente, objetivando suas aes e
oferecendo as reaes corretas para o padro
mental do usurio. Simplificar os projetos em uma
era de excessos informacionais pode proporcionar
experincias de usurios mais agradveis. No
contexto do Projeto de Redesenho da Revista Arco,
esses objetivos foram atingidos por meio de boas
escolhas desenhsticas paleta cromtica, grids,
tipografia, por exemplo que foram se
aperfeioando durante o projeto, com anlises das
clientes e dos usurios. Por isso, no contexto desse
projeto se pode lanar a revista aps com muitas
interaes, oriundas da insero do usurio no
processo e do apontamento de possveis erros ou
dificuldades de acesso, impactando positivamente.
Essas escolhas tornaram o projeto bem-sucedido
principalmente nos requisitos de legibilidade,
leiturabilidade e adequao ao pblico da revista. A
pgina de matria (Figura 12) teve uma grande
aceitao por parte daqueles que a testaram,
garantindo uma boa experincia de leitura. Alm
disso, as etapas metodolgicas utilizadas,
claramente especificadas, ordenaram e fizeram
com que as vrias mudanas projetuais feitas
durante o processo fossem descomplicadas. Desse
modo, a metodologia de projeto 5Is mostrou-se
adequada e de fcil compreenso.

Figura 11 Pgina do manual referente aos estilos

tipogrficos utilizados

Em termos de design, pode-se testar toda a

consistncia do projeto entre designers, clientes e
usurio final, obtendo-se at agora resultado
satisfatrio, tanto no uso da metodologia, quanto
nas escolhas projetuais.
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

TEIXEIRA, F. Introduo e Boas Prticas em

UX Design. So Paulo: Casa do Cdigo, 2014.

WROBLEWSKI, Luke. Mobile First. New York:

A Book Apart, 2011

Figura 12 Visualizao de parte da pgina de

matria

BIBLIOGRAFIA

GARRETT, J. J. The Elements of User

Experience: User-Centered Design for the Web
and Beyond. Second Edition. Berkley: New Riders
Press, 2011

LOWDERMILK, T. Design Centrado no

Usurio: um guia para o desenvolvimento de
aplicativos amigveis. So Paulo: Novatec Editora,
2013

NIELSEN, J. The Distribution of Users

Computer Skills: Worse Than You Think.
Disponvel em:
<https://www.nngroup.com/articles/computer-skill-
levels>. Acesso em: 18 de mar. 2017.