Module 02 - Think Mobile

Added on by Victoria Moore.

Last year when designing my app, I was focused solely on the variety of features that I could offer Kurabu users:

01: Have access to series, movies, music and books
02: Make playlists and add favorites
03: Leave reviews and ratings
04: Communicate with fellow fans
05: Share news to your personal page
06: Watch anime together
07: Create fangroups and communities
08: Track what you've watched and set up queues
09: Mentor new fans / Be mentored
10: Earn rewards and collect achievements

I focused so hard on these elements that I stopped thinking about how they would appear to users and how users would actually react to them. I didn't ask the question: If I were encountering this for the first time, would I be able to complete these tasks.

While the results of my user testing were good, I found my users hesitating in certain areas, especially ones were elements weren't specifically labelled.

Knowing that, the first step for me is identifying what makes good user interface design? What elements when combined correctly will create a pleasant and easy user experience?

According to Semantic Studios, the following graphic illustrates the elements of successful user-experience design:

Click the image to be taken to the full article.

Peter Morville explains the above graphic as follows:

Here’s how I explain each facet or quality of the user experience:

◘ Useful. As practitioners, we can’t be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our knowledge of craft + medium to define innovative solutions that are more useful.

◘ Usable. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.

◘ Desirable. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.

◘ Findable. We must strive to design navigable web sites and locatable objects, so users can find what they need.

◘ Accessible. Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). Today, it’s good business and the ethical thing to do. Eventually, it will become the law.

◘ Credible. Thanks to the Web Credibility Project, we’re beginning to understand the design elements that influence whether users trust and believe what we tell them.

◘ Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction.
— Peter Morville

So keeping these elements in mind, the next step was to identify how one gets from an idea to a final polished product. Semantic Studios has a delightful article on their development and creative process and also has an article worth reading, however the below graphic by Jesse James Garrett breaks the process down even further by identify which problems are solved in which phase.

Click to be taken to JJG's website.

The User Need: Many streaming service with lacking catalogs of anime.
The Objective: A streaming service with a comprehensive catalog of anime related media.
Functional Specs: See list above.
Interaction Design: How is the user going to accomplish the specified functions?
Information Design: How is the user going to understand what they're seeing?
Interface Design: How is the user going to interact with the application?
Visual Design: How can all of the above be made aesthetically pleasing?

So how does all of this pertain to a streaming service? Well lets look at a couple examples.

Directive 01: Have a database of series, music and publications available to the user. What mobile clients deliver the best experience in their fields? Hulu, Nook and Spotify are not only some of the best services in their fields, but also some of the best applications. All offer intuitive controls, are feature rich and have easily navigable interfaces.

Hulu Interface

Nook Interface

Spotify Interface

Directive 02: The ability to save and favorites your favorite shows. Looking at Hulu again, the controls are simply. Simply click the Plus Icon to add the series, and then click the settings gear and hit remove when you want to take the series off your list. However, looking at Pinterest, what if you could make your own playlists with different titles?

Hulu - Favoriting

Pinterest - Favoriting

Directive 03: Leave Reviews and Ratings. For reviews and ratings, you don't need to look any further the The largest online retailer in the world, product popularity can be affected drastically by the amount of positive and/or negative reviews on Design wise, Amazon improves on their desktop site by giving their tablet version a cleaner, more slimmed down feeling. Amazon mobile has all the personality of, but has gone to Weight Watchers and shaved off some unnecessary clutter. - Review and Rating System

Directive 04: Communicate with fellow fans. There will be two types of communication available to users: Instant communication and Messaging. For instant text communication there's Line, a messaging system that works using your phone number and allows you to send stickers and chats as well as play games with your various contacts. For video/audio communication there's Skype. Skype is an old standard, however over the years it's managed to stay ahead of the curve and keep competing with other heavy hitters like Facetime. Lastly is messaging. Two great clients are gmail and Outlook, however since Outlook is feature rich and geared for business, I've opted for the simpler Gmail interface.

Line - Instant Messaging

Skype - Video and Audio Messaging

Gmail - Email/Private Messaging

Directive 05: Share news to your personal page. For sharing media, Facebook has been and remains King of the Hill. However despite this, Facebook's tablet interface comes off a bit gawky and over-sized.

Facebook - Sharing Content

Directive 06: Watch anime together. Group watching and texting might seem like an odd thing to do, however even on the internet we crave social connections. Products like Adobe Connect with it's sleek appearance variety of features would make it easy to add viewers chatrooms, creating a 24-hour, digital theater.

Adobe Connect - Group Chatting & Viewing

Directive 07: Create fangroups and communities. Again, when it comes to creating groups and communities, Facebook reigns supreme. While Twitter could be considered a close second, Facebook's versatility when it comes to making private, limited or public groups puts it ahead.

Facebook - Groups & Communities

Directive 08: Track what you've watched and set up queues. In a similar vein to favoriting series and making custom lists, with anime being as vast a category as it is, the ability to mark of series that you've completed, dropped or intend to watch would be a huge asset, and luckily there's an app for that. Anime Trakr. Not the prettiest of apps, however it does exactly what it needs to do and lets you manage your series, even down to the season.

Anime Trakr - Anime Organizer and Planner

Directive 09: Mentor new fans / Be mentored. This was hard to find an example of since there are no systems like this currently implemented in any of the other streaming services. However, after thinking about it, there are apps that use your likes and dislikes to connect with other people. You guessed it: Dating Apps. The one I chose was EHarmony which boasts an extremely detailed match finder (on that note: I've had no luck with it!) and a playful, warm design aesthetic.

eHarmony - Matching Systems

Directive 10: Earn rewards and collect achievements. Crunchyroll is the only application that has an achievement system, however this system isn't available on mobile, only on desktop. One of the most fun features of Kurabu, this system will allow members to get achievements, earn rewards, win prizes and even get their achievements mailed to them in the form of collectible button pins.

Crunchyroll - Achievements

Now that I've laid out my directives, the next step is to identify what all these sites have in common. What makes them look good, what makes them popular, what makes one more pleasant to use then the other?

Apple sheds some light on techniques and elements that they feel make for great apps in the article below:

Apple's Dos and Don'ts for great looking apps.

On a final note, what I've learned is that in no other area of design is the user experience so critical then in digital design. In digital design the user doesn't simply observe the design, they interact with it, so it has to be user friendly.