Pearson System of Courses, Windows 8 Edition
Pearson, the world's leading learning company, needed a Windows 8 tablet version of their award winning digital textbook.
This is an exercise in adapting iOS design patterns to a Windows 8 interface, with several improvements along the way.
|
My Role
UX Lead
Deliverables
Wires, Mockups
Precedent vs. The Windows 8 Experience
Our initial dilemma: "Should the app echo the already established iOS version, or should Windows 8 standards take precedence?"
Here are some of our considerations:
Match iOS App
- Existing iOS users will be able to use immediately, with no tutorials.
- Seamless switching back and forth between platforms, e.g., if a user has an iOS device at school and a Windows device at home, there will be little adjustment.
Use Win 8 Standards & Interactions
- Existing Win8 users are already familiar with Win8 interactions. and navigation (swiping margins, etc.)
- Win8 design elements are more familiar than the Pearson app's design elements (circled icons indicating buttons, for instance)
The Verdict?
We made a compromise: the architecture and navigation must function like that of the iOS app. Users should be able to know where to find tools and menus, irrespective of the platform. But we attempted to use Win8 visual design as much as possible when not in conflict.
And we used Windows 8 interactions where they could be duplicative, and not in conflict
Navigation Bar
The iOS navigation bar:
There was a menu button, which opened up a menu. Secondly, was a back button, displayed when the previous page wasn't accessible by the menu. Then on the right, we had buttons that were displayed based on context.
For Win8, we felt the navigation bar should be like an old friend, familiar and predictable. So we emulated the iOS version:
But we felt that the design of the buttons could reflect the Win8 standard.
Accessing the Menu
The iOS menu slides in from the left after tapping the menu button on the upper left.
The problem: Win8 menus are normally accessed by swiping the top or bottom margin, after which they are displayed at the top and bottom of the viewport.
We decided that we could do both in Win8: we still had a menu button, but we could also swipe to access the menu as well.
What was changed though, was that we kept the Windows 8 style app bar for our menu system, as opposed to the side bar. We felt that it would be more in keeping with the Win8 style, pleasing Microsoft, who was partly funding the app, while still not confusing our iOS users.
An Important Dilemma: The Back Button
If you're familiar with Windows 8, you know that the back arrow is often standard in many of its apps. It's a major part of navigating Windows 8. But, considering the iOS app didn't have a back arrow in this form, should the Win8 app have it?
To us, this was a big deal, because for Win8 users, the back button becomes second nature in navigation.
Our solution was to use the Win8 back button, but duplicate it, by also implementing the 'Back to Unit' button in the nav header which matches the iOS app. It was a little duplicative, but we feel we achieved the best of both worlds.
iOS header with 'Back to Unit' button displayed
Win8 Header with 'Back to Unit' button and Windows back arrow
The Results
The Pearson System of Courses for Grades 2-12 was received very favorably by the client and is now available in Windows App Store.
Teacher Dashboard (Home Screen)
Class Assessment Report
Reporting - Student Response
Michael Blaser
User Experience
mike@mikeblaser.com