The LOB Chronicles Episode 10: UI Consistency

We have taken quite an adventure in chronicling the new Silverlight CRM demo and all the behind-the-scenes work that goes into making new demos for our site, but now we finally get to talk about the really fun stuff – UI. I know, I know, depending on what hat you are wearing at your company you may be thinking “Hey, I loved the previous posts on MEF (here and here) as well as what you were saying about the Repository Pattern, what’s all this UI business?” As it turns out, Telerik sells a wide range of UI components that are used to provide enhanced user experience as well as developer productivity. We actually sell a lot of them. :)

But more to the point, we’ve talked code, before that we discussed UX and what would make for a nice flow to our application via navigation patterns and empathy diagrams, but now we’ve got to combine all of this great work into a functional application. And when you think of an application that you use every day, say Outlook, do you really care if the developers used MEF, MVVM, if a Repository is being used, or if extensive UX work went into figuring out the flow of the application? If you’re a developer you might, but the other 99% of the world is going to look at an application first and only critique it if something goes wrong or doesn’t “feel” right. No crashes and a responsive application means the developers did well, an intelligent navigation path that maximizes productivity speaks well to UX, but without a UI tying it all together we’re just looking at DOS again. And while I love DOS (my first ever game was written using ZZT) we can do a bit better than that in 2011.

User Interface Consistency

An important aspect of any piece of software is providing a consistent layout. This is what enables users to move from one screen or view to the next and carry over some knowledge of how to operate the application, or even to move from one application to another on a new system and have an intrinsic understanding that in order to do X you must complete Y action. Take Windows Phone and now WinRT as an example, the Application Bar is a consistent user experience across both platforms that provides a menu-like experience, surfacing important commands that the user will need easy access to. Another example is the RibbonUI found in the Office line of products. At first, the RibbonUI seemed to be overly complex and offer too much to click on compared to a traditional menu structure, but over time the utility of having so many options just a quick click away, grouped into logical groupings under logical tab arrangements, indeed becomes clear. One step better, however, is that once you get familiar with the RibbonUI in one application that knowledge transfers over to others, so while Word and Excel have vastly different functionality, using the RibbonUI has become a more natural experience in both because it is consistent.

So does this mean that every application you design should include a RibbonUI to ensure people know how to utilize the menu system with ease? Well, you could, but that is slightly missing the point. The reason these consistent experiences matter is that the human brain recognizes and remembers both specific items as well as location, so when you place a certain icon in the lower left hand portion of your desktop your brain not only registers that there is a recycle bin icon but where it is relative to everything else on the screen. There’s actually a great post about this from the Windows 8 team in discussing the architecture of the new Start menu – open it up in a new tab and give it a read once you finish this article. Therefore, when designing software we need to take careful consideration into not only what functionality is required on our screens/views but also into how we are positioning elements for consistency and efficiency.

Crafting a UI with a Grid

What would a post like this be without some examples? Our designers are hard at work ensuring that all the good development work being done here will shine through to the UI, but one of the biggest challenges they face is how to properly organize everything. The answer to this is grid-based layouts to ensure everything flows and scales nicely within the application, not to mention the ability to add animations that create a smooth experience between various views. Here’s an example of the grid layout being used for the Company Overview view:

As well as the Company Contacts view:

Notice how everything is aligned to a specific layout? This will create a nice layout to design against as well as a nicer user experience when navigating through the application as things will align to the grid and not be disjointed from one view to the next.

To demonstrate this even better, here’s a look at the companies and contacts pages from the demo in their pre-grid and post-grid forms. Yes there have been some definite UI improvements in how data is displayed (I love our designers!), but notice as you go from the before to the after shots how much nicer the flow is between the two ‘afters’ than between the two ‘befores’:

Companies Before:

Companies After:

Contacts Before:

Contacts After:

Layout flows nicely, buttons in the UI are in consistent places to ensure that fast navigation as well as entry/editing are a seamless experience, and things just ‘line up’. Our brains especially like this last one whether you realize it or not, it’s the same reason that things like the 960 grid system are used by so many web designers today, as the careful alignment and arrangement of UI elements is key to making an application (or website) flow right for users.

Speaking of which – take a look at this download (in Blend, and assure FluidLayout and TransitionPreview are on!) and pop open this quick screencast to see this in action. You can see how when our designer moves between visual states the sections animate appropriately – which is awesome in its own regard – but now that we’re moving to this grid-based layout system you’ll find a similar animated experience throughout the application. Consistency. :)

Next Episode

Next time around we’re aiming to have another code drop to showcase some of the progress being made with this demo. We’re only a few short weeks away from the upcoming Q3 release, made even more special by this demo being released, so the pressure is on to get our UI together, our viewmodels refactored and working optimally, and to keep producing these posts to help keep you, our captivated audience, excited for what comes next!

Stay tuned!