Image for post
Image for post

16 UX and UI Design Tips That Always Deliver Growth

Stef Ivanov
Apr 17 · 5 min read

UX is a discovery process. We often argue that user experience doesn’t start and finish with a project. As long as your product is live, the UX process never ends. When it comes to digital products, there’ll always be room for improvement and growth opportunities worth exploring, so the design process is an inseparable part of the growth journey.

When it comes to usability and design principles though, there’re proven and tested rules we could apply without hesitation. Why would you reinvent the wheel?

Check out our selection of 16 UX and UI tips and tactics that deliver instant growth results and save your brainpower for more complex UX and product challenges.

1. The best performing CTA

Image for post
Image for post

Your call to action button will always perform better if you add some context to the action, but try to keep it up to three words. Instead of “Add”, you could have “Add to Cart”, and instead of “Buy” — “Buy Now”

2. Copy on mobile

Image for post
Image for post

There’re plenty of tests that have been done proving that the best usability principle for the readability on mobile is no more than 9 words per line, or 50–60 characters.

3. CTA on mobile

Image for post
Image for post

It’s larger than what the majority of designers use. An MIT Touch Lab study of Human Fingertips concluded that the average width of the index finger is 16–20 mm for most adults, which makes the ideal button size 40–50px wide.

4. Ecommerce listing

Image for post
Image for post

Not sure when to use radio button and when a dropdown. The UX rule is simple — use radio-button style for less than 5 options and a drop-down for more than 5 options.

5. Pagination or infinite scroll

Image for post
Image for post

Many UX designers are tempted to use infinite scroll to make their design more sleek and modern. However, this doesn’t work for users trying to find the right content. The tests have proved that infinite scroll should be used for content exploration and pagination for goal-oriented UX, like e-commerce or data-rich websites.

6. Default selection — to be or not to be

Image for post
Image for post

Typing and additional clicking have high interaction cost. To increase your forms conversion rate, always use default selection, prompting the desired or the most frequent selection.

7. How to use icons

Image for post
Image for post

Overusing icons is a UI mistake, often compromising the UX. The use of icons should always have a strong meaning, reinforcing what can’t be said with words, never hiding the functionality behind a vague icon. The golden UX rule: use icons when the label is not enough to explain the action.

8. Error messaging

Image for post
Image for post

To boost conversion rates, always offer suggestions to correct errors, reducing user’s cognitive load. Keep it human and humoristic to avoid churn when the user faces an error screen or message.

9. Checklist or radio-style button?

Image for post
Image for post

The UX principle here is simple: for multiple-choice selection go for a checklist, for single-choice selection — radio button. No designer should do otherwise.

10. Use the placeholder to show an example

Image for post
Image for post

Using placeholder copy sets a better context and increases form conversion. But you should go one step further — use an example, instead of the required field name. For example, insert a sample phone number (+44 757 869…), instead of putting “phone number”, or “hi@pony.studio” instead of “email”. It’s a proven UX principle.

11. Wider tappable area on mobile

Image for post
Image for post

Back to the MIT research from point 3, wider buttons and tappable areas on mobile always perform better than tiny UI components. So if the design allows it, always use wider, bigger visual options than radio buttons, dropdowns or copy links on mobile.

12. Use colours for classification

Image for post
Image for post

Colour-based labels for important classification decrease the cognitive load, so always go for a bit of colour on key design screens. The risk — don’t overuse it, as it might have the opposite effect and mess up the hierarchy of the UX.

13. Form field buttons

Image for post
Image for post

Always use a different colour for the button placed next to a text field to make sure it doesn’t blend with the text input area and it stands out as a call-to-action button.

14. The perfect line height

Image for post
Image for post

We all wished there was a perfect ratio between font size and line spacing, but, and we’re sorry to break it to you — there isn’t. The universal UX rule is — keep the line height to 20–30% more than the character height for better readability, so anything within this range will do the job for most cases.

15. The font size that always works

Image for post
Image for post

If everyone used the same font size all the time, the design world would be a very boring place. If you want to be on the safe side though, 16px font with 1.5 line height always works. It’s the safest option for body copy.

16. Overlapping images for a polished look

Image for post
Image for post

If you want to add a more fancy touch to your designs, go for overlapping images, especially if you’re designing user profile pages or cards. To make sure it stays balanced, always match the image border with the background colour.

— — — —

Stef Ivanov is the founder and lead designer of Pony Studio, a product design studio specialising in building early-stage digital products.

Design For Growth

Actionable UX, Design & Growth tips and insightful content…

Stef Ivanov

Written by

Founder & Lead Designer at Pony. Worked with 100+ startups. Clients backed by YC, Techstars, Seedcamp and more. Give some love and tap〚 Follow ⟧ 🙏

Design For Growth

Actionable UX, Design & Growth tips and insightful content on how to boost your product growth effectively. For founders, designers, product leaders & marketers who strive to build digital experiences that grow their business.

Stef Ivanov

Written by

Founder & Lead Designer at Pony. Worked with 100+ startups. Clients backed by YC, Techstars, Seedcamp and more. Give some love and tap〚 Follow ⟧ 🙏

Design For Growth

Actionable UX, Design & Growth tips and insightful content on how to boost your product growth effectively. For founders, designers, product leaders & marketers who strive to build digital experiences that grow their business.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store