39
Adapting & creating Fiori apps has never been easier Leo van Hengel & Wim Snoep Focusgroep CDV & UX

Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

Embed Size (px)

DESCRIPTION

Presentation for the dutch SAP user groups. More specific for the focusgroups: custom development and user experience. The presentation discuss the approach of extending a SAP Fiori app, or even better custom development of a new SAP Fiori-like app. And the simplicity screens can be adapted by using the SAP Web IDE.

Citation preview

Page 1: 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

Page 2: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier
Page 3: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier
Page 4: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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

Page 5: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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

Page 6: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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.

Page 7: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier
Page 8: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 8 | ©2013 CIBER, Inc.

SAP Fiori For example: timesheet

Page 9: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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

…..

Page 10: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 10 | ©2013 CIBER, Inc.

Fiori apps are adaptable

Page 11: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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)

Page 12: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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.

Page 13: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 13 | ©2013 CIBER, Inc.

4 simple phases

Mockup

Build services

Build Screens

Test

Page 14: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 14 | ©2013 CIBER, Inc.

Page 16: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 16 | ©2013 CIBER, Inc.

5 Fiori guidelines

Role-based

Responsive

Simple

Coherent

Delightful

Page 17: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 17 | ©2013 CIBER, Inc.

Role Based

Page 18: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 18 | ©2013 CIBER, Inc.

Responsive

Page 19: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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.

Page 20: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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.

Page 21: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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.

Page 22: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 22 | ©2013 CIBER, Inc.

Prototyping kit – Powerpoint deck

Page 23: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 23 | ©2013 CIBER, Inc.

Prototyping kit - Example create form

Page 24: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 24 | ©2013 CIBER, Inc.

Mockups

Page 25: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 25 | ©2013 CIBER, Inc.

Services

Mockup Build

services Build

Screens Test

Page 26: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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

Page 27: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 27 | ©2013 CIBER, Inc.

Data

Page 28: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 28 | ©2013 CIBER, Inc.

4 simple phases

Mockup Build

services Build

Screens Test

Page 29: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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

Page 30: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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

Page 31: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 31 | ©2013 CIBER, Inc.

SAP Web IDE

Page 32: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 32 | ©2013 CIBER, Inc.

SAP Web IDE

Visually create or extend an Fiori application

Page 33: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 33 | ©2013 CIBER, Inc.

SAP Web IDE

Page 34: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 34 | ©2013 CIBER, Inc.

4 simple phases

Mockup Build

services Build

Screens Test

Page 35: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 35 | ©2013 CIBER, Inc.

Test!

Functionality Resolutions Responsiveness Browser Devices Performance ..

Page 36: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 36 | ©2013 CIBER, Inc.

Demo

Page 37: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

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!

Page 38: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

10/31/2014 | 38 | ©2013 CIBER, Inc.

Questions?

Page 39: Ciber    vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier

Thank You!