The psychology of user experience design(UXD) involves a deep understanding of our mind’s ability to perceive and interact with smart surfaces.

Perhaps the most important advance in UX Design that is heavily based on previous psychology studies is the rise of augmented reality, touch-based interfaces and 3D environments simulated by mobile, home entertainment and game devices.

The rules of interaction in 3D environments and touch-responsive interfaces dig deep into cognitive psychology, information processing in humans given visual inputs, perception and hand-eye coordination.

The technologies used today to create more responsive and intuitive interfaces use a good amount of data about people’s limits in processing simple visual information and ability to modulate their own reaction and behavior accordingly.

The Gestalt laws of perception are actively used to define the maximum level of abstraction that an interaction designer can reach in creating icons and graphic elements to communicate basic instructions or options to users.

Also, the same rules are applied in interface design, where you would make use of white space to create visual boundaries between sections or group them together.

More recently, with the use of simple design elements in web apps, designers show a more elaborate understanding of perception as a top-down process, where meaning is already ascribed to the sign or icon before the user attempts to break it down to lines and simple geometric shapes.

Interestingly, the Weber-Fechner law is used in ineraction and UX design mainly to describe user-interface patterns of interaction for game devices and tablets where you need to tilt, pinch, press and move a motion controller/tablet to interact with the interface.

Engineers and designers need to find the right balance between the controller’s interpretation of movement and the human operator’s gesture intensity and amplitude. The goal is to build interfaces that simulate the effect of our action in a way that we would expect them to.

| extracts

I was redesigning the conventional signup form design recently, to eliminate two text fields for password confirmation while signing-up the user and providing only one password field with check-box or some UI interaction to view typed password. Which would be simple and don’t tweak user mind when he type password in star/asterisk text field.

I faced lot of questions from developers who are reeling under conventional UI mental models for ages. The problem working in design arena is not about producing new designs, but finding right brain to accept new ideas :)

Providing two text fields with asterisks is like playing neon football in dark :). How can you be perfect to get a right password when you don’t see what you are typing ?

I guess, two sign-up asterisks password fields are provided for security reasons. If a password field is starred out and you don’t see what you’re typing, which means you could easily make a mistake and submit the wrong password without knowing.

Usable form is when it’s aptly designed to mitigate the frustration of the user. As long as the design is intuitive and matches the real world scenarios of the user, he finds it more nearer to his thoughts. Two password fields are useful, but not necessary, somehow it looks unfriendly, like mistrusting the user.

The iPhone Password system is good. User can see the char as he types for 1 sec then it disappears. Even,  Nilsen suggests make password fields plain text :).  There have been many fruitful & futile discussions in this regard.

I didn’t get much support when I try to redesign unnecessary password confirmation field. The defense was; password confirmation fields minimize support calls.  My proposal was – the UI should make sure they actually did type in what they intended to. However, I found useful discussion on this regard in my favorite design site.

A more effi­cient approach is to ask users to type their pass­word in once, but then include a check-­box that allows them to unmask the pass­word, so that they can check the accu­racy of their pass­word. This option would reduce the num­ber of text fields and decrease the work users have to do to sign up.

>> Signup form simplifying

Most present day web applications often fail to consider end-user abilities and requirements such that users find it hard to complete their tasks or are unable to locate an information they desperately seek. Eventually the bad experience prompts them to switch off and they may never return again. Usability prevents overlooking the critical part of the software development life cycle — the end-user.

Usability as a methodology can improve development productivity as well – when developers consider the user needs and abilities they’ll not invest time and energy into building features which the users don’t need. This culminates into efficient coding and fewer revisions.

Usability provides for early testing with end-users to validate the functionality of the product. This eliminates over-design and puts the emphasis on the requirements of real users. Moreover it makes it easier to discover design problems early in the development life cycle, saving both time and money.

Lastly a usable product gives a satisfying experience to the end-user and a better reputation for the organization which developed it.

What is Usability?

ISO 9241-11 defines Usability as the extent to which a specified product can be used by a specified user with effectiveness, efficiency and satisfaction to achieve a specified objective. And it is my favorite definition. There are others who have defined usability as well, like Jakob Nielsen or you can go over to Wikipedia for a more in-depth insight on Usability Engineering. It is an area which is closely linked to human-computer interaction as well.

via | Bhooshan

Slowly and steadily visual design for web User Interface Design is getting constrained to only icon imagery. It’s already been transformed with powerful content management tools powerfully tied with liquid style-sheets and on demand content feeding.  With the emergence of blog centric content syndication the shift is largely focused on content than visual design. I assume,  it’s  the trend and vogue in visual perception of current horizon where we live in. The kind of visual design which use to be prime aspect of the user interface in erstwhile designs has reached oblivion in time unknown.

Nevertheless, visuals play a vital role in conveying information than a text;  as popular adage says ‘A picture is worth a thousand words’. Unfortunately, browser discrimination, varied display capabilities, rendering issues have forced visuals to step back making a way for text oriented design. And technically; accessibility issues, on-demand dynamic content has certainly backed textual representation than visuals. I love  to dribble more often when I fear of not seeing more of visual focused site designs in coming days :)

With the rise of the beautiful & effective iconographics everywhere,  I was pondering lot over visual presentation and its importance in everyday design. With powerful wordpress to backpackit-organizer, everything has moved to more lean, textual and style-sheet based markup presentation. If an information has to be presented in more subtle and to-the point fashion, there’s no alternative than relying in UI components of grid genre than any better image itself, due to gelling and dynamic nature of today’s UI components.

Nevertheless, when it comes to such feeling of less of visual design in  now a days corporate sites, I admire the elegant balance of white-space, text and visual design in GE’s online presence.

The biggest, best, most award-winning movie site on the planet  was successfully shopped by Amazon.  After acquisition, Amazon has very effectively pulled-up the styling and presentation of IMDB website. Anyone who’s visiting IMDB website for years know that, it’s a heavily legacy site running on tables  than modern div’s. I am sure, Amazon would have done too much of styling uplifting to get this site work in new decade standards.

Due to that fact, still there are lot of usability issues lingering randomly around the site.

I had to struggle to find a way to add a movie to my favorites list. Though there’s a facility to do so, it was out of the context.  The problem is, unusable design context. Hence, I propose this design solution to the right context to add movie to favorite list.  A link can be provided to fill the empty space available just below the poster. Later,  a link can be provided to buy the movie by Amazon :)

Before :

Problem:

1. Non-clickable link with hefty space between notifier and action.
2. Click-able image button with plus mark. I wonder what does that plus mark say. Enough cue to confuse the user ?
3. Note: Out of context confuses the user & drives away the intent. In the fast changing world, a penny lost is business lost.

After :

1. A simple solution:  One distinctive click-able link to achieve user’s goal & no more image based buttons.
2. A textual link is more apt than image-button. Even when imges are disabled, a text link loads.

Tonic – Get a  nifty and lovely android app to squeeze more juice out of  imdb. Working efficiently on  Android powered HD2.

There are umpteen daily tech news websites in the net. computer-world is my one stop daily dose of tech news on the net.what I like about the site is simple and effective user interface coupled with great navigational functionality. I’m of the opinion that design is all about solving complex problems and bringing all users to the median of ‘simple user’.

Very simple design shift makes computer-world website an user-friendly place to munch tech news. For example: The homepage button. Typically, home page icon acts as a button to reach the home page of the site. If that’s what it does, then why there’s a need for ‘home’ button on the navigation ? computer-world go it right, and  got rid of ‘home’ button. Now, branding icon acts as home page link.

Many websites display alternate text on mouse over of the header icon or shows the icon or displays icon on the status bar. That’s like, taking user for the ride. computer-world has changed that notion by changing the mouse-hover action by displaying it takes user to home page on mouse-hover. Interestingly it doesn’t show hover animation when the user is on home page. Very neat and user friendly.

As I was talking about ‘strong Information Architecture’ of such sites, site is not crowded with heft menu items on the main navigation. Every secondary link is carefully analyzed and grouped into ‘More’ menu item at the end of the ‘mast head’ navigation strip.

Site has carefully calculated the content loading speeds of the site and hence loads as crisp and as possible in all modern browsers. I tested with IE and Firefox of today’s latest versions.

Not just the content, even usable ‘User Interface is the king’ here. ‘Why wait ? it’s time to gulp some info vitamins at computerworld.com