Optimizing your E-Business Suite for Mobile and...
Transcript of Optimizing your E-Business Suite for Mobile and...
![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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/1.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/3.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/7.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/8.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/11.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/12.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/14.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/16.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/18.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/19.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/20.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/21.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/22.jpg)
“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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/23.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/24.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/25.jpg)
@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](https://reader034.fdocuments.net/reader034/viewer/2022042708/5a78e9037f8b9a9d218b6ffe/html5/thumbnails/26.jpg)
@oracleskins facebook.com/oracleskins.com