Wellfire Interactive // Expertise for established Django SaaS applications

Seeing to the Unseen: Performance, Accessibility, & Security in User Experience Design

Running Rabbit, World in Eye, and Lock on Shield

Performance, accessibility, and even security all effect the user experience. Each has a significant effect on the perception of your product, especially when bad planning turns into less-than-desirable results.

In part one of An Introduction to User Experience Toolsets, I discussed tools that you can use in the various phases of your UX project. These tools complimented the core principles of User Experience design: utility and ease of use, information organization, and emotional connection. In addition to these tenets, Wellfire Interactive also considers context, performance, accessibility, and security. While not readily visible to your audience, each can heavily affect the user’s perception of your product. These additional considerations are already familiar and important to you, the developer.

Contextual Awareness

It’s safe to say that in our technological society, your website will not only be seen on a desktop computer but also on mobile devices and laptops, possibly even on TVs and refrigerators. Your end-product will be used in situations and on devices that you can only dream of and barely plan for. Think about how your product might be used in these situations and adjust the interface appropriately. Keep the most important interactions or controls visible and move the least used options to an easily accessible and conspicuous menu. Your users want to have consistency in their options and abilities regardless ofthe device; a few extra clicks won’t cause user consternation. The UX community now knows, through metrics, testing, and interviews, that your website users want the same options and power on their mobile devices as on their desktop. The mobile experience should not be degraded because of the loss of screen real estate.

Plan for Engagement

Your initial project phases plan for your product launch. Everyone is keeping their nose to the grindstone for this moment. However, you’ve got to look beyond the launch and prepare for engagement with your users. Launch is the first step in a long, and hopefully fulfilling, series of growing and adjusting your product to meet users’ needs. Your product’s performance, or how well it operates, is important for your audience engagement.

The lifecycle of a live app must include analytics and continual reviews of metrics. We may think we know exactly who our audience is and how they operate, but our own assumptions and the small user testings that we do are no match for having your product actually out in the wild. If you understand your audience, you understand how to grow and support your product.

No one likes a website that crashes their computer or takes up memory like a 10 ton elephant so that the browser experience is ruined. Users have gotten into the habit of opening multiple tabs in their browser and keeping them open. I currently have 30 tabs open, and while that may say something about my attention span, I’m not far off from the mark of other people. Each open tab uses its own memory and can indirectly affect the performance of other tabs.

Common performance issues can result from both poor planning and development of features (scope creep) unknown at the time. If you prepare for issues to occur, you’ll remain cool under fire when they do. Some issues, such as heavy assets and too much competing Javascript, can be remedied quickly. Others, such as slow or overly complex database queries, will require deep attention and possible refactoring of code. Issues will happen. There may not be anything that you can do about it until browsers and technology can address the issues themselves. Still, consider using a watchful eye, or monitoring service, on your application in order to reduce surprises and to help you address issues as they start.

Don’t leave Accessibility to the Wolves

We can’t think of accessibility in terms of the handicapped alone. This way of thinking fails to recognize international and developing markets and users stuck on older technology. These markets and groups may not be our primary audiences now, but supporting them as your product grows will go a long way. Accessibility is often left to the final phases of a project and only if budget allows. Don’t leave it to the wolves and plan accessibility in parallel with your other phases.

Take a “mobile first” and “progressive enhancement” plan of attack to the project. This ensures that you are addressing accessibility at the very beginning of your project. Plan out design and development with three main touchpoints: plain old semantic HTML (POSH), convenience factors, and interface individuality.

Build first with basic HTML, using what browsers and devices are natively built to handle. The keys to accessibility are already built into these platforms; you just need to go the short extra step to include them. Users on old technology or with spotty international internet connections will be empowered with your product’s use of default HTML actions. Including needless application pieces will weigh down the experience of those most in need of a light touch.

For your interactive JavaScript modules, attach convenience factors, such as keyboard controls, aural cues, etc. Asana’s web app is a wonderful example of keyboard controls in action. Convenience factors will enhance the experience for the power user who consistently uses your product and for the disabled who cannot effectively use a pointer device.

Interface individuality will help set your application apart from others in the same space. You should use accepted solutions shared among similar UX problems, but tweak these to fit your application and brand. Added animations and transitions will both offer a freshness to the interface and, if done conservatively, address a user’s attention and discern available action flow.

Remember to delight in the simple, only adding complexity and flourish as is warranted.

Security always matters

Trust is of utmost importance in life and on the web. Each security breach that happens to major players is trumpeted around the world, resulting in a loss of trust in that company. How many smaller security breaches do we miss? Security is part of the user experience; it instills trust in your product and trust in you.

Built-in security features of your framework and the internet may be all you need and definitely offer a great starting point. Use SSL and HTTPS to transmit sensitive data and use hashes to store it. If you’re using a framework or CMS, check their security features. If they’re lacking, move on.

When in doubt, offload it. Security readiness is tough; many jobs deal with it full-time. When in doubt, or for better peace of mind, look for 3rd-party solutions. Social media login systems are great to use, but remember to know your audience and what systems they are probably familiar with. Google has released an API for use with their two-factor authentication (2fa) system. Don’t attempt to create your own payment gateways use options like Stripe that have great secure support, or host your e-commerce portion on a third-party solution like Shopify.

Pay attention. News organizations and technology blogs are a saving grace and will alert you to the latest threats to the security of your app. Reports on the 2014 Heartbleed vulnerability were quick to publish as well as to inform you on how to combat the issue. Keep your ear to the ground so that there are no big surprises. A loss of security and trust can inflict the most damage to the user experience, and this is something from which its very hard to recover.

Takeaways

Performance, accessibility, and security are UX too. We don’t always think about these unseen pieces as helping to build a full user experience. When they fail, they gain undesirable user attention and deter from the user experience, sometimes with harmful effects that last well beyond the user’s initial perceptions. Solidify your product’s success by incorporating performance, accessibility, and security in your UX project flow.


  1. Progressively enhance the mobile experience within its technological constraints. This should remain a given.
  2. Google, Facebook, Twitter, etc. all have great login systems that you can use for your own product.