USABILIDADE APLICADA A ELEMENTOS

DE INTERFACE

Caros alunos, nessa aula veremos conceitos e diretrizes de usabilidade

aplicadas e elementos de interface, tais como imagens, animaes, vdeos, etc. Se
ao final desta aula tiverem dvidas, vocs podero san-las atravs das ferramentas
frum ou quadro de avisos e chat.
Comecemos, ento, analisando os objetivos e verificando as
sees que sero desenvolvidas ao longo desta aula.
Bom trabalho!

Objetivos de aprendizagem:
Ao trmino desta unidade, o aluno ser capaz de:

Entender a definio de Design e Web Design;

Conhecer os principais conceitos sobre a Teoria de Gesltalt;

Aplicar os conceitos das Leis da Gestalt para construir leiautes;

Possuir embasamento terico para construir pecas grficas para

ambientes digitais.

SEES DE ESTUDO:
Seo 1 Usabilidade Aplicada a Elementos de Interface
Seo 2 Imagens
Seo 3 cones
Seo 4 - Animaes
Seo 5 Vdeos
Seo 6 Barras de Rolagem
Seo 7 Formulrios

SEO 1 Usabilidade Aplicada a Elementos

de Interface
Nesta aula sero apresentados conceitos e diretrizes aplicadas aos principais
elementos de interface que compe o contedo editorial de um web site.

SEO 2 Imagens
O uso de imagens na Web torna o ambiente mais agradvel e interativo, no
entanto estas devem ser empregadas com muito critrio, pois o uso de imagens em
excesso e inadequadas a temtica do site, podem comprometer a funo esttica e
informativa, como tambm podem causar morosidade no carregamento da pgina.

Faa uma anlise da interface do website abaixo. Perceba que h alguns

problemas de usabilidade, como o excesso de imagens e informaes que
disputam a ateno do usurio.

Neste exemplo podemos perceber claramente que o excesso de imagens

comprometem a comunicao e a esttica do site. Ao observarmos este leiaute
percebemos que a estrutura informacional no est organizada de forma
hierrquica, pois a maior parte das imagens possuem o mesmo grau de destaque,
assim nenhuma informao de fato est destacada, sendo necessrio observar todos
os elementos que compe a interface para sabermos quais so os assuntos e
informaes mais relevantes.
Na web os usurios navegam de forma no linear e observam as principais
informaes na pgina, ignorando o restante do contedo, desta forma a interface
deve transmitir os assuntos prioritrios de forma clara e precisa, sem que o usurio
tenha que observar todos os elementos que a compem para assimila-los.

Imagens Bitmaps e Vetoriais:

Na computao grfica h dois tipos de arquivos de imagem: bitmap e
vetorial.
Imagens bitmap ou mapa de bits: so imagens desenhadas na tela por uma
matriz de pixels, que juntos compem imagem vista. As imagens bitmaps so
manipuladas por programas editores de imagens. Os programas mais conhecidos
que criam arquivos bitmap so: Adobe PhotoShop, Corel Photopaint, Corel Painter,
Corel Paint Shop Pro, Gimp e outros
Imagens Vetoriais: as imagens so compostas por vetores matemticos,
tais como curvas, elipses, polgonos, texto, entre outros elementos e podem se
redimensionar sem perder qualidade. Essas imagens so criadas em programas
como Corel Draw, Adobe Ilustrator, Macromedia FreeHand, flash entre outros. Os
programas mais conhecidos que criam arquivos vetoriais so: CorelDRAW,
Illustrator, Freehand, RealDraw, Xara , Inkscape, entre outros.

Quanto ampliao: bitmap x vetorial:

Quando ampliamos uma imagem bitmap ela perde qualidade, pois este tipo
de arquivo constitudo por um nmero fixo de pixels e ao ampliarmos a imagem,
o nmero de pixels continuar o mesmo, o que acarretara na perda de qualidade. J
as imagens vetoriais refazem os clculos matemticos que descrevem suas linhas
curvas quando a imagem ampliada, assim a imagem sempre permanecer ntida,
sem perda de qualidade. Veja o exemplo de uma imagem vetorial e bitmap
ampliadas. Note que ao ampliarmos a imagem vetorial este no perder qualidade,
o mesmo no acontece com a imagem bitmap, que ficar pixelada.

As imagens vetoriais so amplamente utilizadas em produtos de mdia

impressa, j arquivos bitmaps so mais adequados para serem utilizados na web,
embora os formatos vetoriais como SVG e SWF so suportados pelos navegadores.
Para saber mais sobre o assunto faa leitura do artigo
Diferena entre Arquivo Bitmap e Arquivo Vetorial
postados na plataforma em Materiais de Aula.

Formatos de arquivos mais populares na Web

Na web h uma grande variedade de formatos de arquivos, para diferentes
finalidades, especificaes tcnicas e tipos de compresso. Nesta sesso sero
apresentados somente os formatos mais populares e amplamente utilizados na web,
tais como SVG, PNG, GIF, JPGE e BMP.
SVG - Scalable Vector Graphics ou, em portugus, Vetor Grfico
Redimensionvel. Podemos definir SVG como um mapa XML1 que descreve
matematicamente formas vetoriais e grficos bidimensionais estticos ou
dinmicos.
Exemplo: a figura abaixo foi criada no software Ilustrador, que um
programa de edio de imagens vetoriais, e salva no formato SVG. Ao salvarmos a
imagem podemos verificar o cdigo XML gerado.

XML, do ingls eXtensible Markup Language, uma linguagem de marcao

recomendada pela W3C para a criao de documentos com dados organizados hierarquicamente,
tais como textos, banco de dados ou desenhos vetoriais.

Imagem
vetorial:

Cdigo XML gerado:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export
Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="200px" height="200px" viewBox="0 0
200 200" enable-background="new 0 0 200 200"
xml:space="preserve">
<circle fill="#00D1FF" stroke="#4291E2" strokewidth="16" stroke-miterlimit="10" cx="99.677"
cy="99.935" r="75.244"/>
</svg>

SVG um padro open source2 proposto pela W3C, e uma das grandes
tendncias no momento devido ao aumento na qualidade de resoluo de
dispositivos digitais e o uso de design responsivo para projetar interfaces. O SGV
redimensionvel, ou seja, se comporta como uma imagem vetorial, assim cones
e imagens se ajustaro a qualquer interface sem perder qualidade, desta forma uma
imagem poder ser exibida perfeitamente em um smartphone ou um aparelho de
TV de 48 polegadas.
Para criar designs responsivos em que as imagens devem se
redimensionar necessrio a utilizao de medidas relativas
como EM e porcentagem.
O formato SVG pode ser utilizado em imagens, filtros, animaes, scripts e
outros elementos interativos. Recomenda-se a utilizao do formato SVG em cones
e logomarcas, pois quando utilizado em imagens grandes o tempo de carregamento
da pgina ficar comprometido.
No entanto somente os navegadores modernos aceitam o formato SVG de
forma nativa ou atravs de bibliotecas JavaScript.
Para saber mais sobre o assunto faa leitura dos seguintes
artigos postados na plataforma em Materiais de Aula:

Imagens em alta resoluo utilizando SVG

Como Inserir SVG no HTML

O termo Open Source ou em portugus, Cdigo Aberto, foi criado pela OSI (Open Source
Initiative) e refere-se a software tambm conhecido por software livre.

PNG - Portable Network Graphics, um padro open source e possui alta

compresso, ou seja, permite comprimir as imagens sem que haja a perda de
qualidade. O formato PNG possui uma compresso de imagem mais eficiente em
comparao com o formato JPEG, no gerando perda de qualidade a cada
salvamento, mantendo-se fiel a imagem original.
O formato PNG tambm capaz de salvar imagens com fundo transparente
atravs do canal alfa. Diferentemente da transparncia do GIF, o canal alfa permite
definir o nvel de opacidade de cada pixel, adequando-se a qualquer plano de fundo,
deixando os contornos mais suaves e evitando serrilhados. Ex:

WebP um novo formato de imagens do Google que utiliza tcnicas do

codec de vdeo VP8 para compresso com at 34% a menos de perda de qualidade
em comparao com os formatos PGN e JPGE. O formato webP tambm suporta
transparncia atravs do canal alfa (lossless) com apenas 22% de bytes adicionais.
Veja o comparativo entre as imagens abaiso:

Fonte: https://developers.google.com/speed/webp/?hl=pt-BR&csw=1

Segundo o Google, 65% dos dados trafegados pela Web correspondem a

imagens, neste contexto o novo formato visa reduzir o trafego de dados e aumentar
a velocidade de carregamento, j que h reduo do tamanho dos arquivos.
Para converter imagens PNG e JPEG em WebP a empresa disponibilizou
um conversor em sua pgina no endereo: https://developers.google.com/
speed/webp/download?hl=pt-BR

Para saber mais sobre o assunto, acesse o artigo

WebP o Novo Formato para Web, disponvel em:
https://developers.google.com/speed/webp/?hl=ptBR&csw=1

GIF (Graphic Interchance Format) um formato de armazenamento

de imagens que trabalha com uma paleta de 256 cores. A utilizao desse formato
recomendvel para imagens com cores chapadas3, como: desenhos, animaes,
imagens de textos e grficos, etc.
JPEG (Joint Photographic Experts Group) um formato de
armazenamento de imagens que trabalha com uma paleta de 16,8 milhes de cores.
A utilizao desse formato recomendvel para imagens com vrias tonalidades de
cores como: fotografias e imagens 3D.

Cores chapadas: Cor pura, continua ou uniforme.

Qual formato deve ser usado na web?

Ao avaliar qual o formato uma imagem deve ser salva considere o tipo de
imagem, a finalidade e o tamanho final (kb) do arquivo. Em uma fotografia grande,
por exemplo, podemos optar por JPEG ou PNG, no entanto o tamanho final do
arquivo do segundo pode ficar muito maior que o primeiro e a qualidade da imagem
ser similar. Ex:
JPEG

PNG

Tamanho do arquivo: 475 kb

Tamanho do arquivo: 815 kb

Quanto a opo pela densidade, a maioria do dispositivos ainda utiliza 72

PPI, no entanto os dispositivos modernos possuem uma densidade cada vez maior,
neste caso melhor avaliar qual dispositivo a imagem ser visualizada e o perfil do
pblico-alvo.

SEO 3 cones:

Na Semiologia4 cone uma imagem que mantm com um determinado

objeto uma relao de semelhana ou propriedade. Em sntese cone smbolo
grfico que representa algo concreto ou abstrato do mundo real.

Semiologia: a cincia geral dos signos e da semiose que estuda todos os fenmenos
culturais como se fossem sistemas sgnicos, isto , sistemas de significao. Fonte:
http://pt.wikipedia.org/wiki/Semiologia acessado em (29/11/13)

O cone deve transmitir a mensagem com bastante clareza, sem gerar

ambiguidade na interpretao do smbolo para que o usurio possa associ-lo a ao
que ser realizada.
Os cones so essenciais para a interao e navegao do usurio no website.
O correto emprego de cones na interface potencializa a experincia de uso de um
site, agilizando a navegao e tornando-a prazerosa.
Alguns cones possuem a simbologia bem aceita como, por exemplo, o
envelope para designar o e-mail, pois a sua funo intuitivamente assimilada
pelo usurio, desta forma utilize cones que j possuem convenes consolidadas
apenas para exercerem as funes que esto dentro das expectativas dos usurios.
A utilizao de cones na interface pode ser extremamente til, no entanto
utilize com moderao, pois em excesso pode poluir visualmente a pgina.
Os tamanhos mais comuns de cones so: 512 x 512 | 256 x 256 | 64 x 64 |
48 x 48 | 32 x 32 | 24 x 24 | 20 x 20 | 16 x 16

Os formatos de imagens e cones que podem ser utilizados na web so: PNG,
ICO, ICNS e SVG.

Dicas!
Veja alguns sites que disponibiliza galerias de cones grtis para
downloads.
SmashingMagazine
(www.smashingmagazine.com/2008/07/02/55-free-high-qualityicon-sets/ ) disponibiliza galerias de cones para download.
IconShock (http://www.iconshock.com/) disponibiliza galerias de
cones para download.
IconFinder (http://www.iconfinder.net) Neste site o usurio faz
uma busca textual e o site retorna os resultados encontrados.
Excelente!

SEO 4 Animaes
Animaes quando empregadas de forma adequadas, so excelentes
recursos visuais para orientar a navegao e deixar o ambiente mais ldico ou
interativo, tornando a experincia mais enriquecedora. Como qualquer recurso
grfico a animao deve atender as expectativas do pblico-alvo do site.
Recomendaes para o uso de animaes:
A palavra moderao: evite excessos de animaes e efeitos sonoros,
pois esses recursos podem causar cansao ou distrair o usurio, fazendo com que
este perca o foco da navegao no contedo.
Use preloader: principalmente nas animaes mais pesadas que requeiram
tempo maior de carregamento.
Evite repeties: evite que as animaes sejam executadas repetidamente
no site, principalmente quando o contedo for voltado a leitura. O uso de animaes
mais aceito em sites com contedo ldico ou em sites de jogos.
D oportunidade de escolha: quando as animaes so exibidas em
pginas inicias ou splash pages permita que o usurio faa a escolha em ver ou no
a animao.
No anime: logotipo, slogan e ttulos de sesses.
Para visualizar contedos multimdias (vdeos ou arquivos em flash)
preciso instalao de plug-ins5, nesta situao importante que o usurio tenha a
opo de aceitar ou no a instalao do programa.
O uso de recursos multimdias no site, principalmente em reas criticas
como menus de navegao, deve ser muito bem projetado, pois nem todas as

Plug-ins: so pequenos programas que otimizam as funcionalidades do

browser necessrios para exibio de arquivos como vdeo e udio.

pessoas podem efetuar downloads dos plug-is, por acessarem a internet de cafs ou
lan houses. Uma alternativa para amenizar tal problemtica oferecer aos usurios
a opo de acessar pginas que no precisam de plug-ins.

SEO 5 Vdeos
O uso de vdeos no contedo do site estreitam relaes entre usurio e site
humanizando o ambiente digital. Atravs dos vdeos possvel demonstrar produtos
e ambientes de maneira mais realista.
O YouTube, popular site de vdeos, um segundo site mais acessado na
web, o que denota claramente a predileo dos usurios por este formato de
contedo. Disponvel em: <http://www.tecmundo.com.br/internet/39476-vejauma-lista-com-30-dos-sites-mais-acessados-na-internet.htm>,

acessado

em:

29/11/2013.
Segundo uma pesquisa realizada pela Cisco Visual Network Index o acesso
vdeos em dispositivos mveis ultrapassou os 50% pela primeira vez em 2012.
Disponvel em: <http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/
ns537/ns705/ns827/white_paper_c11-520862.html>, acessado em: 29/11/2013.
O uso de vdeos nos sites integrado ao contedo editorial e ao modelo de
negcio, agregam valor a comunicao digital e tornam a experincia interativa
muito mais agradvel ao usurio.
Assim como as imagens e animaes o uso de vdeos deve estar adequado a
temtica do site. J o tempo de download um fator crtico que deve ser observado
com critrio, pois a morosidade no carregamento deste tipo contedo pode gerar
expectativas negativas no usurio.

SEO 6 Barras de Rolagem:

Algumas interfaces apresentam barras de rolagens customizadas, tal prtica
aceitvel desde que est no fique totalmente descaracteriza e no comprometa

sua funcionalidade. As barras de rolagens verticais nos permite visualizar os

contedos que esto abaixo da dobra da pgina. Sempre quando o contedo da
pgina exceder a rea de visualizao, a barra de rolagem deve ser disponibilizada,
evitando deslocamento automtico da pgina, pois os usurios se sentem mais
seguros durante a navegao quando controlam suas aes.
As barras de rolagem devem ser ocultas apenas quando todo o contedo
estiver visvel. Recomenda-se essa prtica, pois a exibio da barra far com que
usurio subentenda que existem mais contedos abaixo da dobra da pgina.

Dica!
Mostre todas as informaes importantes acima da dobra da
pgina. Os Usurios muitas vezes decidem permanecer ou no no
com base no contedo que eles podem ver sem se deslocar.
As barras de rolagem horizontais no so usuais e devem ser evitadas, pois
podem comprometer a acessibilidade6 do contedo para os usurios que possuem
uma m visibilidade espacial. Pessoas com deficincias motoras ou idosas tem
dificuldade em deslocar-se utilizando itens pequenos de deslocamento como a barra
de rolagem ou o teclado.
No entanto, em algumas solues como, por exemplo, sites de agncias de
publicidades, que trazem uma proposta mais ousada de interface direcionada a um
pblico especfico aceitvel o uso da barra de rolagem horizontal.

SEO 7 Formulrios
O preenchimento de formulrios na Web extremamente delicado, pois
nesse momento que o usurio se dispe a se relacionar com o canal ou empresa.
Qualquer falha ou situao inesperada pode gerar frustrao, levando o usuria a
interromper o preenchimento e abandonar o canal.

Acessibilidade a possibilidade e condio de alcance, percepo e entendimento para a

utilizao com segurana e autonomia de edificaes, espao, mobilirio, equipamento urbano, e
informaes.

Programadores e designer ao projetarem um formulrio devem observar

cada detalhe para que nenhuma falha ocorra, por isso importante o mximo de
cuidado ao elabor-los, prevendo todas as situaes para sanar e/ou minimizar os
possveis incmodos para que o preenchimento seja feito de forma segura e
confortvel.

Pontos crticos:
1) Tempo de preenchimento do formulrio: As maiorias dos usurios
no gostam de preencher formulrios, principalmente se eles forem
extensos. Formulrios que excedem a dobra da pgina s sero
preenchidos quando forem imprescindveis. Quanto maior a interesse de
estreitar relaes com usurios ou clientes, menor dever ser o tempo de
preenchimento.

2) Solicitao de informaes desnecessrias: No solicite aos usurios

informaes que no tero relevncia na relao que est sendo
estabelecida. Jamais solicite duas vezes a mesma informao, pois
tornar o preenchimento moroso e acarretar em armazenamento de
informaes desnecessrias.

3) Formulrios extensos: para no tornar o preenchimento exaustivo, o

formulrio deve ser dividido, pois ao secciona-lo o preenchimento se
tornar mais fcil e menos susceptvel a erros.

4) Formatao dos campos: O tamanho dos campos input deve

corresponder ao tamanho da informao que ser inserida, por Ex.: no
configure o campo estado que precisa apenas de 2 dgitos com um
tamanho que poderia caber uma palavra com 6 dgitos, isso poder
causar confuso no usurio e induzi-lo ao erro.

5) Falta de sinalizao em campos obrigatrios: Informe as pessoas no

comeo do formulrio que os campos sinalizados devem ser

obrigatoriamente preenchidos. Comumente os campos obrigatrios

possuem um (*) na frente ou so destacados por cores.
Caso o usurio no tenha preenchido um campo obrigatrio e tentar
preencher o prximo campo, o ponteiro do mouse deve ser redirecionada
para campo de preenchimento obrigatrio, assim como uma mensagem
deve ser enviada informando ao usurio que ele dever preencher esse
campo antes de preencher o prximo campo. No deixe o usurio
concluir o formulrio para somente assim validar os campos
obrigatrios, essa prtica no aconselhada.

6) No enviar mensagens de erro e alerta: As mensagens devem ser

enviadas sempre quando necessrias, e devem ser cordiais e sucintas
explicando claramente qual o erro cometido pelo usurio.
Mensagens que informam apenas um cdigo de erro devem ser evitadas.
Muitas vezes nem o desenvolvedor saber imediatamente do que se trata
o erro quanto mais o usurio.
Aps o envio de mensagens de alerta, os dados informados
anteriormente no formulrio no dessem ser apagados. As informaes
preenchidas corretamente devem ser mantidas, pois ser muito
desagradvel forar o usurio a refazer o preenchimento.

7) Campos no validados: a validao adequada dos campos do

formulrios reduz a possibilidade de erros acidentais e garantem boa
usabilidade aos formulrios.
Parece bvio que os campos devem ser validos, mas no o que
acontece na maioria das vezes; se os campos so destinados a Texto,
permita somente texto; se o campo for destinado a Nmeros permita
somente a nmeros; se houver um limite para a insero desses nmeros
faa-o; no caso de campos Data especifique o formato da data que voc
deseja utilizando mscara, por exemplo: dd/mm/aa ou dd/mm/aaaa; no
caso de nmero de telefone fornea a mscara para indicar a necessidade
ou no do usurio informar o DDD.

Atente-se as diferenas regionais que implicam em

tratamentos especiais para alguns campos, tais como o
campo Telefone.
O desenvolvedor de prever todas as possveis situaes que podem
permitir que o usurio erre e valid-las. Conscientize-se de que se o
usurio conseguiu preencher algum campo incorretamente certamente o
sistema no est validado suficientemente, deixando o usurio suscetvel
a falha. O sistema sempre dever adequar-se ao usurio e nunca o
contrrio.

8) No emitir mensagem de concluso de cadastro: importante que ao

concluir o preenchimento de um formulrio o usurio receba uma
mensagem informado se o cadastro foi efetivado ou no, assim o usurio
ter certeza de que conclui a ao corretamente, caso contrrio este
ficar inseguro se realizou ou no a ao corretamente.

Na prxima figura h um exemplo de formulrio que atende aos requisitos

de usabilidade e acessibilidade. Note que os campos obrigatrios esto
claramente sinalizados. As caixas de entrada de dados so adequadas ao
volume de dados que ser informado. Os campos esto organizados e
agrupados pelo grau de relacionamento entre eles. O distanciamento estre
os campos suficiente para que estes possam ser vistos de forma clara. No
campo em que solicitado o cdigo de segurana o web site disponibiliza
recursos de udio para que portadores de necessidades especiais possam
compreender o cdigo dado e informa-lo corretamente.

RETOMANDO A CONVERSA INICIAL

Parece que estamos indo bem. Ento, para encerrar esse
tpico, vamos recordar:

SEES DE ESTUDO:
Seo 2 Imagens:
O uso de imagens na Web torna o ambiente mais agradvel e interativo, no
entanto estas devem ser empregadas com muito critrio, pois o uso de imagens em
excesso e inadequadas a temtica do site, podem comprometer a funo esttica e
informativa, como tambm podem causar morosidade no carregamento da pgina.
Na computao grfica h dois tipos de arquivos de imagem:

Imagem Bitmap: so imagens desenhadas na tela por uma matriz

de pixels.

Imagem Vetorial: as imagens so compostas por vetores

matemticos, tais como curvas, elipses, polgonos, texto, entre
outros elementos e podem se redimensionar sem perder qualidade.

Os formatos mais indicados para serem utilizados na web so: SVG,

PNG, WebP, GIF e JPEG.

Seo 3 cones
cone smbolo grfico que representa algo concreto ou abstrato do mundo
real. O cone deve transmitir a mensagem com bastante clareza, sem gerar
ambiguidade na interpretao do smbolo para que o usurio possa associ-lo a ao
que ser realizada.
Os tamanhos mais comuns de cones so: 512 x 512 | 256 x 256 | 64 x 64 |
48 x 48 | 32 x 32 | 24 x 24 | 20 x 20 | 16 x 16

Seo 4 Animaes
Animaes quando empregadas de forma adequadas, so excelentes
recursos visuais para orientar a navegao e deixar o ambiente mais ldico ou
interativo, tornando a experincia mais enriquecedora. Como qualquer recurso
grfico a animao deve atender as expectativas do pblico-alvo do site.
Recomendaes para o uso de animaes:

Utilize animaes com moderao;

Use preloader;

Evite repeties intermitentes;

D oportunidade de escolha para que o usurio decida ver ou no a

animao.

No anime logotipo, slogan e ttulos de sesses.

Seo 5 Vdeos
O uso de vdeos no contedo do site estreitam relaes entre usurio e site
humanizando o ambiente digital. Atravs dos vdeos possvel demonstrar produtos
e ambientes de maneira mais realista, tornam a experincia interativa muito mais
agradvel ao usurio. Cuidado com o tamanho, pois a morosidade no carregamento
deste tipo contedo pode gerar expectativas negativas no usurio.

Seo 6 Barras de Rolagem:

Algumas interfaces apresentam barras de rolagens customizadas, tal prtica
aceitvel desde que est no fique totalmente descaracteriza e no comprometa
sua funcionalidade.
Sempre quando o contedo da pgina exceder a rea de visualizao, a barra
de rolagem deve ser disponibilizada, evitando deslocamento automtico da pgina.
As barras de rolagem devem ser ocultas apenas quando todo o contedo estiver
visvel.

Seo 7 Formulrios
O preenchimento de formulrios na Web extremamente delicado, pois
nesse momento que o usurio se dispe a se relacionar com o canal ou empresa.
Qualquer falha ou situao inesperada pode gerar frustrao, levando o usuria a
interromper o preenchimento e abandonar o canal.

Pontos crticos:

Tempo de preenchimento do formulrio

Solicitao de informaes desnecessrias

Formulrios extensos

Formatao dos campos

Falta de sinalizao em campos obrigatrios

No enviar mensagens de erro e alerta

Campos no validados

No emitir mensagem de concluso de cadastro

SUGESTES DE LEITURAS E SITES:

Leituras:
TIDWELL, Jennifer. Designing interfaces. Editora: O'Reilly.
KALBACH, James. Designing Web Navigation. Editora: O'Reilly.
MEMRIA, Felipe. Design para a Internet - Projetando para a
Internet. Editora: ED Campus.

Sites:
Diferena entre Arquivo Bitmap e Arquivo Vetorial:
http://www.olhonudesign.com.br/materias/vetorxbitmap.htm
Inserir SVG na HTML:

http://maujorsvg.com.br/fundamentos/inserir-svg-na-html.php
WebP o Novo Formato para Web:
https://developers.google.com/speed/webp/?hl=pt-BR&csw=1

REFERNCIAS:
TIDWELL, Jennifer. Designing interfaces. Editora: O'Reilly.
KALBACH, James. Designing Web Navigation. Editora: O'Reilly.
MEMRIA, Felipe. Design para a Internet - Projetando para a
Internet. Editora: ED Campus.
Obs.: Se ao final desta aula tiverem dvidas, vocs
podero san-las atravs das ferramentas frum ou
quadro de avisos e chat. Ou ainda podero enviar
para o e-mail renata@unigran.br