SUMRIO

1. INTRODUO
O crescimento e revoluo da internet levou muitas marcas, nos ltimos, a se questionarem quanto ao modo de como comunicar e vender seus produtos aos consumidores. No ambiente atual em que o mercado de comrcio eletrnico cresce consideravelmente devido aos avanos na oferta e segurana de compra, para vender no basta apenas oferecer, e sim conquistar. esse o ponto em que o mercado de varejo de moda online1 est avanando cada vez mais. Segundo Callegari (2011), o mercado de vesturio e acessrios avanou da 20. posio em 2006 para 6. em 2010, com 5% da fatia de R$ 14,8 bilhes faturados por venda online no ano de 2010. Mesmo com um cenrio econmico favorvel, com o volume de informao e as novas tecnologias e mdias oferecidas, hoje est cada vez mais difcil chamar a ateno do usurio. Cobra (2007, p. 18) afirma que o processo de escolha de um produto de moda depende da forma como uma pessoa seleciona, organiza e interpreta as informaes recebidas para criar uma imagem significativa do mundo em que vive. Afinal, por causa desta escolha que a moda faz parte das nossas vidas, seja por necessidade, desejo, aceitao da sociedade ou luxo. A moda, como segmento movido pelo capitalismo e sendo de vanguarda, necessita de comunicao para venda de seus produtos e tendncias. Para tanto no pode deixar de se comunicar atravs da internet. Principalmente na velocidade com que prprio segmento lana novas peas. neste ponto que o design se prope a criar experincias satisfatrias no ambiente de comrcio eletrnico de peas de vesturio, sendo uma ferramenta de ligao entre a moda e a internet. A interface2 de comrcio eletrnico, objeto de estudo deste trabalho, e outras demais, como define Royo (2008, p. 89), o espao onde o design d forma linguagem, para facilitar o seu uso. atravs da interface que se constroem experincias mais ricas aumentando a relao entre clientes e usurios (DUBBERLY, EVENSON , 2008). Para isso necessrio que aspectos como comunicao, identidade visual, navegao, interao e usabilidade sejam considerados no projeto, garantindo assim que o uso da interface seja efetivo e que esta experincia resulte em um processo de compra que traga satisfao ao usurio. 1 Online, termo em ingls utilizado na internet para denotar quando o contedo est disponvel no ambiente
1

virtual em tempo real.

2 Interface, segundo Royo (2008, p. 89), por definio, rea de comunicao entre o homem e a mquina.
2

No entanto, este trabalho tem como hiptese inicial o fato de que a situao atual de plataformas de comrcio eletrnico no prope experincias to favorveis ao usurio. O relacionamento do usurio com produto no momento da compra online pode ser considerado como superficial sob o ponto de vista da experimentao e pouco perceptivo, principalmente quando comparado com o experimento real do produto de moda em uma loja fsica. Na compra digital, por exemplo, existem possibilidades limitadas de visualizao e de compartilhamento experincias entre vendedor e usurio. Ao mesmo tempo, perde-se a explorao de elementos tteis e olfativos, alm de que o usurio precisa escolher sem vivenciar o produto em seu prprio corpo. Esses so fatores restritivos do comrcio eletrnico de roupas, mas que tornam-se fatores desafiadores ao Design. Assim, parte-se tambm da hiptese de que um sistema de comunicao digital desenvolvido por meio de princpios do Design pode melhorar a experincia de compra via internet para artigos de vesturio. Ao mesmo tempo, o compartilhamento da experincia de compra atravs de redes sociais pode estimular a comprar e auxiliar a divulgao da marca. A partir deste contexto, a rede de lojas de vesturio C&A o foco de anlise deste trabalho, em virtude de algumas dificuldades encontradas no seu ambiente online de comrcio eletrnico. Esta marca foi escolhida como objeto de um estudo de caso porque atualmente seu web site possui ferramenta de venda apenas para campanhas especficas da marca, bem como apresenta problemas tcnicos como uma navegao lenta. Assim essa experincia pode se tornar um pouco frustrante para o usurio que busca comprar mais produtos da marca. A C&A, uma das maiores redes de moda do pas, atua no segmento de fast fashion. Este segmento se caracteriza por lanamentos de coleo de vesturio mais freqentes e mais curtas ao longo do ano, contrariando o sistema semestral das colees da alta-costura e de prt--porter3. Por atuar neste tipo de segmento de varejo, acreditase que a marca deveria proporcionar uma vivncia melhor de seus produtos com os usurios no ambiente online, fortalecendo o relacionamento com seus consumidores. Para construo deste projeto, a pesquisadora alia seus conhecimentos e vivncias em eventos de moda (Donna Fashion Iguatemi e So Paulo Fashion Week 2010 e 2011) e desenvolvimento de projetos digitais para clientes de marcas como Malharia Anselmi e Colcci. Alm disso, ela obteve contato com a construo de confeces de 3 Prt--porter termo em francs que significa pronto para usar, mencionado no ingls como ready-to-wear,
3

trata da produo de peas em srie com tamanhos predefinidos (PALOMINO, 2003).

pequeno/mdio porte atravs da marca pertencente a sua me na infncia. Estes aspectos levaram ao conhecimento e questionamento quanto ao posicionamento da moda dentro do ambiente digital. Partindo deste cenrio, este trabalho se prope a levantar informaes a cerca dos contedos de design de interao e design visual, alm de estudos sobre mercado de moda e comrcio eletrnico, para a construo deste projeto. Como objetivo geral, est o desenvolvimento de um web site de comrcio eletrnico para a loja de vesturio C&A, visando melhorar a experincia emocional na compra de roupas no ambiente online. Para construo deste estudo, tm-se como objetivos especficos:
- Levantar as necessidades dos usurios no processo de uma compra de roupas,

atravs de anlise de comportamentos e expectativas do usurio perante estes produto;

- Levantar os requisitos fundamentais para o desenvolvimento de um projeto que

envolva experincias emocionais favorveis, analisando web sites de comrcio eletrnico e de busca no segmento de vesturio;
- Aps estes estudos, os resultados sero utilizados para criar uma interface que

atenda aos requisitos mnimos de usabilidade e que seja compatvel com a identidade visual da marca em questo. O presente trabalho corresponde a linha de formao em design grfico com linha de pesquisa delimitada em Expresso Visual. Possui 4 captulos, sendo que o primeiro abordara o referencial terico contextualizando o projeto, dividido entre os estudos de moda, comrcio eletrnico, design de interao e design grfico. O segundo captulo contempla os mtodos de pesquisa e de projeto aplicados, sendo que o terceiro abordar o desenvolvimento e construo do projeto. E por fim as consideraes finais sobre o resultado e soluo apresentada, sendo acompanhada posteriormente das referncias bibliogrficas deste trabalho.

2.

3. REFERENCIAL TERICO 1. Moda

Palavra originaria do latim modus, moda significa maneira, modo individual de fazer, ou uso passageiro que regula a forma dos objetos materiais e particularmente, os mveis, as vestimentas e a coqueteria (CIDREIRA , p. 31). Foi a partir do final da Idade Mdia que o conceito de moda comea aparecer alm da indumentria. Miranda (2008, p.54) diz que o vestir e adornar-se, nas diversas sociedades e em todas as pocas da evoluo humana, denota maior complexidade do que a resposta inicial ao requisito puramente prtico de abrigo confortvel. As roupas, os acessrios, os sapatos so alguns dos muitos elementos que compem o universo da moda, presentes no nosso dia-a-dia. Como define Palomino (2003, p.17) moda se presta a ser seu primeiro carto de visita: at ao acordar, abrir o armrio e vestir-se, mesmo que seja com uma camiseta e um jeans, voc est fazendo um manifesto de moda. Por estar em constante movimento, muitas vezes ela considerada superficial e efmera. Porm uma indstria que movimenta milhes todo o ano e empregos nos mais diversos setores envolvidos com ela, acompanhando estilos e tendncias no mundo. Apenas para o Brasil, exportaes, no primeiro semestre de 2010, da ordem de um bilho e cem milhes de dlares (ABIT, 2010), mesmo aps a crise enfrentada nos ltimos anos. No mercado interno foram gastos mais de US$ 2.7 bilhes no mesmo perodo (ABIT, 2010). Europa e EUA so as regies que mais concentram o mercado mundial do vesturio, segundo Cobra (2007). Por ser um fenmeno social e temporal, a moda passa por um ciclo de ascenso a queda no decorrer das colees e tendncias. Este ciclo passa por 5 fases, segundo Treptow (2003): lanamento, consenso, consumo, massificao e desgaste. Neste movimento, o lanamento consiste no surgimento de uma proposta de estilo, seja ela vinda de um estilista, grupo de pessoas, novelas, filmes, etc. Aps o lanamento, necessria a aceitao desta linha de produtos por um grupo de consumidores, geralmente pessoas com alto valor aquisitivo, consumido por este e distribudo para a massa atravs de lojas de departamento, shoppings, etc. Neste movimento existem dois efeitos definidos por Jones (2005) que compem o surgimento da moda. O primeiro denominado efeito trickle-down4, surge quando o ciclo de 4 Efeito trickle-down, definido como efeito desaguamento (JONES, 2005).
4

moda comea pelo lanamento de um estilo por uma celebridade ou de uma coleo da alta-costura; consumido por pessoas famosas e formadores de opinio; e por fim, reproduzido por marcas menores e mercados mais populares para as massas. J o segundo, denominado efeito boubble-up5, onde a moda faz o efeito inverso primeira, onde as ruas e grupos especficos determinam um estilo, o mercado o define e ele vira tendncia na mdia e a partir de ento comea a virar artigo de luxo. Ambos comportamentos possuem 2 fatores em comum, a tendncia e o estilo. Entende-se por tendncia um fenmeno de moda que surge a partir de um grupo de vanguarda e dura por um curto perodo, sendo o seu fim determinado pela massificao dos artigos de moda compostos por ela. quando a tendncia passa a ser padro de vestir. J o estilo, conforme Garcia (apud TREPTOW, 2003, p.31) a capacidade de filtrar as tendncias e transform-las, produzindo novas propostas que manifestam caractersticas pessoais. A construo das colees, produo e comercializao dos produtos de moda acontecem em dois formatos: pela alta-costura ou pelo prt--porter. Do mais alto valor aquisitivo e mais exclusivo ao mais barato com produo em massa segundo Villaa, Castilho (2006). Ambos os formatos costumam apresentar duas colees por ano outono/inverno e primavera/vero. A alta-costura construda atravs da produo exclusiva e artesanal de artigos de vesturio (PALOMINO, 2003). Estes produtos so de altssimo custo, consumido principalmente por celebridades, ricos e pessoas da alta nobreza. nesse ambiente que marcas como Valentino, Dior, Lacroix, Givenchy, Balenciaga, Gucci e outras atuam. No prt--porter, em francs pronto para usar, o desenvolvimento das peas voltado para um grupo em potencial, que vai desde os produtos de elaborao mais sofisticada, at as mais populares. Segundo Treptow (2003), neste movimento as peas so produzidas em escala industrial, sejam elas em nmero reduzido, mais exclusivo, ou em maior nmero para grande parte da populao.

1.1.

Mercado

Atualmente, Estados Unidos e Unio Europia dividem grande parte do mercado mundial do vesturio, principalmente nas cidades Nova Iorque, Paris, Milo e Londres (COBRA, 2007). Movimentados pelos setores txtil e do vesturio, a moda tem como principais atuantes os estilistas, designers e varejistas. E tambm pelo seu principal alvo, o 5 Efeito bubble-up denominado tambm efeito borbulha (JONES, 2005).
5

usurio. No s da industria txtil e de vesturio vive a moda, a comunicao atua juntamente com essas duas partes do bolo para conquistar o consumidor. Atravs da internet, televiso, jornais, revistas, publicidade e etc., o consumidor recebe todos os dias ofertas dos mais variados tipos para estimular o consumo de peas de vesturio.
O mercado de moda refere-se especificamente a venda global de artigos de moda, no qual os vendedores e os compradores so comerciantes de moda e/ou lojistas de moda. Dentro desse complexo, o mercado de vesturio revela-se o mais significativo. O mercado do vesturio um lugar de encontro de oferta e demanda. Explica-se, ento, logo de princpio a oferta sob o ponto de vista do marketing. E, num segundo momento, de forma mais extensa, a demanda. (FEGHALI , 2006, p. 141)

De acordo com Jones (2005) este mercado possui uma diviso de setores para facilitar a produo e design das peas em confeces, e escolha dos preos. No que diz respeito aos setores, a segmentao ocorre geralmente entre moda feminina, moda masculina e moda infantil, porm como afirma o autor, com os avanos tecnolgicos e mudanas de cultura a fragmentao de setores tende a aumentar cada vez mais para atender os consumidores. Segundo Feghali (2006) a segmentao dividida em: moda feminina; moda masculina; adolescentes-jovens; mercado beb-infantil-juvenil; jeans; lingerie-underwear; fitness-sportswear; moda praia; uniformes escolares, profissionais e especiais; meias; e cama, mesa e banho. A segmentao de mercado uma das ferramentas mais utilizadas em marketing com o objetivo de conquistar mercados especficos e fincar bandeiras nestes (COBRA, 2007). Quanto o assunto vendas o mercado se divide em dois tipos, segundo Treptow (2003): por atacado e varejo. No atacado as compras so feitas por pedidos, onde as colees so apresentadas atravs de mostrurio completo, produzidas as peas e entregues conforme solicitao; ou sistema de pronta-entrega, em que as vendas so realizadas a partir de mostrurio parcial com disponibilidade das peas no estoque. No caso do varejo, as vendas ocorrem pelo sistema de pronta-entrega, com exceo dos ateliers, onde a confeco sob medida (TREPTOW, 2003). A diferena do varejo para o atacado est no comprador. No atacado as vendas so direcionadas a empresas e lojas, onde o cliente deve possuir CNPJ (Cadastro Nacional de Pessoa Jurdica); e no varejo os produtos so comercializados para o consumidor, em lojas, feiras com venda direta a este pblico, e franquias (JONES, 2005). Dentre os ambientes de comercializao do varejo esto, segundo alguns autores (JONES, 2005; COBRA, 2007; FEGHALI, DWYER, 2001):
a) Independentes: Segundo Jones (2005) so lojas que possuem at 10

distribuidores compostos basicamente por negociantes exclusivos com apenas uma loja ou boutique. Precisam contar com produtos inovadores e de estilistas

exclusivos para conseguir retorno financeiro e atrair consumidores j que seus gastos so maiores.
b) Mltiplas: So cadeias de lojas distribudas em vrios lugares que particularmente

vende um ou algumas categorias de produto. Jones (2005) afirma que geralmente essas lojas possuem uma identidade de marca muito forte, confeccionados em grande quantidade e vendidos a preos medianos;
c) Lojas de departamento: So estabelecimentos que possuem uma gama muito

grande de mercadorias de todos os tipos, distribudos em vrios andares. Costumam oferecer produtos que vo alm do vesturio como cama, mesa, banho, louas, etc. Segundo Feghali, Dwyer (2001) nestes espaos so feitas algumas concesses, onde so adquiridas varias marcas reduzindo o custo de produo destas lojas a zero;
d) Franquias: Define-se por lojas onde o proprietrio adquire o direito de possuir um

ponto de venda para alguma marca em determinada regio, sendo que o estoque, material de ponto de venda e toda a identidade da marca fornecida pelo franqueador (dono da marca). Neste caso o custo de varejo baixssimo, e aps aquisio do direito de venda so cobrados royalties das peas (JONES, 2005);
e) Shopping Center: conforme Cobra (2007) o shopping center o parque com

jardim de lojas dos anos 2000 e, ao mesmo tempo, uma feira livre, tudo misturado com um varejo sofisticado e de servios;
f) Lojas de rua: voltado para as classes C, D e E, a loja de rua comercializa peas

de vesturio (marca prpria ou diversas marcas) de preos menores, com forte nicho em bairros das pequenas e grandes cidades (FEGHALI, DWYER, 2001);
g) Fast fashion: possui vrias mini colees ao longo do ano com menor quantidade

de produo, boa qualidade e baixo custo. Geralmente uma loja de marca prpria com muitas redes distribudas nacional e mundialmente, com produo prpria e/ou parcerias com estilistas famosos ou celebridades (SANTIAGO, MORELLI, 2010).

1.1.1.

Comrcio Eletrnico

Como objeto de estudo deste trabalho est o comrcio eletrnico, que segundo alguns autores (COBRA, 2005; JONES, 2005; FEGHALI, DWYER, 2001) tambm classificado como um tipo de varejo. Define-se como e-commerce ou comrcio eletrnico o procedimento de compra, venda e troca de produtos, servios e informaes por redes de computadores ou pela Internet (ALBERTIN, 2004 ). No caso de uma aplicao de comrcio
8

eletrnico, conforme Unger, Chandler (2009) o projeto consiste na apresentao e posicionamento de uma marca, oferecendo contedo e facilidade na execuo de tarefas como buscar e comparar produtos, etc. Ainda como caracterstica deste tipo de sistema de venda online est a vinculao de campanhas de marketing para engajar o usurio a favor da marca da empresa. No comrcio eletrnico, todos elementos de tecnologia e de mdias interativas esto em conjunto e conectados em uma rede aberta. Connoly (apud Albertin, 2004) aponta que segundo o qual os estudos de comrcio eletrnico, em geral, so fortemente focados em segurana, criptografia, moedas e pagamentos eletrnicos, mas comrcio mais do que apenas a troca de dinheiro. Porm sistema de comrcio eletrnico no possuem somente estes fatores, inclui tambm pesquisa, desenvolvimento, marketing, negociao, vendas e etc. Para o desenvolvimento de um bom projeto todos estes e outros fatores precisam estar bem alinhados. Os nmeros se mostram favorveis ao crescimento das vendas no ambiente de comrcio eletrnico. Segundo EBIT (2010) o segmento moda e acessrios vendeu cerca de 30% do mercado na modalidade compras coletivas6. No comrcio eletrnico como um todo, a moda est na 6a. posio dentre os produtos mais vendidos, sendo que nos Estados Unidos este segmento est na 3a. colocao. O EBIT (2010) afirma que a falta de padronizao e diversidade de players especializados no setor ainda so uma carncia para potencializar as vendas nesta categoria.

1.2.

Empresa C&A

Conforme o prprio web site da marca afirma, a C&A uma das maiores redes de varejo do mundo com mais de mil lojas em 20 pases (C&A, 2011). Fundada pelos Irmos Clemens e August Brenninkmeijer h 165 anos, a empresa de origem holandesa, est no Brasil desde 1976 quando foi inaugurada a primeira loja no pas em So Paulo. A marca possui mais de 180 lojas espalhas por 60 cidades no pas, afirma o Instituto C&A (2011). Possui uma ampla linha de produtos para todos os tipos de pblicos. So vendidos, segundo Portal Fator Brasil (2007), artigos de vesturio feminino, masculino e infantil, alm de acessrios, calados e eletro-eletrnicos (celulares, cmeras digitais e aparelhos MP3 player). Como uma empresa de tradio, a C&A constitui-se de princpios ticos e de responsabilidade social com todas as pessoas envolvidas no processo, de funcionrios a 6 Conforme o EBIT (2010), os sitess de compra coletiva so modalidades de comrcio eletrnico onde so
6

feitas promoes, oferecidas para um grande numero de pessoas por um baixo custo.

clientes. Este vis social se apresenta desde 1991 no Instituto C&A, uma organizao sem fins lucrativos destinada a qualificar e cuidar da educao de crianas e adolescentes no Brasil. Entre os outros pontos no qual a empresa se preocupa, est tambm o compromisso com a sustentabilidade, onde em 2009 foi lanado o primeiro relatrio da marca com o tema e inaugurada a primeira loja C&A Eco no Brasil (C&A, 2011). A marca, desde sua fundao, possui como objetivo democratizar a moda, oferecendo produtos de qualidade a preos acessveis (C&A, 2009). A prova de que isso acompanha a empresa at hoje est na forma como ela se adapta as novas tendncias. Conforme Marchioro (2010), a marca uma das precursoras em utilizar a imagem de celebridades para atrair os consumidores no Brasil, utilizando em 1999, Ricky Martin como garoto-propaganda da marca. Em 2001, foi a vez de Gisele Bndchen, que aps trs meses de campanha, fez as vendas subirem em 20%. Recentemente a C&A aderiu ao fast fashion, trazendo estilistas renomados para assinar suas colees. Entre as grifes e nomes nacionais esto Glria Coelho, Maria Bonita Extra, Espao Fashion, Isabela Capeto, Amir Slama, Sergio K, Isabeli Fontana e Gisele Bndchen. Nos nomes internacionais esto as celebridades Cristina Aguilera e Beyonc, e a estilista Stella McCartney.

2. Design
Segundo Lbach (2001), denomina-se design a concepo de novas idias e novos processos para melhorar e facilitar a vida do usurio final. Com este intuito o design tem como objetivo projetar produtos e solues que atendam as necessidades das pessoas, levando em considerao aspectos visuais, ergonmicos, tecnolgicos, culturais, sociais, econmicos e outros. Existem muitas discusses a cerca do termo que muitas vezes relacionado de forma incorreta como desenho. Esta apenas uma das ferramentas desta rea. Segundo Villas-Boas (2001) a palavra de origem inglesa significa designo. Em latim, o termo significa designar, indicar, representar etc., porm em portugus refere-se a projeto, propsito e plano. Sendo ento o ato de projetar muito mais prximo do termo como configurao de algo, materializao de uma idia. Gomes Filho (2003, p. 21) cita:
O design existe exatamente para possibilitar a concepo, a inovao, o desenvolvimento tecnolgico e a elaborao de objetos que, dentro de um enfoque sistmico, possibilite reunir, integrar e harmonizar diversos fatores relativos sua metodologia projetual.

10

O mercado atual j aceita e favorece as empresas que levam este conceito em considerao para produo de novos produtos. Principalmente, os que se encaixem com os ideais comuns a empresa e ao seu pblico.
Qualidade perante o mercado passou a ser um pressuposto, enquanto novos diferencias so exigidos ao lado de preo e inovao. Nesse contexto que o Design se apresenta como importante estratgia competitiva, como elemento fundamenta para agregar valor e criar identidades prprias a produtos, servios e empresas. (DORNELLES apud Martins; Merino , 2008)

Sendo uma rea multidisciplinar, ela deve aliar funo, esttica, confiabilidade, usabilidade e custo em harmonia e equilbrio para que o produto seja eficaz ao usurio. O design possui muitos desdobramentos, os principais giram em torno do design industrial (ou design de produto) e design grfico, segundo Villas-Boas (2001). Para Bonfim (apud Martins; Merino, 2008) as habilitaes do design esto em grfico, produto, interfaces, interiores, moda e ambiente; alem das nfases em embalagem, txtil, mobilirio, etc. variando conforme os interesses da regio.

2.1.

Aplicaes no design Comrcio Eletrnico

Segundo Unger; Chandler (2009) os projetos de comrcio eletrnico tratam dos quatro tipos de projeto (presena de marca, campanha de marketing, fonte de contedo e aplicao baseada em tarefas), para tal organizao assim como qualquer outro projeto de interface digital necessita de design para melhorar a visualizao e facilitar a navegao. O sucesso de um projeto digital atrativo, fcil de entender e possui uma tima performance (REYNOLDS , 2004). Existem algumas controvrsias com a nomenclatura utilizada para o termo, pois muitos chamam a rea popularmente de webdesign. Autores como Nielsen; Loranger (2007), Kalbach (2009) e Garrett (2011) tratam em suas publicaes apenas do termo web, ou design para web. Cooper, Reimann, Cronin (2007) tratam tambm de produtos digitais (aplicativos mobile, desktop, interaes nas redes sociais, etc.) pelo foco dado aos campos de estudo de design de interao, arquitetura da informao e user experience. Para Royo (2008) projetos online, o design digital a rea onde se desenvolvem projetos de interfaces para a internet. uma rea relativamente nova, nas quais a teoria existente est em fase de desenvolvimento assim como a tecnologia. Porm como o prprio autor coloca o termo web s vezes se faz amplo ou limitador, pois a pgina da Web

11

(ou Web Page em ingls), foi uma das expresses que limitaram a nossa viso e compreenso do ciberespao7. Ainda este autor acrescenta que:
como se, ao nos referirmos internet, pensssemos na metfora de um grande livro mundial e todos os nossos projetos de design digital fossem orientados para algo parecido com o design editorial. No caso do design, o fato de terem sido os designers grficos aqueles que iniciaram a explorao do mundo da interface grfica tem-se ocupado (na maioria dos casos, mas sempre h excees) da comunicao de imagens sobre suportes planos e bidimensionais e isso (transportado para o design em uma tela delimitada por 800 x 600 pixels) levou a um pensamento generalizado e errneo de que bastava converter imagens para um suporte plano, sem pensar realmente nas possibilidades do meio sobre o qual se iria trabalhar. (ROYO, 2008, p. 19)

Apesar das nomenclaturas importante ressaltar que design, para projetos online incluindo o comrcio eletrnico, dividido em duas etapas: design de interao e o design visual (ROYO, 2008; COOPER, REIMANN, CRONIN , 2007; KALBACH, 2009). Mesmo ambas possuindo nomenclaturas diferentes para alguns autores, o design de interao trata de todas as interaes entre usurio e interface no web site, baseado em estudos de ergonomia, usabilidade, design emocional e arquitetura de informao. O design visual, design grfico (KALBACH, 2009) ou design sensorial (GARRETT, 2011), consiste na composio visual do projeto, somando elementos como tipografia, imagens, cores, etc. Samara (2010, p. 37) coloca que quando o designer v o projeto sob todos esses aspectos, o resultado uma poderosa tonalidade de experincia: uma experincia que evocativa, emocional, til, agradvel e memorvel.

3. Design de Interao
No desenvolvimento de produtos, o design de interao tem como objetivo conceber solues interativas que sejam utilizveis de fcil aprendizado, uso eficaz e ocasione uma experincia agradvel ao usurio no seu dia-a-dia. Winograd (apud PREECE; ROGERS; SHARP, 2007, p.28) define o design de interao como o projeto de espaos para comunicao e interao humana. Para construo de produtos interativos, deve-se levar em considerao o estudo de muitas disciplinas que envolvem o conhecimento a cerca do usurio, e suas atividades, e das interfaces as quais vo interagir. Preece; Rogers; Sharp (2007) coloca que dentre estes estudos esto os campos interdisciplinares, como ergonomia cognitiva, sistemas de informao, interao homem-computador (IHC), fatores humanos (FH), engenharia cognitiva; as disciplinas acadmicas, como ergonomia, psicologia/cincia cognitiva, informtica, cincia da computao/engenharia de software,

7 Ciberespao consiste na interconexo de informaes, de usurios e de recursos (ROYO, 2008).

7

12

cincias sociais; e por fim as prticas em design, como o design grfico, de produto, industrial, artstico e indstria de filmes. O desenvolvimento de estudos de design de interao comearam a partir da necessidade de projetar interfaces mais amigveis para os usurios, pois com a criao de sistemas por engenheiros este cuidado no existia (PREECE; ROGERS; SHARP, 2007). Ou seja, a interface era criada apenas pela experincia dos mesmos para uso prprio. Foi com o nascimento dos monitores e computadores pessoais a partir do final dos anos 70 que surge o design de interfaces. Com o passar do tempo foram acrescentadas novas tecnologias para tornar o uso do computador pessoal mais eficiente e agradvel. Acompanhando esse progresso dos computadores pessoais, evoluram tambm os aplicativos destinados ao trabalho, educao e treinamento. A partir do crescimento das novas mdias e tecnologias, o papel do designer de interao est cada vez mais ligado em unir diversas reas do conhecimento e campos interdisciplinares para construo de interfaces principalmente na web. Em se tratando de um projeto de um web site, sero aplicados os estudos de ergonomia cognitiva e design grfico como reas de suporte construo do produto. No desenvolvimento do projeto em si, Preece; Rogers; Sharp (2007) destaca que o processo de design de interao envolve 4 etapas: i) identificar necessidades; ii) determinar requisitos; iii) desenvolver alternativas que preencham esses requisitos; iii) construir verses interativas do projeto, de maneira que possam ser testados e analisados; iv) avaliar o que esta sendo desenvolvido durante o processo. Esta ltima etapa uma das mais importantes para o projeto, pois na avaliao que dir se a interao foi realmente aplicada e bem resolvida.

3.1.

Ergonomia

Define-se como ergonomia o estudo das interaes humanas entre produtos, sistemas e ambientes, levando em conta conhecimentos que otimizem o conforto e prazer do usurio e eficincia no uso destes elementos. Linden (2007) ao definir o termo, lembra que etimologicamente a palavra vem do grego ergon (trabalho) e nomos (normas, regras), e mesmo tendo como base o trabalho ao longo dos anos esse conceito foi ampliado com mais questes, envolvendo produtos, processos, ambientes e interfaces. Segundo ainda a International Ergonomics Association - IEA (2001) ela contribui para o projeto e a avaliao de tarefas, trabalhos, produtos, ambientes e sistemas no sentido de torn-los compatveis com as necessidades, habilidades e limitaes das pessoas.

13

No que diz respeito aos domnios de especializao, a ergonomia classificada em trs, conforme Abergo (2011): fsica, cognitiva e organizacional. A ergonomia fsica estuda as limitaes e possibilidades fsicas dos usurios, considerando a segurana e o conforto do usurio durante a interao com o produto dos mesmos, analisando-o sob a perspectiva da postura, do manuseio de materiais, dos movimentos repetitivos entre outros. A ergonomia cognitiva trata dos processos mentais e como eles afetam as interaes humanas com o sistema, levando em conta a fcil compreenso, interpretao e uso do produto. E por fim a ergonomia organizacional se ocupada do estudo da interao dos sistemas com as estruturas organizacionais, polticas e de processos, com o intuito de otimiz-los dentro de um contexto especfico. Portanto, ressalta-se que no projeto de interfaces digitais, o estudo dos princpios da Ergonomia Cognitiva so fundamentais.

3.2.

Ergonomia Cognitiva

No caso da ergonomia cognitiva, para otimizar as caractersticas de um produto a fim de torn-lo de fcil compreenso e uso necessrio entender a cognio humana. Ela consiste em uma resposta psicolgica do ser humano quanto ao processamento mental. a partir dela que sero entendidas as atuaes humanas perante decises, interpretaes e aes a respeito do produto. De acordo com Linden (2007). Os processos mentais envolvidos para tais acontecimentos so chamados de superiores, sendo eles os atos de compreenso (interpretao e atribuio de significados ao ambiente), aprendizado (julgamento do comportamento e ambiente inserido), planejamento (determinar a soluo de problemas) e deciso (comparao de opes e seleo da mais adequada). Para compreenso destas aes necessrio saber mais sobre as etapas onde o sistema cognitivo trabalha: percepo, processamento e ao. O estado de percepo consiste na reao a um estmulo que posteriormente gera uma sensao, sendo ela discriminada pela memria e interpretada ps comparao com os significados existentes. Na fase de processamento, esta informao analisada para a tomada de deciso. E por fim, o estgio de ao, no qual o crebro coordena a resposta ou ao a partir das interpretaes atingidas. Porm, atravs das informaes interpretadas e respondidas pela cognio, entra em questo a abordagem do sistema afetivo. Ele consiste em uma resposta emocional do usurio. ele que reage de forma mais rpida e eficiente ao ambiente inserido. Cybis (2007) aponta dois aspectos que devem ser considerados na definio de emoo, o
14

primeiro tratando-se da reao a eventos considerados importantes quanto suas necessidades, objetivos e/ou anseios, e o segundo trata dos componentes fisiolgicos, afetivos, comportamentais e cognitivos afetados. Mas no s de emoes formado o sistema afetivo do usurio. Existem tambm as respostas quanto o humor e sentimentos. No que diz respeito ao humor, ele possui uma reao mais longa que a emoo e apesar de ser causado por um objeto, no associado diretamente a ele. J os sentimentos, Cybis (2007, p. 325) afirma: resultam do julgamento de uma experincia direta com um objeto ou evento e uma conseqente generalizao para outros objetos de mesmo tipo. A partir dos sentimentos que se estabelece que a experincia de uma interface poder se tornar positiva ou no. E neste ponto que sistemas afetivo e cognitivo devem andar juntos. No caso da memria, este agente quando influenciado pelo humor, pode facilitar a recuperao de eventos com carga emocional relacionados ao humor positivo ou negativo do momento. Com esta influncia que a tomada de decises pode se tornar mais efetiva, pois a partir deste humor que se formaro os sentimentos responsveis pela reflexo e experincia vividas pelo usurio com relao ao objeto em questo. So nestas experincias que o designer deve trabalhar nas interfaces para obter resultados satisfatrios em seu projeto. fundamental que o profissional obtenha e conhea os conceitos de ergonomia para aplic-los para efetivao destes resultados. De bom humor as pessoas avaliaro melhor uma interface ou produtos de um site de comrcio eletrnico, por exemplo, e sero mais cautelosas (expondo-se menos aos riscos) define Cybis (2007, p.326). Atravs do design que os conceitos e solues ergonmicas se materializam para o bem estar dos usurios.

3.3.

Usabilidade

Conforme Cybis (2007, p.15), a usabilidade definida pela norma ISO 9241 como a capacidade que um sistema interativo oferece a seu usurio, em determinado contexto de operao, para a realizao de tarefas de maneira eficaz, eficiente e agradvel. A origem da rea tem associao a cincia cognitiva que utilizava o termo user-friendly (amigvel), em meados de 1980, para investigar, estudar e propor solues satisfatrias ao usurio em produtos e interfaces (ANDRADE , 2007). importante lembrar que a usabilidade no se trata apenas da relao do produto com o usurio, mas tambm do ambiente no qual ambos esto inseridos e a tarefa realizada neste contexto (IIDA , 2005). Como parte do nvel comportamental do design emocional (descrito a seguir), a usabilidade geralmente notada quando a mesma no acontece de maneira correta e satisfatria ao usurio. essencial nesses casos que se pense no apenas nos fatores
15

objetivos que envolvem a interao, mas tambm fatores subjetivos (cognitivos e afetivos), pois a usabilidade depende da satisfao do usurio. Andrade (2007) comenta que a partir da definio do termo podemos perceber que a usabilidade constituda de muitas caractersticas subjetivas, onde no existe uma receita ou plano perfeito para execuo de projetos que respeitem os preceitos da mesma e que atenda a 100% dos usurios. Nestes casos, o estudo sobre o usurio fundamental para que o sistema atenda as metas de usabilidade apontadas por Preece; Rogers; Sharp (2007): i) Eficaz no uso; ii)Eficiente quanto a maneira de como a interface ajuda na execuo de uma atividade; iii) Seguro no uso, protegendo o usurio de possveis situaes perigosas e no satisfatrias; iii) Ser til para o que o usurio deseja, diante da funcionalidade proposta; iv) Possibilitar facilidade de aprendizado no sistema; v) Ser fcil de memorizar o uso, para posteriores utilizaes. Estes detalhes devem ser levados em considerao no desenvolvimento de interfaces, principalmente na Web onde alguns servios so usados com uma grande frequncia. Para Nielsen; Loranger (2007) o ambiente web est cada vez mais competitivo, necessitando de um olhar mais crtico para a usabilidade.

3.4.

Design Emocional

A terminologia trata do ato de projetar interfaces ou demais produtos com o foco principal nas motivaes, desejos, satisfaes e prazeres dos usurios. Consiste no apenas em atingir as necessidades que este produto prope, como tambm superar as suas expectativas a fim de buscar uma experincia eficiente de uso (FONTOURA et al., 2006). Para tal estudo so necessrios os conhecimentos sobre design emocional. O design emocional consiste no estudo design em relao as emoes, onde o usurio demonstra suas reaes perante a experincia vivenciada diretamente com produtos. no sistema afetivo que encontramos as emoes, que aliadas ao sistema cognitivo, so responsveis pelas respostas psicolgicas do usurio em relao ao ambiente inserido (LINDEN, 2007). Norman (2008) defende trs nveis para a relao entre o design e as emoes, so eles:
- nvel visceral: trata-se de uma reao imediata e espontnea; faz uso da

percepo para sensao instantnea obtida;

- nvel comportamental: diz respeito a funcionalidade e desempenho do produto;

aqui so aplicados os estudos de usabilidade na busca da satisfao do uso;

16

- por fim, nvel reflexivo: consiste na mensagem e significados que o produto evoca

no usurio; processo de relao mais duradouro envolvendo interpretaes, compreenso e raciocnio sobre o produto.

3.5.

Arquitetura de Informao

tarefa da arquitetura de informao, estruturar e organizar padres de dados que estaro presentes na interface. O profissional que atua na arquitetura da informao (AI) responsvel por criar mapas de sites detalhados e analisar a distino de categorias e subcategorias de informao para torn-las bastante claras na navegao para o usurio (UNGER; CHANDLER , 2009). Este tambm define a hierarquia das informaes para melhor acesso a elas, e melhor beneficio tambm dos objetivos de negcio do cliente perante o projeto de um web site. De acordo com Agner (2009, p. 90) o foco da AI o projeto de estruturas (ambientes informacionais) que fornecem aos usurios recursos necessrios para transformar suas necessidades em aes e para atingir seus objetivos com sucesso, explica-nos Morrogh. Para construo desta etapa dentro do projeto de um sistema devem ser considerados trs elementos, segundo Morville; Rosenfeld (2006): usurio, contexto e contedo. Em se tratando do usurio so investigadas as necessidades, comportamentos, experincias, tarefas e audincia que se deve atingir. O contexto seria o cenrio que o projeto se prope, principalmente do cliente em questo, como objetivos, cultura, polticas e restries da empresa. Outro ponto a ser levantado o contedo que far parte do sistema, onde so identificados documentos, volume destas informaes e possveis atualizaes, tipos de dados e estrutura existente. A etapa de arquitetura de informao constituda por quatro sistemas (AGNER, 2009): organizao, rotulao, navegao e busca. Eles so responsveis por guiar a construo do mapa do site e do fluxo de tarefas que iro nortear o projeto. O sistema de organizao, segundo Agner (2009) consiste em organizar e categorizar os dados do projeto; sistema de rotulao trata de como sero os elementos textuais e visuais para os componentes presentes no web site; sistema de navegao define as formas de interagir no espao e entre as informaes; e por fim o sistema de busca que determina as questes que o usurio poder enfrentar, nas quais o banco de dados ir responder.

17

Figura 1: Mapa do site e fluxo de tarefas. Fonte: Garrett (2011)

A documentao e entrega do resultado destas pesquisas se d atravs do mapa do site e fluxo de tarefa, onde ficam visveis a estrutura e relacionamento dos contedos e pginas determinados pelo arquiteto, conforme Figura 1. Segundo Kalbach (2009, p. 250) ele captura o conceito, a estrutura da informao e o esquema de organizao de um web site em uma representao visual. J um fluxo de tarefas, determina os processos que os usurios faro enquanto acessam o web site ou aplicao (UNGER; CHANDLER , 2009). A diferena entre ambos os diagramas que mostram organizaes sobre o projeto que o mapa diz respeito a hierarquia do web site e o fluxo mostra as opes de caminhos para a navegao. A partir deles que a equipe do projeto consegue enxergar e identificar as necessidades para prosseguir a construo do sistema e desenvolver as pginas e interaes do web site.

3.6.

Design de Interface

Consiste no desenvolvimento dos comportamentos de um web site ou aplicao conforme as aes do usurio (UNGER, CHANDLER, 2009). neste processo que se renem e aplicam o estudo de design de interao como um todo, pois sero definidos a partir dos dados obtidos anteriormente a funcionalidades, comportamentos do contedo, navegaes e interaes no projeto. Para demonstrar na prtica estes estudos so desenvolvidos os wireframes, que segundo Memria (2005) consistem em esboos de como sero dispostos os elementos na interface sem aplicao de projeto visual, conforme Figura 2. Como ferramenta para desenvolvimento de um wireframe est o grid. Ele um componente do design grfico que aplicado ao design de interface compe a estrutura do posicionamento dos elementos dentro de uma interface. Segundo Ambrose, Harris (2009), o grid no serve apenas como uma grade rgida que deve ser seguida, mas como um guia de como devem se comportar
18

imagens, textos e demais elementos em uma pgina, bem como organizao da hierarquia da informao e focos de ateno.

Figura 2: Wireframe. Fonte: Garrett (2011)

Estruturado o contedo e as interaes, so documentadas as aes de como a navegao proceder, chamadas por Unger; Chandler (2009) de anotaes. O wireframe serve de documento que guiar a continuao projeto para a aplicao da identidade visual da marca ou campanha, e demais envolvidos no desenvolvimento da aplicao (GARRETT, 2011).

4. Design Visual
Consiste na construo de elementos visuais que compem a interface de um projeto digital. Segundo Cooper, Reimann, Cronnin (2007, p. 288) visual interface designers are concerned with finding representations best suited to communicating the specific behavior of the interactive product that they are designing 8. Os elementos visuais, compostos por tipografia, sinalizao, imagens e identidade visual devem estar em comum acordo para comunicar a interface do produto. O design visual se desenvolveu a partir da ampliao da funo e significao do design grfico dentro dos meios digitais. Como afirma Royo (2008), o surgimento do meio digital e da interatividade proporcionaram uma mudana substancial na linguagem visual que utilizamos. A base para o desenvolvimento do design visual a construo da 8 Traduo do texto de Cooper, Reimann, Cronnin (2007, p. 288): designers de interface visual so
8

preocupados em encontrar as representaes mais adequadas para comunicar o comportamento especfico do produto interativo que esto projetando.

19

identidade e de elementos visuais que comuniquem a experincia da marca, atravs do tom, estrutura e estilo (COOPER, REIMANN, CRONIN, 2007).

4.1.

Identidade visual

Consiste na criao, identificao e posicionamento atravs do design em uma instituio. A identidade visual vai alm de uma proposta visual de logotipo ou de smbolo que representa uma empresa, campanha ou produto. Como conta Wheeler (2008), enquanto as marcas falam de moto virtual para a mente e para o corao, a identidade da marca tangvel e apela para os sentidos. ADG (2003, p. 28) define:
O sinal de identificao de uma empresa ou instituio a ponta de um iceberg. A questo pode ser resumida em uma frase: designers grficos no projetam logotipos ou smbolos, projetam sistemas. E se at h pouco tempo identidade corporativa significava sistemas de identidade visual, cada vez mais essa noo est sendo superada pela de branding, ou planejamento estratgico. No se trata mais apenas de coordenar o conjunto de mensagens visuais de uma corporao, mas de planejar estrategicamente a construo de sua imagem.

Partindo dessa premissa que a identidade visual tem o compromisso de passar o conceito e ideais da empresa para qual vai atender. Refere-se a como ser a sua comunicao, tanto dos projetos grficos e de sinalizao, quanto web sites e projetos online. Segundo Royo (2008), no caso de peas muito distintas, de formatos distintos a identidade visual serve de guia tanto para quem est produzindo quanto para o usurio.
(...) extremamente importante que o designer entenda a linguagem visual que est criando para determinado trabalho. Isso no apenas assegura a unidade da experincia dos usurios entre as partes - guiando-os pelos nveis de mudanas da informao -, mas possibilita flexibilidade na adequao da apresentao visual de qualquer modificao. Ser capaz de controlar variaes dentro do sistema tambm evita que a experincia se torne montona para o pblico. (SAMARA, 2010)

Em caso de sites institucionais, de comrcio eletrnico e portais onde geralmente se observa a identidade de uma instituio, transpor o conceito da empresa juntamente com a linguagem digital fundamental e faz com que a imagem da marca fique cada vez mais forte.

4.2.

Forma e espao

O tema forma extremamente abrangente. A concepo da forma um meio de comunicao, no verbal, que supre a necessidade do homem de dar sentido s coisas, a forma nada mais do que a a configurao visvel do contedo, seja ela impressa ou digital. Conforme Samara (2010, p. 16) a forma o substrato: contornos, linhas, texturas,

20

palavras e imagens. Como elementos conceituais, o ponto, a linha e o plano so a base da composio de qualquer forma. Segundo Dondis (1997) o ponto e a linha so os dois principais elementos, sendo que o ponto a base para originar outras formas, a linha como uma forma, e destaca trs formas bsicas, figuras planas com variaes infinitas: o quadrado, associado a honestidade, o tringulo remete a ao, e o crculo a proteo. O plano um ponto que se tornou algo maior dentro de seu formato. Contrapondo forma, est o espao que consiste no oposto, no fundo ou negativo perante a figura. Como afirma Samara (2010, p. 16) impossvel mudar um sem modificar o outro. A conjugao desses elementos leva concepo da forma bi e tridimensional, sendo assim que do origem a qualquer forma, presentes com suas funes especficas, respondendo a cada significado por quem a concebe (SAMARA, 2010).

4.3.

Tipografia

Trata-se do estudo do processo de criao, composio, utilizao e reproduo de caracteres, geralmente associado a famlias9 de tipos onde so estabelecidos padres de estilo. Como comenta Newark (2009, p. 76) a linguagem deve ser escrita com uma famlia de tipos e essa, para ser usada, requer tipografia. O surgimento da tipografia est relacionada a descoberta da imprensa por Johannes Gutenberg, durante o sculo XV, onde foi utilizado pela primeira vez os tipos mveis metlicos em srie (FUENTES , 2009). Com a insero de computadores e softwares no trabalho do designer e do tipgrafo a utilizao da tipografia e criao de novas famlias aumentou ao longo dos ltimos anos. Apesar da grande variedade de famlias existentes atualmente, segundo Fuentes (2009), os tipos denominados clssicos se sobressaem na grande maioria das vezes, como Times, Helvetica, Garamond e outras. No que diz respeito aos elementos que compe a tipografia, a legibilidade deve permear em qualquer projeto tipogrfico. Devem ser levados em conta no s aspectos estticos e econmicos como tambm as questes tcnicas, para melhor qualidade, uniformidade e coerncia do trabalho (ROCHA, 2005). Entre as razes de ser da tipografia est a de valorizar os diversos componentes de um texto, dando personalidade e possibilidade de reconhecimento a cada categoria ou qualidade de informao aponta Fuentes (2009, p. 71). Entre as classificaes de famlias tipogrficas esto: tipos clssicos,
9 Famlia tipogrfica: trata-se do conjunto de caracteres em que o estilo e caractersticas dos tipos so semelhantes, possuindo caractersticas fundamentais independente das variaes de suas hastes. (ADG , 2003)
9

21

aplicada geralmente em textos corridos so aqueles que no percebida, que est integrada visceralmente ao contedo e, portanto, no deveria chamar ateno para si(ROCHA , 2005, p. 52); e os tipos experimentais, que esto associadas ao estilo do designer, sendo muitas vezes mais rebuscadas e com objetivo mais esttico do que legvel. Segundo Kalbach (2009), a tipografia em interfaces digitais possui algumas dificuldades quanto a qualidade, j que a resoluo mxima que pode ser utilizada nos computadores de 85 pontos por polegadas (dpi). Alm disso a leitura da interface costuma ser rpida, portanto se a legibilidade no for to favorvel a compreenso poder ficar comprometida. Para Royo (2008) no meio digital a tipografia deve possuir legibilidade e contraste, hierarquizar a informao e consistncia na aparncia e identidade do projeto.

4.4.

Cor

Atualmente utiliza-se o uso de cores em meios de comunicao, seja ele impresso ou digital, devido facilidade de criao. Principalmente pela proliferao de softwares grficos acessveis, utiliza-se grande parte de recursos visuais para criar uma nova linguagem, possibilitando assim uma comunicao eficaz entre o sistema e o usurio. As cores tm propriedades diferentes de acordo com a cultura onde so consideradas. Segundo Kalbach (2009) o uso da cor responsvel por facilitar o aprendizado do usurio, constitudo de propriedades estticas, associaes simblicas e informativas. Ainda Segundo o autor o poder cognitivo da cor atrai e interage com as pessoas, podendo acrescentar informaes, associaes simblicas e estruturais sobre a interface observada. A padronizao de cores pea importante para uma interface simples e de fcil acesso, garantindo conforto ao usurio em questo perante o sistema. As cores se caracterizam por quatro fatores, segundo Samara (2010): matiz, que determina a identidade da cor; saturao, referindo-se a intensidade ou brilho da cor, determinando se ela ser mais ou menos vibrante; o valor que determina a luminosidade que comum a identidade da cor; e por fim a temperatura, que trata da qualidade da cor relacionada a experincias. Os sistemas de cores utilizados para construo de materiais, digitais ou impressos so classificados de duas formas (FUENTES, 2009): RGB e CYMK. O sistema RGB o padro de cores, onde cada cor primria (Red, Green e Blue) representa um dos eixos do cubo RGB (em um sistema cartesiano X, Y, Z). Este sistema utilizado em TVs e monitores dos mais variados tipos. J o sistema CMYK formado pelas cores ciano (Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK) e aplicado em dispositivos de impresso.

22

4.5.

Imagem

As definies a cerca o termo imagem vo alm da simples denotao de uma representao da realidade e da sociedade. No ponto de vista da gesto do design, por exemplo, imagem diz respeito a maneira como o pblico percebe a empresa ou seus produtos (MARTINS ; MERINO, 2008, p. 135). Santaella; Nth (2008) conta que o estudo da imagem , assim, um empreendimento interdisciplinar, que pode ser observados por diversas perspectivas como a semitica, a cognio, psicologia, artes, etc. Como elemento determinante para construo de um design, a imagem possibilita a transmisso de uma mensagem com apoio ou no textual, atraindo o pblico. A conexo entre as imagens e as experincias demonstradas muito mais profunda que as palavras (CHINEN, 2009). A imagem um recurso de comunicao utilizado pelo homem desde a pr-histria. Segundo Fuentes (2009), desenhar/representar uma atividade to vital e primrio quanto s necessidades bsicas do homem. Atualmente somos permeados por mensagens visuais o tempo todo, e o uso delas por parte do design s faz reforar as mensagens a serem atribudas no produto. Porm no s da representao que a imagem demonstra o sentido necessrio no projeto, necessrio harmonia entre o tipo de imagem utilizado e o restante dos elementos utilizados para efetivar a mensagem (CHINEN , 2009). Os projetos de design, especificamente os projetos de web sites, fazem uso de imagens como fotografia, ilustrao e cones. A fotografia a representao da realidade que revolucionou a arte. Conforme Gombrich (apud Newark, 2009) no houve necessidade de a pintura realizar uma tarefa que um dispositivo mecnico poderia fazer melhor e a um bom preo. Newark (2009, p. 92) diz que o grande salto no uso da fotografia por parte do design foi a montagem, que intervm na imagem - cortando e adicionando cor e texto fotografia. Este um dos muitos recursos de manipulao que o design permite junto ao exerccio da fotografia, que a torna algumas vezes bastante subjetiva e pessoal. J a ilustrao (junto com a pintura) por muito tempo foi a nica forma de representao da realidade, at a chegada da fotografia no incio do sculo XIX. A partir de ento ela passou a ser utilizada como um modo pessoal de representao ou muitas vezes mais esquemtico, apresentando processos ou fatos no visveis (FUENTES, 2009). Ilustraes podem ser concretas, objetivas, realistas, ou at mesmo abstratas e simblicas, sendo estes ltimos responsveis por trazer um tom mais orgnico e emocional ao trabalho, dependendo do trao aplicado. O cone, muitas vezes associado ao pictograma, um signo visual que possui semelhana ou equivalncia na sua forma e/ou conceito do objeto representado (ADG,
23

2003). A origem dos cones vem dos tradicionais signos orientais e tambm da escrita hieroglfica egpcia (FUENTES, 2009). Utilizado em sistemas de sinalizao tanto fsico quanto em online, o cone por se tratar da sntese de uma informao (seja ela uma ao ou objeto) contribuem segundo Kalbach (2009), para a clareza ao reforar algum elemento (geralmente texto); facilitam o aprendizado, entendimento e lembrana de elementos e funcionalidades do projeto; e ocupam menos espao que textos em casos de muita informao na pgina. importante ressaltar que o uso de imagens, independente do tipo ou do formato, no serve apenas para simples recurso esttico, mas tambm para complementar as informaes adicionais da composio (NIELSEN; LORANGER, 2007). Kalbach (2009, p. 315) coloca que um bom design visual pode guiar os visitantes atravs do site.

4.6.

Composio na comunicao visual

Trata-se do resultado da construo e organizao de elementos visuais e textuais numa pea, produto, ou sistema. Diz respeito a propores, alinhamentos e hierarquias que imagem e contedo devem obedecer para se obter equilbrio entre as partes para favorecer a clareza da mensagem. Atravs destes posicionamentos que se dar a forma como o contedo ser visualizado, afetando a reao emocional deste design (AMBROSE, HARRIS, 2009). Ter noo e verificar os detalhes das partes, sem deixar de perceber o todo tarefa do designer para elaborar uma pea eficaz (SAMARA, 2010). No caso de composies visuais, principalmente para web, as partes compreendem contedo, tipografia (e disposio das mesmas no espao), imagens (fotografia, ilustrao, cones) e em alguns casos peas audiovisuais.

5. Sistema e Tecnologia do Comrcio Eletrnico

O desenvolvimento de um projeto de comrcio eletrnico deve levar em considerao os conceitos de sistema, sistemas de informao e segurana da informao. Segundo Foina (2006) um sistema pode ser definido como um conjunto de elementos interrelacionados que interagem no desempenho de uma funo. Assim, um sistema uma entidade composta de pelo menos dois elementos e uma relao estabelecida entre cada elemento e pelo menos um dos demais elementos do conjunto. Cada um dos elementos de um sistema ligado a todos os outros elementos, direta ou indiretamente. Alm disso, todo sistema possui vrios elementos inter-relacionados que coletam (entrada), manipulam e armazenam (processo), disseminam (sada) os dados e
24

informaes e fornecem um mecanismo de feedback, conforme ilustrado na Figura 3 abaixo:

Figura 3. Fonte: elaborao prpria.

No caso dos sistemas de informao, no qual se enquadra a ferramenta de comrcio eletrnico, o termo consiste, segundo Smola (2003), na expresso utilizada para descrever um sistema automatizado ou manual, que envolve pessoas, mquinas, e mtodos para organizar, coletar, processar e distribuir dados para os usurios do sistema envolvido. Um sistema de informao pode ser usado ento para prover informao, qualquer que seja o uso feito dessa informao. Nos sistemas de informao, vrias partes trabalham juntas visando um objetivo comum. Esse objetivo o fluxo mais confivel e menos burocrtico das informaes. As principais vantagens so, como afirma Foina (2006): - acesso rpido a informaes; - integridade e veracidade da informao; - garantia de segurana de acesso a informao. Em sistemas como o de comrcio eletrnico, um dos fatores que torna a possibilidade de compra mais efetiva, alm da interface est na segurana que o sistema apresenta. O conceito de segurana da informao se refere, conforme Smola (2003), proteo existente sobre as informaes de uma determinada empresa ou pessoa, isto , aplica-se tanto as informaes corporativas quanto s pessoais. Entende-se por informao todo e qualquer contedo ou dado que tenha valor para alguma organizao ou pessoa. Ela pode estar guardada para uso restrito ou exposta ao pblico para consulta ou aquisio. Segurana da informao garantir que as informaes estejam protegidas contra o acesso por pessoas no autorizadas (confidencialidade), estejam sempre disponveis quando necessrias (disponibilidade), e que no tenham sido corrompidas ou adulteradas (confiabilidade). A falta dela uma das principais fontes de preocupao na hora de
25

comprar. Segundo Albertin (2006, p. 211) alguns autores acreditam que os clientes so relutantes em entregar a seus fornecedores os dados referentes a suas informaes demogrficas, padres de compras e necessidades de produtos. Para tal importante ressaltar na interface no apenas as informaes necessrias para a compra, mas tambm dar confiabilidade atravs do sistema para que a experincia no seja comprometida.

5.1.

Tecnologia

Aps a conceituao de sistemas e da interface, para que o sistema se torne realidade necessrio tambm os conhecimentos sobre a viabilidade deste projeto e como ele ser construdo. Para tanto importante que se tenha conhecimentos sobre as tecnologias envolvidas para o desenvolvimento do projeto. Conforme Kalbach (2009, p. 202), voc pode no ser um programador, nem aspirar tornar-se um. Mesmo assim, critico entender as capacidades e limitaes bsicas das tecnologia web. Segundo o autor existem 3 nveis de tecnologia no desenvolvimento de um projeto online: plataforma, tecnologias de back-end e tecnologias de front-end. Plataforma consiste nos dispositivos onde as informaes sero adaptadas e visualizadas (KALBACH , 2009). Nesta etapa entram limitaes e possibilidades em ambientes como dispositivos mveis como celulares, smartphones, tablets, e-books etc., e tambm em computadores, e TVs interativas. Como afirma Kalbach (2009) tecnologias de back-end consiste em um sistema que faz o web site funcionar. nele que so estruturadas as tecnologias de banco de dados, segurana, usurios e gerenciamento de contedo, armazenando todas as informaes gerenciveis ou no do projeto. J as tecnologias de front-end tratam dos cdigos que tornaram visveis as informaes na tela do usurio. Neste nvel o designer tem envolvimento fundamental, pois o acompanhamento e conhecimento das tecnologias far com que o mesmo possa restringir ou explorar mais possibilidades dentro do que o projeto permite. O HTML e o XHTML so a base das linguagens de programao para a interface web (ADG, 2003). Dentre as demais utilizadas esto o Flash10, CSS11, JavaScript12 e outros.

10 Flash: software de desenvolvimento de animaes grficas, da empresa Adobe.

1

11 CSS: Cascading Style Sheets trata-se da linguagem de programao responsvel por guardar as
1

informaes de estilo de um web site (fontes, cores, diagramao, alinhamentos, etc.).

12 JavaScript: linguagem de programao que possibilita funes interativas e animaes, atravs de

1

incluso com o cdigo HTML.

26

A qualidade nesta etapa influencia na visualizao dos resultados obtidos atravs da construo da interface pela equipe de design (UNGER, CHANDLER, 2009).

27

4. METODOLOGIA 1. Mtodo de Pesquisa

O mtodo de pesquisa consiste em uma atividade racional e sistemtica de levantamento de informaes atravs de um processo devidamente planejado para alcanar um objetivo (GIL, 1991). Para a concepo deste trabalho optou-se pelo estudo de caso como estratgia de pesquisa. Segundo Yin (2001, p.32): o estudo de caso uma investigao emprica que investiga um fenmeno contemporneo dentro de seu contexto da vida real, especialmente quando os limites entre o fenmeno e o contexto no esto claramente definidos. A opo por este tipo de investigao se d pelas informaes de usurios e mercado, necessrias para a construo do projeto, alm do referencial terico presente neste trabalho. Para a coleta de dados sobre o pblico e a interface pretendida ser feito uso tambm de abordagens qualitativas e quantitativas. Atravs dos objetivos especficos foram delimitadas as ferramentas (Quadro 1) para coleta de dados a fim de atingir a finalidade proposta. Objetivos especficos Levantar as necessidades dos usurios no processo de uma compra de roupas, atravs de anlise de comportamentos e expectativas do usurio frente a interface; Levantar os requisitos fundamentais para o desenvolvimento de um projeto que envolva experincias emocionais favorveis; Ferramentas Aplicadas Aplicao de pesquisa qualitativa com os usurios e avaliao dos dados quantitativos da Pesquisa Sobre o Uso das Tecnologias da Informao e da Comunicao no Brasil 2009, publicado pelo Comit Gestor da Internet no Brasil - CGI.br. Levantamento de dados atravs de desenvolvimento de referencial terico; Anlises de web sites de comrcio eletrnico e de busca no segmento de vesturio, atravs da metodologia projetual de Gui Bonsiepe (1984). Aplicao de teste de personalidade de produto, segundo Linden (2007). Desenvolvimento da interface atravs da metodologia projetual de Bonsiepe (1984) e ferramentas dos autores James Kalbach (2009), Russ Unger e Carolyn Chandler (2009) e Javier Royo (2008).

Os dados levantados, sero utilizados para criar uma interface que atenda aos requisitos mnimos de usabilidade e que seja compatvel com a identidade visual da marca em questo.

Quadro 1 Objetivos especficos do projeto e ferramentas aplicadas. Fonte: elaborado prpria.

28

2. Mtodo Projetual
O mtodo projetual consiste na utilizao de etapas para desenvolvimento de um projeto. Neste trabalho foi escolhida a metodologia de Gui Bonsiepe (1984) por abordar as anlises necessrias para este projeto e ser flexvel para a utilizao de ferramentas especficas da rea de design digital. Para estas ferramentas foram utilizados os autores James Kalbach (2009), Russ Unger e Carolyn Chandler (2009) no que diz respeito a design de interao e Javier Royo (2008) para design visual. Segundo Bonsiepe (1984) receitas de bolo levam com certeza a um determinado resultado; tcnicas projetuais s tm certa probabilidade de sucesso. A partir dessa colocao, sua metodologia serve para guia de desenvolvimento de projeto, sendo flexvel dependendo da necessidade do mesmo. O projeto tem como estrutura de processos 5 grandes partes: problematizao; anlise; definio do problema; anteprojeto/gerao de alternativas; e projeto. A seguir a tabela mostra sobre como ser abordada as etapas e procedimentos metodolgicos para a construo deste projeto. Etapas 1. Problematizao Objetivo/Definio Neste processo so definidos quais os problemas que o projeto enfrenta, objetivos e critrios para a resoluo do problema. utilizado para determinar todos os dados do produto envolvido, para detectar o problema e evitar deficincias de informaes para o desenvolvimento do projeto. Trata-se da busca por informaes referentes ao histrico do produto, para detectar a evoluo e qual o caminho percorrido ao longo do seu tempo de vida. Consiste no resultado de buscas com relao aos concorrentes sejam eles diretos ou indiretos do produto. Procedimentos Metodolgicos Anlise de literatura;

2. Anlises 2.1. Lista de Verificao

Anlise do web site da campanha Stella McCartney para C&A e Lojas Renner (KALBACH, 2009); Anlise da identidade visual de materiais impressos que efetuam venda por catlogo: Hermes e Avon; Anlise dos web sites das lojas Renner, Zara e o buscador Boutiques.com (KALBACH, 2009). Avaliao dos resultados do Teste de Personalidade de Produto aplicados nestes projetos (LINDEN, 2007);

2.2. Anlise Diacrnica

2.3. Anlise Sincrnica

29

Etapas 2.4. Anlise Estrutural

Objetivo/Definio Confere a anlise dos elementos que podem compor o projeto. Compreende a organizao e a descrio dos componentes presentes no projeto. Serve para a coleta de informaes de como sero as caractersticas do produto, tanto os aspectos ergonmicos quanto das funes tcnicofsicas dos componentes e comportamentos do mesmo. Consiste no reconhecimento e compreenso da composio do produto, bem como detalhes de sua forma e superfcies. Trata da anlise dos pblicos no qual o produto quer atingir.

Procedimentos Metodolgicos Anlise do web site Stella McCartney para C&A e lojas Renner (UNGER, CHANDLER, 2009; ROYO, 2008); Anlise do web site Stella McCartney para C&A e lojas Renner (UNGER, CHANDLER, 2009; ROYO, 2008);

2.5. Anlise Funcional

2.6. Anlise Morfolgica 2.7. Anlise de pblico alvo

Anlise do web site Stella McCartney para C&A e lojas Renner; Avaliao de pesquisa qualitativa e da pesquisa quantitativa segundo o Comit Gestor da Internet no Brasil CGI.br (2009);

3. Definio do Problema 3.1. Lista de Requisitos

3.2. Hierarquizao de Requisitos

Etapa onde so definidos os requisitos e definidos os pontos a serem resolvidos no projeto. Serve como auxilio para quais prioridades e metas o projeto deve tomar. Tanto positiva como negativamente. Cada item deve estar bem detalhado com frases sempre positivas para construo e no limitao do mesmo. Este por sua vez determina as prioridades quanto ao tempo e atendimento do projeto. A interao dos fatores pode ser separada por interaes positivas, neutras ou negativas, em forma de matrizes.

Construo do mapa do site e do descritivo do projeto (UNGER, CHANDLER, 2009);

30

Etapas 4. Anteprojeto/Gerao de Alternativas

Objetivo/Definio Nesta etapa que so geradas e pensadas as possveis soluo para o problema projetual, sendo elas comeadas de maneira bsica e logo depois aperfeioadas para desenvolvimento de prottipos. Consiste em definir qual ser a principal abordagem e conceito do projeto, que nortearo os esboos junto ao descritivo do web site. Desenvolvimento da estrutura e organizao da interface, bem como a navegao do projeto, aplicando os conceitos de design de interao. Criao de identidade visual a partir dos wireframes desenvolvidos na fase anterior. Definio da identidade visual e apresentao final da proposta.

Procedimentos Metodolgicos

4.1. Conceito

4.2. Projeto de interface

Esboos e desenhos do conceito de navegao e wireframe (UNGER, CHANDLER, 2009); Aplicao de identidade visual (ROYO, 2008);

4.2. Design Visual 5. Projeto

31

5. APLICAO DO MTODO PROJETUAL 1. Problematizao

A partir dos estudos desenvolvidos sobre design de interao e visual, bem como estudos de moda e comrcio eletrnico, este trabalho se presta a construo da interface de um web site de comrcio eletrnico da rede de lojas de vesturio C&A. O projeto pretende desenvolver a partir da interface uma experincia satisfatria na compra de roupas no ambiente online.

2. Anlises
Para a construo deste projeto sero analisados 3 web sites de empresas concorrentes, diretas e indiretas, da marca em questo: lojas Renner13, a segunda maior rede de lojas de departamentos de vesturio no Brasil, concorrente da C&A; a marca espanhola Zara14, uma das maiores redes de vesturio no mundo, sendo uma das primeiras a aplicar o conceito de varejo fast fashion como estratgia de venda (DELGADO , 2008); e o site de busca do Google destinado ao segmento de comrcio eletrnico de roupas, Boutiques.com15. Alm dos estudos destes 3 projetos, ser analisado tambm o web site Stella McCartney para C&A, projeto de lanamento e venda dos produtos da estilista no portal da marca, e o usurio que ser atendido pela proposta, para a construo do resultado que os atenda.

2.1.

Lista de Verificao

Para organizao e estruturao dos dados que sero analisados, o trabalho far uso de uma lista de verificao do projeto para definir o problema e apontar idias para possveis alternativas e solues. No caso de um projeto de interface digital, sero considerados os itens levantados requisitos a cerca do design de interao e design visual nos projetos que sero verificados ao longo da etapa de anlises: site das Lojas Renner e

13 Disponvel em: http://www.lojasrenner.com.br;

1

14 Disponvel em: http://www.zara.com;

1

15 Disponvel em: http://www.boutiques.com;

1

32

da campanha Stella McCartney para C&A16. Ambos foram escolhidos pelo primeiro se tratar da segunda maior rede de departamentos do Brasil e a segunda por se tratar do web site que ofereceu a comercializao online dos produtos da marca C&A para a campanha de lanamento da coleo da estilista Stella McCartney. Estes projetos serviro de estudo para as demais anlises deste projeto.

2.1.1.

Lojas Renner

Figura 4: Web site das Lojas Renner. Fonte: lojasrenner.com.br

Sobre o web site das lojas Renner (figura 4), a aplicao da lista de verificao resultou nos seguintes aspectos:
a) O objetivo principal do ambiente online da marca a venda dos produtos de

vesturio, divididos em marcas, segmentos e categorias de peas;

b) Tanto na pgina inicial quanto nas pginas de categorias os produtos so listados

em um grid de 5 colunas e paginao com at 12 itens;

c) No topo das pginas, existe um componente de busca de produtos, alm da

indicao e sinalizao de status de compra e de cadastro direita;

d) A pgina inicial possui um destaque com at 5 banners, e destaques sobre

formas de pagamentos e vantagens para favorecer a aquisio do produto (troca, frete grtis, etc.);

16 Disponvel em: http://www.stellamccartneycea.com.br;

1

33

e) O banner desenvolvido com tecnologia Adobe Flash e o restante do site

diagramado e programado em HTML e CSS;

f)

Possui dois tipos de navegao: a global, junto ao topo, dividida entre os segmentos onde a marca atua, com subdivises entre categorias de produtos e marcas dentro da rede; e uma navegao lateral com as marcas divididas por segmentao. Quando se trata das pginas internas, a navegao lateral funciona como filtro, com a listagem de categorias de produtos, faixas de preo, cores, tamanhos e outras opes de escolha. Logo abaixo da navegao lateral existem 5 destaques para demais campanhas ou promoes da marca, sendo uma delas com destaque para opo de troca fcil do produto;

g) Outra navegao utilizada no web site por Tags, que so palavras chave

utilizadas nos produtos e reunidas em uma listagem com maior relevncia para as mais citadas;
h) Em cada item dos produtos listados, possui uma foto do produto, titulo da pea,

marca que ele pertence, valor do produto, condies de parcelamento via carto Renner ou outros cartes, cores disponveis, e um link para produtos similares ao visualizado. Em alguns casos, os produtos possuem uma sinalizao quando esto na promoo ou pertencem a uma marca em especifico (como o caso da linha Maternity);
i)

O rodap da pgina possui um descritivo sobre as formas de pagamento, servios financeiros ( direita), e demais dados sobre parceiros e certificaes. A rea possui tambm um cadastro para newsletter, e link para as redes sociais;

j)

Abaixo do rodap existe tambm uma navegao inferior com links para a rea institucional da empresa;

k) Na pgina de detalhe do produto, o topo e o rodap do web site se mantm,

sendo visualizados: a foto do produto em um componente com possibilidade de ampliao da imagem e galeria para mais vistas do produto; descritivos sobre o produto com titulo, valor, quantidade, tamanho, cores disponveis, condies de parcelamento, descrio da pea, informaes tcnicas e compartilhamento pelas redes sociais. Ainda nesta pgina so visualizados os produtos relacionados oferecendo mais opes ao usurio;
l)

Quanto composio visual, o site possui elementos limpos apesar do peso da imagem dos produtos se sobressair. As cores acompanham a identidade da empresa, sendo o vermelho para alguns destaques e o restante em tons de cinza,

34

do mais claro para fundos de elementos ao mais escuro para textos ou campos de texto;
m) As fotos dos produtos so mais tcnicas e limpas para demonstrar apenas a

pea e seus detalhes;

n) Os elementos grficos, tanto do logo quanto do menu, remetem a costura e ao

detalhe de um acessrio, presentes no ambiente da marca;

o) E por fim, a tipografia utilizada a famlia Arial, com variao entre tamanhos e

pesos de acordo com a hierarquia da informao.

2.1.2.

Campanha Stella McCartney para C&A

Figura 5: Web site da campanha Stella Mccartney para C&A. Disponvel em: <http://www.stellamccartneycea.com.br>

Com relao ao web site da campanha Stella McCartney para C&A (figura 5), a lista de verificao apresentou os seguintes resultados:
a) A finalidade do web site mostrar a campanha e os produtos da estilista Stella

McCartney desenvolvido para a marca, com possibilidade de venda dos produtos;

b) O projeto possui 3 menus: o primeiro, global, faz parte de todas as pginas e

reas do portal C&A; o segundo o menu de navegao interna, especifico para o web site da campanha; e o terceiro trata de reas diversas relacionados ao produto, como Acompanhe seu pedido, Como cuidar do seu produto, FAQ e Share (compartilhamento para as redes sociais);

35

c) O rodap constitudo por um menu institucional tambm presente nas demais

reas do portal, com menor destaque perante os demais menus;

d) Na pgina inicial apresenta-se uma foto conceitual da campanha, apresentando

os produtos de maior destaque;

e) A listagem de produtos se apresenta de duas formas: pelo item do menu

LookBook, onde a visualizao dos mesmos feita atravs de uma galeria de fotos com as peas vestidas em uma modelo; e pelo item Produtos onde a listagem apenas com as peas da coleo;
f)

O detalhe do produto visualizado em ambas as listagem atravs de uma janela de contedo suspensa denominada modal, onde esto descritos o titulo, valor, quantidade e cores da pea. A imagem do produto pode ser ampliada, e tambm na mesma janela visualizada a foto correspondente ao produto no LookBook.

g) Quanto aos elementos estticos o site todo em tons pasteis, com cores

semelhantes as presentes nos produtos da coleo;

h) A tipografia utilizada classificada com uma fonte sem serifa, semelhante

famlia Futura, no menu e textos referentes a campanha. No rodap, a tipografia em estilo pixel, e nas reas referentes C&A ela pertence a uma famlia semelhante fonte Din. A partir desta anlise e dos itens listados, possvel que determinar que a nova proposta deva levantar as seguintes questes:
a)

Quais devero ser as classificaes e a organizao das reas para que o projeto no seja confuso? Como as imagens utilizadas no web site devero ser apresentadas para denotar o conceito da campanha e da marca? Qual a melhor forma de visualizar todos os produtos da marca?

b)

c)

2.2.

Anlise Diacrnica

A anlise diacrnica trata do histrico do produto. Como o projeto em questo recente e as mudanas so constantes no ambiente online, sero analisadas nesta etapa projetos impressos que fazem uso do mesma finalidade do comrcio eletrnico para a venda, neste caso, a venda de produtos a distncia. Foram coletados dados a cerca das revistas Hermes e Avon, ambas especialistas na venda de produtos por pedido por correio ou intermdio de consultoras. As duas iniciaram suas atividades com a venda por catlogo e posteriormente ampliaram pra outras ferramentas.

36

Segundo o site da empresa Hermes, a marca foi fundada em 1942 e sediada na cidade do Rio de Janeiro, a Hermes S/A a maior empresa brasileira, ficou conhecida com a maior empresa de vendas no varejo atravs de catlogo, com mais de 10 milhes de clientes em todo o Brasil. Atua atravs de diversos canais de vendas: Venda Direta, Marketing Direto e Internet, por meio dos catlogos Hermes, Bella, Hermes Big Show, alm do site de comercio eletrnico e catlogo Comprafacil.com. e Comprafacilempresas.com. A empresa oferece uma grande variedade de produtos, como: utilidades domsticas, confeces masculina, feminina e infantil, linha ntima, calados, artigos de cama, mesa e banho, cosmticos, eletrnicos, eletrodomsticos, eletro portteis, perfumaria, telefonia e celulares, cine e foto e vrios outros. So mais de 30 mil itens comercializados diariamente.

Figura 6: Capas da revista Hermes. Fonte: elaborao prpria.

O foco dos catlogos da Hermes, conforme figura 6, esto mais associados ao preo do que ao produto, por ser uma venda direcionada ao pblico C, D e E. Logo na capa existem chamadas indicando o valor das peas aplicadas em uma foto conceitual, formas de pagamento e de parcelamento, com valores baixos. A empresa comercializa mais de 10 mil itens, variando entre as categorias como moda feminina, masculina e infantil, lingerie, artigos de cama, mesa e banho, utilidades domsticas, cosmticos, calados femininos e masculinos, livros, DVDs etc. (HERMES, 2011). A identidade visual varia de acordo com a promoo, principalmente nas cores. A tipografia sem serifa, e para promoes possuem algum efeito para destaque. Quando so informativas possuem apenas variao de cor e de peso (em negrito) para dar maior destaque. As fotos utilizadas so, conforme figura 7, conceituais aplicadas na modelo, sendo que em alguns casos mais de um produto so sinalizados para venda. Para cada produto, so descritos o cdigo de referncia, descrio do produto, valores, condies de pagamento e tamanhos disponveis.

37

Figura 7: Catlogo Hermes. Fonte: elaborao prpria.

A Avon uma empresa norte-americana, fundada em 1886 como Califrnia Perfume Company. O nome Avon surgiu em 1939, inspirado pelo dramaturgo ingls William Shakespeare. Hoje uma empresa mundialmente conhecida, inclusive no Brasil aonde chegou em 1959. A empresa lder mundial de Mercado, com uma receita atual de U$$ 10 bilhes, ela comercializa seus produtos em mais de 100 pases. O Brasil conta com mais de 1,1 milho de vendedores autnomos, comercializando os produtos da Avon. Cada campanha de venda dura em mdia 19 dias.

38

Figura 8: Capas revista Avon. Fonte: elaborao prpria

Assim como para a revista Hermes, a revista Avon (figura 8) no sofreu grandes alteraes nos ltimos anos, portanto para a avaliao da identidade visual foi utilizada a ltima verso da revista at o momento.

Figura 9: Revista Avon 2011. Fonte: elaborao prpria.

A revista com a rea destinada a moda divide espao com outras categorias de produtos como livros, jias, acessrios, etc. A capa conceitual j divulgando parte das peas, como mostra figura 9, que esto na categoria de vesturio, porm o apelo para o valor no aparece a primeira vista como na Hermes (apesar de ambas atingirem os mesmos pblicos). Como a nica ferramenta de venda a revista, as pginas de vesturio possuem uma foto conceitual, com uma composio do produto, descritivo da pea, cores e tamanhos disponveis (com respectivos cdigos), foto apenas do produto no canto inferior, e no canto superior fotos de detalhes que so caractersticos de cada pea.
39

2.3.

Anlise Sincrnica

Esta etapa dentro das anlises trata do conhecimento dos produtos concorrentes diretos e indiretos do projeto em questo, estudando elementos e componentes sendo analisados erros e acertos a fim de explorar novas possibilidades no produto. Sero levantadas questes a respeito do design de interao (arquitetura de informao e design de interface) e design visual (composio visual) dos 3 web sites citados anteriormente: lojas Renner, Zara e o site de buscas Boutiques.com. Nestes projetos foi aplicada tambm junto aos usurios o teste de personalidade do produto, segundo Jordan (2002), a fim de analisar o impacto das pessoas perante estes projetos.

2.3.1.

Lojas Renner

Figura 10: Web site Lojas Renner. Fonte: elaborao prpria

40

Em se tratando do design de interao (figura 10), a organizao das pginas vertical dividida entre o topo com marca da empresa, componente de busca e componente de carrinho de compra, a rea de contedo destinada listagem de produtos e descritivo das peas, e rodap, com informaes sobre formas de pagamento, parceiros, certificaes, servios financeiros e compartilhamento nas redes sociais. A navegao entre as sees obedece classificao dos itens entre: segmentos, marcas e categorias de produtos. O web site oferece ainda a opo de busca presente na pgina inicial para facilitar a busca pelos produtos. A identidade visual baseada no padro da marca, com o uso do vermelho para destaques maiores e a cor cinza, com demais variaes, para os textos e demais identificaes. Os elementos visuais presentes no web site remetem ao detalhe de uma costura, com efeitos de pontilhados, simulao de relevo e efeitos de luz e sombra em algumas reas. Ao longo do projeto, alguns cones e ilustraes so utilizados para denotar algumas reas como o caso da seo Monte seu Look e carrinho de compras. Todas com cores e identidade padro da marca. As imagens dos produtos so objetivas, com a utilizao de fundo branco para mostrar mais a pea. Na rea detalhe do produto possvel tambm a visualizao para demais vistas do produto.

2.3.2.

Lojas Zara

41

Figura 11: Web site Zara. Fonte: elaborao prpria.

A organizao e navegao do site de forma clara, utilizando apenas um menu para o acesso a todo o site (figura 11). O contedo dividido em dois grupos, vesturio e institucional, sendo o primeiro com destaque s novidades da semana, e os demais classificados entre os segmentos, campanhas e demais contedos referentes marca. A navegao possui ainda uma opo de busca para facilitar o acesso aos produtos. A pgina inicial constituda do menu, uma foto conceitual da campanha vigente e um destaque para demais assuntos da marca. A identidade visual da marca limpa e minimalista, utilizando uma famlia sem serifa para os textos e demais itens do web site, contrastando com o logo da empresa. As fotos so tambm minimalistas e objetivas com paletas de cores neutras, focando na pea utilizada pela modelo. O posicionamento da modelo na foto sempre central para focar no produto, e no atrapalhar a navegao que acontece sempre na lateral esquerda. O projeto no utiliza cones para a sinalizao.

2.3.3.

Boutiques.com

42

Figura 12: web site Boutiques.com. Fonte: elaborao prpria

Navegao deste projeto mais complexa, pois se trata de um web site de buscas de vesturio vinculado a uma rede social (figura 12). O site est dividido entre categorias de produtos, e tipos de classificao como: celebridade, designer, insider, blogueiro, lojas, tendncias, estilo, destaques, popular e itens recentes. Atravs destes grupos so listados os produto encontrados nas em vrias lojas de comrcio eletrnico. A navegao orientada tambm por filtros entre cores, tipos de pea, preos, silhueta, padres e designer. A organizao das pginas focada na listagem de produtos j que o detalhe da pea s pode ser visto no site de origem. Cada pea possui comportamento de mostrar o descritivo da pea e outras opes do mesmo tipo, porm com valores variados; alm de opo de gostar ou no do produto (feedback). A estrutura da pgina dedica uma coluna a sugerir looks com fotos de outras redes sociais. Identidade visual limpa com uso de tons de verde para destaques e botes, demais ttulos e textos em preto ou branco, e detalhes em tons de cinza. O web site num todo no possui muitos efeitos, primando por formas retas e cores puras. O preto e o branco delimitam as reas do projeto, dando contraste navegao e aos produtos. Alguns detalhes esto com efeito de sombra para realar a listagem de categorias. A tipografia utilizada sem serifa, sendo os itens de navegao e menu primrios em caixa alta, e os secundrios e demais textos em caixa baixa. As categorias em geral utilizam fonte com serifa nos ttulos da seo e da listagem dos itens.

2.3.4.

Teste de Personalidade do Produto

Nos 3 projetos analisados foram aplicados o Teste de Personalidade do Produto, segundo Jordan (2002). O autor define que o teste busca vincular atributos estticos dos produtos s personalidades dos usurios. A aplicao deste teste a este projeto tem o propsito de avaliar a percepo emocional desses web sites, a fim de criar subsdios para a criao do novo projeto. Estas informaes somadas aos dados especficos de cada
43

projeto trar uma viso de como se d o primeiro impacto do produto, influenciando na deciso de compra. Para a construo deste teste foram aplicadas as 34 variveis propostas pelo autor, descritas no quadro 2 abaixo:

Teste de Personalidade do Produto

Solidrio Honesto Racional Brilhante Seguro Narcisista Flexvel Autoritrio Coerente Extrovertido Cnico Excessivo Conformado Enrgico Violento Complexo Pessimista Quadro 2 Teste de Personalidade do Produto Fonte: elaborado pela autora, segundo Jordan (2002). Individualista Desonesto Emotivo Obscuro Inseguro Humilde Rgido Liberal Oportunista Introvertido Ingnuo Moderado Rebelde Fraco Meigo Simples Otimista

O teste foi aplicado nos dias 22 a 27 de maio de 2011, atravs de um formulrio disponibilizado online, com os endereos dos 3 projetos a serem visualizados. Como os web sites foram aplicados para endereos diferentes, o projeto da Zara obteve o maior nmero de respostas com 17; para as lojas Renner foram 12; e para o web site de buscas Boutiques.com foram 12 respostas. Os grficos abaixo mostram os resultados das pesquisas:
p

Lojas Renner: Teste de Personalidade de Produto

44

Quadro 3 Grfico do teste de personalidade do produto para o web site das Lojas Renner Fonte: elaborado pela autora.

De acordo com o teste, o web site das lojas Renner possui como atributos: segurana, clareza (brilhante), honesto, racional, humilde, seguro, solidrio, flexvel, liberal, coerente, extrovertido, ingnuo, moderado, conformado, enrgico, meigo, otimista e simples. A partir dessas consideraes dos usurios possvel associar alguns desses traos nas ferramentas que o projeto possui, como flexvel e liberal ao fato de o projeto possuir um filtro para os produtos e tambm tags para a navegao; outro ponto seria sobre a sua diagramao: caractersticas como confivel, clareza, seguro, conformado e racional estariam associadas a estrutura da interface que se assemelha a muitos web sites de comrcio eletrnico e presente na memria das pessoas. Mesmo contendo uma estrutura comum, o web site passou aos avaliadores os atributos de extrovertido, otimista e enrgico, mostrando que a identidade visual torna o projeto mais amigvel.
45

Zara: Teste de Personalidade de Produto

Quadro 4 Grfico para o teste de personalidade do produto para o web site da Zara Fonte: elaborado pela autora.

No que diz respeito ao projeto da Zara, foram observados os seguintes atributos: individualista, honesto, racional, brilhante, seguro, narcisista, flexvel, autoritrio, coerente, introvertido, cnico, moderado, conformado, fraco, meigo, simples, otimista. Alguns traos negativos que podemos observar, como narcisista, individualista e cnico, podem estar relacionados ao fato do comrcio eletrnico da marca, uma das maiores do mundo, no liberar a venda de produtos para o mercado brasileiro, gerando frustrao. Quanto ao restante do projeto ele passou coerncia, clareza e segurana, porm foi considerado fraco, simples e introvertido, pelo fato de mostrar seus produtos de uma maneira mais limpa,

46

diferente do web site das lojas Renner. A caracterstica de ser autoritrio ou liberal foi o trao de personalidade que mais dividiu os avaliadores.

Boutiques.com: Teste de Personalidade de Produto

Quadro 5 Grfico do teste de personalidade do produto para o web site Boutiques.com Fonte: elaborado pela autora.

Para o caso do site de buscas Boutiques.com, os atributos que caracterizaram essa interface foram os seguintes: honesto, emotivo, brilhante, seguro, narcisista, flexvel, liberal, coerente, extrovertido, cnico, excessivo, rebelde, enrgico, meigo, complexo, otimista. Este projeto foi o nico dos 3 que possui os atributos associado a emoo, ao excesso e rebeldia. Esse fato pode estar associado ao produto se tratar de uma ferramenta de busca de produtos em lojas virtuais e no pelo fato de ser uma, j que alem de trazer opes ele sugere outras com modelos semelhantes e preos dos mais altos aos mais acessveis. Por

47

trazer muitas opes de busca e muita informao na interface, foi atribudo o trao de complexidade, porm isso no significou que ele fosse obscuro. Com a anlise desses dados foi possvel observar que algumas barreiras (como a mencionada no web site da Zara) ou possibilidades (como a flexibilidade atravs dos filtros nas lojas Renner, e a complexibilidade do Boutiques.com) apresentadas nos projetos e avaliadas pelos usurios interfere na experincia da compra. Tambm foi possvel comprender que a interface pode gerar emoes que podem interferir no processo de compra. Portanto, se um produto for destinada a jovens de grupos sociais, deve-se ter a tendncia a privilegiar caractersticas como rebeldia, que so representadas especialmente pelo Boutiques.com.

2.4.

Anlise Estrutural

A anlise estrutural consiste em um estudo dos elementos que iro compor o projeto, no caso de uma interface de comrcio eletrnico trata da anlise da arquitetura de informao do produto. Sero levantadas informaes quanto a organizao do comrcio eletrnico das lojas Renner, principal concorrente da marca em estudo, e da C&A ao utilizar a ferramenta para venda dos produtos da coleo Stella McCartney. O estudo se concentra, em sentido mais amplo, na organizao dos web sites atravs da visualizao do mapa do site de cada projeto. Em um sentido menor, ser dado o foco na anlise das pginas inicial e de detalhe do produto, por se tratarem da comunicao inicial e detalhada da pea que levaro a tomada de deciso pela compra, das quais os comportamentos se refletem nas demais pginas dos web sites. Quanto a mapeamento mais amplo dos projetos, o site das lojas Renner possui a seguinte organizao:

48

Figura 13: Mapa do site das Lojas Renner. Fonte: elaborao prpria

Por se tratar de um web site maior (figura 13), englobando todos os departamentos da marca, o mapa do site da marca mais extenso. Alem disso o comrcio eletrnico da empresa serve tambm como espao para informaes referentes a rea institucional e dados sobre servios financeiros da marca. No que diz respeito anlise das pginas inicial e de detalhe do produto marca se configura da seguinte forma:

49

Lojas Renner: Pgina Inicial

Quanto aos atributos da pgina inicial sero divididos em 3 momentos: topo, meio e rodap. No topo do site constitudo do logotipo da loja, campo de busca e rea de carrinho de compras, com informaes sobre o status de compra do usurio. Logo abaixo o menu de navegao global dividido pelas reas nos quais a loja atua: feminino, masculino, infantil, acessrios, beleza, perfumes, calados, moda ntima, relgios, esportes e ofertas; sendo que dentro de cada segmentao existem os tipos de produtos de cada rea. Esta parte inicial compe todas as demais pginas do web site. Logo abaixo segue o banner com os destaques dos ltimos lanamentos ou campanhas vigentes da marca. Ao lado deste banner esto dispostos pequenos destaques relacionados as formas de pagamento, frete e troca dos produtos. O contedo abaixo destes itens, e no meio da pgina, dividido em um grid de 5 colunas, sendo a primeira destinada as marcas prprias da loja separadas por segmentos (os mesmos utilizados na navegao global) e chamadas para destaques ou anncios da marca. As demais colunas so listados os produtos, em 3 linhas, totalizando 12 itens por
50

pgina, divididos entre novidades e exclusividade. Existe ainda uma quarta linha destinada a ltimos produtos procurados. No rodap, a primeira parte destinada a uma tag cloud17, com principais palavras mencionadas ou buscadas pelo web site. Em seguida seguem informaes sobre newsletter e comunicao via Twitter, formas de pagamento, certificaes e parceiros. Uma coluna a direita destinada tambm aos servios que a Renner oferece, cartes de crdito, produtos financeiros, carto presente e meu carto.

17 Tag cloud , ou nuvem de tags, consiste em uma nuvem de palavras-chaves que classificam um contedo
1

de maneira aleatria.

51

Lojas Renner: Detalhe do produto Assim como a pgina inicial, a pgina de detalhe do produto possui a parte superior e inferior (topo e rodap) iguais as demais pginas do portal. A pgina de detalhe dividida em 2 colunas, uma apenas para o produto, e outra para sua descrio. Na rea do produto, existe um componente de visualizao que projeta a foto ampliada para anlise dos detalhes da pea, tecido, cor, textura etc. Em alguns produtos existe ainda a opo de visualizar mais fotos, com outros ngulos ou detalhes da pea. Na coluna da direita, destina-se ao descritivo do produto com os itens: titulo da pea, marca a qual pertence, opes de cor ou estampa, valor com condies de pagamento, cdigo do produto, quantidade, tamanho e boto para efetuar a compra. Logo abaixo destas informaes segue uma chamada para o frete grtis que a marca oferece na venda dos produtos. O box seguinte compem 3 abas, com os contedos de detalhe do produto, informaes tcnicas e comentrios. Abaixo link para compartilhamento da pgina nas redes sociais (Twitter, Facebook, Orkut, Email e o boto curtir), chamada para o componente de troca fcil dos produtos, e de compra segura. Encerrando o contedo referente ao produto, est a listagem de itens quem comprou este produto tambm levou: relacionando as peas compradas juntamente com o produto mencionado.
Quadro 6 - Anlise estrutural do web site das lojas Renner Fonte: elaborado pela autora, com base nas imagens do web site da marca.

Quanto ao web site da campanha Stella McCartney para C&A (figura 14), o foco est em apenas uma coleo, portanto seu mapeamento menos complexo, como mostra o mapa do site abaixo:

52

Figura 14: Mapa do site da campanha Stella McCartney para C&A. Fonte: elaborao prpria

Em se tratando tambm das pginas inicial e de detalhe do produto, o web site da campanha apresenta a estrutura da seguinte maneira: Stella McCartney para C&A: Pgina Inicial Comparado ao web site das lojas Renner, o comrcio eletrnico construdo para a coleo Stella McCartney para C&A possui uma estrutura diferente de hierarquia de informao e de categorias por se tratar de apenas uma coleo e no vrias como na Renner. A pgina inicial constituda de menu de navegao global e rodap, presentes em todas as pginas do portal C&A. Na parte que constitui apenas a campanha est o menu secundrio com os itens: Home, Lookbook, Produtos, Sobre Stella, Onde Encontrar; alm de um menu que acompanha o rodap com os itens: Acompanhe seu pedido, Como cuidar dos seus produtos, FAQ e Share (compartilhamento do contedo para o Twitter e Facebook).
53

A rea de contedo do site da campanha possui uma foto conceitual. A listagem de produtos acontece em dois momentos: no LookBook e em Produtos. O Lookbook trata-se da visualizao dos produtos com a presena de uma modelo, produzida conforme o conceito da campanha. A listagem de fotos neste projeto visualizada de forma horizontal, com clique para detalhe do produto a partir dessa tela. No caso da listagem de produtos os itens so posicionados conforme composio da pea no corpo, com blusas e casacos no topo, e calas e bermudas abaixo. A listagem das peas tambm de forma horizontal, com funcionalidade de arrastar a listagem (drag and drop). Ao clicar no item pr visualizado alguns dos dados do produto, como titulo, valor e boto adicionar ao carrinho, que leva ao detalhe do produto. Stella McCartney para C&A: Detalhe do produto A tela de detalhe do produto neste projeto consiste em uma janela em formato de modal, com imagem do produto a esquerda (com opo de visualizao de foto ampliada), titulo da pea, valor e formas de pagamento, opes de cor, quantidade e tamanho, foto correspondente ao LookBook e botes para incluir ao carrinho e finalizar compras. Tanto para a pgina de LookBook quanto para a de produtos o direcionamento e comportamento da pgina o mesmo.
Quadro 7 - Anlise estrutural do web site Stella McCartney para C&A. Fonte: elaborado pela autora, com base nas imagens do web site da marca.

possvel notar que atravs da estrutura e da organizao das sees como o focos de ambas as marcas so diferenciados, mesmo as duas utilizando a mesma ferramenta.

2.5.

Anlise Funcional

A anlise funcional trata da compreenso das caractersticas e funes do produto. No caso de uma interface de comrcio eletrnico foram levantadas informaes a respeito dos principais objetivos dos projetos em estudo, C&A e lojas Renner e quais as atividades ligadas aos projetos.

54

Na interface da Stella McCartney para C&A, o objetivo e funes principais esto relacionados exposio da campanha, por se tratar de apenas uma linha de produtos produzidos com edio limitada. Neste caso o projeto apresenta uma estrutura simplificada no layout para destacar a edio e coleo dos produtos. Com a interface das lojas Renner o propsito est na venda dos produtos, com disponibilidade de todas as marcas e segmentos onde a rede atua. Para visualizar as demais funes dos projetos em estudo (figura 15), foi desenvolvido um fluxo de tarefa do processo de compra de ambos, que neste caso apresentam o mesmo comportamento porm com focos diferenciados como observado anteriormente.

Figura 15: Fluxo de tarefa de compra das Lojas Renner e da campanha Stella McCartney para C&A. Fonte: elaborao prpria

55

A vantagem deste processo e funes de compra serem iguais est na segurana, pois a maioria dos projetos de comrcio eletrnicos nacionais possuem o mesmo modelo de processo.

2.6.

Anlise Morfolgica

A anlise morfolgica trata da investigao detalhada a cerca dos componentes e composies que constituem uma interface de comrcio eletrnico. Baseada na estrutura analisada dos projetos das lojas Renner e da campanha Stella McCartney para C&A, sero levantadas questes sobre a composio das imagens, tipografia, cores e percepo em geral.

2.6.1.

Lojas Renner

No que diz respeito a tipografia e suas respectivas cores, o web site das lojas Renner apesar de utilizar apenas a famlia, sem serifa, Arial em todo o site, a forma como ela distribuda no possui um padro claro e eficaz nos destaques. No quadro abaixo, podemos visualizar algumas reas da pgina inicial que apresentam esta constatao.

Detalhe da pgina:

Descritivo sobre a tipografia: Menu global (presente em todo o web site): - Menu: links em fonte Arial, em caixa alta, tamanho 12px, cor em hexadecimal #ffffff; rea de carrinho de compras (presente em todo o web site):
-

Pagamento online e Central de atendimento: links em caixa baixa, tamanho 10px, cor em hexadecimal #666666; Texto para visitante ou cadastrado: texto em caixa baixa, tamanho 11px, cor em hexadecimal #999999; Minha compra, Meus pedidos e Meus dados: ttulos em caixa alta, tamanho 10px, cor em hexadecimal #333333; Faa seu login: link em caixa alta, tamanho 10px, sublinhado, cor em hexadecimal #BD0000; Sacola de compras: link em caixa baixa, tamanho 10px, sublinhado, cor em

56

hexadecimal #BD0000;
-

Itens e valor total: texto em caixa baixa, tamanho 10px, em bold, cor em hexadecimal #333333.

rea de organizao e paginao (presente nas telas de listagem de produtos):

-

Organizao e produtos por pgina: em caixa baixa, tamanho 10px, cor em hexadecimal #666666; Paginao: textos em caixa baixa, tamanho 12px e links com sublinhado, cor em hexadecimal #666666;

Menu lateral (presente nas pginas de categorias dos produtos, marcas ou segmentos):
-

Titulo da seo: link em caixa baixa, bold, tamanho 15px, cor em hexadecimal #BD0000; Titulo da categoria: texto em caixa baixa, bold, tamanho 11px, cor em hexadecimal #666666; Itens da listagem: texto em caixa baixa, tamanho 11px, cor em hexadecimal #666666, sendo os itens destacados em bold com cor em hexadecimal #BD0000;

Descrio do produto (presente na listagem da pgina inicial):

-

Titulo do produto: link em bold, caixa baixa, tamanho 12px, cor em hexadecimal #333333; Marca na qual pertence: texto em caixa baixa, tamanho 12px, cor em hexadecimal #333333; Valor: texto em bold, caixa baixa, sendo R$ em tamanho 11px, e o valor em tamanho 16px, cor em hexadecimal #BD0000; Condies de pagamento: texto em caixa baixa, tamanho 9px, cor em hexadecimal #666666; Ver mais detalhes: link em caixa baixa, tamanho 9px, sublinhado, cor em hexadecimal #B8B8B8.

Quadro 8 - Anlise de tipografia do web site das lojas Renner. 57

Fonte: elaborado pela autora, com base nas imagens do web site da marca.

possvel perceber atravs do quadro 8 que existe um nmero variado de tamanhos (6 tipos) e de cores (5 tipos) sem um padro claro de classificao, no qual dificulta a navegao entre as sees (figura 16).

Figura 16: Paleta de cores do web site das lojas Renner. Fonte: elaborao prpria

Quanto s imagens (figura 17), podemos destacar no web site da loja que os cones utilizam um padro remetendo ao smbolo da marca, e aplica o vermelho tambm na identidade destas imagens. Os efeitos aplicados nestas imagens possuem relao com etiquetas de costura e detalhes de acessrios de roupas, como botes, fivelas, etc.

Figura 17: Logotipo das lojas Renner e alguns cones presentes no web site. Fonte: elaborao prpria

Em se tratando das fotos aplicadas para demonstrar o produto, elas so objetivas e sempre mostradas em fundo branco. Deste modo a imagem fica muito mais clara para o usurio, porm nas imagens do produto ampliadas a qualidade deixa a desejar (figura 18), limitando a percepo da pea com este recurso.

58

Figura 18: Componente de visualizao do produto da pgina de detalhe no web site das lojas Renner. Fonte: elaborao prpria.

Quanto composio em um geral, o web site basicamente guiado pelo contedo, portanto possui uma forma rgida de apresentao, tanto pelas cores quanto na estrutura. A orientao via menu global clara porm os demais menus e outros contedos no possuem um destaque definido confundindo o usurio tanto pela tipografia quanto pela padronizao das cores.

2.6.2.

Campanha Stella McCartney para C&A

A composio do web site da campanha Stella McCartney para C&A, por se tratar apenas de uma campanha mais clara que o projeto das lojas Renner. A identidade visual do web site gira em torno das fotos da campanha, que refletem o conceito da coleo. As cores so em tons pastis e a tipografia possui 3 divises claras, conforme quadro abaixo:

Detalhe da pgina:

Descritivo da rea: rea de menu e rodap com identidade do web site da C&A; Menu principal e contedos referentes a campanha em famlia sem serifa, semelhante a fonte Futura; por fim, rodap e textos secundrios da rea de campanha em famlia estilo
59

pixel.
Quadro 9 - Anlise de tipografia do web site da campanha Stella McCartney para C&A Fonte: elaborado pela autora, com base nas imagens do web site da marca.

Figura 19: Paleta de cores do web site da campanha Stella McCartney para C&A. Fonte: elaborao prpria.

A identidade visual faz uso de nmeros e marcadores para sinalizar as pginas principais, e tambm de cones para evidenciar o contedo da seo. Ambos usam apenas uma cor dentro da paleta utilizada no projeto (figura 19). No caso dos cones, alguns possuem uma esttica pixel art, semelhante a identidade das fontes estilo pixel aplicadas no contedo do projeto (figura 20). Outros possuem trao tcnico representando a silhueta do assunto pretendido, como o caso das redes sociais (Twitter e Facebook) e da explicao quanto navegao da pgina de produtos (sinalizado logo aps o carregamento da pgina).

Figura 20: cones em pixel art e silhueta dos produtos no web site Stella McCartney para C&A. Fonte: elaborao prpria.

As fotos da rea LookBook fazem uso de uma modelo para mostrar as peas em um conjunto, com possibilidade de visualizao apenas do produto, na pgina de detalhe. Diferente do projeto das lojas Renner, a qualidade das imagens ampliadas superior, favorecendo uma visualizao mais aproximada da realidade.

60

Figura 21: Pgina de galeria de fotos do LookBook e imagem ampliada da pea no web site Stella McCartney para C&A. Fonte: elaborao prpria.

Este tratamento dado as fotos no projeto da marca valoriza o produto, por que possibilita que a percepo do produto seja muito maior (figura 21).

2.7.

Anlise de pblico alvo

Esta anlise trata de um estudo sobre o pblico no qual este projeto quer atingir. Segundo Kalbach (2009, p. 208) a interao trata realmente de prever os tipos de questes que as pessoas tero quando vierem a seu site, de forma a compatibilizar a navegao com as expectativas dos usurios. Alm da reviso de literatura das ferramentas utilizadas para atingir este usurio, necessrio conhec-lo. Para tal avaliadas
61

pesquisas de mercado e de usurios referentes ao publico da C&A e de comrcio eletrnico no Brasil, alm de uma pesquisa qualitativa, aplicada junto ao Teste de Personalidade do Produto. Segundo o Comit Gestor da Internet no Brasil, em 2009 o setor de vesturio ocupava a terceira posio em se tratando dos produtos comprados nos 12 meses anteriores a pesquisa, sendo que mais da metade dos compradores eram homens e uma grande parcela entre a faixa de idade de 10 a 24 anos. Como pode-se observar no anexo, a diferena entre as classes CDE para a AB mnima, o que mostra que a classe social no inibe a compra na ferramenta. O que um ponto forte para a C&A, j que o pblico a qual se destinam os seus produtos da marca atinge as classes CDE e tambm B mais recentemente (com o advento do fast fashion). Como a prpria marca coloca concentramos esforos para atender mulheres que gostam de vestir as ultimas tendncias e que no abrem mo de qualidade e preos acessveis. Com estes dados ser definido como faixa etria na qual o projeto pretende atender, o pblico de 18 a 45 anos, principalmente o pblico feminino. Alm destes dados foi aplicada, junto ao teste de personalidade de produto, uma breve pesquisa qualitativa com os 17 avaliadores em questo. As duas questes aplicadas, mesmo que breves, serviro para sentir quais os problemas encontrados na compra de roupas online. Dos entrevistados, 11 no haviam comprado roupas pela internet at o momento, e para tais foi levantada a seguinte questo: Se ainda no comprou, justifique:. E dentre as respostas mais citadas, o fato de no poder experimentar ou sentir o produto o que mais interfere na tomada de deciso. Um dos avaliadores definiu sobre o fato de no comprar: J parei vrias vezes para comprar, mas acabei no comprando pois tenho medo que no sirva direito, ou que por exemplo no caso de sapato fique apertado ou largo ou muito desconfortvel. Mas tenho vontade de comprar, s que acabo nunca finalizando a compra. s vezes tambm no compro pelo fato de no ter o produto para levar na hora comigo, ou porque pela internet consigo pensar e ver que o produto no necessrio. Conforme o Comit Gestor da Internet no Brasil (2009) um dos maiores motivos para no comprar pela internet est relacionado ao fato das pessoas preferirem comprar pessoalmente, que gostam de ver o produto.

No compro roupas Homem, compra pela internet de uma ou mais vezes no semestre. Prefiro ir at a loja comprar, mais garantia de pegar o tamanho certo e cor... Homem, compra pela internet de uma ou mais vezes no semestre.
62

No achei nada que me interessasse o suficiente Homem, compra pela internet de uma ou mais vezes no semestre. Porque para comprar roupas prefiro toc-la e sentir o material assim pela internet acho meio estranho, mas no e algo q eu no venha a fazer em algum momento. Homem, compra pela internet de uma ou mais vezes no ms. No existe a possibilidade de provar. Mulher, compra pela internet de uma ou mais vezes no semestre. No tenho confiana em compras on-line, e roupas so complicadas de comprar em loja, quando se tem a oportunidade de experimentar, imagina sem ver. Mulher, nunca comprou pela internet. Tenho dificuldades de fazer compras em lojas fsicas por causa do meu bitipo (muito magra), difcil achar uma roupa que se adqe ao corpo, por isso prefiro no ariscar em comprar algo que provavelmente no v ficar bem pro meu corpo. Mulher, compra pela internet de uma ou mais vezes no semestre. No tem como saber se a roupa vai ficar bem no corpo, sem experimentar. Mulher, nunca comprou pela internet. No poder experimentar a roupa; questo da variao na mesma numerao das roupas. Mulher, compra pela internet de uma ou mais vezes no semestre. "J parei varias vezes para comprar, mas acabei no comprando pois tenho medo que no sirva direito, ou que por exemplo no caso de sapato fique apertado ou largo ou muito desconfortvel. Mas tenho vontade de comprar, s que acabo nunca finalizando a compra. s vezes tambm no compro pelo fato de no ter o produto para levar na hora comigo, ou porque pela internet consigo pensar e ver que o produto no necessrio." Mulher, compra pela internet de uma ou mais vezes no semestre. Gosto muito da variedade e novas opes que a internet oferece, porm fico com receio por no poder provar, no conhecendo a modelagem, o que geraria um transtorno com relao troca. Normalmente compro roupas para ocasies especiais, ou eventos, e como decido tudo na ltima hora, no tenho tempo para esperar pela entrega.. heheh, sou do tipo que compra as 6 da tarde para sair as 10 da noite.... Mulher, compra pela internet de uma ou mais vezes no semestre.
Quadro 10 Respostas de pesquisa qualitativa. Fonte: elaborado pela autora.

Dos avaliadores que compram roupas pela internet (6 restantes), um dos atrativos estaria no preo e nas promoes (impulsionado pelo mercado de compras coletivas). Os pontos respondidos pelos entrevistados foram:

Indisponibilidade de obter os produtos em questo na regio onde moro. Homem, compra pela internet de uma ou mais vezes na semana.
63

Preo mais barato, comprei uma camiseta de time de futebol, dificilmente teria problemas com tamanho por exemplo! Mulher, compra pela internet de uma ou mais vezes no semestre. Preo Homem, compra pela internet de uma ou mais vezes no ms. O preo, variedade e maior exclusividade de alguns artigos. Mulher, compra pela internet de uma ou mais vezes no ms. A loja no existir na minha cidade, e nem o produto que eu queria comprar. Mulher, compra pela internet de uma ou mais vezes na semana. promoo... Mulher, compra pela internet de uma ou mais vezes no ms.
Quadro 11 Respostas de pesquisa qualitativa. Fonte: elaborado pela autora.

interessante observar que no caso de quem compra roupas pela internet, adquire produtos online com mais freqncia de quem no compra, e faz uso de oportunidades e vantagens para efetuar a compra. A partir desses dados possvel levantar tambm que um dos pontos a serem melhorados na compra, e que influencia a tomada de deciso para estes usurios, o fato de que a percepo do produto falha, e portanto deve abusar de recursos visuais para possibilitar segurana da compra. Todas estas informaes, desta e demais anlises, serviro para levantar um panorama de quais os itens que o produto deve ou no apresentar. Tanto para atingir o pblico da C&A, como para novos consumidores da marca e da ferramenta de comrcio eletrnico que ser proposta.

3. Definio do Problema
Baseado no referencial terico e nos dados coletados nas anlises do projeto em questo ser desenvolvido uma proposta de comrcio eletrnico para a loja de vesturio C&A, focando em todos os produtos da marca. A ferramenta de venda online ser anexada ao portal da marca, complementando e integrando as outras sees. De forma que alguns detalhes sero evidenciados com base no que foi visto nas etapas deste projeto, o web site dever focar na visualizao dos produtos, a apresentao deste produto em si, a organizao simplificada para direcionar o usurio ao que se deseja e a opo para visualizar a composio de demais peas de vesturio para facilitar a compra de mais de um produto.

64

3.1.

Lista de Requisitos

Segundo Bonsiepe (1984) esta etapa consiste na elaborao dos itens que devem constar no projeto, elencando prioridades e metas para constru-lo. Atravs das anlises foi possvel levantar que a interface deve obter como requisitos:
a) A valorizao das fotos e a possibilidade de mostrar detalhes das peas; b) Distribuio clara e limpa do contedo para facilitar a navegao e a busca pelos

produtos;
c) Tornar a experincia de compra agradvel e segura; d) Informar ao mximo sobre o produto, principalmente disponibilidade dos itens; e) Possibilitar um compartilhamento da experincia atravs de comentrios e redes

sociais. A fotografia, como uma das grandes ferramentas visuais para difundir a moda, um dos pontos que deve ser valorizado na construo deste projeto, por que atravs dela ser possvel aumentar a percepo do usurio com relao ao produto ele quer adquirir. Facilitar esse acesso ser o papel de uma diagramao que facilite a busca destas e demais informaes do produto na interface. E por fim a possibilidade de compartilhamento desta experincia gerando a conquista de novos consumidores da marca.

3.2.

Hierarquizao de Requisitos

A hierarquizao de requisitos determina quanto ao atendimento e tempo das prioridades no projeto. Para esta etapa ser abordada tambm a hierarquizao da informao, ou seja, os dados levantados na estruturao e seu grau de importncia, utilizando a construo de um mapa do site segundo Unger; Chandler (2009). Dentro dos requisitos j listados sero criadas as seguintes sees e prioridades, conforme quadro abaixo:

Requisitos:
a)

Prioridades:

Sees do web site: Pgina Inicial Detalhe do produto Listagem de produtos LookBook Detalhe do produto Minha sacola de compras

Tornar a experincia de compra Alta agradvel e segura; Distribuio clara e limpa do Mdia contedo para facilitar a navegao e a busca pelos produtos; A valorizao das fotos e a Alta possibilidade de mostrar detalhes das peas;
65

b)

c)

d)

Informar ao mximo sobre o Alta produto, principalmente disponibilidade dos itens; Possibilitar um compartilhamento da Baixa experincia atravs de comentrios e redes sociais.

c)

Quadro 12 - Hierarquizao de requisitos Fonte: elaborado pela autora.

A partir das prioridades elencadas ser possvel criar o mapa do site na etapa de hierarquizao para descrever detalhadamente como ser estruturado o projeto para atender o problema apresentado. Nas anlises, mais especificamente a estrutural, foi possvel visualizar quais itens devem constar no comrcio eletrnico da marca. Conforme os itens levantados o projeto ser estruturado da seguinte forma (figura 22):

Figura 22: Mapa do site do projeto de comrcio eletrnico da C&A. Fonte: elaborao prpria.

O mapa do site como j foi citado anteriormente define a hierarquizao e organizao da informao no projeto, a partir dele que definimos uma unidade para que a navegao no se perca. No mapa pode-se observar que a organizao das sees
66

prioriza pelo demonstrao do produto como recurso de confiabilidade a venda desses itens. Definidas as prioridades de arquitetura de informao em nvel macro, passamos para o descritivo de cada uma das reas para ento desenvolver a interface do projeto.

3.2.1.
abaixo:

Loja Virtual

rea destinada venda dos produtos da rede de lojas com as reas descritas

3.2.1.1. Campanha
rea de apresentao das campanhas disponveis para venda. A apresentao ser em formato de slide show, onde o usurio poder navegar entre as opes, ou ainda o sistema fazer a troca de opes automatizada a cada 10 segundos. Como as imagens das colees apresentaro mais de uma pea de vesturio, o usurio poder fazer a escolha de visualizao dos detalhes do produto no prprio slide show, navegando entre as peas que compe a coleo.

3.2.1.2. LookBook
Lista com todos os produtos disponveis para a venda. Os produtos listados podero ser filtrados por Cor, Tamanho, Categoria e ainda utilizando uma nuvem de tags. Haver tambm a opo de buscar o produto pelo nome ou por palavras que estiverem na descrio. Ao escolher um produto, o usurio ser direcionado tela de detalhes do produto, onde poder visualizar mais fotos, as opes de cores, tamanhos, preo, alem de escolher a quantidade desejada para a compra e ter a disposio maiores informaes sobre o mesmo. Ainda nesta tela, o usurio poder adicionar o produto ao carrinho de compras ou montar um look com o produto escolhido, alm de compartilhar para suas redes sociais, atravs da ferramenta compartilhamento de redes sociais, a informao que est visualizando. Tambm estar disponvel a opo para enviar um comentrio sobre o produto, juntamente com outras opes de produtos que o usurio poder se interessar.

3.2.1.3. Monte seu look

67

rea para a montagem do look com os produtos disponveis para a venda. As imagens de cada produto sero adicionadas a uma rea onde, aps a escolha dos produtos, o pedido poder ser fechado com os produtos escolhidos, sem a necessidade de adicionar ao carrinho de compras os produtos um a um. Sero listados para escolha os produtos classificados por categorias, alm de uma separao por tipo de produto (em cima / embaixo / calados). A cada produto adicionado ao lookbook, o preo do pedido ser atualizado automaticamente.

3.2.1.4. Carrinho de compras

rea com opo de efetuar a compra dos produtos disponveis para a venda online. Estaro disponveis para a compra os produtos que tero estoque em alguma das lojas fsicas. O controle de estoques dos produtos ser integrado com o sistema de gesto da rede de lojas, sendo atualizado instantaneamente no momento da compra em pontos fsicos ou por meio da venda online. Aps a escolha do produto, o mesmo poder ser adicionado a um carrinho de compras onde o usurio poder finalizar sua compra ou continuar escolhendo mais produtos. Neste momento, poder ser consultado o valor do frete. O clculo do frete ser efetuado pelo sistema de fretes dos Correios utilizando webservices disponibilizados pela empresa, onde ser acrescido o valor do frete conforme o clculo de peso e distncia para entrega. Alm disso, a forma de entrega tambm poder gerar diferena de valores de frete, conforme informaes que estaro disponveis no momento de efetuar a compra. Seguindo o processo de compra, ser solicitado o login do usurio ou o cadastro de um usurio novo, caso este no possua os dados de login ainda. Com o usurio logado ao site, sero solicitadas informaes de pagamento, atravs de um gateway de pagamento e aps a aprovao, a compra ser finalizada. Aps a compra ser finalizada, automaticamente o sistema de gesto da rede de lojas atualizado com um novo pedido, alm de atualizao de estoque e demais tramites conforme processo de gesto do sistema. Alm disso, o usurio receber um email com confirmao do pedido e poder verificar a situao do mesmo atravs de uma ferramenta de acompanhamento de pedidos, disponibilizada pela empresa.

3.2.1.5. Onde Comprar

68

Lista das lojas da rede, distribudas pelos estados do Brasil, com filtro das informaes por estado, por meio de um mapa, alm da opo de escolha do estado desejado em uma lista. Informaes para cada loja: endereo, bairro, cidade, estado, telefone, email.

3.2.1.6. Institucional
rea para a apresentao da rede de lojas, com texto, vdeos institucionais e imagens que ilustrem o conceito da empresa. Esta rea consiste tambm nas demais sees dentro da plataforma online da C&A.

4. Anteprojeto/Gerao de Alternativas
Esta etapa consiste na produo e gerao de alternativas para a construo do projeto. Com base nos dados levantados e avaliados ser constituda a interface que atenda os objetivos esperados para o projeto. A estrutura do projeto, no qual o conceito e as geraes sero desenvolvidas, de acordo com o descritivo e mapa do site construdos na etapa de hierarquizao de requisitos.

4.1.

Conceito

Dentre os estudos desenvolvidos foi possvel perceber que a imagem, mais especificamente a fotografia, um dos recursos mais prximos da realidade para aproximar o usurio da percepo real do produto. No universo da moda esta ferramenta explorada ao mximo para apresentar o conceito e a expresso que se quer dar a campanha, do prt-porter a alta costura, da classe C e D at a classe mais alta, atingindo todos os pblicos. Em busca de atingir o pblico diversificado da C&A para o ambiente online, e com o objetivo de tornar a compra uma experincia favorvel, o projeto buscar atravs da fotografia explorar uma identidade que possa apresentar o produto de maneira clara e segura para a compra. A expresso chave para este projeto ser a moda da vida real, onde as fotos aplicadas no web site sero produzidas com um casting18 de pessoas reais com bitipos diversificados para demonstrar que as peas da C&A so pra todos. A interface se encarregar de facilitar com que este recurso fique em evidncia, utilizando a ferramenta de busca como guia para a navegao do web site. Guiado pela

18 Casting: seleo de modelos para desfiles, comerciais, fotos, campanhas publicitrias, etc.(LIZ, 2006, p.
1

25)

69

estrutura j determinada na etapa de hierarquizao de requisitos, este conceito tomar forma atravs da utilizao de esboos para, enfim, apresentar a proposta final.

4.2.

Esboos

Partindo do conceito e do mapa propostos foram desenvolvidos alguns esboos na qual o web site se encaixaria na estrutura do portal da marca C&A. Os esboos iniciais j apresentam o conceito de navegao e interao das telas, com os componentes que faro parte da interface. O ponto que foi considerado na construo desta etapa foi a hierarquizao da informao na pgina, privilegiando o uso de imagens no projeto. Com o conceito alinhado logo apos a definio do problema, a interface j possua algumas definies o que acarretou em poucos esboos. Optou-se pela alternativa que mais se adequou aos requisitos que o projeto atender e tambm a facilidade de acesso j demonstrada nos esboos.

4.2.1.

Projeto de interface

O projeto de interface consiste no desenvolvimento de toda a interao do projeto. nesta etapa que se concentram os estudos de usabilidade, design de interface e arquitetura de informao. Baseado nos esboos da etapa anterior, foi revisado e prototipadas as 5 telas que faro parte da proposta de comrcio eletrnico da marca C&A. Os prottipos levaram em considerao o descritivo do projeto, com detalhamento do funcionamento das ferramentas utilizadas no web site.

Comrcio eletrnico C&A: Pgina Inicial (campanhas)

70

Comrcio eletrnico C&A: LookBook

Comrcio eletrnico C&A: Detalhe do produto

71

Comrcio eletrnico C&A: Monte seu Look

Comrcio eletrnico C&A: Meu carrinho de compras

72

Quadro 13 Projeto de Interface do comrcio eletrnico da C&A. Fonte: elaborado pela autora.

A partir destes prottipos observa-se que os dois pontos mencionados no conceito so evidenciados: a busca e a explorao das imagens. A ferramenta de Monte seu look com o propsito de auxiliar na compra de composies de peas um dos atrativos do projeto, com integrao e convite j na pgina de detalhe do produto. Quanto a estrutura geral, optou-se por uma navegao global com os 3 principais acessos aos produtos de acordo com o modelo mental de leitura do usurio (esquerda direita, de cima para baixo). Alm do padro de fotos a esquerda possibilitando primeiro o impacto em cima do produto em si e logo aps preo e demais informaes.

4.2.2.

Design visual

A composio visual do projeto segue a identidade atual da marca, e tambm do seu portal. Na proposta, o layout deve ser neutro para comportar as atualizaes constantes de campanhas da C&A, e tambm para transmitir segurana e elegncia. Para cada campanha entra em vigor uma nova imagem de fundo relacionada a identidade visual da mesma. As cores dos elementos utilizados no projeto ficam entre o preto e o branco, com variaes de cinza (sempre com tonalidade mais escura), para comportar as variaes de cores da imagem de fundo. Para ttulos e menus ao topo, a cor destes itens branco porm
73

com possibilidade de alterao para preto, para casos onde a imagem de fundo do site seja clara.

Figura 23: Imagens do topo do web site com alteraes de cor. Fonte: elaborao prpria.

Foram utilizados alguns cones para sinalizao dos contedos, principalmente os itens associados a compartilhamento. Para as redes sociais Twitter e Facebook, foram utilizados os cones com a identidade padro de cada rede social, alm do boto mais que abre outras opes de compartilhamento. Os boto de gostei em cada pea funciona como uma espcie de ranking de produtos preferidos, e para os usurios cadastrados os produtos mais favoritados so guardados em uma listagem. O item carrinho de compras tambm recebe um cone alm da substituio do nome carrinho para sacola j que o segundo item mais utilizado nas lojas fsicas, conforme figura 24.

Figura 24: cones utilizados no projeto. Fonte: elaborao prpria.

A tipografia a mesma utilizada no portal da marca, sendo para ttulos e destaques a famlia DIN, e para textos complementares a famlia Arial (quadro 14).

74

Tipografia: Arial (Regular, Italic, Bold)

Tipografia: Din (Regular, Medium, Bold)

Quadro 14 Tipografias aplicadas na proposta de comrcio eletrnico da C&A. Fonte: elaborado pela autora.

A soma destes elementos na estrutura composta pelo projeto de interface, do corpo proposta de comrcio eletrnico da marca.

5. Projeto
Somadas as propostas de composio visual e de interface, apresenta-se o projeto de comrcio eletrnico da marca. O contedo utilizado na proposta simula o lanamento da campanha de inverno da C&A, com fotos produzidas por Diego Kuse, produo de Juliana Barbosa e casacos VerBella. O conceito das fotos se equivale filosofia da marca de atingir
75

vrios pblicos. Independente da campanha a identidade do projeto se mantm pela neutralidade apresentada nas cores e na tipografia aplicada.

Comrcio eletrnico C&A: Pgina Inicial (campanhas)

Comrcio eletrnico C&A: LookBook

76

Comrcio eletrnico C&A: Detalhe do produto

77

Comrcio eletrnico C&A: Monte seu Look

78

Comrcio eletrnico C&A: Meu carrinho de compras

Quadro 15 Prottipo do projeto de comrcio eletrnico da C&A Fonte: elaborado pela autora.

A composio junto a navegao tem a proposta de transmitir elegncia e simplicidade aos elementos que apiam o principal: os produtos da marca. Com esta proposta possvel que qualquer campanha se adapte ao ambiente e que a experincia seja agradvel independente do produto ou coleo.

6.

79

7. CONSIDERAES FINAIS
8. A partir dos dados coletados e analisados no mercado de comrcio eletrnico, direcionado ao varejo de moda, percebeu-se que a experincia de design que se quer propor no comea e termina no web site. Ela se entende ao atendimento e comunicao que permeiam a ferramenta. E o design serve de meio para ligar todos estes pontos de interao entre a marca e o usurio. No caso da C&A que trabalha com diversas lojas espalhadas pelo Brasil, a imagem do projeto deve refletir o posicionamento destes locais e da filosofia da empresa. Para solucionar um problema de mercado e da marca, a pesquisadora fez uso de diversas ferramentas visuais e de interao, a fim de proporcionar a segurana que o usurio precisa para a tomada de deciso em uma compra online. A moda, como objeto de estudo, proporcionou a explorao destas ferramentas com o intuito de potencializar esta experincia. S que para conhecer estes mtodos, ferramentas e solues no bastou apenas conhecer o mercado, foi necessrio conhecer tambm de pessoas. Afinal, uma experincia de design, sendo ela digital ou no, feita de pessoas, com pessoas e para pessoas.

80

9. REFERNCIAS BIBLIOGRFICAS
_.Abergo: O que ergonomia.Disponvel em: <http://www.abergo.org.br /internas.php?pg=o_que_e_ergonomia>. Acesso em: 22/04/2011. _.Avon. Disponvel em: < http://avon.com.br/>. Acesso em: 18/05/2011. _.Boutiques.com. Disponvel em: < http://boutiques.com />. Acesso em: 18/05/2011. _. C&A inaugura quatro lojas no Rio. Disponvel em: <http://www.revistafator.com.br/ver_noticia.php?not=25208>. Acesso em: 08/05/2011. _.E-BIT Web Shoppers: 23 Edio (1 Semestre / 2011). Disponvel em: <http://www.webshoppers.com.br>. Acesso em: 22/04/2011. _.Hermes. Disponvel em: < http://www.hermes.com.br/>. Acesso em: 18/05/2011. _.Lojas Renner. Disponvel em: < http://lojasrenner.com.br/>. Acesso em: 18/05/2011. _.Lojas C&A. Disponvel em: < http://cea.com.br/>. Acesso em: 18/05/2011. _.Zara. Disponvel em: < http://zara.com />. Acesso em: 18/05/2011. ADG BRASIL. Guia ADG Brasil de prtica profissional do design grfico. So Paulo: Editora Senac So Paulo, 2003. AGNER, Luiz. Ergodesign e arquitetura de informao: trabalhando com o usurio. 2 edio. Rio de Janeiro: Quartet, 2009. AGUIAR, Titta. Personal Stylist: guia para consultores de imagem. So Paulo: Editora Senac, 2003. ALBERTIN, Alberto Luiz. Comrcio eletrnico: modelo, aspectos e contribuies de sua aplicao. 5 edio. So Paulo: Atlas, 2004. AMBROSE, Gavin e HARRIS, Paul. Layout. Coleo Design Bsico. Porto Alegre: Bookman, 2009. ANDRADE, Antonio Luis Lordelo. Usabilidade de interfaces Web. Rio de Janeiro: Epapers, 2007. BONSIEPE, Guy. Metodologia experimental: desenho industrial. Braslia:Coordenao Editorial, 1984. CALLEGARI, Lucas. E-commerce: faturamento de R$ 14,8 bilhes no Brasil em 2010. Disponvel em: <http://computerworld.uol.com.br/negocios/2011/03/ 22/e-commercefaturamento-de-r-14-8-bilhoes-no-brasil-em-2010/> Acesso em: 18/05/2011. Catlogo C&A. De pessoas, por pessoas, para pessoas relatrio de sustentabilidade, 2009. CHINEN, Nobu. Design grfico. So Paulo: Escala, 2009.
81

CIDREIRA, Renata Pitombo. Os sentimentos da moda: vesturio, comunicao e cultura. So Paulo: Annablume, 2005. COBRA, Marcos. Marketing & Moda. So Paulo: Editora Senac, 2007. COOPER, Alan, REIMANN, Robert, CRONIN, Dave. About face 3: the essentials of interaction design. Indianapolis: Wiley Publishing, 2007. CYBIS, Walter. Ergonomia e usabilidade: conhecimentos, mtodos e aplicaes. So Paulo: Novatec Editora, 2007. DE CARLI, Ana Mery Sehbe.O sensacional da moda. Caxias do Sul/RS. Educs, 2002. DONDIS, Donis A. Sintaxe da linguagem visual. Trad.: Jefferson Luiz Camargo. 2. ed. So Paulo: Martins Fontes, 1997. DUBBERLY, Hugh, EVENSON, Shelley. The Experience Cycle. Disponvel em: <http://www.dubberly.com/wp-content/uploads/2008/06/ddo_interactions _experiencecycle.pdf>. Acesso em: 22/04/2011. ESCOREL, Ana Luisa. O efeito multiplicador do design. 3 edio. So Paulo: Editora Senac, 2004. FEGHALI, Marta Kasznar. As engrenagens da moda. Marta Kasznar Feghali e Daniela Dwyer. Rio de Janeiro, 2001. FOINA, Paulo Rogrio. Tecnologia de Informao - Planejamento e Gesto. 2. ed. So Paulo: Atlas, 2006. FUENTES, Rodolfo. A prtica do design grfico: Uma metodologia criativa. Traduo Osvaldo Rosiano. So Paulo: Edies Rosari, 2006. GARCIA, Carol, CASTILHO, Kathia; VILLAA, Nzia (Org.). Plugados na moda. So Paulo: Editora Anhembi Morumbi, 2006. GARCIA, Carol. Moda comunicao: experincias, memrias, vnculos. Carol Garcia e Ana Paula de Miranda. So Paulo: Editora Anhembi Morumbi, 2007. GARRETT, Jesse James. The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders: Berkeley, 2011. GOMES FILHO, Joo. Design do objeto: bases conceituais. So Paulo: Escrituras Editora, 2006. IIDA, Itiro. Ergonomia: projetos e produo. So Paulo: Edgar Blcher Ltda., 1992. IIDA, Itiro. O Bom e o Bonito em Design. Anais: Design P&D. In: 7 Congresso Brasileiro de pesquisa e desenvolvimento em design. Paran 2006. 1 CD-ROM. JONES, Sue Jenkyn. Fashion design manual do estilista; traduo Iara Biderman. So Paulo: Cosac Naify, 2005
82

KALBACH, James. Design de navegao Web; traduo Eduardo Kessler Piveta. Porto Alegre: Bookman, 2009. KRUG, Steve. No me faa pensar: uma abordagem de bom senso usabilidade na web. Editora Alta Books Ltda, 2006 LIMA, Paula Garcia. Moda, necessidade e consumo. Atlas de desenho. Universidade de Palermo. Buenos Aires, 2010. VAN DER LINDEN, Jlio. Ergonomia e Emoo: prazer, conforto e risco no uso dos produtos. Porto Alegre: UniRitter, 2007. LBACH, Bernd. Design Industrial Bases para a configurao dos produtos industriais. Traduo Freddy Van Camp So Paulo: Editora Blucher. 2001. MACDONALD, Nico. What is web design? Hove: RotoVision, 2003. MEMRIA, Felipe. Design para internet: projetando a experincia perfeita. Rio de Janeiro: Elsevier, 2005. MARTINS, R. F. F.; MERINO, Eugenio Andrs Dias. A gesto de design como estratgia organizacional. Londrina: EDUEL, 2008. MIRANDA, Ana Paulo de. Consumo de moda: a relao pessoa- objeto. So Paulo: Estao das letras e cores, 2008. MORVILLE, Peter, ROSENFELD, Louis. Information architecture for the World Wide Web. 2 edio. Sebastopol: O'Reilly Media, 2002. MORELLI, Graziela; SANTIAGO, Claudia Elisa Rocha de. Inovao no varejo: fast fashion e pop up stores. Disponvel em: <http://sites.unifebe.edu.br/ congressoits2010/artigos/artigos/062_-_INOVACAO_NO_VAREJO_FAST_ FASHION_E_POP_UP_STORES.pdf>. Acesso em: 2811.2010 NEWARK, Quentin. O que Design Grfico? traduo Edson Furmankiewicz. Porto Alegre: Bookman, 2009. NIELSEN, Jakob, LORANGER, Hoa. Usabilidade na web; traduo Edson Furmankiewics & Carlos Schafranski, Rio de Janeiro: Elsevier, 2007. NORMAN, Donald A. Design Emocional. Por que adoramos (ou detestamos) os objetos do dia-a-dia. Rio de Janeiro: Rocco, 2008. PALOMINO, Erika. A moda. So Paulo: Publifolha, 2003. PIRES, Dorotia Baduy (Org.). Design de moda; olhares diversos. So Paulo: Estao das letras e cores Editora, 2008. PREECE, J; ROGERS, Y; SHARP, Helen. Design de interao: Alm da interao homem-computador. Porto Alegre: Bookman, 2005

83

REYNOLDS, Janice. The complete e-commerce book: design, build & maintain a successful Web-based business. 2 edio. Berkeley: CMP Books, 2004. ROCHA, Claudio. Projeto Tipogrfico: anlise e produo de fontes digitais. 3 edio. So Paulo: Edies Rosari, 2005. ROYO, Javier. Design digital; traduo Osvaldo Antonio Rosiano. So Paulo, 2008. SAAD, Beth. Estratgias 2.0 para a mdia digital: internet, informao e comunicao. So Paulo: Editora Senac, 2003. SAIANI, Edmour. Loja viva: revoluo no pequeno varejo brasileiro. 8 edio. Rio de Janeiro: Editora Senac Rio, 2006. SAMARA, Timothy. Evoluo do design; da teoria prtica. Traduo: Edson Furmankiewicz. Porto Alegre: Bookman, 2010. SAMARA, Timothy. Grid: construo e desconstruo. So Paulo: Cosac Naify, 2007. SANTAELLA, L.; NOTH, W. Imagem. Cognio, semitica e mdia. So Paulo: Iluminuras, 2008. SEDDON, Tony. Imagens: um fluxo de trabalho digital criativo para designers grficos; traduo Edson Furmankiewics. Porto Alegre: Bookman, 2009. SEIVEWRIGHT, Simon. Fundamentos do design de moda: pesquisa e design; traduo Edson Furmankiewicz. Porto Alegre, 2009. SMOLA, Marcos. Gesto da segurana da informao: viso executiva da segurana da informao. 1. ed. Rio de Janeiro: Campus, 2003. TREPTOW, Doris. Inventando moda: planejando de coleo. Brusque, 2003. UNGER, Russ, CHANDLER, Carolyn. O guia para projetar. A experincia do usurio para projetistas de contedo digital e web sites. Rio de Janeiro, 2009. VILLAS-BOAS, Andr. O que [e o que nunca foi] design grfico Rio de Janeiro. 2AB Ed., 2001. WHEELER, Alina. Design de identidade da marca. Trad.: Joaquim da Fonseca. 2. ed. Porto Alegre: Bookman, 2008. YIN, Robert K. Estudo de caso: planejamento e mtodos; traduo Daniel Grassi. 3 edio. Porto Alegre: Bookman, 2005.

84