What is a user interface design pattern?

advertisement
<Insert Picture Here>
Oracle User Experience Design Patterns
George Hackman
Senior Director of Applications
User Experience
Attending Today from Oracle
• Lydia Naylor, Manager User Experience:
Coordinating the pilot study
• Kristin Desmond, Senior Manager User Experience:
Customization, Extensibility, FusionGPS
externalization
• Katy Massucco, Senior Manager User Experience:
FusionGPS
• Somnath Lokesh, Senior Usability Engineer:
FusionGPS externalization – dialing in
Why We’re Here
• This Morning: Talking about Design Patterns
– Sharing what we’ve learned about using user interface (UI)
design patterns in designing and developing Fusion
Applications
• This Afternoon: Launching a Research Project
– Sharing our UI design patterns with a small group of LLNL
developers
– To learn if our design patterns would be useful to customers
© 2009 Oracle Corporation – Proprietary and Confidential
Agenda
•
•
•
•
•
•
What is user experience?
Who is the user experience team at Oracle?
How do we improve the post sales user experience?
What is FusionGPS?
What is a user experience pattern?
How did we use patterns in Fusion Applications
Development?
• How can you use patterns at Lawrence Livermore?
What is user experience?
• In addition to good layout, flow and interaction…
designing the product to take the user into
account.
• We need to know the user, where they work and how
they work, before we design for them.
It’s how you work,
not just how you click!
TM
© 2010 Oracle Corporation – Proprietary and Confidential
Who is the user experience team at Oracle?
Over 100 Professionals
• Ethnographers, cognitive psychologists, and
behavioral research scientists
• Human-computer interaction experts
• Product designers, graphic artists
• Software developers
© 2010 Oracle Corporation – Proprietary and Confidential
Oracle User Experience is a Large, Diverse team
Consists of Alumni from…
© 2010 Oracle Corporation – Proprietary and Confidential
What is the User Experience Design Process?
1: Research
2: Analyze
3: Design
Listened to and observed
how you do your job
Identified the key elements
important to you
Created designs based on what
was important for you to do
your work
5: Measure
4: Prototype
Tested these solutions with our
users to ensure we hit the mark
Built detailed prototypes to
refine our solutions
© 2010 Oracle Corporation – Proprietary and Confidential
World-Class Usability Labs
We Study Exactly How Users Work
Eye-Tracking System
Control Room
Focus Group Room
Office-Type Lab
Classroom
Visualization Lab
© 2010 Oracle Corporation – Proprietary and Confidential
How do we improve the post sales user experience?
• Enterprise software has a life cycle beyond release
that impacts the ultimate end users experience.
• This includes setup, configuration and
customization.
• How can we help our customers maintain or
improve the user experience during this process?
3 Steps we are taking to address post sales
experience.
Research: Understand how our customers extend
and customize our apps now.
Externalize: UI design patterns, guidelines and
standards (aka FusionGPS).
• Improve the user experience of our customization and
development tools.
What is FusionGPS?
• User Interface Guidelines, Patterns and Standards
(GPS) used to design Fusion Applications.
What is a design pattern?
• Began in architecture but have become widespread
in user experience design
– Each pattern is a three-part rule, which expresses a
relationship between a certain context, a problem, and a
solution.
• Christopher Alexander
• Non-Oracle Patterns User Interface patterns
– Yahoo
– Welie.com
– Design of Sites.com
• Coding Patterns
– Grady Booch
What is a user interface design pattern?
• Reusable user interface design solutions to
common problems based on studying users, their
tasks and their environments.
– These are not code patterns (ala Grady Booch)
• Higher level building blocks for Fusion
• They are completely buildable using Fusion
Middleware and ADF.
• Linked to detailed component user interface
specifications.
Problem
Context
Solution
Why build Fusion user interface design patterns?
• UI Consistency – many flows built across many
organizations used by same user.
• Buildability – design patterns supported correct use of
components.
• Innovation – using patterns allows more time to focus
on innovation.
Pattern usage in Human Capital Management
UI Shell Global Header + Search Pattern
Sequential Horizontal Train Pattern
Complex Form Pattern
Embedded
Analytics
Pattern
Pattern usage in Human Capital Management
UI Shell Global Header + Search Pattern
Tree Table pattern
Contextual
Actions
pattern
Embedded Analytics patterns
How do you build a pattern library?
Best-use experience patterns are discovered by seeing
what works well for users.
• 1,500 hours observing customer interactions with
enterprise applications
• Thousands of hours of design and usability work with
PeopleSoft, JD Edwards, and Siebel
• Extensive analysis of Web 2.0 patterns from
pattern books, pattern Web sites, and consumer
applications (Google, Apple etc.)
How do you know if the patterns are good?
• Each pattern went through multiple independent
reviews to ensure:
– Usability, consistency, productivity
– Complete buildability with Oracle Fusion Middleware
– Ability to connect and interact with other patterns
• Patterns were usability tested with customers
before coding.
• Patterns were enhanced during Oracle Fusion
development to improve user experience and
buildability.
What did you end up with?
The result of these efforts: The Applications User Experience pattern
library.
• The library holds more than 200 user experience patterns,
including:
–
–
–
–
–
Flows
Dialogs
Messages
Dashboards
Mobile
• Every pattern is completely buildable using Oracle Fusion
Middleware.
• The patterns support these technologies:
–
–
–
–
–
ADF Faces
BPEL/BPM
Webcenter
OBIEE
Mobile
How we benefited from UX patterns
Buildability – Starting with a realistic, proven interface design
for our code made all the ADF parts fall together much
easier.
Usability – Patterns have been usability tested as Fusion has
been developed. Our developers got baked in usability for
free.
Consistency – Using the same pattern across development
created consistency across our Fusion Applications
Innovation – Used patterns for the 80% of our flows needed to
be consistent and predictable. This left development time
for the 20% of our flows that required a unique user
interface.
FusionGPS Demo: Using patterns at LLNL
Q and A
Backup slides: I will walk through this example on
FusionGPS if for some reason we cannot connect to
the site.
An example of using patterns to build a flow
You…
• are a developer in charge of designing an
ecommerce site.
• want to build something competitive with
contemporary sites on the web.
• have a flow that requires, search, a shopping cart, a
chart and a rating system.
• want to make sure your flow is buildable using
Fusion Middleware.
• Where do you start?
UX Sales Collateral Feedback Sessions: Template | January 2010 | © 2010 Oracle Corporation | Proprietary and Confidential
Download