User Experience (or UX) is a well-known term in the context of software development. Its meaning is fairly self-explanatory - but do we understand the technical aspects that go into building truly positive experiences for a variety of users? Let’s take a look at what it means to design and code for a highly effective UX.
We often approach User Experience with a focus on usability and aesthetics. This perspective is not deep enough. We need to also consider interaction design, information architecture, accessibility, and the perception of how pleasant it use the app. The main goal of UX design is to help users reach their goals in a smooth, satisfying, frustration-free manner. The technical side of making this happen is just as crucial as the pretty pictures and well-placed buttons.
You can also download the PDF version of this article in the form of checklist.
App loading speed
Apps and websites should be built in such a way that the most important content gets served to users without delay. This is a survival tactic for a business - users’ attention span is famously short, and there is always the risk that they will get distracted by the competition. Luckily, there are many ways to make sure that users won’t be put off by your app’s loading time.
Firstly, try to avoid unnecessary resources - CSS, JS and other assets should be optimised. This means getting rid of unused assets, cutting graphics down to size (almost no one is going to access your website from a screen on which an image width of 6000px might make a difference), minimizing templates and script files. Next, minimize the number of HTTP(S) requests. If it makes sense for your business, your app’s assets should be stored on servers closest to each user’s locations. One way you can achieve this is by using CDN.
You should also use modern file formats, appropriately compressed, to serve graphics. Always make sure that your linked or embedded assets are available under the indicated URL. Limit the time required to process JS files and free up the main processing thread - consider using lazy loading for optional scripts. Set up your cache policy headers for static assets. As necessary (e.g. to deal with a large user base), use request caching and reverse proxy solutions. But be careful - if you use caching, you need to remember to carefully handle data that’s likely to become outdated quickly. Some data might need to be realtime, such as when you want to give a user access to the current load state of their instance as part of a PaaS solution.
Privacy and security
This aspect of UX is often neglected, and yet its importance is undeniable. For example, it has an effect on your website’s positioning, because it’s usually easy to measure algorithmically. In general, all sites should be served via HTTPS. Many modern browsers, including Google Chrome and Mozilla Firefox, warn users when they enter unprotected sites (via HTTP). This translates into lost traffic, because while your app may be easy to find, users will click away. Additionally, make sure your SSL certificate is up to date - it’s the basis for HTTPS communication.
You can consider using the WebRTC protocol, but only when absolutely necessary. On the other hand, you can never go wrong if you use trusted libraries and scripts in your projects. As for privacy, make sure your users consent to the processing of their data, within the parameters set out in your (coherent and comprehensive!) privacy policy.
Don’t use tracking scripts or pixel tracking if you don’t truly need to, and monitor your libraries for new versions. Keep all project dependencies up-to-date to eliminate potential security gaps (new versions and patches are often released primarily to improve security). Finally, back up data that’s important both to your business and your users.
Accessibility
The term ‘accessibility’ usually brings to mind adjustments made to the interface to help users with visual impairments, motoric impairments or cognitive disorders. This can involve using fonts of appropriate size, ensuring a required level of contrast between a website’s text and background, or keeping interactive elements (such as buttons) comfortably spaced out. You should also make sure to keep in mind color blindness when designing your interface and various graphics.
Accessibility has another side to it, as well - and it has to do with users who have no disabilities, but who are limited through circumstance. For example, they may be using devices with a low resolution, or out in the open, trying to read what’s on their screen despite sunlight beating down on them. They might also be in a location where listening to your app’s audio would be inappropriate.
Some users suffer from certain limitations only some of the time. They may have an injured hand, or not have access to their glasses. Temporary cognitive issues can result from the use of medication, and usually involve stupor or sleepiness. These situations are rarely taken into consideration, which can lead to the alienation of even loyal users, who usually have no problems interacting with your app.
To help these groups of users, declare the language you use in the metadata. Be systematic with your tags and make sure they indicate the goal and character of your content. Tags such as button or label should fit what they represent very closely. A proper tag structure (including a system of H1-H6 headings) is also very important. Adding alternative tags and descriptions for visual media, as well as subtitles or transcriptions for embedded video and audio, can be very helpful to users with sensory impairments.
Finally, make sure your website is mobile friendly by investing in responsive design and progressive experience. Responsive web design (RWD) means adapting your interface to the context of each device it appears on. This can involve resized icons, hiding some options under a drop-down menu, etc. Progressive experiences (or progressive web apps) mean marrying RWD with adaptation efforts to adjust your content to the capabilities and usage contexts of users’ devices. For example, the easiest way for users to offer input in your web app will be typing on their keyboard. On their phones, however, it might make more sense to allow users to send in photos and process those through OCR.
Making a website friendly for crawlers, robots and AI-assistants
You might ask why you would want to be nice to crawlers, robots and AI, and the answer is twofold. First, it can help you improve your SEO. Second, it’s a way to future-proof your app or website. A growing number of apps uses the capabilities of AI tech to process data and to gather data from various sources.
Use structured data to make all relevant information (such as contact information or links to social media profiles) easily available, for example by using Schema.org markers. Validate HTML, CSS and JS files to make sure they are error-free. Ensure that robots and crawlers have access to appropriate data. This includes checking the settings of the robots.txt file and verifying the availability of data during web crawling. For example, find out whether your JS script with an animation doesn’t obscure information that’s important for browsing. As for search result or content categories, make sure your headers indicate canonical URLs.
Conclusions
Many important elements of UX are directly related to the technical side of building apps and websites. To make sure your users will enjoy top experiences, you need a project team with designers and developers working closer together to deliver the highest quality of both design and code.
iRonin.IT’s experts have been building beautiful, effective and user-friendly apps for over a decade.
We’ll help you deliver the level of UX your users deserve.
Let us know what your project needs.
