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:
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.
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.
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.
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.
6 Comments
