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

▶

Feb 07, 2023 190 likes •481 views

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

SLIDE 1

320312 Software Engineering (P. Baumann)

Web Design Patterns

Instructor: Peter Baumann email: p.baumann@jacobs-university.de tel:

3178
ffice:

room 88, Research 1 Pressman, Chapter 12 (parts) James A. Landay, Jason I. Hong

SLIDE 2

2 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.

SLIDE 3

3 320312 Software Engineering (P. Baumann)

Web Design Patterns

Site genres Navigational framework Home page Content management Trust and credibility Basic ecommerce Advanced ecommerce Completing tasks Page layouts Search Page-level navigation Speed [van Duyne et al.]

SLIDE 4

4 320312 Software Engineering (P. Baumann)

Process Funnel (H1)

Problem: help people complete highly specific stepwise tasks
Desktop Solution:

SLIDE 5

5 320312 Software Engineering (P. Baumann)

Process Funnel (H1): Web Solution

SLIDE 6

6 320312 Software Engineering (P. Baumann)

Process Funnel (H1): Problems

How much longer?
Why ads & nav bars?
extra help?

SLIDE 7

7 320312 Software Engineering (P. Baumann)

Process Funnel (H1)

Problem: How much longer?
Solution: Progress bars

SLIDE 8

8 320312 Software Engineering (P. Baumann)

Process Funnel (H1)

Problem: Why ads & nav bars?
Solution: Remove them, present minimal interface
New problem: What site?
Solution: Keep logo, layout, colors

SLIDE 9

9 320312 Software Engineering (P. Baumann)

Process Funnel (H1)

Problem
What if users need extra help?
Solution
Use pop-up windows because we want to keep people in the funnel

SLIDE 10

10 320312 Software Engineering (P. Baumann)

Process Tunnel

SLIDE 11

11 320312 Software Engineering (P. Baumann)

Process Tunnel

SLIDE 12

12 320312 Software Engineering (P. Baumann)

Solution Diagram: Process Funnel (H1)

SLIDE 13

13 320312 Software Engineering (P. Baumann)

Related Patterns: Process Funnel (H1)

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

SLIDE 14

14 320312 Software Engineering (P. Baumann)

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

SLIDE 15

15 320312 Software Engineering (P. Baumann)

Good? Bad?

SLIDE 16

16 320312 Software Engineering (P. Baumann)

SLIDE 17

17 320312 Software Engineering (P. Baumann)

Solution Diagram: Meaningful Error Messages (K13)

SLIDE 18

18 320312 Software Engineering (P. Baumann)

(H1) Process Funnel (K13) Meaningful Error Messages (H2) Sign-in / New Account (F1) Quick-Flow Checkout (K12) Preventing Errors (K11) Familiar Language

Related Patterns: Error Msgs (K13)

SLIDE 19

19 320312 Software Engineering (P. Baumann)

“What am I Searching For?”

SLIDE 20

20 320312 Software Engineering (P. Baumann)

“What am I Searching For?”

SLIDE 21

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

Search

SLIDE 22

22 320312 Software Engineering (P. Baumann)

Only the most relevant search results are shown. Also, the search results are divided up into different logical categories, making it easier to find what you are looking for. Only the most relevant search results are shown. Also, the search results are divided up into different logical categories, making it easier to find what you are looking for.

Search

SLIDE 23

23 320312 Software Engineering (P. Baumann)

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

Search

SLIDE 24

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

Search

SLIDE 25

25 320312 Software Engineering (P. Baumann)

Pattern Examples: Navigation Bar

SLIDE 26

26 320312 Software Engineering (P. Baumann)

Web Design Patterns

(B1) Multiple Ways to Navigate (L2) Fast-Downloading Images (B2) Browsable Content (K10) Obvious Links (K2) Navigation Bar (K3) Tab Rows Search / Wizard / Relate / Promote Speed Navigation Navigational Framework

SLIDE 27

27 320312 Software Engineering (P. Baumann)

Web Design Patterns

(F1) Quick-Flow Checkout (K4) Action Buttons (I2) Above the Fold (L2) Fast-Downloading Images (I1) Grid Layout (H1) Process Funnel (A1) Personal E-Commerce (F3) Shopping Cart

SLIDE 28

28 320312 Software Engineering (P. Baumann)

Summary

Lots of issues involved in designing web sites
Design patterns one way of capturing good design knowledge