Imagine typing “Mac Pro expensive stand” into your search engine. You click on the top result, expecting to be taken to a relevant article. Instead, you’re redirected to a clunky landing page littered with ads and shameless self-promotion.
But wait, you don’t have to imagine. Remember this?
The notorious interstitial that once graced the screens of everyone who visited Forbes was the hallmark of bad UX design. It unnecessarily added load time, clicks, and extraneous layers to the reader’s experience. When designing and developing web pages and web/mobile apps, these are mistakes that you want to avoid. As a software developer, I try my best to tackle business problems by implementing software features with the user in mind.
Why are design and functionality important?
For mobile apps, 75% of users leave and never return after the first day. For web pages, the average user leaves within 10 to 20 seconds. These high abandonment rates are often directly tied to poor design and functionality. If your app isn’t secure, widely accessible, or intuitive to use, it will be difficult to convince users that your app is worth their time.
Most important considerations in web and mobile applications
If navigating through your app feels like a dogfight, then it needs some patchwork. Luckily for you, I’ve curated a list of features that will streamline the experience you relay to your users.
Ease of use
Even if your app is targeted at a very niche market, there’s bound to be diversity within your user base. You should make every effort possible to address this diversity, and make your apps as accessible as possible.
Accessibility needs
Design and development should always happen with accessibility in mind because more than one billion people worldwide live with some form of disability. To underscore its importance, I want to emphasize that accessibility isn’t simply a feature. It is an integral part of the design and development process, and should never be brushed aside as an add-on. For a deeper dive into accessibility design, check out our blog here. Otherwise, here are some important accessibility considerations to keep in mind when designing your web or mobile app.
1. Colour
Try to limit the size of your colour palette to avoid running into colour schemes that are confusing to colour blind users (don’t use red/green, light green/yellow, blue/purple). If you have to use more colours, try incorporating patterns and textures into your design to show contrast. Because colour blindness affects everyone differently, it’s always a good idea to include non-colour visual cues such as icons and descriptive text so that you aren’t relying on colour alone to convey your design. A simple example is underlining in addition to changing font colour to blue when text is hyperlinked. Lastly, make sure that there is enough colour contrast between your text and background. The rule of thumb is a minimum contrast ratio of 4.5 to 1 for font size 24px regular or 19px bold. For anything larger, a 3 to 1 contrast ratio will suffice.
2. Navigation
It’s important to remember that visual impairment isn’t the only form of disability that exists. We also need to consider people with hearing, cognitive, and mobility impairments. Apple recently announced Voice Control for macOS, iOS, and iPadOS at WWDC 2019. With Voice Control, people with motor impairments can control every aspect of their Apple device using only their voice. A more traditional alternative to voice navigation is keyboard navigation. Make sure that your pages are tabbable with a keyboard or d-pad to help people who are unable to use mice. As developers, we should constantly be thinking about how we can incorporate new tools into our workflow to give users alternative means of navigating our apps.
3. Support
Make sure your apps are compatible with assistive technologies such as screen readers. Screen readers are software that communicate the elements on a screen to users through non-visual methods such as text-to-speech and Braille devices. Also, remember to add alt text to your images that is descriptive, specific, and succinct. This will help your visually impaired users get the most out of your content through their screen readers!
Streamlined navigation
Instruction manuals for apps don’t exist because they should be intuitive to use. If your users break a sweat trying to navigate your app, you’ll have a difficult time engaging them. This is especially true for mobile apps, which lose 77% of users within just three days. On the web, streamlining navigability positions you favourably when Google’s algorithm determines your search engine results page (SERP) ranking. With that said, here are some guidelines to follow:
- Avoid unnecessary clicks; I like to stick with no more than 2-3 clicks to get to a desired outcome
- Work with designers to conduct user testing
- Avoid pop-ups/overlays; if you have to include these, use slide-in pop-ups that don’t obtrusively cover the user’s entire screen
- Check for broken links and images
- Keep in the loop on current design trends
- And, not to bash Forbes again, but never ever do this:
Security
The second feature I want to address is security. Security and credibility go hand in hand, and users are much more likely to trust your app if it is secure.
SSL certificates
To the left of most domain names, you’ll see a padlock followed by the string “https://” in which the “s” stands for secure (genius I know). This means that the website has an SSL certificate, which accomplishes two tasks. First, it authenticates the identity of a website to establish trust between you and your end users. Second, it encrypts data that end users send to servers in order to prevent hackers from intercepting and tampering with your data during a transfer. So the next time your instant gratification monkey decides that it’s a good idea to make an impulse purchase on Amazon using Starbucks wifi, you can thank SSL certificates for preventing hackers from stealing your credit card number! To see security in action, check out the features we implemented—including certificate pinning—in the mobile app we developed for FortisBC.
Hashing
Hashing involves running a plain-text password through a one-way function that outputs a muddled string, allowing the password to be securely stored. The next time a user logs in, all that needs to be verified is that the given password matches the hash stored in the database. Even if someone is able to break into the password database and steal all the data, it’s not a huge deal since the muddled strings aren’t easily returned to their original plaintext form. However, hackers are inventive, and it is possible to return hashed passwords to their plaintext from through brute force. This is why it’s a good idea to salt your hashes, which you can learn more about in this blog.
Responsiveness
Not all users have the same screen size, so designers and developers need to create apps that are usable across many different devices. There are several methods to go about this, with the two most common being adaptive and responsive web design.
Responsive web design
Responsive design focuses on the user’s needs. It uses media queries that allow the layout of a website to adapt and render according to the specific parameters, such as resolution and viewport width, of a device. Not only is responsive design generally less work and easier to maintain in the long run, but it is also recommended by Google as the go-to web design pattern. Ever since mobile search volume exceeded desktop search volume in 2015, Google has been rewarding mobile-friendly websites in search engine rankings. So if you want to boost SEO, look into responsive web design!
Adaptive web design
Despite the increasing popularity of responsive design, there are still many proponents of adaptive design. The general rule of thumb here is to design and develop static layouts for six common viewports and then display the appropriate one based on the user’s screen size. This is especially useful for businesses that already run websites based on adaptive design. In the scenario that they want a redesign, they can opt for a retrofit rather than a complete overhaul of their website using responsive design. Adaptive design also allows you to gather analytics on your top-performing layouts and focus development efforts on specifically optimizing them.
Feedback
People are impatient and feedback quells impatience. Good feedback demonstrates to the user that:
- Their input has actually done something, and the app is now responding.
- They have good reason to wait for a process to finish (users are likely to abandon calls to action that take longer than 3 seconds to load, which is why website optimization is so important).
As a general rule of thumb, there are three types of feedback you should use for different scenarios. When an input is executed immediately, a visual cue should be used to communicate to the user that the input has been received. If an action isn’t immediate, then a progress indicator should be used. Nielsen Norman, a UI/UX consulting firm, recommends a looped animation for wait times between 2 – 10 seconds and a progress bar animation for wait times longer than 10 seconds.
These rules of thumb for feedback apply just as much to websites and web apps as they do to mobile apps. In Android, for example, an “Application Not Responding” (ANR) pop-up appears if apps are unresponsive to user input within 5 seconds. The technical bits to avoid triggering ANR dialogs can be found here.
Lastly, remember that there needs to be balance. Speed is good, but make sure to give your users enough time to process your feedback. Also don’t be afraid to get creative! Developers and designers are always working to implement creative ways of giving users feedback to increase conversion rates. Check out this cool CTA hover animation designed by our very own UI/UX designer, Felix Cheng, for inspiration.
What features should you implement?
This is the stage where you go back to square one. Head back to the drawing board and map out your value proposition. Ask yourself: what consumer pain points do you want your app to address? At the end of the day, user-driven development is the cornerstone of building custom software. The features you choose to implement in your apps should be fueled by the end users’ needs and wants. If you ever get stuck along the way, our team of highly talented and driven software developers are here to help. Simply shoot us a message!
