UX Digital

User Experience digital.

Profª Ms. Francisco Escobar.

Aula 02

• Arquitetura da Informação;
• Arquitetura;
• Conteúdos;
• Design Visual;
• Design Industrial;
• Design de Interação;
• Design de Som;
• Fatores Humanos;
• Interação Humano-Computador;

Se UX é tudo isso, significa que deve haver diferentes profissionais e especialidades atreladas a ela, né? Isso mesmo! É uma área multidisciplinar que engloba competências diversas, como: UX Researchers, Analistas de Negócio, Visual Designers, Designers de Interação, Arquitetos de Informação, UX Writers e Desenvolvedores Front-end (Ah, não estava entendendo onde você se encaixava em todo este universo, né? Pois saiba que seu papel é fundamental na experiência do usuário.).

É importante que o seu produto seja concebido e avaliado por um grupo que tenha pontos de vistas diversos. Isso deve enriquecer seu produto e contemplar momentos diferentes do seu usuário. A equipe pode ser formada por pessoas da área de marketing, designers, atendimento, vendas, tecnologia etc., mas é preciso ter organização para que isso funcione bem. Definir metodologia, processos e ferramentas é fundamental para que o time trabalhe de forma produtiva e assertiva. 

 - Whitney Hess

O guarda-chuva de UX Design.

UX Umbrella (guarda-chuva de UX) é um termo a que se refere todas as competências que envolvem uma área de experiência de usuário. 

UX Design

Vertentes e caminhos

UX Design

Vertentes e caminhos

UX Design

Vertentes e caminhos

O UX Designer é o profissional que permeia as cinco etapas de um processo de design.

– Interaction design foundation

"É uma área multidisciplinar que engloba competências diversas, como: UX Researchers, Analistas de Negócio, Visual Designers, Designers de Interação, Arquitetos de Informação, UX Writers e Desenvolvedores Front-end."

 - Interaction design foundation

"As funções de design de UX são confusas. Você pode saber o que um “designer UX” faz, mas e um “designer visual”, “designer de produto” ou “unicórnio UX”? Bem, não se preocupe mais, porque vamos acabar com qualquer confusão que você possa ter."

  - Interaction design foundation

"Eu construí minha experiência em tecnologia e design, adquiri algumas habilidades sólidas de pesquisa, adicionei alguns processos de negócios e uma pitada de marketing e voila! Um designer de experiência do usuário. Ou um designer de serviço? Um pesquisador de UX? Um estrategista digital? Um analista de experiência? Pensador de design? Funileiro de coisas? Unicórnio? Power ranger? Diz-me tu. Porque não tenho certeza se sei a resposta."

- Kate Conrick

Usabilidade

                    Design de Interação

e

Melhorando seu User experience

O Design de Interação é a disciplina que trata, como o nome já diz, da interação entre um sistema e seu usuário, via uma interface. Isso também incorpora o design focado em como as informações devem ser apresentadas, a fim de possibilitar seu melhor entendimento e uso.
Assim, entramos na tão falada usabilidade: basicamente, é garantir que um processo não seja frustrante e cansativo, que as coisas funcionem bem e sejam fáceis de usar, dentro do propósito esperado.

 - Sobre o design de interação

• Aprendizagem: seus usuários conseguem cumprir tarefas básicas no seu site logo na primeira vez em que eles o acessam?

• Eficiência: agora que já aprenderam a usar o seu produto, eles conseguem fazer isso com rapidez?

• Memorabilidade: eles conseguem se lembrar de como devem usar o seu site ou app depois de passarem algum tempo sem acessar?

• Prevenção de erros: a usabilidade do seu produto é tão boa que evita que seus usuários comentam erros ou, pelo menos, ajuda para que eles desfaçam um erro facilmente?

• Satisfação: é prazeroso acessar seu site? Seu usuário se sente feliz por que consegue fazer tudo aquilo que ele precisa?

Sobre Usabilidade...

Uma Boa usabilidade deve cumprir cinco funções:

Ex: A balança. Parte 1

• A aprendizagem foi tranquila? Demais!

• Eu consigo fazer isso com eficiência? Muita! Subir na balança virou minha especialidade.

• Eu memorizei a interface de como faz para repetir daqui uma semana (ou um dia)? Claro! Assunto dominado.

• Tive alguma dificuldade ou cometi algum erro na hora de subir na balança? Fiquei com alguma dúvida de como fazia para descobrir meu peso? Que nada! Foi de primeira. Nem precisei de um manual!

• Foi satisfatório? (Refiro-me ao fato de conseguir ver meu peso). Claro que não perdi os dois quilos desejados, mas ao menos consegui ver o resultado.

A balança e sua usabilidade

Ex: A balança. Parte 2

Moral da história: às vezes, menos é mais!

Agora vamos às boas práticas para uma usabilidade de sucesso.

As dez heurísticas

                                                  de Nielsen

acesse: nngroup

Heurística é um método ou processo criado com o objetivo de encontrar soluções para um problema .

– clique aqui para mais definições sobre heurística

1. Visibilidade do status do sistema;

2. Correspondência entre o sistema e o mundo real;

3. Liberdade e controle do usuário;

4. Consistência e padrões;

5. Prevenção de erros;

6. Reconhecer ao invés de lembrar;

7. Flexibilidade e eficiência;

8. Estética e design minimalista;

9. Auxiliar usuários a reconhecer, diagnosticar e recuperar erros;

10. Ajuda e documentação.

As dez heurísticas de Nielsen

Visibilidade do status do sistema

você precisa informar seu usuário sobre o que está acontecendo, dizer para onde ele está indo, como está indo ou o que vem depois.

Mantenha o status visível

Ex: enquanto fazia um cadastro para uma compra do site da Dafiti, vi quantos passos ainda faltavam até a confirmação do pedido. Nesse momento, fui informado sobre o tempo que ainda iria levar ou quanto de informação eu ainda deveria preencher para finalizar a minha compra.

1

Correspondência entre o sistema e o mundo real

é preciso falar a mesma língua que o seu usuário, isso deve ser feito de forma muito natural e lógica, e vale tanto para a escolha da comunicação, como para o uso de símbolos e outros elementos que façam parte do dia a dia das pessoas.

Tenha proximidade com o mundo real

Ex: quando você acessa o site da Netflix, ele sabe que já esteve lá e dá “boas-vindas de volta”. Além disso, até pouco tempo, quando olhávamos os planos, ficava claro que o que estava indicado com um “x” não era disponível naquele plano, porque é muito comum usarmos o “x” em qualquer lugar para indicar que algo está errado ou proibido.

2

Liberdade e controle do usuário

é importante que você direcione o usuário para ajudá-lo a cumprir com sua tarefa, mas sem tirar dele as opções de fazer o que ele quiser em seu site (desde que não haja problema com a funcionalidade ou com as regras do negócio).

Exerça o controle, sem tirar a liberdade

Ex: eu posso criar um anúncio no Enjoei, e quando eu quiser, posso apagá-lo. Mas eu não posso, por exemplo, mudar as fotos dele. Isso porque não seria legal anunciar uma coisa, depois alterar as fotos para outro produto e dizer que alguém comprou o que viu no site. O comprador poderia levar gato por lebre.

3

Consistência e padrões

certifique-se de que elementos comuns como botões, campos de textos e listas funcionam de forma previsível, assim seus usuários poderão usá-los sem precisar perder tempo tentando entender como se comportam na sua interface. Ninguém quer clicar em um campo de texto e ele acessar outra página do nada, né? Para isso, clicamos nos botões!

Mantenha sempre a consistência e os padrões.

Ex: o Instagram mantém seus botões de interação com a publicação sempre abaixo do post, alinhado à esquerda. Já os outros botões que chamam para ações como “comprar”, “seguir” ou “entrar em contato”, também seguem um padrão entre si, de cor e tipografia.

4

Prevenção de erros

é preciso entender onde e como seu usuário pode errar para, então, evitar que isso aconteça. O ideal é que seja tudo tão perfeito, que ele nem cometa erros de percurso dentro do seu site ou aplicativo. 

Trabalhe na prevenção de erros.

Ex: quando estou no Google e quero fazer uma busca, ele me ajuda a não errar em dois momentos: primeiro, quando ele me dá sugestões de palavras ou expressões enquanto eu digito; e a segunda, quando ele corrige uma palavra que digitei errado.

5

Reconhecer ao invés de lembrar

o app do Itaú tem a opção de lembrar automaticamente o número de agência e conta corrente, para que o usuário não tenha que se lembrar desses dados a cada acesso. 

Crie o reconhecimento.

Ex: seu usuário nem sempre vai decorar o caminho que ele fez para chegar a um determinado produto ou página de interesse. Então, é sua obrigação deixar bem visível para ele esse passo a passo, para que possa navegar e refazer seu caminho sem problemas, e quando ele quiser.

6

Flexibilidade e eficiência

você deve se lembrar de que o seu site pode ser acessado por pessoas com perfis diferentes. Por mais que seu produto tenha um público definido, dentre eles, podem existir pessoas mais ou menos experientes no uso de sites e aplicativos. Pensando nisso, a usabilidade deve ser boa para qualquer pessoa que resolva acessar seu produto.

Flexibilidade e eficiência no uso.

Ex:no Gmail, tenho duas formas de arquivar uma mensagem. Uma delas é por meio de um atalho, movendo o card da mensagem para a esquerda. Essa opção provavelmente é mais usada por pessoas mais experientes e habituadas com esse tipo de comportamento. A outra maneira é entrar na mensagem e escolher a opção de “arquivar”, lá no topo da tela. Essa deve ser a opção de pessoas menos experientes no uso de sites ou apps.

7

Estética e design minimalista

as telas do seu produto precisam ser simples e conter somente o que o usuário realmente precisa saber ou fazer. Quanto mais informação desnecessária você coloca, maiores são as chances de as pessoas se perderem e não conseguirem cumprir com os seus objetivos. Lembra-se da história da balança, né? É por aí...

Design minimalista.

Ex: quando eu acesso o app do Nike Training (para ajudar naquela promessa de emagrecer), vejo um layout simples, que direciona as minhas escolhas. Na primeira tela, eu decido entre fazer o que ele me sugere (no topo) ou buscar um treino. Quando escolho buscar um treino, ele me oferece muito claramente opções para atingir o meu objetivo.

8

Auxiliar usuários a reconhecer, diagnosticar e recuperar erros

mesmo com todo o cuidado, seu usuário pode encontrar obstáculos para cumprir sua tarefa usando seu produto. Então é importante que as mensagens de erro sejam muito claras, de forma que as pessoas consigam consertar muito rapidamente o erro que cometeram e, assim, seguir adiante.

Ajude a reconhecer, diagnosticar e consertar erros.

Ex: quando tentei fazer um cadastro no iFood para pedir uma feijoada no sábado (porque ninguém é de ferro), digitei meu endereço de e-mail errado. Logo apareceu uma mensagem de erro, sinalizando o que estava errado e onde deveria consertar meu erro para seguir com o meu pedido. 

9

Ajuda e documentação

o ideal é que tudo em seu site ou aplicativo possa ser feito de forma bem intuitiva, mas em alguns casos, é preciso oferecer informação ou ajuda para seus usuários. Isso amenizará qualquer impacto que uma dúvida possa ter quando ele pretende concluir alguma tarefa.

Fazer de forma intuitiva.

Ex: quando fui comprar a edição limitada e ilustrada do Harry Potter na Livraria Saraiva, eles me perguntaram se eu tinha um cartão presente e, se tivesse, deveria colocar o pin e o código nos campos indicados. Para evitar que eu ficasse procurando, eles colocam um link “onde encontrar esses códigos?”, que mostra a imagem de onde ficam esses dados. Essa é uma forma prática de usar a ajuda para os usuários.

10

Chegamos a conclusão que, se ao desenvolver um projeto, não for levado em consideração fundamentos como usabilidade e heurística, dentro do ux design a probabilidade do usuário não visitar mais o seu site ou aplicativo é enorme.

Por hoje é

Dúvidas?

só pessoal!