Web Design Patterns Pressman, Chapter 12 (parts) James A. Landay, - PowerPoint PPT Presentation

Web Design Patterns Pressman, Chapter 12 (parts) James A. Landay, Jason I. Hong Instructor: Peter Baumann email: p.baumann@jacobs-university.de tel: -3178 office: room 88, Research 1 320312 Software Engineering (P. Baumann)

Web Design Patterns  how to create navigation bars for finding relevant content…  how to create a shopping cart that supports check out…  how to make e-commerce sites where people return & buy…  etc. 320312 Software Engineering (P. Baumann) 2

Web Design Patterns Site genres Advanced ecommerce Navigational framework Completing tasks Home page Page layouts Content management Search Trust and credibility Page-level navigation Basic ecommerce Speed [van Duyne et al.] 320312 Software Engineering (P. Baumann) 3

Process Funnel (H1)  Problem: help people complete highly specific stepwise tasks  Desktop Solution: 320312 Software Engineering (P. Baumann) 4

Process Funnel (H1): Web Solution 320312 Software Engineering (P. Baumann) 5

Process Funnel (H1): Problems  How much longer?  Why ads & nav bars?  extra help? 320312 Software Engineering (P. Baumann) 6

Process Funnel (H1)  Problem: How much longer?  Solution: Progress bars 320312 Software Engineering (P. Baumann) 7

Process Funnel (H1)  Problem: Why ads & nav bars?  Solution: Remove them, present minimal interface  New problem: What site?  Solution: Keep logo, layout, colors 320312 Software Engineering (P. Baumann) 8

Process Funnel (H1)  Problem • What if users need extra help?  Solution • Use pop-up windows because we want to keep people in the funnel 320312 Software Engineering (P. Baumann) 9

Process Tunnel 320312 Software Engineering (P. Baumann) 10

Process Tunnel 320312 Software Engineering (P. Baumann) 11

Solution Diagram: Process Funnel (H1) 320312 Software Engineering (P. Baumann) 12

Related Patterns: Process Funnel (H1) (A1) E-Commerce (A10) Web Apps (A11) Intranets (H1) Process Funnel (K2) Navigation Bars (H8) Context-Sensitive Help (K3) Tab Rows (I2) Above the Fold (K4) Action Buttons (K5) High-Viz Action Buttons (K12) Preventing Errors (K13) Meaningful Error Messages 320312 Software Engineering (P. Baumann) 13

Meaningful Error Messages (K13)  Problem • When customers make mistakes, they need to be informed of the problem and how to recover  Solution • Clear statement of problem • Explain how to recover • Position near the problem 320312 Software Engineering (P. Baumann) 14

Good? Bad? • • • 320312 Software Engineering (P. Baumann) 15

320312 Software Engineering (P. Baumann) 16

Solution Diagram: Meaningful Error Messages (K13) 320312 Software Engineering (P. Baumann) 17

Related Patterns: Error Msgs (K13) (H1) Process Funnel (H2) Sign-in / New Account (F1) Quick-Flow Checkout (K12) Preventing Errors (K11) Familiar Language (K13) Meaningful Error Messages 320312 Software Engineering (P. Baumann) 18

“What am I Searching For?” 320312 Software Engineering (P. Baumann) 19

“What am I Searching For?” 320312 Software Engineering (P. Baumann) 20

Search The search results The search results here can be sorted in here can be sorted in many ways, including many ways, including food, cuisine, and food, cuisine, and area. area. The search results The search results also provide good also provide good information, including information, including the restaurant’s the restaurant’s address, the phone address, the phone number, and part of number, and part of the review the review 320312 Software Engineering (P. Baumann) 21

Search Only the most Only the most relevant search relevant search results are shown. results are shown. Also, the search Also, the search results are divided results are divided up into different up into different logical categories, logical categories, making it easier to making it easier to find what you are find what you are looking for. looking for. 320312 Software Engineering (P. Baumann) 22

Search Is it a “notebook,” a Is it a “notebook,” a “laptop,” or a “ThinkPad” “laptop,” or a “ThinkPad” computer? On IBM’s computer? On IBM’s website, it doesn’t website, it doesn’t matter, they all work matter, they all work correctly! correctly! Also, a special search Also, a special search result appears that lets result appears that lets people get to the right people get to the right page quicker. page quicker. These are the standard These are the standard search results. search results. 320312 Software Engineering (P. Baumann) 23

Search States that it States that it couldn’t find any couldn’t find any results. results. Does the next Does the next search, what a search, what a person would do person would do anyway, instead of anyway, instead of presenting “No presenting “No results.” results.” 320312 Software Engineering (P. Baumann) 24

Pattern Examples: Navigation Bar 320312 Software Engineering (P. Baumann) 25

Web Design Patterns Navigational Framework (B1) Multiple Ways to Navigate Search / Wizard / (B2) Browsable Content Relate / Promote Navigation (K3) Tab Rows (K2) Navigation Bar (K10) Obvious Links Speed (L2) Fast-Downloading Images 320312 Software Engineering (P. Baumann) 26

Web Design Patterns (A1) Personal E-Commerce (H1) Process Funnel (F1) Quick-Flow Checkout (F3) Shopping Cart (I1) Grid Layout (I2) Above the Fold (K4) Action Buttons (L2) Fast-Downloading Images 320312 Software Engineering (P. Baumann) 27

Summary  Lots of issues involved in designing web sites  Design patterns one way of capturing good design knowledge 320312 Software Engineering (P. Baumann) 28