User Experience Design (UXD or UX) in web design is the process of enhancing user satisfaction by improving the usability, accessibility, and efficiency of user interaction with websites. Here at Intechnic, we’ve been studying and applying the best user experience principles in our work. Earlier this year I became the 9th person in the world to earn the prestigious Master of UX Certification from Nielsen Norman Group – the world’s authority on UX design. I would like to share some of the best practices I’ve acquired over the years. Here is my list of 100 Top UX Practices every web designer should follow:
Flow
1. Think of the website as a yellow brick road: move users seamlessly from one section to the next by understanding user personas’ goals and needs Click to Tweet
2. Users are more likely to notice items near the top of the page, in order of their importance Click to Tweet
3. Consistent and easy-to-use web interfaces help users concentrate on the content and move through it Click to Tweet
4. Avoid creating dead end pages on websites. They cause confusion and create additional work for users Click to Tweet
5. Use common website patterns and interfaces; don’t make users learn something new Click to Tweet
100 UX Design Pro Tips from a User Experience Master
Scrolling
6. Users will scroll down the webpage as long as it is clear that additional, relevant information is below the fold Click to Tweet
7. Your website should always provide a strong visual indication of the direction of scrolling and whether more content is available Click to Tweet
8. The longer the website page, the less likely someone is to scroll down to the bottom Click to Tweet
9. Running webpages are nice because scrolling is faster than clicking – just don’t make the pages too long Click to Tweet
100 UX Design Pro Tips from a User Experience Master
Contrast & Color
10. Design for color blind users. Convert your designs to grayscale to ensure all users can read important info Click to Tweet
11. Don’t use the color blue for any text on websites other than links Click to Tweet
12. Be aware of the contrast on mobile websites. Screen glare can render your website unusable Click to Tweet
13. Reserve one color for CTAs on your website and don’t use it for anything else Click to Tweet
14. Warm, bright colors come forward and cold, dark colors stay in the background Click to Tweet
100 UX Design Pro Tips from a User Experience Master
Loading
15. Make sure website users can complete their primary goal quickly and easily Click to Tweet
16. What matters the most to users is that your website feels fast (even if it is just their perception) Click to Tweet
17. Perception of website speed is based on load time, load behavior, waiting times and smoothness of animations Click to Tweet
18. Show a skeleton of the website’s elements to communicate the layout when it is loading Click to Tweet
19. Website text should load before images so users can start reading before the rest of the site loads Click to Tweet
20. Delays longer than several seconds will often make users leave the website Click to Tweet
100 UX Design Pro Tips from a User Experience Master
Mobile
21. Mobile interface elements are hard to tap accurately if they are small or close together Click to Tweet
22. The minimum size for a touch target on mobiles should be 1cm x 1cm with proper padding Click to Tweet
23. Someone using a pinky finger on your mobile website or app means that the interface targets are too small Click to Tweet
24. When holding a tablet, the sides and bottom of the screen are most easily reached with the thumb Click to Tweet
25. Don’t require vertical swiping for anything other than normal webpage scrolling Click to Tweet
26. Don’t use double-taps on mobile devices. Make sure users can interact with a single touch Click to Tweet
27. Determine whether users will use devices with one hand or two when designing mobile layouts Click to Tweet
100 UX Design Pro Tips from a User Experience Master
Navigation
28. Always have an obvious way to access the navigation menu on your website Click to Tweet
29. If your website hierarchy is greater than 3-4 levels deep, it’s time to redesign Click to Tweet
30. Consider using sticky menus, especially on longer webpages or when quick access is needed Click to Tweet
31. Good website navigation is not in the way, it disappears into the background Click to Tweet
32. Make your navigation consistent; it shouldn’t change throughout the website Click to Tweet
33. Make navigation labels specific, no more than 2-3 words and start with the most information carrying word Click to Tweet
34. Let users know where they are on the website by using breadcrumbs Click to Tweet
35. Mobile navigation: Show the most frequently used options and hide the others under a hamburger menu Click to Tweet
36. Hamburger menus on desktops are less noticeable, less familiar, increase interaction cost and diminish information scent Click to Tweet
37. For secondary navigation on mobiles, use category landing pages, submenus or in-page menus Click to Tweet
38. Menu dropdowns should be vertical, not horizontal hover; it is much harder to scroll horizontally Click to Tweet
39. Megamenus should be narrower than the page so it is easy to “click out” of them Click to Tweet
40. If using megamenus, organize links into groups and distinguish between clickable and non-clickable items Click to Tweet
41. Don’t hide login or search features inside website menus Click to Tweet
