Top 100 UX Design Tips from a User Experience Master

by in UX

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

100 UX Design Pro Tips from a User Experience Master

Forms

42. Align form labels and fields in a single vertical line to allow for fast scanning Click to Tweet

43. Field labels should be outside the text field, not inside, so users do not lose track of
them Click to Tweet

44. Split up sections with separators to make long web forms more user-friendly Click to Tweet

45. Put form errors next to the error-causing fields on all web forms Click to Tweet

46. Error messages should be helpful, usable, concise and easy to understand Click to Tweet

47. Show all error-causing fields at once, next to each problematic field so mobile users don’t miss the warning Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Links

48. Links on websites must stand out – use blue text and/or underlining to indicate
hyperlinks Click to Tweet

49. Links should always look like links Click to Tweet

50. A user shouldn’t have to click on a link to figure out where it leads. The link text should tell them Click to Tweet

51. Don’t use blue text or underlining for non-linked elements in websites or apps Click to Tweet

52. A reference to a full URL anywhere on a website should always link to that page Click to Tweet

53. Certain elements, such as product images or reviews, are always expected to be
clickable Click to Tweet

54. Use a different color for visited links on websites to reduce users’ memory load Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Buttons

55. Buttons on websites must look clickable and have enough space for users to click or tap comfortably Click to Tweet

56. Frequent actions on websites or apps should be large buttons, placed in easily reachable zones Click to Tweet

57. Background colors, borders and action-oriented labels on a website signal to users that an element is clickable Click to Tweet

58. For flat designs, make sure that action buttons are done in a contrasting color with an action-oriented label Click to Tweet

59. A website should have a visual cue that a button click was successful within 0.1 seconds of the interaction Click to Tweet

60. Buttons that change or delete data on mobiles should require more effort to tap to prevent accidental tapping Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Search

61. Unless you have a very small website with little content, always have a search field Click to Tweet

62. The search field should always look like a text box on a desktop. The search icon is OK to use for mobile Click to Tweet

63. Make the search field easy to find. Users typically look for it in the top right corner Click to Tweet

64. When looking for search on websites, users typically look for a “little box to type in” Click to Tweet

65. Search fields on websites should be wide enough to see the entire search query Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Carousels

66. Avoid carousels: each new slide erases the memory of the previous slide. Users can focus on only one thing at a time Click to Tweet

67. Dots on carousels are difficult to see on mobile websites. Use images peeking from the left and right instead Click to Tweet

68. Instead of carousel navigation arrows, use descriptive labels so users know what to expect on the next slide Click to Tweet

69. Only about 1% of users click on carousel slides on websites so don’t rely on those clicks Click to Tweet

70. Website carousels that slide automatically should switch to manual once users interact with them Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Accordions

71. Use accordions to compress lengthy content on mobile websites Click to Tweet

72. When using accordions, offer a way to collapse any exposed content once the user has expanded it Click to Tweet

73. Pros of using accordions on mobile websites: Shorter pages are easier to use than in-page jump links Click to Tweet

74. Cons of using accordions on mobile websites: Increased interaction cost; out of sight is out of mind Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Help and Hints

75. The main purpose of each webpage should be obvious to the user Click to Tweet

76. Users are reluctant to use Help on your website . Put it in context and offer wizards and FAQs when appropriate Click to Tweet

77. Display hints on websites and apps in context and only when needed Click to Tweet

78. Help and instructions should be short and visually different from other interface
elements Click to Tweet

79. Only present one hint at a time on websites and mobile apps. This reduces memory burden Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Icons

80. Icons must visually describe their function and purpose. Make them simple, familiar and meaningful Click to Tweet

81. Icons should only be used when necessary. Avoid overusing them and do not use them simply for decoration Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Content

82. The most important information on your webpage should always stand out as the most visually prominent Click to Tweet

83. Put key information first. Users start at the top left and the first 2-3 words are scanned the most Click to Tweet

84. Place high-priority content at the top of the website page. Use analytics to determine priorities on different devices Click to Tweet

85. Use color and size contrast on your website to differentiate primary information from supporting details Click to Tweet

86. Priorities, such as context, location, and emergency information, are more important for mobile users Click to Tweet

87. Priorities for mobile: Location, events, phone number, emergency info, time-sensitive info and info needed on-the-go Click to Tweet

88. Simple, obvious terms are better than industry jargon or trendy terms for website navigation Click to Tweet

100 UX Design Pro Tips from a User Experience Master

Readability

89. Most users scan first and read later. Use visual variety and meaningful text to make scanning easier Click to Tweet

90. Readability isn’t just about whether you can read something – it’s also about whether you want to read it Click to Tweet

91. Use increased line spacing between bulleted lists, numbered lists, lines and paragraphs to increase readability Click to Tweet

92. When choosing a website font, consider its legibility, readability, weights and styles Click to Tweet

93. On mobile websites and apps, consider making a font’s x-height larger to improve its readability Click to Tweet

94. Avoid small fonts on all devices, especially for long form copy. Do not use condensed fonts in body text Click to Tweet

100 UX Design Pro Tips from a User Experience Master

95. Make sure that the text size for headlines on a mobile website is as responsive as the rest of the content Click to Tweet

96. Increase font size on mobile websites – always scale font size to the screen size Click to Tweet

97. Banner Blindness: users take effort not to look at anything that looks like advertising banners Click to Tweet

98. Make long text blocks easier to read by including only one idea per paragraph Click to Tweet

99. Italicized text is harder to read, especially for dyslexic readers Click to Tweet

100. DO NOT USE ALL CAPS IN YOUR HEADLINES AND TAGLINES. It’s much harder to
read Click to Tweet

Free eBook   Strategy Grader  How good is your website strategy? Find out...  GET MY SCORE