CX002-3-3 Introduction to Web Programming

1. CX002-3-3Introduction to Web Programming Site Design & Page Design

2. Understanding the message • Type of information to be conveyed • Identifying the best way to convey the information to the targeted audience.

3. Know Your Medium • Possibilities and limitations of web publishing • Select the technologies to use in the implementation of your site • The ultimate goal is to maximize Audience Appeal

4. Audience Requirements Desired Message Limitations of the Medium DESIGN PROCESS SITE DESIGN Site Design • Site design is an example of a constraint satisfaction problem

5. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle “Spec sheets and ordering options for all of our on-line products” • Basic content definition “Downloadable upgrades for registered customers” “Background about our company” “How to contact us”

6. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle “Users can download a 30-day trial version of our system” • Basic content definition • Activity checklist “Users can browse our products and configure the options” “Users can send us bug reports” “Users can join our mailing list”

7. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle “User contact information (name, email, …)” • Basic content definition • Activity checklist • Information Flow In/Out “User profiles (password, site prefs, purchase record, shopping cart, …)” “Information about orders in progress, completed, shipped, ...”

8. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle “Site must be up 24/7 with a max. 5 minute recovery time” • Basic content definition • Activity checklist • Information Flow In/Out • Performance Assumptions “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”

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

10. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle “Site structure related to structure ofthe message” • 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)”

11. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle “Consistency promotes understanding” “Consistency reduces complexity” • Make use of association • Make use of consistency “Inconsistent sites don’t inspireconfidence” “Impacts on all aspects of a site (style, navigation, icons, context, …)

12. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle “Exhaustive navigation options” “All parts of site equally accessible” • Make use of association • Make use of consistency • Make use of context “Don’t assume a particular clicktrail (entry can be random)”

13. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle Drill-Down Structure • hierarchical, layered approach • analogous to directory structure • PRO: organizes complex data • CON: can be tiring to navigate • Make use of association • Make use of consistency • Make use of context • Structure and navigation Flat Structure • minimize layers & depth • exploit ‘slide show’ metaphor • provide add’l navigation options

14. Navigation Style Drill-Down Structure Flat Structure

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

16. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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!) • Use of Background

17. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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 • Use of Background • Use of Color

18. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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 • Use of Background • Use of Color • Use of Iconography

19. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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 • Use of Background • Use of Color • Use of Iconography • Desirable Site Elements

20. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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 • Use of Background • Use of Color • Use of Iconography • Desirable Site Elements • Testing Your Design

21. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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 • Keep Content Up to Date

22. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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 • Keep Content Up to Date • Prune Dead Links

23. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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.) • Keep Content Up to Date • Prune Dead Links • Manage Server Log Info

24. Requirements Analysis Site Design Site Construction Site Maintenance The Website Lifecycle • 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 • Keep Content Up to Date • Prune Dead Links • Manage Server Log Info • Regression Testing

25. Successful Site Design • Site Design is Process and Result oriented. • 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

26. Page Design Vs. Site Design • Ideally page design should follow from site design • The design should indicate what each page should accomplish before it is coded

27. Know Your Audience In & Out • Equipment • hardware, software, net connection • Learning Characteristics • e.g., “people who don’t like to find information but prefer to get first hand information. • Motivations for Surfing the Web • business, professional, personal, entertainment, education and etc.

28. Know Your Audience In & Out • Demographics • age, educational level, geographic location, language • Where do Users Arrive From? • home page, web ring, search engine

29. Choosing Information For A Page • Minimize the effort required to understand your message. • Relevant content in a well-organized layout vs. Crammed with extraneous information, displayed in a cluttered way

30. Choosing Information For A Page • What information must the page convey to meet your objectives? • What information is the audience interested in? • Distill messages down to their bare essence – Straight To The Point. • Include content that attracts the audience you want.

31. Information Presentation • Paragraphs: one per concise idea • Lists: sequential grouping of related items • Images: communicate your message; backgrounds, hyperlink anchors, navigation aids, etc. • Font Styles: emphasize key words, phrases

32. Breaking Up Long Pages • Avoid Placing too Much Content • slower downloads • “users don’t scroll” • message loses focus • Divide into smaller parts which makes reading easier.

33. Breaking Up Long Pages • Techniques for Long Pages • break up text with graphics • use horizontal rules • images with wrapped text

34. Q & A