How We Redesigned Your Most Trusted App
Sometimes when it ain’t broke, you should fix it anyway. People use the default alarm apps daily, even though fundamentally their design hasn’t changed since 2008.
We decided to redesign the alarm clock to create something more functional: An alarm that takes a single touch to set.
When we designed the Alarmix app, we decided to start from scratch. To begin, we asked ourselves two key questions: “what is the essence of an alarm clock” and “what do we need the most when we wake up?”
What this led to was a deeper contemplation and conversation about what is a natural user interface, and how that can be actually achieved.
Using the answers we perceived to be important for functionality in set up and execution of the alarm, we created the Alarmix application to be extremely simple and engaging.
Mechanics Are Everything
Building engagement starts from the very beginning and makes the user’s first encounter with the app natural. We considered it to be a natural experience for the user because the alarm clock is an application most people are familiar with. There are several definitions of Natural User Interface (NUI) on the Internet. Joshua Blake’s definition seems to resonate with me most:
“A natural user interface is a user interface designed to reuse existing skills for interacting directly with content.”
Natural human behavior can be seen when people interact with real world mechanisms, reusing existing skills such as handles, buttons, wheels, sliders, etc. In a digital sense, direct interaction can be achieved by means of directly changing content or systems. Some of the most successful mechanics in applications are functions like the “page turn” effect in e-reading programs, slider controls for equalizer tuning, drag and drop effect, min max sliders, buttons.
In Alarmix we decided to approach the 2D “Wheel,” which is closely resembles the wheel on real watches and by rotating it user setups time in natural way. This is a first step on the way of building natural user experience.
The next step is a positioning with respect to touch screens ergonomic factors such as thumb length and the posture in which we are holding the device. According to Luke Wroblewski in his ‘Responsive Navigation: Optimizing for Touch Across Devices’:
“These common patterns of posture create easy to hit and hard to reach touch areas. The area toward the bottom of the screen is easy, whereas the upper corners are a bit of stretch”.
Taking this into account we placed the central management control in the center of the main screen.
As a result we were able to add to the functionality of the alarm clock by placing it in the most comfortable zone for manipulations.
The next challenge involved overcoming blind zones on the top left and top right hand of the time compass. When selecting a time on the compass, a blind zone is created where the time becomes hidden under the user’s thumb. As a result, we decided to employ a 2D wheel mechanism. This allows the user to have a direct access to the setup time by always being visible on the screen.
This was the first step in building a seamless interaction between user experience and content. We then decided to activate a central time indicator by creating an ON/OFF button. With only minimal active space inside the wheel, we asked ourselves how could it be most optimized? By answering this question we came up with the following screen composition:
1. When? (What day, what time?)
2. How? With snooze/no, what song, with vibration/no, gradual/immediate.
3. Overview and General Management.
We organized management tasks with respect to screen ergonomics and task usage frequency. This gave us an ability to keep users focused on their original goal, and continue to onboard through their next steps throughout the entire process. The rotation gesture and taps for weekdays and snooze are composed in a way which makes false actions almost impossible. In other words, individual parameters will never interfere with each other when a user executes a command.
Understanding How People Work
I’d like to outline the concept of Cognition and its two key principles, which we kept in mind during design and development. Cognition’s two principles are “Cognitive Barriers” and “Cognitive Load”. Jordan Julien gives a good explanation in his article Cognition & The Intrinsic User Experience in UX Magazine of these two terms.
In mobile applications cognitive barriers are often created by limited screen size and when there is a lack of natural mechanisms for content-direct interaction. The most common approach to overcome this issue is to send the user to a new screen dedicated for particular simpler task and then get him back.
Because of this, it can take up to two or three new screens to achieve a user goal. From that, it splits initial user context and makes building true engaging experience very difficult to achieve as a result.
In Alarmix, we removed cognitive barriers and got zero number of steps to achieve key user goals during setup such as setting alarm time, weekdays, snooze and ON/OFF functionality. It only takes one step takes to access Melodies and General Settings.
The next principle we followed is the Cognitive Load principle. Steve Krug in his book Don’t Make Me Think explains this principle in great details. With the design of our app, we created the main screen particularly to serve the one single goal — to setup time. There are no other data exists on the screen. We combined natural mechanics with the only essential data.
Viewing our final product, we believe that simple things should remain simple. Alarmix is as simple as it should be without sacrificing its value.
About Ievgen Liashchenko
Ievgen Liashchenko is a human interaction designer and software engineer based in Kiev, Ukraine. With over 10 years of experience working on software development, including as Senior Research and Development Engineer at Samsung Electronics, Ievgen has spent his career focused on approaching software creation from a holistic view that incorporates both engineering and design principles.