Design to Dev App Handoff – Don’t Drop the Annotated Doc
- #DesignSpecification
- #Methodology
UX wireframes without documenting interactions with annotations is a risky game.
Imagine designing a complex business application with many features such as sorting, different navigation, animations, or special interactions that can’t always be conveyed in the design of the wireframe itself, especially when the output is just jpeg images.
And now imagine handing this app design over to your developers, only to result in a totally different application with features that were not what you expected. Time lost, money wasted, and more rounds of revisions mean a late Minimum Viable Product (MVP).
UX design wireframing software tools have robust capabilities to make interactive wireframes, so it’s true that many of your ideas can be recreated that way and shown to other teams. But for what interactions you can’t design, you will need to annotate. Wireframe annotations are just as important as the wireframe itself when considering how many eyes will be seeing them. For instance, developers rely on UX design annotations when building-out the interactions or styles to ensure that they align with the UX design team’s intent.
Save time, money, and design iterations by using annotations within your wireframing software tool. One particularly useful wireframing software tool is Axure RP 8 because we can quickly create wireframes with sophisticated interactions, collaborate with others, and easily annotate.
How to Make Annotations in Axure
- Writing annotations as notes attached to the design element in question. This is done by clicking the design element in the editing window and opening up notes on the top right pane. Notes will show up in Axure’s collaborative platform called Axshare, when you go to share with your colleagues.
- Embedding notes directly into the prototype as a text box. These will show up as part of the prototype and if you export the prototype, the notes will show up as well. This approach can work in a pinch, but it is not as flexible for resolving issues or responding to comments. I have done this sometimes when needing to explain a user flow or screen flow, so embedding notes does have its purpose.
- After making annotations, open up your wireframe in Axshare, where you can view comments, reply to them, and mark as resolved. This is the perfect tool for UX design teams to collaborate and get work done quickly and in real time.
Final Tips
Remember to keep your annotations short – no developer (or anyone!) will read a paragraph of information. If it’s a whole paragraph, consider if that is something better conveyed in a conversation.
Annotations should be simple app design specs that are one or two sentences to describe an extra feature you weren’t able to design or would be too time consuming.
Finally, if you ever need to refer back to a previous design, annotations will help familiarize you with old designs that you may not have looked at in many months or that were done by another UX designer.
- #DesignSpecification
- #Methodology
Abdul has helped over 40 Fortune 500 companies make informed user-centered design decisions through evidence-based user research and UX best practices. As an Adjunct Professor, Abdul has taught in DePaul University’s graduate UX programs and for nine other universities.
