UX Design

In simpler terms, UX design is the process of creating products (digital or physical) that are practical and usable.
Adobe, "What is UX Design"

Introduction

UX stands for User Experience, referring to how people interact with an application. UX Design defines how users feel about their interaction with the app.

• Value. Does this product give me value?
• Function. Does this product work?
• Usability. Is it easy to use?
• General impression. Is it pleasant to use?

In this article, we are going to explore several UX Design practices that will improve the user experience for apps made with SAP AppGyver.

User behaviour

When publishing your application, you can expect a large variety of users. Thus, it becomes unreasonable to assume that everyone will follow the 'intended' path with your application and adopt your way of thinking. Fortunately, there are practices that allow you to mitigate the consequences of user misbehaviour, or simply guide them through the app.

Double-clicking

When using the 'Open page' flow function together with the 'Component tap' event, you intend that the user will only press a component once. But as experience has shown, that is not the case. Double or even triple-tapping the component will lead to page opening itself multiple times with a short delay.

To prevent pages from opening more times than required, you can use a 'Throttle' flow function between the actions to temporarily disable the ability to use the logic. With the configuration seen in the image below, it becomes impossible to open a page multiple times, no matter the amount of clicks:

User Avatars

When building user profiles, you may find yourself needing a placeholder user avatar - Identicon. It is a great UX practice to put default user avatars for people who have not yet uploaded one.

There are many avatar generators online, but for this guide we are going to be using robohash.org. Robohash generates a random robot avatar from a provided string. In your app you can use a specific string, like user ID, or simply randomize it.

To make a unique avatar, bind an Image component's 'Source' to a formula:

"https://robohash.org/" + RANDOM_NUMBER_BETWEEN(1, 9999999) + ".png"

Here, RANDOM_NUMBER_BETWEEN(1, 9999999) will generate a random number between one and ~10million, returning a unique avatar. To bind to a specific existing data, simply change the RANDOM_NUMBER_BETWEEN to a desired value, for instance an app variable.

The robohash originally comes in a large format, but you can resize the image to be pixel-perfect via the 'Layout' tab's 'Exact size':

With that, you can create beautiful designs: