20-753: Fundamentals of Web Programming 1 Lecture 2: Web Site Design Fundamentals of Web Programming Lecture 2: Web Site Design

120-753: Fundamentals of Web Programming

Lecture 2: Web Site Design

Fundamentals ofWeb Programming




Today’s Topics

• The Audience, The Message, andThe Medium

• The Elements of Site Design• The Web Site Life Cycle



“Know Your Audience”

• How they see and understand information

• What types of computers they use• What browser software they have• How fast their connections are



“Know Your Message”

• What types of information do you want to convey

• How best to convey that information to the target audience



“Know Your Medium”

• Possibilities and limitations of web publishing

• Select the technologies to use in the implementation of your site

• Overall Goal:“Maximum Audience Appeal”



Site Design

• Site design is an example of a constraint satisfaction problem

DESIGN PROCESS

AudienceRequirements

DesiredMessage

Limitations ofthe Medium

SITE DESIGN



The Web Site Lifecycle

RequirementsAnalysis

SiteDesign

SiteConstruction

SiteMaintenance

• Basic content definition

“Spec sheets and orderingoptions for all of our on-line products”

“Downloadable upgrades forregistered customers”

“Background about our company”

“How to contact us”





SiteDesign

SiteConstruction

SiteMaintenance

• Basic content definition• Activity checklist

“Users can download a 30-day trialversion of our system”

“Users can browse our products andconfigure the options”

“Users can send us bug reports”

“Users can join our mailing list”





SiteDesign

SiteConstruction

SiteMaintenance

• Basic content definition• Activity checklist• Information Flow In/Out

“User contact information (name,email, …)”

“User profiles (password, site prefs,purchase record, shopping cart, …)”

“Information about orders in progress,completed, shipped, ...”





SiteDesign

SiteConstruction

SiteMaintenance

• Basic content definition• Activity checklist• Information Flow In/Out• Performance Assumptions

“Site must be up 24/7 with a max.5 minute recovery time”

“Secure data must not be lost orcompromised”

“The projected number of hits ortransactions per second must beefficiently processed”

“Delivery speed must be acceptableat 14.4 Kbps network bandwidth”





SiteDesign

SiteConstruction

SiteMaintenance

• Basic content definition• Activity checklist• Information Flow In/Out• Performance Assumptions• User Technology Profile

“What kind of monitor should weassume as a low-end?”

“What browsers should we planto support?”

“Designing for the visually impairedaudience”

“What plug-ins will we require?”

“Required network bandwidth?”





SiteDesign

SiteConstruction

SiteMaintenance

• Make use of association“Group related items together”

“Provide adequate distinction betweendisparate groups of items”

“Make use of emerging conventions (e.g. placement of navigation aids)”

“Site structure related to structure ofthe message”





SiteDesign

SiteConstruction

SiteMaintenance

• Make use of association• Make use of consistency

“Consistency reduces complexity”

“Inconsistent sites don’t inspireconfidence”

“Impacts on all aspects of a site (style, navigation, icons, context, …)

“Consistency promotes understanding”





SiteDesign

SiteConstruction

SiteMaintenance

• Make use of association• Make use of consistency• Make use of context

“All parts of site equally accessible”

“Don’t assume a particular clicktrail (entry can be random)”

“Exhaustive navigation options”





SiteDesign

SiteConstruction

SiteMaintenance

• Make use of association• Make use of consistency• Make use of context• Structure and navigation

Drill-Down Structure

• hierarchical, layered approach• analogous to directory structure• PRO: organizes complex data• CON: can be tiring to navigate

Flat Structure

• minimize layers & depth• exploit ‘slide show’ metaphor• provide add’l navigation options



Navigation Styles

Drill-Down Structure Flat Structure





SiteDesign

SiteConstruction

SiteMaintenance

• Make use of association• Make use of consistency• Make use of context• Structure and navigation• Develop a “site style”

“Style should reflect corporateidentity (e.g., choice of background,graphics, etc.)”

“Style should be compelling andadd to user interest in the site”

“Your home page is your ‘firstimpression’ on the customer”

“Less is More”





SiteDesign

SiteConstruction

SiteMaintenance

• Use of Background• Should not interfere with theforeground content• Should reflect corporate style• Images and colors are bothpossible• Be careful with contrast andcolor (remember, monitors arenot all the same!)





SiteDesign

SiteConstruction

SiteMaintenance

• Use of Background• Use of Color

• You can control text and linkcolor as well as background• Distinguish visited links• Use color as a visual cue• Available colors may be limitedto a specific palette (usually 256colors)• Color rendering can be hard tocontrol on some systems





SiteDesign

SiteConstruction

SiteMaintenance

• Use of Background• Use of Color• Use of Iconography

• Use intuitive icons (i.e., formfollows function)• Association between icon andmeaning must be instant, anduniversal (cross-cultural)• User testing can be very useful(try icons without labels)• Icons are useful because theytake up little space, and addvisual appeal





SiteDesign

SiteConstruction

SiteMaintenance

• Use of Background• Use of Color• Use of Iconography• Desirable Site Elements

• Table of Contents (site map)• Search Engines• Navigation Tools• “What’s New” pages• Guest Books• Feedback Mechanisms• Mailing Lists• Threaded Discussion Groups• Chat Channels• Multimedia Content





SiteDesign

SiteConstruction

SiteMaintenance

• Use of Background• Use of Color• Use of Iconography• Desirable Site Elements• Testing Your Design

• Beta test the site with somesample users (both experiencedand novice)• Test your site with differentbrowsers• Test your site at differentscreen resolutions• Benchmark your site atdifferent connection speeds





SiteDesign

SiteConstruction

SiteMaintenance

• Keep Content Up to Date• Update your ‘What’s New’ ona regular basis• Remove or update obsoleteinformation• Use redirection for smootheruser experience• A dynamic, evolving site willinvite ongoing user visits overtime; a tired site will not





SiteDesign

SiteConstruction

SiteMaintenance

• Keep Content Up to Date• Prune Dead Links

• Most sites contain links toexternal sites which change overtime• Internal links can also changeover time• Automated link testing is veryuseful for testing large sites• Remove / replace obsolete links





SiteDesign

SiteConstruction

SiteMaintenance

• Keep Content Up to Date• Prune Dead Links• Manage Server Log Info

• All logs grow over time and mustbe explicitly managed• Access logs are useful source ofinformation for (rough) userdemographics and gauging interestin site content• Regular review of error logs is amust• Includes content-specific data(e.g., guestbooks, feedback, etc.)





SiteDesign

SiteConstruction

SiteMaintenance

• Keep Content Up to Date• Prune Dead Links• Manage Server Log Info• Regression Testing

• Software you depend on(browsers, plug-ins) will changeover time• Re-test your site on new browser versions• Be sure to link to latest plug-inversions and re-test your content• Help your users to manage theplug-ins they need for your site



Summary

• Site Design as Process and Result• Analyze and document the

Audience, Message, and Medium• Use explicit design documentation

to drive implementation• Testing should explicitly match the

elements of the finished site with the requisite design criteria

Documents

20-753: Fundamentals of Web Programming 1 Lecture 2: Web Site Design Fundamentals of Web Programming Lecture 2: Web Site Design