Formação Oracle DBA Completa


UX – User Experience ou Experiência do Usuário – Princípios

UX – User Experience ou Experiência do Usuário – Princípios

18 de agosto de 2018 1 Por Ramos de Souza Janones
Powered by Rock Convert

Princípios de Usabilidade (também chamados de Heurísticas) são guias ou “conselhos de especialistas” a respeito de boas práticas no design de interfaces com o usuário. Eles advém de um método chamado Avaliação Heurística (proposto por Jakob Nielsen em 1990) e servem para dois propósitos: facilitar a escolha entre diferentes alternativas de design durante a criação e permitir encontrar e justificar problemas durante a avaliação.

As heurísticas mais famosas para o design de interfaces em softwares de uso geral foram propostas por Nielsen e são compostas de 10 princípios:

  • Visibilidade do sistema. Sempre mantenha os usuários informados sobre o que acontece no sistema, por meio de feedback apropriado no momento certo. Recursos que podem ser utilizados para isso incluem alterações no cursor do mouse, realce (highlight) de seleções, barra de informações (status bar). Mas, deve-se evitar exageros ou interações desnecessárias como no exemplo abaixo (os resultados poderiam ser imediatamente exibidos sem a necessidade do clique no botão):

inserir a descrição da imagem aqui

  • Correspondência entre o sistema e o mundo real. Fale a lingua do usuário, utilizando palavras, frases e conceitos que lhe são familiar ao contrário de termos técnicos. Termos técnicos e mesmo metáforas podem ser enganadores. O exemplo abaixo é ilustrativo (e engraçado), pois a interpretação de “type” (que em inglês pode significar sigifica a palavra “tipo” ou o verbo “digite”) pode levar um usuário a digitar M-I-S-M-A-T-C-H no teclado:

inserir a descrição da imagem aqui

  • Controle e liberdade para o usuário. Forneça opções para que os usuários facilmente escapem de condições inesperadas, usando “saídas de emergência” claramente indicadas. Para alcançar isso, forneça a opção de desfazer (undo) ações e permita que operações longas sejam canceladas. Mas faça isso de forma clara, provavelmente fornecendo diretamente uma opção de cancelamento. Mesmo o diálogo abaixo é confuso porque não apresenta um botão chamado “Cancelar” e ainda apresenta a indicação textual usando palavras que não se encontram nos botões apresentados:

inserir a descrição da imagem aqui

  • Consistência e padrões. Evite fazer com que os usuários precisem pensar a respeito de diferentes palavras, situações ou ações que possam ter o mesmo significado. A ideia é manter a mesma aparência e comportamento (look and feel) em todo o sistema, para que coisas similares pareçam similares e coisas diferentes pareçam diferentes. Pode parecer simples, mas é um erro muito comum como no exemplo abaixo envolvendo o posicionamento de botões:

inserir a descrição da imagem aqui

  • Diagnóstico e recuperação de erros. Use linguagem simples, construtiva e polida para descrever a natureza de um problema e sugerir uma forma de solucioná-lo. O exemplo abaixo chama o usuário de idiota, aumentando a sua frustração com o desentendimento da interface e prejudicando imensamente sua experiência com o produto:

inserir a descrição da imagem aqui

  • Prevenção de erros. Sempre que possível, previna a ocorrência de erros antes de tudo. Isso pode ser feito desabilitando-se comandos temporariamente inacessíveis ou ilegais e usando caixas de seleção (como combos e listas) ao invés de caixas de texto, pois elas são menos propensas a erros porque o usuário não tem como errar na grafia do conteúdo. Ainda assim, isso não deve ser utilizado ao extremo como nesse exemplo (em que não há ganho de precisão de entrada de dados, mas há perda na eficiência da execução da tarefa):

inserir a descrição da imagem aqui

  • Reconhecimento ao invés de recordação. Faça objetos, ações e opções serem visíveis. Isso significa que os componentes gráficos devem ser usados da forma convencionada (seleção por combos e listas e não por caixas de texto, por exemplo) e deve-se evitar solicitar que o usuário mantenha muita informação em memória. No exemplo abaixo, assim que o usuário clicar em OK, todo o caminho indicado será imediatamente eliminado da tela, mas se essa informação é importante ela deveria permanecer indicada visualmente (com o uso de balões ou a abertura automática da janela indicada):

inserir a descrição da imagem aqui

  • Flexibilidade e eficiência no uso. Forneça aceleradores que são invisíveis para usuários novatos, mas que permitem usuários experientes a executar suas tarefas mais rapidamente. Exemplos clássicos são as teclas de atalho e os menus de acesso rápido:

inserir a descrição da imagem aqui

  • Design e estética minimalistas. Evite usar informação que é irrelevante ou raramente utilizada. Adicionalmente, use cores e fontes simples e fáceis de serem compreendidas, e organize os elementos para ocuparem espaços condizentes com suas funções (isto é, não apresente informação desconectada em uma mesma janela). No exemplo abaixo, as barras de comandos demonstram más e boas práticas de agrupamento de botões, e a janela demonstra uma má prática na exibição de informação não relacionada em uma única visão:

inserir a descrição da imagem aqui

  • Ajuda e documentação. Forneça meios para que informação possa ser facilmente buscada e forneça ajuda em passos concretos que possam ser facilmente seguidos. Exemplos clássicos de boas práticas são a ajuda de contexto (em que o usuário utiliza F1, uma tecla convencionada, para exibir informação a respeito do campo atualmente selecionado) e balões de informação que indicam o elemento visual a que se relacionam.

É importante mencionar que esses são alguns dos princípios de Usabilidade clássicos utilizados no desenvolvimento de software (há outros mencionados no artigo da Wikipedia sobre avaliação heurísticaen), mas que a escolha de um conjunto de heurísticas definitivo é passível de discussão, principalmente porque sua aplicabilidade depende fortemente do domínio da aplicação.

Frontend Do Zero Ao Profissional

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert

Em jogos digitais (video games), por exemplo, certos aspectos de Usabilidade são menos importantes ou são intencionalmente não atendidos porque se almeja produzir a Experiência de Usuário (UX) de diversão. Por exemplo, certos elementos de jogos são construídos para serem intencionalmente mais difíceis de serem executados ou lembrados, ainda que outros aspectos como feedback permaneçam importantes. Assim, no caso de produtos para entretenimento existem heurísticas mais famosas, baseadas nas heurísticas utilitárias classicas mas extendendo-as para inclusão de aspectos hedonicos (não utilitários).

Um primeiro exemplo é a taxonomia do modelo MDA (de Model-Design-Aesthetics) que inclui os seguintes princípios relacionados a estática da diversão:

  • Sensação. Jogo como prazer sensorial.
  • Fantasia. Jogo como faz-de-conta.
  • Narrativa. Jogo como drama.
  • Desafio. Jogo como curso de obstáculos.
  • Companheirismo. Jogo como arcabouço social.
  • Descoberta. Jogo como território inexplorado.
  • Expressão. Jogo como auto-descoberta.
  • Submissão. Jogo como passatempo.

E outro exemplo famoso é o modelo GameFlow, baseado na teoria da Experiência Ótima (Flow) e que inclui entre outras heurísticas as seguines (os detalhes são acessíveis no paper referenciado):

  • Concentração. Jogos devem prover estímulos de diferentes origens e que sejam significativos para a atenção do jogador. Os jogadores devem ser capazes de manter o foco na tarefa, sem ser sobrecarregados com muita informação, e não devem ser distraídos das tarefas que desejam ou precisam executar.
  • Desafio. Desafio em jogos devem estar de acordo com o nível de habilidade dos jogadores, fornecer diferentes níveis de dificuldade e prover feedback no progresso da realização dos objetivos.
  • Controle. Jogadores devem ser capazes de escolher seus objetivos e ações e se sentir responsáveis pelos resultados do jogo. Eles não devem ser capazes de cometer erros que quebrem sua imersão na fantasia e narrativa.

UX é uma sigla que significa “Experiência do Usuário” (User Experience, no original em inglês). Ela se refere a um campo de estudo dentro da Interação Humano-Computador (IHC) que busca entender como ocorrem as percepções e respostas das pessoas ao utilizarem sistemas computacionais com a intenção de criar produtos que, além de fáceis, úteis e seguros, sejam também cativantes, engajadores e divertidos de usar. Para tal ela usa conhecimento multidisciplinar, incluindo as áreas da Psicologia, do Design e da Engenharia.

A definição formal da UX (aqui em tradução livre) vem do item 2.15 da norma ISO 9241-210:2010(en) (Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems):

as percepções e respostas de uma pessoa que resultam do uso ou da antecipação do uso de um produto, sistema ou serviço

UX vs Usabilidade x UI

A Usabilidade é o conceito mais tradicional dentro da IHC. Ela trata da facilidade de uso de um produto por um utilizador humano. Por isso inclui aspectos de:

  1. Ergonomia: O indivíduo é capaz de usar o produto pelo período intencionado sem desconforto? Os controles se ajustam adequadamente aos seus membros? As informações são transmitidas de forma que sejam perceptíveis pelos seus sentidos?
  2. Segurança: O produto induz o indivíduo a erro? O produto previne que erros sejam cometidos? Erros cometidos podem ser facilmente tratados?
  3. Praticidade: Os objetivos a serem alcançados são claros? Há feedback apropriado sobre as ações realizadas? A tarefa intencionada é fácil de ser executada? Se sim, o quão efetiva é a sua execução em alcançar os objetivos?
  4. Entre outros….

Já a UX trata da relação subjetiva entre produto e utilizador. Os objetivos são criar produtos que sejam agradáveis, divertidos, motivadores, esteticamente aprazíveis, que permitam a expressão da criatividade, e que recompensem e estimulem o utilizador emocionalmente. Isso é buscado ao se considerar os fatores humanos do utilizador, além de um mero componente físico e cognitivo em um sistema.

A Usabilidade então faz parte da UX? Claro que sim. Produtos utilizáveis não serão necessariamente prazerosos, mas um produto que não é fácil de utilizar dificilmente fornecerá uma experiência agradável. Aliás, já foi demonstrado que para que as pessoas possam apreciar um produto, elas primeiro precisam obter altos níveis de eficiência, efetividade e satisfação (no sentido de atingir seus objetivos com o produto), e isso tudo requer que ao menos elas sejam capazes de entender como um produto funciona.

E a UI (User Interface), onde entra? Bom, o design de interfaces também é uma área importante, e que faz muita interseção com a usabilidade e a UX. Isso é natural, afinal a interface é o meio pelo qual o utilizador usa o sistema. Um botão precisa não somente ser funcional (isto é, fazer o que deve ser feito quando for clicado), mas também ser fácil de ser entendido como um botão (usabilidade) e auxiliar na produção de uma experiência agradável (ser bonito faz parte da UX). De qualquer forma, o design de interface se trata mais de um aspecto de construção (isto é, de engenharia), pois é a implementação que suporta o que é estudado e avaliado pela usabilidade e pela UX.

Por isso, UI e usabilidade são estágios necessários para se alcançar a UX (a fonte do gráfico é o livro Designing Pleasurable Products):

inserir a descrição da imagem aqui

Observe que essas fronteiras não são necessariamente exatas. Cada tipo de produto pode requer mais ou menos relevância em um aspecto específico. Na imagem abaixo, baseada no mesmo texto referenciado anteriormente, o eixo horizontal vai de produtos mais “sérios” (do tipo que se usa em escritórios para resolver problemas) a produtos menos “sérios” (do tipo de jogos digitais). As duas categorias inferiores são relativas ao design de interfaces e à usabilidade, pois tratam de fazer um produto que primeiramente funciona (efetividade), em segundo lugar funciona da melhor maneira possível (eficiência). A terceira categoria ainda trata da usabilidade, pois satisfação também é a ausência de desconforto e a facilidade de se utilizar. Mas já permite o caminho para a categoria superior, que é diretamente ligada às preferências, memórias e demais fatores afetivos do utilizador.

inserir a descrição da imagem aqui


Fontes principais:

Artigos relacionado a Javascript

Artigos e dicas sobre Javascript e toda sua familia: Node.js, Angular, Ionic, React e muito mais.

– GitHub lança repositórios privados gratuitos para até três colaboradores

– Como fazer testes unitários no Node.js com NodeUnit

– Epoc.js: Projeto open source em JavaScript para Sensores de Controle Cerebral

– Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

– Apollo lança a Plataforma GraphQL e extensão para VS Code

– As novidades do Angular 7

– Tecnologias que andam bombando no GitHub ultimamente

– Node.JS: Envie o gemidão do Whastzap para seus amigos via chamada telefônica

– Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

– Começando com React Native

– React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS

– React: Tutoriais Fantásticos e Onde Habitam

– React – O que é Shadow DOM

– O que são middlewares em NodeJS?

– Conhecendo os super poderes dos comandos Git e GitHub

Web

Artigos e dicas sobre desenvolvimento web que você vai gostar:

– 6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS

– UX – User Experience ou Experiência do Usuário – Princípios

– Usabilidade: Tela com muitas informações ou distribuídas em várias telas?

– Entenda as diferenças entre Wireframe, Protótipo e Mockup?

Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

– Bootstrap – O que são grids CSS

– Quando usar ANSI e quando usar UTF-8

– W3C anuncia o DRM como uma recomendação

– Crie um loading animado divertido usando CSS3

– Como descobrir se uma cor hexadecimal é escura ou clara

– Como usar tags semânticas

– O que é o GZIP e como melhora a velocidade de um site

– Como adicionar notificações (Push notification) em seu site

Siga os bons!

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.

Últimos posts por Ramos de Souza Janones (exibir todos)




Frontend Do Zero Ao Profissional