NOTEBOOK HEAVY

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.

Khan Academy

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.

Section Titles

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.

Vertical Scrollers

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.

Comments

  1. Laurent Bugnion

    Interesting. I don’t think it is totally fair to speak about mistakes, after all the design guidelines are suggestions, not rules. In the case of the search button, while I agree that there is a duplication, I don’t think it is bad to have a button that will open the Search pane. For apps where the search is a major feature, it is actually helpful to the users. We had that discussion many times with clients who feel that Search is too hidden, and i tend to agree with them.

    Anyway, I salute the spirit of the post :)
    Cheers
    Laurent

    Reply
  2. thenonhacker

    More articles like this, please!

    You can’t imagine the number of apps that duplicate the charms bar functionality. For example, watch out for WinRT apps that has a Print Button — a giveaway that the devs didn’t read the UX guidelines. (To print something, users open the charms bar, taps device, and taps the printer device)

    Reply
  3. Philip Colmer

    I like the idea of trying to get consistency in the UX so thanks for this article.

    I’m not sure I agree with your point about the section titles, though. I don’t *always* expect a section title to be tappable. It is my understanding that if the section title is going to be tappable, then you add “>” after the text. Curiously, the Store App is inconsistent here in that the Spotlight section *doesn’t* have the > (so I don’t expect tapping it to do anything) but you *can* tap on it … and it takes you to the major spotlight app. Not my expectation.

    The Music App, by comparison, does behave as I expect. The “now playing” title does *not* have the > and tapping it does nothing. The other section titles *do* have > after them.

    Philip

    Reply
  4. David Iffland Post author

    I do think that the print functionality is a tad undiscoverable. Whereas the search and settings charms say exactly what they are, print is hidden under “devices”. So a user won’t see “print” anywhere. Once you know it’s there, it’s obvious.

    Philip: I guess I expect the group title to be an interactive element regardless of if there’s a “>” or not. As you say, the windows apps themselves are inconsistent. I tend to lean on the side of not having the “>’ as the “>” is essentially chrome, not content. It’s a cue to the user that there’s something there, which I think makes it outlier in a world without explicit cues (though plenty of implicit cues). I’ve found no explicit guideline regarding the title text. Regardless of its styling, I do hope that most developers make their group titles selectable and provide a better insight into their content.

    Reply
  5. Brent Schooley

    Laurent, I would have to respectfully disagree (with *much* respect, mind you :-) ). Duplicating the Charm functionality is actually a pretty big departure from “embracing the Windows 8 personality” and a savvy app reviewer can actually reject you for it. I understand the request coming from clients about discoverability but, honestly, doing stuff like this only makes things worse. One of the great things about the Charms functionality is that it gives us one consistent place to put common functionality so that people don’t slap Search and Settings buttons all over the place. If anything, the onus is on Microsoft to do a better job of communicating these things to users from the beginning. Putting buttons on the app bar like this in your app is a bit like giving a user a set of crutches that only work while they’re walking inside of your office. Once they get out of that bubble they’ll go looking for those crutches again but they won’t be there. I think it would be much better to use the great infrastructure and guidance we’ve been given for this platform and work with it, not against it.

    Reply
  6. Marc

    The biggest problem is not that the UI guidelines are not respected but that this major touch application does not work out of the box on Windows 8 touchscreens.

    I went to a Microsoft store and tried KhanAcademy on all the touchscreens available. For instance, I tried the number line exercises on the new Dell XPS 27 Touchscreen with Windows 8. I touched the screen to move the orange dot in the Number Line exercise. Instead of moving the orange dot, my finger moved the whole page.

    Are there any touch settings in Windows 8 that prevent drag actions to not flip pages?

    Reply

Reply

Your email address will not be published.