SAP UI Design Patterns – Forms

As an interactive agency that specializes in SAP UIs and mobile interfaces, we work with companies to design the best possible user interfaces we can. In today’s digital world, there is so much data that is both input by the user and displayed to them, that it’s sometimes challenging to find the right mix of white space, information architecture, layout, and UI elements. But it’s important to get it right – especially when it comes to SAP user interfaces.

There are lots of design patterns to consider, but one of the biggest and most widely used in the SAP UI world is forms.

And there are lots to pick from – Adobe forms, WebDynpros, and JSP Dynpages to name a few.

But if you take a look more closely, you’ll see there are some design points or guidelines to follow that can make your forms easier to read, complete, and navigate. I must admit, nothing is more frustrating than having to fill out a form that is just tooooo long. Or how about filling out a form, making a mistake on trying to submit, then only to find that all the info you’ve filled out is blown away?

Fret not. Here are some design points to consider when creating best practice SAP forms.  And if you need more help, let us know and we can take a personalized approach.

STACK LABELS OVER ELEMENTS

This one may seem au contraire to the norm, but you’ll find that stacking labels over elements helps to create visual flow in your forms and allows you to group like elements together more nicely. This is an example of good information architecture and making good use of real estate on the page or form.
Here’s an example:

Stacking Labels over UI Form Elements - SAP UI Design

UNDERLINE LINKS

For this point all I can say is – it’s the little things that count. A best practice UI design standard is to indicate an action before it happens – and with links – that usually starts with underlining. This visually tells the user “I’m clickable” at first glance. A simple design step, but simple is the key to a great online form.

USE WHITESPACE

Here the point is “busy is bad.” Or some refer to this design faux pas as black space. One mistake form designers make sometimes is thinking more is better. And it’s easy to fall into that trap since there is always so much data to display and process in SAP applications. They may say “wow – look at all this info – there’s so much for the user to do!” But if you find you have too much data on the screen you should rethink your design or find other places for it on other screens or with use of tabs. Remember less is more.

Proper User of Whitespace - SAP UI Design

STAY “ABOVE THE FOLD”

This form design point is actually getting easier to implement now that bigger monitors are becoming more commonplace. But it still happens painfully enough times for me to need to mention it here. The fold represents the Mendoza line on your screen. It’s the point at which you start to have to vertically scroll. If you need to push tons of data below the fold, you definitely should rethink the form design. In today’s online apps, quick visual inspection and then resulting action is the key. The more you have to scroll down to look for things or to complete fields, the less quick visual inspection and action your users can take. I liken this to too many words on a PowerPoint slide – nobody reads all that text and what’s more – nobody wants to. The same principle applies for data below the fold. At the very least, core data and processes need to exist above the fold.

Good example of staying above the fold - SAP UI Design

NO HORIZONTAL SCROLLING – EVER.

It may be ok for showcasing picture or print designs, but if there was ever one UI form standard that should never be broken it’s this one. This is the holy grail of form commandments if you will. If your forms make the user scroll horizontally at any point throughout the experience – than the design needs to be adjusted. This gets tricky for instance with WebDynpro UIs because of the ability to right click and add fields dynamically. But the standard still holds true – horizontal scrolling is a big no no and never best practice for your forms.

Here’s an example of what not to do below.

Horizontal scrolling with forms is bad - SAP UI Design

So there you have it. While there are many more points to discuss specific to forms, these are 5 simple points that don’t take a lot of time to implement, but will save your users a lot of frustration and angst. They are easy to abide by and implement no matter what SAP UI technology you are using. And while there are many types of UIs offered by SAP that range in complexity, abiding by these simple truths will align your forms to some basic standards and save your users time and effort – which is always a very good thing.

One Response to “SAP UI Design Patterns – Forms”

  1. SAP UI Design Patterns – Buttons « Excellis Interactive

    […] really is no right answer here as long as you stay consistent and keep your buttons in sight. In my last blog i talked about forms and staying above the fold. With buttons, you most certainly want to stay […]

    Reply

Leave a Reply