Fiori Makers Club Showcase 15 Review. Kai Richter, SAP

Transcription

1 Fiori Makers Club Showcase 15 Review Kai Richter, SAP

2 Why did we chose this app as showcase? One of the most famous and common scenarios: leaves and expenses. Can be designed very simple and allows attention to detail optimizations and contents. Master-detail app not used in standard anymore but of course still a valid layout SAP SE or an SAP affiliate company. All rights reserved. 2

3 Leave Request

4 Home Page It is always difficult to provide good names for the tiles. Make conscious use of the two lines and the other attribute as well as the possibility to show live content. e.g. balance of open claims e.g. pending leaves 2017 SAP SE or an SAP affiliate company. All rights reserved. 4

5 Leave Request (1) (1) Why is both, time and status coloured? Should only be status. (2) Could save a line by saying (3) Better use object page (4) Content structure (5) Avoid using a disabled field to show display-only information 2017 SAP SE or an SAP affiliate company. All rights reserved. 5

6 Leave Request (2) (1) We avoid using the icon tabs now (2) Feeder control 1 (3) Set content height to 100% 3 2 (4) Better use of actions. In object page this would be shown in the title toolbar SAP SE or an SAP affiliate company. All rights reserved. 6

7 Edit Leave Request (1) Date Range is shown before the selection. Why not use a date picker? (2) The slider is not very good to select discrete (and exact) values. (3) Don t use disabled controls to show display only content. 4 (4) Internationalization 2017 SAP SE or an SAP affiliate company. All rights reserved. 7

8 Data Loss Don t forget to throw data-loss pop-up when navigating away. The navigation is a big issue when editing in master detail, therefore I prefer dialog. Button should say discard changes 2017 SAP SE or an SAP affiliate company. All rights reserved. 8

9 Alternative Options

10 Object Page Layout Different List Versions Little content can easily fit on the same page

11 Data loss. Better put edit actions in dialog Order according to priority. Alternative way of entering working hours

12 All-calendar version. Events are highlighted in color. Details shown as popover

13 Edit or create in dialog

14 Possibility to switch to list view

15 Expense Claims

16 My Expense Claims (1) 1 2 (1) Search field should only say search 3 (2) Title should say Claim (3) Better use Object Page (4) Copy should be in the toolbar of the individual item (no selection dependent actions here) SAP SE or an SAP affiliate company. All rights reserved. 16

17 My Expense Claims (2) (1) Icon and text should not be necessary (2) Semantic colours to delete items but no warning? (3) Copy Items (as there can be multiple) Should be disabled without selection. 4 (4) Too much going on here. Avoid semantic colours here SAP SE or an SAP affiliate company. All rights reserved. 17

18 New Claim No way to edit claim details later 2017 SAP SE or an SAP affiliate company. All rights reserved. 18

19 Home Page 1 (1) Alternatively, use a dialog? 2 (2) The form is very wide 3 (3) Embedding the calendar like this can be confusing (4) Semantic colours on save and cancel? SAP SE or an SAP affiliate company. All rights reserved. 19

20 Alternative Options

21 Don t start with an empty list. Try to offer reasonable fiirst actions Footer toolbar: prioritice actions

22 Menus. Think about labels. Always offer possibility to reset.

23 Cleaning up current design. Still no way to edit expense item Editing of expense header

24 Better use dialog to edit or create

25 Offer possibility to edit all aspects of expense item in place.

26 Better use object page. More modern and flexible page layout.

27 Summary

28 Summary Using master-detail better with object page instead of object view. Prevent issues like data-loss on edit. Think about the best way to present the contents SAP SE or an SAP affiliate company. All rights reserved. 28