Académique Documents
Professionnel Documents
Culture Documents
UX DESIGN E
LEARNING EXPERIENCE
2
WWW.DESENHOINSTRUCIONAL.COM
Copyright 2007. IDI. Todos os Direitos Reservados.
Disciplina 1
INTRODUÇÃO AO UX DESIGN
OBJETIVOS DA DISCIPLINA:
CONTEÚDOS ABORDADOS:
• Introdução ao UX Design
• Princípios De Design Relacionados à Experiência Do Usuário
• UX Design Aplicado ao Design Instrucional
• Metodologias Lean UX e Agile UX
Introdução ao UX Design e
Experiência do Usuário
Nesta disciplina, iremos entender, profundamente, o que de fato é UX Design,
Definição de UX Design
Nessas duas definições, podemos perceber que o que é dito como experiência
do usuário com um produto, vai além da interação imediata com a interface do
produto (a parte visual do produto). A experiência do usuário engloba todas as
relações que se têm com o produto, desde o momento em que se observa ou
se tem conhecimento da existência dele, passando pelo uso do produto de
fato, pelo pensamento do usuário sobre o produto, a sua manutenção até o
momento em que se se desfaz dele.
Várias disciplinas são relacionadas à UX, como design de identidade visual, de-
sign de interface, design de produto, design de interação, design de informa-
ção, design de serviços e a arquitetura de informação.
Para que consigamos projetar um produto que ofereça uma boa experiência de
uso, antes precisamos realizar bastante pesquisa e fazer um bom planejamento
para que possamos descobrir o que de fato o produto precisa, principalmente
em termos das necessidades das pessoas que irão utilizar o produto.
Por exemplo, um site pode ter várias personas, e cada persona pode e deve ter
diferentes origens, personalidades, necessidades e objetivos específicos. Elas
são muito úteis porque permite segmentarmos o público e descobrirmos o que
precisamos fazer para fornecer a melhor experiência possível que permita
cumprirmos os objetivos e se envolver com o produto. E isso tem um enorme
impacto no negócio como um todo.
UX NÃO É UI
Figura 1: O planejamento da UX gera economia para o negócio.
A estética por si só – ou partes que compõem o aspecto visual – não vai nos
proporcionar a facilidade de uso que os usuários esperam. O UX Design é so-
bre como algo parece, sente e funciona, desde a primeira intenção do usuário
com o produto até a última interação com o mesmo.
Em vez de ser apenas uma etapa no processo de design, o UX Design deve ser
iterativo e contínuo. O processo de melhoria do design nunca deve parar. De-
11
12
Mesmo que projetemos sempre com o usuário em mente, tendo ele como o
ponto mais importante do projeto, o UX Design também deve atender às me-
tas e objetivos do negócio. Porque, se o negócio não funciona e não se susten-
ta (em todos os aspectos), o produto também acaba por falhar.
UX NÃO É CARO
14
pois que um produto já esteja sendo desenvolvido (ou já foi produzido), é mui-
to arriscado.
15
De acordo com o Grupo Nielsen Norman (2008), existem quatro níveis de expe-
riência do usuário:
• Utilidade
• Usabilidade
• “Desejabilidade”
• Experiência da Marca
Os dois níveis que o designer tem mais controle são a usabilidade e “desejabi-
lidade”. Antes de falarmos sobre esses dois termos, vermos sobre cada um dos
níveis. Então, depois examinamos porque a diferença entre usabilidade e “de-
sejabilidade” é importante.
UTILIDADE
16
USABILIDADE
17
A experiência do usuário não é somente uma boa usabilidade, mesmo que ela
seja essencial. O usuário espera mais de uma experiência de usuário e produ-
tos que vão além da fase de usabilidade. E é esse tipo de produto que se des-
taca no mercado e ganha mais espaço entre a concorrência.
“DESEJABILIDADE”
Pense em carros, por exemplo. Um Fiat Uno e um BMW podem ter utilidade e
ser utilizáveis (em termos de usabilidade), mas há uma grande diferença em
seus desejos pelos usuários. Geralmente, as pessoas desejam mais ter um
BMW do que um Fiat Uno, mesmo que o Uno seja um excelente carro e seja
até mais econômico e custo mais baixo.
EXPERIÊNCIA DA MARCA
18
Isso pode explicar porque a Microsoft teve um período tão difícil de implemen-
tar no mercado de hardware, uma área na qual a Apple, por exemplo, destaca-
se bastante.
USABILIDADE E “DESEJABILIDADE”
Como designers, temos uma grande influência sobre essas duas áreas da expe-
riência do usuário: a usabilidade e a “desejabilidade”. A principal diferença
entre as duas áreas é que a usabilidade é um requisito essencial, já que não
existe boa experiência do usuário sem uma boa usabilidade. Já a “desejabili-
dade” difere um produto que pode ser meramente usado para um que as pes-
soas realmente desejam comprar e usar várias vezes.
19
Benefícios do UX Design
O UX Design pode trazer inúmeros benefícios, tanto para o usuário quanto pa-
ra os negócios. Veremos a seguir alguns desses benefícios.
Com UX Design temos menos retoque no produto final, já que, durante o pro-
cesso de planejamento e desenvolvimento do produto, o designer coloca o
usuário como centro do projeto, com pesquisas, estudos das necessidades de-
les, testes de usabilidade (entre outros). Desta forma, é natural que o produto
precise de menos retoque após estar desenvolvido e lançado. Através do pro-
cesso de UX Design, o produto já foi validado e testado efetivamente antes
mesmo de seu lançamento. Essa abordagem é mais barata e mais fácil de cor-
rigir os erros dos produtos, já que a maior parte dos problemas é corrigida du-
20
Com um bom UX Design, o produto acaba sendo menos arriscado para a repu-
tação do negócio. Para entender essa afirmação, pense na situação oposta: se
uma empresa lança um produto com problemas de usabilidade e uma péssima
experiência do usuário, é natural que você pense que essa empresa não é tão
boa. Logo, a reputação da empresa é arruinada. Então, podemos dizer que UX
é também uma medida de qualidade.
que você deve saber o que a concorrência está fazendo e como o seu produto
será consideravelmente melhor que o dela. Uma das etapas importantes do UX
Além disso, também temos a questão da própria experiência das pessoas que
irão utilizar o produto desenvolvido. A satisfação do usuário será muito maior
quando o produto for projetado para uma boa experiência do usuário. Se a UX
para um produto for boa, teremos usuários satisfeitos, o que também irá redu-
zir o peso sobre as equipes de suporte e os serviços ao cliente. UX Design
sempre é um bom investimento.
22
O UX Designer
Neste capítulo iremos entender quem é o profissional que trabalha com UX
Esse profissional pode ser intitulado como UX Designer, User Experience De-
23
O papel do UX Designer
Figura 2: Algumas das áreas cobertas pela User Experience (Experiência do Usuário).
24
Porém, é difícil que o UX Designer seja responsável por tudo que impacta na
experiência do usuário.
Tenha sempre em mente que o UX Design é uma cultura e estratégia que deve
ser compartilhada por todos envolvidos no desenvolvimento de um produto.
25
26
DEFINIÇÃO DO PROBLEMA
A importância de saber o que se está fazendo e porque está fazendo algo não
pode ser ignorada. Se não temos isso como uma importante preocupação, po-
demos acabar por ter projetos que comecem sem uma compreensão clara do
problema ou mesmo sem saber conseguimos atingir o sucesso esperado. Além
trabalhar para proporcionar uma boa experiência de uso, é crucial que o desig-
ner entenda a estratégia e objetivos do negócio em si.
Supomos que você esteja trabalhando para uma empresa que entende os be-
nefícios de proporcionar uma boa experiência de usuário para seus usuários.
Para começar, você quer ter certeza de que entende os objetivos conforme
eles se aplicam ao projeto. A empresa está tentando aumentar sua base de
usuários? Reposicionar seu produto? Aumentar a receita, os lucros? A empresa
deve ter uma ideia clara do que eles querem fazer e por que eles querem fazer
isso. E, depois de você entender realmente esses motivos, então pode come-
çar a procurar algumas oportunidades para alcançar os objetivos, ao passo que
ajuda o usuário.
27
São essas oportunidades que definem o problema que estamos tentando re-
solver. Iremos saber que definimos o problema quando pudermos explicar cla-
ramente porque estamos resolvendo e o que esperamos alcançar.
PESQUISA
Em um projeto no mundo real, com prazos curtos, com várias equipes e profis-
sionais, com um mercado que muda constantemente, geralmente ocorre uma
sobreposição entre as fases do processo de UX. Por exemplo, na prática, é
possível que você realize algumas pesquisas enquanto está trabalhando na de-
finição do problema, que deve ser solucionado com design. Entretanto, nesta
etapa de pesquisa, é importante nos concentrar em entender para quem esta-
28
Portanto, veremos três tipos de pesquisa que um designer pode realizar. Para
este estudo, iremos chamá-las de pesquisa dedutiva, interrogativa e experi-
mental. Porém, esses nomes não são um padrão. Usaremos aqui somente para
facilitar o entendimento.
PESQUISA DEDUTIVA
Com a pesquisa dedutiva, o designer irá lidar com tudo o que pode aprender
sem falar diretamente com usuários e stakeholders. Neste tipo de pesquisa, o
designer deseja procurar informações que permitam inferir uma provável con-
clusão. Por exemplo, você poderia realizar uma análise da concorrência (ben-
chmarking) para verificar como as outras instituições estão trabalhando e solu-
cionando os problemas dos seus usuários (alunos), e quais tipos de sucessos
(e.g., bom rendimento, boas notas, satisfação do aluno etc.) e falhas (e.g., eva-
são, reclamação, notas ruins etc.) elas estão tendo.
PESQUISA INTERROGATIVA
29
Esta é uma forma de pesquisa bastante útil, pois permite que conversemos di-
retamente com os usuários e os stakeholders, em vez de supor o que eles pen-
sam (desejos, necessidades, costumes etc.) – Como acontece de certa forma na
Pesquisa Dedutiva.
Para atender um número maior de pessoas, pode-se realizar uma pesquisa on-
line, por exemplo, através de ferramentas gratuitas como o Google Forms, site
onde é possível criar surveys ou questionários online para atingir um número
grande de respondentes.
Então, para mergulhar mais fundo e entender por que os alunos se sentem
dessa forma, poderíamos realizar entrevistas ou trabalhar com um laboratório
de usabilidade, onde podemos assistir aos usuários tentarem completar uma
tarefa (dentro do sistema), e depois perguntar por que eles fizeram as escolhas
que fizeram.
Essas atividades irão nos ajudar a alcançar uma compreensão mais profunda, o
que nos permitirá descobrir os motivos por trás das ações dos usuários ou das
opiniões deles. Somente assim conseguiremos projetar algo que realmente
funcione, baseado nas observações dos usuários reais.
PESQUISA EXPERIMENTAL
Uma das formas mais conhecidas de pesquisa experimental é o teste A/B, onde
basicamente dividimos um grande número de usuários em duas partes iguais e
30
Existem ferramentas, por exemplo, que nos permitem assistir ao vídeo comple-
to de usuários utilizando o produto (e.g., site, aplicativo, software etc.) e então
conseguimos verificar pontos como rage clicks (cliques de raiva), que ocorre
quando os usuários clicam repetidamente em algo para tentar fazer funcionar,
“de raiva”. Eles podem mostrar como seus usuários realmente estão utilizando
seu produto, o que pode ser bastante importante para o entendimento dos
usuários e suas frustrações.
Talvez, nenhuma dessas técnicas nos dê uma visão completa, mas quando utili-
zadas juntas, podem nos ajudar a entender o que os usuários querem e por
que eles querem. Assim, poderemos confirmar a hipótese e passarmos para a
próxima fase, a parte do design da interface propriamente.
DESIGN
Não existe um caminho pronto para esta fase do projeto. A maioria das solu-
ções são apenas reações óbvias a problemas bem definidos. Então, é preciso
começar esta fase com uma hipótese, insights e, pelo menos, algumas ideias
sobre como irá atingir seus objetivos, que foram definidos no início do projeto.
31
Muitas pessoas tentam começar esta etapa sem fazer o trabalho que vem an-
tes, e provavelmente muito problema surge por conta disso. Como conseguirí-
amos solucionar um problema que não sabemos de fato o motivo, ou nem
mesmo sabemos se esse problema é um problema real do usuário de verdade?
O designer não deve trabalhar com suposições, mas com dados. É um profissi-
onal que pesquisa, descobre o problema, tem ideias criativas para solucionar o
problema e materializar a solução em algo palpável, prático, real, como um si-
te, um aplicativo, ou qualquer outro produto.
Como cada profissional sintetiza todo esse design é uma decisão particular.
Cada designer pode solucionar um mesmo problema de maneiras distintas. E
algumas soluções podem ser melhores que as outras.
Por exemplo, se você é visual por natureza, você pode começar desenhando
suas ideias em um bloco de esboço. Se você gosta de escrever e expressar su-
as ideias com palavras, você pode começar listando os requisitos para sua solu-
ção ou descrever os recursos em forma de uma história (User Stories).
32
VALIDAÇÃO
Para isso, o primeiro a se fazer é definir é o grau de fidelidade que o teste pre-
cisa para funcionar de maneira adequada, de forma a não ter a experiência e os
resultados prejudicados por conta de um protótipo mal executado. É necessá-
rio decidir se irá utilizar um protótipo de baixa ou alta fidelidade, que iremos
entender posteriormente.
Na prática, temos três opções: criar um protótipo, criar um MVP (Produto Mí-
nimo Viável) ou uma compilação completa de um produto de fato desenvolvido
(um site desenvolvido, um aplicativo desenvolvido etc.).
PROTÓTIPO
Um protótipo é algo que pode ser rapidamente construído e testado, mas que
não tem a exata fidelidade do produto acabado, o qual ele representa. Um
protótipo não necessariamente precisa ter exatamente a mesma aparência com
o produto finalizado, em termos visuais, em seus mínimos detalhes.
Poderíamos dizer que o MVP está entre o protótipo e o produto final. Não é
tão rústico quanto um protótipo, mas também não é um produto finalizado,
que demorou meses para ser desenvolvido. A ideia aqui é testar o produto sem
perder tempo e dinheiro.
34
PRODUTO COMPLETO
Uma outra opção para validarmos um produto poderia ser criar e lançar um
recurso completo ou o produto já desenvolvido, e só depois testá-lo. Muitas
vezes também chamados de versões beta, as quais irão sofrer alterações por
estarem ainda em processo de evolução.
O designer precisa escolher com qual dessas formas irá trabalhar. Porém, tenha
sempre em mente que testar os seus designs é essencial para o sucesso de um
produto. Somente os usuários reais (e não suas hipóteses ainda não testadas)
irão te dizer se o produto soluciona os problemas deles, de fato, e da melhor
maneira possível.
35
36
Atrito cognitivo
Por exemplo, softwares como Microsoft Word e Excel utilizam um ícone disque-
te para simbolizar o botão de salvar os arquivos (Figura 3).
Figura 3: Interface do software Microsoft Word, mostrando o ícone de salvar o arquivo.
37
O atrito cognitivo acontece quando essas sugestões do mundo real não cor-
respondem às expectativas dos usuários. Aprender a evitar o atrito cognitivo no
design de interface do usuário pode ajudarmos a melhorar a experiência do
usuário dos produtos.
Alan Cooper, no livro “The Inmates Are Running the Asylum” (1999), fala sobre
o conceito de artigo cognitivo. Cooper diz que o atrito cognitivo acontece
quando um usuário é confrontado com uma interface ou acessibilidade que
parece ser intuitiva, mas oferece resultados inesperados.
É natural pensarmos que se trata de uma daquelas portas que precisamos pu-
xar para abrir, mas, na realidade, essa porta é daquelas que precisamos deslizá-
la para o lado.
Neste caso, podemos dizer que houve um atrito cognitivo ao tentarmos puxar
a porta para abrir. Pensamos que ela funcionava de um jeito, mas na verdade
funciona de outra maneira inesperada.
38
Figura 4: Exemplo de atrito cognitivo, onde a pessoa pode tentar puxar a porta para abrir, porém a porta abre-se
somente ao deslizá-la para o lado.
39
• Conduza as entrevistas dos usuários para saber como seus usuários es-
peram realizar a tarefa com o produto. Faça perguntas especificamente
relacionadas à interface durante a prototipagem e esboço;
• Crie bons fluxos de tarefas. Se pode criar o fluxo de tarefa mais simples
possível com o maior grau de automação, é provável que se consiga mi-
nimizar as vezes em que acontecem o atrito cognitivo. Por exemplo, em
vez de colocar uma maçaneta para o usuário abrir a porta do shopping,
faça ela automática; quando a pessoa for entrar, a porta se abre sozinha.
Automático e fácil;
• Crie arquitetura de informação fácil de usar. Quanto mais simples for a
arquitetura da informação, menos frequentemente um usuário vai se
perder ou vai confundir ao interagir com o produto.
40
41
Princípio de Affordance
O princípio de affordance foi proposto por James J. Gibson (1977; 1979) como
parte de sua abordagem ecológica da percepção visual, onde basicamente
define como “as propriedades acionáveis entre o mundo e um ator (usuário)”.
A palavra da língua inglesa affordance não tem uma tradução direta para a lín-
gua portuguesa, porém, basicamente, affordance é a capacidade de um ele-
mento físico ou virtual expressar seu uso de forma intuitiva.
Todo bom design tem affordance e isso quer dizer que a forma de um produto
bem projetado reflete na sua função, no seu propósito.
A maçaneta redonda não informa visualmente qual sentido que devemos girá-
la, mas se a maçaneta tiver um formato de haste o atributo de uso é ativado em
nossa mente e conseguimos prever qual é a direção para empurrar, mesmo
que irracionalmente.
Sliders devem parecer com sliders e o usuário deve naturalmente perceber que
eles são deslizáveis; os botões devem se parecer com botões e devemos en-
42
xergar que podemos clicar neles; as abas devem se parecer com abas, e qual-
quer outro elemento interativo deve ter essa característica de affordance, a
qual identifica o quão intuitivo é o seu uso, de forma natural e rápida.
43
Princípio de Learnability
Figura 5: Torradeira com melhor learnability por possuir funções simplificadas.
44
Figura 6: Torradeira com inúmeras funcionalidades e learnability reduzida.
Qual dessas torradeiras possui uma melhor learnability? Ou seja, uma capaci-
dade de fazer com que o usuário precise aprender menos e mais rápido para
usar a torradeira?
Designs com boa learnability também ajudam a reduzir os erros, já que o usuá-
rio se torna mais informado sobre o que ele deve fazer para completar alguma
tarefa.
45
Princípio de Mapeamento
Figura 7: Vending machines com diferentes interfaces e mapeamentos.
46
É improvável que esses erros ocorram com a segunda vending machine, pois
os usuários simplesmente precisam decidir qual produto quer comprar e aper-
tar o botão na frente dele – princípio da Proximidade da Gestalt. O botão está
perto da imagem do produto, então o usuário tem certeza de que o botão irá
fazer com que a máquina selecione o produto para ele automaticamente. Esta
é uma forma de mapeamento direto, porque cada botão de imagem é usado
para um produto específico.
Um outro exemplo muito simples de mapeamento direto pode ser visto quan-
do você acende a luz tocando em uma lâmpada sensível ao toque (Figura 8). Por
outro lado, temos mapeamento indireto quando você acende as luzes aper-
tando um interruptor (Figura 9).
Os dois projetos têm suas vantagens. Porém, o mapeamento direto traz mais
benefícios e facilidade de uso.
47
Figura 8: Acendimento de luz com mapeamento direto.
Figura 9: Acendimento de luz com mapeamento indireto.
48
UX Design aplicado ao
Design Instrucional
Com base nos fundamentos do Design de Experiência do Usuário – processo
online?
trucional, entendendo quais são os pontos chave para que tenhamos produtos
49
Com foco no Design Instrucional, podemos adaptar a lista anterior para as ne-
cessidades deste cenário, onde é importante entender profundamente quem
são os alunos os quais serão atendidos pelos cursos e plataforma de eLearning
que estão sendo criados, quais suas necessidades e desejos e, principalmente,
compreender como esse público-alvo lida com a tecnologia, já que os alunos
basicamente utilizarão computadores ou dispositivos móveis para consumirem
os cursos.
50
A importância da boa UX
No que diz respeito ao usuário (aluno), uma boa experiência do usuário é im-
portante porque pode fazer muita diferença durante seu processo de aprendi-
zado, marcando uma diferença entre utilizar a plataforma de eLearning (onde
ele consumirá o curso) de forma precisa e completa, ou não conseguir utilizar
todos os recursos que a instituição oferece e ficar frustrado, por não aprender
na íntegra, por dificuldades durante a utilização do sistema, por exemplo.
51
Figura 10: Exemplo de processo de UX Design: Conceito, protótipo, validação interna, testes de usabilidade, apren-
dizado através da observação dos usuários e iteração (contínua melhora do design).
52
53
Figura 11: Modelo do processo de Design Centrado no Usuário criado pela UPA, em formato de togo de tabuleiro. O
download deste modelo pode ser feito através do endereço
https://www.mprove.de/script/00/upa/_media/upaposter_11x17.pdf
54
Lean UX
O Lean UX é uma técnica bastante útil ao trabalhar em projetos nos quais o
sível para que possa ser usado para tomar decisões rápidas. A natureza do de-
Lean UX imita esses ciclos para garantir que os dados gerados possam ser usa-
55
Questões e hipóteses
Então, é preciso criar suposições para a solução dos problemas. Uma suposição
é basicamente uma declaração de algo que achamos ser verdade. Elas são pro-
jetadas para gerar um entendimento comum em torno de uma ideia que per-
mite a todos começarem. Mas é fundamental entender que as suposições po-
dem não estar corretas e podem ser alteradas durante o projeto, à medida que
um melhor entendimento se desenvolve dentro da equipe.
56
Pode haver mais de uma resposta para cada pergunta. Isso nos deixa com um
número maior de suposições do que poderia ser prático. Se este for o caso, a
equipe pode priorizar suas suposições rapidamente após sua geração.
57
Se descobrirmos que não há como provar nossa hipótese, podemos estar ca-
minhando na direção errada, pois nossos resultados não estão claramente de-
finidos.
58
Pesquisas e testes de usuários, pela própria natureza do Lean UX, são baseados
nos mesmos princípios usados em ambientes tradicionais de UX. No entanto, a
abordagem tende a ser “rápida e suja” – os resultados precisam ser entregues
antes do início do próximo Sprint Ágil.
Por isso, há muito menos foco nas saídas de documentos pesados e meticulo-
sos e mais foco nos dados brutos.
59
Agile UX
Agile UX (ou UX Ágil) busca integrar o usuário durante o processo de desenvol-
vimento de produtos digitais. Ou seja, a plena comunicação entre a user expe-
rience (UX) com o mindset ágil. A Figura 12 ilustra o esquema do Agile UX.
Figura 12: Esquema do Agile UX.
60
Em seguida, os princípios do lean UX servem para delimitar o que irá ser de-
senvolvido. Ou seja, a geração e validação das ideias através do MVP. E, por
fim, o método ágil fatiando e priorizando o que deve ser desenvolvido primei-
ro.
Jeff Gothelf, no livro “Lean UX – Applying Learn Principles to Improve the User
Experience” (2013), afirma que o modelo apresentado por Desireé Sy, é inte-
ressante para times que estão em um período de transição entre o método
Tradicional e o Ágil, já que apresenta pontos que não vão de encontro com o
pensamento do Lean, como a falta de foco no que está sendo desenvolvido,
não tirando proveito dos benefícios da colaboração participativa e o desperdí-
cio desnecessário em criar documentações que expliquem o que deve aconte-
cer em cada sprint de design. A Figura 13 ilustra o Agile UX definido por Gothelf.
Figura 13: Agile UX definido por Jeff Gothelf.
61
62
Princípios do Agile UX
A seguir, iremos ver alguns princípios baseados no artigo publicado no site De-
sign Principles FTW por Guiseppe Getto. Segundo Getto, esses princípios são
pontos fundamentais para o sucesso de um projeto de UX, pois são baseados
em experiências de projetos reais.
63
COLABORAÇÃO ADAPTATIVA
64
DESENVOLVIMENTO SUSTENTÁVEL
EQUIPES MULTIFUNCIONAIS
65
Figura 14: Diferenças entre Lean UX e Agile UX.
66
Indicação de livros
Neste capítulo, são sugeridos livros relacionados a esta disciplina. É fortemente
indicada a leitura destes para aqueles que desejam aprofundar seus conheci-
mentos nos pontos abordados nesta disciplina, a qual foi uma introdução ao
UX Design.
67
68
69
70
Lean UX
(Jeff Gothelf)
71
72