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.

Everyone most web users understand that the asterisk (*) indicates that the fields on a form are required. But what about non-standard symbols?

Our UX team is currently working with an application dev group where there is a need to flag special functionality related to specific text boxes. In this particular case, this new flag would indicate that the related text box accepts wild card characters.

Mockup Example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

What would be the best way to indicate special functionality that is related to a particular set field(s)?

share|improve this question
    
Are some fields required in this ? –  Mervin Johnsingh Jan 8 '13 at 13:43
1  
In this screen no, but I cant say all screen that might require this functionality wont. –  JeffH Jan 8 '13 at 13:46
1  
I would like to know why some fields can accept wildcards, while others cannot? Would it perhaps be possible to see a mockup that more accurately describes the real situation? –  JOG Jan 9 '13 at 15:25
    
@JOG for the most part the mockup shows what the screen will look like. The reason for the restrictions are a technical issue with the back end system. This is not in my groups control as we have separated front-end and back-end development. –  JeffH Jan 9 '13 at 16:23

7 Answers 7

up vote 2 down vote accepted

Mint by Shaun Inman had 'required' labels in the form:

enter image description here

Instead of 'Required' labels you could have 'Wildcard' labels

share|improve this answer

Putting a small label "wildcard" with a mouseover tooltip indicating that "this text box accepts wildcard characters" could be a solution.

You can put this label above on the left of the text box or, if your text box title is to large, below.

share|improve this answer

icc97 beat me using the image I was going to use :) but considering the use case that some fields can be required and also support wild card charecters, I would recommmend using a combination of both the * and the required tag as shown in the example used by icc97

enter image description here

So your screen would look like this

enter image description here

The required tag label can be used to denote when a field is required and the asterisk can be used to denote that a wildcard is accepted in the text entry. The asterisk off-course must be denoted in in a legend below. With regards to the positioning of the asterisk I recommend looking at this article * Is This A Required Field? and the article The UX of Required Fields

I also recommend looking at this excellent question What's the best way to highlight a Required field on a web form before submission? to get additional inputs on how to position the asterisk and highlight a legend

share|improve this answer
    
As the asterisk symbol seems to be universally accepted as denoting 'required'. I think this method would be better using the label tag for 'wildcard' and continue the use of asterisk for required fields. –  slawrence10 Jan 9 '13 at 15:46

Why flag for where something is allowed, instead of flagging when something erroneous is entered:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

As @mervin points out below, different functionalities of the different types of fields should be visualized. "Special functionality" though, as the OP describes it, is hard to visualize. The problem needs to be either written out in text, or resolved, for example by finding a way to let all the input fields have the same functionality.

share|improve this answer
    
I am not too sure about this, though inline error validation is very useful,if you can prevent an error it would be good. Imagine, I write a complex regular expression in the last name field to try and find someone and find out that special characters are not allowed and I need to find some other way. Also without some legend how does someone know that wildcard characters are supported ? –  Mervin Johnsingh Jan 8 '13 at 14:18
    
You are right, the different functionalities of the different types of fields should be visualized. I will add some text to my answer. –  JOG Jan 9 '13 at 15:33

I often see option symbols in Pizza menus:

enter image description here

Pepper sign here means "extra spicy" (or even several signs with different number of peppers to visualize different stages), there also may be a "vegetarian" sign, etc. And at the end of the every page of the menu there is a legend describing every sign.

So, I think that it's okey to use non-standard symbols which will allow your users to quickly identify different types of inputs and understand how they're working, just don't forget to describe them these signs somehow:

enter image description here

share|improve this answer
  1. It looks like all your fields allow wildcards. Except Middle Initial, so why not make it support them as well?

  2. Also, do your users really make use of wildcard capabilities? Have they demonstrated a need for such? In my experience, substring match is usually sufficient, and in fact people expect substring matching.

  3. Then, put a banner message above the fields:

    "These fields support [[wildcards]]." (with a hyperlink to usage information)

    Or quick instructions:

    "Fields will also match substrings (e.g., 'Sam*' will match 'Sam', 'Samantha', and 'Samuel')."

share|improve this answer

It's a good idea to keep the * for required fields and if you don't want to clutter the UI you could add an extra label inside the 'wildcard' fields with example of accepted characters.

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.