Escola Superior de Educação de Santarém
Curso de Educação e Comunicação Multimédia


    Laboratório Audiovisual:
        ...
Agenda
PARTE 1

1.       Etapas na construção de um website: da definição à actualização
     –       Tipologia de website...
Etapas na construção de um website




• Um website deve ser planeado, pensado,
  projectado ANTES DE SE INICIAR O
  DESEN...
Arquitectura
Design
Tecnologia
O alto custo de não ser possível encontrar
                                 informação
“The Fortune 1000 stands to waste a...
Os maior problemas na experiência de
                                  utilizador

                          Vividence Res...
Construir um website

1. Pensar o projecto – conhecer o mercado:



Tipologia de websites
     • Por conteúdo
     • Por p...
Tipologia de websites: Por conteúdo



                           •Informação
                           •Entretenimento
 ...
Tipologia de websites: Por conteúdo
Tipologia de websites: Por público
Tipologia de websites: Por público



                          •Infantil
                          •Adulto
              ...
Tipologia de websites: Por formato



                          •Texto simples
                          •Baseado em
     ...
Tipologia de websites: Por formato
Tipologia de websites

• Conhecer as melhores práticas antes de avançar
Construir um website

1. Pensar o projecto – conhecer o mercado, saber
   que tipo de projecto pretendemos

2. A arquitect...
Estruturas Organizativas

Hierarquia: taxionomias, top levels, modelo mental (também por
   associações
Bases de dados: co...
Esquemas de organização


Exacto
Tudo tem o seu lugar
Fácil para criar e manter
Exº páginas amarelas, geografia, cronologi...
Estrutura do site
Ou um storyboard
Construir um website

1. Pensar o projecto – conhecer o mercado, saber
   que tipo de projecto pretendemos

2. A arquitect...
Construir a maquete, receber feedback
Construir um website

1. Pensar o projecto – conhecer o mercado, saber
   que tipo de projecto pretendemos

2. A arquitect...
Adaptação para HTML/Flash/...

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tra...
Construir um website

1. Pensar o projecto – conhecer o mercado, saber que
   tipo de projecto pretendemos

2. A arquitect...
Componente prática

Conteúdo digital:
• Escolher um website
• Apresentar o site
• Descrever a sua estrutura: fácil ou difí...
Componente Prática (cont)

• Tipo de escrita: linear ou hipertextual?
  Utilização de texto em formato de pirâmide
  inver...
websites

Asilomar Institute for Information Architecture
         http://aifia.org/
Bloug
         http://louisrosenfeld....
Bibliografia

• Rosenfeld, L. & Morville, P. –
  Information Architecture for
  the World Wide Web –
  O’Reilly, 1998/2002...
ptavares@netcabo.pt
skype: pltavares2115
msn:pftavares@hotmail.com
Laboratório Audivisual Hipermedia Aula2 07 03
Laboratório Audivisual Hipermedia Aula2 07 03
Próximos SlideShares
Carregando em…5
×

Laboratório Audivisual Hipermedia Aula2 07 03

483 visualizações

Publicada em

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

usabilidade

Publicada em: Educação
  • Seja o primeiro a comentar

Laboratório Audivisual Hipermedia Aula2 07 03

  1. 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. 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. 3. Etapas na construção de um website • Um website deve ser planeado, pensado, projectado ANTES DE SE INICIAR O DESENVOLVIMENTO
  4. 4. Arquitectura Design Tecnologia
  5. 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. 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. 7. Construir um website 1. Pensar o projecto – conhecer o mercado: Tipologia de websites • Por conteúdo • Por público • Por formato
  8. 8. Tipologia de websites: Por conteúdo •Informação •Entretenimento •Aprendizagem •Colaborativo •Negócio •Entretenimento + aprendizagem •...
  9. 9. Tipologia de websites: Por conteúdo
  10. 10. Tipologia de websites: Por público
  11. 11. Tipologia de websites: Por público •Infantil •Adulto •Sénior •Jovens (mais de 15 anos) •...
  12. 12. Tipologia de websites: Por formato •Texto simples •Baseado em multimédia •...
  13. 13. Tipologia de websites: Por formato
  14. 14. Tipologia de websites • Conhecer as melhores práticas antes de avançar
  15. 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. 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. 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. 18. Estrutura do site
  19. 19. Ou um storyboard
  20. 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. 21. Construir a maquete, receber feedback
  22. 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. 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. 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. 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. 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. 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. 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. 29. ptavares@netcabo.pt skype: pltavares2115 msn:pftavares@hotmail.com

×