Projeto de interação básico: fluxos de usuários, wireframes, protótipos e muito mais!

1. Boas-vindas ao design de interação 101: Bem-vindo ao Interaction Design 101. Nesta classe, vou ensinar-lhe como mapear fluxos de usuários, esboçar interfaces de usuário e juntá-los todos em wireframes e protótipos para comunicar design de interação com desenvolvedores e outras partes interessadas. Você usará essas habilidades em seu projeto em cada lição. Esta aula destina-se a alunos que tenham pelo menos uma ideia básica do que é UX e queiram compreender o design de interação com maior detalhe. É ideal para freelancers ou designers gráficos visuais que desejam entrar no design de interação. Outra maneira que você pode utilizar essas habilidades é se você já um designer de UX e quer apenas melhorar o design de interação. Cada lição seguirá a seguinte estrutura. Primeiro, vou explicar um pouco da teoria. Então, eu vou guiá-lo através de um exemplo da etapa usando um aplicativo de pedidos de café como meu exemplo, dando-lhe dicas e truques ao longo do caminho. Então, antes da próxima lição, você mesmo colocará essas etapas em prática usando seu próprio projeto de classe. Coloque a ideia no conselho da comunidade e eu lhe darei feedback. No final desta aula, você terá um fluxo de usuário para sua própria ideia de aplicativo ou produto, alguns wireframes e um protótipo das telas documentadas. Pense sobre a idéia que você deseja usar para o seu projeto. Pode ser uma idéia existente que você tem em sua cabeça ou você pode usar um exemplo fictício, como um aplicativo de entrega de pedidos de álcool ou aplicativo de compartilhamento de carro, qualquer coisa que você possa pensar realmente. Se você não consegue pensar em um, você pode usar um produto existente e ver como você pode melhorá-lo. Isso pode entrar no seu portfólio. Pense sobre o exemplo que você gostaria de usar e coloque-o no quadro da comunidade. Faça isso antes da próxima aula e eu vou me certificar de dar alguns comentários. Vejo-te em breve. 2. O que é design de interação: Nesta aula, você aprenderá sobre o que é o design de interação. Então, o que é? O design de interação vai além da aparência da interface ou do design da interface do usuário e pensa sobre como os usuários interagirão com seu produto ou serviço. O design visual é apenas a ponta do iceberg UX. Sob a superfície do que você diz, a camada visual é o que realmente compõe todo o UX. Este é o design de interação, a arquitetura da informação, a forma como as informações são apresentadas e organizadas, o design de interação, o conteúdo e o design conceitual de como todo o sistema pendura juntos. No design gráfico, você não precisa necessariamente pensar como as pessoas interagiriam com seu produto ou o usariam ao longo do tempo. Mas no design de interação, você tem. Vejamos um exemplo. Precisamos considerar as interações. Então, na superfície, esta imagem parece um design bom o suficiente. Mas se sou um desenvolvedor, tenho perguntas. O que acontece com o texto de espaço reservado quando um usuário clica no campo? Se ele desaparecer, o usuário sabe qual campo ele está em um mais para inserir? O que acontece se o usuário inserir algo inválido? Onde a mensagem de erro cabe na tela? Tudo se moveu para baixo? O que a mensagem de erro diz? Quando é que aparece? O que é inválido? O campo de endereço é apenas um campo. Qual o formato que o usuário quer dizer e ouvir? Como é que eles sabiam? Onde está a dica? O que está usando para coincidir com o endereço? É uma API do Google Maps? É só texto livre? Que validação existe? Respondendo a todas essas perguntas, e provavelmente mais que eu não mencionei é design de interação. O processo que eu gostava de tomar ao projetar é primeiro entender o fluxo do usuário e o que eles estão tentando alcançar. Em seguida, desenhe a interface para explorar possíveis soluções. Em seguida, crie wireframes com o design mais final e, em seguida, protótipo uma solução. Tornando os wireframes interativos, cheguei ao produto final e finalmente documento as interações para que ele possa ser construído. Dependendo do que é o projeto e de como sua equipe funciona, você pode realmente não passar por todas essas etapas. Por exemplo, se for um pequeno ajuste em uma tela existente, você pode pular diretamente para wireframes. Você pode até apenas protótipo no navegador, você pode ter um bate-papo com o desenvolvedor e se você trabalha em algum lugar que tenha um cartão de estilo bastante sofisticado, você pode não precisar especificar todas essas interações. Eles já saberão o que acontece com o texto de espaço reservado quando você clicar no campo, o que acontece com mensagens de erro, etc. Não se esqueça de pensar sobre o exemplo que você deseja usar para o seu projeto ao longo deste curso e pop na bala da comunidade. Vejo-te em breve. 3. Mapeamento de usuários: Então, agora que você sabe o que é Interaction Design, nesta lição, vamos começar a fazer o primeiro passo, que é entender o fluxo do usuário. Então, o que é um fluxo de usuários? Bem, é um mapa ou diagrama das etapas ou telas que um usuário percorrerá ao usar seu produto. Também pode ser uma ilustração de alguém se movendo pelo sistema. Por que não fazemos este passo? Bem, ele ajuda você a entender a lógica do fluxo de passos que o usuário pode tomar. Ele ajuda você a trabalhar através do que precisa ir para onde e o que vai acontecer. Ajuda-te a pensar no que acontece se as coisas não correrem bem. Em um sistema existente, isso ajuda você a ver onde as coisas não são tão eficientes quanto poderiam ser, ou onde há problemas com o processo atual para que você possa melhorá-las. Ele também ajuda você a comunicar os fluxos para suas partes interessadas. Vamos trabalhar através de um exemplo. Vou usar o meu aplicativo fictício de pedidos de café. Você pode fazer isso usando muitas ferramentas diferentes, por exemplo, caneta e papel ou um quadro branco. Você também pode usar software especializado como Visio, Lucidchart, Miro anteriormente bala em tempo real ou apenas símbolos no Sketch, PowerPoint, Word, etc, qualquer coisa com que você se sinta confortável. Hoje, vou usar o Sketch. Então nós temos o começo e eu vou percorrer o caminho feliz. Isso é o que acontece quando as coisas dão certo? Este é o caminho onde a maioria escolhe tomar a maior parte do tempo. Eu sou mais projetado para ajudá-los a descer assim. Então catalães ou café, ela abre o aplicativo porque ela já sabe sobre o nosso produto. Estamos fazendo o fluxo simplificado que não precisa ir login, inscreva-se apenas olhando para os pontos-chave. Então, o próximo passo no processo é talvez selecionar um café. Agora que estou pensando nisso, talvez selecionar o tipo de leite seja um passo diferente no processo. Selecione o café que você quer, em seguida, o leite. Vou adicionar isto ao meu pedido. Reutilize “Linhas” ou “Setas” para indicar a próxima etapa. Abrir aplicativo, em seguida, “selecionar café”, “selecionar café”, em seguida, “selecionar tipo de leite”, etc Temos um final, o fim do processo, “sucesso”. Então esse é um caminho simplificado e feliz, mas nem sempre é assim que as coisas correm no mundo real, as coisas dão errado, as pessoas precisam tomar decisões. Um diamante é geralmente usado para representar um ponto de decisão. O ponto de decisão pode ser uma decisão que o usuário faz ou pode ser algo que o sistema está fazendo. Por exemplo, o sistema agora olhando para cima, temos o cartão de crédito em arquivo? Posso dizer que estou voltando e mudando meu fluxo porque originalmente eu não tinha pensado em todas essas complexidades extras. É aqui que usar algo digital pode ser benéfico. Posso facilmente reorganizar e renomear as caixas. Então, enquanto estou neste set, estou pensando em algumas coisas que não funcionam e fazendo mudanças. Talvez vá para a página de finalização da compra se você já tiver um cartão de crédito, então você tem uma confirmação do pedido e, em seguida, pode haver uma tela extra para inserir os detalhes do seu cartão de crédito. Às vezes haverá erros, precisamos ter certeza de que pensamos sobre a recuperação de erros ou caminhos de falha e como os usuários podem se recuperar disso. Por exemplo, cartões de crédito podem ser recusados. Então precisamos de um loop para voltar para o “Adicionar cartão de crédito” ou atualizar cartões de crédito grãos. Então agora sabemos pelo menos parte do fluxo do usuário e podemos decidir quais telas quando eles precisam projetar para. Esse processo ajuda você a pensar através dos diferentes caminhos ou telas nativas. Originalmente, eu não estava pensando que apesar de você não ter um cartão de crédito registrado, o mapeamento através deste processo me permitiu chegar a isso. Cada etapa do processo pode ser uma tela diferente, ou pode ser um campo diferente que é necessário. Você pode ter várias etapas em uma tela. Você pode compartilhar neste formato ou fazer o fluxo para mais de um quadro histórico de usuário com ilustrações dependendo de como os fluxos de usuário são compreendidos em sua equipe. Aqui está um exemplo de quadrinhos de como esses produtos poderiam funcionar. Alguém quer um café? Por que eles não podem ir e pegar um? Talvez eles se feriram, talvez este seja o nosso modelo de negócio. Então eles se lembram do aplicativo ou do intelectual que precisam fazer, e então eles ficam felizes. É mais um usuário uma história do que um fluxo de usuário. Poderíamos também olhar para telas abstratas e desenhá-las com setas entre elas. Então, não entramos em muitos detalhes, ainda estamos apenas olhando para o fluxo e a maneira como as pessoas se movem através do sistema. Agora, tente criar um fluxo de usuário para seu próprio aplicativo ou ideia de produto, não se esqueça de colocá-lo no estande da comunidade para obter feedback, até em breve. 4. Esboço da interface: Agora que você tem seu fluxo de usuário, é hora de passar para a próxima etapa do processo. Estabelecendo a interface. Como mencionei na última lição, você pode ter várias telas diferentes para cada etapa ou cada etapa pode estar em uma tela, ou combinação de ambos. Você provavelmente também vai pensar sobre coisas e passos que você perdeu ao longo do caminho enquanto você está passando por este processo também, e isso é absolutamente bom. É parte disso. É muito importante saber que esboçar não é sobre arte, é sobre comunicação, é sobre pensar através do processo. Como você verá pelos meus esboços, eu não sou 100% um artista. Eles não são bonitos, mas eles não precisam ser. O objetivo desta etapa é ajudar você a pensar através do fluxo lógico, quais interfaces são necessárias, quais interações são necessárias, como podemos fazer com que o usuário faça essa interação? Olhando para o fluxo de usuário da última lição, vou começar a esboçar. Vou usar papel e caneta para esta atividade. Mas você pode querer usar um modelo, por exemplo, algo que já tem, os tamanhos desenhados para você. Mas isso não é necessário. Realmente, apenas caneta, papel, ou um quadro branco é absolutamente bom. Eu tendem a não usar digital neste momento porque eu não quero ficar muito atolado para baixo, quais são as cores? Qual o tamanho da fonte? Eu realmente só quero pensar sobre quais elementos eu estou usando e por quê. Estou começando com um contorno áspero da tela com uma cabeça acima. Talvez tenhamos nossos pedidos recentes na tela inicial, e uma grande chamada à ação, que estou delineando em Sharpie e colorindo. As setas representam mover para a próxima tela, eu apertei New Order. Então agora estou na tela de pedidos. O que eu preciso fazer? Selecione Tipo de café. Talvez usemos uma caixa suspensa para isso. Depois de fazer isso, passamos para a próxima tela, e meu tipo de café está lá, permitindo que eu volte e edite-o. Agora eu preciso selecionar a partir de uma caixa suspensa para o tipo de leite que eu quero. Talvez a soja custe mais. Agora tenho o meu tipo de café e o meu tipo de leite. Qual café vai entregá-lo para mim? Talvez este seja um único seleto porque eu só posso selecionar um, e ele está me dando a estimativa de quanto tempo cada café vai demorar. Então eu apertei o Checkout. Aqui, eu vou para diferentes maneiras de pagar. Talvez cartão de crédito, talvez PayPal. Podemos fazer dinheiro na entrega? Não tenho certeza. Pode dar gorjeta ao motorista? Estas são algumas coisas que vamos pensar. Depois preencho o cartão de crédito, botão “Pay” e acabo. Nós não pensamos em tudo. O que acontece do outro lado? O que dizem os motoristas? O que diz o café? Mas isso apenas nos dá uma idéia de um pouco do fluxo que vamos trabalhar através. Como você pode ver, eles são bagunçados. Mas isso é bom. O ponto é que eu pensei através do processo e do fluxo e vim para cima com um par de diferentes paradigmas de interação que eu poderia querer usar. Agora estou pronto para passar para o digital. Agora tente esboçar as telas para si mesmo, para o seu próprio projeto. Como sempre, coloque-os no conselho da comunidade. Vejo-te em breve. 5. Crie wireframes: Meus esboços da última lição são essencialmente wireframes de baixa fidelidade. O próximo passo no processo é firmar esses wireframes. Wireframes são basicamente um plano do que está a ser construído. Há uma famosa citação de Frank Lloyd Wright, você pode usar uma borracha na mesa de desenho ou um martelo no lado da construção. Isso não é dizer com software. Se formos em frente e escrevermos o código, vamos ter que refazê-lo, jogá-lo fora e vai ser mais caro. Precisamos ter um plano ou uma ideia do que vamos fazer antes de começarmos a codificar. wireframes nos ajudam a pensar nas idéias e realmente começar a testá-los antes de construirmos e eles nos ajudam a comunicar a idéia para que outras pessoas saibam o que construir. protótipos de baixa fidelidade não se parecem exatamente com o produto acabado. Eles podem ser feitos de desenho, eles podem parecer um pouco esboçados, ou talvez o design visual é apenas o suficiente para o próximo. O benefício de usar um protótipo de baixa fidelidade é que você vai ter, digamos, de volta ao nível certo. Você não vai receber comentários como, eu não gosto da cor, eu não gosto da fonte. O que você realmente está procurando nesta fase é feedback sobre o fluxo e as interações propostas. Ele também gerencia as expectativas. Você não quer que um cliente pegue algo que se parece exatamente com o produto acabado e então eles não entendem por que ainda está demorando muito mais quando eu já salvei o design? Ele também pode impedir que os desenvolvedores acidentalmente peguem e construam algo. Se é realmente claro que não é um projeto ou design finalizado. Protótipos de baixa fidelidade também são rápidos e fáceis de fazer, e portanto, você sabe, como casados com eles e você está mais disposto a jogá-los fora e começar de novo, tentar de novo, tentar outra idéia. Protótipos de alta fidelidade têm o seu lugar. Se você fosse levar wireframes de baixa fidelidade para testes de usabilidade ou pesquisa de usuários. Você não vai ter respostas muito rígidas. Protótipos de alta fidelidade são os melhores para isso. Wireframes podem novamente ser feitas usando muitas ferramentas diferentes, produtos da Adobe, Balsamic, que é realmente bom para os de aparência esboçada, e Jill ou esboço. Hoje eu vou usar o esboço e você vai dizer que eu tenho bibliotecas instaladas que têm um monte de componentes que eu vou estar usando para me ajudar a economizar tempo. Eu levei cerca de meia hora para fazer esta atividade e não está nem perto de completo, mas eu só vou falar sobre algumas coisas diferentes que eu fiz e algumas dicas e truques diferentes. Novamente, não importa muito sobre as cores e a fonte e o tamanho está nesta fase, mas você vai me ver alterando-os um pouco apenas para mostrar ordem, coisas que são maiores ou mostrar ações mostrando links são azuis e que Coisa. Mas no final você vai dizer que obviamente não está perto de terminar. Você também verá que à medida que estamos passando, estou mudando de idéia e percebendo que há coisas diferentes que devemos adicionar, então, voltando e adicionando, é por isso que não devemos começar o código, ter que ir remover as coisas, reordenar as coisas vai custar muito tempo e dinheiro. Estou duplicando meus quadros de arte para que eu possa ter o mesmo quadro básico para cada coisa. Eu cliquei em novo pedido, então vamos passar para a próxima tela. Aqueles que eu estava desenhando nas aulas anteriores. À medida que passamos, você me verá selecionando itens das bibliotecas que instalei no meu esboço. Isso só economiza tempo. Eu empurro para fora para desenhar um retângulo e é apenas um pouco de um atalho e tipo para obter texto para cima na tela. Eu comecei com o tipo de café, então eu vou escrever um monte de diferentes tipos de café que eu posso pensar. Só estou inventando isso. Mas, obviamente, na vida real, você faz análises e você descobriria o que as cafeterias oferecem. Novamente, não é um aplicativo de verdade, então eu só tenho um pouco de café, eu não tenho que pagar e outras coisas que você pode querer comprar. Eu também não coloquei nenhum preço nesta fase. Você também diz que eu estou colocando um monte de cafés diferentes que eu posso pensar em cima da minha cabeça. Ter que ir e verificar a ortografia para alguns deles. Mas eu estou colocando-os em ordem aleatória para que no final eu possa colocá-los em ordem alfabética. Faz sentido estar em ordem alfabética especialmente [inaudível] não sei o que está na lista e, em seguida, pode saber como eles se sentem para que eles possam percorrer por ela. Aqui estou selecionando todos os itens na lista, clicando com o botão direito do mouse e selecionando distribuir verticalmente. Isso irá espaçar uniformemente os itens. Eu selecionei lugar em sub-pixels porque novamente, Eu não estou procurando design perfeito pixel. Mas eu só queria parecer um pouco medido. Neste ponto eu percebi que eu não pedi tamanho e talvez isso seja algo que você queira fazer antecipadamente. Eu me sinto como um grande café ou se sentir como um pequeno café em vez de selecionar o que você quer e, em seguida, o tamanho. Bem, eles provavelmente são [inaudíveis]. Estou apenas reorganizando minhas telas e voltando e adicionando o mesmo. Você pode dizer que a maneira que eu tenho os quadros de arte é da esquerda para a direita em ordem da ação que acontece e eu estou mostrando como ele é quando está fechado, ele parece quando ele é expandido e como ele parece quando ele é selecionado. Isso mostra um pouco da interação se você sabe o que está procurando. Para o tamanho do café, talvez você queira saber qual é o tamanho do café. Vamos colocar apenas um suporte para quantos mililitros o café é. Embora isso provavelmente não vai funcionar no mundo real, porque cada café pequeno de cada café tem o mesmo tamanho? Eu também tenho custos de entrada aqui em tudo e , obviamente, o café pode ser preços diferentes com base em diferentes cafés. Isso é apenas um pouco de complexidade que estou deixando fora de alcance por agora mas na vida real você teria que pensar sobre como seria essa interação também. Neste ponto, percebi que meus botões ainda dizem novo pedido porque eu estava copiando tudo. Agora eu vou voltar e mudá-lo para dizer adicionar à ordem. Uma vez que temos o nosso item adicionado ao nosso pedido, será capaz de dizê-lo em alguma vista de resumo com a capacidade de voltar e alterá-lo. Agora precisamos usá-lo para selecionar onde eles querem obter seu café. Decidi que neste modelo, estamos olhando para cafés que têm esse café que você votou disponível. Como você só pode selecionar seu pedido de um café, vou usar botões de rádio, que sugerem ao usuário que apenas um pode ser selecionado. Eu não me preocupei em olhar para a quantidade. O que acontece se você quiser pedir vários cafés ao mesmo tempo, o que eu tenho certeza que estaria no escopo. Novamente, essas interações que você tem que pensar. Mais uma vez, por simplicidade, eu só estou tendo a capacidade de pagar com cartão de crédito e eu estou supondo que eu ainda não tenho um cartão de crédito registrado. Essa interação é realmente de alto nível dependendo da complexidade do sistema real que você pode precisar para mapear muito mais. Você pode precisar mapear todos os campos diferentes e levaria muito mais do que meia hora que eu gastei neste. Mas você pode ver que nós já temos um pouco de um fluxo do que está acontecendo? O que está acontecendo? O que poderia parecer? Que tipos de controles onde usamos uma caixa suspensa, botões de rádio, ação de código grande, botões roxos grandes para carvão? Coisas que queremos que os usuários façam e editem links para coisas que não serão usadas tanto, mas ainda precisam ser, que podem ser acessadas na interface. Se eu fosse levar esses wireframes para testes de usabilidade usos teria que inventar muito sobre como as interações funcionam e você pode não obter resultados verdadeiros. Da mesma forma, ter essa ideia para os desenvolvedores nesta fase pode precisar que eles tomem muitas decisões sobre o que a interação faz, como falamos na segunda lição. Na próxima lição, você aprenderá como criar protótipos para passar por esses cabeçalhos. Agora, tente criar wireframes para o seu projeto e lembre-se que eles não precisam ser perfeitos para pixels. Trata-se de comunicação no momento ainda e arquivo baixo é melhor como falamos. Não se esqueça de enviá-los para o conselho da comunidade para obter feedback. Vejo-te em breve. 6. Criação de protótipos: prototipagem resolve alguns dos problemas que falamos no final da última lição. programa não diz a interação. Se uma imagem vale mil palavras, então um protótipo vale um milhão. Um protótipo é essencialmente uma amostra ou um modelo de um sistema ou de um processo. Existem dois tipos principais de protótipos. Há um protótipo clicável ou passível de toque e há um protótipo interativo. Um protótipo clicável ou passível de toque é aquele em que você simplesmente pega seus wireframes e coloca pontos de acesso em algumas das ações principais e, em seguida, clicando que vincula ao próximo grão essencialmente. Você pode fazer isso em visão ou esboço e eu vou ver um exemplo de como fazer isso. Podemos criar um desses protótipos clicáveis no esboço. Vamos ao menu de prototipagem e clique em “Adicionar link à prancheta”. Selecione o que deseja clicar, o botão, por exemplo, e, em seguida, adicione à prancheta e clique na prancheta para a qual ela se vincula. Ele deixa essas setas na tela para que você possa ver a interação. O atalho para fazer isso é pressionar o WK enquanto você selecionou algo em uma prancheta e, em seguida, pressionando a próxima prancheta e ele fará esse link. Em seguida, você pode reproduzir os protótipos, então clicar onde você fez esses pontos de acesso irá passar para a próxima tela. Mas você pode dizer que porque minha tela é de um tamanho diferente, a imagem está se movendo para cima e para baixo. Se você gastar um pouco mais de tempo você pode fazer isso um pouco mais suave, mas novamente, você vê que está apenas indo para o próximo. Não é assim que as coisas correriam. Se você clicar no botão, ele não será movido para uma nova tela. Ele iria apenas animar ou selecionar de alguma outra maneira, então essa é a única limitação desses protótipos clicáveis. Para criar protótipos mais interativos onde os usuários podem realmente digitar coisas, selecione nas caixas suspensas, diga como o botão parece quando é clicado, você pode usar o código, mas obviamente isso pode ser muito demorado para alguns Designers. Ou você pode usar ferramentas como Ajua que é o que eu vou usar hoje. Agora, isso vai parecer um pouco mais antiquado, os estilos não são tão modernos como você vê no esboço, mas dá a você a interatividade. Você só tem que equilibrar mostrando a interação entre mostrar exatamente como será no navegador no produto final. Aqui é Ajua ou Axia, não sei como você pronuncia e estou usando um teste grátis. O que estou fazendo para economizar tempo é copiar meus wireframes do esboço e escrever sobre eles. Estou colocando um botão de Ajua que tem ações associadas a ele sobre o botão que eu tenho apenas na minha imagem. Para fazer interações no Axia você usa casos, então eu selecionei o botão e eu vou adicionar caso no clique. Quando o botão é clicado, ele vai fazer o que eu definir aqui que é abrir outra página do protótipo na mesma janela. Agora estou adicionando uma caixa suspensa e, novamente, estou apenas colocando-a sobre a lista suspensa da minha imagem no quadro y e adicionar quais itens eu quero que apareçam nesta lista. Eu posso adicionar muitos ao mesmo tempo que é útil quando você está escrevendo vários ao mesmo tempo. O que estou fazendo aqui é tornar o segundo item um painel dinâmico e configurá-lo como oculto. Isso ocorre porque eu vou adicionar um caso interativo no tamanho do café que quando um item é selecionado desta lista, o próximo menu suspenso aparecerá. Isso só economiza ter que ir para várias telas diferentes porque você pode fazer tudo no protótipo. Ajua tem algumas interações realmente complexas que você pode escolher e que é pouco fora do escopo para esta classe, mas você pode ter um jogo por aí se você estiver interessado. Novamente, só estou trabalhando em torno de meus wireframes. Eu vou adicionar um retângulo para cobrir o material da minha imagem e substituí-lo com os botões de rádio disponíveis em Ajua porque estes serão botões de rádio totalmente interativos e mostrar o que eles devem fazer e como eles interagem. Você pode visualizar o protótipo. Isso o abre no navegador e mostra como as interações funcionam. Quando eu seleciono deste item, a próxima lista suspensa aparece conforme configuramos para fazer. Você verá que os botões de rádio estão funcionando. Estes me levou cerca de 20 minutos, mas novamente, se eu jogasse e gastasse muito mais tempo, eu poderia tê-lo mais parecido com o sistema final faria. Depende de quanto tempo você quer gastar, se eu estou apenas mostrando a interação ou se ele precisa olhar exatamente pixel perfeito. Há ferramentas mais novas saindo. Nós podemos realmente projetar no código, mas eu não vou olhar para nenhum desses hoje. Se você tem interações realmente complexas que você quer mostrar, outra maneira de fazer isso é trapacear usando um GIF ou uma animação PowerPoint e eu vou mostrar-lhe como fazer isso também. Vamos fingir uma animação no PowerPoint. Digamos que você tem uma lista de coisas que você pode salvar e quando você salvá-lo, ele lhe dá uma pequena dica e diz que ele foi para o seu menu. Tenho duas estrelas que representam o estado salvo e estou fazendo com que apareçam ao mesmo tempo. Então eu estou fazendo uma meia animação para que eu possa fazer a estrela ir para cima e para longe onde eu quero que a animação para ir. Quero que isso aconteça com o anterior. Você clica na estrela aqui em cima e a animação acontece. Então precisamos sair para que você não tenha apenas a estrela flutuando no menu. O que eu vou fazer é ter certeza que eu estou selecionando o caminho certo e ter um efeito de saída e fazer isso depois anterior. Quando você joga, você finge a interação. Clique em “Animar desaparecer”. Na realidade, neste passo, nós provavelmente tomar este protótipo para usar borrachas ou testes de usabilidade. Isto é para verificar se os usuários podem completar as tarefas que esperamos que eles possam fazer com esta interface e nos mostrará se algo é confuso, complicado ou difícil de usar. Agora, faça um protótipo do seu próprio projeto e não se esqueça de colocá-lo no quadro da comunidade para obter feedback. Novamente, ele não tem que parecer incrível, é apenas sobre mostrar as interações. Então, mesmo que pareça um pouco antiquado em termos de textos, estilos e tudo isso, ainda está tudo bem. Vejo-te em breve. 7. Documentação a interação: Agora você praticamente completou o design de interação, bem feito. Meu protótipo ainda é bastante áspero, então na vida real, eu trabalharia com design visual para refinar o que parece no espaçamento antes de entregá-lo ao desenvolvimento. Dependendo de onde e como você trabalha, depende de como você precisa lidar com o design de interação. Se você é uma agência que não faz desenvolvimento, todo o desenvolvimento é terceirizado, então talvez você precise de um documento de requisitos realmente espesso com campo simulado, dizendo: “Quando você clica nisso, isso acontece , isso acontece em seguida. Esta é a ordem do leitor de tela.” Todo aquele detalhe realmente insignificante. Talvez você trabalhe em algum lugar que já tenha um guia de estilo bastante complexo, então você não precisa se preocupar em especificar todas essas pequenas minúcias. Mas, independentemente de qual seja, ter alguma documentação ajudará. Você pode não estar por perto quando eles pegá-lo, ou pode haver algum atraso entre quando você terminar o design e quando ele é pego e as pessoas podem esquecer a interação. O que eu gosto de fazer é compartilhar o protótipo, compartilhar as imagens, e para qualquer coisa complexa, documentá-lo. Isso poderia ser apenas texto, fazê-lo no Sketch, anotar, marcá-lo, apenas com imagens, com símbolos, com palavras, ou com um plug-in, ou você poderia gravar um vídeo do protótipo que está sendo usado, e falar sobre ele ou adicionar pequenas caixas para voar dentro e voar para fora. Novamente, tudo depende de quanto tempo você tem e quão ocupado você está, e quão complexas as interações são. Vale a pena gastar meio dia zombando disso, ou é apenas um desperdício do meu tempo que ninguém vai olhar, alguém vai ler o menu? Se não, não perca seu tempo. Eu gostaria de fazer uma combinação. Vou apenas ver um exemplo de como eu iria documentar isso se fosse um produto real. O que eu faria no Word, no Confluence, ou qualquer ferramenta que você esteja usando é ter o que o produto é vinculado ao protótipo. Basta copiar o URL real, dizer quem é o proprietário do projeto, para quem vir para perguntas, e, em seguida, também ter links para onde eu coloquei as imagens individuais com os comentários. Isso ocorre porque nem todo mundo terá o Sketch, então não será capaz de baixá-lo. Muitas vezes, vou copiá-los e colá-los neste documento ou em algum lugar onde eles estejam visíveis. Em termos de realmente documentar, eu vou apenas mover para que eu tenha um pouco de espaço entre os apps, e entre os apps eu vou colocar algum texto. Quando eles clicam neste botão, eles passam para a próxima página. Uma vez que eles selecionaram o tipo de café que eles querem, o filme usa divulgação progressiva, então ele mostra o próximo campo que precisa ser selecionado. Ele também move o que foi selecionado para este modo de edição, com a capacidade de clicar, alterar e voltar. Agora eu decidi adicionar um link extra aqui para mostrar esse processo. Eu também poderia fazer uma maquete de onde coisas diferentes vêm. Estou imaginando que os detalhes do pedido colapsam assim que você chegar na próxima tela para que tudo esteja em uma linha. 8. Recap - design de interação 101: Agora você sabe o que é o design de interação. Tudo a ver com a forma como o usuário interage com seu produto ao longo do tempo. Não só o olhar e a sensação. Você conhece os passos para alcançar que criam os fluxos de usuário, um diagrama das etapas que um usuário toma ou as telas que eles passam. Como esboçar a interface, pensar em como você pode projetar as telas, como fazer wireframes. Enquadrando esses projetos e pensando através de quais componentes interativos usar, prototipagem Next, fazendo um protótipo interativo para testar e mostrar melhores interações. Finalmente, documentando para comunicar seus projetos. Lembre-se de que você não precisa seguir todas essas etapas para cada projeto. Depende de quão grande as peças, se é apenas uma pequena mudança e você pode simplesmente marcá-lo no navegador você mesmo, ou se é um grande projeto Greenfields onde você vai querer fazer todos esses passos. À medida que tiver mais experiência, você aprenderá quando poderá decidir quais etapas devem ser descartadas e quais devem ser feitas. Isso nos leva ao fim do Interaction Design 101. Por favor, siga meu perfil e revise a turma. Se você gostou, espalhe a palavra. Boa sorte em suas carreiras de design de interação. Vou disponibilizar todos os slides e enviá-los que você possa se referir a eles mais tarde. Design feliz.