Post on 20-Feb-2018
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=17/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/Semiologia7/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.htm7/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.htm7/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