During the course of this research I used many front-end UI interfaces and house databases. I came across one such search that was extremely tricky to use. Notice the image below and see that I am required to type in a zip code, but then I am presented with a GIGANTIC list of options in a multi-line text box (some 100+).

So here is the challenge to the community. If you want to participate great. For this particular problem your goal is to come up with a new and better design for the interface presented. If you want you can post a comment that goes to your design illustration etc, or you can simply e-mail me and I’ll be posting some of the entries here along with author and web site link.

There are no prizes. This is strictly for education purposes. There are no right or wrong answers. On To the challenge!

The Challenge:

Area Search OLD WIDGET

My Example:

In my example below I took two routes. One allows the users results to be filtered down to a smaller number by choosing the area in a drop down. The other route I added some interactivity with the mouse. Based upon the 2 filters search type, and area a user could click the “LET ME DRAW IT” and would be presented a zoomed map of the region. Then they can simply draw a box around the region of interest. Click search and then a number of different things could happen. A user could see houses pop up on the map, they could see a directory listing to the right. The point of this challenge is to design something different and hopefully better than the original

My New Design Prototype

Your Design Examples:

Related articles:

1. UI Design Patterns: Exploration of Data and Visual Imagery in Application Design
2. How Can I Speed up Proto-typing & Visual Design Mocks with Hybrid Design Proto-typing?
3. UI Design Dissection: Google Reader What Makes an Application Great?

For those not familiar with Google Reader, it is a RSS aggregation tool. Basically, every blog I keep track of (some 120+ blogs) is added to a list that then goes out grabs my RSS feeds from all my various sites and puts them in one nice window to read. There are two viewing modes. One is the ability to view the entire RSS text, or I can view the title of the post in a quick list. I personally found viewing all the text at once a much better way to get the maximum amount of valuable knowledge crammed into my brain.

What Makes Google Reader Great?

I never thought this simple application could be so powerful, but I use it every day and in different ways. The application for me has expanded beyond a simple one-sided user experience.

In any given day I may use it for any of these multiple activities:

• Discovering new blogs and more content in my field
• Locating new and exciting applications
• Keeping up with the latest trends
• Driving adoption of my own blog
• Research
• Keeping track of interesting stories
• An archive..

One of the greatest features I use all the time is archival tagging. I frequently have about 400 posts+ a day to read.  I use the tagging feature to mark research that is relevant to me. For example my tag list contains articles on “CSS Fixes, UX Methods, and my favorite “Web Applications: Category.”  I basically identify new exciting or interesting applications and tag it to the category it belongs.

For Example: Application discoveries are tagged as followed:  Web applications social, web applications shopping, web applications crm, etc.(see image to right).   This is a very valuable tool because I may need to view reference applications for ideas, new patterns, etc.  I simply click the tag and BAM! I get to see all blog posts I have ever tagged with this category. Now that is research power in your hands!

What’s Keeping Google Reader From Excellence:

• A good IPhone application that will synch seamlessly
• Better management to skip through groups of posts. I generally click the “All” button to read through an entire list of my newest posts. If you close your browser, jump into a new window sometimes the application forgets what is “new.” When you have 400+ posts staring back at you this can be overwhelming. I have to click next 40 times to get through what I’ve seen or already categorized. I want a button next to “next” that allows me to choose the number to skip. IE: Skip 20, 40, 60, 100. That way I can get back to truly reading just the newest posts.
• The ability to recognize posts that are titled the same and have the same source will eliminate duplicate entries for reading. This generally happens when you subscribe to a RSS blog aggregation site. There tends to be a lot of overlap with blog posts and a way to filter would be awesome.
• Better ability to connect with fellow bloggers
• Social grouping abilities (I’m not sure what this would be but it may be neat) Consider I spend a lot of time in this tool compared to facebook, myspace, etc…

What Makes An Application Exceptionally Indispensable

In the case of Google Reader it I can sum it up like this:  The application allows me to expand usage beyond it’s original design. It allows me to adapt it to my own work-flows, patterns, thoughts, ideas and creativity. The indispensable application allows me to use it how I want, when I want and, where I want. 

The indispensable application is the  simplest invention that allows for uses beyond it’s intended purpose. The application becomes so ubiquitous that we don’t even think about how it works ,we just know that it does work. You never question the wizard behind the curtain who is pulling the levers. You simply accept its ease of use and hope it never changes. That is the challenge we face when building exceptional UI. The search to find that happy medium is the difference between adoption and failure. It’s a hell of a lot easier to find the failures.

Life In The Fast Lane

I’ll leave you with just one more tidbit of information. If you are a UI designer always ask yourself, no matter what application you are building. Would I use this? It doesn’t matter that the application doesn’t personally apply to you. You can still assess the interactions. Is option A too cumbersome for even you to grasp? Is option B time consuming? Does option C have more steps involved, but causes less confusion? Does option D break accessibility? Does option E completely eliminate future steps?  It’s up to you to decide how to drive the experience. After all the user is just along for the ride and they can easily hop a cab, hitch-hike or walk. You you really don’t want them to do that now do you?

Related articles:

1. Blog Respose: Bowman Leaves Google
2. UI Design Series 1: Web Application Design Where’s The Vision? What’s The Value?
3. UI Design Patterns: Exploration of Data and Visual Imagery in Application Design

All I wanted was gas, and I was in hurry. I’m pretty sure when I drove up I wasn’t holding a sign asking these kiosks to show me products. Nonetheless, I was molested and ask to partake of a product I had no desire to see.

What was I to do?

• A. Say no thank you politely?
• B. Hide and hope I wasn’t seen? 
• C. Say I have already seen the demo?

Since I had seen this demonstration two times already I was in no mood to even speak to the demonstrators.  I just kept silent and thought to myself.

“Yes, you have a great product. Awesome, but I’m not interested in your cross-sell.”

Every One Surrender We Have You Surrounded

Here I was as were many other patrons, a captive audience to a product experience. I felt all dirty inside, and almost ashamed for not buying the product. Is this how a user should feel? Should a user experience ever be forced? Are there sometimes when it is forced?

Admit it! You are a user experience  pusher. Over the course of many years I have come face to face with applications consisting of three tiers. The front-end (for users), the back end admin (for internal people, employees, etc..), and believe it or not Admin interfaces that admin the admin.  In many of these cases the users of the front-end were treated to the golden carpet . The internal people received the  tin carpet . The admin of the admins probably had no carpet.

The truth is application design takes time and when your audience is captive we very quickly remove features that improve the experience. This tends to happen much quicker and much easier on the internal side of things then it does for the end-user of an application.

Imagine you are one of those souls forgotten in the internal world. Your pleas for external quality software are often unheard and ignored. 

I Hear You Crying but I Don’t Care

Over the course of many, many, years. I’ve heard a lot of horror stories from internal users. 

“Why can’t our tool do this like it does for our customers?”
“Why do we have to use x system when it’s so slow?”

In many shops internal users are just not regarded as the highest priority.  Typical internal applications developed for these types of groups are shoddy, buggy, poorly constructed, confusing, repetitive, and scattered. They are the Frankenstein brand-child of quick whims, crazy ideas, and unreasonable deadlines.

A Web Application Only by Name

Imagine a cluster of  “dissimilar” reports:

These reports track customer information, data gathering, and user retention. Despite the different end results there should still be some commonality among these reports. The problem is the commonality is not properly identified. What happens is a person not trained in usability or any user centric process, has made the decision to lump these all into one system.

Why would such a thing happen? Usually, because it’s fastest way to just put “something” together.  They are internal users and not as important right? Wrong, just because a user is internal should you ignore the cries for competent, excellent software?

Hell No!  Poor applications can easily slow productivity, especially when an app is directly servicing front end clients.

Oh No You Didn’t Just Tell Us To Build Better Internal Apps

The hardest part about getting the same quality built into internal software as external software is getting buy-in from those in charge. Depending on the company there may be several layers of people involved – Managers, Bosses, Mafia. So what can be done to illustrate the power of providing a superior experience for a captive audience?

1.  Analyze your existing applications and identify existing and expected commonalities – This is especially true when you are presented with the opportunity to build enhancements, features, or even bug fixes to an existing application. How will you know there is a problem unless you can point it out in detail?
2. Use actual “working” applications and do a side by side comparison of proposed benefits for the new enhancements. Simply put, illustrate by using the current system why it is bad and then turn back around with multiple solutions to fix the “badity” (new word copyrighted).
3.  Cost V.S. Efficiency Improvement. This is a hard one to illustrate, but the suits (managers, mafia, etc) will expect to see predicted numbers. These numbers are most likely going to be way out of alignment with reality. It would be much better to show estimated time for current task completion with the old application process and then follow that up with your best guest estimate of the new functionality.

For example: We don’t have to go back to this 1 tool to generate the immediate on call reports for a customer on the phone. Now we can simply click this button and display all that information in the same interface. 

And another example: By isolating all of these commonalities in reports A – Z I’ve determined a logical grouping order and how we can provide one dashboard and a single input to access and run each report.

If none of the above works QUIT, or  build out the functionality in your own spare time. We all have pet projects going on in the background  and practice makes perfect!

Experience Cleanup Isle 5 Please Come Again

Fortunately, I can change my gas pumping experience by switching brands, stores, etc.  Generally, captive audiences don’t have that luxury. It’s your job to make sure the tools used external and internal are bult to exceptional levels of quality. Who else can champion the cause but the User Experience Guru?

Related articles:

1. Blog Response: IE 6 The Devil Not In Disguise
2. UI Design Series 1: Web Application Design Where’s The Vision? What’s The Value?
3. The Haves, Have Nots & Feature Bloated User Experience.

Let me back up a little and begin there. The other day I was driving home from work and recently started  on a new UI project. I was going through my normal routines  when presented with a  project.
I start to ruminate over all the things I can do and how all the various functions of this new application would tie together. As I pondered this in between paying attention to traffic and driving, one core question popped into my head. A light bulb snapped and thus this article was born. I realized just how many designers, and developers, forget to ask one magic question.
Maybe they are strapped for time, burned out, or whatever the reason might be. You need to ask yourself this question!

Would I use my own application?

Would  I use this application. At first glance it is such a simple question but extremely valuable and woven with complexity. By knowing the answer you begin to discover unknown paths, problems, and practical answers to otherwise obtuse solutions.

Frequently, when I’m working on a new application with a development team I have to stop them a minute and get them to think about what we are trying to build. Not from a developer, QA, BA, Interaction Designer, UI Designer, System Architect, SQL Developer, perspective but from the person using the tool.

Walk A Mile In My Application

I like to think of it this way. It’s easy to make a pair of shoes, especially if you don’t have to wear them. Nails can stick out of the heel and the fabric may be torn. I still get an A for effort right? WRONG!

Another comparison would be just like the athlete who advertises how great a product is then turns around and uses another instead. Wouldn’t you as a user / consumer feel cheated in some way?

A true life example recently involved a function and feature for inter-application navigation. The feature was supposed to allow the USER to quickly change between editing different individuals’ information.

“A user could quickly change between various people and edit them rapidly.”

It sounded like a safe idea on the surface, but here is where the problem existed. We started by examining all types of ways to make this feature work and be non-confusing to a USER. I tried chunking the information, grouping it in different ways, larger titles, more prominent text. No matter what was tried in the current framework it was still extremely likely for the USER to get lost and more importantly loose the context of the initial task they were trying to complete.

Should We Design for the Sake of Design?

So I sat back a while and thought about the problem. That is when the answer hit me. Why? Why are we trying to let the user do this? Why were we trying so hard to fit a square peg into a round hole? Of course, every group had their own answers:

• Developers – “It would be great if a USER could manipulate the data quickly.”
• QA – “It works and does not break functionality. What is the problem?”
• Business Analysts – “The user should be able to do this function (but why?)
• Interaction Designer – “There must be a solution to this to make it highly usable and fit into the requirements.”

Now let’s back up a second. What about the task itself? Why would a user care about editing multiple individuals quickly? The quick untested assessment was “Users sit down and want to edit multiple people at once.” That was the expected reality but taking a step back and analyzing the task step by step the team discovered that there was absolutely no need for 99% of the users to do this task. They just would not use this system or this feature in the way it was envisioned. If I was editing an individuals information it was because I was either:

A. Talking with a customer recently and discovered changes to this information
B. Made a mistake when entering information and wanted to correct the information.

In either case we had other methods to handle these scenarios. What we didn’t have is a way to mass edit a single individuals information (usability and focus group testing should be conducted to figure out if that is needed). No matter how much everyone wanted this feature we really had no need for it. It was cool but as you read in previous articles that is not enough to justify its importance in an application.

So when you are developing or building a new UI. Ask yourself these questions:

1. Would I use this application (feature)? If not why?
2. What are the tasks the user is trying to complete?
3. Are there too many tasks complicating a single workflow?
4. Does my UI or application framework have enough flexibility to support these new functions?
5. Have I been consistent in my UI framework?

So ask the question and challenge the team to give the “why”. Why are we building this application? Why should we build this application? Will our customers or more importantly will I use this application?

Related articles:

1. Corporate Conflicts A Cantakerous Cacophany of Confusion.
2. UI Design Lessons: A UI Designer in an Agile World, Get Me Out of Hell! – Part 1
3. Agile UI Design: A Fundamental Miscalculation in UI Design Excellence?

Usability is nothing new. What is new is the use of the term usability by anyone and everyone. It has become the de-facto buzzword across the design world. There are so many definitions and differences of opinion across the web on what usability actually means. Let’s take a look at the dictionary definition:

Websters defines usable as the following:

1. capable of being used
2. convenient and practicable for use

As UI designers, we draw upon a few more concepts to define this idea further. My personal definition takes into account the following:

• Learn-ability
• Memorability
• Performance
• Expected Interactions
• Consistency
• Repeatability

Yes, I know that’s a lot of “abilities”.  I will discuss this in future articles,but right now let’s just focus on what falls into the category of usability from an application standpoint and how it can directly impact adoption of our application.

Here’s A Feature, There’s A Feature, Every where’s A Feature

Many notable UI Designers, Interaction Designers, and User Experience Designers have talked about the problems of “featuritis.” The term simply refers to the rapid increase of features beyond either application need or user desire. This can occur to almost any product you can think of.  The goal is to minimize and avoid user frustration by understanding what it is the users really need. After you have identified what is needed it’s important to categorize your features, functions, etc into primary and secondary interactions ( I will talk more about this in a future article.)

Even The Best Applications Have Skeletons In The Closet.

Let’s examine some existing products on the market and identify some problems with these applications. Im sure many of us have used Illustrator, Photoshop, 3dsMax, or Bryce. These applications have a high user competency. You may need classes, formal training, and many years of experience to produce professional results. That is not to say these companies have “driven usability off the cliff.” In fact, many follow the same “menu” toolbar structure seen in 100’s of applications. Each application may have their own slight twist and or added access to complex functions. Regardless, there is no doubt a very important process has taken place at some point during the development of these applications to priortize the location of menu features. Hopefully, this process involved usability groups to actually figure out what the priorty was.

Take 3Ds Max for example. 3DS max is aimed at highly competent designers with modeling, mathematical, computational, and visual skills.  One version of 3DS Max I’ve used contained many complex context menus with alternating functions to complete as expected complex design modeling tasks. Personally, I’m glad I’m not a 3D modeler working with Max or Maya. The interfaces may be some of the most difficult UI’s I have ever encountered. Multi-Tiered cascading menus, complex keystrokes, and alternating views of wire-frames.

Let’s take a look at Photoshop. Pretty much every designer I know has used this behemoth of an application. The sheer power of the tool led to a lot of acceptance of any short comings. Yet, with the creation of CS 3 Adobe redesigned many core menu structures. One simple example is the tool bar that can now be set to a single strip along the side. This was one of my pet peeves. I would frequently run into the tool bar constantly being in the way. This small change (to the user interface) has saved me many minutes of productivity, and eliminated a major annoyance.

We The Users Will Not Stand For UI Mediocrity

Alan Cooper’s Book “The Inmates Are Running the Asylum“-(published in 1999)  talks about the complaceny users of software faced when working with web applications. of course, it is now 2008 and a more recent study by Jakob Nielsen points out that users have lost thier patience. No longer will users stand idly by and wait for that 30 second flash splash screen to load. Poor UI designs and convoluted interfaces, face a growing demand to be made better. It’s our job as UI designers to improve and invent new and easier methods of interaction. If any feature proposed as a usability enhancement fails it is much easier for users to swich prdoucts.

There was a time in the past when humans were pleased by simply improving complex processes with the use of a computer and software. The novelty has worn off, and now users expect much more out of the software they buy.

Think back to the last time you waited for a web page to load. Did you wait patiently? Maybe you tried to click faster in hopes the page would load faster. If you are like me, you simply go to one of the billion other web sites.  It’s reasonable to assume loyalties will shift and applications that fall to the road-side and allow usability to suffer will ultimely loose users.

The Dreams That Dreamweaver Dashed

For many years I was an avid Dreamweaver user. The tool allowed me to code faster than notepad, and did not overwrite my code. Adobe became comfortable with it’s lead on the market and the tool never really pushed the bounds of innovation.

Each subsquent upgrade lead to more features, but what I really needed now was a tool that could read my complex CSS style sheets and visually give me a good in program rendering engine. This would allow me to not have to constantly switch back and forth to my browser to check my designs.

So after years and years of program use I switched to Expressions Web. The CSS rendering engine was  amazing. Sure, it was an entirely new interface to learn not to mention Microsoft’s insistence this was not a FRONTPAGE tool but instead was directly aimed at professional designers. I hesitated making the final switch, but haven’t looked back. That being said now Expressions is falling behind on delivering the best software experience. I may have to take a look back at Macromedia.

Don’t let your software and usability become a fat pig. Conduct usability groups and determine where to go next with your application. When you have your list of features be cautious.

All Features Are Not Created or Treated Equally

Imagine you are in the market for a new luxury car. The list of features reads something like this:

• Power Steering
• Anti-Lock Brakes
• Rear View Mirror Camera
• Internal GPS
• IPOD Connection
• Stereo CD Controls
• Cruise Control
• Defogger
• Air Conditioning
• USB Ports
• Extra Outlets
• Block Heater
• Light Panel
• Spare Tires
• Microwave Oven

This is a top of the line luxury car. It has items you may never need. The engineers believed it was best to have two spare tires. One attached to the roof, and one in the trunk. They reasoned with the manufacturer that because of all the extra features the tires are not the best quality, but we did get all the features in. Occasionally, the operator of the vehicle may turn on the brights when adjusting the radio. They may short out the battery if too many items are plugged in to the outlets. They may burn fuses, but “everything” asked by the car manufacturer was included. Some pieces are less reliable then others, some have some major bugs, some even may cause system failure.

You may laugh at this example, but sadly it is very true. So many times features are the prized cow at the fair. They are the desired outcome of a super speed, fuel injected, development cycle.

Now let’s fast-forward a week later to the purchaser of this vehicle. His initial reaction was WOW it offers me all of these things? That’s a lot of stuff. Sure I may not use many of them, but oh well. I may need them some day! (just what the engineers, and developers wanted them to think). In The past they would have drank the kool-aid! OH YEA! Today that car is going right back and guess who just lost a sale and millions in investmetns?

The next time you want to jam that feature or expand that application. Stop! Think a moment about what the cause and effect will be.  Not to just the current implementation but future expected implementations. You may just prevent your application from careening off a cliff!

*Author’s Note – Due to the size of this article I was a bit late in publishing.

Related articles:

1. Features In The Front Usability Get To The Back
2. UI Design Series 1: Web Application Design Where’s The Vision? What’s The Value?
3. Design Lessons: Should You Rush Your Design To Market or Stall it for Great Design?

I’ve been wanting to get back to the core of this blog for some time. I think I finally have made some time to do this. For anyone that has missed out the original core of this blog is to examine the brainstorming, creation, and execution of an application. This can easily be a process that any company or individual can follow when creating a web application. Size of the application has no bearing on whether these principles can be applied.

In our sample application we will begin working through the brainstorming, feature set creation, and mock layouts of new Cthinker App. The application I will be building in this example is a social aggregation tool. We will take a look at several social aggregation web sites as well as walk through the process of designing one from scratch.

Where’s The Vision

Not a lot of people talk about the vision when it comes to application design. It’s especially important though if you are looking to build an application better than your competitors. Without vision and a way to distinguish your product it makes it extremely difficult to truly produce the best software. It’s also important to make sure you have a large scale vision of where you may want to go with your product. Vision is something that should change and adapt to the times. Vision should keep up with both technology and trends.

What’s The Value?

Besides the obvious monetary ROI. It’s always important to come up with reasons that a particular application is valuable. This helps you to flesh out the cost or investment in the application and also helps isolate what potential profit can be made by launching a new application. Listed below are a few more items you should look at before considering the total value of the proposed application design.

1. Do other similar applications exist? If so can I do it better?
2. Is the target market so small that the potential for profit or usage by clients is marginal?
3. Will the cost of maintaining the application outweigh the cost of producing and running the application?
4. When do you expect a return on your investment?
5. How can the application design be kept simple, teachable, and learn-able?
6. Will there need to be training to use the tool? (Just because something is usable doesn’t mean everyone will understand the usage).
7. Are you going to build out the application in phases? If so make sure each phase is independent and contains your MOST important features while being highly usable.

Later we will explore how vision and value help you to build a successful brand. Branding is another aspect extremely important if you are constructing a suite of applications and are trying to create a overall consistent user experience.

Related articles:

1. Design Lessons: Should You Rush Your Design To Market or Stall it for Great Design?
2. The Most Important Questions to Ask When Building A Web Application UI.
3. So what is this corporate thinkers site all about?