sap fiori visual theme for classic applications nov2016

SAP Fiori Visual Theme for Classic Applications

SAP SENovember 2016

What Is It About?

What Are the Benefits?

What’s Changed?SAP Fiori Header

Header Toolbar

Right-Aligned Labels

Icons

Sizing

Footer Toolbar

Constraints

Quality

Outlook

3

5

6

7

8

9

10

11

14

15

16

17

What Is It About?

Graphical user interfaces have developed rapidly over the last few years as

mobile computing has become commonplace, and computing technology

in general has advanced.

In 2013, SAP responded by introducing SAP Fiori to the business world,

changing the way users interact with business processes. Over time, SAP

has continued to improve the SAP Fiori user experience, resulting in an

ever-increasing gap between the SAP Fiori experience and that of classic

SAP applications.

To close this gap, SAP has now introduced the SAP Fiori visual theme for classic applications. It brings some

important aspects of the SAP Fiori look & feel to technologies like SAP GUI

and Web Dynpro ABAP. These classic applications are still necessary to

provide powerful transactions for professional users.

Because there are such a large number of classic applications within SAP

S/4HANA, not to mention classic applications implemented by customers

and partners, we have focused on a solution which results in minimal

disruption for existing applications.

One Place, One Look

The SAP Fiori launchpad is now the single entry point to access all apps

across all technologies. As before, you can navigate to different SAP Fiori

apps that cover all key tasks, and then drill down to the next level of detail.

But you can also jump to classic SAP applications at any point in the

hierarchy, having direct access to more extensive functionality for specialist

use cases whenever you need it.

3


This structural integration requires a seamless and consistent design across technologies to avoid confusion and disruption.

We want users to experience “one look” across SAP S/4HANA and make

the transition between classic applications and SAP Fiori apps as smooth

as possible. To achieve this, we′re adapting the visual and conceptual

patterns for the classic applications to those of SAP Fiori apps.

It’s important to note that classic applications with the new SAP Fiori visual

theme are not fully-fledged SAP Fiori apps. Because of the different use

cases and architectural patterns, the classic applications don’t mirror SAP

Fiori apps 1:1 in terms of behavior and responsiveness. However, within

these boundaries our mission is to bring the classic applications as close to

the SAP Fiori experience as possible.

With SAP Fiori theme (SAP GUI for HTML)

4

What Are the Benefits?

The SAP Fiori visual theme for classic applications offers two distinct

advantages:

It’s self-explanatoryIt saves on training costs and minimizes user error by providing users with a

simple, easy-to-use, and intuitive user interface.

It speeds up the user’s workflow It is easier to find what you are looking for because every element has its

own dedicated screen area.


5

Change standard order (VA02)

With SAP Fiori theme (SAP GUI for HTML)

What’s Changed?

Text toolbar instead of icons

Merged SAP Fiori header

Improved

visual

hierarchy

with more

white space

Less

wasted

space

Right-aligned labels

Condensed table rows

New footer with processing

and closing actions,

e.g. "Save"

New icons

Tab strips with

SAP Fiori visualization

Right-aligned labels

Let’s dive a little deeper into how the different elements of the UI are being

adapted. The image below highlights the various aspects of the renewed

design. We’ll now look at each of these in turn.


6

Target Design. SAP Labs Preview. This is the current state of planning and may be changed by SAP at any time.

SAP Fiori HeaderWhat’s Changed?

When you open a classic application, you see the same header as in the

SAP Fiori UI, and have access to its most important features: Me Area,

notifications, CoPilot, basic navigation (Home, Back, Related Apps,

hierarchical navigation)

Please note that the features offered in the SAP Fiori header are not fully

integrated with the classic applications.

7

Header ToolbarWhat’s Changed?

The header toolbar is one of the most important UI elements on the screen

for navigating, switching screen states, and other actions. To make it better,

we changed a few things:

We converted the icons to texts. User research has shown that users recognize text buttons faster, which

speeds up the overall workflow.

We aligned the look with SAP Fiori. Although the header toolbar in classic applications looks almost like its SAP

Fiori counterpart, we know that it will be used slightly differently. All action

buttons are therefore left-aligned, and not right-aligned as they are in SAP

Fiori applications. In classic applications, only the Exit button remains

right-aligned, since this type of action is universally located on the top right.

We reduced the number of visible actions. Psychological research has shown that having too many options leaves

users feeling unsure of what to do. This is also true for user interfaces.

Because of this, we’ve reduced the number of visible actions to show only

the most important app-specific actions. All other actions are moved to an

overflow area (“More”). This removes visual clutter and rarely-used items

from the interface, and helps users to focus on the most important tasks.

8

Right-Aligned LabelsWhat’s Changed?

A label is always connected to another UI element. To emphasize this

connection, we now right-align the labels to these elements. This makes it

easier to understand which item belongs to which label and speeds up

processing.

Left-aligned label in combination with input fields

Grouping

Right-aligned label in combination with input fields

9

IconsWhat’s Changed?

We reworked all the icons to make them suitable for the new theme.

ReductionUser tests revealed that some icons are so similar that users cannot tell

them apart. We also found that several different icons were being used for

the same thing. We analyzed all duplicates and identified the most suitable

icon for each use case.

ClarityWe introduced a lighter outline style for SAP Fiori icons. The new style

integrates icons seamlessly, and uses simplified iconography and

consistent color coding. This is less prominent and distracting than the

previous icon style.

ȿ Ⱦ � K I ± ¸ ¬ � Ȯ ø C L ī Ý ɋ t �

� Ń > Ś E ( ? ¡ Ǐ Ĳ � ǒ ŀ � � ǣ ȣ

Ȕ ŋ Ķ ¹ � Ò × � F

10

SizingWhat’s Changed?

To visually align classic applications with SAP Fiori apps, we’ve improved

the overall sizing logic.

Less wasted spaceWe identified that in large tables with several hundreds or thousands of

rows, we could utilize the space better by reducing the height of table rows

without losing clarity.

+16.7%more rows in the same

amount of space

Example of row distribution in older themes Example of row distribution in the SAP Fiori visual

theme for classic transactions

11


More white spaceEven though this might seem contradictory, we included more space for all

other elements. One reason was to align with SAP Fiori. Also, in order to

group elements on the screen, we needed additional space to separate

these groups visually. This gives the screen a stable structure without

applying lines and boxes everywhere.

Improved visual hierarchyA more important item should have more emphasis than a less important

one. In the past, this was not always reflected in the UI, so we’ve adjusted

it to convey the underlying hierarchy.

White space

White space

White space

White space

White space

12


Usage of modern screen real estateCompared to the times when classic applications were created, today′s

desktops have a much bigger display with higher resolution. Rather than

leaving this extra space empty, we make use of it by stretching out the UI.

The solution is to enlarge the available screen to 150% of the original size to make up for

the enlarged controls.

Screen sizes have increased over the last ten years, particularly in width. The most common

size has changed from 1024 x 768 to 1366 x 768. Even when full HD monitors become the

standard, there will still be a larger increase in width (87%) than in height (40%).

150 %100 %

+87 %+33 %1024x768

+40 %

13

Footer ToolbarWhat’s Changed?

14

The footer toolbar floats over the content on the bottom of a page and

contains all finalizing and closing actions, such as Cancel, Save, Approve,

Post, and so on. The footer toolbar also shows any error, warning, or

success messages that result from these actions.

The footer toolbar is always visible. No matter which area of the screen is currently visible after scrolling or

resizing, the footer toolbar is always visible as it floats over the content and

is responsive. This is a major improvement over the static toolbar position

we had before. Users can now confirm changes made to the content at any

time. The contrast between the floating toolbar and the screen means that

the toolbar is no longer overlooked.

The most important action is emphasized. In the footer toolbar, only one button can be highlighted at a time. This is

usually the most common processing action, such as Save. Since it is the

only button on the screen that is highlighted, it is easy to detect.

Constraints

Classic SAP applications were built a long time ago and cannot provide all

the technological features that SAP Fiori offers. This results in certain

restrictions:

No mobile device supportMobile scenarios are not supported for classic applications.

Horizontal responsivenessAlthough some classic applications provide basic responsiveness, others

were built with fixed layouts, which are not responsive to screen size. As a

result, horizontal responsiveness cannot be implemented in all classic

applications.

Vertical sizingEven though sizing has increased overall, the system framework doesn’t

allow some controls to have the same size as they do in SAP Fiori.

No Belize DeepThe dark flavor, Belize Deep theme is not available for classic applications.

If Belize Deep is chosen in the SAP Fiori launchpad, classic applications fall

back to Belize.

Specific behaviorIn classic applications, some controls have additional features that are not

offered in SAP Fiori. It is not possible to remove them without breaking the

classic applications.

We do know that some long-term users prefer to work with the old theme.

We understand and respect their working patterns, and therefore always

provide an option to switch back to the old theme.


15

Quality

We evaluate the implementation quality of the SAP Fiori visual theme for

classic applications on an ongoing basis. To make it scale, the theme is

implemented at framework level, rather than at application level. So quality

checks at app level are crucial for validating the new user experience.

As we apply the theme, we sometimes run into cases where a classic

application doesn’t work as well with the new visual theme as it used to.

We are working on resolving these cases, and are confident that the SAP

Fiori visual theme will become better than all of our previous themes.

We’ve already conducted several design-related usability tests and

gained crucial insights that have helped us to improve the theme. To get

balanced feedback, half our test users have SAP experience, while the

others have no SAP background.

During the usability test sessions, users were asked to complete their usual

daily tasks. They gave us feedback on the core concepts and overall

usability of the theme, along with their impression of the new look and feel.

Users in both groups felt that classic UIs with the new SAP Fiori theme

were simpler and easier to use than their current software.

Further tests are planned.


16

Outlook

Validation and improvement of the new theme is still ongoing.

Based on continued internal and external reviews, we will continue to

implement updates and enhancements to ensure the highest possible

quality.


17

© 2016 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.

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. Please see http://-

global12.sap.com/corporate-en/legal/copyright/index.epx for additional

trademark information and notices.

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 SE or its affiliated companies shall not be liable for errors or

omissions with respect to the materials. The only warranties for SAP SE 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

platform 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-look-

ing statements, which speak only as of their dates, and they should not be

relied upon in making purchasing decisions.

sap fiori visual theme for classic applications nov2016

Documents