With the undersea cable problems and my average net speed being about 15k/sec, I am presented with ample time to think and write about UX. Something I haven't been able to do for quite some time.
Last night, I had a short exchange in the private MVP discussion list about Differentiated UX. And more specifically, actual examples of differentiated UX's and the reasoning behind them. Below are some modified excerpts from my emails:
It is very easy to go overboard when creating a super cool UI. But to have a good UX and a differentiated UX, we don’t have to go recreating the wheel. We just need to identify as many areas of our own applications that can benefit from an enhanced UX. Not think of universal UX concepts that would benefit every application. That is what component vendors do and that ends up creating only a mediocre UX.
Think of this in terms of a website. Using a CMS like DotNetNuke is so easy and it lets you quickly get things done, but there is only so much customization possible because to benefit the most number of users, the creators must stick to a one-size-fits-all template. A custom CMS, while much harder to create in comparison would be built specifically for the site in question and therefore would have more originality and flexibility.
One aspect of DUX I’m messing with is windows. Mainly modal windows. If we compare more recent applications to something from the Windows 98 or 2000 era, the number of modal dialogs has gone down. SysTray popups have removed the need for so many message boxes and other modal dialog based notifications. Often modal dialogs are not really needed. In many cases where files will be stored in only one place, the Open/Save dialogs can be removed completely. Windows Live Writer does a good job with that.
Taking again the Open/Save dialog example, see the image above. This is an in-page implementation of an open/save dialog. The design consideration here was to quickly identify the “slot” you want to save or open. Filenames were not a user-relevant element, so we did away with it completely. Extra info would be provided by a large Super Tooltip. We also use physical focus by blurring everything else so as to give this “dialog” total focus.
One thing I specifically mentioned was that blind usage of 3rd party components is more or less putting the UI and the UX in a box and limits creative UI. Take the DataGrid for example. In certain business scenarios, it makes perfect sense. But developers often become too eager to just slap a grid on the window and bind it to the data source. It’s so easy. But it is often unproductive for the end-user (even if they themselves don’t know it).
In this project, we were given an existing medical application front end and were asked to “idiot-proof” it. The app used DataGrids for a list of visits of the patient. No way would an inexperienced user – especially under stress or in emergency situations – be able to quickly navigate a grid and understand the data. So we implemented a customized DataBound template of the WPF ListBox (not even ListView).
This is a simple List, but look at the DUX/features:
- Big icons (with totally different colors for each state) quickly relay the status of each item without needing textual data.
- Large easy to click items.
- Column Name is repeated in each item, so if the user is looking at an item at the bottom of the list, the eye doesn’t have to travel all the way up and see which column it is. It may seem like a very minor time saver, but when a single app is used all day it ends up saving a lot of time.
It was still just as easy to bind to the DataSource.
One last example: LogiDine. This is a restaurant reservation system app we did for ASPSOFT. And do note, this is Windows Forms (in .NET 2.0) not WPF! Just about everything uses OwnerDraw code. But the main DUX feature here are:
- In-page “Add Customer” dialog, avoiding the modal dialog. Especially since this would be needed frequently.
- A NumericUpDown control is nasty for quick input. So we added preset buttons next to them. Clicking a preset would quickly input the value in the spinner.