Effective GUI Design with Lucid Spec - ' Creating a Simple Design ' (
Page 2 of 5 )
Creating a Simple Design
I worked with Lucid Spec in my usual way, starting with running through the tutorials (there are three) and scanning the documentation for product highlights. Both tutorials focus on Web applications, which probably isn't a bad idea considering the focus on Web applications today. I went through all of the steps for the hands-on tutorial and created a simple Web application specification. However, it would have been nice to see other application types as part of the tutorials (you do get a sample of a non-functional Windows application named VCR in the Samples folder). Therefore, I decided to create a Windows application for my first design project.
ADVERTISEMENT
You can probably design any application you want with Lucid Spec. However, the product does seem designed with Web and Windows Single Document Interface (SDI) applications in mind. I thought it was interesting that you can create a background for your application that makes it look like it's executing in a real environment. However, all of the supplied background images are limited to Internet Explorer, Firefox, and Windows SDI. Since I wanted to create a specification for a server status application that relies on dialog boxes, I needed some way to show a dialog box.
Because I'm naturally curious as to how far a product will go, I decided to start by grabbing a screenshot of a completely blank dialog box and saving it in GIF format. However, you can't simply capture the screenshot and expect it to work. You must fill in the functional area, the area that will receive the controls, with a specific background, such as blue, and then set that color as the transparent color. The technique you use for setting the transparent color depends on the graphics application you employ, but you must set the transparent color. You won't find this technique anywhere in the Lucid Spec documentation or on the Web site; I happened upon it as I reviewed the product. Figure 1 shows one of the custom dialog boxes I created.
Figure 1: You can create custom dialog boxes, but the process isn't as easy as it could be.
Figure 1 also shows the basic layout for any project you create. The Overview section provides you with a place to describe the entire project. The Screens section provides a place to create the screens for your application and link them together. The Appendix section provides a place to put application notes.
However, the entire structure is completely flexible. For example, you can add a Templates section where you can store the templates for your application design. The School Wide Information System project provides the most help, in this case; it has a number of design elements that include UML terminology such as actors. This project also includes a terminology section that I would suggest anyone creating a serious project employ.
It's important to remember that the project you create doesn't have real code to back it up. Consequently, the simulation for the dialog box assumes that the application always succeeds when the user clicks OK and always fails when the user clicks Cancel. Of course, the real world works differently. The user could enter an incorrect username or password. You address these deviations from the planned course of action by adding footnotes to each of the controls, as shown in Figure 2.
Figure 2: Use the top-level view of the project to see the details of your project, including footnotes.
For example, the footnote for the OK button says that the user will see the Query Servers dialog box for a successful login, and an Access Denied dialog box for a failure. You can add any number of details. As previously mentioned, this is a communication tool, not necessarily a pure design tool.
/ 2 
