OneTouch ( Human Machine Interface)

WASHING Human Machine Interface

Sumeet Singh

Shivani Datar

Design Report

Atharva Attarde

UG2 PD

Shambhavi Phule

MACHINE

UP Sumeet Singh

sumeetsingh10jan@gmail.com

Shivani Datar

datarshivani@gmail.com

Atharva Attarde

atharvaattarde@gmail.com

Shambhavi Phule shamphule@gmail.com

GRO

ENT Desk Research Web Chart Heuristic Evaluation Problems and Solutions User Persona

Ideation

Finalization of Ideation The Selected Idea

Final concept ( low-fidelity ) Task Flow Information Architecture Low-fidelity Interface

Final concept ( high-Fidelity ) Mood boards Reason of choice High-Fidelity

CAD Modelling

Orthographic Views Final Renders Technical Specification

UI Prototype Trial

Heuristic Evaluation Comparison

CONT

Web Chart of the LG Signature twin wash Front Load ( Considered the best )_

// Changing spin cycles_

// Changing program_

6

HMI

// Applying child lock_

// Detergent adding_

Washing Machine

7

// Connecting with mobile app_

8

HMI

Heuristic Evaluation_

Washing Machine

9

An example of a washing machine interface using incomprehensible symbols.

An example of a washing machine with confusing button labeling and unintuitive controls.

An example of a washing machine with an overwhelming, unclear interface.

10

HMI

Problems and Solutions_ Problems

` HMI SOLUTION

Overwhelming amount of options

The interface will not show irrelevant or rarely needed information since it decreases the efficiency.

Incomprehensible interfaces

The interface will not overload the user’s cognitive, visual, auditory, tactile, or motor limits.

Need of manual

The interface will allow the user to perceive that they are in control and will allow appropriate control.

Non-standardized symbols

Interface will match the user’s social customs and expectations.

Lack of layout

The interface will not overload the user’s cognitive, visual, auditory, tactile, or motor limits.

Lack of effective use of colour

The interface will present elements simply and have an attractive and appropriate design.

Readability and intuitive usage

The interface will communicate as efficiently as possible and behave in a manner such that users can accurately predict what will happen next.

Lack of Flexibility and efficiency in use

The interface will allow the user to adjust the design for custom use.

Washing Machine

11

User Persona_ // Persona 1 _

Background _ Married to a software engineer.

Has two kids.

Loves to do household chores, look after family and the house.

Is after keeping everyone disciplined.

Loves to keep home clean and aesthetically good.

Maintains everything perfectly.

Finds friends in maids, shopkeepers,etc.

Has three friend groups and wishes to be happy with them, Not interested much in making new friends.

Has a simple way of living.

Supriya Joshi Housewife

About_ 32 years Female

Pune,Maharashtra

Higher middle class

Post graduate in economics

12

HMI

Adjusts herself to the situation.

Likes to save money wherever and however possible.

Has an open mind, fairly modern but hasn’t forgotten culture.

Is fairly acquainted with technology.

Likes to use whatsapp and Facebook.

Uses YouTube for getting information Asks kids if they find difficulty in technology.

Specifics with machine_

Brands used_

Got to learn how to use the machine from the guy who installed it.

Has LG front load 7.5kg automatic washing machine.

Used everyday once.

Uses mix mode the most .

Sometimes intensive mode during times of hurry.

Once a week use a machine for rinse and spin.

Knows the modes of the machine-8/10.

How complex does she find it - 1 being most complex and 10 being v easy- 5/10.

Goals_

Pain Points _ Wash clothes easily Wants it to be easy so that her kids and husband can also do it easily without her guidance Without putting much energy Doesn’t want to apply much brains while doing this task Doesn’t want to take more than 2 mins to do this task

Finds a lot of functions on the machine unnecessary Does Not use the temperature control function Asks kids if finds difficulty in technology Gets irritated when clothes have washing Machine dirt stains on them after wash

Washing Machine

13

// Persona 2 _

Background _ Loves electronic gadgets.

Loves Gaming.

Tech Savvy .

Is well informed about the latest technology and gadgets.

Keeps interest in building, repairing remaking various electronics.

Loves sports - football, cricket.

Plays Cricket, football.

Is quite messy.

Doesn’t keep clothes,things properly.

Rahul Shah Student

About_ 19 years Male

Ranchi Jharkhand

Higher middle class

Studying engineering 2nd year

14

HMI

Is social, hangs out with friends all the time, likes to make new friends.

Is curious and gets all the information he wants from the Internet.

Teaches family members how to use various gadgets.

Rarely helps mother in her household chores.

Mother is a teacher.

Father is a doctor.

Small sister is studying in school.

Retired grandparents.

Relation with the machine_

Brands used_

Uses the machine very rarely - once in a month.

Has Samsung front load semi-automatic 8kg at home.

Can put clothes for wash, in the daily wash category , which don’t have a need for any special treatment.

Doesn’t do the work with much attention; does that while texting on the phone.

Knew all the features earlier but cant remember because not used extensively by him.

Has to ask mother if there are clothes apart from the normal type.

Feels there are too many options and features and gets confused.

Knows the modes/ machine-4/10.

features

of

the

How complex does he find it - 1 being most complex and 10 being v easy- 5/10.

Goals_

Pain Points _ Wants it to be quick and easy..

Confusing.

Not confusing.

Too many options.

Wants it to be smart.

Doesn’t understand them.

Should be able to do it without mother’s help.

Some symbols are hard to understand.

Washing Machine

15

// Concept 1_ This concept is based on analogy in the interaction_

The concept focuses more towards the hard hit targets who are adults and old school. This concept is inspired from the RT20 transistor radio created by German industrial designer Dieter Rams for the electronics brand Braun.

Inspiration

Problems addressed_

Machine’s button’s are touched so many times they get triggered even if your body touches the buttons.

1. Pressing the same button many times to get the desired option.

2. What button leads to what ?

3. Elderly people don’t really relate with the product interface and had to learn in order to use it.

4. These users want to feel in complete control over his or her work. This is an important success criteria that also affects the pleasurability of the application. But they are not able to do it due to the display system.

5. They don’t tend to take so much effort in memorizing a set of shortcuts and commands.

This illustration shows how the temperature selection would look. like.

16

HMI

= Buttons = Screen

The button on the most right is the shuffle / press knob button which is analogous in nature and other are normal press buttons.

*

1. User able to draw a comparison from his real world experiences which is an analog radio.

2. They don’t have to learn any sort of shortcuts and commands .

3. All the major modes and functions are on a button.

4. There is a button for locking the Control Panel buttons so that they don’t make mistakes.

5. The screen is an LCD display which mimics seven segment old LCD displays.

This illustration shows how the washing Programme selection would look.

Washing Machine

17

// Concept 2_

This illustration shows how interface would look like.

This is how would other windows would look like.

87 % Rinsing

Inspiration

18

HMI

This machine has a second display at the front door to show the current status.

Task Flows _

= Screen = Buttons = Buttons = Improved Experience

*

1. Reduces the number of buttons 2. The difficult to understand buttons have explanation under them 3. If Knob then names of features around the knob is too messy cant fit there explanations 4. The buttons which are put inside some menu are rarely used buttons 5. Huge buttons for on off and play stop so easily identifiable and on the right side giving ergonomic comfort 6. So for default daily wash , if you play on and then start , it will start washing clothes at the common mode i.e daily wash 7. The machine has integrated unit of dispensing powder and water according to the clothes using AI DD 8. A screen on the drum door shows what process is going on and how Much is yet to be completed and how long will it take to complete it 9. When you scroll to that mode voice tells you what that mode does.

10. The screen one the washing will keep blinking to remind you to remove clothes from the machine if you forget it.

11. The screen on the door also shows wrong and what has to be done to repair it.

Washing Machine

19

// Concept 3_

This illustration shows how interface would look like.

Manual = displays manual in the screen , navigate by time delay and fast wash button modes, cycles,water temperature all detected by AI DD Time Delay = first press time delay then navigate by time delay and fast wash buttons to choose how much time delay user wants Fast wash = first press fast wash then navigate by time delay and fast wash buttons to choose how much fast the process has to be done

Detergent compartment

*

1. When the machine is off the buttons become seamless with the screen and invisible(button lights off) 2. When the user presses the on/off button the buttons extrude from the screen and become visible(button lights on) 3. When child locked the buttons are visible but not destructed(button lights on) 4. This adds to the aesthetics of the interior and makes the user less terrified of the too much information/buttons = Screen = Buttons

20

HMI

Task Flows _

Top view

Washing Machine

21

// Concept 4_

This illustration shows how interface would look like.

Problems addressed_

1. Reduced the pain of searching of different modes.

2. No too many buttons 3. One button focus program.

4. Quick selection of modes just by rotating two different knobs placed in concentric pattern.

5. The machine has integrated unit of dispensing powder and water according to the clothes. using AI DD

This illustration shows how to interact with new interface. = Buttons = Screen

22

HMI

About _

1. This function will record the program which is performed by the expert user in his/her smartphone application.

2. Since the daily needed program is already recorded it will be easy for the normal user to directly press the load program button after the power button and hence will not need to get confused which mode and which program to be selected.

Concept Explanation _

1. The user being used to the knob input method so it will be easy for them to repeat the same thing for selecting the modes as well.

2.The screen will display the ongoing process and time required along with the further specifications of some modes.

3.The tasks are divided in two groups as important/mainly used modes and other one which include the rarely used modes.

4. Start stop button on the knob itself.

Task Flows _

Washing Machine

23

// Concept 5_ In this ideation primary mode to use washing machine will be smart phone and secondary mode will be the control panel on the machine when you don’t have your phone .

Rotate the knob and the menu will move

Guide line which shows selected menu will be shown here

Small display on the knob/dial

Digital touch circular display

In options menu there will be other programs 1.pre wash 2.drum clean 3.bubble soak , etc

When ever you select program some default temp , spin ,rinse is decided if you want to choose you can make changes here

Knob is play pause button which can be pressed and also have some haptic feedback.

24

HMI

You can add your favorite program or can download many more programs.

In options menu there will be other programs 1.pre wash 2.drum clean 3.bubble soak , etc.

When ever you select program some default temp, spin ,rinse is decided if you want to choose you can make changes here.

Without changing any setting you can just start the machine.

There will be whole Eco system_ So when the washing process Is over whether you have your phone or not you will get a notification .

The notification will be sent to TV , smart kitchen etc so you wont forget to remove laundry.

*

1. There is smart wash option which will automatically detect the material of cloths and choose the cycle accordingly so used wont need to do more tasks.

2. People wont miss adding detergent any more as there will be big compartment in which user will fill for the whole month and give us alert when finished .

There will detergent dispenser as a necessary option to add bleach and etc.

3. Auto dispense technology_ When you will load laundry it will measure the weight and according necessary water volume and detergent + fabric conditioner necessary .

4. User wont be able to set any program unless they have closed the door. if any error occurs in machine it will show error code which we can search easily on the mobile app and try t resolve it as shown .

There will be a user manual .

Washing Machine

25

// Concept 6_ Screen before cycle is started Icon will show when the next servicing is needed

Child Lock

Icon showing how clean is the tub

Icon showing how much detergent is left

*Is linked to an App and Home Automation System and can be controlled by the same

Child Lock Dialogue Box

Error Message Box

Screen when cycle in process

= Screen

26

= Buttons

HMI

Task Flows _

D

D

*

1. Only necessary info on each screen 2. Unnecessary options edited 3. Sufficient Choice 4. No need of adding detergent every time just put 5kg powder once in the Detergent compartment 5. Smart Detergent dispersion: AI detects how much detergent required and takes it from the store 6. If any error occurs you get all the information needed for that 7. Tub cleaning, detergent and servicing status update notification available at the top 8. If default setting used wash clothes in just 3 button taps: on start off

Washing Machine

27

// Concept 7_

= Screen

*

1. The spin number, cycles,temperature of the water can be changed by tapping the respective icons 2. Other advanced options like bubble soak, medic rinse, etc can be accessed by the three dots menu .

28

HMI

// Concept 8_

Smartwatch App

*

This made it easier to understand the use of the machine just by seeing it .

The process is automatically displayed : Power button - mode selection - temp - rinse This will be part of the smart devices ecosystem even if the user doesn’t have his phone he will be getting notifications on other devices such as smartwatch, home assistant ,etc .

Washing Machine

29

Finalisation of Ideation_

Confusion reduced but not enough

New Interactions explored

Excess Information remains

Difficult for user to scroll

30

HMI

Confusion reduced but not enough

Icon will show when the next servicing is needed

Icon showing how clean is the tub

Icon showing how much detergent is left

Child Lock

*

Touch screen difficult to use when hands are wet

Simplified information architecture, reduced task flow and clean layout makes it user friendly Rotate the knob and the menu will move

*

User flexibility is less here.

The selected concept is a refinement of this one.

*

Loading Program provides customization , good idea.

Making It modern and smart Touch screen difficult to use when hands are wet

Washing Machine

31

The Selected Idea_

Smartwatch App

*

// User Friendly interactions like scroll, touch buttons // Minimal Interface // Aesthetically appealing

32

HMI

You can add your favorite program or can download many more programs.

In options menu there will be other programs 1.pre wash 2.drum clean 3.bubble soak , etc.

When ever you select program some default temp, spin ,rinse is decided if you want to choose you can make changes here.

Without changing any setting you can just start the machine.

*

Each prototype was discussed and sketched out, with specific features and functionalities decided upon before the prototype was created. Each prototype was created with annotations and rationale behind each feature.

Particular areas of focus were: // Level of functionality and options available // Sequential process // Clarity of instruction

Washing Machine

33

Task Flow of the LG Signature twin wash Front _

34

HMI

Washing Machine

35

Task Flow of the proposed concept_

36

HMI

Washing Machine

37

Information Architecture of the LG Signature twin wash Front_

38

HMI

Information Architecture of the proposed concept_

* The My mode is an option which allows user to make his own mode . This Mode will be made on the app.

Washing Machine

39

Final concept ( low-fidelity )_

Mode

40

HMI

Time Delay

Child Lock

In case of Emergency error

Washing Machine

41

Advanced

Quick Settings

42

HMI

Soil Option

Auto Dispenser

Temp

Spin

Rinse

Washing Machine

43

Control panel of LG Signature twin wash Front Load_

44

HMI

Control panel of the proposed concept_

Mode

Quick Settings

Washing Machine

45

Reason of choice_ Function/Options

Design allows quick, intuitive usage of the washing machine by providing a clear and easily understandable layout.

Sequential Processing // Flow starts on the top left.

// Proceed first to wash mode selection, then program selection. // Asymmetric display provides added assistance in directing the workflow.

Instructions_

Clear step-by-step instructions are provided due to the way the font and graphics work Aesthetics_ // Colours have been used to maximise usability. // Buttons light up and grow bigger in size. // A high contrast background/ font to improve readability. // Conscious choice to reduce the functionality by offering only a reduced number of options was made.

Colour Pallette_

// The colours used create high contrast with the machine, giving users an enhanced readability experience and visual satisfaction. // They also create focus on the interface, which makes it user-friendly. Apart from that, it also adds to the aesthetic value of the machine.

Typography_ // Artifakt Element

// Roboto Regular

46

HMI

Shape and Form_

// The interface has got four main touch tactile buttons, to make the usage clear and simple for the user. // The feedback in buttons is better than those in touch screens and thus reduces confusion in the user’s mind. // The knob is a feature related to machines since a long time, making it easier for the user to get acquainted with the interaction. // The display screen along the knob displays information in an organized hierarchy, makesit is possible to reduce the amount of information on the display.

Layout_ // The touch buttons are arranged in the manner of which tasks are carried out i.e.Modes, Advanced actions, and then Settings. // It gives the user a sense of direction to carry out the tasks.

Washing Machine

47

1. Mood board_

C

48

HMI

M

M

F

Washing Machine

49

1. Final concept ( High Fidelity )_ HEX #D9D9D9 RGB 217, 217, 217

Typography Poppins Regular

HEX #1A1A1A RGB 26, 26, 26

HEX #131313 RGB 19, 19, 19

50

HMI

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !@#$%^&*()_+}{|”:?/\><`~ 1234567890

Washing Machine

51

Proportions_

52

HMI

Washing Machine

53

High Fidelity _

OFF screen

Time Delay

Mode

Advanced

54

HMI

Soil Option

Temp

Spin

Rinse

Washing Machine

55

Quick Settings

Cycle Start

56

HMI

AutoDispenser

Door is not closed/emergency alert

Washing Machine

57

2. Mood board_

C

58

HMI

M

M

F

Washing Machine

59

2. Final concept ( High Fidelity )_ HEX #D9D9D9 RGB 217, 217,

Typography Roboto

HEX #1A1A1A RGB 26, 26, 26

HEX #131313 RGB 19, 19, 19

60

HMI

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !@#$%^&*()_+}{|”:?/\><`~ 1234567890

Washing Machine

61

Proportions_

62

HMI

Washing Machine

63

High Fidelity _

OFF screen

Time Delay

Mode

Advanced

64

HMI

Soil Option

Temp

Spin

Rinse

Washing Machine

65

Quick Settings

Cycle Start

66

HMI

AutoDispenser

Door is not closed/emergency alert

Washing Machine

67

3. Mood board_

C

68

HMI

M

M

F

Washing Machine

69

3. Final concept ( High Fidelity )_ HEX #F0FFFF RGB 240 255 255 HSB 180 6 100 HEX #0F0B3F RGB 15 11 63 HSB 245 83 25 HEX #00081C RGB 0 8 28 HSB 223 100 11

70

HMI

Typography Artifakt Element ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !@#$%^&*()_+}{|”:?/\><`~ 1234567890

Washing Machine

71

Proportions_

72

HMI

Washing Machine

73

High Fidelity _

OFF screen

Time Delay

Mode

Advanced

74

HMI

Soil Option

Temp

Spin

Rinse

Washing Machine

75

Quick Settings

Cycle Start

76

HMI

AutoDispenser

Door is not closed/emergency alert

Washing Machine

77

CAD Modelling_

78

HMI

Washing Machine

79

Interface of LG Signature twin wash Front Load_

80

HMI

Washing Machine

81

Interface of the proposed concept 1_

82

HMI

Washing Machine

83

Interface of the proposed concept 2_

84

HMI

Washing Machine

85

Interface of the proposed concept 3_

86

HMI

Washing Machine

87

Interface of the proposed concepts_

88

HMI

Washing Machine

89

Technical Specification_

Screen_

// The circular screen of 70mm surrounded by the knob contains the details of the mode, machine cycle selected. // Touch sensitive button technology will be ideal for this part. // This screen displays various symbols/icons so a sharp display is needed. // So screen types such as OLED, TFT, LCD

Benefit_

// Rugged , light weight, durable for longer periods, cost effective and water resistant normally used in smartwatches and other home appliances are kind of ideal for this interface.

90

HMI

Paper Mockup_

Knob_

// A circular knob elevated at 30mm from the screen with 50mm diameter // Shows the status and other notifications of the machine. // The knob will be a display for which an OLED screen can be used with a corning gorilla glass 3 finish on top.

Benefit_

// Provides the best protection from breaking and scratches on the knob screen interface. // This type of screen is generally used in fitbits.

Washing Machine

91

Web Chart of the LG Signature twin wash Front Load ( concidered the best )_

// Changing spin cycles_

// Changing program_

92

HMI

Web Chart of the proposed concept_ // Changing spin cycles_

// Changing program_

Washing Machine

93

// Applying child lock_

// Detergent adding_

94

HMI

// Applying child lock_

// Detergent adding_

Washing Machine

95

// Connecting with mobile app_

Heuristic Evaluation of the LG Signature twin wash Front_

96

HMI

// Connecting with mobile app_

Heuristic Evaluation of the proposed concept_

Washing Machine

97