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

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 doing
good UX design, you are
actually doing Object-
Oriented design!

3. Theo Mandel, Ph.D. email:
theo@theomandel.com
Interface Design &
web:
Development theomandel.com
twitter:
theomandel
linkedIn:
theomandel

4. Intro:
history of
our field in
Acronyms

5. Graphical
GUI User
Interface

6. Object-
Oriented
OOUI User
Interface

7. User
UI Interface

8. User
UX Experience

9. Object-
Oriented
User
OOUX Experience
You saw it here
first!

10. OOUX Presentation
goals
awareness
history
Presentation will be
available for all attendees insight

11. “An important step in improving usability and functionality is
enabling users to directly interact with every aspect of a
product’s user interface.
Instead of sifting through a complex maze of commands and
pull-down menus, object-oriented applications enable
users to directly interact with and manipulate every
element or ‘object’ on the screen.
This direct interaction empowers the user, dramatically
enhances the usability of an application, and improves
the 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 interface
What it isn’t OOD or OOP
Where it came from Skeumorphism
What it is
Design models
OOUX process
Resources

14. Action-object interface
copy <Source_File> <Destination_File>

15. Application-oriented interface
open <Application> select <Object or File>

16. OOD or OOP
O-O Design or
O-O Programming
encourages 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. Skeumorphism
Part of OOUX, but not most important part
Pros
makes it easier for those familiar with the original
device to use the digital emulation
Skeumorphic designs are usually visually appealing
interactions with computer devices are purely cultural
and learned, so once a process is learned in society,
it is difficult to remove

19. Skeumorphism
Cons
may take up more screen space than standard UI
elements
breaks OS interface design standards
causes inconsistent look-and-feel between apps
many users may have no experience with the original
device being emulated
limits creativity by grounding the experience to
physical counterparts

20. OOUX OOUIs
Objects & affordances
What it isn’t Objects & actions
Where it came from IBM CUA
What it is IBM RealThings
Design models IBM OVID
OOUX process Since then . . .
Resources

21. OOUIs
Object-Oriented User Interfaces
Larry Tessler
(Stanford, Xerox PARC, Apple, Amazon.com,Yahoo!)
coined the term in 1983
6 key concepts
30-year Anniversary!

22. OOUIs Tessler’s key OOUI concepts
1. Users see objects and choices displayed
graphically

23. OOUIs Tessler’s key OOUI concepts
2. 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 concepts
2. Syntax of commands is “object-action”

25. OOUIs Tessler’s key OOUI concepts
3. 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 concepts
4. The interface is modeless (or selecting an
action can determine a mode)

28. OOUIs Tessler’s key OOUI concepts
5. The interface displays objects in WYSIWYG
form (“What You See Is What You Get”)

29. OOUIs Tessler’s key OOUI concepts
6. Objects and actions are consistent both
within an application and across applications

30. Objects & affordances
Don 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)

32. Objects & Actions
“Oh look, there’s a
<noun>book</noun>.”
“I believe I can
<action>
grab, open, read,
drop, throw, etc.
</ action>
the book.”

33. IBM Common User Access (CUA)
IBM team designed and prototyped (in Smalltalk)
IBM’s OS/2 operating system (OOUI)
Move from simple graphical
user interfaces (GUIs) to robust
object-oriented user interfaces
Object-Oriented Interface
Design: IBM Common User
Access Guidelines (Que, 1992)

34. IBM real things
RealPhone & RealCD

35. IBM OVID
Object, View, and Interaction Design (1998)

36. Since then . . .
Outside-in design (2007)
Expanded to include stakeholders,
in addition to users
Design thinking
User experience design plays a much
larger role in driving business process change.

37. Since then . . .
List (objects) Context menu (actions)

38. OOUX Objects & features
Classes
What it isn’t Instances
Where it came from Views
What it is
Design models
OOUX process
Resources

39. Objects

40. Object features (not exclusive)
Composition Containment

41. Object classes
Container Data Device

42. Object hierarchy & instances
Car Lot
Cars Trucks
Cute Chevy
red truck
convertible

43. Object views
Composed
Contents
Properties
Assistance

44. Composed view
Data objects
WYSIWYG
Relative order
is important

45. Contents view
Data & container
objects
Relative order
is not important
Switch views
per user task

46. Property view
Device objects
Display/modify
settings and
properties

47. Assistance view
Provide Help,
tutorials, other
useful info about
using an object

48. OOUX User’s conceptual model
Multiple user models
What it isn’t Designer’s model
Where it came from Designer’s iceberg analogy
What it is Reconciling multiple user
models
Design models
Developer’s model
OOUX process
Resources

49. Design models Designer’s model
User’s
conceptual
model
Developer’s model

50. User’s conceptual
model
“I never design a building
before I’ve seen the site
Mental images each user and met the people who
subconsciously forms will be using it.”
through experience
Frank Lloyd Wright

51. User’s conceptual model

52. “The problem for the
Multiple user interface designer is to
models 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

53. Designer’s
model “Most software is run by
confused users acting on
incorrect and incomplete
Designer’s intent of the information, doing things
objects user sees and the designer never
how they use objects expected.”
to accomplish their tasks
Paul Heckel, 1984

54. Designer’s model – iceberg analogy
Presentation/visuals
(UX Look – 10%)
most visible, easily distracted by,
wrongly viewed as the most
important part of the model
Interaction techniques
(UX Feel – 30%)
not always visible, but certainly
critical aspect of the model
Object model/relationships
(Things users use – 60%)
most critical and important
component – objects/relationships

55. Designer’s model – another analogy

56. Reconciling multiple user models

57. Developer’s
model
“This would be a great job
describes the system if it weren’t for all those
internals used to build/damn users.”
implement the designer’s Anonymous Programmer
model
Independent of other
models

58. OOUX Discovery/task analysis
Construct object model
What it isn’t Design object views
Where it came from
What it is
Design models
OOUX process
Resources

59. Discovery/ Task “Not everything that counts
can be counted and not
analysis everything that can be
counted counts.”
contextual/task analysis
Albert Einstein
requirements gathering
persona development
“He who asks a question
usability testing
may be a fool for five
minutes, but he who never
Focus on context and asks a question remains a
environmental objects fool forever.”
Tim Connely

60. Construct object Task description from task
analysis for a car dealership
model system:
Find objects Salesperson inquires about the
Group into categories customer’s wants, needs and
budget. Find out what cars the
Define 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.

61. Salesman inquires about the
Find 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.

62. Group into object Concrete objects:
Car, car dealership
categories
People (object):
Customer
Concrete 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)

63. 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

64. Define object properties and behaviors
Target Customer Customer Car Car Lot Worksheet Worksheet Sales Mgr. Finance Mgr.
List List In-Basket In-Basket
Source
Customer moved customer customer customer data
into data copied data copied & copied & sent
Customer into sent to Sales to Finance
List worksheet Manager Manager
Customer
List
Car moved data copied
into Car into
Lot worksheet
Car Lot worksheet worksheet worksheet
moved into data copied & data copied &
worksheet sent to Sales sent to
list Manager Finance
Manager
Worksheet
Worksheet
List

65. Construct object Once objects and
relationships are defined,
views determine views that give
users the best access
to objects and the
information they contain

66. Car (data object) –
properties view

67. Customer (data object) –
properties view

68. Car lot (container object) –
contents view

69. Worksheet (data object) –
properties view

70. OOUX
What it isn’t
Where it came from
What it is
Design models
OOUX process
Resources

71. Resources
Object-Oriented Interface
Design: IBM Common User
Access Guidelines
IBM (Que, 1992)

72. Resources
The GUI-OOUI War: Windows vs.
OS/2: The Designer's Guide to
Human-Computer Interfaces
Mandel (Van Nostrand Reinhold, 1994)
The Elements of User Interface
Design, Mandel (John Wiley & Sons, 1997)

73. Resources
Designing Object-Oriented
User Interfaces
Collins (Addison-Wesley, 1995)

74. Resources
Designing for the User
with OVID: Bridging
User Interface Design
and Software Engineering
Roberts, Berry, Mullaly &
Isensee (Macmillan, 1998)

75. Resources
Outside-in Software
Development: A Practical
Approach to Building
Successful Stakeholder-based
Products
Kessler & Sweitzer
(Pearson Education, 2007)

76. Resources
Design Thinking Blurs the Line Between Process
and Experience Design (Forrester Research Blog, 2012)
IBM Design (https://www-01.ibm.com/software/ucd/)
Explore!

77. Theo Mandel, Ph.D. email:
theo@theomandel.com
Interface Design &
web:
Development theomandel.com
twitter:
theomandel
linkedIn:
theomandel