Hyperlink Tutorial
Summary:
There are a number of options as to how, where, and why you use hyperlinks in your interfaces. Their proliferation on the web has swung the doors wide open. Here are three of the most common uses:
- To redirect the user to a new location. Hyperlinks almost always signify navigation of some sort. On web pages, this usually manifests as a link to a new page that the web browser will have to load and render. In GUIs, many hyperlinks will direct users to help pages, modal dialogs, or even web sites.
- To perform a non-modal or transparent action. Many GUIs use hyperlinks to present an optional action to the user. In this capacity, they rarely introduce a new screen or redirect the user, but they do result in a change of context or information displayed. Don't worry about this type of change being jarring, as users have come to associate hyperlinks with the expectation that their view or data will change in some way.
- As an indicator of additional content. As has been the case in Windows help for some time now, oftentimes words are placed in hyperlinks to indicate to the user that there is additional content associated with the word. Typically, when the user hovers over such a hyperlink with the mouse, an informational pop-up such as a tool tip will show additional related content (such as a definition or a list of related links-these themselves might be hyperlinks). Clicking the hyperlink will usually have no effect beyond the rollover behavior.
Where to Find It:
Java Java does not have a direct implementation of a hyperlink. There are, however, two methods for adding these elements to a Java GUI:
- Swing JButtons with customized bitmaps (where the text is drawn into the bitmap)
- Using the Swing JEditorPane.
C# C# provides a hyperlink control in the System.Windows.Forms.LinkLabelclass.
The Basics:
Java Java does not have a built-in mechanism for rendering hyperlinks. Java's swing library does, however, have a robust and flexible implementation of a button. Here is some information regarding the basic details of the button class:
Using the JButton, you can specify separate rollover, hover, and pressed images to render for the button. Render your text directly into image files and set them on your button for a slick effect. Or, if you want to take complete control, you can handle the rendering of buttons yourself by monitoring the painting events.
C# Microsoft's new development platform, .NET, and its supporting languages provide more intrinsic support for hyperlinks via the LinkLabel component.
MSDN Documentation on the LinkLabel class
A particularly useful method of this class is the Start method
Here is some distilled information about the LinkLabel class.
LinkLabels are a type of label control in .NET that allow the embedding of multiple hyperlinks. These labels support a LinkClicked event can you can attach to in order to execute code whenever the user clicks on one of the links in your control's text.
In practice, the LinkLabel control works most elegantly when you are using its default behavior, where all of the text in the control is a single hyperlink. Doing this allows you to completely configure the control using Visual Studio .NET or another designer. Using multiple links in a single hyperlink, although potentially useful, requires determining character positions and explicit in-code configuration.
Within the LinkClicked event handler, you write code to perform the action indicated by the hyperlink. If your hyperlink launches an external application or document, use the
System.Diagnostics.Process.Start( string )static method. The string you pass can be either:
- The URL of a web page to visit in the user's default web browser. This string must be of the form "
protocol://address", where protocol is the transmission protocol (e.g., http or https), and address is the address to visit (e.g., www.google.com). The web address can be partial or complete, but specifying a complete address will guarantee better support.- The name of a file to open in its default viewer. For example, if you pass in the name of a text file as "
c:\log.txt", the text file will open in the default text viewer (probably Notepad). Similarly, files with a .DOC extension will launch in WordPad or Word, and files with a .JPEG extension will launch in the image and picture viewer.- The email address of somebody to write an email to. Specifying an email address in the form "
mailto:emailaddress" will cause the system to launch the user's default email application and prepare a new message where the "To" field is set to the address specified.
Customization:
C# The LinkLabel class has a number of useful properties, including properties to set the link's color (ActiveLinkColor, DisabledLinkColor, LinkColor, and VisitedLinkColor) and behavior (LinkBehavior).
Best Practices:
Although their adaptation has been widespread, we have not seen enough examples of the hyperlink in native GUIs to develop a comprehensive set of best-practice recommendations. Here are a few of our observations, but please feel free to experiment and research on your own.
- Don't use too many hyperlinks. While I haven't seen this in any GUIs yet, there are plenty of web pages that simply underline and link too many things. The hyperlink should be used to make your interface a little bit more fresh and elegant than it might otherwise have been, and not to make everything clickable and selectable. For example, you do not need to make check-boxes hyperlinks. This is especially true on the Windows platform, as the newer check box and radio button classes already have rollover visual cues.
- In a transitional GUI (one that has both traditional and newer user interface elements), try to keep your hyperlinks simple. For example, always display the underline and use system-default colors. This behavior will make your element seem more traditional to users (think early web pages), and won't set them up to expect a really flashy interface.
References:
Other Helpful Resources: