1

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.

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 | |
  • 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. – AleksandrH Dec 8 '19 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 '19 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 – AleksandrH Dec 8 '19 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. – AleksandrH Dec 8 '19 at 23:17
  • Yeah it definetely looks great now and far better :3 @AleksandrH – Erhan Yaşar Dec 9 '19 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, privacy policy and cookie policy

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