Monday, April 25, 2016

Visibility of system status

Designers usually read usecases, requirements and they know a lot about system. The interface looks familiar to them. But for the users it is not familiar. If something goes wrong - they suspect the service fault in this problem. They became scary. If designers want to avoid problems - they try to make inner processes (upload, search, update tec.) visible. We are going to talk about viability of a system in this article.

1) Show users what is his mistake. 
Make smart error notifications on every form that have mandatory fields.

Red color is for identification of critical problems.

If there are many fields - show which one is wrong and why is it wrong.

If you don't want make your customers scary - you may design the message in other colors.

Yellow is ok. This service added even small instruction for users who cannot login.

But do not do it like twitter because notifications must be visible. So, add some color accent in the message.

If error message consists some important information - we can show error window for users who want to know details.

2) Show success status.
Success messages are also important. Service must notify users that their action fulfilled and provide them further instructions.

3) Use wait to show that service work.
If the service do something more than 2 sec - add animated wait.

Some websites use this waiting for additional promotion.

4) Add process bar if the process is very long.

This one is too small.

I must be not in the bottom.

Make it visible. The bar has to be in the same place where was the upload button.

5) Use breadcrumbs if there are many pages and categories.
If the website has difficult structure - users can loose themselves. So they have to understand their status - where are they now. For this case designers have to create breadcrumbs.

6) Notify users if there is nothing to show.

Or there is no item to show.

Follow these tips and your users will never get lost.

1) Show users what is his mistake. 
2) Show success status.
3) Use wait to show that service work.
4) Add process bar if the process is very long.
5) Use breadcrumbs if there are many pages and categories.
6) Notify users if there is nothing to show.

Monday, April 11, 2016

Recognition vs. Recall in mobile web sites and other interfaces

Designers discuss what is better: to use icons or text in navigation. We are going to show you the difference between icon and text perceptions in this article.

Our memory works in two different mode – recognition and recall. When we meet something that we already know – we can quickly recognize it. It is like you meet someone on the street. Recall is  deeper process of memory. You make a order to your mind to return information. Like you meet old acquaintance on the street and ask yourself – what is his name? Sometime you cannot remember the name but you know exactly that this is someone you have met before.

The problem of software, sites and apps UI is in conflict between new users and old ones. Old users can work with very bad UX because they know how to use this interface. New users ofter cannot recognize UI elements because they didn’t use them many time.

UI designer can use familiar icons and elements position to make users recognize.  We wrote already about a language switcher and logout button. Menu is usually hidden under three lines icon.

Everyone used to click on it in facebook.

Designers usually use these icons without text. They are too obvious to subscribe them.

But if designer is not sure that new users will recognize an icon - he has to subscribe it. For example this icon can be "previous" button, but it is "reply".

Some designers decide to subscribe everything, even if the icons are 100% familiar.

Lets have a look on some difficult service with many features like Illustrator. It has a windows with icons for popular action. But the majority is hidden in dropdown menu. Users have to recall the name of action to use it. It will take a long tome to remember all useful action menu items and recognize their position. That is one of the reason old users adore Adobe products and new users don't like them.

It is an interface of other vector editor - Corel Draw. Corel use icons, so users can quickly recognize actions.

Other example. Users know that right click on some object open menu window with actions like Copy, Paste etc. Even if they never used Corel Draw before - they can work with it using their previous experience. Also, menu items have hotkey tips.

But not in Illustrator. Users cannot use it without some training. Here are no even "Copy-Paste" items.

Usage of icon sets (the ribbon) instead dropdown menu was one of the important improvement of Microsoft Office 2007. Some icons are subscribed but the most familiar are not.

Google analytics has also many features. They partly use icons here. Users have to read all menu items to find geo data for example.

A text takes too much place in navigation. Some services make a feature for advanced users - they can hide text to minimize menu size.

This is example of difficult interface that became more difficult without any icons.

1) Create interface that users used to use.
2) Subscribe icons if they are not clear.
3) Use icons to make people quickly recognize items without reading.