Web Design

David José Carneiro de Santana

Técnico em
Multimídia
 Web Design
David José Carneiro de Santana

Curso Técnico em
Multimídia

Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa

Educação a Distância

Recife

[Link]. rev. | abr. 2026

 EXPEDIENTE

Professor(a) Autor(a) Secretário de Educação de Pernambuco

Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa. 2026

David José Carneiro de Santana Gilson José Monteiro Filho

Revisão de conteúdo Secretário Executivo de Ensino Médio e Profissional

David José Carneiro de Santana Paulo Fernando de Vasconcelos Dutra
Maria Lua Ribeiro Araújo
Gerente Geral de Educação Profissional
Coordenação de Curso Daniel da Silva Oliveira
Maria Lua Ribeiro Araújo
Gestora de Educação a Distância
Coordenação Design Educacional Annara Mariane Perboire da Silva
Hugo Carlos Cavalcanti
Gerente Regional de Educação Recife Norte
Equipe Design Educacional Iury Sousa e Silva
Ana Cristina do Amaral e Silva Jaeger (diagramação)
Andrea Cesar Pedrosa da Silva (revisão pedagógica) Equipe de Gestão ETEPAC
Cristiano Jerônimo Valeriano (revisão Língua Portuguesa) Arnaldo Luiz da Silva Junior (Gestor Escolar)
Helisângela Andrade (revisão pedagógica) Ladyson Stefany Correia da Silva (Assistente de Gestão)
Jailson Miranda (tecnologia) Gustavo Henrique Tavares Ribeiro (Educador de Apoio)
José Eilton dos Santos Costa (tecnologia AVA) Maria do Rosário Costa Cordouro de Vasconcelos
Renato Rodrigues (Design Gráfico) (Secretária Escolar)

Dados Internacionais de Catalogação na Publicação (CIP) de acordo com ISDB

S232w
Santana, David José Carneiro de.
Web Design: Curso Técnico em Multimídia: Educação a distância [recurso eletrônico] / David
José Carneiro de Santana. – [Link]. rev. – Recife: Escola Técnica Estadual Professor Antônio Carlos
Gomes da Costa [ETEPAC], 2026.
73 p.: il.

Recurso eletrônico (3.970 kb).

Formato: .PDF
Requisito do Sistema: Adobe Acrobat Reader.
Inclui referências bibliográficas.

1. Multimídia (hipermídia, integração de mídias digitais). 2. Web design no contexto de

multimídia digital. I. Título.
CDU – 004.92:004.738.5:004.946

Elaborado por Hugo Carlos Cavalcanti | CRB-4 2129

Sumário
INTRODUÇÃO ............................................................................................................................... 5

UNIDADE 01 | Desenvolver artefatos para web focando na interface e sua usabilidade ................ 6

1.1 Uma introdução à web e ao design ............................................................................................................6

1.2 Tipos de sites, blogs e aplicativos ...............................................................................................................7
1.3 Linguagens de marcação, de design e de programação de web ............................................................. 18
1.4 Planejamento, usabilidade e a importância de um site responsivo ........................................................ 22
UNIDADE 02 | Aplicar os princípios da arquitetura da informação em artefatos da web .............. 34

2.1 Porque devemos aprender sobre Arquitetura da Informação ................................................................ 34

2.2 Definindo as personas .............................................................................................................................. 36
2.3 Estrutura hierárquica, Fluxo de navegação e criação de wireframes ...................................................... 39
2.4 Modelo mental, Design Thinking e um pouco mais de UX e Gestalt ....................................................... 45
UNIDADE 03 | Avaliar a usabilidade e ergonomia visual nos sites e artefatos da web .................. 53

3.1 Avaliar princípios da usabilidade ............................................................................................................. 53

3.2 Acessibilidade........................................................................................................................................... 62
3.3 O que é Ergonomia Visual ........................................................................................................................ 64
CONCLUSÃO ............................................................................................................................... 69

REFERÊNCIAS.............................................................................................................................. 70

MINICURRÍCULO DO PROFESSOR ................................................................................................ 73

INTRODUÇÃO

Estudantes, sejam bem-vindos à disciplina de Web Design!

Neste momento, você provavelmente está no seu computador, celular, outro meio digital
ou até mesmo, porque não, com este documento impresso. Não faz diferença. Porém, você já parou
para pensar quais foram os caminhos por onde este documento passou até chegar aqui? Porque
foram escolhidas estas cores, fontes, ilustrações e como isso cabe perfeitamente em sua tela. Pois
bem, estas perguntas, e mais algumas outras dúvidas que você nem sabe que tem, serão respondidas
nesta disciplina.
Para começar, você irá entender o que danado é isso de Web Design. Muitos de nós,
desde cedo, se acostumou a “navegar pela web” e também temos alguma noção de design, mas eles
juntos significam o que e como estão presentes em nosso dia-a-dia?
Sabendo disso, serão apresentados variados tipos de artefatos para web e suas funções,
além do que, através da linguagem de marcação, você irá entender um pouco como é possível
estruturá-los.
Se já sabemos o que é, as opções e como são formatados, é a hora de planejar a criação,
aplicando boas técnicas de usabilidade e, por fim, aprendendo a criar sites ou aplicativos. Após isso,
serão apresentados métodos para que seu projeto saia da melhor forma possível e seja agradável ao
usuário/cliente. Afinal de contas, este é um dos nossos objetivos. Para isso, serão apresentadas
técnicas de Arquitetura da Informação.
E por fim, mas não menos importante, iremos aprender a avaliar se nosso projeto está
coerente com o que nos foi apresentado. Afinal de contas, para saber se algo ficou bom, é sempre
importante testá-lo!

Sejam bem-vindos e vamos navegar em um mundo multimídia!

5
UNIDADE 01 | Desenvolver artefatos para web focando na interface e sua
usabilidade

1.1 Uma introdução à web e ao design

A World Wide Web, também conhecida como www e, para os mais íntimos, web, que
significa rede em inglês, começou lá no ano de 1989, quando Tim Berners-Lee propôs um sistema de
distribuição de informação baseado em hipertexto e, em seguida, hipermídia. Ou seja, dando a
liberdade ao leitor de escolher vários caminhos, como, por exemplo, você tem a possibilidade de com
dois cliques pular para outros textos, vídeos ou áudios. Mas não faça isso, por favor.
Através da web você pode “navegar”, como dizem os mais velhos, em diversos websites e
outros tipos de plataformas, que falarei mais adiante. Em geral as páginas se encontram em formatos
como HTML, Flash, XHTML e CSS que são as linguagens para criação dos artefatos mais utilizados.
Outro tema que será abordado mais para frente. Para fazer isso, é necessário a existência do servidor
web, que é o computador ou a unidade onde se executam determinados softwares.

No podcast da competência, falarei mais sobre a história da WEB.

Web e Internet é a mesma coisa? Vamos saber mais! Link:

[Link]
world-wide-web/

A outra parte do Web Design é uma palavra inglesa com origem no latim Designare, que
seria “destacar, marcar, sinalizar”. O professor Robin Willians (não confundir com o ator Robin
Willians dos excelentes filmes Gênio Indomável, Jumanji e O Homem bicentenário) em seu livro Design
para quem não é Designer, diz que o termo design pode ser denominado como qualquer processo

6
criativo que se utiliza das mais variadas técnicas para conceber algum artefato através da elaboração
e concepção de um projeto.
O Design possui diversas áreas, como Design Gráfico, Design de Ambiente, Design de
Interior e muitos mais. O tema que você aprenderá no decorrer desta apostila, que é o Web Design,
em resumo, abordará a utilização de métodos do design para a criação de conteúdo na web.
Então a função do Web designer é a de adaptar os sites, artefatos e plataformas da web
através de um projeto que forneça soluções eficientes e eficazes em usabilidade, ergonomia visual,
desempenho e comunicação, focadas nas necessidades do público-alvo. No entanto, cabe frisar, a
função do Web designer não é apenas a da produção de imagem ou conceitos da linguagem visual,
ele também pode atuar na organização textual de um site, através da tipografia e da arquitetura da
informação.

Web Designer e Desenvolvedor Web é a mesma coisa?

[Link]

1.2 Tipos de sites, blogs e aplicativos

Com certeza você já acessou um site, até porque para chegar até aqui em algum momento
você passou por um. Os sites são locais ou espaços na internet (que não é a mesma coisa que web,
recordam?), compostos por uma ou mais páginas de hipertexto, identificados por um nome de
domínio. Eles podem conter textos, gráficos, vídeos, áudios; enfim, tudo o que você imaginar relativo
à multimídia.
Desde os mais tradicionais e sofisticados aos mais simples, na web podemos encontrar
incontáveis sites, com uma quantidade imensa de opções de conteúdos e diversidade de assuntos.
Vale destacar que muitos deles não possuem apenas uma finalidade, podendo apresentar vários tipos
e objetivos. Vamos conhecer alguns?

7
 Portais Institucionais
É o tipo de site mais comum, podendo ser utilizado por empresas (públicas ou privadas),
órgãos públicos ou por figuras públicas. Em resumo, estes portais têm como objetivo apresentá-las
no ambiente on-line.
Eles podem, entre outras coisas, apresentar o histórico da empresa ou a biografia de uma
pessoa, os serviços e produtos, contatos. A importância desse tipo de site é de passar credibilidade,
se aproximar do cliente ou da população em geral, no caso dos órgãos públicos, e disponibilizar as
informações necessárias, podendo ser com páginas fixas ou dinâmicas, no entanto que possuam um
determinado grau de atualização.

Figura 01 – Site da Secretaria de Educação e Esporte de Pernambuco

Fonte: [Link]
Audiodescrição da figura: No centro da tela, imagem colorida da página principal do site da Secretaria de Educação e
Esporte de Pernambuco, em destaque, fotografia colorida de uma sala de reunião. Da esquerda para a direita, 5 pessoas
brancas, sentadas no entorno de uma bancada em U, uma sequência de uma mulher e quatro homens, todos estão
usando máscara. Na plateia, as pessoas observam. Fim da audiodescrição.

8
 Loja virtual
A loja virtual é definida por efetuar venda direta de produtos e serviços ao cliente por
meio on-line, sendo uma boa opção para lojas de roupas, acessórios, serviços de delivery ou de
qualquer coisa, não ilegal, que você queira vender.
No entanto, para que ele funcione é necessário desenvolver um site responsivo que esteja
sempre atualizado, afinal de contas é horrível quando você vai comprar algo e ele não está mais
disponível, mesmo o site apontando que sim.
Neste tipo de site a experiência do cliente é a questão central, a finalidade é gerar
interesse em adquirir o produto. Os sites mais limpos, cuja finalidade é comprar, costumam levar
vantagem sobre os demais. Porém, é importante separar aplicativo de site, as finalidades de ambos
são diferentes, com o site devendo oferecer uma amplitude maior de recursos, se possível até um
cafezinho.
Outro ponto importante a se entender é que caso você trabalhe com poucos produtos e
tenha uma demanda pequena, talvez fazer um site de compras não seja o melhor caminho, podendo
optar tanto por redes sociais como por aplicativos. Conheça um pouco mais.

Figura 02 - site buscapé

Fonte: [Link]
Audiodescrição da figura: No centro da tela, imagem colorida da página principal do Buscapé, na tela, da esquerda para
a direita, três produtos (livros) em destaque, com descrição e valor. Fim da audiodescrição.

9
 Portal de Notícias
Outro tipo de site extremamente popular. Eles são páginas na internet que servem como
ponto de acesso direto a um conjunto de serviços e informações, em geral através de grandes veículos
de notícias. Em seu site, o [Link], destaca que seu portal permite que o usuário encontre, em
uma mesma página, acesso a e-mail, vídeos, notícias, entretenimento, esportes, downloads, jogos,
rádios, blogs, fotologs, sites de humor e informações sobre a programação da emissora, entre outros
serviços e conteúdo.
Muitos deles permitem a interação direta do leitor através da caixa de comentário.
Exemplo:

Figura 03 – Site do G1
Fonte: [Link]
Audiodescrição da figura: No centro da tela, imagem colorida da página principal do site G1, na tela, da esquerda para a
direita, três matérias em destaque, com fotografias coloridas e texto. Fim da Audiodescrição.

10
 Site de Busca
O Google. Com esta definição acho que já daria para ter uma ideia do que é um site de
busca. Mas, além do site mais visitado do mundo, existem outros também de busca que são bem
conhecidos, como o Yahoo, que também é um Portal de Notícias (lembram que eu disse que um site
pode ser mais de uma coisa?), o ASK, o BING, etc.
Também existem alguns sites de buscas curiosos, como o AllMusic, que é buscador de
cantores e músicas, com um recurso de pesquisa que permite encontrar músicas, álbuns e artistas de
qualquer país, além do Web Design Museum.

Figura 04 - Site Web Design Museum

Fonte: [Link]
Audiodescrição da figura: No centro da tela, imagem colorida da página principal de uma sequência de telas, da
esquerda para a direita, de cima para baixo, 9 sites (Web Design Museum, google, Apple e Coca-Cola). Fim da
audiodescrição.

Hotsite
Não é o que alguns de vocês podem imaginar. Em geral, os hotsites são utilizados para
ações de marketing sendo incluídos em outros sites. Ou seja, os hotsites não funcionam
isoladamente, precisando de um hospedeiro. Sendo assim, eles são considerados sites estáticos.
Então, se você busca destacar algo em seu site; seja uma campanha, uma ação, uma
informação, muitas vezes a utilização de um hotsite é um bom caminho.

11
 Figura 05 - Hotsite da marca Ipanema
Fonte: [Link]
meu-negocio/
Audiodescrição da figura: No centro da tela, imagem colorida do Hotsite da Ipanema. Ao fundo, sol com nuvens
amarelas e luz resplandecendo, na parte superior, seis placas coloridas com as palavras (promoção, Ipanema, cadastre-
se, você e Ipanema, dúvidas, regulamento. Abaixo, “Promoção, você está no calor da moda com Ipanema”. Da esquerda
para a direita, 4 objetos, (Tablet na vertical, tablet na horizontal, ipad e fone de ouvido e um carro rosa. Fim da
audiodescrição.

Landing Page
Assim como os hotsites, o landing page é muito utilizado no marketing digital. O landing
page, ou página de aterrissagem, é a primeira página quando se abre um site, sendo feita de forma
específica, mais objetiva e criada estrategicamente.
Ela difere do hotsite, o landing page traz mais opções e informações, ele também difere
de uma página normal por, não necessariamente, ser fixa e ser objetivamente ligada ao marketing.
Então Web Designer, se você estiver vendendo ou trabalhando para uma empresa que
vende, por exemplo, um ebook, uma landing page é uma boa solução para apresentar as informações
indispensáveis para o visitante, trazendo um pouco do produto e reforçando a ideia de que ele deixe
seus dados de contato. Saiba um pouco mais:

12
 Figura 06 - Modelo de landing page
Fonte: [Link]
Audiodescrição da figura: No centro da tela um modelo de landing page de um petshop. Da esquerda para a direita,
uma imagem onde está escrito “cupom de desconto” e ao lado um texto escrito “Quer ganhar 10% de desconto em sua
próxima compra? ”. Fim da audiodescrição.

Blogs
Provavelmente você já viu ou leu algum blog, seja pessoal, corporativo ou profissional. Na
verdade, nesta disciplina diversos blogs servem de apoio. Diferente dos sites, os blogs são mais leves
e com linguagem mais direta. Ou seja, se vai fazer um blog, evite os textões e utilize outros tipos de
mídia que vai desde o textual, até vídeo ou áudio, e sempre se utilize de hiperlinks.
Outra diferença é que os blogs devem possuir uma atualização mais recorrente. Então, se
você busca, por exemplo, a criação de um portfólio online, o blog não é o melhor caminho.
No entanto, assim como os sites, existem vários tipos de blogs. Os mais populares, que
são os pessoais, funcionam de forma parecida a um diário, existem também os institucionais, que não
podem ser confundidos com o site, servindo como um apoio a eles, blogs de receita, de comentários
em geral e até de notícias.
Além disso, ainda temos plataformas um tanto mais novas similares aos blogs, como o
Medium e o Tumblr, que vocês irão conhecer já, caso não conheçam.

13
 Interessou-se pelo assunto? Pois neste blog você saberá mais sobre o tema e
como criar um blog.
[Link]

Tumblr
Embora tenha uma pegada diferente de outras plataformas de blog como o WordPress e
seja mais focado em posts curtos, o Tumblr não chega a ser um microblog, como o Twitter. Além
disso, ele possui um ótimo layout para exposição de fotografias (apesar de que para isso talvez seja
melhor utilizar o Picart).
O Tumblr se define como um espaço para celebrar a criatividade. “Nós queremos que
você se expresse livremente e use o Tumblr para refletir quem você é, o que você gosta e no que você
acredita”, diz a página.

Quer saber mais sobre?

[Link]
[Link]

Medium
Já o medium é uma plataforma de publicação mais parecida com uma revista digital. Nisto
ele se parece muito com um blog comum, onde as pessoas podem ler artigos sobre os tópicos que
mais importam para elas (ou seja, seguir temas de interesse), assim como compartilhar as suas
próprias ideias.
No entanto, diferente dos blogs, quando você faz o cadastro e começa a publicar você
não batiza de qualquer maneira. O endereço para os seus textos é [Link]/@SeuTwitter,
já que o cadastro é feito apenas pelo twitter.

14
 No medium não existem tags ou categorias para se encontrar o texto. Eles são exatamente
as categorias! Porém com uma página bonitona para abrigar todos os textos, e uma diferença crucial:
as Collections, que por padrão, são públicas.
Ou seja, eu posso criar uma collection só para textos sobre música, e, por ela ser pública,
outra pessoa pode vê-la e resolver escrever um texto nela. Além disso, ela pode ser indicada para
outros textos que falem sobre músicas, em resumo o medium tá com um pé no blog e outro nas redes
sociais. Saiba mais.

Além do Blog, Tumblr e Medium, um novo meio de publicação de textos, que vem
chamando atenção para o jornalismo digital, é o substack. Não conhece? Pois dá uma
conferida: [Link]
[Link]

Aplicativos
Com a evolução da tecnologia, os computadores diminuíram de tamanho.
Talvez você não saiba, mas o celular que você leva no bolso consegue armazenar bem
mais informações do que computadores que eram quase do tamanho do seu quarto. Acessem este
medium e conheçam mais sobre a plataforma que falei a pouco e também sobre o tema.

Figura 07 - A evolução dos computadores

Fonte: [Link]
46606ccb0235
Audiodescrição da figura: No centro da tela, da esquerda para a direita, ilustração de uma linha do tempo, de 1960
(com um grande equipamento de computador), na sequência de 1970, 1980, 1990, 2000, 2010 e 2015 (um
smartphone). Fim da audiodescrição.

15
 O que resume bem toda esta evolução são os aplicativos, que surgem do termo em inglês
Aplicattive, que possuímos em nossos celulares. Atualmente, utilizamos eles para nos locomover,
mesmo que nem sempre ele aponte o horário correto do ônibus, para pedir comida, pagar contas e
até para paquerar. Enfim, se você tem um celular e ele tem menos de 15 anos, é certeza que você
tem algum tipo de aplicativo nele.
Motivado por estes avanços, o mercado de aplicativos para aparelhos celulares mostra-
se em crescimento rápido. Atualmente, é um mercado disputado por diferentes plataformas
tecnológicas, incluindo sistemas operacionais e plataformas de desenvolvimento, gerando uma
variedade de soluções no mercado. Frente a este fato, um dos principais desafios deste mercado é
desenvolver aplicativos em um ambiente de tecnologia altamente fragmentada e em rápida
evolução.
Atualmente, existem basicamente três tipos de aplicativos móveis: os aplicativos nativos,
aplicativos da web e aplicativos híbridos.
De acordo com o professor James White, os aplicativos nativos são desenvolvidos para
apenas um tipo sistema operacional, oferecendo mais acessos a recursos do celular, tais como
câmera, agenda, calendário, GPS, etc. É importante lembrar que, dependendo da funcionalidade da
aplicação, ele pode funcionar sem a necessidade da internet.
Já os aplicativos para web podem ser baseados em HTML5 (chegaremos lá) e exibidos
através de um navegador embutido na aplicação. Eles também são multiplataforma, funcionando
além do celular, como o Facebook, por exemplo.
O aplicativo híbrido é uma mistura dos tipos web e nativo. Ou seja, ele funciona como
um app nativo, mas sua codificação é toda desenvolvida na linguagem web, podendo ser HTML5,
JavaScript ou CSS. Muitos dos aplicativos para web também podem ser considerados híbridos, como
o Facebook e o Instagram.
Pode-se dizer que estes são os aplicativos que trazem mais possibilidades e maior
capacidade de atualizações na sua interface e usabilidade.

16
 TIPO DE LINGUAGEM VANTAGENS DESVANTAGENS

• Maior integração com usuário • Cada plataforma terá sua

Nativo • Velocidade de execução não versão do programa
depende da web • Distribuição e atualização
dependente de lojas online

• Executados pelo navegador • Pouca integração com o

independentemente da hardware do dispositivo
plataforma • Lento
• Atualização e distribuição • Menos funcionalidades
Aplicativo para Web rápidas, sem necessidade de • Execução depende da
atualizações internet
• Acesso rápido e fácil

• Compartilha códigos com • Desempenho e design

Híbrido outras plataformas limitados
• Pode ser distribuído em lojas
online
• Pode usar recurso de
plataformas com código
nativo
Tabela 01 - Diferenças entre aplicativos nativos, híbridos e para web.
Fonte: O autor.

Saiba um pouco mais

[Link]

17
1.3 Linguagens de marcação, de design e de programação de web

No capítulo anterior, você aprendeu um pouco sobre sites e outros tipos de plataformas
para web. Porém, fica a pergunta, como eles são feitos? Calma, eu sei que o desenvolvimento de web
não é o nosso foco. No entanto, para saber como modificá-los e melhorá-los é importante saber como
eles são feitos, certo? Então vamos lá.
A linguagem de marcação é um conjunto de códigos empregados a dados e a textos, com
a finalidade de adicionar informações específicas sobre eles. Ela é utilizada em diferentes segmentos,
em especial na indústria editorial onde a marcação e a formatação de páginas são feitas a partir desse
recurso.
As linguagens de marcação se utilizam do conceito de marcador ou tag, que já trazem
algum significado e que quando forem visualizados por algum sistema que as reconheça, irão saber
como o conteúdo deve ser exibido.

Exemplo: <title>, <body>, <header>, <footer>, <article>, <video>, e muitos outros.

A mais popular das linguagens de marcação é o HTML, fundado por Tim Berners-Lee
(lembra?). HTML é a sigla em inglês de Hypertext Markup Language, que significa linguagem para
marcação de hipertexto.
Já falei um pouco anteriormente sobre hipertexto. Mas, sendo mais específico, de acordo
com a definição de Maurício Samy Silva, autor de diversos livros sobre HTML, o hipertexto seria todo
o conteúdo inserido em um documento para web tendo como principal característica a possibilidade
de se interligar a outros documentos, através de links.
Maurício Samy ainda destaca que a HTML evoluiu de acordo com o tempo, passando por
diversas versões, sendo a atual a HTML5. Esta versão, mais atualizada, traz uma maior
compatibilidade com os navegadores Google Chrome, Firefox, Microsoft Edge, maior suporte de
multimídia (áudio e vídeo) e melhor desempenho em dispositivos móveis, sendo atualmente a
principal do mercado.

18
 Figura 08 - A evolução do HTML.
Fonte: [Link]
Audiodescrição da figura: No centro da tela, da esquerda para a direita, ilustração de uma linha do tempo da HTML, de
1991 até o surgimento do HTML5. Fim da audiodescrição.

Confira aqui algumas outras diferenças:

[Link]

Além do HTML existe também o XML como linguagem de marcação. Ambos são bem
parecidos. A grande diferença é que o HTML descreve a aparência e as ações em uma página na rede,
enquanto o XML não descreve nem aparência e nem ações, mas sim o que cada trecho de dados é ou
representa, ou seja, o XML descreve o conteúdo do documento. Outro ainda existente é o XHTML
que é basicamente a mistura entre o XML e o HTML.
Quer ver o HTML que constitui o site? Vá numa página, clique no botão direito do mouse
e depois em inspecionar. E... pronto!

19
 Figura 09 - Como verificar o HTML de um site
Fonte: Própria
Audiodescrição da figura: Página à esquerda, um tanto escura, com a mesma imagem da figura 8. Ao lado, códigos de
HTML da mesma página. Fim da audiodescrição.

Outra famosa linguagem de marcação é o Flash Adobe, conhecida por ser uma das
primeiras na criação de efeitos e animações bem diferentes do que se via nos sites tradicionais feitos
somente com a linguagem HTML.

O Flash também trazia a possibilidade de construir páginas inteiras, reproduzir

vídeos, jogos online, etc. Atualmente, com a HTML5, ficou um tanto em
desuso, tanto que foi encerrado ano passado. Mas, caso lhe interesse, você
pode conhecer um pouco mais aqui. [Link]
que-e-o-Adobe-Flash/

CSS
Outra linguagem, que não funciona como de marcação, mas atua em parceria com ela, é
a linguagem de "folha de estilo" ou “linguagem de design” que é o CSS ou Cascading Style Sheets
(Folha de Estilos em Cascata), utilizada para definir como os documentos escritos na linguagem de
marcação (HTML ou XML) devem ser apresentados em termos de formatação e de layout.

20
 Ou seja, o CSS é o principal amigo do Web designer pois ele será o responsável, através
de códigos, pela “decoração” do site. Com ele você pode mudar a cor do texto e do fundo, criar
tabelas, fazer alterações no layout, ajustar imagens, etc.

JavaScript
De acordo com o livro JavaScript: O Guia Definitivo, de David Flanagan, o JavaScript é uma
linguagem de programação de web. Atualmente, a ampla maioria dos sites modernos e todos os
navegadores, console de jogos, tablets, smartphones, incluem interpretadores JavaScript.
Se o HTML serve para especificar o conteúdo, o CSS cuida da apresentação, o JavaScript
será responsável pelo comportamento das páginas. Ou seja, é através dele que é possível incluir e
editar multimídias, imagens animadas, infográficos interativos, entre outras coisas.
Além do JavaScript, outra linguagem de programação bastante utilizada é o PHP. Apesar
de parecido, ele traz algumas diferenças do Java. Saiba mais.

Figura 10 - Diferenças entre HTML, CSS e Javascript

Fonte: [Link]
Audiodescrição da figura: No centro da tela, uma ilustração colorida. Da esquerda para a direita, um esqueleto, abaixo
está escrito (HTML), um corpo de um homem de cueca, abaixo está escrito (CSS) e imagem de uma representação do
tecido humano, abaixo está escrito (Java script). Fim da audiodescrição.

21
 Quer saber mais sobre HTML, CSS e JAVASCRIPT e o que eles fazem, confira
este vídeo e veja na prática as diferenças entre os três.
[Link]

1.4 Planejamento, usabilidade e a importância de um site responsivo

Já falei um pouco sobre a história da web, alguns tipos de produtos e como eles são
programados, então é chegada a hora de colocar a mão na massa e planejar. Vamos lá com um passo
a passo necessário!
Objetivo – Como diz o ditado, “tem que começar pelo começo” e o início de tudo é
definindo um objetivo. Não adianta criar um site, blog, aplicativo ou até um software sem ter um
objetivo claro. Na verdade, na vida é importante definir os objetivos; você está fazendo este curso
com algum objetivo e espero que esteja gostando até aqui.
Então, para antes de iniciar um projeto, você deve responder algumas questões como:
Para que servirá? Qual o tipo de site, aplicativo ou blog que você irá propor? Quais resultados você
espera a partir deles e como irá calculá-los? E o principal, qual público você busca atingir e como será
seu relacionamento com eles?
Público-alvo – Não dá para se ter tudo. Fato. E no mundo digital não é diferente. Em uma
rede digital cheia de pessoas distintas, cada uma com seu gosto, você vai precisar definir qual público
quer alcançar.
Por exemplo, se você vai fazer um site com o objetivo de vender roupas esportivas, vai
precisar saber que público consome mais esse tipo de produto, qual idade, renda, que tipo de
produtos consomem mais, onde moram, etc. Pesquise! Não adianta nada você fazer um excelente
site se o público que você busca atingir não irá ver.
É claro que você não vai se resumir e focar em apenas um público, até porque, como eu
disse, as pessoas não são iguais, mas é importante entender quem será a maioria do seu público para
saber qual linguagem visual ou textual você utilizará.

22
 Conteúdo – Você já tem o objetivo e o público-alvo definido, então é chegado o momento
de pensar o conteúdo e para isso duas coisas são essenciais: clareza e coesão. Busque conteúdos que
prezam pela simplicidade, linguagem direta, coesa e clara. Mesmo que seu site seja, como no
exemplo anterior, uma loja virtual para vender roupas esportivas, busque apresentar de forma mais
clara o produto.
Exemplo: Se o produto é a camisa de algum clube, especifique o tamanho, o material que
é feito e o preço. Por sinal, dica, esse negócio de esconder o preço não tá com nada, quanto mais
claro for, melhor. Outra dica, usando o mesmo exemplo, se o produto é a camisa de clube, sendo
possível, escreva um pequeno texto sobre o clube, ano que foi fundado, principais títulos, essas
coisas. Curiosidades são sempre bem vindas.
Porém, evite textões. Deixe os textões para as redes sociais.
Atrair o público – Se você já tem o conteúdo e o público, cabe agora atraí-los.
Independentemente do que você vai criar, mesmo que não seja para vender algo, busque
fazer um produto atrativo. Algum vídeo, alguma produção textual, promoção, enfim.
Além disso, é importante focar no lançamento, que é o momento que deve gerar um
número maior de acessos. Se for criar um site, ter um landing page é uma boa pedida. E, como falei
anteriormente, trazer informações e responder rápido o cliente é sempre bem-vindo.

Existem vários plataforma de desenvolvimento de site gratuitas, as principais

atualmente são Wix, Wordprees, site123, Joomla e até o Canva. Ainda nesta
competência, iremos aprender um pouco sobre como criar.

Para desenvolver um site é importante o domínio que é a marca do seu site.

Pense bem o nome que irá escolher e o domínio que usará; sendo possível,
registre a marca. Você pode fazer isso pelo [Link]

23
 Usabilidade - Passado os processos para criação de artefatos, é necessário identificar algo
extremamente atual e importante: a usabilidade.

Usabilidade é o termo usado para descrever a qualidade da interação dos usuários com
uma determinada interface. Esta qualidade está associada, segundo um dos principais pesquisadores
sobre usabilidade, Jakob Nielsen, aos seguintes princípios:
• Facilidade de aprendizado;
• Facilidade de lembrar como realizar uma tarefa após algum tempo;
• Rapidez no desenvolvimento de tarefas;
• Baixa taxa de erros;
• Satisfação subjetiva do usuário.

Em seu sentido mais amplo, a usabilidade na interação humano-computador não abrange

apenas o sistema informatizado, mas o equipamento e o mobiliário incluídos no ambiente de
trabalho, fazendo interseção com a usabilidade dos produtos.
Considera-se que a interface tem um problema de usabilidade se um determinado
usuário ou um grupo de usuários encontra dificuldades para realizar uma tarefa. Tais dificuldades
podem ter origens variadas e ocasionar perda de dados, diminuição da produtividade ou mesmo a
total rejeição do produto por parte dos usuários. Então é importante ter muito cuidado!

Vamos a alguns exemplos:

1 - Talvez o pior dos problemas. Se sua página demora a carregar, não carrega ou não
aparecem todos os ícones. Cuidado! Contrate um servidor melhor ou observe o tamanho das
imagens. Também observe se o problema ocorre apenas com um navegador (Edge, Firefox, Chrome)
e se não é problema com o Javascript ou CSS.

24
 Figura 11 - Página sem carregar
Fonte: [Link]
Audiodescrição da figura: No centro da tela, uma página de um site com códigos. Fim da audiodescrição.

2 - Problemas com a tipografia, ou seja, as letras escolhidas e com as cores. Em resumo,

fica difícil de ler o que tá escrito abaixo, né?

Figura 12 - página com várias tipografias diferentes

Fonte: [Link]
Audiodescrição da figura: No centro da tela, uma página de um site e uma sequência de 4 linhas com palavras
aleatórias e fontes diferentes, nas cores (preto, rosa, vermelho e azul escuro). Fim da audiodescrição.

25
 Figura 13 - Palavras com problemas de tipografia
Fonte: O autor
Audiodescrição da figura: Acima está escrito: escrever algo em amarelo sobre uma página branca é
ruim e atrapalha bastante e nem sempre tudo que parece bonito é bom para leitura. Fim da audiodescrição.

3 - Cuidado com os menus confusos ou que exigem muito do leitor. Falei anteriormente
que utilizar landing page é sempre uma boa pedida. No entanto, é preciso ser direto. Como dizem,
tempo é dinheiro e nem sempre você tem tempo para passar por sete passos, muitos deles evitáveis.

Figura 14 - Facebook das Casas Bahia

Fonte: [Link]
Audiodescrição da figura: No centro da tela, página do Facebook das Casas Bahia e de cima para baixo, uma sequência
de 7 passos, à direita, e à esquerda uma ilustração de uma casa com um boneco de um menino com chapéu. O texto na
parte superior da imagem diz: “casa do desconto”. Fim da audiodescrição.

26
 4 - Cuidado com as urls, links, e-mails. Sabemos dos perigos que existem na internet com
golpes e afins. Então, evite desconfiança. Por exemplo, talvez você não fosse entrar em um site com
o nome [Link] sem desconfiar, ou enviar um e-mail para xywxx@[Link], mas cuidado com
o domínio e evite o X e Y, se possível. Também evite urls enormes.
5 - Muitos anúncios. Bem, esse é quase autoexplicativo. Por mais que muitas vezes os
anúncios ajudem na rentabilidade do seu produto, evite que eles estejam por toda a parte.

Figura 15 - layout do Site [Link]

Fonte: [Link]
Audiodescrição da figura: No centro da tela, uma página de um site chamado [Link] e uma sequência de códigos e
propagandas e anúncios. Fim da audiodescrição.

6 - Site, app, blog, etc. sem buscador ou uma barra para pesquisar, não dá! Lembre-se
sempre de ter um e mantê-lo atualizado. Ou seja, com as buscas funcionando perfeitamente e com
o máximo de refinamento possível. Então, por exemplo, se eu pesquiso a palavra “casa” que
apareçam apenas pesquisas que contenham a palavra casa de forma isolada e não, termos como
“casamento”, “casarão”, “casado”, etc.

27
 Figura 16 - Ilustração de um buscador
Fonte: [Link]
Audiodescrição da figura: No centro da tela, uma página de um site com fundo azul, e projeções de telas de internet, no
centro, ilustração de uma mão com lupa. Fim da audiodescrição.

7 - E por fim, porém não menos importante. O site abaixo. Ele basicamente é a mistura
de tudo que há de errado em um site.

Figura 17 - Site acidez mental

Fonte: [Link]
[Link]
Audiodescrição da figura: No centro da tela, uma página de um site “Acidez Mental” com uma sequência direito
diversas imagens de propagandas. Fim da audiodescrição.

28
 UX e UI:
Atualmente, boas técnicas de usabilidade se confundem com UX ou User eXperience
(experiência do usuário), que não envolve apenas a facilidade do uso e o êxito nos objetivos como a
usabilidade propõe, indo um pouco além e se relacionando com sentimentos e emoções do usuário
antes, durante e depois de utilizar o sistema.
Ou seja, o usuário deve gostar de utilizar seu produto e não apenas vê-lo como um meio
para conseguir um objetivo. Não tem quando você fica um tempão em determinada página, seja
lendo, seja vendo imagens que lhe agradem e você nem sabe bem o motivo, já que entrou ali apenas
para pesquisar algo. Pois bem, você foi seduzida ou seduzido pela UX.
Outro aspecto importante é a User Interface (ou interface do usuário) que não é tão
subjetiva como a UX, mas igualmente importante. De acordo com artigo do site Rockcontent, uma
referência no tema, UI é um termo utilizado para explicar como serão feitas as interações entre
pessoas e softwares ou aplicativos.
O artigo explica que as empresas começaram a desenvolver essa área para facilitar de
forma estratégica a navegação dos usuários em suas plataformas, permitindo que eles consigam ser
orientados através de recursos visuais para concluírem suas ações com praticidade. Se um
consumidor entra na sua loja on-line, por exemplo, e não consegue finalizar a compra porque não
está encontrando as informações necessárias para chegar até o carrinho, você certamente está
perdendo vendas.

Figura 18 - Diferença entre UX e UI

fonte: [Link]

29
 Audiodescrição da figura: Uma ilustração de um cérebro dividido em preto e azul, do lado preto escrito
Comportamento UX e algumas definições abaixo (pesquisa, protótipos, etnografia, personas e objetivos), do lado azul
escrito aparência UI e algumas definições abaixo, (design visual, tipografia, cores, layouts e design system). Fim da
audiodescrição.

Veremos mais sobre UX e UI em Arquitetura da Informação na competência a seguir.

Site Responsivo:
Se sua plataforma tem boa usabilidade e você aplicou corretamente técnicas de UX e UI,
ele com certeza será um site responsivo. Você pode estar se perguntando, o que é um site
responsivo? É um site “responsa”? Sim, de alguma forma, sim.
No livro Responsive Web Designers, Ethan Marcotte explica que uma interface responsiva
é aquela que se adapta a diferentes resoluções de tela. Já Maurício Samy ressalta que um design
responsivo vai muito além apenas da adaptação do layout ao tamanho da tela. O conceito na sua
forma mais ampla deve ser entendido como o design ser capaz de “responder” às características do
dispositivo ao qual é servido.
Ou seja, o layout responsivo expande e contrai com a finalidade de se acomodar de
maneira usável e acessível à área de onde é visualizado, seja smartphone, computador, notebook,
tablet, etc.
Resumindo, se você tem a impressão que determinado site é melhor lido pelo celular ou
pelo Computador, trazendo grandes diferenças quando se muda o meio, é porque ele não é
responsivo.

30
 Figura 19: Site responsivo x Site não responsivo
Fonte: [Link]
Audiodescrição da figura: Do lado esquerdo, com o fundo azul, temos uma ilustração de uma mão segurando um
celular, escrito acima Site Responsivo (e três informações: mobile menu, retina image e call to action). Do lado direito,
com o fundo laranja e escrito Site não responsivo na parte de cima e abaixo também uma mão segurando um celular (e
três informações: navegação desorientada, texto pequeno e conteúdo obstruído). Fim da audiodescrição.

Vamos entender melhor na prática. Acesse a página [Link] e digite a url de

qualquer site, no exemplo abaixo coloquei o EducaPE. E verifique como o site se comporta em
diversas plataformas. Atente principalmente para alterações no layout, cores, disposição das
informações, se em determinadas plataformas algumas informações somem e se isso traz algum
problema, ou se ele carrega corretamente as informações. Divirtam-se.

Figura 20 - Site [Link]

Fonte: O autor
Audiodescrição da figura: No centro da tela, uma página de um site com a Barra de busca do site repositor e, ao lado,
está escrito “Digite aqui o endereço do site”. Fim da audiodescrição.

31
 Figura 21 - Imagem do Educa-PE no site [Link]
Fonte: [Link]
Audiodescrição da figura: No centro, tela ilustrativa do site Educa-pe para Smartphone. Fim da audiodescrição.

Figura 22 - Imagem do Educa-PE no site [Link]

Fonte: [Link]

32
 Audiodescrição da figura: No centro, tela ilustrativa site Educa-pe, em um smartphone, na horizontal. Fim da
audiodescrição.

Figura 23 - Imagem do Educa-PE no site [Link]

Fonte: [Link]
Audiodescrição da figura: No centro, tela ilustrativa site Educa-pe, em um smartphone, na vertical, Ilustração do site
Educa-pe em um tablete. Fim da audiodescrição.

Você agora já entende vários aspectos sobre a criação de artefatos, então que
tal ver na prática? Na primeira competência trago dois vídeos um com uma
parte mais teórica e outro mais prática sobre a criação de um site e um
aplicativo. A parte prática você conferir aqui:
[Link]

No AVA estará disponível a parte mais teórica.

33
UNIDADE 02 | Aplicar os princípios da arquitetura da informação em
artefatos da web

2.1 Porque devemos aprender sobre Arquitetura da Informação

De acordo com o Information Architecture Institute (Instituto de Arquitetura da

Informação), o trabalho da entidade apoia-se na prática de decidir como organizar as partes de algo
para ser compreensível. O Instituto ainda explica que a arquitetura de informação (IA) está nos sites
que usamos, aplicativos e softwares que baixamos, materiais impressos que encontramos e até
mesmo nos lugares que passamos. Ou seja, ela está em todo lugar!
O termo foi criado por Richard Saul Wurman, em 1975, ele também traz uma definição
bem interessante. Para ele, a Arquitetura da Informação deve tornar claro o que é complexo. Ao criar
o termo, ele apontou que a explosão massiva de informações precisava de uma arquitetura, de uma
série de sistemas, um design e uma série de critérios de performance para mensurá-los.
Então, a IA ajuda a entender o que nos rodeia e encontrar o que procuramos, no mundo
real e on-line. Praticar a arquitetura da informação envolve ajudar as pessoas e organizações com as
quais trabalhamos a considerarem suas estruturas e linguagem de maneira cuidadosa.
Então, em boa parte das coisas no nosso dia-a-dia, virtual ou real, podemos imaginar e
aplicar conceitos de arquitetura da informação. E quando falo em boa parte, é boa parte mesmo.
Você pode imaginar a arquitetura da informação até numa paquera!

34
 Figura 24 - Arquitetura da informação aplicada em um encontro
Fonte: Própria
Audiodescrição da figura: No centro da tela, tabela denominada “Arquitetura da Informação aplicado em um
encontro”. Possui 8 linhas com as informações, de cima para baixo, os pontos (Ideia ou pedido do que será seu
objetivo), (Analisar os concorrentes: Verificar os pontos fortes e fracos), (Definir o público-alvo: escolher a melhor
opção), (Cenários: pensar nas várias possibilidades de cenário), (Pesquisar os conteúdos: do que seu público-alvo
gostará?), (Fluxo de processos: onde você colocará em prática o projeto), (Wire frame: Imaginar/planejar como colocar
em prática) e (Tá tudo certo? É hora de conquistar). Uma sequência de 8 ícones que correspondem a cada ponto
descrito). Fim da audiodescrição.

35
 Mas, como você não está aqui para aprender a paquerar? No mundo digital, a Arquitetura
da Informação possibilita a orientação necessária para o desenvolvimento de produtos e serviços,
trazendo tanto a melhoria na qualidade da navegação quanto na usabilidade.
Ou seja, quanto mais bem planejado e organizado seu projeto, menos problemas ele terá,
o que acarretará menos tempo e dinheiro. Tudo isso envolverá temas como linguagem, design,
tecnologia, psicologia e muito mais.

Figura 25 - O que compõe a arquitetura da informação

Fonte: Autor
Audiodescrição da figura: No centro da tela, fluxograma circular, com três círculos juntos, um verde escrito “contexto’,
um roxo escrito “conteúdo” e um laranja escrito “usuário”, no centro a palavra “AI”. Abaixo, uma tabela com Conteúdo
(texto, imagens, podcast, estrutura e taxonomia), Usurário (persona, busca pela informação, experiência de uso, o que
busca executando sua aplicação) e Contexto (objetivos do projeto, modelo de negócios, metodologia de
desenvolvimento, recursos e restrições), dividido em três colunas, da esquerda para a direita. Fim da audiodescrição.

2.2 Definindo as personas

Personas
Na competência passada, apontei sobre a importância da definição do público-alvo na
criação de um projeto. No entanto, vamos ampliar um pouco essa visão e falar sobre as personas.
Primeiro é importante destacar que persona e público-alvo não são a mesma coisa.
Podemos dizer que o primeiro está contido no segundo. Ou seja, o público-alvo define algo mais

36
genérico, um grupo maior de consumidores, já a persona cria identidade e personagens de forma
individual.

Figura 26 - Persona x Público Alvo

Fonte: [Link]
Audiodescrição da figura: No centro da tela, cartaz com ilustração colorida, da esquerda para a direita, com azul claro
ao fundo, uma ilustração de um homem negro, acima dele seu nome (Diego Mesquita, 33 anos, Gerente de Marketing
de uma grande empresa), na parte superior, a palavra “Persona”. À direita, com azul escuro ao fundo, um boneco cinza
com um alvo no peito, na parte superior, a palavra “Público-alvo”, ao lado está escrito, (Gerente de Marketing, entre
30- 45 anos, trabalham em grandes empresas, não gastam muito tempo na internet, renda mensal “entre 5.000 e
30,000”). Na parte inferior, quatro colunas divididas em duas linhas, da esquerda para a direita (definição específica,
personagem específico, detalhes sobre hábitos e trabalho, consumidor ideal, definição ampla, não se refere a alguém
específico, não fala sobre hábitos, pessoas que podem querer o seu produto). Fim da audiodescrição.

A criação de uma persona será importante para determinar alguns andamentos para o
seu projeto. E dica, ela pode ocorrer mesmo com o seu projeto (um site, por exemplo), pronto. Caso
você esteja com menos acessos ou compras, no caso de um site de vendas, talvez seja porque a
persona que você alcança não é a ideal.

37
 Definindo uma persona você poderá determinar o tipo de conteúdo que precisa, definir
o estilo do seu conteúdo, melhorar suas estratégias de marketing e entender melhor as modificações
que ocorrem no mercado.
Existem alguns tipos de personas. Vamos conhecer as principais:
• Buyer persona – É o exemplo mais comum. Buyer = Comprador. Então, como o nome
indica, é um perfil semifictício que representa o seu comprador. A partir da criação dessa
persona é possível entender melhor o que compõe o seu público-alvo.

• Audience persona – Audience = Audiência. Ela é importante no engajamento entre a

marca e o usuário. Pode até não ser a persona compradora, mas muitas vezes ajuda a
divulgar seu produto. Ela representa quem visita as suas páginas nas redes sociais, lê as
publicações do seu blog ou até assiste aos seus vídeos.

Nesta esquete do Porta dos Fundos podemos ver um bom exemplo de

Audience Persona. [Link]

• Brand persona – A persona não precisa apenas ser, veja só, humana. Ela pode ser a
própria empresa! No mercado atual é bem comum o processo de “humanização” das
marcas. Então, se torna interessante para sua marca ter a própria persona. Ela pode
ocorrer através de mascotes, como a Magalu do Magazine Luiza ou mesmo de perfis nas
redes sociais, um exemplo é o antigo perfil da Prefeitura de Curitiba. Ahhh sim, Brand
significa marca em inglês.

38
 Figura 27 - Tuíte da Prefeitura de Curitiba
Fonte: [Link]
[Link]
Audiodescrição da figura: No centro, fotografia colorida, uma captura de tela, na parte supeior, está escrito:
“Tranquilizamos todos os cidadãos avisando que essa imagem, publicada recentemente no Instragram, não é real.
Obrigado”, na parte inferior, imagem de uma Capivara gigante atirando raios pelos olhos, na direção de três
monumentos e, ao fundo, fogo. Fim da audiodescrição.

Proto persona – Importante no projeto inicial da empresa, é a versão inicial das muitas
personas que uma empresa pode ter. Ela é criada por meio de um brainstorming (tempestade de
ideias) da sua equipe e avalia as principais características dos clientes.
No entanto, eu imagino que as personas do curso de Multimídia, além de criativas e serem
em sua maioria torcedoras do Sport, e adorarem sorvete de napolitano, também gostam de aprender
através de outras mídias, como o vídeo. Então, no vídeo a seguir tem um tutorial bem legal sobre
como criar personas. Confira: [Link]

2.3 Estrutura hierárquica, Fluxo de navegação e criação de wireframes

Estrutura hierárquica
Lembram que no tópico passado eu falei sobre o brainstorming? Com certeza, sim. Até
porque a informação está três parágrafos acima. E o primeiro passo para nossa estrutura hierárquica
é o brainstorming, a famosa tempestade de ideias, onde você vai selecionar as melhores para o seu

39
projeto, neste caso usarei um site como exemplo. Após isso, e entendendo o seu objetivo, é hora de
definir quais são as prioridades do seu site.

Este processo pode ser feito como se fosse um organograma e dá para fazer
em algumas plataformas online. Neste caso, eu usarei o jamboard e lucidchart.
Você pode ver nos materiais complementares da disciplina. Confira como
fazer: [Link]

Figura 28 - Organograma do site Lucidchart

Fonte: Autor
Audiodescrição da figura: Um organograma colorido com a palavra Lucidchart, na parte superior, na horizontal. Na
parte inferior, 5 cartelas com as palavras (exemplos, preço, documentos, login e software). Na vertical, na parte inferior,
uma sequência que vai de (Login, abaixo, Editor Lucidchart), em seguida, Documentos, Perfil e Configurações. Na lateral,
uma sequência de que começa de Software, (equipe, tutorial e blog). Fim da audiodescrição.

40
 Hierarquizar as informações é fundamental para entender o nível de importância delas,
como criar conteúdo e, principalmente, como o usuário encontrará as informações.
Além disso, criar esse tipo de hierarquização servirá para você perceber algumas falhas e
ausências que possam ocorrer. Afinal de contas, seria horrível criar um site para compras e só
lembrar de colocar o botão “pagar” quando ele estiver no ar.
Neste tipo de criação, o autor Merlyn Holmes explica que três aspectos são importantes
a se pensar pelo arquiteto da informação. São eles:

Criação de Rótulos – Devem ser simples e objetivos, facilitando o entendimento do

usuário sobre o que se trata a categoria.

Figura 29 - Menu no site do Atacado dos Presentes

Fonte: o Autor
Audiodescrição da figura: Na tela, página de um site denominado “Site com a palavra serviços oferecidos”, sem
seguida, à direita, na parte superior, imagem de uma mulher branca, cabelo longo, preto, com capacete e blusa branca,
ela segura com as mãos uma maquete com produtos. Abaixo, da esquerda para a direita, uma sequência de figuras com
pequenos serviços como: Ambiente climatizado, crédito fácil, cor sob medida, estacionamento próprio, horário especial,
lanchonete e loja de plantas. Fim da audiodescrição.

Sobre a imagem acima, cor sob medida não é lá um menu muito claro que
oferece uma informação satisfatória. O que você imaginaria que é cor sob
medida, clique no link abaixo, e responda. Vamos fazer um brainstorming.
[Link]

41
 Regra dos Três cliques – Quanto mais o usuário clica para encontrar algo que busca mais
chances ele tem de desistir do site, com isso o número de nível hierárquico deve ser o menor possível,
evitando mais de três cliques. Ou seja, usem apenas dois níveis de acesso nas informações mais
importantes, se possível.
Regra dos Sete Mais ou Menos Dois Itens – Parece complicado, mas é simples de
entender. O objetivo é que se crie menus com uma quantidade média de itens. E aí entra a psicologia.
Pois entende-se que a capacidade média de retenção é de sete itens não relacionados entre si, que
pode variar de mais ou menos dois. Isso vem a ter relação com a memória de curto prazo. Esse vídeo
explica direitinho como ocorre. Não se esqueça de ver:
[Link]

Então muito cuidado quando planejar a hierarquização para não colocar coisas de menor
importância acima das coisas necessárias. Porém, vamos ver isso na prática. Abaixo tem três arquivos
abertos com projetos feitos na plataforma jamboard, que é bem intuitiva.

Agora chegou a hora de você praticar. Acesse os links abaixo, explore a vontade. Porém
não bagunce muito:
Hierarquia site de compra
[Link]
/edit?usp=sharing
Hierarquia site institucional
[Link]
s/edit?usp=sharing

Agora que você já observou chegou a hora de colocar em prática e criar seu próprio
projeto. Divirta-se.
Monte sua hierarquia
[Link]
rhVJvrvs/edit?usp=sharing

42
 Fluxo de navegação
Já definimos a nossa hierarquia. Após isso é importante, pensando em um site, entender
o fluxo. O que leva para onde e com quantos cliques chegaremos até determinada informação.
Ter bem definido um fluxo de navegação evitará algumas frustrações, como quando a
gente clica em determinado link e não vai para lugar nenhum. Além disso, ter um objetivo claro,
facilita a navegação do usuário.

Mais uma vez vamos para o lucidchart e através de uma videoaula vamos
entender um pouco sobre o processo. Confira:
[Link]

Assim como na hierarquização, no fluxo de navegação é importante perceber os aspectos

apontados por Merlyn Holmes, principalmente o último item.

Figura 30 - Modelo de fluxograma

Fonte: [Link]
Descrição da imagem: No centro da tela, um fluxograma colorido, que tem início a frase: A lâmpada não funciona,
abaixo escrito: A lâmpada estava plugada?, depois, o bulbo queimou? E depois comprar lâmpada nova. Ao DE “A
Lâmpada estava plugada? ” Uma seta com não escrito em cima e apontando para “plugar a lâmpada”. Ao lado de “o
bulbo queimou? ” Uma seta onde está escrito: Sim, apontando para trocar o bulbo. E seguida, está escrito: Não,
“comparar nova lâmpada”. Fim da audiodescrição.

43
 O fluxo de navegação não é nada mais do que um fluxograma, se pensarmos em
aspectos não digitais. Quer saber mais sobre fluxograma, como fazer e aplicar
no seu dia-dia. Veja aqui: [Link]
fluxograma

Wireframe
Já passamos pelo processo de hierarquização e do fluxo de navegação. Sendo assim, já
temos um modelo do projeto e isso se fará através de um wireframe.
O wireframe pode ser definido como um esqueleto do site, que deve ser feito antes de se
iniciar a montagem do layout com cores e imagens. O seu objetivo é validar o projeto, auxiliar na
aplicação da identidade visual e alinhar com o cliente, caso necessário, os objetivos, como na imagem
abaixo.

Figura 31 - Modelo de wireframe

Fonte: [Link]
100/
Audiodescrição da figura: Na tela, ilustração colorida de um modelo de um site, com menus, categorias, espaço para
pesquisa, espaço para imagem e um exemplo de barra de rolagem. Fim da audiodescrição.

44
2.4 Modelo mental, Design Thinking e um pouco mais de UX e Gestalt

Modelo mental
Para finalizar esta competência voltarei um pouco a um tema que foi abordado na
competência anterior: UX ou User eXperience (experiência do usuário). Para isso, irei falar sobre dois
temas que atuam ao lado da Arquitetura da Informação: os modelos mentais e o Design Thinking.
Modelo Mental é uma representação mental da realidade. Ele foi citado pela primeira vez
pelo filósofo americano Charles Sanders Peirce. Não existe um único modelo mental para um
determinado estado de coisas. Ao contrário, podem existir vários, mesmo que apenas um deles
represente de maneira correta esse estado de coisas.
Mas o que isso interessa para a arquitetura da informação? Bem, provavelmente você
conhece o Google, mas se eu pergunto agora, sem ir lá no site, qual é a ordem das cores da palavra
google você consegue me responder (mentalmente)? Complicado, né? Pois é dessa forma que, na
criação digital, o modelo mental vai funcionar.
Vou dar outro exemplo: você já usou papel higiênico em sua vida, certo? Pois bem, e se
eu falar que existe um site que é só a imagem de um papel higiênico, você consegue imaginar como
é isso? Então imagine e crie na sua mente este site, continue a leitura e já, já você irá acessá-lo.
Entender o modelo mental é trabalhar a expectativa do usuário. Ou seja, ao acessar um
site, por exemplo, o que ele imaginará além da tela principal? Quais as funções imediatamente são
criadas em sua mente e como ele realizará isso. Esses modelos não precisam ser tecnicamente exatos,
mas devem ser funcionais. E a partir da interação com o sistema, a pessoa continuamente modifica
seu modelo mental a fim de chegar a uma funcionalidade que lhe satisfaça.
É importante entender que muitas vezes os modelos mentais podem levar a uma rejeição
prévia do seu produto. Um exemplo, se você tem uma barraca de cachorro-quente em determinada
região e uma pessoa comeu um cachorro-quente ruim nesta mesma região, porém não na sua
barraca, isso pode criar um modelo mental ruim para aquela pessoa sobre os cachorros-quentes da
região. Logo, é importante estar atento sobre erros de concorrentes que atuam com o mesmo
produto que você. Isso também vale para o mundo digital.

45
 Ah sim. O site lá do papel higiênico é esse aqui: [Link].

Fonte - [Link]
Figura 32: Modelo mental
Audiodescrição da figura: Na tela, ilustração em preto e branco de um gato no centro, na parte inferior, à direita uma
mulher observa o animal e acima de sua cabeça, uma nuvem com a ilustração de um gato numa almofada. À esquerda,
um homem observa o gato e, acima da sua cabeça, uma nuvem com gato segurando um rato. Fim da audiodescrição.

Design Thinking
De acordo com o Tim Brown, em seu livro Design Thinking – Uma Metodologia Poderosa
Para Decretar o Fim Das Velhas Ideias, o design thinking, traduzido em design pensado, tem duas
funções. A primeira é a de expandir o conceito de design para abarcar os desafios enfrentados pelos
negócios e pela sociedade; mostrando como uma abordagem criativa e focada na resolução de
problemas e no ser humano propicia a descoberta de soluções novas e mais eficazes.
Já a segunda é extrapolar as habilidades de um design, sendo disponível em qualquer área
e campo de atuação, desde que busque as melhores respostas para os desafios.
À primeira vista, parece uma repetição de algo que já foi estudado. De alguma forma é
verdade, mas o que nos interessa aqui é uma coisa: buscar soluções novas. Este é o foco do design

46
thinking. É um processo que busca a criatividade, onde problemas diferentes exigem abordagens
diferentes e a empresa que é capaz de moldar seu plano de ação, de acordo com a dificuldade
apresentada se destaca no mercado.
Temos alguns exemplos de grandes empresas que utilizam design thinking, como Netflix,
Natura e Havaianas. Mas o modelo não serve apenas para marcas multimilionárias. Como uma
decisão colaborativa, muitas vezes para o designer e consequentemente o web designer, é
importante ouvir e trocar ideias com outras funções.
Se você vai, por exemplo, desenvolver um site ou artefato qualquer para um restaurante,
além do dono do estabelecimento, talvez seja legal conversar com alguns garçons que poderão lhe
passar sugestões não apenas das comidas mais pedidas, mas também das que demoram mais a serem
preparadas, das mesas que são mais requisitadas e o/ou do perfil do cliente que dá mais gorjeta.
E o que isso significa?
Ao saber das comidas, você pode em algum tipo de criação destacá-las como as mais
saborosas, já que, se demoram mais, porém continuam sendo pedidas, é porque vale a pena. Ao
saber qual mesa é mais requisitada, você pode destacar este local numa imagem para o site, visto
que é o que os clientes gostam mais, e ao saber sobre o cliente que dá mais gorjeta, você pode
entender quais são os clientes que estão dispostos a pagar mais. Informação!

No entanto, como tudo que aprendemos, isso requer um método. Vamos conhecer os
principais:

Identificar onde encontrar oportunidades de inovação – Conhecer seus pontos fortes e

fracos e o dos seus concorrentes, as condições do ambiente e da sua localidade e as possibilidades
de aumento e diminuição do fluxo de clientes.
Descobrir a Oportunidade de Inovação – Autoexplicativo. Não dê um passo maior que as
pernas. No entanto, sempre que for possível inovar, inove e o mundo digital permite isso.
Testar as ideias — protótipos – Tendo a possibilidade de inovar e aplicar, tente! Seja com
sua família, amigos, mas teste algo que traga alguma inovação. Um aplicativo, um vídeo no YouTube.

47
 Figura 33 - Etapas para aplicar o design thinking
Fonte: [Link]
Audiodescrição da figura: Na tela, ilustração colorida com cinco cards com as etapas para aplicar o Design Thinking na
arquitetura corporativa, da esquerda para a direita, Empatia (em vermelho, com as informações, coloque-se no lugar do
outro), análise (em azul, com as informações, defina problemas a sanar e metas a alcançar), Brainstorm (em verde, e as
informações, com colegas, discuta os pontos fortes e fracos do projeto), desenho (em amarelo, com as informações,
coloque ideias no papel junto a bons parceiros ) e pós-ocupação (em vermelho, com as informações, permaneça em
contato com o cliente para ajustes e melhorias). Fim da audiodescrição.

UX:
Na outra competência fiz uma breve introdução ao UX: User eXperience (experiência do
usuário), lembra? Então o porquê de voltar a este assunto? Bem, falando como um designer, diria
que vamos imergir um pouco mais.

Figura 34 - UX o que é
Fonte: Própria
Audiodescrição da figura: Na tela, um título escrito Comportamento UX e abaixo quatro tópicos: pesquisa, protótipos,
personas e objetivo. Fim da audiodescrição.

48
 Além do UX, você já foi apresentado um pouco sobre todos os processos: pesquisa,
protótipos, personas e objetivos. Então, vamos entender como tudo junto forma o UX.
Quando um objeto digital é feito deve-se pensar no usuário. Ele, sua persona e público-
alvo (que são coisas diferentes), deve ser o foco da sua produção. E a experiência dele através do
serviço que é oferecido por você não ocorrerá apenas em uma ocasião.
Ou seja, se eu tenho um aplicativo ou site de vendas e aplico de forma correta muito do
que a gente viu aqui, é provável que a UX seja boa. Mas é importante saber se ela foi aplicada em
todo o processo. Exemplo, se você compra algo pela internet obviamente espera receber e se a
empresa lhe dá um prazo, você espera que ela cumpra. Certo? No entanto, se isso não ocorre, a culpa
é do web designer? Não. Mas ele é capaz de facilitar essa boa experiência.
E como ele pode fazer isso? Respondo: Pensando em meios de resposta que vão além do
site ou do aplicativo e que sejam práticos e eficientes aos usuários. Por exemplo, pensando em
promoções, através da criação de landing page que faça com o que usuário continue buscando sua
empresa ou numa resposta rápida ao problema e que seja encontrada de forma fácil.
Outro exemplo, se alguém te indica um canal de esportes no YouTube ou um podcast,
quando você vai buscar é fundamental que você consiga encontrar as informações de forma coesa,
intuitiva e fácil. Qualquer dúvida não respondida, dificuldade de navegação ou ruído nesta jornada
pode ser um fator decisivo para você abandonar o serviço em questão.
Então, a grande responsabilidade de um designer UX é garantir que, a partir do momento
que uma pessoa acesse seu produto ou serviço, seja oferecido uma experiência de uso incrível.

Figura 35 - Dinossauro de jogo do google

Fonte: Própria
Audiodescrição da figura: Na tela, uma ilustração em preto e branco, da esquerda para a direita, de um pequeno
dinossauro a caminho de dois cactos. Fim da audiodescrição.

49
 Você provavelmente já viu esse joguinho do google quando não tinha internet, certo?
Caso não, veja aqui chrome://dino/. E o que ele traz de UX? Bem, tudo! Quando você não tem internet
e se abre uma possibilidade de passar o tempo em um joguinho viciante e extremamente
fácil/intuitivo, mesmo que você nunca jogue, em dois minutos aprenderá. Isso é pensar na
experiência do usuário.

Algumas vantagens do UX apontados pelo site hostinger:

Maior conversão de vendas - Clientes que têm uma boa experiência antes do estágio de
decisão, claramente também têm mais chances de converter e comprar.
Fidelidade e indicações - A fidelidade é alcançada quando ao sentir a necessidade da
próxima compra, a primeira memória que vem à cabeça do cliente é a sua marca e, com isso, ele
realiza compras recorrentes. Portanto, deixe boas lembranças na mente do seu consumidor fazendo
com que ele tenha ótimas experiências em todas as etapas do contato com a sua marca: escolha,
decisão de compra, aquisição e usabilidade do seu produto ou serviço. Dessa forma, além de ter um
cliente fiel à sua marca, você também terá um defensor, que a indicará aos amigos, familiares e
conhecidos.
Economia de recursos - Analisar a experiência do usuário resulta em um melhor
planejamento e reduz as chances de retrabalho, reduzindo custos e tempo dos funcionários
envolvidos.
Aumenta o valor percebido pelo produto - Uma boa experiência gera uma ótima
sensação que vem acompanhada de um “Nossa, valeu muito a pena essa compra!”. É o momento em
que você supera as expectativas que o cliente tinha ao adquirir o seu produto e aumenta o seu valor
agregado, que vai além do seu custo monetário.

Confira no segundo podcast da competência um pouco mais sobre UX e UI

50
 Gestalt
Esta estranha palavra alemã que não tem tradução é uma teoria fundada pelo
psicólogo Max Wertheimer através de uma pesquisa de orientação, compreensão e interpretação da
nossa visão e da forma como enxergamos as coisas.
Ele vai dizer que a percepção de uma totalidade, um rosto humano, por exemplo, não se
pode reduzir à soma dos estímulos percebidos, pois ela extrai propriedades particulares de seu lugar
e função em cada um deles. De acordo com ele, isto ocorre, pois nosso cérebro utiliza parâmetros de
leitura visual, ao enxergarmos um composto de elementos onde a tendência é agrupar características
que sejam semelhantes, de forma que sua interpretação seja a mais rápida possível.
Então, segundo a Gestalt, ao observarmos um objeto, primeiro o compreendemos como
um todo, antes de notar seus elementos separadamente.
Para isso foram citados oito princípios/leis. São eles:
Pregnância (ou boa forma), Unidade, Segregação, Proximidade, Semelhança,
Unificação, Continuidade e Fechamento.

Figura 36 - Coelho aparece no céu

Fonte: [Link]
Audiodescrição da figura: Na tela, fotografia colorida, imagem do céu, fundo azul e nuvens brancas. No centro, uma
nuvem em formato de um coelho. Fim da audiodescrição.

51
 Não tem quando a gente fica vendo objetos, animais ou pessoas em nuvens?
Pois bem, isso tem relação com o Gestalt. No entanto, para melhorar a sua
percepção, a explicação desses princípios/leis será realizada na videoaula da
competência. Vá lá e confira!

52
 UNIDADE 03 | Avaliar a usabilidade e ergonomia visual nos sites e
artefatos da web

3.1 Avaliar princípios da usabilidade

Na primeira competência falei sobre usabilidade, que, rememorando, é o termo usado

para descrever a qualidade da interação dos usuários com uma determinada interface. Esta qualidade
está associada aos seguintes princípios:
• Facilidade de aprendizado;
• Facilidade de lembrar como realizar uma tarefa após algum tempo;
• Rapidez no desenvolvimento de tarefas;
• Baixa taxa de erros;
• Satisfação subjetiva do usuário.

Também vimos alguns exemplos negativos e positivos da usabilidade. Porém, na criação

de artefatos digitais um dos principais passos é a avaliação. Então como podemos avaliar
corretamente a usabilidade? Vamos ver.
As medidas de usabilidade mais importantes, inclusive homologadas pela International
Standard Organization (ISO), são efetividade, eficiência e satisfação. Nota-se que, com a inclusão do
quesito satisfação, entende-se como é importante ser considerada a atitude da pessoa que utiliza o
produto ou interface como um fator para a boa usabilidade. Para Jakob Nielsen, ser de fácil
aprendizagem, permitir utilização eficiente e apresentar poucos erros são os três aspectos
fundamentais para a percepção da boa usabilidade por parte do usuário.
Em geral, problemas de usabilidade são identificados apenas durante a utilização da
interface, em situações e contextos de utilização especiais. A maioria dos autores concorda que o
processo de desenvolvimento de interfaces com usabilidade, na web ou não, é um ciclo contínuo de
design e avaliações de usabilidade, como exposto abaixo.

53
 Figura 37 - Ciclo de vida do projeto com usabilidade
Fonte: própria
Audiodescrição da figura: No centro da tela, fluxograma na vertical, colorido, com o ciclo da usabilidade. De cima para
baixo, (conhecer usuários e suas tarefas; participação; avaliação da usabilidade e protótipo em trabalho e termina com
o produto final). Fim da audiodescrição.

Este ciclo tem início com a identificação de usuários, tarefas e requisitos para a aplicação.
Tais requisitos são utilizados como entrada para a construção de um protótipo que, em seguida, é
avaliado com relação a sua usabilidade. Os problemas de usabilidade identificados na avaliação são
solucionados na versão seguinte e uma nova avaliação de usabilidade se segue. O ciclo termina
quando nenhum problema for identificado.
O grau de severidade pode ser avaliado como relação ao impacto (grave, importante ou
impacto menor) sobre a realização de tarefas e frequência com o qual o problema ocorre. Embora
outras escalas para avaliar severidade possam ser utilizadas, sugere-se a escala de severidade
proposta por Woolrych e Cockton. Assim, com relação ao impacto, os problemas podem ser
classificados como:
• Grave: usuários precisam de mais de dois minutos sem progresso na realização da tarefa.
Usuários abandonam a tarefa ou demonstram estresse na realização da mesma. Usuários
não concluem a tarefa.

54
 • Importante: usuários gastam até dois minutos e obtêm êxito na realização da tarefa.
Usuários podem demonstrar stress visível ou perda de qualidade de interação.

• Impacto menor: usuários encontram o problema mas conseguem contorná-lo sem

prejuízo importante para a qualidade de realização da tarefa.

A segunda dimensão para determinar severidade é a frequência com que um problema

ocorre. Assim temos:
• Grande frequência: problemas ocorrem com mais de três usuários.
• Média frequência: problemas ocorrem com dois ou três usuários.
• Baixa frequência: problemas ocorrem com um usuário.

As medidas de usabilidade de eficácia, eficiência e satisfação podem ser especificadas

para objetivos maiores ou menores. Ao selecionar medidas de usabilidade para os objetivos mais
importantes do usuário pode ser necessário ignorar algumas das funções, mas provavelmente esta
seja a abordagem mais prática. Vejam exemplos de medidas mais práticas:

Objetivos da Modelos de Eficácia Medidas de Medidas de

usabilidade eficiência satisfação

• Porcentagem de • Tempo para • Escala de

objetivos completar uma satisfação
alcançados tarefa
• Frequência de
• Porcentagem de • Tarefas uso
- Usabilidade global usuários completadas por
completando as unidade de • Frequência de
tarefas tempo reclamações

• Média de • Custo monetário

acurácia de da realização da
tarefas tarefa
completadas

Tabela: 2 – Práticas de usabilidade

Fonte: o autor

55
 Avaliação e testes
Para avaliar a usabilidade existem diversos métodos. Os mais importantes, e que
conheceremos um pouco mais são a Avaliação heurística e a classificação/ordenação de cartões (card
sorting). Ambos os métodos contam com a participação de usuários e caracterizam-se pelo uso de
questionários ou observação direta ou indireta de usuários durante a utilização da interface, como
fonte de informações que possam levar à identificação de problemas.
A avaliação heurística é o método mais tradicional de avaliação de usabilidade. Ele foi
desenvolvido pelo supracitado Nielsen e por Rolf Molich. Seu objetivo é a inspeção sistemática da
interface do usuário com relação à sua usabilidade. Seu procedimento básico é o seguinte: um
avaliador interage com a interface e julga a sua adequação comparando-a com princípios de
usabilidade reconhecidos, as heurísticas. Nielsen sugere um conjunto com 10 recomendações para
guiar a avaliação, são elas:
Simplicidade e Naturalidade: as interfaces de usuários devem ser a mais simples possível,
combinando as tarefas do usuário de forma a simplificar o mapeamento entre os conceitos
computacionais e os do usuário.
Falar a Linguagem do Usuário: A terminologia da interface deve ser baseada na
linguagem do usuário e não no sistema. Ou seja, o que às vezes é o mais fácil de fazer, no que diz
respeito ao design em geral do produto, não necessariamente é o melhor. Além disso, as informações
devem ser organizadas conforme o modelo mental que o usuário possui do domínio. Observe sempre
quesitos como hierarquia e categorização.
Minimizar a Sobrecarga de Memória do Usuário: Deve-se buscar elementos de diálogo
para o usuário e permitir que o mesmo faça suas escolhas, sem a necessidade de lembrar deste ou
daquele comando específico. Aplique a Regra dos Sete Mais ou Menos Dois itens e de três cliques.
Consistência: Se os usuários souberem que um mesmo comando ou uma mesma ação
terá sempre o mesmo efeito, eles ficarão mais confiantes. Ou seja, não coloque caminhos não levam
a lugar nenhum.
Disponibilize apenas o que esteja pronto.

56
 Figura 38 - Site sem disponibilidade de informações
fonte: [Link]
Audiodescrição da figura: No centro da tela, site com a frase “Campanhas Salarias Educacionais” no centro e em caixa
alto, abaixo, menor, “em breve disponibilizaremos um histórico de diversas de nossas campanhas Salarias
Educacionais”. Fim da audiodescrição.

Feedback:
O sistema deverá informar continuamente ao usuário sobre o que ele está fazendo. A
informação, neste caso, é relativa à ação. Pensando em um site, por exemplo, é importante que o
clique leve prontamente à informação requerida.
Saídas Marcadas:
Fazer com que o usuário sinta que pode controlar o software e que não se perca ou perca
tempo realizando uma ação. Por exemplo, as caixas de diálogo devem possuir um botão Cancelar
para abortar uma tarefa.

57
 Figura 39 - Erro de usabilidade no site da Caixa
Fonte: Tadifícil
Audiodescrição da figura: No centro da tela, imagem do site da Caixa Econômica Federal, com todos os menus e
categorias, ao centro uma caixa com a palavra “a busca deve ser efetuada com 3 caracteres, abaixo um círculo com
quatro números digitados. Fim da audiodescrição.

Atalhos: Apesar de ser possível operar a interface conhecendo-se apenas algumas regras
gerais, é importante também ser possível para o usuário experiente executar mais rapidamente
operações através de atalhos.
Exemplo: Você sabia que apertando os números 1-9 você pode saltar para 10% ou 90%
da duração total de vídeos no YouTube? Ou seja, se você está vendo um vídeo de 10 minutos e quer
passar para o nono minuto é só apertar o número 9. Pode fazer o teste.
Boas mensagens de erro: Erros acontecem, no entanto as mensagens avisando devem
seguir duas regras: linguagem clara e sem códigos.
Ajuda e Documentação: O melhor é que um software ou hardware seja tão fácil de usar
que não necessite de ajuda ou documentação. No entanto, se preciso, esta ajuda deve estar
facilmente acessível de forma on-line.

58
 Prevenir Erros: E como fazer isso? Com uma boa avaliação de usabilidade. Lembrem que
este processo é um ciclo contínuo.
Para testar e verificar se você está cometendo erros ou acertos, ou mesmo qual a melhor
opção de layout/artefato/site, você pode aplicar diversos testes remotamente através de aplicativos.
Estes testes podem ser feitos com funcionários da empresa, de preferência os que não
tenham familiaridade com o produto, com familiares, amigos, etc. Um deles é simples, apresente seu
projeto e verifique para onde os participantes estão olhando numa única página e quais são as
principais dúvidas. Se eles conseguem fazer algo simples como, por exemplo, comprar algo com
facilidade.
Outro tipo de teste importante é o teste A/B. É simples, se a marca/produto tiver mais
de uma versão para algum tipo de peça, esse recurso permitirá experimentar as duas possibilidades
(ou mais, porém de preferência duas) simultaneamente para saber qual delas trará os melhores
resultados.

Figura 40 - projeto de um teste A/B

fonte: [Link]
Audiodescrição da figura: No centro da tela, imagem com fundo azul, acima escrito “Tráfego 200 visitantes”, abaixo a
ilustração de dois jornais, com A e B ao seu lado, abaixo deles o número de vendas com uma seta para a figura do lado
direito com VERSÃO CAMPEÃ. Fim da audiodescrição.

59
 Este teste pode ser feito, de preferência, através da plataforma Google Website
Optimizer ou da Optimizely. As duas plataformas também permitem outros tipos de análises mais
completas de usabilidade. Por estar interligado ao Google Analytics o Google Optmizer talvez seja a
melhor pedida.

Card Sorting
Outra metodologia para se testar e avaliar a usabilidade é o Card Sorting ou ordenação
de cartões. Este processo não é tão diferente da estruturação hierárquica que falo na competência
2. No entanto, ela possui um foco maior no Design Thinking, do qual também falo na competência 2.
Esta metodologia permite que os usuários possam opinar e organizar as informações da
maneira como eles as enxergam. Com isso, os profissionais têm material para definir a melhor
organização com base nos padrões dos usuários

As etapas
Antes de começar a sessão de Card Sorting, é importante realizar um inventário de
funcionalidades e conteúdo do projeto. Com elas, você irá compor um card, que pode ser
representado por meio de material físico (Ex.: post-its ou mesmo pedaços de papel) ou por meio
digital. Existem ferramentas on-line que ajudam nesse processo, como por exemplo o ConceptCodify.
O conjunto de cards é então apresentado aos usuários e então eles devem reagrupar os
diferentes cards de acordo com o seu ponto de vista e de forma coerente. E isto pode ser feito de
duas formas.

Card Sorting aberto

O usuário dispõe de cards que representam o conteúdo ou funcionalidades do projeto.
Então, o usuário reagrupa as informações e define o rótulo para cada um dos grupos de acordo com
o seu ponto de vista. Este processo é mais utilizado no começo de um projeto.

60
 Figura 41 - modelo de Card Sort
Fonte: autor
Audiodescrição da figura: No centro da tela, uma sequência de três cards. O primeiro, da esquerda para a direita, de
cima para baixo, “mato, avião, ônibus, folha, rã”. Em seguida, cards estão misturados, nos outros eles estão divididos
em grupos de três. Fim da audiodescrição.

Card Sorting Fechado

Já no Card Sorting fechado, os rótulos dos grupos são fornecidos aos usuários e eles
devem organizar dentro dos grupos já definidos pelo organizador.

61
 Figura 42 - Modelo de Card Sort
Fonte: autor
Audiodescrição da figura: No centro da tela, uma sequência de dois cards. O primeiro, da esquerda para a direita, de
cima para baixo, “ mato, avião, ônibus, folha, rã”. Em seguida, cards estão misturados, nos outros eles estão divididos
em colunas. Fim da audiodescrição.

Ainda existe o modelo híbrido. Aqui vocês aprenderam com um exemplo prático
de um modelo de card sorting da Claro:
[Link]

3.2 Acessibilidade

No segundo podcast da Disciplina Fundamentos do Design Gráfico e Composição Visual

foi falado um pouco sobre a importância da acessibilidade e seu uso em aspectos ligados à teoria das
cores e tipografia. Porém, como é possível avaliar se seu projeto digital, principalmente um site, é
acessível?
Em primeiro lugar é importante destacar que quando se fala em acessibilidade não diz
respeito apenas a pessoas com deficiências, que, obviamente, fazem parte, mas também a pessoas
com algum tipo de limitação tecnológica. Por exemplo, aparelhos celulares um pouco mais antigos.
Mas como é possível avaliar a acessibilidade? Vamos lá conhecer algumas dicas.

62
 Existe um processo, mais ligado a desenvolvedores, que como sabemos não é a mesma
coisa que web designer, que diz respeito a verificações utilizando ferramentas que validam o código
HTML e CSS com base nos Padrões Web do W3C.
No entanto, para quem não é programador, existem alguns avaliadores automáticos de
acessibilidade como o AccessMonitor e o ASES – Avaliador e Simulador de Acessibilidade, que são
bem simples. Após inserir o link da página a ser avaliada, os avaliadores de acessibilidade geram um
relatório detalhado dos problemas encontrados. A tela que segue, mostra um relatório de
acessibilidade gerado pela ferramenta onde é possível clicar em cada erro ou aviso para maiores
detalhes.

Figura 43 – ASES – Avaliador e Simulador de Acessibilidade em Sítios

Fonte: [Link]
Audiodescrição da figura: No centro da tela, tela do site do Avaliador e Simulador de Acessibilidade em Sítios. Fim da
audiodescrição.

63
 Figura 44 - Teste de acessibilidade no ASES
Fonte: [Link]
Audiodescrição da figura: No centro da tela, tela do sites com gráficos com a avaliação do site da Educação de
Pernambuco. Fim da audiodescrição.

Além da avaliação automática, também é possível verificar de forma manual a

acessibilidade do seu projeto digital, conferindo, além do que diz respeito a cores e tipografia, como
citado anteriormente, aspectos de usabilidade como a verificação da disponibilização de
documentos, tabelas e formulários e a possibilidade de alternativas em multimídia. Também pode-
se observar se determinados conteúdos disponíveis em áudio e vídeo possuem transcrições textuais,
legendas, audiodescrição e alternativa em Libras (Língua Brasileira de Sinais).

Através do Portal do Governo Federal, existem manuais de apoio para

realização e análises de acessibilidade.
[Link]
apoio

3.3 O que é Ergonomia Visual

De acordo com o dicionário Michaelis, a Ergonomia é o estudo científico da engenharia

industrial, em conjunto com anatomistas, fisiologistas e psicólogos, para estudar a relação do homem

64
com as máquinas em seu ambiente de trabalho. Até a década de 1970, se voltava mais para a
interação homem-máquina e atualmente se direciona para a interação homem-computador.

Figura 45 - As disciplinas que contribuem para a interação homem-computador

Fonte: Própria
Audiodescrição da figura: No centro da tela, fluxograma em preto e branco, circular, de cima para baixo, Psicologia
organizacional e social, Ergonomia e fatores humanos, Engenharia, Design, Sociologia, Filosofia, Linguística, Inteligência
artificial, Ciência da computação, Psicologia cognitiva. No centro da imagem, (homem-computador).
Fim da audiodescrição.

A definição de ergonomia poderia ser a de “ciência do trabalho”. Ela deve ultrapassar as

oposições acadêmicas entre as disciplinas científicas que fazem do trabalho e do trabalhador o seu
objeto de estudo, como a anatomia, a fisiologia, a toxicologia, a psicologia, a sociologia, a
administração, etc. Para o design, a ergonomia representa uma fonte de informação científica
essencial para o desenvolvimento de objetos, sistemas e ambientes e, nesse sentido, pode ser
definida como o estudo das interações.

Mas vamos entender melhor neste vídeo curtinho como a ergonomia está
presente em nossa vida:
[Link]

65
 No contexto da ergonomia visual, encontra-se também os conceitos de usabilidade, que
é a medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos
específicos como eficácia, eficiência e satisfação em um contexto específico de uso, como define a
ABNT.
Neste sentido, entende-se que a abordagem da ergonomia visual considerando os
aspectos da legibilidade e os elementos gráficos para tanto, tais como forma do texto, cores
utilizadas, ilustrações e composição gráfica.
Ou seja, da ergonomia de interface, o bem-estar humano está diretamente ligado ao
conforto visual, que, por sua vez, pode ser alcançado com os resultados das pesquisas pautadas em
novas tecnologias e por meio da adequação técnica do layout, permitindo atrair e agradar de forma
segura e funcional, diz Júlia Abrahão – autora do livro Introdução à ergonomia: da prática à teoria.
Sobre este assunto, o autor Gavin Ambrose afirma que informar, orientar, entreter, guiar
e cativar são funções essenciais a serem definidas para dar finalidade ao layout. Desta forma, a
compreensão de como o ser humano percebe e reage aos estímulos visuais é uma atividade técnica
mensurável que contribui para a área específica de conhecimento denominada ‘ergonomia cognitiva’.
Ainda de acordo com Ambrose, para garantir a qualidade técnica da comunicação visual
deve-se conhecer alguns princípios básicos do layout na inserção de elementos em uma página:
colunas e espaços; escala; alinhamento; imagens; hifenização e justificação; ritmo; hierarquia da
informação e rótulos. Alguns destes temas já foram vistos em disciplinas e competências anteriores.

O conceito de ergonomia e como ela implica na Experiência do Usuário (UX) será

o tema do podcast da competência. Não deixe de conferir.

66
 Figura 46 - Tabela Ergonomia
Fonte: Própria
Audiodescrição da figura: No centro da tela, fluxograma em preto e branco. Da esquerda para a direita, uma sequência
que vai da ergonomia, concepção (análise ergonômica do trabalho informatizado), (abordagem centrada no usuário),
(utilização e funcionamento), (semiótica computacional), (ciências cognitivas), (critérios e recomendações). Correção
(técnicas de avaliação: checklist ergonômico, testes de usabilidade, avaliação heurística e etc.). Fim da audiodescrição.

Já o autor João Filho Gomes, no livro Ergonomia e Design Gráfico: Sistema Técnico de
Leitura Ergonômica, defende a utilização do sistema técnico de leitura ergonômica que, segundo ele,
é um conjunto de conceitos aplicável a qualquer análise ou projeto ergonômico, sobre qualquer tipo
de produto ou sistema de objetos, no seu todo ou em partes específicas.
O sistema técnico de leitura ergonômica, sugerido por Gomes quanto à percepção visual
e recebimento de informações, baseia-se na definição de quatro códigos visuais:
1. Tipográfico: que diz respeito à família de letras, números e outros sinais e caracteres;
2. Morfológico: organização visual da informação, diagramação e Leis da Gestalt
(Unidade, Segregação, Unificação, Fechamento, Continuidade, Proximidade, Semelhança
e Pregnância da forma);
3. Cromático: definição e utilização das cores; e
4. Tecnológico: Processos de produção, reprodução e transmissão da informação.
Ou seja, a base dos códigos definidos por João Gomes é um convite a releitura de algumas
competências da qual passamos. Com a fusão destas técnicas é possível aplicar métodos para passar

67
sua mensagem de maneira eficaz e não confusa, facilitando a compreensão do usuário na busca por
uma informação mais direta e simples.
O método de análise ergonômica possibilitará você analisar e verificar muito do que
aprendemos ao longo da disciplina.

Após passar por estas competências e entender um pouco sobre Web

Design, não deixe de conferir nossa última videoaula e relembrar alguns
processos e sua utilização

Já que é um curso técnico, nada melhor do que encerrar com uma entrevista
com um profissional da área. Então não deixe de conferir no AVA este bate-
papo.

Confira mais sobre o curso de Multimídia em nosso Instagram: @multimidiaetepac!

68
CONCLUSÃO

Ao longo dessas três competências, você aprendeu alguns processos para criação de
produtos para web.
Em mundo cada vez mais digital, é necessário não só aprender alguns processos de
criação, como formas de avaliação e aplicação. Estes métodos farão de você um profissional
multimídia melhor, até porque ser multimídia é exatamente querer entender diversos processos e
aspectos da criação de artefatos.
Então, neste caderno, foram apresentadas técnicas do web design, como arquitetura da
informação, usabilidade, linguagem de marcação e processos de acessibilidade, que possibilitem a
construção de artefatos que sejam o mais efetivo, eficiente e satisfatório ao usuário.
No entanto, assim como as análises de usabilidade, o processo de aprendizado não se
finda. Então, se você gostou do caderno ou de algum tema em especial, continue pesquisando, pois
o mundo digital é amplo e sem barreiras.
Espero que você tenha aprendido e gostado. Este e-book foi feito com o melhor design
thinking possível.

Até mais!

69
REFERÊNCIAS

ABRAHÃO, Júlia. Introdução à ergonomia: da prática à teoria. São Paulo: Blucher, 2009.

AMBROSE, Gavin; HARRIS, Paul. Layout. Porto Alegre: Bookman, 2012.

BATISTA, Claudia Regina; RIBAS Ulbricht, Vania. Discussões sobre o perfil do designer de interfaces
web. Revista Design em Foco, vol. III, núm. 2, julio-diciembre, 2006,Universidade do Estado da Bahia
, Brasil Disponível em: < [Link] >. Acesso em: 27. Jul.
2021.

BENETTI, Rodolfo. Entenda o que são landing pages e por que elas são importantes para seu negócio!.
Orgânica Digital, 2021. Disponível em: < [Link]
landing-pages-e-por-que-elas-sao-importantes-para-seu-negocio/ >. Acesso em: 30, jul. 2021.

BRACHT, Fabio. Medium seu próximo blog. Tecnoblog. 2013. Disponível em: <
[Link] >. Acesso em: 12, jul. 2021.

BROWN, Tim. Design Thinking: Uma metodologia poderosa para decretar o fim das velhas ideias. 1
Ed. São Paulo: Alta Books, 2009. Disponível em: <
[Link]
ntcover&source=kp_read_button&redir_esc=y#v=onepage&q&f=false >. Acesso em 22, jul. 2021.

CIRIACO, Douglas. Qual a diferença entre Internet e World Wide Web?. Canaltech, 2016. Disponível
em: <[Link]
>. Acesso em: 8, jul. 2021.

DE SOUZA, Ivan. Saiba o que é UI (User Interface) e a importância dele para os clientes. Rockcontent.
2020. Disponível em: < [Link] >. Acesso em: 12, jul. 2021.

EDUARDO, Carlos. Teste de Usabilidade de Site: Tudo o que Você Precisa Saber. Hostinger. 2019.
Disponível em: < [Link] >. Acesso em 28.
Jul. 2021.

FERNANDEZ, Amyris. Modelos Mentais: o que você precisa saber para fazer UX. Amyris-Fernandez.
2019. Disponível em: < [Link]
para-fazer-ux/ >. Acesso em: 22, jul. 2021.

FLANAGAN, David. JavaScript: O Guia Definitivo. 6 ed. Porto Alegre: Bookman, 2013.

GINGER, Serge. Gestalt uma Terapia do Contato, 4 Ed. São Paulo: Summus, 1995. Disponível em: <
[Link]
-BR&gbpv=1&dq=Gestalt+uma+terapia+do+contato.&printsec=frontcover >. Acesso em 24, jul. 2021.

70
GOGONI, Ronaldo. O que é blog?. Tecnoblog. 2019. Disponível em: <
[Link] >. Acesso em: 12, jul. 2021.

GOMES, João Filho. Ergonomia e Design Gráfico: sistema técnico de leitura ergonômica. Disponível
em: < [Link]
[Link] > Acesso em: 30. Jul. 2021.

GOMES, Carolina Fernanda; REIS, Helena Macedo. Marketing digital: sites x redes sociais no Brasil. In:
Revista Interface Tecnológica da FATEC Taquaritinga. p. 53-62,jun. de [Link] online2447-0864.
Disponível em: <[Link]/Interfacetecnologica>.Acesso em: 6, jul. 2021.

GONÇALVES, Tássio. Entendendo de uma vez o que é UI Design e UX Design. Videosdeti. 2019.
Disponível em: < [Link]
>. Acesso em: 13, Jul. 2021.

GUIA DE WEB SEMÂNTICA. NIC, 2015. Disponível em:

<[Link] Acesso em: 6, jul. 2021.

GRANT, Will. UX Design Guia Definitivo com as Melhores Práticas de UX. 1 Ed. São Paulo: Novatec,
2019. Disponível em: <
[Link]
BR&gbpv=1&dq=usabilidade+web+ux&printsec=frontcover >. Acesso em: 17, jul. 2021.

JÚNIOR, Miguel Benedito Furtado. XML - Extensible Markup Language. Grupos de Teleinformática e
Automação/ Universidade Federal do Rio de Janeiro. Disponível em: <
[Link] >. Acesso em: 12. Jul. 2021.

LISBOA, Ândlei. Por que criar Personas?. [Link]. 2017. Disponível em: <
[Link] >. Acesso em 22, jul. 2021.

O que é UX – User Experience. Hostinger, 2018. Disponível em: <

[Link] >. Acesso em 26, jul. 2021.

OLIVEIRA, HPC, VIDOTTI, SABG, e BENTES, V. Arquitetura da informação. In: Arquitetura da

informação pervasiva [online]. São Paulo: Editora UNESP; São Paulo: Cultura Acadêmica, 2015, pp.
43-74. ISBN 978-85-7983-667-1. Available from SciELO Books . Acesso em 20, jul. 2021.

NEIL, Theresa. Padrões de Design para Aplicativos Móveis. 1 ed. São Paulo: Novatec, 2012.
NOGUEIRA, Caio. Web Designer X Desenvolvedor Web: saiba as diferenças. Upsites, 2016. Disponível
em: < [Link] >. Acesso em: 6, jul. 2021.
ORIGEM DA PALAVRA DESIGNAR. Origem da Palavra, 2021. Disponível em:
<[Link] Acesso em: 8, jul. 2021.

PIMENTA SOARES, Marcelo; Winckler, Marco. Avaliação de Usabilidade de Sites Web. Instituto de
Informática – UFRGS. Porto Alegre. Disponível em: < [Link]
[Link] >. Acesso em 27. Jul. 2021.

71
SANTANA, Flávio. Card Sorting: a arquitetura de informação construída pelos usuários. Coletivoux.
2017. Disponível em: < [Link]
informa%C3%A7%C3%A3o-constru%C3%ADda-pelos-usu%C3%A1rios-54b9f892e38e >. Acesso em
30. Jul. 2021.
SANTOS, Robson. Abordagem heurística para avaliação da usabilidade de interfaces. Rio de Janeiro,
2000. Dissertação de Mestrado. PUC-Rio, Pontifícia Universidade Católica do Rio de Janeiro.
SILVA, Maurício Samy. Web Design Responsivo. 1 Ed. São Paulo: Novatec, 2014. Disponível em: <
[Link]
BR&gbpv=1&dq=site+responsivo&printsec=frontcover >. Acesso em: 12, jul. 2021.

THOMAS, H. Ecologia da informação: por que só a tecnologia não basta para o sucesso na era da
informação / Thomas H. Davenport, Laurence Prusak; tradução Bernadette Siqueira Abrão. — São
Paulo: Futura, 1998. Disponível em: < [Link]
[Link] >. Acesso em 27. Jul. 2021.

WOEBCKEN, Cayo. Design Thinking: uma forma inovadora de pensar e resolver problemas.
Rockcontent. 2019. Disponível em: < [Link] >. Acesso em
26, Jul. 2021.

WOOLRYCH, A.; COCKTON, G. (2001) Why and when five users aren’t enough. In proceedings... IHM-
HCI 2001. Lille, França.

XAVIER, Thiago. O que a arquitetura da informação? Entenda esse conceito e suas aplicações.
Rockcontent. 2018. Disponível em: < [Link]
>. Acesso em 26. Jul. 2021.

72
MINICURRÍCULO DO PROFESSOR

David J. C. de Santana

Sou graduado em Jornalismo (Uninassau), com mais

de 10 anos de experiência na área, uma pós-
graduação em Mídias Digitais (Estácio) e outra em
Ciência Política (UNICAP) e atualmente cursando
licenciatura em Letras (UFPE) e, cada vez mais,
curtindo bastante vivenciar com vocês o curso
técnico de Multimídia.

73