sap fiori visual theme for classic applications nov2016
TRANSCRIPT
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
SAP Fiori Visual Theme for Classic Applications
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.
SAP Fiori Visual Theme for Classic Applications
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.
SAP Fiori Visual Theme for Classic Applications
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 ( ? ¡ Ǐ IJ � ǒ ŀ � � ǣ ȣ
Ȕ ŋ Ķ ¹ � Ò × � 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
SizingWhat’s Changed?
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
SizingWhat’s Changed?
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.
SAP Fiori Visual Theme for Classic Applications
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.
SAP Fiori Visual Theme for Classic Applications
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.
SAP Fiori Visual Theme for Classic Applications
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.