Tag Archives: user


Web/Hybrid mobile Apps

There is an evident abundance of native applications in the market which suggests a persistent trend of development and rightfully so, since native apps are obviously way smoother than your average mobile or a Hybrid application. Yet every platform has it’s perks depending upon the situation, such as the type of resources, time availability etc . If you want to build the next Foursquare, using geolocation and providing a means for displaying data and updating data, a hybrid app is a perfect solution and enables you to build it once, publish it through app stores, and have it work on several platforms.

User Interface/Experience Design for Web/Hybrid apps:

Every OS has its own signature user experience that transcends throughout the ecosystem, and meddling with that would mean betraying the user’s confidence and you might end up making the user feel stupid. The user’s are mostly accustomed to the general rules of the OS, like the gestures, controls and other such elements and an app designed keeping that in mind would maximise any learnability for the userUX Comparision.

 As displayed above, the comparison shows how the two platforms have different real estate to  put  similar options

When designing a user experience for a Hybrid/Web application, we have to cut through these issues and make sure that we present a UI that lessens the learning part and make the experience more intuitive.

Tips to minimise trade-offs when designing a Hybrid/mobile app:

1. Know your platform:

Like any project you have to know what your working with, which means that you need to make sure know the pros and cons of the platform that the UI will be based upon. There are plenty of platforms that can help you build a great web/hybrid application but knowing there weakness and strengths will help you understand and let you make informed decisions, like designing controls ad navigations that are more feasible and easily implemented without any lag issues.

2. Do your research:

While on the drawing board, start sketching out different styles with wireframes and test them. You can come up different variations of the UX and prototype them with the help of different tools available online such as Flinto, Launch and POP etc and put it in front to users belonging to different breeds (OS users). This will help greatly in concising the sort of controls and gestures you can use to better the user experience of the application.

3. Don’t pick sides:

As a designer you should act as a neutral party and avoid any favorites while designing the User interface since this might cloud your judgement. A lot of times you might see an extensive use of iOS styled controls/gestures or the latter(android) implemented in a hybrid mobile application which might be one of the greatest sin since this might confuse the user’s or make it difficult to perform certain tasks in flawless fashion.

There should be no apprehension in experimenting with customised or even hybrid controls/gestures in a way that they have a higher learning curve.

4. Keep it Consistent:

Consistence is very a important factor to maximise the learnability which can be achieved by using design elements such as colors (for indication or used as markers) and real estate that is consistent throughout the app. This way the user will have a very smooth learning experience and easily be able to grasp the UI without having trouble figuring out anything.


Following are some of the major Hybrid/mobile platforms available:


Titanium SDK (CPNS): The Titanium SDK compiles JavaScript to native code. Titanium claims 60%-90% code reuse when supporting multiple platforms.

Xamarin (CPNS):The Xamarin framework provides a .NET environment for your application to run on. The application is written in C#. Porting between platforms requires some complex development work.

Oracle ADF Mobile (Hybrid): Oracle Application Development Framework (ADF) mobile is a combination of Oracle ADF (JavaServer Faces (JSF)) and PhoneGap. This solution is ideal if you already have a large JSF deployment.


Pros and cons of mobile platforms:

Pros (Cost)
• A cross-platform solution allows the same code to be run on multiple platforms, reducing development and maintenance cost.
• PhoneGap and ADF provide excellent support for existing Web content.

Cons (Third Party)
• Components sometimes look and feel incongruous with the device’s native UI.
• Not all new device features are immediately supported.
• Developers are dependent on a SDK to make things work.


Prototyping for users

As we all know, any design process consists of several steps and procedures that involve constant evaluation of progress.

The key to a good design is that it must acknowledge the constraints and limitations and be carved with an understanding of the end user (their psychological, social aspects) and the interactions.

Polaroid prototype similar to concept drawings for the "Model 5700" that was never produced. While this design was made by Walter Dorwin Teague Associates, the actual design was probably done by Teague's son Dorwin Teague Jr

Polaroid prototype similar to concept drawings for the “Model 5700″ that was never produced. While this design was made by Walter Dorwin Teague Associates, the actual design was probably done by Teague’s son Dorwin Teague Jr


Prototyping plays a pivotal role in the determination of value and quality of the design at the same time creating more room for predictability, innovation and collaboration. Prototyping  is an efficient strategy to determine hard to predict events or outcomes.

What is a prototype?

A prototype is an incomplete version of your design that serves the purpose of reflective evaluation. A prototype is made not just to test and evaluate design but also to innovate and create a better product.

Features of a prototype:

A prototype can easily be retired to a new one and is an incomplete version of the final design. A prototype is not meant to be complete, for example; A prototype might be a wooden block, shaped in form of a smartphone that is under development to test the experience of holding it, mimicking usage, keeping it inside the pocket etc.

Although prototypes do not have to be exact size yet they can be developed for small and large scale products. Walter Dorwin Teague, a famous American industrial designer prototypes the interior of a Boeing 707 and made participants experience it.

Walter Darwin Teague inspects in the interior of a Boeing 707

Walter Darwin Teague inspects in the interior of a Boeing 707

In proportion to what we perceive there are usually far more ideas and options out there to be discovered on any given project, hence prototyping plays an important role in refining the product and collaboratively injecting new ideas efficiently.

The user factor:

User is one of the very vital elements that shape the final outcome of a product. Understanding the psychological and social aspects of the user is important to better judge the product’s abilities in order to facilitate their requirements, and make things easier and joyful. So for example, in terms of the user factor there are perceptual and cognitive limitations like a human eye is not able to see more horizontally in one position than vertically. Also all possible limitations of interactions should be taken in to account like the usage environment/model etc.