Ludicidade e Usabilidade Interfaces

Universidade do Minho
Instituto de Ciências Sociais
Departamento de Ciências da Comunicação

Professor Leonardo Pereira
Ano Curricular - 2013 | 2014

ATELIER AUDIOVISUAL E MULTIMÉDIA II - Multimédia
Curso de Ciências da Comunicação - 3º Ano | 1º Semestre

Aula 10

1. Ludicidade vs Usabilidade na interface de um Website


Módulo Multimédia
Atelier Audiovisual e Multimédia II - 2013 | 2014

01

O Flash e as interfaces de websites

leonardpeartree@gmail.com


Módulo Multimédia

Embora o Flash já tenha ocupado um lugar mais preponderante no desenvolvimento
de Websites do que o hoje ocupado, esta ferramenta continua ainda a ser utilizada em:
• Websites de portfólio;
• Websites de promoção pessoal;
• Microsites de produto;
• Banners animados, etc...
No entanto convém desde já esclarecer que o Flash não é a ferramenta indicada para
o desenvolvimento de websites com bases de dados e funcionalidades de interacção
interpessoal como as que encontramos no Facebook, Twitter, a Amazon, etc; pois, por
si, não permite a construcção deste tipo de estruturas mais dinâmicas e interactivas.



Módulo Multimédia

Qual a vantagem do Flash no desenho de interfaces para websites?

O Flash continua a permitir, aos seus utilizadores, a
criação, com relativa facilidade/rapidez (com poucos
recursos de programação e código), de interfaces
visualmente animadas e lúdicas.



Módulo Multimédia

ou seja...

Traz uma nova variável para a equação do Design
da interface de um website e para a experiência de
navegação/interacção vivida pelo seu utilizador:
Ludicidade!



Módulo Multimédia

02

Ludicidade e experiência de nav./interacção num website



Módulo Multimédia

O que é a Ludicidade no contexto da interface de um website?

Refere-se ao acrescento do factor “entretenimento“
e diversão na experiência de interacção vivida pelo
utilizador na navegação pelas áreas de um website
por meio da sua interface.



Módulo Multimédia

Que estratégias existem para atribuir ludicidade a uma interface?

Basicamente passam por:
• Animar os estados de Over e de Down de botões;
• Animar transições entre as páginas da interface;
• Criar intros animadas de abertura do website;
• Criar menus e interfaces contextuais;
• Utilizar princípios clássicos de animação na animação em geral do website.

Vamos ver exemplos!



Módulo Multimédia

Os Roll Overs animados

Os Roll Overs animados de botões são soluções lúdicas pois entretêm o utilizador
e estimulam a continuação da navegação pela página. Criam surpresa e,
consequentemente, curiosidade!

Vamos ver exemplos:
http://www.zunejourney.net/
http://www.animad.gr/#/en/home
http://www.bio-bak.nl/
http://waterdogworld.byethost13.com/



Módulo Multimédia

As transições animadas

As transições animadas são como os Roll Over animados de botões:
• Criam ambiências ou reforçam uma ambiência já existente;
• Acima de tudo tornam a navegação mais divertida e lúdica;
• Tem o mesmo efeito emocional sobre o utilizador que as escalas de plano e o
movimento de câmera têm sobre um espectador quando este está a ver um filme.

Vamos ver exemplos:

http://www.llr-hamburg.de/
http://www.workingelement.com/#/site/services
http://thetoke.com/
http://disneyworld.disney.go.com/new-fantasyland/
http://www.matthiasdittrich.com/
http://www.rokkaboy.com/
http://www.creanet.es/#
http://www.sarahcheng-dewinne.com/


Módulo Multimédia

Os menús lúdico-contextuais

Um menú contextual é um menú que não assenta na aglomeração de um conjunto de
botões numa barra de menú.
É antes um menú de navegação onde os botões que o compõem estão misturados e
embebidos num cenário e são elementos do mesmo.

Vamos ver exemplos:

http://www.liliaplanet.com/
http://www.animad.gr/#/en/home
http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html
http://www.theologos.gr/en.html
http://www.cheeseandburger.com/
http://jonathanhagard.com/tower/tower.html
http://www.chrisjockey.com/english/home.html



Módulo Multimédia

Princípios básicos da animação clássica

Tanto nas transições, como nos roll overs dos botões, como ainda nas animações dos
menús, são muitas vezes usados os Princípios básicos da animação clássica.

Relembrando os Princípios básicos de animação clássica:
1. Squash and stretch; 2. Anticipation; 3. Follow Through and Overlapping Action;
4. Arcs; 5. Timing; 6. Exaggeration; 7. Ease in e Ease out; 8. Timming/Motion.
Vamos ver exemplos:
http://www.thibaud.be
http://www.matthiasdittrich.com/
http://www.liliaplanet.com/



Módulo Multimédia

No entanto...

Não obstante a experiência lúdica que uma
interface pode oferecer ao seu utilizador na sua
navegação por um website, a sua eficácia não pode
nunca ser esquecida. E aí entramos no domínio da
chamada Usabilidade.



Módulo Multimédia

03

Usabilidade



Módulo Multimédia

Mas o que é a Usabilidade?

Estou aqui
Homepage

Sobre nós

Serviços

Galeria

Contactos

Mas vejo que posso ir para qualquer uma destas
páginas no website porque a interface assim mo
permite.

A Usabilidade é a propriedade ou capacidade que
a interface de um website possui de tornar fácil e
o mais eficiente possível, para o utilizador, a sua
navegação pelos conteúdos e páginas que formam
o website.


Módulo Multimédia

Como se dota de Usabilidade a interface de um website?

Através da criação de um sistema de referências
visuais (ou audiovisuais) funcional que nos diz
sempre onde estamos e para onde podemos ir, e
que nos permite navegar a qualquer outra página
do nosso website, independentemente da nossa
localização, a dado momento, dentro do mesmo
website, sem dificuldades.
Ou seja, através da criação de uma INTERFACE FUNCIONAL E FÁCIL DE USAR.


Módulo Multimédia

Vamos ver alguns erros comuns, em casos
específicos, que não devem ser cometidos!



Módulo Multimédia

Caso 1 - http://www.soulwax.com/2007

A interface deste website padece dos seguintes “defeitos”:

• Informação visual a mais;
• Falta de uma hierarquia visual clara;
• Não há um menú de navegação claro e organizado;
• Ao abrir pela primeira vez abre com uma pista de audio que é dificil de desligar;
• Alguns scrolls têm extensões desnecessárias;
• Interface pouco intuitíva e desconfortável;
• Navegação distribuída na horizontal;
• Botões interactivos inúteis e redundantes (Expand/Fold: sempre disponíveis ao
mesmo tempo. Quando a página está já expandida não é preciso o botão que a expande.);
• Inconsistência e incoerência na localização de botões interactivos;


Módulo Multimédia

Caso 2 - http://www.maisonmartinmargiela.com/en


• Inconsistência na lógica de funcionamento dos itens de menu (p.ex: “contact e stores“);
• Desconforto no acesso a alguns itens de menu por sobreposição dos mesmos
(p.ex: “e-boutique e universe“);
• Scrolls desactivos que induzem uma expectativa de interacção que é gurada;
• Demasiados passos para se retroceder, depois de visitada uma página, à página inicial
(implica fechar a janela nova que se abre sobre a página inicial);
• Botão de “home” muito discreto que está presente e activo quando é desnecessário e que
quando é necessário não cumpre com a sua função pois não fecha a janela aberta por
cima da janela inicial;



Módulo Multimédia

Caso 3 - http://benthebodyguard.com/

A interface deste website, apesar de oferecer ao utilizador uma experiência
interessante e lúdica, padece de um grande “defeito”:

• Mau uso de uma intro animada, que quando terminada, não exibe ao utilizador
e no espaço inicial do ecrã, os meios necessários para que o utilizador continue a navegar
pelo resto do website (É preciso fazer scroll down).
Se não repararmos no scroll do lado direito podemos nem sequer ver o resto do website!



Módulo Multimédia

Caso 4 - http://www.zincbistroaz.com/index.html

A interface deste website, apesar de globalmente não ter problemas assinaláveis
de usabilidade, padece de um “defeito”:
• Menu de conteúdos com localização inconsistente e com grafismo inconsistente.



Módulo Multimédia

Caso 5 - http://www.hboemtb.com/


• Não tem forma de se retornar à home page;
• O utilizador, uma vez dentro de uma das páginas do website, não sabe como navegar até
qualquer outra página;
• Inconsistência entre páginas (o botão “Brisbane Studio”, dentro de “Careers”, tem imagem
no Roll over. Mas Auckland “Studio” não!);
• Inconsistência entre comportamentos de botões (Nos roll overs de “History“ há imagens.
Nos de “Practice Statement“ não!);
• Imagens muito pequenas nos roll overs dos botões;



Módulo Multimédia

Mas como é que se desenha uma interface com Usabilidade?

1.

Testando-a junto de uma amostra de utilizadores para detectar os erros de usabilidade
e, assim, corrigi-los;

2.

Não cometendo os erros antes descritos relativos aos casos dos sites discutidos nos
slides anteriores;

3.

Seguindo uma série de Princípios de Usabilidade de que iremos falar a seguir,
alguns deles elaborados por Jacob Nielsen, um reputado guru da Usabilidade.



Módulo Multimédia

04

Princípios de Usabilidade



Módulo Multimédia

Princípio da Visibilidade do estado do sistema ou website

A interface deve sempre informar o utilizador sobre onde este se encontra dentro do
website que se encontra a consultar, ou seja, em que página está.
Este Princípio traduz-se, em termos práticos nos seguintes exemplos:

1.

Se tenho uma interface com um menu numa barra, barra essa que é sempre visível
para o utilizador, e estou numa homepage, o item de menu “homepage” deve estar visualmente assinalado e distinto dos restantes para sinalizar/relembrar ao utilizador de
que é nesta página que ele se encontra.
Homepage

Sobre nós

Serviços

Galeria

Contactos

Sei (utilizador) que estou na Homepage porque o
botão está de uma cor diferente dos outros!



Módulo Multimédia

2.

Se por outro lado tenho um menu em que as suas páginas abrem sobrepostas ao
mesmo ou ocultando-o, então convém sinalizar, com um título, na própria página
aberta ou a ser navegada pelo utilizador, o nome da página. Imaginemos que temos
uma interface que funciona como um carrousel e que, quando clicado um dos seus
botões se abre por cima do menu uma página:

Título: Galeria

Galeria
Clico no item “Galeria”

Abre por cima da totalidade do menu a página
correspondente ao ítem antes activado pelo utilizador.

Como o meu menu passa a ser invisivel eu tenho de sinalizar/relembrar ao utilizador
que estou na página da “Galeria” assinalando-a com esse título.


Módulo Multimédia

3.

Outro cuidado associado a este Princípio da visibilidade do estado da interface é a
sinalização dos diferentes estados de items interactivos da interface:

Estado do botão em “repouso“

Estado quando utilizador interage

Devemos sempre sinalizar ao utilizador que um item é interactivo incluindo uma
reacção inicial à nossa interacção com o mesmo, para que o utilizador tenha feedback
da interface de que está a correctamente seleccionar um determinado item interactivo.
Basicamente devem-se editar os Roll Overs!


Módulo Multimédia

Princípio da Liberdade de controlo na navegação pelo website

A interface deve fornecer ao utilizador os meios necessários para que este navegue
livremente entre páginas e sub-páginas da interface com o menor esforço possível e
com o menor número de passos de interacção possível.
Este Princípio traduz-se em situações como, por exemplo, as seguintes:

1.

Sempre que possível, o menu deve permanecer disponível ao utilizador, encontre-se
este em que página da interface se encontrar:
Homepage

Sobre nós

Serviços

Galeria

Página
1

Contactos

Homepage

Sobre nós

Serviços

Galeria

Página
2

Contactos

Homepage

Sobre nós

Serviços

Galeria

Contactos

Página
3



Módulo Multimédia

2.

Em situações em que não seja possível que o menu esteja sempre presente,
a interface deve fornecer os meios para que o utilizador possa voltar atrás à página
principal de navegação onde encontra o menu, incluíndo botões de fechar ou voltar
à homepage:

Galeria

Fechar

Galeria

Caso contrário o utilizador fica preso nesta página e não tem forma de regressar ao
menu principal do nosso website.



Módulo Multimédia

Princípio da Consistência

A interface deve sempre exibir-se ao utilizador os seus elementos e meios constituintes
de forma consistente ao longo de todo o website.
Este Princípio traduz-se em situações como, por exemplo, as seguintes:

1. Consistência de posição

Sempre que possível os elementos da interface, principalmente os interactivos,
devem surgir na mesma localização da página para criar no utilizador familiaridade
com o sistema de navegação criado.

Página Galeria

Fechar
Página Serviços

Fechar

Procurem uniformizar sempre estas localizações e criar padrões.


Módulo Multimédia

2. Consistência mecânica

Se entre páginas ocorrerem transições visuais e animadas, essas transições devem
ocorrer sempre da mesma forma entre todas as transições entre páginas.

Homepage

Galeria

Sobre nós

Serviços

Sobre nós

Galeria

Contactos

Homepage

Sobre nós

Serviços

Galeria

Contactos

Sobre nós
Serviços

Se a lógica de transição é, por exemplo, uma página que entra, em cortina, e cobre a
anterior, então essa lógica e mecânica deverá ser transposta para todas as outras
transições entre diferente páginas. O que não deve acontecer é noutra página a
transição abrir, por exemplo, a partir do centro, ou segundo outro esquema qualquer.
Procurem uniformizar sempre estes comportamentos e criar padrões.


Módulo Multimédia

Princípio da Simplicidade Visual

A interface deve apenas exibir os elementos estritamente importantes e necessários à
interacção com a mesma.
Elementos desnecessários à navegação e informação subtraiem importância aos
elementos importantes e competem pela atenção do utilizador criando dispersão.
Pelo que devem ser evitados.

Lembram-se do primeiro caso de sites que tinham problemas de Usabilidade?
http://www.soulwax.com/2007


Módulo Multimédia

Princípio da Economia de passos de interacção

A interface deve permitir ao utilizador navegar até qualquer página do website
pretendida, com o menor número de passos de interacção possível.
Este Princípio traduz-se em situações como, por exemplo, a seguinte:

1.

Evitar ter que clicar num botão para aceder aos elementos principais de navegação.

Abrir Menu

Passo 1

Fechar Menu

Passo 2
Homepage

Sobre nós

Serviços

Galeria

Contactos

Procurem reduzir ao mínimo o número de passos de interacção para se executar uma
tarefa de navegação.


Módulo Multimédia

Princípio da Boa distinção entre items interactivos e não interactivos

A interface deve sinalizar/distinguir claramente para o utilizador os items interactivos
dos não interactivos. Este princípio é especialmente importante em interfaces não convencionais como interfaces lúdico contextuais onde os menus e os elementos interactivos costumam estar integrados em elementos do próprio cenário ou contexto.

Galeria

Serviços

Neste esquema todos os elementos têm
o mesmo nível de destaque relativo.

Neste há elementos que se destacam
sinalização de uma diferença visual.

Por isso os elementos interactivos de uma interface devem estar claramente sinalizados para que o utilizador não tenha dúvidas sobre como interagir para navegar.


Módulo Multimédia

Princípio da Flexibilidade de modelos de interacção

A interface deve, principalmente em soluções de menus lúdico-contextuais, prever um
segundo modo de interacção de percepção mais imediata para utilizadores menos
habituados a interfaces contextuais.
Reparem como neste website da Toyota, com um menu contextual, houve a preocupação de incluir uma segunda versão mais discreta do menu mas numerada e por baixo
do menu principal.


Por isso é desejável incluir na interface, para além da versão contextual do menu, uma
versão assente numa barra discreta que tenha os mesmos itens que o menu
contextual destacado no site.


Módulo Multimédia

Princípio da Boa clicabilidade

A interface e os seus itens interactivos devem ser facéis de clicar. Não há nada pior do
que uma interface que tem botões difíceis de serem clicados porque têm as suas áreas
clicáveis, ou por definir ou mal definidas.
É o caso de botões compostos apenas por texto. É habitual, nestes casos, que os
alunos se esqueçam de definir a área clicável do botão, resultando em botões que
reagem intermitentemente e são difíceis de clicar.

Sem área clicável definida
reage intermitentemente

Com área clicável definida reage correctamente e cursor não precisa de tocar no texto

texto texto texto texto
texto
Por isso é sempre desejável que num botão definam sempre a área clicável do mesmo
no estado de Down dos botões de Flash. Se o botão é um texto a área clicável deve
corresponder a um rectângulo com a largura e altura do texto.


Módulo Multimédia

Princípio da Não abertura do site com audio

A interface não deve nunca abrir com audio. No máximo deverá, antes de arrancar ou
abrir o site, prevenir o utilizador dessa especificidade e fornecer os meios necessários
para que o utilizador possa desactivar o audio caso assim o deseje.
Lembram-se do primeiro caso de websites que tinham problemas de Usabilidade?
http://www.soulwax.com/2007

Lembrem-se de que o utilizador pode estar a abrir o website num contexto ou local
onde não e conveniente que alguma coisa que esteja a acontecer no ambiente que o
rodeia seja interrompida abruptamente por um som inesperado.


Módulo Multimédia

05

Proposta de trabalho - Website em Flash



Módulo Multimédia

Tema
Os alunos vão ter de conceber e construir em Flash uma de duas hipóteses:
1. Website de Portólio pessoal;
2. Micro Website de Promoção de produto.
Objectivos
• Dotar os alunos da capacidade de desenvolvimento de um produto multimédia,
totalmente desenvolvido em Flash, para posterior publicação na web;
• Dotar os alunos da capacidade de desenvolvimento de uma Interface e sistema de
navegação funcional e fácil de utilizar que ajude o utilizador a navegar pela informação
e páginas disponibilizadas pelo mesmo website;
• Levar os alunos a explorarem as potencialidades lúdicas de intros animadas, de
botões com roll overs animados, de transições animadas entre as páginas de um website e a potencial utilização de menus contextuais.
• Levar os alunos a serem capazes de combinar os dois anteriores objectivos num
único website.
Avaliação
Vai ser avaliada a capacidade de implementação do exercício em Flash,
o grau de usabilidade do website e a ludicidade do sistema de navegação.
Será igualmente avaliado o acompanhamento do trabalho. Trabalhos que não tenham
sido acompanhados pelo docente terão nota 0.
Esta proposta de trabalho vale 20% da avaliação final do semestre.


Módulo Multimédia

Limitações e obrigações
Os websites têm de ter, pelo menos 4 áreas de conteúdos (por exemplo: Sobre nós,
Contactos, Galeria de imagens, os nossos produtos, etc...).
Os websites têm de incluir vídeo, imagens (optimizados), audio e conteúdos de texto.
O Palco no Flash terá de ter uma resolução de 900 x 700 px.
Entrega e Apresentação
Os trabalhos têm de ser entregues num CD onde se incluam as seguintes pastas com
os seguintes conteúdos:
Pasta 0 - (Nome do aluno)
• Contém as pastas 1, 2 e 3, referidas a seguir:
Pasta 1 - (com o nome Website):
• Ficheiros SWF
• Ficheiros FLA
• Ficheiros FLV (ficheiros de vídeo)
• Ficheiros de Skin de vídeo (ficheiros que o Flash gera quando incluímos vídeo)
Pasta 2 - (com o nome Fontes - famílias de texto)
• Fontes utilizadas no website
Pasta 3 - (com o nome Ficha de Projecto)
• Ficheiro PDF da Ficha de Projecto
Data final de entrega
O Trabalho será entregue e apresentado no dia 10 de Janeiro de 2014


Módulo Multimédia

OBRIGATÓRIO NA PRÓXIMA AULA
• Tema definido / Produto ou Portfólio;
• Pesquisa de referências que tenciona seguir (3 exemplos);
• Organigrama da estrutura de conteúdos do vosso website.



Módulo Multimédia

Inspiração
1. Website de Portfólio em Flash
http://www.frostdesign.com.au/
http://thetoke.com/
http://www.hellomonday.net/
http://www.iestudio.co.il/en/index.html
http://www.insidepiet.com
http://www.estudioalmacen.com/old.html
entre muitos outros....
2. Microsite de promoção de produto em Flash
http://www.nokiatrendslab.pl/main.html
http://www.cheeseandburger.com/
http://www.nike.com/sportswear/collections/fall09/#/loopwheeler-aw77
http://jet.samsungmobile.com/#/movie
entre muitos outros....


Ludicidade e Usabilidade Interfaces

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (18)

Similar a Ludicidade e Usabilidade Interfaces

Similar a Ludicidade e Usabilidade Interfaces (20)

Más de Leonardo Pereira

Más de Leonardo Pereira (7)

Último

Último (20)

Ludicidade e Usabilidade Interfaces