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