Always Alert the User that Content Is Loading
Ajax loads in the background, so it’s completely invisible to users. Some design elements silently load content without telling the user, but you should always display the “wait” signal when loading a page’s main content. Most third-party Ajax libraries include the animated “wait” icon that most users recognize. You should always show this animated image because loading Ajax does not trigger the browser’s “loading” icon in the browser’s tab. If you don’t display a message that content is loading, the user might think your pages are broken.
Always Load Third-Party Content Using an API
Users don’t like redirections without any notice. Google even penalizes sites for “sneaky redirects.” Don’t use Ajax to silently pull content from a server and then redirect to another page with no warning. Always tell the user that he is being redirected to another page first, and then give the user the option to cancel the redirection. Anything that hijacks the browser and forces the user to load pages or content is a bad user experience.
Heavily Test Ajax Pages
Don’t Hijack the Browser’s Back Button
Add Error Handling to Your Code
Error handling is a coding technique that lets you gracefully handle errors instead of throwing users an ugly server page. For instance, a standard general coding error produces a 500 server error. When the web server detects this error, a general error page is returned that gives users no option except to hit the browser’s back button. Use proper Ajax error handling to display a more customized error for your site and give the user options to send feedback, alert you to the error and continue navigation of your site. Errors are frustrating for users, so it’s important that you give them the ability to navigate through errors without getting trapped on a page with no options.
Use Responsive Techniques Even for Ajax
Web developers know to use responsive web designs when they implement basic content pages, but don’t forget to implement responsive pages when using Ajax. Ajax makes an asynchronous call to the web server, which is much slower on mobile devices because of bandwidth limitations. You might need to find a workaround for Ajax-heavy websites that pull large data sets from a database server. When designing your code for public access, make sure you make Ajax calls that return minimal data sets and streamline them for slower bandwidth speeds.
These eight tips help you streamline Ajax and make your site user friendly. Ajax is a great way to improve performance and usability for your site, but it must be used correctly or it can do more harm than good. Whenever you implement new code or interface elements, always design your code with the user in mind to make the best site for users and search engines.