A Buttonless Toaster Oven: Wireframe

I created a mockup for a toaster oven UI, where the user interacts with the toaster oven via a touch interface. Here are the results!

Link to the source code: Toaster Oven Time

Design Strengths

The strength of this design lies in its simplicity.

I chose to implement an on button that involves a “slide-to-open” feature. The reason I believe this works best is because swiping requires a specific motion from the user that is difficult to replicate accidentally. This results in a toaster oven that is unlikely to turn on by accident. Additionally, the circle is a fun, creative, and aesthetically pleasing touch.

What I believe makes this design a strong one is the lack of a panel with an overbearing amount of options. The fact that there is a generous amount of space given for each function gives the user a seamless experience, making it less confusing and more intuitive to utilize. I chose to put the icons of the most commonly utilized functions on the home page because I wanted it to be quick and easy to use for common functions. Turning on a toaster oven and immediately seeing the pizza or toast icon allows for instant functionality and an intuition of what the user is turning on the toaster oven for. The menu button is fairly universal, and since there is nothing else to press, it is only logical that someone using this for the first time would gravitate to the only button other than the presets if they chose to do something different with the toaster oven.

The presets are also a good way to organize presets that are used more often. This allows for a quicker navigational system for commonly used functions and puts away the more intricate features unless they are truly needed. The presence of solid white icons against a darkened background offer a consistent, easy to read, elegant user interface that is functional and aesthetically pleasing. When using a preset, choosing the “darkness” of the toast or bagel is a simple way to fulfill a user’s intentions without too much explanation. Therefore, I implemented 4 simple buttons that are displayed after choosing a present. These buttons are large and easy to press, making for a smooth experience. There is no color, so individuals who have colorblindness or difficulty discerning between colors will only have to recognizee the difference in shade among the four options.

I wanted the experience to be easy to read and intuitive, which is why I included a series of panels that only have the user complete one task at a time. Buttons are large, yet have transparent backgrounds which keep the inside of the toaster oven visible to the user.

In my opinion, number pads are the quickest and easist way to input numbers. Scrollers can often lack in precision. Number pads allow the user to have a greater amount of control and input the exact number they want to without the guesswork. I chose to use a large number pad that takes most of the screen, because I know how frustrating it can be to try and use buttons on a screen that are unnecessarily small.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s