- Andy L., intrepid software engineer  RSS 2.0
 Wednesday, October 15, 2008

Our most important client wanted to draw attention to a major new feature in the next version of their successful commercial software product with a "flashing red button".  We tried to explain that this would be irritating, and our task should be to enable the user to quickly LOCATE and understand HOW TO USE features, not to impose our own idea of what their individual workflow should be.  I asked the client's marketing reps to imagine a word processor featuring a blinking "SPELLCHECK... SPELLCHECK... SPELLCHECK..." button.  They insisted...  We resisted...  Several weeks later, one of the marketing reps called to say that they now completely agreed that a flashing red button had been terrible idea... but could we add a "cycling button", which would endlessly transition through a set of colorful images?  We eventually delivered the product, free of any "throbbing" UI elements, to rave reviews -- and a Software Publishers Association "Codie" award.

Effective UI development requires attention to many different areas...

Buy-in:  Attention to UI is still an afterthought at many organizations ("our customers pay for FEATURES!"), and it sometimes takes a competing (possibly technically inferior) product, that wins over reviewers with its intuitive design and polished graphics, to change this.  Until you can overcome the attitude that developers can just use MS Paint to generate artwork for the shipping product, you'll be very limited in what you can accomplish in terms of design.

Interactive Design:  Guidance on principles and practices considered to contribute to "good UI" has long been available in published references from a number of notable industry authors (see the list below).  In addition to making the effort to actually STUDY the subject, it helps to be able to mentally "block out" your deep understanding of the underlying technical issues, and see interaction requirements from a user's non-technical perspective.  Common UI sins include exposing far too many options in the top-level UI, failing to group associated features or define interactions for similar tasks in a consistent way, failing to create a visual hierarchy to promote feature "discovery", creating deeply nesting submenus under submenus or dialog buttons that pop up more dialogs, and many others.

Aesthetics:  This is what most managers and marketing people tend to think of when they hear the term "UI design", with managers justifiably skeptical that the company should invest time and money just to "make things pretty", while marketing department representatives are envisioning how the application will look, projected on the JumboTron, at the next trade show.  A general consensus on the definition of "good enough" is important when considering changes that are purely aesthetic -- but much less so when it comes to issues of usability.  Aesthetics are almost completely subjective: "It's too round, the borders need to be thicker/darker, it 'feels' too crowded, the animation isn't smooth enough, it's too blue...".  A subtopic which is less subjective involves "color theory", and developers can dramatically improve their designs by relying on resources like Adobe's "Kuler" to help them select a limited set of colors that are guaranteed to look good together.

Engineering Effort:  Developers who focus exclusively on server-side/infrastructure/business logic issues, HUGELY underestimate the engineering effort required to produce an intuitive and compelling UI.  Speakers at dev. training events will often wave their hands in front of a thinly populated data grid near the end of a presentation on the latest data access/remote communications mini-framework, and make some offhand remark to the effect that "someone" can hang a pretty UI on all of this later...  In reality, I don't think I've ever seen a project where the time and effort required to implement a non-trivial user interface didn't turn out to be many times greater than what was required to pound out the underlying business logic and support layers, where implementation of the UI didn't require the attention of the teams's best developers, or where there weren't significant benefits to refactoring lower layers to present information in a form more convenient to the UI.

Design Extremes:  More than one member of the Windows developer community has warned about WPF's potential to inflict interfaces consisting of dancing 3D teapots pouring colored streams of text onto virtual curling pages...  At the other extreme, some developers will continue to simply glom together 3rd party controls, and rob their projects of the benefits of the DESIGN capabilities built into the framework.

Designer-Developer Interop:  Some people have been mislead to believe that designers can essentially make indiscriminate changes in Blend, while developers make indiscriminate changes to the shared project source in Visual Studio, and that as long as everything works in one environment, it will work in the other... and that designers and developers can work in harmony while remaining largely ignorant of each other's area of concern. Many teams, including some inside Microsoft, are finding that this is simply not true.

UI Testing:  The process of writing unit tests for business logic generally results in better code, converting methods that were formerly "private" into testable "public" methods in new classes with more narrowly-defined responsibilities, for example.  The structure of "good" UI code, on the other hand, is dictated by the UI development framework being used (Windows Forms, WPF etc.), and trying to unit test the presentation layer often requires conforming to a dramatically different coding style, which is not inherently better, but required by the test framework (implementing all control handlers as empty stubs that call into new "presenter" classes, for example -- although there are arguably other benefits to this particular technique that extend beyond testing).  Unit tests are also completely unable to test effects that are purely visual, which make up a HUGE proportion of UI bugs (scrolling is not smooth, controls don't line up, layout doesn't conform to UI guidelines, X is misspelled, quickly dragging the window causes the video image to dissappear while audio continues to play...), while much of what CAN be detected would rarely have escaped notice, even without unit tests (verify that clicking buttonX launches featureX...).  The cost-benefit trade off for trying to unit test the presentation layer becomes even more questionable with WPF,  since the majority of UI behavior in a well-designed WPF application will be defined in Xaml and, even if you could test the markup, you would essentially be testing Microsoft's Xaml parser and data binding implementations.

A less common type of UI testing consists of formal "usability" testing.  On the project mentioned earlier, our development team got to spend a week in an actual usability lab and (once we got over the fun of zooming the hidden cameras in and out on the test subject's bald spot), we found it to be a very humbling experience to watch user after user struggle with features we "knew" were completely intuitive, while we jumped around behind the one-way mirror begging the user to "Just click the Toolbar button!"  Formal usability testing is very valuable if you can justify the expense, but interpreting test results can be tricky -- thinking that maybe the user would have noticed that Toolbar option IF ONLY WE'D USED A FLASHING RED BUTTON!

 

Recommended UI Design Resources:

Wednesday, October 15, 2008 9:54:58 PM (Pacific Standard Time, UTC-08:00)  #    Comments [0] -
Dev. Process | UI Design | WPF
Comments are closed.
Contents...
© Copyright 2010, MissedMemo.com
DasBlog theme 'Business' created by Christoph De Baene (delarou)