2022 Edition UI Design Tips Quick, actionable tips to create be!er user interfaces. Hello! My name is Michal Malewicz Thank you for downloading “UI Design Tips”! The reason for us creating this book was the fact that many inexperienced designers share their tips online - o!en ones that are plain wrong. We wanted to use our 23 years of experience making hundreds of digital products, to provide you tips that are tested in real world scenarios, not copied o" of someone’s instagram like others do. Nearly all of the knowledge within these pages is based on over 500 design projects we completed, ranging from huge banking apps, all the way to pregnancy trackers. We’ve done it all! Now I’m sharing all that experience with you! Me on stage talk ing at industry events We want this book to grow and expand over time. That's why we're open to your suggestions, feedback, and ideas. If you think something is missing, needs an update or an additional explanation - reach out! These tips are tested in our own projects, but if you have a scenario in which one of them doesn’t work - and the research to back it up - share it with us and we’ll be happy to write about it! Watch and learn Many of the tips from this book were also discussed in more detail on video. That allowed me to show you even more examples and give a lot more context on each individual case. If you want to watch the FREE Videos and learn even faster, subscribe to my YouTube channel: YouTube.com/MalewiczHype If you want us to make more of these videos, help us out by sharing the links to them on social media so we can reach more people. Thank you! Let’s begin! Tip 1 hype4academy.com Carousel dots have no context to be interesting for users vs Meet my dogs Our trips Use text tabs that clearly state what's on each carousel slide Tip 2 hype4academy.com Create account Twi!er handle @michalmalewicz Next Avoid using vague actions like OK or Next. vs Create account Twi!er handle @michalmalewicz Create account Your bu!on needs to clearly state what’s going to happen. Tip 3 hype4academy.com Clear browsing history? Are you sure you want to completely remove all your cookies, history and saved websites? This action cannot be undone! Cancel OK Avoid having two action bu!ons look the same. vs Clear browsing history? Are you sure you want to completely remove all your cookies, history and saved websites? This action cannot be undone! Cancel Clear history Clearly show which action is primary and which is secondary. Tip 4 hype4academy.com Important information! This is something you really have to remember to improve the experience of your users! OK Avoid using thin and light fonts in your projects. vs Important information! This is something you really have to remember to improve the experience of your users! OK Regular, Semi-bold and Bold are be!er for readability & accessibility. Tip 5 hype4academy.com Call Message Don't mix !lled icons with outlined ones. vs Call Message All your icons should have the exact same style and form. Tip 6 hype4academy.com Photo uploaded! x x Save changes Avoid bu!ons with too li!le whitespace for labels. x vs Photo uploaded! 2x x Save changes x 2x Safe option is to have at least "x" space from each side. 2x is be!er. Tip 7 hype4academy.com Email * City Password * Create account Avoid red asterisks and se!ing most "elds as required * - required !eld vs Email City (optional) Set the optional forms instead or remove them if you can Password Create account Tip 8 hype4academy.com Create account Email Password First name Last name Don't do this! Avoid multi-column forms whenever you can! vs Create account Email Name Keep your forms one column for easier scanning and readability Password Create account 9 Tip x hype4academy.com Your form Email x First name x Labels shouldn't have the same distance to the previous !eld Last name vs Your form 4-6x Email 2-3x x First name Last name Increase the distance so it's clear which !eld is the label for Tip 10 hype4academy.com Email Name Password Create account Underline !elds take longer to be understood as a form vs Email Name Rectangles with visible borders are instantly understood Password Create account Tip 11 hype4academy.com Your Account Account creation failed. Unknown error 51526c Try again Avoid unclear messaging with deceiving delivery methods vs Your Account Couldn't create account. Email is already used. Log in instead or pick a di!erent email Be clear about what happened and what can be done next Tip 12 hype4academy.com Welcome! Register account Avoid slightly di!erent roundness values close to each other vs Welcome! Register account Our eye likes to travel on a path that’s predictable all around Tip 13 hype4academy.com Your main focus is on Research Design Design skills Wireframes High Fidelity Prototypes Even on desktop, avoid super small click areas vs Your main focus is on Research Design Design skills Wireframes High Fidelity Prototypes Large controls are much easier to use on desktop Tip 14 hype4academy.com Email Enter your email Email Enter your email Password Enter your password Sign in Rounded form !elds have the le"-edge problem vs Email Enter your email Password Enter your password Sign in Some roundness is good, as long as it doesn’t interfere with the edge line 15 Tip 16 12 hype4academy.com Email Enter your email Password Enter your password Sign in 32 The more font sizes, the longer it takes to process the form vs 16 16 Email Enter your email Password Enter your password 32 Sign in Try to di!erentiate the font only between sections and actions Tip 16 hype4academy.com Less than 16pt font Search Cats in hats Smaller label fonts will zoom your screen on mobile vs More than 16pt font Search Dogs on skateboards But if it’s above 16 it will stay the same without distorting the view Tip 17 hype4academy.com Even the most common icons can still be misunderstood Sugar soda 0,33 ml can Add to cart vs Favorite Sugar soda 0,33 ml can Add to cart Use labels when designing for less tech-savvy users Tip 18 hype4academy.com Hey! You’re awesome! Are you sure you want to retweet this tip so more people can see it? 1 2 Retweet Cancel 3 In a le!-to-right reading culture it takes three steps this way vs Hey! You’re awesome! Are you sure you want to retweet this tip so more people can see it? 1 2 Cancel Retweet So if you read le!-to-right place the main action on the right 19 Tip hype4academy.com Hey! You’re awesome! Are you sure you want to retweet this tip so more people can see it, or do you want to save it for later? Retweet 1 3 2 Save for later With the main CTA higher we have to go back to it while scanning vs Hey! You’re awesome! Are you sure you want to retweet this tip so more people can see it, or do you want to save it for later? 1 Save for later 2 Retweet So it’s slighly be!er for the main action to be at the bo!om Tip 20 hype4academy.com Create account Twi!er handle @michalmalewicz Non-rectangular shapes take longer to be understood as bu!ons vs Create account Twi!er handle @michalmalewicz Create account Rectangles or rounded rectangles are always the best choice Tip 21 hype4academy.com Hey! You’re awesome! Are you sure you want to retweet this tip so more people can see it? Retweet Avoid doing links that look like regular unactive text vs Hey! You’re awesome! Are you sure you want to retweet this tip so more people can see it? Retweet An underline makes them instantly recognizable, blue color helps too Tip 22 hype4academy.com Privacy policy By clicking the bu!on below you acknowledge that you’ve read and agreed to our privacy policy and want to create your account. CREATE ACCOUNT Capitalized labels on bu!ons take a li!le longer to read vs Privacy policy By clicking the bu!on below you acknowledge that you’ve read and agreed to our privacy policy and want to create your account. Create account For two-word or longer bu!ons it’s best to go with Title Case Tip 23 hype4academy.com Feedback Are you sure you want to request another feedback round? Cancel Request When aligning bu!ons avoid the safe-area overlap vs Feedback Are you sure you want to request another feedback round? Cancel Request Each bu!on should have the same amount of safe-area around it Tip 24 hype4academy.com App theme Which theme would you like to use? Theme Light Mode Avoid dropdowns if you only have 3-5 options available vs App theme Which theme would you like to use? Light Mode Automatic Dark Mode Automatic One idea is to use Radio bu!on tabs instead Tip 25 hype4academy.com App theme Which theme would you like to use? Theme Light Mode Avoid dropdowns if you only have 3-5 options available vs App theme Which theme would you like to use? Light Mode Automatic Dark Mode You can also use simple, accessible tabs instead Tip 26 hype4academy.com Address City Avoid !elds that don’t give a hint on the entry length Zip Code vs Address City Zip Code _ _ - _ _ _ If you have XX-XXX zip codes, you can specify it by the placeholder too Tip 27 hype4academy.com I agree to the terms & conditions Create account Toggles on the web shouldn’t be used for an action con!rmed with a bu"on vs Display se!ings Dark Mode You can however, use them for actions that take immediate e#ect Tip 28 hype4academy.com I agree to the terms & conditions I agree to the privacy policy I want marketing spam in my inbox! Create account Avoid toggles on the web if there are many close to one another. vs I agree to the terms & conditions I agree to the privacy policy I want marketing spam in my inbox! Create account In a case like this go with simple checkboxes - just big enough ones! Tip 29 hype4academy.com Aesthetics matter If you don’t believe that, please do not accept this prompt I don’t NOT accept Avoid clashing colors, visual chaos and messy design I don’t NOT NOT the above accept vs Aesthetics are important! We naturally perceive well structured visuals as more usable. Good to know! Ge!ing the visuals right will help you sell your idea or design a lot be!er Tip 30 hype4academy.com I agree to the terms & conditions I agree to the privacy policy I want marketing spam in my inbox that we will send you every morning for the next 25 years Create account Don’t align the checkboxes to the vertical center of the entire block vs I agree to the terms & conditions I agree to the privacy policy I want marketing spam in my inbox that we will send you every morning for the next 25 years Create account Always align them to the top or bo!om of the "rst line of text 31 Tip 1 1 1 1 hype4academy.com Twi!er handle @michalmalewicz Password Enter your password Sign in Avoid having the same optical weight in the !elds vs 2 1 2 3 Twi!er handle @michalmalewicz Password Enter your password Sign in Password !elds should have an option to reveal the password Tip 32 hype4academy.com Twi!er handle @michalmalewicz What if the user is unsure what they have wri!en as password? Password ******************** Sign in vs MovingRectangles-61! Twi!er handle @michalmalewicz Password ******************** Sign in Entered data is the most important, then the label, then placeholder Tip 33 hype4academy.com Twi!er handle @michalmalewicz Password ******************** Password needs to include special characters! Create account Avoid showing required password characters a!er clicking the bu"on vs Twi!er handle @michalmalewicz Password ******************** More than 8 characters Include special characters Create account Guide them through the required password structure as they type Tip 34 hype4academy.com We solve your problem But please make sure you notice our HUGE bu!on! Huge bu!ons can cause the “banner blindness” e"ect. CLICK ME NOW vs Solving problems before you blink The best problem solving solution your problems ever encountered! Tell me more Make sure your bu!ons are in the sweet-spot range. Tip Information 35 hype4academy.com Solving problems before you blink The best problem solving solution your problems ever encountered! Action Classic scenario in which our eyes go from information to action Tell me more vs Information Solving problems before you blink The best problem solving solution your problems ever encountered! Action Tell me more Reinforcement The arrow reinforces the action and makes the desire to click higher Tip Information 36 hype4academy.com But if you’re not as tech-savvy There are some color variants when the arrow doesn’t work The arrow can actually be quite confusing for you Action Tell me more Failed reinforcement vs Information So always test your designs Because what works most of the time can be an outlier in your project Action Tell me more And there are some audiences that may be confused by it too Tip 37 hype4academy.com Country Guatemala Guinea Guyana Long lists can be pre!y tiring to scroll through even when alphabetical Haiti Honduras Hungary Iceland India vs Country Gu Guatemala Guinea Guinea - Bissou For long dropdowns add a "lter box to the top so people can type Tip 38 hype4academy.com Eco, Fair Trade Avocado 3-pack $9.99 Avoid empty screens with spinners for loading lists vs Eco, Fair Trade Avocado 3-pack $9.99 All content types easy to predict should have a skeleton screen Tip 39 hype4academy.com Extra toppings 1 2 Onions 3 Habaneros 4 Olives Mushrooms Avoid multi-column checkbox lists - our eyes jump all over them vs Extra toppings Onions Olives Habaneros Mushrooms The classic one-column view allows for an easy scan along the le! edge Tip 40 hype4academy.com Name City Height Michal Sopot 194 Anthony Zakopane 177 Side scrolling tables on mobile are most o!en a bad idea vs Michal Sopot 194 85 Name Height City Weight Anthony Zakopane 177 79 Name Height City Weight If your table has 6 or less columns always go for a “cell-view” instead Tip 41 hype4academy.com Company Date MyDesign 2001.07.07 Earnings Pro!t $1500 $392 Taxes Costs $1000 $108 Y2Y gain % Growth $1000 117% But if your table is very long (!nance, pro data) avoid cells vs Company Date Earnings 3ME designs 2001.07.07 $1500 $392 SuperFirm 2001.06.05 $1200 $415 DribbbleCopy 2001.06.05 $926 $225 CopyMachine 2001.06.05 $670 $115 Pro In that case allow the users to scroll but keep the labels always visible. Tip 42 hype4academy.com Company Earnings 3ME designs $1500 SuperFirm $1200 DribbbleCopy $926 CopyMachine $670 InstagramInspo $15 Avoid centered content in tables, but also avoid le!-aligned numbers vs Company Earnings 3ME designs $1500 SuperFirm $1200 DribbbleCopy $926 CopyMachine $670 InstagramInspo $15 Most text should be le! aligned, while numbers should be right aligned 43 Tip hype4academy.com Company Earnings 3ME Designs $1500 Employees Clients 2 2 Avoid pu!ing emphasis on the labels in cell views vs Company Earnings 3ME Designs $1500 Employees Clients 2 2 Always emphasize what’s important which is the actual data Tip 44 hype4academy.com Company Earnings 3ME Designs $1500 Employees Clients 2 2 Centered !elds and labels in cells create a chaotic path for our eyes vs Company Earnings 3ME Designs $1500 Employees Clients 2 2 When data is all le" aligned it creates a very nice F-pa#ern that’s easy to follow Tip 45 hype4academy.com No reservations. When there’s no data to show, avoid showing an empty screen vs No Reservations Sorry, we couldn’t !nd any active reservations on your account. You can create one right now! Reserve a spot Instead you can spark user action by guiding the user to take it from there Tip 46 hype4academy.com When there’s no data to show, avoid showing an empty screen No reservations. vs No Reservations Quick book one of these lessons Basic 2 hours Advanced 1 hour Pro 1 hour $100 $249 $449 Quick book a lesson See the full list You can also suggest some popular action to take right away Tip 47 hype4academy.com Hi! I’m a popup! Sign up to something and stu!! Popups are annoying enough, so avoid having the super small X vs Hello I know I can be annoying but at least you can close me quite easily. A big X with a lot of clickable space around it will make the users happy 48 Tip hype4academy.com 1 Hi! I’m a popup! Sign up to something and stu!! If the space around the small x is the only way to close it, you’re in trouble vs 1 Hello I know I can be annoying but at least you can close me quite easily. 2 Thanks, go away! 3 There’s nothing wrong with having all three closing options available 49 Tip hype4academy.com Super thin lines in line graphs make them hard to read $ Time vs $10K $1K M T W T F S S The data is the most important so make the line thicker! Tip 50 hype4academy.com $20K $10K Avoid showing empty space on the Y axis $1K M T W T F S S vs $10K $1K M T W T F S S Simply shrink the scale to !t the data with a li"le bit extra room above Tip 51 hype4academy.com $10K $9355 $1K M T W T F S S Avoid cramped, hard to read and ugly tooltips vs $10K $9355 $1K M T W T F S S The data should be big, with enough whitespace so it serves its purpose Tip 52 hype4academy.com Passenger 1 Passenger 2 Form invalid Create account While using accordions and validation in a form avoid hiding invalid !elds vs Passenger 1 Q Passenger 2 ! Name Please enter passenger’s name City Sopot Create account It’s always best to show both the good !elds and the invalid !elds right away Tip 53 hype4academy.com Step 1 Step 2 Step 3 State City Vague step names don’t give enough context of the process NEXT vs Click to go back Basic info Location Password State City Save location Name all the steps accordingly and make previous ones clickable Tip 54 hype4academy.com Twi!er handle @michalmalewicz | City Sopot Profession Product Designer Privacy se!ing Stay anonymous Sell your data With many di!erent kind of "elds and no focus the user can get lost Create account vs Twi!er handle @michalmalewicz | City Sopot Profession Product Designer Privacy se!ing Stay anonymous Sell your data Create account Try to "nd a way to highlight the currently selected (focused) "eld Tip 55 hype4academy.com Username is your user name ? Username michalmalewicz Password ? ******************** Sign in Avoid stating the obvious, especially with tooltips vs Username michalmalewicz Password ******************** Sign in Obvious !elds don’t need explanation, and when they do add it right below Tip 56 hype4academy.com ? Password must be 8 characters or more and contain special michalmalewicz characters or numbers Username Password ? ******************** Sign in Important information should not be hidden under a tooltip vs Username michalmalewicz Password ******************** More than 8 characters Include special characters or numbers Sign in It’s always best to show the important guidelines right away Tip 57 hype4academy.com Country Guatemala Guinea Guyana Haiti Don’t force the user to search through the whole list of options Honduras Hungary Iceland India vs Country Guatemala United States Most popular choice Haiti Honduras Hungary Iceland India Show the most popular choices at the top of the options list Tip 58 hype4academy.com Company Earnings 3ME designs $1500 SuperFirm $1200 DribbbleCopy $926 CopyMachine $670 Sort by Ascending Descending Avoid using icons or di!cult words for sorting vs Company Earnings 3ME designs $1500 SuperFirm $1200 DribbbleCopy $926 CopyMachine $670 Sort by Lowest !rst Highest !rst Instead go with the simplest possible language 59 Tip hype4academy.com Years of experience 0 7 Guessing which number is selected on a slider is a bad idea vs Years of experience 5 0 7 One option is to create an indicator right above the choice 60 Tip hype4academy.com Years of experience 0 7 Guessing which number is selected on a slider is a bad idea vs Years of experience 0 7 5 You can also create a text-!eld next to the slider to make it even easier 60 Tip hype4academy.com Years of experience 0 7 Guessing which number is selected on a slider is a bad idea vs Years of experience 0 7 5 You can also create a text-!eld next to the slider to make it even easier 61 Tip hype4academy.com Years of experience 0 7 Range sliders shouldn’t be all one color and should have a visible value vs Years of experience 2 0 5 7 You can use a di!erent color for the selected range & show the value too Tip 62 hype4academy.com Username michalmalewicz Password ******************** Sign in Inner shadows can make the card hierarchy less readable vs Username michalmalewicz Password ******************** Sign in But they do work in some form components like text-!elds Tip 63 hype4academy.com Username michalmalewicz Password ******************** Sign in No account? Register! Only the most important bu!on should have a strong color and shadow vs Username michalmalewicz Password ******************** Sign in No account? Register! It’s best to have the secondary bu!ons visibly “less important” Tip 64 hype4academy.com Design Tips Design tips are not enough to REALLY get good at design vs Daily Practice Day 1 Start Practice What you need to do instead is to practice design every single day! 2022 Update Tip 65 hype4academy.com Eight Floor Eleventh Floor Fi!h Floor First Floor Sorting lists the wrong way can be catastrophic Fourteenth Floor Fourth Floor Ninth Floor Second Floor vs Pick the !oor 1 2 3 4 5 6 7 Always plan for the best way to display data Tip 66 hype4academy.com ! Extra toppings Onions Round checkboxes look too similar to radio-bu!ons! Habaneros Olives Mushrooms vs ! Extra toppings Onions Habaneros Olives Mushrooms Checkboxes should always be “boxes”! Tip 67 hype4academy.com Aesthetics are important! We naturally perceive well structured visuals as more usable. This is how you set the hierarchy! Show next tip Don't show tips on startup The bigger distance separates larger groups People buy with their eyes We are naturally more interested in things that are aesthetically pleasing. Show next tip Don't show tips on startup The smaller distance separates groups within a group Tip 68 hype4academy.com Eight Floor Invite designers Eleventh Floor Mary North Fi!h Floor Product Designer First Floor Fourteenth FloorAdam West Avoid darker objects as top-layers in dark mode. UX Designer Fourth Floor Ninth Floor Send invites 1 Second Floor vs Pick the !oor Invite designers 1 2 Mary North Product Designer 3 4 Anything that’s closer to the user should be lighter to show depth. Adam West UX Designer 5 6 7 Send invites 1 Tip 69 hype4academy.com Invite designers Mary North Product Designer Avoid using pure grey colors as backgrounds Adam West UX Designer Send invites #515151 1 #1B87EA vs Invite designers Mary North Product Designer Add a hint of your primary color to the greys! Adam West UX Designer Send invites #494C5D 1 #1B87EA Tip 70 hype4academy.com Mary North Product Designer Adam West Avoid thin and light fonts in your projects UX Designer Send invites 1 vs Invite designers Mary North Product Designer Use regular and up for be!er readability and less ghosting Adam West UX Designer Send invites 1 Thank you! hype4academy.com Thanks for ge!ing this far! We hope these tips will help you become a be!er designer, but of course what’s most important is to practice it daily. If you want to learn more from us you can Follow @michalmalewicz on Twi!er For regular design tips and freebies Subscribe on YouTube For dozens of tutorials, industry trends and more! Join the Hype4.Academy For best in class ebooks and courses for designers and developers including a free, weekly newsle!er! Learn more hype4academy.com If you want to learn more about design, check our university acclaimed ebook. 25% o! with the code TipsAreNotEnough Our eBooks and courses 1/7 JJJJJ (4.98) Designing User Interfaces Bestseller! The most comprehensive and biggest eBook about UI, coming from +25 years of experience from Product Design professionals. Learn UI from scratch! JJJJJ (4.99) 1/7 Frontend Unicorn Discover how to learn, and what skills are essential to grow as a developer. Master the tools and methods, and you’ll feel con!dent in both small and large scale projects. 1/7 JJJJJ (4.95) UI in Mobile Apps: 2-part Video Course Bestseller! Learn how to design Mobile Apps from scratch in form of two separate Video Courses: Part 1: The Complete Guide to UI in Mobile Apps, and Part 2: Going High Fidelity. Get it at 125 Our eBooks and courses 1/7 JJJJJ (5.00) Create Case Studies from UI projects Bestseller! Reverse-engineer a full UX case study from just a couple of UI projects you’ve created for your portfolio. Includes user research, market research, competitive analysis, personas, lo-! prototypes, mini-usability testing and more! JJJJJ (4.99) 1/7 How to present your work Learn how to create mockups, decorate your presentations, show low-!delity wireframes with style, visualise data and charts. The best way to make your work stand out! Get it at 126 Are you a designer that expands knowledge constantly? Are you searching for a place to learn new stu!? Maybe you’re in the beginning of your designer journey, or you don’t know how to start? is a modern and friendly online educational platform created by the professional designers for designers, that o!ers both free and paid knowledge in a form of ebooks, video courses and more!
