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
 
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
 
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
 
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
 
filipecsweb profile image
Filipe Seabra

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

Collapse
 
gregharis profile image
Grƫg HƤris

Thanks for sharing man.

This has just saved the day right now.

šŸ«”šŸ«”šŸ«”šŸ«”šŸ¦¾šŸ¦¾šŸ¦¾

Collapse
 
harimanok profile image
Hari Lamichhane

Yayy šŸš€

Collapse
 
schmedly profile image
Eric Lyng

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

Collapse
 
harimanok profile image
Hari Lamichhane

Thank you!

Collapse
 
wizard798 profile image
Wizard

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
 
best_codes profile image
Best Codes

Great tips! Keep up the good work!

Collapse
 
harimanok profile image
Hari Lamichhane

Thanks!

Collapse
 
jcsmileyjr profile image
JC Smiley

This is awesome

Collapse
 
harimanok profile image
Hari Lamichhane

šŸ™ŒšŸ¼

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
 
serkancakmak profile image
serkan cakmak

Thank you

Collapse
 
harimanok profile image
Hari Lamichhane

My pleasure ;)

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
 
paulsanjay81 profile image
Sanjay Paul

Great post! Thanks for sharing.

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

Nice Article šŸ‘

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
 
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
 
ferperalta-dev profile image
Fernando Emanuel Peralta

Thanks! It's very usefull!