optimizing your e-business suite for mobile and...

26
Michael West UX Hero / Director T: 07884218111 E: [email protected] E: [email protected] Optimizing your E-Business Suite for Mobile and Tablet - Using existing EBS Functionality to transform your User Experience (UX) 08 th December 2014 uk.linkedin.com/in/oraclehcm/ @oracleskins facebook.com/oracleskins .com -> no additional technology required! Note: Personalization code used in the Apps14 demonstration is contained in slide comments If you are viewing the PDF version of this document then please contact me for the code

Upload: buitu

Post on 06-Feb-2018

216 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Michael West

UX Hero / Director

T: 07884218111E: [email protected]: [email protected]

Optimizing your E-Business Suite for Mobile and Tablet

- Using existing EBS Functionality to transform your User Experience (UX)

08th December 2014

uk.linkedin.com/in/oraclehcm/

@oracleskins facebook.com/oracleskins.com

-> no additional technology required!Note: Personalization code used in the Apps14 demonstration is contained in slide comments

If you are viewing the PDF version of this document then please contact me for the code

Page 2: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

About Me

o Oracle HCM Consultant since 2005� Functional background

� Originally specialising in EBS Self-Service / OAF modules

� Custom Look and Feel / UI expert

� Now doing Fusion HCM Implementations

o Started Appsynx / OracleSkins.com in 2009� Offering remote UX & UI services for Oracle Customers worldwide

� Worked for number of global customers on their EBS UX, including:

@oracleskins facebook.com/oracleskins.com

Page 3: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Optimising your E-Business Suite for Mobile and Tablet

o Mobile Strategy / your options for going ‘Mobile’?� What’s out there?

� What you need to consider

� What you can do without extra technology / large investment!

o Exploring Personalizations

o Demo: Icon Based Home Page

o Demo: CSS to Improve Usability

o Exploring Custom Look and Feel ‘CLAF’

o Demo: CLAF

o Deployment options / technical requirements

o Q&A

@oracleskins facebook.com/oracleskins.com

Page 4: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Mobile Strategy – do I need one?

o Why?� Anywhere, anytime is now expectation for corporate systems

� User wants to be able to perform admin transactions quickly and simply

� Retail, Manufacturing = large volumes of employees/users who don’t sit at a PC

o Oracle Stats� 59% of employees use mobile devices to run line of business applications

� 71% of companies are discussing developing custom mobile apps

� 74% of companies allow Bring Your Own Device (BYOD) in some fashion

� Enterprise tablet adoption will grow by almost 50% per year

� By 2015, mobile app development projects will outnumber PC projects by a ratio of 4-to-1

� Mobile internet users will exceed desktop internet users by 2014

o Oracle Key Theme: Modern User Experience� “Simplify”

� “Iconize”

� “Dashboards”

� “Reduce Clicks”

@oracleskins facebook.com/oracleskins.com

Page 5: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Mobile Strategy – Apps vs Optimized Design

o Apps� Easy to Use as Layout and Navigation built just for Mobile/Tablet Native Device Access

� Can be available offline [used to be key selling point]

� But…

� Content / business process now needs maintenance in > 1 place

� Architecture constantly changing = constant software update and support

� Multiple platforms (iOS, Android, Windows, Other…)

� Multiple software versions

� Multiple screen resolutions

� Future-Proofed?

o Responsive Design � Now common practice among modern websites

� Optimized for Mobile / Tablet without extra technology

� Flexible / Dynamic Layout, Hide/Show Key Information only

� But…

� Not available offline & same page ‘flow’ for desktop and mobileRecommended Article: Responsive Web Design

Recommended Article: You Don’t Need an App for That

@oracleskins facebook.com/oracleskins.com

Page 6: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Mobile Strategy – Considerations

o Accessibility / Security� Corporate internal access only

� Access from anywhere

o Scope of Mobile / Tablet Accessible Transactions� All transactions vs individual transactions

o User Interface� Is branding important?

o Timescale� How quick do you need a solution? How long will it be active?

� Future plans…upgrade to R12.2+…move to Fusion

o Budget� Development

� Infrastructure

� Support/License

o In-house maintenance skills

@oracleskins facebook.com/oracleskins.com

Page 7: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

ESB - So What Are The Options? – upgrade / roadmap

o Simplied UI in OAF� New Oracle delivered skin (uses CLAF)

� But…

� Built for desktop

� Same view/access on desktop and mobile

� Only available on latest releases R12.2.4

o Wait for Responsive OAF?� Responsiveness is on the EBS roadmap however no current information on the scope or release

date (not expected in next 1-2 years) and not likely to be a full solution

� I would expect a delivered scope similar to Peoplesoft FluidUI i.e. limited transaction scope,

requires technical work to extend to other transactions

o Fusion (Direct Move or Co-existence)� Fuse = 2nd interface for Mobile Devices

� Fusion Tap apps

� Recommended Session:

MON 15:00 – 15:50 Which Journey is best for you? [R.Atkins - Certus Solutions]

@oracleskins facebook.com/oracleskins.com

Page 8: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

EBS - So What Are The Options? – new technology

o Oracle Provided “Apps”� Oracle have started to provide apps for individual transactions ‘Speciality Apps’

� But…

� Limited transaction scope and device supporte.g. Oracle Mobile Approvals app = Expenses, Requisitions, Purchase Orders Recruitment only, iOS 7+ only

� Limited configuration options (won’t support your customized business processes)

� Oracle UI only

o Create Your Own Apps / 3rd Party Apps� e.g. Oracle ADF Mobile

� But…

� Limited transaction scope & scalability

� Development, Technology/Integration costs

� Future Maintenance / License costs

o Custom Front Ends� Full Control over your design / can be made Responsive

� But…

� Limited transaction scope & scalability

� Development, Technology / Integration costs

� Future Maintenance / License costs

� Recommended Session:

WED 11:30 – 12:20 National Trust iRecruitment Extreme Makeover [Claremont / Applaud]

@oracleskins facebook.com/oracleskins.com

Page 9: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

EBS - So What Are The Options? – existing technology

o Personalizations� Each OAF page is a webpage

� You can add any content or changes you wish -> the only limit is your imagination!

� Take advantage of CSS / CSS3 / HTML5 / Javascript / jQuery via Raw Text items

� But…

� Individual page / region changes only

� No layout control

� Oracle UI only

o Custom Look and Feel� Easy way to modernize your User Experience

� Control over appearance and layout

� Covers all pages / transactions (use profile option to switch on or off)

� Option to create ‘Responsive’ layout or standalone ‘mobile’ skin

� But…

� Doesn’t help with “page click”

(though does pick up custom OAF pages and new one-page SSHR pages)

@oracleskins facebook.com/oracleskins.com

Page 10: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Personalizations – Modernize “Iconize”

o EBS can be changed just like Fusion� Main Fusion Homepage has no content by default…you must create it

@oracleskins facebook.com/oracleskins.com

Page 11: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Personalizations – Modernize “Iconize”

o Challenge: Recreate the R12.2.4 Iconized Homepage on 11i/R12� Navigator is just a webpage – can’t we just add our own icons…

@oracleskins facebook.com/oracleskins.com

Page 12: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Personalizations – DEMO - Iconize

o Example: Use Personalization to Create Navigation Icons� Buy / build some icons [I bought mine from shutterstock.com]

� Upload Icons to OA_MEDIA

� Add Icons as Raw Text Personalizations – use Hyperlink to EBS Functions

Optional

� Use SPEL Function security to determine access to icons

� Use ‘switcher’ to switch between normal navigator and icon navigation

@oracleskins facebook.com/oracleskins.com

Note: Personalization code used in the Apps14 demonstration is contained in slide comments

If you are viewing the PDF version of this document then please contact me for the code

Page 13: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Personalizations – DEMO – Usability / Accessibility

o Example: Buttons for Mobile Devices

� Apple recommends that the minimum size tap target area for iPhone and iPad is:

44 pixels

� Oracle R12 Standard Button size:

18px

� Add Raw Text Items with “CSS” code to override standard button size on Mobile

<style> #button#SubmitButton, button#Cancel {font-size: 44px;} </style>

One Step Further:

� Use multiple CSS styles to create a full new button look and feel

� Use custom.xss or full Custom Look and Feel to make changes across all screens

Example:

@oracleskins facebook.com/oracleskins.com

Note: Personalization code used in the Apps14 demonstration is contained in slide comments

If you are viewing the PDF version of this document then please contact me for the code

Page 14: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Personalization – DEMO – Simplify

o Example: Login Page

o How to Enhance User Experience?

� Show Important information only

-> declutter

� Remove need to Zoom in / out to complete

Next Step:

� How to apply the same rules across the

whole E-Business Suite at one time…?

@oracleskins facebook.com/oracleskins.com

One Step Further:

� Make additional “CSS” rules Landscape

and Portrait modes e.g.

@media only screen and (min-device-width : 768px) and

(max-device-width : 1024px) and (orientation : landscape) { … }

@media only screen and (min-device-width : 768px) and

(max-device-width : 1024px) and (orientation : portrait) { … }

Page 15: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Custom Look and Feel (CLAF) – “Skins”

o Ability to change the style / layout of your Oracle OAF pages without

customizing � All your existing processes, personalizations, custom pages are all supported

� see Oracle Applications Framework Personalization Guide

o Oracle seeded Look and Feels:

BrowserLookandFeel Swan Skyros

o Custom Look and Feels - typically used for changing the Branding of your EBS

@oracleskins facebook.com/oracleskins.com

Page 16: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Custom Look and Feel (CLAF) – “Skins” Overview

@oracleskins facebook.com/oracleskins.com

o Improved User Experience (UX)

o Improved Employee Buy-in / User Adoption to new or existing applications

o Seamless Integration with Website / Intranet Systems

o No new technology required

o Quick to Implement:

� Development: 2-3 weeks

� Go-live: 2-8 weeks

Page 17: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Custom Look and Feel (CLAF) – “Skins”

o Examples

@oracleskins facebook.com/oracleskins.com

Page 18: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Custom Look and Feel (CLAF) – “Skins”

o Examples

@oracleskins facebook.com/oracleskins.com

Page 19: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Custom Look and Feel (CLAF) – “Skins”

o Examples

@oracleskins facebook.com/oracleskins.com

Page 20: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Custom Look and Feel (CLAF) – “Touch Skins”

o Responsive Design to Optimize the appearance of EBS on Mobile Devices

o see Peoplesoft FluidUI – just released

o Using CSS3 / HTML5� Transforms / Transistions / Box Shadows

o Use @media to specify designs for different

devices

@oracleskins facebook.com/oracleskins.com

Page 21: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Custom Look and Feel (CLAF) – “Touch Skins” Design

o Example Latest Project: iRecruitment CLAF Skin designed for Desktop View and

Mobile View – expected to be live Jan 2015

Design Choices:

o Responsive vs Mobile Only

o Multiple @media for every size device

@oracleskins facebook.com/oracleskins.com

Page 22: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

“Touch Skins” Deployment Options – Access Anywhere

o Suggestion: Use DMZ Server (like iRecruitment / iSupplier)

� Server: Create DMZ Node on your server

Make node externally available

� EBS Setup: Create Responsibility for MobileInclude the Functions you want to be available on Mobile

� EBS Setup: Oracle Applications Look and Feel profile optionSet to ‘xxx-desktop’ where xxx desktop is name of your Touch skin

� EBS Setup: Responsibility Trust Level profile option

Set to ‘Administrative’ at normal server+responsibility level

Set to ‘External’ at external server+responsibility level

@oracleskins facebook.com/oracleskins.com

Page 23: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Personalize and ‘Touch’ Custom Look and Feel Together

Benefits:

o No New Technology!

o No License costs

o Quick to implement

o Control over the design / brand

Limitations:

o Can’t reduce “Page Clicks”� Could use OAF / Workflow

� Manager Actions Simplified

o Not available offline

o Can require additional personalization

effort per page to fully optimize

@oracleskins facebook.com/oracleskins.com

Note: Personalization code used in the Apps14 demonstration is contained in slide comments

If you are viewing the PDF version of this document then please contact me for the code

Page 24: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

Summary

o Lots of options to go mobile!My Personal Recommendation:

� Try to use HTML / browser based solutions [rather than apps] as these

will have greatest flexibility / future-proof across devices & platformse.g. Smart Watches – could be the future (?)

Apps will need re-developed from scratch…but any HTML / browser based solutions will be

supported and you can use @media queries to improve the layout / ui for the specific device

o Personalizations – use to quickly iconize and de-clutter � Skills Required: Oracle Functional or Technical Expertise

� Estimated Implementation Time: 1-2 days

o Custom Look and Feel – mobilize all or single transactions� No extra technology / licenses required

� Use @media queries to optimize for mobile

� Design/brand completely controllable

� Skills Required: Web Design, Oracle Technical Expertise

� Estimated Implementation Time: 2-8 weeks

@oracleskins facebook.com/oracleskins.com

Page 25: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

@oracleskins facebook.com/oracleskins.com

Page 26: Optimizing your E-Business Suite for Mobile and Tabletoracleskins.com/Appsynx_Optimizing_EBS_Mobile_OracleSkins_08_De… · Optimizing your E-Business Suite for Mobile and Tablet

@oracleskins facebook.com/oracleskins.com