Aluna: Andréa Silva Souza · O design não é uma atividade neutra, mas resultado de um processo...

76
Universidade do Estado do Pará UEPA Centro de Ciências Naturais e Tecnologia CCNT Bacharelado em Design com Habilitação em Projeto de Produtos Aluna: Andréa Silva Souza Estudos ergonômicos e de design emocional aplicados a interfaces para web Belém PA 2010

Transcript of Aluna: Andréa Silva Souza · O design não é uma atividade neutra, mas resultado de um processo...

Universidade do Estado do Pará – UEPA

Centro de Ciências Naturais e Tecnologia – CCNT Bacharelado em Design com Habilitação em Projeto de Produtos

Aluna: Andréa Silva Souza

Estudos ergonômicos e de design emocional aplicados a

interfaces para web

Belém – PA

2010

Andréa Silva Souza

Estudos ergonômicos e de design emocional aplicados a

interfaces para web

Trabalho de Conclusão de Curso apresentado como requisito final para a obtenção do grau de Bacharel em Design pela Universidade do Estado do Pará. Orientadora: Profª Vanessa Watrin

Belém – PA 2010

Andréa Silva Souza

Estudos ergonômicos e de design emocional aplicados a

interfaces para web

Trabalho de Conclusão de Curso apresentado como requisito final para a obtenção do grau de Bacharel em Design pela Universidade do Estado do Pará.

Data de aprovação: ___/___/2010

Banca examinadora:

___________________________________________

Profª. Vanessa da Rosa Watrin

Msc. em Engenharia Civil

Universidade Estadual de Campinas

___________________________________________

Prof°. Adolfo Francesco de Oliveira Colares

Mestre em Engenharia Elétrica – Computação Aplicada.

Universidade Federal do Pará

___________________________________________

Profa. Ana Paula Nazaré de Freitas

Mestre em Políticas Públicas e Sociedade

Universidade Estadual do Ceará

AGRADECIMENTOS

Agradeço, primeiramente, a Deus por toda benção que ele me deu durante toda a minha trajetória de vida e também por ter iluminado a minha inteligência, o meu caminho, e a minha alma plenamente com seu amor e bondade. Que o Senhor esteja sempre dentro do meu coração e nos do que me cercam também.

Depois a minha família pelo suporte e incentivo que me deram, pela paciência comigo durante os tempos de estudo e nos altos e baixos durante os últimos anos. Especialmente aos meus pais: Carlos Leônidas da Silva Souza Sobrinho e Telma Nazaré da Silva Souza.

A minha orientadora professora Vanessa Watrin pelo interesse e dedicação

ao trabalho de conclusão que desenvolvi, aos outros professores que

proporcionaram a honra de participar da minha banca: Prof°. Adolfo Francesco de

Oliveira Colares; Profa. Rosângela Gouvêa Pinto.

Aos que trabalhavam junto comigo no estágio da Microcamp Internacional

incluindo todos os funcionários (as); secretárias (os); estagiários (as); professores (as); a coordenação; e principalmente as pessoas que acreditaram no meu potencial dando a oportunidade de aprender muito, crescer como pessoa, tornando-me uma profissional muito melhor, tenho uma enorme gratidão: Emerson Dornelas e Lauro Kleydson.

Ainda não posso deixar de agradecer expressando meu muito obrigado a todos meus colegas de turma da UEPA e amigos (as) que contribuíram direta ou indiretamente nos quatro anos de curso que vivenciei, dentre essas pessoas gostaria de citar: Ana Carolina Almeida Souza; Aline Oliveira; Francionete Lira; Jocilene Oliveira; Pablo Luiz Rocha; Priscila Guimarães; Marília Machado; Talita Beatriz do Vale.

“[...] O design não é uma atividade neutra, mas resultado de um processo consciente

e intencional, que expressa o modo de interpretar a realidade de seus criadores [...]”

(Dunne e Raby, 2001; Attfield, 2000; Cardoso,1998)

SUMÁRIO

1. INTRODUÇÃO ................................................................................................ 10

2. ERGONOMIA E DESIGN ............................................................................... 12

3. DESIGN EMOCIONAL ................................................................................... 16

4. METODOLOGIA ............................................................................................. 22

4.1 PROJETO INFORMACIONAL: ........................................................................... 23

4.1.1 Informações sobre o Produto ....................................................................... 23

4.1.2 Ciclo de Vida .................................................................................................. 23

4.1.2.1Projeto ........................................................................................................... 24

4.1.2.2 Uso ............................................................................................................... 24

4.1.3 Atributos do Produto ..................................................................................... 24

4.1.3.1 Atributos básicos ........................................................................................... 24

4.1.3.1.2 Expressividade ........................................................................................... 24

4.1.3.1.3 Estética ...................................................................................................... 24

4.1.3.2 Atributos materiais ........................................................................................ 24

4.1.3.2.1 Geométricos............................................................................................... 24

4.1.3.2.2 Dimensões ................................................................................................. 24

4.1.4 Requisitos de Projeto .................................................................................... 24

4.1.5 Especificações de Projeto ............................................................................ 25

4.1.6 Levantamento das Necessidades ................................................................. 32

4.1.6.1 Resultados da pesquisa de campo ............................................................... 32

4.1.6.1 Resultados e sua apresentação na forma gráfica ......................................... 36

4.2 PROJETO CONCEITUAL ................................................................................... 49

4.2.1 Função ............................................................................................................ 50

4.2.2 Design ............................................................................................................. 50

4.2.3 Ergonômico .................................................................................................... 50

4.3 BRIEFING ........................................................................................................... 51

4.3.1 Natureza do projeto e contexto .................................................................... 51

4.3.2 Análise setorial .............................................................................................. 52

4.3.3 Objetivos do negócio e estratégia de design .............................................. 55

4.3.4 O público alvo ................................................................................................ 55

4.3.5 Prazo ............................................................................................................... 56

5. MEMORIAL DESCRITIVO E JUSTIFICATIVO .............................................. 57

5.1 PROJETOS PRELIMINARES ............................................................................. 57

5.2 PROJETOS DETALHADO .................................................................................. 58

5.2.1 Wireframe ........................................................................................................ 60

6. CONCLUSÃO ................................................................................................. 69

REFERÊNCIAS ........................................................................................................ 70

RESUMO

SOUZA, Andréa Estudo ergonômico e de design emocional aplicados a

interfaces para web Universidade do Estado do Pará, Belém – Pa, 2010.

O tema deste trabalho de conclusão de curso aborda o estudo tanto da ergonomia quanto do design emocional aplicados para construção de sites na web. Nele, os conceitos e metodologias abordados são aplicados com ênfase em aprimorar projetos de sites, facilitando entendimento, causando conforto visual, emocional e explicando a importância de tudo isso quando se pensa em projetar websites. Nos dias atuais muitos profissionais leigos (que não são designers) acabam não tendo uma visão e percepção técnica do assunto fazendo trabalhos apenas por intuição. O resultado depois de todo o processo de estudos foi realizar um projeto de layout de site com base no que foi aprendido. Palavras chave: design; site; usabilidade; projeto; emoção.

ABSTRACT

SOUZA, Andréa Estudo ergonômico e de design emocional aplicados a

interfaces para web Universidade do Estado do Pará, Belém – Pa, 2010.

The theme of this work approaches the studies of ergonomic and emotional design

applied for the construction of websites in internet. The concepts and methodologies

intents are to improve the websites projects making easier to understand causing

visual comfort emotional and explaining the importance of everything when you think

about websites projects. Unfortunately there are many people who are not designers

ending up doing works just by intuition. The result after all of these processes was

making a project of a website layout based on what were learned using Baxter’s

methodology and also the techniques of the grid in graphic design.

Key words: design; site; usability; project; emotional.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 10

1. INTRODUÇÃO

A história do design começou na época da revolução industrial no século

XVIII na passagem da manufatura para a industrialização mecânica (FASCIONI,

2007). Os primeiros inventos como a máquina a vapor ou as locomotivas

aceleravam mais ainda o transporte de mercadorias e isso acabava contribuindo

para o crescimento e desenvolvimento da economia. Logo depois, vem a era das

invenções, onde começam a surgir novos produtos no mercado fabricados em

escala.

O design tornou-se presente finalmente quando esses mesmos produtos

precisaram ser aperfeiçoados com o passar do tempo e o aprimoramento da

tecnologia. O professor John Heskett (Escola de Design em Hong Kong –

Polytechnic University) diz que o design é: “projetar para desenvolver um produto”.

Então, podemos pensar que design é planejar e produzir bens e serviços para as

pessoas, porém de acordo com as suas necessidades. Design gráfico é visto hoje

como um diferencial para a identidade visual da empresa, produto, logo etc.

Traduzem os anseios, expectativas do cliente e exterioriza a qualidade do serviço

prestado.

Isso também inclui a área de desenvolvimento de sites que é o webdesign

que pode ser definido como o projeto de websites com foco na área do design de

produtos. Ou seja, ele vai englobar os conceitos e metodologias projetuais do design

para construir e desenvolver o layout mostrando exatamente quais seriam as suas

funções, como ele vai ser entendido pelos usuários, mas tudo dependendo do

público a quem se destina e o tipo de site que se quer projetar. E assim, segundo o

tema deste trabalho, incluímos também a questão da ergonomia e do design

emocional ao mesmo tempo, em que permitem um maior aprofundamento sobre as

questões da interação entre usuário e o site com o fim de transmitir o

compartilhamento de emoções e experiências positivas.

Na elaboração deste trabalho foi utilizado como embasamento: artigos,

reportagens de revistas, livros entre outros sites profissionais do ramo ou

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 11

que se especializaram posteriormente na área. Dentre os principais autores estão:

Claudia Mont’alvão; Vera Damásio (ambas associam ergodesign e emoção) e Don

Norman (design emocional).

Este trabalho de conclusão de curso se propôs a colaborar para a melhoria

das técnicas a serem aplicadas na hora de se projetar um site, assim como,

tornando-se um material de referência sobre o assunto (tendo em vista que não há

tantos trabalhos, realmente feitos por designers, acerca do assunto e tema

abordado).

Vale ressaltar que, neste trabalho o processo metodológico não envolverá

especificamente o aprofundamento na linguagem de programação e sim, nos manter

dentro dos limites da área do design. O que vai interessar realmente é o processo

criativo do projeto de um site envolvendo a parte da ergonomia, usabilidade e o

design emocional. Dando enfoque no desenvolvimento do wireframe e simular

graficamente como o site irá funcionar na tela do navegador.

Por fim, espera-se o reconhecimento da importância da ergonomia e do

design emocional aplicadas na área de websites, para que os mesmos sejam

produzidos com um olhar diferente do que se vê normalmente. Objetiva-se também

demonstrar isso nos argumentos científicos ao longo do trabalho acrescentando um

projeto final de um layout de site, mostrando o portifólio virtual de ilustração.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 12

2. ERGONOMIA E DESIGN

Primeiramente, é importante atentar para os conceitos básicos que

envolvem a ergonomia: Ergo (trabalho) nomos (leis) que vem da palavra:

“ergonomia”, que é: o estudo da adaptação do homem a máquina e ao meio

ambiente. Assim, ergodesign seria uma união da ergonomia com o design, “[...]

enquanto o ergonomista estuda interação entre os seres humanos e as tecnologias,

cabe ao designer o desenho projetual das interfaces entre tecnologia e seres

humanos [...]” (LINDEN, 2007 p.24).

No meio deste conceito, relaciona-se um assunto significante que se chama:

usabilidade. A usabilidade: “[...] é sinônimo de facilidade de uso. Se um produto é

fácil de usar, o usuário tem maior produtividade: aprende mais rápido e usa,

memoriza as operações e comete menos erros. [...]” (USABILIDOIDO, 2004)

A importância de aplicar estes conceitos ao webdesign está nos

fundamentos na construção de um site, dentro das especificações ergonômicas

facilitando a compreensão do mesmo, deixando-o mais acessível e com organização

correta em sua estrutura.

Jakob Nielsen interpreta em seu livro que dentre os problemas mais

relevantes, presentes nas páginas da internet, estão: links que não mudam de cor; o

botão de “voltar”; anúncios; violação de convenções da web; texto denso. Todos

esses seriam os mais graves erros em sua classificação, pois aparecem com

freqüência devido ao número de vezes que são repetidamente cometidos por

webdesigners, ocasionando certo impacto pelas dificuldades que causam, se

transformando em obstáculos, gerando perda de tempo. Por ultimo, a persistência

pelas mesmas coisas acontecendo sucessivamente causa a desistência do usuário

em permanecer dentro na página.

Links servem como uma maneira do usuário entender onde ele está, estava e

vai estar (presente, passado e futuro). Quando os links não mudam de cor, não

existe nada que indique que já se esteve naquele mesmo link antes e resulta em

problema de usabilidade.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 13

Isso se relaciona com um estudo feito sobre a memória do ser humano. E no

design pode ser aplicado como uma questão ergonômica também, como explicado

no artigo do site how stuff works (como as coisas funcionam), do professor Marshall

Brain, da Universidade Estadual da Carolina do Norte, onde há uma citação sobre

memorização humana. Ele descreve que temos três tipos básicos de memória: a

sensorial, curto prazo e longo prazo e que a primeira é ligada a percepção do nosso

padrão visual como captamos sons, toques etc.(HOW STUFF WORKS, 2010).

O segundo tipo vem depois, onde às informações se mantém por segundos

apenas e quanto mais nós repetirmos a informação mais ela se torna memória de

longo prazo, na qual, guardamos informações por um bom espaço de tempo ou até

para sempre.

Todavia os estágios para que alguém memorize de forma satisfatória um

site, esta na ideia de: quanto mais forte for o estimulo mais facilmente ele será

detectado e as respostas serão mais rápidas, trazendo a sensação positiva e depois

quando provocada, através do estimulo sensorial uma recepção e reconhecimento

da informação, a pessoa pode processar tudo se baseando até mesmo em

experiências anteriores ou fatores individuais (personalidade, nível de atenção, etc.).

(ITIRO, lida 2005)

Sobre o argumento de o botão voltar, considera-se que é um dos recursos

mais usados em sites, pois como ele é clicado várias vezes as possibilidades de

desfazer ações e refazê-las é maior. Então é possível retornar ao ponto desejado

com facilidade sem se perder e o tempo é mais bem aproveitado porque

rapidamente encontra-se a página anteriormente visitada. Normalmente este botão

pode localizar-se no final da página depois de todo o texto ou também no topo antes

do texto a ser lido.

Já os anúncios na web, estes têm tendência de serem ignorados e até

atrapalharem a navegação. Muitas das vezes estão logo em cima do campo de

visão, logo na primeira página e daí o individuo tende a passar batido, pois quem

não quer ler e não se interessa o fecha. Outros pecam por não possuir opção de

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 14

fechar e simplesmente está lá fazendo parte da página, como alguns deles são bem

coloridos a poluição visual é acentuada. O ideal talvez seja que se tenha uma página

exclusiva para propagandas, e dependendo da vontade do usuário, ele poderá clicar

nela e olhar o que se tem para oferecer ao invés da obrigação de ter que visualizar o

que não é de seu interesse.

Na parte de violação de convenção da web, Nielsen afirma que as pessoas

acostumadas a ver determinado padrão de site esperam que todo o resto siga a

mesma linha de exemplo ou superior. Ou seja, o site deve ter seus valores básicos

juntamente combinados com o que o cliente quer dentro das suas expectativas, ou

até mesmo algo a mais seja oferecido a ele (promoção; bônus etc.). É como se eles

aprendessem a se acostumar com tais serviços exigindo que todo o resto também

tenha. As comparações acontecem principalmente quando temos concorrência. O

mínimo é: satisfazer pelo menos as expectativas primordiais e no futuro pensar em

aprimoramentos.

Por fim, temos a questão do texto denso, um texto muito longo e difícil para

extrair informações, durante a leitura, chega a ser tedioso. Sempre nessa ocasião

recomenda-se ir direto ao ponto logo no início com uma linguagem fácil de

compreender e no decorrer do texto prestar atenção aos detalhes daquela

informação principal sem usar termos técnicos complicados. Vale ressaltar que,

demora mais para ler um texto na tela do computador do que em um livro normal

devido à resolução do monitor, que é diferente de olhar para um livro impresso

(WATRALL, Ethan; SIARTO, Jeff, 2009).

Escrever para web é diferente de escrever para um jornal ou uma revista. No

livro de Ethan Watrall e Jeff Siarto (Head first - Use a cabeça! webdesign) ambos da

Michigan State University, é comentado que o método de leitura das pessoas em um

site se assemelha a um processo de escaneamento de informações, ou seja, elas

passam rapidamente o olhar por todo texto a procura do que querem ou

simplesmente para ler tudo mais rápido. Isto explica o grau de importância do

conteúdo começar da conclusão, do que é mais significante, até o final. Hoje em dia

mais pessoas acessam a internet para pegar seus arquivos com mais facilidade e

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 15

rapidez, então é mais um motivo a ser levado em consideração antes de pensar em

escrever um texto longo no seu site.

Em um artigo de 2009, escrito no site da revista ABC design (ABC DESIGN,

2009), um professor da Universidade Federal de Santa Catarina (UFSC) Eugenio

Merino escreveu sobre a importância da ergonomia em produtos. Ou seja, um site

ergonômico faz com que ele seja um produto diferenciado dos demais com a

abrangência de poder ser utilizado por todos independente da situação social,

cultural, idade, sexo etc. Quanto mais ele criar efeitos desejáveis mais será

adequado ao ser humano, pois considera as habilidades dos usuários respondendo

a aspectos físicos e interindividuais (personalidade, qualificação...).

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 16

3. DESIGN EMOCIONAL

Linden descreve em seu livro: Ergonomia e Design: prazer, conforto e risco

no uso de produto, um pouco da história de como surgiu o design emocional. Em

1997, aconteceu um congresso da Internacional Ergonomics Association (IEA) na

Finlândia abordando a ergonomia de produto que tratou da relação do ser humano

no uso dos seus objetos incluindo temas como estética, prazer e emoção.

O design emocional é um assunto muito ligado a ergonomia, devido à

interação entre o ser humano e o objeto, por conseqüência é primordial para tornar

fiel a lealdade do cliente em relação ao serviço da empresa ou determinada marca

de um produto. Só que o tipo de interação que se discute no design emocional é a

do afeto do homem com o produto. Alguém poderia dizer: “eu amo o meu celular”,

por exemplo. Literalmente pessoas amam consumir determinados produtos e a

marca passa a fazer parte da vida do individuo ás vezes passando de pai para filho.

Se refletirmos, talvez até usamos os mesmos produtos que foram dos nossos avôs,

pais e, por mais que o outro produto “Y” seja a mesma coisa e não mude nada em

termos de qualidade, preço, pode existir clientes que não fazem questão de

experimentar outra coisa porque preferem o que já conhecem. (MONT`ALVÃO

Claudia; DAMÁSIO, Vera, 2008).

Um dos argumentos, para a razão de toda essa confiança, está na emoção.

Quando divulgamos cartazes, anúncios, ou seja, o que for é com intuito de, além da

comunicação, convencer o outro despertando o sentimento da vontade de conhecer.

Dependendo do quanto dará certo, torna a experiência satisfatória e não só o cliente

retorna como pode chamar outro com ele e assim por diante. O negócio tende a

crescer à medida que a aceitação também aumenta.

Aprofundando-se mais no que está por trás do design emocional podemos

primeiro definir o que vem a ser emoção: significa segundo o mini Aurélio dicionário

da língua portuguesa: “1.o ato de mover-se emocionalmente. 2. Perturbação de

espírito provocada por situações diversas e que se manifesta como alegria, tristeza,

raiva, etc.; 3. Estado de ânimo despertado por sentimento estético, religioso, etc.”

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 17

É importante ressaltar a diferença entre emoção e o sentimento. O médico

neurologista e neurocientista Antonio Damásio afirma que ambos são percebidos

pelo nosso sistema cognitivo e sistema sensorial, ou seja, temos pleno

conhecimento e somos capazes de refletir sobre eles.

Tanto a emoção como o sentimento são projetados através do nosso

sistema afetivo estimulados por acontecimentos, objetos ou pessoas. Ele explica

que somente a emoção pode ser dramatizada havendo manisfestação externa do

corpo( vergonha ficamos vermelhos, por exemplo) ao contrário do que ocorre com o

sentimento em plano interno sendo uma experiência mental e privada.

Segundo estudos do engenheiro eletricista Donald Norman professor da

Universidade Northwestern o entendimento sobre a emoção e sentimento tem

implicações na ciência do design, pois o afeto positivo e o negativo mudam

parametros da cognição. Afeto positivo, aumenta a criatividade e nos deixa mais

tolerantes as dificuldades e bem flexiveis na hora de buscar soluções, enquanto que

no negativo as pessoas ficam menos capazes de trabalhar em novas soluções e

menos criativas e flexiveis. O afeto e a cognição têm impacto um sobre o outro

porque um influencia na maneira como vemos o mundo ao nosso redor, nos

trazendo juizos do que é bom ou ruim e afeta a percepção, reação, sentimentos, já o

outro, funciona na nossa tomada de decisões, no raciocionio lógico.

Na teoria de Donald Norman ele explica que tudo o que compramos, usamos

e consumimos reflete quem somos emocionalmente. Por exemplo: alguém gosta

mais da marca Nike e prefere usar o jeans da Taco. Outro manda fazer suas

próprias roupas e adora usar havaianas.Temos ai duas características de indivíduos

com cultura e personalidade diferentes. Portanto, o fato dessas pessoas possuirem

uma certa preferência por comprar uma marca ao invés de outra resulta da sua

característica emocional.

Em 2005 a revista magazine Ergonomics in Design publicou um artigo no

qual participaram três autores: Hancock, Pepe e Murphy que relacionam a

ergonomia com a satisfação no uso dos produtos e isso recebeu o nome de

Hedonomia que é a relação da ergonomia ocupando-se dos fatores de usabilidade,

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 18

funcionalidade, com a experiência prazerosa, individualização e customização dos

sistemas. Foi tornando-se cada vez mais necessário trazer a agradabilidade aos

usuários (MONT`ALVÃO Claudia; DAMÁSIO, Vera, 2008).

O objetivo principal da hedonomia é esclarecer a existência entre o amor das

pessoas com os seus produtos: livros, músicas, blogs etc. Isto pode perfeitamente

ser aplicado na área de webdesign. O exemplo mais comum e prático que

encontramos pode ser o site do Orkut muitos têm comunidades que declaram: “eu

amo o meu Orkut” e é fácil saber as razões quando questionamos o porquê desse

amor lendo a descrição feita dentro do site:

Você ama o Orkut por que: Você adora mandar scraps pros seus amigos Você ama encontrar amigos que você já não via há séculos Você ama os testemoniais que escrevem pra você Você ama escrever testemoniais também Você ama encontrar pessoas com interesses em comum

Você ama fazer parte de comunidades interessantes [...] (ORKUT, 2010.)

A análise desse fator chama-se “experiência do produto” ou “product

experience” que estuda a psicologia do produto. O que ele proporciona em termos

de qualidade? É divertido? Como é a interatividade? Essas entre outras perguntas

podem ser respondidas a partir da observação de como os indivíduos se comportam

ao utilizar o produto.

Beatriz Russo e Paul Hekkert no artigo “Sobre amar um produto: Princípios

Fundamentais” explicam que existem efeitos provocados nesta interação onde os

sentidos são gratificados. Experiência de significado onde os significados estão já

apegados ao produto, e a experiência emocional, onde emoções e sentimentos são

evocados. Saber como e porque o amor é vivenciado pelas pessoas nesta interação

através dos princípios sobre emoção e amor é vital para que várias dúvidas se

esclareçam.

Preocupar-se com a funcionalidade, usabilidade e análise formal com o foco

no produto nos dias de hoje não é o suficiente. O significado do produto vai além do

direcionamento da função. Existem questões importantes a serem consideradas:

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 19

“como o produto será usado?” “em qual contexto e situação”?”“ qual lugar?”, pois

impactos negativos resultam em objetos que nos sufocam, cercam e nos fazem

esquecer como sentir, tocar, pensar.

As mesmas autoras ainda alegam que as pessoas no geral têm certas

expectativas das quais querem satisfazer quando procuram os produtos para

comprar e se isso é atendido causando uma experiência agradável, elas poderão se

tornar fieis a determinada marca. Assim funciona o que chamam de amor ao

produto.

Talvez a conclusão que podemos tirar é que todos os indivíduos têm

necessidades a serem preenchidas no seu dia-a-dia e o fato de adquirirem o

produto, atendendo ao que eles esperavam, torna-se então importante. Como o

autor Stefano Marzano diretor da Philips Corporate Industrial Design diz: “O objeto

em si torna-se algo com vida prendada em uma personalidade em que cuidamos e

criamos sentimentos”.

Tudo isso sobre design emocional tem relação com o webdesign porque é

comprovado por vários estudiosos no assunto que sentimentos e emoção são fortes

diferenciadores na experiência de quem quer ter sucesso nas vendas, pois influencia

nossas percepções na decisão da compra, o que “mantém o usuário feliz”.

Para enfatizar o quanto a emoção implica muito nas nossas decisões, e que

sem ela ninguém conseguiria tomar uma decisão somente levado cem por cento

pela racionalidade, o doutor António Damásio (2006 p.7) explica que a emoção:

[...] abre a possibilidade de levar seres vivos a agir de maneira inteligente sem precisar pensar com inteligência. [...] pode dar mais relevo a determinada premissa e, assim, influenciar a conclusão em favor dessa premissa. A emoção também auxilia no processo de manter na mente vários fatos que precisam ser levados em consideração para se chegarmos a uma decisão [...] dependendo das circunstâncias da decisão e da história pregressa de quem decide [...]

Comenta que também a questão da intuição está sujeita ao quanto

racionalizamos bem no passado; do quanto classificamos acontecimentos da nossa

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 20

experiência passada em relação às emoções. Refletindo fracassos e êxitos em uma

rápida cognição.

Aplicando estes conceitos acima ao projeto, os mesmos poderão transmitir:

percepção de credibilidade, confiança, segurança e facilidade de uso. Levar em

consideração no projeto de webdesign um design esteticamente bonito, do qual, o

cliente sinta-se importante socialmente traz uma reflexão positiva sobre ele mesmo

agregando valor e auto-estima.

O mais importante para aprender é que as pessoas gostam de interagir com

o produto, logo no primeiro contato, e tudo mais flui sendo fácil de aprender. Donald

Norman explica em seu livro “Design emocional – porque adoramos (ou detestamos)

objetos do dia – a – dia” que primeiramente a aparência é vista, não levando em

consideração se o produto funciona ou não. Depois vem a segunda impressão que a

pessoa se pergunta “o que é?” “pra que serve?” “quanto custa?” etc. e finalmente

decide se é valido comprar ou não o objeto.

Isso é o que chamamos de três níveis de processamento da emoção que

formam os atributos do ser humano quando pensa, age, sente e percebe: nível

visceral, comportamental e o reflexivo. Os três agem dentro do nosso sistema

sensorial. O visceral seria o sentido da primeira impressão (julga o que é bom ou

ruim) e o comportamental é o questionador onde a pessoa vai avaliar a função,

desempenho, usabilidade para tomar alguma ação e o reflexivo é a parte da tomada

de decisão final sobre a atitude a tomar como resultante das outras anteriores.

Conclui-se que o fato do design emocional poder estar presente no processo

de construção dos websites significa que ele poderá tornar o usuário mais fiel. Essa

lealdade vai ter impacto muito bom porque significa uma relação mais próxima com o

cliente, embora virtualmente, mas fazendo com que haja reciprocidade.

Sentimento e afeto vivenciados positivamente quando há uma boa interação

entre usuário e o site faz com que a pessoa se identifique pessoalmente passando a

gostar de sempre estar lá naquele momento outras vezes. Um bom design não está

somente na criatividade de um layout bonito e cheio de enfeites gráficos, e sim, na

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 21

questão de pensar primeiramente no cliente. Então, como aplicar os conceitos do

design emocional em websites? Fazer com que proporcionem interatividade, troca

de experiências e idéias, tornando o site um espaço para manifestar realmente

quem você é tanto de forma profissional como pessoal.

Donald Norman interpreta que os websites hoje em dia têm valor muito

grande em interatividade, comunicar com pessoas do mundo inteiro permite a maior

forma em termos de troca de experiências e idéias. Um site é um trabalho que

representa de uma maneira pessoal, demonstra a sua essência como pessoa.

Provoca emoções quando nele se manifesta intimamente quem você é, uma

extensão do eu interior.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 22

4. METODOLOGIA

Foi escolhido como método de elaboração do projeto, o proposto pelo

professor Mike Baxter da Universidade de Brunel em que começamos por quatro

perguntas essenciais: “o que?” (projetar website); “quando?” (prazo necessário: um

ano (dois semestres)); “com o que?” (programas gráficos) “como?” (passando os

rascunhos do projeto para a forma digital).

Na área de webdesign o projeto de um site começa primeiramente pela

definição do seu wireframe (o esqueleto do site antes do layout definitivo ser criado).

Nele, podemos ter noção do esquema de como queremos que o site seja

inicialmente, definindo o nome das páginas (por exemplo: início; SAC, contatos...),

os sublinks que cada uma das páginas vão ter (por exemplo, se temos uma página

chamada “produto” seus sublinks podem ser: utensílios, móveis, TV...).

Os nomes precisam ser palavras objetivas e cada página disposta em uma

ordem lógica, pois assim não se perde tempo procurando onde está a informação.

Outro aspecto, que fica mais fácil tornar a navegação acessível, influenciando no

processo criativo do site é: saber pra que e quem se destina o site; o que ele aborda;

se será um blog pessoal ou uma empresa qualquer.

Depois de montada a base da ideia, a segunda parte da pesquisa começa

descobrindo quais as possibilidades de estrutura de sites existentes hoje em dia e, a

partir do que as tendências estão tomando o seu rumo. Talvez existam sites

similares ao que se quer criar onde se podem buscar novas inspirações melhorando

o que já existe. Esses passos nos dão uma maior abrangência de como organizar o

corpo do site corretamente aderindo o projeto gráfico adequado seguindo as

exigências do cliente. E informando de tudo o que é possível realizar em termos de

computação gráfica para que o resultado final seja excelente (WATRALL, SIARTO,

2009).

O projeto informacional, juntamente com suas etapas posteriores, objetiva

explicar todos os passos da criação do wireframe e layout definitivo do site proposto

como projeto final (voltado ao tema do portifólio de arte digital). O processo de

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 23

desenvolvimento compreende desde os esboços iniciais, as inspirações para

concretizar a ideia de como fazer as telas do website e sua aparência. Em seguida,

a justificativa do porque dos elementos, cores, textos e tipografia, necessários para

atrair o público alvo (conquistar seu interesse) e depois, empregando todos os

resultados gráficos, oriundos das entrevistas, os quais irão nos auxiliar na

proposição de soluções satisfatórias que atendam as necessidades das pessoas

(estatística proveniente das entrevistas), sem perder o foco da base dos estudos da

ergonomia e do design emocional.

A seguir a metodologia projetual adaptada ao projeto do site do portifólio

virtual:

4.1 PROJETO INFORMACIONAL: consiste em seis etapas essenciais que definem e

delimitam exatamente as características do projeto no sentido de detalhar seus

aspectos técnicos básicos.

4.1.1 Informações sobre o Produto: depois de respondidas as perguntas antes

citadas: o que; quando; com o que e como. Temos nesta etapa que reunir todas as

informações possíveis acerca do que podemos saber sobre o que será o projeto

mais especificamente.

O produto a ser projetado é um website cujo conteúdo é um portifólio virtual

contendo trabalhos gráficos mais especificamente voltados a exposição de obras de

arte digital na internet, como uma forma de entretenimento e diversão para quem

aprecia esse tipo de arte.

4.1.2 Ciclo de Vida: consiste nas seguintes fases: Projeto; Fabricação; Montagem;

Embalagem; Transporte; Armazenagem; Venda; Compra; Uso; Funcionamento;

Manutenção; Reciclagem e Descarte. As próprias palavras já dizem por si mesmas.

Por exemplo: a fase “uso” um site é usado para as pessoas navegarem na net, se

distraírem ou mesmo estudar um assunto da sua profissão. Levamos em

consideração os seguintes itens que melhor se aplicam ao produto em questão

(website): projeto e uso.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 24

4.1.2.1Projeto: O modelo de site é de três páginas: “quem sou”; “arte digital” e

“contatos”. O plano de fundo vai ter um mesmo padrão para todas as páginas ao

longo da navegação e as telas do site vão ser em formato de abas como se fossem

várias pastas catalogadas.

4.1.2.2 Uso: divulgação de trabalhos gráficos digitais virtualmente.

4.1.3 Atributos do Produto: engloba características e propriedades do produto.

Dividi-se em:

4.1.3.1 Atributos básicos: as fases são: funcionamento; ergonomia; design; estética;

expressividade; simbolismo; segurança; confiabilidade; legal; patentes;

normalização; modularidade; ambiental. Dos quais, foram escolhidos para focar no

trabalho:

4.1.3.1.2 Expressividade: a finalidade é agradar ao público que gosta e aprecia arte

digital para que eles se identifiquem e aproveitem o entretenimento.

4.1.3.1.3 Estética: o objetivo é que o layout seja atrativo e criativo.

4.1.3.2 Atributos materiais: seria a parte da geometria e mecânica. Suas divisões

são:

4.1.3.2.1 Geométricos têm como elementos principais a considerar: a forma,

configuração, acabamento, dimensões, textura, cor, peso.

4.1.3.2.2 Dimensões: quanto às dimensões é recomendável determinar uma medida

padrão: 800 x 600 pixels ou 6.773 x 5.08 cm. É a mais comum compatível com a

maioria dos navegadores (WATRALL, Ethan; SIARTO, Jeff, 2009).

4.1.4 Requisitos de Projeto: são critérios de como o produto deve ser (higiênico

confortável...). Neste projeto são: entretenimento, layout que chame atenção das

pessoas fazendo com que se sintam confortáveis e atraídas pelo site. Porém, ao

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 25

mesmo tempo, que ele seja fácil de entender e facilite a navegação, e que haja

ausência de poluição visual.

4.1.5 Especificações de Projeto: define objetivos comerciais do produto, seus

aspectos técnicos, e o detalhamento do desenvolvimento do seu projeto. Além de

ser uma forma de antecipar futuros problemas, tudo o que poderia causar fracasso

comercial.

O objetivo comercial seria exposição de trabalhos. Enquanto que, os

aspectos técnicos envolvem: uma estrutura lógica para o wireframe, organização

geral, divisão do site em partes (cabeçalho; titulo; logo; corpo; textos; rodapé).

Pretende-se obter tais resultados, usando a interpretação dos gráficos da pesquisa

de campo a favor do projeto.

Então, a partir deste ponto, foram esboçados os preliminares da montagem

do wireframe oficial. Primeiramente, o que foi feito a mão, depois outros modelos

gráficos. Todas as páginas (exceto a principal que faz parte da abertura o site)

seguem um mesmo padrão do plano de fundo e banner só mudando o conteúdo de

uma para outra ao longo da navegação.

Desta forma, o objetivo é então expor a pesquisa de ideias, imagens e

layouts, assim como as referências que contribuíram para desenvolver todo o projeto

do wireframe completo. Vale ressaltar que, a escolha do melhor layout atende a

todas as metas pré-estabelecidas.

O primeiro passo foi pensar em um nome para o website que transmitisse da

melhor maneira possível o seu conteúdo, representando bem o portifólio virtual.

Então, foi elaborado um brainstorming (brainstorming significa: “tempestade de

ideias” método criado pelo professor Alex Osborne que é: “uma ferramenta para

geração de novas ideias, conceitos e soluções para qualquer assunto ou tópico num

ambiente livre de críticas e de restrições à imaginação”. (SEBRAE. Disponível em:<

http://portal.pr.sebrae.com.br/blogs/posts/gestaodepessoas?c=1227>. Acessado em:

06 out.2010) da palavra “arte digital” e, em seguida, destacou-se as palavras mais

interessantes, com mais afinidade em relação à perspectiva que se quer atingir

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 26

neste projeto. Tais palavras foram: “esboço”; “imagem”; “desenho”; “computação”;

“programas” e “tecnologia”.

Em seguida, as palavras foram associadas a uma única palavra que resumiu

tudo: que é “Vetor A4”. O que significa que as figuras ilustrativas (que serão

expostas no portifólio) passaram por um processo de vetorização (operação com

vetor) antes de efetivamente ficarem prontas na forma digital. Ou seja, elas são

formadas por vetores (“[...] segmentos de reta orientados com origem e extremidade

[...]” (VETORIZANDO, 2010) que lembra “programa”; “computador”; “desenho”; ou

seja, tudo do que era antes eram apenas desenhos em um papel A4.

A teoria de Watrall e Siarto nos auxilia na parte da montagem e organização

de todas as ideias, utilizando a metodologia da arquitetura de informação (A.I), que

nada mais é que: um processo de divisão do conteúdo do website em partes

devidamente hierarquizadas, desenhando como se fosse um diagrama de árvore,

onde estaria os principais elementos básicos que se gostaria de por no site

chamado: “navegação de alto nível” (ou barra do menu), cuja a função é mostrar

onde os usuários estão na página.

Já a respeito da disposição do sistema de navegação optou-se pelo padrão

do menu no topo, com guia horizontal, logo depois do banner, onde estaria a logo

(nome do site). A maioria dos sites é assim pela razão de que chama mais atenção,

é o foco do usuário.

Após toda essa análise, em torno das definições do que se gostaria de por

nas seções primárias e secundárias do menu principal, as ideias atribuídas foram

que: primeiro, o site vai conter três páginas, na barra de navegação principal.

Segundo, para finalizar a estrutura, é importante determinar o que se deseja colocar

em cada item e subitem da barra do menu principal. Os esboços, nas Figuras 1 e 2,

a seguir, tornam mais claro este conceito:

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 27

Figura 01: Esboço1 fonte autora (2010)

A figura 01 mostra esboçado os títulos dos botões para a navegação.

Figura 02: Esboço2 fonte autora (2010)

A figura 02 mostra o que cada sessão vai ter e seus links entre si

No processo de esboçar um layout, foi usado um conceito denominado:

“metáfora visual” (metodologia de agregar elementos que reforçam o tema a ser

aplicado no site). No caso do projeto do Vetor A4, foi possível coletar imagens que

tinham tudo a ver com webdesign; tecnologia; informação; arte digital. Como pode

ser visto nas Figuras 03-06:

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 28

Figura 03: Imagem1 (GOOGLE. Disponível em: <http://www.google.com.br/imagem>. Acessado em:

08 nov. 2010)

Figura 04: Imagem2 (GOOGLE. Disponível em: <http://www.google.com.br/imagem>. Acessado em:

08 nov. 2010)

Figura 05: Imagem3 (GOOGLE. Disponível em: <http://www.google.com.br/imagem>. Acessado em:

08 nov. 2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 29

Figura 06: Imagem4 (GOOGLE. Disponível em: <http://www.google.com.br/imagem>. Acessado em:

08 nov. 2010)

Figura 07: Imagem5 (GOOGLE. Disponível em: <http://www.google.com.br/imagem>. Acessado em:

08 nov. 2010)

Juntando todas as ideias iniciais para elaborar um modelo de wireframe

chegou-se a conclusão que ele possuirá praticamente de três a quatro divisões:

banners; botões (possuindo outros links para as telas); corpo da página; rodapé.

Nesta parte do estudo, para construir o wireframe acrescentamos a técnica

de diagramação chamada grid. Como Timothy Samara interpreta:

[...] é um princípio organizador do design gráfico [...] Itens parecidos são distribuídos de maneiras parecidas para que suas semelhanças ganhem destaque e possam ser identificadas. O grid converte os elementos sob seu controle num campo neutro de regularidade que facilita acessá-los – o observador sabe onde localizar a informação procurada porque os pontos

onde se cruzam as divisões horizontais e verticais funcionam como sinalizadores daquela informação. O sistema ajuda o observador a entender

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 30

seu uso. Em certo sentido, o grid é como um fichário visual. [...]

(SAMARA, 2007, p.6,9).

O grid serve tanto para ser aplicado em wireframes, como também, é voltado

para área gráfica na produção de cartazes; panfletos; livros etc. Existem vários tipos

de grids e dentre eles o autor Timothy Samara recomenda o grid do tipo hierárquico

para projetos da web, porque atende e adapta-se melhor as exigências visuais e

informativas, baseando-se conforme a disposição dos elementos e seus

alinhamentos em proporções maiores ou menores na página.

Todo grid possui as mesmas partes básicas sendo que cada uma com sua

função específica podendo ser combinadas conforme a necessidade do conteúdo. A

primeira fase de construção do grid é avaliar as características informativas do

conteúdo e depois, na segunda dispõem-se o mesmo conteúdo de acordo com as

suas diretrizes e proporções das divisões correspondentes as funções respectivas.

As partes de um grid são:

[...] Margens: são espaços negativos entre o limite do formato e o conteúdo que cercam e definem a área viva onde ficaram os tipos e as imagens [...] As margens podem ser usadas para orientar o foco, repousar os olhos ou funcionar como área para informações secundárias [...] Guias horizontais: são alinhamentos que quebram o espaço em faixas horizontais. Elas ajudam a orientar os olhos no formato e podem ser usadas para criar novos pontos de partida ou pausas para o texto ou a imagem. Zonas espaciais: são grupos de módulos que, juntos, formam campos distintos. Cada campo pode receber uma função especifica ao apresentar a informação; por exemplo, pode-se reservar um longo campo horizontal para imagens, e o campo abaixo dele pode ser usado para uma série de colunas de texto. Marcadores: são indicadores de localização para textos secundários e constantes, como cabeçalhos, nomes de seções, fólios, ou qualquer outro elemento que ocupe sempre a mesma posição em qualquer página. Colunas:são alinhamentos verticais que criam divisões horizontais entre as margens.A quantidade de colunas é indeterminada; ás vezes têm larguras diferentes, correspondendo a informações especificas. Módulos: são unidades de espaço separadas por intervalos regulares que, repetidas no formato da página, criam colunas e faixas horizontais.

(SAMARA, 2010 p. 24,25)

Partindo deste principio, como organizar da melhor forma o conteúdo através

do grid posicionando as informações sem que textos, imagens, links, colunas etc.

saiam do padrão que se estabelece? Começamos pela dimensão do site: 800 x 600

pixels ou 6.773 x 5.10 cm. Traçamos no papel um retângulo com essas medidas,

deixando uma margem (espaço negativo do limite do formato até a definição da área

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 31

viva). Dentro do retângulo dividimos o espaço com linhas horizontais e verticais

iguais e, dentro deste espaço, montamos o wireframe propriamente dito, ver Figuras

08-10.

Figura 08: Diagramação1 fonte autora (2010)

Figura 09: Diagramação2 fonte autora (2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 32

Figura 10: Diagramação3 fonte autora (2010)

4.1.6 Levantamento das Necessidades: as principais necessidades que precisam

ser levadas em consideração ao projeto são: pesquisa bibliográfica (revistas

especializadas ou artigos publicados sobre o assunto e que tenham informações

relevantes), levantamentos qualitativos (pesquisa de opiniões e julgamentos sobre

como as necessidades do consumidor são atendidas em relação ao produto ou

serviço existente), pesquisa de similares, pesquisa de campo, estudo do público

alvo.

4.1.6.1 Resultados da pesquisa de campo:

Foi realizada, uma pesquisa de campo entrevistando uma amostra da

população da cidade Belém do Pará com uma série de perguntas para avaliar o que

elas necessitam em termos de qualidade e preferências quando o assunto é

website. A partir destes dados, é apresentada com base nos resultados, uma

proposta virtual de um projeto de site onde estará exemplificado tudo o que envolveu

o processo de criação desde o wireframe até o briefing, memorial descritivo e

justificativo.

O questionário da pesquisa de campo, aqui tratado, sofreu grande influência

da pesquisa realizada pelo Instituto Brasileiro de Geografia e Estatística (IBGE) em

2005 sobre o uso da internet na cidade de Belém, ou seja, aponta fatores

importantes como o quanto as pessoas acessam a internet e para que, mostrando a

porcentagem de gente em cada tipo de situação, ver Tabela 1.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 33

Porcentagem de uso da internet na região metropolitana de Belém do Pará no ano

de 2005

Educação e

aprendizado

Comunicação

com as

pessoas

Atividades

do lazer

Jornal

e

revistas

Comprar,

encomendar

bens e

serviços

Interação com

autoridades

públicas,

órgãos

governamentais

81,3% 62,0% 53,7% 54,0% 19,4% 49,4%

Tabela 1 – Resultados da pesquisa nacional por amostra de domicílios do Instituto Brasileiro

de Geografia e Estatística (IBGE) (IBGE, 2010).

A população de Belém, segundo dados do Instituto Brasileiro de Geografia e

Estatística (IBGE), é de aproximadamente 1.437.600 milhões de habitantes. Desta

forma, é preciso realizar, para a entrevista, o cálculo da amostragem (ou seja,

quantas pessoas representariam um número significativo total desta população para

obter resultado confiável e o mais representativo possível) através de uma fórmula

matemática da estatística. Como o número de habitantes passa dos 100.000 mil, a

população é caracterizada infinita e suas variáveis em termos de nível de

mensuração estão em escala ordinal porque os resultados vão ser ordenados

seguindo critérios estabelecidos, ou seja, significa que cada pergunta do

questionário depende da outra para que as conclusões sejam mais confiáveis e

objetivas com o foco da entrevista. Então, a seguinte equação é usada:

Z2 x p x q

N= _________

d2

Onde:

N = é o tamanho da amostra

Z = É o nível de confiança

p = estimativa de proporção da variável

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 34

q = 1- p

d = erro amostral expresso em número decimal

Dependendo do percentual do nível de confiança que se quer uma

porcentagem de margem de erro tem que ser escolhida fazendo que haja mais

precisão no número da amostragem calculada. Então se determinarmos:

90% Z= 1,64

95% Z= 1,96

99% Z= 2,57

O erro em percentual deve ser colocado em forma de número decimal

quando aplicado na formula, que dependerá da caracterização das variáveis da

situação, especificações dos elementos que se quer determinar e observar dentro da

pesquisa usando questões tanto abertas quanto fechadas. Levando em

consideração a caracterização da população qualificando a cidade, área, indivíduos,

etc. Tem-se um padrão para definir o plano amostral estudando as análises das

coletas de dados e definindo o que há em comum e classificando seu

dimensionamento. (MARTINS, 2002)

Neste caso, para o foco deste trabalho utilizaremos um nível de confiança de

95%, sendo Z = 1,96, e a estimativa de proporção entorno de 20% ou, p = 0,2,

enquanto o erro amostral fica em 5%, em decimal: 0,05. Aplicando a equação

anterior, resulta:

Z2 x p x q

N= _________

d2

(1,96)2 x 0,2 x 0,8

N=_________________

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 35

(0,05)2

3,8416 x 0,2 x 0,8

N=_____________

(0,0025)

N= 138 (número de pessoas a serem entrevistadas)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 36

4.1.6.1 Resultados e sua apresentação na forma gráfica:

Começamos então pelos dados obtidos na pesquisa de campo (entrevista),

os quais são representados graficamente, e, em seguida, parte-se para o projeto

informacional tomando-se como base as seis etapas anteriormente citadas e

explicadas. Vale ressaltar que, neste projeto, nem tudo da metodologia de Baxter se

aplica necessariamente então só será aproveitado o que for coerente com os

objetivos focados deste trabalho.

O objetivo da pesquisa de campo feita é apresentar os resultados dos dados

obtidos graficamente, de pergunta por pergunta da entrevista, explicar todos eles e

comentar como os determinados parâmetros vão influenciar no embasamento do

projeto final, pois se sabe o quanto é importante avaliar a demanda do mercado

antes de prosseguir com a ideia do projeto em si ao invés de achar que nunca vai

haver nada a acrescentar ou melhorar em termos de qualidade. Também algumas

mudanças são feitas mediante a opinião pública da maioria aumentando as chances

do sucesso e atendendo as necessidades, e com isso agradando aos usuários que é

o mais importante de tudo.

As perguntas contidas no questionário primeiramente são voltadas a

conhecer o perfil geral dos entrevistados, perguntando, por exemplo: faixa etária,

quantidade de homens e mulheres, escolaridade, ocupação profissional e por fim

renda familiar. Mais adiante é levantado por quais meios a maioria gosta de ficar

atualizado sobre os assuntos do mundo. Partindo então para a questão se gostam

ou não de internet, se elas acessam a internet de casa, mesmo na maior parte das

vezes, ou de outros lugares e a freqüência de acesso, o que mais as atraem e mais

atrapalham na navegação.

Completada essa fase, as outras questões envolvem preferências e gostos,

pesquisando qual é o tipo de site mais popular e quantos sites do gênero são vistos

enquanto permanecem online. Devido às várias opções existentes de

entretenimento ou assuntos mais sérios ligados a noticias ou jornalismo, há a

necessidade de se identificar um padrão dos mais visitados. Isto é feito com o

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 37

objetivo de se identificar certo estereótipo que condiciona o mercado de websites a

vender mais certo estilo de site pela grande demanda do mercado.

Na continuidade desta entrevista vem o ponto final: questionar se as

pessoas gostam da arte da ilustração e a partir daí descobrindo o gosto dos

usuários, o trabalho do projeto tem mais chances de agradar. Posteriormente,

procura-se saber com que freqüência as pessoas dedicam seu tempo a ler e/ou

assistir algo sobre o assunto.

Já as duas últimas perguntas finais fazem as pessoas pensarem justamente

sobre a ideia do projeto deste trabalho indiretamente: o quanto acham interessante

um site que fale sobre arte da ilustração expondo trabalhos dessa área e se gostam

de se atualizar sobre o assunto freqüentemente ou não.

A seguir os resultados propriamente ditos são apresentados graficamente,

envolvendo cada pergunta da entrevista, os quais são explicados um de cada vez:

Figura 11: Gráfico1: Faixas etárias dos entrevistados fonte autora (2010).

1ª pergunta: Quantos anos você tem?

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 38

O gráfico apresentado na Figura 11 mostra que a maioria dos entrevistados

está na faixa etária de 16 até 21, considerados jovens adultos. Dependendo da

idade, existem fatores que influenciam muito na decisão de uma pessoa como: as

preferências, gostos, costumes, cultura etc., e são refletidas na maneira como ocorre

à interação do usuário com o site. Então, este dado estabelece certo perfil do público

alvo em questão.

Figura 12: Gráfico2: Sexo dos entrevistados fonte autora (2010).

2ª pergunta: Sexo

O gráfico, apresentado da Figura 12, mostra a quantidade de homens e

mulheres que participaram da entrevista. Deste gráfico, fica claro que uma maioria

significativa foi de homens, então, por consequencia as respostas serão em sua

maioria opinão masculina. Leva-se em consideração que fazer sites somente para

homens ou mulheres são duas coisas completamente diferentes entre si. O público

masculino não compartilha geralmente dos mesmos interesses que o do feminino e

vice-versa. Por exemplo: assuntos sobre moda, esportes, artes, entre outros.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 39

Figura 13: Gráfico3: Escolaridade dos entrevistados fonte autora (2010).

3ª pergunta: Qual a sua escolaridade?

O gráfico da Figura 13 diz respeito ao nível de escolaridade das pessoas

onde a maioria são universitários e os outros grupos estão quase nivelados.

Demonstra que os individuos já têm boa noção do que é um bom serviço, sua

opinião própria já é formada, portanto a visão de mundo muitas das vezes com

análise de um olhar profissional, exige mais qualidade.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 40

Figura 14: Gráfico4: Renda familiar dos entrevistados fonte autora (2010).

4ª pergunta: Qual sua renda familiar?

O gráfico, apresentado da Figura 14, mostra que a renda familiar no geral da

pesquisa é acima de 5 salários minimos. As pessoas têm um bom poder aquisitivo,

portanto têm melhores condições de compra e representam potenciais clientes que

possam vir a contratar o trabalho de um designer no futuro.

Figura 15: Gráfico5: Como os entrevistados se atualizam fonte autora (2010).

5ª pergunta: Como você se atualiza?

O gráfico da Figura 15 mostra que muitos se atualizam navegando

praticamente só pela internet e, muitas das vezes, o motivo é por ser um meio de

comunicação bem mais acessivel e ao alcance de quase todos. Então, demonstra

que ela é uma das melhores maneiras para divulgar e colocar informações sobre

trabalhos profissionais ou eventos no geral

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 41

Figura 16: Gráfico6: Aceitação pela internet fonte autora (2010).

6ª pergunta: Você gosta de internet?

O gráfico da Figura 16 mostra a aceitação de quase 100% dos entrevistados

ao opinarem se gostam de internet. E sendo bem aceita é muito mais fácil de

trabalhar as preferências, melhorar seus serviços e sites, porque haverá muitos

fatores a estudar baseados na experiência da navegação do usuário que vai atender

suas necessidades.

Figura 17: Gráfico7: Internet nos domicílios fonte autora (2010).

7ª pergunta: Você tem internet em casa?

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 42

O gráfico, apresentado na Figura 17, mostra que a maioria das pessoas

possue acesso a internet nas suas residências, porém há uma quantidade que diz

acessar em outros lugares podendo ser do emprego, cyber, restaurantes etc.

Portanto, sabendo o quanto é mais fácil para uns do que para outros ficar online na

internet, há como levantar hipoteses que o usuário com mais tempo livre de ficar

conectado se dedicaria ainda mais do que os outros aos assuntos que mais gosta, e

assim sendo do seu interesse sempre iria querer ficar atualizado.

Figura 18: Gráfico8: Freqüência que os entrevistados usam a internet fonte autora (2010).

8ª pergunta: Com que freqüência você usa a internet?

No gráfico da Figura 18 está evidente com quanta frequência a maior parte

do grupo de entrevistados usa a internet, ou seja: todos os dias. Este dado nos

revela primeiro que há uma procura constante por informação e segundo como é

evidente que deve haver seriedade em atualizar o conteúdo dos sites para que haja

novidades e o publico sinta-se atraido a continuar a visitar

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 43

Figura 19: Gráfico9: Quantos sites são navegados enquanto se está conectado fonte autora (2010).

9ª pergunta: Quantos sites você navega normalmente enquanto está

conectado?

O gráfico da Figura 19 mostra que muita gente navega em mais de três sites

por dia. Essa demanda freqüente de visitas a vários sites, em regra, evidencia um

hábito das pessoas estarem sempre na internet, consumindo um tempo considerável

do dia na frente do computador. Assim, conclui-se novamente que a internet é um

bom lugar para propagandas, pois quanto mais os usuários permanecem online

mais terão a chance de ver mais anúncios divulgados ou mesmo querer conhecer

novos blogs, fóruns, etc.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 44

Figura 20: Gráfico10: Preferência por tipos de sites fonte autora (2010).

10ª pergunta: Quais tipos de sites você gosta mais?

No gráfico da Figura 20, os resultados mostram um equilíbrio entre as

preferências dos entrevistados, com uma preferência maior pelos sites de

entretenimento. Os usuários usam o serviço da internet principalmente para se

divertirem, embora haja outros interesses também. Como o foco deste trabalho

também visa entretenimento levar em consideração este aspecto, segundo a

pesquisa, tem valor.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 45

Figura 21: Gráfico11: O que é considerado mais importante em um site fonte autora (2010).

11ª pergunta: O que você considera de mais importante em um site?

O gráfico, apresentado na Figura 21, mostra quais as qualidades mais

importantes que um site deve ter segundo a opinião dos indivíduos entrevistados,

quais sejam: ser atrativo e de fácil de navegação. Ou seja, as pessoas inclinadas a

apreciar inovação e criatividade na ideia do site e no que está por trás da concepção

dele, também. O que podemos tirar de importante desses dados e aplicar no projeto

é dar ênfase a ergonomia na estrutura do wireframe como também investir no design

do projeto.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 46

Figura 22: Gráfico12: Problemas que mais atrapalham na navegação fonte autora (2010)

12ª pergunta: Quais os problemas mais freqüentes que mais atrapalham

durante a navegação do site?

Neste caso, o gráfico da Figura 22 mostra que a “lentidão da internet” e a

“dificuldade para achar a informação desejada” estão praticamente empatados como

o que mais atrapalha a navegação e mostra que não é somente um problema

ergonômico (no sentido da organização das informações dentro do site), mas

também de engenharia, comprometendo a qualidade do serviço prestado. Então,

como o objetivo é manter-se dentro dos limites do design, o que mais interessa

nesta questão é melhorar a acessibilidade do conteúdo do site.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 47

Figura 23: Gráfico13: Você gosta da arte digital fonte autora (2010).

13ª pergunta: Você gosta de arte digital?

O gráfico da Figura 23 mostra que a maioria dos entrevistados gosta da arte

digital, de onde se conclui que o grau de aceitação é relevante devido ao fato do

projeto envolver trabalhos de arte expostos em um portifólio virtual.

Figura 24: Gráfico14: freqüência com que os entrevistados lêem ou assistem algo sobre a arte digital

fonte autora (2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 48

14ª pergunta: Se você respondeu sim para a pergunta anterior, com que

freqüência você lê ou assiste algo sobre o assunto?

O gráfico da Figura 24 aponta que de vez em quando as pessoas se

interessam em ler ou assistir algo sobre o assunto. Esta pergunta tem o objetivo de

saber o quanto há espaço no mercado hoje em dia para sites voltados para o tema

da arte e avaliar se no futuro há ou não expectativas de se ter um público razoável.

Figura 25: Gráfico15: Se é interessante a ideia de visitar sites; blogs sobre arte digital fonte autora

(2010).

15ª pergunta: Você acha interessante visitar sites ou blogs que falem sobre o

assunto?

O gráfico da Figura 25 mostra que a grande parte dos entrevistados acha

interessante a ideia de terem-se sites ou blogs do gênero que abordem o tema sobre

arte da ilustração. E mostra que as pessoas se identificam com o tema e muitas das

vezes já trabalham com o assunto, mesmo por diversão.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 49

Figura 26: Gráfico16: Freqüência com que os entrevistados se atualizam sobre a arte digital fonte

autora (2010).

16ª pergunta da entrevista: Com que freqüência você se atualiza sobre a arte

digital?

No gráfico da Figura 26 observa-se a freqüência com que as pessoas se

atualizam sobre arte da ilustração, na maioria das vezes é somente de vez em

quando, todavia constantemente estão procurando notícias sobre o assunto. O que

é um fator positivo pois há probabilidades do site ter audiência significativa.

Em relação ao projeto, foram encontradas: necessidade de levantamento de

pesquisa de campo (entrevista com um questionário sobre o uso da internet). No

resultado da mesma, as principais coisas na opinião do público sobre o que um site

deve ter são: ser fácil de navegar; ter entretenimento; ser atrativo e praticidade para

achar informações desejadas.

4.2 PROJETO CONCEITUAL: produz princípios suficientes para satisfazer as

exigências e necessidades do cliente mostrando como ele irá atingir todos os

benefícios através da funcionalidade, ergonomia e design.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 50

4.2.1 Função: aspectos relacionados à funcionalidade: função principal e as

secundárias. O principal foco é a divulgação dos trabalhos gráficos, e quanto às

funções secundárias: fazer com que as pessoas que gostam de arte digital se

identifiquem com o website; divertir o público criando assim um interesse em

navegar por ele mais vezes.

4.2.2 Design: estética do produto que envolve todos os aspectos de interpretação

do layout como: plano de fundo (cor branca, característica de transmitir tranqüilidade

e sensação de conforto), cores (optou-se por metálico, azul escuro, roxo e amarelo

para trazer a ideia de tecnologia e modernidade), fonte dos botões (Harlow Solid

Italic porque a fonte dá a impressão que as letras estão em um formato de lâmpadas

fosforescentes e assim o efeito neon ficou mais real), figuras (a intenção é que

transmitam atratividade; entretenimento).

4.2.3 Ergonômico: esclarecimento da adaptação do produto ao usuário aliando

conforto, eficiência e a antropometria (medida física das pessoas). Presente na

disposição que as imagens; links e textos estão distribuídos ao longo das páginas

juntamente com a ajuda da diagramação do design gráfico tornando assim perfeita a

organização aos olhos e também prático no manuseio com o mouse, pois é obvia a

seqüência da navegação. Para isso é criado um esquema básico de mapa de

navegação (figura 27):

Figura 27: Mapa de navegação fonte autora (2010).

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 51

“Mapas de navegação são utilizados para descrever a experiência do usuário. Eles são diagramas que fornecem uma representação visual do

fluxo entre as diferentes telas apresentadas ao usuário. (Chak, 2004) [...] o mapa do site pode assumir diversas configurações. O design de um mapa depende das necessidades do seu projeto e da inclinação pessoal do designer. Ao avaliar qual design a seguir, deve-se considerar se o mapa será: Amplo ou profundo: Amplos (muitos itens no mesmo nível). Profundo: (muitos níveis, subníveis e sub-subníveis). Grande ou pequeno: Grande (muitas páginas) e pequeno (poucas

páginas).” (Wodke, 2003).

O tipo de mapa utilizado na figura 27 foi o mapa em árvore, recomendado para sites

que não são muito grandes possuindo poucas páginas e cuja navegação é simples e

direta.

4.3 BRIEFING: antes de começar o projeto foi feita uma análise do que é necessário

para realizar a sua execução propriamente dita, e dentre elas: obter programas

gráficos (Photoshop CS3, Coreldraw 12, Excel); usar resultados dos gráficos da

pesquisa de campo.

Espera-se com este briefing, esclarecer especificações da parte técnica do

projeto do site “Vetor A4” quanto á natureza e contexto; análise setorial; objetivo do

negócio e estratégia de design; prazo.

4.3.1 Natureza do projeto e contexto: Este projeto partiu primeiramente da ideia

pessoal de montar um website. Foram observados problemas e necessidades a

serem resolvidos tanto ergonômicos quanto a falta do design emocional aplicados na

elaboração de sites, dos quais, a ausência fazia diferença porque os usuários não

interagem muito bem com o site e a navegação torna-se difícil de entender.

Em detrimento de todos esses fatores a medida tomada foi de estudar

metodologias que se adaptassem aos objetivos específicos deste trabalho,

conseguindo no final fazer um design de site que resolvesse os problemas.

A responsável pelo projeto é a aluna Andréa Silva Souza, estudante de

Bacharelado em Design com habilitação em projeto de produto na Universidade do

Estado do Pará (UEPA).

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 52

4.3.2 Análise setorial: A categoria do serviço do site é a do entretenimento da arte

digital onde as pessoas ao passarem seu tempo navegando pelo site possam

apreciar as ilustrações gráficas e conhecendo um pouco mais dos trabalhos deste

ramo. Dentre os tópicos importantes dentro deste assunto temos:

Lista de produtos: as ilustrações gráficas

Concorrentes: Pesquisa de similares encontrada na internet:

Sociedade dos Ilustradores Brasileiros (SIB, 2010):

Figura 28: Site da Sociedade dos Ilustradores Brasileiros fonte autora (2010).

Participação no mercado: Desde 2003.

Pelicularidades: é um grupo com poucos membros. Aquele que quiser

participar tem que submeter-se a um processo seletivo e já ter uns cinco trabalhos

de sucesso no mercado.

Pontos fortes: nacionalmente reconhecido; divulga trabalhos de ilustradores

profissionais; já tem certa experiência dentro da área gráfica; e o site em si foi

considerado fácil de entender e navegar.

Pontos fracos: não é acessível á maioria das pessoas, porque há uma

burocracia para fazer parte da associação; foi observado que o seu layout não

chama atenção pela cor usada nele; o site não pareceu ser constantemente

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 53

atualizado devido muitas das postagens já estarem a um bom tempo; a maioria das

coisas no site tem muito texto (com uma fonte de tamanho muito pequeno) e torna-

se enfadonho ler.

Alex Koti: (ALEXKOTI, 2010):

Figura 29: Site de Alex Koti fonte autora (2010).

Participação no mercado: o trabalho mais antigo visto no seu portifólio é

desde 2000.

Pelicularidades: as diversas notícias constantemente publicadas sobre seus

trabalhos no site e também as diferentes categorias que ele consegue aplicar a

ilustração.

Pontos fortes: os seus trabalhos de ilustração são voltados a diversas

categorias e aplicados de diversas formas: para web; camisas; logos; etc.; seu

portifólio é extenso; pareceu ser um site que constantemente tem atualizações; não

foi considerado muito difícil de navegar.

Pontos fracos: a cor do site foi mal escolhida, pois é muito apagada; existem

no menu de navegação superior umas figuras de ícones desnecessários; as

ilustrações expostas (em grande maioria) dão mais a impressão que são voltadas ao

público infantil, mas no site não especifica nada sobre qual é o seu público alvo

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 54

realmente; tem muita informação ao mesmo tempo, causando dúvidas por onde

começar e podendo acabar por nem ver tudo do site.

Lia Fenix: (LIAFENIX, 2010):

Figura 30: Site de Lia Fenix fonte autora (2010).

Participação no mercado: não especifica.

Pelicularidades: ela tem todos os seus trabalhos praticamente voltados à

criação de personagens femininos.

Pontos fortes: seus trabalhos são bem feitos; tem foco em uma categoria

bem específica.

Pontos fracos: seu blog não é próprio; informações sobre a autora ou seus

contatos são praticamente ausentes.

Monstro Studio: (MONSTRUOSIDADES, 2010):

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 55

Figura 31: Site Monstruosidades fonte autora (2010).

Participação no mercado: A empresa existente há17 anos.

Pelicularidades: cria muitos personagens 3D de monstros.

Pontos fortes: tem grande experiência no ramo das ilustrações gráficas;

trabalha também com fotografia; seus clientes são conhecidos (exemplo: Unibanco);

o site tem um layout criativo.

Pontos fracos: quando o site abre não temos a opção de pular a animação

de entrada e, clicando na mesma, ainda esperamos abrir uma nova janela e daí

carregar o site em flash. Quem não tem o programa, não visualiza o site impedindo

que seja acessível.

4.3.3 Objetivos do negócio e estratégia de design: verificar os problemas que

levaram a realização desta pesquisa (ausência de aplicação de conhecimentos de

ergonomia e usabilidade na elaboração dos sites; aplicação de conhecimentos do

design emocional na elaboração de sites); solucioná-los, através dos resultados dos

gráficos apresentados. Depois, foi feita uma análise para ver qual o perfil do público

alvo e posteriormente aplicou-se isso nas diretrizes da metodologia projetual e

design emocional também, para ajudar a cumprir o projeto final.

4.3.4 O público alvo: em sua característica geral fica em uma faixa etária entre 16 e

30 anos, mais ou menos, consideradas pessoas jovens adultas que, segundo o que

se pode observar na pesquisa de campo, são todos antenados na internet buscando

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 56

sempre atualizações nas informações e entretenimento. Um público que hoje em dia

passa mais tempo na frente do computador praticamente todos os dias, tem como

acessar a internet da sua residência, gosta de arte e ilustrações e simpatiza com a

proposta de um site voltado a esse tema. Tornando no final o projeto deste trabalho

válido.

4.3.5 Prazo: A previsão da entrega é até o dia 22 de novembro de 2010 e a defesa

por volta do período dos dias 6 a 10 de dezembro de 2010.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 57

5. MEMORIAL DESCRITIVO E JUSTIFICATIVO

5.1 PROJETOS PRELIMINARES: são as propostas iniciais e esboços das mesmas

contendo cada uma seu memorial descritivo e justificativo. Para o autor Baxter é

possível que se ache mais de uma solução possível a um determinado problema de

projeto, porém como foram feitas pesquisas estudando preferências do público alvo

e o espaço dentro do mercado levou-se em consideração fazer apenas uma única

proposta de projeto preliminar que ao longo do trabalho até o projeto final sua

evolução é explicada detalhadamente.

Abaixo estão os esboços iniciais da proposta e as ideias de layout ainda em

sua fase de criação:

Figura 32: Esboço proposta1 fonte autora (2010)

Inicialmente, como mostra o esboço da figura 32, a ideia era fazer um layout

diferenciado cheio de cabos e entradas USB como se estivesse em movimento

formando caminhos diversos por toda a página do site. E a barra de menu (topo) que

assemelha-se a uma espécie de controle virtual.Mas haveria pouco espaço para as

ilustrações dentre outras informações,e ainda a quantidade de coisas na tela poderia

até confundir o usuário, por conseqüência, aconteceria poluição visual.Então a ideia

foi descartada.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 58

Figura 33: Esboço da proposta2 fonte autora (2010)

A figura 33 mostra à segunda ideia onde os fios USB são como tomadas que

estão ligadas na conexão “acendendo” o logotipo devido à “eletricidade”, os botões

de navegação ficariam abaixo desse banner. O conteúdo se alternaria a medida dos

cliques. Esta proposta também foi deixada de lado, porque os cabos praticamente

ficavam no meio da tela atrapalhando a leitura do conteúdo deixando um espaço

bem estreito prejudicando até quando fosse preciso atualizar o site.

5.2 PROJETOS DETALHADO: é a solução final em que se chegou dentre todas as

do projeto preliminar. Esta solução pode vir a ser também o resultado da junção de

todas as soluções preliminares ou simplesmente a escolha de uma delas.

A configuração do projeto é realizada nesta etapa segundo certa

especificações técnicas do produto (função, componentes, montagens, manufatura e

etc).

No esboço oficial escolhido (figuras 30 - 31 logo abaixo) os espaços estão

distribuídos de forma igual com bastante organização, o site fica com uma melhor

compreensão e fácil de navegar. O layout permaneceu com a ideia de tecnologia,

reunindo elementos de computação embutidos nele e com a preocupação de

estarem alinhados de forma a não atrapalhar na hora de acrescentar informações

desejadas.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 59

Figura 34: Esboço da proposta final1 fonte autora (2010)

Figura 35: Esboço da proposta final1 fonte autora (2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 60

5.2.1 Wireframe:

Figura 36: Wireframe1 fonte autora (2010)

A figura 36 mostra o wireframe dos elementos da página principal de

abertura do site, dispostos: o banner (no topo) onde vai ficar a logo e o nome do site;

abaixo dele, o corpo da página e no final o rodapé.

Figura 37: Wireframe2 fonte autora (2010)

A figura 37 mostra o wireframe da página “quem sou”. Nela pretende-se

colocar informações breves sobre o (a) designer autor (a) do site: formação,

currículo prévio, área de interesse.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 61

Figura 38: Wireframe4 autora (2010)

A figura 38 mostra o wireframe da página “arte digital”, cujo conteúdo inicial

são links para as categorias de imagens das ilustrações digitais. Serão apenas 3

delas e ao clicar em algum link aparecerá uma outra janela como mostra a figura 35

a seguir:

Figura: 39 Wireframe5 fonte autora (2010)

A figura 39 mostra o portifólio contendo os trabalhos de ilustrações digitais

servindo para divulgação dos trabalhos artísticos. À medida que se vai clicando em

cima das miniaturas a figura abre em outra janela, na sua dimensão ampliada

aparecendo assim um slide grande.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 62

Figura 40: Wireframe6 fonte autora (2010)

A figura 40 mostra a página “contatos”, onde há campos: nome; email,

mensagem. Sendo um espaço exclusivo para o usuário mandar sugestões, críticas

ou elogios. É importante criar um espaço no site desta forma porque há um interesse

grande em aproximar do público para que este sinta-se a vontade para dar sua

opinião e declarar seu ponto de vista perante os trabalhos vistos.

Logo abaixo temos o layout definitivo do site de como ele vai ficaria na

internet:

Figura 41: Layout1 fonte autora (2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 63

A figura 41 mostra a primeira tela do site pronta. A ideia é associar o fator da

emoção com as luzes das letras como se estivessem sendo “ligadas” na hora,

devido à força da eletricidade implícita.

Todo o ambiente do layout (inclusive a combinação do: amarelo e laranja

(cores quentes) psicologicamente dão a sensação de dinamismo, sugerindo alegria;

vitalidade; equilibrando-se com cores frias: azul, lilás e verde porque ao mesmo

tempo, dão um equilibro para a sensação de tranqüilidade; paz; trazendo conforto à

visão (AMOPINTAR, 2010) propositalmente tem haver com o tema da tecnologia,

como entrar em um computador cheio de cabos USB, parafusos. Elementos que

lembram internet direta ou indiretamente fazendo o caminho que a informação

percorre chegando a todos nós.

Figura 42: Layout2 fonte autora (2010)

A figura 42 mostra que ao passar o mouse por um dos nomes (que, no caso,

seriam os links dos botões de navegação) as letras mudam de cor “acendendo” e,

portanto também chamando atenção em que sessão do site a pessoa se localiza no

momento.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 64

Também se enfatiza a questão referente à forma do layout em si que são

várias abas como se fossem pastas catalogadas e à medida que se vai clicando nos

links a página referente destaca-se. Justamente lembrando a ideia de portifólio.

Figura 43: Layout3 fonte autora (2010)

A figura 43 mostra a página “arte digital” finalizada que é onde há os

trabalhos de arte digital que, no caso, dividem-se em três principais categorias:

“flores”; “abstrato”; “outros”. Esses links vão abrir novas janelas onde o usuário vai

poder ver as ilustrações digitais realizadas (figuras 40 – 45). Decidiu-se dividir em

categorias devido a uma questão de organização influenciando na usabilidade, deste

jeito, o usuário sabe quais são as suas opções de navegação e eventualmente

quando site precisar ser atualizado colocando-se mais trabalhos muitas imagens

somente em uma única página não caberia causando confusão.Por isso, foi melhor

separar.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 65

Figura 44: Layout4 fonte autora (2010)

Figura 45: Layout5 fonte autora (2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 66

Figura 46: Layout6 fonte autora (2010)

Figura 47: Layout7 fonte autora (2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 67

Figura 48: Layout8 fonte autora (2010)

Figura 49: Layout9 fonte autora (2010)

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 68

Figura 50: Layout10 fonte autora (2010)

Figura 50 mostra a página “contatos”. A meta é que as pessoas enviem seus

comentários, interagindo no espaço do fórum. Assim, abre-se um espaço para que

se sintam livres para dialogar e expressar suas opiniões pertinentes aos trabalhos

vistos ou mesmo divulgar seus próprios sites, blogs, etc. Isso contribui para o

crescimento de qualquer site hoje em dia, pois ouvir o que o público tem a dizer

reflete no que se pode melhorar no futuro.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 69

6. CONCLUSÃO

Aplicaram-se metodologias de projeto de produto e do design gráfico

adaptados para área de webdesign e o uso da teoria das cores que em sua

combinação tornam-se mais atrativas e despertam sentimentos positivos. No

decorrer deste trabalho as dificuldades maiores foram em primeiro lugar saber como

realmente são elaborados os sites e em segundo lugar como despertar um

sentimento afetivo em um produto (website). O aprendizado foi grande, o trabalho

ensina o quanto existem novas possibilidades de estudos sobre webdesign e o

enquanto ainda há para ser explorado em termos de metodologias projetuais, design

gráfico e design emocional.

Uma sugestão para trabalho futuro seria fazer uma segunda pesquisa para

saber se haverá aceitação do site criado, pelo público alvo e avaliar se os objetivos

principais do trabalho foram alcançados ou não com o resultado do projeto final,

testando o site no navegador.

E realizar um estudo mais aprofundado sobre cores para a web, analisando

quais sensações as pessoas percebem quando determinado grupo de cores é

combinado para se fazer as telas de um site. Podendo utilizar como ferramenta uma

pesquisa de campo com as telas do website em cores diferentes para investigar

quais paletas de cor causam menos poluição visual e são visualmente mais

agradáveis.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 70

REFERÊNCIAS

ABC DESIGN. Disponível em: <http://abcdesign.com.br/artigos/design-e-ergonomia/

agosto 2009/>. Acessado em: 27out.2010.

ALEXKOTI. Disponível em: <http://www.alexkoti.com>. Acessado em: 06 nov.2010.

AMOPINTAR. Disponível em:< http://www.amopintar.com/temperatura-da-cor-cores-

quentes-e-cores-frias> Acessado em: 21/11/10.

BAXTER, Mike Projeto de produto guia prático para o design de novos

produtos. São Paulo: Editora Edgard Blucher, 2000.

DAMÁSIO, Antonio The feeling of what happens USA Editora Harvest Books 2000

________________. O erro de Descartes São Paulo Editora Schwarcz Ltda 2006

FASCIONI, Lígia O design do designer Rio de Janeiro Editora Ciência Moderna

LTDA 2007.

HEKKERT, Paul; RUSSO, Beatriz Sobre Amar um Produto: Princípios

Fundamentais Universidade Tecnológica de Delft, Departamento de Desenho

Industrial, Landbergstraat 15, Delft Holanda.

HOW STUFF WORKS. Disponível em: <http://www.saúde.hsw.uol.com.br/memoria-

humana2.htm/>. Acessado em: 27out.2010.

IBGE. Instituto Brasileiro de Geografia e Estatística. Disponível em:<

http://www.ibge.gov.br/home/>. Acessado em: 27out.2010.

ITIRO, lida Projeto de Produtos São Paulo Editora Edgard Blücher LTDA 2005.

LIAFENIX. Disponível em: <http://www.flickr.com/photos/lia_fenix> Acessado em: 06

nov.2010.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 71

LINDEN, Júlio van der Ergonomia e design: prazer, conforto e risco no uso de

produto. Porto Alegre:Editora Uniritter, 2007.

MARTINS, Gilberto de Andrade. Manual para elaboração de monografias e

dissertações. Petrópolis: Editora Vozes, 2008.

MONSTRUOSIDADES. Disponível em: <http://www.monstruosidades.com.br>.

Acessado em:06 nov.2010.

MONT`ALVÃO, Claudia; DAMÁSIO, Vera Design ergonomia e emoção Rio de

Janeiro Editora MAUAD FAPERJ 2008.

NIELSEN, Jakob; LORANGER, Hoa Usabilidade na web projetando sites com

qualidade Rio de Janeiro Editora Elsevier 2007.

NORMAN, don Emotion and design: attractive things work better. Interactions

Magazine p36-42 2002

____________. Design emocional: porque adoramos (ou detestamos) os objetos

do dia a dia Rio de Janeiro Editora Rocco 2008.

ORKUT. Disponível em: <http://www.orkut.com.br/Main#Community?cmm=927291>

Acessado em: 03 out.2010.

SAMARA, Timothy Grid: Construção e Desconstrução São Paulo Editora Cosac

Naify 2007.

SIB. Disponível em: <http://www.sib.org.br >. Acessado em: 06 nov.2010.

USABILIDOIDO. Disponível em: <http://www.usabilidoido.com.br/ agosto 2004/>.

Acessado em: 27 out.2010.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 72

VETORIZANDO. Disponível em: <http://www.vetorizando.com.br/>. Acesso em: 24

nov.2010.

WATRALL, Ethan; SIARTO, Jeff Use a cabeça! – Webdesign Rio de Janeiro

Editora AltaBooks 2009.

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 73

ANEXO 01

1 – Quantos anos você tem?

() 10 – 15 anos

() 16 – 21 anos

() 22 – 30 anos

() mais de 31 anos

2- Sexo:

() Masculino () Feminino

3- Qual sua escolaridade:

() Estudante () Universitário () Nível superior () Pós-graduado

() Outro: _____________________________

4- Qual sua renda familiar?

() Um á dois salários () Três a quatro salários () Cinco salários ou mais

5- Como você se atualiza:

() Lendo revistas ou reportagens () vendo TV () Internet () conversando com

os amigos () Outros: _____________________________

6- Você gosta de internet:

() sim () não

7- Você tem internet em casa?

() Sim () Não

8- Com que freqüência você usa?

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 74

() Todos os dias () fim de semana () uma vez ou outra

9- Quantos sites você navega normalmente enquanto está conectado?

() um á dois () mais de três

10-Quais os tipos de site você gosta mais?

() notícias () entretenimento () sites específicos da minha área de atuação ()

outros: _____________________________

11-O que você considera mais importante em um site?

() Ser atrativo () Ser fácil de lembrar () Ser fácil de navegar () Ser divertido ()

outro: _____________

12-Quais os problemas freqüentes que mais atrapalham durante a navegação

dentro site?

() lentidão da internet () demorar para achar a informação desejada

() dificuldade para entender como ele funciona

() outro: _____________________________

13-Você gosta de arte digital?

() Sim () mais ou menos () Não

14- Se sim, com que freqüência você lê ou assiste algo sobre o assunto?

() Sempre () de vez em quando () uma vez ou outra

15- Você acha interessante visitar sites ou blogs que falem sobre o assunto?

() Sim () Não

16- Com que freqüência você se atualiza sobre os assuntos da arte digital?:

() Todo dia () Sempre que posso () de vez em quando

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 75

Universidade do Estado do Pará – UEPA Curso: Bacharelado em Design com Habilitação em Projeto de Produtos

Av. João Paulo II – Marco 66095 – 450 Belém – PA

www.uepa.com.br

SOUZA, Andrea. Estudos ergonômicos e de design emocional aplicados a interfaces para web. 76