Christopher Bennage : UX

Things I’d Like To Present

Christopher Bennage — Fri, 08 Jan 2010 11:32:00 GMT

In case you are not familiar with MIX, it is a conference from Microsoft focusing on the collaboration of design and development. Admittedly, the sessions tend to favor the developer, but there is always excellent design and UX content.

There was an open call for presentations this year and the community gets to choose which of the proposals will be selected. There are a number of excellent proposals and I encourage you to go check out the list and vote for the sessions that you are genuinely interested in. (Even if you won’t be attending, the sessions will be broadcast.)

Here are some sessions that I proposed for MIX10:

Cross Compiling Games for Silverlight & XNA

Our friend and Silverlight MVP, Bill Reiss, has created an incredible library that enables you to cross compile XNA games for Silverlight. The library is called SilverSprite and we feature it on Silver Arcade. (Wow, that’s a lot of ‘silvers’ in one paragraph.)

In this session, we’d write a simple game for XNA (discussing some of the basic of game dev along the way) and then port the game over to Silverlight.

This is an area where I wish I could spend more time. I love game development, but it’s always taking a back burner to other projects.
[vote for this]

LinqToSQL and EntityFramework Profilers: Case Study

If you aren’t already familiar with the UberProf suite of ORM profilers, you can read tales of the development on Ayende’s blog. Rob and I built the UI side of the application, and we learned a lot in the process. I’d like to do a talk were we discuss the challenges of the project, how we solved them, and what we did wrong.

Yes, NHProf will be included too. (I submitted a case study for it last year, and it didn’t get picked. I have to sneak it in).

A few interesting aspects:

we built this using MVVM, but well before Caliburn reached maturity.
the four separate apps (NHProf, EFProf, L2SProf, HProf) all use a single code base.
we’re about to port the project from WPF to Silverlight.

[vote for this]

Silver Arcade: Case Study

This is a presentation that Rob and I have made a couple of times. Most recently at the Orlando .NET Users Group. We walk through the actual code for Silver Arcade explaining the philosophy, design choices and mistakes we made along the way.

For MIX, we would focus more design and UX choices, such as the separation of the behaviors from the views. However, we like to have a lot of audience interaction and tend to follow where ever the questions led (especially those leading questions that Scott Densmore tends to ask).

Silver Arcade is also interesting because we deliberately used a number of newer hipper technologies; including Azure, ASP.NET MVC, jQuery, MEF, NHibernate and so on.
[vote for this]

Thanks!

Are Value Converters Evil?

Christopher Bennage — Thu, 01 Oct 2009 05:17:00 GMT

Justin Angel (who is undoubtedly a Silverlight Rock Star) decided to stir things up a bit on Twitter the other night.

I was compelled to echo Ward Bell’s response that value converters can play legitimate role in the UI. Justin asked me to defend my position; a reasonable request. Now, I know that I am in the minority for maintaining this position. Many heavy hitters in the WPF community think MVVM does away with value converters. (I am not going to talk about the other bits here, just value converters.)

בְּרֵאשִׁית

One of the early WPF examples that got my attention was a listbox that was styled to look like a map of the United States. What impressed me in this sample was the separation of Behavior from Feel. I’m using the word “feel” with a very specific meaning. We often talk about Look and Feel. I think Look is shallow and Feel is deep. You can change the look of a listbox by changing the colors, the borders, the thickness of the lines, the icon that activates the dropdown, and so on. However, even by changing all of those, it stills feels like a listbox. Now, once you’ve made that “listbox” into a map of a country you’ve done something deeper. You’ve changed the Feel. Pretty significantly too, I’d say.

But even with the radical feeling map-listbox, one thing you haven’t changed is the Behavior. The semantics of a listbox are still in effect. Show a list of items and allow one to be selected.

But alas, those primeval glories of WPF were drowned out in the drones of “where’s my datagrid?”.

Seeking Abstractions

Rob Eisenberg and I were early adopters of WPF. At the same time, we were also in the feverish rush of applying Design Patterns to everything. You know, that phase of adoption where you’ve learned how to hammer and everything’s a nail. Still, it was good for us. We were digging through Fowler’s and Gossman’s and Crevier’s blogs. These sources began to shape my conceptions of ViewModel (or Presentation Model or Your Mama Model), however I was still deeply influenced by my lingering notion about the separation of Behavior and Feel.

The result of this is that my idea of a ViewModel is a representation of the Behavior of the View. However, the ViewModel is agnostic about the Feel. This means I don’t build “formatting” and such into my ViewModel. I try to keep my ViewModels as “pure” and abstract as possible. This also means that I rarely take strong dependencies on WPF and Silverlight.

Why go to such extremes? What’s the benefit?

My Fantasy World

There’s a lot of talk about UX lately, and perhaps more fittinhly, Interaction Design (IxD). In reality, I fiind that there are few people are actually doing IxD. Although, I think that’s the audience that Expression Blend is targeted at (do you recall what Blend was originally named?). These chimerical Interaction Designers are the ones that would benefit the most from this proposed separation of Behavior and Feel.

Let’s imagine a we’re building a WPF application. Harkening back to that old, impressive sample of yesteryear, the behavior we need in our app is to “allow the user to select a state”. As a developer, we can create a ViewModel that embodies that behavior, we can test the ViewModel, and even build a simple, naive View (testing that the required bindings are present with Caliburn thank you). Then we can hand it over to an interaction designer. The designer can then radically alter the Feel without changing the Behavior. In fact, if we’re using something like Caliburn’s testability framework (not available in Silverlight unfortunately), these IxD peeps can exercise a great deal of liberty in establishing the most appropriate feel for the behavior.

Unfortunately, our typical approach to software development inhibits IxD’ers from working this way. The Feel is often deeply entangled in the presentation logic (or worse).

Context

I’m sure that a large majority of WPF developers might see these distinction as useless. Especially, when building Line Of Business applications. That’s okay. Not everyone needs to do this. Many projects don’t need the additional complexity that might be introduced by thinking in this way. However, I think this is an emerging field and UX/IxD will be increasingly important. Soon it will be the distinguishing factor in commercial software.

Wait, Wasn’t This About Value Converters

Yes, and here is how they fit in. Let’s take my current favorite example of formatting dates. We have a behavior that requires communicating some date/time information to the user. Applying my philosophy to our ViewModel, the developer should expose the raw data (an actual DateTime property) on the ViewModel and leave the rest up to the IxD’er. After careful consideration, research and usability testing, the designer decides the dates need to be formatted as “[x time ago]”. (See the referenced post if that doesn’t make sense.) The designer, who can likely write a bit of code, creates a value converter to format the date value as the Feel demands.

Secondly, we could conceivably have multiple Views in an application for a single ViewModel. Each View would have a different Feel, and the application (or the user) could select the most appropriate (or comfortable one).

Incidentally, when I first learned about MVC it was in the context of writing a minesweeper game in Flash where the user could switch between an isometric and top-down view.

In the End

In real life, we’re not very close to this. There are few IxD’ers out there and most teams don’t need to be concerned about this. That means that for most practical purposes the Simplest Thing to Do might be to forego value converters and hard code formatting in the ViewModel. Value converters, just like anything else, can be abused.

Nevertheless, I definitely do not consider them a worse practice.

If you think I’m wrong, speak up. I am willing to listen. If you’ve been burned by the use of value converters, please share.

Designer Wanted

Christopher Bennage — Tue, 22 Sep 2009 16:30:25 GMT

We need to contract a designer for our current project. I’m looking for one of those mythical beasts that has:

some real graphics design skill
understands (or at least cares about) usability
works with Silverlight

There is also a strong preference for someone in the NYC/NJ area.

If you are interested or know someone who qualifies, please contact me through the blog.

Answer the User’s Questions

Christopher Bennage — Sat, 22 Aug 2009 16:27:00 GMT

One little usability bit that I picked up from many of the Web 2.0 apps (in particular 37signals apps), is displaying date and times in a “how long since” format.

Take a look at the community page on Silver Arcade. I wanted to display when a user became a member of the community. Instead of displaying the actual date that they signed up, I choose to convert that date to “how long ago”.

At first I did this just because I liked it. Then it began to dawn on me that there are reasons that I like it.

Questions

One primary purpose of any UI is answering the user’s questions. “How much credit is left in this account?” “Is this customer currently active?” “How many days are left before this explodes?”

Frequently, when we are displaying dates and times we are really trying to answer questions that begin with “how long ago did …” or “how soon until …”.

When we display a simple date and time, such as “August 22, 2009 12:11 PM”, we are providing raw data to the user, but we really aren’t answering their question. We’re leaving the final step up to them. That’s translating that raw data into a meaningful answer for their ‘how long’ question. Every translation has a cognitive cost.

This may not seem like much, but the cognitive cost adds up very quickly. This can be one of those subtle points that makes two seemingly similar interfaces feel so different.

I’m not saying to display every date and time in your application in this format. Instead I am saying to ask “what question will my users have and am I really answering it”.

To be fair, this is purely anecdotal and is not backed up with any empirical evidence.

One day with Balsamiq Mockups: a review

Christopher Bennage — Fri, 19 Jun 2009 04:03:00 GMT

We’ve just started a new Silverlight project and since ~~our~~ the UI guy is not on site with us, I ended up with the task of producing screen mockups. Some interest was expressed in using Balsamiq Mockups, and this seemed like a good time to really take it for a test drive.

What does it do?

Balsamiq is a tool for quickly authoring mockups of applications and websites. My favorite tool for doing mockups is pencil and paper (turns out that it’s really, really good). However, we needed something that we could readily show during a review meeting and my sketches don’t photocopy well.

Nevertheless, I did my brainstorming on paper and I used it for my first round of reviews with the team. This left me with about a dozen pages storyboarding the core of our application.

After the first review, I began recreate it with Balsamiq.

In Balsamiq you start with a blank, gridded canvas and drag various UI elements from a library onto the canvas. It reminds me of Visio a bit, but without so much pain. All of the elements are styled to look like hand-drawn. This is important because it prevents anyone from assuming that the application is “done” when you’re just presenting mockups.

The elements in Balsamiq are impressively intelligent. Most elements allow you to type in some content and they react intuitively to that content. I was amazed a couple of time at how smartly they responded. Balsamiq ships with about 75 elements in its library and there are more being posted all the time. You cannot really extend the library yourself however, though you can incorporate your own images.

Each mockup screen is a single file. They are XML so it’s source control friendly. If you are mocking up an entire application (like I was) you can link the files together. Many of the elements have a link property that you can point to any other Balsamiq files in the same directory. Once you’ve linked up some files, you can “run” your mockups in presentation mode. This allows you to navigate around the application and toggle annotations (like the sticky note in my screen shot). The presentation mode is really cool.

Should you buy it?

I think that mocking up the UI is a very useful exercise. It helps to expose the behavior of the application that you are going to build and surfaces many insights into what it really needs to do. I still prefer to use paper and pencil for the initial pass. However, I found that following this up with Balsamiq forced me to think through the entire flow of my appplication. My paper storyboards had holes in them that I did not realize until I attempted to express them in Balsamiq.

The reviewers were really excited to see the Balsamiq mockups and being able to walk them through the application was a definite plus for them. The tool is easy to use. I would say that any ~~designer~~ developer doing UI work should be using a tool like Balsamiq.

What it offers for $79 is really hard to beat. Admittedly, I don’t know what other tools are out there and how they compare. By itself, I think it definitely worth it for anyone doing UI work.

Of course, there is SketchFlow. It is coming. I think that SketchFlow looks very promising, especially for us XAML guys, but it’s not available yet. I’ll let you know what I think about the overlap once I get a change to actually use SketchFlow.

Little Things

I had a couple of annoyances that are worth pointing out.

First, you cannot create reusable components. For example, I had certain elements of the application that appeared in several places. I had to clone these elements, but when I needed to change them, I had to make the change in each element. (Another reason to start with pencil).

I think that it would also be nice if there was a “back button” in presentation mode. Within my mockup I had a few screens that you could get too in multiple ways, however I did not have an easy way of returning the the previous screen.

I also get the impression that the community around Balsamiq likes to poke fun at us PC guys. I smile politely.

Finally, Balsamiq likes to keep all of the linked files open. You’ll notice an excessive number of tabs on the bottom of the screen shot. Those are all the screens within the application I was mocking. It became a little difficult to find that right one.

On the whole, Balsamiq is a smart application and I expect to see great things as it matures. Many of its features are intuitive and “just work”, and that’s how I like my software to roll.

:-P

UX Patterns (and not UI Architecture Patterns)

Christopher Bennage — Thu, 05 Feb 2009 19:19:00 GMT

Just when you think that you finally have an accurate label to describe something, you discover the true ambiguity of the term.

What is UX?

UX means User Experience. You might say that it is the ergonomics of an user interface, or possibly the level of intuitiveness. More plainly, good UX means that the users of the software are able to quickly understand how to use and don’t have to go out of their way to make things happen. This blurs a little bit into the concept Usability. But UX just sounds so much sexier, and there is this aspect of producing chemistry between the user and software that transcends mere Usability.

Why do I bring this up? Well, I’ve just started talking about UI Architecture patterns and I wanted to make sure the concepts were distinct. When I talk about UI architecture patterns I’m talking about the structure of the code that underlies a user interface. It’s all non-visual stuff. On the other hand, UX patterns deal with the rendered view that is presented to the user.

Infragistics just recently published a very cool (and Silverlight-based) catalog of UX Patterns called Quince.

You might be inclined to say, “Well, that’s nice for designers, but…”. Please don’t, this is really a useful for tool for anyone building user interfaces, even if those interfaces are basic and handed off to a design team. In the very least, this will help establish a common vocabulary for talking about user interfaces.

More Resources

If you are interested in know more about UX and usability, here’s a couple of resources:

Jakob Nielsen – very well know and full of good info, but he is definitely plain usability with none of the sizzle.

Don’t Make Me Think – one of the first books I read on the subject. (I probably need to reread it, it’s been so long…)