ggeisler
commented
6 years ago Below is a pass at how we might add PDF preview to the search results page. I'm particularly uncertain about how to best select sizes for the preview viewer; perhaps we can start with the suggestions I make below and then adjust as necessary when it is implemented and we can see how it feels in action at different viewport sizes.
The basic idea is to add a toggle to any search result item with an associated PDF (below the "Sample matches in document text" toggle, if it exists on the page), that is similar to that toggle in style and interaction. So the results page for a bunch of PDF objects would look like this:
When opened, the "PDF preview" section would show a PDF viewer inline (I think others on the team might know more about pros and cons of different PDF viewers so I'm not basing any design decisions on a specific one. The assumption is just that we'll define a sized container for the collapsed section and load a PDF viewer with the relevant PDF in it when the section is expanded). Something like this:
The aspect that is less straightforward is deciding on how to size the preview section. My suggestion is to style the PDF preview section like this:
.pdf-preview-container {
float: right;
max-width: 693px;
width: 100%;
}This will align the left-edge of the viewer with the "Preview PDF" label when the viewport is at its widest. At smaller breakpoints, the left-edge of the viewer will line up with the left-edge of the thumbnail image. So this gives the viewer a reasonable width at all viewports without being too wide at the 1200px+ width. Here's an example of how it changes at different viewport widths:
The other sizing issue is how tall to make the viewer. If we go with height: 1000px; that will enable a full PDF page (at least a typical one, like a VT PDF) to display in the viewer at 100%, similar to the second static mockup above, at all viewports except for md, where we might want to change the height to height: 680px; to keep the same width to height ratio (more or less) as the other breakpoints.
The size recommendations above mean the viewer will be pretty big, but since the user is explicitly choosing to display it, and the user can easily close it, that might be fine; the large size does enable the user to easily read the document. An alternative approach could be a shorter viewer that fits better when viewed in shorter browser viewports (perhaps using vh units for height to take into account the user's actual viewport height), but the user would have to do more scrolling and might not see a full page in a single view at 100% scaling.
Edit: I didn't mention above a couple of related issues we might discuss:
-
Is the PDF preview something the exhibit curator should be able to explicitly enable/disable, similar to the full-text search result preview? If so (I'd lean that way), do we handle the configuration just like full-text search (in the Metadata panel, only enabled for results list view)?
-
Is it possible that we could have multi-file objects with more than one PDF? If so, I might need to do some additional thinking about how we tell the user that and how we enable the user to decide which PDF to preview.
anarchivist
As a user, I want to be able to preview a document to "leaf through it" before I click through to a search result page. Ideally, I want to be able to do this without being able to navigate away from the context of search results.
Possibly consider the preview as "collapsible."
Examples from comparable initiatives
Residual Special Court for Sierra Leone