融合VISI的WebGIS人机界面交互设计_英文_

1、Geo-spatial Information Science 11(1):66-70 Volume 11, Issue 1 DOI 10.1007/s11806-007-0170-5 March 2008 Article ID: 1009-5020(2008)01-066-05 Document code: AWeb GIS Human-Machine Interactive Interface Design with VISIXIONG Lan HU Hongliang DU Qingyun HUANG Maojun WANG MingjunAbstract The fusion of V

2、ISI (visual identity system Internet), digital maps and Web GIS is presented. Web GIS interface inter-active design with VISI needs to consider more new factors. VISI can provide the design principle, elements and contents for the Web GIS. The design of the Wuhan Bus Search System is fulfilled to co

3、nfirm the validity and practicability of the fusion. Keywords Web GIS; human-machine interactive interface design; VISI CLC number P208IntroductionCI (corporate identity), which was first put forward by an American designer in 1930, has now developed into an integrated theory with three parts: VI (v

4、isual identity）, MI (mind identity) and BI (behavior iden-tity)1.With the high speed development of the Web technology, the VIS (visual identity system) used for enterprise information distribution is slowly spread-ing to the Internet area and now has been given a new name: VISI.The foremost intenti

5、on of VISI is to distribute the enterprises information. Web GIS is also a very im-portant method to distribute geographical information. Currently, Web GIS usually gives much consideration for the geographical information expression and basal arithmetic achievement, but always pays less attention t

6、o the human-machine interface interactive design.Dr. Chen, the CAS (Chinese Academy of Sciences) professor, has denoted that: from the view of map de-sign, most Internet map designs have some problems,because they are always finished by some computer companies which have few cartographic technicians

7、, and the users are not always satisfactory with the Internet map2.With the fast development of GIS industrialization, it is very necessary to use professional design knowledge to help the GIS technician accomplish the Web GIS design assignment. Applying the theory and experience of VISI into Web GI

8、S design enables the efficient design of the human-machine interface; on the other hand, we can supply users with better in-formation service.1 About VISIVISI comes from VIS. The basis of VIS is the en-terprises management approaches, prosecution prin-ciple, manufacturing goals and other factors. VI

9、S is a tool used to spread the information of enterprises by vision methods. The VISI emerges while VIS meets Internet technology.VISI now usually appears in the form of a website. All the elements of the website such as pictures, texts,XIONG Lan, et al./Web GIS Human-Machine Interactive 67flashes a

10、nd the arrangement of these elements are a part of VISI design elements.In other words, the color, typeset and other charac-teristics of the website will give users an apperception, and the apperception effect can be designed by VISI.2 Web GIS interface interactivedesign with VISIWeb GIS is a produc

11、tion which combines the internet and GIS. It is also a way to achieve GIS through different areas or system platforms. The Web GIS application system can be separated into two kinds: the server-side and the client-side.Regardless of Web GIS system choice, users will directly face the interface of th

12、e browser. For im-proving system efficiency and enhancing interface at-traction, the fusion of Web GIS and VISI is worth considering. VISI can bring many principle and de-sign elements to the Web GIS.2.1 VISI supply Web GIS interface designwith basic principle Since both the theory and methods of VI

13、SI attach importance to the recognition of users, it is recom-mended that Web GIS interface design have the fol-lowing characteristics:1) Scientific. All contents in the Web GIS may as well be scientific. The interface of Web GIS fronts the users first hand. If the contents are false or out-dated, e

14、specially geographic information, the Web GIS will hardly fulfill the request of the users and even let the users make mistakes. To be scientific is the first important principle of Web GIS interface de-sign.2) User friendly. Many users of Web GIS are new to GIS, so it is hard for them to find out w

15、hat function exactly one or another button has. The design of the Web GIS interface should be done such that buttons or other components should make users feel easy to use them and like to use them again.3) Alternating. This means that the system should make users feel it serves them all the time in

16、 spite of the wrong operation.There are two kinds of alternating tools: user-to-system and system-to-user.User-to-system tools include those tools used to communicate with the system. Current tools always contain four familiar types:Keyboard answered type: very familiar type, such as keyboard shortc

17、uts, input field and so on.Mouse answered type: very familiar type, it has three subdivisions, clicking answered, rolling an-swered and suspending answered. Such as click to select an interested point, roll to zoom in the map and suspend on a tools icon for showing its help.Touch answered type: such

18、 as an exhibitive system usually allows the users fingers to touch the screen for searching information.Voice answered type: along with the voice identi-fication technique, the voice answered system is be-coming more and more familiar.System-to-user tools include the tools used by the system to comm

19、unicate with users, including the sys-tem loading clew.4) Harmonious. Interface design is better to avoid filling out-of-order contents and putting the cart be-fore the horse. Web GIS interface design should also consider harmony of the contents and structure.A good Web GIS interface should have a c

20、lear structure. The functions of the system are easy to be found. If users can use the system efficiently, they will come again.There are two points to note: First, the most im-portant contents should be put in the well-marked place. The habit of reading order usually is from left to right and from

21、up to down. Given this point, query function tools and results are put in the left-up of the web page in the Wuhan Bus Search System. Second, the area of the screen is limited, so we should divide the area of the interface according to the Web GIS contents and aims. For example, in the Wuhan Bus Sea

22、rch System, because Wuhan is an old-line country, it has many long and decussate roads. Therefore, we set the map area to take up 50% of the whole inter-face. In this way, when the users zoom in on the map, there is usually enough of an area to show such long roads. Knowing the roads and bus routes

23、without panning the map many times is convenient for users. 5) Unique. More and more Web GIS systems are used by the curbstone people. A new problem for68Geo-spatial Information Science 11(1):66-70Web GIS producers is how to attract more users. Al-though it is a good idea to improve the system func-

24、tion, the interface design of the system also cannot be ignored since a unique interface will make a deep impression. It is a challenging work to make a unique interface of Web GIS.6) Uniform. If there are many pages for the Web GIS interface, it is a good idea to choose an analo-gous typeset, backg

25、round image, button style and other factors because this implies that all the web pages and the system as a whole are organized well-connected.2.2 VISI supply Web GIS interface designwith many design elements With the development of web technology, the the-ory and technique of VISI design is becomin

26、g rich and colorful.At present, VISI design, including many forms and elements, can be generalized to several basic forms: letter, table, background color, audio, video, image, button, navigation tools and so on. Web GIS contains much location information and attribute information; synthetically usi

27、ng these elements can help user in-tercommunication in flexible ways and show the query results better. Most browsers can display GIFJPEG pictures and GIF89a cartoons, i.e., brows-ers can show the elements without any added proce-dure or module. But some multimedia files (such as flash), need downlo

28、ads to the local hard disk first, and then starts up to play with the relevant procedure. Furthermore, browsers can show more formats of multimedia files with a plug-in procedure. Java App-let is a smart procedure which writes in java for the web pages and can run in any operating system. Since it i

29、s very flexible and compatible, it is being gradually used by Web GIS and serves as the basis of the Wu-han Bus Search System.2.3 VISI supply Web GIS interface designwith unique design content As a design theory, VISI is different from some computer technologies which use models, expres-sions and ar

30、ithmetic for accurate/exact operations. VISI is abstract and applied.Web GIS interface design with VISI usually needs to pay attention to the following contents:The first is the color. VISI color design absorbs a sizable amount of knowledge from optics, physiology, psychology and aesthetics and has

31、come to form a huge theory. A good VISI design strongly considers harmony and individuality.The hue, purity and the light are the three basic elements of color. For the hue, it is wise to choose the web standard color for Web GIS, because this will be convenient to change whole pages in the Web GIS

32、with the HTML language. The web standard color usually has two expressions: hexadecimal name and IE4 color name exist in advance, i.e., color = #ff0000 and color = red /color. The selection of purity and light should be based on the maps color, while the map area should be large.The second is the te

33、xt, which is a popular method to express human thinking. VISI prioritizes readabil-ity of the text. If the text is too small or too light to read, it will influence reading efficiency. If the page was too wide or long to be shown within the screen area, reading efficiency will also suffer. Web GIS i

34、n-cludes a large quantity of attribute information which is stored in the database. When the users query, the system should produce the results instantly. The re-sults usually are shown in the style of the text. It is recommended to use the CSS (cascading style sheet) to display text. CSS was develo

35、ped in 1998 by the WWWC (World Wide Web Consortium), and it has been supported widely since the WWWC updated it to version 2.0. CSS can well control the figure of the text, including the location and font. CSS can help the HTML show many text styles.The third is the picture. If the pictures are too

36、big, too many or too blurred, it will affect the users read-ing efficiency. Web GIS usually has a special element: the map. The map generally is a big and important picture in the web pages, so it is unsuitable to put other attractive pictures around the map. Moreover, if the geographical informatio

37、n has its own copyright, it is wise to use some watermark in the map pictures to protect the map.The fourth is other media. Web GIS can also use flash, gif and some plug-in procedures to increase the user interest. However, an excessive application willXIONG Lan, et al./Web GIS Human-Machine Interac

38、tive 69tire users and waste their time.These four aspects mentioned above are just for one web page only; VISI also emphasizes harmony of the whole system. In a Web GIS system, it is thus good to use the same background color, typeset and other properties to make the users feel that the Web GIS is e

39、laborately designed and attract more regular users.3 ExampleWuhan Bus Search System is an official Web GIS that uses the server-side to stock Java Applet proce-dure and bus information database. When clients visit the system interface, the system will call the Java Applet procedure automatically and

40、 download the needed data to the client-side. The client-side will then answer for querying and displaying the results. The Web GIS client interface is made from JavaScript, and the edit software is FrontPage. The language and software have many merits, including self-contained abundant functions, s

41、implicity, easy user understanding, and convenience in updating. We design the client interface with VISI as follows. 1) About the color. Blue is a contractive color that indicates stillness and limpidity. The color could easily make users think about the blue sky or the sea and generate feelings of

42、 sublime, profundity, clarity and coolness. Moreover, blue also is the color symbol of modern technology. We thus select blue as the back-ground color. Since the Wuhan Bus Search System will be opened in summer in due time, the cold color blue can also let users feel cool.2) About the text. For read

43、ing text easily, the sys-tem uses the CSS technique in the page layout. De-spite different screen sizes, the figure of the text is always the same.3) About the picture. A welcome interface will be shown before loading the map in the system. This in-terface shows the introduction and content of the W

44、eb GIS and also increases user interest and adds to in-terface attraction. To give prominence to the map area, there is no other conspicuous picture in the sys-tem main interface.4) About other media. In the browser interface, java applet plug is used to display the map. In the ini-tializing period,

45、 java applet procedure will stay in the Web server, which is a section of executable codes. HTML will use <APPLET> label to capture and catch it. Java applet can finish deciphering the GIS data and analytical function.5) About harmony. We choose blue as the main color. The welcome interface, m

46、ain interface, in-put-query-information interface and output-query- result interface more or less use the blue color. In this way, the Web GIS system seems like a harmonious whole.Fig.1 to Fig.5 is the interface of the Wuhan BusSearch System.Fig.1 WelcomeinterfaceFig.2 MaininterfaceFig.3 Interface of query menu70Geo-spatial Information Science 11(1):66-70Fig.4 Input-query-information interface Fig.5 Output-query-result interface4 ConclusionsThis is an examination to achieve Web GIS inter-face design fusion with VISI. The example shows that VISI theory is helpfu