cse 440 introduction to hci
play

CSE 440: Introduction to HCI User Interface Design, Prototyping, and - PowerPoint PPT Presentation

Dec 24, 2023 •24 likes •744 views

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 14: James Fogarty Patterns Alex Fiannaca Lauren Milne Saba Kawas Kelsey Munsell Tuesday/Thursday 12:00 to 1:20 Today Course Progress Mockups Due

  1. CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 14: James Fogarty Patterns Alex Fiannaca Lauren Milne Saba Kawas Kelsey Munsell Tuesday/Thursday 12:00 to 1:20

  2. Today Course Progress Mockups Due Friday Exam Tuesday Report, Website, Presentations After Break Reading 5 Posted Patterns Peer Critique of Usability Testing Results

  3. Limitations of Testing Drives hill-climbing, but not overall design A design may be better, but is it good? Impossible for new designs to compete Can be difficult to scale to many features How about we step through a larger example

  4. 1 User Interface Design, Prototyping, and CSE440 - Autumn 2007 6 Evaluation

  5. 2 User Interface Design, Prototyping, and CSE440 - Autumn 2007 7 Evaluation

  6. 3 User Interface Design, Prototyping, and CSE440 - Autumn 2007 8 Evaluation

  7. 4 User Interface Design, Prototyping, and CSE440 - Autumn 2007 9 Evaluation

  8. 5 User Interface Design, Prototyping, and CSE440 - Autumn 2007 10 Evaluation

  9. 6 Quick-Flow Checkouts User Interface Design, Prototyping, and CSE440 - Autumn 2007 11 Evaluation

  10. Testing in a Larger Design

  11. 1 User Interface Design, Prototyping, and CSE440 - Autumn 2007 13 Evaluation

  12. 1 • What site is this? – Logo in top-left corner denotes the site – Another logo at top-right to reinforce – examples of SITE BRANDING User Interface Design, Prototyping, and CSE440 - Autumn 2007 14 Evaluation

  13. 1 • What kind of site is this? – Shopping cart icon – Tab row content & categories on left – Prices in content area – UP-FRONT VALUE PROPOSITION – example of PERSONAL E-COMMERCE User Interface Design, Prototyping, and CSE440 - Autumn 2007 15 Evaluation

  14. 1 • What can I do here? – Welcome for new visitors – Tab row / Search on top – “Categories” – Prices – Examples of OBVIOUS LINKS User Interface Design, Prototyping, and CSE440 - Autumn 2007 16 Evaluation

  15. 1 • Most important info visible without scrolling • ABOVE THE FOLD User Interface Design, Prototyping, and CSE440 - Autumn 2007 17 Evaluation

  16. 2 User Interface Design, Prototyping, and CSE440 - Autumn 2007 18 Evaluation

  17. 2 • What site am I at? – Logo in upper-left reinforces brand, can click to go to home – Same font, layout, color scheme also reinforces – examples of SITE BRANDING (E1) User Interface Design, Prototyping, and CSE440 - Autumn 2007 19 Evaluation

  18. 2 • Where am I in the site? – “Home > Music” are LOCATION BREAD CRUMBS – TAB ROW says “Music” – Album cover, “Product Highlights”, and CD cover User Interface Design, Prototyping, and CSE440 - Autumn 2007 20 Evaluation

  19. • Can I trust these sellers? 2 – Who am I buying from? – Are they reputable? – What about shipping? User Interface Design, Prototyping, and CSE440 - Autumn 2007 21 Evaluation

  20. 2 • The Fold – Hmm, what’s below here? User Interface Design, Prototyping, and CSE440 - Autumn 2007 22 Evaluation

  21. 2 • Impulse buy • PESONALIZED RECOMMENDATIONS • About this album • Lots of unused space • Still more info below… User Interface Design, Prototyping, and CSE440 - Autumn 2007 23 Evaluation

  22. 2 • Is this product any good? – Editorial reviews – Customer reviews – RECOMMENDATION COMMUNITY User Interface Design, Prototyping, and CSE440 - Autumn 2007 24 Evaluation

  23. 3 User Interface Design, Prototyping, and CSE440 - Autumn 2007 25 Evaluation

  24. 3 • What site am I at? – Logo in upper-left – Colors, layout, font – examples of SITE BRANDING User Interface Design, Prototyping, and CSE440 - Autumn 2007 26 Evaluation

  25. 3 • Where am I in the site? – Last link clicked was “Buy!” – “Shopping Cart” and “Proceed to Checkout” reinforce that this is “the right page” – SHOPPING CART User Interface Design, Prototyping, and CSE440 - Autumn 2007 27 Evaluation

  26. 3 • Cross-selling – Possibly a pleasant surprise – Impulse buy – CROSS-SELLING & UP-SELLING User Interface Design, Prototyping, and CSE440 - Autumn 2007 28 Evaluation

  27. 3 • What am I going to buy? – Easy to remove – Easy to move to wishlist • How much will it cost? – Shipping costs there, no nasty surprises • SHOPPING CART User Interface Design, Prototyping, and CSE440 - Autumn 2007 29 Evaluation

  28. 3 • What can I do? – “Proceed to Checkout” HIGH VISIBILITY ACTION BUTTON – Visually distinct – 3D, looks clickable – Repeated above and below fold User Interface Design, Prototyping, and CSE440 - Autumn 2007 30 Evaluation

  29. 4 User Interface Design, Prototyping, and CSE440 - Autumn 2007 31 Evaluation

  30. 4 • What if I don’t have a User ID? • What if I forgot my password? • SIGN-IN/NEW ACCOUNT options User Interface Design, Prototyping, and CSE440 - Autumn 2007 32 Evaluation

  31. 5 User Interface Design, Prototyping, and CSE440 - Autumn 2007 33 Evaluation

  32. 5 • What site? – Logo, layout, color, fonts • Where in site? – Checkout, step 1 of 3 – “Choose shipping address” – QUICK-FLOW CHECKOUT User Interface Design, Prototyping, and CSE440 - Autumn 2007 34 Evaluation

  33. 5 • Note what’s different – No tab rows – No impulse buys – Only navigation on page takes you to next step • This is a PROCESS FUNNEL – Extraneous info and links removed to focus customers User Interface Design, Prototyping, and CSE440 - Autumn 2007 35 Evaluation

  34. 6 Quick-Flow Checkouts User Interface Design, Prototyping, and CSE440 - Autumn 2007 36 Evaluation

  35. 6 Quick-Flow Checkouts • Last step of process – Step 3, “Place Order” – “Place my order” button • Two HIGH-VISIBILITY ACTION BUTTONS for fold User Interface Design, Prototyping, and CSE440 - Autumn 2007 37 Evaluation

  36. 6 Quick-Flow Checkouts • No nasty surprises – Can see order – Total price is same as shopping cart – ORDER SUMMARY User Interface Design, Prototyping, and CSE440 - Autumn 2007 38 Evaluation

  37. Quick-Flow Checkouts • Easy to change shipping and billing • Easy to save this info – Easier to setup info in context of specific task User Interface Design, Prototyping, and CSE440 - Autumn 2007 39 Evaluation

  38. Design equals Solutions Design is about finding solutions Designers often reinvent Hard to know how things were done before Why things were done a certain way How to reuse solutions

  39. Design Patterns Design patterns communicate common design problems and solutions

  40. Design Patterns Design patterns communicate common design problems and solutions First used in architecture [Alexander] How to create a beer hall where people socialize?

  41. Design Patterns

  42. Using Design Patterns Not too general and not too specific use a solution “a million times over, without ever doing it the same way twice” Design patterns are a shared language for “building and planning towns, neighborhoods, houses, gardens, and rooms” Beer hall is part of a center for public life Beer hall needs spaces for groups to be alone ALCOVES

  43. A Web of Design Patterns (8) Mosaic of Subcultures & Towns Cities (31) Promenade (33) Night Life Gatherings (90) Beer Hall Local (95) Building Complex Interiors (179) Alcoves (181) The Fire

  44. Web Design Patterns Communicate design problems & solutions how to create navigation bars for finding relevant content how to create a shopping cart that suports check out how to make e-commerce sites where people return & buy

  45. NAVIGATION BAR (K2) Problem: Customers need a structured, organized way of finding the most important parts of your Web site

  46. NAVIGATION BAR (K2) Solution diagram Captures essence on how to solve problem First-level navigation Link to home Second-level navigation

  47. Pattern Groups Patterns organized by group Site genres Advanced ecommerce Navigational framework Completing tasks Home page Page layouts Content management Search Trust and credibility Page-level navigation Basic ecommerce Speed The mobile web

  48. PROCESS FUNNEL (H1) Problem: Need a way to help people complete highly specific stepwise tasks Ex. Create a new account Ex. Fill out survey forms Ex. Check out

  49. PROCESS FUNNEL (H1)

  50. • What’s different? PROCESS FUNNEL (H1) – No tab rows – No impulse buys – Only navigation on page takes you to next step • What’s the same? – Logo, layout, color, fonts

  51. PROCESS FUNNEL (H1) Problem: What if users need extra help?

  52. PROCESS FUNNEL (H1)

  53. CONTEXT-SENSITIVE HELP (H8)

  54. FLOATING WINDOWS (H6)

  55. FLOATING WINDOWS (H6)

  56. PROCESS FUNNEL (H1) Solution Diagram

  57. Related Patterns (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

Recommend

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

TRAINING COURSE ON SOCIAL PROTECTION & FORMALIZATION TRINIDAD AND TOBAGO MARCH 15, 2017 INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION Design of the NIS Assistance from the

547 views • 23 slides
INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

Patterns of variation in the expression of case and agreement Andrs Brny Leiden University Centre for Linguistics 9 November 2019, BaSIS Workshop a.barany@hum.leidenuniv.nl INTRODUCTION Introduction 2/42 INTRODUCTION

1.37k views • 42 slides
Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures Definition and concepts Process and product properties Principles SE Approaches Motivation Software and the economy The economies of

1.03k views • 49 slides
Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1 https://www.cdc.gov/std/stats17/infographic.htm Introduction Epidemiology in Western Colorado CPHE Surveillance Data Report, May 2018 Chlamydia Epidemiology in Western

977 views • 39 slides
DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every meeting (2) Some ideas of diagrams for section 7.1 (Introduction) of TP. Giles Barr 25 Jan 2018, Pembroke College On DUNE, the reality is there is a

474 views • 10 slides
INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

ADVANCED COMPUTER SECURITY INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT IS SECURITY? A systems security policies describe What the system is supposed to do Store and provide access

479 views • 16 slides
Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout World Wide

387 views • 14 slides
14 Introduction Introduction Bad guys can put malware into Example: hosts

14 Introduction Introduction Bad guys can put malware into Example: hosts

Introduction Introduction source Encapsulation ISO/OSI reference model message M application segment H t H t M transport network datagram H n H n H t M presentation: allow applications to frame link H l H n H t M interpret

583 views • 4 slides
Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout

322 views • 8 slides
Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Introduction Zynq Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL Processing System Processor Peripherals Data Buses AXI Bus Conclusion BTE5380 - Embedded Systems Octobre 2014 Andreas Habegger

1.81k views • 30 slides
2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04 Project References S E 5 PART.1 SMILE5 Introduction M I L Introduction STORION-SMILE5 Residential Energy Storage System Inverter 5kW Output Input

1.06k views • 25 slides
Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an application server? Why use an application server? Course introduction Services provided by CICS How CICS applications are defined Scaling CICS to meet

1.84k views • 146 slides
Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic building blocks Node Links (relationship between nodes) Spatial information Network data

584 views • 9 slides
Introduction Introduction (1) Main argument of the paper: universities are not only

Introduction Introduction (1) Main argument of the paper: universities are not only

Le jugement des pairs comme outil de management des universits Peer-review as a management tool Christine Musselin (CSO, Sciences Po et CNRS) Avril 2013, Lirrsistible ascension du capitalisme acadmique Introduction Introduction (1)

590 views • 28 slides
Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Moreno Baricevic Gilberto Daz Axel Kohlmeyer Stefano Cozzini ULA ICTP CNR-IOM DEMOCRITOS Merida, VENEZUELA Trieste, ITALY Trieste, ITALY Introduction Introduction to storage and to storage and filesystems filesystems Introduction

1.19k views • 51 slides
JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of the brand new JA-100 alarm system Visions Basic architecture System components Setting Help us with final validations You are the FIRST ones

1.69k views • 111 slides
1 Introduction Introduction Communication System Baseband an adjective that describes

1 Introduction Introduction Communication System Baseband an adjective that describes

Introduction Introduction Physical Layer Mobile network Global ISP Provides the means to transmit bits Basic Concepts of from sender to receiver, Data Transmission Defines the mechanical, electrical, and Home network timing

463 views • 7 slides
Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

INFOGR Computer Graphics Jacco Bikker - April-July 2015 - Lecture 1: Introduction Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical Details Assignments Field Study State of

869 views • 62 slides
Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Virtual and Augmented Reality Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction Who am I? What do I do here? 2 About me Short research bio: - 2014 - finished PhD at FMFI UK - 2014 2016 -

1.3k views • 39 slides
PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience for your presentation. It tells them what your presentation is about, why it is important, and finally, what to listen for in your speech. Get the

505 views • 3 slides
How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

Introduction to Beamer Hafida Benhidour How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer Introduction to Beamer Hafida Benhidour Department of computer science King Saud University November

732 views • 49 slides
Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Shenzhen Cuilu jewelry Co., Ltd

147 views • 14 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

735 views • 34 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

558 views • 18 slides

More recommend