Temperature Convertor

App design

Role:

UI designer

Tool:

Axure RP 10

Duration:

1 week

Background

Temperature Convertor was my first individual design assignment for the HCI course of my junior year. The goal was to maximize user experience in term of efficiency and learnability.

Efficiency

The degree to which customer effort is facilitated

Learnability

how quickly someone can learn to use something

Efficiency

Minimize the number of operations taken to perform the task

By using the Keystroke-Level Model (KLM, proposed by Card and Moran in 1980), it appeared that the task of conversion——either from Celsius to Fahrenheit, or in the reverse direction——was in its shortest operator sequence, and thus very efficient.

Learnability

Visual hierarchy for elements

First, both the input boxes for Celsius and Fahrenheit has endowed shadow effects. This creates a hierarchy between the foreground and background, in which the user should be able to notice where is the input box.

Ease with switching conversion direction

Second, the direction of conversion would adjust automatically depending on the input box clicked. For example, when the user clicked on the input box for Fahrenheit, then the direction of conversion would be from Fahrenheit to Celsius; when the user clicked on the input box for Celsius, then the direction of conversion would be from Celsius to Fahrenheit. As a result, the user should have no difficulty in finding how to change the direction of conversion.

from C to F (default)

from F to C

Other design factors

Affective design

People tends to respond strongly to objects that seem to express emotions, especially human faces. Enlighted by such notion, the default background image that the user will see is an amicable baby with a sweet smile.

Furthermore, the background image changes in respect to the value that the user has entered. For example, if the value is 1000, then the background image is a volcano; if the value is -273, then the background image is the absolute zero. On the one hand, the user could have an immediate sense of the hotness or coolness. On the other hand, the user could gain some interesting knowledge. In this rough prototype, there is only three background images representing three intervals of temperature: (-∞, 0) is “absolute zero”, (0,50) is “human’s average”, [50, +∞) is “lava”]. However, Ideally, there should be much more intervals with different background images.

$VWD15P{_XT1YKP03_~N02UH.png$

-∞

+∞

]

[

$U7{J50V[2Z_([FQPYZD[Q%2.png$

(

)

Golden ratio

Contact: xujiaxi19@mails.tsinghua.edu.cn

Back