Improving UX with Vibration API on SAPUI5

We know Fiori/SAPUI5 is all about delivering a better User Experience (UX) for the poor people who use our apps. Every detail counts. I have been thinking about what else we could do to improve our apps and to make our users happier?

One feature I miss in UI5 apps, and would be nice to have, is the vibration feedback when you click on a button. Every native app for Android or iOS has it! Probably apps for Windows Phone also have, but who cares for Windows Phone? I think vibration feedback is a very cool feature which improves the UX. When you click on a button and your device vibrates, you know your action was received and the app is going to do something. It’s the app saying “I got you request, wait a sec. You don’t need to click 9x repeatedly!”. It’s just like when you are playing your PlayStation and you get hit by a Hadouken. Your controller will vibrate to tell you something happened.

If we have vibration feature in native mobile apps, so we have a Cordova plugin to use in WebApps. We could create an UI5 app and build a WebApp which uses the plugin to enable this feature for our users. But we have a problem here. What about everybody who access our app in a browser? What if the customer doesn’t want a WebApp?

Fortunately, HTML5 itself has the solution, without plugins nor frameworks! We just need to use the Vibrate API. Nowadays, this feature is not supported by all browsers, but should be soon. Then you ask me: what if I implement it in my app and the browser doesn’t support it? No problem, you can check if the browser has support before calling the API, this way you won’t raise an error in case the browser doesn’t support Vibrate API. If supports, you have a nice feature for your app.

Using Vibrate API is easy, you just need to add one line to your code and voila! Your UI5 app now can behavior just like a native app and vibrates users’s device. Bear in mind only mobile devices have the ability to vibrate. You will not be able to vibrate a desktop…

This is the command to use Vibrate API:

navigator.vibrate(100);

In my opinion, we should have this feature in some SAPUI5 components such as Button, Icon, Switch, Radio, CheckBox and so on. We also could have it when opening a popup or displaying a message or on events like Drag and Drop. It’s so simple to implement that I cannot understand why we already do not have it by default in few SAPUI5 components.

I have created few examples to show it. There is even a new custom SAPUI5 Button which implements Vibrate API as property in the component. You can test and play around with it in the JSBin below.

JSBin – Vibration API on SAPUI5 Samples
https://output.jsbin.com/wenela

My Custom SAPUI5 Button which vibrates

//by Mauricio Lauffer
sap.ui.define([
	"sap/m/Button",
	"sap/ui/Device"
], function(Button, Device) {
	"use strict";

	var ButtonVibrate = Button.extend("mlauffer.ui5.ButtonVibrate", {
		metadata: {
			properties: {
				vibrate: { type: "int", group: "Misc", defaultValue: 50 }
			},
			events: {
				"click": {}
			}
		},
		renderer: {}
	});

	ButtonVibrate.prototype.onclick = function(oEvent) {
		try {
			if (!Device.system.desktop && window.navigator.vibrate) {
				window.navigator.vibrate(this.getVibrate());
			}

		} catch (e) {
			jQuery.sap.log.error(e.message);
		}
	};

	return ButtonVibrate;
});

What do you think about it? Is it a nice feature to have? Is it worth to use a custom component to implement it? Do you think users will like it?

Well, that’s it. Let’s hope someone from SAP reads this blog and likes the idea. Maybe we can see the feature as a default property for sap.m.Button in the near future 😉

Happy new year to everyone!

W3C – Vibration API Specification
https://www.w3.org/TR/vibration

Mozilla Developer Network – Vibration API
https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API

Can I Use – Browser Compatibility
http://caniuse.com/#feat=vibration

Cordova Plugin Vibration
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-vibration

Crazy samples
https://gearside.com/custom-vibration-patterns-mobile-devices