1. Patterns and Popups CMPT 281

2. Admin Midterm exam What you are responsible for: – Lectures and lecture notes – Textbook: Chapters 1-5 Patterns C2, D11, E1, F3, H1, H6, H8, I1, K2 – Assignments: Concepts, design, and code

3. Outline Section “Helping Customers Complete Tasks” Patterns: – Process Funnel (H1) – Floating Windows (H6) – Context-Sensitive Help (H8) Example: – Floating windows with CSS and JavaScript

4. H1: Process Funnel

5. PROBLEM – Customers often need to complete highly specific tasks on Web sites, but pages with tangential links and many questions can prevent them from carrying out these tasks successfully.

6. H1: Process Funnel

7. Minimize the number of steps required (2-6) Provide a progress bar Remove unnecessary links and content Reinforce the brand to maintain a sense of place Use floating windows to provide in-place information Make sure the Back button always works Make clear how to proceed to the next step Let customers skip optional steps Prevent errors where possible Provide error messages whenever errors do occur

8. Examples

13. H6: Floating Windows

14. PROBLEM – You need to be able to show the customer extra information, while maintaining context and keeping the customer on the same page.

15. H6: Floating Windows

16. Examples

20. Floating windows: CSS and JavaScript tag for popup element CSS ‘position’ property – Set to ‘absolute’ CSS ‘display’ property – Set to either ‘none’ or ‘block’ JavaScript functions – To show and hide the

21. Use of floating windows in H8: Context-Sensitive Help