Modern Methods of Usability Engineering of User Interface for Weboriented Environment A.A. Kuzmenko1, А.V. Averchenkov1, V.A. Shkaberin1 alex-rf-32@yandex.ru | mahar@mail.ru| vashkaberin@yandex.ru| 1 Bryansk State Technical University, Bryansk, Russian Federation The article discusses methods and tools applied for wireframing of web-environment usability engineering. Modern approaches used for wireframing via web service moqups.com. are considered. In today's world, people have to spend a lot of time at the computer therefore an important factor in the user's work with the software becomes human-machine interaction. Web-interface design taking into account all the ergonomic standards is able to reduce stress and fatigue of users as well as to improve the quality of work and satisfaction. Now, when designing user interfaces, insufficient attention is paid to ergonomics and convenience. In this paper, we use an expert approach. This method allows you to evaluate the effectiveness of the developed product when used. Keywords: user interface, web-wireframing, prototyping the abbreviation WIMP (Windows-Icons-Menus-Pointing 1. Introduction device), since they used windows, pictograms, menus, and a In the user interface development (UI) life cycle, it positioning device (mouse, trackball, and others). WIMP clearly recommends a specific stage at which the user interfaces gained popularity with the Macintosh in 1984 and interface can be prototyped based on information obtained later appeared on MS Windows. from stakeholders of the future system: designers, The graphical interfaces of modern applications belong developers, usability specialists, graphic experts and end to the fourth generation. They are distinguished by the users. When it comes time to express and collect user increased image quality of elements that look more realistic requirements, these stakeholders usually come to a design thanks to modern interface tools - “widgets” that allow you meeting with many ideas that are expressed quite differently. to use shadows, volume of interface elements, window Some prefer to convey their ideas through drawings, transparency, layers, animation, etc. Their distinctive feature sketches, drawings, others take screenshots of previously in comparison with the user interfaces of the previous used interfaces to demonstrate representative examples, generation was also the use of many instrumental software others come without anything but their past interaction tools for creating WIMP interfaces for computers and mobile experience and history, their own preferences. Therefore, this devices [7]. means that the prototyping stage should include all these Now, when designing user interfaces, insufficient types of input and combine them into a single design. attention is paid to ergonomics and convenience. In this The main objective of the study is to analyze the paper, we use an expert approach. This method allows you to possibility of using expert assessments when building an evaluate the effectiveness of the developed product when ergonomic user interface. used. 2. User Interface Design History 3. User Interface Ergonomics User interfaces are developing in the direction of The development of an ergonomic interface from the first increasing their level of quality and interactivity. time is very unlikely. Instead, the user interface ergonomics A sharp increase in the level of quality and interactivity is recognized as a process that is inherently open, iterative of user interfaces is quite rare and this increase is associated, (several cycles are required to achieve an acceptable result) as a rule, with the advent of new technologies for user and and incomplete. computer interaction, which make it possible to more quickly In the article, the tools to support the early design of an and efficiently perceive and process information. Based on ergonomic user interface were carefully researched to qualitative changes, we can trace the development of four determine appropriate methods, such as paper sketches, generations of interfaces that are significantly different from prototypes, layouts, diagrams. each other Since the need for rapid prototyping of the user interface The first period (1950s and early 1960s) of the varies depending on the project and the resources allocated, development of interfaces is characterized by the operation it makes sense to rely on the concept of prototype accuracy. of large computers in batch mode. They used punch cards for The accuracy of the prototype expresses the similarity input, and for output - a line-by-line printing device between the end user interface (working in a certain (analogue of dot-matrix printers). There was no interactivity technological space) and the process of prototyping the user in such interfaces, the only type of feedback was indicator interface. Today, there are several concepts for determining lamps. the accuracy of a prototype user interface. Accuracy is The second generation of interfaces (from the early 1960s considered to be high if the prototype presentation is as close to the early 1980s) appeared on mini-computers using as possible to the final interface or almost in the same type of alphanumeric displays. Users gave the computer commands presentation. This means that the prototype should be of high to enter them from the keyboard and watched the system quality in terms of presentation (which layout, which user response in text form on the monitor screen. This type of interface elements are used), global navigation and dialogue interface was the most developed and widespread in personal (how to move between information spaces), local navigation computers with operating systems MS DOS and Unix. (how to move around information spaces). Accuracy is The third generation of user interfaces is associated with considered low if the prototype representation only partially the transition to graphical interfaces. It began to develop in invokes the final user interface, without presenting it in the 1970s, but became widespread in the early 1980s. The detail. Between high accuracy and low accuracy [12] there is first graphical user interfaces (GUIs) were developed by an average accuracy [11]. This approach does not reflect the Xerox PARC. Later, graphic interfaces were also denoted by concept of user interface ergonomics [9]. Copyright © 2019 for this paper by its authors. Use permitted under Creative Commons License Attribution 4.0 International (CC BY 4.0). Usability engineering of user interface d requires  interaction: the availability of a sufficient number theoretical understanding of the problems of styling and of links for scrolling pages and fragments of pages of the design. User interface is an interface that provides data site, but at the same time, the lack of hypertext links transfer between a human user and both hardware and congestion, the use of segmentation of information (the user software components of a computer system [1]. is provided with only a fragment of information from a web Mostly the web-based user interface consists of input and page with the possibility of further transition to a hyperlink output tools, graphical elements, content. There are many for viewing the full-text version of the page), a convenient advantages of a professionally designed interface [10]: device orientation, the availability of feedback;  attracting attention;  adaptability: the ability to personalize the site with  meeting ergonomic requirements; user intervention (for example, changing the font size);  reducing user fatigue when working with a web  availability: the ability to use the site by users with application; different health opportunities having various hardware and  increasing user satisfaction and loyalty to the software, the use of universal file formats, the use of resource; alternative text for media elements, the possibility of using Today it is important to predict the effect of the interface site with disabled style sheets. under development on the intended users. To fulfil this All the experts evaluate competitors ' websites for requirement it is necessary to understand for who it is validating against these 5 above-mentioned criteria. intended, what is its rationale. In this article a methodology On the basis of the expert responses it is possible to for the development of the user interface by the expert group calculate the concordance coefficients W for the appropriate is presented. wireframing bulk. Under the development of the web-environment mockup , the developer will be obliged to know the effect of the shape on the perception, the rules of font and color schemes, where n is the number of respondents(experts), m is the international standards and GOSTs. number of parameters for which the assessment is made, ry Among the international standards, special attention is the total evaluation of the site by the n-th expert. To assess should be paid to the series of standards ISO 9241, ISO the statistical significance of justification of the estimated 14915, ISO/IEC 11581-10. These standards consider figures W, it is advised to calculate the rate of the reverse recommendations for design. one-sided probability distributionХ2fact= m*(n-1)*W. The estimate indicator Х2 can be obtained using the table editor 4. The main approaches to modeling MS Excell due to CHISQ.INV.RT The actual value must ergonomic interface exceed the estimated proving that the coefficient of Let us consider the methods of web-site wireframing concordance is statistically significant. using the service moqups.com. The positive aspects of this approach concerning the The whole design process can be divided into several evaluation of sites can be characterized by the relatively low main stages: cost of experts evaluation organization and a fairly high  wireframing of repetitive elements (site header, speed of the results processing [3]. footer, sidebar); On the basis of the obtained expert assessments of the  wireframing of unique elements (content competitors ' sites the choice of the main characteristics, components, filtering elements, etc.)); features of elements arrangement as well as quirks of To develop a competitive ergonomic interface (and convenience that must be taken into account when therefore its wireframe), it is necessary to analyze the main developing a wireframing of the website are specified. The elements of competitors ' websites [8]. next step is starting of the web interface wireframing [4]. Taking into account all the variety of ergonomic requirements for the design of the web-system wireframing, 5. Tools and ways to develop an we should be scrupulous about the development of technical ergonomic user interface specifications, which are aimed at reflecting of the main In our work 10 experts took part in the evaluation of features of the work [6]. competitors ' websites during the development of the At this time, little attention is paid to designing an prototype. IT-specialists and designers were associated as ergonomic user interface. We believe that the development experts. They were asked to evaluate the logo according to 5 of a user interface should be based on expert assessments. criteria. The results of the survey are presented in table 1 Consider the algorithm for evaluating the user interface below. experts. It is optimal to involve 10-12 experts for this task. Table 1. Experts’ evaluation of competitors The qualitative composition of the experts should be diverse: ' websites both artists and experts in the field of ergonomics, design, as Assessment Expert Concordance well as representatives of the targeted audience, for who this criteria of logo analysis coefficient developed web-system is intended. Experts evaluate the compactness + 0,55 wireframing for validating against the following criteria [2]: clarity + 0,78  compactness: a laconic site will fortify confidence to the organization, the site should not be overloaded with interaction + 0,95 multimedia information (graphics, animation, videos); adaptability + 0,45  clarity: this property implies the readability of the availability + 0,74 text on the pages of the site, the structuredness of the Together with the basic set that the prototyping tool information, the location of information in descending order should provide us with to create an effective prototype, we of importance, the ease of determining the location on the compare the most popular programs. site by the URL address of the page, the page uniformity Table 2 presents a comparison of the most popular tools structure of the site (content elements should be located on for prototyping user interfaces [13]. the same places on all pages of the site); Table 2. Experts’ evaluation of competitors ' websites Tool name Description Platform / Price / Manufacturer Axure RP Pro A tool focused on creating prototypes of websites. Generates clickable Windows / $ 589 / HTML and documentation in Word format. Supports complex interaction. Axure Balsamiq Allows you to very quickly create layouts of your software. The generated Web / $ 79 / Mockups content looks like sketches. Balsamig Coutline* Web application for creating and viewing interactive prototypes. Includes Web /? / Coutline project management and monitoring team participation. EasyPrototype* Very similar to the popular Axure, a lightweight tool that allows you to Cross platform / $ design screen forms and export interactive HTML prototypes and 69 / documentation. ExtremePlanner Software Expression A powerful drawing tool for prototyping HTML, Silverlight and WPF Windows / $ 699 / Design applications with limited interactivity. Microsoft Fireworks You can create complex interactive prototypes. Many tools are similar to Cross platform / $ some tools from the Adobe suite. It is possible to export to PDF or HTML. 299 / Adobe MockApp* Keynote iPhone Interface Library. There is also an untested version for Cross platform / Powerpoint that does not export correctly. Бесплатный / Dotan Saguy OverSite* Creates the structure of the application, allows you to design interfaces and Cross platform / $ simulate applications in the form of a clickable prototype. It is possible to 65 / OverSite import an existing site for use as a starting point. pidoco* Web-based prototyping tool with the ability to work together in standard Web / $ 600 [2] / mode and sketch mode. pidoco Fig.1 Prototype of the personal account page. 1 – top horizontal menu; 2 – the header of the site; 3 – the form of geobotanical descriptions; 4 – form geobotanical descriptions; 5 – unit geobotanical analysis. [9] Fedorkevich E. V., Vetshev V. O. the Selection of criteria 6. Results for evaluating the quality of websites of educational We have chosen to work service moqups.com. The choice organizations // Journal Mir nauki [World of science], was influenced by a number of reasons: 2017 Vol. 5, No. 2 available at: 1. Availability of a free version for developing 1 project http://mirnauki.com/PDF/43PDMN217. pdf (accessible). 2. Convenient intuitive interface [10] Kondratenko S. V., Spasennikov V. V. Methods of 3. Various options for saving the developed project analysis and modeling activities of the operators in the 4. Capability of team work on the project process of the ergonomic support of the design and Figure 1 gives the examples of the developed prototype in operation of human-machine systems. [Bulletin of the moqups.com environment. This is made on the basis of the Bryansk state technical University].,2015. - № 1 (45). - pp. obtained data of expert evaluation in regard to competitors 87-94. considering all the basic ergonomic standards of web systems [11] Kondratenko S.V., Kuz'menko A.A., Spasennikov V.V. interface wireframing. Metodologiya ocenki deyatel'nosti operatorov v 7. Findings chelovekomashinnyh sistemah. // Vestnik bryanskogo The proposed solutions in the field of interface prototyping gosudarstvennogo tekhnicheskogo universiteta – 2017.- are most often based on the subjective experience of the №1 (54).- s.261-270. prototype. In our work, it is proposed to use expert analysis of [12] Plimmer, B.E., Apperley, M.: Interacting with Sketched competitor sites. This analysis allows you to effectively Interface Designs: An Evaluation Study. In: CHI’04. Proc. evaluate the convenience of competitor sites. Based on the of ACM Conf. on Human Aspects in Computing Systems, estimates obtained, draw conclusions about the cost- Vienna, April 24-29, 2004, pp. 1337–1340. ACM Press, effectiveness and effectiveness of building the interface in New York (2004). accordance with them. [13] Rapid Prototyping Tools. https://habr.com/ru/post/70001/ According to the results of the study, it can be concluded - access mode – free. that for the development of an ergonomic web site it is [14] Rudd, J., Stern, K., Isensee, S.: Low vs. high-fidelity necessary to analyze the existing standards and GOSTs, to prototyping debate. Interactions 3(1), 76–85 (1996). conduct an expert assessment of competitors ' websites, to make an “appropriate” model of wireframing using actual software. The approaches proposed in the article concerning the assessment of the developed wireframing quality due to using the methods of expert analysis allow us to estimate preliminarily practicability, functionality and convenience of using this site taken as an examplary reference in the development of a new resource. 8. References [1] ISO 24765-2010 Systems and software engineering — Vocabulary. Intr. 2010-12-15. [2] Averchenkov V. I., Kondratenko S. V., Spasennikov V. V. Mathematical modeling of the process of testing using the scale of color preferences. // Information systems and technologies., 2016. № 2 (94)., pp. 5-13. [3] Averchenkov V.I., Gulakov V.K., Mirochnikov V.V., Potapov I.A., Spasennikov V.V., Trubakov A.O. Formation of the color palette for content based image retrieval automated systems // World applied sciences journal. - 2013. - Vol. 24. № 24. – pp. 1-6. [4] Beshelev S.D., Gurvich F.G. EHkspertnye ocenki. – M.: Nau- ka, 1973. – 161 s. [5] Beshelev S.D., Gurvich F.G. Matematiko-statisticheskie metody ehkspertnyh ocenok. – M.: Statistika, 1980. – S. 263. [6] Dergachev K. V. Ensuring the ergonomics of the user interface in the design of websites // Innovative methods and models in economic psychology, ergonomics, production management.[Proc. Rus. scientific and practical conf. ]. Erokhin D. V., Fedonin O. N.. – Bryansk: BSTU, 2015. – pp. 146-149. [7] Dergachev, K.V. Proektirovanie pol'zovatel'skogo interfejsa [Tekst] + [Elektronnyj resurs]: ucheb. posobie / K.V. Dergachev. – Bryansk: BGTU, 2016. – 128 s. [8] Emaletdinova L.YU., Katasyov A.S., Kirpichnikov A.P. Nejronechetkaya model' approksimacii slozhnyh ob"ektov s diskretnym vyhodom // Vestnik Kazanskogo tekhnologicheskogo universiteta. – 2014. – T. 17, № 1. – S. 295-299.