1 COMM 1213 H1 COMP 4923 X1 HTML Page Structure and Navigation (Readings: Ch. 5 Lazar)

2 Outline Information Architecture Information Architecture Site Navigation Site Navigation EG

3 Defintions Information Architecture Information Architecture –How large information spaces are organized for optimal user interaction –Structure of website Site navigation Site navigation –Provides a map through website –Good site navigation = easy to find content –“If the user can’t find it, the information is not there.”

4 Analysis versus Design Dealt with during design, just after requirements analysis Dealt with during design, just after requirements analysis Requirements analysis Requirements analysis  What Design  How Design  How

5 Important issues during analysis and design: Purpose and title of webpage Purpose and title of webpage Content to be developed Content to be developed –Consider how it will be developed How often data will be updated How often data will be updated –Who will perform the update Relationship between content Relationship between content

6 Determine Content Objects A well-defined piece of content A well-defined piece of content Smallest granularity of content for the site Smallest granularity of content for the site Static or dynamic (database driven) Static or dynamic (database driven) More than one object can exist per page More than one object can exist per page Example: Example: –catalog entries is an object –a specific item is an instance Prioritize objects as to their importance – mandatory, desirable, optional Prioritize objects as to their importance – mandatory, desirable, optional Rarely is all content provided in first release Rarely is all content provided in first release

7 Organize Content Objects Allocate objects to webpages – use a table Allocate objects to webpages – use a table Cognitive models – how users organize information in their minds Cognitive models – how users organize information in their minds Use paper prototypes (cards) and look for Use paper prototypes (cards) and look for –Groupings –Flow –Hierarchy

8 Organize Content Objects Theoretical Foundations – Menu design Theoretical Foundations – Menu design –Hierarchical structure is preferred –Series 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? –Breadth should decreases as depth increases.. Why?

9 Organize Content Objects Theoretical Foundations – Menu design Theoretical Foundations – Menu design –No more than 4 or 5 clicks to desired content –Else …. cognitive overload –Humans can deal with 5-9 items / chunks Consider a food menu structure: Consider a food menu structure: –Choice A – list of 500 food items –Choice B – 10 groups of items by country of origin –Choice C – 5 groups based on order of eating

10 Web Navigation Three types of information for user: Three types of information for user: –Where they have been History, back button, visited link colors History, back button, visited link colors –Where they are Title of page = “you are here” sign Title of page = “you are here” sign Context = site map, bread crumbs, tabs Context = site map, bread crumbs, tabs –Where they can go Descriptive, conveys structure, consistent throughout site Descriptive, conveys structure, consistent throughout site

11 Web Navigation Four most common types: Four most common types: –Topical navigation Organized by topic - Our course website Organized by topic - Our course website –Audience-splitting navigation Directs visitors based on their roles with respect to site - Acadia website Directs visitors based on their roles with respect to site - Acadia website –Metaphor navigation Relate information to objects Relate information to objects in user’s life in user’s life –Organizational navigation Based on organizational chart Based on organizational chart OK for internal, but not external users OK for internal, but not external users

12 Location of Navigation Developer can not be certain of available screen space Developer can not be certain of available screen space Navigation must be easily visible Navigation must be easily visible –Top –Left –Combination of top and left

13 Resources Getting started with HTML from the W3C Getting started with HTML from the W3C Getting started with HTML Getting started with HTML W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML W3C'sHTML 4.0 W3C'sHTML 4.0 W3 Schools HTML Tutorial W3 Schools HTML TutorialHTML TutorialHTML Tutorial HTML Goodies HTML Primer HTML Goodies HTML PrimerHTML PrimerHTML Primer An HTML Code Tutorial An HTML Code TutorialHTML Code TutorialHTML Code Tutorial Writing HTML a tutorial for creating web pages (a little old but a different perspective) Writing HTML a tutorial for creating web pages (a little old but a different perspective) Writing HTML Writing HTML

14 THE END

15 Architectural of the Internet Internet Application Client 1 Server B Server C TCP/IP Application Client 2 Server X Server Y Server C Intrane t Acadia

16 TCP/IP Protocol Architecture Transmission Control Protocol Internet Protocol

17 TCP/IP Protocol Architecture Internet Protocol (IP) – like a postcard that contains: Internet Protocol (IP) – like a postcard that contains: –Destination address ( ) –Return address –Block of data (content) Transmission Control Protocol (TCP) Transmission Control Protocol (TCP) –Ensures the post card gets through –Ensures the order of deliver –Handles errors and control flow

18 Client-Server Applications that use the Internet Physical Network TCP IP Physical Network TCP IP Internet Telnet Window Telnet Server FTP Client FTP Server Client Server SMTP/POP FTP Telnet Protocol

19 Major Architectural Components of the Web Internet Browser Database Server Client 1 Server A Server B Server C URL HTTP TCP/IP Browser Client 2 HTTP Server App. Server index.html

20 Images Various digital image formats can be embedded with in HTML:.gif,.jpg Various digital image formats can be embedded with in HTML:.gif,.jpg Example Example See as source of images and other objects. See as source of images and other objects. Let’s down load one and try it … Let’s down load one and try it … My new baby girl.

21 Hyper Links My Oldest Daughter. Natalie goes to Evangeline Middle School Which is in New Minas. Click Here to send her .