Interfaces and household appliances

Interfaces and household appliances Interaction with everyday machines.

Giovanni Pignoni Interfaccia ed elettrodomestici L’interazione con le macchine di tutti i giorni Supervisor Luciano Perondi Co-supervisor Valentina Rachiele Isia Urbino

Interfaccia ed elettrodomestici L’interazione con le macchine di tutti i giorni Interfaces and household appliances Interaction with everyday machines

Diploma Accademico di I livello in Progettazione Grafica e Comunicazione Visiva Sessione invernale, a.a. 2014-2015 Isia Urbino

Student n°1074 Giovanni Pignoni Supervisor Luciano Perondi Co-supervisor Valentina Rachiele Composed in Vallée d’Aoste Printed in Italy

by Stibu s.n.c.

All the copyrighted materials included in this thesis project belongs to the respective owners and are hereby used for educational and research purpose only, following fair use guidelines (Legge 22 aprile 1941 n. 633 art. 70).

Index a Introduction 01 Introduction 02 The original abstract

8 9

b History 01 Historical evolution 02 Twin tub washing machines 03 Fuzzy logic

12 24 25

c The market 01 The current market 02 Recurring interfaces 03 Touch screen-based interfaces 04 IoT and domotics 05 The variables 06 Japan

30 32 35 39 42 44

d Scouting 01 How

52

e Errors 01 Error layering 02 Appearance 03 Contents 04 Concept 05 The program system

68 69 78 80 82

f Prototype 01 From A to Prototype 02 Iterate, iterate, iterate, iterate.

03 First session of tests 04 Evolution after the test 05 Second session of tests 06 What was not covered 07 Conclusions

86 91 99 108 110 126 128

g Appendix 01 Bibliography 02 Sitography 03 Figure index

132 133 134

a Introduction

01 Introduction We live in an interface filled environment, as we grow increasingly attached to our digital tools we experience how a machine can indeed make or break our day. Every little thing counts and adds up to the stress and cognitive weights we have to experience.

This thesis project is an analysis of what makes up the human/machine relation, the focus is on home appliances and in particular the washing machine.

[a0] Cover image. from James Lee, The Beautiful Washing Machine, youtu.be/bXsMMHizW3o, retrieved 1/2016.

The washing machine is one of the most complex “utility appliances” we (people living in developed countries) have to use on a daily basis, and is still often a source of frustration, and has developed a reputation of poor usability over time.

In 2016 we will hopefully see some affordable implementations of domotics and IoT, since machines are becoming increasingly intelligent, autonomous and connected. The situation can certainly be improved upon, hopefully evolving in a direction towards simplicity and clarity as more important values than the number of features to “show of”.

◀ [a1] Maren Christensen, reading a book next to her new Thor washing machine ca. 1920. from Haynes family, Eatonville’s First Washing Machine, eatonvilletorainier.com/?p=666, retrieved 1/2016.

8

02 The original abstract (Italian) Title ▶ Interfaccia ed elettrodomestici Subtitle ▶ L’interazione con le macchine di tutti i giorni Abstract ▶ Questa tesi indagherà gli elementi coinvolti nell’interazione uomo/macchina, con sguardo specifico sugli elettrodomestici. Verrà tenuto come principale caso studio la lavatrice. Saranno analizzati e catalogati gli esempi di interfaccia consolidatisi nel tempo, incluse le recenti direzioni prese dai produttori (e.g. touch e domotica), tentando quindi di strutturare e ciclicamente verificare un approccio alternativo alla progettazione per ottenere una macchina più adatta a rapportarsi con gli utenti.

[note] This is the original thesis abstract, registered on 14 October 2015, secretary of didactics, Isia (Urbino).

Keyword ▶ Interaction; interfaccia; lavatrici; elettrodomestici; user centred.

9

b History

01 Historical evolution The first machine-aided washing device was invented by H. Sidgier, in 1782. His idea led to a series of simple machines with a similar implementation of a wooden tub equipped with a wooden agitator to spin the clothes, and a wringer to squeeze out the water, mounted on top of the tub. The machine was operated completely by hand by means of a handle or a pedal. The next step was the use of a rolling drum instead of a fixed tub, an invention by James King in 1851.

[b0] Cover image. from Samsung Electronics Co. Ltd., Front loading clothes washing machine with dynamic balancing mechanism, google.com/ patents/US5850748, retrieved 1/2016. â—€ [b1] Home Washing Machine & Wringer, advert. from n/a, Ricks Bottle Room ~ Always in Pursuit of Great Glass, ricksbottleroom.com, retrieved 12/2015.

â—€ [b2] Happy Day Washing machine circa 1910, postcard advert. from Wikipedia, Washing machine, en.wikipedia. org/wiki/Washing_machine, retrieved 10/2015.

12

Analysing the interfaces of those early models, it is clear how it was a matter of affordance of a few simple mechanical elements, such an interface would work well as long as a handle looks like it can be pulled.

Moreover as the mechanical relations between the parts is clearly visible, the mental model was as straightforward as it could get. [...] a case can be made that microinteractions originated with the first electric devices, such as the radio (1893), the flashlight (1986), and the washing machine (1900). As designer Bill DeRouchey points out in his talk “The History of The Button,” in the (pre-electric) mechanical era, users could follow their actions directly from the control to the output.

You could pull a lever, watch the gears move and finally see the wheels turn. It was easy to connect the input to the output. Electricity changed all that. You could press a button on the wall and nearly instantly a light on the other side of the room turned on. Sure, the feedback was instant, but the method of execution was not. As DeRouchey says in “The History of the Button”, “The button meant for the first time the result of the human motion could be completely different from the motion [it creates] itself.” Action became abstracted.

Then again, those were only tools to lessen the fatigue and reduce the time needed for laundry. As per a more modern definition, I would not call those “washing machines”, but rather “machines that help you wash your clothes”, the operator, or “user”, had to stand by the machine for the entire process, being the source of both kinetic energy and logical execution of the washing phases. And so the physical strain of the operator was the first problem to be addressed in the quest for a real washing machine, and the solution came, of course, in the form of a motor.

from Dan Saffer, Microinteractions. O’Reilly Media, Inc, 2013. Page 12.

◀ [b3] One of the firsts washing machines to feature a motor driven tub, the “Thor” by Alva J. Fisher, circa 1908. patent. from Mary Bellis, Thor Washing Machine, inventors.about.com/ od/weirdmuseums/ig/ Famous-Appliances/ Thor-Washing-Machine. htm, retrieved 10/2015.

13

Other technical elements were added over time: --the enclosure, covering the mechanical parts, which is an impediment to the mind model formations, making the internal connections invisible, but it’s also a fundamental safety measure when an electric motor is employed, as it takes time to stop in case of emergency and benefit from a watertight operation; --a manual and then electromechanical water valve for filling the tub; --an electrical or combustion element for heating the water inside the machine; --suspensions and damping materials to reduce noise; --a speed control mechanism, like a gearbox connected to the transmission or, recently, a digital inverter to control the motor speed.

Although the production of wringer type washing machines continued long after the introduction of automatic models, it was clear from the beginning how automation was the future of the industry. â—€ [b4] The assembled Bendix washing machine, 1937, patent US 2165884. from John W Chamberlin & Jr Rex Earl Bassett, Cleaning textile and similar materials, google. com/patents/US2165884, retrieved 10/2015.

14

The Bendix Corporation was the first to patent and produce an automatic washer in 1937. The relative patent contains some of the key elements for automation. It describes a machine equipped with a door in the front for watertight operation, a horizontally mounted rotating drum with internal baffles optimized to avoid tumbling during the wash cycle, belt transmission and mechanical gearbox, a water heater, a port for introducing soap and, most important of all, an electromechanical timer for autonomous wash operations.

The electromechanical timer or cam timer is the ancestor of the program based interface. The timer is composed of an electric motor, that drives a shaft at a low rotating speed, through a reduction gear.

â—€ [b5] The cloth movement, from the top, at low, medium and high speed, 1937, patent US 2165884. from John W Chamberlin & Jr Rex Earl Bassett, Cleaning textile and similar materials, google. com/patents/US2165884, retrieved 10/2015.

[note] In a washing machine with horizontal mounted drum, during the wash cycle the rotation speed is controlled during the wash cycle so that the clothes, being pulled upward by the spin movement, do not complete an entire revolution pressed upon the drum walls, but fall half way in the water.

On the other hand, during the spin cycle the speed is higher, so that centrifugal force can drain most of the water.

Correct speed is a key component for avoiding tangles that would occur at a constant lower speed and maintaining high wash efficiency. Previous techniques involved reversing the rotation every few cycles to untangle the load, a slow and inefficient process.

15

â—€ [b6] Internal wiring scheme and operating diagram, resembling the timer based operation, 1937, patent US 2165884. from John W Chamberlin & Jr Rex Earl Bassett, Cleaning textile and similar materials, google. com/patents/US2165884, retrieved 10/2015.

A series of cams is arranged on the shaft, each cam will activate or disengage a switch at a precise point of the rotation thus controlling the machine operation in a time based sequence.

At one end of the shaft is mounted a knob; in conjunction with graphic marks on the outer casing the knob is the main interface.

The knob/timer combination has some interesting peculiarities: the time based operation is at the same time an indicator of what the machine is doing, how long it’s going to do that (although only in proportion, not as a numerical value) and what it’s going to do next.

16

The information printed on the outer case is usually only a sum of the complex internal operations, only the main wash phases are indicated while the minor sub-functions are generally omitted (water heating, draining‌).

Skipping a phase of the cycle as well as starting from an arbitrary point might be permitted by the mechanism.

â—€ [b7] Automatic timing apparatus for washing machines, 1951, patent US2656424. from Frerer Paul G. Smith & Charles S, Automatic timing apparatus for washing machines, google. com/patents/US2656424, retrieved 10/2015.

17

◀ [b8] The Hoover Keymatic is a unique example of automation, relying on mechanical cartridges to store all the setting, from Mike King, Flickr’s Photostream, flickr.com/ photos/chestermikeuk, retrieved 9/2015.

▶ [b9] Miele microcontroler based “Sensor” interface from a 1980s Italian catalogue. from Marco Taddei, Automaticwasher.org, automaticwasher.org/cgibin/TD/TD-VIEWTHREAD. cgi?11612, retrieved 10/2015.

▶ [b9] Miele knob/timer based interface from a 1980s Italian catalogue.

18

19

â—€ [b10] A slightly different timer technology: a single rotating disc instead of the cams/shaft assembly, 1930, patent US2055031. from Hutchings Walter B, Timer with interchangeable formula for controlling machines having series of operations, google. com/patents/US2055031, retrieved 11/2015.

20

The micro-controller made its appearance inside home appliances in the late 1970s, tuners and televisions were then equipped with tiny built-in memory to store station frequencies and some manufacturers applied a similar concept to the washing machine, although initially only to expensive models.

An electronic memory stored the wash programs as a series of instruction. The basic principles and function of the machine remained unchanged, the main difference was in the higher number of combinations and values that those basic parameters could assume.

A new kind of interface started to grow around the concept of “wash program�. The Sensor series from Miele is an early example [b9], the machine is operated only through buttons, and the programs (of which there are nine), on a sort of numeric keypad, are labeled both by name and number (the number of the selected function would appear on the small LCD on the left).

In this particular example we can see how the designers felt that by not displaying the information regarding the washing phase and operation sequence (information that on a knob/timer interface are naturally present) was a liability and decided to include a dedicated indicator (the clock-like element on the right).

â—€ [b11] Samsung interface for the Chinese market. from n/a., n/a, life.yesky. com, retrieved 11/2015.

21

As embedded electronics got cheaper than mechanical components, the “digital” washing machines became more common, and in 2015 only twin tub portable washing machines are still equipped with a fully mechanical interface. Analysing the American, European and Chinese market, it’s clear how the knob survived many revisions and still is, in many cases, the core of the interaction.

This phenomenon is called path dependence ▶ The economic concept of path dependence explains how the set of decisions one faces for any given circumstance is limited by the decisions one has made in the past, even though past circumstances may no longer be relevant.

In the field of interface design, the tendency to embrace old and otherwise obsolete concepts is influenced by many factors: economic and technical reasons such as the lack of investments in research or new production machineries, marketing reasons such as the fear that a new product or technology is not going to be well accepted because it’s too different as well as psychological reasons.

A user, approaching an unknown object, is going to take advantage of all his previous experiences with similar objects to understand how to proceed; a radically new interface is more likely to be misinterpreted because the user experience has a less solid and deep foundations.

This is one of the many reasons underlying the use of skeuomorphism.

◀ [b12] A variable air capacitor. from Wikipedia, Variable capacitor, en.wikipedia.org/ wiki/Variable_capacitor, retrieved 10/2015.

Consider the radio tuner, early models needed a knob in order to move a variable capacitor. The Revox B760 was the first tuner to be equipped with a micro-controller so there was no capacitor to turn manually, but there was a large (digital) knob for manual tuning.

22

from Dave Praeger, Our Love Of Sewers: A Lesson in Path Dependence, dailykos.com/story/2007/6/15/346883/-, retrieved 9/2015.

◀ [b13] The Revox B760 from a 1980s brochure. from n/a, Preservation of sound, preservationsound. com, retrieved 11/2015.

The knob disappeared from later Revox models, like the B260. However, it’s still present on modern products, car stereos and on mobile applications that try to resemble old time radios.

As a result, a lot of users still recognize the knob as the element that changes the radio station, and might perceive that particular solution as simpler to operate than a + - button based interface or a touch screen. This feeling might be even more important than other usability elements, for example the fact that a knob might be superior to a touch screen input in a car stereo because it can be operated easily without looking.

Moreover, the knob in this context acts as a “friendly” recognizable element as well as an iconic one, which means that not only is its function easily deduced, but its presence characterizes the object as part of a class of similar objects (is a car still a car if the wheels are not visible?).

Aesthetics is also an important factor, and not only for marketing reasons. There is a deep connection between how an object makes us feel and the effort we will put into using it. Therefore, if the user dislikes the appearance and feeling of a product, the usability is going to suffer as well.

Ironically, aesthetics was also the main reason that moved Apple away from skeuomorphism.

see Noam Tractinskyr, Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues, sigchi.org/chi97/proceedings/paper/nt.htm .

23

02 Twin tub washing machines In a twin tub machine there is a tub for spinning/drying and a tub for washing. This class has existed since the dawn of the washing machines, today only less expensive models are still in production.

◀ [b14] The Riby twin tub washing machine made in 1932. from Science Museum, Riby twin tub washing machine, sciencemuseum.org.uk/images/ i012/10250651.aspx, retrieved 10/2015.

In Europe those are usually classified as a portable washing machine, ideally to be installed on a caravan, a boat or in a bedsit.

However it is also the only really affordable kind of washer available in developing economies, and so, much more common on those markets.

This class is characterized by simple mechanical control, there is no program or automation, it just a matter of a timer and speed control.

◀ [b15] The Good Ideas “Twin Tub Washing Machine” has two dedicated timers, for washing and spinning, and a speed control in the center; water has to be poured in manually, however, there is a pump for emptying the tubs. from Good Ideas, Twin Tub Washing Machine, goodideas.uk.com/twintub, retrieved 10/2015.

24

03 Fuzzy logic Fuzzy logic is the technological solution for flexibility in automation.

The concept has been around since the 1960s, thanks to more powerful embedded technology and cheaper sensors it’s now a common feature in a washer.

The core of the fuzzy logic approach is a system that can accept an imprecise input but still outputs a precise command in order to correctly control the rest of the machine.

Warm water

Fuzzy logic.

Spin speed

Heavy load

Water temperature

Cotton

Water volume

Lightly soiled

Wash length

Nylon

Soap dosage

▲ [b16] Processor.

The concept of truth values ▶ in the following example, a washing machine capable of measuring soil level in the load has to interpret the raw data from a sensor (degree of dirtiness).

from Wikipedia, Motorola 68000, en.wikipedia.org/ wiki/Motorola_68000, retrieved 11/2015.

On the vertical axis lies the truth value: the index of how accurate the definition of the effective value is. Moreover, it a mathematical attempt to resolve “is the glass half full or half empty?” kind of situations.

25

Truth value trend Soil level

1

Lightly soiled

0

1

Medium soiled

0

1

Heavily soiled

0

Measured value.

1

0 0.8 * medium, 0.2 * heavily, 0.0 * lightly.

26

In the graph, the measured level always intercepts all the three degrees of dirtiness but with a different truth value: 0 0.2 0.8

for lightly soiled for heavily soiled for medium soiled

▶ ▶ ▶

definitely not lightly soiled; slightly heavily soiled; fairly medium soiled.

The complexity of the elaboration can grow significantly with the number of sensors in the machine,and for simplicity’s sake we will consider only load weight and soil level as inputs and wash length as output.

Given a soil level range of high, medium, low and a load weight range of high, medium, low and a wash length range of long, medium, short.

A simplified fuzzy array would be: if soil level is ( low )

and load weight is ( low )

if soil level is ( low )

and load weight is ( medium ) then wash length is ( short );

if soil level is ( low )

and load weight is ( high ) then wash length is ( medium );

if soil level is ( medium ) and load weight is ( low )

then wash length is ( short );

then wash length is ( medium );

if soil level is ( medium ) and load weight is ( medium ) then wash length is ( medium ); if soil level is ( medium ) and load weight is ( high ) then wash length is ( long );

and so on until all the combinations have been considered.

◀ [b17] How a fuzzy logic output pattern looks, this example is highly simplified, including only two variables. from Agarwal Manish, Fuzzy logic control of washing machines, Department of Mechanical Engineering, Indian Institute of Technology, India.

27

c The market

01 The current market In order to gain a better understanding of the state of the art in the washing machine field, I conducted a small survey by collecting samples (washing machine models and related interfaces) from Europe, the U.S., China, India and Japan. The complete list can be found online at gmac34. tumblr.com, together with a mixed selection of photos found on the internet, on manufacturer websites or snapped by me.

[c0] Cover image. from Maxis, The Sims (videogame), screenshot, retrieved 1/2016.

Different target market, different machine.

In Europe, the washing machine is usually a front loader or compact top loading unit with horizontally mounted drum, the knob selector is very common and generally I noted a tendency toward precise numerical selection (30°,40°,60°,90°).The American market orients towards much bigger machines, like “real” top loaders (with vertically mounted drum) or just bigger front loaders. There the adoption of a word based selection is quite common (cold, warm, hot, very hot), which might be an indication of higher acceptance of “uncertain” settings.

China and India, due to a wider social gap, offer a greater variety of models, with front loading machines (like European models) alongside small and less expensive top loading machines, as well as twin tub models.

30

▲ [c1] Top loading machine (left) and Front loading machine (right). from All parts for a happy home, Top Loading Washers vs. Front Loading Washers, allpartsforahappyhome.com/2011/04/07/ top-loading-washers-vsfront-loading-washers/, retrieved 12/2015.

Cheaper models usually mean cheaper interfaces, as everything is cost optimized and stripped down, like using a sheet of printed plastic, a plastic frame and a simple circuit board populated by LEDs and momentary switches. The cost “optimization� can indeed compromise usability when confusing feedback with multiple meanings is employed.

For example, the LED in the Kelvinator machine [c2] below can assume two different meanings by either flashing or not. â—€ [c2] Kelvinator Spark Plus. from Amazon India, Kelvinator KT6521PF-FAU Spark Plus Fully-automatic Top-loading Washing Machine, amazon.in/dp/ B00NL6SI72, retrieved 12/2015.

Japan is a peculiar market, and needs to be analysed alone. It has to be noted that, being a country that adopts and easily accepts new technology, the machines produced for this market are probably the most advanced looking ones, and I was unable to find a Japanese model with a knob selector.

31

02 Recurring interfaces Most of the washing machines on the western market rely on the concept of wash programs (variable number of preprogrammed instruction sets) that might be altered slightly with a variable number of extra inputs. The interfaces are thus comparable given the consistency of the underlying model, which in turn has to be analysed as well.

Recurring elements in the interface can be isolated and are as follows: Program selectors Knob ▶ A knob lets the user select the desired program on a radial list, it might be equipped with different kinds of feedback such as light or sound events. The programs list might integrate the temperature selection, (e.g. cotton 40°, 60°, 90°). On modern machines it’s no longer connected to a timer.

◀◀ [c3] Beko WMB61242BL, knob. from eMAG, Beko WMB61242BL, emag.ro/ masina-de-spalat-rufe-beko-6-kg-1200-rpm-clasaa-alb-wmb61242bl/pd/ D87QCBBBM/, retrieved 11/2015.

◀ [c4] Electrolux Auto sense, vertical list.

Vertical list ▶ Vertical lists, usually paired to one or more buttons, are cheaper to produce than knobs as they are implemented with fewer custom parts. Pressing the button usually cycles through the options in the list.

Touch screen ▶ Touch screen based interfaces are usually accompanied only by a couple of auxiliary buttons as the main action takes place on the screen.

32

from MK Trade, ELECTROLUX EWF-1274BW veļas mašīna, rdveikals.lv/ products/lv/219/43538/ sort/1/filter/0_0_0_0/ EWF-1274BW-veļasmašīna.html, retrieved 11/2015. [note] A deeper analysis of touch screen-based interfaces follows.

Extra selectors Vertical list or single button ▶ Vertical selection is for sfrom multiple values (30°, 40°, 60°, 90°) by using a single button, (press to cycle through the list).

An isolated button is used to switch a single function, in some extreme cases more than one function might be mapped to the same element and selected by holding down or quickly double pressing the button or by pressing two buttons simultaneously. ◀ [c5] Electrolux Auto sense, vertical list. from MK Trade, ELECTROLUX EWF-1274BW veļas mašīna, rdveikals.lv/ products/lv/219/43538/ sort/1/filter/0_0_0_0/ EWF-1274BW-veļasmašīna.html, retrieved 11/2015.

Knob ▶ A smaller knob can be used for selecting a value in a range (temperature, spin speed etc.), not being dynamical it cannot give a visual indication when the range changes.

◀ [c6] Indesit Innex IWSD71252, knobs. from personal collection.

33

On screen selection ▶ On-screen selection is a combination of a small display for basic information but with no touch capabilities and an array of small buttons surrounding it.

◀ [c7] Beko WMB61242BL, display. from eMAG, Beko WMB61242BL, emag.ro/ masina-de-spalat-rufe-beko-6-kg-1200-rpm-clasaa-alb-wmb61242bl/pd/ D87QCBBBM/, retrieved 11/2015.

Feedbacks and Informations Wash phase ▶ Gives a rough indication of what the washer is doing and what it’s going to do next. ◀ [c8] Indesit Innex XWA 71451, vertical list. from Indesit, Indesit Innex XWA 71451 W Washing Machine, indesit.co.uk/ appliances_i/Washing_ Machine_XWA_71451_W/ pid_F082645UK/40.do, retrieved 11/2015.

Eco feedback ▶ Displays water and electrical consumption.

Legend ▶ A small portion of the samples used only a numbered program index with a legend. ◀ [c9] Indesit Innex IWSD71252, legend. from personal collection.

34

03 Touch screen-based interfaces Touch screen-based interfaces are presented as the best the industry can offer today and only top of the line models are equipped with such technology. The general tendency is to mimic iPhone/Android interfaces, this way the smart-phone is used as a “trojan horse” to render a washer more appealing and less frightening as it employs a recognized language of sliders, scrolls and tapping. Although using something already common “in the user life” is a correct measure in UxD design (many users, young people approaching a washing machine for the first time, for instance, are going to be more used to a smart-phone interface than their mother’s washer) this is no guarantee of higher usability, possibly apparent usability but no more than that.

Very high correlations were found between perceived aesthetics of the interface and a priori perceived ease of use of the system.

Perceived usability is indeed important as a sale point, but also because liking a product increases our predisposition to solve problems that might occur using it. [...]First, someone who is relaxed, happy, in a pleasant mood, is more creative, more able to overlook and cope with minor problems with a device, especially if it's fun to work with. Recall the reviewer of the Mini Cooper automobile,quoted in the prologue, who recommended that the car's faults be ignored because it was so much fun.[...]New York Times observed: "Whatever one may think of the MINI Cooper's dynamic attributes, which range from very good to marginal, it is fair to say that almost no new vehicle in recent memory has provoked more smiles." [...]Second, when people are anxious, they are more focused, so where this is likely to be the case, the designer must pay special attention to ensure that all the information required to do the task is continually at hand, readily visible, with clear and unambiguous feedback about the operations that the device is performing. Designers can get away with more if the product is fun and enjoyable. Things intended to be used under stressful situations require a lot more care, with much more attention to detail.

At any rate, using a touch screen in a washing machine is part of the negative but increasing tendency: “How do you make a better ***?”, “Slap an interface on it” as Golden Krishna usually says (that is substitute *** with a refrigerator, car, fast food restaurant, watch, water heater or basically anything else). A touch screen, or any screen for that matter, has advantages both for the user and the designer: it’s easier to guide the action by showing different functions along a path, there is endless space for more functions and so on.

However, at the same time, a screen is not always essential as it would be in a computer or a smart-phone where flexibility is the key, there are still many objects that perform simpler and more defined operations (a fridge, a toilet sink, a car radio, a door). In simple situations, it’s difficult

from Noam Tractinsky, Aesthetics and Apparent Usability, sigchi.org/ chi97/proceedings/paper/ nt.htm, retrieved 10/2015.

from Donald Norman, Emotional design: Why we love (or hate) everyday things. New York: Basic Books, 2004. Page 26.

from Golden Krishna, The Best Interface Is No Interface: The simple path to brilliant technology, New Riders, 2015.

35

to beat a specialized physical interface. Thus, it is mandatory to question whether the advantages of a touch screen do really balance out the problems it could generate. This is just an example of how things can go wrong: Today’s devices lack discoverability: [n/a: referring to the mobile world, iPhone and Android] There is no way to discover what operations are possible just by looking at the screen. Do you swipe left or right, up or down, with one finger, two, or even as many as five? Do you swipe or tap, and if you tap is it a single tap or double? Is that text on the screen really text or is it a critically important button disguised as text? So often, the user has to try touching everything on the screen just to find out what are actually touchable objects.

from Donald Norman & Bruce Tognazzini, How Apple Is Giving Design A Bad Name, fastcodesign. com/3053406/how-appleis-giving-design-a-badname, retrieved 10/2015.

Three examples: the Samsung WF457 is a model from 2012 for the U.S. market, the Samsung WW9000 is their current TOL model introduced in 2014 and the Miele WMV960. ◀ [c10] Samsung WF457 primary view. from Goemans Appliances, Samsung Smart Laundry Features WF457/DV457, youtu.be/8fWBSt_WKB4, retrieved 12/2015.

The Samsung WF457.

The wash programs is chosen by scrolling a vertical list, when one is selected a large tool-tip appears, inside we find a basic description of the cycle and the related settings. Temperature, spin speed and soil level are selected by means of horizontal sliders, and simple expressions (warm, ◀ [c11] Samsung WF457 wash view. from Goemans Appliances, Samsung Smart Laundry Features WF457/DV457, youtu.be/8fWBSt_WKB4, retrieved 12/2015.

36

hot) are used instead of numerical values. Extra options are available by tapping on “extra”, but there is no way of understanding the icon’s meaning without opening the extra menu at least once. On the right we find displayed the wash duration and eco-rating displayed (an obscure bar/leaf indicator), and below that, a list of links to other less important functions, including the settings page (connectivity, stand-by time-out and so on). ◀ [c12] Samsung WW9000 single cycle view. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015.

The Samsung WW9000.

In the Samsung WW9000 the programs are laid out on a grid, like applications in an iPhone home view, and can be rearranged manually by choosing a selection of favourites or automatically in order of usage frequency. ◀ [c13] Samsung WW9000 select cycle view. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015.

Images are there to help understand what each wash cycle is for, still some seem to be there just to fill a void, like the “smart wash”. On the top there is a menu bar with time, wi-fi connectivity and short-cut to settings and the program selection, again this is iPhone or computer like, and partially unnecessary unless to establish a mood.

37

Tapping a wash program opens the dedicated view: temperature, spin speed and rinse level can be tweaked here. It’s curious how the design team decided to adopt numerical values (60°c, 90°c) instead of words and converted “soil level” into an obscure “rinse level”. The extras are even more hidden than in the older model, under the “option” menu, also the cycle description is gone, hidden under an “i” button. ◀ [c14] Samsung WW9000 wash view. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015.

The Miele WMV960.

This Miele is quite different, it adopts a black and white interface on a low resolution display, at least by today’s standards. ◀ [c15] Miele WMV960 interface from the user manual.

The interface comprises a limited number of basic elements, buttons, lists, check-boxes and so on. I presume the design team aimed for a classy feel to differentiate it from the “sparkle” of the Korean machine interfaces, but I’m afraid the result might just be unappealing. ◀ [c16] Miele H 6860 interface. from Miele Australia, H 6860 BP M Touch intro, youtu.be/up-yAAt5DOc, retrieved 11/2015.

Both Miele and Samsung used a new technology to do the exact same thing they were doing before, presenting the same contents. While I see how Samsung made some effort to guide the user, by recalling elements from possibly known media (a consumer who is attracted to such models is probably familiar and uses a modern smart-phone). The same cannot 38

from Miele, WMV960 Operating instructions for washing machines, miele.co.uk/pmedia/ZGA/ TX2070/10165850-00002_10165850-02.pdf, retrieved 9/2015.

be said for Miele. A similar case is the H 6860 BP M Touch oven [c16], top of the range model, again equipped with an unusual interface. Basic functions are hidden under three or four taps, while settings are on the first level (options like the buzzer tone or brightness), certainly they certainly some creative hierarchy study here.

04 IoT and domotics While electronics has made objects that can hide an exponentially complex inner structure behind a simplified interface, the “internet of things” potentially allows objects to be (almost) completely hidden, with more parts present in the cloud than in the real world. For instance, a radio could be reduced to a speaker and a small embedded board mounted in the celling with no physical interface needed, controlled by means of a web app, tuned to web radios. Similarly, an intelligent thermostat could turn into an array of temperature and presence sensors in every room and again only a web app would be necessary to check on the machine.

Web content.

Connects.

Controls.

Still, even if it is feasible to bury all the interfaces in the pile of applications we use every day, most objects can be simplified only up to a point. A radio needs a means of emitting sound, a thermostat needs sensors and heating elements in the environment involved, and a washing machine would still need ninety percent of its current self for washing.

Addressing such a transition for these objects is indeed a challenge, there are already many “connected” home appliances on the market, including washing machines, with varying levels of hybridisation.

Integration, duplication and dislocation are the core principles adopted.

Integration is the adding of new functionality to a machine, duplication is to remotely control the machine by using the same elements adapted for another screen (smart-phone, tablet, etc…), transition is the moving of functionality away from the crowded physical interface into the cloud.

Integrations being integrated in a washing machine: - diagnosis tools; - energy optimisation tools (start the wash when the energy cost is low or when the photovoltaic system is producing enough energy not to use the grid, display energy consumption); - notification and monitoring (failure, end of cycle, supplies level); - delay the wash (coming home later than expected); - “do not disturb”, time of day when noisy operation should be avoided.

▲ [c17] scheme composed of: speaker from PCWorld, Three-Minute Tech: Speakers, pcworld.com, retrieved 12/2015; processor from Wikipedia, Motorola 68000, en.wikipedia.org/wiki/ Motorola_68000, retrieved 11/2015; cloud from Schneider Electric, Schneider Electric blog, blog.schneider-electric.com, retrieved 11/2015; pad from the Register, Stylus counsel: The rise and fall of the Apple Newton MessagePad, theregister. co.uk/2013/09/17/20_ years_of_the_apple_newton/, retrieved 11/2015.

39

◀◀ [c12] ◀ [c13]

◀ [c18] [c19] Samsung Smart Washer app. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015.

Duplication ▶ is the remote control of a device by using an adapted interface that shares the same functionality as the original.

The transposition can be particularly straight forward when the original interface is already a touch screen, otherwise mechanical controls have to be translated into the specific interface language of the destinations (sliders, buttons, gestures and so on). ◀ [c20] [c21] Berg Cloudwash. from Berg, Flickr Photostream, flickr.com/ photos/_berg, retrieved 1/2016.

Transition ▶ is less widespread, removing functionality from the main object means being dependent on the “remote” for that particular function, therefore it is dangerous as there is no widely adopted standard system or platform. Just think about not being able to change your phone because the proprietary app of your washer would not be compatible with the new model.

40

[note] Berg Cloudwash was a prototype made by Berg to show the possibilities of they ecosystem. Not being a real product it has to be considered in prospective. It utilizes transition more than any other sample I found, and wile this leaves a clean and fast physical interface it’s also a liability, until there isn’t going to be a stronger and common foundation for IoT.

Hierarchy What the user is looking for is what should be in evidence, and this is even more critical if a number of actions are required just to access the specialized application (unlocking the phone, finding the app, loading it up...). Still, the main feature usually displayed first is the selection of the wash cycle to start a wash, which is a great marketing tool for in-store demos, but not so much in day to day use. If you have to load the machine manually, you will have to stand in front of it, so is it a real advantage being able to select the cycle away from the machine?

[note] Appliance producers are using more and more “smart“ capabilities as a selling point. This generates confusion when they advertize prototypes of science fictional nature.

Like the fridge that knows what’s inside it and tells you when something is going to spoil.

▶ [c22] LG Home Chat presentation. from LG, LG Home Chat, lghomechat.com/us/, retrieved 12/2015.

Arguably, it would be better to have adaptive content displayed upon opening the application, for instance context dependent on the current machine state and user location. user : near the machine

machine : inactive

- Start new wash; - supplies level; - settings -> energy savings, - do not disturb hours etc... user : near the machine

machine : active

- Pause wash; - retard wash. user : away

machine : inactive

- Supplies level (do I have to buy more soap?); - usage statistics (how much electricity have I been using?). user : away

machine : active

- Pause wash; - retard wash, - supplies level.

41

05 The variables A model of variables and dependencies had to be defined in order to index all the samples.

How to read.

Independent variable

Start

Dependent variable

Text Icons No Yes

Appearance Single action

Radial list Rotor

Button / List

Vertical list

Program selection

Touch LCD

Grid list

Vertical list

Icons

Appearance Text

Yes

Legend No

42

Grid list

Vertical list Grid list Button / List

Grid list

Button / Single Touch LCD

Vertical list

Rotor

Yes

Radial list

Extra selection Appearance

No

Text

Icons

Text

Appearance

Wash phase

Icons

Feedback Timer (scale)

Eco rating (sequence)

Germany

Nationality Front

U.S.

Japan

...

Misc.

Loading

Top

43

06 Japan While collecting samples, I noticed how washing machines from Japan looked different, like the minimalistic design of the Panasonic Couble.

After a while I was able to get in touch with a Japanese acquaintance, Kotoko Iwakura, who I thank for the time she put into translating the following interfaces from Japanese. ◀ [c23] Panasonic NAVG1000. from Panasonic, wash, panasonic.jp/wash/, retrieved 1/2016.

Apart from the different looks, the content turned out to be very similar to the other non-Japanese samples. One feature stands out, all the samples featured a “suds saver” option. When selected, at the end of the wash part of the cycle, the soapy water would be collected in a tank to be reused in the next load, thus saving soap and water.

44

Toshiba TW-Z96X2ML(W)

Suds saver.

Water level.

Ag+ Sterilization.

Start / Stop.

Wash cycle.

Off / On.

Rinse.

Dry.

Timer.

Temperature.

Wash, rinse, spin, dry.

â–˛ [c24] Toshiba TW-Z96X2ML(W). from Minkara, n.a., minkara.carview. co.jp/en/userid/438759/ blog/35569746/, retrieved 12/2015.

45

Toshiba AW 42SEC(W)

Wash; rinse; drain; spin.

Standard; fast wash; dry; beddings.

Start / Stop.

Tub cleaning.

Timer, 6 or 9h dealy.

Off / On.

Water level.

Current state.

Ventilated dry, 1 or 3 h.

Wash cycle.

Temperature sensor.

Tangle sensor.

Tub drying.

Concentrated detergent.

â–˛ [c25] Toshiba AW 42SEC(W). from Recycle Kaitori, n.a., recycle-kaitori.com/blog/ kaitori, retrieved 12/2015.

46

Panasonic Econavi

Off / On.

Sterilization.

Timer.

Start / Stop.

Temperature.

Suds saver.

Ventilated dry.

Wash, rinse, spin, dry.

Wash cycle.

â–˛ [c26] Panasonic NAVG1000. from Panasonic, wash, panasonic.jp/wash/, retrieved 12/2015.

47

Hitachi BW-9PV

Timer.

Automatic wash

Water level.

Off / On.

Start / Stop.

Suds saver.

Wash, rinse, spin.

Saved cycle.

Ventilated dry.

Room dryed.

Wash cycle.

â–˛ [c27] Hitachi BW-9PV. from ikakeya0228, n.a., blog.goo.ne.jp/ ikakeya0228/m/201308, retrieved 12/2015.

48

d Scouting

01 How A series of tests were conducted to find critical elements in washing machine design.

In order to cover a wide range of variables (following the previously defined variables system) I selected four washing machine models.

All four models are currently in production (as per the end of 2015) and belong in the mid- price range.

[d0] Cover image. from Volvo Car Group, 40 Years of the Volvo 240/260: a Swedish icon, swedespeed.com/news/ Volvo_News/40-years-volvo-240260-swedish-icon/, retrieved 1/2016.

During the evaluation I monitored the activity of the subject, in order to find when there were hiccups, errors confusion and so on, this is what is called “Guerrilla usability testing”.

Designer Martin Belam describes it as “the art of pouncing on lone people in cafes and public spaces, [then] quickly filming them whilst they use a website for a couple of minutes.”

52

from David Peter Simon, The Art of Guerrilla Usability Testing, uxbooth.com/ articles/the-art-of-guerrilla-usability-testing/, retrieved 1/2016.

1° Phase.

--In the first phase I collected general data regarding the subjects: name, age, and whether they were used to doing laundry and so on 2° Phase.

--The subject was asked to rate the four washers, from the one that he would be more keen on buying to the worst and less appealing, given the similar price of the four appliances.

--Then I would ask them the reason(s) for their ratings.

3° Phase.

--The next task for the subject was to recall the last load of clothes he/ she had to wash and then to set the washing machine they selected as being the best.

--Time necessary to complete the cycle, number and severity of errors were recorded.

--This was then repeated with a different cycle, again from the subject’s memory, but now with the “worst” model.

How to read

Independent variable

Start

Dependent variable

53

Indesit A IWSD71252 Sample a.

● [note] The icon system generated confusion, particularly the icons representing “wool” and “synthetics”.

● [note] The manual index lists the temperatures alongside the wash program as the maximum limit for that particular cycle: when an higher temperature is selected the system limits the settings automatically: However, there is no clue about this behaviour on the machine dashboard.

In a few cases it wash perceived as the suggested temperature or the automatically selected temperature, raising the question as to why there was a dedicated control for such a setting.

54

● [note] It is not clear how the options “EcoTime” and “Energy Saver” work. The user manual advises the two options only be used with a limited number of wash cycles.

● [note] The spin icon and relative command were not always recognized by people used to a washing machine without this setting.

▲ [d1] Indesit Innex A IWSD71252. from personal collection.

Variables present on the model:

No

Text

Single action Appearance

Radial list

Button single

Rotor

Icons

Yes

Program selection

Appearance

Rotor Radial list

Text

Yes

Extra selection Legend

Italy

A IWSD71252

Nationality

Appearance

Text

Misc.

Front Loading

Icons

Icons

Feedback

Wash phase

Appearance

Timer (scale)

55

Electrolux EWF1074BW Sample b.

● [note] This list of extra functions is not entirely self explanatory, without looking at the manual the subjects did not know how and when to use each of the options.

● [note] This particular sample was the one perceived as the most complex in over the 50% of the tests. Even though it is not the most feature-packed model and what’s in it is organized quite logically, it “feels” crowded.

● [note] Again the spin icon and command where not always recognized.

▲ [d2] Electrolux Auto Sense System. from Rdveikals, n.a., rdveikals.lv/images/full/ e02549971b120fdbb0fd5ea840c85838.jpg, retrieved 11/2015.

56

Variables present on the model: Text Icons

Vertical list Button / List

Appearance

Button / List

No

Vertical list

Single action Yes

Program selection No

Extra selection Legend

Uk

Nationality

EWF1074BW

Appearance

Text

Misc.

Front Loading

Icons

Icons

Feedback

Appearance

Timer (scale)

57

Indesit XWA 61251 Sample c. ● [note] As in the sample a, the custom icon system was source of confusion.

Even the widely adopted Woolmark logo, designed

by Francesco Saroglia in 1964, was not consistently recognized.

● [note] Pressure on this button engages the automatic wash procedure which is not related to the other settings on the machine and should be used only for a restricted range of fabrics.

This button has been pressed mistakenly multiple times during the tests in order to start a regular cycle.

58

● [note] None of the users who tried this model knew how to use these extra functions.

▲ [d3] Indesit Innex XWA 61251. from personal collection.

Variables present on the model: Vertical list Text Radial list

Button / List

No Yes

Appearance Single action

Button single

Rotor

Icons Text

Program selection

Appearance Yes

Yes

Extra selection Legend XWA 61251

Italy

Appearance

Text

Icons

Nationality Front

Icons Appearance

Misc.

Feedback

Loading Wash phase

Timer (scale)

59

Daewoo DWD GM1011 Sample d.

● [note] The Cotton/Standard Cotton conundrum was perceived only during usage and was rarely spotted at beforehand.

● [note] This sample was recognized as the most simple (perceived simplicity) by more than 50% of the test subjects.

▲ [d4] Daewoo Power Drum. from Akamized, n.a., s1emagst.akamaized.net/ products/944/943716/ images/res_9491e1ec5f73b788abbf4a5c023d5310_full.jpg, retrieved 12/2015.

60

● [note] The Start/Pause button was often perceived as an extra function controlling the above array of leds. In a way this is true (it does start the sequence of actions), yet it ends up being deceiving.

Variables present on the model:

No

Text

Vertical list Single action

Appearance Radial list

Button / List Rotor Yes

Program selection No

Text

Extra selection

Appearance

Legend Denmarck

DWD GM1011

Nationality

Icons

Misc.

Front Loading

Text

Appearance

Feedback Wash phase

61

The raw data:

Do you usually do laundry

Age

Best model

Duration mm:ss

n째 errors

Completed ?

Successful ?

Female

Study

Yes at home

18 - 30

d

02:00

2

Yes

No

Female

Study

Yes at home

18 - 30

a

01:20

4

Yes

No

Female

Study

Yes at home

18 - 30

a

00:40

4

Yes

Yes

Male

Study

Yes at home

18 - 30

b

02:34

0

Yes

Yes

Female

Both

Yes at home

18 - 30

d

00:42

0

Yes

Yes

Male

Study

Yes at home

18 - 30

d

00:38

0

Yes

Yes

Male

Study

Yes at home

18 - 30

d

00:40

0

Yes

Yes

Male

Study

Yes at home

18 - 30

d

00:15

0

Yes

Yes

Female

Study

Yes at home

18 - 30

c

01:02

1

Yes

Yes

Male

Neither Yes at home

18 - 30

a

00:46

1

Yes

Yes

Female

Study

No I do not

18 - 30

c

00:17

1

Yes

Yes

Female

Study

Yes at home

18 - 30

b

00:50

0

Yes

Yes

Male

Both

At a laundromat

18 - 30

d

00:32

0

Yes

Yes

Male

Study

Yes at home

18 - 30

a

00:51

1

Yes

No

Male

Study

Yes at home

18 - 30

d

00:50

1

Yes

No

Female

Both

Yes at home

18 - 30

a

01:36

1

Yes

Yes

Female

Study

No I do not

18 - 30

d

00:22

0

Yes

Yes

Female

Study

At a laundromat

18 - 30

d

00:38

1

Yes

Yes

Female

Work

No I do not

> 30

c

00:38

0

Yes

No

Sex

Occupation

Best

62

Worst model

Duration mm:ss

n째 errors

Completed ?

Successful ?

Worst

a

01:42

1

Yes

Yes

b

01:38

0

Yes

Yes

b

00:54

0

Yes

Yes

c

01:19

3

Yes

No

b

00:30

2

Yes

Yes

c

00:39

0

Yes

Yes

b

01:10

0

Yes

Yes

b

00:45

0

Yes

Yes

b

01:04

1

Yes

Yes

c

00:41

0

Yes

Yes

b

00:44

2

Yes

No

a

00:55

1

Yes

Yes

c

00:50

0

Yes

Yes

b

00:49

1

Yes

Yes

b

01:28

0

Yes

Yes

b

01:14

0

Yes

Yes

c

01:34

3

Yes

Yes

a

02:08

1

Yes

Yes

b

01:00

4

Yes

Yes

63

Time needed to set the machine (in seconds).

90

60

Average time (best & worst)

30

0

a Number of votes (as best).

64

b

c

d

Duration mm:ss

120

Best model

Data for the “best� cycle

d

02:00

a

01:20

a

00:40

b

02:34

d

00:42

d

00:38

d

00:40

d

00:15

c

01:02

a

00:46

c

00:17

b

00:50

d

00:32

a

00:51

d

00:50

a

01:36

d

00:22

d

00:38

c

00:38

Time needed to set the machine (in seconds).

90

60

The “d” model has never been selected as worst.

30

0

a

b

c

Duration mm:ss

120

Worst model

Data for the “worst” cycle

a

01:42

b

01:38

b

00:54

c

01:19

b

00:30

c

00:39

b

01:10

b

00:45

b

01:04

c

00:41

b

00:44

a

00:55

c

00:50

b

00:49

b

01:28

b

01:14

c

01:34

a

02:08

b

01:00

d

Number of votes (as worst).

65

e Errors

01 Error layering A common phenomenon in Interaction design is what I’ll call “error layering”.

All the fundamental steps that make a design what it is in the end.

Error layering Any element that might disrupt the interaction process.

When digging, starting from the top layer we find:

Appearance Contents Concept

68

[e0] Cover image. from James Lee, The Beautiful Washing Machine, youtu.be/bXsMMHizW3o, retrieved 1/2016.

02 Appearance This layer is the most important element in the realm of graphic design and usually the last to be conceived, it wraps and tags the contents.

Visual variables and relations Bertin variables can be used to describe how the interface content has been tagged. Position, size, shape, value, colour, orientation and texture have an aggregative and hierarchizing effect that can be utilized to determine association between elements and their meaning.

see Lucinao Perondi, Sinsemie: Scrittura nello spazio. Viterbo: Stampa alternativa & Graffiti, 2012. page 54-61.

Position, I’m important. size,

shape,

value [a/n: brightness],

color,

orientation and We are twins. texture I start the dances.

No! I’m the one you want to touch.

â—€ [e1] Indesit Innex IWA 61251. from personal collection.

69

An interface has boundaries that define a cognitive environment. Most of the necessary “material� for understanding, and appropriate response is brought by the user (linguistic capabilities, previous experiences, etc.) however, the designer has space to define connections and relations within those boundaries.

He is going to be the user.

Hi.

â—€ [e2] Brain. from Allan Ajifo, n.d., aboutmodafinil.com, retrieved 11/2015.

70

Mapping A mapping problem is a missing or incorrect link between two elements of the interface, e.g. between a command and the controlled element.

Gestalt psychology is a good tool for performing this analysis at a visual level.

see Wikipedia, Gestalt psychology, en.wikipedia.org/ wiki/Gestalt_psychology.

--Position ▶ unrelated elements might be perceived as grouped and associated if near each other, arranged in a regular grid or just isolated from the rest.

--Colour coding ▶ the red button controls the red function.

--Shape coding ▶ a different shape or dimension should be related to a different class of functions, and used to enable an understanding of the interface: the bigger and more colourful button is the one that’s more likely to catch the user’s attention first.

Look at that.

◀ [e3] Daewoo Power Drum. from Akamized, n.a., s1emagst.akamaized.net/ products/944/943716/ images/res_9491e1ec5f73b788abbf4a5c023d5310_full.jpg, retrieved 12/2015.

71

Subordinate.

Controller.

A relation is established.

Very nice.

â—€ [e2]

The brand new relation is applied to all the similar objects.

Meanwhile, another button is near another column of LEDs.

But now the LEDs are not subordinate to the buttons below them.

72

Natural mapping Natural mapping occurs when the connection between a control and its subordinate is visible, direct and natural.

Control and controlled are near each other, they have shapes that resemble each other in an iconic or metaphoric way, they are similarly placed in the surrounding space.

Warning lights placed accordingly to the real topology. ◀ [e4] Fiat Panda Dashboard. from sim6680, Tesla Forever, sim6680.wordpress. com/tag/panda/, retrieved 1/2016.

Ambiguous icons Icons can be a powerful tool, but are often poorly implemented on a washing machine. Adopting icons might be useful in order to bridge the pictographic information on the care label, although this is impeded by the absence of universal standardisation (multiple local regulations in force at the moment). Yet the usage of a custom icon system usually generates even more confusion. Text and icons should work together in an interface, icons alone can have poor performances when the design does not consider the “learning phase”, when the correct meaning that a icon should have in a determined context is established for the first time. [...]the command expressed by the word “print” has only one meaning, but understanding an icon is more cognitively complex. Since each icon represents an object –in that case, a printer–, this object has often to be understood, by metonymy, as the action made possible by this object – in that case, “to print”. But the correct matching between a printer icon with the command “to print” is not so straightforward whoever the user is. An icon is indeed polysemic; it can refer either to “print”, “switch the printer on”, “feed paper into printer”, and so on, depending on the background knowledge of the user. [...]The interface

from Philippe Dessus, Daniel Peraya, Cognitive Modelling of Icon Comprehension, University of Grenoble & IUFM, University of Geneva, Switzerland.

73

of any recent software is composed of numerous icons. These icons are graphic representations of objects that are intended to be close to the user’s mental model, thus easier to recognize. But the matching between these representations and the actual function of the software raises some cognitive problems. The user has to perform a conversion between the object represented and the function of the software, which is not univocal (see the notion of congruency, Duval, 1999). [...]Even though icons are more closely akin to user’s mental models than text-based interfaces, the frequent use of tooltips in recent interfaces paradoxically shows the difficulty of icon identification.” «which are short texts temporarily displayed when the mouse is pointed over an icon” «It is rather paradoxical to add such textual information to icons for helping their comprehension, since they were originally designed to allow comprehension without any textual reference.

«An icon is indeed polysemic; it can refer either to “print”, “switch the printer on”,

◀ [e5] Print icon. from Apple Pages ver.

5.6.1, screen-shot.

“feed paper into printer”, and so on, depending on the background knowledge of the user.»

◀ [e2]

I’m a tooltip.

[...]tooltips can help users to perform a semiotic conversion between two registers (Duval, 1999). Richardson (2000) carried out an experiment to assess the interaction of user expertise and use of tooltips on icon comprehension. He showed that the more expert are the user, the less the tooltips are used. This result confirms the assumption that icon usage is learned and not directly obvious.

74

Not-univocal signs ▶ Icons and symbols can suffer from another potentially damaging issue, not only do they often require more interpretative effort than a single word but it is also more complex to reconstruct the logical meaning when the symbol is unknown. Consider looking up the meaning of “nylon” on Google as opposed to finding the meaning of a non standard icon. In many situations an image can indeed be “less univocal” than a word. Another quite common problem with a custom icon system is that often there are similar icons, differentiated only by a few small details.

Rhetorical figurers ▶ Synecdoche and metonymy should be avoided when constructing an icon set as both based on a similar mechanisms and consequently not easily discernible.

Synecdoche ▶ Relation of quantity (the part for the all).

Metonymy ▶ Relation of quality (the container for the continent, the source for the object).

If this is not possible to avoid those forms it’s at least advisable to maintain a great level of consistency in the system. In the following example, in the same system, and on the same control, we find: metaphors (as delicate as a flower), metonymy (a material and what produces it, and for synthetics the connection is doubled, with a flask as a symbol of chemistry and chemistry as source of the fabric) and composed signals (water bucket + hand = hand-wash, water bucket + 20°= low temperature).

see a document due to be published, from the results of the “AAC” Consensus Conference (occurred on the 13th of may 2015), sovrazonalecaa.org, Giulia Bonora, Luciano Perondi and Daniele de Rosa.

The cotton plant.

A chemical flask A “delicate” flower.

The action of hand-washing and the wool symbol.

A butterfly.

A t-shirt with 20’ written on the side

A water bucket with 20° written on the inside. ▲ [e6] Electrolux Auto Sense System. from Rdveikals, n.a., rdveikals.lv/images/full/ e02549971b120fdbb0fd5ea840c85838.jpg, retrieved 11/2015.

75

“Interpret”

“Save“

2°

“to Print“ “New file“

◀ [e2]

“to Print“ Recall.

I’m fast .

◀ [e5]

Associate.

I’m pointing to a single concept.

1° “to Print“

◀ [e2]

Learn.

76

If an interface skips the “learning” phase (not making sure that only one meaning is associated with an icon) it’s completely up to the user to perform the semiotic conversion, with almost unpredictable results.

▼ [e7] Various images from Google search “wool Icon“. from Google, Images, google.com, retrieved 9/2015.

Meaning. “wool fabric” Encoding.

This phase can indeed fail, leading to inaccurate results or to a complete halt.

Recalling.

Decoding.

◀ [e2]

Confronting.

The user needs information to decode.

77

Text Poor layout ▶ (mapping issues) A text-related mapping issue arises when labels are misplaced or where the interface is too crowded. In a washing machine, the rotary switch is often problematic, and more so as the number of programs seems to be constantly rising.

Poor legibility ▶ This may depend on multiple factors: dimension and contrast with the background are crucial, as well as the typeface itself, yet the incidence of problems with the first two seems to be much higher.

03 Contents The contents of the interface can be defined as the raw material that is needed to give substance to the concept. If the concept defines how the interface should proceed on a general scale, the content is what defines the micro-interactions that make up the experience.

In the system of variables defined previously, “rotary switch” or “legend” are elements of content, the actual appearance of those elements is much more variable and cannot be catalogued as clearly.

Non-homogeneous lists ▶ (what are you asking?) Coherence in what the interface is asking is fundamental to avoid confusion. To fulfil this requirement a list should contain only homogeneous elements.

However, this rarely happens and it is a recurring flaw of the programoriented system.

“which fabric?” “eco friendly?“ “which care?“ “how long?“ “which temperature?“

▲ [e6] Electrolux Auto Sense System.

78

Non clearly characterised multiple iterations ▶ A similar issue, related to spatial layout and appearance occurs when the same variable is used for two different arrays of choices. For example, a “vertical selection” for the temperature setting automatically attaches to that particular structure the “scale” property, being an object that contains elements in order of value, the same tag should not be used for other arrays with no scale relation as this could be misinterpreted by the user.

Temperature, from highest to lowest.

Spin speed from highest to lowest.

Grouped action, not in scale.

◀ [e8] Electrolux Auto Sense System. from Rdveikals, n.a., rdveikals.lv/images/full/ e02549971b120fdbb0fd5ea840c85838.jpg, retrieved 11/2015.

Exra stand-alone elements ▶ Every extra element should give a clear statement on how it is related with the rest of the system.

It is unclear how this setting relates with the main cycle.

▲ [e9] Indesit Innex IWA 61251. from personal collection.

79

04 Concept The concept that originates an interface is the underlying idea of how the interaction should proceed. If we are talking about UCD (usercentred design), the concept should include the user profile, needs, what issues the design has to solve and so on.

If the final design is a cake, the concept would be “wouldn’t it be nice to have sweet food at a birthday even though the birthday boy has diabetes?”. The content would be the recipe, that to correctly respond to the concept should contain an alternative to sugar, while the appearance would consist in the coloured icing on the top.

“A sugar free cake”

sugar aspartame flour baking soda cinnamon butter eggs

▲ [e10] Birthday cake. from Conversations for a better world, Happy Birthday Cakes, conversationsforabetterworld. com/happy-birthday-cakes-happy-birthday-images-pictures-wallpapers-for-facebook/, retrieved 1/2016.

80

An example: the GE GFWR4805FMC To find and analyse errors in the concept just by looking at the final design is a difficult task, but it is certainly possible to make an educated guess about what the designer (or the marketing division) was going for and think about what might have gone wrong, terribly wrong sometimes.

▼ [e11] The GE GFWR4805FMC.

This particular model from GE is just one example. It was the top model from 2015 and it is literally packed with all the imaginable. Apart from the general chaotic layout of the interface (appearance) it is possible to formulate a number of assumptions.

from GE Appliances, GFWR4805FMC, products.geappliances.com/appliance/ gea-specs/GFWR4805FMC, 1/2016.

The interface uses subjective terms (hot, cold) instead of numerical values (30°, 60°), still it does require the user to choose between five values and while choosing between cold, warm and hot is easy, choosing between hot and extra hot might be a bit confusing.

If a precise input is required, it is not advisable to mask it behind an “forgiving” interface. Likewise, feedback on energy consumption that ranges between “Good” and “Better” is hardly a good index.

The stain removal guide is a perfect example of what can be defined a “stamp” function. It has no graphical connection with the rest of the interface, and although there is a feedback (the settings are influenced by this function and change in value accordingly) little information is provided before the action takes place, the need for instructions written below the button is a clear symptom of this problem.

◀ [e12] The stain removal guide. from GE Appliances, GFWR4805FMC, products.geappliances.com/appliance/ gea-specs/GFWR4805FMC, 1/2016.

81

05 The program system “Select a wash cycle” says the machine, but what are we actually choosing? This method of selection as been adopted since the digitization of the washer interface, but they are constantly evolving.

At first things were mechanical, on a vintage automatic washer the rotor would activate, in sequence, different parts of the machine (water inlet, heater, drain), thus following a pre-defined (pre-programmed) cycle.

Space and technology were limited and only two or three programs could be put on a knob (e.g. high temperature/cotton and hand wash).

Then the user was given the possibility to customize the program, skipping a phase (pre-wash) or with a kind of external control, such as 1/2 load or temperature selection. ◀ [e13] Miele novotronic W 722 interface from the user manual. from User Manual .com, n.a., u-manual.com, retrieved 11/2015.

◀ [e14] Miele W 751 interface from the user manual. from User Manual .com, n.a., u-manual.com, retrieved 11/2015.

When the interface became digital, there was instantaneously more space and now a washing machine comes fitted with ten to fifteen programs. The nature of the programs itself did not change much: a set of instructions and settings optimized for a certain application. Even though it is no longer possible to manipulate the sequence manually, there are more sequences to choose from.

The apparent nature of the program can be deceiving, as it stopped being visible as a series of sub-actions that the machine would follow and is now presented only through a name or an icon.

Selecting a program no longer means selecting a sequence, selecting a program means selecting an invisible concept in an array of inhomogeneous objects.

82

◀ [e15] Miele W 3033 touchtronic interface from the user manual. from User Manual .com, n.a., u-manual.com, retrieved 11/2015.

Delicates, wool, cotton, synthetics are common programs and so it should be easy to understand their meaning.

Synthetics refers to synthetic fibres such as nylon, polyester, acrylic, spandex, or acetate. However, each one has different characteristics.

For instance, something made out of nylon can sustain a high temperature wash while rayon is particularly delicate when wet and could easily get damaged during the spin cycle.

“Delicates” are delicates, nothing more is told about them in the interface. The Delicate or Gentle cycle is the most ambiguous of the three. There is not necessarily a specific fabric that requires the delicate cycle (other than washable silk or wool), however there are many reasons to use this cycle. The delicate cycle uses a ‘slow/slow’ combination, meaning that the wash cycle uses a slow or lesser degree of agitation and the spin cycle uses a slow spin to extract water from laundry. A delicate cycle usually lasts between 4 and 7 minutes during its actual wash cycle. By using a ‘slow/slow’ cycle, the agitation and abrasion on the clothes is greatly reduced and offers a certain level of protection for some fabrics. Again, there are a few fabrics that need the delicate cycle and there are specific garments that need the extra protection offered by the gentle cycle. Such as garments that have appliques or sequins, lingerie, extremely sheer fabrics, pantyhose or loosely woven items such as a loosely crotched baby blanket. Also items that have weak fibers such as antique pieces or lacey items need the extra protection of the gentle cycle.

from Mama, Laundry Basics: How to Choose the Washing Cycle, mamaslaundrytalk.com/ laundry-basics-how-tochoose-the-washing-cycle, retrieved 1/2016.

Although wool is a delicate material, it should be washed using the “wool” program rather than “delicates”. Rayon, too, is delicate as well but then again there is no information for the user to consciously choose between “delicates” and “synthetics”.

In some cases, there might be also a fast/eco program, but how to choose? May the user be both in a hurry and want to wash a sweater?

Is it acceptable to convey this kind of information only through the manual?

83

f Prototype

01 From A to Prototype Make the most of machine automation A computer is better at doing computer stuff than a human.

The clear computer’s advantage in a washing machine is to be able to obtain a large amount of data from an array of sensors, and then use a complex mathematical model to un-scramble the raw data and formulate the most efficient washing procedure every time. This means clean clothes using the least amount of energy, water and soap.

▲ [f0] Cover image. astronaut from 2001: A Space Odyssey, Stanley Kubrick, 1968; Gerty from Moon, Duncan Jones, 2009.

The user’s freedom can be a liability here. During the test with classic models, it became clear how the user’s ability to select the temperature often translated in to a suboptimal choice of an higher than necessary temperature, and in this day and age it is mandatory to reduce waste whenever possible. Unfortunately, complete automation is yet to become reality, and the machine still needs the user for loading, unloading, refilling the soap dispenser and inserting information regarding which fabrics are in the load. Consequently, a crucial design challenge is to integrate the most possible automation with the least possible user interaction.

What happens when the automation fails During the research I stumbled upon traces of failed automation. Failure of an automatic wash program usually means that the clothing is not perfectly washed or, less frequently, that the fabric has been ruined (shrunken, felted, faded). The mathematical model in the automation creates boundaries (maximum temperature, for example) in order not to ruin delicate materials, this of course relies on a precise input from the user, so the previous is indeed true if we consider errors derived only from a miscalculation of the machine. Ruined fabric is indeed a common problem that occurs when the user select incorrect settings (e.g. cotton program for washing wool).

An automated system can fail, and it has to be designed to allow error correction. Usually the user is left alone with the problem and has to find an alternative way to correct the automation. A machine should be designed to learn, new data can be elaborated every time the users reports an error, thus creating a more precise mathematical model each time something wrong happens.

High-efficiency washing machines have flooded the US laundry market.

I have one and love it, but it is no secret that HE washing machines do have their drawbacks. There are two big issues with my front loader that I battle on a regular basis: 1.) It doesn’t use enough water with my cloth diapers, which can lead to smelly diapers.

2.) The washer can’t sense how to spin out small loads well. As a result, I end up with a drenched load of clothes after the final spin. They’re clean, but soaking wet. [...]I’m sure you know that high-efficiency washers use sensors to do 86

from Mama, How to Trick Your High-Efficiency Washing Machine, mamaslaundrytalk.com/howto-trick-your-high-efficiency-washing-machine/, retrieved 1/2016.

their work: they sense how much laundry is in the drum to determine how much water is needed. So you have to trick the machine into sensing the load is bulkier and heavier. When the load is heavier, both of my problems are eliminated. The cloth diapers get more water, which makes them rinse cleaner and prevents the stink. My small load of delicates spins out evenly because the machine senses more bulk in the drum.[...]I have several old, thin, color-fast towels that I keep on top of my dryer for this very reason. These towels are so old and thin that they literally do not produce lint any longer. While they do have some color, these towels have been used and washed enough times that I know the color won’t run onto my other laundry.[...]The towels add enough bulk and weight to make the washer do what I need it to. It’s a simple fix and I didn’t have to spend any money.

The user (Mama) had to compensate manually for an error, she based here actions upon a mental model that might or might not be correct, and, however, she obtained the desired results it wasn’t without a cost in time and energy.

As fast as memory An issue related to touch screen-based interaction is that spatial memory is less of a help to the user. Nested interfaces need more exploration to find and learn the available functions, those also require the person to look and “aim” every time the screen content changes.

A physical interface remains constant in time, and can be completely visible from the beginning, a layered interface, like that of a smartphone, shows different functions in different moments, which means

◀ [f1] Brain.

1°Look.

3°Look.

5°Look.

from Allan Ajifo, n.d., aboutmodafinil.com, retrieved 11/2015.

2°Aim. 4°Aim.

6°Aim. ◀ [f2] [f3] [f4] iPhone interface. from Apple Inc., Touch screen device, method, and graphical user interface for determining commands by applying heuristics, google.com/ patents/US7479949, retrieved 1/2016.

87

that cognitive elaboration and action have to take place repeatedly.

After some getting used to, a user operating a washer equipped with a standard mechanical interface is able to set the machine for a common cycle in a matter of a few seconds. “power on ▶ set the rotor to cotton ▶ set the temperature to 60°c ▶ start”

The cognitive elaboration “I have to wash wool, so the temperature should not exceed 30°c…” is by-passed as the result is already part of the user’s procedural memory. This is the benchmark for every other interface when it comes to how fast the interaction can be, and, for an “unpleasant” experience like doing the laundry, “fast and painless” is probably going to be appreciated by the user.

[def.] Procedural memory is a part of the long-term memory that is responsible for knowing how to do things, also known as motor skills. As the name implies, procedural memory stores information on how to perform certain procedures, such as walking, talking and riding a bike. from Kim Ann Zimmermann, Procedural Memory: Definition and Examples, ivescience. com/43595-procedural-memory.html, retrieved 1/2016.

88

Beware of simplicity, marketing and old people And so, it turns out people want keyboards. I mean, when I started in this business one of the biggest challenges was that people couldn’t type. And one day we realized that death would eventually take care of this. And so, people know how to type now. And if you do email of any volume, you gotta have a keyboard.

The rear view mirror had two controls, one to illuminate the compass the other simply labeled “mirror,” which lit a small red light when depressed. A rear view mirror with an on-off switch? The salesperson didn’t know what it did either.[...]Why all the buttons and controls on steering wheels and rear-view mirrors? Because they appear to add features that people want to have. They make a difference at the time of sale, which is when it matters most.

Why is this? Why do we deliberately build things that confuse the people who use them?

Answer: Because the people want the features. Because simplicity is a myth whose time has past, if it ever existed.

Make it simple and people won’t buy. Given a choice, they will take the item that does more.

from Steve Jobs, at All Things D conference, youtube.com/watch?v=oMyZwhzy5hE, retrieved 1/2016.

from Donald Norman, Simplicity Is Highly Overrated, jnd.org/dn.mss/ simplicity_is_highly.html, retrieved 1/2016.

Siemens recently released a washing machine that, to quote their website, “is equipped with smart sensors that recognize how much laundry is in the drum, what kind of textiles the laundry load comprises, and if it is heavily or lightly soiled. Users only have to choose one of two program settings: hot and colored wash, or easy-to-clean fabrics. The machine takes care of the rest.”

Hurrah, I said, now the entire wash can be automatic, so there need be only two controls: one to chose between “hot and colored wash” and “easy-to-clean fabrics,” the other to start the machine. Nope, this washer had even more controls and buttons than the non-automatic one. “Why even more controls? I asked my contact at Siemens, “when you could make this machines with only one or two?”.

“Are you one of those people who wants to give up control, who thinks less is better?” asked this usability expert. “Don’t you want to be in control?”

Strange answer. Why the automation if it isn’t to be trusted? And, yes, actually I am one of those bizarre people who think that less is better.

It appears that marketing won the day. And I suspect marketing was right. Would you pay more money for a washing machine with less controls? In the abstract, maybe. At the store? Probably not.

The user will want value for his money, and features mean value, then again simplicity is a more profound concept than removing stuff.

Everyone in the industry is playing the “features” game to have an edge over the competition, but creating a great product requires a different path.

89

A few principles to win the marketing battle: --the user has the right to be in control when he wants to, even if we are designing a highly automated system a secondary way to interact is necessary, otherwise the device potential would be arbitrarily limited with no real advantage; --flexibility is the “good” complexity, confusion is the bad; --many functions is no excuse for confusion, confusion is bad design and doesn’t really sell, confusion hides functionality, confusion gives the company a bad name; --a flexible object is an object that is able to perform all the action it’s supposed to do and maybe some it is not supposed to do (designer fallibility at accounting for the unimaginable); --the user changes, the machine can’t, this is particularly true for a washing machine. Something supposed to last fifteen years will accompany the user for a long enough time to see him change habits more than once (to have a child, find a new job, leave gym class and try rugby, etc...); --the user has expectations on appearance too, “is a television a television when it’s not equipped with a rectangular display?”, this is why the knob is still present on many models or why the only big advance in interface technology since the eighties are touch screen interfaces that look like smart-phones.

Know your user, know the activity I learned the art of design in the world of high-technology products.

There, I championed a method now known as human-centered design, where people who will use the products are observed at all phases of the process. (Notice I did not use the terms “interview,” “survey,” “questionnaire,” or “focus group.” Observation is the key.) There are several deadly sins of technology design, but the major ones result from too much attention to technology and features and not enough on people. One sin has an accompanying disease: “featuritis.” Controls proliferate. Complexity reigns. The hapless driver has to take courses on how to work the insides of the car. It is the worst of all possibilities.

The “listen to your users” produces incoherent designs. The “ignore your users” can produce horror stories, unless the person in charge has a clear vision for the product, what I have called the “Conceptual Model.” The person in charge must follow that vision and not be afraid to ignore findings. Yes, listen to customers, but don’t always do what they say.

Now consider the method employed by the Human-Centered Design community. The emphasis is often upon the person, not the activity.

Look at those detailed scenarios and personas: honestly, now, did they really inform your design? Did knowing that the persona is that of a 37 year old, single mother, studying for the MBA at night, really help lay out the control panel or determine the screen layout and, more importantly, to design the appropriate action sequence? Did user modeling, formal 90

from Donald Norman, Human-Centered Design Considered Harmful., jnd. org/dn.mss/human-centered_design_considered_ harmful.html, retrieved 1/2016.

from Donald Norman, Cockpit Complexity, jnd. org/dn.mss/cockpit_complexity.html, retrieved 1/2016.

or informal, help determine just what technology should be employed?

Show me an instance of a major technology that was developed according to principles of Human-Centered Design, or rapid prototype and test, or user modeling, or the technology adapting to the user. Note the word “major.” I have no doubt that many projects were improved, perhaps even dramatically, by the use of these techniques. But name one fundamental, major enhancement to our technologies that came about this way. Human-Centered Design does guarantee good products.

It can lead to clear improvements of bad ones. Moreover, good HumanCentered Design will avoid failures. It will ensure that products do work, that people can use them. But is good design the goal? Many of us wish for great design. Great design, I contend, comes from breaking the rules, by ignoring the generally accepted practices, by pushing forward with a clear concept of the end result, no matter what.

02 Iterate, iterate, iterate, iterate.

The first sketches of the prototype focussed on about content, keeping in mind all the prototype’s main goals: --two main levels that might or might not interact with each other: pure automation and pure manual control; --not to limit the machine potential, yet be simple; --not to be tedious, allow a fast interaction; --educate the user (giving information) whenever possible; --limit destructive errors, if possible even in “manual mode”; --ask clearly what is needed from the user, so no ordinary program system; --non-frightening interface (path dependence); --deal with automation errors.

91

In order to evaluate and consequently correct through the iterations a list of design principles had to be followed:

The connection between the front-end and the back-end.

Mapping

One to one relation between every interface element and the relative function.

Organization

An unique/common reference system and a coherent spatial disposition; groups defined through semantics.

Spatially-defined groups.

Homogeneous groups.

Hierarchy

Visual variables used accordingly to the content.

Elements from the same group share similar appearance.

Important/unique elements are visually differentiated in order be perceived as such.

Semantics

Univocity/unambiguousness have to be verified through the development; and only one encoding system shall be used.

Structural elements as part of coherent groups.

92

The washing machine model was considered as being equipped with a realistic array of sensor and computation power.

Moreover, as top of the line models often include this function, the machine is thought to be equipped with an automatic soap and conditioner dispenser (a soap tank big enough for multiple wash cycles).

A common array of sensors is: --load weight sensor ▶ water level, wash time, drum rotation speed optimization; --vibration sensors and rotation sensor ▶ drum rotation speed optimization; --optic sensor ▶ measures dirt level in the water; --water level sensor; --water temperature sensor ▶ tap water temperature compensation.

The first iteration was produced using Adobe inDesign for fast prototyping. InDesign is quite limited when it comes to interaction, still it is possible to easily animate buttons, move through pages using links and hide/show elements. Although being impossible to produce/realize from the beginning (a large touch-screen interface is still too expensive, and with no sufficient benefit to justify its presence) this revision was a white blanket, used to define the basics elements of the interface. ◀ [f5]

◀ [f6] At first only the automatic side was considered.

The minimal information required from the washing machine: which kind of fabrics and colours are part of the load and a timer to postpone the wash cycle.

93

◀ [f7] During the wash cycle, a detailed view of the different phases would be displayed.

◀ [f8] When the wash is complete the user is prompted with a question on whether he is satisfied with the wash quality.

Report bad wash performances The report bad wash function is an attempt to deal with automation errors: the fuzzy logic in the machine is based on a mathematical model, that turn an array of sensor readings into an array of wash settings, the results have a possible degree of uncertainty deriving from unusual user habits, extreme degrees of dirt and so on. Providing the machine with user feedback could prove to be a way of adding data to the system, including sensor readings and the relative wrong wash setting, thus expanding the mathematical model. The machine would be able to learn and respond to user needs.

However, this would be an ineffective implementation as it’s not clear which error the user is reporting, a shrunken sweater has different implications than a stinky diaper. The question “is the load clean?” would be more accurate. ◀ [f9] The manual mode was added later on, it’s supposed to be the preferred path for all the tasks that do not have cleaning as the main goal: “tie and dye” for example.

94

Testing revealed an unforeseen factor: whenever the subject lands on the manual side, either by exploring or by pure accident, there is a great chance that he will continue to set the machine and start the wash from the manual side, thus compromising the process. The manual mode, being similar to a more traditional interface, probably makes the user feel more comfortable with familiar elements like temperature and spin speed. However, at this point, the information that the user gives to the machine on the manual side is sufficient for a special cycle, but not for optimizing a regular one. The machine has to assume the worst case scenario and would end up using more water, soap and electricity than needed, e.g. how different kinds of fabrics absorb different volumes of water, given the same load weight.

The third iteration is still constructed in inDesign, but it’s organized in a slightly different way in order to be exported as a flash applet that can be displayed through a browser, thus bypassing many visualization problems I had with the interactive pdf of the first two iterations.

▼ [f10] [f11] The original applet is visible at the address giovannipignoni.com/ washiwashi/V2, it requires flash and it’s optimized for a big screen so it might be necessary to scale it using “cmd +” or “cmd -” (“ctrl +” or “ctrl -” on windows).

Since this iteration the huge touch screen was permanently dropped, replaced with a more practical and economically feasible solution, simple button actuators, rectangular LEDs and standard LCD numeric displays. The manual section is hidden behind a door, to define, at least partially, the interface hierarchy and a preferred path.

“On / Off” and “Start / Pause” are in evidence and the only two button to require a different mold, all the other components share the same shape. The “report bad wash” function now works with just one button, it proven to be still very confusing, often being operated randomly.

All the manual controls are grouped under the small flap.

95

Due to the limited capabilities of inDesign there is no interconnection between the manual and the automatic parts, and this was the main issue in the flash version. If selecting “wool” does not affect the maximum temperature, the learning process that would derive from this connection is broken.

Take an inexperienced user that operates the machine, he could either follow the “automatic” path and select the fabric type and colour, or he could discover that, when he selects a different fabric, cycle length, spin and temperature are affected, both the actual value and his boundaries (minimum and maximum value). This micro-interaction could trigger a logical connection, improving upon his knowledge about fabric care.

The fourth revision had to be more flexible than that, so it was made using JavaScript for the back-end and Zurb Foundations as the basis for the graphics.

On the front-end all the interface elements have a unique id (polyester_btn, nylon_btn, whites_btn, temp_text, spin_text, etc...).

On the back end the “state.js” file records the current state of each elements (on, off, 30°) and also how it can be modified (max. temperature, min. temperature).

The “action.js” file contains instructions on the effect of each button (e.g. pressing the blacks_btn it will turn on itself, sets the maximum temperature to 40°, set the maximum spin speed to 1200rpm and the minimum wash length to 30min).

When a button is pressed a function inside “function.js” is loaded, it reads the data from “action.js” and updates accordingly “state.js”, then the “refresh{}” function is loaded, it reads “state.js” then it targets each element in the html file making sure that every one has the state defined in “state.js”. To change state here means changing class, and therefore appearance (like switching from “on” to “off”), or to change the content itself (e.g. 30°, 40°, 50°).

96

▼ [f12] One of the many small iterations, quite similar to the older “flash“ version.

The code has a rather simple structure:

.Html

.Css <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8” /> <meta http-equiv=”x-ua-compatible” content=”ie=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0” />

<button id=”linen_btn” class=”small button “ (linen_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Silk </p> <button id=”silk_btn” class=”small button “ (silk_btn);” ><i class=”fi-minus”></i></button> </div>

<title>Washi Washi</title> wwwwwwwwww <script src=”js/action.js”></script> <script src=”js/state.js”></script> <script src=”js/functions.js”></script>

<div class=”main row faceplate” >

@font-face { font-family: lcd; src: url(font/lcd.ttf); } body{ width: 1920px;

onclick=” btn_press

onclick=” btn_press

overflow: hidden;

<div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Acetate </p> <button id=”acetate_btn” class=”small button “ (acetate_btn);” ><i class=”fi-minus”></i></button> </div>

<link rel=”stylesheet” href=”css/foundation.css” /> <link rel=”stylesheet” href=”foundation-icons/foundation-icons.css” /> <link rel=”stylesheet” href=”css/app.css” /> </head> <body onload=”refresh ()”>

} div.row.faceplate{ background-color: #E6E7E9;

onclick=” btn_press

onclick=” btn_press

<div class=”small-10 small-offset-10 columns”> <div class=”small-48 small-offset-0 columns”> <h1 class=”upTitle”>Manual settings</h1> <a id=”door_btn” class=”doorImg” onclick=” btn_press (door_btn);”><img src=”img/door.png”></a>

<div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Rayon </p> <button id=”rayon_btn” class=”small button “ (rayon_btn);” ><i class=”fi-minus”></i></button> </div>

onclick=” btn_press

<div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Spandex </p> <button id=”spandex_btn” class=”small button “ (spandex_btn);” ><i class=”fi-minus”></i></button> </div> <hr class=”short “/> </div>

</div> </div> <div class=”small-27 small-offset-1 columns”> <h1 class=”upTitle”>Automated settings</h1> </div> </div>

<div class=”small-5

<div class=”row title” > <div class=”small-7 small-offset-2 columns subTitle”> <h3 class=”subTitle”>Automatic dispenser</h3> <hr stile=”width:90%!important;”/> </div>

} button.small.button{ width: 115px; height: 1.9em; margin: 0em; margin-bottom: 0.5em; display: inline-block; text-align: left; line-height: 1; vertical-align: middle; border: 1px solid ; border-color: #000;

<div class=”small-10 small-offset-1 columns subTitle”> <h3 class=”subTitle”>Manual settings</h3> <hr class=”lessRight”/> </div>

<div class=”small-5 small-offset-1 columns subTitle”> <h3 class=”subTitle”>Colour selection</h3> <hr class=”lessRight”/> </div>

border-radius: 19px; padding: 0.456em 0.7em; font-size: 1.4rem; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #000;

onclick=” btn_press

background: #cbcccd;

small-offset-1 columns”>

} button.small.button.on{ color: #e31b21;

<div class=”small-48 small-offset-0 columns”> <p class=”btnTitle” > Whites </p> <button id=”whites_btn” class=”small button “ (whites_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-48 small-offset-0 columns”> <p class=”btnTitle” > Coloured </p> <button id=”coloured_btn” class=”small button “ (coloured_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-48 small-offset-0 columns”> <p class=”btnTitle” > Blacks </p> <button id=”blacks_btn” class=”small button “ (blacks_btn);” ><i class=”fi-minus”></i></button> </div> <hr class=”longher lessRight” />

<div class=”small-12 small-offset-1 columns subTitle”> <h3 class=”subTitle”>Fabric selection</h3> <hr class=”lessRight”/> </div>

}

onclick=” btn_press

button.small.button.off{ color: #41130d; }

onclick=” btn_press

button.small.button.dis{ color: #41130d; } button.small.button:active{ background: #b0b3b5;

onclick=” btn_press

}

border-top-right-radius:0em; border-bottom-right-radius:0em; padding-left: 0.8rem; padding-top: 0.55rem; -webkit-text-stroke-width: 0px;

<div class=”small-7 small-offset-2 columns”> <div class=”small-48 small-offset-0 columns”> <p id=”finishin”class=”btnTitle”>Finish in <span class=”smalltex”></span></p> <button class=”small button monitor”> <p id=”tofinish_text” class=”text_in_monitor” >1:20</p> </button>

</div>

color: #000;

</div>

</div> <div class=”row buttons” > <div class=”small-6 small-offset-2 columns”>

<div class=”small-48 small-offset-0 columns”>

} button.small.button.plus{

<p class=”stateList start_state “> <i id=”start_state” class=”fi-minus stateIndi off”></i>Start</p> <p class=”stateList “> <i id=”soak_state” class=”fi-minus stateIndi off”></i>Soak / pre-wash</p> <p class=”stateList “> <i id=”wash_state” class=”fi-minus stateIndi off”></i>Wash</p> <p class=”stateList “> <i id=”rinse_state” class=”fi-minus stateIndi off”></i>Rinse</p> <p class=”stateList “> <i id=”anti_state” class=”fi-minus stateIndi off”></i>Anti wrinkle</p> <p class=”stateList “> <i id=”end_state” class=”fi-minus stateIndi off”></i>End</p>

<div class=”small-25 small-offset-0 columns”> <p class=”btnTitle” >Soap</p> <button id=”soap_btn” class=”small button “ onclick=” btn_press (soap_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-23 small-offset-0 columns”> <p class=”refillList “> Refill <i id=”” class=”fi-minus stateIndi disp off”></i></p> <embed class=”barImg” src=”img/bar.svg”></embed> </div> <div class=”small-25 small-offset-0 columns”> <p class=”btnTitle” >Conditioner </p> <button id=”conditioner_btn” class=”small button “ onclick=” btn_press (conditioner_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-23 small-offset-0 columns”> <p class=”refillList “> Refill <i id=”” class=”fi-minus stateIndi disp off”></i></p> <embed class=”barImg” src=”img/bar.svg”></embed>

width: 42px; border-top-left-radius:0em; border-bottom-left-radius:0em; padding-left: 0.62rem; padding-top: 0.55rem; -webkit-text-stroke-width: 0px; color: #000;

</div>

} button.small.button.monitor{ background: #000000; border: 0px solid ; border-color: #000;

</div> </div>

display: inline-block; width: 80px; height: 1.9em; margin-left: -3%; margin-right: -3%; border-radius: 0; padding: 0px; padding-top: -1em; padding-right: 0.3em; text-align: right!important;

<div class=”row buttons middle” >

</div>

<div class=”small-25 small-offset-22 columns”> <div class=”small-48 small-offset-0 columns”> <embed class=”schemeImg” src=”img/scheme.svg”></embed>

</div> <div class=”small-11 small-offset-2 columns”>

</div>

<div class=”small-26 small-offset-0 columns”>

</div>

<div class=”small-48 small-offset-0 columns noPaddings”> <p class=”btnTitle” >Spin speed <span class=”smalltex”>(rpm)</span></p> <button class=”small button minus “ onclick=” btn_minus (19);” ><i class=”fi-x-circle”></i></button> <button class=”small button monitor”> <p id=”spin_text” class=”text_in_monitor off” >1200</p> </button> <button class=”small button plus “ onclick=” btn_plus (19);” ><i class=”fi-plus”></i></button> </div> <div class=”small-48 small-offset-0 columns noPaddings”> <p class=”btnTitle” >Temperature <span class=”smalltex”>(c°)</span></p> <button class=”small button minus “ onclick=” btn_minus (18);” ><i class=”fi-x-circle”></i></button> <button class=”small button monitor”> <p id=”temp_text” class=”text_in_monitor” >90</p> </button> <button class=”small button plus “ onclick=” btn_plus (18);” ><i class=”fi-plus”></i></button> </div> <div class=”small-48 small-offset-0 columns noPaddings”> <p class=”btnTitle” >Cycle length <span class=”smalltex”></span></p> <button class=”small button minus “ onclick=” btn_minus (20);” ><i class=”fi-x-circle”></i></button> <button class=”small button monitor”> <p id=”length_text” class=”text_in_monitor” >1:20</p> </button> <button class=”small button plus” onclick=” btn_plus (20);” ><i class=”fi-plus”></i></button> </div> </div>

color: #e31b21; }

</div>

button.small.button.bigger{ width: 180px;

<div class=”row buttons bottom” > <div class=”small-6 small-offset-2 columns”> <p class=”btnTitle” > On / Off </p> <button id=”power_btn” class=”small button bigger powerBnt”

}

onclick=” btn_press (power_btn);” ></button>

button.small.button.powerBnt { background: #e8442d;

</div>

} button.small.button.powerBnt:active{ background: #d8260e;

<div class=”small-6 small-offset-13 columns”> <div class=”small-48 small-offset-0 columns”> <p class=”btnTitle” >Delay length <span class=”smalltex”></span></p> <button class=”small button minus “ onclick=” btn_minus (17);” ><i class=”fi-x-circle”></i></button> <button class=”small button monitor”> <p id=”delay_text” class=”text_in_monitor” >1:20</p> </button> <button class=”small button plus” onclick=” btn_plus (17);” ><i class=”fi-plus”></i></button> </div>

font-family: lcd,”lcd”; position:relative; top: -0.2em; font-size: 2.2rem; padding-top: -2em; } p.text_in_monitor.off{ color: #000;

p.btnTitle{ font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif; margin-bottom: 5px; font-weight: 500; font-size: 0.95rem; color: #000; } div.row.faceplate{

hr.short{ position: relative; top: 7px; margin-left: -3px;

} hr.lessRight{ margin-right: +5px;}

font-weight: 600; font-size: 1.1rem; color: #000; z-index: 200;}

Browser.

.noPaddings{ padding: 0px!important; } embed.schemeImg{ width: 570px; position: relative; top: -19px; margin-bottom: -37px; } embed.linckImg2{ position: relative; width: 148px; top: -200px; right: -50px; }embed.barImg{ position: relative; width: 65px; top: -14px; left: -2px; } hr {

display: block; height: 1px; border: 0; border-top: 2px solid #000; margin: 0; margin-left: -7px; margin-bottom: 10px; padding: 0;

} hr.small { width: 40px; display: block; height: 1px; border: 0; border-top: 2px solid #000; margin: 0; margin-left: -7px; margin-bottom: 10px; padding: 0; } div.bad_wash{ position: relative; top: -18px; left: 5px; }

left: 57px;

a.doorImg{ position: fixed; top: -30px; left: 370px; width: 430px; z-index: 10; } a.doorImg.on{ top: -30px; } a.doorImg.on:hover{ top: -100px; } a.doorImg.on:active{ top: -150px;

span.smalltex{ font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif; font-weight: 600; font-size: 0.65rem; color: #000; position: relative; top:-1px; }

} p.stateList{ font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif; margin-bottom: -10px; margin-top: -10px; font-weight: 500; font-size: 0.95rem; color: #000; } p.refillList{ font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-size: 0.95rem; color: #000;

<div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Linen </p>

}

} hr.longher{ margin-left: -90px; position: relative; top: 7px; margin-right: +10px;

font-weight: 500; font-size: 1rem; color: #000; } h1.upTitle{ position:relative; margin-top: 2rem; font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif;

}

}

onclick=” btn_press

} a.small.button.bad_wash.on:active{ color: #e31b21!important;

div.subTitle{ padding-left: 20px; h3.subTitle{ font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif;

div.start_wash{ position: relative;

</div>

<div class=”small-6 small-offset-0 columns bad_wash “> <div class=”small-48small-offset-0 columns”> </div> </div>

<script src=”js/vendor/jquery.min.js”></script> <script src=”js/vendor/what-input.min.js”></script> <script src=”js/foundation.js”></script> </body> </html>

onclick=” btn_press

button.small.button.bad_wash.on{ color: #41130d !important; }

} p.stateList.start_state { margin-top: 10px;

i.fi-minus.stateIndi.disp{ margin-left: 5px; }

}

}

p.text_in_monitor{ -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #000; display: inline;

onclick=” btn_press

<div class=”small-3 small-offset- columns”> <div class=”small-48 small-offset-0 columns”>

</div> </div>

onclick=” btn_press

<div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Polyester </p> <button id=”polyester_btn” class=”small button “ (polyester_btn);” ><i class=”fi-minus”></i></button> </div>

i.fi-minus.stateIndi.dis{ color: #41130d;; i.fi-minus.stateIndi.on{ color: #e31b21;

}

</div>

</div>

</div> <div class=”small-12 small-offset-0 columns”> <div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Cotton </p> <button id=”cotton_btn” class=”small button “ (cotton_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Wool </p> <button id=”wool_btn” class=”small button “ (wool_btn);” ><i class=”fi-minus”></i></button> </div>

}

}

}

button.small.button.startBnt { background: #56b652;} button.small.button.startBnt:active{ background: #408f3d;}

</div> <div class=”small-5 small-offset-4 columns”> <div class=”start_wash small-48small-offset-0 columns”> <p class=”btnTitle” >Start / Pause</p> <button id=”start_btn” class=”small button bigger startBnt” (start_btn);” ><i class=”fi-minus”></i></button> </div>

<div class=”small-22 small-offset-0 columns”> <div class=”small-48 small-offset-0 columns noPaddings”> <p class=”btnTitle” >Spin only cycle</p> <button id=”spin_only_btn” class=”small button “ onclick=” btn_press (spin_only_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-48 small-offset-0 columns noPaddings”> <p class=”btnTitle” >Pre-wash</p> <button id=”prewash_btn” class=”small button “ onclick=” btn_press (prewash_btn);” ><i class=”fi-minus”></i></button> </div> <div class=”small-48 small-offset-0 columns noPaddings”> <p class=”btnTitle” >Tub cleaning</p> <button id=”tub_clean_btn” class=”small button “ onclick=” btn_press (tub_clean_btn);” ><i class=”fi-minus”></i></button> </div> </div>

margin-right: 8px; color: #41130d; font-size: 1.4rem; position: relative; top: +4px; } i.fi-minus.stateIndi.off{ color: #41130d;

button.small.button.minus{ width: 42px;

</div>

<div class=”small-5 small-offset-2 columns subTitle”> <h3 class=”subTitle”>Machine state</h3> <hr /> </div> <div class=”small-3 small-offset-0 columns subTitle”>

position: relative; top: 30px; left: 50px; } #finishin{ position: relative; left: -6.7px; } i.fi-minus.stateIndi{

height: 540px;

<div class=”small-16 small-offset-0 columns”> <p class=”btnTitle” > Nylon </p> <button id=”nylon_btn” class=”small button “ (nylon_btn);” ><i class=”fi-minus”></i></button> </div>

<div class=”main row title” >

a.doorImg.off{ top: -480px; z-index: 300; } a.doorImg.off:hover{ top: -400px; } a.doorImg.off:active{ top: -300px; }

A button is pressed.

Triggers.

Update the relative html bit.

Functions.js cleanStack (temp_stack, temp = who_is_press[0][i][1]);

function btn_plus(who_is_press) {

var who_to_update = info[0];

} else if (who_is_press[0][i][0] == “length_stack”){

var min = state[who_is_press][1]; var current = state[who_is_press][2]; var max = state[who_is_press][3]; var step = state[who_is_press][4]; var targhet = current + step;

for (bit in state) { if (state[bit][0] == who_to_update.replace(/\s+/g, ‘’)){

else if (who_is_press[0][i][0] == “spin_stack”){

state[bit][1] = whith_waht;

cleanStack (spin_stack, temp = who_is_press[0][i][1]);

refresh ();

} if ( state[bit][0] === “spin”){ var curr_spin= state[bit][2]; if (curr_spin===300){ curr_spin=”OFF” } document.getElementById(“spin_text”).innerHTML = curr_spin;

var whith_waht = info[1];

cleanStack (length_stack, temp = who_is_press[0][i][1]); }

if (targhet <=max & document.getElementById(“power_btn”).classList.contains(‘on’)){ state[who_is_press][2] = targhet }

}

}

}

}

} if ( state[bit][0] === “temp”){ var curr_temp= state[bit][2];

}

if (curr_temp===10){ curr_temp=”OFF” } document.getElementById(“temp_text”).innerHTML = curr_temp;

else { }

function btn_minus(who_is_press) { var min = state[who_is_press][1]; var current = state[who_is_press][2]; var max = state[who_is_press][3]; var step = state[who_is_press][4]; var targhet = current - step;

function cleanStack (stack, to_be_del) { var i = 0; console.log(“i’m splicing”) for (bit in stack) {

}

}

}

}

curr_delay =

if (destination == 20){ if(state[destination][2] != new_min ){

updateState (who_is_press[1][i]);

}

curr_tofinish =

if(state[destination][2] > new_max ){

} else if (who_is_press[0][i][0] == “length_stack”){ length_stack.push( temp = who_is_press[0][i][1]);

else if (who_is_press[0][i][0] == “spin_stack”){ spin_stack.push( temp = who_is_press[0][i][1]);

function refresh () {

else {

if ( state[bit].length == 2){ document.getElementById(state[bit][0]).classList.remove(‘on’); document.getElementById(state[bit][0]).classList.remove(‘off’); document.getElementById(state[bit][0]).classList.remove(‘dis’);

}

function bad () { if (document.getElementById(“end_state”).classList.contains(‘on’)) { document.getElementById(“tofinish_text”).innerHTML = “OK”;

}

function getState (who_to_get) {

else {

for (bit in state) {

var getStateRes = new Array(state[bit], bit); }

}

};

if ( state[bit][0] === “length”){ var curr_length= state[bit][2];

if (state[bit][0] == who_to_get){

}

hours.toString()+”:”+minutes.toString()

} }

document.getElementById(state[bit][0]).classList.add(state[bit][1]);

updateState (who_is_press[0][i]);

}

}

for (bit in state) {

refresh ();

}

}

if (who_is_press[0][i][0] == “temp_stack”){

document.getElementById(“tofinish_text”).innerHTML = curr_tofinish;

}

// console.log(temp_stack); // console.log(spin_stack); // console.log(length_stack);

}

else if (state[btn_state[1]][1] == “on”){

for (i in who_is_press[0]){

if (state[34][1] == “on” ) { curr_tofinish = “END”;}

state[destination][2] = new_max ; } state[destination][3] = new_max ;

}

// console.log(“state”); // console.log(state); // console.log(state[btn_state[1]]); // console.log(state[18]); // console.log(state[19]);

}

}

var minutes = curr_tofinish %60 var hours = (curr_tofinish - minutes) / 60 if(minutes===0){minutes=”00”}

} else{

compressStack (temp_stack, 18); compressStack (spin_stack, 19); compressStack (length_stack, 20);

temp_stack.push( temp = who_is_press[0][i][1]);

“delay”){

var curr_tofinish= state[17][2]+state[20][2];

state[destination][2] = new_min; } state[destination][1] = new_min ;

}

if (who_is_press[0][i][0] == “temp_stack”){

hours.toString()+”:”+minutes.toString()

document.getElementById(“delay_text”).innerHTML = curr_delay; }

var new_max = Math.min.apply(null, stack); var new_min = Math.max.apply(null, stack);

else {

}

for (i in who_is_press[0]){

var minutes = curr_delay %60 var hours = (curr_delay - minutes) / 60 if(minutes===0){minutes=”00”}

}

function compressStack (stack, destination) {

else if (who_is_press[0][i][0] == “spin_stack”){ }

var btn_state = getState( who_is_press.name ) ;

if (state[btn_state[1]][1] == “off”){

var curr_delay= state[bit][2];

stack.splice(bit,1); i +=1;

if (who_is_press[0][i][0] == “temp_stack”){ } else if (who_is_press[0][i][0] == “length_stack”){

refresh ();

function btn_press(who_is_press) {

} if ( state[bit][0] ===

if (stack[bit] == to_be_del && i == 0){

for (i in who_is_press[1]){

if (targhet >= min & document.getElementById(“power_btn”).classList.contains(‘on’)){ state[who_is_press][2]= targhet } }

var minutes = curr_length %60 var hours = (curr_length - minutes) / 60 if(minutes===0){minutes=”00”}

return(getStateRes);

curr_length =

hours.toString()+”:”+minutes.toString()

document.getElementById(“length_text”).innerHTML = curr_length;

function updateState (info) {

isPressed {...}

update {...}

Passes the data.

Checks what the button does.

Updates the target.

Action.js //misc var power_btn = new Array (); power_btn.name=”power_btn”;

power_btn[1] = new Array (); power_btn[1][0] = new Array (“power_btn”, “off”); power_btn[1][1] = new Array (“start_btn”, “dis”); power_btn[1][4] = new Array (“start_state”, “off”); power_btn[1][3] = new Array (“soap_btn”, “dis”); power_btn[1][4] = new Array (“conditioner_btn”, “dis”); power_btn[1][5] = new Array (“cotton_btn”, “dis”); power_btn[1][6] = new Array (“linen_btn”, “dis”); power_btn[1][7] = new Array (“spandex_btn”, “dis”); power_btn[1][8] = new Array (“wool_btn”, “dis”); power_btn[1][9] = new Array (“silk_btn”, “dis”); power_btn[1][10] = new Array (“rayon_btn”, “dis”); power_btn[1][11] = new Array (“acetate_btn”, “dis”); power_btn[1][12] = new Array (“polyester_btn”, “dis”); power_btn[1][13] = new Array (“nylon_btn”, “dis”); power_btn[1][14] = new Array (“whites_btn”, “dis”); power_btn[1][15] = new Array (“coloured_btn”, “dis”); power_btn[1][16] = new Array (“blacks_btn”, “dis”); power_btn[1][17] = new Array (“spin_only_btn”, “dis”); power_btn[1][18] = new Array (“prewash_btn”, “dis”); power_btn[1][19] = new Array (“tub_clean_btn”, “dis”); power_btn[1][20] = new Array (“length_text”, “off”); power_btn[1][21] = new Array (“temp_text”, “off”); power_btn[1][22] = new Array (“spin_text”, “off”); power_btn[1][23] = new Array (“delay_text”, “off”); power_btn[1][24] = new Array (“tofinish_text”, “off”); power_btn[1][25] = new Array (“soak_state”, “off”); power_btn[1][26] = new Array (“wash_state”, “off”); power_btn[1][27] = new Array (“rinse_state”, “off”); power_btn[1][28] = new Array (“anti_state”, “off”); power_btn[1][29] = new Array (“end_state”, “off”);

spin_only_btn[1] = new Array (); spin_only_btn[1][1] = new Array (“spin_only_btn”,

var silk_btn = new Array (); silk_btn.name=”silk_btn”; silk_btn[0] = new Array (); silk_btn[0][0] = new Array (“silk_btn”, “on”); silk_btn[0][1] = new Array (“temp_stack”,40 ); silk_btn[0][2] = new Array (“spin_stack”,400 ); silk_btn[0][3] = new Array (“length_stack”,50);

var acetate_btn = new Array (); acetate_btn.name=”acetate_btn”; acetate_btn[0] = new Array (); acetate_btn[0][0] = new Array (“acetate_btn”, “on”); acetate_btn[0][1] = new Array (“temp_stack”,20 ); acetate_btn[0][2] = new Array (“spin_stack”, 300 ); acetate_btn[0][3] = new Array (“length_stack”,45); acetate_btn[1] = new Array (); acetate_btn[1][0] = new Array ( “acetate_btn”, “off” );

start_btn[1] = new Array (); start_btn[1][0] = new Array (“start_btn”, start_btn[1][1] = new Array (“start_state”, start_btn[1][2] = new Array (“end_state”,

“off”); “off”); “on”);

//dispenser var soap_btn = new Array (); soap_btn.name=”soap_btn”; soap_btn[0] = new Array (); soap_btn[0][0] = new Array (“soap_btn”,”on”); soap_btn[1] = new Array (); soap_btn[1][0] = new Array (“soap_btn”,”off”);

var conditioner_btn = new Array (); conditioner_btn.name=”conditioner_btn”; conditioner_btn[0] = new Array (); conditioner_btn[0][0] = new Array (“conditioner_btn”, “on”); conditioner_btn[1] = new Array (); conditioner_btn[1][0] = new Array ( “conditioner_btn”, “off” ); //fabrics var cotton_btn = new Array (); cotton_btn.name=”cotton_btn”; //stack name , current, max cotton_btn[0] = new Array (); cotton_btn[0][0] = new Array (“cotton_btn”, “on”); cotton_btn[0][1] = new Array (“temp_stack”, 90 ); cotton_btn[0][2] = new Array (“spin_stack”, 1200); cotton_btn[0][3] = new Array (“length_stack”,20); cotton_btn[1] = new Array (); cotton_btn[1][0] = new Array ( “cotton_btn”, “off” );

var linen_btn = new Array (); linen_btn.name=”linen_btn”; linen_btn[0] = new Array (); linen_btn[0][0] = new Array (“linen_btn”, “on”); linen_btn[0][1] = new Array (“temp_stack”,40 ); linen_btn[0][2] = new Array (“spin_stack”, 400 ); linen_btn[0][3] = new Array (“length_stack”,30); linen_btn[1] = new Array (); linen_btn[1][0] = new Array ( “linen_btn”, “off” ); var spandex_btn = new Array (); spandex_btn.name=”spandex_btn”; spandex_btn[0] = new Array (); spandex_btn[0][0] = new Array (“spandex_btn”, “on”); spandex_btn[0][1] = new Array (“temp_stack”,30 ); spandex_btn[0][2] = new Array (“spin_stack”, 300 ); spandex_btn[0][3] = new Array (“length_stack”,35); spandex_btn[1] = new Array (); spandex_btn[1][0] = new Array ( “spandex_btn”, “off” ); var wool_btn = new Array (); wool_btn.name=”wool_btn”; wool_btn[0] = new Array (); wool_btn[0][0] = new Array (“wool_btn”, “on”); wool_btn[0][1] = new Array (“temp_stack”,30 ); wool_btn[0][2] = new Array (“spin_stack”, 400 ); wool_btn[0][3] = new Array (“length_stack”,50);

var prewash_btn = new Array (); prewash_btn.name=”prewash_btn”; prewash_btn[0] = new Array (); prewash_btn[0][0] = new Array (“prewash_btn”, “on”);

var state = new Array (); state [0] = new Array (“power_btn”, “off”); state [1] = new Array (“start_btn”, “dis”); state [2] = new Array (“start_state”, “off” ); state [3] = new Array (“soap_btn”, “dis”); state [4] = new Array (“conditioner_btn”, “dis”); state [5] = new Array (“cotton_btn”, “dis”); state [6] = new Array (“linen_btn”, “dis”); state [7] = new Array (“spandex_btn”, “dis”); state [8] = new Array (“wool_btn”, “dis”); state [9] = new Array (“silk_btn”, “dis” ); state [10] = new Array (“rayon_btn”, “dis” ); state [11] = new Array (“acetate_btn”, “dis” ); state [12] = new Array (“polyester_btn”, “dis” ); state [13] = new Array (“nylon_btn”, “dis” ); state [14] = new Array (“whites_btn”, “dis” ); state [15] = new Array (“coloured_btn”, “dis” ); state [16] = new Array (“blacks_btn”, “dis” ); // min , current , max , passo state [17] = new Array (“delay”, 0 , 0 , 720, 30); state [18] = new Array (“temp”, 10 , 50 , 90 , 10); state [19] = new Array (“spin”, 300 , 600 , 1200 , 100 // 300 is off); state [20] = new Array (“length”, 20 , 20 , 120, 10); state [21] = new Array (“spin_only_btn”, “dis” ); state [22] = new Array (“prewash_btn”, “dis” ); state [23] = new Array (“tub_clean_btn”, “dis” ); state [24] = new Array (“length_text”, “off” );

prewash_btn[1] = new Array (); prewash_btn[1][0] = new Array ( “prewash_btn”, “off” );

state [25] = new Array (“temp_text”, “off” ); state [26] = new Array (“spin_text”, “off” );

var rayon_btn = new Array (); rayon_btn.name=”rayon_btn”;

var tub_clean_btn = new Array (); tub_clean_btn.name=”tub_clean_btn”;

rayon_btn[0] = new Array (); rayon_btn[0][0] = new Array (“rayon_btn”, “on”); rayon_btn[0][1] = new Array (“temp_stack”,20 ); rayon_btn[0][2] = new Array (“spin_stack”, 300 ); rayon_btn[0][3] = new Array (“length_stack”,35); rayon_btn[1] = new Array (); rayon_btn[1][0] = new Array ( “rayon_btn”, “off” );

var polyester_btn = new Array (); polyester_btn.name=”polyester_btn”; polyester_btn[0] = new Array (); polyester_btn[0][0] = new Array (“polyester_btn”, “on”); polyester_btn[0][1] = new Array (“temp_stack”,40 ); polyester_btn[0][2] = new Array (“spin_stack”, 900 ); polyester_btn[0][3] = new Array (“length_stack”,40); polyester_btn[1] = new Array (); polyester_btn[1][0] = new Array ( “polyester_btn”, “off” );

tub_clean_btn[0] = new Array (); tub_clean_btn[0][1] = new Array (“tub_clean_btn”, tub_clean_btn[0][2] = new Array (“cotton_btn”, tub_clean_btn[0][3] = new Array (“linen_btn”, tub_clean_btn[0][4] = new Array (“spandex_btn”, tub_clean_btn[0][5] = new Array (“wool_btn”, tub_clean_btn[0][6] = new Array (“silk_btn”, tub_clean_btn[0][11] = new Array (“rayon_btn”, tub_clean_btn[0][12] = new Array (“acetate_btn”, tub_clean_btn[0][13] = new Array (“polyester_btn”, tub_clean_btn[0][14] = new Array (“nylon_btn”, tub_clean_btn[0][15] = new Array (“whites_btn”, tub_clean_btn[0][16] = new Array (“coloured_btn”, tub_clean_btn[0][17] = new Array (“blacks_btn”, tub_clean_btn[0][18] = new Array (“prewash_btn”, tub_clean_btn[0][19] = new Array (“spin_only_btn”, tub_clean_btn[0][20] = new Array (“temp_text”, tub_clean_btn[0][21] = new Array (“spin_text”,

state [27] = new Array (“delay_text”, “off” ); state [28] = new Array (“tofinish_text”, “off” ); “on”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “off”); “off”); “off”);

state [29] = new Array (“door_btn”, “on” ); state [30] = new Array (“soak_state”, “off” ); state [31] = new Array (“wash_state”, “off” ); state [32] = new Array (“rinse_state”, “off” ); state [33] = new Array (“anti_state”, “off” ); state [34] = new Array (“end_state”, “off” );

var temp_stack = new Array (); temp_stack [0] = 90;

tub_clean_btn[1] = new Array (); tub_clean_btn[1][1] = new Array (“tub_clean_btn”,

“off”);

tub_clean_btn[1][2] = new Array (“cotton_btn”, “off”); tub_clean_btn[1][3] = new Array (“linen_btn”, “off”); tub_clean_btn[1][4] = new Array (“spandex_btn”, “off”); tub_clean_btn[1][5] = new Array (“wool_btn”, “off”); tub_clean_btn[1][6] = new Array (“silk_btn”, “off”); tub_clean_btn[1][11] = new Array (“rayon_btn”, “off”); tub_clean_btn[1][12] = new Array (“acetate_btn”, “off”); tub_clean_btn[1][13] = new Array (“polyester_btn”, “off”); tub_clean_btn[1][14] = new Array (“nylon_btn”, “off”); tub_clean_btn[1][15] = new Array (“whites_btn”, “off”); tub_clean_btn[1][16] = new Array (“coloured_btn”, “off”); tub_clean_btn[1][17] = new Array (“blacks_btn”, “off”); tub_clean_btn[1][18] = new Array (“prewash_btn”, “off”); tub_clean_btn[1][19] = new Array (“spin_only_btn”, “off”); tub_clean_btn[1][20] = new Array (“temp_text”, “on”); tub_clean_btn[1][21] = new Array (“spin_text”, “on”);

var nylon_btn = new Array (); nylon_btn.name=”nylon_btn”; nylon_btn[0] = new Array (); nylon_btn[0][0] = new Array (“nylon_btn”, “on”); nylon_btn[0][1] = new Array (“temp_stack”,50 ); nylon_btn[0][2] = new Array (“spin_stack”, 1000 ); nylon_btn[0][3] = new Array (“length_stack”,45); nylon_btn[1] = new Array (); nylon_btn[1][0] = new Array ( “nylon_btn”, “off” );

“on”); “on”); “off”);

“off”);

spin_only_btn[1][2] = new Array (“cotton_btn”, “off”); spin_only_btn[1][3] = new Array (“linen_btn”, “off”); spin_only_btn[1][4] = new Array (“spandex_btn”, “off”); spin_only_btn[1][5] = new Array (“wool_btn”, “off”); spin_only_btn[1][6] = new Array (“silk_btn”, “off”); spin_only_btn[1][11] = new Array (“rayon_btn”, “off”); spin_only_btn[1][12] = new Array (“acetate_btn”, “off”); spin_only_btn[1][13] = new Array (“polyester_btn”, “off”); spin_only_btn[1][14] = new Array (“nylon_btn”, “off”); spin_only_btn[1][15] = new Array (“whites_btn”, “off”); spin_only_btn[1][16] = new Array (“coloured_btn”, “off”); spin_only_btn[1][17] = new Array (“blacks_btn”, “off”); spin_only_btn[1][18] = new Array (“prewash_btn”, “off”); spin_only_btn[1][19] = new Array (“tub_clean_btn”, “off”); spin_only_btn[1][20] = new Array (“temp_text”, “on”);

silk_btn[1] = new Array (); silk_btn[1][0] = new Array ( “silk_btn”, “off” );

//colours var whites_btn = new Array (); whites_btn.name=”whites_btn”;

var start_btn = new Array (); start_btn.name=”start_btn”; start_btn[0] = new Array (); start_btn[0][0] = new Array (“start_btn”, start_btn[0][1] = new Array (“start_state”, start_btn[0][2] = new Array (“end_state”,

Reads the state of each and every element.

State.js spin_only_btn[0][19] = new Array (“tub_clean_btn”, “off”); spin_only_btn[0][20] = new Array (“temp_text”, “off”);

wool_btn[1] = new Array (); wool_btn[1][0] = new Array ( “wool_btn”, “off” );

power_btn[0] = new Array (); power_btn[0][0] = new Array (“power_btn”, “on”); power_btn[0][1] = new Array (“start_btn”, “off”); power_btn[0][2] = new Array (“start_state”, “off”); power_btn[0][3] = new Array (“soap_btn”, “on”); power_btn[0][4] = new Array (“conditioner_btn”, “on”); power_btn[0][5] = new Array (“cotton_btn”, “off”); power_btn[0][6] = new Array (“linen_btn”, “off”); power_btn[0][7] = new Array (“spandex_btn”, “off”); power_btn[0][8] = new Array (“wool_btn”, “off”); power_btn[0][9] = new Array (“silk_btn”, “off”); power_btn[0][10] = new Array (“rayon_btn”, “off”); power_btn[0][11] = new Array (“acetate_btn”, “off”); power_btn[0][12] = new Array (“polyester_btn”, “off”); power_btn[0][13] = new Array (“nylon_btn”, “off”); power_btn[0][14] = new Array (“whites_btn”, “off”); power_btn[0][15] = new Array (“coloured_btn”, “off”); power_btn[0][16] = new Array (“blacks_btn”, “off”); power_btn[0][17] = new Array (“spin_only_btn”, “off”); power_btn[0][18] = new Array (“prewash_btn”, “off”); power_btn[0][19] = new Array (“tub_clean_btn”, “off”); power_btn[0][20] = new Array (“length_text”, “on”); power_btn[0][21] = new Array (“temp_text”, “on”); power_btn[0][22] = new Array (“spin_text”, “on”); power_btn[0][23] = new Array (“delay_text”, “on”); power_btn[0][24] = new Array (“tofinish_text”, “on”); power_btn[0][25] = new Array (“soak_state”, “off”); power_btn[0][26] = new Array (“wash_state”, “off”); power_btn[0][27] = new Array (“rinse_state”, “off”); power_btn[0][28] = new Array (“anti_state”, “off”); power_btn[0][29] = new Array (“end_state”, “off”);

refresh {...}

var spin_stack = new Array (); spin_stack [0] = 1200; var length_stack = new Array (); length_stack [0] = 20;

var door_btn = new Array (); door_btn.name=”door_btn”;

whites_btn[0] = new Array (); whites_btn[0][0] = new Array (“whites_btn”, “on”); whites_btn[0][1] = new Array (“temp_stack”,90 ); whites_btn[0][2] = new Array (“spin_stack”, 1200 ); whites_btn[0][3] = new Array (“length_stack”,20);

door_btn[0] = new Array (); door_btn[0][0] = new Array (“door_btn”, “on”); door_btn[1] = new Array (); door_btn[1][0] = new Array ( “door_btn”, “off” );

whites_btn[1] = new Array (); whites_btn[1][0] = new Array ( “whites_btn”, “off” ); var coloured_btn = new Array (); coloured_btn.name=”coloured_btn”; coloured_btn[0] = new Array (); coloured_btn[0][0] = new Array (“coloured_btn”, “on”); coloured_btn[0][1] = new Array (“temp_stack”,40 ); coloured_btn[0][2] = new Array (“spin_stack”, 1200 ); coloured_btn[0][3] = new Array (“length_stack”,35); coloured_btn[1] = new Array (); coloured_btn[1][0] = new Array ( “coloured_btn”, “off” ); var blacks_btn = new Array (); blacks_btn.name=”blacks_btn”; blacks_btn[0] = new Array (); blacks_btn[0][0] = new Array (“blacks_btn”, “on”); blacks_btn[0][1] = new Array (“temp_stack”,40 ); blacks_btn[0][2] = new Array (“spin_stack”, 1200 ); blacks_btn[0][3] = new Array (“length_stack”,30); blacks_btn[1] = new Array (); blacks_btn[1][0] = new Array ( “blacks_btn”, “off” ); // //plus minus // var delay_plus = new Array (); // delay_plus.name=”delay_plus”; // delay_plus[0] = new Array (); // var delay_min = new Array (); // delay_min.name=”delay_min”; // delay_min[0] = new Array (); // var temp_plus = new Array (); // temp_plus.name=”temp_plus”; // temp_plus[0] = new Array (); // var temp_min = new Array (); // temp_min.name=”temp_min”; // temp_min[0] = new Array (); // var spin_plus = new Array (); // spin_plus.name=”spin_plus”; // spin_plus[0] = new Array (); // var spin_min = new Array (); // spin_min.name=”spin_min”; // spin_min[0] = new Array ();

All the elements, their relative current state and boundaries.

// var length_plus = new Array (); // length_plus.name=”length_plus”; // length_plus[0] = new Array (); // var length_min = new Array (); // length_min.name=”length_min”; // length_min[0] = new Array (); //manual var spin_only_btn = new Array (); spin_only_btn.name=”spin_only_btn”; spin_only_btn[0] = new Array (); spin_only_btn[0][1] = new Array (“spin_only_btn”, spin_only_btn[0][2] = new Array (“cotton_btn”, spin_only_btn[0][3] = new Array (“linen_btn”, spin_only_btn[0][4] = new Array (“spandex_btn”, spin_only_btn[0][5] = new Array (“wool_btn”, spin_only_btn[0][6] = new Array (“silk_btn”, spin_only_btn[0][11] = new Array (“rayon_btn”, spin_only_btn[0][12] = new Array (“acetate_btn”, spin_only_btn[0][13] = new Array (“polyester_btn”, spin_only_btn[0][14] = new Array (“nylon_btn”, spin_only_btn[0][15] = new Array (“whites_btn”, spin_only_btn[0][16] = new Array (“coloured_btn”, spin_only_btn[0][17] = new Array (“blacks_btn”, spin_only_btn[0][18] = new Array (“prewash_btn”,

“on”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”); “dis”);

Contains what should happen when a button is pressed,

e.g. blacks_btn(off) temp(10, 50, 90, 10).

Min, current, max, step.

e.g. wool_btn sets the maximum temperature to 20°.

97

When multiple options are selected at the same time, “wool_btn” and “cotton_btn” in example, there is going to be more than one maximum temperature, the system is built so that it preserves the most delicate fabric selected. So If the wool setting requires a temperature no higher than 30° while cotton can be washed up to 90° the limit for both is still going to be 30°.

After multiple minor revisions, in which, for instance, the prototype lost the “report bad wash” function, to be re-implemented in the cloud, it was time for a session of tests.

98

▲ ▶ [f13] [f14] [f15] The fourth main revision, made using JavaScript, is visible at the address giovannipignoni.com/ washiwashi/V3, it’s optimized for a big screen so it might be necessary to scale it using “cmd +” or “cmd -” (“ctrl +” or “ctrl -” on windows).

03 First session of tests The tests were performed as follows.

Basic information (age, name, experience with washing machines) were collected.

The prototype was shown to the subject and he/she was asked to rate it instinctively from 1 (complex) to 5 (simple), in order to gain an index of the perceived usability. The user then had to complete two different tasks: --wash a load composed of mostly cotton (t-shirts, socks, underwear); --recall the last “real” load wash load he/she had done and wash it, if not too similar to the “dummy” load, otherwise a load composed of dark shirts and sweatshirts would have been suggested.

During the test, both quantitative (time, number of errors) and qualitative information (kind of error and whether the wash had been completed and was successful) were recorded.

99

The raw data:

Rate form complex to simple

Duration mm:ss

n째 errors

Completed ?

Successful ?

At a laundromat

18 - 30

3

00:37

1

Yes

Yes

Female

Study

Yes at home

18 - 30

4

01:29

2

Yes

Yes

Female

Work

No I do not

> 30

3

01:04

1

Yes

Yes

Female

Study

Yes at home

18 - 30

4

00:25

0

Yes

Yes

Female

Study

Yes at home

18 - 30

3

01:08

0

Yes

Yes

Female

Study

Yes at home

18 - 30

4

00:38

0

Yes

Yes

Female

Study

Yes at home

18 - 30

4

00:58

2

Yes

No

Male

Study

Yes at home

18 - 30

3

01:08

0

Yes

Yes

Female

Study

Yes at home

18 - 30

4

00:24

1

Yes

No

Female

Both

Yes at home

18 - 30

4

02:06

2

Yes

No

Female

Study

Yes at home

18 - 30

3

01:02

2

Yes

Yes

Female

Study

No I do not

18 - 30

2

00:59

1

Yes

Yes

Male

Both

Yes at home

18 - 30

4

00:30

1

Yes

Yes

Female

Study

At a laundromat

18 - 30

4

00:43

1

Yes

Yes

Female

Study

Yes at home

18 - 30

2

01:00

1

Yes

No

Female

Study

No I do not

18 - 30

2

02:00

2

Yes

No

Male

Study

At a laundromat

18 - 30

4

00:34

0

Yes

Yes

Female

Study

Yes at home

18 - 30

2

01:00

2

Yes

Yes

Male

Study

Yes at home

18 - 30

3

02:00

1

Yes

Yes

Male

Study

Yes at home

18 - 30

4

02:00

1

Yes

Yes

Male

Work

Yes at home

> 30

4

00:43

1

Yes

Yes

Female

Work

Yes at home

> 30

3

00:38

0

Yes

Yes

100

Do you usually do laundry

Study

Occupation

Male

Sex

Age

Fixed cycle

Duration mm:ss

n째 errors

Completed ?

Successful ?

Description of the errors

Recalled cycle

00:15

0

Yes

Yes

Delay confused with wash time

00:32

0

Yes

Yes

n/a

01:30

2

Yes

Yes

What is delay?

00:19

0

Yes

Yes

Turn on

00:32

0

Yes

Yes

n/a

00:22

0

Yes

Yes

Turn on

00:58

0

Yes

Yes

Selects wrong material

00:28

0

Yes

Yes

Turn on

00:17

0

Yes

Yes

Turn on Disabled soap

00:47

0

Yes

Yes

Turn on Did a spin only cycle

00:17

0

Yes

Yes

Turn on Disabled soap

01:00

1

Yes

Yes

Turn on

00:58

0

Yes

Yes

Turn on

00:34

1

Yes

Yes

Turn on

00:32

0

Yes

Yes

Disabled soap

00:50

0

Yes

Yes

Turn on Disabled soap

00:08

0

Yes

Yes

n/a

00:24

1

Yes

No

Turn on Disabled soap

00:40

1

Yes

Yes

Turn on

01:32

1

Yes

Yes

Turn on

00:40

1

Yes

Yes

Turn on

00:30

0

Yes

Yes

n/a 101

Highlights:

● [note] The soap dispenser is on by default, so it doesn’t require an user action in normal use.

This is not coherent with the rest of the interface where, if you want something, you have to click it and was often misinterpreted.

● [note] Almost every subject started using the machine without turning it on first.

102

▼ [f13]

● [note] The multiple selection is not always perceived, a few subjects applied the “Program” forma mentis, selecting only one fabric, generally the most delicate.

Scatter-plots of setting time versus perceived simplicity

Time the user took to set the machine (fixed cycle).

120 Time the user took to set the machine (recalled cycle).

Time

90

Perceived simplicity

60

[note] The average execution time of the second cycle is 35% lower than the first, also there seems to be a relation between the perceived simplicity and the time needed to operate the machine.

Time (in seconds).

30

Higher perceived simplicity could be an indicator of how well the user understood the machine structure at a glance, speeding up the rest of the operation.

0 1 2 3 4 5

103

Box-plot of setting time

Fixed wash

Recalled wash

0

Time (in seconds).

Bounding box containing the data from the second and third quartiles.

Time

104

30

Median.

60

Time the user took to set the machine (Successful wash).

Time the user took to set the machine (Unsuccessful wash).

90

120

105

Distribution of time versus wash number

Here the density peaks around 50 sec.

Density

1째 Wash (fixed)

0

30

60

90

120

150

180

Time (in seconds).

Results density

How to read.

Time

106

Histogram.

Density plot.

210

Density

2째 Wash (recalled)

0

30

60

90

120

150

180

210

Time (in seconds).

[note] Charts made using JASP (version 0.7), jaspstats.org, retrived 2/2015.

107

04 Evolution after the test Testing revealed a list of rough edges that had to be smoothed properly in order to proceed: --normalize the response of the soap dispenser; --solve the problem with the power button; --rework the fabric selection. â&#x2013;ź [f14]

â&#x2013;˛ [f16] The fifth revision, made using JavaScript, is visible at the address giovannipignoni.com/washiwashi/ V4.

108

Soap dispenser The button now disables the relative dispenser, the default position is off and it becomes active if pressed, consequently it’s now uniform with the other buttons of the interface. The two warning lights (Soap empty and Conditioner empty) have been moved lower as the connection between them and the two buttons changed (the buttons now disables the dispenser).

▲ [f16]

▲ [f17] The fifth revision, turned on.

Reset / Off As almost none of the test subjects used the “On / Off” button to turn on the machine, to respect this natural behaviour all the buttons act now as an “on” button (the start / pause button is excluded as it would mean starting a cycle prior to setting anything). The “On / Off” button is now a “Reset / Off” and it has been moved to the end of the interface. The idea of a “sleeping” machine, ready whenever a button is pressed, is also coherent with that of a cloud connected machine that is therefore always connected to a network and never completely off.

Fabric selection In order to guide the user to a good selection and discourage poor (but still possible) combinations, the fabric selection has been rearranged in two macro groups of “Delicates” and “Strong”. Cross selection is still possible, but the user is informed of the eventual poor choice through a feedback.

109

05 Second session of tests The second session of tests was a good opportunity to dig deeper into the interaction mechanics that surround laundry. Therefore a more loosely guided test had to be set up.

Instead of giving the user a task (e.g. wash a dark sweater), he/she would have to interact with a pile of real clothes, to be arranged in one or more wash load and then washed virtually. This replicates quite nicely the normal routine, and evaluates for instance their attitude at determining the fabric type of each cloth, whether they would check the label or not and so on.

The user was asked basic information (age, sex, whether they were used to doing laundry) then, as in the first test, the prototype was shown briefly and they were asked to rate it instinctively from 1 (complex) to 5 (simple).

After that, the userâ&#x20AC;&#x2122;s attention was directed upon a pile of mixed clothes. the pile included: one pair of socks wool

light;

one sweater

wool

blue;

one sweater

cotton

green;

one sweater

polyester

red;

one shirt

cotton

light;

one shirt

cotton

green;

one t-shirt

cotton

white;

one leg warmer

polyester/spandex

dark;

one run t-shirt

polyester

red;

one run shorts

polyester

dark.

The subject then had to arrange the different clothes in one or more wash loads, as he/she would do at home. The user was also told not to think about quantity (the loads did not have to be big enough to fill a washing machine).

The test with the prototype would commence once he/she finished organising the clothes.

Before operating the prototype I gave each user a â&#x20AC;&#x153;sensoryâ&#x20AC;? background, in order to compensate the limits of being in front of a computer screen and not a physical machine: --this is a button

;

--this is a LED light, and now it is not emitting light --this is a door

;

;

--the machine is equipped with two tanks, for soap and conditioner, 110

good for multiple wash cycles; the machine regulates automatically the amount of soap needed for each wash.

The user was then asked to set the machine to wash all the different loads he/she arranged (no more than three measurements were made per subject), after each wash the user was told the results (e.g. “the sweater shrunk” or “all is good”).

During each session I recorded: --time needed to set the machine; --number of errors (incorrect settings); --clothes that made up the load; --fabric and colour settings; --whether the wash was successful (if the settings were appropriate for the relative load); --whether the wash was initialised (if the machine was actually started).

One out of six wash sessions was deemed “unsuccessful” which means that the machine settings did not reflect the load: the soap was disabled cotton or synthetics washed as wool delicates washed as strong

▶ ▶ ▶

cloth dirty but not ruined; cloth cleaned but soaking wet; cloth possibly ruined.

It’s difficult to assess the seriousness of the errors in such tests, as wash conditions and fabric characteristics are extremely variable, so “unsuccessful” is any case in which the machine was not in the best possible condition to perform the correct wash.

111

The raw data:

Do you usually do laundry

Age

Rate form complex to simple

Duration mm:ss

n째 errors

Completed ?

Successful ?

Female

Study

No I do not

18 - 30

3

03:04

2

Yes

No

Male

Study

Yes at home

18 - 30

2

00:50

1

Yes

Yes

Male

Study

Yes at home

18 - 30

4

01:24

1

Yes

Yes

Female

Study

No I do not

18 - 30

4

00:51

0

Yes

Yes

Female

Study

Yes at home

18 - 30

5

01:52

1

Yes

Yes

Female

Study

Yes at home

18 - 30

4

00:36

0

Yes

Yes

Female

Study

Yes at home

18 - 30

3

01:31

0

Yes

Yes

Male

Study

Yes at home

18 - 30

4

00:52

0

Yes

Yes

Female

Study

Yes at home

18 - 30

4

02:07

0

Yes

Yes

Male

Study

Yes at home

18 - 30

3

00:52

3

Yes

No

Female

Study

Yes at home

18 - 30

4

00:34

0

Yes

Yes

Female

Study

Yes at home

18 - 30

3

01:20

2

Yes

No

Female

Study

Yes at home

18 - 30

5

00:37

0

Yes

Yes

Female

Study

Yes at home

18 - 30

4

02:35

1

Yes

No

Male

Study

Yes at home

18 - 30

5

00:34

1

Yes

Yes

Male

Study

Yes at home

18 - 30

4

00:39

1

Yes

No

Male

Study

Yes at home

18 - 30

4

00:11

0

Yes

Yes

Female

Study

Yes at home

18 - 30

3

02:13

1

Yes

Yes

Male

Study

Yes at home

18 - 30

2

01:26

1

Yes

No

Female

Study

Yes at home

18 - 30

3

00:50

0

Yes

Yes

Female

Work

Yes at home

> 30

4

01:00

0

Yes

Yes

Female

Study

Yes at home

18 - 30

4

00:17

1

Yes

No

Female

Study

Yes at home

18 - 30

4

00:14

1

Yes

Yes

Male

Study

Yes at home

18 - 30

2

01:08

1

Yes

Yes

Sex

Occupation

1째 Cycle

112

n째 errors

Completed ?

Successful ?

Duration mm:ss

n째 errors

Completed ?

Successful ?

3째 Cycle

Duration mm:ss

2째 Cycle

00:15

0

Yes

Yes

00:30

0

Yes

Yes

00:26

1

Yes

Yes

n/a

n/a

n/a

n/a

00:36

1

Yes

Yes

n/a

n/a

n/a

n/a

00:39

1

Yes

No

00:40

0

Yes

Yes

00:42

1

Yes

Yes

00:46

1

Yes

Yes

00:12

0

Yes

Yes

00:08

0

Yes

Yes

01:10

0

Yes

Yes

n/a

n/a

n/a

n/a

00:09

0

Yes

Yes

n/a

n/a

n/a

n/a

02:04

0

Yes

Yes

01:00

0

Yes

Yes

n/a

n/a

n/a

n/a

n/a

n/a

n/a

n/a

00:34

1

Yes

Yes

00:10

0

Yes

Yes

n/a

n/a

n/a

n/a

n/a

n/a

n/a

n/a

00:13

0

Yes

Yes

00:11

0

Yes

Yes

00:57

0

Yes

Yes

n/a

n/a

n/a

n/a

00:17

0

Yes

Yes

00:08

0

Yes

Yes

01:00

2

Yes

No

00:37

1

Yes

Yes

00:54

1

Yes

Yes

00:11

0

Yes

Yes

00:47

0

Yes

Yes

n/a

n/a

n/a

n/a

00:14

0

Yes

n/a

00:12

1

Yes

Yes

00:07

0

Yes

Yes

00:07

0

Yes

Yes

00:35

0

Yes

Yes

01:13

1

Yes

Yes

00:14

1

Yes

Yes

00:06

0

Yes

Yes

00:14

0

Yes

Yes

00:38

0

Yes

Yes

01:08

1

Yes

No

00:14

0

Yes

Yes

[note] Not every subject divided the pile of cloth in three or more wash loads, a couple of users washed everything in just one.

113

Scatter-plots of setting time Time the user took to set the machine (Unsuccessful wash).

How to read.

Time the user took to set the machine (Successful wash).

Trend for each subject.

120

90

60

Time (in seconds).

30

0 1째

114

2째

3째 (First second and third wash)

120

90

60

Time (in seconds).

30

0 1째Wash

2째Wash

3째Wash

115

Box-plot of setting time

1째 Wash

2째 Wash

3째 Wash

0

Time (in seconds).

30

Bounding box containing the data from the second and third quartiles.

60

Median.

90

Time the user took to set the machine (Successful wash).

Time the user took to set the machine (Unsuccessful wash).

116

120

Time

117

Distribution of time versus wash number

Density

1째 Wash

0

30

60

90

120

150

180

210

90

120

150

180

210

Time (in seconds).

Density

2째 Wash

0

30

60

Time (in seconds).

118

Density

3째 Wash

0

30

60

90

120

150

180

210

Time (in seconds).

Results density

How to read.

Histogram.

Density plot.

Time

[note] Charts made using JASP (version 0.7), jaspstats.org, retrived 2/2015.

119

Box-plot of setting time versus perceived simplicity

5

4

3

2

No-one gave it one.

1

0

120

Time (in seconds).

30

60

90

Bounding box containing the data from the second and third quartiles.

Median.

Time the user took to set the machine (Successful wash).

Perceived simplicity

Time the user took to set the machine (Unsuccessful wash).

Time

120

121

Distribution of time versus perceived simplicity [note] Chart made using JASP (version 0.7), jaspstats.org, retrived 2/2015.

Density

Perceived simplicity (2)

0

30

60

90

120

150

180

210

90

120

150

180

210

Time (in seconds).

Density

Perceived simplicity (3)

0

30

60

Time (in seconds).

122

How to read.

Results density

Histogram.

Density plot.

Time

Density

Perceived simplicity (4)

0

30

60

90

120

150

180

210

90

120

150

180

210

Time (in seconds).

Density

Perceived simplicity (5)

0

30

60

Time (in seconds).

123

Scatter-plots of setting time versus perceived simplicity Time the user took to set the machine (Unsuccessful wash).

How to read.

Time the user took to set the machine (Successful wash).

Time

120

Perceived simplicity 90

60

Time (in seconds).

30

0 1 2 3 4 5

124

Highlights:

● [note] This area proved to be clearer than before.

▲ [f18] A sightly re tuned fifth revision, the one used during the tests.

● [note] The “suboptimal” feedback need further optimization as once discouraged a reasonably good combination.

● [note] This is still perceived as a single selection by a significant portion of the testers.

125

06 What was not covered The focus of my research has been on the physical interface, leaving no space for prototyping and testing the cloud side of the interaction, which in a new, probably high level model, would likely be implemented.

There are functions omitted from the physical prototype that would fit nicely on a remote interface of a computer or a smart-phone.

The computer could easily access a locally connected machine through a web browser. A smart-phone, instead, should be capable of remote communication (connectivity outside the household) and could benefit from a specialised application.

Error correction â&#x2013;ś the user could access a history of the executed wash, see the settings and be provided with a troubleshooting tool.

What happened?

Colour bleeding.

Shrunken.

Not cleaned.

Stained.

Faded.

Smelly.

What fabrics made up the load?

Thanks, the settings have been noted and the relative correction will be applied to future wash cycles.

Was the setting coherent?

Yes. No.

Educational material on fabrics: differences, how to recognize them and so on.

126

Water and electricity usage ▶ represented with graphs or downloadable as raw data, integrated with the home power system.

“Did the wash consume only energy from the photovoltaic system?”

“What was the energy usage for each different cycle?”.

These data, which could live in a smart-phone interface, would provide a quick overview. While on a computer, integrated with a bigger energy framework (e.g. Energy@Home energy-home.it) data visualisation would be much more effective, enabling a deeper exploration of the entire home energy “footprint”.

Remote control, info and notifications from the machine ▶ as stated in the current market analysis, remote controlling the machine away from home has its potentialities, yet in the end it is a matter of different implementations that define how the product feels in the end.

Please refer to the Berg Cloudwash prototypebergcloud.com/ case-studies/cloudwash for a nice example of remote interface and functionalities.

Clarifying the multiple selection, still an unresolved issue ▶ and many solutions should be tested out: [note] A well though out icon system could indeed depict the action of selecting more than one elements better than a phrase.

Mostly because a phrase has to be read.

[note] Also the graphic signs surrounding buttons could be used to obtain a similar result, it is a matter of semiotical research to find the right elements.

127

07 Conclusions At this point of my research, the data I was collecting through tests, made visible how my approach had a systematic limit, deep rooted into the users.

Even though the test is designed to limit variaton, there is going to be some between user behaviour during a virtual action and a real action.

For example, in real situations the user cares for his clothes. In addition, because the risk of ruining something is real, the user might be more likely to check labels if not sure about how to wash something. Most importantly, there is going to be prior experience: how many times a particular item of clothing has been washed for instance or whether it bleeds or not.

Almost all of the â&#x20AC;&#x153;unsuccessfulâ&#x20AC;? wash cycles recorded during the second session of tests resulted from the wrong fabric type being selected, even though all the elements were constantly available to the user (care labels and corresponding buttons on the machine).

The process.

â&#x2014;&#x20AC; [f1]

Start.

New ideas.

Reconsider.

Prototype it.

Test.

Go on and do something else fun.

128

What went wrong If the user is keen on performing an operation in a particular way and doesn’t account for a different situation and apply the same mental model, he/she will not be solving the problem correctly, (e.g. “I selected cotton 30° so nothing gets ruined” for a mixed load). In this case, the most familiar option is chosen instinctively without really evaluating other possibilities; the idea of a single selection, common characteristic of the traditional program system, is really difficult to demolish.

The user doesn’t care for the “care label” and doesn’t check whether a fabric is nylon or polyester or something else; recognising different fabrics is an error-prone operation for inexperienced users, so a certain degree of error has to be expected, but this could be greatly reduced with a little effort on the user’s side.

Both of the previously illustrated situations could be solved through user-education embedded in the design: visual and mechanical indicators to keep the user engaged and focused during task execution.

The long and seemingly complex list of different fabrics on the prototype is there to say that fabrics selection is a delicate matter and that the user should take great care when selecting the correct option.

This is simply not enough for some users, even so when a transition is being made, i.e. trying to move away from the program system.

What can be done to further improve interaction really goes beyond the scope of this research.

My goal was never to design a full blown product, but to reflect upon how some conventions are guiding the design of products we use every day without improving them as they deserve to be.

129

g Appendix

01 Bibliography Cooper Alan, Reimann Robert, Cronin David, About Face 3: The Essentials of Interaction Design, Wiley, 2007.

Cooper, Alan, The inmates are running the asylum: why high tech products drive us crazy and how to restore the sanity, Sams, 2004.

Krishna, Golden, The Best Interface Is No Interface: The simple path to brilliant technology, New Riders, 2015.

Dreyfuss, Henry, Designing for People, Simon & Schuster, 1955.

Falcinelli, Riccardo, Guardare, pensare, progettare. Neuroscienze per il design, Stampa Alternativa & Graffiti, Viterbo, 2011.

Gibson, James, The Ecological Approach to Visual Perception., Houghton Mifflin, Boston, 1979.

Gibson, James, The Perception of the Visual World, Houghton Mifflin, Boston,1950.

Gibson, James, The Senses Considered as Perceptual Systems, Houghton Mifflin, Boston, 1966.

Kolko, Jon, Thoughts on Interaction Design, Brown Bear, 2007.

Krug, Steve, Usabilità. Individuare e risolvere i problemi, New Riders, 2010.

Laurel, Brenda, Computers as Theatre, Addison-Wesley, 1993.

Löwgren Jonas, Stolterman Erik, Thoughtful Interaction Design. A Design Perspective on Information Technology, MIT Press, 2004.

Manish, Agarwal, Fuzzy logic control of washing machines, Department of Mechanical Engineering, Indian Institute of Technology, India, 2011; Moggridge, Bill, Designing Interactions, MIT Press, 2007.

132

Moggridge, Bill, Designing Media, MIT Press, 2010.

Norman, Donald, Il computer invisibile. La tecnologia migliore è quella che non si vede, Apogeo, 2007.

Norman, Donald, La caffettiera del masochista. Psicopatologia degli oggetti quotidiani, Basic Books, 1988.

Norman, Donald, Things That Make Us Smart: Defending Human Attributes in the Age of the Machine, Basic Books, 1994.

Perondi, Luciano, Sinsemie: Scrittura nello spazio, Stampa Alternativa & Graffiti, Viterbo, 2012.

Philippe Dessus, Daniel Peraya, Cognitive Modelling of Icon Comprehension, Department of Mechanical Engineering, University of Grenoble & IUFM, University of Geneva, Switzerland, n.a.; Raskin, Jef, The Humane Interface, ACM Press, 2000.

Saffer, Dan, Microinteractions, O’Reilly, 2013.

Sharp Helen, Rogers Yvonne, Preece Jenny, Interaction Design: Beyond Human-Computer Interaction, John Wiley & Sons Inc, 2011.

Wurman, Richard Saul, Information Architects, Graphis Inc, 1997.

02 Sitography Bellis Mary, Thor Washing Machine, inventors.about.com/od/ weirdmuseums/ig/Famous-Appliances/Thor-Washing-Machine.html, 10/2015.

Love, J., Selker, R., Marsman, M., Jamil, T., Dropmann, D., Verhagen, A. J., Ly, A., Gronau, Q. F., Smira, M., Epskamp, S., Matzke, D., Wild, A., Rouder, J. N., Morey, R. D. & Wagenmakers, E.-J., JASP (version 0.7), jasp-stats.org, 2/2016.

Wikipedia, Variable capacitor, en.wikipedia.org/wiki/Variable_capacitor, 10/2015.

Wikipedia, Washing machine, en.wikipedia.org/wiki/Washing_machine, 10/2015.

Zimmermann, Kim Ann, Procedural Memory: Definition and Examples, ivescience.com/43595-procedural-memory.html, 1/2016.

Mama, Laundry Basics: How to Choose the Washing Cycle, mamaslaundrytalk.com/laundry-basics-how-tochoose-the-washing-cycle, 1/2016.

Norman Donald, Tognazzini Bruce, How Apple Is Giving Design A Bad Name, fastcodesign.com/3053406/how-appleis-giving-design-abadname, 10/2015.

Norman, Donald, Cockpit Complexity, jnd.org/dn.mss/cockpit_complexity.html, 1/2016.

Norman, Donald, Human-Centered Design Considered Harmful, jnd. org/dn.mss/human-centered_design_considered_ harmful.html, 1/2016.

Norman, Donald, Simplicity Is Highly Overrated, jnd.org/dn.mss/simplicity_is_highly.html, 1/2016. paper/nt.htm, 10/2015.

Peter Simon, David, The Art of Guerrilla Usability Testing, uxbooth.com/articles/the-art-of-guerrilla-usability-testing/, 1/2016.

Praeger Dave, Our Love Of Sewers: A Lessonin Path Dependence, dailykos.com/story/2007/6/15/346883/, 9/2015.

Tractinskyr, Noam, Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues, sigchi. org/chi97/proceedings/ Wikipedia, Gestalt psychology, en.wikipedia.org/wiki/Gestalt_ psychology, 1/2016.

133

03 Figure index a [a0] Cover image. from James Lee, The Beautiful Washing Machine, youtu.be/bXsMMHizW3o, retrieved 1/2016.

[b6] Internal wiring scheme and operating diagram, resembling the timer-based operation, 1937, patent US 2165884. from John W Chamberlin & Jr Rex Earl Bassett, Cleaning textile and similar materials, google.com/ patents/US2165884, retrieved 10/2015.

[a1] Maren Christensen, reading a book next to her new Thor washing machine ca. 1920. from Haynes family, Eatonville’s First Washing Machine, eatonvilletorainier.com/?p=666, retrieved 1/2016.

[b7] Automatic timing apparatus for washing machines, 1951, patent US2656424. from Frerer Paul G. Smith & Charles S, Automatic timing apparatus for washing machines, google. com/patents/US2656424, retrieved 10/2015.

b [b0] Cover image. from Samsung Electronics Co., Ltd., Front loading clothes washing machine with dynamic balancing mechanism, google.com/patents/US5850748, retrieved 1/2016.

[b8] The Hoover Keymatic is a unique example of automation, relying on mechanical cartringes to store all the settings, from Mike King, Flickr’s Photostream, flickr.com/ photos/chestermikeuk, retrieved 9/2015.

[b1] Home Washing Machine & Wringer. Advert. from n.d., Ricks Bottle Room ~ Always in Pursuit of Great Glass, ricksbottleroom.com, retrieved 12/2015. [b2] Happy Day Washing machine circa 1910. Postcard advert. from Wikipedia, Washing machine, en.wikipedia. org/wiki/Washing_machine, retrieved 10/2015. [b3] One of the first washing machines to feature a motor driven tub, the “Thor” by Alva J. Fisher, circa 1908. patent. from Mary Bellis, Thor Washing Machine, inventors. about.com/od/weirdmuseums/ig/Famous-Appliances/Thor-Washing-Machine.htm, retrieved 10/2015. [b4] The assembled Bendix washing machine, 1937, patent US 2165884. from John W Chamberlin & Jr Rex Earl Bassett, Cleaning textile and similar materials, google.com/ patents/US2165884, retrieved 10/2015. [b5] The cloth movement, from the top, at low, medium and high speed, 1937, patent US 2165884. from John W Chamberlin & Jr Rex Earl Bassett, Cleaning textile and similar materials, google.com/ patents/US2165884, retrieved 10/2015.

134

[b9] Miele microcontroler-based “Sensor” interface from a 1980s Italian catalogue. Miele knob/timer-based interface from a 1980s Italian catalogue. from Marco Taddei, Automaticwasher.org, automaticwasher.org/cgi-bin/TD/TD-VIEWTHREAD. cgi?11612, retrieved 10/2015. [b10] A slightly different timer technology, a single rotating disc instead of the cam/shaft assembly, 1930, patent US2055031. from Hutchings Walter B, Timer with interchangeable formula for controlling machines having series of operations, google.com/patents/US2055031, retrieved 11/2015. [b11] Samsung interface for the Chinese market. from n.d., n.d, life.yesky.com, retrieved 11/2015. [b12] A variable air capacitor. from Wikipedia, Variable capacitor, en.wikipedia. org/wiki/Variable_capacitor, retrieved 10/2015. [b14] The Riby twin tub washing machine made in 1932. from Science Museum, Riby twin tub washing machine, sciencemuseum.org.uk/images/ i012/10250651.aspx, retrieved 10/2015. [b15] The Good Ideas “Twin Tub Washing Machine” has two dedicated timers for washing and spinning and a speed control in the center, water has to be

poured in manually, however there is a pump for emptying the tubs. from Good Ideas, Twin Tub Washing Machine, goodideas.uk.com/twintub, retrieved 10/2015. [b16] Processor. from Wikipedia, Motorola 68000, en.wikipedia.org/ wiki/Motorola_68000, retrieved 11/2015. [b17] How a fuzzy logic output pattern looks, this example is highly simplified, including only two variables. from Manish, Agarwal, Fuzzy logic control of washing machines, Department of Mechanical Engineering, Indian Institute of Technology, India. c [c0] Cover image. from Maxis, The Sims (videogame), screenshot, retrieved 1/2016. [c1] Top loading machine (left) and Front loading machine (right). from All parts for a happy home, Top Loading Washers vs. Front Loading Washers, allpartsforahappyhome.com/2011/04/07/top-loading-washersvs-front-loading-washers/, retrieved 12/2015. [c2] Kelvinator Spark Plus. from Amazon India, Kelvinator KT6521PF-FAU Spark Plus Fully-automatic Top-loading Washing Machine, amazon.in/dp/B00NL6SI72, retrieved 12/2015. [c3] Beko WMB61242BL, knob. from eMAG, Beko WMB61242BL, emag.ro/masinade-spalat-rufe-beko-6-kg-1200-rpm-clasa-a-albwmb61242bl/pd/D87QCBBBM/, retrieved 11/2015. [c4] Electrolux Auto sense, vertical list. from MK Trade, ELECTROLUX EWF-1274BW veļas mašīna, rdveikals.lv/products/lv/219/43538/sort/1/ filter/0_0_0_0/EWF-1274BW-veļas-mašīna.html, retrieved 11/2015. [c5] Electrolux Auto sense, vertical list. from MK Trade, ELECTROLUX EWF-1274BW veļas mašīna, rdveikals.lv/products/lv/219/43538/sort/1/ filter/0_0_0_0/EWF-1274BW-veļas-mašīna.html, retrieved 11/2015.

[c6] Indesit Innex IWSD71252, knobs. from personal collection. [c7] Beko WMB61242BL, display. from eMAG, Beko WMB61242BL, emag.ro/masinade-spalat-rufe-beko-6-kg-1200-rpm-clasa-a-albwmb61242bl/pd/D87QCBBBM/, retrieved 11/2015. [c8] Indesit Innex XWA 71451, vertical list. from Indesit, Indesit Innex XWA 71451 W Washing Machine, indesit.co.uk/appliances_i/Washing_Machine_XWA_71451_W/pid_F082645UK/40.do, retrieved 11/2015. [c9] Indesit Innex IWSD71252, legend. from personal collection. [c10] Samsung WF457 primary view. from Goemans Appliances, Samsung Smart Laundry Features WF457/DV457, youtu.be/8fWBSt_WKB4, retrieved 12/2015. [c11] Samsung WF457 wash view. from Goemans Appliances, Samsung Smart Laundry Features WF457/DV457, youtu.be/8fWBSt_WKB4, retrieved 12/2015. [c12] Samsung WW9000 single course view. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015. [c13] Samsung WW9000 select course view. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015. [c14] Samsung WW9000 wash view. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015. [c15] Miele WMV960 interface from the user manual. from Miele, WMV960 Operating instructions for washing machines, miele.co.uk/pmedia/ZGA/ TX2070/10165850-000-02_10165850-02.pdf, retrieved 9/2015.

135

[c16] Miele H 6860 interface. from Miele Australia, H 6860 BP M Touch intro, youtu.be/up-yAAt5DOc, retrieved 11/2015. [c17] scheme composed of: Speaker from PCWorld, Three-Minute Tech: Speakers, pcworld.com, retrieved 12/2015.

Processor from Wikipedia, Motorola 68000, en.wikipedia.org/wiki/Motorola_68000, retrieved 11/2015.

Cloud from Schneider Electric, Schneider Electric blog, blog.schneider-electric.com, retrieved 11/2015.

Pad from the Register, Stylus counsel: The rise and fall of the Apple Newton MessagePad, theregister. co.uk/2013/09/17/20_years_of_the_apple_newton/, retrieved 11/2015. [c18] [c19] Samsung Smart Washer app. from Samsung, WW9000 Washing Machine with ecobubble/DV457, samsung.com/uk/consumer/ home-appliances/laundry/washing-machine/ WW10H9600EX/EU, retrieved 11/2015. [c20] [c21] Berg Cloudwash. from Berg, Flickr Photostream, flickr.com/photos/_ berg, retrieved 1/2016. [c22] LG Home Chat presentation. from LG, LG Home Chat, lghomechat.com/us/, retrieved 12/2015. [c23] Panasonic NA-VG1000. from Panasonic, wash, panasonic.jp/wash/, retrieved 1/2016. [c24] Toshiba TW-Z96X2ML(W). from Minkara, n.a., minkara.carview.co.jp/en/userid/438759/blog/35569746/, retrieved 12/2015. [c25] Toshiba AW 42SEC(W). from Recycle Kaitori, n.a., recycle-kaitori.com/blog/ kaitori, retrieved 12/2015. [c26] Panasonic NA-VG1000. from Panasonic, wash, panasonic.jp/wash/, retrieved 12/2015. [c27] Hitachi BW-9PV. from ikakeya0228, n.a., blog.goo.ne.jp/ ikakeya0228/m/201308, retrieved 12/2015.

136

d [d0] Cover image. from Volvo Car Group, 40 Years of the volvo 240/260: a swedish icon, swedespeed.com/news/ Volvo_News/40-years-volvo-240260-swedish-icon/, retrieved 1/2016. [d1] Indesit Innex A IWSD71252. from personal collection. [d2] Electrolux Auto Sense System. from Rdveikals, n.a., rdveikals.lv/images/full/ e02549971b120fdbb0fd5ea840c85838.jpg, retrieved 11/2015. [d3] Indesit Innex XWA 61251. from personal collection. [d4] Daewoo Power Drum. from Akamized, n.a., s1emagst.akamaized.net/ products/944/943716/images/res_9491e1ec5f73b788abbf4a5c023d5310_full.jpg, retrieved 12/2015. e [e0] Cover image. from James Lee, The Beautiful Washing Machine, youtu.be/bXsMMHizW3o, retrieved 1/2016. [e1] Indesit Innex IWA 61251. from personal collection. [e2] Brain. from Allan Ajifo, n.d., aboutmodafinil.com, retrieved 11/2015. [e3] Daewoo Power Drum. from Akamized, n.a., s1emagst.akamaized.net/ products/944/943716/images/res_9491e1ec5f73b788abbf4a5c023d5310_full.jpg, retrieved 12/2015. [e4] Fiat Panda Dashboard. from sim6680, Tesla Forever, sim6680.wordpress. com/tag/panda/, retrieved 1/2016. [e5] Print icon. from Apple Pages ver. 5.6.1, screen-shot.

[e6] Electrolux Auto Sense System. from Rdveikals, n.a., rdveikals.lv/images/full/ e02549971b120fdbb0fd5ea840c85838.jpg, retrieved 11/2015. [e7] Various pic from Google search “wool Icon“. from Google, Images, google.com, retrieved 9/2015. [e8] Electrolux Auto Sense System. from Rdveikals, n.a., rdveikals.lv/images/full/ e02549971b120fdbb0fd5ea840c85838.jpg, retrieved 11/2015. [e9] Indesit Innex IWA 61251. from personal collection. [e10] Birthday cake. from Conversations for a better world, Happy Birthday Cakes, conversationsforabetterworld.com/ happy-birthday-cakes-happy-birthday-images-pictures-wallpapers-for-facebook/, retrieved 1/2016. [e11] The GE GFWR4805FMC. from GE Appliances, GFWR4805FMC, products.geappliances.com/appliance/gea-specs/GFWR4805FMC, 1/2016.

f [f0] Cover image. astronaut from 2001: A Space Odyssey, Stanley Kubrick, 1968 and Gerty from Moon, Duncan Jones, 2009. [f1] Brain. from Allan Ajifo, n.d., aboutmodafinil.com, retrieved 11/2015. [f2] [f3] [f4] iPhone interface. from Apple Inc., Touch screen device, method, and graphical user interface for determining commands by applying heuristics, google.com/patents/ US7479949, retrieved 1/2016. [f5] [f6] [f7] [f8] [f9] Prototype, 1° and 2° revisions. [f10] [f11] Prototype, 3° revision, in flash. [f12] [f13] [f14] [f15] Prototype, 4° revision, in JavaScript. [f16] [f17] [f18] Prototype, 5° revision, in JavaScript.

[e12] The stain removal guide. from GE Appliances, GFWR4805FMC, products.geappliances.com/appliance/gea-specs/GFWR4805FMC, 1/2016. [e13] Miele novotronic W 722 interface from the user manual. from User Manual .com, n.a., u-manual.com, retrieved 11/2015. [e14] Miele W 751 interface from the user manual. from User Manual .com, n.a., u-manual.com, retrieved 11/2015. [e15] Miele W 3033 touchtronic interface from the user manual. from User Manual .com, n.a., u-manual.com, retrieved 11/2015.

137

Thanks to: my family; Emma; Claudio; Giammarco; Riccardo; Silvia; Simone; Tommaso Bertagnin; Nigel Christopher James; Golden Krishna; Luciano Perondi; Valentina Rachiele; Leonardo Romei; Jonah Ronsse; Kotoko Iwakura; Marco Taddei; Michele Zannoni; my Volvo; and all test subjects.