2. Me
Anne Kathrine Petterøe / @yojibee
Norwegian, currently living in Copenhagen, Denmark.
SAP consultant – developer & designer.
Love UX and Fiori.
SAP Mentor.
SAP Press author.
SAP Stammtisch Copenhagen organiser.
Cheer mom.
10. Hue, value & saturation
• Hue: color unmixed, in its purest form
• Value: describes the amount of
lightness and darkness to a color.
• Saturation: the intensity of a color.
11. Color – to set the mood
The color wheel gives
guidance to find color
schemes, and to find out
which colors work well
together.
24. Design principles are the basic rules that
designers should use to combine design
elements to create meaningful UIs that
suit the use case and the user they are
created for.
27. Fiori alignment – Object page
Margins and positions of headers,
titles, and labels are chosen
along an invisible line (marked in
pink).
The human eye can now slide
along those lines and go from
one element to the next to find
the desired information.
28. Fiori grid – Object page
All Fiori screens
are based on a
non-visible basic
grid.
29. Balance - mosaic
The mosaic balance seems
a bit chaotic but results in a
smooth distribution .
All elements show the same
visual weight.
31. Hierarchy
• Having a clear hierarchy is crucial for users to be able to orient
themselves and safely navigate without getting lost or getting
frustrated.
• Navigation patterns: The human eye looks at square pictures in
almost always the same way. It starts in the upper left corner and
glides to the lower right corner.
• There are two main patterns of how users look at applications and
websites, z-pattern & F-pattern.
32. Fiori – Z pattern
The Z pattern is used if a
screen contains more
graphical elements and
less text.
Z pattern on an Overview
Page.
33. Fiori – F pattern
The F pattern is used on
screens that contain
mostly text.
F pattern on a Fiori
Object Page.
34. Proportion
Proportion describes the harmonious relation between at least two
elements.
In order to keep that harmonious relationship, if one element is
resized, all other elements have to be resized in the same dimension.
The golden ratio is one of the most well-known proportions. It is seen
as the crossover between math and aesthetics. Following the Fibonacci
numbers, you will end up of a ratio of roughly 1:1.618. So, if you have a
layout section, the next bigger one should be 1.618 times as large.
39. KISS
KISS stands for keep it simple, stupid
The simpler a layout is, the fewer elements are used; and the simpler
the elements are, the better.
-> be aware of the importance of simplicty.
-> keep it as easy as possible and as complex as needed.
40. Hick’s law
Hick’s law covers the time it takes to make a decision while faced with
various options. It states that the time and the effort it takes to come
to a decision rises with the number of options.
44. Dynamic page
The dynamic page
layout is the default
layout for SAP Fiori
apps.
It consists of a dynamic
page header and the
page content.
45. Flexible column layout
Make use of the flexible
column layout whenever
there is a hierarchy of two
or more levels that the
user needs to go through in
order to see details of
more than one object
and/or switch between
several objects frequently.
Allows up to three
floorplans to be shown
simultaneously in a flexible
way.
46. Letterboxing/full screen
Letterboxing is the use of
a fixed maximum width
of an application, even if
there is more space
available.
Letterboxing should be
used if you have simple
UIs that are focused on
one task and don’t have
a lot of content or
controls on them
47. Multi-instance layout
The multi-instance layout
is a specialized version of
the dynamic page layout
shown in full screen.
It comes with an extra
tab container that will
show multiple, currently
opened objects, and
allows you to switch
between them.
-> object page with
multi-instance handling.
48. Dynamic side content
The dynamic side
content is an additional
column within the
content section that
can be toggled on and
off by the user.
Information within this
area should not be
crucial to the user’s
main task or decision.
50. Worklist/list report
Worklist:
A worklist is a floorplan for simple work item lists.
It has a table that holds work items and an icon tab bar on
top that lets the user switch between different categories of
work items.
Use the worklist if there is a limited number of items and a
maximum of one filter in the form of a category.
List report:
The list report is similar but comes with a filter bar that
helps users filter down to the work items they need to work
on.
Use a list report instead if there is a vast number of items
and several filters necessary to filter down to a manageable
quantity.
51. Analytical list floorplan
An analytical list floorplan is specifically
designed to explore data and filter large
amounts of data step by step, based on
visual feedback.
The floorplan comes with a table at the
bottom, an optional chart above that,
and a visual filter bar on top.
Use the analytical list floorplan if the
user needs to analyze vast amounts of
data in order to find a root cause or a
hypothesis for a problem.
52. Object page
An object page is a specific floorplan
to display one business object with
all details, parameters, and relations
on one screen.
The object header shows the most
important aspects of the object to
identify.
The content section can contain a
several columns of controls and
sections.
Use the object page whenever you
need to display one object for the
user.
53. Overview page
The overview page contains a
joint header, including an optional
filter bar, and the content area
consists of multiple cards that are
arranged in up to four columns.
Each card navigates to a
corresponding screen.
Make use of the overview page if
your user needs an overview on a
specific area.
54. Wizard
The wizard guides the user through a
predefined process in steps.
The steps are always sequential. The
user is allowed to go back to
previous screens but not to skip any.
Use the wizard only if the screens
involved can or should only be filled
out or worked on in a sequential
order.
55. Initial page
The initial page starts out as an almost empty page with just one input field to
fill. This input field expects an identifier of some sort. Once entered, the initial
page will show more information on the given business object.
The initial page is most useful if users know exactly which identifiers are
expected.
57. Many things play together – buttons
• General concepts -> Action Placement
• Global actions: header toolbar, footer toolbar
• Local actions: table overflow toolbar, table rows with delete buttons
• Buttons and colors
Lines can also add structure, frame information, or divide information and create hierarchy. Websites and newspapers often use lines in their layout to separate content.
Lines come in many different shapes. They can be thick, thin, or very literal or implied.
Geometric – these we all know
Organic - are often used to represent shapes found in nature or in our surroundings
Abstact - are used to draw simplified representations of objects we find around us
SAP icons for UI5 controls: This is a set of predefined icons that is available for the SAPUI5 framework controls.
SAP Fiori icons: Icons for SAP Fiori apps with more technical use cases or for SAP Fiori apps developed on top of technical systems.
SAP Business Suite: These icons are generic icons, which are used for developing SAP Fiori apps for SAP Business Suite.
is used to draw attention to certain elements
Scale can also be used to put elements in relation to each other.
Primary: red, yellow, and blue
Secondary: orange, green, and violet (+ primary)
Tertiary: yellow green, blue green, blue violet, red violet, red orange, and yellow orange
Monochromatic: different shades of the same color
Complementary: two opposite colors on the color wheel
Triadic: three colors equally spread on the color wheel
Analogous: three colors that are next to each other on the color wheel
represent the overall look and feel of SAP Fiori.
visualize either a mean- ing or value state, and can be used to represent a negative, critical, posi- tive, neutral, or information status
– Bad/error– Warning/critical – Good/positive– Neutral– Positive
Point to difference between negative and critical – error vs. Warning!! (often see this done wrong)
Use if you want to:
– Highlight importantinformation/status
– Validate fields
– Messagehandling
– UsevaluestatesforUIelements
are used to highlight import- ant elements in an SAP Fiori app
The alignment of elements using a basic grid can be seen as the most important design principle there is
The reason alignment is so important is the human eye. The eye likes to have some sort of guidance for orientation.
Without a grid, it is hard for the eye to figure out where to look and what is important.
Especially in business enterprise software, which SAP Fiori was created for, finding the information you are looking for should be easy.
The grid is con- structed of single squares that are one rem in height and width. One rem is interpreted with 16 pixels here
there is a 3-rem margin to the left and to the right, and there is a 2-rem margin to the top (between the content and the shell).
When we speak of balance in terms of design, we mean the perceived weight or visual weight of design elements.
When we speak of balance in terms of design, we mean the perceived weight or visual weight of design elements.
When we speak of balance in terms of design, we mean the perceived weight or visual weight of design elements.
The eye starts on the left and goes through the first line, moves down diagonally, and slides to the right side.
The eye starts on the first line again and goes back to the left and reads several other lines, but always comes back to the left side.
Is designed for a master/detail scenario, where you have a list in the left column, and after selecting one item from the list, the detail col- umn opens up on the right side with details for that item. The second sce- nario is similar but has an additional detail-detail column on the third col- umn. Independent of the screen size, the three columns will resize to the percentage of the screen/window.
If you look at the header and content area of the dynamic page, you can clearly see that the entire area below the collapsed header is 1.618 times as big as the content area, which is 1.618 times as big as the header area
Proximity of Labels and Fields in Forms
Similarity between Labels and Values
The page content can be very different, according to the floorplan it contains.
The dynamic page header has a header title and a header content section.
The header title section is clickable and expands and collapses the header content section.
The header content section can hold various controls, like a filter bar for the list report or an object header for the object page.
The header title can hold a title and a subtitle or a summary (e.g., filter summary) on the left; a key information section in the middle that can permanently show KPIs and measure- ments; and a global action section, holding actions that concern the entire page.
The user can start with a simple list of objects and drill down twice to display two addi- tional floorplans on the right-hand side.
The floorplans within the col- umns can be chosen freely according to the use case.
! Spreading them too far for each other to distribute on a large screen would result in large spaces between actions and a bad UX!
Each tab acts as a click target to switch to its content and has a close button that will show once it is the active tab.
The tab container also comes with an overflow area that will show additional objects if the width isn’t sufficient to display all.
The dynamic side content should only be used to show additional non-critical information that helps the user better understand a situation with the main content.
Use the worklist if there is a limited number of items and a maximum of one filter in the form of a category.
Use a list report instead if there is a vast number of items and several filters necessary to filter down to a manageable quantity.
-> It is often used as a detail page if the user selected this object from a list.
! It can be very helpful to new users who appreciate the guidance, but it can also be annoying for experienced users.
! you should make sure that the user knows what he or she is supposed to enter in this field.
Buttons:
General concepts – action handling
UI elements – action - button