CENTRO UNIVERSITRIO BELAS ARTES DE SO PAULO

PS-GRADUAO EM DESIGN DIGITAL E NOVAS MDIAS

BRUNO PONCINELLI JORDO

A GESTALT APLICADA USABILIDADE

NO DESIGN DE INTERFACES WEB

SO PAULO
2014

BRUNO PONCINELLI JORDO

A GESTALT APLICADA USABILIDADE

NO DESIGN DE INTERFACES WEB

Artigo Cientfico apresentado como requisito

parcial obteno do ttulo de Especialista no
Curso de Ps-Graduao (Lato Sensu) em
Design Digital e Novas Mdias do Centro
Universitrio Belas Artes de So Paulo.
Orientador:
Gusmo

SO PAULO
2014

Prof. Me. Claudio de Oliveira

BRUNO PONCINELLI JORDO

A GESTALT APLICADA USABILIDADE

NO DESIGN DE INTERFACES WEB

Artigo Cientfico apresentado como requisito

parcial obteno do ttulo de Especialista no
Curso de Ps-Graduao (Lato Sensu) em
Design Digital e Novas Mdias do Centro
Universitrio Belas Artes de So Paulo.

BANCA EXAMINADORA

___________________________________________________
Prof(a) [Dr(a) Me(Ma)] Nome do(a) Professor(a) Convidado(a)

Prof. Me. Claudio de Oliveira Gusmo

Data da Defesa:

So Paulo,

de 2014

A GESTALT APLICADA USABILIDADE NO DESIGN DE INTERFACES WEB

BRUNO PONCINELLI JORDO1

RESUMO
Ao navegar pela web, possvel perceber que determinadas interfaces so inconsistentes ao
ponto de vista da percepo. Embora algumas vezes os motivos sejam bvios, em outras
somente o inconsciente capaz de captar as inconsistncias. Com o objetivo de auxiliar o
designer envolvido no processo de desenvolvimento de uma interface grfica a alcanar efeitos
positivos ao final do projeto, este estudo relaciona as heursticas da usabilidade de Nielsen aos
princpios da Gestalt.

Palavras-chave: Gestalt. Interface. Design. Web. Usabilidade.

ABSTRACT
By surfing the web, there's some inconsistent interfaces by the point of view of perception.
Sometimes the reasons are obvious; other times, they're far more subtle. Only unconscious mind
is able to capture those inconsistencies. In order to assist the designer involved in the development
of a graphical interface to achieve positive effects at the end of the project, this study relates the
usability heuristics with the Gestalt laws.

Keywords: Gestalt. Interface. Design. Web. Usability.

INTRODUO
Quando enxergamos um objeto, percebemos sua totalidade antes de enxergar
objetos individuais - vemos mais conjuntos do que a soma de partes, e mesmo quando
essas partes esto separadas, tendemos agrup-las como objetos inteiros. Esta
concluso foi obtida por uma escola da psicologia alem: A Gestalt. A partir dos estudos
relacionados com a percepo visual, os gestaltistas trouxeram alguns princpios ou leis
que explicam o porqu de algumas formas agradarem mais que outras, e por que vemos
as coisas de uma determinada maneira e no de outra.
Desde as primeiras teorias apresentadas pelos gestaltistas, passando pelo design
grfico para obter melhores resultados na percepo visual, existem milhares de estudos
para descobrir quais so as formas ideais para que imagens e textos no confundam ou
sature a viso de observadores. Estes estudos nos ajudam a compreender a percepo
humana.
Conhecer a percepo humana possibilitar utilizar determinadas prticas que
levam a resultados que agradam nossa percepo. Numa era digital, com tantos
websites, aplicativos e sistemas, torna-se necessrio levar em considerao princpios da
Gestalt durante o projeto de uma interface grfica, com a finalidade de entregar a melhor
experincia possvel para o usurio durante a interao com o sistema.

Aluno do curso de Ps Graduao (Lato Sensu) em Design Digital e Novas Mdias do Centro Universitrio Belas
Artes de So Paulo. brnpcn@gmail.com
1

Ao navegar pela web, possvel perceber que determinadas interfaces so

inconsistentes ao ponto de vista da percepo, causando desconforto. Embora algumas
vezes os motivos sejam bvios, em outras somente nosso inconsciente capaz de captar
tais inconsistncias. Desta forma, torna-se necessrio conhecer os princpios gestlticos
da percepo visual aplicadas ao design de interfaces web. Existe ainda o estudo dos
princpios que esto por trs da eficincia percebida de uma interface quanto sua
simplicidade e facilidade de uso: a usabilidade.
Este estudo procura relacionar a usabilidade em interfaces web atravs do ponto
de vista da percepo visual estudada pela escola da Gestalt, a fim de auxiliar o designer
envolvido no processo de desenvolvimento de uma interface grfica a alcanar efeitos
positivos ao final do projeto, aplicando um conjunto de mtodos visando usabilidade
aliados aos princpios da Gestalt.

1. GESTALT: FORMA E PERCEPO VISUAL

Efetivamente iniciada na Alemanha por volta de 1910 por Max Wertheimer,
Wolfgang Kohler e Kurt Koffka, a Gestalt uma importante Escola de Psicologia
Experimental que atuou principalmente no campo da teoria da forma tendo como
precursor o filsofo Von Ehrenfels, de Viena do final do sculo XIX.
De acordo com Gomes (2004), as teorias gestaltistas procuram explicar a relao
sujeito-objeto no campo da percepo, e como percebemos e damos sentido tudo a
nossa volta como objetos completos e no uma srie de partes independentes, o que d
sentido um princpio bsico: o inteiro interpretado de maneira diferente que a soma de
suas partes. No vemos partes isoladas, mas relaes, onde uma parte dependente de
outra.
Com isso, a Gestalt trouxe teorias sobre o fenmeno da percepo, identificando
que o que ocorre em nosso crebro no o mesmo que acontece em nossa retina. Foram
ento criados os princpios bsicos (ou leis de organizao da forma perceptual) da
Gestalt, que descrevem como organizamos nossa percepo visual.
Embora existam diversos princpios gestlticos, os mais relevantes para o contexto
deste estudo so: Figura-Fundo, Simplicidade, Unidade, Simetria, Continuidade,
Fechamento, Correspondncia Isomrfica, Semelhana, Proximidade e Experincia
Passada. Cada princpio explicado a seguir:
Princpio da Figura-Fundo: o princpio da Figura-Fundo descreve como
organizamos nossa percepo ao distinguir uma figura de um fundo e vice-versa.

Figura 01 Figura-Fundo Fonte: bit.ly/1jtd3F4

Princpio da Simplicidade: Tambm chamado de princpio da Boa Forma ou da

Pregnncia, descreve como percebemos as coisas da maneira mais simples possvel,
mesmo ao observar objetos complexos. Segundo Gomes (2004), a lei da simplicidade
seja talvez a mais importante das leis da Gestalt, pois nela pressupe-se que a
organizao formal do objeto, no sentido psicolgico, tender a ser sempre a melhor
possvel do ponto de vista estrutural.

Figura 02 Simplicidade: Primeiramente percebemos diversas linhas formando quadrados. Depois conseguirmos
perceber trs quadrados dispostos na diagonal descendente Fonte: bit.ly/1hEPBQH

Princpio da Unidade e Harmonia: O princpio da unidade pode ser entendido como

o conjunto de mais de um elemento configurando um objeto. Unidade a unio entre os
elementos, parecendo com que eles pertenam um ao outro. A Harmonia a busca de
conforto por parte do observador atravs de elementos, como cor e forma. Se os objetos
relacionados no aparecem dentro da mesma forma e/ou no possuem harmonia entre
si, o observador ir considerar que tais objetos no esto relacionados, o que poderia
levar a confuso visual.
Princpio da Simetria e Equilbrio: O equilbrio simtrico se identifica pela disposio
igual das imagens em torno dos eixos de equilbrio localizados nos eixos centrais. Quanto
maior a simetria de uma imagem ou grfico, mais simples se torna sua visualizao, e
mais fcil fica sua interpretao. O Equilbrio se caracteriza na distribuio dos elementos
o conjunto da imagem, que mesmo de forma irregular, transmita a sensao de
estabilidade.

Figura 03 Simetria: Tendemos a enxergar 3 pares ao invs de 6 caracteres Fonte: Acervo Pessoal

Princpio da Continuidade: Tambm chamado de Princpio do Alinhamento,

significa a tendncia de elementos acompanharem uns aos outros, permitindo a boa
continuidade de elementos como pontos, linhas, planos, cores, entre outros. Os objetos
alinhados so percebidos como pertencentes entre si.

Figura 04 Continuidade Uma srie de traos do a ideia de uma linha inteira que segue do canto esquerdo
inferior do quadro at seu canto direito superior Fonte: bit.ly/1hEPBQH

Princpio do Fechamento: O conceito de fechamento relaciona-se ao fechamento

visual, como se completssemos visualmente um objeto incompleto. Este princpio est
na tendncia em ignorarmos lacunas e completarmos linhas de contorno, especialmente
nos casos em que a forma do objeto familiar.

Figura 05 Fechamento Na imagem no h quadrados ou crculos completos mas nossa mente ignora informaes
contraditrias e preenche com informaes incompletas criando formas familiares Fonte: bit.ly/1hEPBQH

Princpio da Correspondncia Isomrfica: Se identifica pela maneira que

respondemos ao visualizar imagens, com base em nossas experincias no mundo fsico.
Ao ver uma imagem, estamos respondendo ao seu significado, associando-a com as
memrias que temos.
Princpio da Semelhana: A lei da semelhana ou similaridade mostra que os
elementos semelhantes se agruparo entre si, seja essa semelhana por cor, forma,
tamanho, etc.

Figura 06 Semelhana: na imagem da esquerda o "tringulo laranja" na verdade no existe. Na imagem direita
tendemos a enxergar colunas verticais de crculos e quadrados Fonte: bit.ly/1hEPBQH e Acervo Pessoal

Princpio da Proximidade: Objetos prximos uns dos outros parecem formar um

grupo s. Segundo Gomes (2004) Proximidade e semelhana so dois fatores que muitas
vezes agem em comum e se reforam mutuamente, tanto para constiturem unidades
como para unificar a forma.

Figura 07 Proximidade: Os crculos esquerda se agrupam em linhas horizontais, e os da direita, em colunas

verticais Fonte: Acervo Pessoal

Princpio da Experincia Passada: Tambm chamado de Princpio da

Aprendizagem, este princpio se relaciona com a associao de objetos e formas, que s
podem ser compreendidas se j os conhecermos, ou se tivermos conscincia prvia de
sua existncia. A experincia passada possibilita, por exemplo, que ao visualizarmos
somente uma parte de uma forma, e caso j tivermos visto sua forma inteira, a
reproduziremos inteira na memria (compreenso metonmica).

2. DESIGN DE INTERFACES WEB

Entre os diversos tipos de interface, est a interface web, que media uma aplicao
web e o usurio. Uma aplicao web aceita a entrada de dados e fornece sada atravs
de um navegador. Alguns exemplos comuns de aplicaes web so os webmails (Gmail)
e sites de e-commerce.
Os primeiros sites exibiam somente contedo e facilitavam a navegao para
acessar a outros contedos, no oferecendo tanta interatividade, pois as primeiras
verses de HTML (linguagem de marcao para produzir websites) no incluam
formulrios de entrada para que os usurios enviassem informaes. Mesmo quando a
entrada e sada de dados se tornaram padres em websites, a entrada de dados era
ainda ocasional. Quanto s aplicaes, estas deveriam ser instaladas em cada
computador separadamente. Hoje as aplicaes web so carregadas no computador do
usurio enquanto a pgina visitada, exibindo a interface grfica no prprio navegador
possibilitando total interao do usurio com o sistema.
5

No processo de interao usurio-sistema, a interface grfica a combinao de

software e hardware necessrio para viabilizar e facilitar os processos de comunicao
entre o usurio e a aplicao (Preece, 1994). Rocha (2003) define como a rea
preocupada com design, avaliao e implementao de sistemas computacionais
interativos para uso humano, e, ainda, com o estudo dos principais fenmenos
subjacentes a eles. As interfaces so produtos de trabalhos interdisciplinares para
aperfeioar a aprendizagem da funcionalidade de sistemas. Trata-se de uma matria
multidisciplinar que relaciona cincia da computao, design, ergonomia, psicologia,
sociologia, semitica, lingustica e reas afins.
Segundo Albergaria et al (2013), um ponto importante sobre as interfaces est
relacionado qualidade de um determinado sistema em relao interao. Neste caso,
acrescentar funcionalidades, no resulta na melhoraria da interao, mas ao mesmo
tempo no deve ser uma desculpa para um design pobre (Preece, 1994). Norman (1988)
faz uma relao de como interagimos com um carro: Interagir com carros, que
normalmente mais de 100 comandos no to difcil como programar um horrio de
gravao em um vdeo. Ele aponta que o feedback dado pelos comandos do carro mais
imediato e bvio. Alm disso, os smbolos utilizados em carros seguem determinados
padres e no se diferenciam tanto de um carro para outro. Assim, as pessoas que j
dirigiram um carro, sabem o que esperar em qualquer outro.
impossvel pensar em design de interfaces sem considerar o usurio que a
utiliza: Interface, interao e usabilidade no podem ser analisados separadamente.
Batista (2003) afirma que uma interface amigvel designa a interface capaz de
disponibilizar estmulos visuais, como cores, formas, fontes, texturas e outros elementos,
de forma equilibrada e harmnica, visando no saturar a viso nem sobrecarregar a
capacidade de assimilao do usurio diante do crescente fluxo informacional. Nesse
caso, o foco est no trabalho do designer envolvido no projeto de uma interface grfica.
Rocha e Baranauskas (2003) apontam que os objetivos de uma interface podem
ser resumidos em desenvolver ou melhorar a segurana, utilidade, eficcia, eficincia e
usabilidade de sistemas computacionais. Segundo Guedes (2009), dentre os elementos
que garantem uma boa interface, destacam-se as ferramentas funcionais, capazes de
melhorar a segurana, a usabilidade e a utilidade dos sistemas computacionais. A
usabilidade, nesse caso toma um papel crucial no desenvolvimento de uma interface pois
est ligada facilidade de aprendizagem e uso da aplicao.

3. USABILIDADE
Nielsen (2012) define usabilidade como um atributo de qualidade que avalia o quo
fcil de utilizar so as interfaces de usurio. Ele ainda afirma que a palavra "usabilidade"
tambm se refere a um conjunto de mtodos utilizados durante o processo de design com
a finalidade de melhorar a facilidade de uso. Alguns fatores que contribuem para a
usabilidade so a facilidade de uso, a intuitividade e a eficincia.
A usabilidade se define quanto ao uso do sistema. Assim, um sistema pode
proporcionar boa usabilidade para um usurio, mas pssima para outros. Pode ser fcil
de operar se o sistema for usado esporadicamente, mas difcil, se for utilizado
frequentemente, no dia a dia.
6

Para um e-commerce por exemplo preciso pensar projetar uma interface

adaptvel, permitindo que diferentes usurios, em diferentes estgios de competncia, em
diferentes tarefas e em diferentes ambientes fsicos, tecnolgicos e organizacionais,
possam alcanar seus objetivos com eficcia, eficincia e satisfao.
Para Nielsen (2012), a usabilidade na web uma condio necessria para a
sobrevivncia: As pessoas tendem a abandonar um site se difcil de usar, se a pgina
inicial no indica claramente o que uma empresa oferece ou o que os usurios podem
fazer, se os usurios se perdem, ou ainda se as informaes so difceis de ler ou no
atendem s perguntas dos usurios. Para o autor, o usurio no deve gastar muito tempo
tentando descobrir como interagir com uma interface pelo simples fato de existirem outros
milhares de sites similares disponveis. Abandonar a primeira "reao de defesa" que os
usurios tm quando encontram uma dificuldade em um website.
Obstculos devem ser evitados por quem projeta a interface. Muitas vezes o
motivo de abandono em um website est simplesmente na m disposio visual dos
elementos na interface grfica. Nesses casos, o inconsciente capta tais inconsistncias e
pode levar o usurio a se confundir.
Para esclarecer e compreender o que est por trs do que os olhos conseguem
enxergar ao observar e interagir com um sistema atravs de uma interface grfica,
preciso relacionar os mtodos de usabilidade com o ponto de vista da percepo visual
estudada pela escola da Gestalt.
Ao projetar uma interface, o designer deve evitar erros comuns. Nielsen (1993)
define as Heursticas da Usabilidade para o Design de Interfaces, uma lista com 10
parmetros para a avaliar a usabilidade de um sistema ou site, a fim de evitar erros
comuns cometidos durante o processo de design de interfaces grficas. A lista foi
baseada em 294 tipos de erros de usabilidade que o autor observou em suas anlises
que prejudicavam a experincia do usurio. Os princpios heursticos de Nielsen so:
Feedback, Metfora, Navegao, Consistncia, Preveno, Memria, Eficincia, Esttica,
Recuperao e Ajuda.

4. A GESTALT APLICADA USABILIDADE NO DESIGN DE INTERFACES WEB

As leis da Gestalt no s nos ajudam a entender como podemos alcanar a
simplicidade visual mas tambm, a compreender como formas "estranhas" e ambguas
podem ser difceis de serem decifradas. A aplicao destes conceitos ao projetar uma
interface grfica fundamental pois, alm de auxiliar na obteno de uma unidade
esttica, tambm resultar em melhorias de usabilidade. A aplicao dos princpios da
Gestalt exerce ainda um papel funcional na busca da forma adequada, auxiliando o
usurio a localizar as informaes contidas na interface. No processo de construo de
interfaces estes conceitos contribuem para melhorar a experincia do usurio final, alm
de auxiliar o trabalho do designer envolvido no projeto.
As Heursticas da Usabilidade de Nielsen so apresentadas a seguir e ento
relacionadas com os princpios da Gestalt, com o objetivo de aliar as boas prticas de
usabilidade ao campo da percepo visual e cognitiva humana, estudada pela psicologia
da Gestalt.

Visibilidade de Status do Sistema (Feedback): A interface do sistema deve

sempre informar o que est acontecendo, com feedback instantneo e apropriado para
todas as aes. Para que o usurio obtenha feedback claro sobre suas aes, o Princpio
da Simplicidade deve ser utilizado para que a mensagem grfica seja perfeitamente
organizada, da maneira mais simples possvel. Em alguns casos o Princpio da
Proximidade tambm deve ser aplicado, para que o usurio obtenha feedback imediato de
suas aes localizadas em seus pontos de interao formando graficamente um grupo s.
A figura 08 ilustra a aplicao dos conceitos ao arrastar arquivos para o Google Drive.
Quando o usurio aproxima um arquivo na rea de upload, a figura muda de cor,
indicando que este arquivo est prestes a ser enviado. A figura 09 traz um exemplo de
envio de arquivos no Basecamp, onde a progress bar revela o status do envio do arquivo.

Figura 08 Arrastando arquivos para o Google Drive - Fonte: Acervo Pessoal

Figura 09 Upload de arquivos em tarefas no Basecamp - Fonte: Acervo Pessoal

Relacionamento entre a interface do sistema e o mundo real (Metfora): A

interface do sistema deve falar a lngua dos usurios que a utilizam, com palavras,
frases, imagens e conceitos familiares, no lugar de termos do sistema que no fazem
sentido para o usurio final. Toda a comunicao do sistema precisa ser contextualizada
e ser coerente com o modelo mental do usurio. Nesse caso, preciso seguir as
convenes do mundo real, fazendo com que as informaes apaream em uma ordem
natural e lgica. Seguir as convenes do mundo real basear nas memrias que temos
com a partir de nossas experincias no mundo fsico. Esta uma aplicao do Princpio
da Correspondncia Isomrfica. Alm disso, associamos objetos e formas que s podem
ser compreendidas se j os conhecermos, onde aplica-se o Princpio da Experincia
Passada. A figura 10 exemplifica a aplicao dos conceitos ao apresentar os botes de
voltar, play, avanar e volume no Rdio. A figura 11 traz um exemplo de categorizao de
8

produtos no menu da loja virtual da Walmart utilizando cones que sugerem do espera-se
ver nas categorias.

Figura 10 Player do site Rdio - Fonte: Acervo Pessoal

Figura 11 Categorias de produtos no site Walmart - Fonte: Acervo Pessoal

Liberdade e controle do usurio (Navegao): comum usurios optarem por

algumas aes por engano e precisarem de uma sada de emergncia. preciso
facilitar a navegao na pgina, deixando claras as opes de desfazer ou refazer
qualquer ao no sistema. Mais uma vez, o Princpio da Simplicidade aplicado para que
a mensagem grfica seja organizada e simples. Se um layout complexo e ambguo, o
usurio pode se perder em como sair de um lugar indesejado ou desfazer uma ao,
gerando dvida e confuso, e por conseguinte, levando a aes no intencionais por
parte do usurio. A figura 13 traz o exemplo do Google Fonts com a ao para resetar
todos os filtros destacada.

Figura 13 Filtro de busca do Google Fonts - Fonte: Acervo Pessoal

Consistncia e Padres (Consistncia): O usurio no deve ter que se perguntar

se diferentes palavras, situaes ou aes significam a mesma coisa. preciso seguir as
convenes e nunca identificar uma mesma ao com cones ou palavras diferentes, por
exemplo. Segundo Reynoso e Olfman (2012) o usurio deve reconhecer padres lgicos
e racionais de relaes entre aes e efeitos ao interagir com o contedo da interface. Os
padres e convenes devem ter um certo nvel de consistncia dentro da interface
apresentada. Nesse caso, os Princpios da Experincia Passada e da Correspondncia
Isomrfica so aplicados no sentido de que o usurio ir representar as coisas da forma
com que ele simplifica o mundo real, e assim poder reconhecer certos padres e seus
significados correspondentes. Caso os elementos de uma interface no aparecerem
dentro da mesma forma o usurio pode considerar que eles no esto relacionados ao
design principal, levando confuso e, em consequncia, perda de consistncia. No
Gmail (Figura 14) a estrutura geral de clientes de e-mail preservada. A figura 15 mostra
que a estrutura mantida nas aplicaes do Google Document, Presentation e
Spreadsheet.

Figura 14 Gmail - Fonte: Acervo Pessoal

10

Figura 15 Google Document, Presentation e Spreadsheet - Fonte: Acervo Pessoal

Preveno de erros (Preveno): Segundo Nielsen (1993), ainda melhor que

uma boa mensagem de erro um design cuidadoso que possa preveni-los. preciso ou
eliminar condies sujeitas a erros ou apresentar aos usurios uma opo de confirmao
antes de completar uma ao. As informaes devem estar disponveis para os usurios
de tal forma que sugere a sua localizao no espao conceitual da interface. Em alguns
casos, podemos observar os Princpios da Semelhana e Proximidade mas
principalmente o princpio da Simplicidade deve ser aplicado para evitar possveis
confuses que possivelmente levariam aos usurios cometerem erros. A figura 16 ilustra
a edio de uma tarefa no Basecamp com a ao de cancelar, evitando alteraes
indesejadas por parte do usurio. Ao fazer uma publicao no Tumblr (Figura 17) o boto
de publicar desabilitado enquanto no h texto no campo da publicao e tambm no
momento em que clicado, evitando que o usurio faa a mesma publicao mais de
uma vez por engano. Esse comportamento conferido pela simples reduo de
opacidade do texto Publicar no boto.

Figura 16 Editar tarefa no Basecamp - Fonte: Acervo Pessoal

11

Figura 17 Boto Publicar do Tumblr - Fonte: Acervo Pessoal

Reconhecer ao invs de Relembrar (Memria): O usurio no deve ter que

lembrar informaes. Os objetos, aes e opes devem estas visveis para minimizar a
carga de memria do usurio e as instrues para a utilizao do sistema tambm devem
ser visveis ou facilmente recuperveis sempre que apropriado. Acionar a memria do
usurio faz com que cada ao precise ser revista mentalmente antes de ser executada.
Para isso, a ateno deve se voltar ao Princpio da Simplicidade e principalmente aos
Princpios da Correspondncia Isomrfica e da Experincia Passada. A figura 18 mostra
que a classificao tipogrfica no filtro de busca do Typekit simplificada graficamente
com um exemplo aplicado letra M, ilustrando cada grupo de fonte. No site da Gol
(figura 19) os assentos so exibidos de acordo com a sua posio real no avio,
facilitando a escolha.

Figura 18 Classificao Tipogrfica no Typekit - Fonte: Acervo Pessoal

12

Figura 19 Marcao de assentos no site da Gol - Fonte: Acervo Pessoal

Flexibilidade e eficincia de uso (Eficincia): O sistema precisa ser fcil para

usurios novatos, mas flexvel o bastante para se tornar gil para usurios experientes,
atendendo a ambos. O Princpio da Simplicidade deve ser aplicado aqui mais uma vez,
alm do Princpio da Experincia Passada, pois a eficincia da utilizao do sistema
atravs da interface pode depender do nvel de experincia que o usurio possui. A figura
20 exemplifica a aplicao dos conceitos. possvel criar uma tarefa a partir do menu
New ou simplesmente apertar Enter para cria-la direcionar o cursor para a prxima
linha, para criar uma nova tarefa.

Figura 20 Criao de tarefas no Asana - Fonte: Acervo Pessoal

Esttica e design minimalista (Esttica): preciso evitar informaes

irrelevantes ou desnecessrias. Cada unidade extra de informao compete com as
unidades relevantes de informao e diminui sua visibilidade relativa. O layout visual deve
respeitar os princpios de contraste, repetio, alinhamento e proximidade. Aqui se a
13

aplica diretamente quase todos os princpios da Gestalt, pois trata-se do layout em si. O
usurio utiliza uma interface para ter acesso ao contedo do sistema, sendo a prpria
interface uma parte desse contedo, e no somente uma forma de acess-lo. Nesse
caso, importante que o design seja esttico, agradvel, harmnico, equilibrado e
significativo. Dessa forma, os princpios importantes aqui so principalmente: da FiguraFundo, Simplicidade, Unidade, da Simetria, da Continuidade, do Fechamento, da
Semelhana e da Proximidade. Os layouts do Dropbox (Figura 21), do Rdio (figura 22) e
exemplificam a aplicao dos princpios. A interface do Rdio elimina distraes,
mostrando somente o que interessa para o ouvinte deixando as aes secundrias no
menu + de cada msica da playlist.

Figura 21 Dropbox - Fonte: Acervo Pessoal

Figura 22 Rdio - Fonte: Acervo Pessoal

Ajudar os usurios a reconhecer, diagnosticar e a recuperar de erros (Recuperao): As

mensagens de erro devem ser expressas em linguagem simples (sem cdigos), e devem
ser claras, indicando com preciso o problema e ainda sugerindo uma soluo
construtiva. Aqui, a importncia do Princpio da Simplicidade conferida mais uma vez,
pois atravs de mensagens grficas simples o usurio capaz de encontrar as solues
para erros cometidos. O Princpio da Proximidade tambm pode ser aplicado, indicando a
localizao do erro na prpria interface, funcionando como feedback instantneo. O
cadastro do GetKudos (figura 23) mostra o status dos campos validados e sugere o
14

usurio a corrigir os erros, marcados em vermelho para alerta-lo. O cadastro do Gmail

(figura 24) tambm auxilia o usurio localizando os campos com erro e sugerindo
solues.

Figura 23 Cadastro no GetKudos - Fonte: Acervo Pessoal

Figura 24 Cadastro no Gmail - Fonte: Acervo Pessoal

Ajuda e documentao (Ajuda): Mesmo que seja melhor que o sistema seja
utilizado sem documentao, pode ser necessrio o fornecimento de ajuda e
documentao. Qualquer informao deve ser fcil de ser encontrada, focada na
necessidade do usurio, com passos concretos a serem realizados, e ainda devem ser
curtas e objetivas. De acordo com Reynoso e Olfman (2012), os erros so parte da
atividade humana, por isso importante projetar uma fonte de apoio como ltimo recurso
- estes devem estar disponveis, porm sutilmente. No entanto, a ajuda deve ser apenas
15

para a ao atual, no como um menu de ajuda extenso em que os usurios precisem

procurar ali o que precisam. O Princpio da Simplicidade deve ser aplicado, bem como em
alguns casos, os Princpios da Proximidade e Semelhana, chamando a ateno do
usurio para os guias rpidos caso existam dvidas a respeito do funcionamento de um
sistema. No Basecamp (figura 25) o boto de ajuda no faz parte da navegao,
localizado discretamente esquerda da tela. Ao mesmo tempo est presente para o caso
de dvidas sobre a aplicao. O Typekit (figura 26) fornece guias rpidos e discretos para
sanar as dvidas rapidamente,

Figura 25 Help do Basecamp - Fonte: Acervo Pessoal

Figura 26 Guia do Typekit - Fonte: Acervo Pessoal

Para facilitar a visualizao da relao entre as leis da Gestalt e as heursticas da

usabilidade, foi elaborado um diagrama (figura 27) baseado no artigo de Reynoso e
Olfman (2012), onde os autores combinam a teoria da Gestalt com guidelines do design
de interfaces, analisando o impacto causado pelas combinaes e medindo os resultados
obtidos ao final do projeto.

16

Figura 27 Diagrama comparativo das heursticas da usabilidade com os princpios da Gestalt - Fonte: Acervo Pessoal

CONSIDERAES FINAIS
Perceber os princpios da Gestalt e compreender sua aplicao ao conjunto de
mtodos reunidos nas heursticas de usabilidade em interfaces web pode ser clara em
alguns casos, porm em outros preciso certo nvel de abstrao para compreend-las.
Atravs da combinao entre a abordagem da Gestalt com a usabilidade no design
de interfaces web, esperado entregar melhor qualidade nas interfaces aos usurios,
levando-os uma experincia mais prxima da ideal e com as possveis frustraes
reduzidas ou at eliminadas.
Assim, acredito que embora exija mais ateno e testes especficos durante o
processo de design de uma interface por parte do designer envolvido no projeto, essa
abordagem poder impactar significativamente na experincia interativa dos usurios ao
utilizarem o sistema.

17

REFERNCIAS

ALBERGARIA, Elisa; BAX, Marcello Peixoto; PRATES, Raquel Oliveira. Interao

Humano Computador Na Cincia Da Informao. XIV Encontro Nacional de Pesquisa
em Cincia da Informao (ENANCIB), 2013.
BATISTA, C. R. Desenvolvimento de interface para ambiente hipermdia voltado ao
ensino de geometria sob a tica da ergonomia e do design grfico. Florianpolis,
2003. f. Dissertao (Mestrado em Engenharia de Produo) Programa de PsGraduao em Engenharia de Produo, Florianpolis, 2003.
GOMES, Joo. Gestalt do objeto: Sistema de Leitura Visual da Forma. 6. Ed. So
Paulo: Escritura, 2004.
GUEDES, G. Interface Humano Computador: prtica pedaggica para ambientes
virtuais. Teresina: EDUFPI, 2008.
NIELSEN, Jakob. Usability Engineering. Morgan Kaufmann. San Francisco, Ca. 1993.
NORMAN, D. A. The Psychology of Everyday Things. Basic Books, New York, 1988.
PREECE, J.; Rogers, Y.; Sharp, H.; Benyon, D.; Holland, S. e Carey, T. HumanComputer Interaction. Addison Wesley, England. 1994.
REYNOSO, Juan Gmez; OLFMAN, Lorne. The Impact of Combining Gestalt Theories
with Interface Design Guidelines in Designing User Interfaces. AMCIS 2012
Proceedings. Paper 17. 2012.
ROCHA, Helosa; BARANAUSKAS, Ceclia. Design e avaliao de interfaces humanocomputador. Campinas, SP: NIED/UNICAMP, 2003.
SCOTT, Bill; NEIL, Theresa. Designing Web Interfaces. OReilly Media. Sebastopol, CA,
2009.