Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 4,688 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,688
On Slideshare
4,581
From Embeds
107
Number of Embeds
6

Actions

Shares
Downloads
47
Comments
4
Likes
6

Embeds 107

http://www.hyperlabs.net 76
http://www.linkedin.com 26
https://www.linkedin.com 2
http://www.onlydoo.com 1
http://www.brijj.com 1
http://translate.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing Object-Oriented User Experiences Theo Mandel, Ph.D.Interface Design and Development iueconference.com
  • 2. Or, By the end of this presentation you will realize that by doinggood UX design, you are actually doing Object- Oriented design!
  • 3. Theo Mandel, Ph.D. email: theo@theomandel.comInterface Design & web:Development theomandel.com twitter: theomandel linkedIn: theomandel
  • 4. Intro:history ofour field inAcronyms
  • 5. GraphicalGUI User Interface
  • 6. Object- OrientedOOUI User Interface
  • 7. UserUI Interface
  • 8. UserUX Experience
  • 9. Object- Oriented UserOOUX Experience You saw it here first!
  • 10. OOUX Presentation goals awareness historyPresentation will beavailable for all attendees insight
  • 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. OOUX Outline What it isn’t Where it came from What it is Design models OOUX process Resources
  • 13. OOUX Action-object interface Application-oriented interfaceWhat it isn’t OOD or OOPWhere it came from SkeumorphismWhat it isDesign modelsOOUX processResources
  • 14. Action-object interfacecopy <Source_File> <Destination_File>
  • 15. Application-oriented interfaceopen <Application> select <Object or File>
  • 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. Skeumorphism“Visually emulating objects in the real world.”
  • 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. 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. 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. OOUIsObject-Oriented User InterfacesLarry Tessler(Stanford, Xerox PARC, Apple, Amazon.com,Yahoo!)coined the term in 19836 key concepts30-year Anniversary!
  • 22. OOUIs Tessler’s key OOUI concepts1. Users see objects and choices displayed graphically
  • 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. OOUIs Tessler’s key OOUI concepts2. Syntax of commands is “object-action”
  • 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. Drag-and-Drop Skeumorphism
  • 27. OOUIs Tessler’s key OOUI concepts4. The interface is modeless (or selecting an action can determine a mode)
  • 28. OOUIs Tessler’s key OOUI concepts5. The interface displays objects in WYSIWYG form (“What You See Is What You Get”)
  • 29. OOUIs Tessler’s key OOUI concepts6. Objects and actions are consistent both within an application and across applications
  • 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. 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. 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. IBM real thingsRealPhone & RealCD
  • 34. IBM OVIDObject, View, and Interaction Design (1998)
  • 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. Since then . . . List (objects) Context menu (actions)
  • 37. OOUX Objects & features ClassesWhat it isn’t InstancesWhere it came from ViewsWhat it isDesign modelsOOUX processResources
  • 38. Objects
  • 39. Object features (not exclusive) Composition Containment
  • 40. Object classesContainer Data Device
  • 41. Object hierarchy & instances Car LotCars TrucksCute Chevyred truckconvertible
  • 42. Object viewsComposedContentsPropertiesAssistance
  • 43. Composed viewData objectsWYSIWYGRelative orderis important
  • 44. Contents viewData & containerobjectsRelative orderis not importantSwitch viewsper user task
  • 45. Property viewDevice objectsDisplay/modifysettings andproperties
  • 46. Assistance viewProvide Help,tutorials, otheruseful info aboutusing an object
  • 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. Design models Designer’s model User’s conceptual model Developer’s model
  • 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. User’s conceptual model
  • 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. 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. 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. Designer’s model – another analogy
  • 55. Reconciling multiple user models
  • 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. OOUX Discovery/task analysis Construct object modelWhat it isn’t Design object viewsWhere it came fromWhat it isDesign modelsOOUX processResources
  • 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. 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. 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. 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. 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. 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. 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. Car (data object) –properties view
  • 66. Customer (data object) –properties view
  • 67. Car lot (container object) –contents view
  • 68. Worksheet (data object) –properties view
  • 69. OOUXWhat it isn’tWhere it came fromWhat it isDesign modelsOOUX processResources
  • 70. ResourcesObject-Oriented InterfaceDesign: IBM Common UserAccess GuidelinesIBM (Que, 1992)
  • 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. ResourcesDesigning Object-OrientedUser InterfacesCollins (Addison-Wesley, 1995)
  • 73. ResourcesDesigning for the Userwith OVID: BridgingUser Interface Designand Software EngineeringRoberts, Berry, Mullaly &Isensee (Macmillan, 1998)
  • 74. ResourcesOutside-in SoftwareDevelopment: A PracticalApproach to BuildingSuccessful Stakeholder-basedProductsKessler & Sweitzer(Pearson Education, 2007)
  • 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. Theo Mandel, Ph.D. email: theo@theomandel.comInterface Design & web:Development theomandel.com twitter: theomandel linkedIn: theomandel