Processo e teoria de design de UX: para todos

1. Pré-visualização do curso: você já quis saber e entender? O U X Nosso processo de experiência de usuário nesta primeira classe na série de duas partes falará sobre o básico U. X Y percorrerá um projeto de amostra que inclui os principais bols de entrega U X, incluindo persona do usuário, perfil, mapa de jornada do cliente e, finalmente, um fluxo de usuário morrendo. A segunda parte da Siri vai mergulhar em armações de arame à medida que desenvolvemos um amigo de fio de baixa fidelidade e transformá-lo em, ah, ah, protótipo de trabalho polido de Alta Fidelidade para testar com os usuários. Depois de assistir a esta primeira parte da Siri, você terá uma compreensão sólida do processo U X como um todo e saberá onde você sai de novo . Eu me juntei e me sobreponho. Todos precisam entender os fundamentos do grande design de UX e o processo por trás dele. Depois de fazer essa aula, você será capaz de incorporar suas idéias XY Y em seus projetos de trabalho cotidianos e até mesmo ter um vislumbre da vida dos designers dos EUA. EUA Esta aula é para todos os que incluem designers gráficos, desenvolvedores Web e qualquer pessoa interessada em descobrir mais sobre o processo ey dos EUA através de um projeto prático e real. Você será encarregado de três muitos projetos de estudantes ao longo do caminho e fornecido com modelos na seção de projeto desta classe para dar-lhe um avanço para o processo. Vamos aprender juntos. 2. Introdução em UX/UI: Você x e você merece O que você é excelente Ooh, eu desenho E como eles são diferentes? - Você? Por que o design é o que você pensa quando você pensa em Web mock ups, projetos e arame frames você olhos interface de usuário e seu resultado final de horas de pesquisa e planejamento por mas você como designer e pelo cliente com sua equipe de marketing que você eu mix até o tema de cores da marca ativos e elementos ícones desenhos, os símbolos do sistema de menu, ilustrações e layout de arranjo básico do site ou aplicativo móvel. UX. Por outro lado, ou design de experiência do usuário se concentra muito menos no lado visual do design e mais na experiência geral do visualizador passa ao se mover através do seu design. UX design das coisas sutis que você percebe em um site como quão fácil é o processo de check-out ? Não consigo encontrar o que procuro. Rapidamente, este site responde à pergunta que eu não sabia que tinha sobre este produto ou serviço. Eu gosto de usar este aplicativo móvel. Ambos os ovos e você eu projetamos são igualmente importantes no processo de design de qualquer peça de design , seja digital ou impressa. Primeiro de tudo. Como é que te parece? Em segundo lugar, como se sente quando uso esse produto com saques? Você é design interface de usuário vem mais natural para aqueles que são designers gráficos Web e ilustradores. Porque é o que fazemos. Criamos imagens e designs animados e dinâmicos com os quais as pessoas querem ver e passar tempo. Criamos ícones que combinam com o estilo da marca, bem como ilustrações, encontrando fotos, dedos também combinam e finalmente encontrando as escolhas Quandt certas e paletas de cores para obter o humor certo para o site que corresponde ao marca. Quem é muito. Mas o design de UX é o que eu quero me concentrar. Primeiro como um site lindo, bem definido é nada sem uma experiência de usuário agregando valor que atinge os objetivos de um usuário e também fornece-lhes uma motivação para participar de suas marcas, produtos e serviços. Então, em suma, faz dinheiro à empresa. O design de UX é enorme. Agora você diz que este termo jogado ao redor sem qualquer pensamento toe y design UX tão essencial para o processo de design geral. Muitas pessoas misturam você x e você eu desenho, e há uma razão pela qual esses dois conceitos se sobrepõem em valor e metas. A cor de uma chamada para o botão de ação, que cairia firmemente no U I ou campo de interface do usuário, também pode estar em uma porta em parte do design da experiência do usuário, pois essa cor poderia facilitar a localização do botão e reconhecer as próximas etapas do processo, tornando sua experiência mais fácil. Felizmente, depois de estudarmos você X e mais detalhes, você está disponível para saber onde você axe e você eu se sobrepõem e como melhor usar ambas as qualidades para produzir designs e layouts envolventes. Vamos aprofundar com o design de UX. Uma ótima maneira de aprender sobre o design de UX é entender que tipo de bles de entrega são esperados fora do futuro do designer de UX. Especialize-se apenas em design de UX. Além disso, qual é o processo geral, como ao criar um aplicativo móvel projetado, por exemplo, vamos fazer exatamente isso usando alguns princípios e sistemas de design de UX comuns para reunir e criar alguns UX para que possamos nos concentrar no design e layout da interface do usuário. Então, primeiro de tudo, vamos falar sobre o nosso resumo do cliente Temos um cliente que precisa e aplicativo móvel projetado e desenvolvido. Eles têm um logotipo e sobre e cores. Eles também têm uma declaração de missão, objetivos de negócios e plano de marketing na mão, eles precisam de alguém que possa criar um design visualmente interessante, mas também atender aos objetivos dos usuários e proporcionar uma experiência positiva ao usuário. Um pedido alto, para dizer o mínimo. Mas vamos percorrer o processo geral. Primeiro de tudo, vamos entender o objetivo da empresa, o público-alvo e a declaração da missão. A empresa chama-se comida local. Oferecem comida local e entrega de mercearias e cidades menores. A maioria das empresas em sua indústria oferece entrega de fast food, mas apenas para grandes cidades metropolitanas . Esta APP quer mudar isso e oferecer o mesmo serviço de entrega de fast food no serviço de mercearia , duas cidades e vilas menores e médias. Seu público-alvo é principalmente pessoas mais jovens, variando de 22 a 45 anos. Aqueles que são profissionais ocupados que não têm tempo para correr para o supermercado estão ocupados. Pais que trabalham e querem ter mais tempo com a família e não querem ter que se preocupar em consertar alimentos. Esta empresa fornece não apenas entrega de supermercado, mas também entrega de refeições de restaurante de qualquer restaurante dentro de um raio de 15 milhas. Há uma taxa extra para qualquer coisa fora desse raio. Ser capaz de compreender os objetivos, a declaração de missão e o público-alvo de uma empresa é uma parte essencial do processo U X. Ser capaz de saber que tipo de clientes seu cliente deseja pode moldar o tipo de experiência de usuário que oferecemos, mas também a interface de usuário e componentes de design visual. Qual é a qualidade única? Esta empresa tem a proposta de venda única sobre muitos de seus concorrentes, e é porque a indústria é a capacidade de oferecer um serviço que atualmente não tem oferecido em muitas cidades e cidades menores. Este é o único aspecto a ser lembrado ao criar ou à experiência do usuário e às viagens do usuário. O próximo passo nos processos U X definiu o tipo de usuários que vamos ter e os objetivos gerais do APS para esses usuários, os objetivos da empresa ou ABS seria fornecer uma capacidade de se conectar tanto ao usuário ao provedor, neste caso, um restaurante ou mercearia com um serviço de entrega de comida, e também ter uma maneira fácil de acompanhar um pedido e, claro, pagar por esse pedido. Agora que falamos sobre os objetivos da empresa, quais serão os usuários? Os golos vão esperar. Quem é o nosso utilizador? Temos um público-alvo dado a nós por uma empresa, mas quem realmente é o usuário? E como podemos conhecê-los para criar essa experiência única de usuário para eles? É aqui que personas de usuários vêm a calhar. Personas de usuário são criadas para pintar o quadro de um usuário em potencial e orientá-lo por uma jornada de usuário que seria o mais realista possível. Dados os dados que podemos reunir. Personas de usuários podem incluir gostos e desgostos e nos dar uma imagem mais realista de seu usuário. Na próxima lição, vamos descobrir como criar uma personalidade de usuário e, mais importante, falar sobre como coletar os dados para criar um 3. Personas que usuário: Então, como coletamos informações para criar personas de um usuário? Se a empresa tem dados anteriores, isso torna nosso trabalho muito mais fácil. Esses dados podem incluir o tráfego do site de um aplicativo da Web atual ou de um site. Isso pode incluir dados de clientes de clientes anteriores que eles possam ter tido. Isso pode incluir dados de pesquisa de marketing que foram comprados pela empresa para pesquisa de marketing . Isso também pode incluir dados de campanhas publicitárias do Facebook e entrar em campanhas publicitárias direcionadas do Facebook mais antigas para encontrar dados demográficos e de usuários essenciais lá. Que conteúdo eles responderam à maioria dos vídeos? Eles tiveram alto engajamento com um anúncio em particular? Talvez descobrir o porquê. Por último, isso pode incluir qualquer interação com o cliente, dados de pesquisas com clientes e comentários recebidos pela empresa. Sobre o que os clientes mais reclamaram? O que eles mais apreciaram sobre o serviço do produto? Há uma grande quantidade de dados por aí para empresas que têm clientes anteriores. Mas e uma nova empresa como a nossa? Não temos bancos de dados de clientes ou anúncios anteriores do Facebook. Tráfego aéreo para olhar para este é o nosso primeiro desafio é um designer U. X Y deve enfrentar é encontrar dados de fontes limitadas. Uma maneira de coletar dados para criar personas de um usuário é realizar entrevistas com potenciais clientes. Ser capaz de localizar esses usuários usando nossas informações de mercado-alvo e entrevistando um através de um telefone, Skype ou entrevista presencial pode ser um custo proibitivo e ocupar um tempo valioso. Mas isso pode ser um passo essencial para entender o cliente e desenvolver uma personalidade de usuário adequada baseada em pessoas reais, respostas e dados reais. Algumas perguntas de exemplo que você pode fazer durante o processo de entrevista é, o que você acha do serviço que está sendo oferecido em sua pequena cidade? O que pode impedi-lo de usar este aplicativo ou usá-lo com freqüência? Qual é o seu principal objetivo usando este aplicativo? Economizar tempo ou dinheiro é mais uma prioridade para você? Com que frequência usaria este aplicativo se você o tivesse disponível? Outra maneira de pegar alguns dados para nos ajudar a criar personas ou usuários e viagens de usuários é estudar a competição. O que algumas das grandes empresas estão fazendo? Como eles estão criando suas experiências? Como é que o móvel deles é absoluto? Estudar um competidor estabelecido tem suas vantagens é que eu já tenho um sistema de trabalho juntos e isso realmente nos ajuda a reunir algumas pesquisas de qualidade e pegar algumas grandes idéias. Nossa empresa é única em comparação com seus concorrentes e o fato de que oferecemos nossos serviços e comunidades menores e não apenas grandes cidades tendo isso em mente, podemos ver como o check-out processa para empresas maiores. Eu posso me perguntar, Como é a minha experiência e usando este aplicativo? Como pode ser melhor? Como podemos tornar a nossa experiência única? Você também pode comprar dados do usuário com base em dados demográficos de destino fornecidos pela empresa. As idades foram alvo queda principalmente no milênio na geração X. Há uma riqueza de conhecimento por aí sobre comportamentos milenares. Gosta, não gosta de como eles respondem a certas vias de marketing. Sabemos que as redes sociais são um grande sucesso com a Geração X. Como podemos utilizar isso não só promovendo ou aplicativo móvel, mas também fazendo com que eles sejam clientes envolvidos que compartilham este aplicativo com seus amigos depois coletamos dados suficientes para trabalhar, agora é hora de desenvolver nossa personalidade de usuário. Vamos desenvolver uma persona de usuário e criar um mapa de viagem do usuário para a nossa persona e alguns projetos haverá muitas personas de usuários simplesmente porque as empresas terão uma grande variedade de usuários com diferentes origens, e você pode ser muito desafiador para resumir todas as suas características únicas e apenas uma persona de usuário. Por uma questão de tempo, nos concentraremos em um aspecto de nossa base de clientes em potencial e forneceremos uma jornada única para ela e seu caso. Você pode desenvolver várias personas diferentes, Então, usando alguns dos dados que reunimos com alguns dos métodos acima, podemos avaliar que são persona usuário viveria em uma cidade de pequeno ou médio porte nos Estados Unidos, já que este não será o único país onde este aplicativo será lançado. No início, ela será uma profissional com dois filhos em casa, talvez dois anos e quatro anos de idade. Ela é casada com um cônjuge que também é um profissional que trabalha. Eles não têm muito tempo para se concentrar em fazer. As refeições em casa estão indo para o supermercado com quatro membros da família na casa. Sempre parece haver algo faltando no leite da geladeira um dia e molho de maçã no outro. Eles queriam não ter que gastar tanto tempo preparando e cozinhar refeições, já que eles já têm apenas algumas horas à noite para estar com sua família. Depois de um longo dia de trabalho, vamos atribuir um nome a esta família. Jessica e John, que têm 34 38 anos de idade, respectivamente, comem muito fora. Mas eles também acham difícil levar uma criança de dois e quatro anos para comer em um restaurante. Seu nível de renda é acima da média para uma família típica em sua cidade, que ambos trabalhavam a tempo inteiro e carreiras profissionais. Ambos trabalham cerca de 40 horas por semana, com John precisando passar alguns sábados como todos no escritório como ele está em uma posição de gerente . Você já notou ao criar essa personagem de usuário, quão pessoal e detalhado eu estou ficando às vezes você pode se sentir como se estivesse escrevendo personagens para um filme. Este tipo de detalhe é essencial para estabelecer e desenvolver em pessoas persona adequadas que são pessoas realmente autênticas em riel situação comum. Então, de volta à nossa família de quatro. Ao criar essa personalidade de usuário, alguns objetivos de usuário começam a aparecer na minha cabeça para esta família como eu começo a criar sua história. Em primeiro lugar, eles são limitados com o tempo, e eles querem recuperar tempo com a família. Eles gostam de comida de restaurante, mas não podem levar as crianças para fora com tanta frequência como eles gostariam . Eles parecem estar faltando um tipo de alimento em sua casa, mas às vezes é apenas um punhado de itens não vale a viagem inteira para o supermercado. Agora que descrevemos uma persona de usuário áspera neste caso, uma semana de unidade familiar agora cria um possível mapa de jornada do usuário, e na próxima lição vamos aprender o que um mapa de jornada do usuário ISS, e vamos em frente e criar um para o nosso aplicativo. 4. Prosseguir a passagem - projeto de estudante: Agora é hora de um pequeno projeto estudantil. Eu quero que você pratique montar um perfil de usuário que você está vendo um exemplo de quando eu criei para a família Smith para um aplicativo móvel que você pode baixar. Este é um recurso pdf para que você possa dar uma olhada no exemplo. Também incluiu um modelo em branco para que você possa começar a adicionar sua própria personalidade única. Você pode desenvolver uma persona para um cliente ou em empresa composta foram criados persona para uma empresa bem conhecida onde você acha mais fácil para coletar dados ou informações. Cabe a você quem e que tipo de projeto desenvolvendo persona para. Vamos dar uma olhada rápida neste exemplo para que eu possa orientá-lo em detalhes sobre alguns desses itens. Primeiro, temos informações de fato geral como idade, ocupação e curso de renda. É bom adicionar fotos para adicionar uma visão realista e imagem da nossa persona. Em seguida, temos chamadas de usuário. Estas podem ser coisas como querer perder peso, estão gastando menos tempo assistindo TV ou até mesmo economizando mais dinheiro. Valores é a próxima categoria. Valores serão itens como família primeiro, nossos cuidados com instituições de caridade locais. Os valores são diferentes dos objetivos, pois parecem mudar com menos frequência, e os valores podem ser transmitidos de outros membros da família ou ser influenciados por escolhas de vida . Também temos oportunidades de resolução de problemas. Estes podem ser pontos de dor que esta persona pode sentir em busca de seus objetivos ou valores. Estes serão importantes para desenvolver ou pensar para que possamos entender maneiras de começar a ajudá-los a resolver alguns desses problemas ou problemas em nosso design. Personas de usuários variam muito, e este é um ótimo guia de canto de partida. Mas há tantas combinações diferentes de itens e categorias que você pode incluir que podem ajudar e dependendo do projeto em que você está trabalhando. Por exemplo, para o nosso aplicativo de pedidos de alimentos, incluindo restaurantes populares. Esta persona tem, que pode ser encontrado quando dados demográficos e pesquisas podem ser úteis, sabendo que tipos de restaurantes podem ser escolhidos pelo usuário, mas também que exemplo restaurante que podemos querer usar para um fluxo de usuário que vamos trabalhar no próximo. Por último, uma história detalhada ou biografia que descreveu alguns dos detalhes que não foram originalmente incluídos nas seções anteriores. Certifique-se de baixar o modelo para obter um projeto de estudante de honra início rápido, Sinta-se livre para postar e compartilhar seu projeto com colegas estudantes na seção Facebook Group Project desta classe então agora para desenvolver. 5. Mapa de jornada do usuário: o que é um mapa de viagem do usuário? Esta é uma jornada que criamos para um trabalho persona dedo através da Web, aplicativo ou site para realizar a medicina desejada. Por exemplo, nosso mapa de jornada do usuário pode atingir as metas dos usuários e resolver pontos problemáticos. Nós conversamos em nosso perfil de usuário neste caso, fornecendo rapidamente opções de comida de restaurante e mantimentos em uma aplicação conveniente e fácil de usar. Lembre-se de tempo é importante para nossos usuários, portanto, fornecer a experiência mais rápida e fácil será essencial para construir um mapa de jornada do cliente. Se você pesquisar jornadas de usuários ou clientes, perceberá rapidamente que elas vêm em todas as formas e tamanhos, assim como as pessoas fazem. Não há uma maneira de criar uma. Existem algumas qualidades importantes de um mapa de jornada do cliente para incluir e desejar sobre aquelas durante a criação do nosso. Quando iniciamos um mapa de viagem do usuário, sabemos que nossa persona e nosso usuário estão no centro deste mapa. Tudo gira em torno de sua experiência, sentimentos e resultados desejados para o aplicativo. Então nós queremos ter certeza de definir para qual personagem este mapa é para, obviamente, Jessica, que é a esposa da família, pois podemos ter vários usuários em várias jornadas de usuários. Também definimos o seu cenário para a viagem. Neste caso, ela quer pedir em um jantar de restaurante para sua família de quatro, mas ela ainda não sabe onde pedir. Ela viu um anúncio para este aplicativo, baixa-o e dá uma chance. Vamos então definir nossos objetivos para persona para esta jornada em particular. Esse processo de ordenação que ela passará neste mapa de jornada acabará se tornando a base para a criação do nosso diagrama de fluxo de usuários. Também nos ajudará quando começarmos a desenvolver. Estão trabalhando armações de arame para que possamos mostrar ao cliente nosso processo de pensamento por trás de porque tomamos certas decisões de design mais tarde no processo de design U. I. A primeira coisa em que nos concentramos e criamos seu mapa de jornada do cliente é descobrir quantos e em que estágio o usuário passará para concluir uma transação. Neste caso, temos uma primeira etapa que seria baixar e instalar o aplicativo. Eles têm que descobrir sobre o aplicativo em algum lugar uma mídia social adicionar um amigo mencionando o aplicativo. Esta é uma primeira etapa importante para incluir porque é parte da experiência geral do cliente , uma segunda etapa em nosso aplicativo será. Assim que abrirem, terão um estágio de descoberta. É aqui que eles descobrem e encontram o tipo de comida que querem encomendar. Ah, terceiro estágio pode ser um estágio de verificação. Isto é quando eles selecionaram sua comida, restaurante ou mercearia e eles se preparam para comprar os itens. Finalmente, a quarta e última etapa será a fase de entrega são a que você pode chamar a fase de consumo, onde o produto é entregue e consumido. Há pontos de contato e oportunidades para criar experiências positivas à medida que o percentual de usuários se move através dos estágios. Vamos, em seguida, identificar áreas problemáticas em cada estágio para que possamos fornecer um contador são uma solução para essas áreas problemáticas negativas. Essas áreas problemáticas podem ser escritas a partir da perspectiva das personas, dando outra chance de ver possíveis problemas através de sua perspectiva. Áreas problemáticas para uma primeira etapa seria um problema em baixar o aplicativo ou ter quaisquer problemas com abri-lo estão usando-o em seu telefone. Uma possível solução será fornecer atualizações regulares para o aplicativo para fornecer uma integração perfeita e uma ampla variedade de telefones. Esta pode ser mais uma solução de desenvolvimento de software que podemos não ter a capacidade nos controlar, mas trazendo-nos para cima de uma forma que você, eu designer, possa pensar holisticamente sobre todo o cliente. A experiência é importante. Também é bom atribuir qual departamento de empresa pode ser capaz de ajudar em cada etapa da jornada do cliente. Para a nossa fase de descoberta, que eles abrem, a APP é onde a maioria dos nossos problemas podem surgir. O usuário tem duas opções principais. Entrega de mercearias e entrega de restaurantes. Pode haver um problema em descobrir qual direção seguir ou como acessar cada um deles. Há também a questão de encontrar os restaurantes certos para encomendar. Se eu nunca comi lá antes, como sei se a comida é boa? Como sabemos o que eles oferecem e quanto é a comida? Se o preço muda frequentemente para a nossa terceira fase de check-out, Ah, problema pode ser que o usuário pode estar distraído e precisar de check-out muito rapidamente. Pode estar preocupado sobre o quão simples e rápido este processo será porque às vezes verificar estágios ca NBI esmagadora para os usuários da primeira vez Outra área problemática poderia não estar comunicando claramente a quebra total da ordem. Quanto foi o imposto? Quanto custa este aplicativo para usar para este pedido? Finalmente, para a nossa fase de entrega, um problema. A Mary pode estar a saber onde está a minha encomenda. Quanto tempo até meu pedido chegar? E se a comida estiver fria ou não? A qualidade que eu esperava? Uma segunda edição pode ser que ela fez o pedido, mas ela esqueceu de adicionar um último item. É possível alterar o meu pedido antes de sair para entrega? E se eles precisarem entrar em contato com o entregador para dizer que eles precisam estacionar na parte inferior da garagem, já que caminhões de construção estão lá naquele dia? Então, realmente, é sobre se comunicar com o restaurante. Isso é possível? Agora que temos algumas áreas problemáticas definidas, vamos agora definir a jornada do usuário através de cada estágio. Este será um passo acionável. Ela vai passar para chegar ao seu objetivo final de encomendar comida de restaurante do aplicativo rapidamente . O primeiro passo parece óbvio. Butts agradável para incluir sua parte desta jornada, ela vai precisar baixar e instalar o aplicativo, mas ela também vai precisar de um login em algum momento antes que ela possa iniciar o processo. Em seguida, você vai querer clicar na opção de entrega do restaurante na tela inicial, enviando-a para uma lista de restaurantes próximos. Ela vai então olhar para a lista de opções e escolher ah altamente avaliado um dedo olhar para mais detalhes e o que eles oferecem. Ela adiciona alguns itens ao carrinho e percebe o estágio de check-out. Ela quer rever os detalhes do custo da APP e, em seguida, clicar no botão Iniciar entrega . Por último, ela vai para uma página de mapa onde ela pode então clicar em um dedo do pé de botão. Adicione à sua ordem estes passos em nossa jornada para ser simples e breve. Poderíamos salvar todas as interações detalhadas do aplicativo para cada diagrama de fluxo do usuário. Vamos fazer juntos em seguida e salvar os componentes de design visual de quando juntamos nosso primeiro quadro de fio visual. Isso só nos ajuda a saber onde ela está na jornada. Em cada etapa temos algumas áreas problemáticas e possíveis soluções. Nós também temos que considerar os objetivos de persona do usuário para cada uma dessas etapas, nossos principais objetivos de usuários que seriam ecoados garganta todas as etapas seria economizar tempo. Algumas oportunidades para alcançar o objetivo de César em cada etapa seriam no primeiro estágio de log in . Uma solução possível para ter um processo de login mais rápido seria fornecer um login do Google e do Facebook onde o mais fácil não precisa configurar um nome de usuário e senha se eles tiverem esses Loggins já disponíveis para o Estágio dois ou o problema estava sendo capaz de enviar o usuário para restaurante e mercearia e da maneira mais fácil. Uma possível solução para isso é fornecer uma tela inicial que direciona o usuário para selecionar uma das duas opções entre restaurante e mercearia. Tornar a tela óbvia é possível reduzir qualquer confusão que o usuário possa ter e economizar tempo e chegar ao seu objetivo final de encomendar comida em um restaurante ou supermercado. Outro problema na fase de descoberta é não ser capaz de encontrar seu restaurante favorito com muita facilidade, ou se ela tem um restaurante que ela não conhece. Como ela sabe se restaurantes uma boa solução poderia ser fornecer provas sociais ou comentários de usuários para qualquer outro usuários da APP estão pegando comentários de sites de restaurantes parceiros como urbano colher ponto com. Também podemos fornecer menus atualizados que também são preenchidos a partir de menus atualizados frequentemente encontrados no Google, nossa personalidade de usuário e Estágio três. O processo de check-out uma vez é para ser muito rápido. Ela tem uma criança de dois anos no colo. Como temos um dedo do pé solução. Será que este é um processo muito rápido e fácil? Poderíamos ter certeza de que a tela de check-out está limpa e também tem todos os detalhes necessários para serem incluídos, incluindo um item de imposto e também quanto está sendo cobrado pelo nosso serviço. Ser aberto e transparente sobre o custo do nosso APS é importante tanto para o cliente os valores da nossa empresa na fase de check-out. Nosso problema era descobrir quanto tempo levaria para a comida chegar. Nossa solução poderia ser fornecer um mapa na tela após o check-out que mostra o E.T.A E.T.A da comida com base na localização do carro de entrega, semelhante ao que você vê no aplicativo uber. Uma solução para o nosso segundo problema sobre a necessidade de mudar em ordem após colocá-lo é ser capaz de fornecer um botão nesta tela do mapa que lhe dá a oportunidade de ligar para o restaurante para fornecer quaisquer últimas adições à ordem ou ter a capacidade de enviar um mensagem de texto em vez disso. Assim, identificamos nossas etapas, áreas problemáticas, soluções e como incorporar as metas dos usuários de ER em cada estágio. Acabamos de criar um mapa de viagem do primeiro usuário do farm. Agora é hora de ficar mais detalhado à medida que trabalhamos no fluxo de usuários. O que nos leva um passo mais perto do lado do design U I das coisas. Mas primeiro, quero falar sobre seu próximo projeto estudantil na próxima lição. À medida que você trabalha na criação do seu primeiro mapa de jornada do cliente com a ajuda da personalidade de usuário recém-desenvolvida , eu forneci este mapa de jornada do usuário para este projeto como um download. PDF para que você possa olhar para o mapa final com mais detalhes. Também forneceu um modelo em branco baseado em Adobe Illustrator que ele pode personalizar para criar um mapa de viagem para seu próprio dedo do pé persona 6. Fluxograma de usuário - passagem detalhada: O que é um fluxograma do usuário? O fluxograma a laser é um mapa que descreve as ações exatas que um usuário precisa tomar para completar a jornada ou o processo. Ele se concentra um pouco menos na resposta emocional, como a jornada do cliente faz, mas mais nas etapas técnicas exatas que ela precisa tomar para completar sua ação. Ele também mostra as diferentes vias possíveis, estes contágio de ar, como tudo está conectado e, eventualmente, volta ao redor para o usuário. Mapas de fluxo de usuário da tela inicial Originalmente derivados de fluxogramas, você provavelmente já viu fluxogramas em algum momento de sua vida. Ah, muitos fluxogramas têm meios engraçados que delinearam resultados diferentes, mostrando o resultado final de uma série de decisões simples que você toma. Dependendo da combinação de decisões que você tomar, ele irá levá-lo a um resultado final diferente Objetivo. Esse fluxo de ar descreve todas as etapas técnicas necessárias para concluir o processo. É importante esboçar o fluxo do usuário para saber quantas telas ou etapas precisamos configurar para o nosso projeto desenvolvendo um fluxograma do usuário e nos ajudar a eliminar quaisquer etapas desnecessárias para simplificar um processo, também pode nos ajudar a saber se estamos faltando um passo chave que precisamos voltar para a prancheta e editar. No nosso caso, eles baixam instalam o APP e o abrem, e esse é o primeiro passo nesse fluxo de usuários. Em um minuto, vou abrir um programa chamado Overflow. Ele está atualmente em versão beta. Por que filmar essa parte da turma? Mas é um programa fantástico para desenvolver um fluxograma do usuário. Adobe X'd atualmente não suporta fluxogramas do usuário, por isso é bom encontrar um programa para ajudá-lo a construir um facilmente, mesmo que você tenha apenas o Adobe Illustrator, mesmo que apenas Power Point, você poderia montar um gráfico de fluxo de usuário agradável. Desde que você tenha acesso a retângulos, setas e linhas. Você tem o que precisa para criar um. O exemplo para esta classe inclui alguns layouts muito básicos que você verá, mas apenas o suficiente para mostrar um pouco de visual para saber a que botões estavam se referindo no processo. Eu não sinto que você tem que começar a fazer qualquer tipo de design de layout. Acabei de adicioná-lo para ajudar a explicar para usar seu gráfico ainda mais. Ainda estamos no acampamento UX. Isso não é o que, completamente no U I ou campo de interface do usuário ainda, embora este é um passo onde você X e novo, Eu realmente começar a misturar juntos como pensamos sobre o tamanho do botão, quantidade de botões e colocação em um quando criamos nosso quadro de fio de baixa fidelidade. Em seguida, é onde você conectar interface de usuário realmente começa a assumir, e nós pensamos sobre esses detalhes de design. A aparência, as cores, a marca no design do ícone. Vamos ver um exemplo de fluxo de usuário para o nosso aplicativo de entrega de alimentos. Você notará como eu trabalhar através deste fluxograma de exemplo. Como decisões de design ar começando a ser feita Então aqui estou eu no APP chamado Overflow. Atualmente está na versão beta, mas eles podem estar fora da versão beta quando você está assistindo a este vídeo, mas eu realmente gostei de brincar com ele. Eu vou ter uma lista de alguns programas realmente grandes que você pode usar no Guia de Recursos em um guia de recursos para download no início da aula. Esse tipo de lista algumas outras idéias são outros programas que você pode usar para criar a mesma coisa . Você não precisa usar este programa. Você pode usar qualquer coisa, desde que você tenha caixas, retângulos e linhas. Você pode criar um uso seu fluxograma. Então eu estou aqui e este é o tipo de fluxograma que eu desenvolvi para a classe. Nós vamos tipo de trabalhar através dele e tipo de mostrar a vocês como eu construí isso e todas as diferentes árvores de decisão são divisões e decisões que nossos usuários vão passar e outras que nós poderíamos explorar também. Então este é um tipo de configuração básica. Ah, pisos de usuários poderiam explorar todas as diferentes possibilidades que um usuário tem. Vou entrar em um monte de detalhes. Então, no final, se eu fosse mapear cada decisão que alguém poderia fazer esta árvore seria muito maior. Então, agora, eu estou apenas focando na única árvore de decisão que são usuários vai fazer nosso usuário persona. Nós vamos fazer isso apenas por uma questão de tempo e ter um fluxo de usuário realmente simples para tipo de ensinar o básico de colocar ah usuário fluxograma juntos. Então aqui está uma espécie de tela de login. E o que é ótimo é quando eu estava pensando no lado U X das coisas e pensando na minha jornada de personas. Eu não estava necessariamente pensando naquela tela de login. E então este é um daqueles momentos que começamos a colocar no gráfico do usuário. Você vai, eles precisam fazer login e eles precisam ter várias versões diferentes maneiras de fazer login e precisamos tornar este processo realmente rápido, simples e fácil. Não queremos que eles tenham que ter esse longo processo de inscrição. Então aqui está o tipo de tela inicial ou, obviamente, precisa fazer login. Mas eu pensei, você sabe, tipo de fazer nossa jornada de usuário, Matt, antes de descobrirmos que não seria bom como uma solução ter a capacidade de entrar com seu Facebook? Digamos que Jessica Reserve personaliza como Facebook. Seria bom se ela pudesse cortar todo o processo de login e fazer logon através do Facebook . Então essa é uma das coisas que desenvolvemos em nosso processo de UX. É bom começar a incorporar isso no design real, então temos as duas opções diferentes, e é aqui que temos nossa primeira árvore de decisão ou tipo de divisão na decisão. Eles podem assiná-lo para uma nova conta, e eles vão até aqui para esta tela onde eles podem assinar uma inscrição para uma conta. Ou eles podem ir para baixo aqui e você pode apenas clicar em e permitir atos Facebook toe acesso ou permitir que este aplicativo para acessar os dados do Facebook até fazer login. Portanto, há duas maneiras diferentes de fazer login. Mas tudo vai voltar a esta casa e ficar bem aqui. Então agora que todo mundo tem eventualmente, todos os usuários vão voltar para esta tela inicial e o que descobrimos durante são seus X processos que não seria bom ser capaz de facilmente direcionar as pessoas para o supermercado ou para a entrega de restaurantes ? Então é um tipo de design muito arcaico. Ainda não se destina a ser um amigo da escuta, apenas blocos básicos. Apresentamos mercearias e restaurantes. Eventualmente, essas fotos se tornarão agradáveis ou ícones, o que quisermos fazer. Então aqui vamos nós. Temos outra árvore de decisão. O usuário ou vai selecionar o supermercado e ir até as opções da lista de compras, ou eles vão clicar em restaurantes e ir à cidade para o restaurante. Então você vai notar algum tipo de rotular essas decisões diferentes. Então este será o login no Facebook. Este será o sinal e terminar. Então cada bolha vai tipo de dizer para onde vai seguir ou qual decisão eles tomaram que vai tomar essa decisão. Então aqui estamos na nossa segunda decisão Árvore. Então, de acordo com nossa fase de descoberta auxiliar, ela vai passar por restaurantes, vai selecionar restaurantes, e ela vai até aqui através da seleção de restaurantes e vem para cá. E ela ofereceu uma espécie de lista de restaurantes. E também precisamos explorar em ou geralmente traçar a possibilidade do que acontece quando eles clicam no supermercado e eles vão ao supermercado e eles vão ter a mesma lista . E o que é ótimo em ter isso é mercearia e restaurantes ou ambos obter uma exibição, um fluxo muito semelhante. Então as mesmas opções que você tem no restaurante serão as mesmas opções que você tem no supermercado, as mesmas opções básicas. Então o que é ótimo é que podemos explorar este extensivamente e apenas assumir que terá as mesmas opções no supermercado, então eu não tenho necessariamente que repetir isso também. Mantenha o fluxograma um pouco mais simples. Está tudo bem. Temos aqui a lista de restaurantes. Temos restaurante, um restaurante para dizer que ela realmente gosta. Há algo convincente, talvez sobre a revisão sobre restaurante para ele parecia ter uma crítica alta. Ela seleciona restaurante, também, e agora estamos todos indo para esta tela de mapa que terá, você sabe, você sabe, tipo de um mapa com isso é isso é o que é ótimo sobre usar seus fluxos e às vezes em termos do design, sabe, como sabemos o que precisamos incluir? E isso é realmente o início desse processo e pensar sobre o que precisamos incluir na tela? Queremos ser capazes de voltar. Nunca queremos ter um ciclo fechado. Nós sempre queremos ter um loop que sempre volte para a tela inicial em todos os momentos. Nós nunca queremos prender as pessoas em uma determinada árvore de decisão, e eles não têm como voltar atrás, então nós sempre queremos ter um botão de voltar. Então é por isso que eu tenho o botão Voltar para a tela inicial. Eles sempre têm a opção de voltar para o ar. Coisas realmente importantes em que você pensa quando você junta isso. Queremos também pensar em todos os elementos a fazer. Queremos ter um mapa. Não queremos ter um mapa? Que tipo de detalhes? Queremos uma lista. Queremos uma lista de opções de menu que vão para baixo aqui e como as opções de menu Maney vão ser na primeira tela. Quando eles precisaram rolar? Estas são as decisões que vão ser tomadas em seguida quando fizermos a armação de arame. Mas por enquanto, estamos pensando em decisões muito básicas. Então eles vão ver um mapa. Eles vão ser capazes de voltar lá, vão ser capazes de acessar o seu carrinho. Você tem que ter um botão para acessar o cartão neste momento do processo de check-out. Então vamos dizer que estes itens de menu de ar, por isso provavelmente apenas re título aqueles menu. Então isso vai ser opções de menu, e então ela vai adicionar à opção de menu dois. Basta fazer um clique e então o que acontece? E aqui é onde nós temos que tipo de carne que fora um pouco. É tipo que nós realmente temos que pensar e descobrir como queremos que este processo seja . E então você vai notar como eu tenho azul tipo de azul é uma espécie de avançador. Estamos avançando para o processo, e vermelho indica retroceder no processo. E você pode torná-lo qualquer cor que você quiser, desde que eles sejam diferenciados. Então, quando eu zoom, sótão e ver ok, Red está voltando para a tela inicial e azul está se movendo para a frente no processo de check-out . E isso ajuda a manter meu usuário flutuante limpo. E eu sei que muitas pessoas fazem isso todo cinza, mas eu gosto de ter código de cores. Meio que ajuda quando os clientes o visualizam. Eles não ficam confusos sobre o que está acontecendo porque você pode ver todas essas linhas e fica realmente confuso e até aqui em cima com mercearia. Eu fiz laranja, e eu pensei que faria se eu continuar a mover isso em frente no processo, eu vou fazer todos aqueles eso laranja Você meio que tem essas cores diferentes para tipo de mostrar diferentes decisões e caminhos. De qualquer forma, nós vamos voltar aqui, e então eles vão clicar. Eles vão adicionar um item de menu para que eles adicionem um item de menu e isso não vai levá-lo para outra tela. Ele vai apenas adicionar ao carrinho para que eu não tenho que tirá-lo da tela, e então eles podem ir até a ordem agora ou, mas um carrinho. Então, digamos que eles clicam em terminar seu pedido. Ainda não pensámos na redacção exacta para isto. Isso virá mais tarde. Digamos que eles clicam no carrinho. Vai descer aqui para pedir agora, e eles vão estar em ordem agora tela. Então, este terá o total tem impostos. Ele vai ter todos os itens do menu que eles vão ter. Você podia ver meu projeto arcaico muito básico. não é você que eu desenhei. Ainda estamos bloqueando as coisas, e vamos ter um botão de ordem agora. Então eles estão cada vez mais perto do fim desta ordem, então eles vão pedir agora e então esta é uma árvore decisória. Vamos em frente e voltar. Eles também poderiam clicar no mapa se quisessem ver onde o restaurante estava localizado e nós clicaremos no mapa. Vá até este mapa. Tela foi ótimo sobre este mapa Screen Nails foi mostrado restaurantes próximos também, e ele vai mostrar em E.T.A . E.T.A Do que eles colocaram em seu cartão e quanto tempo vai demorar para que o restaurante para entregá-lo a ele. Então ele vai mostrar seu restaurante vermelho que eles selecionaram. Oaks vai mostrar restaurantes próximos. Em segundo lugar, também entregar em tempo hábil. Então é uma espécie de chance para eles continuarem a conferir outros restaurantes. Se terminar o pedido aqui para vê-lo seria mais rápido eles querem explorar outro restaurante. Obrigado. Clique em continuar ordem e ele vai voltar para o mapa. Ou é aqui que outras árvores de decisão vão acontecer. Eles podem clicar no outro restaurante que pode ter uma hora de chegada melhor, e vai clicar no restaurante número um. Então isso vai voltar para o restaurante número um, então é meio que movê-los em direção a essa direção. Então, há todas essas pequenas decisões que precisamos tomar. Então vamos voltar para baixo. Então vamos passar. Então, Jessica, ou quem ou usuário vai ser para este fluxograma de usuário foi para a tela inicial. Ordem terrena. Agora página, basicamente a página do carrinho de compras. Se você quiser dizer a página de check-out e ela está pronta, ela quer fazer o pedido. Então ela faz o pedido, então ela clica no pedido agora, e ele vai para o mapa com o E-T A. E ele tem um botão porque lembre-se, nós discutimos como uma possível solução. Ela queria saber se podia mudar o teu pedido depois de o fazer. Ela cometeu um erro. Ela foi apressada. Ela não teve tempo de fazer o pedido corretamente. Ela queria ligar para uma bebida ou adicionar um pedido extra. Queríamos ter este botão onde eles pudessem ligar ou alterar o pedido. Você aperta esse botão, ele vai ligar para o restaurante. Ele também vai dar-lhe a opção de texto vai ser o que vai ser no telefone vai aparecer com um texto ou uma mensagem ou um telefone para ser capaz de entrar em contato com o restaurante para alterar o pedido. E nós vamos até isso onde eles podem mudá-la por ordem e eles podem mudar de ordem. E então ele vai voltar para a tela de revisão onde isso é após a entrega bem-sucedida. Então, ele vai voltar. Então isso parece complicado. Quero ver todos os detalhes. Podemos dar uma olhada e sinta-se livre para baixar isso como um J peg. Eu tenho isso como um recurso para download para que você possa olhar para isso em detalhes e tomar o seu tempo para ver tipo de um processo de pensamento que eu passei com seu projeto também dar-lhe alguns outros para dar uma olhada. Então você pode ver como tipo de construir seu próprio fluxograma vai depender que seu produto vai ser. Seu aplicativo ou site terá que voltar a este processo. Então aqui está uma espécie de loop, então nós temos a decisão de mudar a ordem, então eles vão mudar a ordem e ir para esta tela, e então ele sempre vai voltar para esta tela de revisão assim que eles mudarem a ordem, eles vão ter ah, entrega bem sucedida tipo de tela pop-up, então ele vai aparecer com o seu E T A. Mas também vai depois do parto. Eles vão ter a chance de rever o restaurante porque eu era muito importante para o cliente para ter certeza de que temos um monte de comentários para que pudéssemos obter críticas autênticas para nossos diferentes restaurantes para que pudéssemos ter realmente boas críticas. Porque não queremos depender do Urban Spoon para receber críticas. Queremos ter nossas próprias críticas. Então isso vai capturar que ou rever a APA revisão do restaurante. Temos de descobrir isso à medida que avançamos para a próxima fase. Mas veja, tudo vai acabar aparecendo para essas telas é uma espécie de tela de entrega final e bem-sucedida. Passamos por todo o processo de check-out. Agora eles vão ser capazes de Teoh rever, e então é isso. E então terminamos, e eles sempre têm a chance de voltar. Talvez tenha um novo pedido para ver que este botão vermelho vai voltar para casa. tela. Nós sempre queremos dar-lhe uma chance de voltar a esta escolha entre mercearia e restaurante de volta para a tela inicial do usuário. Você pode ver como as coisas são um loop e como nós temos diferentes árvores de decisão e ramos diferentes e como eles podem ser. Voltar para a mesma tela, você sabe, tipo de admitir a natureza complexa fora das diferentes decisões que eles poderiam tomar neste app e ser capaz de delinear tudo isso é tão essencial, porque quando chegamos a Na fase de design, vamos saber exatamente quais botões vamos precisar do dedo do pé tem lá. Muitos deles serão planejados para nós. Então, quando entrarmos no U eu desejei coisas ou até mesmo passá-las para um designer U I, eles terão uma idéia melhor do tipo necessário de etapas e processo de pensamento. E você faz a mesma coisa quando faz navegação em sites. Quando você planeja uma navegação, você descobre o que está neste menu. O que tem neste submenu? Como as coisas estão ligadas? É o processo semelhante. Ah, mas neste caso, com o aplicativo móvel. Então, se você está fazendo um site de desktop, que você pode totalmente fazer isso e ainda seguir junto com essa classe, você vai tomar o mesmo tipo de decisões. Como vai ser a navegação? Que botões. Eles vão para onde você vai ser capaz de mapear tudo isso. E no meu caso, eu coloquei um pouco visual com ele onde você tem botões diferentes e eu acho que isso realmente ajuda. Mas você não precisa. Você poderia fazer um simples arcaico apenas, você sabe, fluxo de usuário. Onde você tentou é você tem tipo desses diamantes que indicam decisões e você tem os retângulos que indicam um passo ou bebê ação que um usuário toma. Você poderia fazer isso muito simples, mas como um design visual ou alguém que definitivamente vai participar do processo u eu, eu queria começar a bloquear as coisas de uma maneira básica, para saber tipo de como os botões estavam olhando e tipo de. E nós vamos ser capazes de encaixar todas essas opções diferentes em uma tela. Ou é demais, de qualquer maneira, isso é meio básico. Eu só quero fazer uma explicação básica do fluxograma do usuário em um programa tipo de mostrar como isso se parece. Então, espero que ele tenha gostado desse tipo de mergulho no fluxo de usuários tipo de carta desenvolvida para esta classe, e agora vamos estar prontos para passar para o próximo passo. 7. Introdução em wireframe: Então, o esboço do nosso processo. Até agora, reunimos dados do usuário criados uma persona detalhada e autêntica do usuário. Criamos um mapa de jornada do cliente ou do usuário que descreveu as diferentes etapas. O usuário passa por problemas e possíveis soluções. Finalmente, criamos o fluxograma do usuário para delinear uma jornada para um processo em detalhes, bem como explorar outras possíveis decisões, divisões e direção. Então sabemos quais botões precisamos pensar sobre isso precisam incluir. E assim estamos prontos para armação de fio de baixa fidelidade. Um quadro de arame pode ser desenhado à mão, são criados no programa de software como Adobe X'd. Ele leva nosso fluxo de usuário e cria uma versão mais detalhada, adicionando áreas onde as fotos podem ir locais de botões e como as coisas serão dispostas e apresentadas. Fio enquadramento pode tirar um monte de adivinhação fora do U. Eu processo Mais tarde na estrada, quando este aplicativo começa a entrar no estágio de codificação de desenvolvimento lo quadros de fio fidelidade diferem de quadros de arame de alta fidelidade e que eles não sempre contêm cores, fotos ou designs de ícones finais. Eles geralmente consistem em áspero, bloqueados layouts usando uma variedade diferente de caixas brancas, cinza e pretas, e isso nos dá um bom esboço e nos dá uma idéia de tamanho, Ah, localização de certos elementos e nos dá uma sensação dos elementos básicos de design geral e fluxo de usuário. Usaremos nosso fluxo de usuários para nos dar um ótimo ponto de partida e dar-nos tempo para nos concentrarmos mais detalhes do layout. Quantas fotos estarão em uma tela onde o texto pode ser colocado? Talvez o tamanho do texto? Ou talvez a tela rolar um quadro de arame de alta fidelidade tem todos os sinos e assobios com elementos de marca de cor e fotos incorporadas ao design. Estes projetos finais de ar muito polido arame de alta fidelidade pode eventualmente ser ligado para criar armações de arame de trabalho que nos permitem usar e testar nosso design e aplicação em tempo real sem ter que desenvolver o aplicativo com desenvolvedores. Estrutura de fio Conceba uma quantidade tremenda de tempo, especialmente tempo de desenvolvimento, já que os problemas podem realmente começar a ser trabalhados neste ambiente de quadro de arame protótipo, onde é muito mais fácil mudar e trocar layouts e fluxo, em vez de ter que mudar a codificação depois de ter sido revestido e desenvolvido primeiro será desenvolver nossa baixa fidelidade, estrutura de fio simples e Adobe X'd. Você pode usar a caneta tradicional e papel para o passo é, bem, como estamos apenas recebendo uma idéia geral e de layout e posição dos elementos com base na pesquisa e dados que temos até agora, eu prefiro usar o quadro de arame e prototipagem como Adobe X'd ou esboçar primeiro para o quadro de fio de baixa fidelidade, simplesmente porque é muito mais fácil transformá-lo em um amigo de fio de alta fidelidade mais tarde. Uma vez que você tem tudo configurado, se você esboçar à mão ou desenhar seu quadro de fio de baixa fidelidade, você tem que eventualmente entrar no espaço digital para criar um protótipo de trabalho. Então, esboçá-lo no programa de software em vez de desenhar manualmente pode salvar um passo no processo. Embora eu nunca queira desencorajar ninguém de esboçar com caneta e papel tradicionais. Se isso é algo que ajuda seu processo criativo, agora vamos acontecer com o Adobe X'd e começar com nossa primeira ganância. O ecrã de início de sessão. Espero que você tenha gostado da primeira parte deste você série XY Weichel. A segunda parte será lançada em menos de sete dias e uma notificação por e-mail será enviada quando a segunda parte estiver disponível e a segunda parte começará com um Adobe X'd. Criando são baixa fidelidade, quadro de arame e layout básico para cada verde. Em seguida, criaremos um quadro de arame polido de alta fidelidade que combinará com as cores da nossa marca. Olhe e sinta. Finalmente, vai ligar são armação de fio de alta Fidelidade para criar um protótipo de trabalho final polido. Podemos então testar com os usuários para obter feedback crítico. Se você não esteve no Adobe X T antes, eu ensino em masterclass Adobe X'd aqui e compartilhamento de habilidades que pode lhe dar um ótimo começo em aprender esse programa antes de mergulhar na criação são Working Ryan frames na segunda parte da Siri. Você poderia conferir essa classe indo ao meu perfil de habilidades. Estou ansioso para vê-lo na segunda parte da série. Certifique-se também de verificar a seção do projeto de sua classe, onde há três. Muitos projetos onde começamos a trabalhar através dos três projetos diferentes na classe adoraria ver seus projetos. Por favor, publique-os. Eu adoraria dar feedback também, mas também adoro comentários. Eu adoraria que você me desse feedback e como você trabalha nesta aula e o que você pensa dessa aula. E mal posso esperar para te ver na segunda parte da série.