Primeiras aulas do curso UX Design Patterns: navegação e informação

UX Design Patterns: navegação e informação

A Educalura - Apresentação

Olá, eu sou o André Tardelli. Boas-vindas ao curso de UX Design: componentes para navegação e informação. O que nós vamos aprender nesse curso? Nesse caso, vamos utilizar uma abordagem investigativa. Vamos dar uma olhada nos principais componentes de navegação e informação utilizados na web.

Vamos entender um pouco mais sobre as características e comportamentos principais que esses componentes podem ter, além de dar algumas diretrizes de acessibilidade para que consigamos tratar isso tudo de uma forma muito natural. Por fim, também vamos fazer uma pequena documentação para que consigamos colocar todas as informações pertinentes às nossas decisões em um pequeno projeto.

Nesse pequeno projeto que vamos fazer, vamos estruturar algumas telas e definir alguns componentes para que consigamos atingir alguns requisitos principais para informar e facilitar a navegação do usuário. Como estamos tratando um contexto web, vamos ter que fazer para uma versão web e para uma versão mobile também. Espere ver todos esses componentes e os comportamentos deles em ambas as resoluções.

O que não vamos aprender nesse curso? Nesse caso vamos utilizar a ferramenta Figma para fazer a prototipação, mas não vamos mostrar o processo de prototipação em si, nós só vamos mostrar o protótipo final e, no caso, só estamos fazendo isso para conseguirmos visualizar como que essa informação vai ser mostrada em um produto final. Não espere essa parte de prototipação do projeto em si.

Nós também não vamos abordar componentes mobile, ou seja, estamos tratando em um contexto web. Se você tiver algum componente que seja específico para mobile, ele provavelmente não será abordado aqui.

Para quem que vai ser esse curso? Para quem que vai ser interessante fazer esse curso? Se você quer conhecer os principais elementos de navegação e informação, se você quer viabilizar essas soluções de acordo com o contexto, ou seja, quem é o nosso cliente? Para quem vamos fazer isso? Qual é a melhor forma de informar ou facilitar essa navegação? E também definir esses comportamentos e diretrizes acessíveis. Se você pretende fazer uma dessas três coisas, esse curso é para você. Com base nesse assunto, dei uma explicação básica sobre o que vai ser abordado nesse curso. Se quiser continuar, vamos embora!

A Educalura - Apresentando o projeto

Vamos iniciar o nosso curso falando um pouco mais sobre o projeto que vamos fazer para nossa empresa, que é a Educalura. Mas o que é a Educalura? A Educalura vai ser uma consultoria educacional, ou seja, ela vai conseguir pegar várias escolas, universidades e cursos que contratarem a Educalura e vai fornecer soluções tecnológicas para que consigamos auxiliar na parte de educação ao longo do país.

Nós participamos da equipe do Educalura e nós estamos aqui como UX Designer. Como UX Designer vamos querer entregar uma solução que seja agradável para o usuário, que consiga melhorar a experiência dele. Estamos aqui para conseguirmos desenvolver o esqueleto de um protótipo de maneira que consigamos garantir que o resultado vai ser usável e que vai entregar valor para o usuário.

Só que para isso também vamos ter que conversar com outras equipes que trabalharão junto conosco, que são as seguintes: Vamos ter a equipe de Marketing, ela será necessária para que consigamos ver se estamos atendendo nossos requisitos de negócio. Ela vai chegar e falar: Será que esse método está sendo a melhor solução para que consigamos amplificar as nossas vendas? Será que ele está chamando atenção suficiente para a mensagem, uma determinada propaganda que queiramos colocar? Então eles serão responsáveis justamente por ajudar nessa parte.

Também vamos ter uma equipe de desenvolvimento. Serão várias pessoas que vão programar para nós, para fazer com que esse protótipo realmente vire uma aplicação usável na web. Eles normalmente vão perguntar coisas como: Será que é possível fazer? Será que vai ser muito difícil de desenvolver? Eles vão fazer essas perguntas normalmente quando sugerirmos alguma coisa.

Também vamos ter uma equipe de design, então eles vão ser responsáveis por fazer toda a identidade visual que teremos na nossa página. No caso, eles vão tratar coisas como cores, como alinhamento, como fonte, toda essa parte que vai ficar muito mais próxima do nosso produto final, isso será responsabilidade da equipe de design.

E no final de tudo, também teremos uma equipe de UX Writing, ou seja, essa outra equipe de UX vai ser responsável por ver se os nossos textos ou a forma que nos comunicamos está sendo ideal para aquele tipo de perfil do usuário que traçamos: Estamos falando da melhor forma? Será que não poderíamos escrever de uma forma mais amigável, que chamasse mais atenção? Ele estará responsável justamente por essa parte textual.

Vamos falar agora um pouco sobre o projeto que vamos fazer. A Educalura foi contratada por uma universidade para fazer uma página web de um portal. E esse portal vai realizar 2 serviços principais. O primeiro deles vai ser a realização de vários cursos optativos online. Imagina que em uma universidade você vai ter vários alunos de graduação e eles gostariam de fazer, por exemplo, uma disciplina eletiva.

Eles poderiam fazer agora essa disciplina eletiva de maneira online assíncrona, vendo a videoaulas junto com o professor e tendo um local para que eles tivessem acesso a esses arquivos. Mas além disso, essa universidade também pediu para que fizéssemos cursos livres. O que são esses cursos livres? São cursos que qualquer pessoa que não seja um aluno de graduação, ou seja, um aluno de graduação pode fazer. Ou seja, qualquer um pode fazer um desses cursos, só que esses cursos são pagos separadamente.

Você vai conseguir fazer com que a pessoa compre mais ou menos um curso separado para que ela consiga estudar em casa sobre aquele conteúdo. Vamos ter esses 2 tipos de conteúdo desses 2 tipos de curso, que vamos ter que lidar.

Dados esses requisitos, esse projeto que nos passaram, vamos ter que seguir alguns requisitos em geral. Um deles vai ser que precisamos realizar a matrícula de ambos os cursos que acabamos de falar. Além disso, também vamos precisar que a nossa aplicação seja responsiva. O que eu quero dizer com isso? Como vai ser uma aplicação web, ela vai ser aberta, vai ser acessada de vários tipos de dispositivos, de vários tamanhos diferentes. Então vamos ter que garantir que essa aplicação consiga ser usável tanto vendo na tela do nosso computador, do nosso desktop, quanto na tela do nosso celular, no mobile.

Ela também vai ter que ser acessível, isso é uma coisa muito importante, porque vamos precisar fazer com que a nossa aplicação funcione para diversos tipos de usuário. Quando estamos falando de acessível, estamos falando sobre: Vai ser possível você fazer uma navegação por teclado? Você vai conseguir utilizar um leitor de tela para conseguir ver esse conteúdo? Tudo isso vai ser muito importante para que consigamos fazer algo que realmente seja inclusivo e que seja bom para todos os tipos de usuário.

E, no final das contas, todas essas nossas decisões que tomarmos quando formos montar esse protótipo, elas tem que ser alinhadas com as necessidades de toda a nossa equipe. Quando estivermos falando, se decidirmos uma diretriz, temos que ver se realmente está batendo, se está conflitando com algum requisito que essa equipe pode pedir. Caso isso aconteça, vamos ter que conversar e falar com eles até ter um consenso.

Essa universidade passou algumas referências para nós. Vamos ver todos esses sites ao longo do curso. Mas só para vocês entenderem, eles passaram vários sites de locais que trabalham com essa parte educacional, de bolsa, de universidade, eles passaram algumas referências de sites com coisas interessantes que poderíamos olhar. Eles mostraram como eles mostram a lista de cursos, ou de faculdades, de universidades, de cursos, mensalidades. Isso fica tanto para a resolução desktop quanto para resolução do mobile. Ele também me mostra de várias outras formas, com outras imagens, com a imagem do mobile.

E por fim temos uma forma que não utiliza tantas imagens, por exemplo com o Firjan SENAI. Ele está sendo de uma forma mais objetiva, que eles também acharam muito legal essa forma de visualização, que ficou um pouco mais compacta. Todas essas formas de visualização, eles nos mandaram tanto na resolução desktop, quanto na do mobile, que é o que vamos tratar nesse curso.

Fechando esse projeto, o que vamos começar a trabalhar, já poderíamos começar diretamente para a parte de prototipação. Só que o ideal, é que como já estamos mexendo com vários tipos diferentes de usuário, estamos mexendo tanto com as pessoas do curso de graduação quanto as pessoas do curso livre. Talvez seria mais importante fecharmos essa aula com uma simples pergunta: Quem vai utilizar essa aplicação? Nós sabemos com 100% de certeza quem vai utilizar? Trataremos esse assunto no próximo vídeo. Até logo.

A Educalura - Arquétipos e personas

No último vídeo eu tinha perguntado para vocês quem utilizaria essa nossa aplicação. Porque agora pensa comigo, nós estamos aqui trabalhando com alunos de diferentes tipos de cursos que vão tratar sobre diferentes contextos. Nesse caso, vamos precisar entender um pouco mais sobre quem são as pessoas que vão utilizar essa nossa aplicação, para que consigamos fazer algo cada vez mais direcionado para elas.

Nos estudos de UX, uma das coisas que costumamos muito fazer para chegar nesse objetivo é fazer a montagem de alguns arquétipos e depois materializá-las em uma persona. No caso, um arquétipo vai englobar toda a parte de um estereótipo simples que teríamos de um aluno. E depois disso conseguiríamos materializar isso em uma persona, colocando o nome, uma parte de uma personalidade, uma coisa mais específica para que conseguíssemos gerar um pouco mais de empatia sobre para quem vamos fazer esse trabalho.

É muito importante falar quem conduzimos essa pesquisa, a Educalura conduziu essa pesquisa, porém não vamos explicar todo o passo a passo de como foi conduzida essa pesquisa. Se vocês quiserem aprender um pouco mais sobre como gerar essa pesquisa, para montar essas personas e esses arquétipos que falamos, então eu vou recomendar depois alguns cursos e alguns vídeos que vão falar justamente sobre esse tipo de pesquisa.

Vamos começar com os arquétipos. Vamos gerar um arquétipo simples. Neste primeiro arquétipo vamos ter o estudante. Vamos ter um estudante típico que você vai encontrar em uma universidade. Uma pessoa que é adepta a tecnologias, multitarefa, ativo em redes sociais. Ela quer se formar o quanto antes, se preocupa também com o futuro profissional.

Os sentimentos são coisas que você teria normalmente em um estudante, a curiosidade, motivação, frustração, até um pouco de solidão por estar fazendo o curso de forma online. As necessidades e os objetivos, veja que sempre é uma coisa objetiva. Esse estudante quer visualizar essas disciplinas com maior facilidade, quer se formar o quanto antes. No caso, veja que eles estão focando em uma tela para vocês conseguirem visualizar, cursar essas disciplinas, verificar notas, verificar a página dos professores. Esse estudante também estaria um pouco mais voltado para a parte da graduação.

Com base nesses dados, já conseguimos ter algumas visualizações simples para modelarmos essa nossa persona. Geramos a nossa persona, o Lucas Lima. O Lucas Lima vai ter 19 anos, ele mora em São Paulo, é um aluno de graduação e faz Ciência da Computação. Ele é uma pessoa que está provavelmente fazendo suas anotações no Google Docs, está sempre no Discord com os amigos, no twitter, em rede social, é uma pessoa mais metódica, também é uma pessoa bem objetiva.

O Lucas é um pouco ansioso, ele sempre quer ser avisado quando uma turma nova está no sistema, ele quer se formar o quanto antes, ele tenta entrar direto no sistema para ver se tem alguma atividade, no final do período ele vê se a nota foi lançada no sistema, Note que para o Lucas, uma coisa que é muito importante é ele ter as informações direto para ele.

Ele quer ser objetivo, quer encontrar a informação dele, ver se a informação está atualizada, para que ele consiga seguir com o estudo dele o mais rápido possível. Temos que ter essas considerações em mente quando formos gerar essa aplicação para alunos de graduação, por exemplo.

Por outro lado, teríamos uma outra persona, essa persona vai ser sobre a Kelly. Ela tem 45 anos, é formada em administração e faz um curso livre. Ela adquiriu um curso de Gastronomia na universidade, porque ela possui, por exemplo, uma lanchonete e ela gostaria de poder aprender um pouco mais sobre receitas. O que ela poderia aprender a mais sobre esse assunto. Ela é literalmente uma mãe empreendedora.

Nesse caso ela é uma pessoa amável, disciplinada, ambiciosa e o que ela quer fazer mesmo é receber o certificado, quer saber o prazo de entrega das atividades e usa pouco a plataforma. Por ela usar pouco a plataforma, por exemplo, por trabalhar durante a semana, ela normalmente conduz os estudos dela para o final de semana. Ela também quer algo que seja bem intuitivo, que seja chamativo, você receba um certificado, ela quer algo que realmente consiga vender, para conseguir impulsionar a carreira dela.

Por fim, já geramos essas duas personas e conseguimos mapear uma terceira, com base nessa pesquisa. Essa última pessoa é a Clara Matos. A Clara tem 26 anos, cursa Letras na graduação, porém ela é cega. Quando ela se inscreveu nessa universidade, um dos motivos principais foi porque a universidade propôs um material acessível para que ela conseguisse cursar essas disciplinas.

Ela vai ser uma pessoa criativa, determinada, esforçada, mas uma das necessidades, um dos objetivos principais para ela é que ela tenha independência para que ela consiga acessar essa plataforma sem ter muitos problemas, ou seja, que ela consiga utilizar um leitor de tela, que ela consiga fazer uma navegação por teclado e que ela consiga cursar essas disciplinas pela carreira dela, para que ela consiga se formar também o quanto antes.

Ela também vai ser essa típica aluna, só que agora vamos ter que ter muito em mente esse material acessível, para que consigamos também atender essa aluna, esse perfil de pessoa que vai utilizar essa nossa plataforma. Nós fizemos esse levantamento dos arquétipos, dessas nossas personas para que agora entendêssemos um pouco mais sobre para quem vamos fazer essa aplicação. Com base nesse material, vamos conseguir conduzir outros passos antes que consigamos fazer em si a prototipação da nossa aplicação. Veremos isso no próximo vídeo.

Sobre o curso UX Design Patterns: navegação e informação

O curso UX Design Patterns: navegação e informação possui 153 minutos de vídeos, em um total de 60 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI Design acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas