Enhancing PDF readability with Liquid Mode: Mobile-friendly PDFs through AI, ML & UX design

A collage of 12 column grid blueprints for PDF documents.

By Natalie Dye

Posted 10-12-2020

Technology can take something commonplace and, through innovation and experimentation, create a whole new experience. In our on-the-go world, which requires us to access information in multiple ways on multiple devices throughout the day, there are few technologies as popular (or as powerful) as the PDF. Since inventing the PDF more than 25 years ago, Adobe has delivered continuous innovation for digital documents, reinventing how people get work done, and making all of our lives a bit easier and more streamlined.

As part of the Adobe Document Cloud design team, we’ve worked closely with product and engineering teams to capitalize on Adobe’s leadership in digital documents with the goal of solving a significant problem: creating better reading experiences on mobile devices, using the latest machine learning technologies. This close partnership between UX designers, product, and engineers is opening up new opportunities, allowing us to innovate and make an even greater impact in our customers’ lives.

Adobe Document Cloud

Welcome to a whole new document experience.

Learn more

There are so many types of documents out there that we want to make friendly on mobile – essentially we have to design for every one of them. Our team has worked to determine the best “maps,” or blueprints for optimal reading experiences on different devices – that documents can follow to ensure our users get the best reading experience. We call this feature Liquid Mode, and we’ve rolled it out in the Adobe Acrobat Reader mobile app to completely transform how people consume PDFs on their mobile devices. It’s been a challenge, but a rewarding one. Here are some of the key things we’ve learned along the way.

Adobe Acrobat

Stay connected to your team with simple workflows across desktop, mobile, and web — no matter where you’re working.

Learn more

Tackling the challenges of reading on mobile devices

People usually think of PDFs as static documents, which can certainly be hard to read on a phone. Our team set out to reimagine the PDF as something responsive that works well with every mobile device. To achieve this dramatic shift, we needed to join the artificial intelligence (AI) development process at a much earlier stage than usual. The ability to be nimble and incorporate user input are paramount when it comes to designing with AI and machine learning (ML). Our colleagues – product managers, data scientists, and engineers – all understood that dedicated experience designers were needed to grow the vision.

With any technology-driven project, it’s important to humanize the final machine output and address all the possible ways the technology can fail, in a user-friendly way. We set out to determine how machine intelligence could define how to optimize a document viewing and editing experience, tinkering with this concept along the way until we found the best settings to make the consumption and understanding of content as easy and enjoyable as possible.

One of our main goals, and something we’re very passionate about, has been improving the layout of PDF content for mobile users and how we convert type into editable text. We’ve followed principles of “calm technology” with Liquid Mode, in which the functions of the application operate on the periphery instead of occupying the user’s attention, and this has been central in many of our design decisions. Many rounds of user research and testing ensured that the product would have a more natural and intuitive UX.

A series of device variation UIs for a PDF file using Liquid Mode in Adobe Acrobat Reader.

Liquid Mode conversion.

Any possible negative experience, such as garbled content, needed to be resolved fast and without much effort from the user. A calm tech PDF experience on mobile needs to feel as simple as using a PDF on desktop does.

Designing a solution when one-size doesn’t fit all

Like any good design team, we of course started with research. We set out to learn about users’ different reading styles, patterns, and their unique needs. This helped us develop an intuitive document navigation experience that gently introduces users to Acrobat’s nuances and limitations on mobile, during testing. It was very important to build trust between them and us through this iterative design process; we wanted to learn from them in a nonintrusive way and be able to incorporate changes with each iteration.

We accomplished this trust building with users by ensuring that they saw we have the right intentions – our priority is to make Acrobat easy to read and work with, for everyone. We discovered the more transparent we were with any machine learning flaws, the more they were willing to let small discrepancies go. The acknowledgment that machine learning isn’t perfect, and that we are constantly working to improve it, went a long way. We found users were constantly returning to a feature to see what new things have been added. The more we saw users engaging in different activities in different documents, the more we realized this was not a one-solution-fits-all situation.

Designing for a learning curve

Creating Liquid Mode involves redefining users’ understanding of what a PDF is and how it works. For this reason, our design team had to keep in mind that there would be a learning curve as users discovered the full range of features at their disposal. For example, pinching and zooming are no longer necessary in Liquid Mode, images are tappable, and tables move.

In these cases, it’s our job as designers to think of these hurdles and create a framework that helps lead the user to discovery. The goal is simple: let the user control what they see.

A user flow visualizing how users might interact with a table in a PDF document on a mobile device.

Designing for the unknown

AI and ML projects are becoming more commonplace in the design world, but they still represent a new challenge for UX teams. One of the biggest obstacles for the Liquid Mode designers was designing for the unknown. While data scientists are training models with documents and information, at the end of the day, we just don’t know how a machine thinks. This requires designers to not only design the best experience, but also to design for scenarios where errors arise.

Additionally, ML is not linear. Just because one scenario works, this doesn’t mean a similar scenario will be interpreted the same way. Systems can often get “confused” by the information presented. With Liquid Mode, our system would get confused by certain document layouts, which would put readability at risk. Designers and engineers had to work together to come up with a fallback solution—they had to take the “messier” parts of the documents and create a view that wouldn’t be distracting to the reader. The overall experience should be seamless for the user, who is focused on completing a goal. For our designers, that meant a labor-intensive process of continually checking a document’s conversion capability and tweaking the software to improve accuracy.

One of the biggest contributions UX designers can make is bringing an understanding of the human perspective to AI and ML projects. Working collaboratively with data scientists and engineering on AI and machine learning projects is crucial to their success. There needs to be a balance between all the things we can do with AI and what we should do. Ultimately, that’s what the experience designer is there for: to advocate for the user and always question if and how the technology adds value for the customer.

The partnership between UX designers and engineers is expanding opportunities; together, we are able to innovate in new ways by influencing one another and sharing knowledge. Engineers are able to teach designers about technical feasibility and help them understand code structure. Designers, in turn, help engineers understand the user experience and the reasoning behind design decisions. This kind of cross-disciplinary understanding boosts communication among project teams and adds transparency to limitations.

This partnership will continue to be crucial, as Liquid Mode is just the start of an ambitious vision for the future of PDF. Adobe Document Cloud designers and engineers continue to spend each day thinking about how to use AI to fundamentally change the way people consume digital documents and to make our customers’ lives more impactful.

Topics: Artificial Intelligence, Document Cloud, Diversity & Inclusion, Accessibility, Productivity

Products: Acrobat, Document Cloud,