2

I am working on a form page that has a name field, including Prefix, First Name, Middle Name (NOT Initial), Last Name and Suffix. The client would like to have all these fields on one line. So here's the challenge, our width is limited to 960px and we are locked into a 16px font.

The project is pretty far along, but I'd really like to figure this out as it would make the client very happy. However I'd like to do it without making it too complicated.

I considered placing this as a form that they complete and then it collapses just displaying the name in it's entirety. Then having an edit button to the right of the field in case they need to go back and change it. This would look cool, but it is extra steps.

Is this something that is even worth pursuing? Has anyone seen it done better/similar? Thoughts?

Current Layout Added a screenshot. It follows the pattern of the remainder of the site, but this is the only place where I'm having an issue. The biggest problem is the font size and the restricted width. Trying to fit this all one line, I tried a couple of things. The first was to have this as an open module and upon completion, collapsing it to a display field of one line going across, leaving an edit button in case it should need to be changed. The second was the google contact method where the user enters all the information one one line then clicks a button to distribute the entered information to the correct fields. Neither of which the client liked. Hence my posting the question here.

Improve this question
6
  • 4
    Is there a specific business-logic reason for the different aspects of the name to be separate fields? Whenever possible I try to bias toward having one more free-form field -- kalzumeus.com/2010/06/17/…
    – asfallows
    May 23, 2014 at 19:11
  • There is, the fields are related to an existing database. Some alterations have been made, but any additional are out of scope.
    – Johnny UX
    May 25, 2014 at 3:36
  • Have you asked, why client want that? On a screenshot it looks unfamiliar and strange. Why regular name-value form is not an option?
    – ADOConnection
    Jun 3, 2014 at 19:27
  • It seems that the lines you have for first middle and last names are unnecessarily long. Have you tried cutting those lines down? For example make the line end where the label ends.
    – Aust
    Jun 4, 2014 at 19:13
  • The fields are maintained independently within the database and the client will need to do so.
    – Johnny UX
    Jun 4, 2014 at 23:14

2 Answers 2

Reset to default
0

One step you could take to give yourself more horizontal space is to place the labels above the corresponding fields, rather than next to them. Luke Wroblewski did a study http://www.lukew.com/ff/entry.asp?504 which showed that having the labels above the fields actually makes the form easier for users to complete.

I think there is nothing wrong with having the fields change to static text, as long as 1. It is really necessary. And 2. You user test it to make sure it is clear to users what has happened and how to edit the fields.

Improve this answer
2
  • I actually place the labels before the form field so they would emulate the legal forms the data is being used to complete. Looks pretty cool. Hope testing goes well.
    – Johnny UX
    May 25, 2014 at 3:38
  • Sorry, meant under the form field, with only a line.
    – Johnny UX
    May 25, 2014 at 3:41
0

Do you have the capability to dynamically sync the data entered in the input fields? If so, you can provide feedback to the user like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
7
  • 1
    My apologies. I'm not sure I'm following this example. The users will not be entering names that are guaranteed to be included in the data. I'm also looking for ways to incorporate the prefix (Mr. Mrs., etc..) and suffice (Jr. III)
    – Johnny UX
    May 25, 2014 at 3:40
  • The light gray names are placeholders. They go away when the user selects the field. They're not necessary in this case. And then all that's left is your prefix.
    – SwankyLegg
    May 25, 2014 at 3:42
  • And suffix, I don't think this is a viable solution. Thank you for trying.
    – Johnny UX
    May 27, 2014 at 20:51
  • I updated my wireframe to better describe what's going on. The notes (in yellow) are steps and what's happening. You don't need edit fields, and you get the benefit of UI feedback for the state of the entry (removing the need for an "enter" button).
    – SwankyLegg
    May 27, 2014 at 21:12
  • I understand what you're saying now, but I never needed an enter button, this is part of a much larger form. I still don't see how this will fit within the space allowed. Please read the question for requirements.
    – Johnny UX
    May 30, 2014 at 18:48

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.