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.