2

I'm a back-end programmer with very little knowledge about UI/UX.

I'm implementing a button on a website. Clicking on it will show something like an Easter egg. There will also be other buttons and some content on the page.

My goals are two:

  • It shouldn't distract someone who is in hurry.

  • Make casual visitor (who are not in hurry), want to click it

How can I do this? In other words, what do we know about UI principles for making an interface element appealing without making it distracting?

Note: I earlier checked the spotlight feature. It seems to be very distracting for users who are in hurry.

Improve this question
1
  • 1
    As written, I'd argue that we can't be of any real help. What you're asking does not have a singular answer, especially with the context you've provided here. There are multiple ways to draw a user's attention and encourage them to take an action... but how to do that depends greatly on specific elements of the content at hand.
    – Nicholas Pappas
    Commented Apr 4, 2016 at 18:34

5 Answers 5

Reset to default
6

This is from the "advanced features" panel in the controls for Alfred Version 1:

Alfred setting button reading "Do not press this button"

It's not intrusive, but anyone who's reading through the page will be tempted to click on it!

In general, here are some questions to consider:

  • Where in the user flow does the opportunity to click the button appear?
  • Which users do you want to avoid distracting with it? What do you know about where they go on your site / what features they use?
  • Which users do you want to see it? What do you expect them to be doing at the time?
  • How much does the easter egg take users off-track / disrupt what they were trying to do? If it's minimally disruptive, maybe you could link it to some other behavior such as opening the settings or spending a certain amount of time on the homepage.

PS - The button takes the user to a video about the marshmallow experiment.

Improve this answer
4

I think a more inviting interaction should be not just a simple button :)

I suggest that you use some kind of a slider element with a funny micro copy... Or if you have the time, create a rotating knob that goes up to 11.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1

Commendable attributes of Easter Egg UI:

Subtlety

Minimalism

Discretion

Nuance

I considered the above deeply, and this came to mind:

enter image description here

Improve this answer
5
  • 3
    To be honest, it looks more like an ad to me. I feel I'm very less likely to click on it
    – user32565
    Commented Apr 3, 2016 at 17:18
  • I had to vote this up, not because it's right (which clearly isn't), but because it's funny and a nice joke :)
    – Devin
    Commented Apr 3, 2016 at 20:24
  • Your April fools joke is 2 days late. Now it's just a bad answer, sorry.
    – PixelSnader
    Commented Apr 3, 2016 at 21:46
  • If it's any consolation, I find the question far funnier than your answer.
    – Confused
    Commented Apr 3, 2016 at 22:30
  • 2
    Everyone knows that "Warning: do not press this button" is the appropriate label for a red button!
    – user31143
    Commented Apr 4, 2016 at 8:11
0

There are multiple ways to work this out. If you don't want the user to be very much attracted to the button, choose a color for the button which is a bit more darker (say 5% - 10%) to the color of the background color that you have chosen. Sites like this will help you with that. In other way, you could solve this as @dimshik has proposed which would be kind of cool and good for your target audience. Have a great day :)

Improve this answer
0

To encourage user to click on your button, Use some highlighting colors suppose if your website is in Blue color, then use Orange color in order to gain users attention.

  • Use creative labels for you buttons like for Sign Up button you can use "Why don't you join for fun?"
  • Use Animation (LIKE THIS)
  • Its good approch if you place it somewhere in left hand side of website.
  • Accompany action with an image.
Improve this answer