Projetos Gráficos

para Mídias Digitais

Planejamento de Interface

Responsável pelo Conteúdo:

Prof. Me. Ivan Ordonha Cechinel

Revisão Textual:
Prof.ª Dr.ª Selma Aparecida Cesarin
 Planejamento de Interface

• UX: Experiência do Usuário;

• Definição de Interface;
• Interface Intuitiva;
• Ferramentas Utilizadas Pelo UX Designer;
• Atividade Prática.

OBJETIVOS

DE APRENDIZADO
• Trazer ao estudante reflexão a respeito de como pode ser elaborada a fase de planejamento
de um aplicativo, considerando a experiência do usuário e como isso influencia na constru-
ção da interface.
UNIDADE Planejamento de Interface

UX: Experiência do Usuário

A sigla UX deriva de “Experiência do Usuário” ou “User Experience Design”, em
inglês, e busca a relação de um determinado produto (que pode ser um aplicativo, um
site, o painel de operação de uma máquina, um eletrodoméstico ou qualquer produto ou
serviço que apresente uma interface para interagir com as pessoas) com o usuário, ob-
jetivando que essa relação seja intuitiva e a mais objetiva e simples possível, encurtando
caminhos entre interface e usuário.

Cada vez mais, essa área ganha importância. Muito antes dos aplicativos, os estudos
entre interface e usuário eram feitos em sites, por exemplo, e muitos conheciam essa
área como Arquitetura de Informação.

O profissional que se dedica especificamente a essa área é chamado de UX Designer.

Definição de Interface
A interface é o meio por meio do qual o usuário percebe o produto ou o serviço interagindo
de diversas formas. Ela pode ser construída de maneiras diversas, em inúmeras ferramentas.

Segundo a UX Designer Rafaela de Souza da Silva, determinada Empresa potencia-

liza seu investimento em desenvolvimento e comunicação quando consegue promover
percepção positiva em seus consumidores.

A partir do momento que o público (cliente/consumidor) da Empresa tem experiência

positiva com o produto/serviço, aumenta sua percepção em relação ao valor da marca,
e assim é maior a chance de se tornar fiel a esse produto/serviço.

Consequentemente, serão levantadas informações sobre o perfil do público a partir

da sua interação com produto/serviço e, assim, averiguar o que pode ser aprimorado,
direcionando os investimentos de maneira mais eficaz.

A interação entre pessoa-produto sempre acontecerá, independente do UX Design.

Entretanto, o profissional de UX estudará essa interação e promoverá produtos e servi-
ços de maneira mais eficaz.

Quando o produto é pesado apenas para ter inúmeras funcionalidades, esquece-se

que o usuário acaba rejeitando muitos desses recursos por não perceber utilidade ou por
estar preso a uma “zona de conforto”. Por isso, ser intuitivo é importante para que o
usuário crie uma relação de identificação.

Interface Intuitiva
A seguir, um exemplo do painel da máquina modelo Lava&Seca, da Brastemp. Re-
pare que o botão para ligar a máquina e iniciar a lavagem apresenta símbolos que se
assemelham aos utilizados em players de vídeo na Internet:

8
 Figura 1
Fonte: Acervo do conteudista

A interação intuitiva ganha cada vez mais importância, especialmente, por estarmos
bombardeados de informação a todo momento e, portanto, é necessária a interface não
ser complicada e possibilitar o menor caminho possível a ser percorrido para a utilização
de um produto ou serviço.

Ferramentas Utilizadas Pelo UX Designer

Segundo a UX Designer Rafaela, esses estudos podem ser apresentados visualmente
por meio de diferentes recursos:
• Wireframe estática: guia visual que representa a estrutura da página e a hierar-
quia dos principais componentes:

Prefácio Capítulo 1
Lorem ipsum dolor sit amet, Subtítulo
consectetuer adipiscing elit, Lorem ipsum dolor sit amet,
sed diam nonummy nibh consectetuer adipiscing elit,
euismod tincidunt ut laoreet sed diam nonummy nibh
dolore magna aliquam erat
volutpat. Ut wisi enim ad
minim veniam, quis nostrud
exerci tation ullamcorper

Voltar Voltar

Figura 2

9
9
UNIDADE Planejamento de Interface

• Prototipação interativa: simulação da navegação e das funcionalidades, por meio

de um layout acionável;
• Gráficos: podem representar visualmente dados numéricos levantados através de
testes em produtos/serviços;

Qual foi o melhor cadastro de oferta?

(total de 10 pessoas que testaram os sites)

Empresa A
3
Empresa B

Figura 3

Avaliação do cadastro de oferta

(total de 10 pessoas que testaram o site)

5 3 2
Empresa A
Ótimo

3 3 2 2 Bom

Empresa B Regular

Ruim
0 1 2 3 4 5 6 7 8 9 10

Figura 4
• Fluxograma: organização das informações e interações;

Figura 5
Fonte: Acervo do conteudista

10
 • 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: Benchmark – 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.

Atividade Prática
A seguir, temos um esboço das telas de um Livro de 3 capítulos, em formato aplicativo.

Há um fluxograma – as setas direcionais mostram a sequência da navegabilidade

possível que o usuário pode realizar.

Neste exemplo, temos a tela inicial na qual, quando o usuário toca no botão principal
do menu, abre-se a aba do menu, com botões que levarão às telas internas do aplicativo
(Prefácio, Capítulo 1, Capítulo 2, Capítulo 3), além do botão sair, que fechará o aplicativo.

Neste esboço, há algumas indicações de como poderá ser estruturada a interface.

Entretanto, o foco aqui é demonstrar a quantidade de telas e a sequência de navegação.

Figura 6 – Esboço (estapa1)

Fonte: Acervo do conteudista

11
11
UNIDADE Planejamento de Interface

A seguir o esboço “passado a limpo”, por meio da ferramenta on-line Mockflow.

Disponível em: https://bit.ly/3alRFRv
Existem diversas ferramentas para realizarmos este trabalho. Algumas gratuitas, como o
Figma. Disponível em: https://bit.ly/3pI1LCw
E outras pagas, como, por exemplo, o Sketch, largamente utilizado por profissionais da Área.
Disponível em: https://bit.ly/2LcV1Oe
Podemos citar, ainda, o Lucidchart. Disponível em: https://bit.ly/39BeukU
E, por fim, o Axure. Disponível em: https://bit.ly/39EVzWg

Figura 7 – Fluxograma (etapa2)

Fonte: Acervo do conteudista

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

 Sites
Lucidchart
https://bit.ly/3oFg6OM
Figma
https://bit.ly/3pI1LCw
Mockflow
https://bit.ly/3alRFRv

 Leitura
O que é UX Design
https://bit.ly/3tk6GvF

13
13
UNIDADE Planejamento de Interface

Referências
FERREIRA, A. R. Comunicação e aprendizagem: mecanismos, ferramentas e comu-
nidades digitais. São Paulo: Erica, 2014. (e-book)

WHITE, A. Mídias Digitais e Sociedade: Transformando Economia, Política e Práticas

Sociais. São Paulo: Saraiva, 2017. (e-book)

14