Log in to like this post! Be fast and fluid - Microsoft Design Style Series Part 4 Brent Schooley / Thursday, September 20, 2012 In the previous post in the series, we went through the first of 5 principles that guide successful Windows Store application design. Today I would like to talk about the second principle: Be fast and fluid. If there is any one Microsoft design principle that you are more likely to have heard than any of the others, it's probably this one. It has been so widely used that drinking games were created during BUILD 2011 surrounding the use of this phrase. A bingo card for a Microsoft event about Windows 8 or Windows Phone bingo would not be complete without "fast and fluid" as the center square. We have heard it a lot of times, but have we really gotten an understanding of what it means? Hopefully, after reading this post you will join the ranks of people who know what "be fast and fluid" really means and can apply this concept to your applications. What is "fast" and "fluid"? The 'fast' part of "Be fast and fluid" refers to being responsive to user input. When the user interacts with your application should quickly respond to the input and be prepared to receive more input immediately. Think of 'fast' as quick response time. The 'fluid' part refers to the way in which your application responds to user interaction. Screen and content transitions should have subtle animations that tie the entire experience together. If 'fast' is how quickly you respond to user interaction, 'fluid' is responding in a way that visually ties one portion of the experience to the next. The 3 key things related to "Be fast and fluid" that we'll take a look at are: Design for touch Delight with motion Be responsive and ready Design for touch Microsoft has stated that Windows 8 will run on any machine that currently runs Windows 7. That's a lot of traditional desktops and laptops with a keyboard and mouse interface. However, Windows 8 has been designed as a touch-first experience and device manufacturers will be pushing a whole line of new machines that range from tablets to touchscreen laptops (both convertible and fixed screen) to touchscreen monitors for traditional machines and many others. Within a few years it may be difficult to find new machines that don't include a touchscreen interface of some sort. This means that it is imperative for our applications to be designed for touch. I don't mean that we'll just design for keyboard and mouse and then figure out how to enable touch interaction. This is not a good way to do touch design. In fact, the best way to approach this is to do touch-first design. Touch-first design requires you to think about laying out your application such that it will be easy to use in a touch interface taking into account things like ergonomics and touch target size. It would be very easy for everybody to make their own assumptions regarding ergonomics based on personal preference and minimal observation. Thankfully, Microsoft conducted a lot of research on this topic. Look at the following image: On the left hand side is a piece of paper the size of a landscape tablet. The person being studied was asked to paint in purple the areas of the screen they could easily reach and then in pink the areas they could still reach but it required more effort. After running this test many times and then buying a database of hand sizes, Microsoft put together the heat map you see on the right. Green is easy to reach, yellow requires some effort, and red requires almost a repositioning of the hand. This study dictated a lot of the layout decisions made in the design of Windows 8 (for instance, the content region starts at the upper edge of the green area). As is covered in great detail here, Microsoft has put together an extensive touch language for Windows 8. Some concepts like tap to perform a primary action are familiar. Others like swipe to select and pinch for semantic zoom will take some getting used to. Familiarize yourself with these concepts before doing any Windows 8 design. I will have more to say about designing for touch later in the series. The good news is that if you design for touch, you get mouse and pen interaction for free in Windows 8. More details on that later as well. Delight with motion We've all used software that didn't have much personality. You tap or click something and in a flash (or perhaps a long stare at an unchanging screen) new information pops on the screen. It's a very jarring experience. Not only is it jarring, it misses an opportunity to convey information flow through animation. Animations play a fundamental role in application design for Windows 8. Animations will help you turn potentially boring interactions into fun interactions that are alive with activity. Perhaps the most important reason to add subtle animations to your application, though, goes back to the platform consistency we discussed in the previous post. Animations are part of the experience on Windows 8 and any application that lacks them completely will stick out in a bad way. Now, that's not to say you should just add animations all over your application in an effort to be fancy. That's not the goal here. Every animation in your application should serve a specific purpose. The interesting thing is, at one point or another every element in your application should animate at least once. This is due to to default entrance and exit transitions for pages that you will definitely want to take advantage of for platform cohesiveness. If you need to add other animations to your application, you'll want to follow the animation guidelines Microsoft has put together. Speaking of those animation guidelines, Microsoft didn't just provide animation guidance in the form of "use this type of animation with these timings for this type of thing". Instead, the pre-configured most of the animations you will ever need into an Animation Library (JavaScript and XAML) that you can use in your application. Just about every animation you will need is in the library and you can tweak the timings if needed for your exact scenario. There's really no excuse to not use these since they've made it so easy. Be responsive and ready This last point is short and sweet because it is the culmination of the previous two points when they are done successfully. If you have have designed an interface that responds well to touch and processes information in a manner that allows the user to continue interacting, you are responsive and ready. It is very important for the user to always feel like they are in control so you will always want to provide proper feedback to user interaction. The application should never hang or appear blocked by something going on in the background. If an action is going to take a while, use the built-in ProgressRing or ProgressBar to indicate to the user that everything is still okay. Give them an option to cancel something that may take a really long time. Making sure you application is always responsive and ready will ensure that your application is fast and fluid. Wrap-up and a look ahead In this post I introduced the second of five Microsoft design principles. I provided a brief definition of what 'fast' and 'fluid' mean in the context of Windows 8 app design and showed some concepts we need to apply in our apps to ensure they embody this principle. In the next post I'll move on to the third (and most controversial!) principle : authentically digital. If you have any questions or comments, please feel free to comment below, find me on Twitter @brentschooley, or contact at bschooley@infragistics.com.