2

My registration form requires the user to input Information A and Information B , which are printed on documents only they have access to.

Since I have to make the form responsive for all kinds of devices, being ultra-widescreen displays or smartphones, I want my preview to jump underneath my form. Also, I want my preview card always be the same height as my form card.

But the main problem is how to present the document preview. The preview is just an image that is being swapped out, depending on the input the user has currently focused. Information A is printed at the top of the document, and Information B is printed near the bottom. Now, on wider screens, the cards get wider as well. I have to either scale the image or crop it. Neither is really an option, since scaling makes it to small to be readable, and cropping cuts off Information B.

mock-up

I did see the question "How to best show a document preview".

Question: What would be a good way to style a responsive preview of these documents?

Improve this question
8
  • Hello nuuse! I hope you don't mind, I've removed the implementation details from your question. On this site, we don't deal with any specifics of how to create design solutions, but we are equipped to help you resolve the organizational aspect of your question! If you later need help with the technical side of things, try searching around on StackOverflow, or ask a new question there.
    – maxathousand
    Mar 22, 2019 at 16:04
  • Hello. How is the preview used? Are more things changing than only the two pieces of information? Does the preview help the user decide which value to enter? Or could it be used as a confirmation before finally submitting the form?
    – Andy
    Mar 22, 2019 at 17:42
  • Why is the "document" an image in the first place? Isn't the actual text the part that helps users?
    – Andy
    Mar 22, 2019 at 17:44
  • Does something keep you from limiting the width of the whole thing? Usually it's not very practical to scale infinitely.
    – Andy
    Mar 22, 2019 at 17:45
  • @Andy The prewview is just a scan of the on paper document. Since our users are mostly from a generation, where computers, internet and so on isnt really their strongest field, our team has decided, that we want it as a picture, to make sure it has its recognizability. Its just these to fields, where the Preview changes. Currently I just use three different pictures. the first just shows the document, whereas the second and third point out Information A and Information B as shown in my demo. It helps to find the information in the first place.
    – nuuse
    Mar 25, 2019 at 7:06

2 Answers 2

Reset to default
1

Short read:

  • Make the document preview responsive, not an image
  • Calculate your breakpoint based on min/max font size and line length
  • Provide vertical scrolling if the viewport is not high enough

Long read:

We established that users actually need to read the document including their inputs, and it will not be printed. The target audience is not very digital literate.

I doubt keeping a fixed preview layout by all costs provides any value. Even in full width, the font size in the document on a 320px viewport will not suffice to be readable.

In terms of accessibility, it's even worse: text in an image is not accessible at all, and all different kinds of users will have issues reading it.

You can still provide a "document feel" to users by means of visual design, while keeping that document layout responsive and optimised for reading.

There are some constraints like minimum and maximum font size and line length for the preview. Calculate your breakpoint from these constraints, not the other way around.

Where the viewport is wide enough to allow for a side by side view within the constraints (the breakpoint), it might not be high enough to cover the document.

In these cases I would recommend scrolling. You could help users identify which text parts they are changing by highlighting the text parts in the document and scrolling to them when they are focused.

Reading the document is actually a required action, so I would recommend to place your Submit button after the document in reading-direction. Namely bottom right.

Improve this answer
1

I'd do two things:

1.- I'd place the input directly above the preview.

input over form

2.- Also, I'd use scrolling to keep view centered on current highlighted information.

That way the customer can know exactly where their input will go in the document, and they won't need to go back and forth to the form and back to the preview, which can get annoying very fast, specially if there are many fields to fill, or specially if documents are long.

Hope that helps

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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