Designing Input UI Elements

Introduction

Input UI elements capture user input. Examples of input UI elements are select, combo box, multi combo box,  input, radio buttons, text area, etc.  Input UI elements are also referred to as value holders. Since there is specific UI element called Input (sap.m.Input), we’ll use the term 'value holders' to avoid any confusion. This blog is primer on designing value holders.

Inputs can be of many types. Digital text captured using keyboards is the most common. Barcodes, images, voice and gestures are user inputs too. The scope of this blog is limited to digital text on a desktop.

Why Value Holders?

Pretty charts in analytical apps may be the face of Fiori, but value holders in transactional apps are the workhorses for the vast majority of apps that are built. Capturing user input is a big part of transactional app design. Given the fact that there are quite a few value holders in the UI5 library, choosing the right one is paramount to user experience. It's important to understand the benefits and limitations of each value holder to make the right choice.

Value Holder Design is Search Help Design

Setting aside the fact that every value holder element looks and behaves a little differently, a big part of choosing the right value holder is selecting the type of search help (or ‘value help’ in UI5 terminology) to use. The goal of every value holder is to assist the user in capturing the right input value easily and rapidly. A poorly designed value holder could make it hard and time consuming to capture input, resulting in poor user experience.

Value Holder Design Considerations

1.    Does the value holder have set of pre-defined values? How long is the list of pre-defined values?

2.    Does the user have any information about the input value?

For example, the user needs to select the vendor ID and knows that the vendor name contains the word “Creative”.The user knows the vendor name and city of the vendor.  The user knows that the value starts with number “100” or text starts with “Sys”

3.    Does the user need to specify a value before proceeding to the next step?

4.    Does the input field need to be highlighted when there are multiple input fields available on the form?

5.    Are there multiple input fields close to each other that require a specific input field to stand out?

6.    If the input field is date and time related, in what format will the selected value be displayed?

7.    Are placeholders required to communicate to the user what type of value is expected in the value holder?

8.    Does the value holder need a single value or multiple values?

9. What type of search help is required? What attribute / attributes need to be used for querying and filtering? How big is the data set being queried?

Answers to questions above are pivotal to value holder design.

Value Holders Demo App

We've built a demo app that showcases the relevant value holders and have grouped them based on various attributes like type of control, type of value help used, etc. We've created a video for each category showcasing the features of the value holders in that category.

Category 1 - Drop Down Lists

This category includes Select, Combo box and Multi Combo Box.

Video on this category is Category 1 Value Holders.

Category 2 - Simple Inputs

This category includes Inputs of various kinds. Number Inputs include Input, Step Input and Range Slider, Validated Input and Highlighted Inputs includes Inputs with border shadow and background colour.

Video on this category can be found Category 2 - Value Holders.

Category 3 - Complex Inputs with Value Help

This category includes complex inputs with assisted inputs in the form of suggestion items / columns, select dialogs and form based value helps for single and multi input fields.

Video on this category can be found Category 3 Value Holders.

Category 4 - All others including Dates, Switches, Rating Indicator

Video on Category 4 can be found Category 4 Value Holders

We hope you find this blog useful.