sap fiori makers showcase 11 review · current design master-detail projects project project work...

Kai Richter, SAP

SAP Fiori Makers – Showcase 11 Review

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?


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


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


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


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


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


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


New Projects

1

(1) Select dialog most

likely not possible

like that. There is a

simple out-of-the-

box select dialog.


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


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


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


Open Projects

Expanding the work item

in place causes the list

to scroll. Navigation

between items difficult.

Alternative Options

Overview page.

Preview most

important projects.

Quick links.

Object Stream

offers a simple way

to trigger actions.

Here the creation of

new projects.

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

Option 1: Master-Detail / Master-Detail

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)

Navigation to

project page.

Could already be

in edit mode.

For the work

items and

indirect work

items, a dynamic

side content with

item details can

be opened.

Here, with

tabbed contents.

Possibility to edit

carbon attributes

in place and no

dialog.

Same for indirect

work items

Option 2: Flexible Column Layout

Worklist for

projects with no

split option.

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.

Editing flow for

work items has

to be optimized.

Use in-place

editing.

Creating a work

item.


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

sap fiori makers showcase 11 review · current design master-detail projects project project work...

Documents