UI Translation Between Devices — Creator Oriented Applications
With the sheer improvement in the computational abilities of a mobile processors, many desktop apps are finding their way into portable versions of their suites for quicker accessibility. The greater chunk of these applications falls under the Creator Oriented Applications (COA, for later reference — coined by me). They range from video, audio, image editors to productivity trackers, journal applications, code editors, and so on. The underlying issue with these applications is that they are riddled with ambiguities and gimmicky features which in the long run disappoint their users. On a side note, I personally feel the development of such applications has a better impact on the users as it encourages them to create and not just consume. Some really disturbing facts regarding the applications we use have been bought to light by documentaries like ‘The Social Dilemma’ which goes to say how much we are hooked on the consumption of media than stepping out and creating it. I strongly believe undoing what’s done is impossible by targeting the companies and bringing reforms in the way they use or misuse data. A more affordable approach, with respect to time, would be to find ways we curb consumption and encourage the creation of content, which exposes users to better use-cases of their mobile devices.
So, this was the plot for my next venture in my self-taught UI/UX design & research. How should companies translate their COA from desktop to mobile versions to maintain usability & have an easy learning curve? There are two aspects to be looked into. Firstly, the processing capability of a mobile device, and secondly, can this functionality be cramped into a smaller footprint. In other words, the development and design aspect of this translation. This article will focus on the later.
To make sense of what I’m trying to convey, let’s take an example of video editing software because they are photo editing & audio/music creation application on steroids. If we can translate a video editor UI from desktop to mobile, designing for the rest becomes relatively simpler. I have put together a few important points that a designer must keep in mind during this translation.
Functionality Demands Space
One of the most important points to keep in mind while designing UI is prioritising functionality and making it accessible. (This point should be taken as per the use-case and requirements) For the majority of the time, most functional areas of the applications demand space/ larger areas on the application screen. Considering the example of a video editor, the timeline is the most-used section of the editor and so positioning it in the most accessible area is the key. Here’s where most of the mobile editors make a mistake. A horizontal timeline is very accessible on a desktop as it’s relatively bigger but following the same approach for a mobile device will make it more cumbersome to use.
The way you hold is the way you use
A horizontal screen editor is preferable if the application provides more tools to play around with. we shall discuss the designs with respect to horizontal screen editors in this article.
Before we go ahead, I want you to hold your phone horizontally, with both your hands and observe the way your fingers are positioned.
When I hold my phone horizontally my index fingers grip the top, little fingers grip the bottom, middle & ring finger support the back of the phone and my thumbs are on the screen. This brings us to the way our thumbs are designed. It’s easy to move them up & down over left & right, try it out! Now let’s connect the dots. if the timeline is placed horizontally at the bottom of the screen, you must move your thumb horizontally to navigate through the timeline which will eventually become uncomfortable. This is poor UX design. By dedicating the right half of the screen to the timeline and the left to the video playback and preview options, users have better control over the application.
This approach holds good for applications that involve stacking of layers (of content) and a constant preview of the stack. There are many layers to be solved with the editorial application for mobile devices (pun intended) which need a close understanding of what features and feasible and if the user is able to access them.
Concluding this article with this thought: designers have spent a lot of time designing shopping, ordering, banking, and payment applications. Exploring Creative Oriented Applications take a whole new thought process and expand the projects that can be worked on! As COAs are like a blank canvas, your focus would be on how to make features accessible and provide ease of creation which is very different from consumption and instruction oriented application.
