Laboratório Audivisual Hipermedia Aula2 07 03

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

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

Etapas na construção de um website

• Um website deve ser planeado, pensado,
projectado ANTES DE SE INICIAR O
DESENVOLVIMENTO

Arquitectura
Design
Tecnologia

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

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%

Construir um website

1. Pensar o projecto – conhecer o mercado:

Tipologia de websites
• Por conteúdo
• Por público
• Por formato

Tipologia de websites: Por conteúdo

•Informação
•Entretenimento
•Aprendizagem
•Colaborativo
•Negócio
•Entretenimento +
aprendizagem
•...

Tipologia de websites: Por conteúdo

Tipologia de websites: Por público

Tipologia de websites: Por público

•Infantil
•Adulto
•Sénior
•Jovens (mais de 15
anos)
•...

Tipologia de websites: Por formato

•Texto simples
•Baseado em
multimédia
•...

Tipologia de websites: Por formato

Tipologia de websites

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


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

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

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




3. Design: conceber a maquete, receber
feedback

Construir a maquete, receber feedback




3. Design: conceber a maquete, receber
feedback

4. Adaptação para HTML/FLASH/...

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ão do Cidadã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>


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,...)

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

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ê?

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

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

ptavares@netcabo.pt
skype: pltavares2115
msn:pftavares@hotmail.com

Laboratório Audivisual Hipermedia Aula2 07 03

Recomendados

Recomendados

Más contenido relacionado

Similar a Laboratório Audivisual Hipermedia Aula2 07 03

Similar a Laboratório Audivisual Hipermedia Aula2 07 03 (20)

Más de Pedro Tavares

Más de Pedro Tavares (12)

Último

Último (20)

Laboratório Audivisual Hipermedia Aula2 07 03