Day 15 of 100: ON/OFF UI for switching between clock types

Chimdindu Aneke
100 days of UI(UX) design
2 min readJul 27, 2016

Today’s challenge was to design an “on/of” button and I decided to apply it to a time app’s settings screen where one is always asked to set clock type — whether for analog or for a digital display.

The biggest question I asked myself was how can one switch between an analog and a digital clock view from a clock settings screen?

How can one switch between an analog or a digital clock view from the settings screen?

We already know what analog and digital clocks look like.

Analog and Digital clock types ( screenshot from a Google search )

But how can we change a clock type by using an on/off like-button alone?

I decided for a “no label” switch — meaning a no text description/label for the switch icon. Just a visual icon that will at a glance tell us the difference between the clock types.

I did not want something like this

So to answer my question I made up some sketches

And converted some of them into digital versions.

I was a bit bothered about heavy text/label on the switch icons. I wanted something simple, not text-heavy and easy to understand at a glance.

But this one below came out perfect for me.

I hope you like it? Your feedback is more than welcomed.

Thank you so much for following through.

--

--

Chimdindu Aneke
100 days of UI(UX) design

Father of Millions. Here on earth to Love God, Love people, and Lead and impact my generation. CurrentLy Program Manager@Facebook. Formerly @Google @Andela.