Usabilidade no Flash
O Flash proporciona ao desenvolvedor total liberdade da forma que o conteúdo será apresentado, isto é ótimo quando o desenvolvedor sabe lidar com todas estas possibilidades, infelizmente são muito poucos os que realmente estão aptos a lidar com toda esta liberdade.
O uso do Flash em websites, tanto integralmente quanto parcialmente, foi taxado como um mal a usabilidade, enquanto que na verdade o grande vilão são os próprios desenvolvedores que desconhecem os princípios básicos da usabilidade. O Flash pode ainda proporcionar uma melhor usabilidade quando comparado a técnicas tradicionais, como é o caso do sIFR.
Abaixo listei alguns dos principais erros cometidos tanto por desenvolvedores novatos como pelos experientes. Logo após o texto, os comentários estão abertos para que a lista seja complementada, ou para que um ou mais tópicos sejam discordados.
-
Fontes
O tamanho da fonte é um grande problema, e deveria ser levado mais a sério, diversos designers utilizam fontes extremante pequenas pela estética, esquecendo-se de que a legibilidade e o acesso a informação devem ser prioridades, é que realmente interessam ao usuário. Fontes pixel tornam a situação ainda pior, principalmente quando são utilizadas em textos, são pequenas e ilegíveis. Este assunto me faz lembrar do post do Frederick sobre os “Designers analfabetos funcionais“.
This movie requires Flash Player 8. -
Links Fantasmas
É muito comum encontrar sites em Flash, que seja necessário ficar durante vários minutos com o ponteiro do mouse sobre o filme para verificar o que é ou não clicável. Além de menus, já citado aqui, que não possuem descrição alguma, forçando os usuários a clicarem nos botões para descobrirem qual ação será disparada.
-
Som
A ausência de simples recursos, como disponibilizar um meio do usuário pausar o áudio, pode tornar a navegação tão irritante, a ponto dos usuários não retornarem ao site. É interessante também que o site disponibilize opções que gravem as preferências dos usuários, para que em visitas posteriores não seja necessário realizar as mesmas operações, como por exemplo, ajustar o volume do áudio, ultima trilha selecionada ou se preferem visualizar o site com ou sem o áudio. O uso de efeitos sonoros em botões, movieClip e transições de seções, devem ser aplicados com bom senso, para que o filme não se torne intrusivo a ponto de incomodar o usuário.
This movie requires Flash Player 8. -
Componentes
Devido à liberdade proporcionada pelo Flash de se desenhar toda a interface, objetos simples como um campo de texto, barras de rolagem ou caixas de textos, são oportunidades potencialmente perigosas de se errar.
Designers devem ter muito cuidado ao personalizarem os componentes, na tentativa de se inovar, são cometidos erros graves, como barras de rolagens altamente finas, ou que se confundam com o layout a ponto de não serem notados.
Algo curioso, é o fato de muitos desenvolvedores não disponibilizarem barras de rolagem em textareas em formulários, prova de que até mesmo desenvolvedores experientes devem prestar muita atenção.
-
Skip Intro
As famosas Introduções em Flash surgiram em 1996, na época tantos os desenvolvedores, quanto menos os clientes tinham um bom entendimento de onde usar o Flash, e ainda hoje muitos não tem, e por ser algo novo, de alto impacto visual, ter um site como Flash, era sinônimo de status, o problema é que além de apresentações serem muito pesadas para usuários de conexão discada, não acrescentam nada, são diversas palavras “pulando na tela”, com alguns efeitos. Existem exceções, mas deve haver um grande trabalho para que uma apresentação agregue algo a marca ou passe realmente algum conceito, e ainda assim, os usuários desenvolveram uma intolerância a apresentações em Flash, que os levam logo ao “Skip Intro”.
Uma solução interessante para quando não restar opções a não ser inserir a bela animação de introdução, seria estruturar uma verificação no Flash, para que a apresentação seja exibida apenas na primeira visita, afinal está nas estatísticas, o usuário não costuma a ver a apresentação sequer uma vez. Este recurso pode ser facilmente implementado através da classe sharedObject.
A agência Skip Intro, elaborou uma medonha e divertida paródia sobre o assunto.
-
Layout Líquido
Quando se fala em layout líquido e Flash, geralmente se tem uma idéia errada, layout líquido no Flash funciona tão bem, ou melhor, que em HTML, basta entender que layout líquido no Flash não é colocar o filme para escalonar 100% no browser, esticando todo o filme, o Flash nos dá a possibilidade de projetar layouts líquidos e com muito mais controle que em HTML / CSS.
-
Mouse Over
Este ponto já é batido na usabilidade para sites estáticos, os links devem ser sublinhados e com estado over definido. Tudo bem que nem sempre influênciado pela estética é possível manter um sublinhado, ainda mais azul, mas nos contamos com outros recuros que vão sugerir ao usuário que aquela imagem ou texto possui um link, como cores, negrito, background, etc.
No Flash a situação é ainda mais difícil, pois Flash Designers geralmente deixam de adicionarem o estado over em links, quando se faz necessário o uso de programação, ou mesmo por comodidade, e é aqui que podemos deixar o usuário sem saída, o desenvolvedor pode-se esquecer da difereça dele entre o usuário comun, que não é tão íntimo ao funcionamento de um website, e a quebra de padrão como este podem confundi-lo.
Para os interessados em usabilidade no Flash, o material disponível sobre usabilidade para sites em geral podem ser aplicados no uso Flash. E quando se preocupa com usabilidade é bom saber que as vezes é preciso deixar de lado a estética, valhe a pena, basta manter os dois lados equilibrados.
Neste artigo foram listados apenas alguns dos tópicos de erros cometidos com mais freqüência no uso do Flash, estarei atualizando este post caso tenho algum tópico que deveria fazer parte da lista e não foi adicionado, e você mesmo pode sugeri-los nos comentários.
August 27th, 2006 at 11:37
Fala Érick, muito bom o topico. Usabilidade, por mais que tentamos escapar, mais cedo ou mais tarde você esbarrar nela.
Agora fiquei na dúvida, de qual é o pior dos piores… se é o audio ligado sem parar ou as famosas introducoes. Voto no audio. rs…
Bom, acho que esse também vale entrar na listinha:
8 - Menu de “Fale conosco” linkado pra um “mailto:email@email.com”.
O usuário clica pensando em abrir uma sessão do site, e se depara com a janela do Outlook. Isso em máquinas lentas, é terrivel.
Forte abraço brother.
August 28th, 2006 at 8:35
[...] Usabilidade no Flash [...]
August 28th, 2006 at 13:32
Muito bacana o novo visual.
Excelente artigo Erick, não tenho nenhum tópico a acrescentar, acho que você listou todos. Pra mim, as piores coisas são o item 2 (links fantasmas) e o som.
Grande abraço
August 28th, 2006 at 17:10
Muito bom o artigo, realmente dá par perceber que os problemas com usabilidade independem do sistema usado para desenvolver.
Legal também a demonstração do layout liquido.
Uma sugestão de tópico, como fica o quesito acessibilidade no flash?
Abraço, t+
August 28th, 2006 at 22:25
Bem lembrado Guilherme, isso liga também ao fato dos diversos erros cometidos na usabilidade de formulários em Flash, como validação, auxílio visual de onde foi preenchido errado, tabindex, etc.. já estou atualizando!
Roberlan: Obrigado Roberlan. Também detesto “Links Fantasmas”, clicar sem saber o que pode acontecer é ruim.
Bartus: Ótima sugestão Bartus, há algum tempo quero escrever sobre pelo fato de estar cansado de ler que o Flash não dá suporte algum a acessibilidade. Já está na lista aqui. Valeu!
September 10th, 2006 at 4:33
Opa… gostei do seu texto, inclusive linkei pra ele em um post meu… Não concordo contigo na parte que você fala que flash dá mais controle que html + CSS para layouts líquidos… Pelo contrário, já vi gente quase morrer pra colocar um site em flash que se adaptasse ao monitor (assim como já vi gente tendo problemas com css), mas não acho que o css “perca” em algo para o flash nesse quesito(claro, ele não suaviza o movimento, mas acho que a idéia de layout adaptável não é para os caras que ficam brincando de aumentar/diminuir a tela, e sim para adaptar-se a resoluções diferentes de tela).
Outro ponto que me incomoda (e muito) é o aviso para baixar o tal plugin do flash (afinal, o usuário sabe que ráios é esse plugin? e ele vai baixar o plugin do SEU site??)
Achei interessante a ideia de escrever sobre acessibilidade, me avise qndo escrever XD
bem, já falei demais =X
[]’s
t+
September 10th, 2006 at 4:35
[...] E mais um texto interessante que vi foi sobre esses erros cometidos ao se utilizar o flash, que apesar de eu não concordar com tudo o que está escrito aí, concordo com grande parte do texto. [...]
September 10th, 2006 at 10:58
Oi Rochester, o que eu disse é que o Flash dá mais controle, veja, eu posso determinar que dependendo do tamanho o objeto redimensione ou não, ou trocar a imagem, podemos criar um intelegência artificial podendo fazer o que quisermos.. você disse que viu designer’s/desenvolvedores com dificuldade, é preciso analisar se realmente tem o conhecimento necessário para programar, é o que vejo acontecer com nos webstandards, tem designer’s mexendo com CSS e não conhece ao menos uma propriedade.
Estive trabalhando no site de uma grande empresa do meio da moda, e fiquei surpreso ao saber das estatésticas do site, praticamente quase todos os visitantes possuem o Flash Player 8 ou 9, mais surpreso pelo fato de sabermos que o público alvo deste site, em uma grande parte já estão com o Flash Player 9, para quem trabalha com Flash isso deixa um grande sorriso no rosto.
September 13th, 2006 at 13:22
OLA ERICK, MUITO BOM O SEU SITE CARA…
EU LI O TÓPICO SOBRE LAYOUT LIQUIDO E GOSTARIA DE SABER COMO SE FAZ ELE… POIS EU TENHO UM SITE TODO EM FLASH E QUERO REDIMENSIONAR ELE COMO VC MOSTRA NO EXEMPLO. SE PUDER ME AJUDAR… OBRIGADO…
WEBER
September 18th, 2006 at 14:10
layout liquido é um bom topico
:nerd:
January 19th, 2007 at 22:33
OLA ERICK, eu achei muito interesante o layout líquido que você deixou como exemplo, eu gostaria de saber como fazer um layout líquido no flash?
att:
Rafael Furigo
April 10th, 2007 at 19:27
Olá Erick!
Sou um iniciado no flash e o seu blogo tem ajudado imenso.
Gostaria que me explicasse como se programa layouts liquidos em flash, ou seja, o filme ajusta-se ao tamanho do browser.
Abraços e continuação de um bom trabalho.
April 13th, 2007 at 10:34
gostaria de saber, ja falando em usabilidade, como faço para deixar uma musica leve no meu site?
qual procedimento que devo usar, ou fazer, para que ela carregue rapido?
obrigado,
Lucas
May 4th, 2007 at 18:43
Mto bom tópico Erick.
Estou pesquisando sobre layout líquido no Flash. Não encontrei nenhum exemplo, tutorial, nada… vc pode dizer como esse seu exemplo foi feito?!
obrigada
June 18th, 2007 at 14:38
eu gostaria de saber como eu faço para colocar um link nos filmes do flash
September 13th, 2007 at 10:03
Parabéns pelo artigo! Gostaria de saber se tem como você me enviar o arquivo .fla (em Flash MX) do exemplo que você deu de layout líquido. Tenho pesquisado muito isso, mas ainda não consegui um arquivo bom para estudar! Muito obrigado.
September 25th, 2007 at 11:55
Bom dia estou começando a trabalhar com flash e me interessei muito pela informação do layout liquido. Gostaria de saber se tem como me enviar um action de como eu posso fazer isso em meus sites.
Obrigado.
October 3rd, 2007 at 11:35
Cara
Muito bom esse artigo.
Parabens!
October 26th, 2007 at 12:14
No ar dia 01/11/2007…
A idéia é fazer Uma DIV centralizada encima de um flash liquido, assim consigo usar mu painel php, web 2.0, que não foi o caso neste exemplo e um fundo d flash ativo, com funcionalidades para resoluções como, 1024 ou a minha, 1280. gostaria de saber o quevc acha desta minha idéia.
Luiz..
July 8th, 2008 at 17:05
Parabéns Erick pelo blog. Nota 1.000! Vou fazer um pedido que todos já fizeram, ensina como fazer o Layout Líquido. Muito legal. Já fiz inúmeras pesquisas na net e ninguém consegue responder. Até discordo como alguns pediram para enviar o arquivo .fla, mas colocar um tutorial e ensinar as pessoas não custa nada né meu amigo!
Mta Saúde e Paz!
Abraços.