0
Designing  Object-Oriented  User Experiences   Theo Mandel, Ph.D.Interface Design and Development       iueconference.com
Or,   By the end of this presentation you will  realize that by doinggood UX design, you are actually doing Object-    Ori...
Theo Mandel, Ph.D.   email:                     theo@theomandel.comInterface Design &                     web:Development ...
Intro:history ofour field inAcronyms
GraphicalGUI   User      Interface
Object-       OrientedOOUI   User       Interface
UserUI   Interface
UserUX   Experience
Object-       Oriented       UserOOUX   Experience       You saw it here       first!
OOUX                          Presentation                              goals                               awareness     ...
“An important step in improving usability and functionality isenabling users to directly interact with every aspect of apr...
OOUX   Outline       What it isn’t       Where it came from       What it is       Design models       OOUX process       ...
OOUX                 Action-object interface                     Application-oriented interfaceWhat it isn’t        OOD or...
Action-object interfacecopy <Source_File> <Destination_File>
Application-oriented interfaceopen <Application> select <Object or File>
OOD or OOPO-O Design orO-O Programmingencourages re-use of software components between programs. Many programs need the sa...
Skeumorphism“Visually emulating objects in the real world.”
SkeumorphismPart of OOUX, but not most important partProsmakes it easier for those familiar with the original device to us...
SkeumorphismConsmay take up more screen space than standard UI elementsbreaks OS interface design standardscauses inconsis...
OOUX                 OOUIs                     Objects & affordancesWhat it isn’t        Objects & actionsWhere it came fr...
OOUIsObject-Oriented User InterfacesLarry Tessler(Stanford, Xerox PARC, Apple, Amazon.com,Yahoo!)coined the term in 19836 ...
OOUIs           Tessler’s key OOUI concepts1. Users see objects and choices displayed   graphically
OOUIs             Tessler’s key OOUI concepts2. Syntax of commands is “object-action” – user   selects an object and then ...
OOUIs            Tessler’s key OOUI concepts2. Syntax of commands is “object-action”
OOUIs          Tessler’s key OOUI concepts3. Users get immediate feedback from actions –   part of the feeling of direct m...
Drag-and-Drop Skeumorphism
OOUIs           Tessler’s key OOUI concepts4. The interface is modeless (or selecting an   action can determine a mode)
OOUIs          Tessler’s key OOUI concepts5. The interface displays objects in WYSIWYG   form (“What You See Is What You G...
OOUIs            Tessler’s key OOUI concepts6. Objects and actions are consistent both   within an application and across ...
Objects & affordancesDon Norman(UCSD, Apple, Nielsen Norman Group)Affordance (1988): quality of an object, or  an environm...
Objects & Actions“Oh look, there’s a  <noun>book</noun>.”“I believe I can   <action>   grab, open, read,   drop, throw, et...
IBM Common User Access (CUA)IBM team designed and prototyped (in Smalltalk)IBM’s OS/2 operating system (OOUI)Move from sim...
IBM real thingsRealPhone & RealCD
IBM OVIDObject, View, and Interaction Design (1998)
Since then . . .Outside-in design (2007)Expanded to include stakeholders,in addition to usersDesign thinkingUser experienc...
Since then . . .      List (objects)   Context menu (actions)
OOUX                 Objects & features                     ClassesWhat it isn’t        InstancesWhere it came from   View...
Objects
Object features (not exclusive)  Composition     Containment
Object classesContainer    Data   Device
Object hierarchy & instances    Car LotCars                      TrucksCute                      Chevyred                 ...
Object viewsComposedContentsPropertiesAssistance
Composed viewData objectsWYSIWYGRelative orderis important
Contents viewData & containerobjectsRelative orderis not importantSwitch viewsper user task
Property viewDevice objectsDisplay/modifysettings andproperties
Assistance viewProvide Help,tutorials, otheruseful info aboutusing an object
OOUX                 User’s conceptual model                     Multiple user modelsWhat it isn’t        Designer’s model...
Design models   Designer’s model   User’s conceptual   model                             Developer’s model
User’s conceptualmodel                          “I never design a building                          before I’ve seen the s...
User’s conceptual model
“The problem for theMultiple user   interface designer is tomodels          design an interface that                users ...
Designer’smodel                       “Most software is run by                            confused users acting on        ...
Designer’s model – iceberg analogyPresentation/visuals(UX Look – 10%)most visible, easily distracted by,wrongly viewed as ...
Designer’s model – another analogy
Reconciling multiple user models
Developer’smodel                        “This would be a great jobdescribes the system    if it weren’t for all thoseinter...
OOUX                 Discovery/task analysis                     Construct object modelWhat it isn’t        Design object ...
Discovery/ Task            “Not everything that counts                           can be counted and notanalysis           ...
Construct object               Task description from task                               analysis for a car dealershipmodel...
Salesman inquires about theFind objects         customer’s wants, needs and                     budget.Identify all nouns ...
Group into object              Concrete objects:                                Car, car dealershipcategories             ...
Define object relationships  Customer    is stored in                                Customer     List               is as...
Define object properties and behaviors      Target   Customer   Customer   Car   Car Lot    Worksheet     Worksheet    Sal...
Construct object   Once objects and                   relationships are defined,views              determine views that gi...
Car (data object) –properties view
Customer (data object) –properties view
Car lot (container object) –contents view
Worksheet (data object) –properties view
OOUXWhat it isn’tWhere it came fromWhat it isDesign modelsOOUX processResources
ResourcesObject-Oriented InterfaceDesign: IBM Common UserAccess GuidelinesIBM (Que, 1992)
ResourcesThe GUI-OOUI War: Windows vs.OS/2: The Designers Guide toHuman-Computer InterfacesMandel (Van Nostrand Reinhold, ...
ResourcesDesigning Object-OrientedUser InterfacesCollins (Addison-Wesley, 1995)
ResourcesDesigning for the Userwith OVID: BridgingUser Interface Designand Software EngineeringRoberts, Berry, Mullaly &Is...
ResourcesOutside-in SoftwareDevelopment: A PracticalApproach to BuildingSuccessful Stakeholder-basedProductsKessler & Swei...
ResourcesDesign Thinking Blurs the Line Between Processand Experience Design (Forrester Research Blog, 2012)IBM Design (ht...
Theo Mandel, Ph.D.   email:                     theo@theomandel.comInterface Design &                     web:Development ...
Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference
Upcoming SlideShare
Loading in...5
×

Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference

4,066

Published on

Theo Mandel, Ph.D. was invited to give this presentation at the IUE 2013 conference, Phoenix, AZ on April 3, 2013.

Object-oriented design is a critical skill for today's user experience designers.

"Designing Object-Oriented User Experiences" is a new presentation based on 20 years of research and experience in object-oriented user interface design. Mandel was part of the IBM Common User Access (CUA) team that designed the object-oriented OS/2 operating system interface. The IBM team wrote and published the first industry object-oriented design guide, titled "Object-Oriented Interface Design: IBM Common User Access Guidelines" (Que, 1992).

OOUIs are described in Mandel's well-known book, "The Elements of User Interface Design" (John Wiley & Sons, 1997). The presentation describes the history of OOUIs, what is isn't, what it is, design models and the OO UX process. Resources are provided.

For more information, contact:
Theo Mandel, Ph.D.
theo (at) theomandel.com
www.theomandel.com

Published in: Technology
4 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,066
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
54
Comments
4
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference"

  1. 1. Designing Object-Oriented User Experiences Theo Mandel, Ph.D.Interface Design and Development iueconference.com
  2. 2. Or, By the end of this presentation you will realize that by doinggood UX design, you are actually doing Object- Oriented design!
  3. 3. Theo Mandel, Ph.D. email: theo@theomandel.comInterface Design & web:Development theomandel.com twitter: theomandel linkedIn: theomandel
  4. 4. Intro:history ofour field inAcronyms
  5. 5. GraphicalGUI User Interface
  6. 6. Object- OrientedOOUI User Interface
  7. 7. UserUI Interface
  8. 8. UserUX Experience
  9. 9. Object- Oriented UserOOUX Experience You saw it here first!
  10. 10. OOUX Presentation goals awareness historyPresentation will beavailable for all attendees insight
  11. 11. “An important step in improving usability and functionality isenabling users to directly interact with every aspect of aproduct’s user interface.Instead of sifting through a complex maze of commands andpull-down menus, object-oriented applications enableusers to directly interact with and manipulate everyelement or ‘object’ on the screen.This direct interaction empowers the user, dramaticallyenhances the usability of an application, and improvesthe user’s productivity.”Philippe Kahn, Borland Co-Founder and CEO, 1993
  12. 12. OOUX Outline What it isn’t Where it came from What it is Design models OOUX process Resources
  13. 13. OOUX Action-object interface Application-oriented interfaceWhat it isn’t OOD or OOPWhere it came from SkeumorphismWhat it isDesign modelsOOUX processResources
  14. 14. Action-object interfacecopy <Source_File> <Destination_File>
  15. 15. Application-oriented interfaceopen <Application> select <Object or File>
  16. 16. OOD or OOPO-O Design orO-O Programmingencourages re-use of software components between programs. Many programs need the same sorts of services - records, arrays, files, stacks, linked-lists, etc.using OOD or OOP does not guarantee an OOUI and you don’t need them to create an OOUI
  17. 17. Skeumorphism“Visually emulating objects in the real world.”
  18. 18. SkeumorphismPart of OOUX, but not most important partProsmakes it easier for those familiar with the original device to use the digital emulationSkeumorphic designs are usually visually appealinginteractions with computer devices are purely cultural and learned, so once a process is learned in society, it is difficult to remove
  19. 19. SkeumorphismConsmay take up more screen space than standard UI elementsbreaks OS interface design standardscauses inconsistent look-and-feel between appsmany users may have no experience with the original device being emulatedlimits creativity by grounding the experience to physical counterparts
  20. 20. OOUX OOUIs Objects & affordancesWhat it isn’t Objects & actionsWhere it came from IBM CUAWhat it is IBM RealThingsDesign models IBM OVIDOOUX process Since then . . .Resources
  21. 21. OOUIsObject-Oriented User InterfacesLarry Tessler(Stanford, Xerox PARC, Apple, Amazon.com,Yahoo!)coined the term in 19836 key concepts30-year Anniversary!
  22. 22. OOUIs Tessler’s key OOUI concepts1. Users see objects and choices displayed graphically
  23. 23. OOUIs Tessler’s key OOUI concepts2. Syntax of commands is “object-action” – user selects an object and then specifies an action on it. Viewing or transforming an object is the focus of the user’s task –only actions relevant to the selected object are displayed
  24. 24. OOUIs Tessler’s key OOUI concepts2. Syntax of commands is “object-action”
  25. 25. OOUIs Tessler’s key OOUI concepts3. Users get immediate feedback from actions – part of the feeling of direct manipulation (Ben Shneiderman coined this term in 1983)
  26. 26. Drag-and-Drop Skeumorphism
  27. 27. OOUIs Tessler’s key OOUI concepts4. The interface is modeless (or selecting an action can determine a mode)
  28. 28. OOUIs Tessler’s key OOUI concepts5. The interface displays objects in WYSIWYG form (“What You See Is What You Get”)
  29. 29. OOUIs Tessler’s key OOUI concepts6. Objects and actions are consistent both within an application and across applications
  30. 30. Objects & affordancesDon Norman(UCSD, Apple, Nielsen Norman Group)Affordance (1988): quality of an object, or an environment, which allows an individual to perform an action. door door plate handle (push) (pull)
  31. 31. Objects & Actions“Oh look, there’s a <noun>book</noun>.”“I believe I can <action> grab, open, read, drop, throw, etc. </ action> the book.”
  32. 32. IBM Common User Access (CUA)IBM team designed and prototyped (in Smalltalk)IBM’s OS/2 operating system (OOUI)Move from simple graphicaluser interfaces (GUIs) to robustobject-oriented user interfacesObject-Oriented InterfaceDesign: IBM Common UserAccess Guidelines (Que, 1992)
  33. 33. IBM real thingsRealPhone & RealCD
  34. 34. IBM OVIDObject, View, and Interaction Design (1998)
  35. 35. Since then . . .Outside-in design (2007)Expanded to include stakeholders,in addition to usersDesign thinkingUser experience design plays a muchlarger role in driving business process change.
  36. 36. Since then . . . List (objects) Context menu (actions)
  37. 37. OOUX Objects & features ClassesWhat it isn’t InstancesWhere it came from ViewsWhat it isDesign modelsOOUX processResources
  38. 38. Objects
  39. 39. Object features (not exclusive) Composition Containment
  40. 40. Object classesContainer Data Device
  41. 41. Object hierarchy & instances Car LotCars TrucksCute Chevyred truckconvertible
  42. 42. Object viewsComposedContentsPropertiesAssistance
  43. 43. Composed viewData objectsWYSIWYGRelative orderis important
  44. 44. Contents viewData & containerobjectsRelative orderis not importantSwitch viewsper user task
  45. 45. Property viewDevice objectsDisplay/modifysettings andproperties
  46. 46. Assistance viewProvide Help,tutorials, otheruseful info aboutusing an object
  47. 47. OOUX User’s conceptual model Multiple user modelsWhat it isn’t Designer’s modelWhere it came from Designer’s iceberg analogyWhat it is Reconciling multiple user modelsDesign models Developer’s modelOOUX processResources
  48. 48. Design models Designer’s model User’s conceptual model Developer’s model
  49. 49. User’s conceptualmodel “I never design a building before I’ve seen the siteMental images each user and met the people whosubconsciously forms will be using it.”through experience Frank Lloyd Wright
  50. 50. User’s conceptual model
  51. 51. “The problem for theMultiple user interface designer is tomodels design an interface that users find predictable and(personas) intuitive when each user is approaching the interface from a different perspective.” “It is impossible, in principle, to explain any pattern by invoking a single quantity. Gregory Bateson
  52. 52. Designer’smodel “Most software is run by confused users acting on incorrect and incompleteDesigner’s intent of the information, doing thingsobjects user sees and the designer neverhow they use objects expected.”to accomplish their tasks Paul Heckel, 1984
  53. 53. Designer’s model – iceberg analogyPresentation/visuals(UX Look – 10%)most visible, easily distracted by,wrongly viewed as the mostimportant part of the modelInteraction techniques(UX Feel – 30%)not always visible, but certainlycritical aspect of the modelObject model/relationships(Things users use – 60%)most critical and importantcomponent – objects/relationships
  54. 54. Designer’s model – another analogy
  55. 55. Reconciling multiple user models
  56. 56. Developer’smodel “This would be a great jobdescribes the system if it weren’t for all thoseinternals used to build/damn users.”implement the designer’s Anonymous ProgrammermodelIndependent of othermodels
  57. 57. OOUX Discovery/task analysis Construct object modelWhat it isn’t Design object viewsWhere it came fromWhat it isDesign modelsOOUX processResources
  58. 58. Discovery/ Task “Not everything that counts can be counted and notanalysis everything that can be counted counts.”contextual/task analysis Albert Einsteinrequirements gatheringpersona development “He who asks a questionusability testing may be a fool for five minutes, but he who neverFocus on context and asks a question remains aenvironmental objects fool forever.” Tim Connely
  59. 59. Construct object Task description from task analysis for a car dealershipmodel system:Find objects Salesperson inquires about theGroup into categories customer’s wants, needs and budget. Find out what cars theDefine object relationships, dealership has in stock that most properties and behaviors closely matches the customer’s wants, needs and budget. Arrive at a sales agreement using a worksheet. Get approval from the sales manager. Give the worksheet to the finance manager.
  60. 60. Salesman inquires about theFind objects customer’s wants, needs and budget.Identify all nouns Find out what cars the dealership has in stock that most closely matches the customer’s wants, needs and budget. Arrive at a sales agreement using a worksheet. Get approval from the sales manager. Give the worksheet to the finance manager.
  61. 61. Group into object Concrete objects: Car, car dealershipcategories People (object): CustomerConcrete objects Forms:People Worksheet, agreement (objects of sentences) People (subject):Forms Salesperson, sales manager,People (subject of sentences finance manager – users) Abstract objects:Abstract objects Customer details (wants, needs, budget)
  62. 62. Define object relationships Customer is stored in Customer List is associated with contains Sales Manager Worksheet is stored in is sent to Worksheet List is associated Finance contains with Manager Car is stored in Car Lot
  63. 63. Define object properties and behaviors Target Customer Customer Car Car Lot Worksheet Worksheet Sales Mgr. Finance Mgr. List List In-Basket In-BasketSourceCustomer moved customer customer customer data into data copied data copied & copied & sent Customer into sent to Sales to Finance List worksheet Manager ManagerCustomerListCar moved data copied into Car into Lot worksheetCar Lot worksheet worksheet worksheet moved into data copied & data copied & worksheet sent to Sales sent to list Manager Finance ManagerWorksheetWorksheetList
  64. 64. Construct object Once objects and relationships are defined,views determine views that give users the best access to objects and the information they contain
  65. 65. Car (data object) –properties view
  66. 66. Customer (data object) –properties view
  67. 67. Car lot (container object) –contents view
  68. 68. Worksheet (data object) –properties view
  69. 69. OOUXWhat it isn’tWhere it came fromWhat it isDesign modelsOOUX processResources
  70. 70. ResourcesObject-Oriented InterfaceDesign: IBM Common UserAccess GuidelinesIBM (Que, 1992)
  71. 71. ResourcesThe GUI-OOUI War: Windows vs.OS/2: The Designers Guide toHuman-Computer InterfacesMandel (Van Nostrand Reinhold, 1994) The Elements of User Interface Design, Mandel (John Wiley & Sons, 1997)
  72. 72. ResourcesDesigning Object-OrientedUser InterfacesCollins (Addison-Wesley, 1995)
  73. 73. ResourcesDesigning for the Userwith OVID: BridgingUser Interface Designand Software EngineeringRoberts, Berry, Mullaly &Isensee (Macmillan, 1998)
  74. 74. ResourcesOutside-in SoftwareDevelopment: A PracticalApproach to BuildingSuccessful Stakeholder-basedProductsKessler & Sweitzer(Pearson Education, 2007)
  75. 75. ResourcesDesign Thinking Blurs the Line Between Processand Experience Design (Forrester Research Blog, 2012)IBM Design (https://www-01.ibm.com/software/ucd/)Explore!
  76. 76. Theo Mandel, Ph.D. email: theo@theomandel.comInterface Design & web:Development theomandel.com twitter: theomandel linkedIn: theomandel
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×