<div class="socmaildefaultfont" dir="ltr" style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-size:10pt" ><div dir="ltr" style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-size:10pt" ><div dir="ltr" ><div data-node-type="line" id="magicdomid307" ><div data-node-type="line" id="magicdomid307" >Thank you for sharing! We have been collaborating behind the scenes, so I want to bring</div>
<div data-node-type="line" >the conversation back into the community thread. I have provided some feedback below,</div>
<div data-node-type="line" >but overall it would be helpful to understand the qualitative data that was used to determine</div>
<div data-node-type="line" >the value of the color palette change. It is difficult to frame a conversation around these</div>
<div data-node-type="line" >changes otherwise. It would be more productive to understand what problems we are solving,</div>
<div data-node-type="line" >how we are solving them using common heuristics, and how the overall experiences were</div>
<div data-node-type="line" >improved with the design change proposal.</div>
<div data-node-type="line" id="magicdomid716" > </div>
<div data-node-type="line" id="magicdomid1940" >Regarding color, we used color theory to determine the color palette. Color theory indicates</div>
<div data-node-type="line" >that dark blues and light blues have different impact in the way a UI is perceived. Light blues</div>
<div data-node-type="line" >are friendly and energizing, while dark blues are stable and reliable. It is important to IBM that</div>
<div data-node-type="line" >the OpenBMC UI embody the same values that customers expect from our servers, reliability,</div>
<div data-node-type="line" >strength, and excellence. Additionally, the proposed color choice is harder to switch to a dark</div>
<div data-node-type="line" >UI for users who might have visual limitations and need to convert to dark UIs using browser</div>
<div data-node-type="line" >plugins and some of the background/foreground combinations do not meet the Web Content</div>
<div data-node-type="line" >Accessibility Guidelines (WCAG) 2.0 AA Accessible Colors guideline.</div>
<div data-node-type="line" id="magicdomid1110" > </div>
<div data-node-type="line" id="magicdomid1132" >Color Theory reference:</div>
<div data-node-type="line" id="magicdomid1133" ><a data-attrib-id="MTU3NDI1NzE0NDIzNy1odHRwczovL3d3dy5zbWFzaGluZ21hZ2F6aW5lLmNvbS8yMDEwLzAxL2NvbG9yLXRoZW9yeS1mb3ItZGVzaWduZXJzLXBhcnQtMS10aGUtbWVhbmluZy1vZi1jb2xvci8=" href="https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/" rel="noreferrer nofollow" target="_blank">https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/</a></div>
<div data-node-type="line" id="magicdomid1134" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid1141" >> <a data-attrib-id="MTU3NDIwMDg1ODc3NS1odHRwczovL3VybGRlZmVuc2UucHJvb2Zwb2ludC5jb20vdjIvdXJsP3U9aHR0cHMtM0FfX2kucG9zdGltZy5jY19xTXZDaDZYcl9Mb2dpbi5qcGcmZD1Ed01GQWcmYz1qZl9pYVNIdkpPYlRieC1zaUExWk9nJnI9RGxNNlB5RWxncXFLVGQ2ZXhYMGo0QnM0Z0xuU1k3LVgwQzFQbVoxYWVBMCZtPUF0emZQbkMwX01TNFMwdmZhM1E1b25zMGlSSjJZYU5iVlQ5OXBuWGRmc1kmcz1jMllsRTdDWk5GdklCV3o0T0EyUEFsMlE3a1JSSzVZb2NVRnh5MnhQM0JvJmU9" href="https://i.postimg.cc/qMvCh6Xr/Login.jpg" rel="noreferrer nofollow" target="_blank">https://i.postimg.cc/qMvCh6Xr/Login.jpg</a></div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid203" >The aesthetic of the login page looks good. I think it would be helpful to show more</div>
<div data-node-type="line" id="magicdomid204" >then just the small screen view. </div>
<div data-node-type="line" id="magicdomid205" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid206" >> <a data-attrib-id="MTU3NDIwMDg1ODc4NS1odHRwczovL3VybGRlZmVuc2UucHJvb2Zwb2ludC5jb20vdjIvdXJsP3U9aHR0cHMtM0FfX2kucG9zdGltZy5jY190VFRnTWRIeV9FdmVudExvZy5qcGcmZD1Ed01GQWcmYz1qZl9pYVNIdkpPYlRieC1zaUExWk9nJnI9RGxNNlB5RWxncXFLVGQ2ZXhYMGo0QnM0Z0xuU1k3LVgwQzFQbVoxYWVBMCZtPUF0emZQbkMwX01TNFMwdmZhM1E1b25zMGlSSjJZYU5iVlQ5OXBuWGRmc1kmcz1NUWZkQjdxYTJjQ0NhbGpuSmVTb0l5RE05a3E0X29KUXdCRXRBa2cwYm40JmU9" href="https://i.postimg.cc/tTTgMdHy/EventLog.jpg" rel="noreferrer nofollow" target="_blank">https://i.postimg.cc/tTTgMdHy/EventLog.jpg</a></div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid207" >I am struggling with this proposal for a couple of reasons:</div>
<div data-node-type="line" id="magicdomid208" > </div>
<div data-node-type="line" id="magicdomid209" >1. The visual hierarchy of the screen makes it difficult to</div>
<div data-node-type="line" ><span style="font-size: 10pt;" >easily scan the content of the page. There are many areas</span></div>
<div data-node-type="line" ><span style="font-size: 10pt;" >that draw the user's focus. </span></div>
<div data-node-type="line" id="magicdomid211" > </div>
<div data-node-type="line" id="magicdomid212" >2. The Filter sections occupy a great deal of the screen real estate. This</div>
<div data-node-type="line" id="magicdomid213" >was one of Intel's goals to resolve. </div>
<div data-node-type="line" id="magicdomid214" > </div>
<div data-node-type="line" id="magicdomid215" >3. Doesn't take into account the need for adding a remote logging server</div>
<div data-node-type="line" > </div>
<div data-node-type="line" >4. Unclear what problem showing and hiding the Event IDs column solves</div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid218" > </div>
<div data-node-type="line" id="magicdomid219" >We have an alternative design that:</div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid596" >1. Has been tested with over 10 IBM customers and several internal stakeholders</div>
<div data-node-type="line" id="magicdomid221" > </div>
<div data-node-type="line" id="magicdomid1952" >2. Complies with the AA WCAG 2.0 AA Accessible colors guideline</div>
<div data-node-type="line" id="magicdomid224" > </div>
<div data-node-type="line" id="magicdomid2054" >3. Maximizes the screen real estate by using a filter menu pattern</div>
<div data-node-type="line" id="magicdomid226" > </div>
<div data-node-type="line" id="magicdomid227" >4. Associates the the search logs input field with the table itself through the use of proximity</div>
<div data-node-type="line" id="magicdomid228" > </div>
<div data-node-type="line" id="magicdomid2055" >Link to IBM Event Logs prototype: </div>
<div data-node-type="line" id="magicdomid2056" ><a data-attrib-id="MTU3NDIwMDg1ODc5OC1odHRwczovL2libS5pbnZpc2lvbmFwcC5jb20vc2hhcmUvOEVOWVJWWEFQRkQjL3NjcmVlbnMvMzE5MTQxNzY1XzAxLUV2ZW50LUxvZ3M=" href="https://ibm.invisionapp.com/share/8ENYRVXAPFD#/screens/319141765_01-Event-Logs" rel="noreferrer nofollow" target="_blank">https://ibm.invisionapp.com/share/8ENYRVXAPFD#/screens/319141765_01-Event-Logs</a></div>
<div data-node-type="line" id="magicdomid230" > </div>
<div data-node-type="line" id="magicdomid231" > </div>
<div data-node-type="line" id="magicdomid232" >> <a data-attrib-id="MTU3NDIwMDg1ODgwMy1odHRwczovL3VybGRlZmVuc2UucHJvb2Zwb2ludC5jb20vdjIvdXJsP3U9aHR0cHMtM0FfX2kucG9zdGltZy5jY19YcUJZVlZKel9IYXJkd2FyZS0yRFN0YXR1cy0yRFBhZ2UuanBnJmQ9RHdNRkFnJmM9amZfaWFTSHZKT2JUYngtc2lBMVpPZyZyPURsTTZQeUVsZ3FxS1RkNmV4WDBqNEJzNGdMblNZNy1YMEMxUG1aMWFlQTAmbT1BdHpmUG5DMF9NUzRTMHZmYTNRNW9uczBpUkoyWWFOYlZUOTlwblhkZnNZJnM9WUF4eVZDWnJVakpJaXhvckY4aWxhRXY5NXRnZmQ3dUZWRDdabXVfU3M1SSZlPQ==" href="https://i.postimg.cc/XqBYVVJz/Hardware-Status-Page.jpg" rel="noreferrer nofollow" target="_blank">https://i.postimg.cc/XqBYVVJz/Hardware-Status-Page.jpg</a></div>
<div data-node-type="line" id="magicdomid233" > </div>
<div data-node-type="line" id="magicdomid234" >These seem like improvements we should move forward with:</div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid2071" >1. The layout and organization of this page better utilizes the available screen real estate.</div>
<div data-node-type="line" id="magicdomid236" > </div>
<div data-node-type="line" id="magicdomid2165" >2. The added functionality of expand and collapse all sections could be a useful feature.</div>
<div data-node-type="line" id="magicdomid2247" >We are happy to user teat that before putting in the development effort.</div>
<div data-node-type="line" id="magicdomid238" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid1143" >These are concerns we should discuss:</div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid240" >1. The Page heading and the navigation are mismatched. Why is the navigation titled</div>
<div data-node-type="line" id="magicdomid241" >Hardware status and the page titled Inventory?</div>
<div data-node-type="line" id="magicdomid242" > </div>
<div data-node-type="line" id="magicdomid243" >2. There seem to be other FRU types that are not listed in the quick filters.</div>
<div data-node-type="line" id="magicdomid244" > </div>
<div data-node-type="line" id="magicdomid2249" >3. Is this scalable? One system I'm looking at has 15 DIMMs and the proposed design only</div>
<div data-node-type="line" id="magicdomid246" >shows 1.</div>
<div data-node-type="line" id="magicdomid247" > </div>
<div data-node-type="line" id="magicdomid248" >4. It's not clear how a user can expand just one section. There is a checkbox for showing all details</div>
<div data-node-type="line" id="magicdomid249" >but no visual indicator that the user can expand/collapse the details of individual sections</div>
<div data-node-type="line" id="magicdomid250" > </div>
<div data-node-type="line" id="magicdomid251" >5. Export functionality is missing</div>
<div data-node-type="line" id="magicdomid252" > </div>
<div data-node-type="line" id="magicdomid253" > </div>
<div data-node-type="line" id="magicdomid254" >> <a data-attrib-id="MTU3NDIwMDg1ODgwOC1odHRwczovL3VybGRlZmVuc2UucHJvb2Zwb2ludC5jb20vdjIvdXJsP3U9aHR0cHMtM0FfX2kucG9zdGltZy5jY19CNlZ2OThxRl9TZW5zb3JzLTJEUGFnZS5qcGcmZD1Ed01GQWcmYz1qZl9pYVNIdkpPYlRieC1zaUExWk9nJnI9RGxNNlB5RWxncXFLVGQ2ZXhYMGo0QnM0Z0xuU1k3LVgwQzFQbVoxYWVBMCZtPUF0emZQbkMwX01TNFMwdmZhM1E1b25zMGlSSjJZYU5iVlQ5OXBuWGRmc1kmcz05T203eFhTZFFsR054NUF6Yi05MjN6Q2lWekZYMW1CMjFRel8wUXo3OTlFJmU9" href="https://i.postimg.cc/B6Vv98qF/Sensors-Page.jpg" rel="noreferrer nofollow" target="_blank">https://i.postimg.cc/B6Vv98qF/Sensors-Page.jpg</a></div>
<div data-node-type="line" id="magicdomid255" > </div>
<div data-node-type="line" id="magicdomid256" >These seem like improvements we should move forward with:</div>
<div data-node-type="line" id="magicdomid257" >1. Use of icons to show status is easier to scan</div>
<div data-node-type="line" id="magicdomid258" > </div>
<div data-node-type="line" id="magicdomid2283" >2. Removing the reliance on color for status</div>
<div data-node-type="line" id="magicdomid260" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid1145" >These are concerns we should discuss:</div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid262" >1. Same concern as with the event logs proposal. We would want to save some screen</div>
<div data-node-type="line" id="magicdomid263" >real estate by using the same filter and search pattern as in our proposed and tested</div>
<div data-node-type="line" id="magicdomid264" >event logs page. Why is the search filter width so small?</div>
<div data-node-type="line" id="magicdomid265" > </div>
<div data-node-type="line" id="magicdomid2290" >2. What is the difference between the Filter by Severity all and the all components dropdown?</div>
<div data-node-type="line" id="magicdomid267" >How many items are in that dropdown?</div>
<div data-node-type="line" id="magicdomid268" > </div>
<div data-node-type="line" id="magicdomid2293" >3. Can the status icon be located in the status column rather than relying on text? Can we</div>
<div data-node-type="line" id="magicdomid2295" >use visually hidden text to maintain accessibility compliance and sorting functionality?</div>
<div data-node-type="line" id="magicdomid271" > </div>
<div data-node-type="line" id="magicdomid272" >4. What problem does hiding the thresholds solve? Was it tested with any users?</div>
<div data-node-type="line" id="magicdomid273" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid1653" >> This new UI introduces:</div>
<div data-node-type="line" id="magicdomid276" >> - Accordion-style navigation</div>
<div data-node-type="line" id="magicdomid1354" > </div>
<div data-node-type="line" id="magicdomid1350" >The change of the navigation pattern to an accordion style is a great change and one that</div>
<div data-node-type="line" id="magicdomid1351" >we have been discussing. That is also the pattern used by the Carbon Design System, which</div>
<div data-node-type="line" id="magicdomid1352" >is an open source library backed by a team of IBM Designers, Developers, and a GitHub</div>
<div data-node-type="line" id="magicdomid1353" >community.</div>
<div data-node-type="line" id="magicdomid1355" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid277" >> - Collapsible navigation</div>
<div data-node-type="line" id="magicdomid1357" > </div>
<div data-node-type="line" id="magicdomid1359" >The collapsable primary navigation panel is a great feature!</div>
<div data-node-type="line" id="magicdomid1360" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid278" >> - Slim header to reduce vertical space</div>
<div data-node-type="line" id="magicdomid1362" > </div>
<div data-node-type="line" id="magicdomid1364" >The slim header is a great improvement also. Previously, we discussed the need for the time stamp </div>
<div data-node-type="line" id="magicdomid1365" >for the last data refresh based on our testing with users. I believe we have already discussed the</div>
<div data-node-type="line" id="magicdomid1366" >accessibility issues with a hover only approach to access that information as well.</div>
<div data-node-type="line" id="magicdomid1367" > </div>
<div data-node-type="line" > </div>
<div data-node-type="line" id="magicdomid279" >> - Updated styling to table and form elements & page layout to improve user experience</div>
<div data-node-type="line" id="magicdomid1369" > </div>
<div data-node-type="line" id="magicdomid1370" >It is not clear what user experience we are improving with the color palette update. The conversation</div>
<div data-node-type="line" id="magicdomid1371" >about this change has been defined as making the design more modern. This is a subjective change</div>
<div data-node-type="line" id="magicdomid1407" >that we should base on qualitative data. From my perspective, the best path forward will be to agree</div>
<div data-node-type="line" >on a component library. I have added this topic to the GUI Design Workgroup meeting this week. I</div>
<div data-node-type="line" >would advocate for using the Carbon Design System and rely on theming to accommodate any differences</div>
<div data-node-type="line" >in opinion over aesthetics that we aren't able to resolve.</div></div></div></div></div><BR>