Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
5 minutos de leitura
Autor(a)
Tem seu coração divido por UX e Frontend. Criou o novo curso de UX da Caelum e escreve posts no blog da Caelum e Pinceladas da Web. No seu tempo livro gosta de jogar Basquete e Airsoft.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Recentemente alteramos o Design da seção interna (onde os alunos fazem os cursos) da Alura, sem criar novas funcionalidades. Mas infelizmente acabamos nos esquecendo de colocar o botão de editar um post no fórum do Alura.
Esquecemos do botão editar no fórum da Alura.
Esquecer do botão de editar não foi um erro só nosso. Eu não me esqueço quando eu estava utilizando o app do Facebook e adicionava um comentário com algum erro. Eu tinha que correr pra versão desktop pra conseguir editar o comentário (tristeza no coração).
Se a gente for pensar, é um erro bem simples de resolver e também de esquecer de implementar. Pensando nesses problemas o grande pai da usabilidade, Mr. Jakob Nielsen criou o que chamamos de 10 heurísticas de Nielsen, algo que vemos bastante no curso de UX presencial da Caelum. Bora entender cada uma delas pra ver se a gente consegue errar um pouco menos. 🙂
É responsabilidade do sistema informar o que está acontecendo em real time pro usuário.
Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual vídeo estamos assistindo; qual é próximo; quais assistimos ou não.
Em relação ao mundo real podemos considerar: sons, visual e o tom de escrita que usuário utiliza para se comunicar. Implementamos bastante esta heurística quando utilizamos uma seta, ícones e utilizamos a cor vermelha para elementos negativos.
Um software que usa essa heurística é o Photoshop em sua barra de ferramentas.
Essa foi a heurística que me motivou a fazer esse post. Nesta heurística, a preocupação é de passar pro usuário a liberdade de ele fazer o que quiser dentro do sistema com exceção das regras que vão contra o negócio ou interferem em outra funcionalidade.
Por exemplo quando criamos um tweet é bacana poder deletá-lo se estivermos afim. Mas não dá pra editar um tweet. Imagina se você dá um retweet e depois o usuário que fez o tweet muda o texto pra uma coisa que você não acha legal. Sacanagem né!
É importante manter a consistência e padrão visual (texto, cor, desenho do elemento, som e etc).
Por exemplo, no fórum GUJ(Grupo de usuários Java), quando vamos responder um post, o botão para enviar a resposta sempre é da mesma cor, tamanho e texto. O elemento para cancelar a resposta sempre tem seus padrões:
Não é uma boa ideia deixar seu usuário errar sem explicar previamente o motivo do erro. Melhor do que isso, tente criar um interface que permite o usuário não errar.
A busca do Google faz isso de uma forma muito inteligente. No momento que começamos escrever nossa busca ele já te entrega algumas sugestões, mesmo se a gente escrever a busca com uma ortografia errada ele realiza a busca e pergunta se estamos procurando outra informação com a ortografia correta.
Realizando uma busca no Google:
Resultado da busca com erro de ortográfica:
O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra chegar até a página.
Por exemplo, quando você entra em um produto do site da Locaweb é disponibilizado o caminho que você fez pra chegar até ele. Nós chamamos isso de breadcrumb.
É importante deixar uma experiência boa com seu sistema desde o usuário mais leigo até o mais avançado.
Por exemplo, dentro do Trello (kanban de tarefas online com base em colunas free) quando você está com o foco em um cartão você pode utilizar o mouse para navegar em outros cartões, as teclas direcionais (setas pra cima e pra baixo) ou as letras j (para baixo) e k (para cima). Teclas que são por sua vez utilizadas no VIM, editor de texto famoso entre os desenvolvedores.
Por favor não encha linguiça. Toda informação extra que você deixar pro seu usuário pode na verdade adicionar mais uma dúvida, ou seja, deixe o seu layout e o conteúdo o mais simples e direto possível.
Um app que gosta muito dessa heurística é o da Nubank. Pra gerar o boleto de pagamento da sua fatura só são necessárias duas telas e elas são bem simples e realmente objetivas.
As mensagens de erros tem que ser claras e próximas do conteúdo ou ação que causou o erro.
No formulário de cadastro do Spotify, caso você não preencha os dados necessários ele deixa bem claro quais campos estão faltando, com um mensagem clara e objetiva.
É uma boa não precisar dessa heurística. Implementar documentação e sistema de ajuda sempre é chato e muitos usuários têm o costume de ignorar ambos mas, se for realmente necessário, deixe a documentação próxima do usuário e do elemento ou ação que tenha necessidade de uma explicação mais detalhada.
Por exemplo, no formulário de pagamento do Walmart tem um campo pra preencher o código de segurança do cartão. Como não é algo muito óbvio, tem uma imagem próxima ao campo mostrando onde fica o código de segurança do cartão. Essa é uma boa forma de fazer uma documentação feliz.
Com o erro que cometemos no novo layout do Alura vimos que é uma boa passar pelas 10 heurísticas de Nielsen antes de subir um novo layout. Em que momento você acha bacana utilizar as heurísticas no seu projeto?
Avalie este artigo
