Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier
-
Upload
wim-snoep -
Category
Technology
-
view
352 -
download
0
description
Transcript of Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier
Adapting & creating Fiori apps has never been easier
Leo van Hengel & Wim Snoep
Focusgroep CDV & UX
10/31/2014 | 4 | ©2013 CIBER, Inc.
Adapting & creating Fiori apps has never been easier
• Wim Snoep
• Senior SAP NetWeaver consultant
• Background ₋ User experience consultant
₋ Portal / Mobile/ Fiori/ SAPUI5
• Leo van Hengel
• Senior SAP NetWeaver Consultant
• Background – Portal consultant
– Fiori / SAPUI5
Introduction
10/31/2014 | 5 | ©2013 CIBER, Inc.
Adapting & creating Fiori apps has never been easier
Why User experience &
importance
How Mockups
Services
User interface
Test
Demo
Questions
10/31/2014 | 6 | ©2013 CIBER, Inc.
Why?
Beautiful products have an attractive harmonic balance of all 3 dimensions
Create User experience (UX) with a high level of satisfaction (it must be fun and beautiful), but it also must provide a high level of productivity.
10/31/2014 | 8 | ©2013 CIBER, Inc.
SAP Fiori For example: timesheet
10/31/2014 | 9 | ©2013 CIBER, Inc.
Different
Each customer is different. Processes and steps in majority are equal, but in details they are different.
Use cases for extending vary a lot..
• Other styling / branding
• Extra functionality : for example Confirm button
• Possibility to add notes
…..
10/31/2014 | 10 | ©2013 CIBER, Inc.
Fiori apps are adaptable
10/31/2014 | 11 | ©2013 CIBER, Inc.
SAP Gateway
SAP Business Suite
SAPUI5
Standard Fiori apps
Custom Fiori like apps
SAPUI5
SAP Gateway
SAP Business Suite
SAP Fiori-like Application (transactional)
10/31/2014 | 12 | ©2013 CIBER, Inc.
4 simple phases
Mockup
Build services
Build Screens
Test 4 steps doesn’t mean it’s a long running process. This process also applies for adapting one screen, in a day.
10/31/2014 | 13 | ©2013 CIBER, Inc.
4 simple phases
Mockup
Build services
Build Screens
Test
10/31/2014 | 14 | ©2013 CIBER, Inc.
10/31/2014 | 15 | ©2013 CIBER, Inc.
Fiori Guidelines
http://experience.sap.com/wp-content/fiori-guidelines/index.html
10/31/2014 | 16 | ©2013 CIBER, Inc.
5 Fiori guidelines
Role-based
Responsive
Simple
Coherent
Delightful
10/31/2014 | 17 | ©2013 CIBER, Inc.
Role Based
10/31/2014 | 18 | ©2013 CIBER, Inc.
Responsive
10/31/2014 | 19 | ©2013 CIBER, Inc.
Simple
Focuses on the important. • Make essential functions obvious and easy to use.
• Help me focus on what is most important.
• Automate what you can but ensure I am in control.
• Tell me how I am doing; give me feedback along the way.
10/31/2014 | 20 | ©2013 CIBER, Inc.
Coherent
Provides on fluid, seamless experience. • All apps speak the same language.
• Do the same thing in the same way everywhere.
• Leverage my digital content; make it seamless.
• Make the experience comfortable, familiar.
10/31/2014 | 21 | ©2013 CIBER, Inc.
Delightful
Makes an emotional connection. • Make me better at my job, let me feel like I’m an expert.
• Show me the impact of my contribution.
• Go beyond what’s expected; amaze me!
• Be smart and proactive. Give me an assistant, not just a tool.
10/31/2014 | 22 | ©2013 CIBER, Inc.
Prototyping kit – Powerpoint deck
10/31/2014 | 23 | ©2013 CIBER, Inc.
Prototyping kit - Example create form
10/31/2014 | 24 | ©2013 CIBER, Inc.
Mockups
10/31/2014 | 25 | ©2013 CIBER, Inc.
Services
Mockup Build
services Build
Screens Test
10/31/2014 | 26 | ©2013 CIBER, Inc.
Adapt / build services
SAP Fiori Transact.App
SAPUI5
SAP Gateway
SAP Business Suite
SAP Fiori Analytical App
SAPUI5
SAP HANA XS Engine
SAP HANA
Transactional Analytical
10/31/2014 | 27 | ©2013 CIBER, Inc.
Data
10/31/2014 | 28 | ©2013 CIBER, Inc.
4 simple phases
Mockup Build
services Build
Screens Test
10/31/2014 | 29 | ©2013 CIBER, Inc.
Adapt / build services
SAP Fiori App
SAPUI5
SAP Gateway
SAP Business Suite
SAP Fiori App
SAPUI5
SAP HANA XS Engine
SAP HANA
Transactional Analytical
10/31/2014 | 30 | ©2013 CIBER, Inc.
Adapt / build screen
According to mockup • Adapting screen
₋ hide fields ₋ Extend and add extra user interface elements
• Load data of our adapted services • Create new screens
10/31/2014 | 31 | ©2013 CIBER, Inc.
SAP Web IDE
10/31/2014 | 32 | ©2013 CIBER, Inc.
SAP Web IDE
Visually create or extend an Fiori application
10/31/2014 | 33 | ©2013 CIBER, Inc.
SAP Web IDE
10/31/2014 | 34 | ©2013 CIBER, Inc.
4 simple phases
Mockup Build
services Build
Screens Test
10/31/2014 | 35 | ©2013 CIBER, Inc.
Test!
Functionality Resolutions Responsiveness Browser Devices Performance ..
10/31/2014 | 36 | ©2013 CIBER, Inc.
Demo
10/31/2014 | 37 | ©2013 CIBER, Inc.
Take-aways
Adapting and creating Fiori apps has never been easier
• 4 simple phases
• Design is key!
Make your users happy!
10/31/2014 | 38 | ©2013 CIBER, Inc.
Questions?
Thank You!