Theo Mandel, Ph.D. Interface Design and Development

iueconference.com

Designing

Object-Oriented

User Experiences

Or,

By the end of this

presentation you will

realize that by doing

good UX design, you are

actually doing Object-

Oriented design!

email:

theo@theomandel.com

web:

theomandel.com

twitter:

theomandel

linkedIn:

theomandel

Theo Mandel, Ph.D.

Interface Design &

Development

Intro:

history of

our field in

Acronyms

GUI Graphical

User

Interface

OOUI

Object-

Oriented

User

Interface

UI User

Interface

UX User

Experience

OOUX

Object-

Oriented

User

Experience

You saw it here

first!

OOUX

Presentation will be

available for all attendees

Presentation

goals

awareness

history

insight

“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

OOUX

Outline

What it isn’t

Where it came from

What it is

Design models

OOUX process

Resources

OOUX

What it isn’t

Where it came from

What it is

Design models

OOUX process

Resources

Action-object interface

Application-oriented interface

OOD or OOP

Skeumorphism

Action-object interface

copy <Source_File> <Destination_File>

Application-oriented interface

open <Application> select <Object or File>

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

Skeumorphism “Visually emulating objects in the real world.”

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

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

OOUX

What it isn’t

Where it came from

What it is

Design models

OOUX process

Resources

OOUIs

Objects & affordances

Objects & actions

IBM CUA

IBM RealThings

IBM OVID

Since then . . .

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!

OOUIs Tessler’s key OOUI concepts

1. Users see objects and choices displayed

graphically

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

OOUIs Tessler’s key OOUI concepts

2. Syntax of commands is “object-action”

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)

Drag-and-Drop Skeumorphism

OOUIs Tessler’s key OOUI concepts

4. The interface is modeless (or selecting an

action can determine a mode)

OOUIs Tessler’s key OOUI concepts

5. The interface displays objects in WYSIWYG

form (“What You See Is What You Get”)

OOUIs Tessler’s key OOUI concepts

6. Objects and actions are consistent both

within an application and across applications

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)

Objects & Actions

“Oh look, there’s a

<noun>book</noun>.”

“I believe I can

<action>

grab, open, read,

drop, throw, etc.

</ action>

the book.”

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)

IBM real things

RealPhone & RealCD

IBM OVID

Object, View, and Interaction Design (1998)

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.

Since then . . .

List (objects) Context menu (actions)

OOUX

What it isn’t

Where it came from

What it is

Design models

OOUX process

Resources

Objects & features

Classes

Instances

Views

Objects

Object features (not exclusive)

Composition Containment

Object classes

Container Data Device

Object hierarchy & instances

Car Lot

Cars Trucks

Cute Chevy

red truck

convertible

Object views

Composed

Contents

Properties

Assistance

Composed view

Data objects

WYSIWYG

Relative order

is important

Contents view

Data & container

objects

Relative order

is not important

Switch views

per user task

Property view

Device objects

Display/modify

settings and

properties

Assistance view

Provide Help,

tutorials, other

useful info about

using an object

OOUX

What it isn’t

Where it came from

What it is

Design models

OOUX process

Resources

User’s conceptual model

Multiple user models

Designer’s model

Designer’s iceberg analogy

Reconciling multiple user

models

Developer’s model

User’s conceptual

model

Designer’s model

Developer’s model

Design models

User’s conceptual

model

Mental images each user

subconsciously forms

through experience

“I never design a building

before I’ve seen the site

and met the people who

will be using it.”

Frank Lloyd Wright

User’s conceptual model

Multiple user

models

(personas)

“The problem for the

interface designer is to

design an interface that

users find predictable and

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

Designer’s

model

Designer’s intent of the

objects user sees and

how they use objects

to accomplish their tasks

“Most software is run by

confused users acting on

incorrect and incomplete

information, doing things

the designer never

expected.”

Paul Heckel, 1984

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

Designer’s model – another analogy

Reconciling multiple user models

Developer’s

model

describes the system

internals used to build/

implement the designer’s

model

Independent of other

models

“This would be a great job

if it weren’t for all those

damn users.”

Anonymous Programmer

OOUX

What it isn’t

Where it came from

What it is

Design models

OOUX process

Resources

Discovery/task analysis

Construct object model

Design object views

Discovery/ Task

analysis

contextual/task analysis

requirements gathering

persona development

usability testing

Focus on context and

environmental objects

“Not everything that counts

can be counted and not

everything that can be

counted counts.”

Albert Einstein

“He who asks a question

may be a fool for five

minutes, but he who never

asks a question remains a

fool forever.”

Tim Connely

Construct object

model

Find objects

Group into categories

Define object relationships,

properties and behaviors

Task description from task

analysis for a car dealership

system:

Salesperson inquires about the

customer’s wants, needs and

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

Find objects

Identify all nouns

Salesman inquires about the customer’s wants, needs and budget.

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.

Group into object

categories

Concrete objects

People

(objects of sentences)

Forms

People (subject of sentences

– users)

Abstract objects

Concrete objects:

Car, car dealership

People (object):

Customer

Forms:

Worksheet, agreement

People (subject):

Salesperson, sales manager,

finance manager

Abstract objects:

Customer details (wants,

needs, budget)

Define object relationships

Customer List

Worksheet List

Car Lot

Customer

Worksheet

Car

Sales Manager

Finance Manager

is stored in

is stored in

is stored in

is associated with

contains

contains

is sent to is associated with

Define object properties and behaviors

Target Source

Customer Customer List

Car Car Lot Worksheet Worksheet List

Sales Mgr. In-Basket

Finance Mgr. In-Basket

Customer moved into Customer List

customer data copied into worksheet

customer data copied & sent to Sales Manager

customer data copied & sent to Finance Manager

Customer List

Car moved into Car Lot

data copied into worksheet

Car Lot worksheet moved into worksheet list

worksheet data copied & sent to Sales Manager

worksheet data copied & sent to Finance Manager

Worksheet

Worksheet List

Construct object

views

Once objects and

relationships are defined,

determine views that give

users the best access

to objects and the

information they contain

Car (data object) –

properties view

Customer (data object) –

properties view

Car lot (container object) –

contents view

Worksheet (data object) –

properties view

OOUX

What it isn’t

Where it came from

What it is

Design models

OOUX process

Resources

Resources

Object-Oriented Interface

Design: IBM Common User

Access Guidelines

IBM (Que, 1992)

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)

Resources

Designing Object-Oriented

User Interfaces

Collins (Addison-Wesley, 1995)

Resources

Designing for the User

with OVID: Bridging

User Interface Design

and Software Engineering

Roberts, Berry, Mullaly &

Isensee (Macmillan, 1998)

Resources

Outside-in Software

Development: A Practical

Approach to Building

Successful Stakeholder-based

Products

Kessler & Sweitzer

(Pearson Education, 2007)

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!

email:

theo@theomandel.com

web:

theomandel.com

twitter:

theomandel

linkedIn:

theomandel

Theo Mandel, Ph.D.

Interface Design &

Development