Movimento em interfaces

O ser humano esta sempre em movimento, seja através de suas ações premeditadas ou ações mecânicas, realizadas pelo nosso corpo. A verdade é que nunca estamos parados, o movimento é algo que pode prender a atenção ou nos dispersar, esta na arte, esta no esporte, esta na forma como nos comunicamos e expressamos uns com os outros.

Observando alguns sites e aplicativos mobile, percebi que ele esta extremamente presente nas interfaces, influenciando diretamente na forma como usuário irá interagir e julgar se sua experiência foi boa ou ruim. Como dito anteriormente, o movimento pode ajudar a estabelecer um foco no conteúdo, tornando-o mais imersivo, ou ainda, tornar a interação cansativa e dispersante.

Em interfaces touchscreen o movimento é muito mais perceptível e importante, porque temos um feedback visual de nossas ações em tempo real (na maioria das vezes), obviamente que as vezes esse movimento por si só não é explicativo o bastante, sendo necessário a utilização de mensagens e sons.

Em web sites voltados para desktop ou notebooks, a movimentação do mouse é livre, porém o percusso realizado na interface é mais linear, mas isto não o torna menos importante.

Exemplos Web

O Site de e-commerce do submarino é um bom exemplo de como elementos podem ser agregados ao movimento de uma forma que venha valorizar a experiência do usuário. Ao rolar o site para baixo, a barra de busca fixa que se encontra posicionada no topo do site é substituída por uma outra que acompanha esse deslocamento de uma área a outra. Como a leitura das informações neste caso se dá de cima para baixo, o seu posicionamento não prejudica ou gera uma quebra na leitura.

O Tbox na página inicial do Terra é o contrário do que vimos no exemplo anterior, apesar da ordem de leitura também se dar de cima para baixo, a barra de interação com outros usuários, foi posicionado na parte inferior da tela, o que resulta no corte de duas chamadas e obriga o leitor a sempre rolar a tela para baixo para dar continuidade a leitura.

A diferença

A diferença entre o movimento em interfaces móveis e interfaces voltadas para desktop e notebooks, é que em plataformas mobile e que sejam touchscreen envolvem a questão dos gestures, fazendo com que o usuário se sinta mais participativo e responsáveis pelo movimento. Em interfaces desktop essa sensação de participação é mais distante e as vezes mecânica e por isso, podem se tornar cansativos mais rapidamente.

Este site criado para demostrar as capacidades do HTML5 http://www.netlashproject.be/ é um exemplo de como o excesso de movimento pode ser cansativo, cada seção do site faz um movimento para uma direção diferente, nos primeiros acessos é muito legal, mas com certeza por não permitir uma maior interação do usuário, começa a se tornar uma ação repetitiva.

 Exemplo de movimento em interfaces Móveis

Um bom exemplo de como o movimento esta presente nas interfaces móveis esta neste vídeo de uma interface customizada para o Android Honeycomb.

Anúncios

1 comentário

  1. raphaellopes8 · setembro 12, 2011

    Bom texto Gabriel.
    Na área mobile, onde me sinto mais a vontade para comentar, o movimento e transição de cada tela é importantíssimo pois fornece dicas visuais para que o usuário saiba onde exatamente está e fornece informações sobre como a aplicação funciona e está organizada.

    A coerência entre as transições ajuda também a manter a consistência do app, o usuário se sente seguro dessa forma pois entende que o app está correspondendo às suas expectativas.

    Parabéns pelo texto, pelas dicas e continue postando!

    Abs

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s