10 Mobile app Design Principles

These guidelines will help in designing better mobile apps which will improve the overall user experience. Mobile is very powerful device and becoming as an important part of human life. So it is very important to design better, simple and interesting interfaces which helps people in their life and also bring satisfaction. some basic design principles are mentioned in the context of Mobile application.

1. Avoid designing long Menus in Mobile app

Long Mobile menus are the result of poor architecture and content grouping of application. It affects the ‘Decision Making’ of a User, also it destroys the importance of main function.  Group the functions properly and show the small menus with less no. of choices. 

2. Select the right navigation system for your application 

Navigation is the important aspect of any mobile app because User follows the navigation pattern and finds the information. There are 2 types of navigation system given as follows,

Primary Navigation types 

- Hierarchical (Drill Down)

- Persistent 

- Sequential

Secondary navigation types

- Search

- Index Pages

- Quick Links

- Bread Crumbs

- Embedded Links

3. Web to Mobile transformation should be responsive 

Mobile websites should be responsive to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.

Designing for Mobile Experience - Redefined

Designing work for Mobile devices is increasing day by day due to changing habits & behavior of human with respect to mobile phones & devices. This new and more work for designers giving a challenge i.e. giving better experience with their mobile solution. Goals for each design team are focus on preparing world class mobile solution & deliver better user experience. In this article I have tried to give light on a different angles on mobile phone usage which can affect overall user experience. All these points fall under Strategy, Research, Design & test, which are important part of UCD process. Before designing for mobile, let’s understand the usage pattern of mobile phones.

Pattern of usage

Understanding usage pattern is really important before designing any mobile solution because this affects majorly. Today people use mobile phones not only for talking & texting but for number of reasons. Checking status, notifications, chats, listening songs, playing games etc. while running on park, walking on roads, waiting at bus stops, sitting on toilet seat, standing inside lifts are common some scenarios now a days. Interaction with mobile phone is more complex than using a laptop or desktop in many sense especially ergonomically. People use mobile while sitting on cars, bus etc. where objects are shaking due to pot holes on roads. People use mobile in shopping mart while carrying shopping bag in one hand & using mobile in other.

Design for outdoors

It is really an important aspect for designing mobile solution i.e. Design for outdoors. Outdoors can be treated as environment where user uses mobile solution. Environment have different factors which can affect experience like sun light, background noise etc. 

Testing of design

Usability Testing & development testing should also be performed in mobile friendly environment (outside). Some important testing variations are given below,

Slow Network - Test mobile app in slow internet network or in network failure. Sometimes it happens when someone goes inside huge building or lift network get disconnected. If that user is in between some process then app should save user tasks & continue when network comes again.

Background sound – When your app is having audio notifications or voice based interactions, then one should test app audio based features in different background sounds.

Light conditions - Test your app color scheme in variety of lighting conditions (like in sun).

Color Blindness - Test your app color scheme for color blindness.

At last some final thoughts, mobile devices are becoming powerful in terms of technology & adoption so design solutions should also meet the expectations. Taking care of User’s behavior, task, technology along with mobile environment (environment meaning outdoor, lights, sound etc. factors) are really required for designing for better experience.

About Author

Abhishek Jain (@uxdabhi)

Push Notifications: Fulfilling needs or increasing irritation

Having smartphone is really a good for any person, having lots of mobile apps in that … wow amazing. My mobile apps are really my life saver, they helps me in day to day life. For my ticket booking, my bills, shopping, groceries, my social networks, my utility apps, my office or business work I have apps in my phone. But wait what is happening, my phone is ringing (beeps)/vibrating very frequently. What is this … Oh These are Push notifications. Some of my chat messenger, some of e-commerce offers, some of discount offers etc. Do I really need so much push notifications, No…!!! then why all apps are throwing my such rubbish offers. I am irritated now.

For business it is a nice way to reach their customers. It directly touches customers through mobile. Push notifications are type of notifications which comes to users directly on mobile, outside their app, which drags user and forces to go into mobile app.

Generally Push notifications are used for sending Chat, sending updates in social network, sending offers, sending recommendations etc. Wait list is not over yet companies are sending Push Notifications for OTPs, sending ads, sending birthday reminder, for reminding that you have not used our app in last 1 week, for updating mobile app etc.

A normal smart phone user has approximately 10-20 active mobile apps. Now days every mobile app has started sending Push notifications. Imagine 20 applications are sending 5 push notifications daily to user resulting 100 push notifications in a day. Let’s say for 1 notification user takes 4 seconds to process. Then He/she is spending 400 seconds in a day.  Means 200 mins/month and 40 hours /year.

Seriously 40 hours, can you imagine if  I could have included 'chat messenger app' in this rough calculation then it could have reached more than 400 hours per year. With the evolution of app based market, Flood of Push notifications has started to end users. Which is now started becoming an irritation for users. Flood of Push notifications is now started affecting complete user experience.

How it is affecting UX

Lots of push notifications leads to ignorance and irritation. Both of them are real danger for a successful business and a better user experience.

Ignorance: User can start ignoring Push notifications when it becomes very frequent. By which user may loss important information, which can affect complete use. Also ‘ignorance effect’ of push can reduce ‘Trust in your BRAND’ which can lead to loss in Business.

Irritation: Frequent push can also irritate user, which can result really bad. User may also uninstall your mobile app, in other words direct cut in customer relations and business.

If you take care for User they will take care for you

For better business a better UX is important and in case of Push notifications this is a deciding factor. Push notifications are really necessary for both ‘Business’ and ‘user’. So keeping this path clean, optimized and relevant is really necessary for both.

How to make Push effective

Only one way you can make your push effective, - “By sending only relevant” in other words, more relevant information in less push. Companies should always keep their Customers prime. Give an analysis on ‘set of Push notifications’ and categorize them in 3 categories

a. Really required for User

b. Really required for Business and user both

c. Required for Business

Now, minimize the count and frequency of Push notifications falling under category c.

User/customer should get feeling of ‘Delighted and Satisfaction’ through your service, which require ‘Push should be very Relevant’.

For UX designers, it is not a task you to design better Push Notification, but design a better communication medium between Business and Customer by keeping better User Experience in mind always.

About Author:

Abhishek Jain (User Experience Designer)

Are Sounds, Animations & Microinteractions enhancing the UX?

User Experience is an evolving field where there is always something new that would contribute to the improvement and enhancement of the experience. Some trends like Infinite Scrolling, Minimalism, Flat UI, Bold Typography have been revolutionary in UX. But there are some silent contributors and new arrivals for UX which are unnoticed by designers, developers and the users. One such silent contributor for UX are the Sounds, Motion Animations and Microinteractions. I have already mentioned about the microinteractions in my previous article too.

Details are not just details. They make the design!

You can check them here : UX Trends 2015

Sounds and Motion Animations are pretty straightforward terms.

So what are Micro-Interactions?

It is a product use case boiled down to a single moment, focused on a single task. It concentrates on only one task. Unlocking your smartphone is a microinteraction; so is the chiming sound that plays when you boot up Windows or OS X. But microinteractions aren't restricted to computers.

Video of iPhone Lock Screen - Swipe to Unlock highlight

These small, cute interactions go unnoticed most of the time in a product, but they add so much value and emotional value to the product! Though Microinteractions have been a participant of UX for past decades, they have not been conquered Enterprise software or Business applications. But it is high time for us to leverage the awesomeness of Microinteractions and Motion Animations into our Applications.

Some interesting examples of Microinteractions I can think of are,

iPhone Alarm - When you select "Repeat" option for Monday to Friday, it automatically shows "Weekdays". How many iPhone users have noticed this?

Password Hack Alert - A Website which features the time that will be taken to crack your password instead of showing how Strong/Weak it is.

Reading List - When you scroll through the article, a progress bar fills in the left pane!

Chrome Browser for Mobile - When you open too many browser tabs in Chrome, the number changes to Smiley!

Amazon Website - When you complete a transaction, Amazon thanks you in the browser tab title.

Twitter - It asks you to grab a Coffee or check out a random article on Wikipedia while they collect the data on your tweets.

I haven't noticed any of these Microinteractions! How will they add value to my experience?

Designer Dan Saffer says,

When microinteractions succeed, even invisibly, which is how most of them do - they make an emotional difference that’s greater than the sum of their tiny parts. 

The Waze navigation app : When you leave from work, get into your car, and launch Waze, it asks you, 'Are you going home?'. The software observes your routine way of doing things and makes smart suggestions. Even if they are invisible to your attention, they definitely contribute to the overall experience of using a software.

In the Wordpress when the user types an invalid username/password, the login box shakes like a head shake showing a message that your username/password is invalid. This is a very small interaction but causes a much bigger impact on the user engagement. Showing a long red colored text stating that your username or password is invalid, causes a negativity in user engagement.

Sounds

Sounds play a very vital role in user engagement, especially in Mobile applications. Selecting a suitable and apt sound for your app is the key to success. You cannot use a long irritating sound for a small action on the App.

Facebook Messenger App - Sending a Like in the chat

Other Examples of sounds are,

1. Facebook App Refresh – When you pull down to refresh
2. Whatsapp – When you click on Voice record option
3. SkullCandy - When you open their website
4. Xapo - Bitcoins
5. OneAdobe
6. TOI
7. Arsthanea
8. GetAce
9. London-Skyline

Sound engage and interest users to use your apps more frequently. They must be pleasing, short and very relevant for the particular action performed. Do not choose long, boring and irritating noises for frequently performed actions.

Motion Animations

Motion Designers are new positions that are created in creative tech firms recently which shows the importance of Motions and Animations in an application. Applications

One of my favorite animations that I came across recently is the Whatsapp's Voice Messaging feature. When the user slides to cancel the recorded voice note, the Mic icon flies and falls into a dustbin showing that the voice note is deleted.

Websites featuring Motions and Animations,

These websites have web animations that are used wisely and elegantly to engage users and convey their brand identities in the best possible ways.

Yelp Material Design Concept - A tiny animation can be seen while focusing on the search bar

Apple Watch Concept - Animations while opening the menu in a wearable

How can I leverage them in my business applications?

User Experience is a unified term across all disciplines. You cannot differentiate business apps to be professional and can compromise on UX standards. A login screen of your application can have an animation instead of negative red texts. If you intend to use red error text, you can use the words wisely which won't create a negative impact on user engagement.

Or if your business mails are sent to various time zoned persons, you could show a microinteraction as below.

These small atomic designs are going to contribute a larger part in your Application's UX and the Business goals. If microinteractions are delightful, humane, and effective, then their success accretes and trickles up into the broader user experience in general. Designers have to be very cautious and thoughtful in creating microinteractions for an Application as it is going to be the one and only task being performed.

Are Sounds, Animations & Microinteractions enhancing the UX?

Microinteractions are in existence from early 1800's starting from the On/Off switches and Push to Start buttons. Now they have taken a whole new level of existence in the digital era of Touch screens and Smart Devices. They are definitely contributing a very larger part in UX more than we could imagine. UX Designers, Motion Engineers Interaction Designers are have a bigger responsibility in designing these Microinteractions, Sound and Animations for the Applications which are going to decide the success of the entire application.

Great UI is always Invisible and so are the Microinteractions, Sounds and Animations!

Feel free to drop your comments and views on this article!

About Author

Prashanth Shanmugam 

What is Usability Testing

“Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on real users.” Lets understand it in simple language, “It is a way or method by which we test our product with real end users and find out problems, insights, inferences to improve our product design.”

Usability Testing is different from functionality testing. In functionality testing it is being tested-“That functionality is working or not properly”, but in Usability Testing we test that a real user is able to use it or not.

Objectives

• Validate how well the design worked
• Look for opportunities to improve the design
• Look for insights into user experience (UX)

The Purpose of Usability Testing is "Feedback"

• Feedback is fundamental to survival.
• Goal-Directed behavior depends on feedback.
• Dynamic systems use feedback to adapt.
• Usability Testing enables design improvements/corrections.

Usability Testing of  What?

Usability Testing can evaluate any dimension of a UI design.

Depending on the prototype’s phase and its needs, Usability Testing can evaluate:

Types of Usability Testing

Don’t wait until the end. Find usability problems throughout the

design process.

• Formative testing
  
  Formative Usability Testing happens at the start of the design phase, testing with paper-prototypes, wireframes, visual designs. Do this to discover insights and shape the design direction.

• Summative testing
  Summative Usability Testing happens with actual working prototypes. Do this to determine metrics (time on task, success rates), which you would then compare test results from improved versions against.

Why 'Early Prototype Testing' is required

Early prototypes of any application includes below mentioned things

• Paper prototypes
• Low fidelity wireframes
• Visual design

This graph represent the 'Resistance to change design' vs. 'Efforts invested'. When we move in application development cycle from 'Hand sketches' to 'wireframes' and so on, the efforts in iterating design gets increase. It is recommended to conduct Usability testing from early prototypes.

Evaluating Early Prototypes - Testing Methods

In the upcoming articles we will be looking each testing method in detail. 

How to conduct Heuristic Evaluation

A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles  (the "heuristics ").

It is really necessary for any Usability analyst/ UX designer to know proper way to conduct 'Heuristic Evaluation'. lets see the process step by step.

1. Understand Participants and Facilitators 

First step in conducting Heuristic Evaluation is finding 'Participants' who will be contributing actively in this process. Generally design team members/ domain experts / stakeholders becomes participants for H.E. Facilitator is the person who manages and conducts this process and prepares evaluation reports. (Recommended 'Participants' counts 3-5) 

Make sure all the Participants understand Heuristic Principles, if not brief them about Heuristic Principles.

2. Prepare use-cases 

For conducting H.E. prepare the use cases of primary features of application. Use cases should be real scenarios in which application is currently being used. You can conduct H.E. of any kind of application like, website, mobile website, mobile or tablet app etc. 

3. Prepare Participant's and Facilitator's sheet 

Now your task is to prepare Participant's sheet and Facilitator's sheet. Both the sheets are same but being used at different steps. Sheet includes below mentioned fields,

- Use cases

- Problem description

- Severity 

- Heuristic Principles affected

Ex. of a sheet is shown here,

Download the Heuristic Evaluation templates

4. Individual Evaluation 

Now ask your participant to use application on the basis of use cases mentioned in 'Participant's sheet' twice or tries. While using the application if they find any problem or finding then ask them to make a note. Also ask them to provide 'Severity' rating to each problem they found and associate with affected heuristic principles. 

Severity rating scale

1 - Cosmic or minor problem

2 - Moderate problem

3 - Major problem

4 - usability disaster  

Perform this step with all the participants individually.

5. Sit together and consolidate findings 

Once all the participants have evaluated application individually now we start the 'Group activity'.

Ask all the participants to tell their findings/problems with severity and discuss about it. This step will provide you unique problems and finalized severity.

Now you have problems, severity and heuristics principles which are affected.

Now next step is reporting and presenting the insights from this activity.

Usability of Error messages

While designing ‘Error’ messages or ‘Error’ page for website, mobile site or any application, we should always keep ‘Usability of Error messages’ in mind. Error can come from user or by system (back end) but our system should show error messages properly. Heuristic Principles are the source for getting inspiration for designing it. Some of the key tips mentioned below to make ‘Error’ messages helpful.

Tips for 'Error Message' Usability

1. Don’t use Technical jargon in Error messages

Heuristic Principles - Match between system and real world

Many websites or interfaces show ‘Error’ messages in technical terms like ‘Null object exception’, ‘Java Lang etc file is missing’ etc. First of all understand carefully that normal user is not able to comprehend it. Show the error messages in plain text and in simple language.

2. What Error is occurred?

Heuristic Principles - Visibility of system status
Always show the error upfront to user and written in plain language that user can understand.

3. Reason or cause for this error

Heuristic Principles - Visibility of system statusTell why this error has been occurred, if user has made any wrong action or error is coming from system back-end, show the reason.

4. What should a user do now?

Heuristic Principles - Help user diagnose and recover from error
If error has been occurred and you have told him/her the reason next step is to show what he/she can do now. Like contact admin or choose correct path or make correct entry or wait for some time.

5. Help or direction for further steps

Heuristic Principles - Help user diagnose and recover from error & Help and documentation
Provide complete information about user actions. If user has to contact to Admin then show the contact details about Admin, if user has to wait then show how much time, if user has to make correct entry in any form then help him by providing a dummy entry.6. Be polite and humble

Don’t forget, user is in trouble because some error has been occurred in his/her system. At this time tone of error messages should be polite and relaxing to user.

Showing error messages - 

Best example of presenting Error message  -