ENABLON
Enablon is a EHS Software company which helps businesses manage risk, data and content more easily. The company wanted a design of 3 new views for their Dashboards, but also wanted them to use Google Material's Design recommendations..
Overview
1 day | 2016
UX Researcher
Sketch, Google Material Design Style Guide, HCI Research, EHR & Dashboard Market Research, and W3C Requirements Checklist
Heuristic Evaluation + New Mock-ups
Objective
-
Prototype an new design for:
-
The “Dashboard" - The first view for the user
-
“Add a Report” - This pop-up is critical to add reports from a library to the dashboard
-
“Delete an Action Plan”: These dialog boxes are displayed to users when they do actions that will have a serious impact on the data
-
-
Identify what elements of the previous dashboard design are good and areas of improvement
-
A brief summary that explains your choices for the dashboard based on market best practices or your personal experience
BEFORE & AFTER
THE DASHBOARD
-
Left Navigation- This has been a best practice since 2006 and continues to be in Google’s Material Design Style Guide. This is the fastest, most efficient use of space, as opposed to a top/horizontal navigation. It allows for more items to be scanned with less visual “fixations” while not applying as much hierarchy as a top navigation. It’s design references some of the most common pre-internet, written information organization methods, i.e. table contents, and essay outlines. This is also the most adaptable navigation pane for mobile and tablet, hence, its common use in most apps.
-
App Structure - This is a best practice as it generally follows Google’s App bar style guide: Action items on the right hand side, with menu items on the left. The highlighting method for the tab, “Home”, is also a best practice in showing “equally important views.”
-
Action Items - These are a best practice as “focused flat icons” and are designed well in so far as they are simple and give the user some idea about what action entails (but are not appropriate for this app bar, which I’ll go into later.)
-
Left Navigation Items - Item placement of the navigation is well, and is suited for a maximum width is 400 dp The selection focus (highlighted “My Dashboards” text) is particularly good for reminding users where they’re at in their experience. In my experience this is particularly useful for those multi-tasking users who often are in and out of digital workspaces.
-
Strong Fallow Area- Positioning the three grey action items and the user’s avatar image here is a best practice, as it utilizes Gutenberg’s Rule of “reading gravity.” The Strong Fallow area in the top right hand side ensures that the user will act if there is a call to action, i.e. notifications or the wrong avatar. However, later I’ll touch on why the plus sign (green icon) is not included in this best practice.
-
Content Canvas - this area contains the most important information, and essential purpose. Placing critical information here is a best practice.
-
Graph Assessments - This is an efficient way for the user to gauge how much attention is needed on a particular item. Having a data-threshold setting for this “Low Risk” sign is a best practice.
-
Data Visualization - Here we see that the primary color, blue is being used for the time series line. This is a best practice.
[1] Bailey, B. "Navigation: Left is Best | Usability.gov." 2013. <https://www.usability.gov/get-involved/blog/2006/04/left-navigation-is-best.html>
[2] Kalbach, J. "Web Page Layout: A Comparison Between Left- and Right-justified ..." 2006. <https://journals.tdl.org/jodi/index.php/jodi/article/view/94/93>
[3] Kingsburg, JR. "A Comparison of Three-Level Web Menu Navigation Structures." 2004. <http://pro.sagepub.com/content/48/13/1513.abstract>
[4] "Structure - Layout - Material design guidelines - Google." 2016. 28 Sep. 2016 <https://material.google.com/layout/structure.html>
[5] "Top Navigation vs Left Navigation: Which Works Better? - UX Movement." 2011. 28 Sep. 2016 <http://uxmovement.com/navigation/top-navigation-vs-left-navigation-which-works-better/>
[6] "Navigation - Patterns - Material design guidelines." 2016. 29 Sep. 2016 <https://material.google.com/patterns/navigation.html>
[7] "Buttons - Components - Material design guidelines." 2016. 29 Sep. 2016 <https://material.google.com/components/buttons.html>
[8] "Structure - Layout - Material Design - Google." 2016. 29 Sep. 2016 <https://material.google.com/layout/structure.html>
[9] "The Gutenberg Diagram in Web Design – User Experience – Medium." 29 Sep. 2016 <https://medium.com/user-experience-3/the-gutenberg-diagram-in-web-design-e5347c172627>
Identifying elements of the client's design that needed improvement
1. Global Visibility Problems with low contrast, opacity, padding & size -The “hamburger menu” highlights a deficient use of contrast throughout the entire design. Although the placement of the icon helps users with it’s predictability of function, as it a somewhat common system icon[1], it’s benefits are muted when opacity and padding size best practices are not followed. This is a global problem, where as Material Design Guidelines for exact spacing have been written to be accessible for those with impaired vision. In order to accommodate, according to W3C and Material Design, a 4.5:1 luminance difference for large components, and 3:1 for small, should be implemented in all elements that sit on other elements.[2]
2. Hierarchical confusion with tabs and app bars for sibling, child and parent views [3] [4] - Here we see that the tabs for the views (Home, Enterprise, Context Strategy, etc.) is somewhat confusing and potentially misleading. The similar usage of the blue focus line for “My Dashboards” tab leads one to think that each navigation is sibling to each other, when this is not true. The views are actually parent views to the entire left side navigation. Additionally, the Desktop Tabs should never be to the side of the menu icon, only below it, as it is a child to the parent menu content.[5] Even more confusing is the app bar views’ relation to the secondary app bar below it; at first it would seem that it is a parent view to the “Local Map, Performance, Help Center…” toolbar, when that bar is actually the child to the “My Dashboards” feature.
3. Inefficient use of Strong Fallow Area - Here there is an inappropriate use of flat icon design with notification icons (the first three icons within the box.) Also the action button detracts from the notification status of any of the other apps in the same area. The user has to fixate on this area for a longer period of time since they are deciding whether to respond to notifications or perform an additional action with green button.
4. Inefficient use of Primary Optical Area - The search field’s “Not Applicable” sign renders this use of space inefficient. The top left area of the screen is the most valuable area, as it is the center of a user’s reading gravity, as mentioned before. Also, there is already a search icon in the strong fallow area (top right.)
5. Interfering touch targets - The icon for adding another dashboard (“+”) is asymmetrical, and may lead to inaccurate touch targets.
6. Confusing Top Navigation for App Bar Siblings - This child view to the “My Dashboards” parent steals much needed space for the content canvas (as is evidenced by the smushed “reporting period” axis, #17) Also, the inconsistent use of icons in the dashboard siblings navigation adds further unnecessary complexity to the organization.
7. Add Item - The “Add and item” button is easily, and wrongly grouped with the add sign in the primary app bar and the setting and window expansion buttons can be rolled up into a “more” icon in the primary app bar.
8. Titles - should be larger and serve as an organizing mechanism. These titles only add extra reading.
9. Icons - Icons should contain simple designs and follow material design patterns. Icons should also only be used uniquely and not redundantly for label sake.
10. Conflation of UI regions by using non-unique designs for data filters - the “Month, Quarter, Year” Filters look like buttons and are too similar to the focusing highlights of the “Performance” dashboard tab, and the blue left navigation items. This destroys any effort to distinguish the UI regions, since the secondary toolbar and the side nav have the same mechanism for attention, that is, the filled in blue rectangle design.
11. Insufficient predictability with little to no design - The data filter for the top right card is not designed at all and needs to in order to help the user understand what it does. It seems like it chooses data, but this also looks like just a subheading.
12. Lack of Content Canvas’ Card Elevation - It’s a best practice to always use elevation, or “z-space” to help the user create a mental hierarchy.
13. Irrelevant competition and Inconsistent design in side navigation with opaque blue boxes - this breaks the reader’s concentration since the blue boxes do not appear to be part of the pattern in the side nav. It leads them to think that they are distinct and separate in functionality, and if they are then they should be placed somewhere else. The design also competes with the bar graph in the bottom left hand. Step back, and notice how the two most easily recognizable things are both these opaque blue tabs and the bar graph. This is the worst thing in the design, since these two are not related at all.
14. Consistency & Spacing - The title “Atlanta” has no space of it’s own, not consistent with the title in the primary card, and is not a best practice in data visualization or material design.
15. Random placement for unique functions or system functions - if a function shares no other similarity with other functions (since it looks unique relative to the side navigation items), or it’s design leads one to think this, then it should placed in the app bar or menu. Alternatively, since the “Administration Workspace” has a gear icon, which makes the user think it is a system icon similar to preferences or settings, this means the function could called from the settings icon in box #7.
16. Lack of Clarity in X axis labels- The labels are crowded. Obscuring critical data clarity should be the first thing a dashboard of this sort get’s right. Having redundant years is a waste of precious negative space. The X axis helps no one and should be made simpler, and more inviting. We can alleviate this space by enabling dynamic crosshairs with data point descriptions.
17. Sub-Optimal Use of Terminal Area and Action Icons - Almost nothing gets read in the right bottom corner of the screen. The terminal area (right bottom area) can be powerful, but if not enough attention is drawn to it then it goes completely unnoticed [6] [7]
The bottom right hand corner needs an eye-grabbing icon if a call-to-action (CTA) is necessary after viewing the data. User’s eyes end up at the bottom right after viewing everything on the screen. This area is perfect for saturated floating action icons for CTAs.
Summary
The new designs mostly follows best practices from Google’s Material Design Style Guide, which has “built-in accessibility considerations” [8] from W3C, WCAG 2.0. Any miscellaneous best practices are filtered by and personal experience from UX Research at EPTech Solutions and The American Society for Healthcare Risk Managers. There are 17 specific problems, as cited above, for which my design solves. The original design had problems with contrast and made almost no use of “x-space.” In my design I use material design standards for UI regions with standardized elevation, opacity, contrast and sizing, which helps chunk related elements together, thereby allowing the user to create more mental space for the work at hand. The hierarchical confusion is solved in my design with additional reconstruction for the parent, sibling and child views. The top navigation in the original design is more apparently a parent to the items in the navigation.
Action clarity is made possible by using flat icon system designs where appropriate. We also have made more prominent the Primary Optical Area in the top left and the Terminal Area in the bottom left by condensing and actions and saturating the icon, respectively. The add function in the top nav is rolled up into the filter in the app bar. This avoids confusion as to what sequence is getting an added function. Buttons and Dashboard Items no longer are competing with the bar graph.
You can download all the files for this report in the Google Drive here:
https://drive.google.com/drive/folders/0B3hhTnNkyKEwREFNdU0wYkpiak0?usp=sharing
[1] "Icons - Style - Material design guidelines - Google." 2016. 30 Sep. 2016 <https://material.google.com/style/icons.html#icons-system-icons>
[2] "Accessibility - Usability - Material design guidelines - Google." 2015. 30 Sep. 2016 <https://material.google.com/usability/accessibility.html#accessibility-color-contrast>
[3] "Tabs - Components - Material design guidelines." 2016. 30 Sep. 2016 <https://material.google.com/components/tabs.html>
[4] "Navigation - Patterns - Material design guidelines." 2016. 30 Sep. 2016 <https://material.google.com/patterns/navigation.html#navigation-hierarchy>
[5] "Tabs - Components - Material design guidelines." 2016. 30 Sep. 2016 <https://material.google.com/components/tabs.html#tabs-usage>
[6] "F-Shaped Pattern For Reading Web Content - Nielsen Norman Group." 2012. 30 Sep. 2016 <https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/>
[7] "How Users Read on the Web - Nielsen Norman Group." 2012. 30 Sep. 2016 <https://www.nngroup.com/articles/how-users-read-on-the-web/>
[8] "Accessibility - Usability - Material design guidelines - Google." 2015. 29 Sep. 2016 <https://www.google.com/design/spec/usability/>
DIALOG
BOXES
There were two dialog boxes that Enablon wanted to redesign. The "Delete an Action Plan" and the "Add a Report." Here the stakeholders did not want an analysis of good design elements for the dialog boxes, since most of these elements were already mentioned in the analysis of the dashboard.
DIALOGS
Identifying elements of "Add A Report" dialog that need improvement
A screenshot of Enablon's "add a report " design with emphasis on areas of improvment.
1. Lack of Progressive Disclosure (too much information at once) - The design for the "Add an Item" function causes cognitive overload. The current design lets the user in on all the steps at once. Below, I designed a stepper that would minimize the amount of information a user must digest, and only let them see the necessary information to complete the first step in adding a report. Since it seems that one step determines a subsequent field (if all reports, step 2, does not have all types of content, step 1), then editable and optional steps should be used. Non-linear steps can be used if one field does not alter the capability or inputs of another field. [1]
This is a general "stepper" dialog box which closely follows the Material Design Style guide..
2. Icons are distracting- As cited before, it is not a best practice to have icons of many different colors or with complex designs. This also speaks to only giving the user the necessary information. Extra design is a distraction. Silhouettes would be a best practice for these icons. Also, if the icons were black and white, color could be leveraged once the icon is selected.
3. Dialog Card Requirements (Elevation)- Proper elevation of the dialogue card (“modal dialogues”) is a best practice as previously cited. It should be elevated more according to material design standards or this dialogue should be set in a light box for focus. This enhances usability for those with impaired focus and eyesight.
4. Economizing space - Text boxes should have the name of the inputs placed within the text box. This is a best practice in the behavior of “dialogue prominence.”[2] This design reduces interruption and preserves, as the prompt indicates, it’s critical nature. The rest of the screen should be greyed or faded out to enhance retention of focus.
5. Meeting User Expectations - Questions and help settings- “User-triggered and dynamic help”[3] best practices indicates that this question mark should be to the side of the text box instead of above it. Also, in accordance with previously cited icon best practices, the question mark should be a flat design.
6. Consistency of Style, Clarity of UI Regions - The style picker, icon and color are all design features, seemingly unrelated and the title and description. In order to now allow the user to interfere with the clarity of the design these should be preset according to the type of report, or not a customizeable feature at all.
-
Icons on the cards interfere with the symbolic representation of the data itself. Bar graphs, line graphs, are symbols themselves. They should be the only symbols on the content canvas area.
-
The color of the cards is used specifically as a focusin feature. Allowing customization with too many colors interferes with the organization of the UI Regions.
-
The use of the word “style” may be superfluous since the style of the entire design is should not have sub-styles.
7. & 8. Non-intuitive actions - Here the action required is not intuitive. It seems that each of the blue bars are expandable, but this is not obvious. It also is unclear as to where we’re grabbing this information from. There is no common icon that prompts the user to do something. It seems as though the user is being prompted in the section to choose a previous report within a certain folder (which would inevitably prompt a file name, if there was more than one report in a folder.) Using a hybrid of chips and common drop-down boxes is, in my experience a very easy to understand call to action. The design would be something like this:
This "stepper" design showcases an expansion panel for one of the steps.
9. Terminal areas within dialogs - The critical function of adding or canceling should be more prominent and have it’s own space as cited before. Also, the terminal area (bottom right corner) of a user's reading gravity, as mentioned before, is the natural place for user's to end their reading. Here if the user analyzes a step, and then realizes that they are not going to perform this function, then they will naturally let their gaze fall to the bottom right. This is the perfect place for the "cancel" button.
10. Confusing placement - It seems as if the the check box is missing for the Comment option, or the check boxes are all positioned to the left of the titles (not best practice, since users read left to right, most likely) and the word “Display” is not an option but rather a heading for the following choices. Either “Display” should be stylized differently or a box or field for “Comment” should be added.
11. Use Z-space to show sibling or child relationships - The choice to choose items that are a subset of a larger category should have their own dimension by using z-space, as cited before. This would be manifested in having a shadow under the edges of the module, as if it is it's own paper card. If choosing a file folder is a result of choosing the "Public" function to the left, then having the folder-picker module pop forward could let the user know that this function came out of the function directly underneath it.
[1] “Components - Steppers-Usage - Material design guidelines." 2016. 29 Sep. 2016”
<https://material.google.com/components/steppers.html#steppers-usage>
[2] “Components - Dialogs-Behavior - Material design guidelines." 2016. 29 Sep. 2016”
<https://material.google.com/components/dialogs.html#dialogs-behavior>
Identifying elements of the "Delete an action plan" dialog that need improvement
A screenshot of Enablon's "delete an action plan" design with emphasis on areas fro improvement.
1. & 3 Unnecessary Distractions - If one were to click the exit button that would be the same as clicking the keep button in the design below. Also the inclusion of an exclamation point or attention drawing icon means that the design itself of the dialog box is not attention-drawing or incurring enough caution in and of itself. In the case that the design is incurring caution, the icon would be rendered redundant.
2. Best Practices in Writing Styles - The prompt uses unnecessary words that indicate future actions (“You are about to delete...”).[1] This is specifically not a best practice in material design. It also is useless in my personal experience.
3. Unclear Actions & Small Touch Targets - Should the User select the check mark to delete? Or should the user select the common red x icon that indicates delete in many other features. It also does not follow icon best practices. The touch targets are too close together which is the worst design aspect of it all. Since this can lead to critical, unintended errors. A better design would look like this:
My design for a critical "delete an action plan" dialog.
4. Consequence Orientated Buttons - This is perhaps the most critical function of the dialog- letting the user know the consequences of their actions. This is achieved when we explicitly tell the user, with unambiguous symbols, i.e. language, what will be achieved if the action is performed. In the previous design, one can actually be confused as to which button will delete or keep the content. The green check mark can symbolize "yes- I'm sure I want to delete" or it can symbolize keeping the content, since the "x" symbol, to the right, is actually, a more common symbol for deleting something. Also both of these buttons are fairly close to each other, which can lead to unintentional clicks or prolonged interactions.
In my design, the action “Keep” is the result, and the action “DELETE,” is also a result of clicking either option, respectively. There is no question about what will happen as a result of clicking them. It is a best practice to use the “outcome of the decision” by indicating it’s verb in the button. [1] It must “suggest what will happen afterwards.”[2] The Touch Targets in my design are also far enough away from each other so as to not be confused by sloppy clicking.
[1] “Style - Writing - Material design guidelines." 2016. 29 Sep. 2016”
<https://material.google.com/style/writing.html#>
[2] “Components - Dialogs-Alerts - Material design guidelines." 2016. 29 Sep. 2016”
<https://material.google.com/components/dialogs.html#dialogs-alerts>