PRINCÍPIOS DE UI

Faculdade de Minas

SUMÁRIO

NOSSA HISTÓRIA .......................................................................................... 3

UI Design ......................................................................................................... 4

Design responsivo ........................................................................................... 5

Princípios de um design efetivo ....................................................................... 7

princípios do design em User Interface ......................................................... 11

Princípios do Design ...................................................................................... 11

PLANEJANDO UMA INTERFACE................................................................. 19

Consumer journey map (mapa da jornada do consumidor) ........................... 21

Produção de ideias ........................................................................................ 22

Planejamento ................................................................................................. 23

Pesquisa e validação ..................................................................................... 28

DESIGN DE INTERFACES: Sketches........................................................... 33

Wireframes .................................................................................................... 34

Protótipos ...................................................................................................... 35

Pattern library (biblioteca de padrões) ........................................................... 36

referencias ..................................................................................................... 37

2
 Faculdade de Minas

NOSSA HISTÓRIA

A nossa história inicia com a realização do sonho de um grupo de empresários,

em atender à crescente demanda de alunos para cursos de Graduação e Pós-
Graduação. Com isso foi criado a nossa instituição, como entidade oferecendo
serviços educacionais em nível superior.

A instituição tem por objetivo formar diplomados nas diferentes áreas de

conhecimento, aptos para a inserção em setores profissionais e para a participação
no desenvolvimento da sociedade brasileira, e colaborar na sua formação contínua.
Além de promover a divulgação de conhecimentos culturais, científicos e técnicos que
constituem patrimônio da humanidade e comunicar o saber através do ensino, de
publicação ou outras normas de comunicação.

A nossa missão é oferecer qualidade em conhecimento e cultura de forma

confiável e eficiente para que o aluno tenha oportunidade de construir uma base
profissional e ética. Dessa forma, conquistando o espaço de uma das instituições
modelo no país na oferta de cursos, primando sempre pela inovação tecnológica,
excelência no atendimento e valor do serviço oferecido.

3
 Faculdade de Minas

UI DESIGN

UI Design trata-se de uma versão reduzida para o termo User Interface Design.
É uma parte fundamental do UX Design e, como o nome sugere, é a disciplina
responsável por projetar a interação do usuário com a marca, de uma forma usável,
fácil e intuitiva, que entregue a ele as informações que ele procura.

Uma interface bem desenhada facilita na conclusão de tarefas e traz uma

experiência mais agradável. De forma geral, o UI Design é a parte do produto que o
usuário vê enquanto olha para o site, é a linha de frente, aquela que irá gerar a
interação e o resultado. Uma interface tem essencialmente dois elementos, a entrada
e a saída. A entrada trata-se de como o indivíduo comunica as suas necessidades e
desejos. A saída é como a interface responderá a esses desejos, atendendo-os ou
não. Uma interface bem projetada fornecerá ao usuário inúmeras formas de
comunicar as suas necessidades e em retorno, atenderá a todas elas de forma prática
e intuitiva.

As necessidades do usuário devem também ser as necessidades da marca.

Deste modo, é fundamental que essas necessidades sejam detectadas e levadas em
consideração. Focar esforços primeiramente no usuário facilitará na criação de uma
interface que permita que ele encontre todas as informações que ele necessita,
saindo com uma experiência positiva e satisfatória.

Uma das grandes mudanças no campo do design de interfaces, é o surgimento

de novos dispositivos, como monitores de tamanhos variados, smarthphones e
tablets. O surgimento destes dispositivos trouxe com eles o desafio de criar interfaces
que se adequem corretamente a maior parte deles, se não em todos. O UI Design
antes resumia-se a desenvolver sites para 2 ou 3 navegadores diferentes, agora o
seu desafio é criar uma boa experiência nos mais diversos tamanhos de tela e
sistemas operacionais, sem deixar de fora nenhum grupo prioritário de usuários.
Porém, para que possamos entregar uma navegação satisfatória para a maioria dos
usuários, muitas vezes decisões universais devem ser tomadas, pequenas
imperfeições devem ser toleradas para que o design apresente-se em boa forma em
diversos ambientes diferentes.

4
 Faculdade de Minas

Flaherty (2011, p. 39), cita em sua obra como exemplo de dessas decisões
niversais, o efeito que os dispositivos touchscreen causaram em designs de sites
desenvolvidos recentemente. Pelo fato de dedos serem muito maiores do que a seta
de um mouse, eles requerem uma área maior de toque, desta forma, para
assegurarem uma boa usabilidade, os elementos do design, como botões, precisam
ser maiores. Com o crescimento desses elementos, outros elementos também
precisam crescer, de forma a manter o equilíbrio.

A popularização de tablets, como o iPad alavancou essa mudança de

pensamento na hora de desenvolver novos sites e aplicativos. Essas mudanças
podem ser percebidas em sites de grande popularidade e volume de acessos, tais
como o Gmail e Twitter. Sites com uma quantidade tão grande de acessos tem um
desafio muito maior em mãos, são interfaces acessadas pelos mais diversos
tamanhos de monitor, sistemas operacionais, navegadores, dispositivos móveis e
velocidades de conexão. O UI Design se encarregará de promover uma experiência
satisfatória para todos esses usuários.

As interfaces atuais possuem mais espaço em branco, os botões são maiores,

assim como campos de formulário e elementos do design em geral. Designs
pensados dessa forma permitem um grande espaço para os mouses e um espaço
satisfatório para os dedos. O item seguinte aborda o conceito de designs responsivos,
ou seja, que se adaptem a qualquer tipo de dispositivo sem perder sua usabilidade,
esta é apenas uma das técnicas empregadas no UI Design, porém, uma das mais
interessantes e com grande importância.

DESIGN RESPONSIVO

Designs responsivos são uma ferramenta extremamente útil, já que a sua

principal função, é fornecer uma interface que se adaptará sem perder suas
funcionalidades em qualquer tipo de dispositivo, sejam tablets, smartphones ou
computadores.

5
 Faculdade de Minas

Como o nome pode sugerir, o objetivo de um design responsivo é responder a

uma mudança de situação, apresentar o conteúdo de forma diferente, fornecendo
imagens menores para conexões mais lentas ou adaptando o layout para uma melhor
apresentação em telas menores. (Flaherty, 2011, p. 42). Vive-se em um mundo em
constante metamorfose, assim como a tecnologia. Um design desenvolvido hoje,
pode tornar-se obsoleto em muito pouco tempo.

Novos sistemas, navegadores e dispositivos podem surgir, o que torna

importantíssima a criação de uma interface que se adaptará as mais diversas
situações.

O site The Boston Globe ([Link]), ilustrado acima, é um ótimo

exemplo de site responsivo. Por ser um portal de notícias de um jornal, sua
quantidade de acessos é alta e o seu conteúdo deve estar sempre disponível,
independente da situação. Todos os seus elementos responderão às mudanças na
resolução de tela. O conteúdo se modifica de acordo com o espaço disponível. Isso
possibilita que o site seja visualizado sem perda de usabilidade tanto nos maiores
monitores, como nos menores smartphones.

Seguindo a mesma premissa do The Boston Globe, o site United Pixelworkers

([Link]) é uma loja virtual de camisetas criativas que se adapta a
qualquer tipo de dispositivo, disponibilizando os seus produtos para todos os
usuários, em qualquer situação. O site possui elementos grandes, que facilitam o
acesso de informações em dispositivos móveis com o toque de um dedo e fornece
uma navegação agradável em computadores.

Conforme a tela diminui, os produtos disponibilizados em formato de grade se

reorganizam de forma a preencher o espaço disponível. O topo do site, com uma
grande quantidade de informações tem o seu tamanho reduzido. Em resoluções muito
pequenas, como em smartphones, o menu muda a sua estrutura de forma a ficar
agrupado em um único botão, assim, economizando espaço.

O site United Pixelworkers (2012) é capaz de fornecer uma experiência única

ao usuário. Toda a sua interface foi planejada para que o seu conteúdo seja acessível
e usável em qualquer situação. Isso é uma prática notável em um mundo onde a
mobilidade é cada vez mais necessária. O item seguinte abordará alguns princípios

6
 Faculdade de Minas

que devem ser levados em consideração durante a criação da interface de um novo

site ou aplicativo.

PRINCÍPIOS DE UM DESIGN EFETIVO

Segundo Friedman (2011, p. 5), usabilidade e utilidade, não o design visual,

determinam o sucesso ou o fracasso de um site. Já que o usuário de uma página é a
única pessoa que clica com o mouse e consequentemente, é aquele que tomará uma
decisão, designs centrados no usuário se tornaram uma prática fundamental para
sites orientados ao lucro. Se um usuário não consegue utilizar um recurso, para ele,
é como se o mesmo não existisse.

Os hábitos do consumidor no meio digital não são muito diferentes dos hábitos
em uma loja física. O visitante dá uma boa olhada na página, visualiza partes do texto
e clica no primeiro link que atrair o seu interesse ou que possa ser aquilo que ele
procurava. Ainda segundo Friedman (2011, p. 6), a maioria dos usuários procura por
algo interessante, útil e clicável. Assim que ele encontra uma opção promissora, ele
clica, se o conteúdo não atender as suas expectativas, ele retorna a página anterior
e continua a sua busca. É importante ressaltar que usuários tendem a preferir páginas
com um conteúdo útil e de alta qualidade antes de páginas com um design mais
agradável. A lista abaixo trata-se de 10 princípios básicos de um design efetivo
organizados por Friedman (2011, p. 10-25).

1. Não faça o usuário pensar: De acordo com a primeira lei de

usabilidade de Krug, uma página da Web deve ser óbvia e auto-
explicativa. Usuários tendem a tomar as suas decisões levando em
conta prós, contras e alternativas. Se a arquitetura do site não é
intuitiva, o número de dúvidas aumenta e torna difícil para o usuário
a tarefa de entender como o sistema funciona. Uma estrutura clara e
links facilmente reconhecíveis ajudam o usuário a encontrar o
caminho até o seu objetivo.

7
Faculdade de Minas

2. Não esgote a paciência do usuário: Quando um site fornece ao

usuário algum serviço ou ferramenta, é importante que os requisitos
para que me ele consiga utiliza-la, sejam os mínimos. Quanto menos
etapas necessárias para a realização de uma tarefa, maior será a
chance de que algum usuário fará uso desta ferramenta. Usuários de
primeira viagem tendem a explorar a interface de forma a encontrar
recursos que o interessem e detestam preencher longos formulários
de cadastro para uma conta que eles podem nunca utilizar no futuro.
É importante permitir que o usuário explore o conteúdo do site até que
sinta-se a vontade para
compartilhar os seus dados pessoais.
3. Gerencie a atenção do usuário: Um site possui conteúdos
estáticos ou dinâmicos, ou seja, modificados frequentemente e,
alguns aspectos da interface atraem mais atenção do que outros.
Imagens são mais atraentes do que longos textos, assim como textos
em negrito atraem mais do que textos comuns. O olho humano pode
detectar instantaneamente arestas, padrões e movimentos, o que
torna propagandas baseadas em vídeo extremamente eficientes, já
que cumprem o trabalho de atrair a atenção do usuário. Focar a
atenção do usuário em áreas específicas do site com um uso
moderado de elementos visuais podem ajudar o visitante a chegar até
o seu objetivo sem pensar em como isso deveria ser feito. Quanto
menos dúvidas o usuário tiver, melhor o seu senso de orientação e
mais seguros ele se sentirá ao navegar.
4. Busque a exposição de recursos: Sites modernos são muito
criticados pela sua tendência por apresentar botões grandes e efeitos
visuais em geral. Da perspectiva do design, estes elementos não são
uma coisa ruim, pelo contrário, são extremamente efetivos enquanto
eles guiam os visitantes através do conteúdo do site de uma forma
muito simples e amigável. Mostrar aos usuários quais funções estão
disponíveis são um princípio fundamental de uma interface bem
sucedida, não importa como ela é atingida. O que importa é que o

8
Faculdade de Minas

conteúdo será bem interpretado pelo visitante e ele se sentirá

confortável com a forma como ele interage com o site.
5. Faça uso de uma boa escrita: Como a Web é diferente do meio
impresso, torna se necessário que o estilo de escrita se ajuste ao
ambiente em questão. Textos promocionais não serão lidos, assim
como longos blocos de texto sem imagens ou pontos de destaque
serão ignorados. Boas práticas ao se escrever para a web podem ser
a utilização de frases curtas e concisas, utilização de elemento visuais
como tópicos e utilização de uma linguagem clara e objetiva.
6. Busque a simplicidade: Usuários raramente estão em um site
para aproveitar o design, eles buscam primariamente por informação,
por isso, é importante focar em simplicidade ao invés de
complexidade. Do ponto de vista do usuário, o melhor site possui uma
interface limpa, apenas com textos, sem anúncios publicitários ou
outros elementos que interfiram no conteúdo que ele procura.
Páginas limpas e objetivas são fundamentais para uma boa
experiência do usuário.
7. Não tenha medo de espaços em branco: Espaços em branco
ajudam a reduzir a carga cognitiva dos visitantes do site e permitem
que a informação seja visualizada com mais facilidade. Quando um
usuário acessa o site pela primeira vez, a tendência é que ele observe
o conteúdo de forma geral e o organize em pedaços de informação.
Estruturas complexas são mais difíceis de ler e analisar. Estruturas
hierárquicas reduzem a complexidade, quanto melhor você gerenciar
esta hierarquia, melhor os usuários irão perceber o conteúdo.
8. Comunique efetivamente com uma linguagem visual: Os três
princípios da linguagem visual são organizar, economizar e
economizar. Organizar fornece ao usuário uma estrutura clara e
conceitual. Consistência, relações e navegabilidade são conceitos
importantes na organização. Economizar faz o máximo possível com
a menor quantidade de elementos visuais. Quatro ponto pontos
principais devem ser considerados: Simplicidade, clareza, distinção e
ênfase. Comunicação combina a apresentação do conteúdo com as

9
 Faculdade de Minas

capacidades do usuário. A interface deve manter um equilíbrio entre

legibilidade, tipografia, simbologia, cores e texturas de forma a
comunicar efetivamente.
9. Convenções são aliadas: A padronização dos elementos do
design de um site são úteis por reduzir a curva de aprendizado.
Seria um pesadelo de usabilidade se todos os sites tivessem uma
forma diferente de apresentar serviços comuns, como o de RSS-
feeds. Com padronização você pode ganhar a confiança do
usuário e provar a sua credibilidade. Steve Krug sugere que a
inovação é apenas bem vinda quando você sabe que tem uma
ideia realmente melhor do que as anteriores, quando não tiver, é
indicado o uso de elementos convencionados.
10. Teste antes e teste com frequência: Não teste muito tarde, nem
muito pouco e nem pelas razões erradas. É importante ressaltar
que não há como responder se uma interface é universalmente
melhor que a outra, é necessária que elas sejam analisadas por
um ponto de vista específico. Testes de usabilidade sempre
produzem bons resultados, mesmo que sejam apresentados
problemas. A detecção desses problemas se provará útil ao evitar
investimentos para corrigi-los mais tarde. Em resumo, se você
quer um ótimo site, você deve testa-lo.

Um design efetivo não precisa necessariamente ser bonito e colorido, ele deve
ser claro e intuitivo, deve atender as expectativas do usuário. Para maximizar a
exposição de um site, devem ser considerados diferentes tipos de usuários,
oferecendo diversos níveis de interação, que trarão estes usuários novamente para
dentro do site.

É importante também ter em mente que o comportamento do usuário é

composto por padrões. Entender esses padrões facilitará o trabalho. É necessária
uma boa dose de observação e pesquisa para saber o que o usuário procura e aonde
ele procura. A disciplina responsável por definir a hierarquia da informação em uma
interface é a Arquitetura de Informação, que será detalhada no item seguinte.

10
 Faculdade de Minas

PRINCÍPIOS DO DESIGN EM USER INTERFACE

Antes de falarmos sobre princípios de design é importante esclarecermos

basicamente quais são os elementos do design. Estes são componentes que na
estrutura do design podem transportar uma ampla variedade de mensagens e os
detalhes podem ser diferenciados por pesquisadores como sendo:

PRINCÍPIOS DO DESIGN

De uma maneira simples, isso seria como cozinhar um bolo. Você tem todos
os ingredientes na mão (elementos do design) e os Princípios do Design seriam como
a receita desse bolo. Então misturar a quantidade certa de ingredientes e deixar no
forno durante o tempo aconselhável garantirá um bolo mais gostoso.

Esses princípios são basicamente: Eixo, Simetria, Hierarquia e Ritmo. São eles
quem criarão um posicionamento estético dos elementos e que irão produzir um bom
design.

Eixo

Este elemento pode ser representado como uma linha imaginária responsável
pela divisão de um corpo em segmentos proporcionais, simétricos e de mesmo peso.
Dentro do design este é o princípio mais básico e comum para a organização de
elementos. Nos diagramas, o eixo é identificado como uma linha vermelha.

Alinhamento

11
 Faculdade de Minas

O alinhamento entre eixos é uma necessidade indiscutível para o equilíbrio

visual. Trata-se basicamente em utilizar o eixo dos elementos para dispor em linha
reta.

Um exemplo simples de eixo alinhado é a lista de álbuns de fotos do iPhone.

Nele, um eixo vertical alinha capas de álbuns no lado esquerdo da tela.

Reforçar

O eixo também pode ser usado para reforçar a divisão de elementos, apesar
do eixo ser uma linha imaginária, você pode torná-lo mais aparente se as bordas dos
itens estão bem definidas.

Um exemplo disso em UI é a linha do tempo no News app do iPhone. Nele, um

eixo vertical ajuda a separar uma coluna de fotos entre uma de conteúdo.

12
 Faculdade de Minas

Movimento

Além de alinhamento o eixo também exerce o conceito de movimento

representando uma linha reta seguindo em alguma direção.

A direção do movimento depende dos pontos iniciais ou finais que seguem a

dimensão que irão percorrer.

Um eixo que incentiva movimento é a onda de música no aplicativo

SoundCloud. Nele você reconhece o eixo na onda com sentido da esquerda para
direita e naturalmente move o controle até chegar ao final da canção.

13
 Faculdade de Minas

Continuidade

Se um ponto final é indefinido, você vai seguir o movimento do eixo até chegar
a algo de interesse ou, caso não encontrar nada, seu ponto final será gerado por
desinteresse na continuação do movimento de busca.

Um exemplo de deslocamento infinito é a principal alimentação no app

Instagram. O eixo vertical começa na parte superior do ecrã e continua para baixo
sem nenhum ponto final. Isso incentiva você a rolar a página para baixo enquanto
você estiver interessado em ver mais fotos.

Simetria

É quando os elementos são dispostos da mesma maneira em ambos os lados

de um eixo.

Equilíbrio

A simetria de objetos proporciona visualmente equilíbrio, estabilidade e,

consequentemente, harmonia.

Um exemplo de simetria é o arranjo das categorias de música no app Spotify.

Os elementos em ambos os lados da tela têm o mesmo formato, facilitando a leitura
de cima para baixo.

14
 Faculdade de Minas

Assimetria

Uma disposição assimétrica é identificada pela formação de elementos

diferentes em ambos os lados do eixo, Se a assimetria for mal construída poderá
proporcionar visualmente a sensação de desconforto e desequilíbrio. Um design
assimétrico é o feed no app Pinterest. Embora as colunas da esquerda e da direita
tem a mesma proporção. A altura dos elementos variam dependendo da informação
de cada um deles. As variações dificultam deslizar da esquerda para direita e gera a
leitura em Z e isso retarda o tempo de leitura.

15
 Faculdade de Minas

Hierarquia

Hierarquia é a ordem que existe de forma a priorizar um elemento dentre outros

no design.

Tamanho

A diferença de tamanho é um dos elementos mais fortes da hierarquia. Nós

naturalmente olhamos primeiro para o maior elemento visível.

Um exemplo de hierarquia por tamanho é a lista NOTES no app Evernote. A

seção NOTES se destaca no centro com uma dimensão maior. Devido ao seu
tamanho ele chama a nossa atenção em primeiro lugar.

Forma

A diferença dos formatos também gera a hierarquia visual e sempre direciona

o olhar para aquele elemento que possui uma forma diferenciada.

Um exemplo de hierarquia por forma é a página de perfil no aplicativo

Instagram. A imagem de perfil circular é distintamente diferente dos outros elementos
formados por quadrados, que nos faz reconhecer a imagem de perfil como algo único
e mais importante.

16
 Faculdade de Minas

Posição

Outro fator importante para a hierarquia é a posição dos elementos. Temos

como exemplo o perfil no app do Facebook que é composto por um quadrado no
centro e tem o nível de importância maior que os outros elementos no design.

Ritmo

O ritmo é o movimento criado por um padrão repetido de formas.

Padrão

17
 Faculdade de Minas

O padrão de formas contínuas servem para definir uma unidade e a partir disso
gera referência para outras normas. Isso é importante para o design pois facilita ao
usuário familiarizar-se com os elementos e saber como interagir com eles.

Um exemplo de ritmo é a forma usada no Top Charts da App Store. Nesta área
cada item é exibido com uma imagem, preço e outras informações. Ao percorrer a
tela, você começa a se familiarizar-se com o ritmo e sabe exatamente onde procurar
elementos no padrão.

Quebras

A quebra do padrão se destaca pois, consequentemente, proporciona o

choque visual com algo diferente ao que você estava familiarizado, estabelecendo
mais atenção a esse elemento distinto.

No aplicativo do Twitter, o feed do perfil tem um ritmo e é dividido por uma

seção com sugestões de pessoas para seguir. Esta ruptura parece mais hierárquica
e é uma boa maneira de chamar a sua atenção.

18
 Faculdade de Minas

PLANEJANDO UMA INTERFACE

Para o desenvolvimento de uma interface, são necessários vários passos para

alcançar o objetivo que é conhecer o usuário. A seguir, apresentaremos algumas
soluções práticas com enfoque prioritário nas necessidades do público-alvo e na
criação de novos produtos que atendam às expectativas do usuário.

Incorporar a usabilidade no seu processo pode reduzir os custos e tempo de

desenvolvimento e melhorar o produto final (SANTA ROSA; MORAES, 2012, p. 33).

Definição da estratégia

Fase inicial na concepção do projeto, onde irá direcionar o produto,

estabelecendo o porque da sua criação. Teixeira (2014) diz que ao contrário dos
processos mais famosos, como wireframes e sitemaps, a preocupação aqui não é

19
 Faculdade de Minas

documentar como a interface funciona, e sim embasar decisões mais abstratas sobre
a “razão de ser” do produto. Apresentaremos 3 métodos eficientes para entender o
usuário e definir a estratégia da concepção do produto.

Blueprint

Teixeira (2014, p. 18) define blueprint como: Um mapa que mostra todos os
pontos de contato entre consumidor e marca, bem como os processos internos
necessários para que essa interação aconteça. É útil para visualizar o caminho que
os consumidores percorrem em múltiplos canais (site, serviço de atendimento ao
consumidor, loja física etc.) e para identificar oportunidades de melhoria.

É um processo onde se explora diferentes opções, perguntando “o que seria

necessário para ser executado?”. Ele permite que você veja todos os elementos de
uma só vez. Posto que todos os elementos tenham sido reunidos, a estratégia é
consolidada.

Figura 1 – Blueprint.

Fonte: Introduçã0 Fabrício Teixeira (2014, p. 19).

20
 Faculdade de Minas

CONSUMER JOURNEY MAP (MAPA DA JORNADA DO

CONSUMIDOR)

Consumer Journey Map é uma interpretação visual que demonstra a jornada

do usuário em um ponto de vista individual do seu relacionamento com uma
organização, serviço, produto ou marca, ao longo do tempo e em todos os canais.

Teixeira (2014, p. 19) define como: Um diagrama que explora os múltiplos (e

algumas vezes invisíveis) passos tomados pelo consumidor à medida que eles se
engajam com o serviço. Permite que os designers definam as motivações e
necessidades do consumidor nas várias etapas da jornada, criando soluções de
design que sejam apropriadas para cada uma delas.

Figura 2 Consumer Journey Map

Fonte: Sam Flores – UI/ Interaction designer. 2016.

Personas

Uma persona é a representação de um tipo de cliente. Com objetivo de

responder a pergunta, “Para quem estamos projetando?”. E ajuda a alinhar a
estratégia e as metas para grupos específicos de usuários. De acordo com Teixeira
(2014, p. 21): Um retrato do público-alvo que destaca dados demográficos,
comportamentos, necessidades e motivações através da criação de um personagem
ficcional baseado em insights extraídos de pesquisa. Personas fazem com que os

21
 Faculdade de Minas

designers e desenvolvedores criem empatia com os consumidores durante o

processo de design.

Figura 3 – Exemplo de perfil de usuário (“persona”).

Fonte: HBOGO: UX Strategy & Redesign. 10 mai. 2016.

PRODUÇÃO DE IDEIAS

Métodos utilizados para coletar ideias de todos os membros do time,

garantindo que todos estejam alinhados em relação ao objetivo do produto.

Brainstorming

Técnica utilizada para resolver problemas, desenvolver novas ideias, estimular

a criatividade e juntar informações. Método mais eficaz quando é realizado em grupo
a fim de gerar ideias inovadoras. Pode ser feito através de softwares ou até mesmo

22
 Faculdade de Minas

com papel e caneta. “O processo coletivo de geração de ideias, sem restrições, que
respondem a determinado brief criativo. Ajuda o time a visualizar uma grande
variedade de soluções de design antes de efetivamente decidirem com qual opção
eles seguirão em frente”. (TEIXEIRA, 2014, p. 26).

Storyboards

Diferente dos storyboards resultantes de vários wireframes, este é um tipo de

história em quadrinhos, onde exibe o fluxo do usuário em forma de uma história.
Teixeira (2014, p. 27), define storyboard como: Uma espécie de história em
quadrinhos da série de ações que os consumidores tomarão enquanto estão usando
o produto. Traduzem funcionalidades de forma mais tangível, em situações reais do
dia a dia, ajudando designers a criarem empatia com o consumidor enquanto já
começam a ter uma ideia do escopo do produto.

Taxonomia

Segundo Teixeira (2014, p. 29): Uma exploração em torno das múltiplas formas
de categorizar conteúdo e informação: como as editorias em um site de notícias ou
as categorias de produtos em um e-commerce, por exemplo. Contribui para que os
designers definam a estrutura de conteúdo e rótulos que ajudarão o usuário a se
movimentar pelo site. Estabelece padrões e lógica. É como os biólogos classificam
espécies de seres vivos, por exemplo.

PLANEJAMENTO

Após obter e registrar as ideias é necessário um planejamento para executá-

las, apresentaremos alguns métodos.

Sitemap (mapa do site)

Segundo Teixeira (2014, p. 30), é “um dos métodos mais conhecidos em UX.
Consiste em um diagrama das páginas de um site organizadas hierarquicamente.

23
 Faculdade de Minas

Ajuda a visualizar a estrutura básica e a navegação entre diferentes partes do

sistema.”

Para Wodke (2003 apud Santa Rosa e Moraes, 2012, p. 82), “os mapas do site
podem assumir diversas configurações. O design de um mapa depende das
necessidades do seu projeto e da inclinação pessoal do designer.”

Existem diferentes tipos de mapas e cabe a nós decidir qual utilizar. Santa
Rosa e Moraes (2012, p. 82) apresentam alguns modelos:

● Amplo ou profundo: Amplo (muitos itens no mesmo nível) – Profundo (muitos

níveis, subníveis e sub-subníveis).

● Grande ou pequeno: Grande (muitas páginas) e pequeno (poucas páginas).

Tais formatos são representados pelos seguintes diagramas:

Figura 4 – Mapa em “árvore”.

Fonte: Santa Rosa e Moraes (2012, p. 83).

O mapa em árvore – Recomendado para apresentar a hierarquia do site,

embora seja fácil se perder no espaço horizontal.

Figura 5 – Mapa em pente.

24
 Faculdade de Minas

Fonte: Santa Rosa e Moraes (2012, p. 84).

Mapa em pente – aparência de documentos eletrônicos e mais funcional que

mapas largos.

Figura 6 – Mapa em estrela.

25
 Faculdade de Minas

Fonte: Santa Rosa e Moraes (2012, p. 85).

● Mapa em estrela – útil quando a hierarquia não é restrita e quando a

organização é mais ampla do que profunda.

Figura 7– Mapa em abas

26
 Faculdade de Minas

Fonte: Santa Rosa e Moraes (2012, p. 86).

● Mapa em abas – quando os itens não são muito hierárquicos, e sim

agrupados pelas similaridades.

Roadmap

Segundo Teixeira (2014, p. 31), É o plano de evolução do produto, com as

funcionalidades já priorizadas. Pode ser uma planilha, um diagrama ou uma série de
post-its organizados sobre um painel. Ajuda a compartilhar a visão estratégica com
o time e a enxergar o caminho necessário para se chegar até lá.

Roadmap é um plano de jogo que serve para atingir as metas do produto.

Começa com o resultado desejado de uma experiência de usuário agradável, e
contém todas as pesquisas necessárias para alcançá-lo.

Figura 8 – Roadmap

27
 Faculdade de Minas

Fonte: Getting a Plan Together: Creating a UX Roadmap for Your A-Team.

Acesso em: 10 mai. 2016.

PESQUISA E VALIDAÇÃO

Métodos utilizados para entender o usuário, saber como ele pensa e como ele
interage com o produto.

Focus group (grupo de foco)

Focus group é um “[...] método de pesquisa social empregado por volta de 1930
e que, depois de ter sido aprimorado para servir de método destinado da qualidade
de vida dos soldados durante a Segunda Guerra Mundial”. (SANTA ROSA; MORAES,
2012, p. 37).

Pode ser uma ferramenta importante no desenvolvimento do produto, mas não

deve ser a única fonte de informação do usuário. Teixeira (2014, p. 33) define focus
group como:

Um painel de discussão com vários usuários sobre determinado assunto ou

questão. Ajuda a entender os sentimentos das pessoas, suas opiniões e até a
linguagem que utilizam ao falarem sobre o produto. Útil quando o time não está muito
familiarizado com o público-alvo do produto.

28
 Faculdade de Minas

Santa Rosa e Moraes (2012, p. 38) definem que “o grupo de foco é uma
técnica/método qualitativo de captura e obtenção de dados cuja principal finalidade é
extrair de atitudes e respostas dos participantes, sentimentos, crenças e opiniões a
respeito do objeto estudado na pesquisa”. Os grupos de foco muitas vezes trazem
reações e ideias espontâneas dos usuários e permitem observar algumas dinâmicas
de grupo e questões organizacionais.

Santa Rosa e Moraes (2012, p. 40) apresentam algumas vantagens do grupo

de foco:

1. Habilidade de coletar dados em um pequeno espaço de tempo.

2. Método rápido, econômico e eficaz para obter informações.

3. A experiência de grupo geralmente é positiva para os participantes.

4. Facilita a discussão entre os participantes.

5. Alguns indivíduos preferem atividades em grupo, pois encontram apoio de

outros membros.

6. Os membros do grupo têm a possibilidade de ouvir diferentes pontos de

vista.

7. Alta validade dos dados – os procedimentos do grupo de foco permitem

medir ou conhecer efetivamente o que se deseja, em virtude da legitimidade dos
dados coletados.

8. Baixo custo em relação a outros métodos.

No desenvolvimento de sistemas interativos, o papel do grupo de foco não é

avaliar interações, usabilidade ou design, mas para descobrir o que os usuários
esperam do sistema.

O baixo-custo e o número de indivíduos reduzidos fazem deste método

lucrativo e proveitoso.

Figura 14 – Sessão de Focus Group.

29
 Faculdade de Minas

Teste de usabilidade

O teste de usabilidade é a única maneira experimentada e testada para

encontrar e corrigir problemas de experiência do usuário com seu protótipo interativo
ou produto já existente. Ótima forma de identificar se o protótipo irá satisfazer as
expectativas dos usuários.

Segundo Travis (2003 apud Santa Rosa e Moraes, 2012, p. 146), “os testes de
usabilidade têm suas raízes na psicologia experimental, na qual se pede aos
participantes que executem uma ou mais tarefas bem determinadas, e se faz uma
análise estatística dos resultados”.

De acordo com Krug (2001, p. 141), “num teste de navegabilidade, mostra-se

ao usuário uma coisa de cada vez (seja um site, o protótipo de um site ou alguns
esboços de páginas individuais) e pede-se que ele (a) descubra o que a coisa é, ou
(b) tente usá-la numa tarefa típica”.

“O objetivo principal de um teste de usabilidade é melhorar a facilidade de uso

de um produto. Utilizando testes de usabilidade, a equipe de desenvolvimento pode
saber imediatamente se as pessoas compreendem o design como se suporia que
entendessem”. (SANTA ROSA; MORAES, 2012, p. 147). Não se pode fazer design
centrado no usuário, sem envolver os usuários. Com dados valiosos, ajuda no
desenvolvimento e aumenta o nível de aprovação do produto final.

Card sorting

Card sorting é um método usado para auxiliar a projetar ou avaliar a arquitetura

da informação de uma interface gráfica. Segundo Santa Rosa e Moraes (2012, p. 64),
“a análise de sorting vem sendo utilizada, há muito tempo, nas ciências sociais para
auxiliar os pesquisadores na coleta de dados que os levam a melhor compreensão
do que as pessoas pensam sobre conceitos”.

De acordo com Teixeira (2014, p. 35), “o card sorting é uma técnica que
consiste em pedir aos usuários que agrupem conteúdos e funcionalidades em
categorias. Dá inputs valiosos ao time sobre hierarquia de conteúdo, organização e
taxonomia”. Este método vai ajudar você a entender as expectativas e compreender

30
 Faculdade de Minas

seus usuários. Muitas vezes, é recomendado que antes faça um estudo sobre seu
usuário e o conteúdo abordado.

Santa Rosa e Moraes (2012, p. 65) apresentam alguns objetivos desta técnica:

● Perceber como cada perfil de usuário pode acessar um determinado

conteúdo.

● Perceber como diferentes públicos-alvo agrupam conteúdos, possibilitando

que sejam criadas estruturas de organização de informações mais adequadas.

● Identificar a terminologia mais fácil de ser compreendida pelo usuário.

● Perceber como diferentes públicos-alvo categorizam o conteúdo.

● Identificar os itens difíceis de classificar.

● Identificar as informações que possam pertencer a mais de um grupo

(Simples, 2005 apud Santa Rosa e Moraes, 2012, p. 65).

Os usuários são convidados a organizar tópicos referentes ao conteúdo do

produto em grupos que fazem sentido para eles, nomeiam cada grupo como
desejarem e descrevem o conteúdo.

Avaliação heurística

Termo cunhado em 1990 por Jackob Nielsen e Molich, como um método de

inspeção para encontrar determinados tipos de problemas em uma interface do
usuário. (SANTA ROSA; MORAES, 2012, p. 98).

Conjunto de avaliadores especialistas em experiência do usuário utilizam o

produto em teste para identificar problemas de usabilidade que precisam ser
corrigidos para uma experiência mais agradável. Os examinadores avaliam a
interface a partir de princípios de usabilidade (as “heurísticas”). Quanto mais
avaliadores envolvidos, mais problemas podem ser encontrados.

31
 Faculdade de Minas

Princípios heurísticos de Nielsen e Molich

A seguir apresentaremos as 10 heurísticas de Nielsen e Molich (1990 apud

Santa Rosa e Moraes 2012, p. 107) que também podem servir como base para
nortear as avaliações heurísticas:

1. Visibilidade do status do sistema O sistema precisa manter os usuários

informados sobre tudo o que acontece por meio de feedback em tempo adequado
[...].

2. Equivalência entre o sistema e o mundo real Deve-se utilizar terminologia

familiar ao usuário, e não termos específicos de processamento de dados ou do
sistema em questão. A instrução deve aparecer de forma lógica e natural, que faça
sentido para o usuário.

3. Controle do usuário e liberdade O sistema deve apresentar um certo grau

de liberdade, permitindo que o usuário possa fazer escolhas e sair de situações
inesperadas, como por exemplo, engano do usuário ou erros do sistema.

4. Consistência e padrões Usuários não devem se preocupar em reconhecer

quando diferentes palavras, situações e/ou ações indicam a mesma coisa.

5. Prevenção de erros Melhor do que boas mensagens de erro é o foco nas

etapas de projeto para que o erro seja evitado.

6. Reconhecimento em ver de memorização Devem-se tornar visíveis objetos,

ações e opções. O usuário não deve ter que se lembrar de informações de uma parte
para outra do diálogo. Instruções para uso do sistema devem estar visíveis e, quando
necessário, facilmente recuperáveis.

7. Flexibilidade e eficiência de uso Aceleradores de tarefas, como teclas de

atalho, comandos escritos, por fala, podem não ser visualizados pelos novatos, mas
podem aumentar a velocidade de interação entre usuários experientes e o sistema.
Isso faz com que o sistema possa atender tanto aos usuários experientes, quanto aos
novatos.

8. Estética e design minimalista Devem ser apresentadas apenas informações

que o usuário necessitar, excluindo as irrelevantes ou raramente necessárias, pois

32
 Faculdade de Minas

qualquer unidade de informação extra no dialogo competirá com unidades relevantes

de informação e diminuirá sua visibilidade relativa.

9. Ajudar os usuários a reconhecer, diagnosticar e recuperar ações erradas

Mensagens de erro devem ser expressas em linguagem clara (sem códigos),
indicando precisamente o problema e sugerindo construtivamente uma solução.

10. Help e documentação Mesmo sendo melhor que o sistema possa ser usado
sem documentação, é necessário porver help e documentação. Essas informações
devem ser de fácil busca e acesso, focalizadas na tarefa do usuário, organizadas
como passos concretos para a realização da tarefa em questão e não devem ser
muito longas.

DESIGN DE INTERFACES: SKETCHES

Qualquer superfície se torna um bloco de notas para anotar ideias rá[Link]

desenhos são pessoais, portanto não é necessário nada agradável visualmente,
serve apenas para colocar esboços e ideias. Segundo Teixeira (2014, p. 36), “sketch
é uma forma rápida de rabiscar uma nova interface usando papel e caneta. Sketches
podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de
design com os outros membros da equipe e com usuários”.

Figura 9 – Skecthes.

33
 Faculdade de Minas

Fonte: Fabrício Teixeira (2014, p. 37).

WIREFRAMES

Um wireframe é a representação visual de uma interface de usuário,

desprovido de qualquer design visual. Ele é usado por UX designers para definir a
hierarquia dos itens e definir o que os itens nessa página devem comunicar baseado
nas necessidades do usuário.

Conforme Teixeira (2014, p. 37), wireframe é

Um guia visual que representa a estrutura da página, bem como sua hierarquia e os
principais elementos que a compõem. Útil para discutir ideias com o time e com os
clientes, e também para informar o trabalho dos diretores de arte e desenvolvedores.

Figura 10 – Wireframe.

34
 Faculdade de Minas

Fonte: Benefits of Using Wire-Frames, 2016.

PROTÓTIPOS

Protótipo é uma simulação do produto final. É como uma maquete interativa

que pode ter qualquer grau de fidelidade. O principal objetivo da construção de
protótipos é testar se o fluxo do produto é agradável e coerente.

Rogers, Sharp e Preece (2013, p. 390), definem protótipo:

Um protótipo é uma manifestação de um design que permite aos stakeholders

interagirem com ele explorarem sua adequação [...] um protótipo pode ser qualquer
coisa desde um storyboard à base de papel até uma peça complexa de software,
desde uma maquete (mockup7 ) de papelão até uma peça de metal moldada ou
comprimida [...].

Segundo Kalbach (2009, p. 218), “é mais fácil modificar um protótipo do que

um site web final”. Protótipos podem fornecer grande quantidade de conhecimentos

35
 Faculdade de Minas

sobre a interação do usuário em vários níveis. Eles nos permitem testar a viabilidade
e usabilidade do projeto antes mesmo de escrever o código. Descobertas inesperadas
e inovações ocorrem neste processo.

PATTERN LIBRARY (BIBLIOTECA DE PADRÕES)

Importante para a relação do designer de interface e o desenvolvedor para

manter um produto consistente. Teixeira (2014, p. 38) define:

Uma lista prática com exemplos (e às vezes código) dos padrões de interação
que serão usados em todo o site. Não só ajuda a manter o design consistente em
diferentes telas, mas também facilita a vida dos desenvolvedores na hora de
implementar os elementos.

Garantir uma interface consistente e de fácil manutenção visual são duas das
maiores dores de cabeça enfrentadas por grandes organizações. Felizmente a
biblioteca de padrões pode ajudar.

Figura 11 – Biblioteca de padrões.

Fonte: UI Pattern Sheet, 2016.

36
 Faculdade de Minas

REFERENCIAS

AGNI, E. (04 de Julho de 2012). As disciplinas da Experiência do Usuário. Acesso em

16 de Março de 2016, disponível em [Link]: [Link]
experience/as-disciplinas-da-experiencia-dousuario/

DUARTE, J., & BARROS, A. (2005). Métodos e técnicas de pesquisa em

comunicação. São Paulo: Editora Atlas S.A.

INEP - Instituto Nacional de Estudos e Pesquisas Educacionais Anísio Teixeira.

(2016). Thesaurus Brasileiro da Educação. Acesso em 20 de Maio de 2016,
disponível em INEP: [Link]

JOHNSON, S. (2001). Cultura da interface: Como o computador transforma nossa

maneira de criar e comunicar. (M. L. A. Borges, Trans.) Rio de Janeiro: Jorge Zahar
Editor.

KALBACH, J. (2009). Design de navegação web [recurso eletrônico]: Otimizando

a experiência do usuário. Porto Alegre: Bookman Editora.

KANAOKA, R. (21 de Outubro de 2014). Diagrama Honeycomb – Facetas do User

Experience. Acesso em 15 de Março de 2016, disponível em SAMURAI UX:
[Link]
honeycomb/

KRUG, S. (2001). Não me faça pensar. (R. M. Santos, Trans.) São Paulo: Market
Books.

MEMÓRIA, F. (2005). Design para internet: projetando a experiência perfeita. Rio

de Janeiro: Elsevier Editora.

MORVILLE, P. (21 de Junho de 2004). User Experience Design. Acesso em 15 de

Março de 2016, disponível em Semantic Studios:
[Link]

NIELSEN, J., & LORANGER, H. (2007). Usabilidade na web. (E. Furmankiewicz, &
C. Schafranki, Trans.) Rio de Janeiro: Elsevier Editora.

SANTA ROSA, J. G., & MORAES, A. (2012). Avaliação e projeto no design de

interfaces (1 ed.). Teresópolis, Rio de Janeiro: 2AB Editora.

37
 Faculdade de Minas

SHARP, H., ROGERS, Y., & Preece, J. (2013). Design de interação [recurso
eletrônico]: Além da interação humano-computador (3ª Ediçao ed.). (I. Gasparini,
Trans.) Porto Alegre: Bookman Editora.

SOUZA, R. (2016). O que é UX Design? Acesso em 28 de Abril de 2016, disponível

em RAFFCOM: [Link]

TEIXEIRA, F. (2014). Introdução e boas práticas em UX Design [recurso

eletrônico]. Vila Mariana, São Paulo: Casa do Código.

TEIXEIRA, F. (2016). O que é Arquitetura de Informação? Acesso em 10 de Abril

de 2016, disponível em Blog de AI: [Link]
links-cursos-eventos-dearquitetura-de-informacao/

TRISTÃO, M. (23 de Agosto de 2002). A Arquitetura de Informação Segundo Lou

e Peter. Acesso em 25 de Abril de 2016, disponível em DocSlide:
[Link]
[Link]

38