Top 5 Advanced UX/UI Design Tips and Tricks Every Designer Needs to Know About – Part 3 — Transcript

Full transcript

1. 0:00Most UXUI advice out there teaches you
2. 0:03the same surface level stuff. Use white
3. 0:05space, align your text, pick better
4. 0:08colors. But if you want to actually
5. 0:10become a great designer, the kind who
6. 0:12creates interfaces people love to use
7. 0:15and remember, you need more than that.
8. 0:17In this video, we'll be sharing five
9. 0:20advanced UXUI design tips you won't hear
10. 0:22in most courses or tutorials. Let's get
11. 0:25into it. One, personalize the experience
12. 0:28based on user behavior. When you're
13. 0:30designing a product, it's important to
14. 0:32remember that not all users are the
15. 0:34same. Some are brand new, some are
16. 0:36coming back after a few uses, and others
17. 0:39are deeply engaged. But what many
18. 0:41beginner designers do is show everyone
19. 0:43the same screen, no matter where they
20. 0:45are in their journey. That's a missed
21. 0:48opportunity. Designing experiences that
22. 0:50adapt to different types of users can
23. 0:52make your products feel smarter, more
24. 0:54personal, and way more useful. Let me
25. 0:57show you what this looks like using a
26. 0:58fitness app. The first screen is for a
27. 1:01new user. They've just signed up, so the
28. 1:03app keeps things really simple. It
29. 1:06welcomes them and encourages them to set
30. 1:08their weekly goals. Underneath, there
31. 1:10are a few trending programs and some
32. 1:12easy categories. It's just enough to
33. 1:14explore, but not overwhelming, which is
34. 1:16exactly what a firsttime user needs.
35. 1:19Next, we've got a repeat user. This
36. 1:21person has used the app before and is
37. 1:23starting to build a routine. Instead of
38. 1:25onboarding content, they get a clear
39. 1:27workout plan for the day with helpful
40. 1:29details like duration and calories
41. 1:31burned. Now, here's a super user,
42. 1:34someone who's fully engaged and
43. 1:35committed to their fitness goals. The
44. 1:37app experience becomes more advanced. We
45. 1:40start with useful stats like daily
46. 1:41steps, calories burned, and heart rate.
47. 1:44Then it moves into their workout plan
48. 1:46and personalized diet suggestions. At
49. 1:48this stage, it's not about helping them
50. 1:50get started. It's about helping them
51. 1:52optimize and stay on track. Great design
52. 1:55meets people where they are. Instead of
53. 1:58creating one generic experience for
54. 2:00everyone, think about how your interface
55. 2:02can adapt to what the user needs right
56. 2:04now. Small changes like personalized
57. 2:06messages, tailored content, or progress
58. 2:09tracking can make your product feel more
59. 2:11human, more helpful, and more valuable.
60. 2:14Two, design smarter search. Search is
61. 2:17one of the most critical features in any
62. 2:19product. But it's also one of the most
63. 2:21overlooked in design. Most designers
64. 2:24just drop in a search bar and move on.
65. 2:26But good search design isn't just about
66. 2:28function. It's about how it feels, how
67. 2:30fast it helps users get what they need,
68. 2:32and how much effort it saves them. Think
69. 2:35about what happens when a user taps into
70. 2:37a search bar. That's a moment of intent.
71. 2:40They're looking for something, but they
72. 2:41may not know exactly what. That's where
73. 2:44your design can do one of two things.
74. 2:46Give them a blank screen and expect them
75. 2:48to do all the work. Or offer helpful
76. 2:51suggestions that make the experience
77. 2:52easier, faster, and smarter. Let's look
78. 2:55at the first version, the standard blank
79. 2:57screen search. Technically, it works,
80. 2:59but there's no guidance. It's a dead end
81. 3:02unless they know exactly what they want.
82. 3:04Now, let's look at a smarter version of
83. 3:06the same screen. The search bar is still
84. 3:08there, ready to use, but underneath it,
85. 3:11the interface offers subtle, useful
86. 3:13suggestions. Things like recent
87. 3:15searches, so the user can quickly pick
88. 3:17up where they left off. Popular items,
89. 3:20which gives them a sense of what others
90. 3:21are finding useful. Personalized
91. 3:23recommendations based on their past
92. 3:25behavior or interest. These suggestions
93. 3:28don't get in the way. They quietly
94. 3:30support the user. And if they already
95. 3:32know what they want, they can ignore
96. 3:33them and just type. But if they're
97. 3:35unsure, these small hints reduce
98. 3:37friction and give them somewhere to
99. 3:39start. Three, smarter order tracking
100. 3:42design. Here's something a lot of
101. 3:44designers overlook. Post-purchase
102. 3:46experiences matter just as much as the
103. 3:48purchase itself. Think about it. When
104. 3:50someone places an order, they've already
105. 3:52made a decision. They've paid,
106. 3:54committed, and now they're waiting. That
107. 3:56moment between payment and delivery is
108. 3:59full of expectation and uncertainty. And
109. 4:01how you design for that moment says a
110. 4:03lot about your product. Now, let's take
111. 4:06a look at a very basic order screen. It
112. 4:08shows the order number, a plain list of
113. 4:10items, some courier info, and a timeline
114. 4:13made up of simple dates. Technically,
115. 4:15the information is there, but visually
116. 4:18there's no structure, no prioritization,
117. 4:21no guidance, just data dumped onto a
118. 4:23screen. The user has to scan, interpret,
119. 4:26and piece everything together
120. 4:28themselves. Now, compare that to this
121. 4:30upgraded design. From the very first
122. 4:32glance, this screen makes you feel like
123. 4:35everything is under control. It opens
124. 4:37with a confident message. Your order is
125. 4:39on the way, paired with clear delivery
126. 4:41details and visual icons that help
127. 4:43communicate the time window and address
128. 4:45instantly. The courier section is no
129. 4:47longer just a name and number. It's
130. 4:49human. There's a photo, a name, and
131. 4:52quick access buttons to call or message,
132. 4:54which not only adds trust, but makes the
133. 4:57experience feel more personal and
134. 4:58responsive. The items, no more long text
135. 5:01lists. And one of the best touches, the
136. 5:04order history is now a visual timeline.
137. 5:07Instead of scanning a block of text and
138. 5:08dates, users can instantly see what
139. 5:11stage the order is in. This isn't just a
140. 5:14UI upgrade. It's a completely different
141. 5:17experience because great design doesn't
142. 5:19just display information. It reduces
143. 5:22stress and answers questions before
144. 5:24they're asked. Speaking of great
145. 5:26designs, a lot of people ask us, "How do
146. 5:29I make my UI designs actually look good?
147. 5:32Not just functional, not just okay, but
148. 5:35clean, modern, and something people
149. 5:37actually want to use." If you're trying
150. 5:38to figure that out, I really recommend
151. 5:40checking out our UX UI design playbook.
152. 5:43It's packed with the exact principles,
153. 5:44visual tips, and layout rules that
154. 5:47helped thousands of new designers, and
155. 5:49also developers finally understand how
156. 5:51to design great UI designs. You'll find
157. 5:54real examples, prolevel shortcuts, and
158. 5:56simple things you can apply right away
159. 5:58to make your designs feel way more
160. 6:00polished and confident. In fact, a lot
161. 6:01of our students said this was the best
162. 6:03UI design ebook that finally helped them
163. 6:06to improve their UI designs. We just
164. 6:08crossed 17,000 downloads of the free
165. 6:10preview and full version, which is
166. 6:12honestly amazing. The price may go up
167. 6:14soon, but right now you can get 40% off
168. 6:16with the code love peak 40. So, if you
169. 6:19haven't grabbed your copy yet, this is
170. 6:20the perfect time. Links in the
171. 6:22description. And when you try it, I'd
172. 6:23love to hear how it helped your designs.
173. 6:25We've already seen some amazing
174. 6:27transformations.
175. 6:28[Music]
176. 6:30Four, category screens. Category screens
177. 6:33might seem simple, just a list of
178. 6:35options, right? but they actually play a
179. 6:37huge role in how users move through your
180. 6:39product. Let's look at three different
181. 6:40versions of this screen and how the
182. 6:42design affects the experience. The first
183. 6:44version is very basic, just a list of
184. 6:47category names and C selection links.
185. 6:49There's nothing wrong with it. It's
186. 6:51clean and minimal. But the problem is it
187. 6:53puts all the effort on the user. Every
188. 6:55line looks the same. There's no visual
189. 6:57rhythm, no hierarchy, and no cues that
190. 7:00help guide the eye. You have to read
191. 7:01through every label to find what you
192. 7:03want. Now, the second version is
193. 7:05something we see a lot from junior
194. 7:06designers. It looks more designed and
195. 7:09might even seem impressive at first
196. 7:10glance, but here's the thing. It focuses
197. 7:13more on appearance than on usability.
198. 7:15Even though there's a dark overlay to
199. 7:16help with some text readability, it
200. 7:18doesn't fully fix the contrast issue.
201. 7:20Some of the text is still hard to read.
202. 7:22On top of that, the images don't match.
203. 7:24One is bright, another is moody, another
204. 7:26feels like a magazine photo. There's no
205. 7:28visual consistency. It doesn't feel like
206. 7:31these images belong to the same product
207. 7:32or brand, more like a random mix of
208. 7:35stock photos. And because every block is
209. 7:37so visually busy, it takes longer for
210. 7:39users to understand what they're looking
211. 7:41at. Now, let's look at the third
212. 7:43version. And this is where things come
213. 7:45together in a much more thoughtful,
214. 7:46professional way. This design uses
215. 7:48color-coded charts, each with a soft,
216. 7:51solid background and a clean, isolated
217. 7:53image that represents the category.
218. 7:55Because the images are stylistically
219. 7:57unified and the background colors are
220. 7:59well balanced, the whole screen feels
221. 8:01cohesive and branded. There's a rhythm
222. 8:03to the layout that makes scanning
223. 8:05effortless. You can glance at the screen
224. 8:07and understand the options in just
225. 8:09seconds. Five, choose the right input
226. 8:12method for the moment, not just the
227. 8:14data. Not all number inputs are created
228. 8:16equal, and they shouldn't be treated the
229. 8:18same. Entering your weight, age,
230. 8:20calories, or daily steps might seem
231. 8:22similar on the surface, but the way
232. 8:24those values are entered can completely
233. 8:26change how smooth or frustrating the
234. 8:28experience feels. Let's walk through a
235. 8:31few real examples and break down what
236. 8:32works best and why. First, consider the
237. 8:36type of input. There are two kinds of
238. 8:38numeric input scenarios. onetime setup
239. 8:40like entering your weight when first
240. 8:42signing up or setting your age, height
241. 8:44or weight and frequent repeated entry
242. 8:47like locking food to track calories or
243. 8:49macros. These are completely different
244. 8:52use cases and they require completely
245. 8:54different UI patterns. Let's look at the
246. 8:56screen where the user is asked to enter
247. 8:58personal details like weight or height.
248. 9:00In these cases, scroll wheels and
249. 9:02sliders work beautifully. Why? Because
250. 9:05users aren't entering this data often.
251. 9:07They just want to get through the setup
252. 9:08quickly and these values usually fall
253. 9:10within a known range. And most
254. 9:12importantly, they are low effort. Users
255. 9:15don't need to type or think too much.
256. 9:17Now, let's compare that to logging your
257. 9:19food every day to track calories or
258. 9:21macros. This is where sliders and scroll
259. 9:23wheels break down. They're too slow, too
260. 9:26fiddly, and don't offer the kind of
261. 9:27control users need. If you want to log
262. 9:30food quantity like 350 g, I don't want
263. 9:33to scroll endlessly or try to drag a
264. 9:35slider to the perfect number. Text
265. 9:37fields are better here because they're
266. 9:38faster, more precise, and less
267. 9:40frustrating when used repeatedly. So,
268. 9:43how do you choose? Here is a simple rule
269. 9:45of thumb. Use sliders or scroll wheels
270. 9:47for casual one-time inputs where
271. 9:49precision isn't critical. Use text
272. 9:51fields, steppers, or number inputs for
273. 9:54frequent, precise, or repetitive tasks.
274. 9:57It's not about which component looks
275. 9:58nicer. It's about reducing friction and
276. 10:01matching the input method to the
277. 10:02context. That's all for today. We hope
278. 10:05you found these tips helpful. Let us
279. 10:07know in the comments which one was your
280. 10:08favorite. We'll see you on the next one.