Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on a design of a touchscreen version of some web application. Since it's a touchscreen I would like all clickable elements to be rather big and easy to tap (it's a simple kiosk, so multi-touch and zoom wouldn't work).

The standard hyperlink is well recognizable but rather small:

enter image description here

The button could be much bigger:

enter image description here

But the problem is that usually buttons are used for some actions and links for navigation. And than I thought: what if I a place a link on a button like this:

enter image description here

And if I use such a hybrid for navigation, would it work? Is it a link with a big clickable area around or is it just something confusing and disorienting? What do you think?

share|improve this question
add comment

8 Answers

I strongly agree with you that we’re losing a major opportunity to communicate with our users if we continue to use links and buttons interchangeably for both navigation and command actions. To differentiate between navigation and commands, I’d make the controls for commands looks as button-like as possible:

  • Label with black text.

  • Shaded background contrasting with the work area.

  • “Raised” 3-D look.

And make controls for navigation look as link-like as possible while still finding a way to delimit a large target “hot zone” for touchscreens:

  • Label with colored text.

  • Underlined.

  • Whitish background the same color as the work area.

  • As subtle marking of the hot zone boundaries as you can get away with.

For the last bullet, I would try some sort of “open” marking and rely on the Gestalt closure principle to make it appear as a rectangular target hot zone. For example, try surrounding the link with:

  • Large brackets.

  • Corners of the hot zone rectangle (but be sure these aren’t confused with selection “handles”).

  • Horizontal rules above and below.

The last one may eliminate the need to underline the text because the lower rule will suggest underlining even though there’ll be a wide gap between the text and the rule. Actually, that will also make your link labels more readable to boot.

share|improve this answer
    
I agree, though we've at times downgraded 'secondary actions' back into link form to better differentiate from the primary action (which we leave as a button). –  DA01 Jun 22 '10 at 14:41
    
I definitely see a need to differentiate secondary commands from primary in some cases. However, rather than using a text link, I’d suggest using a less salient version of the command button’s appearance. It would still be a shaded rectangle, but, compared to a primary command button, it could have a lower height, or a paler or less colorful shade, or no 3-D look (except maybe on mouseover). Or, if there’s only one primary button and it’s activated by the Enter key, I’d go with the thick-client convention and give secondary buttons less pronounced borders. –  Michael Zuschlag Jun 22 '10 at 16:09
add comment

As these are kiosk style touchscreens and the touch area is quite large, you are not restricted to using simply text. Perhaps a large button with an appropriate icon?

Button example with expanded text and icon

(Excuse the crude design, I don't have facility to do decent images here).

This method shows clearly that it is a button, and the extra realestate available can be used to provide more information to the user so they are aware of what the button actually does.

share|improve this answer
add comment

I think that it's more than ok to combine them.

Just make sure that the entire button is wrapped within one link. This way, when the user hovers anywhere on the button, you can enable proper hover feedback (e.g.: underline).

See this Screenshot for an example taken from Apple's current iPhone page.

share|improve this answer
    
Though touch-screens have a few issues with the hover concept –  Oskar Duveborn Jun 29 '10 at 12:32
add comment

Keep in mind what medium you are designing for - touch, not a mouse. Have you done some observing of people interacting with a kiosk or checked out best-practices for design for touch-devices?

Links are good for mouse-interaction since people have high accuracy with a mouse.
Buttons are good for finger (touch) interaction since they provide a bigger target area to hit.

  • Firstly, we want your user to be able to click - my opionion: Use the button (bigger target for thick fingers)
  • Secondly the user needs to understand what is going to happen when he/she clicks before they do. So button text is important.

After this discussion, I think underlining the text or not is not as important as providing a big target for clumsy fingers and descriptive text that guides the users.

share|improve this answer
add comment

The 'tag links' on this very page are a great example of something that is a link (in the markup), that behaves like a link (displays another page in place of the current one, with no other side-effects), but is styled very much like a button.

I think, usually, the context will make perfect sense so, for example, something that looks even vaguely like a button within a form will be interpreted as a button; something vaguely like a link outside of a form will be interpreted as a link. Therefore, I'd always be very careful when including a link inside a form.

I think it's reasonable to indicate the touch/click-area of a link, especially on a touch-screen device which has no equivalent of :hover. So adding a subtle background to a link seems reasonable to me.

share|improve this answer
add comment

In my experience, people don't really care about whether you show links or buttons if it doesn't make them think. Most visual ads have buttons, for example, even though they function as links.

The challenge is when you have a page where you have to use both of them. In this case you need to have a clear hierarchy between the primary action button and the secondary links/buttons. Still you can achieve this with sizing, styling, positioning.

And another thing: you can always make the touch area bigger than the text. This keeps your visual hierarchy and also provides good usability.

share|improve this answer
add comment

I find a button with underlined text rather confusing. Maybe using a button with an arrow indicating further navigation would be a better idea.

Also a very important factor would be the actual text on the button. If the button reads "Go to Google", the action would be pretty obvious. If it would rather read "Search", the redirection to a webpage wouldn't be expected by the user.

share|improve this answer
add comment

In my oppinion you should use the button approach if the link is not placed in text /sentence, paragraph/. That said - use the button background and link color but without underlining - this type of mixing /underlined text in a button/ is confusing for experienced users.

The end-user, however, rarely makes any difference between link and button.

share|improve this answer
    
I agree, read my answer below for more elaboration, because I think it is important that you're designing for touch interaction....not mouse. –  JeroenEijkhof Jun 22 '10 at 1:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.