Annotated Wireframes
- 26.02.2010
- Posted by Jonathan Firestone
- Annotated Wireframes ,IA ,Information architecture ,User Experience ,UX ,Wireframes
Task Summary:
Produce wireframes that were clean and easy to understand so even a developer not that familiar with the chosen technology could build the application quickly to specifications.
Project: PeopleIQ
Format: OmniGraffle & Microsoft Word
This application (PeopleIQ) is a Rich Internet Application based on Flash 2004 MX, with Java and a mySQL back-end. We went for Flash 2004MX in preparation for an eventual move to Adobe Flex after initial product launch. We’d include a Word based companion document, showing numbers in the Wireframe align with functionality notes help further explain the need for features and behaviors. This wireframe includes references to data elements that were found in a separate schema and reference list so data remains trackable in a convenient check-off list.
Project: Verizon Developer Center for Mobile Web
Format: Axure RP Pro, HTML, CSV
Axure is a wonderful tool that allows you to produce wireframes that you can build simulated functionality into. From the build you can generate screenshots, object tables containing footnotes on all actions as well as plenty of other usable documentation, in several formats. One of the best aspects of this an export of HTML wireframes you can use to actually experience the results. You can make the wireframes as low or high fidelity as you care to manage. This project was perfect for Axure — it called for a new website, community forum and social media campaign built around the concept of Verizon supporting the development of pages for the Mobile Web 3.0. You can see the results of this work at:
http://developer.verizon.com/jsps/devCenters/Mobile_Web/index.jsp
Documentation Example:
Mobile Web Dev Center Home
The Home Page represents everything that’s planned for coverage in this particular “Dev Center”. The expectation has been set by the content team that as far as navigation (and IA) is concerned, we can take away any one menu item, but not add any. Nor can we visibly tree the list like you see in the “Community and Support” pod. Once you’re past the primary sub-navigation, you can do whatever you like below that point.
One of the conceptual problems is trying to promote Mobile Web 2.0 and 3.0 at the same time. We’re unable to have more than one dev center for it, so we must merge the two at this time. For this round of submissions, the three sections our team is responsible for in terms of supplying content are “Getting Started”, “Technical Resources” and “Go-To-Market”.
