Keywords

1 Introduction

These days, web applications are widely used on not only desktop PCs but also tablet PCs and smartphones. This trend has been encouraging advances of their User Interfaces (UIs) dramatically such as multi touch interfaces.

For developers of web applications, productivity and effectiveness (usability and accessibility) (Fig. 1) are big issues to respond to customers’ high expectations for web applications [10]. Since a lot of development efforts are spent to the development of UIs, they are big concerns for the developers.

There are largely three ways to develop UIs of web sites which take usability and accessibility into account. First is Human-Centered Design [5, 9, 10] in which multidisciplinary team members consisting of usability professionals, system engineers, web designers, and programmers, work together to achieve high usability and accessibility. In this case, since many people join the development, achieving high productivity is not easy. Second is a developer centered approach. Skilled system engineers and programmers refer to usability and accessibility guidelines/style guides [8] and/or use some tool such as Content Management System (CMS) [11] to create web sites. Because of low availability of usability professionals and/or severe budget, this second approach is also popular these days. Third is between the first and the second. Skilled system engineers and programmers consult usability professionals and/or web designers and use some tool to develop web sites.

Fig. 1.
figure 1

Effectiveness: usability and accessibility [10]

Full size image
Fig. 2.
figure 2

Productivity: UI (design) patterns and sample programs

Full size image

As far as business use webs (business webs in short) such as for application, reporting, procurement, and so on, are concerned, since they tend to have relatively fixed task sequences and allow modest GUI parts and screen designs, the second and the third approach have been taken in many cases. However, productivity and effectiveness (usability and accessibility) of the development are not easy to handle. For example, Japanese committee of e-government web systems reported many problems of UIs [2] and published the standard guidelines for national information systems [6] to reduce the problems.

This paper focuses on the second way for the development of business use web, and proposes a design framework featuring usability/accessibility guidelines, UI (design) patterns, which connect usability/accessibility guidelines, sample programs (Fig. 2), and some other components (Fig. 3). UI patterns are a collection of typical templates of screens which are accompanied by usability/accessibility notes [13]. The framework aims at high flexibility, productivity, and effectiveness (usability and accessibility) for various developments of business use webs.

In the following, after briefly explaining common methods and this approach in the section two, the proposed framework is explained in the section three followed by future plan and conclusion.

Fig. 3.
figure 3

Overview of the proposed framework

Full size image

2 Approach to Productivity and Effectiveness (Usability and Accessibility)

2.1 Common Methods

Among others, four common methods are explained below.

  • Guidelines on usability and accessibility

  • Style guide

  • UI (design) patterns

  • Content Management System

Firstly, guidelines on usability and accessibility have been used for a long time [1, 3, 4, 7]. Such guidelines are sometimes provided with coding guidelines to help software engineers implement the guidelines correctly. Since the guidelines are general enough to support a wide variety of applications, they tend to require basic knowledge of usability and accessibility, and trainings to be useful for software engineers. As a result, they are not used well by software engineers in general.

Secondly, style guide is a material which explains details of specific screen designs. Usability/accessibility guidelines are often referred to explain details of design decisions. It is usually used at a renewal of web sites. Although it is also useful to promote third party’s’ development of related web sites [8], it tends to be too specific to the original web site.

Thirdly, UI patterns are a collection of typical templates of screens which are accompanied by usability/accessibility notes [13]. Since UI patters are more general than style guides and can be basis of CMS, they are flexible for various uses. Because of its flexibility, this paper uses UI patterns.

Fourthly, CMS is a system used to create and manage the content of a web site. Since there are different kinds of web platforms such as PCs, tablet PCs, and smartphones, CMS is more used to easily create and manage different platforms by one system. However, as far as business webs are concerned, since specifications are decided by a orderer, flexibility of CMS sometimes falls short of the development.

2.2 This Approach: UI Patterns to Bridge a Gap Between Guidelines and Sample Programs

Before starting this project, there were standard guidelines of basic usability and accessibility to support system engineers, and a web application framework to support software programmers in the company (Oki Electric). Since accessibility standards (JIS X 8341-3 [7] based on W3C WCAG2.0 [12], and so on) are not easy to understand for system engineers and programmers, a document which explains them was created by usability professionals to support developments of government-related web sites. Although the document has been used well, usability issues and the productivity issue have not been handled systematically.

This project started to handle usability issues and the productivity issue well in addition to accessibility issues. To start this project, basic policy was created by core members.

  1. 1.

    Since actual needs of system engineers and programmers are not well articulated, initial new materials such as UI patterns and sample programs should be small enough to get more feedbacks from them. This process should be repeated until the materials obtain good appraisals from them. More advanced and expensive framework such as CMS is considered as a future issue.

Based on this policy, multidisciplinary team consisting of usability professionals, web designers, software platform engineers, and system engineers started Human-Centered process. Initial interviews of related engineers revealed the following opinions.

  • Agree that productivity and effectiveness (usability and accessibility) have priority to cope with.

  • Need several sets of UI patterns if possible.

  • Concerned with too modest aesthetics of UI patterns

  • Need an up-to-date framework.

  • Need support to use the framework.

Related engineers recognized the issues and they seemed to come up with reasonable requests that well reflect their past experiences. Of special note was their concern on flexibility.

Getting the feedbacks, the following policies were added to the basic policy.

  1. 2.

    In order for both system engineers and programmers to easily understand both UI patterns and sample programs, same examples of the same web site should be used in UI patterns and sample programs.

  2. 3.

    All of UI patterns, sample programs and examples should be more aesthetically pleasing than modest business web sites for a wide applicability. For this reason, travel reservation webs are adopted to explain UI patterns and sample programs.

3 Proposed Framework

Figure 3 shows the overview of the proposed framework. It consists of (a) UI portfolio, (b) UI patterns, (c) UI guidelines, (d) sample programs, and (e) sample proposal document. Components (a), (b), and (d) are main parts of the framework, which are supposed to be used alphabetically. Components (b) and (d) use the same examples of the travel webs. On the other hand, other components, (c) and (e), are supposed to be used only when necessary. Component (c) should be referred when the orderer requires high quality of usability/accessibility since it is a detailed material of usability/accessibility. Component (e) should be referred when to create and submit a proposal document at a competitive bidding. This framework will continuously support the activities from a proposal till an implementation in order to reduce usability and reduce development costs.

Throughout the framework, usability points are categorized into five aspects based on the Japanese electrical government guidance: (1) page layout and visual design, (2) ease and understandability of use, (3) easiness to understand instructions and the state, (4) error prevention and the handling, (5) help and support.

Whilst, accessibility points are categorized into nine aspects: (1) compliance to the standards such as JIS X 8341 series, (2) easiness to understand instructions and the state, (3) localization, (4) alternate image information, (5) indexing, (6) keyboard operation and the focus, (7) multimedia, (8) prevention of time change expression and bouts attack, (9) navigation.

Five components of the framework are explained hereafter.

3.1 UI Portfolio

UI model portfolio is provided as an initial document for the system engineer to talk with the orderer about what kinds and tastes of web site the orderer wants to be constructed. It consists of two axes with four quadrants; vertical axe is for pleasure or business use, horizontal one is for novice or expert use. With screen images of four quadrants, the system engineer can articulate orderer’s potential requirements.

3.2 UI Guidelines

UI guidelines consist of updated usability guidelines and accessibility guidelines. The usability guidelines, which consist of over two hundreds of well-known guidelines, are sorted by added degree of importance to easily find important ones (Table 1). The accessibility guidelines consists of JIS X 8341-3 [7] and its descriptions. UI guidelines should be referred when the orderer requires higher quality of usability/accessibility than those written in UI patterns since they are detailed materials of usability/accessibility.

Table 1. UI guidelines
Full size table

3.3 UI Patterns

In general, business use webs include tasks to be completed which consist of step by step procedures. Compared with general use webs, they consist of stereotypical screens such as login screen and form-filling screen.

UI patterns provide six basic screen patterns: portal, log-in, menu, search condition, search result, and form-filling input (Table 2, Fig. 4). For system engineers, actual screen designs based on UI patterns will contribute to efficient and effective clarification of orderer’s requirements through discussions.

Table 2. Six UI patterns of business use webs
Full size table
Fig. 4.
figure 4

Relations of six UI patterns of business use webs

Full size image

In order to create actual screen design based on UI patterns, examples will serve as useful references. Considering the tendency that recent business use webs are more like general use webs such as Electric Commerce web sites, examples of travel reservation webs are added to UI patters (Fig. 5). Since they includes all of six patterns and are more aesthetic than conventional business use webs which use modest GUI parts of operating systems, they will serve as useful references.

Figure 5 shows an example of log-in screen where the following four points are explained as special notes.

  • Only the minimum necessary elements should be used in order for the user to go through it effortlessly.

  • Appropriate guidance should be provided to non-registered users as well as registered users.

  • First input field should be focused to allow instant input by the user.

  • Guidance for the user who forgets password should be provided.

Since it was pointed out in the initial interviews that system engineers tend to focus on details of each screen too early before the overall design, the overall design is explained before the explanations of six UI patterns.

3.4 Sample Program

Sample programs are html and Java programs of the examples of six UI patters. Programmers can more understand usability/accessibility points written in UI patters through reading codes of sample programs.

Fig. 5.
figure 5

Example of log-in screen

Full size image

3.5 Sample Proposal Document

This document provides a typical example of the proposal document of business use webs which describes usability/accessibility well. It includes (1) requirements definitions (methods to ensure good usability/accessibility, methods to minimize variance, and so on), (2) skill requirements, and (3) development process. It is provided to reduce the work of creating a proposal document.

4 Future Plan

Until now, except for (a) UI portfolio, the first versions of five components have been created: (b) UI patterns, (c) UI guidelines, (d) sample programs, and (e) sample proposal document. Second interview of these components will be conducted within a month. After the second interview, the five components will be modified for a trial use.

After the trial, productivity and effectiveness (usability and accessibility) will be examined again by the interview. Considering its results, the entire framework will be reconsidered for better use.

5 Concluding Remarks

This paper focused on the development of business use web by system engineers and programmers, and proposed a design framework featuring usability/accessibility guidelines, UI (design) patterns, which connect usability/accessibility guidelines, sample programs, and some other components. The framework aimed at high flexibility, productivity, and effectiveness (usability and accessibility) for various developments of business use webs.

Although this framework was created based on initial interviews of related engineers, the choices of the framework await engineers’ evaluation. Engineers will simulate their usage of this framework and will come up with both advantages and disadvantages of it.