Five UX design best practices, and mistakes to avoid

One of the most common reasons why organizations find themselves tied to legacy hardware and software is enterprise applications, often in a state of marginal (yet passable) functionality. These programs are typically for internal use only -- either written in-house, or outsourced to a third-party -- and are a visual mishmash of widget toolkits used in counter-intuitive ways. These programs frequently take the form of programs designed in Visual Basic 6, or deprecated browser plugins such as ActiveX or Java.

With shifting technological trends, these programs and the systems they run on are slowly being replaced. With this opportunity, developers should pay more attention to the user experience (UX) design for enterprise apps in order to make them easier for end users to operate, and to increase productivity when these apps are being used. These design guidelines provide a helpful frame of reference for the needs of end users, and how to approach UX design for enterprise apps.

1: Consider the central task the program will be used for

If it is necessary to write a program in order to perform a particular task, that task should be the central focus of the program. Before writing any code, consider what the goal of the program is, and how functionally those goals will be reached inside the program.

It's worth considering the role of the end user, and the tasks they may be assigned; in most cases, it's advisable to separate disparate tasks into independent programs, rather than force completely different tasks into one program. Additionally, don't rely too heavily on configuration menus -- the default configuration should be applicable to the vast majority of users and use cases.

It may be a worthwhile exercise to create a flowchart of how end users will use the program -- particularly for data-entry use cases. For that exercise, imagine what would be considered a billable work unit, as if the end user is an independent contractor, and what the necessary steps are to complete such a task.

2: Don't overcomplicate the user interface

Every visual unit inserted in the application -- whether it's descriptions in the application, or additional controls, such as drop-down boxes or radio buttons -- adds to the overall visual complexity. Before adding text or controls to the program, consider what purpose they serve.

There are various ways to avoid overcomplicating user interfaces, some of which are dependent on the features available in and the style guide of the framework you use.

In data-entry use cases, merging the label with the input field -- for example, a search box titled Search that disappears when the box is granted focus -- can be a very simple step in reducing the visual complexity of a program. Accordingly, highlighting required input only if the field is skipped or when the end user clicks Submit reduces visual complexity.

3: Create an informational hierarchy by prioritizing content

In much the same way that people read text left-to-right, users are typically conditioned to expect that the highest priority control in a program will be in the top left corner, with lower-priority content near the bottom of the screen. The content in your application should generally be organized accordingly. This is not a particularly strict rule, and knowing your audience is important in this regard -- some languages, such as Arabic and Hebrew are read right-to-left, while Japanese, Chinese, and Korean often are printed top-to-bottom vertically, read from right-to-left.

Do not put every single possible control relevant to the task at hand in the main screen of your app. This should be obvious to anyone who has used a computer, though it bears repeating as the thought process between using programs and writing programs is often somewhat disconnected, particularly in the enterprise space. Additionally, a correctly configured tab sequence can greatly speed up the process of data entry, enabling end users to complete tasks more quickly.

Showing controls when needed requires somewhat more forethought about how the app is being used. When entering addresses into a database, the address format varies between countries; for instance, an address in Iceland has no use for a state or a province field, as would be necessary for addresses in the US or Canada. Other types of context-dependent controls depend on the data being handled in the app.

4: Reduce the effort needed from users

Reducing the number of clicks necessary to complete a task goes a very long way in assisting end users in completing tasks more quickly.

This isn't limited to the types of controls used, but it also extends to reducing the amount of scrolling (or swiping) needed to complete a task. Generally, drop-down boxes are preferable to radio buttons as the amount of screen space required is much less, though compulsory, self-explanatory fields (credit/debit, for example) are best left to radio buttons.

In the previous example of addresses, using a library such as pyzipcode that can be used to automatically populate the City and State fields for US addresses based on the supplied ZIP code can save a substantial amount of time -- particularly with frequently misspelled places such as Albuquerque, NM or Gloucester, MA.

5: Anticipate errors, but do not interfere

Form validation is an important part of reducing errors, but being overly aggressive on form validation can frustrate end users. In the US, ZIP codes never have letters, while Canadian postal codes always do. This is a reasonable and straightforward field to validate. Putting minimum or maximum length requirements on name fields is never a good idea, as special cases will always exist.

Also see

• User experience vs. making money: With deep linking, developers must choose (ZDNet)
• Why architects make great UX designers (ZDNet)
• Working backwards, and other rules for enhancing UX (ZDNet)
• Quick tips: Designing for user experience (UX) (TechRepublic)
• 10 things that make software user-friendly (TechRepublic)