O documento aborda a importância da experiência do usuário (UX) e design de interface do usuário (UI), destacando metodologias, ferramentas e as heurísticas de usabilidade de Jakob Nielsen. Ele também explora as características diferentes das gerações em relação à tecnologia e marketing, além de descrever o processo de implementação do inbound marketing. O final do documento contém diretrizes para a entrega de projetos e avaliações no curso de design gráfico.

1. UX / UI
Profª Aline
Okumura

2. EMPATIA
O que é?

3. 4 U’s
• User Experience = Experiência do usuário
• Como a pessoa se sente sobre uma
determinada experiência?
• Pessoas, Sentimentos e Interações
• Exemplo comprar um computador
• Usuários são pessoas.
• UX Design: Design de Experiência do Usuário
• Área multidisciplinar que envolve:
Interação, Psicologia, Design Visual e etc...
• Principal objetivo como UX Designer é?
• Além do design bonitinho é um trabalho de
pesquisa profunda com o usuário e sua
experiência.

4. Metodologias
• Protótipos (baixa, média e alta fidelidade)
• Design visual (Motion Graphics - às vezes)
• Fluxos de uso
• Base de dados de pesquisa
• Ferramentas:
• Personas
• Mapa do site
• Wireframe
• Flows

5. User Interface
• Meio de interação com o usuário
HUMANO OBJETIVO
INTERFACE

6. Heurísticas de
Jacob Nilsen
1. Visibilidade de qual estado estamos no sistema
2. Correspondência entre o sistema e o mundo real
3. Liberdade de controle fácil pro usuário
4. Consistência e padrões
5. Prevenções de erros
6. Reconhecimento em vez de memorização
7. Flexibilidade e eficiência de uso
8. Estética e design minimalista
9. Ajude os usuários a reconhecerem, diagnosticarem e
recuperarem-se de erros
10. Ajuda e documentação
https://www.nngroup.com/articles/ten-usability-heuristics/

7. 1. Visibilidade de status de sistema
• O site disponibiliza para o usuário informações sobre o carregamento do vídeo, como a porcentagem,
previsão de conclusão e o que o usuário deve fazer.

8. 2. Correspondência entre o sistema e o mundo real
Toda comunicação do produto deve falar a
linguagem do usuário e não ser orientada ao
sistema, ou seja, o sistema não deve usar
linguagem técnica ou termos que são de
conhecimento específico (exceto quando o
sistema trata-se de um sistema direcionado à
área técnica). Todas as nomenclaturas devem
ser contextualizadas e coerente com o modelo
mental do usuário. Isso também é aplicado a
ícones e imagens ilustrativas.

9. 3. Liberdade de controle fácil pro usuário
O sistema nunca deve impor algo ao
usuário, também nunca deve tomar a decisão por
ele. O ideal é sugerir e não induzir. Dar liberdade
ao usuário das decisões e ações que podem ser
tomadas. Facilitar as “saídas de emergência”,
permitir desfazer ou refazer alguma ação
no sistema e retornar ao ponto anterior quando
estiver perdido ou em situações inesperadas.
Exemplo: Breadcrumb

10. 4. Consistência e padrões
O sistema deve manter a consistência
visual e de linguagem. Manter padrões
de interação em diferentes contextos.
Falar a mesma língua o tempo todo, e
nunca identificar uma mesma ação
com ícones ou labels diferentes. Tratar
coisas similares da mesma maneira,
facilitando a identificação do usuário e
ensinando-o a usar o sistema.

11. 5. Prevenções de erros
Ações drásticas como deletar arquivos,
devem ser bem sinalizadas.
Além disso, ter sempre uma confirmação
ou possibilidade de desfazer o que foi
feito. Nas palavras do próprio Nielsen
“Ainda melhor que uma boa mensagem
de erro é um design cuidadoso que possa
prevenir esses erros”.

12. 6. Reconhecimento em vez de memorização
O usuário não é obrigado a reaprender o
serviço toda vez que o acessa.
O sistema deve evitar acionar a memória
do usuário o tempo inteiro.

13. 7. Flexibilidade e eficiência de uso
O sistema pode ser ágil para usuários a
vançados e ser fácil de utilizar pelos
usuários leigos. Isso é o que se espera
de um sistema flexível e eficiente. O uso
de atalhos de teclados, preenchimento
automático a partir de dados anteriores
e máscaras de campos são exemplos de
itens que aprimoram a eficiência do
sistema com flexibilidade.

14. 8. Estética e design minimalista
Dialogar de forma simples e
direta, com um layout mais limpo,
com diálogos naturais, de fácil
entendimento e que apareçam
em momentos necessários.

15. 9. Ajude os usuários a reconhecerem,
diagnosticarem e recuperarem-se de erros
Dialogar de forma simples e
direta, com um layout mais limpo,
com diálogos naturais, de fácil
entendimento e que apareçam
em momentos necessários.

16. 10. Ajuda e documentação
Uma interface intuitiva e clara evita a
solicitação de ajuda. Mesmo assim o
sistema deve manter ao alcance do usuário,
itens de auxílio para determinadas ações.
Além disso, devemos manter ajudas fixas
que podem ser acessadas à qualquer
momento em caso de dúvidas.

17. UX
Arquitetura de
Informação
Design de
Interação

18. Por onde começar?

22. Entendendo Gerações

23. Baby Boomers
1940 – 1960
Idade hoje: 64 e 84 anos
Principais Características:
• São leais e comprometidos;
• São competitivos, contestadores e focados em resultado.
• Aprenderam a lidar com avanços tecnológicos, mas de
uma forma mais gerencial do que aplicada à mudança de
hábitos.
Mercado de Trabalho
Um emprego para vida toda.
Valorizam a ascensão
profissional.
Device
Desktop
Rede Social Preferida
Facebook e e-mail.

24. Geração X
1961 – 1980
Idade hoje: 44 e 63 anos
Principais Características:
• São independentes e empreendedores
• Valorizam a estabilidade
• Um pouco resistentes a mudanças
• Geração equilibrada, que não se precipita na tomada de decisões
• Não são nativos digitais mas são experientes e dedicados.
Mercado de Trabalho
Buscam a ascensão profissional
Device
Desktop e Laptops
Rede Social Preferida
Facebook, Linkedin e e-mail.

25. Geração Y ou
Millenials
1980 – 1995
Idade hoje: 29 e 43 anos
Principais Características:
• São autônomos, têm múltiplas carreiras e são conhecidos pelo potencial
inovador.
• Acreditam no trabalho em equipe, são informais e imediatistas.
• Têm mais facilidade para assumir riscos, mas buscam recompensas tangíveis.
• Alta capacidade de fazer várias coisas ao mesmo tempo, sem perder o foco.
• Cresceram com os recursos tecnológicos à disposição.
• Estão sempre conectados, mas não abrem mão da comunicação ao vivo.
• Grande preparo intelectual e acadêmico.
Mercado de Trabalho
Valorizam a empresa, mas buscam
oportunidades. Tratados de igual
para igual, independentemente do
nível hierárquico. Remuneração
competitiva, atrelada a metas e
objetivos muito claros.
Device
Dispositivos Mobile e Laptops
Rede Social Preferida
Facebook, Instagram e Twitter.

26. Geração Z
"zoomers"ou
Centennials
1996- 2010
Idade hoje: 14 e 28 anos
Principais Características:
• São realistas, competitivos e independentes.
• Valorizam a consciência coletiva.
• Sentem a necessidade de expor suas opiniões
• Arriscam mas valorizam a saúde mental
• Valorizam ações criativas
• Tecnologia inata por isso mais ansiosos.
• São considerados Mobile e Social Media natives e transformam a vida amorosa
em um jogo de estratégia.
• Preocupam-se com o ecosistema, com a sustentabilidade e com os recursos
Mercado de Trabalho
São desapegados das fronteiras
geográficas. A tomada de decisão
acontece de forma ágil. Esperam
rápida ascensão na carreira, mas
não buscam cargos de liderança.
Device
Dispositivos Mobile
Rede Social Preferida
TikTok e WhatsApp.

27. Geração Alpha
2010-2024
Idade hoje: até 13 anos
Principais Características:
• Espontaneidade e autonomia.
• Poder de adaptação muito acelerado
• Interação com a tecnologia desde o nascimento.
• Movidos pelos estímulos sensoriais.
Mercado de Trabalho
?
Device
Dispositivos Mobile, wearables,
interações tangíveis e multiplas.
Rede Social Preferida
Devem herdar os comportamentos
da Geração Z, desenvolver
tecnologias de realidade
aumentada em 3 e 4D.

28. SXSW

31. Inbound Marketing

33. O que é?

34. Quais são os pontos de contato para
um visitante se tornar um lead?

35. Como é a implementação do Inbound
Marketing?
Fase 1: Setup
• Auditoria e implementação de SEO
(Otimização do site para mecanismos de
busca) + Setup de ferramentas de análise e
Ads;
• Identificação do Target / Persona / Público
alvo das ações;
• Planejamento de conteúdo, calendário
editorial, roteiro de vídeos e isca digital.
Fase 2: Tráfego
• Produção de conteúdo: textos, vídeos,
posts, anúncios, iscas, etc;
• Atração, geração de tráfego e qualificação
dos leads. Esta fase requer investimento em
mídia Google Adwords, Facebook Ads e
SMTP/e-mail;
• Segmentação, engajamento e conversão;
• Crescimento de lista de e-mail e lista de
remarketing.

36. Como é a implementação do Inbound
Marketing?
Fase 3: Relatório, análise e ajuste
• Produção de relatórios;
• Análise dos conteúdos mais e menos acessados;
• Retorno à Fase 2 com os indicativos apurados na Fase
3.
Dicas
• As pessoas se sentem mais seguras para comprar
coisas de quem elas conhecem;
• Ter um canal no YouTube pode criar esta sensação de
confiança, autoridade e conexão com quem está do
outro lado da tela;
• As pessoas estão lendo menos e assistindo cada vez
mais vídeos;
• SEO – Sites e blogs com vídeos do YouTube
são 3X melhor rankeados no Google;
• 85 MILHÕES de brasileiros assistem a vídeos online.
Destes, 82 MILHÕES assistem pelo YouTube;
• Vídeos transmitem sua mensagem de forma mais
humana, orgânica e memorável;

37. O que precisa entregar?
• Portifólio Pessoal
• Arquivo em .pdf:
• Capa
• Breve descritivo do projeto, logo e identidade visual.
• Mapa do Site
• Wireframe
• Cartela de Cores
• Tipografias (Títulos e textos)
• Estilo de Imagens
• Modelo do Bootstrap escolhido

38. O que precisa entregar?
• Site e/ou App (funcional em HTML / Bootstrap ou XD / Protopie)
• Arquivo em .pdf: (aline.okumura@fmu.br)
• Capa
• Breve descritivo do projeto, logo e identidade visual.
• Personas (2 no mínimo)
• Jornada do Usuário (infográfico)
• Mapa de transmídia (on e off-line e seus contatos)
• Mapa do Site / App
• Wireframe Site / App
• Print da tela do Site / App
• Mockup do Site / Redes Sociais / Mídia impressa / App
• Nome dos componentes do grupo e divisão de tarefas.

39. Cronograma 6º semestre Design Gráfico
Avaliação Continuada
Apresentação de Seminário - 1,5 – Datas 2,9,16,23/09/2019​
​Site Pessoal (Portifólio) – 4,0 – Data 30/09/2019​
​Prova Integrada – 3,0​
​APS – Curso on-line HTML/CSS - 1,5 – 11/11​
Avaliação Regimental
Projeto Integrado (UX e UI) - 5,0 - 18/11
​Livro - 1,0 - KRUG, Steve. Não me faça pensar.2ºed. Rio de Janeiro: Alta Books, 2006. - 11/11
​Prova Prática – 2,0 – 2/12/2019​
​Prova Teórica – 2,0 – 2/12/2019​

40. Webgrafia
• https://www.youtube.com/watch?v=MFQcGDO67JU
• https://publiki.me/o-que-e-inbound-marketing/