A product is something that serves a purpose and does something for the user. The document discusses what makes a good product that users love, focusing on functionalities, user interface (UI), and user experience (UX). It provides 15 "laws of UI" with guidance on how to design intuitive and helpful interfaces, such as keeping things clear for users, providing feedback, and ensuring consistency. The document also outlines five points for good UX design, such as considering desktop, tablet and mobile designs separately and using proper whitespace.

1. What is a product?

2. A PRODUCT is something that -
● serves a purpose
● does something for me

3. Product

4. This is a product I LOVE: AirDroid

5. What is a product
that you LOVE?

6. WHY?

7. Building a Product
that users will LOVE

8. E. M. Yeaseenur Rahman TAHIN
@tahins
Front End Engineer
G&R Ad Network
www.green-red.com

9. 3 reasons to LOVE a product
○ Functionalities
○ User Interface (UI)
○ User eXperience (UX)

10. UI

11. UI answers 3 “HOW” questions
○ How it looks
○ How it is understood
○ How it works

12. Evolution of
UI

13. VisiCalc - 1st spreadsheet program

14. Apple Lisa - 1st OS with GUI

15. Windows UI

16. Widgets

17. Skeuomorphic Design

18. Modern UI

19. Material Design

21. 15 Laws of
UI

23. Keep things clear
to your user

24. Law of
Clarity
1

28. Remove everything that
can be removed from the UI

29. Law of
Cleanliness
2

35. New user?
Give him a hug tour

36. Law of
Product Tour
3

37. Autoplay audio/video

39. Don’t embarrass user
or
block them from content

40. Law of
4
Not Interrupting

42. Provide feedback
when necessary

43. Law of
Feedback
5

44. This is important but not clickable
This is a button
This is not a button

45. This is not a button

46. Don’t do anything,
users won’t expect

47. Law of
Not Surprising
6

49. If you want your user to do
something -
Just Ask

50. Law of
Guided Action
7

52. Show helpful info
when & where needed

53. Law of
8
Being Helpful (inline)

55. Users will make mistakes
Forgive them

56. Law of
Forgiveness
9

57. Change your name: Google+

59. Change your name: Facebook (!!!)

60. Switching between page and profile

61. Provide the right option
when & where needed

62. Law of
Context
10

63. What are the primary actions here?

64. What are the primary actions here?

65. What are the primary actions here?

66. What are the primary actions here?

67. Not more than 2
primary actions per screen

68. Put primary actions
front and center

69. Law of
Primary Action
11

70. How do you Log Out?

71. Zoom into the corner

72. Here it is

73. Put secondary actions
in secondary place

74. Law of
12
Secondary Action

75. Whose site is that?

76. Whose site is that?

77. What makes it look consistent?
○ Logo
○ Color
○ Fonts
○ Layout

78. What about this? www.theworldsworstwebsiteever.com

79. Make users familiar
with you

80. Law of
Consistency
13

81. Which brands come to your mind?

82. Using color to

83. Which emails are unread here?

84. Picture says 1000 words
Color says 1000 pictures

85. Law of
Using Color
14

86. How do you open this door?

87. Google Now

88. Serve user before
they take action

89. Law of
Invisible UI
15

90. UX

93. 5 Points to
Remember

94. Think From
Day 1
1

95. 2
Desktop, Tablet
& Mobile are different

97. COOL
3
is not always useful

99. More is Good
but
Less is More
4

100. Weather widget

101. Profile

102. Thermostat

103. (Proper)
5
Whitespace is Good

104. Which one looks better? Why?

105. Too much whitespace!!!

106. Testing UX
because you are not everyone

107. Usability Test

108. Become a User

109. Sibling Test

110. A/B Test

111. Use Tools

113. Thanks