Mais um bom exemplo de não-usabilidade

Estava atualizando meu álbum de referências através do Picasa 2, quando apertei, sem querer, no botão que fecha o programa. Eis que me surge a seguinte mensagem:

Mensagem do Picasa2 quando se fecha o programa com uploads em andamento.

Beleza! Observe que a pergunta é “Deseja sair agora?“. Estudando as minhas opções:

1. Sair agora – sair agora do programa ou da tela de aviso?
2. Vá em frente – vá em frente e saia agora? ou vá em frente e continue meus uploads?

Na dúvida, apertei no x vermelho e consegui manter o programa aberto (que era a minha intenção). Tem outra interpretação dessa tela? Conta aí.

Possível Solução

Pensei primeiramente em “Continuar os uploads”, mas assim conflitaria com a afirmação que está entre parênteses. Seria uma confusão entre: continuaria os uploads depois de fechar (já que iniciei a ação de fechar ao apertar o botão x) ou manteria o programa aberto e os uploads em andamento?

Uma possível solução rápida seria trocar o “Vá em frente” por “Não sair”.

Possível solução para a mensagem do Picasa2

Tendo sempre em mente que, mesmo o meu caso tendo sido um clique acidental (não tinha a intenção de fechar o Picasa2), a mensagem é a resposta de uma ação direta “fechar o programa”. Ou seja, o usuário busca uma reação a ação dele mesmo, o que fez com que “Vá em frente” reafirme a primeira atitude que foi a de fechar o programa.

A importância de padrões de usabilidade e experiência do usuário

A organização do mundo é baseada em padrões. Pense nas placas de trânsito, imagine se em cada cidade elas fossem diferentes e você tivesse que aprender o sistema toda vez que fosse viajar – mentalizou o caos? Na internet não é muito diferente, sites com nomenclaturas variadas para menus, tecnologias diversas em que ações idênticas nem sempre geram o mesmo resultado, entre muitas outras coisas com as quais todos já sofremos. Aí entra a experiência do usuário e os padrões de usabilidade.

Se você vê um botão, espera que ele vá gerar uma ação. Isso se chama modelo mental, é como uma imagem que aparece na cabeça antecipando o funcionamento das coisas de acordo com experiências anteriores. Partindo desse princípio, os ambientes virtuais (o seu sistema operacional, por exemplo) agregam algum valor cultural pré-existente para facilitar a interação com os usuários, como a idéia de janelas que abrem e fecham ou o próprio botão, que recebe um efeito 3D para imitar seu correspondente real. Essa idéia se estende a todos os elementos visuais e funcionais, cores, formas, seqüência, localização…

Botão real, com cores e volume.

Botão virtual, imita o volume do botão real. O ponteiro do mouse segue a mesma tendência.

Parece óbvio, mas para quem cria as interfaces, no caso dos designers um layout, nem sempre é claro que todos os elementos estão dizendo alguma coisa e se não forem bem estudados, podem passar a mensagem errada ou simplesmente deixar passar algo importante. O Magazine Luiza, por exemplo, ignorou totalmente o conceito-padrão das abas de evidenciar um conteúdo enquanto esconde os outros e transformou apenas num enfeite estético.

Magazine Luiza sacaneando o modelo mental das abas

Por isso, antes de criar um menu mirabolante ou um layout fora do comum achando que inovar é inverter conceitos, pense na experiência como um cliente procurando por alguma informação ou tentando preencher um formulário enorme com campos minúsculos e baixo contraste. Antes de ser bonito, o produto precisa ser funcional, agradar a quem realmente ele veio servir – o usuário. Egos no chão.

Para entender um pouco mais sobre padrões, veja alguns exemplos:

Yahoo! Design Pattern Library
UI-pattern: User Interface Design Pattern Library
UI Pattern Factory

Ubiquity: o poder do usuário sobre mashups

Com a “web 2.0″, ganhamos diversas ferramentas dinâmicas API’s e a possibilidade de juntá-las em mashups, criando uma confluência de conteúdo. Basicamente API (Interface de Programação de Aplicativos) são os padrões que um sistema tem e podem ser usados para criar aplicações novas em cima das funcionalidades dele, como os plugins do seu navegador.  Só que criar esses mashups está longe do alcance da maioria das pessoas, necessitando de conhecimentos em programação, por exemplo.

A idéia do Ubiquity, do Mozilla Labs, é dar poder ao usuário comum sobre essas ferramentas, juntá-las de acordo com a necessidade individual e lidar com elas através de comandos via teclado. Assim, tarefas que antes precisavam de muitas pesquisas em diversas fontes se resolvem com apenas uma linha de comando. Você poderia, por exemplo, combinar com os amigos um encontro em um bar e já anexar mapa, notícias e fotos no corpo do email, sem precisar copiar e colar ou de uma enxurrada de links enormes. Por enquanto, ele ainda está como protótipo na versão alfa 0.1, mas pode ser baixado para testes.

O conceito do programa vai mais além e abre uma discussão saudável sobre a eficiência entre uso de interfaces gráficas (janelas, ícones, menus e setas) e linhas de comando.

Clique na imagem para assistir ao video e ter uma idéia mais clara de como funcionará esse plugin para o Firefox.

Ubiquity for Firefox from Aza Raskin on Vimeo.

A Arquitetura da Informação no desenvolvimento de Projetos para Web

Este artigo foi criado para a disciplina de Gerenciamento da Produção do curso de Tecnologia em Artes Gráfica da UTFPR.

Palavras-chave
Arquitetura da Informação; Usuário; Projeto Web

01. INTRODUÇÃO
Este estudo pretende esclarecer a necessidade de aplicar as premissas da Arquitetura da Informação no desenvolvimento de projetos para web, explicitando métodos e ferramentas que fazem parte do processo.
A Internet tem crescido em tamanho e importância no cotidiano da sociedade. Com isso, o volume de informação disponibilizada na rede mundial de computadores se torna quase infinito, mas seu acesso não se apresenta necessariamente de forma organizada. Os usuários têm à disposição diversas opções e a organização inteligente desse conteúdo se torna vital para conquistar a atenção do público desejado. A Arquitetura da Informação tem o papel de tornar a navegação de sistemas de informação, neste caso websites, o mais fácil e claro possível para que o usuário consiga encontrar a informação que busca.

02. METODOLOGIA
A metodologia empregada foi a de revisão de literatura para aumentar a extensão e a profundidade dos conteúdos investigados. (SANTOS, 2001)

03. DESENVOLVIMENTO

3.1 Definição de Arquitetura da Informação
Arquitetura da Informação (A.I.) é a combinação entre esquemas de organização, nomeação e navegação dentro de um sistema de informação. (LOU e PETER, 1998) Cabe ao arquiteto da informação desenhar uma solução otimizada para a distribuição da informação, respeitando as necessidades, limitações e peculiaridades dos usuários do sistema, neste caso sites na internet – ou websites.

O público deve ser capaz de encontrar a informação que necessita no menor tempo possível e da forma mais intuitiva, evitando a frustração com o meio e a transferência dessa frustração para a marca a qual o site representa. Para isso, é imprescindível conhecer bem as características dos futuros usuários, ter consciência da finalidade do website (o contexto) e dominar a informação a ponto de conseguir distribuí-la eficazmente.

Os limites da aplicação da A.I. ainda não estão bem definidos, é um processo recente, mas os estudos sobre o assunto crescem em quantidade e qualidade. Alguns defendem que seu objeto de estudo deve se limitar à organização do conteúdo textual e o fluxo da sua navegação, mas neste artigo será considerado que o contexto, por definir a qualidade do conteúdo e ser determinante na experiência do usuário, também faz parte do processo, e por isso deve ser estudado e definido dentro da A.I.. Logo, pode-se considerar que a Arquitetura da Informação engloba tecnologia – forma, design – apresentação e texto – conteúdo.

3.2 A Arquitetura da Informação no Projeto Web
A primeira etapa de um projeto é o briefing, documento no qual são definidos objetivos e prioridades. Com esses dados em mãos, o arquiteto da informação irá elaborar estudos, planejar funcionalidades e entregar documentos (deliverables) que orientarão os processos de programação, criação de layout e testes de usabilidade.

A Arquitetura da Informação se encontra na fase de planejamento, sendo de extrema importância para alcançar o retorno definido na fase do briefing.  Por meio dela, é possível segmentar o processo, facilitando a detecção de problemas de aplicação e suas correções. É um processo que funciona de maneira ótima no início de um projeto (Figura 1), mas que também pode ser aplicado em projetos já concretizados, como forma de corrigir problemas encontrados em testes de usabilidade.

Muitas vezes é uma etapa ignorada no projeto web, tendo a criação do layout logo após a coleta de informações, o que freqüentemente gera um produto sem foco claro e com graves problemas de interação com o usuário pela falta de planejamento.

FIGURA 01. ELEMENTOS DE UM PROJETO WEB

FONTE: http://www.jjg.net/elements/translations/elements_pt.pdf

3.3 Aplicação, Ferramentas e Documentação

Para facilitar o entendimento, pode-se observar a aplicação da A.I. por etapas. Abaixo serão apresentadas algumas aplicações e respectivas ferramentas consideradas importantes.
O conteúdo textual precisa ser organizado e rotulado para que o usuário possa encontrá-lo facilmente, para isso, é dividido em pedaços que receberão rótulos e estes rótulos poderão ser agrupados, os grupos rotulados e assim sucessivamente. O card sorting (Figura 2) é uma ferramenta aplicada para entender como o usuário organiza as informações na mente, sendo eficaz para definir os rótulos mais próximos da realidade do público-alvo. Basicamente trata-se da distribuição de cartões com rótulos ou conteúdo, para que o usuário faça a correspondência que considera lógica, em alguns casos os rótulos são preenchidos pelo próprio usuário.

FIGURA 02. APLICAÇÃO DE CARD SORTING

FONTE: http://www.flickr.com/photos/skillclouds/2595306341/

Definidos os rótulos, é necessário definir o fluxo da navegação, ou seja, os caminhos que o usuário percorrerá até cada informação. Esse processo de navegação pode ser representado por meio de fluxogramas (Figura 3) que são bases para outra ferramenta, o mapa do site – lista hierárquica com links diretos para os conteúdos das páginas. O fluxograma não depende necessariamente da rotulação.

FIGURA 03. FLUXOGRAMA DE NAVEGAÇÃO

http://www.flickr.com/photos/henriquecostapereira/1392820227/

Com a organização mental do texto definida, é necessário determinar a localização desse conteúdo na página física, a interface. Essa distribuição deve considerar tanto elementos textuais quanto imagens e animações, e deve ser feita aplicando conceitos de diagramação para evidenciar a hierarquia de importância das informações. Desenvolve-se o rascunho da página apontando a localização dos itens, o wireframe (Figura 4), como numa planta de arquitetura.
FIGURA 04. WIREFRAME

FONTE: http://webinsider.uol.com.br/index.php/2003/12/09/wireframe-documento-cada-vez-mais-importante/

Para garantir que os estudos feitos terão resultados próximos do esperado, são feitos testes de usabilidade nos quais os usuários são submetidos a simulações do website. Protótipos feitos de papel ou virtuais são usados para que as pessoas tentem encontrar uma informação específica e relatarem suas dificuldades ou afirmarem seu sucesso.

04. CONCLUSÃO

A Arquitetura da Informação é uma ferramenta poderosa na organização do conteúdo, tornando-se uma etapa imprescindível na criação de websites realmente direcionados para o usuário. É um processo cíclico que, fazendo uso de outros processos como as análises de usabilidade, pode facilitar ainda mais a navegação pela Internet, tornando as informações cada vez mais acessíveis para as pessoas por meio de uma navegação instintiva.

Os produtos resultantes dos processos da Arquitetura da Informação são três documentos. O wireframe, para facilitar a integração com a criação artística do layout informando a posição dos elementos gráficos principais; O fluxograma de navegação, definindo o curso das informações; e o mapa do site, relatando a divisão hierárquica dessas informações.É possível aplicar os conceitos da A.I. em qualquer tipo de projeto web, decidindo quais etapas serão necessárias de acordo com tamanho, prazo e recursos a serem utilizados.

REFERÊNCIAS

Arquitetura da informação para os que chegam agora

A arquitetura da informação segundo Lou e Peter

Arquitetura de Informação, Usabilidade e Web Design

Jakob Nielsen

Laboratório de Utilizabilidade da Informática

O que é arquitetura de informação em websites

Organizando websites com os parâmetros da Arquitetura da Informação

Por que você precisa de um arquiteto da informação?

The Elements of User Experience by Jesse James Garrett

Wireframe, documento cada vez mais importante

O cliente não sabe o que precisa (mas sabe o que não quer)

É um fato bem comum em briefings: esperar a resposta para os problemas do cliente perguntando o que ele quer. Acredite, na maioria das vezes ele não sabe, nem faz idéia. Certo ele, somos contratados para dar soluções e não para fazer o cliente pensar. Descubra os limites do que não se quer e trabalhe as soluções dentro disto. Nesse contexto, você conseguirá um espaço para solucionar de forma criativa os problemas pontuais do cliente, correndo menos riscos de ter que refazer todo o trabalho – ou ter que publicar um Frankeinstein que não tem coragem nem de assinar.

Ao contrário do aplicado geralmente, briefing não é um questionário, é a definição inicial do projeto, um guia para saber por onde ir. E antes de definir um produto ou layout, é preciso saber quais as necessidades do público-alvo do cliente, veja bem, do público. Quando se pergunta para o cliente coisas do tipo “quais cores gostaria de usar”, é como se dissesse “o que você, fulano, quer?”. Pergunte o que ele não quer ver e proponha suas soluções para a situação comercial dele (e não para o gosto).

Quando se dá espaço para decidir detalhes do projeto em que base teórica e estudo de caso são cruciais, o profissional começa a se tornar “marionete” do cliente, rebaixado a mero de operador de software para realizar vontades pessoais – perde a posição de provedor de soluções. Ele não pode pensar que é capaz de fazer o seu trabalho, a partir daí não importa quantos cursos, livros e faculdades você tem, o seu valor já foi perdido.

Depois do estrago feito, a culpa (e as reclamações) sobrarão para você. E não adianta reclamar que a culpa é do mal gosto alheio, se algo foi escolhido, então existiram opções e dentre as opções estava alguma coisa que não serviria como solução no projeto. Exemplo prático: depois de ouvir todas as idéias mirabolantes do cara, você resolve criar uma opção em cima daquilo com a desculpa de que “ele vai ver como ficou horroroso”. Se ele imagina uma coisa daquele jeito, é bem provável que ele vá gostar, e até decidir que aquilo é melhor para ele do que o layout estruturado e direcionado que você levou horas fazendo. Sendo assim, o seu trabalho foi feito pelo cliente e não para o cliente. Ou faltou direcionamento pelo profissional, ou o cliente não era para você.

E o seu público-alvo?

E sim, acredito que existem clientes certos e errados, assim como designers cujo estilo é bem específico.
Fazendo uma analogia entre layout e roupa:

1. A cliente é uma mulher esbelta, alta, bonita, executiva de uma grande empresa, se ela for na C&A comprar uma roupa, vai poder se vestir, pode até ficar apresentável, mas dentro do ambiente em que trabalha, provavelmente se destacará negativamente pois o tecido da roupa não é fino, o acabamento é menos cuidadoso, o caimento não é perfeito – além de correr o risco de estar igualzinha a sua secretária.
2. Steve Jobs precisa de um site para o iPhone e vai ao Template Monsters comprar um layout. Os layouts são até bem executados, têm mil efeitos, tem espaço para todas as informações, mas outras 10 pessoas de qualquer área terão o mesmo layout.

Se o cliente tem um produto superior e pensa pequeno, é menos complicado de mostrar como exclusividade e individualização farão a diferença para o seu negócio (manter a imagem diferenciada, no caso da executiva e do iPhone), do que convencer o cliente pequeno (a secretária ou os compradores de templates) de que eles precisam investir em tecnologia e soluções exclusivas, que isso é essencial.

São dois públicos diferentes e não adianta tentar vender a mesma coisa para os dois. Se o seu trabalho engloba soluções totalmente inovadoras e diferenciadas com tecnologia de ponta, consumindo grande quantidade de recursos – tempo e pesquisa, provavelmente será uma dor de cabeça trabalhar com clientes pequenos que precisam de soluções simples, perdendo tempo com propostas complexas. De outra forma, se você prefere lidar com soluções práticas e de pequena dimensão, terá dificuldades em lidar com a complexidade de um cliente grande cheio de necessidades e complicações.

Tenha consciência do seu trabalho, escolha bem o cliente e proponha somente as melhores soluções. Se você está aí só para ganhar dinheiro, ponha o seu operador de software no comando e boa sorte.

Para saber mais:
Arquitetura da informação
Design de Interação
Padrões no Design de Interação

(Tirando, aos poucos, os três anos de ferrugem dos dedos.)