Design para iOS I: Introdução ao UX

1. Trailer: Olá a todos. Eu sou Kara Hodecker e eu sou a principal designer de produtos para iOS na Ever note. Estou muito animado para compartilhar o que aprendi sobre o design do iOS. Se você está apenas começando com o design móvel ou se você simplesmente quer uma atualização. Esta próxima série de aulas foi projetada para ajudá-lo a obter a visão completa do processo de design. Vamos cobrir muito mais do que apenas design visual. Nesta primeira aula, orientarei você pelos conceitos básicos do design da experiência do usuário e uma variedade de técnicas de UX, incluindo jornadas do usuário, esboços e wireframe. Vou explicar por que cada etapa do processo de UX é importante e como você pode aplicar essas técnicas ao seu próprio projeto. Seu projeto de classe será criar seu próprio aplicativo de viagem ou repensar um existente. Você compartilhará o progresso para cada etapa em toda a classe com um conjunto de wireframes como seu material de entrega final. Nas seguintes classes da série, vamos escolher esses projetos de backup, e passar para design visual, design de interação, prototipagem e teste de usuário. No final desta série de aulas, você terá projetado um lindo e delicioso aplicativo iOS. 2. Atribuição do projeto do curso: Oi. Bem-vindo de volta ao iOS Design 1, Introdução ao UX. Neste primeiro vídeo, vamos começar com sua tarefa de projeto. Seu projeto será projetar um aplicativo para iPhone usando o tema de viagens. Você pode criar sua própria idéia única para o aplicativo, ou você pode basear seu projeto em um aplicativo de viagem existente. Este projeto vai abranger as três classes desta série, então você vai completar diferentes etapas do projeto em cada um. Nesta primeira classe, você estará definindo as bases para o seu aplicativo escolhendo qual será o aplicativo, quais são os objetivos do usuário e como sua interface irá suportar esses objetivos. Por que um aplicativo de viagens? Os recursos dos aplicativos de viagem estão realmente bem alinhados com as necessidades do usuário. Essas necessidades são bastante fáceis de identificar, por isso ajudará a tirar parte do trabalho de adivinhação dos estágios iniciais de planejamento do seu aplicativo. Ele também nos ajudará como uma classe juntos, já que seremos capazes de lidar com padrões e problemas semelhantes. Vamos começar olhando para algumas necessidades do usuário que são abordadas por diferentes aplicativos de viagem. Algumas dessas coisas são; Eu quero reservar um voo de ida e volta. Quero pesquisar dicas, passeios e pontos de interesse para um local específico. Quero comparar hotéis por preço, localização e comodidades. Quero reservar um hotel ou outras acomodações. Quero um guia de viagem completo para as minhas férias. Reserve um minuto para pensar sobre o que um usuário precisaria fazer para cada exemplo. Essas etapas devem ser refletidas no fluxo do seu aplicativo e devem ser apresentadas ao usuário da maneira mais clara e lógica. Considere o que é mais importante para o usuário em cada etapa e em geral. Se um usuário quiser reservar um voo, provavelmente se importaria mais com preços, horários de voo, escalas e com qual companhia aérea gostaria de voar. Antes de começar, dê uma olhada em vários aplicativos de viagem para se familiarizar com seus fluxos e a forma como as informações são apresentadas ao usuário. Decida que tipo de aplicativo de viagem você gostaria de criar ou qual aplicativo você deseja reimaginar. Aqui estão alguns exemplos de aplicativos de viagem; Tripadvisor, Kayak, Airbnb, Hotel Tonight, Expedia, Priceline, Hit monge e City Guides by National Geographic. Todos esses aplicativos fazem coisas ligeiramente diferentes, mas estão centrados em viagens. Estes mostram a amplitude do aplicativo de viagem que você pode tentar criar. Aqui está um exemplo do aplicativo Kayak. Este é um ótimo exemplo de aplicativo de viagem multiuso que ainda é muito fácil de usar. A tela inicial apresenta ao usuário todas as opções que ele possui. Desde a pesquisa de um hotel ou voo até o rastreamento e a definição de alertas de preços. Uma vez que uma escolha é feita, neste caso para reservar um voo, o próximo passo seria reduzir o que você está procurando. As opções são simples e o que o usuário esperaria. Para onde você está voando? Quando? Quantos viajantes? Quando os resultados da pesquisa forem retornados, você verá que os voos são agrupados por companhia aérea e preço. Aqui vamos nós. Em seguida, você pode fazer drill-down para horários específicos, conexões e o número de paradas dentro de um ponto de preço. Pode parecer um pouco esmagador, mas eu acho que Kayak faz um trabalho decente, permitindo que você compare muitos vôos em uma tela. Depois de escolher um voo específico, você verá outra tela que detalha todas as informações do voo e a opção de reserva. A tela é um pouco mais limpa. Esta é a última tela na tela agora. É um pouco mais limpo e organiza as informações de uma forma que é muito mais fácil de analisar. Como você vai começar? Você vai primeiro fazer algumas pesquisas iniciais sobre aplicativos de viagem e decidir o que você gostaria de fazer para o seu próprio projeto. Novamente, você pode criar sua própria viagem até o que você gostaria de fazer, ou se você está sentindo, eu não quero ir tão louco, basta pegar um aplicativo que já existe e ir de lá, redesenhá-lo como quiser. Em seguida, você vai anotar alguns recursos que você gostaria de incluir no seu aplicativo. Quais são as necessidades do usuário que você irá abordar? A pesquisa vai ser um grande componente do aplicativo? Haverá muito conteúdo para organizar em cada tela? Se estiver recriando um aplicativo existente, você ainda deve pensar nos casos de uso e nas necessidades do usuário, e como seu redesign pode trazer melhorias na experiência geral do usuário. No próximo vídeo, vou orientá-lo através de uma visão geral do design da experiência do usuário para obter mais ideias fluindo e prepará-lo para as próximas lições. 3. Visão de visão do UX: Bem-vindo à Unidade 1, uma visão geral da UX. Eu queria começar hoje compartilhando uma citação de Steve Jobs, que eu acho que captura o design [inaudível] muito bem. “ Design não é apenas o que parece e se sente, design é como funciona.” Então, para começar, é realmente importante entender o que o design da experiência do usuário e o design centrado no usuário significam. Para definir o design da experiência do usuário, ele se concentra na criação de um produto intuitivo, fácil de usar e encantador para o usuário. Com o design centrado no usuário, as necessidades, objetivos, desejos do usuário são cuidadosamente considerados ao longo de todo o processo de design. Vamos cobrir os dois à medida que passarmos por toda a aula. Enquanto você está pensando sobre seu aplicativo e os recursos que você gostaria de incluir, lembre-se das seguintes considerações ao projetar especificamente para dispositivos móveis. Então, algumas dessas coisas são contexto e relevância são fundamentais. Hoje em dia, muitos aplicativos localização do usuário em conteúdo de superfície e é relevante para onde você está ou para facilitar a pesquisa. Aqui está um exemplo do enxame de aplicativos, que torna mais fácil para você fazer o check-in quando ele tem sua localização. Mobile é rápido, em movimento e você tem acesso constante a ele. Isso é algo novo nos últimos anos, mas é muito importante lembrar. Então, o Twitter e outros aplicativos de notícias são ótimos exemplos do que as pessoas querem usar quando estão em movimento. Pode retirar rapidamente o telemóvel, percorrer algum conteúdo e, em seguida, iniciar a sua próxima tarefa. Coloque o telefone de volta no bolso e está a caminho. Uso freqüente ou check-ins e tamanhos menores de dispositivos são outra coisa que você precisa considerar com dispositivos móveis. Então, aplicativos simples como o Yahoo tempo mostram o conteúdo que você quer ver na frente e no centro sem você ter que navegar muito longe. Aplicativos como este são feitos para um check-in rápido algumas vezes por dia. Finalmente, você tem que lembrar que as distrações estão presentes durante o uso. Com o celular, é especialmente importante lembrar que os usuários não vão lhe dar sua atenção total. Poucos espaços de atenção têm levado as pessoas a ficarem frustradas se não conseguirem encontrar o que querem quando querem. Então, como designer, é importante manter essas considerações do usuário em mente o tempo todo. Use-os para guiá-lo em cada parte do processo de design. Lembre-se, seu aplicativo deve permanecer focado e apresentar ao usuário as informações mais cruciais e relevantes com o mínimo de esforço. É por isso que a tela inicial ou a tela principal do aplicativo é provavelmente a mais importante. Este modo de exibição deve fornecer ao usuário o seguinte. As informações em que o usuário está mais interessado. Se for um aplicativo mais complexo, pulando fora de pontos para outras seções dentro do aplicativo. Assim, alguns aplicativos se concentram em uma ou duas funções principais, que permitem que essa informação seja apresentada ao usuário imediatamente. Estes incluem navegação e consumo de conteúdo que é frequentemente atualizado ou alterado, referência a informações e registro de informações. Os aplicativos mais simples geralmente apresentam feeds ou linhas de tempo. Essa é uma maneira incrivelmente eficaz de exibir conteúdo para usuários que desejam consumir conteúdo rapidamente. Aqui estão alguns exemplos. Tenho Facebook, Twitter e Pinterest. Alguns outros são Fitbit, Calendar, aplicativos meteorológicos e até mesmo seu e-mail. Todos esses aplicativos são super simples. Você abri-los, você está no feed que provavelmente é a informação que você quer ver e qualquer outra coisa que você precisa chegar. Você pode chegar lá facilmente se precisar pesquisar no Pinterest. Se você quiser ver suas notificações no Facebook, você pode pular para isso. Mas provavelmente, qualquer coisa que você precisa está bem na tela principal. Outros aplicativos têm um conjunto de recursos mais complexo e permitem que o usuário execute vários tipos de tarefas. Assim, alguns exemplos de aplicativos com uma abordagem mais navegacional incluem o Evernote, onde você pode ler notas, pesquisar, criar notas. Airbnb, que é este exemplo que estou mostrando aqui, onde você está pesquisando e navegando, algo como Foursquare que você está fazendo check-in, sua pesquisa, navegação, leitura de comentários, bem como mapas. Você está recebendo direções, olhando para o trânsito. Isso é um pouco mais complexo. Então, mesmo que um aplicativo possa ser mais complexo do que outros, isso não significa necessariamente que será uma experiência de usuário ruim. Airbnb é um bom exemplo disso. Aqui você pode ver que eles usam fotos e topografia grande em conjunto com um ótimo fluxo para dividir as informações para telas visualmente atraentes. Então, mesmo que haja muita informação apresentada ao usuário, ela não parece tão esmagadora ou confusa. Então, neste exemplo que estou mostrando aqui, um usuário está procurando por um lugar em South Lake, Tahoe. Eles têm todas essas belas imagens que eles podem percorrer. Depois, quando encontrarem algo que gostem, podem clicar para ler isso. Bastante simples. Então, ao ter uma compreensão do que você quer que seus usuários façam com seu aplicativo, você está bem no seu caminho para começar a reunir personas de usuários, um mapa de jornada do usuário, esboços e quadros de fio, tudo o que nós estaremos cobrindo nos seguintes vídeos. 4. Exemplo do projeto: como escolher um aplicativo: Neste ponto, você foi apresentado ao projeto de classe e você teve uma visão geral do design da experiência do usuário. Em seguida, eu vou levá-lo através de um projeto de exemplo para, espero, dar-lhe uma melhor compreensão de cada etapa e você pode esperar que os resultados sejam parecidos. Para o meu projeto de exemplo, eu queria me concentrar na reserva de um aspecto de voo de viagem. Para esses propósitos, vou usar o aplicativo Southwest Airlines como meu exemplo, e vou mostrar a vocês como eu vejo redesenhá-lo do início ao fim. Vamos dar uma olhada no aplicativo existente do Sudoeste. Eu tenho aqui um monte de telas do aplicativo que eu peguei no meu telefone apenas para dar-lhe uma idéia de como ele se parece agora. Tenho certeza que, como você pode ver, o design visual parece muito desatualizado e desajeitado. Também não é super amigável à primeira vista. Eu dei a impressão de que seria uma experiência lenta, francamente, por causa do quão desatualizado parece. Eu não sei. Só não me dá uma boa impressão. Eu não me sinto muito bem sobre, oh, isso vai ser incrível. Em termos do fluxo em si, eu sinto que é um pouco chocante ter que ser apresentado com esta opção para fazer login ou continuar como convidado imediatamente. Especialmente se Southwest não é um aplicativo que eu uso muito e eu não tenho um nome de usuário e senha, isso é irritante. Quando clico em “Continuar como convidado”, a primeira coisa que vejo no topo é inscrever-me ou iniciar sessão e inscrever-me, que já me vendam algo quando só quero entrar e começar a reservar um voo. Então eu também vejo diferentes opções aqui abaixo, para que eu possa fazer o check-in, verificar o status de um voo, reservar viagens, gerenciar viagens, e ofertas especiais, etc Agora, quando eu clicar em “Reservar Viagem”, eu venho aqui, e nada é preenchido. Uma coisa que realmente me deixa louco é que eles não estavam procurando o local onde eu estou agora. Eles não sabem que estou na Califórnia. Eles não vão repovoar São Francisco como meu aeroporto de origem. Isso é algo que muitos aplicativos estão aproveitando. Eles também não apareceram alguma coisa, apenas dizem, “A Southwest Airlines gostaria de usar a sua localização.” Teria dado a eles permissão para usarem minha localização se eles me salvassem de ter que acrescentar isso. É só um daqueles bons para ter, o que faz parecer que estou fazendo menos trabalho. Mesmo quando eu realmente passar e clique em onde eu posso escolher uma cidade, tudo o que eu vejo aqui, nem mesmo quaisquer sugestões. Novamente, eles não estão usando minha localização. Se fossem, talvez teriam dito Oakland, San Francisco e San Jose, por exemplo, todos os aeroportos que estão próximos. Mas, em vez disso, vejo a lista de cidades em ordem alfabética. Eu iria em frente e digitar em cada cidade que eu quero. Cada vez que eu voltar para a tela, então para trás e para frente, para trás e para frente, preencha a data. Aqui, escolha quantos passageiros. Eu não tenho nenhum código promocional ou qualquer coisa, então eu vou clicar em “Pesquisar”. Demora um pouco para preencher o céu. Mas depois que eu clicar em “Pesquisar”, eu sou apresentado com a minha tela de partidas de seleção. Bem, está bem claro que sim, aqui é onde eu vou escolher meu vôo de partida, é super esmagador. Há tanta coisa acontecendo na tela agora. Há botões roxos gigantes. Eles também estão me contando sobre como os sacos voam livres. Pessoalmente, eu sei que a coisa do Sudoeste. Eu já sei disso. Não preciso vê-lo aqui. Mesmo que eu não soubesse, aqui é o lugar certo para me dar essa informação? Eu realmente não tenho certeza. Além disso, este $ e pontos as coisas só se sente realmente, realmente muito proeminente. Se eu rolar para baixo, outra coisa que eu vou notar é que os botões roxos só pioram. Eles têm uma textura de gradiente incrível sobre eles. É só muita coisa acontecendo. Eles têm isso para cada um dos vôos. Então, sim, eu acho, eles estão agrupados, mas é realmente esmagador. Outra coisa que eu acho realmente estranha é que quando eu realmente clicar em um desses, então se eu bater, quero sair, a qualquer momento, ou selecionar negócios, em vez de apenas escolher esse vôo e me preceder para a frente, ele vai se expandir, como você pode ver aqui. O que se expande para me mostrar? Que eu recebo dois sacos de cheque grátis. Espere, eu já sabia disso porque ele me contou há pouco. Vai me dizer quantos pontos de recompensa rápida eu poderia conseguir. Talvez seja uma informação útil, mas preciso mesmo disso aqui? Novamente, não sei se vale a pena. Porque agora, eu tenho que dizer novamente sim, selecionar este vôo, que é o que eu quero. Depois de passar e escolher o meu voo de partida, escolho o meu voo de regresso, vou ver o ecrã de resumo aqui. Mais uma vez, para a frente, eles têm esses cabeçalhos que dizem, “Aqui estão os diferentes vôos.” Mas então esse texto fica muito pequeno e espremido juntos. Tem tudo quebrado, mas acho que pode haver uma maneira melhor mostrar essa informação que é um pouco mais fácil de ler. Meu preço total está aqui, ótimo. Ei, os primeiros sacos despachados voam de graça. Isto é realmente um pouco mais útil aqui em baixo porque eu posso vê-lo bem ao lado do preço que eu estou pagando e eu sei que eu não tenho que pagar qualquer extra para sacos. Eu realmente gosto disso. Então eu apertei “Próximo” de lá, e então eu vou continuar meu caminho para prosseguir com a adição do meu cartão de crédito e outras coisas. Vou pular essa parte do fluxo para os meus propósitos porque acho que temos muito com o que trabalhar no começo aqui. Antes de criar minha persona, o que eu quero fazer é realmente pensar em algumas tarefas de usuário e casos de uso que meu usuário estaria usando o aplicativo Southwest para. Para discutir, peguei um Post-it, peguei um Sharpie, e comecei a anotar o que as pessoas estariam fazendo quando viessem usar o aplicativo do Sudoeste. O que eu escrevi é procurar um voo de ida e volta por preço e horário, reservar em torno de voo de viagem. Na verdade, se eles estão apenas navegando para ter uma idéia dos preços às vezes é diferente do que realmente quando você está pronto para reservar. Muitas vezes faço isso sozinho. Eu vou continuar e vou olhar só para ver o quanto as coisas são, mas eu não estou realmente planejando reservar. Além disso, posso ver uma reserva existente, então veja quais são todos os detalhes do voo. Então, além disso, posso mudar ou atualizar meu assento. Se eu tiver um voo próximo, amanhã, por exemplo, posso verificar esse voo, e posso ver o status do voo para ver se estou atrasado, informações importantes como essa. Quando você estiver criando sua própria lista de casos de uso, tente pensar sobre o que será realmente importante para cada tarefa e faça alguma pesquisa. Pergunte a seus amigos ou familiares sobre suas próprias experiências de viagem móvel. Quais aplicativos eles usam? Quais aplicativos eles gostam? Será que eles sequer usam aplicativos, ou eles só vão usar o computador porque eles não encontraram algo que funcione para eles, ou eles estão apenas com medo de? As tarefas que listei aqui são bastante comuns para usuários móveis. Assim que eu tiver minha persona criada, eu vou usar uma dessas tarefas para guiar o resto do projeto. Uma vez que eu tenho meus casos de uso já, e por pronto, elaborado em Post-it Notes, em seguida, eu vou pensar sobre os tipos de pessoas que usariam o aplicativo do Southwest. Este é outro exercício de brainstorming. Mais uma vez, tirei o meu caderno de rascunhos e tirei as notas do Post-it. Listei alguns potenciais usuários. O que estou fazendo é tentar evitar estereótipos ou usuários comuns. Com personas, você quer criar um modelo que se sinta como uma pessoa real. O que eu inventei aqui, eles são um pouco generalizados, mas vamos transformá-los em algo muito mais concreto à medida que formos. O seis que eu inventei, e o seis é um número totalmente arbitrário. Ele se encaixa muito bem no caderno de esboços. O que comecei foi com uma estudante universitária, uma mãe de três filhos, uma executiva de negócios, digamos, um cara com 40 anos que é realmente consciente do orçamento, um jovem profissional, e uma mulher recém-casada. Apenas um amplo espectro de diferentes tipos de usuários. Por exemplo, começando com estudantes universitários, é realmente um pouco de generalização. Mas se você escolher o arquétipo, você vai dar vida àquele estudante universitário mostrando sua personalidade, mostrando suas características, e quais objetivos eles têm. Porque você não pode simplesmente agrupar todos os estudantes universitários em um balde. Claro, eles vão ser completamente diferentes. Todos têm personalidades diferentes. Mas uma vez que você tenha mais detalhes, isso vai ajudá-lo a descobrir o tipo de usuário que eles são. Você acaba escolhendo um estudante universitário, por exemplo, você vai identificar um estudante universitário específico, qual é a personalidade dessa pessoa, quais são seus traços, esse tipo de coisa. Você realmente será capaz de se concentrar nessa pessoa em particular. Acontece que é um estudante universitário, por isso dá-te um pouco de um ponto de partida. Agora, no próximo vídeo, eu vou te mostrar a personalidade que eu escolhi. Eu vou escolher um jovem profissional para usar isso como guia o resto deste projeto. Mas vamos passar por isso com mais detalhes no próximo vídeo. 5. Como definir as pessoas do usuário: Bem-vinda de volta. No último vídeo, apresentei uma visão geral do design da experiência do usuário e de como ele se refere aos aplicativos móveis. Neste próximo vídeo, abordaremos a primeira etapa do nosso processo de UX, definindo personas de usuário para o nosso aplicativo. Existem muitas ferramentas e técnicas diferentes de UX que os designers usam todos os dias para iniciar projetos. Alguns designers se concentram em algumas técnicas selecionadas, enquanto outros são muito mais extensos. Algumas das técnicas de UX que não abordaremos aqui incluem a realização de entrevistas com partes interessadas, coleta de requisitos, análise de concorrentes, pesquisas e análises. Isso não é porque essas técnicas não são importantes em tudo , mas porque elas simplesmente não são relevantes para nós neste momento. Porque há tantas técnicas diferentes que você pode usar, muitas dessas coisas são usadas em um sentido mais profissional e por isso não faz sentido para nós cobrirmos isso para começar. Mas a técnica de UX que começaremos com é criar personas de usuários. Uma persona é um personagem que é representativo das necessidades, pensamentos e objetivos do usuário alvo. Personas são construídas para projetar a melhor experiência possível para seus usuários. Pense em uma persona como seu usuário típico ou ideal, e quem você vê usando seu aplicativo? Personas podem ajudá-lo a lembrar que seus usuários podem não ser como você. Eles também impedem que você generalize todos os usuários em um bucket principal, pensando que todos têm as mesmas necessidades e metas. É claro que muitos usuários provavelmente terão os mesmos objetivos ou semelhantes para usar seu aplicativo, mas cada pessoa vem de um plano de fundo diferente. Por exemplo, dois usuários querem reservar um voo, mas um usuário talvez um executivo de alto nível que quer usar milhas para uma viagem de primeira classe, enquanto outro talvez uma mãe que só quer encontrar a maneira mais barata de obtê-la três filhos para visitar seus avós. Esses usuários têm necessidades completamente diferentes e , portanto, terão diferentes maneiras de navegar em um aplicativo de viagens. Há provavelmente vários tipos diferentes de pessoas que usariam seu aplicativo para tentar criar 2-3 personas para representar seus usuários. Cada um deve ter uma história e um caso de uso ligeiramente diferente sobre por que eles querem usar seu aplicativo e quais os passos que eles tomarão para alcançar suas necessidades. Começaremos escrevendo uma descrição para cada um de seus personagens. Considere diferentes tipos de pessoas para representar melhor uma variedade de usuários. Pense de volta para o executivo contra a mãe que são claramente usuários muito diferentes. Quando você está escrevendo cada descrição, você deve incluir o seguinte: sexo, idade, estado civil, ocupação, status econômico, como eles estão familiarizados com a tecnologia, dispositivos que eles usam, hobbies gerais, etc. você deve incluir o seguinte: sexo, idade, estado civil, ocupação,status econômico, como eles estão familiarizados com a tecnologia, dispositivos que eles usam, hobbies gerais, etc. Essas coisas ajudarão a capturar quem essa pessoa realmente é que você está tentando representar. Em seguida, depois de capturar a descrição da persona, crie um cenário para o qual você poderia imaginar que um usuário gostaria de usar seu aplicativo. Pense sobre o que os usuários motivações, metas e necessidades seriam. As personas criadas devem abranger alguns cenários e tipos de usuários para os quais você gostaria de criar. Você não será capaz de contar para cada usuário, mas você pode pelo menos considerar alguns. Comece escrevendo suas descrições e cenários. Você não precisa gastar muito tempo projetando ou fazendo com que eles pareçam realmente ótimos. Também cabe a você se você quiser incluir uma foto representativa para cada usuário, pode ser útil imprimir suas personas e tê-las próximas por referência quando você está pensando em seu aplicativo e mais detalhes. Mas não há necessidade neste momento de torná-los realmente extravagantes. Novamente, seu primeiro material de entrega será criar 2-3 personas para melhor representar seus usuários alvo. Você pode enviá-los para o seu projeto em qualquer formato que você escolher. Eu também vou incluir algumas referências na web que você pode olhar através se você quiser mais informações sobre personas, há um monte de coisas realmente grandes lá fora. Em nosso próximo vídeo, abordaremos como você pode usar essas personas para ajudá-lo a criar um mapa de jornada do usuário. 6. Exemplo do projeto: Persona: Acabamos de cobrir nossa primeira etapa de UX de definir personas de usuários. Agora, eu vou orientá-los através do meu exemplo de projeto para definir personas. O arquétipo de persona que vou escolher para o meu exemplo, é o jovem profissional. Comecei decidindo que seria uma usuária feminina e a chamei de Kelly. O que eu fiz aqui foi pegar meu caderno de esboços de novo, e comecei a anotar um monte de coisas que eu queria cobrir sobre Kelly. Tentei imaginar que tipo de pessoa Kelly seria, e que tipo de usuário ela representaria. No esboço, anotei estatísticas pessoais, características, sua visão da tecnologia, e o que eu imaginava seus objetivos e necessidades. Na maior parte do que escrevi tem algo a ver com viagens de uma forma ou de outra. Comecei aqui como podem ver, então decidi que Kelly tem 27 anos, para nossos propósitos, ela é designer de UX, e comecei a escrever algumas coisas pessoais sobre ela, e dizendo que ela não é casada, mas Ela está em um relacionamento comprometido. Ela ganha um salário decente, mora em São Francisco, tem colegas de quarto, mas não tem animais de estimação. Então características para explicar que tipo de pessoa que ela é. Então, se você a descrevesse para um amigo, por exemplo, o que você diria? Eu escolhi dizer que ela é uma pessoa muito ativa, ela faz aulas de ginástica e yoga, ela realmente adora viajar, fácil ir, e isso é importante. Ela não é super frugal, mas também não é uma gastadora ultrajante. Ela é organizada, mas gosta de planejar. Então, não demasiado TOC, mas ela gosta que as coisas corram à sua maneira. Todas essas coisas são distinções importantes como aprimoramos nela em nossas personas. Em seguida, tecnologia, isso é novamente importante porque estamos fazendo um aplicativo móvel aqui. Porque ela é uma designer de UX, isso vai contribuir para o seu uso da tecnologia, então ela realmente a abraça. Novamente ela está em cima disso por causa de seu trabalho. Isso faz com que ela fique frustrada com experiências mais lentas e ruins, ela tem o iPhone mais recente, sempre atualizado sobre esse tipo de coisa. Ela é muito confortável comprando online, e ela é uma usuária muito ativa da Internet. Então isso descreve como ela se sente com a tecnologia, e como eu vou pensar nela enquanto estou projetando a versão do aplicativo Southwest. Por último, mas não menos importante, seus objetivos e necessidades. Essas são coisas que eu pensei, o que Kelly vai ter em mente quando ela estiver usando este aplicativo? Ela vai querer estar ciente de boas ofertas de voos, isso é algo que é importante para ela. Ela quer a capacidade de comparar datas e horários de viagem pelo melhor preço, ela quer poder usar milhas ou pontos para reservas de viagem, e ela prefere ficar com uma companhia aérea porque é assim que ela vai acumular essas milhas ou pontos para ajudá-la. Novamente, como eu disse aqui, ela não é frugal, mas ele também não é um gastador ultrajante, então ela é muito jovem, então ela quer tirar proveito de qualquer maneira que ela possa economizar um pouco de dinheiro. Agora que eu fiz isso, vamos mergulhar um pouco mais fundo em algumas das coisas que observamos aqui. Eu disse que ela estava em um relacionamento comprometido e adora viajar, então vamos imaginar que ela estaria viajando muito com seu outro importante. Definindo que ela ganha um salário decente, e novamente, que ela não é frugal e não gastadora ultrajante, todas essas coisas a colocam em uma determinada categoria. Pode-se supor que ela não vai escolher o vôo mais barato absoluto, e sacrificar tudo o resto sobre a viagem apenas para conseguir esse bom negócio, mas que ela provavelmente em vez disso fazer um monte de pesquisa para encontrar um vôo que ela se sente bem sobre. Agora, já que não vais apresentar as tuas personalidades a um cliente ou a outras partes interessadas, um esboço como eu fiz aqui é perfeitamente aceitável para esta aula. Totalmente bem. Mas o que eu vou fazer a seguir, é mostrar-lhe como isso poderia parecer em um formato digital. Novamente, idealmente, você vai querer criar 2-3 personas para o seu projeto. Só vou cobrir um, mas isto é só para te dar uma ideia. A próxima é a demonstração. Agora vamos começar com a parte real da demonstração. O que eu vou fazer é abrir o esboço do programa, e eu vou dois criar um novo arquivo, oops, ele foi para lá. Eu não sei se vocês estão familiarizados com sketch ou não. Mas esta é uma ótima ferramenta para coisas super rápidas. Muitas pessoas realmente usá-lo para IU real, eu prefiro Photoshop eu mesmo. Mas, eu amo essa ferramenta para colocar as coisas rapidamente, fazer qualquer wireframing. Isto é o que eu vou usar para minhas personas e minhas jornadas de usuários, por isso é apenas uma ótima ferramenta para fazer algo rápido e fácil. É muito semelhante a outros programas como Keno e você tem ferramentas sobre o lado aqui, temos ferramentas no topo e todos os tipos de coisas, então, muitas coisas que vamos cobrir à medida que avançamos. A primeira coisa que eu quero fazer, agora isso é como uma grande tela em branco como você pode ver. O que eu realmente quero fazer é, eu quero inserir uma prancheta. Isso vai me dar como uma caixa delimitadora de onde vou colocar tudo. Você não tem que fazer isso, mas ajuda um pouco, eu acho. Ele também ajuda com a exportação porque dessa forma você tem, como o que exatamente você estará exportando. A partir daqui eu posso realmente apenas, segurar e arrastar aqui para criar qualquer prancheta, ou eu também posso começar com todas essas coisas. Então isso vai ser muito útil para você se você estiver usando este programa para seus wireframes mais tarde, porque você pode escolher telas de iPhone para qualquer tamanho, iPad também, muitas coisas aqui. Mas para este propósito, eu vou começar com o tamanho da letra, e então você pode ver aqui eu tenho essas pequenas bordas, então eu posso realmente dimensionar essa coisa para o tamanho que eu quiser. Já que eu não estou imprimindo isso, eu realmente não me importo o quão grande ele é, e se eu quisesse imprimi-lo, eu ficava sempre, ele só diminuiria. Eu sei que a minha personalidade vai ser um pouco maior, e eu só quero torná-la um pouco mais larga e um pouco mais alta. Então eu só vou fazer esse cara arbitrariamente um pouco maior, e isso é algo que eu sempre posso mudar. Então, se eu me afastar, então eu não tenho mais aquelas caixas delimitadoras, mas se eu clicar de volta aqui, eles voltam imediatamente. Super fácil de mudar a qualquer momento. Este também é o nome do que esta coisa é, então eu posso ir até aqui e decidir renomeá-lo, e eu vou apenas dizer, Persona , e eu vou atualizar aqui. Novamente, não é um grande negócio, mas vai ajudar se você tivesse mais de um desses pranchetas ao lado do outro, então você pode realmente fazer todas as suas personas em um arquivo. , eu poderia inserir nosso quadro, Se eu quisesse, eupoderia inserir nosso quadro, ou eu posso realmente, eu posso mouse neste sinal e dizer Duplicate, e então ele vai colocar Um segundo aqui. Então eu poderia fazer todos os três de uma vez, e eu posso mostrar a vocês como exportar isso no final. Mas por enquanto, vou deletar aquele cara porque eles não precisam dele. A próxima coisa que eu quero fazer é realmente salvar este arquivo apenas no caso, eu vou chamar essa persona e um esboço, você pode simplesmente ir em frente e Salvar na área de trabalho. Ótimo. Pronto para ir. Agora eu tenho essa personalidade para trabalhar, então eu tenho Kelly. Uma coisa que muitas pessoas fazem com personas é usar uma foto para representar essa pessoa, e isso dá um pouco mais de vida à sua persona, então você pode olhar para essa pessoa e dizer, sim, isso é Kelly para o meu exemplo. Eu vasculhei a Internet um pouco e fiz alguma captura de fotos de estoque, mas para nossos propósitos aqui, eu vou apenas colar isso em. Esta é a minha representação da Kelly de 27 anos. Cole isso aí. Ótimo. A próxima coisa que eu quero fazer é, na verdade, eu quero inserir algum texto. Quero ter em mente a personalidade que Kelly está representando, e que para mim foi o jovem profissional. Eu vou inserir uma caixa de texto, e eu vou dizer, Jovem Profissional, legal. Essa é a minha personalidade, eu vou decidir colocá-la lá. Então também quero colocar o nome da Kelly aqui. Kelly, e então eu tenho todas as minhas ferramentas aqui para o meu texto, o que torna realmente fácil fazer as coisas [inaudíveis] algo para ir. Legal, parece um bom tamanho. Ver se eu queria fazer como um tipo de coisa azul verde, isso é totalmente arbitrário, eu só estou decidindo isso como vamos. Mas aqui está Kelly, e eles realmente têm esses pequenos e agradáveis guias inteligentes que alinham tudo por isso é útil. Ótimo. Em seguida, o que eu quero fazer é apenas trazer um pouco mais de vida para este documento real e torná-lo bonito, juntos, e apenas fazê-lo parecer bonito. Uma coisa que eu quero fazer é, eu só vou usar uma caixa de cores e colocá-lo escrever sobre aqui. Eu só tenho o tamanho agora para a largura da foto dela. Neste quarteirão, vou colocar algumas coisas sobre o passado da Kelly. Eu também esqueci de mencionar, quando você está criando suas personas, o que eu fiz foi procurar na internet inspiração para como essas coisas estão dispostas. É muito útil para ter uma noção de maneiras diferentes que você pode colocá-los para fora ou pode desencadear uma idéia de como, eu quero incluir isso na minha personalidade que eu não me cobriu. Para este, por exemplo, eu acabei de encontrar uma personalidade bonita e eu estava como, “Isso parece ótimo, encontrei em [inaudível]. Pensei em usar essa estrutura para a mesma coisa para a minha.” Já digitei um pouco disto só para nos poupar um pouco de tempo, mas tenho o que chamo de fundo da Kelly aqui e apenas a acompanhar isso. Então o que eu tenho aqui são as pequenas estatísticas sobre Kelly, então é sua idade, localização, estado civil, filhos, ocupação, salário e educação. Algumas dessas coisas eu não tinha escrito no meu esboço antes, mas era apenas algo que eu queria acrescentar neste momento, e isso é totalmente bom. Todo este processo é realmente flexível. Então aqui estamos listando todas essas coisas, como você pode ver. Então o que eu também quero fazer é, na verdade eu posso te mostrar de volta novamente. Eu tinha escrito apenas algumas coisas sobre Kelly aqui, então eu tenho listas de marcadores e tudo mais. Mas o que eu também fiz foi tirar algum tempo para escrever um pequeno parágrafo sobre Kelly. Então, novamente, se eu estivesse descrevendo-a a um amigo ou fazendo uma escrita sobre Kelly que eu queria cobrir uma história, uma linha de base. Eu tenho esse cara também escrito, só vai colar aqui, lá vamos nós. Vou decidir colocar isso aqui. Este é um grande ponto. Agora você pode ver que meu texto está um pouco mais perto da borda e eu realmente não quero que este guia seja muito mais alto. Eu só vou esticar minha caixa um pouco, perfeito. Lá vamos nós. Então, sobre Kelly, isso é basicamente apenas um parágrafo para explicar um pouco sobre Kelly. Está resumindo o que eu cobri nas minhas anotações. Basicamente, Kelly é uma pessoa ativa que gosta de viajar para novos destinos sempre que pode. Ela tenta planejar uma viagem ao exterior a cada ano , bem como escapadas mais curtas para locais próximos. Ela tem três semanas de férias que ela idealmente vai passar longe de casa. Ela viaja principalmente com seu namorado, mas ocasionalmente com um pequeno grupo de amigos. Kelly ganha um salário decente, então ela não está totalmente consciente do orçamento, mas ela também não é uma gastadora extravagante. Ela muitas vezes pesa opções para ver se a qualidade ou o preço é mais atraente. Então resume tudo o que escrevemos acontecendo até agora. A próxima coisa que quero acrescentar são essas características. Nós cobrimos isso de novo com nossos pontos de bala. Na verdade, vou adicionar alguns pontos de bala só para um pouco mais de clareza aqui. Legal. Ótimo. Super simples. Na verdade, não finalmente, tenho um buraco aqui. Mas eu tenho o que também é muito importante, seus objetivos e necessidades. Então vou tentar alinhar este tipo com os dois. Às vezes é por isso que eu não posso ser super pixel perfeito com esboço, porque isso me deixa um pouco louco. Então, novamente, com seus objetivos eu quero adicionar balas de soma e essas são todas as coisas que tínhamos coberto anteriormente e eu poderia apenas tentar ver se eu posso, não. Então isso não é tão bom para alinhar as coisas, mas podemos consertar isso mais tarde. Tudo bem, então a última coisa que eu queria adicionar a essa persona foi, na verdade, muitas vezes as pessoas usam pequenos gráficos ou gráficos ou ícones para representar coisas diferentes apenas para tornar isso um pouco mais visualmente interessante. Então o que eu fiz foi fazer um pequeno gráfico de barras de três aspectos diferentes sobre Kelly. Então vou tentar alinhar isso. Parece muito bom. Então conhecimento tecnológico, hábitos de gastos e preferências de reserva. Estas três coisas que eu queria destacar porque eles são muito importantes para mim como eu vou continuar este projeto. Então, com conhecimento técnico, ela tem pouco conhecimento a nível especializado? Então eu disse, “Muito perto do especialista.” Claro, ela não é a melhor especialista, mas tem bom senso. Hábitos de gastos, frugal a generoso. Ela está no meio, um pouco mais em direção a frugal, mas definitivamente não aqui. Suas preferências de reserva versus a tarifa mais baixa no voo mais ideal também no meio, talvez um pouco mais para o voo mais ideal. Isso vai me dar um bom senso de, eu posso olhar para isso, eu posso comparar para vocês que seria algo realmente grande, porque você vai ter duas a três dessas personas. Você será capaz de olhar para eles juntos e dizer, “Kelly é o usuário que é assim. Digamos, Sam, que é o usuário que é assim.” Talvez Sam seja o mais frugal, ele é o cara consciente do orçamento. Então pode haver alguém que talvez eles tenham muito pouco conhecimento de tecnologia e isso é algo que você vai querer se concentrar em todo o seu projeto. Então eu terminei aqui. Agora a próxima coisa que vou mostrar é como exportar esse cara. Porque eu já tenho meu quadro de arte como eu disse, ele só vai ser exportado muito facilmente. Eu subo aqui, exporto, seleciono, então ele chama de fatia. O que eu quero dois fazem agora, eu não quero um PNG. Você poderia se você quisesse ou você poderia fazer JPG ou TIFF, mas eu só vou fazer um PDF porque é um pouco mais simples e também mantém o texto muito agradável. Então exportar e isso vai dizer, “persona.pdf”. Parece ótimo. Pressione exportar, decida onde salvá-lo. Perfeito. Feito. Vou guardar isso e agora, se abrirmos este tipo, fixe, tenho a minha personalidade a ouvir. Então isso é outra vez, algo que eu posso imprimir se eu quiser. Mas esta também seria uma ótima maneira de entregar como sua entrega final para este projeto ou para esta parte do projeto da classe. Eu vou incluir um link para realmente um modelo de persona exemplo que você pode baixar, é algo que eu encontrei online. É um pouco mais digital e estilo não digital, então é algo que você pode imprimir e depois desenhar. Pode ser uma boa maneira de começar se quiser começar com esboços. Então também vou carregar o meu ficheiro de desenho aqui, caso haja alguma coisa que queiram tirar disso. Tudo bem. Bem, você deve estar pronto para começar suas personas indo e eu não posso esperar para vê-los. 7. Como mapear a jornada do usuário: Bem-vindo à Unidade 3, Mapeando a Jornada do Usuário. Nossa próxima técnica de UX é chamada de mapa de jornada do usuário e também pode ser conhecido como um mapa de experiência do usuário. As jornadas do usuário mapeiam a série de etapas das atividades nas interações que o usuário terá com seu aplicativo. As jornadas do usuário são benéficas para o processo de design vez que permitem que você pense sobre o aplicativo de um nível alto. Eles ajudarão você a descobrir como seus usuários interagirão com seu aplicativo, quais expectativas podem ser e até mesmo fazer com que você pense em novas funcionalidades que talvez ainda não tenha considerado. Na prática, os mapas de experiência do usuário podem ser bastante complexos e conter detalhes como requisitos e metas de negócios, vários pontos de contato que um usuário tem com o produto ou serviço e insights qualitativos. No entanto, para o nosso propósito, será focado em uma versão simplificada que representa a história da relação de um usuário com seu aplicativo a partir da perspectiva do usuário. Os mapas de viagem do usuário podem ser projetados como um fluxo baseado em texto, ou você pode adotar uma abordagem mais visual. Esta é realmente a sua preferência, e vou mostrar-lhe alguns exemplos de ambos. Aqui está um bem aqui. Pode ser útil se você ampliá-lo um pouco mais. Eu também incluí os links on-line se você quiser dar uma olhada mais de perto também. Aqui está outro. Você pode ver que essas jornadas do usuário são principalmente preto e branco, semelhante aos quadros de arame, com pops de cor para representar o caminho que o usuário tomará ou opções que eles podem escolher. Aqui está outro ainda parece um pouco arame me enquadrar. vez, eu encorajo você a dar uma olhada nesses on-line também. Alguns são muito mais simples, este é um exemplo de um muito baseado em texto, mas ele ainda tem o mesmo ponto através, apenas não é tão bonito. Agora que você criou duas a três pessoas na última etapa, vamos usá-las como base para criar um mapa de jornada do usuário para cada uma delas. Começaremos escrevendo e visualizando cada usuário ou persona ou a jornada que cada pessoa fará através do seu aplicativo. Você pensará sobre quais são as metas e necessidades de seus usuários? Quais tarefas seus usuários precisam executar? Considere quais objetivos e tarefas são cruciais e quais são secundárias. Isso realmente ajuda a manter o número de etapas para concluir uma tarefa ao mínimo. Não queremos que os usuários acessem seu aplicativo e sintam que estão sobrecarregados ou que é muito complicado. Em seguida, mapearemos cada etapa do processo do usuário. Pense em quais telas o usuário passará, o que ele verá em cada tela, e tenha em mente todo esse tempo como o usuário deve estar se sentindo. Novamente, não queremos estressar ninguém. Eles devem se sentir bem quando estão usando seu aplicativo. mapas de viagem do usuário devem conter uma referência à persona na qual se baseia, e o objetivo final do usuário. Alguns exemplos de tarefas que seus usuários podem querer executar, especialmente em um aplicativo de viagens, seria, digamos, procurar hotéis de três ou mais estrelas em São Francisco, ou comprar uma viagem de ida e volta, bilhete de avião, talvez reservar um aluguel de férias, e, em seguida, até mesmo pesquisar e encontrar coisas para fazer em um determinado local de férias. Estas são algumas coisas que, que seus usuários podem querer fazer e que você deseja pensar. Estes são, são bons exemplos de como você pode, o que você faria para levar o usuário através de como ele realizaria cada uma dessas tarefas. Finalmente, avalie os mapas que depois de concluir um rascunho e pergunte a si mesmo o seguinte, o nível de complexidade é apropriado para cada tarefa? Onde posso simplificar as coisas? O fluxo geral faz sentido? Você vai querer fazer ajustes conforme necessário. Isso não é algo que você provavelmente acertará na primeira tentativa. Seu material de entrega será criar uma jornada do usuário para cada um de seus personagens para representar os objetivos de seus usuários. Depois de concluir suas jornadas de usuários, compartilhe-as com a turma. Em seguida, vamos mergulhar em esboços onde você pode finalmente pegar essas pessoas e viagens de usuários e transformá-los em algo um pouco mais concreto. Vamos entrar um pouco mais na parte de design nos vídeos a seguir. 8. Exemplo de projeto: o de jornada do usuário: Então, na última etapa do projeto, eu completei minha persona. Agora, o que eu preciso fazer é decidir qual é a jornada chave do usuário que vou delinear. Então, vamos começar revisando as tarefas do usuário que eu criei novamente. De volta aos meus Post-it Notes. Estes foram pesquisar voos de ida e volta por preço e horário, reservar um voo de ida e volta, visualizar e reserva existente, alterar ou atualizar meu assento, check-in de um voo ou ver o status do meu voo. Para o meu exemplo, vou usar a primeira tarefa aqui. Pesquise um voo de ida e volta por preço e horário. Esta tarefa ainda é bastante genérica, então eu quero criar uma pequena história usando minha persona de Kelly. Eu pensei em um cenário que eu imagino que Kelly estaria passando. Vamos dizer que Kelly queria realizar uma busca vôo de ida e volta de São Francisco para Portland, Oregon para visitar seus amigos por um longo fim de semana. Ela vai viajar com o namorado. Ela tem três fins de semana diferentes em mente e quer comparar o preço e programação de cada fim de semana para determinar qual deles vai ser o mais ideal. Então, com esse cenário, Kelly também estará usando o aplicativo Southwest para procurar suas opções de voo. Baseado nos detalhes da personalidade dela no cenário, também criei a lista dos objetivos dela. A primeira é que ela quer procurar voo de ida e volta de São Francisco para Portland. Além disso, ela gostaria que a capacidade de pesquisar facilmente e rapidamente várias datas de fim de semana para poder comparar preços. Não parece tão difícil, certo? Bem, o primeiro objetivo é o simples. O segundo golo, por outro lado, exigirá um pouco mais de reflexão do meu lado. Quero prestar especial atenção a este. Estou pensando em como eu poderia reestruturar o fluxo do aplicativo. Então agora eu vou dar ao meu mapa de viagem de usuário uma chance. O que eu fiz aqui foi delinear os passos nas telas que Kelly teria que passar para alcançar seu objetivo. Então, estes seriam ela começa em casa, reserva de viagem, que requer para escolher uma cidade de partida, retorna cidade e suas datas de partida e retorno. Uma vez que ela faça isso, ela vai para a busca e ela vai obter os resultados de um voo de partida, que ela vai escolher um e então ela vai obter resultados para o vôo de volta onde ela iria escolher um. Então seu próximo passo seria ver o resumo do voo e obter o preço total, e depois ir em frente e reservar e pagar. Mais uma vez, para o nosso exemplo aqui, nós realmente não vamos passar pela reserva e pagar, vamos parar na etapa de resumo do voo. Uma vez que eu tenho estes delineados, eu voltei para o meu caderno de esboços e eu desenhei isso como mais um fluxo. Eu fiz isso em vez de pular direto para o esboço porque realmente me ajudou a visualizar o que eu queria delinear mais rápido. Então eu acabei desenhando um par de vezes diferentes de um par de maneiras diferentes antes da apresentação parecer certo. Então, assim eu tenho mais de uma base. Posso trabalhar a partir do meu sketch para entrar no sketch. Então, em seguida, vou orientá-los sobre como criei meu mapa de jornada de usuário usando o Sketch. Vou esconder isto e vou voltar ao Sketch. Crie um novo documento e faça isso em tela cheia. Tudo bem. Novamente, o que eu quero fazer escrever é salvar este documento. Vamos chamar essa jornada do usuário. Salve na área de trabalho, ótimo. Novamente, como fizemos na etapa anterior, eu quero ter um quadro de arte aqui. Isto eu só vou vir e desenhar um muito arbitrariamente. Sei que vou precisar de muito espaço. Vou tentar preencher um monte de espaço aqui. Então eu quero nomear o quadro de arte, jornada do usuário. Ótima. Novamente, posso mudar o tamanho deste cabeçalho a qualquer momento, então não é grande coisa. O que eu vou começar é realmente criar um pequeno cabeçalho para isso. Já fiz isto aqui, por isso vou trazer isto. Aqui está minha jornada de usuário. Também tenho a tarefa delineada. Então, apenas uma coisa de texto simples, pesquisa de ida e volta, vôo por preço e horário. Eu só vou fazer isso. Ótima. Salvar. Agora, tenho a minha base para começar. Como eu disse, vamos começar na tela inicial. Se você se lembra que o aplicativo Southwest na primeira tela foi que você deseja entrar ou você deseja continuar como um convidado? Eu só vou ignorar essa tela e ir para o que eu chamo de tela inicial real para começar. A primeira coisa que quero fazer, eu tenho aqui que vai representar minha primeira tela. Isso vai acabar parecendo um wireframe, mas definitivamente não é um wireframe. Que os wireframes seriam muito mais detalhados. O que eu quero fazer aqui é apenas reiterar o que as coisas simples são que estariam em cada tela para ser capaz de passar por isso um pouco mais fácil. Vou começar com isso, e vou rotular isso. Esta vai ser a minha tela inicial. O que eu vou colocar na tela inicial, na verdade, eu não vou me preocupar com isso agora. O que eu realmente vou fazer é colocar aqui os botões que eu tenho como opções. Acabei de fazer alguns destes já só para que seja um pouco mais rápido para nós. Na minha tela inicial, havia algumas opções . Estou tentando copiar esse cara. Eu só vou copiar estes e colá-los. Eu tenho cinco lá. O 're cerca de cinco opções ou assim de pensar de volta para o que o aplicativo Sudoeste era. O que vou fazer agora é rotular esses caras. Se isso acontecer, você pode realmente ver que quando eu passar o mouse sobre, estas são as camadas que estão no topo, e então esta camada de texto está abaixo disso. Então eu posso arrastar esse cara para cima, então está em cima de tudo. Lá estamos nós. Ou eu também posso ir para o topo e ir para organizar e mover para a frente como sempre uma opção dois. Tornar estes alinhados à esquerda e assim minhas opções antes eram check-in, status do vôo, eu vou corrigir o espaçamento em um segundo, reservar viagens, gerenciar viagens, e havia algo outro então vamos colocar outro por enquanto, porque não é super importante. Aqui, eu posso mudar o espaçamento entre linhas. Eu posso apenas bombear estes um pouco mais, e eu provavelmente tenho que ir um pouco mais do que isso para que todos se encaixem. Isso é bom o suficiente. Perfeito. Então aqui estão as minhas opções para a tela inicial. Na verdade, eu só ia fazer isso, fazer isso se destacar um pouco mais, e todas essas coisas realmente não importa uma tonelada. Só vou fazer isso recuar um pouco mais. O próximo passo que eu vou fazer é realmente eu quero clicar em viagens livro. Digamos que eu queira selecionar o céu e apenas mudar a cor de fundo para ser algo que eu realmente vou clicar. Eu tenho uma cor aqui que eu quero usar. Eu só vou jogar isso lá para que eu possa pegar essa cor. Coisa legal sobre Sketch é muito fácil de dizer oh, eu quero usar essa cor. Legal. Livre-se desse cara. Então, a seguir, vou desenhar uma flecha. Então eu vou para Inserir, Forma, Flecha, e eu quero desenhar desse cara para nossa próxima tela. Eu também vou fazer este céu azul só para consistência aqui. Eu poderia torná-lo um pouco mais grosso para que eu possa vê-lo melhor. Legal. Em seguida, eu já fiz esta tela, que nos poupou um pouco de tempo. Posso copiar isto. Aqui vamos nós. Minha próxima tela é na verdade a tela de viagem do livro. Eu vou dois rotular este tipo de viagem livro. Ótima. Nesta tela eu posso ver o que eu fiz aqui já é eu vou escolher o vôo, de onde eu estou voando, de onde eu estou voando, e então a data de dentro e, em seguida, eu tenho um botão de pesquisa na parte inferior. A primeira coisa que eu realmente quero fazer é fazer o de. Porque estes estão todos dentro desta tela, eu só vou me mover para baixo em vez de me mover para cima. Vou passar para a próxima tela assim que eu apertar o botão de busca. O que vou fazer aqui, novo, já tenho isso na tela. Alinhe isso. Se eu cliquei em “De”, aqui está minha cidade de partida, eu vou rotular isso como de. Só estou usando as setas para mover isso para baixo. Você pode fazer isso com seu mouse também, e eu vou apenas mover este cara para baixo um pouco. Aqui, eu seria capaz de realmente procurar. Só vou copiar um destes. Opa, eu não copiei tudo. Escrevi isto aqui. Mais uma vez, que foi atrás de alguém tem que arranjar para ir para a frente. Ótima. Isso vai servir como minha caixa de pesquisa na verdade e, além disso, eu vou adicionar apenas uma linha para representar a lista de coisas que eu tenho aqui. Um pouco perfeccionista, estou sempre tentando alinhar esses caras de volta. Agora, eu só vou copiar. Se eu puder fazer isso rapidamente e fazer um monte de linhas para parecer, estes são meus resultados de pesquisa. Então eu só vou copiar isso. Lá vamos nós, um pouco mais rápido. Eu só agrupo esses juntos só para poder copiá-los um pouco mais rápido. Esse é o meu modelo para a minha partida. Aqui estaria a minha lista de cidades. Este é um dos meus documentos, vai começar a ficar maior. Vou selecionar aqui, e quero que esse cara seja mais alto porque quero fazer outra fileira abaixo dela. Vou copiar esta coisa toda. Garanta que eu tenho tudo e apenas duplique isso para a viagem de volta. De, para e isso vai ser cidade de retorno. Na verdade, quero desenhar uma flecha daqui até aqui. Eu vou copiar aquele cara e o que eu posso fazer é só arrastar isso para cima. Se eu apertar “Shift”, ele vai ficar no eixo certo. Aqui assim, eu vou mover esse cara para baixo um pouco. Legal. Isto está a mostrar que estou a escolher o meu voo de e para. Eu vou mudar isso para dizer cidade de destino porque retorno soa um pouco estranho neste momento. Ótima. Vou salvar isso, sou um protetor compulsivo, não gosto de perder coisas. A próxima coisa que quero fazer é mudar essa flecha. Vamos ver aqui. Se eu tiver minhas opções de seta. Eu não os vejo. Se isso acontecer, apenas disse fuga. Vamos deixar isso em paz por enquanto. A próxima coisa que quero fazer é fazer o meu encontro de ida e volta. Vou copiar isto, isto e aquilo, e mudar para ouvir. Isso vai se tornar data de partida e isso vai acabar sendo calendário. Não me vou incomodar a desenhar uma tonelada, mas vou fazer uma coisa maior aqui. Digamos que este é o nosso calendário. Outra coisa que você pode fazer se você quiser se deixar um pouco longo Eu vou apenas dizer calendário para ver o que você está pensando. Novamente, isso não é como qualquer tipo de arame. Isso é apenas expor o básico do que eu estou fazendo em cada tela. Vou copiar isto e colocá-lo aqui em baixo. Parece bem perto. Isso vai ser dois e agora isso vai fazer mais sentido como nossa data de retorno. Novamente, eu vou pegar essas flechas para mostrar que eu estou indo daqui para aqui. Desfazer. Esse cara não está cooperando agora. Às vezes, o esboço fica um pouco louco. Arrastem isto. Lá vamos nós. Isso está mostrando novamente, eu estou escolhendo todas essas coisas e então eu vou dois voltar para a tela. Estes vão preencher com tudo o que eu escolher nestes passos. Também vou desenhar algumas destas setas lá em baixo. Aqui vamos nós. Está um pouco apertado. Lá vamos nós. Teste para cobrir tudo. Legal. Guarde isso. O próximo passo é obter os resultados da pesquisa. Na verdade, isso está me sentindo muito apertado e isso está me incomodando. Então eu vou pegar esses caras e mover essa coisa toda para baixo um pouco, e então eu vou apenas fazer esse cara mais alto. Como você pode ver, é super flexível. Você sempre pode mudar qualquer uma dessas coisas. A próxima coisa que vou fazer é apertar este botão de busca, que ficou para trás e depois para a frente. Legal. Próximo. Aqui vamos nós. Esta tela será o resultado do meu voo para a partida. Eu só vou ler os resultados por enquanto, e então a tela vai ficar dividida em todas as diferentes opções de vôo que eu tenho. Eu só vou designar isso fazendo esses caras um pouco maiores. Como, obviamente, todos esses resultados vão rolar, eu só vou voltar para esse cara. Desloca para fora da parte inferior e está alinhando. Faremos isso depois, copiando. Digamos que esta é a opção de vôo A. Eu vou fazer opção de vôo B e eu estou aqui opção de vôo C, e assim por diante. Finja que está pairando no meio. Aqui eu vou fazer este voo de partida. Vou duplicar tudo novo porque vou ter resultados para o meu voo de regresso também. Vou jogar isso aqui, e digamos que o vôo B foi uma ótima opção. Vou escolher o voo B. Vou mudar isto para o voo de regresso. Digamos que eu queria escolher. Na verdade, vou colorir esse cara aqui. Devo escolher isso? Digamos que o voo A foi o melhor. Vou escolher o voo A, isso é errado. A fronteira, vamos encher. Legal. Mais uma vez, desenhe minha flecha. Faça-o ir por cima. Uma coisa que eu não mencionei foi que para cada um desses, eu poderia ter alguns detalhes do vôo. Esta coisa pode expandir-se em linha ou pode mostrar-me outra tela. Não temos a certeza do que isso vai ser. Não vou deixar como uma tela diferente agora. Vou ter isso em mente mais tarde. Vou copiar isto, e isto vai ser o nosso último ecrã, por isso, o nosso resumo do voo. Aqui vamos nós. Resumo. Isto vai começar com o nosso voo de partida, e isso vai ter apenas algumas informações. Vou copiar um desses caras, pegar aquela coisa na frente. Digamos que tem alguma informação sobre o nosso voo de partida, e então eu vou fazer o mesmo para o nosso voo de regresso. Então queremos fazer o nosso total. Digamos que este é o lugar onde temos o nosso valor total, e, em seguida, na parte inferior, vamos ter um grande botão para comprar. Ainda não sabemos o que isso vai dizer. Totalmente bem. Esta é uma visão geral muito rápida dos passos que vamos tomar. Mais uma vez, estes foram baseados no aplicativo existente do Sudoeste. Estes são os passos que vemos o usuário tomar. Novamente, estamos começando com, vamos escolher a viagem do livro. Nós vamos escolher de onde eles estão voando, para onde eles estão voando, e as datas. Procura. Outra vez, escolhendo esses caras. Uma vez que eles procuraram, eles vão ver seu vôo de partida. Vão ver o voo de regresso e depois um resumo de tudo. O que isto não está a cobrir neste momento, é uma forma de o fazermos. Isso é exatamente o que Sudoeste tem agora. A única coisa que queríamos otimizar para Kelly era que ela queria ter a capacidade de olhar para voos diferentes ou fins de semana diferentes. Digamos que ela escolheu um fim de semana aqui. Ela chega ao resumo e diz: “Oh, este é $600, sim, isso é muito caro. Quero ver um fim de semana diferente.” Neste ponto, ela teria que fazer é voltar, voltar , voltar para a busca para poder mudar suas datas. O que eu quero ver a seguir é quais são algumas opções diferentes que eu posso tentar gostar de Kelly realmente mudou mais facilmente as datas enquanto ela está no processo um pouco mais abaixo, porque ela provavelmente não quer mudar estes de e para. Ela só quer mudar as datas. É um monte de volta e quarto. Vamos ver isso nos nossos esboços. Nós não vamos olhar para isso para a jornada do usuário, já que isso leva o caminho para o que ela vai estar fazendo. Nós vamos nos concentrar em mais sobre isso em nossos esboços e novamente em nossos wireframes. Vamos cobrir isso a seguir. 9. Comece a esboçar: Bem-vindos à Unidade 4, Sketching. Agora que você está armado com personas e viagens de usuários, é hora de colocá-los em ação. Nesta fase de UX, você esboçará suas jornadas de usuário para analisar as implicações de suas decisões de design. Isso ajudará você a ver quantas decisões os usuários terão que tomar e quantas telas passarão para alcançar seu objetivo. Este passo é verdadeiramente inestimável e definitivamente não deve ser ignorado. Então, por que desenhar é tão importante? Honestamente, é muito difícil saltar direto para wireframes, mesmo que você já tenha idéias flutuando em torno de sua cabeça. Wireframes também são criados no computador, então eles já levam mais tempo para criar do que esboçar. Você também pode ser tropeçado muito cedo no processo com os detalhes do design, como “Onde vai o botão? Quão grande deve ser este texto? Etc” Sketching ajuda você a reunir suas idéias muito rapidamente. Você pode apagar, jogar coisas fora. Você pode mudar de idéia quantas vezes precisar. Não há ramificações para fazer isso. Pegue um novo pedaço de papel e vá embora. Você quer manter seus esboços soltos e não se concentrar em cada detalhe. Você vai guardar essa parte para os wireframes. Então, para começar, esboçar várias idéias e opções para algumas telas principais de seus fluxos. Ao esboçar, lembre-se de pensar sobre o seguinte. Quais informações devem ir em cada tela? Qual é a hierarquia da informação? Quais são algumas opções de layout diferentes que eu posso tentar? Outras coisas a ter em mente enquanto você está desenhando são: mantenha seus esboços soltos. Isso realmente vai ajudá-lo a se mover rapidamente e tentar muitas opções diferentes. Novamente, não se preocupe em ser perfeito. Não estamos aqui para julgá-lo nos seus esboços. Não se concentre em todos os detalhes. Você só quer obter a essência de cada tela e você será capaz de refinar tudo mais tarde. Você pensou em novas idéias que você estava desenhando? Ótima. Não tenha medo de pensar uma vez que você tem a caneta em sua mão e se deixe enlouquecer, nada é muito louco nesta fase. Ele irá ajudá-lo a trabalhar através de muitas opções diferentes. Você está se sentindo preso? Afaste-se de seus esboços e faça uma pausa. Você pode precisar de um pouco de tempo para limpar sua mente, ou você pode apenas querer se sentir inspirado por outros aplicativos. Então abra seu telefone, vá até seu computador, brinque com algumas coisas e se inspire. Além disso, não se esqueça das suas personas. Se você os tiver impressos ao seu lado, leia novamente e coloque-se no lugar do usuário. Você ainda está no caminho certo? Então, aqui estão alguns exemplos de esboços para dar uma idéia do que estamos procurando alcançar na etapa. O primeiro exemplo é, na verdade, o meu próprio esboço, e você pode ver que é bem simples. Eu não uso muitas palavras ou botões, e eu realmente não desenhar uma tela cheia. Em vez disso, concentro-me na tarefa em mãos em cada tela. Não há necessidade de ser super completo aqui. Os próximos exemplos que encontrei no Dribbble, ambos são um pouco mais refinados do que o meu. Você pode ver que eles têm realmente linhas retas e os contornos da tela. Uma vez que estes foram postados no Dribbble, os designers provavelmente demoraram um pouco mais de tempo para limpá-los, mas sinta-se livre para ir de qualquer maneira. Você pode realmente ser tão confuso ou tão perfeito quanto quiser, desde que você seja capaz de decifrá-los no final. Então, neste ponto, você provavelmente tem toneladas de esboços de papel. O que você vai fazer agora é decidir quais opções são mais ideais e quais você pode simplesmente jogar fora. Depois de acertar seus esboços das jornadas do usuário, publique-os para compartilhar. Certifique-se de incluir algumas notas ao lado de seus esboços para ajudar a comunicar qual é o fluxo para você e para os outros. Chegando no próximo vídeo será nosso último passo no processo de UX, wireframing. 10. Exemplo do projeto: esboços: Ei pessoal, bem-vindos de volta. Espero que você tenha tido muito sucesso até agora trabalhando em suas personas e em seus mapas de jornada do usuário. Em seguida, vamos abordar esboços. Eu tenho alguns esboços aqui para mostrar a vocês, para ver o que eu fiz para os aplicativos do Sudoeste até agora. Para começar, acho que vou começar informando o método que eu tomei para fazer esses esboços e eu queria que eles fossem realmente soltos. Mais uma vez, peguei meu caderno de esboços de confiança, peguei alguns Sharpies e comecei a brincar. Você pode ver que há muita coisa acontecendo aqui. Eu tenho um monte de telas diferentes, eu tenho algumas anotações por todo o lado, mas eu queria me deixar muito solto e apenas ver o que estava acontecendo. Outra coisa que eu queria mencionar era, eu queria obter alguma inspiração para enquanto eu estava começando com isso, então eu vasculhei a web, olhei em Dribbble, Behance e apenas tentar obter um senso geral de como, o que fazer outros aplicativos se parecem com? Eu fiz um monte de pesquisa em outros aplicativos que estão lá fora agora, mas é sempre bom olhar para coisas como no Dribbble por exemplo, porque as pessoas estão sendo um pouco mais inovadoras e é muito divertido para obter alguma inspiração que maneira. O que eu queria começar fazendo era enfrentar as diferentes telas que eu preciso fazer para este aplicativo. Então o primeiro aqui em cima é a casa ou como onde estamos realmente reservando a viagem. Aqui é onde toda a informação está sendo inserida. Há um monte de maneiras diferentes que a tela poderia olhar, e na verdade para mostrar a vocês, eu vou jogar isso sobre, para lembrar que este cara aqui é a primeira tela e então o livro viajar um para cá é outra tela a que eu estou realmente inserindo tudo. Eu acho que eu realmente mostrar esse cara depois em uma página diferente, mas eu acho que eu estou começando aqui com esta seção de viagens livro porque isso tem muita coisa acontecendo e há um monte de maneiras diferentes que nós poderíamos fazer isso. Então eu movo isso todo o caminho. Uma das principais coisas é descobrir é esta uma viagem de ida e volta ou uma ida. Eu só tentei demonstrar aqui através meus esboços algumas das diferentes maneiras que poderíamos fazer isso. Então nós poderíamos ter mais de um botão de alternância, há este método onde você tem o que está selecionado é sublinhado ou até mesmo uma pílula aqui onde este poderia ser apenas um fundo sutil por trás do que está selecionado. Todas as informações nestes ecrãs são iguais. É só uma questão de como devemos colocá-los para fora. Então escolher aeroportos, datas de partida e retorno, quantos passageiros, códigos promocionais e, claro, nosso botão Pesquisar. Na versão original, tudo era sua própria linha. Então, a partir do dia de partida, dia de retorno, passageiros, tudo era como empilhado, então a tela realmente é longa em seu aplicativo existente. Eu olhei para algumas maneiras diferentes, como se pudéssemos empilhar essas coisas para economizar espaço? Aqui, empilhando esses meios, você perde um pouco de espaço para texto, mas nós poderíamos realmente usar os códigos do aeroporto em vez disso para tornar isso um pouco mais curto. Então SFO em vez de São Francisco, por exemplo. Apenas algumas opções aqui que eu mexi com para começar, e há outra aqui em baixo. Depois mudei para os resultados da pesquisa. Novamente, parecendo como esse cara poderia olhar? Existe uma maneira de classificar isso por $ ou pontos? Olhando para uma maneira de realmente mudar a data, que é algo que eu pensei que seria realmente importante. Uma coisa que Southwest faz um pouco diferente do que alguns dos outros Aplicativos Airline, é que eles colocam uma enorme ênfase nas diferentes classes tarifárias. Eles têm a vontade de fugir, que é o barato. Eles têm a qualquer hora, que eu acredito que você é capaz de mudar as coisas e não há penalidades ou algo assim. Então, é claro, eles têm a classe executiva. Outros aplicativos, como United ou Delta, permitem que você escolha entre a classe econômica da cabine principal ou a classe executiva. Mas Southwest realmente quer se concentrar nas três classes diferentes. Então, porque eles colocaram uma ênfase tão grande nisso, eu percebi que é muito importante e nós precisamos dar uma olhada em algumas maneiras diferentes para que essa informação possa ser apresentada. Mais uma vez, vou mostrar-vos aqui. Estes são aqueles grandes botões roxos que apenas pareciam bastante insano, especialmente quando você tem que percorrer todos estes. Você perde os horários e, em seguida, as informações de vôo se é non-stop ou qualquer coisa, porque esses botões são tão proeminentes. Claro, queremos que eles se pareçam com botões, mas estes apenas vão por cima. Uma coisa que eu explorei com meus esboços é, há uma maneira melhor de fazer isso? Se tivermos que tê-los em filas um em cima do outro, podemos fazer as datas um pouco maiores? Ou poderíamos realmente fazer algo onde expandimos e mostrar que a tarifa começa em $100. Eu posso tocar nisso, eu acho que eu desenhei aqui. Quando eu expandir esse cara, eu posso ver que as diferentes tarifas são 100, 248 e 270. Outra opção que eu olhei aqui, era ter esses caras ao lado do outro. Então, mais como uma pílula ou um formato de alternância onde eu poderia escolher qual tarifa, e talvez esse cara seria selecionado e então há uma maneira de eu seguir em frente a partir daqui. Um pouco mais de exploração para fazer, mas só para o sentido geral, eu estava brincando com isso. Aqui é onde eu tenho minha tela inicial. Novamente, esta é a tela bem aqui. Então esse cara é o mesmo que esse cara. É bem genérico, é muito chato. Tem muita coisa acontecendo no topo, que é tudo sobre up-selling em vez me deixar chegar à informação que eu quero aqui. Deixe-me voltar aqui. Uma coisa que eu pensei que seria muito bom é dar a esta marca Sudoeste, um pouco mais de destaque e talvez apenas ter algumas belas imagens aqui atrás. Só para parecer um pouco mais refinado e sofisticado. Outra coisa é olhar para como eu posso empilhar esses itens. Eu tenho todos os mesmos itens na tela, mas posso reorganizá-los de uma maneira um pouco mais agradável? Talvez até introduzir um ícone aqui que seja um pouco mais sofisticado. uma vez, algumas opções diferentes. Este aqui, eu estou realmente focando na seção Livro de Voo, porque para mim é a maior parte da razão pela qual eu vou para um aplicativo. Eu vou a um aplicativo mais para procurar um voo em vez de fazer check-in porque eu não estou voando o tempo todo. Esta opção também tem este exemplo nav inferior, que aqui em baixo eu dei uma olhada, o que são um par de maneiras diferentes que eu poderia mostrar a navegação. Como o usuário pode ficar entre as diferentes seções? Para algo como um aplicativo de viagem ou para este aplicativo de viagem particular como reservar um voo, isso pode não ser super importante onde eu poderia ir para casa reserva voos. Acho que este está a verificar, isto são reservas, e assim como o meu perfil. Há um par de coisas diferentes que seriam úteis, mas esta é a abordagem certa para este aplicativo? Não tenho a certeza absoluta. O método que eles usam agora é apenas o botão Voltar, então isso pode ser perfeitamente bom. Outra maneira de fazer isso seria ter uma gaveta onde isso poderia ter informações diferentes nele também. Novamente, um par de maneiras diferentes que poderíamos fazer essa navegação, é apenas uma questão de preferência em, realmente o que eu acho que vai funcionar para o aplicativo? Um pouco disso eu talvez não saiba ainda. Talvez eu não saiba até chegar ao palco de wireframe, porque aqui eu estou apenas tentando brincar com um monte de coisas diferentes. Uma vez que eu estou em wireframes e digamos que eu decidir, eu realmente amo este layout, mas hey, este nav inferior não está funcionando e na verdade, esta versão da navegação vai funcionar melhor. Então hey, eu já pensei sobre isso. Tenho todas essas coisas à minha disposição enquanto vou. Outra coisa que eu queria saber nos meus esboços aqui, eu adicionei algumas notas laterais para mim. Com a navegação, você não apenas dizendo como, hey, Eu quero lembrar não muitos toques, essa coisa deve ser acessível em qualquer lugar, e é fácil sempre voltar a esta tela inicial. Para a tela inicial, como eu disse, talvez um pouco mais de branding para Sudoeste, alguns botões maiores e mais interessantes. Em seguida, fazer o layout apenas se sentir um pouco mais moderno em vez de apenas tudo preso em um layout plano vertical onde é apenas muito chato. Finalmente, minha terceira página de esboços, eu realmente estou focando nos resultados da pesquisa e eu tenho um pouco para o resumo da viagem. Novamente, este não é um exercício de esboço totalmente extenso, mas é apenas para dar a vocês uma noção de como eu abordaria isso e como eu abordaria os esboços em geral. Com os resultados da pesquisa, novamente, como vimos na primeira página de esboços, há muitas maneiras diferentes de que essa informação pode ser exibida. Aqui eu queria me concentrar nesta parte, então mostrando os diferentes vôos. Gostei desta pequena seção de cima aqui onde tenho o meu voo de partida. É mostrar de onde estou voando, para onde estou voando, e depois poder alternar a data. Eu acho que isso poderia ser muito, muito interessante, onde eu posso ir para trás e para a frente por um dia. Ou talvez haja até mesmo um pequeno ícone de calendário aqui que me permite mudar totalmente a data, então eu não quero ter que ir um por um. Você pode querer começar de novo para essa opção, mas seria bom se pudéssemos fazer isso a partir daqui. Novamente, esta primeira opção é que o modo de expansão, onde eu posso ver que é de $100. Se eu grampear esse cara, esse se expandiria. Eu podia ver todas as opções diferentes, e isso iria apenas empurrar os outros vôos para fora do caminho. Também teríamos que fazer algo com o design visual para ter certeza que isso se destaca e se sente como uma coisa coesa. Mas novamente, podemos lidar com isso mais tarde com design. Segunda opção aqui, mostra o mais como um formato de cartão. Novamente, é aquele formato onde cada um desses preços é colocado lado a lado. Então eu tenho um pouco mais de ênfase nas datas do voo ou os horários do voo, bem como se este é non-stop ou/e qual é o número do voo. A terceira versão, isso é mais parecido com o que eles têm agora, mas talvez pudéssemos fazer o tipo um pouco maior. Talvez estes não precisem ser tão gigantes e qualquer, eles ainda podem sentir como botões, apenas diminuí-los um pouco. uma vez, algumas opções diferentes aqui. Em seguida, no que diz respeito ao resumo da viagem, a parte importante aqui é ver para onde você está voando e vindo, quais são os horários de seu voo para a sua partida, bem como para o seu retorno, e a data é especialmente importante aqui também. Finalmente, o preço na parte inferior e um botão para comprar. Isso pode não ser tudo o que precisa ir nesta tela de resumo. Eu acho que este, eu definitivamente gostaria de explorar um pouco mais. Mas, novamente, para esses propósitos, isso deve ser suficiente para vocês começarem. Então vá em frente, desenhe, e mal posso esperar para ver o que vocês inventaram. 11. Como usar esboços para wireframes: Bem-vinda de volta. Chegamos à nossa última técnica de UX. Levando seus esboços para wireframes. Wireframes permitem refinar e transformar seus esboços e fluxos de usuário em uma representação tangível do seu aplicativo. Agora que você tem um monte de grandes esboços para começar, você pode finalmente saltar para o computador e fazer a transição para wireframing. Desde a fase de esboço, você já deveria ter explorado muitas possibilidades e combinado ideias com o que você acha que funcionará melhor. Este refinamento deve ajudá-lo à medida que você começa a usar o wireframe, já que você tem uma idéia melhor do que seu aplicativo fará e como sua interface deve olhar para suportar isso. Com wireframes, você deve ser descritivo, mas não pixel perfeito. Tente usar cópia real para botões, e outros elementos de interface do usuário para que você possa ter uma noção de como as coisas se encaixam. Não se preocupe em preencher áreas de conteúdo com cópia real, basta usar Loremipsum lá. Certifique-se de refinar continuamente e fazer ajustes à medida que avança. Se você ainda não fez isso, você precisará decidir sobre um padrão de navegação. Como os usuários vão se mover entre seções do aplicativo? Mais importante ainda, o que funcionará melhor para o seu aplicativo? Alguns padrões comuns são as abas inferiores, que o Foursquare, o Facebook, o Twitter e o Pinterest usam, uma gaveta ou um painel deslizante, como o LinkedIn e o Google Maps, ou uma Casa ou um “hub”, que todos usam agora. Os exemplos aqui ilustram algumas outras maneiras pelas quais os usuários podem navegar. LinkedIn tem uma gaveta deslizante, mas eles também têm ícones na parte superior para novas mensagens, notificações e solicitações. Expedia usa outra abordagem onde você pode tocar em qualquer destino recomendado em uma lista de rolagem, ou simplesmente escolher hotéis ou voos. Finalmente, a terceira tela mostra o Flickr, onde eles usam uma navegação inferior como a navegação principal, mas dentro de cada seção, há guias na parte superior para alternar entre essas seções. O próximo passo é você vai querer acertar os detalhes. Lembre-se, um componente-chave dos aplicativos móveis é apresentar o conteúdo em primeiro lugar. Não faça com que seus usuários procurem o que querem. Pense em quantos calls-to-action você deve colocar em cada tela. Você deve tentar se concentrar em um primário e um secundário no máximo, embora saiba que isso nem sempre é possível. Basta lembrar que você não quer dar aos usuários muitas opções, que eles se distraiam da tarefa em mãos ou se percam. Você também deve priorizar o conteúdo dentro de cada layout de tela. Hierarquia é a chave, use poucas palavras quanto necessário e garante que tudo o que está presente precisa realmente estar lá. Considere quais elementos da interface do usuário, como caixas de pesquisa , botões etc, você precisará e onde eles irão. Não enterre a caixa de pesquisa se ela for parte integrante da sua experiência. À medida que você trabalha criando seus wireframes, é aqui que seu nível de refinamento entrará em jogo. Convém certificar-se de que seus arquivos estão configurados para usar dimensões de tela precisas. Eu recomendo usar a resolução do iPhone 5S, que é 640 por 960 pixels. Basta ter em mente que você terá um pouco menos de altura para os iPhones menores, e você terá mais espaço para jogar para o iPhone 6 e 6 Plus. Ainda temos que nos preocupar muito com isso agora. Além disso, as escalas e tamanhos que você usa para botões e outros elementos da interface do usuário devem estar próximos do final, para que você possa representar com mais precisão os designs que você criará mais tarde. Um pouco de trabalho de preparação nos estágios iniciais irá ajudá-lo uma tonelada mais tarde. Finalmente, você vai querer montar cuidadosamente seus wireframes para criar uma apresentação coesa. Seus wireframes devem representar cada tarefa ou jornada do usuário que você delineou, para mostrar o fluxo lógico do caminho do usuário pelo aplicativo. Deve ficar claro quanto a quantas etapas e telas um usuário passará para realizar uma tarefa específica. Como você fez durante a fase de esboço, você pode avaliar os prós e contras para diferentes soluções, e eliminar aqueles que não estão funcionando ou você simplesmente sente que são muito complexos. Há uma variedade de ferramentas que você pode usar para criar seus wireframes. Escolha um programa com o qual você esteja mais familiarizado ou com o qual você acha que pode obter os melhores resultados. As ferramentas que eu mesmo usei são Illustrator, Sketch, Omnigraffle e Balsamiq. Ultimamente, eu tenho usado o Sketch para meus wireframes, já que eu sou capaz de mover pela interface muito rapidamente e parece um pouco mais leve em comparação com o Illustrator. Eu também acredito que todos esses programas têm teste gratuito, então você deve ser capaz de fazer usá-los qualquer que você precisa. Agora vamos dar uma olhada em alguns exemplos de wireframing. Eu puxei todos estes de Dribbble, uma vez que eles tendem a ser bem projetado e de maior qualidade. Observe que a maioria desses designers montaram seus fios em fluxos, e designam como o usuário se moveria entre telas tocando em vários botões ou links. Eles também incluem algum texto para denotar os nomes das telas e notas úteis. Os diferentes wireframes também mostram uma variedade de estilos que você pode usar. Então o da esquerda aqui, eles usam uma dessas linhas vermelhas e setas para ir entre telas, estes um pouco de cor. A segunda mostra apenas as telas próximas umas das outras. Aqui está outro exemplo. Este designer introduz novamente um pouco de cor nos wireframes para ênfase, você pode vê-lo em um par de botões diferentes aqui e usando o cinza escuro. Finalmente, este é outro exemplo de wireframes que são um pouco híbridos. Eles estão usando ícones reais, mas eles também estão usando botões de espaço reservado em caixas ao mesmo tempo. Se você baixou o PDF da classe, que eu espero que você tenha, eu o encorajo a dar uma olhada nesses exemplos e até mesmo fazer algumas pesquisas adicionais on-line para obter mais inspiração. Então, para cobrir isso para o seu material de entrega final, você criará um conjunto de wireframes anotados finais para completar a história do seu aplicativo de viagem. Carregue seus wireframes para o seu projeto e compartilhe com a classe. Estou tão animada para ver o que vocês inventaram. 12. Exemplo do projeto: wireframes: Olá a todos. Pronto para a última demonstração do projeto da turma. Aqui, eu vou estar mostrando a vocês como eu iria lidar com wireframes para este projeto. Vou começar dando uma olhada no meu mapa de viagem de usuário aqui para lembrar o fluxo que eu tinha delineado. Isso deve parecer familiar, nós revisamos isso dois vídeos atrás. Idealmente, você se referiria a este mapa, bem como seus esboços ao completar seus wireframes. Você pode imprimi-los para tê-los facilmente ao seu lado ou simplesmente abrir o arquivo para que você possa alternar entre arquivos. Outra coisa que seria útil para ter são seus esboços. Desde que eu tirei uma foto destes, eu tê-los no computador, mas também pode ser útil ter o seu caderno de esboços ou o que quer que você usou para seus esboços ao seu lado também. Se olharmos para trás nesta jornada do usuário, o fluxo que vamos capturar com nossos wireframes está começando a partir da tela inicial, vamos tocar na viagem do livro, eu vou entrar para onde estou voando para e de, as datas, e então eu vou procurar voos e ser capaz de escolher uma partida e um voo de regresso, e, em seguida, ver um resumo para ir em frente e continuar a comprar a partir daí. Então esse é o fluxo que vamos cobrir. Agora, para os wireframes. Abra isso. Para começar, uma vez que os wireframes são muito mais demorados, eles são muito mais complexos para criar em tempo real durante esta demonstração, eu fui em frente e simular estes para este projeto. Eu vou te guiar por tudo isso. Mas antes de começar, eu realmente quero compartilhar algumas das coisas que eu usei para criar esses wireframes que eu acho que vão ser realmente úteis. A primeira coisa é que você vai notar aqui que temos estes pequenos contornos. Este é realmente um modelo de iPhone que eu uso que eu encontrei on-line que era livre para baixar. Vou incluir isto para vocês, para que possam usar isto também para os vossos projectos. É bastante útil. Eu acho que ele apenas faz com que os wireframes pareçam um pouco mais polidos, e isso lhe dá uma sensação de como exatamente onde seu conteúdo precisa caber dentro do quadro. A outra coisa que eu fiz foi realmente baixar outro arquivo de esboço que é um modelo para iPhones, e não apenas um modelo, mas você pode ver aqui eu tenho este pequeno botão de alternância, eu tenho algumas dessas setas. Se você está familiarizado com o iOS, estes são elementos bastante padrão. Na verdade, ele vai puxá-lo aqui. Este é o modelo iOS 8 iPhone 6 da Teehan-Lax, e esta empresa criou muitos e muitos modelos, eles têm todo o tipo de pessoal para Photoshop e para ilustrador e esboço. Este arquivo de esboço é realmente muito útil. Se você não viu isso, eu estou incluindo isso também nos recursos da classe para que você possa ir em frente e baixá-lo. Aqui você pode ver que eles têm todo tipo de elementos que você encontraria no iPhone, diferentes ícones no caso de você precisar de coisas para barras de ferramentas. Eles têm botões, eles têm o que chamamos controles de segmento, caixas de busca, teclados. Há até mesmo a forma como você pode mostrar exibições de tabela. Tudo isso está disponível para você usar em seus wireframes. Então, a partir daí, você pode realmente ajustá-los um pouco. Então, se eu voltar para meus wireframes, aqui você pode ver que eu apenas mudei a fonte e mudei a cor para torná-la mais preto e branco para meus propósitos. Ótima. Então essas são algumas ferramentas para você começar, mas então para cobrir como eu criei esses wireframes, eu fiz a mesma coisa que eu fiz ao criar as personas e as jornadas do usuário. A primeira coisa que fiz foi subir aqui para inserir e criar uma prancheta, e eu desenhei um quadrado grande. Mais uma vez para atualizar, eu posso clicar aqui em cima, e eu posso arrastar as caixas de canto aqui, eles são a caixa delimitadora aqui para fazer essa coisa maior ou menor conforme necessário, e basta clicar para salvar isso. Criei a prancheta e, em seguida, arrastei do meu arquivo de modelo esses fundos para o telefone. Uma coisa a notar, eu vou realmente colocar isso na parte inferior da camada, eu tranquei essas camadas. Se as coisas não estão trancadas, se eu destravar isso lá, então eu às vezes posso mover as coisas um pouco demais, e isso fica um pouco irritante. Eu quero apenas ir em frente e trancar isso para eu saber que eu não vou mover acidentalmente isso para qualquer lugar. Ótima. Vamos começar por ver o que eu fiz aqui. A primeira coisa foi criar a tela inicial do aplicativo. Novamente, nós cobrimos esta tela de um par de maneiras diferentes, nós olhamos para ela em nossos esboços. Vou trazer meus esboços de novo para lembrar, vamos ver. Aqui vamos para casa opções para a nossa navegação. Eu tive um par de variações diferentes aqui e eu olhei para algumas coisas. Para esses propósitos, eu apenas escolhi um e correu com ele, mas você pode querer realmente zombar de um par dessas versões em seus wireframes e, em seguida, ver o que funciona. Você sempre pode fazer um arquivo mestre onde você tem um monte de opções diferentes de telas lá e, em seguida, escolher e escolher como você ir. Mas para esses propósitos, apenas manteve bem simples. Aqui estão as minhas opções que eu tenho. Vamos nos concentrar em reservar um voo aqui, então essa seria a nossa próxima tela. Então aqui, eu apenas incorporei o par de coisas que tínhamos mencionado ao longo deste projeto. Então, novamente, estamos voando de e para, datas, quantas pessoas estão viajando, se houver um código promocional, e novamente ida e volta ou uma ida, e então pesquisar. Eu não cobri cada um desses, mas se eu tocar em um desses de onde eu estou viajando de e para, em seguida, abaixo aqui, eu escolhi para delinear a cidade de partida. Isso seria o mesmo para ambos, e eu também delineei isso aqui em baixo, mostrando que, eu realmente vou fazer essa tela cheia para fazer isso um pouco maior. Ok, ótimo. Para mostrar que eu estaria passando por cada um desses passos. Quando vocês estão fazendo seus wireframes, seria ótimo ver todas as diferentes possibilidades e todas as telas diferentes, mas para isso, apenas para demonstração, eu só queria capturar algumas coisas . Uma coisa que eu tinha mencionado quando eu estava pensando sobre este aplicativo de vôo, é que eu realmente queria fazer algumas otimizações. Uma das coisas que notei que o Sudoeste não faz é não usar a sua localização. Estou mostrando que a primeira coisa que está lá é São Francisco porque é o aeroporto mais próximo de mim. Se eu tocar nisso e vir aqui, eu posso ver que San Francisco está checado, e eu também posso ver que Oakland e San Jose estão no topo porque esses são os aeroportos mais próximos de mim, e então eles começam a ir em ordem alfabética. Mais uma vez eu posso digitar aqui para procurar por qualquer cidade que eu quiser. Uma vez que eu terminar com isso, meu próximo passo seria apertar este botão pesquisar voos, e então aqui eu vou procurar um vôo de partida. Eu queria apenas tornar esta tela um pouco mais visual, trazendo os grandes códigos do aeroporto, um pouco de iconografia, e também há uma barra de datas. Aqui está algo que eu posso usar para alternar. Digamos que eu estava tipo, “Oh, na verdade eu quero ver se 23 ou 22 de abril, ou talvez até mesmo o 25 tem um preço melhor, então eu posso facilmente alternar aqui.” Eu não expandi esse cara para esse quadro, mas se esse fosse meu projeto de classe real, então eu definitivamente queria fazer isso para descobrir todas essas interações e como essa coisa funcionaria. Então aqui estou demonstrando que aqui estão as opções de vôo, podemos ver que é a partir deste preço. Então, se eu realmente tocar em um desses, nós vamos nos mudar para cá, e esse cara vai se expandir para que eu possa ver o preço de querer fugir a qualquer momento, e o preço de seleção de negócios. Então daqui, posso escolher um destes. Dessa forma, você não tem que olhar para todos esses números diferentes ao mesmo tempo. Finalmente, depois que eu escolhi aquele cara, eu vou voltar aqui para selecionar meu vôo de volta, e esta tela deve ser muito parecida com a primeira porque eles estão essencialmente fazendo exatamente a mesma coisa. Então daqui, eu vou continuar, eu não apenas copiei e colei esse cara, mas isso seria o mesmo que esse aqui para descobrir qual eu queria ir em frente e escolher. Depois, depois de ter escolhido os dois voos, vou ao resumo do meu voo. Uma coisa que eu fiz enquanto eu estou te guiando através disso, é que eu desliguei todas as minhas flechas. Eu vou voltar depois e mostrar aqueles caras, mas por enquanto, é um pouco mais limpo passar por agora sem eles. Mais uma vez, resumo de vôo, Eu não gastei muito tempo zombando disso, obviamente, e então a partir daqui, uma vez que você rever tudo, se tudo parece bem e você não quer começar de novo, eu vou bater continuar, então eu iria passar pelo processo de reserva, e, em seguida, a minha confirmação, e, em seguida, eu estou tudo pronto. Muito simples, vamos voltar aqui, e você pode ver que eu também estou tentando notar aqui que eu rotulei todas as minhas pastas e tentei agrupar as coisas para que isso faça sentido. Então esse cara é meu cabeçalho, meus rótulos estão por toda parte, mas são esses caras aqui. As setas serão meu fluxo que meu usuário está tomando, e eu estou realmente indo apenas para bloquear isso para ver se isso esconde. Sim, isso ajuda. Então eu também rotulados aqui, Eu tenho tela inicial, reservar um vôo, então tentando apenas mostrar cada peça como eles foram rotulados aqui. Ótima. Aqui você pode ver que eu adicionei essas caixas em cima dos meus wireframes para mostrar o caminho. Isso pode ser muito útil especialmente quando você está delineando um fluxo e há um monte de coisas diferentes que eu poderia clicar, apenas para deixar isso um pouco mais claro. Além disso, se você estiver fazendo mais de um fluxo, então se talvez eu estou começando nesta tela inicial do aplicativo e eu vou fazer o fluxo de voo do livro, e então talvez eu também quero fazer o status do voo, então o fluxo de check-in também. Ter esses contornos vai manter isso direto para você. Mesmo que queira usar outro documento, é bom ver que estou grampeando esse cara e então me mudo para cá. Novamente, toque no voo do livro, eu posso ver que eu bati em este cara para vir aqui. Uma vez que eu terminar com esse cara, eu vou para a próxima tela mesma coisa, eu tocar aqui mostrar que este está aberto, selecionar aquele cara, eu passar para a próxima tela. É só mostrar-lhe um caminho linear enquanto você vai, e então apenas para terminá-lo aqui. Vou recuar um pouco, lá vamos nós. Este documento é um pouco grande só porque este iphone passou a ser humungous. Você sempre pode reduzir qualquer coisa, se sentir livre, mas eu pensei, e apenas deixá-los no tamanho que eles são por agora. Esperemos que isso lhe dê uma boa idéia do que estamos procurando com os wireframes para este projeto. Eles são um pouco mais detalhados, há algumas coisas que ainda precisam ser resolvidas, há algumas coisas que, quem sabe, talvez quando eu chegar à fase de design eu possa mudar, então algo assim, talvez eu não deseja usar um ícone. Talvez eu olhe para isso no design visual e na verdade não está funcionando muito bem, mas tê-lo aqui em nossos wireframes realmente captura todas as coisas diferentes que vamos passar. Novamente, se estes fossem seus wireframes, eu adoraria ver todas as diferentes possibilidades, então o que acontece quando eu tocar na data de partida para escolher uma data? Como é esse calendário? Qual é a aparência deste calendário quando eu quero mudar entre datas? Essa coisa só me deixa passar? Posso realmente abrir o calendário e escolhê-lo completamente? Digamos que eu queria fazer maio, em vez de ter que passar ou realmente voltar para março, por exemplo, como é que todas essas coisas parecem? Isso tudo vai ser muito útil para dar uma olhada neste estágio de wireframe. Isso é um envoltório. Depois de completar seus wireframes, eu adoraria que você enviasse o conjunto final para o seu projeto de classe, e não seja muito tímido para pedir feedback também. Se você vai continuar esta série de classe, nós vamos retomar este projeto. Assim, você sempre pode incorporar qualquer feedback ou alterações em seu projeto à medida que ele fica mais refinado. Eu realmente espero que você tenha gostado desta aula e você se sinta capacitado com suas novas habilidades de UX. Muito obrigado por assistir.