A utilização da Razão Áurea no design de websites Nelio Mayer Camargo Departamento de Informática (DIN) Universidade Estadual de Maringá (UEM) Av. Colombo, 5790 87020-900 Maringá PR Brasil nelio@webart.com.br Abstract. The aim of the present paper is to seeks for accomplishing studies and comprehending all the possible interrelations between men and an interface design using The Golden Ratio, as well a correlation whether developing a better comprehension or perception when using The Golden Ratio on a Web page design. For this reason the article will mine how The Golden Ratio happens in the world, in the animals and other places and verify how transpose it into a web interface. After verifying the possibilities, comprehension tests and interview with people who will be given tasks and quiz to be answered with questions related to the interface patterns based on The Golden Ratio will be made. Verifying whether The Golden Ratio can influence or not one more step in human life is expected. Resumo. O presente trabalho realiza estudos para compreender as inter-relações possíveis entre o homem e o design de uma interface utilizando a razão áurea, como também a existência de uma correlação entre desenvolver uma melhor compreensão ou percepção quando se utiliza a razão áurea na concepção de uma página web. Para isso o trabalho irá explorar como a razão áurea acontece no mundo, nos animais e em outros lugares e verificar como transpô-la para uma interface web. Depois de verificar as possibilidades, serão feitos testes de compreensão e entrevistas com pessoas que receberão tarefas e responderão questionários com perguntas relacionadas ao modelo de interface baseado na razão áurea. Espera-se com isso verificar se a razão pode influenciar também mais esta etapa da vida humana. Palavras-chaves: razão áurea, design website, interface web
1. Introdução O contexto tecnológico que a sociedade encontra-se atualmente, iniciado no fim do século XX, vem sofrendo grandes transformações com a chegada de novas tecnologias, em particular as associadas aos sistemas computacionais ligados à internet. Juntamente a estes avanços tecnológicos há o desenvolvimento de interfaces mais amigáveis há manipulação dos usuários, que cada vez mais utilizam a internet como meio de pesquisa e compra dos mais variados produtos. Neste sentido é crescente o número de pesquisas que procuram melhorar a interação humano-computador (IHC), principalmente com a utilização da internet. O desenvolvimento de websites tem se mostrado uma tarefa complexa que envolve conhecimentos multidisciplinares. É de domínio da literatura que o layout das páginas pode influenciar a qualidade da comunicação no processo de interação em IHC. Assim é importante e necessário o desenvolvimento de pesquisas nesta área. Uma possibilidade seria a de utilizar a razão áurea para promover o layout dessas páginas. Neste contexto é que surgiu a motivação para a presente proposta que visa estudar como a razão áurea pode auxiliar a criação de layouts de websites. A intenção é verificar quais as facilidades que a razão áurea pode prover a percepção, entendimento e compreensão de mensagens em uma página WEB, ou seja, a melhora na comunicação. O presente trabalho busca a existência de uma relação entre os elementos de uma interface web que pode ser privilegiada com o auxílio da razão áurea, haja vista que esta relação aparece em muitos lugares no nosso universo, desde galáxias, animais, plantas e insetos, podendo essa relação ajudar cognitivamente o homem no trabalho de comunicação através da interface. Um estudo relativo à avaliação de interfaces web justifica-se pelo aspecto de que a interação humano-computador vem sofrendo grandes avanços, mas ainda está longe de ser considerada satisfatória. Grande parte da evolução da sociedade moderna baseia-se no uso do computador e principalmente em seu acesso à internet, e na medida em que o uso do computador se difunde nas atividades profissionais e de lazer, mais evidentes são as necessidades de facilitar a sua forma de utilização. Tendo em vista esta conjectura é que veio a inspiração para desenvolver o presente trabalho, em verificar se já existe na literatura quais foram as experiências que já foram realizadas procurando integrar a razão áurea com o desenvolvimento de uma página web. Usuários de computadores, e por conseqüência de internet, enxergam as qualidades dos sites através dos recursos de interação. Não basta que o site possua grande precisão, é fundamental
que o usuário possa usufruir desta precisão. E, para isso, a facilidade de utilização ou o alto grau de usabilidade é pré-requisito importantíssimo. Neste sentido, e conhecendo a razão áurea e sua influência no universo é que torna-se interessante investigar se este fato pode também influenciar a comunicação ou interação de pessoas quando realizadas através da grande rede de computadores. O desenvolvimento de sites em geral e suas interfaces são hoje um grande diferencial no mundo dos negócios, muito importante para o desenvolvimento da economia de diversas empresas de diversos países, com seus comércios eletrônicos ou mesmo sites institucionais como forma de aumentar sua visibilidade e que começa a mostrar sinais de saturação. A facilidade de utilização do site poderá ser o diferencial que determinará os sobreviventes deste mercado que começa a entrar em disputa por espaços. Como a pesquisa será feita utilizando questionários e entrevistas é possível que se tenha um certo nível de subjetividade que será de difícil eliminação, devido aos diferentes níveis de experiência em utilização de computadores que cada usuário possui. O presente trabalho se propõe a verificar se a razão áurea pode ajudar no desenvolvimento de websites, visando compreender as inter-relações possíveis entre o homem e o design de uma interface, a existência de uma correlação entre desenvolver uma melhora na compreensão ou percepção quando se utiliza a razão áurea na concepção de um website. Para isso foram desenvolvidas três novas opções de layout para o website do DIN (http://www.din.uem.br/) baseados na razão áurea, usando as mesmas cores e informações e tipos de letras, e checado por meio de um questionário qual opção agradou mais aos usuários. E por fim estudos sobre o Eye Track, pois existe a desconfiança de que o olhar humano percorre o caminho da espiral logarítmica áurea, ao contrário do que relatou o artigo do autor Ivo Gomes. 2. Revisão da literatura A razão áurea já foi vista e percebida em vários elementos em nosso mundo. O livro O Poder dos Limites, de György Doczi, mostra a presença da razão áurea em vários elementos da natureza e até mesmo no corpo humano. A razão está presente em plantas como girassóis ou margaridas, artes das tramas de índios, ritmos musicais, espirais ou redemoinhos das nossas impressões digitais, peixes, conchas ou caracóis, galáxias, insetos, no corpo humano e em vários outros elementos. Na internet ainda não foram encontrados estudos relacionados à aplicação da razão áurea no desenvolvimento de websites.
2.1. Sobre a razão áurea Durante anos o homem buscou a beleza perfeita, a proporção ideal. Usamos a palavra proporção (ou razão) para uma relação comparativa entre coisas com respeito a tamanho ou quantidade. Na matemática esse termo é usado para definir uma igualdade do tipo: nove está para três assim como seis está para dois. A razão áurea nos fornece uma mistura das duas acepções, já que embora seja matematicamente definida, considera-se que revela qualidades agradavelmente harmoniosas. Segundo DOCZI(2008, p.2), ela é chamada razão áurea tanto por causa de sua singularidade quanto pelo alto valor atribuído a essa relação proporcional. Em qualquer linha existente, apenas um ponto a dividirá em duas partes desiguais nessa forma recíproca única. Tudo começou quando os gregos criaram o retângulo de ouro, onde o lado maior era dividido pelo menor e a partir desta relação tudo era construído. Em 1200, Leonardo Fibonacci criou aquela que pode ser a mais famosa sequência matemática, a série Fibonacci, utilizada para calcular o crescimento das populações de coelhos. A partir de dois coelhos, Fibonacci foi contando como eles se reproduziam e após várias gerações chegou a uma sequência onde um número é igual a soma dos dois números anteriores (1 1 2 3 5 8 13 21 34 55 89...). Observamos que a proporção de crescimento desta série é de 1,618. A razão áurea ou proporção divina trata sobre uma fascinante relação matemática baseada no número fi, definida por Euclides há mais de dois mil anos, devido a sua importância na construção do pentagrama, símbolo a que se atribui propriedades mágicas. A razão explora o melhor ponto de divisão de um segmento de reta em duas partes, e além disso, uma harmonia presente em vários elementos do nosso mundo. Segundo DOCZI(2008,p.13) o poder do segmento áureo de criar harmonia advém de sua capacidade única de unir as diferentes partes de um todo, de tal forma que cada uma continua mantendo sua identidade, ao mesmo tempo que se integra ao padrão maior de um só todo. A razão da seção áurea é um número irracional e infinito, do qual apenas se pode conseguir uma aproximação e, no entanto, tais aproximações são possíveis mesmo dentro dos limites de números inteiros pequenos. Ao descobrir isso, os pitagóricos encheram-se de admiração: sentiram o poder secreto de uma Ordem Cósmica. Isto deu origem à sua crença no poder místico dos números; também fez com que buscassem as harmonias dessas proporções para trazê-las aos padrões do cotidiano, elevando assim a vida a uma forma de arte. Gênios como Johannes Kepler, o astrônomo que concebeu as leis do movimento planetário, Pitágoras, o mago dos números, Euclides, Leonardo da Vinci, o gênio da ciência e das artes, Leonardo Fibonacci, Luca Pacioli, que realizou um grande estudo a este tema e
centenas dos mais ilustres matemáticos, geômetras, astrônomos e cientistas que abrilhantaram a história da humanidade e que acreditaram que existe uma forma melhor que todas as demais para dividir um segmento de reta. O valor exato da razão áurea (1,61803369887) é um número que nunca termina e nunca se repete. Esta razão vem sendo utilizada ao longo dos anos em monumentos como o Partenon, as Grandes Pirâmides e pelos mestres da ciência e da pintura em obras como Mona Lisa e A última ceia, de Leonardo Da Vinci. Coelhos, abelhas, caramujos, girassóis, constelações, artes e o homem, coisas teoricamente diferentes ligadas por uma proporção comum. 2.2. Razão áurea na natureza Encontramos com muita facilidade a razão áurea presente em vários elementos da natureza, desde a proporção de abelhas fêmeas por abelhas machos em uma colméia, espirais de um caracol, diâmetro das espirais de um girassol, os mais belos flocos de neve e seu padrão triangular repetido 12 vezes. Os flocos de neve com sua incrível beleza e múltiplas formas, apesar de diferirem entre si, todos apresentam como padrão comum a forma hexagonal, porém o padrão do floco de neve é triangular, sendo um triangulo repetido 12 vezes formando o hexágono completo como pode ser visto na figura 1. Figura 1. Floco de neve seccionado em 12 partes iguais. Apesar da diversidade de formas encontradas na natureza, é certo que existe uma unidade básica e leis de formação em tudo. Entre os vários exemplos que encontramos na
natureza está justamente o floco de neve cuja forma básica é o hexágono. Esta forma, além de comum, é característica de todos os cristais inorgânicos, que apresentam mais ordem e uniformidade que os padrões orgânicos. Também na natureza cósmica encontramos os mesmos padrões geométricos da natureza terrestre. A espiral é um exemplo: o padrão geométrico espiralado de determinadas galáxias é o mesmo, em escala cósmica, encontrado em conchas marinhas, no cavalo marinho, no girassol, nas ondas do mar, nos tornados, ou seja, todos seguem aproximadamente o traçado da espiral áurea. Figura 2. Espiral logarítmica O pentágono talvez seja a forma mais visível e simples, a natureza usa esta forma geométrica em vários seres vivos. São exemplos da forma pentagonal a petúnia, o jasmin estrela, a estrela do mar, a flor de cera e tantos outros exemplos que poderiam ser relacionados. Todas as plantas que possuem a forma pentagonal estão ligadas diretamente a razão áurea, pois ela esta em seu interior. Na área botânica também encontramos a razão áurea nos arranjos das folhas, na estrutura de pétalas, na composição das florestas e na distribuição de folhas em torno de um ramo de algumas plantas. A beleza do girassol não se resume apenas ao seu formato ou ao seu movimento diário atrás do sol. Ao olhar com atenção o seu centro, com facilidade verificamos que suas sementes estão distribuídas em várias espirais, tanto no sentido horário quanto no sentido anti-horário, mas o mais surpreendente é quando contamos a quantidade dessas espirais. A contagem do numero de espirais fornece quase que invariavelmente dois termos 21
e 34, 34 e 55, 55 e 89 ou 89 e 144, e novamente temos os números de Fibonacci. Essas quantidades de espirais também podem ser encontradas em outras formas vegetais, como folhas das cabeças das alfaces, no alho, na couve-flor, nas camadas das cebolas ou nos padrões de saliências dos abacaxis, das pinhas etc.. Outro exemplo interessante é a flor margarida, sendo suas espirais construídas a partir de vários círculos que crescem numa escala logarítmica e de vários segmentos de reta que partem do centro comum. Ao ligar os pontos de intersecção dos círculos e dos segmentos de reta, obtemos as espirais da margarida. O crescimento das espirais a partir do centro da margarida esta na mesma razão que o crescimento dos raios, ou seja, cada estágio de crescimento da margarida pode ser sobreposto ao novo e todos eles vão apresentar a mesma razão, exatamente a razão áurea. Suas espirais são geradas em direções opostas, por sinal, este padrão não é privilégio da margarida, ele aparece em abundância na natureza. Existem alguns padrões geométricos na natureza que são compartilhados entre animais, aves e vegetais. O girassol e a margarida, apesar das semelhanças possuem um tipo de beleza individual, mas também possuem algo em comum: a espiral. O pavão tem em sua plumagem em forma de leque e os chamados olhos de sua cauda, formam espirais logarítmicas idênticas as espirais que formam o padrão do centro da margarida. Assim a cauda do pavão e o centro da margarida compartilham da mesma formação geométrica para sua construção. Um segmento dividido na média e extrema razão possui uma divisão desigual, é o maior e o menor coexistindo, complementando um ao outro, e é desta combinação dual perfeita que surge a harmonia, a proporção natural, aquilo que quando vemos chamamos de belo. 2.3. Razão áurea no corpo humano Por volta de 1500, Leonardo da Vinci pegava cadáveres para medir a proporção do seu corpo e descobriu que nenhuma outra coisa obedece tanto a razão áurea do que o corpo humano. Podemos encontrá-la medindo a altura e depois dividir pela altura do umbigo até o chão, ou o braço inteiro dividido pelo comprimento do cotovelo aos dedos, os dedos inteiros dividido pela dobra central até as pontas, a perna inteira dividida pelo tamanho do joelho ao chão, da cintura à cabeça dividido pela medida do tórax à cabeça, em todos esses exemplos encontramos a proporção áurea de 1,618. Este número nos leva a uma grande criação de Leonardo Da Vinci, O Homem Vitruviano, mundialmente conhecida por ter Da Vinci para desenhá-la se baseado em um estudo do arquiteto romano Marcus Vitruvius sobre proporções humanas. Nela o umbigo
representa o centro do corpo humano que pode ser inscrito tanto em uma circunferência quanto em um retângulo. Porém o mais extraordinário fato que a cuidadosa observação da figura evidencia é a enorme quantidade de Razões Áureas existentes entre as medidas da figura. Figura 3. O Homem Vitruviano, de Leonardo Da Vinci. Da Vinci utilizou a razão áurea em várias de suas criações, como as famosas Monalisa e A Anunciação especialmente. 2.4. Razão áurea nas pinturas Antes mesmo do Brasil ser descoberto pelos portugueses, logo após o período Grecoromano, na Europa ganhava força um movimento chamado de renascimento, que buscava de forma intencional retomar os valores estéticos da Grécia antiga, momento em que a proporção áurea rumou de forma definitiva em direção às artes. Foi principalmente na pintura que o homem pode exprimir as proporções do corpo humano e foi nesta época que um dos maiores artistas da humanidade, Leonardo Da Vinci, utilizou a razão áurea em suas obras grandiosas. O primeiro exemplo é o quadro Anunciação, que representa a cena do Arcanjo Gabriel anunciando à Virgem Maria que ela conceberia Jesus Cristo. Uma das primeiras pinturas conhecidas de Leonardo, produzida entre os anos de 1472 e 1475. Se a decompusermos num
quadrado e num retângulo, o retângulo obtido será áureo. Essa divisão permite que o retângulo enquadre as partes mais relevantes da obra: a moça e o anjo. Repare nas quatro linhas traçadas, cada uma delas divide o quadro exatamente na razão Áurea e as quatro tocam pontos da figura que sobressaem por sua importância. A linha horizontal superior passa exatamente sobre o muro que separa o jardim em primeiro plano das árvores ao fundo no horizonte. A horizontal inferior passa sobre o tampo da pequena mesa de mármore em frente à Virgem, que reproduz a tumba de Piero e Giovanni de Medici na Basílica de San Lorenzo em Florença, Itália. As linhas verticais dividem a cena em duas partes que se destacam, o Arcanjo e a Virgem. A linha vertical esquerda é traçada sobre o eixo de uma das árvores em segundo plano, junto ao Arcanjo, e a linha vertical direita é traçada sobre a aresta da parede por detrás da Virgem. Este quadro destaca-se pela distribuição de massas, ou seja, as posições relativas das principais figuras da cena e sua localização em relação ao todo, passam uma sensação de harmonia e equilíbrio. Figura 4. Quadro A Anunciação, de Leonardo Da Vinci. Segundo exemplo, Mona Lisa, ou La Gioconda, uma das últimas pinturas de Leonardo e certamente a mais importante. Representa uma mulher de expressão enigmática, olhar místico e sorriso legendário. Da Vinci utilizou a razão áurea entre seu tronco e cabeça e entre os elementos que formam o seu rosto. Note como o tema principal se enquadra perfeitamente em um retângulo Áureo dividido por sua vez na razão Áurea separando a cabeça do busto. Porém as relações mais óbvias estão na própria face. Nas três reproduções à direita, como retângulos Áureos enquadram a face e a testa, o lado direito da face com a linha que passa pelo nariz e o olho e a posição da pupila. Olhando a face da Gioconda fica uma sensação geral de harmonia e equilíbrio à pintura. Este retrato é o mais famoso do mundo pelo equilíbrio de
suas linhas, pela genialidade do pintor e por sua capacidade de exprimir emoções sobre uma simples tela. Figura 5. Quadro Monalisa, de Leonardo Da Vinci. A razão áurea faz com que uma obra de arte se torne tão atraente e harmoniosa talvez por sua relação direta com as proporções do corpo humano, com o arquétipo de vários animais, com o crescimento vegetal ou a natureza como um todo. Por este motivo a razão passou a ser ensinada nas escolas de Belas Artes do mundo todo depois do renascimento, sendo a sua utilização diretamente relacionada a uma pintura melhor compreensível, harmoniosa e bela, despertando o desejo de todos que as observavam. Vários pintores a utilizaram em seus trabalhos, destacando: François Clouet, Albrecht Durer, Michelangelo, Jean Baptiste Simeon, Eugene Delacroix, Marie Clementine, Paul Gauguin, Edouard Vuillard entre outros.
2.5 Estudos sobre Eye Track O artigo Eye Track, do pesquisador Ivo Gomes, traz um estudo referente ao movimento que os olhos percorrem ao ver uma página web. Segundo Gomes(2004,p.1) o Eye Track é um aparelho que segue os olhos dos utilizadores pelo vídeo enquanto eles vêm uma página web. Depois os dados são analisados de forma a revelar padrões. Ao combinar dados de vários indivíduos, podemos descobrir padrões representativos que se aplicam à maioria da população. Será que o Eye Track está correto? Não seria este caminho o caracol áureo? Talvez os aparelhos não souberam registrar corretamente por se tratar não apenas do olho humano, mas sim da mente humana. 3. Metodologia da pesquisa Foram estudadas propostas e aplicações da razão áurea no mundo em geral, exploradas especificamente pelo autor György Doczi em seu livro O Poder dos Limites. O objetivo deste estudo foi evidenciar a razão áurea presente nas mais variadas formas naturais, e trabalhar mais precisamente a espiral logarítmica, o famoso caracol áureo. E com base neste estudo da razão áurea foram desenvolvidos vários layouts para páginas web chegando às três opções mostradas abaixo: Figura 6: Layout número um - baseado na razão áurea
Figura 7: Layout número dois - baseado na razão áurea Figura 7: Layout número três - baseado na razão áurea Através de um questionário e entrevistas com testes ligados a usabilidade, a interação humano-computador, procurou-se demonstrar que, a partir da análise das respostas dos
questionários, é possível descobrir se a razão áurea pode ou não contribuir para o aumento da usabilidade do website. A aplicação de questionários é uma das mais adequadas técnicas para mensuração da satisfação subjetiva. A utilização de questionários de avaliação baseados em critérios normativos merece um atencioso estudo de seus resultados (SHNEIDERMAN, 98). 4. Análise e discussão dos resultados Foram desenvolvidos vários protótipos, várias formas de layouts utilizando a razão áurea, de destes testes foram escolhidos três layouts diferentes, utilizando o mesmo padrão de cores e fontes para o site atual do Departamento de Informática (DIN) (http://www.din.uem.br/) da Universidade Estadual de Maringá (UEM). Os três layouts desenvolvidos juntamente com o original foram expostos para dez usuários responderem ao questionário com o intuito de avaliar a usabilidade, disposição e clareza das informações. Foram avaliados itens como harmonia, facilidade de leitura, beleza, diagramação, disposição das informações, atenção, atração e conforto visual. Com a aplicação do questionário percebeu-se que o layout número três foi mais agradável, tendo melhor aceitação pelos usuários, que revelaram se sentirem melhor com aquele modelo, pareciam já conhecer o layout antes mesmo de terem visto anteriormente. Tabela 1: Resultado da aplicação do questionário O resultado do questionário deixou claro que o modelo três é melhor que o modelo atual, sendo elogiado principalmente quanto à facilidade de navegação e obtenção de informações. Um estudo foi efetuado sobre o artigo Eye Track, que vai de encontro com o objetivo deste trabalho. O Eye Track revela uma linha que o olho humano segue no momento da abertura de uma página web, fazendo um percurso muito próximo ao que o caracol áureo faz. Sabendo que a razão áurea está presente em vários elementos já mostrados anteriormente, fica levantada a dúvida se os aparelhos do Eye Track souberam registrar tudo corretamente, sendo que não se trata apenas do olho, mas também da mente humana.
5. Considerações finais O presente artigo teve por objetivo identificar se a utilização da razão áurea do design de websites pode influenciar positivamente na interação humano-computador, haja visto que esta relação aparece em muitos lugares no nosso universo, desde galáxias, animais, plantas e insetos, podendo essa relação ajudar cognitivamente o homem no trabalho de comunicação através da interface. Para isso foram propostos três novos modelos de layouts baseados na razão áurea para o site do DIN (http://www.din.uem.br/), sendo o modelo número três o melhor aceito pelos usuários que responderam o questionário. O questionário mostrou-se, no experimento de pesquisa de opinião, uma excelente ferramenta para apuração do grau de satisfação dos usuários. A divisão das questões segundo os princípios de usabilidade, permitiu conhecer a satisfação dos usuários com relação aos modelos apresentados. O artigo contribui para uma melhoria no desenvolvimento de páginas web sabendo que a razão áurea pode auxiliar o processo de comunicação e usabilidade dos usuários com uma página web. O presente artigo também questiona o artigo Eye Track do autor Ivo Gomes, quanto ao resultado apresentado. Será que as máquinas souberam captar precisamente como o olho humano processa uma página web? Não seria na verdade o caminho percorrido a espiral áurea, já que ela está presente em vários elementos de nossa vida? Esta é uma das alternativas que devem ser estudadas com relação a usabilidade de páginas web. Existe a necessidade da realização de novos experimentos para verificar se a razão áurea pode contribuir para a usabilidade e ergonomia em IHC. 6. Referências GOMES, Ivo. Eye Track O que os utilizadores vêem quando visitam um site. 2004 DOCZI, György. O Poder dos Limites Harmonias e Proporções na Natureza, Arte & Arquitetura. Mercuryo, 2008. LIVIO, Mario. Razão áurea A história de fi, um número surpreendente. Record, 2008. SHNEIDERMAN, B.. Designing the user interface: strategies for effective human - computer -interaction. Addison-Wesley, 1998. BARROW, John D., The Constants of Nature. Vintage Books, 2002. LAWLOR, Robert. Sacred Geometry. Thames and Hudson, 1982.
COLE, K.C.. O universo e a chícara de chá A matemática da verdade e da beleza. Record, 2008. RECCO, C. BARBOSA. A arte renascentista. http://www.historianet.com.br. Acesso em: 22/09/2009. MELLO, JOSÉ LUIZ PASTORE. Arte, arquitetura e a razão áurea. http://www1.folha.uol.com.br/folha/educacao/ult305u14623.shtml. Acesso em 24/09/2009. GELONEZE, ANTONIO. A misteriosa razão áurea. http://galileu.globo.com/edic/113/eureca.htm. Acesso em 24/09/2009.