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.
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.
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.
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.
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!
No comments:
Post a Comment