UX - User Experience

• Instrutor:
  • Rafael Siqueira

Objetivos

• Apresentar metodologias, dicas e ferramentas para o usuário pegar a experiência de algum produto que já existe ou um novo produto para torná-lo excepcional

Conceitos de UX

• O que não é UX?
  • UX não é Lay-out
  • Não teem que ser só digital
  • Não é interface
  • Não são funcionalidades
• UX é a tradução literal do negócio
  • É a Experiência do Usuário
• A experiência é constituída por:
  • Uma pessoa(Usuário) + Experiência positiva ou negativa
• Exemplo:
  • Num site de ecommercce, compra-se um livro
  • A) Recebe uma pedra :(
  • B) Recebe um caixa convencional do Correios :|
  • C) Recebe uma embalagem personalizada, uma carta de agradecimentos e um cupom de 25% para as próximas compras :)

A importância do UX

• Quando a gente observa, pesquisa e vivencia a vida do usuário conseguimos ter mais empatia com ele
• Quando a gente tem mais empatia pela outra pessoa a gente consegue enxergar um monte de soluções baseada nos problemas
• Empresa Alemã:
  • Repensou a embalagem de remédios. Obsservando como os clientes utilizavam aquela caixinha, a maioria das pessoas colocavam numa caixinha os remédios, as tampinhas ficavam pra cima e os rótulos para baixo levando dificuldade para os usuários. A ideia foi criar uma embalagem que colocasse a tampinha pra baixo e o rótulo para cima resolvendo um problema para o usuário. As caixinhas ficavam mais organizadas e de fácil identificação.
• Don Norman:
  • "Tendemos a projetar nossa racionalidade e nossas crenças na racionalidade e nas crenças dos outros."

• Empresa Heinz:
  • Antes pensavam primeiro no desenho do produto, numa embalagem convencional para catchup. Às vezes aconteciam acidentes explodindo ou saindo muito catchup. Aí resolveram inverter a embalagem e o conteúdo ficou pra baixo, a pessoa abriria a tampa e sairia facilmente. Essa é uma solução pensada e observadas através da experiência do usuário.
• Hiper Sland (2014):
  • "A cada 1 dólar investido em UX você tem um retorno de 2 a 100 dólares."
  • Quando temos um serviço focado na experiência do usuário, conseguimos cobrar mais por isso
• Exemplos:
  • nubank, Uber, aibnb, tinder, amazon, Spotify

• • O exemplo do nuBank é ótimo. Além de ter toda uma linguagem visual de aplicativo, de site, muito bem definido e muito claro, com usabilidade muito boa, eles tem um atendimento diferenciado, rápido e diferente de todos os outros. Pode ser muito simples, mas nenhum outro banco, faz ou fez algo desse tipo. Observaram a oportunidade e atacaram isso. Hoje é um diferencial.
• Post rodando na Internet:
  • 
• "A experiência do usuário está se tornando mais importante que o preço."
• "Ela determinará o sucesso ou o fracasso do seu negócio."

De quem é a responsabilidade?

• Quem deve se preocupar com a experiência do usuário?
  • A partir do momento que seu cliente tem um contato com seu produto ou serviço ele terá uma experiência
  • Que pode ser boa ou ruim
  • Isso vai fazer ele tomar uma decisão futura, definir sua fidelidade
  • A responsabilidade do Ux não é da equipe de design e deve estar no mindset de toda a empresa

UX - mindset

• Não importa se é um email, se é um site, se é um email marketing, se é um telefonema ou um presencial
  • Todo o contato leva a uma experiência
  • Se eu tenho um email mal escrito, um formulário com campos jogados, se tenho um texto desalinhado, um site muito mal desenhado, se quando o cliente vai na empresa, ninguém dá bom dia, ele fica desapontado
• Google - 3 princípios básicos:
  • 1) Encante-me
  • 2) Simplifique minha vida
  • 3) Me faça sentir bem
• Prática:
  • Como ajudar a melhorar a experiência do usuário?
  • Desenvolvedores:
    • Exemplo: diminuiu o tempo de carregamento da página (usabilidade, acessibilidade)
    • O desenvolvedor pode ser mais crítico e sempre buscar feedback
    • Dar ideias e ser mais participativo
  • Comercial:
    • Como está a abordagem do cliente?
    • Está sendo muito formal ou está descolado?
    • Estou levando alguma apresentação?
    • Se sim, qual a qualidade deste material?
    • Como minha apresentação está estruturada?
    • Qual a imagem que estou deixando da empresa para ele?
  • Atendimento:
    • Como está sendo o atendimento?
    • Consigo atender de uma maneira melhor, diferenciada?
    • Estou resolvendo realmente o problema do cliente?
    • O cara do atendimento deve repassar informações sobre este cliente pois ele conhece bem

Personas

• Nesta fase precisamos conhecer bem os nossos clientes
  • Quais são seus problemas?
  • Quais são suas expectativas?
  • Quais são suas necessidades?
• Se a gente entende o nosso público alvo, poderemos descobrir oportunidades, ou seja, produtos ou serviços que não existem ou algum que possamos melhorar
• A ferramenta Persona é usada em um monte de metodologias. Em UX usamos também como em DT
• O que são Personas?
  • São personagens fictícios que representam um grupo de usuários ou clientes
  • Numa persona eu tenho nome, idades, quais são os hábitos, se tem família, se tem tempo, estilo de vida, carro que anda, ...
  • Não é cada pessoa é uma persona
• O que esta ferramenta está fazendo em um processo de UX?
  • PAra ter uma boa experiência do usuário preciso fazer um design centrado no usuário
• Vantagens:
  • Fica mais fácil dimensionar os esforços
  • Conhece-se bem o público
  • Toda a empresa vai conhecer as personas
  • Quando se cria é melhor imprimir e pregar na parede para que todos vejam
• Como fazer essas personas?
  • Sem achismos, sem chutes!
• Jeito certo:
  • Pesquisas etnográficas
  • Entrevistas

Criação de Personas

• Para quem estou criando meu produto ou serviço?
• Quais são suas metas e quais são os grupos específicos do meu público
• Pode-se compilar tudo o que se sabe numa planilha tendo pessoas que conhecem bem o píblico
• Itens básicos:
  • Profissão
  • Dispositivos
  • Tempo
  • Objetivos
  • Etc
    • Depois da tabela atualizada poderemos notar alguns padrões
    • Pode-se enxergar melhor o que eles tem em comum e o que tem de diferente
• Agora é encontrar pessoas que correspondam a estes padrões
  • Pode-se achar no BD de clientes ou por recrutamento, conversas com amigos, etc
• Feito isso, é conversar diretamente com eles
  • Aprende-se muito com eles
  • Promove-se a empatia
  • Entende o que eles pensam
  • Eles conhecerão quem está criando produtos ou serviços que irão ajudar eles
  • O melhor dos mundos é a conversa presencial, olho no olho
• Planos:
  • Plano A: Face to Face
  • Plano B: Vídeoconferência
  • Durante a entrevista tem alguns pontos sobre personalidade que podem ser observados e que podem ser relevantes para seu produto ou serviço
• Quando se consegue pegar estes pontos de personalidade a persona fica mais realista
• Depois dessas conversas, fica bem mais claro como estas pessoas são
• Próximo passo:
  • Voltar na planilha e colocar os dados
  • Incluir novas colunas:
    • Como é o escritório dessa pessoa, qual o Sw que ela usa, quais os hábitos, quais são os hobbies, os hábitos, estilo de vida
  • Durante o preenchimento pode-se encontrar duas ou mais personas que possuem a mesma característica
    • Neste caso, faz-se uma combinação das personas gerando apenas uma
• O processo é iterativo, o que era certo no começo pode não ser mais
• Agora que temos a planilha mais completa e lapidada podemos ir para a representação
  • Pode ser uma foto, um ícone, uma ilustração, um nome, cada uma ficando diferente da outra
• Feito isso, imprime-se bem grande, cola na parede para que todos possam olhar
• Objetivo:
  • Criar um entendimento compartilhado. Todas as áreas devem conhecer muito bem estas personas

Análise Competitiva

• Análise de concorrência:
  • Análise extensa e bem detalhada de produtos concorrentes que já estão estabelecidos no mercado
  • Análise de forma comparativa:
    • Análise e comparação de todos os players que estão no mercado
    • É ótimo porque ajuda a entender os padrões que são usados e o que é bom e o que é ruim
    • Identifica boas oportunidades
    • Permite inovar em alguns nichos.
• Principais benefícios:
  • Conseguir enxergar melhor os concorrentes
  • Onde eles estão atuando?
  • O que eles estão fazendo?
  • O que eles estão oferecendo?
  • As pessoas estão reclamando?
  • As pessoas estão amando o produto ou serviço?
  • O que eu posso tirar de aprendizado?
• Nós mesmos podemos testar e tirar conclusões, julgamentos
• Outras pessoas podem ser chamadas para a avaliação
• Boa estratégia:
  • Criar uma tabela onde podemos listar os pontos observados e os concorrentes, pontuando um por um
  • Coloca-se um atributo e preenche de acordo com a observação
• Deve-se ter muito cuidado:
  • Pode-se minimizar algum possível erro
  • Identificar o que os outros estão fazendo bem
  • Encontrar boas oportunidades
• Com essa tabela comparativa pode-se obter uma série de insights para o produto e consegue-se avaliar melhor
• Depois que todo esse resultado está pronto, compartilha-se tudo com o resto da equipe, numa reunião, se possível imprimindo de foram bem visível, sem fazer julgamento, deixando o amor de lado fazendo uma análise bem competitiva.

Como criar wireframes?

1. Wireframe de baixa fidelidade

• Início do projeto podendo ser estágios do wireframe
• Basicamente compostos de linhas, quadrados, círculos, retangulos, triangulos com um fundo bem simples
• Pode ser desenhado à mão até em papel de pão
• Podemos faze-lo um software gráfico

2. Wireframe de alta fidelidade

• São mais incrementados possuem especificações
• Consegue dar uma visão bem geral do produto
• Dicas:
  • 1. O que colocar no wireframe?
    • Pense em cada ação
    • Passo-a-passo
    • Faz parte do processo rabiscar, jogar fora e começar de novo
    • Pense em todas as funcionalidades, listando item a item
• 2. Estrutura do site:
  • Comece por elementos comuns, básicos, por exemplo, cabeçalhos, rodapés, área de conteúdo, barra lateral, busca, etc
  • Depois avançando, pensando no restante, botoões, elementos sobrepostos, checkbox ou botão rádio, etc
• 3. Conteúdo
  • Como eu devo tratar o conteúdo do meu produto:
  • Só para marcação, importante é arquitetura e formato
  • Não é hora de gastar tempo pensando como será o texto
  • Nos títulos, links, utilize termos genéricos
  • Não perca tempo pensando em conteúdo real
  • Sugestão: usar Lorem Ipsum e a SW Axure, Balsamiq, Sketch, Ps, AI

Protótipos navegáveis

• Permite rever os conceitos e receber feedbaks
• Ainda nos estágios iniciais
• Ganhos:
  • Se você tiver isso, facilita muito na hora de demonstrar a ideia, o produto, o wireframe para sua equipe e ainda para os responsáveis pela aprovação
    • Seja por um pitch ou outro meio qualquer pois fica mais fácil o entendimento e o feedback
  • Possibilitam fazer teste de usabilidade no início do processo
  • Permite liberdade de experimentação pois pode fazer quantas alterações for preciso já que cada uma custa pouco
  • Pode errar sem medo
  • Não precisa ter conhecimentos avançados
• Pode-se usar protótipos navegáveis no seguinte fluxo:
  • Wireframe -> protótipos navegáveis -> Feedbacks -> Ajustes -> Wireframe -> ...
    • Processo cíclico e quando chega no final temos uma ideia muito madura e ajuda o desenvolvedor a se orientar
  • Não substitui a documentação mas ajuda no entendimento
• Ferramentas de prototipação:
  • Proto.io, invision, marvelApp
    • Alguns permitem rodar no smartphone e ter uma demonstração bem fiel da IDE
• É importante chegar na fase de implementação do backend e frontend com tudo muito bem pensado e validado
• Testar e validar antes de começar uma implementação!!!