Usability Analysis of the Visual Studio 2008 Shortcut Keys Dialog

Tuesday, 15 April 2008 16:10 by snyhol

Assigning the macro to a shortcut key is fairly easy, although the dialog's UX is awkward at best.  That's putting it nicely.  It takes too many steps, provides awkward user feedback, and does not include intuitive controls or simple, clear verbiage for those controls.  There is even a page on the MSDN devoted to explaining how to use this dialog.

Here's how to do assign a shortcut key in Visual Studio 2008.

  1. Open the Tools Dialog (Tools | Options menu item). 
  2. In the dialog, Open the Environment options and select Keyboard. 
  3. In the tiny listbox, find and select your macro (#1 below).
  4. Click in the textbox for "Press shortcut keys" (or get the focus to that textbox).
  5. Press the shortcut key you want to use (#2 below).
  6. Check the drop down at the bottom of the dialog to make sure that your desired shortcut key is not already in use (#3 below).
  7. If you want to continue, click the Assign button (#4 below).
  8. Confirm that the shortcut was assigned by checking the drop down box titled "Shortcuts for the selected command."  Notice how this drop down was blank before and now it has a value.  That's pretty subtle user feedback. (# 5 below).
  9. If you really want to make sure, you can click in (or tab to) the "Press shortcut keys" textbox again, and again press your shortcut key to confirm that your command will now be shown in the bottom drop down. 

Using-the-Visual-Studio-2008-Keyboard-Shortcuts-Dialog

 

What lessons can we learn from this example? 

  • Strive to reduce the number of user actions it takes to perform an action.  This form took more steps than it should have. 
  • Use more screen real estate if you have a lot of data.  It was annoying to scroll through such a large list in that tiny listbox.  
  • Allow windows and forms to be resized.   I could not make the dialog bigger to see more items in the listbox.  
  • Use the right controls for the data.  Drop downs imply that a user can choose an option from the list.  A multiline label would be a better choice for multiple lines of read-only data.  
  • Use descriptive, self-documenting labels next to the controls.  The labels should have a conversation with the user.  Think of the label as teaching the user how to use the form.  For example, instead of "Show commands containing:" the label could say "Select a command below to work with its shortcuts (type here to filter the list):". Instead of simply telling the user what is in the control, explain to the user how they should interact with the control.  If your labels are better, there is less need for documentation and support.
  • Use data visualization.  To see what shortcut key is assigned to a command, I had to find the command, select it, then look at the "Shortcuts for selected command" drop down.  To perform a reverse lookup, I had to click in the "Press shortcut keys" textbox, press the shortcut keys, then look in the "Shortcut currently used by" drop down.  Perhaps a better control for this page would have been a two column grid, with the first column containing the command name and the second column containing the assigned keys.  To enhance usability for power users, the columns would be sortable and filterable.  It would have been cool to see all assigned shortcuts that included the "C" key.
  • Allow the user to filter, lookup, and sort the data.  Provide reverse lookups.  They got this one mostly correct. 
  • Consider the flow of the form and explicitly communicate the flow to the user.  For example, this form does several things.  It looks up shortcuts for a command, looks up commands for a shortcut, and manages all those associations.  Even just adding some control grouping would have helped make the form more straightforward.  This particular form needed some extra labels on it to explain the workflow for using the form.  In fact, that's another one: if you need extra labels to explain how to use the form, you probably need to redesign the entire form!
  • Provide explicit user feedback.  They got this one mostly right.  After I clicked the Assign button, the "Shortcuts for selected command" drop down populated with the newly assigned shortcut.  If I chose a shortcut key that was already used (like CTRL+C), the "Shortcut currently used by" drop down changed to tell me that it was already assigned.
  • Don't be afraid to redesign.  The current version of your application is only a prototype for the next version.  It can and probably should be redesigned and improved.
  • Hire a user experience specialist or designer to look over your application, even the dialogs!
  • Most importantly, the form/application should just work!  In this case, the dialog does work.  Good job to the developer.  Broken, buggy functionality will completely negate any design effort. 

If it doesn't work, people won't use it. 

If it is hard to use, people will complain but still use it until they find a better alternative. 

If it is easy to use, people will love it.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

September 5. 2008 13:51