PDF Text Editing

What is WebViewer SDK?

A SDK (Software Development Kit) is a collection of software development tools and resources bundled together to simplify the process of building a software application for a specific platform.

WebViewer SDK is compatible with all frameworks and browsers, and includes a set of libraries and documentation that developers can use to build a customizable web-based document viewer. With complete control over its functionality, behaviour, and appearance, developers can tailor it to their specific needs, save time with pre-built components, and focus on building an application that reflects their brand identity.

Problem

Two iterations of this functionality have been released, but both versions had limitations which compromised the overall user experience.

V1 PDF Text Editing

Version 1 (V1) of PDF Text Editing offered very limited formatting options and using a modal that obstructed users' ability to preview how changes would be applied on the document.

V2 PDF Text Editing

Version 2 (V2) of PDF Text Editing resolved the modal approach by overlaying a text box over the PDF content. However, due to some development limitations, this iteration caused the content to appear unclear when text and formatting changes were not applied in the same way as they appeared in the overlaying text box. Another issue arose when there was no minimum width for resizing a content box resulting in the possibility of hidden text.

Goal

Improve the user experience by implementing real-time text editing changes and refining the functionality of existing formatting tools from the past and current release.

Market Analysis & Customer Feedback

To gain a better understanding of the features offered in PDF text editing within the market, I conducted a market analysis with the top three competitors to compare strengths, weaknesses, feature offerings, and overall user experience.

Strength

• Add URL links to text
• Paragraph level editing

• WYSIWYG

• Image recognition

• Very full features

Weakness

• Not WYSIWYG
• No auto resize of content box
• Does not recognize vector images

• Content can't be moved
• Single line editing
• Cannot add/edit images

• Not WYSIWYG
• Some files only recognize character by character

• Most features are not available in embed SDK

Edit content box

• Paragraph

• Single Line

• Single Line

• Paragraph

Move content box

✔

✖

✔

✔

Resize content box

✔

✖

✖

✔

WYSIWYG

✖

✔

✖

✔

Auto resizing

✖

✔

✔

✔

Change font family/size

✖

✔

✖

✔

Change font color/style

✔

✔

✖

✔

Image - move & resize

✔

✖

✔

✔

Image - rotate

✖

✖

✔

✔

Fonts supported

9

3

17

Many

Unavailble font warning

✖

✔

✖

✔

Undo/redo

✖

✖

✖

✔

Copy & Paste

✖

✖

✖

✖

To gather more insights into user pain points with the first two iteration, we reached out to one of our customers to understand their biggest pain points with the second release of PDF Text Editing.

Information Architecture

Design

01 Content Box Behaviour

Introduce a real-time WYSIWYG editor to enhance current user interactions within the content box, including resizing and text overflow improvements.

Defining the min and max width of a content box

In the V2 implementation, users were able to resize the content box to a point where all the text could be hidden. This became a problem because it led to important information being lost. In the first iteration, I had set specific pixel values for the minimum width of the content box and a maximum width of the document borders. However, after some discussion, this would not support larger font sizes that may be hidden within the fixed minimum width. To address this, I decided to make the minimum width a ratio of the font size, ensuring that at least one character is always visible, regardless of the font size used. This solution helped to prevent the loss of all the content within a content box.

Text overflow off the document

In the current implementation, text overflow can occur when the user resizes the content box or types beyond the page limit, resulting in a significant issue of hidden text. To address this problem, an icon will appear next to the content box that notifies the user about the overflowing text when hovered over.

02 Fonts & Alignment

One of the biggest challenges we face with fonts is the issue of missing fonts. When a PDF document contains fonts that are not included in our font list and a user tries to add text, it can result in random characters appearing, which could completely ruin the document.

Missing Fonts

Missing fonts posed an issue as typing in a content box with an unsupported font would cause random characters to appear when typing additional text. Since we were working on an MVP, we couldn't afford to add complex functionality. Instead, to address this issue, I decided to remove the option for users to type additional fonts that we don't support and instead introduce a modal that would appear when the user starts typing on a missing font. This modal will allow the user to select a font from our font list, which ensures that the text appears properly once they start adding additional text. I noticed that it can be a pain point to see two different fonts in one paragraph or even in a document. In a future release, we hope to support subset fonts, which would allow users to use characters of a font that already exists in the document.

03 Cancel Out of Changes

In this iteration, we had to prioritize other aspects of the PDF editor, and the implementation of Undo/Redo was postponed as it required more development time. However, the feedback we received from one of our biggest customers that having a way to undo changes while in edit mode was crucial for them. Currently, the only option available to users is to manually delete every character they don't want before clicking outside of the content box, which can be cumbersome and time-consuming. Given this feedback, we needed to find a temporary solution that would be easier to implement before we can release a full-fledged undo/redo feature.

Canceling Changes

After some brainstorming, I decided to add a context menu while the user is in edit mode that allows users to either apply or cancel their changes. By selecting the cancel button, any edits made within the content box will be reverted back to their original form. Since we already used this type of context menu in PDF Text Edit with different selection buttons, this helped to maintain consistency across the platform and saved development time on implementation.

Takeaways

Communication

Effective communication was important throughout the design process due to technical limitations for this project. Because of this, some of the design ideas were not feasible. Having clear and frequent communication with the development team helped us to quickly identify any issues and iterate on the designs to find workable solutions.

Finding Solutions within Technical Constraints

When one of our customers requested an undo/redo feature to improve their product's user experience, we were unable to deliver it in time for the initial release due to resource constraints. However, we didn't want to leave our customer without any options, so we provided a temporary solution that allowed them to continue working effectively while we developed the undo/redo functionality. This approach not only kept our customer happy but also demonstrated our commitment to delivering the best possible experience, even when faced with unexpected challenges.