Onboard 50% global population as your customers by creating apps and UX copy for slow internet
Improve usability and UX of apps and websites for slow internet and offline mode
Do you know that close to 50% of the global population does not have access to reliable internet? These users frequently go offline while accessing your mobile app and are using slow networks.
Let us learn how to design UI and write UX copy for slow networks and offline from Bret’s team.
Supervisor Bret says:
Recently, in August, 2023, I was surprised to hear from an HR from a developed country in Europe that they have been experiencing issues such as slow and unstable internet connection.
Nearly 3.6 billion people remain totally unconnected to the Internet as per the UN’s Broadband Commission for Sustainable Development. Only 4.1 billion people, which is about 53.6% of the global population are able to remain online.
UI Designer Pretty says:
I remember reading a blog about designing for slow internet connections. I never imagined that we might need to even consider designing our apps and websites for slow connections as most of our clients are from Europe and the US.
Bret says:
Pretty, yes, it’s true, we need to design our apps and websites for slow connections. The Internet is getting overloaded. Due to Covid19 pandemic, the number of online users has risen exponentially.
Developer Jacky says:
Let’s accept it, the internet connectivity issues that were common in villages and remote areas and emerging markets are now experienced globally—in both urban and rural areas. Many users give up on incomplete forms and online tasks.
Bret says:
Alisha, our UX Writer is going to move to her new farmhouse to do UX research, work from a remote location, and get first-hand experience working with internet issues. For the first time, Alisha is going to write UX copy for these users to help them use apps and websites efficiently and productively in locations where Internet is slow and unstable. She has never done this before. Team, do you have any tips and suggestions for Alisha that would make our apps and websites accessible and inclusive for these users?
UX Designer Pretty says:
Alisha, you can inform users proactively about the expected wait time when web pages and applications get loaded and provide informational messages and feedback proactively.
Gracy says:
Alisha, you can provide offline functionalities to users so that they can use websites or applications even when they are not connected to the internet.
Greg says:
Alisha, you can provide users with progress bars, tips, or games, or something else to do while they wait for the Internet connection to reconnect.
UI Designer Pretty says:
Alisha, you can make the web page loading process more transparent and update the status at every stage.
Gracy says:
Alisha, you can identify and communicate reduced functionality and limitations of apps and websites to users in a clear and concise way.
Jacky says:
Alisha, you can write empathetic and supportive UX copy to reduce the frustrations of these users.
Pretty says:
Alisha, you can write easy-to-understand and actionable error messages for these users.
(Alisha is busy noting down the suggestions given by her team.)
Alisha says:
(Feeling satisfied and happy)
Your suggestions are excellent. Thanks a lot team. It is a nice opportunity and a new challenge for me.
Alisha welcomes her team to her new farm house
Would you like to move into my new farmhouse for health, happiness, and productive work?
Pretty says:
(Pretty looks mischievously at Alisha).
Alisha, I would love to move to your new farmhouse and enjoy the same perks as you. (Alisha smiles at Gracy.) I love the countryside and a slow life. I am tired of driving in the city, loud noises, and daily traffic jams.
Greg:
Let us see how Pretty designs better UX and Alisha writes user-friendly UX microcopy for these users from the barn. (Gracy winks at Jacky.)
Find excellent UX solutions for slow and unstable internet
Bret says:
Pretty, don’t worry, I have got an excellent solution for you on how to make UX designs inclusive, more effective, and useful for people who do not have a stable and fast internet connection.
This solution will make the websites and apps work efficiently even when internet disconnects frequently and speed is slow:
Progressive loading is a solution that first loads the most crucial content on a page. The remaining content loads and unfolds gradually as the user scrolls down. This solution helps users to start reading and interacting with the page immediately, even when the internet is slow.
Gracy says:
Progressive loading would also make more sense for Alisha and Pretty when they experience internet issues on Alisha’s farmhouse.
Developer Jacky says:
Bret, static web pages is another solution for slow internet. Static HTML pages can also be created when you are offline. Static web pages are pre-rendered and lightweight HTML pages that load instantly. Static web pages can be hosted instantly on any web server.
(Alisha is pleased to know about static web pages and she looks mischievously at Pretty)
Pretty says:
I found that static website generator tools such as Designmodo’s Slides are fast, easy-to-use, and highly customizable. Using them, I could create brilliant marketing websites, web presentations, and landing pages.
Developer Jacky says:
If your users from the barn are unable to consistently afford a high-speed internet connection, then you can implement the Progressive Web Application (PWA) solution.
Gracy says:
Pretty, PWA also allows your users to use your websites in the form of a native app. PWA allows them to work even when they are offline.
Bret says:
Jacky, ensure that you test your PWA thoroughly for offline mode.
Jacky says:
Sure Bret, I will definitely test my PWAs.
Hey! Pretty, PWA makes websites highly responsive and easily shareable native app. PWAs store HTML and CSS files in the browser cache.
Bret says:
Pretty, if you want to offer the best mobile-friendly web user experience to your users, then you can use the accelerated mobile page (AMP). AMPs load instantly.
If you want to offer best user experience, PWA is better than AMP. PWA is lightweight and lighter than a mobile app. It offers push notifications. Its icon sits on your mobile’s home screen. AMP is faster than PWA. However, AMP works only in online mode. PWA works in both offline and online modes.
Pretty, you may want to read more about progressive loading, PWA, and AMP, from these websites PWA Vs AMP.
Showing mock content while users wait for the internet to reconnect:
Jacky says:
Alisha and Pretty, you can use different mock content every time and show it to users while they wait for the internet to reconnect.
You can use the offline time to introduce new product features relevant to the context and onboard users on these new features.
Alisha says:
That’s interesting, I will get a lot of opportunities to write creative and fun mock content. Jacky, I would love to work on this with Pretty.
Greg says:
Pretty, you can use the intermittent connectivity experiences to make the user’s experiences seamless. They can create the impression that the app is still working. They allow the users to continue working on their tasks on your app. Your app should queue user tasks or use pre-caching and download content and images when the internet connection gets restored. The connectivity experiences are useful when internet strength may fluctuate between 2G to 3G or 3G to 4G or 4G to 5G speeds.
Pretty says:
These solutions are really enlightening and helpful. Thanks a lot team.
Scene:
An interesting brainstorming session about writing UX copy and designing apps and websites for slow networks:
Jacky says:
Here is a UX copy of a toast message that shows up when the Internet connection of a mobile app is restored:
A new version of this app is available. Refresh.
This UX copy sounds like I need to update my app.
However, it is actually not the app version that is getting updated. I want to convey that my app is just refreshed or updated with the latest data after the Internet connection is re-established. Pretty, what do you think?
Pretty says:
Jacky, does this copy convey your intended meaning?
Your connection is back. Click Refresh to get all updates.
Jacky says:
Yes, it does. And, I would also show the latest time when the app was updated last time.
Alisha says:
Jacky, I have included the app last updated time?
Your connection is back. Tap Refresh to get all updates. (Last updated: 14:00 Oct 25, 2023)
Finding last updated rates:
Greg: Can we improve this UX copy?
Rates valid as of 6 days ago. Update now.
Bret:
Can we say?
Rates were updated 6 days ago. Get latest rates.
Alisha:
Yeah, that sounds good.
Downloading the latest article when reconnected to the internet:
Jacky:
How does this sound Alisha? “This article has been updated. Tap to refresh.”
Alisha says:
Hey! Jacky, it sounds good.
Hey! Pretty, how do these UX copies sound?
Get latest article?
Tap and get latest available article.
Want a fresh article? Yes, get it now.
Latest article is now available. Get it.
Get new article version?
Pretty says:
Alisha, these UX copies are clearer. I liked this one:
Latest article is now available. Get it.
Updating the UI of my app to communicate the current contextual offline or online states to my users:
Bret says:
Pretty, we need to focus on making the UI and elements of an e-commerce website accessible to people facing internet issues.
Designer Pretty:
How do I make the UI and elements on an e-commerce website accessible to people facing internet issues?
UX Researcher Greg:
Hey! Pretty, in the offline mode, as users cannot buy anything. You may want to disable the Buy or Shop buttons. I guess, even the Price button should be displayed as inactive with gray color. Prices of things might change anytime in the disconnected mode or just when the website becomes online.
UX Writer Alisha:
Yes, you are right Greg. I am thinking of the microcopy and messages I should write for the Buy and Price buttons for the two states offline and online. Hey! Greg and Pretty which UX copy sounds better to you for the Price button and the Buy button?
Here are UX copy suggestions for the Price button:
Reconnected? Tap the green Price button to find latest price.
When Internet is reconnected, tap the green Price button.
Here are UX copy suggestions for the Buy button:
Reconnected? Tap the green Buy button to shop.
When Internet is reconnected, tap the green Buy button.
Updating app’s UI and UX copy to inform about the current contextual state to the app users:
Bret:
Pretty, how do we update the apps UI to reflect the current contextual state to the users?
Informing users about stock market statuses using app’s UI:
Designer Pretty:
Bret, how do I inform users about different statuses such as the open and closed stock market and increased and decreased stock prices?
Alisha:
Pretty, simply change the colors of the whole app or just change the colors of each widget. This would inform the users about change of statuses.
Designer Pretty says:
That’s a fantastic idea.
Writing UX copies to inform app users about stock market statuses:
Bret says:
Alisha, what copy would you write to explain these different statuses of the stock market?
Alisha says:
Bret, which one of these UX copies do you find good?
Suggestion 1:
App shows bright daylight when stock market opens.
App shows gray light when stock market closes.
Stocks appear red when their price decreases.
Stocks appear green when their price increases.
Suggestion 2:
When stock market opens, a bright white light is shown on the app.
When stock market closes, gray light is shown on the app.
When stock price decrease, they appear red.
When stock price increases, they appear green.
Suggestion 3:
The app turns white when market opens.
The app turns gray when market closes.
Stocks turn red when prices drop.
Stocks turn green when prices rise.
Making users aware of the offline mode
Researcher Greg says: Hey! Alisha,
I will go with suggestion 3. The third suggestion is precise and clear.
Are you thinking about making users aware of the offline mode?
In my UX research, I found that users struggle with the app when the app is offline. They do not know where the large data gets saved. They do not know how to change the default behavior of the app from app settings.
Pretty says:
Yes, I was thinking of intimating the users that their app is now offline using multiple UI design components such as informative language, icons, notifications, color, and imagery.
I will also tell users about tasks they can and cannot do in the offline mode.
Making offline mode intuitive and clear:
Pretty turns to Alisha and says:
Oh, we'll make offline mode so intuitive and clear that users will intuitively identify the offline mode even when they are drunk or sleepy.
Alisha:
Hey! Pretty, I will write user-friendly microcopy for your UI elements and make online and offline modes clear to users.
Offering seamless and stable user experience even in the offline mode:
Jacky says:
Bret, how do we ensure users get a seamless and stable user experience even in the offline mode by default?
Bret says:
Jacky, when you cache the user data in the app, users are able to access their data even without a network connection. It helps minimize the impact of losing the network connection.
For example, on the app’s news section, user should be able to auto-download and auto-save the latest news. They should be able to read current news even without a connection.
In the offline mode, users should be able to read the downloaded news text minus the images.
Adapting the app to the user's behavior:
Bret says:
If a user usually reads the Nasdaq news and NYSE section, then make your app download the Nasdaq news on priority. When the Internet is reconnected, your app must download the images of Nasdaq and NYSE articles first.
Greg says:
Hey! Bret it’s just like Netflix's smart downloads feature. It automatically downloads TV shows and movies I add to the watchlist when my Wi-Fi is connected.
Developer Jacky says:
Bret, these are really useful and excellent solutions for offering a seamless and stable user experience in the offline mode. I will definitely implement them in my app and code.
Providing personalized user experience for auto-download and auto-save features:
Alisha says:
Pretty, let’s work together to explain the auto-download and auto-save features to the users in a user-friendly manner to provide a personalized user experience.
Pretty says:
I will try to make my icons and images lighter by using the fast-loading AVIF and WebP compressed image formats for slow networks.
And, for the offline mode, I plan to store and show these compressed images partly in the app as thumbnail placeholders.
Jacky says:
Hey! Pretty, our app will replace these thumbnails with the actual images when the app reconnects to the Internet. When the Internet has sometimes good speed, the app will automatically receive optimized PNG and JPEG images.
Greg says:
Hey! Jacky and Pretty these are fantastic solutions for offline and online modes and for users who have inconsistent, slow, and occasionally good connectivity.
Naming the live and offline apps:
Hey! Alisha,
Can you suggest good names for these two live and offline apps? They will cater to users with unstable and slow internet connectivity and occasionally good connectivity.
Alisha says:
Let’s call the offline app:
“NXStocks for slow networks” or
“NXStocks feather lite”
Tagline: Ideal for slower networks and offline mode
Let’s call the live app:
“NXStocks fast live”
Tagline: Made for faster networks and online mode
Greg:
That’s precise and clear.
Enjoy some fun moments when her team pulls Alisha’s leg
Alisha’s supervisor Bret says:
Oh God in 10 days Alisha is going to move to her new house in a remote farm area that has slow internet connection and frequent disconnection and even bad weather. Alisha can become a target of jokes like these from her colleagues:
“After 10 days, there will be mostly downtime and Alisha can enjoy her life and her downtime then.”
Alisha’s best friend Gracy (winking and smiling at Alisha):
Alisha, it will be mostly a paid vacation then.
(Alisha is enjoying her leg pulling by her team and is just smiling at them.)
Bret:
You have indeed worked so hard for the last 20 years for our company and brought the company to this level with more than 140 % growth every year.
Developer Jacky says:
Alisha can just share her internet connection error messages like the one in double quotes with the office and she can just get away with many things.
“Your connection is so slow that … (hold on the rest is still loading)”
Jacky is giggling with Alisha and her best friend Gracy. They are all celebrating Alisha’s much-needed break.
Alisha says;
Jacky, we might also have to wait even longer to receive feedback related to their existing issues and the new UX copy from our clients for these slow apps and websites.
Gracy says:
“Her Internet connection will be a lot like a toddler. It's down most of the time, and even when it's up, it's unstable and we never know when she will vanish abruptly from the online meeting when Internet again goes down.”
Developer Jacky says:
“Alisha might need to move her modem to a barn to receive a stable internet connection.”
Greg says:
She can also get away with many things with excuses such as thunderstorms, snow, wildfires, and tornadoes.
Gracy says:
I am sure, with her past achievements for the company, she can get many concessions from the office.
Alisha says:
Here is the flip side story, my life would become a slow-motion movie. Do not think that I have gone nuts when I stare at you for more than 2-3 mins and freeze.
Jacky says:
Alisha, you would become a frozen ghost that can come alive anytime when the Internet reconnects.
Alisha says:
I would get the much-needed short healthy breaks. They would help me drink more water, remain hydrated, and feel good. I would move around frequently before my body gets frozen.
Gracy says:
Guys, when Alisha goes missing and is not online, she might have gone out to jump with her cute little lamb on her farm. Alisha does not want to get frozen online when her Internet connection is down.
Alisha says:
(Looking teasingly at Pretty) yes, of course, I would enjoy hopping with my little lambs. I would love to become leaner and more beautiful than Pretty. Guys, I welcome our team to have fun and chill out on my blissful farm this weekend. The condition is that you should have at least two creative ideas for slow internet connections.
Greg says:
Alisha, how about a relaxing evening bath in the hot springs near the beautiful waterfalls we had visited last summer?
Alisha says:
Thanks, Greg, I love the hot springs. I would also enjoy practicing walking and talking Zen meditation and breathing techniques during all these Internet disruptions and speed issues. My body, mind, and soul will make peace with everything. No more frustrations, no more anger, just ultimate nirvana (enlightenment) (everyone in the conference room look at each other in bewilderment).
Gracy says: (winking at Jacky) Alisha, maybe you should also practice hypnosis technique to put everyone to sleep. Alisha, we would love to go to the hot springs with you.
Jacky says:
Otherwise, we would automatically go to sleep waiting for you Alisha in online meetings.
Alisha says:
Sure, I promise to apply my magic meditation spell on you guys. It will help you chill out.
Greg says:
Guys Alisha would use the Internet smartly for a limited time. In 10-days she would learn to become superfast, efficient, and productive even with the limited internet connectivity. She would be unstoppable and more efficient in 10 days.
Alisha says:
I would enjoy the do-not-disturb mode that writers usually require to come up with the most useful masterpieces. Probably, you can expect some interesting UX stories from me.
Pretty says:
Wow, I would love to read your stories Alisha.
Alisha says:
I would upload my heavy load of UX copies at night. They would get shipped to you by the next day morning like overnight snail mail.
(The team is laughing and Alisha is enjoying her turn to create laughter).
UX writer Alisha’s learnings from her slow connectivity:
Bret says:
Alisha, how did you fix issues faced in your slow internet and what did you learn from the issues?
(In the next episode, let us learn how Alisha fixed the issues she faced while working in a location that had slow and unstable internet connection.)