Patterns and Popups CMPT 281

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

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

H1: Process Funnel

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.

H1: Process Funnel

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

Examples

H6: Floating Windows

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

H6: Floating Windows

Examples

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

Use of floating windows in H8: Context-Sensitive Help