Protótipos para Web I: informações, UX e protótipos no papel

1. Trailer: Eu sou Erika Heins, eu sou uma web designer e desenvolvedor web. Trabalho há mais de 10 anos no campo nos EUA. Este é um Web design organizado, UX, IA e protótipos de papel. Esta primeira aula é sobre como se organizar e como planejar um site. Então, vamos passar por esboços de conteúdo sobre, o que você tem? O que você precisa criar? Quem você pode obter para começar a trabalhar na criação desse conteúdo em algumas diretrizes de branding, modo que durante todo o processo deve vir de um ponto de vista consistente? Em seguida, em sitemaps e histórias de usuários e wireframes. Todo esse tipo de funcionalidade e narrativa como uma maneira pela qual você navega em um site. Então, no final desta aula, você terá protótipos de papel clicáveis. Eles podem ser esboços de papel e caneta que você vinculou como JPEGs para fazer alguns testes de usuário ou estaremos usando uma ferramenta chamada Assuming. Ser capaz de criar sites e manter sites, entender como eles funcionam, e como torná-los mais poderosos, ou eficazes é apenas uma dessas habilidades valiosas. 2. Apresentação: Olá e bem-vindo ao web design organizado. O objetivo desta classe é fornecer todos os contornos necessários para um processo de web design claro e produtivo. Como diz o Ryan Singer, o design é um processo dependente do caminho. Portanto, queremos dividir o processo em etapas discretas e reunir o feedback certo no momento certo, para tomar boas decisões em cada ponto. web design responsivo mudou muitos dos nossos fluxos de trabalho e, por isso, falaremos através de um processo com vários protótipos. Nosso projeto é planejar um site para você ou outra pessoa. Você descobrirá sua navegação, esboçará a experiência do usuário e testará como suas ideias são recebidas. Você pode concluir o projeto atribuído ou seguir as lições sobre sua própria idéia. Falaremos por meio de resumos de projetos, sitemaps, diretrizes de branding, contornos de conteúdo, fluxos de usuários, wireframes responsivos e testes de usabilidade. Você pode entregar esses documentos para designers e desenvolvedores ou seguir as próximas duas classes para projetar e construir o site você mesmo. As ferramentas que usaremos são: um editor de texto como TextEdit, Google Drawings, papel e caneta antigos e Balsamiq. Então vamos começar. Vá em frente e configure uma conta do Google Drive se você precisar de uma e crie uma pasta de projeto para este site. Baixe também Balsamiq se você não tem o aplicativo, eles têm um teste gratuito para começar. 3. Esboços do projeto: Vamos começar com os esboços do nosso projeto. Essas perguntas e planos nos manterão no caminho certo durante todo o processo. Há um arquivo de esboços de projeto na seção Recursos, se você quiser acompanhar e preencher o seu. Primeiro, olhe para seus objetivos de alto nível, por que este site precisa existir? Há alguma métrica específica que você está perseguindo? O que fará você olhar para este site como um sucesso? Certifique-se de que sua equipe está de acordo. Estamos fazendo um evento de patrono, então, obviamente queremos que as pessoas apareçam. Muitas pessoas param por aí, mas há alguns objetivos secundários também. Queremos que os participantes se conheçam, queremos que eles se beneficiem desse evento mesmo depois de tudo acabar e podemos querer ou precisar de patrocínio. Então, faça uma lista de algo assim. Muitas startups observam o que são chamadas métricas piratas por causa da sigla. Estas são aquisições, que é quantas pessoas você está chegando ao site, ativação, quantas realmente fazem algo quando chegam lá, receita, que é o que eles contribuem para a sustentabilidade do site, retenção, que é o que número voltar novamente, e referência, é claro, que diz a um amigo. Então, anote todos os números específicos que você gostaria de acertar. Agora, vamos falar sobre o processo. Como é que vamos alcançar estes objectivos? Como vamos lidar com a web responsiva? Então, um processo típico de design em cascata vai da ideia para planos, maquetes e código. Um processo de design centrado no usuário envolve os usuários em cada etapa da maneira de lidar com feedback o mais cedo possível. Esta é uma mudança importante na perspectiva e, se tiver sorte, o Skillshare fornece-lhe o fórum para apresentar e testar o seu trabalho com os outros. processo de pensamento de design de Stanford descreve isso como empatia. Você quer aprender sobre o público para quem você está projetando. O processo de design centrado no homem da IDEO começa com a audição. Você sai e ouve observações e histórias. O ponto principal é que você precisa conversar com seus usuários. Você precisa ouvi-los e você precisa visualizar sua vida e sua rotina diária, a fim de realmente projetar algo que é apropriado e atraente para eles. Capture todas as suas observações em qualquer forma que melhor lhe convier e você pode usar vários métodos formais para ganhar essa empatia. Está fora do âmbito desta aula, mas procure na agência anteriormente conhecida como Bolt Peters por muitos recursos. Tudo se resume a compreensão. Se você está projetando para alguém que não seja você mesmo, certifique-se de realmente entender a perspectiva deles. Estás a tentar ver o mundo através dos olhos deles. Design é tradução, não arte. Mantenha sua mente o mais aberta possível. Vamos passar por vários exercícios nesta aula e se você largar sua experiência, você pode encontrar algo novo. Então, ao pensar sobre seus usuários, considere seu impacto. Qual pode ser o legado deste projeto porque existem vários formatos que um site pode tomar. Folhetos são o estilo mais antigo onde você está apenas apresentando e organizando algumas informações de texto. Mas jogos e comunidades são agora mais prevalentes ou importantes agora que temos a tecnologia para apoiá-los. Mesmo que você não esteja construindo uma comunidade ou jogo online inteira, você ainda pode usá-lo como seu modelo de design para inspiração interativa e visual. Por exemplo, o Facebook foi projetado como um espelho de comunidades do mundo real. interação principal é como que encoraja as pessoas a postar as coisas mais agradáveis. Jonathan Harris projetou Cowbird como uma plataforma de contar histórias. Suas ações incluem dedicação, broto e muito mais. Ele fala sobre como isso criou uma competição de vulnerabilidade, um sentimento totalmente diferente no site. Então, se pensarmos em nosso site como uma rede social, podemos listar alguns recursos básicos, mas se criarmos uma nova metáfora, isso pode realmente ajudar o site a evoluir para algo novo. Pense também sobre quando as pessoas vão visitar o site, em um momento de tédio, como um hábito ou em busca de um objetivo e lembre-se onde eles podem estar e como seu site pode servir ou se adaptar a isso. O seu site é um mapa para descobrir algo novo ou é um serviço para ajudá-lo a se lembrar de algo importante? Estas são todas metáforas e inspirações, vamos voltar à prática. Então, volte para o documento de esboços do projeto e, novamente, liste todos os seus objetivos para este projeto. Eles poderiam ser altos e altos e também extremamente práticos. Agora, liste todo o conteúdo específico com o qual você precisa trabalhar. Para ser o mais específico possível, queremos pedaços não manchas vagas, como diz Karen Migraine, textos, imagens, vídeos, músicas, tudo o que estiver pronto para ser colocado em seus layouts. Estou fazendo um site para minha amiga Ariel Crass que é professora de ioga. Então, aqui está o tipo de conteúdo que eu posso ter em seu site baseado no que ele já tem em seu site atual. Mas você também quer listar as coisas que você quer criar, um vídeo de introdução, uma biografia, o que quer que seja. Às vezes, o cliente tem essa lista para você, mas muitas vezes ela está incompleta, então você quer pensar sobre isso também. Tente pensar nessas peças discretas, não em páginas inteiras. Quanto mais específicos formos, melhores serão os nossos layouts. A terceira coisa a pensar são fases para este site. Por exemplo, se você estiver fazendo um site de eventos, você terá coisas antes do evento, por exemplo, uma visão geral, uma agenda, um link de registro, mas você também pode ter algum conteúdo diferente durante o evento. Você pode ter uma transmissão ao vivo ou uma transmissão de hashtag que deseja reproduzir quando as pessoas visitam. Depois, você pode mostrar galerias de fotos de todos os participantes, você pode mostrar informações para o registro do próximo ano. Se você listar todo o conteúdo do stream agora, você pode começar a escrever o copywriter e você pode obter fotógrafos começaram a fotografá-lo e ter conteúdo real quando você estiver pronto para projetar. Assim, seu contorno de conteúdo também pode incluir uma lista de participantes, trailers de vídeo, feeds de notícias, links de mídia social, um boletim informativo por e-mail, informações de contato, o bios para as pessoas envolvidas, descrições de seu eventos, uma loja de produtos ou informações de patrocínio. Se alguma dessas situações se aplicar a você, adicione-a ao contorno de conteúdo. Em seguida, você pode ir e perguntar aos desenvolvedores o quão complexo é cada um desses recursos e você pode encaixá-lo para atualização futura se ele vai atrasar seu lançamento. Então, pense neste projeto como a versão 1.0 do seu site, mas é ótimo ir em frente e ter planos para a versão 1.1 ou 2.0. Agora, liste suas ações prioritárias para este site. O que deve acontecer para que este site seja sustentável? Comece com suas necessidades de negócios, basicamente, suas necessidades pessoais a partir deste site. Vamos abordar as necessidades dos usuários em um pouco mais de detalhes em um segundo. Então, liste os usuários que podem visitar este site. Ordene-os por ordem de importância ou frequência e pense em como eles ouvirão sobre o seu site, por que eles visitarão e como você os ajudará quando eles estiverem lá. Finalmente, descreva sua navegação apenas como uma lista aproximada de como você acha que o conteúdo desta versão pode ser agrupado. Mais uma vez, entraremos em detalhes mais tarde, mas é útil ver já como seu site pode começar a tomar forma. Se você quiser ir mais longe com esta parte do processo, eu recomendo altamente Content Strategy por Erin Kissane. É um ótimo livro curto que o ajudará a fazer um plano de conteúdo que durará o longo prazo. Então, vá através e limpe esboços do seu projeto e revise-os com quaisquer visitantes em potencial, se puder. 4. Mapas do site: Neste ponto, eu gosto de fazer um mapa do site e ter uma noção do escopo geral do projeto. Também é muito importante pensar sobre sua navegação e como as pessoas vão se locomover pelo site. Então, se você colocou todo o seu conteúdo em cartões de índice e começou a tentar descobrir quais grupos faziam sentido e quais rótulos você poderia usar para esses grupos, você começaria a ter uma noção do seu mapa do site. Isso é divertido de fazer com Post-its na parede, que você possa movê-los livremente e ficar para trás e olhar para a imagem geral do site ou você também pode fazê-lo em seu computador. Então, a classificação de cartões funciona em sites menores. Ele também mostra o idioma que as pessoas reais estão usando, se você estiver fazendo isso com um grupo de pessoas de testadores. Você pode fazê-lo como uma loja de cartões abertos, onde você organiza todo o conteúdo e depois descobre quais rótulos fazem sentido no final. Ou você pode colocar todas as etiquetas na parede e, em seguida, pedir aos usuários que organizem o conteúdo para corresponder a cada um desses rótulos. Certifique-se de que seu modelo mental está correspondendo ao modelo mental do seu usuário. Para sites maiores, vou em frente e vou ao computador e faço um mapa do site. Eu uso OmniGraffle para suas bibliotecas de símbolos, mas o Google Draws também tem setas magnéticas, isso é tão bom para este propósito. Você deseja incluir todas as telas que devem ser projetadas, construídas ou visitadas. Isso inclui boletins informativos, páginas do Facebook, serviços de terceiros , painéis de administração, qualquer coisa que seja parte da experiência do usuário e que alguém precisará projetar. Você não precisa incluir uma seta para cada seção. Incluí alguns aqui para mostrar-lhe a navegação básica da página inicial, para dizer, a página de retirada e, em seguida, para baixo através do processo de pagamento. Mas se você incluir todos os links em seu site, o mapa do site começa a ficar um pouco esmagador. Todo mundo desenha estes de uma maneira diferente, mas aqui estão alguns estilos que eu acho útil. Você vai notar que eu usei retângulos para todas as páginas normais. Então esta pilha de retângulos indica que este é um modelo, então eu sei que haverá várias versões desta página. Eu também posso obter mais detalhado e fazer codificação de cores. Então, eu faço amarelo para páginas de destino, as páginas mais importantes e onde as pessoas podem vir do Google ou do Facebook. Os clientes e fundadores geralmente se concentram na página inicial, mas as páginas de destino são as primeiras ou mais frequentes impressões de muitos usuários do seu site. Então, pense no BuzzFeed ou Upworthy, você vai às páginas iniciais deles? - Não. Você só pousa nessas páginas de artigos. Então, pense em suas postagens de blog, pense em quaisquer promoções especiais que você terá e realmente destaque essas páginas para que elas tenham a mesma atenção na página inicial. Você também pode destacar quaisquer serviços de terceiros em cinza para que você saiba que esta é uma página que faz parte do seu ecossistema, mas você não precisa projetar esse. Você pode ser capaz de esfolá-lo, mas às vezes você não pode. Então eu gosto de destacar em verde todas as páginas que geram receita. Isso me lembra que eu preciso colocar as pessoas naquele funil, se este site está tentando apoiar alguém. O destaque azul é para o trabalho de marketing. Para startups e outras pessoas que tentam planejar seu site, muitas vezes é planejamento de negócios ao mesmo tempo. Incluindo todas essas propriedades diferentes, como sua página do Facebook ou do Twitter, todos os folhetos que você está criando, o emblema de boca a boca que você está tentando criar, isso os ajuda a lembrar que eles são propriedades adicionais que eles precisam para criar e manter. Em seguida, você também pode destacar em vermelho todas as páginas que exigem login, portanto, proteção por senha ou apenas seu painel de administração básico. Eu também uso cantos arredondados para coisas que podem ser uma camada em vez de uma página autônoma. Então, para mim, esta é a minha camada de sinal. Eu também teria essas chamadas que apareceriam em várias páginas, modo a subscrever o boletim informativo, para compartilhar coisas. Então, você pode ter um bem simples. Parece algo como isto, que apenas lhe dá o nome das páginas, este agrupamento áspero de conteúdo, ou você pode ter um super envolvido. Isso foi para um projeto de vários anos em que trabalhei, onde eu estava codificando cores cada plataforma que estávamos usando. Era uma agregação de código aberto de quatro plataformas de código aberto diferentes. Esta foi a visão de longo prazo de como a plataforma funcionaria quando colocamos os sistemas funcionando juntos pela primeira vez, mas obviamente, é um pouco esmagador se você estiver apenas fazendo um pequeno site para um pequeno grupo de pessoas. Tente criar um mapa do site que revele o escopo do projeto de uma maneira que seja útil para você. Ele esclarece as ações prioritárias no site e coloca todos os membros da equipe na mesma página. Então, você vai para o Google Drive e você vai criar um novo desenho e você terá essa tela em branco. Você pode passar pelas diferentes formas, as diferentes setas. Essas são as ferramentas mais importantes. Mas é claro, você pode polir isso para ficar tão bonito quanto você quiser. Então, percorra o mapa do seu site, crie um retângulo para cada tela ou seção, faça pilhas de retângulos para modelos e lembre-se de codificar a cor para que você possa obter uma visão geral de alto nível das prioridades para este site. 5. Diretrizes de marca: Nosso próximo passo são as diretrizes da marca. As pessoas nem sempre querem ter tempo para este passo, mas é super importante se você quiser que seu projeto tenha uma sensação consistente. Faça o download do arquivo de diretrizes da marca na seção do recurso se quiser acompanhar. A próxima aula desta série será aprofundada sobre design visual, mas você precisa ter uma idéia da personalidade da sua marca no estágio UX também. Que palavras você usará como rótulos? Você vai contar sua história através de imagens, diagramas, ou outra coisa? Esses elementos são todos parte da experiência do usuário, e agora existem milhões de sites no mundo. Portanto, uma personalidade única e consistente é essencial tanto para a funcionalidade quanto para o impacto. Por exemplo, a Casa Branca tem uma imagem específica que está tentando transmitir que é muito diferente do que você pode esperar da Disney ou da Starbucks. Então, como você articula isso? Como você coloca isso em diretrizes que todos podem usar? Há um livro de marca de Papai Noel que foi colocado para fora como uma espécie de piada, mas que na verdade lhe dá uma idéia realmente boa de como essas coisas tendem a funcionar sobre os sentimentos e os valores de sua marca particular. Então olhe através dele para uma visão geral engraçada. Outro grande exemplo de personalidade da marca é MailChimp. Eles fizeram muito trabalho sendo realmente criativos e consistentes em várias plataformas diferentes. E Aarron Walter, que trabalha na Nalgene, tem um ótimo livro para lhe dar mais informações sobre esse processo, que se chama Designing for Emotion. E usamos alguns exercícios dele para completar nosso esboço também. Aqui está um exemplo do que ele chama de personalidade de marca. Onde você explica ou eles têm um personagem real que está segurando um pouco da personalidade, mas para nossos propósitos, pensaremos em como uma celebridade que pode representar nossa personalidade. Ele também faz traços de marca no formato X, mas não Y, então você tem uma espécie de gama que sua marca vai cair dentro. E então você também fala sobre seus métodos de engajamento ou seus métodos de interatividade que seu site pode usar para transmitir sua personalidade. E lembre-se também de que se trata de seus usuários. Você não está tentando se representar a menos que este seja o seu site de portfólio, mas você quer pensar sobre o que vai encantar e encantar seus usuários. Então use a linguagem deles, não necessariamente a sua, tente fazê-lo em um estilo que lhes dê algo que eles se orgulham de possuir, e pense nas imagens que são aspirantes para eles, não necessariamente nos detalhes banais de um dia hoje. Então, quando fazemos tudo isso, ele nos dá uma direção consistente ao longo de cada etapa do design. Então, novamente, pensar nisso como uma celebridade é uma boa maneira de começar. Então sua personalidade é super sofisticada e mais formal, é mais jovem e inocente e cheia de energia? Que celebridade você pode escolher para representar a personalidade do seu site? Então comece listando os melhores recursos da sua marca. É sobre como você é experiente em tecnologia, é sobre quão amigável você é, quão rápido, o que quer que esteja tentando passar. Faça uma pequena lista de todos esses recursos. E então, se você olhar para esta escala de personalidade que eu escrevi, trama onde você quer cair em cada um desses intervalos. Você é mais profissional ou mais casual? Você está mais bem estabelecido ou você é mais vanguardista? Não tenha medo de se inclinar para um lado ou para o outro. Isso vai te dar algumas pistas de design bem claras mais tarde. Então, tire algum tempo e olhe através de cada uma dessas escalas e traça onde você está agora e você também pode traçar onde você quer estar se isso é algo diferente. Assim que tiver resolvido a celebridade do seu representante, certifique-se de ter explicado o porquê. Então é sobre sua atitude de trabalho duro, ou é sobre o senso de glamour, ou é sobre a abordagem ou o conhecimento que eles representam. Então as razões são mais importantes do que a pessoa que você escolheu. O próximo passo depois disso é descobrir que tipo de linguagem visual pode expressar sua personalidade. Então, que tipo de cores, elas seriam barulhentas, seriam silenciosas, seriam retrô, seriam neon e futuristas, que tipo de escolhas apertadas, seria tudo Caps, super formais, seria casual e apressado, seria scripts como mais escrito à mão. Então, pense em todos esses tipos de dicas visuais que sua marca pode ter. E, finalmente, liste seus métodos de interação. Você verá alguns exemplos no documento de diretrizes de marca. Então, se você está tentando ser amigável, você pode fazer perguntas ou você pode dar dicas para seus usuários. Se você está tentando ser sofisticado, você pode usar técnicas de animação mais modernas e você pode usar layouts responsivos e se você está tentando ser divertido, você pode usar humor, jogos ou surpresas em todo o seu layout. Portanto, pense em algumas dessas ideias e faça um esboço de todas as peças da sua marca, pois elas podem se relacionar com o design do seu site. 6. Stories do usuário: Agora, é hora de pensar em histórias de usuários. A maior coisa a lembrar sobre Web Design é que é 4D não 2D. Você está projetando experiências ao longo do tempo, não composições planas. Não importa como photoshop pode fazer você se sentir de outra forma. Experiências do usuário é a sensação que um usuário recebe como eles passam por um processo. Você quer que ele seja super simples e focado e mínimo, como a página inicial do Google, ou você quer ser louco, inspirador e divertido., com muitas pessoas ao redor. Como este site Jameson, podemos pensar nisso como uma história e suas técnicas de contar histórias para nos ajudar a planejar. Assim como as histórias têm um arco narrativo com uma cena de abertura, as várias crises de ação, um clímax e, em seguida, uma resolução, podemos pensar em nossas jornadas de usuários como tendo um começo, um meio e um fim, e talvez até mesmo um epílogo. Onde usamos histórias, elas são muito mais relacionáveis. Assim, por exemplo, o site do Karma Wi-Fi, nos apresenta John que está constantemente em movimento e precisa se manter conectado. Enquanto você rola para baixo, ele mostra a configuração de seu hotspot de Karma, encontrando outro usuário, contando sua história, percorrendo o processo de como o serviço funciona e, em seguida, os benefícios de usá-lo. É muito mais atraente, muito mais relacionável do que um monte de especificações técnicas. Mas o que é um produto muito técnico. Histórias também muito mais emocionais e tocantes do que apenas informações ou um folheto. A água da caridade faz um ótimo trabalho de contar histórias diferentes sobre como seu presente vai ajudar, como eles começaram, por que você deve doar para eles em vez de qualquer outra caridade. Eles usam muitas fotografias pessoais, muitas fotografias de close-up, um monte de histórias pessoais para torná-lo muito mais impactante e muito mais realista. Dentro da história principal enquanto você rolar para baixo sua página inicial, há até uma sub-história sobre aqui é um cenário provável se sua aldeia recebe um projeto de água. Então, você como um doador poderia visualizar exatamente como seu presente vai ajudar. Histórias também tornam seu site muito mais exclusivo. Então, a Sony diz, somos engenheiros, mas também somos artistas, e se você passar por este site são exemplos loucos de animação e criatividade para mostrar que eles não são apenas mais um produtor de hardware, mas que eles realmente vêem isso como artístico criatividade na forma como eles projetam as coisas, o que as torna muito diferentes de talvez qualquer outro fornecedor de eletrônicos. As manchetes chocantes também podem contar uma história diferente para chamar a sua atenção, esta é sobre escravidão em todo o mundo e que ainda está em existência de uma forma que você pode não pensar e então alguns prompts para perguntar algumas perguntas ou para direcioná-lo para o próximo passo, dependendo de quais são seus interesses. Então, eles também são chamados de fluxos quando você está tentando direcionar as pessoas ou o que são segui-las por caminhos diferentes em todo o seu site. Então, no livro do mundo do marketing, eles são chamados de funis, então você pode medir quantas pessoas visitam o site e, em seguida, qual porcentagem dessas inscrições, qual porcentagem dessas pessoas entram em sua avaliação, qual porcentagem de eles inserem suas informações de cartão de crédito e , em seguida, qual porcentagem desses se tornam um cliente pagante. Você estuda cada passo desse funil para ver onde as pessoas estão caindo e então você pode fazer testes AB para tentar melhorar cada passo do funil. Em seguida, quando você entra em design de experiência, você também pode mapear seu humor durante esta parte do mesmo e isso ajuda você a tentar projetar seu site para apoiar seu cliente de uma forma mais pessoal. Então, você pode pensar antes mesmo de eles chegarem ao seu site, eles estão fazendo alguma coisa, eles estão fazendo alguma pesquisa, talvez eles estão no Google, talvez eles estão no Facebook. Qual é o seu humor lá quando eles chegam pela primeira vez à sua página inicial. Em seguida, é claro que eles mudam de humor à medida que se movem ao longo das etapas do seu processo, e depois de se inscreverem no seu evento ou enviarem um e-mail para você, eles também podem ter algumas perguntas de acompanhamento ou sentimentos que você também pode abordar através de diferentes técnicas. Então, Google e outras ferramentas de análise, mapeie isso como um fluxo detalhado novamente, onde você pode ver todas as diferentes fontes que estamos pensando sobre como as pessoas começaram esse processo, onde eles pousam e, em seguida, o que acontece em seguida e novamente torna-se uma linha do tempo. Então, eles não são layout 2D, mas isso é como mostrar o caminho de alguém através do tempo em seu site. Então, como vamos traçar essa jornada? Algumas pessoas fazem persona, mas na minha experiência essas se transformam em estereótipos onde você começa a hipotetizar, o que essa caricatura pode fazer. Então, você quer se certificar de que você está começando a partir de uma pesquisa de usuário real, de uma compreensão real de seus usuários e, em seguida, sintetizá-los como funções. Então, um filantropo generoso é um de seus usuários mais valiosos ou lutando no segundo ano é um de seus usuários mais frequentes. Depois, pense em quais são os objetivos de cada um deles. Então, eles podem ter um objetivo principal ou podem ter vários objetivos enquanto estão no seu site. Você vai traçar cada um separadamente. Então pense no que eles precisam de você para alcançar esse objetivo. Então, por exemplo, esse filantropo generoso que quer fazer do mundo um lugar melhor, eles só precisam de confiança que seu dom será eficaz se eles decidirem dar a você. Considerando que, se você está fazendo dizer um site de tutorial de fotos, o segundo ano, seu objetivo é se tornar um fotógrafo algum dia e então eles precisam de treinamento básico através de tutoriais curtos. Então, se você está realmente pensando sobre o que esse usuário real precisa, seu conteúdo será muito mais específico. Então, você pode esboçar isso de novo, eu gosto de notas pegajosas porque isso tira você do seu computador por um tempo. Pensando no seu papel como o ponto de partida da viagem, todo o caminho à esquerda e depois tentando traçar cada pequeno passo ao longo do caminho para que eles alcancem esse objetivo. Então, isso pode ser que eles ouçam sobre o seu site de um amigo e então eles o Google. Em seguida, eles aterram na página de suas aulas e então eles navegam através de suas aulas e, em seguida, eles escolhem uma e lêem a descrição. Em seguida, eles se inscrevem e então eles saem e depois eles assistem à aula. Há um monte de passos se você realmente quer entrar em detalhes. Então, tente identificar seus usuários mais importantes e seus principais objetivos e traçar todas essas etapas. Então, você pode usar um lápis e papel. Eu tenho esses cadernos de Muji que eu gosto que têm praças pré-desenhadas sobre eles ou novamente stickies são divertidos, você pode colocá-los na parede e, em seguida, eles são fáceis de reorganizar. Então, lembre-se que é apenas você está começando o estado eo objetivo final e você está tentando preencher todos os passos entre eles. Então, para este novato foto procurando treinamento, nosso fluxo pode ser parecido com isso. Seu primeiro passo seria eles estão Googling tutoriais de fotografia e por isso queremos pensar, em vermelho é a nossa resposta que gostaríamos ter certeza de que otimizamos nosso site para essas palavras-chave. Em seguida, do Google eles pousam em nossa página inicial e por isso queremos pensar sobre, oh este novato gostaria de ver talvez as classes mais populares. Então você quer apenas preencher para cada uma dessas etapas. Agora vá e preencha o conteúdo prioritário que suportaria o que você deseja que eles façam em seguida ou o que eles querem fazer a seguir. Então, histórias podem ser orientadas para objetivos. Como acabamos de descrever. Eles também podem ser exploratórios no entanto. Então, se você estiver no Pinterest ou em um site com muito conteúdo, você pode estar apenas lendo e navegando e dizer que você pode traçar um desses se estiver fazendo um site onde as pessoas estarão navegando. Mas eles também começam a emergir esses requisitos funcionais. Então, você começaria a ver que, oh, precisamos ser capazes de destacar as classes mais populares ou precisamos ser capazes de classificar por preço ou qualquer outra funcionalidade que essa pessoa possa querer. Então, é por isso que você quer percorrer eles em detalhes, e novamente eles geralmente revelam lacunas. Você tem este esboço de conteúdo que talvez seu cliente tenha fornecido você pensou, mas quando você percorre as histórias em um formato linear, você vai começar a perceber páginas e conteúdo negligenciados, e há sempre mais um passo para a história. Depois de saírem do seu site, podem contar a um amigo. Eles podem voltar mais tarde. Como é a experiência deles como um visitante de retorno? Mas pense sempre nesse último passo. Mesmo que seja geralmente se inscrever, há uma grande chamada à ação, então, depois disso, você quer agradecer-lhes. Você pode dar a eles uma recompensa que pode ser um bom momento para coletar alguns comentários, o que mais você gostaria de ver em nosso site? Gostou daquela aula? Você também pode recomendar outras atividades se quiser ajudá-los a tentar navegar, seu site e ver algum conteúdo que eles podem ter desviado. Você também pode sugerir que eles sigam você, subscrevam sua newsletter, mantenham contato para que eles não percam qualquer serviço que você está prestando e, em seguida, também se divirtam um pouco com ele. Você pode contar-lhes uma piada, surpreendê-los, dar-lhes algo divertido depois terminarem um pedaço específico do seu site. Então, percorra e liste todas as suas histórias de usuários. Identifique seus principais usuários, os mais importantes e também os mais frequentes. Liste os principais objetivos para cada um deles. O que eles estão tentando alcançar e, em seguida, também o que você precisa deles para alcançar e , em seguida, lista cada passo para alcançar esse objetivo e como você vai apoiá-lo. Novamente, você pode usar adesivos, papel ou computador. Depois de ter todas essas histórias escritas, volte e agrupe todas as necessidades de cada página. Então, por exemplo, este fotógrafo novato pode precisar de uma coisa da página inicial, mas um fotógrafo profissional pode esperar uma primeira impressão muito diferente. Então, você vai ter que, cada página vai ter um conjunto de requisitos para muitos usuários diferentes e, em seguida, você vai ter que classificá-los em ordem de prioridade. Obviamente, você não pode fazer todo mundo feliz, mas seu layout vai tentar. 7. Wireframes/Protótipos de papel: Agora, estamos prontos para passar para wireframes e protótipos de papel. Você quer começar com esboços. É bom ficar solto e trabalhar com o computador quando você está tentando criar suas idéias originais. Eu amo essa citação de Jason Santa Maria que, cadernos ou não sobre ser um bom artista, há sobre ser um bom pensador. Então, não se preocupe com suas habilidades de desenho. Tente não ser auto-consciente sobre o que você está colocando na página, você está apenas tentando capturar todas as suas idéias de uma forma que você pode classificar através delas. Então, você pode fazer isso através de um monte de aplicativos malucos para iPad agora ou apenas seu caderno de esboços o que o torna mais confortável para que você possa renderizar suas ideias em um nível de clareza apropriado. Então, para o meu site de yoga, eu costumo fazer Sharpie para contornos ousados e, em seguida, uma panela mais leve para preencher alguns detalhes, obviamente o texto vai parecer muito diferente quando entrarmos em design. Não é realmente sobre isso, é sobre nós estamos tendo o horário da aula ou apenas o dia na página? Estamos tendo um padrão ou seis padrões? Você só está tentando descobrir o que vai estar na página e o que as pessoas vão ver primeiro, segundo, terceiro etc. Então, aqui está o meu fluxo de usuário saindo como esboços e, novamente, comecei a tentar indicar qual o conteúdo de suporte para cada página. Então, eu estou pensando sobre qual é a primeira impressão para essa pessoa, qual é o conteúdo de suporte e, em seguida qual é o apelo à ação para cada etapa do processo. Novamente, o papel na minha experiência é a melhor maneira de capturar ideias criativas. Você não está limitado ao software, você não está mexendo com seus atalhos de teclado e ele é limitado em certos aspectos. Claro, você só pode fazer um certo número de desenhos de papel em um certo período de tempo. Porque você não pode copiar e colar, você não pode duplicá-los a menos que você esteja ficando realmente louco com a máquina de copiar e com sua tesoura e fita adesiva. Então, quando nos movemos para wireframes, esta palavra significa muitas coisas diferentes para pessoas diferentes. Os engenheiros podem esperar todos os requisitos técnicos, eles gostariam de saber quando esta tela está salvando no banco de dados? Quando nossa mensagem de erro está sendo acionada? Qual é a aparência de uma versão desconectada? Considerando que, seu gerente pode esperar os contornos em cada elemento na página na mesma posição como eles aparecerão como o design final. Os designers podem esperar que esses wireframes descrevam as prioridades para a página, mas eles podem não esperar levar o layout tão a sério. Então, você deseja confirmar o que sua equipe está esperando antes de iniciar wireframes. Para este projeto, vamos nos concentrar em wireframes que esboçam o conteúdo principal e a funcionalidade para que possamos testar nossas histórias de usuários mais importantes. Aqui está um exemplo do que eu fiz para CreativeMemornings. Onde isso estava ajudando a equipe de desenvolvimento a ver que queríamos ser capazes de classificar por continente, classificar por alfabeto, classificar por arco-íris. Queríamos ter um início um capítulo ou link, queríamos ter um estado pairando em um mapa, precisávamos ter um mapa. Então, eles podem começar a fazer todos os seus planos técnicos e nos informar quanto tempo nossas idéias vão levar para construir. Mas este é obviamente ainda um formato áspero o suficiente que eu como designer, eu não posso começar a escolher cores, eu não posso começar a mexer com os layouts. Isto nunca vai ficar bonito. Se o seu wireframe começar a ficar bonito, você está gastando muito tempo com eles. Eles realmente são apenas sobre capturar ideias e funcionalidades. Aqui está outro que eu fiz para este aplicativo de livros que eu mencionei, Riffle. Originalmente, eu tinha um conceito chamado Book Drop, onde era tudo sobre uma interface de arrastar e soltar. Eu realmente queria um recurso onde se você não gostasse do livro você poderia arrastá-lo para um poço de fogo e vê-lo queimar não pode ir tão bem. Mas foi divertido colocar essas ideias no papel e fazer com que as pessoas entendessem o que estávamos falando. Novamente, falamos sobre o que acontece quando você recomenda o livro a um amigo que gera uma mensagem, que tipo de mensagem? O que essa mensagem diz? Há um monte de sub-etapas em qualquer site de inicialização especialmente, um monte de sub-peças que precisam ser abordadas. Quando você faz estes clicáveis, você também é capaz de então testar a interatividade deles. Então, idealmente antes de vincular todos eles, você quer ter certeza de que você começou a classificar essa hierarquia de necessidades para cada página. Mas as necessidades que você determina através de suas histórias de usuários. Felizmente, você incluiu toda a funcionalidade necessária e o conteúdo principal e começou a ver onde você tem problemas de layout. Se você está pensando que você vai alinhar todas essas fotos como um panorama, mas então acontece que nenhuma de suas fotos está formatada dessa forma, você está começando a ver algumas dessas coisas e talvez começar a fazer outros planos à medida que visualiza o site. Também precisamos considerar o contexto na era do design responsivo. Então, o Google fez um enorme estudo de pesquisa chamado The Multi-Screen World e fala sobre como o contexto determina qual dispositivo uma pessoa vai pegar. Então, nós costumávamos estereótipo que os usuários móveis estavam fora e sobre. Eles estavam na rua ou na fila, mas agora sabemos que as pessoas geralmente pegam o telefone quando estão sentadas no sofá. Você não quer ir para o outro lado da sala para entrar no seu laptop ou não quer voltar ao seu computador e começar a trabalhar. Então, você pode pegar um telefone devido ao tempo que você tem, porque você tem um certo objetivo que você está tentando alcançar, por causa do local específico onde você não tem acesso a um dispositivo ou outro ou também apenas seu estado de espírito. Como as pessoas vêem seus telefones obviamente como um dispositivo pessoal, geralmente é apenas uma relação um-para-um de alguns com o telefone. Um computador pode ser compartilhado entre várias pessoas ou pode ser algo que eles só têm no trabalho. Um tablet às vezes preenche esse papel intermediário onde pode ser mais como um centro de mídia, talvez seja apenas onde eles assistem filmes ou apenas onde eles ouvem música ou apenas onde eles jogam jogos. Então, pense nos contextos específicos para cada um desses dispositivos enquanto começamos a planejar como nossos layouts vão refluir para eles. Novamente, os telefones podem iniciar um processo, mas talvez não esteja onde você o conclui. Então, o estudo diz que 65 por cento das tarefas de pesquisa são iniciadas no smartphone, mas então você pode ir ao seu computador para continuar o processo. Então, se você estiver planejando uma viagem, se estiver tentando fazer compras on-line, talvez tente ver se algo está em estoque no seu telefone. Mas então você pode ir para uma tela maior quando quiser comparar opções, ou tentar fazer planos, ou começar a compilar um documento de pesquisa, então pense nisso também. Muitas vezes, o telefone ou os dispositivos móveis sobre a coleta de informações e os layouts da área de trabalho são sobre organizá-los ou compartilhá-los. Já não há apenas três que costumávamos dividir as coisas em dispositivos móveis, tablets e desktop, mas temos que perceber que há muitos fabricantes de hardware agora. Então, pense nisso como móvel, tablet. Esses dispositivos de tamanho médio ou dispositivos de tablet, mas não podemos mais projetar para larguras de pixel específicas. Então agora, você quer escrever histórias contextuais listar cada um dos seus principais contextos para que você possa começar dizendo apenas tablet móvel e desktop e você deseja listar os objetivos prováveis em cada um. Então, alguém no celular pode estar procurando seu endereço, alguém na área de trabalho pode estar tentando se inscrever, inserir todas as informações do cartão de crédito. Seja o que for listar quaisquer objetivos específicos para cada contexto e novamente, lista todos os passos para alcançar cada objetivo. Em seguida, volte aos requisitos de sua página e adicione essas necessidades adicionais para cada contexto. Mas lembre-se também que você pode reduzir suas necessidades. Às vezes, as pessoas em um celular não precisam de tudo o que você está oferecendo no site. Então, você também pode ser capaz de simplificar seu site para diferentes dispositivos. Então estaremos prontos para iniciar o processo de grampeamento. Novamente, wireframes são sobre foco no conteúdo e apenas colocar coisas na página, eles não estão bloqueados layouts. Eles ajudam você a começar a descobrir alguns problemas de layout mas você vai revisar todos esses layouts durante a fase de design visual. Então, concentre-se em colocar as coisas na página. Então, a revista Smashing fala sobre interrupção lógicos versus esses pontos de interrupção específicos do dispositivo. Então, você poderia dizer, tudo bem, em uma tela estreita se eu tivesse apenas uma pequena quantidade de espaço, eu precisaria da navegação e eu precisaria do texto principal da página. Mas se eu tivesse um pouco mais de espaço, eu colocaria alguns anúncios lá porque isso vai ajudar meu negócio a sobreviver. Se eu adicionar ainda mais espaço, então eu vou em frente e mostrar os comentários do usuário para que eles comecem a ter uma noção da comunidade e ação acontecendo neste site. Então, pense nos pontos de interrupção externos do conteúdo em vez de apenas inventar para dentro. Eu também penso nisso como a abordagem Cachinhos Dourados. Já que normalmente vou desde o planejamento até o desenvolvimento, há muito tempo para fazer. Cachinhos Dourados estava novamente quebrando as coisas em layout ish. Então, é pequeno, médio e grande. Chamam-lhe bebé, mamã e papá urso contra o meu iPhone. Três layout, meu layout do iPhone 5, o layout do Android. Normalmente, não há tempo para fazer um layout para cada dispositivo. Então, pense nisso como três contextos gerais. Então, é útil começar. Eu vou a Balsamiq neste momento. Então, eu posso copiar e colar e novamente, duplicar e você pode vincular as coisas e torná-los camada interativa. Eu gostaria de começar, talvez, colocando todas as páginas próximas uma da outra. Então, eu posso simplesmente copiar e colar muito facilmente e começar a ver como cada layout reage. Balsamiq é uma ferramenta muito útil porque tem Biblioteca de Símbolos. Então, você pode simplesmente arrastar e soltar menus, você pode arrastar e soltar barras de link. Você não precisa recriar todas essas coisas pelo pixel no Illustrator. Ele foi construído em estados selecionados ou desabilitados. Novamente, ele permite vincular suas páginas para que você possa fazê-las interagir e interagir com PDF ou um link para um protótipo. Então, isso é realmente importante porque quando você está fazendo sites responsivos, você tem pelo menos três vezes o layout. Então, você precisa ser o mais eficiente possível. Então, novamente, concentre-se na funcionalidade e na hierarquia básica aqui. Se começar a parecer bom, você está demorando muito com isso. Certifique-se também de olhar através da Biblioteca de Símbolos Balsamiq e familiarizar-se com todos os seus diferentes elementos. Em jogos HTML real e padrões muito bem. Então, é muito mais realista como uma ferramenta de Web design do que o Photoshop. Você também pode olhar através de seus modelos de site para ir para um monte de outras bibliotecas de símbolos, por exemplo, todos aqueles painéis de compartilhamento do Facebook elementos iOS e você também pode fazer seus próprios símbolos importando imagens para o programa ou usando outras bibliotecas. Então, quando você tem esse arquivo de todos os tamanhos, eventualmente você quer dividi-lo em um perfil de layout para que possamos testá-los. Então, se você olhar para as abas inferiores nesta tela, você pode ver que eu tenho o meu que seis páginas mais um menu todo simulado e então você pode ver Balsamiq me mostrando os links que eu fiz para todas as páginas diferentes. Então, haverá clicável. A outra coisa útil é que, licença, você também pode aumentar seu vocabulário de Web design olhando para sites como Pattern Tap, UxLab, padrões de biblioteca e muito mais. Confira meu guia de recursos para alguns sites favoritos porque todos estamos trabalhando com o mesmo alfabeto de elementos HTML. Mas há um milhão de maneiras de combinar esses textos, esses botões em todos os tipos de novos padrões de experiência do usuário. Para criar bons wireframes que são realmente úteis para jogar e testar, certifique-se de que você está usando texto real e não Lorem Ipsum, que você esteja projetando conteúdo real e seus usuários obtenham o ponto em vez de ser apenas um arranjo anônimo de caixas. Certifique-se de rotular qualquer imagem. Então, se você soltar um grande retângulo cinza na tela ninguém vai saber o que isso significa a menos que você rotulá-lo paisagem do Perú então eles vão entender quando você está fazendo o teste do usuário. Então, percorra seus wireframes e comece com seus layouts móveis e concentre-se na hierarquia de necessidades para cada página e, nesse contexto, para cada um de seus usuários. Então eu gostaria de ir para o maior layout e fazer a versão desktop. Então, tentando tirar o máximo proveito da tela grande e, em seguida, eu vou para os layouts de tablet e ver como está o meio termo. Às vezes vou direto para o navegador e fazer algum código para isso, mas também é útil fazê-los em sua fase wireframe e ver como seus layouts se mantêm. 8. Teste de usuário: Ok, você redigiu seus wireframes. Agora, você quer testá-los. Por quê? Porque você vai poupar algumas dores de cabeça nas fases de design e desenvolvimento. No web design, temos que admitir o que é chamado de Malkovich Bias, que é a tendência de pensar que todos usam a Internet da mesma forma que nós. Mas quando você vê alguém realmente tentar passar por seus belos layouts, é uma experiência esclarecedora e muito humilhante. Eles não conseguem encontrar o botão que você pensou ser tão óbvio. Eles estão perdendo uma grande seção de conteúdo. Isso realmente força você a olhar para seus layouts de uma nova maneira. Então, aqui está outro exemplo disso de usertesting.com. Como é a experiência no seu site ou aplicativo? Oh, pessoal, vocês não têm zoom de novo. Isso é terrível. Como vou ver todas as costuras? Que vergonha para você. Uau. Então, toneladas de lojas. Eu realmente não sei dizer qual deles está mais próximo. Eu gostaria de dar uma olhada naqueles especificamente, apenas a única fonte. Estou a clicar aqui para ver, mas não está a acontecer nada. Então, deixe-me tentar contatá-los. Certo, bem, eu não estou no Outlook, então isso é um problema para mim, porque eu não posso usar isso. Isso é um pouco mais do que eu estou olhando para gastar , então eu vou tentar reduzir para baixo por preço aqui. Vamos tentar 50 e abaixo. Sabão de prato? Então, vemos que há um monte de coisas que realmente não pretendíamos acontecer que aparecem e você pode obter esse tipo de feedback mesmo em seu wireframe. Você pode começar a ver a hierarquia principal se eles estão obtendo e como a navegação está funcionando. Então, volte para seus esboços ou Balsamiq e faça links entre todas as páginas. Então, no Balsamiq, você só vai soltar, há um menu suspenso para selecionar links e, em seguida, você vai exportá-los como um PDF interativo ou você pode exportar todas as páginas como PNGs e vinculá-los no aplicativo InVision. Então, você vai acabar com algo assim em que você tem todas as suas páginas diferentes e você vai vinculá-los juntos para que alguém visualize todas elas, parece que eles estão clicando em um site esboçado. InVision é uma ferramenta onde você pode carregar uma pasta inteira de PNGs e então alguém pode abrir esse link em seu telefone e quando tocar nos vários botões e links, ele vai levá-los para as várias telas em seu PDF. Então, essas são as duas principais ferramentas que eu uso para esboços clicáveis. Se você fez todos os seus wireframes em lápis e papel, você também pode usar o aplicativo InVision. Então, basta tirar fotos de todos os seus esboços de papel e depois carregá-los para o InVision e, em seguida desenhar pontos de acesso e você pode vinculá-los a partir daí. Ou você poderia sentar-se lado a lado com alguém e fazer alguns testes presenciais de um protótipo de papel e você iria apenas fazê-los apontar para o botão e então você mostraria a eles o próximo pedaço de papel. Então, essa é outra maneira realmente lo-fi, muito rápida de você obter feedback no primeiro dia sobre suas idéias. Então, quando você está fazendo esse teste real, há algumas diretrizes importantes para ter em mente para que você não esteja tendenciando seus resultados. Leia Remote Research, o livro, e também olhar para o site para um monte de dicas sobre como você pode fazer isso. Você pode testar as pessoas através do seu site, através de laboratórios, pessoalmente, todos os diferentes tipos de pesquisa que você pode fazer. As diretrizes básicas no entanto são que você deseja se concentrar em indivíduos e não em grupos focais. Humanos definitivamente têm um comportamento de rebanho e se você colocar uma multidão de pessoas em uma sala, eles vão olhar um para o outro antes responder e você não vai ter opiniões honestas. Além disso, certifique-se de que você está falando com usuários qualificados e nem todos no mundo vão adorar seu site ou usá-lo. Então, você quer ter certeza de que você está falando com as pessoas que estão realmente entusiasmadas com o seu site e que eles vão lhe dar o melhor feedback. Você também tem que tentar ser o mais neutro possível. Então, você não gostaria de dizer “Esta nova página inicial é melhor que a última?” Porque isso está levando a testemunha. Você gostaria de dizer “Qual dessas duas versões você prefere?” Você quer tentar ser o mais neutro possível. Sua tendência, assim como um ser humano, vai querer ser acenar e dizer “Sim, isso é certo”, e dar-lhes algum incentivo ou algum feedback, mas você quer permanecer muito neutro e dizer interessante ou perguntar-lhes porquê. Por que você diz isso? Por que acha que deveria estar aqui? Pergunte a eles o motivo do feedback que eles estão dando a você e tente obter as motivações deles. Porque de novo, essas são ideias que você está colocando no papel. Eles não são layouts polidos e você está apenas tentando obter o feedback sobre essas idéias básicas. Então, para se preparar para esta entrevista, pegue suas histórias de usuários mais importantes e você deseja formulá-las como cenários que a pessoa que você está testando possa visualizar o que você quer dizer um pouco melhor. Então, na sua história de usuário, você pode ter um usuário que já comprou uma câmera e agora precisa entrar em contato com o suporte. Assim, para o seu teste de usuário, você pode ter algo como ter encontrado um erro em sua conta e precisar entrar em contato com o serviço de atendimento ao cliente. Então, isso permite que eles imaginem um pouco mais claramente o início da sua história. Em seguida, você vai escrever tudo isso em um script claro para guiá-lo enquanto você faz os testes do usuário. Então, primeiro, você lhes dará algum contexto, então como ou por que eles chegaram ao seu site. Então, isso é exatamente como seria no mundo real. Um amigo pode enviar-lhe um link e está a verificá-lo devido à recomendação do amigo, ou pode ter uma necessidade específica que o está a levar a utilizar o seu site. Então, se você é um calendário de eventos, eles diriam, “Tudo bem, eu estou tentando fazer...”, você os ajudaria a imaginar que eles estão tentando fazer um plano com dois amigos. Então, isso lhes daria a perspectiva de que eles precisam para julgar seus layouts em uma mentalidade apropriada. Então você quer obter as primeiras impressões. Qual é a primeira coisa que você vê que chama sua atenção e o que você acha que este site faz? Com seus esboços, será principalmente sobre as manchetes que você escolheu, talvez algumas imagens rotuladas se você as tiver, mas isso só permite que você saiba se essas coisas estão funcionando. Você quer apresentar essas telas sem dicas ou instruções, então pergunte a eles o que eles veem primeiro lugar, o que você faria em seguida e o que você esperaria acontecer quando você fizer isso? Então, por exemplo, você vê este post no Facebook. O que você se lembraria sobre isso? O que farias e o que esperavas que acontecesse? Em seguida, mostre-lhes a próxima tela. Peça-lhes para narrar seus pensamentos, perguntas e sentimentos ao longo desta experiência. Você pode tentar e tomar notas enquanto você está guiando-os através dele ou você pode gravar a sessão com o seu telefone ou com algum outro tipo de gravador ou você pode pedir a um amigo para vir junto e tocar escriba para você. Depois disso, você vai dar e observar essas tarefas, esses cenários principais que você quer ter certeza de que são realmente utilizáveis e muito fáceis. Então, um de cada vez, você vai fazê-los passar por isso e você vai apenas dizer, “Imagine que você está tentando entrar em contato com o suporte”, e você vai apenas vê-los clicar no seu protótipo e você vai observar. O que os distrai, onde você tem outra coisa que está atrapalhando sua atenção, quais rótulos ou layouts os confundem. Por exemplo, se sua loja estiver rotulada como Coleção mais recente ou o que eles esperam de seus rótulos de navegação. Então você também pode notar a rapidez com que eles atingem os objetivos. Então, eles são necessários 10 cliques apenas para adicionar um produto ao carrinho ou isso é algo que você pode reduzir para nove ou oito? Cada um desses fluxos, queremos tentar fazer o mais simples possível. Então você vai terminar. Obtenha alguns comentários gerais. Este site é útil para você? O que mais você gostaria aqui? O que você normalmente usaria para fazer algo assim? Como este site se compara a isso e, em seguida, qual é a coisa mais memorável sobre este site? Isso dá a eles a impressão geral, e novamente, nesta fase de esboço, será principalmente sobre suas idéias e sobre seu conteúdo. Você pode parar seus testes assim que tiver resultados consistentes dessa fase. Então, você deve começar a ver padrões após cerca de cinco ou 10 testes, espero que depois de cinco de acordo com Jacob Nielsen e alguns outros grandes pesquisadores de usabilidade. Assim, uma vez que você tenha alguns insights claros, você pode ir em frente e iterar seus protótipos. Então, construa algo que seja muito rápido. Você pode alterar o layout se ninguém estiver entendendo onde clicar. Você pode mudar a manchete se todos acharem que é idiota e você pode ir em frente e testar novamente com suas próximas pessoas. Então, passe e faça seu plano de testes. Escreva quais são seus objetivos, o que você quer explorar. Neste, pode ser que você queira testar sua funcionalidade e testar seu conteúdo. Você quer anotar suas exigências de quem é qualificado. Então, se é um site de portfólio, você está se candidatando para uma determinada indústria? Será que vai ser uma certa pessoa com um certo nível de educação em design que vai estar julgando o seu trabalho ou vai ser algo onde você quer que todos sejam capazes de usar o seu site? Então você quer listar suas ferramentas que é como você está planejando alcançá-las. Então, você vai fazer um PDF clicável? Você vai usar o InVision e precisa exportar alguns PNGs? Você vai ligar para seus usuários e orientá-los através dele no telefone? Você vai fazer um Google Hangout e compartilhamento de tela e gravá-lo? Escreva exatamente sua ferramenta para que você possa montar uma lista e, em seguida, escrever seu script. Então, novamente, você define o contexto para o teste, você reúne suas primeiras impressões, você atribui a eles uma variedade de tarefas, e então você encerra e obtém a impressão agregada deles. Então você também quer planejar o que você vai manter. Então, você vai tirar fotos de cada pessoa que você testar para que você possa fazer uma boa apresentação mais tarde? Você vai transcrever tudo isso? Você vai escrever uma planilha do Google para que você possa tentar fazer alguma análise de dados sobre ela mais tarde? Então, faça um plano para, uma vez que você tenha cinco ou 10 pessoas testadas, o que será um formato útil para você retornar a esse feedback e também compartilhá-lo com outras pessoas. O melhor é que todos na sua equipe possam assistir pessoalmente a essas sessões de teste de usuários, mas isso nem sempre é realista. Então, precisamos pensar sobre que tipo de documentação será útil ter mais tarde. Então, continue passando por isso. Teste e itere. Você pode testar com outras pessoas aqui no Skillshare, você pode encontrar pessoas que representam os visitantes do seu site no mundo real e continuar iterando até sentir que você tem esses wireframes funcionais que servirão seus designers e seus desenvolvedores nas próximas fases. Você tem todos os documentos de que precisa agora para projetar e desenvolver uma experiência web sólida. Seu escopo é definido, suas diretrizes de marca são definidas e suas ações principais são claras e consideradas. Então, se você quiser continuar, nosso próximo passo será lindo Web Design e você pode acompanhar e projetar seu próprio site.