Web Application UIs for Desktop / Mobile

As the "web" is moving very fast to mobile devices following the new-age mobile devices revolution which is enabling users to access websites & rich media content on their devices very easily making us re-think about the user interface designing & accessibility strategies from different perspectives when compared the conventional desktop-based web access.

As I always , the "end-user" is always at the core of all the development that happens on and off the web, the fundamental of any such product or application development is to create a product that's easily accessible & usable to him / her. But, being developers, the responsibility increases when it comes to 'mobile web applications' & the strategies changes from the conventional ones.

Unlike desktops, mobile phones are not powered by high-end processors, RAM or even storage capacity (as in most cases); which makes them far less capable when compared to desktop computers. And, this is where the need of the sensible web application design comes in to the picture at a critical level.

As mobile application UI designers / developers, one 'really' needs to understand the requirements of the end-users. An application which is going to be specifically for mobile devices needs to keep lot things like "display & such hardware capability limits, bandwidth / data usage limits & cost constraints & user demographics". The typical desktop-based web application user interface (UI) approach can NOT be fully applied for mobile-specific web application development. The below given image explains the same, about how both of them have different UI approaches:

Unlike desktop-based web application development where an UI uses 'horizontal' approach & splits into several areas like header, footer, left navigation, right navigation, etc. ; though the mobile application interface has only vertical approach as the ideal one & is not recommended to use a horizontal split approach until the application is targeted at a specific user segment with a specific device which is known to developers about it's capabilities, like hardware configurations; i.e. screen / display sizes, RAM, etc. In the absence of such information or business scenario, such split approach in UI development for mobile application is not fruitful & rather may land up the application in trouble.

I will add some more thoughts on this in my next article, where I will post some of my learning from my experience as well from others also.

What's 'Accessibility'?

Accessibility, here in respect to "web" as a medium, has crucial role to play when offering information / content / multi-media content to end-users of all kinds.

"Web Accessibility " can be described as "a practice of creating usable websites for people with all kinds of abilities and 'disabilities'. When websites are created with all such aspects where the core concern is the end-user, the site can be made more better. This includes several aspects like 'usability, user experience (UX) & accessibility.

How a site can be made to get considered as "accessible"?

• A website can be made accessible if the site is completely coded with sensible HTML where are the images have proper, descriptive 'alt' tags which, in case blind people, reads out the content with "text-to-speech" softwares or text-to-Braille applications built to aid them to understand the content available on the respective site.
  
  
• If the website has the capability of increasing the font-size or are made flexible enough to increase or decrease the font size using built-in capabilities of a browser, it helps people with poor sight to read the content they need.
  
  
• Also, if the website has all the links in colors (as most of them are using CSS nowadays) as well as 'underlined'; they can be quite easily understood by the people who are 'color-blind'; where these links can be seen very easily being 'underlined'.
  
  
• If a website is defined as accessible when they are designed in such as fashion that they can be easily accessed by the disabled user, using only a single device like 'keyboard' or even a 'single switch device' which is designed for an person who can not use even a keyboard or mouse.

Some basic guidelines from W3C website will take you quickly through this "to-dos" to build an accessible 'website'. (ref: http://www.w3.org/TR/WAI-WEBCONTENT/#Guidelines )

1. Provide equivalent alternatives to auditory and visual content.
2. Don't rely on color alone.
3. Use markup and style sheets and do so properly.
4. Clarify natural language usage
5. Create tables that transform gracefully.
6. Ensure that pages featuring new technologies transform gracefully.
7. Ensure user control of time-sensitive content changes.
8. Ensure direct accessibility of embedded user interfaces.
9. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.

You can go through "Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/WAI-WEBCONTENT)" to get more insight on the same.

What's user experience (UX)?

"User Experience" (often abbreviated as UX) is another core element of all the product development that happens on the web or mobile & other day-to-day life applications / product where the goal is to "satisfy the end-user's needs at its best level attainable".

User Experience (UX here onwards) includes all the aspects of the end-user's interaction with any products / services. UX can be briefly described as the "overall experience a user has when using a particular product / application or any system. UX is a subset of "experience design" which is related to architecture and interaction models which impacts a particular system's or product's end-user.

To create a best user experience, designers or developers should keep the end-user at the core of its product development & should make sure the product or system has the features easily accessible which the end-users are looking for, without any fuss & system meets the user goals & needs effectively.

An effective user experience strategy has many advantages, including the few ones mentioned below:

• Easy to access applications/ systems
• Due to exclusion of unnecessary functionality, exact user needs are understood & addressed.
• Overall usability of the product or application increases dynamically.
• Integration of business goals effectively as end-users needs are managed well.

Ensure Usability at every stage!

The best way to get good usability & user experience in the product development, whether it's for web or for mobile or even hardware development, is to "keep the user at the core across the whole product development life-cycle".

As the end-user is the heart of all the development any company do, it needs to consider the uncompromisable role of the user in whose hand that product is going to land ultimately. So, ranging from Conceptualization / Ideation phase, till the continuous improvement phase (post product launch), one has to continuously interact with the end-users & need to understand their requirements to develop the best "usable" product.



The above image shows that all the stages of the product development should ensure that usability factor is kept at its heart.

To ensure better user experiences, make sure that the end-user is kept at the center of all the design / development that's happening & such end users are tested as well preferably; so that we get more realistic feedbacks & can improve the product at its best.

Usability and User Experience

Usability refers to the product’s ability to fulfill target user’s goals and needs with effectiveness and efficiency in a specified context of use (ISO 9241-11). Usability is not only a property of the product itself: usability is a property of the entire system, which includes the product, the user, the user’s goals and the context of use. In the mobile environment, the changing context of use sets a demanding challenge for the development. In addition, the device limitations, such as input mechanisms and display size, make application development harder than in the PC world.



User experience (UE) aims for a more holistic view in which usability can be seen as a part of the user experience. UE emphasizes emotional aspects, such as the desirability, usage flow and impressiveness of the product. The ability to create a positive emotional impact on the user is a key factor in differentiating the product from the competition.

Investing in usability and UE work results in savings in overall application development costs. When the development is based on verified user needs and requirements, the development work can be prioritized and focused in the most important product features. Unnecessary work and re-work can be minimized. Satisfied customers boost the positive brand image and create customer loyalty.

(Article from Nokia Forum. Copyright with Nokia.) URL: http://www.forum.nokia.com/main/technical_services/usability/why_usability.html)

Usability! What's this? (Part -2)

Nowadays, there are various product / applications in the market which makes the market competitive in various terms, including "usability" of the product. This ever-increasing competitiveness makes markets saturated & the need for best-of-the-breed products in terms of usability are required to developed.

These products needs to be more of "user-centered" than being "technology-oriented". An 'Usability' expert analyzes the interaction between the end user and the application or product developed. After carefully observing them, an "Usability expert" may find the functional or design flaws in the process by which the product or application is developed. Being an Usability person, one has to always keep in mind that the product has been designed / developed by keeping the end user in mind.

Also, 'usability testing' and 'usability engineering' are both different things. "Usability Testing" measures the ease of use of a given software / application or product. But, "Usability Engineering (UE)" is a scientific way of research & develop the processes which ensures the product / application developed is compliant to most usability parameters.

In the coming article, I will post some more stuff on "Usability".