quarta-feira, maio 23, 2012

Princípios Essenciais do Design de Interação: (5/5) - Retorno

Transmita aos utilizadores a aceitação de uma interação e proporcione informação sobre:
  • Localização
  • Estado ou progresso
  • Eventos futuros ou possibilidades
  • Completude ou fecho.
É importante que isto se faça sem interromper a experiência ou as ações do utilizador. O retorno deve complementar a experiência e não complicá-la.

Cada interação deve produzir uma reação percetível e compreensível. Faça saber que os comandos dos utilizadores foram compreendidos e executados.

Devem validar-se as interações. Falhar na validação das interações pode levar a repetições desnecessárias e a possíveis erros ou enganos.

Deve-se, por exemplo, permitir fazer undo para reverter as escolhas ou corrigir enganos. Os enganos são escolhas incorretas mas nem sempre significam erros para o sistema em causa e, por isso, podem não ser percebidos como tal.

Adaptado de Adobe TV: Classroom: Five Essential Principles of Interaction Design.

quinta-feira, maio 10, 2012

Princípios Essenciais do Design de Interação (4/5) - Previsibilidade

Para minimizar a confusão e a frustração dos utilizadores, deve-se comunicar previamente (implícita ou explicitamente) o que acontece depois de uma interação.

O comportamento do visitante pode revelar se pode ou não prever precisamente o que vai acontecer a seguir a uma interação:

  • Quando não sabem o que podem fazer ou o que irá acontecer, irão tentar interagir com qualquer coisa que pareça clicável;
  • Quando sabem o que podem fazer e sabem o que irá acontecer, irão interagir apenas com o que é necessário para completarem a tarefa e atingirem o seu objetivo.
Os padrões diferem quando se trata de um jogo, exploração ou cumprir uma tarefa. Por exemplo, no caso de um jogo, ser previsível pode não ser uma coisa boa.

Podem usar-se pré-visualizações para estipular as expetativas e definir as restrições ao nível das interações novas ou complexas. Pode, por exemplo, mostrar-se o que é possível ser feito na aplicação enquanto a interface carrega ou apresentar uma vista de alto nível do sistema organizacional ou estrutura.

As etiquetas, instruções, ícones e imagens devem ser usados para estipular as expetativas:
  • Do que se pode fazer;
  • Do que vai acontecer;
  • Para onde irá o visitante;
  • Como o interface irá responder.
A previsibilidade melhora assim a experiência do utilizador, na medida em que aquilo que este aprendeu previamente pode ser aplicado em futuras interações.
Adaptado de Adobe TV: Classroom: Five Essential Principles of Interaction Design.


terça-feira, outubro 25, 2011

Princípios Essenciais do Design de Interação: (3/5) - Apreensibilidade

Os conteúdos e as interações devem fazer sentido, sem serem ambíguos. Só assim se proporciona ao utilizador o rápido entendimento das páginas e uma boa repetição da sua experiência adquirida (lembremo-nos que os utilizadores empregam toda a experiência que têm de outros sítios Web quando visitam um novo sítio; gorar essa experiência é o mesmo que proporcionar um sentimento de frustração ao utilizador).

As interações com as páginas Web deverão ser fáceis de aprender e fáceis de lembrar. Idealmente, após utilizarmos algumas vezes uma dada página Web, deveríamos aprender, sem esforço, o seu modo de funcionamento e lembrarmo-nos desses conhecimentos adquiridos numa futura visita.

As teorias de aprendizagem da psicologia podem ajudar-nos a perceber melhor como as pessoas apreendem e retêm os conhecimentos e as capacidades.

Condicionamento operante

Obter uma recompensa ou um retorno positivo aumenta a probabilidade das pessoas optarem novamente pelo mesmo comportamento. Obter um "castigo" ou fazer um erro diminui a probabilidade das pessoas repetirem o comportamento.

Aprendizagem por observação

Consiste em ver outra pessoa a demonstrar o comportamento e depois imitar ou repetir o que foi visto. Os tutoriais em vídeo são um bom exemplo da aprendizagem por observação.

A apreensibilidade é muitas vezes equacionada com a "facilidade de utilização" mas mesmo interfaces que são fáceis de usar podem requerer alguma aprendizagem. Quanto mais usarmos um interface (e quanto mais o apreendemos) mais fácil se tornará. A prática conduz a hábitos e uma longa prática conduz a automatismos.

Intuitivo significa verdadeiramente aprender com uma tentativa.

As pessoas aprendem os seus comportamentos de várias formas: experiências na Web, dispositivos e mesmo de lugares e objetos da realidade.

Dá-se uma transferência da aprendizagem quando pegamos nas nossas experiências pessoais e tentamos aplicá-las a situações semelhantes. Um exemplo desta transferência da aprendizagem são as ações percecionadas: quando as ações de objetos reais são representadas metaforicamente ou analogamente no seu formato digital (exemplo: botões de formulários).

Numa frase, a apreensibilidade significa tomar vantagem da experiência do utilizador.

Adaptado de Adobe TV: Classroom: Five Essential Principles of Interaction Design.

terça-feira, setembro 27, 2011

Ilusões de ótica

Hoje tenho duas imagens que com toda a certeza irão dar-vos a "volta ao miolo".

A primeira chama-se "Ilusão de Sombra". Os quadrados marcados com "A" e "B" são da mesma cor. Palavra!


Explicação:

O sistema visual precisa determinar a cor dos objetos no mundo. Neste caso, o problema é determinar os tons de cinza do xadrez no chão. Medir apenas a luz que vem de uma superfície (a luminosidade) não é suficiente: uma sombra projetada diminui a luminosidade de uma superfície, de modo que uma superfície branca na sombra pode refletir menos luz que uma superfície escura em plena luz. O sistema visual usa vários truques para determinar onde as sombras são e como compensá-las, a fim de determinar a cor cinza que pertence à superfície.
O primeiro truque é baseado no contraste local. Na sombra ou não, um quadrado que é mais claro que os seus quadrados vizinhos é, provavelmente, mais claro que a média e vice-versa. Na figura, o quadrado mais claro na sombra é mais escuro do que os quadrados adjacentes. Assim, mesmo que o quadrado seja fisicamente escuro, ele é mais claro quando comparado com seus vizinhos. Os quadrados escuros fora da sombra, pelo contrário, são cercados por quadrados mais claros, por isso parecem mais escuros, por comparação.
Um segundo truque é baseado no facto de que as sombras têm, frequentemente, contornos suaves, enquanto as fronteiras da pintura (como os quadrados) muitas vezes têm bordas contrastantes. O sistema visual tende a ignorar as mudanças graduais do nível de luz, para que possa determinar a cor das superfícies, sem ser enganado pelas sombras. Nesta figura, a sombra parece uma sombra porque é difusa e porque a projeção da sombra do objeto é visível.
O "grau de pintura" dos quadrados é ajudado pela forma das junções em X, formadas pelos quatro quadrados adjacentes. Este tipo de junção é geralmente um sinal de que todas as arestas devem ser interpretadas como mudanças na cor da superfície e não em termos de sombras ou iluminação.
Tal como acontece com muitas das chamadas ilusões, este efeito demonstra
realmente o sucesso ao invés do fracasso do sistema visual. O sistema visual não é muito bom a medir a luz física, mas isso não é o seu propósito. A tarefa importante é quebrar as informações da imagem em componentes significativos e, assim, perceber a natureza dos objetos em exibição.

A segunda ilusão chama-se "Espirais Azuis e Verdes" (obrigado FJ por esta dica). De facto, aquilo que parece ser verde numa espiral e azul na outra, são uma e a mesma cor. Palavra!




Explicação:


As cores circundantes afetam a nossa perceção da cor, principalmente se as cores adjacentes forem opostas da primeira no círculo cromático.

sexta-feira, setembro 09, 2011

Princípios Essenciais do Design de Interação: (2/5) - Visibilidade

A maior parte das interfaces são inerentemente visuais, por isso, há que garantir que as pessoas sabem quando e onde podem interagir com elas.

Não se pode convidar à interação e envolver os visitantes com o design se estes não estiverem conscientes de que a oportunidade de interagir existe de facto. Daqui se conclui que as interações escondidas diminuem a usabilidade e a eficiência. Não faça os seus visitantes e clientes procurarem por interações quando precisam de completar as suas tarefas.

A descoberta de funcionalidades não deve envolver a sorte ou o acaso. As pessoas devem ser capazes de presumir, deduzir ou inferir que existe uma oportunidade de interação. Também são de evitar as situações em que os visitantes acreditam falsamente que chegaram ao fim do conteúdo ou da experiência.

Os Rollover/Mouseovers funcionam melhor quando as pessoas se apercebem de que estes estão presentes ou assumem que estão disponíveis. Deve-se assinalar a disponibilidade da interação com indicadores visuais que convidam as pessoas a clicar ou tocar: botões, ícones, imagens, textura aparente ou estilos de texto.

Os Jogos e os "Ovos da Páscoa" são situações especiais em que existem exceções à regra da visibilidade.

Adaptado de Adobe TV: Classroom: Five Essential Principles of Interaction Design.

sexta-feira, agosto 19, 2011

Princípios Essenciais do Design de Interação: (1/5) - Consistência

Depois de um interregno mais ou menos prolongado (sem nenhuma causa específica), volto à temática da acessibilidade e usabilidade Web, mais concretamente para vos dar a conhecer os cinco princípios essenciais do design de interação. Mas, antes de passarmos aos princípios em si, convém dar previamente uma definição para design de interação.
"O design de interação define a estrutura e o comportamento dos sistemas interativos. Os designers de interação procuram criar relações significativas entre as pessoas e os produtos e/ou serviços que utilizam, desde os computadores, passando pelos telemóveis, eletrodomésticos, etc." - Interaction Design Association (IXDA)
Como a Web é assente fundamentalmente na interação entre os utilizadores e as páginas que visitam, faz todo o sentido explorarmos estes princípios essenciais. Comecemos pelo primeiro.

Consistência

Este é um princípio de ouro.
A consistência deve estar presente em vários aspetos de uma página Web.
  • Se se trata de uma página corporativa ou institucional, é de esperar que o ambiente reflita a imagem dessa corporação ou instituição no que concerne por exemplo às cores utilizadas, logótipos ou tipos de letra.
  • O esqueleto das páginas e o posicionamento dos diversos elementos deve ser o mesmo em todo o site. Assim, o utilizador tem a noção exata de onde as coisas estão e não precisa de se esforçar para as encontrar.
  • Devem ser adotados padrões normais para a colocação dos elementos. Por exemplo, é comum verem-se os menus de navegação do lado esquerdo1 da página ou, sobre a horizontal, na parte de cima das páginas. Os logótipos das corporações ou instituições costumam situar-se no canto superior esquerdo1 das páginas. Ir contra este padrão de design pode ter consequências negativas na medida em que o utilizador poderá sentir-se pouco à vontade com a nova localização dos elementos.
  • Comandos como botões ou barras de scroll não devem ter um aspecto ou modo de funcionamento muito diferente do que estamos habituados nos sistemas operativos.
  • Os componentes com diferentes comportamentos deverão ter aparências distintas. É sempre um mau princípio utilizar ícones diferentes para ações similares ou ícones iguais para ações diferentes.
Em jeito de súmula, as diferenças podem causar distrações. Quando os utilizadores se perguntam por que é que um site está daquela forma ou por que é que é diferente, estão focados no interface e não no conteúdo ou na experiência. Mudanças na aparência e no comportamento podem atrair atenção indesejada. A consistência passa despercebida e ajuda o utilizador a concentrar-se na informação disponibilizada e/ou nas tarefas que tem para cumprir.

1 Estas afirmações são verdadeiras se o utilizador lê da esquerda para a direita e de cima para baixo como acontece com a maior parte dos países do ocidente. O lado direito pode ter mais visibilidade para alguém que está habituado a ler da direita para a esquerda, como acontece nos países árabes.

Adaptado de Adobe TV: Classroom: Five Essential Principles of Interaction Design.

quinta-feira, março 31, 2011

A importância dos ícones

Recentemente a Nokia anunciou alguns "melhoramentos" para o seu sistema operativo Symbian^3. Assim, proponho-me discutir o impacto destes "melhoramentos" no menu principal.

Na Figura 1, poderá ver o menu do Symbian S60v5 à esquerda e do novo Symbian^3 à direita.

Figura 1

Pode dizer-se que os designers preferiram diminuir um pouco a altura da barra de navegação (em baixo) e da barra de estado (em cima) para dar mais espaço ao conteúdo central. É uma mudança benéfica porque permite afastar os ícones uns dos outros e, com isso, fazer com que a utilização do ecrã sensível ao toque seja mais isenta de erros de seleção. Mas os benefícios param por aqui. Atente agora na Figura 2.

Figura 2

Nesta versão dos dois menus vemos apenas as silhuetas dos ícones, desprezando-se as formas internas e as cores. Nota-se perfeitamente o maior espaçamento entre os ícones no Symbian^3. No entanto, perdeu-se um grau de distinção. Enquanto no menu da esquerda conseguem distinguir-se praticamente todos os ícones (apenas os ícones Web e Maps têm a mesma silhueta), no menu da direita todos os ícones têm a mesma silhueta. Existe ainda mais um entrave à distinção dos ícones. Atente na Figura 3.

Figura 3

Este é o aspeto dos menus para quem tiver deuteranopia (tipo de cegueira às cores mais comum). Torna-se ainda mais evidente a escolha de cores similares para ícones que fazem coisas diferentes. No caso concreto do Symbian^3, as cores aparecem associadas a linhas de ícones, como se isso fosse uma distinção importante. No menu da esquerda a cor também não está associada à função dos ícones mas contribui para a distinção entre eles, na medida em que os torna visualmente diferentes, mesmo para pessoas com algum tipo de cegueira às cores. Atente, finalmente, na Figura 4.

Figura 4

À esquerda, temos um típico menu Android; à direita, o menu de um iPhone. No primeiro, os ícones são distinguíveis ao nível da silhueta, das cores e das formas internas; no segundo, os ícones são distinguíveis apenas ao nível das cores e das formas internas.

Nem sempre as mudanças são para melhor. A lavagem de cara do Symbian^3 foi feita com uma mão enlameada, pelo menos no que diz respeito à acessibilidade e usabilidade dos ícones do menu.

É evidente que, nos sistemas operativos que abordei, todos os ícones têm um texto associado que explica de uma forma sucinta aquilo que fazem. No entanto, para um vislumbre e seleção rápidos dos elementos do ecrã, só isto não chega. É necessário tornar os ícones o mais distinguíveis possível nas suas três componentes: silhueta, cor e formas internas.

Em jeito de conclusão, apresento uma tabela que resume tudo aquilo que foi dito sob a forma de pontuação.


Distinção entre ícones
S. O.SilhuetaCoresFormasNota Final
Symbian S60v5111100%
Symbian^300133%
Android111100%
iPhone01167%

Shallow

Tell me somethin', girl Are you happy in this modern world? Or do you need more? Is there somethin' else you're searchin...