Sarit Arora talks about Emerging UX Trends & Practices at 'd+b Talks'

Few days ago, Sarit Arora from Yahoo! visited our campus to give a talk on 'Emerging Interaction design trends and User Research for Innovation'. Sarit touched upon areas of evolving nature of UX complexity and providing emotional, rational and meaningful solutions. Particularly interesting was leveraging the new interaction patterns of touch devices, Natural User interfaces and thinking of bigger ecosystem to derive at a concept. You can view some of his thoughts in the presentation he showed us below -

Emerging Interaction Design Trends

View more presentations from vinasoni

Read More

User Experience: Petrol Pump

Objective: How to enhance the user experience at a Petrol Pump?

The Story:

I recently came across this problem statement, that was given to the manager of a Petrol Pump. I imagined myself to be that manager, and thought, thought hard! Then I browsed the internet to have a look at the variety of petrol pumps that we usually come across.

I also thought about some of the characteristics of a petrol pump :

• Petrol is more of a commodity, with prices differing only between states. Some companies tried to create Premium products but I have seen commoditization even on those premium products. So, a person is largely indifferent on where the petrol is getting filled from! 
• There might be exceptions: Example: People believe petrol available on highways might be impure and ruin their engines. 
• Personnel at a petrol pump understand numbers, so one needs to indicate what and how much is required. And since, petrol or diesel doesn't usually have local names, language barriers are low. 
• Services usually offered at a petrol pump: Petrol filling (obviously!), Air Check and Pollution check
• Petrol pumps are businesses of scale just like hyper markets. 
• Service design - 
• How many vehicles can fit in at a time?
• Maximum capacity
• How will vehicles get in?
• How will vehicles get out?

Now, my thoughts went on to how can one enhance the user experience given such characteristics of a service. And an important point to note is that, "Enhancement of User experience is not an end goal, it is a continuous process. One can add some components in a service that may seem to achieve the goal, but it will be momentary."

Without any proof, I dare to show how a user experience curve might look like, something like this decay curve over time!

Hence, my point here is not to build the perfect service, rather build relationships over time; relationships between employees and customers, that give the necessary feedback into the system to enhance further. Here we go with my observations on how some petrol pumps do that:

• As soon as we enter some petrol pumps a person guides us to the shortest line, or stops us or the line to get shorter. He also indicates the approximate time required to wait. In India, usually it is 2 minutes!
• We also observe arrows to indicate the manner in which our vehicles should enter the filling areas and out of it.
• A friendly smile when we stop the car is always welcome!
• While, our vehicles are getting their food, someone comes over to ask "Sir ji! Shall I clean your windshield?" So, by the time the refilling id done, your windshield gets a makeover!
• If you are paying by card, there is an apprehension as the cashier takes the card along inside a queer building. To change all that some petrol pumps are now equipped with mobile card swipes for Visa to American Express! (American Express, although an express, is the least accepted card in India, according to my observations! That's why it needed special mention :) )
• I would love if someone would be able to check the tire pressure as well while I am filling. This trend is yet to catch up due to some unknown reasons. But this would be really useful!
• Extra lubricants, and oils within a hands reach is always better at the petrol filling station. Not many petrol pumps do that, hence causing that unnecessary delay in delivery the service
• Petrol pumps are also the best places for driving directions (till the days when we will each get a GPS!) So, an intelligent, direction-informed attendant is a good resource at any petrol pump.
• I think the idea of a supermart at a petrol pump has still not picked up in India. But, I have surely seen the potential for a small vendor selling ready snacks like chips, tetra pack of juices, cans of cold drinks etc.
• And finally, if the person filling up my car gives that "I know you!" smile and the greeting then it makes us feel special! We feel like sharing our car troubles with him. We also give the person tips at times! And, as we embark on our journey for user experience, this is the just beginning.... ...

Read More

Content Design guidelines for Mobile web

While creating a website the first thing that a designer decides is the appropriate dimensions for it . But when it comes to mobile, the resolution and dimensions are not fixed. They are changing very rapidly, also the lifespan of mobile devices are much shorter. The constant release of new mobile devices also adds to mobile device resolutions. So this wide variety of resolution, makes it difficult for designer to select an appropriate dimension to work on.
























Figure1: This is a very limited list and not complete. It is just to give an idea about the resolutions.

To answer this problem, we need to create layouts for specific collection of devices. These layouts changes depending upon the resolution and orientation of a device, in order to enhance the experience on mobile.The main reason of this mobile resolution specific experience is the “one web” approach to the web design.

…One Web means making, as far as is reasonable, the same information and services
available to users irrespective of the device they are using. However, it does not mean
that exactly the same information is available in exactly the same representation across
all devices. The context of mobile use, device capability variations, bandwidth issues, and
mobile network capabilities all affect the representation. Furthermore, some services and
information are more suitable for and targeted at particular user contexts…

Guidelines for Designing for Mobile web

Many of these guidelines will improve the reliability, performance, look and user experience of your webpage, on all mobile platforms.

Simple
Users on mobile, quickly want to get the desired information. So mobile site should be simple than the standard site. Standard site is already simple, simplify it further more, to optimize it for mobile. This may include re doing the menus, removing images, breaking texts at certain places etc. You need to simplify the site from design and functionality perspective. Make sure that everything presented on the site should be simple, readable and useful.

Example





















Lightweight
Use lightweight graphics for mobile site. Even it is good to use a simple, separate mobile theme for mobile site. Mobile theme means you can actually consider how user are using your site and then optimize it for mobile accordingly.

Example





















Use Columns and Blocks
Use columns and blocks to layout your webpage like many online newspapers. If the content on a webpage, cover the full width with content, then it generally becomes difficult to read. Columns and blocks breaks the webpage into parts, thus making it easier to read and also allows user to double tap on objects on page.

Example





















Limit Page Length
Include as much content from your actual site as practically possible. But include that too a limit. Don't make the user to scroll too long , to view the complete page. In a touchscreen phone its still easier to view a longer page, but also think about a user with a keypad based phone. Break the content into parts, use pagination etc to avoid long scrolling.


Don't use pop ups or open new window
Do not use pop ups or open new windows, while browsing a website on mobile. As it can infer between the browsing experience.


Don't rely on flash or java script
Not all phones support flash or java script. And if some of the phones support, then it is not sure that its the latest version. Make sure that content on your mobile site is plain HTML/CSS, otherwise large content of your site will be on risk, if users will not be able to access it.


Limit scrolling to one direction
It is really annoying when user has to scroll in multiple directions, while browsing through a site. And this become worse, if user has to browse that over a mobile phone. Limit your browsing to one direction (vertical) to give a better experience to the user.

Example





















Link to the Standard site
Whatever platform users might be using, they might want to see the standard site, as nowadays many smartphones, i phones are capable of presenting the desktop site as it is. Always give a link to the main site, it can be link it the footer. It should also allow the user to go back to the mobile version from the main site without using back button.

Example





















Size and Sequence
Plan the proper sequence of the content on your site, depending upon the importance of the content, buttons, navigation links etc. Interface should also be designed keeping in mind the touchscreen interface, where buttons, click able links should be bigger.

Example





















References: noupe.com , UX booth, cyberdesigz.com

Read More

Content Publishers Going ‘Tabletized’

Newspapers were the first to realize the power of the Web to communicate instantly with their readers. Now being mobile-enabled has become increasingly important for them to stay relevant today. And as if it wasn’t enough of a problem to choose the right platform (Android, iOS), device capability, or to choose between mobile Web and native application, things have become more complicated with penetration of tablet devices (though there's no competition to iPad yet).

Tablet devices will become the biggest point of influence as to how users will interact and consume digital content. Companies such as BBC, FLUD, Wired, and many more already have their iPad native application available on Apple 'sApp store. CNN, Reuters, ESPN, SPIN.com, and NYTimes.com have made themselves aligned to iPad Web browsing experience.

However, the strategic choices will become easier for digital content publishers if they try to understand how different stakeholders of the publishing industry will deal with content in future.

Native Experience of Information

The first advantage of creating a native application for iPad is the richness of experience the app provides. Designers seem to be designing apps more as amalgamations of games and info-graphic interfaces and less as task-driven interfaces. Native applications can make good use of device capabilities such as camera, accelerometer, gyroscope, voice and motion sensor, and GPS and add to the overall experience of the application which is difficult to achieve on browser-based app designs. While some amount of offline browsing and location aware services are possible using HTML 5, it is still not possible to access some of the native capabilities of mobile devices from browsers due to security and privacy concerns (for example, access to address book or calendar).



The Wired iPad app is a beautiful example of static magazine content being made available in a highly interactive and multimedia-based content delivery format, without compromising on the magazine’s original free flow content designs, large visuals, large advertisements, and silky smooth page flip transitions. However, in many ways the content is confusing and unusable because of non-obvious controls, unintuitive interactions, and game design thinking. Read NN Group report on usability of iPad apps and websites.

Hybrid Experience of Information
Publications need to think — Does reading infotainment content always require such rich multimedia experiences? What about serious content readers who would want to read articles for hours? Does it make more sense to have subtle and clean reading experience for them?

Financial Times has designed a hybrid version of Web and native applications for their website (app.ft.com), optimized for an iPad. The website exploits HTML5 capabilities to load content in the background and provides a newspaper's page-after-page flip reading experience that is completely browser based. Users can easily differentiate the content reading experience from traditional Web content rendering without compromising the subtle simplicity.



Richness of Content is Expensive
Rich content comes with its weight and each bite of space on the iPad is expensive. Single copy of Wired magazine consumes half a gigabyte of storage space on the iPad before one can use it. Data on mobile is still expensive; downloading a copy of Wired using the 3G iPad connectivity would easily cost a fortune in many countries along with the time that it would take. And all of it will impact the end user experience.
Natural Digital Content Interactions Are Missing
In many ways native applications' designs reduce the user’s natural tendency of reading and interacting with the digital content. Features and controls that users use in browsers are not available (for example, copy text and photos and share it with friends by pasting it in an email). Features like bookmarking and printing pages are not available unless they are built seamlessly within the application.

Access and Reach
Digital content is highly search driven. To access a certain publication's content, users may use any of the search engines or they may find it via links from other websites, blogs, Twitter, and/or links embedded in emails. However, the mobile native apps currently do not support such navigation. So, if a publisher's marketing strategy is to increase the number of visitors and not bother about the repeat visitors, it makes sense to go for mobile optimized Web, especially if it is viral.

Media Advertising Means Money!
Advertising has been a primary source of revenue for most media companies across platforms. For a decade, it was believed that ‘Web users are ad blind’ and they don’t care about ads. At the same time, there has been a significant growth in various media companies' advertising budgets year after year. It’s time media content producers rethink about advertising.
Designers and marketers of traditional Web have worked on aspects like ad slots, positions, sizes, context, level of interactivity, personalization, and more but now iPad can potentially sail them far ahead in time. Ads designed for Wired app are more persuasive by being highly interactive. Perhaps there is scope to make them more meaningful, information exchangeable, intelligent and personalized by adding context sensitiveness. Advertising of such kind will certainly provide better branding mileage to advertisers and also the opportunity to get richer data in bargain. It might just be advertisers who will push publishers to go ‘tabletized’.

Editorial Control: Rigid vs Flexible vs Time to Publish
For publications that are in the business of providing real-time digital content, it is important to package content and keep updating it (for example, coverage of elections or scams). It becomes utmost important for the editorial staff to have flexibility and control over the content and presentation. Native application takes away that flexibility and control because of rigid content meta data structures and templates. Due to cumbersome maintenance and update routines in native applications and app stores, any change made to the app design can take weeks to happen. The work includes programming, testing, approval process, and then finally the end users have to actively choose to update the app. Mobile Web apps, however, require limited programming and testing, hence always providing users with the latest content and experience.

Read More

Design for Everyone : Interaction Design for Differently-Abled

“Usefulness is not impaired by imperfection”
Imagine a world with improved interaction, design of everyday things for differently able, bringing them to be a part of a country’s economic growth. This area has immense scope for designers from all disciples especially Interaction Design to benefit a social group that has not yet been able to access the full benefits of technology.

Wikipedia defines Interaction design: the structure and content of communication between two or more interactive "beings" to understand each other. Designing interaction for the applications, websites usable for differently able people aims in bringing millions of people in developing the country. Taking only the Indian context: According to WHO figure, 10 % of the Indian population is physically challenged; the Spastic Society quotes 70 million people with disabilities. The idea is to create a common platform embracing the technology and Interaction, gesture study of the differently able .Create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.
 
Broadly this can be categorized in broad groups i.e physical disability, sensory disability etc(http://en.wikipedia.org/wiki/Disability). Accessibility is a challenge for people with disabilities. Differences in cognitive ability, sensory impairments, motor dexterity, and behavioral and social skills must be taken into account when designing interfaces using technology, assistive technology. The subject is complex in its own special way. The thought is to:

• Create an interaction pattern before designing a product.
• For the products that are ergonomically well designed for a commoner would prove useless for the disabled unless some redesign done.
• Almost all the web based applications that exist currently needs to be redesigned for the differently able.
• The interaction of these people with everyday products is important for designers to better understand their needs
• Study gestures minutely to know the touchpoints and movements.
• Iterate on already used and approved products and interfaces.
• Usability testing becomes quintessential for such products, since most of our assumptions fail in these scenarios.
• Each person is different in its own unique way, with extensive study, a pattern can be found that leads to the design of everyday things.

( in pic: mapping different position of fingers, touchpoints, approach of thumbs and fingers )

There are many communication and interaction devices for general people, but, the current communication interfaces and services are challenges for spastic individuals. The most sought after interactions by such people include simple services like changing a TV channel, playing a game, reading a book or keeping oneself busy. These are just a few of the scenarios that needs design > redesign .

Differently abled have the capability to adapt to changes better than able population. The people around these have a exceptional ideas to redesign everyday products to suit the needs in-a-way like jugaad . It is possible to design or reiterate the design to suite the need of people with disability.

Take an example of spastic people. They have restrictive movements of muscles, hence they can’t make abrupt movements or gestures. Detailed study of only one action ,has lead to evolving Assistive Technology products like jelly bean, switches etc, Text to speech, touch typing software brings some relief for using desktop applications. These are simple ideas but very useful. Ideas as simple as these can change somebody’s life and can make them one of us.

Thanks Ankush for reviewing the draft.

Read More

Information Design for Product Display on e-Commerce Websites

Designers often get biased to widely used interaction design patterns on Web. It makes it difficult for them to find a completely different way of looking at how people would like to deal with information dissection, manipulation, and retrieval on Web.

Many times there is too much of information, too much data, or too many options and choices to make sense of. Users can easily become frustrated or disengage if they can’t find a connection with what is presented to them. One such example is e-commerce websites serving millions of products across thousands of categories.

Most e-commerce websites serve product information in a list or in a grid view. Facet search panel on left comprising either check boxes or links, with bracketed number of products inside each category, is another universal pattern used for product retrieval and filtering. For example, a website selling digital cameras, printers, or flat panel television sets will allow users to filter assortments by technical information such as megapixels, aspect ratio, screen size, FPS, make, model, and more. Most of these facets are not useful for people to make buying decisions anymore.

Few websites show number of reviews to prove product popularity in the market without caring for how long the product has been there on the shelf. Comparing product features is not desirable either because it just rearranges the technical information in a big table where each product is a column and users are forced to scan the information row-by-row to understand which product is better over others. And as mentioned before, technical information does not anyway affect people's choice of product.

BE HUMANE

When people buy items of such kind as mentioned above, beyond the technical information they are interested in the purpose and use of such products. Let's take an example of an office purchase manager searching for a large flat panel television to be used in a conference room with a seating capacity of 10 people for presentations and Internet video calls. Internally, it can be mapped to technical information such as resolution 1024x768, low priced, and Internet ready, and more. Similarly, let's look at a man who wants to buy a digital camera to capture his son’s Tennis game. Suitable camera can be internally mapped to technical information such as high FPS, bigger aperture, and in-built filter, and more. In both examples, the important point is that people want to buy stuff that is aligned to their needs. They find it very difficult to map their needs to the technical search/filter/compare criteria provided by websites.

A designer should experiment with visual/information graphic facets that will allow people to filter and compare products on their practical and emotional needs instead of technical information alone. A very simple visual representation of information can help people make better decisions, and understand something that's really complex, and connect them emotionally.

POPULARITY

A product’s social popularity on the Web has become very important. Buying decisions have started to get influenced by people's online reviews of a product. It is time that e-commerce websites graduate from traditional popularity display patterns. Merely showing information such as "number of people recommendations," "number of people liked or disliked" or "number of reviews" is not good enough anymore.

Interface designers need to start experimenting with ideas that can generate popularity based on people’s reaction in a particular context, time, and specific need. For example, one could use data visualization, like pie charts, scatter plots, and relationship circles to compare two point-and-shoot cameras and display one being more popular than the other among amateur photographers for taking home pictures and not so popular among professional or wildlife photographers along with comparative results achieved. Such generic visualization patterns will add depth to the user interface and eventually make it more useful for buyers to make right decisions.

Read More

Design considerations for touch screens – Part2

Pros and Cons of Touchscreens
The following overview lists advantages and disadvantages of touchscreens and summarizes their characteristics.

Touchscreen Pros
Direct: Direct pointing to objects, direct relationship between hand and cursor movement (distance, speed and direction), because the hand is moving on the same surface that the cursor is moving, manipulating objects on the screen is similar to manipulating them in the manual world

Fast (but less precise without pen)

Finger is usable, any pen is usable (usually no cable needed

No keyboard necessary for applications that need menu selections only -> saves desk space

Suited to: novices, applications for information retrieval, high-use environments

Touchscreen Cons
Low precision (finger): Imprecise positioning, possible problems with eye parallaxis (with pen, too),
the finger may be too large for accurate pointing with small objects -> a pen is more accurate.

Hand movements (if used with keyboard): Requires that users move the hand away from the keyboard; a stylus requires also hand movements to take up the pen.

Fatigue: Straining the arm muscles under heavy use (especially if the screen is placed vertically).

Sitting/Standing position: The user has to sit/stand close to the screen.

Dirt: The screen gets dirty from finger prints.

Screen coverage: The user's hand, the finger or the pen may obscure parts of the screen.

Activation: Usually direct activation of the selected function, when the screen is touched; there is no special "activation" button as with a light pen or a mouse.

This post is contributed by Mallikarjun

Read More

Design considerations for touch screens – Part1

Touchscreens - The Future
Touchscreens are operated as city guides, in museums, at POS (point-of-sale)stations or as kiosks(standalone advertising booths with user interaction) and now in the recent have made way into homes in the form of DPFs and Multimedia phones. Interaction has to be simple and fast as Users are often untrained. This calls for a screen and interaction design, which is considerably different from normal user
interface design.

Interaction
Touchscreens are operated with a finger or stylus. Therefore, they provide a very direct interaction - the most direct interaction that is possible on computers today. Touchscreens may be operated very fast for certain operations and require little or no training, if applications are designed adequately. For these reasons touchscreens have many uses, especially for untrained users. Many people believe that
touchscreens will replace keyboard and mouse in the future.

The Ultimate Judge is the User!
These preliminary design guidelines for touchscreens take the characteristics of touchscreens, their advantages and disadvantages, into account. Of course, these guidelines will be refined, as our experience with touchscreens grows. The ultimate judge, however, is the user. As ELO Touch Systems quote in their guidelines:

·Testing a touchscreen application on focus groups will disclose the areas that need improvement.
·If anyone pauses in confusion for even a moment, think how to improve the application.

Summary of Touchscreen Characteristics
·Speed: high
·Accuracy: low (finger), high (pen)
·Speed control: yes
·Continuous movement: yes
·Directness: direction, distance, speed
·Fatigue: high
·Footprint: no
·Best uses: point, select

Uses for Touchscreens
Best Suited to Applications Where...
·Opportunity for training is low
·Frequency of use is low
·Accurate positioning is not required
·Little or no text or numerical input is required
·Desk space is at a premium
·The environment may be chemically or otherwise "aggressive"

Not Suited to Applications...
·Requiring training/trained users
·With high-frequency use
·Requiring accuracy
·Requiring a lot of typing

Typical Touchscreen Systems
·Public information systems: Museums, city guides
·Kiosk systems: Advertising, product information
·Systems requiring pointing and selection only

Golden Rules
Speed: Make your application run fast. Speedy systems also reduce vandalism.
Intutiveness: Try to make the application intuitive.
Choices: Limit choices.
Guidance: Guide the user as much as possible.
Testing: Testing a touchscreen application on focus groups will disclose the areas that need improvement. If anyone pauses in confusion for even a moment, think how to improve the application.

This post is contributed by Mallikarjun

Read More

Tree based navigation

Trees are usually used to navigate hierarchical pieces of information (Country > Province > City) or to organise information so that retrieval is easy (list of interior design books under architecture books)

While they are commonly used, Tree structures usually don't work well for cases where user's don't know the location precisely i.e. when they are browsing

1. For example, if you know the name of a Prof. but not sure which Department he is in, you will keep looking within a Tree Structure.
   
   
2. It works well for things which you know well. For example if you are looking for Specifications for Maruti 800 car tyre specifications. You know you will go via Car > Suzuki > Maruti > 800 > Tyre
   
   
3. These may not work for deep-information structures with similar first-level categories. This is because the first wrong choice will lead you down a complete wrong path.

Read More