2

I am making an AngularJS app that will help inspectors of different types of heavy equipment to keep track of the inspection during the process.

There are many different pieces of equipment; each with their own manufacturer's specifications for inspection, and subsequent HTML inspection form.

The specifications for the inspections will be in PDF format, and the inspection form itself will be in HTML/AngularJs. The PDF must be visible, or accessible, during the inspection process so that the inspectors can see exactly what the manufacturer's standards are.

Now finally to the question: How should I display both the PDF and the HTML form? The PDF and HTML form contain multiple pages. It is important to prioritize the design for mobile, but it should be usable on desktop. I have a few ideas, but any further ideas would be very helpful!

Idea #1 Display the HTML form on the page like a normal form. On the edge, I would have a tab that would slide in over top of the HTML form (or maybe over 70% of the HTML form) with an iframe containing the PDF. Bonus points if I can figure out how to scroll the PDF to the matching section of the HTML form.

Idea #2 Display the HTML form and the PDF side-by-side with a slider in the middle that the user can use to move between the form and the PDF.

Idea #3 Probably the easiest to implement, but not very friendly. The customer already asked that this not be the solution, but I wanted to add this here to show that I thought of it. Simply put a link to the PDF at the top of the form that opens the PDF in a small window.

I am sure that the experts here will have better UI/UX ideas than the 3 2 ideas I came up with.

Thanks!

1

Unfortunately, mobile Web browsers will not render pdf inside an iframe. The pdf mime type is handled by most Web browsers as a file to be downloaded. The only way you could make it work is to convert the PDF to an image format before hand so that it can be displayed inside one of your iframes.

The mobile constraint makes it difficult to show both at the same time. If it were desktop, then two panes side by side would probably be the best for user to accomplish the goal you stated. The primary constraint is lack of screen real estate. This becomes even more of an issue if they both need to be visible at the same time. If the proponent can live without having the pdf/image always present, then maybe on mobile, you could show a thumbnail preview of the PDF/image. Tap on it. It opens it as a DIV that slides down from the top. Display and autoscroll to the relevant info. User can still peek around inside the div and dismiss it when they need to fill out the form again.

  • Thanks for the reply! Even if I have to embed the PDF as a PNG or JPG, my question of page design is the same. Do you have any suggestions? – Wes Jul 21 '16 at 2:52
  • You're right, the screen real estate is definitely the problem! I do like your idea of the thumbnail preview on the screen that the user can tap to bring up the document. Maybe I can make a floating bubble like the Facebook Messenger app on Android. Thanks! Yes, I think I will do exactly that. Thanks @thomasyung. I will upvote your answer for now, and once I'm finished I'll mark this as the answer. – Wes Jul 21 '16 at 15:33
  • I really tried to make the PDF thing work, but you were correct in suggesting it to work with images instead. It is easier to use a JS library to handle images with lazy loading the different pages than it is to make the PDFs work consistently. Docusign (docusign.com) does a great job of this. However, my needs are pretty specific (and I don't want to rely on jQuery), so I will have to end up creating my own image serving solution for this app. Thank you for your input. – Wes Aug 4 '16 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.