3

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?

2 Answers 2

3

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.

1
  • 1
    Ahh... Alright, I sorta assumed this was it. Thanks a lot.
    – Mr_Spock
    May 9, 2013 at 2:25
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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