Difference between revisions of "Links and Buttons"

From Eclipsepedia

Jump to: navigation, search
(New page: ''This is basic content only. Please convert to the '''Template file for adding to the UI Best Practices''' and fill in more complete information.'' ...)
 
m
 
(6 intermediate revisions by one user not shown)
Line 1: Line 1:
 
''This is basic content only. Please convert to the [[UI Best Practices Template v3.x | '''Template file for adding to the UI Best Practices''']] and fill in more complete information.''
 
''This is basic content only. Please convert to the [[UI Best Practices Template v3.x | '''Template file for adding to the UI Best Practices''']] and fill in more complete information.''
 +
 +
Establish guidelines for use of hyperlinks.
 +
 +
Offer guidance on when to use links and when to use command buttons.
  
  
 
'''Primary & secondary commands''' (within same page)
 
'''Primary & secondary commands''' (within same page)
 +
 +
'''[ Command Buttons ]'''
  
 
Use command buttons for:
 
Use command buttons for:
* Primary actions, such as Print in a print dialog
+
* Primary actions, such as Save in the form-based editors. A more general example Print in a print dialog
* Secondary commands where it make sense to use a button instead of a link, such in a group of buttons where primary actions are shown first, and the secondary command follows
+
* Commands with significant consequences, such as final actions that are not reversible, such as "Delete" or "Run"
 +
* Secondary commands where it make sense to use a button instead of a link, such as in a group of buttons where the primary actions are shown first, and the secondary commands follow
  
 +
 +
Do not use command buttons for:
 +
* Long text strings, consisting of 5 or more words. These look less awkward as links than as command buttons, regardless of whether they are actions or navigation.
 +
 +
 +
'''[ Links ]'''
  
 
Use links for:
 
Use links for:
* Navigation to another page, window, or Help topic
+
* Navigation to another page, window, or Help topic. This includes contexts such as form editors, dialogs, and wizards
* Secondary actions, such as in dialogs or wizards (a button or link could be used; consider other factors noted here). This is a visual affordance that de-emphasizes secondary commands.
+
* Secondary actions, such as in dialogs or wizards. This is a visual affordance that de-emphasizes secondary commands. (See "Factors that influence the choice of a command button or link" below.)
* Long text strings, consisting of 5 or more words, look less awkward as links than as command buttons, whether for actions or navigation
+
* Long text strings, consisting of 5 or more words. These look less awkward as links than as command buttons, regardless of whether they are actions or navigation.
 
* Commands embedded in a body of text, as in forms
 
* Commands embedded in a body of text, as in forms
* Command is part of a menu or group of related links
+
* Commands that are part of a menu or group of related links
 +
 
 +
 
 +
Do not use links for:
 +
* Primary actions
 +
* Commands with significant consequences, that are irreversible
 +
 
 +
 
 +
Additional considerations that influence the choice of a command button or link:
 +
 
 +
Visual affordance of primary vs. secondary actions -- Links are less prominent than command buttons so are suitable for secondary actions. Either a command button or a link could be used for secondary actions. In addition to visual affordance, consider these factors as well:
 +
* Length of text string
 +
* Relationship -- Whether it accompanies a set of command buttons or is solo
 +
* Context -- If in a form body or a form header.
 +
* Real estate -- Links can take up a lot of space. In some cases the choice is not between links and command buttons but between these an some other UI mechanism. For
 +
example, the header better accommodates tool items than links.
 +
 
 +
 
 +
'''[ Command Links ]'''
 +
 
 +
Mention how/when to use Command Links in preference/property  pages.
 +
 
 +
That's where they're used the most right now.
 +
 
 +
Java/Code Style/Formatter and several others use it to open another pref page
 +
 
 +
Plug-in Development/OSGi Frameworks opens a browser to show an extension point description (help)
 +
 
 +
Here's one from WTP:
 +
 
 +
[[Image:common_commandlink.png]]
 +
 
  
 +
Open project properties of a EJB project for example, open Targeted Runtimes ... click on "Uninstall Facets..." the shown dialog will be  opened.
  
Other factors that influence use of a link or a command button:
+
You can open the same if you go to "Project Facets" and click on the regular button "Modify..."
* Visual affordance
+
* Consider using links to deemphasize secondary commands
+
* Context is relevant whether is primary or secondary, e.g. print in print dialog is primary (use Command Button), whereas print in web page is secondary (use Link)
+
* UI environment
+
* Some actions are available only on demand
+
  
 +
- Sebastian Davids
  
Any use cases for ''Command Links'' in Eclipse?
+
[[Category:UI_Guidelines]]

Latest revision as of 12:45, 31 October 2007

This is basic content only. Please convert to the Template file for adding to the UI Best Practices and fill in more complete information.

Establish guidelines for use of hyperlinks.

Offer guidance on when to use links and when to use command buttons.


Primary & secondary commands (within same page)

[ Command Buttons ]

Use command buttons for:

  • Primary actions, such as Save in the form-based editors. A more general example Print in a print dialog
  • Commands with significant consequences, such as final actions that are not reversible, such as "Delete" or "Run"
  • Secondary commands where it make sense to use a button instead of a link, such as in a group of buttons where the primary actions are shown first, and the secondary commands follow


Do not use command buttons for:

  • Long text strings, consisting of 5 or more words. These look less awkward as links than as command buttons, regardless of whether they are actions or navigation.


[ Links ]

Use links for:

  • Navigation to another page, window, or Help topic. This includes contexts such as form editors, dialogs, and wizards
  • Secondary actions, such as in dialogs or wizards. This is a visual affordance that de-emphasizes secondary commands. (See "Factors that influence the choice of a command button or link" below.)
  • Long text strings, consisting of 5 or more words. These look less awkward as links than as command buttons, regardless of whether they are actions or navigation.
  • Commands embedded in a body of text, as in forms
  • Commands that are part of a menu or group of related links


Do not use links for:

  • Primary actions
  • Commands with significant consequences, that are irreversible


Additional considerations that influence the choice of a command button or link:

Visual affordance of primary vs. secondary actions -- Links are less prominent than command buttons so are suitable for secondary actions. Either a command button or a link could be used for secondary actions. In addition to visual affordance, consider these factors as well:

  • Length of text string
  • Relationship -- Whether it accompanies a set of command buttons or is solo
  • Context -- If in a form body or a form header.
  • Real estate -- Links can take up a lot of space. In some cases the choice is not between links and command buttons but between these an some other UI mechanism. For

example, the header better accommodates tool items than links.


[ Command Links ]

Mention how/when to use Command Links in preference/property pages.

That's where they're used the most right now.

Java/Code Style/Formatter and several others use it to open another pref page

Plug-in Development/OSGi Frameworks opens a browser to show an extension point description (help)

Here's one from WTP:

Common commandlink.png


Open project properties of a EJB project for example, open Targeted Runtimes ... click on "Uninstall Facets..." the shown dialog will be opened.

You can open the same if you go to "Project Facets" and click on the regular button "Modify..."

- Sebastian Davids