100 tips for a better user experience

User experience design aims to ensure user satisfaction by improving the usability, accessibility, and efficiency of user interaction with websites. These tips can help to create a more user-friendly web design.

1. flow

Think of the website as a chessboard: move users seamlessly from one section to the next by understanding the goals and needs of the personas.

2. users are more likely to notice elements at the top of the page that are positioned according to importance.

3. consistent web interfaces help users focus on and move through the content.

4. avoid creating dead end pages on websites. They cause confusion and create additional work for users.

5. use common website patterns and interfaces; don’t make users learn something new all the time.

6. users scroll down the web page as long as it is clear that additional, relevant information is below the fold.

7. your website should include a strong visual cue about the direction of scrolling and whether more content is available.

8. the longer the website page is, the less likely it is that someone will scroll down.

9. running web pages are nice because scrolling is faster than clicking – but don’t make the pages too long.

2. contrast & color

10. design for people with color weaknesses. Convert your designs to grayscale to ensure that all users can read important information.

11. do not use the color blue for text on websites except links.

12. pay attention to the contrast on mobile websites. Screen overlays can render your website unusable.

13. reserve one color for call-to-actions on your website and do not use it for anything else.

14. warm, bright colors come to the front and cold, dark colors stay in the background.

3. store

Make sure that website users can reach their main goal quickly and easily.

16. it is important for users that your website feels fast (even if it is only their subjective perception).

17. perception of website speed is based on loading time, loading behavior, waiting time and animation rendering.

18. briskly show a site page structure to communicate the layout as it loads.

Website text should load before images so that users can start reading before the rest of the website loads.

20. delays of more than a few seconds often cause users to leave the website.

4. mobile

21. mobile surface elements are difficult to detect if they are small or closely spaced.

22. the minimum size for a touch target on cell phones should be 1 cm x 1 cm.

23. if the little finger has to be used to navigate your mobile website or app, the click area is too small.

24. when holding a tablet, the sides and the lower part of the screen are easiest to reach with the thumb.

25. you don’t need vertical browsing for anything other than normal scrolling on web pages.

Do not use double-clicks on mobile devices. Ensure that users can interact with a single touch.

Determine whether users will use one-handed or two-handed devices when designing mobile layouts.

5. navigation

28. always show an obvious way to access the navigation menu on your website.

29. if your website hierarchy is more than 3-4 levels deep, it’s time to redesign the information hierarchy or design.

30. consider using sticky menus, especially on longer web pages or when quick access is required.

31. good navigation on the website does not get in the way, it disappears in the background.

32. make your navigation consistent; it should not change throughout the website.

33. make navigation points specific, no more than 2-3 words and start with the most information that carries the word.

34. let users know where they are on the website by using breadcrumbs (breadcrumb navigation).

35. mobile navigation: show the most frequently used options and hide the others under a hamburger menu.

36. hamburger menus on desktops are less noticeable, less familiar, and increase interaction costs.

37. for secondary navigation on mobile, use category landing pages, submenus or in-page menus.

38. dropdown menus should float vertically, not horizontally; it’s much harder to scroll horizontally.

39. megamenus should be narrower than the page, so that it is easy to “click” out of them.

40. when using Megamenus, organize links into groups and distinguish between clickable and non-clickable items.

41. do not hide login or search functions in the website menus.

6. forms

Align form labels and fields in a single vertical line for fast scanning.

43. field labels should be outside the text field, not inside, so that users do not lose sight of them.

Divide sections with separators to make long web forms more user-friendly.

45. put form errors next to the fields causing errors in all web forms.

46. error messages should be helpful, useful, concise and easy to understand.

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

7. links

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

49. links should always look like links.

50. a user should not have to click on a link to find out where it leads. The link text should tell them what is behind it.

51. do not use blue text or underlining for unlinked items in websites or applications.

50. a user should not have to click on a link to find out where it leads. The link text should tell them.

Do not use blue text or underlining for unlinked items in websites or applications.

52. a reference to a full URL anywhere on a website should always point to that page.

53. certain elements, such as product images or reviews, are expected to be clickable.

Use a different color for visited links on websites to improve user orientation.

8. buttons

Buttons on websites must look clickable and have enough space for users to click or type comfortably.

56. frequent actions on websites or apps should be large buttons located in easily accessible sections.

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

58. in flat designs, make sure that the action buttons are in a high-contrast color with an action-oriented label.

59. a website should have a visual indication that a keystroke was successful within 0.1 seconds of interaction.

60. buttons that change or delete data on cell phones should require more effort to prevent accidental tapping.

9. search

61. if you have a website with a lot of content, you always need a search box.

62. the search box should always look like a text box on a desktop. The search icon is suitable for use on cell phones.

63. the search box should be easy to find. Users usually look for it in the upper right corner.

64. when searching for a search on websites, users usually look for a “small box to type in”.

65. search boxes on websites should be wide enough to see the entire search query.

10. carousels and sliders

66. avoid carousels: Each new slide erases the memory of the previous slide. Users can focus on one thing at a time.

67. points on carousels are difficult to see on mobile websites. Instead, use images that navigate from left and right.

68 Use descriptive labels instead of carousel navigation arrows so users know what to expect on the next slide.

69. only about 1% of users click on carousels on websites, so don’t rely on these clicks.

70. website carousels that are moved automatically should switch to manual as soon as users interact with them.

11. accordions

Use accordions or toggles to compress long content on mobile websites.

72. when using accordions, provide a way to compress all exposed content after the user*s expanded it.

73. advantages of using accordions on mobile websites: Shorter pages are easier to use than jump links on the page.

74. disadvantages of using accordions on mobile websites: Increased interaction costs – and: out of sight out of mind.

12. help and hints

The main purpose of any website should be obvious to the user.

76. users are reluctant to use the help on your website. Put it in context and provide wizards and FAQs where appropriate.

Show references to websites and apps in context and only when needed.

78. help and instructions should be short and visually different from other interface elements.

Present only one clue at a time on websites and mobile apps. This reduces the memory requirement.

13. icons

80. icons must visually describe their function and purpose. Make it simple, familiar and meaningful. Most users understand only a few icons.

81. icons should be used only when necessary. Avoid overuse and do not use them only for decoration.

14. content

82. the most important information on your website should always stand out as the most visually prominent.

83. put important information in the foreground. Users start at the top left and the first 2-3 words are scanned most often.

84. place high priority content at the top of the web page. Use analytics to determine priorities on different devices.

85. use color and size contrast on your website to distinguish primary information from supporting details.

86. priorities such as context, location and emergency information are more important for mobile users.

87. priorities for mobile devices: location, events, phone number, emergency information, time-critical information, and information needed on the go.

88. simple, obvious terms are better than industry jargon or trendy terms for navigating websites.

15. readability

Most users scan first and read later. Use visual variety and meaningful text to facilitate scanning.

90. Readability is not just about whether you can read something – it’s also about whether you want to read it.

91. use larger line spacing between articulated lists, numbered lists, lines, and paragraphs to improve readability.

92. when choosing a website font, consider its readability, legibility, weight, and style.

On mobile websites and apps, consider increasing the x-height of a font to improve its readability.

94. avoid small fonts on all devices, especially long copy. Do not use condensed fonts in body text.

95. make sure that the text size for headlines on a mobile site is as responsive as the rest of the content.

96. increase the font size on mobile websites – always scale the font size to fit the screen size.

97. banner blindness: users try not to look at anything that looks like advertising banners.

98. make long blocks of text easier to read by including only one idea per paragraph.

99. italics are more difficult to read, especially for readers with dyslexia.

100. do not use all capital letters in your transcriptions and taglines. It’s much harder to read.