Métricas de UX para Produtos Digitais

Prévia do material em texto

Design de Interação
Responsável pelo Conteúdo:
Prof. Me. Ivan Ordonha Cechinel
Revisão Textual:
Prof.ª Me. Sandra Regina Fonseca Moreira
Análise Estrutural
Análise Estrutural
 
 
• Observar as métricas que conduzirão o projeto de maneira sólida;
• Compreender a importância de se desenvolver um produto digital que seja relevante para 
o usuário;
• Entender que os princípios de UX Design e UI Design estão centrados nas pessoas que utiliza-
rão o que foi desenvolvido e que as respostas dos “porquês” do projeto estão nas vivências e 
experiencias do usuário. 
OBJETIVOS DE APRENDIZADO 
• O que são Métricas?
• Como Definir Métricas de Sucesso;
• Diretrizes a Serem Seguidas;
• Desempenho e Tarefa no Ambiente Digital;
• Análise Estrutural (Estudo de Caso).
UNIDADE Análise Estrutural
O que são Métricas?
São a forma de medir se o projeto está cumprindo seus objetivos e se realmente 
terá condições de auxiliar as pessoas, solucionando problemas reais.
Quem desenvolve trabalho dentro da área criativa, de modo geral, realiza projetos 
para as pessoas, para os outros, assim, todo o trabalho gráfico visual presente nas 
interfaces (elementos gráficos visuais que farão a ponte e estabelecerão o diálogo 
entre máquina e pessoas) deve promover a interação de maneira a gerar uma expe-
riência positiva para as pessoas que utilizam o produto, seja digital (um aplicativo, um 
site, um sistema) ou tangível (o painel de uma máquina, por exemplo). 
Figura 1 – É essencial definir métricas de maneira clara
Fonte: Getty Images
Orquestrando os diferentes recursos gráficos visuais, desde a definição de cores, 
fluxo de navegação, hierarquia de informações, localização de menus, indicação visual 
de que algo é clicável, trabalhamos com os aspectos que devem ser considerados 
para contribuir com uma experiencia positiva para as pessoas.
Segundo a especialista em UX Juliana do Vale temos diversos aspectos a analisar 
em um produto digital, em um site, aplicativo, sistema, ou qualquer criação que possua 
uma interface e, ao analisar esses aspectos, poderemos definir, de maneira mais 
coerente, o caminho a seguir, centrando a criação no usuário. 
Como Definir Métricas de Sucesso
As métricas, que no universo do Marketing são chamadas KPIs (Key Performance 
Indicators), de modo geral medem como e em que tempo o usuário consegue executar 
8
9
determinada tarefa dentro do aplicativo, por exemplo: o preenchimento de um cadastro 
ou a busca de determinado conteúdo. Surgem questões a serem respondidas: O cadas-
tro foi concluído com sucesso? A busca realmente retornou o que o usuário procurou? 
Figura 2 – Trabalho em equipe e planejamento
Fonte: Getty Images
Podemos fazer análises mais quantitativas, com um número maior de participantes, 
por meio de ferramentas como o Google Analytics.
De maneira qualitativa são feitos testes de usabilidade com uma quantidade me-
nor de pessoas, uma amostragem que representa o perfil (persona) dos usuários aos 
quais o projeto se destina. Assim podemos seguir em um caminho mais preciso em 
relação aos direcionamentos do projeto e responder às reais necessidades do usuário. 
É nesta etapa que o UX Design incorpora princípios de Arquitetura de Informação, 
a partir do momento em que são realizados testes de usabilidade em que o usuário 
literalmente usa o protótipo do aplicativo que está em desenvolvimento, realizando 
tarefas orientadas por um mediador, que geralmente é um profissional da equipe.
Diretrizes a Serem Seguidas
As métricas em UX podem ser definidas principalmente para mensurar as taxas 
de sucesso que o usuário alcança ao tentar realizar determinada tarefa através de 
uma interface, seja em um site, aplicativo ou em qualquer outro sistema. E assim é 
medido também o tempo para realizá-las, a lém de se mensurar a taxa de erro que 
ocorre quando uma tarefa é interrompida, quando não há êxito do usuário ao tentar 
executá-la por um determinado m otivo, que deve ser analisado a fim de se verificar 
se isso está relacionado a problemas de compreensão da interface ou, por exemplo, 
a incoerências no fluxo de navegação.
9
UNIDADE Análise Estrutural
Figura 3 – As ações do usuário indicarão os próximos passos do projeto
Fonte: Getty Images
Desempenho e Tarefa no Ambiente Digital
Dessa forma, os KPIs mais importantes relacionam-se à usabilidade, na qual se 
mede a facilidade de realização de uma tarefa orientada por um mediador (profissional 
da equipe) e que envolve questões de design que dizem respeito a aspectos como com-
preensão de símbolos e ícones, hierarquia de informação e navegabilidade.
Figura 4 – A compreensão da interface é essencial para o usuário(a) 
ter êxito na execução da tarefa dentro de um aplicativo
Fonte: Getty Images
É essencial, portanto, ir além e perceber se também há engajamento do usuário 
com o produto, se ele está satisfeito ao utilizá-lo e, dessa forma, o quanto de relevân-
cia terá o produto para este usuário, o quanto de atenção e esforço ele desprenderá 
durante utilização, além da média estimada de tempo.
10
11
Tudo gira em torno da experiência, vivência do usuário e das pessoas que utilizarão 
o produto. Por isso, o que mais define UX Design é o fato de estar centrado no usuário.
Objetivo do Produto
A experiencia do usuário está ligada à expectativa, assim, a primeira coisa a saber é: 
Para que servirá o produto? Se apresentar muitas funções e promessas, não terá total 
relevância no dia a dia das pessoas. O cumprimento da promessa faz o produto ter 
êxito, e, desse modo, não pode ser complicado para utilizar, senão gerará frustração. 
Por exemplo, o WhatsApp tem a função de possibilitar comunicação, Candy Crush
tem o objetivo de promover entretenimento simples, cumprindo ambos suas funções.
Figura 5 – Tela do game Candy Crush
Fonte: Pixabay
Análise Estrutural (Estudo de Caso)
Das ferramentas utilizadas pelo UX Designer, diferente do Designer Gráfico, que 
tem como resultado do seu trabalho o layout pronto, ou do Designer de Produtos, 
que visa a estrutura de determinado objeto, por exemplo, o profissional de UX Design
apresenta um estudo detalhado sobre a relação usuário produto/serviço.
Segundo a UX Designer Rafaela de Souza da Silva estes estudos podem ser apresentados 
visualmente através de diferentes recursos:
• Fluxograma: Organização das informações e interações;
• Wireframe estática: Guia visual que representa a estrutura da página e a hierarquia 
dos principais componentes;
• Prototipação interativa: Simulação da navegação e das funcionalidades, por meio 
de um layout acionável;
11
UNIDADE Análise Estrutural
• Gráficos: Podem representar visualmente dados numéricos levantados através de 
testes em produtos/serviços;
• Mapa de site: Diagrama das páginas de um site organizadas por hierarquia;
• Relatório de usabilidade/Analytics: Com a análise de métricas do Analytics, é possível 
identificar o que pode ser melhorado na navegação;
• Mapa da jornada do usuário ou storyboard: Este diagrama é um documento que 
mostra os passos que o consumidor dá, na interação com o serviço/produto;
• Relatório de análise competitiva: Banchmark – Relatório de análise dos produtos 
dos concorrentes;
• Mockup visual de alta fidelidade: Representação visual detalhada do produto final;
• Sistemas de resultado de rastreamento: Análise do movimento dos olhos do usuá-
rio ou mouse durante a interação com o produto. Mostra partes da interface que mais 
interessam ao usuário; 
• Mood board ou Mapa mental: Conjunto de imagens como referência para o estilo 
visual do produto.
Fonte: https://bit.ly/2RvZn2i
Estudo de Caso 
Veremos a seguir, como estudo de caso, um aplicativo em desenvolvimento. Terá 
como função ser um guia comercial e turístico do bairro da Liberdade, em São Paulo. 
Aplicativo para ser utilizado por visitantes e entusiastas do bairro, assim como as pes-
soas que trafegam, moram ou trabalham na região da Liberdade. Um produto digital 
que reúna pontos turísticos, templos, lojas e restaurantese ao mesmo tempo dialo-
gue com a identidade do bairro trazendo sua história. 
Foi utilizado como embasamento as ferramentas de Design Thinking com base 
nas 3 etapas a seguir (aqui é apresentada síntese do que foi levantado em cada etapa, 
em caráter didático):
Empatia (Pesquisa de Campo/Imersão/Discovery) 
Nesta etapa, que visa identificar os problemas existentes e as necessidades a 
serem solucionadas, foi identificada a escassez de canais de comunicação, espe-
cialmente digital, que reúnam, ao mesmo tempo, serviços e aspectos culturais que 
o bairro tem para oferecer. Que seja de fácil acesso e que possa ser utilizado de 
maneira objetiva e prática. Em paralelo, que esteja à altura da representatividade do 
bairro, expressando sua identidade e agilizando a busca por serviços e produtos, e, 
ao mesmo tempo, valorizando aspectos culturais e econômicos, constituindo impor-
tante ferramenta de interação.
Ideação/Proposta Solução (Após Definição do Problema) 
Decidiu-se nesse caso que um aplicativo poderá centralizar estas informações de 
maneira ágil. Poderão ser feitas parcerias com comerciantes, prestadores de serviço 
e empreendedores que atuam no bairro, e assim fazer com que o produto digital 
12
13
ganhe força. Que transmita com clareza e objetividade as informações necessárias, 
de maneira precisa e que valorize ainda mais a imagem do bairro perante o público .
Haverá um formulário de cadastro para que proprietários de estabelecimentos do 
bairro da Liberdade possam cadastrar seus restaurantes e lojas, a fim de que sejam 
incluídos nas áreas de “gastronomia”, “compras” e “cultura pop” do aplicativo e 
tenham visibilidade.
A princípio de maneira gratuita, e após um período de experiência de uso, com 
uma consolidação maior do aplicativo, poderá ser solicitado por parte do anunciante 
um investimento que manterá o aplicativo em funcionamento. Assim como outras 
formas de parceria com promoções e descontos em serviço e produtos para usuários 
do aplicativo, por exemplo.
Prototipagem 
Após terem sido identificadas as necessidades e levantada a solução para as ca-
rências destacadas na etapa “empatia”, foi desenvolvido um fluxograma – as setas 
direcionais mostram a sequência da navegabilidade possível que o usuário pode re-
alizar no aplicativo.
O fluxograma da Figura 6 foi desenvolvido com a ferramenta online Lucidchart. 
Disponível em: https://bit.ly/33xbFgE
O fluxograma constitui uma representação simples e objetiva das telas do apli-
cativo e sua sequência, constituído apenas de retângulos contendo nome previsto 
para cada tela. Esta representação simples é o suficiente nesta etapa, pois o intuito 
é indicar a navegabilidade.
Figura 6
Fonte: Acervo do conteudista
Fluxograma
 Abaixo, temos exemplos de wireframes (armação de arame, na tradução literal) 
porque constituem as “linhas” que representam a estrutura principal da interface. 
Apresentam uma representação mais detalhada prevendo posições de menus, botões, 
imagens, texto, ícones, mapas, formulários, entre outros elementos gráficos. Nos 
13
UNIDADE Análise Estrutural
wireframes não há a representação de cores e imagens, apenas linhas estruturais e 
alguns detalhes, como ícones por exemplo. 
Neste exemplo temos a tela inicial, que quando o usuário toca no botão principal 
do menu de contexto, abre-se a aba do menu com botões, que levarão às telas inter-
nas do aplicativo.
O Aplicativo terá uma tela inicial com um mapa com ícones, que direcionará para as 
telas com os principais pontos turísticos do bairro da Liberdade. O mapa localizará o 
usuário, de maneira ilustrativa, das principais vias da área central do bairro da Liberdade, 
onde se localizam os principais áreas de interesse do bairro (pontos turísticos, localiza-
ção de lojas de produtos típicos, gastronomia e também a feira tradicional do bairro). 
Na parte superior da tela do mapa e demais telas do aplicativo há a barra de menu. 
Na barra do menu, na parte superior esquerda, há ícone para acesso ao menu de 
contexto com as seguintes opções: Início (volta para tela título), Cadastro (página 
para inserção de dados de cadastro), Social (acesso para redes sociais relacionadas ao 
aplicativo) e História (acesso para a tela que traz como conteúdo a história do bairro).
Os wireframes constituem uma espécie de base para o design de interface, para o layout 
final que vai constituir as telas do aplicativo. Porém, o foco aqui é demonstrar a quantidade 
de telas e a sequência de navegação.
Abaixo, podemos observar também a tela título (tela inicial do aplicativo – imagem 
ao lado esquerdo abaixo) esta tela dá acesso ao mapa da região central do bairro da 
Liberdade, acima do mapa estarão distribuídos os ícones que darão acesso as telas 
de conteúdo do aplicativo. 
Figura 7 – Tela inicial do aplicativo (lado esquerdo) 
e o mapa da região central do bairro da Liberdade
Fonte: Acervo do conteudista
14
15
A primeira imagem na Figura 8 (da esquerda para direita) apresenta o wireframe
da tela do mapa, na sequência (segunda imagem abaixo) podemos observar o wirefra-
me da mesma tela, porém com o menu de contexto acionado com as opções: Início, 
Cadastre, Social, História. 
A seguir (terceira imagem), o menu de contexto ao lado direito está acionado 
com as opções Sobre (com informações sobre o desenvolvedores do aplicativo) e 
Editar, que dará acesso a opções de ajustes em relação ao tamanho da fonte em 
todo o aplicativo. Além dos demais ícones representados no menu superior (lupa - 
ícone de pesquisa e, ao lado direito, ícone da busca por comando de voz e o ícone 
para compartilhar).
Na tela do mapa também há, na parte inferior, um botão (“Faça parte é grátis”) 
em destaque, que dá acesso à tela de cadastro onde empreendedores da região po-
derão cadastrar seus estabelecimentos. Este serviço é oferecido pelo aplicativo.
Figura 8 – Wireframes representando a estrutura das telas do aplicativo
Fonte: Acervo do conteudista
Abaixo, wireframes das telas de conteúdo do aplicativo com representação de 
local para inserção de imagem (retângulo com linhas cruzadas formando um x) e já 
disposto o conteúdo em texto, além de botões em meio ao texto do conteúdo.
Figura 9 – Wireframes representando a estrutura das telas do aplicativo
Fonte: Acervo do conteudista
15
UNIDADE Análise Estrutural
Abaixo, seguem três telas: a de Cadastro, prevendo os campos de digitação para 
informações do cadastro com galeria para inserção de imagens. Na sequência a tela 
de confirmação do cadastro e a tela que trará a história do bairro. 
Figura 10
Fonte: Acervo do conteudista
Existem diversas ferramentas para realizarmos este trabalho, algumas gratuitas, com limi-
tações, e outras pagas:
• Figma: ferramenta online que pode ser utilizada para fazer wireframes e layout;
• Sketch: largamente utilizado por profissionais desta área;
• Axure: Algumas ferramentas dão conta de quase todas as etapas de desenvolvimento, 
outras são específicas para determinada etapa;
• Adobe XD: Software da Adobe voltado para produtos digitais;
• Lucidchart: Ferramenta online gratuita para criação de fluxogramas.
16
17
Você Sabia?
O software Sketch é um dos mais usados pelos profissionais de UX e UI por ser bas-
tante completo. Existem profissionais que utilizam outros softwares gráficos para de-
senvolver tanto wireframes como interfaces, principalmente Adobe Photoshop e Adobe 
Illustrator, porém o ideal é utilizar ferramentas especificamente voltadas para o desen-
volvimento de produtos digitais como o Figma, Sketch, Axure, Adobe XD, Lucidchart, e 
utilizar os demais softwares gráficos para tratar imagens se necessário, criar ilustrações 
ou ícones, e demais “acessórios” visuais. 
Para o desenvolvimento de um aplicativo, por exemplo, diferentes profissionais 
participam do projeto. Existem profissionais que trabalham apenas a etapa de UX e 
outros fazem a função de UI e desenvolvem a interface, assim, abrirá mais portas no 
mercado de trabalho o profissional que dominar essas duas vertentes.Após etapa de 
UX e UI entram em cena linguagens de programação utilizadas por desenvolvedores 
que concretizam o que foi previsto pelos designers, tanto para IOS como Android e 
os dois sistemas possuem variantes consideradas por estes profissionais. Segundo os 
princípios de Design Thinking, é essencial que os desenvolvedores participem desde 
a fase inicial (discovery) do projeto (princípio de co-criação). 
17
UNIDADE Análise Estrutural
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
Figma
Ferramenta online que pode ser utilizada para fazer wireframes e layout.
https://bit.ly/33xuvEd
Sketch
Largamente utilizado por profissionais desta área.
https://bit.ly/2ZGRY4K
Axure
Algumas ferramentas dão conta de quase todas as etapas de desenvolvimento, 
outras são específicas para determinada etapa.
https://bit.ly/33yEeKC
Adobe XD
Software da Adobe voltado para produtos digitais
https://adobe.ly/2FA1IXL
Lucidchart
Frramenta online gratuita para criação de fluxogramas.
https://bit.ly/2FzeIgg
18
19
Referências
DOVALE, J. Métricas de UX, o que são e como definir. Disponível em: <https://
medium.com/skillsweb/m%C3%A9tricas-de-ux-o-que-s%C3%A3o-e-como-definir-
-a9fbb920411>. Acesso: 25/06/2020.
FERREIRA, A. R. Comunicação e aprendizagem: mecanismos, ferramentas e co-
munidades digitais. São Paulo: Erica, 2014. (e-book) 
IDEO. Org. Design Kit – The field guide. Disponível em: <http://www.designkit.
org//resources/1>.
SILVA, R. de S. O que é UX Design. Disponível em: <https://www.raffcom.com.
br/blog/o-que-e-ux-design/>. Acesso: 25/06/2020.
WHITE, A. Mídias digitais e sociedade. São Paulo: Saraiva, 2017. (e-book) 
19