Please note that JavaScript and style sheet are used in this website,
Due to unadaptability of the style sheet with the browser used in your computer, pages may not look as original.
Even in such a case, however, the contents can be used safely.
OKUBO Ryosuke ・NODA Hisashi ・TANIKAWA Yukiko ・FUKUZUMI Shinichi
Abstract
In order to develop easy-to-use systems efficiently, the authors are developing “display design patterns” by systematizing the screen layouts and their component elements from the perspective of the theory and practice of the human interface. The display design pattern can be used to apply the concept of user-centered design (UCD) at various stages of systems development. These stages include for example the extraction of display requirements under agreements with the customer in the initial stage of development.
After development of the display design pattern, the authors announced it in-house, invited comments in the interview and thereby found that the characteristics of the display system required for each of the system development stages are variable.
Keywords
We are developing the “display design pattern by systematizing the display layouts and their component elements (actions) from the perspective of the theory and practice of human interface (HI) in order to develop easy-to-use systems efficiently1). The display design pattern can be used to apply the process of user-centered design (UCD) (Fig. 1) in various systems development scenarios. Specifically, it can be applied to; 1) extracting the requirements of the customer by letting him or her experience actual screens and the operability at the planning and proposal preparation stage (clarification of the goal); 2) confirm the actual needs of customers regarding the display design and their operability by showing sample screens for the customers’ representative tasks at the requirement definition stage (including from the solution by design stage to the user evaluation stage) and; 3) be utilized as a source or basis of information for developing screenswith high usability at the external design stage (Solution by design work).
To enable application of the process of UCD in various scenarios, we created a screen design pattern and announced it in house. We then invited comments from users in the interview in order to evaluate its effectiveness.
Below, we discuss the traditional technology and its problems in section 2 and the details of the display design pattern in section 3. Later, in section 4, we will also clarify our future orientation that will be established based on the results of user comments.
Fig.1 Process of user-centered design.
Click to expands.
Attempts have been made to utilize existing displays as the templates for improving the developmental efficiency of systems, particularly via the graphical user interface (GUI) applied to display designs2), 3). However, while this strategy is effective for reducing the man-hours for creating displays from basic components, but not for purposes such as; 1) preventing customers misrecognition regarding display requirements and the resulting modifications in later processes due to such misrecognition; 2) improving usability by systems design, and; 3) providing the possibility for the developer to select the optimum packaged technologies according to the environment instead of always using a specific technology (HTML only, for example).
To solve issues 1) to 3) enumerated in section 2 above, we developed a display design pattern equipped with the following features.
(1) Systematization of the layouts and elements of display design for business systems use, plus clarification of the explanations of usability related knowledge (see subsection 3.2 below). This feature enables a user who is a system developer to reach agreement with the customer regarding display design issues by presenting the above materials to the customer.
(2) Usability of each display secured by incorporating the knowledge of HI experts. The basic principles and elements of this feature will be discussed in subsection 3.3 below. This feature allows the developer to use the display design pattern as a pattern or teaching material for the display design.
(3) Clear specification of the possibility of each Rich Internet Application (RIA) technology to implement the elements using the standard components (see subsection 3.4 below). This feature allows the developer to select the optimum RIA technology quickly. In addition, HTML screen templates with high usability and sure accessibility are provided (see section 3.4 below) so that the development efficiency can be improved by using templates as the basis.
The features introduced above are described in detail in the following subsections.
The display design pattern is composed of display layouts and elements. Their systems are described in this subsection.
Table 1explains the layout of the system display. Layouts are sorted according to the “function” of the display (e.g. search) based on the thinking processes of SI personnel and the knowledge of HI experts. They are then classified according to the “form.” This means the type and position of the elements on the display, e.g. tabular type format in which the hierarchical order of “function” and “form” is given an orderly structure. In addition, some “forms” havederivations such as those utilizing the RIA technology and those optimized for specific purposes.
The elements are defined as “objects and actions composing the screen.”
Elements are selected based on the following two criteria.
・ Idioms with a wide application range for business systems. (The wide application range means that the idioms have capabilities to deal with a wide range of “users,” “jobs” and “environments.” The idioms are expressed with combinations of individual HTMLs and should be equipped with specific design guidelines.)
・ Subjects that do not come up in discussions with customers are not included. For instance, “Auto Complete,” which is classified in “data display” meets the above criterion, but “simultaneous entry ofkanjiandfurigana*1characters” (with this function, when the user enterskanjicharacters in the [Name (kanji)] text box, thehiraganacharacters for the inputkanjicharacters are entered simultaneously in the [Name (furigana)] text box) is not selected as an element because of the narrow application range. The elements are selected by also referring to the collection of existing HI idioms4).
After selecting the elements, we classified them according to the sections in the HI development standard guideline that our HI experts produced for in-house usage. This alignment of the element classification with the in-house standard aims at securing consistency. Our in-house standards employ the categorizations as listed below, and we mapped the selected elements accordingly.
1) Display layout
2) Navigation
3) Data display
4) Control
5) Basic input operations
6) Feedback
7) Fonts, terms and visual expressions
Table.1 Screen layout system.
Click to expands.
Fig. 2shows an example of a display layout for the contents page. The contents are given the hierarchical structure composed of the “functions” and “form” layers that are classified in the display layout described in subsection 3.2.Fig. 3shows an example of a page giving explanations on the display layout, where the user can reference the features of the display layout in relation to the basic principles of usability and the utilized elements.
Fig.2 Display example of contents page.
Click to expands.
We provided the HTML templates for the HTML-based display layouts so that the display design can be applied efficiently. For the RIA-based display layouts, we described the technical information on the elements contained in the display so that the user can select the RIA technology suitable for mounting the display design.Fig. 4shows an example of the screen giving information on the RIA technology.
Fig.3 Display example of display layout explanation pages.
Click to expands.
Fig.4 Example of display describing RIA technology information.
Click to expands.
We developed the display design pattern with features described in subsection 3.1 in order to enable application of the UCD process at the various stages of the system development. Although this has procedure extended the usage range, it has also led to concerns regarding the optimization adequacy of the system development stages. Therefore, we interviewed fifteen SI operators aiming at two objectives; 1) clarifying the optimum usage of the constructed display design pattern, and; 2) clarifying the usage for which the users need support. The questionnaire employed a free question/answer format so that the answers would not be affected by a usage assumed by us.Table 2shows the compilation of the main comments obtained with each of the three development stages corresponding to the projected usage.
For objective 1), it was found that the current display design pattern is optimum to be used as the textbook for designing a display in the process of “C. External design stage.”The points in the evaluation for which the comments in the interview gave a high score were the usefulness of the explanation of display design and usability-related knowledge (C1, C2, C4 and C5) and also the usefulness of the screen templates (C3).
For objective 2), it was found that the SI operators most requested need is support for the requirements definitions and estimations at “stage A. planning/proposal preparation.” SI operator opinion revealed that the most critical issue was regarding the display system configuration including operability. This was also the main subject of interest among the customers in stage (A3), the means for selecting a screen according to the customer requests, which are the input elements at stage (A4), and also the information required for preparing quotations at stages (A5 to A7).
Comments in the interview made it clear that a different display system is required for each usage scenario. In the future, therefore, we will perform systematization based on those items that the customers become aware of at the planning/proposal preparation stage, such as the cost, design and operability. We will then enhance support for the requirements definitions and quotation preparation activities.
Table.2 Results of interview at each stage.
Click to expands.
In the above, we first described the features and systems of the display design pattern. We also obtained the opinions of the SI operators from the interview in order to clarify the scenarios in which display design patterns are useful or required. The expressed opinions made it clear that the current display design pattern is useful for support of the display design at the external design stage. It was also clarified that support for the preparation of requirements definitions and quotations at the planning/proposal preparation stage are required. These are the procedures for which the best effects can be expected and strong support is therefore needed.
In the future, we will arrange and enhance screen systems so that the system developers can more easily apply the UCD process.
*1 Furigana: a Japanese reading aid, consisting of syllabic characters such ashiraganaorkatakana.
OKUBO Ryosuke
Information and Media Processing Laboratories
Assistant Manager
NODA Hisashi
VALWAY Technology Center
NEC Soft, Ltd.
Project Manager
TANIKAWA Yukiko
Information and Media Processing Laboratories
Principal Researcher
FUKUZUMI Shinichi
Human Interface Center
Information and Media Processing Laboratories
Department Manager
