Wireframes and Mockups
Below are a few of the mockups and wireframes developed for the Arcadia project:
For a printable pdf click here.
The system illustrated here allows users to compare multiple versions of any given text (in this case Arcadia) to other versions. As you compare versions you will be able to either hover or click on links for annotations to be populated in the field under the text. In the high fidelity mockup the following is illustrated:
- Bold/italicized/dark blue text: Text change after click. Allows user to see what they clicked on so they don't get lost.
- Blue text: Indication that annotation exists for that sentence.
- Menu on right: Example of hover and drop down select for editions/versions. (Editions listed are placeholder text unrelated to Arcadia)
- Example of scroll bars: The main areas' scrollbars would be linked, so if you scroll in one section it will scroll the other. This is to make comparisions simpler.
- Arrows on side of screen: Indicate an option for pagination.
- Bold number at beginning of text: The number of the section/page/stanza/chapter.
Possible usability features in this system
- Swipe left or right with finger for pagination. Mobile (tablet) friendly/touch screen support.
- Keyboard arrow keys (left/right) for pagination