Project 1: Toast

Video:

Why I think this is a good interface

  • Things are visible

➮ Each step has its own view so there isn't much to the imagination. The settings that are chosen by the user are seen throughout the process and don't go away until the whole action is done

  • Good "mappings"

➮There are many icons that show what each mode and settings for the modes are. The user is able to understand that all the circles are clickable based on the feedback given ( the beeps).

  • Single control -> single function

➮Most of the time this happens but in any case there is always a way for the user to go back and try the buttons again.

  • Feedback

➮Every button changes the screen somehow

➮The sound of the done Alarm


It conforms to the 8 rules of UI

  • strive for consistency

➮All the buttons that are tappable are circular

  • cater to universal usability

➮The pictures on the modes are universal to help new users through basic procedure

➮ Each step has its own screen so a new user would not have to think about what they need to do next

  • enable frequent users to use shortcuts

➮Quick cooking

➮ Keeps all previous settings from the last time it was used

  • offer informative feedback

➮All actions should result in system feedback because all settings picked by the user appear on the right hand side of the screen for the user to review

  • design dialogues to yield closure

➮The done button at the end as well as the beeping noise yields closure

➮There are also instructions at the top of every screen

  • offer error prevention and simple error handling and permit easy reversal of actions

➮After each setting the user has the ability to go back to any of the previous settings while keeping all the other settings

  • support internal locus of control and make users the initiators of actions, want users to feel they are in control

➮The user has control over the settings and can return to any of their previous setting. They can also change any of the quick cooking settings if they wish to.

  • reduce short term memory load (7 +/- 2)

➮There is nothing that the user has to have saved into their memory

How to:

Below is the start screen and each button has a set of instructions.

Baking

  • Enter temperature on number pad.
  • If you wish to change the degree from Celsius to Fahrenheit or vise versa you can do so by tapping on the degree button next to the white rectangle.
  • If you wish to go back and choose a different mode, tap on the Bake yellow button.
  • Tap "enter" when you have reached the desired temperature and you will be taken to the "set time " screen.
  • Here you can enter the length of time needed to bake your food.
  • Tap enter when you have finished. This will take you to a confirmation screen that lets you look at your settings before starting.
  • Tap the flashing "start" button to begin. The timer will appear in the middle of the screen as will the temperature inside the toaster oven.


  • If you wish to stop the timer tap "cancel" or if you wish to add more time tap on the "+10s" button.
  • Once the timer has finished a beeping sound will occur and a "done" button will appear in the middle of the screen.
  • Tapping the "done" button will stop the toaster oven and bring you back to choosing the mode.

Broil:

  • See baking instructions. However the setting for broil is different from bake as broil only has the two settings, "Hi" and "Low"

Pizza:

  • After choosing pizza the settings you can choose from are the number of slices you are meaning to make. Once the number of slices are chosen, you will automatically go to the confirmation screen with the flashing start button as the time is already preset based on the number of slices. Press start.

Toast:

  • After tapping the toast mode the setting for the toast will appear as different shades of brown. After choosing a shade of brown/level of "toasted-ness", the confirmation page will appear. There the user can press start or even change the preset time.

Warm:

  • After choosing the warm mode the user will be brought to the timer setting as the warm option has a pre set temperature.

Quick Cooking:

  • Choosing any of these buttons will put you straight to the confirmation page. Each one of the settings is built in so the user would just need to press start or they have the option of changing the settings by tapping any of the yellow buttons on the right. These will take them to their representative screens while still keeping the previous settings.

Sketches

Sketch1:

I had an initial idea that I created on photoshop but I ended up realizing that there was too much on the screen and that would confuse the user. In this sketch the user would choose the Mode which would change the area on the right. This picture shows what it would look like if the Mode were "Bake" and the user could tap the "Temperature" text box to fill it using the number pad and then tap the "Time" text box and fill using the number pad.

Sketch 2:

This is the idea that I ended up using. However, in this previous iteration there would be movement from the circle buttons.

After choosing a Mode the circle buttons would swipe to the left and the settings would come in from the right. The user would then be able to swipe back and forth to change any settings. I decided to opt out of the swiping because I felt that an experienced user would get tires of having to wait for the animation to finish every time.