The document discusses techniques for simpler user interface design, including using modal windows to display additional information without changing the overall page, hover controls that only appear when the user hovers their mouse, and context-based controls that adapt depending on what the user has selected. It provides examples of interfaces with and without these techniques, noting that simpler designs with fewer choices make decisions easier for users. Specific tips include using placeholders to guide users, icons instead of text for brevity, and expanding forms as needed rather than having a fixed structure. The overall goal is to reduce complexity through minimalism and adapting the interface based on user needs.

1. Clean design
Less is more
Vu Phuong Hoang
2015/08

6. Rule #1 in design: KISS
KISS stands for “Keep It Simple, Stupid”
Reduce choices for MUCH easier decisions
Minimalism is trending now

7. Tips for simpler design
1. Use modal windows
2. Use hover controls
3. Use controls on demand
4. Expand form when necessary
5. Use placeholders
6. Use icons instead of text
7. Use context-based controls

8. 1. Use modal windows
What is that ?
A small windows in the same page

9. 1. Use modal windows
 Pros:
 Shorter path for user
 Lighter for system
 Context-based
 Cons:
 Only for simple task

10. Without modal windows

11. With modal windows

12. With modal windows

13. 2. Use hover controls
What is that ?
Display action buttons while hovering mouse
Mouse is out Mouse is hovering

14. 2. Use hover controls
 Pros:
 UI looks clean and simple
 Cons:
 Sadly, it’s not for mobile
 Part of UI is hidden
 Some users aren’t familiar with this

15. With hover controls

16. With hover controls

17. With hover controls

18. Without hover controls

19. Without hover controls

20. 3. Use controls on demand
What is that ?
Hide advanced choices,
and only show them
when needed.

21. 3. Use controls on demand
 Pros:
 UI looks clean and simple
 Basic for noobs, advanced for pro
 Cons:
 Advanced controls are hidden

22. With controls on demand

23. With controls on demand

24. With controls on demand

25. With controls on demand

26. With controls on demand

27. Without controls on demand

28. Without controls on demand

29. 4. Expand form when necessary
What is that ?
Prepare to duplicate
form components if
needed

30. 4. Expand form when necessary
 Pros:
 UI looks clean and simple
 “Unlimited space” to expand
 Cons:
 Designer must be aware of long list

31. With expanding form

32. With expanding form

33. Without expanding form

34. 5. Use placeholders
What is that ?
Put a sample to guide user

35. 5. Use placeholders
 Pros:
 UI looks clean and simple
 Helpful with users
 Cons:
 Can’t replace label completely

36. With placeholders

37. With placeholders
Very useful for blank page

38. With placeholders
Be careful when replacing labels

39. Without placeholders

40. Without placeholders

41. 6. Use icons instead of texts
What is that ?
Replace texts by simple icons

42. 6. Use icons instead of texts
 Pros:
 UI looks clean and simple
 Much faster to scan
 Cons:
 Can be misunderstood

43. Using icons

44. Using icons

45. Using icons

46. Using icons

47. Using texts

48. Using bad icons

49. Using bad icons

50. 7. Use context-based controls
What is that ?
Display controls based on
current situation

51. 7. Use context-based controls
 Pros:
 UI looks clean and simple
 Less elements
 More efficient
 Cons:
 Can lack some controls

52. Context-based controls
When select text
When select image

53. Context-based controls
When select image file
When select audio file

54. Context-based controls

55. Context-based controls

56. Context-based controls

57. Context-based controls
Take a look at
advertisements

58. Context-less controls

59. Context-less controls

60. Any questions?

61. Let’s improve UX

62. Let’s improve UX

63. Up coming:
Complex parts