Essas são dicas para melhorar a experiência do usuário de seus projetos SEM horas de experiência do usuário, prototipagem de papel ou qualquer outra palavra da moda.

(Sério, procure por “design thinking”. 100.500 resultados!)

Para quem é este artigo?

Desenvolvedores Você criou seu próprio aplicativo, mas cada usuário é atormentado por ele. E você sabe: se eles lhe dizem isso pessoalmente, o problema é muito ruim.
Designers gráficos . Estudar UX em artigos na Internet é uma maneira ... muito dolorosa de morrer.
Gerentes de projeto . Você já é um designer de UX do trimestre. Seria bom aprender o restante das habilidades.
E os outros bandidos . Todo mundo que empilha seus projetos à noite e nos fins de semana. Você também será útil.

Se você já é um designer de UX, é improvável que o artigo seja adequado para você. Eu pulei áreas inteiras para me concentrar totalmente na habilidade principal que falta aos novos designers de UX (ou pessoas de áreas relacionadas que precisam fazer isso).

Essa habilidade é "entender o idioma da interface" .

No início de minha carreira, fiquei impressionado com a frequência com que os clientes aprovavam rascunhos iniciais (ou ao vivo, trabalhando com protótipos) com erros UX completamente óbvios . Não estou falando de erros que podem ser identificados após um longo teste A / B. Estou falando de erros simples e estúpidos .

Por falta de um exemplo melhor:

Em algum lugar, há um grupo de desenvolvedores que conhecem HTML, mas não sabem a diferença entre um botão de opção e uma caixa de seleção

Meus clientes não são tão ruins, mas, caramba, você não precisa ter sete extensões na testa para entender: se você pode selecionar UM elemento da lista, precisa de SWITCHES, não de sinalizadores. Para entender isso , você só precisa conhecer o idioma da interface. E para mim é o mais louco. A fluência na interface está disponível para todos . Você não precisa de uma faculdade, não precisa de cursos e assim por diante.

Para ser sincero, você só precisa da presença do espírito para (A) parar e pensar quando um aplicativo o embaraça ou o aborrece, (B) verbaliza o que o irrita / incomoda na interface e, em seguida, (C) descobre como evitar isso. bug específico em seus próprios projetos.

Repita esse procedimento constantemente - e torne-se um profissional no menor tempo possível.

Hoje, quero falar sobre quatro pequenas regras que ajudarão a eliminar esses pontos problemáticos em seus próprios projetos. Essas heurísticas são de um a dois níveis mais profundas do que "use comutadores se o usuário puder selecionar apenas um item". Mas, se você seguir os requisitos desta lista, seus projetos ficarão muito mais fáceis de usar desde o início, o que liberará tempo para outras coisas mais importantes.

(Só então comece a ouvir palestras de outros designers de UX sobre os mais recentes métodos de pesquisa acadêmica de usuários!)

Aqui está o que abordamos:

Sem perguntas? Então vá em frente.

1. A lei da localidade

Coloque os elementos da interface onde eles causam alterações.

Sendo todas as outras coisas iguais, os elementos da interface devem ser colocados ao lado do local onde a alteração ocorre . Porque quando o usuário deseja fazer alterações no sistema, ele involuntariamente examina o local em que essas alterações ocorrerão .

Digamos que você tenha uma lista de itens. Onde colocar o botão "ADICIONAR NOVO ITEM"?

Pergunta: Bem, onde está a mudança ?

Resposta: No final da lista.

Ok, coloque um botão no final da lista.

ESPERA. Você acha que isso é bem simples. Mas há uma tentação.

A tentação é simplesmente colocá-lo onde há espaço livre.

Por exemplo, se você possui um menu, pode pensar: “Temos um menu! Por que não colocar no menu!? ”

Violação da lei da localidade na interface da música

A resposta é óbvia: porque ninguém a procurará lá.

(E a resposta completa é que, se você simplesmente colocar os elementos em locais livres, o aplicativo se tornará inadequado para o caos, do qual as pessoas fugirão o mais rápido possível).

Acha que estou brincando? Já conheceu essa interface?

Violação da lei da localidade na interface do Evernote

Uma alternativa igualmente ruim e generalizada é simplesmente tomar a decisão que você viu na Dear Technical Company, sem pensar se isso faz sentido para você . "Precisa de um botão" Adicionar "? Nenhuma pergunta. Eu vi um desses botões. Segure a cerveja!

Dê uma olhada. Outro botão em que os usuários nunca o procurarão . De um modo geral, eles suspeitam que esse botão adicione algo novo ao grande espaço em branco vazio. Porque é lá que ela está.

Seus usuários querem que você siga a lei da localidade.

Então agora vamos usá-lo.

Bam.

Talvez você seja um designer nativo de UX e sempre imagine visualmente o que acontecerá se houver milhares de elementos em vez de cinco , e você entende que haverá um problema. Se o usuário criar uma tonelada de listas de reprodução, o botão diminuirá centenas de pixels!

Portanto, talvez seja melhor fixar o botão na parte inferior da lista para que ele fique sempre visível, independentemente do número de listas de reprodução.

Brilhantemente! Foi exatamente o que o Spotify fez.

Para obter um bônus (1), use o botão interno até que saia da tela e, nesse momento, mude para o item fixado e (2) torne-o mais visível do que o botão Spotify, que eu notei pessoalmente apenas alguns meses depois, clicando com o botão direito do mouse clique para adicionar músicas individuais às playlists!

Outra opção é reconhecer que não podemos mostrar de forma confiável e consistente o botão na parte inferior da lista. Onde é o lugar mais próximo e adequado para ela?

E a resposta (acho bastante óbvia) está no topo da lista .

Esse é o meu desejo

Droga! Foi exatamente o que Rdio, o concorrente do Spotify, fez antes da Pandora comprá-lo.

Reconstrução da memória (como toda a realidade, se você pensar sobre isso)

A conclusão é clara. Nunca venda sua empresa e sempre siga sempre a lei da localidade.

(Na verdade, existem três leis da localidade, e “colocar os elementos da interface do usuário onde eles influenciam a mudança” é apenas o primeiro. Se estiver interessado, leia aqui ).

Próximo!

2. Qualquer coisa, exceto listas suspensas

Sempre que você estiver tentado a usar a lista suspensa, pense em todas as alternativas possíveis.

Uma lição não óbvia no design de UX é que as listas suspensas geralmente são a pior opção .

Bem vindo ao inferno!

Eles nem sempre são ruins, mas os seguintes fatores jogam contra você:

As listas suspensas exigem muitos cliques / cliques . Um para abrir, vários outros para rolar até a opção desejada (no celular), outro para selecionar a opção correta e (no celular) o último a fechar (compare com um clique para selecionar as opções listadas).
As listas suspensas não mostram opções ! Para vê-los, você deve primeiro clicar na lista e, no celular, muitas vezes nem toda a lista é exibida de cada vez.
Nas longas listas suspensas , é difícil navegar . Pode haver mais de 195 itens na lista suspensa de países. Em algum momento, quase qualquer outra versão da interface do usuário será mais rápida do que rolar pela lista suspensa.

É bem simples, então vamos ver as principais alternativas à lista suspensa.

Se a escolha for entre duas opções ...

Temos algumas maneiras fantásticas de escolher uma das duas opções. Todos eles (a) mostram opções imediatamente e (b) requerem menos cliques / cliques.

Para perguntas que não têm uma resposta "padrão", tente o botão segmentado .

Se houver um estado padrão que corresponda a 'OFF', tente marcar a caixa . Também é bom para configurações que não afetam a alteração até o usuário clicar em "Salvar" ou "Enviar" .

O switch funciona de maneira semelhante: é bom para alterações que devem ser aplicadas imediatamente .

Sinalizadores e comutadores só fazem sentido quando há duas opções. Os itens a seguir são úteis quando o número de opções é de duas a cerca de cinco, para que você possa experimentar algumas delas.

Se a escolha estiver entre 2-5 opções ...

Acima, vimos os botões segmentados (aqui eles também são usados). Vale ressaltar que, com mais opções, os botões segmentados verticais oferecem maior flexibilidade ao longo do comprimento do texto.

Os interruptores (botões de opção) operam de maneira semelhante, mas são especialmente úteis para exibir subelementos de cada opção.

Para exibição detalhada de várias opções, os cartões são adequados.

Eu gosto do truque de exibir opções visuais literalmente, não uma lista.

Aparentemente, Tesla também gosta.

Se a escolha for entre muitas opções ...

Quando houver muitas opções e a rolagem for irritante, considere a conclusão do tipo de digitação antecipada . Parece uma barra de pesquisa que mostra os melhores resultados ao inserir caracteres.

Se você escolher uma data ...

Para uma data, as listas suspensas são as piores. Se eu fizer isso, realmente falhei como designer de UX.

Qual alternativa? Bem, isso depende das circunstâncias. Primeira pergunta: que tipo de data você escolhe ?

Datas de Poisson . Primeiro, datas mais prováveis e, em seguida, abaixo da lista, datas menos prováveis. Por exemplo, a data de uma reunião ou voo agendado.
Datas com alta volatilidade . Datas com aproximadamente a mesma probabilidade em um amplo intervalo de tempo . Por exemplo, um aniversário.

(Sim, chamei "datas de Poisson" em homenagem à distribuição matemática :-)

Diferentes tipos de controles são adequados para diferentes tipos.

Para as datas de Poisson, queremos fazer o máximo possível para simplificar a escolha das datas no intervalo mais provável (por exemplo, para agendar uma reunião, pode ser o próximo, digamos, 14 dias). É perfeitamente normal selecionar uma data fora desse intervalo será um pouco mais difícil.

O controle de calendário atende totalmente a esses requisitos para datas de Poisson. Se você sabe que é provável que a data caia nas próximas 2-4 semanas, você está com chocolate.

De maneira bastante criativa, o Google Flights, por padrão, oferece um voo em cerca de duas semanas, o que às vezes causa confusão (“eu não escolhi isso!”).

A caixa de texto da data é provavelmente a melhor opção para datas com alta variabilidade, onde (A) não há motivo para preferir uma data a outra, ou seja, (B) todas as opções são igualmente difíceis de escolher.

Lembre-se de que input [type = date] é seu amigo ... pelo menos na área de trabalho

Se você escolher um número ...

Os números vêm de várias formas. Provavelmente, você ficará tentado a colocar uma lista suspensa para a quantidade de algo: ingressos, pessoas, quartos etc.

Com que frequência você precisa de 1 ingresso? Com muita frequência

Com que frequência você precisa de 10 ingressos? Não é demais .

Com que frequência você precisa de 10.000 ingressos? Isso é algum tipo de piada cruel?

Aqui, novamente, lidamos com a distribuição de Poisson e devemos usar um controle deslocado para números mais baixos: por exemplo, um passo a passo .

Para números em uma ampla variedade (por exemplo, números de previdência social), você ainda não usaria a lista suspensa ... Espero .

Posso usar listas suspensas pelo menos em algum lugar?

Claro.

Lembre-se de que eles funcionam bem quando ...

Os usuários raramente precisam alterar o valor padrão.
Existem muito poucas opções . Por exemplo, no controle iOS, apenas três opções são visíveis por padrão.
O usuário não está no celular (na área de trabalho, muitos desses problemas são atenuados)

Talvez os mais observadores dentre vocês tenham notado que, na interface do Google Flights, que elogiei acima, na verdade existem três listas suspensas perceptíveis !

O que é notável: na interface móvel, não há uma lista suspensa de 'Economia'

Eles realmente fizeram um bom trabalho aqui. Problemas potenciais de usabilidade são rapidamente mitigados pelo seguinte:

Controles especiais que, quando pressionados, mostram todos os parâmetros (inclusive em um celular) - e substituem quatro listas suspensas (adultos, crianças, bebês no assento, bebês nos braços) por quatro steppers em uma lista suspensa .
Removendo a lista suspensa "Economia" na interface móvel
Poucas opções e padrões inteligentes para cada item

Ok. Vamos mais longe.

3. Teste de estrabismo

Se você for vesgo, a coisa mais importante deve ser a primeira a chamar a atenção e os elementos menos importantes - a última.

Pergunta de segurança: o que um usuário deve fazer para usar esta página ?

(Nota: deixei escapar, siga meus instintos, mas posso dar uma dica: este é o formulário de entrada de dados)

Eu sugeriria duas coisas :

Defina todas as caixas de seleção relevantes (??) na área amarela
Clique no botão azul Enviar

Você também pensou?

Erro e erro.

Os "sinalizadores" são, na verdade, campos muito pequenos para inserir dados de texto (se você ler a seção anterior, sabe que deve haver steppers).
A coisa mais importante ("Opções de localização" - a propósito, essa é uma maneira muito confusa de dizer "Enviar") é enquadrada por um botão cinza e imperceptível. Uma coisa muito menos importante ("Ajuda") fica ao lado, mas maior e mais visível.

O teste de estrabismo diz que a coisa mais importante deve ser a mais perceptível . Qual é a coisa mais importante aqui? Esta é uma caixa de texto (ou um passo a passo;) e um botão "Enviar".

Se você for mais longe, a próxima página é ainda pior.

O que você pressionará: o botão cinza à esquerda ou o mesmo botão cinza à direita ?

Espero que você tenha escolhido o esquerdo!

Com pressa neste formulário, eu realmente cliquei no botão Ajuda. Ai. Quando entrei pela segunda vez, cliquei em "Voltar", até mesmo escaneando os nomes dos dois botões fluentemente, porque em 99.999% de outros sites (com a direção da letra da esquerda para a direita), o botão "Voltar" fica sempre à esquerda

Novamente, se você apertar os olhos, não posso dizer o que é importante.

Como a lei da localidade e a exclusão de listas suspensas, o teste do estrabismo é bastante simples. Correção do esquema em 30 segundos.

Em um redesenho real, eu gostaria de colocar uma seleção do número de ingressos na mesma página. Mas esta é uma lei diferente para um tempo diferente

Isso funciona?

Diga você mesmo. Quatro interruptores e um botão. E um pequeno link abaixo.

Não estou tentando encontrar falhas no site AlaskaTrain.com , isso é comum.

Aqui está a tela de inscrição para minha rede social favorita com base nas recomendações do Quadrangular (bem assistida, é claro).

Como realmente enviar os dados inseridos (a coisa mais importante)?

Dica: o botão está oculto atrás do texto sem formatação no canto superior direito.

Mas o Quadrangular aqui simplesmente segue os padrões de design da Apple. Infelizmente, muitas vezes é encontrada uma violação do teste de estrabismo, mesmo entre os líderes do setor.

Uma maneira de identificar o elemento principal em uma página é considerar quanto das visualizações de página inclui uma ação específica. Aqui estão os indicadores relevantes do programa Anki (um programa para memorizar palavras, expressões e qualquer outra informação usando repetições de intervalo - aprox. Por.).

Para cada cem cartões que eu olhei, irei para ...

Mostrar resposta (aproximadamente 95 vezes)
Voltar à lista de cartões (duas vezes)
Comece a adicionar cartões (duas vezes)
Alguns outros recursos (muito raros)

Essa análise realmente indica qual interface funcionará melhor aqui.

Acentuar as funções usadas com mais frequência (em uma primeira aproximação, o "mais utilizado" é igual ao "mais importante")
Afrouxe, oculte ou remova recursos menos usados

Mas isso é apenas o começo (por exemplo, eu gostaria de ver se os usuários entendem que um botão com um sinal de adição sem assinatura adiciona cartões ). Porém, com apenas algumas heurísticas simples, reduzimos a interface confusa e confusa de dez elementos da interface do usuário para apenas cinco. Isso ... confira aqui meus cálculos ... metade do valor.

Para obter mais informações sobre o teste de estrabismo, assista ao meu vídeo demonstrando o redesenho do aplicativo da web Timezon.es . Ou, se você não tiver dez minutos, aqui está um artigo ilustrado do blog com o mesmo redesenho passo a passo.

4. Estudos de caso

Se você apresentar aos usuários novos conceitos, alguns exemplos valem mais que mil palavras que as pessoas ainda não leem.

Temos uma estranha tendência de tentar explicar tudo em palavras, quando os exemplos são muito mais claros.

Veja a nova startup Teeming.ai, que recentemente entrou em contato comigo para consultar o design da página principal. Cabeçalhos nesta página:

“Teeming elimina o isolamento no trabalho remoto ”
“Teeming ajuda na formação remota de equipes ”, é também “ aprender, resolver problemas, se divertir e motivar um ao outro ”
“Cheio e vídeo para [comunicação] síncrona ”
"Funciona com todas as suas plataformas de vídeo favoritas "

Mas aqui está a questão. O que realmente teeming faz?

Difícil dizer. É claro que isso está de alguma forma relacionado com ... positivo para trabalhadores remotos ? Mas eu não tenho idéias concretas de como isso vai me ajudar pessoalmente, então não vou experimentar este serviço, recomendá-lo etc.

(Desculpe, Teeming, você sabe, eu te amo).

Em seguida, dê uma olhada no IFTTT . Talvez você já saiba o que eles estão fazendo - então finja que não sabe e tente entender isso nos cabeçalhos da página principal:

Ilumine a estrada automaticamente para um cara com entrega de pizza (Dominó + Matiz)
(Instagram+Twitter)
(Google Assistant+iOS Calendar)

Você não precisa listar muitos exemplos para desenhar uma imagem bem clara: o IFTTT reúne aplicativos para fazer o que eles não são capazes separadamente .

O mais louco é que, na página principal, eles primeiro o explicam com o texto: o

IFTTT ajuda seus aplicativos e dispositivos a trabalharem juntos de uma nova maneira. O IFTTT é uma maneira gratuita de fazer com que todos os aplicativos e dispositivos se comuniquem. Nem tudo na Internet funciona bem, então nossa missão é construir um mundo mais conectado.

Bliiin.

Pergunta: o que melhor explica a ideia do aplicativo ? Exemplos ou descrição?

Pense em exemplos. A descrição é completamente clara apenas quando vejo alguns exemplos de como isso pode me ajudar.

Mas exemplos são necessários não apenas na página de destino. É o que vemos quando entramos pela primeira vez na ferramenta de gerenciamento de projetos Basecamp .

Em vez de uma página completamente em branco, você vê dois projetos claramente preparados que ensinam por exemplos como o aplicativo inteiro funciona (e também dão uma idéia de como o sistema ficará quando você o usar por um tempo).

Sério, posso ler bate - papos falsos de usuários falsos que discutem downloads de arquivos falsos e tarefas falsas no agendador .

Existe mesmo uma montanha ... amigável ? ... que diz que eu posso assistir a um vídeo explicativo de dois minutos sobre este tutorial.

E obrigado, Sr. Gora, pela orientação: vídeos de demonstração são outra maneira de aprender pelo exemplo ! Os exemplos mostram como meus projetos serão exibidos e o vídeo mostra como usar o software.

Brilhantemente.

Se seu aplicativo fornecer aos usuários algo para criar , uma demonstração é uma ótima maneira de mostrar as possibilidades com um exemplo.

Grande aplicação de desenho de procriar ganhou o Apple Design Award, o Editor's Choice na App Store e na App Store Essential, e John Gruber chamou de "inovador" e assim por diante - mas nenhum prêmio se agrada como exemplos da vida real do trabalho criado neste editor.

Este não é um aplicativo de desenho comum

.

Este não é o MS Paint.

A demonstração é uma ferramenta poderosa para entender os recursos do seu aplicativo.

Portanto, se seu aplicativo faz algo novo e desconhecido ou se baseia em conceitos novos e desconhecidos - você deve aprender como aprender com exemplos . Se os usuários não viram esse aplicativo antes, é necessário fazer a pergunta imediatamente: como dar um exemplo para torná-lo mais claro?

Em suma, minhas maneiras favoritas de fazer isso são:

Em qualquer página que tente oferecer ao usuário uma função / aplicativo, etc., mostre exemplos do que pode ser feito com esta ferramenta.
Use o método “bootstrap”, mostre dados de amostra e um exemplo de como será um aplicativo funcionando corretamente.
Incorpore estrategicamente informações de plano de fundo (como artigos, vídeos ou dicas) junto com exemplos de uso.
Seu aplicativo permite que você crie algo criativo? Mostre uma galeria de obras para estimular a imaginação.

Isso faz sentido? Venha e termine.

Quatro regras de UX intuitivo