Editor’s note: This post was written by Sagar, who started Webwingz in 2000, with a vision to make the web a better place. Starting from a small garage and a Pentium 1, he now leads a small army of proficient designers and developers to produce premium digital identities. He started Billbooks.com in 2010 and has users across 130 countries and is voted as the no. 1 cloud invoicing app on the TopTens. Adores and plays Tennis. Into single malts. His 3 yr. old daughter Sara keeps him busy when he is offline.
It has been proven that better UI/UX will help you get more customers and potentially give you an edge over your competitors. However, building better interfaces and great user experience that engages and simplifies user actions can be a big challenge.
With ever growing innovation in technology, not to mention hundreds of identical web and mobile products in the market, better interfaces and usability set each other apart. “Simple and less” will always conquer “complex and more”. In my experience, building a better user experience with simplicity in mind is not exactly rocket science. In fact it is probably easier than you think. All you need to do is try and perceive the users’ actions. Think like your customer. In this article I will try to list down 5 best tips to make your web or mobile application more convenient and likeable.
1. Less text with icons
This is applicable for headers, buttons, descriptions, alerts, notifications and any other messages, which you want users to read first. Less text will in turn result in having to scroll less. This makes for high readability for the user. Also, the use of simplistic, one or two color icons is a great way to capture users’ attention. However. make sure they are not too big, detailed or color heavy.
It is certainly not very easy to perfectly communicate with your customer using fewer words, but it’s not impossible either. If you update your content 10 times, maybe you have a solution. Think more, revise and then think again.
2. Wireframe with a Vision.
Always create wireframes with a vision that will help user save clicks and improve convenience. Make use of actual data, buttons, alerts, validation errors, loading messages and anything which you can foresee in the production environment. Create a wireframe that can be actually used as a functional prototype.
Sample wireframe of a registration form:
Points to Observe:
- Use of actual fields and lingo required at the production stage
- Final Errors messages
- Concise fields to shorten registration time
- Links and color variations wherever applicable
- Sample data in text fields
Final result with UI:
3. Use of keyboard
This is especially for Web applications. When we designed Billbooks, we thought of introducing keyboard shortcuts to quickly access invoices, estimates, items and expenses, which are used most frequently by users. It was a great success. Using a keyboard is always faster to select, type, enter, save or delete. Your Wireframe should always anticipate the use of keyboard. The following example will give you a clear idea of how and where to use keyboard actions more appropriately.
A popular online examination application asked me to redesign the way admin staff in colleges and universities enter data. Their current system was extremely time consuming and cumbersome. They first had to select a course, then a subject, and then sections inside the subject to modify them. Each time they wanted to add a record, they had to click 7 times along with 2 page refreshes.
Current Working with “Traditional Thinking”
We brainstormed and created a wireframe which saved hours of data entry and looked beautiful too.
Here was the result.
Points to observe in the wireframe:
- No scroll, one screen fits all.
- Easy real time search for Courses, Subjects and Sections.
- Using keyboard to add data continuously without involvement of mouse. The moment the user types in “Add course text box” and presses enter on keyboard, the data is smoothly added above and the cursor is highlighted back to text box for adding the next entry.
- Click to load (on clicking the course, not only the related subject column is displayed but the course name also becomes editable, below the column)
- By default, the status of course and subject is active. This reduces clicks.
- Multiselect is only provided for the sections as required by the client.
Final result after UI
4. Use input and filter options wisely
The best web or mobile application is one wherein inputting of data is most convenient. Adding, Sorting, Editing and Filtering data based on multiple parameters is quite a challenge in complex screens. While creating a wireframe of a complex screen, always remember to stay simple.
Tips to stay simple:
A. Save previous user action
While entering data, try to use the previous chosen option by default, wherever applicable. This will prevent the user from reentering the same data again.
B. Prioritize information
It is not advisable to display everything at once. Divide your data into Primary and Secondary. Push all secondary data behind small links that are easily accessible. Primary data that is displayed should be short and to the point as well.
C. Use Ajax/pop up lightboxes
Using small pop ups for modifying or viewing small chunks of content is extremely convenient for a user. This helps user to stick to just one page for minor updates in content. However, there is limitation for use of Ajax. It is not advisable to processes large data on pop ups.
D. Friendly tooltips
Using tool tips that are short and sweet is really helpful. Try to use as many as tool tips across your application as possible. Remember that not all users may be as savvy as you are.
Here’s a wireframe I created for the same online examination app to create question papers.
Points to observe in the Wireframe:
- Use of multiple checkboxes (type of questions) for filtering list
- Question count per type (easy, medium)
- Tab for creating question papers automatically (reduces additional page)
- “More” link to view details of the question (preventing too much content at once)
- Keeping the entire page, scroll less
- Use of simple tooltips on label roll overs
5. Keeping the language clean and simple
This is probably the most important factor in building a user-friendly app. Once the developer has integrated the design, it is important for a final check of labels, alert messages, errors, notifications, system emailers, tool tips and any other content (big or small) which is used in the entire application. Giving friendly error messages like “Seems you’ve forgotten your password. Would you like to try again?” gives a more pleasant experience and also helps users stick to the application a little longer.
Samples of friendly Labels and Error messages:
- Oops! You entered a special character by mistake.
- Congrats on taking the right decision. You will not regret! (after a sign up)
- You must agree to our terms even though you haven’t read it. Its important!
- I am “App name”, and you? (label for first name)
- Good morning, James. How are you today? (message after login)
Following some really basic guidelines, you can certainly improve usability, even in your existing application. You’ll soon notice a boost in traffic.
