Fiori Design for Developers - sitBCN 2019
Download as PPTX, PDF0 likes129 views
This document provides an overview of Fiori design elements and principles for developers. It discusses basic design elements like points, lines, shapes, and icons. It covers color theory and semantics. It also explains key Fiori design principles such as alignment, balance, hierarchy, proportion, and keeping things simple. Finally, it reviews common Fiori layouts and floorplans like dynamic pages, flexible columns, worklists, object pages, and wizards. The document is intended to educate developers on Fiori design best practices.
Fiori Design for Developers - sitBCN 2019
- 1. Fiori design for developers SAP Inside Track Barcelona 2019
- 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.
- 4. Point – a ”lighthouse” for the eye
- 5. Lines – enhance, direct and add movement Vertical lineHorizontal line Diagonal line Serpent line Implied lines
- 6. Shapes – Geometric, organic & abstract
- 7. Fiori icons
- 8. Size and scale a a a a a a a a a a a a a a a a a a a a a a a
- 9. - is used to draw attention to elements
- 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.
- 12. Primary, secondary & tertiary colors
- 14. Color meaning
- 15. Disney colors Ursula Jafar Captain Hook Queen of Hearts Ariel Woody Peter Pan Wall-E Nemo
- 17. The good thing about Fiori design, is that you don’t have to worry about getting colors right, SAP has already done the hard work for you.
- 18. Fiori – primary colors
- 19. Fiori – semantic colors
- 20. Fiori – accent colors
- 21. Do not use Fiori semantic or accent colors for corporate branding or to decorate your Fiori applications!
- 22. Example – message strip
- 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.
- 25. Alignment/grid
- 26. With grid and without grid
- 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.
- 30. Fiori - balance Balanced Cards on an Overview Page
- 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.
- 35. Fiori - proportion Proportions within the Flexible Column Layout
- 36. Fiori – golden ratio (Dynamic Page)
- 37. Proximity • Objects that are close to each other tend to be perceived as groups.
- 38. Similarity • Objects that are similar by visual characteristics are perceived as part of one group.
- 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.
- 41. Designing an SAP Fiori app
- 42. First rule Know your tools. If you want to build SAP Fiori apps, you should know what layouts, floorplans, and elements there are to choose from.
- 43. Layouts
- 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.
- 49. Floorplans
- 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.
- 56. Second rule – when in doubt
- 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
- 59. Book out now on SAP Press
Editor's Notes
- #5: Smallest entity
- #6: 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.
- #7: 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
- #8: 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.
- #9: is used to draw attention to certain elements Scale can also be used to put elements in relation to each other.
- #13: 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
- #14: 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
- #19: represent the overall look and feel of SAP Fiori.
- #20: 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
- #21: are used to highlight import- ant elements in an SAP Fiori app
- #26: 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.
- #28: Especially in business enterprise software, which SAP Fiori was created for, finding the information you are looking for should be easy.
- #29: 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).
- #30: When we speak of balance in terms of design, we mean the perceived weight or visual weight of design elements.
- #31: When we speak of balance in terms of design, we mean the perceived weight or visual weight of design elements.
- #32: When we speak of balance in terms of design, we mean the perceived weight or visual weight of design elements.
- #36: The eye starts on the left and goes through the first line, moves down diagonally, and slides to the right side.
- #37: 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.
- #39: 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.
- #40: 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
- #41: Proximity of Labels and Fields in Forms
- #42: Similarity between Labels and Values
- #48: 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.
- #49: 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.
- #50: ! Spreading them too far for each other to distribute on a large screen would result in large spaces between actions and a bad UX!
- #51: 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.
- #52: 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.
- #54: 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.
- #56: -> It is often used as a detail page if the user selected this object from a list.
- #58: ! It can be very helpful to new users who appreciate the guidance, but it can also be annoying for experienced users.
- #59: ! you should make sure that the user knows what he or she is supposed to enter in this field.
- #62: Buttons: General concepts – action handling UI elements – action - button