Introducing the concept of “Consistency of Experience”

By Paul Laberge October, 04 2012

This post is Part 1 of a larger series that dives into the concept of Consistency of Experience.  Through this series I will explain what Consistency of Experience is defined as (which is this post), building great app experiences on the Windows platform ecosystem (including Windows 8, Windows Phone and the web) and how to drive these apps to successful adoption by your users.  By the end of this series, you will have a firm understanding of why it is important to implement your apps in a modular or patterned way to leverage similar or same code bases across platforms and also to differentiate to platform-specific functionality by addressing each platform with a UI that is catered to the right form factor.  For a list of the other posts which will be published over time, please visit the anchor post for this series.

(below) © Hugh MacLeod, http://gapingvoid.com, used under creative commons licensing

Premise

The cartoon to the left, by Hugh MacLeod (of Gaping Void fame) is one of my favourites.  The words are simple but the statement is profound.  Regardless of whether you are building enterprise or consumer-focused apps, the message is equally relevant. The user (i.e.:  your customer, whether a paying one or not) has an expectation of how your app will interact with him/her.  If those expectations are not met, then they go elsewhere. 

Another way I like to put it:  your app may be awesome and provide exactly the functionality that was defined in the specifications, but if the interaction with the user is a point of failure, then your work has been wasted.  Your user comes first.  Always.  The way you make your user come first is focus on how the user can be most productive (or delighted, even) by interacting with your app.

But what if your solution requires implementation on multiple platforms?  Or even more to the point, maybe the technical platforms are relatively similar but the form factor (i.e.: screen) is not?  For example, what if your solution was to be implemented as a Windows Store app (for Windows 8) as well as a Windows Phone app?  The two “platforms” I mentioned share a lot of similarities on a technical, branding and UI metaphor level, but yet they cater to distinct screens (Windows 8 is all about the PC, Windows Phone is all about, well, phone).  How do you tackle this challenge?

The answer lies in the concept of Consistency of Experience.  So what is this idea?  It’s likely easiest to start defining it as the exact opposite of Consistency of User Interface.  If I am creating a app solution that spans the phone and the PC (and perhaps other mediums as well like a website or television), the wrong thing to do is copy and paste the UI across all those mediums.  It doesn’t make sense due to the differences in how your user interacts with those various form factors. 

It becomes even more pronounced when you use this as a lens across different platforms with very different styles.  A good example of this would be if you created an app on the iPhone as well as Windows Phone.  Does it make sense to use the same UI across both product types?  I’d argue that it’s absolutely the wrong way to do it.  The reason for this is that each platform has it’s own spirit and style.  If you put a Windows Phone UI on an iPhone app, you are clearly breaking a lot of the style rules for iOS that are there with good reason.  The same is true if you use an iOS UI on a Windows Phone app.  Simply put, the UI personalities across the two platforms are distinctly different.

What we can learn from this is that while it may be technically possible to share a common UI across multiple platforms, it usually doesn’t work and the resulting experience for the user is lacking.  But this still does not explain what a consistent experience across platforms actually is.  I would look at it this way:  every app (even if the same app is available across platforms) has its own personality.  This personality is present in all instances of the app across platforms but it really shines when the app designer has done a great job in understanding the spirit of each platform that app exists on and caters to that platform’s UI strengths.

In other words, the best apps that exist across platforms are those that maintain a familiarity to the user but use the UI for the platform in question to their advantage.  Focus on the experience and interaction you want to give to the user in the app and then implement that experience appropriately using the UI constructs of the platforms you are targeting.

“Focus on the experience and interaction you want to give the user in the app and then implement that experience appropriately using the UI constructs of the platforms you are targeting.”

How it works in Windows 8 and in Windows Phone

At first blush, you may be thinking that already Microsoft has broken the rule above in the way Windows 8 and Windows Phone have been implemented.  Both leverage the distinct Modern UI (Windows 8, Windows Phone) that was made popular a couple of years ago with the introduction of the new Phone platform.  What is interesting is that the premise that it’s the same UI is actually wrong.  Windows 8 and Windows Phone certainly share a common UI heritage, but in absolute terms they are different.  We believe firmly that the PC and the Phone are two distinct form factors and as such the experience across them should be distinct as well. 

Looking at the image below, you can actually see differences, however subtle.

Some of the components that are most evident (outside of the fact a typical Windows 8 screen will be larger than a Windows Phone screen):

  • Use of colour is different across Windows Phone and Windows 8 – Windows Phone makes more use of uniform theme colouring while as Windows 8 is more apt to implementing individual app tile colour
  • Spacing between tiles is slightly different
  • Fonts, while sharing the same Segoe type family are similar they are also using different styles within Segoe
  • Live tile data is formatted different across the platforms
  • Windows 8 provides information as to which user is logged in while Windows Phone does not

While you may not have thought about it, it appears even on a superficial level that the Windows Phone and Windows 8 platforms share a common heritage yet have distinct styles that deliberately cater best to the form factor of the device they are hosted in.

Diving deeper into apps and UIs for those apps, there are some significant differences as well.  Take, for example, the popular Pivot control within Windows Phone.  There is no equivalent within Windows 8.  The reason for this is that user interaction is different in Windows 8 compared to Windows Phone.  On Windows Phone, much of the touch interaction is done by swiping with your thumb.  The anatomy of the human hand is such that if you are holding an object in it, it is much easier to produce a swiping motion left and right compared to up and down.  That is why the left-right motif in Windows Phone is so well-used.  For Windows 8, users are interacting with the platform as a tablet, laptop or desktop – a fundamentally different interaction space compared to that of using a phone.  An example of control that is used by many Windows 8 apps catered to this type of interaction is the Grid control.  It shares some similarity with the Pivot control but clearly they interact with a user different.  Below is a sample of these generic (read: unpopulated) controls, again with Windows Phone on the left and Windows 8 on the right:

 

How it works in a real life example

You’ve now seen how Windows Phone and Windows 8 share a common spirit via UI heritage, yet they implement that UI differently in order to cater to the right sets of interaction a user can expect from the form factor.  As you can imagine (and really the point of this post), apps not only can share that same type of lesson but actually should.  One of the best examples of this is an app called Cocktail Flow.  Originally designed and published on Windows Phone, the success of the app drove the publishers to build the app for WIndows 8,  iOS (iPhone form factor) and Android (both tablet and phone form factors.  The team clearly understands the principle of maintaining a consistent experience across devices and platforms yet delivers UIs across those devices/platforms that are quite different in implementation.  The images below provide a good view of the concept:

Windows Phone and Windows 8

To the left you see the implementations of the original app on Windows Phone (top two screens) and then an example of the Windows 8 implementation (bottom screen).  You can see right away that the Cocktail Flow team has done a great job creating a clean UI for both platforms and that the two apps share a common personality.  The UIs are both Authentically Digital (which means they do not use skeuomorphs in their design), thereby adhering to the UI principles of the Modern UI “flavours” implemented in both Windows Phone and Windows 8.

With all that said, however, you can immediately tell that the two apps are distinctly different in the implementation of their UI.  There is enough in common with the two apps that a user that had used the app on one platform would immediately be able to identify the app on the second platform without too much trouble, yet the user interaction via the different UIs is catered to the device form factor each will deliver.

The two apps share the same personality yet have different UIs.  This is a great example of how the team built a consistent experience across the two similar, yet different platforms.

iOS (iPhone)

In the iOS (iPhone) implementation of the app, clearly the Cocktail Flow team has implemented a UI that fits in with the iPhone platform in a very nice way.  Given that iOS has tendencies to use skeuomorphism within its design (which works well for that platform), the designers on the team have leveraged that school of thought to deliver an experience that feels truly native to the platform.

Even though this implementation of the app in on the iOS platform and clearly has a very different UI and feel, you can still see how the app shares a common personality with the Windows Phone and Windows 8 apps that were shown above.  The app, while looking different, has maintained a consistency of experience across platforms that clearly have very different implementations.

Android (Phone and Tablet)

The last implementation for this app is the Android implementation.  Again, you can see that the team has a good understanding of the UI structure that best fits in an Android Phone and Android Tablet.  The UI they have built for the user to interact with the two types of apps is effective for the platform that has been targeted.  Like the iOS app, they have used skeuomorphism in a pleasant way; not too overbearing and providing a familiarity that fits nicely in the interaction model that Android users would expect.

From a consistency of experience standpoint, you can easily see how the overall personality of the app itself has not changed as a result of being implemented across Windows Phone, Windows 8, iOS (iPhone) and the phone and tablet platforms for Android.


Conclusion

With this post we have defined the concept of Consistency of Experience.  This concept is of extreme importance to developers and designers looking to port existing apps across platforms in a way that brings value and meaning to the users of the app.  We discussed why it doesn’t make sense to share a common UI across platforms as well as this will often go against the spirit of the platform that hosts the app.  Finally we went through examples (Windows Phone and Windows 8 as well as through a real-world app example in Cocktail Flow) that demonstrate how effective use of different UIs can deliver a great, yet consistent experience for your app and give it a true personality.


By Paul Laberge| October, 04 2012

Add A Comment

Comment

Allowed HTML: <b>, <i>, <u>

Comments

© 2013 Microsoft Corporation. All rights reserved.
This site is hosted for Microsoft by Agility