5

I want to know the preferred (and why it is good/bad) way to show a long form with multiple sections, which have content that should be in multiple languages (if multiple language is supported)

The site is more or less like a web-based erp and it should be responsive to mobile version (at worst, 320px wide screen) and the forms can contain up to 15 form fields per section.

Currently, I used tab model for dividing the sections, which changes into a dropdown selection on small screens. However, I have doubts about the language stuff. There could be only 1 field with multiple language opt, but there also could be 7 in a section.

I'm thinking about having another tab section inside the section with multiple language content, which grouping the content with language support for easy editing/input. But this means that the form flow might not be as good as before (since there's a chance that [Item Title] located on the bottom part of the section instead of being at the top). Not to mention if there's only 1 field, the tab would be an overkill.

Layout

UPDATED: By multiple language, I meant more for content (anything that comes from user filling up the forms, ie. item description, item title).

Improve this question
7
  • Could you elaborate on what you mean by multiple languages? Would a single user fill out multiple tabs for different languages, or would they fill out a single tab? By multiple language do you simply mean the form is identical, it's just in different languages?
    – michael
    Jun 25, 2016 at 5:02
  • By multiple language, I meant more for content (anything that comes from user filling up the forms, ie. item description, item title). So yes, the user need to fill out multiple tabs for different languages.
    – margie
    Jun 25, 2016 at 9:03
  • Okay, so by multiple language support you don't mean true support for multiple languages in the sense someone enters "blue" once and your app automatically translates it to all the supported language. Your users would actually be the ones doing the translating? So I'd type "blue" on the en tab, "azul" on the es tab, etc.?
    – michael
    Jun 25, 2016 at 16:32
  • yes, that's correct.
    – margie
    Jun 26, 2016 at 8:17
  • Is the form used by end customers or staff of a business. Ie staff working in warehouse/shop or customers purchasing from the business?
    – Stephen Keable
    Jun 28, 2016 at 9:07

2 Answers 2

Reset to default
1

I would recommend you embed a list interface into your form, perhaps using a js application. Show the user that there is a Many to one relationship with localized content associated with this item, then allow them to add new instances as they go. This gives a good indicator of the languages they have already filled in data for, and an indicator that it's possible to add more. You don't have to show all the editable form fields in this list view, just a placeholder, or perhaps a quick preview of one or two fields.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
0

Tab option seems to be rather confusing because most tabs are known to users as navigation. A simple language drop-down option for both screen size would work better but would do it at the top of the page as a language toggle. You can always run a quick usability test or a hallway testing to validate the prototype.

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.