Revisão UX: ferramentas do briefing ao protótipo
Primeiros Passos com UX - Introdução
Introdução
Para um UX designer em começo de carreira pode ser bem difícil entrar no mercado de trabalho. Principalmente, se ele já terminou a faculdade e tem pouca experiência, pode ser complicado conseguir uma vaga de estágio.
Esse curso é focado em criar o primeiro projeto, como se estivéssemos iniciando no primeiro trabalho. O projeto será simples, mas passaremos por todos os processos de UX, por meio de uma trilha. Lembrando que UX não é um processo "cascateado", permitindo ser feito por diversos caminhos e chegar em um bom resultado. A trilha irá ajudar a quem está começando ou quem tem dúvidas.
Começaremos com um Carding Sorting, faremos Site Mapping, e chegaremos até o desenho do menu do site. Usaremos diversas ferramentas que oferecem a possibilidade de ser grátis, para facilitar a realização do seu primeiro trabalho como UX Designer.
Vamos começar?
Primeiros Passos com UX - Análise de concorrentes
Briefing
Imaginando o cenário onde você estudou bastante para trabalhar com UX. Antes de entrar no mercado de trabalho, acabou criando diversos projetos pessoais para apresentar em entrevistas.
Até que finalmente conseguiu o primeiro emprego. Seu chefe, sabendo que você estudou o assunto, decide te passar um primeiro projeto para que seja aplicado todo conhecimento adquirido nos estudos.
O projeto é de uma livraria online, que deseja reformular o menu do site, a forma de expor as seções e subseções. O site ficaria mais visual, facilitando a demonstração de promoções e ofertas em datas especiais.
Essa livraria é a Casa do Código, mas como material do curso, trabalharemos com a versão de 2012 do site.
Basicamente, o site só possui três opções no menu, sendo Seu carrinho, Sobre nós e Perguntas frequentes.
No rodapé temos alguns links sobre a empresa, sobre os livros e um campo onde podemos interagir, mandando e-mail e se cadastrar na newsletter.
No corpo da página, todos livros estão listados, onde podemos rolar a página e visualizar praticamente todo o conteúdo do site. Ao lado dos livros, existe um botão para compra.
O titulo dos livros são links para outra página, onde é apresentado a descrição e os dados do livro, informações sobre o autor, os preços para as diferentes versões. Isso se aplica a todos os livros apresentados na página inicial.
O site não está muito interessante, ele não mostra onde ficam os livros em promoção e os lançamentos. Imagine que a Casa do Código passe a ter muitos livros, o cliente terá que rolar a página inteira até encontrar o livro que deseja.
Mas como podemos deixar o site mais atrativo? Caso não tenha muito conhecimento sobre o mercado de livros, podemos pesquisar na internet sobre algumas referências.
Pesquisaremos no Google sobre "Livraria online". Como resultado, temos diversos sites como a Amazon, Saraiva, Livraria Cultura, Cia. das Letra e assim por diate.
Lembrando que, empresas que trabalham no ramo de venda de livros online, ou seja, o mesmo negócio que a Casa do Código, são chamados de concorrentes diretos. Já empresas de comercio online que vendem produtos diferentes do nosso, por exemplo, a Netshoes, são considerados concorrentes indiretos.
Concorrentes diretos
No site da Amazon, tem imagens mostrando algumas ofertas. Também possui a área de ofertas em destaque com as seções Ofertas disponíveis, Próximas e Ofertas encerradas. Ao final do corpo da página, possui os Lançamentos da Semana com algumas opções de livros.
A Livraria Cultura possui um menu de categorias do lado esquerdo, com as opções de produtos vendidos pelo site. Se selecionarmos a opção de livros, veremos uma imagem de promoção de algum livro em destaque no momento, e também o campo Destaques com as opções de Mais vendidos, Lançamentos, Pré-venda e assim por diante. Independente da categoria do produto, sempre é apresentado no mesmo padrão, mostrando uma imagem de promoção.
No site da Saraiva, nota-se um banner bem grande na página inicial com promoções. E assim como a Livraria Cultura, também possui um menu do lado esquerdo, com a diferença que ele fica ocultado até que o usuário passe o mouse. Também segue o padrão de imagens de promoções associados as categorias.
Já no site Cia. dos Livros, o menu é na parte superior, com as opções de tipos de livros como, Medicina, Enfermagem e Odontologia, Direito, Literatura e Literatura Infantil, Todas as categorias, e assim por diante. Ao passar o mouse em uma dessas categorias, o menu expande mostrando as subcategorias e uma imagem de promoção.
Concorrentes indiretos
Agora que pegamos algumas refêrencias dos concorrentes diretos, podemos ver alguns sites de concorrentes indiretos. Isso serve para termos uma noção de forma como eles trabalham, se é muito diferente das empresas que são concorrentes diretas.
Acessaremos o site da Netshoes. Logo na página inicial, veremos um banner com promoções. Na parte superior existe um menu com as opções de Departamentos, Homens, Mulheres, Crianças, Calçados e assim por diante. Ao passar o mouse na opção "Departamentos", o menu irá expandir mostrando todos os departamentos do site, sem nenhuma imagem, já se acessarmos os menus mais específicos como Mulheres, o menu irá expandir com subcategorias de produtos femininos e uma imagem de alguma promoção.
Agora que conseguimos todas essas informações, como podemos trabalhar com elas? E se esquecermos as referências que vimos? Isso é o que abordaremos a seguir.
Primeiros Passos com UX - Moodboard no InVision
Moodboard
Encontramos as nossas referências, mas como mandaremos para nosso cliente? Teríamos que copiar os links dos sites e enviar ao cliente. Enviar por e-mail não seria um boa ideia, já que o cliente poderia perder no meio de outros e-mails ou até mesmo excluir sem querer. Outro problema é, se o cliente estiver em um local sem acesso a internet, os links não seriam muito útil.
Outra ideia seria tirarmos prints das telas dos sites. Podemos capturar os pontos fortes de cada site, mas como o nosso cliente deseja alterar o menu, então vamos tirar print dos menus de cada site.
Mesmo com os prints de tela, ainda teríamos o problema de muitos arquivos no e-mail, ou até mesmo problemas em fazer o download dos arquivos. Caso o cliente goste do menu de um imagem e da cor de outra, como ele nos falaria? Seria necessário editar a imagem, ou usar outras ferramentas como PowerPoint, Google Docs, e assim por diante.
Para auxiliar nesse processo, podemos usar o Invision App. O Invision é um site onde podemos guardar as nossas referências, idéias e protótipos.
Para usar o Invision é necessário ter uma conta e efetuar o login. Efetuando o acesso, a página inicial será carregada com alguns interfaces já criadas pelo próprio Invision.
Clicando na interface *Moodboard, vemos que o foi agregado algumas imagens de exemplo que podem ser usadas, opções de cores, opções de fontes, imagens de ícones e animações. Ele foi criado para demonstrar o que a ferramente pode fazer.
Não criaremos um protótipo navegável, mas sim um repositório para as nossas referências. Sinta-se a vontade caso prefira utilizar outras ferramentas, a vantagem do Invision é a possibilidade do cliente poder fazer comentários nos itens salvos. Outra vantagem é de manter os trabalho salvos para o portfólio.
Na página inicial do usuário, clicaremos no simbolo de + que se encontra no lado direito superior da na página.
Na janela Choose a project type, devemos escolher o tipo de projeto. Como vamos guardar uma coleção de referências, escolheremos a opção Create a new board.
Na nova janela, colocaremos o nome do projeto, que no caso será Referências - Site Casa do Código. Escolheremos também o tipo de moodboard, as opções são: Mansory, Meticulous e Grid. Em nosso exemplo, escolheremos a Meticulous. Após a escolha, basta clicar em "Get Started".
Com o projeto "Referências - Site Casa do Código" criado, podemos colocar um descrição no campo Add a description here, sobre o que se trata o projeto. A descrição que colocaremos será:
Sites de referência para o novo menu da Casa do Código
Embaixo do campo de descrição, estão listados os membros do projeto, que no momento é apenas a nosso perfil. Caso queira adicionar outro membro, basta clicar do simbolo de + que fica ao lado do ícone do seu perfil.
Na área de Drag and Drop, arrastaremos os prints que tiramos dos sites. Após o termino do carregamento, teremos todas as imagens de referência em um único lugar.
Para o moodboard ficar ainda mais organizado, podemos arrastar o mouse para o final da tela, até aparecer um simbolo de +, que é o botão de Create new section title. Clicando no botão, será criado um nova seção.
Na nova seção, colocaremos o título de "Netshoes - Concorrente Indireto". Agora arrastaremos a imagem do site da Netshoes para a seção.
Criaremos um nova seção, e colocaremos o título de "Amazon - Concorrente Direto", em seguida arrastaremos a imagem do site da Amazon para a seção.
Faremos o mesmo para a Livraria Cultura, colocando o título de "Livraria Cultura - Concorrente Direto".
Para a livraria Saraiva, o titulo da seção será "Livraria Saraiva - Concorrente Direto".
E por último, criaremos a seção da Cia. dos Livros com o título "Livraria Cia dos Livros - Concorrente Direto".
Cada seção possui apenas um imagem do menu aberto de cada site. Mas no decorrer do projeto, podemos adicionar novas telas nas seções.
Se clicarmos na imagem, podemos alterar o seu nome no campo Add title here. Também podemos fazer comentários sobre a imagem, basta clicar no campo Leave a comment.
O ponto forte de UX é que vemos a necessidade do momento. Por exemplo, podemos estar navegando na internet e encontrarmos outro site com um menu interessante, podemos tirar um print screen e apresentar ao cliente para que a ideia evolua.
Sobre o curso Revisão UX: ferramentas do briefing ao protótipo
O curso Revisão UX: ferramentas do briefing ao protótipo possui 182 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de UX - User Experience 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:
- Dia a dia de UX
- Referências
- Inventário e Auditoria de Conteúdo
- Proto Persona
- Card Sorting
- Taxonomia
- Sitemap
- Wireframe
- Protótipo
