Clarissa westphal nogueira tcc2 by Clari

UNIVERSIDADE DO SUL DE SANTA CATARINA CLARISSA WESTPHAL NOGUEIRA

PROPOSTA DE REDESIGN DO WEBSITE DE ROUPAS MOOOH!!: TCC 2

Florianópolis 2015

CLARISSA WESTPHAL NOGUEIRA

PROPOSTA DE REDESIGN DO WEBSITE DE ROUPAS MOOOH!!

Trabalho de Conclusão de Curso apresentado ao Curso de graduação em Design, da Universidade do Sul de Santa Catarina, como requisito parcial apara obtenção do titulo de Bacharel em Design.

Orientador: Prof. Eduardo Cardillo Soares

Florianópolis 2015

CLARISSA WESTPHAL NOGUEIRA

PROPOSTA DE REDESIGN DO WEBSITE DE ROUPAS MOOOH!!

Este Trabalho de Conclusão de Curso foi julgado adequado à obtenção do título de Bacharel em Design e aprovado em sua forma final pelo Curso de Design, da Universidade do Sul de Santa Catarina.

Florianópolis, 1º de Julho de 2015.

________________________________________ Prof. Eduardo Cardillo Soares Universidade do Sul de Santa Catarina

________________________________________ Prof. Karla Coelho Grillo Universidade do Sul de Santa Catarina

________________________________________ Prof. Kamilla Souza Universidade do Sul de Santa Catarina

AGRADECIMENTOS Este projeto não seria possível sem o apoio de: Helga Westphal Nogueira, Uziel Batista Nogueira, Mitsi Westphal Taylor, Ana Maria Westphal Batista da Silva, Lélia Pereira Nunes, Thiago Rosa, Leandro Pugliesi, Karla Coelho Grillo e Eduardo Cardillo Soares.

RESUMO As possibilidades de compras online têm se expandido largamente nos últimos 20 anos.; desde livros, produtos de beleza e até mesmo carros. Centenas de milhares destes sites transitam pela internet comercializando suas mercadorias facilmente graças às suas vantagens: por exemplo, compras disponíveis 24 horas e produtos adquiridos com um simples clique a partir do conforto do lar. Nesta vasta área competitiva de e-commerce, é imperativo distinguir-se de seus concorrentes sendo o mais ergonômico possível. Este projeto tem como objetivo identificar, corrigir e melhorar o site da Moooh!! através da experiência de usuários, e torna-lo o mais eficiente possível, atendendo as necessidades dos clientes. Palavras chave: Web design. E-commerce. Arquitetura de informação.

ABSTRACT It has become apparent in today’s internet age that the possibilities of online shopping have expanded considerably in the last 20 years; from books, to beauty products and even cars, hundreds upon thousands of these websites can be found making profits thanks to their many advantages, such as around-the-clock shopping and purchases bought with a simple click, from the comfort of home. Moooh!! is one of the online stores in this vast area of e-commerce, and it’s important to distinguish itself from its competition by being the most user-friendly site possible. This project aims to identify, correct and improve Moooh!!’s website through user experience and create the most efficient website possible in catering to user’s needs. Keywords: Web design. E-commerce. Information architecture.

LISTA DE ILUSTRAÇÕES Figura 1 – Página inicial do website da Moooh!! .............................................................................3 Figura 2 – Ícone de “carrinho” mais comumente usado, incorporado no layout novo ..................29 Figura 3 – Ícone de “busca” mais comumente usado, incorporado no layout novo.......................29 Figura 4 – Website de Spreepicky .................................................................................................35 Figura 5 – Website de Harajuku Fashion .....................................................................................36 Figura 6 – Website de Angelic Pretty ............................................................................................37 Figura 7 – Website de SEX POT ReVeNGe ...................................................................................37 Figura 8 – Website de Forever 21 .................................................................................................38 Figura 9 – Website da Renner .......................................................................................................39 Figura 10 – Exemplos de opções de wireframe ideadas ................................................................42 Figura 11 – Wireframe final ..........................................................................................................44 Figura 12 – Lista de cores definidas no layout ..............................................................................46 Figura 13 – Seleção de fontes para o layout ..................................................................................47 Figura 14 – Fontes definidas no layout .........................................................................................48 Figura 15 – Homepage completo do website. ................................................................................49 Figura 16 – Homepage do website, visto no browser ...................................................................50 Figura 17 – Escolha de categorias .................................................................................................50 Figura 18 – Chat online com representante da empresa ................................................................51 Figura 19 – Página da campanha “#MyMoooh!!” .........................................................................52 Figura 20 – Fotos da página da campanha “#MyMoooh!!”. ..........................................................52 Figura 21 – Ferramenta de filtro para facilitar a busca do cliente. .................................................53 Figura 22 – Ferramenta de filtro em uso .......................................................................................53 Figura 23 – Página de compra do produto .....................................................................................54

Figura 24 – Página apresentando o processo de adicionar um produto ao “carrinho”. ..................55 Figura 25 – Página de revisão de compra ......................................................................................56 Figura 26 – Página de revisão de compra, explicando tipos e preços de frete ..............................57 Figura 27 – wireframe final da versão mobile/tablet. .....................................................................59 Figura 28 – Homepage completo da versão tablet/mobile do website ..........................................60 Figura 29 – Homepage visto em um tablet e smartphone .............................................................61 Figura 30 – Seleção de categorias .................................................................................................62 Figura 31 – Filtro de categorias versão tablet/mobile ...................................................................63 Figura 32 – Processo de compra versão tablet/mobile ..................................................................64 Figura 33 – Processo de compra versão tablet/mobile: carrinho de compras ...............................65 Figura 34 – Processo de compra versão tablet/mobile: etapa final ................................................66

LISTA DE GRÁFICOS. Gráfico 1 – Dados sobre compras feitas a través de medias sociais nos Estados Unidos ..............13 Gráfico 2 – Dados sobre compras feitas a través de medias sociais no Japão ...............................13 Gráfico 3 – Dados sobre compras feitas a través de medias sociais na França ..............................14 Gráfico 4 – Dados sobre compras feitas a traves de medias sociais na Inglaterra ........................14 Gráfico 5 – Dados sobre compras feitas a traves de medias sociais no Brasil ...............................15

SUMÁRIO

1. INTRODUÇÃO .........................................................................................................................1 1.1 PROBLEMATIZAÇÃO ............................................................................................................1 1.1.1 Objetivos ................................................................................................................................4 1.1.2 Objetivo geral ........................................................................................................................4 1.1.2.1 Objetivos específicos ...........................................................................................................4 1.2 JUSTIFICATIVA ......................................................................................................................4 1.3 METODOLOGIA ......................................................................................................................5 2. FUNDAMENTAÇÃO TEÓRICA ............................................................................................7 2.1 WEB DESIGN ...........................................................................................................................7 2.1.1 Mídia digital ..........................................................................................................................9 2.1.2 Comunidade Online ............................................................................................................10 2.1.3 Website ................................................................................................................................10 2.1.4 Leiturabilidade e Legibilidade ..........................................................................................10 2.1.5 Links ....................................................................................................................................11 2.1.6 Redes sociais e compras online ..........................................................................................12 2.1.7 Canais de atendimento .......................................................................................................15 2.2 DESIGN GRÁFICO ................................................................................................................16 2.2.1 Semiótica...............................................................................................................................17 2.2.1.1 Cores ..................................................................................................................................17 2.2.1.2 Identidade Visual ...............................................................................................................18 2.2.1.3 Tipografia ..........................................................................................................................18 2.2.1.3.1 Títulos e Subtítulos .........................................................................................................19 2.3 NAVEGABILIDADE .............................................................................................................19

2.4 ARQUITETURA DE INFORMAÇÃO ...................................................................................20 2.5 USABILIDADE ......................................................................................................................21 2.5.1 Interface ...............................................................................................................................23 2.5.1.1 Interatividade .....................................................................................................................23 2.5.2 Responsividade ....................................................................................................................25 2.6 ERGONOMIA .........................................................................................................................25 2.7 E-COMMERCE .......................................................................................................................26 2.7.1 E-commerce em tablets e smartphones ............................................................................27 2.8 NOMENCLATURA ................................................................................................................29 2.8.1 Carrinho ..............................................................................................................................29 2.8.2 Busca ....................................................................................................................................29 2.8.3 Formas de pagamento ........................................................................................................30 2.8.4 Ferramenta de Chat ...........................................................................................................30 2.8.5 Homepage ............................................................................................................................31 2.8.6 Conteúdo ..............................................................................................................................33 3. MERCADO ..............................................................................................................................32 3.1 ANÁLISE DE TENDÊNCIAS ................................................................................................34 3.1.1 Público Alvo ........................................................................................................................35 3.1.2 Concorrência .......................................................................................................................36 4. ANALISE DE RESULTADOS ...............................................................................................40 5. LAYOUT ..................................................................................................................................43 5.1 ELEMENTOS ..........................................................................................................................46 5.1.2 Cor ........................................................................................................................................47 5.1.3 Tipografia ...........................................................................................................................49

5.2 DESIGN VISUAL DO WEBSITE ..........................................................................................50 5.3 LAYOUT TABLET/MOBILE ................................................................................................59 5.4 DESIGN VISUAL DA VERSÃO TABLET/MOBILE DO WEBSITE .................................61 6. CONCLUSÃO ..........................................................................................................................68 REFERÊNCIAS ...........................................................................................................................69 APÊNDICE A- QUESTIONÁRIO PARA COLETA DE DADOS .........................................78 APÊNDICE B- COLETA DE DADOS ......................................................................................79 APÊNDICE C- VÍDEOS DOS USUÁRIOS ..............................................................................81

1.INTRODUÇÃO Ao iniciar suas atividades no mercado online em 2011, a empresa italiana Moooh!! tinha por objetivo atingir um público jovem, de 14 a 28 anos, que gostasse da moda japonesa do estilo “Harajuku” (estilo de roupa popular no Japão, nomeado em homenagem a famosa rua de Tóquio, que inclui roupas coloridas extravagantes) roupas e acessórios. Sabemos que quando se trabalha online, sobretudo com vendas a varejo, é imperativo que o site seduza o cliente em potencial com um design eficaz e atraente. Cabe ressaltar que neste modelo de loja (a virtual) qualquer problema ou situação que dificulte a transação comercial significa a perda imediata do cliente. 1.1 PROBLEMATIZAÇÃO O site da empresa Moooh!! apresenta uma série de problemas quanto a usabilidade, arquitetura de informação e interatividade, que dificulta a sua funcionalidade e praticidade. Num primeiro olhar, podemos perceber que há defeitos no aspecto de aprendizagem, fator primordial para a efetivação da compra, ferindo os princípios básicos de web design. Verificamos que clientes com pouca experiência em compras online apresentam um acentuado grau de dificuldade diante de links pequenos e confusos, que não simplificam o ato de comprar e tanto menos mostram de forma clara qual será o próximo passo ou como avançar após a escolha do produto. Isto é totalmente contra a regra de usabilidade, assim definida: “Efetividade, eficiência e satisfação com que o produto permite atender aos objetivos específicos de usuários específicos em um contexto de uso específico” (ISO 9241, 1998, p.11). Sem dúvida, a experiência citada, à guisa de exemplo, demonstra que o site não atende estes objetivos nem proporciona satisfação ao cliente. Quando navegamos na web sempre há possibilidade de acidentes (a internet desconectar, a eletricidade falhar ou até erros pequenos, como uma aba se fechar inadvertidamente). Por consequência, o usuário, sem a informação precisa do caminho a seguir ele perde a página com o produto que pretendia comprar. Encontrá-la é um processo longo e desgastante. Uma perda de tempo que ninguém está disposto a enfrentar.

Por outro lado, o site não oferece tolerância a erro, como lembrar o caminho de uma página. Isto se deve a um ineficiente e desorganizado sistema de busca e a maneira minuciosa de listar as categorias de produtos. Ou seja, as categorias são específicas em demasia. Pecam pelo excesso de detalhamento, dado que no lugar de categorias simples, tais como “sapatos” /” camisas” /” acessórios”, abusam da tipificação do produto na vitrine virtual: “saias vintage”, “clássico e romântico”, “camisas linha Outono 2013”, “Ideias originais”, “perucas”. Em outras palavras, encontramos um exemplo de mal uso do que consideramos interatividade, conforme Jensen (1998, p. 185–204), “o comportamento interativo da interface experimentado pelo usuário humano”. Outro ponto a ressaltar é o tamanho das fontes. São tão pequenas que não permitem uma leiturabilidade de excelência, especialmente no caso do usuário com problemas de visão. A arquitetura de informação é, sem dúvida nenhuma, o pior aspecto da página da Moooh!!, pois como afirma Morville (2006), é a ciência de organização e rotulação de diferentes sites web, intranets, comunidades online e software de apoio à encontrabilidade e usabilidade. Ao abrir a página, o cliente se depara com a longa lista de categorias de produtos espalhados na tela. O excesso de informação polui visualmente e confunde o leitor. Outro agravante visível no mal planejamento da arquitetura de informação é a forma de listar os produtos postos à venda. Ao invés de categorias, as mercadorias são agrupadas por: coleções anuais, estilos, “ideias para presentes”, joias, joias de ouro, saias para mulheres, saias de inverno para mulheres. Fortemente estratificadas, o excesso de categorização atrapalha o usuário.

Figura 1–Página inicial do website da Moooh!!

Fonte: Moooh!! (2014).

Se considerarmos a intensidade crescente de atividades realizadas hoje em dia na internet (como compras, reservas de passagens ou traslado de documentos importantes) a criação de um website eficiente permitirá que estas funções sejam executadas sem qualquer obstáculo. A aplicação efetiva dos princípios fundamentais (usabilidade, arquitetura de informação e interatividade) no site de vendas da Moooh!! resultará numa mudança de comportamento de compra e venda, inovando a forma de atendimento e dando maior visibilidade dos produtos. É o diferencial qualitativo implementado, necessário para a interação entre o indivíduo e interface. Por conclusão, melhora a comunicação, proporcionando ao consumidor um maior grau de satisfação para uma experiência agradável e memorável.

1.1 OBJETIVOS 1.1.1 Objetivo Geral Propor o re-design do site para a loja online Moooh!! 1.1.2.1 Objetivos específicos 1. Proceder a análise do referencial bibliográfico a ser utilizado na identificação dos problemas de usabilidade do site. 2. Analisar o site da Moooh!! 3. Diagnosticar os problemas experimentados pelo usuário 4. Verificar a satisfação dos usuários-teste. 5. Projetar novo website 1.2 JUSTIFICATIVA No Brasil, o ano de 2001 é o marco referencial do crescimento das compras online no país. Segundo dados econômicos divulgados da IBOPE, estamos diante de um fenômeno mercadológico de grandes proporções. As compras online cresceram mais de 400% na década passada, mantendo-se o mercado aquecido e em franca expansão, o web design poderá contribuir muito para o seu desenvolvimento e sucesso (CARPANEZ, 2005). Realmente, há grandes oportunidades para profissionais da área. Basta verificar a quantidade de novas lojas que abrem a todo instante com milhares de produtos para todo tipo de consumidor. Para o futuro designer é de grande importância conhecer bem a mobilidade, intensidade e as ofertas deste promissório mercado virtual. Desta forma, o profissional saberia como contribuir com seus talentos, criatividade e conhecimento para proporcionar um diferencial nos sistemas de venda. A execução deste projeto contribuirá como um modelo de re-design de um website de compras. Sobre tudo, pretende ajudar futuros webmasters e designers no desenvolvimento qualitativo de seus estudos.

1.3 METODOLOGIA A abordagem metodológica cientifica adotada neste estudo será o sistema descrito por Vianna no seu livro Design Thinking (2012). Esta consiste em quatro etapas que dão suporte à análise, planejamento e projeção de um novo website. A primeira etapa é imersão. Como explica Vianna, o objetivo desta é realizar o reenquadramento e entendimento inicial do objeto a ser estudado, através da sua problematização e de uma pesquisa Desk (“a busca de informações sobre o tema do projeto em fontes diversas como websites, livros, revistas, blogs, artigos, entre outros”, VIANNA, 2012, p.32). Serão investigados vários conceitos dentro do mundo de web design, para melhorar o entendimento sobre estes e realizar a análise do site. Em seguida começa a imersão em profundidade, descrita por Vianna como “um mergulho a fundo no contexto de vida dos atores e do assunto trabalhado. Geralmente, se procura focar no ser humano com o objetivo de levantar informações (2012, p. 35)”. Isso se cumprirá através de entrevistas com 21 usuários-teste. Como instrumento da pesquisa será aplicado um questionário com questões objetivas, abertas, onde o usuário-teste poderá expressar quais foram suas reações positivas ou negativas em relação ao website. Também se disponibilizará um espaço para a inclusão de sugestões. Os movimentos dos usuários-teste no website serão gravados com um screencapture e posteriormente, os resultados obtidos serão quantificados e organizados em uma ficha de avaliação. A seguinte etapa corresponde à de análise e à síntese, quando, como seu nome indica, as informações obtidas são analisadas e resumidas objetivando dar uma base organizada para a ideação do projeto. Neste caso, os resultados da pesquisa serão ordenados em gráficos claros, enquanto as sugestões dos clientes serão arranjados a partir da frequência da menção. A etapa de ideação é a próxima. Vianna explica que “esta fase tem como intuito gerar ideias inovadoras para o tema do projeto e, para isso, utilizam-se as ferramentas de síntese criadas na fase de análise para estimular a criatividade e gerar soluções que estejam de acordo com o contexto do assunto trabalhado”

Nesta etapa será utilizado brainstorming, técnica para estimular a geração de um grande número de ideias em um curto espaço de tempo. Estas serão aplicadas em vários wireframes, disponibilizando diferentes opções de layouts, fontes e cores. Com este cardápio de ideias será possível examinar quais as que se encaixam melhor com as necessidades dos clientes. Na última etapa- a prototipação, o wireframe final será testado online para verificar se o seu tamanho é compatível com a tela do computador. As cores, fontes, elementos e formatos selecionados serão aplicados no website final.

2. FUNDAMENTAÇÃO TEÓRICA 2.1 WEB DESIGN De acordo ao conceito de Zeldman (2007), web design é a criação de ambientes digitais. Estes facilitam e incentivam a atividade humana, e são capazes de refletir ou adaptar-se a vontades individuais e conteúdo. Eles mudam ao longo do tempo, no entanto mantêm a sua identidade. Por conseguinte, podemos interpretar web design como uma atividade que visa criar websites, combinando áreas artísticas e publicidade, para fornecer o conteúdo exigido por um determinado público-alvo. As necessidades deste público devem ser focadas, usando sua linguagem e entendendo suas limitações para criar um conteúdo de qualidade (Silva, 2013). Web design pode ser considerado parte das teorias do design gráfico, uma área muito abrangente, dado que envolve o planejamento de projetos de qualquer tipo de banner, layout ou mídia computadorizada. Meggs (1992, p. 13) define design gráfico como a “forma de se comunicar visualmente um conceito, uma ideia, através de técnicas formais. Podemos ainda considerá-lo como um meio de estruturar e dar forma à comunicação impressa”. Os conceitos de design gráfico são aplicados em várias partes do design de websites, por exemplo: a escolha de cores, aplicação de semiótica, a criação da identidade da empresa, entre outras. Considerando que a aplicação de web design ocorre no meio virtual, com exigências diferentes, o re-design de um website não pode ser declarado um projeto de design gráfico. “Tornar as páginas claras é como ter boa iluminação em uma loja: faz com que tudo pareça melhor”, diz Steve Krug (2006, p. 19). Esta afirmação mostra uma realidade muito importante sobre web design: ele ajuda um website a destacar-se de seus competidores, e tornar seus produtos mais atraentes. Um design agradável e memorável traz ao consumidor uma sensação de confiança para realizar suas compras. Pierce (2006) explica que, para projetar produtos interativos usáveis, é requerido pensar no público alvo. Quem utilizará o site? Em que meio? Quais as atividades que realizarão quando interagirem com os produtos? Portanto, é fundamental ver o que é mais apropriado para os diferentes tipos de interfaces. Planejamento ao redor de dispositivos de entrada e saída é

imperativo para tais projetos. Os autores do blog Web Usability Design and Engineering (2006), concordam que uma página com web design bem aplicada possui características claras, tais como: ⎯ Texto de fácil leitura: significa dar uma atenção especial à escolha das cores da fonte e do fundo das páginas; é recomendável não utilizar uma cor de fundo que prejudique a leitura do texto e evitar cores escuras, que podem ocasionar uma leitura confusa e/ou cansativa. ⎯ Fontes claras: o tamanho da fonte deve ser de tamanho legível, assim como o alinhamento do texto e o posicionamento do título. O usuário deve se sentir à vontade ao ler o conteúdo do seu site, sendo melhor usar o alinhamento que é padrão no mundo Ocidental, onde a leitura é de esquerda para a direita. ⎯ Fácil de navegar: os autores do site da e-commerce comparam a facilidade de navegar em um website como trafegar por uma cidade muito bem sinalizada. O usuário não pode se perder, e deve entender com facilidade para onde ir, e como ir. A primeira medida a ser tomada é identificar claramente o que é link e o que é texto na página. Botões ou tabelas devem estar claramente identificados e seu texto facilmente legível. Deve-se ter cuidado usando programas como Flash, e usá-los com moderação. (WEB USABILITY DESIGN AND ENGINEERING,2006). ⎯ Saber utilizar cores familiares ajuda o usuário. Por exemplo, o texto em azul geralmente indica um link não visitado, e o texto em marrom indica que o link foi visitado. Se o designer decidir não usar estas cores (ou qualquer outra modalidade padrão de navegação na internet), os links devem ter algum outro tipo de destaque, como fonte maior, negrito, ou outros. ⎯ Os usuários devem conseguir encontrar qualquer conteúdo dentro do site em até três cliques. Se o site apresenta um grande número de páginas, é recomendável criar um mapa, para o usuário obter uma visão geral de todas as páginas com o respectivo link de acesso.

⎯ Possuir uma boa identidade visual: é imperativo ter uma identidade visual padronizada em relação ao layout e ao design. O website deve mostrar com clareza sua marca e identidade, para que o usuário se localize. Tudo deve seguir o mesmo padrão: textos, fontes, cabeçalhos, documentos, rodapés, tamanho de imagens, ícones e e-mails, entre outros. (WEB USABILITY DESIGN AND ENGINEERING, 2006) ⎯ Fácil de acessar: o site deve ser responsivo e carregar rapidamente. Estudos mostram que o usuário perde interesse de navegar em um site que demora mais de cinco segundos para carregar. Por conseguinte, evitar usar programas pesados que causam complicações ou demoras, como o programa Flash. O objetivo de web design é criar uma experiência fácil e simples para seu usuário, facilitando a navegação do website e atraindo vários pageviews 1 para garantir uma renda através de patrocinadores, vendas (no caso de um e-commerce2) ou influência na mídia. Considerando o exposto, um website desorganizado ou confuso repele seu público, resultando em um fracasso no mercado. O uso de web design e seus conceitos fundamentais, descritos a seguir, são indispensáveis para qualquer website de sucesso.

2.1.1 Mídia digital Este termo refere-se a mídia eletrônica ou digital que, através de aparelhos de comunicação baseados em tecnologia digital, permitem comunicação escrita, sonora ou visual (UNIVERSITY OF GUELPH, 2006). Exemplos deste são: computadores, vídeo digital, jogos eletrônicos, MiniDisc, smartphones, tablets, discos, televisão digital e, obviamente, websites da internet.

1 Pageviews: número de acessos ao website. Quanto mais pessoas visitam a página, melhor para o dono, dado

que grande visibilidade garante patrocinadores e influencia. 2 E-‐commerce: website ou aplicativo de compra e venda de produtos, feitos exclusivamente via internet.

2.1.2 Comunidade Online Elstrom

et. all (1997) explicam que uma comunidade virtual é um grupo de

indivíduos que cria laços num espaço virtual através de mídia digital. As comunidades virtuais esforçam-se para incentivar a interação, para facilitar a comunicação entre seus participantes em torno de um interesse particular ou apenas para se comunicar. Os membros da comunidade podem interagir através de vários meios: fóruns, salas de chat, sites de redes sociais, ou mundos virtuais. Comunidades online são úteis para medir a satisfação dos usuários com o website, as quais poderiam ser aproveitadas no projeto. 2.1.3 Website Um website ou site é “um conjunto de páginas web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP 3 na internet. O conjunto de todos os sites públicos existentes compõe a World Wide Web 4 ” (BECHARA, 2008, p.186). Usualmente são utilizados por organizações, empresas ou indivíduos com diferentes propósitos, entre eles: institucional, informacional, aplicativo (como editores de imagem ou planilhas eletrônicas), armazenamento de informação, comunitário ou comunicacional e portais.

2.1.4 Leiturabilidade e Legibilidade O conceito de leiturabilidade não deve ser confundido com legibilidade, este último conhecido como “o grau em que os glifos (caracteres individuais) de texto são compreensíveis ou reconhecíveis com base na aparência. A legibilidade de um tipo de letra está relacionada com as características que se relacionam com a capacidade de distinguir uma carta da outra. " (STRIZVER, 2010, p. 73). Leiturabilidade, por outro lado, é a inteligibilidade ou a facilidade de leitura determinada pelo grau de dificuldade do texto (PUURTINEN, 2003). Relaciona-se a quantidade

3 Protocolo de Transferência de Hipertexto: um protocolo utilizado para sistemas de informação de

hipermídia. É a base para a comunicação de dados (Berners-‐Lee, 1996). 4 World Wide Web: rede de alcance mundial.

de esforço que uma pessoa tem para ler um texto. Existem textos com boa leiturabilidade com fontes de baixa legibilidade e vice-versa (MIYAGAWA, 2013). Considerando que se refere ao reconhecimento de frases, parágrafos e sentenças, ou seja, do texto como um todo, leiturabilidade pobre se deve a má diagramação, baixo contraste, poluição visual, entre outros. Ao criar o website, se procurará apresentar um texto claramente legível e com boa leiturabilidade para criar uma experiência de compra descomplicada. 2.1.5 Links Em um hipertexto, links são a parte mais importante (NIELSEN, 2000). Sua função é conectar as páginas e permite acessar novos conteúdos na web. Há três formas principais de links: ⎯ Link de navegação estrutural: ele resume a estrutura do espaço de informação e permite ao usuário ir a outras partes do espaço. Por exemplo, os links de homepage que levam o usuário a uma nova subpágina do website. ⎯ Link associativo dentro do conteúdo da página: palavra sublinhada (ou imagemap5) que aponta para páginas com mais informações sobre o texto âncora. ⎯ Lista de referências adicionais (“consulte também”): links oferecidos para ajudar o usuário a encontrar o conteúdo que busca, que provavelmente não se encontra na página. Nielsen (2000) afirma que o melhor uso de link é sublinha-los, com cores notáveis e visíveis, que mudam para indicar se o link já foi clicado ou não. Deverá ter um título que descreve brevemente seu conteúdo e o web designer deverá ter cuidado para não ter links em demasia, já que distrai e confunde o usuário. Os links do website da Moooh!! possuem estas características.

5 Imagemap: um link inserido dentro de uma imagem clicavél.

2.1.6 Redes sociais e compras online Redes sociais são ferramentas eletrônicas que permitem às pessoas criar e compartilhar informações, ideias, fotos e vídeos em comunidades virtuais (KAPLAN, 2010, p.61). De acordo com Roblyer et al. (2010), usuários de internet continuam a passar mais tempo com portais de mídia social do que quaisquer outros, em especial na faixa dos 15 aos 28 anos. Beck (2014) explica que muitas empresas já oferecem maneiras de juntar e- commerce e o ambiente de mídia social. Geralmente, eles conduzem clientes em potencial ao website através de links com imagens de produtos de interesse. Em meados de 2011, era possível comprar um produto diretamente em famosas mídias sociais, mas a prática teve pouco sucesso. Gap, JC Penney, Nordstrom e GameStop abriram e fecharam lojas no Facebook dentro de um ano. As empresas alegaram não estar recebendo retorno suficiente e que a criação de um destino de compras no Facebook provou ser redundante. Por outro lado, Beck nota que sites como Instagram e Pinterest estão ganhando espaço para a venda de mercadorias, devido ao seu papel de ostentar fotos pessoais de produtos comprados pelos seus usuários. Através de Think With Google, especificamente a ferramenta “The Customer Journey to Online Purchase” (“A trajetória do cliente nas compras online”) podemos ver uma compilação de dados sobre a rota de compras de um cliente através de mídias sociais. Como explica a ferramenta, existe o início do percurso de compra, onde a mídia social ajuda os clientes a conhecer o produto ou serviço. No meio, ela cria interesse ou desejo e ajuda a impulsionar o cliente. No final, ela ajuda a fechar o negócio. Os dados são esclarecedores. Se levarmos em conta compras online de pequenas empresas, constam as seguintes informações:

Gráfico 1- Dados sobre compras feitas a través de medias sociais nos Estados Unidos.

Fonte: Think With Google (2014). Gráfico 2 -Dados sobre compras feitas a través de medias sociais no Japão.

Fonte: Think With Google (2014).

Gráfico 3- Dados sobre compras feitas a través de medias sociais na França.

Fonte: Think With Google (2014).

Gráfico 4- Dados sobre compras feitas a traves de medias sociais na Inglaterra.

Fonte: Think With Google (2014).

Gráfico 5- Dados sobre compras feitas a traves de medias sociais no Brasil.

Fonte: Think With Google, 2014.

Analisando estes dados seria pertinente concluir que mídias sociais, definitivamente, ajudam a promover e movimentar vendas de um e-commerce mas não em grande escala. Atualmente Moooh!! possui uma conta de facebook e twitter, e

2.1.7 Canais de atendimento A diferença marcante entre uma loja física e um e-commerce é a falta de atendentes físicos. Frequentemente, clientes apresentam dúvidas sobre vários tópicos, entre eles: o processo de pagamento, o mecanismo de troca, preços, protocolos de frete ou até sobre o produto em si. No lugar de empregados físicos, existem canais de atendimento que podem auxiliar os usuários. Dependendo do tamanho da empresa, os canais podem ser muito variados: gigantes corporativos como Ebay e Amazon disponibilizam números de telefone, e-mail, comunidades online e até chats ao vivo com atendentes. Empresas menores geralmente dependem de canais mais simples, como e-mail. Gentil (2014) explica que não basta possuir um layout atraente e responsivo para captar e reter o cliente. Considerando o risco de fraudes em comércios eletrônicos, o processo de decisão de compra é longo:

o cliente busca informações sobre o produto, a empresa e

especialmente sua credibilidade (geralmente através de depoimentos). Canais de comunicação

ajudam a prestar atendimento aos consumidores facilitando uma transação eficiente e tranquila. Transmitir segurança é vital em uma empresa online. No momento, a Moooh!! disponibiliza um e-mail e dois números de telefone. Uma ferramenta de chat poderia responder rapidamente qualquer dúvida de um potencial consumidor. 2.2 DESIGN GRÁFICO Comumente confundido como uma expressão artística, Meggs (1992, p. 13) esclarece que design gráfico é “uma forma de se comunicar visualmente um conceito, uma ideia, através de técnicas formais. Podemos ainda considerá-lo como um meio de estruturar e dar forma à comunicação impressa”. Com o crescimento de interfaces eletrônicas, as teorias deste conceito são bastante usadas no meio de web design. O que diferencia o ato artístico do ato de fazer um projeto de design, diz Fuentes (2006), é que esse é demandado sempre por uma necessidade de comunicação especifica. O autor acrescenta que design gráfico é o integrador cultural dos determinantes expressivos, tecnológicos e econômicos. Ligado aos seus tradicionais meios ‘reais’ (impressos de qualquer tipo) ou flutuando de forma inacessível nos universos virtuais (televisão, cinema, videogames, web, sistemas multimídia etc.), o design gráfico gerou a estrutura invisível que dá existência ás atividades humanas que se entendem como determinantes atuais do ‘desenvolvimento’ da sociedade: o marketing, a moda, as comunicações, o entretenimento e a educação. (Fuentes, 2006, p.19)

Cardoso (2013, p.15) comenta que a função de um designer gráfico é “atribuir significados ao artefato por meio de sua aparência, ou seja, o profissional induz o usuário a ver o artefato de determinada maneira, associando-lhe conceitos abstratos como estilo, status, identidade”. Este é um aspecto importante a ser considerado no web design, já que o talento do designer proporcionará uma identidade visual facilmente reconhecida pelo seu público alvo. Há vários conceitos que abrangem design gráfico, como o uso de cor, de tipografia e de semiótica (entre outros) que serão explicados a seguir.

2.2.1 Semiótica Santanella (1983) define este conceito como a ciência de toda e qualquer linguagem. Derivado da palavra grega σηµεῖον (sēmeion), que significa "signo", ela estuda a construção de significado de palavras ou símbolos. Como diz Rocha (2012 p.1), semiótica “estuda como os mecanismos de significação ou representação de conceitos ou ideias se processam natural e culturalmente”. Aplicado em projetos de design, semiótica visa auxiliar na pesquisa de significados que possam ser atribuídos a cada produto. Todo produto de design, seja gráfico, web ou produto, é um portador de representações. Este transmite sensações e emoções através de seu material, forma, textura, cheiro e muitas outras características. A partir de uma breve análise de suas características, um consumidor pode “sentir” pra quem o produto está destinado. Rocha conclui: Desta forma, em todas as áreas do design, antes de conceber um projeto devemos levar em conta para que tipo de público, faixa etária, sexo, grupo cultural e classe social ele será direcionado, para desenvolvê-lo seguindo tendências de consumo e preferências deste grupo e evitar um eventual fracasso (2012, p.1).

2.2.1.1 Cor Em qualquer projeto de design é imperativo considerar as cores utilizadas. Farina (2011) explica que o impacto que a cor traz está intimamente ligado ao uso que se fará deste elemento. Cor, ele afirma, é uma linguagem individual, a qual o homem reage através de suas condições físicas e influências culturais. Farina continua: A cor é um meio de identificação em numerosos objetos, coisas e letras. Quando um título, uma marca, uma nota de advertência ou uma informação são realizados em cores, torna-se necessário verificar a cor de fundo dos mesmos para se estabelecer e sentir o contraste entre eles. (2011, p. 23)

Ele destaca que a legibilidade e visibilidade facilitam a memorização de detalhes de um projeto. Por exemplo, na cidade de Rio de Janeiro, taxis são amarelos para serem facilmente reconhecíveis.

Para criar um projeto que seja sutilmente entendido pelo público alvo, o designer deve conceber os significados conotativos que temos na nossa cultura. Por exemplo, Enquanto branco significa pureza no Ocidente, no oriente ele representa a morte. Tais nuances culturais devem ser tomados em conta quando se cria um produto. 2.2.1.2 Identidade Visual A identidade visual, de acordo com Vásquez (2007, p.206) é “um sistema de signos criado, organizado e disposto segundo critérios e princípios que visam representar, caracterizar e comunicar a identidade conceitual da marca”. A autora explica que este conceito tem várias funções tais como identificar um produto ou serviço, ter uma diferenciação que o separa dos seu concorrentes, ajudar na associação dos produtos com a marca e reforçar a imagem da empresa. Peón (2001) identifica os dois objetivos principais de uma identidade visual: O primeiro é identificar todos os elementos do trabalho e/ou empresa para poder unifica-los em função dos objetivos da instituição. O segundo é persuadir para obtenção do lucro, promoção ou hegemonia. Através da identidade visual, a empresa deverá provocar uma reação positiva nos olhos do público sobre a marca, para persuadi-lo a comprar os produtos da empresa e não dos seus concorrentes. Peón (p. 23-26) menciona que uma identidade visual deve ser suficientemente original para se diferenciar dos concorrentes, deve ter repetição de elementos básicos que são memorizáveis, unidade, fácil identificação, ser economicamente viável e flexível. A empresa depende do grau de reconhecimento para ser lembrada por possíveis clientes.

2.2.1.3 Tipografia A palavra tipografia, diz Anthony Froshaug (KINROSS, 2001, p.76) [...] significa escrever/imprimir utilizando elementos padrão. Utilizar elementos padrão implica alguma relação modular entre esses elementos; uma vez que tal relação é bidimensional, ela implica a determinação de dimensões que são tanto horizontais como verticais.

Em outras palavras, é o processo de criação da composição de um texto, que pode ser física ou digital. Seu objetivo principal é dar ordem estrutural e facilitar a comunicação impressa de forma que expresse o significado do seu conteúdo. Nielsen (2002, p.23) aconselha que um uso correto de tipografia em um website requer “limitar os estilos de fonte e outros atributos de formatação de texto, como tamanhos, cores, etc. na página, porque o texto com design muito pesado pode se desviar do significado das palavras”. Ele adiciona que deve-se evitar texto com muito contraste e cores fortes no plano de fundo, para deixar o conteúdo o mais legível possível.

2.2.1.3.1 Títulos e subtítulos A homepage precisa de um título de janela simples e objetivo, diz Krug (2006). Os títulos de janelas desempenham um papel muito importante para que o usuário se localize eficazmente na página. O título da janela precisa de uma palavra que resume a informação para facilitar as buscas. O uso de subtítulos ajuda na busca de informação complementar dentro do site. Krug destaca que os títulos não devem ter mais de sete ou oito palavras, o os subtítulos menos de sessenta e quatro caracteres. Isto se deve a que títulos muito longos são menos perceptíveis. 2.3 NAVEGABILIDADE “A navegabilidade traduz-se na facilidade proporcionada ao utilizador na sua visita ao longo da informação e das páginas do site. O lema aqui é: menos cliques e informações necessárias sempre à mão e numa sequência lógica” (ASCENSÃO, 2010, p.1). O autor explica que em cada página deve estar visível um link que remeta facilmente a página principal. Ascensão aconselha evitar páginas do tipo “beco sem saída”; em outras palavras, páginas cuja única maneira de saída é através dos botões “atrás” ou “adiante” do browser6 em vez de um link claro dentro da página. 6 Browser: do inglês “browse” ou “buscar casualmente”, é um programa desenvolvido para permitir a navegação pela web. Exemplos destes são internet explorer, google chrome, Mozilla Firefox, etc.

Krug (2006) afirma que os objetivos de navegação na web são auxiliar a encontrar o que o usuário procura e informar onde ele está na web. Esta é uma das características que deve ser aperfeiçoada no site da Moooh!!, pois sua navegabilidade é muito confusa e com pouca tolerância a erro.

2.4 ARQUITETURA DE INFORMAÇÃO Como afirma Heeter (1989, p.219), arquitetura de informação é “a arte e ciência de organização e rotulação de sites web, intranets, comunidades online e software de apoio à encontrabilidade e usabilidade”. Este conceito coloca muita importância na hierarquia de informação. Se tais princípios forem ignorados, o usuário se confundirá e perderá interesse em explorar a página. É o fator que mais precisa de atenção no site de vendas, objeto deste estudo. O Information Architecture Institute (Instituto de Arquitetura de Informação, 2007, p.1) informa que arquitetos de Informação têm um [...] papel decisivo no desenvolvimento de processos tanto para sistemas de arquivos quanto arquitetura de produto [...]Boas práticas em arquitetura de informação dão suporte ao desenvolvimento de interfaces que facilitam o fluxo de informação útil e relevante para o usuário.

A aplicação deste conceito é mais necessária na homepage, a página principal do site. Nielsen (2002) afirma que esta é a página mais importante em qualquer website, já que é a mais visualizada. Esta tem vários objetivos, enquanto o usuário tem metas variadas. Por exemplo, eles acessam uma homepage para descobrir o propósito da empresa quando estão procurando algum produto, informação ou obtenção de um serviço. Para o autor, homepages confusas oprimem o usuário pois não o ajuda a entender claramente as suas opções. Sem este entendimento, o cliente pode ficar confuso ou envergonhado, e nunca mais voltar para o site; Eles simplesmente abandonarão o site e procurarão outros locais em que se sintam mais acolhidos [...] O desafio está em estruturar uma homepage que permita acesso a todos os recursos importantes, sem abarrotar a página com todos eles. [...], assim como perceber os objetivos dos usuários (NIELSEN, 2002, p. 3).

O foco da arquitetura de informação é organizar a informação de forma clara para o usuário. Para Krug (2006, p. 32), uma das melhores formas de tornar uma página fácil de ser

compreendida é assegurar que a aparência da mesma tenha uma nítida hierarquia visual. Isto é, as dicas visuais devem mostrar claramente o relacionamento entre o espaço e o conteúdo do que está na página. Ele exemplifica que “todas as páginas de jornal, por exemplo, usam destaque, agrupamento e alinhamento para nos passar informações úteis sobre o conteúdo da página, antes que tenhamos lido uma única palavra”. É imperativo que o usuário saiba se localizar dentro de um website, para poder identificar as funções de cada botão e entender que rota ele deve tomar para atingir seu objetivo (KIMEN, 2003). Por isso, arquitetura de informação visa organizar o conteúdo do website para ser eficaz e entendível para todos. Como afirma Shiple (2001, p.33), “Arquitetura de Informação é a fundação para um ótimo web design. Ela é o esquema do website sobre o qual todos os outros aspectos são construídos: forma, função, metáfora, navegação e interface, interação e design visual.”. Arquitetura de informação não só beneficia o usuário, mas também o webmaster encarregado do site. Como menciona Pereira (2003, p.3) Disponibilizar os produtos de forma inteligente ajuda o Google a expor o site no seu famoso mecanismo de busca, provocando um aumento de chance de ser encontrado por possíveis clientes. Arquitetura de informação inadequada é o defeito principal no site da Moooh!!. Como foi mencionado previamente, ela é a confusa, necessitando ser organizada de forma que o cliente possa se localizar e ter uma navegação agradável no website. 2.5 USABILIDADE Entendemos usabilidade como “Efetividade, eficiência e satisfação com que o produto permite atender aos objetivos específicos de usuários específicos em um contexto de uso específico” (ROCHA,2003, p.46). Usabilidade é um conceito fundamental a levar em conta quando se trata de web design. Um site sem usabilidade é basicamente, como o termo insinua, não usável. O público alvo e suas necessidades são o foco de qualquer projeto de design. O fracasso ou o sucesso de qualquer website é medido pelo maior ou menor grau de expectativas alcançadas. Portanto, a eficiência da usabilidade vem da aferição do que o público deseja, e como podemos satisfazê-lo.

Dias (2003, p.28) acrescenta que Usabilidade também pode ser definida como uma medida de qualidade da experiência do usuário ao interagir com alguma coisa –seja um site na internet, um aplicativo de software tradicional ou outro dispositivo que o usuário possa operar de alguma forma.

Acredita-se que a utilidade do conceito de usabilidade é aplicada exclusivamente em websites; mas, realmente ele pode ser aproveitado para qualquer meio eletrônico interativo, como por exemplo, os aplicativos de celulares. Usabilidade está relacionada aos estudos de Ergonomia, que segundo a ABERGO (Associação Brasileira de Ergonomia, 2000, p.1) é [...] uma disciplina científica relacionada ao entendimento das interações entre os seres humanos e outros elementos ou sistemas, e à aplicação de teorias, princípios, dados e métodos a projetos a fim de otimizar o bem estar humano e o desempenho global do sistema. Os ergonomistas contribuem para o planejamento, projeto e a avaliação de tarefas, postos de trabalho, produtos, ambientes e sistemas de modo a torná-los compatíveis com as necessidades, habilidades e limitações das pessoas. A consciência de tomar em conta as necessidades do usuário e criar um produto funcional de qualidade afirma os conceitos de ergonomia e usabilidade.

Também pode ser relacionada com os estudos de interação humano-computador; “a disciplina preocupada com o design, avaliação e implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles” (ROCHA, 2003, p. 14). Este recurso visa a análise de sistemas computacionais e como eles se relacionam com o usuário, característica forte de usabilidade. Segundo a ISO 9241, usabilidade pode ser especificada de diferentes maneiras, por exemplo: facilidade de memorização, onde “após um certo período sem utilizá-lo, o usuário não frequente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele”. Outra especificação é baixa taxa de erros, permitindo ao usuário realizar tarefas sem transtornos. Caso ocorram erros, é capaz de recuperar-se facilmente. Isto não é o caso do website da Moooh!!, que infelizmente possui uma baixa tolerância a erro; isto deve ser solucionado para que o site seja mais manejável por futuros clientes.

2.5.1 Interface Este conceito é definido como [...] uma fronteira compartilhada através de dois componentes separados de um sistema operacional, cujo objetivo é a troca de informações. A troca pode ser entre software7 , hardware 8 , periféricos , usuários e combinações destes . Alguns dispositivos de hardware do computador, como touchscreen, podem enviar e receber dados diretamente através da interface, enquanto outros, como um mouse, microfone ou joystick são apenas comunicação de uma via (IEEE PRESS. 2000. p. 574).

Uma interface deve ter o usuário em mente. Através do mouse e o layout, ele visa simplificar as operações básicas do computador para usuários iniciantes. Os recursos deste são variados, como quadros de advertência, área de transferência, os acessórios de mesa, o desktop, quadros de diálogo, setas de paginação, outros. (NORMAN, 2002). 2.5.1.1 Interatividade Interatividade é definido como “o comportamento interativo da interface experimentado pelo usuário humano” (JENSEN, 1998, p. 43). A interação entre o usuário e interface deverá ser ergonômica, em outras palavras, ajustada a necessidades do consumidor. Uma interatividade pouco satisfatória cria uma experiência frustrante que afasta o cliente do website, perdendo uma oportunidade valiosa de compra de seus produtos. Heeter (1989), afirma que este conceito trabalha com seis dimensões, a seguir: ⎯ Complexidade da escolha disponível: refere-se à quantidade de escolhas disponíveis ao usuário e quanto controle lhe é permitido exercer no website. Ter escolhas em demasia ocasiona

muita

confusão

informação

excessiva,

que

prejudica

cliente;

⎯ Esforço que o usuário deve exercer: quanto esforço o cliente deve fazer para acessar informação. Um site confuso com muitos links e páginas para chegar ao destino é um 7 Software: termo que descreve um programa de computador, que é composto por uma sequência de

instruções. Estes são interpretados e executados por um processador ou por uma máquina virtual. 8 Hardware: termo aplicado à unidade central de processamento, à memória e aos dispositivos de entrada e

saída de um computador (Cagne, 2008 p. 3).

caminho

frustrante,

que

chega

dissuadir

cliente

querer

voltar;

⎯ Responsividade para o usuário: esta é a maneira que o site reage às ações do usuário. A página deve estar em ótimo funcionamento, abrindo links e acessando informação de forma

eficiente

para

necessidades

cliente;

⎯ Monitoramento da informação: o webmaster deve estar ciente das necessidades dos seus leitores, por exemplo, medir a popularidade de um conteúdo, ou cortar o que não atrai o cliente por ser irrelevante, diminuindo o número de pageviews. Através de feedback, pode-se monitorar o site mediante depoimentos de clientes e identificar o que não os deixa confortáveis no seu uso da interface. ⎯ Facilidade de adicionar informação: com novas tecnologias, os usuários atuam como fonte de informação, fornecendo dados que ajudam a comunicação entre outros usuários. A quinta dimensão de interatividade refere-se ao grau que os usuários podem adicionar informações

website,

través

texto,

vídeo

gravações

audio;

⎯ Facilitação da comunicação interpessoal: esta dimensão tem a ver com a facilidade com que a comunicação ocorre entre diferentes usuários. Kiousis (2002, p. 85) declara que A interatividade pode ser definida como o grau em que uma tecnologia de comunicação pode criar um ambiente no qual participantes podem se comunicar (um-para-um, umpara-muitos e muitos-para-muitos) [...] e participar em trocas de mensagens recíprocas.

Portanto, interatividade lida com a capacidade dos sistemas para simular uma comunicação interpessoal. Williams et. all (1998) acrescentam que o foco desta comunicação é o grau de controle que os participantes têm no diálogo. Pouca interatividade é prejudicial em uma loja virtual de roupa; todos os dias há queixas, perguntas ou indicações de clientes que precisam ser ouvidos para ter uma eficiente comunicação entre a empresa e o consumidor. Um cliente quer ser ouvido, e saber que é um recurso valioso e respeitado em qualquer loja, seja on-line ou off-line. Em vista disso,

interatividade é uma ferramenta que deve ser considerada seriamente ao abrir um e-commerce, para garantir uma boa reputação e efetividade da marca.

2.5.2 Responsividade Como afirma Lopes (2013, p. 28), responsividade ou design responsivo é oferecer um único site adaptável através de qualquer dispositivo; em outras palavras, usuários de tablets, navegadores diferentes e smartphones devem poder acessar o website sem dificuldade. Lopes afirma que, para ter um layout verdadeiramente fluído, é necessário imagens que se adaptem à todo tipo de resolução. A prioridade de informação deve ser entregue para todo tipo de plataforma, mas considerando que flexibilidade e adaptação são complicados quando se trabalha com um site fixo em pixels, isto se torna difícil. Ao tornar o website da Moooh!! mais flexível, isto provocaria um alcance maior e mais vendas para a empresa. Ao abrir em várias plataformas, facilitaria bastante o acesso do cliente e promoveria um espaço adaptável e seguro para este. 2.6 ERGONOMIA Ergonomia ou Fatores Humanos é uma disciplina científica cuja preocupação é com a interação entre usuários humanos e outros elementos de um sistema. Sua aplicação se dá através de princípios, teorias, métodos e dados de projeto. Seu objetivo é otimizar o desempenho do ser humano, e de todo o sistema. (THE INTERNATIONAL ERGONOMICS ASSOCIATION, 2014). Aplicado em projetos de web design, ergonomia é o estudo do fator humano, ou seja, criar um sistema tendo em mente as limitações do ser humano em mente. Por exemplo, escolher a cor adequada para daltônicos, a tipografia grande e clara para pessoas com problema de visão, etc. Ergonomia é utilizada para criar um projeto que possa ser apreciado por todos. Isto posto, é possível atrair mais clientes que ficariam no website para explora-lo mais a fundo e, no caso da Moooh!!, talvez efetuar uma compra.

Um website que considera as necessidades dos seus clientes e é devidamente acessível, implica em satisfação e conforto ao usuário. 2.7 E-COMMERCE De acordo com Rosen (2000, p.5) , este conceito se refere a [...] uma modalidade de comércio que realiza suas transações financeiras por meio de dispositivos e plataformas eletrônicas, como computadores e celulares. Um exemplo deste tipo de comércio é comprar ou vender produtos em lojas virtuais.

Inicialmente, o e-commerce era somente usado para vender bens tangíveis com valores modestos; por exemplo, cds e livros. Hoje em dia é possível comprar praticamente qualquer coisa via internet, desde roupas a carros. O primeiro sistema online de compras foi introduzido em 1984, quando a empresa CompuServe abriu o primeiro serviço de compras online nos Estados Unidos (BROWN, 1984) . Com o decorrer dos anos, o aumento da acessibilidade de internet doméstica, o comercio eletrônico tornou-se um gigante no mercado de vendas. Sites de compra se popularizaram e ganharam lucros bastante altos, como Ebay ($4 bilhões) e Amazon ($17 bilhões). O comércio eletrônico no Brasil surgiu em 1995, época da internet comercial. Houve algumas empresas pioneiras nas vendas online, como Livraria Cultura, Grupo Pão de Açúcar, Lojas Americanas, Magazine Luiza e Booknet, (este último mudou de nome para Submarino em 1999). Mesmo com várias opções nacionais, brasileiros e pessoas de outras nacionalidades preferem aproveitar os atrativos preços de lojas internacionais, especialmente as chinesas. Houve uma rápida expansão de comércio eletrônico, e há previsões que continue desta forma. Em 2001 haviam mais de 1,1 milhões de usuários na internet em nosso pais, diz Felipini (2008) , representando de 0,6% da população. Em 2012, segundo dados da empresa eBit, foi constatado que haviam cerca de 40 milhões de consumidores on-line (20% da população), mostrando um crescimento que representava 3.536% no período de 11 anos. Seguramente, tratase de um mercado em rápida expansão com previsão de alta margem de lucro. Jordão (2014) comenta que consumidores atuais querem uma experiência de compra personalizada e divertida. O resultado desta demanda traz conteúdo multimídia para oferecer aos clientes uma experiência mais rica e envolvente.

Há várias vantagens de se ter um e-commerce. Como explica Eugênio (2014) estas incluem: ⎯ Loja aberta 24 horas: o consumidor tem a vantagem de acessar os produtos da loja em qualquer momento e, se desejar, efetuar a compra; ⎯ Vendas sem limites: pela falta de delimitação física, uma loja virtual consegue atender uma demanda grande sem precisar de muitos atendentes. É mais econômico gerenciar um site do que uma loja, assim como fazer uma campanha publicitaria online. Já que o comércio online dispõe de ferramentas apropriadas, como links patrocinados e e-mail marketing; ⎯ Acompanhamento de vendas: com um e-commerce é possível levantar dados para montar relatórios de forma mais acessível e eficiente. O dono do site pode saber quais produtos foram os mais vendidos, quantas pessoas visitaram seu site, etc. Este feedback instantâneo e rápido é fundamental para montar uma estratégia de vendas e atrair mais compradores. Quando entendemos claramente o que é um e-commerce e quais são as vantagens e necessidades, podemos analisar de forma mais eficiente o website. Aportar soluções de problemas de design, neste caso, o re-design de uma loja, requer um conhecimento amplo do meio em que os produtos estão sendo vendidos. Combinando a informação dos conceitos de web design, suas ferramentas e onde atuarão, este projeto poderá ser efetuado de forma eficiente e profissional.

2.7.1 E-COMMERCE em tablets e smartphones. O crescimento do uso da internet em smartphones abriu as portas para um novo conceito pro e-commerce: mobile e-commerce. Como explica Kevin Duffey na sua apresentação no Global Mobile Commerce Forum (1997), este conceito refere-se à entrega de recursos de comércio eletrônico diretamente ao consumidor, através de tecnologia wireless (3G ou Wi-Fi) sem barreiras geográficas.

Desde a máquina de Coca-Cola que aceitava pagamentos via SMS em 1997, este serviço teve uma grande evolução e, de acordo com Walsh (2013, p. 15), é o próximo passo de compras online. No momento o e-commerce via mobile vale 230 bilhões e a maioria dos usuários vem da Ásia (Crosseboom, 2014), mas esta tendência esta se espalhando pelo mundo inteiro, incluindo o Brasil. Um estudo de eBit9 (Guasti, 2014) expõe que “O mobile commerce vem crescendo rapidamente. Em janeiro de 2013, as transações concluídas por dispositivos móveis correspondiam a 2,5% de todas as vendas online. Em dezembro, esse número já era praticamente o dobro: 4,8%. Esses resultados demonstram a força do segmento, que deve se consolidar nos próximos anos. Atualmente, são poucas as lojas online preparadas para as peculiaridades da navegação através de tablets e smartphones. Em 2014, isso deve começar a mudar. A tendência é que muitos varejistas passem a direcionar esforços para se adaptar à mobilidade”

Walsh (2013, p. 16) adiciona que, no futuro, mais consumidores valorizarão compras e pagamentos de bens de qualquer lugar no mundo em seus tablets e smartphones. Isto significa que haverá mais oportunidades para as empresas de todos os países, cuja presença online abre as portas para clientes do mundo inteiro. Walsh também destaca a importância do desenvolvimento de sites ou aplicativos otimizados para dispositivos móveis, e que estes ofereçam uma opção de pagamento simples e segura dado que, por exemplo, digitar os números de um cartão de crédito de 16 dígitos em um smartphone pode ser desafiante. Ele conclui que oito em cada dez consumidores valorizam um site mobile friendly (adaptável a necessidades mobile) para fazer compras e pagamentos. A resposta para esta tendência tem se intensificado majoritariamente na China e no Brasil. Com estes fatos em mente, seria vantajoso para Moooh!! colocar-se à frente de muitas lojas online e adaptar seu website para ser usável em tablets e smartphones. O website poderia se destacar com este diferencial, atraindo um público em crescimento. 9 eBit: empresa formada em 1999, que realiza pesquisas com usuários do meio online, com o fim de analisar e

entender os hábitos de compradores da web. Uma vez por ano esta empresa gera o relatório Web shoppers, cujo conteúdo consiste em informações extraídas destas pesquisas para ajudar vendedores a entender o perfil de seus usuários, além de novas tendências.

2.8 NOMENCLATURA 2.8.1 Carrinho Ferramenta de comércio eletrônico, o software permite que o cliente acumule uma lista de produtos de sua escolha, descrito metaforicamente como "Adicionar ao carrinho", para serem guardados e, finalmente remunerados em um único pagamento. No check-out ou confirmação de compra, o software normalmente calcula o total do pedido, incluindo o transporte, porte postal, embalagem e impostos associados, se estes forem aplicáveis. (TREUNTER, 2011). Figura 2-ícone de “carrinho” mais comumente usado, incorporado no layout novo.

Fonte: Arquivos da autora (2015).

2.8.2 Busca Um motor de busca é um sistema de recuperação de informação, concebido para ajudar a encontrar informações armazenadas em um sistema de um website ou computador. Os resultados da pesquisa são geralmente apresentados numa lista (comumente chamados de hits) . Os motores de busca ajudam a minimizar o tempo necessário para encontrar informações e a quantidade de informação que deve ser exibida, semelhante a outras técnicas de gerenciamento de sobrecarga de informações (MEYER, 2012).

Figura 3-ícone de “busca” mais comumente usado, incorporado no layout novo.

Fonte: Arquivos da autora (2015).

2.8.3 Formas de pagamento Existem várias formas de pagamento disponíveis no ambiente digital, dependendo do país e programas disponíveis pro cliente. No caso da Moooh!!, as formas disponíveis são cartão de crédito internacional (Amex, Mastercard, etc) e Paypal: um método de pagamento muito popular na rede, onde o usuário registra seu cartão e realiza vários depósitos online (PAYPAL, 1999). Neste momento, o website da Moooh!! somente aceita estas formas de pagamento; pagamentos parcelados ou através de boleto bancário não estão disponíveis. 2.8.4 Ferramenta de Chat Como define Levati (2014), O chat é a ferramenta que permite interação de comunicação em tempo real entre pessoas, neste caso, entre o cliente e um representante da empresa. Esta ferramenta cada vez mais usada é encontrada em vários sites ao redor do mundo, como Dresslink ou Romwe, como também em sites nacionais como Ponto Frio ou Casas Bahia com muito sucesso. A ferramenta de chat ajuda o cliente a conseguir respostas sobre suas dúvidas em tempo real, agilizando a experiência de compra e melhorando sua satisfação. Este projeto sugere este canal de atendimento para melhorar a interação do website com seus usuários.

2.8.5 Homepage A Homepage é a primeira página principal de um website. Tem a função, de acordo com Nielsen (2002, p.2) de transmitir “o que a empresa significa, a importância do site em relação à concorrência e ao mundo físico, e os produtos ou serviços oferecidos”. O autor afirma que a homepage deve apresentar três recursos: um diretório com as principais áreas de conteúdo do site, um resumo de notícias ou promoções (se isto se adequa a temática e objetivos da empresa) e um recurso de busca. O usuário inexperiente tende a se sentir oprimido por homepages que não apresentam claramente suas opções. Isto posto, é imperativo ter uma homepage clara e apelativa, que atraia usuários. 2.8.6 Conteúdo O conteúdo é a informação, áudio e/ou vídeo que se encontra dentro de um website. É um dos aspectos mais críticos de web design, requerendo uma criação eficaz (NIELSEN, 2002). Geralmente, usuários não prestam muita atenção ao conteúdo online, preferindo passar os olhos rapidamente quando estão procurando algo específico. Assim sendo, é necessário otimizar o conteúdo para poder transmitir o máximo de informações com o mínimo de palavras, principalmente na homepage. Nielsen (2002) apresenta vários conselhos para otimizar o conteúdo de um website, entre eles: ⎯ Usar seções e categorias de rótulo; ⎯ Evitar conteúdo redundante; ⎯ Utilizar uma linguagem entendível pelo público alvo; ⎯ Usar padrões de estilo com consistência; ⎯ Não rotular uma área nitidamente definida da página se o conteúdo for suficientemente autoexplicativo; ⎯ Evitar categorias e listas específicas demais; ⎯ Utilizar espaços entre palavras; ⎯ Usar discurso imperativo;

⎯ Explicar abreviações, iniciais ou acrônimos que o público desconheça; ⎯ Evitar pontos de exclamação; ⎯ Evitar uso inadequado de espaços e pontuação para dar ênfase.

3. MERCADO O mercado de roupas de estilo alternativo teve um grande crescimento nos últimos dez anos. Esta é uma moda que vai contra os estilos comercias do mainstream10 e se divide em várias subculturas específicas, as mais famosas sendo o punk e gótico. Seria errôneo generalizar que esta moda se restringe a cores escuras e modelos tenebrosos: pelo contrário, há vários estilos com diferentes graus de popularidade. (MCKELL ,2004). Em geral, moda alternativa não está de acordo com as tendências de estilo vigentes. Pode se apresentar como um estilo que chama bastante atenção, com uma tendência mais artística do que prática. De outra maneira, eles também se desenvolvem a partir de sentimentos anti-moda que se concentram em roupas simplistas, por exemplo: a moda grunge, que foi em grande parte baseada em torno de conforto e de disponibilidade (ELISA, 2013). Moda alternativa é geralmente associada com subculturas, tendo suas origens ligadas a diferentes movimentos e gostos compartilhados, por exemplo: ⎯ Modas antigas ou vintage cujos elementos são incorporadas por uma nova geração com nomes como Pin-up girl, Rockabilly, Moda vitoriana, outros; ⎯ Inspiração de street fashion de outros países, como a moda das ruas de Harajuku no Japão ou Bond Street de Inglaterra; ⎯ Identificação com tipos de arte visual, como pintura, cinema e televisão; ⎯ Imitação de celebridades notáveis : autores, modelos, músicos, atores, outros; ⎯ Gosto e estética pessoal; ⎯ Atitudes pessoais para conceitos como individualidade, o consumismo, construções sociais e auto expressão (BENNET, 2004). Tradicionalmente roupas alternativas são, em grande parte, adquiridas de empresas de propriedade independente, como as boutiques encontrados em bairros boêmios e centros artísticos de grandes aglomerados urbanos. São populares na América do Sul a Galeria do Rock 10 Mainstream: conceito que expressa uma tendência ou moda principal e dominante. A tradução literal de mainstream é "corrente principal" ou "fluxo principal" .

em São Paulo e Bond Street em Buenos Aires. Atualmente grande parte deste comercio migrou para o meio virtual, onde tem alcançado grande margem de lucro: via internet, um vendedor pode alcançar um público maior através de publicidade online e sites de venda. 3.1 ANÁLISE DE TENDÊNCIAS As evidências empíricas, observadas em sites como Ebay, Storenvy, Etsy e DressLink, indicam que está ocorrendo uma provável saturação na oferta de roupas estilo mainstream. Consequentemente, estas lojas aumentaram sua oferta de roupa alternativa, provando uma evolução no foco do público alvo. É possível acompanhar o crescimento de lojas conhecidas por vender mercadorias deste estilo. Por exemplo, a loja Hot Topic,a marca mais famosa nos Estados Unidos na venda de roupa alternativa e camisetas de bandas de rock, cresceu bastante nos últimos anos, mostrando um rendimento de USD$8 milhões em 2010 nas redes de lojas físicas. As vendas de loja online também cresceram, de USD$30.100 em 2008 a USD$40,000 em 2010 (WIKINVEST, 2011). Etsy, site famoso onde pessoas vendem peças feitas à mão, uma característica principal da confecção de roupa alternativa, ganhou mais de um bilhão em vendas em 2013 (DICKERSON, 2014). Black Milk, loja exclusivamente online que vende leggings e vestidos com estampados pouco comuns, cresceu exclusivamente através de mídias sociais como facebook; Ganhou milhões em vendas (KHAN, 2014) e hoje a marca tem mais de 700.000 fãs, que se dão o apelido de “sharkies” (tubarãozinhas). Até lojas mainstream brasileiras estão cientes da popularidade de moda alternativa; as leggings estampadas com a imagem de uma galáxia roxa pela Black Milk em 2009, foram copiadas pela marca brasileira Blue Steel e colocado à venda em 2013 nas Lojas Renner.

3.1.1 Público alvo O público alvo do website da Moooh!! está focado em mulheres, entre 14 e 28 anos. Elas gostam de estilos de roupa e acessórios baseados na moda street fashion11 de Harajuku, assim nomeado em alusão a uma famosa rua no Japão onde adolescentes ostentam seus estilos rutilantes. Como brevemente explicado no mercado, características comuns deste público incluem gostos musicais fora do mainstream, como rock, punk, e artistas pop do Japão ou Coréia. Geralmente encontra-se uma necessidade de se separar e ir contra o que a sociedade espera, e isto é expressado através de roupas chamativas. Como explica Gelder (2007), estas pessoas apresentam algumas tendências comuns, como por exemplo desinteresse na “ordem moral comum”, mostrando uma atitude ociosa, parasitária, hedonista ou criminal. O indivíduo prefere desenvolver sua "família" em comunidades fora dos paradigmas tradicionais, e desconfia de produtos de produção em massa, homogeneidade de comportamento e constrições socialmente impostas. Na loja da Moooh!!, está disponível roupas para cada subgênero de street fashion de Harajuku, entre eles, como explica Macias (2007): ⎯ Lolita: estilo de roupa que lembra as bonecas da época vitoriana. Sua intenção é parecer elegante ou modesta, com um toque infantil. Inclui vestidos ou saias rodadas no comprimento do joelho, suportadas por anáguas, para ter forma de sino; ⎯ Cosplay: da palavra costume play (brincar de fantasia), é um movimento de pessoas que se vestem como personagens de animes (animação japonesa), filmes, livros ou videogames populares. Este hobby também inclui atuar como o personagem; ⎯ Decora: contração de decorative, ou decorativo. A pessoa se veste com roupas coloridas e acessórios de plástico considerados “fofos” ou adoráveis, geralmente com personagens 11 Street Fashion: moda originada nas cidades urbanas.

de desenhos animados. O estilo é muito exagerado e com cores chocantes ou pasteis; ⎯ Gal: estilo que imita as celebridades americanas; conhecido como elegante e muito parecido com o estilo high fashion 12do Ocidente. Inclui o uso de produtos de marcas caras,

como

Chanel,

Versace,

Dolce

Gabbana

Gucci;

⎯ Visual Kei: estilo que imita cantores de rock japoneses; inclui maquiagem dramática com olhos e boca pintados de cores escuras, roupas pretas, detalhes metálicos e correntes. 3.1.2 Concorrência A loja Moooh!! enfrenta uma grande concorrência, já que seu público alvo é disputado com outros estabelecimentos do mesmo gênero; vários destes adquirem os produtos da mesma distribuidora chinesa. Lojas como estas incluem Spreepicky, um site que vende exatamente os mesmos produtos, do mesmo estilo. Comparando os dois, este tem um layout mais organizado e atraente, especialmente observando a arquitetura de informação e arranjo das categorias de produtos. Figura 4- website de Spreepicky

Fonte: Site Spreepicky (2015)

12 High Fashion: estilo de roupa de famosos designers de moda, como Chanel, Louis Vuitton, etc.

Harajuku fashion é outra clara competidora da Moooh!!, e novamente vemos os mesmos produtos sendo vendidos embora num site cujo design é minimalista e mais facilmente navegável. Os descontos são destacados claramente as informações da loja visíveis e organizados. São estas características (boa organização de produtos, site com melhor usabilidade, entre outras) que podem desviar a vista do usuário da Moooh!! para sites mais accessíveis e fáceis de manejar.

Figura 5- website de Harajuku Fashion.

Fonte: Site Harajuku Fashion (2015)

É difícil nomear todos os concorrentes desta loja online no mercado off-line, dado que existem lojas que oferecem moda em seus próprios boutiques e lojas nos seus respectivos países. Apesar disso, podia-se considerar os famosos gigantes de moda alternativa que se encontram como possíveis concorrentes. Por exemplo, no subgênero Lolita temos Angelic Pretty e Baby the Stars Shine Bright. A marca 6% Doki Doki é um claro competidor cujos produtos são para o público que se veste no estilo Decora em quanto Moi-même-Moitié e SEX POT ReVeNGe são os gigantes de moda do estilo Visual Kei. Os websites destas marcas são ligeiramente poluídos, entretanto eles apresentam as seguintes vantagens: reputação favorável e público fiel. Estas características compensam as falhas dos sites. Como eles ganharam reputação e público fiel se é ruim?

Figura 6: website de Angelic Pretty.

Fonte: http://www.angelicpretty.com/en (2015)

Figura 7: website de SEX POT ReVeNGe.

Fonte: http://sexpot.jp (2015)

Em nível internacional, poderíamos nomear algumas lojas de departamento que, ocasionalmente, contemplam este público, desde H&M, Forever 21 e Aeropostale . Curiosamente, estas três marcas possuem um web design muito similar, como o uso de preto e branco como cores principais e elementos quadrados. Suas informações e categorias são organizadas, apresentam publicidades sobre novas linhas de roupas, e destacam os produtos mais vendidos. Figura 8: website de Forever 21.

Fonte: http://www.forever21.com (2015).

No mercado brasileiro, ocasionalmente vemos roupa alternativa nas Lojas Renner. Esta marca possui um website bem estruturado e por isso eficiente, com setores claros para cada elemento, e ainda componentes interessantes, tais como: saudações personalizadas para cada cliente e um sistema de filtro eficaz para os produtos.

Figura 9: website da Renner.

Fonte: http://www.lojasrenner.com.br (2015).

4. ANÁLISE DOS RESULTADOS Das 21 pessoas que testaram o site, a maioria era parte do público alvo da marca, 65% mulheres, 90% entre 18 a 24 anos. Aproximadamente 50% referia pouca experiência de compras online, ajudando a diversificar os resultados dos relatos sobre o uso do site da Moooh!!. Uma parte predominante disse ter comprado os produtos para si próprios motivados pela oferta, no site, de roupas incomuns e acessórios. A ideia inicial para a coleta de informações era a de se aplicar um questionário com perguntas fechadas. Isto poderia trazer um resultado quantificável sobre a satisfação do cliente com os diferentes aspectos do site. Além disto, o investigador ficaria de posse de dados sólidos sobre quais pontos modificar. Contudo, ao elaborar as perguntas notou-se que daquela forma o usuário teste ficaria com sua participação limitada visto que ele não teria espaço para sugestões e comentários, bloqueando ao pesquisador possíveis melhorias do site. Freitas (2001) afirma que ter um olhar profundo dos clientes ajuda a designar a relevância de certos critérios sob o ponto de vista deles, os avaliadores. Com isto, pode-se verificar a existência de incomparabilidades entre os julgamentos feitos pelo investigador sobre que problemas devam ser resolvidos, e determinar a dinâmica da criação do produto (neste caso, um website). Foi utilizado então, um questionário mais aberto, permitindo ao usuário mais liberdade para falar sobre sua experiência e incentivando que o mesmo mencionasse qualquer recomendação ou melhora que não tivesse sido referida previamente.

90% dos usuários teste informaram que a experiência foi negativa, descrevendo-a como “estressante”, “confusa” e “desconfortável”, entre outros. A razão predominante citada foi: as categorias de roupas e acessórios estavam extremamente desorganizadas, ocupando muito espaço na página, distraindo o cliente. Outras frustrações se devem à falta de mecanismo de busca e um layout pouco atraente. Os screencaptures demonstram esta frustração claramente, apresentando pausas longas enquanto o usuário tenta procurar algum produto, tentando se localizar no site e buscando informações. Por outro lado os aspectos positivos mencionados incluem produtos atraentes, capturando com sucesso a atenção dos usuários. O texto, pelo menos para os examinadores jovens, se mostrou legível com cores consideradas aceitáveis. Especialmente apreciada foi a informação adicionada aos produtos, como suas medidas e seu modo de lavagem. A respeito das sugestões sobre como melhorar a experiência do usuário no site, muitos apontaram para um mecanismo de busca que facilitasse a procura de mercadorias. Parte, solicitava um setor de sugestões de produtos, elemento motivador para efetuar as compras. Por último, a menção relativa a mais destaque nos descontos algo importante para motiva-los a comprar mais13. Seguindo a recomendação de Bonsiepe (2012), foi feito uma hierarquização dos problemas do site a serem resolvidos, para poder estabelecer prioridades na resolução destes e, entender quais eram os elementos que precisariam de mais atenção. Baseados nos dados colhidos, consideramos que podemos melhorar o site levando em conta os aspectos positivos que serão mantidos, os negativos que devem ser alterados e as sugestões de elementos que aprimoraria a experiência de compras no site da Moooh!!.

13 Veja APÊNDICE B para ver os resultados completos tabelados.

5. LAYOUT O novo layout foi criado com base nas sugestões e necessidades apresentadas pelos usuários teste. Além disto, websites de e-commerce existentes foram usados como referência: sites de lojas internacionais bem sucedidas como Zara, TopShop e New Look foram analisados na tentativa de detectar suas estratégias para atrair e reter clientes. Considerando que o público da Moooh!! é internacional, foi decidido fazer o website em inglês, já que esta é uma língua franca global (CRYSTAL, 2003), e o tamanho de layout escolhido foi 1366×768 pixels, que é a dimensão mais atualmente (LARDINOIS, 2015). Foram planejados diferentes conceitos e wireframes14 para ter uma ideia clara do posicionamento de elementos dentro da interface e, depois de muita deliberação e comparações entre estes, o guia visual escolhido foi o que apresentou melhor organização, ergonomia, hierarquia de informação e que melhor atendesse às necessidades dos usuários teste e futuramente aos possíveis clientes.

14 Wireframe: um guia visual básico que planeja a estrutura de um website e a relação entre os elementos da

página. Ele apresenta um layout de elementos fundamentais para a desejada interface (BROWN, 2011).

Figura 10 –Exemplos de opções de wireframe ideadas.

Fonte: Arquivos da autora (2015).

As primeiras modificações implementadas no website, foi a remoção da extensa lista de categorias, considerada específica e demasiadamente confusa. A correção foi feita a través de uma barra com quatro categorias para simplificar o processo de busca. Considerando que foi especialmente solicitado um alerta visível de que o site oferecia produtos masculinos, foi feita uma clara distinção entre produtos para homens e mulheres, acessórios e artigos de casa, anteriormente todos misturados. Ao clicar qualquer dos dois primeiros, o usuário se depara com três categorias: “Tops” (roupas que vestem a parte de cima), “Bottoms” (roupas que vestem a parte de baixo) e sapatos. Clicar em qualquer destas categorias abre uma última categoria, apresentando opções mais específicas, por exemplo, ao clicar “sapatos” são sugeridos diferentes tipos, como modelos de saltos, botas, chinelos, etc. Adicionalmente foi implementada uma ferramenta de busca, algo altamente solicitado por quase todos os usuários teste, para facilitar a procura de produtos específicos. Ao seu lado foi colocado o carrinho de compras, que pode ser facilmente acessado para ver, a qualquer momento, quantos produtos foram escolhidos e o preço total. O padrão mais surpreendente encontrado em websites de e-commerce de moda foi o uso de vários anúncios sobre produtos da loja na sua própria página. Se tornou evidente que isto é usado para motivar o cliente a comprar mais do que ele procura, usando a atração de coleções de roupas novas ou destacando promoções. O grande objetivo destes elementos é incentivar o máximo de vendas e foi decidido usar este padrão quando planejamos o novo website da Moooh!!. Para definir a ordem dos anúncios foram analisados novamente os dados dos usuário teste. As sugestões mais solicitadas eram exibir mais claramente promoções, mostrar a diversidade dos estilos de roupas, e notificar a presença de produtos masculinos. Os anúncios foram organizados obedecendo a esta hierarquia.

Figura 11 - Wireframe final.

Fonte: Arquivos da autora (2015).

5.1 ELEMENTOS O novo website possui vários elementos, entre eles o novo botão de busca (representado por uma lupa) e o carrinho de compras, cujos formatos são arredondados para seguir a temática da logomarca e o tom jovem do estilo da Moooh!!. Foram adicionados atributos como a exposição de novas linhas de roupa na homepage, para que clientes tenham conhecimentos das novidades da loja. Na página de compras, foi adicionado um setor que apresenta os últimos produtos vistos pelo cliente, para que ele possa rever mercadorias que talvez possam interessa-lo novamente. Também foi adicionado outro setor que exibe quais produtos são mais comumente comprados em associação ao produto visto pelo cliente. Esta estratégia é utilizada em vários

websites de e-commerce, já que ela apresenta produtos pelos quais o usuário poderia se interessar, e que talvez não seriam vistos sem a ajuda desta ferramenta. Ademais foram introduzidos anúncios de blogueiras, cuja reputação e seguidores possam ajudar a reforçar a familiaridade e confiabilidade da marca. Como anteriormente explicado, mídias sociais cresceram bastante nos últimos anos, principalmente influenciando hábitos de consumo; a possibilidade de compartilhar conteúdo ajuda a transformar a marca em algo mais identificável. A campanha de hashtag

para o site da Moooh!! poderia ser utilizada para

aproveitar esta tendência. Nela, um cliente da loja enviaria uma foto dele usando roupas, sapatos ou acessórios da marca usando o hashtag #MyMoooh, que facilitaria a empresa a localizar a foto. Esta seria exibida no site, ajudando a destacar clientes satisfeitos e serviria de exemplo, para possíveis compradores, de como as roupas são usadas em pessoas comuns e não apenas em modelos profissionais. Todas estas novas adições foram organizadas de maneira que fossem visíveis claramente pelo usuário e separadas por quadrados brancos com bordas finas e pretas. Tendo este layout elas podem ser localizados com facilidade pois não contrastam excessivamente com o resto da temática do site. 5.1.2 Cor A escolha das cores do website se deu a partir de dois fatores: a reação dos usuários teste em relação às cores originais e a ideia de criar um layout com cores harmoniosas que remetessem à identidade visual da marca. A maioria dos usuários respondeu com indiferença às cores, especificando que, embora sua combinação não fosse especialmente provocativa, era neutra e desinteressante. Isto gerou uma oportunidade de apresentar uma nova paleta que atraíra o cliente, ajudando a

15 Hashtag: Utilizada na categorização de conteúdos nas redes sociais, consiste de uma palavra-‐chave antecedida pelo símbolo #, (conhecido mais comumente como "jogo da velha" ou "quadrado") (BOURKE, 2009).

solidificar uma identidade visual memorável, mas cuidando para que esta não distraísse ou irritasse os olhos. Por fim foi decidido usar as cores da logomarca da Moooh!! (verde azulado claro e cereja) para que o website tenha uma identidade visual coesiva e se destacasse entre seus competidores, que geralmente usam combinações de preto e branco. Para exibir a seleção de produtos, foi considerado que o fundo deveria ser de uma cor clara e neutra, visto as mercadorias serem muito coloridas. Foi escolhido o cinza claro. Se a cor escolhida fosse forte ou brilhante demais, o foco sobre o produto seria perdido e o contraste forte irritaria os olhos, dissipando o interesse do cliente. O verde azulado, sendo uma cor mais suave, foi usada para o menu, enquanto seus variantes mais claros e escuros foram utilizados para mostrar ao usuário se um botão foi clicado. Nas extensões do menu este critério foi igualmente aplicado, dado que o contraste entre os tons ajuda o usuário a ver claramente onde o menu começa e termina. A cor de destaque utilizada foi cereja, uma cor brilhante para atrair a atenção do usuário. Esta é especialmente usada no layout para ressaltar links e descontos –algo muito procurado por potenciais consumidores. Por último, a cor usada para a maioria dos textos foi cinza escuro para que ficasse claramente legível e manter-se combinando harmoniosamente com o restante das cores do layout.

Figura 12- Lista de cores definidas no layout.

Fonte: Arquivos da autora, 2015),

5.1.3 Tipografia A escolha da tipografia foi realizada ao analisar a logomarca da Moooh!!. Observamos que esta tinha um formato arredondado, expressando uma ideia de energia e juventude. Com isto em mente, os títulos tinham que expressar uma ideia similar mas ainda serem legíveis e claros, cuidando para não ficasse demasiadamente juvenil. Foi assim que Odin Rounded foi a tipografia escolhida, já que ela possui todas estas características. Para assegurar que o layout não tivesse somente um tipo de fonte, que poderia ser considerado monótono, foram escolhidas Swis 721 Bt e Swis 721 Lt BT para os textos mais longos e alguns links; esta é uma fonte muito clara e precisa que é facilmente legível especialmente em parágrafos longos e seu estilo sem serifa e estreito combina esteticamente com os formatos quadrados dos menus do website. Figura 13 – Seleção de fontes para o layout.

Fonte: Arquivos da autora, 2015.

Figura 14- Fontes definidas no layout.

Fonte: Arquivos da autora, 2015.

5.2 DESIGN VISUAL DO WEBSITE Nesta seção encontra-se o resultado final de nosso estudo: o layout das páginas do novo website da Moooh!!. Serão apresentados detalhes dos elementos gráficos da página além de componentes da navegação.

Figura 15–Homepage completo do website.

Fonte: Arquivos da autora, 2015.

Uma das principais modificações do layout foi a organização de categorias. Na imagem acima, encontra-se um exemplo de uma busca específica (No setor de homens, roupas de cima, camisas formais) que é ressaltado com cores mais escuras, para o usuário saber que está em outro setor. Também se pode ver a figura de um triângulo, para o cliente entender em qual categoria específica ele está clicando.

Figura 16–Homepage do website, visto no browser.

Fonte: Arquivos da autora, 2015.

Figura 17–Escolha de categorias.

Fonte: Arquivos da autora, 2015.

Uma sugestão que ajudaria muito a imagem da Moooh!! seria a criação de um chat para que o cliente tenha a opção de conversar diretamente com a empresa sobre suas dúvidas, em tempo real. Com isto incorporado, o usuário se sentiria satisfeito e informado rapidamente, agilizando seu processo de compra.

Figura 18–Chat online com representante da empresa.

Fonte: Arquivos da autora, 2015.

Aqui encontra-se uma exemplificação da campanha “#MyMoooh!!” no website. Com este hashtag e através de mídias sociais como Twitter e Instagram, a loja encontraria as fotos e as apresentaria nesta página, para mostrar a satisfação de clientes anteriores e a qualidade dos seus produtos, desta forma incentivando compras e criando uma reputação social e positiva no setor de e-commerce.

Figura 19–Página da campanha “#MyMoooh!!”.

Fonte: Arquivos da autora, 2015.

Figura 20–Fotos da página da campanha “#MyMoooh!!”.

Fonte: Arquivos da autora, 2015.

A ferramenta de filtro foi incorporada para facilitar a busca do cliente sob as diferentes especificações possíveis: preço, tamanho e cor. Figura 21–Ferramenta de filtro para facilitar a busca do cliente.

Fonte: Arquivos da autora, 2015.

Figura 22–Ferramenta de filtro em uso.

Fonte: Arquivos da autora, 2015.

A página de compra contém elementos que ajudam o cliente a especificar qual tamanho, cor e quantidade do produto desejado. Ao mesmo tempo, foi incluído um setor para sugerir outras mercadorias que poderiam interessar ao usuário, além de uma área que apresenta

produtos que foram vistos até o momento. Isto ajudaria a incentivar mais compras, melhorando os ganhos da empresa. Figura 23–Página de compra do produto.

Fonte: Arquivos da autora, 2015.

Para facilitar o processo de compra, especialmente para usuários inexperientes, foi incorporado uma página que apresenta claramente o próximo passo depois de adicionar um produto ao carrinho: continuar a navegar, ou proceder ao “checkout”, (finalizar a compra).

Figura 24–Página apresentando o processo de adicionar um produto ao “carrinho”.

Fonte: Arquivos da autora, 2015.

A página de revisão de compras foi feita para que o cliente possa reavaliar seu pedido, como conferir informações e preços de frete. O botão de “compre agora” com o valor total é maior e colocado de maneira clara, para ser notado. Aqui terminaria o processo de checkout. Continua com a parte de informações do cliente, como números de cartão de crédito e seu endereço para o produto ser pago e enviado, de acordo como consta no site original da Moooh!!.

Figura 25–Página de revisão de compra.

Fonte: Arquivos da autora, 2015.

Figura 26–Página de revisão de compra, explicando tipos e preços de frete.

Fonte: Arquivos da autora, 2015.

5.3 LAYOUT TABLET/MOBILE O planejamento da versão tablet/mobile teve como base o novo website da Moooh!! onde foram desenhadas várias opções de wireframes com algumas modificações, especialmente na função de elementos do site e seus tamanhos. Os smartphones mais recentes de diversas marcas variam entre 4,0 a 5,5 polegadas em média e deve ser considerada a diversidade de tamanhos de mãos entre homens e mulheres, adolescentes e adultos (o público alvo deste website). Tablets, por outro lado, variam desde 7,0 a 10 polegadas (STERN, 2012); suas maiores proporções com melhor espaçamento resulta num layout mais facilmente interativo. A versão do e-commerce no smartphone da Moooh!! foi simplificada; os anúncios da homepage foram cortados e houve mais foco em uma interface funcional, minimalista e com imagens e botões maiores para adaptar-se a qualquer tamanho de dedo. Foram mantidos somente os textos mais pertinentes e foi feito uma redução na quantidade de produtos exibidos por página. Isto foi implementado visando controlar o excesso de informação e o sobrecarregamento o website, que poderia causar demoras no loading das páginas. A justificativa das suas cores e formatos, por outro lado, continua sendo a mesma apresentada no planejamento do novo site.

Figura 27- wireframe final da versão mobile/tablet.

Fonte: Arquivos da autora, 2015.

5.4 DESIGN VISUAL DA VERSÃO TABLET/MOBILE DO WEBSITE Esta seção apresentará o layout das páginas da versão tablet/mobile do novo website da Moooh!!. Como anteriormente, serão apresentados detalhes dos elementos gráficos da página além de componentes da navegação. Figura 28 -Homepage completo da versão tablet/mobile do website.

Fonte: Arquivos da autora, 2015.

Figura 29–Homepage visto em um tablet e smartphone.

Fonte: Arquivos da autora, 2015.

Figura 30 –Seleção de categorias.

Fonte: Arquivos da autora, 2015.

O filtro de categorias da versão tablet/mobile é similar ao da versão web, mas foi simplificado para carregar mais rapidamente e adaptar-se a diferentes tipos de mãos. Figura 31–Filtro de categorias versão tablet/mobile.

Fonte: Arquivos da autora, 2015.

Figura 32–Processo de compra versão tablet/mobile.

Fonte: Arquivos da autora, 2015.

Nesta versão do layout foram suprimidos a maioria dos elementos. Somente as informações necessárias foram mantidas, além da opção de compartilhamento para mídias sociais e sugestões de produtos.

Figura 33–Processo de compra versão tablet/mobile: carrinho de compras.

Fonte: Arquivos da autora, 2015.

Figura 34–Processo de compra versão tablet/mobile: etapa final.

Fonte: Arquivos da autora, 2015.

6. CONCLUSÃO O projeto do novo website da Moooh!! ajudou a adquirir novos conhecimentos sobre a área de web design, como seu planejamento, desenvolvimento e aplicação. Apesar de algumas respostas já serem esperadas, por exemplo, relativas a insatisfação dos usuários com a organização das categorias, a análise dos resultados também foi particularmente reveladora no que se referiu a sugestões exigidas pelos usuários. Este fato sinalizou para a mudança na metodologia; ao invés de questões completamente fechadas como havia sido planejado no inicio, optou-se por perguntas mais abertas e encorajamento de sugestões, algo que aportou bastante conhecimento na área e novos elementos a implementar. Considera-se que este projeto alcançou os objetivos estabelecidos. As referências bibliográficas utilizadas sobre vários conceitos de design: arquitetura de informação, usabilidade, etc; permitiram uma clara análise do website, que somadas as sugestões aportadas pelos usuáriosteste, auxiliaram no estabelecimento de uma base para a criação de uma nova proposta. Esta foi planejada incorporando as necessidades dos clientes e adicionando novos elementos para incentivar as vendas. Estes elementos, juntos com o layout de tablet/mobile, permitiram dar ao website da Moooh!! um diferencial, colocando-o a frente dos seus competidores. Podemos considerar que a participação de uma equipe maior e multidisciplinar, poderia ter contribuído para que este projeto pudesse ter alcançado resultados ideais. Por exemplo, uma parceria com a empresa da Moooh!! para ter dados oficiais, uma equipe de marketing especializada em compras online e programadores para tornar o site completamente funcional e obter feedback. Espera-se que este novo layout, com as considerações dos usuários, preencha os requisitos de arquitetura de informação, usabilidade e interatividade, necessárias para compras online. Além disto, que funcione como precedente para futuros web designers na elaboração de outros estudos sobre e-commerce e criação de interfaces.

REFERÊNCIAS ABERGO. O que é Ergonomia , 2000 Disponível em: <http://www.abergo.org.br/internas.php?pg=o_que_e_ergonomia > Acesso em: 9 oct. 2014. ASCENSÃO, Carlos. Usabilidade e Navegabilidade Disponível em: <http://www.portalwebmarketing.com/SEO/UsabilidadeeNavegabilidade/tabid/444/Default.aspx > Acesso em: 27 oct. 2014. BECHARA, Evanildo. Dicionário escolar da língua portuguesa/Academia Brasileira de Letras. 2. ed. São Paulo: Companhia Editora Nacional. 2008. p. 1 187. BECK, Martin. Special Report: Will People Ever Buy Through Social Media? Disponível em: <http://marketingland.com/will-e-commerce-finally-cash-social-media-111810 > Acesso em: 10 abr. 2015. BENNET, Andy. After Subculture: Critical studies in contemporary youth culture, Basingstoke: Palgrave Macmillan, 2004. BERNERS-LEE, T., FISCHETTI, M. Weaving the Web : The original design and ultimate destiny of the World Wide Web by its inventor, San Francisco: Harper San Francisco, 1999. BONSIEPE, Gui. Design como Prática de Projeto. São Paulo: Editora Blucher. 2012. BOURKE, Jane. Communication Technology Resource Book. Melbourne: Ready-Ed Publications. 2009. p. 19. BROWN, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning 2nd ed. San Francisco: New Riders. 2011.

BROWN, GS. The Electronic Mall. Online Today, Texas City, v.15, n. 3, p. 1, abr 1984. CAGNE, G. SILBERSCHATZ, A., BAUER P., G. Sistemas Operacionais com Java. 7. ed. Rio de Janeiro: Campus, 2008. 672 pp. p. 3. CARDOSO, Rafael. Design para um mundo complexo. São Paulo: Cosac Naify, 2013. p.13. CARPANEZ, Juliana. Receita do comércio on-line cresce 400% Folha de S. Paulo: Mercado. São Paulo, p.1, mar. 2005. Disponível em: <http://www1.folha.uol.com.br/fsp/dinheiro/fi2903200542.htm >. Acesso em: 15 oct. 2014. CRYSTAL,David. English as a Global Language 2nd ed. Cambridge: University Press. 2003. p. 69. DIAS, Cláudia. Usabilidade na web: Criando portas mais acessíveis, Rio de Janeiro: Altabooks, 2003. DICKERSON, Chad. Notes From Chad: Creating an etsy economy, together. Disponível em: <https://blog.etsy.com/news/2014/notes-from-chad-creating-an-etsy-economy-together/ > Acesso em: 31 oct. 2014. DUFFEY, Kevin. Global Mobile Commerce Forum, 10 de Novembro de1997. Disponível em: < http://cryptome.org/jya/glomob.htm> Acesso em: 3 mai. 2015. ELISA. Style Bizzare: Alternative fashion is trendy, 02/07/2913 Disponível em: <http://www.stylebizarre.com/2013/07/alternative-fashion.html > Acesso em: 27 oct. 2014. ELSTROM P. HOF, R.D., BROWDER S. Internet Communities. Bloomberg Business Week, Edição Europeia. Maio de 1997 p. 38-47.

EUGÊNIO, Marcio. Quatro motivos para abrir uma loja virtual Disponível em: < http://ecommercenews.com.br/artigos/cases/quatro-motivos-para-abrir-uma-loja-virtual > Acesso em: 8 oct. 2014. FELIPINI, Dailton. E-commerce 11 anos: Uma explosão de crescimento, Disponível em: <http://www.e-commerce.org.br/artigos/ecommerce-11anos.php > Acesso em: 8 oct. 2014. FREITAS, Policani Luis André. Uma metodologia multicritério de subordinação para classificação da qualidade de serviços sob a ótica do cliente 2001. Tese (Doutorado) – Universidade Estadual do Norte Fluminense ,Campos dos Goytacazes, 2001. FUENTES, Rodolfo. A pratica do design gráfico, São Paulo: Rosari, 2006. GELDER, Ken. Subcultures: Cultural histories and social practice, Sydney: New Ed. 2007. GENTIL, Gustavo. Qual a Importância do Atendimento em um Ecommerce? Disponível em: < http://www.veinteractive.com/pt/blog/20140728/qual-import%C3%A2ncia-do-atendimentoem-um-ecommerce> Acesso em: 12 abr. 2015. GOOGLE Inc. The Customer Journey to Online Purchase Disponível em: < https://www.thinkwithgoogle.com/tools/customer-journey-to-onlinepurchase.html#!/brazil/shopping/medium/social> Acesso em: 10 abr. 2015. GUASTI, Pedro. Relatório Webshoppers 2014. São Paulo: eBit; 2014. 29º edição. HEETER, C. Implications of New Interactive Technologies for Conceptualizing Communication In: SALVAGGIO, L.J, BRYANT,J., Media Use in the Information Age: Emerging patterns of adoption and computer use, London: Routledge ,1989. p. 227.

IEEE 100. The Authoritative Dictionary Of IEEE Standards Terms. New York: IEEE Press. 2000. pp. 574–575. INFORMATION AQUITECTURE INSTITUTE What is Information Architecture?, Tradução: Bruno Galera. Disponível em <http://iainstitute.org/en/learn/resources/what_is_ia.php> Acesso em: 9 oct. 2014. ISO 9241: 11. Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems Disponível em : <http://www.iso.org/iso/catalogue_detail.htm?csnumber=52075> Acesso em: 6 nov. 2014. JENSEN, J.F. Interactivity: Tracing a new concept in media and communication studies, Nordicom Review 19(1): p.185-204. 1998. JORDÃO, Ricardo. O futuro das compras Disponível em: <http://ecommercenews.com.br/artigos/cases/o-futuro-das-compras > Acesso em: 8 oct 2014 . KAPLAN, Andreas M.; HAENLEIN Michael; Users of the world, unite: the challenges and opportunities of social media. Business Horizons, Bloomington, Volume 53, p.61, fev. 2010, Disponível em: <Endereço eletrônico> Acesso em: 15 fev. 2015. KHAN, Humayun. Disponível em: How to Build a Multi-Million Dollar Ecommerce Business With $0 Marketing Budget , <http://www.shopify.com/blog/9721608-how-to-build-a-multimillion-dollar-ecommerce-business-with-0-marketing-budget > Acesso em: 31 oct. 2014. KIMEN, Shel. 10 questions about information architecture. Disponível em: <http://www.techrepublic.com/article/10-questions-about-information-architecture/ > Acesso em: 6 nov. 2014 .

KINROSS, Robin. Anthony Froshaug: Typography & texts, San Francisco: Chronicle Books Llc, 2001. KIOUSIS, S. Interactivity: A concept explication. New Media & Society. vol. 4. Chicago: SAGE Publications, 2002. KRUG, Steve. Não me faça pensar. 2. ed., Rio de Janeiro: Altabooks, 2006. LARDINOIS, Frederic. Move Over 1024×768: The Most Popular Screen Resolution On The Web Is Now 1366×768. Disponível em: < http://techcrunch.com/2012/04/11/move-over1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/> Acesso em: 3 mai. 2015. LEVATI, Denis. Conheça as ferramentas de chat mais utilizadas nos sites imobiliários, Disponível em: < http://www.vivareal.com.br/gurudocorretor/conheca-as-ferramentas-de-chatmais-utilizadas-nos-sites-imobiliarios/> LOPES, Sérgio. A Web Mobile: Programe para um mundo de muitos dispositivos. São Paulo: Casa do Código, 2013. MACIAS, Patrick. Tokyo Girls São Paulo: JBC, 2007. MCKELL, Iain Fashion Forever: 30 years of subculture, Philadelphia: Trans-Atlantic Publications, Inc 2004. MEGGS, PHILIP B. A history of graphic design. Michigan: Van Nostrand Reinhold, 1992. MEGGS, PHILIP B. Type and Image: The language of graphic design, New Jersey: John Wiley & Sons, 1992.

MEGGS, PHILIP B., PURVIS, W. A., Meggs' History of Graphic Design 4th ed., New Jersey: John Wiley & Sons, Inc, 2011. MEYER, Carl D. LANGVILLE, Amy N. Google's PageRank and Beyond: The Science of Search Engine Rankings. New Jersey: Princeton University Press, 2012. MIYAGAWA, Mamoru. Legibilidade e Leiturabilidade – Qual a diferença? Disponível em: < http://chocoladesign.com/qual-a-diferenca-legibilidade-e-leiturabilidade> Acesso em: 27 oct. 2014. MORVILLE, Peter. Information Architecture for the World Wide Web: Designing largescale web sites, 3rd ed. Massachusetts: O’Reilly, 2006. NEWS, BBC. eBay profits rise despite 'challenging quarter Disponível em: <http://www.bbc.com/news/business-28337785 > Acesso em: 9 oct. 2014. NIELSEN, Jakob. Homepage Usabilidade: 50 websites descontruídos. Rio de Janeiro.: Campus, 2002. NIELSEN, Jakob. Projetando websites, Rio de Janeiro: Campus, 2000. NIELSEN, Jakob. Usability engineering, Boston: Academic Press, 1993. NORMAN, D.A. Emotion & Design: Attractive things work better. Interactions Magazine, ix (4). 2002. p. 36–42. PAYPAL. Paypal [internet] Palo Alto: Paypal; 1999. [acesso em 2015 Mai 2]. Disponível em: https://www.paypal.com/br/webapps/mpp/home. PEÓN, L. Maria. Sistemas de Identidade Visual, Teresópolis: 2AB, 2001.

PEREIRA, Vasco Nuno Sousa Simões. Arquitectura de um motor de busca: exemplo do Google. Disponível em: < https://eden.dei.uc.pt/~vasco/Papers_files/Google_v1.pdf> Acesso em: 3 mai. 2015. PIERCE, Jennifer. Design de interação, São Paulo: Bookman, 2006. PUURTINEN, Tiina. Explicitating and implicitating source text ideology. Disponível em: < http://www.akademiai.com/doi/abs/10.1556/Acr.4.2003.1.3?journalCode=084> Acesso em: 17 oct. 2014. ROBLYER, M. D. et al. Findings on Facebook in higher education: A comparison of college faculty and student uses and perceptions of social networking sites. The Internet and Higher Education [Internet] volume 13: 7 . Disponível em <http://www.sciencedirect.com/science/article/pii/S1096751610000278# > Acesso em: 13 mai. 2015. ROCHA, Heron. M. Semiótica no Design – A teoria na prática Disponível em: <http://www.interligar.com.br/semiotica-no-design-a-teoria-na-pratica/ > Acesso em: 9 oct. 2014. ROSEN, Anita. The E-commerce Question and Answer Book. New York:Amacom, 2000. SANTANELLA, Lucia. Semiótica 6. ed. Curitiba: Editora Brasiliense, 1983. SHIPLE, John. Information Architecture Tutorial. Webmonkey: The webdevelopers's resource, Disponível em: <http://hotwired.lycos.com/webmonkey/98/28/index0a.html> Acesso em: 11 ago. 2014. SILVA, Adam. Web Designer – O que faz, onde estudar e qual o salário, Disponível em: < http://www.adamsilva.com.br/profissoes/web-designer/> Acesso em: 15 jul. 2014.

Site aberto. In: Wikipédia: a enciclopédia livre. Disponível em: <http://pt.wikipedia.org/wiki/Site > Acesso em: 24 oct. 2014. STERN, Joanna. Tablet Sizes: Which One Fits You? Disponível em: < http://abcnews.go.com/Technology/tablet-sizes-samsung-galaxy-note-amazon-kindlefire/story?id=16175260> Acesso em: 15 mai. 2015. STRIZVER, Ilene. Type Rules: The designer's guide to professional typography 3rd ed. New Jersey: John Wiley & Sons, 2010, p. 73. THE INTERNATIONAL ERGONOMICS ASSOCIATION. Definition and Domains of Ergonomics, Disponível em: <http://www.iea.cc/whats/index.html > Acesso em: 17 jun. 2014. TREUNTER, M.F; OSTERMANN, H. Evolution of Standard Web Shop Software Systems: A Review and Analysis of Literature and Market Surveys. The Open Information Systems Journal, Lübeck, Volume 5, p.2, mar. 2011. Disponível em: < http://benthamopen.com/contents/pdf/TOISJ/TOISJ-5-8.pdf > Acesso em: 5 mai. 2015. UNIVERSITY OF GUELPH. Digital Media: Technology brief Disponível em: <http://www.uoguelph.ca/tss/pdfs/TBDigMedia.pdf> Acesso em: 18 jul. 2014. VÁSQUEZ, P. Ruth. Identidade de marca, gestão e comunicação, Organicom, São Paulo, Ano 4, Numero 7, p. 206, 2º Semestre de 2007. VIANNA, Maurício. VIANNA, Ysmar. ADLER, Isabel K. LUCENA, Brenda. RUSSO, Beatriz. Design Thinking. 1. ed. Rio de Janeiro: MJV Press. 2012. WALSH, Mike; MARCUS, David. Modern Spice Routes: The Cultural Impact and Economic Opportunity of Cross-Border Shopping. Disponível em: < https://www.paypalmedia.com/assets/pdf/fact_sheet/PayPal_ModernSpiceRoutes_Report_Final.pdf> Acesso em: 3 mai. 2015.

WEB USABILITY DESIGN AND ENGINEERING, 5 Basic Rules of web page design and layout Disponível em: < http://50629363.blogspot.com.br/2006/09/5-basic-rules-of-web-pagedesign-and.html> Acesso em: 25 jul. 2014. WIKINVEST. Hot Topic (HOTT) Disponível em: <http://www.wikinvest.com/stock/Hot_Topic_(HOTT)#Hot_Topic_.2878.7.25_of_FY_2009_net _sales.29> Acesso em: 31 oct. 2014. WILLIAMS, F. RICE E.R., ROGERS, M.E. Research Methods and the New Media, New York: The Free Press, 1998. ZELDMAN, Jeffrey. Web Design Manifesto Disponível em: <http://www.zeldman.com/2012/05/18/web-design-manifesto-2012/> Acesso em: 13 ago. 2014.

APÊNDICE A- Questionário para coleta de dados O presente questionário destina-se à coleta de dados para elaboração do trabalho de conclusão de curso do Curso de Design. Primeiro nome: .......................................................................................................................................................... Idade: ............................................................................................................................................................................... 1-‐ O que você estaria interessado em comprar nesta loja? ............................................................................................................................................................................................... 2-‐ Você tem muita experiência com compras online? ............................................................................................................................................................................................... 3-‐ Como foi sua experiência no site de Moooh!!! ? ............................................................................................................................................................................................... 4-‐ Quando você usa uma loja online, quais são os critérios mais importantes para ti? Por exemplo: cor, preço, estilo, tamanho16 ............................................................................................................................................................................................... 5-‐ Quais são os pontos positivos do website? ............................................................................................................................................................................................... 6-‐ Quais são os pontos negativos do website? ............................................................................................................................................................................................... 7-‐ Algum último comentário ou sugestão que pensas que é pertinente. ...............................................................................................................................................................................................

16 Estilo: estilo da roupa, como camisa, calça, saia, sapato, acessório, etc. Tamanho: tamanho da roupa P,M, G, GG. Preço: preço da mercadoria Cor: cor do produto.

APÊNDICE B- Coleta de dados O presente texto é a coleta de dados final para elaboração do trabalho de conclusão de curso do Curso de Design. Gráfico 1-Sexo dos participantes do estudo.

Sexo

Mulheres 65% Homens 35%

Fonte: Arquivos da autora, 2015.

Gráfico 2 -Idade dos participantes do estudo.

Idade

Entre 18-24 anos: 90% Entre 24-30 anos: 0% Mais de 30: 10%

Fonte: Arquivos da autora, 2015.

Gráfico 3 -Quantidade de experiência de compras online dos participantes do estudo.

Usuário Experiente em compras online

Muita: 45% Moderada: 15% Pouca: 40%

Fonte: Arquivos da autora, 2015.

Gráfico 4 –Motivo para compra dos participantes do estudo.

Motivos para compra

Para o usuário: 70%

Para outra pessoa (amigo, namorado): 30%

Fonte: Arquivos da autora, 2015.

Gráfico 5-Experiência no site dos participantes do estudo.

Experiência

Positiva: 10% Negativa: 90%

Fonte: Arquivos da autora, 2015.

CRITERIOS Gráfico 6 -Ordem de características favorecidas pelos usuários teste.

14 12 10 Primeiro lugar

Segundo lugar

Terceiro lugar

Quarto lugar

2 0 Estilo

Cor

Preço

Tamanho

Fonte: Arquivos da autora, 2015.

Ordem final: #1 Estilo #2 Preço # 3 Tamanho # 4 Cor PONTOS POSITIVOS Apresentados em ordem decrescente, em base de quantas vezes foi mencionado pelo usuário teste. ⎯ Produtos interessantes ⎯ Texto legível ⎯ Cores aceitáveis ⎯ Imagens grandes e reconhecíveis ⎯ Informação sobre produto específica ⎯ Interface entendível ⎯ Categorias variadas ⎯ Social media e FAQs funcionais ⎯ Interface agradável ⎯ Preço claro ⎯ Idioma entendível ⎯ Botão “Próxima página” visível. ⎯ Menu lateral organizado PONTOS NEGATIVOS Apresentados em ordem decrescente, em base de quantas vezes foi mencionado pelo usuário teste. ⎯ Categorias confusas

⎯ Sem mecanismo de busca ⎯ Layout desinteressante/pouco profissional ⎯ Categorias tem poucos produtos ⎯ Barra de categorias distrai ⎯ Dificuldade na leitura de texto ⎯ Cores não atraentes ⎯ Informações sobre frete imprecisas ⎯ Links de social media em lugares pouco comuns ⎯ Aparência monótona ⎯ Imagens pequenas demais ⎯ Não mostra detalhes da roupa ⎯ Forma de pagamento não especificada ⎯ Processo de checkout confuso ⎯ Texto demais SUGESTÕES Apresentados em ordem decrescente, em base de quantas vezes foi mencionado pelo usuário teste. ⎯ Sugestões de produto ⎯ Sistema de busca ⎯ Mostrar mais claramente os descontos ⎯ Mostrar mais diversidade de estilo ⎯ Zoom mais detalhado ⎯ Presentar mais claramente os produtos masculinos ⎯ Mostrar mais claramente tipos de frete ⎯ Mostrar mais claramente o processo de compra

APÊNDICE C – Vídeos dos usuários Os presentes links são screencaptures (captura em forma de vídeo de tudo o que esta presente na tela do computador) dos usuários apresentando sua experiência usando o website da Moooh!!.

Vídeo Agostina. Disponível em: < https://www.youtube.com/watch?v=qqwiXigMtUk> 2015. Vídeo Ana Julia. Disponível em: < https://www.youtube.com/watch?v=LqKEhWftQj4> 2015. Vídeo Audrey.Disponível em: <https://www.youtube.com/watch?v=GNmYfOGZGWI> 2015. Vídeo Clara. Disponível em: < https://www.youtube.com/watch?v=Er53SNimDDs> 2015. Vídeo Cláudia. Disponível em: < https://www.youtube.com/watch?v=NYGxCIdFGiI> 2015. Vídeo Diana. Disponível em: < https://www.youtube.com/watch?v=-hZ-9z9lCWY> 2015. Vídeo Diego. Disponível em: < https://www.youtube.com/watch?v=B8_r0dJZ1qQ> 2015. Vídeo Filipe. Disponível em: < https://www.youtube.com/watch?v=30vn4WBpGck> 2015. Vídeo Gabriela. Disponível em: <https://www.youtube.com/watch?v=ElEL8rBLOnM> 2015. Vídeo Helga. Disponível em: < https://www.youtube.com/watch?v=PeZxuOOTLToe> 2015. Vídeo Juan. Disponível em: < https://www.youtube.com/watch?v=9azaYxzgF_w> 2015. Vídeo Julia. Disponível em: < https://www.youtube.com/watch?v=1ULDPMFIpfQ> 2015.

Vídeo Kevin. Disponível em: < https://www.youtube.com/watch?v=S67U1D0i-90> 2015. Vídeo Lírio. Disponível em: < https://www.youtube.com/watch?v=3R6zjSfvmO8> 2015. Vídeo Matias. Disponível em: < https://www.youtube.com/watch?v=RJV2yp-qcos> 2015. Vídeo Oliver. Disponível em: < https://www.youtube.com/watch?v=XOG1y-Fgplc> 2015. Vídeo Pama. Disponível em: < https://www.youtube.com/watch?v=RWtCItnTBJ8> 2015. Vídeo Patricio. Disponível em: < https://www.youtube.com/watch?v=4w5H8bkYGfs> 2015. Vídeo Patricia. Disponível em: < https://www.youtube.com/watch?v=j9gTQzbRRYQ> 2015. Vídeo Samantha. Disponível em: < https://www.youtube.com/watch?v=eF7g5Al1T1s> 2015. Vídeo Van. Disponível em: < https://www.youtube.com/watch?v=ZNPAy5nw0-A> 2015.