Creating Lucid Spec documents for existing applications
I spent several hours using Lucid Spec to explore possible enhancements to an existing application, and I'd like to describe some of the issues I encountered and how I approached them.
The application's user interface is similar to Outlook and other apps. There's a menu bar and tool bars across the top, a tree-like menu down the left side, and the remainder of the window contains a panel or a set of panels. The application performs complex, multi-step mappings, and I wanted to explore ways to help users visualize the steps and their contents. I didn't need to reproduce the entire application in Lucid Spec, but I did need to be able to simulate many of the key panels. I considered several approaches.
First, I could focus only on the parts of the app directly related to my goal of visualizing steps, and simply ignore everything else. This "low res" approach is a bit like paper prototyping. However, some of the people who would be looking at the spec might be confused by the visual differences - my quick low res mockup wouldn't look much like their familiar application.
Second, I could try to replicate large parts of the app in Lucid Spec, so that my mockup would look more like the actual application. Given the number of menu and toolbar items, and the complexity of many of the panels in the application, this would be difficult and time consuming, even if I didn't try to match all of the colors, styles, and fonts. This approach might make more sense if we were planning a complete GUI redesign, but it seemed like overkill for my more limited goals.
As usual, truth and beauty lie somewhere between the two extremes. I wanted something visually similar to the original app, but which would allow me to focus my time and attention on a few key pieces. This led to a third approach, which worked pretty well. I captured screenshots of the app (with SnagIt), imported them into LucidSpec, positioned transparent rectangles over the widgets that I needed to link to other screens in the short term, and then added new screens and widgets for new functionality. No problem!
Actually, it did take some work. All of my screenshots shared a menu bar and tool bars, and many also shared the menu on the left side of the screen. So first, I used SnagIt to remove the content panel from a screenshot (leaving the window frame, menu bar, and tool bars), and used that as the background image for a master screen in Lucid Spec. Second, I trimmed a screenshot so that it contained only the left menu, and inserted it as an image in a second master screen, based on the first. I then trimmed the other screenshots to show only the relevant panels, and inserted each as an image in a new screen, based on one of the first two master screens. Once I had all of the screens I needed, I went back to the master screens and added transparent rectangle widgets over the key controls, and linked them to the appropriate screens. I could now simulate the original flow between screens & panels! Using this as a basis, I started experimenting with other ways of presenting the steps and their contents.
I found myself wanting a callout or postit note widget that I could use to annotate the original screenshots.
One more thing for the future feature list for Lucid Spec, I suppose.
In the future, we might try to make this sort of project easier to accomplish in Lucid Spec. If this is something you need or would really like to see, or if you want to suggest possible approaches, please let us know!
The application's user interface is similar to Outlook and other apps. There's a menu bar and tool bars across the top, a tree-like menu down the left side, and the remainder of the window contains a panel or a set of panels. The application performs complex, multi-step mappings, and I wanted to explore ways to help users visualize the steps and their contents. I didn't need to reproduce the entire application in Lucid Spec, but I did need to be able to simulate many of the key panels. I considered several approaches.
First, I could focus only on the parts of the app directly related to my goal of visualizing steps, and simply ignore everything else. This "low res" approach is a bit like paper prototyping. However, some of the people who would be looking at the spec might be confused by the visual differences - my quick low res mockup wouldn't look much like their familiar application.
Second, I could try to replicate large parts of the app in Lucid Spec, so that my mockup would look more like the actual application. Given the number of menu and toolbar items, and the complexity of many of the panels in the application, this would be difficult and time consuming, even if I didn't try to match all of the colors, styles, and fonts. This approach might make more sense if we were planning a complete GUI redesign, but it seemed like overkill for my more limited goals.
As usual, truth and beauty lie somewhere between the two extremes. I wanted something visually similar to the original app, but which would allow me to focus my time and attention on a few key pieces. This led to a third approach, which worked pretty well. I captured screenshots of the app (with SnagIt), imported them into LucidSpec, positioned transparent rectangles over the widgets that I needed to link to other screens in the short term, and then added new screens and widgets for new functionality. No problem!
Actually, it did take some work. All of my screenshots shared a menu bar and tool bars, and many also shared the menu on the left side of the screen. So first, I used SnagIt to remove the content panel from a screenshot (leaving the window frame, menu bar, and tool bars), and used that as the background image for a master screen in Lucid Spec. Second, I trimmed a screenshot so that it contained only the left menu, and inserted it as an image in a second master screen, based on the first. I then trimmed the other screenshots to show only the relevant panels, and inserted each as an image in a new screen, based on one of the first two master screens. Once I had all of the screens I needed, I went back to the master screens and added transparent rectangle widgets over the key controls, and linked them to the appropriate screens. I could now simulate the original flow between screens & panels! Using this as a basis, I started experimenting with other ways of presenting the steps and their contents.
I found myself wanting a callout or postit note widget that I could use to annotate the original screenshots.
One more thing for the future feature list for Lucid Spec, I suppose.
In the future, we might try to make this sort of project easier to accomplish in Lucid Spec. If this is something you need or would really like to see, or if you want to suggest possible approaches, please let us know!
0 Comments:
Post a Comment
Links to this post:
Create a Link
<< Home