Projetando para o futuro: prototipagem de UI/UX

1. Trailer: Oi. Meu nome é Patricia Reiners, sou designer UX/UI com sede em Berlim. Meu foco é criar experiências interativas para o futuro para aplicativos online, mas também para dispositivos móveis. Consegui trabalhar com muitas empresas como Google ou Adobe, mas também startups, agências e empresas corporativas em todo o mundo. Meu trabalho está em constante busca de novas maneiras de explorar, projetar e resolver problemas para o futuro. Terei que compartilhar conhecimento por meio de palestras, workshops, mas também compartilho meu conhecimento por meio de podcasts, outras fontes e entrevistas. O podcast é chamado Future of UX. Quando estou projetando e resolvendo problemas para meus clientes, terei que construir protótipos rápidos e fáceis que precisam testar ideias rapidamente. Neste curso, você aprenderá como criar suas próprias idéias para interfaces do futuro em sua cozinha, como construir protótipos realmente rápidos e como testá-lo com usuários reais. Passaremos por todas as etapas do processo para que seja fácil para você acompanhar. Vamos falar sobre os conceitos básicos de prototipagem e vamos aprender métodos diferentes. Como projeto final, você construirá seu próprio protótipo para um objeto em sua cozinha. Qualquer um pode construir um grande protótipo. Você não tem que conhecer nenhuma habilidade especial e isso não envolverá qualquer codificação. Este curso é ideal para designers que acabaram de começar com design da experiência do usuário ou qualquer pessoa que esteja trabalhando em produtos digitais. Vamos começar. 2. Visão geral do curso e do projeto: Olá e bem-vindo ao curso prototipagem para futuras interfaces. Eu sou [inaudível] e sou seu instrutor para este curso. Estou na indústria de design há quase sete anos e trabalhei para muitos clientes diferentes para muitas startups, mas também para algumas marcas maiores como Google e IKEA. Durante meu tempo como presidente criativo na Adobe, eu explorei interfaces digitais e protótipos de muitos produtos para o futuro. Este curso fornecerá todos os contornos necessários para um protótipo de UX claro e produtivo. Você terá uma compreensão sobre como criar protótipos e testar suas ideias rapidamente, que ajuda você a tomar boas decisões de design, então ter a habilidade de construir bons protótipos é super valioso para cada designer. Isso irá ajudá-lo a obter empregos e economizar tempo e dinheiro de seus clientes. Vamos dividir o processo em etapas únicas para reunir os insights certos, o feedback certo no momento certo. Você vai trabalhar em seu projeto durante este curso, você vai encontrar um problema que você deseja resolver, esboçar a experiência do usuário, e testar se sua idéia realmente resolve o problema. Você pode trabalhar em seu próprio projeto ou simplesmente seguir as lições por conta própria. Eu também preparei uma planilha para você, então sinta-se livre para imprimir e usar isso durante todo o curso. Eu realmente integrou três exercícios ao longo de todo o curso e é super fácil de segui-los junto com a worksheet. Esta classe é ideal para designers, marketing, gerentes de produto, desenvolvedores e todos os envolvidos na criação uma ótima experiência de usuário e que querem ser capazes de testar suas ideias no início do processo. Você obterá uma compreensão mais rica de testar seu protótipo, o que o capacitará a projetar, avaliar e iterar sobre a experiência do usuário. Você definitivamente vai aprender muito durante este curso, mas você também vai se divertir muito. Posso prometer-te isso, por isso vamos. 3. O processo de design: Antes de começarmos com a prototipagem, quero compartilhar com vocês por que a prototipagem é tão importante no processo de experiência do usuário. O que é a experiência do usuário e por que a prototipagem é tão importante? experiência do usuário, UX curta, é a emoção e a atitude de uma pessoa sobre o uso de um determinado produto, sistema ou serviço. Quando estamos projetando produtos, é super importante ter certeza de que esses produtos estão realmente resolvendo um problema para o usuário e eles são úteis para o usuário. Caso contrário, o usuário não vai usá-lo, então realmente simples. Com um protótipo, você pode verificar isso no início para ter certeza de que você está seguindo o caminho certo. Se olharmos para trás, muitas equipes de design usaram o método da cachoeira. Esta é uma rua de mão única com pouco feedback e prototipagem incluídos. As equipes de design perceberam durante a última década que precisam ser outra maneira melhor de testar ideias primeiro e perceber no início do processo se as coisas funcionarem no final, porque com o método da cachoeira, uma vez que um está em fase de teste, é muito difícil voltar e mudar o que já esteve na fase de concepção. Nenhum software de trabalho é produzido até tarde durante o ciclo de vida tão alta quantidade de risco e incerteza. A abordagem de design centrada no ser humano é muito diferente porque o ser humano está no centro de todo o processo para todo o projeto e ajuda a lidar com feedback o mais cedo possível porque o usuário está envolvido em cada etapa do o processo. O interessante aqui é que essa abordagem é sobre melhorar toda a experiência ao longo de todo o processo, indo para frente e para trás e para frente novamente. Você inclui a pesquisa de usuários em várias etapas ao longo de seu projeto, então é muito importante para realmente ouvir o usuário e entender suas necessidades e desejos, e realmente entender o que os ajuda a prosseguir um tarefa específica ou geralmente entender suas vidas diárias. Isso ajuda você no final a projetar algo que o usuário realmente precisa. É um método não-linear, então você pode voltar para prototipagem de novo e de novo e de novo. Estou fazendo um monte de testes e prototipagem para diferentes projetos. Aqui você pode ver um protótipo que eu projetei para uma interface de realidade aumentada? O usuário poderia deslizar através de diferentes eventos, ou concordar em participar ou removê-los e funcionou muito bem com o primeiro protótipo de papel porque eu recebi alguns comentários e testes antecipados com os usuários. Muitos dos protótipos que estou construindo são muito futuristas e difíceis de construir , então prototipagem e testá-los primeiro é essencial. Isso pode ser interfaces para produtos, para realidade aumentada, para realidade virtual e debian, então até mesmo voz nessas interfaces e eu vou compartilhar sobre essas tecnologias imersivas em outro curso, mas neste curso vamos nos concentrar na prototipagem se é o mesmo método para qualquer meio que você usa. 4. Tarefa: ideação na sua cozinha: Já falamos sobre o tema deste curso, que é tudo sobre prototipagem para futura interface em sua cozinha. Sobre resolver um problema em sua cozinha para um objeto. Assim, a tarefa durante este curso será redesenhar uma interface em sua cozinha. Imagine eu sendo seu cliente e lhe dando o resumo, por favor, ajude o usuário a usar mais ingredientes frescos e produzir menos desperdício de alimentos. Eu me tornei super consciente do assunto e, sim, trabalhando com [inaudível] continua focando nessa área. Já falamos sobre o tema deste curso, que é tudo sobre prototipagem para o futuro, sobre a resolução de um problema em sua futura cozinha. A tarefa durante este curso será redesenhar uma interface na sua cozinha. Aqui está a tarefa. Vá para sua cozinha, leve sete minutos para realmente olhar ao redor, procure outros objetos que você usa em uma base diária, escolha um, você pensa, sim, que é o mais interessante e onde você acha que o maior espaço para pode acontecer e, em seguida, voltar e vamos continuar com a próxima seção. 5. Veja como eu trabalho: ideação: Espero que tenha encontrado um objeto interessante para você. Aqui estão alguns que você pode encontrar em geralmente todas as cozinhas. Sinta-se livre para escolher um desses, mas você está completamente livre. Você pode escolher um com uma interface ou mesmo sem uma interface e chegar a uma idéia completamente nova. Depois de escolher um objeto, vamos procurar problemas. Eu escolhi a geladeira. A tarefa agora é pegar post-its e anotar tantos problemas quanto você pode pensar. O que pode ajudar é pensar na última vez que você usou esses objetos e pensar no que deu errado. Leva o tempo que quiseres, mas posso recomendar-te cerca de 10 minutos. Vamos pegar alguns post-its e anotar todos os problemas que pudermos encontrar. Primeiro, às vezes você não consegue encontrar coisas na geladeira, isso é muito difícil. Às vezes você come algo que você planejou para outra refeição, ou o que poderia ser outro problema? Você não sabe o que você já abriu, então você abre algo duas vezes. As coisas vão mal porque você não sabe o que cozinhar com ele, com as sobras, por exemplo. Às vezes é muito caótico ou você esquece o que comprou e compra de novo, ou que fica na geladeira e você esqueceu completamente, ou que você acidentalmente come comida de seus colegas de quarto ou algo assim, que não é realmente seu. Vamos colocar todos os post-its na parede para termos uma melhor visão geral de todos os problemas que tivemos. Isso costuma ser muito útil. Vamos dar uma olhada em todos os problemas que tivemos. Aqui estão alguns problemas que eu tive. Vamos escolher um desses problemas agora. Sinta-se livre para escolher um dos problemas que você escreveu, mas você também pode usar um dos meus problemas Eu estou completamente bem com isso. Escolheu um problema? Como podemos resolver isso agora? Eu escolhi o problema que é realmente difícil para as pessoas verem o que está dentro da geladeira e, em seguida, chegar a receitas interessantes, mas eles podem fazer com as coisas que eles têm na geladeira, o que é realmente um grande problema. Muitas coisas voltam sem perceber isso. Você também pode trabalhar no mesmo problema, mas sinta-se livre para usar seu próprio problema ou seu próprio objeto. Escolher um objeto que você usa todos os dias torna mais fácil resolver um dos problemas. Nós vamos construir um protótipo e testar se a idéia que estamos chegando na próxima meia hora ou assim funciona. Não se preocupe com viabilidade, use sua imaginação. Trata-se apenas da inovação e do futuro. Agora vamos procurar ideias, como resolver esse problema com uma interface digital. Vamos pegar os post-its novamente e pensar em ideias. Talvez já tenhamos uma ideia em mente. Se não, basta pensar e pensar em tantas ideias quanto você puder. Vamos pegar os post-its e pensar em ideias. Por exemplo, poderíamos fazer fotos de nossos ingredientes e obter recomendações como o que fazer com isso. Podemos mostrar os ingredientes fora da geladeira, por exemplo. Podemos organizar a geladeira, para que seja mais fácil. Na verdade, temos tantas coisas que poderíamos fazer. Poderíamos personalizar as receitas em relação aos ingredientes. Pense em tantas ideias quanto você puder. Vamos colocá-los na parede. Minhas idéias são realmente muito, muito básicas, mas você também pode vir com algumas idéias futuristas muito legais também. Aqui estão algumas das ideias que tive. Eu estou indo para ir com a idéia realmente para mostrar os ingredientes fora da geladeira e, em seguida, ajudar o usuário a chegar com receitas interessantes, então algum tipo de um gerador de receitas inteligente. Minha idéia é, na verdade, integrar um recurso na geladeira com o qual o usuário pode ver do lado de fora o que está na geladeira, e então seleciona as receitas que eles realmente querem para todo o processo de cozimento, e pode selecionar os diferentes ingredientes que eles querem integrar lá. 6. O que é prototipagem?: Antes de começarmos a construir o nosso protótipo, com a nossa ideia que temos em mente, vamos falar brevemente sobre os conceitos básicos da prototipagem. Protótipos irão ajudá-lo a demonstrar e comunicar suas idéias com os outros. Este pode ser seus colegas, partes interessadas ou usuários para testes de usuários e ajuda você a economizar tempo e dinheiro porque você não precisa construir todo o produto, mas começar com um protótipo simples e barato. Você pode testá-lo e aprender muito antes de realmente construir o produto final. Não se preocupe, se você não é um designer, qualquer um pode construir um protótipo rápido e assim você não precisa de nenhuma habilidade especial para isso. O que é prototipagem rápida? A prototipagem rápida é um processo iterativo. Isso significa que é repetitivo. O processo é usado para visualizar a aparência de um site ou aplicativo, a fim de obter feedback e validação de usuários, partes interessadas, desenvolvedores e designers. Quando ele é usado bem, prototipagem rápida irá melhorar a qualidade de seus projetos, melhorando a comunicação entre as várias partes reduzindo o risco de construir algo que ninguém quer dizer assim realmente simples. O que você precisa para prototipagem? Um protótipo não é projetado para ser uma versão totalmente funcional de um sistema, mas destina-se apenas a ajudar a visualizar a experiência do usuário do produto final. Como parceiro do Google Venture Design, Daniel Burka diz, “o protótipo ideal deve ser a qualidade Cachinhos Dourados”. Se a qualidade for muito baixa, as pessoas realmente não vão acreditar que o protótipo é um produto real. Se a qualidade é muito alta, você vai trabalhar a noite toda e você nunca vai terminar provavelmente. A qualidade não deve ser muito alta, não muito baixa, mas apenas certa. Você pode criar protótipos não apenas telas, aplicativos ou sites, mas quase tudo. A prototipagem é um excelente método para testar projetos. Seja qual for o projeto que você está projetando Você já pode começar a pensar sobre o tipo de telas ou interfaces que você precisa para integrar em seu protótipo e realmente testar sua idéia. 7. Exemplos de prototipagem: Vamos dar uma olhada rápida em alguns exemplos. Aqui, por exemplo, você vê alguns protótipos que McDonald's realmente fez. Seus funcionários de cozinha ao longo de uma quadra de tênis vazia. Eles usam giz para mapear todos os arranjos possíveis para os restaurantes, várias aplicações de culinária e estações de preparação. Este foi realmente um teste de usuário super essencial. Eles testaram dessa forma, o que foi mais eficiente e o melhor layout para acomodar todas as pessoas. Outro exemplo realmente grande é a invenção do aspirador Dyson porque o inventor realmente fez cerca de 500 protótipos antes do resultado final que eles venderam. 8. Métodos analógicos de prototipagem: Temos um problema, temos uma ideia para resolver isso, então vamos falar sobre métodos de prototipagem. Existem realmente muitos métodos diferentes lá fora, uma vez que há literalmente um número infinito de maneiras que você pode construir esses alguns protótipos, e eu vou guiá-lo através de diferentes métodos analógicos. Agora, vamos começar com realmente fácil uma vez, então será muito bom para você entrar no tópico. Usando esses métodos irá ajudá-lo a iniciar seu processo de construção sobre esses protótipos, a fim de enfatizar com seus usuários, decidir sobre isso e refinar suas idéias e testar suas soluções, todas as coisas que já aprendemos em seus capítulos passados. Mas a coisa mais importante sobre seu protótipo é que você constrói um com o qual o usuário possa realmente interagir e fornecer as informações que você precisa. Nós vamos trabalhar em uma interface agora, e especialmente para produtos digitais como aplicativos móveis, sites e serviços web, bem como outros produtos ou experiências baseados em tela, muitas vezes é necessário criar uma variedade de métodos de prototipagem para testar o projeto final e desenvolvimento. Vamos começar com protótipos de papel. As interfaces de papel são úteis nos estágios iniciais da prototipagem para produtos digitais, e você pode criar protótipos de papel desenhando-os ou desenhando e recortando partes utilizáveis de uma interface, como o campo de texto, ou uma gota menu para baixo, etc É realmente fácil e a maneira perfeita de começar. Jakob Nielsen, co-fundador do Grupo Nielsen Norman, explica que os protótipos de papel são extremamente fáceis e baratos de produzir, por quê? Eles podem fornecer muitos insights que podem ajudá-lo a economizar dinheiro no final. Ao projetar produtos digitais, você pode ser tentado a criar protótipos super detalhados diretamente em seu computador e começar a negociar esses problemas imediatamente. Mas o que é realmente útil é realmente interfaces de papel. No entanto, você pode descobrir muitas áreas de melhoria, como problemas de usabilidade, por exemplo, ou até mesmo melhorar as ideias inteiras ou repensar toda a estrutura. É incrível para os estágios iniciais, e ele realmente evita perder qualquer tempo ou que produza muitos custos. A segunda coisa é o storyboard. É outra técnica ótima e fácil desenhando um storyboard. Contar histórias é uma excelente maneira de guiar as pessoas através de uma experiência de usuário, e storyboard é a técnica derivada da indústria cinematográfica. É algo que você pode usar para prototipagem precoce para permitir visualizar a jornada do usuário, ou como os usuários enfrentariam um problema ou um produto, por exemplo. Ao desenhar um storyboard, tente imaginar a experiência completa do usuário e, em seguida, capturá-la em uma série de imagens ou esboços. Posso recomendar que cerca de seis esboços sejam realmente úteis. Storyboarding como um método de prototipagem garante que conhecemos nossos usuários bem o suficiente. Caso contrário, não será difícil esboçar um storyboard. Ele nos permite ter em mente o contexto das soluções que estamos projetando. É muito útil para o desenvolvimento e melhor compreensão dos usuários e para gerar ideias e discussões de alto nível. Mas storyboards no entanto, não são muito úteis para ajustar os detalhes dos produtos, porque o desenho tende a ser mais como microscópico, então um pouco maior. Aqui você pode ver um storyboard que eu inventei. Como você pode ver, eu desenhei seis passos simples, assim como em post-it, super simples e super rápido. Desde o usuário comprando produtos no supermercado, colocando tudo na geladeira, e depois fazendo anotações da geladeira e da interface, o que ele realmente colocou dentro da geladeira, e então o problema ocorre onde as coisas do usuário como, “O que devo comer?” Então aqui você já pode encontrar as soluções onde ele obtém receitas fora da geladeira, que ele pode cozinhar. Então, no final, usuário feliz para que ele cozinhe algo que ele realmente gosta com ingredientes que você tem na geladeira. É uma maneira de fazer isso. Vamos ao ponto número três, que é Lego. Todos nós sabemos que isso foi desde a nossa infância, eu acho. Integrar alguns problemas físicos pode ser super útil para visualizar uma idéia, e Lego é realmente uma maneira incrível de fazer isso. A melhor parte de usar Lego é construir seus protótipos, é que eles se tornam fáceis de entender e twick. Simples separar uma parte de seus protótipos Lego rapidamente aqui, criar um design alternativo e jogar com ele para ver como ele funciona. Ponto número quatro é RPG. Se a sua solução para o problema for um serviço e não se concentrar muito em uma tela ou uma interface, e você pode declarar uma jogada de papéis e definir a tela para o cliente de uma forma que ele possa experimentar peças específicas, a melhor maneira de fazer isso. Role-play é super útil. Ponto número cinco, são modelos físicos. Se suas idéias de produto físico, por exemplo, um novo produto ou protótipo físico super-útil. O objetivo de um modelo físico é trazer uma idéia intangível ou esboço bidimensional em um plano físico de placas tridimensionais. Isso permite um melhor teste, recusa editar discussões Ginsburg sobre o fator de forma da solução. Aqui você pode ver um protótipo que eu projetei para uma mochila alguns anos atrás. O Mágico de Oz é uma ótima maneira de testar seu protótipo. Talvez você já conheça a história do Mágico de Oz. A maneira mais fácil de realizar o teste de Wizard of Oz é construir um protótipo simples e fácil de usar que permite que o assistente reaja rapidamente aos gestos do usuário são realmente projetado resposta de um único clique, por exemplo. protótipos do Mágico de Oz são protótipos com funções falsas. Por exemplo, a interatividade que vem de um humano em vez de um algoritmo ou código de software com os usuários acreditando que este último é o caso. Você pode usar isso para testar com seus usuários. Por exemplo, se você estiver prototipando um design de voz ou interação específica, e o Wizard of Oz estiver realmente funcionando assim um usuário clica em um botão específico, mas na verdade não há nenhuma funcionalidade por trás disso, mas alguém no fundo realmente fornece a informação. Isso é muito útil e muito fácil de testar suas ideias. 9. Tarefa: prototipagem de papel: Você pode construir um protótipo para ele. Eu fiz desenvolvimento, por exemplo, mas também para a comunicação para alinhar a visão da idéia de sua equipe de design, por exemplo, porque às vezes você está falando sobre a mesma coisa, mas descobrir que você está realmente falando completamente sobre ideias diferentes. Então você também pode comunicar sua idéia para; poderia ser um colega ou alguém iria trabalhar para um cliente muito mais fácil com um protótipo do que com uma descrição escrita de uma idéia. Então aprendendo e testando. Se você criar um protótipo para aprendizagem, certifique-se de construí-lo de forma que a área de teste realmente o ajude a entender e obter as informações de que você precisa. Começamos procurando as necessidades dos usuários e depois pensando em possíveis soluções. O que é realmente importante é sempre certificar-se de perguntar a si mesmo do protótipo realmente verifica a necessidade do usuário. Por exemplo, se a sua suposição no início foi que usuário desperdiçar muita comida porque eles não sabem o que cozinhar com as sobras, e a suposição é que uma ferramenta onde você pode obter receitas ajustadas para a comida que você tem em a geladeira, boa esperança, você pode verificar essas suposições, na verdade, construindo um protótipo de papel onde você pode mostrar os ingredientes e tudo o que está dentro da geladeira, fora com receitas específicas e em seguida, convidar pessoas para testar o seu protótipo e vê-los e ouvir, fazer a pergunta certa. Então aqui vem a tarefa para você. Pense nas telas e nas informações que você precisa para protótipos de sua ideia. Você pode desenhar telas diferentes e construir seu próprio protótipo de papel projetando uma única tela. Pense sempre nas interações e em que tipo de informação você realmente precisa para mostrar sua ideia. Eu vou colocar minhas idéias, então fique à vontade para assistir e pegar todas as informações que você precisa. Minha idéia é realmente usar uma geladeira inteligente, que mostra outros ingredientes que estão no interior e no exterior. De modo que ajuda as pessoas realmente a não esquecer sobre a sua comida e também fornecer receitas para os ingredientes que estão dentro da geladeira. Então isso mostra quais ingredientes precisam ser comidos primeiro e chegar a receitas realmente boas que o usuário gosta. Então vamos ver como isso vai correr. Vamos começar. 10. Trabalhe comigo: prototipagem de papel: Vamos começar com o protótipo de papel. Eu costumo começar, na verdade, pensando sobre o tipo de telas que eu preciso. Eu definitivamente preciso de alguma tela com para tela inicial ou para todas as informações básicas que o usuário vê primeiro. Então eu preciso de uma tela com a seleção de receitas porque a principal característica deste será realmente que o usuário recebe receitas personalizadas com as coisas na geladeira. Então também, algo onde o usuário pode ver a receita, através do selecciona da receita, como isso se parece. Vou começar com essas três telas e agora pensar sobre os elementos que eu preciso em cada uma dessas telas, ou folha de papel no momento. A primeira característica será realmente que, você vê que tipo de ingredientes você tem fora e também ver quando ele expira. Quando precisa ser comido? Você poderia fazer isso com algum código de cores. Também refletirá papéis diferentes e eu vou fazer que referências aqui, por exemplo. Se os ingredientes podem ser comidos em mais de uma semana ou em uma semana ou em um ou dois dias. É urgente comer isso e então eles são colocados nas diferentes fileiras. Estou usando post-it. É bom movê-los e tudo mais. Também é muito útil para os testes mais tarde. Você pode ver, eu estou apenas desenhando alguns ingredientes e seu queijo, por exemplo, e colocando-os em linhas diferentes aqui. A outra característica é o gerador de receitas. É um nascido muito importante, onde o usuário pode escolher outras receitas e, em seguida, recebe post-suas receitas. A ideia é que eles possam colocar os post-its nessas áreas no final. entrada digital parece, é claro, um pouco diferente. Então você tem configurações. Você também pode fazer algumas configurações na seleção da receita. Botões, claro, criar sua receita. Minhas configurações seria dificuldade, e tempo e também a possibilidade de adicionar outros ingredientes que provavelmente não estão na geladeira, por exemplo. Em seguida, adicione mais ingredientes se for mais do que três. Se você quiser integrar quatro, ou cinco, ou seis ingredientes, ou ainda mais. Aqui, ingredientes que não estão incluídos na geladeira no momento. O próximo é pensar sobre como seria uma lista. Se o usuário começou a criação da receita e recebe alguma lista e agora, eu estou pensando sobre como isso deve ser parecido. Eu definitivamente preciso de uma imagem da receita e, em seguida, o nome poderia ser Ratatoiue, por exemplo, dificuldade, tempo, bem, os ingredientes e pequena imagem, como isso parece e, claro, algo onde você pode preencher outras receitas. Eu poderia kludge ações, um botão onde eu poderia começar a cozinhar essa receita imediatamente. Em seguida, outra receita que poderia ser, por exemplo, macarrão com legumes e, em seguida, o mesmo tipo de informação aqui, o mesmo botão e enviar isso. Seria alguma lista com também a opção de mais informações se você quiser ver os primeiros passos antes de decidir que você quer cozinhar isso. Você pode ver que são funções básicas. Eu não indiquei tudo aqui, mas apenas o básico, que é como criar uma personalização de receita inteira realmente parece no final. Então eu também estou pensando sobre como tela seria semelhante se você selecionar uma receita. Que tipo de informação você precisa? Vou pensar em Ratatoiue, por exemplo, e pensar em que tipo de informação preciso. Começo com os mais básicos. Claro, eu estou integrando o que eu já fiz algo com outros cartões. Você pode ver com dificuldade e tempo e os ingredientes que também afetam os diferentes passos de cozimento que você faz para preparar isso com também algumas imagens. Sim. Além disso, alguns elementos de navegação, muito importante. Não se esqueça disso. Então vamos embora. 11. Adobe Xd: como criar wireframes digitais: Prototipagem digital, esta lição é apenas opcional. Você não precisa projetar um protótipo digital para testar sua ideia, mas se quiser, podemos fazer isso juntos agora. Você decidiu que nível você está agora. Hoje vamos usar o Adobe XD. Se você decidir que deseja digitalizar seu protótipo, se quiser usar outra ferramenta de design, fique à vontade para fazer isso. Tudo o que você se sentir familiarizado com, mas eu recomendo o Adobe XD porque é gratuito e você pode simplesmente baixar muito facilmente. Vou guiá-lo através desses três passos. Primeiro vamos projetar todos os elementos, depois vamos colocá-los no iPad e projetar as telas de sinal, então vamos protótipos. Por que os diferentes elementos estão juntos? Que é realmente interativo. Depois de baixar a versão gratuita do Adobe XD em adobe.com, vamos adicionar alguns recursos que serão o kit de interface do usuário wireframe. Você pode encontrar que aqui acabou de baixar gratuitamente, Eu já baixei, Eu não vou fazer isso novamente. É grátis e realmente incrível ajuda você muito no caminho eu diria. Em seguida, abra seu primeiro documento, tamanho do animal de estimação iPad, qualquer que seja o tamanho que você vai usar para os testes, eu vou usar meu iPad. Então eu vou abrir o kit wireframe UI e salvá-lo na nuvem, isso é muito importante porque nós vamos conectar isso com nosso design agora. Eu defini isso na nuvem e então eu vou voltar para o meu documento, e eu acabei de abrir e eu inseri, integrou o kit wireframe UI aqui no lado, Eu tenho todos os elementos agora no meu documento original que é realmente incrível. Vamos começar, estou começando com a tela inicial e projetando todos os elementos básicos. Primeiro, eu estou começando com a comida que está na geladeira onde eu quero integrar diferentes linhas onde você pode ver quando ele realmente expira. Se for mais de uma semana, se for dentro de uma semana ou se for apenas em dois a três dias, então é urgente e então todos os itens são colocados lá automaticamente, é muito legal para o usuário ver o que realmente precisa ser comido primeiro. Então eu quero integrar algumas coisas botões com todos os diferentes alimentos e legumes e como um pequeno ícone. Abaixo, eu quero integrar o gerador de receitas onde as pessoas usam um lugar que são alimentos diferentes lá, três itens diferentes ou talvez até mais e, em seguida, eu crio, recebe uma boa receita, uma receita interessante que realmente se encaixa nisso. Eu vou tipo de três e, em seguida, adicionar um sinal de mais para que eles possam integrar talvez mais de quaisquer ingredientes que eles têm, e também um botão. O que você pode fazer agora é usar a biblioteca ou criá-los por conta própria para que seja realmente sua decisão, e então eu também vou querer integrar alguns ícones aqui, eu baixo-os no flaticon ou nos não projetos. Apenas certifique-se se você vender isso ou se você realmente dá esse desenvolvimento total, você precisa pagar por esses ícones, mas você pode baixar alguma versão gratuita para apenas testar isso e verificar se ele realmente parece bom, mas no pré-natal, pague por isso. Vou fazer isso com toda a interface agora. Quase terminado, eu fui para o modo protótipo e conectei tudo juntos por isso é clicável e eu realmente posso deslizar através de todos os slides e clicar em todos os botões, que é clicável. Preciso testar isso agora no meu iPad. Isso já está funcionando muito bem, eu preciso projetar todas as telas diferentes, ficar bem. Agora falamos muito brevemente como podemos fazer isso interativo. Isso é super fácil, depois que projetamos todos os elementos na prancheta, podemos mudar para o protótipo, isso está no canto inferior esquerdo. Em seguida, selecionamos um elemento que realmente queremos fazer clicável, obtemos este pequeno fio e movemos isso para a prancheta, que será o nosso destino, nessa prancheta um ingrediente é colocado na pasta de dados. Podemos fazer alguns ajustes no lado e o gatilho que temos. Queremos tocar no gatilho e, em seguida, como realmente queremos que a interação seja? Nós usaríamos todos os animates para que ele se mova automaticamente do outro para o outro estado, ele vai parecer que no final, funciona muito bem. Agora, para o teste, eu posso recomendar que você baixe o aplicativo gratuito Adobe XD, você pode definitivamente fazer isso super facilmente em seu dispositivo, qualquer tipo de dispositivo que você está usando, você pode ver que tudo é interativo. Vamos resumir este aplicativo realmente brevemente, aqui estão as principais dicas e truques como usar a ferramenta de prototipagem digital como o Adobe XD. Primeiro você realmente começa com o design de todos os elementos, então todos os elementos que você precisa, isso pode ser um botão ou uma barra de abas, ou um campo de entrada ou qualquer tipo de elementos que você usa. Ambas as coisas que você já desenhou em seu protótipo de papel, em seus esboços. Então você já os colocou em uma prancheta, você se certificar de que seu lugar na posição certa para que toda a prancheta realmente parece muito certo, você projetar todos os diferentes cenários também. Então o último passo é fazer isso interativo, realmente entrar no modo protótipo e conectar todos os elementos diferentes juntos, torná-los interativos. Isso é super fácil, basta selecionar um dos elementos que será a coisa, mas você pode clicar em e, em seguida, mover o fio para a saída, na verdade é o destino. Em seguida, você pode selecionar o tipo de interação, por exemplo, arrastar e soltar ou interação de voz ou um toque ou algo assim, você também pode alterar ou personalizar o modo de interação. Isso pode ser automatizado no máximo, automaticamente do outro através da primeira para a segunda posição, ou outros pontos de interação diferentes. Isso é super fácil e você tem um resultado muito bom, com pouco trabalho. 12. Adobe Xd: como criar wireframes analógicos: Você também pode integrar seu protótipo de papel fazendo uma imagem e colocando-a no quadro de arte. Basta começar tirando fotos de seus slides protótipos de papel e de todos os diferentes estágios. Em seguida, basta colocá-los no Adobe XD e colocá-los nas placas de arte individuais. Isto é o que eu fiz aqui. Você pode ver todas as páginas. Então eu os coloquei no quadro de arte, e ajustei um pouco o tamanho. Eles apenas refletem todos os diferentes estágios. Vamos mudar para o modo protótipo. O que você pode fazer agora é apenas desenhar um retângulo sobre a área que você realmente deseja animar e remover a cor, e fundo, e tudo mais, ir para o protótipo, e então usar este pequeno fio e conectá-lo a outra saída. Faça isso com todas as suas telas individuais. Tudo o que você quer ter interativo, o mesmo que os tomates aqui. Vamos mover as cores novamente, mas os retângulos permanecem lá. Então vá para o protótipo e mova isso para o outro quadro de arte. Você está fazendo isso com tudo. Quase pronto. Vamos testar isso muito rápido. Posso clicar nessas coisas. Ele quase funciona como um protótipo digital com apenas [inaudível] tela, então isso é simples, perfeitamente. Ótimo, então isso funciona. Vamos resumir isso muito brevemente. A primeira coisa é que você faz uma imagem do seu protótipo de papel. Os elementos interativos são as coisas que você pode realmente mover. Você precisa tirar fotos diferentes de todas as diferentes possibilidades, com os diferentes ingredientes, por exemplo, nos lugares. Depois disso, você insere essas imagens no Adobe XD e as coloca em um quadro de arte. No final você tem todas aquelas placas de arte sem elementos digitais, mas imagens [inaudíveis] do protótipo de papel. Ponto número 3 é na verdade que você desenha retângulos transparentes nos lugares que são interativos, e então você conectá-los juntos. Isso significa que você vai para o protótipo, seleciona esse retângulo transparente e, em seguida, seleciona a placa de arte de destino, que é clicável extra. Então, quando você testar isso, vá para o modo de visualização, clique nesse pequeno botão de reprodução. Você pode ver que quando você clica nesse retângulo transparente, você vai automaticamente para o outro quadro de arte. É interativo, embora ainda seja um protótipo. Super bom protótipo de algo, realmente fácil sem muito tempo e esforço. 13. Como preparar testes com usuários: Neste capítulo vamos falar sobre como realizar testes de usuários e coletar feedback. Quando você testa seu protótipo, é tudo sobre fazer as perguntas certas. Deixe-me compartilhar algumas dicas e truques antes de começar com nossos próprios testes de usuário. Na verdade, existem algumas dicas e truques simples que ajudam as pessoas a se sentirem confortáveis e a falar sobre o que precisam, o que querem, o que estão pensando. Mas antes de entrarmos nisso, vamos falar sobre como planejar e se preparar para o teste do usuário com seu protótipo. Vamos falar sobre com quem testar, onde encontrá-los e também como torná-los confortáveis para obter feedback valioso. As primeiras coisas primeiro, quem. Decida com quem você deseja testar o protótipo. No início, é realmente fácil testar com amigos, familiares ou colegas. Bem, eu recomendaria você para este projeto. Olhe ao redor, se você tem um amigo ou familiar com quem você pode testar, apenas certifique-se de que eles estão relacionados ao tópico. No mundo real você provavelmente recrutaria usuários reais. Mas aqui também funciona com o seu círculo íntimo e amigos e familiares. Onde, onde você vai encontrar seus usuários? Pense também sobre o ambiente em que você deseja testar. Poderia estar em um laboratório, poderia estar na rua, talvez no escritório, mas para este projeto faz sentido fazer os testes onde tudo está acontecendo, a cozinha. Vamos falar sobre a preparação bem rápido. É realmente útil ter algumas perguntas preparadas. Eu preparei uma folha inicial para você, então sinta-se livre para usar esta para a preparação, e preparar as perguntas nessa planilha. Vamos passar por cada uma das etapas muito rápido. Sinta-se livre para imprimir a planilha que eu preparei para você e usar as páginas 3 e 4 para o teste do usuário. Isso será muito útil para você escrever a pergunta. Há também algumas áreas para tomar notas. Isso será super útil, mas vamos passar por cada um dos quatro passos juntos agora. Primeiro, o que é fornecer contexto. Os participantes precisam olhar para o protótipo da perspectiva certa. Antes de eu estar realmente mostrando a eles o protótipo, eu geralmente vou fazer algumas perguntas, simples de configurar o próximo para ter certeza de que eles estão se aproximando da mentalidade certa, fazendo essas perguntas, mesmo aquelas que eu conheço a resposta para, Eu preparo os participantes para a próxima série de tarefas. Imagine que você quer fazer isso e aquilo. Imagine que você está com fome e você quer cozinhar algo, o que seria mais importante para você saber, por exemplo. Segundo, obter as primeiras impressões. Pergunte ao usuário sobre as primeiras impressões. Qual é a primeira coisa que chama sua atenção naquele protótipo nessa interface? O que acha que pode fazer com essa interface? Ponto número 3 é observar. Dê-lhes uma tarefa. Por exemplo, criar uma receita nessa interface porque eles estão com fome e, em seguida, observá-los e realmente responder às perguntas o que os distrai da conclusão? O que os confunde e também, quão rapidamente eles vão estar realizando a tarefa? É muito importante, especialmente a observação é uma coisa super valiosa. Quatro, feche com algumas perguntas finais. Antes de concluir a entrevista, algumas perguntas finais para se certificar de que tem todas as informações necessárias. Isso poderia ser, essa interface seria útil para você e por quê? O que mais seria útil para você? Está esquecendo alguma coisa? O que você faria normalmente para fazer algo assim para completar essa tarefa? Além disso, o que te surpreendeu? Geralmente, é muito importante perguntar muito por que realmente entender o que eles estão pensando e sentindo. Aí vem a tarefa para você. Agora é a hora de testar seu protótipo. Você pode testar isso com seu protótipo de papel, mas também com seu protótipo digital. Sinta-se livre para usar a planilha que eu preparei para você, sinta-se livre para baixá-la e se preparar para a entrevista antes de começar. Anote as perguntas que você quer fazer, decida com quem você quer conhecer e, em seguida, configure tudo para o teste e não se esqueça de fazer anotações. Seja o que for que você está percebendo fazendo o teste anote e vamos falar após suas sessões de teste e pensar sobre os próximos passos. Vamos começar. 14. Considerações finais: destaques e dicas: Agora é um ótimo momento para ajustar seu protótipo. O que você aprendeu no teste do usuário? Algum feedback? O que não funcionou? Quando eles usam algumas áreas realmente não entendem, isso não é um problema em tudo. Você pode apenas melhorar o protótipo e repetir o teste depois disso. Em seguida, você pode passar para o próximo nível através de enquadramento ou design de interface do usuário, mas este é outro curso. Tenha em mente que os melhores designers não recebem o protótipo perfeito na primeira vez. É mais rápido, mas não perfeito. perfeccionismo não é a abordagem certa. feedback é a coisa mais importante, cedo e frequentemente, então certifique-se de que você está trabalhando para os mesmos problemas. O que aprendemos neste curso? Aprendemos, na verdade, muito. Aprendemos sobre os conceitos básicos da prototipagem. Aprendemos sobre os diferentes métodos de prototipagem, analógicos e digitais, e construímos nosso próprio protótipo e testamos. Uau, isso é realmente muito. Você pode estar absolutamente orgulhoso de si mesmo por ter completado este curso. Algumas vezes, por exemplo, se você está colaborando com pessoas de outras equipes, posso recomendar algumas ferramentas. Por exemplo, Miro. Essa é uma ferramenta muito legal para fazer sessões postadas remotamente, isso é incrível. Ou eu posso recomendar que você Zoom para teste de usuário remoto, isso também é realmente incrível. Pessoal, essas são as últimas palavras. Mal posso esperar para ver seus protótipos. Eu não posso esperar [inaudível] que idéias você está inventando. Estou super animado para ver isso. Muito obrigado por fazer este curso. Foi super divertido e realmente incrível. Você pode estar absolutamente orgulhoso de si mesmo que você concluiu este curso, e vejo vocês em breve caras. Muito obrigado por fazer o curso.