- Posted by admin
- On February 4, 2016
- 0 Comments
- angry birds, app, best, design, development, elements, engagement, mobile, simplicity, tech, UI, usability, user, UX, viral, web, yahoo weather
Originally presented at the UX (User Experience) Best Practices and Design Considerations for Mobile Apps event on January 8th, 2016.
When it comes to good design for a mobile application, one must consider what common attributes are shared amongst large app companies such as Facebook and Instagram. Just as each human being is composed of the same chemical elements, every good application is contains the same user experience elements.
Si – Simplicity
The first element, Simplicity is all about minimizing the steps required for users to participate in an app.
Capturing and uploading a photo on the Facebook app requires four steps:
1) accessing camera roll, 2) using the camera, 3) previewing photo, and 4) adding a status to the photo. This seems to be a reasonable amount of steps, but the key to a simple user experience is to improve efficiency for all functions.
The Instagram app streamlines their photo upload process through a three step process: 1) capture photo, 2) preview/edit photo, and 3) information/sharing options. Instagram provides more options within each step by categorizing common functions into each screen.
This is achieved by organizing the gallery, photo, and video capture options as tabs on the first screen, the next screen addresses the looks of the photo (filters, photo preview, edit), and the final step concerns the information of the photo itself (tags, caption, share options), which empowers users to do a lot with their content without it seeming like a chore.
In movie apps such as Netflix, it is common to see a three thumbnail row layout to browse through their movie selection. Upon clicking on each thumbnail, a new page opens with options to watch the movie or to add it onto the user’s list.
Other apps such as Marquee Movies place an emphasis on simplicity by featuring a two thumbnail row layout, and utilizing the add to list feature without going to another screen.
On – Onboarding
The second element, Onboarding is driven by setting new users up for success before accessing the app’s content. This can be achieved in a variety of ways with the most common being a new user sign up form. Other methods for Onboarding include SMS verification, social media login, which can be used to connect the user’s account to phone contacts and social media friends who are also users of the newly downloaded app.
Having a starting set of friends can help secure user engagement by providing content for a fresh account rather than a blank feed upon first log in. Tutorial slides are usually shown in the login/sign up page or during the app’s first uses to demonstrate to new users how the app is used. This is also applied to mobile games with various tutorial slides that demonstrate how the game is played.
Fs – Focus
The next element, Focus bears a similar idea to the “less is more” mentality for the Simplicity element. However, Simplicity is more pertinent to the actual use of the app as opposed to Focus, which is concerned with the app’s identity itself. For example, Instagram chooses to focus their app to photo and video sharing as opposed to Facebook’s broad use of statuses and link sharing in addition to photos and videos.
A look into Facebook’s content types and interactions demonstrates high interaction towards rich media with photos and videos accounting for 57% of total content on Facebook, but accounts for 83% of total interactions on Facebook. By focusing their app identity towards these trends, Instagram has gained a huge following as being a primary source for photo and video content on social media.
En – Engagement
Engagement is one of the most important elements in user experience design. Keeping users engaged to an app requires the elimination of any dead ends. This means that content should never feel disrupted by being displayed page-by-page. Many successful apps have kept users engaged by featuring an infinite scrolling feed so users can keep viewing content as long as they want.
YouTube keeps their users engaged by displaying related content on every video that users watch. This leads many viewers down the rabbit hole, taking them through the depths of YouTube content they would not typically search. Someone may go to YouTube initially searching for Kobe Bryant highlight clips, and five related videos later, they end up watching videos about Lightsaber fighting styles. Marquee Movies uses a similar engagement style by suggesting similar movies or displaying related trailers.
Leaks occur when users exit out of the app to access another link or app. Marquee also does a good job of keeping leaks in the app to a minimum by accessing external links such as iTunes within the app. Facebook also likes to keep users in their app with every link and photo being accessed without exiting. When a user decides to call a restaurant that they’re viewing on the Yelp app, it requires exiting the Yelp to access the phone, which causes a disruption in user engagement.
A demo airline app made for Twilio keeps users engaged in the app when calling the airliner by displaying the user’s flight info on the same screen as the call. This creates a contained experience within the app that does not force users to leave the app, and therefore keeps them engaged.
Fl – Flow
Flow is a key element in user experience, for it is what makes good apps feel intuitive and natural to use.
This is achieved by following four steps with the first step focused on setting clear goals. Angry Birds, the #1 App of All Time achieves this by providing a clear visual instruction of each level’s objectives.
Step two is to provide immediate feedback, which is demonstrated by Angry Birds’ projected pathway to help players determine the correct angle and power to fire each bird.
The third step is to maximize efficiency, and this is achieved by Angry Birds’ option to restart the level during any point. This minimizes any time lost if the user is unsuccessful during the first bird launched, which would make the level a failure regardless of how many birds are left.
The final step is to allow for discovery, which Angry Birds utilizes in the form of unlockable levels to keep the user experience fresh.
Vr – Virality
Virality is the element that makes it easy for an app to be shared with other networks and people. The game Candy Crush is a good example of Virality because sharing appears as the most favorable choice among the other options provided.
When someone fails enough times in Candy Crush to run out of lives, it gives users an option to gain more lives by waiting and delaying their gratification, paying for extra lives, or to share with friends.
Farmville also places incentives on Virality by growing crops faster in exchange for inviting friends as “farmhands.”
Virality is certainly not limited to just games, for there are other apps such as Dropbox which provide users the option to gain more storage by sharing or referring friends.
Gm – Gamification
Another element is Gamification, which is the addition of gaming elements to an app. Duolingo is a stimulating app for users who are trying to learn a new language.
Gamification lets users gain experience points and customize their owl avatar as they progress through the application.
Other apps such as Headspace have also taken a game based approach to mindfulness and mental health in general, which helps soften the anxiety that may occur when pursuing mental health. Gamification in apps helps users associate content with achievable goals as opposed to consuming the content mindlessly.
De – Delight
The final element, Delight is achieved through providing an aesthetically pleasing experience for the user such as the beautiful backgrounds seen on Yahoo Weather or the larger thumbnails on Marquee Movies that lets users appreciate the movie art.
When clicking on thumbnails on Marquee, the thumbnail zooms to be the centerpiece in the next page as opposed to opening and loading a different page. As the user scrolls down the new page, the expanded image becomes blurred without being totally obscured, and this keeps the look and feel of the app consistent. When designing an app that will inspire Delight for the user, it is advised to stray away from carbon-copy app templates. Although templates can help provide a skeleton for an app, in order to make one stand out, one should not settle for defaults.
Find out more about the projects mentioned:
View the full presentation here: