universidade do sul de santa catarina design

UNIVERSIDADE DO SUL DE SANTA CATARINA

DESIGN

ISABELA MAZZUCO HAEMING DE SOUSA

O DESIGN DE INTERFACE COMO INSTRUMENTO PARA IMPULSIONAR O

ACESSO À LEITURA EM MEIO DIGITAL:

PROPOSTA DE CRIAÇÃO DE SITE E-COMMERCE PARA O SEBO “CIA DO

SABER”

Florianópolis

2018

2





SABER”

Trabalho de Conclusão de Curso apresentado

ao Curso de Design da Universidade do Sul de

Santa Catarina como requisito parcial à

obtenção do título de Bacharel.

Orientador: Prof. Eduardo Cardilo Soares

Florianópolis

2018

3





SABER”

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, _____ de ________________ de 2018.

__________________________________________________

Professor e Orientador Esp. Eduardo Cardilo Soares

Universidade do Sul de Santa Catarina

__________________________________________________

Professora Msc. Karla Grillo


__________________________________________________

Professor Dr. Cláudio Henrique Silva


4

RESUMO

SOUSA, Isabela Mazzuco Haeming de. O design de interface como instrumento para

impulsionar o acesso à leitura em meio digital: proposta de criação de site e-commerce para

o Sebo “Cia do Saber”. 2018. 81f. Trabalho de Conclusão de Curso (Design) - Universidade

do Sul de Santa Catarina, Florianópolis, 2018.

O mercado de livros, tanto novos como usados, vem apresentando uma expansão nos canais

alternativos de vendas. A venda on-line, aos poucos, está modificando significativamente o

processo de comercialização do setor. O mercado também se apresenta cada vez mais

competitivo, fazendo com que as empresas tenham a necessidade de se adaptar às exigências

do seu market share (fatia do mercado). Portanto, implementar novas tecnologias não é mais

um diferencial, mas sim essencial para garantir a competitividade das organizações. Atender a

essa demanda significa buscar meios alternativos que proporcionem um canal direto e mais

aberto para os clientes. Dentro deste tema, o presente trabalho tem como objetivo expandir o

alcance das vendas do Sebo “Cia do Saber”, criando uma proposta de site e-commerce, por

meio do design de experiência. O fluxo metodológico, denominado “Waterfall Approach”,

consiste em uma abordagem em formato “cascata”, com fases separadas e distintas, em que é

necessária a aprovação de uma fase antes de a próxima começar. As fases do Waterfall

Approach são: “Define”, “Design”, “Develop” e “Deploy”, valendo mencionar que as duas

últimas não serão aplicadas porque requerem um estudo mais aprofundado. Para atingir esses

propósitos a pesquisa se estrutura em cinco capítulos. O primeiro tem natureza meramente

introdutória. O segundo discorre sobre o design de experiência e suas variações – design

digital, design gráfico, design emocional e design de interação. O e-commerce, com suas

peculiaridades, é assunto do terceiro capítulo. O quarto capítulo se dedica ao conhecimento do

mercado brasileiro de sebos, envolvendo estudos sobre o mercado literário no Brasil, as

empresas que comercializam livros usados e o comércio on-line propriamente dito. Por fim,

apresentam-se as conclusões do esforço de pesquisa realizado.

Palavras-chave: Design de experiência. Interface. E-commerce. Livros. Sebo. Web Design.

5

ABSTRACT

SOUSA, Isabela Mazzuco Haeming de. The interface design as a tool to boost access to

reading in digital media: proposal to create an e-commerce site for the "Cia do Saber"

tallow. 2018. 81p. Completion of course work (Design) - Universidade do Sul de Santa

Catarina, Florianópolis, 2018.

The book market, both new and used, has been showing an expansion in alternative sales.

Online selling, by far, is significantly changing the industry's marketing process. The market

is also becoming more and more competitive, giving companies a chance to become more

competitive in the market (market share). Therefore, new technologies are essential to

guarantee the competitiveness of organizations. Serving this majority means separating

alternative media that provides a direct channel and more open to customers. Within this

theme, the present work aims to expand the sales reach of tallow "Cia do Saber", creating a

proposal of e-commerce site, through the design of experience. The methodological flow,

called "Waterfall Approach", consists of a "cascade" approach, with separate and distinct

phases, which requires the approval of one phase before the next one begins. The phases of

the Waterfall Approach are: "Define", "Design", "Develop" and "Deploy". The latter one will

not be applied because they require further study. To achieve these purposes the research is

structured in five chapters. The first is merely introductory in nature. The second discusses

experience design and its variations - digital design, graphic design, emotional design and

interaction design. E-commerce, with its peculiarities, is the subject of the third chapter. The

fourth chapter is dedicated to the knowledge of the Brazilian market for tallow, involving

studies on the literary market in Brazil, companies that sell used books and online commerce

itself. Finally, the conclusions of the research effort are presented.

Keywords: Design. Experience. Interface. E-commerce. Books. Web Design.

6

LISTA DE FIGURAS

Figura 1 – Waterfall Approach ................................................................................................. 14

Figura 2 – Elementos utilizados nas interfaces web: textuais e não textuais ........................... 22

Figura 3 – Elementos utilizados nas interfaces web: interativos, de layout

e interpretáveis pelos navegadores ........................................................................................... 23

Figura 4 – Círculo cromático e saturação ................................................................................. 27

Figura 5 – Modelo de cores RGB e CMYK ............................................................................. 28

Figura 6 – Variações da fonte Helvética .................................................................................. 29

Figura 7 – Elementos do grid ................................................................................................... 30

Figura 8 – Estante virtual ......................................................................................................... 37

Figura 9 – Site map ................................................................................................................... 38

Figura 10 – Fluxo de Compra ................................................................................................... 39

Figura 11 – Whireframe da página inicial ................................................................................ 40

Figura 12 – Whireframe da página de Busca ............................................................................ 41

Figura 13 – Whireframe da página do Carrinho ....................................................................... 42

Figura 14 – Whireframe da página do Checkout ...................................................................... 43

Figura 15 – Whireframe da página inicial para Mobile ............................................................ 44

Figura 16 – Whireframe da página de menu para Mobile ........................................................ 45

Figura 17 – Whireframe da página de busca para Mobile ........................................................ 46

Figura 18 – Whireframe da página de busca para Mobile ........................................................ 47

Figura 19 – Tela final da página inicial .................................................................................... 48

Figura 20 – Tela final da página com Pedido de Login............................................................ 49

Figura 21 – Tela final da página de Login................................................................................ 50

Figura 22 – Tela final da página inicial com o usuário “logado” ............................................ 50

Figura 23 – Tela final da página do Perfil do Livro ................................................................. 51

Figura 24 – Tela final da página do Perfil do Livro ................................................................ 52

Figura 25 – Tela final da página do Perfil do Livro adicionado no Carrinho .......................... 53

Figura 26 – Tela final da página do Carrinho ........................................................................... 54

Figura 27 – Tela final da página do Perfil do Livro ................................................................. 55

Figura 28 – Tela final da página do Carrinho com Login ........................................................ 56

Figura 29 – Tela final da página de Sucesso de Compra .......................................................... 57

Figura 30 – Tela final da página de Categorias ........................................................................ 57

7

Figura 31 – Tela final da página de Curadoria ......................................................................... 59

Figura 32 – Tela final da página de Busca ............................................................................... 60

Figura 33 – Tela final da página inicial no Mobile .................................................................. 61

Figura 34 – Tela final da página do menu no Mobile ............................................................. 62

Figura 35 – Tela final da página de Login no Mobile .............................................................. 63

Figura 36 – Tela final da página Pedido de Login no Mobile .................................................. 64

Figura 37 – Tela final da página do livro no Mobile ................................................................ 65

Figura 38 – Tela final da página do Perfil do Livro adicionado no carrinho no Mobile .......... 66

Figura 39 – Tela final da página do menu no Mobile ............................................................. 67

Figura 40 – Tela final da página do Carrinho no Mobile ......................................................... 68

Figura 41 – Tela final da página de Sucesso no Mobile ........................................................... 69

Figura 42 – Tela final da página de Curadoria no Mobile........................................................ 70

Figura 43 – Tela final da página de Categorias no Mobile ...................................................... 71

Figura 44 – Tela final da página de Busca no Mobile .............................................................. 72

Figura 45 – Tela final da página de Filtro de Busca no Mobile ............................................... 73

8

LISTA DE QUADROS

Quadro 1 – Tipos de organização ............................................................................................. 25

Quadro 2 – Tipos de navegação ............................................................................................... 25

9

SUMÁRIO

1 INTRODUÇÃO ................................................................................................................... 11

2 DESIGN DE EXPERIÊNCIA ............................................................................................ 16

2.1 DESIGN DIGITAL ............................................................................................................ 16

2.2 DESIGN GRÁFICO ........................................................................................................... 17

2.3 DESIGN EMOCIONAL..................................................................................................... 17

2.3.1 Experiência do usuário .................................................................................................. 18

2.4 DESIGN DE INTERFACE ................................................................................................ 19

2.4.1 Interface .......................................................................................................................... 19

2.4.2 Usabilidade ..................................................................................................................... 20

2.4.3 Heurística ....................................................................................................................... 21

2.4.3.1 Arquitetura da informação ............................................................................................ 24

2.4.3.2 Layout ........................................................................................................................... 26

2.4.3.3 Cor ................................................................................................................................ 26

2.4.3.4 Tipografia ..................................................................................................................... 28

2.4.3.5 Grid ............................................................................................................................... 29

2.5 E-COMMERCE ................................................................................................................. 31

3 COMÉRCIO DE LIVROS ON-LINE ............................................................................... 34

3.1 MERCADO LITERÁRIO NO BRASIL ............................................................................ 34

3.2 SEBOS E COMÉRCIO ON-LINE ..................................................................................... 34

4 DESENVOLVIMENTO DE UM DESIGN DE INTERFACE PARA A CIA DO

SABER ..................................................................................................................................... 36

4.1 QUESTIONÁRIO .............................................................................................................. 36

4.2 PERFIL ............................................................................................................................... 36

4.3 SITE MAPS ........................................................................................................................ 37

4.4 WIREFRAME .................................................................................................................... 40

4.4.1 Versão Mobile ................................................................................................................ 44

4.5 LAYOUT ............................................................................................................................ 47

4.5.1 Versão Desktop .............................................................................................................. 49

10

4.5.2 Versão Mobile ................................................................................................................ 60

5 CONCLUSÃO ...................................................................................................................... 74

REFERÊNCIAS ..................................................................................................................... 75

APÊNDICE A – QUESTIONÁRIO PARA A COLETA DE DADOS .............................. 79

APÊNDICE B – RESULTADOS DA PESQUISA ............................................................... 80

11

1 INTRODUÇÃO

A temática a que se dedica este Trabalho de Conclusão de Curso (TCC) é o design

e sua contribuição para alavancar, por meio de ferramentas de interfaces utilizadas em

plataformas digitais, os índices de leitura no Brasil.

A propósito, sabe-se que no Brasil o hábito de leitura ainda é baixo em

comparação com países mais desenvolvidos. Porém, o número de livros lidos pelos brasileiros

anualmente vem apresentando aumento significativo. Em 2000, lia-se 1,8 livro por ano; oito

anos depois este número passou a ser 4,3. A região sul do país ostenta o maior índice: 5,5

livros por pessoa.

O consumo de livros também é relativamente baixo. Em média, o brasileiro tem o

costume de comprar 2,5 livros por ano. Nos países desenvolvidos o número é, em média, 10

livros anuais. A justificativa para tamanho desinteresse da população brasileira está, em parte,

no preço do livro e no seu difícil acesso (GORINI; CASTELO BRANCO, 2000).

As bibliotecas, ainda que responsáveis pelo fomento da leitura, não alcançam

totalmente o seu papel. Neste caso, os sebos se tornam uma alternativa para a formação social

e cultural das pessoas, por apresentarem preços mais acessíveis. O fácil acesso das diversas

camadas da população tem impulsionado o crescimento dos sebos, que nos últimos anos vêm

evoluindo significativamente, conquistando novos leitores e, ao mesmo tempo, favorecendo

em grande escala a disseminação e a democratização da informação (CAVAGLIERI;

STEINDEL, 2009).

O mercado de livros, tanto novos como usados, vem apresentando uma expansão

nos canais alternativos de vendas. A venda on-line, aos poucos, está modificando

significativamente o processo de comercialização do setor (GORINI; CASTELO BRANCO,

2000).

Os sebos, em geral, estão atentos às novas tecnologias e isso se reflete na

automatização de seus sistemas, justamente para facilitar a pessoas de diferentes áreas

geográficas o acesso a seus acervos, não só para conhecerem os materiais disponíveis, mas

também para adquiri-los pela internet. A facilidade de vender on-line está transformando o

comércio de livros usados. Os livros de segunda mão também se inserem nesse mercado e

estão sendo bem aceitos pelo grande público (CAVAGLIERI; STEINDEL, 2009).

12

O comércio eletrônico, também conhecido como e-commerce, realiza os

processos de marketing e vendas, serviços e informações suficientes para atrair um público

alvo. O que mais se prima em um layout de site de e-commerce é a facilidade do usuário em

encontrar as ferramentas necessárias para localizar os produtos que deseja (VAN DER

BROOCKE, 2006).

O sistema capaz de tratar informações de maneira sistemática e automatizada

resulta em um mercado de tecnologia da informação, com aptidão para movimentar os

motores da economia. Este domínio desempenha papel fundamental no tratamento, no

processamento e na distribuição da informação, permitindo uma nova modalidade de negócio.

O diálogo entre o usuário e o sistema é estabelecido por meio da interface, cujo objetivo é

estimular a interação. Porém, tais fatores da interface precisam estar ajustados ao correto

atendimento do aspecto funcional dos sistemas de informação (FERREIRA; NUNES, 2014).

Com o crescente valor desses sistemas da informação, disseminação da

informática e expansão da área de web design, a interface digital apresenta-se como elemento

central na concepção de produtos visuais (BORTOLÁS; GONÇALVES; VIEIRA, 2012).

A manipulação adequada e consciente dos elementos de tal interface digital, por

sua vez, resulta em um website com aspecto profissional e adequado à organização que

representa, pois existe uma correlação muito forte com o design visual (CHINEM, 2015).

No processo de compra on-line é importante dispor das principais informações

acerca do produto, afim de que o consumidor possa adquirir o livro procurado (ANJOS,

1999). A página vitrine deve ter estas informações, permitindo acessibilidade direta, além de

links para outras obras do mesmo autor e indicações de outros títulos seguindo o perfil do

consumidor (FREITAS; RENZI, 2013).

Como estratégia para facilitar o acesso aos livros novos e usados, a aplicação do

design de interface com foco no usuário apresenta uma metodologia coerente e exequível, na

medida em que a interação faz com que a informação seja absorvida de maneira intuitiva,

expandindo o mercado de sebos e disseminando o conhecimento geral para uma população

propensa ao aprendizado (HORTON; LYNCH, 2004).

Dentro desse cenário, e considerando que desenvolver o hábito de leitura é de

extrema importância porque possibilita o desenvolvimento cognitivo, além de fazer parte da

inserção social e da construção de conhecimentos do indivíduo (CORREA, 2010), a questão

que gravita sobre o presente estudo é saber se o design digital pode facilitar o acesso a livros

usados e, assim, impulsionar o maior interesse da população pela leitura.

13

Para dirimir a questão suscitada, pretende-se, utilizando as ferramentas de design

de interface, e-commerce e webdesign, criar um site de comércio de livros usados (sebo) para

a “Cia do Saber”. A “Cia do Saber”, um sebo localizado na cidade de Florianópolis, com

cerca de vinte anos de mercado, ainda não possui uma plataforma de comércio on-line.

Considerando que a tendência do mercado de livros no Brasil é a expansão de

vendas por meio de canais alternativos como o e-commerce, traçou-se como objetivo

principal projetar um website de e-commerce para o comércio de livros usados, com vistas

não só a facilitar o acesso, mas também aumentar as vendas e reposicionar o Sebo “Cia do

Saber” no comércio on-line de livros usados. Especificamente, objetiva-se: (i) conhecer o

usuário “Cia do Saber”; investigar o design centrado nos websites já existentes; (iii)

identificar as melhores práticas de e-commerce para o website; (iv) esquematizar o fluxo de

informações e as ações do site; (v) criar o layout do site; e (vi) desenvolver um protótipo do

site.

A proposta aqui formulada tem como justificativa, em primeiro plano, o fato de o

hábito de leitura ser de extrema importância na medida em que possibilita, como mencionado

linhas atrás, o desenvolvimento cognitivo do indivíduo e fazer parte da inserção social e da

construção de conhecimentos (CORREA, 2010).

Além disso, de todos é sabido que o mercado, cada vez mais competitivo, faz com

que as empresas tenham a necessidade de se adaptar às exigências do seu market share (fatia

do mercado). Implementar novas tecnologias não é mais um diferencial; é essencial para

garantir a competitividade das organizações. Atender a essa demanda significa buscar meios

alternativos que proporcionem um canal direto e mais aberto para os clientes (LOBOSCO;

MORAIS; TEIXEIRA, 2011).

A internet possibilita tal abertura e engajamento, pois a comunicação pode ser

facilitada e influenciar diretamente nas vendas. Porém, para que isso se torne realidade, a

usabilidade do comércio digital precisa se relacionar com a interface proposta (VAN DER

BROOCKE, 2006).

O design apresenta a oportunidade de inovação e uma nova ordem de estilo,

aperfeiçoando nível intelectual e intuitivo. A web, quando tratada como sistema de hipertexto

orientado à informação, faz com que o design visual, por meio de tratamento visual do texto,

elementos gráficos da página, componentes de navegação, design da navegação, design da

informação, arquitetura da informação, atendimento de requisitos de conteúdo e necessidades

do usuário, atue como ferramenta para que os objetivos do site sejam alcançados (CHINEM,

2015).

14

A implementação de um novo meio de comunicação de vendas, via web, pode ter

um papel fundamental na abertura e no engajamento de clientes com a loja. Especificamente,

o sebo em questão, a “Cia do Saber”, apresenta grande potencial de ampliação de vendas ao

investir no mercado digital. Além disso, considerando a demanda do mercado e o interesse do

proprietário pela nova plataforma de vendas, a criação de um site de forma intuitiva, focado

nos estudos em design, apresenta uma grande possibilidade de crescimento dos negócios do

empresário como corroboram os conhecimentos adquiridos ao longo do curso de design.

No que tange ao suporte da metodologia, é importante de plano saber que, de

acordo com Demo (2000), as pesquisas de trabalhos científicos podem ser dos tipos: teórica,

metodológica, empírica ou prática. Na lição de Andrade (1997), as pesquisas podem ser de

observação, de experimentação, de análise ou síntese.

No caso da proposta do presente trabalho, a metodologia é de natureza aplicada

em que os conhecimentos adquiridos são aplicados de forma prática, dirigidos à solução de

problemas específicos. Para reunir o referencial teórico de base, utiliza-se a pesquisa

bibliográfica e os objetivos de estudo são de caráter exploratório.

A abordagem metodológica aplicada neste estudo tem como base Unger e

Chandler, publicada no livro “Project guide to UX Design: for user experience designers in

the field or in the making”, de 2012.

O fluxo metodológico, denominado “Waterfall Approach” (Figura 1), consiste em

uma abordagem em formato “cascata”, com fases separadas e distintas, em que é necessária a

aprovação de uma fase antes de a próxima começar. As fases do Waterfall Approach são:

“Define”, “Design”, “Develop” e “Deploy”, valendo mencionar que as duas últimas não serão

aplicadas porque requerem um estudo mais aprofundado.

Figura 1 – Waterfall Approach

Fonte: (UNGER; CHANDLER, 2012).

15

A fase “Define” compreende a pesquisa do usuário, quando será aplicada a

ferramenta “Card Sorting”. Esta fase tem como objetivo definir os grupos de usuários que

terão maior prioridade durante o projeto para apresentar suas necessidades e frustrações em

contexto, usando as melhores práticas no campo do design de experiência do usuário.

Na fase seguinte de “Design”, que tem como base os dados coletados na etapa

anterior, serão desenvolvidos o “Site maps”, o “Wireframe” e o Protótipo. O primeiro consiste

em mapas do site para identificar não só as hierarquias e as conexões de conteúdo, mas

também os fluxos de tarefas que compreendem os vários cursos de ação que um usuário pode

percorrer em uma seção do site. “Wireframe”, com efeito, é a forma pela qual serãos

identificados conteúdos e estrutura propostos, estes comportamentos funcionais envolvidos no

processo.

No contexto do design da experiência do usuário, é importante mencionar, a

prototipagem será a fase de criação parcial da funcionalidade do site.

Por último, são apresentadas as conclusões do esforço de pesquisa realizado.

16

2 DESIGN DE EXPERIÊNCIA

2.1 DESIGN DIGITAL

Em primeiro plano, é importante apresentar alguns apontamentos sobre a evolução

do design digital.

Segundo Rojo (p. 49, 2008);

A história do design digital é a história da interface do usuário. Em cada meio de

comunicação existia uma superfície onde o leitor ou o usuário lia ou usava a

informação: uma interface. A história da interface e, portanto, da geração de signos e

de símbolos na comunicação humana, evoluiu diversificando-se e especializando-se

com o tempo.

Em 1989, Tim Berners-Lee escreveu um documento apresentando uma proposta

de gestão da informação, divulgando-a por meio de um sistema de hipertexto. Este foi o início

do World Wide Web (WWW). Porém, apenas em 1993 foi projetado na Universidade de

Illinois o primeiro navegador para a internet, batizado de Mosaic. Este navegador consistia em

um protótipo que possibilitava a navegação pela internet através de hipertextos, os quais

conduziam o usuário de uma página a outra (ROJO, 2008).

O hipertexto é, portanto, “a base sobre a qual se constroem as relações e as

conexões no ciberespaço. É a peça chave dos sistemas de rede e também o tijolo com o qual

construímos o nosso sistema Web” (ROJO, 2008, p. 120).

A matéria física utilizada para realizar o design no ciberespaço é o pixel,

considerado a menor unidade de representação.

O ciberespaço, como definido por Rojo (2008, p. 34):

[...] é a matéria espacial na qual é constituída a internet, o lugar social simulado por

excelência: onde acontecem fluxos de intercâmbio de informação e de trânsito de

navegantes ou usuários. Em outras palavras, é uma construção social em todos os

aspectos feita à imagem e semelhança do mundo transitável fisicamente.

O avanço da tecnologia da interface originou um complexo espaço

conceitualmente tridimensional. Ou seja, o ciberespaço não é um espaço físico, mas sim

simulado, onde o ambiente é de natureza especificamente tecnológica. A navegação neste

meio é feita por intermédio de fluxos de informação, função essencial para o design digital,

onde são desenvolvidas ferramentas visuais que possibilitam o seu aprimoramento (ROJO,

2008).

17

2.2 DESIGN GRÁFICO

Na avaliação de Radfahrer (2001, p. 19), o propósito do design gráfico deve ser

“realçar características individuais de objetos e destacá-los do ambiente com bom senso”. Em

suma, o “bom senso” e a observação campos de estudo do design gráfico, como conceitos

estéticos e princípios básicos da Gestalt, estão diretamente relacionados ao ato de projetar.

No design gráfico, os conceitos e os princípios aplicados podem ter origem em

diversas áreas do conhecimento. A Gestalt, por exemplo, segundo Gomes (2000), tem como

fundamentação científica, estudos e pesquisas realizados no campo da “psicologia percentual

da forma”.

Nesse campo de conhecimento, a arte se fundamenta no princípio da pregnância

da forma.

A prática e o estudo do design têm como função refletir sobre a cultura na qual

participamos. Essa reflexão resulta em diferentes olhares que se adéquam ao

contexto histórico e social vivenciados, É difícil observar as vertentes do design de

forma singular, tal atitude resultaria em uma visão distorcida equivocada. As áreas e

sinuosidades do design devem ser avaliadas em conjunto, de forma integrada e

orgânica. O design precisa investir prioritariamente na atividade de projeto, onde

deve estar seu olhar central, não se pode privilegiar apenas o discurso do campo de

atuação (REBOLÇAS , 2003, p. 12).

Ainda, conforme Rebolças (2003), as fronteiras de estudo do design gráfico ainda

não têm uma definição absoluta, podendo ser configuradas a cada nova necessidade

profissional e social.

2.3 DESIGN EMOCIONAL

Para que a interação do design com determinado produto desperte uma emoção

positiva no usuário, é necessário que as informações veiculadas deem condições de

compreender como o produto funciona e como fazer para que funcione. Se a informação sobre

o produto for clara e suficiente, o resultado da experiência para o usuário será conveniente

(NORMAN, 2008).

O design afeta o usuário de maneiras distintas, concebidas como: visceral,

comportamental e reflexivo. O design visceral está relacionado à aparência, ou seja, dá-se

maior importância à aparência física do produto e como ela afeta o usuário. Este aspecto do

design está diretamente relacionado aos sentidos (visão, tato, audição etc.), ou seja, os

18

sentidos são responsáveis pela primeira impressão que o usuário/cliente tem de um produto

(NORMAN, 2008).

Para o design comportamental, a aparência não é o mais importante, mas sim as

experiências, no que concerne a aspectos como função, performance e usabilidade

(NORMAN, 2008).

Carvalho (2008, p. 84) muito bem explica os aspectos do design comportamental:

“A função diz respeito às funções mecânicas do produto, enquanto a performance diz respeito

a quão bem o produto exerce essa função. A usabilidade, por sua vez, contempla a facilidade

de uso do produto.”.

O design reflexivo é o mais abrangente e depende dos aspectos psicológicos e

culturais de cada usuário, relacionados ao uso do produto. “Este aspecto do design está ligado

à auto-imagem, à satisfação pessoal e à memória, e é considerado o mais vulnerável a

influências da cultura, da experiência, educação ou a diferenças individuais.” (CARVALHO,

2008, p. 87).

Portanto, o que faz o usuário “gostar” de determinado produto ou não, está

diretamente relacionado com as emoções. Em outras palavras, as emoções são responsáveis

por sensibilizar o usuário a interagir com um produto ou não.

2.3.1 Experiência do usuário

A ideia precursora da teoria de experiência do usuário abordada por um autor de

design coube a Buchanan (1985). O estudioso introduziu o termo “emoção” no processo de

design, de modo que o usuário utilize o produto como meio para atingir um fim, ao invés de

simplesmente fazer um objeto. Este foco na emoção como experiência torna o produto

emocionalmente desejável e valoroso para a vida do usuário.

Nessa linha, é necessário que o design siga um pensamento mais amplo do que

apenas o objeto físico. O contexto de uso, as funções, os sistemas nos quais os objetos se

organizam ou o ambiente no qual eles operam, passam a fazer parte do projeto de design

(MITCHELL, 1993).

Para que a experiência do usuário seja positiva e satisfatória, é importante

vislumbrar outras pequenas experiências relacionadas com o produto. Para tanto, é necessário

levar em consideração a história do uso do objeto, à procura de fatores que estão além da

percepção pessoal, como diferenças culturais, estados emocionais distintos, que podem

19

influenciar a interpretação, a casualidade e, eventualmente, algum entendimento possa ter

outro significado para algumas pessoas (FORLIZZI et al., 2000).

O design, nesse sentido, tem como importante função criar um espaço onde o

usuário possa desenvolver uma experiência positiva e que ela atinja determinado objetivo. Por

meio dos elementos de design este cenário torna-se possível à medida que o usuário é exposto

a desafios gerenciáveis (McLELLAN, 2000).

A experiência do usuário, como adverte Suri (2003), não pode ser controlada

pelos designers. O trabalho do designer na elaboração de um projeto de design é influenciar as

emoções do usuário de maneira coerente, buscando interferir nas suas qualidades sensoriais

formais e comportamentais.

2.4 DESIGN DE INTERAÇÃO

2.4.1 Interface

De acordo com o dicionário Aurélio (2008), a palavra interface é definida como:

1. sf. Recurso que permite comunicação ou interação entre dois sistemas ou

organismos; 2. Inform. Dispositivo de conexão entre computador e periférico(s), ou

entre periféricos; 3. Inform. Conjunto de elementos de hardware e software

destinados a possibilitar a interação com o usuário.

Com o advento da tecnologia, o termo “interface” obteve uma abrangência maior.

Novas tecnologias como computadores e telefones móveis possibilitaram uma interação

diferente com o usuário. Os usuários destas tecnologias podem controlar todas as novas

funções da chamada “Interface Gráficas do Usuário (GUI)”. As GUIs funcionam como ponto

de interconexão entre o usuário e a tecnologia, considerado o sistema de interação homem-

máquina. Portanto, as funções da interface homem-máquina se resumem à definição de

sistemas (BRAGA, 2004).

Sempre que uma decisão é tomada e uma interface faz parte do processo, a “ação

de interagir” se mostra presente.

O design de interação tem evoluído, a ponto de abranger um alcance para além da

plataforma. O produto não se limita apenas ao meio físico. A experiência do usuário está

ligada também a questões emocionais proporcionadas pelo design de interação (CAO;

GREMILLION, 2015).

20

Preece, Rogers, Sharp (2013, p. 28) conceituam design de interação da seguinte

maneira: “Design de produtos interativos que fornecem suporte às atividades cotidianas das

pessoas, seja no lar ou no trabalho.”. Os autores também afirmam que esta área de estudo

demanda outras disciplinas para que a experiência do usuário seja eficaz e prazerosa. Espera-

se que tais disciplinas completem-se e que sejam sempre repetidas.

Outro fator importante no design de interação é a avaliação do projeto com

abordagem centrada no usuário. Por essa razão, é igualmente importante compreender como

as pessoas realizam determinada tarefa, as metas que pretendem alcançar, que basicamente se

resumem em: eficácia, segurança, utilidade, facilidade de aprendizado e memorização.

Com a emergência das tecnologias, o design de interação passou a se preocupar

com sistemas que também sejam satisfatórios, agradáveis, motivadores, interessantes,

esteticamente apreciáveis e emocionalmente adequados. Tais características têm como

objetivo principal a experiência do usuário em termos subjetivos.

2.4.2 Usabilidade

Do ponto de vista do usuário, a característica determinante para que uma interface

seja eficiente, agradável e de fácil uso é a usabilidade (PREECE; ROGERS; SHARP, 2002).

Para Krug (2006), a primeira lei da usabilidade se resume na frase “Não me faça

pensar!” ou na “lei do menor esforço”. Este princípio consiste na facilidade de compreensão

do usuário quando se depara com uma interface, como uma página na web, que deve ser

autoexplicativa.

Oliveira (2009, p. 38), dissertando sobre o tema, assim explica a usabilidade:

Um software pode ser classificado como sendo de boa usabilidade quando os seus

usuários aprendem a utilizá-lo com facilidade (learnability), quando se lembram

facilmente de tarefas anteriormente já realizadas (memorability), ou quando

consegue associar padrões entre as diversas telas de um mesmo sistema, através da

ordem de disposição dos itens, rapidez no desenvolvimento de tarefas, o que leva à

conclusão lógica de que a manipulação do software é bastante fácil e que por sua

vez, essa facilidade eleve a produtividade do usuário (eficiência, e também, usando a

taxa de erros durante a utilização do produto for baixa (erros).

Para alcançar tais objetivos, existem alguns padrões de princípios de design os

quais fornecem parâmetros que possibilitam a avaliação da interface em questão quanto à

usabilidade, a saber: visibilidade, feedback, restrições, mapeamento, consistência e affordance

(PREECE; ROGERS; SHARP, 2002).

21

Segundo Norman (p. 33, 2006), “[...] o termo affordance se refere às propriedades

percebidas e reais de um objeto, principalmente as propriedades fundamentais que

determinam de que maneira o objeto poderia ser usado”.

Para prever os efeitos das ações, é preciso projetar um bom modelo conceitual,

incluindo o princípio de affordance, aliado à disposição coerente de elementos e restrições

capazes de inibir possíveis erros durante a realização da tarefa e, ademais, possam

proporcionar uma experiência positiva.

Outro aspecto da usabilidade que possibilita tornar o ambiente visível para o

usuário alude ao princípio do mapeamento. Este princípio está atrelado ao controle e ao efeito

que produzirá no mundo real. A visibilidade do ambiente também facilita a interação, pois

consiste em deixar disponível ao usuário determinado elemento até que decida utilizá-lo.

2.4.3 Heurística

Os princípios de design, anteriormente citados, são verdadeiros alicerçes para

outros princípios de design relacionados diretamente com a construção dos elementos visuais

que contêm uma interface eficiente (PREECE; ROGERS; SHARP, 2002).

O conjunto de princípios pode ser identificado pelo termo “heurística”. No âmbito

do design, heurística é interpretada como o conjunto de regras adquiridas com a própria

experiência e a aplicação prática dos princípios de design. A heurística, nesse sentido, indica

“como” os princípios de design devem ser empregados (OLIVEIRA, 2009, p. 39).

De acordo com Nilsen (2001), os dez princípios heurísticos de usabilidade são:

o visibilidade do status do sistema: o sistema deve manter o usuário sempre

informado sobre o que está acontecendo, por meio de feedbacks, em um

período de tempo razoável;

o compatibilidade do sistema com o mundo real: a linguagem utilizada deve ser a

mais próxima possível do mundo real, fazendo com que a informação apareça

de forma natural e em uma ordem lógica;

o controle do usuário e liberdade: fornecer opções alternativas para que o usuário

tenha suporte em suas ações equivocadas;

o prevenção de erros: evitar que ocorram erros;

o reconhecimento, ao invés de memorização: tornar intuitiva a interação com o

sistema;

22

o flexibilidade e eficiência no uso: permitir que usuários iniciantes e mesmo os

mais avançados possam realizar a tarefa no tempo compatível;

o estética e design minimalista: evitar o uso de informações irrelevantes,

priorizar a relevância de conteúdo;

o ajuda para que o usuário reconhecer, diagnosticar e corrigir erros: exibir erros

de forma clara e, se possível, sugerir soluções;

o ajuda e documentação: facilitar o acesso a informações de auxílio.

Nas figuras seguintes são apresentados os elementos e/ou componentes utilizados

nas interfaces web.

Figura 2 - Elementos utilizados nas interfaces web: textuais e não textuais

Fonte: Adaptado de Oliveira (2009).

23

Figura 3 - Elementos utilizados nas interfaces web: interativos, de layout e interpretáveis

pelos navegadores

Fonte: Adaptado de Oliveira (2009).

Ainda, segundo Bortolás (2013), existem duas grandes áreas envolvidas no

desenvolvimento de um interface, especialmente quando a web é utilizada como sistema, a

saber: o “design de interfaces” (que possibilita a interação entre usuário e dispositivo) e o

“desenvolvimento web” (que tem seu foco na programação da própria linguagem da web).

24

E na lição de Batista (2008, p. 58): “A Interface Web – um artefato digital – é

composta por um conjunto de elementos que tornam possível ao usuário ver, ouvir e interagir

com as informações.”.

2.4.3.1 Arquitetura da informação

De acordo com Vidotti e Sanches (2004, p. 2): “A Arquitetura da Informação

Digital visa à estruturação de informações com o fim de torná-las disponíveis e acessíveis de

forma mais adequada, pertinente e utilizável pelos usuários.”.

Em outras palavras, a arquitetura da informação é responsável pela estruturação

dos conteúdos que irão compor o web site, assim como o seu sistema de navegação. O

objetivo é permitir maior flexibilidade e movimentação, características estas que estão

diretamente relacionadas à funcionalidade da interface.

Especificamente, a arquitetura da informação abrange o campo de design de

experiência, que, por sua vez, é um termo holístico na medida em que engloba o design

gráfico e o design de interação como componentes da experiência do usuário (ROSENFELD;

MORVILLE, 2006).

Segundo Rosefeld e Moville (2006), a arquitetura da informação de um web site é

dividida em quatro sistemas, os quais reúnem todos os elementos de interação do usuário com

a interface. São eles: sistema de organização, sistema de navegação, sistema de rotulagem e

sistema de busca.

Sant'anna (2009, p. 27) explica o sistema de organização:

[...] como um todo responsável pela estruturação dos conteúdos que irão compor o

Web site. Nele, terão que ser bem definidos os critérios de disposição dos itens,

observando os esquemas e/ou estruturas que melhor satisfaçam a necessidade do

usuário sem comprometer a navegabilidade do site.

O sistema de organização é dividido por Morville e Rosenfeld (2006) em duas

categorias: esquemas de organização e estruturas de organização.

Cicon (2012), no Quadro 1, resume bem as duas categorias de sistema de

organização.

25

O segundo sistema da arquitetura de informação de um site é o de navegação,

como explicam Vidotti e Sanches (2004, p. 3):

Um web site com seu sistema de navegação bem definido e organizado permite ao

usuário ir de um ponto ao outro pelo caminho desejado ou pelo menor caminho,

possibilitando um melhor aproveitamento do tempo de uso ou de acesso, evitando

assim que o usuário tenha que passar por várias páginas até chegar à informação

desejada, ou que depare com links inválidos, entre outros problemas.

O sistema de navegação é subdividido em embutido, auxiliar e suplementar,

conforme mostra o Quadro 2, também segundo Cicon (2012):

O terceiro sistema da arquitetura da informação é o de rotulagem, caracterizado

como um conjunto de informações que utiliza uma palavra ou um ícone para situar o usuário e

facilitar a sua navegação no web site.

O quarto e último é o sistema de busca. Este sistema permite a localização de

informações que podem ser acessadas por qualquer computador conectado à rede internet. O

26

sistema de busca também é categorizado em: item conhecido, ideias abstratas, exploratória e

compreensiva (CICON, 2012, p. 7).

2.4.3.2 Layout

De acordo com Bearid (2010), o layout de um site na web corresponde à sua

forma de organização. Apesar da variedade de layouts que podem ser encontrados na rede, os

componentes utilizados são basicamente os mesmos.

Os layouts, identificados a seguir, são organizados em forma de “blocos” e eles

variam em número e em tamanho, dependendo do conteúdo da página.

o Containig block: toda página na web contém “blocos de conteúdo”, os quais

delimitam e organizam as informações.

o Logo: a logo faz parte da identificação do site e, regra geral, localiza-se no topo da

página. A logo contribui para aumentar o reconhecimento da marca, informando

os usuários que a página em questão faz parte de um site único.

o Navegação: o sistema de navegação deve ser fácil de identificar. É por meio da

navegação que o usuário irá interagir com o site.

o Content: é o conteúdo em si; o elemento mais importante e deve ter seu maior

foco no layout.

o Footer: localizado no fim da página - o rodapé geralmente contém informações e

links referentes ao próprio site.

o Whitespace: ou espaço negativo, é um termo de design que se refere a qualquer

área da página sem conteúdo.

o Elementos visuais, segundo Boulton (2009), definem o layout em um website e,

de acordo com o web design, são cor, tipografia e grid.

2.4.3.3 Cor

Tradicionalmente, as cores são divididas em quentes (vermelho, laranja e

amarelo), frias (azul e violeta) e neutras (preto, branco e cinza). As cores também

influenciam psicologicamente o usuário, podendo despertar emoções, a depender da sua

utilização. Cores quentes despertam intensidade, enquanto cores frias transmitem a sensação

de tranquilidade (CAO, 2015).

27

A medida de clareza ou de escuridão de uma cor é dada pelo seu valor cromático,

que também pode influenciar psicologicamente o usuário. A saturação é uma propriedade da

cor e mede a sua vivacidade (BEAIRD, 2010).

Na figura seguinte, pode-se visualizar a tonalidade das cores quentes e frias, bem

como o nível (alto e baixo) de saturação da cor vermelha.

Figura 4 – Círculo cromático e saturação

Fonte:laborado pela autora (2017)

As cores visualizadas na tela de um computador, explica Beaird (2010), são

baseadas em um modelo de “adição de cores”. Ou seja, funcionam de acordo com a luz em

porcentagens de vermelho, verde e azul ou RGB (red, green e blue). As cores encontradas em

impressões gráficas funcionam de modo “subtrativo” e as combinações são feitas entre as

cores ciano, magenta, amarelo e preto ou CMYK (cyan, magenta, yellow e black), conforme

se pode visualizar na figura seguinte.

28

Figura 5 – Modelo de cores RGB e CMYK

Fonte: Elaborado pela autora (2017).

2.4.3.4 Tipografia

Sobre o tema, vale colacionar a seguinte explicação de Cauduro (2012) apud

Brisolara (2008):

Tipografia, sob consideração etimológica, vem do francês typographie, que por sua

vez, origina-se do latim medieval typographia – combinação de typus (padrão, tipo,

protótipo, modelo, símbolo, padrão recorrente em doenças) e graphia (escrita). Estes

dois últimos termos latinos originam-se respectivamente das palavras gregas tupos

(tipo, marca ou impressão causada por um forte sopro ou impacto de um modelo

numa superfície) e grapheia (que significa escrita).

O elemento tipográfico de uma letra é denominado caractere, que pode ser

também um número ou um sinal de pontuação. Muitos tipos de letra possuem várias versões

para cada caractere. Estas versões são denominadas glifos. Um glifo pode ser uma variação da

mesma letra (COSTA, 2013).

A figura seguinte exemplifica os vários glifos da fonte helvética.

29

Figura 6 – Variações da fonte Helvética

Fonte: Elaborado pela autora (2017).

A cultura ocidental vê a tipografia de duas formas simultâneas: a primeira visão é

“macro” e tem seu foco na composição geral da forma; a visão posterior é “micro” e seu foco

é baseado nos detalhes (COSTA, 2013).

Toda palavra impressa pode comunicar-se com dois significados separados: a

definição literal e a emoção sugerida pela tipografia. A tipografia é considerada uma segunda

língua, que se comunica em um nível sutil, além das palavras reais. O conteúdo compreende

aquilo que é dito, mas a tipografia é a primeira impressão da forma de “como” algo é dito. Por

meio da tipografia, a experiência vem antes de os usuários lerem uma única palavra, criando

uma atmosfera e uma resposta emocional (CAO, 2015).

2.4.3.5 Grid

O grid é formado por um conjunto específico de relações de alinhamento. Essas

relações funcionam como guias para a distribuição dos elementos. Todo grid possui os

mesmos elementos básicos, por mais complexo que seja. Cada parte desempenha uma função

específica e podem ser combinadas segundo a necessidade, ou omitidas da estrutura geral, a

30

critério do designer, a depender de atenderem ou não as exigências informativas do conteúdo.

São elementos do grid:

o margens: são os espaços negativos entre o limite do formato e o conteúdo que

cercam e definem a área viva onde ficarão os tipos e as imagens;

o colunas: são alinhamentos verticais que criam divisões horizontais entre as

margens;

o linhas de fluxo: são alinhamentos que quebram o espaço em faixas horizontais;

o módulos: são unidades individuais de espaço separadas por intervalos regulares

que, repetidas no formato da página, criam colunas e faixas horizontais;

o zonas espaciais: são grupos de módulos, que, juntos, formam campos distintos;

o marcadores: são indicadores de localização para textos secundários ou constantes,

como cabeçalhos, nomes de seções, fólios, ou qualquer outro elemento que ocupe

sempre a mesma posição em qualquer página (SAMARA, 2007).

A figura seguinte ilustra os elementos do grid

Figura 7 – Elementos do grid

Fonte: Elaborado pela autora (2017)

Como se vê, o grid fornece uma ordem sistemática na página, diferenciando tipos

de informação e facilitando a navegação entre eles. Também permite a padronização das

informações, sem comprometer as qualidades visuais.

31

Samara (2007) ainda afirma que “construir um grid eficaz para um determinado

projeto significa destrinchar cuidadosamente seu conteúdo específico, em termos das

qualidades visuais e semânticas do espaço tipográfico”.

As interfaces baseadas em grid flexível apresentam estruturas modulares que

permitem maior flexibilidade, mobilidade e facilidade no momento de reorganização do

conteúdo apresentado. O grid flexível é parte importante da arquitetura da informação do web

design responsivo (MÜLLING; ANJOS, 2015).

O design responsivo não apenas reduz de tamanho o conteúdo, mas adapta os

elementos a fim de entregar ao usuário a melhor forma de navegação para aquele cenário. Ele

representa a adaptação de uma interface a qualquer resolução de tela, adaptando a experiência

de navegação de acordo com as necessidades dos usuários e com cada tipo de

mídia. Considerando que o grid é uma malha que divide a tela em partes proporcionais,

construir um design responsivo se torna muito mais fácil se ele estiver apoiado em um grid

flexível (PACHECO, 2014).

A manipulação da largura do grid ocorre sempre de forma percentual, o que torna

possível a adaptação do website a diferentes resoluções. Esta forma de utilizar o grid flexível,

com um valor percentual, é o que permite uma flexibilidade controlada dentro do layout. A

percentagem é calculada levando-se em consideração o tamanho do objeto e o seu contexto. O

grid pode ser organizado de uma maneira semelhante à de projetos tradicionais. A diferença é

que devem ser pensados para que se redimensionem de maneira percentual (MÜLLING;

ANJOS, 2015).

2.5 E-COMMERCE

A propósito, “comércio eletrônico, ou e-commerce, ou ainda comércio virtual (ou

comércio online), é um tipo de transação comercial feita especialmente através de um

equipamento eletrônico, como um computador” (CLARO, 2013, p. 14).

O comércio eletrônico tem como finalidade vender um produto para um

comprador interessado neste bem ou serviço. Tal interação é viabilizada em plataformas

digitais. Ou seja, e-commerce é qualquer plataforma eletrônica que permita a transferência de

informações comerciais entre os elementos da cadeia de suprimentos (ANJO, 1999, p. 13-14).

Kosiur (1997, p. 287) assim leciona sobre o tema:

O comércio eletrônico é um sistema que inclui não apenas as transações centradas

em compra e venda de produtos e serviços para a geração de receitas, mas também

32

aquelas transações que servem de apoio a esta geração como a criação de demanda

para estes produtos e serviços, o suporte de vendas e a facilitação da comunicação

entre os parceiros de negócios.

O espaço em que o e-commerce se torna possível é denominado “internet ou rede

mundial de computadores (World Wide Web)”. Esta plataforma:

[...] é composta por um conjunto de redes de computadores distintas, que se

comunicam e cooperam entre si. Esta comunicação se dá através de pontos de

contato, usualmente denominados roteadores, os quais são capazes de conectar redes

de tecnologias de transmissão diferentes, permitindo que mensagens sejam trocadas

de forma segura e eficiente.

[A web] pode ser vista como um ambiente onde informações podem ser publicadas e

compartilhadas de maneira instantânea, com baixo custo e potencialmente com

alcance global. [...] Nesse ambiente, transações comerciais podem ser realizadas

através da rede de forma rápida e com baixo custo por transação. Esses fatores

definem e viabilizam o comércio eletrônico (MEIRA et al., 2002, p. 49, 57).

No ambiente da World Wide Web, toda informação é reunida em documentos em

formato eletrônico, ou “páginas” que podem ser visualizadas na tela de computadores. Este

conhecimento é organizado de forma gráfica, por “páginas” interligadas por links, os quais

ligam as informações relacionadas (MEIRA et al., 2002).

O web site é um lugar virtual, onde cada uma das páginas fica hospedada. Ou

seja, um web site nada mais é do que um conjunto de páginas da web. A organização das

páginas de um site (web pages) é feita a partir de um endereço virtual denominado URL

(Uniform Resource Location), conforme ensina Sant‟Anna (2009).

Os benefícios do comércio eletrônico abrangem tanto os compradores como os

vendedores, possibilitando a expansão do mercado de vendas. Para os consumidores, os

principais benefícios são o baixo custo e a rapidez na entrega. Já que é um serviço

disponibilizado 24 horas por dia, durante os sete dias da semana, o comércio eletrônico

possibilita maior comodidade aos compradores, pois podem efetuar suas compras sem a

necessidade de sair de casa (VISSOTTO, 2013).

No Brasil, em 2014, o comércio eletrônico faturou R$ 35,8 bilhões, 24% de

crescimento quando comparado com o faturamento de 2013. Já o número de pedidos feitos,

por este tipo de transação, foi de 103,4 milhões, 17% a mais do que o registrado no ano

anterior (CHAORDIC).

O crescimento do consumo por meio do comércio eletrônico proporciona uma

visão mais ampla do potencial que a internet oferece às empresas que desejarem utilizá-la

como espaço de vendas. Esse ambiente virtual é também uma forma de promover o

desenvolvimento econômico, eliminar barreiras geográficas e transformar os sistemas

33

econômicos, pois seu alcance é monetário, comercial, cultural e social (VISSOTTO, 2013, p.

27).

Anjo (1999) enumera nove princípios da economia digital, que, resumidamente,

são aqui apresentados:

o a quantidade de pessoas que visitam um site é menos importante que a

qualidade da experiência que elas têm;

o as empresas não precisam estar na web para se expor mas para obter

resultados;

o os consumidores devem ser compensados por disponibilizar dados pessoais nos

sites;

o os consumidores tendem a fazer compras on-line somente de produtos ricos em

informação;

o o conceito self-service garante mais conforto para os clientes;

o moedas próprias e programas de fidelidade podem permitir a criação de um

sistema monetário próprio em um site;

o marcas famosas valem mais na web;

o mesmo o menor negócio pode competir no mercado global da internet;

o agilidade é a regra. Os sites devem adaptar-se continuamente ao mercado.

34

3 COMÉRCIO DE LIVROS ON-LINE

3.1 MERCADO LITERÁRIO NO BRASIL

Segundo a pesquisa “Relatos da Leitura”, as principais dificuldades encontradas

pelos brasileiros para internalizarem o hábito da leitura incluem: alto preço dos livros e falta

de locais onde possam adquirí-los (FAILLA, 2016, p. 111).

Em relação aos livros, muitos consideram o preço caro, não só quando comparado

com o mercado internacional, mas principalmente em relação ao poder aquisitivo médio da

população brasileira (GERÊNCIA SETORIAL DE COMÉRCIO DE SERVIÇOS, 1999, p. 7).

Essas dificuldades apontadas trazem reflexos negativos para o mercado literário

brasileiro, na medida em que a demanda do livro varia e depende do poder de compra da

população. Além disso, há um fraco desenvolvimento de canais alternativos de vendas, como

supermercados, lojas on-line, lojas de conveniência etc. (BRANCO; GORINI, 2000, p. 12).

Das livrarias, que representam o principal canal de acesso ao mercado editorial,

apenas 11% estão regularmente instaladas. Cerca de 90% dos municípios brasileiros não

dispõem de livrarias com fácil alcance geográfico para a população local.

Além da existência de poucas livrarias, a maior parte delas está concentrada nas

regiões sul e sudeste. Os grupos médios, de atuação regional, e os empreendedores isolados,

acabam desempenhando um significativo papel na cadeia de comercialização do livro

(GERÊNCIA SETORIAL DE COMÉRCIO DE SERVIÇOS, 1999, p. 37).

Tradicionalmente, o mercado editorial é segmentado em: (i) obras gerais: ficção,

ensaios, biografias; (ii) didáticos: de ensino fundamental, ou médio, e outros; (iii) científicos,

técnicos e profissionais; e (iv) especializados: religiosos, culinária e outros (GERÊNCIA

SETORIAL DE COMÉRCIO DE SERVIÇOS, 1999, p. 11).

3.2 SEBOS E COMÉRCIO ON-LINE

O livro no Brasil ainda é considerado um objeto de luxo devido ao alto preço

cobrado pelas livrarias. Os sebos, por outro lado, ao ampliarem o acesso aos livros praticando

preços mais acessíveis, constituem pontos de acesso à informação e impulsionam a prática da

leitura, e os sebos não são apenas locais para compra de livros, revistas e outros formatos de

informação e lazer (CAVAGLIERI; STEINDEL, 2009).

35

Zilbermann (2003), citado por Matos (2014), afirma que “os sebos cumprem o

papel de salvar do esquecimento a literatura e garantir não apenas sua circulação, mas também

a comunicação entre obras impressas”.

A palavra “sebo”, a propósito, tem distintas derivações:

Do particípio presente „sapiente‟ se fizeram várias derivadas: „sabença‟ („sapientia‟),

„sabente‟ e desta forma „sabentar-se‟ em espanhol, „asabentar‟ em provençal,

catalão, correspondendo ao italiano „insaventire‟, tornar-se sábio, eruditar-se,

instruir-se, donde o português arcaico „assabentar‟, „sabentar‟. Desta forma verbal

saiu „sabenta‟, a apostila, o conjunto de lições, explicações de aula. Houve

assimilação de „a‟ e „e‟ („sebenta‟) já sob a influência do adjetivo „sebento‟,

„sebenta‟. Assim, „sebenta‟ nada tem a ver com „sebenta‟ de sebo, mas queria dizer:

a obra, a coleção de notas de classe que tornava o estudante mais preparado, mais

sábio (BUENO, 1963 apud CÂMARA, 2009, p. 52).

Brito (2003), também citado por Matos (2014), comenta que “a palavra sebo

tornou-se a forma vulgarizada para designar livraria onde se vendem livros usados e raros,

independente do local, que possa ser uma banca de jornal, um calçadão ou até mesmo um

endereço na Internet”.

Com o avanço tecnológico, os sebos estão aliando-se às novas tecnologias para

automatizar seus sistemas, facilitando a outras pessoas de diferentes áreas geográficas o

acesso ao seu acervo, não só para conhecerem os materiais disponíveis, mas também para os

adquiri-los pela internet. A facilidade de vender on-line está transformando o comércio de

livros usados. Os livros de segunda mão estão ganhando destaque junto ao grande público.

O comércio eletrônico é visto por muitos especialistas como uma nova forma de

transação comercial. O fácil acesso das diversas camadas da população tem favorecido o

crescimento dos sebos, que nos últimos anos vêm evoluindo significativamente, conquistando

novos leitores e favorecendo, em grande escala, o acesso, a disseminação e a democratização

da informação (CAVAGLIERI; STEINDEL, 2009).

36

4 DESENVOLVIMENTO DE UM DESIGN DE INTERFACE PARA A CIA DO

SABER

Tendo em vista todas as áreas do conhecimento anteriormente descritas, foram

desenvolvidas trinta (30) telas de alta fidelidade, sendo 16 delas, especialmente para a versão

mobile (aparelhos móveis que apresentam menor espaço de tela como smartphones e tablets) e

14 em formato desktop (para aparelhos eletrônicos com mais espaço tela como Laptops e

PCs).

4.1 QUESTIONÁRIO

Para o estudo do público-alvo, aplicou-se um questionário on-line, com seis

perguntas relacionadas ao comportamento dos entrevistados. Durante as duas semanas em que

se desenvolveu a pesquisa, entrevistaram-se setenta pessoas. O período de duração foi de duas

semanas, de 26/03/2018 a 02/04/2018.

Da análise das respostas, extrai-se que, como regra, o que chama mais atenção em

um livro (físico ou não) é a sua descrição. A capa e a crítica a respeito também atraem os

leitores. Outros aspectos, como autor, título e sumário já não despertam tanto a atenção na

hora de o leitor decidir sobre a compra.

Os livros usados ainda não apresentam grande procura quando comparados aos

livros novos. Porém, no mercado de sebos, o comércio dos livros de segunda-mão não é

exclusividade das lojas físicas.

Segundo a pesquisa, a compra on-line de livros usados também se mostra

significativa.

Sobre o comportamento de compra, embora os consumidores prefiram procurar

livros de maneira independente, alguns também costumam pedir auxílio aos empregados das

lojas. Quando as compras são feitas em plataformas digitais (websites), a experiência costuma

ser positiva.

4.2 PERFIL

Para melhor visualização dos dados coletados na pesquisa, idealizou-se um “perfil”

com vistas a sintetizar a personalidade e o comportamento de compra do usuário. Em outras

palavras, o usuário-persona: (i) usa frequentemente a internet para acessar redes sociais e

37

realizar compras on-line; (ii) tem o hábito de visitar livrarias e sebos; (iii) costuma procurar

lançamentos e gêneros específicos de livros; (iv) prefere livros cuja capa desperte a sua

atenção; (v) não gosta de passar muito tempo pesquisando títulos; e (vi) gosta de comprar

livros por sugestão/indicação de amigos ou especialistas.

4.3 SITE MAPS

Os site maps (mapas dos sites) ajudam a identificar as estruturas de sites e

aplicativos, apresentando hierarquias e conexões que facilitam a localização dos conteúdos

procurados pelos usuários.

Os fluxos de tarefas levam os mapas do site um passo adiante, identificando os vários

cursos de ação que um usuário pode percorrer na seção do respectivo site. Quando usados em

conjunto, os mapas do site e os fluxos de tarefas podem fornecer ao usuário uma imagem

clara das estruturas de conteúdo e indicar as formas de navegação (UNGER; CHANDLER,

2012, tradução nossa).

Para organizar as categorias dos livros, teve-se como base o site e-comerce de livros

usados “estante virtual”, conforme ilustra a figura a seguir.

Figura 8 – Estante virtual

Fonte: https://www.estantevirtual.com.br/

38

A figura apresentada a seguir mostra a estrutura do site map.

Figura 9 – Site map


A página inicial do site, denominada Home, é o lugar onde o usuário encontra as

primeiras interações com a interface. As categorias dos livros estão organizadas da seguinte

maneira: literatura: técnicos e profissionais: periódicos e equilíbrio pessoal, e respectivas

subcategorias. O usuário também pode acessar livros selecionados pela loja no link

“Curadoria” ou livros com ofertas especiais em “Recomendações”.

O link “Quem somos” dá acesso a informações do próprio Sebo Cia do Saber e o

link “Suporte” permite que o usuário se comunique com a loja. O usuário também poderá

navegar pelo site abertamente, porém para efetuar uma compra, deverá estar previamente

cadastrado.

Para o cadastro é necessário fornecer informações pessoais como nome, e-mail,

senha, data de nascimento, endereço, cartão de crédito (opcional). Também é preciso

concordar com os termos de uso do site. Se os campos com as informações forem preenchidos

com sucesso, o usuário receberá um e-mail no endereço eletrônico fornecido, com um link

para ativar a sua conta. Com o cadastro completo, o usuário poderá então efetivar a compra

dos produtos disponíveis no site do Sebo, mediante busca no campo de texto ou navegando

pelas categorias.

39

Ao acessar uma das categorias, é possível filtrar produtos. Também há uma

seleção de recomendações, com a indicação dos livros com as melhores ofertas. Em

“Curadoria”, o usuário terá acesso a pacotes de compra com livros pré-selecionados pela loja.

A figura seguinte ilustra o fluxo de compras no site.

Figura 10 – Fluxo de Compra


Depois de selecionado, o produto será enviado ao “Carrinho”. Esta página reúne

todos os itens da compra que também podem ser removidos. Em seguida, na página de

checkout, o usuário poderá criar uma conta, simplesmente preenchendo os campos com suas

informações. Se já houver um cadastro feito anteriormente, também há a opção de fazer o

login. Caso o usuário queira que a encomenda seja entregue em outro endereço, ele poderá

adicionar um novo.

O pagamento pode ser feito por cartão de crédito ou boleto. Caso haja algum

problema com o pagamento por cartão de crédito, o usuário terá a opção de cadastrar outro

cartão, optar pelo pagamento via boleto, ou salvar os dados do pedido para uma compra

posterior. Todos os produtos salvos poderão ser acessados na página da conta do usuário, no

link “Pedidos”. O pedido também pode ser cancelado, ação esta que demandará o

esvaziamento do “Carrinho”.

O fluxo acaba na página “Sucesso de compra”, quando o sistema gera um e-mail a

ser enviado ao cliente, confirmando a compra, ou anexando um boleto. Todo o fluxo de

compra foi baseado nos sites das livrarias “Saraiva” (https://www.saraiva.com.br/) e

“Livrarias Curitiba” (https://www.livrariascuritiba.com.br/).

40

4.4 WIREFRAME

Segundo Unger e Chandler (2012), o wireframe é uma ferramenta utilizada para

detalhar todos os elementos da página, as interações possíveis e os resultados das operações

realizadas, conforme ilustra a figura seguinte.

Figura 11 – Whireframe da página inicial

Fonte: Elaborado pela autora

A logomarca do Sebo “Cia do Saber” está localizada no cabeçalho da página,

precisamente no canto superior esquerdo. No canto superior direito fica a área reservada a

informações do usuário.

Quando o usuário não está “logado” no site ou não possui cadastro, esta área

apresenta as ações de “fazer login” ou “criar cadastro”. Centralizada no topo da página fica a

área de busca, onde o usuário pode fazer pesquisas sobre o material de seu interesse, digitando

nomes de autores ou títulos de livros. Logo abaixo desta linha, vale frisar, está o “Menu”,

onde são exibidas as opções de navegação do site, a saber: “Início”, a página inicial,

“Curadoria”, uma seção de livros selecionados, “Categorias”, um conjunto de páginas com

todos os livros separados pelo seu gênero, e “Quem somos”, uma página informativa da loja

física.

41

Na segunda e maior parte do wireframe está o conteúdo, o qual varia de acordo

com a seleção do usuário. Quando a página inicial está selecionada (Início), o conteúdo

apresentado é o de livros recém-adicionados no site e uma área destinada à divulgação de

promoções e ofertas especiais.

Cada produto possui título, autor, categoria, editora, ano de publicação e

descrição. Ao selecionar um livro o usuário acessará a página com todas as informações do

produto, assim como livros relacionados, quando terá a opção de adicionar ao carrinho. Nesta

página também se encontram os comentários, espaço onde os usuários podem escrever sobre

o livro em questão (para comentar não é necessário estar “logado”).

Quando um produto é adicionado ao carrinho, uma mensagem é mostrada no topo

da página, avisando que o produto está no carrinho, com o respectivo link para acesso. Esta

abordagem tem como objetivo fazer com que o usuário continue adicionando itens à sua

compra, para só então finalizar a operação, clicando no ícone do carrinho.

Além de selecionar um produto para a compra, é possível marcá-lo como favorito,

mas para tal operação o usuário deverá estar “logado”. Para conferir os produtos adicionados

ao carrinho ou salvos como favoritos basta clicar nos ícones que se localizam no canto direito

da tela. No fim da página, encontra-se o rodapé com informações e contato da loja.

Figura 12 – Whireframe da página de Busca


42

Na página de busca, o cabeçalho não se altera. O conteúdo apresentado

corresponde aos livros da busca realizada, que podem ser filtrados por subcategorias e preço.

Figura 13 – Whireframe da página do Carrinho


A página do carrinho é o local onde se encontram todos os produtos selecionados

para compra, com as respectivas informações, o preço do frete e o subtotal a pagar. Também é

possível descartar itens já selecionados.

O usuário pode confirmar a compra e ir para a página de “Checkout” ou deixar o

pedido em aberto, salvando-o. Caso o usuário não seja cadastrado, as informações de cadastro

serão solicitadas na página de checkout. Todos os pedidos podem ser encontrados no perfil do

usuário, no link “Meus pedidos”.

43

Figura 14 – Whireframe da página do Checkout


Na página de “Checkout”, o usuário precisa confirmar o endereço onde os

produtos serão entregues e selecionar uma forma de pagamento. Também há opção para

adicionar um cartão de crédito ou outro endereço, caso a entrega tenha de ser feita em outro

lugar.

A página de “Sucesso” tem duas variações: (1) quando o pedido for pago via

cartão de crédito, a confirmação é imediata e o usuário poderá ter acesso ao código de rastreio

assim que o pedido for postado; e (2) se a opção selecionada for boleto, a página mostrará as

instruções para que o pedido seja confirmado.

44

4.4.1 Versão Mobile

Para a versão “Mobile”, o layout do site precisou ser adaptado para telas menores

como as de smartphones, por exemplo, no “menu”, o qual se tornou um “menu hambúrguer”.

Figura 15 – Whireframe da página inicial para Mobile


A ordem dos elementos permaneceu a mesma, comparada com a versão Desktop.

Porém, alguns elementos tiveram de ser omitidos e reposicionados devido ao espaço mínimo.

O “Menu” passou a ser apenas um botão no canto esquerdo da tela. Ao clicá-lo o

usuário terá acesso a uma aba com o acesso às páginas: “Início”, “Curadoria”, “Categorias”,

“Quem Somos”, “Perfil”, “Carrinho” e “Favoritos”.

45

Figura 16 – Whireframe da página de menu para Mobile


Para buscar um produto, a ferramenta de busca passa a ocupar toda a área do

menu quando selecionada (na tela anterior). Logo abaixo, há a opção de filtrar o resultado.

46

Figura 17 – Whireframe da página de busca para Mobile


Ao clicar no filtro de busca o usuário poderá acessar a aba onde terá as opções de

filtro, quando será possível selecionar a “Subcategoria”, o “Preço” ou o conjunto dos dois

para que a busca se torne mais específica, conforme ilustra a figura seguinte.

47

Figura 18 – Whireframe da página de busca para Mobile


4.5 LAYOUT

No site predominam as cores neutras, com o intuito de destacar as capas dos

livros, justamente o elemento que mais desperta a atenção dos usuários, segundo relatos dos

respondentes do questionário.

A tipografia foi selecionada pela sua legibilidade e por ter sido feita especialmente

para a reprodução de texto em telas eletrônicas.

48

4.5.1 Versão Desktop

A área que mais desperta a atenção é a de divulgação, onde o usuário pode interagir e

ser redirecionado para outra página relacionada com a mensagem de divulgação. As

mensagens desta área mudam de acordo com o tempo, porém o usuário pode “avançar”,

“voltar” ou selecionar uma mensagem em específico pelos elementos de navegação. Acima,

localiza-se o menu principal, contendo a logomarca do sebo, a “Área de Busca”, “Área de

Acesso do Usuário” e as seleções principais do site: “Início”, “Curadoria”, “Categorias e

“Quem Somos”.

Logo abaixo, encontram-se os livros adicionados recentemente no site. Os livros

foram separados por “cards” os quais organizam informações referentes a cada produto,

como: imagem ilustrativa, título, autor, quantidade de volumes disponíveis e preço.

Figura 19 – Tela final da página inicial


O usuário pode interagir com o “Card” clicando no botão verde ao lado do valor do

item. Quando acionado, adiciona o livro mais barato dos volumes disponíveis referentes a este

título e autor ao “Carrinho”. Para visualizar todos volumes relacionados ao título e ao autor do

49

livro, o usuário pode clicar em qualquer área do “Card”, salvo os botões para adicionar aos

favoritos e “Adicionar ao carrinho”.

Outra interação possível com o “Card” do livro é clicando no ícone em formato de

coração, no canto direito, o que faz com que o livro pertença aos seus favoritos. Porém, o

usuário deverá estar “logado” e caso não esteja, será direcionado para a “Página de Pedido de

Login”, onde poderá também se cadastrar. Se o usuário não deseja “logar-se” ou fazer o

cadastro no momento, ele poderá sair desta página, clicando no “x” que aparece no canto

superior direito do aviso.

Figura 20 – Tela final da página com Pedido de Login


O usuário, para acessar o site com a sua conta ou cadastrar-se, poderá clicar no botão

de “Acesso”, no canto direito da “Barra de menu”. Esse botão poderá ser acionado a qualquer

momento. Então, o usuário terá acesso a “Página de Login”, onde também há a opção de

acessar com uma conta do facebook já cadastrada. Para cadastrar uma nova conta, o usuário

deve clicar no botão “Anda não tenho Conta”, quando será redirecionado para uma página de

cadastro.

50

Figura 21 – Tela final da página de Login


Figura 22 – Tela final da página inicial com o usuário “logado”


51

Quando o usuário estiver logado, aparecerá no canto superior direito na área do

“Menu Principal” a foto e o nome do mesmo. Nesta área o usuário tem acesso aos seus dados

pessoais e dados de compra clicando em “Acessar meu perfil”.

Na “Página do Perfil do Livro” há três principais áreas referentes ao título

selecionado. A primeira e principal área contém o “Card” com todas as informações do

produto. O usuário pode expandir a descrição do livro em “Mais” e adicionar o produto ao

carrinho. Na segunda área, encontram-se todos os produtos relacionados ao livro ao lado

(“Área principal”). Ou seja, em “Relacionados” o usuário poderá encontrar o mesmo livro

com uma edição diferente ou até mesmo livro totalmente diferente, mas que tenha relação

com o livro da área principal.

Figura 23 – Tela final da página do Perfil do Livro


52

Os comentários estão em uma terceira parte da tela, a qual tem menos importância,

porém pode influenciar na hora compra. Para deixar um comentário nela o usuário deve ter

comprado o livro em questão.

Para voltar à página anterior, há dois botões (“Voltar a pesquisa”) localizados acima

e abaixo da tela, na área referente ao conteúdo.

O usuário poderá navegar pela tela, clicando nos livros na lista de “Relacionados”.

Ao selecionar um “Card” da lista, este passa a ser o livro da “Area Principal”, à esquerda.

Figura 24 – Tela final da página do Perfil do Livro 2


53

Ao clicar no botão “Adicionar ao carrinho” o usuário receberá um Feedback, que

consiste em um aviso na cor verde acima do “Menu principal”. Este aviso desaparece em

questão de segundos, mas também pode ser descartado ao clicar no “x” à direita.

Acima do ícone que representa o “Carrinho” aparece o número de itens adicionados

até então.

Figura 25 – Tela final da página do Perfil do Livro adicionado no Carrinho


54

Na página do “carrinho” o usuário pode voltar à página anterior, clicando em

“voltar”, no canto esquerdo da área de conteúdo. Também pode remover algum livro já

selecionado, clicando em “remover”. Mas, para ir para a próxima etapa de compra

(“Checkout”) é preciso clicar no botão “Confirmar”.

Figura 26 – Tela final da página do Carrinho


55

Figura 27 – Tela final da página do Perfil do Livro


Ao clicar em “Continuar” na tela anterior (“Tela Final da Página do Carrinho”) a

página irá expandir para o “Checkout”. Nesta tela o usuário pode conferir e editar os dados do

seu pedido. Caso algum dado esteja incorreto, a compra não irá ser efetivada e aparecerá uma

mensagem de erro na área que deve ser corrigida.

56

O usuário pode preencher com os seus dados o primeiro e segundo “card” para criar

uma conta nova.

Figura 28 – Tela final da página do Carrinho com Login


Se o usuário estiver logado, algumas informações já estarão preenchidas nos “cards”,

mas todas podem ser editadas.

Na tela final de compra o usuário receberá um e-mail confirmando o pedido. Ele

também poderá acompanhar todos os seus pedidos través do seu perfil, clicando em “Meus

pedidos” ou em “Acessar meu perfil”.

57

Figura 29 – Tela final da página de Sucesso de Compra


Os livros estão divididos por categorias e subcategorias, as quais podem ser

acessadas através do menu em “Categorias”.

Figura 30 – Tela final da página de Categorias


58

As categorias disponíveis são as seguintes:

1. Literatura

a. Literatura Brasileira

b. Literatura Estrangeira

c. Infanto-juvenis

d. Artes

e. Biografias

f. Poesia

2. Técnicos e profissionais

a. Administração

b. Antropologia

c. Ciência Política

d. História Geral

e. Direito

f. Economia

g. Engenharia

h. Filosofia

i. História do Brasil

j. História Geral

k. Medicina

l. Pedagogia

m. Psicologia

n. Sociologia

3. Equilíbrio emocional

a. Autoajuda

b. Esoterismo

c. Religião

4. Periódicos

a. Gibis

b. Revistas

59

No menu “Curadoria”, encontram-se pacotes de livros selecionados previamente

pelo Sebo. Os livros selecionados em cada pacote sempre vão ter algo em comum, podendo

ser: assunto, autor, gênero etc. Todos os pacotes têm preço único.

Para visualizar os produtos e adicioná-los ao “Carrinho”, que farão parte do

pacote, basta clicar em qualquer lugar na área do “Card”.

Figura 31 – Tela final da página de Curadoria


O usuário também pode procurar um produto específico na parte central no menu

principal, ao lado do ícone que representa uma “lupa”. A busca também pode ser “filtrada”

para obter um melhor resultado no canto esquerdo da tela.

60

Figura 32 – Tela final da página de Busca


As opções do “filtro” são as seguintes:

1. Categoria

2. Subcategoria

3. Preço

4.5.2 Versão Mobile

Na versão para aparelhos móveis, o conteúdo foi adaptado de acordo com o

espaço proposto. Por isso, alguns elementos tiveram de ser omitidos ou reposicionados.

61

Figura 33 – Tela final da página inicial no Mobile


62

Figura 34 – Tela final da página do menu no Mobile


63

Figura 35 – Tela final da página de Login no Mobile


64

Figura 36 – Tela final da página Pedido de Login no Mobile


65

Figura 37 – Tela final da página do livro no Mobile


66

Figura 38 – Tela final da página do Perfil do Livro adicionado no carrinho no Mobile


67

Figura 39 – Tela final da página do menu no Mobile


68

Figura 40 – Tela final da página do Carrinho no Mobile


69

Figura 41 – Tela final da página de Sucesso no Mobile


70

Figura 42 – Tela final da página de Curadoria no Mobile


71

Figura 43 – Tela final da página de Categorias no Mobile


72

Figura 44 – Tela final da página de Busca no Mobile


73

Figura 45 – Tela final da página de Filtro de Busca no Mobile


74

5 CONCLUSÃO

De início, é importante mencionar que o projeto do site “Cia do Saber”, no que

tange ao seu planejamento e desenvolvimento, só foi possível graças ao esforço de pesquisa

então empreendido e aos conhecimentos obtidos na área de web design.

O caminho em busca dos objetivos pré-estabelecidos e o suporte do referencial de

base sobre vários conceitos de design, usabilidade, arquitetura da informação, entre outros,

foram determinantes para a idealização da proposta de construção de um site de e-commerce

para disponibilização do acervo de livros do Sebo “Cia do Saber”, de maneira amigável, fácil,

proporcionando uma boa experiência para os usuários.

Por meio do questionário aplicado foi possível levantar dados sobre o usuário para

então, criar a estrutura do site, esquematizando o fluxo de informações e as ações, de forma a

obter como resultado final o layout e o protótipo do site.

De todo modo, espera-se que o layout proposto, com as considerações dos

usuários, preencha os requisitos da arquitetura de informação, de usabilidade e da

interatividade, necessários à efetivação de compras em plataformas digitais (on-line). Além

disso, espera-se que ele funcione como precedente para futuros web designers na elaboração

de outros estudos sobre e-commerce e criação de interfaces.

Por fim, dentro do escopo da presente proposta está a possibilidade de o design de

interface ser eficaz não só na aquisição de livros, mas, especialmente, contribuir para

impulsionar o hábito de leitura no Brasil.

75

REFERÊNCIAS

ALBEN, L. Quality of the experience. Interactions, 3(3), p.11-15, 1996.

ALMEIDA, Edison. Comércio eletrônico e-commerce. 2007.

ANDRADE, Maria Margarida de. Introdução à metodologia do trabalho científico. 2. ed.

São Paulo: Atlas, 1997.

ANJO, Luiz. Comércio eletrônico de livros via internet 1999.

ANJOS, Luíz Cláudio Correia dos. Comércio eletrônico de livros via internet:

considerações sobre algumas empresas brasileiras. 1999. 100f. Dissertação. (Mestrado em

Administração de Empresas_ - Curso de Pós-Graduação da EAESPIFGV. Disponível em:

<http://bibliotecadigital.fgv.br/dspace/handle/10438/5014>. Acesso em: 31 maio 2017.

BATISTA, Cláudia. Modelo de diretrizes para o processo de design de interface web

adaptativa. 2008.

BEAIRD, Jason. The principals of beautiful web design. 2010.

BEN GREMILLION, Jerry Cao. The 5 building blocks of interaction design. 2015.

BORTOLÁS, Natália Ondobás; GONÇALVES, Berenice; VIEIRA, Milton Luiz Horn.

Análise da interatividade em sites de e-commerce. Projética, Londrina, v. 3, n.2, 2012.

Disponível em: <http://www.uel.br/revistas/uel/index.php/projetica/article/view/13494>

Acesso em: 6 abr. 2017.

BORTOLÁS, Natália. Uma abordagem sobre os conceitos de interatividade e sua relação

com o design. 2013.

BOULTON, Mark. A practical guide to designing for the web. 2009.

BRAGA, Alexandre. Design de interface as origens do design e a sua influência na

produção da hipermídia. 2004.

BRANCO, Carlos; GORINI, Ana Paula. Panorama do setor editorial brasileiro. 2000.

BRISOLARA, Daniela. Design (tipo)gráfico e semiótica: proposição de um modelo analítico

e semiótico da tipografia produzida por não-experts. 2008.

BUCHANAN, R. Declaration by design: rhetoric, argument and demonstration in design

practice. Design Issues, Cambridge, MA, 2(1), p. 4-22, 1985.

CÂMARA, Bira. De onde vem a palavra sebo? 2009. Disponível em:

<http://jornalivros.com.br/2009/04/de-onde-vem-a-palavra-

%E2%80%9Csebo%E2%80%9D/>. Acesso em: 20 jun. 2018.

CAO, Jerry. Color theory in web ui design. 2015.

______. Web design for the human eye: content patterns and typography. 2015.

76

CARVALHO, Lilian. Design e emoção. 2013.

CASTELLO BRANCO, Carlos Eduardo; GORINI, Ana Paula Fontenelle. Panorama do

setor editorial brasileiro. Rio de Janeiro, BNDES Setorial, n. 11, p. 3-26, mar. 2000.

Disponível em:

<http://www.bndes.gov.br/SiteBNDES/bndes/bndes_pt/Galerias/Convivencia/Publicacoes/Co

nsulta_Expressa/Setor/Industria_Grafica/200003_7.html>. Acesso em: 28 abr. 2017.

CAVAGLIERI, Marcelo; STEINDEL, Gisela Eggert. Um lugar para observar, conversar, ler,

comprar livros e outros suportes de informação e lazer: uma análise de sebos da cidade de

Florianópolis. Inf. & Soc., João Pessoa, v.19, n.3, p. 55-64, set./ dez. 2009. Disponível em:

<http://www.ies.ufpb.br/ojs/index.php/ies/article/view/2170> Acesso em: 10 maio 2017.

CHAORDIC. Personalização para e-commerce. Disponível em:

<http://insights.chaordic.com.br/ebook-personalizacao-ecommerce>. Acesso em: 20 abr.

2017.

CHINEM, Marina Jugue. Sites de e-comerce: o design visual e a interconexão com a arte.

PPGCOM, ESPN, São Paulo, COMUNICON, 2015. Disponível em: <http://anais-

comunicon2015.espm.br/GTs/GT10/23_GT%2010-CHINEM.pdf>. Acesso em: 20 abr. 2017.

CICON, Claudia. A organização da informação em ambiente web: um estudo do portal

do PROCON-PR. 2012.

CLARO, José. Comércio eletrônico. 2013.

CORREA, Maria de Fátima Tonin Lunardi. Retratos da leitura no Brasil. Santa Catarina,

2010. Disponível em: <http://siaiap32.univali.br/seer/index.php/rc/article/view/2073> Acesso

em: 16 abr. 2017.

COSTA, Cátia. Organizador de tipos de letra. 2013.

CSIKSZENTMIHALY, M. The psychology of optimal experience. New York, Harper

Collins, 1991.

DEMO, P. Metodologia do conhecimento científico. São Paulo: Atlas, 2000.

DONALD, Norman. Design do dia-a-dia. 2006.

FAILLA, Zoara. Relatos de leitura no Brasil 4. 2016.

FERREIRA, Aurélio Buarque de Holanda. Aurélio. Dicionário da Língua Portuguesa.

Revisado conforme Acordo Ortográfico. Curitiba: Positivo, 2008.

FERREIRA, Simon Bacellar Leal ; NUNES, Ricardo Rodrigues. E-Usablilidade. Rio de

Janeiro: LTC, 2014.

FORLIZZI, J.; DISALVO, C.; HANINGTON, B. Emotion, experience and the design of new

products. The Design Journal, 6(2), p. 29-38, 2003.

FORTY, A. 2007. Objetos de desejo: design e sociedade desde 1759. São Paulo: Cosacnaif.

77

FREITAS, Sydney; RENZI Adriano Berdardo. Expectativas dos usuários nos processos de

procura e decisão de compra de livros em lojas virtuais e livrarias: um modelo mental.

Revista Ergodesign – HCI. Rio de Janeiro, RJ. Pontifícia Católica do Rio de Janeiro, v. 1, n.

1, 2013. ISSN 2317. Disponível em: <http://periodicos.puc-

rio.br/index.php/revistaergodesign-hci/article/download/42/33/> Acesso em: 31 maio 2017.

GERÊNCIA SETORIAL DE COMÉRCIO DE SERVIÇOS; Cadeia de comercialização de

livros: situação atual e propostas para desenvolvimento. 1999.

GOMES, João. Gestalt do objeto. 2008.

HEKKERT, P.; McDONAGH, D. Design and emotion. The Design Journal, 6(2), p. 1-3,

2003.

JENIFER PREERCE, YVONNE ROGERS, HELEN SHARP Design de interação. Além da

interação homem-computador. 2013.

KOSIUR, David. Uderstanding eletronic comerce. 1rst Edition. Redmond, Washington :

Microsoft Press, 1997. Cap. 1: What is eletronic comerce?

KRUNG, Steve. Não me faça pensar! 2006.

KURTGOZU, A. From function to emotion: a critical essay on the History of design

arguments. The Design Journal, 6(2):45-49, 2003.

LOBOSCO, Antonio; MORAES, Marcela; TEIXEIRA, Viviane. A influência das mídias

sociais na estratégia de marketing das empresas. Universidade Nove de Julho, São Paulo,

2011. Disponível em: <http://www.convibra.com.br/artigo.asp?ev=23&id=7862>. Acesso

em: 26 jun. 2017.

LYNCH, Patrick; HORTON, Sarah. Guia de estilo da web. Tradução de Oscar Hernàndez

Quiles. Barcelona: Editorial Gustavo Gili, 2004.

MATOS, Daiane. O impacto da internet no futuro dos sebos de porto alegre. 2014.

MCLELLAN, H. Experience design. CyberPsychology & Behavior, 3(1), p.59-69, 2000.

MEIRA, Wagner et al. Sistemas de comércio eletrônico: projeto e desenvolvimento. 2002.

MITCHELL, T. Redefining designing: from form to experience. New York, Van Nostrand

Reinhold, 1993.

MÜLLING, Tobias; ANJOS, Lucas. Características projetuais do design responsivo para

interfaces digitais. 2015.

NIELSEN, Jacob; LORANGER, Hoa. Usabilidade na Web - Projetando websites com

qualidade. São Paulo: Campus, 2009.

NIELSEN, Norman. 10 usability heuristics. 2001. Disponível em:

<useit.com/papers/heuristic>. Acesso em: 20 jun. 2018.

78

PACHECO, Andrea. Um guia completo sobre grids e design responsivo. 2014. Disponível

em: <https://brasil.uxdesign.cc/um-guia-completo-sobre-grids-para-design-responsivo-

6b192fea0124>. Acesso em: 26 jun. 2017.

PULLMAN, M.E.; GROSS, M.A. Ability of experience design elements to elicit emotions

and loyalty behaviour. Decisions Sciences, 35(3), p. 551-578, 2004.

RADFAHRER, Luli. Design webdesign. 2000.

REBOUÇAS, Raquel. Zoom - Design, Teoria e Prática. 2013.

ROCHA, Heloísa Vieira da; BARANAUSKAS, Maria; ROJO, Javier. Fundamentos do

design digital. 2008.

ROJO, Javier. Fundamentos do design digital. 2008.

ROSENFELD, Louis; MORVILLE, Peter. Information arqchitecture for the world wide

web. 2006.

SAMARA, Timothy. Grid: construção e desconstrução. 2007.

SANT'ANNA, Silvana. Tratamento da informação em ambientes digitais: capacitação do

bibliotecário para atuar como arquiteto da informação para a web. 2009.

SPENCER, Donna. A practical guide to information architecture. 2010.

SURI, F. The experience of evolution: developments in design practice. The Design Journal,

6(2), p. 39-48, 2003.

UNGER, Russ; CHANDLER, Carolyn. Project Guide to UX Design: for user experience

designers in the field or in the making. Second Edition. 2012.

VAN DER BROOCKE, Andrei Bloomfield. A usabilidade voltada para o e-comerce. RA:

2027088/3, Brasília, 2006. Disponível em:

<http://repositorio.uniceub.br/bitstream/123456789/1510/2/20270883.pdf> Acesso em: 1º abr.

2017.

VIDOTTI, S. A. B. G; SANCHES, S. A. S. Arquitetura da informação em websites. 2004.

VISSOTTO, Elisa Maria. Comércio eletrônico. 2013.

79

APÊNDICE A

QUESTIONÁRIO PARA A COLETA DE DADOS

Nome _______________________________________________

Idade _______________________________________________

e-mail: ______________________________________________

Quando foi a última vez que você comprou um livro?

- este mês

- mês passado

- três meses atrás

- seis meses atrás

- mais de seis meses atrás

Como você costuma comprar livros em uma livraria/sebo?

- Geralmente gosto de ver as novidades ou procurar nas seções específicas (suspense,

autoajuda etc.)

- Costumo pedir ajuda a alguém que trabalhe na loja para achar o livro que quero ou pedir

sugestões.

- Ambas as situações acima.

Você já comprou algum livro físico em uma loja online? Como foi?

- Não.

- Sim, foi ótimo.

- Sim, deu tudo certo.

- Sim, mas não compraria de novo.

Você costuma comprar livros usados?

- Sim, mas não frequento sebos.

- Sim, gosto comprá-los em sebos.

- Não, prefiro livros novos.

80

APÊNDICE B

RESULTADOS DA PESQUISA

universidade do sul de santa catarina design

Documents