Design for Web Sites – Information Architecture, Interaction, Navigation Lynch and Horton: 3, 4, 5...

Design for Web Sites – Information Architecture, Interaction, Navigation

Lynch and Horton: 3, 4, 5

Nielsen and Loranger, Prioritizing Web Usability: 2, 6

Overview

• Information Architecture

• Interaction

• Navigation

• Information density of L&H low – read it quickly– Lots of “FYI” slides– Much of the challenge is the “vocabulary gap”

• “Popular”, vs. technical

Site: Design – Issues and Tasks, 1(Overview of L&H 3)

• Or, from a “computer science software engineering” perspective, – What should the design document (specifications) include

• Preliminary Design Decisions– Purpose of site– Objectives– Audience

• Surfers, novice/occasional users, expert/frequent users, international users• Design strategies are different for

– Surfers, Training, Teaching, Education, Reference

• Interface Design– Web pages versus conventional document design– Design precedents in print– Make Web pages free-standing– Who, What, When, Where

• Interface design issues for Web– User-centered design (of course), Clear navigation aids, Provide context

Site: Design – Issues and Tasks, 2 (Overview of L&H 3)

• Information Access issues– Give users direct access– Consider bandwidth and interaction– Simplicity, Consistency, Design stability, Feedback and dialog, Design for the

disabled

• Links & navigation– Provide context, Button bars help

• Site Design– Organizing information

• Chunking information: Hierarchy, Relationships, Function– Site structure

• Sequence, Grid, Hierarchy, Web– Site elements

• Home pages, Graphic or text menus, Audience for home page, "Related sites", Bibliographies, indexes, appendices, FAQ’s, etc.

About Information Architecture


• About “architecture”:– Architecture is about design …

• 1. the profession of designing buildings, open areas, communities, and other artificial constructions and environments

• “structure”– For computer organization (computer architecture)– About compromises, experience, …, and design principles

• Information structuring on WWW is almost exclusively about web site design

– Thus, is changing rapidly due to:– Change in hardware and software technologies: – HTML and variants expanding functionalities, also on server side, asp, …– Uses for web – information dissemination, e-commerce, pure advertising, …– Users – literacy, expertness, expectations, populations, …


• “Information architecture”– Can, in fact, be considered quite generally

• Of “labeled link hypertext”, a library, email folders, …

• Term “information architecture” used for web sites because they are today (again) primarily information repositories

– With (again) quite primitive information access mechanisms

• Lynch and Horton:

– “In the context of web site design, information architecture describes the overall conceptual models and general designs used to plan, structure, and assemble a site. Every web site has an information architecture, but information architecture techniques are particularly important to large, complex web sites …”

– This is what they mean on Monster.com

About Information Architecturesome “definitions”

• R. S. Wurman in Information Architects, 1996:– the individual who organizes the patterns inherent in data, making the complex

clear– a person who creates the structure or map of information which allows others to

find their personal paths to knowledge– the emerging 21st century professional occupation addressing the needs of the

age focused upon clarity; human understanding and the science of the organization of information

• Louis Rosenfeld, “Making the Case for Information Architecture” at ASIS 2000 IA Summit:

– “Information architecture involves the design of organization, labeling, navigation, and searching systems to help people find and manage information more successfully.”

About Information Architecturesome “definitions”

• … and from Monster.com– Sacha Cohen, “Becoming an Information Architect: Work as a Web Site

Strategist”– in monster.com, http://technology.monster.com/articles/infoarchitect/

• Monster.com: First, what exactly is information architecture?

• Mattie Langenberg: Information architecture, as the name implies, is basically about taking content and creating a structure to present that content to an audience. Whether the content is intended for a private audience on an intranet or for the public, it is the information architect's job to ensure that information is well-organized and presented in an easily accessible interface.

Information Architecture

• Aims of information architecture (L&H):– Organize site content into taxonomies and hierarchies of information– Communicate conceptual overviews and overall site organization to

design team and clients– Research and design core site navigation concepts– Set standards and specifications for

• Handling of html semantic markup• Format and handling of text content

– Design and implement search optimization standards and strategies

• Encompasses a broad range of design and planning disciplines

• In fact, to create cohesive, coherent user experience – combine:– Technical design– User interface– Graphic design

Multidisciplinary Context


Andrew Dillon, “Information Architecture: Why, What and When”, at ASIS 2000 IA Summit


• Graphic design– Most performing the IA role are graphic

designers by training– Makes sense, graphics designed is geared

toward creating relationships between visual elements and determining effective integration as a whole (vs. solely aesthetic considerations)

– Though typically focus on single page vs. entire site

• Information and library science– Librarians deal with organization of and

access to information within inf. systems – Trained to work with searching, browsing,

and indexing technologies– Though can get lost in details



• Journalism– Also trained in organizing information,

though with different goals and utilizing different skills

– For sites with much edited content, good match

• Usability engineering– Are expert at testing and evaluating how

interactive systems work– Here, e.g., time to learn system, find

information, n and type of errors– But, focus is on measurement vs. design



• Marketing– Are expert at understanding audiences and

communicating a message effectively to different audiences

– Especially useful for externally used sites– Helps insure user-centered (vs.

organization-centered) orientation– But, orientation is to sales, rather than

assisting users in task

• Computer Science– For bottom up design, i.e., database

approach, have skills for modeling and abstraction

– But, not necessarily trained in user-oriented approach or information system design


How to Organize Information (L&H)Principles and Guidelines!

• Inventory site content– What is available, what is needed

• Establish a hierarchical outline of content– Will likely serve as site structure!

• Create a controlled vocabulary

– Allows consistent identification of content, site structure, and navigation elements

• Chunking: Divide content into logical units for consistent modular structure– Page is basic (and essential) unit for presentation and WWW (Tim said so)

• Draw diagrams that show site structure

• Create rough outlines of pages with list of core navigation links

• Analyze system by testing organization interactively with real users

• Revise as needed

Site Structure

• How information elements of site organized– “Conceptually”, i.e., the information architecture– As presented to the user:

• Through information presentation(s) generally• Navigation elements reinforce

• Mental model– How user thinks about (forms an internal representation of) site– An important issue in interactive systems, not covered much by Shneiderman– Both:

• Conceptual structure of the domain of information/knowledge presented by site– (or more task for interactive systems generally)

• Navigational structure of site

• Usually, “site structure” ~= “mental model” ~= hierarchy– Which is, of course, only an approximation

• Much said in “popular” design literature about “site structure”, but it boils down to hierarchies

– Because (again) the web is not hypertext – simple “goto” relations only for link structure and navigation

– Because logn is powerful! – as all computer scientists know!

A “Browse Interface”

• Recall what you know about menus …

• Note correspondence with hierarchy of web pages

• Call it a “browse interface” to the web site contents, hierarchically structured content, or whatever, much of what is relevant to menu design is relevant here

– Wide vs. shallow, number of alternatives, importance of menu labels, etc.

• Note that the mental model follows in part from interaction with content and structure

Non-Hierarchical Content Organizations, 1

• Linear sequence– E.g., training materials

Non-Hierarchical Content Organizations, 2

• “Hub and spoke” (or 2 level hierarchy)

• “Web” (though you’d hope there would be good search functionality)– What’s the mental model here? … “confused”

Site Use in Practice

• In practice, typically sites use all of above:– Site hierarchy with standard navigational links– Topical (“see also”) links to create a web

• And user “navigates” through (or forages in) site for information– Using both navigational links and search

Web Site Structures

• Audience, content, goals … all affect choice of site structure– (to make a long story short)

Site Search as Navigation

• “Conceptually properly placed” items still, of course, need to be accessed– Proper and useful info. arch. (categorization, keywords, etc.) important in search

• Despite efficiencies of hierarchies, pages often (must) be accessed through search facilities

– Implications for information architecture: Can’t handle everything in conceptual structure– Implications for navigation: Allow search, deal with orientation (more later)

• See practical limitations of “browse interface”

Site Design

Site Design, 1st - Goals and Audience

• Define purpose of site– Have talked about “software specification” and practical adaptations for web site

development– Define a set of goals to accomplish with Web site

• serves to provide direction as content, access, etc. issues arise

• First, considerations: – Have a statement of purpose– Know main objectives– Have a concise outline of information site will contain– Identify target audience (or know thy user)

• Will see has implications through design process

• Then, begin to identify all of content information and graphic resources – Content is the largest effort

Site Design, Identify Users of Site

• As in “know they user” …

• Site design be derived to meet user needs & expectations– E.g., novice (structured) and expert (direct access), … ability to accommodate both

• Some examples of users… surfers, novice, expert, international

• Web surfers– Less than 10% of Web readers ever scroll beyond top of Web pages– (maybe) Home pages aimed at browsers should be analogous to magazine covers– Entice casual browser with strong graphics and clear statements of content

• Provide clear and concise statement of what in site that might interest reader

• Novice and occasional users– Depend on clear structure and easy access to overviews that illustrate how

information is arranged within Web site– “Intimidated” by complex text menus – Benefit from overview pages, hierarchical maps, and design graphics and icons that

help trigger memory about where information is stored within site.

Site Design, … more User Types

• Expert and frequent users– Depend on site to obtain information quickly and accurately– Impatient with multiple low-density graphic menus that only offer two to six

choices at time – Want “stripped-down, fast-loading text menus”– Generally have very specific goals– Appreciate detailed text menus, site structure outlines, or comprehensive site

indexes that allow fast search and retrieval

• International users– It is, after all, the World Wide Web– Avoid jargon or obscure technical acronyms in introductory or explanatory pages – Other international issues …

• E.g., Don't assume that every reader follows local date and time conventions– to an American, "3/4/97" reads as "March 4, 1997," – but users in most other countries would read abbreviated date as "April 3, 1997"

Site Design, Type of Info. Presentation

• Presentation of information

• All presentations of information governed by a few parameters determined by:

– objectives – practical logistics of medium chosen – nature of audience

• Graph on right:– Major themes for www and intranet

information delivery

– 2 fundamental variables and user type:

1. how linear structure of presentation

2. how long typical user contact time

3. user type

FYI - Site Design:Surfers and Training

• User Type: Browsers, “Web Surfers”– May scan home page without an urgent mission or

purpose in mind

• User Type: Training– Web-based training tends to be very linear

• Which may not be right …

– Few opportunities to digress from central flow of presentation

– Does allows accurate prediction of contact time– Most training presentations assume a contact time

of less than one hour, or are broken up into sessions of an hour or less

– Training applications typically require a user log-in, and often present forms-based quiz questions in true/false or multiple-choice formats

– User log information and scores are typically stored in a database linked to Web site

FYI - Site Design:Teaching

• User Type: Teaching (vs. Training)– Built around a strong central narrative– Typically offer more opportunities to pursue

interesting digressions from main themes of Web site.

– Information presented is usually more sophisticated and in-depth than in training application

– Links are most powerful aspect of Web, • but they can also be a distraction that may

prevent students getting through basic presentation

– If want to provide students with links to other Web-based resources beyond local site might consider grouping links on a page separate away from main body of material.

– Often users print material from Web and read it later from paper

• Make easy by providing a "printing" version that consolidates many separate pages into one long page.

FYI - Site Design: Education

• User Type: Education (vs. teaching and training)

– Audiences for heuristic, self-directed learning prefer design strategies not too restrictive and linear

– Often typical user is already highly educated– Flexible, interactive, non-linear design structures

are ideal for these users• because it is so difficult to predict exactly what

topics will most interest an experienced professional or graduate student.

– Allow fast access to wide range of topics– Typically very dense with links to related material

within local Web site and beyond – Text-based lists of links work well for tables of

contents and indexes because they load fast and are dense with information

• But this audience is also easily bored and needs frequent stimulation of well-designed graphics and illustrations to stay involved with material

– Contact times are unpredictable• but will often be shorter than for training or

education sites because users are usually under time pressure.

– Easy printing options are also a must

FYI - Site Design:Reference

• User Type: Reference– Best-designed sites allow users to quickly:

• get into site• find what they want• then easily print or download what they find

– Typically there is no "story" to tell, so usage patterns are totally non-linear

• Content and menu structure must be organized to support:

– fast search and retrieval– easy downloading of files– convenient printing options.

– Graphics minimal to speed download times• May want search software instead of relying

exclusively on index-like lists of links

– Contact time is typically brief, the shorter the better.

(Web) Interface Design: Overview

(Web) Interface Design: Overview

• Actually, interface design in context of www applications

• Principles (mid-level) are same for WWW and ui’s generally– Guidelines and “pragmatics” differ

• Because of:

– Role of “conventions of the www” (recall Nielsen’s differences)• Web sites and pages are part of an open system• Vs. single application in which designer controls all

– Unpredictability of response time

– Constraints of browser environment

Web Interface Design, Intro., 1

• Recall Berners-Lee “design decision” when invented WWW:– Metaphor of W W W will be that the basic unit is “the page”

• Recall that the explosive growth of WWW occurred after a “graphic user interface” was made available for Web documents

– (or the WWW would be as popular as ftp)– (Web) users are familiar with GUI, or direct manipulation and menus, from other

applications

• So, though original vision/metaphor was an “electronic page”, how exactly that came to be implemented was not entirely foreseen

• Many of issues of Web design follow from more general issues of GUI design …


• Many of issues of Web design follow from more general issues of GUI design

• Web sites do have a “look and feel”, which follows from – 1. Way graphic elements used

• Can’t separate graphic design from interface design!• (e.g., same header and footer on all pages)

– 2. Mechanisms provided for navigation and interaction generally• (e.g., button bar or image maps used for navigation)

• As noted, much of difference between general interface design and Web design follows from:

1. Lack of generality of the way document content and interaction can be specified - by HTML, or the “database” form of “documents”, or content

2. The (at present) primary use of the Web to “deliver information” - As a document repository - So, much of focus in Web design derived from elements of design of other media - Especially print medium


• Web pages and printed document design …– Most current concepts about structuring information stem from the print medium:

• Organization of printed books and periodicals• Library indexing and catalog systems developed for printed information

• "Interface standards" of books are well established and widely agreed-upon

– Every feature of a book has evolved over centuries – Readers of early books faced organizational problems – After Gutenberg it took more than 100 years to “standardize”:

• page numbering, indexes, tables of contents, and title pages– Likely, Web documents will undergo a similar evolution and standardization

• And will change as technology changes


• Design precedents in print– Much of design, create, assemble, edit, and organize multiple forms of media is

not radically different from current practice in print media. – Much information about print organization good and available– Use what is known, rather than be the “pioneer” in design (at least at first)

• But, some things are different, e.g.,

– Web documents require a context: Make Web pages “free-standing”• Hypertext links allow users to access a single Web page just with a jump

– (vs. turning to the page in a book)– So, Web pages need to be more independent than pages in a conventional book

• Headers and footers can be more informative and elaborate than printed pages

• Consistently apply a few basic document design principles in every Web page

Interface Design, Document Elementswho, what, when, where

Interface Design, Document Elementswho, what, when, where - 1

• Structuring Web documents follows from standard elements of print journalism:

– who, what, when, and where

• Who (is speaking)– E.g., whether individual or an institution, – Always tell reader who created the Web page

• What (is being talked about)– For web, this basic editorial element is especially crucial– Document title is often first thing users see as page comes up – Often search engines index by title, or weight heavily– As graphics load, title may be only thing users sees for several seconds – Title typically is browser “bookmark” (which may be your legacy)– Should help user remember what on page, and why went there

Interface Design, Document Elementswho, what, when, where - 2

• When (was it said)– Timeliness is important element in evaluating a document

• newspapers, magazines, office correspondence dated – Every Web page should be dated, and changed when document updated

• especially important when general form not change

• Where (did it happen)– “Not everyone reads the URL closely”,

• unlike computer scientists– Include name and/or institutional affiliations– "Home" URL on at least main pages easy means of establishing origin– Useful for printing, finding again, etc.

• In sum:– Consistently state title, author, author's institutional affiliations, revision date, – Provide at least one link to a local home page in every page in system – Put "home page" URL on a few major pages in site

Background Ideas for Navigation and Interface Design

• Navigation and Wayfinding

• Information Foraging

Navigation and Wayfinding

• Metaphor of “wayfinding” in city and navigation in web

– … and metaphor used in design, and science– Better, when considered a hypothesis to be

empirically examined

• Four components of wayfinding1.Orientation

2. Route decisions

3. Mental mapping

4. ClosureFigure 4.1 — Venice is beautiful, but without the churches and campaniles that tower over the city and provide landmarks for navigation through the neighborhoods, the streets and canals would be a confusing warren of twists and turns to the visitor.

Navigation and Wayfinding

• Four components of wayfinding:

1.OrientationWhere am I am right now?

2. Route decisionsCan I find the way to where I want to go?

3. Mental mappingAre my experiences consistent and

understandable enough to know where I’ve been and to predict where I should go next?

4. ClosureCan I recognize that I have arrived in the

right place?

Figure 4.1 — Venice is beautiful, but without the churches and campaniles that tower over the city and provide landmarks for navigation through the neighborhoods, the streets and canals would be a confusing warren of twists and turns to the visitor.

Wayfinding - Empirically

• Interviewed people - local maps unique, but had same types of elements

– Paths: Familiar streets, walkways, subway routes, bus lines – Edges: Physical barriers of walls, fences, rivers, or shorelines – Districts: Places with distinct identity, e.g., in New York, Chinatown, Wall Street– Nodes: Major intersection or meeting places, e.g., clock in NY’s Grand Central

Terminal – Landmarks: Tall, visible structures that allow orientation over long distances

• So, more metaphorical fuel for understanding web navigation– L&H: “Web navigation has many similarities to physical movement, but actual

travel on the web is magical: you just appear at the next point in your journey from page to page, and there is no experience of the landscape unfolding before you as a series of landmarks.”

• Principles for wayfinding in web sites:– Paths: Create consistent, well-marked navigation paths – Regions: Create a unique but related identity for each site region – Nodes: Don’t confuse user with too many choices on home and major menu

pages – Landmarks: Consistent landmarks in site navigation and graphics to keep user

oriented

Information ForagingA Model of User Information Seeking

• Metaphorically (actually, analogically), users’ behavior in seeking information is somewhat like behavior exhibited by animals when seeking food– Animal behavior reflects efficiencies in resource (energy, time) allocation– Animal behavior extensively studied, and empirical results, equations, etc.

are available

• User’s tend to stay where information seeking behavior is successful (information is being found), and leave where it’s not– As would animal, seeking to optimize– May leave because nothing there (food, information) in first place, or

becomes exhausted (or information found)– “Availability” (density, probability of success) decreases

• There exist “patches” of < food | information >

• Cues relevant to information seeker help guide search

On to the Pragmatics …

• Or, principles and guidelines – freely intermixed

Interface Design, Navigation

• Navigation (moving about) is central to www in general and sites in particular

– Information repository

• Build clear navigation aids– Basic www interactions involve navigating

(unlabeled) hypertext links between documents (pages)

• A primitive means of navigation, vs., e.g., content-oriented navigation

– Need to augment www minimum with additional

• Main interface problem in Web sites:– Lack of a sense of where are within local

organization of information – Problem of orientation is a fundamental issue in

all large information spaces– Aids:

• Clear, consistent icons, graphic identity schemes• Graphic or text-based overview and summary screen

– Goal:• Give user confidence that can find what looking for

And the link back is typically only implicit!


• Guideline: Users should always be able to easily return to homepage and to other major navigation points in local site

– Basic links should be present on every page of site– Often graphic buttons that both provide basic navigation links, and – help create graphic identity that signals user that still within site domain

e.g., Netscape site this bar of buttons appears at foot of every page:

www.netscape.com

• Button bar one way to do it– useful (lots of choices in a small space),– predictable (it is always there, at bottom of every page), and – can provide a consistent graphic identity to every page in site.


• Guideline: No dead-end pages– Every Web page should contain at least one link– "Dead-end" pages: pages with no links to any other local

page in site – Frustration to users, – Often lost opportunity to bring browsers into other pages

in site

• Web pages often appear with no preamble: – Readers often follow links directly to subsection pages

buried deep in hierarchy of Web site

• Thus may never see Home Page or other introductory information in site

– Again, rationale for site information on all pages– Very common problem when using search engines which

index single pages

• If subsection pages do not contain links back up hierarchy, to home page or local menus pages, user essentially can’t access rest of Web site

– (average user doesn’t hack the URL)

Interface Design, Information Access

• Guideline: Give users direct access

• Goal: – Provide user with information want in fewest possible steps, and in shortest time

• Implies: – 1. An efficient hierarchy of information, minimize number of steps through menu pages – 2. Direct access to frequently needed information

• Studies of menus– Users prefer menus with a minimum of 5-7 links– Users may prefer a few dense screens of choices over many layers of short menus

• In table below, note that not need many levels of menus to incorporate large numbers of choices:

UI Design, Bandwidth and Interaction

• Bandwidth and interaction– Users will not tolerate long delays – Studies show that

• for most computing tasks threshold of frustration is around 10 seconds• <1 second is needed to be genuinely “interactive” • here, “am interacting with the information”, vs. “now its contacting ...”

– Advantages of graphics comes at a cost, should balance – Still, can assume high speed access for some sites

• Simplicity and consistency – more in page design– “Gratuitous complexity is to be shunned”

• Especially for users who may be depending on site for timely and accurate work-related information

• Interface metaphors should be simple, familiar and logical to the audience

– Simple metaphors for information design include a book or a library– not a spacecraft, television set, or fish bowl

• Best information designs are those most users never notice

Interface Design, Design Stability, Feedback, and Universal Access

• Design stability– Site that looks sloppily-built, with poor visual design and low editorial standards will not

inspire confidence in users– Functional stability means keeping interactive elements of site working reliably:

• 1. get things right first time as design site• 2. keeping things functioning smoothly over time

– Web sites really need maintenance, especially with multiple authors/contributors• It is a software project

• Feedback and dialog– Should provide constant visual and functional confirmation of user's whereabouts

• through options, navigation buttons, or uniformly-placed hypertext links– Will need to respond to user's inquiries and comments – Should provide direct links to site's editor or "webmaster"

• Universal Usability – E.g, Reader software: allows blind users to hear (via synthesized speech)

alternate messages supplied along with graphics, – HTML via “ALT” tags in IMG provides the input– Including “ALT” should also be done for viewing while graphics loading and when “load

image” turned off

If Design, Ex. Graphic Navigation

• Navigation: PBS Example– Graphic navigation and interactivity links within pages moves user's

attention from browser buttons to content of page– As in PBS site:

Interface Design, Context for Info.

• Provide context for orientation to page and information– Need sense of context of place within an organization of information

• (orientation within an information space)– In paper documents this sense of "where are":

• comes from mixture of graphic and editorial organizational cues • supplied by graphic design of book, organization of text, and physical sensation of book as an object.

– Electronic documents have no physical cues we take for granted in paper – Even view of individual Web pages is restricted for most users– Most Web pages don't fit completely on 14-15”, part of page that user can’t see:

In terms of seeing part of page, when seeing part of site:

Interface Design, Links and Navigation

• Links & navigation– "Going back" and going to previous page– Hypertext systems have problem not in print media: – Going "back" through a series of links have previously visited is not same as

paging"back" through preceding pages of an ordered sequence of pages. – (easy for us to see, but view of user is constrained, esp. wo context cues)

– E.g., often out of the site currently in:

Interface Design, Navigation Aids

• Button bars are useful– Radical shifts in context that links create can confuse Web users – (need organized cues and interface elements to follow and understand links from one Web

page to another)

• Fixed versus relative links – Particularly true when want users to be able to follow (or at least recognize) a sequence of

documents– "Next Page" and "Previous Page" buttons built into page itself help

• Augmenting standard Web viewer "Back" and” Forward" buttons

Interface Design, Navigation Aids

• For overall navigation– Logical place to put links back to home page, other menu pages related to

current page, etc. – Note on implementation: Button bar can be built with text

• Example below includes 1 small graphic

Site Design, Introduction(or conclusion)

• Think Small

• Underlying all organizational schemes are limitations of the human brain – Most people can only hold about four to seven discrete chunks of information in short-term

memory.

• Goal of most organizational schemes is to keep number of local variables reader must keep in short-term memory to a minimum,

– Both textual and graphic elements should support

• Information seeking patterns also suggests smaller, discrete units of information – more functional -- easier to navigate through

• Users rarely read long passages of text from computer screens, – Recall, “top 10 …”

• Small chunks of related information easier to organize into modular units of information – can share consistent organization scheme that can form basis for hypertext links within site

• "Small" can only be determined in context of presentation and what expect of audience

FYI - Site Design:Organizing Information

• Steps in organizing information …– Hierarchies pervasive

• Four basic steps in organizing information:– divide into logical units– establish a hierarchy of importance and generality– use hierarchy to structure relationships among chunks– analyze functional and aesthetic success of system

• Chunking information– Most information on Web consists of short reference documents read

non-sequentially

• Writers of technical documents discovered long before Web that users appreciate short "chunks" of information that can be scanned and located quickly

FYI Site Design:Chunking Information

• Chunking information– Short, uniformly-organized chunks of information – Particularly well suited for web presentation

• Useful because:

– 1. Few Web users spend time reading long passages of text on-screen. • Print them, rather than read extensive material online.

– 2. Discrete chunks of information lend themselves to Web links. • User expects to find a specific unit of related information• But limit to subdivision (1-3 pages of information about right for chunk)

– 3. Uniform format for organizing and presenting information:• allows users to apply their past experience with site to future searches and explorations • allows users to predict how an unfamiliar section of Web site will be organized.

– 4. Concise chunks of information are better suited to computer screen, • provides a only limited view of long documents. • very long Web pages tend to be disorienting

• Let nature of content suggest best ways to subdivide and organize information

– Makes little sense to arbitrarily divide up a long document– … which is easier to say, than to do ….

FYI - Site Design:Info./Page Hierarchy

• Hierarchy (again)– Necessary, if only to determine basic navigation structures– Most "chunks" of information can and should ranked in importance

• organized by degree of interrelationship among units• e.g., given a logical set of priorities,

– can build a hierarchy from most important or most general concepts, down to most specific or optional topics

FYI - Site Design:Relationships

• Relationships among site elements (information units)

• Users begin to build mental models of information structure– Use to assess relationships among topics, and make guesses about where find things

• Success on how well organization system matches user's expectations.

• Logical site organization allows users to make successful predictions about where to find things

• Consistent methods of grouping, ordering, labeling, and graphically arranging information allow users to extend their knowledge from pages they have visited to pages they are unfamiliar with.

• If mislead users with a structure that is not logical – (or have no comprehensible structure at all)– Users by difficulties of find their way around. – Not this mental model of site to look like this:

FYI - Site Design:Function - Access

• Analyze – aesthetics– practicality and efficiency of organizational scheme

• Design is largely a matter of balancing structure and relationship of menu or "home" pages and individual content pages or other linked graphics and documents

• Goal is to build a hierarchy of menus and pages that feels natural to the user, and doesn't interfere with their use of Web site or mislead them

• Web sites tend to grow almost “organically”, i.e., “on demand”– Often loose originally a reasonable menu scheme

FYI - Site Design:Function - Access

• If site actively growing, proper balance of menus and pages is a moving target

– User feedback (and analyzing own use of Web site) can help decide if menu scheme has outlived its usefulness or has poorly designed areas.

– Complex document structures require deep menu hierarchies, • but users should never be forced into page after page of menus if direct access is possible.

• Goal is to produce a well-balanced hierarchical tree that facilitates quick access to information and helps users understand how have organized things

FYI - Site Design:Site Structure - Sequence

• (simple) Sequence– Simplest way to organize information presenting a linear narrative. – Some information naturally flows as a narrative, time line, or in logical order is ideal for sequential treatment.

• Sequential ordering may be:– chronological, – logical series of topics progressing from general to specific, – even alphabetically sequenced, as in indexes, encyclopedias, and glossaries.

• However, simple sequential organization usually only works for smaller sites

Basic sequence may be augmented by: pages of digressions, parenthetic information, or links to information in other Web sites, …

FYI - Site Design:Structure - Hierarchy

• Hierarchy (as site structure) – fundamental organization– Sites organized as off-shoots of a single home page– Most users are familiar with hierarchical diagrams,

• find organization/metaphor easy to understand as a navigational aid.– Hierarchical organization imposes a useful discipline on analytical approach to

content• Hierarchies only work well when have thoroughly organized material

– Since hierarchical diagrams are so familiar users find it easy to build mental models of site:

FYI - Site Design:Site Structure - Grid

• Grid relations among pages– Grid good way to correlate variables,

• such as a time line versus historical information in a number of categories:

• "events," "technology," "culture," etc. – also, procedural manuals, lists

• Individual units in grid must share a highly uniform structure of topics and subtopics

– Topics often have no particular hierarchy of importance

• Ex., "tuberculosis" is not more or less important a diagnosis than "hilar adenopathy”

– but ideally both case descriptions would share a uniform structure of subtopics.

– Thus user could follow grid "down," reading about tuberculosis, or cut "across" grid perhaps by comparing the "diagnostic imaging" sections of both hilar adenopathy and tuberculosis.

• Can be difficult to understand unless user recognizes interrelationships between categories of information,

– so probably best for experienced audiences who already have a basic understanding of topic and its organization.

• Graphic overview maps are very useful in grid-like Web sites

FYI - Site Design:Site Structure - web

• Web– Few restrictions on pattern of information use– Goal is often to mimic associative thought and free flow of ideas,

• where users follow their interests in a heuristic, idiosyncratic pattern unique to each person who visits site

• exploit Web's power of linkage and association– Develops in Web sites with very dense links both to other information– Often the most impractical structure for Web sites, – Hard for user to understand and predict.– Best for small sites dominated by lists of links, aimed at highly educated or experienced

users looking for further education or enrichment, • Not for a basic understanding of topic

FYI - Site Design:Site Structure - Summary

• Summary– Most complex Web sites share aspects of all four types of information structures.

• Except in sites that rigorously enforce a sequence of pages, – Users are likely to use any Website in a free-form "web-like" manner,

• just as most non-fiction or reference books are used. – Below summarizes four basic organization patterns

• "linearity" of narrative X complexity of content

FYI - Site Design:Site Elements

• Site elements– Web sites vary style, content, organization, and purpose, – but act as information resources share basic characteristics

• Home pages, or front page, or “principal organizing element”, or …– All sites organized around a "home page," – Acts as a point of entry into complex of Web pages in site– In hierarchical organizations, home page at top of chart, – All pages in site should contain direct link back to home page – URL for home page is "address" of Web site (more later)– Reflects aesthetic and design goals for site,

• Graphic or text menus– Basic decision, e.g., graphic banners for continuity, etc.

• Who is audience for home page?– Dichotomy between slow-loading but attractive graphics-based home pages and fast-

loading but prosaic text-based home pages• Reflects need to address different audiences, with different expectations.

– Goals for most Web sites are transmission of internal information (to students, employees, and existing clients)

• And communicating with potential clients and general Web-browsing public

FYI - Site Design:Ex. - Highly Graphic

• Example: Highly Graphic– Below, graphic homepage design, not exceed dimensions of average monitor– Keeping graphic moderate size page loads reasonably quickly for a graphic

menu

www.kodak.com

FYI - Site Design:Ex. – Text-based

• Example: Text-based– Plain, mostly text-based home page for theW3C offers a very efficient ratio of

links per kilobyte of page size, • but at some cost in pure visual appeal

– Page is fast-loading and well designed for its audience of Web specialists, • but would not attract average browser through presentation alone:

www.w3.org/pub/WWW/

FYI - Site Design:Ex. - Combination

• Example: Combination– Library of Congress's Congressional information Web site "Thomas" – dual approach - moderate graphic topping a dense, well-organized set of text links:

Managing new/updated information"NEW" graphic – a standardDate every Web pages, and update as information changes so that users can be sure have latest version If site is complex, consider "What's New" page specifically designed to inform users of updated information

thomas.loc.gov/

FYI - Site Design:Elements: Menus and Submenus

• Menus, submenus, and home pages– Unless site is very small will probably need a number of submenu pages that user enters

from general category listing on home page.

• In complex sites not practical to load up homepage of a Web site with dozens of links– page gets too long to load in a timely manner, and – complexity of long pages may be off-putting to many users

• Each major submenu in effect becomes a mini-home page for that section of site

• Detailed menus may encourage frequent users to link directly to submenu in site. – Thus, submenus could become alternate home pages oriented to specific groups of users– Include links to other sections of site on each submenus

• "Other related sites" catalogues– From anywhere, only partial listings of information that is accessible in Web is possible– In a corporate or institutional site a well-edited, well-maintained "other sites" page may be

the most valuable and heavily-used resource in Web site

FYI - Site Design:Elements: Indices, FaQ, .

• Bibliographies, indexes, appendices– Concept of "documents" in electronic environments like Web pages is often

flexible, – Costs and practicality dictate that paper reports be very concise, and without

much supporting material or appendices– Bibliographies, glossaries, appendices of information that might be too bulky to

load into a task force report or committee recommendations document • could be placed in a Web site instead, making the information available to other

researchers without over-stuffing reports with material of interest to only a few readers.

• Frequently asked questions (FAQ) pages– FAQ evolved on Web and other Internet-based media– "Frequently Asked Questions" page where most commonly asked questions from

users are listed along with answers– Ideal for Web sites designed to provide support:

• Office staff and public relations personnel know that most questions new users ask have been asked and answered many times before

– Can improve user's understanding of information and services offered through Web site or professional group.

FYI - Site Design:Design Standards

• Design standards– “codified look and feel”– In most institutions Web has evolved from informal collection of personal or

group home pages – Semi-organized collection of sites listed in "front door"

• Ironically, universities and companies that adopted Web early often least organized

– over years evolved own approach to graphic design, user interface design, and information architecture

• Now intranets important component of information access and dissemination

End

• .

Design for Web Sites – Information Architecture, Interaction, Navigation Lynch and Horton: 3, 4, 5...

Documents

Transcript of Design for Web Sites – Information Architecture, Interaction, Navigation Lynch and Horton: 3, 4, 5...