Oracle ADF Architecture TV - Design - Usability and Layout Design

Real World ADF Design & Architecture Principles
Usability (UX) and Layout Design
ORACLE
PRODUCT
LOGO
15th Feb 2013 v1.0

Learning Objectives
•  At the end of this module you should be able to:
–  Understand good design and usability
–  Explain the difference between adaptive design
and responsive layout
–  Follow up and apply good UX practices to your ADF applications
–  Think in pattern
Image: imagerymajestic/ FreeDigitalPhotos.net

•  Website should have a clear user interface design that
leads users attention to products and service
•  All interaction users have with the website should not
exceed 3 navigation steps
Functional Requirements

Program Agenda
•  Understanding the User
•  Wire Frames
•  Tips for building Custom Skins
•  Adaptive / Responsive Design
•  UX Pattern

Development Challenges
•  Web and mobile views must
–  Meet the user expectation
• Developers no longer dictate the "hip and cool"
• Social network and mobile apps have raised the bar
–  Work on different browsers
–  Handle different screen resolutions well
–  Be accessible on different devices
• Browsers
• Screen reader
• Tablet, phone

Brave New World: Web & Mobile vs. Print
“In print the designer is god. An enormous industry has emerged from
WYSIWYG, and many of the web’s designers are grounded in the
beliefs and practices, the ritual of that medium. As designers we need
to rethink this role, to abandon control, and seek a new relationship
with the page.."
John Allsopp, " A Dao of Web Design"
http://www.alistapart.com/articles/dao/

8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Let's play a game.
I'll ask you to close your eyes. Then I'll
ask you to open them for five seconds,
where you will see a website. I'll then
hide the picture and ask you some
questions.
Now, close your eyes....
Exercise
Image: Ambro / FreeDigitalPhotos.net

Exercise
What do you remember from the page?
How did you read the page?
From left to right or right to left?
What did you scan first?

Scanning Follows Reading
•  Sections of the page are generally read in the same order as a
given language (i.e., left to right, top to bottom in English)
•  Sections of the page should be ordered similarly
•  Most important content should be “above the fold” and visible, not
hidden in page layers such as tabs
•  Similar content should align vertically (columns) and horizontally
(layout) to create logical groups of content and speed the eye’s
scanning of the page.

Layout of Content: Reading Order
Left-to-right languages Right-to-left languages

Jakob Nielsen’s “F” Shape
Eye-tracking study of users scanning the page (source: www.useit.com)

Fusion Page Using the Same Principles
Branding and
highest-level
actions
Secondary
navigation that
drives the
content area
Main content
area with
transaction

Alignment (Uneven)

Alignment (Even)

Program Agenda
•  Wire Frames
•  UX Pattern

How Oracle Builds an Applications User Experience
Observe Analyze Wireframe Prototype
Build and
Measure
We observe real end
users where they
work, doing real
tasks. Globally.
We identify themes
and usage activities
across different
users.
We sketch out
experiences and
refine with users.
Proven functional UI
design patterns inform
our sketches.
Designs agreed, we
build working
prototypes and test
with real users
performing real work
tasks.
We test the
implemented design
again and
scientifically
measure usage.
1 2 3 4 5

Wireframing: Visualization of UX
•  Input: User requirements and product use cases
•  Output: Lightweight (“low-fidelity”) drawing
•  Objectives
•  Explore page designs
•  Blueprint interaction design
•  Blueprint navigation flows
•  Evaluate page layout and components
•  Approvals and buy-in by stakeholders

Wireframe: Benefits
•  Stakeholder buy-in
•  Faster iteration
•  Navigation (Oracle Fusion Applications roles)
•  Content strategy (readability, search optimization)
•  Pages, widgets, group layouts
•  Discounted usability heuristics
•  Functional (UI) design patterns
•  Oracle Application Development Framework (ADF) assessment

Program Agenda
•  Wire Frames
•  UX Pattern

Exercise
Apart from the products,
what do you like on this
page?

4 Things To Consider For Your Skins
•  Color
•  Contrast
•  Spacing
•  Font and text

Color
•  Temperature
–  Light and warm colors makes things seem closer and larger to the user
–  Dark and cool colors make things seem to recede/seem further away from the user, and
tend to look smaller
–  Warm colors are stimulating, while cool colors are calming
•  As a design element on a page
–  Bright colors catch the eye but can also be distracting, so use sparingly and deliberately
–  When part of a company’s brand identity can be used as a design element to further the
brand’s effect on the product
•  Meaning
–  Users will infer meaning from some color choices (red = error, yellow = warning, green = all
is well)

Light/Warm Advances, Cool/Dark Recedes
AA AA

Contrast
•  Contrast is the difference between two adjacent colors
•  Good contrast is critical to legibility, especially text
•  The best contrast is black text on a white background, and it
degrades from there
•  Poor contrast can cause eye strain in users with good vision
•  Poor contrast can render a page illegible for users with
compromised vision
•  Accessibility standards require a minimum level of contrast,
which may be a factor for the product you are working on
Legibility of Text

Contrast Examples
text text text text text text
text text text text text text
This is black text on white, which is the best contrast you can get. It has a luminosity contrast ratio of 21:00:1
Minimum ratio for accessibility standards: 4:5:1. Source for luminosity color ratio calculations: juicystudio.com
This is black text on #D8E9F4, which still has an excellent contrast ratio (16:88:1). Sometimes a slight tint to
the background can alleviate eye strain from the starkness of black/white.
This is black text on #3775B5, which has a contrast of 4:37:1 and works better for large text.
It does not work well for small text.
This is black text on #144C86, which has a contrast of 2:41:1. It fails for both largeand small text.

Spacing
•  Blank areas of the page can be deliberately used as a design
element to break up the density of the page and give the eye a
place to rest or focus.
•  It can also disrupt the flow of a page if occurring accidently.
•  Padding between objects on a page helps separate objects and
define relationships to group information on the page.
•  Unintentional padding can infer relationships that are not intended.
Why You Need White Space

Padding Creates Resting Places

Padding
Confusing padding Good padding

Font And Text
•  Font choice has a lot to do with the personality of the page
•  Bold text draws the eye, so use it deliberately
•  Italic text can be difficult to read on the screen
•  The user will read larger text first in the hierarchy of a page (think
page titles or subtitles) vs. field labels
•  Fonts vary by OS, so use fallback fonts to prevent unpredictable
results on different machines
Basic Readability Principles

Fonts
High Legibility Low Legibility
Longer Shelf Life Gets Outdated Quickly
Conservative Flashy

Using Bold Text Strategically

Program Agenda
•  Wire Frames
•  UX Pattern

Adaptive Design
•  Adaptive Design
–  Design that takes advantage of its surroundings
• If there is more space, screen will show more / additional components
and information
• Application integrates with native device functionality
–  Touch gestures, camera, phone book, GPS etc.
–  Switched off if application runs on other devices
•  Device as the differentiator

Responsive Design
•  Responsive design
–  Design that is aware of surroundings and adjusts accordingly
–  Components resize themselves
•  Using percentages
•  Using CSS media tags
–  Think vertical vs. horizontal phone layouts

Devices are Different
•  Desktop
–  Users usually stay longer in application.
–  Big screens
–  Heavy to medium data entry
–  Larger data sets, graphics and downloads
–  Example: Call centers, Customer Relationship Management (CRM), Warehouse
management, Store front, Development and customization
•  Tablet
–  Browse and data entry access with limited data entry volumes
–  User access applications temporarily but for a longer period of time
–  Example: Store front, sales support, e-mail , business and system monitoring
–  Smaller screens
… and so are their use cases and requirements

Devices are Different
•  Mobile phone
–  Easy access to information and data entry sites
–  Information and orientation lookup
–  Limited data entry, small data entry forms
–  Example: Conference information and agenda lookup, management approval, accident-,
incident- and expense reporting, airline check in, social community updates
–  Some say you still can use them as a phone
•  Applications may start calls
–  Smallest screen
… and so are their use cases and requirements

Is "mobile first" a better design
strategy than "web first"?
Exercise
Image: imagerymajestic/ FreeDigitalPhotos.net

Program Agenda
•  Wire Frames
•  UX Pattern

Architecture Patterns
The Original Definition
"...each pattern represents our current best guess as to what
arrangement of the physical environment will work to solve the
problem presented. The empirical questions center on the problem -
does it occur and is it felt in the way we have described it? - and the
solution - does the arrangement we propose in fact resolve the
problem?"
Christopher Alexander,
A Pattern Language

Software Pattern
•  Blueprints representing recommendation of best practices solutions
for common problems and architecture
•  Defines a common language that is well understood by experts to
simplify communication
•  Pattern are not invented but discovered by experience

Usability and User Interface Pattern
•  Usability suggestions are based on observations of how users work
with a product or software to accomplish a given task
•  User interface pattern are design instructions for building consistent
UI artifacts …
–  Auto suggest, shell template, search field, table with attachment
•  … and view navigation
–  Depth of navigation, navigation paths, navigation areas (context areas)

Oracle Fusion Applications User Experience
Patterns and Guidelines
www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html
Design Patterns Guidelines

Oracle Fusion Applications User Experience
Mobile Design Patterns
www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html

Oracle ADF Rich Client
User Interface Guidelines
http://www.oracle.com/webfolder/ux/middleware/richclient/index.html

Conclusion
•  Users have expectations towards how an application
feature works on a specific device
•  Mobile devices require views tailored to the device and
device capabilities as well as a different navigation and
different gestures
•  Color, fonts and a readable layout are important
•  As a developer, become friends with the unhappy users
because they are usually honest and detailed in what they
can't do or don't like
•  Patterns help to implement UI functionality consistently
across views. Oracle UX provides pattern and guidelines.
•  Get familiar with responsive layouts and adaptive design

Further Reading
•  "A List apart" blog
–  http://www.alistapart.com/
•  Oracle Fusion Applications User Experience Patterns and Guidelines
–  http://www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html
•  Oracle Usability Website & blog
–  www.oracle.com/usableapps
–  blogs.oracle.com/UsableApps
•  Designing well known websites with ADF Rich Faces
–  http://www.slideshare.net/maikorocha/designing-well-known-websites-with-adf-rich-faces
•  Introducing the New Face of Fusion Applications
–  https://blogs.oracle.com/VOX/entry/introducing_the_new_face_of

Oracle ADF Architecture TV - Design - Usability and Layout Design

More Related Content

What's hot (20)

Similar to Oracle ADF Architecture TV - Design - Usability and Layout Design (20)

Recently uploaded (20)

Oracle ADF Architecture TV - Design - Usability and Layout Design