DEV Community

Cover image for Make Your App Feel Better: 10 UI Tips for Beginner/Mid-Level Developers

Make Your App Feel Better: 10 UI Tips for Beginner/Mid-Level Developers

Hari Lamichhane on September 23, 2024

Hey, devs! šŸ‘‹ As a beginner or mid-level developer, you've probably focused a lot on making your app functional. But have you considered how it fee...
Collapse
 
aloisseckar profile image
Alois SečkĆ”r •

Nice and useful recomendations, thanks.

I have recently come across another interesting article full or UI tips with practical examples. I hope you dont mind, if I leave a link here - uxplanet.org/16-ui-design-tips-ba2...

Collapse
 
harimanok profile image
Hari Lamichhane •

Nice one!

Collapse
 
perisicnikola37 profile image
Nikola PeriŔi㠕

Wow, awesome. Thanks for sharing!

Collapse
 
fbnlsr profile image
Fabien Lasserre ā˜•ļø •

Another couple of tips, regarding forms:

  • Always keep labels visible, so users don't get lost while filling a form
  • Don't use placeholders as instructions (like in you last tip "Enter your name") but rather use them as a mask of what should be entered inside the input ("John Doe")
Collapse
 
harimanok profile image
Hari Lamichhane •

šŸ™ŒšŸ¼

Collapse
 
rocketeerfly profile image
RocketeerFly •

These are common UX/UI mistakes that I often encounter in my mobile app development career. I've struggled to convince UX/UI designers about the importance of adhering to these best practices in a professional application

Collapse
 
cookiemonsterdev profile image
Mykhailo Toporkov šŸ‡ŗšŸ‡¦ •

it is always pain in my a** to decide how much info regarding error that occurred I want to provide to user... Ofc I always can make sth like: Ops sth went wrong.

Collapse
 
harimanok profile image
Hari Lamichhane •

The idea is to keep it simple, they don't need to see all the error messages. Just add a primary action to retry or go back etc.

Collapse
 
cookiemonsterdev profile image
Mykhailo Toporkov šŸ‡ŗšŸ‡¦ •

The GitHub approach for handling API errors is the best. They display a 404 page not only for 'not found' errors but also for cases like unauthorized, forbidden, etc. The point here is that the user does not need to know if the page exists if he/she does not have access to it.

I'm really not sure if we always need to add a 'retry' or 'go back' option when the main interface is not blocked and the navigation menu or other links are still accessible.

Thread Thread
 
fbnlsr profile image
Fabien Lasserre ā˜•ļø •

Depends on the context. If a user is not authorized to perform an action, it's better to explain why (they need to contact an admin, they need to upgrade their plan) rather than just giving them a Not Found error.

Collapse
 
sudhashrestha profile image
Sudha Shrestha •

This article is really helpful! I've seen these minor mistakes in so many apps, and they truly make a big difference in the overall user experience. As developers, we often focus on functionality and forget how essential these UI details are. These tips are a great reminder of how much impact thoughtful design can have—definitely something we shouldn't overlook!

Collapse
 
harimanok profile image
Hari Lamichhane •

Indeed!

Collapse
 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thanks for sharing Hari. The second one is the best in my opinion

Collapse
 
harimanok profile image
Hari Lamichhane •

It's my pleasure! Glad that you liked it :)

Collapse
 
himanshu_code profile image
Himanshu Sorathiya •

Don't have any words to say how grateful I'm after reading this, just mind blowing, so many minor details with best solutions, great work brother

Collapse
 
gregharis profile image
Greg Haris •

Thanks for sharing man.

This has just saved the day right now.

🫔🫔🫔🫔🦾🦾🦾

Collapse
 
harimanok profile image
Hari Lamichhane •

Yayy šŸš€

Collapse
 
best_codes profile image
BestCodes •

Great tips! Keep up the good work!

Collapse
 
harimanok profile image
Hari Lamichhane •

Thanks!

Collapse
 
schmedly profile image
Eric Lyng •

I love how you write. Concise is key!!!

Collapse
 
harimanok profile image
Hari Lamichhane •

Thank you!

Collapse
 
jcsmileyjr profile image
JC Smiley •

This is awesome

Collapse
 
harimanok profile image
Hari Lamichhane •

šŸ™ŒšŸ¼

Collapse
 
filipecsweb profile image
Filipe Seabra •

Those are very basic and yet super useful recommendations. Thank you!

Collapse
 
wagner_braga_d61430ce77b8 profile image
Wagner Braga • • Edited

As a backend developer I say: I was searching for silver and found gold!
Thanks. That is a lot of thing that never crossed my mind.

Collapse
 
harimanok profile image
Hari Lamichhane •

I am glad that you found it useful šŸ™‚

Collapse
 
ferperalta-dev profile image
Fernando Emanuel Peralta •

Thanks! It's very usefull!

Collapse
 
harimanok profile image
Hari Lamichhane •

šŸ™ŒšŸ¼

Collapse
 
kosoko_daniel profile image
Oluwagbenga •

Very helpful

Collapse
 
iamvaibhavsar profile image
Vaibhav Bhavsar •

Great insights

Collapse
 
serkancakmak profile image
serkan cakmak •

Thank you

Collapse
 
harimanok profile image
Hari Lamichhane •

My pleasure ;)

Collapse
 
edchtzwe profile image
Ed •

Love it! All useful tips for someone with 0 sense for design but still like pretty stuff šŸ™

Collapse
 
harimanok profile image
Hari Lamichhane •

Glad that you loved it!

Collapse
 
jcubic profile image
Jakub T. Jankiewicz •

Always Show Loading States

This is not always the best approach. Did you hear about optimistic UI?

Collapse
 
harimanok profile image
Hari Lamichhane •

Yes, I agree. However optimistic updates are not always applicable or easy to implement like something is being exported or you are running a heavy task in the background.

Collapse
 
paulsanjay81 profile image
Sanjay Paul •

Great post! Thanks for sharing.

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza •

Nice Article šŸ‘