March 17th, 2008 Systems posted by dmerritts View Comments

User Interfaces that Work

User interface design is difficult. This is particular true with human-computer interface design. Yet, many front-end developers believe that they’re quite capable – and some expert – UI designers. Granted there are many great front-end developers who are good designers, but it’s often best to separate the roles as you will be able to create a better user experience. The primary reason for separating the roles is to ensure the implementation gets past functional to usable.

Many front-end designers will become obstinate when it comes to adding a convenience or usability feature that surpasses the basic functional need. The difference between functional and usable can be a time trade off; that is, it often takes more time to create usable features beyond functional.

Customer Experience is King
Spending time (and money) creating a beautiful user interaction experience is critical to the success of any software application and most other inanimate interaction experiences. First, you have to start with use-cases, personas and time and motion studies (if the product exists). Next, you have to think about the top user functions and prioritize how the information model is best consumed by your target market – or personas. Your user roles will create different information priorities and likely different visualization metaphors.

Next, make your interfaces pretty and touchable. Remember, there are certain parameters that designers must work in – e.g., visually disabled, color-blind, etc. But, the design at the end must be visually consumable and highly desirable.

Creating Cool Interactions
Make sure that you allocate some time and budget on developing cool interactions. This is the area where you innovate with your interface design. Make sure that every interaction screens has one or two cool features. These features are typically around building a new metaphor for a common interaction problem. This requires creativity and can easily be lost in implementation.

Outsource Cool Controls
Building cool user interface elements (or, controls) takes time and it’s often very tedious. Especially, coding for ‘error handling’ and ‘edge use cases.’ Many front-end developers are responsible for the entire front-end of the product and devoting 10 – 20 hours to a single element is viewed as unimportant. As a result, you should consider outsourcing these cool controls and manage the integration of them into your product by: (1) Clearly Specifying the Coding Standards; (2) Stipulate Technology Usage; (3) Stipulate data-types and data-streams in and out of the control. Doing these three things will go a long way to mitigate last minute integration problems.

Design Implementation Gap
Sexy designs are often implemented poorly. Designers are able to create beautiful things in photoshop or illustrator which are later butchered development constraints and realities. It’s sad to watch a fantastic design be comprised because you don’t have the time to implement it correctly. To mitigate this from happening, make sure that the design is chunk-able (modular-design). Chunk-able design allows for pieces to be worked on in parallel; different engineers working on different pieces simultaneously. (Note: I have found that most .NET projects to inhibit this methodology based on how winforms work). This, of course, requires a decent interface framework to start with – so make sure you invest in foundational interface framework first. chunkable design also allows for the design to come to life overtime – evolution – vs. a big bang type change (very time consuming).

http://blog.danmerritts.com/wp-content/plugins/sociofluid/images/digg_48.png http://blog.danmerritts.com/wp-content/plugins/sociofluid/images/reddit_48.png http://blog.danmerritts.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://blog.danmerritts.com/wp-content/plugins/sociofluid/images/delicious_48.png http://blog.danmerritts.com/wp-content/plugins/sociofluid/images/facebook_48.png
blog comments powered by Disqus