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.

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
add comment

3 Answers 3

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
from CollectionSpace.org


enter image description here
from Welie.com'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
1  
Ahh... Alright, I sorta assumed this was it. Thanks a lot. –  Mr_Spock May 9 '13 at 2:25
add comment

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
add comment

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
1  
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
add comment

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.