Forms are always a challenge, really nice to have a book that dives deep into how to build better forms, will definitely check it out. twitter.com/vponamariov/status/1597227932426317825
I got to check out an early copy of this, and it's great. Really solid principles on form design, found myself nodding along quite a lot! twitter.com/vponamariov/status/1597227932426317825
Ryan Hoover
Founder of Product Hunt & Weekend Fund
I have a feeling @jsngr will dig this
I read this.
It is very good.
You should get this to stay... in-formed. twitter.com/vponamariov/status/1597227932426317825
A necessary design skill I think all web designers & developers should know 👇 twitter.com/vponamariov/status/1597227932426317825
Check out @vponamariov book, it's got heaps of tips to help you level up your UI skills, also he is a legend! 🔥 twitter.com/vponamariov/status/1597227932426317825
I really like Victor's work, seriously.
I have not much knowledge about design but this book definitely teaches me a lot about forms.
If a systems engineer can create well-working and beautiful forms with this book, you can too! ☺️ twitter.com/vponamariov/status/1597227932426317825
If you want to improve your design UI/UX skills this book from Victor is for you! twitter.com/vponamariov/status/1597227932426317825
For those who want to improve their design knowledge
This is the BOOK you are looking for
Congrats @vponamariov twitter.com/vponamariov/status/1597227932426317825
Knowing how much love @vponamariov put into this book, it's definitely a steal at this price! twitter.com/vponamariov/status/1597227932426317825
😊 I highly recommend checking out this incredible work! :D
Congrats, @vponamariov! twitter.com/vponamariov/status/1597227932426317825
"Level up your usability skills" and learn how to create better from! - A book full of best practices and examples, created by Victor.
Check it out 👇 twitter.com/vponamariov/status/1597227932426317825
Oh man, I remember how much time I've put into designing my first form and it didn't even look good. 😣
It surely wouldn't have been the case if I only had this book by @vponamariov, check it out! twitter.com/vponamariov/status/1597227932426317825
Forms have always been a pain point for me, made worse by my inexperience in design. Victor's notes here have saved more than I can admit 🤩
Now, Victor has written a book on designing forms. I'm 100% confident this book will give as much quality (if not more) in form design! 💯 twitter.com/vponamariov/status/1597227932426317825
Denislav Jeliazkov
Founder Figura
Victor has been amazing in providing a lot of free value over his Twitter and Email. Coming with this book will give you actionable steps that you can just go in and directly improve not just you visual design, but your overall experience. Great job @victor_ponamariov
Denislav Jeliazkov
Founder Figura
Victor has been amazing in providing a lot of free value over his Twitter and Email. Coming with this book will give you actionable steps that you can just go in and directly improve not just you visual design, but your overall experience. Great job @victor_ponamariov
Simon Hoiberg
Founder & CEO, FeedHive
Congratulations on the launch, Victor!
This is an amazing resouce - I can 100% recommend it 🚀
Simon Hoiberg
Founder & CEO, FeedHive
Congratulations on the launch, Victor!
This is an amazing resouce - I can 100% recommend it 🚀
Alexandra Cote
Growth Consultant and Content Strategist
This is golden, Victor! Definitely all must for devs and founders to polish up on some UX skills.
Alexandra Cote
Growth Consultant and Content Strategist
This is golden, Victor! Definitely all must for devs and founders to polish up on some UX skills.
How to design almost any UI element.
A curated list of 58 articles 👇
Sharath Kuruganty
Head of Community at Threado
This is so cool and inspirational. Nice work Victor.
Sharath Kuruganty
Head of Community at Threado
This is so cool and inspirational. Nice work Victor.
UI/UX Tip 💡
You don't need to mark every field if it's required or not.
Have you noticed that most forms in Mac/Windows don't have them?
Most of the times fields ARE required.
But if you have optional ones, you can group them and indicate only once that they are optional.
Shruti Balasa
Full Stack Web Developer & Tech Educator
Congratulations on the launch Victor! It's a lot of hard work to compose these tips and turn them into a book. I've always loved your UI/UX tips on Twitter, so I'm sure this book would be super useful.
Shruti Balasa
Full Stack Web Developer & Tech Educator
Congratulations on the launch Victor! It's a lot of hard work to compose these tips and turn them into a book. I've always loved your UI/UX tips on Twitter, so I'm sure this book would be super useful.
Pradip Khakhar
Founder - The Product Angle
Hey Victor - learning a ton from your twitter feed, great to see everything in one place.
Pradip Khakhar
Founder - The Product Angle
Hey Victor - learning a ton from your twitter feed, great to see everything in one place.
UI/UX Tip 💡
Use paddings for making space between links.
This way you'll have the same result as if you used margins, but the clickable area will be bigger.
Thus, it'll be easier to hit the links.
UI/UX Tip 💡
Say you have a table with a lot of numbers. In this case, use a font that has tabular numerals.
Tabular numerals have the same width, and it's easier to scan them.
UI/UX Pattern💡
I've found a really nice idea for breadcrumbs!
The thing is that you not only show the category path, but you also show a dropdown of categories on hover.
In the attached example I took some categories from Amazon.
UI/UX Tip 💡
Hide irrelevant information.
Instead of marking a group of fields "Optional", you may completely hide them under a checkbox.
Examples:
🔸Ask the user's address only if he needs delivery
🔸Ask the user's phone number only if he asked to contact him
Vadim
Full Stack Engineer
The tips worth spreading!
Alex. Delivet
Founder at Collect
I've been loving your tweets for a while. I'm happy to buy your book today.
Congrats @victor_ponamariov for this and keep the good work!
Alex. Delivet
Founder at Collect
I've been loving your tweets for a while. I'm happy to buy your book today.
Congrats @victor_ponamariov for this and keep the good work!
Denis Danilov
Product Design & stratumkit.com
Wow, you can clearly see how old the existing interface metaphors are. I'm nostalgic!
Denis Danilov
Product Design & stratumkit.com
Wow, you can clearly see how old the existing interface metaphors are. I'm nostalgic!
UI/UX Tip💡
Animation speed matters.
🔸less than 100ms - won't be perceived at all
🔸100ms - 200ms - micro animations, like hover effects
🔸200ms - 300ms - an intermediate step, might be used for micro animations too
🔸more than 300ms - complex animations
Consistency matters, they say...🤔
Starting from today, I'll post one UI tip per day for the next 50 days!
Follow this thread 👇
💡Tip #01 - Set the fixed width of your buttons if they have a loading state
Otherwise, they'll shrink when loading, and it looks terrible.
UI/UX Tip 💡
Here is an example of how to make your text more scannable.
UI/UX Tip 💡
In mobile UI, put the slider values above the slider, not below.
Because when users touch it, their index finger covers part of the values, so they won't be sure which value is currently selected.
I reviewed 100+ user interfaces this year.
Avoid the most common 18 mistakes to make your UI/UX design better 👇
Denislav Jeliazkov
Founder Figura
History never repeats itself. Man always does - I think is the perfect quote for this amazing project. Victor has done a brilliant job, as when we look at patterns from the past we can form our future. It was amazing, thanks for sharing it!
Denislav Jeliazkov
Founder Figura
History never repeats itself. Man always does - I think is the perfect quote for this amazing project. Victor has done a brilliant job, as when we look at patterns from the past we can form our future. It was amazing, thanks for sharing it!
Mehdi Djabri
Founder & CEO @Iteration X
Victor is a goldmine of UI/UX insights. His book is probably amongst the very best collections of UI/UX tips in the world. Congrats for the launch @victor_ponamariov !
Mehdi Djabri
Founder & CEO @Iteration X
Victor is a goldmine of UI/UX insights. His book is probably amongst the very best collections of UI/UX tips in the world. Congrats for the launch @victor_ponamariov !
Daniil Okhlopkov
do blockchain & big data @ via.exchange
By learning history, we can predict the future. Thanks for this! Definitely useful
Daniil Okhlopkov
do blockchain & big data @ via.exchange
By learning history, we can predict the future. Thanks for this! Definitely useful
Zakhar Kogan
Researching and building. Stuff.
Insightful and thorough, love it 🧙 Best of luck!
Zakhar Kogan
Researching and building. Stuff.
Insightful and thorough, love it 🧙 Best of luck!
Harsh Siriah
I develop mobile apps
You have provided very interesting and comprehensive information. The UI of the website is also really nice and soothing to look at. I hope you continue the series, explore more topics, and launch more similar products!
Great job! Congratulations on the launch! 🎉
Harsh Siriah
I develop mobile apps
You have provided very interesting and comprehensive information. The UI of the website is also really nice and soothing to look at. I hope you continue the series, explore more topics, and launch more similar products!
Great job! Congratulations on the launch! 🎉
Ruurtjan Pul
Indie maker. Whoismyisp.org, NsLookup.io
Really cool, thanks for making this :)
Ruurtjan Pul
Indie maker. Whoismyisp.org, NsLookup.io
Really cool, thanks for making this :)
Denis Leonov
Software Engineer
Great idea! Please keep going adding more materials!
Sunil Kumar
Writer, Creator and Influencer.
This is very insightful, @victor_ponamariov. Thanks for this great website!
Sunil Kumar
Writer, Creator and Influencer.
This is very insightful, @victor_ponamariov. Thanks for this great website!
Vladimir Borodin
CTO at DoubleCloud
Nice history research
Axel Lavergne
Indie maker, blogger
Love this! Kuddos on upvote #100 🎉
Sunil Khedar
Co-Founder, PLG Works
Exciting recap on how far we have come in the last 40-50 years.🎉
It also reminded me of the punched cards and the floppies.🙂
Sunil Khedar
Co-Founder, PLG Works
Exciting recap on how far we have come in the last 40-50 years.🎉
It also reminded me of the punched cards and the floppies.🙂
Yucel F. Sahan
maker landingpage.fyi ctaexamples.com
cool x 5 :)
You're missing the "mother of all demos" from 1968! Truly fascinating watch. https://www.youtube.com/watch?v=yJDv-zdhzMY
You're missing the "mother of all demos" from 1968! Truly fascinating watch. <a href="https://www.youtube.com/watch?v=yJDv-zdhzMY" target="_blank">https://www.youtube.com/watch?v=yJDv-zdhzMY</a>
Alexandra Cote
Growth Consultant and Content Strategist
wohoo!!
Ashley Porciuncula
CEO and Cofounder of Orbital 🪐
Genius! Congratulations on the launch!
Shahriar Khalvati
Programmer and Animator
Super interesting! Great job.
Love the simplicity here. Great resource for inspo & reference. Thanks for putting this together and congrats on the launch!
Love the simplicity here. Great resource for inspo & reference. Thanks for putting this together and congrats on the launch!
Would love to see Linux systems UI as well! Thank you for this!
Srijan Paul
I am a Product Enthusiast @KnowDis
Thanks for making This. Congrats on the launch!
Srijan Paul
I am a Product Enthusiast @KnowDis
Thanks for making This. Congrats on the launch!
deepu
Product Manager
learnt a ton from you on twtr, congrats on the launch
Anton Lapko
Digital designer and creator.
Congrats, awesome job!
Eleftheria Batsou
Community Manager | Dev, UX | Speaker
This is amazing! Congratulations Victor! 🎉
Eleftheria Batsou
Community Manager | Dev, UX | Speaker
This is amazing! Congratulations Victor! 🎉
Patricia Egyed
Tech enthusiast
Victor comes up with more and more ways to share his knowledge!
From tweets, to his Youtube channel, to now with this book.
I admire his work!
Patricia Egyed
Tech enthusiast
Victor comes up with more and more ways to share his knowledge!
From tweets, to his Youtube channel, to now with this book.
I admire his work!
Matt Gordon
TwikTwok/P-Block/Bufferi.ng/mptr.ee
Follow Victor on Twitter if you want to learn more about UX and UI. His tweets are very insightful and eye-opening. Looking forward to reading this book!
Matt Gordon
TwikTwok/P-Block/Bufferi.ng/mptr.ee
Follow Victor on Twitter if you want to learn more about UX and UI. His tweets are very insightful and eye-opening. Looking forward to reading this book!
Eugene Zolotarenko
Create projects which help people! 🔥
Great job, Victor! Congrats on the launch!
Eugene Zolotarenko
Create projects which help people! 🔥
Great job, Victor! Congrats on the launch!
Helen Huang
🎈 spreading joy @ joincolab.io
Ahhh, love this!
Seems super to the point and clear to read (not a surprise!). Now actioning upon these tips is a different story...
Great job Victor!
Helen Huang
🎈 spreading joy @ joincolab.io
Ahhh, love this!
Seems super to the point and clear to read (not a surprise!). Now actioning upon these tips is a different story...
Great job Victor!
Peter Mick
Curious about micro startups
Congrats Victor, a big fan of your UI / UX tips on Twitter!
What I love about them is that they're clean, simple, straight-to-the-point tips that can be actioned easily! Thanks a lot.
Keep going and hopefully one day the UX will shine all over the Internets.
Peter Mick
Curious about micro startups
Congrats Victor, a big fan of your UI / UX tips on Twitter!
What I love about them is that they're clean, simple, straight-to-the-point tips that can be actioned easily! Thanks a lot.
Keep going and hopefully one day the UX will shine all over the Internets.
Andrew Kpyto
Digital Marketer at Sembly AI 🚀
Nice! Good luck!
Amara Metu
I am a software developer
Awesome
Florin Pop 👨🏻💻
Front-end developer 💻 & Blogger 😍
Congratulations on the launch buddy! GLWS!
Florin Pop 👨🏻💻
Front-end developer 💻 & Blogger 😍
Congratulations on the launch buddy! GLWS!
Jan-Philipp Peters
Co-founder of BitsForDigits
Congrats on the launch, looks very helpful!
Nicolas Warnee
Technical Writer @Techalnds
Wow. Looks very cool :)! Congrats on the launch
Found this UI/UX Tip somewhere by Taras Bakusevych.
The idea is that when you have a complex wizard form, it'd be nice to hide all other elements from the field of the user's view.
In order to improve focus on the form.
Looks like a cool idea?
Dmitriy Danielyan
SWE/MLE
I'll recommend it to my colleagues designers
Vivek Dubey
Head of Growth
Amazing resource 🎉🙌
Gerardo Perez
Hello everyone
Excelentes consejos, muy útiles.
Jekyll Benassi
Scouring the internet for opportunitie$
Cool collection of tips - congrats on the launch! Does it come as an ebook as well or only physical?
Jekyll Benassi
Scouring the internet for opportunitie$
Cool collection of tips - congrats on the launch! Does it come as an ebook as well or only physical?
UI/UX Tip 💡
It might be a good idea to set the initial value around 50% for volume controls.
Because if you have a high value (90-100%), and users have 100% on their speakers, it'll be too loud.
While if you have 50% as an initial value, it won't hit their ears.
Алексей Сорокин
Python developer
This is a must for those who develop pages
Mike Hilton
Cambiador de palabras
Nice one good
James Brask
Dabbler in tech and online communities
Dope! Physical copy and ebook?
Jonas Buppert
Browsing products (nothing to see here)
Nice 1!
Gagandeep Rangi
⚡ Designer and developer
Love the 100 pages 100 tips concept. Usually tech books just get bloated otherwise 👍
Gagandeep Rangi
⚡ Designer and developer
Love the 100 pages 100 tips concept. Usually tech books just get bloated otherwise 👍
Super useful tool! Thank you for sharing :)
Kakon Faiza
Technical Writer & Blogger | BeatO
This is Amazing. Thanks for making this.
Naomi West
Email Marketer @ naomiwest.ca
Congrats on the release Victor!
Maxime Dupré
Indie app maker 👨🏻💻
Amazing Victor! This is a very important product for Indie Makers - we all great-looking interfaces to attract customers👌
Maxime Dupré
Indie app maker 👨🏻💻
Amazing Victor! This is a very important product for Indie Makers - we all great-looking interfaces to attract customers👌
Dawn Veltri
Director of Marketing @ RAEK
Congrats on the launch Victor!
UI/UX Tip 💡
Don't hide hints if possible.
🔸If you hide them under tooltips, users need to make a click or hover the icon to get the hint.
🔸If you show them right away users won't need to do extra actions.
There are some exceptions of course. As for every rule.
Anna Mandziuk 🇺🇦
How much will my app cost eBook is live!
Wow, congrats on your launch!
Maria
Marketing@Sealit - Email&File Encryption
Amazing! Tips and tricks are always precious! *_* And I am so happy for finding this in the middle of mu UI improvements! Big congratulations on the launch! ^_^ This is not only for beginners, right? :D
Maria
Marketing@Sealit - Email&File Encryption
Amazing! Tips and tricks are always precious! *_* And I am so happy for finding this in the middle of mu UI improvements! Big congratulations on the launch! ^_^ This is not only for beginners, right? :D
Maciej Cupial
Bootstrapping calendesk.com 📅
That's cool and no to expensive! I'm going to check it out.
Maciej Cupial
Bootstrapping calendesk.com 📅
That's cool and no to expensive! I'm going to check it out.
Rao Vat Xe Hoi
Kho xe hơi cũ mới & nhiều mẫu xe đa dạng
Congratulations on the launch
Yao Adantor
Founder @ Research Bookmark
Great resource Victor!
Pair that with some research and build great products
www.researchbookmark.io
Yao Adantor
Founder @ Research Bookmark
Great resource Victor!
Pair that with some research and build great products
www.researchbookmark.io
Manisha Joshi
noob @ nooble.xyz (We're LIVE)
Congrats on the launch Victor! This looks super helpful. Sharing with my founders right away, timely find before our PH launch!
Manisha Joshi
noob @ nooble.xyz (We're LIVE)
Congrats on the launch Victor! This looks super helpful. Sharing with my founders right away, timely find before our PH launch!
Soumil Singh
A tech geek in search of new innovations
Congrats on the launch
UI/UX Tip 💡
Show one hint/notification at a time. Do not overload users with information.
Showing multiple pieces of information at once increases cognitive load.
Peter Orban
CEO / Developer / Data & Map maniac
Congrats Viktor!
UI/UX Tip 💡
A nice way to make your text hierarchy is using modular scaling.
🔸Select base font size (usually 16px)
🔸Select ratio. Common onces:
- Perfect Fifth (1.5)
- Augmented Fourth (1.414)
- Major Third (1.250)
🔸 Multiply/Divide by the ratio
Valentin Študlar
Programmer & CEO
Looks awesome! Will be definitely reading.
earl motley
Blogger and Freelancer
Can i offer these services to ux design agency?
earl motley
Blogger and Freelancer
Can i offer these services to <a href="https://cieden.com/design">ux design agency</a>?
Hugh Lagrotteria
Co-founder @ Outdone
As a newbie to UX design, this is very helpful!
Christiaan
Experienced full-stack developer.
This looks very interesting. And for that price, I guess I cannot not buy it.
Christiaan
Experienced full-stack developer.
This looks very interesting. And for that price, I guess I cannot not buy it.
UI/UX Case 💡
Recently I saw a page that roughly had its element placed like on the image below.
On the left side - steps/wizard navigation
On the right side - the form itself
The problem with that is WHER the buttons are placed!
UI/UX Tip 💡
That's how my profile looks on a platform.
I still don't know what the badge means. Probably it's "verified" or similar, but I'm not sure.
If you have such a badge, add a simple tooltip on hover.
That really helps.
UI/UX Tip 💡
Don't hide your navigation under the hamburger menu.
It's considered to be a really bad practice on desktop devices. The reason is that it's hard for users to find it.
Instead, just show the navigation right away.
Emily
Hi!, I am a graphic designer
Great product!
UI/UX Tip for dark mode 💡
Don't use pure black as a background. Use a slightly grey color instead.
Material design, for example, recommends using #121212.
The aim is to reduce the contrast between text and background to reduce eye strain.
I have enjoyed a lot this book and the newsletter, I am always sharing with my team so we can all grow together. Keep up the good work and thanks for sharing your knowledge!
I have enjoyed a lot this book and the newsletter, I am always sharing with my team so we can all grow together. Keep up the good work and thanks for sharing your knowledge!
Nimesha Buvanendran
Just a pixie who loves tech-savvy things
This looks very resourceful and is a cool collection of tips.
Nimesha Buvanendran
Just a pixie who loves tech-savvy things
This looks very resourceful and is a cool collection of tips.
Ryosuke Suzuki
I'm a software developer! Love product.
wow!
this is what i looking for!!
thanks for your tips🥳
Ryosuke Suzuki
I'm a software developer! Love product.
wow!
this is what i looking for!!
thanks for your tips🥳
UI/UX Tip 💡
Always remember that the data can be larger than you have in your dummy design text.
This is a common case when you have a very nice-looking design, but in reality, it's messed up due to lengthy strings, image sizes etc.
UI/UX Tip 💡
Don't use internal scrolls.
In most cases, they bring more harm than good. They interfere with the main scrollbar and hook users when they scroll.
Especially on mobile! 😩
One exception I can think of is code editors or WYSIWYG editors.
UI/UX Tip for landing pages 💡
A common mistake when using a person's face in the hero section background.
If you place the text right on the face, you will
- Cover the face
- The text is hard to read if it's right on the face
Like this
UI Tip 💡
When designing your landing page, you don't have to put the whole screenshots of your app.
You're describing FEATURES, so
📸 take a part of your app
🔍 enlarge it
🧹 remove all the clutter
💎 and make a clearly VISIBLE image of your awesome feature
UI/UX Tip 💡
Use proper input type.
Very easy to implement, but it simplifies the mobile experience SO much.
Let's quickly brush up on them 👇
UI/UX Tip 💡
You have two ways of making the text hierarchy.
🔸Use different font sizes
🔸Use different colors & weights
Both might work, but consider using colors and weights.
You cannot always make text bigger, sometimes you're limited in space (e.g. in small cards)
Liked this UI Tip from @101babich
Avoid using saturated colors on dark themes as they can visually vibrate against dark surfaces.
Lighter tones (colors in the 200–50 range) have better readability on dark theme surfaces (at all elevations).
UI/UX Landing page tip 💡
A typical mistake is when you describe features using the following pattern.
The problem is that it often happens that there is a lot of text for every block. Especially if the text is centered.
It's simply hard to scan.
UI/UX Tip 💡
I often see a pattern when developers put an overlay on the whole web page.
But it happens that the page height is bigger than one screen. And the loader icon stays beyond the visible part of the screen.
So make sure the loader is centered properly.
Your UI/UX reading for the weekend 📚
The topic of the week: how to design filters?
👇
UI/UX Tip 💡
Checkboxes are usually associated with confirmation of something.
Don't put negative expressions there as it means that you "confirm not to do something".
It's even considered to be a dark UX pattern. E.g. "Don't subscribe me to the newsletter".
UI/UX Tip 💡
Don't put long messages in notifications.
The user might miss the content if it disappears automatically.
But also, you won't be able to put a really detailed & long explanation there.
Use a button for redirecting to a page with further instructions.
UI/UX Tip 💡
Automatically fill the user email if they tried to login and failed, and then went to the reset password form.
UI/UX Tip 💡
Do not overuse primary buttons. Sometimes you may miss that you have them everywhere.
If so, they're not primary buttons. There is no focus.
Use secondary, tertiary buttons, text/links. There are many techniques to make the UI less busy.
UI/UX Tip 💡
If you have a long list of filters they may occupy too much space.
In that case, hide them under a dropdown with a clear indication if some of them have been selected.
This is a typical pattern for E-Commerce filters when you have dozens of possible values.
UI/UX Tip 💡
The signup form should be as simple as possible. Because it requires few actions from users.
Ask as little information as possible.
If you need to ask more, try to break the form into multiple steps.
UI/UX Tip 💡
Provide a button for clearing the input value.
It might be reasonable for some situations, e.g. on mobile.
Also, it might be worth focusing the input as soon as the user cleared the value by clicking on the cross button, so that he started typing right away.
UI/UX Tip 💡
Don't put complex choices in dropdowns.
- You hide part of the information
- Dropdown items have limited design capabilities
- Users have to make 2 clicks to select an option
Other ways to present such data:
- cards
- radio buttons
- even tables (e.g. pricing)
UI/UX Tip 💡
Very simple but probably a nice trick.
When the user focuses on the search input, put a dark overlay on the rest part of the site.
It'll probably make the user more concentrated on the search task.
UI/UX Tip 💡
Obvious, but often overlooked thing.
When you show an SMS/Push notification with a verification code, make sure it's visible without opening the SMS.
Actually, it's a golden rule: the fewer actions users have to make, the better.
UI/UX Tip 💡
There are few ways to make a table responsive.
🔸Make it horizontally scrollable
🔸Display each row as a custom card
Or, you can simply put head and value rows horizontally, next to each other, like in the picture below.
Your weekly UI/UX compilation 👇
Topic: How to design complex data tables?
UI/UX Patterns 💡
You have a few options to separate logically related content on a mobile screen.
1. Using space
2. Using cards
It depends very much on the exact case you're solving.
But IMO, cards usually look pretty good.
UI/UX Design Tip 💡
If you have filters that are initially hidden, it'd be a good idea to put a red circle as an indicator if any of the filters are applied.
Especially useful in mobile UI.
In some cases, you can even put the number of how many options are chosen.
UI/UX Tip 💡
If you have many links in horizontal navigation, you may instinctively try to reduce the font size to fit more.
It's not the best solution. It's rather a temporary fix.
Instead, use "More..." with a separate dropdown.
Or rethink your whole site navigation.
UI/UX Tip 💡
Don't use hamburger menus on desktop.
They are less noticeable than on mobile. Plus hiding navigation is considered a bad practice.
It depends on the case though, but hiding it completely under the hamburger icon is not that great.
UI/UX Patterns💡
There are two patterns I know:
1️⃣ You make a button disabled + provide some hint right away.
2️⃣ The button is clickable, but it has a lock icon. When the user clicks, you show the hint.
Not sure which one is better. Personally, I like the second one
UI/UX Tip 💡
Do not clear email & password fields after an unsuccessful login attempt.
Obviously, the user will have to re-type them which is bad.
But also, if you have the "show password" button, it'd be easier to fix a small TYPO in the password without re-typing it.
Dark UI/UX pattern: Sneak into the basket 👿
You want to purchase something, but somewhere in the purchasing path, the site puts additional items in your final order.
Something like insurance, delivery, supplementary stuff etc.
I'm sure you see it all the time, right? 😩
Weekly UI/UX Reading 🤓
This time I've collected some articles about Mobile UI/UX. 👇
UI/UX Tip 💡
When users select filters, show the number of items that will be returned.
This will make it easier to decide whether the user should keep on narrowing possible results.
Maybe the user will already get 0 results. Then they will change filters.
UI/UX Tip 💡
When the user's cursor moves from one menu to another, there is a chance that the nested menu disappears.
It happens when the cursor moves out from the first or the second menu.
Fix: put some timeout before hiding the nested menu.
UI/UX Tip 💡
Don't put too many slices in a pie chart.
The purpose of using charts is to simplify data perception.
Having 20 slices will make it harder instead.
Usually, up to 5-6 slices are okay. The rest should be grouped in a single "others" slice.
UI/UX Tip 💡
Think outside of the box & outside the database.
If you have a table in the database, it doesn't mean that you have to display everything like your DB client displays.
Consider this example. Looks like a plain boring table.
How can we improve it?
UI/UX Tip 💡
App speed matters. But what also matters is the perception (!) of speed.
Instead of showing 0% as the initial progress value, you can put a small number so that it looks like your app is already doing some work.
UI/UX Design Tip 💡
If you want your UI to look more natural, use shadows for conveying elevation.
E.g. a modal is obviously placed ON TOP of the interface so that the interface is behind it.
The dimmed-out background is not enough.
UI/UX Tip 💡
If you can't control images uploaded by users, sometimes they can look bad.
The reason is - they might have bad contrast with your background.
One of the possible solutions is adding transparent inset border to the images.
Credits to @steveschoger
UI/UX Tip 💡
I struggle ALL the time when I see ASC/DESC in sorting.
My cognitive process: price ascending...so it goes from smallest to biggest...so first go cheap items... ah okay.
Don't think in terms of database. Use natural language.
UI/UX Mobile Tip 💡
If you have selection control on mobile, make an invisible area around the handles.
This way it'd be much easier to hit them with your finger.
UI/UX Mobile Tip 💡
If you have a numeric field, don't forget to put proper HTML attributes, so that the numeric keyboard is used instead of a general one.
Otherwise, users have to make an additional click.
UI/UX Mobile Tip 💡
We use thumbs a lot when we are on mobile.
So if possible, do not put control elements in the dead zone.
UI/UX Design Tip 💡
Don't put your sidebar navigation inside a fluid column.
It will stretch on bigger screens, while your links will stay the same.
Using a column system is okay, but it's not a strict rule.
UI/UX mistake I see all the time 👆
Take into account that the data WILL BE longer than you expected.
Names, titles, descriptions all that stuff.
One day you'll have a user with "Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr." name.
UI/UX Accessibility Tip 💡
If you use colors to convey information, remember that color-blind people won't be able to perceive it.
Provide supplementary elements like icons/text to help color blind people understand your UI.
UI/UX Tip 💡
Don't just put a screenshot of your app.
- Make few screenshots that demonstrate different features
- Remove clutter from them. Hints, copyright, some random garbage
➡️ Make users focus on ONE feature per time and show it with good quality media
UI/UX Design Tip💡
Make sure your UI controls look different so that users can distinguish them.
E.g. if you have buttons and "tag selector" and they look almost the same, it's not that good.
You can play with border-radius, colors, sizes etc.
UI/UX Tip 💡
Show the number of users who voted.
Otherwise, the score might be misleading. 1 user voted 1 star, another 5 and we'll have 2.5 as an average.
But this might not be relevant at all.
UI/UX Tip 💡
You don't have to fill available space. There is no law. Nobody got arrested.
Do not stretch your input to 1500px, especially if it's a zip code 🤦♂️
UI Tip 💡
When you align items vertically, you have two options:
🔸Middle
🔸Baseline
For text items consider using baseline. It looks smoother since your eyes move along the baseline.
Look at the "Mark all as read" label 👇
20 UI/UX Mistakes that KILLS your usability 😵
In no particular order 👇
UI/UX Mistake 💡
Do not hijack default scroll behavior! This is REALLY annoying.
😩
UI/UX Tip 💡
Instead of making a help section, it might be better to try to make the UI self-explanatory.
But if it's not a trivial app, you can integrate tips and hints right into the UI.
Nobody likes to read help docs.
TOP 10 UI/UX Designers to Follow on Youtube.
My own curated list 👇
UI/UX Design Tip 💡
There is a pattern when you have a heading, subheading and a few blocks describing something.
But remember: you don't have to fill the available width. Long lines are hard to read.
UI/UX Tip 💡
Your buttons should have a visual cue that a click was successful.
Otherwise, users might now be sure whether it's clicked or not and try to click many times.
UI/UX Tip 💡
Place high-priority content at the top of the website page.
UI/UX Tip💡
When you send a confirmation code via SMS or push notification, make sure that users can see it without opening it.
I mean, place the code in the first X characters, so that it's visible right away.
UI/UX Tip 💡
Most users don't read sites, they scan them.
Use different visual techniques to make the scan process easier.
- Small copy
- Icons
- Lists
- Images
- Sections
- Spacing
- Interaction/Demos
- Screenshots
- Clear messages, not vague ones
UI/UX Tip 💡
Icons are nice. BUT. Don't overuse them.
You have 30 links in navigation? Most of them represent abstract things?
Don't use them in that case. If they don't help, don't use random icons just for the sake of using icons.
UI Tip 💡
Labels are secondary, content is primary.
Do not make your labels stand out, they are just hints. As well as icons, backgrounds etc.
Focus on the value.
Collection of advanced UI/UX articles for reading on the weekend 🤓
Don't forget to bookmark👇