Elegance Technologies, Inc.

Quick Tour

Lucid Spec is definitely superior to the Visio and MS-Word combination that I used before. It provides the best way for me to get my GUI specifications done quickly and clearly!

Chuck Buchanan
Principal
Buchanan Consulting & Services

I am glad to see a product as useful as this one. It has enabled our company to design and/or modify GUI specifications more quickly and efficiently and with the simulation 'see' the desired functions/actions. An added bonus is the ease of creating supporting documentation in the same application.

Randy Friend
Product Manager / VP Customer Care
ProphetLine, Inc.

Lucid Spec takes WYSIWYG to a new level: WYSIWYG FYD (From Your Developers)! It's an easy-to-use, all-in-one, user interface design, visualization, and documentation tool. The cost savings of all the back and forth time between our design and development teams has paid for Lucid Spec many times over. I was thrilled to have discovered it; an excellent design and communications tool with no programming required.

Marcia Pearson
Vice President
ComputerXperts, Inc.

Using a tool like Lucid Spec has allowed our marketing team to identify potential problems like navigation issues, confusing interfaces and missing content early in the process. This has helped us avoid costly change orders with our outside software developers. These savings easily offset the cost of Lucid Spec on the first project.

J.J. Shields
Brand Marketing Manager
Case Construction Equipment

With Lucid Spec, you can rapidly create a software prototype and corresponding software specification. This short tour will highlight some of the capabilities of Lucid Spec. If you prefer, you can also see a video tour, detailed tutorial, or online help.

First, a little terminology. A Lucid Spec document contains 2 types of items:

Screens describe the layout and functions of GUI screens and widgets, such as buttons, checkboxes, grids, and text fields.
Sections include other relevant information, such as descriptions of actors and use cases. Sections can also contain Screens and other Sections, and are used to structure your requirements document.

In Lucid Spec, you iterate among 3 activities:

Design screens and their contents, by positioning widgets on the screen, and adjusting screen and widget properties.
Simulate applications, particularly the flow from screen to screen.
Describe behavior that isn't clear from the layout. Descriptions can be tied to specific widgets or screens, or can be in separate sections.

When you work on a screen, you use tabs to select a mode for each activity.

General Application Layout

This tour is for School Wide Information System (SWIS). SWIS keeps track of courses, teachers assigned to the courses, and students enrolled in the courses.

We open the Lucid Spec document for SWIS, and the window looks like this:

Enlarge Figure 1: Startup view, with summary document in the middle, and supporting panels on the sides.

Figure 1: Initial view, with a section in the middle, and supporting panels on the sides. [Enlarge]

The top of the Lucid Spec window contains the usual main menu bar and toolbar. In the middle of the window is the main document view; it shows the current screen or section. Figure 1 shows a section with an overview of the specification. Sections are also useful for describing actors, use cases, or business requirements.

Lucid Spec has four panels to help you design GUI specifications. At the upper left is the Specification panel, which displays the screens and sections in the current document. Figure 1 shows a section, and thus the other panels are disabled.

Designing Screens

The first major activity that Lucid Spec supports is designing screens. This makes it easy to experiment with different styles and organizations, before the time and expense of normal development. Users and other stakeholders can also review the screens and request changes.

In the Specification panel, we click on the "User Detail" screen under "Screens". The window looks like this:

Enlarge Figure 2: Design mode, with user detail screen in the middle, and supporting panels on the sides.

Figure 2: Design mode, with user detail screen in the middle, and supporting panels on the sides. [Enlarge]

At the lower left is the Details panel, where you can describe the behavior or properties of a screen or widget. If you have entered details for a widget, a footnote appears next to it on the screen. At the upper right is the Widgets panel, from which you can add widgets to a screen. At the lower right is the Properties panel, where you can view or set properties for a screen or widget.

If you have more than a few screens that are similar, you can create custom widgets or template screens. In the Specification panel, we click on the "Master" screen (under "Masters & Templates"). The window looks like this:

Enlarge Figure 3: Design mode, with master screen template in the middle.

Figure 3: Design mode, with master screen template in the middle. [Enlarge]

In the Properties panel you can adjust a screen's size, background color, image, etc. We click on the "Logout" screen (under "Dialogs"). The window looks like this:

Enlarge Figure 4: Design mode, with logout dialog in the middle.

Figure 4: Design mode, with logout dialog in the middle. [Enlarge]

Simulating Applications

The second major activity that Lucid Spec supports is simulating applications. The goal is to demonstrate the flow between screens, without the time and expense of a functional prototype. This helps users and other stakeholders understand the application, and identify potential problems.

In the Specification panel, we click on the "Login" screen (under "Screens"), and then on the Simulate tab at the top of the screen. (In simulate mode, the Widgets panel and Properties panel are disabled, so we close them.) The window looks like this:

Enlarge Figure 5: Simulate mode, with login screen.

Figure 5: Simulate mode, with login screen. [Enlarge]

In simulation mode, widgets on the screen behave normally; you can select items in combo boxes, list boxes, or menus, enter text in text fields, and so forth. You can click on a widget's footnote to see more information. If you click on a button or other widget with a "JumpTo" property, the specified screen is loaded.

We enter a user id and a password, select the "Student" role, and click on Login. The window looks like this:

Enlarge Figure 6: Simulate view, with helper screen.

Figure 6: Simulate mode, with helper login screen. [Enlarge]

Figure 6 is a helper screen. It won't be in the final application, but it lets us simulate different situations without coding business logic. In this case, the home screen is different for each role. We click on the "Student" button. The window looks like this:

Enlarge Figure 7: Simulate mode, with home screen.

Figure 7: Simulate mode, with home screen. [Enlarge]

Figure 7 is a student's home screen, showing their current course sections.

Describing Behavior

The third major activity that Lucid Spec supports is describing behavior which will help to create a concise functional specification. The goal is to capture non-graphic specifications, such as validation and business logic that occur behind the scenes. We've seen this in the overview text section (Figure 1), and in the Details panel during design and simulate modes.

To see the description of an entire screen, we click on the "Describe" tab. The window looks like this:

Enlarge Figure 8: Describe mode, with home screen.

Figure 8: Describe mode, with home screen. [Enlarge]

Figure 8 shows a screen in describe mode, including a screen picture and a table of widget descriptions.

Similarly, we can click on the root node in the Specification panel to see the entire specification, and the window looks like this:

Enlarge Figure 9: Summary of entire specification.

Figure 9: Summary of entire specification. [Enlarge]

Figure 9 shows the entire specification, which can be edited, and printed or exported to other formats.

Next Steps

If you haven't done so already, download Lucid Spec and start creating a functional specification! If you would like to see a more details on how to use Lucid Spec, see the Tutorial. If you have any questions or suggestions, please contact us.