AI-Ethicist.com (2016)

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.

 

 

​

​