Interfaces. Advice and Recommendations

Hi. My name is Dima Zyuzin. I design interfaces. I have got some experience over the past years and now I can distinguish some solutions and methods which help design interfaces well. I have come to some things myself and some I have read or got to know from other designers. Here I will write about some knowledge which I use in my work. Probably this text will be useful for junior designers or developers and startupers who want to improve design of their product on their own.

Use information maps (users journey maps)

We can compare a work with an interface with a travel. The user is to arrive from one city to another. He/she can fly by plane. If the user is afraid of flying he/she has to go by train and then 75 km more by bus.

Think over all possible user routs inside the tour interface, all possible turns from the fastest way to get to a goal in case if the user faces a problem.

The example of an information map of 10tracks app for Windows Phone

Use personas

Do not try to make your systems for everybody. Target them at certain people. Find out an average user. Imagine his/her background, name the user and his/her family members, employ the user, buy him/her a car and plan the day. So you can understand what the system user needs and save resources from unnecessary functions.

You can learn more about using personas from Alan Cooper’s books. For example ‘About Face: The Essentials of Interaction Design’.

Show, explain and give hacks

Users can face different problems. Show tips and explain the problem’s core and ways to solve it for a user.

The log in form. A user inputed incorrect pair of login and password.

We do not report what field has incorrect data for security but in case if a user missed @ or inputted password with Cyrillic or inputted with capital letters (if Caps lock is on) we advise that data is incorrect.

For example a user will not notice turned on Caps Lock and he or she will try to input a password for a few times. Password is ‘true’ but authorization will be failed. As a consequence the user is angry, he/she loses the time and has a negative opinion about your site (service).

Give ‘navigator’ to user

A user must have a possibility to understand in which part of the interface he/she is , what the next step may be and where the final goal is.

Example of the step by step bank form filling

Sizes of areas are to match input data volume

For example if they need to input cell phone number field is to match 10 digits or in case if they use sign +, country code or brackets field is to be a little bit longer.

Your interface will be used on touch devices

Keep it mind that your interface will be used on touch devices. Remember touch devices does not have a possibility of pointing to an element so it will be better if you exclude element appearing after pointing.

Duplicate element appearing after tap if you use pointing but then a user is to understand that he/she can tap here and get information.

Do everything what you can do instead of user

Fill in all required fields, change location, put the cursor to a necessary field.

Example shows a bank card payment form. After inputting the last digit of the card number focus moves to the selecting of the card validity, after year inputting focus moves to the inputting cardholder name field. Change letters for capital letters if a user is inputting his/her name by lowercase letters. After name inputting move the focus on CVC and after three digits inputting you can highlight Pay button additionally.

The interface should be responsive

A lot of people click links in a browser by double click. We suggest that common users do not see or do not understand difference between a regular cursor and a cursor over a link. Its the same thing for them. We should show for a user where he/she can press a button and where he/she can not, before the user press and after a few seconds he/she will understand that nothing does not happen. Use color changing of link for pointing, add button state after pressing or add animation of toggle switching. Make interfaces with feedback.

Get more personal user experience

Always try new services. Fill in forms and online applications. Use different desktop and mobile OSs. Try offline services. Try to pay attention to small things, memorize good and unfortunate solutions.

A look from aside is very important

Show intermediate results of your work to your friends and acquaintances. A look from aside of no designers helps to get a lot of new about the system and allows to make necessary changes on earlier steps. Get advice and mind comments.

This advice can help you to make your interfaces better. But think and double check existing solutions, keep in mind current tasks and the context of using the interface.

Originally published at on October 2014