TCC Isabela Mazzuco final

Prévia do material em texto

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 
 
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” 
 
 
 
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 
 
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” 
 
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 
Universidade do Sul de Santa Catarina 
 
__________________________________________________ 
Professor Dr. Cláudio Henrique Silva 
Universidade do Sul de Santa Catarina 
 
 
 
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).
user
Realce
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 desperteuma 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 
user
Realce
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 parceirosde 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 últimosanos 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 
 
Fonte: Elaborado pela autora (2018) 
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 
 
 
Fonte: Elaborado pela autora (2018) 
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 
 
Fonte: Elaborado pela autora 
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 
 
Fonte: Elaborado pela autora 
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 
 
Fonte: Elaborado pela autora 
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 
 
Fonte: Elaborado pela autora 
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 
 
Fonte: Elaborado pela autora 
 
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 
 
Fonte: Elaborado pela autora 
 
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 
 
Fonte: Elaborado pela autora 
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 
 
 
Fonte: Elaborado pela autora 
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 
 
Fonte: Elaborado pela autora 
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 
 
 Fonte: Elaborado pela autora 
Figura 22 – Tela final da página inicial com o usuário “logado” 
 
Fonte: Elaborado pela autora 
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