Usabilidoido: Menu Principal

English Website


Efeito de virar página é enervante

Flash designers são tão fascinados pelo efeito de virar a página que já vi pelo menos uns 5 diferentes por aí, a maioria enervante. O último que vi me motivou esse post porque realmente consegue ser o mínimo usável possível. Quanto mais ao pé-da-letra for uma metáfora (representação de uma coisa real), pior ela fica. Ao invés de aproveitar o conhecimento prévio que o usuário tem sobre como manipular a coisa, ela reproduz as mesmas dificuldades encontradas no objeto original.

Quem é que gosta de folhear um livro atrás de um parágrafo específico? Imagine se o livro não tivesse índices e nem números nas páginas. Mais difícil ainda! Quando estamos na Web, estamos sempre atrás de informações específicas, do mesmo jeito. No livro ainda podemo abrir uma página aleatória, mas nesse exemplo que passei acima, é preciso folhear uma por uma.

Folhear com o dedo é mole: lambe o dedo e em frações de segundo, temos a próxima página. No exemplo, é preciso arrastar o mouse da ponta inferior direita da página até pelo menos a metade da página. Já vi exemplos piores, que era necessário arrastar até o outro lado da página.

Não sei onde que li que o browser poderia ter efetivamente uma transição de virar a página entre cada URL que o usuário visita. Seria interessante para entreter o usuário nesses tempos de velocidades baixas. Creio que nunca foi implementado pelo custo de processamento que isso teria. Isso também vale para peças em Flash, realmente o resultado final fica meio pesado se o conteúdo das páginas é mais complexo.

Na primeira vez em que apliquei esse efeito, aprendi a lição. Deu mais trabalho de Actionscript do que pensava para controlar a superposição de páginas e o efeito fica lento demais em computadores menos turbinados. Nesse projeto mais recente, adotei uma transição mais simples, que dá a idéia de que foi virada a folha, sem impedir que o usuário continue a leitura imediatamente após virar a página.

O website do jogo Zelda (seção "Cast", pena que não dá pra linkar :P) também usa o efeito, mas ativado com clique único sobre botões avançar / voltar. É legal, mas não precisava ser tão ao pé da letra, porque mesmo no meu micro, fica lento


Dicas

Siga-me no Twitter ou no Facebook ou no LinkedIn.

Autor

Frederick van Amstel - Quem? / Contato - 25/03/2004

Palavras-chave

metáfora    livro    brochura    

Opções



Comentários

Discussão
Washington d.c.
18/07/04 às 02:44

mas esse efeito não é pra se fazer em todo o site, é apenas uma "graça" a mais, pra ser implementada em um catálogo ou um livro de visitas por exemplo.


Discussão
Hitech
30/11/04 às 08:45

Estou interessado em fazer esse efeito, one posso encontrar um tutorial ou explicacoes sobre como fazê-lo.


Discussão
Cristiano
01/12/04 às 09:27

Na minha opinião qualquer efeito é enervante. Essas gracinhas podem até funcionar em sites de cartão virtual ou algum específico como esse seu exemplo do fichario que tem tudo a ver. Mas passou disso é só um atrazo de vida. Abaixo ao flash!!!


Discussão
carlos
05/12/04 às 21:22

Estou a Tirar um curso de Bibliotecário e adorava apresentar o meu projecto final com este efeito. Se alguém souber onde existe um tutorial a explicar gostaria que me mandessem um email a dizer, ficaria muito agradecido.
carlos Capm5@hotmail.com

Portugal!!!


Discussão
Fred
05/12/04 às 21:52

Sei que estava difícil de encontrar, porque não havia link direto, mas o primeiro exemplo deste post tem o código-fonte aberto:

http://www.iparigrafika.hu/pageflip/pageflip_v2_source.zip

Aliás, esse exemplo agora não tem mais os problemas de usabilidade graves que haviam motivado esse post.


Discussão
Diego Camargo
29/03/05 às 14:57

poxa estou querendo colocar esse efeito em meu site... não o site assim mais sim um mini livro q tenhu, ele tem cerca de 35 paginas...

mais não tenho um grande conhecimento em flash... vcs poderiam me ajudar a identificar onde eu colocaria as paginas para passar esse efeito ?!?!

Estou aguardardando uma responsta...


Obrigado desde já !


Discussão
Fabiano Cruz
30/03/05 às 00:28

Risos. É engraçado demais a questão do "acesso rápido via cuspe" numa folha aleatória em contraponto a um estilo de 'pageflip' da vida. Seus posts realmente são únicos Fred. :))

E se não bastasse todas as versões que encontramos na rede, o governo também tem sua versão digital com pageflip no endereço:

http://www.brasil.gov.br/prestandocontas/index_rev.asp

A grande diferença para mim, nesta revista digital do governo, fica na navegação mais simplificada, baseada em folheação rápida por índice e clique nas páginas para ampliar o conteúdo.


Discussão
Luiz
30/03/05 às 09:01

Esse efeito da página do brasil.gov, é bem interessante, pois com um clique é possível passar para a próxima página,(não precisa clicar e arrastar o que acho horrível!) o efeito de paginação é bem real da a impressão de que a página realmente esta sendo folheada, o que achei melhor foi a possibilidade de ampliar a página para se ter uma melhor leitura do conteudo, e a possibilidade de imprimir a mesma.

Mas o site do brasil.gov como um todo é uma porcaria quase impossível de visualizar aquino meu firefox 1.0...


Discussão
Rafael
30/03/05 às 09:16

Realmente, o efeito é bem interessante, mas como disse o próprio Fred. É para ser usado as vezes e em um ou outro serviço, porque além do trabalho que se da programando e tudo mais, temos que pensar em usuários de acesso discado, que não tem a paciência para esperar uma coisa deste tamanho ser carregada, e outra, tem aquele usuário que quase não usa o computador na net, não esta acostumado com esse tipo de efeito e acaba desistindo de entrar no site, por achar que ele não faz nada.
Esse do brasil.gov, pelo amor de Deus o cara que propós isso deve ser morto junto com o webmaster que aceitou a idéia sem explicar ou ao menos tentar argumentar que isso não era para qualquer usário.


Discussão
Fred
30/03/05 às 16:26

Olha só... os caras da DigitalPages conseguiram vender a sua invenção para o governo! Enquanto países desenvolvidos se preocupam com acessibilidade, o governo brasileiro se preocupa em fazer uma apresentação "inovadora" para sua prestação de contas.

Do jeito que está parece que eles querem esconder alguma coisa, com toda aquela letra miúda. Vocês experimentaram ler uma página inteira daquele brochureware? É muito desconfortável.

Já havia escrito um post comentando o formato da DigitalPages. Vale à pena conferir:

http://www.usabilidoido.com.br/catalogos_impressos_na_web.html

"A possibilidade de dar zoom em áreas de interesse é malograda porque não é possível identificar o conteúdo das áreas para julgar se é interessante ou não. A única pista que temos é o visual geral da páginas, mas isso é muito pouco. Ficar dando zoom e voltando em vão até achar algo que preste, é deveras cansativo."


Discussão
Denilson Vasconcelos
10/06/05 às 04:38

Muito interessante o efeito. Mas acho q deve ser aplicado apenas nas áreas q tenham haver com o tipo (livro, catalogo, etc) pra q o efeito faça valer.

Um abraço!


Discussão
Jone
17/06/05 às 09:45

O 1º efeito é o melhor!
Porém creio que este tipo de efeito ou de formato de página é legal para ser usado como no post acima em casos específicos, dependendo do público que irá acessar... no site do governo por exmplo é ridiculo! Além de feio a valer não tem nada haver com a proposta do site que é informar...

Belo fórum esse, parabéns!



Discussão
Armando
09/08/05 às 09:47

Tutorial of pageflip effect (spanish)

http://www.criteriondg.info/wordpress/articulos/pageflip-anadir-paginas/

and

http://www.criteriondg.info/wordpress/articulos/pageflip-contenido-dinamico-y-redimensiones/


Discussão
Allan
19/08/05 às 11:17

Minha nossa, gostaria de saber quem foi que deu ao autor deste texto o posto de colunista. Pois ele não estudou nem um pouco o objeto de estudo do artigo, no caso, o script do Pageflip.
Caso ele fizesse a lição de casa, notaria que o movie linkado ali em cima é um exemplo de como o script funciona, e é obrigatório virar as páginas para se chegar ao fim. Mas, ao chegar no final, existe um pequeno índice, no qual é possível voltar as volhas automáticamente clicando no link respectivo da página desejada.
No momento em que o script for utilizado para um fim específico, é tranquilíssimo criar um índice no qual as pessoas podem simplesmente clicar na página desejada e ir direto a ela!
Isso não justifica o uso abusivo de tais scripts de pageflip, mas acredito que o senhor em questão autor da matéria deveria ter se esforçado um pouco mais antes de publicá-la.
grato.


Discussão
italo
04/10/05 às 19:47

Ola,
apesar de ser criticado, o pageflip é legal.
Para quem esta estudando o Flash como eu,
gostaria de ter este tutorial.
Poderia me ajudar pois quero ver minhas paginas virando mesmo que seja para treino.

Muito obrigado.


Discussão
giu
06/03/06 às 16:59

ah meu caro...

a soberba sim é "enervante"!


Discussão
Bruno Dario
25/07/06 às 11:53

Na verdade.. acho que agora já está faltando originalidade.
De qualquer maneira, usei o pageflip para apresentar um catálogo de uma empresa que lida com serviços industriais e que tinha em seu público-alvo um público acostumado aos catálogos impressos.

O Pageflip só enerva quando não é bem aplicado, quando o desenvolvedor o usa apenas por usar.


Discussão
pw
12/10/06 às 21:19

Cadê o tutorial


Discussão
Daniel Medina
18/11/06 às 16:26

LOL


Discussão
Tarcisio Dias
19/11/06 às 20:08

Olá turma,
São válidos os comentários. Gostaria de saber se entre a navegação entre uma página e outra, é possível, por exemplo, colocar um vídeo, de forma que ao clicar e a nova página surgir, possa rolar direto um vídeo, ou mesmo ficar preparado para que o usuário dê um play e rode o vídeo.
Aproveitando, estou precisando de alguém já familiarizado com o pageflip para desenvolver um projeto base.
Favor entrar em contato com mecanicaonline@gmail.com
Abraços


Discussão
Juliano Oliveira
01/12/06 às 19:12

Pow Fred, não é a primeira vez que eu vejo vc misturando as estações... hehehehehe

A casos e casos para uma implementação desse tipo...

A que vc sitou que foi sua ultima implementação desse tipo... Não dá impressão alguma que vc esta lendo um livro... ou foleando um.. simplesmente que vc esta trocando de tela... assim como qualquer interface RIA...

Claro que vc naum vai implementar uma coisa dessas num site Folha de Sao Paulo pro cara se sentir lendo o Jornal deles e talz..

Mas pra algum público específico.. seria legal.. pra chamar a atenção deles.. e o usuário até memorizar o site que ele entrou.. onde havia um efeito muito bacana...

No exemplo que vc criou.. Eu não gostei.. na verdade me senti até confuso com aquela troca imediata das paginas (telas)

Mas é soh minha opnião...

[]´s


Discussão
soares
07/04/07 às 11:51

achei esse muito interesante, folhear bem real com video vejam!!!!

http://www.dtcom.com.br/


Discussão
Fred Lima
21/08/07 às 18:59

o melhor de todos:
http://www.ideafixa.com
é uma digital magazine, então tem tudo a ver e o efeito foi usado apropriadamante...


Discussão
Deraldo Nascimento
02/10/07 às 09:39

Como ja disseram o efeito não é para ser usado em todo o site e apenas em situações especificas, como catalogos por exemplo, cabe ao webmaster saber utilizar de forma inteligente. no primeiro exemplo citado as folhas também são viradas ao dar um clique duplo sobre a ponta da folha. uma Dica é colocar um campo de busca para acrecentar usabilidade ao efeito.


Discussão
marcel
21/07/08 às 18:27

LEgal é esse site que não tem nada de bonito, acho que cada um escolhe o seu caminho, se vocÊ faz programação não deve opinar sobre escolha de design ou a forma que alguém faz a criação pois pelo visto não conhece nada de estética.

Não vi a pagina o link tá quebrado mas sinceramente eu gosto muuuito de sites em flash, acho muito mais bacanna principalmente em se tratando de sites empresariais onde o conteudo é praticamente irrelevante, pois na maioria das empresas pequenas e de médio porte há muito pouca informação a se disponiblizar em um site...

Pelo menos todos que eu fiz é assim tem muita imagem e muito pouca informação, o cara vende vassoura, qual a grande quantidade de informações que haverá nesse site, é mais mesmo as fotos das vassouras e um canal para o contato.

E ainda mais que ninguém lê se o texto for longo...

Mas no caso de sites como esse também existem bons layouts...

Visite: www.vistaicons.com e veja se não é bem bacanna...

É html mas é show de bola...

Abraços

Espero que divulgue esse comentário...


Abraços

Marcel


Discussão
Marcel
21/07/08 às 18:40

NO caso do comentario do cara sobre o jornal folha, so enfatizando que por enquanto né..., lá pra 2010 quem sabe tem net fodaça pra todo mundo e as maquininhas já tão melhorando... quem sabe...

Abraços

Marcel


Discussão
Liliqn
07/08/08 às 13:58

Olá,

Onde posso conseguir o software grátis do flash page flip, preciso fazer um trabalho de apresentação.
Por favor me ajude.
Abraço.


Lilian


Discussão
kleber
14/10/08 às 18:36

Lilian

Pode conseguir o efeito com o código aberto aqui:
http://www.pageflip.hu/

abraço


Discussão
tiago
05/03/09 às 14:19

como faz para adicionar um video a uma page flip?


Discussão
thais
23/10/09 às 16:03

olha eu gostaria ter instruções sobre como faço o efeito que se encontra no site msn que é de folha virada quando eu passo o mouse eu ja procurei na net mas não encontro e eu gostaria muito de aprender a fazer..
desde já agradeço.


Discussão
thais
29/10/09 às 15:35

ola eu gostaria de saber onde encontrar um tutorial de como fazer esse efeito de folha virada no flash.
pois eu achei muito legal quando o vi no site msn.
se de me envie no meu email msm.
desde já agradeço.




Comente.






(aguarde que é demorado mesmo...)

Pegue um fruto.


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato