• No results found

Development of computer aided tools for UI synthesis based on monitoring of usage and the source code repository

N/A
N/A
Protected

Academic year: 2020

Share "Development of computer aided tools for UI synthesis based on monitoring of usage and the source code repository"

Copied!
5
0
0

Loading.... (view fulltext now)

Full text

(1)

Abstract— during the development of window UI forms

sketches must be specified interface element sizes and their locations. This process can be automated based on statistical user’s experience of previous software versions. It is also necessary to automate processes generate program code from the graphic sketches made by "hands". Then the generated program codes necessary to be adapted to the source templates. So in this work presented approach for the construction of several tools to automate the processes of designing user interfaces. To identify data use interfaces offered event monitoring automation scheme. Presented formalization of data storage and algorithms. As well as a diagram and automatic programming algorithm based on visual recognition of elements interface contours of sketches. Presented source code redesign process of the UI with the user experience metrics.

Index Terms—user interface, usability, CAD, UI, tools,

monitoring, code generator, user activity.

I. INTRODUCTION

The graphic user interface (GUI) is one of the most comprehensive and most challenging parts of the software development process and insufficiently automated. It is because of convenience and sophistication of user interfaces significantly increases the efficiency and speed of designer's tasks. To develop interfaces used mainly "manual" programming, based on the common visual design interface component sets.

Most of today's popular software development environment (such as Embarcadero Delphi and C++Builder [1], Lazarus [2], NetBeans [3], Microsoft Visual Studio [4]), prototyping and sketching interfaces (such as: Microsoft Visio [5], Evolus Pencil [6], Balsamiq Mockups [7], Pidoco [8], Produle Systems Mockflow [9], Rudrasoft MockupTiger [10], Proto.IO [11], ProtoShare [12], Axure [13], UI Mockup [14], Antetype [15], iMockups [16], CATCH Screen Architect [17], iPhone MockUp [18], UICloud [19], Protosketch [20], Napkee [21], wire2app [22]) does not allow for an alternative choice of visual realizations controls the user interface or next functions: search, selection alternatives program output code implementation of these UI elements.

Manuscript received Dec, 2016.

Oleksandr Markelov, Department of Computer-Aided Design (CAD), Lviv Polytechnic National University (e-mail: markel1@polynet.lviv.ua,

oleksandr.markelov@gmail.com). Lviv City, Ukraine, Phone

No:+380322582674

Thus a set of interface elements of design software is as a result of a choice of programming or prototyping environments.

During the design of the user interfaces of software and automation of these processes, programmers should study the spectrum of interface elements [23]; visual and source code characteristics [26, 27] as well as the need to have reliable and variety of information about time and quantitative parameters of interaction [24,25,28] between end-users are ready software screen interface.

II. THE EVENT MONITORING PROCESS OF USER INTERACTIONS WITH THEGUI

For information on using interfaces must be developed automatic monitoring tool of UI interactions.

Ways to achieve evaluation:

• Automatic surveillance of user interactions with software user interfaces;

• Recording coordinates and vector movement mouse cursor, tablet pen;

• Recording clicking, clicks, selection, activation pickups etc.

• Recording time reading text or study of options controls interface.

To calculate user activity on the GUI object used the time "mouse" had the object and number of action. The additive formula is:

 

n j j action k i i

move

t

type

a

1 1

(1)

where:

move and

action − weight ratios of events (actions); k and

n

− number of relevant events (actions); ti − the duration of event; typej − type of the importance action.

Multiplicative method of evaluation, to the chaotic clicks and idle "mouse" had a smaller effect:

                             

  action n j j action move k i i

move t d type d

a

1 1

 (2)

where:

d

move and

d

action − compensating the weight ratios of actions.

Static user activity (As) − characteristic of attention:

ps s

s T f

n A

 (3)

where ns− number of registered observation points for the

Development of computer-aided tools for UI

synthesis based on monitoring of usage and the

source code repository

(2)

position of "mouse" without moving; T− total session time user activity; fps− the frequency of observation of samples per second.

Moving user activity (Am) − description of effectiveness:

ps m m

f T

n A

 (4)

[image:2.595.323.531.57.211.2]

where nm − number of registered observation points for the position of "mouse" of the movement;

Fig.1 The general schema of algorithm of the tool for analyzing “mouse” events.

Fig. 2 Various detection accuracy of the movement of the manipulator of the “mouse”

Figures 1 & 3 shows the schema of algorithm clicks processing data.

Fig.3 The general schema of algorithm of identification process and logging “mouse” cursor.

[image:2.595.289.545.255.744.2]
(3)

m s m

s n n

[image:3.595.304.550.65.426.2]

n ,   (5)

[image:3.595.46.296.128.518.2]

Figure 2 shows three different levels of registration accuracy of observation points and measured in the number of samples (frames) per second.

Fig.4 The functional schema of modules and components

Fig.5 The schema of local DB for user interactions data

Fig.6 The schema of using automated UI tracking tool

III. THE PROCESS OF CONVERTING GRAPHICAL PROTOTYPING WINDOWSUIFORMS TO CODE Draft design of window shapes (prototype, mock-ups, wireframe, sketching) of GUI is usually carried out either manually by pencil or in graphics editors as raster or vector images. Often these are called frameworks prototypes when they are abstracted from the details of graphic design. The end result of GUI designer is a bitmap image plane. Later this image must describe software programmers code and mark up the layout placement - a laborious and lengthy process. There is a need to automate the process.

The process consists of the basic steps:

1) storage repository of template components GUI; 2) determine the contours charts of template components GUI;

3) storage repository of layout placement of interface elements; geometric model of layout descriptions;

4) determine the characteristics of visual geometrical parameters template interface elements (dimensions, position, display options etc.);

[image:3.595.49.254.546.750.2]
(4)
[image:4.595.311.559.53.513.2]

Fig.6 The scheme of algorithm identification process GUI constructs and synthesis code

IV. THE PROCESS OF SOURCE CODE REDESIGN INCLUDE DATA OF USING INTERFACE

The reprogramming process comprising: a linguistic description of code snippets, templates, forms, taking into account the user experience metrics. The general schema of this process shown on Figure 7.

Fig. 7 Scheme of source code redesign process of the UI with the user experience metrics

V. CONCLUSION

Developed several automation facilities of the design of user interfaces. The first tool automates the process of monitoring user interactions with ready software interface, to generate data of interface surface activity zones. The second tool enables recognition (identification) typical of visual graphic design elements (buttons, menus, text fields ...) on the graphical user interface software sketch and then export to the code. The third tool make integration of software codes templates, and automatic recognized elements layout, and UI monitoring metrics.

REFERENCES

[1] Embarcadero Delphi and C++Builder Quick Start Tutorial, Product Documentation, XE Release, PDF Last Published October 18, 2016, [Electronic resource] URL: http://www.embarcadero.com/ products/rad-studio – Last access: 2016-Oct-01. – Title from the screen.

[image:4.595.47.287.55.635.2]
(5)

[3] NetBeans IDE - free, open-source Integrated Development Environment for software developers, Swing GUI Builder [Electronic resource] URL: http://netbeans.org. – Last access: 2016-Oct-02. – Title from the screen.

[4] Microsoft Visual Studio. [Electronic resource] URL: http://www.microsoft.com/visualstudio. – Last access: 2016-Set-24. – Title from the screen.

[5] Microsoft Visio Professional. [Electronic resource] URL:http://www.microsoft.com/office/visio – Last access: 2016-Sep-10. – Title from the screen.

[6] Evolus Pencil. [Electronic resource] URL: http://pencil.evolus.vn – Last access: 2016-Sep-10. – Title from the screen.

[7] Balsamiq Mockups. [Electronic resource] URL: http://www.balsamiq.com/products/mockups – Last access: 2016-Sep-10. – Title from the screen.

[8] Pidoco. [Electronic resource] URL: https://pidoco.com – Last access: 2016-Sep-10. – Title from the screen.

[9] Produle Systems Mockflow. [Electronic resource] URL: http://www.mockflow.com/ – Last access: 2016-Sep-10. – Title from the screen.

[10] Rudrasoft MockupTiger. [Electronic resource] URL: http://www.mockuptiger.com/ – Last access: 2016-Sep-10. – Title from the screen.

[11] Cyberopsis Webdata Proto.IO. [Electronic resource] URL: https://proto.io – Last access: 2016-Sep-10. – Title from the screen. [12] Site9 Inc. ProtoShare. [Electronic resource] URL:

http://www.protoshare.com – Last access: 2016-Sep-10. – Title from the screen.

[13] Axure Software Solutions. [Electronic resource] URL: http://www.axure.com – Last access: 2016-Sep-10. – Title from the screen.

[14] Tool Software UI Mockup. [Electronic resource] URL: http://www.toolsoft.net/ui-mockup.html – Last access: 2016-Sep-10. – Title from the screen

[15] ERGOSIGN Technologies Antetype. [Electronic resource] URL: http://www.antetype.com – Last access: 2016-Sep-10. – Title from the screen.

[16] Endloop Systems iMockups. [Electronic resource] URL: http://www.endloop.ca/imockups – Last access: 2016-Sep-10. – Title from the screen.

[17] CATCH Screen Architect. [Electronic resource] URL: http://www.catchlimited.com/index.php?page=screen-architect – Last access: 2016-Sep-10. – Title from the screen

[18] iPhone MockUp / Lukas Mathis [Electronic resource] URL: http://iphonemockup.lkmc.ch – Last access: 2016-Sep-10. – Title from the screen

[19] UICloud. A project by Double-J Design. [Electronic resource] URL: http://ui-cloud.com – Last access: 2016-Sep-10. – Title from the screen [20] Protosketch. Mode of access: https://protosketch.uistencils.com/ Last

access: 2016-Oct-10. – Title from the screen

[21] Napkee - make your mockups come alive [Electronic resource] URL: http://www.napkee.com/ Last access: 2016-Sep-10. – Title from the screen

[22] wire2app – Beta [Electronic resource] URL: http://www.wire2app.com/ Last access: 2016-Sep-10. – Title from the screen

[23] Oleksandr Markelov. The Review of CAD Software in Machinery Design: Spectral Characteristics of GUI components / Oleksandr Markelov, Mykhaylo Lobur // CAD in Machinery Design. Implementation and Education Problems: Proceeding of the XX Ukrainian-Polish Conference CADMD'2012 (Oct 11-13, 2012). - Lviv, Ukraine: Publishing House Vezha&Co, 2012. -136 с., - PP. 96-98, ISBN: 978-617-607-332-1

[24] Oleksandr Markelov, Collecting Data of User’s Activities in Interface Layout of MEMS CAD Software / Oleksandr Markelov, Mykhaylo Lobur, Sofia Bobalo // Perspective Technologies and Methods in MEMS Design : Materials of the VI-th International Conference MEMSTECH'2010, April 20-23, 2010, —Lviv-Polyana: Publishing House Vezha&Co, 2010, -284 p.,—PP.44-45;

[25] Markelov Oleksandr. Tracking User Interface Events: Information Structure of Tool / Oleksandr Markelov, Mykhaylo Lobur, Sofiya Bobalo // V-th International Scientific and Technical Conference “Computer Sciences and Information Technologies”(CSIT'2010, Lviv, UKRAINE, October 14-16), 2010. - Lviv, PP. 121-122

[26] Markelov Oleksandr, Computer Aided Programming of Segment User Interface Prototype from Graphic Sketch / Markelov Oleksandr, Kazarian Artem // Computer science and information technologies : proceedings of the IXth International scientific and technical

conference CSIT 2014, 18-22 November 2014, Lviv, Ukraine, Lviv Polytechnic National University. — 167 p. — Lviv. ISBN : 9786176076698

[27] Markelov O. Database of visual and source code components of user interface: information model design / Markelov O. // Science Journal of Lviv Polytechnic National University - № 747: Computer systems of design: Theory and Practices. - Lviv: Publishing House of Lviv Polytechnic. - 2012. - PP. 109-114;

[28] Spy++ is a Win32-based utility that gives you a graphical view of the system’s processes, threads, windows, and window messages

[Electronic resource]

References

Related documents

Twenty-five percent of our respondents listed unilateral hearing loss as an indication for BAHA im- plantation, and only 17% routinely offered this treatment to children with

The Nominating Committee suggests for Chairman of District IV, the name of

sulla base della nostra esperien- za di cinque anni la presenza di un medico (spesso come co-conduttore) è molto utile per discutere ad esempio dei sintomi

Long term treatment with only metformin and pioglitazone and in combination with irbesartan and ramipril significantly ( P <0.001) reduced elevated serum

To further elucidate the po- tential role of IL-31 in allergic rhinitis, we studied the release of IL-31 and IL-13 into nasal secretions and serum after unilateral allergen challenge

Results: Serum copper and zinc were elevated in asthmatic children compared to controls with no relation to clinical manifestations or laboratory parameters .Serum lead

There are infinitely many principles of justice (conclusion). 24 “These, Socrates, said Parmenides, are a few, and only a few of the difficulties in which we are involved if

19% serve a county. Fourteen per cent of the centers provide service for adjoining states in addition to the states in which they are located; usually these adjoining states have