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

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

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
CSE440: Introduction to HCI Methods for Design, Prototyping and Evaluating User Interaction

CSE440: Introduction to HCI Methods for Design, Prototyping and Evaluating User Interaction

CSE440: Introduction to HCI Methods for Design, Prototyping and Evaluating User Interaction Lecture 14: Nigini Oliveira Patterns Manaswi Saha Liang He Jian Li Zheng Jeremy Viny Course Progress Patterns a general repeatable solution

788 views • 61 slides
x86 ASM (1) 1 last time: VMs confjgurablity consistent environment isolation run malware in

x86 ASM (1) 1 last time: VMs confjgurablity consistent environment isolation run malware in

x86 ASM (1) 1 last time: VMs confjgurablity consistent environment isolation run malware in safe environment key mechanism: hardware support hardware gives VM monitor control when needed backup mechanism: emulation, binary translation 2

1.34k views • 118 slides
ABI Compatibility Through A Customizable Language Kevin Atkinson PhD Thesis University of Utah

ABI Compatibility Through A Customizable Language Kevin Atkinson PhD Thesis University of Utah

ABI Compatibility Through A Customizable Language Kevin Atkinson PhD Thesis University of Utah 1 Application Programmer Interface (API) class X { virtual int f(); Library ... API }; Application Library class Y API int main() { X

708 views • 51 slides
eBASH: ECRYPT, VAMPIRE ECRYPT Benchmarking European Union has funded of All Submitted Hashes

eBASH: ECRYPT, VAMPIRE ECRYPT Benchmarking European Union has funded of All Submitted Hashes

eBASH: ECRYPT, VAMPIRE ECRYPT Benchmarking European Union has funded of All Submitted Hashes ECRYPT I network (20042008), ECRYPT II network (20082012). http://bench.cr.yp.to /ebash.html ECRYPTs virtual labs include D. J.

782 views • 30 slides
Building Faster Mobile Websites WebRTC the nuts and bolts of hitting the 1000 millisecond

Building Faster Mobile Websites WebRTC the nuts and bolts of hitting the 1000 millisecond

Building Faster Mobile Websites WebRTC the nuts and bolts of hitting the 1000 millisecond "time to glass" target ... +Ilya Grigorik @igrigorik Video of the talk: http://bit.ly/12GFKDE Make The Web Faster, Google What's the

1.34k views • 51 slides
Metrics and models for Web performance evaluation or, How to measure SpeedIndex from raw encrypted

Metrics and models for Web performance evaluation or, How to measure SpeedIndex from raw encrypted

Metrics and models for Web performance evaluation or, How to measure SpeedIndex from raw encrypted packets, and why it matters QoE = f(QoS) This talk Dario Rossi dario.rossi@huawei.com Director, DataCom (*) Lab Brussels, Feb 1 st 2020 Huawei

557 views • 29 slides
EmailMarke+ng Wri+ngTipstoImproveEmailResults Craig Stouffer Mark

EmailMarke+ng Wri+ngTipstoImproveEmailResults Craig Stouffer Mark

EmailMarke+ng Wri+ngTipstoImproveEmailResults Craig Stouffer Mark Feldman Pinpointe On-Demand NetProspex VP Marketing cstouffer@pinpointe.com mfeldman@NetProspex.com (408) 834-7577 (781) 290-5714 @pinpointe

676 views • 31 slides
Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1 Ponnurangam

Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1 Ponnurangam

Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1 Ponnurangam Kumaraguru (PK) Associate Professor ACM Distinguished & TEDx Speaker Linkedin/in/ponguru/ fb/ponnurangam.kumaraguru, @ponguru 1 Core

565 views • 34 slides

More recommend