UX para iniciantes: crie ótimas experiências dominando conceitos básicos

1. Introdução ao curso: Bem-vindo ao meu curso sobre design de UX para iniciantes. Por que criei este curso? Eu vi muitos designers, desenvolvedores, até mesmo gerentes de produto fazendo e repetindo o mesmo design, e usabilidade e design de interação, erros. Por que eles não foram capazes de corrigir esses erros é que eles não têm a compreensão de usabilidade, experiência do usuário ou princípios de design de interação. Agora, estes princípios são estas ideias radicais. Eles vão governar a experiência do usuário de todos os produtos, sejam eles produtos físicos ou digitais. Então, neste curso, você vai dominar esses princípios básicos com toneladas de exemplos do mundo real como Amazon, Walmart e G-mail e Google, diferentes produtos do Google. Então, depois de fazer este curso, você será capaz de identificar problemas em seu próprio site de comércio eletrônico ou seu próprio aplicativo, e você pode melhorá-los facilmente. Você pode ver onde o problema está e como corrigi-lo. Oi, eu sou Muhammad Ahsan, e estou projetando UIs dos últimos oito anos e melhorando sua usabilidade e experiência do usuário dos últimos três anos. Agora, vamos começar e começar a melhorar a experiência do usuário de produtos digitais. 2. O que é o design de UX e UI e de UI: A primeira pergunta é o que é a experiência do usuário? Existem muitas definições online ou mesmo em livros que são muito difíceis de entender, então eu vou simplificá-lo para você. A alegria, satisfação ou frustração que seu usuário vai sentir depois de usar seu produto eficiente ou muito lento, utilizável e delicioso. Em termos de produto, pode ser um aplicativo móvel, aplicativo web, smartphone ou qualquer pacote, ou um laptop ou outra coisa. Em termos simples, jornada de seu usuário com seu produto é basicamente uma experiência de usuário. Vamos explicar a experiência do usuário em termos de um aplicativo móvel. Você pode ter usado muitos aplicativos móveis e você não sabe como toda a experiência do usuário afeta você. Para um usuário, encontrar o aplicativo ou a instalação do aplicativo é o primeiro passo. Você pode encontrá-lo no Facebook ou talvez de ouvir de um amigo que “Este aplicativo é homem muito legal. Você precisa instalá-lo. Você pode fazer diferentes caras engraçadas com ele ou o que quer que seja.” Portanto, o primeiro passo é encontrar o ou e instalar o aplicativo. Em seguida, o próximo passo é a experiência de integração, inscrever-se. Pode haver muitos problemas. Mesmo eu já vi um monte de aplicativos que realmente é uma droga em se inscrever. A maioria dos usuários, eles vão sair nesta fase. O terceiro estágio é começar a aprender o aplicativo. As primeiras impressões, como o aplicativo está fluindo diferente com telas diferentes e interações diferentes, e como você está aprendendo o aplicativo. Em seguida, o quarto estágio está realizando tarefa importante de forma eficiente e fácil. Esta é a eficácia; quão funcional é o seu produto, como você pode efetivamente e facilmente completar suas principais tarefas com este produto. Em seguida, impacto emocional, no final, você vai ficar frustrado ou você pode estar feliz em usar esse aplicativo e você pode estar globalmente satisfeito com este aplicativo. Há mais uma coisa. Isso também pode envolver entrar em contato com sua equipe de suporte por telefone ou e-mail. Muitos sites e aplicativos, eles são realmente bons e eles executam tudo, mas então sua equipe de suporte ou seus atrasos de suporte são para três dias. Seu usuário vai lhe dar críticas muito ruins. Eu vi produtos muito bons tendo comentários muito ruins apenas por causa de sua equipe de suporte. Portanto, certifique-se de que este também é outro passo muito importante na experiência do usuário. Agora vamos discutir o que são o produto final do design experiência do usuário e quem estará envolvido no processo de design experiência do usuário. O produto de qualquer projeto de experiência do usuário será wireframes detalhados juntamente com especificações detalhadas desse produto. Especificação detalhada significa quais são os recursos, eo que o aplicativo vai fazer, ou o que este site vai cobrir, quanta área em quantos recursos e funções. processo UX envolve CEOs porque eles sabem muito sobre o produto, depois gerentes de produto, depois atendimento ao cliente, então seus designers e desenvolvedores, e assim como outros usuários, seus usuários principais, e também o SEO pessoas ou as pessoas de marketing. Todas estas pessoas vão estar envolvidas no processo de UX. Vamos definir o design da interface do usuário. Temos muita confusão sobre o design da experiência do usuário e design da interface do usuário. O design da interface do usuário significa a aparência e a sensação do seu aplicativo. Interface de usuário é o ponto onde seu usuário e seu produto vai se encontrar. O usuário vai interagir com seus botões, o usuário vai pressionar em diferentes coisas em sua tela, mas o que ele está visualizando na tela é basicamente o design da interface do usuário. Ele inclui cores, tipografia, ou como diferentes botões estão espaçados, como o texto deve ser alinhado. Então, tudo isso é sobre estética e como seu usuário vai interagir com seu aplicativo. Mais uma coisa, esta é a primeira impressão que seu usuário vai ter de seus produtos, então certifique-se de que esta interface realmente parece ótima e também funciona bem. Muitos usuários nos dias de hoje, mesmo se você olhar para os produtos da Apple, eles têm uma qualidade estética específica ou eles são muito bonitos. A primeira impressão que o usuário vai obter do seu produto é como ele se parece e se sente, então isso é muito importante. O produto final de qualquer design de interface de usuário ou design de interface de usuário será maquetes de alta fidelidade juntamente com guias de estilo. Mockups são basicamente a aparência final do seu produto. Estas são basicamente imagens e aqueles de vocês que tomaram meus outros cursos de design de interface do usuário, eles sabem sobre guias de estilo e maquetes. Guias de estilo são basicamente como suas cores, tipos de letra, e tamanhos diferentes de botões e todos os outros objetos que você está usando, elemento de design que você está usando, eles vão se juntar e outras especificações de design diferentes que você está usando. Estes modelos e guias de estilo são entregues aos desenvolvedores para realmente implementá-los na forma de um produto real ou código real. No final, vou resumir esta palestra dizendo uma coisa; que o design da interface do usuário é basicamente um processo de um design de UX. O design de UX é um campo muito amplo. Design de interface do usuário é uma parte do design de UX. Tenha em mente todas essas coisas e se você tiver alguma dúvida, me pergunte. Haverá muito mais coisas sobre UX e design de interface do usuário, então vamos passar para a próxima lição. 3. Posso ser um UX Designer: Agora a questão é, quem pode ser um designer de UX? A resposta mais simples é, qualquer um pode ser um designer de UX, só precisa estudar algo sobre psicologia humana e algumas coisas sobre como os seres humanos interagem e se comportam em torno de produtos digitais ou quaisquer outros produtos. Você viu que eu mostrei tudo sobre humanos, então isso é tudo sobre humanos. É por isso que é chamado de design centrado no homem. Vamos falar sobre os diferentes trabalhos do UX Designer. Existem diferentes tipos de designers de UX. Fazem trabalhos diferentes. Há muitos títulos de trabalho específicos diferentes para diferentes designers de UX. O primeiro é o Entrevistador do Usuário ou Investigação do Usuário. Eu o chamo de investigador de usuários ou algo assim. Ele entrevista diferentes usuários e obtém algumas informações deles. Então temos os planejadores são aqueles que planejam informações ou arquitetura de informação. Estes são chamados de Arquiteto de Informações. Então temos Designers. Eles estão indo para wireframe e protótipo. Então temos Designers de Interação que vão projetar os fluxos e os diagramas e interações, planejando todas as interações do seu aplicativo, talvez algumas animações como esta tela vai fluir para outro tela, algo assim. Em seguida, temos testadores de usabilidade ou Usabilidade Gurus que vão observar usuários reais de seu produto com seus usuários e vai avaliar diferentes problemas de UX com ele. Agora, os entrevistadores de usuários também vão envolver a entrevista de partes interessadas e CEOs dessa empresa ou produto porque eles sabem muito sobre o produto. Agora, se você fosse um designer de interface do usuário, você pode facilmente se tornar um designer de UX porque você já sabe algumas coisas sobre design. O que você precisa aprender é psicologia humana e comportamento humano usando produtos digitais. Você já sabe metade do UX Design, mas porque você já sabe que como esses layouts ou tipografia ou pilares vão chamar a atenção do usuário ou se os usuários podem clicar neste botão ou não, quão grande esse botão deve ser ou Algo assim. Se você é um designer de interface do usuário, você já conhece a psicologia por trás de projetos e informações visuais. Você sabe como organizar informações. Você sabe como apresentar informações. Agora, como você vai mudar de um desenvolvedor para um UX Designer, se você é um programador ou você é um codificador, então você sabe como as coisas são implementadas. Você sabe a espinha dorsal de tudo. A equipe de UX pode chamá-lo de engenheiro ou desenvolvedor de software ou algo assim. Você pode entender facilmente por que assistir os testes de usabilidade ou usuários ou talvez entrevistas de usuários ou quando os designers de UX estão planejando algo, você sabe como podemos conseguir isso, como podemos fazer nosso carregamento rápido ou talvez alguns coisas valiosas como essa. Você já sabe como implementar as coisas. Você precisa saber a psicologia do usuário e como coisas diferentes afetam o comportamento do usuário. Se você dominar essas coisas ou o essencial dos conceitos de experiência do usuário, você pode facilmente se tornar um designer de UX. Sempre que investigadores de usuários ou entrevistas de usuários levam a equipe para entrevistar usuários, eles sempre levam um engenheiro ou um programador com eles porque os programadores podem ver os painéis por trás da interface do usuário. Eles podem ver por que esse problema está ocorrendo. Talvez seja um erro de conexão de banco de dados ou talvez o erro não seja visível ou talvez essa falha seja muito pequena quando processada a partir do servidor ou algo assim. Eles podem chegar a muitas soluções práticas. Isso é tudo sobre se tornar um designer de UX a partir de um fundo de designer ou de um fundo de desenvolvedor. Se tiver mais perguntas, pode me perguntar. O mesmo se aplica aos engenheiros de SEO e outras pessoas que têm desenvolvimento ou um fundo de computador. Se tiver alguma pergunta, me pergunte. Vou esperar por suas perguntas. Agora vamos passar para a próxima lição. 4. Diferentes papéis de designers de UX: Você deve ter ouvido que há muitos tipos de engenheiros, como engenheiros elétricos, engenheiros mecânicos, engenheiros civis. Da mesma forma, existem diferentes papéis no design da experiência do usuário, há pessoas que fazem pesquisa do usuário, há pessoas que fazem arquitetura da informação ou definem a arquitetura da informação, então há pessoas que vão fazer o design de interação para o produto, então há estrategistas de conteúdo, então há especialistas em usabilidade. Eu sou basicamente um designer de interação porque eu normalmente trabalho com arame frames, maquetes e protótipo a maior parte do tempo, eu normalmente também faço alguns dos testes de pesquisa e usabilidade do usuário. Vamos ver todas essas regras. Agora, o pesquisador usuário é alguém que vai realizar entrevistas de usuários e vai investigar o usuário e vai fazer ao usuário algumas perguntas sobre o produto. O objetivo principal da pesquisa do usuário é coletar informações sobre como, quando e por que os usuários usam determinados produtos e quais recursos eles precisam em qualquer produto. Você pode fazer pesquisa de usuários no local ou pesquisa de usuários fora do local ou pesquisa de usuários on-line, existem sites diferentes. No local significa que você está indo para fazer pesquisa de usuário no escritório do usuário, onde o usuário realmente usa os produtos. O externo significa que você vai ligar para o seu usuário em seu escritório e você configurou, você vai gravar sua entrevista de todos os usuários dentro de seu laboratório. Uma pesquisa de usuário on-line é que você está indo para postar algumas perguntas on-line e diferentes usuários que atendem aos seus critérios, eles vão responder às perguntas. Estes são diferentes tipos de pesquisa de usuários. Agora, vamos falar sobre o designer de interação. Os designers de interação irão trabalhar no fluxo do seu aplicativo, como alguém vai clicar ou tocar e onde a tela vai fluir e vai levar o usuário para outra tela, caso o usuário seja feito algumas perguntas antes de passar para o ou algo assim. Você pode ter visto o fluxo de processo de check-out em diferentes sites, eles são totalmente diferentes com sites diferentes. Se você for para a Amazon, eles serão como cinco, seis etapas no processo de finalização da compra e, se você usar o Walmart, eles serão apenas duas ou três etapas de finalização da compra. É assim que o designer de interação vai resolver esse problema. Além disso, designer de interação vai dizer-lhe as interações ou quaisquer missões que vão acontecer quando você abrir ou iniciar o seu aplicativo, você pode ter visto iPhone quando você toca em qualquer ícone ou você tenta fechar qualquer aplicativo, há um animação de fechar e abrir um aplicativo, então esta vai ser a parte do designer de interação. Agora, arquiteto de informação vai planejar toda a informação de qualquer aplicativo ou site e como ele vai ser exibido, como o usuário vai chegar ou encontrar esta informação, se a informação deve ser em formato de vídeo, formato de áudio, ou deve ser apenas o texto com cabeçalhos, ou deve ser imagem, imagens ou algo parecido. Agora, você pode ver no Facebook há diferentes tipos de postagens, como fotos, e então temos postagem de vídeo com textos, então temos links diferentes ou tipo incorporado de postagens. Existem diferentes tipos de blocos de informação. Este é o trabalho do arquiteto de informação para planejar todas essas informações e como ele será exibido e como o usuário vai encontrá-los. Agora, o estrategista de conteúdo vai responder à questão de como sua empresa ou marca ou sua mensagem comercial vai ser entregue aos seus usuários finais, que idioma você deve usar? Que voz e tom do produto devem ser? Em suma, ele vai enquadrar toda a história do seu produto. Agora, como você vai contar toda a história do seu produto, você vai usar menos texto e mais imagens, ou você vai usar texto detalhado ou menos imagens, ou se você vai usar um vídeo introdutório sobre isso e todo o roteiro desse vídeo e tudo vai ser o trabalho de estrategistas de conteúdo. Agora, ele também envolve todo o conteúdo escrito, compilá-lo, como produzir conteúdo que o usuário realmente precisa. Se esse conteúdo é necessário pelos usuários, se os usuários estão realmente procurando por esse conteúdo, se eles realmente precisam baixar esse arquivo PDF, então essas são as decisões que o estrategista de conteúdo vai tomar. Agora, os especialistas em usabilidade, eu realmente amei esse trabalho. Os especialistas em usabilidade receberão feedback do usuário depois de visualizá-los usando o produto. Eles vão dar ao usuário a chance de usar o produto ou executar tarefas diferentes, e então eles estão indo para assistir o usuário fazendo tarefas diferentes e obter todos os problemas e anotá-los e anotá-los. É assim que eles vão chegar ao ponto de pinos do usuário e como podemos melhorar o produto. Eles vão preparar um relatório de usabilidade no final. Estas são todas as diferentes funções dos designers de experiência do usuário. Se você gosta de algum deles, você pode penetrar nesse campo. Se tiver alguma pergunta, pergunte-me. Vamos passar para a próxima lição. 5. As principais partes do design de UX: Você sabe sobre o UX, o que é UX? Mas vamos ver o que são diferentes partes principais do processo UX. Vou simplificar tudo. Vamos começar com qual é o problema. Obtendo uma visão sobre um problema. Qual é realmente o problema? Este é o primeiro passo. Então quem tem o problema ou quem tem o problema? Estes são basicamente nossos usuários. Então temos como ele será usado? Este é o contexto. Como nossos usuários vão usar nossa câmera. Eles vão usá-lo na chuva ou algo assim? Como os usuários usarão a solução, como eles vão interagir com ela. Esta é basicamente a interação, se eles estão indo para usar seu comando de voz ou se eles estão indo para entrar pessoalmente usando seus dedos, ou se eles vão vibrá-lo com suas mãos ou algo assim. Esta é a interação. Então, no final, como vamos testá-lo e melhorá-lo. Estes são testes de usabilidade e ver seus usuários usando seus produtos. Se você não tem o seu produto agora, então você pode fornecer-lhes produtos semelhantes ou sites semelhantes, ou o site da sua concorrência e ver quais são as deficiências e problemas que seus usuários estão enfrentando. Isso pode lhe dar um monte de insights sobre o que é o problema e como você pode corrigi-lo. Agora esta é uma palavra de zumbido. Você deve ter ouvido muito design centrado no homem. Agora, o design centrado no homem é basicamente uma abordagem adotada pela equipe de design da IDEO. Na verdade, o que eles fizeram foi colocar as necessidades e capacidades humanas e o comportamento humano em primeiro lugar e, em seguida, projetaram tudo de acordo com isso. Basicamente eles projetaram tudo em torno de necessidades humanas, capacidades e comportamentos. Há mais uma dica que eu vou dar a vocês é, mesmo que você esteja projetando para humanos, não se esqueça de que há estacas e outros CEOs, eles têm seus próprios objetivos e eles têm seus próprios objetivos em sua mente. Você também precisa atender para eles também. Agora vamos falar sobre o Contexto do Usuário. Isto é muito importante. Ele pode alterar todo o processo do seu produto ou pode adicionar um monte de recursos necessários em seu produto. Basta pensar que o contexto do usuário significa que as condições e atmosfera ou a sala ou o escritório onde o seu produto vai ser usado. Tome um exemplo de uma câmera. Talvez seja uma câmera DSLR e eu sou um atirador de paisagem e eu tiro principalmente fora. Talvez eu mostrei a maioria das paisagens na chuva, então esta câmera precisa de um escudo se. Hoje em dia, muitas pessoas atiram em todas as atmosferas. Eles disparam no sol, na chuva, na luz do sol, eles podem atirar enquanto nadam ou algo assim. Essas coisas vão mudar o contexto de uso. Vamos dar outro exemplo de um aplicativo de reserva de trem. Você pode estar com pressa e você está reservando seu trem enquanto está viajando, então pode haver ruído ao seu redor e pode haver sinais baixos, sinais Wi-Fi, ou talvez mais algumas restrições e o contexto do usuário é totalmente diferente. Pode haver pessoas ao seu redor, pode haver muito barulho, pode haver muita reunião e você está reservando seus lugares. Você precisa cuidar de todas essas coisas. Você pode estar ao sol, então sua tela não é tão brilhante ou você está tendo problemas para clicar ou tocar em botões diferentes. Isso é chamado de Contexto do Usuário. Agora, quais são os recursos de um design de experiência de usuário muito bom ou ótimo. A única coisa sobre o design da experiência do usuário ou excelente design da experiência do usuário é a nossa interação com a tecnologia. Nós, humanos, cometemos muitos erros. Um bom design requer comunicação, especialmente de máquina para pessoa ou pessoa para máquina, indicando quais ações são possíveis ou o que está acontecendo agora, o que está acontecendo com meu aplicativo? Eu cliquei no botão, isso envia meu formulário ou está funcionando em segundo plano? O que vai acontecer a seguir? Vai me cobrar agora ou vai me cobrar no final do mês ou algo assim. Estas são as coisas que você precisa ter em mente que a comunicação entre máquina e pessoa ou seu produto e o usuário é realmente importante na criação de design UX. Se você tiver alguma dúvida sobre design da experiência do usuário ou se você não entender nada desta palestra, me pergunte e eu serei capaz de responder a qualquer pergunta sobre o design da experiência do usuário. Vamos passar para a próxima lição. 6. Design de Centrado de humano: Vamos falar sobre a primeira abordagem para UX que é o design centrado no homem. Agora nessa abordagem, o que realmente fazemos é nos concentrarmos apenas em nossos usuários, certo? Cada usuário tem necessidades diferentes e limites de memória diferentes ou talvez limites físicos, então vamos cuidar de todos esses limites e vamos criar um produto eficaz e eficiente que pode satisfazer nosso usuário e pode aumentar eficácia geral ou tarefa principal usuário vai fazer com o seu produto e eles podem facilmente fazer essa tarefa. Agora, o HCD foi basicamente usado em plantas industriais e plantas de produção onde os usuários precisam verificar centenas e milhares de itens e eles estavam ficando cansados e doentes, então o que eles fizeram é que eles começaram a pesquisar sobre como podemos criar nosso fluxo de trabalho para que os usuários ou nossos funcionários, eles podem ser mais eficazes e é mais fácil em seus limites físicos. Isto é tudo sobre o design centrado no homem. Vamos nos concentrar em nossos usuários principais e suas necessidades e seus limites, sejam eles limites físicos ou mentais. IDEO é uma agência de design e eles estão trabalhando em design centrado no homem e eles são bem conhecidos por essa abordagem, então eu vou mostrar a vocês sua definição de design centrado no homem. definição IDEO para o design centrado no homem é que você vai construir uma profunda empatia com seu pessoal ou com os principais usuários que você está projetando para então você vai gerar toneladas de idéias com esboços, com diferentes wireframes, então você vai construir sobre essas idéias e você vai criar protótipos de trabalho. Agora, todas essas etapas são quase semelhantes em qualquer processo de experiência do usuário e, no final, o que vamos fazer é compartilhar nossos protótipos com os usuários e vamos testá-los e, eventualmente, no final, vamos mostrar o nosso produto refinado para o mundo. Estas são as quatro etapas envolvidas no design centrado no homem. Primeiro, você vai absorver e pesquisar sobre o que o usuário precisa são. necessidades do usuário e seu limite é nosso primeiro foco, então vamos passar para a geração de ideias e explorar diferentes soluções, isso pode ser dezenas ou centenas de soluções. Então vamos refinar e escolher algumas das soluções e vamos construir protótipos ou protótipos falsos dessas ideias. Então vamos testar com usuários reais para ver quão bem nossas idéias são percebidas por nossos usuários e quão bem este produto funcionará no mundo real. Isto é tudo sobre o design centrado no homem. Agora, no final, vou compartilhar com vocês o kit de ferramentas de design centrado no homem, que está livre do IDEO. Você pode baixá-lo e você pode usá-lo. Este é um guia de campo. É um documento PDF aqui. Você pode ver aqui o guia de campo para o design centrado no homem. Você pode baixá-lo e você pode usá-lo e você pode lê-lo. Se tiver alguma pergunta, pergunte-me, estarei à espera das suas perguntas. Vamos passar para a próxima lição. 7. Modelo de design de duplo de diamante de o Don Norman: Você precisa seguir alguns modelos básicos ou algumas abordagens básicas de design de experiência do usuário. Um deles é modelo de diamante duplo de design. Este foi de Don Norman e ele é um dos pioneiros do design da experiência do usuário e em seu livro, “The Design of Everyday Things”, ele pensou sobre este modelo de diamante duplo, e o que este modelo é, ele tem Basicamente dois diamantes. Uma é encontrar o problema certo, e a segunda é encontrar a solução certa. Agora vamos olhar para o diagrama. Agora este é o diagrama do modelo de diamante duplo de Don Norman, e você pode ver no lado esquerdo temos diamante que vai ser encontrar o problema certo e no lado direito, temos encontrar a solução certa. Vamos da esquerda para a direita. Agora, quando vamos começar neste ponto amarelo esquerdo, vamos explorar e investigar o nosso verdadeiro problema. Qual é o verdadeiro problema. Nossos usuários realmente precisam dessa solução? O que os usuários estão dizendo é o que eles realmente precisam. Na maioria das vezes os usuários o que é a necessidade, não o que eles dizem. Estas coisas vão contradizer umas com as outras. Nossos usuários vão nos dizer muitas coisas, mas é nosso trabalho encontrar o problema real. Agora, no meio deste diagrama, você pode ver à esquerda que temos uma linha pontilhada. Nesta fase, o que estamos a fazer é que estamos a investigar muitos problemas diferentes. Divergência significa que vamos divergir e criar muitas opções diferentes para o problema. Isto pode ser um problema ou isto pode ser um problema, ou este pode ser o problema certo. Depois, vamos concentrar-nos e convergir num problema que é a verdadeira raiz de tudo. Neste ponto, vamos começar a procurar soluções. Vamos esboçar ideias diferentes, soluções diferentes. Estas podem ser dezenas ou milhares de soluções ou talvez centenas de soluções e neste ponto, no meio, temos explorado muitas alternativas. Você pode ver deste lado, esta seta significa que nesta seção em direção vertical, estamos basicamente expandindo nossas alternativas. Estas podem ser soluções alternativas ou estes podem ser problemas alternativos. Depois de encontrar estas alternativas, vamos voltar a convergir para a verdadeira solução. Na verdade, vamos testar diferentes protótipos com nossos usuários, e no final, vamos produzir a solução real. Agora vamos falar sobre por que precisamos encontrar o problema certo? Na maioria das vezes, o que as pessoas vão dizer não é o que realmente precisam. Eles vão dizer muitas coisas. Eu tenho esse problema, eu tenho esse problema, mas o verdadeiro problema é você encontrar. Comece a questionar seus usuários e investigue seus problemas e expanda o escopo desses problemas. Pode haver muitas questões por trás desse problema ou relacionadas a esse problema, e então é a hora de convergir para o problema real no final. Uma vez que tenhamos encontrado o verdadeiro problema, então vamos em direcção à solução. Antes disso, nunca devemos tentar explorar soluções ou tentar encontrar qualquer solução. Agora explorar possíveis soluções significa que vamos criar um monte de esboços, um monte de protótipos fictícios, e mostrá-los aos nossos usuários qual realmente funciona ou quais são seus problemas reais e, no final, estamos indo para convergir para a solução certa. A melhor e única solução que está funcionando bem ao testar com usuários reais. A essência da experiência do usuário é que estamos projetando uma solução para um problema que nossos usuários estão tendo agora. Vamos ver um exemplo para ilustrar o modelo de diamante duplo. O usuário vem até mim e diz que eu tenho um problema, meu carro não vai ligar e eu não sei qual é o problema. Agora, sua idéia inicial é resolver o problema do usuário e mostrar o status do carro ou problemas na tela do carro ou em seu aplicativo móvel ou algo assim. Agora vamos expandir esse problema. Qual poderia ser a razão por trás desse problema? Por que o carro não está mostrando problemas? Que erros ou problemas podem estar relacionados com problemas de ignição do carro? As baterias estão baixas ou o combustível está baixo? Quantas razões podem estar por trás de problemas de ignição do carro? Uma vez que você vai encontrar o problema real, e no final, você descobriu que a bateria estava fraca. Agora você vai expandir, avançar para as soluções. Nós realmente precisamos de um aplicativo para isso, ou há alguma maneira de mostrar todos esses problemas ou o indicador de bateria fraca ou há algum ícone que o usuário é incapaz de reconhecer? Só precisamos mudar um ícone? Talvez precisemos de alguma bateria com destaque vermelho ou talvez com algum som para mostrar ao usuário que este é o problema ou talvez precisemos algum indicador com a bateria que é baixa, então você pode convergir para a solução certa. Talvez mudar apenas um ícone ou talvez o feedback para esse ícone de que o que está acontecendo com o seu carro pode ser a solução certa. Isto é tudo sobre o modelo de diamante duplo. Espero que tenha gostado se tiver algum problema, avise-me. Vamos passar para a próxima lição. 8. Gestão de a análise de de: Há mais uma técnica que eu gostaria de discutir, que é Análise de Causa Raiz. Esta técnica é realmente essencial para qualquer designer de experiência de usuário. Se você quiser ser um designer de experiência de usuário, você precisa dominá-lo. É muito fácil e simples de aprender. Agora, encontrar o problema da causa raiz é essencial em qualquer processo de design de experiência do usuário porque vamos encontrar o problema real por trás do que o usuário está tentando dizer. Chama-se cinco porquês. Este processo foi desenvolvido por Sakichi Toyoda que está sendo usado na fábrica de produção da Toyota. O que você vai fazer é continuar perguntando por que é até o momento em que você chegar à causa real ou raiz desse problema. Vamos ver esta análise de causa raiz com algum exemplo. Agora, o problema é que o usuário não conseguiu fazer login. A primeira pergunta é, por que o usuário não falhou ao fazer login? A resposta é que ela digitou a senha errada. Por que ela digitou a senha errada? Porque ela esqueceu-se. Por que ela esqueceu a senha? Porque tínhamos uma restrição de fazer senhas fortes. Por que ela não usou a senha para esquecer? Ela tentou usá-lo, mas não recebeu o e-mail em 30 segundos. Por que o atraso aconteceu com a senha de redefinição? Porque estamos usando algum plug-in de terceiros. Agora, o problema real era que o usuário tentou usar o recurso esquecer senha, mas ela não conseguiu receber a senha por causa de atrasos o. O problema real por trás de seu login falhou não era a senha errada, mas a redefinição de senha atrasa. É assim que você vai encontrar o verdadeiro problema por trás de qualquer coisa. Você pode aplicar essa técnica a qualquer situação em sua vida ou no design da experiência do usuário, ou enquanto você está projetando algo ou você está questionando os usuários. Isto é tudo sobre a análise da causa raiz. Espero que tenham gostado desta lição. Se tiver alguma pergunta, pergunte-me, vamos para a próxima lição. 9. O que são sete fases de ações?: Sempre que usamos um produto ou um site, ou um aplicativo em nossas mentes, tentamos criar um conjunto de ações. Primeiro eu vou fazer isso, então eu vou fazer isso e todas essas ações são baseadas em nossa percepção, o que estamos percebendo, como estamos percebendo esse aplicativo ou um resultado de nossas ações. Então, todas as nossas ações, elas serão baseadas na percepção, que também é chamado de modelos mentais e nossos objetivos, o que queremos realizar no final. Falaremos sobre modelos mentais mais tarde. Vamos ver quais são esses sete estágios de ações. Estas sete etapas de ações também foram propostas por Don Norman. Vamos ver, quais são esses sete passos. número 1 é, o que e por que eu quero realizar? Primeiro são nossos objetivos e gatilhos. O que está desencadeando para alcançar esse objetivo? segundo é quais são as sequências de ação alternativas? Podemos alcançar o mesmo objetivo que fazer outra coisa ou com outra sequência de ações pressionando este botão e indo para este URL e talvez copiar e colar tudo. Posso criar um documento do Google como esse? Então esta é a sequência de ações. Cada usuário tem diferentes sequências de ações. Eles podem usar alguma outra sequência para alcançar o mesmo objetivo. Então você vai pensar que quais ações eu posso fazer agora? Posso apertar este botão? Está activado ou está desactivado? Então o próximo passo é, como faço isso? Como eu vou clicar neste botão usando meu teclado ou usando meu mouse ou tocando nele. Então o próximo passo é o feedback. O que aconteceu? O aplicativo é uma necessidade de dizer-lhe o que aconteceu quando você clicou ou quando você fez esta ação. Então o próximo passo é você perceber esse feedback do que aconteceu. Por exemplo, você está usando um forno de microondas e quando você pressionou “Start”, ele não inicia e deu algum erro. Você precisa entender o que esse erro significa. O que significa, o que aconteceu? Então, no final, está tudo bem? Eu cumpri meu objetivo? No final, você vai ver se você criou um documento do Google, novo documento com sucesso, ou se você aqueceu seu leite no forno de microondas. Então, estas são sete etapas de ações. Se você pode dominá-los, você pode aplicá-los em qualquer aplicativo, qualquer site, qualquer produto. Vamos elaborar os sete estágios de ações com uma tela do Gmail. Esta é a minha captura de tela do meu aplicativo Gmail para iPhone. Agora você pode ver meu gatilho e objetivo é excluir e-mails. Meu gatilho foi, livrar-me de e-mails desnecessários. Esse era o meu desejo principal de apagar e-mails. Não quero e-mails desnecessários. Então meu objetivo era apagar e-mails. Agora estou na tela e você pode ver quantas sequências de ação alternativas possíveis são. Eu posso pressionar por muito tempo em um e-mail para selecioná-lo. Ou eu posso, alternativamente, pressionar no lado esquerdo do círculo, ok, e selecionar vários e-mails. Talvez eu possa selecionar apenas um e-mail. Existem duas maneiras possíveis de selecionar os e-mails. Ou eu posso tocar no círculo ou eu posso pressionar um longo tempo no e-mail. Em seguida foi, posso pressionar “Excluir”? Que ações eu posso fazer saber? O ícone de exclusão está habilitado ou desabilitado, certo? Não, eu não posso dizer que isso está habilitado ou desabilitado porque a maioria dos meus e-mails, eles são destacados na cor preta. Então, realçado ou habilitado são basicamente na cor preta, mas os ícones superiores estão em cinza. Agora o próximo é, eu tomei a ação, pressionei o botão “Excluir”, que é como fazê-lo. Vou pressionar o botão “Excluir”. Em seguida, a próxima mensagem que eu vou ver na tela será uma barra de notificação amarela que, “Você deseja desfazer as mensagens foram excluídas”. Isto é o que aconteceu. Eu preciso perceber que eu preciso é traduzi-lo se eu sou capaz de entender a mensagem, este é o próximo passo, o que esta notificação significa. Então eu compreendo que eu terminei com sucesso. Notificação foi que você excluiu os e-mails e você deseja recuperá-los? Deseja desfazer sua ação? No final, meu objetivo foi cumprido. Eu apaguei todos os meus e-mails que eu quero. Então, este sete estágios de ações, você pode aplicá-lo em qualquer tela móvel, qualquer aplicativo, qualquer produto, qualquer coisa que você está projetando ou desenvolvendo. Espero que tenha entendido as sete etapas das ações. Vamos passar para a próxima lição. 10. O que são preços e What: Affordances e significantes é um dos principais conceitos no design de experiência do usuário ou um dos conceitos básicos de UX. Agora, o que affordances significa é apenas como você pode usar qualquer objeto ou o que pode ser feito com ele. Por exemplo, a affordance do smartphone é que ele pode ser ligado, pode ser desligado. Normalmente vemos uma tela anexada a ela, então podemos tocar na tela, podemos tocar na tela. Você também pode inseri-lo em seus bolsos por causa de seu tamanho pequeno. Estas são algumas das affordances dos smartphones. Da mesma forma, as portas, elas podem ser abertas, elas podem ser trancadas, você pode se esconder atrás de uma porta, isso também é uma affordance. Agora, vamos ver o que são anti-affordances. Anti-affordance é o oposto de affordance. Ele mostra o que você não pode fazer com esse item ou objeto. Por exemplo, não podemos usar smartphones como martelo porque podemos ver que há uma tela de vidro nele. Sabemos que é sensível, e pode quebrar se eu tentar acertar algo com ele. Da mesma forma, se você usou o Photoshop ou qualquer software de design, você sabe que sempre há uma tela presente, e há uma caixa delimitadora ao redor da tela. Essa caixa delimitadora, aquela tela widescreen ou os limites do documento no Microsoft Word ou no Google Docs que mostra que esse é o limite desse documento. Você não pode sair deste limite, ou você não pode executar esta ação com ele, então isso é anti affordance. Existem poucos recursos embutidos em qualquer produto. Você pode olhar para ele e você pode ver que tem cantos afiados então eu devo evitá-lo. Não posso colocar no bolso. Eles podem ficar na minha pele. Essas affordances em anti-affordances, eles estão novamente relacionados à sua percepção. Se você não percebe que é uma porta, você nunca vai tentar trancá-la, ou você nunca vai tentar abri-la. Para isso, precisaremos de significantes. Affordances são todas sobre quais ações são possíveis com este objeto. Agora significa basicamente nos dizer que este é o sinal, ou este é o botão que você precisa pressionar para fazer essa ação. Significadores se comunicam onde você pode executar a ação como você pode ver as alças na porta. Você sabe que esta alça pode ser movida para baixo ou para cima ou você pode abri-lo ou você pode girá-lo para abrir a porta. Esta maçaneta ou maçaneta é basicamente um significante. No design de interface, significantes estão em diferentes formas. Você pode ver o campo de pesquisa, os botões no campo de pesquisa, para que você saiba que você pode clicar no campo de pesquisa para digitar algo. Isto é um significante. Você também pode ver os botões em uma interface. Eles são um pouco elevados, ou eles têm sombras sob ele. Isso é um significante. É um sinal de que esta ação é possível com este elemento. Você pode pressionar este botão. Agora, passando para como vamos usar essas affordances e significantes. Para criar uma experiência de usuário deliciosa, você precisa ter affordances e anti-affordances perceptíveis. O que isso significa é que você vai usar significantes muito fortes para mostrar quais ações são possíveis e onde o usuário precisa pressionar ou fazer a ação. É por isso que temos barras de pesquisa muito grandes e botões grandes em grandes lojas de e-commerce como Amazon e Walmart. Ele especifica que esta ação primária é possível neste site, e você precisa executá-la. Agora, ter um significante muito grande ou muito significativo ajuda muito. usuário pode ver instantaneamente que esta é uma loja de e-commerce, eu preciso encontrar ou pesquisar aqui. A maioria dos usuários vai usar barras de pesquisa. Isto é tudo sobre significantes, affordances e anti-affordances, mas vou mostrar alguns exemplos. Agora, se olharmos para este site, Amazon.com, você pode ver que há uma barra de pesquisa muito grande aqui com um ícone de pesquisa, e se eu segurar, você pode ver que isso significa que isso é tocável ou pressionável. Eu posso usar este aqui para procurar qualquer produto que eu quiser. Então você pode ver que temos essas setas aqui, meu registro de clientes, e há mais alguns botões. Se eu passar o mouse sobre essas áreas, você pode ver que eles estão se transformando em botões, e isso vai me mostrar uma lista. Eu posso ver que tudo isso são significantes, esses botões, esses estados pairando, a cor bruta desta área. Você pode ver aqui, este é um significante que esta área é importante, você pode executar ações aqui. Agora, se tomarmos o exemplo de Walmart.com, você pode ver aqui, novamente, o mesmo padrão é repetido aqui. Temos um bar azul muito grande aqui. A maior parte da acção está a decorrer neste domínio. Isto é um significante. Então temos este botão amarelo muito grande, cor poderosa, e novamente uma barra grande para procurar aqui. Isto é novamente um significante. Você pode ver que estes são estados pairados. Estes são significantes de que essas ações são possíveis. Você pode usar essas áreas para fazer essas ações, então eu posso clicar nesta. Além disso, você pode ver no meu pairar, você pode ver um pequeno ícone de mão. Isso significa que isso é pressionável, ou eu posso clicar nele. Estes são todos os significantes usados para elaborar a ação, quais ações são possíveis, e como você vai completá-la, onde você precisa clicar em “Ok”. Isto é tudo sobre significantes e affordances, anti-affordances. Vamos passar para a próxima lição. 11. Acessos e signos e de ignição e a de ignição e a: Deixe-me explicar mais sobre affordances e significantes. Agora todos vocês já viram este iPhone. Então, no iPhone, as affordances são que eu posso segurá-lo na minha mão e isso oferece colocá-lo no bolso, e também vai dar ao luxo de ligar e desligar. Esta é a propriedade de todos os telefones celulares. Eu sei que esta tela é escura, então eu preciso ligá-la, mas onde eu vou ligá-la ou qual botão eu vou pressionar vai ser significante usando significante. Então eu vou te mostrar os botões aqui. Aqui temos um botão no topo e se você vê-lo de perto, então temos três botões deste lado, você pode ver aqui. Você pode ver que eles têm mais, deixe-me mostrar-lhe um pouco de zoom in. Não está ampliando, mas há um símbolo de adição em um botão e símbolo de menos, que significa que ele vai aumentar ou diminuir o volume deste telefone celular e o botão de mudo. Pela primeira vez, eu não sabia o que ia fazer neste botão, se ele vai silenciar ou vai escurecer as cores da minha tela ou qualquer outra coisa, mas depois de usá-lo uma vez eu soube que isso iria silenciá-lo. Se eles tivessem colocado algum ícone aqui que vai silenciar, então seria mais útil. Sempre haverá alguma troca entre design e significantes. Você pode ver aqui que eles podem fazer este botão, este ligar, mas no topo você pode ver aqui. Então isso não está se concentrando de qualquer maneira. O botão na parte superior, se é uma cor um pouco diferente como vermelho ou talvez verde, Eu sei que eu vou pressionar isso para ligá-lo. Agora, quando eu usar isso pela primeira vez, eu não vou ter certeza de qual botão vai ligar este dispositivo. Da mesma forma, se você vir meu iMac na parte de trás, você pode ver aqui, este é meu iMac e quando eu mostrei meu iMac pela primeira vez para um dos meus amigos, você pode ver que há um logotipo da Apple aqui e o que ele fez foi que ele tentou Toque aqui assim e eles estão batendo nele três ou quatro vezes. Ele não tinha certeza se isso iria ligar. Então ele tentou procurar em torno deste dispositivo onde está o botão de ligar? Esta é uma troca de design. Eles fizeram o botão na parte de trás e é quase visível. É tudo prateado, então você precisa encontrar o botão. Mesmo agora eu estou usando a partir de seis meses ainda tenho dificuldade em estender a mão por aqui e tentar encontrar o botão onde ele está. Então esta é uma pequena história sobre significantes e affordances. Da mesma forma, se eu te mostrar este frasco, este é um frasco de remédio que eu estou tomando. Você pode ver que temos tampa aqui no topo. Agora as affordances são que eu posso segurá-la na mão. Ele pode ser equilibrado em uma mesa como essa e mais uma affordance é, eu posso ver que é uma garrafa, então eu preciso abri-lo. Então pode ser aberto e fechado. Agora, onde ele pode ser aberto e qual parte dele vai ser a tampa? É o significante. Então eles têm, deixe-me mostrar-lhe que eles fizeram esta tampa é um pouco separada desta garrafa. Então você pode ver que isso vai significar que eu posso abri-lo daqui ou eu tenho que transformá-lo assim. Ok, então isso é tudo sobre significantes e affordances. Vejo você em breve em outra lição. 12. Exemplos de preços e signifiers e signos: Agora deixe-me mostrar mais alguns exemplos de affordances e significantes para elaborar mais sobre isso. Agora e você pode ver que este é Photoshop Eu abri um documento. Você pode ver que estes são o limite delimitador deste documento, que está em branco e tudo o resto é preto. É uma affordance que você não pode digitar ou fazer nada nesta área. Tudo o que você precisa que você vai criar, você precisa estar fazendo isso nesta área. Então este é um anti-affordance que Photoshop tem limitado este documento com um limite. O mesmo está no Microsoft Word. Se eu abrir qualquer documento no Microsoft Word, agora, mesmo é a situação no Microsoft Word. Você pode ver que há um anti-affordance que você não pode ir além desta área. Então, se eu continuar digitando, vai ser na próxima linha. Então mostra que você não pode sair desta margem estão fora deste documento, este limite de documento, isso é anti affordance. Ele ajuda o usuário a entender o que ele ou ela não pode fazer com este software. Agora, se falamos sobre as affordances, você pode ver que eu abri este documento ou este software. Sei que posso digitar algo aqui. Então, se eu tiver um documento vazio como este, você pode ver que este é o cursor. Eu posso ver que eu posso digitar algo aqui. Posso copiar ou colar algo aqui. Estas são as affordances. Se falamos de significantes, então você pode ver que estes são os significantes, Isto é destacado. Então, se eu mudar para este, este ou este, estes são estilos diferentes. Você pode ver agora que este cursor foi alterado para o texto maior. Então estes são significantes. Estes são todos os botões que você pode ver aqui. Isso é clicável, drop-down e um monte de outros agrupamentos diferentes de botões. Estes botões todos são significantes que essas ações são possíveis com este software suave agradável ou objeto. O mesmo é a situação aqui no Photoshop. Você pode ver aqui, há poucos controles destacados e poucos estão desativados. Então é assim que um significante vai me ajudar a entender que essas ações não são possíveis neste momento com este documento. Você pode ver aqui você pode mostrar esses controles de transformação e tudo mais e algumas ações ou alguns botões. Estes são possíveis com ele. Outros não são possíveis. Então isso é sobre softwares. Agora vou mudar para hardware ou produtos diferentes. Você pode ver que este é um dos exemplos. Agora de olhar para ele pela primeira vez, eu acho que é algum tipo de chaleira e eu tenho que colocá-lo no meu fogão ou forno para aquecê-lo. Mas acho que são alto-falantes. Se olharmos de perto, você pode ver aqui está o significante de que esses pequenos buracos nele, estes estão mostrando que isso é basicamente um orador. Agora, se você olhar para os botões ao redor disso, você pode ver aqui, aqui nós temos os botões deste lado. Estes são para ativá-lo ou ligá-lo, desligá-lo ou algo assim. Agora, se olharmos para este dispositivo, produtos muito novos que entram no mercado e, e que são realmente produtos novos ou inovadores. Eles vão ter muito esse problema. Que é que não podemos dizer como ligá-lo, os significantes e affordances. Talvez eu acho que ele tem conversa, então talvez seja um telefone ou talvez seja microfone ou algo assim. Mas na verdade, eu vou te dizer e você vai se surpreender que seja um guarda-chuva de colina. Ele cria um guindaste para parar gotas de água vindo do topo para que você possa segurá-lo em sua mão e você pode estar fora da chuva. Portanto, este é um produto muito inovador e, olhando para ele, não consigo ver a maioria dos controles. Não sei como ligar ou desligar. As affordances estão basicamente relacionadas à sua percepção. Então, se eu não consigo perceber o que é essa coisa, então eu não vou conseguir as affordances e eu posso ser capaz de ver alguns dos significantes, mas eu não sei o que eles vão fazer. Aqui está outro exemplo. Isto é um fã. É fã muito, muito inovador, mas de olhar para ele, eu não posso dizer o que este dispositivo vai fazer ou quais são as affordances, se eu vou pegar ar a partir dele e tudo, eu vou ver meu rosto nele ou um holograma nele. Eu não sei. Agora, se olharmos para a parte inferior aqui, e se eu ampliar, vocês podem ver aqui na parte inferior, vocês podem ver que existem botões e botões diferentes para desligá-lo ou ligá-lo, ou talvez acelerar. Há um botão de volume aqui para dar a volta. Então estas são as affordances. Estes são os significantes que mostram que este dispositivo pode ser ligado e desligado. Também deve haver algo para aumentar ou diminuir. Pode ser a sua velocidade ou pode ser outra coisa. Então isso é sobre affordances e significantes. Eu vou compartilhar outro vídeo onde eu vou te mostrar a garrafa de shampoo para mostrar as affordances. Então vamos passar para a próxima lição. 13. Mapeamento natural: Mapeamento é a relação entre dois conjuntos de coisas. Suponha que haja muitas luzes em uma sala de aula e uma fileira de interruptores de luz esteja na parede. Agora, você pode adivinhar qual deles está relacionado com qual? Esta é a maior pergunta. Muitas pessoas, eles numeraram seus botões e interruptores escrevendo F ou light one, L_1, L_2, algo assim nos interruptores. Este é um conceito muito importante. Outro conceito é o mapeamento natural. Mapeamento natural é que quando você tem dois conjuntos, e seu mapeamento corresponde uns com os outros de uma forma natural. O primeiro botão é a primeira luz, e o segundo botão é uma segunda luz no teto e o terceiro botão. Por exemplo, se eu tiver três luzes em uma linha, em uma coluna e eu pressionar o primeiro botão, então ele acende a primeira luz, então isso é basicamente mapeamento natural. Toda vez, se eu quiser ligar qualquer luz que eu desejo, eu posso naturalmente mapeá-lo para o botão que eu preciso pressionar. Alguns exemplos de mapeamentos em design de software ou design hardware é quando você usa as teclas de controle X-box, e você também vê que existem teclas de atalho diferentes em diferentes softwares e aplicativos, até mesmo no Photoshop ou em qualquer editor de texto. Existem controles semelhantes, como controle S ou comando S, para salvar o arquivo. É comum em todos os sistemas operacionais diferentes ou em todos os softwares diferentes. Assim, o usuário pode facilmente memorizá-los. Eles são salvamento natural. S é para Save, por isso é mais fácil lembrá-lo. É o nosso mapeamento natural que se eu pressionar o controle S ou comando S, Ele vai salvar o documento. Vamos ver alguns dos exemplos de mapeamento e como diferentes mapeamentos são bons ou ruins, e como você pode usar esses princípios para melhorar o seu software, sites, jogos ou aplicativos. Agora você pode ver aqui, esta mulher é, o que ela está fazendo é que ela está rotulando a idéia principal no topo ou na categoria principal ou na área principal no topo e no fundo, ela está rotulando o que esses botões vão acender. O que eles estão indo, a que luz eles vão acender. São botões diferentes, ela usa rótulos diferentes em toda a casa dela assim. Então esta é a solução dela. Agora, há mais um artigo de Don Norman, Designing For People. Você pode ver que eu falo muito sobre ele. Agora, em seu livro, ele tentou propor uma solução, algo assim. Esta é a planta de uma casa e ele diz que, “Coloque os botões nos lugares onde as luzes estão realmente lá.” Então, se a luz estiver nesta parede, você precisa colocar o botão na planta aqui. Então, se eu ligar isso, ele vai acender a luz bem aqui. Este é o plano dele. Agora, um designer chamado Hwang, eu acho que é um engenheiro civil e da Coreia, ele tentou resolver esse problema. Eu acho que ele resolveu metade do problema, e você pode ver que há um painel inteiro com todo o planejamento do chão da casa. Você pode tocar em qualquer luz ADR, se eu quiser acender meu quarto, eu vou tocar neste ADR, Ele vai acender, ligar e desligar as luzes inteiras. Este é o projeto dele. É chamado de interruptor de luz plano de chão. Agora vamos ver alguns dos projetos mais confusos como este. Este é o painel dentro de um caminhão e você não pode dizer o que esses botões vão fazer ou onde eles estão realmente ligados. Isto é muito confuso. Vou mostrar-lhe mais alguns exemplos deste fogão ou forno. Se ampliarmos, você pode ver que há, um, dois, três, quatro, cinco fogões e há, um, dois, três, quatro, cinco, seis botões aqui. Isto é um pouco confuso. Se eu vou ampliar, você pode ver aqui que este botão à esquerda, que eu pensei que deveria acender este aqui, é para a parte de trás. Então ele vai acender este queimador aqui e não este. Eu acho que eles mencionaram este plano porque não é mapeamento natural. Você pode ver aqui, na minha mente, eu estava pensando que isso deveria estar relacionado com este aqui e este deveria ser para este, ou talvez alguém esteja pensando que isso é para o traseiro e este é para o da frente, mas do meu ponto de vista eu acho que isso deveria estar ligando este queimador. Isto é para o centro um que é por aqui, e acho que deve estar por aqui em algum lugar. Então, mais mapeamento natural nesta área, mas eu acho que eles reservam esta área para este controle do forno. Se formos para o lado direito, você pode ver aqui que este botão é para o forno na parte inferior. Isto é outra vez, frente e traseira. Agora você pode ver que esta posição é totalmente diferente desta. Aqui o botão traseiro está no primeiro, e aqui a traseira está no último, o que é muito confuso para mim. Isto é tudo sobre este mapeamento confuso deste dispositivo. Agora vamos ver alguns dos exemplos mais. Agora você já viu esse controle remoto em muitos brinquedos. Brinquedos controlados remotamente ou controlados por rádio. Você pode ver que isso é um pouco confuso porque um dos painéis e este controle é para frente e para trás e um é para girar. Então, às vezes um novo garoto eles estão realmente confusos como transformar isso ou usar isso. Mas em vez disso, se você for a este, estes são um pouco novos. Você pode ver que estes são realmente naturais. Se você girar este volante, à direita ou à esquerda, ele vai virar à direita ou à esquerda. É muito mais fácil para as crianças. É mais natural porque está ligado aos nossos carros, que conduzem carros com estas rodas. Agora deixe-me mostrar alguns dos exemplos de jogos e como os controles são mapeados em um teclado. Você já jogou um monte de jogos, você pode ver a maioria deles usa os mesmos controles como W, S, A e D por um momento. Um é um, clique do mouse é para lutar, e segundo é para carregar, algo assim. Assim, a maioria desses controles será semelhante em um monte de jogos. Você pode ver aqui, este é outro jogo ZMR. Ele também tem quase os mesmos controles. Você pode ver que este é “Ataque” este “Apontar”, estes são chamados de mapeamento e eles são basicamente por que eles estão usando o mesmo padrão porque nossas mentes estão conectados com botões. Se eu tiver jogado como dois ou três jogos antes, Eu vou ser adotado para este jogo facilmente. Eu posso facilmente começar a jogar este jogo porque eu já estou acostumado e eu já vi esses padrões de mapeamento. Como você pode ver W. É muito natural porque W está no topo. Então, se eu pressionar isso, vai ser movimento na direção para frente, e S é para trás, E é para esquerda e direita. Então, qualquer que seja a posição desses botões, ele vai mover meu personagem de jogo na mesma direção. Isso é chamado de conceito de mapeamento de experiência do usuário, e como podemos usá-los em nosso software ou em nosso hardware, ou em nossos dispositivos, ou em nossos dispositivos eletrônicos para melhorar a experiência do usuário. Agora, no final, vou mostrar a vocês o mapeamento de carros e veículos. Esta é da Mercedes-Benz 2014 Modelo S 550. É mapeamento de ajuste de assento. Alguns anos atrás, eles não estavam usando algo assim. Eles tinham poucos botões aqui para pressionar e gerenciar isso. Agora, se você tentar pressionar este botão, este assento de cabeça, e se você arrastá-lo para cima, ou tentar pressioná-lo na parte superior, ou na parte inferior, ele vai se mover na mesma direção. Agora o que você precisa fazer é apenas, você precisa pressionar este botão sobre isso e esta área está ligada ao seu assento. É muito mais fácil mapear com o que estou tentando ajustar. Então, se eu estou tentando ajustar meu banco de trás, esta parte eu vou pressionar este ou eu vou empurrar este de trás ou daqui e eu posso facilmente ajustar a ele. Este é o meu lugar de descanso ou o que for. Eu não sei como você chama isso. Este é o fundo. Então, todos esses controles são realmente mapeados naturalmente. Qualquer pessoa pode ajustar facilmente os assentos em Mercedes-Benz. Este será o meu último exemplo. Espero que tenham gostado desta lição, agora, vamos passar para a próxima lição. 14. Modelos de a de a de a de conceito e a a a melhoria de UX: Você pode ter lido muitos manuais quando você compra uma coisa nova ou produto novo, nova câmera, um novo forno de microondas, e você pode ter lido muitos manuais técnicos e como usá-lo. Agora, modelo conceitual e modelos mentais, eles são realmente necessários para entender a experiência do usuário de qualquer produto, ou se você quiser melhorar a experiência do usuário de qualquer produto digital. Modelo conceitual é basicamente uma explicação em termos muito simplificados, como esta coisa, este aplicativo , este produto, vai funcionar. Idealmente, seus usuários devem ser capazes de começar a usar seu produto, ou aplicativo, sem ler nenhum manual, ou qualquer documento de modelo conceitual, ou algo assim. Agora, vamos falar sobre modelos mentais. Modelos mentais são basicamente modelos conceituais, mas eles vão estar na cabeça do seu usuário. Seu usuário vai ver e construir seu próprio modelo em sua mente depois de ver seu produto que ele vai funcionar a partir deste botão, ou eu tenho que fazer algo assim para ativar isso, ou talvez usar este produto, ou usar este forno de microondas, ou usar este aplicativo. Esta é a compreensão de seu usuário em sua mente, como seu produto vai funcionar. Pessoas diferentes podem ter diferentes modelos mentais do mesmo item porque é relativo à sua percepção. Se eu tiver conhecimento diferente, ou eu interagi com os diferentes tipos de produtos, ou carros, então eu poderia não ser capaz de dirigir o carro de luxo automático na primeira vez. Posso estar confusa ao entrar nela. Meu modelo mental pode não coincidir com o modelo conceitual desse produto. Agora, quais são as coisas que vão criar um modelo mental? Estes serão affordances, constrangimentos, mapeamento e significantes. Estas são todas as coisas que vão mostrar ou dizer ao seu usuário que isso é possível com este dispositivo. Você pode pressionar este botão a partir daqui, você não pode usá-lo sem conectá-lo no soquete primeiro, isso é uma restrição, e mapeamento é que este botão vai controlar essas coisas. Como designer ou designers de experiência de usuário, seu trabalho é alinhar o modelo mental do usuário com o modelo conceitual do seu produto, seu aplicativo. Você vai usar significantes, e você vai usar affordances, e você vai orientar seu usuário para usar seu produto. Você pode ter visto aplicativos. Quase todos os aplicativos nos dias de hoje, eles vão mostrar-lhe algum guia de uso, ou algum guia de introdução sempre que você iniciar um aplicativo pela primeira vez. Isto é para fechar a lacuna entre um modelo mental e um modelo conceitual. É assim que vamos treinar nosso usuário e dizer-lhes que você vai usar este produto, este aplicativo desta forma. Uma única pessoa pode ter modelos mentais diferentes ou múltiplos do mesmo item. Por exemplo, se eu estiver usando forno de microondas, eu poderia pensar que para aquecer os líquidos, eu preciso usar esses botões, e para aquecer carne, ou alguma outra coisa, eu preciso usar esses botões ou isso sequência. Além disso, há mais uma coisa que você precisa para atender a usuários experientes e usuários novatos. Se você está desenvolvendo um aplicativo, você pode precisar saber que pode haver alguns usuários especialistas que estão indo para usar o aplicativo de forma totalmente diferente, e eles têm modelo mental totalmente diferente do que você é usuários novatos. Então você precisa cuidar de ambos os modelos mentais, ou de ambos os usuários. Agora, vamos ver alguns dos exemplos de modelos mentais. Aqui está como você vai limpar essa lacuna entre um modelo mental e um modelo conceitual. Você vai mostrar diferentes telas passo a passo no início do seu aplicativo. Você pode ver aqui, um exemplo está aqui. Outro exemplo são essas telas de integração, você pode ver aqui. Estes são três ecrãs e estão a destacar cada funcionalidade da sua aplicação. Há mais um. Isso é melhor porque você pode ver que está gradualmente levando você para o primeiro passo. Ele está guiando você para o primeiro passo, que é este login com Facebook. Isso é muito legal. Isso é o que seus aplicativos, seus produtos devem estar fazendo. Eles devem orientar o usuário sobre seu primeiro uso, como usar seu aplicativo, em vez de abrir seu manual e ler através páginas diferentes e navegar o que eu preciso fazer antes de usar este aplicativo. Agora, aqui estão algumas imagens de tempos de sonho, e esta também é de tempos de sonho. Estes são os antigos fornos de microondas. Você pode tê-los usado. Eles têm botões como este. Estes são diferentes níveis de calor, e este é o temporizador. Isso é muito simples de usar. Só você precisa selecionar o temporizador e a capacidade no que ele vai funcionar. Isto é muito fácil. Você só precisa girar a maçaneta. Por muitos anos, tendemos a usar algo assim, então nosso modelo mental foi construído sobre ele. Sempre que vemos alguns designs como este, é da Samsung. Se eu tentar começar a usar isso, depois de usá-los, eu realmente vou ter dificuldade em usá-lo porque eu não sei por onde começar. Devo pressionar o botão Iniciar, e ele vai me guiar? Ou devo começar a digitar esses botões? Não há orientação aqui. Agora, se você olhar para esses modelos, estes eu acho que os modelos mais recentes chegando agora, você pode ver que eles combinaram os conceitos antigos, ou modelos mentais antigos com o novo. Você pode ver o que temos aqui, nós temos o botão, e aqui temos botões diferentes que são muito nervosos, e eles têm efeito de construção, assim como botões antigos. Aqui você pode ver que isso é basicamente um painel de toque, e estes são botões. Você pode ver, é que eu acho que um pouco mais fácil de começar, tem menos controles, você só precisa selecionar qualquer um e basta girar este botão e começar. Este é o meu modelo mental. Isto é tudo sobre modelos mentais e modelos conceituais. Espero que tenham gostado desta lição. Se tiver alguma pergunta, pergunte-me. Vamos passar para a próxima lição. 15. Sua de trabalho e atenção: Uma das maiores limitações da mente humana é a memória de trabalho. A memória de trabalho é o nosso foco de atenção de curto prazo, e tem um intervalo de tempo muito limitado. É o recurso mais limitado que nós humanos possuímos. É basicamente nossa atenção e essa atenção é altamente focada e muito seletiva. Você está sentado em um restaurante e você está falando com seu amigo, jantando fora e você não está ciente da maioria das pessoas ao seu redor que estão sentadas no mesmo restaurante. Mas você não estava ciente de apenas algumas coisas na sua frente e algumas coisas que seu amigo está dizendo. Então é assim que nossa memória de trabalho é limitada. Conceito semelhante se aplica a você. Vocês estão conscientes das últimas palavras ou ideias que ouviram de mim. Mas provavelmente você não sabe qual é a cor da parede atrás de você. Portanto, estas são as limitações das mentes humanas, a memória de trabalho ou atenção, nossa memória de curto prazo, também é chamada de memória de curto prazo, é muito limitada. Agora, vamos falar sobre a limitação ou capacidade real em segundos ou em números de memória de trabalho. A capacidade média de memória de trabalho foi de quatro mais ou menos um item. Antes disso, havia uma pesquisa antiga dizendo que ele tem algo com os sete mais dois ou menos dois. Mas a nova pesquisa é que é quatro mais ou menos um. Também depende do item, o item que você está tentando armazenar, se é apenas um grande número ou é nomes diferentes de frutas diferentes. Também depende disso, mas o intervalo médio é quatro mais ou menos um, então é de três a cinco. Agora, quanto tempo a informação vai ficar em sua mente brilhante e duração é de 10-15 segundos por Goldstein. Eu acho que a pesquisa feita por Goldstein, há mais um termo que está relacionado com a memória de trabalho, que é a carga cognitiva. É mostrado e falado sobre muito no design da experiência do usuário que essa coisa vai aumentar a carga cognitiva. Refere-se à carga colocada na sua memória de trabalho ou ao seu poder de processamento da sua mente. Pode ser qualquer cálculo, cálculo difícil, ou pode estar memorizando coisas. Portanto, tenha em mente que essa carga cognitiva significa a carga colocada em sua memória de curto prazo e como você vai processar essa informação. Agora, o principal problema com a memória de trabalho é que ela é altamente volátil. Se você está trabalhando em algo e alguém apenas interrompe você, você vai perder tudo o que estava em sua memória de trabalho. Agora, essa volatilidade também se aplica aos objetivos e aos detalhes de objetos. Talvez você esteja tentando se lembrar da lista de itens e você saiu de sua casa para pegar algumas coisas do supermercado e você conheceu um amigo e ele pergunta como você está homem, o que está acontecendo? Isso e aquilo e de repente você esqueceu toda a lista de itens que você está tentando comprar na mercearia. É muito volátil você não vai mantê-lo por mais tempo em sua mente. Se você perder qualquer item, você também vai perder o controle da coisa que você está tentando fazer ou você é o objetivo. Talvez eu estivesse tentando ir na cozinha pegar um pouco de leite na geladeira. Mas quando cheguei na cozinha, esqueci o que estava fazendo aqui, não me lembro. Talvez eu estivesse aqui para pegar um copo de água. Então é assim que nossa memória de trabalho funciona e esta é a maior limitação que ela tem. A informação na memória de trabalho vai desaparecer rapidamente. Eu vou compartilhar com vocês um monte de exemplos de memória de trabalho e, em seguida, sua aplicação em design de interface de usuário ou design de experiência de usuário ou aplicativos móveis. Mas agora eu vou mostrar apenas o único aplicativo que é o comprimento da manchete. Agora, de acordo com a pesquisa publicada por uma das empresas de plataforma de compartilhamento de mídia social chamada Buffer e eles realmente pesquisaram que o tamanho ideal de qualquer manchete. Eles descobriram que seis palavras é o comprimento ideal porque seis palavras estão dentro do nosso limite de memória de trabalho. É muito perto também, Jakob Nielsen, ele é um dos pioneiros no design da experiência do usuário. Seu estudo também mostra que as manchetes com o comprimento de 5-6 palavras funcionam de forma muito eficaz. Na verdade, tudo isso está relacionado à nossa capacidade de memória de trabalho. Temos uma capacidade de três a cinco palavras, ou talvez três a cinco itens. É mais fácil para nossa mente processar esses muitos pedaços de dados. Se tivermos um comprimento de cabeçalho de 10 palavras, nossos olhos e mente vão pular alguns dos verbos com muita facilidade ou rapidez, pegar a idéia ou perceber a idéia do que esta manchete está realmente dizendo. Tenha isso em mente enquanto você está projetando aplicativos móveis, ou você está projetando formulários ou todos esses produtos. Tenha em mente que você não vai colocar seu usuário em uma situação em que ele ou ela tem que se lembrar de um monte de coisas, ou eles têm que se lembrar dele por longos períodos. Vamos passar para a próxima lição. 16. Exemplos de memória de trabalho: Vamos ver alguns dos exemplos de memória de trabalho e como diferentes objetos ou elementos de design eles podem levantar a carga em sua memória de trabalho. Agora este primeiro exemplo é o Google Maps, e você pode ver este IM aqui mapa localizador vai me ajudar a memorizar que eu estou aqui. Além disso, você pode ver todos os símbolos ao meu redor como esta mesquita e este E-Salhulat Center. Isto é uma escola. Então temos este clube de comida ou área de comida. Então temos este banco aqui. Então todas essas coisas estão me ajudando. Minha memória de trabalho que aqui está algo está localizado. Então eu posso facilmente apontar que eu quero ir para aqui ou eu quero ir para aqui. Eu tenho que fazer a curva. Esses mapas e os aplicativos que usam, usam mapas para localizar a localização atual dos clientes ou usuários. Isto é realmente útil. Outro exemplo é que se você quiser que seu usuário tenha menos memória de trabalho ou processamento, então você pode usar algo assim. Você pode ver aqui no topo cartão de pagamento de envio. Neste momento, estou aqui. Esta é também outra implementação que estou neste momento aqui. Só preciso de mais um passo como este, rever e confirmar. Quero inserir o cartão. Isso pode facilmente me dizer que quantos passos eu fiz e quanto eu preciso ir mais longe. Mais um exemplo são os modos. Modos significam que neste momento estou no modo de navegação anónima ou no modo oculto no meu navegador Chrome. Você pode ver enquanto eu mudo para este incógnito, você pode ver aqui você pode ir sobre isso aqui, uma nova janela anônima. Tudo simplesmente mudou. Estou agora em outra janela e todos os temas ficam pretos. Há um sinal ou símbolo aqui. Isso está me dizendo cada vez, cada minuto, cada segundo que agora eu estou usando este modo deste software, então eu sou deslocado para outro modo se eles removem isso, tudo isso, e eu poderia estar pensando que eu estou usando meu navegador normal através deste navegador está me pedindo para fazer login novamente neste site. Esta é outra maneira. Usando modos, você pode ter visto diferentes jogos de vídeo. Se você estiver mudando para outro modo e ele pode mudar toda a interface ou alguma indicação de que você está neste modo, você está jogando neste modo, modo rede ou modo de jogador de equipe ou algo parecido. Uma coisa que também pode ajudar a elevar sua carga de memória de trabalho é isso, você pode ver neste canto, isso é chamado de pão ralado. Este é o caminho, mais uma vez que eu estou agora aqui. Além disso, você pode ver as seleções. Se eu cliquei, selecionei este, isso está me dizendo que agora eu estou nessa seleção. Destaca-se todas estas indicações e significações. Eles estão me dizendo que agora estou aqui e estou neste estado. Vamos dar outro exemplo de walmart.com. Você pode ver novamente, eles têm pássaro muito agradável vem e eles são realmente visíveis. Neste exemplo, você pode ver que isso não é muito visível também, é muito embalado. Aqui temos migalhas de pão muito visíveis. Então, novamente temos trilha inteira e mais um botão, editar aqui de volta para a página anterior. Então, se alguém quiser voltar e fazer outra página, isso é muito útil. Agora, outro exemplo é a história. Você pode ver se você vai ao YouTube, todos os vídeos que você assistiu, ele mantém o histórico de todos esses vídeos para que eu possa pesquisar dentro da minha história como você pode ver aqui. Posso ver o que procurei. Então este é o meu histórico de relógios, e este é o meu histórico de comando. Eu poderia ter esquecido que a última noite, qual vídeo eu estava assistindo, por exemplo, como MacBook Pro, botão liga/desliga, corrigir. Eu posso pegar isso daqui. Além disso, se você acessar este histórico do navegador, todos esses navegadores, eles mantêm o histórico de quais páginas ou sites você visitou a que horas. Isso está ajudando nossa memória de trabalho porque não podemos manter toda essa informação em nossa memória de trabalho. Da mesma forma, se olharmos para diferentes softwares novos como o Photoshop ou mesmo este Microsoft OneNote, você pode ver agora que eles habilitaram o salvamento automático. Se eu tentar mudar algo, você pode ver aqui, ele mostra o nome da pessoa que muda neste documento, escrever notas na Nuvem. Ele sincroniza no meu iMac e PC Windows. Estou usando apenas este documento e ele é salvo e carregado automaticamente na minha Nuvem ou na sincronização em diferentes dispositivos. Este é realmente puro recurso, autosave, um monte de aplicativos, eles estão usando autosave. Deixe-me voltar para as cartas aqui. Este é outro exemplo de salvamento automático. Você pode ver aqui estes são os itens que eu deixei no meu cartão e quando eu voltei, ele está me mostrando os mesmos itens aqui. Significa que está mantendo registros dos meus itens aqui e de todos os meus pedidos, todos os pedidos. Estes também são bons para a minha memória de trabalho. Outro exemplo de memória de trabalho é que você viu esses arquivos recentes em muitos aplicativos e softwares. Isto é apenas para memorizar que a última vez que abro todos estes ficheiros ou este ficheiro ou este ficheiro ou este ficheiro. Poupa-me tempo a localizar todos estes ficheiros. Você pode ver aqui em Eu estou agora no Photoshop ou ele está exibindo, Eu acho que quase 10-12 últimos arquivos abertos e é classificá-los por este último aberto ok. O meu mais recente está aqui. Isto é realmente lógico e está combinando com o meu modelo mental que este é o primeiro, o último que eu usei, depois este, depois este. Estes são todos os arquivos. Este é outro exemplo, arquivos recentes. Isso pode ajudar muito a fazer menos carga na memória de trabalho. Isto é tudo sobre memória de trabalho e exemplos e como podemos implementá-lo para elevar a memória de trabalho. Não precisamos que nossos usuários pensem em tudo e os mantenham em sua memória. É isso. Se tiver alguma pergunta, pergunte-me. Vamos passar para a próxima lição. 17. Reconhecimento e de recall e de and: Se você vir algum de seu amigo vindo de 500 metros ou até 200 metros, você pode facilmente reconhecê-lo, mesmo olhando para todo o corpo ou movimento que esta é aquela pessoa ou este é John ou esta é Sara. Nossos cérebros estão conectados para reconhecer as coisas em grande velocidade. Você pode facilmente reconhecer um rosto que você viu 20 anos atrás. Da mesma forma, os padrões ou rostos familiares, ou os ícones familiares que você já viu em poucos aplicativos, sua mente vai processá-los muito rápido e eles vão ser reconhecidos muito rápido. Levará menos tempo para reconhecê-los. Em vez de lembrá-los ou obtê-los de sua memória de longo prazo e pensar que, “Onde eu vi essa pessoa? Não me lembro dele.” Mas se você vir um de seus amigos, você vai rapidamente se lembrar dele. Você não precisa se lembrar de nada, você só o reconhece, você só sabe quem ele é. Você pode aplicar o mesmo princípio. Este reconhecimento é mais fácil do que recordar. Lembre-se significa que você vai trazer essa informação de sua memória, arrastá-la para fora. Mas o reconhecimento funciona como um estalo. Você vai saber o que isso realmente significa. Portanto, o usuário não deve se lembrar de informações de uma parte da tela para a outra, eles não precisam se lembrar das informações que acabaram de ver. Além disso, não tente usar nenhum novo tipo de ícones ou padrões com os quais o usuário não esteja familiarizado. Da mesma forma, se mostrarmos um usuário revelando um novo padrão ou um comportamento muito novo de um aplicativo que ele não viu antes, será muito difícil para ele ou ela usar esse produto ou até mesmo se inscrever ou entrar. Então evite lembrar e tente implementar o reconhecimento, tente usar padrões semelhantes. Vamos ter outra palestra completa sobre padrões na próxima seção. Vamos elaborar esse reconhecimento usando algum exemplo. Você preencheu muitos formulários on-line ou formulários de login, você viu que existem ícones de bloqueio no campo de senha. Se você já viu isso várias vezes antes, você vai reconhecer instantaneamente que sem qualquer trabalho ou sem qualquer ajuda que você precisa colocar senha neste campo. Ao usar ícones e padrões familiares em seu site ou aplicativos móveis ou software, você está realmente reduzindo a carga cognitiva de seu usuário. Portanto, tenha em mente que você vai usar padrões e ícones semelhantes ou familiares. Não tente criar um novo tipo de letra ou campo que um usuário não consiga reconhecer. Agora há um outro conceito que está relacionado a esse reconhecimento, que é as expectativas do usuário ou antecipação do usuário. Tente sempre atender às expectativas do usuário ou antecipação. O que este conceito significa é que, se o nosso cérebro está ligado para ver um padrão semelhante de novo e de novo, ele irá segui-lo. Então, se você está tentando criar um novo tipo de barra de abas que está flutuando dentro ou no meio do seu aplicativo, então o usuário não vai reconhecê-lo. O usuário não está esperando que a barra de guias esteja flutuando dentro do aplicativo no meio dele. Além disso, se você tentar olhar para o ícone do carrinho ou ícones da lista de desejos, eles estão no lado superior direito de qualquer site de comércio eletrônico. Então, se você está tentando colocar o ícone do carrinho à esquerda ou no meio, o usuário não está esperando esse padrão. Eles vão perder isso, eles não vão reconhecê-lo, e vai levar muito tempo para encontrar isso e tornar a experiência do usuário pior. Portanto, não tente criar um novo padrão, um novo ícone para confundir seus usuários. Na próxima lição, vamos ver muitos exemplos sobre reconhecimento de padrões ou reconhecimento e expectativas do usuário. Se tiver alguma pergunta, pergunte-me, vamos para a próxima lição. 18. Exemplos de reconhecimento do e não de recordem: Vamos ver alguns dos exemplos de reconhecimento em vez de recall. É um princípio muito básico e eu vi muitos designers usá-lo de uma maneira muito errada. Então este é o nosso primeiro exemplo. Agora você pode ver aqui há alguns ícones que reconhecemos instantaneamente como este ícone “Voltar” e o ícone “Telefone”, e também o ícone “Chat” talvez. Mas para esses três pontos, talvez isso seja “Mais”, mas a maioria dos usuários, eu acho que eles não vão reconhecê-lo, novos usuários. Então, na parte inferior, você pode ver esta é a nossa barra de guias principal, e esta é a nossa barra de navegação principal deste aplicativo. Você pode ver dois usuários e um usuário, então isso é, Eu não sei o que é esse sinal e isso é para Setting. Isso é muito comum, e isso não é muito comum. Isso pode se tornar e como talvez seja o meu perfil ou conta, e isso também não é muito claro. Você pode entrar em alguma ambiguidade que eu não sei se é minha rede de usuários ou se isso são meus seguidores ou o que quer que seja. Portanto, certifique-se se você estiver usando ou introduzindo esses ícones, eles devem ser facilmente reconhecíveis pelos usuários. Então tente usar ícones padrão aqui. Se você não consegue encontrar ícones padrão, então coloque alguns rótulos sob eles como se isso fosse talvez minhas correspondências ou este é meu perfil, e este é meus seguidores, e essas são minhas configurações. Se você pode escrever algo em sua interface de usuário, é a melhor coisa que você pode explicar apenas por uma palavra ou duas palavras, que este item vai fazer as coisas. Uma vez que os usuários estão familiarizados com esses ícones olhando para eles e lendo seus títulos, você pode remover títulos mais tarde ou os rótulos com esses ícones porque os usuários já estão treinados. Para novos usuários, isso sempre será um problema. Agora vamos ver outro exemplo. Você pode ver aqui esta é uma tela de Login desenhada por este Vitaly Rubtsov Eu acho que é um drible shot. Agora você pode ver que isso é bastante padrão, mas há poucas coisas que podem ser confusas que isso vai ser sempre e-mail. Então este é basicamente um ícone de “E-mail”. Então, qualquer pessoa usando esta tela sempre assumirá que colocar seu e-mail aqui e isso é para senha, mas talvez poucos usuários ou talvez usuários antigos que estão apenas começando em celulares ou aplicativos inteligentes eles podem não ser capazes de fazer login usando isso. Mas ainda assim eu acho que este é um bom exemplo porque eles estão usando quase os ícones padrão aqui. Outro exemplo, este Login e Cadastre-se você pode ver aqui. Aqui temos novamente este ícone “Usuário”. Agora, o que você acha? Você deve usar seu nome de usuário aqui ou você deve usar seu e-mail aqui? Isso é bastante padrão para senha, mas isso é um pouco ambíguo. Isso pode confundir seu usuário. Portanto, estas são poucas coisas que você precisa ter em mente esse reconhecimento em vez de recordar. Você pode usar um ícone de “E-mail” aqui, ou você pode simplesmente usar algo assim. Este é o melhor exemplo de Cadastre-se e Cadastre-se que eu já vi. Sempre tente usar os rótulos na parte superior. Então, quando o usuário está digitando, ele sabe ou ela sabe que isso é o que eles estão digitando aqui ou esta é a informação necessária. Se você estiver usando algo como este dentro de rótulos, estes não são muito bons se você tiver um formulário como quatro ou cinco campos. Nunca tente usá-lo. Mas se você tiver apenas dois campos, talvez o usuário possa se lembrar disso. Isso está no limite da memória de trabalho. Por favor, tente lembrar que eu mostrei a você que é quase como três a cinco itens. Então, o melhor exemplo que eu diria é este. Cada rótulo é claro, então eles têm campo de texto aqui; senha, confirmar senha, código de convite. Este é um corte claro. Por quê? Porque ele está usando texto para explicar que essas informações são necessárias. Além disso, você pode ver uma maneira engraçada de dizer essa porcaria, eu esqueci a senha. Mas se eles colocaram sublinhado em torno dele, então talvez seja mais fácil clicar. Então temos este Login e Criar contas. Então estes também são indicadores muito bons que precisamos de Login aqui, esta é a tela de Login, esta é uma tela de Criar Conta. Isso é bastante padrão se você estiver usando quaisquer símbolos, ícones, tente usar os padrão. Se você estiver usando um novo ícone, tente usar um rótulo com ele, como nome de usuário ou coloque seu e-mail aqui, algo assim para ajudar o usuário a resolver a confusão que o que este ícone significa. Agora, vamos olhar para esta tela. Isto é bastante normal. Esta é uma tela antiga do Facebook. No início, eles mostraram alguns rótulos em torno desses ícones, se você lembrar, talvez alguns de vocês possam se lembrar. Então, uma vez que os usuários estavam familiarizados e se familiarizar com esses ícones, então eles podem facilmente saber que este ícone é para minhas solicitações ou rede. Isto é para as minhas mensagens. Estas são as últimas atualizações e estes são os meus feeds e estes são os extras. Então, embora eles estejam usando algo assim, mas ainda é melhor que você coloque alguns rótulos em torno dele e torná-lo mais utilizável. Ok, mais um exemplo do Google YouTube, e você pode ver aqui, há alguns ícones na parte inferior deste vídeo, como, Gostei e Dislike it. Sempre que eu passar o mouse sobre ele, ele mostra um pop-up. É outra maneira de mostrar ao usuário que este ícone vai fazer isso. Então os três primeiros ícones são bastante familiares para mim e eu sei o que esses dois e eles recentemente adicionaram este aqui, o que é um pouco novo para mim. Então, se eu pairasse sobre ele, ele diz “Adicionar a”. Eu tenho que clicar nele para ver quais opções estão disponíveis. Você pode ver aqui eu posso adicionar à minha lista, playlist. Isto é um pouco confuso para mim. Eu acho que eles mudaram recentemente e essas coisas podem criar confusões. Eu acho que antes disso foi eu acho que aqui nesta área e eles recentemente mudaram para cá. Esta é uma boa ideia mostrar os textos em pairar. Mas eu acho que só é possível na web. Então, em aplicativos móveis, você não pode mostrar algo assim. Portanto, certifique-se de que você está catering para todos esses problemas ou todas essas confusões que os usuários podem obter de sua interface. Então, isso é tudo sobre usabilidade e design da experiência do usuário e o que você precisa ter em mente enquanto você está projetando suas telas, telas login ou desenvolvendo ou projetando. Se tiver alguma pergunta, pergunte-me. Vamos passar para a próxima lição. 19. Expectations usuário em UX: Vamos falar um pouco mais sobre as expectativas dos usuários. Agora, a expectativa do usuário acontece em duas etapas. Primeiro, vamos reconhecer o objeto, o que esse objeto é, é uma barra de pesquisa, é um botão, é uma barra de navegação suspensa ou um ícone de fechamento. Então, no próximo passo, vamos ver como ele vai se comportar e funcionar. O que precisamos fazer em uma melhor experiência do usuário é que vamos minimizar a lacuna entre o que o usuário espera e o que eles estão experimentando ou como essa coisa está se comportando. Tudo o que você está projetando, ele deve se comportar da maneira que o usuário espera que seja. Agora, a questão é como essas expectativas são formadas. O que esperamos está tudo em nossas mãos. É sobre o conhecimento que adquirimos do mundo exterior ou de experiências semelhantes que estão reunidas em nossa cabeça. É chamado de conhecimento na cabeça. É o termo definido por Don Norman em seu livro, The Design of Everyday Things e o que isso significa é que se nós experimentamos ou usamos produtos similares, então eles vão formar nossas expectativas. A primeira vez que vi a bolha pop-up do chat do Facebook, não consegui removê-la da minha tela por uns 30 minutos. Agora, designers e desenvolvedores, eles criaram um padrão de design ou biblioteca de padrões de design. Agora essas bibliotecas de design, eles nos ajudam a lidar com as expectativas do usuário e comportamentos familiares para que o usuário possa reconhecer instantaneamente que esta é uma navegação suspensa ou esta é uma barra de navegação, ou esta é uma barra de navegação suspensa de qualquer site . Há uma palestra inteira sobre este padrão de design, então eu vou mostrar-lhe esses padrões de design e seus sites na próxima seção. Agora você só precisa saber que estas são bibliotecas de padrões projetadas que são construídas em experiências familiares e itens familiares que os usuários podem reconhecer instantaneamente. Nós, como designers e desenvolvedores, devemos primeiro procurar esses padrões e usá-los em nossos produtos digitais em vez de inventar ou criar um novo padrão ou um padrão próprio. Então mantenha todas essas coisas nas expectativas dos usuários. Vamos ver apenas um exemplo. Vou mostrar-lhe mais exemplos na próxima palestra apenas para dar uma dica das expectativas do usuário. Esta é a tela do Microsoft Edge que está com o Windows 10 e você pode ver que não há nenhuma barra de pesquisa na parte superior. Você pode ver que deveria estar naquele lugar aqui. O que eles fizeram foi, sei lá, eles tentaram modernizá-lo ou o que quer que seja. Eles colocaram aqui como o Google. Eu estava esperando a barra de busca no topo e por uns cinco minutos, eu continuo pressionando aqui nesta área. Eu não estava esperando que a barra de pesquisa é movida para cá ou esta é a primeira página onde eu preciso pesquisar aqui ou inserir meu endereço web aqui. Então, por uns 5 a 10 minutos, eu continuo tocando, clicando aqui nesta área e dizendo onde eu tenho que digitar a URL do site. O que está acontecendo com este navegador? Eu não sei, mas agora eu acho que eles corrigiram esse problema com essas novas atualizações, mas esta é a captura de tela que eu tirei do problema que eu estava tendo. Além disso, você pode ver na parte inferior deste site, parece que é uma página web. Então, em uma página da Web, se houver uma barra de pesquisa, isso significa que ele vai pesquisar dentro deste site. Este era um padrão muito desconhecido e muito novo padrão, agora eu acho que eles corrigi-lo, mas isso é muito confuso para qualquer usuário. Isso é tudo sobre expectativas do usuário, padrões de design e como eles são formados. Se tiver alguma pergunta, pergunte-me. Vamos passar para a próxima lição. 20. Explicação do usuário em que de usuário em seguida!: Agora vou explicar o conceito de expectativas do usuário e como eles são formados usando os mesmos dois telefones que eu mostrei antes. Este é um brinquedo e este é o iPhone. Você pode ver que isso tem uma área de tela aqui. O que aconteceu é que o meu filho tem dois anos, maior parte do tempo usa este telefone. Então ele assiste vídeos do YouTube tocando em diferentes áreas na tela. Ele tinha construído expectativas de que cada telefone seria funcional. Você pode usá-lo tocando na tela. Quando lhe dei este telefone pela primeira vez, ele tentou usar esta tela. Ele tentou entrar aqui para ativá-lo, mas não estava ativando. Por uns 15 minutos, ele não teve a idéia de que precisava apertar esses botões assim. Este é o maior problema. É assim que as expectativas do usuário são formadas. Eles são formados pelo conhecimento em sua cabeça e o que você aprendeu antes ou o que você já experimentou antes da maneira semelhante. Se você tem dispositivos semelhantes como estes, você vai usá-los da mesma forma se você vir um novo. É assim que as expectativas dos usuários são. Adoro ver as crianças quando tentam me mostrar algum problema de experiência do usuário. Adoro vê-los. Eles são o melhor exemplo de confusões de usuários e problemas de usuário. Quando eles vão ver um novo produto, eles vão reagir e tentar usá-lo. Este é o momento em que você precisa ver onde eles vão colocar as mãos, se eles vão puxá-lo para cima, se eles vão corrigi-lo. Isso é tudo sobre as expectativas do usuário e vê-lo em outra lição. 21. Exemplos de expectativas de usuários: Agora, vamos começar com alguns exemplos de expectativas do usuário e como eles são formados e o que estamos esperando, e como a maioria dos designers e desenvolvedores estão cometendo os mesmos erros. Agora, se eu mostrar este site, este é quase um site de comércio eletrônico bastante padrão, eu estou procurando um modelo muito grande aqui, então eu estou procurando por e-mail de suporte. Além disso, eu estou procurando principalmente no lado direito, canto direito, o carrinho de compras. Então também tenho entrada no checkout, então todos estes estão aqui. Agora, uma coisa que eu não estava esperando é que, essas configurações estão à esquerda, mas ainda acho que isso não importa, essas não são configurações muito grandes ou problemas muito grandes. Isso é quase padrão, como eu preciso principalmente das categorias aqui, isso é bastante padrão e tudo mais. Agora você pode ver aqui adicionar ao botão Carrinho é muito proeminente, isto é o que eu estava esperando. Agora, deixe-me mostrar-lhe alguns dos problemas e exemplos em que muitos designers e desenvolvedores fizeram isso realmente errado. Experiência de usuário muito ruim e usabilidade. Então deixem-me mostrar-vos um exemplo. Então, neste exemplo, o tema é muito minimalista, mas o problema com ele é, é barra de pesquisa. Você pode ver aqui eu tenho que clicar sobre ele, e assim que eu clicar meus olhos vão ficar trancados nesta área. Vou mostrar-lhe este problema, que é visão periférica, é na próxima palestra, eu acho, e você pode ver a barra de pesquisa e ícone está à esquerda aqui. Assim que eu clicar nele, eu não sei o que está acontecendo, então eu continuei olhando para cá, e então eu olhei para este lado e encontrei isso. Isso é muito longe, talvez se quiserem usar esse padrão, eles podem usar essa área aqui. Ainda assim, esse padrão não é muito reconhecível e os usuários não estão esperando esse comportamento. Então isso é bastante padrão e olhando para ele, ele não me diz que este é zero itens ou zero para o número de $ ou o custo, então isso também é um pouco ambíguo e isso não é o que eu estava esperando. Esta pesquisa Bar é tudo, embora seja muito original e moderno, mas ainda acho que é um problema muito grande com sites de comércio eletrônico. Agora, se formos a esta loja, muito bom design, muito bom time, tudo muito bonito, mas se você procurar uma barra de pesquisa aqui ou no meio, você não pode encontrá-lo, porque eles mudaram para a esquerda. Então isso é realmente, do que eu deveria dizer, é realmente inesperado que esta barra de pesquisa pode ser encontrada no lado esquerdo onde o logotipo deve estar. Então eles devem trocar esses lugares, então o logotipo deve estar aqui, e as barras de busca devem estar no meio. Agora, se eu for a este site, há muitas expectativas dos usuários, eles realmente estragaram tudo. Você pode ver configurações e cartão está no meio esquerdo, ele deve estar aqui e proeminente, então a barra de pesquisa é muito estranha. Eles têm duas barras de busca aqui, uma esta e outra aqui, que é, eu diria que realmente não é um padrão muito comum e familiar. Você pode ver o logotipo e apenas sentado no meio. Isto é muito engraçado. Eu diria que isso é realmente inutilizável site usability suga e experiência do usuário também. Tudo o resto está bem, mas essas coisas realmente vão doer muito, mesmo que você tenha projetado isso muito bem e tudo é criado, mas ainda assim, essas poucas coisas vão confundir seu usuário. Deixe-me mostrar-lhe mais exemplos, este é o mesmo tema, os mesmos problemas. Então temos essa área e você pode ver aqui, cartão está aqui, barra de busca aqui, isso é bom o suficiente. Onde está o meu login e onde estão as minhas configurações na conta? Deslocaram-na do lado esquerdo. Isso é realmente confuso experiência do usuário e usabilidade. Estou mostrando esses temas de inventar no mercado, e estes são desenvolvidos por diferentes desenvolvedores e designers. Eles devem olhar para esses elementos. Então isso também é realmente confuso, isso não é o que o usuário está esperando, procura aqui, e nenhum ícone para carrinhos de compras, então eu tenho que procurar todos esses textos, ler todos esses textos para ir para o carrinho de compras, isso também está violando a regra do reconhecimento, em vez de recordar. Isso também vai dar aos seus usuários um monte de problemas. Então você pode ver que não há informações para todos esses produtos, você pode ver, eu não sei qual é o preço desses produtos. Este é realmente mau exemplo de um site de e-commerce ou tema. Isso é realmente muito bem projetado, tudo parece legal, mas este ícone do coração, Eu não sei se é meus itens curtidos ou lista de desejos. Talvez eu acho que um pouco de texto aqui como lista de desejos é realmente útil, embora eles têm algum vértice como este, então ele mostra que esta é uma lista de desejos. Mais uma vez, eles violaram a regra, eles usaram a barra de pesquisa à esquerda, e este é um padrão muito estranho, não deve ser assim. Novamente, aqui você pode ver que a barra de pesquisa está à esquerda. Então você pode ver que há toneladas desses temas que precisam de muita correção. Eu até vi um monte de sites de comércio eletrônico que estão usando ou fazendo isso de forma muito diferente, e eles estão surpreendendo seus usuários com as expectativas e confundindo-os, então certifique-se de que você não está cometendo esses erros. Este é o último. Tudo parece bem neste, mas vou mostrar-lhe um comportamento muito estranho que encontrei aqui. Não estou esperando, então não estou vendo nenhum botão “Adicionar ao carrinho” neste produto. Assim que eu passar o mouse, eu vejo essas opções ou algo assim, e eu não tenho certeza o que é isso, então se eu passar o mouse sobre este botão mais, e eu realmente não sei o que ele vai fazer, então se eu pressionar sobre ele, você pode ver que ele adicionou este item ao meu carrinho. Então tente evitar esses novos padrões ou as expectativas que os usuários realmente não estão esperando, e eles não vão reconhecer esses objetos, e eles não vão usá-los. Eles estarão em confusão, e na maioria das vezes eles não vão usar esse recurso. Então, estes são todos exemplos de experiência realmente ruim do usuário, princípios de usabilidade e violando a maioria dos princípios básicos das expectativas do usuário. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 22. Limitações de visão de de de a de a visão de periférica: Outro conceito realmente incrível é como nossa visão funciona ou nosso olho funciona. Estamos limitados na visualização, então este conceito é chamado de visão periférica. O que você vê diretamente na frente ou no meio de seus olhos é chamado de sua visão central, que é muito clara. O que você vê para os lados ou para os lados da sua visão principal é a visão periférica. O limite básico da visão periférica é que você não pode ver claramente em sua visão periférica, está tudo desfocado. Um exercício simples para ver como funciona a nossa visão periférica. Se você tentar se concentrar nesta tela, ou slide, ou o cabeçalho desta tela, e se você tentar ler o texto abaixo dele, você vai falhar, ele vai ficar um pouco desfocado você não pode vê-lo claramente. Se você está se concentrando em alguma área, a área em torno dela está toda turva você não pode ver o que está acontecendo lá ou o que está escrito lá. Vamos ver como nossos olhos funcionam com esse diagrama e como essa visão periférica e central afeta nossa experiência do usuário ou como vemos e interpretamos as coisas. Agora, como você pode ver no meio nosso centro de olhar é mais claro, são quatro detalhes, no meio podemos ver muito claramente, é apenas uma área de foco. Eu vou mostrar a vocês o quanto é, do lado direito dos lados a primeira área é perto da visão periférica nós temos alguma área embaçada, aqui nós não temos muito borrão, então na área periférica média nós temos Mais borrão. Agora, na visão periférica extrema esquerda, não podemos ver nada claramente, está tudo muito desfocado. Agora vamos falar sobre o limite da visão periférica, sua visão periférica é muito fraca à direita e à esquerda, ou nas bordas, e é muito clara no centro. A visão central é usada para ver detalhes enquanto visão periférica é mais experiente em ver movimento, então se alguém simplesmente se mover no lado direito do seu ombro e ele tentar bater em você, você vai se abaixar instantaneamente. Por quê? Porque sua natureza implementou essa visão periférica que podemos responder ao movimento muito claramente. Se algum animal, ou alguma coisa perigosa, ou algum carro, ou algum ciclo está vindo da direita, ele está embaçado nessa região, e se algo se move muito rapidamente você vai adivinhar ou nossa mente vai interpretar ele. É assim que a visão periférica funciona, é melhor na detecção de movimento. Vamos falar sobre o quanto o campo visual é para a visão periférica e a visão central. Nosso campo visual é quase 170 graus em torno de nós e 100 graus compreendendo da visão periférica. A maior parte é visão periférica, não podemos ver a maioria das coisas ao nosso redor claramente. Vamos tentar ver como essa visão periférica é importante na concepção de interfaces digitais. Quando você está projetando algumas mensagens ou notificações, você precisa mantê-los na visão central, e se você não pode mantê-lo na visão central ou muito perto de onde o usuário está olhando, então você precisa movê-lo, você precisa usar algum movimento para mostrar ao usuário que algo aconteceu ou algum erro aconteceu. O que os designers fazem é que eles tentam usar o movimento chamado efeito pop ou efeito pop-up para focar a atenção dos usuários para que o usuário possa ver instantaneamente que algo está acontecendo na direita ou na parte inferior da tela, e ele vai permitem que o usuário encontre as informações facilmente. Outra maneira de atender esta visão periférica é o som. Você pode mover as coisas e você também pode dar algum som como você viu bolhas de ajuda vindo. Em diferentes sites, eles vêm com algum som e animação, que você possa facilmente chamar a atenção de que algo está acontecendo nesta área. A visão central é muito limitada, tudo na tela que não está no um ou dois centímetros de sua localização clique, então ele vai cair na visão periférica onde a resolução é muito baixa, tudo está desfocado. Se você estiver usando algum formulário ou botão e o usuário vai clicar nele, então sua mensagem de erro ou mensagem de sucesso deve estar muito perto desse botão que ele acabou de clicar, então se o usuário está visualizando em qualquer objeto ou ele está se concentrando em qualquer coisa sua tela, a mensagem de erro ou qualquer coisa que você queira dar feedback ao usuário sobre o que ele está fazendo, ele precisa estar muito perto da visão central do usuário, então é assim que a visão periférica e a visão central funcionam. Vou mostrar alguns exemplos na próxima lição, então vamos passar para a próxima lição. 23. Exemplos de os limites de visão de de de a a a: Deixe-me mostrar-lhe alguns dos exemplos de visão periférica e como podemos melhorar nossos projetos e produtos implementando essas limitações de visão periférica. Você já sabe que nossos olhos são limitados. Agora deixe-me mostrar alguns dos exemplos de visão periférica e como podemos evitar as limitações do valor da visão periférica enquanto projetamos para aplicativos web e móveis. Que os problemas mais comuns que vemos são quando os usuários estão usando algo. Por exemplo, estou usando essa configuração de criação de código de cupom nesta plataforma Udemy. Se eu tentar clicar aqui, e eu criar um cupom, por exemplo, amostra gratuita ou algo assim. O preço com desconto é de $50 e você pode ver agora aqui estou focado nesta área. Se algo ou algum erro acontecer e ele aparecer aqui nesta área, eu não vou revisá-lo. Vou criar dez cupons e os prazos serão no dia seguinte. Assim que eu clicar nisso, você pode ver que eu não recebi nenhuma mensagem por dois segundos. Ok, este é o momento. Uma vez que algo se mexeu, eu estava olhando para esta área, aqui, você pode ver que eu estava focado nesta área. Mas uma vez que minha visão periférica viu algum movimento no topo, fui direcionado para a mensagem. Se esta mensagem não aparecer por quatro ou cinco segundos ou se atrasar por mais de um ou dois segundos, então eu vou ficar confuso, meu cupom foi mal sucedido. Esta é uma maneira de usar a visão periférica e como evitar as limitações da visão periférica. Ao mostrar isso idealmente, isso deve ser exibido nesta área. Como uma mensagem e com alguns borrados que esta coisa foi criada. Deixe-me mostrar-lhe mais um exemplo. Agora estou na Amazon dot com e esta é minha lista de desejos ou lista de desejos de produtos para caligrafia. Estou muito interessado neste assunto. Ok. Eu tenho esses pincéis e se eu tentar excluir isso, você pode ver aqui onde a mensagem será exibida. Vamos excluir isso e assim que eu excluí, você pode ver a mensagem foi excluída no lado esquerdo. É na mesma área onde eu estava olhando. Eu estava olhando para cá e estava para aqui. Assim que eu vi a mudança, eu vi esta mensagem, mas idealmente eu acho que deveria ser nesta área, no meio ou talvez neste lado. Vou desfazer isso e vou te mostrar outra coisa. Vamos apagar algo do meio, como este. A única coisa é que eles fizeram é que eles estão usando algum efeito desfocado, se você poderia ter visto. Eles estão usando algum efeito de desfocagem do texto para me mostrar que eu excluí esta mensagem apenas para atrair minha atenção para a mensagem. Esta é outra maneira. Deixe-me mostrar-lhe mais um exemplo. Este é outro exemplo e esta é realmente má implementação desta visão periférica e exibição de erros de forma. O que eu fiz foi que eu estava criando um formulário nesta loja e que era loja TeeChip. Eu estava preenchendo todos os campos do formulário e quando pressiono o botão Salvar no final, esse erro estava aparecendo. Você poderia ter sabido que muitos de seus usuários, usuários da web, eles não estão usando seus navegadores em tela cheia. O que estava acontecendo? Esta parte da mensagem de erro estava escondida atrás e eu não consegui vê-la. Estava abaixo da dobra. Dobrar significa que eu não era capaz de vê-lo, meu navegador não foi maximizado. Durante cinco a dez minutos, continuei a preencher isto e a clicar nisto. Mas então eu vi essa mensagem de erro. Não consegui relacioná-lo a nenhum desses campos. O que eu fiz foi mudar o campo de descrição em vez de campo de título. Você pode ver aqui que diz que o campo de título deve conter essas muitas letras. O que eu estava fazendo é que eu pensei que ele está mostrando o erro relacionado a esta descrição porque você pode ver se nós movemos este erro abaixo deste campo de título ou acima deste campo de título, então ele vai fazer mais sentido e está em nossa visão periférica. Além disso, nossas mentes estão conectadas com agrupamento, que é nosso psicológico. Você pode dizer psicologia visual, que se algo é agrupado, consideramos que está relacionado. Se este erro for agrupado com este título, então faria mais sentido. Nunca cometa esses erros ou se o erro está fora da visão periférica. Por exemplo, se eu tivesse o botão aqui e a mensagem de erro abaixo dele aqui, então eu poderia estar olhando para o botão e eu poderia perder o erro. Estes são os exemplos que você precisa ter em mente que as mensagens de erro ou qualquer informação ou notificação que você está mostrando aos seus usuários, eles devem estar na visão periférica. Deixe-me mostrar-lhe outro exemplo de visão periférica e como este site não está usando corretamente. Este é Shophive e um dos maiores sites de e-commerce no Paquistão. Se eu tentar fazer login, vamos mostrar-lhe a página de login. Agora, se eu tentar entrar, você pode ver aqui que não há botão de login. Encho este, depois preencho este. Quando eu fui apertar meu botão aqui, não há nenhum botão. Por quê? Porque minha visão periférica é limitada a isso. Por alguns segundos eu estava tentando encontrar o botão e então de repente eu encontrá-lo aqui. Isto é muito estranho. Isso não é usuário, o que o usuário está esperando a primeira coisa. Então a segunda coisa é que está fora da minha visão periférica, eu estava focando nisso. Isto está muito confuso. Certifique-se se o usuário está visualizando e preenchendo o formulário assim, nesta linha, neste ângulo seus olhos estão deslizando de cima para baixo, então ele deve encontrar os botões aqui nesta linha. Não por aqui. Espero que tenham gostado desta lição. Se eu aparecer com outro exemplo, eu realmente vou compartilhar com vocês. Eu acho que você entendeu os problemas com nossa visão periférica e como ela é limitada. Vamos passar para a próxima lição. 24. O que é o texto de uso?: Para ser um designer de experiência de usuário melhor, uma das coisas é que você estuda comportamento humano ou psicologia. A segunda é que você vai procurar o ambiente dos usuários ou o contexto do uso. Se você sabe que o que seu aplicativo vai ser usado e como ele vai ser usado e onde o usuário vai usá-lo principalmente e em que situações, então você pode projetá-lo melhor. Por exemplo, se você projetar um aplicativo, por exemplo, o aplicativo para rastrear um endereço ou algo e você sabe que o usuário vai usá-lo principalmente sob a luz do sol, então você sabe que você está indo para projetar um esquema de cores brilhantes para -lo ou talvez esquema de cores mais escuro para ele se ele vai usá-lo na noite. Você vai se certificar de que o contraste é alto e ele pode ver ou ele ou ela pode ver toda a tela do aplicativo enquanto segurá-lo no sol. Da mesma forma, se eu sou um fotógrafo paisagístico e tiro fotos durante a chuva e perto de lagos e rios, então eu preciso de uma câmera com algum escudo meteorológico embutido nele. Um monte de novas câmeras chegando, eles têm escudo meteorológico nele e muitos fotógrafos estão inclinados a comprar essas câmeras. Se você conhece os contextos, ele vai mudar toda a direção do design do seu produto. Vamos ver outro exemplo do contexto de uso. Context também pode nos informar sobre as limitações do nosso software ou uso, por exemplo, se eu estiver desenvolvendo um software ou um aplicativo para bancos, então eu talvez precise ver a configuração da estação de trabalho deles. Preciso ver o que o sistema operacional eles estão usando ou qual navegador eles estão usando ou qual versão do sistema operacional eles têm. Ele também pode me dizer o quanto as distrações que eles têm, por exemplo, eles têm um monte de multidões no banco ou há muito barulho no banco, ruídos de fãs ou como seu escritório está configurado, como seus quartos e suas cadeiras estão configurados. Além disso, qual é o brilho da tela ou quais monitores eles estão usando? Portanto, 95 por cento do tempo, os bancos têm muitos navegadores e sistemas operacionais desatualizados instalados. Aconteceu comigo uma vez que eu estava corrigindo e projetando um site para um banco muito grande na Austrália e o cliente continua me pedindo para consertar os bancos para o Internet Explorer 8 e naquela época, eu acho que havia Internet Explorer 10 lançado e muitos usuários estavam usando Chrome e Firefox. Eu sempre reclamei dele, por que você precisa que eu conserte para o Internet Explorer 8? O que eu aprendi foi que todos os bancos, eles tinham sistema operacional Windows, Windows 7 instalado e eles tinham Internet Explorer 8 e não havia opção para baixar o Internet Explorer 9 ou atualizar porque eles foram corrigidos. Você vê que os contextos de uso e como seu produto vai ser usado é muito importante. Agora, como você está indo para entrar nos contextos que como você está indo para explorar o contexto de uso. Você vai tirar fotos do ambiente do usuário. Você precisa sair onde realmente usar o produto. Você pode ir em frente e você pode ir para seus escritórios, suas casas, passar algumas horas com eles, passar algumas horas enquanto eles estão usando seu produto para ver em que situações eles vão usá-lo. Algumas pesquisas de usuários, eles passam dias ou mesmo meses descobrindo o contexto como o produto vai ser usado, por exemplo, se tivermos alarmante de bebê ou monitor de bebê, precisamos passar um dia inteiro descobrindo como os padrões de sono dos bebês são e o que os bebês vão fazer com o monitor. Talvez eles vão pegá-lo e colocá-lo em sua boca ou eles vão jogá-lo fora. É muito brilhante na sala ou está muito escuro na sala do bebê e seu monitor não pode funcionar, sua câmera não pode funcionar na atmosfera escura? Estas são todas as coisas que você precisa ter em mente enquanto você está projetando um produto ou criando um produto, um aplicativo ou um site. Espero que tenham gostado desta lição sobre contextos de uso e como esse contexto de usuário desempenha um papel importante na experiência do usuário. Vamos passar para a próxima lição. 25. Contexto de uso em em → headshot: Hoje vou explicar o contexto de uso, mostrando-lhes esses dois celulares. Agora, este é um celular seco e este é o iPhone. Agora, a grande diferença é que isso é destinado a crianças. O contexto de uso é totalmente diferente para esses dois dispositivos. Este é para crianças, eles vão jogá-lo no chão. Eles vão bater na parede. Mas, por outro lado, este telefone não é para bater na parede. Então isso vai ser colocado no bolso para que você possa ver a forma fina. Você pode facilmente colocá-lo no bolso. Você pode segurá-lo facilmente em sua mão. Por outro lado, este não é para colocá-lo no bolso por isso é muito enorme, você pode ver aqui. Se você vê-lo de perto, é um pouco gordo, por isso é destinado para as crianças para que eles possam segurá-lo facilmente. O corpo é algo assim. Você pode ver que estes dois produtos são totalmente diferentes porque seus contextos de uso são diferentes. Da mesma forma, quando você usa algumas câmeras, elas são diferentes porque seu contexto de uso é diferente. Alguns deles são apenas apontar e atirar. Eles são muito pequenos em tamanho e alguns deles são para uso profissional. Eles são muito pesados e eles têm uma aderência muito boa. Você pode facilmente agarrá-los. Isto é mais sobre contextos de uso e eu estava salvando este brinquedo de como seis meses na minha gaveta. Só para te mostrar esta. Vamos ver você em outro vídeo. Cuide-se e vejo-te em breve. 26. Por que os atores são importantes em UX?: Nós já aprendemos que os usuários são realmente importantes em qualquer processo de design de experiência de usuário ou em qualquer produto que você está projetando. Agora, o outro lado da moeda ou o outro lado que é realmente importante, assim como os usuários, são partes interessadas. Eles podem ter as pessoas mais experientes e pessoas sobre o seu produto. Eles conhecem os prós e contras de seus produtos, suas características, que são diferentes de outros produtos. Essas partes interessadas, eles incluem CEOs ou os gerentes de produto, ou os comerciantes, ou mesmo os investidores, que são terceiros. Eles estão interessados em uma determinada característica desse produto. Por exemplo, você pode ter usado impressoras coloridas. Agora, nas impressoras coloridas, você sabe que os cartuchos coloridos ou cartuchos extras quando você acabar suas cores em um cartucho são realmente caros. Então, talvez os investidores estão procurando as impressoras que têm cartuchos que são caros as pessoas que compram seu produto possam precisar deles ou podem aumentar suas vendas. Agora, os investidores podem estar interessados nas vendas gerais do seu produto. Eles podem estar procurando mercados diferentes como a Europa ou talvez a Ásia. Eles estão direcionando o mercado específico e eles precisam que o produto esteja em uma língua específica para ser atingido. Por exemplo, se eles querem atingir os países árabes, ou Emirados Árabes Unidos, ou pessoas dos países árabes, eles precisam ter seu produto traduzido árabe ou ter um apoio da língua árabe. Por que essas partes interessadas realmente importam? Por que precisamos fazer as entrevistas deles ou ver quais são os objetivos que eles têm? Quais são os objetivos deles? Porque eles podem não estar procurando receita, lucro ou talvez algumas partes interessadas possam estar procurando as vendas gerais, e alguns podem ter interesse em um recurso específico desse produto. Então, se você está tentando pular esse recurso que exige que o usuário se inscreva por US $5 por mês ou algo assim, você está cortando o lucro real ou benefício das partes interessadas. Então você precisa se equilibrar entre os dois. Você precisa equilibrar entre os usuários e os interesses das partes interessadas. Do meu ponto de vista, se você está projetando ou desenvolvendo qualquer produto, o equilíbrio certo entre as partes interessadas, interesses e metas, e os objetivos e interesses dos usuários é o verdadeiro produto de experiência do usuário excelente. Você pode precisar tirar alguns dos recursos ou talvez precise adicionar alguns recursos em seu aplicativo, ou talvez precise adicionar alguns recursos em seu site ou seu site de comércio eletrônico, tendo em mente os objetivos de suas partes interessadas. Todas as decisões tomadas em qualquer organização são tomadas principalmente por seus CEOs, então eles são as partes interessadas mais poderosas. A maioria das startups que você vê, eles têm CEOs que estão realmente envolvidos no produto e eles são os criadores de pensamento que o produto. Portanto, eles podem estar procurando por mais inscrições, ou mais penetração no mercado, ou mais usuários fluindo para seus produtos em vez da receita no início. Uma vez que a concentração do usuário é alcançada, eles podem estar procurando a receita. A mesma coisa que a Microsoft fez com a atualização do Windows 10. Você pode ter tido gratuitamente pela primeira vez, então você precisa pagar para atualizar para as atualizações recentes. É assim que algumas das partes interessadas tentam entrar no mercado ou estão à procura de mais usuários. Estes são objetivos diferentes. Você precisa cuidar de todos eles. Ao projetar seu produto, você precisa ver quais metas as partes interessadas estão procurando. Isto é tudo sobre as partes interessadas e seus objetivos, e seus objetivos, e suas entrevistas. Você precisa fazer uma ou duas ou mesmo todas as entrevistas das partes interessadas para obter seu ponto de vista e idéias sobre o produto. Você precisa manter tudo isso em mente enquanto você está projetando ou desenvolvendo seu produto. Agora, vamos passar para a próxima lição. 27. Comportamento de humanos, de decisão e de a análise e de de os padrões de de a de: Todos os humanos são preguiçosos, nós somos preguiçosos, eu sou preguiçoso, você é preguiçoso. Por quê? Porque é da nossa natureza. Se você der a qualquer humano uma tarefa onde há muitos obstáculos para alcançá-la, então eles vão desistir. A mesma coisa acontece na nossa indústria de jogos. Se o jogo é muito difícil, você não pode sequer cruzar o primeiro nível, você vai sair, você vai desinstalar esse jogo. Da mesma forma, em web design ou design de aplicativo móvel, formas mais longas que não vão converter melhor. Então tente evitar seus formulários muito longos ou não deixe os usuários preencham centenas de campos de entrada antes de tentar usar o aplicativo. A mesma coisa acontece com a indústria de comércio eletrônico. taxa de abandono do carrinho é de 69 por cento. A segunda grande razão para este abandono é a criação de contas. Quando se trata de criar uma nova conta ou se inscrever em qualquer site de comércio eletrônico, 70% das pessoas vão desistir. Você pode ver como isso vai se aplicar à nossa natureza que somos preguiçosos se vemos muitos obstáculos e se vemos que isso é muito difícil de alcançar, vamos desistir. Outro comportamento do usuário é a paralisia de decisão. Já o vi centenas de vezes com a minha mulher. Agora, o que você precisa fazer é se você tentar sobrecarregar seu usuário com muitas escolhas ou muitas coisas para escolher, ela vai entrar em um estado de paralisia de decisão. mente humana desiste e eles não podem tomar nenhuma decisão. Houve uma pesquisa sobre paralisia de decisão, como aconteceu é um pesquisador, ele coloca como sete ou oito sabores diferentes de geleias em uma prateleira e deixar os usuários tomar a decisão. Assim, os usuários estavam tomando a maior parte do tempo e eles não estavam tentando comprar um deles porque eles não foram capazes de decidir. Então o que ele fez foi, ele apenas colocou dois ou três sabores da mesma geléia naquela prateleira e os usuários começam a comprar um deles. Isso é chamado de paralisia de decisão. Você pode ter visto em muitos sites que pacotes de preços ou modelos de preços de qualquer site ou aplicativo web não é mais do que modelos de preços completos ou pacotes de preços completos. Por que é isso? Porque eles não querem que você entre em uma paralisia de decisão. Agora, para evitar essa paralisia de decisão, você precisa dar aos usuários algumas opções para escolher. Há mais um comportamento que quero compartilhar com vocês, que é a maioria das pessoas que fazem é não ler o exame. Isso acontece em qualquer dispositivo digital, qualquer site, qualquer site de comércio eletrônico, nossos olhos e mentes estão conectados para escanear o objetivo que estamos procurando. Então, se estamos procurando algo, vamos escanear, não vamos ler. Existem dois padrões de digitalização. Um é o padrão Z e o outro é o padrão F. Vou mostrar as duas imagens de exemplo na próxima lição. Neste momento, basta ter em mente que existem dois padrões para digitalizar informações. Z, ele move nossos olhos em Z padrão, e F é que normalmente vemos os sites ou padrões em forma de F. Todo ser humano comete erros. Mesmo que sua pontuação de aplicativos seja 100 por cento na escala de usabilidade, que é perfeitamente utilizável, há nenhum problema se eles ainda são usuários vão cometer erros. Se você acha que seu aplicativo é muito fácil, muito intuitivo, ainda assim os usuários vão cometer um monte de erros. Há duas maneiras de limitá-lo. Primeiro, não os deixe acontecer em primeiro lugar. Use algumas affordances, significados ou restrições para limitar a ocorrência desse erro. Em segundo lugar, você precisa orientar o usuário para corrigir os erros facilmente. Você viu que quando você exclui alguns e-mails do G-mail, ele lhe dá a opção de desfazer. Você pode facilmente reverter para os e-mails, você pode facilmente obter de volta os e-mails que você excluiu. Outro problema com humanos e cérebro humano é a atenção e a distração. Temos pouca atenção e se alguém nos distrair, perderemos o foco. Então você precisa sempre colocar o fardo longe do cérebro do usuário, ou é chamado, você precisa diminuir a carga cognitiva do usuário. Você pode ver o exemplo é a previsão do termo de pesquisa do Google. Quando você começar a digitar algo, o Google vai lhe dar algumas sugestões. Por isso, é mais fácil para você que você não precisa digitar a linha inteira, você só precisa clicar na sugestão e ele vai procurar por você. Vou mostrar-vos alguns exemplos deste comportamento humano na próxima lição. Agora, vamos passar para a próxima lição. 28. Como o de o de o de ar e a a: Vamos falar sobre como a mente humana funciona e como tomamos decisões. Temos dois tipos de mentes. Um é chamado de cérebro antigo e outro é chamado de cérebro novo. Agora, na maioria das vezes o velho cérebro está tomando a maioria das decisões, e a maioria das decisões que você toma diariamente são tomadas por sua mente inconsciente, que também é chamado de velho Cérebro, e a maioria do processamento mental é feito inconscientemente. Então, se você acha que está pensando e tomando, e comprando decisões, principalmente com sua mente intelectual, ou com sua mente decisória, então você está errado. Você está principalmente usando sua mente inconsciente ou velho cérebro que está tomando decisões por você. Algumas das decisões em que temos que comparar um monte de produtos, é pelo nosso novo cérebro. Nosso velho cérebro é muito rápido e na maioria das vezes vai demorar apenas 0,05 segundos para fazer uma opinião sobre um site, sobre um produto, sobre um iPhone da Apple ou um novo modelo de uma câmera. Então, tudo o que o cliente precisa para decidir é apenas menos de um segundo. Portanto, isto é muito importante. Você precisa aprender sobre este velho cérebro. Você precisa enfrentar este velho cérebro quando você está projetando seus produtos, eles devem parecer muito legal, e muito atraente, e muito sólido e confiável. Há um ditado que diz que a primeira impressão é a última impressão, embora não seja muito verdade, mas na experiência do usuário, é quase 80-90 por cento verdade. Por quê? Porque 75 por cento dos usuários, eles admitem que quando vêem pela primeira vez qualquer design de site de uma empresa, eles vão adivinhar a credibilidade ou a confiança dessa empresa com base no primeiro olhar de seu site. Portanto, isto é muito importante. Este é o teu velho cérebro a brincar aqui. Assim, as pessoas são mais propensas a comprar produtos se perceberem que este é um produto de alta qualidade ou eles têm uma grande confiança em seu site. Agora, se você olhar para qualquer site e parece muito pouco profissional, e muito confuso, ou não é projetado muito bem, improvável que você compre a partir dessa loja de e-commerce ou desse site. Tudo isso é influenciado pela experiência geral do usuário e pela qualidade percebida do produto. Então, estamos percebendo na primeira impressão de que essa coisa vai funcionar ou esta é uma empresa confiável, e esse produto é confiável. Agora, a maioria das decisões calculadas em que você precisa comparar as coisas umas com as outras, ou você precisa comparar as características de dois smartphones, aquele que eu preciso comprar, seu novo cérebro vai começar. Você precisa comparar as coisas, você precisa fazer cálculos. Este PC tem mais poder de processamento ou algo assim. Então, quando você tenta comparar ou usar o modo de comparação de qualquer produto que você está tentando comprar, e ver suas diferenças e características, então este é o seu novo cérebro ajudando você a tomar decisões. Então isso é tudo sobre novo cérebro e cérebro antigo, e primeiras impressões, e confiança e credibilidade de qualquer produto ou aplicativo. Espero que tenham gostado desta lição. Se tiver alguma pergunta, pergunte-me, vamos para a próxima lição. 29. Humans Humans: Outro comportamento humano e psicologia humana é que odiamos mudanças. A maioria dos humanos, eles vão resistir à mudança. Sempre que um aplicativo ou um site que eles fazem mais, ou o redesign de seu site ou aplicativo, a maioria dos usuários não vai gostar dele. Eles vão começar a reclamar sobre isso,” Que nós não gostamos do design. Qual é o fundo? Onde estão as minhas coisas”, algo assim. A solução é criar uma mudança progressiva, e também consistência é Se você está tentando projetar uma nova versão do Facebook, você não precisa mudar as cores inteiras ou todo o layout do post. Talvez você possa usar um pouco de ícones diferentes, um ou dois talvez, apenas um pouco diferente, não totalmente diferente. Apenas um exemplo, se você estiver usando o Facebook e eles tentaram mover seu botão Curtir no topo e movê-lo para o topo da postagem. O que acha que vai acontecer? A maioria dos usuários, eles vão ficar confusos como eles vão começar a reclamar por que você mudou essas coisas? Da mesma forma, você pode ver em sites, isso acontece e eu acho que aconteceu com eBay anos atrás. Eles introduziram um fundo cinza de branco e de repente vêem que a maioria dos usuários começa a reclamar sobre isso e eles escreveram um algoritmo, para mudar o fundo de branco para amarelo, eu acho que foi muito lentamente dentro de anos. Cada dia o valor da cor era deslocado para outro tom de amarelo e que estava muito próximo do branco. Os usuários não esperam que algo esteja mudando, eles apenas introduziram a mudança gradualmente. Sempre que você quiser mudar algo em seu site, seu aplicativo web, você precisa usar alguma mudança progressiva, introduzir a mudança gradualmente, não instantaneamente. Agora, a maioria de nós, eu vi muitos clientes, eles querem redesenhar seus sites. Agora, o problema é que nós realmente precisamos de uma nova solução ou realmente precisamos de um redesenho do nosso site? Antes de fazer qualquer alteração em seus sites, você precisa ter certeza de que os usuários realmente precisam de uma reforma ou redesign do site, ou você só precisa mudar algumas coisas para criar uma melhor experiência de usuário. Há um grande exemplo de Yahoo e Digg, ambos são gigantes muito grandes no campo. Quando eles introduziram o novo site redesenhado, foi e-mail Yahoo, e eu acho que eles falharam e o tráfego de Digg caiu mais de 25% nos EUA e no Reino Unido. Mostrarei as imagens de exemplo na próxima lição, então vamos passar para a próxima lição. 30. Nossos objetivos e a de ocultura e a em a: O que quer que façamos durante todo o dia, todas as nossas acções são orientadas para objectivos. Realizamos, fazemos coisas ou tarefas com base em nossos objetivos. Certifique-se de que você sabe quais são os objetivos e motivações de seus usuários, é por isso que, em entrevistas com usuários, registramos diferentes objetivos e motivações de outros usos. Por exemplo, se eu estiver procurando no Google por um medicamento analgésico, esse é o meu objetivo. Estou à procura de um remédio. Da mesma forma, outra pessoa que ele pode estar procurando por um vídeo. Existem diferentes objetivos relacionados com a mesma ferramenta. O mesmo produto pode ser usado de várias maneiras quando os objetivos são diferentes. Se você está projetando um produto ou você está projetando uma tela, você precisa saber o que o usuário vai fazer na tela ou nesta tela do aplicativo. Agora, o objetivo pode ser diferente, por exemplo, se você estiver usando uma tela de login, você precisa saber que o usuário vai usar um login. Mas o que é o [inaudível] é que ele pode esquecer sua senha ou ele pode precisar se inscrever em vez de fazer login. Existe alguma maneira de ele mudar para esse modo ou ele pode mudar para esse objetivo e usar a mesma tela para outro gol. Mantenha todas essas coisas em mente. Outro conceito que é semelhante ou relacionado a objetivos é a cegueira da mudança. cegueira da mudança é que quando você está cego para as coisas que você não está procurando. Por exemplo, se o seu objetivo é encontrar um link para um arquivo PDF em um site , seus olhos estarão escaneando o link ou qualquer botão dizendo PDF. Seus olhos vão pular qualquer informação ou qualquer outra coisa que não esteja relacionada com o seu objetivo. Nossos olhos e nossas mentes estão cegos para mudanças nas quais não estamos interessados. Por exemplo, se eu estiver olhando em um artigo ou um vídeo no Google, e se eu pesquisar sobre um vídeo, por exemplo, h o para criar uma melhor experiência de usuário ou algo assim, sempre que os resultados da pesquisa estão saindo, meu olhares estarão procurando apenas as miniaturas do vídeo. Vou pular qualquer outro título ou artigos, vou apenas procurar vídeos. Aqui estamos usando nosso comportamento humano chamado escaneamento. Estamos ignorando informações, estamos procurando nosso objetivo e a única informação que realmente precisamos. Tenha todas essas coisas em mente enquanto você está projetando um produto, um site ou um aplicativo. 31. Exemplos de a decisão de comportamento de o a seguir de em a seguir de o de comportamento em a de de a: Deixe-me mostrar-lhe alguns dos exemplos de comportamento humano e como tomamos a decisão com dispositivos digitais, e como a mente humana funciona enquanto estamos decidindo, e quais coisas você vai cortar para tomar essa decisão e comportamento humano mais fácil. Você precisa de menos carga na cognição humana e nas mentes humanas para tornar este processo de tomada de decisão mais fácil para eles. Vou começar com este processo de finalização da compra da Amazon. Você pode ver aqui, agora estou fazendo check-out, e assim que selecionei meu endereço para onde preciso enviar, você pode ver nesta página que estou vendo apenas o logotipo da Amazon.com e nada mais. Só posso ir e clicar neste botão de continuar, sem outras decisões, sem outras opções. Só tenho três opções para o transporte, nada mais. Uma tarefa de cada vez e uma decisão de cada vez. Se você der ao seu usuário para decidir várias coisas ao mesmo tempo, ele vai dar a ele algumas dores de cabeça. Agora, se eu tentar clicar em Continuar, você pode ver que eu não posso nem voltar para o meu carrinho ou o site principal. O logotipo da Amazon não pode ser clicado. O que posso fazer é ir na mesma direção. Se eu clicar em continuar, você pode ver aqui ele está me pedindo para o endereço e tudo e me dando o total para o pedido. Você pode ver agora eu devo adicionar este lugar, estágio de ordem, e há apenas uma ação primária que eu posso fazer. Este é o seu pedido. Por outra coisa que eu posso escolher é esta opção de entrega na data de entrega. Estou muito limitado com estas opções. Sempre que você estiver usando um site de e-commerce ou projetando para ele, ou aplicativo de e-commerce, ou onde você quer que o usuário gaste algo, ou tome a decisão, tente evitar toda a distração, tirar todas as distrações embora Dele. Esta é a regra principal. Agora, vamos falar sobre a preguiça humana. Os humanos são preguiçosos e é por isso que criamos todos esses controles remotos. Você pode ver que este é o mais recente. Este controle remoto pode ser transformado em um monte de coisas que ele executa um monte de funções, e você pode ver que ele também tem o mesmo design que os antigos. Deixe-me mostrar-lhe os antigos. Aqui você pode ver os antigos. Eles não são tão antigos, mas eles também são versões mais recentes e eles também são semelhantes em forma e botões como os antigos. Deixe-me mostrar-lhe os antigos. Estes são os antigos controles remotos da TV, e isso mostra que os humanos são preguiçosos, queremos tudo agora e aqui estamos sentados. Da mesma forma, se eu quiser alguma informação ou eu quero algum vídeo, eu quero agora mesmo. Se você tentar criar um monte de obstáculos no meu caminho para obter essa informação, se eu quiser alguma informação, você deve evitar tantos círculos e ele tentou removê-los do meu porto. Se estou procurando um arquivo PDF para baixar, ele deve ser baixado instantaneamente. Eu deveria apenas clicar no botão de download e eu recebo o PDF. Se você estiver indo para criar um monte de outras maneiras que tentam instalar este software antes, eu vou dar-lhe este download, eu vou sair. Tenha todas essas coisas em mente, somos preguiçosos, queremos a informação e tudo agora. Vamos ver alguns dos exemplos de paralisia de decisão. Você pode ver aqui, e esta é a ferramenta proto.io, ferramenta de prototipagem para designers. Você pode ver que há quatro opções para escolher. Isto é corporativo, agência, startup e freelancers. Agora você pode ver que eles acabaram de dar quatro planos. É assim que vamos limitar as decisões do usuário a três ou quatro opções máximas. Não lhes dês muitas opções, isso vai deixá-los mais confusos. Mais alguns sites, você pode ver que este é o modelo de preços de rotação UX. Você pode ver aqui temos 1 e 2 ou 3 opções e o preço é anexado a apenas duas. Posso escolher este ou este. Se eu for uma empresa muito grande ou uma corporação muito grande, talvez precise ligar para eles. Só duas opções. Então você pode ver estes rotação UX, é uma ferramenta muito proeminente e de imagem no design de interface do usuário e design de experiência do usuário. Você pode projetar armações e muitas coisas. Mais um exemplo de avocode, você pode ver aqui eles também têm três planos e apenas duas opções para selecionar. Você pode ver que isso não vai ser selecionado na maior parte do tempo, e principalmente o usuário vai mudar de um ou este. Eles vão selecionar este ou este. Apenas duas opções e é muito mais fácil tomar a decisão. Você pode ver que eles têm apenas três dólares diferença entre estes dois pacotes. A maioria das pessoas está indo para este porque eles têm um monte de membros da equipe e um monte de coisas. A maioria das empresas ou agências, eles vão cair nesta categoria. É assim que eles estão, posso dizer, prendendo os clientes ou estão brincando com nossas mentes, dando-lhes menos opções para escolher. Agora já falamos sobre por que os humanos odeiam a mudança. Você pode ver aqui, este é um grande e velho site e este é um artigo de ponto lateral, eu vou lhe enviar o link. O que eles fizeram foi transformá-lo em um site totalmente diferente. Agora os usuários, eles não estavam esperando esse layout, eles não estavam ansiosos para ver essa mudança. O que aconteceu é que você pode ver aqui, seu tráfego caiu 26 por cento nos EUA e 34 por cento no Reino Unido. Esta é uma grande perda. Você pode ver por aqui. Foi esgotado em 2012 devido a esta razão, meio milhão, eles perderam sua popularidade e tudo mais. Certifique-se de que seu usuário realmente precisa da alteração. O segundo exemplo é o e-mail do Yahoo. Este é o correio antigo e este é o novo que mudou muitas coisas. Você pode ver aqui, compor e os botões, os ícones, todo o fundo, tudo. Não estava parecendo com o e-mail antigo. Devido a essa mudança do Yahoo, apenas 25% da equipe do Yahoo continuou usando o e-mail do Yahoo. O Yahoo não divulgou quantos usos eles perderam devido a este projeto j. O terceiro exemplo foi target.com. Quando o redesenho, eles também perderam uma grande parte de sua receita. Assim que o acorrentou ou criou a nova versão, muitos de seus usuários começaram a reclamar. Esta é a primeira coisa. Este é o maior problema. Nossas mentes e nós humanos não aceitamos mudanças muito bem. Torná-lo muito sutil. Eles trouxeram ruim esta barra de menu categorias esquerda aqui devido a seus usuários e remover as sombras. Você pode ver aqui sombras pesadas na interface, este novo design, eles o removeram. No final, vou te dar apenas uma coisa que não tente fluir com as tendências. Tente ser leal aos seus clientes e veja se eles realmente precisam de uma mudança ou seu site realmente precisa de uma atualização. Os usuários estão tendo algum problema com meu site? Preciso corrigir esse problema em vez de projetar todo o site. Isto é tudo sobre o comportamento humano e como não aceitamos mudanças e decisões na paralisia e todas as coisas. Se eu perdi algum exemplo, vou criar outro vídeo, e vamos vê-lo em outro vídeo. Com mais exemplos, agora vamos passar para a próxima lição. 32. Padrões de F e de Z: Agora, nesta lição eu vou dar alguns exemplos de padrões Z ou padrões de leitura, como lemos e peneiramos o conteúdo, padrões Z, padrões F, e também o carrinho de abandono, problemas de taxa de abandono e os campos de formulário. Vamos começar. Agora esta é uma imagem do padrão Z. Agora o padrão Z foi baseado em como lemos os livros da esquerda para a direita. Se temos um site escrito em urdu ou árabe ou qualquer língua que é da direita para a esquerda. Este é o oposto, então será da direita para a esquerda assim, mas ainda será Z. Isso significa que vamos começar, nossos olhos começarão do lado esquerdo e depois vão para a direita, depois mudarão novamente para o esquerda, e depois novamente para a direita. Este é o padrão que usamos ao ler parágrafos, anúncios, qualquer coisa. Principalmente a nossa linha vai de cima para baixo como esta nesta área ou vai tentar ver esta área ou esta área. Na maioria das vezes, os designers tentam usar esse padrão Z para sua vantagem enquanto projetam sites ou aplicativos móveis. O segundo padrão foi o padrão F. Por que se chamava F? Porque na maioria das vezes ele também está relacionado com o nosso padrão de leitura ou corredor scape ou skim através do conteúdo. Nós normalmente vamos nessa linha nessa direção vertical assim e assim. Para o conteúdo superior como este, vamos fazer assim e assim, e então vamos pular tudo. Agora, se você ver que há poucos anúncios deste lado e não há conteúdo nesta área. Na maioria das vezes vamos começar a olhar para este lado e então talvez nós vamos olhar para aqui. Então nosso padrão de varredura ocular faz este padrão F. Deixe-me mostrar-lhe mais um exemplo. Esta é a reserva de pesquisa do Google. Estes são diferentes outros sites que todos estão fazendo o padrão F. F padrão é basicamente relacionado com nossos padrões de leitura e como nossos olhos estão indo para digitalizar uma página. Certifique-se de usar este padrão de olho para sua vantagem e colocar suas coisas importantes em seu produto ou seu site de comércio eletrônico ou qualquer coisa nessas áreas. Agora há uma nova pesquisa feita por esse cara conversão XL. Acho que é Peep Laja. Ele está pesquisando sobre conversão, tudo sobre conversão e ele diz que há novos padrões emergindo que não são padrões F. Aqui está sua nova pesquisa do Google. Você pode ver o que aqui. Este é o Google em 2005 e este é 2014, eu acho que é sua pesquisa. Agora você pode ver que este padrão F está quase desaparecido. Mas ainda assim o padrão de leitura está sempre começando a partir desta área esquerda. Você pode ver por aqui. Em seguida, alguns dos usuários, eles olharam para esta área. As áreas que são mais ativas ou mais vistas pelos usuários estão em vermelho, você pode ver aqui. Então a próxima cor é amarela, o verde é um pouco menos. Os usuários começam a olhar para o topo nesta área. É por isso que a maioria das empresas executa diferentes campanhas de SEO para estar entre os 10 melhores resultados dos resultados de pesquisa do Google. Isto é tudo sobre padrões, padrão Z e padrão F e um novo padrão que é este. Agora vamos passar para a otimização de seus campos de formulário. Agora, campos de formulário são realmente necessários para conversão para ganhar dinheiro em diferentes sites, como páginas de aprendizagem e também sites de comércio eletrônico. Os formulários são parte essencial da obtenção de informações do usuário. Você pode ver nesta pesquisa da Unbounce, eles disseram que esta empresa de ignorar imagem, eles reduziram seus formulários de contato de 11 para 4 e eles ganham 120 por cento de aumento de conversão de 5,24 por cento para 12% então quase dobrou, sua taxa de conversão foi quase duplicado, reduzindo os campos. Note que isso está diretamente relacionado à sua psicologia, psicologia humana. Por quê? Quando os humanos virem menos obstáculos na sua forma de realização ou na sua calma, eles vão persegui-la. Se virem muitos obstáculos no seu caminho, vão desistir. Você pode ver aqui, esta é a taxa de conversão ideal que 3-5 campos é um padrão dourado. Não tente aumentar mais de cinco campos, caso contrário você vai perder 10% de luto conversão. Trata-se de conversão e de como os seres humanos se sentem relutantes a preguiça e quando seu objetivo é difícil de alcançar, eles vão desistir. Mais um exemplo. Esta é outra pesquisa com todas as principais empresas e esta é também a estatística de taxa de abandono de 37 carrinho. Agora, isso é feito em muitos sites maiores, maiores gigantes como a Adobe List, Star Trek, IBM, grandes empresas como essa. Estas são as principais regiões que se encontram nesta investigação. Eles usam 144 pessoas. Estas são as suas respostas, primeiro foi, os custos extras demasiado elevados. Este é um tópico relacionado a outra coisa, que eu vou abordar em outra lição que é sobre mostrar todos os detalhes para a tomada de decisões. Se você está escondendo alguns detalhes do usuário que estão indo para ajudá-lo a decidir, ele está indo muito rápido. A segunda razão que mais nos interessa agora é que o site queria que eu criasse uma conta. Você pode ver um monte de pessoas, eles vão ser empurrados para fora por esta configuração de conta. Se o formulário de inscrição vai ter como 10 campos, eles vão sair. Agora, o terceiro também está relacionado à nossa preguiça e natureza humana de que somos preguiçosos e não gostamos de muitos obstáculos em nosso objetivo. checkout muito longo e complicado. Se o seu processo de checkout em seus sites de e-commerce é muito longo, como ele está tomando seis ou sete passos, você vai perder um monte de clientes e receita. Estas são as coisas que estão relacionadas com a natureza humana, a preguiça, e como os seres humanos se sentem quando há muitos obstáculos em seu objetivo e eles querem alcançá-lo. Tente minimizar obstáculos no caminho do objetivo do usuário e seus objetivos e qual a principal tarefa que eles vão usar. Por exemplo, se eles vão usar processo de check-out ou processo de criação de conta ou login, estas são as duas ou três coisas que eles vão usar em qualquer aplicativo ou em qualquer site, site comércio eletrônico, tente torná-los simples e tão fáceis quanto possível. Espero que tenham gostado desta lição, se tiverem alguma dúvida, perguntem-me. Vamos passar para a próxima lição. 33. Como a descoberta de a melhoria de um produto?: Hoje vamos falar sobre descoberta. Aqui está a coisa. Se você entrar no quarto de alguém e não encontrar nenhum dos interruptores para ligar a luz ou o ventilador, o que você faria? A primeira coisa em usar qualquer tipo de produto, seja um produto digital ou um produto físico, é a descoberta. Se você pode descobrir como usá-lo, seus botões ou seus recursos, você não pode usá-lo em tudo. capacidade de descoberta significa que com que facilidade e rapidez os usuários podem encontrar os recursos, botões e elementos de qualquer produto, produto industrial ou qualquer aplicativo móvel. Deixe-me compartilhar com vocês uma pequena história. Um dos meus amigos veio a minha casa e mostrei-lhe que acabei comprar este iMac de 27 polegadas e para ele, mesmo para mim, foi o primeiro iMac que comprámos. Agora, quando comprei este iMac durante os primeiros dois minutos, não consegui encontrar o botão de ligar ou o botão onde preciso pressionar para ligá-lo. Embora este iMac é projetado pela Apple e eles têm o melhor design e designer experiência do usuário final, mas ainda assim eles negociaram do design com descoberta. Assim, eles podem colocar o botão ligar e desligar na parte frontal da tela para que ele possa ser facilmente descoberto, mas eles colocá-lo na parte de trás do lado esquerdo. Então o que eu fiz foi então eu mostrei para um dos meus amigos e eu saí da sala. O que ele fez é a mesma coisa, o que eu fiz pela primeira vez. Tentei tocar no ícone da Apple na frente. Eu pensei que este é o botão onde eu preciso apenas tocar nele e ele vai ligar. Ele fez a mesma coisa. Assim, você pode ver como a descoberta desempenha um papel vital em qualquer produto, seja ele um produto digital ou físico. Agora deixem-me mostrar-vos mais alguns exemplos. Agora, descobrir habilidade nem sempre significa que você precisa descobrir os recursos. Sua é também outra coisa que o que este produto pode fazer ou o que você pode fazer com ele. Ele também pode ser comunicado com seu usuário usando texto. Então, em sites que você pode ver aqui, aqui está a minha principal manchete deste lado da cabeça maquetes, a sub-manchete e o botão. Então esses 3 textos de boas-vindas, eles vão definir o que você pode fazer aqui. Isto é uma coisa. Agora, deixa-me mostrar-te outra. Esta é a mesma ferramenta de maquete e você pode ter pensado que ela mostra o espaço de trabalho semelhante ao Photoshop, Sketch ou qualquer outra ferramenta. Mesmo as ferramentas de codificação como Visual Studio, Microsoft Visual Studio, eles têm o mesmo layout. O que eles têm é, aqui temos no lado direito mais controles ou alinhamento ou opções de texto para controlar ou personalizar nossos objetos. Aqui temos os objetos, e aqui temos controles diferentes que podemos arrastar até aqui e colocá-los aqui. Temos 1, 2 e 3 painéis e esta é a nossa área de trabalho. Então, esses recursos são muito visíveis. Você pode ver aqui, alguns deles estão habilitados. Você pode ver assim. Agora nesta interface você pode facilmente descobrir os recursos deste aplicativo. Você pode ver que você pode fazer todas essas coisas com a guia. Você pode ver agora estes foram ativados para que eu possa alinhá-lo no meio ou algo assim. Então vamos ver mais alguns exemplos. Este é o espaço quadrado. Agora você pode ver este site mostra uma mensagem muito simples e simples. Faça o seu próprio site. Sem julgamento. Não é necessário cartão de crédito. Comece. Então esta é uma maneira muito simples, muito poderosa de descobrir a capacidade e os usuários podem descobrir instantaneamente que este lado vai fazer essa tarefa. Vamos ver mais um exemplo. Isto é enviar grade, e eu não sei o que é. Então eu vim aqui pela primeira vez e você pode ver que tem algo a ver com personalização de e-mail, boletins informativos por e-mail e algumas outras coisas que você pode ver aqui, consulte Planos e Preços. Mas depois de ler este, você vai ter a idéia completa. Faça parceria com um serviço de e-mail confiável pela Dwell apresentar profissionais de marketing, escalabilidade e experiência em entrega. Portanto, é basicamente mais voltada para a capacidade de entrega e talvez e-commerce. Eu não sei. Então vamos ver mais um exemplo aqui temos este site da Shopify e ele informa instantaneamente a plataforma de comércio eletrônico feita para você. É uma plataforma de comércio eletrônico. Então essas são as coisas que podem realmente ajudar a descobrir que os recursos estão presentes neste site, este produto, este aplicativo web, o aplicativo móvel, e eles devem ser proeminentes, eles devem ser facilmente detectáveis se esconder todos esses botões em uma barra de menu aqui, menu hamberger, então isso não é o que eu estou procurando. Você pode ver aqui nós temos centro de ajuda e começar. Eu poderia clicar nisso. Então estas são todas as coisas que estão relacionadas à descoberta. Vamos aprender um pouco mais sobre descoberta. capacidade de descoberta também nos diz quais ações são possíveis e qual é o estado atual do dispositivo, se ele está ligado, se está desligado, posso ativá-lo? Então todas essas perguntas são respondidas pela descoberta. Portanto, não tente ocultar recursos que você realmente deseja que seus usuários vejam em seu produto. Por exemplo, o menu hamberger somos o pior exemplo de design experiência do usuário e esses hambergers, menus, eles estão indo para enterrar um monte de recursos do seu site ou seu aplicativo longe de seus usuários. Portanto, certifique-se de que todos os principais recursos do seu aplicativo ou do seu produto, eles são facilmente descobertos. Agora você aprendeu muito sobre descoberta. Vamos passar para a próxima lição. 34. O que é aprenda?: Vamos falar sobre outro recurso de qualquer produto ou qualquer aplicativo que é realmente útil para o design da experiência do usuário. Agora o que é isso é se você não pode aprender a usar qualquer aplicativo, você vai desinstalá-lo. Aprendizagem desempenha um papel muito importante. Agora, o que é aprendizagem é. É como é fácil para um usuário aprender e usar seus produtos e recursos. É a parte da usabilidade do seu produto, quão útil é. Agora, se seu aplicativo é novo, você precisa que seu usuário aprenda rapidamente. Você precisa mostrar a ele, treiná-lo. Você precisa guiá-lo para as diferentes características, e apresentá-los tempo, tempo a tempo, que você pode fazer isso com este produto. Também existem diferentes fases na aprendizagem. Há um aluno que está apenas no iniciante e há usuários avançados e há usuários intermediários. Você precisa cuidar disso. Agora, como você pode melhorar a capacidade de aprendizagem. Há poucas coisas que você pode colocar em seu produto seu aplicativo ou seu software para melhorar a capacidade de aprendizagem. Número um é controles detectáveis, como eu mostrei na lição anterior, e descoberta que botões maiores, controles maiores, botão habilitado ou botões realçados, eles podem me mostrar que eu posso executar este tarefa. Em seguida, notificações, notificações diferentes, vídeos de ajuda diferentes me notificando que, hey, assista este vídeo se você não conseguir enviar o e-mail ou algo assim. Há mais um recurso que você pode adicionar ao seu aplicativo é o usuário no embarque. Você pode ter visto um monte de aplicativos ou software diferentes que mostra você slide a slide um por um, e mostrou recursos diferentes, destacar os recursos de um produto ou um aplicativo móvel, e talvez alguns vídeos tenham mostrado você pequenos vídeos como dez 10-15 segundos sobre como gerenciar seus e-mails, ou como excluir seu e-mail, ou se eles introduzirem um novo recurso, eles vão enviar-lhe um e-mail com um vídeo que este recurso foi adicionado e você pode usá-lo assim. Número quatro são logins sociais. Por que logins sociais? Eles, porque eles são padrão familiar, seus usuários já sabem como fazer login em um aplicativo usando seu Facebook ou Google. Ele vai ajudar a aprendê-los rapidamente, eles podem facilmente fazer login ou iniciar um aplicativo. Eles podem facilmente começar a usá-lo sem qualquer obstáculo. Deixe-me mostrar-lhe alguns dos exemplos de aprendizagem. Agora, um monte de grandes empresas como este aplicativo de esboço, este é um novo aplicativo para seus designers. Você pode ver que há uma seção de aprendizado aqui. Se você clicar em aprender, você pode aprender diferentes recursos gratuitamente deste aplicativo. É realmente necessário que você está indo para apresentar algo assim em seu aplicativo. Você pode ver aqui, aqui estão diferentes áreas ou diferentes conteúdos que você pode aprender sobre isso. Então até mesmo a Adobe, que é uma empresa muito grande, eles têm seus próprios tutoriais on-line, em seu próprio site que são gratuitos para editar imagens e fazer coisas diferentes que você pode ver aqui se quiser. Eles também o classificaram por experientes e iniciantes. Isto é o que eu estava falando, que você precisa cuidar de seus dois usuários, se eles são experientes ou se eles são iniciantes. Ofereça experiência de empréstimo para ambos, que eles possam facilmente aprender seu aplicativo e começar a usá-lo. Esta é também uma parte muito importante do design da experiência do usuário. Agora, há mais uma coisa que você pode fazer, é assim que funciona vídeos. Você pode tê-los visto em muitos sites e aplicativos diferentes, e eu acho que este é um dos melhores recursos para Learnability. Ele pode realmente bombear a velocidade de aprendizagem de seus usuários. Isso é tudo sobre aprendizagem, se você tem alguma pergunta para me fazer, vamos passar para a próxima lição. 35. Como o feedback desempenha papel essencial em UX?: feedback é a única coisa que pode elevar a confusão do usuário. Então, se alguém está usando seu produto e ele não sabe o que está acontecendo e o que ele acabou de fazer, então ele vai ficar confuso. feedback é basicamente o resultado da interação do usuário, se alguém pressiona um botão ou se alguém tentou conectar seu produto, tentou ligá-lo ou tentou usar seu recurso, ele deve dizer o que está acontecendo e como deve ser fixo ou como ele deve ser operado. Tudo depende do feedback. Basta dar um exemplo de que alguém pressionou um botão de login e nada aconteceu por cinco segundos. O que o usuário faria? Ele vai pressionar o botão de login, 10 vezes em frustração de que nada está acontecendo, algo está errado. Aqui temos uma necessidade de feedback, feedback adequado, feedback oportuno, em tempo hábil e dentro do contexto. Vou mostrar muitos exemplos na próxima lição. Portanto, não se preocupe com isso, haverá muitos exemplos na próxima lição. Agora, o que um feedback deve dizer? Feedback vai dizer ao usuário que o que acabou de acontecer. Se você apertou um botão, o que aconteceu? O que o sistema está fazendo? O sistema está ocupado? O site está carregando? O aplicativo está carregando? Foi um sucesso? Em seguida, o aplicativo é carregado e foi sucesso. Houve algum erro? Estes são todos os feedbacks, também o status atual do dispositivo. Então, se eu abrir um dispositivo ou ligá-lo e ele mostrar que definir a hora, então este é o status atual que eu preciso definir o tempo primeiro para continuar usando este dispositivo. Em caso de erro, se houver um erro, como o usuário pode corrigir ou sair desse erro, isso também faz parte do feedback. Você experimenta feedback em todas as formas diferentes enquanto interage com todos os dispositivos eletrônicos, como o seu smartphone, que informa sobre seu status de bateria fraca por bipe, dando alguma indicação de bateria fraca em sua tela e também com alguma voz ou som. Agora existem diferentes formas de feedback como você pode informar o usuário por movimento, movendo alguma caixa pop-up e você pode usar cores nítidas, como cor vermelha para erros e para notificação. Cores amarelas ou cores verdes que tem sido um sucesso. Além disso, seu cérebro reage a qualquer som. Se você deu um som de erro de som ou som de bipe, que a bateria está baixa ou algum carrilhão que você enviou a mensagem, ele vai dar ao usuário feedback de que algo está acontecendo. Hoje em dia, você pode estar usando WhatsApp ou Viber e você sabe que quando alguma mensagem aparece no WhatsApp, você sabe que até mesmo o telefone está em sua mesa e você não está visualizando, você sabe que alguém lhe enviou uma mensagem no WhatsApp ou Viber. Todos esses formulários de feedback podem ser combinados. Você pode combinar movimento com som, ou você pode combinar movimento com o efeito piscando ou você pode combinar diferentes tipos de sons e cores. Isso é tudo sobre feedback. Se tiver alguma pergunta, pergunte-me. Vamos passar para os exemplos de feedback. 36. Exemplos de feedback: Agora deixe-me mostrar-lhe alguns dos produtos físicos, bem como produtos digitais e os exemplos de feedback. Esta é uma parte muito importante de qualquer design de produto, se você está projetando aplicativos móveis, aplicativos web, site ou até mesmo produto físico. Então, o primeiro exemplo que vou mostrar é que vocês podem ter visto todos esses botões ou painéis em suas paredes. Eu realmente amo aqueles que me mostram que ele está ligado ou que a eletricidade está funcionando nele. Quando ele está ligado, ele mostra a auditoria luz que a luz está ligada que a eletricidade está funcionando e está ligada. Então, esta é uma forma de feedback muito agradável. Deixem-me mostrar-vos mais alguns exemplos. Então, este é um mais recente, eu acho que é WiFi Smart painel e também você pode ver que esta é uma outra forma de feedback. Ele está mostrando duas ações possíveis ou estado. Neste momento, o estado deste dispositivo que você pode trancar suas portas ou você pode abrir sua porta. Mais alguns exemplos, este é outro soquete de parede e você pode ver que ele também tem um botão ligar e desligar e ele vai acender uma vez que ele é ligado. Mais alguns exemplos que você pode ver este é o site Nest. Eles têm câmeras, termostatos e um monte de novas tecnologias de ponta. Você pode ver esta câmera, ela tem um indicador de luz verde que está sendo executado agora na câmera que está ligada. Da mesma forma, em todas essas formas você pode ver que ele está mostrando o status desse termostato. Luz verde novamente em todas as câmeras, mesmo você pode ver a luz verde ligada no seu mac-book Pro quando a câmera está funcionando. Estas são todas as formas de feedback. Você pode ver aqui, Nest, ele está mostrando que ele está agora executando o econômico ou economia de energia mais. A temperatura está agora ajustada para 72 Fahrenheit. Ele está mostrando o relógio agora, a data e a hora, e está mostrando o tempo lá fora. Então estes dois são realmente úteis. Você pode ver aqui estes dois estão mostrando o status deste dispositivo. Agora, vamos ver alguns dos exemplos de produtos digitais como sites e aplicativos móveis e seus comentários. Você pode ver que eu procurei no site Adorama, é uma loja de câmera e uma vez que eu procurar Panasonic gh4, você pode ver que ele é devolvido com 84 produtos. Então, estas são formas de feedback. Ele está me mostrando que esses muitos produtos são encontrados para o seu sistema. Além disso, você pode ver o status atual como você pode ver aqui, os sacos em caixas, duas câmeras 22. Estas são também formas de feedback que me dizem que quantos itens deste tipo estão disponíveis? Agora, um aplicativo móvel eu vou mostrar a vocês esta é uma tela de aplicativo móvel e de Mobile Patterns.com, e você pode ver que nesta primeira tela à esquerda, o usuário selecionou qualquer vibração, então há um tick e o toda a cor desta área é alterada. Então este é basicamente o feedback de seleção que você selecionou este item de todos esses itens, então isso é basicamente carregamento. Você pode ver aqui a tela de carregamento, e isso é uma vez que você tenha carregado. Então há mais uma opção que você pode ver se eu tenho uma opção para você. Então esta é outra forma de feedback. É basicamente uma notificação. Agora, estes são os meus favoritos. Eu realmente amei esses botões porque eles vão me dar feedback uma vez que eu pressioná-los. Então isso está carregando agora ou eu realmente gosto deles. A maioria dos formulários on-line em nossos aplicativos web têm esses tipos de padrões que vão para este formulário para que eles não são clicáveis, então todo o status e tudo muda e muito bom feedback. Mais um exemplo, esta é uma caneta de Ken e você pode há uma animação de carregamento aqui, botão de carregamento de arquivo. Eu realmente gosto. Esta é uma animação muito agradável e diz ao usuário quanto o arquivo foi carregado. Mais alguns exemplos, este é um tweet de Luke Wroblewski e ele é um ótimo cara dos EUA, principalmente trabalha com formulários. Você pode ver que este é outro formulário de feedback. Se alguém clicou, você precisa mostrar-lhes que isso foi selecionado com cores muito nítidas. Também no Twitter, você deve ter notado que este é outro formulário de feedback. Então, se eu vou clicar nisso, pequena animação ocorre. Isto é basicamente um feedback. Então, se eu vou clicar mais um aqui, então você vai ver. Esta micro animação é realmente uma ótima forma de feedback. Estes são chamados de micro animações. Agora este é outro exemplo que é do Dropbox. Você pode ver que estes são os pop-ups de notificação. Eles podem facilmente informar o seu usuário o feedback. É assim que o Dropbox diz ao usuário que ele tem um novo visual, que mudou sua interface. Você pode ver que esta é a primeira tela, então há um farol pulsante para chamar a atenção que isso está acontecendo aqui ou isso foi alterado e também eles estão mostrando cada recurso com este pop-up na parte inferior e uma vez que tudo estiver concluído, você pode ver que este é outro feedback, você está pronto para ir. Então, em cada passo, o feedback é necessário. Se você estiver usando um produto físico ou um produto digital, você deve informar seu usuário em cada etapa. Agora, este é o futuro. Vamos ver alguns dos dispositivos mais recentes que são controlados por voz ou alimentados por voz ou usa basicamente formas de feedback combinadas de voz e cor. Esta é a casa do Google. O Google Home do fornecedor está carregando. Ele vai mostrar esta animação. Isto é animação de carregamento e, em seguida, temos este aceso luzes acesas. Então, se estiver ligado, vai acender. Há mais um feedback deste dispositivo. Não sei qual é o nome deste dispositivo. Mi-Croft, eu acho. Quando alguém está falando, dando o comando, ele mostra uma linha sinuosa por aqui porque assim o usuário sabe que está recebendo seu feedback ou reconhecendo sua voz ou sua voz. Além disso, você pode ver que este é outro dispositivo. Ele dá o feedback da luz com luzes emissoras que está dizendo algo a você. Este é outro. Ele mostra uma luz de anel dentro para mostrar o comando e tudo mais. Então este é outro formulário de feedback. Esta é outra forma de feedback. Você está reduzindo o volume e ele está mostrando instantaneamente e dando feedback que você alcançou esse volume ou reduziu o volume para 50%. Você pode ver aqui, este é outro formulário de feedback. Isso é desligado o volume, então ele está basicamente desligando o áudio. Então esta é outra luz e está mostrando luz vermelha para mostrar ao usuário que você desligou algum recurso. Então estes são todos os diferentes formulários de feedback. Você vai encontrá-los em todos os lugares ao seu redor. Certifique-se de que seu feedback é significativo e é compreensível e compreensível pelo usuário caso contrário não há nenhum benefício de mostrar o usuário códigos L de outros que ele ou ela não pode compreender. Então, estes são todos exemplos de feedback. Vamos passar para a próxima lição. 37. Feedback no contexto - exemplo do Walmart: Agora vou falar sobre feedback dentro do contexto. Agora, se eu for a este Walmart e eu pedi algo no Walmart, ele vai me mostrar o processo que você faz o pedido, então ele está processando, e agora o status é enviado. É uma forma muito boa de feedback. Além disso, ele está me mostrando quando ele vai chegar, também o número da caixa. Agora, uma vez que eu clicar neste item de faixa, é aqui que o problema começa. Eu vou lhe dar como você vai realmente usar o feedback em termos muito agradáveis. Agora, uma vez que você clicar nos itens da faixa, você vai ver esta tela. Minha memória, memória de trabalho é muito limitada. O problema aqui nesta tela é que eu não sei qual era o pacote, e se eu abri como três ou quatro telas múltiplas de diferentes itens de rastreamento, eu não sei qual era o item. Ele está me mostrando a entrega estimada, mas onde está o nome do item ou o nome da caixa ou os itens que eu pedi? Isto é muito confuso para mim. Estão a violar o problema que está dentro de contextos. Sempre que você usar seu feedback, ele deve estar dentro do contexto. Dentro de contextos significa que ele deve mostrar o status da coisa e também o que o status está relacionado. Este status está relacionado a uma caixa que eu pedi, e deve ser em algum lugar nesta tela que esta caixa vai chegar em 24 de maio. Isso é muito importante quando você está usando feedback. Mais algumas coisas que violaram aqui é a memória de trabalho. Eles aumentaram a carga na memória de trabalho. Não me lembro se abri três ou quatro destas páginas. Não me lembro de qual item esta página está falando. Isso é realmente importante em qualquer design de experiência do usuário que você deve permanecer no contexto e não tentar violar as regras, ou colocar alguma carga cognitiva na mente do seu usuário. Esta é outra fita que veio à minha mente depois que eu usei este Walmart, eu pensei que eu deveria compartilhar com você. Vamos passar para a próxima lição. Se você tiver alguma pergunta, me pergunte, te vejo em breve. 38. 4 de Consistancy de exemplos 8: Agora vamos falar sobre consistência. É também um dos principais conceitos por trás de qualquer design de experiência do usuário. À medida que a tecnologia está avançando nos dias de hoje, consistência não se limita apenas a preencher o seu produto ou as cores usadas no seu produto. Ele foi expandido para dispositivos de rede inteligentes muito complexos em sua casa, por exemplo, as cozinhas inteligentes. Agora os aplicativos e sistemas, eles estão conectados e tudo pode ser rastreado ou localizado a partir de apenas uma interface. Além disso, um aplicativo não está limitado a um dispositivo. Você pode usar o WhatsApp em seu PC. Você pode usar o WhatsApp no seu Tablet. Você pode usar o WhatsApp em seu celular, iPhone, IOS, Android. Um aplicativo ou um produto está sendo usado em diferentes plataformas. Agora que a consistência é muito importante, já usuário vai mudar de uma plataforma para outra. Ele não deve sentir a diferença. Os aplicativos devem ser consistentes de um dispositivo para outro, uma plataforma para outra plataforma, um sistema para outro sistema. O que você pode fazer para aumentar o nível de consistência de seus aplicativos ou dispositivos digitais. Número 1 é que tudo deve funcionar e funcionar da mesma forma e a colocação desses itens funcionais deve ser a mesma. Se você posicionou um botão que vai enviar mensagens em todos os dispositivos, ele deve estar enviando mensagem em vez de fazer outra coisa. Se tivermos um tema escuro e um tema claro, então esse interruptor deve fazer a mesma função em todos os dispositivos ou qualquer plataforma que o aplicativo está instalado. Agora, a segunda coisa, em consistência é a consistência de elementos de interface do usuário. Os elementos da interface do usuário são botões, suspensos, todos esses elementos interativos da interface do usuário. O terceiro é a consistência da tipografia, cores e temas. Se o aplicativo estiver usando o tema verde em um dispositivo, ele deverá usar o mesmo tema e tipografia e telefones e cores em outro dispositivo. Usuário, não se confunda que ele abriu e em qualquer outro aplicativo ou qualquer outro produto. Contexto de uso do aplicativo pode ser alterado, mas consistência não deve mudar muito. Você pode mudar, por exemplo, se seu aplicativo é um pouco diferente no iOS ou iPhone, e é um pouco diferente no Android, eles não podem ser 100% semelhantes em design porque eles são diferentes sistemas operacionais ou diferentes sistemas móveis. Você pode variar um pouco, mas você não pode se desviar muito disso. Agora, como você pode manter a consistência e manter a consistência do design de seus produtos. Existem sistemas de design e guias de estilo. Eu tenho discutido design atômico no meu fluxo de trabalho curso de web design moderno e é um sistema de design de pilha completa pela Intercom e esses sistemas de design estão basicamente indo para manter nossos projetos e funcionalidade consistentes em diferentes meios, em diferentes dispositivos, em diferentes plataformas. Vou mostrar-vos alguns exemplos de guias de estilo e sistemas de design para que saibam do que estou a falar. Vamos ver alguns exemplos. Este é o sistema de design de carbono e é realmente ótimo. Você pode ver todas as diretrizes aqui. Estes são os estilos, estas são as cores, grades, iconografia, camadas. Você pode ver tudo aqui, é assim que nosso guia de estilo ou sistema de design se parece. Então temos isso, outros elementos de design e componente de interface do usuário, componentes JS, VS, JSS , utilitários, todas as cores, textos , interfaces, tudo é descrito aqui. Se eu for a essa interface, você pode ver aqui que eles têm todos os ícones, as cores, tudo listado aqui. Agora, Atlassian também é uma ótima maneira de ver como eles alinharam todos os seus veteranos de design e tudo o que eles têm. Eles também têm seu guia de estilo. Se formos para esta personalidade atlassiana, você pode ver que estes são os guias de estilo da marca, ilustração, tipográfico, logotipos, cores, estilo de escrita. Eles até têm tom ou personalidade semelhante ao escrever seu site ou aplicativo móvel ou qualquer que seja o conteúdo. O conteúdo também deve ser consistente em todas as suas plataformas. Você também pode ver diferentes outros guias de estilo, como você pode ver aqui, guia de estilo Yelp. Vou compartilhar os links desses guias de estilo com você. Agora, vou mostrar a vocês o exemplo do WhatsApp. Eu me sinto um pouco estranho quando eu vejo um aplicativo muito grande usando coisas assim. Se você já usou o WhatsApp no Android, você sabe que todo o tema é construído com cor verde escuro como este. Você pode ver aqui, área verde de cima. Isso também é verde quando você liga para alguém. Mas uma vez que você se move para o dispositivo iOS, você pode ver que este é o mesmo WhatsApp, e por algum tempo quando eu abri-lo pela primeira vez no iOS, meu iPhone 5S, Eu estava confuso que se eu estou usando WhatsApp ou algum outro bate-papo da Apple. O que eles fizeram foi remover todo o tema. Você pode ver aqui que não há nenhuma barra verde no topo. Nada parecido com o tema real ou sua consistência de estilo. Eles quebraram sua consistência de estilo. Talvez eles tenham suas próprias razões. Talvez eles tenham algumas seções do iOS ou seções da plataforma, ou talvez queiram torná-lo rápido. Mas ainda assim eu acho que eles deveriam ter mantido o fundo verde para trás para tornar o tema semelhante ao aplicativo Android. Esta é uma grande diferença entre os aplicativos WhatsApp iOS e WhatsApp Android. Eles realmente quebraram a consistência de seu projeto. Estes são todos os exemplos de consistência. Vamos passar para a próxima lição. 39. Quatro restrições com exemplos: Vamos falar sobre Restrições e como eles tornam nosso produto ou nosso aplicativo web ou móvel mais utilizável e mais útil. Você pode ter visto que o Twitter tem um limite de 140 caracteres por tweet. Você não pode exceder 140 caracteres. Este limite ajuda-nos a tornar os nossos produtos mais úteis e mais utilizáveis. Vou mostrar-lhe muitos exemplos de restrições que foram colocadas deliberadamente nos produtos para torná-los mais utilizáveis e úteis. Aqui estão alguns exemplos de restrições. Vou mostrar-vos as imagens destes exemplos daqui a pouco. Você pode ter visto muitos sistemas de segurança, travas de segurança em armas, equipamentos perigosos, e travar o ADF, ou operação perigosa. Por que essas restrições existem porque poucas coisas não devem ser usadas por algum outro usuário ou o novato ou as crianças. Estas restrições vão tornar esses produtos mais úteis. Não se destinam a ser utilizados para essa pessoa específica, para essa idade específica ou para esse grupo etário específico. É por isso que eles colocam algumas restrições. Um exemplo de restrição muito comum é um salvar e não salvar caixa pop-up. Você pode ter visto um monte de diálogos aparecendo quando você está usando o Photoshop ou qualquer um dos softwares, quando você tenta fechar esse software e o documento sem salvar, ele vai avisá-lo, ele vai restringir-lhe, ele vai dar-lhe limite que eu não vou fechar este aplicativo até que você salvar, ou você quer realmente salvar ou sair do aplicativo. Estas são basicamente restrições. Mais alguns exemplos de restrição, se você olhar para qualquer máquina de lavar roupa nova ou moderna, eles têm built-in Criança Lock. Acho que essas fechaduras de criança estão presentes em muitos outros dispositivos, como fornos de microondas. Se alguém tentar abri-lo ou se alguma criança tentar mexer com sua máquina de lavar roupa, ela vai parar de funcionar ou vai desligar ou não vai deixar a criança abrir a tampa. Estas são todas as restrições que estão fazendo essas máquinas de lavar realmente útil. Caso contrário, se alguns acidentes como estes começarem a acontecer, será muita confusão. Além disso, se você usar forno de microondas e enquanto o forno de microondas está girando, se você tentar abrir a tampa, ele vai parar instantaneamente. Isto é para mantê-lo seguro e também é um exemplo muito bom de restrição. Permitam-me ilustrar mais com alguns exemplos. Aqui está um exemplo do Twitter. Se eu começar a digitar, você pode ver que ele vai me restringir a 140 caracteres e vai me mostrar que estes muito são deixados. Este é um exemplo. Agora, um exemplo de restrição é este modelo de preços. Você pode ver que cada modelo de preço tem um projeto ativo fixo. Se você estiver usando um livre, você pode ter apenas um projeto, por isso é uma restrição. É ajudar esses produtos, esses aplicativos web que os usuários estão mais dispostos ou indo para ir para o próximo passo e vai pagá-los. Eles vão aplicar uma restrição para mantê-lo sob seu controle. Esta é outra ferramenta de maquete livre que eu uso, e você pode ver à esquerda aqui, ele diz plano livre e eu posso colocar apenas 300 objetos neste plano livre. Este é outro exemplo de restrição. Mais um exemplo é que você pode ver que esta é a minha caixa delimitadora. Esta é a caixa de documentos. Isso mostra que eu preciso desenhar ou criar algo dentro deste recipiente. Este é outro exemplo de restrição. Então temos este exemplo muito bom de constrangimento. Você pode ver que há um espaço redondo, espaço circulado para CDs. Uma vez que tento colocar o meu DVD aqui, sei que este é o lugar onde preciso colocá-lo. Além disso, se você tiver usado CDs muito pequenos, eles serão colocados no círculo interno. Outro exemplo é blocos de lego. Você pode tê-los usado muito. Eles são um exemplo perfeito de constrangimentos. Se eles não aplicarem essas restrições que os blocos de lego vão caber nos outros blocos de lego com restrições. Essas restrições tornam esses blocos lego utilizáveis. Agora aqui está uma máquina de lavar roupa da Samsung, e esta é a sua característica. Você pode ver por aqui. Aqui diz lavagem segura. Agora, o que é lavagem segura é que porta AddWash só pode ser aberta quando a temperatura do tambor é inferior a 50 graus centígrados, e a fechadura infantil é desativada. Por padrão, acho que o Bloqueio de Criança está sempre ativado. Se alguma criança, mesmo com um erro e até mesmo o bloqueio infantil não está ativado, ainda não vai abrir a tampa até que a temperatura esteja abaixo de 50 graus para que o garoto não se queimasse. Este é outro exemplo, e aqui está outro exemplo de seu filho. As crianças estão em boas mãos. Eles têm Bloqueio de Criança, e você pode ver aqui que ele não abre quando o Bloqueio de Criança é ativado. Se você for usar o recurso Bloqueio de Criança, ele não abrirá a tampa. Você pode ver que eles estão anunciando muito sua segurança e todas essas coisas estão relacionadas a restrições. Eles colocaram muitas restrições para tornar este dispositivo utilizável em todas as condições. Aqui está o cardápio. Eu acho que eles estão mostrando que se você pressionar esses dois botões, você pode ver aqui que há um ícone de cadeado infantil ali. Se continuar pressionando esses dois botões por três segundos, e acho que ativará a fechadura infantil. Depois de ativar o Bloqueio de Crianças, sempre que você tentar reiniciar o dispositivo, ele estará novamente no modo Bloqueio de Crianças. Isso é realmente útil e muito grande exemplo de restrições. Isto é tudo sobre restrições. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 40. Slip e erros com exemplos: Mesmo que seu produto seja 100% utilizável e não tenha problemas de usabilidade. Ainda assim, os usuários vão cometer erros. Mantenha isso em mente. Existem dois tipos de erros, deslizamentos e um erro. Agora, deslizar é quando você está fazendo a escolha certa, você começou a coisa certa, mas você tomou os passos errados ou você pula um deles. Por exemplo, esqueci de desligar o queimador de gás do meu fogão. Ou eu fui para a geladeira e peguei o leite da minha geladeira e derramei no café, e então, eu coloquei a caneca de café de volta em vez do leite. Este é um exemplo de deslizamento. Sem erros. Por outro lado, eles são baseados na decisão errada desde o início, você deu o passo errado. Erros acontecem quando o usuário selecionou metas e planos errados. Eles estão começando o passo é errado. Desde o início, eles tomaram o caminho errado. Assim, por exemplo, se você tiver calculado ou recalculado o peso do combustível do combustível, em libras e não em quilogramas. Há outro exemplo. Por exemplo, se você colocou seu produto no eBay e você está fazendo negócios em libras e seu usuário está comprando em $. Talvez ele esteja vendo o preço errado do produto em $. Então, por exemplo, você pode ter definido para cinco libras e a taxa talvez indicando cinco $. Isto vai dar-te muitos problemas. Isto é basicamente um erro. Deixe-me mostrar-lhe alguns dos exemplos para ilustrar mais sobre deslizamentos e erros. Agora, esta é uma caixa de diálogo que normalmente ocorre quando você tenta excluir algo ou desinstalar algo. Agora, por que os sistemas operacionais perguntam se você realmente precisa desinstalá-lo, porque pode ser um erro, porque alguém pode ter clicado nele sem qualquer consentimento. Talvez ele não queira reinstalá-lo ou talvez não queira desinstalá-lo. Perguntando ao seu usuário antes de cometer, excluir ou excluir seu backup ou relacionar seu site, você deve pedir-lhes para fazer backup ou você deve limitá-los com essas caixas de diálogo que, você realmente quer fazer essa ação? Eu vi alguns dos sites aqui. Agora, mais um exemplo de deslizamento é, você pode ter instalado se você é um usuário do Windows ou um usuário de PC, você pode ter instalado um monte de software ou aplicativos. Eu acho que três ou quatro anos atrás, se alguém me perguntar, um novato, que acabou de começar a usar o PC, Eu normalmente lhe digo que se você quiser instalar qualquer software, basta continuar pressionando sim ou próximo. Isso se chama deslizamento. Então, por exemplo, ele está pressionando sim, e a próxima tela que ele vê é a próxima. Ele não está olhando para essas opções aqui, então ele não vai olhar para essas opções e ele vai continuar pressionando isso em seguida. Agora essas telas estão em sucessão contínua e estas são suscetíveis a deslizamentos. Um monte de pessoas que, diariamente usam software em uma base diária, ou eles têm 4-5 etapas de copiar e excluir ou mesclar arquivos. Eles vão fazer um monte de deslizamentos porque eles estão acostumados com os mesmos padrões. Se algo está faltando ou algo apenas perdeu um passo, eles não vão notar isso. Isso acontece quando você tem uma rotina semelhante ou configuração de trabalho semelhante. No final, vou resumir esta lição com apenas dizer algumas coisas, que se você está projetando seu aplicativo web ou aplicativo móvel ou qualquer tipo de software ou aplicativo ou produto. Você precisa ter em mente que não fornecem ao usuário algo como você pode ter visto celulares. Existe um botão de reposição de fábrica. Se você fornecer apenas um toque de redefinição de fábrica, um monte de crianças vão pressionar isso e ele vai redefinir cada vez em, os dados serão perdidos. Tenha em mente que antes de usar ou decidir uma decisão tão grande para o usuário, pergunte uma ou duas vezes isso, que eles realmente precisam fazer isso ou eles querem pular isso? Isto é tudo sobre deslizamentos e erros. Vamos passar para a próxima lição. 41. Como criar para criar erros com exemplos: Sempre que alguém estiver usando seu dispositivo, seu aplicativo móvel ou seu produto, é muito fácil se alguém estiver usando ou demonstrá-lo com a ação pretendida ou os limites dentro dos limites. É muito difícil projetar quando alguns erros ou exceções começam a acontecer. O verdadeiro problema começa quando algo dá errado. Basta ter em mente que a interação de seu usuário e seu produto é como uma conversa entre duas pessoas. Uma pessoa está fazendo ações e a segunda está guiando ou respondendo com feedback, ou dizendo a ele o que fazer. Quando algo dá errado, a outra pessoa deve guiar a primeira pessoa que isso é errado e você deve corrigi-lo assim. Isso deve ser muito simples e fácil de entender para o seu usuário. É como ensinar sua avó, avó muito velha sobre computadores, Facebook, Twitter ou WhatsApp. Como você pode criar erros para tornar seus produtos mais utilizáveis e mais fáceis de usar? A primeira coisa é que evita que os erros aconteçam. Este é o primeiro passo. Você pode usar restrições, você pode usar caixas de diálogo, você pode usar campos de entrada com limites, você pode usar senhas, tudo, para limitar esses erros. Então a segunda coisa é que você precisa obter essa causa como esse erro aconteceu, e como podemos minimizá-lo. Por que os usuários estão cometendo os mesmos erros uma e outra vez? Existe algum problema de usabilidade? Há algo que está confundindo nossos usuários? Você precisa minimizar isso. Então você precisa fazer uma verificação do senso comum. A verificação do senso comum é que, por exemplo, se você estiver usando um forno de microondas e a tampa estiver aberta, e você deixou a tampa aberta, você não a fechou firmemente. Se você tentar pressionar o botão “Iniciar”, ele vai lhe dar um erro. Esta é uma verificação de senso comum muito básica que, se a tampa estiver aberta, você não deve iniciar o microondas, também é uma restrição. A terceira coisa é que você precisa dar ao seu usuário facilmente reverter essas alterações. Se algo ruim acontece ou se ele por um erro excluiu seus e-mails, ele pode facilmente revertê-los, ele pode facilmente desfazer, ele pode facilmente mudá-los de volta. Além disso, você precisa ter certeza de que os erros devem ser facilmente detectáveis e corrigidos. Como o usuário vai ver que algum erro aconteceu porque você precisa dar algum feedback a eles. Você precisa dar a eles um feedback oportuno e você precisa dar a eles a maneira de corrigir esse erro. Estas são todas as coisas que você precisa ter em mente enquanto você está projetando para aplicativos móveis, qualquer produto físico ou qualquer produto digital. Deixe-me mostrar-lhe alguns bons exemplos de criação de erros. Agora, se você usou o Dropbox, é um serviço de armazenamento de arquivos, e se você tiver armazenado alguns arquivos e você os excluiu, ele vai manter seu backup por três meses. Se você se lembra que eu apaguei alguma pasta por engano, onde eu preciso encontrá-lo? Você está indo para ir para esses arquivos excluídos e quando você clica, você vai ver todos os arquivos excluídos com datas em que você excluí-los. Esta é uma ótima característica de corrigir quaisquer problemas ou erros, ou qualquer coisa que você possa restaurá-lo facilmente. Este é outro recurso que você pode restaurá-lo. Outro exemplo é o Gmail. Se você tem um Gmail usado e quando você tenta excluir alguns e-mails, ele vai dar-lhe o feedback e também vai dizer-lhe a maneira como você pode desfazê-lo, como você pode reverter essa mudança se você fez isso com um erro. Também há um aprender mais para treinar o usuário se o usuário não sabe o que acabou de acontecer. Estes são poucos exemplos. Há muitos outros exemplos que você pode ver e pode ter visto on-line quando você tenta excluir algo, ou quando você tenta criar algo, há algum erro. Ele vai lhe dar como corrigir esses erros. Também alguns sites que lhe dão passos que fazem isso. Ontem à noite, tive um problema com meu canal do YouTube que minha conta do Boogle AdSense não estava funcionando com ele. Fui ao guia do guia do YouTube e tentei abri-lo. Havia uns cinco e seis passos, e eles foram muito difíceis para mim de seguir. Você se certifica de que precisa torná-los muito fáceis para o seu usuário entender. Você pode até usar um vídeo para orientar o usuário como corrigir esse erro. Estas são todas as dicas e truques e design para erros. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 42. 8 do usuário sempre no controle com exemplos: O que quer que nós humanos possuamos ou as coisas que temos, precisamos controlá-lo nós mesmos. Essa necessidade humana de controle pode ser rastreada até nossas primeiras raízes quando éramos homens das cavernas. Quando começamos a montar o cavalo, usamos cintos para controlá-lo. Podemos facilmente parar o nosso cavalo, podemos facilmente deixá-lo correr. Estas são as necessidades humanas. Este comportamento é construído na natureza humana. Como designers de UX, precisamos dar aos usuários controle total ou quase o melhor controle de seus aplicativos, ou os sites que eles estão usando, ou suas contas, ou os sites de comércio eletrônico que eles estão usando, que os usuários sintam que eles estão no comando. Eles vão se sentir muito bem. Isso também faz parte da experiência do usuário. Mesmo se você ver as crianças e observá-los sempre que eles têm um ano e meio de idade, eles tentam comer com uma colher eles mesmos. Se você tentar pegar a colher deles, eles vão chorar, e eles vão dizer que, “Nós precisamos comer a nós mesmos.” Mesmo eles estão jogando tudo em todos os lugares e eles estão jogando comida em si mesmos, mas eles continuam tentando usar colher porque eles se sentem no controle. Hoje, em nossas tecnologias em todos os lugares ao seu redor, até mesmo carros , celulares, laptops, computadores, eles têm controles de brilho. Eles têm controles de áudio. Você pode reduzir o áudio, você pode desligá-lo. Eles têm temas escuros e claros. Você pode aplicar se você sair ao sol. Você também pode conectar e desconectar Wi-Fi e Bluetooth. Todas essas configurações e serviços, você pode desativá-los e ativá-los. Todos os seus dispositivos estão sob seu controle. Agora, por que damos ao usuário tanto controle? Porque é da natureza humana que nos sentimos satisfeitos quando estamos no controle. Deixe-me mostrar-lhe alguns outros exemplos de usuário no controle. Você pode ter visto algumas páginas de destino onde você vai para essa página de destino e o vídeo começa a ser reproduzido sozinho e não há como controlá-lo ou pará-lo. Agora, você pode ver que este vídeo está tocando, mas se ele tem um áudio alto, você vai matar esta página. Você vai clicar instantaneamente nesta cruz. Este botão é chamado de reprodução automática. A reprodução automática não é uma coisa ruim se você usá-lo de uma maneira boa, mas se você tentar limitar o usuário no controle e não dar a eles nenhuma opção de desligar o áudio ou fechar a janela do player de vídeo, eles vão ficar irritados. Deixe-me mostrar alguns exemplos de diferentes sistemas operacionais, como Google, sistemas operacionais móveis Android e Windows, iOS, Macs, e como eles estão dando controle para seus usuários. Este é um exemplo que você pode ver, você pode desativar qualquer aplicativo, mesmo você pode forçá-los a parar. Todos esses aplicativos estão listados aqui. Então, temos esta tela de configurações para iPhone, e você pode ver, você pode personalizar tudo, Wi-Fi, Bluetooth, modo de avião, notificações, tudo. Esta é a tela de configurações do Gmail e você pode ver que há toneladas de configurações que você pode fazer. Embora não seja muito bem definido ou não muito bom, há muita informação ou configurações esmagadoras aqui, mas ainda assim é um bom exemplo. Então, esta é a nossa tela, Windows 10, e eu mudei um pouco seu tema. Estas são todas as configurações, gerenciamento de cores, dispositivos, fontes, opções de Internet. Centenas de configurações que você pode fazer para qualquer dispositivo conectado ou qualquer programa que você tenha instalado. Você pode desinstalá-los ou instalá-los novamente ou pode desativar serviços diferentes. Em seguida, esta é a tela do sistema operacional do iMac ou Mac, preferências do sistema. Há um monte de coisas que você pode fazer aqui. Você pode controlar a doca, protetores de tela de desktop, equipes, modo de economia de energia, exibir se você tiver vários monitores, seu som, scanners, Bluetooth. Todas essas configurações estão lá para que o usuário possa se sentir no controle e ficar satisfeito que eu possuo este aplicativo ou este produto. Isto é tudo sobre o usuário no controle. Espero que tenha entendido o conceito, a necessidade humana e a psicologia humana por trás disso. Vamos passar para a próxima lição. 43. 9 de agrupamento e de as em as em as: Você pode ter lido muitos livros, e você já se perguntou por que eles dividem cada livro em capítulos diferentes, e seções diferentes, parágrafos diferentes com o uso de títulos diferentes, eles são mais fáceis de digitalizar. Mentes humanas podem facilmente consumir essa informação e facilmente compreendê-la. Nós, humanos, não podemos processar um monte de dados ou um monte de informações ao mesmo tempo, mas nós amamos pedaços de informação tamanho mordida. Agora, por que precisamos agrupar nossos controles, nossos botões ou nossas opções? Basta dar um exemplo, se eu dar-lhe uma máquina de lavar roupa e tem como um 100 botões e controles e configurações sobre ele, você vai ficar sobrecarregado com isso é funções, e você não preferiria com uma lavagem mais simples máquina que tem apenas 10 botões sobre ele. O que você pode fazer para melhorar seus produtos, você pode agrupar controles relevantes juntos, eles fazem sentido para o usuário que este conjunto de controles vai fazer isso. Deixe-me mostrar-lhe a imagem da máquina de lavar que estou usando em minha casa. Esta é a máquina de lavar roupa Samsung que estou usando na minha casa, e vou mostrar-lhe quais são esses controles, e por que o agrupamento deles faz sentido. Agora, você pode ver no meio eles agruparam esses dois, Power e Start. Este é um desligar esta máquina e para iniciá-lo. Isso faz muito sentido que eles quase fazem as funções semelhantes. Então temos todos os controles personalizados no lado esquerdo. Você pode ver aqui, estes são os três controles personalizados, e, em seguida, o mouse pré-fabricado onde você pode apenas selecionar qualquer um, e estes são agrupados aqui. Se eu quiser uma lavagem rápida, eu vou selecionar isso e ele vai apenas fazer todas as configurações para mim. Este é um layout muito agradável de todos os controles de interface e eles são agrupados para fazer sentido para o usuário. Além disso, eles não estão violando o recurso de controle. O usuário sempre quer estar no controle no lado esquerdo, e no lado direito eles têm modos pré-fabricados e eles usam agrupamento para definir toda essa interface, isso faz sentido. Da mesma forma, se você vir algum aplicativo, há toneladas de aplicativos, Mac, Windows, Sistemas operacionais, até mesmo iOS Android, eles têm todas as configurações agrupadas em diferentes áreas. Eles estão empilhados em seções diferentes. Deixe-me mostrar-lhe algumas das seções. Estas são as Configurações do Windows e você pode ver que são configurações do Windows 10 e você pode ver que elas são mais simples, e há como sete ou oito categorias, e você pode facilmente ir com qualquer uma delas. Eles têm sua descrição abaixo deles, e você pode fazer a configuração e personalização. Eles usaram o agrupamento para acomodar um monte de configurações em uma categoria. Então temos, esta é a captura de tela do Sketch App. É um aplicativo popular para designers de interface do usuário e você pode ver isso é como eles estão usando agrupamento. Agora, este primeiro grupo é para alinhamento, outro é para a próxima coisa, então temos estes para o posicionamento. Então temos todos os controles de texto nesta caixa delimitadora, então temos a aparência e os efeitos aqui. É assim que faz sentido agrupar diferentes controles em grupos. Este é também outro exemplo que você pode, você pode ter visto em muitas barras de navegação nos menus que todas estas são agrupadas em seções. Você pode ver que esta é a primeira seção para arquivos, e abrir arquivos, criando novos arquivos. Isso é para renomear, salvar e reverter o arquivo. Estes são exportação e estes são reduzir arquivo e estes são, eles têm agrupado para que o usuário possa facilmente compreendê-los e ter algum senso sobre eles. Novamente, você pode ver aqui no topo que temos guias diferentes. Se eu clicar em algum deles, desculpe. Se eu clicar em qualquer um deles, ele vai me levar para as configurações da ferramenta. É mais fácil para mim se eles têm como uma página longa, e todas as configurações que residem nessa página, será muito difícil para mim não mudar tudo. Isso é agrupado em duas categorias diferentes e é mais fácil para mim alterar as configurações do teclado. Estas são as Preferências do Sistema. Novamente, você pode ver que estas são preferências do sistema Mac ou iOS e eles também estão em partes diferentes. Como você pode ver este é o primeiro, então este é o segundo, este é o terceiro bloco, e este é o quarto bloco, e este é o último bloco. Ou você pode ver Grupos de usuários e controles parentais, além de controles extras, acessibilidade, Siri, eles estão quase relacionados eles estão aqui. Também data e hora. Os controles que estão relacionados ao compartilhamento de rede, Bluetooth, todos estão nesta área, iCloud você pode ver. Isto faz sentido. Eles são quase todos relacionados. Estes são dispositivos de hardware que você pode ver nesta área, impressoras de som, trackpad, mouse, estes são quase todos os hardwares. Estas são as personalizações de seu próprio sistema operacional como Desktop, Dock, Mission Control, idiomas, segurança, privacidade. Todas essas preferências do sistema, elas fazem sentido. Agora, este é um exemplo muito ruim no Google Adsense. Estava a tentar fazê-lo desaparecer. O que aconteceu é que eu estava olhando ou lendo esta área, e o próximo ícone está aparecendo um pouco no lado direito, e está muito longe desta tela, deste pop-up. Por uns cinco minutos, não consegui fazer o que tenho que fazer aqui, como posso fechar esta caixa pop-up. Depois de olhar em volta, vi que isto está aqui. Se algo está longe de seu contexto de uso, eu estou usando esta janela. Este próximo deve ser aqui, ou aqui, ou aqui, eles também podem colocar um botão aqui. Faz sentido. Está dentro de um grupo. Agrupamento também faz sentido porque o usuário acha que essas coisas estão relacionadas. Esta é uma lei, esta é chamada Lei Gestalt de agrupamento. Há mais leis da Gestalt. Posso incluir outra seção inteira sobre isso, mas agora não está no meu plano. De qualquer forma, o agrupamento faz sentido, tente usar o agrupamento de forma inteligente em suas UIs. Se tiver alguma pergunta, pergunte-me. Vamos passar para a próxima lição. 44. 10 de pessoas têm limites: Todos os humanos são limitados. Temos limites em termos de limites físicos e mentais. Não podemos operar ou usar qualquer dispositivo ou máquina por muito tempo. Temos limitações físicas e mentais. Sempre que você estiver projetando para qualquer aplicativo ou desenvolvendo qualquer produto, você precisa manter todas essas coisas em mente. Agora, se falamos de smartphones e limites humanos, então você precisa saber que há uma pesquisa Stephen Hoober e Josh Clark e, de acordo com eles, 50 por cento de usuários apenas seguram seus smartphones com uma mão, e 75 por cento de sua interação é impulsionado pelo polegar, então eles usam principalmente polegar para pressionar botões diferentes e para encomendar algo on-line. Você precisa manter essas coisas