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.
User interfaces are developing in the direction of increasing their level of quality and interactivity.
A sharp increase in the level of quality and interactivity of user interfaces is quite rare and this increase is associated, as a rule, with the advent of new technologies for user and computer interaction, which make it possible to more quickly and efficiently perceive and process information. Based on qualitative changes, we can trace the development of four generations of interfaces that are significantly different from each other
The first period (1950s and early 1960s) of the development of interfaces is characterized by the operation of large computers in batch mode. They used punch cards for input, and for output - a line-by-line printing device (analogue of dot-matrix printers). There was no interactivity in such interfaces, the only type of feedback was indicator lamps.
The second generation of interfaces (from the early 1960s to the early 1980s) appeared on mini-computers using alphanumeric displays. Users gave the computer commands to enter them from the keyboard and watched the system response in text form on the monitor screen. This type of interface was the most developed and widespread in personal computers with operating systems MS DOS and Unix.
The third generation of user interfaces is associated with the transition to graphical interfaces. It began to develop in the 1970s, but became widespread in the early 1980s. The first graphical user interfaces (GUIs) were developed by Xerox PARC. Later, graphic interfaces were also denoted by the abbreviation WIMP (Windows-Icons-Menus-Pointing device), since they used windows, pictograms, menus, and a positioning device (mouse, trackball, and others). WIMP interfaces gained popularity with the Macintosh in 1984 and later appeared on MS Windows.
The graphical interfaces of modern applications belong to the fourth generation. They are distinguished by the increased image quality of elements that look more realistic thanks to modern interface tools - “widgets” that allow you to use shadows, volume of interface elements, window transparency, layers, animation, etc. Their distinctive feature in comparison with the user interfaces of the previous generation was also the use of many instrumental software tools for creating WIMP interfaces for computers and mobile devices [7].
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.
The development of an ergonomic interface from the first time is very unlikely. Instead, the user interface ergonomics is recognized as a process that is inherently open, iterative (several cycles are required to achieve an acceptable result) and incomplete.
In the article, the tools to support the early design of an ergonomic user interface were carefully researched to determine appropriate methods, such as paper sketches, prototypes, layouts, diagrams.
Since the need for rapid prototyping of the user interface
varies depending on the project and the resources allocated,
it makes sense to rely on the concept of prototype accuracy.
The accuracy of the prototype expresses the similarity
between the end user interface (working in a certain
technological space) and the process of prototyping the user
interface. Today, there are several concepts for determining
the accuracy of a prototype user interface. Accuracy is
considered to be high if the prototype presentation is as close
as possible to the final interface or almost in the same type of
presentation. This means that the prototype should be of high
quality in terms of presentation (which layout, which user
interface elements are used), global navigation and dialogue
(how to move between information spaces), local navigation
(how to move around information spaces). Accuracy is
considered low if the prototype representation only partially
invokes the final user interface, without presenting it in
detail. Between high accuracy and low accuracy [
Usability engineering of user interface d requires theoretical understanding of the problems of styling and design. User interface is an interface that provides data transfer between a human user and both hardware and software components of a computer system [1].
Mostly the web-based user interface consists of input and
output tools, graphical elements, content. There are many
advantages of a professionally designed interface [
increasing user satisfaction and loyalty to the resource;
Today it is important to predict the effect of the interface under development on the intended users. To fulfil this requirement it is necessary to understand for who it is intended, what is its rationale. In this article a methodology for the development of the user interface by the expert group is presented.
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, international standards and GOSTs.
Among the international standards, special attention should be paid to the series of standards ISO 9241, ISO 14915, ISO/IEC 11581-10. These standards consider recommendations for design.
Let us consider the methods of web-site wireframing using the service moqups.com.
The whole design process can be divided into several main stages:
wireframing of repetitive elements (site header, footer, sidebar);
wireframing of unique elements (content components, filtering elements, etc.));
To develop a competitive ergonomic interface (and therefore its wireframe), it is necessary to analyze the main elements of competitors ' websites [8].
Taking into account all the variety of ergonomic requirements for the design of the web-system wireframing, we should be scrupulous about the development of technical specifications, which are aimed at reflecting of the main features of the work [6].
At this time, little attention is paid to designing an ergonomic user interface. We believe that the development of a user interface should be based on expert assessments.
Consider the algorithm for evaluating the user interface experts. It is optimal to involve 10-12 experts for this task. The qualitative composition of the experts should be diverse: both artists and experts in the field of ergonomics, design, as well as representatives of the targeted audience, for who this developed web-system is intended. Experts evaluate the wireframing for validating against the following criteria [2]: compactness: a laconic site will fortify confidence to the organization, the site should not be overloaded with multimedia information (graphics, animation, videos); clarity: this property implies the readability of the text on the pages of the site, the structuredness of the information, the location of information in descending order of importance, the ease of determining the location on the site by the URL address of the page, the page uniformity structure of the site (content elements should be located on the same places on all pages of the site); interaction: the availability of a sufficient number of links for scrolling pages and fragments of pages of the site, but at the same time, the lack of hypertext links congestion, the use of segmentation of information (the user is provided with only a fragment of information from a web page with the possibility of further transition to a hyperlink for viewing the full-text version of the page), a convenient device orientation, the availability of feedback;
adaptability: the ability to personalize the site with user intervention (for example, changing the font size); availability: the ability to use the site by users with different health opportunities having various hardware and software, the use of universal file formats, the use of alternative text for media elements, the possibility of using site with disabled style sheets.
All the experts evaluate competitors ' websites for validating against these 5 above-mentioned criteria.
On the basis of the expert responses it is possible to calculate the concordance coefficients W for the appropriate wireframing bulk. where n is the number of respondents(experts), m is the number of parameters for which the assessment is made, ry is the total evaluation of the site by the n-th expert. To assess the statistical significance of justification of the estimated figures W, it is advised to calculate the rate of the reverse one-sided probability distributionХ2fact= m*(n-1)*W. The estimate indicator Х2 can be obtained using the table editor MS Excell due to CHISQ.INV.RT The actual value must exceed the estimated proving that the coefficient of concordance is statistically significant.
The positive aspects of this approach concerning the evaluation of sites can be characterized by the relatively low cost of experts evaluation organization and a fairly high speed of the results processing [3].
On the basis of the obtained expert assessments of the competitors ' sites the choice of the main characteristics, features of elements arrangement as well as quirks of convenience that must be taken into account when developing a wireframing of the website are specified. The next step is starting of the web interface wireframing [4].
In our work 10 experts took part in the evaluation of competitors ' websites during the development of the prototype. IT-specialists and designers were associated as experts. They were asked to evaluate the logo according to 5 criteria. The results of the survey are presented in table 1 below. A tool focused on creating prototypes of websites. Generates clickable HTML and documentation in Word format. Supports complex interaction. Allows you to very quickly create layouts of your software. The generated content looks like sketches.
Web application for creating and viewing interactive prototypes. Includes project management and monitoring team participation.
Very similar to the popular Axure, a lightweight tool that allows you to design screen forms and export interactive HTML prototypes and documentation.
A powerful drawing tool for prototyping HTML, Silverlight and WPF applications with limited interactivity.
You can create complex interactive prototypes. Many tools are similar to some tools from the Adobe suite. It is possible to export to PDF or HTML. Keynote iPhone Interface Library. There is also an untested version for Powerpoint that does not export correctly.
Creates the structure of the application, allows you to design interfaces and simulate applications in the form of a clickable prototype. It is possible to import an existing site for use as a starting point.
Web / $ 79 / Balsamig
Windows / $ 699 / Microsoft
Бесплатный / Dotan Saguy
65 / OverSite Web-based prototyping tool with the ability to work together in standard mode and sketch mode.
Web / $ 600 [2] / pidoco
We have chosen to work service moqups.com. The choice was influenced by a number of reasons: 1. Availability of a free version for developing 1 project 2. Convenient intuitive interface 3. Various options for saving the developed project 4. Capability of team work on the project
Figure 1 gives the examples of the developed prototype in the moqups.com environment. This is made on the basis of the obtained data of expert evaluation in regard to competitors considering all the basic ergonomic standards of web systems interface wireframing.
The proposed solutions in the field of interface prototyping are most often based on the subjective experience of the prototype. In our work, it is proposed to use expert analysis of competitor sites. This analysis allows you to effectively evaluate the convenience of competitor sites. Based on the estimates obtained, draw conclusions about the costeffectiveness and effectiveness of building the interface in accordance with them.
According to the results of the study, it can be concluded that for the development of an ergonomic web site it is necessary to analyze the existing standards and GOSTs, to 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.