User Experience Design (UXD or UX) in website design is the way of enhancing user satisfaction by improving the ease of use, availability, and efficiency of user interaction with sites. Here at Insightin Technology, we’ve been considering and applying the best client experience standards in our work.

We would want to share probably the best practices we’ve acquired throughout the years (counting Top Symptoms of Poor UX and Top UX Statistics). Here is our list of 100 Top UX Practices each frontend designer ought to follow:

Flow

1. Consider the site as a red brick road: move your users flawlessly starting with one segment then onto the next by understanding user personas’ objectives and requirements.
2. Customers are more likely to see things close to the top of the page, so as of their importance
3. Steady and simple to use web interfaces assist users with focusing on the substance and move through it
4. Abstain from making dead-end pages on sites. They create confusion and make extra work for customers
5. Utilize common site patterns and interfaces; don’t cause customers to discover some new information

Scrolling

6. Customers will scroll down the website pages as long as simple and clear, relevant data is underneath the fold
7. Your site ought to consistently give a solid visual indication of the direction of scrolling and whether more content is accessible
8. The longer the site pages, the less likely somebody is to scroll down to the bottom
9. Running website pages are pleasant because scrolling is quicker than clicking – simply don’t make the web pages too long

Contrast and Color

10. Design for visually challenged customers. Convert your page design to grayscale to guarantee all users can read significant data
11. Try not to utilize the shading blue for any text on sites other than links
12. Know about the differentiation of mobile sites. Screen glare can render your site unusable
13. Hold one color for CTAs on your site and don’t utilize it for anything else
14. Warm, bright colors come to the front and cold, dim colors remain out of sight

Loading

15. Ensure site users can finish their essential goal rapidly and without any problem
16. What makes a difference the most to customers is that your site needs a quick load
17. The impression of site speed depends on load time, response time, load behavior and perfection of animations
18. Show a skeleton of the site’s components to communicate the format when it is stacking
19. Site text should load before pictures so customers can begin perusing before the rest of the website loads
20. Loading longer than a few seconds will often make customers leave the site

Mobile

21. Mobile interface components are difficult to tap precisely if they’re little or approximate
22. The minimum size for a touch target on mobiles ought to be 1cm x 1cm with appropriate padding
23. Somebody utilizing a pinky finger on your mobile site or application implies that the interface targets are too small
24. When holding a tablet, the sides and base of the screen are most effortlessly reached with the thumb
25. Try not to require vertical swiping for anything other than typical website scrolling
26. Try not to utilize double-taps on the phone device. Ensure users can interact with one-touch
27. Decide if users will utilize devices with one hand or two when planning mobile designs

Navigation

28. Always have a smooth way to get to the navigation menu on your site
29. If your site hierarchy is bigger than 3-4 levels deep, it’s an ideal time to upgrade
30. Think about utilizing sticky menus, particularly on longer website pages or when quick access is required
31. Great site navigation isn’t standing out, it vanishes away from the background
32. Make your navigation steady; it shouldn’t change all through the site
33. Make navigation labels specific, close to 2-3 words and start with the most data-carrying word
34. Let customers know where they are on the site by utilizing breadcrumbs
35. Mobile navigation: Show the foremost regularly used options and shroud the others under a hamburger menu
36. Hamburger menus on desktops are less perceptible, less recognizable, increase interaction cost and lessen data scent
37. For secondary navigation on mobiles, use category landing pages, submenus or in-page menus
38. Menu dropdowns ought to be vertical, not horizontal hover; it is a lot harder to scroll horizontally
39. Megamenus ought to be smaller than the page so it is simple to “click out” of them
40. In the case of utilizing mega menus, arrange links into groups and recognize as clickable and non-clickable items
41. Try not to hide login or search features inside site menus

Forms

42. Adjust form labels and fields in a solitary vertical line to permit for fast scanning
43. Field labels ought to be outside the content field, not inside, so customers don’t lose track of them
44. Split up areas with separators to make long web forms easier to understand
45. Put form errors close to the mistake causing fields on all web structures
46. Error messages ought to be useful, usable, brief and easy to understand
47. Show all error-causing fields without a moment’s delay, close to each problematic field so mobile customers don’t miss the warning

Links

48. Links on sites must stick out – utilize blue text as well as underlining to point hyperlinks
49. Links ought to consistently look like links
50. A user shouldn’t need to tap on a link to make sense of where it leads. The link text should let them know
51. Try not to utilize blue text or underlining for non-linked elements in sites or applications
52. A reference to a full URL anyplace on a site ought to always link to that page
53. Certain elements, for example, product pictures or reviews, are always expected to be interactive
54. Utilize a special color for visited links on sites to diminish users’ memory load

Buttons

55. Buttons on sites must look interactive and have enough space for customers to tap or click comfortably
56. Visit activities on sites or applications ought to be enormous buttons, set in effectively reachable zones
57. Background colors, borders and activity situated labels on a site signal to customers that a component is clickable
58. For flat designs, ensure that action buttons are wiped out shading from an action-oriented label
59. A site ought to have a viewable sign that a button click was effective within 0.1 seconds of the interaction
60. Buttons that change or erase information on mobiles ought to require more effort to click to stop accidental clicking

Search

61. Except if you have a small site with minimal content, always have an inquiry or search field
62. The search field ought to always appear as though a text box on a desktop. The inquiry icon is OK to use for mobile
63. Make the search field simple to discover. Customers typically search for it in the upper right corner
64. When trying to find a search button on sites, customers ordinarily search for a “little box to type in”
65. Search fields on sites ought to be sufficiently wide to see the whole search query

Carousels

66. Avoid carousels: each new slide eradicates the memory of the last slide. Customers can focus on just a single thing at once
67. Dots on carousels are hard to see on mobile sites. Use pictures looking from the left and right
68. Instead of carousel navigation arrows, utilize details labels so customers recognize what’s in store on the following slide
69. Only about 1% of customers click on carousel slides on sites so don’t depend on those clicks
70. Site carousels that slide consequently should change to manual once customers interact with them

Accordions

71. Use accordions to pack lengthy content on mobile sites
72. When utilizing accordions, offer an approach to collapse any uncovered content once the customers have extended it
73. Pros of utilizing accordions on mobile sites: Shorter pages are simpler to use than in-page bounce links
74. Cons of utilizing accordions on mobile sites: Increased interaction cost; out of sight is out of mind

Help and Hints

75. The fundamental purpose of every site page ought to be obvious to the customer
76. Customers are hesitant to utilize Help on your site. Put it in context and supply wizards and FAQs once applicable
77. Show hints on sites and applications in context and just when required
78. Help and guidelines should be short and visually not quite the same as other interface elements
79. Just present one hint at a time on sites and mobile applications. This decreases memory burden

Icons

80. Symbols should visually describe their purpose and function. Make them simple, meaningful and familiar
81. Icons should possibly be utilized when important. Abstain from overusing them and don’t utilize them simply for decoration

Content

82. The most significant data on your website page should always stand out as the most visually prominent
83. Put key data first. Customers start at the upper left and the first 2-3 words are examined the most
84. Spot high-need content at the head of the site page. Use analytics to decide priorities on different devices
85. Use color and size contrast on your site to differentiate essential data from supporting details
86. Priorities, like context, area, and emergency info, are increasingly significant for mobile users
87. Priorities for mobile: Location, telephone number, occasions, emergency data, time-sensitive information and information needed on-the-go
88. Simple, obvious terms are superior to industry jargon or trendy terms for site navigation

Readability

89. Most customers check first and read later. Utilize visual variety and significant content to make checking simpler
90. Readability isn’t just about whether you can read something – it’s additionally about whether you need to read it
91. Utilize increased line spacing between bulleted lists, numbered lists, lines, and sections to increase readability
92. While picking a site text font, think about its intelligibility, readability, loads and styles
93. On mobile sites and applications, consider making a font’s x-height bigger to improve its readability
94. Avoid small fonts on all digital devices, particularly for a long-form copy. Try not to utilize consolidated fonts in the body text
95. Ensure that the content size for headlines on a mobile site is as responsive as the rest of the content
96. Increment font size on mobile sites – always scale font size to the screen size
97. Banner Blindness: customers take effort not to look at anything that likes promoting banners
98. Create long text blocks simpler to read by including just a single thought for each paragraph
99. Italicized text is harder to read, especially for dyslexic readers
100. Try not to USE ALL CAPS IN YOUR HEADLINES AND TAGLINES. It’s too hard to read.