Transcrições
1. Introdução: Bem-vindo a esta aula de Skillshare sobre conceitos básicos de design de experiência do usuário e enquadramento de fio. Obrigado por sintonizar. Nesta classe, vamos construir um conjunto de wire-frames para um aplicativo móvel passo a passo, juntos. Um pouco sobre mim. Meu nome é Sarah Bannister e sou experiência
de usuário freelance e designer de interface de usuário. Trabalhei em marcas como Ford e Streamlette. Sou apaixonado por criar sites e aplicativos móveis que resolvam problemas, fiquem ótimos e sejam fáceis de usar. Lembro-me do dia em que percebi que o design seria a minha carreira de sonho. Fiquei tão entusiasmado ao saber que havia uma carreira que poderia satisfazer a minha necessidade uma saída criativa e, ao mesmo tempo, ajudar a vida diária das
pessoas a se tornar mais fácil através do design e da tecnologia. Se você é qualquer coisa como eu e compartilhar esses mesmos valores, design será uma saída maravilhosa para você explorar e possivelmente começar uma carreira em. Esta classe será útil para você se você tiver pouca ou nenhuma experiência em design de interface de
usuário ou noções básicas de design de experiência do usuário, mas tem interesse em explorá-los. Legal. Vamos começar.
2. O que é um armação de fio?: arames são uma peça essencial do processo de design do produto. Um wireframe é uma maquete esquelética de um conceito web ou aplicativo. Um wireframe pode vir em uma ampla gama de visuais, de baixa a alta fidelidade, significa que um wireframe pode ser feito com algo
tão simples como lápis e papel ou caneta e quadro branco, até criar wireframes gráficos em um software de design como Sketch, Adobe XD, Balsamiq ou Axure. Geralmente, os wireframes de baixa fidelidade são recomendados no início de qualquer novo processo de projeto. Isso porque eles permitem que você pegue vários conceitos e teste-os rapidamente sem ter que investir uma tonelada de tempo ou custo neles. Em seguida, você pode pegar as diferentes idéias e colocá-las na frente de usuários que testam participantes ou clientes para obter feedback. Você pode obter feedback mais rápido e, em seguida, fazer as revisões necessárias para restringir a melhor estratégia de design para o seu produto. wireframes são uma parte inicial do design do produto ou o que é conhecido como o processo de design thinking criado por uma empresa de design IDEO, mas eles não começam do início. wireframes fazem parte do processo de design físico, que vem depois de você ter feito muitas pesquisas e descobertas sobre o produto que você irá projetar. Esta fase de descoberta é informação suficiente para toda uma outra classe. Vamos supor que já passamos por nossos sprints de pesquisa e descoberta, e já sabemos que estaremos projetando wireframes para um aplicativo móvel de viagem.
3. O que é um protótipo?: Para esta aula, também estaremos construindo um protótipo clicável com nossos wire-frames para as lições finais da turma. Um protótipo se correlaciona com os armações, mas há dois produtos de design diferentes. Protótipos são demonstrações interativas de como seu produto funcionará e ficará. Os protótipos também podem ser de baixa a alta fidelidade, você pode criar protótipos a partir de seus esboços de papel e lápis ou de seus designs de aplicativos de alta fidelidade totalmente projetados. Um protótipo geralmente leva um usuário através um determinado ou vários fluxos de tarefas e pode ou não incluir interações e animações. protótipos são importantes para o processo de design do produto porque permitem que você comunique seus projetos pretendidos para
usuários e desenvolvedores de testes de usuários ou outras equipes no processo de entrega, ou para clientes e as partes interessadas que você deve apresentar seus projetos, eles pegam seu design estático e o tornam mais realista. Ser capaz de ver como os usuários interagem com seu produto faz parte
do processo e ver o que funciona e o que não funciona em seu design, isso permitirá que você faça as melhores revisões para o seu produto.
4. O processo de design: Saber sobre o processo de design é uma habilidade importante que você pode adicionar ao seu kit de ferramentas ao entrar no mundo do design. Vou rever brevemente o processo que passou a ser conhecido como design thinking, tornado popular pela empresa de design IDEO. O primeiro passo no processo de design thinking é empatia. empatia é crucial quando você está projetando produtos que serão usados por pessoas. Este sprint permite que você saiba mais sobre os pontos de pinos de corte que você está tentando resolver para o público-alvo que pode estar usando seu aplicativo. Seus resultados de design para o estágio de empatia do pensamento de design podem incluir pesquisa e estatísticas
do usuário e uma compreensão do público-alvo para quem você está projetando. O segundo passo do processo de design thinking é o estágio definido. Na fase de definição do processo de design thinking, você levará todas as informações que coletou sobre seus usuários durante o sprint de empatia e sintetizá-la em principais tomadas que o ajudarão a definir sua abordagem para os problemas que você determinou que seu produto irá resolver. Seus resultados para o estágio de definição podem incluir as principais conclusões da pesquisa e entrevistas do usuário, definições de
estratégia, como uma declaração de problema, metas de negócios, necessidades e metas
do usuário e indicadores de sucesso como métricas e KPIs. O terceiro passo no processo de design thinking é o estágio ideate. Depois de ter uma compreensão sólida de sua estratégia e necessidades do usuário, você pode começar a idealizar em torno de diferentes ideias que podem ser soluções
potenciais para o problema ou vários problemas que seu produto pretende resolver. Esta é a parte onde o pensamento criativo é incentivado. Pense fora da caixa para maneiras que você pode corrigir esses problemas. resultados para o estágio de ideação podem incluir esboços de diferentes técnicas de brainstorming e uma lista restrita de recursos que podem ser incorporados em seus diferentes conceitos de design. O quarto passo no processo de design thinking é prototipagem. Dependendo da restrição de tempo do escopo do projeto, você pode determinar qual nível de fidelidade é necessário para seus wireframes e protótipo. Esta fase de prototipagem é quando você vai pegar os conceitos que você criou na fase de ideação e transformá-los em wireframes, em um protótipo interativo que estabelece a cláusula de tarefa primária que um usuário iria completar ao usar seu produto. Você usa esses protótipos para obter participantes de teste
reais do público-alvo usando seu produto rapidamente, que é importante para a fase final de teste, na qual você receberá feedback para que você possa fazer suas revisões finais de design. resultados de sua fase de prototipagem podem incluir wireframes de seus fluxos de usuário e protótipos de baixa a alta fidelidade. O quinto passo no processo de design thinking é o teste. Nesta fase final do processo de design thinking, você testará quantos conceitos recebidos para determinar que o tempo permite. Esta fase de teste pode revelar bandeiras vermelhas ou problemas com seu design que você pode não ter notado antes de testar com pessoas reais. Isso permite que você faça as revisões necessárias para seus designs de baixa fidelidade à medida que aumenta a fidelidade que você não descubra erros de design mais tarde depois de gastar mais tempo ou dinheiro com eles, digamos na
fase de desenvolvimento. resultados para a fase de teste podem incluir comentários
do usuário com base em seu projeto preliminar, recursos
incluídos e fluxos de usuário. O design é um processo extremamente iterativo e pouco linear. Você completará alguma forma do processo de design thinking com cada revisão que fizer para um produto com um foco centrado no homem. Neste importante estágio reflexivo, você revisará o feedback e os resultados de seus testes, que informará sobre onde fazer revisões para que você possa iniciar o processo de design novamente em novos conceitos que são versões aprimoradas do seu projeto previamente testado.
5. O que é um fluxo de tarefa do usuário?: Como um aplicativo em que você pode estar trabalhando como designer de UX ou UI pode consistir em muitas telas diferentes, às vezes centenas de telas e estados de telas e recursos diferentes. Para o bem desta classe, trabalharemos na conclusão de um único fluxo de tarefas para um aplicativo móvel de viagem. Um fluxo de tarefas do usuário é uma tarefa que os usuários usariam seu aplicativo ou produto para concluir. O fluxo deve orientar seu usuário para o ponto de entrada da tarefa, levando-o através de cada etapa até o passo final e resultado alcançável, como adicionar um evento ao seu calendário digital pessoal ou comprar um produto on-line. Conversões bem-sucedidas dependem da criação de um fluxo fácil de usar. Se os usuários não conseguirem descobrir como concluir a tarefa principal que seu aplicativo oferece
, as pessoas simplesmente não usarão seu produto. Podemos determinar um esboço sólido para o nosso fluxo de usuários entendendo nossos objetivos de negócios e necessidades do usuário, que determinamos na fase de definição do processo de design thinking. Concentrando-se nas metas de negócios e nas necessidades do usuário irá satisfazer os requisitos para os clientes e partes interessadas que estão investidos no projeto e procurando atender certas métricas de sucesso, ao
mesmo tempo que ajuda o usuário a atingir seus objetivos e sinta-se satisfeito com o seu produto. Para a parte wireframing do nosso aplicativo, vamos projetar um fluxo de tarefas que leva o usuário
através do processo de fazer uma reserva em um hotel para um aplicativo de viagem. Outros fluxos de tarefas que você pode projetar para um aplicativo de viagem podem incluir reservar um voo, pesquisar coisas diferentes para fazer em seu destino e reservar seu grupo para diferentes atrações, ou agendar uma consulta com uma viagem Agente. Como você pode ver, você pode ter muitos fluxos de tarefas diferentes para um único aplicativo. Não quero que essa aula tome muito do seu tempo, então vamos ficar com o fluxo de tarefas. Vamos começar com nossos wireframes.
6. Ferramentas de redação: Estas são as ferramentas que você precisará seguir e criar uma armação de fio de lápis e papel. A primeira coisa é papel de grade. Incluí um recurso que você pode baixar e imprimir diferentes dimensões de papel de grade, incluindo dimensões móveis emolduradas por um gráfico de telefone que você pode conectar quadro dentro de. A segunda coisa é um lápis e uma borracha. Enquanto você pode desenhar em caneta, é bom ser capaz de apagar seus erros ou fazer revisões. A última coisa que você vai precisar é de uma régua para garantir que você está mantendo formas e linhas agradáveis e apertadas, e para que tudo pareça consistente. Opcionalmente, você pode solicitar um enquadramento de fio ou um estêncil de interface do usuário da Amazon. Você não precisa disso, mas permite que você desenhe com rapidez e precisão coisas como onde seus ícones sociais podem estar ou outros elementos comuns da interface do usuário. Vamos começar.
7. Criar wireframes: O objetivo de um wireframe é delinear a estrutura esquelética do projeto de cada triagem. wireframes são compostos de formas, linhas, caixas, texto e botões. Então coisas como imagens, cor, direção de arte, topografia, essas coisas não são importantes no
processo de enquadramento de fios e elas são realmente desencorajadas porque você não quer que seu usuário se envolva em os detalhes finos e qual o design final pode ser que não estamos trabalhando para o design final. Eu mencionei anteriormente, a cor não é aconselhada e este é geralmente o caso. Há casos em que você pode querer usar a cor. Por exemplo, eu o uso para CTA, tão útil para mim para que eu possa lembrar o que eu queria ser interativo, bem como os outros para os quais eu estou entregando meu design. Enquanto um wireframe é basicamente um rascunho áspero, queremos manter tudo consistente no que diz respeito ao dimensionamento e espaçamento. Quanto melhor você conseguir fazer seus wireframes esboçados em papel, mais legíveis e utilizáveis serão e você receberá feedback
mais consistente de seus usuários após o teste. Tudo o que você quer é que seu design seja legível e limpo. É importante não ficar muito envolvido nos detalhes. Por exemplo, provavelmente nem sabemos qual cópia gostaríamos de usar ainda. Você pode usar espaços reservados para imagens e cópias, como caixas retangulares pequenas ou quadrados. Isso é chamado de enquadramento de bloco e indo para
delinear o fluxo de usuário vai precisar para este quadro de fio. A primeira parte é a navegação e a capacidade de navegar hotéis. O segundo passo será permitir que o usuário defina as datas de
chegada e partida e defina a quantidade de convidados que ficarão hospedados. O terceiro passo é a capacidade de procurar diferentes listagens. Em quarto lugar, a capacidade de visualizar uma página de detalhes sobre uma oferta disponível. quinto passo é finalmente reservar um quarto. A sexta etapa solicitará aos usuários suas informações e detalhes de
pagamento e o passo final será a confirmação da reserva.
8. Digitalização e upload de seus quadros: Um aplicativo de scanner irá automaticamente pegar os desenhos de seus documentos e melhorá-los como um scanner real iria copiar e transferir documentos. Eles serão muito mais legíveis porque o contraste será ajustado automaticamente para você. Depois de tirar fotos de todos os seus projetos, você vai transferi-los para o seu computador para que
possamos enviá-los para um software de prototipagem a seguir.
9. Protótipos no InVision (Invisionapp.com) (Invisionapp.com): Em seguida, vamos para invisionapp.com e criar uma conta gratuita no invision. Quando estiver na sua conta, clique no botão rosa grande no canto superior direito para iniciar um novo projeto. Nomeie o projeto e selecione o protótipo na lista de opções do projeto. Em seguida, você pode simplesmente arrastar e soltar seus arquivos nesta seção do painel. Sempre que você fizer uma revisão em seu design, se você inserir um arquivo com o mesmo nome, ele substituirá seu arquivo original. Portanto, é fácil se você estiver tentando apenas atualizar seus designs depois de determinar as revisões. Você também pode renomear os títulos gerais
das telas sem alterar os nomes dos arquivos aqui. Agora clique em uma das telas. Em seguida, vamos entrar no modo de construção aqui na parte inferior. Agora vamos apenas clicar e arrastar sobre um elemento com o mouse e isso irá criar o que é chamado de hotspot. Um ponto de acesso é onde o usuário clicará para acionar uma interação com seu protótipo. Vamos passar e criar hotspots para cada tela até que tenhamos um protótipo totalmente funcional que permitirá que um usuário passe pelo seu fluxo de tarefas. Agora você tem um protótipo funcional do seu design que você pode mostrar aos participantes do teste de perspectiva ou mostrar seu processo de pensamento para as partes interessadas. Ou você pode simplesmente mostrar aos seus amigos e familiares que você sabe como criar aplicativos móveis incríveis.
10. Conclusão: Você conseguiu, trabalho incrível. Acabamos de construir wireframes e um protótipo funcional. Adoraria ver o trabalho de todos. Por favor, envie imagens de seus wireframes para a galeria do projeto e fale um pouco sobre sua experiência. Qual era o seu aspecto favorito de grampear? Qual foi a parte mais difícil? Você optou por projetar um fluxo de tarefas diferente para um aplicativo móvel de viagem ou aplicativo diferente do que fizemos na classe? Quais outras ideias de aplicativos você pode tentar projetar no futuro? Melhor ainda, você pode incluir um link para seu
protótipo de visão ao vivo na descrição do projeto também. Você pode fazê-lo com este botão. Mal posso esperar para ver seus projetos. Muito obrigado por fazer essa aula.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
