Sem resumo de edição |
|||
| Linha 189: | Linha 189: | ||
* Com essa tabela comparativa pode-se obter uma série de insights para o produto e consegue-se avaliar melhor | * 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. | * 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. | ||
<br> | |||
= Como criar wireframes? = | |||
<br> | |||
== 1. Wireframe de baixa fidelidade == | |||
<br> | |||
* 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 == | |||
<br> | |||
* 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 | |||
<br> | <br> | ||
Edição das 10h55min de 27 de julho de 2016
- 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
Heurísticas de Usabilidade
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
- 1. O que colocar no wireframe?
- 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


