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%

sexta-feira, março 04, 2011

Capacidades Cerebrais

Segundo Susan Weinschenk, existem três tipos de pedidos que podemos fazer a uma pessoa: cognitivo (pensar e lembrar), visual e motor. Cada um destes pedidos corresponde a uma capacidade cerebral. Uma das coisas que temos de ter em conta é que...

Nem todas as capacidades são iguais

Cada uma das capacidades usa diferentes quantidades de recursos mentais. Por exemplo, se pedirmos a uma pessoa que olhe para algo ou encontre algo num ecrã (visual) ela estará a usar mais recursos do que se estivesse a carregar num botão ou a mover o rato (motor). Essa pessoa utilizará ainda mais recursos se tiver que pensar, lembrar-se de algo ou fazer um cálculo mental (cognitivo). Assim, e no sentido da diminuição das quantidades de recursos mentais utilizadas, temos: cognitivo, visual e motor.


Tudo se resume a soluções de compromisso

Do ponto de vista dos fatores humanos, quando se desenha um produto, aplicação ou website, enfrentam-se sempre soluções de compromisso. Se tiver de adicionar mais cliques mas, ao fazê-lo, o utilizador não se esforçar a pensar ou recordar, pode valer a pena. Clicar (motor) usa menos recursos mentais do que pensar (cognitivo). Susan conta ainda um caso em que, numa investigação, os voluntários tinham de dar mais de 10 cliques para executarem uma tarefa. Quando acabavam, sorriam e diziam "Foi fácil!" porque cada passo era lógico e dava-lhes o que estavam à espera. Não precisavam de pensar.

Reduzir os recursos mentais para tornar a tarefa fácil

A maior parte das vezes, quando se consideram os recursos mentais na etapa de design, procura-se reduzir esses recursos (especialmente os cognitivos e visuais) para tornar o produto mais fácil de usar.

Aumentar os recursos mentais para chamar a atenção

Às vezes é necessário aumentar os recursos mentais. Por exemplo, para captar a atenção de alguém, pode-se colocar mais informação visual (imagens, animações, vídeos) e, desta forma, aumentar os recursos mentais visuais do produto.

quinta-feira, fevereiro 17, 2011

Acessibilidade dos PDF

Ontem estive numa reunião onde, entre outras coisas, se falou na acessibilidade de documentos no formato PDF. Se virmos bem, a maior parte dos sítios Web, para além das páginas HTML, terá também bastantes PDF. Isto é ainda mais verdade dentro do contexto a que estou habituado a trabalhar: sítios Web de Instituições de Ensino Superior. Por este motivo, é de extrema importância que os produtores de informação criem PDF acessíveis. A W3C produziu um documento ainda em rascunho mas que pode ajudar nesta tarefa denominado "PDF Techniques for Web Content Accessibility Guidelines 1.0 and 2.0".

Apresento agora a minha tradução para esta lista de verificação.

1ª Linha de orientação WCAG: Apresentação

Verificação 1: Assegurar que o texto do documento é acessível
  • Verificação 1.1: Apresentar os carateres e as palavras na ordem de leitura dentro da página
  • Verificação 1.2: Separar explicitamente as palavras com carateres de espaço
  • Verificação 1.3: Usar convenientemente a hifenização (se a palavra "cor-de-rosa" for hifenizada na última sílaba ("cor-de-ro-sa"), o último hífen deverá ser um caráter Unicode com o valor U+00AD ou o decimal 173, ou seja, só deverá aparecer quando a palavra tiver de ser quebrada no fim de uma linha; os dois primeiros terão sempre de aparecer)
  • Verificação 1.4: Usar o atributo ActualText (quando, por exemplo, a primeira letra de um parágrafo é um gráfico, como acontece muitas vezes nas iluminuras, deverá haver sempre um equivalente textual)
  • Verificação 1.5: Assegurar que todos os códigos de carateres utilizados se convertem convenientemente em Unicode (os carateres Unicode são um padrão não proprietário aceite internacionalmente)
Verificação 2: Providenciar alternativas textuais para imagens e gráficos

Verificação 3: Providenciar agrupamento estrutural
  • Verificação 3.1: Providenciar uma estrutura lógica
  • Verificação 3.2: Marcar os artefactos no conteúdo com /Artifact (exemplos de artefactos: margens de corte, nome do ficheiro que contém o documento, paginações, linhas por cima das notas de rodapé, etc.; isto é para que os utilizadores controlem como e quando devem ser incluídos no documento)
Verificação 4: Desenhar para o controlo personalizado da cor e do contraste
  • Verificação 4.1: Evitar desenhar retângulos atrás do texto que não sejam elementos do fundo da página
  • Verificação 4.2: Não deve ser colocado texto por cima das imagens
  • Verificação 4.3: Evitar o uso da cor como único meio de transmitir informação

Verificação 5: Identificar a linguagem natural de todo o texto no documento
  • Verificação 5.1: Identificar a linguagem primária do documento
  • Verificação 5.2: Identificar quando a linguagem muda na página
2ª Linha de orientação WCAG: Interação

Verificação 6: Navegação dentro do documento
  • Verificação 6.1: Utilizar marcações para providenciar auxílio à navegação no documento
  • Verificação 6.2: Usar ligações no documento
  • Verificação 6.3: Se a ligação em si não descrever o destino de forma clara e precisa, providenciar um atributo Alt
  • Verificação 6.4: Providenciar um nome claro e descritivo para todos os campos de formulários
3ª Linha de orientação WCAG: Compreensão

Verificação 7: Providenciar as expansões dos acrónimos e das abreviaturas

4ª Linha de orientação WCAG: Considerações tecnológicas 

Verificação 8: Fazer com que as proteções do documento permitam o acesso (permitir que os conteúdos possam ser acedidos por aplicações de suporte, como os leitores de ecrã).

sexta-feira, fevereiro 11, 2011

Acessibilidade e Usabilidade Física

A acessibilidade e usabilidade Web só faz sentido se os utilizadores com necessidades específicas puderem fisicamente aceder e usar os computadores. Se por vezes é difícil, por questões monetárias, possuir em casa o equipamento necessário, será uma expectativa válida que, nas instituições públicas, esses equipamentos estejam disponíveis. No que concerne a estabelecimentos de ensino públicos, foi feito algum investimento nas escolas básicas e secundárias para acolherem estudantes com necessidades educativas especiais. Ao nível do ensino superior ainda há bastante trabalho a ser feito. No entanto, é um trabalho necessário já que não devem ser as condições de estudo a limitar de alguma forma a progressão académica deste tipo de estudantes.

Eu trabalho no Centro de Informática Prof. Correia de Araújo da Faculdade de Engenharia da Universidade do Porto. No ano de 2010, eu e o meu colega R. T. tivemos a incumbência de montar um posto de computador para utilizadores com necessidades específicas. Começámos por falar com alguns representantes de material informático e logo chegámos à conclusão que não ia ser uma solução barata. Como o orçamento disponível não era muito, tentámos outra via... a do empréstimo. Ao nível central da Universidade do Porto, havia algum equipamento que podia ser cedido e que foi utilizado.

Eis a configuração final disponibilizada aos utilizadores.


Leitores de Ecrã
Destinam-se a converter em texto audível toda a informação apresentada no ecrã.
Amplificadores de Ecrã
Alguns destes programas fazem parte do sistema operativo e têm como função ampliarem os conteúdos do ecrã para que estes possam ser mais facilmente utilizados por pessoas com baixa visão. 
  • Virtual Magnifier
  • Magnifier
Teclado Virtual
Para aqueles utilizadores com dificuldades motoras, pode ser mais fácil utilizar um teclado virtual apresentado no ambiente de trabalho e que possa ser clicado com o rato. Este programa também faz parte do sistema operativo.
  • On-screen Keyboard
Rato Virtual Facial (sem uso de mãos)
Este projeto da Fundação Vodafone Espanha e da Fundação para a Integração de Incapacidades em Rede foi aparentemente descontinuado. No entanto, o programa disponível permite que o utilizador controle o rato com movimentos da cabeça.
Rato Adaptado (track ball)
Já comentei este rato. Este tipo de ratos pode ser utilizado por pessoas com mobilidade reduzida no braço mas que possam fazer movimentos com os dedos. Em teoria possuem uma posição de operação mais confortável do que os ratos normais e, para profissionais, pode ajudar a minimizar lesões provocadas por gestos repetitivos, na medida em que o braço e o punho não são necessários para operá-los.
Linha Braille
Este interface permite que um cego leia o conteúdo do ecrã em Braille.
Câmara Web
A câmara Web, para além de proporcionar o reconhecimento facial, pode ser utilizado por utilizadores surdos para se comunicarem com utilizadores remotos através de linguagem gestual.
Ainda existe um longo caminho a percorrer, mas os primeiros passos é que são importantes, na medida em que despertam consciências.

Shallow

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