Design de UX: crie um protótipo

1. Introdução: Ei, obrigado por se juntar ao design UX, criar um protótipo. Nesta aula, aprenderemos como criar um protótipo interativo clicável para apresentar aos seus clientes. Começaremos por entrar em algumas pesquisas de UX, explorando suas ideias e emoldurando-as, criando seu protótipo e apresentando suas ideias aos seus clientes. Mas primeiro, deixe-me apresentar-me. Meu nome é Ginny e sou designer de UX e diretor criativo. Comecei como um curso de design gráfico da Escola de Artes Visuais de Nova York. Trabalhei como diretor de arte em publicidade por três anos antes de fazer transição para o web design porque eu realmente amava HTML e CSS. Eu pensei que eu queria ser um desenvolvedor front-end por um tempo, mas foi quando eu comecei a trabalhar muito perto com um designer de produto ou um designer de UX e eu realmente me apaixonei por ele. Ele satisfez o lado geeky de mim que gostam de pesquisar e evidências e dados e eu descobri que pesquisa UX e design UX simplesmente realmente correu bem com a minha personalidade. Nesta aula, você estará trabalhando em um aplicativo fictício chamado Tutz musical colaboração móvel que precisa de algumas melhorias de usabilidade. Todos os arquivos de exemplo serão fornecidos a você para que o foco principal desta classe nós estaremos ensinando a você como mover através de um processo de UX típico em vez de projetar tudo sozinho do zero. Você aprenderá a abordar um projeto como pesquisador e designer de UX. Esta classe está aberta a todos os níveis, mas pode ser mais fácil para aqueles que têm acesso a programas gráficos, como esboço ou Illustrator mesmo ou Photoshop, qualquer coisa que possa lidar com gráficos. No final desta aula, você terá um projeto de UX bem completo para mostrar em seu portfólio e também para mostrar na galeria de trabalho do Skillshare. Eu encorajo você a compartilhar seu projeto com outras pessoas e especialmente como você está progredindo através de seu projeto para feedback. Há um canal incrível aqui no nosso quintal com galeria de projetos do Skillshare, onde você pode compartilhar seu trabalho. De qualquer forma, acho que você vai se orgulhar do que você chegar com isso até o final desta aula. Vamos começar. 2. Requisitos de projeto: Olá, bem-vindo de volta. Estou animado para passar por esta jornada com você enquanto você cria seu protótipo. Pode haver um pouco de curva de aprendizagem, especialmente se esta é a primeira vez que você está trabalhando no Sketch ou em outro programa de design gráfico. Mas com um pouco de prática, você estará navegando por essas ferramentas em pouco tempo. Apenas seja paciente consigo mesmo. Rebata qualquer pensamento desencorajador porque todos temos que começar em algum lugar. Mas estou animado para passar por isso com você. Aqui estão os nossos requisitos. Equipamento. Você vai querer um laptop ou computador desktop, aplicativos gráficos como Sketch, Adobe XD, Photoshop, Illustrator ou algo semelhante. Os pontos fortes e fracos de cada um desses programas dependem do que eles são projetados para. Eu prefiro Sketch porque é realmente para prototipagem. Adobe XD, embora eu não tenha nenhuma experiência com isso, eu ouvi coisas maravilhosas sobre isso. Illustrator está bem porque você pode criar alguns bons wireframes em que, embora não seja realmente um programa de aplicação web. Photoshop, embora ele renderize os componentes da Web melhor do que o Illustrator, ele não é realmente um programa de wireframing ou aplicação web também. Esquema do projeto. Estaremos aprendendo a analisar a pesquisa de UX, criar ideias de wireframe, validar essas ideias conduzindo nossa própria pesquisa de UX leve, criar um protótipo e apresentar esse protótipo. Recursos de classe. Teremos alguns exemplos de pesquisa UX que eu fornecerei para o bem desta classe. Nós também teremos um projeto TUTZ de amostra disponível para você como um arquivo Sketch ou um PNG para você importar para qualquer programa gráfico que você escolher para usar, e também teremos um exemplo de requisitos de design e documentação que contêm necessidades das partes interessadas e dos negócios. Assim que todos esses itens forem baixados, estaremos prontos para começar a aula. 3. Analisando a pesquisa de UX: Olá, bem-vindo de volta. Se você estiver visualizando este vídeo, isso provavelmente significa que você viu o último vídeo com os requisitos do projeto e você se sente pronto para iniciar o projeto da classe. Ótima. Como atualização, vamos trabalhar em um aplicativo móvel fictício chamado Tutz, que é um aplicativo de colaboração musical. Ele permite que os usuários façam upload de arquivos de áudio que, em última análise, contribuirão para uma música original. Nesta aula, você estará entrando na mente de um designer de UX que foi contratado pelo seu cliente Matt, que quer que você melhore a usabilidade do aplicativo Tutz e ele tem alguma documentação para provar isso. Matt fornece alguma documentação do trabalho anterior e informa que há alguns comentários de usuários e de seus colegas de que a página Upload, a página que os usuários usam para carregar seus arquivos de áudio, tem sido frustrante e confuso de usar. Isso está fazendo com que Tutz perca negócios devido à má usabilidade, e Matt precisa de sua ajuda para analisá-lo e fornecer soluções o mais rápido possível. Então é o mais rápido possível, não é? Agradeça ao Matt e encontre um lugar tranquilo para ver a documentação do projeto. Agora, vamos dar uma olhada no documento do Matt. É importante notar que todas as empresas lidam com seus processos de UX forma diferente e a escala dos projetos em que você estará trabalhando variará. Para o bem deste curso, permaneceremos simples para que você possa entender o básico. Ao ler os documentos, é evidente que o objetivo de Matt é obviamente melhorar a usabilidade da página Upload, mas especificamente tornar o processo de upload e colaboração mais intuitivo. Isso significa que os usuários não estão encontrando propósito e a funcionalidade desta página em particular muito claras. Sabemos agora que o documento de Matt tem algumas evidências apontando para muita confusão experimentada pelos usuários, mas é nosso trabalho como designer de UX descobrir o porquê. Se olharmos para trás no documento de Matt, algumas chamadas importantes são, ele quer que fiquemos ao guia de estilo de cores e à letra minúscula. Isso é importante porque muitas empresas têm sua própria marca e você vai querer aderir a elas. Ele também quer ter certeza de que os gráficos são altamente reconhecíveis. Também precisamos ter certeza de que o botão Upload é mais perceptível, e talvez seja necessário alterar o CTA ou o Call to Action para ser mais intuitivo para o usuário final. Por fim, ele quer manter uma sensação fresca e vibrante para o aplicativo para atrair seu público principal, que são jovens usuários, talvez o ensino médio para o final dos anos 30 ou 40. Ao analisar as notas de Matt, você vai querer anotar suas perguntas ou suas preocupações sobre o produto para testes adicionais, que abordaremos nesta classe. Algumas perguntas que você quer fazer a si mesmo é, qual era o objetivo do usuário? Qual era o objetivo do gerente de produto? Eles se alinharam? Por que ou por que não? Eles alcançaram seus objetivos? Por que ou por que não? Outra questão poderia ser, o que está acontecendo na vida dos usuários finais que poderia estar afetando sua percepção do produto? É a solução para remover ou adicionar mais ao produto? É importante entender bem os objetivos do produto para que você possa entender o que está impedindo que ele atinja seus objetivos para que você possa fornecer a melhor solução possível. Na próxima lição, vamos aprender como pegar sua pesquisa de UX e transformá-las em wire-frames. Então, vamos seguir em frente. 4. Criar wireframes: Ei, bem-vindo de volta. Nesta lição, você fará a análise do último vídeo e encontrará maneiras de abordar hipóteses e possíveis soluções por meio de wireframing. Neste ponto, você pode querer começar a usar um aplicativo gráfico, como Sketch ou Balsamiq ou outras ferramentas de wireframe para começar a esboçar algumas idéias. Mas ainda é bom usar papel e caneta para esta parte também. Vamos mergulhar. Nesta tela, estamos olhando para as telas Tutz. A primeira tela é a tela de lançamento com um chamado à ação proeminente está dizendo começar agora. A segunda é a página de upload, que é a página problemática de acordo com seu cliente, e a terceira e quarta telas nos mostram os fluxos de trabalho associados ao recurso de upload. Agora, para esta lição, vamos fingir que Matt, nosso cliente, nos deu acesso aos arquivos originais de design nativo criados por um designer anterior. Uma vez que estes são modelos de cores completas e queremos estar em fase de wireframing agora, vamos querer fazer isso parecer mais como arte conceitual em vez de arte final, tanto quanto possível. A razão é que a maioria dos clientes tem dificuldade em olhar para wireframes coloridos e não pensar que é o produto final. Para contornar esse problema comum, vamos querer converter esses modelos coloridos para preto e branco. O que eu fiz foi criar uma página separada no Sketch com os desenhos de cores originais e converti as placas de arte coloridas em preto e branco, a fim de transmitir a mensagem, que estamos olhando para conceitos e arquitetura de informação, em vez de componentes brilhantes da interface do usuário. Antes de começarmos a grampear, só um conselho. Não tenha medo de mostrar idéias no início da fase de wireframing. Porque quanto mais buy-in você recebe de seus clientes ou de seu gerente de produtos no início, menos tempo você gastará digitalizando e re-digitalizando ideias que não foram aprovadas. Como você pode ver, estamos olhando para as telas preto e branco recém-convertidas, e estamos tentando entender quais melhorias de UX deveríamos estar fazendo. Neste ponto, vamos querer voltar para o documento de requisitos de Matt, e na parte inferior da página, eu adicionei algumas hipóteses com base na pesquisa e minha própria intuição de comportamento padrão do usuário para aplicativos on-line. As hipóteses afirmam que, os usuários não sabiam onde estava o botão de upload porque o botão de texto estava se perdendo e seria mais detectável se fosse um botão de texto gráfico que fosse exibido de forma mais proeminente no a tela. As últimas contribuições também ocupam muito espaço. Por último, o botão de seta roxa é confuso para os usuários por causa de sua localização proeminente e fica confuso para uma ação de upload. Isto faz sentido. Uma vez que esta é uma página de upload e os usuários devem naturalmente esperar que o botão acionável proeminente seja uma ação de upload, faria sentido mudar essa interface de usuário e arquitetura de informação para ser intuitivo assim. Depois de digerir essas hipóteses, podemos naturalmente chegar a algumas conclusões e recomendar que, alteramos o link de texto de upload para um botão gráfico. Vamos mover o botão de upload gráfico para um local proeminente, ou simplesmente substituir o botão play por ele. Podemos tornar o botão play mais visualmente conectado à seção de contribuições mais recentes, uma vez que eles estão relacionados em informações e uma ação. Também podemos tornar a secção de contribuições mais recentes menos proeminente. Agora vamos passar para o grampo real. O que vou fazer agora é copiar e colar este quadro de arte pressionando “Option Shift” no meu MacBook e arrastar uma versão do quadro artístico para baixo. Agora que temos uma cópia da página de upload, vou criar um novo botão para substituir este botão de reprodução que irá solicitar aos usuários que enviem seu arquivo de áudio em vez de reproduzir a peça de colaboração que foi enviada pelos usuários. Vou agrupar o botão de reprodução e o gráfico de áudio e arrastá-lo para usar mais tarde. A próxima coisa que eu quero fazer é adicionar o botão de upload, e como eu sei que há um botão existente sendo usado na interface do usuário na tela de lançamento, eu vou apenas copiar e colá-lo no meu novo quadro de arte. Como é um fundo branco, vou mudar a cor de preenchimento para um cinza escuro e mudar o texto para branco. Lembre-se que este é apenas um wireframe para que as cores não sejam finais. Também quero alterar o texto para algo mais intuitivo, como “Fazer upload do seu arquivo” ou “Fazer upload do seu arquivo de áudio”. Também vou expandir o botão para que o texto se encaixe e centralizar o botão na tela. Ao olhar para ele, eu quero remover o ponto de exclamação no botão, uma vez que parece muito mais limpo dessa forma. Agora que temos o botão de upload front-and-center, podemos nos livrar do link de textos antigos para upload. Vamos mover o botão de upload um pouco para cima, só por enquanto enquanto eu jogo com o espaço. Agora eu quero trazer o botão play de volta para a mistura e combiná-lo visualmente com a seção de contribuição mais recente. Uma vez que o botão play e as últimas contribuições estão relacionadas. Quando me refiro às notas de Matt, ele menciona que a última seção de contribuição está ocupando muito espaço e compete por atenção com o botão de upload. Embora isso possa ser verdade. Eu só vou deixar esse comentário sozinho para esta lição só para ver se Matt estaria bem em fazer a seção de contribuição mais recente do mesmo tamanho ou até mesmo um pouco maior, já que temos um botão de upload do seu arquivo que é muito grande e proeminentemente exibido na tela. Por enquanto, eu vou mover o título para as últimas contribuições para cima para que eu possa caber o botão play nessa área. Eu vou mover o gráfico para trás e ajustar um pouco o tamanho, e então eu vou trazer o botão play de volta e torná-lo menor para que ele não competir visualmente com o CTA principal, que é para upload. Agora, as outras páginas que queremos focar são as páginas de upload que contêm o fluxo de trabalho de upload. Esse fluxo de trabalho começa quando um usuário clica no botão Fazer upload do arquivo, que aciona um gerenciador de arquivos que aparece na parte inferior da tela. O usuário clica no arquivo desejado ou navega por ele, e depois que ele é carregado, o nome do arquivo aparece na próxima tela como a contribuição mais recente. Vou diminuir o zoom e fazer o mesmo que antes, que é copiar e colar o quadro de arte original clicando em “Option Shift” e arrastando uma cópia dele para baixo. Eu vou dar zoom nele, e agora eu vou abordar por que o usuário está ficando confuso com este processo. O fluxo de trabalho atual do Tutz tem um usuário terra neste gerenciador de arquivos depois de clicar, fazer upload do arquivo, mas eu percebi que o usuário está ficando confuso durante esta etapa porque não há nenhuma chamada à ação óbvia neste gerenciador de arquivos. Há uma inconsistência na experiência do usuário por causa disso, porque Tutz usa botões proeminentes em todos os outros lugares menos aqui. Essa inconsistência é obrigada a confundir o usuário final porque eles esperariam as mesmas ações globais em todo o aplicativo. O que eu quero fazer é resolver este problema adicionando botões semelhantes ao botão de upload do seu arquivo que eu acabei de completar anteriormente, e copiá-lo e colá-lo neste quadro de arte. Vou colocá-lo no local certo trazendo-o para a parte inferior da tela, e ajustar o tamanho da fonte e o tamanho do botão para dar ao usuário a impressão de que esta é uma ação proeminente, mas secundária na página. Agora que isso está feito, eu vou diminuir o zoom, e como você pode ver, o original está no topo e minha versão revisada está na parte inferior. Este é provavelmente o lugar onde eu iria parar e mostrar minhas idéias para meu cliente ou gerente de produto para feedback antecipado. É importante estar preparado para responder às suas perguntas e defender as suas decisões de design. Agora que você tem seu primeiro wireframe sob seu cinto, vamos aprender a validar suas ideias executando um teste de usuário simples. O feedback é muito importante durante esta fase antes da prototipagem, e pode ser altamente iterativo. Mas no final, você ficará muito mais feliz com o produto final. Vejo-te na próxima lição. 5. Validação de fios: Olá, bem-vindo de volta. Na última lição, aprendemos sobre wireframe e algumas práticas recomendadas para wireframe. Nesta aula, nós vamos aprender sobre como validar as ideias em seus wireframes executando um teste de usabilidade. Um teste de usabilidade é um método para coletar feedback sobre como algo utilizável é. É isso. Embora existam muitas maneiras diferentes de fazer pesquisa de UX e testes de usabilidade através de tipos de cartões ou pesquisas ou testes A/B, o método que vamos abordar na lição de hoje é um teste moderado presencial. Isto é quando um moderador como você, leva um usuário através de uma série de perguntas e ações para observar seu feedback para um produto. A maioria dos problemas terá muitas soluções diferentes possíveis, mas o melhor dos testes de usabilidade é que você será capaz de restringir as melhores soluções possíveis para o seu aplicativo, para o seu público. Agora, para testes de usabilidade, você vai querer ter algumas coisas em mente. Número um, definindo o tom para o usuário. Você vai querer manter o ambiente limpo, livre de distrações e confortável para o usuário. O usuário também deve se sentir confortável e você pode fazer isso aquecendo-os com algumas perguntas no início. Você pode fazer perguntas como, qual é seu nome, sua ocupação, o que eles fazem com seu tempo livre, que frequência eles usam seu computador, seu dispositivo móvel, quão experiente eles são tecnicamente? Isso vai fazer com que eles se acostumem a falar em voz alta e falar em geral, para segui-los para dar seu feedback naturalmente enquanto você está indo para o teste de usabilidade. As perguntas que você deve estar fazendo ao usuário devem ser muito neutras sem preconceito. Eles devem ser formulados de tal forma que ajude você a avaliar mais tarde por que o usuário reagiu dessa maneira. Por exemplo, você vai querer formular sua pergunta de forma aberta, então em vez de perguntar : “Você achou este botão confuso?” Você pode perguntar-lhes : “O que você estava sentindo ao olhar para este botão?” Eles respondem e você pode perguntar: “Por quê?” Para ajudá-lo, eu forneci um link para um script de teste de usabilidade muito famoso encontrado neste link. Número dois, recrutando usuários. Para o bem desta classe, vamos fazer você recrutar apenas um usuário quando é ideal ter normalmente cinco, sete,12, 50 a 100 usuários às vezes. Mas por uma questão de tempo e apenas para ensinar-lhe o básico, vamos apenas manter um usuário. Os critérios que procuramos estão anotados no documento do Matt. Eles são, número um, entre 14 e 40 anos. Número dois, eles deveriam ter um smartphone. Número três, freqüentemente usa mídias sociais porque este é um aplicativo social, e número quatro, eles devem adorar música. Algumas maneiras que você pode recrutar participantes são talvez através de um anúncio on-line ou um anúncio no jornal, canais on-line como testing.com remoto ou até mesmo testes de calçada, onde você pode ir a um espaço público e apenas encontrar pessoas que estão disposto a falar com você. O truque é, como podemos incentivar as pessoas a participarem do estudo? Na minha experiência pessoal, os usuários que são incentivados pela oferta de um vale-presente ou algum tipo de recompensa, deram respostas muito melhores e também apareceram para o estudo do usuário. Agora, aqui está uma lista de algumas maneiras que descobri que foram eficazes em recrutar pessoas e incentivá-las. Número um, ofereça um vale-presente, qualquer coisa de 25 a 100 dólares dependendo da duração do seu estudo. Número dois, oferecer dinheiro direto, tipo 50 dólares por uma hora do tempo deles. Número três: oferecer uma chance de ganhar um presente ou um vale-presente de valor maior, como US$200, por exemplo, ou algo parecido com um iPad. Isso funciona bem se você tem que recrutar um monte de pessoas e você simplesmente não tem o orçamento para pagar por todas elas individualmente. Uma vez que o usuário é instalado em seu ambiente de teste, é hora de fazer o teste. Os métodos de todos serão um pouco diferentes por causa de seus tipos de personalidade e seu método preferido de teste. Mas eu vou mostrar a vocês o método que eu prefiro que tem sido mais útil para mim e mais eficaz para mim. mais importante, eu lembro o usuário de pensar em voz alta. Número um, mostre o produto em seu estado atual. Significa mostrar a versão do produto ou design que está disponível agora. Número dois, peça ao usuário para dar feedback sobre esse produto observando-o sem clicar primeiro e dando feedback após interagir com o produto. Número três, mostrar ao usuário o design proposto. Tem que passar pelo mesmo processo de dar feedback através da observação, e depois fazê-los dar feedback após interagir com ele. Número quatro, dê a eles uma tarefa para executar, esta é uma análise de tarefas. Embora não seja ideal ter um wireframe de papel não interativo para executar uma análise de tarefas, você ainda pode coletar muitos comentários úteis para tarefas simples relacionadas à navegação e descoberta de informações. Agora o que eu gostaria de fazer é enquanto estou testando, eu gosto de gravar a sessão se o usuário estiver confortável com ela. Durante o teste, você deve anotar notas da melhor forma possível, mas é também por isso que a gravação é tão importante porque você não será capaz de pegar tudo enquanto você está anotando notas, e você não quer continuar perguntando eles para repetir o que eles estão fazendo porque não será um comportamento verdadeiro até esse ponto, então gravar mais a anotação é realmente importante para análise mais tarde. Na próxima lição, vamos entrar nas coisas divertidas, na prototipagem, então fique atento. 6. Criação de protótipos: Ei pessoal, bem-vindos de volta. É hora da parte divertida, da prototipagem. Nesta lição, vamos pegar os wireframes da lição anterior e usá-los como uma estrutura para construir nossos projetos. Apenas um aviso, vamos estar pulando através de alguns processos de UX, como iteração, a fim de chegar à prototipagem, que eu tenho certeza que todos estão entusiasmados. Vamos mergulhar. Como você pode ver, estamos olhando para os wireframes preto e branco da lição anterior, mas agora vamos rever o que aconteceu depois que eles foram validados por testes de usuários. Estes são os originais na primeira fila aqui. Estas notas em vermelho são minhas notas de teste de usuário, modo que eu sempre as tenho à mão para se referir, como eu wireframe fora idéias. Na segunda linha, temos os novos wireframes testados pelo usuário para feedback, como você pode ver aqui. Mas como nós testamos o usuário para validar nossos wireframes e reunimos novos comentários, isso me levou a repensar minha abordagem inicial para o redesign de upload do Tutte, que acontece muito com os designers de UX quando estamos testando. Devido ao novo feedback, decidi criar um novo conjunto de wireframes para abordar o feedback de nossa sessão de teste de usuário. Esses novos wireframes criados após a validação estão aqui nesta terceira linha, aqui embaixo, marcados com a versão do título 3. A página de upload mudou e movi o botão de reprodução de volta para a área superior, e movi meu botão de upload para baixo. Eu também mudei o texto, como você notou. As últimas contribuições foram alteradas em tamanho e destaque após o feedback que recebi. Eu também adicionei telas de fluxo de trabalho adicionais, que entrarei em mais detalhes um pouco mais tarde. O novo fluxo envolve, o usuário aterrissando na página de upload, o usuário clicando no botão de upload de arquivo de áudio, o gerenciador de arquivos sendo acionado depois que o botão de upload de arquivo de áudio é clicado, o usuário pode selecione o arquivo ou procure um arquivo enquanto o upload agora CTA está esmaecido e desativado até que um arquivo seja escolhido. O usuário seleciona um arquivo que é exibido por uma borda realçada brilhante em torno do nome do arquivo, e o botão de upload agora se torna ativo, o que é indicado por uma cor ativa. Uma vez que ele é carregado e o upload é bem-sucedido, uma tela de sucesso é exibida, que então desaparece após alguns segundos. Finalmente, o usuário pousa na tela final que mostra que o usuário acabou de fazer upload de um arquivo de áudio na seção de contribuições mais recentes. Agora que temos todos os fluxos de trabalho aprovados e seu cliente está feliz e seus usuários geralmente estão felizes, vamos querer simular isso. Uma vez que esta classe não cobre como usar o esboço em profundidade, eu já criei as maquetes coloridas para você, que serão as maquetes que usamos para criar o protótipo interativo. Podemos ver como as cores da marca e a interface do usuário foram adicionadas para dar a este aplicativo a aparência e a sensação de que estava faltando durante o enquadramento do fio. Todos esses componentes da interface do usuário foram retirados de notas de correspondência e dos paradigmas de design existentes dos produtos atuais. Vamos juntar este protótipo. Como você pode ver, estou usando esboço para prototipagem. Para aqueles que usam outros aplicativos gráficos como o Photoshop ou o Illustrator, não se preocupe. No final desta lição, fornecerei dicas para explicar como criar um protótipo básico com o Photoshop e usar o Adobe Acrobat. O que eu amo no esboço é que, você pode criar hotspots ou hotlinks que conectam telas para que pareça que um usuário está se movendo através de um fluxo de trabalho. A primeira coisa que eu quero fazer é selecionar um ponto de partida para o meu protótipo, indo até o menu e clicando na prototipagem, e selecione usar a prancheta como ponto de partida no menu suspenso. Isso garante que nosso protótipo sempre comece na tela correta sempre que você apresentar aos clientes. Como você pode ver, esta prancheta agora tem uma pequena bandeira indicando que este é o ponto de partida. Agora, vamos selecionar o ponto inicial da prancheta e clique na tecla 'H', que é um atalho para a ação hotlink. Isso é indicado pelo mouse, que agora foi convertido em uma seta ondulada. Isso significa que agora estamos prontos para começar a vincular alguns elementos e ficar interativos. Se você se lembrar, o usuário deve clicar no botão carregar meu arquivo de áudio para fazer upload de suas músicas. O que eu vou fazer é, arrastar uma área de hotlink em torno deste botão, começando do canto superior esquerdo e arrastando para o canto inferior direito. A área que você acabou de arrastar está realçada em laranja. Agora você pode ver uma cauda aparecer, que vamos usar para vincular à próxima tela no fluxo de trabalho. Se eu passar o mouse sobre a próxima prancheta, ela selecionará automaticamente para mim, conforme indicado pelo realce laranja. Quando alguém clica no botão carregar meu arquivo de áudio, ele será transferido para a próxima tela, que exibe o gerenciador de arquivos. Agora vou escolher a prancheta com o Gerenciador de arquivos. Como o usuário deve selecionar o arquivo aqui, especificamente o arquivo superior esquerdo, eu vou criar um hotlink clicando em H novamente sobre a imagem do arquivo, e arrastando a cauda para a próxima tela exibindo o arquivo realçado com o botão upload ativo agora CTA. partir daqui, quero que o usuário saiba que selecionou um arquivo, que fizemos na tela anterior. Eu quero que eles cliquem no botão upload agora CTA para carregar oficialmente o arquivo para o aplicativo. Vou clicar em H novamente, arrastar sobre o botão e, em seguida, vou escolher a próxima tela. Uma vez que a próxima tela tem um comportamento que não requer nenhuma interação, como clicar nela, vez que ela desaparece por conta própria após alguns segundos, este é um bom momento para falar com o cliente sobre o comportamento. Vou selecionar a prancheta inteira como um hotlink. Como expliquei ao cliente, que a tela de sucesso desaparece depois de alguns segundos e, eventualmente, exibe a tela final do fluxo de trabalho das últimas contribuições com o arquivo de áudio recém-adicionado. Com a última tela, eu não preciso criar nenhum hotlink, pois é aqui que o fluxo de trabalho termina, e nós fizemos nosso trabalho de melhorar o recurso de upload cruzando nossos dedos. Nós só queremos que o cliente veja o fluxo de trabalho através do protótipo simples, mas claro que acabamos de criar. Agora, vamos ver como é a visão de apresentação do protótipo, já que é isso que você apresentará ao seu cliente e isso é o que o cliente realmente verá. No esboço, temos uma maneira muito fácil de fazer isso. No canto superior direito, há um pequeno botão laranja que diz pré-visualização, que vamos clicar. Como você pode ver, ele vai direto para o ponto de partida Pranchboard que foi marcado com a bandeira. Esta é a janela que usaremos para apresentar ao nosso cliente, sobre a qual aprenderemos mais na próxima lição. Vamos testá-lo. O que o usuário vai fazer é, pousar nesta página e carregar seu arquivo de áudio. Você pode ver as mudanças do mouse quando eu passar o mouse sobre o botão principal de upload, e uma vez que eu clicar nele, ele nos leva para o gerenciador de arquivos. O arquivo que queremos fazer upload é chamado Cowbell, então selecionamos isso, e vemos que ele está destacado e o CT está ativo. Vamos clicar sobre isso e ver que ele foi bem sucedido, e vamos lembrar de explicar ao cliente que a tela de sucesso desaparece por conta própria depois de alguns segundos. Vou clicar em qualquer lugar na tela depois que eu terminar explicando e finalmente pousar na última tela, que é das últimas contribuições onde você acabou carregar Cowbell5 Mp3 para a peça de colaboração agora mesmo. Bom trabalho você. Para as pessoas que estão usando outros aplicativos para criar seus protótipos, como Photoshop ou Illustrator, meu conselho é ter cada tela semelhante ao que você acabou de ver no esboço como sua própria página, que pode então ser exportada como separada PDFs. Usando o Adobe Acrobat, importe todos os seus PDFs em um arquivo com todas as páginas na ordem correta, que você possa clicar nos botões de seta para se mover através de cada tela facilmente e, em seguida, basta conversar com seu cliente através do fluxo de trabalho uma vez que não será interativo. Na próxima lição, falaremos sobre apresentar aos clientes sem cometer erros novatos. Fique atento. 7. Apresentação para clientes: Ei, bem-vindo de volta. Você está na reta final. Na lição de hoje, vamos falar sobre apresentar aos clientes e evitar alguns erros novatos. Na minha experiência, aprendi que os clientes se importam mais com algumas coisas diferentes do que com outras, e vou compartilhá-las com você. Número um, o criativo. Este é o protótipo que você apresentará ao seu cliente com os recursos aprimorados que devem ser interessantes para eles. Número dois, o relatório. Isso deve conter insights de alto nível e dados de suas descobertas, e número três, as próximas etapas. Este é o lugar onde você propõe que o projeto deve ir. Ao apresentar o protótipo. Aqui estão algumas coisas que você pode querer ter em mente para sua apresentação. Alguns dos “Do”. Explique o tema geral do relatório e quais objetivos você estava tentando alcançar. Número dois, explique como conseguiu dados. Número três, explique a repartição dos dados em grandes pedaços, não muito granulares. Isso pode ser exibido através de gráficos, porcentagens e outros infográficos. Número quatro, chame observações significativas ou dados, como citações e uma pequena lista de observações interessantes que você coletou. Número cinco, embrulhe com algo positivo e encorajador para os clientes ficarem entusiasmados para os próximos passos. Agora, alguns dos “Don'ts”. Não use muito jargão da indústria. Eu evitaria usar muitos acrônimos também. Embora possa ser familiar para nós, talvez seja melhor encontrar outras maneiras de descrever esta lista, como acima da dobra, evento do mouse, FBO, o que significa apenas para colocação, análise heurística, hexadecimal, conformidade 508, responsivo, API, SVG, vetor, PNG, e muito mais. Você também vai querer explicar suas decisões de design enquanto você orienta um cliente através do protótipo. Você pode querer dizer algo como, Eu decidi usar este botão de cor porque ele era consistente com a interface do usuário ou você pode querer dizer, Eu decidi fazer este botão menor porque esta era uma ação secundária e eu Não quero distrair do CTA primário. Agora, na minha experiência pessoal ao apresentar aos clientes, descobri que os clientes gostam de certas coisas um pouco mais do que outras. Enquanto eles gostam de dados, muitas vezes as pessoas não gostam de digerir os próprios dados, então eles querem que outras pessoas façam isso por eles, então o que eu gosto de fazer é dar-lhes os dados, mas eu também gosto de lhes dar algo Senão, o feedback. Acho que os clientes adoram citações porque é algo com que podem se relacionar. Então, por exemplo, você pode dar-lhes uma cotação de um cliente que realmente se destacou para você, porque provavelmente ele vai se destacar para eles para. É isso, você foi ótimo. Na próxima lição, que é a lição final, vamos rever algumas conclusões e algumas conclusões. 8. Conclusão e takes chave: Oi, você conseguiu. Parabéns, por completar este curso. Você realizou algumas coisas incríveis nesta classe, como analisar a pesquisa UX, realizar sua própria pesquisa, enquadramento de fios, prototipagem e apresentar aos clientes. Espero que você possa sair dessa aula, com um sentimento de realização e confiança, que você pode enfrentar, seu próximo projeto de UX, de uma perspectiva bem arredondada. Aqui estão algumas coisas importantes, você vai querer lembrar para o seu próximo projeto incrível de UX. Antes de iniciar qualquer projeto de UX, certifique-se de entender os requisitos, metas e até mesmo limitações do projeto. Tente iniciar um novo estudo de usuário para adquirir novas informações sobre o projeto, especialmente se a pesquisa anterior tiver mais de seis meses. Enquadramento de fios não precisa ser chique. É mais importante, criar wire-frames básicos, ou esboços, e reiterar sobre essas idéias, ao contrário de gastar muito tempo, em um wire-frame sofisticado e demorado, apresentar informações de alto nível, para clientes, e linguagem não-jargão, com um protótipo, que é o mais próximo possível, do final. Por último, divirta-se com UX. Lembre-se de postar seu projeto, em ações de habilidades Galeria do Projeto, e lembre-se de seguir, me para ficar informado de mais aulas UX. Boa sorte em sua jornada para UX Maestery.