<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;
color:black;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle18
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body bgcolor="white" lang="PT-BR" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Hi,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Although a lot of articles discourages mixing top-level tabs with sidebars, I think in this specific scenario we can make
these patterns work but we have to make sure that the users won’t be redirected to a blank landing page or we’ll have to create one.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">For instance, suppose Containers second-level first item has three children, then when clicking in “Containers” on the
top bar, the user should be redirected to the first item from this list (in the third level).<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">I’ve done some prototypes in the past with similar patterns and for the standard user who navigates on web, this pattern
of navigation is confusing. However the average virtualization, cloud, storage and network operator users are usually facing UIs more complex than this.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Between the two proposals I’m voting for proposal 1 but I prefer using Hamburger Button to trigger a floating grouped-menu.
This was proposed a few months ago in the ML.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">I was in a workshop with some developers from Globo.com (Brazilian news portal) two years ago when they were implementing
this menu. The current version is way more polished than the one they presented at the time and I really like how it turned. I’m attaching a screenshot, but you can see it live with animations at
<a href="http://g1.globo.com/">http://g1.globo.com/</a>.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">This discussion also brings another question, should new plugins be restricted only to new tabs on the first-level top
bar or should we create some sort of “path” in tab-ext.xml? I.e a new plugin can be appended to a specific region on Hosts Dashboard, on the second-level (since Aline suggested moving Peer hosts to that area) or even create a new level on a menu option that
previously had no child items.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Samuel<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">From:</span></b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"> Jan Schneider [mailto:schneidj@linux.vnet.ibm.com]
<br>
<b>Sent:</b> sexta-feira, 9 de outubro de 2015 13:06<br>
<b>To:</b> Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; Aline Manera <alinefm@linux.vnet.ibm.com><br>
<b>Cc:</b> kimchi-devel@ovirt.org<br>
<b>Subject:</b> Re: [Kimchi-devel] UI Change Request - Navigation<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-US">Hi Samuel,<br>
<br>
I just had a discussion with Walter. We found that we need up to two navigation levels under Host. The third navigation level however is not always required.
<br>
Please have a look at the two attached proposals to understand our requirements.<br>
<br>
Kind regards<br>
Jan and Walter<br>
<br>
<br>
<br>
<o:p></o:p></span></p>
<div>
<p class="MsoNormal"><span lang="EN-US">On 10/09/2015 04:36 PM, Samuel Henrique De Oliveira Guimaraes wrote:<o:p></o:p></span></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Hi Jan,</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">I’m not sure if I’m following you. Did you mean changing the second-level navigation to tabs instead of panel areas? If
so should we merge Hosts and Admin tab in one page and collapse the panels like old-ui behavior (maybe keeping the dashboard statistics on top unchanged) but with new-ui styles OR add two new tabs to the toolbar?</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">I think the concept of accordion/collapsible elements works for Admin, but I don’t see it working for the panels on Hosts
tab, unless we group Basic Information, Repositories and Debug Reports in one single collapsible area.</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">I also discussed with Aline if we should move Peer Hosts from top to the toolbar and make it a plugin. Here’s a mockup
I did with Chrome:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"><img border="0" width="1111" height="386" id="Picture_x0020_1" src="cid:image001.jpg@01D10298.ADF2F380" alt="cid:image001.jpg@01D10298.ADF2F380"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"><img border="0" width="1118" height="388" id="Picture_x0020_2" src="cid:image002.jpg@01D10298.ADF2F380" alt="cid:image002.jpg@01D10298.ADF2F380"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">The reason why I think all panels in these pages can’t be merged in one tab is because if all panels were collapsed, the
page height would be around 3757 pixels. If admin items were hidden, it would be around 2108 tall. I believe we would have to set the accordions to hide other items when one item is collapsed. They don’t seem that tall in the PDF because the images were resized.</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">I believe we have to study this following a “mobile-first” approach because once we all agree with the new design, even
if we don’t include the mobile design in 2.0 release, we’ll have to keep some markup ready for responsive design to receive the new styles. I think this new tab design would need some updates in tab-ext.xml and the JS files before 2.0 release, assuming other
people or teams would start developing new plugins from 2.0 and on. If we update how the tabs are built in the UI from 2.0 to 2.1 for instance, that may turn against us with retro compatibility issues.</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"><img border="0" width="1024" height="436" id="Picture_x0020_3" src="cid:image003.jpg@01D10298.ADF2F380" alt="cid:image003.jpg@01D10298.ADF2F380"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Regards,</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US">Samuel</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">From:</span></b><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">
</span><a href="mailto:kimchi-devel-bounces@ovirt.org"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif">kimchi-devel-bounces@ovirt.org</span></a><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">
[</span><a href="mailto:kimchi-devel-bounces@ovirt.org"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif">mailto:kimchi-devel-bounces@ovirt.org</span></a><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">]
<b>On Behalf Of </b>Jan Schneider<br>
<b>Sent:</b> quinta-feira, 8 de outubro de 2015 13:10<br>
<b>To:</b> Aline Manera </span><a href="mailto:alinefm@linux.vnet.ibm.com"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif"><alinefm@linux.vnet.ibm.com></span></a><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"><br>
<b>Cc:</b> </span><a href="mailto:kimchi-devel@ovirt.org"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif">kimchi-devel@ovirt.org</span></a><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"><br>
<b>Subject:</b> [Kimchi-devel] UI Change Request - Navigation</span><span lang="EN-US"><o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><span lang="EN-US"> <o:p></o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-US">Hello Aline,<br>
<br>
I refer to the latest version of the <br>
User Interface Design Specification - Kimchi, 2014-12-23 (aka UI Design Spec)<br>
which defines the following structure of functionalities:<br>
<br>
<b>Host</b> (second level navigation via panel areas)<br>
Performance (System Statistics)<br>
Basic Information<br>
Repositories<br>
Debug Report<br>
Software Updates <br>
<br>
<b>Guests</b><br>
no second level functionalities<br>
<br>
<b>Templates</b><br>
no second level functionalities<br>
<br>
<b>Storage</b><br>
no second level functionalities<br>
<br>
<b>Networks</b><br>
no second level functionalities<br>
<br>
<b>Administration</b> (second level navigation via collapse/expand)<br>
Firmware Update<br>
SEP Configuration<br>
Power Options<br>
Configuration Backup<br>
Network Configuration<br>
SAN Adapters<br>
Sensor Monitor<br>
<br>
<br>
<br>
</span><b><span lang="EN-US" style="color:#3333FF">Problem Statement</span></b><span lang="EN-US"><br>
<br>
We already decided to move all Administration functionalities to Host (currently not updated in the UI Design Spec).<br>
<br>
We are currently facing the following problems:<br>
1) Host now contains 12 second level functionalities, all other (Guests, Templates, ...) none.<br>
We need to introduce a second level navigation for Host other than collapse/expand<br>
2) The navigation bar elements Storage and Network (refering to Virtualization) also exist in the Host context.
<br>
This might confuse the user.<br>
<br>
<br>
<br>
</span><b><span lang="EN-US" style="color:#3333FF">Proposal</span></b><span lang="EN-US"><br>
<br>
The described problems can be solved with the following changes:<br>
<br>
1) Introducing a second level navigation<br>
2) Changing the structure of functionalities as follows:<br>
<br>
<b>Host</b><br>
Performance (System Statistics)<br>
Basic Information<br>
Repositories<br>
Debug Report<br>
Software Updates <br>
Firmware Update<br>
SEP Configuration<br>
Power Options<br>
Configuration Backup<br>
Network Configuration<br>
SAN Adapters<br>
Sensor Monitor<br>
<br>
<b>Virtualization</b><br>
Guests<br>
Templates<br>
Storage<br>
Networks<br>
<br>
<b>Containers (future extension)</b><br>
to be defined<br>
<br>
<br>
<br>
Let's start a discussion on this.<br>
<br>
</span>Kind regards<br>
Jan<o:p></o:p></p>
</blockquote>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>