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.
Labels:

Comments

Post a Comment

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
49 comments
Read more

App: Calculate your job experience or age in years

Usually, all of those who works have to put years of experience on their resume or curriculum vitae. But 90% people put it wrong when they convert their experience in years only. Although they know the exact number of months and years but the conversion, they do is wrong. This happens because there are 12 months while the digit after decimal would be 0-9, i.e., 10 digits. Which means that we have to represent the number of months in terms of year. So here I have provided a small gadget to calculate it. Just put the date when you had started working in the From Date field and put current date in the To Date field. You can also calculate your age as well with this tool by putting your date of birth in the From Date field and put current date in the To Date field. As an alternative, you can use the hassle-free and simple to use  Date Differentiator  micro webapp. Bookmark it so you may easily access it later.
Post a Comment
Read more

How to convert JIRA story into sub-task or defect?

Many times we entangled in the situation where we have made a  story  in JIRA but later on realised that it should have to be  defect  or in other case,  sub-task  of another  story . Story → Sub-task So the workaround for converting the story into defect is given below: Open your  story Click on  more  option Click on the  Convert to sub-task  option in the dropdown You would be asked to choose  Parent  story, so chose relevant story After submit, your  story  gets converted into  sub-task Story → Defect Now if you want the story to be converted into defect, then you should first convert it into sub-task. Thereafter, you can convert that sub-task into defect as given below: Open the  sub-task Click on  more  option Click on the  Convert to issue  option in the dropdown You would be asked to fill up relevant fields required for raising a  defect , fill them up as required After submit, your  sub-task  gets converted into  defect .
Post a Comment
Read more