I want to make the user feel that clicking the item will bring up more detail about it in a modal window.
2
-
For one, don't use a standard link style like you use for your other links. And possibly don't use a link at all.. but like a round button with a question mark.– user39400Feb 24, 2014 at 12:06
-
@LowerClassOverflowian I would love it if you give me link(s) to example(s)– AlexFeb 24, 2014 at 12:08
Add a comment
|
5 Answers
Modal windows are quite common nowadays so the user might not but surprised to see something like that appear.
The content of the modal window is more important than the pattern itself.
- If the content is an action, it is a common pattern to use ellipsis (aka suspension points).
- If the content is just information and long, you should just use a simple link or a button.
Clicking this button will open a modal window (it says : About the playlist)
- If the content is just information and short : do not use a modal window, use a tooltip.
The best way would be have an icon accompany the URL. Off the top of my head, I know of two icons that lend themselves to representing a modal dialog:
External Link
New Window
You could then have a tooltip over the icon that says something to the effect of:
View more details in a modal dialog
Icons source: jQuery UI ThemeRoller
answered Feb 24, 2014 at 16:47
-
Isn't a modal dialog supposed to be contained in the current window? An external link should open a new window.– A.LFeb 24, 2014 at 17:09
-
@n.1 - Of course. I'm not saying otherwise. I'm simply saying those 2 icons visually lend themselves to represent a modal dialog as well. Feb 24, 2014 at 17:24
-
I don't know about the general convention but I had the same problem and used the following solution.
The link is displayed as a bootstrap button and I added the fullscreen glyphicon.
Here is the result:
First icon is edit and second icon is fullscreen, I hope the user will understand that by clicking on the link he will be able to edit the entity in fullscreen, in this case a modal window.
Having call to action whether it is a link or a button with "View more details" as label for example should do, modal windows are pretty ubiquitous these days, do you have any reason why you want to explicitly let the user know that clicking this will open a modal window?
This could be perceived as an unnecessary warning. If your user want to see more info, let him click and open your modal window.. no big deal :)
-
It's actually a table item. Additional information is impossible in my case.– AlexFeb 24, 2014 at 12:16
-
-1. See THAT question RIGHT THERE is actually designing for the users experience! Actually mattering about the user and thinking a step ahead vor him (preparing him for what might come). I would definitely not let him click and surprise him.– uxfelixFeb 24, 2014 at 17:21
Unfortunately there is no fixed standard to show that whether a link will leave the page or remain on it.
However, some websites use a link which shows a dashed blue underline when it is hovered. This may help convince your users that the action will not leave the page.
You could also provide the user with more information without taking up any screen space. Just set the title attribute of the element. This text will appear in a tooltip when the user hovers over the link. So you can explain to cautious users what will happen when they click.
CSS:
a.modal-link {
text-decoration: none; /* Suppress the default underline */
}
a.modal-link:hover {
border-bottom: 1px dashed #88f; /* Show a light blue dashed line on hover. */
}
HTML:
<a class="modal-link" title="Popup more information on this page">Details</a>
