User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm designing an interface, and I'm currently creating a wireframe to guide me before developing it. I know that a particular form will make suggestions, but if I were to, say, get another developer on board, I'd have to make sure that they know.

So the question:

I know I don't need to do anything but type somewhere within the frame, "this should suggest [something]," but with modern interface design paradigms in mind, I can't help but wonder if there is a standard way to indicate something like this within a wireframe for front-end developers.

Is there?

share|improve this question
up vote 3 down vote accepted

Assuming you're using a wireframing format where you can hide dropdown elements to see what's behind them, it's fairly common to show the autocomplete form with a few letters typed and a few rows appearing below it.

Some examples from pattern libraries are:

enter image description here
from the Yahoo Design Pattern Library

enter image description here

enter image description here
from's Patterns in Interaction Design

If you don't have multiple layers in your wireframe, just writing "This autocompletes" in a textbox should be fine.

share|improve this answer
Ahh... Alright, I sorta assumed this was it. Thanks a lot. – Mr_Spock May 9 '13 at 2:25

I usually just annotate the wireframe with a note:

                        |                        |
 Search:               /    Search field uses    |
 [ enter search term ] \      autocomplete       |
                        |                        |

But this does raise a bigger question: How to annotate interactive elements in static wireframes? An autocomplete field is fairly self explanatory, but things can quickly become complex when we start adding scrolling, animations, sorting, drag and drop, hovers, active states, etc.

One solution is to have or reference a pattern library, where said library would have visuals, working examples, and maybe even sample presentation layer code for your developers to base their work off of.

Then, in the wireframes, you can reference the pattern library as needed.

share|improve this answer

Well, Have you considered using simple "X" in some bright color like red? A bright color attracts users attention immediately and will be easy for the developer too to understand it. Similarly you can use '✓' in green if the information entered by user is correct.

share|improve this answer
You misunderstood the question. I'm strictly asking about wireframing. (creating mockups) – Mr_Spock May 9 '13 at 1:58
I don't think there is any "standard" way to indicate such occurrence while working on wireframes or none that I have come across till now.. I would have followed your "this should suggest [something]" that is simple and and easy to understand. – Chandan May 9 '13 at 2:08

Your Answer


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.