Joel on Software

Joel on Software Joel sobre Software

 

Projeto de Interface com Usuário para Programadores
Capítulo 1
Capítulo 2
Capítulo 3
Capítulo 4
Capítulo 5
Capítulo 6
Capítulo 7
Capítulo 8
Capítulo 9

Outros artigos de "Joel on Software" em Português

Outros artigos de "Joel on Software" em Inglês

Envie email para o autor (apenas em Inglês)

 

Projeto de Interface com Usuário para Programadores
Capítulo 4: Associações e Metáforas


Por Joel Spolsky
Traduzido por Rosana de Oliveira
18 de Abril de 2000

Desenvolver uma interface para usuário onde o modelo do programa coincide com o modelo do usuário não é fácil. Algumas vezes, seus usuários podem não ter uma idéia concreta de como o programa funciona e o que ele supostamente deve fazer. Neste casos, você vai ter que encontrar modos de dar para o usuário pistas de como as coisas funcionam. Com interface gráfica, uma maneira comum de resolver este problema é com metáforas. Mas nem todas as metáforas são criadas igualmente, e é importante entender como as metáforas funcionam para que você saiba se tem uma boa metáfora.

A metáfora mais famosa é a "metáfora do desktop" utilizada no Windows e no Macintosh. Você tem estas pequenas pastas com pequenos arquivos dentro delas, no qual você pode arrastar para todo lado. Você pode arrastar um arquivo de uma pasta para outra para movê-lo. Para explicar como está metáfora funciona, é porque as pequenas figuras de pastas realmente lembram as pessoas de pastas, que faz com que elas percebam que podem colocar documentos dentro delas.

Aqui está a tela do Kai's Photo Soap. Você pode descobrir como dar um zoom? 

 

Não é difícil. A lupa é uma metáfora do mundo real. As pessoas sabem o que elas supostamente tem que fazer. E não existe o receio de que a operação de zoom vai realmente alterar o tamanho básico da imagem, já que as lupas não fazem isso.

Uma metáfora, até mesmo uma imperfeita, funciona muito melhor do que quando você não tem nenhuma. Você pode descobrir como dar um zoom no Microsoft Word?

Word tem duas lupas pequenas na sua interface, mas uma delas está no botão "Visualizar Impressão" (por alguma razão), e a outra está no botão "Mapear Documento", o que quer seja isto. A forma atual de alterar o nível de zoom aqui é com a caixa de listagem que está normalmente indicando "100%". Não existe uma tentativa de metáfora, então é mais difícil para usuários perceberem com fazer um zoom. Isto não é necessariamente uma coisa ruim; o zoom provavelmente não é importante o suficiente em uma aplicação de processador de texto para justificar todo o espaço de tela que o Kai exibe. Mas é uma aposta segura de que um número maior de usuários Kai serão capazes de dar um zoom do que usuários do Word.

Uma metáfora, mal selecionada, é pior do que não ter metáfora nenhuma. Você se lembra da pasta do Windows 95? Este pequeno ícone de aparência agradável ocupava mais ou menos uma polegada quadrada no desktop de todo mundo por alguns anos até que a Microsoft percebeu que ninguém queria. E ninguém queria uma porque, era uma metáfora incorreta. Supunha-se que era uma "pasta", onde você colocava arquivos para levar para casa. Mas quando você levava os arquivos para casa, você ainda tinha que coloca-los em um floppy disk. Então, você colocava-os em uma pasta ou em um floppy disk? Eu não estou certo. Eu não entendo a pasta. Eu nunca podia levá-la para o trabalho.

Associações

Objetos bem-projetados deixam claro como eles trabalham somente olhando para eles. Algumas portas tem uma grande barra de metal no nível do braço. A única coisa que se pode fazer com a barra é empurrá-la. Nas palavras de Donald Norman, a barra faz associação com empurrar. Outras portas têm grandes, maçanetas redondas que fazem você querer puxá-las. Elas até mesmo querem dizer como elas querem que você coloque as mãos no puxador. O puxador faz associação com puxar. Ele faz você querer puxá-lo.

Outros objetos não são tão bem projetados e você não pode dizer o que você supostamente deve fazer. O exemplo típico é a caixa de CD, que requer que você coloque seus polegares somente e puxe numa certa direção. Nada do design da caixa indicaria como você supostamente deveria abri-lá. Se você não sabe o truque, é muito frustrante, porque a caixa simplesmente não abrirá.

A melhor maneira de criar uma associação é repetir a forma da mão humana em um "molde tipo espaço negativo". Olhe bem de perto para a (excelente) câmera digital Kodak DC-290, mostrada aqui de frente e de trás:

Na frente, você pode ver uma grande marca de borracha que simplesmente parece que os seus dedos direitos se encaixam lá. Mais esperto ainda, na parte de trás, no canto inferior esquerdo, você pode ver um recorte que parece indubitavelmente com uma impressão digital. Quando você coloca o seu polegar esquerdo lá, seu dedo indicador se acomoda suavemente na frente da câmera, entre as lentes e a outra marca na borracha. Isto provoca um tipo de sentimento de conforto que você não sentiu ainda desde que você chupava o seu polegar (e punha o seu dedo indicador no nariz). 

Os engenheiros da Kodak estão simplesmente tentando persuadir você a segurar a câmera com ambas as mãos, em uma posição que assegura que a câmera estará mais estável e até mesmo manter os seus dedos longe para não bloquear as lentes. Toda esta borracha não é funcional, seu único propósito é encorajá-lo a segurar a câmera corretamente.

Boas IU de computadores usam associações, também. Aproximadamente dez anos atrás, a maioria dos botões eram "3D". Usando sombras de cinza, eles pareciam saltar para fora da tela. Isto não é para parecer legal: isto é importante porque os botões 3D associam com apertar. Eles parecem estar salientes e mostram exatamente a maneira de operá-los que é clicá-los. Infelizmente, muitos web sites hoje em dia (desavisados da importância das associações) preferem ter botões que parecem legais ao invés de botões que pareçam usáveis; como resultado, você às vezes tem que caçar em volta para descobrir onde clicar. Olhe para este web banner:

Os botões "Go" e "Login" são salientes e parecem como se você pudesse clicá-los. Os botões Site Map e Help não parecem clicáveis, de fato, eles parecem exatamente como o rótulo QUOTES que não é clicável.

Aproximadamente quatro anos atrás, muitas janelas começaram a desenvolver três pequenas arestas no canto direito inferior que pareciam com uma garra. Isto se parece com o tipo de coisa que alguém colocaria em uma transição de slides para aumentar o atrito. Isto lembra arrastar. Ela simplesmente implora para ser arrastada para alargar a janela.

Finalmente, um dos melhores exemplos de associações é a famosa "caixa de diálogo tipo fichário". Você se lembra do velho painel de controle do Mac?

A idéia era que você escolhesse um dos ícones da lista (scrolling) do lado esquerdo. A medida que você clica no ícone, o lado direito da tela altera. Por alguma razão, este tipo de diretriz era incrivelmente lógico para os programadores que o desenvolveram, mas muitos usuários não o entendiam. Entre outras coisas, as pessoas raramente imaginam como rolar a lista para obter mais do que os primeiros 4 controles de painel. Mas mais crítico ainda, a maioria das pessoas simplesmente não entendiam que havia uma conexão entre os ícones e a caixa de diálogo. Os ícones realmente se parecem com uma das escolhas.

No ano de 1992, estas interfaces começaram a desaparecer, para serem substituídas por uma nova invenção chamada caixa de diálogo tipo fichário:

Caixas de diálogo tipo fichário são uma grande associação. É realmente óbvio nesta figura que você tem seis fichas; é realmente óbvio qual a ficha que você está, e é realmente óbvio como alternar para uma ficha diferente. Quando a Microsoft fez o primeiro teste de usabilidade da caixa de diálogo tipo fichário, a usabilidade subiu de 30% (a velha maneira do Mac) para 100%. Literalmente cada testador foi capaz de descobrir o uso da caixa de diálogo tipo fichário. Dado o sucesso marcante desta metáfora, e o fato que o código para caixas de diálogo tipo fichário é construída dentro do Windows e praticamente disponível de graça, é surpreendente que você ainda veja aplicações que não tiram vantagem deles. Estas aplicações sofrem do atual, mensurável, problema de usabilidade do mundo real porque eles se recusam a atualizar o programa.



> Capítulo 5

Esse artigo apareceu originalmente em Inglês com o título User Interface Design for Programmers Chapter 4: Affordances and Metaphors  

Joel Spolsky é o fundador da Fog Creek Software, uma pequena empresa de software na cidade de Nova York. Formou-se na Universidade de Yale, e trabalhou como programador e gerente na Microsoft, na Viacom e no Juno.


O conteúdo dessas páginas reflete exclusivamente a opinião do autor.
Todo o conteúdo Copyright ©1999-2005 Joel Spolsky. Todos os direitos reservados.

FogBUGZ | CityDesk | Fog Creek Software | Joel Spolsky