Designing for the Edge: UX Strategies for the Real-World Web

It is easy to think that most people have current iPhone editions as their mobile phone or even use some recently released laptop. The reality, however, is that in our world probably billions of people don't have access to proper internet or appropriate hardware to use common digital products. Designing for those situations, it is called “edge cases”, in reference to them being on the edge of internet functionality.

These “edge cases” usually happen on rural areas, remote locations, emerging markets where internet usually is quite unstable, or even places where only older or obsolete devices are available, either because of affordability or distribution.

There are millions of reasons to why designing for “edge cases” matter, as it can exponentially expand the company's market, improve overall UX (good accessibility always benefit everyone, makes apps clearer, faster and more effective) and makes the design proof of any potential external conditions that might affect the product's usage. In fact, all of us can be become “edge users” due to climate events, travel, energy outages, remote work or even using a mobile phone on the subway.

Graceful Degradation

Nowadays, applications are complex and tend to contemplate many different functionalities, besides the thoroughly crafted aesthetics, usually containing beautiful animations and visual content. Nevertheless, all of those are impossible to be used when the user's download speed is 0.5 megabytes per second, it would take 1 hour to load the user's Instagram feed and probably cost them handsomely.

On the back of all designers’ mind, it should always be the questioning: "How can I make this really complex app available to all of our users?”. One way to do that is simplifying the application to core essentials in those situations, while maintaining the app's minimal usability and personality. This is called Graceful Degradation and there are many common usages of it, such as:

• Offline Fallback: It is a very common approach in content based applications such as streaming apps. The offline fallback allow users to continue using the app while offline, including the possibility of downloading the content in advance, working offline and then automatically synchronizing the work made on the file. Spotify does that incredibly well, allowing users to download content ahead of time and play it whenever they want. Even if the user doesn't download it fully, Spotify will have saved some cache from previous uses, and the content might not even stop right away if the connection is lost.

• Context-aware interfaces: It is also possible to design interfaces for transition periods, such as detecting poor connectivity issues and making the UI adapt to that. One very famous example is Google Meets, which adapts the display of other users on the call depending on the internet connection quality of the user. When the device detects an oscillation of the connection, it automatically shuts off all other users’ videos and turn them into static images, which is much lighter for the computer to process with bad internet connection, allowing a more fluid, uninterrupted and better call for the users.

• Prioritize critical tasks: When scaling back an application, it is necessary to focus on what it is really the priority. Think about the Maslow Hierarchy, first the focus is survival and then delight. A great example is WhatsApp, which queue messages to be sent when offline, and then, sends them automatically when detecting any kind of signal. Its utmost goal is to send and receive messages, no matter the surrounding circumstances.

Lightweight UI

Prioritization has many benefits, as the Minimal Viable Product is key for “edge cases”. That includes making the application lighter, or even creating a lightweight version allowing users with poor connectivity or hardware to "survive”, according to Maslow. It is very common to create lightweight versions of social media apps, one of the most famous one being Instagram Lite and Facebook Lite, which maintain core functionality of the app but in a highly effective manner.

Banking apps are also an interesting case, where the app needs to be used to all population, meaning it has a lot of limitations to the design so it is really lightweight, and it could fit into the smallest screens and worst processors. There can even exist a second app for the same bank, but with more complex and heavy UI for investing and more niche users, whom usually have better connection and hardware. Therefore, lightweight UI is a key part of many companies’ design. But how do they do that?

• Simple and Basic Content: This includes no content heavy pages (with lots of high quality photos and videos), limit unnecessary interface animations, avoid heavy frameworks, use vector assets and SVG contents instead of traditional imagery, try using system fonts, as all devices can process them, minimize the system requests for better processing and less internet usage, and even think about using a simpler layout.

• Inform users of data usage and allow usage flexibility: With “edge cases”, users tend to have limited internet or even limited processing. Therefore, it is paramount to inform the user if it is consuming excess data, allowing users to maneuver their own situation. Spotify does that beautifully as they clearly display to the user if they are offline, streaming or downloading with the users’ mobile data, how much cache is stored and content downloaded, while also allowing users to customize how it stores data and the quality level of the content downloaded or streamed. Flexibility is key for a product success, especially when it is a world-wide product used by everyone. The applications should bend, but not break.

Tips

Everything is simpler and beautiful in theory, to put that into practice, however, it is a bit more complicated. In order to make “edge users” life easier, it usually means a bit more of extra work and care for small details, empathetically trying to put yourself in the shoes of those users, as it is not such a natural perspective to most designers. Here are some tips:

• Test on All Devices: This may sound a bit obvious in this context, but literally test with all kinds of devices. Different screen sizes, older devices, including Low RAM, slow CPUs, limited storage, different operational systems and versions, small, cheap and low resolution screens. In those test it is important to look into how the design behave in those circumstances, including if everything is clear, hierarchy is maintained, if everything is visible, does animations crash the app or anything make it slower that it should.

• Test with low signal: There are many options to used, including using Google Chrome's DevTools throttling variations, or literally going to places with low signal. How worse does the app perform under these conditions? Is there anything we can scale it back to maintain the best usability? With these conditions in mind, it is possible to avoid issues such as that on the drawing board, in fact, way before testing. If the app is quite content heavy, why not use progressive loading (loading only the first few contents and loading progressively as the users scrolls) or even skeleton loaders (showing the user some kind of visual progression of the app's interface being loaded).

• A/B testing: Nothing is better than direct comparison made by potential users about the design. Therefore, it is possible to create simpler versions of the app for edge cases and check how they perform on slow and worst devices/internet, consequently learning vital and real feedback about the app's performance.

Conclusion

When the design of a product considers “edge cases”, it empathizes with millions of people throughout the world, allowing them to fulfill a need and be more incorporated into society, while also becoming clients. Which not only increases usability and accessibility, but also companies’ profits and growth. UX Design has an empathetic nature in its core principles, so let's make sure that designers actually empathizes with everyone, everywhere and under all conditions.