Conceptual design and prototype implementation of graphics cards sorting. Abhinav Solanki

Transcription

1 Conceptual design and prototype implementation of graphics cards sorting by Abhinav Solanki

2

3 Master s Thesis on Conceptual design and prototype implementation of graphics cards sorting Submitted to Software Engineering Research Group in Partial Fulfillment of the Requirements for the Degree of Master of Science by ABHINAV SOLANKI First Supervisor: Second Supervisor: Prof. Dr. Gerd Szwillus Prof. Dr. Stefan Böttcher Paderborn, November 28, 2017

4

5 Declaration (Translation from German) I hereby declare that I prepared this thesis entirely on my own and have not used outside sources without declaration in the text. Any concepts or quotations applicable to these sources are clearly attributed to them. This thesis has not been submitted in the same or substantially similar version, not even in part, to any other authority for grading and has not been published elsewhere. Original Declaration Text in German: Erklärung Ich versichere, dass ich die Arbeit ohne fremde Hilfe und ohne Benutzung anderer als der angegebenen Quellen angefertigt habe und dass die Arbeit in gleicher oder ähnlicher Form noch keiner anderen Prüfungsbehörde vorgelegen hat und von dieser als Teil einer Prüfungsleistung angenommen worden ist. Alle Ausführungen, die wörtlich oder sinngemäß übernommen worden sind, sind als solche gekennzeichnet. City, Date Signature 3

6

7

8 Contents Contents List of Figures 6 List of Tables 8 1 Abstract Motivation Implementation Evaluation Introduction Problem Statement Approach Overview Structure of the Thesis Background- State of Art Existing applications Casolysis WeCaSo Technology selection Server-side technologies Client-side technologies Compatibility and Resources Compatibility Resources Design and Implementation Client Server Architectural Overview Workflow Design Create Experiment Perform Survey View Results Additional functions Contact us T2I engine XML mapper Challenges

9 Contents 5 Extensibility Adding New Experiment Type New User Interface API Changes Integrating Machine Learning Relating Artificial Intelligence Quality Assurance Types of Testing Unit Testing Integration testing Load testing Tools CodePro UX Enhancement User Story Problem Description Steps Creating New Experiment Performing Survey Viewing and Exporting Result Creating New Experiment Conclusion 57 References 59 5

10

11 List of Figures List of Figures 1 Process CS experiment Limitations CS experiment Approach overview New project and import functions in Casolysis Algorithms available in Casolysis Dashboard showing functions available in Wecaso Web Service architecture showing Servlet container JSP interpretation Client architecture Client-Server architecture Homepage Server architecture implemented Activity diagram for authentication process General activity diagram High-level component diagram Sequence diagram- Experiment creation Sequence diagram- Performing survey Sequence diagram- View Result Activity diagram- Contact us Process-T2I Engine T2I Engine example Survey UI interaction Options to search and output result file Experiment creation flow Performing survey flow Result view flow AI while Creating Experiment Perfmon- 1 Client Perfmon - 4 Clients Similar/ Duplicate code analyses- CodePro Code Auditing for Coding standards- CodePro Testing Pyramid Attrakdiff result Log In dialog box New user registration CS Application Home Create Experiment Upload Experiment Data Select Survey Experiment

12 List of Figures 40 Perform Survey Select experiment View Survey Result Delete experiment Contact Us

13

14 List of Tables List of Tables 1 Browser compatibility Category-Web view mapping Current and Possible data types Current and Possible Experiment Modes Views and their web servlets Test cases

15 1 Abstract 1 Abstract Card sorting is a technique to enhance the user experience. It is a statistical approach that takes the evaluation done by a number of selected test users on specific samples as input and use different approaches to generate output such as Heatmap, Dendogram, Distance-matrix etc. But currently available card sorting applications come with their limitations and restrictions, to overcome them, a conceptual prototype as a web application is developed, which will not just resolve the problem but will also provide a base for evolutionary enhancements. In this section, a highly condensed form of the document will be presented. It is divided into three subsections as under- 1.1 Motivation Sorting technique, that has been followed nowadays comes with their limitations. New analysis algorithms are being added to them from time to time according to the requirements but the major setback is that they only support sample data as text. The other data types such as animations, videos, images and other graphical entities have not been supported. For physical workshop based methods, it could be little difficult to provide diversities but can be implemented in application-based methods. So the aim was to make an application that can resolve the issues present in the currently available applications and in addition will provide a conceptual design prototype that can be used as a bridge in other technical fields such as pattern recognition, machine learning, and artificial intelligence. 1.2 Implementation A prototype for card sorting web application is developed as per the need illustrated in section 1.1. To meet the requirements, modern technologies have been used. The application performs open and closed card sorting experiments on textual data as well as on other graphical data such as images, animations, and videos. The creation is fluid following ACID properties. The experiment data is presented to the test subjects which could also be made available on LLP(Laser light plane) based multi-touch tables. Survey data is stored in XML files to make the portability much easier. Authentication and authorization techniques for web applications are closely followed in addition to efforts made in optimizing the performance of the application. Survey result on the experiments is viewed in a user-friendly way providing additional support functions such as exporting data, search and sorting. 2

16 1.3 Evaluation 1.3 Evaluation To ensure the set goals for the quality of the card sorting web application, validation and verification have been done. The functional requirements have been meeting. For validation purpose, unit testing, as well as SIT, has been performed. In order to enhance the user s experience and optimal operation-ability, aspects of usability and desirability have been considered. Evaluation based on Pragmatic Quality, Hedonic Quality, and Attractivity as defined in AttrakDiff model is performed by 8 test participants having adequate knowledge. To meet the coding standards and improve the code quality in the application, freely available tool CodePro Analytix is being used. 3

17

18 2 Introduction 2 Introduction User experience and usability are the major aspects that stick the user to the product. A better user experience and usability are concerned with interface design and layouts, meaningful interaction between users and the product. To do that, one such technique named card sorting is used.test subjects input on various data contents is processed to generate output such as Heatmap, Dendogram, Distance-matrix etc to give the user a graphical feedback. It has different variants such as Open, closed, Semi-closed, reversed and hybrid card sorting, to be chosen on the basis of requirements of the project and are used to design Informative work-flows, websites, software, navigational paths etc. Feedback from the testers i.e test subjects or test participants will help to develop structures, in accordance with how the user is expecting and wants it to be, as per the requirements. Test subjects will review and organize the content in a way that makes sense to them in a specifically described manner without prior bias. It helps to identify patterns in how users expect to find content. At certain points, generalization approach is implemented to cover the mass. The graphs, maps, diagrams generated by different analysis approaches help the developing community to realize the aspects.it can be done electronically or one to one in defined workshops. So the basic goal is to enhance the effectivity, efficiency, and satisfaction in a specific context of use [USA]. The process can be visualized from the figure 1. Figure 1: Process CS experiment 2.1 Problem Statement To enhance and make the user experience and usability better, we use card sorting experiments, but the comes with limitations and restrictions on data contents and analyses algorithms, bridging with other technologies. For physical workshop based methods, it could be little difficult to provide diversities but can be implemented in application based methods. Software application based card sorting experiments have more reachability, flexibility and can be better customized according to the needs of the artifact. Find-ability and adherence to visual aesthetics can also be tackled with this approach. 4

19 2.2 Approach Overview Support for more data types will provide a better edge in accordance with user experience and requirement. While developing any website, software or any navigational path, its not only the text that has to be worked upon, graphical entities are also important. Working on them can provide better aesthetics and can result in a better user experience. Moreover, it can also be used for pattern recognition, predictions, and human intelligence forecasting. So far AI applications are used to perform that task but they restraint to the change in environmental aspects such as a change in human behavior and thinking from time to time, therefore a fresh just in time experiments are needed for a better precision. Below shown figure 2 briefly summons all the relevant details mentioned so far. Figure 2: Limitations CS experiment 2.2 Approach Overview Our approach to solving the above-mentioned problems will be a card sorting web application prototype that will provide enhance the customization in experiments creation and will provide a base for further development. Being a web application, it will have no dependency for additional software or plug-ins on the client-side environment. The data will be stored and processed entirely on the server side along with backup. MVC architecture mixed with 3 tier web architecture is followed to develop the application. Figure 3 shows a high-level view of what has been tried to cover up with this card sorting web application. 5

20 2.3 Structure of the Thesis Figure 3: Approach overview 2.3 Structure of the Thesis The thesis is structured as follows. Chapter 1 contains the abstract of the thesis. Chapter 2 contains an introduction and problem statement of the thesis along with approach overview. Chapter 3 explains the related work that has been done in past years and the technologies available for the current work. Chapter 4 describes the high-level design, implementation details of the application along with UML diagrams. Chapter 5 gives a brief overview of the extension structure regarding further maintenance of the application. Chapter 6 contains the evaluation methodology, verification, and validation of application. Chapter 7 provides a typical user story with its solution. Chapter 8 summarizes all the work which was done as part of this thesis and draws conclusions followed by future work. 6

21

22 3 Background- State of Art 3 Background- State of Art This chapter presents a brief description of all the technologies, approaches, frameworks used to develop the application along with a brief introduction of the work that has been done in the past few years. Chapter 3.1 introduces two applications that have been developed and currently operational i.e Casolysis 2.0 and Wecaso. Chapter 3.2 describes the technologies available to solve the problem, developing the web application and why specific technology has been selected over another. In the end, Chapter 3.3 describes some of the Compatibility concerns that have been taken into consideration while development. 3.1 Existing applications This chapter describes the two existential operational card sorting applications i.e Casolysis 2.0(desktop application) and Wecaso (Web application). A very brief description of them Casolysis 2.0 Casolysis 2.0 is a desktop application running on DotNet framework and allows several different procedures to be used and combined with each other. It makes it possible to visualize cardsorting results with the aid of multidimensional scaling, thus making them accessible to intuitive interpretation[cas]. Figure 4: New project and import functions in Casolysis 2.0 Figure 4 shows the functions to create a new project, a compatible CSV (Comma Separated Value) file can be imported to this application to create a project. Figure 5 shows the algorithmic functions available to carry out the analysis of data collected from the experiment. The Later result can also be exported into various formats. 7

23 3.2 Technology selection Figure 5: Algorithms available in Casolysis WeCaSo WeCaSo stands for web-based card sorting and allows the creation, administration, and execution of card sorting experiments in structuring menu structures or navigation paths of websites [WEC]. This application only takes textual data as input to perform the analysis. The application has been loaded with other features(available in Bootstrap) as well as shown in figure 6. Figure 6: Dashboard showing functions available in Wecaso 3.2 Technology selection To develop a web-based application, support is divided into two fronts i.e Server side and Client side. In the following section and 3.2.2, the technologies available and the why the specific language is preferred has been explained Server-side technologies To implement server-side logic, several languages and frameworks are available such as Java, C#, PHP, DotNet etc. All of them provide sufficient support to connect to different databases and front side technologies. Our need is to choose a technology that goes head to 8

24 3.2 Technology selection head with client-side implementation and as our project needs extensibility and customization, so we are left with the J2EE framework. The J2EE framework is the most common choice when there is need to build something from scratch which does not have predefined common templates such as available for PHP and ASP.Net. J2EE provides servlets, which are java program that provides dynamic web content to extend the capabilities of the server[ser]. To store the experiment data and provide querying and updating compatibilities, a relational management system SQL Server 2014 is used. It provides a fluid connectivity with Java framework. figure 7 shows how the web service operations will be carried out using servlet framework. Figure 7: Web Service architecture showing Servlet container Client-side technologies Client-side logic implementation can also be done with various technologies available, clientside logic comprises of two things i.e view and model. To implement the view, most common technology available is HTML5 to present the content on the world wide web. In our project, as we are using J2EE Servlets, so JSP (Java Server Pages) which are HTML5 pages with java code inside it, will be used. JSP will provide better handling at the client side and will decrease the server load. JSP provides a better way of handling the DOM (Document Object Model) and implementing object-oriented features. The handling of JSP a the server side can be seen in figure 11 Model logic can be implemented with several scripting languages such as Javascript, PHP, Angular JS, Node JS, VBScript etc. Out of all, we will use Javascript with 9

25 3.3 Compatibility and Resources Figure 8: JSP interpretation CSS to provide additional interactive capabilities on the client side. Out of all the frameworks available in JavaScript, we will use JQuery and Ajax. Jquery is used to simplify client-side scripting logic, makes traversal and handling much easier. Ajax (Asynchronous JavaScript and XML) as the name tells is used to create asynchronous service calls in a web application. 3.3 Compatibility and Resources In this section, we will discuss the compatibility measures that are trending in the current world and the resources taken into consideration while development and evaluation of the web application. Section will explain about the hardware and software compatibilities & the section will be about resource selection Compatibility Compatibility with regard to a web application can be categorized into software compatibility and hardware compatibility. They are clarified as follows- Software Compatibility Two things come into play when it comes to software compatibility i.e Browser compliance and storage space. The application will be containing graphics in the form of video, animations, and images so there is a need t see that the content will fit in most of the browsers. And as we are dealing with the creation of experiments, the data has to be stored at the server side. Graphics can cover a large amount of space if not checked, limits are needed to be implemented for the experiment size with files upload. The graphics support at max with respect to different browsers are stated in table 1. 10

26 3.3 Compatibility and Resources Table 1: Browser compatibility Browser Version Google Chrome Mozilla Firefox 29.0 or higher 28.0 or higher Internet Explorer 10.0 or higher Hardware Compatibility Hardware compatibilities include load performance, device support, physical data storage, touch accessibility and system requirements. Th application is designed to support all sizes of monitors and touch accessibility is in compliant with browser support. Physical data storage space has been checked by putting the limits and some optimization steps to improve performance has been carried out, which we will discuss in section Resources Resource selection is the most vital part of application development. In our application, it is divided into two parts: Data contents and formats supported, and test subjects for quality assurance, better UX, aesthetics, and usability. Data content support will be extended to include various formats of images, animations, and video content supported by native HTML5 and browser kits. All of which was only limited to text at present. The results of experiments can be exported to various formats such as PDF, CSV etc with the help of additional JavaScript library Datatable. Test participants will be the graduate students having sufficient knowledge of the current trends, technologies present, and aesthetic behavior. 11

27

28 4 Design and Implementation 4 Design and Implementation In previous chapters 2 and 3, we had discussed the problem statement and the tools that are available and will be needed in the solution. In this section, I am going to explain the design and implementation steps realized for the application solution. Section 4.1 and 4.2 will give an introduction to the design and architecture of the application.section 4.3 sums the architecture of the web application and will discuss the design chosen to implement.section 4.4 will enlight the process of creation of new experiment. Section 4.5 will elaborate the mechanism of performing survey and section 4.6 is about handling the results. Section 4.7 will describe some additional functions integrated into the application and finally, section 4.8 is about some key points related to the challenges faced during designing and implementation, hardware and software checks, and some internal information about the application. 4.1 Client This section provides a short introduction to the Client component, the way it interacts with the server and action it performs. As discussed in chapter 3.2, the client-side logic has been implemented in two parts i.e view and view model. View comprises a combination of JSP(Java Server Pages) and HTML5, whereas to provide additional interactivity and handling JQuery and Ajax are used. Either the client sends HTTP request to the server directly and receives a response in the form of HTML, CSS etc or via Ajax call which helps the client manage asynchronous calls. The mechanism can be seen in figure 9. Here Ajax engine transforms XML, JSON data to HTML, CSS data to be inserted in DOM. Please note even when we are using JSP, i.e java code inside HTML document, no java code will be sent to the client by the server. The client is responsible for sending HTTP Get/Post Request to the server, and then handles the response from the server internally. It generates the raw HTML page and display it to the user and later when data has been received, it updates the DOM accordingly as shown in figure 10. The calls made between the browser and Ajax engine are asynchronous while Ajax engine maintains synchronous communication with the server. The security at the client side has also been taken into concern, an authentication mechanism has been implemented after which the user will be allowed to access further the functionalities of the application, on spot registration feature has also been made available to the user. After successful Sign-on, user will be forwarded to the Homepage of the application which represents the key functions at a glance as well as provides some insights of the application with a modern graphical user interface as shown in figure 11 12

29 4.2 Server Figure 9: Client architecture 4.2 Server The server presents elements that describe the back-end functionality. The logic has been implemented with Servlets and JSP. Servlets extend the capabilities of the server by providing dynamic content, uses JDBC connectivity for a command and query interaction with the database. They are responsible to interact with the database and provide the response to the client whether being XML, JSON file or HTML5, CSS data. JSP (Java server pages) are used along with servlets to provide functionalities, they can be said to be the different form of servlets because when the JSP page is called the first time, it is transformed into an equivalent servlet which is saved and then used next time whenever the specific JSP page is called. Logic can easily be implemented with the help of JSP as they are written directly with the client view. Most of the core pages of the application has been written in JSP such as SurveyHandler.jsp. Once the server receives the call, it connects to the database and performs authentication, validates the request with the help of AuthSession.java and redirects the user in case of 13

30 4.2 Server Figure 10: Client-Server architecture Figure 11: Homepage success or failure. Error handling has been implemented on the server side, currently, it catches few common errors which can be easily extended when the application will be tested in the live environment. The server contains four file modules i.e Servlets, JSPs, deployment descriptor (web.xml) for service mapping, and additional libraries to support different features as shown in figure 12. Servlet container is responsible for the lifecycle management and pooling of the servlets as per network requirements. Now we shift to next section that will explain the architecture of the application. Servlet classes are divided into five packages named- com.servlets.authentication - This package is used to handle the session, 14

31 4.3 Architectural Overview Figure 12: Server architecture implemented manages indirect accesses, prevent invalid intrusion and supports authentication to the application com.servlets.error- Whenever the servlets encounter errors while running, it redirects to this package to present to the user with useful information. com.servlets.handlers- This serves as the main package of the family consisting of classes that serves the core business logic of the features that will be explained in the next section com.servlets.session- To initiate a session, or end the session for the user or for the registration purpose, this package serves. com.utilities- This package helps in connecting to the database and provides a native class for the role user JSP files along with HTML5 files are placed in Web content folder where all the other additional scripting files are located. The deployment descriptor file i.e web.xml is present in its root directory and assign the client calls with services, it also manages filters for authentication and error handling. Additional libraries used in the application are placed inside Web content/web-inf/lib. 4.3 Architectural Overview The section will present in subsection 4.3.1, the general workflow of the tool by showing in which order which activities are executed. After that in subsection 4.3.2, will briefly explain the design and modeling of the application. 15

32 4.3 Architectural Overview Workflow This section describes the general workflow of our web application software in the form of activity diagrams. The activity diagram follows step by step action performed by the application. At first, how to access the application. The application can be accessed over the world wide web or local area network which depends on the deployment. The application provides an authentication interface to the user for validating the sessions and also provide an option for registration. After successful registration, the user will be redirected to the authentication interface to log in. The activity diagram is shown in figure 13 Figure 13: Activity diagram for authentication process After the user is signed in the application, then the features and functions are accessible. The user can either create a new experiment, perform the survey on various experiments, can view the survey results or some additional functions related to the web application and data 16

33 4.3 Architectural Overview configuration. The workflow of the functions and procedures discussed above can be visualized in figure 14. Here we discuss how the activity will be carried out further after reaching the end of figure 13. Figure 14: General activity diagram The user will have features like creating a new experiment which will be indispensable if and only if the experiment base is empty i.e there are no experiments to carry out the survey. While creating an experiment, the user will be having few options to customize i.e if the experiment is open or closed, the data type of experiment is text, images, animations or videos. Once the user sets up the data, will be required to upload the specific data according to specification. Then the user can move to other tasks. 17

34 4.3 Architectural Overview The user can then proceed to perform the survey or preview the results, idealized is then proceeding to survey the experiment. If the experiment is closed, the user can choose the category and finalize their selection, while in the open experiment, the user will also be having an option to add a category in the experiment which will be reflected from then onwards in all the threads and can submit the selection including new category. The next thing remaining is viewing the survey results on experiments, the user will have an option to preview the results in a well-designed table. For a better visibility, the user will be having the option to sort all the columns inevitably. The results can be exported from thereafter into popular formats like PDF, CSV, Excel, HTML, and XML (from database server). That can be used as an input in other applications for advanced algorithms processing such as in Casolysis 2.0. Error handling, authentication and session validation has already been explained in 3. In the end, there is also a possibility to contact the administrators or moderators via contact option. The user can write details and send the message with that which will be saved in the database and is viewable to database administrators. For a friendly navigation, an option to go back to the previous page or homepage, and to log out is available. Log out will invalidate the session and redirect the user to the application start page. Now in the next section 4.3.2, we will discuss how various components of the application interact with each other Design In the previous sections, we have discussed the interactions and how workflow between activities, now the final step of the architecture is designing. In this section, the design structures are defined. This design will act as the starting phase for the implementation of the application. The web application is built on the specification and requirements as having been mentioned in section 2.1. Since the beginning of web application, it has evolved from single page static document oriented application to a very complex layered semantic and ubiquitous application. A number of web technologies, programming, and scripting languages have been developed to implemented design patterns needed to cater diverse demands of users on the world wide web [DES]. The technologies are evolving rapidly on the world wide web making way for better and more effective to overtake an older one making it obsolete. Resources available nowadays are enough to fulfill demands technically, so the trend is shifting on improving user interaction, aesthetics, and powerful web applications in an efficient manner. After analyzing some common design patterns and architectural styles, I came up with 3-tier web application architecture mixed with MVC (Model-View-Architecture). Since my goal was to make a prototype, I choose agile development as my process of development. The factors that drive me to choose such an architecture are as follows- 18

35 4.3 Architectural Overview The differentiation between several layers of the application can easily be done. Agile development supports the distribution of responsibilities so that individuals can work independently. Most dynamic part of application i.e View, that keeps changing with time will be separated from other parts and can be easily adopted into newer style. So that application components could have low coupling and high cohesion. While working with the view or presentation, minimal knowledge about the model and controller should be required. As stated above, our architectural design will be having three major components i.e Model, View and Controller. Specific high-level component diagram of the application with respect to this architecture is shown in figure 15. Figure 15: High-level component diagram The model component consists of servlets that are java classes with some HTML code inside them and serve the purpose of web services. It contains and processes all the data traffic sent and received from the controller. The model component contains the business logic and manages all the tasks related to business rules, meta-models and database management which is done with command query interface. The view component represents the graphical user interface in a web browser, it contains HTML as well as few Java classes. It provides a way for the user to interact with the data, capture the user actions and communicate with other components. The controller component maps view and model and handles lightweight user requests. It 19

36 4.4 Create Experiment consists of scripting logic, and few Java classes. It is responsible for matching the user request with the specific web service. It also performs some actions related to DOM processing. Now, In the next sections, we will discuss the individual features in the web application, what role they perform, the mechanism with the help of UML diagrams and how they fit with our architecture. 4.4 Create Experiment The first function that comes with the application is the creation of a new experiment. The process is quite flexible, it provides the user with options enough to reach our goal. This is expected to be the first step of using the application until we have experiment already in the database to be used in the subsequent functions. The problem and limitation that we had with the other current application is that they only support textual data, here while creating an experiment, the user can choose various data-types available, which are described as follows- Text - Textual data can be provided as input, which will be internally converted to text-based images by an internal T2I engine. Images- Images can be directly uploaded. A large range of formats is supported in this category. Animations- They are also supported with a minimum size of the display and the preferred format is GIF. Videos- Videos can also be uploaded and supports additional function for handling like auto-play, full screen, play, and pause etc. As we are using the graphical data without any compression, and obviously videos and images take quite chunky space, so a restriction on the upload size of experiment has been capped at 100 MB. The combined size of all the files in an experiment should be less than this limit. while creating an experiment, users have to provide name, small description, data type and experiment type. Data type has been explained above, experiment type are as follows- Open - If this experiment type is chosen, then while performing the survey, the user will be having an option to add new category at runtime for current as well as subsequent submissions. Closed- This experiment type is very basic and all the categories have to be defined while creating an experiment, no further modification can be done. Figure 16 shows the sequence diagram of the process of creating a new experiment. Apart from User, three nodes are used. The user will enter the experiment related data to Create- Exp.html which will process the data by calling the web It will also store the data onto data storage cookie to be used at next page and save server overhead. After 20

37 4.4 Create Experiment the successful completion of the task, it will redirect the user to the next page depending on the data type user has selected as the mapping shown in table 2. Figure 16: Sequence diagram- Experiment creation After the user is redirected to the next web view depending on the data type selection, the user can then upload the specific data and can preview it on the screen. The user will then have to enter the categories with respect to data that has been uploaded. If the experiment is Textual based, then instead of uploading data, the user will have to enter the textual data. This feature currently does not support the LLC due to the lack of on-screen keyboard. As the user submits the data, web will be called which on the basis of data type will process the request. If the data type is Images, Animations or Videos, it will copy the data to the server, insert the entry in the database tables at the server and will create an XML document to be used for survey processing of experiment. In the special case, if the data is Textual, then an internal T2I (Text to Image) engine is used to convert the textual data to 21

38 4.5 Perform Survey Table 2: Category-Web view mapping Data type Related view Text UploadText.html Images Upload.html Animations UploadAnimations.html Videos UploadVideos.html textual images for a graphical view. On successful completion of the creation of experiment, it will redirect the user to the homepage for further actions. 4.5 Perform Survey This section explains the mechanism of performing a survey on the experiment and submitting it. After the user creates experiment or there is already specific experiment present in the database, the user can proceed to perform the survey by selecting the options available on the homepage. The user will then be directed to select an experiment, after retrieving the data of experiment, the user can select the choices and submit the survey. The process of performing the survey is explained with the help of sequence diagram as shown in figure 17. As shown in figure 17, at first user will be required to select the experiment from the available list of experiments on Survey.jsp which will on load fetch the experiment list from the server. Then the user will be redirected to SurveyHandle.jsp, now on the basis of mode of the experiment selected whether Open or Closed, the user will be having an additional function. If the experiment type is closed, then the user can go on selecting the choices but if the experiment type is open, the user can add a category from the available function and add it to the database. After the category is added to the database, it will be simultaneously reflected in the experiment and future experiments. The user can then proceed to the category selection or can also edit the current selections before submitting. When the user submits the selected is called to update the selections made into the database, the XML file for storing the survey result will be updated at both the locations, primary and backup. The processing of backing up the survey files is automatic, to ensure data safety and adopt ACID properties in future. 4.6 View Results This process aims at displaying the result of the survey on the experiments to the user. This is the third idealized step after creating an experiment and then performing the survey. The user 22

39 4.6 View Results Figure 17: Sequence diagram- Performing survey will have to select the experiment and then will be redirected to view the result with additional options as explained with the help of sequence diagram in figure 18. Can be visualized from the figure 18, the user will first be required to select the experiment from the available list of experiments on Survey.jsp which will to retrieve the specific data from the server.after the experiment data is received, the user will be redirected to SurveyResult.java which will display the result of the survey on experiments. To display the result, it uses an additional library called Datatables which summarizes the data available in the user-friendly zone. It provides the user with an additional option of customized sorting numerically and alphabetically, which will be very helpful to arrange the numeric counts of the categories with respect to the specific data file. On the top of it, it also provides functionality to export the data, the user can select the option 23

40 4.6 View Results Figure 18: Sequence diagram- View Result as per its requirement, and the corresponding file can be downloaded on the local machine for further actions. the export options available are as follows- Copy-HTML - The entire tabular data can be copied to the user clipboard with this option to be placed in some customized location. PDF- This is the most common format used for reporting. CSV- This file type will allow the user to use the file as an input to the other applications such as Casolysis 2.0. Excel- This file format is widely supported on windows platform and can be used to produce graphical charts with the help of windows tools such as Microsoft Office. XML- This file is the native file containing all the experiment data and can be copied from the database. After the user has viewed the experiment-specific result and optionally exported the survey 24

41 4.7 Additional functions result file, the user can choose either to view the result of some other experiment or to go the homepage for another task. 4.7 Additional functions In the previous sections 4.4, 4.5, 4.6, we have seen how to create an experiment, perform a survey on it, and view the survey result and export the result to the local database. Now in this section, we will discuss some additional functions available in the web application. The functions with their brief description are as follows Contact us This function is intended for the communication between the user and the administrator. The communication will be carried out by query submission mechanism. From the homepage, the user can write a query and submit it, which will be saved in the database and administrator can view it. Query messages will have selected length and a header for a briefing. The activity diagram showing the tasks are represented by figure T2I engine As we have already discussed in the previous section, that this card sorting web application is developed for graphics cards but it will also provide functionality for Textual data. To do that, this application uses its so-called T2I (Text 2 Images) engine which will convert Textual data sample to Graphical data sample. It takes the text word as input and makes an image showing the word. The user can see and perceive the word in a more interactive manner XML mapper Storing data about experiments and surveys performed on them is one of the prominent task involved in the workflow. There were various options available to choose the standard file type, after a careful selection I have chosen XML (Extended Markup Language) to store my data rather than CSV or JSON. The reason for the choice is the better DOM (Document Object Model) management and wide support. XML is not as efficient as JSON but it has an advantage with better visibility and vivid support. 25

42 4.8 Challenges Figure 19: Activity diagram- Contact us 4.8 Challenges This section explains the few challenges that I came across while designing and implementing the application as explained in the previous chapters. Textual Input & UI Interaction As the application is focused on the graphical items, textual items as input are also supported. But as to make them work closely with other items such as images and animations, they are converted to Images after uploading by the T2I (text2images) engine. This also adds to the consistency in navigation while surveys and can be easily operated at LLP based multi-touch tables. The process of converting the textual words to images are shown in figure 20 The figure explains the process of how the engine works at a high level, how the application handles the textual input. It uses T2I engine to convert textual words to images with the help of Graphics2D library as shown in figure 21 with the help of an example where the user 26

43 4.8 Challenges Figure 20: Process-T2I Engine inputs a word Text and it will be converted to an image representing it after uploading to the server and before saving it in the database. The process of conversion will be interim, that means when the user enters the text word and upload it, it will get converted to a respective image before uploading. So the server will only know about the graphics file and will have no information about the original word that the user gave as input. Figure 21: T2I Engine example Collecting Survey Input Since the application is designed to perform various type of experiments, on different data types, for different classifications. The major concern was how to make the survey data collection process constant. So that, the same layout can be used for all the customized experiments for a better User experience. I came up with a straight idea of fixing up the size of items and selection choice via a drop-down box. 27

44 4.8 Challenges The drop-down list will fetch the list of all available experiments from the server automatically when it is loaded. The user can specify one selection per item available and even in the case of Open experiment, if the user chooses to add new category it will be added to the list of options simultaneously. The layout is shown in figure 22 which shows an experiment with images and drop down box for selection along with it. Figure 22: Survey UI interaction Survey Result Output With applications existing side by side, one of the major challenges was to make the application compatible with the other applications. The mechanism of user interaction as user follow his previous knowledge and the interaction between the output files of the application to utilize the functions on other applications. I tried to design the application so that the output file that gives the result of various surveys on experiment can be used as input in other applications. Figure 23: Options to search and output result file The figure 23 shows the application page layout showing the export options available while viewing result and there is also a Search option on the right side to navigate the result in case it s huge or contains distinct numeric data. Popular export options are included such as CSV which is used in Casolysis, PDF used in reporting, Excel used in Windows applications and 28

45 4.8 Challenges copy the on-screen page as HTML. The user can also request the server side support to get the XML file. 29

46

47 5 Extensibility 5 Extensibility This section describes how the application and its services can be extended. Section 5.1 deals with how to add a new experiment mode or add another customization in the application. Then section 5.2 explains the approach on how to add or change the user interface. Afterwards, section 5.3 will discuss upgrades or other changes in APIs and how it can be adapted. Finally, section 5.4 & 5.5 briefly discuss the possibilities of extending and relating the application with Machine learning and using Artificial intelligence. 5.1 Adding New Experiment Type For adding a new experiment type or extend customization, the application provides several classes to work with. To extend support to a new datatype, modify current one or to add new experiment modes, the user needs to deal with the following classes. The UI class is CreateExp.html which needs to be updated accordingly with the back end, it calls VCSCreate.java to add records to the database and redirect further. After selection, the control goes to Upload.html which should provide a mechanism for the updated data type, here the user can add a new Upload class to get the data from the user. Then after uploading the data, control goes to Upload.java which handles the uploaded data according to the earlier selections made. Upload.java is responsible for handling and processing the data, adding the respective entry in the database, saving the data to the local database and creating an XML file after successful completion of the above tasks. Methods are needed to be added in Upload.java to handle different data types separately. Modification in the upload data size is provided in the same class MultipartConfig. The flow and control classes can be seen in figure 24 After the experiment is created, it is necessary that the new experiment is compliant with performing survey and viewing result. While performing the survey, the user is displayed SurveyHandle.jsp which displays the data accordingly to the experiment type fetched by SurveyHandler.java. It needs to know about the new data type and tell the view how to display it. If the new mode requires additional functionality such as Open experiment has the ability to add categories at runtime, that should be made available on SurveyHandle.jsp. After submission, it will pass the control to SurveySubmitter.java with all the user selections. SurveySubmitter.java is responsible for updating the specific survey XML file with the user inputs. The flow can be visualized in figure 25 Now as the new experiment creation can be done, the survey can be performed, the last question is how to view the result of new experiment type. So nothing much is needed to be done as this process is just to view the result and nor modifying the database. Experiment mode is not considered at this stage rather than just info display, the main thing is how to display 30

48 5.1 Adding New Experiment Type Figure 24: Experiment creation flow Figure 25: Performing survey flow the items to the user on which survey has been performed whether images, videos or any other. So after the user selects the experiment from ViewResult.jsp, it sends a request to ViewResult.java that sends data to SurveyResult.jsp page. Support for the new data type is needed to be added to SurveyResult.jsp to display new data type. The flow can be seen in figure 26 To extend or add new experiment features and capabilities, as explained above, we have current data types and some possible extensions showing in table 3. With regard to current data types, support can be extended to include a wide range of formats. Here we had some possible data types that can be added. Now coming to experiment modes, so far our application supports two modes i.e Open and Closed, that can be extended to included Semi-closed and reversed mode as shown in table 4. 31

49 5.2 New User Interface Figure 26: Result view flow Table 3: Current and Possible data types Current data type Possible extension Text Sound Images Voice rec. Animations... Videos New User Interface In this section, the user can find details about how to integrate new user interface into the application. To develop the new user interface, the user can choose architecture of own choice but MVC architecture is preferred. The newly developed interface apart from the basic requirements of web applications such as authentication, session handling, error handling and validation should provide the options for the user to create a new experiment, for example, the user should be able to create different types of experiment and upload specific data to the server. The user should be provided a view Table 4: Current and Possible Experiment Modes Current mode Possible extension Open Reverse Closed Semi-Closed 32

50 5.2 New User Interface Table 5: Views and their web servlets View Web Servlet Location VCSLogin.html SignUp com.servlets.session VCSLogin com.servlets.session Homepage Logout com.servlets.session ContactRequest com.servlets.handlers CreateExp.html VCSCreate com.servlets.handlers DeleteCS.jsp DeleteCS com.servlets.handlers Survey.jsp SurveyHandler com.servlets.handlers SurveyHandle.jsp SurveySubmitter com.servlets.handlers SurveyResult.jsp ViewResult com.servlets.handlers Upload.html Upload com.servlets.handlers UploadAnimation.html Upload com.servlets.handlers UploadVideo.html Upload com.servlets.handlers UploadText.html Upload com.servlets.handlers ViewResult.jsp ViewResult com.servlets.handlers Miscellaneous.. AuthSession com.servlets.authentication Miscellaneous.. ErrorHandler com.servlets.error where it can perform the survey on various types of experiment, example open and closed. The user should also be able to view the result and utilize it well like exporting it for further analysis. The current application view is build using HTML and Java, the developer can also use PHP, Angular JS etc. The developer can create a homepage and call the web services present in the application. Table 5 shows the current views, the web servlets they call and their location. High cohesion and low coupling principle are used while development for better maintainability and changeability. The web service calls, with their function, are as - This is used for a new user registration at the welcome screen of the web This provides the login service to the This provides the logout service t the application, this can be used at any time while navigating the application to invalidate the To communicate with the administrator, this service is This service will create a new experiment in the This service will delete the specific experiment from the database, with all related files. 33

51 5.3 API It takes experiment name as input, fetch details from the database and provide all the relevant details to user This service will note the user selections and will update them to the experiment survey To display the result to the user, this web service is This is used to analyze, process and upload the experiment-specific data to the This is used to authenticate the session, every time a call is made, this will filter the In case, server encounters any error, this is used to provide relevant information to the user and redirect it to homepage or application start page. DBConnection- This class provides connection object to connect to the database, this is used internally by other servlets. User- This class creates the user object which is used to mark the requests while updating the database. Since this is a web application, it also has some logic implemented at client side to control the view or as popularly referred to Controller logic. That is embedded within HTML file in form of JSP page and in other cases also available in separate javascript files that can be found in WebContent/assets and WebContent/javascript. 5.3 API Changes In our application, to perform various tasks, follow web standards, several APIs are used. The organizations responsible for them are regularly creating newer versions and releasing them. Newer versions usually provide better features, satisfy the customer requirements and overcome the shortcomings with the current or previous versions. Currently, to connect to the SQL database, we are using sqljdbc API version 42. To create, and export list of experiments, we are using Gson API version 2.7 and for servlet context, we are using javax.servlet-api version The jars are placed in the location WebContent/WEB-INF/lib. If we want to change the API version, we can replace the file and it to the build and then deploy the application. The application uses the APIs for servlets, the creation of JSON file and to connect to the database. Every database has its own API to connect to another framework. The API version for servlets we are using provides a direct mapping of request call with servlets without needing to declare it in Web.xml. The API used to connect java to SQL depends on JRE (Java runtime environment), which in our case is JRE

52 5.4 Integrating Machine Learning There are other libraries which are used to support client-side logic such as JSTL version 1.2, it helps to iterate through the lists on the client side and reduces the server load. All the APIs can be downloaded from their websites and are available under General Public License. 5.4 Integrating Machine Learning In the previous sections, we have seen some possible extensions, adding features, changes as per the demanding technology. In this section, we will discuss how the trending technology Machine Learning can be used in our web application. Machine learning may be defined as the branch of science which involves computers to act on their own with no or minimal explicit programming [MLN]. It makes devices learning, evolving with continuous knowledge and resources. Data mining and pattern recognition are few most trending topics in Machine learning. Data mining is checking the existing database to deduce an output. Pattern recognition deals with the flow a system is moving. It deals with regularities and irregularities in data. The automated methods of the analytical model building also come under machine learning. Machine learning can be considered as a part of Artificial Intelligence which we will discuss in section 5.5. Machine learning is based on the principle that systems or machines should be able to learn with the experiences and continuously evolve themselves with upcoming experiences [MLA]. Now we will see how we can use this technology in our application. Data Mining In CS Experiments Data mining is a broad term and can have vast possibilities with the applications, here in this section I will be discussing few techniques that will help utilize the concept of data mining in our card sorting web application. As for every new experiment created and survey performed, we are adding records to the database, we are saving the data in files. We have XML file system that contains all the information about the experiments. The information can be listed as follows- The categories related to experiments are saved in the XML file. The count of each category can be obtained from that particular file. With that information, we could build up a system that constantly upgrades itself after user actions. The logic implemented can pile up the experience and could be able to conclude following things- The most widely used category and most selected category of all times. By clubbing all Synonyms together, it could be told that which particular word out of all the synonyms is most used. 35

53 5.5 Relating Artificial Intelligence After a certain minimum limit of data collection, the system can be made to generate survey report on a new experiment by using previous results of experiments. There could be endless opportunities that add up to time, we could not list everything here but this could prove a very useful and practical extension of the functioning of the current application. Pattern Recognition in Application We can consider machine learning to be part of computer science whereas pattern recognition relates itself to engineering, however, they are facts of the same field [PML]. Pattern recognition deals with finding some sort of patterns in data collected. There have been a lot of mathematical research in this field which proved to be worth and had provided us with a positive result.there are frameworks, genetic algorithms, computational learning theories available that can provide probabilistic evaluation depending on the data and experience. Now the question comes up is how this technology can be utilized with our card sorting web application. There could be enormous ways to do, some of which I could list hereunder- As our application include graphics, pattern recognition algorithms could tell probabilistic outcome from the current and previous knowledge. Animations could be used to gather to collect user data which can be analyzed and processed to generate an outcome to use in further similar areas. Rather than just bounded to websites and information systems, experiments can also extend their boundaries to include real-time systems such as weather forecasting, financial market trends, electoral outcomes etc. Here we have discussed what is pattern recognition, how it can be used in machine learning to enhance our application. Now in the next section 5.5, we will elaborate it to another level. 5.5 Relating Artificial Intelligence So far in the previous sections, we have talked about Machine learning, how it can be used in our web application. Here in this section, we will talk about Artificial Intelligence which is a broader term. We can say that machine learning is a discipline of artificial intelligence or machine learning provides a base for a system to act smart on certain intelligent levels like humans [MLA]. Artificial intelligence is not just about getting certain tasks done, it aims at getting that task done comparatively to human or any other intelligence level. It is a very diverse field involving research on perception, reasoning, problem-solving, learning, and planning etc [AI]. 36

54 5.5 Relating Artificial Intelligence To use artificial intelligence is quite a complex task, I will introduce some fields where we can use its techniques in our card sorting application. Figure 27 shows some of the usage of Artificial Intelligence incorporated with Machine learning. They are explained as under- Figure 27: AI while Creating Experiment Speech recognition comes under Artificial Intelligence and there are several plug-ins available, for example, Google provides a plugin for voice input. It can be used to input the categories instead of typing them. it is visualized as the ear in figure 27. Autocorrect can also be used which is shown in figure 27 by a lightning icon that can prevent the user from typing mistakes. The major implication could be the suggestion which when used will run an algorithm and will tell the user that which synonym of the word entered is most widely used or if it is a repetition of already entered words as shown in figure 27 that Contact and Contact Us implies the same meaning. 37

55 5.5 Relating Artificial Intelligence So the scope of relating these techniques to our application does not end here with the abovementioned ideas, these are based on some preliminary assumptions. The card sorting web application could have countless implementations which will be developed with time and need. 38

56

57 6 Quality Assurance 6 Quality Assurance This section will provide an overview of the quality assurance and the approaches that have been taken to achieve it during the development of our web application. No one wants to deal with defective applications arising from the necessity for a software to be delivered in high quality. This term comes under the field SQA ( Software Quality Assurance ). It consists of a number of processes, methods, and principles which focuses to establish the quality goals before the software is released for use [SQA]. Implementing software quality assurance in web application software can prevent application to be launched without a bunch of bugs and errors. Errors could be enormous and can be produced by lots of factors such as server overload, authentication issues, resource allocation and programming logic bugs etc. So to prevent the web application from all these errors, it has to pass through a certain process which comes under quality assurance. In a web application, quality assurance can be divided into two disciplines i.e Validation and Verification. Validation deals with the accuracy with which the application works performing a certain function, for example creating an experiment, whether it is created in the order it is intended to. Verification process examines whether an intended task comes under rules, requirements, and specifications or not. Verification is usually carried out with respect to SRS ( Software Requirement Specification ) document. Now coming to our card sorting web application, even though it is a prototype, certain measures have been taken to safeguard the quality of the application. Some of the procedures that I have taken into consideration are as follows- Obtaining requirements specification. Setting test approaches and methods (Unit testing, Integration testing etc.) Set schedule estimates, the timeline of the testing phase. List down some basic test cases classified with functions. Perform tests, find errors, fix them. Follow agile software development integrated with quality assurance phases. Functionality checks along with development have been closely monitored. Emphases have been led to maintain coding standards and write optimal code. Enhance the user experience by conducting UX experiments among test subjects. Since the development has started and until the end, the application has been tested as per the guidelines stated. Requirement specification document has been taken into consideration during verification followed by validation. Now in the further sections, we will discuss our testing in 39

58 6.1 Types of Testing detail. Section 6.1 describes the approaches that I have taken during quality assurance, section 6.2 will explain about the tools used and finally, section 6.4 will discuss terminology used to enhance user experience. 6.1 Types of Testing Testing refers to analyze the application under specific controlled environmental conditions and evaluate the output result. Environmental controlled conditions should include both the normal and abnormal interactions and predict the behavior of the application. Things have to be considered that could happen with the application such as wrong input or indirect access etc. This is the first prototype of the application but quality measures are considered to safeguard and ensure the quality of the application. In this section, we will discuss the types of testing that have been done in order to achieve the desired goal. Section will talk about the unit testing, section will discuss system integration tests and finally, will focus on server and client load tests Unit Testing Unit testing is testing of the software components or modules at the micro-unit level. It is done along with the development for better reachability of the code. It could be based on the internal logic of the application or unit function or procedure with certain inputs and outputs. It is usually considered under white box testing. Unit testing is based on tests of single unit functions or operations, passing specific input to them and tracking results. Expected inputs and feasible error inputs are tested while performing them. Unit testing confirms us with the following things. A function is working independently. The behavior of function with a certain set of inputs can be tested. As it is done while development, it helps to validate the functioning at a closer level. Helps to add the missing functionalities immediately. Can be closely monitored with specifications. When a project develops in an agile environment, it is important that the code functionalities remain intact and that could happen when functionality checks have been performed along with. It can be extended to include black box testing which is overall functionality testing without knowledge of application logic. 40

59 6.1 Types of Testing For our web application, we have used a mixed approach of unit testing, rather than to focus unit tests only as white box tests, it is somewhat mixed with black box test and test cases are developed with specifications document. This web application is a prototype so all the basic functional requirements have been covered in the test cases and are performed along with development. Test cases that have been taken into consideration during phase can be seen in table Integration testing Integration testing includes combining functional code in cycles together and then testing the functionality as a whole. This is usually performed at specifically defined milestones. Integration testing helps us identify bugs that occur mostly due to the dependency of one function on the other. They might work perfectly individually but when combined, they might have some logic that crashes with each other or blocks each other, so at certain time intervals, integration tests are necessary. In our card sorting web application, I sequentially integrated the functions together and from time to time ran the all the basic tests together to check whether the correctness of application is intact or not. Sometimes after creating an experiment, it will take some time to appear for the user to survey as it first creates back up automatically and then it loads the data from the backup file. This will take no more than 2 or 3 seconds delay. There have also been some session and authentication tests performed during integration phase to ensure the security of the application Load testing So far in the previous sections , we have tested the functionality and correctness of the application, now in this section, we will test some real-life aspects. To test whether an application can handle user requests in the live environment, there is a need to test the load capacity of the system. Once the application is developed, verified and validated, it enters in the real environment for real-time tests. One of those tests is load testing which is the testing of the load capacity on both the client and server side systems to ensure the proper functioning, it ensures that up to a range, the server can control the load and provide appropriate behavior. To perform the load testing in our card sorting web application prototype, I have used none other than windows preloaded tool called Perfmon (Performance monitor), it is not the ideal tool to monitor the web applications but while working on prototypes and in non deployed applications, perfmon can provide accurate results. I have tested the application at first the server connected to one client at a time and then connected to four clients at a time, and the results are shown in figure 28 for one client connected and 29 for four clients connected at 41

60 6.1 Types of Testing Functional Group Session Security Experiment Creation Performing Survey View result Miscellaneous Table 6: Test cases Covered Requirement - User should be able to log in - User should be able to log out anytime - User credentials are saved in profile - A new user can register and then sign in - Indirect access should not be allowed - Every request pass through filters - Authentication required to access application - Back up files are created simultaneously - User can create all defined types - User can create multiple experiments - Experiments are mapped to users in database - User should be able to perform all experiments - User can relate to the graphical data correctly - Specific modes should update current system too - Survey details are saved correctly - User can view the result of selected experiment - User can perform additional functions like search and sorting - Result data can be exported to local system - Survey details are saved correctly - User can delete specific experiment and its related files - User can submit contact request - User can use LLP tables apart from experiment creation 42

61 6.2 Tools Figure 28: Perfmon- 1 Client a time. Applications seem to behave normally under basic circumstances only when there is simultaneous huge data upload from clients, the spike can be seen. Clients process the same task of creating a new experiment with huge data upload simultaneously. It can be clearly seen from the figure that there is a little spike in memory consumption but that is obvious and under limits. Legends are defined itself in the figures. We have chosen perfmon because of PERFMON along with JMeter is the most widely used tool for testing server load. 6.2 Tools In this section, I will be describing the tools that I have used to analyze code, improve coding standards and code optimization. There are many tools available in the market to do, here I will list out which tool I have used and what I have covered with that tool. 6.3 CodePro Codepro Analytix is a Java software testing tool for eclipse for improving the software quality, reducing redundancies, generate automated JUnit test cases and code auditing. Its plug-in is 43

62 6.3 CodePro Figure 29: Perfmon - 4 Clients available free of cost and can be added to the eclipse [CPA]. I have selected CodePro to help me in finding the duplicate code on the granular level and improving coding standards. It can be easily integrated into eclipse and made to run on project. Some of the features of the tool that impressed me and made this tool very user-friendly are as follows- Figure 30: Similar/ Duplicate code analyses- CodePro It helps in finding out the similar code/ duplicate code fragment as shown in figure??. The result can be segregated from packages to classes level for easy handling and tracking the coverage. Clear distinguishable display, the editor shows code fragments marked in different color shades such as green color is used to mark the similar code fragment and yellow color 44

63 6.4 UX Enhancement Figure 31: Code Auditing for Coding standards- CodePro designates differing code. This feature helps developer save plenty of time as it pops up very clear and the user can take direct action. It also helped a lot in maintaining the coding standards by auditing the code. It tells the developer about the unused import statements which help in saving memory, about missing colons, log exceptions and duplicate declarations as shown in figure??. For utilizing the tool, I have generated the report from time to time and given efforts to comply with the standard procedures, reducing redundancy in the application. I have found duplicate code in classes which sometimes have same database call and other similar functionalities. I have tried to optimize the code wherever I could most of the time although I did not enough time to work on coding standards of my prototype application. 6.4 UX Enhancement So far in the previous sections, we have discussed White box and Black box testing, in this section we will discuss some techniques to improve the user interface of the application and user experience. User experience is all about person s interactions, emotions, feelings towards a system, product, and environment. It includes various aspects of human-computer interaction.user experience is a subjective and dynamic in nature.it can be affected by various factors like user s previous experience, context, and aesthetics [UX]. Graphical user interface test and user experience are usually repeated in cycles in agile development. From the figure 32, it can be visualized about the effort and sequence of performing various tests. The last is graphical user interface tests and tests to improve the user experience. In our web application prototype, we have already discussed in section & about unit testing and system integration testing. The graphical user interface has also been tested along with and now we will discuss the technology and how we used it with our web application to improve the user experience. 45

64 6.4 UX Enhancement Figure 32: Testing Pyramid As we know that in the current era, most of the products are comparable in the services and function they deliver, but what differs them from other is the better user experience. An optimal user experience is required for the applications in the current world. Now the questions come, how can we achieve an optimal user experience? There have been evaluation methods present that are considered for the purpose such as Attrakdiff [ADF]. Evaluation methodology includes a survey of the web application from various test subjects about qualities of the product. The different subjective measurements that are considered in the evaluation method are as follows [AM] - ATT: Attractivity HQI: Hedonic Quality Identity HQS: Hedonic Quality Stimulation PQ: Pragmatic Quality These measurements have various pairs of complimentary words that the user will review with respect to the web application on a seven-pointer scale from -3 to +3. In our web application, sixteen-word pairs from all measurements have been considered. Eight participants are given access to the application and the review sheet. Participants have filled the survey file containing the evaluation method data. After all the test participants have finished the survey, an aggregated value is generated for all the pairs. Figure 33 shows the result of evaluation 46

65 6.4 UX Enhancement method Attrakdiff with eight participants and using sixteen quality complimentary pairs. Figure 33: Attrakdiff result After I got the result of the evaluation, it is used to enhance the user experience of the web application. It can be clearly seen from the figure 33 that the application lacks attractivity and is more on the positive side of Hedonic and Pragmatic qualities. Since this web application is a prototype, only considerate efforts have been made on improving the aesthetics of the application and focus is led to other Pragmatic and Hedonic qualities. 47

66

67 7 User Story 7 User Story In this section, I will discuss a common user story on this web application. Section 3.1 will describe the problem statement of the user story and then section 7.2 will explain the solution step by step. 7.1 Problem Description User needs to access the application homepage and want to do the following tasks- The user wants to create a new experiment. Then User wants to perform a survey on it. After performing the survey, the user wants to see the result and export the result file. The user also wants to send the administrator a message. 7.2 Steps This section will describe the sequence actions needed to be carried out in order to achieve the goal. After the user goes through these steps, he will be able to perform all the functions that have been mentioned in the objective statement. Although in cases, the sequence of the tasks is not important, because the processes could be asynchronous but for idealization, we would consider following the sequence in the current scenario I will start from the beginning with how to access the application. The web application has authentication, so for the user to access the application home page, User has to authenticate itself. The application could not be accessed by URL without valid user session credentials. Authorization filter has been implemented with each view to filter out the illegal access to the application and provide a secure interaction with the user. If the user already has login credentials, they can be entered as shown in figure 34 or if not, then the user has to register itself as shown in figure 35. Once the user registered itself and entered the login credentials, successful login will lead the user to the application home page as shown in figure 36, the user will be having some menu items in the top right corner which will redirect the user to the particular section of the page. Quick launch functions have been added for better accessibility. Rest process will be carried in subsequent subsections. 48

68 7.2 Steps Figure 34: Log In dialog box Figure 35: New user registration Creating New Experiment Once the user has entered the application home, to create a new experiment either user can click on Create menu on the top to reach the section or user can also select Create CS Experiment from the quick launch functions. Then the user will be redirected to a new page as shown in figure 37 Here the user will have to input experiment data as shown below- 1. Experiment Name The name can be alphanumeric and up to the size of 10 characters. 2. Description Here user can enter some description of the experiment 3. Data Content It will define the data sample and is to be chosen from following- 49

69 7.2 Steps Figure 36: CS Application Home a) Text b) Images c) Animations d) Videos 4. Type Of Exp. This will define the mode of the experiment. Currently, the following are supported a) Open b) Closed 5. Set Values The user has to click on this button before creating an experiment to save the data in local storage to be used at next page. 6. Create Exp. Finally, this button will create the experiment and will redirect the user to the specific upload page. For the next steps, we are taking experiment data as Images and type of experiment as Open. After the user clicks on Create Exp, he will be redirected to upload page (Upload pages are different for other data types) as shown in figure 38. On this page, user has to do the following tasks- 1. Experiment Name The name will automatically be taken from the local storage (set from the previous page via Set values ) 2. Choose Files Now the user has to browse files by clicking on Choose Files button 50

70 7.2 Steps Figure 37: Create Experiment and then selecting the files from the local machine. The user can also add files from different locations on the local machine. After uploading, the files will be displayed to the user in a thumbnail view as shown in figure 38, only after that, the user should proceed to next step as sometimes uploading videos may take a little longer. 3. Enter Categories User will now have to enter the categories here one by one. After adding a category, it will be displayed in the categories window. 4. Add/Delete After entering a category, the user has to click on Add button to add it to the categories, or if the user wants to remove one from Categories, the user can select it and click on Delete button. Make sure that in the end, all the categories are selected. 5. Upload Finally, user can click on Upload button to upload the data to the server. The server will automatically create the backup of the data of experiments for safety purposes. The user will then be redirected to the application home page. Please note that in our case, we have opted as Images as our data type while creating the experiment, it will redirect us to the respective interface for uploading images, if it would be text or videos, the upload interface could differ in some aspects. For an example, if the data type is Text, then the user will not be asked to browse files, but rather user will have have to enter the text words in a field and then add them to sample container. 51

71 7.2 Steps Figure 38: Upload Experiment Data Performing Survey Next step is to perform the survey in the experiment created, once the user creates the experiment as explained in 7.1, in the end, user will be redirected to the application home page, from there user can either select the Survey from menu items or click on Survey Experiments in the quick launch functions. Survey Experiments will redirect the user to the survey selection page as shown in figure 39. User can select the experiment from the drop-down list after the user selects the experiment, it will be automatically redirected to the survey page as shown in figure 40 The user will be shown the data of experiment on the left-hand side in thumbnail view, then in the middle, there are drop down boxes with respect to each data element, the user can select the appropriate category from the list according to the data on the left-hand side. Then in the right as our experiment type is Open, the user will be having an option to add a new category, the user can enter new category in the box and then click on Add button to add it to the list of categories. After the user is done with selections, click on Submit button will upload the survey data to the server and the user will be redirected to application home page. 52

72 7.2 Steps Figure 39: Select Survey Experiment Figure 40: Perform Survey Viewing and Exporting Result Now the user can create experiment as described in section 7.1 and then perform survey as described in section Afterwards, the user can go to view the result which will be explained in this section. Once the user had uploaded the survey data, it will be redirected to the application home page, from there user can either select the View from menu items or click on View Survey Results in the quick launch functions. View Survey Results will redirect the user to the survey selection page as shown in figure 41. The user can select the experiment from the drop-down list after the user selects the experiment, it will be automatically redirected to the result page as shown in figure

73 7.2 Steps Figure 41: Select experiment Figure 42: View Survey Result The user can view the result of all the surveys on experiments on this page, User is also provided with some additional functions to manage the result data. The functions are as follows- 1. NavigateIf the result data is huge, for example, if the experiments can contain several data elements, then it will be distributed into pages, the user can navigate through pages from option o bottom right corner. 2. Search With the Search option, the user can look up for some specific character in the complete result and only those rows will be displayed then. 3. Export Result User can also export the survey data on experiments from here with various formats to the local machine as shown on the top of figure 42, user is provided with following options- 54

74 7.2 Steps a) Copy (HTML data) b) Excel c) CSV d) PDF Afterwards, either the user can choose to view survey results of other experiment or can go back to the application home page via Go Back button for additional functions Creating New Experiment In addition to all the core functions mentioned above, this card sorting web application also provides the user with some additional functions. This section focuses on some of those functions as follows- Delete Experiment As we have seen how to create a new experiment in the previous section, here in this section, I will discuss how to delete an experiment and its related files from the server. In order to delete an experiment, the user needs to go to application home page, from there user need to go Create section. In that section, the user will find an option to delete the experiment as shown in figure 43. The user will first be redirected to a page, where it needs to select experiment and then after selecting, all the experiment data and its related files (including survey files) will be deleted from the server. The user needs to be sure of this step because backup files will also be deleted from the server. Send Query to Admin One another important function that the web application provides is the ability for the user to communicate with the administrator. From the application home page, the user can access the user interface of the contact request. The contact request will look like as shown in figure 44. The user needs to provide the below-mentioned data in the form. 1. NameUser needs to provide his name in this field. 2. User needs to provide a valid address in this field. 3. Subject A short subject about the message, no more than 50 characters. 55

75 7.2 Steps Figure 43: Delete experiment 4. Message In this section, the user can write a message of arbitrary length. 5. Send Request Clicking on this button will send the user query to the server. There is also some additional information about the web application that has been provided with meaningful description to guide the user through the process. 56

76 Figure 44: Contact Us