Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference
-
Upload
theo-mandel-interface-design-and-development -
Category
Technology
-
view
3.978 -
download
2
description
Transcript of Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference
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:
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:
web:
theomandel.com
twitter:
theomandel
linkedIn:
theomandel
Theo Mandel, Ph.D.
Interface Design &
Development