Recently, I gave a talk at the Product Leadership Festival conducted by the Institute of Product Leadership. The talk, titled ‘Five Metrics to Measure Design‘, discussed various metrics that are indicative of the quality of the experience grouped under these heads:
Here’s the slide deck and the recording of the session:
As of April 2020, mobile internet users were about 92% of total active internet users globally. More users than ever before are accessing social media and digital content on-the-go. In developing nations like India, many users don’t have the privilege of owning laptops and desktops and the mobile is their only device for accessing applications online. Mobile friendly payment methods in Asia are fuelling transactions on shopping, cab hailing, and food ordering platforms. Both, the time spent and mobile data consumed on the mobile are growing rapidly.
So, what does it take to design experiences on the mobile for a generation that’s always on-the-go?
Designers have been adapting the mobile-first approach. The process starts with the hardest problem of making the most essential information and actions available on the smallest screen first and then working towards larger screen sizes. Designing for mobile first implies rethinking the information architecture, simplifying everything so that the core experience can reside on a small form factor, and detailing it to an extent that the experiences are delightful. Capturing the imagination of mobile users is no easy task!
Unlike large screens, the time spent on mobile is rarely contiguous and is broken into short but frequent sessions. It is imperative for designers to create flows that allow users to continue their journey from where they left in an earlier session or provide options of saving, liking, or sharing what they discover. For example, in an e-commerce platform, simple actions like displaying recent searches, recently viewed products, and allowing users to save items to their Wishlist goes a long way in driving engagement and conversions. Personalising the experience based on the user’s browsing patterns as well as affinity towards brands and price-points leads to further delight as users have to perform fewer actions. Push-notifications play a key role in reminding users about events and actions, and help bring them back to the platform to continue a journey that they left mid-way. For example, the notifications for users who have products in their shopping cart help them return and proceed to checkout. Rich notifications that allow images and actions to be embedded in the notification are even more powerful as they allow users to perform quick actions like commenting, rating, or reviewing, products without even opening the app.
Making experiences accessible to users with mobiles that have low storage capacity and in low-bandwidth areas is another challenge. These users are able to install only a limited number of apps on their devices and as a result businesses lose out on the constant connection with their customers. Such concerns are being addressed by the emerging technology of Progressive Web Apps (PWAs). A PWA barely takes any storage space on the device. Initially a PWA opens in the browser like a regular mobile website and nudges the user to install a home screen icon. Unlike regular mobile apps, the home screen icon of a PWA doesn’t consume any storage space on the device. When a PWA is launched from the icon, it opens in full-screen and provides a snappy and immersive experience just like native apps. It can also re-engage users via push-notifications and help businesses inform users about key events, and offers.
Mobile users are also less tolerant towards slow loading pages. According to Google/SOASTA research, as page load time goes from 1 second to 5 seconds, the probability of users bouncing increases 90%! Images are generally the heaviest parts of content in terms of downloaded bytes. Optimising images can often lead to faster load times. Use of vector file formats like SVG, font-icons, CSS shapes and effects (gradients, shadows, animations) can further improve performance without compromising on the sharpness at various screen resolutions. Another emerging technology called Accelerated Mobile Pages (AMP) makes pages load instantly. All these together significantly improve the experience for the user.
Understanding user behaviour through usability studies is an established practice in UX Design. In a moderated mobile usability session, researchers use multiple cameras to capture the mobile screen and the user’s facial expressions as they perform the specified tasks in a lab. However, unlike desktop usage which is generally in a quite, controlled environment, real mobile usage could take place almost anywhere — during a noisy commute, in a crowded mall, or during a meeting. Besides the numerous distractions choppy data connections could also cripple the experience. Such real world experiences are hard to recreate in a research lab. Tools embedded in web and native apps solve for this and allow creators to observe remote user sessions, view touch heat-maps, and also review usage data. Insights derived from this data are then used by designers to address any usability issues and refine the workflows to achieve the conversion goals.
Since mobile experiences involve gestures and touch, the elements on the screen are often animated by designers to give them personality and accentuate feedback. Motion in the user interface, when done right, gives an illusion of speed and the perception of the product being responsive. The new age digital prototyping tools allow designers to create and refine these micro-interactions.
Creating an engaging, delightful, and snappy mobile experience involves design and technology to play together. New possibilities of visualising information, navigating, playing, and integrating products in relation to the real world are already emerging with the addition of augmented reality (AR) capabilities in mobile operating systems. Through mobile devices, more technologies will reach the consumers and design will continue to play a key role in not just humanising them but also making them enjoyable to use.
A shorter version of this article was published in APAC CIO Outlook, October 2018
Assuming there’s already a product-market fit, what are some qualities that make a product fun and delightful to use? What in a product, apart from its fundamental usefulness, creates a sublime experience?
I evaluate and deconstruct all designs on three essential properties: Simplicity, Clarity, and Elegance.
In the context of user-experience, simplicity refers to the ease of using a product. It’s often used as an overarching term to describe a product that’s not just easy to use but also efficient, and delightful.
When designers write about simplicity its often perceived to be about the simplistic, and minimalist visual style. Simplicity described here is not about visual styling but about the substantive content — core functionality, features, and behaviour.
There isn’t one way of creating simplicity in a product and it takes both the designer and product manager to create it collaboratively through:
As Dieter Rams says, “Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicityâ€. Great designers from various domains have used the power of simplicity. Brands like Muji and Ikea are well known for the simplicity they bring in the design of physical products.
… Simplicity isn’t just a visual style. It’s not just minimalism or the absence of clutter. It involves digging through the depth of the complexity. To be truly simple, you have to go really deep. For example, to have no screws on something, you can end up having a product that is so convoluted and so complex. The better way is to go deeper with the simplicity, to understand everything about it and how it’s manufactured. You have to deeply understand the essence of a product in order to be able to get rid of the parts that are not essential.
Jony Ive on Simplicity (From Steve Jobs, by Walter Isaacson)
However, simplicity by itself is rarely the complete solution. To make a product understandable, designers look for clarity.
Focussing on Simplicity helps the designer decide on what to include in a product while Clarity helps define how to present it. Clarity is about organising the content in a manner that conveys the desired message and leads to desired actions by the user. Clarity is the quality of being intelligible.
“Confusion and clutter are the failures of design, not attributes of information.â€
Edward Tufte, Envisioning Information
In product design, clarity is achieved by bringing information and visual hierarchy across the numerous elements that exist on the screen.
Clarity can be measured by answering: how effectively does the screen or workflow communicate the desired information?
“Good design makes a product understandable. It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.â€
Dieter Rams
In the dictionary, elegance is defined as the quality of being graceful and stylish in appearance or manner. In reality, of the three qualities discussed here, Elegance is perhaps the most difficult to define. Its because it relates not to the intellect but to a deeper feeling or emotion. Elegance is achieved when all components come together in a balanced way to make the whole just right. The feeling is similar to watching Roger Federer play tennis or the legendary Sachin Tendulkar play cricket.
Today, products compete for even a few seconds of users’ daily mind-share. Its no longer enough to have just a basic, functional, and usable product. Designers have to go beyond usability and create delight in the usage of a product. A usable product is only the baseline and its all about what emotions can a product invoke. The design of elegant products tends to be high on desirability. Elegant design evokes a visceral reaction to the product.
Design for emotions: Designing for emotions leads to a differentiated product. Empathise with users not just to improve the performance of the product but also to engage emotionally
Together, Simplicity, Clarity, and Elegance in a product create higher engagement, stickiness, and delight.
The next time you review a product, think about how the design of the product can benefit from Simplicity, Clarity, and Elegance.
Originally published on Medium on Mar 11, 2018
