Transcrições
1. Introdução: Olá da DC e bem-vindo ao UX 101, Aplique Design Thinking para criar designs envolventes. Uma introdução rápida, meu nome é Grace Torres e fui para a escola Foward Drection. Desde 2012, tenho trabalhado para resolver problemas criando e aspirando UX e IU para produtos digitais. Como aplicativos de fitness para cães, plataformas de
publicação e software de agendamento de pessoal de voo. Eu te peguei, seu tempo de acesso passou e eu estou constantemente aprendendo coisas novas. Esperemos que você esteja inspirado a continuar aprendendo e saiba que um dia você também pode se tornar um designer de UX. Nesta classe, você será apresentado primeiro ao que a Experiência
do Usuário realmente é e ao processo de design que a envolve. Em seguida, vamos nos desviar e começar olhando com os olhos do designer, examinando sites, aplicativos e outras experiências. Descobrir quais são os problemas e a melhor forma de resolvê-los. Em seguida, reuniremos pesquisas competitivas para se familiarizar com as tendências de design atuais. Em seguida, você criará fluxos de usuário descrevendo as ações e pontos de decisão de
um usuário e traduzimos esses fluxos em wireframes de baixa fidelidade para determinar como o conteúdo e as informações devem ser melhor apresentados na tela. Você terá seu projeto principal em mente, para que você possa começar a aplicar seus novos conhecimentos imediatamente. Não se preocupe em não saber o que coisas como fluxos de usuário ou wireframes são, porque esta classe é feita para iniciantes, você. Você só precisa estar familiarizado com a web, pronto para resolver problemas e ansioso para aprender coisas novas. No final, você deve ter alguma pesquisa em seu projeto principal consistindo em fluxos de usuário e wireframes envolventes para seu portfólio de UX Budding. Espero que estejas pronto para começar e vejo-te em breve.
2. Projeto do curso: Fico feliz em ver que conseguiu. Antes de investigar o que UX é, deixe-me entrar em detalhes sobre o projeto de classe. Para tornar o projeto o mais real possível, será baseá-lo em torno de uma tarefa. Esta tarefa é ajudar a jornada do usuário do início ao fim, resolvendo seus problemas, para tornar sua jornada sem esforço e encantadora. Um usuário é qualquer pessoa visitando ou usando seu produto por sinal. Haverá pequenos desafios no início à medida que avançamos aprendendo o processo de design. Esta pesquisa reunida a partir desses desafios irá
informá-lo como projetar os melhores fluxos de usuários e wireframes de baixa fidelidade, que é o projeto de classe principal. Os suprimentos necessários são simplesmente suprimentos de escritório, um programa de acréscimo de gráficos, como o Photoshop ou o Illustrator, e uma ânsia de aprender. Essenciais de designers de UX em todo o mundo são notas de post-it, marcadores, canetas, marcadores e um monte de papel de sucata para elaborar projetos. Você os verá em todos os lugares em escritórios de design e eles são ótimos para colocar ideias rapidamente no papel e colaborar em um ambiente em tempo real sem se preocupar com visuais. Você não precisa ser ótimo em desenhar para ser um designer de UX. Em seguida, para criar o projeto de classe principal, você precisará da capacidade de criar formas limpas e texto
claro para os fluxos de usuário e wireframes. É aqui que um programa de criação gráfica é útil. Programas como Sketch, Illustrator, Photoshop, GIMP e até mesmo dor. Ou se você tem excelente habilidade manual para desenhar formas perfeitas e pode manter tudo arrumado. Você pode fazer isso analógico. Hora de escolher sua tarefa de projeto. Você é um defensor das necessidades do usuário. Saber qual o problema a resolver é o primeiro passo para o designer de UX no processo de design. Em última análise, um aplicativo do site ou outro produto digital terá inúmeras tarefas em uma única tela. Mas, por uma questão de simplicidade, vamos nos concentrar em um. Aqui está uma lista de algumas intenções do usuário ao visitar ou usar um produto. Você pode usar estes ou escolher o seu em. Uma pequena nota no entanto, você precisa estar familiarizado com a tarefa que você escolher e ter compreensão básica do que está envolvido. Com muitas tarefas da vida real. Você pode não saber o que a tarefa implica, então você terá que fazer alguma pesquisa. Mas, novamente, para esta classe, você já deve estar familiarizado com isso. Agora, para contextualizar sua tarefa, escolha uma empresa, pessoa ou entidade que criou um site, aplicativo ou outro produto digital, real ou falso. Aqui estão algumas sugestões que você pode usar. Mas se você tem uma idéia pessoal, como se sua banda favorita tem um site ou você compra em uma loja imóvel, você pode usá-los, para
completar este projeto de classe. Você não só terá seu primeiro fluxo de usuário de UX e wireframes, mas terá adquirido as habilidades
de descobrir o principal problema em um produto digital. Definindo claramente seus objetivos e requisitos, determinando o escopo do seu projeto, definindo seu público-alvo e usuários, aprendendo sobre as tendências de design e o que os concorrentes estão fazendo. Definindo um caminho claro de início ao fim das tarefas dos usuários e descobrindo qual conteúdo está em qual tela com wireframes de baixa fidelidade. Estes ficarão claros à medida que aprendermos sobre o processo de design. Certo, tarefa escolhida, confira. Cliente escolhido, cheque. Grande começo. Certifique-se de compartilhar sua tarefa e cliente escolhidos nos comentários. Se tiver alguma dúvida, sinta-se à vontade para entrar em contato. Vejo você no próximo vídeo.
3. O que é UX?: Para o evento principal. O que é UX? A definição básica de experiências do usuário sempre que um usuário interage com algo. Então, a experiência de um usuário, é uma definição vaga porque é aplicável a todo tipo de coisas, como uma cozinha disposta, o aconchego de derreter em uma cadeira confortável, ou, claro, a frustração quando um site é confuso. Quando estou discutindo a experiência do usuário a partir de agora, estou me referindo ao User Experience Design, que é uma referência comum a experiências relacionadas apenas a produtos digitais ou computadores. As pessoas pensam principalmente neste dizendo UX, mas queria esclarecer que o termo se aplica a muito mais. User Experience Design, também referenciado como design de interação, e design de usabilidade, às vezes design de arquitetura de informações e design thinking é tudo sobre como melhorar o usuário se sente sobre uma experiência com um produto. Os usuários têm necessidades, e quando essas necessidades não estão sendo atendidas, eles têm uma experiência negativa e frustrante. Normalmente, as necessidades dos usuários estão relacionadas a um determinado objetivo, motivação ou tarefa que eles querem completar como para o nosso projeto de classe. UX interpreta os comportamentos e sentimentos desses usuários em necessidades
específicas que eles normalmente não conseguem expressar ou não entendem completamente. A maioria das pessoas não pode dizer que o botão para salvar um rascunho está muito longe e escondido. Tudo o que eles sabem é que é irritante salvar, e então eles economizam menos frequentemente, arriscando perder o trabalho, o que leva a uma frustração ainda maior. experiência do usuário revela tais problemas. Mas se um designer de UX não tiver experiência comprovada tornando a tarefa mais fácil de concluir, o usuário fica confiante e positivo sobre o uso do produto. experiência do usuário também mantém o produto relevante. Perguntas como, este produto está resolvendo o problema dos nossos usuários? Qual é o sentido deste produto? Para quem é? Estamos perdendo oportunidades de recursos que os usuários precisam? Estamos perdendo tempo com recursos que os usuários não desejam? Esta abordagem de design é chamada de primeiro projeto humano. Se um produto tenta servir a todos, ele não serve a ninguém. Mantenha-o focado nas pessoas que o usam. Aqui está um histórico rápido de UX. Quando os computadores chegaram a ser em meados do século, eles eram complexos, complicados, e apenas aqueles que aprenderam o código poderiam usá-lo. Mas então uma revolução ocorreu quando os computadores se tornaram acessíveis para as pessoas em casa, conhecidos como computadores pessoais ou PCs nos anos 70 e 80. Com pessoas comuns interagindo cada vez mais com computadores, estudar e melhorar essas interações foi fundamental. Este estudo foi conhecido como interação homem-computador ou HCI. Você poderia obter um diploma nisso, mas atraiu principalmente aqueles que são psicólogos
cognitivos ou aqueles com formação em ciência da computação focando na usabilidade. Designers entraram neste campo crescente quando, na década de 1980, computadores não só foram acessados por código, mas por visuais como pastas, desktops e uma pequena seta que dançava através da tela controlada por um mouse. Na década de 1990, Don Norman, especialista na área de design, usabilidade, engenharia e ciência cognitiva, transformou esse novo campo de estudo em experiência do usuário. Agora, aqui estamos duas décadas depois, e evoluímos para um momento louco de tecnologia onde existem inúmeras telas e dispositivos. Mas para designers de UX, não importa a tela ou o dispositivo, sempre
há problemas para resolver. Para se tornar um designer de UX, você já tem vantagem. Você é um humano? Desculpem, cães, ainda não
temos um curso de experiência com cães. Você já interagiu com coisas especificamente em uma tela? Você já sentiu frustração, felicidade ou prazer ao usar esse produto? Então, boom, você já é um usuário e entender o que um usuário está passando. Seu nível de empatia de designer de UX tem uma boa base. É preciso alguma prática para realmente afinar e começar a ver padrões de comportamento do usuário. Mas é uma jornada divertida para aprender quais são os problemas das pessoas e como resolvê-los. O papel de um designer de UX é muito específico no esquema geral de um produto. Você é designer descobrindo como melhor conteúdo de layout. Mas mais do que isso, você é o defensor dos usuários e voz para suas necessidades. Haverá sempre várias motivações ao criar um produto. O negócio será focado na receita, os desenvolvedores serão focados no código, e as principais partes interessadas sempre terão uma voz forte. Vocês são os embaixadores na mesa para se certificar de que o produto ainda está servindo as pessoas que o usam acima de tudo. É por isso que é tão importante aprender o máximo possível sobre seus principais usuários ao ponto em que você realça sua empatia e habilidades de atuação para pisar no lugar deles. Isso não significa que um designer de UX sempre diz não para os outros na mesa, você tem que encontrar um equilíbrio de manter as necessidades do usuário prevalentes, enquanto aborda com as partes interessadas e desenvolvedores querem. Traiçoeiro, mas divertido. Isso pode ser esmagador no início. Mas a grande coisa sobre o design da experiência do usuário, é que ele é quase como uma ciência. Usamos essa metodologia chamada de processo de design para passar por um
fluxo de trabalho lógico passo a passo para aprender e construir sobre nosso conhecimento até que um design bonito
completo e bem pensado seja criado. Vou falar sobre o processo de design a seguir. Agora, que você está brotando UX designer, é hora de começar a olhar para o mundo como um. Seu desafio para este vídeo é olhar ao redor da web ou aplicativos e encontrar exemplos de experiência frustrante do usuário ou exemplos de quando você acha que eles acertaram o UX e você não sentiu nada além de alegria ao usá-lo. Seja sensível aos sentimentos que você tem durante esses momentos, pois eles são os mais reveladores sobre o UX. Compartilhe na galeria de aula e comentários e digite uma ou duas frases sobre o que faz um grande ou terrível. Você nunca mais vai olhar para a web da mesma maneira.
4. O processo de design: Agora que sabemos o que geralmente os usuários experimentam design é, e como um designer de UX se parece, vamos [inaudível] direto sobre como o UX funciona. Com qualquer processo ou metodologia, é uma maneira passo a passo de dividir problemas e soluções em partes gerenciáveis. O processo de design permite uma abordagem quase científica na área
subjetiva para criar objetivos objetivos, requisitos e resultados. Também é altamente iterativo e flexível, subtraindo e adicionando etapas conforme você precisa. Portanto, cada problema tem sua própria curadoria única do processo de design que melhor se encaixa. Devo também mencionar que o processo de design é cíclico. Mesmo quando você passou por isso, do começo ao fim com um problema particular, há sempre espaço para melhorias e outra iteração. Às vezes, uma fase ou passo menor, repete-se várias vezes durante um projeto. Ao longo dos anos, escrevi informalmente o que é o processo para mim. Então você pode ver outras interpretações e tudo bem. Organizei um processo de design em três fases principais. O reflexo na fase de pesquisa, a fase de concepção e desenvolvimento, a fase de lançamento e aprendizagem, e a quarta não oficial, enxaguar e repetir. Essas fases, dividem o processo em áreas de foco principais para o designer. Dentro de cada fase, existem muitas ferramentas e ações para usar. Essas ferramentas e ações são o que eu mencionei que você pode adicionar e subtrair, como o problema requer. Também as fases que eu compartilhei, não só incluem o design da experiência do usuário, mas o design da interface do usuário, trabalhando com outros departamentos, como detentores de estacas e negócios e design com desenvolvedores. Vamos nos concentrar apenas no design da experiência do usuário aqui. Mas, como você pode ver, design
UX é apenas uma peça muito importante de um grande processo. Vamos finalmente dar uma olhada no processo de design. Vou entrar em mais detalhes sobre o que está em cada fase em vídeos posteriores, mas aqui está em sua glória total. Vamos cobrir nesta classe os itens com pequenas estrelas ao lado deles. Assim, você pode ver que você já está usando o processo de design para o seu projeto de classe. Observe também que há tantas outras ferramentas disponíveis para você. Primeiro, a fase de reflexão e pesquisa é tudo sobre ser apresentado ao problema em
questão e reunir o máximo de informações possível antes de criar um único design. Para que a experiência do usuário seja bem-sucedida, uma enorme quantidade de pesquisas que apoiam os projetos finais é coletada. Isso evita projetar no escuro ou projetar coisas que serão úteis. Ele também mantém o produto humano em primeiro lugar, enquanto defende suas idéias de design através da crítica. Como uma casa construída sobre uma base sólida para ficar firmemente contra os ventos, esta é uma fase muito movimentada para um designer de UX e há até especialidades de papéis de pesquisa UX para ele. Quando tivermos totalmente refletido na pesquisa, passamos para o próximo passo, projetamos e desenvolvemos. Esta fase é tudo sobre refinar iterativamente designs, ideias
e projetos visuais, para avançar em direção ao lançamento, como um diamante áspero sendo alisado e cortado em uma jóia incrivelmente facetada. A coleção colorida de notas de post-it,
marcadores , marcadores e papel entra em jogo agora. Atingindo uma parede, a ideia de design permite uma rápida avaliação das ideias piores, através da discussão. Então você pode passar para a criação de quadros de arame de baixa fidelidade, contornos
esqueléticos de conteúdo e layout e protótipos com as idéias, eventualmente fazendo coisas de alta fidelidade. Depois de muitas iterações, o design da interface do usuário
entra em cena para dar vida à aparência e sensação do produto. Quando os designs são realizados e finalizados e parecem nítidos, é hora de trabalhar com desenvolvedores para corrigir problemas e interações de finesse. A última fase de lançamento e aprendizado está focada em preparar a construção do novo projeto para locação e prevenir desastres antes disso. Neste ponto, é o momento de ter certeza de que respondemos todas as perguntas e metas desde a primeira fase. Os projetos construídos são testados quanto à qualidade e avarias. Isso permite que algumas correções rápidas e problemas ignorados sejam resolvidos. Há várias maneiras de testar os designs de compilação antes de lançá-lo, porque queremos ter certeza de que a conta não falha ou queima seu produto, uma vez que ele é gratuito. Quando estiver pronto, é hora de lançamento. Depois que o botão ir é pressionado, é importante documentar os problemas, oportunidades
perdidas, novos insights e pensamentos, para quando você voltar à fase um mais tarde. Esse é o processo de design para melhorar um produto. Vou repassar cada fase com mais detalhes e com dicas práticas no próximo vídeo. Mas por enquanto, familiarize-se e não se esqueça de reunir seus exemplos de UX bons e ruins. Compartilhá-los na galeria e comentários com uma ou duas frases sobre o UX.
5. Refinar e pesquisa: Olá, antes de entrar nos detalhes da Fase 1 do processo de design, eu queria aproveitar um momento e aplaudir até que ponto você chegou e quanta informação foi lançada em você. É muito, mas vai se tornar mais segunda natureza com mais exposição. Se você tiver alguma dúvida, por favor, entre em contato. Eu passei no último vídeo o que a essência dessas fases e o que um design UX faz. Mas agora vamos entrar em como fazê-lo. Aqui está a fase completa mais uma vez. Você pode ver que nosso projeto de classe só passa por alguns deles. Com a tarefa escolhida em mente, vamos abordar o primeiro passo. Qual é o principal problema? Você pode ter que imaginar que, por algum motivo, o usuário não conseguiu concluir sua tarefa porque existem problemas anteriores ou o recurso não existiu antes. Minha tarefa de exemplo será, como um novo usuário, eu quero saber o que é essa empresa. Você provavelmente já experimentou esse tipo de tarefa antes em sua vida pessoal. Você pousa em um novo site e não tem idéia
do que o logotipo significa no canto superior ou mesmo quem eles são. O principal problema aqui é o acesso à clareza e à informação. Para o bem do nosso projeto, este é um novo recurso, por isso não precisamos levar em consideração nenhuma solução anterior. Agora, uma vez que um metas e requisitos, o objetivo principal deve ser sempre para cumprir o usuário, atender às suas necessidades e para completar sua tarefa com sucesso. Agora, outros objetivos que você poderia lançar lá é reduzir alguns passos para fazê-lo,
fazê-lo em x time ou qualquer negócio e partes interessadas que possam ter que fazer. Para o meu exemplo, vou lançar um objetivo que o usuário deve conhecer na primeira tela inclinada ou página inicial. Mas descrição geral da empresa e ter acesso fácil a uma tela cheia sobre a página, incluindo cargas mais informações lá. Com a coleta de requisitos, entrevistas com partes interessadas, negócios e desenvolvedores são necessários apenas para se certificar de que todos têm a mesma expectativa e ter totalmente compartilhar suas idéias Um requisito para o meu projeto será que um é vista na primeira tela de aterrissagem e que há um ponto de acesso global para chegar à página sobre. Global aqui só significa que é onipresente em todas as telas. Mais um requisito é que há uma maneira na descrição da página inicial para o usuário chegar à página sobre além do ponto de eixo global por um segundo. O escopo apenas significa que o projeto só pode usar uma certa quantidade de recurso, como tempo ou número de desenvolvedores. Isso mantém as coisas sob controle e mínimo, então muito tempo e esforço não são desperdiçados. Como designer de UX, houve muitas
vezes que o processo de planejamento que você será o único a descobrir escopo, trabalhando com desenvolvedores e gerentes para
se certificar de que há um produto mais viável com projetos. Algumas idéias podem ter que esperar até a próxima rodada, isso é muito comum. Auditoria e design soa exatamente como ele é, você está avaliando a situação atual. Às vezes, a auditoria é, na verdade, o primeiro passo se você não sabe qual é o problema principal. Isso é útil se você é apenas totalmente ignorante sobre o que está acontecendo errado e precisa de uma segunda opinião. Às vezes, uma agência de design terceirizada entra
e realmente cavar em seu produto com olhos frescos e não tendenciosos. Isso ajuda a obter uma visão realista sobre o que corrigir. Depois de fazer uma auditoria e ter uma boa noção de onde você precisa ir, olhar para sua concorrência ou análise competitiva é o próximo. Não é para que você possa copiar o que eles estão fazendo. Mas para se familiarizar com as tendências de design, como outras pessoas estão resolvendo problemas semelhantes e para ver o que você pode fazer melhor. Você tem que lembrar, porém, que a maioria dos produtos pode parecer o mesmo e estar servindo as mesmas pessoas. Mas cada produto é usuários muito diferentes e tem objetivos diferentes. Eu até recomendo olhar para produtos que podem não ser um concorrente direto, mas têm alguma sobreposição. Tome nota do que você gosta, não gosta ou acha que pode fazer melhor. Você continua nos dizendo graça que nós somos os usuários defensores de suas ações e motivações, mas nós nem sequer falamos sobre eles ainda. Bem, aqui estamos nós, definição de público é um sucesso brilhante manter quando se trata de experiência do usuário. Novamente, faz sentido quando você realmente sabe quem está usando seu produto e como melhorar sua experiência, então tudo o resto se encaixa no lugar. Algumas maneiras super úteis de definir seu público-alvo são fazendo entrevistas com usuários. Isso é quando você reuniu um grupo de pessoas que você pode pensar que são os principais usuários e, em seguida, fazendo perguntas, você pode explodir sua mente com insights. Mesmo até hoje, eu estou tão chocado quando eles não usam um produto da maneira certa ou ter chocado o produto para atender às suas necessidades. Vê-los usar o produto enquanto pensa em voz alta pode transformar seu produto. As entrevistas de usuários também são usadas na fase de design e desenvolvimento continuamente para garantir que as necessidades dos usuários estão sendo atendidas com projetos. análise e os dados coletam quem usa seu produto, mas pode ser muito vago. Eu recomendo usar os dados demográficos recolhidos a partir disso para encontrar pessoas reais para uma entrevista de usuário. Certifique-se de manter o controle de seus objetivos, motivações, sonhos, desgostos, etc, não apenas sua raça ou idade como você aprende sobre eles. Outra ferramenta para manter uma primeira abordagem de design humano é criar personas de usuários. Essas são pessoas fictícias para representar os principais tipos de usuários com seu produto. Para o meu projeto de classe, eu escolhi usar uma empresa que vende e organiza, CSAs ou agricultura apoiada pela comunidade. Eles têm um site que anuncia quando a próxima coleta é, que produto ou nas caixas, quantas fazendas estão participando sobre essas fazendas? Então como se juntar e pagar pelas caixas. Agora, vou ter que descobrir quem usa o site deles. Como eles são uma empresa falsa, eu recorri a inventá-lo, mas eu recomendo fortemente o Google e aprender sobre a indústria do seu cliente para obter uma sensação mais realista, pelo menos. As pessoas que compram CSAs são geralmente preocupadas com a saúde, apoiam a agricultura, adotam produtos naturais, gostam de fazer compras locais, geralmente mais ricas, e são criativas com culinária do que as pessoas que usam sites ou qualquer pessoa da idades como seis ao final dos anos 60. Agora tenho algumas características, vou criar algumas personas de usuários. Tenho dois tipos de pessoas, uma jovem Yogi que saiu da faculdade com um cão e um pai de meia-idade branco com crianças. Você pode dar uma olhada neles mais adiante, pausando e lendo. Mas eu não vou entrar em muitos detalhes, já que eles são um exemplo. Há toneladas de modelos on-line se você quiser preencher alguns para si mesmo, vou compartilhar um link para alguns. Essas personas de usuários ajudam a orientar as decisões à medida que as decisões estão sendo tomadas. Se em cada ponto que você perguntar seria Carroll, o usuário persona usa novo recurso e a resposta é não, em seguida, verificá-lo. Novamente. Se você fizer um produto para todos, então ele não servirá para ninguém. Ser o mais específico possível para seus usuários resultará em um produto mais profundo. Isso foi muito. Esperemos que você se sinta capacitado para trabalhar em seus projetos de classe refletem e fase de pesquisa agora. Para o seu próximo desafio, crie um pequeno dossiê ou um resumo de uma a duas páginas com sua tarefa de usuários, empresa, principal problema a ser abordado, metas e requisitos
definidos, escopo, análise competitiva e alguns definição de público. Por alcance, vou dar isso a você. Finja que sou uma das partes interessadas. Seu escopo será aplicado a pelo
menos uma página inicial de tela, a menos que não faça sentido para seu projeto. Uma interação e uma tela final clara. Você pode definitivamente adicionar mais uma ou duas telas e interações se isso permitir que seu usuário conclua sua tarefa. Mas tente manter isso simples. Para a análise competitiva, capturas de tela de sites inteiros ou partes específicas funcionam
muito bem e para a definição do público, vou deixar isso para você. Você pode entrevistar, criar personas de usuários ou fazer algum Googling sério. Mas eu sugiro tentar torná-lo o mais específico possível. Compartilhe sua pesquisa na galeria quando você terminou.
6. Design e desenvolvimento: Obrigado por continuar no último vídeo. Foi muito. Agora estamos na fase 2. Começarei com notas de post-it. O início desta fase é altamente colaborativo e algumas das minhas reuniões favoritas são apenas sair em um espaço com
um quadro branco e post-its para falar através de idéias de design. Nessas notas post-it, você pode escrever os requisitos, os objetivos, as necessidades do usuário,
algumas telas, fluxos de usuários ou qualquer outra coisa que rapidamente ajude a iterar e melhorar ideias de design. Então, uma vez que eles estão na parede e enxurrada de post-its em movimento está em idéias rápidas, feche o trabalho através de problemas de experiência do usuário sem se preocupar com visuais. Este também é um bom momento para trazer pessoas de fora
do departamento de design para obter algumas idéias de design inesperadas, já que todos são um usuário. Durante essas sessões de brainstorming, você pode descobrir a arquitetura de informações ou a estrutura geral do conteúdo, fluxos de
usuário, wireframes de baixa fidelidade e protótipos de baixa fidelidade. Você também pode fazer tudo isso sozinho,
mas é menos divertido em colaboração com muitos pontos de vista leva a melhores ideias de design. Como uma nota lateral rápida, quero salientar que os próximos dois vídeos são sobre como fazer fluxos de usuário e wireframes de baixa fidelidade. Não discutirei eles aqui. Vamos passar por isso, por enquanto. Estamos em um ponto no processo de design em que é hora de começar a projetar algumas telas e testá-las. No início, é um layout áspero do que deveria estar lá, então não é muito bonito. Imagine-o como o esqueleto do produto evoluindo lentamente para a definição muscular. Esses wireframes realmente ásperos, conhecidos como wireframes de baixa fidelidade, podem ser transformados em protótipos. O que é um protótipo? De acordo com o dictionary.com, é um primeiro modelo, típico ou preliminar de algo, especialmente uma máquina a partir da qual outros fóruns são desenvolvidos para cópia. Eu não poderia ter explicado melhor. Protótipos não são sobre como ele se parece e conhecer todos os detalhes finais, é sobre como a idéia está funcionando e construir sobre ela. Você pode fazer esses arquivos baixos fora de papel com algumas caixas grosseiramente desenhadas. Você pode fazê-los no Photoshop com formas e rótulos cinza, ou até lápis de cor no papel. Desde que seja legível o suficiente para concluir a tarefa de um usuário. Até que a experiência do usuário seja percebida, eles estão repetindo wireframes de baixa fidelidade e protótipos principais. Este também é um ótimo ponto para verificar
os requisitos e certificar-se de que tudo está contabilizado. Antes de gastar muito talento, energia nos detalhes finos do design, é importante obter os wireframes em um local realmente bom. Eles podem ser seu guia. Eles podem até entrar em fidelidade média onde você começa a trazer algumas IU ou ideias para design, mas é um trabalho em andamento. Isto não deve ser um foco até mais tarde. Mas esse processo é muito líquido e se move sem esforço de baixa fidelidade para alta fidelidade. Como é a alta fidelidade? Basicamente, parece um projeto final. A topografia é escolhida, o espaçamento é bom, layout está em uma grade, as cores estão corretas, os botões estão lá e a cópia final está no lugar. Este trabalho é normalmente feito por uma interface de usuário ou designer de
interface de usuário que tem um processo de design ligeiramente diferente do que eu mostrei para UX. Os designers de interface do usuário são responsáveis por estabelecer e conciliar a aparência de um produto que corresponda à voz e à marca do cliente. Eles às vezes funcionam em estados de erro de entradas e interações detalhadas, como, haverá uma animação quando você clicar em uma seta? Muitos designers estão se tornando UX e UI, como eu, para manter o processo em um fluxo. Há o suficiente em cada função embora para UX autônomo ou designer de interface do usuário não seja ambos. De baixa fidelidade a protótipos de alta fidelidade devem ser testados pelo usuário. Por que é importante fazer todos esses testes? Afinal, já fizemos definições de audiência na primeira fase. Como Steve Krug, autor da UX Bible, não me faça pensar que diz: “Testar com um usuário no início do projeto é melhor do que testar com 50 perto do final.” Quando o produto é testado no início, antes de muito tempo e recursos terem sido usados, ele pode revelar problemas que são fáceis de corrigir agora. Ele também garante que o produto ainda é um primeiro design humano, sempre mantendo as necessidades do usuário na frente, juntamente com as necessidades de negócios e partes interessadas. Como designer de UX, teste de
usuário dá a você uma visão sobre o sucesso de seus projetos também. Essa é sempre uma ótima experiência de aprendizado. Resolver problemas no início antes que eles se tornem um grande negócio, mantendo o produto focado nos usuários e melhorando seu próprio design de experiência de usuário, soa como algumas boas razões para o teste do usuário. Para finalizar a fase de projeto e desenvolvimento, vamos falar sobre quando os projetos estão sendo construídos. Alguns designers também são desenvolvedores, mas muitos não são. Eu gosto de dizer que os projetos são cerca de 90 por cento feitos quando eu sair do meu programa e compartilhá-los com desenvolvedores. Esses últimos 10 por cento só podem ser finalizados em código e ao vivo em uma tela. Muita coisa pode mudar do seu computador para o produto real. É por isso que é importante aprender a trabalhar com desenvolvedores ou engenheiros. No início do processo de design, rever a experiência do usuário com os protótipos é super útil para manter todos na mesma visão. Ao longo dos anos, aprendi HTML básico, CSS e outros conceitos básicos de linguagem de programação, a fim de me comunicar melhor com eles. Se eu souber como será uma enação, encontrarei algum código para eles. Se eu souber uma cor específica necessária, vou encontrar o código de cor CSS para eles. Este é também um processo muito iterativo com tempo gasto revisando esses projetos construídos. Saber codificar não é um requisito, mas é muito útil. Você passou pela fase 1 e 2 do processo de design. Espero que você possa ver como UX toca quase todos os aspectos dele. Não se esqueça de trabalhar em seu dossiê de projetos de classe e compartilhá-lo conosco na galeria de aula.
7. Crie um faturas de usuário: Quando você tem uma idéia de como a UX geral vai ser, você precisa de uma maneira de acompanhar a jornada
do usuário através de uma tarefa, fácil e compreensível. Existem algumas abordagens para isso dependendo dos níveis de fidelidade, mas vamos fazer uma mistura de fluxograma tradicional e mapa de jornada de tarefas, ou como eu claramente chamo, fluxos de usuários. Estes são um grande precursor para projetar wireframes. Eles correspondem a cada ação, ponto de decisão e destino que um usuário pode fazer do início ao fim. Você provavelmente já viu isso antes em um fluxograma de sim ou não. Os fluxos de usuário normalmente não têm elementos visuais anexados a eles, permitindo que você se concentre nos caminhos e nas escolhas feitas pelos usuários. Há fluxos de usuários de alta fidelidade que combinam o que acabei de descrever para você com wireframes maiores ou designs de fidelidade mais alta. É como um protótipo plano de uma folha. Há muitas variações nos fluxos de usuários e, dependendo das necessidades de seus projetos, você pode escolher qual deles. Mas o objetivo principal de todos eles é
mapear claramente as partes funcionais do usuário para que designers, partes interessadas e especialmente desenvolvedores possam entender completamente a experiência do usuário. Se cada escolha for claramente mostrada, as interações e partes da tarefa não serão esquecidas ou improvisadas mais tarde, contaminando a nova experiência em que você trabalhou tanto. Também é uma ótima maneira de documentar geralmente como as coisas funcionam em seu produto. Agora, ele pode aumentar o mapeamento cada caminho que um usuário pode fazer do início ao fim, considerando que cada tela pode ter várias opções. É por isso que é importante atribuir uma área de foco ao fluxo do usuário ou atribuir uma tarefa específica. Parece nosso projeto de classe, não é? Vamos começar a fazer um. O primeiro passo que me ajuda a colocar minha mente em um modo de fluxo de usuário é anotar quais elementos e componentes estão envolvidos na minha tarefa. Como você se lembra, minha tarefa é como um novo usuário, eu quero saber o que é esta empresa. O que eu vejo sendo envolvido aqui é um parágrafo, botão, imagem, cópia
mais longa, mais botões, e talvez algumas maneiras legais de dividir texto. Vago e não útil no papel, mas aposto que pensou no que seria parte da sua tarefa. A partir daí, vou fazer uma jornada de tarefas simples e expandi-la para um fluxo completo de usuários. Para o meu primeiro quadrado de teste, vai ser terras na página inicial porque isso é um requisito e parte do escopo, para todos vocês, piscar, piscar. Pensando de volta às minhas tarefas, o próximo quadrado será vê logo e a empresa não o reconhece. Aqui, o usuário encontrou sua primeira tarefa para aprender mais e resolver esse enigma. Como os usuários tendem a digitalizar antes de clicar em torno, meu próximo quadrado será, usuário olha ao redor da tela inicial, então o usuário vê parágrafo curto na sinopse da empresa e lê. Lembra como isso era um objetivo na exigência de eu ter algo na página inicial? Agora, o usuário poderia ter seguido em frente e ido para sua próxima tarefa, completamente feita, mas por causa da simplicidade e para o bem do projeto, o usuário continuará seus esforços para aprender mais sobre a empresa. Em seguida, o usuário vê uma “chamada à ação” para saber mais sobre a empresa. Um “call-to-action” é um botão ou um link fortemente formulado, como ver mais, clique aqui, “Enter”, etc Em seguida, para o usuário, o usuário decide clicar em “CTA” e aterrissar sobre a tela. então o usuário lê o conteúdo e aprende sobre a empresa. Tarefa concluída. Isso foi chique. Eu poderia adicionar um elemento de contato conosco com quaisquer perguntas para saciar completamente os usuários precisam aqui para saber mais, e isso é um mapa de jornada de tarefas. Não é difícil, certo? Para realmente começar a transformar isso em um fluxo de usuário adequado, precisamos dar uma olhada em nossa nova jornada de tarefas e escolher o que é um destino, lugar de
tela, um ponto de decisão, lugar onde o usuário pode seguir vários caminhos, e um , normalmente clica em guias. Vejo que a página inicial e sobre tela são os destinos. O ponto de decisão para clicar ou não clicar em t ele “Saiba mais sobre a empresa CTA”, ea ação é um clique no botão. Isso fará mais sentido quando começarmos a fazer algumas formas. Hora de dar as boas-vindas ao seu programa de design gráfico e criação na aula. Vou usar o esboço boêmio, já que essa é a ferramenta que eu uso principalmente para o trabalho. Você atribuirá a cada destino, ponto de decisão e ação, uma forma especial apenas para ser usada por um tipo. Vou usar retângulos para destinos, círculos para pontos de decisão e pequenos pontos para cliques. Para ajudar com aspectos narrativos, vou apenas digitá-lo, mas você pode atribuir uma forma. Para um nível extra, eu vou para código de cores eles. Preto preenchido para os destinos do retângulo, branco para as decisões do círculo, e depois verde para os cliques, não se esqueça de adicionar algumas linhas para os caminhos. Colocá-lo no fluxo correto é a parte divertida. Primeiro, adicione a página inicial aqui, depois adicionamos um pouco de texto narrativo. A partir daí, temos um ponto de decisão com um pequeno indicador de uma ação. O usuário é então mostrado a tela sobre, um novo destino, mais texto narrativo, então o fluxo básico do usuário é feito. Mas como gosto de pequenos desafios, vou adicionar uma opção de volta. Se o usuário clicar nisso, ele
voltará à página inicial. Geralmente, é uma boa regra de UX sempre ter uma maneira rápida para o usuário retornar à tela anterior. Vou adicionar outro ponto de decisão aqui com um clique, em
seguida, ciclo é concluído, como um usuário chegou de volta ao local onde começou. Isso pode parecer excessivamente explícito, mas ser tão detalhado pode ajudar quando há uma tarefa realmente complexa à mão com várias decisões a serem tomadas em cada parte. O design do fluxo do usuário depende completamente de você, desde que seja claro e compreensível. Agora, seu dever de casa é primeiro fazer uma jornada de tarefas, em seguida, traduzi-lo em um fluxo de usuário muito bem pensado com base em sua tarefa escolhida, com toda a quantidade de detalhes e cores que você gosta. Compartilhe-os na galeria quando terminar.
8. Crie quadros de fio: É hora de projetar seu primeiro wireframe, mas o que é um wireframe? Imagine que sua idéia de design é simplesmente um esboço aproximado para permitir que o conteúdo seja visto em uma página sem qualquer design visual. Normalmente há apenas contornos de quadrados, retângulos, círculos e outras formas com rótulos e anotações. Com wireframes de baixa fidelidade, não
há grande senso de proporção ou detalhe, apenas os principais pedaços de conteúdo. Mas como se a fidelidade melhorasse, você poderia ter wireframes em uma grade de design com hierarquia correta e até cores e imagens. Como mencionei algumas vezes na lição 6, mais iterações ocorrem mais rápido no início por causa da menor fidelidade com wireframes, a experiência do usuário e a ideia de design podem ser completamente representadas sem todo o tempo gasto no visual aspecto de design. Ter wireframes ásperos permite que todos vejam para onde o projeto está indo e se certificar de que os requisitos são atendidos. O lado técnico é bom e todo o conteúdo lá. Se um designer que não seja UX, olha para wireframes ásperos, normalmente
há muito mais explicação necessária para ter a ideia de design entendida. wireframes também podem começar discussão
significativa e muito necessária entre as partes interessadas, os negócios e os desenvolvedores. É difícil pensar em recursos se você não tiver o treinamento. Vê-lo desperta pensamentos. Antes de criar seu próprio wireframe, fui esclarecer a diferença entre um wireframe em uma maquete de designer visual. A finalidade wireframes é mostrar
a estrutura esquelética da tela e o que vai viver nela. Mesmo melhores wireframes podem ter alguma interface do usuário, mas não o tempo todo. Uma maquete de designer visual é quando o design não é mais um wireframe, mas uma representação real de como será o produto final. Também é chamado de design de alta fidelidade com tipografia, espaçamento, cor, etc Normalmente, um designer de interface do usuário é responsável por criar estes, e neste ponto, as únicas discussões em torno deles são puramente projetadas como dimensionamento e cor, aspectos não maiores, como componentes e conteúdo. Para ajudar a criar um wireframe, descubra os tipos de usuários que seus clientes atendem. Para o meu projeto de classe, os usuários do site CSA ou mais velhos, mais naturais, talvez não tão amigável com tecnologia. Isto significa que o meu conteúdo deve ser apresentado de uma forma muito simples e esperada. Alguns outros aspectos que eu aprendi, mas não estão relacionados com o projeto, que eles estão confusos sobre como se juntar e pagar. Eu deveria deixar isso muito óbvio a partir da página inicial. Outra idéia é trazer o próximo anúncio CSA para a frente e para o centro, em seguida, adicionar o que a próxima caixa contém de quais fazendas. Uma adição super vendedor seria adicionar receitas que poderiam trabalhar com essa caixa para o mês, mas eu estou ficando animado agora com idéias. Eu também sei que os usuários de CSA são geralmente amigáveis e mais ricos, então talvez eles
queiram um campo de mercado de agricultores mais avançados do que o botão típico da fazenda. Nada disso realmente importa agora para o meu projeto, mas é bom ter esses detalhes em mente para outras iterações. Fazendo referência à minha jornada de tarefas e ao fluxo de usuários, primeiro
esboçarei alguns wireframes ásperos no papel para brincar com a forma como quero apresentá-lo. Depois de encontrar um wireframe bem definido, vou copiá-lo para o esboço do meu programa de criação gráfica. Novamente, você pode usar o Photoshop Illustrator ou até mesmo o GIMP. Aqui você pode ver grandes caixas gigantes e rótulos de texto. Em seguida, olhando para trás para os meus requisitos, fluxos de usuários, depoimentos e personas de usuários, vou começar a adicionar mais detalhes às caixas grandes. Na minha página inicial, vou adicionar duas caixas principais para mostrar a página genericamente. Na parte superior, adicionarei uma caixa para representar o logotipo e adicionarei alguns textos falsos para representar o blurb da empresa curta. Sob a sinopse, adicionarei um botão com links para a página sobre, ele parece bom em correspondências pouco fluxo de usuário. Tempo para a página Sobre, vou adicionar o logotipo novamente na parte superior e, em seguida, muitas caixas para o conteúdo principal com mais detalhes agora aqui vem caixas menores e textos
falsos representam a história da empresa com imagens. Eu também mencionei o botão Voltar, então isso entra agora também. Olhando para o nosso fluxo de usuários, temos uma combinação perfeita. Este é o ponto em que trazemos wireframes para os requisitos e objetivos dossiê. Parece que perdi um requisito, o Acesso Global para a página sobre. Qual é o lugar mais direto e esperado para colocar isso? O rodapé que você diz, por quê? Sim, preciso atualizar meu fluxo de usuário agora, pois é uma nova opção na página, aqui está um fluxo de usuário atualizado. Aqui vou eu, adicionando uma caixa de tamanho médio que abrange a página em ambos os wireframes para representar o rodapé. Dentro, vou adicionar algum texto que representa esse link. Ainda bem que evitei fazer mais progressos no meu wireframe antes de verificar se eu tinha todos os requisitos. Desculpe ser possível, mas é exatamente por isso que fazemos wireframes. A parte final do seu projeto é fazer um wireframe de baixa fidelidade de suas tarefas. Até agora você concluiu pesquisas, requisitos, personas de usuários, análise
competitiva, uma jornada de tarefas e um fluxo de usuário para ajudar e formar e como melhor colocar seu conteúdo em um wireframe. Boa sorte e por favor contacte se tiver alguma dúvida. Quando você terminar de compartilhar a galeria para que possamos comemorar sua primeira experiência de usuário wireframe.
9. Lançar e aprender: Espero que você esteja gostando de trabalhar em seus fluxos de usuário e wireframes, mesmo que seu projeto de classe não toque na última fase do processo de design, iniciar e aprender, vou falar sobre isso de qualquer maneira porque eu não posso deixá-lo pendurado. Você e o desenvolvedor concordam que está parecendo completo e totalmente construído. Esta é a fase para preparar e evitar desastres para seu lançamento e lançamento. Eu pareço um recorde quebrado, mas este é o check-in final com os acionistas, os requisitos, metas e qualquer coisa para julgar se o projeto consegue resolver o problema inicial. Às vezes, isso pode ser casual, ou pode ser uma apresentação mostrando nossos projetos finais no construído. Isso permite que o tempo para iterar e voltar para as fases anteriores se algo estiver faltando. Como somos grandes fãs de UserTesting, este também é um bom momento para testar. Você não deve testar apenas neste momento como uma última tentativa para certificar-se de que seus projetos estão atendendo às necessidades do usuário, teste de
foco durante esse tempo também pode ajudá-lo a determinar como o lançamento será corrido com os usuários. Quando todos estão a bordo para o lançamento, uma parte crítica da prevenção de desastres depois que ele está em estado selvagem é uma verificação de controle de qualidade ou verificação de QA. Às vezes, as empresas terão pessoas separadas para esta tarefa, mas em todas as minhas empresas menores, todos os envolvidos no projeto,
designers, desenvolvedores, gerentes se tornam pessoas de QA. Garantia de qualidade é um momento dedicado para clicar em cada botão, olhar para cada tela, examinar cada interação e certificar-se de que todos os fios foram devidamente ligados. Pode ser realmente tedioso, mas coloca as construções para o toque. Como designer, você não só tem que ter certeza de que a compilação parece correta como nos designs, mas você terá que concluir que a experiência do usuário ainda é a melhor para os usuários e tudo funciona corretamente. Fazer um escrutínio de QA completo pode revelar um monte de problemas que
teriam arruinado a UX do usuário e azedado sua visão com um produto. Vou adicionar outro tipo de teste: teste A/B, isso é diferente do UserTesting tradicional que falamos até agora pois este é um teste ao vivo no produto com usuários reais; a variante A mostra um controle que é o original para um segmento de pessoas, então a variante B mostra um novo design para um segmento de pessoas. Essas pessoas são segmentadas aleatoriamente e o teste é executado por um curto período de tempo, mas é uma maneira real de ver um para um como os usuários estão interagindo. Você também pode testar mais variantes durante o mesmo tempo, como um teste ABC, para que haja quatro projetos possíveis, para que os usuários possam ser vistos durante o período de tempo designado. Na minha experiência, esses testes antes do lançamento detectaram problemas que
desencorajariam os usuários no produto antes que o produto se tornasse público. Pronto, set, lançamento, seus projetos estão ao vivo, os usuários estão interagindo com seu design UX, o que acontece agora? Com todas essas medidas preventivas para encontrar e erradicar problemas antes do lançamento, há sempre algumas surpresas que os usuários revelam. Esteja preparado para que logo após o lançamento, algo possa ter que ser consertado. A partir do momento do lançamento, à medida que os usuários interagem cada vez mais com seus novos designs, é melhor continuar documentando novas informações, problemas revelados, reações, ideias, reclamações, etc, para a próxima geração. Lembre-se de como, no início da fase 1, é útil aprender sobre as soluções anteriores, este documento será fundamental para
isso, ele também ajuda a manter o controle de quais partes da UX foram bem-sucedidas e o que precisa ser Pensei mais. Parabéns por passar por todo o processo de design. É muita informação e você é um campeão por chegar até aqui.
10. Vá para o fim e resolver problemas!: Obrigado por se juntar a mim através do design da experiência do usuário e do processo de design. Esperemos que esta abordagem prática tenha equipado você ir em frente e começar a resolver problemas. Espero que a web seja transformada em belos produtos da próxima vez que eu abri meu navegador. Então, mais uma vez antes de ir. O que é UX? Experiência do usuário é o estudo da experiência de um usuário com um produto. Para nossos propósitos, isso significa a arena de produtos digitais, mas pode ser aplicado a qualquer coisa no mundo com que os seres humanos interagem. O design da experiência do usuário está defendendo as
necessidades e motivações dos usuários ao longo de todo o processo de design. Se você construir para todos, então você não serve a ninguém. Portanto, mantenha seus usuários específicos como foco do seu produto principal. Uma abordagem científica para o design da experiência do usuário é o processo de design. É uma metodologia flexível para ajudar a dividir problemas em peças
gerenciáveis focadas no design da experiência do usuário. Existem muitas interpretações adaptadas ao designer e à pessoa que o usa. Mas ele está sempre construindo sobre o conhecimento que você aprende ao longo do caminho, levando a um produto refinado. O conhecimento que dou a vocês vem de quase uma década de aprendizado e experiências como designer de UX, UI, eu não fui à escola para experiência do usuário e você não precisa, se você quiser se tornar um designer de UX. Para chegar lá, eu só recomendo ser o mais curioso e curioso possível. Vá a seminários, faça mais aulas como estas e trabalhe em alguns projetos de UX. Quanto mais problemas de UX você resolver, mais habilidades de experiência do usuário você adquire. Uma das minhas partes favoritas sobre ser um designer de UX é na indústria de UX é muito colaborativa, então peça ajuda às pessoas. Peça às pessoas que trabalhem em projetos com você. É uma indústria em rápida mudança e há sempre algo novo para captar seu interesse. Tem sido muito divertido aprender com você e eu encorajo-o a ler os recursos que eu conectei. Eu os li, eu os reli, e a maioria dos designers os leu. Por favor, sinta-se à vontade para entrar em contato se você tiver alguma dúvida e não se esqueça postar seu projeto final de classe de fluxos de usuários e quadros de arame. Eles são lindos. Tchau e até a próxima vez.
Grace Torres, UX/UI Designer
