The big issues facing our Next Billion Users (NBU)
- Cost: people might not be able to afford expensive phones with big screens and lots of storage. (The ability to temporarily disable apps is one way UX designers and engineers can make this happen.)
- Connectivity: users might not have constant or unlimited access to the Internet. (UX designers should try to find ways to make the offline experience as rich as the online experience.)
- Digital literacy: people might not be familiar with certain design patterns, calls to action, or icons that we take for granted. (keep it simple. Consider things like video tutorials to help new users understand how to install and to use an app and explore new features with greater confidence.)
- Literacy in general: some users aren’t able to read or type. And others might want to switch languages on their device depending on what they’re trying to accomplish. (Multilingual keyboard options address literacy because they make it easier for NBU to switch languages depending on what language they’re comfortable using. Universally understood icons address literacy issues because they can make it easier for the next billion users, who may not be able to read or type.)
Gaining a comprehensive understanding of your user’s context is an important place to start.
Design for Offline
- Clearly indicate offline functionality
- Indicate when someone can use an app or website offline by displaying the offline pin icon paired with the word “offline.”
- When the user has downloaded content for offline use but is still online.
- When the phone itself is offline.
- When they’re connected to the internet and when the app is offline.
- Display no functionality
- When there is no online functionality, for instance, pair the “cloud off” icon with a clear text description like “no internet”
- Allow downloading for future offline use
- Displaying the file size can help users determine whether they want to spend that amount of data on a single download.
- Additionally, low-cost phones often have little storage.
- Indicate content that can be downloaded for future offline use by displaying the download icon paired with the text label, “download” and the size of the file.
- Make it easy to delete files, in case users want to conserve storage space on their phones. Display a remove action with a delete icon for downloaded files and show how much space will be saved by removing a file.
- Transition from downloading to offline-ready
- Use an animation to help set expectations around download time and when it’s ready for offline use.
- Display how many seconds it will take to download—enabling the user to cancel or pause the download. And don’t forget to communicate that the download is complete.
- Make offline file location discoverable
- If offline is a major feature of your app, build a feature on the home screen to help users find their offline files.
- Notify users when connection is restored
- Alert the user when the app or content is online again and able to complete their request.
- Use a snackbar—a single line of text directly related to the operation performed—to show that the app is waiting for a connection to download.
Offline design can take an already popular application to the next level by delighting users and improving accessibility for those with limited connectivity.
Graphical cues and iconography can also aid UI comprehension for low-literate and non-native English speakers.
Five key lessons for building international products
- Retrofitting may not always work
- Respect people’s budgets
- Help users connect with each other
- Offer offline experiences
- Feature locally relevant content
The term “Human Information Network” (HIN). In this network, people rely exclusively on each other for directions, recommendations, and news.
Sideloading: a process of transferring files between two nearby devices.
Nine ways designers can be more empathic and effective when creating products for emerging markets
- Internet access isn’t guaranteed (Can your product work when it isn’t connected to the internet at all?)
- Smaller, simpler devices are the norm (Is your product designed to work with older, low-end devices and software?)
- Data is limited (Can your product provide value while respecting the data budget of users?)
- Forget about credit cards (How do financial transactions work with your app?)
- Bridge the cultural divide (Does every part of your product operate properly within the user’s cultural context?)
- Get beyond language. Your app design will be more intuitive if you minimize text-based inputs and eliminate hierarchies understood only through language. (Have you tested your app for local languages and low-literacy users?) When literacy is low or texting in the local language is complicated, stickers can make it easier to communicate feelings and experiences.
- Leverage human relationships (Does your design improve or leverage the user’s social infrastructure?)
- Leave minimalism at the door (How can your interface speak to the local visual aesthetic?)
- Design for delight
Get out of the studio and into the real world. These nine considerations are a great place to start when designing products for emerging markets, but there’s a huge difference between reading a report about daily life in a city and talking with local residents, over tea, about their everyday lives. It’s this kind of personal experience that tells you how your app, product, or design will really be used, and trust me, it’s often different than you intended. So get out there and visit the people and places you’re designing for—ask questions, take notes, and set aside your own assumptions before knocking on someone else’s door. Look for the insights that can make or break your product.
Feature phones: devices that connect to the internet but don’t have all the capabilities of a smartphone.
Cash-on-delivery (COD) is the most popular payment method in emerging markets, but there are exceptions. The mobile money transfer app, M-PESA, allows users in Kenya to send and receive money using PIN-secured text messages.
You have to figure out what’s appropriate for the market and the area when it comes to monetizing your product, whether it’s through buying and selling, free sampling, ads, or subscriptions.
Conducting user studies in the market to understand if your product is respecting social, cultural, political, and religious norms. Also, consider the context of where and how your product will be used.
Muted colors refer to all colors that have low saturation (or chrome). These are subtle colors that are not bright or have been subdued, dulled, or grayed. The opposite of a soft color is a bright, vivid, saturated color.
The minimal interface just couldn’t compete for the user’s attention in a place where local visuals are more vibrant and dense. Aesthetic styles that are currently popular in the west—such as minimal use of color, sound, and text, as well as abstracted visual elements—can lose impact in a more sensory-rich environment. But people still need to easily navigate your app. The line between density and clutter is a tricky one. Balance meaningfulness and hierarchy with the local aesthetic.
What are the advantages of using design tools?
- First, tools allow designers to prototype ideas and iterate on them.
- Second, tools make it easier for designers to test their prototypes.
- And third, design tools make it possible for multiple teams to work on the same product.
Wireframing and prototyping tools
- Figma
- Adobe XD
- Sketch
- Framer
Presentation tools
- Google Slides
- Microsoft PowerPoint
- Keynote
Image creation and manipulation tools:
- Adobe Illustrator
- Adobe Photoshop
Animations tools
- Lottie
- Adobe After Effects
Vector images (or SVGs) are images created using points, curves, lines, and shapes to produce perfectly smooth lines.
Raster images. These images are composed of thousands, or even millions, of pixels, the smallest unit of display on a computer screen.
Graphics Interchange Format (GIF)
A platform is the medium that users experience your product on, such as desktop, mobile web, mobile apps, tablets, wearables, TVs, smart displays, and more.
In addition to having a consistent user experience across platforms, it’s also important to have a consistent brand identity.
The brand identity refers to the visual appearance and voice of a company.
There’s a big difference in the amount of time users spend on mobile phones compared to desktop computers. An average mobile session is 72 seconds, while the average desktop session is 150 seconds, more than twice as long.
Mobile users tend to be goal-oriented, and they are focused on completing a single task.
Users interact with devices in different ways.
The design differences we need to consider based on the devices we’re designing for.
Responsive web design allows a website to change automatically depending on the size of the device.
A few best practices when designing for mobile user experiences:
- First, call-to-action buttons should be placed front and center, allowing the user to easily complete the desired task.
- Second, navigation menus should be short and simple.
- Third, use gestures that users already do, like tapping and swiping. Gestures should be intuitive and familiar to users.
- Fourth, design for both directions a phone might be held. We want users to have an effective experience no matter how they hold their phone.
- Fifth, reduce visual clutter. Mobile phones have smaller screen sizes. We want to simplify the user experience on mobile. Users behave differently depending on their device.
Design cross-platform experiences
Desktop computers, laptop computers, and mobile phones are the most commonly used platforms for interacting with apps and websites.
- Screen size: The first consideration when designing for various platforms is adjusting design elements and features to fit different screen sizes.
- Interaction: you also need to consider the way users interact with each platform and how those interactions might affect your design decisions. It’s also critical to consider accessibility when developing your designs at each point. Different groups of people will interact with your product in different ways, like using a screen reader, closed captioning, or a switch device.
- Content layout: layouts refer to the way that information is organized on the screen. Mobile phone content is usually laid out in portrait (vertical) mode, desktop or laptop computers standardized size: landscape (horizontal) mode. tablets combine both the desktop and mobile phone user experience
- Functionality: functionality and the kind of tasks users want to complete. A desktop computer might be the best platform when users need to get intensive work done across a long stretch of time. Alternatively, mobile phones are portable, making them ideal for more casual and immediate tasks like texting, emailing, and checking social media while on-the-go.
The four Cs of designing for multiple platforms:
As a UX designer, your job is to make sure that your designs account for and take full advantage of the unique features of each platform.
- Consistency: design guidelines that need to be followed in order to stay consistent with the brand identity, which refers to the visual appearance and voice of a company and drive brand awareness.
- Continuity: To provide users with a seamless experience as they move between platforms. Maintain their progress as they move from one platform to the next. The user experience for each platform might be slightly different, but the product’s functionality should still be connected.
- Context: This means thinking about when and how users prefer to interact with certain features on different platforms.
- Complementary: One way to create a great cross-platform user experience is to make sure that the design of each platform adds something new for the user.
The term assistive technology, or AT for short, is used to describe any products, equipment, and systems that enhance learning, working, and daily living for people with disabilities.
kinds of assistive technologies, including color modification, voice control, screen readers, and alternative text.
- Color modification, like high contrast mode or dark mode on a device, increases the contrast of colors on a screen. Color modification increases the color contrast on a screen to make it easier to see for users with low vision or eye strain.
- Voice control and switch devices: Both of these help people with limited dexterity and can serve as an alternative to a keyboard or mouse. Voice control allows users to navigate and interact with the buttons and screens on their devices using only their voice.
- Screen readers are one of the most common assistive technologies for people with limited vision. The software works on mobile and web devices and reads out loud any on screen text. Also read any interactive elements, like buttons, along with non visible text, like the button names, and any alternative text for images.
- Alternative text, or alt text, helps translate a visual user interface into a text-based user interface. It essentially uses words to describe any meaningful image for someone who isn’t able to see the image. It is also super helpful for those with low bandwidth connections, too.
You don’t need to have a disability to benefit from assistive technology.
A switch is an assistive technology device that replaces the need to use a computer keyboard or a mouse. They all help people with limited motor ability use technology more easily.
