Usabilidoido: Menu Principal

English Website


Estética Feed s? desta se??o

Para os filósofos é a busca pelo bem-estar. Uma das coisas que traz mais bem estar é a beleza, e é disso que trato nessa seção.

Dimensões da estética na formação do gosto

(6 coment?rios)

O que você gosta é o que se gosta.

bela2.gif

Designer, saia da frente do PC

(19 coment?rios)

No período de transição de micreiro para designer, sentia certa dificuldade de ter boas idéias para layouts. Apesar de já ter estudado um pouco pintura, não sou prolífico como certos amigos que nunca precisaram parar para pensar como ter idéias visuais, para eles isso veêm natural e rapidamente.

Então, resolvi procurar abordagens metódicas para agilizar meu trabalho. Li diversos artigos com sequências de ações "infalíveis" para ter boas idéias, mas sinceramente não achei que fosse assim tão e fácil e não foi. Tive que desenvolver meu próprio método, de acordo com minhas habilidades e incapacidades.

Os artigos que mais me ajudaram foram o da Carole Guevin, no Afterchaos. Quem puder ler, vale à pena. São curtos e diretos e dão uma base para quem quiser desenvolver a sua metodologia própria. Na publicidade tem um clássico chamado Um Toc na Cuca que parece muito bom, só não me animei a pagar por ele.

Em todos os artigos, uma mesma recomendação: vá fazer algo longe do PC para ter novas idéias. Explorei esse assunto numa entrevista com um dos caras mais criativos que conheço, o Marcelo Sampaio. Esse cara faz uns banners geniais, mas não soube me explicar bem porque é melhor se inspirar longe do PC.

Esses dias, por acaso (!), essa questão voltou à minha mente e resolvi perguntar para o Donald Norman, que tem um background fantástico em psicologia, o porquê disso. Confiram a tradução da pergunta e resposta originais:

Leia mais.

Na Web é melhor usabilidade ou estética?

(14 coment?rios)

Donald Norman, sócio do Jakob Nielsen e um dos maiores gurus do design, respondeu uma pergunta pública que fiz a ele. Li muitos artigos de sua autoria e estou finalizando seu livro mais conhecido, The Design of Everyday Things, que trata da usabilidade dos objetos por uma perspectiva da psicologia cognitiva. Fiquei extremamente feliz por ser contemplado por tão sábia e ampla resposta, aprendi muuuuito. Recomendo a todos que façam suas perguntas ao homem.

Minha dúvida surgiu quando tive contato com um estudo que relacionava usabilidade percebida à estética. Concluí que no contexto Web, esta última é mais importante, porém, aproveitei a oportunidade para que o autor do badalado Emotional Design me confirmasse isso. Claro, como um legítimo bom guru, desconfirmou: "não é mais, nem menos importante: tudo depende da ocasião". Ah, ficar em cima do muro é fácil. Fácil nada, note a justificativa do homem.

Pergunta

Websites e aplicações Web são supostamente feitos para serem usados uma ou poucas vezes, então a usabilidade percebida (correlacionada com a estética) seria mais importante do que a usabilidade real (tempo para finalização da tarefa, número de erros encontrados, etc) na Web?

(Não estou dizendo que a usabilidade não é importante, só estou na dúvida se a estética é mais importante para superar a competição brutal da Web e conquistar a atenção do usuário do que a usabilidade real que não é percebida)

Leia mais.

Jakob Nielsen gosta de beleza

(15 coment?rios)

Volta e meia, alguém lê o livro do Jakob Nielsen, fica horrorizado e inicia uma discussão na WDDesign se é válido ou não seguir as suas recomendações. Aí chovem mensagens extremistas ou dizendo que ele tem razão ou dizendo que ele é um babaca. Lá pelas tantas alguém diz que o site dele é horrível e por isso ninguém deve confiar no que ele diz. Acusam ele de ser conta o design gráfico.

Tenho aqui uma citação que desmente este último argumento. Talvez o Nielsen nem se orgulhe muito dela, porque afinal de contas ele realmente quase não fala sobre a importância do design gráfico, o assunto dele é sempre a usabilidade. Mas comprende-se: é essa a mensagem dele. Quem já estudou um pouquinho de publicidade sabe que quanto mais esforços você investir numa única mensagem, mais efetiva será sua transmissão. É por isso que ele chegou aonde chegou. Mas, vamos à citação:

Leia mais.

A tendência tableless

(44 coment?rios) Estava quase indo dormir, quando o
digom me abordou para uma conversa no MSN. Puxa, como valeu à pena ficar mais um pouco acordado. Passamos por várias tenções: usabilidade X acessibilidade, persuasão X informação, quadrado X redondo e etc. O mais incrível é que tudo tinha a ver, na medida em que a conversa se desenrolava. Esse é só a ponta do iceberg que nos aguarda quando novos dispositivos tiverem acesso à Web. Leiam e fiquem de olho:

Leia mais.

O que não sei de cor sobre cor

(28 coment?rios)

A primeira coisa que todo mundo diz é que cor está ligada à emoção. Sim, está, mas não é só aquela tabelinha vinda da cromoterapia que se pode falar das cores. Isabel Löfgren escreveu um artigo bem acessível sobre a importância das cores na usabilidade

A Usability fez um projeto em que os usuários não conseguiam navegar de um formulário para outro simplesmente porque os botões de "continuar" e "cancelar" eram amarelos e do mesmo tamanho, posicionados lado a lado. Sem perceber, o usuário clicava sobre o "cancelar" e zerava a operação. O único diagnóstico que fizemos para este site foi: diferencie a cor dos botões de "cancelar" e "continuar" e assim esse erro não acontecerá mais. Leia mais

Leia mais.

Embelezar gráficos é perigoso

(11 coment?rios)

Estou lendo o livro Designer´s Guides for Creating Charts an Diagrams de Nigel Holmes, que na época era ilustrador da famosa revista Time. O cara adorava ilustrar gráficos para torná-los mais amigáveis e interpretar os dados mostrados. Veja um exemplo simples dessa técnica aplicada a um gráfico de pizza:

Navegadores usado pelos leitores do Usabilidoido em Outuibro de 2004

O fucinho e a orelha da raposa saindo pra fora significam que o Firefox está tentando tomar o lugar do Internet Explorer, mas ainda está longe de conseguir. Como vocês podem notar, com as ilustrações mais fácil de perceber o viés de quem fez o gráfico (sim, eu recomendo altamente que vocês troquem de navegador).

Mesmo assim, nesse caso não houve distorções e o gráfico é muito mais interessante que sua versão em tabelas com números. Porém, fiz dois outros gráfico para ilustrar como nem sempre isso é vantajoso para entender melhor os dados:

Números de acessos médio no Usabilidoido por hora do dia (em Hits)

Números de acessos médio no Usabilidoido por hora da noite (em Hits)

Apesar de bonitinhos, nesse caso os gráficos de barra dispostos em círculo dificultam a comparação entre os valores. Note no gráfico original feio como é muito mais fácil perceber o padrão de acesso (que é o objetivo de um gráfico como esse):

Outro recurso utilizado erroneamente pelos infografistas é trocar barras por desenhos que são dimensionados de acordo com a altura da barra. O problema dessa técnica é que causa uma certa distorção. Note como no gráfico abaixo, o primeiro valor parece muito menor do que o último, quando na verdade ele representa 1/4 do valor do último:

Número de visitas médio ao Usabilidoido por mês

Se fosse mantida uma largura fixa como a barra do gráfico original, os dados não seriam distorcidos, mas aí as figuras ficariam distorcidas. Pior do que isso só usar grades curvas ou tridimensionais para se ajustar melhor ao desenho que envolve o gráfico. Isso torna a comparação mais imprecisa, porque é preciso levar em conta essas alterações na grade e compensar as diferenças.

O livro foi escrito em 1982, quando os infográficos começaram a ser mais valorizados nos jornais. Pelos exemplos que vi no site do autor, parece que ele mudou radicalmente sua abordagem. Porém, ainda há muitos infografistas por aí que se vangloriam por tornar gráficos mais amigáveis abusando de ilustrações. Como diz Edward Tufte, no seu excelente livro "Envisioning Information":

Se você sente que precisa embelezar um gráfico, é porque escolheu os números errados.

Usabilidade percebida é o que importa

(1 coment?rios)

Durante o Simpósio de Interação Humano-Computador que assisti há duas semanas, uma pesquisa me chamou muito à atenção por tentar provar que a estética de uma interface está intimamente relaciona com sua usabilidade percebida. Isso significa dizer que a beleza é crucial para o sucesso ergonômico da interface. Já escrevi algumas vezes sobre o dilema estética X usabilidade, mas dessa vez parece que finalmente as idéias começam a se encaixar.

O experimento da doutoranda Rosamelia Ribeiro foi o seguinte: ela montou 3 séries de interfaces iguais em tipografia, elementos gráficos e cores, cada uma com 4 páginas, diagramadas diferentemente de acordo com os princípios da Gestalt (unidade, proporção, homogeneidade, balanço e ritmo):

  1. seguia todos os princípios
  2. violava todos
  3. seguia os três primeiros princípios e violava os últimos
  4. violava os três primeiros e seguia os últimos

Então, ela recrutou 279 pessoas e pediu para que avaliassem o quanto cada uma das telas era atrativa e fácil de usar numa escala de 1 a 5. O resultado foi que, apesar das notas não serem as mesmas para estética e usabilidade, elas variaram na mesma proporção, veja no gráfico:

grafico_usabilidade_estetica.gif

Para aplicações Web e websites que enfrentam grande concorrência e são utilizadas poucas vezes por seus usuários, a usabilidade percebida é mais importante do que a usabilidade efetiva. Para ele, não importa se a conclusão da tarefa vai demorar 2 minutos ou 3 minutos, importa mais que o fluxo da tarefa durante esse tempo seja agradável e sem problemas. Daí podemos tirar a conclusão de que devemos criar interfaces mais explicativas, bonitas e mágicas.

Bibliografia: Aesthetics and percieved usability of Virtual Learning Environments: preliminary results. Rosamelia Ribeiro, Dr. N. Hammond, J. Mansano, C. Cziulik, anais do IHC 2004 (quem quiser uma cópia peça para ela)

Aprenda teoria da cor e animação

(10 coment?rios)

Maria Claudia Cortes escolheu o formato ideal para mostrar o resultado de sua Dissertação de Mestrado: o Flash. Color in Motion aproveita tudo o que o Flash pode oferecer para ensinar teoria da cor. Tem animação, som, jogos e um kaleidoscópio que serve para experimentar a interação entre as cores.

O destaque vai para as cinemáticas onde as cores primárias e secundárias estrelam o papel principal.

teoria_da_cor_vermelho.jpg

Já assisti umas dez vezes e ainda não aprendi todos os macetes de transição entre cenas, ilustração, coloração, máscara e etc. Apesar de muito pesado (quase 1MB cada filme), é uma das minhas melhores referências em animação na Web

Agora, só não vai achar que depois de ver tudo que tem lá você já sabe tudo de teoria da cor. O site é um começo, um excelente começo. Mas não pode se encarado como única referência porque cor, assim como todos os outros elementos do design, depende de contexto. O vermelho num layout frio destaca, num layout quente, completa. Já se for para economistas, o vermelho é cor proibida, indica perda de dinheiro. No semáforo, foi escolhido porque é a frequência de onda que chega mais rápido ao olho. E meu amigo Lucas Haeser vive dizendo que "quando vejo vermelho tenho sede porque lembro de Coca-Cola" (aliás, o link foi ele quem passou).

Leva muitos anos para o designer dominar a interação entre as cores. É preciso muito experimentação e estudo. Observar obras de arte é uma das melhores referências para isso. São os artistas que experimentam mais nesse campo.

Processo de criação de ícones

(12 coment?rios)

Depois de ler o maravilhoso O Livro do Ícone de William Horton, fiquei craque no assunto. Não digo um especialista, mas lido com a tarefa com velocidade e sem tropeços. Apesar do livro ser antigo (1994), tudo as recomendações e dicas ainda tem validade e não só para o campo dos ícones, mas também para toda a interface gráfica. O autor analisa gestalt, teoria da cor e principalmente o processo criativo. Vou dar uma pequena amostra do que aprendi.

Não me perguntem onde achar esse livro. O que li desenterrei de uma prateleira da Biblioteca Pública do Paraná. A editora Berkeley foi comprada pela Siciliano e o livro não teve novas edições em português. Na Amazon tem a edição em inglês, para quem estiver mesmo muito afim.

Primeira dica no processo: pare de olhar para o PC. Sim, o papel ainda é o melhor suporte para rabiscar idéias e é assim que você deve começar. A vantagem é que você não precisa se preocupar com os enfeites, ganha velocidade e pode pirar mais. Ninguém vai olhar torto se você tiver uma idéia fraca desenhada de forma tosca. Porém, se você tiver uma idéia fraca desenhada de forma cuidadosa, eu serei o primeiro a atirar a pedra.

O autor do livro recomenda criar pelo menos três opções de cada ícone, mesmo que a primeira pareça fantástica. Depois quando for montado o mapa de pixels, pode ser que a idéia fantástica simplesmente não caiba na moldura. Ah, sim, antes de começar qualquer ícone, tenha certeza do seu suporte. Vetorial ou bitmap? 16px, 32px ou 48px? 256 ou 16 milhões de cores? Várias versões?

Leia mais.

Conceitos complexos com ícones

(1 coment?rios)

Estava almoçando num restaurante Indiano e vi um folheto maluco sobre um tal Calendário da Paz. Só de curiosidade abri e dei uma folheada, para dar risada desse esotéricos apocalípticos. Por acaso, encontrei um material muito rico para designers de interface lá no meio. O tal calendário é de origem Maia e usa ícones para identificar as tribos solares, que governam cada uma, dezesseis dias do ano. Note como o mago que fez essa arte conseguiu compactar muito bem conceitos complexos como sobreviver, catalizar e sobreviver em poucas linhas gráficas.

Leia mais.

O caminho mais belo e o mais rápido

(9 coment?rios)

Falei sobre caminhos do ponto de vista de quem abre a picada e agora vou tentar verbalizar como minha mente escolhe os caminhos que tomo ao perambular pelas praças de minha cidade. Curitiba é uma cidade bem arborizada e com planejamento urbano inegável, mas algumas de suas praças me deixam confuso.

Sou adepto dessa filosofia de escolher sempre o caminho mais bonito, mas às vezes estou com pressa demais para me dar a esse luxo. Da faculdade até o almoço e depois ao trabalho levo mais de uma hora andando. Nas regiões mais calmas, aproveito para ler no Palm enquanto ando (se não acredita, em breve postarei fotos para provar a nerdice). De qualquer forma, não estou muito disposto a um "belo passeio".

A praça que mais gosto nessa hora é a Eufrásio Corrêa, em frente ao Shopping Estação:

Planta da Praça Eufrásio Corrêa

Não preciso pensar muito para planejar o caminho mais rápido. Mesmo o caminho sendo meio monótono, não deixa de ser muito bonita, contando com uma bela fonte no centro. Pouca gente pára por lá, infelizmente.

Leia mais.

Cegueira de banner

(22 coment?rios)

Cansados de ver propagandas que não interessam e só irritam, os internautas passam a ignorar indiscriminadamente a área onde estão os banners. Não sou eu quem estou dizendo, são várias pesquisas científicas. Uns dizem que a causa é a acomodação por estímulo repetitivo (é como se acostumar com o barulho da obra ao lado), outros atribuem às más experiências prévias (banners inúteis e mentirosos) e outros à expectativa do usuário ao entrar no website (se entro numa página atrás de links, não vou ver banners). Eu acredito na soma dos fatores.

Pergunte aos seus amigos que não sabem que você faz banners para viver se eles costumam ver os banners na Internet. "Ah sim, claro", responderão. Pergunte o que eles viram anunciado. "Enlarge your penis" e outras sacanagens, talvez. Se clicaram qualquer que fosse, fazem parte de menos de 1% dos seus amigos. Note que essa é uma taxa de cliques comemorada pelas agências de publicidade online, hoje em dia. Antigamente, era 2% e mais antigamente ainda, era 7%.

Apesar da taxa de clique não ser a métrica de sucesso mais adequada para os banners, 1% de recall é ridículo para uma mídia que oferece tanto controle ao anunciante.

Leia mais.

Comece pelo epicentro do layout

(8 coment?rios)

Jason Fried propoz uma nova forma de começar um layout: primeiro o epicentro. Ao invés de começar pela logomarca, pelo cabeçalho ou pelo menu, o designer deve começar pelo ponto crítico do layout, a parte que se fosse retirada mudaria o propósito da página. Ou seja, se você vai projetar um site institucional cuja maior função é dar acesso a uma extranet com login e senha, comece por essa caixa. O resto irradia.

Nunca tinha parado pra pensar nisso, mas é realmente uma boa idéia. No Usabilidoido acertei, comecei pela coluna da esquerda definindo fundo, tipografia cores antes de fazer as demais. Mas na maioria dos projetos, acabo começando pela bendita logomarca, na ânsia de manter a identidade visual. Melhor começar pelo contéudo central, no caso de sites institucionais.

Porém, acredito que essa abordagem só vai funcionar direito se for feito um wireframe da página antes do design gráfico. Para descobrir o que vai ser mais importante numa página, é preciso analisar cada uma das partes e valorá-las. No wireframe, o pessoal costuma usar ou números ou gradações de cinza para indicar importância de cada bloco.

O poder do vermelho e do cinza

(17 coment?rios)

Estou aqui analisando o resultado das entrevistas que fiz com os usuários do site da minha Universidade e fiquei impressionad com o impacto que o vermelho teve na memória deles. Abre o site da UFPR, veja as cores do layout e depois veja a discrepância com o resultado da pergunta:

Que cores você consegue lembrar que tem no site da federal? (múltipla escolha)
grafico_corses_lembradas.gif

Eu sabia que vermelho é potente e que deve ser usado só em casos extremos porque atrai muito a atenção. Mas que ele é tão marcante assim eu não sabia! Pô, de vermelho na página da UFPR só tem num banner que pisca a cada 3 segundos. Tem mais alguns banners estáticos lá pra baixo, mas menos destacados. O laranja está praticamente na mesma proporção, mas não foi tão lembrado.

O mais engraçado é que quando perguntados o que existe na coluna central, ou respondiam que tinha banners irritantes ou simplesmente não se lembravam deles, confirmando a teoria da cegueira de banner. Ao invés de chamar a atenção, o banner acaba fazendo o contrário: esconde a informação que carrega. Dia desses escrevo um post só sobre isso.

Quem olhou com atenção o gráfico e a página da universidade deve estar se perguntando: "onde é que está o cinza que esse pessoal lembrou?" Tenho duas hipóteses ousadas: ou a cor do navegador (cinza por padrão no Windows 95/98) é invocada quando o usuário se lembra de uma página, ou então a cor cinza já foi tão usada em combinação com azul e branco que o usuário reconhece como padrão. O que vocês acham?

Escher, Lego e Gestalt

(3 coment?rios)

Um louco por Lego montou duas esculturas provando que os desenhos de Escher não são tão impossíveis quanto pareciam:

Ascending and Descending Relativity

Quem é webdesigner provavelmente vai babar nessas esculturas e muito mais nessas outras (link via Design-Art). Lego e Escher estão cotados como uma das maiores paixões de quem trabalha na área, porque estão diretamente relacionados com o ofício.

Leia mais.

Sinta a brisa.


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato