Ludicidade vs usabilidade num website

669 visualizações

Publicada em

In this class I discuss and showcase with my students the convergence between two values of a website's interface: Playfulness and Usability of the user's experience when interacting with a website built with the Adobe Flash tool.

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
669
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ludicidade vs usabilidade num website

  1. 1. 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
  2. 2. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 01 O Flash e as interfaces de websites leonardpeartree@gmail.com
  3. 3. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  4. 4. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  5. 5. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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! leonardpeartree@gmail.com
  6. 6. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 02 Ludicidade e experiência de nav./interacção num website leonardpeartree@gmail.com
  7. 7. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  8. 8. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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! leonardpeartree@gmail.com
  9. 9. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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/ leonardpeartree@gmail.com
  10. 10. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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/ leonardpeartree@gmail.com
  11. 11. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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 leonardpeartree@gmail.com
  12. 12. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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/ leonardpeartree@gmail.com
  13. 13. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  14. 14. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 03 Usabilidade leonardpeartree@gmail.com
  15. 15. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  16. 16. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  17. 17. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira Vamos ver alguns erros comuns, em casos específicos, que não devem ser cometidos! leonardpeartree@gmail.com
  18. 18. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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; leonardpeartree@gmail.com
  19. 19. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira Caso 2 - http://www.maisonmartinmargiela.com/en A interface deste website padece dos seguintes “defeitos”: • 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; leonardpeartree@gmail.com
  20. 20. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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! leonardpeartree@gmail.com
  21. 21. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  22. 22. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira Caso 5 - http://www.hboemtb.com/ A interface deste website padece dos seguintes “defeitos”: • 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; leonardpeartree@gmail.com
  23. 23. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  24. 24. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 04 Princípios de Usabilidade leonardpeartree@gmail.com
  25. 25. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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! leonardpeartree@gmail.com
  26. 26. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  27. 27. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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! leonardpeartree@gmail.com
  28. 28. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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 leonardpeartree@gmail.com
  29. 29. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  30. 30. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  31. 31. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  32. 32. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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 leonardpeartree@gmail.com
  33. 33. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  34. 34. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  35. 35. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html 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. leonardpeartree@gmail.com
  36. 36. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  37. 37. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  38. 38. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 05 Proposta de trabalho - Website em Flash leonardpeartree@gmail.com
  39. 39. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  40. 40. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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 leonardpeartree@gmail.com
  41. 41. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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. leonardpeartree@gmail.com
  42. 42. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da Comunicação Módulo Multimédia Atelier Audiovisual e Multimédia II - 2013 | 2014 Professor Leonardo Pereira 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://demo.northkingdom.com/ihuvudetpatoyota/index_en.html 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.... leonardpeartree@gmail.com

×