Ways to Indicate Clickability AND also going to a new process/screen?

Question

I'm currently trying to design this UI to indicate clickability. Currently, once the user unlocks a section, the lock icon changes and turns gold. Then, if the user clicks on either the symbol or text, then he/she will be led to a new user flow where they'll explore that option (clicking on Earth will let me explore Earth).

Currently, I'm trying to explore what I can do to 1. indicate clickability 2. Indicate to users that they will engage in another user flow if they do click on this

Here's the current state:

And Here's what I explored so far:

Top Left: Changing the text to gold and buttonizing it

top Right: adding shadow + blur to the text

Bottom: Adding arrows

Any feedback and/or suggestions to help me achieve my dual purpose would be much appreciated!

Answer 1

Put your clickable text on a button. Make it look 3D with some simple highlights and shadows, like Windows 3.x or 9x. If there's one thing Microsoft did well in 1990s versions of Windows, it was making things look like they could be clicked.

Just look at how those buttons on Windows 3.11 scream "Click me!" Also note the disabled button in the File Manager window. Its lack of highlights and being greyed out makes it clear that it can't be clicked right now.

You'll probably need to go a bit thicker than the one or two-pixel-wide highlights and shadows used in those old versions of Windows, given modern display resolutions, but the principle will still work just fine. You can even make the button look like it's been pressed in while the button is held down by just swapping the colours of the highlight and shadow.

For a suggestion that you'll get a new screen when you click the button, you could put ">>" at the end of the text. It, or something similar, is pretty common in installer programs, after all.

Answer 2

I think I have seen this on Microsoft's website. Think it's part of their Office Fabric UI or Fluent design system

Answer 3

These are some good experiments, but none of them read quite as expected.

Have you tried turning these into cards, rather than text links? This would improve their prominence on the screen, and more clearly delineate from the non-clickable text.

Another option is classic underline or "hyperlink blue" font-color, which are easily understood. With these, you could keep your "locked" styling, and simply add an underline to the clickable text or change the color.

Links inherently imply a new flow, or at least a branching spot - either of these options should get you what you're looking for, and can be verified further via user testing.

Here's some additional options you may not have explored yet: https://www.nngroup.com/articles/clickable-elements/

Answer 4

I tried to redesign these

The goal is to make users aware that they are clickable. I used common style such as button, hyperlink and, color blocking. These will make them easy to spot for the user and won't cause high cognitive load. I also created a hierarchy about the options, the context and the information. I hope this will help you. Thanks!

Answer 5

First, change "Click above to...." To "Click below to explore...". This will let user know upfront, how to interpret next items and that new journey will start.

Then, Convert, locked/unlocked text with icons to regular raised buttons. Enabled for unlocked and disabled for locked.

This will be easy for user to understand what is available and what is not.