Flexible User Experience with SAPUI5

[KishoreKumarV]

As part of my research in the area of Intelligent User Interfaces, Here I would like to share a simple implementation of providing more flexible user experience with SAPUI5 application.

Every one of you would have definitely noticed the SAPUI5 way of footer which contains the buttons at the right hand bottom as per the left to right configuration. The same gets reverse when it comes to right to left, this can be controlled in the UI5 applications using the url parameter sap-ui-rtl=true for right to left and false for left to right.

Keeping the RTL/LTR aside, Thinking can this configuration be more personalized and brought closer to the behavior of the user for example if this configuration can be applied based on which hand the user is actually holding the device. Consider user who is using his iPad/Tablet or any other bigger screen device for his business applications and how much of the operations s/he could perform using only one hand.  Wouldn’t it be nice to understand which hand the user is holding the device to render the UI or keep it more flexible so that the UI Elements are always reachable over his/her finger tips? Here is the simple approach.

First thing how do you identify in which hand the user is holding the device? My approach, whenever user holds any device in single hand, s/he tend to hold it tilted towards his holding hand which makes the user to balance the device having the weight towards the hand. The common practice:

  

In other way if the user holds the device tilted in the opposite direction, user tend to drop the device due to imbalance of weight.

  

Having this as a based approach to identity users practice of holding the device, first step is to identify in which direction the device is been tilted.

Let’s get in to device orientation to understand this little deeper.

X, Y, Z are the three axis of your device and Alpha, Beta, Gamma are the three orientation movement and which will clearly specify in which direction the device is been tilted / rotated / placed. In our case the main focus is only on the gamma (y) axis rotation. The value of the gamma will be +ve if the device is titled towards right and –ve if it’s tilted left which means when the gamma value is +ve user is holding the device in right hand and when –ve user holding the device in left hand.

So now how do we find the gamma value in UI5 application, it’s simple. We can use the device orientation API of browser to get this. Here is a sample UI5 application with buttons on the footer which gets closer to your thumb automatically based on the hand you use.

Home.view.xml

<core:View controllerName="view.Home" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

    xmlns="sap.m">

    <Page title="Title">

        <content></content>

        <footer>

            <OverflowToolbar id="otbFooter">

                <ToolbarSpacer/>

                <Button type="Accept" text="Accept">

                    <layoutData><OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>

                </Button>

                <Button type="Reject" text="Reject">

                    <layoutData><OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>

                </Button>

             </OverflowToolbar>

        </footer>

    </Page>

</core:View>

Home.controller.js

sap.ui.controller("view.Home", {

    /**

     * Called when a controller is instantiated and its View controls (if available) are already created.

     * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

     * @memberOf view.Home

     */

    onInit: function() {

        if (window.DeviceOrientationEvent) {

            window.addEventListener("deviceorientation", $.proxy(function(event) {

                if(event.gamma > 5) {

                    //Right Hand

                    var f = this.getView().byId("otbFooter");

                    if(f.getContent()[2].getId() == "__spacer0") {

                        var spacer = f.getContent()[2];

                        var button1 = f.getContent()[0];

                        var button2 = f.getContent()[1];

                        f.removeAllContent();

                        f.addContent(spacer);

                        f.addContent(button1);

                        f.addContent(button2); }

                } else if(event.gamma < -5) {

                    //Left Hand

                    var f = this.getView().byId("otbFooter");

                    if(f.getContent()[0].getId() == "__spacer0") {

                        var spacer = f.getContent()[0];

                        f.removeContent(0);

                        f.addContent(spacer);

                    }

                }

            },this));

        } else {

            alert("Sorry, your browser doesn't support Device Orientation");

        }

    }

});

Here is the output. Won't you feel excited when the UI elements gets closer to your finger tips?

   

The live application link : https://iuibehavior-p1940680127trial.dispatcher.hanatrial.ondemand.com/ Open this link from your device and feel the Flexible User Experience.

Thank you for reading :smile: . Feel free to comment and discuss about UI Adaptation, Intelligent UIs.

Kishore Kumar