UX Patterns For Enterprise Applications – Input Fields
How you design input fields will also directly correlate to the number of user interactions (eyes, mouse/keyboard/touch). If you have an input intensive form, then users might end up spending a lot of time filling out data.
For example, take a look at the figure below, there are only 3 data elements but it requires at least 7 different user interactions.
Now the next figure captures exactly the same number of data elements, but significantly reduces the number of user interactions. Just by unifying all the fields, and making the system do a bit more work such as auto-formatting, user’s efficiency has been increased and the number of interactions reduced.
Another point to note here is the use of labels. In first figure, all labels are adjacent to the input field, while in the second figure they are above the input fields. Research has also shown that placing the labels above input fields makes it clearer for users, and is easier on the eyes.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Urgency & Timeliness
Due Dates are important to ensure cycle times are met, but how and where they are displayed make a difference. Taking cue from our daily conversations, “Due in 1 Day” seems more hu-man as compared to “Due On Tuesday 12:45:15 PM GMT”.
So displaying Due In versus the Due On will present the information in a friendly manner, yet show the urgency of the task.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Milestones
Workflows are a core piece of enterprise apps, and most work follows a process either structured or unstructured. The process is implemented either by code or some visual drag and drop tool. In both cases, a user of the application cannot understand the implementation details of the process (nor they should), so they cannot easily tell where are they in the process.
A very simple and effective way is to wrap all that complexity in progress bar that provides milestone level information upfront on the screen. For longer processes, these can be high-level milestones that are relevant to users and for smaller processes, major activities can be included. Following two figures show how a milestone progress bar might look.
If more milestone information is required to be displayed to the users then following design can be used.
Whichever design you choose, the idea is to clearly show all the milestones that a user needs to complete, and where they are right now in the process.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Layout
How information is laid out on the page will have a direct impact on time a user needs to locate something. Clearly marking and grouping related information will reduce the time a user wastes looking for information.
Based on different factors such as how much information needs to be displayed or how the information will be used, different types of designs can be used.
Single Column
Use single column layout for the screen, and keep borders clean. This will make the flow of information easier for users.
Long Form
If there is a lot of information and displaying that in one long form will be problematic, then information can be divided into tabs.
Short Form
For shorter screens, simply use sections. Sections that are informative only should be collapsed by default so that users can focus on information that requires their attention.
Data Comparison
In both the cases i.e. tabs and sections, users will need to navigate between tabs and sections to find information. These design work well in most scenarios except when users need to compare information from different sections. A great option in such scenario is the card layout design. Card layout design allows users to expand/collapse cards, move them around so that only required information is on the screen in a location that helps the user perform a comparison.
Kanban Board
Kanban Board is a great pattern which is widely used in most Agile project tracking tools. This pattern as shown in the figure below provides three types of information in one glance.
- What are all the tasks
- What is the status of each task?
- Detailed information for each task (when selected)
A great benefit of all these designs is faster load times. Since information is grouped into tabs, sections or cards, it is not required to be loaded all at once. You can use the concept of lazy loading to greatly improve screen performance i.e. only load data when the user opens a section, tab or card.
Highlight Sections
Regardless of the layout you choose, you can further reduce the time required locating information by using highlighting sections. The idea is to either use a different color or some other notation to identify sections that need attention or input. That way, users can directly go to the sections that need attention, instead of going through each section trying to figure out the same.
Conditional Visibility
Users of enterprise apps are bombarded with a lot of information, one way to make sure that they do not see irrelevant fields is to use the concept of conditional visibility.
The idea of conditional visibility is simple, input fields that are dependent on other inputs should not be displayed at the time of form load. Loading all the fields can be a bit overwhelming and confusing. Dependent fields should only show up when their dependencies have been met. For example, in the screenshot below, the second question should only be asked if the answer to the first question is Yes, otherwise it is one additional field that takes time.
Another tip to remember is to use transitions instead of showing changes instantly. Users might not even get a chance to notice if a new field has appeared if it suddenly shows up. So, the dependent field should show up at the speed that user can actually see it got appearing on the form.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Inbox
Work inbox is the hub of entire application; this is one central location where each user comes to get work and plan their day. This post discusses patterns to consider while designing a work inbox.
Here is a list of three frequently used methods for the work assignment.
- Tasks assigned to an individual
- all tasks are visible in the work inbox and the person gets to pick which task they work on first
- based on priority and skills of the individual system only assigns a single task to an individual
- Tasks assigned to a team
Folder & Tags
Outlook and most other email programs provide a great way to sort and categorize work. In a similar manner users should have the ability to define their own rules to categorize work. Custom folders and tags are a great example of this capability.
Search Filters
Search filters provide users the ability to sift through a lot of tasks that might need their attention. Option to narrow results by a date range, process, application, tags, priority, and status are most commonly used filters.
In-Line Decisions
For users that are mostly responsible for review and approvals a great way to expedite their work and reduce the number of clicks is to give them in-line decision option.
These inline decisions can be Approve and Reject buttons available in the Work Inbox, as a link in email or a message on an IM. This way they do not even need to login to the system, but their existing email box becomes their work inbox.
Prioritization / Due Date
Users should be able to identify quickly what work needs their immediate attention. This could be because of work’s priority or because it is at risk / overdue. Following methods can be used to show priority and urgency.
- Highlighting Tasks
- Blinking Due Date
- Adding a Flag
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications – Navigation
Consumer apps are usually designed to do one thing very well; enterprise apps, on the other hand, are loaded with functionality. So, navigation design should be given its due priority. A badly designed navigation system can add time to complete work and of course make the experience frustrating.
Just because there is a lot of functionality exposed to the end-user, does not mean every single option should be made visible as well.
Not all navigation items have the same level of priority, not all are accessed all the time. A great way to reduce navigation complexity is to group multiple items together i.e. create a multi-level hierarchy (two is good, any more than that and you risk making it difficult to navigate and remember). Also, it is very important to work with end-users to validate groupings.
Top Navigation
A great example of this type of navigation design is what you see in the latest version of Microsoft Office.
Sidebar Navigation
Another way to achieve the same is by adding navigation to the sidebar. Adding it to the sidebar takes more space. So, to ensure it does not take space all the time, it is a good idea to provide show/hide option. As for each menu item, you can add expand/collapse option for grouping.
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.
UX Patterns For Enterprise Applications - Series Introduction
User Experience (UX) is an important field, tons of money and research is going in defining this field. Unfortunately, while building enterprise applications that will be used internally by knowledge workers, this becomes a low priority. The reasons are simple:
- These applications are not going to be used by external customers
- Conversion rate is not a concern anymore
- Most importantly knowledge workers have no choice because they are required to use these applications to get their work done
Take a look at following examples, these give an idea about the type of user experience we get while interacting with technology in our lives outside of work.
Now take a look at the following example, this is what most people interact with in their work lives (unfortunately this is one of simpler examples).
The idea behind this series of posts is to look at the common functionality that most enterprise applications provide, and share patterns that can be applied to improve user experience, resulting in reduced cycle times and better worker engagement. Most organizations do not have dedicated UI/UX designers to projects, and developers end up doing most of the UI design, these patterns can be easily used by them.
Disclaimer: I am not a certified UX designer/developer. All the patterns included in these posts are based on best practices, my experience and feedback received from clients over the years.
UX Patterns
- Navigation
- Inbox
- Layout
- Milestones
- Urgency & Timeliness
- Input Fields
- Smart Defaults
- Tabular Data
- Linked Data
- Location Data
- Relevant Data
- Search
- Actions
- Error Messages
- Feedback
Want to learn more about UX Patterns? Download your copy of "UX Patterns for Enterprise Applications" here.