11

COMM 1213 H1COMM 1213 H1COMP 4923 X1COMP 4923 X1

HTML Page HTML Page Structure and Structure and

NavigationNavigation

(Readings: Ch. 5 Lazar)(Readings: Ch. 5 Lazar)

22

OutlineOutline

• Information ArchitectureInformation Architecture

• Site NavigationSite Navigation

EG

33

DefintionsDefintions

• Information Architecture Information Architecture – How large information spaces are organized for How large information spaces are organized for

optimal user interactionoptimal user interaction– Structure of websiteStructure of website

• Site navigationSite navigation– Provides a map through websiteProvides a map through website– Good site navigation = easy to find contentGood site navigation = easy to find content– ““If the user can’t find it, the information is not If the user can’t find it, the information is not

there.”there.”

44

Analysis versus DesignAnalysis versus Design

• Dealt with during design, just after Dealt with during design, just after requirements analysisrequirements analysis

• Requirements analysis Requirements analysis

WhatWhat

• Design Design How How

55

Important issues during Important issues during analysis and design:analysis and design:

• Purpose and title of webpagePurpose and title of webpage

• Content to be developedContent to be developed– Consider how it will be developedConsider how it will be developed

• How often data will be updatedHow often data will be updated– Who will perform the updateWho will perform the update

• Relationship between contentRelationship between content

66

Determine Content ObjectsDetermine Content Objects

• A well-defined piece of contentA well-defined piece of content• Smallest granularity of content for the siteSmallest granularity of content for the site• Static or dynamic (database driven)Static or dynamic (database driven)• More than one object can exist per pageMore than one object can exist per page• Example: Example:

– catalog entries is an objectcatalog entries is an object– a specific item is an instancea specific item is an instance

• Prioritize objects as to their importance – Prioritize objects as to their importance – mandatory, desirable, optionalmandatory, desirable, optional

• Rarely is all content provided in first releaseRarely is all content provided in first release

77

Organize Content ObjectsOrganize Content Objects

• Allocate objects to webpages – use a Allocate objects to webpages – use a tabletable

• Cognitive models – how users organize Cognitive models – how users organize information in their mindsinformation in their minds

• Use paper prototypes (cards) and look forUse paper prototypes (cards) and look for– GroupingsGroupings– FlowFlow– HierarchyHierarchy

88

Organize Content ObjectsOrganize Content Objects

• Theoretical Foundations – Menu designTheoretical Foundations – Menu design– Hierarchical structure is preferredHierarchical structure is preferred– Series of menus arranged in a tree structureSeries of menus arranged in a tree structure

•depth (number of menus levels)depth (number of menus levels)

•Breadth (number of items per menu)Breadth (number of items per menu)

– Short depth, wide breadth preferred .. Why?Short depth, wide breadth preferred .. Why?– Breadth should decreases as depth increases Breadth should decreases as depth increases

.. Why?.. Why?

99

Organize Content ObjectsOrganize Content Objects

• Theoretical Foundations – Menu designTheoretical Foundations – Menu design– No more than 4 or 5 clicks to desired contentNo more than 4 or 5 clicks to desired content– Else …. cognitive overloadElse …. cognitive overload– Humans can deal with 5-9 items / chunksHumans can deal with 5-9 items / chunks

• Consider a food menu structure:Consider a food menu structure:– Choice A – list of 500 food itemsChoice A – list of 500 food items– Choice B – 10 groups of items by country of Choice B – 10 groups of items by country of

originorigin– Choice C – 5 groups based on order of eatingChoice C – 5 groups based on order of eating

1010

Web NavigationWeb Navigation

• Three types of information for user:Three types of information for user:– Where they have beenWhere they have been

•History, back button, visited link colorsHistory, back button, visited link colors

– Where they areWhere they are•Title of page = “you are here” signTitle of page = “you are here” sign•Context = site map, bread crumbs, tabsContext = site map, bread crumbs, tabs

– Where they can goWhere they can go•Descriptive, conveys structure, consistent Descriptive, conveys structure, consistent

throughout sitethroughout site

1111

Web NavigationWeb Navigation• Four most common types:Four most common types:

– Topical navigationTopical navigation•Organized by topic - Our course websiteOrganized by topic - Our course website

– Audience-splitting navigationAudience-splitting navigation•Directs visitors based on their roles with respect to site - Directs visitors based on their roles with respect to site -

Acadia websiteAcadia website

– Metaphor navigationMetaphor navigation•Relate information to objectsRelate information to objects in user’s lifein user’s life

– Organizational navigationOrganizational navigation•Based on organizational chartBased on organizational chart•OK for internal, but not external usersOK for internal, but not external users

1212

Location of Navigation Location of Navigation

• Developer can not be certain of Developer can not be certain of available screen spaceavailable screen space

• Navigation must be easily visibleNavigation must be easily visible– TopTop– LeftLeft– Combination of top and leftCombination of top and left

1313

ResourcesResources• Getting started with HTML Getting started with HTML from the W3C from the W3C

• W3C'sW3C's Recommendation for Recommendation for HTML 4.0HTML 4.0 is the is the authoritative specification for HTML authoritative specification for HTML

• W3 Schools W3 Schools HTML TutorialHTML Tutorial

• HTML Goodies HTML Goodies HTML PrimerHTML Primer

• An An HTML Code Tutorial HTML Code Tutorial

• Writing HTMLWriting HTML a tutorial for creating web a tutorial for creating web pages (a little old but a different pages (a little old but a different perspective) perspective)

1414

THE ENDTHE END

danny.silver@acadiau.cadanny.silver@acadiau.ca

1515

Architectural of the InternetArchitectural of the Internet

InternetInternet

Application

Client 1

Server BServer C

TCP/IP

Application

Client 2

Server X

Server Y

Server C

Intranet

Intranet

Acadia

1616

TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture

Transmission Control Protocol

Internet Protocol

1717

TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture

• Internet Protocol (IP) – like a postcard Internet Protocol (IP) – like a postcard that contains:that contains:– Destination address (131.162.201.7)Destination address (131.162.201.7)– Return addressReturn address– Block of data (content)Block of data (content)

• Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)– Ensures the post card gets throughEnsures the post card gets through– Ensures the order of deliverEnsures the order of deliver– Handles errors and control flowHandles errors and control flow

1818

Client-Server Applications Client-Server Applications that use the Internetthat use the Internet

Physical

Network

TCP

IP

Physical

Network

TCP

IPInternetInternet

Telnet Window Telnet Server

FTP Client FTP Server

eMail Client eMail ServerSMTP/POP

FTP

Telnet Protocol

1919

Major Architectural Major Architectural Components of the WebComponents of the Web

InternetInternet

Browser

DatabaseServer

Client 1

Server A

Server BServer C

URL

HTTPTCP/IP

Browser

Client 2 HTTPServer

App.Server

index.html

2020

ImagesImages• Various digital image formats can be embedded with in HTML: .gif, .jpgVarious digital image formats can be embedded with in HTML: .gif, .jpg• ExampleExample

• See See www.bellsnwhistles.comwww.bellsnwhistles.com as source of images and other objects. as source of images and other objects.• Let’s down load one and try it …Let’s down load one and try it …<BODY>

<H1>My new baby girl.</H1><IMG SRC=“NicoleSilver.jpg”></BODY>

2121

Hyper LinksHyper Links

<HTML><HEAD></HEAD><BODY><H1>My Oldest Daughter.</H1><IMG SRC=“Natalie.jpg”>Natalie goes to <A HREF=“http://www.ems.ednet.ns.ca”>Evangeline

Middle School</A>Which is in New Minas.Click <A HREF=“mailto:nsilver@ems.nsed.ca”>Here</A>

to send her email.</BODY></HTML>