Skip to Content
Author's profile photo Gavin Quinn

More Tiles on the Fiori Launchpad?

One of the most common complaints I hear about Fiori Launchpad is: “There are too many tiles, I don’t want to scroll!”

The Fiori Launchpad (FLP) has tried to accommodate this with navigation by groups:

Screen Shot 2016-10-04 at 11.20.46 AM.png

But this technique still only fits two or three groups on a mobile device before a drop-down appears. (ick)

I think the biggest problem is that most tiles don’t have anything useful on them and are mostly filled with blank space:

Screen Shot 2016-10-04 at 11.23.32 AM.png

The “My Paystubs” tile is basically a big empty box with the word Paystub repeated twice with an irrelevant icon.

Viewing the FLP on an iPhone 6 you can only see 6 full tiles!

Screen Shot 2016-10-04 at 11.25.14 AM.png

However, if you look how at how an iPhone is arranged (iPhone 7 😉 ) you can actually get 4 columns and 7 rows, for a total of 28 apps! (nice)

IMG_0346.PNG

My thought is to take inspiration from Windows 10 and include micro tiles:

windows 10.png

Here is my mockup (bottom row).

fiori flp.png

What do you think? Is there any other ways we could make better use of the space?

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Hi Gavin

      Thanks for bringing it up.

      My personal like is the iOS look. So the tile should be very responsive for iPhone, iPad and Desktops.

      Best Regards

      Sandip

      Author's profile photo Wolfgang Mayer
      Wolfgang Mayer

      Hi Gavin,
      I agree that the current fixed tile size is not optimal. You can use links instead of tiles already, but this is not the best solution for frequently-used tiles.
      However, if you want to maximize space utilization, the system would have to auto-arrange smaller tiles which would automatically change the sequence of the tiles (which is usually done by the Administrator for a reason).
      Maybe a user-specific Settings for tile size could be a tradeoff: either display a lot of tiles with Little additional Information (like in iOS) or bigger tiles with analytical data as well.
      Regards
      Wolfgang

      Author's profile photo Helmut Tammen
      Helmut Tammen

      Great suggestion Gavin. I think it would also be useful to display tiles used more frequently by a user with bigger size and those that are rarely used with smaller size. This would lead the users eye directly to the important tiles
      Regards Helmut

      Author's profile photo Vignesh Kamath
      Vignesh Kamath

      This can be achieved by creating custom Tile, and changing CHIP definition.
      https://blogs.sap.com/2016/08/23/create-and-use-custom-tile-type/

      Author's profile photo Julie Plummer
      Julie Plummer

      Hi Gavin, (and Jeremy),
      Thanks for opening this discussion and drawing our attention to it.
      I am not customer; however, as PM for SAP BC, I have heard several complaints about the low number of tiles per screen. Most BC users (and I guess most Portal) have set up roles with a large number of entries (sometimes up to 400), so 6 per screen really doesn't cut it. And neither do custom tiles / using CSS.
      Microtiles or link list?
      But probably a poll in this group would answer this question best.
      I think Microtiles look more modern / familiar from Windows.
      BR Julie.

      Author's profile photo Former Member
      Former Member

      To be able to add Microtiles to the FLP could be great ! I like the idea... 🙂

      Author's profile photo Kai Richter
      Kai Richter

      Hi,
      have you had a look at the link area for the home page already? This allows you to display more apps on less space without sacrificing readability of the names.
      Kai

      Author's profile photo Jeremy Good
      Jeremy Good

       

      Hi Kai - I don't see 'link area' on the page you mentioned?

      Author's profile photo Kai Richter
      Kai Richter

      Hi Jeremy,

      the link area is the light area below the tiles for instance in this image.

      We have separated the link are from the tiles to allow breaking the tile grid. The links can accommodate for the long application names that are common in business applications.

      Today, the link area has to be configured by the admin, but we plan to enable user personalisation so that a a user can drag apps in and out of this area converting them either into a link or a tile. Further, additional attributes are planned to be added to the links like a subtitle, icons and probably a counter if applicable.

      Best regards,
      Kai

      Author's profile photo Jeremy Good
      Jeremy Good

       

      Thanks Kai - except for the pictures in the Responsiveness section, I meant that the link you shared (https://experience.sap.com/fiori-design-web/concept/home-page/) made no references to 'link area' that I could find.  I knew what you were referring to, it just wasn't overly evident on the page.

      Author's profile photo Kai Richter
      Kai Richter

      Hi Gavin,

      thank you for sharing your ideas here and for kicking off this interesting discussion.
      We have been exploring different options how to support alternative tile visualisations that would allow us to show more apps on the home page. The original idea of the tiles was to use them to surface important information from the app already on the entry page. There are many apps that make good use of this but this option is not used to the extent we had hoped so that now, many tiles are rather empty as you rightfully mention.
      Therefore, we have introduced the link area for the home page starting with UI5 1.36. This allows to display applications as simple links in a dedicated area per group to increase the information density on the screen (https://experience.sap.com/fiori-design-web/concept/home-page/).
      Why we didn’t chose square micro-tiles as you suggest?
      • We don’t have icons for all apps and if we did no-one would be able to understand them. Micro-tiles work best with clearly distinguishable icons. As opposed to consumer apps, the portfolio of business apps potentially available to a user is huge. While consumer apps often have distinguishable icons there is no reasonable way to create and maintain icons for the thousands of apps shipped as part of an ERP.
      • Names of business applications in general turn out to be rather long. These names have to be expressive enough to give the user an idea what functionality this app stands for, e.g. „Display Chart of Accounts“ (there is a reason why transaction codes exist). Micro-tiles will not be able to hold such long names but they would get truncated very early.
      • In many cases subtitles are needed to identify an app to differentiate variants of an app on the home page. Thus, making the space issue even worse.
      • Different sizes of tiles make them more difficult to scan and layout. Offering a regular grid along which tiles align makes it easier for the eye to scan them and create a spatial memory to find them. Alternating tiles sizes break the grid. Especially, if the screen is resizable such arrangements become difficult to layout.
      We had also evaluated other types of micro-tile in a rectangular shape but this resulted into additional noise and distraction on the screen.
      Instead, we decided to go for a separate area the link area where applications can be displayed as pure links. This allows us to focus on the application name and use the space with maximum efficiency and without truncation. Placing this in a separate area allows us to define a different grid (two column on desktop) without interfering with the tiles. In future we are planning to add the possibility to display a subtitle in the link area as well as small icons. Users should be able to drag apps in and out of that area (which is currently not implemented yet).
      I hope this helps to better understand how we try to address your concerns.
      Best regards
      Kai

       

      Author's profile photo Jeremy Good
      Jeremy Good

       

      Hi Kai,

      I have to challenge your one comment concerning "We don’t have icons for all apps".  If you consider that customers have the option to upload their own icon, and have repeatedly been requesting more efficient tile management, why would it be so difficult to add a custom tile size like Gavin prototyped?  I have learned to use this very effectively on my Windows 10 laptop, and this replaced my previous method of custom toolbars in the taskbar.

      Basically we have a 1x1 tile option - what about a 0.25 x 0.25 option that customers could use for their own static links and bookmark tiles?  Not every tile in FLP is to a business app, but could simply launch a URL, and a few letters or simple icon (standard or custom upload) would be more than sufficient in my eyes.  Consider our own SAP IT version of FLP - we have several large 1x1 tiles that simply open up other internal websites and personally I don't really need all the text, subtitle, footer, etc. in order to click on it 🙂  Don't I get alternate text when I hover over the tile with the mouse?

      Personally the link area is a little bit boring if you ask me - basic hyperlinks that I assume will simply word-wrap according to horizontal space.  This might be exactly what one customer wants, but assume not everyone.  Why not give the install base more options to design and layout the FLP in a manner that suits them best?

      Best Regards,
      Jeremy

      Author's profile photo Kai Richter
      Kai Richter

      Hi Jeremy,

      thank you for giving me the opportunity to clarify some further aspects in this discussion.

      I like the approach that Gavin took with the micro tiles and I believe that with some effort customers can create such solutions if they want. A customer can define differentiable icons for the most important apps. Also, the launch icons that iOS features or the possibility to have widgets like a custom menu-tile for unstructured content are solutions that I have seen provided by customers already. This is one of the beauties of UI5 is its openness to custom extensions. I am really excited to see so many people embracing the concepts and pushing them to their limits.

      Unfortunately, this is nothing we could ship as standard solution.

      • We can’t deliver icons for all apps (as a fact, there are thousands) so that some apps could be displayed as micro tiles and others couldn’t.
      • Even if we had icons for all apps users wouldn’t be able to distinguish thousands of icons (more than 20-30 are a challenge)
      • Our application names are at average 20 characters plus subtitle and would get truncated on a small tile (many would then show “Manage...”; in comparison: Windows 10 micro tiles only show an icon; iOS icons allow for about 10 characters as names).
        • The design of the texts is based on business requirements from applications and customers as they are used to disambiguate variants of applications / systems and so on. This is not required on a personal computer with a limited set of applications available but it is a requirement of a scalable system of several thousands of apps that are administered centrally.
        • Also, users can send their own report variants to the home screen which requires them to define differentiable names.
        • Offering the application name on the tooltip only is not a viable option if it comes to touch devices but even on mouse-operated devices the tooltip should be an option and not the only way to get the application name.
      • Together with the administration capabilities (freeze groups, apps, layouts...), personalization of the homepage would become more difficult.

      Of course, we heard our customers requesting more flexibility and we evaluated several options, one of them being the micro tile as well as folders and many more. We validated these options with internal and external stakeholders. We validated the concepts also against the contents that we find in an S/4HANA system or an SAP system in general including references to classic UI technologies.

      With the link area, we settled on an approach that is very similar to micro tiles. One exploration used a visual design where a link looked like a small tile (we called it smile 🙂 but the additional borders created a lot of noise on the screen so we went for a plain link area.

      • Using links avoids truncation of names in way that is robust against translation.
      • Links can be enhanced with icons and subtitles where available and even with counters where needed.
      • The links in the link area behave like tiles so that we get a simple and coherent experience.
      • The possibility to drag apps from tile to link area is a very simple and intuitive way to personalize the page without introducing new interactions.

      The link area implementation is available in a first version today. We have run usability tests on the home page interaction with the link area and it performed well so we hope that this will overcome the issues that our customers have with the larger tiles without affecting usability of enterprise contents. Still we believe that the full tiles are valuable as well. (In fact, initially, customers and internal stakeholders specifically asked for the possibility to have larger tiles) As the feature gets adopted we are eager to learn and get feedback.

      Planned enhancements are:

      • Drag and drop personalization of the links
      • Support of an optional icon (which should make it look less boring 🙂
      • Support of an optional subtitle

      I believe that as soon as these enhancements will be available, the need for custom adjustments of the tile sizes will vanish.

      Using the combination of full tiles and link areas should address the requirements of our customers as far as we can support them from the perspective of a standard product that must ensure usability, accessibility and internationalization for the full set of applications. In addition to that the navigation menu and the me area will reduce the need to place many apps on the home page as rarely used applications can be accessed using the hierarchical navigation menu. Therefore, I am looking forward to see the solutions that we have been working on in the hands of our customers and receive the feedback to continue improving the standard.

      Best regards

      Kai

       

      Author's profile photo Gavin Quinn
      Gavin Quinn
      Blog Post Author

      Hi @Kai,

      Good points on the scaling of app count. I would argue though, that the tiles or browsing concept starts to lose relevancy after 50-100 "tiles" in any sort of layout though. At that point, people would adjust to a search-based system. I.e. on my phone, I have stopped browsing for apps, and typically do a quick down-flick and search.

      I like the links, but if I recall, the links or more static URL's and not target-mappings?

      Author's profile photo Kai Richter
      Kai Richter

      Hi Gavin,

      Thank you for bringing this up. I fully agree. This is what I observe with myself as well. I prefer search if I have an idea how the app is named. The FLP supports a very performing app search that should such a behaviour very well.

      However, in a business context, there might be apps where you don't recall the name but you remember that they are somewhere in a content domain. Therefore, we will support a hierarchical content navigation for such app as well in the navigation menu.

      The homepage should only contain the apps that a user uses at a frequent base which, according to our knowledge should not be more than 30. Overview Pages should be used to bundle domains into one tile to also keep the number low.

      As for your the link area: the navigation targets in there are the exact same targets that also can be represented as a tile, meaning targets of an intent-based navigation as well as fix links. Users will be able to drag items from the link area to the tiles and vice versa.

      Best regards
      Kai

      Author's profile photo Sanjoy Saha
      Sanjoy Saha

      Hi Gavin,

      Good idea. Adding 2 points.

      First, we can give user the flexibility to change user settings with counts that how many tiles they like to have in per page of launchpad.

      Second, we can give settings to choose standard/mini/micro size to users.

      Best Regards,
      Sanjoy

      Author's profile photo Kai Richter
      Kai Richter

      Hi Sanjoy,

      to my knowledge, to enforce the smaller mobile tiles on a desktop is already possible today for the administrator.

      Else, defining the number of apps shown per page is not possible - if I understand you right - as the home page is one long-scrolling page with anchors for the groups. The amount of tiles that fit a screen is dependent on window size and zoom level so that this would be difficult to determine.

      Best regards
      Kai

      Author's profile photo Gavin Quinn
      Gavin Quinn
      Blog Post Author

      @Sanjoy / @Kai -- perhaps you're imaging something like Apple's Photos app, where you can slide a scale for how many photos (apps) you want to see at a time, and the sizing adjusts responsively?

      Author's profile photo Kai Richter
      Kai Richter

      Hi,

      I think this is a very interesting idea. This is something we could definitively explore. However, the restrictions described above still apply. Offering less space will lead to content truncation if we are not consciously hiding parts of the content or resize it (which has limits).

      A question to all:

      What is it that you would expect - a scaling pf all tiles on the home page (maybe depending on the device type) or different tile sizes on the same home page (like in Windows 10)?

      Best regards
      Kai

      Author's profile photo Tejas Chouhan
      Tejas Chouhan

      Hi Gavin,

      True. I guess SAP had this thought in mind that most of the tiles which have no information are occupying space. Not sure if you had a view at link list (not sure again if Kai has already mentioned above ? )

      Just to give you a snapshot of it.

      But ya there is a lot of it which SAP UX has to improve. Which I guess  there are better minds who are already working on it ?

      Cheers,
      Tejas

      Edited  : Oh Yes @Kai already mentioned it, my bad..Snapshot above for your reference 🙂