Curso de Design           Gabriela Guedes de Oliveira VargasPROPOSTA DE DESIGN PARA COMÉRCIO ELETRÔNICO DA LOJA DE        ...
GABRIELA GUEDES DE OLIVEIRA VARGASPROPOSTA DE DESIGN PARA COMÉRCIO ELETRÔNICO DA LOJA DE                     VESTUÁRIO C&A...
PROPOSTA DE DESIGN PARA COMÉRCIO ELETRÔNICO DA LOJA DE                        VESTUÁRIO C&A Trabalho apresentado e aprovad...
Dedico este trabalho às três maiores inspirações daminha vida: minha mãe e meu anjo da guarda, donaMari Ione (in memorian)...
AgradecimentosGostaria de agradecer, primeiro a Deus, por todas as experiências e oportunidades queme deu ao prazer de pas...
RESUMOEste trabalho consiste no desenvolvimento de uma proposta de comércio eletrônico paraa loja de vestuário C&A. Reunin...
ABSTRACTThis work is a proposal for e-commerce clothing store C & A. Which studies the interactiondesign and visual design...
SUMÁRIO1 INTRODUÇÃO .........................................................................................................
4.3.1 Lista de Requisitos ...................................................................................................
1 INTRODUÇÃO       O crescimento e revolução da internet levou muitas marcas, nos últimos, a sequestionarem quanto ao modo...
O relacionamento do usuário com produto no momento da compra online pode serconsiderado como superficial sob o ponto de vi...
aspectos levaram ao conhecimento e questionamento quanto ao posicionamento da modadentro do ambiente digital.       Partin...
2 REFERENCIAL TEÓRICO2.1 Moda       Palavra originaria do latim modus, moda significa “maneira, modo individual de fazer,o...
alta-costura; consumido por pessoas famosas e formadores de opinião; e por fim,reproduzido por marcas menores e mercados m...
internet, televisão, jornais, revistas, publicidade e etc., o consumidor recebe todos os diasofertas dos mais variados tip...
b) Múltiplas: São cadeias de lojas distribuídas em vários lugares que particularmente        vende um ou algumas categoria...
como buscar e comparar produtos, etc. Ainda como característica deste tipo de sistema devenda online está a vinculação de ...
Brasil. Entre os outros pontos no qual a empresa se preocupa, está também o compromissocom a sustentabilidade, onde em 200...
Qualidade perante o mercado passou a ser um pressuposto, enquanto novos                         diferencias são exigidos a...
“É como se, ao nos referirmos à internet, pensássemos na metáfora de um grande                        livro mundial e todo...
Ou seja, a interface era criada apenas pela experiência dos mesmos para uso próprio. Foicom o nascimento dos monitores e c...
interações humanas com o sistema, levando em conta a fácil compreensão, interpretaçãoe uso do produto. E por fim a ergonom...
Cybis(2007, p. 325) afirma: “resultam do julgamento de uma experiência direta com umobjeto ou evento e uma conseqüente gen...
Nestes casos, o estudo sobre o usuário é fundamental para que o sistema atenda asmetas de usabilidade apontadas por Preece...
responsável por criar mapas de sites detalhados e analisar a distinção de categorias esubcategorias de informação para tor...
A documentação e entrega do resultado destas pesquisas se dá através do mapa dosite e fluxo de tarefa, onde ficam visíveis...
Figura 2: Wireframe. Fonte: Garrett (2011)         Estruturado o conteúdo e as interações, são documentadas as ações de co...
2.4.1 Identidade visual         Consiste na criação, identificação e posicionamento através do design em umainstituição. A...
formas básicas, figuras planas com variações infinitas: o quadrado, associado ahonestidade, o triângulo remete a ação, e o...
Segundo Kalbach (2009), a tipografia em interfaces digitais possui algumasdificuldades quanto a qualidade, já que a resolu...
produtos” (MARTINS; MERINO, 2008, p. 135). Santaella; Nöth(2008) conta que “o estudoda imagem é, assim, um empreendimento ...
(geralmente texto); facilitam o aprendizado, entendimento e lembrança de elementos efuncionalidades do projeto; e ocupam m...
Figura 3. Fonte: elaboração própria.        No caso dos sistemas de informação, no qual se enquadra a ferramenta de comérc...
demográficas, padrões de compras e necessidades de produtos”. Para tal é importanteressaltar na interface não apenas as in...
3 METODOLOGIA3.1 Método de Pesquisa       O método de pesquisa consiste em uma atividade racional e sistemática delevantam...
3.2 Método Projetual      O método projetual consiste na utilização de etapas para desenvolvimento de umprojeto. Neste tra...
Etapas                     Objetivo/Definição                 Procedimentos Metodológicos2.3. Análise Sincrônica    Consis...
Etapas                   Objetivo/Definição                 Procedimentos Metodológicos3.2. Hierarquização de   Este por s...
4 Aplicação do Método Projetual4.1 Problematização       A partir dos estudos desenvolvidos sobre design de interação e vi...
lançamento da coleção da estilista Stella McCartney. Estes projetos servirão de estudo paraas demais análises deste projet...
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC
Upcoming SlideShare
Loading in …5
×

Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC

4,306 views

Published on

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

Published in: Design

Proposta de design para comércio eletrônico da loja de vestuário C&A - TCC

  1. 1. Curso de Design Gabriela Guedes de Oliveira VargasPROPOSTA DE DESIGN PARA COMÉRCIO ELETRÔNICO DA LOJA DE VESTUÁRIO C&A Caxias do Sul 2011 1
  2. 2. GABRIELA GUEDES DE OLIVEIRA VARGASPROPOSTA 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. 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. 4. Dedico este trabalho às três maiores inspirações daminha vida: minha mãe e meu anjo da guarda, donaMari Ione (in memorian), meu pai e meu herói, seuNei; e meu irmão e meu menino, João Paulo. 4
  5. 5. AgradecimentosGostaria de agradecer, primeiro a Deus, por todas as experiências e oportunidades queme deu ao prazer de passar sejam elas boas ou ruins. Agradeço também a minha famíliapelo apoio e por acreditar no meu potencial, principalmente ao meu pai/herói, meuanjo/mãe, e meu bebê/irmão que incansavelmente me motivaram a querer, crescer econtinuar no design. Também aos meus avós, tios e primos pelo carinho, em especialminha tia Lucila que assim como com minha mãe me deram a oportunidade de aprender adesenhar 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 omeu sonho de trabalhar com design e internet desde o início da faculdade, e que meensinaram e mostraram esse mundo na prática me dando base profissional para construiresse trabalho. Aos meninos da antiga DN2, à equipe da Aldeia, e a turma da Fábrica doDesign 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 cadamomento desde o inicio de todas as aulas e mesmo aqueles que conheci no decorrerdelas. A todos os professores um muito obrigado. Aos meus colegas Diego Kuse, LiangeAraujo, Veridiana Moreira, Rafael Reis, Maura Borges, Alexssander Cusin, Mano Neto,Keli Scopel, Ricardo Fedrizzi, Rudinei dos Santos, Ricardo Coleoni e tantos outros quedeixariam esta página enorme, obrigado a todos pelo enorme carinho. À minha queridaorientadora, Lucimara, que me agüentou durante os últimos meses e junto comigoacreditou 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. 6. RESUMOEste trabalho consiste no desenvolvimento de uma proposta de comércio eletrônico paraa loja de vestuário C&A. Reunindo estudos de design de interação e design visual, otrabalho em questão pretende propor uma experiência favorável de compra de roupaspela internet. Por meio da metodologia projetual de Gui Bonsiepe (1984) diretrizes dedemais autores reconhecidos na área, foram desenvolvidas análises, onde os resultadosobtidos foram utilizados para o desenvolvimento de uma interface que atende osprincípios técnicos, estéticos, funcionais e emocionais que cercam o projeto.Palavras-chave: design digital, comércio eletrônico, moda. 6
  7. 7. ABSTRACTThis work is a proposal for e-commerce clothing store C & A. Which studies the interactiondesign and visual design, the work in question intends to propose a favorable experienceof buying clothes online. By design methodology Gui Bonsiepe (1984) guidelines for otherrenowned authors in the area were developed analysis, where the results were used todevelop an interface that meets the technical principles, aesthetic, functional andemotional surrounding project.Keywords: digital design, e-commerce, fashion. 7
  8. 8. SUMÁRIO1 INTRODUÇÃO .............................................................................................................. 102 REFERENCIAL TEÓRICO ............................................................................................ 132.1 MODA.......................................................................................................................... 132.1.1 Mercado............................................................................................................................... 142.1.1.1 Comércio Eletrônico............................................................................................................................ 162.1.2 Empresa C&A ...................................................................................................................... 172.2 DESIGN....................................................................................................................... 182.2.1 Aplicações no design Comércio Eletrônico .......................................................................... 192.3 DESIGN DE INTERAÇÃO ........................................................................................... 202.3.1 Ergonomia ........................................................................................................................... 212.3.2 Ergonomia Cognitiva............................................................................................................ 222.3.3 Usabilidade .......................................................................................................................... 232.3.4 Design Emocional ................................................................................................................ 242.3.5 Arquitetura de Informação.................................................................................................... 242.3.6 Design de Interface .............................................................................................................. 262.4 DESIGN VISUAL ......................................................................................................... 272.4.1 Identidade visual .................................................................................................................. 282.4.2 Forma e espaço ................................................................................................................... 282.4.3 Tipografia............................................................................................................................. 292.4.4 Cor....................................................................................................................................... 302.4.5 Imagem................................................................................................................................ 302.4.6 Composição na comunicação visual .................................................................................... 322.5 SISTEMA E TECNOLOGIA DO COMÉRCIO ELETRÔNICO...................................... 322.5.1 Tecnologia ........................................................................................................................... 343 METODOLOGIA ........................................................................................................... 353.1 MÉTODO DE PESQUISA ........................................................................................... 353.2 MÉTODO PROJETUAL ............................................................................................... 364 APLICAÇÃO DO MÉTODO PROJETUAL .................................................................... 394.1 PROBLEMATIZAÇÃO ................................................................................................. 394.2 ANÁLISES ................................................................................................................... 394.2.1 Lista de Verificação.............................................................................................................. 394.2.1.1 Lojas Renner ....................................................................................................................................... 404.2.1.2 Campanha Stella McCartney para C&A ............................................................................................. 424.2.2 Análise Diacrônica ............................................................................................................... 434.2.3 Análise Sincrônica ............................................................................................................... 474.2.3.1 Lojas Renner ....................................................................................................................................... 474.2.3.2 Lojas Zara ........................................................................................................................................... 484.2.3.3 Boutiques.com .................................................................................................................................... 494.2.3.4 Teste de Personalidade do Produto ................................................................................................... 504.2.4 Análise Estrutural................................................................................................................. 554.2.5 Análise Funcional ................................................................................................................ 604.2.6 Análise Morfológica.............................................................................................................. 624.2.6.1 Lojas Renner ....................................................................................................................................... 624.2.6.2 Campanha Stella McCartney para C&A ............................................................................................. 654.2.7 Análise de público alvo ........................................................................................................ 674.3 DEFINIÇÃO DO PROBLEMA ...................................................................................... 70 8
  9. 9. 4.3.1 Lista de Requisitos .............................................................................................................. 714.3.2 Hierarquização de Requisitos .............................................................................................. 714.3.2.1 Loja Virtual .......................................................................................................................................... 734.4 ANTEPROJETO/GERAÇÃO DE ALTERNATIVAS ..................................................... 754.4.1 Conceito .............................................................................................................................. 754.4.2 Esboços ............................................................................................................................... 764.4.2.1 Projeto de interface ............................................................................................................................. 774.4.2.2 Design visual ....................................................................................................................................... 804.5 PROJETO ................................................................................................................... 825 CONSIDERAÇÕES FINAIS .......................................................................................... 876 REFERÊNCIAS BIBLIOGRÁFICAS ............................................................................. 887 ANEXO A – PESQUISA SOBRE O USO DAS TECNOLOGIAS DA INFORMAÇÃO EDA COMUNICAÇÃO NO BRASIL 2009 ........................................................................... 928 APÊNDICE A - TESTE DE PERSONALIDADE DO PRODUTO – BOUTIQUES.COM /ZARA / LOJAS RENNER ................................................................................................ 1019 APÊNDICE B – GRÁFICO DO TESTE DE PERSONALIDADE DO PRODUTO –LOJAS RENNER ............................................................................................................. 10510 APÊNDICE C - GRÁFICO DO TESTE DE PERSONALIDADE DO PRODUTO –LOJAS ZARA .................................................................................................................. 10611 APÊNDICE D - GRÁFICO DO TESTE DE PERSONALIDADE DO PRODUTO –BOUTIQUES.COM .......................................................................................................... 10712 APÊNDICE E – FLUXO DE TAREFA DE COMPRA ONLINE .................................... 10813 APÊNDICE F – MAPA DO SITE LOJAS RENNER .................................................... 10914 APÊNDICE G – MAPA DO SITE STELLA MCCARTNEY PARA C&A ...................... 11015 APÊNDICE H – MAPA DO SITE COMÉRCIO ELETRÔNICO C&A ........................... 11116 APÊNDICE I – RESULTADOS DE TESTE DE PERSONALIDADE DO PRODUTO .. 112 9
  10. 10. 1 INTRODUÇÃO O crescimento e revolução da internet levou muitas marcas, nos últimos, a sequestionarem quanto ao modo de como comunicar e vender seus produtos aosconsumidores. No ambiente atual em que o mercado de comércio eletrônico cresceconsideravelmente devido aos avanços na oferta e segurança de compra, para vender nãobasta apenas oferecer, e sim conquistar. É esse o ponto em que o mercado de varejo demoda online1 está avançando cada vez mais. Segundo Callegari(2011), o mercado devestuário e acessórios avançou da 20.ª posição em 2006 para 6.ª em 2010, com 5% dafatia de R$ 14,8 bilhões faturados por venda online no ano de 2010. Mesmo com umcenário econômico favorável, com o volume de informação e as novas tecnologias e mídiasoferecidas, 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 modadepende da forma como uma pessoa seleciona, organiza e interpreta as informaçõesrecebidas para criar uma imagem significativa do mundo em que vive”. Afinal, é por causadesta 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, necessitade comunicação para venda de seus produtos e tendências. Para tanto não pode deixarde se comunicar através da internet. Principalmente na velocidade com que própriosegmento lança novas peças. É neste ponto que o design se propõe a criar experiências satisfatórias noambiente de comércio eletrônico de peças de vestuário, sendo uma ferramenta de ligaçãoentre a moda e a internet. A interface2 de comércio eletrônico, objeto de estudo destetrabalho, 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 constroemexperiências mais ricas aumentando a relação entre clientes e usuários (DUBBERLY,EVENSON, 2008). Para isso é necessário que aspectos como comunicação, identidadevisual, navegação, interação e usabilidade sejam considerados no projeto, garantindoassim que o uso da interface seja efetivo e que esta experiência resulte em um processode compra que traga satisfação ao usuário. No entanto, este trabalho tem como hipótese inicial o fato de que a situação atualde 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 ambientevirtual 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. 11. O relacionamento do usuário com produto no momento da compra online pode serconsiderado 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 umaloja física. Na compra digital, por exemplo, existem possibilidades limitadas devisualização e de compartilhamento experiências entre vendedor e usuário. Ao mesmotempo, perde-se a exploração de elementos táteis e olfativos, além de que o usuárioprecisa escolher sem vivenciar o produto em seu próprio corpo. Esses são fatoresrestritivos do comércio eletrônico de roupas, mas que tornam-se fatores desafiadores aoDesign. Assim, parte-se também da hipótese de que um sistema de comunicação digitaldesenvolvido por meio de princípios do Design pode melhorar a experiência de compravia internet para artigos de vestuário. Ao mesmo tempo, o compartilhamento daexperiência de compra através de redes sociais pode estimular a comprar e auxiliar adivulgação da marca. A partir deste contexto, a rede de lojas de vestuário C&A é o foco de análise destetrabalho, em virtude de algumas dificuldades encontradas no seu ambiente online decomércio eletrônico. Esta marca foi escolhida como objeto de um estudo de caso porqueatualmente seu web site possui ferramenta de venda apenas para campanhas específicasda marca, bem como apresenta problemas técnicos como uma navegação lenta. Assimessa experiência pode se tornar um pouco frustrante para o usuário que busca comprarmais produtos da marca. A C&A, uma das maiores redes de moda do país, atua no segmento de fastfashion. Este segmento se caracteriza por lançamentos de coleção de vestuário maisfreqüentes e mais curtas ao longo do ano, contrariando o sistema semestral das coleçõesda 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 osusuários no ambiente online, fortalecendo o relacionamento com seus consumidores. Para construção deste projeto, a pesquisadora alia seus conhecimentos evivências em eventos de moda (Donna Fashion Iguatemi e São Paulo Fashion Week 2010e 2011) e desenvolvimento de projetos digitais para clientes de marcas como MalhariaAnselmi e Colcci. Além disso, ela obteve contato com a construção de confecções depequeno/médio porte através da marca pertencente a sua mãe na infância. Estes3 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. 12. aspectos levaram ao conhecimento e questionamento quanto ao posicionamento da modadentro do ambiente digital. Partindo deste cenário, este trabalho se propõe a levantar informações a cerca dosconteúdos de design de interação e design visual, além de estudos sobre mercado demoda e comércio eletrônico, para a construção deste projeto. Como objetivo geral, está odesenvolvimento 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 linhade pesquisa delimitada em Expressão Visual. Possui 4 capítulos, sendo que o primeiroabordara o referencial teórico contextualizando o projeto, dividido entre os estudos demoda, comércio eletrônico, design de interação e design gráfico. O segundo capítulocontempla os métodos de pesquisa e de projeto aplicados, sendo que o terceiro abordará odesenvolvimento e construção do projeto. E por fim as considerações finais sobre oresultado e solução apresentada, sendo acompanhada posteriormente das referênciasbibliográficas deste trabalho. 12
  13. 13. 2 REFERENCIAL TEÓRICO2.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 oconceito de moda começa aparecer além da indumentária. Miranda(2008, p.54) diz que “ovestir 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 deabrigo confortável”. As roupas, os acessórios, os sapatos são alguns dos muitos elementos quecompõ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 evestir-se, mesmo que seja com uma camiseta e um jeans, você está fazendo um manifestode moda.” Por estar em constante movimento, muitas vezes ela é considerada superficial eefêmera. Porém é uma indústria que movimenta milhões todo o ano e empregos nos maisdiversos 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 ecem milhões de dólares (ABIT, 2010), mesmo após a crise enfrentada nos últimos anos. Nomercado 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 aqueda no decorrer das coleções e tendências. Este ciclo passa por 5 fases, segundoTreptow (2003): lançamento, consenso, consumo, massificação e desgaste. Nestemovimento, o lançamento consiste no surgimento de uma proposta de estilo, seja ela vindade um estilista, grupo de pessoas, novelas, filmes, etc. Após o lançamento, é necessária aaceitação desta linha de produtos por um grupo de consumidores, geralmente pessoas comalto valor aquisitivo, consumido por este e distribuído para a massa através de lojas dedepartamento, shoppings, etc. Neste movimento existem dois efeitos definidos por Jones (2005) que compõem osurgimento da moda. O primeiro denominado efeito trickle-down4, surge quando o ciclo demoda começa pelo lançamento de um estilo por uma celebridade ou de uma coleção da4Efeito trickle-down, definido como efeito “desaguamento” (JONES, 2005). 13
  14. 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á osegundo, 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 viratendê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 devanguarda e dura por um curto período, sendo o seu fim determinado pela massificaçãodos artigos de moda compostos por ela. É quando a tendência passa a ser padrão devestir. Já o estilo, conforme Garcia(apud TREPTOW, 2003, p.31) é “a capacidade de filtraras tendências e transformá-las, produzindo novas propostas que manifestamcaracterísticas pessoais”. A construção das coleções, produção e comercialização dos produtos de modaacontecem em dois formatos: pela alta-costura ou pelo prét-à-porter. Do mais alto valoraquisitivo 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 devestuário (PALOMINO, 2003). Estes produtos são de altíssimo custo, consumidoprincipalmente por celebridades, ricos e pessoas da alta nobreza. É nesse ambiente quemarcas 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 maissofisticada, até as mais populares. Segundo Treptow(2003), neste movimento as peças sãoproduzidas em escala industrial, sejam elas em número reduzido, mais exclusivo, ou emmaior número para grande parte da população.2.1.1 Mercado Atualmente, Estados Unidos e União Européia dividem grande parte do mercadomundial 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 comoprincipais atuantes os estilistas, designers e varejistas. E também pelo seu principal alvo, ousuário. Não só da industria têxtil e de vestuário vive a moda, a comunicação atuajuntamente com essas duas partes do bolo para conquistar o consumidor. Através da5Efeito bubble-updenominado também efeito “borbulha” (JONES, 2005). 14
  15. 15. internet, televisão, jornais, revistas, publicidade e etc., o consumidor recebe todos os diasofertas 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 parafacilitar a produção e design das peças em confecções, e escolha dos preços. No que dizrespeito aos setores, a segmentação ocorre geralmente entre moda feminina, modamasculina e moda infantil, porém como afirma o autor, com os avanços tecnológicos emudanças de cultura a fragmentação de setores tende a aumentar cada vez mais paraatender os consumidores. Segundo Feghali(2006) a segmentação é dividida em: modafeminina; moda masculina; adolescentes-jovens; mercado bebê-infantil-juvenil; jeans;lingerie-underwear; fitness-sportswear; moda praia; uniformes escolares, profissionais eespeciais; meias; e cama, mesa e banho. “A segmentação de mercado é uma dasferramentas mais utilizadas em marketing com o objetivo de conquistar mercadosespecíficos e fincar bandeiras nestes” (COBRA, 2007). Quanto o assunto é vendas o mercado se divide em dois tipos, segundoTreptow(2003): por atacado e varejo. No atacado as compras são feitas por pedidos, ondeas coleções são apresentadas através de mostruário completo, produzidas as peças eentregues conforme solicitação; ou sistema de pronta-entrega, em que as vendas sãorealizadas 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çãodos ateliers, onde a confecção é sob medida (TREPTOW, 2003). A diferença do varejo parao 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 osprodutos são comercializados para o consumidor, em lojas, feiras com venda direta a estepúblico, e franquias (JONES, 2005). Dentre os ambientes de comercialização do varejoestã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. 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 segundoalguns 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 oprocedimento de compra, venda e troca de produtos, serviços e informações por redes decomputadores ou pela Internet (ALBERTIN, 2004). No caso de uma aplicação de comércioeletrônico, conforme Unger, Chandler (2009) o projeto consiste na apresentação eposicionamento de uma marca, oferecendo conteúdo e facilidade na execução de tarefas 16
  17. 17. como buscar e comparar produtos, etc. Ainda como característica deste tipo de sistema devenda online está a vinculação de campanhas de marketing para engajar o usuário a favorda marca da empresa. No comércio eletrônico, todos elementos de tecnologia e de mídias interativas estãoem 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 emsegurança, criptografia, moedas e pagamentos eletrônicos, mas comércio é mais do queapenas a troca de dinheiro.” Porém sistema de comércio eletrônico não possuem somenteestes fatores, inclui também pesquisa, desenvolvimento, marketing, negociação, vendas eetc. Para o desenvolvimento de um bom projeto todos estes e outros fatores precisam estarbem alinhados. Os números se mostram favoráveis ao crescimento das vendas no ambiente decomércio eletrônico. Segundo EBIT(2010) o segmento moda e acessórios vendeu cerca de30% 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 EstadosUnidos este segmento está na 3a. colocação. O EBIT(2010) afirma que “a falta depadronização e diversidade de players especializados no setor ainda são uma carênciapara 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 devarejo do mundo com mais de mil lojas em 20 países (C&A, 2011). Fundada pelos IrmãosClemens e August Brenninkmeijer há 165 anos, a empresa de origem holandesa, está noBrasil desde 1976 quando foi inaugurada a primeira loja no país em São Paulo. A marcapossui 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émde acessórios, calçados e eletro-eletrônicos (celulares, câmeras digitais e aparelhos MP3player). Como uma empresa de tradição, a C&A constitui-se de princípios éticos e deresponsabilidade social com todas as pessoas envolvidas no processo, de funcionários aclientes. Este viés social se apresenta desde 1991 no Instituto C&A, uma organização semfins lucrativos destinada a qualificar e cuidar da educação de crianças e adolescentes no6 Conforme o EBIT (2010), os sitess de compra coletiva são modalidades de comércio eletrônico onde sãofeitas promoções, oferecidas para um grande numero de pessoas por um baixo custo. 17
  18. 18. Brasil. Entre os outros pontos no qual a empresa se preocupa, está também o compromissocom a sustentabilidade, onde em 2009 foi lançado o primeiro relatório da marca com o temae 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 issoacompanha 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 decelebridades para atrair os consumidores no Brasil, utilizando em 1999, Ricky Martin comogaroto-propaganda da marca. Em 2001, foi a vez de Gisele Bündchen, que após trêsmeses de campanha, fez as vendas subirem em 20%. Recentemente a C&A aderiu ao fastfashion, trazendo estilistas renomados para assinar suas coleções. Entre as grifes e nomesnacionais estão Glória Coelho, Maria Bonita Extra, Espaço Fashion, Isabela Capeto, AmirSlama, Sergio K, Isabeli Fontana e Gisele Bündchen. Nos nomes internacionais estão ascelebridades 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 novosprocessos para melhorar e facilitar a vida do usuário final. Com este intuito o design temcomo 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 deforma incorreta como desenho. Esta é apenas uma das ferramentas desta área. SegundoVillas-Boas(2001) a palavra de origem inglesa significa designo. Em latim, o termo significadesignar, indicar, representar etc., porém em português refere-se a projeto, propósito eplano. Sendo então o ato de projetar muito mais próximo do termo como configuração dealgo, 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 emconsideração para produção de novos produtos. Principalmente, os que se encaixem comos ideais comuns a empresa e ao seu público. 18
  19. 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. Odesign possui muitos desdobramentos, os principais giram em torno do design industrial (oudesign de produto) e design gráfico, segundo Villas-Boas (2001). Para Bonfim (apudMartins; 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 dosquatro tipos de projeto (presença de marca, campanha de marketing, fonte de conteúdo eaplicação baseada em tarefas), para tal organização assim como qualquer outro projeto deinterface digital necessita de design para melhorar a visualização e facilitar a navegação. Osucesso 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, poismuitos chamam a área popularmente de webdesign. Autores como Nielsen;Loranger(2007), Kalbach(2009) e Garrett(2011) tratam em suas publicações apenas dotermo web, ou design para web. Cooper, Reimann, Cronin(2007) tratam também deprodutos digitais (aplicativos mobile, desktop, interações nas redes sociais, etc.) pelo focodado aos campos de estudo de design de interação, arquitetura da informação e userexperience. Para Royo (2008) projetos online, o design digital é a área onde se desenvolvemprojetos de interfaces para a internet. É uma área relativamente nova, nas quais a teoriaexistente está em fase de desenvolvimento assim como a tecnologia. Porém como opró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 ecompreensão do ciberespaço7.” Ainda este autor acrescenta que:7Ciberespaço consiste na interconexão de informações, de usuários e de recursos (ROYO, 2008). 19
  20. 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 onlineincluindo o comércio eletrônico, é dividido em duas etapas: design de interação e o designvisual (ROYO, 2008; COOPER, REIMANN, CRONIN, 2007; KALBACH, 2009). Mesmoambas possuindo nomenclaturas diferentes para alguns autores, o design de interação tratade todas as interações entre usuário e interface no web site, baseado em estudos deergonomia, usabilidade, design emocional e arquitetura de informação. O design visual,design gráfico (KALBACH, 2009) ou design sensorial (GARRETT, 2011), consiste nacomposiçã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 concebersoluções interativas que sejam utilizáveis de fácil aprendizado, uso eficaz e ocasione umaexperiê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 paracomunicação e interação humana”. Para construção de produtos interativos, deve-se levarem consideração o estudo de muitas disciplinas que envolvem o conhecimento a cerca dousuá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, comoergonomia cognitiva, sistemas de informação, interação homem-computador (IHC), fatoreshumanos (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 danecessidade de projetar interfaces mais amigáveis para os usuários, pois com a criação desistemas por engenheiros este cuidado não existia (PREECE; ROGERS; SHARP, 2007). 20
  21. 21. Ou seja, a interface era criada apenas pela experiência dos mesmos para uso próprio. Foicom o nascimento dos monitores e computadores pessoais a partir do final dos anos 70que surge o design de interfaces. Com o passar do tempo foram acrescentadas novastecnologias para tornar o uso do computador pessoal mais eficiente e agradável.Acompanhando esse progresso dos computadores pessoais, evoluíram também osaplicativos destinados ao trabalho, educação e treinamento. A partir do crescimento das novas mídias e tecnologias, o papel do designer deinteração está cada vez mais ligado em unir diversas áreas do conhecimento e camposinterdisciplinares para construção de interfaces principalmente na web. Em se tratando deum projeto de um web site, serão aplicados os estudos de ergonomia cognitiva e designgráfico como áreas de suporte à construção do produto. No desenvolvimento do projeto emsi, Preece; Rogers; Sharp(2007) destaca que o processo de design de interação envolve 4etapas: i) identificar necessidades; ii) determinar requisitos; iii) desenvolver alternativas quepreencham esses requisitos; iii) construir versões interativas do projeto, de maneira quepossam ser testados e analisados; iv) avaliar o que esta sendo desenvolvido durante oprocesso. Esta última etapa é uma das mais importantes para o projeto, pois é na avaliaçãoque 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 prazerdo usuário e eficiência no uso destes elementos. Linden(2007) ao definir o termo, lembraque 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 commais questões, envolvendo produtos, processos, ambientes e interfaces. Segundo ainda aInternational Ergonomics Association - IEA(2001) ela “contribui para o projeto e aavaliação de tarefas, trabalhos, produtos, ambientes e sistemas no sentido de torná-loscompatíveis com as necessidades, habilidades e limitações das pessoas”. No que diz respeito aos domínios de especialização, a ergonomia é classificada emtrês, conforme Abergo(2011): física, cognitiva e organizacional. A ergonomia física estudaas limitações e possibilidades físicas dos usuários, considerando a segurança e o confortodo usuário durante a interação com o produto dos mesmos, analisando-o sob aperspectiva da postura, do manuseio de materiais, dos movimentos repetitivos entreoutros. A ergonomia cognitiva trata dos processos mentais e como eles afetam as 21
  22. 22. interações humanas com o sistema, levando em conta a fácil compreensão, interpretaçãoe uso do produto. E por fim a ergonomia organizacional se ocupada do estudo dainteração dos sistemas com as estruturas organizacionais, políticas e de processos, como intuito de otimizá-los dentro de um contexto específico. Portanto, ressalta-se que no projeto de interfaces digitais, o estudo dos princípiosda Ergonomia Cognitiva são fundamentais.2.3.2 Ergonomia Cognitiva No caso da ergonomia cognitiva, para otimizar as características de um produto afim de torná-lo de fácil compreensão e uso é necessário entender a cognição humana. Elaconsiste 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 taisacontecimentos são chamados de superiores, sendo eles os atos de compreensão(interpretação e atribuição de significados ao ambiente), aprendizado (julgamento docomportamento 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ãodestas 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 gerauma sensação, sendo ela discriminada pela memória e interpretada pós comparação comos significados existentes. Na fase de processamento, esta informação é analisada para atomada de decisão. E por fim, o estágio de ação, no qual o cérebro coordena a respostaou ação a partir das interpretações atingidas. Porém, através das informações interpretadas e respondidas pela cognição, entraem questão a abordagem do sistema afetivo. Ele consiste em uma resposta emocional dousuá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 suasnecessidades, 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 osistema 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 apesarde ser causado por um objeto, não é associado diretamente a ele. Já os sentimentos, 22
  23. 23. Cybis(2007, p. 325) afirma: “resultam do julgamento de uma experiência direta com umobjeto 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 interfacepoderá se tornar positiva ou não. E é neste ponto que sistemas afetivo e cognitivo devemandar juntos. No caso da memória, este agente quando influenciado pelo humor, podefacilitar a recuperação de eventos com carga emocional relacionados ao humor positivoou negativo do momento. Com esta influência que a tomada de decisões pode se tornarmais efetiva, pois a partir deste humor que se formarão os sentimentos responsáveis pelareflexã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 obterresultados satisfatórios em seu projeto. É fundamental que o profissional obtenha econheç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 decomércio eletrônico, por exemplo, e serão mais cautelosas (expondo-se menos aosriscos)” define Cybis (2007, p.326). Através do design que os conceitos e soluçõesergonô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 acapacidade que um sistema interativo oferece a seu usuário, em determinado contexto deoperação, para a realização de tarefas de maneira eficaz, eficiente e agradável”. A origemda á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 emprodutos e interfaces (ANDRADE, 2007). É importante lembrar que a usabilidade não setrata apenas da relação do produto com o usuário, mas também do ambiente no qualambos estão inseridos e a tarefa realizada neste contexto (IIDA, 2005). Como parte do nível comportamental do design emocional (descrito a seguir), ausabilidade geralmente é notada quando a mesma não acontece de maneira correta esatisfatória ao usuário. É essencial nesses casos que se pense não apenas nos fatoresobjetivos 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 partirda definição do termo podemos perceber que a usabilidade é constituída de muitascaracterísticas subjetivas, onde não existe uma receita ou plano perfeito para execução deprojetos que respeitem os preceitos da mesma e que atenda a 100% dos usuários. 23
  24. 24. Nestes casos, o estudo sobre o usuário é fundamental para que o sistema atenda asmetas 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) Possibilitarfacilidade de aprendizado no sistema; v) Ser fácil de memorizar o uso, para posterioresutilizações. Estes detalhes devem ser levados em consideração no desenvolvimento deinterfaces, principalmente na Web onde alguns serviços são usados com uma grandefrequê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 focoprincipal nas motivações, desejos, satisfações e prazeres dos usuários. Consiste nãoapenas em atingir as necessidades que este produto propõe, como também superar assuas 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 ousuário demonstra suas reações perante a experiência vivenciada diretamente comprodutos. É no sistema afetivo que encontramos as emoções, que aliadas ao sistemacognitivo, são responsáveis pelas respostas psicológicas do usuário em relação aoambiente inserido (LINDEN, 2007). Norman(2008) defende três níveis para a relação entreo 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 queestarão presentes na interface. O profissional que atua na arquitetura da informação (AI) é 24
  25. 25. responsável por criar mapas de sites detalhados e analisar a distinção de categorias esubcategorias 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 paramelhor acesso a elas, e melhor beneficio também dos objetivos de negócio do clienteperante o projeto de um web site. De acordo com Agner (2009, p. 90) “o foco da AI é o projeto de estruturas (ambientesinformacionais) que fornecem aos usuários recursos necessários para transformar suasnecessidades 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êselementos, segundo Morville; Rosenfeld (2006): usuário, contexto e conteúdo. Em setratando 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 daempresa. Outro ponto a ser levantado é o conteúdo que fará parte do sistema, onde sãoidentificados documentos, volume destas informações e possíveis atualizações, tipos dedados 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 aconstrução do mapa do site e do fluxo de tarefas que irão nortear o projeto. O sistema deorganização, segundo Agner (2009) consiste em organizar e categorizar os dados doprojeto; sistema de rotulação trata de como serão os elementos textuais e visuais para oscomponentes presentes no web site; sistema de navegação define as formas de interagirno espaço e entre as informações; e por fim o sistema de busca que determina as questõesque 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. 26. A documentação e entrega do resultado destas pesquisas se dá através do mapa dosite e fluxo de tarefa, onde ficam visíveis a estrutura e relacionamento dos conteúdos epá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 website em uma representação visual”. Já um fluxo de tarefas, determina os processos que osusuários farão enquanto acessam o web site ou aplicação (UNGER; CHANDLER, 2009). Adiferença entre ambos os diagramas que mostram organizações sobre o projeto é que omapa diz respeito a hierarquia do web site e o fluxo mostra as opções de caminhos para anavegação. A partir deles que a equipe do projeto consegue enxergar e identificar asnecessidades para prosseguir a construção do sistema e desenvolver as páginas einterações do web site.2.3.6 Design de Interface Consiste no desenvolvimento dos comportamentos de um web site ou aplicaçãoconforme as ações do usuário (UNGER, CHANDLER, 2009). É neste processo que sereúnem e aplicam o estudo de design de interação como um todo, pois serão definidos apartir 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, quesegundo Memória(2005) consistem em esboços de como serão dispostos os elementos nainterface sem aplicação de projeto visual, conforme Figura2. Como ferramenta paradesenvolvimento de um wireframe está o grid. Ele é um componente do design gráfico queaplicado ao design de interface compõe a estrutura do posicionamento dos elementosdentro de uma interface. Segundo Ambrose, Harris(2009), o grid não serve apenas comouma grade rígida que deve ser seguida, mas como um guia de como devem se comportarimagens, textos e demais elementos em uma página, bem como organização da hierarquiada informação e focos de atenção. 26
  27. 27. Figura 2: Wireframe. Fonte: Garrett (2011) Estruturado o conteúdo e as interações, são documentadas as ações de como anavegação procederá, chamadas por Unger; Chandler (2009) de anotações. O wireframeserve de documento que guiará a continuação projeto para a aplicação da identidade visualda 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 umprojeto digital. Segundo Cooper, Reimann, Cronnin (2007, p. 288) “visual interfacedesigners are concerned with finding representations best suited to communicating thespecific 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 comumacordo para comunicar a interface do produto. O design visual se desenvolveu a partir da ampliação da função e significação dodesign gráfico dentro dos meios digitais. Como afirma Royo (2008), “o surgimento do meiodigital e da interatividade proporcionaram uma mudança substancial na linguagem visualque utilizamos”. A base para o desenvolvimento do design visual é a construção daidentidade e de elementos visuais que comuniquem a experiência da marca, através dotom, estrutura e estilo (COOPER, REIMANN, CRONIN, 2007).8 Tradução do texto de Cooper, Reimann, Cronnin (2007, p. 288): “designers de interface visual sãopreocupados em encontrar as representações mais adequadas para comunicar o comportamento específicodo produto interativo que estão projetando.” 27
  28. 28. 2.4.1 Identidade visual Consiste na criação, identificação e posicionamento através do design em umainstituição. A identidade visual vai além de uma proposta visual de logotipo ou de símboloque 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 damarca é 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 oconceito e ideais da empresa para qual vai atender. Refere-se a como será a suacomunicação, tanto dos projetos gráficos e de sinalização, quanto web sites e projetosonline. Segundo Royo (2008), no caso de peças muito distintas, de formatos distintos aidentidade 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 seobserva a identidade de uma instituição, transpor o conceito da empresa juntamente com alinguagem digital é fundamental e faz com que a imagem da marca fique cada vez maisforte.2.4.2 Forma e espaço O tema forma é extremamente abrangente. A concepção da forma é um meio decomunicação, não verbal, que supre a necessidade do homem de dar sentido às coisas, aforma nada mais é do que a é a configuração visível do conteúdo, seja ela impressa oudigital. 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 dacomposição de qualquer forma. Segundo Dondis(1997) o ponto e a linha são os dois principais elementos, sendoque o ponto é a base para originar outras formas, a linha como uma forma, e destaca três 28
  29. 29. formas básicas, figuras planas com variações infinitas: o quadrado, associado ahonestidade, o triângulo remete a ação, e o círculo a proteção. O plano é um ponto que setornou algo maior dentro de seu formato. Contrapondo à forma, está o espaço que consiste no oposto, no fundo ou negativoperante a figura. Como afirma Samara (2010, p. 16) “é impossível mudar um sem modificaro 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 decaracteres, geralmente associado a famílias9 de tipos onde são estabelecidos padrões deestilo. Como comenta Newark(2009, p. 76) “a linguagem deve ser escrita com uma famíliade 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, ondefoi utilizado pela primeira vez os tipos móveis metálicos em série (FUENTES, 2009). Com ainserção de computadores e softwares no trabalho do designer e do tipógrafo a utilizaçãoda tipografia e criação de novas famílias aumentou ao longo dos últimos anos. Apesar dagrande variedade de famílias existentes atualmente, segundo Fuentes (2009), os tiposdenominados 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 devepermear em qualquer projeto tipográfico. Devem ser levados em conta não só aspectosesté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 tipografiaestá a de valorizar os diversos componentes de um texto, dando personalidade epossibilidade de reconhecimento a cada categoria ou qualidade de informação” apontaFuentes (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 parasi”(ROCHA, 2005, p. 52); e os tipos experimentais, que estão associadas ao estilo dodesigner, 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ãosemelhantes, possuindo características fundamentais independente das variações de suas hastes. (ADG ,2003) 29
  30. 30. Segundo Kalbach (2009), a tipografia em interfaces digitais possui algumasdificuldades quanto a qualidade, já que a resolução máxima que pode ser utilizada noscomputadores é de 85 pontos por polegadas (dpi). Além disso a leitura da interfacecostuma 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 legibilidadee 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 impressoou digital, devido à facilidade de criação. Principalmente pela proliferação de softwaresgráficos acessíveis, utiliza-se grande parte de recursos visuais para criar uma novalinguagem, possibilitando assim uma comunicação eficaz entre o sistema e o usuário. Ascores 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. AindaSegundo o autor o poder cognitivo da cor atrai e interage com as pessoas, podendoacrescentar 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, quedetermina 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 luminosidadeque é comum a identidade da cor; e por fim a temperatura, que trata da qualidade da correlacionada a experiências. Os sistemas de cores utilizados para construção de materiais, digitais ou impressossão classificados de duas formas (FUENTES, 2009): RGB e CYMK. O sistema RGB é opadrão de cores, onde cada cor primária (Red, Green e Blue) representa um dos eixos docubo RGB (em um sistema cartesiano X, Y, Z). Este sistema é utilizado em TVs e monitoresdos 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 umarepresentação da realidade e da sociedade. No ponto de vista da gestão do design, porexemplo, imagem diz respeito a “maneira como o público percebe a empresa ou seus 30
  31. 31. produtos” (MARTINS; MERINO, 2008, p. 135). Santaella; Nöth(2008) conta que “o estudoda imagem é, assim, um empreendimento interdisciplinar”, que pode ser observados pordiversas perspectivas como a semiótica, a cognição, psicologia, artes, etc. Como elementodeterminante para construção de um design, a imagem possibilita a transmissão de umamensagem com apoio ou não textual, atraindo o público. A conexão entre as imagens e asexperiê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 visuaiso tempo todo, e o uso delas por parte do design só faz reforçar as mensagens a serematribuídas no produto. Porém não só da representação que a imagem demonstra o sentidonecessário no projeto, é necessário harmonia entre o tipo de imagem utilizado e o restantedos elementos utilizados para efetivar a mensagem (CHINEN, 2009). Os projetos dedesign, 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. ConformeGombrich (apud Newark, 2009) “não houve necessidade de a pintura realizar uma tarefaque 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, queintervém na imagem - cortando e adicionando cor e texto à fotografia.” Este é um dosmuitos 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 derepresentação da realidade, até a chegada da fotografia no início do século XIX. A partir deentão ela passou a ser utilizada como um modo pessoal de representação ou muitas vezesmais 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 aotrabalho, dependendo do traço aplicado. O ícone, muitas vezes associado ao pictograma, é um signo visual que possuisemelhanç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 escritahieroglífica egípcia (FUENTES, 2009). Utilizado em sistemas de sinalização tanto físicoquanto em online, o ícone por se tratar da síntese de uma informação (seja ela uma açãoou objeto) contribuem segundo Kalbach (2009), para a clareza ao reforçar algum elemento 31
  32. 32. (geralmente texto); facilitam o aprendizado, entendimento e lembrança de elementos efuncionalidades do projeto; e ocupam menos espaço que textos em casos de muitainformaçã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 asinformaçõ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 textuaisnuma peça, produto, ou sistema. Diz respeito a proporções, alinhamentos e hierarquias queimagem e conteúdo devem obedecer para se obter equilíbrio entre as partes para favorecera clareza da mensagem. Através destes posicionamentos que se dará a forma como oconteú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 é tarefado designer para elaborar uma peça eficaz (SAMARA, 2010). No caso de composiçõesvisuais, principalmente para web, as partes compreendem conteúdo, tipografia (edisposição das mesmas no espaço), imagens (fotografia, ilustração, ícones) e em algunscasos 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 emconsideraçã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 é umaentidade composta de pelo menos dois elementos e uma relação estabelecida entre cadaelemento e pelo menos um dos demais elementos do conjunto. Cada um dos elementos deum 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 einformações e fornecem um mecanismo de feedback, conforme ilustrado na Figura 3abaixo: 32
  33. 33. Figura 3. Fonte: elaboração própria. No caso dos sistemas de informação, no qual se enquadra a ferramenta de comércioeletrônico, o termo consiste, segundo Sêmola (2003), na expressão utilizada paradescrever um sistema automatizado ou manual, que envolve pessoas, máquinas, emétodos para organizar, coletar, processar e distribuir dados para os usuários do sistemaenvolvido. 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 objetivocomum. Esse objetivo é o fluxo mais confiável e menos burocrático das informações. Asprincipais 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 apossibilidade de compra mais efetiva, além da interface está na segurança que o sistemaapresenta. 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çãotodo e qualquer conteúdo ou dado que tenha valor para alguma organização ou pessoa. Elapode 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 oacesso por pessoas não autorizadas (confidencialidade), estejam sempre disponíveisquando 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 decomprar. Segundo Albertin (2006, p. 211) “alguns autores acreditam que os clientes sãorelutantes em entregar a seus fornecedores os dados referentes a suas informações 33
  34. 34. demográficas, padrões de compras e necessidades de produtos”. Para tal é importanteressaltar na interface não apenas as informações necessárias para a compra, mas tambémdar 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 tornerealidade é necessário também os conhecimentos sobre a viabilidade deste projeto e comoele será construído. Para tanto é importante que se tenha conhecimentos sobre astecnologias 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 autorexistem 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 evisualizadas (KALBACH, 2009). Nesta etapa entram limitações e possibilidades emambientes como dispositivos móveis como celulares, smartphones, tablets, e-books etc., etambém em computadores, e TVs interativas. Como afirma Kalbach (2009) tecnologias deback-end consiste em um sistema que faz o web site funcionar. É nele que são estruturadasas 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 asinformações na tela do usuário. Neste nível o designer tem envolvimento fundamental, poiso acompanhamento e conhecimento das tecnologias fará com que o mesmo possarestringir ou explorar mais possibilidades dentro do que o projeto permite. O HTML e oXHTML 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 daconstruçã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 asinformaçõ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 deinclusão com o código HTML. 34
  35. 35. 3 METODOLOGIA3.1 Método de Pesquisa O método de pesquisa consiste em uma atividade racional e sistemática delevantamento de informações através de um processo devidamente planejado paraalcançar um objetivo (GIL, 1991). Para a concepção deste trabalho optou-se pelo estudo decaso como estratégia de pesquisa. Segundo Yin(2001, p.32): “o estudo de caso é umainvestigação empírica que investiga um fenômeno contemporâneo dentro de seu contextoda vida real, especialmente quando os limites entre o fenômeno e o contexto não estãoclaramente definidos.” A opção por este tipo de investigação se dá pelas informações deusuários e mercado, necessárias para a construção do projeto, além do referencial teóricopresente neste trabalho. Para a coleta de dados sobre o público e a interface pretendidaserá feito uso também de abordagens qualitativas e quantitativas. Através dos objetivosespecíficos foram delimitadas as ferramentas (Quadro 1) para coleta de dados a fim deatingir 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. 36. 3.2 Método Projetual O método projetual consiste na utilização de etapas para desenvolvimento de umprojeto. Neste trabalho foi escolhida a metodologia de Gui Bonsiepe (1984) por abordar asanálises necessárias para este projeto e ser flexível para a utilização de ferramentasespecíficas da área de design digital. Para estas ferramentas foram utilizados os autoresJames Kalbach (2009), Russ Unger e Carolyn Chandler (2009) no que diz respeito a designde interação e Javier Royo (2008) para design visual. Segundo Bonsiepe (1984) “receitasde 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 dedesenvolvimento de projeto, sendo flexível dependendo da necessidade do mesmo. Oprojeto 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 tabelamostra sobre como será abordada as etapas e procedimentos metodológicos para aconstrução deste projeto.Etapas Objetivo/Definição Procedimentos Metodológicos1. 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álises2.1. Lista de É utilizado para determinar Análise do web site daVerificaçã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. 37. Etapas Objetivo/Definição Procedimentos Metodológicos2.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 StellaMorfoló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 pesquisaalvo 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 osProblema 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. 38. Etapas Objetivo/Definição Procedimentos Metodológicos3.2. Hierarquização de Este por sua vez determina as Construção do mapa do site eRequisitos 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 ede 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 dointerface 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. 39. 4 Aplicação do Método Projetual4.1 Problematização A partir dos estudos desenvolvidos sobre design de interação e visual, bem comoestudos de moda e comércio eletrônico, este trabalho se presta a construção da interfacede um web site de comércio eletrônico da rede de lojas de vestuário C&A. O projetopretende desenvolver a partir da interface uma experiência satisfatória na compra deroupas no ambiente online.4.2 Análises Para a construção deste projeto serão analisados 3 web sites de empresasconcorrentes, diretas e indiretas, da marca em questão: lojas Renner13, a segunda maiorrede de lojas de departamentos de vestuário no Brasil, concorrente da C&A; a marcaespanhola Zara14, uma das maiores redes de vestuário no mundo, sendo uma dasprimeiras 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 deroupas, Boutiques.com15. Além dos estudos destes 3 projetos, será analisado também o web site StellaMcCartney para C&A, projeto de lançamento e venda dos produtos da estilista no portal damarca, e o usuário que será atendido pela proposta, para a construção do resultado que osatenda.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 parapossíveis alternativas e soluções. No caso de um projeto de interface digital, serãoconsiderados os itens levantados requisitos a cerca do design de interação e design visualnos projetos que serão verificados ao longo da etapa de análises: site das Lojas Renner eda campanha Stella McCartney para C&A16. Ambos foram escolhidos pelo primeiro se tratarda segunda maior rede de departamentos do Brasil e a segunda por se tratar do web siteque ofereceu a comercialização online dos produtos da marca C&A para a campanha de13 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. 40. lançamento da coleção da estilista Stella McCartney. Estes projetos servirão de estudo paraas demais análises deste projeto.4.2.1.1 Lojas RennerFigura 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çãoresultou 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

×