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 have page containing two types of links:

  • Standard Hyperlink: navigates to a webpage
  • jQuery dialog link: displays a jQuery modal dialog explaining a term in more detail

Here is a sample:

enter image description here

Currently, all of these links are the same color as standard text on the page. I will change the color to make them look like hyperlinks.

Should the dialog links be a different color than the hyperlink? If so, any color suggestions?

share|improve this question
    
Why are you bringing up a modal dialog at all? That seems like a very restrictive design. –  Alex Feinman Aug 8 '12 at 14:10
    
@AlexFeinman I use the modals for content too small for an entire page but would be too much info on the current. –  ray023 Aug 8 '12 at 14:52
1  
But why must it be modal? why can't it be a popup that doesn't block actions on the rest of the page? –  Alex Feinman Aug 8 '12 at 16:46
    
@AlexFeinman No one says it has to be modal :) I picked modal for two reasons: 1. Modal forms are there only to provide a little more explanation about the term hyperlinked on the main page. So, they click the link, they read, they click 'ok' and they are back 2. There's no benefit to move the dialog around the page or compare to other popup dialogs. Restrictive? yes, but, IMHO, simpler to navigate. I am open for arguments though. –  ray023 Aug 8 '12 at 19:12

4 Answers 4

up vote 3 down vote accepted

If something is supposed to be clickable and its inline content I would suggest leaving it as a anchor (link). Anchor convey to a user that there is more contents to be found behind this "click/touch" item. Based on the image you have posted above the links will display additional content. The only reason I have found to deviate from this pattern is if a link is being used to represent a secondary/tertiary action.

share|improve this answer
    
There is a problem though when a link has both a hover effect that provides one type of content, and one click effect that provides another type of content. Facebook uses this a lot and I don't think they have tried to convey it at all. They expect users to eventually find it by accident. –  AndroidHustle Aug 8 '12 at 13:46

Have you considered matching up functionality with an icon? This might seem a bit strange at first but the cognitive association will develop over time (and I mean time spent on the page, not training as in an enterprise system with trained users)

Maybe for modal links something like New window icon or if the modal content is usually info info link icon

Then external links can be left as-is or prepended/appended with external link and internal links can use something like enter image description here

share|improve this answer

In more traditional UI's, buttons and menu items that bring up a dialog by convention have an elipsis on them. Perhaps you can use that convention as well?

share|improve this answer

A popular indicator to show that a link holds a dropdown dialogue is to add a down pointing triangle, showing that when triggered it will expand something, eg.

YouTube:

enter image description here

Facebook:

enter image description here

StackExchange:

enter image description here

This pattern is very useful to convey that the control will expand upon click or hover (where unfortunately it varies).

Please note that this doesn't convey a modal window popup. However it may be worth to consider if what you're after would fit better in a dropdown rather than a modal window.

share|improve this answer
4  
In my experience the association with the downwards pointing triangle is a dropdown or menu. A modal dialog is definitely not what that icon suggests, so I'm not sure this is an appropriate solution. –  dhmholley Aug 8 '12 at 13:39
1  
@dhmholley you're right, I agree with that observation. My suggestion should definitely be applied to dropdown menus. –  AndroidHustle Aug 8 '12 at 13:42
    
You may want to edit your answer--a dropdown may actually be a better answer here than a modal dialog... –  Alex Feinman Aug 8 '12 at 14:11
    
@AlexFeinman good point, I've edited it now. –  AndroidHustle Aug 8 '12 at 14:17

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.