3

The previous version of my website had a toggle/switch for changing the color theme between light and dark modes (for fun and practice). Here's what that looked like:

enter image description here

enter image description here

More recently, I decided to replace the switch and text with emoji—a sun for light mode, and a moon for dark mode:

enter image description here

enter image description here

Question: From a UX perspective, which of those two sets of navigation bars is better?

Here are some of my more specific concerns:

  • The switch is unambiguous—you know exactly what it does. But it's lacking personality. It also seems pointless to tell the user what mode they're currently in. (Gee, thanks!)

  • The emoji give the navbar a bit more life, but at the cost of meaning. Since they're so close to my name, could they be mistaken for a logo instead of a clickable theme switch?

  • "Home" on the previous navbar seemed a bit boring. From what I've seen, most websites traditionally place the home link in the top left of the navbar, sort of like on Stack Exchange.

Improve this question

2 Answers 2

Reset to default
1

From my point of view, changing switch button doesn't make it more understandable. If you are going to change it anyway other than a slider, I'd prefer something meant two-sided image/emoji (like gemini) to make it more understandable as it's a changeable item.

And as you say so, putting your name next to this slider icon, does make this icon more like your logo of preference.

Lastly about 'Home' menu button, you may simply put it anywhere but, like being sticky, have users reach anywhere anytime, or having most wanted features within a dropdown menu, the most functional button should be where users most interacted as their first look.

Improve this answer
5
  • I like the gemini idea! What about something like this? codepen.io/AleksandrHovhannisyan/pen/qBEbWaL I could add hover effects and swap the sun and moon depending on which one's active, maybe.
    – Aleksandr Hovhannisyan
    Dec 8, 2019 at 16:43
  • 1
    Even it sounds appealing as you mentioned, should see how it looks and make one's feel after it's finished. It doesn't show hover effects right now somehow.
    – Erhan Yaşar
    Dec 8, 2019 at 17:06
  • 1
    What do you think of the new design? I decided to push the icon to the far right of the navbar and used your gemini suggestion. Here's the live site: aleksandrhovhannisyan.github.io
    – Aleksandr Hovhannisyan
    Dec 8, 2019 at 21:10
  • ^Since that comment, I ended up changing the original to use something similar to what Facebook did here: create-react-app.dev. It's a bit derivative, but it looks good, imo.
    – Aleksandr Hovhannisyan
    Dec 8, 2019 at 23:17
  • Yeah it definetely looks great now and far better :3 @AleksandrH
    – Erhan Yaşar
    Dec 9, 2019 at 8:25
1

The switch has the advantage of clarity and the emojis bring the twist so mix it up enter image description here

Improve this answer

Your Answer

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

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