TOP 10 UX recommendations for SL Command Link usage
Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today.
After I’ve explained how to build and design custom control – Command Link for Silverlight, I’m now sharing some best UX practices and guidelines regarding the implementation of the Command Link control. Here is the list of best UX practices for design, implementation and usage of Command Link control for Silverlight.
This article is related to the Silverlight tutorial: HOW TO build Command Link Control in Silverlight with Expression Blend 3 and Behaviors, so be sure to refer to that one for more details and complete tutorial how to build this specific custom control in Silverlight and use it later on in your applications.
In this article, I’m sharing some best UX practices and guidelines regarding the implementation of the Command Link control, so I hope you will find it useful for your future projects and possible Command Link control implementations.
Also, for more UX guidelines, take a look at this article I’ve written sometime ago here on UXPassion.com: User experience (UX) guidelines for Windows, Microsoft Dynamics NAV and Microsoft Dynamics AX.
(I’m really happy and proud about those Dynamics guidelines on the link above – I used to work for the Microsoft Dynamics UX team in Copenhagen, Denmark, so if someone from that team is reading this – Fortsat god dag!).
Anyway, back to the UX guidelines…
Command Link UX guidelines
Developing and even visually designing a control is one task; using it properly, in the right context with the right scenarios, is where UX and usability comes into place. At first sight you might consider command links as a distant relatives of radio buttons. After all, they are used in pretty much the same manner: to chose only one option from the several ones that are available—meaning that they always appear in sets, never isolated. As I said in the introduction to this tutorial, they appear lightweight, clean, without heavy borders, resembling the hyperlinks (therefore the name).
The other part of the name, “command,” makes a lot of sense because, by clicking the command link, users are both committing the command and closing the window or proceeding to the next page (if used within the wizards, as was the case when I was explaining the wizards pattern).
So, here are several of the most important guidelines regarding usage of the command links:
- Command links should be used only in cases when they are presenting mutually exclusive options. Simply stated, users can select one and only one available option.
- When a user clicks a command link, it will execute the command and close the window (or dialog), or it will proceed to the next step if used within wizards. This implies that they cannot be used within property windows or within tabs, since they are closing the window after the user clicks them. Of course this holds true for desktop applications. In web space and when designing RIA Silverlight applications, you should use them in the same manner: you can use them either in pop-ups or modal dialogs or as a part of wizard and navigate to the next page.
- If you are using command links within wizards, they should be used for gathering users’ choices and selections, not processing them and committing them right away. There are at least two good reasons for this. First, when users see command links, they will intuitively connect them with regular hyperlinks seen on the web and make an assumption that they are connected with flow and navigation. Second, sometimes users will want to return to their previous step and select a different option; you must enable them to do so.
- Never use less than two, and try to keep the number of command links on same window or page to no more than five or so. Seriously: never use a single command link. The fact is that, though they look lightweight in their appearance, command links do take up some serious screen space; therefore, if you need six or more options, consider using radio buttons.
- If you have really short explanations or commands, consider using regular command buttons.
- Description is optional. Provide it when it makes sense to the users, but don’t put too much text. Users should be able to see and make decisions fast. Also, if the main instruction is self-explanatory, you don’t need to use descriptions. Remember: they are optional.
- On dialog boxes, when gathering information from users and when clicking on a command link will execute a command and close the dialog, provide clear and explicit Cancel or Close buttons (depending on the context). That way the user will be able to cancel the operation fast and will not need to read through command links.
- If, after a user clicks a command link, the action is not carried out right away, display a busy cursor. If that lasts for longer than five seconds, consider showing a progress bar.
- The icon is not optional: all command links must have an icon. The arrow icon is the default; use it in all cases except the following:
- There is a need for immediate elevation (user account control dialog will appear…). In this case you should use a shield icon.
- Adding a custom icon will help better communicate and visually identify the specific option. The arrow icon is 16 by 16 pixels, but you can use larger icons –32 by 32 pixels is standard. If you need to position a shield on top of an existing icon, then always go for 32 by 32 or, if space allows, consider using 48- by 48-pixel large icons.
- Command link labels should be clear, concise and understandable. If the option they are presenting is complex, you can use descriptions—but, again, keep in mind that they are optional and should not be overused.
Let’s keep in touch – You should follow me on Twitter now!