Fazendo um protótipo de papel para aplicativos móveis

1. Introdução: Olá. Bem-vindos à minha aula de prototipagem de papel. Meu nome é Maddie Runa e sou consultora freelance de design de UX em Seattle, Washington. Achei que a prototipagem de papel era um passo muito importante no processo de design para mim e estou muito animado para compartilhar meu processo com todos vocês. Às vezes, pode parecer um pouco tolo testar sua ideia de aplicativo fazendo com que as pessoas toquem em um pedaço de papel. Mas a prototipagem de papel é muito mais rápida do que zombar da ciência do pescador e do esboço ou da Figma. Ele pode ajudá-lo a detectar problemas desde o início, antes que você tenha investido muito tempo trabalhando em seu design. Nesta aula vamos passar por cima de como fazer um protótipo de papel passo a passo. Certifique-se de postar seu trabalho na galeria enquanto vamos para que você possa obter feedback útil de seus colegas. Os comentários antecipados podem ajudá-lo a evitar alterações dispendiosas mais tarde. Estou muito animada para ver o que você vai fazer. 2. Primeiros passos: Quando você deve fazer um protótipo de papel? Não há um processo de design firme que deve ser seguido sempre. Mas eu gosto de usar protótipos de papel depois que eu tive a idéia, descobri o fluxo de usuários e esboçar minhas idéias iniciais na tela. prototipagem de papel aqui permite que você obtenha uma rápida verificação de pulso se a idéia faz sentido, e pode ajudá-lo a detectar problemas fundamentais antes de mergulhar em wireframe e sketcher Adobe. Vamos dar uma olhada nos esboços que fiz para o nosso projeto. Estes são os esboços ásperos que fiz para esta aula. Este apenas um aplicativo que eu realmente rapidamente inventou. Novamente, esta classe não é sobre o que faz um bom aplicativo e como projetar um aplicativo. Não estamos pensando nisso. Vamos usar isto para basear os nossos protótipos. Este aplicativo é para basicamente rever e recomendar programas e filmes em diferentes serviços de streaming. É bem simples. Só tem três abas. O primeiro é navegar, então ele só mostra diferentes categorias, coisas que são mais bem avaliadas. Você pode filtrar e pesquisar qualquer coisa. Estes são todos os mosaicos de imagens dos diferentes programas semelhantes à aplicação Netflix. Se você tocar em um, ele irá levá-lo para a página de detalhes onde você pode ver coisas como nome, classificações gerais. Você poderia escrever sua própria crítica. Se ele for revisado por algum dos amigos da sua rede, você pode ver isso aqui. Você pode percorrer e lê-los e, se você estiver interessado, então você pode salvá-lo para mais tarde. A navegação é apenas para navegação. Isto para você ter. A segunda é coisas que você salvou para si mesmo, coisas que são recomendadas para você e coisas que você assistiu ou visualizou recentemente. Depois a aba social. São coisas que seus amigos assistiram recentemente. Você pode ver coisas que são populares entre sua rede social, coisas que foram revisadas por pessoas em sua rede. Então você também pode filtrar o abuso por amigos específicos. Digamos que sua melhor amiga estava assistindo a um programa que ela gostava muito, mas você não se lembrava do que era. Você poderia apenas encontrar o nome deles aqui e tocar nele e ver diferentes críticas que essa pessoa foi escrita. Sim, é muito simples, apenas três guias. Mais uma vez, muito semelhante ao aplicativo Netflix, o que seja. Sim, vamos basear nosso protótipo de papel nesses esboços iniciais. 3. Configurar: É assim que o meu protótipo acabado se parece. O seu pode parecer assim, ou pode parecer um pouco diferente. Esta aula é um guia, então, se você tem suas próprias idéias ao longo do caminho, eu realmente encorajo você a ser criativo e experimentá-las. Você pode encontrar imagens do meu protótipo acabado na seção de recursos da classe, juntamente com os esboços ásperos que você vai precisar como você começar a fazer seu protótipo de papel, você vai querer usá-los como uma referência. Você também vai precisar de um par de materiais próprios para fazer seu protótipo de papel e eu vou passar e mostrar-lhe o que são esses. Você quer ter papel, papel impressora normal funciona muito bem ou você pode usar como papel gráfico. Eu, pessoalmente, gosto de usar um gráfico escuro. Para lápis, eu realmente gosto de asas pretas porque enquanto eles não rolam, mas eles também têm borrachas substituíveis que é bom porque eu sinto que eu sempre usar uma borracha fina antes que o lápis é realmente para fora. Você também quer ter uma boa caneta. meu favorito é o Pilot V-5, só porque sinto que escreve muito bem, não deixa uma mancha. Como vamos adicionar cor aos protótipos, você também precisará de marcadores de lápis de cor. O que quer que você queira usar é totalmente sua preferência ou o que eu costumo usar. Você pode querer ter um afiador na mão porque isso pode ser muito útil também e, em seguida, usar um marcador cinza claro para adicionar cor de fundo pode ser um toque agradável às vezes se você está tentando mostrar profundidade, mas totalmente não Necessário. A última coisa que você vai querer é definitivamente um par de tesouras e pouco de fita, porque você definitivamente estará cortando seus protótipos fora e se você quiser fazer edição, você às vezes acaba gravando coisas em cima. Eu quero ter certeza de tê-los também e depois que você tiver reunido todos os seus materiais, você estará pronto para começar a fazer um protótipo de papel. 4. Templates de dispositivos: Quando você faz um protótipo de papel para um aplicativo, não é terrivelmente realista, obviamente você afogá-lo. Eu praticamente sempre fazê-los dentro de um modelo de dispositivo apenas para dar-lhe um olhar um pouco mais realista, que é bobagem porque ainda é obviamente papel, mas eu sinto que ele só ajuda a colocar o participante em um pouco mais do que a mentalidade de usar um aplicativo em vez de olhar para um desenho. Você pode encontrar modelos de dispositivo on-line que você pode imprimir ou você pode fazer o seu próprio. Se você não vai imprimir seus modelos de dispositivo, o que é totalmente bom, então você vai fazer o seu próprio, que é como eu costumo fazê-lo. Acontece que eu tenho um desses estênceis do iPhone, que é muito bom, mas se você não tiver um, tudo bem, você pode apenas rastrear seu telefone, mas estes estão disponíveis na Amazon, eu acho que paguei $9 por isso, Então eles são muito bons de ter, mas novamente, se você não tem, você pode ir em frente e colocar seu telefone no papel e rastrear em torno dele, que foi o que eu fiz antes de receber isso, e funciona muito bem. Se você estiver usando seu telefone ou o estêncil, basta colocá-lo direito e rastrear em torno dele. Uma das razões que eu realmente gosto deste estêncil é que ele tem como o pequeno entalhe e os botões, então a escala sobre ele parece muito bom, ele se parece muito com um iPhone, ele tem esses pequenos pontos onde você pode indicam as bordas da tela, você pode realmente rastreá-las através do estêncil, mas você pode marcar os cantos, e então há até um segundo conjunto aqui para a barra pequena superior onde ele tem sua bateria e sua cobertura celular e o tempo e qualquer outra coisa, então você pode marcar todos esses, e então nós vamos apenas conectar os pontos e colocá-los todos alinhados. Lá vai você. Há um modelo de dispositivo iPhone. Se você usou um telefone real em vez de um desses stencils, então você gostaria apenas de estimar este tamanho de tela dentro, novamente , totalmente bem, e como nós temos quatro telas que vamos fazer, você vai querer fazer pelo menos Mais três destes. Eu geralmente gosto de fazer apenas um extra para caso de eu cometer um erro, o que acontece totalmente. Vá em frente e faça mais alguns desses e então podemos começar a desenhar telas. 5. Desenhe telas: Agora que terminamos nossos modelos de dispositivos, vamos começar a desenhar as telas, prestando atenção extra aos bits interativos, como botões, ícones tocando ou menus deslizantes. Nossas telas serão um pouco mais detalhadas do que os esboços realmente ásperos. Textos reais serão escritos agora em vez de colocar pastas como Lorem Ipsum, e você pode avaliar o quão específico para obter. Basicamente, você só quer que seu aplicativo faça sentido como autônomo sem precisar explicar o que são as coisas para a pessoa com quem você está testando. Nós também estamos, em vez de usar essas caixas wireframe, estes realmente não dizem nada sobre o aplicativo, então vamos escrever em títulos de show ou filme em vez disso, para deixar claro que estes são os blocos que você veria em um aplicativo como Hulu ou Netflix. Tudo bem. Vamos em frente e desenhar algumas telas. Vamos começar com as guias de navegação, já que essa é a primeira. Vou começar com a barra de abas ao longo da parte inferior. Podemos estimar os tamanhos para dividir por três. Isso é perto o suficiente. Não vamos nos preocupar com ícones por enquanto. Podemos adicionar isso mais tarde, então vamos apenas escrever no navegador, para você e para o social. Adicione a pequena bateria rápida lá e cobertura do celular. Em seguida, eu vou colocar em uma barra de pesquisa, mas eu vou adicionar um pequeno botão no final para realmente fazer a pesquisa. Deixe-me fazer rapidamente o botão Filtrar. Tudo bem. Então podemos passar para as categorias. Temos top rated, temos novos, e temos dramas. Depois podemos entrar e desenhar algumas das nossas caixas. Isso é outra coisa que provavelmente vamos fazer diferente é, nós vamos escrever em títulos reais de programas de TV ou filmes. Não teremos a imagem de capa que a Netflix e o Hulu realmente têm, não vamos chegar a esse nível de detalhes, mas queremos mostrar que na verdade são séries de TV e filmes. Melhor classificado, digamos coisas estranhas. Que tal Star Trek Next Generation? Faremos o mesmo com o novo. Aqui vamos escrever, tal “Queer Eye “e “Arrested Development “? Porque acabaram de fazer uma nova temporada. Eu vou reescrever isso só para que ele se encaixe um pouco mais agradável. Tudo bem. Então faremos o mesmo com os dramas. Vamos dizer “Louco “, e que tal “Grey's Anatomy “? Você pode escrever em qualquer programa que você quiser, mas lá temos nossa primeira tela de navegação. Vocês todos podem ir em frente e fazer a mesma coisa para os outros ecrãs grosseiros. Temos a guia Social, a guia Para Você e a página Mostrar Detalhes do Nosso Filme. Uma vez que você vá em frente e esboçar, vamos passar para o próximo passo, que é adicionar cor. 6. Adicionar cores: Agora vamos adicionar um pouco de cor. Porque nós desenhamos o aplicativo, tudo parece plano e muito parecido. Queremos destacar as coisas com as quais o usuário pode interagir durante o teste. Queremos dar-lhes uma dica sobre quais coisas podem ser aproveitadas. Vou usar azul e verde para destacar isso e você pode usar a cor que quiser. Aqui coisas que seriam tocáveis, seria esta seta para trás, este botão para adicionar Mad Men à sua lista, e este botão para escrever um comentário, juntamente com tocar para resumos, algo que você pode tocar em . Mas não é uma das principais coisas que queremos chamar a atenção. Vamos em frente e pegar esta cor azul claro para estes dois itens principais acionáveis. Só vou escrever um pouco sobre isso. Você é como, “Tudo bem, isso é azul realçado.” A mesma coisa aqui. Sim, isso não é nada chique. Mas agora eles se destacam. Aqui em baixo para este botão “Write Review”, esta é uma grande chamada à ação aqui nesta página. É com isso que provavelmente queremos que as pessoas realmente interajam. Eu vou usar esta cor da tela e eu só vou sombrear este botão, eu vou deixar a coisa toda verde. Isso é claramente um botão. Porque isso é aproveitável ainda melhor, mas não é uma coisa má. Não vou colorir a coisa toda. Eu vou apenas ir em frente e sublinhá-lo porque é secundário, mas chama a atenção para o fato de que é aproveitável. Acho que é tudo o que vou fazer aqui. Novamente, a questão não é fazer desta uma bela obra de arte. O ponto é destacar coisas com as quais alguém pode interagir. Eles podem percorrer as avaliações, mas não precisamos colorir isso. Queremos que eles toquem em “Escrever revisão”. Queremos que eles salvem em sua lista ou queremos que eles saiam da tela. Você pode ir em frente e fazer a mesma coisa com suas outras telas. A única coisa que eu talvez recomendaria fazer que não está incluída aqui é nessas páginas que têm guias. Você também deseja destacar em qual guia o usuário está, para que ele não se perca. Eu recomendaria se você quer sublinhar, como fizemos para cima para resumo, que pode funcionar. Mas se você também tem um desses marcadores cinza, pegando um cinza muito claro e sombreando essa aba, pode apenas destacar que é assim que você é. A única coisa que você quer evitar é fazer isso parecer um botão. Para você, você pode ser como, “Sim, isso é obviamente apenas uma aba”, mas se nós fôssemos colorir este verde como eu fiz aqui, assim como eu estava testando alguma outra cor [inaudível], eu percebi que eu fiz com que parecesse um botão. Não faça isso. Use uma cor realmente neutra ou apenas tome e subjacente como você fez aqui. Sim, vá em frente e faça todas as outras telas e então podemos seguir em frente. 7. Peças menores: Às vezes, durante o teste, você encontra coisas que deseja mudar. Por exemplo, se você tiver um botão e o rótulo não fizer sentido para os usuários, em vez de redesenhar a tela inteira com um botão diferente, você pode simplesmente desenhar um novo botão com um idioma diferente, recortá-lo e colar ou colá-lo na parte superior. Você pode fazer uma coisa realmente semelhante para mudanças temporárias. Por exemplo, se o design tiver alternâncias e, no teste, o usuário deseja alterar alternância de desativado para ativado. Se você tiver alternâncias extras com estados diferentes, você pode simplesmente colocar uma alternância ativa no topo, em vez de redesenhar a tela inteira com uma pequena alternância diferente. Você também pode usá-lo para itens como menus deslizantes ou mensagens pop-up. Basicamente pequenas mudanças em uma tela existente, você pode apenas fazer a pequena peça em vez de redesenhar a tela inteira e isso vai economizar um pouco de tempo. Tudo bem. Vamos fazer alguns componentes. Eu já fiz algumas. Fiz um componente para os filtros. Na guia Procurar, se a guia do usuário estiver no filtro, você tem um menu que pode sobrepor na parte superior. Porque eu uso alternâncias, eu fiz algumas alternâncias extras e outros estados que você pode sentar no topo se eles fossem para tocar neles para alterá-los. Eu também fiz uma entrada de texto, parte para escrever uma revisão. Se você tocasse e escrevesse um comentário, eles poderiam escrevê-lo e clicar em Return e, quando terminarem, eu fiz uma mensagem de sucesso dizendo: “Obrigado pela sua avaliação. Que depois de se submeterem, sabem que foram bem sucedidos. Acho que é tudo, mas quero fazer mais um. Passando pelas páginas dos ajustes interativos, ir não precisa de nada. Não vamos fazer telas extras para nenhum dos outros shows. Não vou me preocupar com a página de configurações agora porque não estamos usando as configurações para nenhum dos testes que vamos fazer com nossos usuários. Nós já fizemos um para filtrar, então a última coisa seria salvar algo na sua lista. Poderíamos também fazer um resumo. Vamos começar por aí. Vamos fazer uma caixa do mesmo tamanho e vamos escrever um resumo dos homens loucos. Tudo bem. Podemos ir em frente e cortar isso. O usuário deve tocar para obter um resumo. Você poderia rapidamente sobrepor um pequeno resumo de homens loucos, e se eles tocá-lo novamente, ele iria apenas girar para trás. Poderíamos ver se isso fazia sentido no teste, não tenho certeza. Em seguida, a última coisa, então queremos apenas escrever uma mensagem de sucesso rápida para salvar algo em sua lista. Vamos em frente e colocar. Só vai dizer: “Guardado na sua lista.” Basta desenhar uma pequena caixa em torno dela, você pode dividi-la e, em seguida, porque no iOS, quando você fecha mensagens como esta, geralmente é em texto azul. Vamos usar um lápis de cor azul. Tente perto e então você pode cortar isso e você tem seus últimos componentes. Como você pode ver, eles são bem simples. Sempre que você quiser adicionar para tornar seu teste mais suave, vá em frente e desenhe e corte até que você esteja satisfeito. Então, uma vez que você terminar de fazer todas as peças para o seu protótipo de papel, nós vamos continuar a praticar. 8. Prática!: Bom trabalho. Você terminou seu protótipo de papel. Agora está quase pronto para testes. Você quer tornar as transições de tela realmente suaves para que o usuário possa se concentrar no que está tentando fazer com seu aplicativo em vez de ser destruído enquanto você caça a peça certa. Então você quer praticar a transição de alternar entre telas pelo menos algumas vezes antes de fazer seu teste. Você também deve estar preparado para que o usuário cometa um erro e não siga o fluxo exato que você acha que ele pode. Então talvez pensar sobre o que alguns dos erros comuns podem ser e também se preparar para lidar com eles de forma rápida e suave sem distrair o usuário. Vou mostrar-lhe rapidamente como posso praticar a transição. Vamos praticar. Aqui, minha tarefa será para o usuário escrever um comentário do admin. Seja qual for a sua tarefa, você deseja descobrir qual seria o fluxo de telas para que você possa praticar a transição e ter tudo ordenado e pronto para ir para que você não tenha atraso entre seu usuário tocando na tela e algo acontecendo. Digamos que você está começando o teste e você dê o telefone a eles e diga a eles que a tarefa deles é escrever uma crítica para Mad Men. Seu usuário pode tocar em Mad Men e, em seguida, você quer estar pronto para ir. Com essa transição, quando eles tocam em “Avaliação do avaliador”, você quer estar totalmente pronto com sua página de revisão, então eles escrevem sua avaliação e apertam “Retornar”, e novamente, você quer estar pronto com sua notificação de sucesso. Seja qual for a sua tarefa, pratique seu fluxo até que seja agradável e suave para você e se sinta muito natural, e então você está pronto para fazer seu primeiro teste com seu protótipo de papel para o seu aplicativo. 9. Finalização: Nesta aula, aprendemos a fazer um protótipo em papel para um aplicativo móvel. Aprendemos quando usar um, o que é e o que você precisa, e como usá-lo. Não há tempo específico que você deve usar um protótipo de papel, mas eu gosto de usá-los depois de decidir o que o aplicativo é, como o usuário está indo para fluir através do aplicativo para concluir tarefas, e eu tenho esboçado para fora. Testar um protótipo de papel aqui permitirá que você faça uma rápida rodada de testes e iteração antes mesmo de começar a criar um wire-frame com uma ferramenta digital. Porque é um protótipo de papel, você vai precisar de materiais básicos de artesanato como papel, utensílios de escrita, tesoura e fita adesiva. Também percorremos todas as etapas da criação do protótipo. Fizemos modelos, desenhamos as telas, adicionamos cores, fizemos componentes menores, e praticamos nosso fluxo de teste. Lembre-se de compartilhar seu trabalho na galeria do projeto. Os comentários de outras pessoas podem ajudá-lo a pegar coisas que fazem todo o sentido para você como designer, mas para alguém que está olhando para o aplicativo pela primeira vez pode ser um pouco confuso. Depois de terminar este aplicativo, vá em frente e tente fazer um dos seus próprios. Estou super animado para ver o que todos vocês criam.