Pride in craftsmanship - Microsoft Design Style Series Part 3

In Part 1 of the Microsoft Design Style Series, What is Microsoft Design Style?, I listed the five principles of the Microsoft design style and mentioned that later in the series I would go into them in detail.  I promised you that they are not just marketing terms but actually things you need to pay attention to and embrace in your applications.  Today's entry into the series kicks off the discussion about the principles with the first one: show pride in craftsmanship.  This is all about doing good work that you can be proud of.  I think we'd all like to be proud of the applications we create so let's dig into what can make us more successful at that in terms of Windows 8 application development.

What is craftsmanship?

We can't really talk about taking pride in our craftsmanship without a good working definition of what that really means.  Merriam-Webster defines the word 'craftsman' as "one who creates or performs with skill or dexterity".  Often, we associate this work with physical trades like carpentry.  We can definitely treat software as a craft though.  As a craftsman, you begin your life as an apprentice and are constantly honing your skills in an effort to become an expert.  It takes a lot of practice.  It also requires you to take the knowledge you have gained from past experiences and apply them to future efforts.  An expert craftsman will make every effort to choose the right tool for the right job.  Ultimately, it all comes down to taking pride in your work.

Craftsmanship and Windows 8

So, we know that we need to take pride in our work.  However, there are some specific concepts we need to pay attention to when dealing with Windows 8 that will help solidify this concept even more.  These are:

• Sweat the details
• Make it safe and reliable
• Align to the grid

Let's dive into these one at a time.

Sweat the details

Take a look at a variety of applications for previous versions of Windows.  Try to summarize the consistent design elements you find looking across that assortment of random applications.  There's a strong chance that the applications will be very different from one application to the next.  Windows has not traditionally been a platform where strong design guidance was strictly adhered so and every detail of an application's design was painstakingly scrutinized.  In fact, on some earlier technologies for building applications for Windows, such as Windows Forms, it was very difficult to pull off sophisticated application design.  We got lulled into a state of complacency where design wasn't as important because when the designer said "make it look and behave like this" we just simply sat back and laughed.  It's not really our faults completely though.  We simply weren't given strong enough guidance and we certainly weren't given the tools we needed to make this happen.  This all changes with Windows 8, the Metro design language, and the developer tools we've been given for this new platform.

It's time to care about the details.  Not just care about them, but truly sweat about them.  Microsoft has provided us very strong design guidelines for Windows Store applications.  These guidelines are there to ensure a higher level of platform consistency.  For instance, a page header should be 120px from the left edge and the baseline of the same title should be 100px down from the top.  As you move from app to app on Windows 8, pay attention to the location of the page titles.  They're always in the same place.  If you were to not pay attention to even this one detail, your application would stick out like a sore thumb.  Users are going to become comfortable with the cohesiveness of the platform and if you don't sweat every detail in your app design, users may not find your application very appealing and they may not even realize why.  Microsoft has done a great job of providing us guidelines to follow and thankfully a great set of tools within which it is easier to get the details right.

Make it safe and reliable

Go back in your mind to the random assortment of legacy Windows applications.  In each of those applications, think about where you would go in that application to change the "Settings".  I put "Settings" in quotes because in any given application this simple concept could be known as "Settings", "Options", "Configuration", and many other things.  We can't even center around a single term for that.  Now, where is it located?  Is it under the Tools menu?  Maybe the Edit menu or the View menu?  What happens when you click on it?  Are you presented with a modal or non-modal dialog box?  Maybe the whole screen changes to a Settings screen (yes, I've seen that…yes, it was annoying).  The point is, it's not consistent.  From application to application, users never know what's going to happen when they go to change the settings.  This is not a desirable situation.  We can do much better for our users and thankfully Windows 8 provides us with the tools to do it.

The design guidelines for Windows 8 call out specific locations in an application where things like Search, Setting, and application commands should go.  I will be discussing these things in more detail later in the Microsoft Design Style Series, but the point here is that it is very important to make sure you are putting things in their proper place within your app.  Your ultimate goal is platform consistency.  Users are going to expect to see Search under the Search charm and Settings under the Settings charm.  If you try to do things differently in your app, you risk confusing your users.  A confused user will not be a user of your app for very long.  It is wonderful that Microsoft has provided us such great platform guidance.  Take advantage of it and make sure your app fits in.

Align to the grid

I'm going to be talking about this in great detail later in the series so I am not going to drill into it too much here.  For now, just know that there is a well-defined typographic grid in Windows 8 that informs where elements should be placed within your design.  The templates that come with Visual Studio and Expression Blend have all of their elements already aligned to this grid.  Please do yourself a favor and start from one of these templates.  For more info on the grid, read "Laying out an app page".

Wrap-up and a look ahead

In this post I introduced the first of five Microsoft design principles.  I provided a general introduction to the concept of craftsmanship and showed how we can take this concept to our Windows 8 work.  In the next post I'll move on to the second principle: be fast and fluid.

If you have any questions or comments, please feel free to comment below or find me on Twitter @brentschooley.  You can also email me at bschooley@infragistics.com.