Dec 05

Simplifying SAP UX Design is Easier Than You Think

User experience – UX, for short – is how a person feels when interacting with a digital product. What users expect is an easy, interactive experience that provides value with regular use. When forced to spend too much time navigating through a clunky web application, the result is frustration, loss of productivity and a perception of poor value.

If you’re tired of hearing complaints from customers, clients, coworkers or employees about web apps with a cumbersome user experience, you’re not alone. The good news is there are professional tools available to help UX designers streamline business processes, enhance visuals and simplify navigation to boost user satisfaction and loyalty. This article aims to familiarize and provide examples of some of the professional design tools available for enhancing UX on web-based systems.

Tools of the Trade:
Here are a few popular and easily accessible tools for UX professionals, developers, designers and interaction designers.

Fiori
Fiori is a collection of apps designed by SAP for broadly and frequently used SAP software functions. These apps offer a user experience that is personalized, responsive and simple, while enabling a holistic and consistent experience across multiple devices.

JavaScript
JavaScript enables you to add dynamic and interactive elements to websites. It can be used to enhance the user experience within web browsers by adding animation and effects, and also allows for communication between external devices and other platforms.

UI5
Not to be confused with HTML5, SAP UI5 is a library / framework of pre-built and customizable elements created using JavaScript that simplifies and accelerates the development of enhanced user experiences.

SAP Gateway
SAP Gateway is a technology that provides a simple way to connect devices, environments and platforms to SAP software based on market standards. It offers connectivity to SAP applications using any programming language or model without the need for SAP knowledge by leveraging REST services and OData/ATOM protocols.

ABAP Web Dynpro
ABAP Web Dynpro is the SAP standard UI technology for developing Web applications in the ABAP environment. This is the base of building a SAP specific webpage, but recently has the added ability to execute JavaScript.

How it’s done:
So what are some things you can do with the aforementioned tools? The examples below show how DataXstream developers used a combination of these tools to enhance the UX of our Order Management / POS application for SAP.

(1) ABAP Web Dynpro has enabled SAP web applications to utilize JavaScript. In the example below, both ABAP Web Dynpro and JavaScript were used to enhance the home page user interface.

ABAB, curtain effect, javascript

JavaScript was used to create a curtain effect. When the mouse is rolled over a blue icon, the box rolls up to reveal its contents. This can be seen in the first section.

Java Script, SAP, customization, SAP message

JavaScript was used to customize the standard SAP messages. Here the message is displayed in a pop-up that disables the background and forces the user to acknowledge the message.

(2) In addition to enhancing the UX with flashy interfaces, ABAP WD and JavaScript were used to communicate with a credit card machine. Below are snapshots of the interaction between the application and the credit card device.

OMS+, POS, credit card device, app display, SAP, SAP Retail,

Line items entered on the POS web app display on the credit card device.

UX, ABAP WD, JavaScript, credit card device, signature capture, SAP, SAP Retail, POS, OMS+

Once the customer provides a signature on the credit card device, it’s captured within the POS application.

cc machine, pos, oms+, sap, javascript, UX, ABAP WD,

The signature capture is also displayed on the retailer’s POS screen.

(3) In this next example, ABAP Web Dynpro, JavaScript, and SAP Gateway were combined to interactively display forms with the appropriate signature:

POS, ABAP, Web Dynpro, JavaScript, SAP Gateway
POS, OMS+, ABAP, Web Dynpro, JavaScript, SAP Gateway, SAP

POS, OMS+, SAP, signature

A PDF document within the POS displays the full order and signature.

In Summary:
SAP UI can be cumbersome, however simplifying digital apps to provide a better user experience, making it easier and more efficient for users, is not as daunting as you may think.

This year at TechEd && d-code, SAP’s premier technology education conference, DataXstream consultants presented a User Experience/User Interface Development session highlighting how DataXstream developers customized a standard Web Dynpro ABAP app using HTML islands. Participants learned to enhance standard floor plan manager components for Lean Order Management with HTML islands and saw examples of how HTML5 was used to enhance the GUI and communication with multiple external retail devices.

To learn more about DataXstream and view a pdf of this session, please click here.

michael_profile2Michael Champion
Michael Champion is a SAP Technical Consultant with DataXstream responsible for Product Integration and Development. His core skills include ABAP / Web Dynpro ABAP and Process Integration Development (PI/XI).

Michael Champion

About The Author

Leave a reply

Your email address will not be published. Required fields are marked *