Introdução ao design de UX: princípios de usabilidade para o designer de UX/UI (+ exercício de wireframe)

1. Promoção: [MÚSICA] Hoje vamos aprender sobre os princípios de usabilidade. Neste curso, eu combino exemplos de conceito e da vida real para garantir que você possa aplicá-los aos seus projetos e wireframes imediatamente. Aprenderemos por que as referências do mundo real são a base para sua configuração, quais são os modelos mentais e como criá-los. Vou apresentar-lhes princípios fundamentais como Jacobs Law, Hicks Law, e dizer-lhe por que quatro é o número mágico. Aprenderemos sobre consistência, status do sistema e por que a desconfusão é fundamental. Vou mostrar padrões de digitalização comuns que levarão seu design a outro nível. Finalmente, vamos nos aprofundar em um dos tópicos mais importantes, mas muitas vezes negligenciados design de UX, prevenção de erros e tratamento de erros para garantir que sua experiência do usuário esteja funcionando sem problemas, não importa o que aconteça. No final, eu lhes digo o pequeno segredo sobre por que as mídias sociais são tão viciantes. Este curso é para você se você é um iniciante ou um designer experiente e quer aprimorar suas habilidades de experiência de usuário. Esta é uma classe de molearning.io. 2. Desmistificação: o que é design UX/UI Design?: Por favor, note que este é um curso em duas partes. Portanto, você pode estar assistindo a parte sobre os princípios de UX ou a parte sobre os princípios da interface do usuário, idealmente você combinando os dois. De qualquer forma, quero ter certeza de que você é muito claro sobre os dois termos diferentes e o que significa combiná-los. Depois de começar a mergulhar mais fundo no mundo do UX/UI, você notará que há muito barulho e discussão sobre esses termos. O que exatamente eles incluem, se UX e UI devem ou não ser combinados em um termo. Deixe-me lançar alguma luz sobre isso do meu ponto de vista e experiência. Sem dúvida, o design UX é onde você começará a jornada. O que o design UX inclui? Em suma, você tentará entender padrões, comportamento e expectativas gerais. Tudo isso para criar uma estrutura geral e uma ordem de como o produto deve funcionar. Como resultado, você geralmente tem algum tipo de esqueleto e uma forma de wire-frames e fluxogramas que descrevem um produto ou recurso que você está sugerindo. Outro trabalho muito importante do design de UX é testar e iterar durante todo o ciclo de vida de um produto. Nunca há produtos online acabados. Enquanto a experiência do usuário, como o nome indica, tenta melhorar a experiência geral que o usuário tem, design da interface do usuário lida com os elementos de layout reais. Agora, o fluxograma e wire-frames projetados anteriormente ganham vida. Um bom designer de UI geralmente tem uma excelente ideia do que acontece durante o processo de UX e vice-versa. Durante o processo da interface do usuário, você definirá guias de estilo, cor, tipografia, componentes e o layout geral para todo o design responsivo. Você provavelmente criará um protótipo que será testado, que é onde você vincula novamente ao design de UX. Assim como trabalhamos lado a lado da UX para a interface do usuário, você precisará fazer o mesmo da interface do usuário ao desenvolvimento. Quando se trata de desenvolvimento, você ouvirá sobre duas partes principais. Desenvolvimento front-end, onde CSS e HTML, a chamada marcação, são escritos, e é aqui que a interface que vemos é criada. Isso é o que nos interessa como designers de interface do usuário. Depois, há o chamado back-end. É aqui que o código é escrito. Isso pode ser JavaScript, Java, Python ou qualquer outra linguagem. Isso realmente não nos incomoda como designers. É aqui que toda a lógica nos bastidores acontece. Nós, designers de interface do usuário, raramente temos muito a ver com isso. Front-end e back-end estão obviamente conectados e pode haver estruturas em vigor lidando com front-end como o ReactJS. Mas tudo isso pode ser deixado com segurança para a equipe de desenvolvimento. Você não precisa se codificar sozinho. No entanto, você deve entender os requisitos técnicos e os princípios básicos do design front-end como um designer de interface do usuário. Isso ajudará você a configurar seus arquivos e projetos da maneira correta. Agora, em uma grande empresa ou projeto ocupado, você pode lidar com o design da interface do usuário. Você pode apenas configurar designs na Figma e é isso. No entanto, você ainda terá sobreposição com o design UX bem como com o desenvolvimento e precisará conhecer seus conceitos básicos. Você também pode trabalhar apenas como designer de UX. Nesse caso, você provavelmente não fará nenhum trabalho de design, mas estará ocupado com pesquisas, estratégias e testes e definindo novos recursos. No entanto, você ainda precisará estar ciente de como as decisões de design de interface afetarão e influenciarão a experiência do usuário. Se você está trabalhando em pesquisas profundas de usuários, você pode fazer isso na verdade, mas geralmente você terá tanta sorte e dirá oi ao designer de vez em quando. Em alguns casos, no entanto, especialmente em empresas menores ou projetos freelance, você pode usar muitos chapéus. Quando falamos de design UX/UI, geralmente é esse tipo de área que você vê destacada aqui. Você provavelmente começará com alguma pesquisa, configurando personas e configurando seus próprios wireframes. Em seguida, você traduzirá esses wireframes em design e os entregará ao desenvolvimento. A maioria dos designers de UX/UI tende a perder um pouco da parte profunda do design UX. Isso é verdade. Mas não é grande coisa em projetos menores e simples. Esta é também a área com a qual vou lidar durante esses dois cursos. Observe que a pesquisa aprofundada da experiência do usuário não faz parte deste curso. É verdade que, em algumas postagens de emprego, o termo UX e UI são muitas vezes confusos. Você pode ver o design UX anunciado, mas eles estão pedindo que você configure qualquer coisa, desde wireframes até finalizar os arquivos de manipulação. Se alguma vez estiver em dúvida, basta desenhar este diagrama simples aqui em uma folha de papel e mostrar ao seu potencial cliente ou funcionário onde você está operando e certifique-se de que essa é a área que eles também estão procurando, e não apenas um chavão que eles estavam usando. Além disso, sejamos honestos, geralmente não é um processo direto no qual as coisas são transmitidas. Também na maioria das empresas, eles nem pretendem que seja assim. Eles sempre serão muitos para frente e para trás e muita discussão. Isso é realmente uma coisa boa porque somente quando UX, UI e desenvolvimento trabalham de mãos dadas, produtos realmente ótimos ganham vida. Não dê ouvidos aos guardiões. Encontre sua paixão e aproveite a sobreposição e aprendizado de diferentes campos do design digital. 3. Introdução: Hoje, analisaremos os principais princípios de design de UX uma maneira muito prática para que você possa usá-los imediatamente em seu wireframe e designs. Agora, os princípios que apresentarei hoje são baseados nas famosas Heurísticas de Usabilidade da Nielsen, bem como na minha própria experiência de mais de 10 anos de UX, design de UI e muitos livros e pesquisa. Agora, antes de começarmos, eu queria mencionar uma coisa. Há sempre muita discussão sobre se UX, UI é uma coisa andando de mãos dadas ou duas tarefas completamente separadas. Acredito firmemente que interface do usuário, a experiência do usuário, bem como o desenvolvimento front-end, são uma grande história de amor e não um fã de gatekeeping. Neste curso, você realmente descobre que estamos analisando as áreas em que o design de UX e UI se sobrepõem. Mesmo que no seu trabalho você provavelmente tenha um foco principal. No final, estamos entregando um produto para o usuário. Se isso for para você, então estaremos examinando os seguintes assuntos juntos. Vamos analisar as referências do mundo real e por que elas criam modelos mentais. Vamos falar sobre a lei de Jakob e outras páginas. A consistência é fundamental, lei de Hick e as escolhas de limitação. Por que o número mágico é realmente quatro. Padrões de digitalização e posicionamento de página Falaremos sobre feedback e dados de sistemas , tratamento de erros, prevenção de erros e, no final, vou falar um pouco sobre essa coisa mágica chamada dopamina. 4. Referências do mundo real e modelos mentais: Mesmo que estejamos projetando produtos digitais, referências do mundo real são cruciais. As referências do mundo real são um grande tópico nas chamadas heurísticas Nielsen. Ele basicamente afirma que a correspondência entre o sistema e uma convenção do mundo real é necessária para lógica e compreensão. Quando dizemos referenciar o mundo real, isso vai muito mais longe do que apenas usar símbolos familiares. Já em 1943, muito antes da Internet e da heurística Nielsen Normanda, Kenneth Craig, filósofo e psicólogo, escreveu a natureza da explicação, onde ele falou sobre uma coisa chamado modelo mental. Um modelo mental é basicamente a ideia de como algo funcionará. As pessoas criam modelos mentais com base em experiências passadas e as armazenam como um conceito em sua mente. Eles esperam que experiências novas e semelhantes sigam o mesmo padrão. Se houver uma incompatibilidade entre um modelo mental e o chamado modelo conceitual do produto que você está construindo, então os usuários irão antes de tudo, não realmente entendê-lo ou tomar muito esforço para isso, e no pior dos casos, eles podem rejeitá-lo. Se você, no entanto, conseguir descobrir esses padrões familiares, isso geralmente é feito por meio de pesquisa ou investigação, então você pode usá-los e criar uma transição suave entre o mental e o modelo conceitual. Eles não vão ser idênticos, e tudo bem. Você perderá alguns dos antigos e adicionará alguns dos novos, mas você terá esse núcleo familiar para construir. Um bom exemplo para isso é um processo de registro. Você pode ter tido isso antes. Você baixa um aplicativo e a primeira coisa que obtém é tela de um registro para preencher todas as informações e, às vezes, até mesmo os detalhes do seu cartão de crédito antes mesmo de ver um único coisa. Como isso fez você se sentir? Imagine que você está entrando em uma loja e na porta antes mesmo de entrar, você está parado. Você é solicitado a preencher seus dados pessoais e fornecer o número do seu cartão de crédito. Eles vão dizer que querem vê-lo apenas para garantir que tudo esteja coberto, caso você decida comprar mais tarde. Você provavelmente achará isso um pouco estranho e desconfortável, e francamente dito, simplesmente desnecessário. Porque no seu modelo mental funciona assim, você entra em uma loja, olha ao redor e escolhe um produto. Depois de escolher esse produto, você decide pagar ou se registrar, no nosso caso, para receber o produto ou serviço escolhido. É uma abordagem muito mais natural para solicitar o registro em uma loja online quando um usuário decidiu comprar ou testar algo. Para ficar com nosso exemplo de loja, é importante notar que o modelo mental não é apenas um comportamento estrito, mas também regras sociais que aprendemos. Se eu entrar em uma loja e o assistente de loja estiver ocupado, eles provavelmente me darão um aceno rápido ou sorriso apenas para me informar que eles me viram e estão apenas terminando o que estão fazendo. Em nossa loja online, isso pode ser traduzido em uma barra de progresso simples enquanto nosso conteúdo ainda está sendo carregado. Isso é o mesmo para formulários que já estão preenchidos, coisas que são colocadas no meu carrinho de compras e depois foram olhar para outra coisa. Espero que isso deva ser lembrado só porque na vida real, aprendi que funciona dessa maneira. Além disso, certifique-se de usar linguagem do mundo real em vez de terminologia técnica. Em vez de clicar para enviar, use algo como, compre agora. Se o seu conteúdo for muito precioso, pelo menos dê uma pequena olhada às pessoas. Você vê que, com muitos portais de notícias, você pode navegar pelas manchetes, mas para ler mais adiante, você é solicitado a comprar uma assinatura ou pagar de outra forma. Surpresa, como um jornal da vida real. Agora é importante notar que usar convenções da vida real não significa imitação da vida real. Como você viu com nosso exemplo de loja, usamos apenas o modelo mental. Não recriamos uma loja em toda a sua aparência online. Além disso, garante que os padrões escolhidos sejam baseados em pesquisas e testes sólidos. Não posso enfatizar isso o suficiente. Nunca suponha que sua compreensão ou modelo mental corresponda ao do usuário. Às vezes, no entanto, você pode ter seus motivos para jogar ao mar essas convenções juntas, ou seu produto pode ser tão radicalmente novo que sua pesquisa mostra que não há realmente um modelo mental forte para construir. Nesse caso, você está basicamente criando um novo modelo mental. Isso geralmente é feito por meio de treinamento. treinamento pode ser algo realmente simples, como telas de integração ou tutoriais em vídeo. Isso pode ser algo muito pequeno ou um curso intensivo. Você ainda usará elementos como a linguagem do usuário, regras sociais e certos modelos mentais incorporados. Como de costume, tudo é possível, mas você precisa estar ciente do caminho para o qual está projetando. Para resumir, use referências do mundo real. Baseie você projeta em modelos mentais existentes. Referências do mundo real não significa imitar o mundo real. Se não houver um modelo mental subjacente, certifique-se de treinar, educar e integrar o usuário para criar um modelo mental. 5. Lei de Jakob — outras páginas: Além do Realworld, outros sites e aplicativos são o principal lugar onde as pessoas criam modelos mentais sobre como as coisas devem estar funcionando. lei de Jakob, cunhada por Jakob Nielsen, afirma que os usuários passaram a maior parte do tempo em outros sites, portanto eles preferem que seu site funcione como qualquer outro lado com o qual já estejam acostumados. Digamos, estou pedindo que você encontre uma pessoa no Facebook ou no LinkedIn ou em qualquer nova página da comunidade semelhante. Você não usou essa página antes, mas provavelmente ainda estava procurando uma barra de pesquisa. Você saberia aproximadamente como seria, ou seja, um lugar para digitar e um botão para chamar a ação de pesquisa. Às vezes, talvez você nem precise desse botão porque já aprendeu que pressiona “Enter” para ativar a pesquisa. Agora, pedimos à sua avó de 90 anos para fazer o mesmo. provável que você esteja mais confortável e muito mais rápido ao concluir a tarefa, pois tudo já é familiar para você. Se todos os sites seguirem uma determinada convenção, mas você ancorar essas convenções em muitos lugares em sua página, então você está pedindo ao usuário que comprometa um pouco de tempo para descobrir como as coisas são trabalhando. Não transforme seus usuários em uma avó de 90 anos sem motivo. Vamos dar uma olhada em uma estrutura típica. Normalmente, começamos com o cabeçalho que contém informações como o logotipo e, a propósito, aprendemos, sempre que clicamos nesse logotipo, voltamos para casa. Além disso, o usuário estará procurando a navegação no cabeçalho, coisas como um símbolo de busca, botões de login, botões de compra agora e checkout e, claro, eles estariam esperando coisas como mudar o idioma de toda a página como um recurso no cabeçalho. Obviamente, você não precisa colocar tudo isso em seu cabeçalho se não for relevante. Se você está vendendo um pequeno produto em algum lugar da sua página, não precisará de um botão Checkout no cabeçalho. Às vezes, você também pode ver que as pessoas adicionam informações de contato ou algo assim para configurar uma chamada de vídeo no cabeçalho. Se esse é o principal objetivo de seus negócios, isso é realmente importante tê-lo no cabeçalho. Você pode brincar com ele, mas você deve seguir as regras básicas. Logo abaixo do cabeçalho, geralmente encontramos uma área chamada nossa área de herói ou nossa principal introdução. O que isso faz, ele comunica a ideia principal da sua página. Este é o espaço para realmente brilhar, explicar sua ideia, produto ou serviço e você também oferecerá um call to action pedindo aos usuários que comprem ou se inscrevam nessa área. Este também é o lugar para enlouquecer. Aqui, você pode ser realmente criativo. Você pode ter vídeos, ter animações, você pode ter imagens ou textos incríveis, mas este é o lugar onde sua marca entra ao vivo. Abaixo da seção herói, você encontra o conteúdo. Estes são todos os detalhes, todas as informações e tudo o que você quer contar ao usuário. Mais uma vez, aqui seguimos a lei de Jakob ainda. Isso significa que se eu tiver um texto e sublinhar uma palavra no texto, o usuário assumirá que posso clicar nele e é um link. Se eu mostrar um acordeão, espero que ele abra e feche. Formulários, os usuários tentarão preencher e assim por diante. Meu conselho seria manter essas regras básicas de comportamento aprendido, bem como uma hierarquia visual sólida. Dentro desses limites, você pode realmente fazer o que quiser. No final da sua página, você encontrará o rodapé. O rodapé é sempre o último elemento. Aqui, você verá o quão poderosa é a lei de Jakob porque os usuários sempre esperam coisas como detalhes de contato ou informações que não encontraram no cabeçalho no final do rodapé. Na maioria das vezes, eles vão rolar para baixo até ele se, por exemplo, estiverem procurando sua localização. É por isso que adicionar o Google Maps em cima do rodapé geralmente é uma boa ideia. Este também é um ótimo lugar onde as pessoas procuram links para páginas, como publicação de emprego sobre seção, caso você não inclua isso em seu cabeçalho e, claro, links para páginas como como termos e condições e impressão. Agora, isso não significa que você não pode quebrar ou jogar com essas convenções ou inventar algo completamente novo. Você até deveria quebrá-los de outra forma, todas as páginas seriam as mesmas. Mas faça isso com deliberação e propósito para as necessidades de seus usuários. Basta mover seu carrinho de compras e a barra de pesquisa no canto inferior esquerdo pode não ser tão revolucionário, mas simplesmente confuso. Antes de terminarmos, vamos dar uma olhada em um exemplo da vida real. Aqui, temos o site do Slack e você pode ver que aqui está o cabeçalho e, por exemplo, conversar com as vendas e experimentar gratuitamente como os pontos do menu principal. Você pode ver, você pode realmente enterrar isso. Então, aqui, temos nossas grandes seções de heróis onde vemos o que é o Slack, recebemos call to action novamente para tentar ou entrar e, à medida que rolamos para baixo, obtemos o conteúdo e podemos ver que é realmente bom animações explicando diferentes recursos. Aqui, temos pequenos tutoriais sobre como começar, e terminamos aqui com o rodapé, onde temos novamente, links para todas as partes importantes da página. Vamos resumir. Os usuários passam mais tempo em outras páginas, portanto, esperam que seu site funcione como qualquer outro. Use padrões aos quais os usuários estão acostumados. Esses padrões podem ser estruturais, como a estrutura da página ou o layout geral, bem como comportamentais. Por exemplo, esses botões são clicáveis. Sinta-se à vontade para quebrar esses padrões, mas faça isso com deliberação e propósito para as necessidades de seus usuários. 6. Consistência é chave: A consistência é um princípio fundamental do design UX. Consistência significa que as mesmas palavras, elementos e ações devem significar o mesmo e seguir as mesmas convenções para serem previsíveis e aprendíveis para o usuário. Existem dois tipos de consistência no design UX: consistência interna e externa. Um exemplo para uma consistência externa será uma convenção aprendida em seu campo. Como em uma loja, você veria um pequeno carrinho de compras e esperaria encontrar seus produtos salvos lá. Um botão, você espera que ele seja clicável e acionável. Um menu de hambúrguer, para mostrar mais opções de menu. Além disso, como sabemos da lei de Jacobs, não apenas aprendemos o que eles fazem, mas também aprendemos onde esperá-los. Como o carrinho de compras e nosso menu de hambúrgueres, esperamos que isso fosse encontrado em algum lugar no canto superior direito em nossa navegação. Agora, a consistência interna, por outro lado, lida com tudo o que projetamos dentro do nosso próprio site e da nossa própria marca. Por exemplo, um botão, você pode ter escolhido uma cor de destaque específica , neste exemplo, estamos usando uma laranja como nossa cor de destaque, então estamos ensinando algo aos nossos usuários aqui. Estamos basicamente vinculando a cor a uma ação, então, se você usar essa laranja agora para um título que não é clicável, isso confundirá o usuário e também diminuiríamos a força desse significado de cor de sinal. No entanto, se você usá-la em um link dentro de um texto, isso fará muito sentido porque esse link é acionável e clicável. sua página, você terá muitas chamadas para ações, então precisamos ter certeza de que elas são consistentes na aparência, bem como na redação. Também podemos criar um botão como um botão primário como você vê aqui em nossa cor de destaque e uma versão secundária enfraquecida para algo que ainda queremos destacar, mas não é o nosso principal prioridade. Essa consistência atravessa todo o seu design e geralmente é definida nas chamadas folhas de estilo em nosso design. São elementos como cor, tipografia, hierarquia e espaçamento, bem como elementos de layout geral, como cartões, ícones ou imagens. Essa consistência garante que nossa interface de usuário seja previsível e aprendendo para o usuário. Pode-se argumentar que essa consistência é realmente algo desenvolvido nas folhas de estilo em nosso design de interface do usuário e não UX. No entanto, acredito fortemente que essa consistência e o sistema por trás dela devem ser o núcleo do seu design UX. Vamos resumir, as mesmas palavras, elementos e ações devem significar o mesmo. Consistência externa significa convenções já estabelecidas pelo usuário. Consistência interna significa a consistência visual e funcional dentro do seu produto. Certifique-se de criar um sistema de design contendo guias relevantes para definir a consistência em todas as áreas. 7. Lei de Hick— escolha e limitação: Para não sobrecarregar os usuários, é importante minimizar a escolha. A lei de Hick afirma que quanto mais escolhas oferecidas, mais tempo levará para tomar uma decisão. Esse tempo de decisão aumenta logaritmicamente. Obviamente, nem todos temos o mesmo tempo de reação. Depende muito de coisas como o nosso QI, se a configuração da página for familiar ou se a usarmos antes. Mas em poucas palavras, menos é mais rápido. Observe que a lei de Hick se aplica apenas à tomada de decisão rápida, coisas como escolher um produto de produtos similares. Se é sobre tomada de decisão aprofundada que envolve pesquisas, como qual carro você compraria ou qual curso universitário você tomaria, a lei de Hick não se aplica. A outra exceção são listas ordenadas com itens conhecidos, algo como escolher um país ou um idioma. Enquanto estiver em ordem, alfabética ou numericamente, e familiar para o usuário, será fácil navegar, pois o usuário procurará um item específico. Por isso, a lei de Hick não se aplica. Para evitar sobrecarga, sempre execute sua configuração através dessa lista de verificação em sua cabeça. Limpo. Eu realmente preciso desse item? Cluster. Agrupe itens semelhantes juntos. Considere também que um grupo de itens semelhantes pode ser movido para uma página totalmente nova ou para uma página de submenu. Ocultar. Ele pode ser armazenado até que seja necessário, como em um botão Mostrar tudo? Esse conceito é chamado de divulgação progressiva. Um ótimo exemplo são os blocos de preços. Todas as informações desnecessárias são limpas e você está apenas dando algumas opções relevantes. Temos um conjunto de três faixas de preço diferentes e, dentro desses intervalos, temos uma hierarquia clara. Obviamente vemos o mais dominante, o preço, depois vemos alguns dos recursos incluídos e o call to action para cada um deles. Quando estiver interessado em uma das ofertas, você pode clicar no pequeno link dizendo “mais”, e você verá todas as informações extras ocultas até agora. Ao falar sobre limitar a escolha, pode ser tentador oferecer apenas uma. Eles podem ser definidos em algumas situações. No entanto, a escolha, quando apresentada da maneira correta e da quantidade, também dá ao usuário a sensação de estar no controle. Um ótimo exemplo de redução da escolha para conteúdo misto que você pode realmente usar um pouco sem perceber são os três pequenos pontos. Você os encontrará em seu navegador ou muitas vezes em artigos ou mídias sociais. Se você clicar neles, você terá mais opções que provavelmente não usará o tempo todo mas ainda são relevantes. Às vezes, no entanto, você pode ter uma página onde você precisa incluir todas as informações e todos os detalhes. Isso pode ser por motivos legais, ou porque é uma compra, como um contrato de telefone ou abertura de uma conta bancária, onde você realmente quer que o usuário esteja ciente que está comprando e certifique-se de que eles obtenham o caminho certo. Esta página é um ótimo exemplo sobre como isso poderia ser feito. Mais uma vez, não tenho relações com essa marca ou página. Estou simplesmente mostrando isso porque acho que a experiência do usuário é excelente. Aqui, você pode realmente ver o princípio de limpar o cluster e ocultar. Você pode ver que muito do que foi limpo já aqui fazendo esses suspensos, e então foi agrupado nesses três modelos que podemos escolher. Então, aqui em baixo, você ainda pode ver há muita informação, mas tudo foi agrupado muito, muito bem, dado um título, e você pode ver que dentro de cada uma dessas categorias, não há mais do que talvez cinco itens. Então temos o terceiro aspecto de esconder. Este é um ótimo exemplo de divulgação progressiva, e você pode clicar e ver que ele me dá, uma vez que estou interessado, todas as informações adicionais que estou procurando. Para resumir, quanto mais escolhas, mais tempo leva para tomar uma decisão. Isso não se aplica à tomada de decisão complexa, nem se aplica a listas ordenadas com itens conhecidos. Sempre tente seguir o método clean, cluster e hide para otimizar. 8. O número mágico é quatro !: Quantas coisas podemos realmente lembrar? cedo ou mais tarde, ao trabalhar em UX, você se deparará a chamada lei de Miller que afirma que nossa memória de trabalho pode, em média, conter sete itens, mais ou menos dois. Bem, na verdade não. Na verdade, a lei de Miller é uma lenda urbana. psicólogo Alan Baddeley, em 1994, revisou o trabalho de Miller enquanto sentia que há algo estranho. Surpreso, ele descobriu que não era realmente um papel, mas uma palestra de Miller que cunhou a famosa lei. Era mais como se Miller estivesse pensando em voz alta sobre essa teoria que ele tinha. Não foi baseado em pesquisas sólidas. Baddeley e alguns outros, como Nelson Cowan, voltaram e fizeram mais algumas pesquisas. O que eles realmente descobriram foi que o número mágico era quatro. Quatro é a quantidade de coisas que uma pessoa comum pode armazenar em sua memória de trabalho. Um bom exemplo disso são números de telefone que geralmente agrupamos em três ou quatro. Vejamos algo mais relacionado à UX. Aqui está uma navegação e tem oito pontos de navegação, por isso parece bastante lotado. De acordo com a lei de Miller, isso ainda estaria bem. Mas vamos ser honestos. É um pouco demais para entender e lembrar. Vamos ver o que acontece quando aplicamos nossa nova regra. Eu o quebrei ao mínimo de pontos que preciso para que minha navegação funcione. Agora, eu ainda acabei com cinco. Já parece muito melhor, mas acho que ainda podemos melhorá-lo. Poderíamos, por exemplo, adicionar alguma hierarquia. O que eu fiz aqui é que fiz um contato e decidi que este é o meu ponto mais importante na navegação e o transformei um contato e decidi que este é meu ponto mais importante na em um call to action. A propósito, ao posicionar esses itens, os usuários tendem a se lembrar melhor do primeiro e do último item. Este é um achado não por mim, mas por Hermann Ebbinghaus, que chamou isso de efeito de posição serial. Às vezes você pode não conseguir restringir estritamente as coisas para quatro. Por exemplo, se você estiver tendo uma barra de ferramentas em um software. O que você pode fazer aqui como um ótimo exemplo é agrupá-los, adicionar algum espaço em branco e também adicionar alguns ícones. Agora, no nosso exemplo aqui, se você precisasse adicionar mais alguns pontos de navegação à camada superior, você poderia fazer isso adicionando um pouco mais aqui à esquerda com o logotipo, deixe algum espaço no no meio e, em seguida, tenha sua navegação à direita. O importante é que há algum tipo de estrutura ou estratégia sobre como eles são agrupados. No nosso exemplo, no entanto, decidi adicioná-los como um submenu. Também é muito mais claro porque agora tenho tudo o que tem a ver com o serviço em um ponto. Nesse momento, o usuário pode esquecer o resto da minha primeira camada de navegação e se concentrar nisso. Além disso, se eu quisesse adicionar mais alguns pontos de navegação mais tarde, isso não seria um problema e eu não teria que alterar toda a configuração da minha navegação. Se se tornar muito longo, eu adicionaria alguns ícones ou alguma estrutura para dar uma orientação melhor. Vamos resumir. Sete mais menos 2, chamado Lei de Miller, é um pouco de uma lenda urbana. Em média, nossa memória de trabalho pode conter quatro itens. Use a hierarquia visual para criar grupos de no máximo quatro. Por exemplo, espaços em branco ou adicionar um call to action podem ser uma boa forma de fazer isso. Adicionar ícones ou imagens pode ser uma boa solução para itens de lista mais longos. 9. Posicionamento e padrões de digitalização da página: Pesquisas do Nielsen Norman Group descobriram que 80% dos usuários apenas digitalizaram qualquer novo site que encontraram. Com a tecnologia de verificação ocular, diferentes padrões de digitalização foram identificados. Eles dependem de fatores diferentes, como o conteúdo que você está exibindo, o histórico do usuário e o conhecimento deles. Gostaria de apresentá-los a alguns desses padrões hoje. Você não é obrigado a seguir esses padrões. Existem outros sites bem-sucedidos por aí que usam uma abordagem completamente diferente. Você deve, no entanto, estar ciente dos padrões pois eles resultam na familiaridade, que possa ser uma maneira muito suave para que possa ser uma maneira muito suave de apresentar um usuário à sua página, permitindo mais foco no conteúdo real como a estrutura geral é familiar. Antes de começarmos com os padrões reais é importante mencionar a direção da leitura. Ao ler em um idioma que se move da esquerda para a direita, os usuários também começarão a digitalizar dessa maneira. Se eles lêem da direita para a esquerda, então é apenas um contrário. Como a maioria dos idiomas são escritos da esquerda para a direita. Essa é a abordagem mais popular online. É também a linguagem com a qual estou mais familiarizado e projetar, então usarei esta para meu exemplo. No entanto, se você estiver segmentando outra direção de leitura específica, certifique-se de se adaptar. Os usuários geralmente digitalizam passagens informativas com o chamado padrão Z, pelo qual eles digitalizaram da esquerda para a direita, depois descem e depois digitalizam novamente da esquerda para a direita. Aqui está um exemplo de um padrão Ztípico. Você encontrará isso muito nas seções de heróis. O importante é sempre terminar em um call to action. Você encontrará muitas páginas como essa com um call to action no lado esquerdo. Agora você pode interpretar isso como um padrão Z estendido, um chamado padrão em ziguezague. Mas pesquisas sugerem que, como os usuários esperam que o canto superior esquerdo seja o logotipo e a navegação, muitas vezes é ignorado na primeira visualização para que os usuários se concentrem diretamente no conteúdo. Isso poderia levar a algo assim chamado Triângulo Dourado. Que você está usando tecnologia de verificação ocular, você não vai saber se é um ou outro, mas o importante é que eles são baseados no mesmo princípio e acabam com exatamente o mesmo design. Observe também que nossos pontos de digitalização são compostos de texto, imagens e call to action um trio feito no céu. Em páginas com texto intenso, como artigos, entretanto, digitalizamos o chamado padrão F. Isso significa que começamos no topo novamente, digitalizamos para a direita, mas depois descemos, digitalizamos para a direita novamente, mas não na primeira vez, e a partir daí, digitalizamos verticalmente. O padrão F é bastante incompreendido. Não se trata de digitalizar páginas inteiras. É realmente sobre páginas que são muito pesadas em informações, como artigos, especialmente em dispositivos menores, como telefones. O último, mas um dos padrões mais importantes que eu gostaria mostrar é a chamada varredura de bolo de camada. Isso mostra uma fixação em títulos, subtítulos e imagens, então qualquer coisa que você fizer enviada por hierarquia visual. De acordo com a Nielsen Norman Group Research, essa é a maneira mais eficaz para os usuários digitalizarem uma página. De novo e de novo, um bom exemplo sobre como UX e UI realmente andam de mãos dadas. Ao entrar nesta página, o que provavelmente mais chamará sua atenção é o grande título que lhe dirá imediatamente sobre o que é um tópico. Você também verá uma chamada à ação que está na cor de destaque para que você possa se inscrever em algo. Então você tem um texto com palavras destacadas. Se você rolar, você obterá pequenos blocos para que eles lhe digam que há princípios de UX, Figma e conceitos básicos de código, e, em seguida, à medida que você digitaliza, você terá mais pedaços. Aqui, por exemplo, você obtém os pedaços do título e, em seguida, as informações reveladas. A maneira como você vai escanear isso provavelmente é do maior recurso mais proeminente para os pequenos detalhes quando você estiver interessado nas manchetes. Vamos passar por isso passo a passo. Quais são as coisas que podemos usar para gerar o padrão de digitalização e chamar a atenção? Bem, o passo 1 é usar manchetes fortes. Isso significa manchetes fortes na redação, muito claros e também na hierarquia, como garantir que haja uma hierarquia que já definida no UX, quais são as coisas importantes e quais são as categorias abaixo? Somente digitalizando as manchetes, eu já deveria saber tudo o que está acontecendo no seu site. A próxima coisa é destacar palavras-chave. Certifique-se também de usar links, aqui, por exemplo, que são descritivos. Não faça coisas como clique aqui e, em seguida, basta sublinhar para aqui realmente usar as informações e destacá-las. Use marcadores, ícones e outros encurtadores gráficos. Apresentar uma conclusão primeiro, os chamados parágrafos invertidos. Certifique-se de que o usuário entre e já receba o grande benefício se ainda estiver interessado, ele continuará digitalizando. Para recapitular, nossos padrões, o padrão Z é para conteúdo informativo, como suas seções de herói, ou a introdução, tudo o que é rápido e em um olhar e geralmente onde você quer um call to action. O padrão F é para páginas com muitos conteúdos, mas realmente falando aqui sobre artigos, informações pesadas em texto, especialmente em pequenos dispositivos, como telefones celulares. A digitalização de bolos em camadas é realmente sobre como estruturar toda a sua página de cima para baixo e é tudo sobre como criar uma hierarquia. 10. Feedback e o status do sistema: status visível do sistema nos ajuda a capacitar nossos usuários. O usuário deve sempre ser informado sobre o que está acontecendo e receber feedback imediato para qualquer ação. Pense nisso como um botão de elevador. Imagine que você pressione e absolutamente nada aconteceria. Você pressionará novamente e o considerará quebrado. No entanto, simplesmente acendendo, você entende que sua ação foi entendida e o elevador está a caminho, só vai demorar um pouco. É o mesmo ou mais on-line. Toda ação precisa de um feedback. Esse feedback pode ser um feedback visual, como um feedback de áudio, um sinal sonoro, um feedback háptico, como quando seu telefone está vibrando, quando você recebe uma mensagem ou pode ser um feedback visual. O feedback do status do sistema pode ser dividido em quatro categorias: feedback constante, feedback de possibilidades, feedback de ação e feedback capacitador. Vejamos o feedback constante número um. Com isso, queremos dizer feedback que é sempre comunicado para evitar frustração ou momento de surpresa. Exemplos seriam algo como a conexão com a Internet, a duração da bateria ou pode ser o tempo restante. Os bancos, por exemplo, usam isso quando você está logado, pois eles o bloqueariam automaticamente após ficar inativo por um certo período de tempo. O segundo tipo de feedback é o chamado feedback de possibilidade. Isso basicamente destaca toda a interação alguém poderia ter com a página. Isso é algo como você passar o mouse sobre um link ou um botão e ele muda ligeiramente de cor para mostrar que é clicável. Também pode ser uma caixa inteira mudando aparência como cor ou sombra quando você passa o mouse, indicando uma possível interação. Ou coisas como um campo de entrada em que você pode clicar ou ícone de calendário quando você passar o mouse sobre ele, ele se expandiria. O terceiro formulário é um feedback clássico para ação, como ao clicar em um menu suspenso ou em um botão enviando um formulário. Seja qual for o resultado, você precisa manter o usuário informado. resultado possível pode ser o seguinte , indicando tempo de espera, como uma barra de carregamento ou uma contagem regressiva ou algo semelhante indicando que há algo acontecendo, mas leva apenas um segundo para ser carregado. Isso é realmente importante que você tenha isso em segundo plano, mesmo que em seu teste as coisas sejam super rápidas e quase não haja tempo para carregar. Isso pode ser muito diferente em outros dispositivos ou em outras conexões com a Internet. Outro resultado pode ser que a ação esteja concluída. Isso pode ser óbvio como se uma nova página estivesse aparecendo ou um menu suspenso aberto. Mas às vezes não é tão óbvio, como quando você está enviando um formulário. Então você só precisaria mostrar uma breve mensagem de sucesso de confirmação que pode ser tão simples quanto um carrapato, bem feito, ou obrigado. O terceiro resultado é que algo dá errado. Nesse caso, você precisa conscientizar o usuário sobre isso. Você precisa mostrar uma mensagem de erro e eles sugerem uma solução sobre como resolver isso. Agora, o último tipo de feedback é um pouco diferente, vou chamá-lo de feedback capacitador. Basicamente significa que, em qualquer fase, informamos ao usuário onde ele ou ela está, como se mover para trás e para frente e como deixar qualquer situação. Exemplos para isso podem ser uma migalha de pão clicável indicando onde estamos. Também em um checkout ou cadastro, você verá as etapas destacadas do processo mostrando ao usuário a posição atual. Há mais raciocínio psicológico por trás de fazê-lo dessa maneira e quebrar tudo em pequenos pedaços menores. No entanto, também é realmente ótimo simplesmente para orientação. Compreender o que está acontecendo em cada etapa do caminho não só faz com que seus usuários se sintam no controle, mas também cria um senso de confiança que dá liberdade para explorar seu produto ainda mais. Vamos resumir. quatro categorias principais de feedback: feedback constante, isso é algo como comunicar o status atual da bateria, feedback de possibilidade, estou indicando uma possível ação para o usuário, como se eu estivesse mostrando quais áreas podem ser clicadas no meu site, feedback de ação, comentando sobre a ação de um usuário, então isso é quando o usuário tomou uma ação, preencheu um formulário, clicou no botão, estou comunicando sucesso ou erro, por exemplo, capacitando o feedback, onde estou? Sempre mostrando claramente onde o usuário está e como navegar para qualquer área desejada. 11. Prevenção de erros: A prevenção de erros é uma das heurísticas de usabilidade mais importantes. Muitas vezes é negligenciado, mas faz toda a diferença. Quais são as formas comuns de evitar erros? Quero mostrar três categorias. O primeiro é lembrar de prevenir, o segundo, sugestões e restrições, e o terceiro confirmando ações. Vamos começar com o número 1, lembre-se de evitar. Isso significa que antes de um erro ou um resultado desagradável acontecer, você dá um pouco de gritos aos seus usuários. Um exemplo seria que seu telefone lembra que sua bateria está fraca antes de realmente acabar. Observe também que aqui, além de simplesmente voltar e carregar seu telefone, você recebe outra solução, como colocá-la em um modo de baixa energia se você estiver em movimento. Essa solução com um clique é realmente útil e aprenderemos mais sobre isso ao falar sobre o tratamento de erros. Lembre-se de evitar também pode ser algo como um lembrete de que uma aula na qual você se inscreveu está começando ou que você precisa confirmar um compromisso. Vamos enfrentá-lo. Os pop-ups são irritantes, então você só quer usá-lo se seu usuário perder o acesso ou perder alguma coisa. Idealmente, dê aos usuários a chance aceitar e sair desses lembretes. Número 2, sugestões e restrições. Sem perceber muito, você usará isso o tempo todo sozinho. Vejamos um exemplo de reserva simples. Como de costume, estou apenas usando esse exemplo sem relação com a empresa. Só estou mostrando uma ótima experiência do usuário da vida real. O que a sugestão automática faz, é realmente ótimo quando começo a digitar. Digamos que eu vou a este lugar de Berlim, e eu não tenho certeza do que é chamado, algo como Branden, e então eu já vejo o que poderia ser, então é Brandenburg. Digamos que eu ainda digite isso da maneira errada. Coloquei brandinbur e ainda vai funcionar o que estou procurando. Isso é realmente, muito bom, porque senão eu teria colocado, escrito da maneira errada, e então eu teria acabado sem resultados de pesquisa. Os resultados sugeridos são algo de um sistema que funciona em segundo plano. Você não precisa definir quais são as sugestões, mas precisa projetar o espaço para elas em seu wireframe e, em seguida, certifique-se projetar e desenvolver planos e testar esse recurso em conformidade. Vamos escolher isso e passar para nossa próxima coisa, que são as restrições. Agora, um calendário é um bom exemplo para restrições. Porque aqui eu preciso escolher uma data de início e uma data de término. Agora minha data de término da reserva não pode ser antes da minha data de início. Bem, isso parece muito óbvio. Mas, para ser honesto, isso é algo em que muitos erros acontecem se você deixar as pessoas digitar as datas. Em seguida, passamos para o último filtro que eles nos deram e aqui você também pode ver que eu não preciso digitar apenas um número, mas já consigo filtrar. Por exemplo, se eu adicionasse animais de estimação, ele poderia filtrar automaticamente todos os apartamentos onde não são permitidos animais de estimação. Só vou obter os resultados com os quais eu realmente posso trabalhar. Este é um ótimo exemplo de uma experiência de usuário suave que evita muita frustração mais tarde. Nosso último é confirmar ações. Ao clicar em um botão, você geralmente já confirma uma ação. No entanto, há ação com consequências maiores. Portanto, você quer ter certeza de que seu usuário está ciente dessa ação. Aqui, por exemplo, tenho a página onde hospedo meu site e eles obviamente não querem que as pessoas excluam acidentalmente seus sites. O que eles fazem se você for para a liderança é que eles, primeiro lugar, chamam de zona de perigo para deixar bem claro. Então, se eu clicar em Excluir este site, eles me pediram para inserir o nome da página que estou prestes a excluir. Eu clico aqui apenas quando inseri um nome, vou chamá-lo de teste de página aqui. Em seguida, o botão de exclusão fica ativo. Outro exemplo é enviar algo como boletins informativos onde você obteria um resumo do que você está prestes a enviar e para quantas pessoas e então você precisaria confirmar. Esses diálogos são ótimos , mas certifique-se de usá-los para ações muito seletivas. Use-os apenas quando as coisas podem realmente dar errado e ter um grande impacto. Agora, na maioria dos casos, você pode cobrir o óbvio e evitar a maioria dos erros. Aqueles que ainda acontecem, você pode trabalhar e lidar com eles adequadamente. Mas você pode estar projetando produtos onde a prevenção de erros é crucial. Como um produto financeiro ou ainda mais, um dispositivo de saúde. Nesse caso, a prevenção de erros deve ser uma prioridade absoluta e você deve ter uma estratégia clara trabalhando em áreas onde a maioria dos danos pode acontecer com uma usabilidade agradável ou suave. correções podem ser bem pequenas, mas eficazes. Algo como um alerta dizendo: “Você realmente quer transferir o valor X se estiver acima de um determinado limite? Também é realmente eficaz dar aos usuários um resumo para confirmar antes de comprar. Isso é o que muitas companhias aéreas fazem, por exemplo. Isso não é apenas bom para o usuário porque eles têm uma visão geral e não reservam um voo errado e precisam lidar com todo o estresse de mudá-lo, mas também é realmente ótimo para o comerciante porque coisas como estornos e manuseio de clientes é uma tarefa muito cara e intensa em mão-de-obra. Realmente mapeie sua prevenção de erros como uma equipe. A prevenção de erros começa com uma boa experiência do usuário. Ele foi projetado para sua interface do usuário e executado em desenvolvimento. Você precisa estar no mesmo barco. Vamos resumir. Use alertas para evitar erros, mas somente se os usuários perderem o acesso ou perderem. Tenha cuidado com esse. Use sugestões como preenchimento automático e restrições para orientar os usuários e eliminar deslizamentos. Adicione uma camada de confirmação ao lidar com ações destrutivas ou grandes distribuições de marketing. Crie uma hierarquia de prevenção de erros para produtos sensíveis a erros, como produtos médicos. 12. Tratamento de erros: Sempre que possível, projetaremos para evitar erros. No entanto, não há como se livrar completamente deles. Então, vamos planejar eventualidades e ajudar a recuperar erros. tratamento de erros acontece praticamente em todos os lugares da sua página, mas formulários, filtros e todos os tipos de entrada e interação são as áreas críticas a serem observadas. Gostaria de apresentar o plano de três etapas de tratamento de erros introduzido pelo Nielsen Norman Group. etapa 1 é reconhecer, a etapa 2 é diagnosticar e a etapa 3 é recuperada. Vamos passar por eles passo a passo e começar com reconhecer. Vou usar um formulário de login simples aqui para o meu exemplo, mas você pode usar esse método em praticamente qualquer coisa para lidar com erros. Observe que o formulário já está configurado de forma a evitar possíveis erros. Por exemplo, já estou mostrando no e-mail e qual formato ele precisaria ser inserido. Mas digamos que o usuário ainda digite um erro. etapa 1 agora é reconhecer esse erro, o que significa que informo claramente ao usuário que ocorreu um erro. Há maneiras diferentes de fazer isso, e é realmente recomendável combinar mais de um sinal de reconhecimento de erros. No meu exemplo, o contorno não só fica vermelho, mas fica um pouco mais espesso. Também estou adicionando um ícone de aviso adicional. Por quê? Porque mesmo que o vermelho, para a maioria de nós, seja o sinal mais óbvio de um erro, devemos projetar também para pessoas que talvez não vejam cores. Portanto, a espessura da borda do campo muda e adicionei um ícone de alerta. Etapa 2, diagnosticando o erro. Nesta etapa, preciso dizer claramente ao usuário o que realmente deu errado. Então, estou dizendo que o e-mail inserido não está correto. É muito importante usar linguagem simples e simples nesta etapa. No entanto, ainda posso fazer melhor. Vamos ver o que podemos melhorar com a etapa 3. Recuperar significa que, em vez de apenas dizer ao usuário, isso está errado, posso dizer ao usuário, ei, por que você não resolve isso assim? Então, meu aviso de erro pode ser algo assim. e-mail deve incluir um símbolo @. Quando o usuário classificar o erro, nossa mensagem de erro desaparecerá e podemos até adicionar um pequeno tick extra para mostrar que agora tudo está funcionando bem. Outra área que cada página deve ter para recuperação de erros é a chamada página 404. Se você é novo nisso, 404 é uma página padrão para a qual os usuários são enviados ao clicar em algo que não existe mais, como um link inativo ou se eles inserem um URL incorreto. Funciona após o mesmo princípio de três etapas. Um, reconheça, sua página não foi encontrada. Dois, diagnosticar, e isso não é tão crucial aqui porque ele anda um pouco de mãos dadas com reconhecer, mas você poderia dizer que algo como a página você está procurando não existe mais ou foi movida. Três, recupere. Isso é realmente importante. Sempre mostre seu menu na parte superior, para que os usuários possam navegar de volta para onde quiserem ir ou também oferecer um call to action que leve os usuários de volta à sua página inicial. Há também exemplos muito engraçados sobre 404 páginas por aí, como esta fofa aqui da Pixar. Como você pode ver, você pode ser criativo com ele. Mantenha-o simples, mas torne-o seu. Vamos resumir. Erros acontecerão, portanto, certifique-se de projetar o tratamento de erros apropriado. Use as três etapas do tratamento de erros. Reconhecimento, há um erro; diagnosticar, qual é o erro; e recuperar, como posso voltar aos trilhos? Tente usar mais de uma maneira de identificar erros. Por exemplo, a cor sozinha não é suficiente pois nem todos os usuários podem vê-la corretamente. Não esqueça sua página 404. 13. Uma palavra sobre dopamina e design ética: forma como você configura seu design para desencadear a liberação de dopamina realmente desempenha um papel importante. Vamos descobrir um pouco mais. O que realmente é dopamina? Vou explicar isso muito brevemente e simplificado porque, como você pode imaginar, há material suficiente para um PhD ou vários doutorados reais quando se trata de dopamina. dopamina é um produto químico produzido por nossos cérebros que desempenha um papel importante no comportamento motivador. dopamina é liberada quando, por exemplo, você come comida reconfortante, termina uma tarefa, tem uma interação social gratificante ou realiza algo. É um sentimento bom, feliz ou gratificante que você tem? dopamina faz você desejar coisas e isso faz você querer repeti-las. Praticamente tudo o que você faz libera dopamina, até mesmo escovando os dentes. Mas é o nível de dopamina que faz a diferença. Em suma, quanto mais dopamina seu cérebro espera de uma atividade, mais motivado você estará a fazê-lo e repetir. Quando se trata de design UX e dopamina, existem três áreas principais de interesse para nós. Um deles está comemorando pequenas vitórias, duas estão completando uma tarefa e três é a chamada previsão de recompensa. Vamos começar com o óbvio. Não há área para mostrar melhor o efeito da dopamina na UX do que as mídias sociais. Neurocientistas cognitivos mostraram que estímulos sociais gratificantes, como rostos de riso, reconhecimento positivo através de curtidas e mensagens, nos dão quase uma onda de dopamina. Tudo parecido nas mídias sociais é como uma pequena vitória e libera dopamina. As pessoas podem ficar muito viciadas nisso. Além disso, o pergaminho infinito de imagens no Instagram, por exemplo, deixa você com esse desejo de completar a tarefa e querer ainda mais e mais dopamina. Pesquisas em aprendizado de recompensas e vício também mostram um padrão chamado predição de recompensas. Algo que realmente foi usado em cassinos e agora é usado cada vez mais online. Quando recebemos uma recompensa inesperada, recebemos uma dose alta de dopamina. Também aprendemos que em determinadas situações, existe a possibilidade dessa recompensa e começamos a antecipar. Na verdade, pesquisas de exames cerebrais mostraram que antecipar uma vitória estimula nosso cérebro mais do que a vitória real. É aquele momento famoso em um jogo de roleta quando a tigela circula antes de ganhar. Você pode ver que em muitos filmes, eles colocam em movimentos lentos para estender esse sentimento de antecipação. Agora o que acontece é que você já recebe a dopamina na fase de recompensa enquanto joga o jogo e nem mesmo ganha ainda. Se você perder muitas vezes, no entanto, a dopamina cai e você pára. As máquinas caça-níqueis, por exemplo, são projetadas de forma a mantê-lo apenas viciado neste ponto ideal entre antecipação, amor e vitória, apenas o suficiente para continuar. Agora, muitos aplicativos usam o mesmo padrão para mantê-lo envolvido. Se acharmos que pode haver uma recompensa aleatória, continuaremos voltando para mais e mais. Por exemplo, a pequena bolha em sua mensagem de bate-papo faz exatamente isso. Nós pegamos nossos telefones o tempo todo porque sabemos eventualmente esse pequeno ser e essa pequena bolha estará lá. Alguns aplicativos de mídia social até têm um algoritmo que retem curtidas. Você fica irritado, continua verificando, e então é incrível quando todos eles são liberados de repente. Você mantém essa antecipação como com a máquina caça-níqueis e, em seguida, boom, vem seu preço como um influxo de avaliação social. Parece um pouco assustador? Sim, eu acho que também. Quando o produto é projetado de forma a enganar o usuário, chamamos isso de UX escuro ou padrões escuros. Há mais exemplos, como esconder custos, caixas de seleção padrão, etc. Por que estou dizendo tudo isso então? Bem, porque você, como designer de UX, também pode desempenhar um papel na forma como os produtos são construídos. É ótimo saber e até importante saber o que faz os usuários clicarem, porque então você pode usá-lo adequadamente. Há um movimento forte agora pedindo o chamado design ético. Eu recomendo vivamente que você se aprofunde um pouco nesse tópico e encontre o lugar onde você se sente confortável. Aqui estão alguns recursos gratuitos; humanebydesign.com, humanetech.com e darkpatterns.org. Como de costume, não tenho absolutamente nenhuma relação com essas páginas. Acabei de descobrir que eles têm conteúdo muito valioso para serem compartilhados e são totalmente livres para iniciar sua pesquisa. Você também verá que você pode usar um efeito dopamina de maneiras muito agradáveis apenas para fazer pequenas tarefas tediosas um pouco mais agradáveis. Deixe-me dar um exemplo. Não é tão espetacular quanto o Facebook ou o Instagram, mas muito eficaz. Quando damos feedback como feedback de erro, geralmente é um feedback negativo como algo deu errado aqui. Há, no entanto, muito poder no feedback positivo. Por exemplo, acertar todas as regras sobre senhas é realmente irritante. Normalmente, você digita um e, em seguida, recebe um erro para símbolo ou palavra esquecida muito curta, você o nomeia. Esta é uma maneira muito inteligente de resolvê-lo aqui. Ao dar feedback positivo imediato sempre que você atende a um dos requisitos, os usuários se sentem realizados e o processo se torna muito mais suave. Você está basicamente criando pequenas versões de curtidas. Vamos resumir. Certos projetos de UX podem desencadear a liberação de dopamina, principalmente através da celebração de pequenas vitórias, completar uma tarefa e predição de recompensas. dopamina motiva o usuário a voltar para mais. Feedback positivo é uma ótima maneira de ajudar o usuário a realizar tarefas necessárias , mas tediosas. Considere sempre soluções de design ético. 14. Download de materiais do curso: Você pode querer trabalhar ao meu lado, então preparei alguns arquivos para você baixar. No curso, basta navegar até Projeto e Recursos, e lá você encontrará todas as informações e o link onde você pode baixar o material. Ou você pode navegar até meu perfil, onde também encontrará um link direto para a página de download. Nesta página, você encontrará uma variedade de downloads. Você pode simplesmente escolher o curso que você está fazendo atualmente e, em seguida, basta clicar em “Download” e ele baixará automaticamente o arquivo para você. Para abrir um arquivo Figma que você baixou, é importante que você tenha uma conta Figma. Dentro da sua conta, navegue até novo e pressione “Importar”, você pode escolher um arquivo que você gostaria de abrir. Pode levar um momento, pois eles são bastante grandes, mas depois que você os importou, eles estarão na sua conta e você não precisará repetir esse processo. Estou trabalhando com fontes do Google para a maioria dos meus designs, então, se você estiver trabalhando com o aplicativo Figma, não precisará fazer nada. Todas as fontes do Google são pré-carregadas automaticamente. Se você quiser trabalhar com Figma no navegador, então você só precisa pesquisar a fonte que está mostrando como faltando, por exemplo, Poppins Eu uso muito, e então você pode baixar diretamente essa fonte, instale-o em seu computador e você está pronto para começar. Todos os recursos são gratuitos para os alunos existentes e você não precisa inserir nenhuma informação adicional. É claro que você também pode baixar qualquer dos outros arquivos caso esteja interessado, então, em geral, eu sempre adiciono qualquer coisa que eu ache útil, então há, por exemplo, um modelo Bootstrap e em seguida, uma lista com links para inspiração, livros e blocos que são realmente ótimos para o design da interface do usuário. Essa lista de downloads está crescendo constantemente, então certifique-se de voltar e dar uma olhada de tempos em tempos. 15. --> --> de o espaço de trabalho de trabalho: Vamos colocar toda essa teoria em prática. Preparei um arquivo Figma para você. Neste arquivo, você encontrará o exercício ao abri-lo na primeira página. Nosso exercício é que vamos construir um wireframe para um pequeno espaço de trabalho de escritório aberto. No resumo, você encontrará uma visão geral das coisas que eles oferecem, então coisas como preços e diferentes seções que o cliente deseja. Agora, na vida real, obviamente teríamos muito mais personas de pesquisa, informações detalhadas, especialmente sobre os usuários antes de iniciar o wireframe. No entanto, este é um exercício para realmente apenas colocar seus princípios uso, então vamos pegar um atalho e eu lhe darei todas as informações no resumo, e vamos apenas dar isso como garantido agora. Você também pode ver uma primeira configuração de um wireframe para o projeto que, no entanto, nosso cliente estava muito descontente porque o UX não estava certo, então estamos aqui para melhorar a UX do wireframe fornecido. Como não temos nenhum outro resultado de pesquisa, confiaremos puramente nos princípios sobre os quais aprendemos hoje. Sinta-se à vontade para remodelar, adicionar, excluir, se movimentar ou começar completamente do zero. Realmente tente transformar isso em um primeiro rascunho que você poderia voltar ao cliente para discutir e iniciar alguns testes. Na segunda página do arquivo, você encontrará a solução que preparei para você. Agora é importante notar que nunca existe uma solução perfeita no design. A solução que você criou pode ser tão boa ou até melhor que a minha. O que estou lhe fornecendo aqui é apenas uma inspiração para que você veja como eu lidaria com esses problemas e soluções que estou sugerindo. Você pode realmente considerar isso tão crítico ou tão curioso quanto você gostaria. 16. Parte 2: design de UI: Se você gostou deste curso e do exercício, recomendo que você vá direto para a segunda parte deste curso aqui no Skillshare, basta procurar o aprendizado da lua e você encontrará todos os cursos. Você encontrará na parte inferior o curso de design da interface do usuário, que é a segunda parte da introdução da UI UX. Nesta aula, vamos trazer vivo o wireframe que você estava apenas construindo e aprenderemos sobre todos os princípios do design da interface do usuário. 17. Obrigado: Muito bem para terminar este curso. Sinta-se à vontade para entrar em contato conosco em moonlearning.io. Estamos sempre interessados em ouvir seus comentários. Você também nos fará um grande favor se você puder tirar um minuto e deixar um comentário aqui. Se você gostou deste curso , também certifique-se de dar uma olhada em nossos cursos adicionais. Na moonlearning.io, abordamos todos os assuntos desde os fundamentos do design UX/UI até Figma e até mesmo alguns conceitos básicos de código. Certifique-se de visitar nosso site moonlearning.io, onde você também pode se inscrever em nosso boletim informativo.