A-G-14, CoPlace 1, 2270 Jalan Usahawan 2, Cyber 6, 63000 Cyberjaya, Selangor

SAP BOBJ 4 Dashboard and Flat UI

As we all know, the current trend of UX is to move from skeuomorphism to flat design. Why is it so? Is this a fad that will soon past like all other things in the world, or it is here to stay?

In its pure intention, flat design is supposed to ‘showcase’ the content with simple UI elements. These element are supposed to be enough to convey the intended message of the content. It tries to move from the pretentious way of representing UI elements as actual real-life object to UI elements that are simple and functional. Flat Design will use a lot of whitespace, colors and typeface that will convey the intended messages to the audience.

So how do we design SAP BOBJ 4 Dashboard using Flat UI elements? Standard BOBJ 4 Dashboard elements will contain objects that are more skeuomorphism than flat. Gauge looks like actual machinery gauge, meter indicator looks like our car dashboard. Therefore, to turn these elements into Flat UI will require a bit of work.

1. First step is to use ‘Backgrounds’. This background will use simple flat colors (no gradient) that will give contextual meaning to the content. For example, a green-colored background will indicate the measured metrics is within allowable perimeter. Red-colored background would indicate otherwise.

2. Use simple clean modern-font. For this you need to add additional fonts not available in the standard BOBJ 4 Dashboard application. However, to ensure that the font will be displayed correctly on your client-side, select from the Dropdown menu -> File -> Document Properties -> Check ‘Use Global Font’ and ‘Use Embedded Fonts’. Yes, your exported file will become bigger, but this ensures consistent user experience for your client side regardless of web browser or OS used.

3. Important metrics should be shown using bigger size fonts that represent the numbers / percentage or the measured metrics.

4. For Pie Charts and Chart Elements, remove unnecessary elements that are a distraction to the content. First choose a theme that have the closest Flat-UI type of elements. In this case, ‘Nova’ and ‘Halo’ themes should be ok.

4. Some Elements need to be created from scratch. For example default scrollbars would not be flat element. To really adhere to the Flat UI principle, the scrollbars need to be redesign to showcase flat elements.

The above are some of the guidelines that you can use to get a Flat-UI dashboard. Feel free to experiment with your techniques to design the best dashboard that fit your client needs.

Here are some screenshots of the dashboard that we designed using Flat Elements:

Dashboard main page:

BOBJ Dashboard Front Page

Dashboard detailed page:

Dashboard Detailed



Jures Yahya
Operation Boss

“Loves BI to the core and dabbles with Ruby On Rails during his free time. Has a cat named ‘Kitty’ who likes to disturb him during moments of high-concentration…”

Leave a Reply

Your email address will not be published. Required fields are marked *

Need our service? Contact us now.