A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)

8,526 views
8,436 views

Published on

Presentation held by ERGOSIGN at UPA 2010 (Usability Professionals’ Association) in Munich, Germany

Published in: Technology, Business
2 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total views
8,526
On SlideShare
0
From Embeds
0
Number of Embeds
1,762
Actions
Shares
0
Downloads
36
Comments
2
Likes
23
Embeds 0
No embeds

No notes for slide

A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)

  1. 1. A Best Practice Approach to the Design of Natural User Interfaces Dieter Wallach & Martin Radvak May, 27th 2010 User Interface Design Icon Design Style Guide Usability Tests Custom Look & Feels © 2010 by ERGOSIGN
  2. 2. ERGOSIGN / Company Key Facts • Legal Form: GmbH • Staff: 35 permanent (last update: 01.01.2010) • Founded: 2000 • Background: Almost all staff has an academic degree in Computer Science, Graphic Design or • Founders: Dr. Marcus Plach & Prof. Dr. Dieter Psychology or integrated courses which combine Wallach all three. • Average Growth Rate: 12 % p.a.(last three years) Saarbrücken Hamburg Munich UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  3. 3. Agenda • Natural User Interfaces & Multi-Touch • Guidelines & Principles • A Dedicated Design Process • Today‘s possibilities • Research Questions UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  4. 4. Natural User Interfaces UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  5. 5. Mind vs. Machine (Buxton, 2001) Dual-Core Itanium® 2 9000 Quad-Core 1 000 000 000 Xeon® (Penryn) Itanium® 2 Pentium® D 100 000 000 Moore’s law Pentium® 4 10 000 000 Pentium® III 486™ DX Pentium® IINielsen‘s law 1 000 000 Pentium® 286 386™ 100 000 8086 10 000 8008 8080 “God’s law of cognitive complexity” 1 000 4004 1970 1975 1980 1985 1990 1995 2000 2005 2010 UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  6. 6. “Natural“ — from a human‘s perspective… “Natural interaction is defined in terms of experience: people naturally communicate through gestures, expressions, movements, and discover the world by looking around and manipulating physical stuff. “ – Alessandro Valli UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  7. 7. “Natural“ in the sense of technology… Images: Courtesy of Apple Inc. & Microsoft Corporation UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  8. 8. The (former) top candidate for NUIs UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  9. 9. The future was already there (but not evenly distributed) UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  10. 10. Searching for «Multi-Touch» (Google Trends) (Schöning et al., 2009) UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  11. 11. Low cost multi touch UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  12. 12. But remember,… “Everything is best for something and worse for something else.“ – Bill Buxton UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  13. 13. Gartner‘s five phase hype cycle UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces (Schöning et al., 2009)
  14. 14. What makes a good user interface? UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  15. 15. Taming complexity UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  16. 16. Identifying needed functionality UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  17. 17. Appropriate «packaging» of functionality UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  18. 18. Defining efficient interaction UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  19. 19. Aesthetics UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  20. 20. Guidelines & Principles UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  21. 21. Characterstics of NUIs “classical“ GUIs NUIs User single-user multi-user indirect interaction direct interaction Interaction (hardware) (software) simple to complex simple, contextual Context scenarios scenarios transient & transient Posture sovereign postures collaborative posture tasks, complexity, UX, exploration, Focus “workstation“ user‘s dialogue UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  22. 22. Our Guiding Bricks and Principles CONTENT REALISM IS THE INTERFACE 360° LESS IS PARADIGM MORE UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  23. 23. • Stay simple & intuitive! • Give your application a realistic Look & Feel REALISM • Create affordances • „Follow the principle of continuity“ – Valli • Responsiveness UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  24. 24. • Free your contents! CONTENT • Reduce user controls, enhance user‘s control IS THE • Use direct manipulation INTERFACE • Use appropriate gestures • Be modeless UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  25. 25. • Be social, think multi! • There is no user-expected orientation 360° • Consider reach & legibility PARADIGM • Use Gestalt Laws • Be aware of design traps when designing for a horizontal system on a vertical screen UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  26. 26. • Reduce cognitive load! • Use progressive disclosure • Stay contextual to LESS IS specific goals MORE • Discoverability — encourage step by step exploration • Scaffolding UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  27. 27. 3-Stages Design Process UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  28. 28. 3-Stages Design Process Paper Mock-Ups Previsualisations Interactive Prototypes UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  29. 29. Paper Mock-Ups ”Paper mock-ups are sketched and sliced low- fidelity paper interfaces. Their goals are to get a first impression of the quality of interaction and discuss high-level ideas in layout, navigation and workflow.“ UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  30. 30. Paper Mock-Ups for Multi-Touch 3. Final UI ‘Information Circle’ control UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  31. 31. Paper Mock-Ups for Multi-Touch 1. Harmonise UI 2. Calculate appropriate elements with fingers sizes. (PPcm = and objects. 1024 px / 45,72 cm) UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  32. 32. Paper Mock-Ups for Multi-Touch Combine existing elements with paper sketches Images: Courtesy of Spenta Consulting UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  33. 33. Benefits of Paper Mock-Ups • easy, cheap, fast • consider ergonomic aspects like touch and reach • calculate proportionate pixel-based sizes considering different pixel per inch resolutions • harmonise sizes of real world objects and digital UI elements • fingers are actually fingers • paper-based elements already behave natural UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  34. 34. Previsualisations ”Previsualisations are UX-focussed screen visualisations of the application‘s look & behaviour. Their goal is to create a common vision of the future application among all stakeholders.“ UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  35. 35. Previsualisations Design Process Visual Design Animation Simulation Scenarios UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  36. 36. Final Application Experience UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  37. 37. Wizard-of-Oz: Now that you know it … UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  38. 38. Benefits of Previsualisations • Extraordinary powerful communication tool • Highly realistic • Highly „designer-oriented“ • Independent of the underlying implementation • Get rich feedback by stakeholders • Generally faster than prototypical implementation UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  39. 39. Interactive Prototypes “Tell me and I'll forget. Show me and I may remember. Involve me and I'll understand.“ – Chinese proverb UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  40. 40. Interactive Prototypes ”Interactive prototypes are high-fidelity impressions of the application‘s look & feel. Their goal is to let you, your users and your customers feel the application.“ UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  41. 41. An Example UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  42. 42. Benefits of Interactive Prototypes • Rich feedback and user testing possibilities • Let customers „feel“ what they will get • Take advantage of available powerful SDKs (e.g. Microsoft Surface / Windows 7) • … and available Gesture Recognisers ($1 Unistroke Recogniser) • Rapid prototyping in WPF with Expression Blend UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  43. 43. Today‘s Possibilities UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  44. 44. Microsoft Surface • First commercial MS multi-touch table • Integrated system with 30in screen (1024 x 768px) • Technology: Rear- projection, IR Light & camera system • Surface SDK 1.0 SP1 WPF/XNA • Expression Blend / Visual Studio / Surface Simulator UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  45. 45. Apple iPad / iPhone • iPhone OS SDK 3.2 / iPhone OS 4.0 soon • Objective-C Development in XCode & Interface Builder • iPhone / iPad Simulator UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  46. 46. Comparative Analysis Surface Windows 7 Apple iPad Any Multi- Platform Surface Table iPhone / iPad Touch-Screen Sensing Objects,Tags & Fingers Fingers Dimensions Fingers Diffused Capacitive Capacitive Technology Illumination Sensing Sensing Windows 7 iPhone OS 3.2 SDK Surface SDK 2.0 Touch SDK SDK Language Easy WPF Development Objective-C Touch High-Level Multi-Touch Events & Cocoa Touch Processing Raw Touch Input Processing UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  47. 47. Example Application UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  48. 48. IXMENTOR UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  49. 49. Many open research questions … UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  50. 50. Time will tell … “Remember that it took 30 years between when the mouse was invented by Engelbart and English in 1965 to when it became ubiquitous.“ – Bill Buxton UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  51. 51. Which gestures shall we use? (Gesturecons UPA 2010 by Lee, 2010) A Best Practice Approach to the Design of Natural User Interfaces
  52. 52. Dominant hand vs. reference frame (Buxton, 2009) smal l …» writi ng is mfor t for e of co « Zon UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  53. 53. Combining the real and virtual world (Weiss et al., 2010) UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  54. 54. Effects of age and computer literacy (Harper et al., 2008) UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  55. 55. Gorilla arms, labels, Fitts` & feedback Fitts‘ law & Iceberg-tips Visual feedback Gorilla arm problem Label positioning UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  56. 56. Lessons Learned • What are NUIs? • What are the design challenges? • Which tools and methods help us to be successful? • Projects & research questions UPA 2010 A Best Practice Approach to the Design of Natural User Interfaces
  57. 57. Thank You Saarbrücken Hamburg München Europa-Allee 12 Rothenbaumchausee 31 Augustenstraße 73 66113 Saarbrücken 20148 Hamburg 80333 München www.ergosign.de

×