I'm working on a form that will be used to collect pieces of information on a person. The information has two main sections, "identifying" information like name, DoB, etc. and the second section is characteristics about the person, weight, height, etc.

Below is what I currently have but it seems unfriendly to me, I don't know how, I just am not a fan of it. Also, are the headers used the best way to pharse the sections? I kind of feel that I am sticking too much text into the area.

6 Answers
6

I don't think your layout is bad at all. I would change the title from "Collection Form" to something more descriptive like "Personal Information". You also might want to communicate some reassurance that the info will be held securely and not abused.

The the section headings "Identifying Information" and "Characteristics" strike me as superfluous.

The horizontal rule lines under the headings could be removed and sectioning achieved simply with grouping/spacing (with or without the headings themselves). Other sectioning mechanisms include box backgrounds:

Just light backgrounds without borders to keep it from being too heavy.

This is all subjective - how much distinction do the sections need? I question whether they need any in your example. I'd be inclined to remove the headings and the horizontal rules, minimize it if you will, as it's all pretty much self identifying, and I question whether there is conceptually the need for 2 sections.

It depends how specific you need the information to be. Things can often seem "friendlier" in UI's if they are less specific or require less accuracy. This would allow you to use less text in favor of some graphic features. This may, however, have an impact on the outcome of your data and the amount of space required to get the form onto the screen.

Maybe this is a useful analogy:

Imagine that you go to an ice-cream parlor with your friend. You walk in the door and are handed a slip of paper with a series of options and checkboxes. You are asked to fill out the form and hand it to someone standing at a cash register, who then asks you for money. Following this exchange you are handed your ice-cream with the toppings you requested, are politely thanked, and then are asked to move along to make room for the next customer.

That would not be a very friendly way to serve ice-cream.

By comparison consider an ice-cream shop that prides itself on the customer experience. This example is an image of Cold Stone Creamery. Cold Stone Creamery Serving.

Why not use silhouettes of a boy and girl for the gender selector (I am being simplistic here because the actual question may be more complex but I see no reason why you can't make a gender neutral way of using graphics).

Why not create a picture of an eye and let people use a color selector to actually modify the color of the eye to match their eyes... or their perception of their eyes. The same could be done for hair.

For decent you could let people pick where their ancestors are from on a map.

For height you might allow people to select from various famous figure who are different heights.

The problem, as you might already see, is that you sacrifice efficiency if you try to be too friendly - much like in our ice-cream parlor.

So - try to draw a balance. Consider what might make the experience, not just the appearance, a little more appealing and also think about how the balance of time spent vs. "friendliness" might affect the actual UX.

I have spent 30 years writing transaction systems I realised a long time ago that these types of entry screens are rarely friendly just because they are extracting data from the user who gets little or no reward for their effort. The suggestions for lightening it up and moving some fields were good and ensure that the tabbing gets the User through the process quickly is the best you can do for them.

You wondered if you were inserting too much text and I would answer No. Each entry field needs to be identified and units of measure removes ambiguity so the user should be able to complete it with a minimum of effort. The text used to identify the entry should match the formality or informality of other forms that might be used so "Eye Color" is appropriate for more formal applications and "What color are your eyes?" for the informal.

Every entry form is important or it would have been written but judgements need to be made on how much agonising is needed. I suspect this form will be fill in once and then rarely if ever seen again so make it as efficient as you can with due consideration to how it looks and fits with the rest of the application. However put your major efforts into the screens that get used over and over by the users.

In GUI software there are two possibilities of grouping and separating blocks of input data. The first one is frame or bevel and it marks the entire block (please forgive the quality of examples, as I was able to do this only using VBA form editor of MS Word 2003, but they are representing the ideas):

In this case basic data like names are clearly more important that the Characteristics group of inputs.

The second way, when there are more auxiliary data to be inserted, we use tab (or page) control:

Here the separation effect is yet much better. When user changes tabs, the basic data still stay on top, so they are always visible and it is clear they are more important, because user can change the tab, so he knows the data is not that much value, because it is no need to be seen all the time.

In your case, as it seems you'd like to have it look like a paper form, consider putting the Characteristics chapter in box. This don't need to be a box, a single line on the left and margin could be enough,

like this text that is used to mark quotations. If you indent it, mark with the line on the left side, this would make a block, clearly separated from other text.

What you could also try is asking for information in a different way, more similar to what a human being would ask, for example "What's your eye color?" "What's your date of birth?". That would probably imply that you organise differently the fields, which could also give some space and improve legibility.