Oracle ADF Architecture TV - Design - Usability and Layout Design

Real World ADF Design & Architecture Principles Usability (UX) and Layout Design

ORACLE PRODUCT

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/

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

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

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

Transcript of Oracle ADF Architecture TV - Design - Usability and Layout Design

Usability és design

Usability of CAPTCHAs Or “usability issues in CAPTCHA design”

OpenERP - Usability and design

Usability in Web Design

Design - ADF Architectural Patterns

Design & Usability track opening

Adf Task Flow Design

Design in transport adf infrastructure · ADF07_DTI Supp Covers_cpbp_flatplan 20/07/2015 09:56 Page 2. adf Design in Transport Infrastructure supplement adf architects datafile ealing

Website Usability Design Vs

Oracle ADF Architecture TV - Design - ADF BC Application Module Design

Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.

Usability & Interface Design Workshop

Usability & Design Principles

Usability design for pleasure

Usability Design

「Kele Music」Design & Usability Test

Oracle ADF Architecture TV - Design - Project Dependencies

ADF Design Fundamentals

Oracle ADF Architecture TV - Design - ADF Architectural Patterns

UI Design, Usability suggestions