Monday, 18 August 2014

Read This: Designer's Guide to DPI


Sebastien Gabriel from Google's UX team has written a comprehensive article about designing for different screen densities.

This article is worth reading if you're a designer and worth sharing to your designers if you're a developer. This post will help designers (even without Android understanding) to understand how to create assets supporting different screen densities.

Read the full article here:
http://sebastien-gabriel.com/designers-guide-to-dpi/home

Monday, 11 August 2014

Read this: androiduiux.com - Crafting the Unclouded Experience

Taylor Ling has written yet another post that is absolutely worth your time. In the latest post Taylor describes the process behind crafting the user experience for the Unclouded app.


Read the full post here:
http://androiduiux.com/2014/08/12/crafting-the-unclouded-experience/

Revisiting Yahoo! Apps


Yahoo! have been busy building Android apps some of which are among the most beautiful apps on the platform. When the first of the new generation apps, Yahoo Weather, launched there was controversy about some of the UX decisions made in the otherwise gorgeous apps. I wrote about them here and even Matias Duarte chimed in to the discussion.

A lot has changed since the initial launch in the Weather app and we've also seen some new apps that are worth noting. So, I wanted to revisit the Weather app and take a look at another Yahoo app while we're at it.

Now, before we continue I want to add a disclaimer here. These apps are great. I'd rate all of them with either 4 or 5 stars on Google Play. That doesn't mean that there's nothing to improve with them. These apps provide us an opportunity to critically evaluate apps that function very well and supporting the user in their goals (unlike some other apps out there) as well as look great for most parts.

Hence, a fair warning, there will be some nitpicking ahead. Again!

Yahoo Weather


Google Play Link

I heavily criticised Yahoo Weather for breaking some of the core Android design guidelines. The two core problems I had with the app was the implementation of the navigation drawer and use of iOS icons in the app.

I'm happy to say that both of the big issues have been fixed. The navigation drawer now slides on top of the content indicating its correct place in the information hierarchy. The iOS icons from the drawer are also now gone and replaced with Android's icons where applicable.


The navigation drawer still has some issues but none of them are deal breaking anymore. The app now behaves and looks like an Android user would expect. I would still like to see the other Yahoo app links removed from the drawer but I bet that is a business driven decision that can really be influenced.

Other point I'd like to raise is some of the links under the Tools category. Navigation drawer is intended for app navigation and 3 out of the 4 items under tools are actions instead of navigation. However, this is a really minor point on my book and as there's no obvious solution to where to position these actions there's not much we can criticise here.


There's also few minor issues that are no longer an issue although Yahoo hasn't really fixed them in their app:

The app still hides the status bar. New Android versions now allow users to swipe down and bring the status bar back to visible whenever they want so at least on those Android versions this is not an issue anymore.

Another one was the non-standard navigation drawer icon. It looks like Google is moving towards this type of icons in their new design style so this one isn't an issue anymore either.

Information Hierarchy

The app doesn't use Action Bar at all (which is perfectly fine, don't need a pattern - don't use it). But doing so there's some unexpected implications that might seem to be very small but which I'd consider problems worth attending to.

User can move between different cities by swiping. The transition is beautifully crafted and using it is an absolute delight. But there's a problem. The navigation drawer icon as well as the plus icon move together with the city screen.

What's the problem with this, I hear you say. - Let me explain.

We, as humans, are very good at classifying information in a hierarchical way. We can keep large sets of information in our memory as long as we understand how these pieces relate to each others. When using any app users are building a mental model of the app's information.

In this case these two icons are physically attached to the city (they move with it). The implication to user is that these two buttons are part of that screen and therefore act on the information on that screen. This is not what the buttons do. The navigation menu is naturally higher level than an individual screen as well as the "add new city" button.

I doubt that this really causes serious usability issues in this very simple app but I still think it would be worth fixing. It is worth trying to encourage users to form the correct mental model of your app whenever possible!


Scalability

For some reason both of the apps we're looking at today are locked to portrait. The apps also do not scale up nicely to larger screens.

Portrait locking is a real issue especially on larger devices. I don't really understand why this was done.
The app works fine on larger screen devices (as long as you hold them portrait). But it doesn't really scale, it just stretches.

On the app's main screen this isn't a big issue as the image is the main component ant showing an image full screen is always a nice way to ensure optimal use of any screen real estate.



When you scroll down the issue becomes more serious. The app is still gorgeous on larger screens but it wastes a lot of space. All components are significantly stretched and the information density becomes very small.


I believe this is a result of Photoshop-driven-design (based purely on a guess, I have no actual information about Yahoo's design processes). Scalability and screen sizes were probably not discussed when this app was designed.

As I said above, the app does work on larger screens but it could be a lot better! This issue is something that prevents me from recommending this app as one of the best designed apps on Android. The app certainly is one of the most beautiful apps out there but Android apps have to be scalable! If the scalability is solved the portrait locking could simply be removed as well.

Yahoo News Digest


Google Play link

Yahoo News Digest is the second of the new Yahoo apps that gained reasonable amount of attention when it launched and for a good reason. It is beautiful and highly functional. It also has laser focus on providing the right information to the users.

 

Delightful Details and Polish

Not only is the app beautiful and comfortable to use but it also delights users with small details like the read article indicator which doesn't really add huge value to the users but creates an interesting game-like aspect to reading news articles.

The level of polish is very apparent throughout the app. Even the error screen is nicely designed.

Reinventing the Wheel, the Right Way

In many of my previous posts I have complained about app developers trying to reinvent the wheel, ie. replacing standard components with fully custom ones. This app does the same. It replaces the standard Android sharing dialog as well as uses a fully custom settings screen. In this case the result justifies the approach.

The app still uses Android's intents to share news articles but the UI has been replaced with a pop-up that perfectly matches the app's style. It also gives a bit more information to the user compared to the default Android share dialog.

One interesting thing to note on the sharing dialog is the way Yahoo promotes it's own services in the share dialog. I don't have either the Yahoo Mail or Tumblr installed on my phone. Selecting these options will direct me to the Play Store to download the corresponding app. I find this to be a nice and innovative approach to marketing.

I'm also fan of the settings screen. It's clean implementation and style matching the rest of the app justifies ditching the default components. It even comes with a hidden easter egg (tap the color circles on top to start a mini game).

I want to reiterate my point here. Use the default Android components unless you have a good reason not to. In this case there's a good reason for both. The sharing dialog has added functionality (and marketing) and the settings screens matches the app's style much better than the stock settings display would. 

Scalability
Scaling to larger screens seems to be a big issue in Yahoo's apps. This app is locked to portrait and also simply stretches on larger screens.

The way the top icons stretch on larger screens is especially striking. The large stretched icons feel really out of place on a Nexus 7 screen. Our fingers don't change size when we use larger devices so neither should the touch controls.


As with the weather app the content stretches on larger screens instead of utilising the added screen real estate fully. Take a look how the same screen looks like on a 7" screen and on a 5" screen.
The content is beautifully laid out on both cases but the 7" experience is far from perfect. On larger screens this app could, for example, pull some of the rich graphical components of the news stories to the list page to make it more lively. The content and the design is so rich that there's certainly many things that the app could use the additional space for.

Summary

Yahoo has stepped up as one of the top developers on Google Play. New apps they create are beautiful and extremely useful. The two apps I mentioned in this post are gorgeous but both of them suffer from lack of good scalability to larger screens.

The Weather app has gotten rid of the gaping issues it had on the launch and now feels very much like an Android app. Therefore we're now focusing on much finer details than before. Yahoo now has a possibility to truly push the boundaries of Android design. Their apps are already great and even delightful. I'm expecting to see great things coming from the Yahoo's Android team in the future!

Tuesday, 5 August 2014

Watch This: Material design in the 2014 Google I/O app

Material design is something that I have not had time to write about yet (but believe when I say that I will!).

Fortunately there's no shortage of others talking about it. Today, Google's Android Developers blog released a great post about the process they used to build the Google IO app for this year's conference.

As the IO app is available as open source it is probably the best example to look at (we can find out how everything is implemented). Take a look at the YouTube video by Roman Nurik as well as the actual article explaining their design decisions.

On Importance of Supporting User Goals, an Example

If you have seen any of my conference presentations you are aware that I keep raving about understanding and supporting user goals in your app design. Supporting users on what they actually want to get done is more important than visual design or even following design guidelines. By that I mean that no matter how great visual polish the app has or great design pattern it uses the app will fail if it doesn't help users achieve their goals.


When designing an app you rely on previous layers and build on top of them. The bottom layer that everything is based is the understanding of users and what they actually want to do with your app. Without this everything else will crumble.

Failing in User Goal support

I've been using an app that completely fails to understand very some basic user goals and I wanted to use it as a negative example of what kind of problems can be caused to your design when the design is feature focused instead of user goal focused. Later in this post I'll look into other issues in the app but they're not nearly as important to understand as the very first ones.

The app I'm going to be focusing is called Watchever. It is a German equivalent to the Netflix streaming service. It allows subscribers to stream any movies and series from their selection without additional cost.

Unfortunately, the app is disastrous. Not only is it buggy, ugly and fails with pretty much all Android guidelines but it is also built (at least partially) from very feature driven point of view. Let me explain.

The app's landing screen / home screen is divided into sections. The sections make various amount of sense but let's take a look at one of them. The third section after a featured graphic and "My Bookmarks" is "Already Watched".

A fair question arises when looking at this. Why is this here? What user goals this supports?

You can probably think of some that could be reasonable and even high enough priority to justify this section on the front page:
  • I started to watch a movie but didn't complete it. Now I want to continue where I left it.
  • I've been watching this series and I want to watch the next episode of it.
Unfortunately the app developers have not really been thinking about these user goals, or at least have not thought them through. The actual reason for this section being here is a mystery to me.

Here is why the section design is unlikely result of any real user goals but instead a feature added without further thinking:

The app does not show only movies I've not completed. It shows everything I've actually watched. There's also no way for me to know if I've completed the movie, when I did it and how many times I've watched the movie. All of which are important personal information the app should know and show me to support me in my decision making. The movie detail page is empty of any my personal information (other than my rating).


But what about the series use case?

I'm afraid the app doesn't fare any better with it. When opening a series page there's no information about any of my watching history. I have no idea which episode was the last one I watched. A small consolation is that if I hit the "Play" button the app will actually continue from where I left off in this season of the series. But why isn't this information visible to me? Series are also divided into individual seasons so you have to remember which season you were on or you'll not be able to continue from where you left.

Unfortunately, these are not the only places where the app fails to deliver the content in the right way to the user. It is littered with designs that were not well thought or incomplete. To me it looks like the team lacked the right processes to create end-user facing UI.

Issues like these create frustrating user experience. Users either have to remember things the app could remember for them or force users to find usage patterns that are out of the ordinary and unnecessarily complex.
Remember: your app should not contain a single feature that is not derived from a user goal! Every single component, screen and animation should help users to reach the goal they want to achieve with your app!

Android design guideline failures

This app requires some serious rethinking to fix its UI. It is also littered with issues of lower level UI design mistakes and some Android-specific problems.

Tabs do not work this way

The way the app uses tabs (its core navigation) is just plain wrong. This might be due to the heavy influence of iOS in the app design but that's a poor excuse.

Tabs should be used on navigation on the top level. When diving into detail pages the tab bar should not be there anymore. Keep your app's navigation simple and one directional. Separating detail pages from main pages will help your users understand your app's content hierarchy. 

Nitpicking

I've been accused of nitpicking a lot in the past. In fact, so much so, that I've decided to give a talk about why detail matter in UX in the upcoming Droidcon UK. These are things that force unnecessary cognitive load to users or force them to stop to think where no thinking would not be required.

Mixed terminology

The app's main audience is German so it might very well be that the English translation is not given as high priority as the German counterpart but mixing terminology when it comes action and action labels is a very bad practice.

Is it an offline-mode or travel mode?

In fact, there's no difference. They should be called the same. The difference in labeling forces users to pause and think "what's the difference". It doesn't seem like much and users will likely understand it but why add this burden to them? Let them concentrate to the actual task in hand.

The actual app content naming is also inconsistent. The same episode of the same series have (at least) two different formats for naming. While most users will most likely understand that these labels refer to the same episode why do this? Make sure you refer with the same label to the same content everywhere in your app.

Ha! Gotya!

One of my pet peeves is actions offered to users that are not actually available. The app allows users to download content for offline viewing (travel mode). There's a limit of two concurrent downloads. While the limit itself is fine it should be indicated better.

If I already have two downloads in progress and try to start third I get a pop-up on my download pop-up (ugh!).

This one would be very easy to fix. Just make sure that the download buttons are disabled when user cannot add new videos to the download process or even better, keep the rest of the videos marked for download in local queue and start the download automatically once the server allows it. That's what user indicates that he or she wants (user goals again!).


Search, I don't even..

The action bar search in this app is something that really baffles me. The app's fake Action Bar has a search button. Tapping it brings up Android's contextual Action Bar and search. It works pretty nicely but exiting the search isn't that simple. Pressing back to dismiss the keyboard and then the search will bring you to another search view and pops up the keyboard again. This time you're in the fake Action Bar search.

How did this got through to the release?



Moving responsibility to users

The app's travel mode could be one of the features that push competitive advantage to them over many competitors. Many of the competing services do not allow me to watch movies on the plane or elsewhere without internet connection.

Unfortunately, the implementation in this case falls flat. For some reason the app moves responsibility of moving between offline and online modes to the user. Users have to manually trigger switching the modes.

When switching to the travels mode the user is even greeted with two consecutive pop-ups. I hate pop-ups!




I can't wrap my head around why this is done the way it is. Android platform provides developers tools to detect internet connection availability and the app can react to this automatically.

A great example of handing the very same use case is Google Music. Simply use the same interface offline and online but indicate the users what is available to them (and allow users to filter the views). Even better would be to adopt the pinning pattern used throughout Google apps to allow users to download content offline.


Summary

The Watchever app gives us an example of an app that will require a lot of work to fix. It is barely usable in its current form and the company is sure to lose a lot of its customers to any emerging competition.

Fixing the app would require foundation work and better understanding of users and user goals. Fixing smaller issues in the app would likely result into marginally better user experience while still failing to create acceptable app.

Often, when I review apps on this blog minor fixes could elevate the apps to decent standards but this app is demonstrating the dangers of not building proper foundations. Understand your users' goals before you start building your app features! Think how your users will use your app. Support them in their goals and make sure your understanding has been correct (usability testing on prototypes).


In my case the unusable Android app lead to this (account terminated):


It doesn't look like other users are happy either:


Sunday, 2 February 2014

Samsung Delivers a Pile of Failure in Their Olympic App


Onboarding experience

What Samsung has done with their first-time experience is stunning. To me this is by far the worst what I've seen. I'd be very interested to see analytics from their system about user dropoff rate in the first couple of screens.

It is worth remembering that the your app's user experience starts from the Play Store. Be careful not to leave in permissions that not actually needed in your app. Why does this app need to disable my lock screen? Scary.

Once you get the surprisingly large 30MB app installed to your device you're ready to embark to to most remarkable journey to try to get to the actual content.

When you first launch the app you're greeted with a popup reminding you that when you use data it might cost you. If that wasn't stupid enough look at the options provided to you in the popup. "Do not remind" and "OK". I wonder if they mean "Do not remind me again" or "Damnit! Don't remind me. I don't want to know!". If I select OK does it mean that they keep reminding me that my data might not be free every time I open the app? Ridiculous. I bet this was put here by Samsung's legal department.

Once you figure out which one of these ridiculous buttons you want to press you'll see a gift from the Samsungs software engineering department. A splash screen with a loading indicator. I refuse to believe that they don't have any content or app structure to show without "Updating data: DB". But hey, at least we get to see the debug messages showing which data it is loading.


When the "Updating data: DB" is ready you're certainly going to see some content and be able to figure out if you want to use the app or not. Well.. not so fast.

First you need to tell the app which Language you'd like to use. I don't know in which usage scenario this makes any sense but I'm certain that Samsung's engineering team must have a great UML chart explaining why this is needed.

User already selected the language when they setup their phone. Apps never have to ask language form users. Never! Worth noting, by the way, the app's language selection doesn't even default to your phone's language setting. It always defaults to English.

Once you figure out which language you'd like to use you're presented the feared T&C screen that every legal department on the planet loves so dearly. Fortunately Samsung hasn't even tested reading their legal text as when you open one the screen's scrolling mechanism breaks. But that's not a big loss. Nobody ever reads T&C anyways.


But surely we are now done. Right? Well.. No.

We now need to tell the app which country we like. While it could probably at least guess the country where I'm in right now (it uses location permissions) it chooses to default to the language setting of your phone (you know, the one they could  have used for the language selection). But then again, personalised data in the app based on my favourite country, athlete and sport. That's great!

I think a better way to do this would be to default to your country and your country's most popular sport and let the user easily change them but I can't really blame Samsung going this route. That is if they'd done the actual selection screens well. I know that Samsung has been a big fan of Apple for a long time but I'd still keep Apple's search screens out of Android.



Now that you've found your country and other info needed you're set to go, right? Must be... Nope.

This one is so bad that it made me laugh when I saw it. "Need to update spp client" Go google market! Go!

Firstly, some level of spelling checking would probably make sense. I'm not a native English speaker either and I bet that I have more than my fair share of broken English on this site but I'm not a multi-billion dollar corporation. Secondly, what the hell is "spp client"? Am I supposed to know that?

At least pressing the "OK" takes me to the Google Play Store to install some more Samsung crap to my phone. Go google market, go!


Once you install the additional Samsung push services you'll finally be able to use the app.

Rest of the app

Unfortunately, rest of the app follows pretty much the same path as the onboarding experience. It is riddled with very bad design decisions and poor implementation. It sometimes uses action bar items to navigate between screens, tabs are never swipeable and some screens are locked to portrait while others are locked to landscape. 

Christophe Versieux compiled a list of usability issues found in the app (I left out the points I already mentioned above):
  • Still an iOS 2D launcher icon, square with rounded border, not following the slight 3D and silhouette pattern we are used to an Android
  • iOS 7 design (icons, colors)
  • Ads at the bottom that lead to Samsung US website 
  • Use right-pointing carets on line items
  • ActionBar looks bigger, separators are ugly and even displayed when only one item
  • Non scrollable tabs
  • Settings screen (sounds obvious)
  • On the Map they even used the iOS pin!
  • Toast when trying to exit the app
  • Navigation drawer is the sliding menu


You can find the app from Google Play for free at: https://play.google.com/store/apps/details?id=com.samsung.sochiwow.minfo.ex

Wednesday, 15 January 2014

Awesome Android Design - slides by Nick Butcher

Nick Butcher from Google gave a presentation on "Awesome Android Design" in the GDG Sydney meetup. While the presentation itself unfortunately isn't available online the presentation slides are. This slide deck is packed full of important information from beginner to experienced Android designers and developers!

Get the slides from here.