SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Mobile and Web UI/UX Tips to Retain Customers

August 14, 2014 by Spyre Studios

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:

Sign up

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:

Sign up final

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”

CourseSave

We brainstormed and created a wireframe which saved hours of data entry and looked beautiful too.

Here was the result.

Course wireframe

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

Course Manager

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.

Create question paper

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.

Filed Under: UX, Wireframing Tagged With: design tips, ui, ux

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022