Anotações: Curso UX para Web Designers

in #design6 years ago

UX para Web Designers

1ª Camada:

01 - Necessidades do usuário. Qual a necessidade do usuário que vai ser atendida nesse sistema?

(Tarefas/necessidades do usuário, quantas?) (Em qual contexto o usuário vai utilizar sua ferramenta? Se ele precisa usar na fila do banco o site precisa ser responvivo/mobile)

02 - Objetivos do sistema. Qual o objetivo do sistema, o que o sistema vai oferecer para que o usuário consiga atingir seu objetivo?

2ª Camada:

01 - Requisitos de conteúdo. Quais são os requisitos de conteúdo?

(Tudo aquilo que o sistema vai ter, com base na necessidade do usuário e objetivos do sistema já estabelecidos)

02 - Especificações Funcionais. Quais são as especificações funcionais?#

(O que da para fazer no sistema, o que vai ter de função, quais funcionalidades vai ter para que o usuário consiga atingir seu objetivo?)

3ª Camada:

#01 - Arquitetura da informação.
(organizar todas as informações anteriores em 4 grandes sistemas)

  1. Sistema de organização.
  2. Sistema de Rotulação.
  3. Sistema de Navegação.
  4. Sistema de Busca

02 - Design de interação. Como o usuário vai interagir com o sistema?

(Em tela touch, com o mouse, comando de voz, gestos, ele vai estar na rua com celular, na fila de um banco com celular, no ônibus com um tablet?)

4ª Camada:

01 - Design da informação. Como exibir a informação, da melhor forma possível, de acordo com as necessidades e objetivos do usuário?

(Aqui começa a surgir o wireframe - http://www.axure.com/ )

  1. Wireframe de baixíssima fidelidade
  2. Wireframe de baixa fidelidade
  3. Wireframe de média fidelidade
  4. Wireframe de alta fidelidade

02 - Design da navegação.

( 50% definido com base nas definições do ‘Sistema de Navegação” na 3ª Camada tópico ‘C’ e 50% já visual.)

03 - Design da interface.

( 50% já é o próprio wireframe e 50% início do visual final do sistema.)

5ª Camada:

01 - Design visual.

(A cara que o sistema vai ter o design final.)

O passo a passo de um projeto de UX

Os 3 pilares de UX

(Os 3 pilares são um resumo das 5 camadas anteriores.)

ProblemaSoluçãoInteração
A etapa em que vai descobrir qual é o real problema do usuário. Lá no fundo, qual é o problema que precisa ser resolvido? Isso com base em: Pesquisas e entrevistas com o usuárioDescoberto qual o problema que precisa ser resolvido é preciso estabelecer e criar a melhor solução para o problema identificado.É a maneira com que o usuário vai interagir com isso. Aqui entra a usabilidade, por exemplo.

Passo 1 - Descobrir o Problema

Passo difícil, pois é preciso descobrir e balancear o problema tanto na visão do usuário quanto na visão da empresa. O problema precisa estar coerente na visão de todos envolvidos no projeto.

Na visão da EmpresaNa visão do Usuário
Quem são os clientes dessa empresa?Entrevistas com usuários
O que a empresa vende?Testes de usabilidade exploratórios, com produtos concorrentes já existentes. Para entender o problema do usuário.
Como essa empresa ganha dinheiro?Observação. Observar o usuário no cotidiano dele, shadow, simplesmente observar como ele reage em determinada situação
Quais os objetivos de longo prazo?Análise de pesquisas anteriores.
Quais os objetivos do projeto?Análise de dados sobre o perfil do público.
Como a empresa pretende rentabilizar esse projeto?Aplicações de questionários.
Personas. Uma pessoa fictícia mas embasada no perfil real do público alvo.

Exemplo do vídeo na prática: Uma entrevista onde começa a falar sobre um todo da empresa/projeto até ir afunilando até encontrar problemas e possíveis soluções que possa ter no projeto.

Com todas as informações obtidas nessa conversa é preciso:

  • Fazer um compilado de todas essas anotações listando apenas os itens importantes.
  • Entrevistar personagens/pessoas que possam aparecer como problemas ou dúvidas no decorrer da entrevista. (Pode ser feito 4 ou 5 conversas/entrevistas assim.)

Inventário de Conteúdo

Movitações X Restrições: (De acordo com o projeto define-se pontos negativos e positivos, cruzando esses pontos onde vai surgir problemas e soluções.)

Passo 2 - Encontrar Soluções

Passo feito para ter ideias, não necessaŕiamente válidas. A decisão final das ideias/soluções que realmente vão ser utilizadas vem no passo 3.

Encontrar Soluções

  1. Benchmarking: Como empresas de outros mercados resolvem esses problemas?
  2. Análise de concorrência: Como outros players do mesmo mercado que estou, solucionam esses problemas?
  3. Análise de tendência: Para onde o mercado está indo e do que posso me adiantar e tirar proveito disso agora?
  4. Brainstorm: Feito os itens anteriores começa as rodadas de brainstorm junto a todos os envolvidos no projeto

Dica: Envolver toda a equipe e cliente (se possível) na criação de soluções.

Garantir que todos tiveram entendimentos iguais do problema.

  • Apresentar as descobertas do passo 1
  • Fazer rodadas de brainstorm (com hora marcada)

Neste brainstorm lista todos os grandes/principais problemas encontrados onde todos que estão reunidos começam a apontar possíveis soluções para melhorar ou solucionar aquele problema.

Os 4 principais problemas encontrados

Problema 1Problema 2Problema 3Problema 4
Solução ASolução ASolução ASolução A
Solução BSolução BSolução BSolução B
Solução CSolução CSolução CSolução C

Passo 3 - Decidir e Priorizar

Aqui vai priorizar todas as ideias que foram propostas. Como não é viável produzir e executar tudo é selecionado as melhores ideias para resolver cada problema.

(Essas ideias sempre devem ser discutidas com todos os que estão inseridos no projeto.)

Imprescindível:

  • Envolver toda a equipe e cliente nas decisões
  • Balancear necessidade do usuário X necessidade do cliente
  • Viabilidade técnica
  • Viabilidade financeira

Passo 4 - Arquitetura da Informação

Nesse passo lista o que esse projeto vai, de fato, ter de conteúdo: Quais são todas as páginas, recursos e funcionalidades. Para organizar isso, como é, na camada de Arquitetura da informação.

Arquitetura da Informação

(Este item está na 3ª Camada)

  1. Organizar
  2. Rotular
  3. Definir Navegação
  4. Definir Busca

##Passo 5 - Interface

Passo em que é feito toda parte de prototipação, testes e ajustes.

Interface

(Está na 3ª camada no item 2)

  1. Prototipação
  2. Teste: (Pode ser feito via skype, hangout usando um roteiro simples. O testar com 4 pessoas torna o teste bastante eficiente )
  3. Ajustes: (Ajusta aquilo que não funcionou no teste)
  4. Layout: (Design final, o layout final da interface)

Passo 6 - Acompanhamento do projeto

O trabalho de experiência do usuário não é um trabalho só do profissional de UX. O profissional de UX é quem conhece os métodos que precisam ser aplicados e o que precisa ser feito antes do que para garantir uma boa experiência do usuário. Mas a experiência do usuário em si é fruto do trabalho em conjunto de todos os que estão envolvidos com o projeto. Não há como propor a melhor solução sem o envolvimentos de todos os envolvidos.

Esse envolvimento faz com que a equipe esteja imersa no projeto e assim entenda melhor tudo o que precisa ser feito.

Por experiência, como em um iceberg o problema está sempre mais embaixo, mais profundo. E sempre tem que estar balanceado Experiência do Usuário X Interesses da Empresa.

Sort:  

Congratulations @raloliver! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

SteemitBoard - Witness Update
SteemitBoard to support the german speaking community meetups
Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.18
TRX 0.16
JST 0.030
BTC 68331.57
ETH 2650.11
USDT 1.00
SBD 2.69