133計算機專業(yè)相關(guān)網(wǎng)站網(wǎng)頁用戶界面設(shè)計有關(guān)的外文文獻翻譯成品簡易單頁web應(yīng)用程序中的用戶界面（ui）設(shè)計實踐

1、<p>　　此文檔是畢業(yè)設(shè)計外文翻譯成品（ 含英文原文+中文翻譯），無需調(diào)整復(fù)雜的格式！下載之后直接可用，方便快捷！本文價格不貴,也就幾十塊錢！一輩子也就一次的事！</p><p>　　外文標(biāo)題：User interface design practices in simple single page web applications</p><p>　　外文作者：Ji?

2、7; Tesa?ík, Ladislav Dole?al and Christian Kollmann</p><p>　　文獻出處: First International Conference on the Applications of Digital Information and Web Technologies (ICADIWT),2008 .(如覺得年份太老，可改為近2年，畢竟很多畢業(yè)生都

3、這樣做)</p><p>　　英文4125單詞，23784字符，中文6887漢字。</p><p>　　User interface design practices in simple single page web applications</p><p><b>　　Abstract</b></p><p>　　T

4、he single page web design is an extreme approach of designing the web applications. It limits the structure of the application to fit into only one single physical web page and suppresses the further navigational capabil

5、ities. Such limitations strongly affect the design process of the application development, putting more emphasis on the design of the user interface components. We present and discuss the list of five higher level user i

6、nterface design principles with implementation examples tha</p><p>　　1.Introduction</p><p>　　Common web applications consist of dynamically created mutually interlinked but separated web pages.

7、It is natural, because of web infrastructure based on hyperlinks and its navigational nature. Unfortunately this concept also affects the web user interfaces. On the contrary, the majority of desktop applications contain

8、 their user interface elements integrated inside a single parent window (form) and their event driven user interfaces are more compact and do not exceed the application frame. App</p><p>　　Modern web design,

9、 on the other hand, tries to bring the look and feel of web applications closer to classical desktop applications, since the inter-page navigation is suppressed or missing at all and replaced by other user control and pa

10、ge infrastructure techniques (asynchronous remote calls, partial post backs) which provide more desktop application look and feel. One of such technologies is the Ajax. The benefit of this approach lies especially in bet

11、ter user experience, enabling well-known d</p><p>　　The organization of this paper is as follows. Section 2 presents short overview of main principles and technological coverage of given area. Section 3 disc

12、usses the current state of the art applications. Section 4 describes the case study application design and implementation overview. Section 5 shows a short dictionary of user interface design principles with correspondin

13、g examples. Section 6 concludes our article.</p><p>　　2.Single page web application design</p><p>　　Single page design is an extreme way to build up a web application in one single physical web

14、page as the all-in-one page solution with no navigation, just based on already mentioned dynamic and asynchronous techniques. However this approach puts the developer before some substantial challenges. It is demanded to

15、 design user interface which would show all important information and controls to manipulate application data in one single page. Page design has to be elaborated to maximize page decomp</p><p>　　3.Recent wo

16、rks</p><p>　　Though the Ajax technology is not entirely new – the first application of Outlook Web Access comes from the year 2000, the majority of recent e-commerce web applications, like e-shops, stay a bi

17、t conservative to the employment of the new rich client user interface paradigm and keep their classical navigation style and structure with just a few cosmetic improvements enabling just a limited number of user friendl

18、y features [12]</p><p>　　However there are few superior rich web client applications which allow the possibilities of desktop applications inside the web browser environment. The great inspiration comes espe

19、cially from the most advanced Ajax application Microsoft Outlook Web Access. This state of the art feature-rich web client employs the most important functions of desktop version of the product. The application uses the

20、most advanced Ajax techniques to access the Microsoft Exchange Server’s user content providing mai</p><p>　　The online mapping software is one of the most suitable applications to be developed as according t

21、o Single page web application design. Though there are more competing developer companies (Google [8], Yahoo [10], and Microsoft [9]) their applications provide almost exactly the same set of functions and features. The

22、user interface design is undeniably inspired by their desktop counterparts. For example Google Maps is the web complement to their desktop rich client application Google Earth.</p><p>　　Another inspiration i

23、s the field of the office web applications, which provide the functionality known from desktop application packs such as the Microsoft Office or open source project Open Office. Google Docs [11] enables viewing and editi

24、ng tools for creating text documents, spreadsheets and presentations in one single page application mimicking the look and feel of well known desktop office applications.</p><p>　　It is not without a remark,

25、 that all of the successful feature-rich client web applications have their strong inspiration and counterparts in desktop applications, whether provided by the same developer company or not. It seems that the design of

26、the single page user interface shares the same design principles with the desktop application development. What differs is the actual implementation technology. If we understand the similarities in these concepts, we can

27、 find them and describe them in t</p><p>　　Patterns and the pattern language were introduced by [3] as a named problem – solution documentations used in the field of architecture. An opening and fundamental

28、work that has introduced the concept of patterns to the field of computer science and software engineering was the book on design patterns [4]. Since then a couple of other books have been written using the pattern langu

29、age and principles describing pattern in particular areas.One of the works that brought the inspiration to our resea</p><p>　　4.Case Study Application</p><p>　　4.1 Application overview</p>

30、<p>　　Our team research aims primarily at the work on quality measurement of medical diagnostic and therapeutic ultrasonographic equipment –transducers and scanners [1], [2]. One part of our research also covers t

31、he area of custom software applications and tools development. The applications vary from the measuring apparatus control system, the analytic software tools to the database systems.</p><p>　　These applicati

32、ons help us to achieve the main goal –ensuring that the quality of healthcare equipment is adequate to be safely used in the medical practice. One of our minor tasks is to collect and bring together terminology we use an

33、d create a dictionary of acronyms, including their meanings and additional information, such as descriptive images. The dictionary is filled in by members of two distinct teams – one at the Palacký University in Olo

34、mouc, Czech Republic and the other at the Medical </p><p>　　The web client application with underlying database is the reasonable option, since the runtime environment is a web browser and application data a

35、nd code are stored and maintained at one place. The user requirements for the application were quite straightforward: to make a dictionary to add and edit acronym entries. Every dictionary entry should have possibility t

36、o attach more than one comment and images. Every user should be able to edit all of the items. Although there are several requirement</p><p>　　Some of application points of interest are</p><p>　

37、　? Ambiguous dictionary entries. Dictionary abbreviation entries may not be unique; there may be more meanings for each entry.</p><p>　　? Multilingual support. The descriptions and comments are provided in m

38、ore languages (currently supports English, Czech, German) Tags to entries. Each entry may have category tags attached.</p><p>　　? Language-dependent image galleries. Entries have the main illustrative graphi

39、cs gallery and image galleries for each of the supported languages, in case that the images may differ according to used language.</p><p>　　Though the application business logic is a simple one, the single p

40、age design and implementation show that there are more use cases to care about than it was expected. In case the applications are well designed, the use cases manifest themselves as distinct web page components. As seen

41、on Figure 1, the main application components are emphasized.</p><p>　　Figure 1. Case study application overview</p><p>　　1- Acronym, 2- Ambiguousness check, 3– tags, 4-meaning, 5- navigation, 6-

42、 login, 7- Image gallery, 8-language environment with 9-gallery and 10-descriptions/comments</p><p>　　4.2 Implementation</p><p>　　The web application was developed in Microsoft’s ASP.NET 2.0 and

43、 the web pages’ code behind is written in C# language. Asynchronous Ajax communication is based on ASP.NET AJAX. Certain user interface elements are realized using components from community project ASP.NET AJAX Control T

44、oolkit. We also use FCKEditor components for writing and editing rich text fields, such as comments. Underlying database runs on the MS SQL Express database engine.</p><p>　　Though this article’s case study

45、uses enhanced features of ASP.NET AJAX framework with Ajax Control Toolkit component library it is not and was not meant to be a full Ajax web application. It is a mixture of ASP.NET application using a few of Ajax capab

46、ilities to reach the main goal – to make application user interface design stay within one single page with minimal effort. That is why we yield before full Ajax implantation principles according to [6] or [7]. At the cu

47、rrent state of available te</p><p>　　5.User interface features and patterns</p><p>　　Following high level user interface design principles use similar level of abstraction as the patterns; howev

48、er they use a loose text structure and do not have the ambition to be handled with such gravity the real user interface patterns have [5]. The next list of patterns describes a few interface design decisions to be made t

49、o successfully implement the single web application. Each list item contains the problem-solution description and one or more examples from case study application.</p><p>　　Though the actual implementation o

50、f case study application depends on the ASP.NET AJAX environment, the principles themselves are not limited to either single page design or web page design at all. On the contrary, these principles are commonly used in t

51、he user interface design of most applications, including desktop or mobile applications via many different implementations. The main common forces applied to the following patterns are the limited utilizable frame of the

52、 single web page and its c</p><p>　　5.1. Details on demand</p><p>　　Overall small available space of a web page prevents from showing much of detailed information on such a limited area. However

53、, the user must have a chance to obtain desired detailed information without much effort. We need to provide an efficient mechanism to let user to see additional details. A similar pattern is described in [5] as the Extr

54、as on demand. Since the single page design prevents to show detailed information on another web page, which is actually very common practice in list–detai</p><p>　　5.1.1. Ambiguousness check details</p>

55、;<p>　　The application needs to store ambiguous dictionary entries, because there may be two or more homographic abbreviations with different meanings. E.g. HR may stand for either Heart Rate or High Resolution. T

56、he user needs to be informed whether there is an ambiguous entry. The application displays the big red asterisk at the top right corner of the abbreviation title. The user is also able to check for the different acronym

57、meanings by pointing the mouse cursor over the asterisk and sees popup win</p><p>　　Actual implementation is to use the PopupControl extender, which is part of Ajax control toolkit community project. Popup p

58、anel extends the behavior of referenced user interface component (the red asterisk, see Figure 2) and is shown when the referenced control gets the focus.</p><p>　　5.1.2. Tag short forms</p><p>

59、　　Every dictionary entry can be marked with one or many tags. Tags provide additional information on scope of the abbreviation term. A few examples of used tags are: “Medical”, “Technical”, etc. It’s possible to add many

60、 of them, so the list could be very long and hard to read. Thus every tag also has its own short form, e.g. “me” for “Medical”, “te” for “Technical”. However the user might be puzzled by a short version of the tag, detai

61、led information – the full text of a tag is provided as a tool</p><p>　　Figure 3. Short forms details using the simple tooltip</p><p>　　5.2. Actions on demand</p><p>　　There is usua

62、lly more than one item on the page, which can be by some means manipulated – inserted, deleted or edited. For example, tags and gallery images can be added or deleted, the text comments may be added, edited or removed. H

63、aving all the available actions for all of the items shown at once could fill the page with too many action buttons making it unable to read. A possible implementation in single page design is to dynamically show or hide

64、 action panels using hover popup action menus. </p><p>　　5.2.1. Popup Delete action buttons on tags and gallery items</p><p>　　Either gallery images or tags can be simply removed using action bu

65、tton only available on mouse hovering over the selected item (Fig. 4).</p><p>　　Figure 4. Pop-up delete button on the tag</p><p>　　The technical solution is the same as for the example with ambi

66、guous entry details. HoverMenu extender can contain any other ASP.NET elements, in this case a command button.</p><p>　　5.2.2. Adding tags from list of available items</p><p>　　The user is able

67、to add additional tags to decorate a dictionary entry. Holding the mouse cursor over an empty list item (shown as “[…]”) brings up a menu containing all tags that can be attached to the current dictionary entry. Each tag

68、 can be attached to one dictionary entry only once; hence the menu contains no more than unused tags to select from.</p><p>　　Figure 5. Adding a tag. Dynamic menu contains list of available tags.</p>

69、<p>　　The technical solution is similar to the ambiguous entry details example. Hover Menu’s content control is dynamically filled from a database with a list of insert command buttons for each available tag (Figure

70、 6).</p><p>　　5.3. User driven page components visibility Not every piece of information needs to be shown all the time. It is wise to let the users to suppress unwanted page parts and focus their attention

71、just to areas they need to work with. The user have a chance to save page space by hiding non-essential parts leaving the option to show the hidden parts back again. One of this techniques is described in [5] as the Clos

72、able panels. The solution is to organize user controls to logical blocks that can be in</p><p>　　5.3.1. Collapsible language environments Application allows entering text comments and graphical information t

73、hat may vary depending on a particular language. Application currently supports up to three (Czech, English, German) language environments. Language environments are containers for language specific pictures and texts. T

74、he user may choose which language environment details to show or hide. For example, while entering Czech text comments the user wants to suppress English and German envir</p><p>　　Figure 6. Collapsible langu

75、age environments. There are two collapsed controls and one opened.</p><p>　　5.4. Dedicated mode</p><p>　　Though the single page application is designed to be easy and effective to use, there are

76、 several actions that require more user attention or inputs, which cannot be entered just by simple clicking on one of action buttons. Adding a new item is generally one of these actions that require more user textual in

77、put and more complicated interface. The multi page application solution is to create an input form on a separate web page. Single page design replaces this technique by emulating page navigat</p><p>　　Anothe

78、r common task is to ask the user for confirmation of a destructive action such as massive change of data or deleting items. A simple solution is to interlink action button with the extender to show confirmation dialog.&l

79、t;/p><p>　　5.4.1. New dictionary entry form</p><p>　　Adding a new dictionary entry requires entering two texts, abbreviation and its meaning. The insert form containing two text boxes is not presen

80、t inside the main page all the time, but it is shown only on demand after processing the insert item action. Modal form makes the parent page disabled to user interaction, showing only the necessary insert form elements.

81、 User fills in form data and the modal form hides itself and returns focus back to the parent page after the user input confirmation or </p><p>　　Figure 7. The modal form for insertion of a new dictionary en

82、try.</p><p>　　Technical solution is to use the functionality of ModalPopup component. The Modal Popup works in similar fashion as the Collapsible Panel (5.3.1). Target user input form is extended by the addi

83、tional behavior to be shown as a modal form or hidden.</p><p>　　5.4.2. Delete confirmation dialog</p><p>　　It is a good manner to show user confirmation dialog on changing or deleting items whic

84、h require some user effort to enter and forbid unwanted deletion (e.g. a miss-click on delete action button). Deleting the gallery items or text comments is such a case.</p><p>　　Figure 8. Browser driven mes

85、sage box waits for the user input.</p><p>　　Use the ConfirmButton extender or just the simple client side JavaScript command to show the operation system’s message box containing OK -Cancel options (Figure 9

86、).</p><p>　　It is also possible to create our own confirmation dialog using Modal Popup (see 5.4.1) in case that we need to show more detailed information about the confirmation, like the deleted item detail

87、s or a disclaimer. In this case there is no need to show such a detailed text we can use the built in solution.</p><p>　　5.5. Multifunction controls</p><p>　　The design and development process i

88、s a dynamic one, there are still things to change or add, new requirements or ideas come and we have to handle them, choose the right ones and put them into our design. Due to the lack of free space and restricted compon

89、ent sizes it is hard to add more of the originally planned or newly requested control functionalities into the limited boundaries of the control. The conflict between simple design and rich user interface capabilities is

90、 omnipresent and there i</p><p>　　While the functionalities stay simple, disjoint and their added value is bigger than the cost of their integration into the current design we may just simply add them to the

91、 application. But we might also consider the fact if there is a possibility to not just simply add the functionalities but to blend them together. We may use the overlapping between given functionalities and mix them tog

92、ether into a more sophisticated result.</p><p>　　5.5.1. Previous – Next item navigation</p><p>　　The simplest and commonly practiced way to blend two functionalities is presented on the basic na

93、vigation control. There are two action buttons to navigate to previous and next directory item. The added value is that the action buttons also show the names of these items (Figure 10).</p><p>　　Figure 9. P

94、revious and next navigation links show the dictionary entry names.</p><p>　　This practice of providing the additional useful information whenever possible is a big helper to the user and its usability should

95、 be considered in the design of all user interface control elements. On the other hand, it is also good to decide whether the additional information is actually helpful or if it is not just placeholder which could be use

96、d better. In such a case there is always the choice to combine this principle with the previously mentioned “Details on demand” pattern (5.1).</p><p>　　5.5.2 Auto-complete, search and index</p><p&

97、gt;　　Since there is only one abbreviation shown at time, the user needs to navigate to other ones. The simplest navigation to the previous and the next dictionary item is a necessary but not sufficient way, because of th

98、e dictionary is growing and may contain many entries. We have to provide a more efficient way of navigation between entries (e.g. let the user start navigating from selected entry or at least starting character). It is a