Skip to Content
Author's profile photo Pete Lagana

SAP UI Design Patterns – Forms

As an interactive agency that specializes in SAP UIs, we work with companies to design the best possible user interfaces we can.  In todays digital world, there’s 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’s lots of design patterns to consider, but one of the biggest and widely used in the SAP UI world is forms.

And there’s 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 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.


1.  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:

Good Example of Stacking Labels over UI Form Elements


2.  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. 

3. Use whitespace

Here the point is “busy is bad”. Or some refer to this design faupaux 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



4. 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 todays 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 inpection 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 – 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


5.  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 horizntally 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 = bad

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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Paul Snyman
      Paul Snyman

      Nice job, I think this is a huge focus area going forward as the usability bar is constantly being raised.

      Keep up the good work,

      Author's profile photo Pete Lagana
      Pete Lagana
      Blog Post Author
      Thanks Paul!  You are correct - the usability bar is constantly being raised in the digital world in general and I think it's important for SAP to keep pace with those rising user expectations.  I think this is even more important for SAPs image as usability hasn't traditionally been a strong suit. But if no overhaul is in the works sometimes little things like design best practices can help. All the best Paul!  Pete
      Author's profile photo Former Member
      Former Member
      Hi Pete
      Nice blog - it's good to know the main recommended rules and trends in UI design ...
      Author's profile photo Pete Lagana
      Pete Lagana
      Blog Post Author
      Hi Ondrej.  Thanks for reading and commenting.  Yes, there are many other form design points I could have mentioned, but I didn't want the blog to be toooo long 🙂 so I just mentioned the top 5, quick hitters if you will. 
      Rest assured, I will be writing more on this topic in the days ahead.  All the best to you. Pete
      Author's profile photo Former Member
      Former Member
      Very nice blog, and sincerely hope you continue with this topic in other blogs in the future.

      What are the recommendations regarding the actions (buttons)? Where should they be localized? Bottom left? Bottom Left and Top Left when the form is little big?

      I already had a few discussions regarding this topic and the way Humans reads the information, some people say we read top - bottom - left- right (like a Z), others say there are one diagonal there are a few people mentioning a T. What's your feedback, comments, opinion?

      Author's profile photo Pete Lagana
      Pete Lagana
      Blog Post Author
      Hi John - Thanks for commenting on the blog.  And to answer your question, I will most assuredly be authoring more blogs around the SAP UI topic.  In particular, I do have a series focusing on "Buttons" coming up very soon!  So please stay tuned.  Until then, take care!  Thanks.  Pete