eBook Overview: UX Patterns for Enterprise Applications
This post provides an overview of my new free eBook "UX Patterns for Enterprise Applications".
What This Book Covers
User Experience (UX) is an important field, lots of money and research is going in defining this field. Getting the UX right is an important step while designing consumer apps. Unfortunately, while building enterprise apps UX becomes a low priority. In my opinion, the reason is very simple, the conversion rate is not an issue, users have to use the application no matter what, so no one spends time and money on UX research.
Most organizations do not have dedicated UI/UX designers to projects, and developers like myself end up doing most of the UI design. So the idea behind this eBook is to look at the common functionality that most enterprise apps provide, and share patterns that developers can use to improve the user experience.
Patterns
- Navigation
- Inbox
- Layout
- Milestones
- Urgency & Timeliness
- Input Fields
- Smart Defaults
- Tabular Data
- Linked Data
- Location Data
- Relevant Data
- Search
- Actions
- Error Messages
- Feedback
Download
You can download the free eBook from dropbox.
UX Patterns For Enterprise Applications – Feedback
Just like a process model requires continuous improvement, so should the UI. A good tip would be to provide a link to users to submit quick feedback.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Error Messages
Consider this scenario, you complete a form, click on submit button and the system show all sorts of errors that you made while filling out the form. As shown in the screenshot below, there are two obvious issues with displaying errors so late and in such format.
- First, it is not immediately obvious which fields are causing the error message, so you need to go through each field to investigate.
- Second, the error messages are not helpful e.g. in this case which field has an invalid format, is it the phone or email or both?
So in order to avoid such infuriating scenarios, follow the patterns listed below.
Instant Validations
Perform instant validations (upfront) on all fields instead of delaying errors and waiting until the end when the user is ready to submit. This helps users in making sure that everything is in order as they are filling the fields.
Descriptive Messages
If you are not providing inline error messages, then make sure your error messages are detailed enough to point to the correct one. This way at least users know exactly where to go in order to resolve the issues.
Both patterns help reduce time spent on resolving issues and avoid the frustration that comes with not knowing what's wrong.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Actions
Primary Actions as the name suggests are the main actions a user performs on a form e.g. submitting information or approving/rejecting work. This post discusses a few patterns that should be considered while designing primary actions.
Clear Labels
More often than not, you will see a button at the end of a form called Submit. Even though Submit button knows what happens next, the user clicking the button might not. So, to make it intuitive for the user, it is a good practice to clearly label the Submit button i.e. what is the button doing. For example on an expense form, instead of just labeling it Submit, Submit Expenses will make more sense.
Expose Options
Another common theme we see is that a list of options is provided in combination with a Submit button. Options (a.k.a. drop-downs, a list of values, LOVs) are a great way to list data such as names and states etc., but users need to put some effort and perform additional steps in order to find required information.
So, for set actions, it is usually a good idea to make them as Button Groups. This reduces the number of steps required to perform an action and clearly tells users what is required of them.
Destructive Buttons
If there is a primary action that is considered destructive e.g. Reject or Cancel Request etc., highlight them in a way that its destructive nature becomes clear to the user. Asking for confirmation once the destructive button is clicked is another good way to make sure user does not mistakenly perform the action.
Repetition
Actions like “Submit Request”, “Approve Request” and “Reject Request” etc. should be repeated. They should be placed on top and bottom of the screen. Repetition makes it easily accessible, the one at the top suggests what is to come and the one at the bottom is most likely the one that will be used by the users.
Another option is to make a floating bar for Primary Actions, that moves with the users so that they can take the action at any time.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Search
A well thought out search functionality can greatly enhance the experience. Instead of just thinking about search as a filter criterion, think of this as an alternative and much quicker way to navigate.
Search should not be limited to a single tab or menu item e.g. if you are under the Orders tab then usually you would only be allowed to search for all orders by certain attributes. Having that capability is good, but what if the end-user wants to search for a customer from that location or any comments where a particular customer is mentioned. Think of this as the search your operating system (OS) provides, you can type anything in the search field and then the OS will look for matching filenames, text within files, emails, conversations etc. The figure below gives an example.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Relevant Data
Good decision making requires good data. Finding good data usually means that user has to run some report, log in to some other system or request some team to provide it. All these activities cost time and resources and often cause delays in the decision making process.
There are a couple of ways to make the decision-making process easier and quicker.
Decision-able Data
Providing data that is relevant to the decision making process is a good way to ensure that user does not have to leave the screen to find such information e.g. a manager has to approve if a new contractor can be on-boarded or not, so the system could provide how much budget there is, and to further facilitate what has been the trend of decisions for similar requests.
External System Links
For cases when you cannot bring data into your system, and as a result, users need to perform swivel chair activities (i.e. users need to manually log in to another system and get some data), it is helpful to provide them with a list of those external systems.
Ideally, these should SSO-enabled links that take users to correct screens in the external system, preferably with pre-filled data.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Location Data
With Internet of Things (IoT) getting popular in all industries, it is important to have an awareness of the location of those “things”. This awareness, for example, helps in dispatching a service team when the thing shows issues.
A few simple examples of this:
- Things could mean a fleet of trucks, optimize routes, nearest job
- Oil tank, low, send for refill or repair
- Emergency help dispatch for a car, nearest service center
Once again these are just examples to help you visualize how these maps can be used in enterprise apps to actually improve the user experience.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Linked Data
Imagine you are case worker responsible for a fraud investigation. In order for you to find a suspect, you need to look at analyze various other cases, accounts, and data. This is extremely time consuming and at times infuriating. A great way to improve the user experience is to use connectivity maps.
The idea is that system itself analyzes the data, and then presents the case worker with a map highlighting all other cases and accounts connected to the case being investigated.
The usage of these connectivity maps is not limited to just this one use case but can be used in many other scenarios as well. A few other use cases of connectivity maps:
- Device dependencies: a connectivity map will help identify the impact on infrastructure if a device fails.
- Air traffic: connectivity map can show how delay at one airport might have an impact on overall air traffic.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Tabular Data
In absence of a well-defined system, a spreadsheet is perhaps one of the most common tools that workers utilize for getting work done. Just because a system is replacing spreadsheets does not mean the flexibility that spreadsheets provide should be taken away too. Instead, systems should, of course, provide a reason for workers to make the switch.
The following patterns are all relevant to dealing with tables.
- Screens should provide users the ability to directly manipulate data in tables, just like they are used to in a spreadsheet software.
- Provide users with context-sensitive menus e.g. in the screenshot above users have the option to delete the row simply by clicking a button instead of first selecting some check box and then clicking on a button elsewhere around the table.
- If data in a table is being inputted on a different screen or in a modal dialog then there should be some type of indication on the table that shows if data for a particular row has been completely entered or not (Completed, Pending). This helps users know how much work has been completed and how much is still pending.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Smart Defaults
One of the common issues that manual processing causes are data errors. So, while automating processes wherever human input is required, try keeping the data entry to a minimum. In order to do so use following approaches.
Pre-populate Data
Load as much data by default as possible e.g. a user’s information from LDAP
Provide Options
Provide a list of values instead of a free form input e.g. type of issue. This reduces any erroneous data entries and is useful when doing analytics.
Pre-Calculate
Make the interface do as many calculations as possible e.g. in the screenshot above the interface is calculating total in $ and then total cost to the client in ¥.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.