No me faa pensar!Uma abordagem de bom senso Usabilidade na Web

Steve Krug

No me faa pensar!Uma abordagem de bom senso Usabilidade na Web

Steve Krug

Rio de Janeiro. 2008

R

No me Faa Pensar!

Do original Dont Make Me Think! Second Edition, Copyright 2006 da Editora Alta Books Ltda.Authorized translation from English language edition, entitled Dont Make Me Think! ISBN 0-321-34475-8, by Steve Krug, published by New Riders, a division of Pearson Education, Copyright 2006 by Person Education.PORTUGUESE language edition published by Editora Alta Books, Copyright 2006 by Editora Alta Books.

Todos os direitos reservados e protegidos pela Lei 5988 de 14/12/73. Nenhuma parte deste livro, sem autorizao prvia por escrito da editora, poder ser reproduzida ou transmitida sejam quais forem os meios empregados: eletrnico, mecnico, fotogrfico, gravao ou quaisquer outros. Todo o esforo foi feito para fornecer a mais completa e adequada informao, contudo a editora e o(s) autor(es) no assumem responsabilidade pelos resultados e usos da informao fornecida. Recomendamos aos leitores testar a informao, bem como tomar todos os cuidados necessrios (como o backup), antes da efetiva utilizao. Este livro no contm CD-ROM, disquete ou qualquer outra mdia.

Erratas e atualizaes: Sempre nos esforamos para entregar a voc, leitor, um livro livre de erros tcnicos ou de contedo; porm, nem sempre isso conseguido, seja por motivo de alterao de software, interpretao ou mesmo quando alguns deslizes constam na verso original de alguns livros que traduzimos. Sendo assim, criamos em nosso site, www.altabooks.com.br, a seo Erratas, onde relataremos, com a devida correo, qualquer erro encontrado em nossos livros.

Avisos e Renncia de Direitos: Este livro vendido como est, sem garantia de qualquer tipo, seja expressa ou implcita.

Marcas Registradas: Todos os termos mencionados e reconhecidos como Marca Registrada e/ou comercial so de responsabilidade de seus proprietrios. A Editora informa no estar associada a nenhum produto e/ou fornecedor apresentado no livro. No decorrer da obra, imagens, nomes de produtos e fabricantes podem ter sido utilizados, e desde j a Editora informa que o uso apenas ilustrativo e/ou educativo, no visando ao lucro, favorecimento ou desmerecimento do produto/fabricante.

Produo Editorial: Editora Alta BooksCoordenao Editorial: Thalita Arago Ramalho

Traduo: Acauan Pereira FernandesReviso: Carolina Menegassi

Reviso Tcnica: Marcos Vincius OliveiraDiagramao: Haroldo Sodr

Impresso no Brasil

O cdigo de propriedade intelectual de 1 de Julho de 1992 probe expressamente o uso coletivo sem autorizao dos detentores do direito autoral da obra, bem como a cpia ilegal do original. Esta prtica generalizada nos estabelecimentos de ensino, provoca uma brutal baixa nas vendas dos livros a ponto de impossibilitar os autores de criarem novas obras.

R

Rua Viva Claudio, 291 - JacarRio de Janeiro - CEP 20970-010

Tel: (21) 3278-8069, Fax: (21) 3277-1253site: www.altabooks.com.br

email: altabooks@altabooks.com.br

Primeira edio

Ao meu pai, que sempre quis que eu escrevesse um livro,

Minha me, que sempre me fez acreditar que eu conseguiria,

Melanie, que casou comigo o maior golpe de sorte da minha vida,

e meu filho Harry, que com certeza escrever livros muito melhores do que este

sempre que quiser.

Segunda edio

Para meu irmo mais velho, Phil, que foi um mensch durante toda sua ida.

[vi]

Prefcio Sobre a Segunda Edio viii

aPresenTao Por Roger Black xiv

inTrodUo Leia-me primeiro 2limpeza de garganta e iseno de responsabilidades

PrincPios bsicos

caPTUlo 1 No me faa pensar! 10A primeira lei de Krug sobre usabilidade

caPTUlo 2 Como realmente usamos a Web 20Examinando, fazendo o que for suficiente e atingindo o objetivo

caPTUlo 3 Introduo ao projeto de painis 30Projetando pginas para serem olhadas, no lidas

caPTUlo 4 Animal, vegetal ou mineral? 40Por que os usurios gostam de escolhas impensadas

caPTUlo 5 Omitas palavras desnecessrias 44A arte de no escrever para Web

coisas QUe Voc Precisa faZer cerTo

caPTUlo 6 Placas de rua e migalhas de po 50Projetando a navegao

CONTEDO

[vii]

caPTUlo 7 O primeiro passo na recuperao admitir 94que a pgina inicial est fora do seu controleProjetando a pgina inicial

assegUrando-se de QUe feZ cerTo

caPTUlo 8 O Agricultor e o Criador de Gado Devem Ser 122 AmigosPor que as brigas da equipe de projeto Web sobre usabilidade so uma perda de tempo e como evit-las

caPTUlo 9 Testes de usabilidade a 10 centavos por dia 130Por que os testes de usurio fazendo apenas os necessrios so a cura de todos os problemas do seu site

PreocUPaes mais imPorTanTes e inflUncias eXTernas

caPTUlo 10 Usabilidade como um favor comum 160Por que seu Web site deve ser um mensch

caPTUlo 11 Acessibilidade, Cascading Style Sheets e voc 168Quando voc acha que terminou, um gato passa correndo com uma torrada com manteiga amarrada nas costas

caPTUlo 12 Socorro! Meu chefe quer que eu ___ 180Quando decises de projeto ruins ocorrem com pessoas boas

Agradecimentos 186 Leituras Recomendadas 192ndice 198

CONTEDO

[viii]

Sobre a Segunda Edio

PREFCIO

[ix]

Desde que No Me Faa Pensar foi publicado pela primeira vez h quase cinco anos, as pessoas tm sido maravilhosas com ele.

recebo muitos e-mails gentis. Voc no pode imaginar o quo agradvel comear sua manh com algum, que voc nunca viu, lhe dizendo que gostou de algo que voc fez. (recomendo isso enfaticamente.)

melhor ainda o fato das pessoas parecerem gostar do livro pelas mesmas razes que eu. Por exemplo:

muitas pessoas apreciam o fato dele ser curto (algumas me disseram que o leram em uma viagem de avio, o que era um dos meus objetivos declarados para a primeira edio; o recorde da leitura mais rpida parece ser de em torno de duas horas).

Uma quantidade gratificante de pessoas disse que gostou do livro porque ele pratica o que prega, na escrita e no projeto.

algumas pessoas disseram que ele as fez rir alto, o que eu realmente apreciei (um leitor disse que o fiz rir tanto que saiu leite pelo seu nariz. Como algo assim pode ajudar, mas tambm fazer voc sentir que seu tempo foi bem gasto?).

Todavia, o mais satisfatrio foram as pessoas dizendo que ele lhes ajudou a realizar melhor seu trabalho.

Mas o que voc fez por ns ultimamente?s demorou em torno de um ano aps o livro ter surgido para as pessoas comearem a me perguntar se eu iria fazer uma segunda edio.

Por muito tempo, eu realmente resisti idia. gostava do livro do jeito que ele estava e achava que ele funcionava bem e, j que era sobre princpios de projeto e no tecnologia, no achei que fosse provvel que ficasse desatualizado logo.

Quando achava que estava fora, eles me puxaram de volta para dentro.

- micHael corleone, em o Poderoso cHefo, ParTe iii

[x]

normalmente eu faria o truque do consultor/terapeuta de perguntar a eles o que eles mudariam e a resposta era quase sempre: bom, acho que voc poderia atualizar os exemplos. algumas pessoas apontavam que alguns dos sites nos exemplos nem existiam mais.

contudo o fato que muitos dos sites no livro j tinham sado do ar quando ele chegou s livrarias. (lembre-se de que ele saiu antes do estouro da bolha da internet.) o fato dos sites no estarem mais no ar no tornou os exemplos menos claros.

outras pessoas diziam: bom, voc poderia falar sobre as coisas da Web que mudaram. verdade; algumas coisas da Web mudaram nos ltimos anos. algumas das mudanas foram boas:

mais sites bons dos quais copiar

ccs (cascading style sheets) que realmente funcionam

convenes teis como pginas de fcil impresso e o Whats this? (o que isto?) da amazon.com.

o google como ponto de partida para todas as aes

a mudana nos modelos de negcio, de propagandas em banners (de coisas que eu no quero) para propagandas do google (de coisas que eu realmente poderia querer)

Quase ningum mais usa frames

... e algumas no to boas:

Pop-ups

roubo de informaes (Phishing)

Contudo estas mudanas no me fizeram sentir uma necessidade de atualizar o livro, que sobre princpios de projeto, no peculiaridades de tecnologia ou implementao.

Tambm houve outro problema: eu estava muito orgulhoso do quo curto o livro era. foi necessrio muito trabalho, mas era uma parte importante do negcio de praticar o que se prega. se fosse acrescentar algum material novo, teria de descartar algum material existente, e eu achava que tudo funcionava muito bem.

PREFCIO

[xi]

Ento, o que estamos fazendo aqui?Um dos melhores benefcios adicionais do livro para mim que consegui passar tempo ensinando em seminrios.

Nos seminrios, tento fazer a mesma coisa que fiz no livro: mostrar s pessoas o que penso quando fao um exame de usabilidade de um Web site.

e, j que todas as pessoas que vo aos seminrios j leram o livro, naturalmente eu tive de levar exemplos diferentes para expressar as mesmas opinies e formas diferentes de explicar as mesmas coisas. Tambm fao muitas anlises de diferentes tipos de sites, porque todos que vm ao seminrio podem submeter uma Url, e durante o dia fao mini-anlises especializados de 12 minutos em algumas delas, e um teste de usurio ao vivo de mais um ou dois.

alm disso, como qualquer pessoa que j ensinou algo sabe que: ensinar a melhor forma de aprender mais sobre alguma coisa.

assim, quando meu editor comeou a me perguntar sobre uma segunda edio no ano passado, eu realmente pensei sobre como ela poderia ser e, embora ainda achasse que no havia muito o que alterar ou excluir, percebi que havia outras coisas sobre as quais poderia escrever e que poderiam ser teis.

Como o qu?o novo material entra na sua maioria em trs categorias:

Ah, agora eu entendo. ensinar nos seminrios me deu muitas oportunidades de pensar sobre o que est no livro. H algumas coisas que eu reescrevi com ligeiras alteraes porque acho que as entendo um pouco melhor agora ou que tenho uma forma melhor de explic-las.

Socorro! Meu chefe quer que eu me _. muitas perguntas que as pessoas fazem nos meus seminrios so do tipo eu sei a coisa certa a fazer neste caso, mas meu chefe/cliente/investidor insiste que eu faa a coisa errada. como posso convenc-lo do contrrio?

SObRE a SEguNDa EDIO

[xii]

J que muitas pessoas parecem gastar muito tempo tentando resolver os mesmos problemas de projeto, achei que poderia ser uma boa idia dar a elas alguns recursos.

meu gerente de marketing insiste em obrigar as pessoas a nos fornecer muitas informaes pessoais desnecessrias antes que possam assinar nosso boletim informativo e parece no importar para ele o fato de que 10% dos nossos assinantes se chamem Jos silva.

Os captulos perdidos. Havia dois captulos que eu queria incluir no primeiro livro mas no o fiz, principalmente para mant-lo curto. Um, o Captulo 10, sobre a importncia de tratar bem os usurios e o outro, o captulo 11, sobre acessibilidade na Web.

Tambm quis atualizar e aumentar a lista de leituras recomendadas, j que alguns livros muito bons surgiram nos ltimos cinco anos.

Colocando mais do que cabe na embalagemembora eu j tivesse mudado minha opinio de que o livro estava bem daquela forma, ainda tinha um dilema importante: se no houvesse nada que eu quisesse eliminar, como poderia acrescentar material novo e ainda assim manter o livro curto o suficiente para ser lido em uma viagem de avio?

felizmente, nesse momento, segui meu prprio conselho e criei um formulrio de teste de usurio: criei um grupo de discusses e pedi aos leitores da primeira edio que me dissessem o que eu poderia deixar fora. felizmente, o teste fez o que os testes de usurio sempre fazem:

Confirmou algumas coisas que eu j sabia

ensinou-me algumas coisas que eu no sabia sobre como as pessoas estavam usando o livro e ao que elas davam mais valor nele

Uma grande surpresa me permitiu melhor-lo significativamente

a grande surpresa foi o grande nmero de pessoas que sugeriram passar os captulos sobre testes de usurio para outro livro (algumas delas haviam ouvido que eu estava planejando escrever outro livro que cobriria em detalhes testes de

PREFCIO

[xiii]

usurio de baixo ou nenhum custo que eles mesmos poderiam fazer, e algumas disseram que no sentiriam falta dos captulos porque no planejavam executar elas prprias algum teste).

eu havia pensado em fazer isso, mas no queria porque (a) achava que as pessoas sentiriam falta deles e (b) acreditava que pareceria que eu estava tentando obrigar as pessoas a comprar o segundo livro. contudo, assim que comecei a ler o que os usurios tinham a dizer, a soluo se tornou bvia: compactando os trs captulos sobre testes de usurio em um ligeiramente menor que cobrisse os pontos importantes que todos deveriam conhecer, eu poderia ganhar vinte pginas a mais para usar com o material novo. Para quem quisesse a verso maior anterior, eu poderia disponibilizar os captulos originais de graa no meu Web site1. Problema resolvido.

finalmente, algumas notas de administrao interna:

Os links. se voc quiser visitar alguma das Urls mencionadas no livro, encontrar tambm links atualizados no meu site. (s para o caso de algum dos sites, bem, voc sabe... desaparecer.)

Ainda no existe. a nica coisa que as pessoas me perguntaram e que voc no encontrar aqui alguma discusso sobre aplicaes Web. embora muitos dos princpios sejam os mesmos dos usados para Web sites, este realmente um tpico para um outro livro inteiro, e no sou eu a pessoa a escrev-lo.2

de qualquer forma, obrigado por toda a ajuda. espero que voc ache teis as novas partes.

Vejo voc daqui a cinco anos.

Steve Krug

Julho de 2005

1 Http://www.sensible.com/secondedition

2 Se esta a sua rea, voc talvez queira dar uma olhada em Web application design Handbook: best Practices for Web-based software de Susan Fowler e Victor Stanwick.

SObRE a SEguNDa EDIO

[xiv]

APRESENTAO no me faa Pensar noVamenTe

CONSIDERANDO QUANTA COISA MUDOU DESDE O ANO 2000, QUANDO A primeira edio deste livro foi impressa, impressionante que o projeto bsico da Web tenha continuado to semelhante.nos primeiros anos, a plataforma era voltil. Parecia que as caractersticas mudavam a cada semana. Tnhamos a guerra dos navegadores, com o netscape se opondo a todos os novos e a Wc3 trazendo novos padres HTml a cada seis meses. Todavia, com a vitria prevista da wehrmacht de redmond, tudo se acalmou.

isto foi um alvio para os projetistas da Web, que quase enlouqueciam com as constantes alteraes no cdigo e com o fato de que ns o estvamos fazendo medida em que seguamos em frente.

mas o alvio aos poucos se transformou em frustrao.

A inflexibilidade da HTML, a falta de fontes, a adaptabilidade das pginas Web que tornam o projeto to impreciso, o confuso conjunto de resolues de tela e navegadores (mesmo se eles forem o explorer na maioria dos casos) todos estes fatores so irritantes.

o que piorou a situao dos projetistas foi uma quantidade de convenes restritivas, como a de propagandas em banners. nem todas as convenes so ruins, claro. na verdade, os usurios gostam de convenes mesmo se os projetistas as achem restritivas. Para a maioria das pessoas, j difcil o suficiente apenas fazer o computador funcionar.

[xv]

e, embora estas convenes possam mudar, h uma constante que nunca muda: a natureza humana. mesmo que a internet tenha sido uma fora social e comercial to radical e causadora de mudanas como de fato foi, ainda no causou uma mutao visvel nas espcies.

e, j que os projetistas de modo geral no entram em contato com seres humanos reais, muito til conhecer steve Krug ou pelo menos ter seu livro porque steve conhece os usurios. depois de mais de uma dcada de trabalho ele continua a olhar cada Web site como se fosse o primeiro. Voc no encontrar palavras apenas para chamar a ateno: s bom senso e uma compreenso amigvel da forma que vemos, pensamos e lemos.

os princpios que steve compartilha aqui permanecero os mesmos, no importa o que acontea com a internet com convenes web, o sistema operacional, banda larga ou poder computacional. ento, puxe uma cadeira e relaxe.

roger blacK

noVa iorQUe, JUlHo de 2005

[16]

CaPTuLO 1

No me faa pensar!a Primeira lei de KrUg sobre Usabilidade

captulo

1

[17]

NO ME Faa PENSaR!

As pessoas freqentemente me perguntam:Qual a coisa mais importante que eu devo fazer se quiser me assegurar de que meu Web site seja fcil de usar?

a resposta simples. no nada importante deve estar a mais de dois cliques de distncia ou fale a lngua do usurio ou mesmo seja consistente.

isto .,..

No me faa pensar!Tenho dito s pessoas h anos que esta a minha primeira lei de usabilidade e, quanto mais pginas Web vejo, mais me conveno disso.

este o princpio primordial o fator de desempate ao decidir se algo funciona ou no em um projeto Web. se voc tiver espao na cabea para apenas uma regra de usabilidade, grave esta1.

Isto significa que, tanto quanto for humanamente possvel, quando examino uma pgina Web ela deve ser evidente por si s auto-explicativa.

eu devo ser capaz de entend-la o que ela e como us-la sem desprender esforo nisso.

o quo evidente estamos falando?

Bem, suficientemente evidente, por exemplo, para que seu vizinho, que no possui interesse no assunto do seu site e mal sabe usar o boto Voltar, pudesse olhar a pgina inicial do seu site e dizer ah, um ___. (com um pouco de sorte, ele dir ah, um ____. Interessante. Porm este um outro assunto.)

1 Na verdade, h um competidor importante: Livre-se de metade das palavras de cada pgina e depois de metade das que sobraram. Contudo, esta tem seu captulo prprio mais adiante.

[18]

CaPTuLO 1

Pense nisso da seguinte forma:

Quando estou olhando uma pgina que no me faz pensar, tudo o que vem minha cabea so coisas como oK, a est o ___ , isto um ___ e aqui est o que quero.

SEM PENSAR

OK. Isto parece ser as

categorias de

produtos...

... e estas so as ofertas do dia.

Memria, modems... Aqui est: monitores.

Clique.

[19]

NO ME Faa PENSaR!

Porm, quando estou examinando uma pgina que me faz pensar, tudo o que penso vem em forma de perguntas.

Hum. Cheio de coisas. Onde

devo comear?

Hum. Por que eles do esse

nome?

Posso clicar aqui?

A navegao por aqui? Ou ser l?

Por que eles colocaram aquilo l?

Estes dois links parecem ser a mesma coisa. Ser que so mesmo?

PENSANDO

Quando voc est criando um site, seu trabalho se livrar dessas perguntas.

[20]

CaPTuLO 1

Coisas que nos fazem pensarTodos os tipos de coisas em uma pgina Web podem nos fazer parar e pensar desnecessariamente. Pegue, por exemplo, nomes de coisas. causadores tpicos de problemas so nomes engraadinhos ou espertos, nomes dados por motivo de marketing, nomes especficos da empresa e nomes tcnicos com os quais no estamos familiarizados.

Por exemplo, suponha que um amigo me diga que a empresa XYZ corp est querendo contratar algum com exatamente as minhas qualificaes e ento eu vou at seu Web site. enquanto percorro a pgina procurando algo para clicar, o nome que eles resolveram dar para sua seo de ofertas de empregos faz diferena.

Observe que estas coisas ficam sempre em algum lugar entre bvio para todos e muito obscuro, e h sempre vantagens e desvantagens a serem consideradas.

Por exemplo, empregos pode soar um muito indigno para a XYX corp, ou ento eles podem estar presos a emprego-rama devido a alguma poltica interna complicada ou, ainda porque, esta a forma pela qual eles tm sempre sido chamados nos boletins informativos da empresa. minha questo principal que as vantagens e desvantagens devem normalmente levar mais para a direo do bvio.

outra fonte desnecessria de questionamentos so links e botes que no sejam bvios. como usurio, nunca devo gastar um milissegundo sequer pensando se alguma coisa pode ser clicada ou no.

Emprego-RamaOportunidades de EmpregoEmpregos

Hum.[Milissegundos de raciocnio]Empregos.Clique

Empregos!Clique

Hum. Poderia ser Empregos, mas parece mais do que isso.Eu devo clicar ou ficar olhando?