5

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?

Improve this question
4
  • Why are you bringing up a modal dialog at all? That seems like a very restrictive design.
    – Alex Feinman
    Commented Aug 8, 2012 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
    Commented Aug 8, 2012 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
    Commented Aug 8, 2012 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
    Commented Aug 8, 2012 at 19:12

4 Answers 4

Reset to default
3

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.

Improve this answer
1
  • 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
    Commented Aug 8, 2012 at 13:46
5

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

Improve this answer
3

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?

Improve this answer
2

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.

Improve this answer
4
  • 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.
    – kastark
    Commented Aug 8, 2012 at 13:39
  • 1
    @dhmholley you're right, I agree with that observation. My suggestion should definitely be applied to dropdown menus.
    – AndroidHustle
    Commented Aug 8, 2012 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
    Commented Aug 8, 2012 at 14:11
  • @AlexFeinman good point, I've edited it now.
    – AndroidHustle
    Commented Aug 8, 2012 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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