Skip to main content

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.

Comments

Popular posts from this blog

Unlock protected blocks in Siemens SIMATIC Step 7

Recently I'd been called by Hindalco's Fabrication Plant division to unlock the protected blocks in Siemens SIMATIC Step 7. They were in need to unlock those blocks since an year because of 1 million Rupees of loss per month. They want to re-program those blocks but it was locked by the man who'd done the setup. From the people working in that department, I came to know that they were trying to call that man (someone from Italy) right here but he's not coming. Actually, what he'd done was that he'd locked some of the blocks and deleted the source file. And Siemens didn't provide any feature to unlock. Department people also told me that even the people working in Siemens don't know how to do it. Being a software engineer I know that any thing can be reverse engineered. So I took up the challenge. How did I unlocked the blocks? The first thing I'd done was searched about this software at Google and read about what is this software all about. Aft...

Launching a Jupyter Notebook with TensorFlow using Docker

This article will walk you through setting up a Jupyter Notebook environment with TensorFlow pre-installed using Docker. Docker allows you to run isolated containerized applications, providing a consistent environment regardless of your underlying operating system. Prerequisites: Docker: Ensure you have Docker installed and running on your system. You can download and install it from the official Docker website ( https://www.docker.com/ ). Steps: Start Docker: Open your Docker application (Docker Desktop for Windows/macOS or the command line if using Linux). Run the Jupyter Notebook container: For macOS/Linux: Open your terminal application and run the following command: docker run -it --rm -p 8888:8888 -v "${PWD}":/home/jovyan/work jupyter/tensorflow-notebook For Windows: Open your Command Prompt application and run the following command: docker run -it --rm -p 8888:8888 -v "%CD%":/home/jovyan/work jupyter/tensorflow-notebook Explanation of the command flags: -...

JS: The complete code example of Crypto.js (DES)

For one of the project I was trying to use crypto.js but I found that the Quick-start Guide have some deficiency in terms of library usage. So I am writing it here as a useful note for memory recap. <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/tripledes.js"></script> <script> var encrypted = CryptoJS.DES.encrypt("The secret message", "secret_key"); var e_msg = encrypted.toString(); console.log(e_msg); var decrypted = CryptoJS.DES.decrypt(e_msg, "secret_key"); var d_msg = decrypted.toString(CryptoJS.enc.Utf8); console.log(d_msg); </script>