(o ênfase deste redesign foi na estrutura do site, na re-ordenação dos seus elementos, não tanto na parte gráfica)

Esta é a versão original da homepage do site:

(o redesign está sujeito a alterações)

Os principais pontos que saliento do uso do JAWS no site da Ikea são:

* desde logo, a linguagem utilizada dificulta o utilizador: todo o site é falado num misto entre inglês e um inglês aportuguesado (alguns elementos chegam mesmo a ser lidos em inglês);

* muitas imagens não têm legenda (as que têm, têm uma legenda curta, o que facilita o uso, diz apenas o essencial);

* a maior parte das páginas detecta e descreve os cabeçalhos;

* o software detecta as listas, quando as há, mas algumas vezes não as descreve;

* também detecta os gráficos, acompanhados da sua descrição;

* as tabelas são lidas pelo software correctamente;

* detecta os parágrafos, os botões, as caixas para editar texto (no preenchimento de formulário) e as checkboxes (também no preenchimento do formulário, são lidas todas as caixas a preencher).

Em conclusão, foram detectados alguns erros na acessibilidade do site, mas a análise seria mais completa e fundamentada se tivesse tido tempo para aprender o software (usei a versão de demonstração do JAWS 11.0 por 40 minutos). No entanto, o erro principal tem a ver com a linguagem usada pelo leitor para ler o site (inglês/português) o que dificulta, desde logo, o seu acesso e compreensão.

A acessibilidade tem de ir ao encontro destas necessidades: visual (pessoas cegas, daltónicas ou com má visão), de mobilidade (pessoas com distrofia muscular, paralisia cerebral, doença de Parkinson e outras doenças que afectem a mobilidade), auditiva (surdez e má audição), seizures (pessoas com epilepsia) e cognitiva/intelectual (pessoas com doenças de desenvolvimento, dislexia e outras deficiências cognitivas). E não só: Gregg Vanderheiden (no artigo “Anywhre, anytime (+anyone) Access to the Next generation WWW”) diz que os sistemas também devem ser utilizáveis para as pessoas que evitam usar tecnologias ou que não conseguem usar essas tecnologias, e para os idosos, que representam 50% da população. Por outro lado, também sublinha a importância da usabilidade para os “power users”, com muita experiência e conhecimentos tecnológicos. Chega a constatar que muitos desses “power users” são muitas vezes pessoas com deficiências (visuais, por exemplo).

O autor defende que se criarmos sistemas que possam ser usados por nós em qualquer ambiente (seja em casa, no carro, no trabalho, na rua; quer estejamos sob stress ou distraídos; fáceis de utilizar) criámos sistemas acessíveis para quase todos com uma deficiência física ou sensorial. Diz que os problemas de acessibilidade em CNE serão resolvidos se se solucionarem os problemas levantados pela multiplicidade de ambientes em que todos nos encontramos (como referido acima). Dá alguns exemplos: quando criamos interfaces que resultem em ambientes barulhentos ou que sirvam para pessoas que tenham de ouvir outra coisa enquanto ouvem a interface, então criámos interfaces para pessoas com deficiências auditivas; ou quando criamos interfaces que funcionem para pessoas que ao mesmo tempo do uso da interface estão a conduzir (por exemplo, tarefa que torna perigoso olhar para o interface) criámos interfaces que podem ser usados por pessoas cegas.

Então, as interfaces têm de ser variadas (de acordo com a multiplicidade de tarefas que efectuamos), deixar o utilizador escolher o modo mais apropriado para receber a interface (depende do ambiente, da situação, do utilizador), ser flexíveis e fáceis de aprender.

Por isso, não se devem construir websites específicos para cidadãos com necessidades especiais (CNE), ou simplificar a versão normal de determinado site. Deve haver um único site que possa ser usado por todos.

Vanderheiden conclui o seu artigo dizendo que é possível criar interfaces que se comecem a aproximar do objectivo Anytime/Anywhere/Anyone. Para isso surgiram várias iniciativas que promovem a acessibilidade na Web.

A 1997, o World Wide Web Consortium (W3C), organização mundial para recomendações sobre a Web, lançou a Web Accessibility Initiative (WAI), que, tal como o nome indica, promove a acessibilidade Web. Nesse âmbito foi criado o Web Content Accessibility Guidelines (WCAG 1.0), um guia bem aceite sobre como se criar sites acessíveis.

Este documento apresenta 14 directrizes sobre acessibilidade na Web:

• Dar alternativas equivalentes ao conteúdo visual e sonoro (para pessoas com incapacidades visuais ou auditivas, nos sites deve elementos equivalentes, que preencham a mesma função, da imagem e do áudio. Por exemplo, uma descrição auditiva (para pessoas cegas) de uma apresentação visual; ou um vídeo com alguém a explicar em língua gestual o equivalente a um texto).
• Não recorrer apenas à cor (para pessoas daltónicas ou que não têm um dispositivo que recebe a cores). Texto e gráficos devem ser perceptíveis mesmo vistos sem cor.
• Usar anotações e folhas de estilo correctamente.
• Indicar a linguagem usada. Os sintetizadores de fala e os dispositivos de Braille devem ser automaticamente alterados sempre que há mudanças na linguagem do site.
• Deve-se fazer um uso correcto das tabelas: usam-se para dispor informação, e não para estruturar a página Web.
• Fazer com que páginas com novas tecnologias funcionem correctamente. Para isso, ao conceber novas tecnologias, deve-se fazer com que estas funcionem com browsers antigos.
• Assegurar o controlo do utilizador a mudanças no conteúdo temporal. Fazer com que elementos da página, em movimento, a piscar, ou a auto-actualizar, podem ser parados (já que os leitores de ecrã não lêem texto em movimento).
• Assegurar acessibilidade directa a interfaces do utilizador integradas.
• Fazer design independentemente do dispositivo. Assim, os utilizadores podem aceder à página com o rato, teclado, voz, ou outro.
• Usar soluções de compatibilidade, para que os sites funcionem mesmo com browsers antigos.
• Usar as directrizes e tecnologias do W3C.
• Fornecer o contexto e orientação, para que os utilizadores percebam páginas Web complexas.
• Disponibilizar mecanismos de navegação claros e consistentes (informação de orientação, barras de navegação, mapa do site…).
• Assegurar que os documentos são claros e simples (layout da página consistente, gráficos perceptíveis, linguagem perceptível…).

Cada uma destas directivas cumpre três níveis de prioridade…

• Prioridade 1 – pontos que os criadores de conteúdos Web têm de cumprir. Senão, impossibilitam a acessibilidade a alguns grupos de utilizadores.
• Prioridade 2 – pontos que os criadores de conteúdos Web devem cumprir. Senão, dificultam a acessibilidade a alguns grupos de utilizadores.
• Prioridade 3 – pontos que os criadores de conteúdos Web podem cumprir. Senão, criam algumas dificuldades a alguns grupos de utilizadores.

… e três níveis de conformidade:

• Níveis de conformidade “A” – foram satisfeitos todos os pontos de prioridade 1
• Nível de conformidade “Duplo A” – foram satisfeitos todos os pontos de prioridade 1 e 2
• Nível de conformidade “Triplo A” – foram satisfeitos todos os pontos de prioridade 1, 2 e 3

Na prioridade 1, dos três testes aplicados, todos deram erro:

• Para 10 elementos script na página, só existem 2 no script. Os scripts incluídos no documento devem ter equivalentes no script que descrevam a sua acção ou que substituam a função do elemento script.
• Quanto ao texto alternativo nas imagens, verificou-se que, para 32 imagens, 2 não têm legenda
• Há 11 links que são activados unicamente através de scripts. O conteúdo do atributo “href” nos links deve indicar um recurso válido, ou seja, uma direcção (URL) à qual se pode aceder mesmo quando não se consegue aceder aos scripts

Já nos testes de prioridade 2, houve onze erros (em catorze testes):

• Usam-se manipuladores de eventos que só podem ser accionados com o rato. Mas as acções devem ser desempenhadas com qualquer dispositivo, já que nem todos os utilizadores podem usar o rato
• Usam-se medidas absolutas (em vez de relativas, como devia ser feito) nas folhas de estilo, o que impede os utilizadores de ampliar ou reduzir o tamanho dos conteúdos da página (dificulta o acesso a pessoas com visão reduzida ou outro tipo de deficiência)
• O código das folhas de estilo tem erros de sintaxe
• Usam-se estilos mas também tabelas para controlar a apresentação da página
• Usam-se 58 atributos obsoletos em HTML 4.01, construções descontinuadas e substituídas por outras, dado o uso de CSS. Isto revela falta de actualização pelo criador do site, e pode criar problemas de acessibilidade
• Usam-se 30 atributos para controlar a apresentação da página. Em vez destes atributos de linguagem, deve-se usar folhas de estilo para controlar a ordem dos elementos no site
• Usam-se três tabelas para formatar as páginas. Isto não deve acontecer
• O código tem 109 erros de validação
• Há dois controlos de formulário e nenhuma etiqueta. Deve-se associar os rótulos aos respectivos controlos. Isto é muito importante utilizadores que usem leitores de ecrã
• Há 2 links com o mesmo texto que têm destinos diferentes
• Não se usa nenhum cabeçalho. São um importante elemento facilitador de navegação para todos os que usam tecnologias de apoio
• Não se usam elementos obsoletos de HTML 4.01 (correcto)
• Há uma declaração do tipo de documento (indica a sintaxe/gramática usada no código da página e permite verificar a correcta aplicação desse código) (correcto)
• Não se usam elementos HTML para controlar a apresentação da página. É correcto, já que para controlar o estilo da página deve-se usar CSS (correcto)

Nos testes de prioridade 3, todos os quatro testes deram errado:

• Não está especificado o idioma principal
• Há três tabelas e algumas contêm resumo sem serem tabelas de dados. Só em tabelas de dados se pede o recurso ao atributo “summary”
• Há um controlo vazio não tem um texto por omissão
• Há 66 links e 7 são adjacentes a outros links, mas não estão separados entre si com caracteres imprimíveis

Dentro do nível 2 de prioridade, há três obstáculos à acessibilidade:

• Recomenda-se o uso de tecnologias do W3C, porque incorporam questões de acessibilidade desde a sua concepção
• A página tem um título muito extenso. O título deve ser claro, descritivo e conciso
• Há uma média de 63 palavras em cada bloco de informação. Deve dividir estes grandes blocos em grupos mais geríveis e apropriados

No nível de prioridade 3, quanto aos ruídos da acessibilidade, há três erros e um elemento correcto:

• Usam-se oito atributos “Accesskey”. Os atalhos de teclado são muito importantes para a acessibilidade do site (correcto)
• 8% dos links estão organizados em listas. Deve-se usar barras de navegação para salientar e dar acesso aos mecanismos de navegação, e usar de elementos de notação para listas (<ul>…<ol>) para estruturar esses mecanismos, com o uso de CSS para dar estilo
• Não se proporciona informação sobre os documentos relacionados
• Há três tabelas e nenhuma tem células de cabeçalhos. Estas (as linhas e as colunas) devem estar marcadas

Ao longo deste post, ao mesmo tempo que são explicados os dois métodos anteriormente referidos, é feita uma avaliação ao site Ikea.pt. (não foi possível fazer os testes com utilizadores, porque não estava disponível número suficiente de pessoas, e com determinadas características, para o fazer)

A avaliação heurística é feita de acordo com a apreciação de um especialista. Foi introduzida por Nielsen e Molich em 1990, e revista por Lavery em 1996. Este método é guiado por dez princípios. Cada princípio tem de responder a três perguntas, que são:

a)      Conformance question: o que deve fazer o sistema para satisfazer o princípio

b)     Evidence conformance: comportamentos que indiquem a satisfação ou não do princípio

c)      Motivation: problemas de usabilidade que o princípio tenta evitar

Os dez princípios são (e a respectiva análise no âmbito do site Ikea.pt):

1-      Visibilidade do estado do sistema

a) Os utilizadores são informados do estado do sistema, com feedback apropriado dentro de um prazo de tempo razoável? 

b) Analisar tarefas individuais 

c) O feedback permite ao utilizador acompanhar o progresso de determinada tarefa e reduz a ansiedade

No site, é dado feedback ao utilizador: quando se tenta adicionar o mapa da loja Ikea ao sistema de navegação GPS, aparece-nos logo informação sobre se queremos abrir ou guardar o ficheiro, ou cancelar a operação; quando o site faz o carregamento de determinada imagem ou conteúdo, é-nos indicada a percentagem desse carregamento, o que diminui a ansiedade do utilizador; de uma forma geral, em todas as páginas do site, está um botão com o nome do site (“Ikea,  Bem Vindo!”), que nos redirecciona para a homepage, indicando sempre a localização do site.

2-      Relação entre o sistema e a vida real

a) O sistema usa conceitos e linguagem familiares, usa convenções do mundo real e dispõe a informação de forma lógica e natural?

b) Análise feita através de user studies.

c) Simplifica acções através de mapeamentos, minimizando o conhecimento preciso para usar o sistema? A interacção é intuitiva, a intuição do utilizador é transportada para o sistema?

 Sim, o site usa uma linguagem familiar, como deve ser dada a categoria de produto que o site apresenta. Os botões usados no site mostram sempre identificação com o mundo real, já que a cada tarefa corresponde um ícone visual que representa essa tarefa (para ver o catálogo, carrega-se na imagem de um catálogo, etc) tornando a utilização do site bastante simples e intuitiva. Até o uso, na parte da Ajuda, de uma personagem (a Anna) faz com que o utilizador sinta que está mesmo (fisicamente) numa loja Ikea, com um funcionário da Ikea. A usabilidade torna-se assim bastante eficiente, rápida, simples e familiar.

3-      Controlo e liberdade do utilizador

a) Os utilizadores podem fazer o que querem quando querem?

b) Ver existência de determinadas funcionalidades de design, como undo e redo, saídas facilmente acessíveis

c) Muitas vezes, os utilizadores escolhem acções por engano

No site há alguns exemplos de controlo pelo utilizador: no planificador de cozinhas, existem dois botões “Anterior” e “Seguinte”. Para ir directamente para o início desse planificador tem de se ir para o botão “Introdução”, que está do lado oposto dos outros botões; para regressar ao início do site pode-se carregar no logótipo da Ikea (no canto superior esquerdo) que está em todas as páginas do site (mas nem todos os utilizadores podem saber isso).

4-      Consistência e standards

a) Na interface, os elementos de design têm sempre o mesmo significado?

b) Análise da consistência do sistema, existência de guias de estilo, consistência entre tarefas

c) A consistência minimiza a aprendizagem do utilizador para usar o sistema, fazendo generalizações pela experiência de uso do sistema ou de outros sistemas

 O site revela grande consistência entre todas as suas páginas. Todas as páginas têm a mesma estrutura (a parte superior mantém-se), usam os mesmos esquemas de cores e o mesmo tipo e tamanho de letra (com a mesma hierarquia). A lógica de utilização do site é sempre igual, o que facilita o desempenho de tarefas.

5-      Prevenção de erros

a) Um bom design pode prevenir erros?

b) Análise da adjacência de funções e opções do menu e discriminabilidade de ícones

c) Erros são a maior causa de ineficiência e frustração no uso do sistema

 No site, só ocorrem erros quando se preenchem formulários. Nesse caso, ao haver erro surge logo a mensagem (a cor vermelha, que capta logo a atenção do utilizador): “Algo correu mal”, e surge uma lista com os erros cometidos. A detecção de erros surge automaticamente aquando do mau preenchimento. Alguns campos de preenchimento já contêm regras (como regras para a password: conter entre 7 a 10 caracteres…). Quando certa página não é encontrada é dada a opção de regressar à página principal.

6-      Reconhecimento em vez de memorização

a) Os elementos de design são visíveis? O utilizador tem de memorizar informação de um sistema para outro?

b) Analisar tarefas individuais

c) Forçar os utilizadores a memorizar acções é a maior fonte de erros. O reconhecimento minimiza a aprendizagem do utilizador para usar o sistema

 A organização e a lógica do site permite ao utilizador uma interacção por reconhecimento. Devido à consistência verificada no site, o seu uso é bastante intuitivo e o utilizador não tem de memorizar comandos ou funções.

7-      Flexibilidade e eficiência no uso

a) Os métodos para executar tarefas são eficientes? Os utilizadores podem customizar a sua interacção com o sistema, através das acções frequentes ou usando atalhos?

b) Ver presença de funcionalidades de design, como atalhos de teclado, etc

c) Métodos de execução de tarefas ineficientes, causam frustração e reduzem a eficácia de utilização do sistema

No site, ao pesquisar produtos, surge uma secção no lado esquerdo, que indica as visualizações recentes (permite ao utilizador se quiser ver produtos que já visualizou, usar este atalho); existe a opção “Lista de compras” que permite ao utilizador agregar os conteúdos que mais lhe interessam, tornando o uso do sistema mais rápido e eficaz.

8-      Estética e design minimalista

a) Os diálogos na interface contêm informação irrelevante ou raramente utilizada?

b) Analisar tarefas individuais

c) Reduzir o número de acções disponíveis pode tornar a execução da acção mais fácil, quando os utilizadores não estão familiarizados com o sistema

 O site tem um design simples, mas apelativo, pelo uso de cores (amarelo forte, azul e preto, num fundo maioritariamente branco). Tem os elementos gráficos necessários para a eficaz utilização do site (botões com ícones que dizem respeito à função que desempenham). Usa o que é estritamente necessário, mas tendo em conta de que é um site de mobiliário, que aposta num design inovador e moderno.

9-      Ajuda aos utilizadores para reconhecer, diagnosticar e solucionar erros

a) As mensagens de erro são escritas em linguagem normal (sem códigos), explica-se o problema e propõe-se a solução?

b) Analisar as mensagens de erro

c) O aparecimento de erros é uma fonte de frustração, ineficácia e ineficiência no utilizador

 Sim, as mensagens de erro são facilmente visíveis (aparecem automaticamente, mal é cometido o erro) já que estão escritas a vermelho, o que as destaca para a melhor visualização do utilizador. O erro é escrito em linguagem simples, é explicado e é proposta uma solução.

10-  Ajuda e documentação

a) É facultada informação de ajuda? É fácil de escolher e está ajustada à tarefa do utilizador?

b) A documentação de ajuda que deve ser fácil de procurar, focada na tarefa e com uma lista curta de acções a desempenhar

c) Idealmente um sistema não devia precisar desta documentação. Mas, às vezes, é preciso dar ajuda quando o utilizador precisa de informação rapidamente

 Sim, o site fornece bastante ajuda. A principal ajuda é dada pela personagem Anna, que nos pergunta “Em que posso ajudar?” (ajuda a familiarizar o utilizador). Esta ajuda está bastante visível no site (parte superior em todo o site, e parte lateral esquerda na homepage). Depois, há uma parte de “Apoio ao cliente” que inclui várias formas de ajuda (disponibilidade de stock, planificação, como comprar, catálogos, lojas Ikea, perguntas frequentes, perfil Ikea, serviços Ikea…)

 Já no método empírico, dos testes com utilizadores, existem várias técnicas…

1-      Private camera conversations (pessoas descrevem, para uma câmara, a sua utilização da interface)

2-      Co-discovery (duas pessoas usam o produto, e discutem e interagem sobre o seu uso)

3-      Focus groups (debate entre várias pessoas com um moderador que lança o tema)

4-      User workshops (pessoas convidadas a conceber o produto, em conjunto com os designers)

5-      Think aloud protocols (participante fala, enquanto usa o produto, do que está a fazer)

6-      Incident diaries (questionário sobre problemas de utilização do produto)

7-      Feature checklists (pessoas apontam numa checklist as funcionalidades que utilizam)

8-      Logging use (software que detecta e grava os movimentos do utilizador)

9-      Questionaires (questionário sobre grau de satisfação com o produto)

10-  Interviews (questões sobre usabilidade directamente colocadas aos utilizadores)

11-  Valuation method (avalia importância dada a determinadas funções do produto)

… mas a técnica mais utilizada, pela sua eficácia e simplicidade, é:

12-  Field observation: observa o utilizador na interacção com o sistema no seu ambiente natural de utilização (deixando a pessoa à vontade). Escolhem-se determinadas tarefas a executar no sistema, e depois conta-se o tempo e o número de passos que cada pessoa precisou para executar a tarefa, o que resulta numa boa avaliação empírica do estado do sistema, de onde estão os problemas que interferem com a sua usabilidade. Às vezes nem há atribuição de tarefas, deixando o utilizador interagir livremente com a interface, tirando depois as devidas conclusões.

Primeiro, duas imagens iniciais da homepage do site:

Agora, pequenos pormenores que podiam ser alterados:

1 Apaguei esta barra de menus, que, na minha opinião, “enchem” demasiado o ecrã, e podem confundir o utilizador. Todos estes menus já se encontram na parte superior direita da homepage (que é a parte vista imediatamente pelo utilizador logo que entra no site), e não deviam ser repetidos. Apesar de ter apagado esses menus, mantive a repetição de duas opções: a informação da localização das lojas Ikea, e o serviço de assistência ao utilizador, a Anna. Este último, acho um modelo de interacção bastante importante, e que distingue o site, pelo que deve ser uma opção bem visível na homepage (podendo ser repetida).

 2 Nesta secção, estão os tais menus que são imediatamente vistos pelo utilizador do site, e que são os mais importantes.

3 Acho que esta opção de visionamento do catálogo da Ikea online é importante, por isso não devia estar no fundo da página. Devia ter mais destaque e estar na parte superior do site, para que mais utilizadores acedam a esta opção, mais rapida e eficazmente (já que muitas pessoas podem não chegar ao fundo da página e ficarem-se apenas pela parte superior).

Tenho ainda mais dois pormenores a corrigir no  site que analisei:

4 Aqui proponho um simples destaque cromático dos elementos. Quando se pesquisa qualquer produto no site da Ikea podemos, como se pode ver, filtrar os resultados por categoria de produto, preço e cor, e podemos ver as nossas procuras recentes. Apesar dessas opções serem extremamente fáceis de perceber, não acho que estejam bem destacadas visualmente. Esses menus deviam estar mais destacados cromaticamente, para serem mais rapidamente percepcionados e para a acção ser executada mais eficazmente.

5 Ao ver pela primeira vez esta barra de opções da imagem, não fiquei logo a perceber o que cada uma das opções representa, principalmente a 1ª e 2ª e 5ª opções. Apesar disso, quando se passa o rato sobre cada uma das opções, aparece uma pequena descrição dessa opção, e aí já se percebe perfeitamente o que cada uma faz. Acho que deviam ter trabalhado em ícones mais intuitivos, isto é, em que o utilizador perceberia instantaneamente (só de olhar para o ícone) o que ele significa. Já os símbolos + (mais) usados em cima da imagem da sala são intuitivos e estão bem conseguidos em termos de eficácia e rapidez na interacção: sabemos que ao clicar num desses símbolos vemos os pormenores do produto que ele aponta.

Quanto aos modelos conceptuais baseados em actividades, a análise do site permite ver três dos quatro modelos (dar instruções, conversar, manipular e explorar):

• Dar instruções: o site usa este modelo, em que o utilizador dá ordens ao sistema, tornando a interacção rápida e eficaz (para fazer uma encomenda online, para criar um perfil no site, imprimir mapa com a localização das lojas, adicionar esse mapa ao sistema GPS…); e também através da personagem virtual (a Anna) que permite uma navegação mais simples e familiar no site.
• Manipular: aqui usa-se o conceito de manipulação directa. As acções no site são rápidas e reversíveis, e há feedback imediato sobre essas acções (por exemplo, ao criar um perfil, se o site indica os campos obrigatórios a preencher, e se faltar algum, o utilizador é logo avisado do que está mal, sem serem apagadas as informações bem preenchidas)
• Explorar: permite ao utilizador alguma flexibilidade no uso do site, por exemplo, ao visionar o catálogo pode ir escolhendo o que quer ver, sem ser obrigado a seguir um caminho definido. O utilizador pode navegar à vontade pelo site, com a ajuda do sistema, que lhe dá as várias opções que pode tomar.

Os estilos de interacção usados pelo site são: comandos, menus, gráfico (ver produtos) e alguma entrada de dados e preenchimento de formulários (na criação de perfil no site, ao fazer encomendas, ao pedir cartão Ikea Family…).

Neste site não se verifica nenhuma metáfora de interface, em que a interface é desenhada para se assimilar a uma entidade concreta (como a metáfora do “desktop”, criada pela Macintosh nos anos 80) o que torna a aprendizagem mais fácil (logo, melhora a acessibilidade) conquistando mais utilizadores.

Penso que este site, ao nível dos modelo conceptuais, está bem feito. A confluência de modelos, de vários modos e estilos de interacção, torna o site fácil de navegar.

E para desenvolver uma interface que cumpra esses princípios da usabilidade conjugados com os princípios de design (mais subjectivos, abrem-se à criatividade e destacam a importância de uma experiência agradável, apelativa da plataforma pelo utilizador. Aqui incluem-se os conceitos de visibilidade, feedback, design lógico, mapeamento, coerência e affordances).

No desenvolvimento do design de interacção, é fundamental a escolha de um modelo conceptual, que dá uma estrutura, planeia a interacção.

Primeiro deve-se ter uma noção do espaço do problema: saber qual é o problema de determinado produto, ver se as soluções propostas são de facto úteis, se vão de encontro às expectativas dos utilizadores. Desta compreensão, parte-se para o espaço design. Ao saber o problema e as expectativas já se pode ter uma ideia do tipo de interface, do tipo de funcionalidades a utilizar no desenvolvimento do produto.

Ao escolher um modelo conceptual, determina-se o modo como o utilizador vai ver e compreender o produto.

Há modelos conceptuais baseados em actividades:

• Dando instruções: os utilizadores dão uma ordem ao sistema para executar uma tarefa – interacção rápida e eficaz
• Conversando: permite interacção com o sistema de um modo familiar, para utilizadores pouco experientes
• Manipulando: aqui, estão os conceitos WYSIWYG (What you see is what you get) e manipulação directa (DM). Este último, foi inventado por Shneiderman, e permite ao utilizador, pela representação dos objectos e acções a desempenhar, uma maior rapidez, flexibilidade e feedback na interacção com o sistema. Este site explica o que é a DM, de uma forma simples
• Explorando e navegando: permite flexibilidade na pesquisa de informação, tal como se faz ao ler um jornal ou uma revista, devido à estruturação da informação

Há modelos conceptuais baseados em objectos, onde se faz uma analogia com o mundo físico.

Para explorar mais o conceito de modelo conceptual, dentro do design de interacção, recomendo dois sites que dão mais noções sobre este tema: site 1; site 2

Por vezes, no processo de design de interacção, usa-se uma metáfora da interface. A interface é desenhada de modo a assemelhar-se a uma entidade física. O melhor exemplo é o da Macintosh que, em 1983, revolucionou o conceito da interacção numa interface inovadora: baseado no conceito de “desktop” (da secretária, objecto físico) criou uma “desktop” virtual, que se assemelhasse a essa secretária, objecto físico. Assim, tornou muito mais fácil e apelativo (já que reporta a uma realidade que existe, a “desktop”) o uso de um computador.

No YouTube, há vários vídeos sobre o lançamento do Macintosh: o primeiro anúncio publicitário, e Steve Jobs, um dos fundadores da Apple Inc., a fazer uma demonstração do produto. E neste site, é mostrado um guia de utilizador da Macintosh, original de 1984. O autor desse post disse ter ficado “impressionado” com a maneira como a nova interface, como a mudança de paradigma de interacção feitos pela Macintosh foram apresentadas.

Mas, antes de desenvolver o produto, deve-se usar técnicas de prototipagem. Esta é outra palavra-chave no design de interacção. Um protótipo permite experimentar várias ideias, dá feedback rápido sobre o design dessas várias ideias e elimina alguns problemas antes de começar o trabalho, poupando tempo e dinheiro.

Um protótipo tem vários níveis de detalhe:

• Protótipos Hi Fi: parecem-se com o produto final
• Protótipos Lo Fi: um esboço, com poucos pormenores. Concentra-se no essencial, e não são exigidos conhecimentos técnicos para o fazer. Para além disso, esta prototipagem é fácil, rápida e barata.

Para mais noções sobre prototipagem, este site dá uma explicação simples sobre o processo de prototipagem, bem como as suas vantagens e desvantagens.

O DI não se aplica apenas a websites, mas também a produtos “reais”. Consiste no design da interface desses tais produtos e tecnologias, de modo a tornar a sua utilização fácil e eficiente. Winograd definiu este conceito como sendo “the design of spaces for human communication and interaction”. Portanto, o DI tem como principal objectivo criar plataformas fáceis de usar, úteis, e ao mesmo tempo esteticamente agradáveis.

Relacionado com o DI está outra área de pesquisa: a Human Computer Interaction (HCI). Este HCI está intimamente relacionado com o DI, já que assenta na optimização da relação homem-máquina, através da criação de suportes fáceis e agradáveis, que correspondam às expectativas do utilizador. O site Interaction Design.org reúne vários dados sobre HCI e outros conceitos ligados aos “aspectos humanos da tecnologia”, como o próprio site afirma. Existe outro site igualmente completo (embora graficamente menos atractivo) com a definição de HCI, bibliografia, conferências, entre outros.

Dentro do DI, há dois aspectos que se cruzam: primeiro, a usabilidade; segundo o design. Na usabilidade, pede-se eficiência, segurança e utilidade no uso. No design, exige-se, para além da eficiência e utilidade, a criatividade, para que a experiência de utilização seja mais apelativa, até mais de acordo com a vida real.

Para melhor explicar o que é o DI, escolhi o site da Ikea.pt, para exemplificar.

Ainda na interacção, o site permite outras opções, como uma barra de pesquisa, a subscrição numa newsletter e  a criação de um perfil no site.

O site tem uma estrutura coerente, cumpre o princípio da consistência, já que em qualquer secção o aspecto do site (cores, disposição dos elementos…) mantém-se. Assim a utilização é mais fácil e eficaz.

As affordances, atributos que permitem ao utilizador perceber o funcionamento de determinado elemento, existem, tal como em todos os sites, com a barra lateral, quando se está a visualizar determinada divisão da casa aparecem vários símbolos + que permitem ver cada produto que aí se encontra, etc.

Para além disto, o site da Ikea.pt permite ao utilizador visualizar o catálogo de produtos online, e até fazer a planificação de qualquer divisão da casa online.

Por isso, o site Ikea.pt é um site bem concebido, com uma boa HCI, já que disponibiliza uma ajuda virtual (a Anna), entre outros serviços, como a visualização do catálogo e planificação online. A curva de aprendizagem do utilizador é média, já que no início, ao ver pela primeira vez o site, a disposição dos elementos causa alguma confusão (há demasiadas opções).