Maybe you are in a brainstorming session and sketching on the whiteboard various ideas. Like building a product or service, annotating your wireframes is an iterative process. If you annotate after you have finished all of your wireframes, you may have forgotten how you intended something to work or what your thought process was behind a decision. ![]() After you finish all of your wireframesĪnnotating as you go along and are doing the design helps you think through how something is going to work.There are 2 minds of when to annotate your wireframes: Example of annotations on a web page wireframe showing different types of functionality. Sometimes the reasoning is too complicated to put into an annotation, in which case I usually create a separate, attached document that shows the decision process, usually in user flow format. There is a vast difference between an annotation that reads, “Show first 10 new messages” and one that reads, “Due to possible hundreds of new messages, only show the first 10.” The more you can document your thought process and the decisions you made, the easier it is to explain your work, justify your choices, or fix it in case you’ve made a wrong decision. Anything with a business, logical, or technical constraint - e.g., the longest possible length of a password field.Īnnotations have to capture not only what is being displayed (and where and when), but also why.Anything that, due to space, could not be shown on a wireframe, e.g., every item on a long drop-down menu.Links and buttons - what happens when they are clicked, hovered over, tapped, and visited.Any items that are conditional - when and how they should be displayed.Just make sure the text you include and its intended use are clear. You can include example text in multiple ways. Indicating what the element on the page is in each annotation is a small, but useful thing. To learn more, see our documentation on using Markup. Note: In Balsamiq, the annotation controls are located in the Markup category of the UI Library. The numbers are then listed again on the side or bottom of the wireframe with the text explanation. The numbers in the wireframe should have a sharp enough contrast (generally with a circle around them) to stand out from the design. ![]() The clearer you make the actual wireframe, the less you will have to explain in annotations.Īnnotations are often shown using numbers. Separate your annotations into 2 main sections: content and functionality.ĭevelopers will mainly look at the functional notes, copywriters the content ones, and everyone else will pick and choose between both.īe smart about what you put in the wireframe and how. Include reasoning or scenarios to back up your decisions. Help out your developer friends, and be clear about what you want an element to do. When looking at a static screen it is easy to make assumptions about what something does or what the content should be for that element. While you can indicate that something should be interactive, such as a button, the developer doesn't know what to make that button do without your explanation.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |