Oracle ADF Architecture TV - Design - Usability and Layout Design
-
Upload
chris-muir -
Category
Technology
-
view
213 -
download
2
description
Transcript of Oracle ADF Architecture TV - Design - Usability and Layout Design
1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
2 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Real World ADF Design & Architecture Principles Usability (UX) and Layout Design
ORACLE PRODUCT
LOGO
15th Feb 2013 v1.0
3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
• 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
5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Program Agenda
• Understanding the User • Wire Frames • Tips for building Custom Skins • Adaptive / Responsive Design • UX Pattern
6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Exercise
Image: Ambro / FreeDigitalPhotos.net
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?
11 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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.
12 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Layout of Content: Reading Order Left-to-right languages Right-to-left languages
13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Jakob Nielsen’s “F” Shape
Eye-tracking study of users scanning the page (source: www.useit.com)
14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Fusion Page Using the Same Principles Branding and highest-level actions
Secondary navigation that
drives the content area
Main content area with transaction
15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Alignment (Uneven)
16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Alignment (Even)
17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Program Agenda
• Understanding the User • Wire Frames • Tips for building Custom Skins • Adaptive / Responsive Design • UX Pattern
18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
20 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Program Agenda
• Understanding the User • Wire Frames • Tips for building Custom Skins • Adaptive / Responsive Design • UX Pattern
22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Exercise
Apart from the products, what do you like on this
page?
Image: Ambro / FreeDigitalPhotos.net
23 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
4 Things To Consider For Your Skins
• Color • Contrast • Spacing • Font and text
24 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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)
25 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Light/Warm Advances, Cool/Dark Recedes
A A A A
26 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
27 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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.
28 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
29 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Padding Creates Resting Places
30 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Padding
Confusing padding Good padding
31 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
32 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Fonts
High Legibility Low Legibility
Longer Shelf Life Gets Outdated Quickly
Conservative Flashy
33 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Using Bold Text Strategically
34 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Program Agenda
• Understanding the User • Wire Frames • Tips for building Custom Skins • Adaptive / Responsive Design • UX Pattern
35 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
36 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
37 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
38 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Is "mobile first" a better design strategy than "web first"?
Exercise
Image: imagerymajestic/ FreeDigitalPhotos.net
40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Program Agenda
• Understanding the User • Wire Frames • Tips for building Custom Skins • Adaptive / Responsive Design • UX Pattern
41 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
42 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
43 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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)
44 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Oracle Fusion Applications User Experience Patterns and Guidelines www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html
Design Patterns Guidelines
45 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Oracle Fusion Applications User Experience Mobile Design Patterns www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html
46 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Oracle ADF Rich Client User Interface Guidelines http://www.oracle.com/webfolder/ux/middleware/richclient/index.html
47 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
48 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
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
49 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.