Instructional DesignⅡ

In this section, we will explain the screen transition diagram that accompanies the task (the results of checking and analyzing sample contents and suggestions for improvement).

A screen transition diagram is a diagram that shows the order in which the screens are displayed to the user (learner), what operations the user (learner) goes through to learn, how the screens are related to each other, and what functions are needed in the system (LMS). This is necessary when introducing e-learning, especially when making proposals to clients or internal stakeholders.

 In order to get an idea of what screen transition diagrams are and how they are used in system development, let's take a look at a site that explains screen transition diagrams in system and application development.

• ITPro: "The "secrets" of external design that no one has taught me" (Vol.5 - Vol.7) (in Japanese)
• @IT: Security holes in web applications (6) (in Japanese)

As you can see, screen transition diagrams play an important role in the development of systems and applications.

One of the sociologists and thinkers that my lecturer (Kitamura) admires is Ted Nelson. Nelson came up with the concept of "hypertext" in 1965. The current World Wide Web is said to have been inspired by this concept. Nelson was at Keio SFC for several years around 2000, and I went to hear him speak several times.

Nelson always said, "First think about what the user wants to do. Nelson always said, "Think first about what the user wants to do, and then think only about realizing it," and he emphasized that most of the current systems are preceded or prioritized by technical and internal designs. Although "user-centered thinking" seems to be a matter of course, it does not seem to be a matter of course for developers. This is probably because the development side has its own circumstances and difficulties.

With this in mind, it can be said that screen transition diagrams are important for connecting users, clients, and developers, and for promoting the development and introduction of e-learning with a "user-centered" perspective.

It seems that there is no fixed way to write screen transition diagrams. When the lecturer (Mr. Kitamura) was working for an insurance company, he received proposals for e-learning from many companies. The proposals almost always included a screen transition diagram, but the way of drawing it really varied from company to company.

In a sense, you could say that it was a showcase for the skill and sense of the development and proposal team.

As mentioned above, the lecturer (Mr. Kitamura) has seen various proposals from the standpoint of clients, and the following are some of the things that make clients happy about screen transition diagrams.

• The user (learner) can visualize how to move between screens and what kind of operation to perform.
• In particular, the main stream (the flow that is usually used) is clearly indicated and distinguished from other things (functions that are occasionally used).
• The main screens are covered. The main screens are covered, but not in too much detail so that you can have a bird's eye view of the whole.
• The images of the transitioned screens themselves are also shown (screen captures and images are posted).
• What functions are needed for the LMS and how they will be used?

Let's think about what kind of diagrams would make you happy if you were the client or user, and devise a way to draw them.

I will show you two samples of screen transition diagrams as reference.

First of all, this is a handout as a training material for the e-Learning Canferance 2006 Winter, which the lecturer (Kitamura) took part in with Professor Suzuki and Assistant Professor Nemoto. This is an analysis of English Town （http://www.englishtown.co.jp/）, an e-learning program for learning English.

eLF2005_session3_sen.pdf (in Japanese)（PDF：117KB）

 The other is a screen transition diagram for an e-learning course called Sanno Knowledgge Field at Sanno Institute of Management. This content was used as a sample case subject in this course until 2008, and the screen transition diagram was created by the instructor (Kitamura) to illustrate the case. The screen transition diagram was created by the instructor (Kitamura) to show an example.

 skf_sennizu.pdf (in Japanese)（PDF：258KB）