• Save
Laboratório Audivisual Hipermedia Aula2 07 03
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Laboratório Audivisual Hipermedia Aula2 07 03

on

  • 544 views

Curso Educação e Comunicação Multimedia - ESE Santarém 2006-2007

Curso Educação e Comunicação Multimedia - ESE Santarém 2006-2007

usabilidade

Statistics

Views

Total Views
544
Views on SlideShare
541
Embed Views
3

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 3

http://www.11frames.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Laboratório Audivisual Hipermedia Aula2 07 03 Presentation Transcript

  • 1. Escola Superior de Educação de Santarém Curso de Educação e Comunicação Multimédia Laboratório Audiovisual: Hipermédia 2007 Pedro Tavares
  • 2. Agenda PARTE 1 1. Etapas na construção de um website: da definição à actualização – Tipologia de websites • Por conteúdo • Por público • Por formato 2. Usabilidade aplicada ao dia-a-dia 3. Usabilidade na Internet: – Contexto – Alguns princípios 4. Usabilidade a 3 níveis: – Design – Conteúdos – Arquitectura da Informação • COMPONENTE PRÁTICA: Caracterizar e reconhecer websites
  • 3. Etapas na construção de um website • Um website deve ser planeado, pensado, projectado ANTES DE SE INICIAR O DESENVOLVIMENTO
  • 4. Arquitectura Design Tecnologia
  • 5. O alto custo de não ser possível encontrar informação “The Fortune 1000 stands to waste at least $2.5 billion per year due to an inability to locate and retrieve information.” “While the costs of not finding information are enormous, they are hidden within the enterprise, and…are rarely perceived as having an impact on the bottom line.” The High Cost of Not Finding Information, IDC White Paper
  • 6. Os maior problemas na experiência de utilizador Vividence Research Resultados de pesquisa mal organizados 53% Arquitectura da Informação mal definida 32% Performance baixa 32% Homepages mal definidas 27% Terminologia confusa 25% Registo invasivo 15% Navegação Inconsistente 13%
  • 7. Construir um website 1. Pensar o projecto – conhecer o mercado: Tipologia de websites • Por conteúdo • Por público • Por formato
  • 8. Tipologia de websites: Por conteúdo •Informação •Entretenimento •Aprendizagem •Colaborativo •Negócio •Entretenimento + aprendizagem •...
  • 9. Tipologia de websites: Por conteúdo
  • 10. Tipologia de websites: Por público
  • 11. Tipologia de websites: Por público •Infantil •Adulto •Sénior •Jovens (mais de 15 anos) •...
  • 12. Tipologia de websites: Por formato •Texto simples •Baseado em multimédia •...
  • 13. Tipologia de websites: Por formato
  • 14. Tipologia de websites • Conhecer as melhores práticas antes de avançar
  • 15. Construir um website 1. Pensar o projecto – conhecer o mercado, saber que tipo de projecto pretendemos 2. A arquitectura da informação: construir a estrutura do website; ou o storyboard
  • 16. Estruturas Organizativas Hierarquia: taxionomias, top levels, modelo mental (também por associações Bases de dados: contexto estruturado com relações Hipertexto: referências cruzadas, contextual hierarquia hipertexto Base de dados
  • 17. Esquemas de organização Exacto Tudo tem o seu lugar Fácil para criar e manter Exº páginas amarelas, geografia, cronologia Ambiguo Difuso e com sobreposições Difícil de criar e manter Bom para a aprendizagem Exº tópicos, discussão de audiência
  • 18. Estrutura do site
  • 19. Ou um storyboard
  • 20. Construir um website 1. Pensar o projecto – conhecer o mercado, saber que tipo de projecto pretendemos 2. A arquitectura da informação: construir a estrutura do website; ou o storyboard 3. Design: conceber a maquete, receber feedback
  • 21. Construir a maquete, receber feedback
  • 22. Construir um website 1. Pensar o projecto – conhecer o mercado, saber que tipo de projecto pretendemos 2. A arquitectura da informação: construir a estrutura do website; ou o storyboard 3. Design: conceber a maquete, receber feedback 4. Adaptação para HTML/FLASH/...
  • 23. Adaptação para HTML/Flash/... <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Cartão do Cidadão - Início</title> <meta name="description" content="Cartão do Cidadão" /> <meta name="keywords" content="Cartão do Cidadão, UCMA, UMIC, Modernização Administrativa, balcão único, lojas cidadão, plano tecnológico" /> <meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved." /> <meta name="robots" content="index, follow" /> <link rel="shortcut icon" href="http://www.cartaodocidadao.pt/images/favicon.ico" /> <link rel="shortcut icon" href="http://www.cartaodocidadao.pt/templates/cartao_cidadao_home//templates/cartao_cidadao_home/images/favicon.ico" /> <link rel="stylesheet" type="text/css" href="http://www.cartaodocidadao.pt/templates/cartao_cidadao_home/css/template_css.css" /> <link href="css/template_css.css" rel="stylesheet" type="text/css"> </head> <body> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="tabela_760"> <tr> <td valign="top"><table width="100%" border="0" cellspacing="3" cellpadding="0"> <tr> <td width="70%"><img src="/templates/cartao_cidadao_home/images/logo.gif" alt="Cart&atilde;o do Cidad&atilde;o" width="351" height="77"></td> <td width="30%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="cinzentopequeno"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <td>
  • 24. Construir um website 1. Pensar o projecto – conhecer o mercado, saber que tipo de projecto pretendemos 2. A arquitectura da informação: construir a estrutura do website; ou o storyboard 3. Design: conceber a maquete, receber feedback 4. Adaptação para HTML/FLASH/... 5. Testes (usabilidade, funcionamento,...)
  • 25. Componente prática Conteúdo digital: • Escolher um website • Apresentar o site • Descrever a sua estrutura: fácil ou difícil a navegação? Quantos menus? Identificar menu principal • Classificar quanto: – Tipo de conteúdo – Tipo de público-alvo – Por formato • Perceber data da última actualização
  • 26. Componente Prática (cont) • Tipo de escrita: linear ou hipertextual? Utilização de texto em formato de pirâmide invertida? • Pesquisa disponível? Fácil pesquisar? Resultados classificados? • Design: esquema de cores, de ilustração e multimédia são características acessórias ou principais? • Voltaria ao website? Porquê?
  • 27. websites Asilomar Institute for Information Architecture http://aifia.org/ Bloug http://louisrosenfeld.com/home/ Boxes & Arrows http://www.boxesandarrows.com/ Findability.org http://findability.org/ IAwiki http://www.iawiki.net/IAwiki Semantics http://semanticstudios.com/publications/semantics/ www.useit.com www.iaslash.org www.macromedia.com/showcase www.coolhomepages.com
  • 28. Bibliografia • Rosenfeld, L. & Morville, P. – Information Architecture for the World Wide Web – O’Reilly, 1998/2002 • Wodtke, C. - Information Architecture, Blueprints for the Web – New Riders, 2003 • Nielsen, J. - Designing Web Usability – New Riders, 2000
  • 29. ptavares@netcabo.pt skype: pltavares2115 msn:pftavares@hotmail.com