Wednesday, August 17, 2016

Concept of shapeshifting GUI/UX

There have been lots of work going on in the field of UX where the challenge is to improve the user experience of the apps. Earlier it was Adobe's Flash that took over the responsibility of it. It was quite mature technology during it's peak period. But after the recent shift of technology that gives preference to HTML5, the whole new possibilities came up. It was meant for browsers only but now apart from developing websites; it is being used to develop web-apps, desktops-apps & mobile-apps as well. This became possible because of the processing power of the mobile devices increased many folds and still continuing as per Moore's law.

When the HTML5 got into the market, there came the concept of Responsive UI design; so that the websites could adapt the screen size and provide better UX. This approach made the websites to look better on the small screens of mobile browser also; as if it is made for that device only. Although technically it is only resizing & reorganising the layout.

Now the mobile apps are being made using the technology stack of HTML5, JS, CSS combining it with Cordova or Ionic like frameworks or wrappers. Developers have managed to make the app responsive to the screen size. So it can be viewed properly either on mobiles or tablets. And using Cordova, they can also build multi-platform apps as well by using the same code base. That's why it is called Cross-platform or Hybrid apps.

So now the question arises that what is left?

Well, there is a problem still left untouched, i.e., multi-platform apps are having the exactly same GUI. That means it looks exactly the same on all the platforms. But we know that all the platforms have different themes, look and feel which is specific to it's OS.

While the Native apps have the same theme as of it's OS. So how a hybrid can be made like that?

Introducing the concept of Shape-shifting GUI. The core of this technique is to mimic the appearance of the OS on which it is running. So just like Mystique of X-Men; the app will adapt the theme of the OS to appear exactly similar to its native counter-part.

The same Shape-shifting GUI based mobile app will appear as a Native iOS, Android, Windows app when running on iOS, Android or Windows operating system respectively. This can be made possible by applying the theme of the OS.

We can use the following themes for different platforms:

Similarly, for other platforms as well.

Now, using JavaScript the app has to first detect the operating system and then apply the OS specific theme over the running app.

Although the concept is quite simple but it's implementation is little bit tricky because developer have to keep in mind the universal layout that should be adaptive as well as responsive. 

So basically, combining the technique of Responsive UI & Shape-shifting GUI will make the app truly Universal.

No comments:

Post a Comment