Projeto de conclusão da graduação em Design pela FSG. Prof. Orientadora Lucimara Ballardin.

1. Curso de Design
Gabriela Guedes de Oliveira Vargas
PROPOSTA DE DESIGN PARA COMÉRCIO ELETRÔNICO DA LOJA DE
VESTUÁRIO C&A
Caxias do Sul
2011
1

2. GABRIELA GUEDES DE OLIVEIRA VARGAS
PROPOSTA DE DESIGN PARA COMÉRCIO ELETRÔNICO DA LOJA DE
VESTUÁRIO C&A
Trabalho de conclusão de curso
apresentado a Faculdade da Serra
Gaúcha como exigência do curso
de Design para obtenção do título
de Bacharel em Design com linha
de formação em Expressão Visual.
T
r
a
b
Prof. Me. Lucimara Ballardin a
l
h
o
Caxias do Sul
2011
d
e 2

3. PROPOSTA DE DESIGN PARA COMÉRCIO ELETRÔNICO DA LOJA DE
VESTUÁRIO C&A
Trabalho apresentado e aprovado pela Banca Examinadora
em 5 de julho de 2011.
______________________________________________
Prof. Me. Lucimara Ballardin
(Professor Orientador)
______________________________________________
Prof. Me Carla Farias Souza
______________________________________________
Prof. Esp. Renata Ustárroz
Dedicatória
3

4. Dedico este trabalho às três maiores inspirações da
minha vida: minha mãe e meu anjo da guarda, dona
Mari Ione (in memorian), meu pai e meu herói, seu
Nei; e meu irmão e meu menino, João Paulo.
4

5. Agradecimentos
Gostaria de agradecer, primeiro a Deus, por todas as experiências e oportunidades que
me deu ao prazer de passar sejam elas boas ou ruins. Agradeço também a minha família
pelo apoio e por acreditar no meu potencial, principalmente ao meu pai/herói, meu
anjo/mãe, e meu bebê/irmão que incansavelmente me motivaram a querer, crescer e
continuar no design. Também aos meus avós, tios e primos pelo carinho, em especial
minha tia Lucila que assim como com minha mãe me deram a oportunidade de aprender a
desenhar e conhecer as artes de modo geral, seja na educação como na moda.
Agradeço também a todos que me deram oportunidade de acreditar e ir adiante com o
meu sonho de trabalhar com design e internet desde o início da faculdade, e que me
ensinaram e mostraram esse mundo na prática me dando base profissional para construir
esse trabalho. Aos meninos da antiga DN2, à equipe da Aldeia, e a turma da Fábrica do
Design que atualmente me acompanha nessa jornada. Todos eles mais do que colegas,
hoje, amigos.
E por fim a todos os meus amigos, tão loucos quanto eu, que me apoiaram a cada
momento desde o inicio de todas as aulas e mesmo aqueles que conheci no decorrer
delas. A todos os professores um muito obrigado. Aos meus colegas Diego Kuse, Liange
Araujo, Veridiana Moreira, Rafael Reis, Maura Borges, Alexssander Cusin, Mano Neto,
Keli Scopel, Ricardo Fedrizzi, Rudinei dos Santos, Ricardo Coleoni e tantos outros que
deixariam esta página enorme, obrigado a todos pelo enorme carinho. À minha querida
orientadora, Lucimara, que me agüentou durante os últimos meses e junto comigo
acreditou nesse trabalho. E aos simples de coração: Erika, Juliana, Raquel e Jéferson.
Muito obrigado a todos pelo carinho, pela paciência e por tudo.
5

6. RESUMO
Este trabalho consiste no desenvolvimento de uma proposta de comércio eletrônico para
a loja de vestuário C&A. Reunindo estudos de design de interação e design visual, o
trabalho em questão pretende propor uma experiência favorável de compra de roupas
pela internet. Por meio da metodologia projetual de Gui Bonsiepe (1984) diretrizes de
demais autores reconhecidos na área, foram desenvolvidas análises, onde os resultados
obtidos foram utilizados para o desenvolvimento de uma interface que atende os
princípios técnicos, estéticos, funcionais e emocionais que cercam o projeto.
Palavras-chave: design digital, comércio eletrônico, moda.
6

7. ABSTRACT
This work is a proposal for e-commerce clothing store C & A. Which studies the interaction
design and visual design, the work in question intends to propose a favorable experience
of buying clothes online. By design methodology Gui Bonsiepe (1984) guidelines for other
renowned authors in the area were developed analysis, where the results were used to
develop an interface that meets the technical principles, aesthetic, functional and
emotional surrounding project.
Keywords: digital design, e-commerce, fashion.
7

8. SUMÁRIO
1 INTRODUÇÃO .............................................................................................................. 10
2 REFERENCIAL TEÓRICO ............................................................................................ 13
2.1 MODA.......................................................................................................................... 13
2.1.1 Mercado............................................................................................................................... 14
2.1.1.1 Comércio Eletrônico............................................................................................................................ 16
2.1.2 Empresa C&A ...................................................................................................................... 17
2.2 DESIGN....................................................................................................................... 18
2.2.1 Aplicações no design Comércio Eletrônico .......................................................................... 19
2.3 DESIGN DE INTERAÇÃO ........................................................................................... 20
2.3.1 Ergonomia ........................................................................................................................... 21
2.3.2 Ergonomia Cognitiva............................................................................................................ 22
2.3.3 Usabilidade .......................................................................................................................... 23
2.3.4 Design Emocional ................................................................................................................ 24
2.3.5 Arquitetura de Informação.................................................................................................... 24
2.3.6 Design de Interface .............................................................................................................. 26
2.4 DESIGN VISUAL ......................................................................................................... 27
2.4.1 Identidade visual .................................................................................................................. 28
2.4.2 Forma e espaço ................................................................................................................... 28
2.4.3 Tipografia............................................................................................................................. 29
2.4.4 Cor....................................................................................................................................... 30
2.4.5 Imagem................................................................................................................................ 30
2.4.6 Composição na comunicação visual .................................................................................... 32
2.5 SISTEMA E TECNOLOGIA DO COMÉRCIO ELETRÔNICO...................................... 32
2.5.1 Tecnologia ........................................................................................................................... 34
3 METODOLOGIA ........................................................................................................... 35
3.1 MÉTODO DE PESQUISA ........................................................................................... 35
3.2 MÉTODO PROJETUAL ............................................................................................... 36
4 APLICAÇÃO DO MÉTODO PROJETUAL .................................................................... 39
4.1 PROBLEMATIZAÇÃO ................................................................................................. 39
4.2 ANÁLISES ................................................................................................................... 39
4.2.1 Lista de Verificação.............................................................................................................. 39
4.2.1.1 Lojas Renner ....................................................................................................................................... 40
4.2.1.2 Campanha Stella McCartney para C&A ............................................................................................. 42
4.2.2 Análise Diacrônica ............................................................................................................... 43
4.2.3 Análise Sincrônica ............................................................................................................... 47
4.2.3.1 Lojas Renner ....................................................................................................................................... 47
4.2.3.2 Lojas Zara ........................................................................................................................................... 48
4.2.3.3 Boutiques.com .................................................................................................................................... 49
4.2.3.4 Teste de Personalidade do Produto ................................................................................................... 50
4.2.4 Análise Estrutural................................................................................................................. 55
4.2.5 Análise Funcional ................................................................................................................ 60
4.2.6 Análise Morfológica.............................................................................................................. 62
4.2.6.1 Lojas Renner ....................................................................................................................................... 62
4.2.6.2 Campanha Stella McCartney para C&A ............................................................................................. 65
4.2.7 Análise de público alvo ........................................................................................................ 67
4.3 DEFINIÇÃO DO PROBLEMA ...................................................................................... 70
8

9. 4.3.1 Lista de Requisitos .............................................................................................................. 71
4.3.2 Hierarquização de Requisitos .............................................................................................. 71
4.3.2.1 Loja Virtual .......................................................................................................................................... 73
4.4 ANTEPROJETO/GERAÇÃO DE ALTERNATIVAS ..................................................... 75
4.4.1 Conceito .............................................................................................................................. 75
4.4.2 Esboços ............................................................................................................................... 76
4.4.2.1 Projeto de interface ............................................................................................................................. 77
4.4.2.2 Design visual ....................................................................................................................................... 80
4.5 PROJETO ................................................................................................................... 82
5 CONSIDERAÇÕES FINAIS .......................................................................................... 87
6 REFERÊNCIAS BIBLIOGRÁFICAS ............................................................................. 88
7 ANEXO A – PESQUISA SOBRE O USO DAS TECNOLOGIAS DA INFORMAÇÃO E
DA COMUNICAÇÃO NO BRASIL 2009 ........................................................................... 92
8 APÊNDICE A - TESTE DE PERSONALIDADE DO PRODUTO – BOUTIQUES.COM /
ZARA / LOJAS RENNER ................................................................................................ 101
9 APÊNDICE B – GRÁFICO DO TESTE DE PERSONALIDADE DO PRODUTO –
LOJAS RENNER ............................................................................................................. 105
10 APÊNDICE C - GRÁFICO DO TESTE DE PERSONALIDADE DO PRODUTO –
LOJAS ZARA .................................................................................................................. 106
11 APÊNDICE D - GRÁFICO DO TESTE DE PERSONALIDADE DO PRODUTO –
BOUTIQUES.COM .......................................................................................................... 107
12 APÊNDICE E – FLUXO DE TAREFA DE COMPRA ONLINE .................................... 108
13 APÊNDICE F – MAPA DO SITE LOJAS RENNER .................................................... 109
14 APÊNDICE G – MAPA DO SITE STELLA MCCARTNEY PARA C&A ...................... 110
15 APÊNDICE H – MAPA DO SITE COMÉRCIO ELETRÔNICO C&A ........................... 111
16 APÊNDICE I – RESULTADOS DE TESTE DE PERSONALIDADE DO PRODUTO .. 112
9

10. 1 INTRODUÇÃO
O crescimento e revolução 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 comércio eletrônico cresce
consideravelmente devido aos avanços na oferta e segurança de compra, para vender não
basta apenas oferecer, e sim conquistar. É esse o ponto em que o mercado de varejo de
moda online1 está avançando cada vez mais. Segundo Callegari(2011), o mercado de
vestuário e acessórios avançou da 20.ª posição em 2006 para 6.ª em 2010, com 5% da
fatia de R$ 14,8 bilhões faturados por venda online no ano de 2010. Mesmo com um
cenário econômico favorável, com o volume de informação e as novas tecnologias e mídias
oferecidas, hoje está cada vez mais difícil chamar a atenção do usuário.
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 informações
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,
aceitação da sociedade ou luxo.
A moda, como segmento movido pelo capitalismo e sendo de vanguarda, necessita
de comunicação para venda de seus produtos e tendências. Para tanto não pode deixar
de se comunicar através da internet. Principalmente na velocidade com que próprio
segmento lança novas peças.
É neste ponto que o design se propõe a criar experiências satisfatórias no
ambiente de comércio eletrônico de peças de vestuário, sendo uma ferramenta de ligação
entre a moda e a internet. A interface2 de comércio eletrônico, objeto de estudo deste
trabalho, e outras demais, como define Royo(2008, p. 89), “é o espaço onde o design dá
forma à linguagem, para facilitar o seu uso”. É através da interface que se constroem
experiências mais ricas aumentando a relação entre clientes e usuários (DUBBERLY,
EVENSON, 2008). Para isso é necessário que aspectos como comunicação, identidade
visual, navegação, interação e usabilidade sejam considerados no projeto, garantindo
assim que o uso da interface seja efetivo e que esta experiência resulte em um processo
de compra que traga satisfação ao usuário.
No entanto, este trabalho tem como hipótese inicial o fato de que a situação atual
de plataformas de comércio eletrônico não propõe experiências tão favoráveis ao usuário.
1
Online, termo em inglês utilizado na internet para denotar quando o conteúdo está disponível no ambiente
virtual em tempo real.
2
Interface, segundo Royo (2008, p. 89), “por definição,éárea de comunicação entre o homem e a máquina”.
10

11. O relacionamento do usuário com produto no momento da compra online pode ser
considerado como superficial sob o ponto de vista da experimentação e pouco perceptivo,
principalmente quando comparado com o experimento real do produto de moda em uma
loja física. Na compra digital, por exemplo, existem possibilidades limitadas de
visualização e de compartilhamento experiências entre vendedor e usuário. Ao mesmo
tempo, perde-se a exploração de elementos táteis e olfativos, além de que o usuário
precisa escolher sem vivenciar o produto em seu próprio corpo. Esses são fatores
restritivos do comércio eletrônico de roupas, mas que tornam-se fatores desafiadores ao
Design.
Assim, parte-se também da hipótese de que um sistema de comunicação digital
desenvolvido por meio de princípios do Design pode melhorar a experiência de compra
via internet para artigos de vestuário. Ao mesmo tempo, o compartilhamento da
experiência de compra através de redes sociais pode estimular a comprar e auxiliar a
divulgação da marca.
A partir deste contexto, a rede de lojas de vestuário C&A é o foco de análise deste
trabalho, em virtude de algumas dificuldades encontradas no seu ambiente online de
comércio eletrônico. Esta marca foi escolhida como objeto de um estudo de caso porque
atualmente seu web site possui ferramenta de venda apenas para campanhas específicas
da marca, bem como apresenta problemas técnicos como uma navegação lenta. Assim
essa experiência pode se tornar um pouco frustrante para o usuário que busca comprar
mais produtos da marca.
A C&A, uma das maiores redes de moda do país, atua no segmento de fast
fashion. Este segmento se caracteriza por lançamentos de coleção de vestuário mais
freqüentes e mais curtas ao longo do ano, contrariando o sistema semestral das coleções
da alta-costura e de prêt-à-porter3. Por atuar neste tipo de segmento de varejo, acredita-
se que a marca deveria proporcionar uma vivência melhor de seus produtos com os
usuários no ambiente online, fortalecendo o relacionamento com seus consumidores.
Para construção deste projeto, a pesquisadora alia seus conhecimentos e
vivências em eventos de moda (Donna Fashion Iguatemi e São Paulo Fashion Week 2010
e 2011) e desenvolvimento de projetos digitais para clientes de marcas como Malharia
Anselmi e Colcci. Além disso, ela obteve contato com a construção de confecções de
pequeno/médio porte através da marca pertencente a sua mãe na infância. Estes
3
Prét-à-porter termo em francês que significa “pronto para usar“, mencionado no inglês como ready-to-wear,
trata da produção de peças em série com tamanhos predefinidos (PALOMINO, 2003).
11

12. aspectos levaram ao conhecimento e questionamento quanto ao posicionamento da moda
dentro do ambiente digital.
Partindo deste cenário, este trabalho se propõe a levantar informações a cerca dos
conteúdos de design de interação e design visual, além de estudos sobre mercado de
moda e comércio eletrônico, para a construção deste projeto. Como objetivo geral, está o
desenvolvimento de um web site de comércio eletrônico para a loja de vestuário C&A,
visando melhorar a experiência emocional na compra de roupas no ambiente online.
Para construção deste estudo, têm-se como objetivos específicos:
- Levantar as necessidades dos usuários no processo de uma compra de roupas,
através de análise de comportamentos e expectativas do usuário perante estes
produto;
- Levantar os requisitos fundamentais para o desenvolvimento de um projeto que
envolva experiências emocionais favoráveis, analisando web sites de comércio
eletrônico e de busca no segmento de vestuário;
- Após estes estudos, os resultados serão utilizados para criar uma interface que
atenda aos requisitos mínimos de usabilidade e que seja compatível com a
identidade visual da marca em questão.
O presente trabalho corresponde a linha de formação em design gráfico com linha
de pesquisa delimitada em Expressão Visual. Possui 4 capítulos, sendo que o primeiro
abordara o referencial teórico contextualizando o projeto, dividido entre os estudos de
moda, comércio eletrônico, design de interação e design gráfico. O segundo capítulo
contempla os métodos de pesquisa e de projeto aplicados, sendo que o terceiro abordará o
desenvolvimento e construção do projeto. E por fim as considerações finais sobre o
resultado e solução apresentada, sendo acompanhada posteriormente das referências
bibliográficas deste trabalho.
12

13. 2 REFERENCIAL TEÓRICO
2.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 móveis,
as vestimentas e a coqueteria” (CIDREIRA, p. 31). Foi a partir do final da Idade Média que o
conceito de moda começa aparecer além da indumentária. Miranda(2008, p.54) diz que “o
vestir e adornar-se, nas diversas sociedades e em todas as épocas da evolução humana,
denota maior complexidade do que a resposta inicial ao requisito puramente prático de
abrigo confortável”.
As roupas, os acessórios, os sapatos são alguns dos muitos elementos que
compõem o universo da moda, presentes no nosso dia-a-dia. Como define Palomino(2003,
p.17) “moda se presta a ser seu primeiro cartão de visita: até ao acordar, abrir o armário 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
efêmera. Porém é uma indústria que movimenta milhões todo o ano e empregos nos mais
diversos setores envolvidos com ela, acompanhando estilos e tendências no mundo.
Apenas para o Brasil, exportações, no primeiro semestre de 2010, da ordem de um bilhão e
cem milhões de dólares (ABIT, 2010), mesmo após a crise enfrentada nos últimos anos. No
mercado interno foram gastos mais de US$ 2.7 bilhões no mesmo período (ABIT, 2010).
Europa e EUA são as regiões que mais concentram o mercado mundial do vestuário,
segundo Cobra (2007).
Por ser um fenômeno social e temporal, a moda passa por um ciclo de ascensão a
queda no decorrer das coleções e tendências. Este ciclo passa por 5 fases, segundo
Treptow (2003): lançamento, consenso, consumo, massificação e desgaste. Neste
movimento, o lançamento consiste no surgimento de uma proposta de estilo, seja ela vinda
de um estilista, grupo de pessoas, novelas, filmes, etc. Após o lançamento, é necessária a
aceitação desta linha de produtos por um grupo de consumidores, geralmente pessoas com
alto valor aquisitivo, consumido por este e distribuído para a massa através de lojas de
departamento, shoppings, etc.
Neste movimento existem dois efeitos definidos por Jones (2005) que compõem o
surgimento da moda. O primeiro denominado efeito trickle-down4, surge quando o ciclo de
moda começa pelo lançamento de um estilo por uma celebridade ou de uma coleção da
4
Efeito trickle-down, definido como efeito “desaguamento” (JONES, 2005).
13

14. alta-costura; consumido por pessoas famosas e formadores de opinião; 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 específicos determinam um estilo, o mercado o define e ele vira
tendência na mídia e a partir de então começa a virar artigo de luxo.
Ambos comportamentos possuem 2 fatores em comum, a tendência e o estilo.
Entende-se por tendência um fenômeno de moda que surge a partir de um grupo de
vanguarda e dura por um curto período, sendo o seu fim determinado pela massificação
dos artigos de moda compostos por ela. É quando a tendência passa a ser padrão de
vestir. Já o estilo, conforme Garcia(apud TREPTOW, 2003, p.31) é “a capacidade de filtrar
as tendências e transformá-las, produzindo novas propostas que manifestam
características pessoais”.
A construção das coleções, produção e comercialização dos produtos de moda
acontecem em dois formatos: pela alta-costura ou pelo prét-à-porter. Do mais alto valor
aquisitivo e mais exclusivo ao mais barato com produção em massa segundo Villaça,
Castilho(2006). Ambos os formatos costumam apresentar duas coleções por ano –
outono/inverno e primavera/verão.
A alta-costura é construída através da produção exclusiva e artesanal de artigos de
vestuário (PALOMINO, 2003). Estes produtos são de altíssimo 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 prêt-à-porter, em francês “pronto para usar”, o desenvolvimento das peças é
voltado para um grupo em potencial, que vai desde os produtos de elaboração mais
sofisticada, até as mais populares. Segundo Treptow(2003), neste movimento as peças são
produzidas em escala industrial, sejam elas em número reduzido, mais exclusivo, ou em
maior número para grande parte da população.
2.1.1 Mercado
Atualmente, Estados Unidos e União Européia dividem grande parte do mercado
mundial do vestuário, principalmente nas cidades Nova Iorque, Paris, Milão e Londres
(COBRA, 2007). Movimentados pelos setores têxtil e do vestuário, a moda tem como
principais atuantes os estilistas, designers e varejistas. E também pelo seu principal alvo, o
usuário. Não só da industria têxtil e de vestuário vive a moda, a comunicação atua
juntamente com essas duas partes do bolo para conquistar o consumidor. Através da
5
Efeito bubble-updenominado também efeito “borbulha” (JONES, 2005).
14

15. internet, televisão, jornais, revistas, publicidade e etc., o consumidor recebe todos os dias
ofertas dos mais variados tipos para estimular o consumo de peças de vestuário.
O mercado de moda refere-se especificamente a venda global de artigos de moda,
no qual os vendedores e os compradores são comerciantes de moda e/ou lojistas de
moda. Dentro desse complexo, o mercado de vestuário revela-se o mais
significativo. O mercado do vestuário é um lugar de encontro de oferta e demanda.
Explica-se, então, logo de princípio 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 divisão de setores para
facilitar a produção e design das peças em confecções, e escolha dos preços. No que diz
respeito aos setores, a segmentação ocorre geralmente entre moda feminina, moda
masculina e moda infantil, porém como afirma o autor, com os avanços tecnológicos e
mudanças de cultura a fragmentação de setores tende a aumentar cada vez mais para
atender os consumidores. Segundo Feghali(2006) a segmentação é 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 segmentação de mercado é uma das
ferramentas mais utilizadas em marketing com o objetivo de conquistar mercados
específicos 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 são feitas por pedidos, onde
as coleções são apresentadas através de mostruário completo, produzidas as peças e
entregues conforme solicitação; ou sistema de pronta-entrega, em que as vendas são
realizadas a partir de mostruário parcial com disponibilidade das peças no estoque.
No caso do varejo, as vendas ocorrem pelo sistema de pronta-entrega, com exceção
dos ateliers, onde a confecção é sob medida (TREPTOW, 2003). A diferença do varejo para
o atacado está no comprador. No atacado as vendas são direcionadas a empresas e lojas,
onde o cliente deve possuir CNPJ (Cadastro Nacional de Pessoa Jurídica); e no varejo os
produtos são comercializados para o consumidor, em lojas, feiras com venda direta a este
público, e franquias (JONES, 2005). Dentre os ambientes de comercialização do varejo
estão, segundo alguns autores (JONES, 2005; COBRA, 2007; FEGHALI, DWYER, 2001):
a) Independentes: Segundo Jones (2005) são 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 são maiores.
15

16. b) Múltiplas: São cadeias de lojas distribuídas em vários 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 preços medianos;
c) Lojas de departamento: São estabelecimentos que possuem uma gama muito
grande de mercadorias de todos os tipos, distribuídos em vários andares.
Costumam oferecer produtos que vão além do vestuário como cama, mesa,
banho, louças, etc. Segundo Feghali, Dwyer(2001) nestes espaços são feitas
algumas concessões, onde são adquiridas varias marcas reduzindo o custo de
produção destas lojas a zero;
d) Franquias: Define-se por lojas onde o proprietário adquire o direito de possuir um
ponto de venda para alguma marca em determinada região, 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 é baixíssimo, e após
aquisição do direito de venda são cobrados royalties das peças (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 serviços“;
f) Lojas de rua: voltado para as classes C, D e E, a loja de rua comercializa peças
de vestuário (marca própria ou diversas marcas) de preços menores, com forte
nicho em bairros das pequenas e grandes cidades (FEGHALI, DWYER, 2001);
g) Fast fashion: possui várias mini coleções ao longo do ano com menor quantidade
de produção, boa qualidade e baixo custo. Geralmente é uma loja de marca
própria com muitas redes distribuídas nacional e mundialmente, com produção
própria e/ou parcerias com estilistas famosos ou celebridades (SANTIAGO,
MORELLI, 2010).
2.1.1.1 Comércio Eletrônico
Como objeto de estudo deste trabalho está o comércio eletrônico, que segundo
alguns autores (COBRA, 2005; JONES, 2005; FEGHALI, DWYER, 2001) também é
classificado como um tipo de varejo. Define-se como e-commerce ou comércio eletrônico o
procedimento de compra, venda e troca de produtos, serviços e informações por redes de
computadores ou pela Internet (ALBERTIN, 2004). No caso de uma aplicação de comércio
eletrônico, conforme Unger, Chandler (2009) o projeto consiste na apresentação e
posicionamento de uma marca, oferecendo conteúdo e facilidade na execução de tarefas
16

17. como buscar e comparar produtos, etc. Ainda como característica deste tipo de sistema de
venda online está a vinculação de campanhas de marketing para engajar o usuário a favor
da marca da empresa.
No comércio eletrônico, todos elementos de tecnologia e de mídias interativas estão
em conjunto e conectados em uma rede aberta. Connoly(apud Albertin, 2004) aponta que
“segundo o qual os estudos de comércio eletrônico, em geral, são fortemente focados em
segurança, criptografia, moedas e pagamentos eletrônicos, mas comércio é mais do que
apenas a troca de dinheiro.” Porém sistema de comércio eletrônico não possuem somente
estes fatores, inclui também pesquisa, desenvolvimento, marketing, negociação, vendas e
etc. Para o desenvolvimento de um bom projeto todos estes e outros fatores precisam estar
bem alinhados.
Os números se mostram favoráveis ao crescimento das vendas no ambiente de
comércio eletrônico. Segundo EBIT(2010) o segmento moda e acessórios vendeu cerca de
30% do mercado na modalidade compras coletivas6. No comércio eletrônico como um todo,
a moda está na 6a. posição dentre os produtos mais vendidos, sendo que nos Estados
Unidos este segmento está na 3a. colocação. O EBIT(2010) afirma que “a falta de
padronização e diversidade de players especializados no setor ainda são uma carência
para potencializar as vendas nesta categoria.”
2.1.2 Empresa C&A
Conforme o próprio website da marca afirma, a C&A é uma das maiores redes de
varejo do mundo com mais de mil lojas em 20 países (C&A, 2011). Fundada pelos Irmãos
Clemens e August Brenninkmeijer há 165 anos, a empresa de origem holandesa, está no
Brasil desde 1976 quando foi inaugurada a primeira loja no país em São Paulo. A marca
possui mais de 180 lojas espalhas por 60 cidades no país, afirma o Instituto C&A(2011).
Possui uma ampla linha de produtos para todos os tipos de públicos. São vendidos,
segundo Portal Fator Brasil(2007), artigos de vestuário feminino, masculino e infantil, além
de acessórios, calçados e eletro-eletrônicos (celulares, câmeras digitais e aparelhos MP3
player).
Como uma empresa de tradição, a C&A constitui-se de princípios éticos e de
responsabilidade social com todas as pessoas envolvidas no processo, de funcionários a
clientes. Este viés social se apresenta desde 1991 no Instituto C&A, uma organização sem
fins lucrativos destinada a qualificar e cuidar da educação de crianças e adolescentes no
6
Conforme o EBIT (2010), os sitess de compra coletiva são modalidades de comércio eletrônico onde são
feitas promoções, oferecidas para um grande numero de pessoas por um baixo custo.
17

18. Brasil. Entre os outros pontos no qual a empresa se preocupa, está também o compromisso
com a sustentabilidade, onde em 2009 foi lançado o primeiro relatório da marca com o tema
e inaugurada a primeira loja C&A Eco no Brasil (C&A, 2011).
A marca, desde sua fundação, possui como objetivo “democratizar a moda,
oferecendo produtos de qualidade a preços acessíveis” (C&A, 2009). A prova de que isso
acompanha a empresa até hoje está na forma como ela se adapta as novas tendências.
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 Bündchen, que após três
meses de campanha, fez as vendas subirem em 20%. Recentemente a C&A aderiu ao fast
fashion, trazendo estilistas renomados para assinar suas coleções. Entre as grifes e nomes
nacionais estão Glória Coelho, Maria Bonita Extra, Espaço Fashion, Isabela Capeto, Amir
Slama, Sergio K, Isabeli Fontana e Gisele Bündchen. Nos nomes internacionais estão as
celebridades Cristina Aguilera e Beyoncé, e a estilista Stella McCartney.
2.2 Design
Segundo Löbach (2001), denomina-se design a concepção de novas idéias e novos
processos para melhorar e facilitar a vida do usuário final. Com este intuito o design tem
como objetivo projetar produtos e soluções que atendam as necessidades das pessoas,
levando em consideração aspectos visuais, ergonômicos, tecnológicos, culturais, sociais,
econômicos e outros.
Existem muitas discussões 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., porém em português refere-se a projeto, propósito e
plano. Sendo então o ato de projetar muito mais próximo do termo como configuração de
algo, materialização de uma idéia. Gomes Filho(2003, p. 21) cita:
O design existe exatamente para possibilitar a concepção, a inovação, o
desenvolvimento tecnológico e a elaboração de objetos que, dentro de um enfoque
sistêmico, possibilite reunir, integrar e harmonizar diversos fatores relativos à sua
metodologia projetual.
O mercado atual já aceita e favorece as empresas que levam este conceito em
consideração para produção de novos produtos. Principalmente, os que se encaixem com
os ideais comuns a empresa e ao seu público.
18

19. Qualidade perante o mercado passou a ser um pressuposto, enquanto novos
diferencias são exigidos ao lado de preço e inovação. Nesse contexto é que o
Design se apresenta como importante estratégia competitiva, como elemento
fundamenta para agregar valor e criar identidades próprias a produtos, serviços e
empresas. (DORNELLES apud Martins; Merino, 2008)
Sendo uma área multidisciplinar, ela deve aliar função, estética, confiabilidade,
usabilidade e custo em harmonia e equilíbrio para que o produto seja eficaz ao usuário. O
design possui muitos desdobramentos, os principais giram em torno do design industrial (ou
design de produto) e design gráfico, segundo Villas-Boas (2001). Para Bonfim (apud
Martins; Merino, 2008) as habilitações do design estão em gráfico, produto, interfaces,
interiores, moda e ambiente; alem das ênfases em embalagem, têxtil, mobiliário, etc.
variando conforme os interesses da região.
2.2.1 Aplicações no design Comércio Eletrônico
Segundo Unger; Chandler (2009) os projetos de comércio eletrônico tratam dos
quatro tipos de projeto (presença de marca, campanha de marketing, fonte de conteúdo e
aplicação baseada em tarefas), para tal organização assim como qualquer outro projeto de
interface digital necessita de design para melhorar a visualização e facilitar a navegação. O
sucesso de um projeto digital é atrativo, fácil de entender e possui uma ótima performance
(REYNOLDS, 2004).
Existem algumas controvérsias 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 publicações apenas do
termo web, ou design para web. Cooper, Reimann, Cronin(2007) tratam também de
produtos digitais (aplicativos mobile, desktop, interações nas redes sociais, etc.) pelo foco
dado aos campos de estudo de design de interação, arquitetura da informação 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. Porém como o
próprio autor coloca o termo web às vezes se faz amplo ou limitador, pois a “página da Web
(ou Web Page em inglês), foi uma das expressões que limitaram a nossa visão e
compreensão do ciberespaço7.” Ainda este autor acrescenta que:
7
Ciberespaço consiste na interconexão de informações, de usuários e de recursos (ROYO, 2008).
19

20. “É como se, ao nos referirmos à internet, pensássemos na metáfora 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 gráficos aqueles que iniciaram a exploração do mundo da interface gráfica
tem-se ocupado (na maioria dos casos, mas sempre há exceções) da comunicação
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 errôneo 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 comércio eletrônico, é dividido em duas etapas: design de interação e o design
visual (ROYO, 2008; COOPER, REIMANN, CRONIN, 2007; KALBACH, 2009). Mesmo
ambas possuindo nomenclaturas diferentes para alguns autores, o design de interação trata
de todas as interações entre usuário e interface no web site, baseado em estudos de
ergonomia, usabilidade, design emocional e arquitetura de informação. O design visual,
design gráfico (KALBACH, 2009) ou design sensorial (GARRETT, 2011), consiste na
composição 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 experiência: uma experiência que é evocativa,
emocional, útil, agradável e memorável”.
2.3 Design de Interação
No desenvolvimento de produtos, o design de interação tem como objetivo conceber
soluções interativas que sejam utilizáveis de fácil aprendizado, uso eficaz e ocasione uma
experiência agradável ao usuário no seu dia-a-dia. Winograd(apud PREECE; ROGERS;
SHARP, 2007, p.28) define o design de interação como “o projeto de espaços para
comunicação e interação humana”. Para construção de produtos interativos, deve-se levar
em consideração o estudo de muitas disciplinas que envolvem o conhecimento a cerca do
usuário, e suas atividades, e das interfaces as quais vão interagir. Preece; Rogers; Sharp
(2007) coloca que dentre estes estudos estão os campos interdisciplinares, como
ergonomia cognitiva, sistemas de informação, interação homem-computador (IHC), fatores
humanos (FH), engenharia cognitiva; as disciplinas acadêmicas, como ergonomia,
psicologia/ciência cognitiva, informática, ciência da computação/engenharia de software,
ciências sociais; e por fim as práticas em design, como o design gráfico, de produto,
industrial, artístico e indústria de filmes.
O desenvolvimento de estudos de design de interação começaram a partir da
necessidade de projetar interfaces mais amigáveis para os usuários, pois com a criação de
sistemas por engenheiros este cuidado não existia (PREECE; ROGERS; SHARP, 2007).
20

21. Ou seja, a interface era criada apenas pela experiência dos mesmos para uso próprio. 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 agradável.
Acompanhando esse progresso dos computadores pessoais, evoluíram também os
aplicativos destinados ao trabalho, educação e treinamento.
A partir do crescimento das novas mídias e tecnologias, o papel do designer de
interação está cada vez mais ligado em unir diversas áreas do conhecimento e campos
interdisciplinares para construção de interfaces principalmente na web. Em se tratando de
um projeto de um web site, serão aplicados os estudos de ergonomia cognitiva e design
gráfico como áreas de suporte à construção do produto. No desenvolvimento do projeto em
si, Preece; Rogers; Sharp(2007) destaca que o processo de design de interação envolve 4
etapas: i) identificar necessidades; ii) determinar requisitos; iii) desenvolver alternativas que
preencham esses requisitos; iii) construir versões 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 avaliação
que dirá se a interação foi realmente aplicada e bem resolvida.
2.3.1 Ergonomia
Define-se como ergonomia o estudo das interações humanas entre produtos,
sistemas e ambientes, levando em conta conhecimentos que otimizem o conforto e prazer
do usuário e eficiência 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 questões, envolvendo produtos, processos, ambientes e interfaces. Segundo ainda a
International Ergonomics Association - IEA(2001) ela “contribui para o projeto e a
avaliação de tarefas, trabalhos, produtos, ambientes e sistemas no sentido de torná-los
compatíveis com as necessidades, habilidades e limitações das pessoas”.
No que diz respeito aos domínios de especialização, a ergonomia é classificada em
três, conforme Abergo(2011): física, cognitiva e organizacional. A ergonomia física estuda
as limitações e possibilidades físicas dos usuários, considerando a segurança e o conforto
do usuário durante a interação 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
21

22. interações humanas com o sistema, levando em conta a fácil compreensão, interpretação
e uso do produto. E por fim a ergonomia organizacional se ocupada do estudo da
interação dos sistemas com as estruturas organizacionais, políticas e de processos, com
o intuito de otimizá-los dentro de um contexto específico.
Portanto, ressalta-se que no projeto de interfaces digitais, o estudo dos princípios
da Ergonomia Cognitiva são fundamentais.
2.3.2 Ergonomia Cognitiva
No caso da ergonomia cognitiva, para otimizar as características de um produto a
fim de torná-lo de fácil compreensão e uso é necessário entender a cognição humana. Ela
consiste em uma resposta psicológica do ser humano quanto ao processamento mental.
É a partir dela que serão entendidas as atuações humanas perante decisões,
interpretações e ações a respeito do produto.
De acordo com Linden (2007). Os processos mentais envolvidos para tais
acontecimentos são chamados de superiores, sendo eles os atos de compreensão
(interpretação e atribuição de significados ao ambiente), aprendizado (julgamento do
comportamento e ambiente inserido), planejamento (determinar a solução de problemas)
e decisão (comparação de opções e seleção da mais adequada). Para compreensão
destas ações é necessário saber mais sobre as etapas onde o sistema cognitivo trabalha:
percepção, processamento e ação.
O estado de percepção consiste na reação a um estímulo que posteriormente gera
uma sensação, sendo ela discriminada pela memória e interpretada pós comparação com
os significados existentes. Na fase de processamento, esta informação é analisada para a
tomada de decisão. E por fim, o estágio de ação, no qual o cérebro coordena a resposta
ou ação a partir das interpretações atingidas.
Porém, através das informações interpretadas e respondidas pela cognição, entra
em questão a abordagem do sistema afetivo. Ele consiste em uma resposta emocional do
usuário. É ele que reage de forma mais rápida e eficiente ao ambiente inserido.
Cybis(2007) aponta dois aspectos que devem ser considerados na definição de emoção,
o primeiro tratando-se da reação a eventos considerados importantes quanto suas
necessidades, objetivos e/ou anseios, e o segundo trata dos componentes fisiológicos,
afetivos, comportamentais e cognitivos afetados. Mas não só de emoções é formado o
sistema afetivo do usuário. Existem também as respostas quanto o humor e sentimentos.
No que diz respeito ao humor, ele possui uma reação mais longa que a emoção e apesar
de ser causado por um objeto, não é associado diretamente a ele. Já os sentimentos,
22

23. Cybis(2007, p. 325) afirma: “resultam do julgamento de uma experiência direta com um
objeto ou evento e uma conseqüente generalização para outros objetos de mesmo tipo.”
A partir dos sentimentos que se estabelece que a experiência de uma interface
poderá se tornar positiva ou não. E é neste ponto que sistemas afetivo e cognitivo devem
andar juntos. No caso da memória, este agente quando influenciado pelo humor, pode
facilitar a recuperação de eventos com carga emocional relacionados ao humor positivo
ou negativo do momento. Com esta influência que a tomada de decisões pode se tornar
mais efetiva, pois a partir deste humor que se formarão os sentimentos responsáveis pela
reflexão e experiência vividas pelo usuário com relação ao objeto em questão.
São nestas experiências que o designer deve trabalhar nas interfaces para obter
resultados satisfatórios em seu projeto. É fundamental que o profissional obtenha e
conheça os conceitos de ergonomia para aplicá-los para efetivação destes resultados.
“De bom humor as pessoas avaliarão melhor uma interface ou produtos de um site de
comércio eletrônico, por exemplo, e serão mais cautelosas (expondo-se menos aos
riscos)” define Cybis (2007, p.326). Através do design que os conceitos e soluções
ergonômicas se materializam para o bem estar dos usuários.
2.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 usuário, em determinado contexto de
operação, para a realização de tarefas de maneira eficaz, eficiente e agradável”. A origem
da área tem associação a ciência cognitiva que utilizava o termo user-friendly (amigável),
em meados de 1980, para investigar, estudar e propor soluções satisfatórias ao usuário em
produtos e interfaces (ANDRADE, 2007). É importante lembrar que a usabilidade não se
trata apenas da relação do produto com o usuário, mas também do ambiente no qual
ambos estão inseridos e a tarefa realizada neste contexto (IIDA, 2005).
Como parte do nível comportamental do design emocional (descrito a seguir), a
usabilidade geralmente é notada quando a mesma não acontece de maneira correta e
satisfatória ao usuário. É essencial nesses casos que se pense não apenas nos fatores
objetivos que envolvem a interação, mas também fatores subjetivos (cognitivos e afetivos),
pois a usabilidade depende da satisfação do usuário. Andrade (2007) comenta que a partir
da definição do termo podemos perceber que a usabilidade é constituída de muitas
características subjetivas, onde não existe uma receita ou plano perfeito para execução de
projetos que respeitem os preceitos da mesma e que atenda a 100% dos usuários.
23

24. Nestes casos, o estudo sobre o usuário é 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 execução de uma atividade; iii)
Seguro no uso, protegendo o usuário de possíveis situações perigosas e não satisfatórias;
iii) Ser útil para o que o usuário deseja, diante da funcionalidade proposta; iv) Possibilitar
facilidade de aprendizado no sistema; v) Ser fácil de memorizar o uso, para posteriores
utilizações.
Estes detalhes devem ser levados em consideração no desenvolvimento de
interfaces, principalmente na Web onde alguns serviços são usados com uma grande
frequência. Para Nielsen; Loranger (2007) o ambiente web está cada vez mais competitivo,
necessitando de um olhar mais crítico para a usabilidade.
2.3.4 Design Emocional
A terminologia trata do ato de projetar interfaces ou demais produtos com o foco
principal nas motivações, desejos, satisfações e prazeres dos usuários. Consiste não
apenas em atingir as necessidades que este produto propõe, como também superar as
suas expectativas a fim de buscar uma experiência eficiente de uso (FONTOURAet al.,
2006). Para tal estudo são necessários os conhecimentos sobre design emocional.
O design emocional consiste no estudo design em relação as emoções, onde o
usuário demonstra suas reações perante a experiência vivenciada diretamente com
produtos. É no sistema afetivo que encontramos as emoções, que aliadas ao sistema
cognitivo, são responsáveis pelas respostas psicológicas do usuário em relação ao
ambiente inserido (LINDEN, 2007). Norman(2008) defende três níveis para a relação entre
o design e as emoções, são eles:
- nível visceral: trata-se de uma reação imediata e espontânea; faz uso da
percepção para sensação instantânea obtida;
- nível comportamental: diz respeito a funcionalidade e desempenho do produto;
aqui são aplicados os estudos de usabilidade na busca da satisfação do uso;
- por fim, nível reflexivo: consiste na mensagem e significados que o produto evoca
no usuário; processo de relação mais duradouro envolvendo interpretações,
compreensão e raciocínio sobre o produto.
2.3.5 Arquitetura de Informação
É tarefa da arquitetura de informação, estruturar e organizar padrões de dados que
estarão presentes na interface. O profissional que atua na arquitetura da informação (AI) é
24

25. responsável por criar mapas de sites detalhados e analisar a distinção de categorias e
subcategorias de informação para torná-las bastante claras na navegação para o usuário
(UNGER; CHANDLER, 2009). Este também define a hierarquia das informações para
melhor acesso a elas, e melhor beneficio também dos objetivos de negócio 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 usuários recursos necessários para transformar suas
necessidades em ações e para atingir seus objetivos com sucesso, explica-nos Morrogh.”
Para construção desta etapa dentro do projeto de um sistema devem ser considerados três
elementos, segundo Morville; Rosenfeld (2006): usuário, contexto e conteúdo. Em se
tratando do usuário são investigadas as necessidades, comportamentos, experiências,
tarefas e audiência que se deve atingir. O contexto seria o cenário que o projeto se propõe,
principalmente do cliente em questão, como objetivos, cultura, políticas e restrições da
empresa. Outro ponto a ser levantado é o conteúdo que fará parte do sistema, onde são
identificados documentos, volume destas informações e possíveis atualizações, tipos de
dados e estrutura existente.
A etapa de arquitetura de informação é constituída por quatro sistemas (AGNER,
2009): organização, rotulação, navegação e busca. Eles são responsáveis por guiar a
construção do mapa do site e do fluxo de tarefas que irão nortear o projeto. O sistema de
organização, segundo Agner (2009) consiste em organizar e categorizar os dados do
projeto; sistema de rotulação trata de como serão os elementos textuais e visuais para os
componentes presentes no web site; sistema de navegação define as formas de interagir
no espaço e entre as informações; e por fim o sistema de busca que determina as questões
que o usuário poderá enfrentar, nas quais o banco de dados irá responder.
Figura 1: Mapa do site e fluxo de tarefas. Fonte: Garrett (2011)
25

26. A documentação e entrega do resultado destas pesquisas se dá através do mapa do
site e fluxo de tarefa, onde ficam visíveis a estrutura e relacionamento dos conteúdos e
páginas determinados pelo arquiteto, conforme Figura1. Segundo Kalbach(2009, p. 250)
“ele captura o conceito, a estrutura da informação e o esquema de organização de um web
site em uma representação visual”. Já um fluxo de tarefas, determina os processos que os
usuários farão enquanto acessam o web site ou aplicação (UNGER; CHANDLER, 2009). A
diferença entre ambos os diagramas que mostram organizações sobre o projeto é que o
mapa diz respeito a hierarquia do web site e o fluxo mostra as opções de caminhos para a
navegação. A partir deles que a equipe do projeto consegue enxergar e identificar as
necessidades para prosseguir a construção do sistema e desenvolver as páginas e
interações do web site.
2.3.6 Design de Interface
Consiste no desenvolvimento dos comportamentos de um web site ou aplicação
conforme as ações do usuário (UNGER, CHANDLER, 2009). É neste processo que se
reúnem e aplicam o estudo de design de interação como um todo, pois serão definidos a
partir dos dados obtidos anteriormente a funcionalidades, comportamentos do conteúdo,
navegações e interações no projeto.
Para demonstrar na prática estes estudos são desenvolvidos os wireframes, que
segundo Memória(2005) consistem em esboços de como serão dispostos os elementos na
interface sem aplicação de projeto visual, conforme Figura2. Como ferramenta para
desenvolvimento de um wireframe está o grid. Ele é um componente do design gráfico que
aplicado ao design de interface compõe a estrutura do posicionamento dos elementos
dentro de uma interface. Segundo Ambrose, Harris(2009), o grid não serve apenas como
uma grade rígida que deve ser seguida, mas como um guia de como devem se comportar
imagens, textos e demais elementos em uma página, bem como organização da hierarquia
da informação e focos de atenção.
26

27. Figura 2: Wireframe. Fonte: Garrett (2011)
Estruturado o conteúdo e as interações, são documentadas as ações de como a
navegação procederá, chamadas por Unger; Chandler (2009) de anotações. O wireframe
serve de documento que guiará a continuação projeto para a aplicação da identidade visual
da marca ou campanha, e demais envolvidos no desenvolvimento da aplicação (GARRETT,
2011).
2.4 Design Visual
Consiste na construção de elementos visuais que compõem 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, sinalização, imagens e identidade visual devem estar em comum
acordo para comunicar a interface do produto.
O design visual se desenvolveu a partir da ampliação da função e significação do
design gráfico dentro dos meios digitais. Como afirma Royo (2008), “o surgimento do meio
digital e da interatividade proporcionaram uma mudança substancial na linguagem visual
que utilizamos”. A base para o desenvolvimento do design visual é a construção da
identidade e de elementos visuais que comuniquem a experiência da marca, através do
tom, estrutura e estilo (COOPER, REIMANN, CRONIN, 2007).
8
Tradução do texto de Cooper, Reimann, Cronnin (2007, p. 288): “designers de interface visual são
preocupados em encontrar as representações mais adequadas para comunicar o comportamento específico
do produto interativo que estão projetando.”
27

28. 2.4.1 Identidade visual
Consiste na criação, identificação e posicionamento através do design em uma
instituição. A identidade visual vai além de uma proposta visual de logotipo ou de símbolo
que representa uma empresa, campanha ou produto. Como conta Wheeler(2008),
“enquanto as marcas falam de moto virtual para a mente e para o coração, a identidade da
marca é tangível e apela para os sentidos.” ADG (2003, p. 28) define:
O sinal de identificação de uma empresa ou instituição é a ponta de um iceberg. A
questão pode ser resumida em uma frase: designers gráficos não projetam logotipos
ou símbolos, projetam sistemas. E se até há pouco tempo identidade corporativa
significava sistemas de identidade visual, cada vez mais essa noção está sendo
superada pela de branding, ou planejamento estratégico. Não se trata mais apenas
de coordenar o conjunto de mensagens visuais de uma corporação, mas de planejar
estrategicamente a construção 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
comunicação, tanto dos projetos gráficos e de sinalização, quanto web sites e projetos
online. Segundo Royo (2008), no caso de peças muito distintas, de formatos distintos a
identidade visual serve de guia tanto para quem está produzindo quanto para o usuário.
(...) é extremamente importante que o designer entenda a linguagem visual que
está criando para determinado trabalho. Isso não apenas assegura a unidade da
experiência dos usuários entre as partes - guiando-os pelos níveis de mudanças
da informação -, mas possibilita flexibilidade na adequação da apresentação visual
de qualquer modificação. Ser capaz de controlar variações dentro do sistema
também evita que a experiência se torne monótona para o público. (SAMARA,
2010)
Em caso de sites institucionais, de comércio eletrônico e portais onde geralmente se
observa a identidade de uma instituição, transpor o conceito da empresa juntamente com a
linguagem digital é fundamental e faz com que a imagem da marca fique cada vez mais
forte.
2.4.2 Forma e espaço
O tema forma é extremamente abrangente. A concepção da forma é um meio de
comunicação, não verbal, que supre a necessidade do homem de dar sentido às coisas, a
forma nada mais é do que a é a configuração visível do conteúdo, seja ela impressa ou
digital. Conforme Samara (2010, p. 16) “a forma é o substrato: contornos, linhas, texturas,
palavras e imagens.” Como elementos conceituais, o ponto, a linha e o plano são a base da
composição de qualquer forma.
Segundo Dondis(1997) o ponto e a linha são os dois principais elementos, sendo
que o ponto é a base para originar outras formas, a linha como uma forma, e destaca três
28

29. formas básicas, figuras planas com variações infinitas: o quadrado, associado a
honestidade, o triângulo remete a ação, e o círculo a proteção. O plano é um ponto que se
tornou algo maior dentro de seu formato.
Contrapondo à forma, está o espaço que consiste no oposto, no fundo ou negativo
perante a figura. Como afirma Samara (2010, p. 16) “é impossível mudar um sem modificar
o outro.” A conjugação desses elementos leva à concepção da forma bi e tridimensional,
sendo assim que dão origem a qualquer forma, presentes com suas funções específicas,
respondendo a cada significado por quem a concebe (SAMARA, 2010).
2.4.3 Tipografia
Trata-se do estudo do processo de criação, composição, utilização e reprodução de
caracteres, geralmente associado a famílias9 de tipos onde são estabelecidos padrões de
estilo. Como comenta Newark(2009, p. 76) “a linguagem deve ser escrita com uma família
de tipos e essa, para ser usada, requer tipografia.” O surgimento da tipografia está
relacionada a descoberta da imprensa por Johannes Gutenberg, durante o século XV, onde
foi utilizado pela primeira vez os tipos móveis metálicos em série (FUENTES, 2009). Com a
inserção de computadores e softwares no trabalho do designer e do tipógrafo a utilização
da tipografia e criação de novas famílias aumentou ao longo dos últimos anos. Apesar da
grande variedade de famílias existentes atualmente, segundo Fuentes (2009), os tipos
denominados clássicos se sobressaem na grande maioria das vezes, como Times,
Helvetica, Garamond e outras.
No que diz respeito aos elementos que compõe a tipografia, a legibilidade deve
permear em qualquer projeto tipográfico. Devem ser levados em conta não só aspectos
estéticos e econômicos como também as questões técnicas, para melhor qualidade,
uniformidade e coerência do trabalho (ROCHA, 2005). “Entre as razões 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 informação” aponta
Fuentes (2009, p. 71). Entre as classificações de famílias tipográficas estão: tipos clássicos,
aplicada geralmente em textos corridos são aqueles“que não é percebida, que está
integrada visceralmente ao conteúdo e, portanto, não deveria chamar atenção para
si”(ROCHA, 2005, p. 52); e os tipos experimentais, que estão associadas ao estilo do
designer, sendo muitas vezes mais rebuscadas e com objetivo mais estético do que legível.
9
Família tipográfica: trata-se do conjunto de caracteres em que o estilo e características dos tipos são
semelhantes, possuindo características fundamentais independente das variações de suas hastes. (ADG ,
2003)
29

30. Segundo Kalbach (2009), a tipografia em interfaces digitais possui algumas
dificuldades quanto a qualidade, já que a resolução máxima que pode ser utilizada nos
computadores é de 85 pontos por polegadas (dpi). Além disso a leitura da interface
costuma ser rápida, portanto se a legibilidade não for tão favorável a compreensão poderá
ficar comprometida. Para Royo (2008) no meio digital a tipografia deve possuir legibilidade
e contraste, hierarquizar a informação e consistência na aparência e identidade do projeto.
2.4.4 Cor
Atualmente utiliza-se o uso de cores em meios de comunicação, seja ele impresso
ou digital, devido à facilidade de criação. Principalmente pela proliferação de softwares
gráficos acessíveis, utiliza-se grande parte de recursos visuais para criar uma nova
linguagem, possibilitando assim uma comunicação eficaz entre o sistema e o usuário. As
cores têm propriedades diferentes de acordo com a cultura onde são consideradas.
Segundo Kalbach (2009) o uso da cor é responsável por facilitar o aprendizado do usuário,
constituído de propriedades estéticas, associações simbólicas e informativas. Ainda
Segundo o autor o poder cognitivo da cor atrai e interage com as pessoas, podendo
acrescentar informações, associações simbólicas e estruturais sobre a interface observada.
A padronização de cores é peça importante para uma interface simples e de fácil acesso,
garantindo conforto ao usuário em questão perante o sistema.
As cores se caracterizam por quatro fatores, segundo Samara (2010): matiz, que
determina a identidade da cor; saturação, 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 experiências.
Os sistemas de cores utilizados para construção de materiais, digitais ou impressos
são classificados de duas formas (FUENTES, 2009): RGB e CYMK. O sistema RGB é o
padrão de cores, onde cada cor primária (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 impressão.
2.4.5 Imagem
As definições a cerca o termo imagem vão além da simples denotação de uma
representação da realidade e da sociedade. No ponto de vista da gestão do design, por
exemplo, imagem diz respeito a “maneira como o público percebe a empresa ou seus
30

31. produtos” (MARTINS; MERINO, 2008, p. 135). Santaella; Nöth(2008) conta que “o estudo
da imagem é, assim, um empreendimento interdisciplinar”, que pode ser observados por
diversas perspectivas como a semiótica, a cognição, psicologia, artes, etc. Como elemento
determinante para construção de um design, a imagem possibilita a transmissão de uma
mensagem com apoio ou não textual, atraindo o público. A conexão entre as imagens e as
experiências demonstradas é muito mais profunda que as palavras (CHINEN, 2009).
A imagem é um recurso de comunicação utilizado pelo homem desde a pré-história.
Segundo Fuentes(2009), desenhar/representar é uma atividade tão vital e primário quanto
às necessidades básicas do homem. Atualmente somos permeados por mensagens visuais
o tempo todo, e o uso delas por parte do design só faz reforçar as mensagens a serem
atribuídas no produto. Porém não só da representação que a imagem demonstra o sentido
necessário no projeto, é necessário 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,
ilustração e ícones.
A fotografia é a representação da realidade que revolucionou a arte. Conforme
Gombrich (apud Newark, 2009) “não houve necessidade de a pintura realizar uma tarefa
que um dispositivo mecânico poderia fazer melhor e a um bom preço”. Newark(2009, p. 92)
diz que “o grande salto no uso da fotografia por parte do design foi a montagem, que
intervém na imagem - cortando e adicionando cor e texto à fotografia.” Este é um dos
muitos recursos de manipulação que o design permite junto ao exercício da fotografia,
que a torna algumas vezes bastante subjetiva e pessoal.
Já a ilustração (junto com a pintura) por muito tempo foi a única forma de
representação da realidade, até a chegada da fotografia no início do século XIX. A partir de
então ela passou a ser utilizada como um modo pessoal de representação ou muitas vezes
mais esquemático, apresentando processos ou fatos não visíveis (FUENTES, 2009).
Ilustrações podem ser concretas, objetivas, realistas, ou até mesmo abstratas e simbólicas,
sendo estes últimos responsáveis por trazer um tom mais orgânico e emocional ao
trabalho, dependendo do traço aplicado.
O ícone, muitas vezes associado ao pictograma, é um signo visual que possui
semelhança ou equivalência na sua forma e/ou conceito do objeto representado (ADG,
2003). A origem dos ícones vem dos tradicionais signos orientais e também da escrita
hieroglífica egípcia (FUENTES, 2009). Utilizado em sistemas de sinalização tanto físico
quanto em online, o ícone por se tratar da síntese de uma informação (seja ela uma ação
ou objeto) contribuem segundo Kalbach (2009), para a clareza ao reforçar algum elemento
31

32. (geralmente texto); facilitam o aprendizado, entendimento e lembrança de elementos e
funcionalidades do projeto; e ocupam menos espaço que textos em casos de muita
informação na página.
É importante ressaltar que o uso de imagens, independente do tipo ou do formato,
não serve apenas para simples recurso estético, mas também para complementar as
informações adicionais da composição (NIELSEN; LORANGER, 2007). Kalbach (2009, p.
315) coloca que “um bom design visual pode guiar os visitantes através do site”.
2.4.6 Composição na comunicação visual
Trata-se do resultado da construção e organização de elementos visuais e textuais
numa peça, produto, ou sistema. Diz respeito a proporções, alinhamentos e hierarquias que
imagem e conteúdo devem obedecer para se obter equilíbrio entre as partes para favorecer
a clareza da mensagem. Através destes posicionamentos que se dará a forma como o
conteúdo será visualizado, afetando a reação emocional deste design (AMBROSE,
HARRIS, 2009).
Ter noção e verificar os detalhes das partes, sem deixar de perceber o todo é tarefa
do designer para elaborar uma peça eficaz (SAMARA, 2010). No caso de composições
visuais, principalmente para web, as partes compreendem conteúdo, tipografia (e
disposição das mesmas no espaço), imagens (fotografia, ilustração, ícones) e em alguns
casos peças audiovisuais.
2.5 Sistema e Tecnologia do Comércio Eletrônico
O desenvolvimento de um projeto de comércio eletrônico deve levar em
consideração os conceitos de sistema, sistemas de informação e segurança da informação.
Segundo Foina (2006) um sistema pode ser definido como um conjunto de elementos inter-
relacionados que interagem no desempenho de uma função. Assim, um sistema é uma
entidade composta de pelo menos dois elementos e uma relação 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.
Além disso, todo sistema possui vários elementos inter-relacionados que coletam
(entrada), manipulam e armazenam (processo), disseminam (saída) os dados e
informações e fornecem um mecanismo de feedback, conforme ilustrado na Figura 3
abaixo:
32

33. Figura 3. Fonte: elaboração própria.
No caso dos sistemas de informação, no qual se enquadra a ferramenta de comércio
eletrônico, o termo consiste, segundo Sêmola (2003), na expressão utilizada para
descrever um sistema automatizado ou manual, que envolve pessoas, máquinas, e
métodos para organizar, coletar, processar e distribuir dados para os usuários do sistema
envolvido. Um sistema de informação pode ser usado então para prover informação,
qualquer que seja o uso feito dessa informação.
Nos sistemas de informação, várias partes trabalham juntas visando um objetivo
comum. Esse objetivo é o fluxo mais confiável e menos burocrático das informações. As
principais vantagens são, como afirma Foina (2006):
- acesso rápido a informações;
- integridade e veracidade da informação;
- garantia de segurança de acesso a informação.
Em sistemas como o de comércio eletrônico, um dos fatores que torna a
possibilidade de compra mais efetiva, além da interface está na segurança que o sistema
apresenta. O conceito de segurança da informação se refere, conforme Sêmola (2003), à
proteção existente sobre as informações de uma determinada empresa ou pessoa, isto é,
aplica-se tanto as informações corporativas quanto às pessoais. Entende-se por informação
todo e qualquer conteúdo ou dado que tenha valor para alguma organização ou pessoa. Ela
pode estar guardada para uso restrito ou exposta ao público para consulta ou aquisição.
Segurança da informação é garantir que as informações estejam protegidas contra o
acesso por pessoas não autorizadas (confidencialidade), estejam sempre disponíveis
quando necessárias (disponibilidade), e que não tenham sido corrompidas ou adulteradas
(confiabilidade). A falta dela é uma das principais fontes de preocupação na hora de
comprar. Segundo Albertin (2006, p. 211) “alguns autores acreditam que os clientes são
relutantes em entregar a seus fornecedores os dados referentes a suas informações
33

34. demográficas, padrões de compras e necessidades de produtos”. Para tal é importante
ressaltar na interface não apenas as informações necessárias para a compra, mas também
dar confiabilidade através do sistema para que a experiência não seja comprometida.
2.5.1 Tecnologia
Após a conceituação de sistemas e da interface, para que o sistema se torne
realidade é necessário também os conhecimentos sobre a viabilidade deste projeto e como
ele será construído. Para tanto é importante que se tenha conhecimentos sobre as
tecnologias envolvidas para o desenvolvimento do projeto. Conforme Kalbach (2009, p.
202), “você pode não ser um programador, nem aspirar tornar-se um. Mesmo assim, é
critico entender as capacidades e limitações básicas das tecnologia web.” Segundo o autor
existem 3 níveis de tecnologia no desenvolvimento de um projeto online: plataforma,
tecnologias de back-end e tecnologias de front-end.
Plataforma consiste nos dispositivos onde as informações serão adaptadas e
visualizadas (KALBACH, 2009). Nesta etapa entram limitações e possibilidades em
ambientes como dispositivos móveis como celulares, smartphones, tablets, e-books etc., e
também 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 são estruturadas
as tecnologias de banco de dados, segurança, usuários e gerenciamento de conteúdo,
armazenando todas as informações gerenciáveis ou não do projeto.
Já as tecnologias de front-end tratam dos códigos que tornaram visíveis as
informações na tela do usuário. Neste nível 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 são a base das linguagens de programação para a interface web (ADG, 2003).
Dentre as demais utilizadas estão o Flash10, CSS11, JavaScript12 e outros.
A qualidade nesta etapa influencia na visualização dos resultados obtidos através da
construção da interface pela equipe de design (UNGER, CHANDLER, 2009).
10
Flash: software de desenvolvimento de animações gráficas, da empresa Adobe.
11
CSS: Cascading Style Sheets trata-se da linguagem de programação responsável por guardar as
informações de estilo de um web site (fontes, cores, diagramação, alinhamentos, etc.).
12
JavaScript: linguagem de programação que possibilita funções interativas e animações, através de
inclusão com o código HTML.
34

35. 3 METODOLOGIA
3.1 Método de Pesquisa
O método de pesquisa consiste em uma atividade racional e sistemática de
levantamento de informações através de um processo devidamente planejado para
alcançar um objetivo (GIL, 1991). Para a concepção deste trabalho optou-se pelo estudo de
caso como estratégia de pesquisa. Segundo Yin(2001, p.32): “o estudo de caso é uma
investigação empírica que investiga um fenômeno contemporâneo dentro de seu contexto
da vida real, especialmente quando os limites entre o fenômeno e o contexto não estão
claramente definidos.” A opção por este tipo de investigação se dá pelas informações de
usuários e mercado, necessárias para a construção do projeto, além do referencial teórico
presente neste trabalho. Para a coleta de dados sobre o público e a interface pretendida
será feito uso também de abordagens qualitativas e quantitativas. Através dos objetivos
específicos foram delimitadas as ferramentas (Quadro 1) para coleta de dados a fim de
atingir a finalidade proposta.
Objetivos específicos Ferramentas Aplicadas
Levantar as necessidades dos usuários no Aplicação de pesquisa qualitativa com os
processo de uma compra de roupas, usuários e avaliação dos dados quantitativos
através de análise de comportamentos e da Pesquisa Sobre o Uso das Tecnologias
expectativas do usuário frente a interface; da Informação e da Comunicação no Brasil
– 2009, publicado pelo Comitê Gestor da
Internet no Brasil - CGI.br.
Levantar os requisitos fundamentais para o Levantamento de dados através de
desenvolvimento de um projeto que envolva desenvolvimento de referencial teórico;
experiências emocionais favoráveis; Análises de web sites de comércio eletrônico
e de busca no segmento de vestuário,
através da metodologia projetual de Gui
Bonsiepe (1984). Aplicação de teste de
personalidade de produto, segundo Linden
(2007).
Os dados levantados, serão utilizados para Desenvolvimento da interface através da
criar uma interface que atenda aos metodologia projetual de Bonsiepe (1984) e
requisitos mínimos de usabilidade e que ferramentas dos autores James Kalbach
seja compatível com a identidade visual da (2009), Russ Unger e Carolyn Chandler
marca em questão. (2009) e Javier Royo (2008).
Quadro 1 – Objetivos específicos do projeto e ferramentas aplicadas.
Fonte: elaborado própria.
35

36. 3.2 Método Projetual
O método projetual consiste na utilização de etapas para desenvolvimento de um
projeto. Neste trabalho foi escolhida a metodologia de Gui Bonsiepe (1984) por abordar as
análises necessárias para este projeto e ser flexível para a utilização de ferramentas
específicas 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 interação e Javier Royo (2008) para design visual. Segundo Bonsiepe (1984) “receitas
de bolo levam com certeza a um determinado resultado; técnicas projetuais só têm certa
„probabilidade de sucesso‟”. A partir dessa colocação, sua metodologia serve para guia de
desenvolvimento de projeto, sendo flexível dependendo da necessidade do mesmo. O
projeto tem como estrutura de processos 5 grandes partes: problematização; análise;
definição do problema; anteprojeto/geração de alternativas; e projeto. A seguir a tabela
mostra sobre como será abordada as etapas e procedimentos metodológicos para a
construção deste projeto.
Etapas Objetivo/Definição Procedimentos Metodológicos
1. Problematização Neste processo são definidos Análise de literatura;
quais os problemas que o
projeto enfrenta, objetivos e
critérios para a resolução do
problema.
2. Análises
2.1. Lista de É utilizado para determinar Análise do web site da
Verificação todos os dados do produto campanha Stella McCartney
envolvido, para detectar o para C&A e Lojas Renner
problema e evitar deficiências (KALBACH, 2009);
de informações para o
desenvolvimento do projeto.
2.2. Análise Diacrônica Trata-se da busca por Análise da identidade visual de
informações referentes ao materiais impressos que
histórico do produto, para efetuam venda por catálogo:
detectar a evolução e qual o Hermes e Avon;
caminho percorrido ao longo do
seu tempo de vida.
36

37. Etapas Objetivo/Definição Procedimentos Metodológicos
2.3. Análise Sincrônica Consiste no resultado de Análise dos web sites das lojas
buscas com relação aos Renner, Zara e o buscador
concorrentes sejam eles diretos Boutiques.com (KALBACH,
ou indiretos do produto. 2009). Avaliação dos
resultados do Teste de
Personalidade de Produto
aplicados nestes projetos
(LINDEN, 2007);
2.4. Análise Estrutural Confere a análise dos Análise do web site Stella
elementos que podem compor McCartney para C&A e lojas
o projeto. Compreende a Renner (UNGER, CHANDLER,
organização e a descrição dos 2009; ROYO, 2008);
componentes presentes no
projeto.
2.5. Análise Funcional Serve para a coleta de Análise do web site Stella
informações de como serão as McCartney para C&A e lojas
características do produto, Renner (UNGER, CHANDLER,
tanto os aspectos ergonômicos 2009; ROYO, 2008);
quanto das funções técnico-
físicas dos componentes e
comportamentos do mesmo.
2.6. Análise Consiste no reconhecimento e Análise do web site Stella
Morfológica compreensão da composição McCartney para C&A e lojas
do produto, bem como detalhes Renner;
de sua forma e superfícies.
2.7. Análise de público Trata da análise dos públicos Avaliação de pesquisa
alvo no qual o produto quer atingir. qualitativa e da pesquisa
quantitativa segundo o Comitê
Gestor da Internet no Brasil -
CGI.br (2009);
3. Definição do Etapa onde são definidos os
Problema requisitos e definidos os pontos
a serem resolvidos no projeto.
3.1. Lista de Requisitos 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 construção e não limitação
do mesmo.
37

38. Etapas Objetivo/Definição Procedimentos Metodológicos
3.2. Hierarquização de Este por sua vez determina as Construção do mapa do site e
Requisitos prioridades quanto ao tempo e do descritivo do projeto
atendimento do projeto. A (UNGER, CHANDLER, 2009);
interação dos fatores pode ser
separada por interações
positivas, neutras ou negativas,
em forma de matrizes.
4. Anteprojeto/Geração Nesta etapa que são geradas e
de Alternativas pensadas as possíveis solução
para o problema projetual,
sendo elas começadas de
maneira básica e logo depois
aperfeiçoadas para
desenvolvimento de protótipos.
4.1. Conceito Consiste em definir qual será a
principal abordagem e conceito
do projeto, que nortearão os
esboços junto ao descritivo do
web site.
4.2. Projeto de Desenvolvimento da estrutura e Esboços e desenhos do
interface organização da interface, bem conceito de navegação e
como a navegação do projeto, wireframe (UNGER,
aplicando os conceitos de CHANDLER, 2009);
design de interação.
4.2. Design Visual Criação de identidade visual a Aplicação de identidade visual
partir dos wireframes (ROYO, 2008);
desenvolvidos na fase anterior.
5. Projeto Definição da identidade visual e
apresentação final da proposta.
38

39. 4 Aplicação do Método Projetual
4.1 Problematização
A partir dos estudos desenvolvidos sobre design de interação e visual, bem como
estudos de moda e comércio eletrônico, este trabalho se presta a construção da interface
de um web site de comércio eletrônico da rede de lojas de vestuário C&A. O projeto
pretende desenvolver a partir da interface uma experiência satisfatória na compra de
roupas no ambiente online.
4.2 Análises
Para a construção deste projeto serão analisados 3 web sites de empresas
concorrentes, diretas e indiretas, da marca em questão: lojas Renner13, a segunda maior
rede de lojas de departamentos de vestuário no Brasil, concorrente da C&A; a marca
espanhola Zara14, uma das maiores redes de vestuário no mundo, sendo uma das
primeiras a aplicar o conceito de varejo fast fashion como estratégia de venda (DELGADO,
2008); e o site de busca do Google destinado ao segmento de comércio eletrônico de
roupas, Boutiques.com15.
Além dos estudos destes 3 projetos, será analisado também o web site Stella
McCartney para C&A, projeto de lançamento e venda dos produtos da estilista no portal da
marca, e o usuário que será atendido pela proposta, para a construção do resultado que os
atenda.
4.2.1 Lista de Verificação
Para organização e estruturação dos dados que serão analisados, o trabalho fará
uso de uma lista de verificação do projeto para definir o problema e apontar idéias para
possíveis alternativas e soluções. No caso de um projeto de interface digital, serão
considerados os itens levantados requisitos a cerca do design de interação e design visual
nos projetos que serão verificados ao longo da etapa de análises: site das Lojas Renner e
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 comercialização online dos produtos da marca C&A para a campanha de
13
Disponível em: http://www.lojasrenner.com.br;
14
Disponível em: http://www.zara.com;
15
Disponível em: http://www.boutiques.com;
16
Disponível em: http://www.stellamccartneycea.com.br;
39

40. lançamento da coleção da estilista Stella McCartney. Estes projetos servirão de estudo para
as demais análises deste projeto.
4.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 aplicação da lista de verificação
resultou nos seguintes aspectos:
a) O objetivo principal do ambiente online da marca é a venda dos produtos de
vestuário, divididos em marcas, segmentos e categorias de peças;
b) Tanto na página inicial quanto nas páginas de categorias os produtos são listados
em um grid de 5 colunas e paginação com até 12 itens;
c) No topo das páginas, existe um componente de busca de produtos, além da
indicação e sinalização de status de compra e de cadastro à direita;
d) A página inicial possui um destaque com até 5 banners, e destaques sobre formas
de pagamentos e vantagens para favorecer a aquisição do produto (troca, frete
grátis, etc.);
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 navegação: a global, junto ao topo, dividida entre os
segmentos onde a marca atua, com subdivisões entre categorias de produtos e
marcas dentro da rede; e uma navegação lateral com as marcas divididas por
40

41. segmentação. Quando se trata das páginas internas, a navegação lateral funciona
como filtro, com a listagem de categorias de produtos, faixas de preço, cores,
tamanhos e outras opções de escolha. Logo abaixo da navegação lateral existem
5 destaques para demais campanhas ou promoções da marca, sendo uma delas
com destaque para opção de troca fácil do produto;
g) Outra navegação utilizada no web site é por Tags, que são palavras chave
utilizadas nos produtos e reunidas em uma listagem com maior relevância para as
mais citadas;
h) Em cada item dos produtos listados, possui uma foto do produto, titulo da peça,
marca que ele pertence, valor do produto, condições de parcelamento via cartão
Renner ou outros cartões, cores disponíveis, e um link para produtos similares ao
visualizado. Em alguns casos, os produtos possuem uma sinalização quando
estão na promoção ou pertencem a uma marca em especifico (como o caso da
linha Maternity);
i) O rodapé da página possui um descritivo sobre as formas de pagamento, serviços
financeiros (à direita), e demais dados sobre parceiros e certificações. A área
possui também um cadastro para newsletter, e link para as redes sociais;
j) Abaixo do rodapé existe também uma navegação inferior com links para a área
institucional da empresa;
k) Na página de detalhe do produto, o topo e o rodapé do web site se mantém,
sendo visualizados: a foto do produto em um componente com possibilidade de
ampliação da imagem e galeria para mais vistas do produto; descritivos sobre o
produto com titulo, valor, quantidade, tamanho, cores disponíveis, condições de
parcelamento, descrição da peça, informações técnicas e compartilhamento pelas
redes sociais. Ainda nesta página são visualizados os produtos relacionados
oferecendo mais opções ao usuário;
l) Quanto à composição 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,
do mais claro para fundos de elementos ao mais escuro para textos ou campos de
texto;
m)As fotos dos produtos são mais técnicas e limpas para demonstrar apenas a peça
e seus detalhes;
n) Os elementos gráficos, tanto do logo quanto do menu, remetem a costura e ao
detalhe de um acessório, presentes no ambiente da marca;
41