Primeiras aulas do curso UX: os erros frequentes de usabilidade e as boas práticas

UX: os erros frequentes de usabilidade e as boas práticas

Introdução - Introdução

Introdução

Sejam bem-vindos ao curso "UX mitos: os erros frequentes de usabilidade e as boas práticas".

Nele, analisaremos os mitos da usabilidade em relação a interface. Receberemos um material de um portal de notícias do nosso cliente para fazer essa análise e usaremos como referência principal o site UXMYTHS, além de muitos outros estudos em nossos exercícios.

Faremos toda a análise dos mitos da usabilidade ligados a interface e logo aplicaremos algumas melhorias relacionadas ao material do nosso cliente. Para isso, trabalharemos com o Illustrator

Vamos começar?

Introdução - Convenções visuais para web

Convenções visuais para web

O cliente nos enviou o layout de seu portal de tecnologia para avaliarmos e verificarmos a necessidade de melhorias. Este site possui uma página inicial com uma listagem de notícias, área de destaque e áreas de widgets.

captura de parte da página inicial do portal

O layout traz também uma página que ilustra uma matéria longa com algumas áreas de widgets, entre outros elementos.

captura de página interna do portal : matéria

A primeira etapa no processo de criação de um layout é a busca por referências. Como o portal do cliente trabalha com cobertura de notícias sobre tecnologia, nada mais prático que buscar outras referências de sites tecnológicos. Alguns deles são:

Todos têm a organização de conteúdo com menus, áreas de widgets, alguns têm bloco de destaque e outros não, mas fundamentalmente, a maioria deles prioriza o conteúdo do lado esquerdo da página e adicionam áreas complementares à direita. Veja a página da Booking, que prioriza o formulário de pesquisa no lado esquerdo:

captura da home do site: booking.com

O formulário provavelmente é a parte mais importante do portal. É onde os usuários fazem buscas por hotéis. Já as matérias secundárias, tomam conta do lado direito da página. O que é natural, considerando que em português a leitura começa da esquerda para a direita. Mas, e se lêssemos da direita para a esquerda, como em Árabe, de que maneira o site da Booking estaria posicionado? Mudando o idioma do site, veremos:

captura da home do site da booking em árabe

As áreas importantes são movidas para a direita, ou seja, se adapta a leitura do usuário. Se utilizarmos os sites da TechTudo e do Gizmodo como referência, veremos que eles têm características comuns, áreas de destaque, listagem de notícias à esquerda e widgets à direita. Talvez seja isso mesmo que devemos seguir.

Observando isso, cairemos no primeiro mito: O design tem que ser original? (mito 9 no site UXMYTHS). O designer, por ter um trabalho criativo, tende a querer criar algo novo, do zero e inovador. O que nem sempre é funcional, porque o usuário está adaptado a determinados padrões e essa nova criação pode deixá-lo confuso, dificultando a interação.

De acordo com o livro "Don't Make Me Think", do arquiteto de informação Steve Krug, as convenções são boas e ajudam os usuários quando os mesmos vão de um site para outro. Um leitor do Gizmodo ou TechTudo pode encontrar facilidade para navegar quando visitar nosso site, se ele for semelhante aos dois citados.

Seth Godin, escritor norte-americano sobre livros de negócios, afirma em seu blog que há mais de 1 bilhão de páginas para utilizarmos como inspiração e que referências são importantes. No momento da criação, o designer pode utilizar essa referência para criar algo semelhante, favorecendo a experiência do usuário.

Ben Hunt traz outra informação interessante em seu blog, sobre não forçar o processo criativo a qualquer preço, tornando o processo mais simples, barato e lucrativo, beneficiando ainda mais o usuário que já está adaptado com as convenções na web.

Considerando o que falamos, o que podemos fazer para melhorar nosso layout? Notem que a logo marca está centralizada. Isso não é um problema, mas por ordem de leitura, posicionaremos a mesma no lado esquerdo. Não podemos dizer que será melhor, de fato, porque é exigido um teste de usabilidade para afirmar com certeza. Porém, estamos quebrando mitos. Sendo assim, moveremos o ícone da logo marca para o canto esquerdo.

movendo logo para o canto esquerdo

Lembrem-se que o controle de posicionamento com valores absolutos pode ser utilizado movendo o ícone para o pixel 1280 à esquerda e 25 para cima. Para não repetir o trabalho na página interna, utilizaremos os atalhos 'CTRL + C' para copiar e 'CTRL + F' para colar na frente. Assim, posicionaremos os itens exatamente na mesma posição.

movendo logo na página interna

Podemos melhorar a parte de destaques do site também. Vamos invertê-la para que o destaque maior fique à esquerda e os secundários fiquem à direita.

posição dos destaques invertida

A área de widgets em nosso site está posicionado à direita das notícias, vamos invertê-los também. O que antes estava assim:

noticias a direita, widgets a esquerda

Ficará assim:

noticias a esquerda, widgets a direta

Com isso, terminamos os ajustes para a página inicial. Vamos para a página de artigo? Nele, precisamos apenas inverter a posição do conteúdo com a da área de widgets.

conteúdo da página à esquerda e widgets à direita

Uma dica é sempre usar o Zoom para alinhar corretamente como as linhas guias e usar o 'SHIFT' para mover os elementos na horizontal, mantendo o alinhamento vertical. Ao final, podemos usar o 'CTRL + 1' para aplicar o Zoom de 100% e ter uma experiência próxima a do usuário e verificar se a leitura parece mais natural. Nessa verificação, lembrem-se de ocultar as guias.

Assim, quebramos o mito de que o design da página precisa ser original. De fato, melhoramos a experiência do usuário, tornando-a semelhante à experiência que ele tem em outros, sem que seja necessário reaprender algo.

Inserir conteúdo no layout - Os problemas causados pela ausência de imagens

Os problemas causados pela ausência de imagens

Posicionamos os elementos do layout de forma que a leitura fique mais fácil para o usuário. Mas continuaremos olhando um pouco mais de perto. Notem que há várias caixas cinzas que delimitam os locais onde deveriam ter imagens e, nos textos, temos o velho e conhecido preenchimento com textos do Lorem Ipsum.

Neste ponto, caímos no mito de que não precisamos do conteúdo para fazer o design do site. Este é o mito número 19 no UX Myths. O que os especialistas têm a dizer sobre isso?

Kristina Halvorson, uma das autoras do livro "Content Strategy for the Web" diz que as decisões de design devem ser baseadas no conteúdo. O design é criado como suporte ao conteúdo. O conteúdo é o principal fator para a criação do design.

Sem imagens no projeto, ficamos bem distantes da real sensação que o mesmo se propõe a passar. Primeiramente, nos preocuparemos apenas com as imagens, depois trataremos os casos de texto. No arquivo com o projeto do curso, baixado anteriormente, temos o 'conteudo-aluranews', que é um documento de texto com a descrição do conteúdo do site. Na sessão de "Destaques" da "Página principal", temos:

Página principal

Destaques

1 - cubos-magicos.jpg

DIVERSÃO

Cubos mágicos: conheça variações desse brinquedo

2 - produtos-apple.jpg

"MAC IDEAL"

Saiba a configuração recomendada para diferentes tipos de atividade

3 - alvo.jpg

NO ALVO!

Os segredos do sucesso de uma startup de tecnologia

Ou seja, as imagens estão descritas com suas respectivas posições. Elas podem ser encontradas na pasta _Imagens. Sendo assim, arrastaremos a imagem cubos-magicos.jpg para dentro do Illustrator com apenas a camada imagens livre. Todas as outras deverão estar bloqueadas. Após isso, redimensionaremos a imagem dos cubos para que as partes inferior e superior fiquem iguais à maior área de destaque. Depois disso, recortaremos a imagem com o "CTRL + X" e utilizaremos o atalho "CTRL + B" para colar a imagem por trás do quadro cinza.

imagem por trás do quadro cinza

Selecionaremos o quadro cinza e a imagem dos cubos, clicaremos com o botão direito do mouse e selecionaremos a opção "Criar máscara de recorte". Assim, teremos:

destaque 1 com imagem posicionada

O processo será o mesmo para as demais imagens do bloco de destaque. Lembrando que, dessa forma, podemos dar dois cliques nos quadros cinzas — que são máscaras de recorte — e reposicionar as imagens. Se necessário redimensionar a máscara, não distorceremos as imagens. Seguiremos o texto que descreve o conteúdo do site para adicionar todas as imagens dele.

Após adicionar algumas, notaremos que o layout ganhou cores e ficou um pouco mais próximo do real. As imagens das notícias agora são diferentes. Elas tiram a sensação de que estamos olhando um wireframe, onde a representação das imagens são pequenas caixas.

página inicial com várias imagens

Uma forma mais prática de criar a máscara de recorte ao invés de usar o clique do mouse, é utilizar o atalho "CMD + 7" ou "CTRL + 7", se usar o Windows. Uma observação importante é que na área de widgets, onde as imagens estão exatamente do tamanho que precisam ser, podemos posicioná-las com os blocos cinzas e depois removê-los, deixando apenas as imagens nos locais.

página inicial com todas as imagens adicionadas

Notem a quantidade de cores que as imagens adicionaram ao nosso layout. É dessa forma que conseguimos sentir diretamente como o design se comporta com o conteúdo real. Para a página interna, o processo será basicamente o mesmo, mas vamos repetir algumas imagens que já estão na página inicial. Repetir imagem não é um problema. O problema é repeti-la várias vezes em uma mesma página, por exemplo.

Continuando com o processo de colocar cada imagem em seu devido lugar, de acordo com a descrição no arquivo de conteúdo do site, teremos a página interna de conteúdo da seguinte forma:

página interna com todas as imagens

Lembrando que é muito importante verificar cada alinhamento de imagem de perto, para garantir que nada cause estranheza.

Assim, terminamos o processo de substituição das imagens placeholders por imagens reais, que fazem parte do conteúdo do site. Já temos uma impressão mais próxima do real, mas ainda precisamos trabalhar os textos.

Sobre o curso UX: os erros frequentes de usabilidade e as boas práticas

O curso UX: os erros frequentes de usabilidade e as boas práticas possui 132 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de UX - User Experience em Design & UX, ou leia nossos artigos de Design & UX.

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

Aprenda UX - User Experience acessando integralmente esse e outros cursos, comece hoje!

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana