Week 1: SAP Fiori Overview Unit 2: Designing a Great User ...

Week 1: SAP Fiori Overview

Unit 2: Designing a Great User Experience

2PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ

Designing a Great User Experience

SAP Fiori 3 is the design language for all SAP products to fully support the Intelligent Suite

Flexible, simple, and convenient, with

machine intelligence guiding users

to make their work easier

Planned to be introduced step by step;

the first step is available today

This is the current state of planning and may be changed by SAP at any time without notice.


▪ For simple to highly complex business scenarios

▪ Supports different design languages


The SAP Fiori design system

Values

Principles

Practices

Web

Native

Conversational

Design System Design Languages



The SAP Fiori design system relies on design principles and technology

Role-based

Designed for you, your

needs, and how you

work

Adaptive

Adapts to multiple

use cases and scenarios

Simple

Includes only

what is necessary

Coherent

Provides one fluid,

intuitive experience

Delightful

Makes an

emotional connection

Other technologies

SAPUI5 iOS Android



SAP Fiori design guidelines

Design guidelines available publicly

Covering:

▪ Web design

▪ Native mobile: iOS and Android

▪ Conversational UX

https://experience.sap.com/fiori-design/



General concepts: SAP Fiori launchpad

Go to Home Navigation User actions menu

Product-specific actions

SAP S/4HANA Cloud 1908

Shell bar

Simple design –

aligned to be the best

fit for all SAP

products, and easy to

adopt


Overview

Career Development

My Team

HR

Central and LoB-specific spaces Integrated multilevel navigation

LAB PREVIEWDesigning a Great User Experience

Spaces


Available as SAP Fiori elements for

efficient development

List Report

Overview Page

Object Page

Analytical

List Page

Flexible Layout


SAP Fiori floorplans



Business situations

LAB PREVIEW


Analytical insights for users doing their daily business


SAP Fiori with embedded analytics



Demo of SAP Fiori

SAP S/4HANA

Cloud 1911

with SAP Fiori 3



SAP Fiori 3 target design

IntegratedIntelligentConsistent

Product direction




A harmonized look and feel

across products

Embedded intelligent user guidance

Situation handling

Dynamic content on home pages

Digital assistant

Central entry point across products

Integration of content from different

products into a single screen

One digital assistant for all products

One central task list, notification list,

search

Product direction





Product direction



Quartz Light Quartz Dark


Visual design: the new Quartz theme for SAP Fiori 3



Visual design – font 72

▪ 72 was created to be part of the design language

for all SAP products and digital channels

▪ 72 has been the default font for all SAP Fiori

apps since the availability of SAPUI5 1.54

You can look at it online:

SAP Fiori design guidelines

https://experience.sap.com/fiori-design/


SAP Customer

Experience (Sales)

SAP Customer

Experience (Sales)

SAP Customer

Experience (Sales)

SAP Customer

Experience (Sales)

SAP SuccessFactors

SAP Analytics Cloud

Digital Supply Chain

& Manufacturing

SAP S/4HANA

SAP Fieldglass

SAP Ariba

SAP Concur

SAP Fiori 3


Consistency – previous shell designs

SAP CoPilot in the center

Product Switcher

Navigation

Product-Specific Actions

SuccessFactors

Concur

Sales Cloud

Home

S/4HANA

Analytics Cloud Ariba

Commerce Cloud

Fieldglass Marketing Cloud

Service Cloud

Customer Data Cloud

Product direction

This is the current state of planning and may be changed by SAP at any time without notice.



Consistency examples

SAP Marketing

Cloud

SAP Sales

Cloud

SAP Commerce

Cloud

SAP S/4HANA

Thank you.

Contact information:

[email protected]

© 2020 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of

SAP SE or an SAP affiliate company.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its

distributors contain proprietary software components of other software vendors. National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or

warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials.

The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty

statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional

warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or

any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation,

and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platforms, directions, and

functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason

without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or

functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ

materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, and they

should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered

trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names

mentioned are the trademarks of their respective companies.

See www.sap.com/copyright for additional trademark information and notices.

www.sap.com/contactsap

Follow all of SAP

https://www.sap.com/copyright

https://www.sap.com/registration/contact.html

https://plus.google.com/+SAP

https://www.linkedin.com/company/sap

https://www.youtube.com/user/SAP

https://twitter.com/sap

https://www.facebook.com/SAP

Week 1: SAP Fiori Overview Unit 2: Designing a Great User ...

Documents

Transcript of Week 1: SAP Fiori Overview Unit 2: Designing a Great User ...