<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=us-ascii">
<meta name="Generator" content="Microsoft Word 14 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:"Avenir Next";
panose-1:0 0 0 0 0 0 0 0 0 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{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:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:1896625805;
mso-list-template-ids:-263284202;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:"Courier New";
mso-bidi-font-family:"Times New Roman";}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></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 lang="EN-US" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Hello Horizon team,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">We’ve been working on some concepts that we’d like to see be incorporated in the launch instance workflow new UI or existing UI. We have a related design session
at the summit and would love to get feedback! We’ll be showing some early prototyping work that we’ve been doing.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><a href="http://junodesignsummit.sched.org/event/555561439e8187a25985473ea53cc078#.U2-w3ldLpT5">http://junodesignsummit.sched.org/event/555561439e8187a25985473ea53cc078#.U2-w3ldLpT5</a><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><a href="https://etherpad.openstack.org/p/juno-summit-graffiti">https://etherpad.openstack.org/p/juno-summit-graffiti</a><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Thanks,<br>
Travis<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<div style="border:none;border-left:solid blue 1.5pt;padding:0in 0in 0in 4.0pt">
<div>
<div style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal"><b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif"">From:</span></b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif""> Liz Blanchard [mailto:lsurette@redhat.com]
<br>
<b>Sent:</b> Friday, May 09, 2014 3:42 PM<br>
<b>To:</b> OpenStack Development Mailing List (not for usage questions)<br>
<b>Subject:</b> Re: [openstack-dev] [Horizon] [UX] Summary of Horizon Usability Testing and plan for Summit session<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">One last addition, I promise :)<o:p></o:p></p>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Another item that we would like to tackle in Juno based on the Usability Testing results is to make some improvements to the way we give our users inline help in forms. I’ve put together a doc that includes our current solution and some
suggestions for improvements. If there is time, we will be discussing this during the session as well:<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><a href="http://people.redhat.com/~lsurette/OpenStack/ImprovementstoInlineHelpinHorizon.pdf">http://people.redhat.com/~lsurette/OpenStack/ImprovementstoInlineHelpinHorizon.pdf</a><o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">See you all next week!<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Liz<o:p></o:p></p>
<div>
<div>
<p class="MsoNormal">On May 7, 2014, at 3:50 PM, Liz Blanchard <<a href="mailto:lsurette@redhat.com">lsurette@redhat.com</a>> wrote:<o:p></o:p></p>
</div>
<p class="MsoNormal"><br>
<br>
<o:p></o:p></p>
<div>
<p class="MsoNormal">Hi All,<o:p></o:p></p>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Another topic on the agenda for this session is to talk a bit about creating some guidelines around Error messaging in Horizon, and hopefully this will trickle through other components as needed. I’ve put together some initial thoughts
around this topic and want to get it out to the list so folks might have some time to take a look before discussing at the session. If you have any feedback, feel free to respond before summit and I can update this doc.<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><a href="http://people.redhat.com/~lsurette/OpenStack/ImprovingtheUXofMessageswithinHorizon.pdf">http://people.redhat.com/~lsurette/OpenStack/ImprovingtheUXofMessageswithinHorizon.pdf</a><o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Thanks,<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Liz<o:p></o:p></p>
</div>
<div>
<div>
<div>
<p class="MsoNormal">On Apr 30, 2014, at 2:50 PM, Jacki Bauer <<a href="mailto:jacki.bauer@rackspace.com">jacki.bauer@rackspace.com</a>> wrote:<o:p></o:p></p>
</div>
<p class="MsoNormal"><br>
<br>
<o:p></o:p></p>
<div>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif"">Hi everyone,<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif"">As Liz mentioned, we did some testing and one of the big findings was that the Launch Instance form had some usability issues. I took a stab at mocking up a launch instance process that addresses
some of these issues. You can read the usability findings <a href="https://wiki.openstack.org/wiki/Horizon-usability-test-findings">
here</a>.<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif""><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif"">So, I know some of you will ask about work that is already being done around improving the launch instance form - <a href="https://www.youtube.com/watch?v=CO62UUQPTCM">here</a> and <a href="https://blueprints.launchpad.net/horizon/+spec/launch-instance-ux-enhancement">here</a>. That
work is represented here too! I took what I felt to be what was best about the current form and best about the new work, addressed the usability issues, and tried to come up with something that wasn’t too different from either of these.<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif""><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif"">If you are interested in any of the design thinking/reasoning behind the mockups, go ahead and keep reading below, otherwise, just take a look at the attachment. Feedback is welcome!<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif""><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif"">Cheers,<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif"">Jacki<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif""><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Avenir Next","serif"">Why I did things the way I did:<o:p></o:p></span></p>
</div>
<div>
<div>
<div>
<ul type="disc">
<li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">I used a multi-step form for a few reasons. 1-The Horizon people are interested in wizard patterns that could be used for launching instances and other step by step workflows. 2-The current launch instance divides
the config options into tabs, but users often didn’t notice the tabs until they tried to launch the instance and got an error. The “*” indicating required fields on each tab confused users as well. Since all but one tab contained required fields, the tabs
didn’t do anything to reduce the number of clicks a user had to make in order to complete the form.<o:p></o:p></span></li></ul>
</div>
<ul type="disc">
<li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">A best practice for wizards is to never reveal specific steps to the user if the number or names of those steps can change. So, I settled on four steps. Some users might not want to visit all these steps, and
this is maybe a flaw. Maybe we can think about a way to allow users to skip steps.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">I decided to stack all fields vertically with labels to the left. I did this because I wanted the layout of form fields to be consistent throughout. This layout is very readable and pretty standard. It saves vertical
space too.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">I changed the network selection to checkboxes. Users thought the drag and drop style control was inconsistent with the rest of Horizon.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">Users really liked the graphs that show their quota when they are selecting a flavor. But this didn’t really work with the new layout, so I settled on a different way of presenting the same information. It’s not
as visually appealing as the graphs were, but it’s more flexible - could be used throughout Horizon to show quota information on demand and in context.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">I added the ability to create key pairs. This was a big finding from the usability study.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">I did <b>not</b> add the ability to create a network on the fly. Another big finding from the usability study was that users were frustrated by the fact that they had to have at least one network created to launch
an instance. However, we know that creating networks is largely an admin task, not an end-user one. So instead, I made it impossible for a user to open up the launch instance form when there are no networks.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">There are more items selected for the user by default.
<o:p></o:p></span></li></ul>
<ul type="disc">
<ul type="circle">
<li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level2 lfo1">
<span style="font-family:"Avenir Next","serif"">Defaults have some advantages: they allow users to progress more quickly through forms. They also reduce the need for complex logic and error messages, because it becomes harder for users to leave something blank.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level2 lfo1">
<span style="font-family:"Avenir Next","serif"">The disadvantage to defaults is that the user may not notice a field. Since there will be no validation message forcing their attention onto the field, they might wonder how their instance came to have the configuration
that it does.<o:p></o:p></span></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level2 lfo1">
<span style="font-family:"Avenir Next","serif"">Defaults could be problematic for admins who do not want to encourage users to select a pre-defined default. It might mean that we need to allow admins to specify these default values for their environment.<o:p></o:p></span></li></ul>
</ul>
<ul type="disc">
<li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
<span style="font-family:"Avenir Next","serif"">The flavor selection has been expanded from a drop down to a list with details about the resources associated with each flavor, because we have some indication that users want more details about flavors when they
are selecting them. In the current launch instance form, flavor information is available but it’s somewhat disconnected from the flavor selector itself.<o:p></o:p></span></li></ul>
</div>
</div>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<div>
<p class="MsoNormal" style="margin-bottom:12.0pt"><o:p> </o:p></p>
<div>
<p class="MsoNormal">On 04/24/2014 09:10 AM, Liz Blanchard wrote:<br>
<br>
<o:p></o:p></p>
<p class="MsoNormal" style="margin-bottom:12.0pt">Hi All,<br>
<br>
One of the sessions that I proposed for the Horizon track is to review the results that we got from the Usability Test that was run on Horizon in early March. I wanted to share some of the background of this test and the high level results with you all so that
we can start the conversation on this list and then continue with agreeing on next steps during Summit. There will be a few follow-ups to this e-mail from myself and Jacki Bauer which will propose some potential solutions to the high priority findings, so
be on the look out for those :)<br>
<br>
---Quick overview of Usability Testing...What is it? Why do it?---<br>
Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system.<o:p></o:p></p>
<p class="MsoNormal"><br>
<br>
<o:p></o:p></p>
<p class="MsoNormal" style="margin-bottom:12.0pt">---Who was involved? What did we need to do to prepare?---<br>
A number of user experience engineers from a bunch of different companies got together and helped plan for a usability test that would focus on self-service end users and the ease of use of the Horizon Dashboard as it exists for the Icehouse release. This effort
spun off from the Persona work that we've been doing together. Some folks in the group are just getting into contributing to the design of OpenStack and doing a baseline usability test of Horizon was a great introduction to how the usability of the Horizon
UI could continue to be improved based on user's direct feedback.<br>
<br>
What we needed to get done before actually jumping into the testing:<br>
1) Agree on the goals of the testing.<br>
2) Create a screener and send out to the OpenStack community.<br>
3) Create a list of tasks that the user would complete and give feedback on during the testing.<br>
<br>
---Who we tested?---<br>
6 people who we considered to be "self-service end users" based on their screener responses.<br>
<br>
---What were the tasks that were tested?---<br>
<br>
Scenario 1: Launching an instance<br>
Individual Tasks:<br>
-Create a security key pair.<br>
-Create a network.<br>
-Boot from cirros image.<br>
-Confirm that instance was launched successfully.<br>
<br>
Scenario 2: Understand how many vCPUs are currently in use vs. how much quota is left.<br>
Individual Tasks:<br>
-Check out Overview Page to review current quota use/limit details.<br>
<br>
Scenario 3: Take a snapshot of an Instance to save for later use.<br>
Individual Tasks:<br>
-Either Launch an instance successfully, or identify a running instance in the instance view.<br>
-Choose to take a snapshot of that instance.<br>
-Confirm that the snapshot was successful.<br>
<br>
Scenario 4: Launch an instance from a snapshot.<br>
Individual Tasks:<br>
-Choose to either create an instance and boot from a snapshot, or identify a snapshot to create an instance from.<br>
-Confirm that the instance was started successfully.<br>
<br>
Scenario 5: Launch an instance that boots from a specific volume.<br>
Individual Tasks:<br>
-Create a volume.<br>
-Launch an instance using Volume X as a boot source.<br>
<br>
---When and how we ran the tests?---<br>
These hour long tests were run over the first two weeks of March 2014. We focused on the latest bits that could be seen in the Icehouse release. The moderator (a UX researcher from HP) would ask the questions and the rest of the group would vigourously take
notes :) After all of the testing was complete, we spent some time together debriefing and agreeing on the prioritized list of updates that would be best to make to the Horizon UI based on user feedback.<br>
<br>
---What were the findings?---<br>
<br>
High Priority<br>
* Improve error messages and error message catalog.<br>
* Fix Launch Instance workflow for end user and power user.<br>
* Improve informational help information about form fields.<br>
* Fix terminology. (e.g. launch instance, boot, shutoff, shutdown, etc.)<br>
* Show details for key pair and network in Launch Instance workflow.<br>
* Recommend a new Information Architecture.<br>
<br>
Medium Priority<br>
* Create UI guidelines (of best practices) for Developers to use.<br>
* Improve Online Help.<br>
* Provide clearer indication the application is working after clicking a button and the application doesn't respond immediately.<br>
* Ensure consistency of network selection. (Drag and drop of networks very inconsistent from the other pieces of the launch instance modal)<br>
* Create consistency of visualizations and section of action button recommendations on Instance table.<br>
* Suggest defaults for the forms entry fields.<br>
* Provide Image information details during image selection.<br>
<br>
Low Priority<br>
* Allow users to edit the network an instance after launching instance.<br>
* Resolve confusion around the split inline actions button.<br>
* Explain what the Instance Boot Source field in Create Instance modal.<br>
* Provide description/high level information about flavors for flavor selection.<br>
* Make sorting clearer visually.<br>
* Provide solution for subnet checkbox to improve usability.<br>
<br>
Nice to Have<br>
* Provide "Save as Draft" option in the wizard.<br>
* Change security group default name to "Default security group".<br>
<br>
Well if you've read this far, thank you for your interest in this topic!! We look forward to sharing some design proposals over the next week and continuing the discussion on tackling some of these items at Summit. Please let me know if anyone has any questions
or concerns.<br>
<br>
Best,<br>
Liz<br>
<br>
<o:p></o:p></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</div>
<p class="MsoNormal"><Launch Instance.pdf>_______________________________________________<br>
OpenStack-dev mailing list<br>
<a href="mailto:OpenStack-dev@lists.openstack.org">OpenStack-dev@lists.openstack.org</a><br>
<a href="http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev">http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev</a><o:p></o:p></p>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</div>
<p class="MsoNormal">_______________________________________________<br>
OpenStack-dev mailing list<br>
<a href="mailto:OpenStack-dev@lists.openstack.org">OpenStack-dev@lists.openstack.org</a><br>
<a href="http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev">http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev</a><o:p></o:p></p>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</div>
</div>
</body>
</html>