Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Fundamentals of Web Programming Lecture 2: Web Site Design 20-753: Fundamentals of Web Programming Lecture 2: Web Site Design 1 Today’s Topics • The The • The • The Audience, The Message, and Medium Elements of Site Design Web Site Life Cycle 20-753: Fundamentals of Web Programming Lecture 2: Web Site Design 2 “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 Lecture 2: Web Site Design 3 “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 Lecture 2: Web Site Design 4 “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 Lecture 2: Web Site Design 5 Site Design • Site design is an example of a constraint satisfaction problem Audience Requirements Desired Message Limitations of the Medium DESIGN PROCESS SITE DESIGN 20-753: Fundamentals of Web Programming Lecture 2: Web Site Design 6 The Web Site Lifecycle Requirements Analysis Site Design • Basic content definition Site Construction Site Maintenance “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 Lecture 2: Web Site Design 7 The Web Site Lifecycle Requirements Analysis Site Design • Basic content definition • Activity checklist Site Construction Site Maintenance “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 Lecture 2: Web Site Design 8 The Web Site Lifecycle Requirements Analysis Site Design • Basic content definition • Activity checklist • Information Flow In/Out Site Construction Site Maintenance “User contact information (name, email, …)” “User profiles (password, site prefs, purchase record, shopping cart, …)” “Information about orders in progress, completed, shipped, ...” 20-753: Fundamentals of Web Programming Lecture 2: Web Site Design 9 The Web Site Lifecycle Requirements Analysis • • • • Site Design Basic content definition Activity checklist Information Flow In/Out Performance Assumptions Site Construction Site Maintenance “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 Lecture 2: Web Site Design 10 The Web Site Lifecycle Requirements Analysis • • • • • Site Design Basic content definition Activity checklist Information Flow In/Out Performance Assumptions User Technology Profile Site Construction Site Maintenance “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 Lecture 2: Web Site Design 11 The Web Site Lifecycle Requirements Analysis Site Design • Make use of association Site Construction Site Maintenance “Site structure related to structure of the message” “Group related items together” “Provide adequate distinction between disparate groups of items” “Make use of emerging conventions (e.g. placement of navigation aids)” 20-753: Fundamentals of Web Programming Lecture 2: Web Site Design 12 The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance “Consistency promotes understanding” • 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, …) 20-753: Fundamentals of Web Programming Lecture 2: Web Site Design 13 The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance “Exhaustive navigation options” • Make use of association • Make use of consistency • Make use of context 20-753: Fundamentals of Web Programming “All parts of site equally accessible” “Don’t assume a particular click trail (entry can be random)” Lecture 2: Web Site Design 14 The Web Site Lifecycle Requirements Analysis Site Design Site Construction Site Maintenance Drill-Down Structure • • • • Make use Make use Make use Structure of association of consistency of context and navigation • • • • 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 Lecture 2: Web Site Design 15 Navigation Styles Drill-Down Structure 20-753: Fundamentals of Web Programming Flat Structure Lecture 2: Web Site Design 16 The Web Site Lifecycle Requirements Analysis • • • • • Site Design Make use of association Make use of consistency Make use of context Structure and navigation Develop a “site style” Site Construction Site Maintenance “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 Lecture 2: Web Site Design 17 The Web Site Lifecycle Requirements Analysis Site Design • 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 Site Construction Site Maintenance • Use of Background Lecture 2: Web Site Design 18 The Web Site Lifecycle Requirements Analysis Site Design • 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 Site Construction Site Maintenance • Use of Background • Use of Color Lecture 2: Web Site Design 19 The Web Site Lifecycle Requirements Analysis Site Design • 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 Site Construction Site Maintenance • Use of Background • Use of Color • Use of Iconography Lecture 2: Web Site Design 20 The Web Site Lifecycle Requirements Analysis • • • • • • • • • • Site Design 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 Site Construction • • • • Site Maintenance Use of Background Use of Color Use of Iconography Desirable Site Elements Lecture 2: Web Site Design 21 The Web Site Lifecycle Requirements Analysis Site 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 Site Construction • • • • • Site Maintenance Use of Background Use of Color Use of Iconography Desirable Site Elements Testing Your Design Lecture 2: Web Site Design 22 The Web Site Lifecycle Requirements Analysis Site Design • 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 Site Construction Site Maintenance • Keep Content Up to Date Lecture 2: Web Site Design 23 The Web Site Lifecycle Requirements Analysis Site Design • 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 Site Construction Site Maintenance • Keep Content Up to Date • Prune Dead Links Lecture 2: Web Site Design 24 The Web Site Lifecycle Requirements Analysis Site Design • 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 Site Construction Site Maintenance • Keep Content Up to Date • Prune Dead Links • Manage Server Log Info Lecture 2: Web Site Design 25 The Web Site Lifecycle Requirements Analysis Site Design • 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 Site Construction • • • • Site Maintenance Keep Content Up to Date Prune Dead Links Manage Server Log Info Regression Testing Lecture 2: Web Site Design 26 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 20-753: Fundamentals of Web Programming Lecture 2: Web Site Design 27