sap fiori makers showcase 11 review · current design master-detail projects project project work...
TRANSCRIPT
2© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Very well-designed application with a very complex structure showing how powerful Fiori can be.
Great opportunity to explore alternative options for the design, based on the usage requirements.
Why did we chose this app as showcase?
3© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Home Page
(1) Tile name is only an
abbreviation. This is
not self-explanatory
and might cause
training efforts.
Better use more
self-explanatory
name.
4
1
4© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Overview Page
1
(1) Stack cards work
differently (object
flow)
(2) We don’t offer
semantic colors on
stack cards
(3) Not possible to have
group names on
Overview Page
(4) Link card looks
different
(5) No footer toolbar on
Overview Page.
3
2
4
5
5© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Advanced Search
1
(1) The Overview Page
comes with a
powerful filterbar,
this covers the same
functionality.
(2) Button order in Fiori
is always: positive /
negative (e.g. Okay
/ Cancel)
2
6© 2017 SAP SE or an SAP affiliate company. All rights reserved.
New Projects List
1 (1) Different lists for the
projects in the
different status. How
to cross-navigate?
(2) Split app is about to
be deprecated
(3) Hard to understand
the process from the
UI – there is
something on the
screen so it is
unclear what to
create3
2
7© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Create New Project
1 (1) Switch to full page
from split app
always feels weird.
(2) Different tabs in
details page
compared to split
app.
(3) Different fields in the
content area.
(4) Button order
3
2
4
8© 2017 SAP SE or an SAP affiliate company. All rights reserved.
New Projects
1
(1) When did the
header attributes
appear? Better use
dynamic page
header.
(2) Page starts with
empty list. Maybe
better to have
placeholder fields
(3) Footer toolbar
actions are
changing with tabs
3
2
9© 2017 SAP SE or an SAP affiliate company. All rights reserved.
New Projects
1
(1) Select dialog most
likely not possible
like that. There is a
simple out-of-the-
box select dialog.
10© 2017 SAP SE or an SAP affiliate company. All rights reserved.
New Projects
1
(1) List requires a bit
more fine tuning
(2) Flexible column
layout can’s be
inside a single page.
(3) There is no
possibility to have
two footer toolbars
on the same page.
Order and meaning
of actions unclear.
Could be optimized.
3
2
11© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Add Attributes
Adding items using a
popover is a complex
interaction. If this has to
be done repetitively
there are better options,
e.g. in place editing
12© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Open Projects
1
(1) Nice to use
visualization, but is
comparison graph
adequate?
(2) This is the object
header. Better use
dynamic page.
(3) Not using a list but a
custom control.
Might create a
number of issues
going forward.
3
2
13© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Open Projects
Expanding the work item
in place causes the list
to scroll. Navigation
between items difficult.
Current Design
Master-Detail
Projects Project
Project
Work Items Item Details
Projects Project
Project Work Items Item Details
Projects Project Item Details
Work
Items
Embedded Master-Detail
Proposal 1
Embedded Master-Detail Embedded Master-Detail
Proposal 1
Flexible Column Layout
Two modes: overview pf
projects, work on single
project
Continuous flow from
overview down into item
details
Project list as
worklist with all
project status.
Projects with
completion
status.
View switch to
switch to split
view (dynamic
side panel)
showing most
important project
details.
Detail navigation
on link.
Alternative
visualization of
project with
“toolbar” on top
and tabs in the
content
(consistent with
next page)
For the work
items and
indirect work
items, a dynamic
side content with
item details can
be opened.
Here, with
tabbed contents.
Selecting a
project opens
the object page
with the project
details.
Can be
maximized /
minimized /
closed.
Acts responsive.
Project page as
long-scrolling
Object Page.
Different ways to
lay out the
forms.
Change log as
Feed.
Workflow: only
last 5 items.
Selecting a work
item opens the
third column with
the work item
details.
Important to
synchronize the
terms on the
completion
status with the
sections in the
work item
details.
32© 2017 SAP SE or an SAP affiliate company. All rights reserved.
Make sure the information architecture fits to the use case.
Flexible column layout allows flexible navigation between the different levels of the information
hierachy and is responsive out of the box.
Summary
https://8m3jsr.axshare.com/#g=1&p=home&fn=0