7/24/2019 Ar Qu Ivo 2021968

1/21

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. Seao 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;

7/24/2019 Ar Qu Ivo 2021968

2/21

Possuir embasamento terico para construir pecas grficas para

ambientes digitais.

SEES DE ESTUDO:

Seo 1Usabilidade Aplicada a Elementos de Interface

Seo 2Imagens

Seo 3cones

Seo 4 - Animaes

Seo 5Vdeos

Seo 6Barras de Rolagem

Seo 7Formulrios

SEO 1Usabilidade 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 2Imagens

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.

7/24/2019 Ar Qu Ivo 2021968

3/21

Faa uma anlise da interface do website abaixo. Perceba que h algunsproblemas 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.

7/24/2019 Ar Qu Ivo 2021968

4/21

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. Osprogramas 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.

7/24/2019 Ar Qu Ivo 2021968

5/21

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.

1 XML, do ingls eXtensible Markup Language, uma linguagem de marcaorecomendada pela W3C para a criao de documentos com dados organizados hierarquicamente,tais como textos, banco de dados ou desenhos vetoriais.

7/24/2019 Ar Qu Ivo 2021968

6/21

Imagemvetorial:

Cdigo XML gerado:

SVG um padro open source2proposto pela W3C, e uma das grandes

tendncias no momento devido ao aumento na qualidade de resoluo dedispositivos 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 smartphoneou um aparelho de

TV de 48 polegadas.

Para criar designs responsivos em que as imagens devem seredimensionar necessrio a utilizao de medidas relativascomo 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

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

7/24/2019 Ar Qu Ivo 2021968

7/21

PNG - Portable Network Graphics, um padro open sourcee 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:

7/24/2019 Ar Qu Ivo 2021968

8/21

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=pt-

BR&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.

3Cores chapadas: Cor pura, continua ou uniforme.

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

7/24/2019 Ar Qu Ivo 2021968

9/21

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 3cones:

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.

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

http://pt.wikipedia.org/wiki/Semiologiahttp://pt.wikipedia.org/wiki/Semiologiahttp://pt.wikipedia.org/wiki/Semiologia

7/24/2019 Ar Qu Ivo 2021968

10/21

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 paradownloads.

SmashingMagazine(www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/) disponibiliza galerias de cones para download.

IconShock (http://www.iconshock.com/)disponibiliza galerias decones para download.

IconFinder (http://www.iconfinder.net) Neste site o usurio fazuma busca textual e o site retorna os resultados encontrados.Excelente!

http://www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/http://www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/http://www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/http://www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/http://www.iconshock.com/http://www.iconshock.com/http://www.iconshock.com/http://www.iconfinder.net/http://www.iconfinder.net/http://www.iconfinder.net/http://www.iconfinder.net/http://www.iconshock.com/http://www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/http://www.smashingmagazine.com/2008/07/02/55-free-high-quality-icon-sets/

7/24/2019 Ar Qu Ivo 2021968

11/21

SEO 4Animaes

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

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

browser necessrios para exibio de arquivos como vdeo e udio.

7/24/2019 Ar Qu Ivo 2021968

12/21

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: , 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: , 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 gerarexpectativas negativas no usurio.

SEO 6Barras de Rolagem:

Algumas interfaces apresentam barras de rolagens customizadas, tal prtica

aceitvel desde que est no fique totalmente descaracteriza e no comprometa

http://www.tecmundo.com.br/internet/39476-veja-uma-lista-com-30-dos-sites-mais-acessados-na-internet.htmhttp://www.tecmundo.com.br/internet/39476-veja-uma-lista-com-30-dos-sites-mais-acessados-na-internet.htmhttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.htmlhttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.htmlhttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.htmlhttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.htmlhttp://www.tecmundo.com.br/internet/39476-veja-uma-lista-com-30-dos-sites-mais-acessados-na-internet.htmhttp://www.tecmundo.com.br/internet/39476-veja-uma-lista-com-30-dos-sites-mais-acessados-na-internet.htm

7/24/2019 Ar Qu Ivo 2021968

13/21

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 acessibilidade6do 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 barrade 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 7Formulrios

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.

6Acessibilidade a possibilidade e condio de alcance, percepo e entendimento para autilizao com segurana e autonomia de edificaes, espao, mobilirio, equipamento urbano, einformaes.

7/24/2019 Ar Qu Ivo 2021968

14/21

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 deestreitar 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

7/24/2019 Ar Qu Ivo 2021968

15/21

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.

7/24/2019 Ar Qu Ivo 2021968

16/21

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.

7/24/2019 Ar Qu Ivo 2021968

17/21

7/24/2019 Ar Qu Ivo 2021968

18/21

RETOMANDO A CONVERSA INICIAL

Parece que estamos indo bem. Ento, para encerrar esse

tpico, vamos recordar:

SEES DE ESTUDO:

Seo 2Imagens:

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 3cones

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

7/24/2019 Ar Qu Ivo 2021968

19/21

Seo 4Animaes

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 5Vdeos

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 6Barras de Rolagem:

Algumas interfaces apresentam barras de rolagens customizadas, tal prtica

aceitvel desde que est no fique totalmente descaracteriza e no comprometasua 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.

7/24/2019 Ar Qu Ivo 2021968

20/21

Seo 7Formulrios

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://www.olhonudesign.com.br/materias/vetorxbitmap.htmhttp://www.olhonudesign.com.br/materias/vetorxbitmap.htmhttp://www.olhonudesign.com.br/materias/vetorxbitmap.htm

7/24/2019 Ar Qu Ivo 2021968

21/21

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, vocspodero san-las atravs das ferramentas frum ouquadro de avisos e chat. Ou ainda podero enviar

para o e-mailrenata@unigran.br

http://maujorsvg.com.br/fundamentos/inserir-svg-na-html.phphttp://maujorsvg.com.br/fundamentos/inserir-svg-na-html.phphttps://developers.google.com/speed/webp/?hl=pt-BR&csw=1https://developers.google.com/speed/webp/?hl=pt-BR&csw=1mailto:renata@unigran.brmailto:renata@unigran.brmailto:renata@unigran.brmailto:renata@unigran.brhttps://developers.google.com/speed/webp/?hl=pt-BR&csw=1http://maujorsvg.com.br/fundamentos/inserir-svg-na-html.php