Visual-Based UI Construction Methodology

The Software Engineering Laboratory of NCTU had developed Visual-Based User Interface Construction Methodology [6]. We illustrate the concept of this methodology in figure 6 briefly.

Figure 6. The Concept of Visual-Based UI Construction Methodology

In this methodology, MMI designers use visual authoring tool to compose MMI prototype according to MMI requirements. The visual authoring tool can generate MMI programs. Programmers implement functional and other programs as API library for MMI programs. We can bind the related functions to MMI components, and then produce application utilities very efficiently.

Figure 7 illustrates the detail framework of Visual-Based User Interface Construction Methodology. This methodology supports the UI Visual Requirement Authoring System for UI designers to produce GUI-based requirement scenario and specifications. It also supports the Program Generator to generate the target application system as specified in the visual requirement representation. The programmer can produce the target application system, base on the function binding features provided in the program generator to bind each GUI component with the associated application function.

Figure 7. The Framework of Visual-Based UI Construction Methodology

The main components of this system are described as follows:

1) UI Visual Requirement Authoring System: It is a visual-based authoring tool. The UI designers use the UI Visual Requirement Authoring System to create a prototype of user look and feel. Then one can edit this prototype by adding more text or buttons. The UI designers can preview the prototype and modify it. Once the authoring process is completed, the UI designer has generated a target UI system.

2) MRCs Manager: MRC (Multimedia Reusable Components) is the basic component in visual requirement presentation, contains multimedia data by the object-oriented method. It has its own attributes, and accepts external signal to trigger actions. The UI designer uses the existing MRCs to produce the visual UI prototype via visual UI authoring tool. If there are no existing MRCs, the UI designer uses the component constructor to produce new MRCs and then adds it to the MRCs Manager for further use in the visual UI authoring tool.

3) Template Manager: It is a database management system for managing UI templates, e.g. structure template, layout template, and style template. It provides an interface for adding or deleting UI templates as well as for retrieving an existing UI template. Template constructor can make new UI templates and then stores them into UI template database through the Template Manager.

4) Program Generator: It is a function binding system that generates the program for target system based on the binding of a UI icon to an API function for the underlying device.

When the design of user look and feel is satisfied, the UI designers use the program generator to produce the source code of application. The program generator produces the source code target application system. The Program Generator applies the software framework to generate the source code. A software framework is a platform for representing the visual representation that is generated by the authoring system. Programmers can instantiate a software framework from the generic software framework.

6) Function Library Component: It is a set of pre-defined library. Programmers develop associated functions based on API (Application Program Interface) library functions, and implement them according to the hardware specification. The Program Generator applies this function library to produce source code for target UI system.

This UI Visual Requirement Authoring System is especially suitable for the UI designer. The visual-based authoring system helps the UI designers to create a prototype of MMI in an efficiency way. The UI designers can edit and preview this prototype and verify its functionality on PC. After the design of MMI is frozen, the UI designer can apply this authoring system to produce the target UI program without writing any textual code. The authoring system uses the code generator to translate the visual representation to source code.

The code generator resolves the relationship between the MMI and the application functions of device drivers. It applies the designed framework and function library in code generation phase.

The Visual-Based User Interface Construction Methodology can improve the productivity, quality, and maintainability of MMI software efficiently [7]. This methodology claims for the following benefits:

1) Replace voluminous textual documentations

2) Support rich multimedia UI components such video, audio, image, and animation for UI designer to easily and quickly authoring visual UI prototype.

3) Generate visual MMI prototype without writing textual based program 4) Independent work between MMI designer and programmer

5) Provide more natural means of communication to reduce misunderstanding between MMI designer and programmer

6) Based on the experiment results, it depicts that using this methodology can reduce the development and maintenance time during the construction of MMI system [7]

7) Elicit an early feedback from user, more expressive in describing user’s demands 8) Based on the experiment results, it depicts that using the proposed methodology can

reduce the development and maintenance time during the construction of UI system

In figure 8, some experimental data in the dissertation, “Generating User Interface for Mobile Devices Using Visual-Based User Interface Construction Methodology” [7], are recalled here.

Figure 8. Comparisons between Conventional and Visual-based UI Construction [7]

In the left chart of figure 8, the experiment results compare the development time between the Conventional MMI Development and Visual-Based User Interface Construction Methodology. Based on the collected data, the upper line with circle dots represents the development time that students use the Conventional MMI Development, and the average time spent is 420 minutes. The lower line with square dots represents the development time that

students use Visual-Based User Interface Construction Methodology, and the average time spent is 376 minutes.

In the right chart of figure 8, the experiment results compare the maintenance time between the Conventional MMI Development and Visual-Based User Interface Construction Methodology. The upper line with circle dots represents the maintenance time that students use the Conventional MMI Development, and the average time spent is about 154 minutes.

The lower line with square dots represents the maintenance time that students use Visual-Based User Interface Construction Methodology, and the average time spent is about 140 minutes.

Both charts in figure 8 reveal the development and maintenance time of Visual-Based User Interface Construction Methodology are less than the Conventional MMI Development.