5

I'm currently struggling with the design of the new user interface for a rather large application. The current version of the software consists of ~150 forms, and they are neither pretty nor intuitive, hence the redesign.

In the new design, I want to keep things consistent, i.e. I want those forms to look and feel as similar as possible. But in some cases, it just doesn't feel right. For example, the layout that makes sense for the management of a master data table with many fields and several detail tables seems totaly bloated for a smaller table without detail tables. On the other hand, the most straight-forward simple design approach for the small table is IMO too inconsistent with the layout of the part that managers the larger table.

How to attack the problem? Stick to one layout? Mitigate the consistency claim? Look for a better one-size-fits-all approach?

4 Answers 4

11

A couple of thoughts come to mind:

  • I wouldn’t worry too much about consistency with the legacy forms especially if you’re rolling out the new forms in a short period of time. Soon those old forms will be a dim memory, neither a help nor a hindrance to the new design’s performance.

  • It’s not so bad if different forms look different if those differences in looks are tied to differences in function. There may be a small learning burden but users are unlikely to be confused because the visual differences cue them that there are functional differences. Inconsistency is most problematic when things look the same but behave differently, a condition I call a “contradiction.”

  • On the other hand, you may want to consider including some of the same basic functionality in all forms, not for consistency, but for flexibility. For example, your user research may indicate that only 20 of your forms need a Clone function for normal operations, but you may want to include a Clone ability on all forms anyway to cover exceptional operations your research didn’t uncover.

  • You should also avoid things that look different but do the same thing (e.g., having Delete be a text-labeled button on one form while it's an icon on another form). This is a condition I call an "irregularity, " which is not as bad as a contradiction, but still bad. You need compelling usability gain in other areas (e.g., efficiency) to justify an irregularity.

You are correct that consistency isn’t everything, and you should weigh its benefits against other considerations such as the efficiency of each form. I’ve details for estimating and mitigating the severity of inconsistencies for making such trade-offs at Achieving and Balancing Consistency in User Interface Design. I discuss flexibility at Expecting the Unexpected.

1
  • 1
    good points, +1
    – peterchen
    Dec 28, 2010 at 15:24
5

Consistent behavior, adequate appearance

IMO you need to clarify (for us, or maybe for yourself) what needs to be consistent, and what not.

Consistent behavior means: Things that look the same should behave the same.
Adequate appearance means: the look helps the user predict the functionality.

With these ad-hoc definitions by humble me, they are not antagonists.

I've seen many attempts at consistent appearance for things that are functionally different. Now, with some age, I consider that a mistake in many cases - at least, when the similar looks were motivated by similar or shared implementation.

IMHO, striving for a similar look between 150 forms (OMG!) isn't even a good goal. How are your users to tell what they are just doing?

Example:

alt text

Can you spot the difference? Very consistent, but a recipe for disaster.

In this example, details like selecting the receiver, selecting products and amounts etc. should behave the same - that's consistency. Appearance, OTOH should be significantly different.


In practice, I see two possible problems:

Developer preferences: A "one size fits all" approach goes down easier with developers. Instead of implementing 150 forms, they implement a form generation engine that mostly configures itself from database meta data. (We just like to solve meta problems, and hate repetetive work. This even is the more efficient approach if the result is what the user needs.)

User perception: Replacing an existing UX is different from introducing a new one. For non-technical users, the Forms are the application - they don't know business logic and backends, they just know lists and fields and buttons.
This means if you change the UI completely, you may see a lot of friction when the solution is rolled out, simply because the users see a unfamiliar application, while IT thinks it's the same data, so only little training is required.
Which takes me to the part of my reply that I loathe to say: Be careful with what you throw out. An efficient and elegant UI may be much more error prone than a ugly but familiar one.

[edit] As Michael Zuschlag points out, don't worry to much just be prepared for the rollout.

3
  • Good points. Currently, we are striving for consistent apperance as well. For example, we want to avoid pop-up-windows and use vertical tabs instead. From a developer's point of view, it's not much of a difference, so developer preferences are not the reason; rather, we want to avoid that each part of the application has a different style, e.g. one uses lots of buttons at the bottom, another one comes with a pulldown-menu, the next one uses context menus and icons spread across the form etc.
    – ammoQ
    Dec 28, 2010 at 15:13
  • I've added a picture to emphasize what I consider "bad consistency". The consistency you mention - using the same controls for the same functionality - is the one you should strive for.
    – peterchen
    Dec 28, 2010 at 15:15
  • +1 for a great example of consistent appearance being bad. May 19, 2011 at 17:49
1

Keep the flow of groups of elements Consistent.

In addition to the visible elements, another thing to make consistent is data flow and tab order when a user is actively adding information to the form. A rule to follow would be to Consistently follow the same flow order for data groups such as address (made up of things like street, city, postal code, country, etc), name (salutation, first, middle, last), or product entry (name, brief description, long description, colour, weight, number of doodads included, etc).

For example: An address block will normally contain the same fields: street, city, postal code, country. It makes sense to always put the same elements in the same relative order (not street, city, country, postal code in one form and street, city, postal code, country in another). And although some address forms might differ slightly (apt number field on this one, no country field on that one), creating a consistent flow will simplify error in data entry significantly.

Expert users, especially those who touch-type, will start using the tab button to improve their efficiency quickly. Major breaks in tab flow, or forcing the user to move a mouse and manually click (gasp!) to change focus will drive frequent users of the system batty.

Also, you may not be implementing these for the web, but the basic idea still holds: Grouping Form Elements or Explicitly Setting Tab Order has the added advantage of being more accessible.

0

what do you think what do users think about your changes? Have you done some user's issue investigations? I think, you have at least two parallel works:

  • redesign to one-style UI (create prototype, that uses general to all forms controls)
  • usability, consistency issues solving (do more detailed analysis to every group of users)

Luck.

4
  • So far, the feedback was very positive, but the users have seen only a few forms in a new layout, now if have to tackle the big rest.
    – ammoQ
    Dec 28, 2010 at 14:29
  • @ammoQ great, you have done the first one. ask users what do they think about their part of application that they are responsible for. I am sure every group of users (managers, accountants..so on) have what to say about issues, improvements, UI bugs. After that you can analyse this information and, I am sure, you can improve UI workflow.
    – igor
    Dec 28, 2010 at 14:52
  • @ammoQ Then you can suggest or can present the new UI. Be care that users are lazy and would complain on your some improvements :). After a while everything will be fine. :)
    – igor
    Dec 28, 2010 at 14:52
  • igor: "Fortunately", the old user interface is bad enough that most users are happy with the change, as long as the new user interface does NOT try to copy the old style too closely. The old user interface is written in Motif, the new one is made using ExtJS, so it wouldn't be too difficult to create an imitation of the old user interface, though.
    – ammoQ
    Dec 28, 2010 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.