1 / 67

Web Site Analysis and Design

Web Site Analysis and Design. Outline. Part 1: Planning What kind of site? For what audience? Part 2: Design Issues Tools Part 2: Implementation HTML Putting a site on-line. Goals for this Module. Understand web sites as structured objects

lavi
Télécharger la présentation

Web Site Analysis and Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Site Analysis and Design

  2. Outline • Part 1: Planning • What kind of site? • For what audience? • Part 2: Design • Issues • Tools • Part 2: Implementation • HTML • Putting a site on-line Ottawa E-Commerce Overview A. Rau-Chaplin

  3. Goals for this Module • Understand web sites as structured objects • Enough knowledge to be dangerous: Being a good client… • It is not magic! Demystifying HTML • Enough skills to post your assignments Ottawa E-Commerce Overview A. Rau-Chaplin

  4. Part 1:Planning So you want to create a web site? Ottawa E-Commerce Overview A. Rau-Chaplin

  5. Why are you building this site? • To make money • To disseminate information • To stroke your ego Ottawa E-Commerce Overview A. Rau-Chaplin

  6. Sites designed to make money • Corporations • IBM • Small Business • Rosebridge House • Non Profit Organizations • Canadian Red Cross Ottawa E-Commerce Overview A. Rau-Chaplin

  7. Sites designed to make money: Common Qualities • It is not about art • It is not about ego • It can and should be about information • Its mostly about money Ottawa E-Commerce Overview A. Rau-Chaplin

  8. Sites designed to disseminate information or opinions • Corporate intranets • Banner • Educational institutions • Dalhousie E-commerce Program • E-zines • Birds of a feather sites • health sites, fan clubs, political, social, religious,... Ottawa E-Commerce Overview A. Rau-Chaplin

  9. Sites designed to disseminate information: Common Qualities • It is not about art • It is not about ego (for info sites) • Its often about ego (for opinion sites) • Its mostly about information • Its generally not about money Ottawa E-Commerce Overview A. Rau-Chaplin

  10. Questions • Where do Government sites fit in? • Information • www.strategis.ic.gc.ca • Money Making • www.canadapost.ca • https://commerce02.procure.com/cpc/cgi-win/cata.exe/e • Ego ??? Ottawa E-Commerce Overview A. Rau-Chaplin

  11. Government On-line • The same but more… • Diversity of audience • Language • Consistence • Fairness • Security • Accountability • Trends On-line Real-Time Processing On-line Initiation On-line Info Ottawa E-Commerce Overview A. Rau-Chaplin

  12. Other Questions • What other categories of sites can you think of? • What does a user expect of a money making site? • What does a user expect of an informational site? • How should the category affect the sites design? Ottawa E-Commerce Overview A. Rau-Chaplin

  13. Who is your target audience? • Why is it important? • What kinds of issues does it effect? • Who is the audience for • IBM • Canadian Red Cross • Worklink Ottawa E-Commerce Overview A. Rau-Chaplin

  14. A Single Audience? • Audience for Business Sites • Current Customers • Potential Customers • Investors • Suppliers (Separate?) • Sales force (Separate?) • ??? Ottawa E-Commerce Overview A. Rau-Chaplin

  15. Scenarios • Audience for Business Sites: Current Customers • Provide all critical info about your products and services • Order verification • Placing new orders • ... • What tasks? What scenarios? Make a list! Ottawa E-Commerce Overview A. Rau-Chaplin

  16. Audience • Who are they? • Separate then into subgroups based on • Level of interest • How they arrived • Multiple entry points?? • Examples: dell,(W7PXM), download.com • How are they expected to search for what they want? Ottawa E-Commerce Overview A. Rau-Chaplin

  17. Planning Tools • Principles • Scenarios Ottawa E-Commerce Overview A. Rau-Chaplin

  18. Principles • A short listing of what it is all about • Audience • Look • Purpose • Image… • An aid in making future decisions • A language for communication between player Ottawa E-Commerce Overview A. Rau-Chaplin

  19. Scenarios • Role-playing • The players • Their Task • A story, not a sequence of commands • Customer oriented • Mixed granularity • How many scenarios? • Enough to cover the main audience with “typical” motivation. Ottawa E-Commerce Overview A. Rau-Chaplin

  20. Part 2:Design Issues and Tools Ottawa E-Commerce Overview A. Rau-Chaplin

  21. Outline • Part 1: Planning • What kind of site? • For what audience? • Part 2: Design • The home page • Navigation • Using Storyboards, site maps, page layout grids • Part 3: Implementation Ottawa E-Commerce Overview A. Rau-Chaplin

  22. Types of pages Main Page Home Page Main Topic #1 Main Topic #2 Main Topic #n ... • Tree Structure • Depth? • Content view Subsidiary #1a Subsidiary #1b Ottawa E-Commerce Overview A. Rau-Chaplin

  23. Home Page • The sites purpose • what, when, who, where and why • What kind of content is contained in the site? • How to find the content? • Am I the target audience? • Put the most important content up front! Ottawa E-Commerce Overview A. Rau-Chaplin

  24. Main Topic Pages • All about navigation • Important topics go here • Dynamic content • Defines the sub domain! Ottawa E-Commerce Overview A. Rau-Chaplin

  25. Subsidiary Pages • Subsets of the main topic page • You are now two levels down! • Make clear where the user is • Make clear when on the site and off • User may arrive here first! • Example: • CNN News Ottawa E-Commerce Overview A. Rau-Chaplin

  26. On Every Page • Content matters • Writing style matters • Structure matters • Consistence matters • Aesthetics matter • Above all else restraint matters • Good design = simple Ottawa E-Commerce Overview A. Rau-Chaplin

  27. Outline • Part 1: • What kind of site? • For what audience? • Analysis of Tuns Press • Part 2: Design • The home page • Navigation • Using Storyboards, site maps, page layout grids • Part 3: Implementation Ottawa E-Commerce Overview A. Rau-Chaplin

  28. Navigation • The first screen… • Navigational tools… • Consistence !!!!!!! Ottawa E-Commerce Overview A. Rau-Chaplin

  29. The first screen • Grab them now! • The back button is only a click away! • Display important information prominently • You establish navigational aids here • You establish expectations here • Not just navigation, content too • Not necessarily only one first screen! Ottawa E-Commerce Overview A. Rau-Chaplin

  30. Navigational Tools • Four main navigational tools • Navigational graphics • Text • Frames • Page layout Ottawa E-Commerce Overview A. Rau-Chaplin

  31. Navigational tools: graphics • Buttons • any graphic that is a link • tell them where they are going BEFORE they get there • a button should look like it’s a button! • buttons have a grammar, they repeat! • Image maps • may not repeat • where should I click??? Ottawa E-Commerce Overview A. Rau-Chaplin

  32. Navigational Tools: Text • Excellent navigational aids • Light, fast, clear where before jump • Still requires visual structure • Don’t do paragraphs of links! • Even if you have image links you still should have corresponding text ones • Loads first, even if page stopped loading • Use clear concise language, people scan pages • Don’t do “click here for …” Ottawa E-Commerce Overview A. Rau-Chaplin

  33. Consistence • Good design is about taking a small number of ideas and pushing them through all aspects of a design • It is everything! • Remember its about communications! Ottawa E-Commerce Overview A. Rau-Chaplin

  34. Consistence in Navigation • Consistent look • Size, shape, color, • Consistent position • Top, left side, bottom • Consistent operation • Two buttons with the same label go to the same logical place Ottawa E-Commerce Overview A. Rau-Chaplin

  35. Not just coding html! Ottawa E-Commerce Overview A. Rau-Chaplin

  36. Design Process • Design • Principles • Scenarios • Storyboard • Site map • Main pages • Page layout grid • Check lists • Mockup/Prototype • Evaluate • Usability Study Ottawa E-Commerce Overview A. Rau-Chaplin

  37. Example:WillieBoySurfgear Place Holder Page Ottawa E-Commerce Overview A. Rau-Chaplin

  38. Design • Design Principles • A short listing of what it is all about • Audience • Look • Purpose • Image… • Scenarios Ottawa E-Commerce Overview A. Rau-Chaplin

  39. Storyboard • Don’t code before you think! • PLAN, PLAN, PLAN… • What is the structure of the site to be? • What are main topic pages? • What is the main navigation form? Ottawa E-Commerce Overview A. Rau-Chaplin

  40. Storyboard: Site Structure Ottawa E-Commerce Overview A. Rau-Chaplin

  41. Main Page Ottawa E-Commerce Overview A. Rau-Chaplin

  42. Page Layout Grid Ottawa E-Commerce Overview A. Rau-Chaplin

  43. Mock-up Ottawa E-Commerce Overview A. Rau-Chaplin

  44. What every site needs… • Privacy statement • Company info • Search • … Ottawa E-Commerce Overview A. Rau-Chaplin

  45. Design Process • Design • Principles • Scenarios • Storyboard • Site map • Main pages • Page layout grid • Check lists • Mockup/Prototype • Evaluate • Usability Studies Ottawa E-Commerce Overview A. Rau-Chaplin

  46. Usability • Wear the rubber meets the road • Buying on the web? • 60-80% of transactions pend • The web page model • From browsing to processing • 80% of software in interface • The heart of customer centric design • The Science/Art of usability Ottawa E-Commerce Overview A. Rau-Chaplin

  47. Cognitive Processing Goal Evaluate interpretations Intention to act Sequence of actions Interpret perception Execution of actions Perceive state of the world The World Ottawa E-Commerce Overview A. Rau-Chaplin

  48. Human Information Processing Computer Person Execute Read/Scan Process Goals Interface Output Evaluate Ottawa E-Commerce Overview A. Rau-Chaplin

  49. Norman’s 7 Principles for making difficult tasks simple • 1) Use knowledge in the world and the head • Example: letters on a keyboard vs. knowledge of touch typist • Reminding is ok! • The limits of short term memory: 7  2 • 2) Simplify the structure of tasks • The shape of the decision tree • Wide vs. deep structure • Wide: Select an ice cream flavor • Deep: Complete a multi-step transaction Ottawa E-Commerce Overview A. Rau-Chaplin

  50. Norman’s 7 Principles for making difficult tasks simple • 3) Make things visible and give feedback • How many times have you been on a page and sat their wondering what you are meant to do next? • Get the visual hierarchy right • Think about relative size, color, shape, placement • People don’t read pages they scan them! • Give each action an immediate and obvious effect • Not just visual cues, also audio … Ottawa E-Commerce Overview A. Rau-Chaplin

More Related