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

20-753: Fundamentals of Web Programming 2 Lecture 2: Web Site Design Today’s Topics The Audience, The Message, and The Medium The Elements of Site Design The Web Site Life Cycle

20-753: Fundamentals of Web Programming 3 Lecture 2: Web Site Design “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

20-753: Fundamentals of Web Programming 4 Lecture 2: Web Site Design “Know Your Message” What types of information do you want to convey How best to convey that information to the target audience

20-753: Fundamentals of Web Programming 5 Lecture 2: Web Site Design “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”

20-753: Fundamentals of Web Programming 6 Lecture 2: Web Site Design Site Design Site design is an example of a constraint satisfaction problem DESIGN PROCESS Audience Requirements Desired Message Limitations of the Medium SITE DESIGN

20-753: Fundamentals of Web Programming 7 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Basic content definition “Spec sheets and ordering options for all of our on-line products” “Downloadable upgrades for registered customers” “Background about our company” “How to contact us”

20-753: Fundamentals of Web Programming 8 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Basic content definition Activity checklist “Users can download a 30-day trial version of our system” “Users can browse our products and configure the options” “Users can send us bug reports” “Users can join our mailing list”

20-753: Fundamentals of Web Programming 9 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Basic content definition Activity checklist Information Flow In/Out “User contact information (name, , …)” “User profiles (password, site prefs, purchase record, shopping cart, …)” “Information about orders in progress, completed, shipped,...”

20-753: Fundamentals of Web Programming 10 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance 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 or compromised” “The projected number of hits or transactions per second must be efficiently processed” “Delivery speed must be acceptable at 14.4 Kbps network bandwidth”

20-753: Fundamentals of Web Programming 11 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Basic content definition Activity checklist Information Flow In/Out Performance Assumptions User Technology Profile “What kind of monitor should we assume as a low-end?” “What browsers should we plan to support?” “Designing for the visually impaired audience” “What plug-ins will we require?” “Required network bandwidth?”

20-753: Fundamentals of Web Programming 12 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Make use of association “Group related items together” “Provide adequate distinction between disparate groups of items” “Make use of emerging conventions (e.g. placement of navigation aids)” “Site structure related to structure of the message”

20-753: Fundamentals of Web Programming 13 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Make use of association Make use of consistency “Consistency reduces complexity” “Inconsistent sites don’t inspire confidence” “Impacts on all aspects of a site (style, navigation, icons, context, …) “Consistency promotes understanding”

20-753: Fundamentals of Web Programming 14 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Make use of association Make use of consistency Make use of context “All parts of site equally accessible” “Don’t assume a particular click trail (entry can be random)” “Exhaustive navigation options”

20-753: Fundamentals of Web Programming 15 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance 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

20-753: Fundamentals of Web Programming 16 Lecture 2: Web Site Design Navigation Styles Drill-Down StructureFlat Structure

20-753: Fundamentals of Web Programming 17 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Make use of association Make use of consistency Make use of context Structure and navigation Develop a “site style” “Style should reflect corporate identity (e.g., choice of background, graphics, etc.)” “Style should be compelling and add to user interest in the site” “Your home page is your ‘first impression’ on the customer” “Less is More”

20-753: Fundamentals of Web Programming 18 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Use of Background Should not interfere with the foreground content Should reflect corporate style Images and colors are both possible Be careful with contrast and color (remember, monitors are not all the same!)

20-753: Fundamentals of Web Programming 19 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Use of Background Use of Color You can control text and link color as well as background Distinguish visited links Use color as a visual cue Available colors may be limited to a specific palette (usually 256 colors) Color rendering can be hard to control on some systems

20-753: Fundamentals of Web Programming 20 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Use of Background Use of Color Use of Iconography Use intuitive icons (i.e., form follows function) Association between icon and meaning must be instant, and universal (cross-cultural) User testing can be very useful (try icons without labels) Icons are useful because they take up little space, and add visual appeal

20-753: Fundamentals of Web Programming 21 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance 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

20-753: Fundamentals of Web Programming 22 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Use of Background Use of Color Use of Iconography Desirable Site Elements Testing Your Design Beta test the site with some sample users (both experienced and novice) Test your site with different browsers Test your site at different screen resolutions Benchmark your site at different connection speeds

20-753: Fundamentals of Web Programming 23 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Keep Content Up to Date Update your ‘What’s New’ on a regular basis Remove or update obsolete information Use redirection for smoother user experience A dynamic, evolving site will invite ongoing user visits over time; a tired site will not

20-753: Fundamentals of Web Programming 24 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Keep Content Up to Date Prune Dead Links Most sites contain links to external sites which change over time Internal links can also change over time Automated link testing is very useful for testing large sites Remove / replace obsolete links

20-753: Fundamentals of Web Programming 25 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Keep Content Up to Date Prune Dead Links Manage Server Log Info All logs grow over time and must be explicitly managed Access logs are useful source of information for (rough) user demographics and gauging interest in site content Regular review of error logs is a must Includes content-specific data (e.g., guestbooks, feedback, etc.)

20-753: Fundamentals of Web Programming 26 Lecture 2: Web Site Design The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Keep Content Up to Date Prune Dead Links Manage Server Log Info Regression Testing Software you depend on (browsers, plug-ins) will change over time Re-test your site on new browser versions Be sure to link to latest plug-in versions and re-test your content Help your users to manage the plug-ins they need for your site

20-753: Fundamentals of Web Programming 27 Lecture 2: Web Site Design 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