Web Site Design

Web Site Design

• HCI and the Web – – Knowledge of interface design, applied to web– Won’t consider tools, programming – other classes, e.g., internet programming

• Web is a different sort of system … than “stand alone” systems– Not just an “interface”, though principles (and techniques) apply

• Site Design– Structure and information architecture

• Page design– Page scanning and canonical form– Visual logic and hierarchy

Web is Different, but …

1. Software system design principles are same– Much of web design literature “comes in at the bottom”

• I.e., for novice (untrained) designers• Though may apply principles, do not provide broader disciplinary context

– Student of computer science understands ideas about software engineering and principles of design

• E.g., Lynch and Horton “team roles” and SE project members

2. Interface design principles, are same for “web-based” (or browser-based) systems and “stand-alone” systems

– E.g., Shneiderman’s 8 “Golden Rules”, Nielsen and Toggazinni’s principles

3. Web is not “hypertext” (yet), yet many lessons of even pre-web hypertext are relevant

– E.g., “lost in hyperspace”, pre-WWW study, cf. SIGWEB– … and do consider the “semantic web … 3.0, 4.0, n.0 …”

About Web Design – In Practice

• Goal of hypertext:– “an electronic medium in which information presentation and access mirrors

human cognition and thus can be more efficient and effective as a medium for communication (than printing)”

– Also, admittedly early on in development of use and evolution of techniques

• And, yes, WWW is hypertext, at least in limited sense– But, technology (of network access) is really young, and slow:– bandwidth limitations drive much of “practical/applied” web site design– And, yes, television held great promise, too, …, but that’s another story

 • Note that much of what users see in Web sites (and even

“good” web sites) is driven by economic factors, rather than “user-centered” design

– i.e., design in which user’s (vs. the business’) best interests are design goal– Often/typically real goal of site is to sell advertising

• Business models for Internets are evolving –  

• Nonetheless, our focus is on user-centered design– Design in which user can access information efficiently and effectively, etc. 

1. Software Design Principles are Same

• Project stages of L&H reflect, different emphases, but same stages

1. Software Design Principles are Same… note terminology differences

• Project stakeholder or sponsor • Web project manager

– Account executive – Quality assurance tester

• Usability lead • Information architect –site content and structure• Art director

– Web graphic designer – Interactive designer (Flash, JavaScript, Ajax) – Media specialist (photography, illustration)

• Web technology lead – Web application programmer– Web page engineer (xhtml, css) – Database administrator – Web systems expert or webmaster

• Site production lead – html page coder

• Site editor – Site copywriter – Content domain expert (content coord., res.)

• Project roles of L&H reflect, different emphases, but same roles

• “Client” - Boss• Project manager

– Account executive – Quality assurance tester

• Usability lead • (e.g., database under “Lead Prog”/”arch”)• (e.g., Art director under

“Lead… )– Web graphic designer – Interactive designer (Flash, …) – Media specialist (photography, illustration)

• Lead Programmer/Architect – Web application programmer– Web page engineer (xhtml, css) – Database administrator – Web systems expert or webmaster

• (under “Lead Prog”) Site production lead – html page coder

• (with database, under “Lead …) Site ed.– Site copywriter – Content domain expert (content , res.)

1. Software Design Principles are Same

• … or similar

1. Software Design Principles are Same

• … or similar

• Here, provide detail specific to web sites

2. Interface Design Principles are Same

• Have had a close look at:– Guidelines, principles, and theories

Guidelines, Principles, and Theories

• Guidelines (most specific)– Specific and practical

• Cure for design problems, caution dangers, shared language and terminology

– Accumulates (and encapsulates) past experience and best practices

• “blinking is bad, never use it”– May be: too specific, incomplete, hard to

apply, and sometimes wrong– Lowest level

• Principles (“rules of thumb”)– “Rules that distill out the principles of

effective user interfaces”• E.g., Determine users’ skill level

– More general and flexible than guideline

• High level theories and models– Goal is to describe objects and actions with

consistent terminology• Allowing comprehensible explanations to

support communication and teaching– Other theories are predictive

• E.g., reading, pointing, and typing times

Theories

Guidelines

Principles

… and recall, Principles: Shneiderman’s “8 Golden Rules of Interface Design”

• Schneiderman’s 8 rules (principles):

1. Strive for consistency2. Cater to universal usability3. Offer informative feedback4. Design dialogs to yield closure5. Prevent errors6. Permit easy reversal of actions7. Support internal locus of control8. Reduce short term memory

… as well as Nielsen’s Principles for Usable Design

• Meet expectations– 1. Match the real world– 2. Consistency & standards– 3. Help & documentation

• User is the boss– 4. User control & freedom– 5. Visibility of system status– 6. Flexibility & efficiency

• Handle errors– 7. Error prevention– 8. Recognition, not recall– 9. Error reporting, diagnosis, and recovery

• Keep it simple– 10. Aesthetic & minimalist design

… even Toggazinni’s 16 Principles

• Anticipation

• Autonomy

• Color blindness

• Consistency

• Defaults

• Efficiency

• Explorable interfaces

• Fitts’s Law

• Human interface objects

• Latency reduction

• Learnability

• Metaphors

• Protect users’ work

• Readability

• Track state

• Visible navigation

Web Site Design Differs from User Interface Design

• WWW not same kind of interactive system, as “computer interface”

• (at least as discussed in traditional HCI literature)– Loooooooong latency

• 1/10 – 1/30 second required for perceptual continuity• 1 sec continuity of interaction

– i.e., “immediate response”• ~ 10 (or 5-30) seconds for task continuity

– So, response time from web is at limit of task continuity

• Different, and not an interactive system with “immediate” response– not to be studied in same way many elements of interfaces are – and maybe principle focus and principles of design yet to evolve

• Thus www, acts as information repository, … and other things– Whether for “knowledge”, shopping, chatting, ..., but not traditional system– Hence, focus on information architecture

Difference Between Web Design and GUI Design – Nielsen

• Designing for Web different from designing traditional user interfaces– Designer has to give up full control

• Share responsibility for the UI with users and their client hardware/software.

• Device Diversity– In traditional GUI design, control every pixel on the screen

• Designing to abstract UI specification is hard– Those these days with javascript, etc. much more freedom

• The User Controls Navigation– Can jump straight into the middle of a site from a search engine!

• On Web, users move between sites at a very rapid pace and the borders between different designs (i.e., sites) are very fluid

The Difference Between Web Design and GUI Design – Nielsen, 1

• Designing for Web different from for traditional user interfaces– Designer has to give up full control

• Share responsibility for the UI with users and their client hardware/software

• Device Diversity– In traditional GUI design, control every pixel on the screen– In traditional design, the difference in screen area between a laptop and a high-

end workstation is a factor of six• Need to accommodate a factor of 100 in screen area – handhelds to screens• A factor of 1,000 in bandwidth between slow and fast connections.

• Designing to abstract UI specification is hard– E.g., HTML– Separate meaning and presentation, e.g., style sheets to specify presentation

• but doing so works better for informational content than for interactions

– … though things are getting better as tools evolve

The Difference Between Web Design and GUI Design – Nielsen, 2

• The User Controls Navigation– In traditional GUI design, the designer can control where the user can go when

• You can gray out menu options that are not applicable in the current state, etc.

– On Web, user controls his or her navigation through pages– Users can take paths that were never intended by designer:

• Jump straight into the middle of a site from a search engine without ever going through the home page

• Users also control own bookmark menu and can use it to create a customized interface to a site

• Web designers need to accommodate and support user-controlled navigation

– Design for freedom of movement and, • E.g., logo (linked to home page) on every page for context and navigation

for users who have gone straight to that page.

The Difference Between Web Design and GUI Design – Nielsen, 3

• “Part of a Whole”– A traditional application is an enclosed user interface experience:

• User is fundamentally "in" a single application at any given time and only that application's commands and interaction conventions are active.

• Users spend relatively long periods of time in each application and become familiar with its features and design.

• On Web, users move between sites at a very rapid pace and borders between different designs (i.e., sites) are very fluid

– Often users spend less than a few minutes at a time at any given site, • Users' navigation frequently takes them from site to site to site as they follow

hyperlinks. – Because of this rapid movement, users feel using the Web as a whole

• … rather than any specific site: – Users demand ability to use site on basis of Web conventions they

have picked up as an aggregate of their experience using other sites. – In usability studies, users complain whenever they are exposed to sites with too

diverging ways of doing things• Web as a whole has become a genre and each site is interpreted relative

to the rules of the genre.

3. Web is Different from (Visionary) Hypertextwith respect to types of links/associations

• Bottom line, hypertext and Web can both be modeled as G (V,E)– For hypertext, edges are undirected and labeled (with anything!)

– For web, edges are directed and unlabeled• Though, who would know edges undirected (browser makes transparent)• Web 2.0 and higher aim to provide (semantic) labels

– Promise of the future?

• So, current realization of “world wide repository of knowledge” is really quite primitive– But, it is still revolutionary in sheer quantity of information stored,

indexed (sort of), and retrievable

– And, we are early on in implementation• 2014 – 1991 = 23

– And, all appreciate what next steps need to• Moore’s law is on our side (though that’s just for computers)

About Web DesignAs Presented by L&H and Nielsen

• Recall, hypertext– Goal of hypertext:

• “an electronic medium in which information presentation and access mirrors human cognition and thus can be more efficient and effective as a medium for communication (than printing)”

• also, admittedly early on in development of use and evolution of techniques– And, yes, WWW is hypertext, at least in limited sense

• But, technology (of network access) is really young, and slow:– bandwidth limitations drive much of “practical/applied” web site design

• And, yes, television held great promise, too, …, but that’s another story • Note, that much of what users see in Web sites (and even “good” web

sites) is driven by economic factors - advertising, rather than “user-centered” design

– i.e., design in which user’s (vs. the business’) best interests are design goal– often, real goal of site is to sell advertising

 • Nonetheless, our focus is on user-centered design

– Design in which user can access information efficiently and effectively, etc.– Perhaps, not a bad place to start in general

• entirely appropriate for many sites

About Nielsen and Style Guide

• Yale Style Manual sometimes seem “quaint”

– “quaint” because of their focus on technology in a domain in which two years sees significant change in technology

• Again, we’re just (historically) getting started– HTML 2.0, 3.0, 4.0, 5.0, 6.0, …. Javascript, …, ASP, …, XML,

XHTML, …, – and Java programs to run in the browser window

• Which really opens things up!

End

• .