Studying for Microsoft - Exam 74-353: Windows UX Design - Part 1 (Principles of Windows Design)

Acording to the exam description, this section is split into two sections;

  • Describe the Windows 8 design language
  • Select a “Great At” statement, user flows and features.

So let's get started!

Describe the Windows 8 design language

Microsoft uses the concept of "Modern design" (formerly known as the Metro design language until Microsoft got into legal trouble over the name Metro), which Windows 8 (and 8.1) is an example of. Other examples of Microsofts modern design are Windows Phone and Xbox One.

Modern design is based in the "Modern Design Movement" and The Bauhaus which is all about making function beautiful and to strip away superfluous design elements which are just there for decoration.
In relation to computers and UIs is often recognizable by its "flat design" and the absence chrome and of things that are made to mimic real-world objects (so-called skeuomorphism)

Underlying to the modern design, are five fundamental design principles

Pride in craftsmanship

Pride in craftsmanship according to Microsoft means:

Engineer the experience to be complete, thorough, and polished at every stage. Devote time and energy to small things that are seen often by many of your users.

And that you should:

  • Sweat the details.
  • Make using apps safe and reliable.
  • Use balance, symmetry, and hierarchy.
  • Align your app layout to the grid, the new layout for apps.
  • Make your app accessible to the widest possible audience, including people who have impairments or disabilities.

My view on "Pride in craftsmanship":

Personally, I think the word craftsmanship pretty much says it's all. And I think you can draw many parallels to the software craftsmanship movement. It's about doing a good job and not taking the easy shortcuts and making it "good enough".

So basically pay attention to details, be it design or be it code, make sure things are properly aligned and make sure the user isn't presented with ugly technical error messages if there's an error.

Fast and Fluid

Fast and Fluid according to Microsoft means:

Let people interact directly with content. Respond to actions quickly with matching energy. Bring life to the experience by creating a sense of continuity and telling a story through the meaningful use of motion.

And that you should:

  • Be responsive to user interaction and ready for the next interaction.
  • Design for touch and direct interaction.
  • Delight your users with motion.
  • Smoothly connect to what comes before and after.

My view on "Fast and fluid":

Basically, use animations and the like when appropriate BUT make sure the UI is always responsive, and I don't mean that in a "responsive web design" way but rather, that care should be taken to never lock the UI thread and to pay extra attention to the UI responsiveness when the user interacts with something. As soon there's a lag/delay in the UI responding to the user, the user experience will dramatically decrease.

Another important thing in the fast and fluid category is "Smoothly connect to what comes before and after", don't make the user go in and out of hierarchical navigation structures but instead let one action naturally follow another. For example, if the user is reading an article, don't make them go back out to the list to read the next article. Instead maybe provide ways to get to the next article in the same category straight from the end of the article they just read.

Authentically digital

Authentically digital according to Microsoft means:

Exemplify the capabilities of hardware and software. Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality. Being authentically digital means embracing the fact that apps are pixels on a screen. It means designing with colors and images that go beyond the limits of the real world.

And that you should:

  • Be dynamic and alive with communication.
  • Use typography beautifully.
  • Use bold, vibrant colors.
  • Connect to the cloud so that your users can stay connected to each other.

My view on "Authentically digital":

Don't limit yourself trying to mimic some real-world item or concept, in a digital world we as designers and developers have the power to do almost anything we put our mind to.
However, of course as always with power comes responsibility, even if we CAN do anything doesn't necessarily mean we should!

We should still take fundamental principles into consideration, like having consistency in elements and design across pages/sections and making sure the user has a clear way of navigating our app.

Do more with less

Do more with less according to Microsoft means:

You can do more with less by reducing your design to its essence. Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content.

And that you should;

  • Be great at something instead of mediocre at lots of things.
  • Put content before chrome.
  • Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest.
  • Inspire confidence in users.
  • Reduce redundancy in your UI.

My view on "Do more with less": This is at the heart of modern design, as mentioned earlier, it's all about making function beautiful! Try and reduce the clutter and always look for ways of simplifying things. Let the content take a leading role, use high-quality images and let them take space. The same with text, focus on good copy and how to make the reading experience as good and immersive as possible.

Win as one

Win as one according to Microsoft means:

Work with other apps, devices, and the system to complete scenarios for people. For example, let people get content from one app and share it with another. Take advantage of what people already know, like standard touch gestures and charms, to provide a sense of familiarity, control, and confidence.

And that you should:

  • Use the UI model.
  • Work with other apps to complete scenarios by participating in app contracts.
  • Use our tools and templates to promote consistency.

My view on "Win as one":

Basically, if there's already a tool for something, don't build your own. If the system has a PDF viewer installed, let that program handle PDF files, if you're linking to a web page, don't open it in some internal web view, let the system configured default browser handle it.

Likewise, unless there's a very good reason for it, don't make up your own navigation and interaction patterns. For example, since 90% of all other Windows 8 apps out there has their back button up in the left corner area, you should strongly consider putting yours around there as well so that the user straight away know where it is and doesn't have to hunt around for it.

Select a “Great At” statement, user flows and features

As with many things, building a great app will be much easier if you do some planning before diving in and start coding.

Create a great at statement

To focus your efforts and avoid scope creep and the like, one of the first things you should do is to decide what your app is great at. The "Great at" statement is basically as vision/mission statement for your app and if you have a good "great at statement", it will be the base for your efforts and something that will help you focus when things start getting out of hand.

The process of really working out what your app should be great at goes through a process of several steps:

  1. Start with a brainstorming session around all the ideas you have for your app.
  2. The second step is to step back and look at the bigger picture, see if there are any ideas the especially stand out.
  3. Strip out things that might not feel so great. The really successful apps are usually relatively small and rather than doing everything half-half, they do the things they do very well.
  4. Try and think of how you would describe your app to someone who's never seen or heard of it. Work on this until you have it down to a single sentence. Once you have that sentence, that is your "Great at" statement.

This statement will now be your guiding star through the development process if you ever think, should I include this extra feature, look to your "great at" statement, does the feature support your statement? If not leave it out, if yes maybe you should look closer at including it.

Flow

According to Microsoft the flow is:

A flow is a set of related interactions that your users have with your app to achieve their goals. Every flow should be tightly tied to your "great at statement", and should help users achieve that single scenario that you want to light up. Great apps have flows that are easy to learn and that require the fewest interactions.

Basically, what should the user be able to do and what is the easiest and most intuitive way to do it?

Things that might help you come up with the flows of your app, include:

  • Thinking through the step needed
  • Create a wireframe/storyboard for the flow
  • Prototype the flow, prototyping doesn't have to be complicated, even something as simple as a set of cards with the UI drawn onto them, can be a useful tool trying out the flow on friends and family.

Selecting features

In this case, when Microsoft is talking about features it's mainly related to tying your flows in with functionality in windows. As part of this step, it is strongly recommended to study the UX guidelines to see how the flows you have decided on can be supported by the underlying system. For example, can you make use of the different charms in Windows 8, does it make sense to include semantic zoom, which type of tiles do you want to support, is there information that makes sense to put on live tiles? etc. etc.