3

I'm working on a website that features a "day" mode and a "night" mode that the user can toggle between. The day mode will have a light background with dark text, the night mode will have a dark background with light text.

The current idea is to have this controlled by an icons of a sun and a moon. When the user clicks the icon, it switches to the other mode.

Which icon should show when in day mode? The current active mode (sun) or the mode the user will switch to if clicked (moon)?

There are related answers, but those deal more with audio player controls. I would follow the advice there, but I've seen this sort of toggle handled the opposite of the advice given in those posts. Here's one: http://blog.mengto.com

Matthew Moore
  • 1,235
  • 10
  • 19
  • The answer in this one isn't about audio controls: http://ux.stackexchange.com/questions/1318/should-a-toggle-button-show-its-current-state-or-the-state-to-which-it-will-chan?rq=1 – Koen Lageveen May 10 '13 at 14:05
  • This sounds neat, but note that most devices have fairly accessible brightness settings already that a user is likely using to accomodate bright vs. dark environments. – DA01 May 10 '13 at 18:56

3 Answers3

8

The easiest and clearest way that you will handle this is with a toggle switch, and the standard for toggle switches is to show the current state.

The example that you gave isn't using a toggle switch, but rather using a sort of 'button with poor affordance'. It's not clear wether it is an action or a state, and so is just poor UX.

I would suggest you use something like this for day/night:

enter image description here

There are simply good examples of toggle switches for inspiration:

enter image description here

JohnGB
  • 68,376
  • 26
  • 180
  • 294
4

In general, such buttons should be avoided as noted in the answer to Should a toggle button show its current state or the state to which it will change?.

If you can, use a toggle in which both possible states and the currently selected state are visible.

If that isn't an option, I think what you suggest could work because the current state is obvious: the GUI is either dark or light. For the same reason, on/off switches many times don't need to have a clear state since its state is obvious (take a flashlight for instance).

Buttons are for actions, so define your button in terms of the action it will perform and if possible support this with text: "moon - switch to dark", "sun - switch to light".

Community
  • 1
Koen Lageveen
  • 6,347
  • 15
  • 36
  • Using a toggle switch would be the most clear experience, but this answer takes into consideration the UI consideration (single sun/moon icon). Thank you for the thoughtful answer! – Matthew Moore May 10 '13 at 15:51
0

It will depend on the time the interface takes to switch from a mode to another and the access to the toggle button.

  • If the interface is reactive and the button always displayed you can use just an icon (sun when in night mode, moon when in day mode) and a tooltip when hover. It will be like testing fuses. You do not HAVE to use an icon, you can display text: put the lights on! / turn off the light ! or whatever fits to your audience and frequency of use.

  • If the interface is slow or/and the button is in a menu or parameters then be more explicit : Switch to Night mode or Switch to Day mode since the user will be much more irritated if what happens in not expected.

  • It it is really slow add a What is Night mode? link which leads to a explanatory page/pop-up. For the exact same reason.

Gildas Frémont
  • 4,185
  • 16
  • 27