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



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



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

A A A A


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 large and 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



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



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

Technology

program agenda understanding

ambro freedigitalphotos

imagerymajestic freedigitalphotos

design element

black text

rights reserved

store front

exercise image