Windows 8 UI Mistakes – Khan Academy
As big name Windows 8 apps start to roll out, I notice that some developers are making some mistakes with the established UX guidelines. Recently, the Khan Academy released their app to the Windows Store. This app does a good job of differentiating itself visually, but there are a few UI interaction quirks that I want to chat about.
As a developer, I am hyper-aware of the fact that 100% of the users cannot be satisfied 100% of the time. I have no doubt that some of the quibbles I have are intentional and some are possibly design and engineering trade-offs However, these issues alter the way I’m used to apps behaving in Windows 8 and don’t offer any benefit to a changed interaction model.
The Khan Academy is an online video learning site with a lot of great content. This app is available on the iPad, so I was glad to see it get a swift release on Windows 8. However, it was immediately clear to me that the designers did not completely understand the Windows 8 design language.
The content we see when the app loads is a colorful display with two visible sections: “Learn” and “New and Noteworthy”. I’m a bit of a neophile, so the first thing I did was touch the section heading “New and Noteworthy”. And nothing happened.
I tapped it a few more times but it was pointless. I assumed that by touching it I would see a new screen with an expanded list of what’s new. Nope. What you see on this main screen is what you get.
In the Navigation Design portion of the Windows 8 UX Design Guidelines, two primary methods of navigation are presented: hierarchical and flat. As far as I can tell, this app uses a hierarchical navigation system and thus should follow the “hub, section, detail” model. Instead, it uses something completely different.
Next I decided to see what videos they had on math so, naturally, I clicked on the wonderful looking tile labeled “Math”. Again, I anticipated that I would see a new screen that listed math subject videos with image thumbnails just like in the “New and Noteworthy” section. Instead, this is what I saw:
It’s a vertical scrolling ListView. All text, no photos to entice me to click on one. There’s a number next to each video, but I had no idea what that number meant (it turned out to be a count of the videos under that subject).
This visual element is the wrong one. It’s something I would possibly expect in a “Snap” view and, in fact, when you snap the app, that’s the view you get. But when an app is in full screen mode, the scrolling should be horizontal, not vertical unless there’s a really good reason such as a master/detail view. I’m not sure there is a compelling reason to do a vertical scrolling section here. To me, it looks like they took inspiration from the Xbox Music app when in fact their inspiration should have come from the Xbox Video app. And in fact, I would prefer the Xbox Music app use a horizontal scroller as well.
App bar duplication
One final oddity is the app bar. Swiping up displays an app bar with two global commands: search and settings. This makes the app bar completely unnecessary because search and settings are always available from the charms bar on the right. In fact, clicking on either the search or settings commands in the app bar opens up the appropriate panel in the charms bar.
To me, this feels like the developers haven’t really used Windows 8 or perhaps haven’t used it on a touch device. Windows 8 users will learn over time that the search and settings are always available from every app in the charms bar. The app bar in this app adds nothing to the experience.
Let’s Make it a Series
It’s not my intent to be negative towards other app developers with these critiques. Instead, it’s my hope that by using real life examples, we can all improve our app design and get the little things right in order to create a spectacular experience for our users. I’m working on my own Windows 8 apps and no doubt these notes will be great to reference when refining my own apps. I certainly don’t want all apps to look the same. But if an app has an element that is rather common, I want that element to work as expected.
What do you think? Any apps you’ve seen some mistakes in? Let me know in the comments.