Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Platform: iOS. Must be able to run on all (probably most) iphone devices.

As part of a smartphone application design, I am currently designing an "event creation" form, originally implemented in a web form.

The web form has 5 steps (which I am trying to reduce as much as possible).

One particular step (illustrated here as step 3) requires the user to create an event. Due to screen real-estate being low, I am looking at different ways to present the form fields.

Attached are two quick designs I have started with.

Design A: I have used text input field with the descriptive text inside the field.

The required fields are red. I may change this as I am not 100% happy with this. This is another question that I need to answer.

Design B: I have also shown Design A with no red required fields.

Design C: I have placed the descriptive text above the input field.

My personal opinion is that, comparing designs A and C, design A is much clearer and easier to read than design C. enter image description here However, I'd like some criticism as to both designs.

NB: This is step 3. Both screens in the designs are showing Step 3, even though there are two screens in the step.

share|improve this question
2  
just a hint: you can actually use Balsamiq on UX Exchange, you don't have to upload screens. You can import your .bmml code. –  Roland Studer Aug 29 '12 at 12:23
    
Hea there, thanks for the tip. I didn't know that. Excellent. –  Bernard Tyers Aug 29 '12 at 12:26

2 Answers 2

I would agree to the cleanness of the A over C. I would make sure that the "placeholder" text looks more like the "postal code" field (grayed and italic).

I also like the coloring of the required fields. The downside to this though is that some users may only fill in the minimum required to continue which would be a lost of good data that could have been obtained by not coloring the specific fields.

I hope this helps.

share|improve this answer

I am going to go with approach C.

The reason being while Inline labels are great for saving space and serve the purpose of informing the user as well,they have a very distinctive disadvantage that the text disappears when the user selects the field and if the user does not know what the field stands for he might get confused and would have to clear the entire data entered to check if he was entering the data in the correct field (this is assuming the moment ,the user focus shifts from the selected field, the label returns in case the field is empty).

I would recommend going for the approach of top aligned labels. This article about Mobile UX form design has this to say about the benefits of Top aligned labels

Each label alignment has pros and cons. When designing a Web form, it’s more important to choose one which suits to your form purpose, design constraints and so on. However, for mobile forms, horizontal labels (left- and right- aligned) should be avoided. When users click on an input field, the page is often automatically zoomed in to focus on the field. If horizontal labels are used, it is almost impossible to view both label and input field in one screen. In addition, due to small screens, it could be tricky to show long labels if horizontal labeling is used on mobile devices (e.g. Virgin Blue mobile version of manage booking form).

These problems can be avoided by using top aligned labels.

If you must use the inline text for some reason, use it for providing hints as to the format of data to enter

enter image description here

With regards to color coding your mandatory fields, I am not sure how effective that would since that's usually not common practice and I would recommend going for a * to indicate a mandatory field. The reason being that having the * (in front of the label or field) has become some what of a de-facto standard with regards to a form field being mandatory and coming up with a new design might just confuse people about whether its mandatory or not.

This article by Smashing Magazine provides an alternate approach where it explicit suggests putting a required field next to the label

You can position required field markers in one of two places:

  • Next to labels, allowing users to scan the form quickly,
  • Next to or inside input fields

Lastly, since in your design only two fields are not required (as per step 3) you can just mark the non-mandatory fields . Here is an interesting article which talks about that :

Always Mark Optional Form Fields Not Required Ones

To quote it:

To make the user’s life easier, you should quit marking the required fields and only mark the optional fields. This is because users usually come to forms already expecting to fill everything out. It’s implicit in the nature of forms, so there’s no need to explicitly tell users what they need to fill out. What’s more helpful is telling them what they don’t need to fill out because it cuts down their work. The only time a user would question whether a field needs filling out is if the information that you’re asking for is something they really don’t want to give you. For this reason, it’s important that your form only asks for information you absolutely need.

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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