9

So I'm having a bit of back and forth with our UX designer who I defer to given his superior knowledge of the field. However, part of his design does not sit well with me and I'm unable to swallow it, so I'm seeking opinions from brighter minds than myself.

In essence, we have a sidebar modal appear when a certain button is clicked, this sidebar contains various fields the user can enter text into. When the sidebar is activated, the background is greyed out and clicking anywhere results in no action. At the bottom of this modal, there is a 'Cancel and close' hyperlink, when clicked, the modal will disappear and not retain any information.

The fact this 'Cancel and close' is a hyperlink doesn't sit well with me, to me, a hyperlink means I will be taken somewhere. A button feels more appropriate in this case as I will be returning to my original context. However, as mentioned, I'm perhaps completely outdated in my opinions.

Additional Info

I have something similar to this in my head - https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_js&stacked=h

Basically trade that 'Close' button for 'Close' hyperlink and you've the same situation, though that example lends itself better to my opinion given how it looks.

@Ren called it out perfectly, it has been made low key to keep the user on the modal. It hasn't been coded correctly as a button but I can understand why it's styled how it is now and it seems this is a common pattern used. To me, I thought this violated basic fundamentals and seems I was wrong. Thank you for educating me!

Improve this question
  • 3
    Are you asking about the semantic differenc between <button> and <a>, or is it just about the styling of the element? – Bergi Aug 22 '19 at 23:07
  • 1
    Hi @shicky, thanks for your contribution to UXSE. A UX designer should always be prepared to explain design decisions/rationales, so you are well within your right to enquire if it is not obvious (e.g. this is the convention and the designer is being consistent). There are actually many different uses of hyperlinks and it generally depends on the context as to what the behaviour might be (e.g. a hint or tooltip is another use case). If it is possible, you should ask what the reason is and add this to the information provided in your question. – Michael Lai♦ Aug 23 '19 at 1:36
  • 1
    I'm more concerned about the behavior of the 'Close' hyperlink, when you say the modal does not retain any information, does that mean that none of the entries I have made in the modal will have any effect - in essence lost? If so, then as a user, I would be pissed. This behavior has always and should always be called 'Cancel' - and yes it should be a button. – Glen Yates Aug 23 '19 at 14:28
  • Hi @Bergi, not concerned about the difference, I'm aware of them. The question basically surrounds, is it 'correct' to use a hyperlink in this sort of case, for me it isn't but I wanted to ask those who know better than me as my knowledge here is perhaps a bit dated. – shicky Aug 23 '19 at 15:30
  • 1
    One more thing, what would happen if a user right-clicked and chose 'Open link in new window'. If it doesn't make sense for a user to do this, then maybe it shouldn't be a link. – Glen Yates Aug 23 '19 at 15:38
7

The reason a textual link is used instead of a button is to make it somewhat difficult for the user to delete or cancel unintentionally. The primary button in any form would be the Submit button. To draw more attention to the primary action which is to let the user save their data, Cancel and Delete buttons may be put as text links, displaying lower visual hierarchy. This is only done so visually; at the back, it may well be coded using <button> with a transparent background.

Improve this answer
  • 1
    interesting @Ren, thank you very much for the answer, I believe this is exactly why it has been done this way but it doesn't make me feel too comfortable. It feels like an attempt to trap the user to increase conversion, I would be of the opinion that good UX will bring back customers.. – shicky Aug 23 '19 at 15:24
  • 2
    @shicky Some of your resistance to this may be caused by the fact that this pattern is sometimes embodied as a "dark pattern": Shady websites sometimes use this method to try to prevent Users from closing an annoying popover ad or "sign up for our newsletter!!!" modal. The SIGN UP NOW button is enormous and the 'no' button is an \<extrasmall>'d hyperlink in a pastel color somewhere non-central. That's extreme, but, when used responsibly, this pattern can help prevent users from accidentally canceling out of a form they intended to submit, losing data and becoming frustrated. – sintax Aug 23 '19 at 16:10
16

It sounds as if you are seeking a formulaic answer about a specific button pattern fit for an exclusive purpose and feel that this goal is not being met.

Straight off the bat, there is no such formula. But here are a few things to consider.

Link Buttons Are a Thing

Text-only, rimless buttons have become a fairly common interface element without being restricted to a sole purpose of hyperlinking. Are link buttons used elsewhere in your application? Are they readily identifiable as buttons, in other words, do they have appropriate affordance? And have you tested that with actual users?

A link button, which is what your UX coworker likely specified, is not the same as a hyperlink when used in isolation. Confusion between the two will likely only result on a page with a lot of body text into which true hyperlinks are embedded, such as a wiki. But even in that event a link button is still distinguishable from a body of text with interspersed hyperlinks by spacing and brevity of labelling.

Bowing to Superior Knowledge

It is perfectly legitimate to ask the UX'er you're collaborating with for a rationale behind his or her decision if you have concerns about a control's affordance (its discoverability or findability). Withdraw from the opinion bashing party and test with users. Don't make that the sole objective of the exercise but roll the affordance question into a wider usability test setup where you devise an authentic workflow for your participants to pursue and observe whether they find the appropriate controls, and whether it causes them hesitation.

A Short Thing About Modals

Use true modal behaviour - whether implemented as a side panel or floating dialog is secondary, I'm talking about behaviour - to intentionally stop all other interactions and force the user to complete a critical intermittent step. Everything outside the modal zone should cease to function until the task presented modally has been completed or abandoned. I'm describing this, if perhaps in a slightly dogmatic tone, to illustrate the difference of a true modal as opposed to an expanding/retracting side panel the content of which works interactively with what's on the main screen. That difference is not trivial.

Another Short Thing About Language

By your description the label 'Close' may not be enough. It sounds like the information a user has just provided will be cleared, so it's more akin to an abort function. That consequence to my mind needs to be clear to them, for instance by a label 'Clear all and close'. I cannot imagine that that is the primary purpose of the modal, so your colleague likely had a reason to tone down the abort function.

So we need to consider something else:

Calls-to-Action, Affordance, and Decision Hierarchy

To leave the user in no doubt about the need to finish the intermittent task, the modal needs to present unambiguous calls to action (CTA). If your modal presents a series of forms to fill out, or profile type selections to make, that would be a 'submit' function (irrespective of the true labelling of that button, which is context driven).

If that 'submit' function conveys a simple two-way decision like 'Cancel' and 'OK', decide whether by the application's context the two CTAs need to be presented evenly (bias free) or in a way where one is marked as the intentional path, in which case you may use button hierarchy for emphasis: The intentional path - usually the confirmation option - should have higher visual salience than the abort option: Both are available but you're leading the user toward a preferred outcome. The same applies to a multi-way decision with more than two CTAs, of which only one (if any) should be presented as primary, and only if that reflects the truth of the matter. Else, present all CTAs as equal, in a flat hierarchy.

If your modal has a singular call to action (e.g. 'Done', meaning done and close), CTA hierarchy becomes irrelevant as such. In that event I would set the visual strength of the singular CTA appropriate to the rest of the content.

A common three-tier CTA hierarchy often uses filled buttons for the primary, outlined buttons for the secondary, and link buttons (label text only) for the tertiary layer of importance. Treat a three-tier hierarchy in a modal with caution.

A Matter of Context

Critical to CTAs is salience: How assertively is the you-must-finish-this requirement of a modal conveyed, in context of the rest of the modal content?

If the modal content is complex and visually noisy, a punchier button design is indeed warranted as the CTA must 'out-shout' the fussiness of the rest of the modal's UI. All the more so if you keep the CTA disabled pending completion.

However for more visually reticent modal content, a rim-less link button, offset by enough whitespace or padding, fulfils the same purpose. In that case, an overly bold CTA would actually dominate the content we want the user to focus on.

Don't Skimp on Testing

A simple usability test (with real users, not other developers or other in-house coalitions of the willing, please) on the discoverability of the CTA should bring clarity over whether it's salient enough. In that case, suppress your urge to win the argument and start with the link button option, and observe (and neither of you lead the witness, please) whether the call to action has sufficient affordance for users to know how to complete the task. If the affordance is too weak, and check this with min. five unbiased users, there might indeed be a case for a visually punchier button.

Users consume page content as a whole, and how you strengthen or attenuate the look and feel of calls to action needs to fit with the total composition of the page.

Review the above in context with what your modal shall accomplish; by all means express concerns about salience, discoverability, and affordance - here's some vocab to Google - and encourage user testing so both of you distance yourselves from mere opinionatedness. In so doing, however, be mindful that it is the UXer's professional responsibility to ensure the thing you're developing together is up to the task and meets the user's needs.

Improve this answer
  • 2
    +1 seems like you've covered a lot of bases here. The only other thing I can think of is whether this design has already been used elsewhere and it is simply a case of sticking to existing conventions. – Michael Lai♦ Aug 23 '19 at 1:31
3

The four options that i found and most of the time use are;

  • Cancel button
  • Close button
  • Escape key
  • Click outside the window

You can read more about modals here: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c

Improve this answer
  • 8
    It seems to me this doesn't really answer the question. – Acccumulation Aug 22 '19 at 21:04
  • 1
    If you are supporting the view that a hyperlink as a call-to-action to close a modal is not a good idea, can you explain why? – Michael Lai♦ Aug 23 '19 at 1:29
3

If this is a web page you're talking about, there is nothing wrong with a hyperlink. As long as it has a clear label. Maybe "close" is not enough and is "close form" or something better understood by your users. With this I come to the core problem of the question: It shouldn't be asked to us but to real users, test it and you'll know. But to give a more direct answer... These days it's quite common that hyperlinks are not only used to go to other pages. Look at this sign-in form from Google:

enter image description here

The create account "link" opens a small menu:

enter image description here

Improve this answer
  • I'm not sure your example holds up, those hyperlinks take the user elsewhere. That's also an actual webpage rather than a modal, if you mean the signup, I'd describe that as a context menu – shicky Aug 23 '19 at 15:28
  • 2
    "Create account" doesn't go anywhere, it is there to open the menu, from where you can navigate. I just wanted to show that also large companies like Google have buttons that look like hyperlinks. All other blue "links" in the image do actually take you to some other page. I took this context menu as example because it was the the first example I found of a button disguised as hyperlink. – jazZRo Aug 23 '19 at 15:36
  • I take your point, thank you for making it and explaining further when I wasn't quite on board yet! – shicky Aug 23 '19 at 15:38
0

The info is probably no complete here. A screenshot would have helped.

Anyway I assume there must be a primary Call to Action button underneath the form fields. The close 'hyperlink' or tertiary button is such that it would not attract as much attention as the primary button above.

This is fairly common. Hope this helps.

Improve this answer
  • 1
    sorry not possible to share a screenshot, I was making the question generic as I've seen this occur before and the team moved to quash it, I think on re-reading it makes sense but of course an image would help. I'll see if I can find a public similar example. – shicky Aug 23 '19 at 15:22
  • 1
    I agree with your conclusion (Thanks to @Ren) that "it has been made low key to keep the user on the modal". This sums it up perfectly hence Image not needed. – Arif Kazi Sep 13 '19 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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