Projetos Gráficos

para Mídias Digitais

Design Centrado do(a) Usuário(a)

Responsável pelo Conteúdo:

Prof. Me. Ivan Ordonha Cechinel

Revisão Textual:
Prof.ª Dr.ª Selma Aparecida Cesarin
 Design Centrado do(a) Usuário(a)

• O Significado que a Interface Traz para o(a) Usuário(a);

• Princípios do Design Thinking;
• Pesquisa de Campo;
• Pensando nas Formas de Interação com o(a) Usuário(a);
• Mapa de Empatia.

OBJETIVO

DE APRENDIZADO
• Conceituar e discutir a importância de se levantar informações relevantes que contextuali-
zarão o Projeto, fornecendo subsídios para que a busca de soluções seja eficaz, promovendo
experiências positivas para os(as) usuários(as).
UNIDADE Design Centrado do(a) Usuário(a)

O Significado que a Interface

Traz para o(a) Usuário(a)
Nesta Unidade, vamos tratar, especialmente, das ferramentas conceituais para desen-
volvimento de produto digital (aplicativo será nosso foco).

Discutiremos a importância de considerar a experiência do usuário e sua relação com

as interfaces visuais.

Não trataremos de Linguagens de Programação como HTML, CSS ou Banco de

Dados, como PHP ou MySQL, por exemplo. Esse conteúdo corresponde à outra área
do conhecimento (Ciência da Computação).

Nosso foco serão as formas de coleta e análise de dados qualitativos baseadas em

diretrizes do design e comportamentos do usuário para construção de interfaces em
forma de protótipos.

Travis Lowdermilk, em seu livro Design Centrado no Usuário, lembra-nos que, a partir de
2007, com o lançamento do Iphone, pela Apple, surge um novo paradigma e se observou
uma elevação do gosto dos consumidores em relação aos produtos digitais.
Segundo o autor, para os desenvolvedores de interfaces digitais poderem lidar com essas
mudanças, é necessário incluir os usuários no processo de criação desses produtos.

Ao focar na usabilidade, economizamos tempo e criamos aplicativos que atendem às neces-

sidades de nossos usuários (LOWDERMILK, 2019).

Princípios do Design Thinking

A área do Design fornece inúmeras ferramentas para o desenvolvimento de projetos
de qualquer natureza e, dentre elas, estão as do Design Thinking.

Mas o que isso significa?

É o que veremos a seguir.

Design = Projeto/projetar.
Thinking = Pensar/pensando.

Design Thinking representa, acima de tudo, uma busca de soluções por meio da
criatividade, colocando o ser humano no centro do design, tudo partindo da empatia.

8
 Segundo Tim Brown (2018), o Design Thinking potencializa capacidades que as pes-
soas têm, porém não são evidenciadas em práticas comuns de resolução de problemas.

Design Thinking trata de recursos mais humanos, como a intuição por exemplo, da
forma como percebemos, como identificamos padrão.

É pensar na criatividade pelo emocional e não apenas funcional. É nos expressarmos

por múltiplos Canais Midiáticos.

Ninguém quer gerir uma empresa com base apenas em sentimento, Intuição e inspiração,
mas se fundamentar demais no racional e no analítico também pode ser perigoso.

A abordagem integrada que reside no centro do processo de Design sugere um “ter-

ceiro caminho” (BROWN, 2018).

Para entendermos o Design Thinking, é importante que fique claro, primeiramente,

o que é Design.

Muitas vezes, essa área está associada apenas ao aspecto visual dos produtos, seja de
ordem física, seja digital, porém o Design visa a oferecer bem-estar na vida das pessoas
e, para isso, identifica possíveis problemas de diferentes ordens para, então, resolvê-los.

Além disso, a prática do Designer não reside apenas nos produtos ou nos serviços
acabados, mas também, no ato de fazê-los e nos processos e estratégias adotadas ao
longo de um Projeto (MOREIRA, 2018).

De acordo com a autora, podemos dizer que Design Thinking significa “O jeito de
pensar do Design”, um modelo de pensamento centrado nas pessoas, buscando solu-
ções inovadoras e significativas.

Ainda segundo Moreira (2018), o Design Thinking tem como base o conceito de
empatia, colaboração e experimentação, por estar centrado no ser humano e, assim,
constitui-se um modelo de pensamento que possui várias particularidades e, para de-
senvolvê-lo de forma bem-sucedida, é necessário conhecer todas as suas etapas, assim
como saber utilizar uma série de ferramentas e técnicas projetuais.

Moreira (2018) define algumas das vantagens em utilizarmos recursos do

Design Thinking:
• Inovar e se diferenciar no Mercado;
• Desenvolver produtos e serviços mais relevantes para as pessoas;
• Criar mais empatia com os usuários e atender suas reais necessidades e desejos;
• Pensar de forma abdutiva e dedutiva;
• Questionar o status quo e não apenas tentar achar respostas;
• Cocriar com equipes multidisciplinares;
• Prototipar, testar e iterar ideias promissoras.

9
9
UNIDADE Design Centrado do(a) Usuário(a)

Importante!
Lembrando-se de que é função do UX Designer gerenciar e analisar a interação entre pes-
soa e produto e de que o UI Designer encarrega-se de construir a interface do aplicativo
com base no levantamento e em análises do UX Designer.
Geralmente, o mesmo profissional exerce as duas funções, pois elas estão totalmente
interligadas. Porém, é importante compreender com clareza os limites entre uma fun-
ção e outra.

Não confundir UX com Arquitetura de Informação

A Arquitetura de Informação relaciona-se à experiência do usuário e, muitas vezes,
acaba virando sinônimo de UX Design, porém, constitui apenas parte da experiência
do usuário.

Em um cenário ideal, geralmente, trata-se de 5 aspectos principais, apresentados

a seguir.

Estratégia – Escopo – Estrutura (Fluxograma) –

Wireframe – Interface
Organiza conteúdos definindo hierarquia da informação, nomenclaturas dos botões,
itens do menu e define de que maneira a distribuição dos elementos que irão compor a
interface facilitam ou permitem que o usuário consiga chegar a um determinado serviço
dentro do site, do sistema ou do aplicativo.

Esse trabalho se concretiza através do wireframe.

Wireframe: Constitui a base (estrutura) para a interface e, muitas vezes, pode ser interativo.
Tem por objetivo explicar o contexto de uso e, por isso, não apresenta a arte final.
Nessa etapa, definem-se posição de imagens e texto, hierarquia de títulos, subtítulos, bo-
tões e itens do menu, entre outros (mostra a forma e não a aparência).
Wireframe constitui fase de planejamento e investir tempo nessa etapa será melhor, pois
evitará retrabalho, desperdício de tempo e de dinheiro, além de poder ser usado como “do-
cumentação” do processo criativo.

Em Síntese
• É necessário projetar para experiência positiva e não somente para experiência qualquer;
• Preparar espaços e meios nos quais a experiência possa acontecer;
• O projeto deve ser centrado no usuário e isso é que vai determinar como fazer, que
código usar e que ferramentas utilizar.

10
Design Thinking na prática
Para aplicar os princípios de Design Thinking na prática, é necessário refletir sobre
alguns importantes aspectos que irão evitar ou amenizar problemas em etapas mais
avançadas do projeto.
Existem algumas questões cruciais a serem respondidas que ajudam nessa reflexão
inicial, como, por exemplo:
• O que você e a equipe sabem sobre o problema a ser resolvido?
• Qual a relevância do aplicativo na vida das pessoas?
Perguntas que parecem óbvias, mas que, em muitos projetos, acabam sendo esque-
cidas ou desconsideradas.
Para organizar e aprimorar o trabalho com base nas ferramentas conceituais forneci-
das pelo Design Thinking, autores da Área falam de etapas projetuais.
Alguns definem 3, outros 4 ou 5 etapas ligadas a um projeto de qualquer natureza.
Na verdade, as etapas podem variar de acordo com cada projeto. Porém, indepen-
dente dessas variações, a essência é a mesma. Trabalharemos com as 3 etapas apresen-
tadas a seguir, que são as mais utilizadas.

Quadro 1

Na imersão, a grande palavra é EMPATIA. Verificar na prática que soluções o

usuário necessita, quais problemas reporta. Levantar perfil do usuário (não só
1ª etapa – Imersão dados demográficos, mas sim pesquisa qualitativa – traçar jornada).
Nessa etapa, podem ser realizadas dinâmicas em grupo (focous group), mas não
é obrigatório.

Reunir tudo o que foi levantado durante a 1ª etapa. Liste os problemas e as ca-
2ª etapa – Definição rências descobertas. Valide hipóteses (ver se o que você e a equipe “achavam”
condiz mesmo com a realidade).

Proposta de solução para o problema. Cocriação (diferentes equipes traba-

lhando juntas). São utilizadas ferramentas de metodologia de Design em prol
3ª etapa – Ideação da criação, como, por exemplo: Brainstorm, mapa mental, painel semântico
e prototipagem.

O protótipo pode ser desenvolvido de diversas maneiras (apenas gestual ou layout

mais aprimorado com o auxílio de softwares ou ferramentas on-line) – depende também
de prazos e de investimento do projeto.

Protótipo: Significa tirar as ideias da mente e concretizá-las fisicamente. Diversas técni-

cas e ferramentas podem ser utilizadas. Desde esboços simples feitos a mão até interfaces
e layouts mais elaborados, confeccionados em softwares ou em ferramentas on-line por
exemplo. Podem ter baixa, média ou alta fidelidade.
Escopo: Lembrando-se de que é importante definir um escopo para o Projeto, semelhante
ao briefing, como temos na Comunicação Visual. Funciona como uma espécie de roteiro e
documentação do projeto para nortear o que será desenvolvido e deixar claro, tanto para
cliente quanto para a equipe, o que será realizado.

11
11
UNIDADE Design Centrado do(a) Usuário(a)

Não há uma forma fixa em relação ao conteúdo do escopo. Ele poderá ter mais ou
menos itens dependendo do projeto. É importante ter flexibilidade para gerenciar o
conteúdo necessário.
Você verá exemplo de um escopo no Estudo de Caso que faremos ao fim desta Unidade.

Pesquisa de Campo
Constitui fator primordial da 1ª etapa do Design Thinking. Ao projetarmos conside-
rando o ser humano como centro do trabalho, necessitamos colher informações a respeito
do público ao qual nossa criação se destina, para que nosso projeto tenha base sólida e,
por isso, devemos ir a campo e dedicar tempo para vivenciar a rotina dos usuários.

As informações espontaneamente fornecidas poderão nos dar o caminho para construir

uma solução eficaz, que de fato dialogue e resolva os problemas apresentados por esse
grupo. Se estamos desenvolvendo um aplicativo, por exemplo, ele só terá relevância se
compreendermos as necessidades dos usuários e isso vai além da estética ou da linguagem
de programação utilizada para desenvolvimento do aplicativo (LOWDERMILK, 2019).

Focar no usuário é mais do que simplesmente discutir sobre como será a aparência dos
componentes ou criar animações rápidas e transições suaves. O design centrado no usuário
permite que possamos examinar o quanto um aplicativo é eficiente para atingir o propósito
para o qual foi concebido. É possível ter um aplicativo incrivelmente bonito, cuja usabilidade
seja um pesadelo (LOWDERMILK, 2019).

A chamada fase de imersão traz uma série de informações que necessitam ser ana-
lisadas e interpretar esses dados é tão importante quanto coletá-los, pois essa com-
preensão das informações fornecerá insights significativos para as etapas conseguintes
(MOREIRA, 2018).

Em suma, é necessário sair de casa, ou do escritório, e ir até o usuário. Observar os

usuários utilizando o produto ou serviço para descobrir coisas comuns a esses usuários,
ou seja, usuários que têm o mesmo objetivo não necessariamente apresentam o mesmo
perfil demográfico.

Trocando Ideiais...
Como recurso, poderá ser utilizada uma entrevista escrita ou gravada (imagem e som).
Se POSSÍVEL, pesquise pelo menos 8 e compare os 4 resultados mais próximos, mais
semelhantes.
Realize perguntas centradas no serviço, como, por exemplo: Como você imagina se
comunicar? Ou realizar determinado serviço dentro do app, e não apenas perguntar:
“Achou legal a proposta do aplicativo?”

12
Definir Persona
Persona: representa um conjunto de atributos e características, uma espécie de
“ficha técnica” do usuário, define um perfil que representará o usuário do aplicativo.

No viés do design, é uma pesquisa qualitativa, ou seja, uma persona de UX não é basea-
da apenas em estatísticas, em dados analíticos ou baseada no que você ou a equipe “acham”.

É importante levantar qual o objetivo do usuário e não apenas dados demográficos.

Mapear as necessidades do usuário e, assim, determinar qual será a solução digital mais
adequada e necessária a ele.

O perfil definido é a justificativa para a tomada de decisão durante o processo de cria-

ção. Levantar hábitos e costumes, entre outros, se tem alguma dificuldade para realizar
o objetivo e criar uma ficha com detalhes do perfil e dos objetivos.

A ficha deverá ser consultada e não é estática. Podem ser necessárias mais conversas
com o usuário e, assim, adquirir feedbacks novos.

Você verá um exemplo de persona no Estudo de Caso que faremos ao fim desta
Unidade.

Pensando nas Formas de

Interação com o(a) Usuário(a)
Lowdermilk (2019) nos traz a informação de que o design centrado no usuário, se
desenvolvido de maneira coerente e assertiva, pode ser importante fator de economia de
tempo, algo muito importante em projetos de qualquer natureza, pois ao compreender
e considerar as necessidades dos usuários, serão evitados erros que seriam mais difíceis
de serem corrigidos em etapas posteriores do projeto e que acarretariam prejuízo finan-
ceiro e efetiva perda de tempo.

Um aplicativo, por exemplo, na maioria das vezes, oferece serviços aos usuários e
eles precisam de uma experiência positiva que será determinada com o grau de sucesso
em realizar determinada tarefa dentro do aplicativo.

Para Stickdorn (2014), a entrega de um serviço requer certo grau de participação

do usuário.

Os serviços não são bens tangíveis ou padronizados que podem ser armazenados
em um estoque. Pelo contrário, os serviços são criados por meio da interação entre o
provedor e o usuário do serviço. A intenção inerente de um serviço é atender às neces-
sidades do usuário.

13
13
UNIDADE Design Centrado do(a) Usuário(a)

Mapa de Empatia
Ser empático, ou seja, conseguir se colocar no lugar do outro para, então, aprender com
ele e até mesmo pensar como ele, é uma atividade fundamental para o Design Thinking
(MOREIRA, 2018).
Segundo Moreira (2018), colocar-se no lugar de alguém, especialmente, daquelas pessoas que
estão inseridas em contextos completamente diferentes do nosso, não é uma tarefa simples.
A autora pontua que a empatia exige habilidade, intuição e, também, um vasto repertório
de ferramentas de projeto que tem o objetivo de captar as aspirações e as necessidades
explícitas e implícitas das pessoas.
O que chamamos de mapa de empatia consiste em um recurso simples, porém essencial,
que “dá voz” ao usuário, vez que é apresentado em um quadro de falas dos propensos usu-
ários, coletadas nas entrevistas.
Essas falas são organizadas sendo distribuídas de acordo com seu contexto.

Você verá exemplo de um Mapa de Empatia no Estudo de Caso que faremos ao fim
desta Unidade.

Existem outros procedimentos metodológicos, muitos deles derivados do Design Thinking

que também podem ser utilizados no desenvolvimento de projeto.
A seguir, são apresentados alguns exemplos.
Metodologias de trabalho
A seguir, uma lista com alguns métodos de trabalho que também são utilizados no dia a dia
de quem lida com UX e UI:
• Design Sprint;
• Scrum;
• Kanban;
• Lean;
• Método 5W1H;
• Métodos ágeis.

Estudo de Caso
Agora, no exemplo a seguir, veremos como podem ser aplicadas as ferramentas con-
ceituais descritas nesta Unidade.

O projeto aqui utilizado como Estudo de Caso foi desenvolvido pelo prof. Me. Ivan
Ordonha Cechinel.

14
 Case
Aplicativo: Guia Turístico do bairro da Liberdade, em São Paulo1
1ª Etapa – Imersão
O que será criado?
Veremos, a seguir, como Estudo de Caso, um aplicativo em desenvolvimento, cuja
função é ser um guia comercial e turístico do bairro da Liberdade, em São Paulo.

É um aplicativo para ser utilizado por visitantes e entusiastas do bairro, assim como
pelas pessoas que trafegam, moram ou trabalham na região da Liberdade, um produto
digital que reúna pontos turísticos, templos, lojas e restaurantes e, ao mesmo tempo,
dialogue com a identidade do bairro, trazendo sua história.

Público
Voltado especialmente ao público visitante, que vem de diferentes partes do país ou
do mundo, e também da própria cidade de São Paulo. Público juvenil e adulto, principal-
mente, de todos os sexos e classes sociais.

Hipóteses
O bairro apresenta extensa gama de lojas, bares, restaurantes e pontos turísticos
espalhados por sua área territorial. Boa parte dele pode ser visitada a pé, porém, é ne-
cessário planejar para priorizar os pontos a serem visitados, de acordo com o objetivo
da visita (por exemplo, compras, visita cultural e gastronomia, entre outros), pois:
• Perde-se tempo ao não se planejar a visita;
• Longas caminhadas causam cansaço desnecessário;
• A quantidade de locais a serem visitados é grande. Pontos de interesse podem não
ser visitados;
• O bairro, geralmente, tem grande fluxo de pessoas, o que demanda mais tempo
durante a visitação.

Entrevista
• Questões:
» Você já se perdeu no bairro da Liberdade?
» Quando vai ao bairro, costuma passar o dia inteiro ou apenas um período?
» Utiliza transporte público para ir ao bairro?
» Já desistiu de encontrar algum lugar ou serviço no bairro da Liberdade?
» Acha que é fácil explorar tudo o que o bairro tem para oferecer?
» Quando você visita o bairro da Liberdade, costuma ter interesses específicos (gas-
tronomia, compras, visita cultural), ou realiza visita geral?

1
Lembrando-se de que parte das informações que complementam este Estudo de Caso é fictícia, com caráter acadêmico.

15
15
UNIDADE Design Centrado do(a) Usuário(a)

» Como você imagina um “Guia Turístico” do bairro da Liberdade para ser acessa-
do em seu Smartphone?

Resultado das entrevistas

Foram entrevistadas 12 pessoas e, a seguir, estão algumas das respostas mais relevantes:
• “Costumo visitar de transporte público”;
• “Sim, já me perdi procurando os Templos orientais”;
• “Gostaria que houvesse um aplicativo que centralizasse todos os pontos turísticos,
restaurantes e lojas”;
• “Poderia ser um aplicativo com um mapa do bairro”;
• “Poderia ser possível encontrar restaurantes e saber informações sobre eles antes
de ir até o local”.

2ª etapa – Definição
Carências detectadas
Necessidade de haver uma ferramenta digital que centralize informações sobre os
pontos de interesse do bairro da Liberdade em São Paulo (que indique e traga informa-
ções sobre restaurantes, lojas, templos e museus) e que possibilite comunicação, como,
por exemplo, reserva em restaurantes, e que atenda tanto os visitantes do bairro da
­Liberdade quanto os comerciantes da região, que poderão cadastrar seu estabelecimento
no aplicativo.

Decidiu-se, nesse caso, que um aplicativo poderá centralizar essas informações de ma-
neira ágil. Poderão ser feitas parcerias com comerciantes, prestadores de serviço e em-
preendedores que atuam no bairro e, assim, fazer com que o produto digital ganhe força.

Um aplicativo 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, depois, um período de experiência de uso, com

consolidação maior do aplicativo.

Poderá ser solicitado por parte do anunciante um investimento que manterá o apli-
cativo em funcionamento, assim como outras formas de parceria, com promoções e
descontos em serviços e produtos para usuários do aplicativo, por exemplo.

Persona 1
Cibele, 19 anos, é estudante de Design Gráfico. Trabalha como ilustradora autônoma
e é fã de cultura pop, action figures, animes e games.

Gosta de passear pelo bairro para buscar inspiração tanto para sua arte quanto
para aproveitar mais aspectos da cultura oriental, como templos e gastronomia, porém,

16
explora a região e vai descobrindo ao acaso, passando por lugares que não entrou por
não ter mais informações a respeito.

Adora a feirinha da Liberdade e as lojas de produtos ligados à cultura pop, que

acontece aos domingos. Sempre utiliza metrô para ir ao bairro e explora a região sem-
pre caminhando.
• Metas: desenvolver sua arte e crescer profissionalmente;
• Necessidades: planejar melhor seus “rolês” para não perder tempo, procurando o
que precisa quando já está caminhando pelo bairro;
• Receio: perder tempo.

Persona 2
José, 55 anos, é contador e gosta de passear com a família por São Paulo. Quando
visita lugares diferentes, pensa sempre onde almoçar, e se preocupa em decidir em que
períodos do dia irá realizar determinadas tarefas no local de visitação. Sua prioridade é visi-
tar pontos turísticos culturais e informações sobre horário de funcionamento e localização.
• Metas: engrandecimento cultural e transmitir isso aos filhos;
• Necessidades: encontrar informações claras e objetivas sobre os pontos de interes-
se da região que visita com a família;
• Receio: perder tempo ou deixar de visitar pontos importantes durante o passeio
pelo bairro.

Escopo do projeto
Quadro 2 – Escopo

Desenvolver aplicativo que funcionará como “Guia Turístico” do bairro da

Projeto Liberdade, em São Paulo.

• Melhorar o aproveitamento do bairro por parte dos visitantes;

• Ser uma fonte abrangente de informações sobre o bairro, para ter visão mais
global do que a região oferece;
• Trazer informações mais detalhadas sobre pontos turísticos, templos religio-
sos, estabelecimentos comerciais (como lojas, bares e restaurantes);
• Ser um espaço para que os comerciantes e os empreendedores do bairro da
Liberdade possam cadastrar e divulgar seus estabelecimentos e serviços;
• Guia para os pontos turísticos e religiosos, aumentando a apreciação
do público.
Objetivos do Projeto
Conteúdos mínimos (telas) que o aplicativo deve conter
• Mapa da região;
• Descrição dos pontos turísticos, religiosos, estabelecimentos e serviços
cadastrados;
• Canal de comunicação entre público e estabelecimentos (por exemplo, a pos-
sibilidade de reservar restaurantes ou comprar ingressos para pontos turísti-
cos dentro do aplicativo);
• Tela de cadastro para comerciantes e empreendedores da região poderem
cadastrar seus estabelecimentos e serviços.

Público a quem o • Juvenil/adulto.

app se destina

17
17
UNIDADE Design Centrado do(a) Usuário(a)

Data de início do projeto

• 1ª semana: pesquisa de campo (levantar hipóteses, realizar entrevistas, pes-
quisar informações sobre o bairro);
• 2ª semana: análise dos dados (definição de persona – realizar Mapa de Empatia);
Cronograma • 3ª semana: iniciar os primeiros estudos para a construção do aplicativo;
• 4ª semana: wireframes (protótipo de baixa fidelidade);
• 5ª e 6ª semanas: desenvolvimento de protótipo de alta fidelidade;
• 7ª semana: testes de usabilidade com o protótipo.

Software
• Aplicativos;
Ferramentas • Photoshop (para tratamento de imagens/fotomontagens);
necessárias • Illustrator (Ilustrações);
• Figma (interfaces/protótipo navegável do app).

Figura 1 – Mapa de empatia do Projeto

Fonte: Acervo do conteudista

3ª Etapa – Ideação/prototipagem
Após terem sido apontadas as necessidades e levantadas as soluções para as carên-
cias identificadas na Etapa 1, foi desenvolvido um fluxograma – as setas direcionais mos-
tram a sequência da navegabilidade possível que o usuário pode realizar no aplicativo.

O Fluxograma a seguir foi desenvolvido com a ferramenta on-line Lucidchart.

Disponível em: https://bit.ly/2XWB9BA

O fluxograma constitui uma representação simples e objetiva das telas do aplicativo e

sua sequência, constituído apenas de retângulos contendo o nome previsto para cada tela.

Essa representação simples é o suficiente nesta etapa, pois o intuito é indicar

a navegabilidade.

18
 Figura 2 – Fluxograma
Fonte: Acervo do conteudista

A seguir, temos exemplos de wireframes (armação de arame, na tradução literal) por-

que constituem as “linhas” que representam a estrutura principal da interface.

Apresentam uma representação mais detalhada, prevendo posições de menus, bo-

tões, imagens, textos, ícones, mapas e formulários, entre outros elementos gráficos.

Nos wireframes, não há a representação de cores e imagens, apenas linhas estrutu-

rais e alguns detalhes, como ícones, por exemplo.

Nesse exemplo, temos a tela inicial na qual, quando o usuário toca no botão principal
do menu de contexto, abre-se a aba do menu com botões, que levará às telas internas
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, nas principais vias da área central do
bairro da Liberdade, onde se localizam as principais áreas de interesse (pontos turísticos, lo-
calizaçã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 qual, 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).

Portanto 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.
A seguir podemos observar também a tela título (tela inicial do aplicativo – imagem ao lado
esquerdo a seguir).
Essa tela dá acesso ao mapa da região central do Bairro da Liberdade e, acima do mapa,
estarão distribuídos os ícones que darão acesso às telas de conteúdo do aplicativo.

19
19
UNIDADE Design Centrado do(a) Usuário(a)

Figura 3 – A tela inicial do aplicativo (lado esquerdo) e o mapa da região central do bairro da Liberdade
Fonte: Acervo do conteudista

A primeira imagem a seguir (da esquerda para direita) apresenta o wireframe da tela
do mapa, na sequência (segunda imagem a seguir), podemos observar o wireframe da
mesma tela, porém, com o menu de contexto acionado com as opções: Início, Cadastre,
Social e História.

Na sequência (terceira imagem), o menu de contexto ao lado direito está acionado

com as opções Sobre (com informações sobre os desenvolvedores do aplicativo) e Editar,
que dará acesso a opções de ajustes em relação ao tamanho da fonte em todo o aplica-
tivo, 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 ícone para compartilhar).

Na tela do mapa há, também, na parte inferior, um botão (“Faça parte é grátis”) em
destaque, que dá acesso à tela de cadastro, na qual empreendedores da região poderão
cadastrar seus estabelecimentos.

Esse serviço é oferecido pelo aplicativo.

Figura 4 – Wireframes representando a estrutura das telas do aplicativo

Fonte: Acervo do conteudista

A seguir, 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.

20
 Figura 5 – Wireframes representando a estrutura das telas do aplicativo
Fonte: Acervo do conteudista

Figura 6
Fonte: Acervo do conteudista

A seguir, 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:

21
21
UNIDADE Design Centrado do(a) Usuário(a)

Figura 7
Fonte: Acervo do conteudista

Existem diversas ferramentas para realizarmos esse trabalho. Algumas gratuitas, com limi-
tações, e outras pagas:
• Figma: ferramenta on-line que pode ser utilizada para fazer wireframes e interfaces
de alta fidelidade;
• Sketch app: largamente utilizado por profissionais dessa á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 on-line gratuita para criação de fluxogramas.
O software Sketch é um dos mais usados pelos profissionais de UX e UI, por ser bastante
completo. Existem profissionais que utilizam outros softwares gráficos para desenvolver
tanto wireframes como interfaces, principalmente, Adobe Photoshop e Adobe Illustrator.
­Porém, o ideal é utilizar ferramentas especificamente voltadas para o desenvolvimento
de produtos digitais, como o Figma, Sketch, Axure, Adobe XD, Lucidchart e utilizar demais
softwares gráficos para tratar imagens se necessário, criar ilustrações ou ícones, e demais
“acessórios” visuais.

22
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, porém abrirá mais portas no Mercado de Trabalho
o profissional que dominar essas duas vertentes. Após a etapa de UX e UI, entram em cena
Linguagens de Programação utilizadas por desenvolvedores que concretizam o que foi pre-
visto pelos designers, tanto para IOS como Android, e os dois Sistemas possuem variantes
consideradas por esses profissionais.
Segundo os princípios de Design Thinking é essencial os(as) desenvolvedores participarem
desde a fase inicial (Discovery) do projeto (princípio de cocriação).

23
23
UNIDADE Design Centrado do(a) Usuário(a)

Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:

 Sites
UX Design
https://bit.ly/361edph

 Leitura
7 sites e serviços que não mereciam ter sido encerrados
Matéria sobre serviços que eram oferecidos nos primórdios da web.
https://bit.ly/3p17p2m
Don Norman e o termo “UX”
Entrevista com Don Norman, idealizador da área de UX.
https://bit.ly/3638oYp
Estudo de caso: Projeto de Beatriz Desenzi
https://bit.ly/3o4CX68
Estudo de Caso UX/UI: Melhorando a experiência dos usuários na compra de passagens de ônibus através do
aplicativo Viação Garcia
https://bit.ly/3o4D8OQ
Mapa de Empatia
Matéria sobre mapa de empatia na qual é possível baixar o template modelos
do mapa.
https://bit.ly/392cmCA

24
Referências
BROWN, T. Design Thinking – Uma metodologia poderosa para decretar o fim das
velhas ideias. Rio de Janeiro: Alta Books, 2018.

FERREIRA, A. R.. Comunicação e aprendizagem: mecanismos, ferramentas e comu-

nidades digitais. São Paulo: Erica, 2014. (e-book)

LOWDERMILK, T. Design Centrado no Usuário. Novatec: São Paulo, 2019.

MOREIRA, B. R. Guia Prático do Design Thinking: aprenda 50 ferramentas para

criar produtos e serviços inovadores. Produção independente 2018. (e-book)

STICKDORN, M. Isto é Design Thinking de Serviços: Fundamentos, Ferramentas,

Casos. Porto Alegre: Bookman, 2014.

WHITE, A. Mídias digitais e sociedade. São Paulo: Saraiva, 2017. (e-book)

Site Visitado
DESIGN Kit – The field guide. E-book gratuito com interessantes estudos de caso a
respeito de Design Thinking. Disponível em: <http://www.designkit.org//resources/1>.

25
25