faculdade energia de administraÇÃo e...
TRANSCRIPT
FACULDADE ENERGIA DE ADMINISTRAÇÃO E NEGÓCIOS – FEAN
CURSO DE GRADUAÇÃO EM DESIGN
DESENVOLVIMENTO DE INTERFACE COM
BASE NOS PRINCÍPIOS DO LAYOUT RESPONSIVO
GISELE CORRÊA DA SILVA
FLORIANÓPOLIS-SC
2017
FACULDADE ENERGIA DE ADMINISTRAÇÃO E NEGÓCIOS – FEAN
CURSO DE GRADUAÇÃO EM DESIGN
GISELE CORRÊA DA SILVA
DESENVOLVIMENTO DE INTERFACE COM
BASE NOS PRINCÍPIOS DO LAYOUT RESPONSIVO.
Trabalho de conclusão de curso apresentado ao curso de Design Gráfico da Faculdade Energia de Administração e Negócios - FEAN, como requisito parcial para a obtenção do grau de bacharel em Design Gráfico, sob orientação da professora Dra. Marta Cristina Goulart Braga.
FLORIANÓPOLIS-SC
2017
RESUMO
Após o surgimento dos diversos tipos de dispositivos de acesso à
internet, passou-se a buscar soluções para manter a usabilidade nos variados
formatos de tela existentes no mercado. O design de interface de Website
precisou, portanto, ser ampliado para ir além da aplicação dos princípios que o
regem e incorporar novas técnicas para poder lidar com essa multiplicidade de
formatos. Este trabalho aborda o desenvolvimento de uma interface para um
Website empresarial, cujo layout deve se adaptar a diferentes formatos de telas
de variados dispositivos. Esta pesquisa buscou compreender como o Web
Design Responsivo pode apoiar a exposição de conteúdos em variados
formatos de tela e conhecer os fundamentos que apóiam um projeto de
interface para Website. Como embasamento, buscou-se no Design Gráfico, na
Interação Humano-Computador, no Design de interfaces, Design de Interação,
Web Design Responsivo, Arquitetura da Informação, Experiência do Usuário e
Usabilidade subsídios que servissem de base para a fase de prototipação e de
testes com usuários. Também foram realizados questionários virtuais com
usuários. Com a pesquisa se pode compreender melhor a importância do
envolvimento interdisciplinar do design gráfico, design de interfaces e da
arquitetura de informação em projetos de web design responsivos como
requisito à usabilidade de sites. Por todos estes aspectos, acredita-se, ainda,
contribuir com a academia e com o mercado ao buscar disseminar assunto
relevante.
Palavras-chave: Web Design Responsivo, Design de Interface, Usabilidade e
Experiência do Usuário.
LISTA DE FIGURAS
Figura 1: Exemplo de layout responsivo em diferentes resoluções para diferentes
dispositivos. ................................................................................................................ 31
Figura 2 - Conteúdo com e sem meta tagviewportde claradas. ................................... 33
Figura 3: À esquerda a representação de um layout com medidas fixas e à direita
layout com medidas flexíveis. ..................................................................................... 34
Figura 4: Representação gráfica de grids com 12 colunas. ......................................... 35
Figura 5: Honeycomb de Morville. Diagrama que ilustra as facetas da UX. ............... 42
Figura 6: Fases do processo de design de interação. ................................................. 50
Figura 7: Página inicial da MCI Group. ....................................................................... 58
Figura 8: Página inicial Oceania ................................................................................. 60
Figura 9: Página inicial Planit ...................................................................................... 61
Figura 10: Esboço e anotações da interface que guia para smartphone. .................... 65
Figura 11: Esboço e anotações da interface para computadores desktop. ................. 65
Figura 12: Wireframe da proposta final da interface gráfica. ....................................... 66
Figura 13: Paleta de cores utilizada no projeto. .......................................................... 67
Figura 14: Ícones utilizados no projeto. ....................................................................... 68
Figura 15: Família tipográfica utilizada no projeto. ...................................................... 68
Figura 16: À esquerda, grid de 12 colunas. À direita, grid de 6 colunas. ..................... 69
Figura 17: Página inicial desenvolvida para as versões desktop e smartphones. ....... 70
Figura 18: Visão da tela “sobre nós”. .......................................................................... 71
Figura 19: Visão da tela “o que fazemos”, desenvolvida para as versões desktop e
smartphones. .............................................................................................................. 72
Figura 20: Visão da tela “clientes”, desenvolvida para as versões desktop e
smartphones. .............................................................................................................. 72
Figura 21: Visão da tela “portfólio”, desenvolvida para as versões desktop e
smartphones. .............................................................................................................. 73
Figura 22: Visão da tela “eventos”, desenvolvida para as versões desktop e
smartphones.. ............................................................................................................. 74
Figura 23: Visão da tela “contato”, desenvolvida para as versões desktop e
smartphones. .............................................................................................................. 74
Figura 24: gráfico correspondente ao tamanho da tela do dispositivo em polegadas. . 77
Figura 25: Avaliação sobre boa leitura de títulos com usuários de smartphones. ....... 78
Figura 26: Avaliação sobre a legibilidade de títulos com usuários de smartphones. ... 78
Figura 27: Avaliação sobre boa leitura do corpo de texto com usuários de
smartphones. .............................................................................................................. 79
LISTA DE QUADROS
Quadro 1:
Briefing.................................................................................................... 54
LISTA DE ABREVIATURAS E SIGLAS
AWD – Adaptive Web Design
A.I. – Arquitetura da Informação
AVA – Ambiente Virtual de Aprendizagem
CSS – Cascading Style Sheets
CSS3 – Cascading Style Sheets Versão 3
CLI – Command-Line Interface
CMS – Custom Management System
DI – Design de Interação
EU – Experiência do Usuário
GUI – Graphic User Interface
HTML – Hypertext Markup Language
IHC – Interação Humano-Computador
RDW – Responsive Web Design
RIA – Rich Internet Application
TIC – Tecnologia da Informação e Comunicação
URL – Uniform Resource Locator
UX – User Experience
W3C – World Wide Web Consortium
XML – extensible Markup Language
XHTML – extensible Hypertext Markup Language
WWW – Word Wide Web
1. INTRODUÇÃO 9
1.1 JUSTIFICATIVA 12
1.2 OBJETIVOS 13
1.2.1 Objetivo Geral 13
1.2.2 Objetivos Específicos 13
1.3 ESTRUTURA DO TRABALHO 13
2. REVISÃO DA LITERATURA 15
2.1 DESIGN GRÁFICO E INTERFACES GRÁFICAS NA WEB 15
2.1.1 Design Gráfico 15
2.1.2 A Web 16
2.1.3 Tecnologia Web e Padronização 18
2.2 ADAPTANDO SITES AO AMBIENTE DO USUÁRIO 20
2.2.1 Interação Humano-Computador (IHC) 20
2.2.2 Design de Interface 22
2.2.3 Princípios e Diretrizes de Design de Interação 24
2.2.4 Anatomia de uma Página Web 26
2.2.5 Teoria do Grid 27
2.2.6 Design de Interação 29
2.2.6.1 Tipos de interação 29
2.2.7 Design Responsivo 30
2.2.7.1 Técnicas de Design Responsivo 32
3 ARQUITETURA DA INFORMAÇÃO 36
3.1 QUANTO À ABORDAGEM 37
3.2 TÉCNICA CARDSORTING 37
4 USABILIDADE E EXPERIÊNCIA DO USUÁRIO 39
5 METODOLOGIA DA PESQUISA 44
5.1 CLASSIFICAÇÃO DA PESQUISA 44
5.1.1 Quanto à abordagem 44
5.1.2 Quanto aos fins 44
5.1.3 Quanto aos meios 45
5.1.4 Amostra 45
5.1.5 Instrumentos de coleta de dados 46
5.1.6 Análise e interpretação dos dados 47
5.1.7 Delimitação da pesquisa 48
5.1.8 Limites 48
6. METODOLOGIA DE PROJETO DE DESIGN 50
7. DESENVOLVIMENTO DO PROJETO 53
7.1 O CLIENTE 53
7.2 BRIEFING 54
7.3 ANÁLISES DE WEBSITES SIMILARES 56
7.4 MODELAGEM DO USUÁRIO 62
7.4.1 Persona 63
7.5 ESBOÇOS 64
7.5.1 Wireframe 66
7.6 PALETA CROMÁTICA 67
7.7 IMAGENS, ILUSTRAÇÕES E SIGNOS 67
7.8 FAMÍLIA TIPOGRÁFICA 68
7.9 GRID 69
7.9.1 LAYOUT 69
8. TESTE COM USUÁRIO 75
8.1 TESTES COM USUÁRIOS 75
8.2 ANÁLISE DOS DADOS 76
9. CONSIDERAÇÕES FINAIS 81
9.1 SUGESTÕES PARA NOVOS ESTUDOS 83
REFERÊNCIAS 84
9
1. INTRODUÇÃO
A World Wide Web transformou o modo de comunicação e a
natureza das relações sociais. As pessoas a utilizam como entretenimento,
para buscar serviços e produtos e para estabelecer relações comerciais. Por
representar economia de tempo, os usuários percebem a comodidade da
internet e passam a utilizá-la para realizar todo tipo de atividade.
As empresas constataram a importância de se fazerem presentes
virtualmente e trataram de adquirir um canal de comunicação, desenvolvendo
um Website, o qual representa a organização na grande rede.
Exatamente por ser o site um ponto de exposição da empresa na
internet, ele precisa, a partir da funcionalidade e estética, transmitir os valores,
a filosofia e a imagem da instituição.
Com a evolução das Tecnologias de Informação e Comunicação
(TIC) surgiram novos dispositivos com acesso à internet, os quais chegam ao
mercado apresentando funcionalidades e características variadas. São: tablets,
smartphones, desktops, notebooks, televisores e, recentemente, geladeiras
ganharam acesso à internet. Neste sentido, Villela (2016, n.p.) destaca:
O número de casas com acesso à internet por tablet, celular e
televisão cresceu 137,7% – passando de 3,6 milhões para 8,6
milhões, de 2013 para 2014. O número de domicílios com acesso à
internet por tablets (21,9%) e televisão (4,9%) cresceu 76,8% e
116,34% respectivamente no período.
Esta variedade tecnológica associada à evolução da qualidade e
operacionalidade da internet oferece aos usuários maior facilidade de acesso a
conteúdos, independentemente do local onde se encontram. É comum ver
interações usuários-dispositivos em todos os lugares: nos ônibus, bancos,
praças, salas de aula, shoppings, vias públicas, dentre outros.
Conforme surgem novos dispositivos, maior velocidade de internet é
oferecida, navegadores buscam se preparar para incorporar e interpretar as
mudanças de padrões estipuladas pelo World Wide Web Consortium (W3C),
organização internacional que desenvolve padrões de internet. Também vão
aparecendo novos problemas na relação homem-interface, oriundos destas
mesmas mudanças, o que exige soluções compatíveis ao avanço tecnológico.
10
Neste sentido, a qualidade da interação com a interface dos
dispositivos tem sido alvo de discussões entre desenvolvedores Web,
principalmente no que diz respeito a como projetar interfaces que se adaptem a
diferentes telas e, ainda, por exemplo, ao uso de scroll diante dessa
diversidade e outras formas de interagir que possam dificultar a usabilidade das
interfaces (SILVA; SANTOS, 2016).
A fim de atender a essa necessidade, surge o Web Design
Responsivo, que permite a adaptação dos elementos gráficos de uma interface
web a diferentes telas de dispositivos, levando em consideração seu
comportamento. Adaptando textos, mídias e menus mediante a tela, orientação
e dispositivo (CALLAHAN, 2012, SILVA, 2014).
O Design Responsivo teve como premissa as constantes
transformações e evoluções sofridas pelas linguagens web, como: HTML, XML,
XHTML, CSS e a aplicação de padrões Web implementados pela W3C. Estes
padrões viabilizaram aos desenvolvedores, infinidades de recursos,
possibilitando-os projetarem de forma segura e acessível interfaces
responsivas que atendem desde desktops às múltiplas plataformas mobile.
Estes recursos tornaram eficientes não só os processos de construção de
páginas, mas também sua manutenção (W3C, 2016).
Na atualidade a responsividade é um requisito importante para a
usabilidade de sites, pois oferece ao usuário uma experiência mais agradável
em dispositivos móveis, além de aumentar o ranking de Websites. Isto é
possível devido há um algoritmo desenvolvido pelo Google, que detecta
automaticamente Websites que possuem o mesmo código HTML para
dispositivos móveis, auxiliando a criar ambientes mais interativos, evitando que
os usuários migrem para o concorrente, que certamente estará preparado para
esta tecnologia. Uma pesquisa mostrou que 74% das pessoas estão mais
propensas a voltar para um site mobile-friendly, ou seja, adaptado aos
dispositivos móveis (ADNEWS, 2015).
Contudo, ainda se encontram na internet ambientes antigos que não
estão aproveitando da evolução da tecnologia Front-End. Estes sites possuem
interfaces e interações básicas através de links textuais, não utilizam os
princípios da Rich Internet Application (RIA) que permitem elementos de
interação conforme os encontrados em aplicações desktops, não possuem
11
funcionalidades de atualização parcial das páginas, não são adaptáveis aos
variados dispositivos de acesso, muito menos foram projetados com base em
estudos de arquitetura da informação.
Plataformas Web projetadas na atualidade e com foco no usuário,
além de aproveitarem de novos recursos de desenvolvimento, também são
mais eficientes visto que levam em conta vários aspectos como conforto,
facilidade de uso e segurança. Estes requisitos compõem a ergonomia voltada
para interface e interação, pois influenciam sobremaneira a funcionalidade da
plataforma e, consequentemente, estabelecem uma relação de confiança entre
clientes e empresa (GOMES FILHO, 2010).
A usabilidade se determina pelas seguintes características: facilidade de uso, capacidade de aprendizado rápido, dificuldade de esquecimento, ausência de erros operacionais, satisfação do usuário e eficiência na execução de tarefas a que se propõe (NIELSEN, 2000, 2002, 2006 apud FERREIRA; RODRIGUES, 2008).
Assim, é apropriado pensar o desenvolvimento de interfaces que
atendam aos preceitos da usabilidade e da experiência do usuário. A questão
vem ao encontro do design de interfaces e interação, pois na atualidade estes
tipos de projetos visam manter as qualidades funcionais, estéticas e
comunicacionais independentemente do dispositivo de acesso.
Deste ponto de vista, o Web design responsivo torna-se o principal
foco deste trabalho, uma vez que a responsividade do layout impacta na
qualidade do acesso do usuário aos serviços e produtos oferecidos pelas
empresas.
Com base no acima exposto, esta pesquisa vai se alinhar por meio
do seguinte questionamento: como desenvolver uma interface para um site
empresarial visando à adaptação de conteúdos a diferentes formatos de tela de
variados dispositivos?
12
1.1. JUSTIFICATIVA
O interesse pela temática surgiu durante a graduação acadêmica
quando houve contato com as disciplinas de projeto de interface web e
usabilidade para interfaces gráficas, aprendizagem que aguçou ainda mais o
fascínio por interfaces responsivas.
A prática profissional na criação gráfica possibilitou a percepção do
impacto negativo que causa nos usuários a falta de usabilidade nas
plataformas digitais.
É notório que o avanço tecnológico injetou mercado, de forma rápida
e contínua, variados dispositivos com funcionalidade de acesso à internet.
Entretanto, nem todas as interfaces de sites estão adaptadas para estes
dispositivos, fazendo com que percam a capacidade de interatividade.
Apenas uma parcela das empresas percebe a importância do site
como veículo relacional com os clientes, aquelas que ainda não perceberam
despotencializam o seu uso, prejudicando as relações entre serviços e
produtos com os clientes.
A relevância da pesquisa se dá por dois motivos: o primeiro deles é
o crescente aumento de dispositivos móveis com acesso à internet e suas
particularidades como gênero e tamanho de tela. O segundo motivo diz
respeito às novas diretrizes da multinacional Google, que já afetam e em nível
global as pesquisas móveis, causando significantes impactos no ranking das
empresas que não possuem Website responsivo (ADNEWS, 2015).
Esta pesquisa possui relevância científica por contribuir com o
desenvolvimento de estudos sobre um tema atual e que passa por constantes
transformações.
Por meio desta pesquisa pode-se compreender melhor a importância
do envolvimento interdisciplinar do design gráfico, design de interfaces e da
arquitetura de informação em projetos de web design responsivos como
requisito à usabilidade de sites.
Por todos estes aspectos, acredita-se, ainda, contribuir com a
academia e com o mercado ao buscar disseminar assunto relevante por meio
de Trabalho de Conclusão de Curso.
13
1.2 OBJETIVOS
Em resposta ao problema proposto, o presente trabalho apresenta
os objetivos a seguir.
1.2.1 Objetivo Geral
Desenvolver a interface de um Website empresarial, cujo layout se
adapte a diferentes formatos de telas de variados dispositivos.
1.2.2 Objetivos Específicos
Para alcançar o objetivo geral, será necessário cumprir os seguintes
objetivos específicos:
• Compreender como o Web Design Responsivo pode apoiar a exposição
de conteúdos em variados formatos de tela;
• Conhecer os fundamentos que apoiam um projeto de interface para
Website.
1.3 ESTRUTURA DO TRABALHO
O presente estudo está dividido na seguinte estrutura:
Este primeiro capítulo trata da introdução e apresenta o tema,
contexto, justificativa, problemática, pergunta de pesquisa, objetivos gerais e
específicos.
No segundo capítulo é apresentada a revisão da literatura sobre
14
design gráfico, Web, Interação Humano-Computador e desdobramentos de
assuntos tais como: design de interface, design de interação, design
responsivo, arquitetura da informação e usabilidade.
No terceiro capítulo, consta a revisão de literatura sobre arquitetura
de Informação, abordagens e técnicas. O quarto capítulo é composto por
encontram-se os fundamentos e heurísticas da usabilidade e experiência do
usuário.
O quinto capítulo apresenta a metodologia de pesquisa e
metodologia de design. No sexto e sétimo capítulo, encontra-se a metodologia
do projeto de design, precedendo do desenvolvimento detalhado das etapas
que compreendem o projeto.
Capítulo 8 explana-se sobre o desenvolvimento de trabalho de
campo e finalmente os capítulos 10 e 11 apresenta a conclusão e sugestões
para trabalhos futuros.
15
2. REVISÃO DA LITERATURA
A revisão de literatura busca incluir os seguintes conhecimentos
necessários para atingir os objetivos propostos nesta pesquisa: Design Gráfico,
breve histórico e características de desenvolvimento para Websites, Interação
Humano Computador e seus desdobramentos, tais como: Design de interfaces,
Design de Interação, Web Design Responsivo, Arquitetura da Informação,
Experiência do Usuário e Usabilidade.
2.1 DESIGN GRÁFICO E INTERFACES GRÁFICAS NA WEB
2.1.1 Design Gráfico
Conforme Niemeyer (2007), a origem etimológica de “design” vem
do latim “designo”, que significa designar, marcar, representar, dispor. Ao ser
introduzido na língua portuguesa a partir do idioma inglês “design” causou uma
distorção de seu real sentido que é “projetar”, assimilando-o a habilidade de
representar algo graficamente, considerando a definição da profissão e suas
atribuições.
O Design Gráfico está entre uma das áreas mais conhecidas do
Design, porém traz distorções de seu real significado e campo de atuação.
Para alguns, limita-se apenas à área gráfica, o que não é correto, pois possui
enorme abrangência, atuando de forma interdisciplinar com outras ciências.
No entendimento de Villas-Boas (2007), o design gráfico não é
simplesmente a diagramação de uma página nem são ilustrações, apesar de
estas poderem ser ferramentas de trabalho do designer ou fazerem parte de
um projeto. A sua contribuição vai além da simples criação de identidades
visuais e possui uma vasta rede de atuações. Pode-se afirmar então que o
design gráfico busca pela criação da interface, o meio de comunicação e
interação entre o homem e o espaço, seja através de um produto ou serviço,
funcionando como um tradutor visual de ambientes e valores.
16
Sobre sua atuação interdisciplinar, Coelho (2008, p. 206) assimila
desta forma: “costuma-se atribuir ao design a natureza interdisciplinar,
justamente porque a atividade cruza diferentes práticas profissionais e
conhecimentos teóricos de diferentes naturezas”. Contudo, muito mais que um
processo interdisciplinar, o design deve atender as necessidades humanas,
adaptando os objetos conforme suas características físicas e mentais.
Com a evolução da Web, o designer gráfico assume papel também
de Designer de Interface, permitindo usar de forma criativa elementos como
imagens, tipografia, vídeos, tendo como objetivo auxiliar a interatividade.
A partir do aparecimento das interfaces gráficas de computadores o
design gráfico teve papel importante nos projetos de interfaces de software
desktop, mostrando ser uma ferramenta de comunicação fundamentada em
base conceitual capaz de estruturar e promover linguagens visuais que vem
possibilitando a forma de apresentação de conteúdos numa perspectiva
diversificada, por meio de elementos textuais ou não textuais. No que se refere
à web, o design gráfico encontrou seu espaço no design de interface e
interação auxiliando a interatividade dos usuários. O design gráfico se alia aos
estudos em Interação Homem-Computador (IHC) para proporcionar interfaces
que ajam como metáfora tradutora, utilizando-se de códigos linguísticos,
absorvidos e interpretados pela mente humana (ROYO, 2008).
2.1.2 A Web
A rede mundial de computadores, conhecida como Word Wide Web
(WWW), ou conforme citado no início deste trabalho vem sendo chamada
simplesmente “Web”, teve início em 1991, através do cientista inglês Tim
Berners-Lee, que buscava uma forma de possibilitar a comunicação entre
professores e pesquisadores ao redor do mundo. Esta comunicação funcionava
através de sistemas de documentos em hipermídia que são interligados e
executados em navegadores, por meio da internet. Em 1993 a Fundação de
Ciências dos Estados Unidos decidiu que a rede não estaria restrita apenas a
instituição acadêmicas, mas também a usuários domésticos.
17
Não demorou muito para que a Web atingisse a marca de dois
bilhões de usuários, 200 milhões de sites e mais de um trilhão de URL´s
apenas duas décadas depois. Atualmente, a internet tem transformado as
interações humanas, migrando cada vez mais dos computadores desktops
para os dispositivos móveis, possibilitando acesso maior a conteúdos
multimídias (DIGITAL, 2009).
Desta forma o design gráfico passou a ser importante área de
conhecimento para o desenvolvimento de Websites. O profissional desta área
atua no projeto de sites, buscando proporcionar interatividade e usabilidade de
modo simples, transparente e amigável.
Por isso, muito mais que ter uma preocupação apenas estética, o
designer gráfico deve atuar como o sujeito que proporciona uma transição
entre o mundo real e o digital.
Atualmente, encontra-se na Web uma diversidade de mídias e
ferramentas, tais como: blogs, wikis, Sistemas de Comércio Eletrônico,
Sistemas Gerenciadores de Conteúdos (CMS), Ambientes Virtuais de
Aprendizagem (AVA), Sistemas Gerenciadores de Redes Sociais, dentre outras
plataformas que estão voltadas para disseminar conteúdos em áreas, como:
educação, e-commerce, apresentação de produtos e serviços, sites
profissionais, entretenimento, sites promocionais e comunidades sociais
pessoais ou profissionais. Algumas destas mídias são também excelentes
ferramentas de atendimento ao consumidor e até para estimular vendas.
Existem várias vantagens em manter uma presença na Web,
principalmente para a construção de um relacionamento com o público-alvo 24
horas por dia e para atingir maior abrangência de divulgação no mercado
nacional e internacional (RADFAHRER, 2000).
Porém, existem formas alternativas que viabilizam o
desenvolvimento de sites com baixo custo, denominando-se “plataformas open
source”. Essas plataformas oferecem aos usuários livre acesso aos códigos-
fontes da estrutura escolhida, dando plena liberdade para o desenvolvedor
projetar o layout e realizar atualizações de informação.
Atualmente encontramos alguns exemplos disponíveis no mercado
como plataformas de comércio eletrônicas e outro CMS: Joomla e Drupal,
dentre elas os Content Management Systems CMS e Wordpress, que são
18
gerenciadores de conteúdos muito utilizados por empresas que precisam
desenvolver sites com rapidez, qualidade, viabilidade financeira e tecnológica.
Desenvolver Websites através desta plataforma pode ser algo
vantajoso, pois existe uma equipe de programadores que disponibilizam
atualizações de código-fonte sem custo algum, o que não ocorreria em um
empreendimento personalizado. Essa estrutura também oferece outras
vantagens como: autonomia de customização de layouts; maior abrangência de
funcionalidades; e integração com outros recursos como gestão, sistema de
pagamento, operador logístico (SOUZA, 2016; OPENSOURCE CMS, 2017).
2.1.3 Tecnologia Web e Padronização
Os sistemas web são compostos, dentre outros dispositivos, por
servidores e clientes. Nos servidores encontram-se as páginas de Websites,
bancos de dados e aplicativos executáveis. No cliente está o navegador e,
através dele, é possível apresentar as páginas dos sites que estão
armazenadas nos servidores (GROVE, 2010).
Atualmente o termo front-end é utilizado para designar a interface
entre o usuário e o servidor. Mais que isso, o front-end engloba um conjunto de
recursos que interpretam linguagens específicas.
Nesta atividade os designers podem trabalhar em conjunto com
programadores, projetando a parte visual da interface gráfica, garantindo a
compatibilidade da interface com diversos browsers, adaptando o tamanho de
imagens dando suporte aos programadores que conhecem as linguagens front-
end dos navegadores. São exemplos destas linguagens o HTML (Linguagem
de Marcação de Hipertexto), Cascading Style Sheets (CSS) e Java Script
(FERREIRA; NUNES, 2011).
A evolução do HTML, XHTML e, HTML4 para HTML5 e o
aparecimento de linguagens scripts, tais como o Java Script, levaram a
algumas mudanças que possibilitaram maior funcionalidade às páginas dos
sites. Um dos exemplos desta evolução é a chamada Rich Internet Application
(RIA), termo introduzido pela Macromedia em março de 2002 para descrever
aplicações que possuem as mesmas funcionalidades tradicionais dos desktops,
19
pois permite transferir o processamento para a interface do navegador, evita
sincronizações que acabavam diminuindo o desempenho (causam lentidão na
atualização de telas) e facilita a experiência do usuário.
As aplicações RIA deram início a uma nova alternativa para
disponibilizar conteúdo rico de uma maneira que antes não era possível na
web, principalmente quando as aplicações eram direcionadas aos negócios
(VARASCHIN; SATO; ZEM-LOPES, 2013).
Tendo em vista que antigamente os navegadores se comportavam
de forma diferente, diante das linguagens front-end foi necessário estabelecer
padrões para a criação e interpretação de conteúdos para Web. Padrões estes
implementados pela W3C, organização internacional criada por Tim Berners-
Lee em 1994.
O objetivo era o de potencializar a Web por meio do
desenvolvimento de protocolos comuns e fóruns abertos que promovessem a
sua evolução e assegurassem a sua interoperabilidade.
Sites desenvolvidos segundo esses padrões podem ser acessados e
visualizados por qualquer pessoa ou tecnologia, independente do hardware ou
software utilizado, de maneira rápida e compatível com os novos dispositivos
que surgem no mercado, auxiliando de forma positiva a experiência do usuário
(VARASCHIN; SATO; ZEM-LOPES, 2013, W3C, 2017).
O surgimento de novos dispositivos é outra situação que provoca a
necessidade de padrões, visto a diversidade de telas de diferentes formatos,
tais como: 21:9, 4:3, 16:9, o que desafia os designers a projetarem interfaces
sob uma ótica do design centrado no usuário (CALLAHAN, 2012).
Neste sentido, os estudos voltados a Interação Humano-Computador
(IHC) são as vias para o conhecimento de soluções mais ergonômicas, pois
visam conformar melhor as interfaces às questões cognitivas e visuais dos
usuários, bem como torná-las adaptáveis a desktops, celulares, tablets e
notebooks, já que o uso de dispositivos móveis é cada vez mais crescente.
20
2.2 ADAPTANDO SITES AO AMBIENTE DO USUÁRIO
2.2.1 Interação Humano-Computador (IHC)
Ao longo da história a comunicação tem sido uma das necessidades
do homem. A linguagem rupestre já era um anseio pela expressão, o que criou
um espaço de uso de uma interface (ROYO, 2008).
Para Rocha e Baranaukas (2003) a evolução aprimorou a
necessidade de comunicação do homem, ampliando o campo de interação não
só entre as pessoas, mas entre estas e o computador. A aspiração pela
interação, agregada à evolução do homem e da tecnologia possibilitou o
desenvolvimento de dispositivos que, atualmente, são imprescindíveis nas
relações sociais. Como disciplina de estudo para investigar este fenômeno
surge em meados dos anos 80 o termo Interação Humano-Computador.
A IHC é uma área da computação que estuda a interação do homem
e os sistemas computacionais. É um estudo interdisciplinar que relaciona a
ciência da computação, design, ergonomia, psicologia, semiótica e áreas afins,
buscando melhorar a usabilidade para interfaces (ROCHA; BARANAUSKAS,
2003).
De acordo com Preece, Rogers e Sharp (2005) um dos objetivos da
IHC é desenvolver e projetar sistemas nos quais os usuários possam executar
suas tarefas com segurança, eficiência e satisfação. São aspectos também da
usabilidade, a qual se caracteriza pela “[...] capacidade que um sistema
interativo oferece a seu usuário em determinado contexto de operação para
realização de tarefas de maneira eficaz, eficiente e agradável.” (CYBIS;
BETIOL; FAUST, 2010, p. 16).
Dado o grande desenvolvimento da tecnologia o desafio da IHC é
acompanhar a evolução dos dispositivos e sistemas sem excluir determinados
grupos de usuários, possibilitando suas interações (ROCHA; BARANAUSKAS,
2003).
No início dos computadores a interação era muito limitada e se dava
através de linha de comando que o usuário digitava e visualizava na tela. Os
21
computadores eram enormes, ocupavam salas inteiras, sendo possível
executar um programa por vez, entradas ou saídas de dados. Com a evolução
do computador abriram-se maiores possibilidades de interação, agregando-se
mais complexidade às ações digitais onde várias atividades podiam acontecer
simultaneamente, permitindo-se a participação do usuário nas diferentes
etapas dos processos digitais. Na década de 70 foi possível a fabricação de
computadores pessoais (RAYMOND; LANDLEY, 2017).
À medida que os computadores foram ampliando, evoluindo também
a capacidade de processamento e a viabilidade de exibir gráficos, foi percebida
a oportunidade de tornar essa interação mais acessível, trazendo para esse
contexto, periféricos que pudessem ampliar essa interação, como: teclados e
mouses (ROCHA; BARANAUSKAS, 2003).
Existem diferentes tipos de interface que dão suporte às interações
homem-computador, tais como: Interface de Comando de Voz, Interface
Baseada em Menus, Interface de Linha de Comando, entre outras. Entretanto,
a interface que conseguiu romper as barreiras científicas e chegar aos
ambientes domésticos é a Interface Gráfica com o Usuário (GUI) (PRIOESTE,
2003).
Faiola (2001) define a GUI como a interface que disponibilizou um
significado visível do diálogo entre hardware e software, permitindo ao usuário
aperfeiçoar suas tarefas e maximizar a usabilidade do computador.
Rocha e Baranaukas (2003) enfatizam que o trabalho interdisciplinar
do design tem possibilitado a GUI se tornar cada dia mais “amigável”,
diminuindo dificuldades dos usuários na interação, estimulando-os a usarem os
dispositivos a partir do desenvolvimento mais eficiente da interface gráfica.
A interface gráfica é o modelo de interação mais utilizada e está
presente em praticamente todos os dispositivos computacionais como na
indústria de softwares, telefonia móvel e Web (RAYMOND; LANDLEY, 2004).
22
2.2.2 Design de Interface
Rocha e Baranaukas (2003, p.8) definem a interface como “[...]
superfície de contato que reflete as propriedades físicas das partes que
interagem, as funções a serem executadas e o balanço entre poder e controle”.
Segundo Royo (2008), interface é um dispositivo que estabelece
comunicação entre dois sistemas distintos, com a função de facilitar e
intermediar a troca de informação, utilizando-se de códigos linguísticos como
símbolos e signos, no qual, desde os primórdios dos tempos, já faziam parte do
universo mental e cultural dos seres humanos.
Como vimos no capítulo anterior, dentro do campo da informática a
interface gráfica com usuário é o meio pelo qual o usuário se comunica com o
sistema para realizar tarefas, tendo como objetivo propiciar a interação.
Ferreira e Nunes (2011) esclarecem que as interfaces devem ser
fáceis de usar e devem fornecer sequências simples de interação, mostrando
de forma clara as alternativas para cada passo, sem confundir o usuário e nem
deixá-lo inseguro. Os autores ainda mencionam que interfaces “amigáveis”
requerem um bom projeto de design de interface.
O objetivo do design de interface é tornar a interação do usuário o
mais simples possível em termos de realização de objetivos, buscando facilitar
a conclusão de uma tarefa.
O papel do design dentro de uma interface é dar suporte à
usabilidade, criando um sistema que não seja apenas operacional, mas
também adaptável às necessidades do usuário (FERREIRA; NUNES, 2011).
Na visão de Macedo Filho (2005) o design gráfico atua como
decodificador matemático do software, tornando-a interpretável para o usuário,
utilizando-se de fundamentos do design: proximidade e alinhamento, equilíbrio
e proporção, contrastes, simplificação, legibilidade e integração, buscando
facilitar a percepção e interpretação do usuário através do uso de ícones,
signos e metáforas que propiciem a comunicação visual, maximizando a
cognição dos usuários.
Existem vários estilos de interface, assim como as pessoas diferem
entre si, as interfaces também possuem estilos distintos, como por exemplo:
23
Interfaces WYSIWYG, Interfaces Icônicas, Interface de Manipulação Direta,
Interfaces com seleção por menus, Interfaces com Diálogo em Linguagem
Natural, Interface por Diálogo Guiado por Pergunta e Resposta e Interface
Web, que é a utilizada nesta pesquisa (FERREIRA; NUNES, 2011).
Sobre interface Web Radfahrer (2000, p. 106) destaca que:
[...] é uma das partes mais importantes de um website, pois concentra a relação visitante-sistema. É o que apresenta informações e estímulos e recebe respostas, colocando a manipulação nas mãos do usuário. Por isso, muito mais que um visual bonitinho, deve ser o elemento de transição entre o mundo real e o digital. O ideal é que ela seja transparente, invisível, natural, sintética, intuitiva, prática.
Sobre projetos de design de interface voltados a Web, Felipe
Memória (2005) em seu livro “Design para Internet – Projetando a Experiência
Perfeita” faz um levantamento de duas disciplinas fundamentais que dão
suporte à usabilidade e experiência do usuário. A primeira dela diz respeito à
Arquitetura da Informação1, que busca o levantar e organizar as informações
que existirão nos sites. Deve estimar a quantidade de páginas, conteúdo e as
funcionalidades existentes em cada uma delas, bem como dar ênfase a cada
informação presente na tela, em ordem de importância.
Já a equipe de design de interface preocupa-se com a usabilidade2 e
a IHC de tudo que é projetado na página. É responsável pela facilidade de uso
e de aprendizado, memorização, tratamento de erros e até mesmo pela
capacidade de agradar o usuário. Ele utiliza a estrutura da arquitetura da
informação para compor o layout da página: hierarquizar informações, pensar o
funcionamento da navegação, montar a estrutura de grid, distribuir de forma
agradável para aperfeiçoar a interação. A seguir, abordam-se os princípios e
diretrizes para o design de interface e os elementos que compõe a anatomia de
uma página Web.
1 Nota: Arquitetura da Informação é assunto abordado no capítulo 3.
2 Nota: O assunto Usabilidade é abordado no capítulo 4.
24
2.2.3 Princípios e Diretrizes de Design de Interação
Princípios e diretrizes de design de interface orientam os projetos
com visão na usabilidade. Conforme Pressman e LOWE (2009) são os
seguintes os princípios orientadores para uma interface eficaz:
● Antecipação: um Website deve ser projeto de forma que antecipe o
próximo movimento do usuário, oferecendo facilidades de navegação que sem
exigir que o usuário procure essa capacidade.
● Comunicação: A interface deverá comunicar o status de qualquer
atividade iniciada pelo usuário. Seja ela óbvia através de uma mensagem de
texto, ou por metáforas por meio de ícones. A interface também deverá
comunicar o status do usuário, identificação, local e assim por diante.
● Consistência: refere-se a projetos de interfaces que possuam
operações e elementos semelhantes para a realização de tarefas, oferecendo
aos usuários fácil aprendizagem e manuseio.
● Autonomia controlada: liberdade oferecida pela interface que propicia
ao usuário uma navegação fluida que garanta as convenções estabelecidas
para aplicação.
● Eficiência: o projeto de interface deve potencializar a eficiência do
levando em consideração a importância de tornar a produtividade do usuário o
foco principal.
● Flexibilidade: a interface deve possibilitar que os usuários realizem
tarefas de forma aleatória. Permitindo que os usuários entendam onde estão
fornecendo funcionalidades como a de desfazer erros e retornar de caminhos
de navegação mal escolhidos.
● Foco: a disposição do conteúdo de uma interface deve permanecer
focada no objetivo do usuário, direcionando o uso a um conteúdo desejado.
● Lei de Fitt: diz respeito o tempo necessário para mover-se rapidamente
desde uma posição inicial até uma zona destino final como uma função da
distância até o objetivo e o tamanho deste. Em outras palavras, método capaz
de modelar movimentos partindo de uma posição inicial até sua área de
destino.
25
● Redução da latência: possibilita ao usuário, a realização de multitarefa
de modo que prossiga seu trabalho, enquanto aguarda o resultado de uma
ação anterior. Ex: poder executar outras tarefas na interface enquanto aguarda
o término de um download.
● Capacidade de aprendizagem: uma interface deve enfatizar um projeto
simples com conteúdos e funcionalidades intuitivas que permitam ao usuário
fácil aprendizado minimizando o reaprendizado em uma segunda experiência
com a mesma.
● Metáforas: são formas de comunicação que se apropriam de sentidos
figurados por meio de comparações implícitas. Dentro dos projetos de
interfaces, esses elementos são vistos em ícones, botões e imagens,
oferecendo aos usuários interações mais ricas.
● Mantenha a integridade do produto de trabalho: as interfaces devem
garantir sua operacionalidade, evitando que os usuários encontrem erros
durante a execução de suas tarefas. Para evitar esses transtornos, a WebApp
deve ser projetada para salvar automaticamente os dados oferecidos pelo
usuário. A interface deve sustentar essa função, oferecendo ao usuário
mecanismos de recuperação de informações.
● Legibilidade: as informações textuais da interface devem estar legíveis,
levando em consideração os diferentes tipos de usuário e sua acuidade.
Escolhas tipográficas, tamanhos e cores em segundo plano, se bem
empregados, possibilitam aos usuários boa leitura, sem o comprometimento da
informação.
● Acompanhamento do estado: possibilitar ao usuário, a continuidade
da interação independente do ponto onde a interrompeu. Para isto, as
informações devem ser armazenadas através de um logoff, retornando mais
tarde de onde pararam.
● Navegação visível: tornar a navegação visível possibilita aos usuários
maior segurança na realização de tarefas, desta forma a navegação não é mais
uma preocupação.
26
2.2.4 Anatomia de uma Página Web
Mesmo que os designers de interface possuam total liberdade para
criar layouts de infinitas formas, recomenda-se que sigam as anatomias pré-
estabelecidas como forma de dar um norte para a composição dos projetos de
interface. Sobre as partes que compõem o layout Beaird (2012) descreve os
cinco elementos que estruturam uma interface: bloco de conteúdo, logotipo,
navegação, conteúdo de rodapé e espaços em branco.
Bloco de conteúdo: local onde todos os conteúdos e elementos de
um Website serão inseridos. Este recipiente organiza todos os elementos
dentro de um espaço, evitando que fiquem de fora da janela que será
construída. Dentro da linguagem de programação sua caracterização é feita
pelas tags “body” ou “div”.
Logotipo: como elementos fundamentais na estrutura de um
Website o logotipo e as cores fazem parte do bloco de identidade que devem
aparecer no topo de cada página do site. Além de fortalecer o marketing da
empresa, devem certificar aos usuários que ainda estão visualizando as
páginas de um único site.
Navegação: os usuários sempre esperam encontrar a navegação no
alto da página, desta forma, propor um sistema de navegação de acordo com o
esperado pode facilitar o encontro de informações que facilite a navegação.
Conteúdo: oferecer conteúdo de qualidade é fundamental para
atrair novos visitantes. Porém, não garante a permanência do mesmo,
principalmente quando o usuário não encontra de forma fácil o conteúdo que
procura. Assim, oferecer um bloco de conteúdo principal como ponto focal de
um design pode auxiliar na procura da informação que necessitam.
Rodapé: por se localizar na parte inferior da página pode ser
utilizado como quebra de seção entre conteúdos ou até mesmo sinalizar o
término da página. Também pode conter informações como “direitos autorais”,
contatos, informações e links.
Espaços em Branco: refere-se aos espaços do layout não
preenchidos. Esses espaços servem de respiro visual enquanto guia os olhos
do usuário na interface. O espaço visual neutro é tão importante quanto
27
preenchê-lo de conteúdo.
2.2.5 Teoria do Grid
O grid é uma ferramenta fundamental para o design gráfico ou
design de interface, pois auxilia a distribuição de elementos gráficos de forma
proporcional e alinhada, conforme a configuração de cada página. No decorrer
da história, pintores renomados utilizavam esta técnica para a composição de
suas obras, um exemplo deles, é o artista conhecido como “pai do design
gráfico”, Piet Mondrian. Contudo, foi através da Escola Pitagórica que se
observou a ocorrência de um padrão matemático perfeito, no qual se passou a
atribuir a essa proporção características divinas. Este padrão ficou conhecido
como proporção “dourada” ou proporção “áurea”. São essas proporções que
permitem ao design gráfico, dentro de um layout de interface, compor
elementos esteticamente agradáveis (BEAIRD, 2010).
Durante o processo de desenvolvimento de interfaces Web, também
é de suma importância que os designers conheçam os princípios
fenomenológicos que influenciam a percepção visual dos seres humanos.
Como exemplo cita-se as teorias da Gestalt. Gomes Filho (2008) define a
Gestalt como escola de psicologia experimental do século passado, a qual
através de vários estudos e pesquisas trouxe à humanidade uma série de
teorias sobre a percepção humana, forma, linguagem, percepção, inteligência,
motivação e outros, influenciando a forma como percebemos e interpretamos
certos elementos visuais. Como resultante destas pesquisas, entendemos o
porquê de certos elementos visuais agradarem mais e outros não.
Beaird (2008) esclarece como se comportam alguns elementos
gestálticos dentro de um Website.
Equilíbrio: o equilíbrio garante que os elementos de um layout de
interface possuam o mesmo peso visual. Podem ser classificados como
simétricos (quando ambos os lados possuem uma linha axial) ou Assimétricos
(quando não visam à mesma proporcionalidade entre seus elementos).
Agrupamentos simétricos tendem a ser percebidos mais facilmente que os
agrupamentos assimétricos.
28
Unidade: forma como diferentes elementos de uma composição
interagem entre si. É importante que haja unidade não só dentro dos elementos
da interface Web, mas no Website como um todo, interligando e dando
coerência em toda a unidade da página.
Proximidade: a proximidade permite que certos elementos
distribuídos na página funcionem como ponto focal, orientando os olhos do
usuário.
Repetição: forma de ordenação que permite ao design manter uma
coerência visual em um layout de interface Web, utilizando-se de formas,
cores, texturas e objetos similares, produzindo uma página compreensível.
Ênfase: o objetivo deste conceito é dar destaque e atrair a atenção
do usuário a um elemento particular. Uma forma de alcançar a ênfase é isolar
certos elementos visuais da interface, transformando-o em um ponto focal,
como por exemplo, uma caixa de mensagem em primeiro plano.
Posicionamento: local onde determinados elementos de uma
interface podem estar distribuídos. Dependendo de sua posição pode interferir
na hierarquia perceptiva do usuário, visto que elementos concentrados na
esquerda terão mais chances de serem notados. Objetos afastados do centro
ou posicionados na parte direita da interface podem passar despercebidos
pelos visitantes do site.
Continuidade: recurso que pode ser utilizado como percurso de
orientação para os olhos. Dentro das interfaces funcionam como unificadores
do layout, como grids, que criam múltiplas linhas de continuidade para os
visitantes seguirem para baixo da página.
Isolamento: alguns elementos da interface tendem a se destacar
através do isolamento em relação a outros objetos. A justaposição, as cores
distintas e as variações de tamanhos são recursos que podem ser aplicados
com o intuito de dar ênfase ao elemento em questão.
Contraste: assim como o isolamento, o contraste também pode ser
utilizado para dar ênfase a um determinado componente da interface. O
contraste acontece quando cores se diferenciam entre si de forma discrepante.
Proporção: se trabalhada de forma correta pode proporcionar
harmonia entre os componentes da interface. A proporcionalidade auxilia o
design a criar ênfase em uma composição, atraindo a atenção do visitante da
29
página justamente por aparentar que o objeto está fora do contexto da página.
2.2.6 Design de Interação
Norman (2002) define design de interação (DI), como uma vertente
do design que desenvolve projetos voltados à experiência do usuário, tendo
como foco de pesquisa as relações humanas que ocorrem por meio de
mecanismos interativos.
Preece, Rogers e Sharp (2005) apontam que um dos principais
objetivos do design de interação é reduzir as frustrações que os usuários
sentem ao utilizar determinados sistemas, ao mesmo tempo melhorar os
pontos positivos. Busca desenvolver produtos que sejam eficientes e fáceis de
usar, a partir da perspectiva dos usuários. Estão presentes em vários produtos
físicos, e agora também estão presentes no meio digital.
No universo dos sistemas computacionais, a função do design de
interação é promover melhorias em interações humano-computador. Segundo
Royo (2008), a eficácia de uma interface deve ser atribuída também à
aplicação de conceitos de usabilidade e de design de informação, visto que há
a necessidade de se elaborar condições favoráveis para que a experiência do
usuário seja sempre positiva.
2.2.6.1 Tipos de interação
Uma das maneiras de auxiliar aos designers durante o processo de
design de interação é identificar como os usuários interagem com o produto ou
aplicação. Preece, Rogers e Sharp (2005), descrevem quatro tipos principais
de interação:
Instrução – estilo em que os usuários emitem instruções ao
sistema, feitos por diversas maneiras como digitar comandos, selecionar
opções de menus, falar por comandos de voz, gesticular ou até mesmo utilizar
uma combinação de teclas de função.
Conversação – estilo no qual o usuário por meio de uma interface,
30
pode falar ou escrever perguntas para as quais o sistema tem um diálogo com
o sistema e troca informação por meio de texto ou saída de voz.
Manipulação – neste estilo, os usuários interagem com os objetos
em um espaço virtual ou físico.
Exploração – estilo em que os usuários se movem por um ambiente
virtual, ou espaço físico. Dentro desses ambientes virtuais, incluem-se mundos
3D e sistemas de realidade aumentada e de realidade virtual.
2.2.7 Design Responsivo
O termo Responsive Web Design ou (RWD) surge em meados de
2010, através de Ethan Marcotte, onde por meio da publicação de seu artigo no
site “A Lista Apart”, retrata a mudança de comportamento e crescimento de
usuários móbile, demonstrando que empresas da época (2010), buscavam
desenvolver Websites voltados aos novos dispositivos, buscando adaptar de
forma inteligente às variáveis de interação do usuário (SAMY SILVA, 2014).
No entendimento de Callahan (2012), “responsivo” é a abordagem
que sugere que o design e o desenvolvimento devem responder ao
comportamento do ambiente do usuário, conforme o tamanho da tela,
plataforma e orientação. Na prática consiste em misturar grids flexíveis,
imagens flexíveis e media queries. Busca a adaptação do site,
independentemente do dispositivo de uso. Referente a esta abordagem, Samy
Silva (2014) esclarece que este entendimento vai além de uma simples
adaptação do layout ao tamanho da tela. O autor compreende que design
responsivo na sua forma ampla, deve ser interpretado como o design capaz de
responder às características de cada dispositivo ao qual é utilizado
(expandindo ou contraindo).
Em outras palavras o design responsivo, é o elemento responsável
por propiciar ao usuário, a mesma experiência de interação e visualização de
tela, que sentiria ao usar desktops, mantendo as propriedades de conteúdo
independente do tamanho da tela do navegador como se vê na Figura 1.
31
Figura 1: Exemplo de layout responsivo em diferentes resoluções para diferentes dispositivos.
.
Fonte: Revista W (2017)
Como estudado neste capítulo, o web design responsivo é uma
tecnologia utilizada por desenvolvedores e designers para a adaptação de
conteúdo a variados tipos de telas. Porém, dentro deste universo de
adaptações de interfaces, também se encontra a técnica do adaptive web
design (AWD). Samy Silva (2014) esclarece que o termo, foi criado por Aaron
Gustafson, o qual relaciona conceitos e técnicas de criação de layouts que e
adaptem às capacidades do dispositivo do usuário não deve /ser considerado
sinônimo de design responsivo. Para o autor, AWD diz respeito à criação de
interfaces que se adaptem às capacidades do usuário, tanto em sua forma,
quanto função, ao contrário do RWD que está relacionado à criação de
interfaces baseadas em grids fluídos, imagens e mídias flexíveis e media
queries.
O consenso é que ambas as tecnologias têm sua aplicação. Há casos em que AWD é preferível à RWD e vice-versa. Um exemplo clássico de aplicação do AWD (na maioria dos casos) é sua conveniência para transformar um layout existente para desktop com a finalidade de servi-lo a dispositivos móveis. Nesses casos, pode ser que o emprego de AWD reduza drasticamente a necessidade de se alterar códigos e marcação, com aproveitamento total do que já existe. Por outro lado, RWD (na maioria dos casos) é conveniente para se criar um layout novo, e aqui convém ressaltar que as boas práticas de desenvolvimento recomendadas pelo Google dão prioridade para o RWD, o que obviamente não invalida AWD, mas pesa a favor de
RWD (SAMY SILVA, 2014, p. 42).
Zemel (2013) sugere três ingredientes essenciais para o
desenvolvimento de sites responsivos, conhecidos pela terminologia de “trinca
32
tecnológica do design responsivo”, publicada em seu livro “Web Design
Responsivo – Páginas adaptáveis para todos os dispositivos” São elas:
● Média Queries – Este conceito torna possível exibir, reposicionar e ocultar
elementos e interações conforme a resolução que está sendo visualizada no
momento.
● Layout Fluído ou Grid Flexível – conceito que preza pela não utilização de
medidas fixas no projeto, auxiliando em uma adaptação natural e automática
do conteúdo apresentado na tela, evitando barras de rolagens inconvenientes
ou conteúdos cortados.
● Imagens e Recursos Flexíveis – imagens, vídeos e recursos que serão
redimensionados e movidos de acordo com os containers (delimitadores de
recursos) que estão posicionados dependendo da dimensão da tela.
2.2.7.1 Técnicas de Design Responsivo
a) Mobile First
Segundo Zemel (2013) a metodologia mobile first (ou móvel
primeiro) é a estratégia criada por Luke Wroblewski para o desenvolvimento do
design responsivo, inicialmente priorizando o layout dos dispositivos menores
e, posteriormente, dos dispositivos maiores. “Resumidamente, ao iniciar um
novo projeto Web, em vez de começar pela versão desktop, deve-se iniciar a
concepção e modelagem pela versão móvel, para só então criar a versão para
desktop” (SAMY SILVA, 2014, p. 46). Ao utilizar esta técnica, aumenta-se o
foco no que realmente é indispensável para o usuário, evitando a inclusão de
elementos supérfluos, o resultado será uma solução mais simples e com
objetivos claros.
b) Meta tagViewport
Na definição de Silva e Santos (2016) Viewport é o tamanho
disponível para a exibição do site no navegador, ou seja, é a área útil da tela
33
sem a barra de rolagem, ferramentas e etc. Meta Tagsviewport serve para
descrever o tamanho da tela para o navegador, além de possibilitar o controle
de zoom do dispositivo.
Figura 2 - Conteúdo com e sem meta tagviewport declaradas.
Fonte: Google Developers (2017)
.
Nota-se que no dispositivo da esquerda, que está sem a meta
tagviewport, a visualização ficou espremida impossibilitando a leitura sem o uso
da ferramenta “zoom”, o que não ocorre no dispositivo da direita, onde a meta
tagviewport possibilita ao navegador ajustes necessários de conteúdo.
b) Layouts Fluídos
Para levar conteúdo a diferentes dispositivos deve-se criar um layout
fluído, Grid flexível em que todas as medidas referentes ao layout do site
possuam valores relativos, possibilitando uma melhor adaptação ao design.
As proporções existentes entre os elementos da página se vê são
apresentadas na Figura 3.
34
Figura 3: À esquerda a representação de um layout com medidas fixas e à
direita layout com medidas flexíveis.
Fonte: Elaborado pela autora com base em Silva e Santos (2016).
c) Media Queries
Silva e Santos (2016) descrevem Media Queries como
especificações do estilo CSS3, os quais permitem mudar o layout em diferentes
telas de dispositivo sem alterar o conteúdo, de acordo com as características
do navegador. Há uma lista de características que se pode usar para
selecionar os dispositivos, como por exemplo: width, height, device-width,
device-height, orientation, aspect-ratio, device-aspect-ratio, color, color–index,
monochrome, resolution, scan, grid.
d) Grids Flexíveis
Outra forma de desenvolver layouts flexíveis, segundo Zemel (2013),
é trabalhar com grids, conjunto de linhas bases que fornece estruturas para o
layout, o qual divide o site em colunas da mesma largura.
As interfaces baseadas em grid 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. Não é possível projetar
35
websites responsivos sem a utilização de grids flexíveis (Figura 4) (ANJOS;
MÜLLING, 2015).
Figura 4: Representação gráfica de grids com 12 colunas.
Fonte: Elaborado pela autora com base em Getbootstrap (2017).
O uso de grids permite fácil alteração visual do site, mudando
apenas o valor da largura da coluna, tornando o desenvolvimento mais prático.
36
3 ARQUITETURA DA INFORMAÇÃO
Neste capítulo, será feita uma breve introdução a respeito de arquitetura
da informação, seu surgimento, significado, técnicas de organização
informacional e sua importância dentro de projetos voltados a usabilidade e a
experiência do usuário.
O termo Arquitetura da Informação (AI) surgiu antes da
popularização da internet. Desenvolvida por Richard Saul Wurman em 1970
seu propósito era organizar os padrões inerentes dos dados e criar estrutura
para a informação, de forma a possibilitar que os outros encontrem seus
próprios caminhos para o conhecimento, tornando-o complexo e claro
(RADFAHRER, 2000).
Rosa e Moraes (2012) definem a arquitetura da informação como um
campo da web design. Diferem a arquitetura da informação do design ou da
programação visual pelo fato dela focalizar na estrutura do design e não na sua
funcionalidade ou em seu aspecto gráfico.
A arquitetura se refere à estrutura da organização de um website e
na sua interação com outras diferentes páginas. Envolve aspectos como
análise e planejamento, organização das páginas, rotulagem, técnicas de
busca, projeto de navegação e dá dicas para ajudar os usuários a se
orientarem.
Conclui-se que arquitetura de informação visa organizar e estruturar
as informações facilitando a navegação dos usuários.
Para que esses objetivos sejam alcançados, faz-se necessário a
descrição pormenorizada das etapas que o usuário percorrerá dentro do site.
Radfahrer (2000, p. 124) cita sete processos que auxiliam o roteiro da
informação:
1) Identificação do Problema
2) Classificação de suas particularidades.
3) Levantamento de dados
4) Definição de estruturas hierárquicas (LACHT)
37
5) Aglutinação de temas relevantes
6) Estudo de navegabilidade
7) Pontos de interatividade
Uma boa arquitetura de informação contribui para uma experiência
positiva do usuário durante a navegação web. Os sites que não contemplaram
a arquitetura de informação em seus projetos iniciais acabam tornando a
navegação entediante. Radfahrer (2000) salienta que se o usuário não
encontrar o que procura o site é falho.
Neste sentido, fica claro que o design de interface influencia
sobremaneira a interação homem-computador e que a eficiência da arquitetura
de informação pode melhorar a usabilidade de um site.
3.1 QUANTO À ABORDAGEM
As abordagens são os pontos de partida para a composição das
informações do site, com enfoques diferentes.
Rosa e Moraes (2012) definem uma abordagem para o processo de
Arquitetura de Informação:
● De Cima para baixo (Top-Down): abordagem centrada ao usuário – foca no
comportamento e nas necessidades dele para determinar a navegação.
● De baixo para cima (Bottom-Up): abordagem centrada no conteúdo, no
sentido de determinar a organização do conteúdo do site.
Estes autores explicam que, há muito tempo, a disciplina de ciências
sociais vem utilizando a técnica de sorting para a coleta de dados, pois
mostram mais sobre as necessidades do usuário. Estas necessidades
compõem a organização com que as informações aparecerem no site.
3.2 TÉCNICA CARDSORTING
Cardsorting é uma técnica utilizada para se compreender como os
38
usuários experientes e inexperientes entendem um mesmo sistema. Isto ajuda
a compor uma hierarquia de informações que irão compor o design de interface
(MORAES; ROSA, 2012).
Segundo Simples (2005 apud MORAES; ROSA, 2012, p. 65) os
objetivos da técnica de cardsorting são:
● Perceber como cada perfil de usuário pode acessar determinado conteúdo.
● Perceber como diferentes públicos-alvo agrupam conteúdos, possibilitando
que sejam criadas estruturas de organização de informação mais adequadas.
● Identificar a terminologia mais fácil de ser compreendida pelo usuário.
● Perceber como diferentes públicos-alvo categorizam o conteúdo.
● Identificar os itens difíceis de classificar.
● Identificar as informações que possam pertencer a mais de um grupo.
A arquitetura da informação é o fator crítico do sucesso da
navegação. Se os usuários não encontram o que procuram acabam desistindo
da tarefa, muitas vezes isso acontece não por problemas na usabilidade, mas
por falhas na arquitetura da informação. O mundo contemporâneo exige que as
informações sejam rápidas e ao mesmo tempo eficazes. Websites que
demoram a abrir e que não reciclam informações acabam sendo substituídos e
não mais visitados (MARTINEZ, 2000).
.
39
4 USABILIDADE E EXPERIÊNCIA DO USUÁRIO
Nielsen e Loranger (2007) descrevem usabilidade como um atributo
relacionado à facilidade de uso de algo, à eficiência no uso, o grau de
propensão a erros e o quanto se gosta de usar este algo. A facilidade do uso
está ligada mais especificamente à rapidez com que se aprende o manuseio, o
quanto se lembra desta aprendizagem em novos contatos e quanto se gosta
desta utilização. Facilmente a falta de usabilidade pode inviabilizar o uso e
afetar a vida útil de algo.
A usabilidade engloba o envolvimento de seis características
descritas por Nielsen (2000), as quais se lêem abaixo:
● Facilidade de manuseio e capacidade de aprendizado rápido - na
qual possibilita ao usuário explorar o produto, executar suas tarefas em um
pequeno espaço de tempo. Se um sistema é muito difícil de usar, o usuário
simplesmente desiste dele.
● Dificuldade de esquecimento - Este tópico diz respeito à capacidade
de memorização ao utilizar um sistema. Utilizar e relembrar das etapas de
tarefas desejadas mostra que o sistema foi desenvolvido de forma intuitiva e de
fácil manipulação.
● Ausência de erros operacionais - Propiciar ao usuário um ambiente
seguro, evitando situações indesejáveis que possam acontecer durante o
processo de interação. Pensar na segurança serve para prevenir erros e
reduzir riscos referentes a ações drásticas como desligar o sistema ou deletar
alguma informação.
● Satisfação do usuário – Oferecer uma experiência agradável com o
sistema, na qual possibilite ao usuário atingir elevados níveis de produtividade,
fazendo com que o sistema faça o que se espera dele.
● Eficiência na execução das tarefas a que se propõe - A eficiência
está diretamente ligada à velocidade que o objetivo é alcançado. O sistema
deve oferecer ao usuário, formas de auxílio para que a tarefa realizada seja
40
clara, fazendo que chegue ao seu objetivo em poucos passos. As condições
que podem influenciar diretamente a eficiência de um sistema são: o tempo de
resposta que o software leva para dar um feedback esperado e o uso de
recursos para executar a resposta.
O autor reforça a importância da usabilidade na interface de um
website para a sobrevivência de empresas. Precisam indicar de forma clara e
objetiva os serviços oferecidos, assim como, orientar os usuários durante a
navegação. Dentro da usabilidade é importante pensar na adaptação das
interfaces para determinados usuários, por exemplos os deficientes visuais.
Preece, Rogers e Sharp (2005) acrescentam que a usabilidade visa
assegurar que produtos interativos sejam fáceis de aprender a usar, eficazes e
agradáveis - na perspectiva do usuário, otimizando as interações entre pessoas
e produtos interativos. Sendo então, dividida nas seguintes metas:
● Ser eficaz no uso (eficácia)
● Ser eficiente no uso (eficiência)
● Ter boa utilidade (utilidade)
● Ser fácil de aprender (learnability)
● Ser fácil de lembrar como usar (memorability)
Alguns usuários precisam aumentar o tamanho da letra para poder
ler textos na web com menor esforço. Um design rígido não permitiria a eles ter
acesso a certas informações publicadas. Querer minimizar as possibilidades de
ajuste, que o usuário pode realizar nas características de exibição do seu
browser, significaria tirar esta opção a pessoas que dela necessitam. Apesar de
que existem alguns métodos para tentar minimizar as possibilidades de ajuste
da interface por parte do usuário, estes em geral não constituem uma prática
ergonômica e nenhum traz uma solução definitiva nem para os designers, nem
para os usuários (MARTINEZ, 2000).
A experiência do usuário é essencial para o design de interação,
pois leva em conta como o produto se comporta e é usado por pessoas no
mundo real. Mais especificamente a experiência do usuário diz respeito a como
as pessoas se sentem em relação ao produto e ao prazer e à satisfação que
obtêm ao usá-lo. Inclui a impressão de como é bom usá-lo, criando
características de design que possam evocá-la (PREECE; ROGERS; SHARP,
2005).
41
O termo User Experience (UX), ou em Português “Experiência do
Usuário”, surge na área da interação homem-tecnologia com o objetivo de
possibilitar uma visão mais abrangente das relações entre as propriedades
funcionais, estéticas e de interação do produto, e a maneira pela qual as
pessoas respondem a ela, sob os aspectos físicos, cognitivos e emocionais”
(CYBIS; BETIOL; FAUST, 2010).
A UX é a consequência da sensação ou sensações experienciadas
pelo usuário no decorrer da interação, seja com um produto, sistema ou
serviço, assim como seu contexto de uso. Envolvendo a percepção do usuário
sobre aspectos práticos tais como utilidade, facilidade de utilização e eficácia
do sistema, usabilidade e impacto emocional durante a interação (REX
HARTSON, 2012).·.
Preece, Rogers e Sharp (2005) fazem outras observações, nas qual,
complementam o entendimento sobre UX. Onde a interação do usuário com o
sistema, produto ou serviço, transpassam as fronteiras da cognição, memória,
percepção, levando em consideração outros fatores importantes como crenças,
conhecimento e estímulos físicos que influenciam de forma positiva ou negativa
a qualidade da interação. Ela é individual, não um atributo do objeto da
interação. Consequentemente, não se pode falar em projetar “a” experiência do
usuário, e sim “para” a experiência do usuário. Neste sentido, Agner (2009, p.
147), complementa da seguinte forma:
...a dimensão do conhecimento e da experiência é um ‘continuum’; existe um número grande de tipos de
conhecimentos quando se descrevem os usuários. Ex: o nível educacional, o nível de leitura, a alfabetização tecnológica, a experiência na tarefa (conhecimento semântico), a experiência no sistema (conhecimento sintático), a experiência no aplicativo, a língua-mãe e o uso de outros sistemas informatizados.
Assim como as metas de usabilidade, estão direcionadas ao conjunto de
critérios específicos voltados à eficiência. As metas da UX têm se preocupado em
explicar a natureza desta relação, por exemplo, se é esteticamente agradável. Ambas
as características definem o quão usável é o produto (PREECE; ROGERS; SHARP,
2005).
Morville (2004) elaborou um diagrama para ilustrar as facetas da
experiência do usuário, com o intuito de auxiliar a designers e desenvolvedores, a
42
compreender os caminhos percorridos pela UX, e a necessidade de definir prioridades
que sejam relevantes ao projeto. O autor sugere a avaliação das metas da UX, a partir
das facetas do gráfico denominado The User Honeycomb, que traduzido para o
Português, “Colmeia da Experiência do Usuário”, onde a usabilidade é demonstrada
com uma das etapas que envolvem a experiência do usuário, como demonstrado na
Figura 5.
Figura 5: Honeycomb de Morville. Diagrama que ilustra as facetas da UX.
Fonte: semanticstudios (2017)
● Useful/Utilidade Os profissionais devem ir além das exigências dos
clientes. Devem propor soluções inteligentes, criativas e ousadas que tornem a
interface útil. Seu conteúdo deve ser original, e atender a uma necessidade. Os
designers não devem limitar-se apenas aspectos gráficos como cores ou
estilos, devem sugerir soluções inovadoras;
● Usable/Usabilidade A facilidade de uso continua como característica
fundamental, porém uma interface focada simplesmente em uma boa IHC não
contempla todas as necessidades dos usuários. Em suma, a usabilidade é
necessária, mas não suficiente;
● Desirable/Desejo A expectativa e a eficiência devem ser proporcionais
ao poder e valor de uma imagem, identidade, marca e outros elementos do
design emocional;
43
● Finable/Encontrabilidade Os designers devem se esforçar para criar
uma boa navegação, que possibilite aos usuários, localizar e acessar de forma
facilitada, os conteúdos de que necessitam.
● Accessible/Acessibilidade A exemplo de edificações que possuem
elevadores e rampas de acessos, os Websites também devem oferecer
acessibilidade a usuários que necessitem de alguma condição especial. Visto
que, acessibilidade poderá tornar-se lei em alguns anos.
● Credible/Credibilidade Entender melhor, quais elementos do design
interferem na confiança e credibilidade das informações passadas pelo
Website.
● Valuable/Valioso Websites devem acrescentar valor para os aos
clientes e patrocinadores. Para organizações sem fins lucrativos, a experiência
do usuário deve fortalecer a visão institucional e realçar a missão. Para
organizações que visam o lucro, deve contribuir para satisfazer as
necessidades e aperfeiçoar a satisfação do consumidor.
Segundo Morville (2004) estas facetas ajudam as equipes que
constroem os sites a entender quais características são mais importantes,
sempre balanceando o contexto e conteúdo. Apesar do autor não apresentar
uma definição clara para a experiência do usuário, ele propõe categorias para
qualificar a experiência.
44
5 METODOLOGIA DA PESQUISA
5.1 CLASSIFICAÇÃO DA PESQUISA
5.1.1 Quanto à abordagem
De acordo com Minayo (1994), a pesquisa qualitativa surge diante
da impossibilidade de investigar e compreender por meio de dados estatísticos
alguns fenômenos voltados à percepção e subjetividade, sendo voltados para a
investigação dos significados das relações humanas, em que suas ações são
influenciadas pelas emoções e/ou sentimentos vivenciados diante de situações.
Para Angrosino (2009) a pesquisa qualitativa busca “esmiuçar” a
forma como as pessoas constroem o mundo a sua volta, analisando
experiências de indivíduos ou grupos e examinando interações e
comunicações que estejam utilizando. Portanto este trabalho se classifica pelo
método de pesquisa qualitativa, uma vez que busca compreender e interpretar
determinados comportamentos. Não tem intuito de obter números como
resultados, mas “insights” que possam indicar o caminho para a tomada de
decisão correta sobre uma questão-problema.
5.1.2 Quanto aos fins
Segundo Figueiredo (2007) a pesquisa exploratória proporciona
maior familiaridade com o problema, ou seja, tem o intuito de torná-lo mais
explícito. Sobre pesquisa exploratória, Gil (2002) entende que essas pesquisas
têm como objetivo principal o aprimoramento de ideias ou a descoberta de
intuições, sendo seu planejamento bastante flexível, levando em consideração
vários aspectos.
Provdanov e Freitas (2013) entendem a pesquisa descritiva sob esta
ótica: quando o pesquisador apenas registra e descreve os fatos observados
45
sem interferir neles. Visa descrever as características de determinada
população ou estabelecer relações entre variáveis, procurando descobrir a
frequência com que o fato ocorre, assim como suas causas. Utiliza-se de
técnicas específicas como entrevistas, questionários, teste e observação.
Segundo Gil (2002) ”as pesquisas descritivas têm como objetivo
primordial a descrição das características de determinada população ou
fenômeno ou, então o estabelecimento de relação entre as variáveis”. Assim,
este trabalho tem caráter exploratório e descritivo, uma vez que o principal
objetivo destes tipos de pesquisa é focar em um determinado problema, a fim
de proporcionar um melhor entendimento sobre o mesmo.
5.1.3 Quanto aos meios
Esta pesquisa se rege pela revisão bibliográfica, pois se investigou
de forma ampla os assuntos design gráfico design de interface, design de
interação, arquitetura de informação, interação humano-computador,
ergonomia, web design, linguagens e padrões da web, design responsivo, front
end, evolução da internet e do computador, tecnologia web, usabilidade e
experiência do usuário (MATTOS, 2015).
Para Gil (2002) a pesquisa bibliográfica é feita em materiais
previamente constituídos (livros, artigos científicos), com base em ideologias e
análise das diversas posições acerca de um problema, principalmente de livros
e artigos científicos.
As pesquisas foram feitas em mecanismos de busca de dados
científicos, ou repositórios na Web e em bibliografia impressa. Os mecanismos
mais utilizados foram o Google Acadêmico, Blucher Proceedings, e os Portais
Periódicos CAPES e repositórios institucionais de universidades.
5.1.4 Amostra
De acordo com Angrosino (2009, p. 53):
46
[...] a construção de um plano de amostragem sempre é informada teoricamente (Denzin, 1989, p. 73) e algumas vezes é um esforço teórico movido pelas intenções e interesses teóricos que se têm. A relação que o pesquisador tem com o campo de estudo, seu acesso às pessoas, a situações ou materiais vai determinar a qualidade da sua amostragem.
Este estudo se ocupará de desenvolver a interface de um Website
empresarial, propondo um design responsivo. Para atestar a sua usabilidade
será necessário contar com a aplicação de testes e, consequentemente uma
amostra de usuários/colaboradores da empresa escolhida. A população
impactada e pesquisada será composta por usuários especialistas da área de
eventos.
Conforme Nielsen (2000), testes com usuários pretendem identificar a
usabilidade e a qualidade da experiência dos usuários no uso da interface. O
autor sugere que os testes sejam feitos com uma amostra de cinco usuários:
“tendo em vista que após o teste com o quinto usuário começa a ocorrer
incidências e repetições de respostas” (NIELSEN, 2000).
5.1.5 Instrumentos de coleta de dados
A coleta de informações será feita, tanto no início do trabalho para
conhecer a empresa e o contexto de mercado, quanto na fase de teste com
usuário/especialista. A primeira fase será realizada por meio de uma entrevista
semiestruturada que, segundo Figueiredo (2007), possibilita ao entrevistador o
desenvolvimento de cada questão conforme desejar, com maior liberdade para
explorar amplamente uma questão.
Requer a elaboração de questionamentos básicos apoiados nos
conceitos do estudo, de forma a fornecer ao pesquisador possibilidades de
novas questões conforme vai coletando as informações com os participantes
da pesquisa. Podem conter perguntas abertas – questões elaboradas para que
os sujeitos dos estudos respondam livremente, e perguntas fechadas –
47
perguntas que trazem alternativas de respostas, por exemplo, assinalar sim ou
não (FIGUEIREDO, 2007).
Já na fase de testes com usuários/especialista, será utilizado
questionário com base na técnica Likert, por ser uma técnica que visa medir o
comportamento dos usuários, a partir de questões afirmativas e uma escala de
valoração (LIKERT, 1932). Há ainda a possibilidade de utilização de filmagens,
fotografia, gravação de voz e aplicativos que mapeiam o caminho de
navegação escolhido pelos usuários dentro de um domínio, em conformidade
com a pesquisa etnográfica que visa à observação participante, onde o
pesquisador, também, é o observador da situação de teste. A pesquisa
etnográfica tem compatibilidade com a pesquisa social, tendo sua origem na
área de Antropologia (ANGROSINO, 2009b). Das técnicas acima citadas,
foram utilizadas na pesquisa o questionário (Anexo C) e registros fotográficos
dos usuários/especialista no decorrer da fase de testes.
5.1.6 Análise e interpretação dos dados
Para análise e interpretação dos dados levantados nas entrevistas
iniciais visando à elaboração de briefing e dos dados colhidos durante a fase
de teste com usuário será utilizado o método de análise de conteúdo de Bardin,
já que o foco deste método é analisar as vivências dos sujeitos, bem como
suas percepções acerca de objetos ou fenômenos. Este método vai ao
encontro da expectativa da pesquisa em curso, a qual resultará na elaboração
de um layout de interface responsiva que considere a experiência do usuário
(BARDIN, 2011).
Desta forma, o método propõe as seguintes etapas de análise e
interpretação de dados:
1) Pré-análise: exploração do material e tratamento da informação coletadas
por meio das entrevistas (e outras ferramentas de registro), tornando-o
operacional, sistematizando as informações iniciais;
2) Codificação, classificação e categorização dos dados: organização da
48
informação, codificando-a em unidades de registro por meio de palavras e
frases que respondam ao objetivo da pesquisa, definindo-se as categorias de
análise;
3) Tratamento dos resultados, inferência e interpretação: condensação da
informação, analisando reflexivamente e criticamente, estabelecendo conexão
com a realidade e outros estudos científicos.
5.1.7 Delimitação da pesquisa
Esta pesquisa abordará o desenvolvimento de uma interface
responsiva para um Website empresarial, objetivando descrever as
composições necessárias para a produção de um layout que se adapte a
interface dos seguintes dispositivos: notebook, computador desktop, celular e
tablet (não abrange televisão nem consoles de games ou outros, que não os
apontados). Torna-se, portanto imprescindível envolver no estudo a arquitetura
de informação, design de interface, design de interação e experiência do
usuário, contudo estes são assuntos complementares e não os focos principais
da pesquisa. A pesquisa não se atém a questões sobre marketing, formas de
comercialização, análise e desenvolvimento de sistemas ou algoritmos
computacionais, que são questões que podem ser citadas, mas também não
são o foco deste estudo.
5.1.8 Limites
Cabe aqui esclarecimento sobre a estrutura a ser utilizada no
processo metodológico de design de interface proposto no item 3.2. A
metodologia apresentada, conforme Cooper, Reimann e Cronnin (2007) prevê
na sua fase inicial a utilização de pesquisa etnográfica, com observação dos
usuários pelo pesquisador, no entanto, o processo é moroso para um trabalho
acadêmico, por este motivo este fator limita a fase inicial do design de interface
49
à pesquisa na literatura existente, para conhecer os princípios e diretrizes já
consagrados nessa área. A pesquisa etnográfica ocorrerá, portanto, apenas na
fase de teste de protótipo com usuários/especialistas.
Para esta pesquisa, foram desenvolvidos dois modelos de interface
web. Uma para smartphone Android e outro para computador desktop PC.
A sexta e última etapa da metodologia, destinada ao
desenvolvimento não será contemplada neste projeto, visto que não haverá
fase de implementação junto aos desenvolvedores.
Devido à limitação das funcionalidades oferecidas pela plataforma
de prototipação, não foi possível testar as interfaces web no modo paisagem.
Os testes de usabilidade foram realizados com usuários
especialistas da área de eventos técnico-científicos, mais precisamente
usuários colaboradores da empresa para o qual o site foi desenvolvido.
Os ciclos de testes e de refinamento ocorreram na etapa final, visto
as dificuldades em reunir por uma segunda vez todas as pessoas participantes
da amostra.
50
6. METODOLOGIA DE PROJETO DE DESIGN
Para a realização deste projeto buscou-se apoio na metodologia de
design de interação de Cooper, Reimann e Cronin (2007), por possui estrutura
voltada ao desenvolvimento de interfaces e ter como base nos objetivos e
necessidades do usuário. Esta metodologia está estruturada em seis etapas
conforme consta na
Figura 6
Figura 6: Fases do processo de design de interação.
Fonte: Redesign elaborado pela autora com base na metodologia de Cooper,
Reimann e Cronnin (2007, p 20).
Etapa 1 – Pesquisa
a. Aplicação de entrevista semiestruturada com o cliente com o intuito de obter
mais informações sobre a empresa, conhecimento do negócio, usuários,
concorrência entre outras informações que auxiliem no direcionamento do
projeto.
b. Briefing – desenvolvido do briefing através das informações extraídas do
questionário. Nele constará o conceito e as delimitações do projeto.
c. Análise de Websites similares, que visa à observação de dados qualitativos
de desempenho, identificando boas práticas, a fim de melhorar o produto.
51
Etapa 2 – Modelagem de Usuário
a. Criação de personas que irão auxiliar a identificar padrões de
comportamento, objetivos e motivações observados durante a fase de
pesquisa.
Etapa 3 - Definições de Requisitos:
a. Criação de cenários que simulem a utilização do produto através da ótica do
usuário. Este método possibilita pensar na interação do sistema antes da
criação, antecipando aspectos do Website.
Etapa 4 - Definição de Framework:
a. Definição da estrutura básica do comportamento do Website.
b. Definição do design de interação.
c. Primeiro esboço da interface, realizada em sketches com algumas visões de
telas, divisões de áreas que gerem ideias para a prototipação.
Etapa 5 - Refinamento:
a. Definição do layout do Website, incluindo os estilos tipográficos, os ícones e
a hierarquia visual, porém com mais foco nos detalhes. Incluem-se os
elementos que propiciarão a experiência do usuário.
b. Validação da proposta - Teste de usabilidade do protótipo para avaliar seu
comportamento, buscando identificar possíveis falhas de usabilidade que
prejudiquem experiência do usuário.
Etapa 6 - Suporte:
a. Etapa que envolve os desenvolvedores e designers para solucionar
eventuais erros e falhas que o produto possa apresentar, mesmo após a
entrega ao cliente. Ressaltando que esta última etapa não será contemplada
nesta monografia, conforme constou no capítulo de delimitações do projeto.
52
Para o alcance dos objetivos da pesquisa a metodologia descrita
será adaptada, sofrendo as alterações necessárias para se adaptar ao
contexto. Uma das alterações, por exemplo é a eliminação da etapa número
três, pois neste projeto, os padrões de usuários foram identificados através de
características e objetivos em comum de clientes jurídicos. A outra é o
complemento com a fase de teste de usabilidade do sistema, conforme
sugerem os autores Cybis, Betiol e Faust (2010), onde a validação da proposta
tem como foco de avaliação a qualidade das interações entre usuários e
sistema.
53
7. DESENVOLVIMENTO DO PROJETO
Este capítulo vai explanar sobre como ocorreu o desenvolvimento da
interface com base nos princípios do design responsivo. Para tanto, foi
necessário ter melhor entendimento sobre o negócio do cliente e área de
mercado em que está situado, bem como conhecer o estado atual do Website
da empresa. Explicita-se, ainda, sobre a fase executiva de criação de briefing,
desenvolvimento do layout da interface, prototipação e testes com o usuário,
para finalmente relatar sobre a compilação e análise dos dados apresentando
os resultados.
7.1 O CLIENTE
A empresa selecionada para este projeto de desenvolvimento de
interface, com base nos princípios de design responsivo, foi a Attitude Promo
Marketing e Eventos. Esta empresa atua no ramo de organização de eventos
corporativos técnico-científicos, congressos, convenções.
Iniciou suas atividades em 1997, primeiramente apenas para atender
clientes comerciais. Aos pouco, foi ocupando outras áreas do mercado,
migrando por completo para o setor de eventos, onde presta serviço até os dias
atuais.
Sua sede fica em São José – Santa Catarina, mas organiza eventos
em todo território nacional, conforme a necessidade dos clientes que
consomem os seus serviços.
Atualmente a empresa divulga seus serviços através de canais de
network, junto a instituições ligadas ao setor e por meios digitais, como Website
e redes sociais.
A escolha deste Website empresarial para aplicação da pesquisa foi
por encontrar nele um vasto campo para a aplicação dos fundamentos de
design, design de interação, design de interface e design responsivo.
54
7.2 BRIEFING
Após os primeiros contatos com o proprietário da Attitude Promo
para a captação de informações pertinentes ao desenvolvimento da interface
responsiva, e a aceitação da proposta, foi elaborado um questionário com o
objetivo de colher informações para a construção do briefing. O questionário
consta no ANEXO A e foi realizada através de uma entrevista particular com o
cliente.
O conjunto dessas informações serviu de fio condutor para o
desenvolvimento do briefing, com características de proposta, para a
aprovação do cliente, conforme o quadro 1.
Quadro 1: Briefing
Briefing proposta de projeto para o desenvolvimento de Interface
responsiva
Attitude Promo Marketing e Eventos LTDA é uma empresa voltada ao
mercado de organização e promoção de eventos. Situada na rua Virgilino Ferreira de
Souza, 345 - Barreiros São José, SC, CEP 88117-700
A empresa surgiu em 23 de abril de 1995, através do espírito
empreendedor de seu proprietário, que deixou seu emprego de atendente comercial,
em uma renomada empresa de comunicação de Florianópolis para atender uma nova
demanda de mercado que surgia em seu caminho, o da comunicação visual. Sua
introdução no ramo de organização e promoção de ventos surge posteriormente, com
a demanda de um cliente, que buscava por este tipo de serviço.
Dentro do seu quadro de clientes encontram-se instituições como:
federações, associações, conselhos entre outras entidades jurídicas que estão
espalhadas em todo o território nacional.
A Attitude Promo vem se colocando no mercado ao defender e respeitar os
seguintes valores: confiança, eficiência, qualidade e serviço diferenciado.
O primeiro contado do público-alvo com a empresa acontece de forma
geral por intermeio de uma rede de network na qual o proprietário está inserido, além
de demandas vindas por outros meios de comunicação, como o próprio website, e-
mail e telefone. A empresa já possui um endereço de website –
55
www.attitudepromo.com.br, porém ainda não está adaptado para visualizações em
outros formatos de tela.
O diferencial competitivo da empresa é a expertise de mercado, estrutura
física e a experiência profissional dos seus colaboradores.
O presente projeto visa o desenvolvimento de interface com base nos
princípios do layout responsivo, utilizando como ponto de partida o atual website
empresarial da Attitude Promo.
O objetivo do desenvolvimento de uma interface responsiva é torná-la
flexível aos diferentes dispositivos de acesso, possibilitando que seus usuários
realizem suas tarefas de forma confortável, eficiente e segura, oferecendo uma
experiência positiva de navegação.
Sendo assim, o proprietário da empresa ficará responsável pela aprovação
de conceitos, estrutura informacional, layout de interface, assim como principal contato
para quais quer informações necessárias para o desenvolvimento do projeto.
Requisitos: As cores predominantes da empresa são amarelo, preto e
podem ser utilizadas para a composição da interface. Se houver necessidade, está
autorizada a utilização de outras tonalidades das mesmas cores acima citados, para
que torne sua composição mais suave e harmônica.
Os pré-requisitos gestálticos escolhidos pelo cliente para auxiliar a
distribuição dos elementos gráficos da interface foram: segregação, proximidade,
simplicidade. Referente a cores e estimulação de contrastes há preferência pelo
menor contraste.
A ideia norteadora deste projeto pode ser traduzida pela seguinte frase,
que declara o conceito de projeto: um Website funcional, claro e objetivo, que informe
de forma coerente as informações essenciais da empresa, que sirvam de suporte para
a transmissão dos valores da empresa, tais como: qualidade, eficiência e confiança na
prestação de serviços. Quanto à estética seguindo o estilo funcional no qual possa
identificar a linguagem visual da marca.
As etapas de desenvolvimento deste projeto serão as seguintes:
1 Briefing: Contato para levantamento de informações pertinentes ao
projeto, definição de objetivos e conceito, bem como a apresentação do presente
documento e orçamento para aprovação;
2 Gerações de ideias: elaboração de dois layouts de interface para
apresentação e aprovação;
3 Refinamento do layout escolhido: apresentação do amadurecimento das
ideias e aprovação do layout final.
56
7.3 ANÁLISES DE WEBSITES SIMILARES
Para realizar o estudo de campo se fez necessário identificar e
analisar websites de empresas que atuam no mesmo ramo (organização de
eventos). A seleção destes websites ocorreu por meio de pesquisas realizadas
na internet, através do mecanismo de busca Google. Optou-se por analisar três
empresas que possuíssem diferentes localizações geográficas e estrutura
física. Dentro desta relação de empresas está a atual líder do setor MCI Group,
a Oceano Eventos e a Planit Agência. Entende-se que o critério com base na
variável ambiental é importante para a compreensão das estratégias adotadas
frente aos diferentes perfis de público, assim como para captar alguma
estrutura padrão de informação que possa contribuir para o desenvolvimento
da pesquisa.
A seguir, os websites com suas respectivas análises das funções
básicas do design: estética, funcional e comunicacional, abrangendo, por
exemplo, questões referentes à organização da informação, projeto
ergonômico informacional (leitura e legibilidade) e usabilidade.
a. A MCI Group
A MCI Group é uma sociedade independente com sede em Genebra
na Suíça. Atualmente se destaca como referência para o setor de eventos. É
uma empresa internacional e possui escritórios espalhados por 31 países,
atendendo clientes pelo mundo todo.
A página inicial está estruturada em três partes mais gerais:
cabeçalho, corpo e rodapé. Em primeira análise de sua interface, os elementos
visuais mostram-se esteticamente equilibrados e com pesos visuais bem
definidos, o que causa uma sensação de harmonia.
• O cabeçalho: apresenta um formato simples e objetivo, no qual
estão distribuídos a identidade visual da MCI, cinco menus (sobre, o que
fazemos, insights, Brasil e Carreira), um box contendo um campo de pesquisa
e um menu hamburber. No canto esquerdo, a identidade visual da empresa
também funciona como “afford” de função “home”, possibilitando aos usuários
57
retornarem rapidamente a página principal sem a necessidade de retornando
passo a passo.
• O corpo do Website: está dividido em seis estruturas horizontais.
A primeira estrutura é um banner de rolagem eletrônica, utilizado para
informações institucionais. A segunda seção “nossos clientes”, identificada com
fundo cinza claro, ocupa 25% do corpo. Traz uma faixa horizontal de rolagem
com diversas identidades visuais de clientes da empresa.
A terceira seção está dividida em três blocos compostos no formato
(3x1) com informações sobre a estrutura da empresa (quem somos o que
fazemos e onde trabalhamos).
A quarta está separada em blocos retangulares coloridos, podendo
ou não ter imagens, ou somente textos. Estes blocos estão em uma disposição
de 3 X 2 e centralizados no meio da página. Os textuais se concentram
distribuídos em forma de colunas.
A quinta seção contém cinco colunas textuais, juntamente com o
mesmo número de ícones, que ilustram o assunto abordado em cada coluna.
A sexta seção horizontal, identificada por um Box de cor cinza,
contêm apenas uma informação textual ao lado do botão “contato”.
• O rodapé: está graficamente ilustrado por um box horizontal de cor
cinza grafite. Suas informações estão organizadas em listas na disposição 3x2.
(Figura 7).
No aspecto funcional há praticidade e objetividade. Seu fluxo de
navegação geral é bastante consistente, pois às páginas mantém uma unidade
visual e há orientação ao usuário sobre que página está navegando.
O estilo tipográfico escolhido propicia uma boa leitura e legibilidade.
A monotonia visual é quebrada através da utilização de imagens e tamanhos
diferentes de tipografias para títulos, subtítulos, olho e texto, evidenciando que
houve uma preocupação com a hierarquia da informação, identificando de
forma fácil à informação principal e a secundária exibida no site.
58
Figura 7: Página inicial da MCI Group.
Fonte: https://www.mci-group.com/pt-BR (2017)
b. Oceano Organização e Promoção de Eventos
A Oceano é uma empresa catarinense com 23 anos de experiência
no mercado de eventos. Sua sede está localizada na cidade de Florianópolis.
Além de ser uma das empresas mais premiadas do setor, a Oceano é
59
especializada em organização de eventos, como congressos, seminários,
simpósios, feiras, palestras, cursos entre outros.
A página inicial da empresa começa com uma breve animação de
seis segundos que, aos poucos, revelam as informações do cabeçalho como
os menus e identidade visual instituição. Sua estrutura do Website está dividida
em três partes: cabeçalho, corpo e rodapé. Sua interface apresenta elementos
visuais simples. A paleta cromática utilizada para compor a interface tem cores
extraídas da própria identidade visual da instituição (variações de azul, branco
e preto). Também existem poucos elementos visuais como ícones e símbolos.
Essa combinação, no primeiro momento, causa uma sensação de uma
interface conservadora, fria e sem muitos atrativos visuais.
• O cabeçalho: possui uma estrutura horizontal contendo a
identidade visual da empresa, situada na margem esquerda da página, lista
horizontal com sete menus e a acima, a frase de apoio utilizada pela instituição.
• O corpo do Website: apresenta um fundo branco, juntamente com
a identidade visual (monocromática) como marca da água. As informações
textuais se apresentam em um bloco central no meio da página. Esses blocos
podem apresentar diferentes elementos, como imagens, dependendo do menu
em que o usuário tiver selecionado para navegar.
• O rodapé: apresenta uma estrutura horizontal com tonalidade
cinza, contendo informações comerciais. Essa estrutura de rodapé permanece
fixa em todas as páginas navegadas dentro do site.
No que se refere à tipografia em geral, nota-se que não foram
observados aspectos ergonômicos em relação à acuidade visual dos diferentes
tipos usuários que por ventura possam navegar pela interface. Os menus com
corpos tipográficos reduzidos obrigam os usuários a utilizarem outros recursos
como o “scroll” para ampliação de tela.
Oferece uma boa navegação e transições de telas apenas na versão
desktop. Por não se adaptar a outras dimensões de tela não desfruta de uma
boa usabilidade na versão para smartphone. Como o site oferece informações
desatualizadas em seu conteúdo, não passa segurança e credibilidade e tão
pouco representa os valores institucionais da empresa. O Website, embora
possua uma estética e comunicação simples, apresenta boa funcionalidade,
60
permitindo que os usuários extraiam informações necessárias para a execução
de suas tarefas.
Figura 8: Página inicial Oceania
Fonte: http://www.oceanoeventos.com.br/ (2017)
c. Planit Agência
A Planit Agência é uma empresa de Porto Alegre com nove anos de
experiência no mercado de eventos. Destaca-se no mercado rio grandense por
oferecer soluções criativas para a organização de feiras de evento, social media
comunicação e promoções, entre outros serviços digitais. Abaixo segue o site da
empresa (Figura 9), seguida da análise referente ao Website.
61
Figura 9: Página inicial Planit
Fonte: http://www.planit.ag (2017)
A página inicial apresenta uma interface gráfica criativa, interessante
e convidativa. Suas informações são exibidas sempre no centro da página, de
forma clara e objetiva. No que se refere à tipografia, nota-se que foram
utilizados tamanhos diferentes para títulos e subtítulos. A estrutura de
navegação é feita de forma vertical, evitando que o usuário seja deslocado
para outras páginas, tornando sua interação mais fluída. A identidade visual
está localizada no centro do cabeçalho, entre a seção de menus.
Os elementos gráficos possuem boa distribuição visual e são
enriquecidos através da utilização de imagens com bons equilíbrios de cores e
de ícones que reforçam as informações textuais.
• O cabeçalho: contém uma estrutura linear horizontal, por onde
estão distribuídos menus e identidade visual. Os menus são interativos,
conduzindo o usuário a pontos específicos na página para a execução de suas
tarefas.
• O corpo do Website: está dividido em seis seções verticais. A
primeira seção chamada de “Nós” está estruturada como um bloco textual com
informações institucionais sobre a empresa. A segunda seção “O que fazemos”
esclarece aos usuários o tipo de serviço ofertado. Está estruturada em duas
colunas com quatro linhas que contém, além de elementos informacionais de
textos, ícones que ajudam a ilustração dos mesmos. A terceira seção “Equipe”,
assim como a primeira seção, oferece um bloco textual centralizado com
62
informações complementares da estrutura organizacional da empresa. A quarta
seção “cliente” possui diversas identidades visuais de clientes, distribuídas em
(3x4). A quinta seção, chamada de “portfólio”, contém boxes ordenados de
forma diferenciada com diferentes imagens reportando aos trabalhos
desenvolvidos pela PLANIAG. A sexta e última seção, identificada por
“contato”, finaliza com informações de cunho comercial e de localização da
empresa. Diferentemente dos dois Websites analisados anteriormente, esta
estrutura não possui um rodapé informacional.
7.4 MODELAGEM DO USUÁRIO
Cooper, Reimann e Cronin (2007) preveem a criação de personas
com o intuito de identificar padrões de comportamento, objetivos e motivações
observados durante a fase de pesquisa.
Para a criação das personas se buscou, então, através do histórico
de relacionamento empresa/cliente, identificar padrões e objetivos similares
das empresas clientes da Attitude Promo, colher informações de seus
representantes legais (presidentes), através de seus perfis profissionais na
rede Linkedin para melhor compreensão do público–alvo.
A análise do histórico forneceu uma direção para as diversas
atividades de concepção e de teste de interface previstas na sequência,
colocando as necessidades do usuário no foco do desenvolvimento da
interface. Para preservar a identidade os nomes dos clientes foram alterados.
Cliente A - Dr. Evaristo da Silva, 60 anos, brasileiro, domiciliado na cidade de
Belo Horizonte - MG, formado pela Faculdade de Medicina de Barcelona em
1982. Possui título de especialista em clínica médica, MBA em gestão e
organização hospitalar. Foi professor de pneumologia em uma renomada
universidade de Belo Horizonte. Possui um excelente currículo profissional,
autor e co-autor de dez produções bibliográficas. Atualmente é o presidente de
uma sociedade que visa o incentivo e aprimoramento de profissionais voltados
à medicina. Uma vez por ano a instituição presidida por Evaristo oferece aos
seus associados a oportunidade de estar ao lado de profissionais renomados
63
da área, oferecendo cursos e workshops aos seus integrantes. Esse evento
possui um perfil itinerante, ou seja, a cada ano é realizado em locais diferentes.
Cliente B – Flávio Zago, 65 anos, brasileiro, natural de Pernambuco,
domiciliado em Brasília DF, formado pela USP em Comércio Exterior e
Administração Pública, MBA em Gestão Pública e Gestão Estratégica de
Negócios. No presente momento está à frente de uma entidade de regulação,
voltada a testes de qualidade e segurança de materiais comercializados no
Brasil. Atualmente está em seu segundo ano de gestão, sendo reeleito em
2017. A entidade que Flávio representa realiza eventos itinerantes, fazendo-o
buscar empresas que sejam capazes de atender as necessidades de sua
instituição.
Cliente C- Júlio Azevedo, 58 anos, natural e domiciliado em Florianópolis,
formado em engenharia civil. Atualmente é o presidente de uma entidade
representativa da classe patronal da indústria da construção civil, como tal,
defende e representa a classe junto dos poderes constituídos (Executivo,
Legislativo e Judiciário) para posicioná-la no lugar de destaque no cenário
industrial catarinense e nacional. A cada ano a instituição que Júlio preside e
realiza um evento técnico-científico para os profissionais da área. Este evento
não é itinerante, possuindo sempre locais e datas fixos.
7.4.1 Persona
Com base na análise de históricos de relacionamento
empresa/cliente, juntamente com a avaliação do perfil profissional de seus
respectivos representantes foi possível extrair informações para criarmos uma
figura fictícia que representasse os usuários.
Marcelo | 60 anos | Casado | Bacharel em Administração
Pública: Marcelo é casado e possui três filhos. Trabalha de segunda a sexta
como presidente de uma instituição reconhecida nacionalmente. Possui
competências necessárias para assumir o posto de chefia e liderança.
Comportamento: É dedicado ao seu serviço. Gosta de desafios.
Responsável e perfeccionista. Não mede esforços para a estabilidade e a
64
valorização da instituição em que está à frente. É comunicativo e possui
habilidades com trabalhos em equipe.
Necessidades e objetivos: Encontrar empresas e/ou serviços que
contribuem com os objetivos da entidade. Realizar uma boa gestão de
mandato. Planejamento e organização do calendário de eventos da instituição:
assessoramento, planejamento e execução.
Ao final desta etapa foi possível ter uma prévia do perfil do usuário
que faz parte da população alvo. Isto possibilitou determinar um padrão de
linguagem a ser seguido e trabalhado, em conjunto com as características
funcionais e estéticas definidas no briefing, assim como se adequar aos
padrões mercadológicos de busca por serviços de gestão de eventos.
7.5 ESBOÇOS
Nielsen (2007) esclarece que a estrutura do website deve ser
determinada pelas tarefas que os usuários desejam realizar em seu site. Sendo
assim, após a coleta de informações extraída da entrevista e o melhor
entendimento dos objetivos do usuário e do produto, foi possível começar os
primeiros rascunhos da interface, visando espelhar a tarefa dos usuários e
suas visões de espaço e informação, compondo uma versão sintetizada da
estrutura do sistema, organização de conteúdo, interações básicas, distribuição
dos elementos e fluxos de navegação.
Esta etapa foi realizada através de uma série de esboços feitos a
mão (Figura 10 e 11), onde são observadas as primeiras organizações de
informações, elementos gráficos e estruturas de navegação que serviram de
base para a visualização de comportamentos e outros detalhes que foram
aprimorados na etapa posterior de wireframes onde os níveis apresentam
maior detalhe.
65
Figura 10: Esboço e anotações da interface que guia para smartphone.
Fonte: Elaborado pela autora
Figura 11: Esboço e anotações da interface para computadores desktop.
Fonte: Elaborado pela autora.
66
7.5.1 Wireframe
A etapa anterior permitiu a visualização e comportamento de
algumas estruturas, o que ofereceu subsídios para um detalhamento preciso
das formas e das funções dos elementos que compõe a nova interface. A etapa
atual tem como foco o detalhamento das estruturas da interface para que haja
um maior entendimento a respeito da estrutura da interface.
Figura 12: Wireframe da proposta final da interface gráfica.
Fonte: Elaborado pela autora.
67
Na imagem (figura 12), o wireframe da interface de inicial tanto do
dispositivo desktop, quanto móvel, onde se pode observar a distribuição dos
elementos que compõe a interface gráfica como a identidade visual da
empresa, localizada à esquerda da interface e os menus. Cabeçalhos, rodapés
e as subdivisões dos conteúdos de cada menu.
7.6 PALETA CROMÁTICA
As cores da paleta cromática do projeto foram extraídas da própria
identidade visual da empresa: preto, branco e amarelo. Nielsen (2007) sugere
que sejam utilizadas cores com alto contraste entre texto e o fundo, pois
oferece maior legibilidade. A cor cinza foi adicionada a paleta cromática para
possibilitar mais uma variação de cor de fundo caso houvesse necessidade de
não utilizar o branco.
Figura 13: Paleta de cores utilizada no projeto.
Fonte: Elaborado pela autora.
7.7 IMAGENS, ILUSTRAÇÕES E SIGNOS
Para criar um universo que se aproximasse do ambiente encontrado
pelo usuário, foram utilizadas imagens reais de eventos já organizados pela
68
Attitude Promo, bem como seus materiais gráficos, estruturas de sinalização
entre outras imagens cedidas pela empresa.
Com relação aos signos, foram selecionados alguns elementos da
coleção de ícones do website flaticon3. Esses elementos foram utilizados como
reforço cognitivos juntamente com a lista de serviços oferecidos pela empresa,
dentro do menu “o que fazemos”. Estão disponíveis sob forma gratuita.
Figura 14: Ícones utilizados no projeto.
Fonte: flaticon (2017).
7.8 FAMÍLIA TIPOGRÁFICA
Sobre a escolha da tipografia para web o autor Nielsen (2000)
aponta que devido às baixas resoluções de telas de computador, optar por
tipos sem serifa pode proporcionar maior conforto visual ao leitor, além de
possibilitar a leitura de textos menores, uma vez que algumas resoluções não
oferecem pixels suficientes para transformar detalhes finos necessário em
serifas. Com base nas orientações do autor, optou-se pela escolha da família
tipográfica Lato, que por sua vez encontra-se disponível de forma gratuita no
Google Fonts. Dentro deste projeto, foram utilizadas apenas duas variações
desta família - Lato Normal, utilizada para o corpo do texto e Lato Black para
títulos e menus.
Figura 15: Família tipográfica utilizada no projeto.
Fonte: Elaborado pela autora.
3 A coleção de ícones do flaticon está disponível gratuitamente através do endereço
eletrônico https://www.flaticon.com/business
69
7.9 GRID
Os layouts das interfaces para smartphones e Web foram
desenvolvidos em grids distintos. Para o layout da interface desktop, foi utilizado
um grid com 12 colunas, pois possibilitam maior flexibilidade e por ser capaz de
dividir o layout uniformemente. Ou seja, você pode dividir doze por dois, três,
quatro e ter uma serie de modulações disponíveis sem que sobre nenhuma
coluna. Para o layout do smartphone, foram utilizados grids de 6 colunas pois
também permite uma série maior de modulações.
Figura 16: À esquerda, grid de 12 colunas. À direita, grid de 6 colunas.
Fonte: Elaborado pela autora.
7.9.1 LAYOUT
Por fim, após a definição de todas as estruturas que influenciam o
desenvolvimento do Website, iniciou-se o layout da interface utilizando o
conceito Móbile First, conforme citado no capítulo de Design Responsivo. A
página homepage foi à primeira interface a ser projetada e buscou através do
design, deixar óbvios os objetivos do site não só para os usuários frequentes,
mas também para o que visitam pela primeira vez. A partir desta tela principal,
todas as demais seguiram o mesmo padrão, havendo alguns ajustes e
peculiaridades entre si.
70
Abaixo uma representação da tela inicial do Website da empresa,
onde a estrutura de slide show foi reestruturada aproveitando 100% do
tamanho da tela. Esta estrutura oferece ao usuário a opção de voltar, avançar
modificando o tempo de exposição de cada slide (Figura 17).
Figura 17: Página inicial desenvolvida para as versões desktop e smartphones.
Fonte: Elaborado pela autora.
Apesar de apresentar uma estrutura simples, a interface foi
projetada para dar foco ao conteúdo proporcionando ao usuário uma
experiência mais agradável. A paleta cromática foi empregada de forma a
beneficiar o contraste entre o texto e o fundo apoiando a legibilidade e leitura
dos textos, títulos e ícones.
No cabeçalho, a identidade visual da empresa é o elemento mais
proeminente da interface, sendo posicionada no canto esquerdo conforme
sugere o autor Nielsen (2007). O logotipo da empresa também contém um
“afford” de retorno para a homepage, possibilitando ao usuário regressar para a
página inicial, independente da tela onde esteja navegando.
O cabeçalho está fixo no topo de todas as telas de navegação,
promovendo acesso rápido a qualquer parte do Website.
71
Tela – Sobre Nós
A tela “Sobre Nós” (Figura 18) manteve o mesmo conjunto de
informações que constavam no Website anterior, no entando foram
reorganizadas visando a prioridade de informações.Na coluna da esquerda,
foram distribuidas as informações institucionais da empresa, as informações
secundárias: visão, missão e política foram agrupadas nacoluna da
direita.Abaixo ao bloco de informações, foram distribuiídos os selos de
certificações e premiações conquistado pelo cliente.
Figura 18: Visão da tela “sobre nós”.
Fonte: Elaborado pela autora.
Tela – O que fazemos
Na Figura 19, estão distribuídos os serviço prestados pela empresa
Attitude Promo. Foram organizados em linhas x colunas para que o conteúdo
seja melhor adaptado à versão mobile. Essas informações foram organizadas
por ordem de execução, o que não acontece no atual website, onde os serviços
estão organizados de forma aleatória. Ao lado de cada informação, foi
adicionado um signo/ícone para servir de reforço intuitivo.
72
Figura 19: Visão da tela “o que fazemos”, desenvolvida para as versões desktop e smartphones
.
Fonte: Elaborado pela autora.
Tela – Clientes
Para esta tela, foram mantidas as estruturas informacionais já
presentes no atual website, apenas foram reorganizados a forma de
distribuição dos logotipos dos clientes que consomem os serviços da Attitude
Promo. As identidades visuais foram colocadas em sua visão negativa, visto
que alguns logotipos em sua cor original, não ofereciam contrastes suficientes
para a visualização e reconhecimento do símbolo. E finalizando, cada logotipo
possui um afford em formato de link que ao receber um clique redireciona o
usuário a homepage da instituição.
Figura 20: Visão da tela “clientes”, desenvolvida para as versões desktop e smartphones.
Fonte: Elaborado pela autora.
73
Tela – Portfólio
De encontro ao desejo do cliente declarado na resposta do item 32
do questionário (ANEXO A) foi adicionado ao menu, o item “Portfólio” com o
intuito proporcionar ao usuário visitante da página, uma visualização mais
abrangente não só dos tipos de materiais produzidos pela empresa, mas a
diversidade de cenários em que ela atua. Esta tela possui uma apresentação
de navegação composta de miniaturas, que ao receber o clique do usuário são
visualizadas de forma ampliada.
Figura 21: Visão da tela “portfólio”, desenvolvida para as versões desktop e smartphones.
Fonte: Elaborado pela autora.
Tela– Eventos
O desenvolvimento desta tela teve como principal objetivo o
aprimoramento da experiência do usuário, oferecendo a possibilidade de
buscar informações de eventos futuros através da seleção de informações,
minimizando o número de transições de tela para a realização desta tarefa.
Para isto, foi criado um campo de busca que oferece ao usuário a possibilidade
de acessar apenas os eventos de datas específicas. Esta tela também
possibilita ao usuário acessar eventos já realizados.
74
Figura 22: Visão da tela “eventos”, desenvolvida para as versões desktop e smartphones.
Fonte: Acervo da autora.
Tela – Contato
E por fim, a reestruturação informacional e de elementos visuais da
tela de contato, exibindo um mapa de localização, permitindo aos diferentes
tipos de usuários, a identificação de percursos terrestres até a sede da
empresa. Esta opção pode ser de grande valia, visto que alguns clientes
chegam à empresa saindo direto do aeroporto. Os campos de entrada de
dados para contato também fora simplificados se comparados a estrutura
original.
Figura 23: Visão da tela “contato”, desenvolvida para as versões desktop e smartphones.
Fonte: Elaborado pela autora.
75
8. TESTE COM USUÁRIO
Com o layout da interface Web finalizada, foi necessário desenvolver
um protótipo que fosse fiel às funcionalidades do produto contendo os fluxos de
navegação e todas as interações planejadas em fases anteriores. Para o
desenvolvimento do protótipo foi utilizada a plataforma Invision que permite aos
desenvolvedores simular interações entre telas.
8.1 TESTES COM USUÁRIOS
O teste de usabilidade foi realizado com cinco participantes. Cybis,
Betiol e Faust (2010) propõem que o teste seja aplicado com usuários que
reflitam o comportamento geral da população-alvo, sendo assim, na
impossibilidade de realizar o teste com clientes reais da empresa Attitude
Promo, o mesmo foi praticado com profissionais experientes no ramo de
organização de eventos.
Os principais objetivos do teste foi:
• Avaliar a qualidade das interações que se estabeleceram entre os
usuários e as diferentes telas de dispositivo (desktop e smartphone)
• Identificar a usabilidade e a qualidade da experiência do usuário diante
ao novo Website da empresa (problemas ergonômicos informacionais,
que possam interferir na compreensão e/ou na realização de tarefas como
problemas funcionais, de segurança e conforto).
• Apurar em que grau o Website representa os valores da empresa e
conceito de projeto.
Durante o teste, cada usuário recebeu um roteiro de tarefas, que
consta do Anexo B, contendo objetivos específicos dentro de cada tela da
interface. Após o cumprimento de cada tarefa do roteiro, o usuário seguiria
para a tarefa posterior contendo novas instruções. Todos os usuários
executaram o roteiro de tarefas duas vezes, um roteiro para o dispositivo
smartphone, e outro para o dispositivo desktop e/ou notebook, conforme a
disponibilidade do equipamento utilizado no teste. O método de análise
76
também contou com a pesquisa etnografia que compreende a observação de
comportamento por meio de técnicas diversas, frisando que para esta pesquisa
foi utilizada apenas o registro fotográfico.
Ao final do teste, o participante respondia a um questionário que foi
elaborado conforme a Escada Likert, que foi desenvolvida por Rensis Likert
tem como propósito mensurar comportamentos através de uma série de cinco
afirmações nas quais o respondente deverá avaliar seu grau de concordância
através de uma escada de cinco pontos1 = discordo totalmente, 2 = discordo
parcialmente, 3 = indiferente, 4 = concordo parcialmente e 5 = concordo
totalmente (LIKERT, 1932). Este questionário faz parte do Anexo C.
8.2 ANÁLISE DOS DADOS
O questionário foi elaborado com perguntas de múltipla escolha,
perguntas abertas dissertativas e afirmações da escala Likert, aplicado via
internet, para a fase de teste do primeiro mockup da interface e tomou como
base as heurísticas de usabilidade (CYBIS; BETIOL; FAUST, 2010). O objetivo
foi identificar as possíveis falhas quanto à interação, navegação e qualidade da
sua funcionalidade.
No primeiro bloco de perguntas, procurou identificar o perfil dos
respondentes e as características de uso de internet e dispositivos de acesso.
A amostra se concentrou em cinco respondentes com idades de 26 a 52 anos,
sendo três do sexo masculino e duas do sexo feminino. Sobre o grau de
instrução dos respondentes, 40% possuem ensino médio completo, 20% o
terceiro grau incompleto, 20% o terceiro grau já finalizado e 20 % pós-
graduação. Apenas 20%dos respondentes foram classificados como
lateralidade canhota. Com relação e experiência na área de eventos, 80% dos
respondentes trabalham na área há mais de cinco anos e 20% a um ano.
Perguntados com qual frequência visitam sites relacionados a eventos durante
o ano 20% dos respondentes é visitante assíduo 60% visitam regularmente e
20% visita poucas vezes. Suas ocupações são distintas dentro da empresa em
que trabalham, seus cargos são: produção de eventos, gerente de eventos,
assistente de eventos, produção gráfica e designer gráfico.
77
Em relação à experiência com o uso da internet 100% dos
respondentes consideram-se experientes em acesso a rede. Quando
questionados sobre o tipo de conexão mais utilizado, 80% utilizam internet 4G,
e 20% utiliza internet 3G para dispositivos smartphones. Para dispositivos
desktops e/ou notebooks 100% dos respondentes utilizam wi-fi.
Quanto às características em polegadas de todos os dispositivos
utilizados no momento do teste, os resultados mostraram-se bastante variados.
20% dos respondentes utilizaram um notebook 14”, 40% utilizaram notebook
de 17” e 40%usaram computadores desktop acima de 17”. Quanto ao uso de
dispositivos smartphones, 20% dos respondentes realizaram o teste em um
dispositivo com 4,7”, 40% dos respondentes com dispositivo de 5” e 20% com
dispositivo de 7”. Conforme ilustrado no gráfico (Figura 24).
Figura 24: gráfico correspondente ao tamanho da tela do dispositivo em polegadas.
Fonte: Elaborado pela autora.
No segundo bloco de questões, foram feitas perguntas em relação
ao design informacional e estético, onde procurou identificar a qualidade da
aquisição de informação e de informação visual. Seu objetivo principal é
melhorar a forma como o usuário adquire informação no Website. Em geral,
foram obtidas respostas de nível 5 para todas as afirmativas em testes
realizados nos dispositivos desktops/notebooks. No entanto, o mesmo não
ocorreu nos testes de usabilidade feitos em dispositivos smartphone, onde 20%
dos usuários classificaram como nível 4a relação de leitura e legibilidade de
78
títulos em dispositivos smartphones, conforme se pode acompanhar nas figuras
25 e 26. O mesmo ocorre quando questionados sobre a boa leitura do corpo de
texto, onde 40% dos respondentes também classificaram com “concordaram
parcialmente” (Figura 27).Estes apontamentos identificados pelos
respondentes devem sofrer melhorias apenas para as interfaces de
smartphone, visto que para desktops/notebook não foi constatado nenhuma
observação.
Figura 25: Avaliação sobre boa leitura de títulos com usuários de smartphones.
Fonte: Elaborado pela autora.
Figura 26: Avaliação sobre a legibilidade de títulos com usuários de smartphones.
Fonte: Elaborado pela autora.
79
Figura 27: Avaliação sobre boa leitura do corpo de texto com usuários de smartphones.
Fonte: Elaborado pela autora.
Em geral, os resultados obtidos neste segundo bloco foram bastante
positivos, atingindo a avalição máxima para as afirmativas abaixo:
Os contrastes entre títulos e fundo permitem visibilidade;
Os contrastes entre corpo de texto e fundo permitem visibilidade;
Os desenhos de ícones correspondem significativamente às
legendas;
Ícones encontram-se visíveis em relação ao fundo;
O site encontra-se bem adaptado à tela do meu dispositivo;
Figuras, fotos e ícones encontram-se bem adaptado à tela do
meu dispositivo;
Títulos e textos encontram-se bem adaptado à tela do meu dispositivo.
Para o terceiro bloco, foram realizadas afirmativas relacionadas à
informação e orientação com o propósito de compreender se de maneira geral
o Website, tanto para os dispositivos smarphones, quanto para dispositivos
desktop/notebook foram intuitivos e de fácil manipulação, havendo coerência e
consistência entre seus elementos e informações. Os resultados obtidos com
este terceiro bloco foram extremamente positivos para ambos os dispositivos,
ou seja, 100% dos respondentes assinalaram nível 5 para todas as afirmativas
expostas. Não havendo necessidades de alterações neste quesito.
No bloco quarto bloco, o objetivo foi colher afirmativas relacionadas
ao conteúdo e aos elementos sinalizadores de tarefas, tais como negritos em
textos em a mudança de cor de elementos visuais ao receber uma ação. Este
80
bloco teve uma avaliação positiva, recebendo o nível máximo (nível 5) de 100%
dos respondentes, assim como para dispositivos móveis e fixos, demonstrando
que este bloco atingiu o objetivo, não havendo sugestões de melhorias neste
aspecto.
O quinto bloco se concentrou em realizar afirmativas com relação à
experiência subjetiva, ou seja, a percepção individual dos respondentes sobre
o Website, buscando identificar se ele oferece uma estrutura agradável,
motivadora e de fácil navegação, e que reflitamos valores da empresa:
qualidade, eficiência e confiança na prestação de serviços. Assim como em
blocos anteriores, a compilação de dados é extraída de testes utilizados em
dispositivos smartphones e desktop/notebook. O resultado dessas afirmativas
foram positivas para ambos dispositivos, recebendo nível 5 de 100% dos
respondentes do teste. Sem sugestões para modificações neste campo.
Após a compilação e análise dos dados acima, foi possível identificar
que as interfaces dos dispositivos smartphones necessitariam de alterações.
Esta relação de melhoria está elencada abaixo:
Melhorar a leitura do tamanho das fontes dos títulos;
Melhorar a legibilidade das fontes utilizadas nos títulos;
Melhorar a leitura do corpo de texto;
Após a realização dos testes, em pergunta aberta os respondentes
deixaram sugestões de melhorias:
Na página “sobre nós” onde constam as informações institucionais da
empresa, senti dificuldade de leitura quando visualizado no celular. Sugiro
aumentar o distanciamento entre as linhas e aumentar a fonte.
No menu do Website, aumentar o espaçamento entre os títulos do menu.
Este capítulo apresentou o desenvolvimento do projeto, passando
por todas as etapas estipuladas no método adaptado e demonstrado no
capítulo 6. Apresentou também, pesquisa qualitativa, fator importante para
qualificara experiência do usuário durante a interação com a interface web,
onde através de testes realizados a partir de uma amostra de respondentes, foi
possível analisar em que grau as heurísticas de usabilidade foram atendidas,
avaliando assim o grau de aceitação da interface responsiva em dois
dispositivos distintos, o que possibilitou melhorias informacionais no projeto.
81
9. CONSIDERAÇÕES FINAIS
Após o surgimento dos diversos tipos de dispositivos de acesso à
internet, passou-se a buscar soluções para manter a usabilidade nos variados
formatos de tela existentes no mercado. O design de interface de Website
precisou, portanto, ser ampliado para ir além da aplicação dos princípios que o
regem e incorporar novas técnicas, para poder lidar com essa multiplicidade de
formatos. Esta problemática tornou-se o foco da presente pesquisa, cuja
questão guia se traduziu em: como desenvolver uma interface para um site
empresarial visando à adaptação de conteúdos a diferentes formatos de tela de
variados dispositivos?
No intuito de responder a questão acima foram propostos os
seguintes objetivos:
Objetivo geral: Desenvolver a interface de um Website empresarial,
cujo layout se adapte a diferentes formatos de telas de variados dispositivos.
Objetivos específicos:
Compreender como o Web Design Responsivo pode apoiar a exposição
de conteúdos em variados formatos de tela.
Conhecer os fundamentos que sustentam um projeto de interface para
Website.
Ao final deste trabalho considera-se que estes objetivos foram
atingidos e a questão norte da pesquisa respondida conforme se explana a
seguir.
Após o estudo realizado, no capítulo 2, de fundamentação teórica,
foi possível inferir que as interfaces mal projetadas e não responsivas
impactam negativamente na experiência do usuário e, consequentemente, na
relação cliente-empresa, até mesmo no âmbito da fidelização, pois conforme
Gomes Filho (2010) a interface pode influenciar na percepção que os usuários
têm de uma organização. Neste mesmo capítulo foram atingidos os dois
objetivos específicos propostos: o primeiro objetivo quando se compreendeu
como o Web Design Responsivo apoia a apresentação de conteúdos em
variados formatos, visto que as suas técnicas foram explicitadas por meio dos
autores Zemel (2013), Silva e Santos (2016), Schwartz e Tessmann (2015).
82
Dentre estas técnicas aprendeu-se que ao projetar para web, em primeiro
momento a atenção deve estar voltada para os dispositivos móveis e os layouts
devem priorizar os dispositivos menores. Desktops e dispositivos maiores são
solucionados em segundo momento. O layout deve ser flexível o que é
conseguido com a utilização de valores relativos, dentre outras técnicas
aprendidas com estes autores.
O segundo objetivo específico foi realizado quando, por meio de
Pressman e LOWE (2009), ficaram conhecidos os princípios e diretrizes de
design de interface e, através de Beaird (2012), as regras que organizam e
estruturam a composição de uma página web. O ensinamento destes autores
foram aplicados durante a fase de desenvolvimento deste trabalho (capítulo 4)
visando atingir os objetivos da usabilidade e da experiência do usuário no
projeto do Website da empresa Attitude Promo.
No capítulo 3 foi apresentado um método de design para Website
adaptado para o contexto da empresa Attitude Promo, este método foi
embasado em Cooper, Reimann e Cronin (2007) e orientou a etapa de
desenvolvimento relatada no capítulo 4. Nesta fase executiva foi construído um
mockup e levado a teste com usuário, os dados, deste teste, foram colhidos por
meio de questionário, observações, entrevista e filmagens. Foram compilados e
analisados e resultaram no conhecimento de alguns poucos pontos que
precisam de refinamento para atingir as necessidades dos usuários. Ressalta-
se, assim, o alcance do objetivo geral, bem como, fica respondida a pergunta
de pesquisa, na medida em que, além dos princípios e métodos de design de
interface, se incluíram novas técnicas de Web Design Responsivo que podem
proporcionar layouts com comportamentos adaptados aos diversos dispositivos
de exibição e através do método adaptado para o contexto da Attitude Promo,
entendeu-se como desenvolver uma interface para um site empresarial em que
seus conteúdos se ajustassem a diferentes formatos de tela de variados
dispositivos.
Todo o processo empreendido aqui, o mockup final deste estudo e
os testes com usuários, poderão ser um benefício, não somente, como um
recurso para a empresa em questão atingir um bom relacionamento com seus
clientes, mas, também pelo conhecimento gerado em um cenário maior, visto a
relevância da temática nesta era digital. A descrição minuciosa das etapas
83
teóricas fundamentadas e as práticas relatadas podem servir como modelo
para outros estudos, um apoio para a área acadêmica, para profissionais e
para o mercado competitivo da atualidade.
9.1 SUGESTÕES PARA NOVOS ESTUDOS
Os desdobramentos desta pesquisa possibilitaram a visualização de
cenários que podem contribuir para a realização de trabalhos futuros.
Desenvolvimento de mockup que ofereça aproximação de
elementos da interface através da funcionalidade “zoom” no modo
touchscreen.
Pesquisa visando acessibilidade da interface web.
Testes em outros dispositivos, tais como TV digital e tablets.
Realizar testes com usuários reais.
84
REFERÊNCIAS
ADNEWS. Google passa a esconder sites não responsivos nos resultados
de buscas - ADNEWS. 22 de abril. Disponível em:
http://adnews.com.br/internet/google-passa-a-esconder-site-nao-responsivos-
nos-resultados-de-buscas.html. Acesso em: 4 jun. 2017.
AGNER, L. Ergodesign e Arquitetura de Informação - Trabalhando com o
Usuário 2ª edição. Quartet, Rio de Janeiro, 2009.
ANGROSINO, M. Etnografia e observação participante. Porto Alegre:
Artmed, 2009.
ALMEIDA, R.; TERRA, J. C. C. Varejo 2.0 - Um Guia Para Aplicar Redes
Sociais aos Negócios. Rio de Janeiro, RJ - Brasil: Campus, 2011.
BARDIN, L. Análise de conteúdo. Lisboa: Edições 70, 2011.
BEAIRD, J. The principles of beautiful web design, 2. ed. Sitepoint, 2010.
COOPER, A.; REIMANN, R.; CRONIN, D. About face 3: the essentials of
interaction design. Indianapolis, IN: Wiley, 2007
CAVALCANTE, R. B.; CALIXTO, P.; PINHEIRO, M. M.Análise de Conteúdo:
considerações gerais, relações com a pergunta de pesquisa,
possibilidades e limitações do método. Inf. e Soc.: Est., João Pessoa, v. 24,
n. 1, p. 13-18, Jan.-Abr. 2014. Disponível
em:http://www.ies.ufpb.br/ojs/index.php/ies/article/view/10000/10871. Acesso
em 19 de Jun. de 2017.
CALLAHAN, B. Responsive design, Smashing Media, 2012. Disponível em:
https://books.google.com.br/ Acesso em: 27 maio 2017.
CAELUM. UX e Usabilidade aplicados em Mobile e Web. Disponível em:
https://www.caelum.com.br/apostila-ux-usabilidade-mobile-web/. Acesso em 19
de Jun. de 2017.
CYBIS, W; BETIOL, AH.; FAUST, R. Ergonomia e usabilidade:
Conhecimentos, métodos e aplicações, 2. ed. São Paulo: Novatec, 2010.
DIGITAL, Olhar. Web completa 20 anos: conheça a história. Disponível em:
https://olhardigital.com.br/video/web-completa-20-anos-conheca-a-
historia/10201. Acesso em: 08 jun. 2017.
FERREIRA, S. B. L.; NUNES, R. R. E-Usabilidade. Rio de Janeiro: LTC, 2011.
85
FIGUEIREDO, N.M. Método e Metodologia na Pesquisa Científica. 2 ª Ed.
São Caetano do Sul: Yendis, 2007.
GARRETT, J. J. The Elements of User Experience. New York: New Riders,
2003.
GETBOOTSTRAP. Bootstrap. Disponível em:
https://getbootstrap.com/docs/4.0/layout/grid/. Acesso em: 15 out. 2017.
GOMES FILHO, J. Gestalt do Objeto: sistema da leitura visual
da forma. 8ª Ed. São Paulo: Escrituras Editora, 2008.
GOMES FILHO, J. Ergonomia do objeto, São Paulo: Escrituras Editora, 2003.
LANDLEY, R.; RAYMOND E. S. TheArtof Unix Usability, Disponível em:
<http://www.catb.org/~esr/writings/taouu/html/index.html> Acesso em 22 de
maio. 2017.
LIKERT, R. A technique for the measuremente of attitudes 140 ed., 1932.
MARCOTTE, Ethan. Responsive Web Design. 2020. Disponível em:
<https://alistapart.com/article/responsive-web-design.>. Acesso em: 26 maio
2010
MARTINEZ, M. L. Usabilidade no design gráfico de websites.
Graphica’2000) III International Conferenceon. 2000, p. 1–10. Disponível em:
http://xa.yimg.com/kq/groups/21618626/325966992/name/usabilidade2.pdf.
MATTOS, P. C. Tipos de revisão de literatura, 2015. 9 f. Trabalho –
Faculdade de Ciências Agronômicas UNESP, Botucatu, 2015. Acesso em 18
de Jun. 2017.
MEMÓRIA, F. Design para Internet: Projetando a Experiência Perfeita. Rio de
Janeiro: Elsevier, 2005. 171p.
MINAYO, M. C. S. (Org.). Pesquisa Social: teoria, método e criatividade. Rio
de Janeiro: Vozes, 1994.
MORVILLE, Peter. User Experience Design. Disponível em:
<http://semanticstudios.com/user_experience_design/>. Acesso em: 07 ago.
2017.
NIEMEYER, L. Design no Brasil: origens e instalação, 2AB, 2007.
Disponível em: http://docslide.com.br/documents/design-no-brasil-origens-e-
instalacao-lucy-niemeyer.html. Acesso em: 27 maio 2017.
NORMAN, D. A. O design do dia-a-dia. Rio de janeiro: Rocco, 2002.
NIELSEN, J. Usability Testing with 5 Users (Jakob Nielsen’s
86
Alertbox).Disponível em: http://www.useit.com/alertbox/20000319.html. Acesso
em: 14 fev. 2012.
NIELSEN, J. Usability 101: Introduction to Usability. 2012. Disponível em:
<http://www.nngroup.com/articles/usability-101-introduction-to-usability/ >.
Acesso em: 12 junho 2017.
NIELSEN, J.; LORANGER, H. Usabilidade na Web: Projetando Websites
com qualidade, Elsevier, 2007.
NIELSEN, J. Designing Web Usability: The Practice of Simplicity. Peachpit
Press, 1ª. Ed. 1999.
PRODANOV, C. C.; FREITAS, E. C. Trabalho Científico: Métodos e
Técnicas da Pesquisa e do Trabalho Acadêmico. 2 ª Ed. Novo Hamburgo:
Universidade Feevale, 2013.
PORTUGUES, Computer. Desvantagens de GUI. 2017. Disponível em:
http://ptcomputador.com/Sistemas/basic-computer-skills/200200.html. Acesso
em: 27 maio 2017.
RADFAHRER, L. Design web design: 2. São Paulo: Market Press, 2000.
RAMOS, M. Sistematização de conceitos ergonômicos e semióticos para
projetos de interfaces gráficas do usuário. 2013, p. 199–218.
PREECE, J.; ROGERS, Y.; SHARP, H. Design de interação: além da
interação homem-computador. Porto Alegre: Bookman, 2005.
ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e Avaliação de Interfaces
Humano-Computador. São Paulo: Nied, 2003. 244 p.
ROSA, J. G. S.; MORAES, A. Avaliação e Projetos no Design de Interfaces.
2. ed. Teresópolis: 2ab Editora, 2012. 223 p.
ROYO, J. Design digital. São Paulo: Rosari, 2008.
SAMY SILVA, M. Web Design Responsivo. Novatec, São Paulo, 2014.
SILVA, D. P.; SANTOS, M. S. Desenvolvimento Web Responsivo: Um
estudo envolvendo Framework Bootstrap. 2016. 95 f. Dissertação
(Mestrado) - Curso de Tecnólogo em Análise e Desenvolvimento de Sistema,
Instituto Federal de Educação, Ciência e Tecnologia do Pará, Belém, 2016.
Cap. 6. Disponível em: <https://issuu.com/maycksilva/docs/tac_v7.0>. Acesso
em: 27 jun. 2017.
SCHWARTZ, L.; TESSMANN, T. Características projetuais do design
responsivo para interfaces digitais. 7th CIDI 7th Information Design
87
International Conference, 2015.
SHNEIDERMAN, B.; PLAISANT, C. Designing the user interface:Strategiies
for effective Human-Computer Interaction. 4thedition. Berkeley, Califórnia:
Addison Wesley Longman, Inc., 2004.
VILLELA, F. Celular é principal meio de acesso à internet no Brasil, mostra
IBGE. 2016. Elaborado por EBC Agência Brasil. Disponível em:
http://agenciabrasil.ebc.com.br/economia/noticia/2016-04/celular-e-principal-
meio-de-acesso-internet-na-maioria-dos-lares. Acesso em: 13 maio 2017.
VILLAS-BOAS, A. O que é (e o que nunca foi) design gráfico. 6 ª Ed. Rio de
Janeiro: 2AB, 2007.
W3C (São Paulo) (Org.). Destaques W3C para 2017 - Web para Todos. 2016.
Elaborado por W3C. Disponível em:
http://www.w3c.br/Noticias/DestaquesW3C2017WebParaTodos. Acesso em: 13
maio 2017– Blueprints for the web. New York: New Riders, 2003
88
ANEXO A
QUESTIONÁRIO BRIEFING PARA CLIENTE Briefing Projeto de desenvolvimento de interface responsiva para empresa de eventos. 1. Entrevistado: 2. Cargo: 3. Contato: 4. Endereço:
INTRODUÇÃO ESTRUTURA ORGANIZACIONAL Nesta etapa se pretende colher informações substanciais a respeito da empresa para ter um melhor entendimento sobre sua trajetória, objetivos e realidade.
5. O que é a empresa Attitude Promo como ela surgiu?
6. Há quanto tempo existe a empresa? 7. Quem são os seus clientes. Cite três? 8. Qual é a área de atuação dos seus clientes? 9. Quais os serviços e/ou produtos são oferecidos aos clientes? 10. Qual a freqüência anual de eventos realizados pela empresa? 11. Qual a abrangência de atendimento? 12. Quem são seus principais concorrentes? Seus pontos fortes e fracos? 13. Como a empresa divulga seus serviços?
Ex: Website, Redes Sociais, etc 14. Qual endereço do website da empresa? 15. A empresa oferece canais de comunicação digital com o cliente?
Ex: E-mail, website, Facebook,etc.
16. Qual a estratégia de marketing a empresa utiliza na atualidade: Ex: Apelo ecológico? Preço? Qualidade? Inovação?
17. Quais os pontos fracos e fortes da empresa?
89
MARCA Etapa que compreende um breve questionário a respeito da marca. Através dos dados coletados se pretende interpretar melhor os conceitos sobre a marca e visão institucional da empresa. 18. Há quanto tempo utiliza o logotipo? Já houve algum redesign do logo? Caso
positivo, quais os motivos o levaram a reestruturá-la? 19. O que representa a identidade visual gráfica? 20. Qual o significado do nome? 21. Quais as cores principais e o motivo da escolha das mesmas? 22. A empresa possui um portfólio?impresso ou digital? 23. Qual a missão e visão da empresa? 24. Que imagem e/ou valores a empresa deseja transmitir aos seus clientes?
Ex: Qualidade no atendimento, prestação de serviço diferenciada, inovação etc.
INFORMAÇÕES SOBRE O WEBSITE
Esta etapa prevê o levantamento de informações que auxiliem a compreensão da atual estrutura do website da empresa e que sirvam de fio condutor para as etapas de desenvolvimento de interface previstas neste projeto. 25. Há quanto tempo possui o website da empresa? 26. Quais os critérios foram utilizados para a escolha de informações que
compõe o site? Ex.Relevância de Conteúdo, Pesquisa baseada em necessidades do usuário, etc.
27. Qual a última atualização do website? E qual sua periodicidade? 28. Está satisfeito com a atual estrutura do website? Caso negativo, o que
mudaria? 29. O atual website é responsivo? 30. O website é divulgado em peças gráficas da empresa? 31. Resultados esperados com o desenvolvimento deste projeto? ESTRATÉGIA DE DESIGN Etapa que busca colher informações para o desenvolvimento do design da interface para que o mesmo ofereça uma navegação ergonomia e intuitiva. 32. Quais informações deseja disponibilizar na página? 33. Há algum tipo de objeção quanto ao desenvolvimento do projeto?
90
34. Em relação à organização dos elementos gráficos da interface. Quais dos
requisitos abaixo você gostaria que fossem respeitados durante o layout da interface? Ex. Selecione uma ou mais opções.
35. Quais funcionalidades estarão presentes no website?
Ex: Exibição de vídeos,formulários, slides entre outros.
91
ANEXO B
92
ANEXO C
Questionário para teste com usuário
INFORMAÇÕES PESSOAIS
Nome
Idade
Sexo
Grau de Instrução
Lateralidade
Possui algum problema físico, com os braços, mãos, visual ou auditivo? Especifique.
BLOCO 1 - PERFIL DO RESPONDENTE EM RELAÇÃO AO USO DE INTERNET
Aponte o seu grau de concordância ou discordância nas afirmações abaixo 1 = Discordo completamente, 2 = Discordo parcialmente, 3 = Nem concordo nem discordo (indeciso),
4= Concordo parcialmente e 5 Concordo completamente
Quais dos dispositivos abaixo você usa com mais freqüência a) Computador Desktop b) Notebook c) Netbook d) Tablet e) Celular
Qual o tipo de conexão que você dispõe para acesso a internet
a) Discada
b) 3G
c) 4G
d) ADSL
e) Outra
Como você considera sua experiência com internet a) Sou novato b) Tenho alguma experiência c) Sou muito experiente
PERFIL DO RESPONDENTE EM RELAÇÃO À ÁREA DA ATIVIDADE DA ATTITUDE PROMO
Aponte o seu grau de concordância ou discordância nas afirmações abaixo 1 = Discordo completamente, 2 = Discordo parcialmente, 3 = Nem concordo nem discordo (indeciso),
4= Concordo parcialmente e 5 Concordo completamente
Há quanto tempo você trabalha na área de eventos
a) Menos de um ano b) Há um ano c) Entre 2 e 5 anos d) Mais de 5 anos e) Não trabalha na área de eventos
Cargo que ocupa dentro da empresa?
Com qual freqüência você visita sites relacionados a eventos durante o ano?
Com qual freqüência você costuma ler revistas sobre eventos durante o ano?
93
CARACTERÍSTICAS DO DISPOSITIVO USADO NO TESTE Aponte o seu grau de concordância ou discordância nas afirmações abaixo
1 = Discordo completamente, 2 = Discordo parcialmente, 3 = Nem concordo nem discordo (indeciso), 4= Concordo parcialmente e 5 Concordo completamente
No momento do teste você estava usando qual dispositivo?
a) Computador Desktop b) Notebook c) Smartphone d) Tablet
Qual tamanho da tela do dispositivo? (em polegadas)
a) 14” ou 15” b) 17” c) Acima de 17” d) 4” ou 4,7” e) 5” f) 7” g) Acima de 7”
BLOCO 2–ESTE BLOCO DE INFORMAÇÕES ESTÁ RELACIONADO AO DESIGN INFORMACIONAL E ESTÉTICA
Aponte o seu grau de concordância ou discordância nas afirmações abaixo 1 = Discordo completamente, 2 = Discordo parcialmente, 3 = Nem concordo nem discordo (indeciso), 4= Concordo
parcialmente e 5 Concordo completamente
O tamanho da fonte de títulos possibilita boa leitura
O tamanho da fonte de corpo do texto possibilita boa leitura
Os títulos são legíveis
O corpo de texto estão legíveis
Os contrastes entre título e fundo permitem visibilidade
Os contrastes entre corpo de texto e fundo permitem visibilidade
Os desenhos de ícones correspondem significativamente às legendas
Ícones encontram-se visíveis em relação ao fundo
Fotos, ilustrações e ícones apresentam resolução apropriada
O site encontra-se bem adaptado à tela do meu dispositivo
Fotos e figuras encontram-se bem adaptados à tela do meu dispositivo
Títulos e textos encontram-se bem adaptados à tela do meu dispositivo
Sugestões de melhorias para os assuntos deste bloco?
BLOCO 3 – ESTE BLOCO DE INFORMAÇÕES ESTÁ RELACIONADO
A INFORMAÇÃO E ORIENTAÇÃO Aponte o seu grau de concordância ou discordância nas afirmações abaixo
1 = Discordo completamente, 2 = Discordo parcialmente, 3 = Nem concordo nem discordo (indeciso),
4= Concordo parcialmente e 5 Concordo completamente
É fácil identificar o que o site pertence à Attitude Promo?
É fácil identificar informações sobre os serviços oferecidos pela Attitude Promo?
É fácil identificar o endereço da Attitude Promo?
É fácil identificar o formulário de contato com a Attitude Promo?
94
É fácil localizar o menu principal?
As legendas dos menus são coerentes com as informações apresentadas?
É fácil identificar botões de link?
É fácil identificar links textuais?
De maneira geral, é fácil encontrar as informações que preciso?
De maneira geral é fácil saber onde me encontro durante a navegação?
De maneira geral o site se comporta da maneira esperada?
De maneira geral, o website tem consistência visual. Ex: as telas mantém um padrão visual entre
si, de layout, cores e estilos De maneira geral, aprendi a usar o site rapidamente?
De maneira geral o site é intuitivo?
Sugestões de melhorias para os assuntos deste bloco?
BLOCO 4 – ESTE BLOCO DE INFORMAÇÕES ESTÁ RELACIONADO AO CONTEÚDO E A REALIZAÇÃO DE TAREFAS
Aponte o seu grau de concordância ou discordância nas afirmações abaixo
1 = Discordo completamente, 2 = Discordo parcialmente, 3 = Nem concordo nem discordo (indeciso),
4= Concordo parcialmente e 5 Concordo completamente
Os serviços prestados pela Attitude Promo estão claros?
De maneira geral o site atendeu as minhas necessidades?
Quando precisei, durante a execução de tarefas, encontrei orientações de como realizá-las?
Durante a execução de tarefas foi fácil perceber elementos sinalizadores e orientadores, tais como negritos em textos ou mudanças de cor em elementos visuais.
Sugestões de melhorias para os assuntos deste bloco?
BLOCO 5 – PERGUNTAS RELACIONADAS À EXPERIÊNCIA SUBJETIVA DO USUÁRIO
Aponte o seu grau de concordância ou discordância nas afirmações abaixo 1 = Discordo completamente, 2 = Discordo parcialmente, 3 = Nem concordo nem discordo (indeciso),
4= Concordo parcialmente e 5 Concordo completamente
O website possui uma apresentação agradável
O website transmite confiabilidade na prestação de serviço
O website é motivador
O website transmite noção de prestação de serviço de qualidade
O website transmite noção de atendimento de qualidade
Eu gostei do website da Attitude Promo