Camus proposal for the application front end and the user experience design

(1)

POLITECNICO DI MILANO

CORSO DI LAUREA MAGISTRALE IN INGEGNERIA INFORMATICA

DIPARTIMENTO DI ELETTRONICA, INFORMAZIONE E BIOINGEGNERIA

2014 - 2015

CAMUS: PROPOSAL FOR THE APPLICATION

FRONTEND AND THE USER EXPERIENCE

DESIGN

Tesi di Laurea di: Yalçın SAVRAN

745928

Relatore:

Prof.ssa Letizia TANCA Correlatore:

(2)

2

Abstract

Accessibility of web sources takes users to the continuous discovery of new information. The access to a large amount of information does not always correspond to an increase of knowledge, indeed sometimes you get the opposite effect, since the user does not know how to filter the information so as to obtain the most appropriate to the current context of use. It is even more difficult with the mobile devices which have limited capabilities with respect to computers. For this reason, Context Aware Mobile Mashups (Camus) has been emerged as a solution to these issues. Camus tries to merge technologies and experiences developed in different areas of computing and aims to encourage developers to create a flexible platform that allows to generate context-aware mobile mashups. These two main themes, context-aware and mashups systems, bring about the concepts of data integration, internet services, mobile applications, web applications and application frontend. The purpose of this thesis is to propose guidelines for the user experience design for the frontends of the Camus apps that matches users' situational needs with the optimized interaction mechanism which presents the information and communicates with users in the most appropriate way to achieve a good user experience.

(3)

3

List of Figures

Figure 1 - Universal Context Tree Diagram ... 20

Figure 2 - Yahoo! Pipes Design Environment ... 27

Figure 3 - JackBe Presto Design Environment ... 28

Figure 4 - mashArt Design Environment ... 29

Figure 5 - PEUDOM Design Environment ... 31

Figure 6 - Camus Architecture ... 80

Figure 7 - Camus Task Flow ... 83

Figure 8 - Sequence Diagrams of Server Mashup and Cold Client Mashup ... 87

Figure 9 - Sequence Diagram of Warm Client Mashup ... 88

Figure 10 - Use Case of the System Administrator ... 97

Figure 11 - Use Case of the Expert of the Sector - Part I ... 98

Figure 12 - Use Case of the Expert of the Sector - Part II ... 99

Figure 13 - Camus Web App: Assigning Service Page ... 105

Figure 14 - Camus Web App: Homepage ... 107

Figure 15 - Camus Web App: Breadcrumbs ... 108

Figure 16 - Camus Web App: Single Trip View with the notification ... 108

Figure 17 - Camus Web App: Users Page ... 109

Figure 18 - Camus Web App: Users Page in Compact View ... 110

Figure 19 - Camus Web App: Homepage in Compact View ... 111

Figure 20 - Camus Web App: Privacy Submenu on Sidebar ... 112

Figure 21 - Camus Web App: Homepage Welcoming Message ... 112

Figure 22 - Camus Web App: Feedback Inbox ... 113

Figure 23 - Camus Web App: Trip Adding Form with Descriptive Text ... 114

Figure 24 - Camus Web App: Minified JavaScript ... 115

(7)

7

Figure 26 - Camus Mobile App: My Trips Screen ... 120

Figure 27 - Camus Mobile App: Scheduled Trip and Calendar View ... 121

Figure 28 - Camus Mobile App: Discover Menu and Attractions Screen ... 122

Figure 29 - Camus Mobile App: Discover Section, Filtering Options ... 123

Figure 30 - Camus Mobile App: Scheduled Event and Attraction Discovered .. 125

Figure 31 - Camus Mobile App: Mashup Overview in Detail... 126

Figure 32 - Camus Mobile App: Simple Warning Screens ... 127

(8)

8

List of Tables

Table 1 - Comparison of mashups and context aware systems ... 76 Table 2 - 4 types of selection of data in the Camus project ... 77 Table 3 - Comparison of mashup architectures examined for the Camus ... 89

(9)

9

(10)

10

Accessibility of web sources takes users to the continuous discovery of new information. The access to a large amount of information does not always correspond to an increase of knowledge, indeed sometimes you get the opposite effect, since the user does not know how to filter the information so as to obtain the most appropriate to the current context of use. It is even more difficult with the mobile devices which have limited capabilities with respect to computers such as memory, connection, power and etc. For this reason, Context Aware Mobile Mashups (Camus) has been emerged as a solution to these issues.

Camus tries to merge technologies and experiences developed in different areas of computing. The two main themes, context-aware and mashups systems, bring about the concepts of knowledge of data integration, internet services, mobile applications, web applications and application frontend. The objective of the Camus system is to encourage developers to create a flexible platform that allows to generate context-aware mobile mashups. They dynamically gather and combine heterogeneous data from different web sources and tailor the combined data which come up at runtime according to the end users' situational needs in a context aware fashion. The Camus system takes advantage of set of high level abstractions for context and mashup modeling that hide the complexity caused by determining of services and integration to its users. It supports the proper methodologies and tools for fast prototyping of mobile mashups. Camus system defines the context as a first class modeling dimension. It enhances the introduction of the most proper resources that can match the end users' content needs and the consistent tailoring at runtime of the integrated data and functions.

The case study selected to implement the functionality of the Camus system is tourism which is a very convenient area to apply the mashup based mechanisms on the specific contexts. Given the widespread use of mobile devices, traveler

(11)

11

guidance can be done through mobile devices. In particular, for the traveler, there is a growing need of use the context-aware mobile applications. The travel agent can adequately configure the system that offers a new travel experience to its clients by creating dynamic applications which is able to adapt to the situation where the users will utilize and facilitate the search for the information related to their situations during the journey.

There are 3 types of actors involved with different tasks in this case study. First actor is the administrator who is not obliged to have any knowledge about the area or sector that Camus system run and has a major task which is to carry out the inclusion of services, methods and parameters. The administrator must create the Context Dimension Tree (CDT) and the connection by linking its various nodes with the appropriate services (main and support). For main services, administrator defines precise rules, while support services leave more freedom to the designer. Associations of the administrator are suggestions rather than rules. Other duties of the administrator include the definition of wrappers for the translation and the creation of visual mapping example for the travel agent. Second actor is the travel agent who is the expert of the sector that defines the possible contexts by pruning the tailored CDT, and mashup patterns through the selection of services customized for the user which can be from simple transportation booking service to the formulation of travel packages and personal staying in the same country or abroad by using the Camus web app. The third and the last actor is the traveler who uses the Camus mobile app to look for information that matches the needs during the trip. After the context is defined by the help of sensors of mobile device (GPS, time and etc.) or explicitly, traveler sends requests to server and server automatically interpret this request in a way that the selected remote web services can understand and answers back to traveler with the final mashup.

(12)

12

During their journey travelers always look for the information based on their needs. Recently, reaching information by using mobile devices has been easier than deciding whether the information is convincing and accurate. Nowadays, bad user experiences are not just arising due to the deficiencies in the back end of the application or badly structured databases. Besides these, loading time of a page, display of the application on the end-user's screen and actions that the user takes to complete the task are the parts that highly affect the user experience grade. The bottleneck of the system becomes the user itself. The purpose of this thesis is to propose guidelines for the frontends of the Camus apps and user experience design that matches users' situational needs with the optimized interaction mechanism which presents the information and communicates with users in the most appropriate way to achieve the good user experience.

(13)

13

(14)

14

1.1 Context Aware

Context-aware computing refers to a general class of mobile systems that can sense their physical environment, and adapt their behavior accordingly [1]. Context-aware systems are a component of a ubiquitous computing or pervasive computing environment [2].

1.1.1 Ubiquitous computing and pervasive systems

This story does not start with lines of code or mechanical joints, but with a philosophy, a worldview, on what computer science, in the broadest sense of the term, was supposed to be in people's lives: the ubiquitous computing. Coined in 1988 by Mark Weiser, this term refers to a development paradigm of computing where computing becomes pervasive and accessible so as to be as natural as "the air we breathe" [4]. It is a scenario in which a person interacts continuously with devices that help in everyday activities - from work to adjust heating - almost without realizing it.

Anyone, Anywhere, Anytime indicate the objective effectively to be achieved; mobile devices, sensors, microprocessors, Internet and all the tools provided by information technology are the way to get it. The success of this philosophy has found over the years is shown by the numerous branches of research involved, or newly created, such as home automation, ambient intelligence, pervasive systems, the Internet of things, distributed systems, sensor networks , artificial intelligence and context awareness. Building a system that is as natural as possible to use all

(15)

15

the means prevents the user from all the interactions that are not aimed at its main goal such as configurations, the input data, the exclusion of irrelevant data.

A user can be allergic to strawberries and drink coffee without sugar. The user expect the results according to specific needs from the digital device that is being used. To achieve this, it is needed to retrieve as much information as possible in an indirect way, by sensors, past statistics, information about the user and the environment, in one word: context. Context aware systems are able to extract, interpret and use information about their environment to adapt its operation based on the current situation.

1.1.2 What is the context?

Once it is clear what is meant by context aware system remains to be defined in a more concrete meaning of a term - the context - that has been the subject of endless philosophical discussions throughout history. The context is the physical environment with 3 aspects; where you are; who you are with; and what resources are nearby [1].

Even in computer science, where the term made its first appearance in a 1994 article of Schilit, the "context" has been defined in many ways, from the most implementative to the more abstract, the more generic ones cut for a specific scope. Schilit and Theimer [5] describe the context as the physical location of the system and characteristic of the surrounding entities; Similar definitions can be found in the works of Brown et al. [6]. Other authors, like Franklin and Flaschbart Ward [7] and Hull [8] linking the concept of context to the situation - or the environment - in which the system is located. Rodden [9] , however, defines the

(16)

16

context as the set of configuration values - settings - the system itself. One of the definitions most shared was provided in a 2001 article of Anind K. Dey; context is any information that can be used to characterize the situation of an entity. An entity is a person, place, or object that is considered relevant to the interaction between a user and an application, including the user and applications themselves [10]. In parallel with the various definitions, it has been created a number of context models in relation to the various context aware applications over the years. Based on the different meanings attributed to the word context, it is possible to divide these models:

 Presentation oriented: The context is used to tailor the presentation of content according to the different channels and devices;

 Location oriented: The context is used to adapt the system as a function of time and position;

 User centered: The context is used to describe the state of the user with data from sensors, profiling past choices, etc.;

 Community based: The context is used to describe a distributed system through some relevant variables shared by multiple users;

 Data tailoring oriented: The context is used to crop the information by reducing the data to be analyzed and eliminating those considered less useful.

1.1.3 Representing the Context

It may be difficult to define precisely an abstract concept as a context. In context aware projects developed over years, various models have been proposed and used that attempt to capture quantitatively the important features of context to

(17)

17

make them available to subsequent processing steps. Although these solutions are usually designed for a particular field and using very different approaches. Between them it is possible to identify some common characteristics:

The environment is factored as a dimension - or an attribute - which identify the important features of the system such as time, location, temperature, etc;

The various dimensions are made "measurable" by defining variables, units, and range of permissible values. In the rest of the section this will be described such as two different models of existing ones: the space of the contexts and the context dimension tree [11]. In the first case it is associated with every feature of the relevant context - context attribute - a dimension, forming a multi-dimensional space that represents all possible situations in which you may find in the system. The current context, defined by values assumed by the attributes, can be represented as a geometric point in this space.

This model, in addition to being very intuitive, allows the use of geometrical instruments like surroundings, trajectories and distances to make reasoning and operations on the system. One of the main limitations of this approach, which affects the expressive capacity, is unable to order the dimensions in a hierarchical way. The second model examined, the context dimension tree (CDT), provides a representation of the context in the form of tree graph. The elements that composes the CDT are :

 Root node is the set of possible contexts described by the CDT;

 Dimension nodes represent the characteristics of the relevant context such as time, location, and the topic of interest;

(18)

18

 Value nodes identify the possible values of the dimension to which they are connected in the case of discrete domains;

 Parametric nodes identify the value of the dimension to which are connected in cases of continuous domains;

The current context, defined by values assumed by various sizes, can be represented as a subgraph in which each dimension node is matched to at most one value or parametric node.

Although this solution still allows to separate the various dimensions of context orthogonally, it does not provide a geometric interpretation immediately as in the previous model. The adoption of a hierarchical structure, however, allows the use of different levels of abstraction to specify and represent contexts.

1.1.4 Managing the access to information

By standing in a crowded room and sipping the favorite cocktail, plenty of information can be come together: strobe lights continuously change the surrounding colors; loud music fills every corner of the room; the cold glass in hands is mixed with the warmth of the environment and the indistinct clamor of the people around us continues unabated. Yet, people can kindly chat with the others in their group without paying attention to things that happen in the rest of the room. In psychology it is called "cocktail party effect": the human brain cannot process all the information received, it can select between external stimuli

(19)

19

only ones that seem relevant at that particular time. The way and the moment when that choice is made are still a source of warm debate among psychologists.

In the computer world, this situation can be faced very often. Having too many data available, however, can be problematic like not having enough: not all the data are equally important and not all the data are useful at any time. If you are in a library looking for a book of Manzoni, get a huge list of texts in different locations and languages. Instead this process should simplify the human lives. Managing the access to information (knowledge access management) is one of the major areas of development of context aware systems. The information retrieved from the "context" would venture to cut the huge amount of "raw" data around the needs of a specific user in a specific situation. The next section will explain the operation of a context aware system that uses the template context dimension tree for the date tailoring.

(20)

20

1.1.5 Context Dimension Tree and Data tailoring

(21)

21

This session will demonstrate an approach based on context aware systems with CDT model for the selection of relevant information (data tailoring). The problem to be solved, as always in this project, is the information overload: a relational database contains so much information to make query responses often inaccurate and confusing. The system administrator can use the context information to crop more precisely the selected data. Practically this approach involves two actions:

1. Creation of the context model with the dimensions and values relevant to your area of interest;

2. Creation of the link between the context and the data. The views are the tools to ensure multiple access methods to a single relational database. The link between the context and the data, therefore, can be effectively defined by using SQL Views: for every combination of an active node on the CDT, administrator defines a portion of the corresponding database. In the research phase, the views activated from the current context must be combined with operations of the double union, double intersection and double difference.

1.1.6 Instruments of existing Context Aware Systems

The context aware systems have been used in a variety of fields, from home automation to artificial intelligence. One of the areas in which they are the most successful is the recommendation of products, usually on Web sites with/or advertising purposes. In the academic field there has been developed a multitude of projects that look for applying the potential of context aware systems in the most diverse areas of use. The ADAPT project (Automatic Data Personalization

(22)

22

Based on Contextual Preferences) was born in the department of computer science at Politecnico di Milano and represents an example of the work produced in this research [12].

(23)

23

1.2 Mashup

The constant evolution of Web 2.0 has also increased the needs for users. Over the last decade we have witnessed the birth and development of services according to the SOA paradigm (Service Oriented Architecture), which promotes the creation of software as a service. In this context, mashup was born. A mashup is a hybrid application that uses the content from multiple sources to create a new service intended to be displayed in a single interface, usually a page or a web application. The Web Mashups are dynamic Web sites that consist of interfaces that integrate the logic and the content of services, issued by third parties via appropriate API (Application Programming Interface). These new types of applications have developed faster and faster thanks to sites such as ProgrammableWeb1. The first companies that started to publish their interfaces to access their services were the big web competitors such as Google, Yahoo and others. This gave them the opportunity to be integrated into other Web services which bring benefits and especially visibility. Over the years the number of services that was offered by using the available APIs has continued to increase. This has allowed software developers to integrate data and functions easily, rather than building them alone. The study on the methods and the languages of composition for the so-called Web services is constantly evolving, and the field of data integration is now a longstanding area, despite the new challenges, the data are now more and more heterogeneous and less structured. Studies in mashups have focused not only on traditional methods of integration of the data and the application logic, but also on the visual presentation of the elements. In addition, most of these studies have been devoted to the methods to compose the mashup. Mashup composition tools are usually simple enough to be used by most end users.

(24)

24

First phase of the creation of a mashup is the selection of different APIs and data sources, according to a user-oriented approach. Then second phase of the construction is the integration and synchronization, through the procedures made available, the chosen services in the previous phase. When the creation phase is finished, user starts using the application which is supposed to be functioning properly until the user needs to introduce new services or resolve any issues, such as the replacement of a data source of a service previously used. So the mashup is used until there is a new problem that will be solved by applying again the life cycle. It is an adaptive model which starts from the initial problem to successful system. Mashups contribute to a new vision of the Web, where users are able to contribute actively. That's why users have an active role in the evolution of Web 2.0.

1.2.1 User-driven innovation

The composition of mashups is in line with the so-called "culture of participation" [12] where users evolve from passive consumers of the applications to co-creators of ideas and products. The basis of the composition of mashup is the concept of user-driven innovation. The user-driven innovation is expressed as the desire and the ability of users to develop their own ideas, and to express their creativity. According to recent work published, there is also a growing necessity to replace fixed applications with dynamic environments that can be modeled in a flexible way, to meet the different situational needs. New design principles are emerging to promote paradigms, in which the end users can access the contents and the functions, and compose these resources in different situations [13].

(25)

25

The advantage for users is the ability to effectively realize applications corresponding exactly to their needs. In addition, service providers can integrate the original innovation of users in their products, and thus improve their service to meet the needs of users without any need to perform the classic stages of testing generally required to identify requirements, develop and test a new product. End users are fully responsible for these issues, since they are enabled to create solutions that match their needs. Such innovation potential, however, is still not adequately supported by the various approaches for the composition of mashup so far proposed [14]. Researches into the mashup have been focused on enabling technologies, paying little attention to mechanisms for the facilitation of the development process. In many cases, the creation of mashup still involves manual programming for the integration of the desired service. Some researches have sought to define the methods of simplified composition, mostly based on visual notations and light runtime execution.

Many of these projects have failed because of the mismatches in key principles defined in the domain of End-User Development (EUD). According to the EUD, enabling a broad class of users to create their own applications requires the availability of intuitive abstractions, interactive development tools, and a high level of care [15] . In particular, to support the potential user driven innovation, the challenge is to allow users to focus on developing new ideas, rather than on technical aspects there. In other words, users should be allowed access to resources easily that meet the individual needs of composing new applications, and simply run these applications without worrying about what happens behind the scenes.

(26)

26

1.2.2 UI-centric Mashup Composition

The end-user mashup development can be promoted by UI-centric approaches, where the composers can focus on using user-oriented tools, i.e. visual interfaces that users are able to use instead of programming interfaces. However, even when operating at the UI level, it must require the possibility to express the rules of integration of the components, so that the programming constructs can be derived automatically to drive the generation and execution of the applications. Some projects (for example, Dynvoker2 and SOA4Al3) have already had a similar intuition focused on creating interfaces to provide a direct channel between users and the services. However, these approaches are directed to the interaction with the individual services without considering the integration of multiple services. The dimension of integration is promoted by the research on tools for the development of mashups, so-called mashup makers, supporting the integration of components at different levels, particularly in the data and presentation. Many of these tools offer paradigms of composition based on graphical notations that abstract important aspects of the development of mashups. The composers of mashups therefore define patterns to express the internal logic of a mashup without the need of writing any code. The diagrams are automatically translated into code.

1.2.3 Existing Tools

To enable the development of mashups there are many tools and development platforms, with various approaches. To make it clear what we have achieved so

2_{http://www.wikipeetia.org/SOA4Al} 3_{http://dynvoker.org/}

(27)

27

far in the field of composition of the mashup, it is useful to list some of the most significant platforms.

Figure 2 - Yahoo! Pipes Design Environment

Among the most important ones, there is Yahoo! Pipes4. Pipes is a web application that Yahoo! provides a graphical interface for building mashup that enables the aggregation of RSS feeds, web pages and other services. The purpose is to allow the creation and editing of Web-based applications. Users to avail of services, they specify the URI into the input boxes dedicated. Interface of the Pipes allows users to channel in flows, via so-called "pipe", with the information from different sources by using explicit rules to define how content should be modified (eg, filtering). The flows of parameters and the activation order of the components can be specified through different constructs of modeling available. The data from the results of the invocations of the various services can be

(28)

28

displayed via simple HTML pages, tables and maps. Ready applications, called "pipes" can be saved and be made accessible through an URL.

Figure 3 - JackBe Presto Design Environment

JackBe Presto5 adopts an approach similar to Yahoo! Pipes for mashups. The composition of its environment - Presto Wires - provides a diagrammatic notation for expressing the operators of the data transformation (e.g. filtering, sorting, joining, grouping, annotating, merging, and splitting) of heterogeneous data sources. This notation is an abstraction of EMML (Enterprise Mashup Markup Language) which is an XML-based Domain Specific Language that is promoted by the Open Mashup Alliance (OMA)6 for defining portable and interoperable mashups with particular attention to mashup enterprise. Presto Wires allows the developer to choose between different constructs of the data integration and allows dragging and dropping on a canvas. Mashups, are expressed in EMML,

5_{http://jackbe.com/products}

(29)

29

can be stored in server Presto where they can be executed by a EMML engine. The result is a final application in HTML5 runs on websites and mobile devices.

Figure 4 - mashArt Design Environment

The system mashART7 also allows the creation of mashups based on graphical models. Different from other instruments, it proposes an approach for the integration, known as universal integration, which allows the integration of data, application logic and UI components within a single modeling environment. The integration logic is based on an event-driven paradigm in which the operations of a certain component allow to the occurrence of events in other components [16]. All instructions should be pre-built components to expose events and operations. The expression logic of mashup requires the definition of connectors of the data flow that associate events of the source and operations of the destination. The result is a specification of coordination between components based on XML. The

(30)

30

layout of the mashup can be defined manually tagging an HTML template with a set of placeholder for displaying the user interface components.

However, they still require the understanding by the composer of the integration logic (for example, the data flow, the coupling of the parameters and the composition of operators). Asking for users to define the logic of data-flow and / or control flow, even assuming that it would be able to understand these technical terms is unrealistic. Some studies about the user expectations and usability issues of the mashup compositions highlighted some key issues related to the conceptual understanding of the composition service. First, end users do not think about connections to services. Many do not know what a Web service is, or how it can be invoked via programming interfaces, while they are able to understand what it can offer a service where they interact with any type of UI. Also, understand the difference between the design and execution of the application can be a 'non-trivial task. Therefore, users are extremely confused by the need of defining patterns, although these provide abstractions for technical concepts.

(31)

31

Figure 5 - PEUDOM Design Environment

PEUDOM8 is a platform for creating mashups, which allows end-users to develop their own applications [17]. The platform supports users during the choice of components, definitions of the couplings and between them through assistance mechanisms, such as suggesting which components and which event pairs are compatible. This platform is centered on the paradigms of visual composition for the integration of components in the presentation layer. The paradigm of composition requires to act directly on the user interfaces of the mashup, in a sort of live programming in which each action is directly visible in the composition in the construction. The platform enables the use of two types of components: the Wrapped User Interface (UI) and Visual Integration (VI) components. The wrappers are for accessing Web services and APIs. The VI components are components created by users for visually mapping the result set, extracting one or

(32)

32

more data components with the templates available. The components of these two categories, chosen by the user for their application, are synchronized with each other through the coupling rules which determine the behavior in the final mashup. This work is in particular to promote the concept of integration of data-centric UI, as a paradigm in which the user interface guides the query and integration of different result set.

(33)

33

1.3 Web Applications

From a technical view-point, the web is a highly programmable environment that allows mass customization through the immediate deployment of a large and diverse range of applications, to millions of global users9.

1.3.1 Web Application History

Before web services were introduced, server-client model applications were existing in the market. The client-side applications were installed on user's local device to perform as an interface that were communicating the server-side. An upgrade to the server-side code of the application would typically also require an upgrade to the client-side code installed on each user workstation, adding to the support cost and decreasing productivity10. Both sides were being altered depending on both the user's device and its operating systems.

At the beginning, web pages were presented to users as static documents. Users could view the images and read the content without any interactivity. After the launch of first web services, web technologies were expanded with the intention of providing comprehensive and useful web practices. In 1995, Netscape announced the client side script language, JavaScript that allows to some code fragments to be used to create dynamic pages for the client-side without the sending any request to the server-side. 'Web application' notion was first presented in Java language while XML was being improved together with JavaScript. Ajax joined to this development process in 2005 which is a script to

9_{http://forms.tsu.edu/}

(34)

34

communicate server without requiring a refresh on a page in order to make websites more interactive. Finally HTML5 took place in the team to contribute the multimedia competence on websites to promote more dynamic pages.

1.3.2 How does the Web Application work?

Nowadays, websites enable the operation of sensitive user information immediately. According to the operation context such as webmail, shopping cart, booking processes, websites are styled for appropriate communications with users. These kinds of systems that use dynamic web pages as interface through internet browsers which are called web applications. Web applications can be considered as a specific variant of client-server software where the client software is downloaded to the client machine when visiting the relevant web page, using standard procedures such as HTTP. 11

Accordingly, a web application is a software that enable users to do information transaction with a database by using internet browsers which display dynamically generated content. For the more technically oriented, web applications query the content server (essentially a content repository database) and dynamically generate web documents to serve to the client (people surfing the website)12.

A web application is the combination of static and dynamic pages. Static pages do not change according to the user's desire. Server sends the page to a browser without changing anything on the page. Comparatively, dynamic pages are the pages that have been generated by application server based on user's request. If a

11_{https://en.wikipedia.org/wiki/Web_application}

(35)

35

request arrives to the web server, Web server reads the code on the dynamic page and passes the page to the application server. Application server fulfils the commands here and resends the page to the browser through web server.

Sometimes the purpose of the website forces to use web application in its structure. If a website content is very rich, web applications should be used to reach information easier and faster, e.g. microsoft.com, amazon.com. As well as if a website is used to keep and analyze data collected from users, in order to send these data directly to the database and display them on an exclusive page, web application is necessary to use.

There is a high possibility for users to come across a web application during their journey on the web. Like search engines and e-commerce websites are designed as web applications. For example, library service website provides information about the location, opening hours and the stuff as well as it allows students to search for and reserve books by behaving as a web application. As a result of their technologically complex structure, web applications can be interpreted in inaccurate way.

1.3.3 Web Apps vs Websites

A website behaves like an informative tool that is based on its content. It consists of set of static web pages with poor interface capabilities. The interaction is limited by searching and navigating. On the other hand a web application behaves like an operational tool that is based on tasks. It has highly responsive, dynamic pages for the intention of completing a specific action with the rich interface capabilities. It has highly advanced interaction mechanism with the user. In

(36)

36

conclusion, it can be said that web sites are for consumption what web apps are for creation or simply web sites as read-only and web apps as read-write13.

The most important benefit of web applications with respect to desktop ones is that web applications ensure more steady interface because of their cross-platform compatibility. Web applications run on browsers and they don't require to be developed and adapted for specific platforms and operation systems. Also a user can have updates the application each time by refreshing the website. When an update occurs, all users can be affected at the same time which is quite cost effective with respect to desktop apps. Moreover, information users enter into a web application is reachable from numerous devices without installing the application to all of them. Web app can be considered as 24 hours open bank branch and clients can do transactions whenever they want.

On the contrary there are some disadvantages of using web applications. First of all, web applications operate on internet browsers. For this reason, they have limited power on accessing the system resources and in case of a browser crash, users can lose all the unsaved progress. Furthermore browsers lead multimedia applications show poorer performance with respect to desktop applications. In order to prevent these weaknesses, it is necessary to apply correct frontend techniques to serve the best quality web applications for the end users.

(37)

37

1.4 Mobile Applications

The term "mobile" indicates those digital devices, usually small, designed to be able to be easily transported and used at any time. Although this definition may include calculators, digital cameras and electronic navigation devices, in this thesis, this definition is used to represent smartphones, and tablets. In line with the paradigm of ubiquitous computing, the mobile technologies allow to access to IT services continuously and ergonomically with the better user experience.

1.4.1 Mobile Devices

Historically, the first devices in this category were the first generation of mobile phones. A mobile phone is a device that can make and receive telephone calls via radio signals by connecting to a cellular network provided by a mobile operator, which allows to access to public telephone network. The phone allows to have available connection when you are within range of a radio station which engage. The functionality of the first portable cellular phone was demonstrated by John F. Mitchell and Dr. Martin Cooper of Motorola in 1973, with a device weighing 2 kg. Ten years later, in 1983, the DynaTAC 8000x was the first phone to be commercially available14. From 1983 to 2014, the number of mobile subscriptions worldwide has grown to more than 7 billion and their variety as well.

Over the years, more and more devices have been released to the market, with PDAs, via MP3 players and navigation systems, up to the most modern smartphones and tablets. These last two categories are those that have the most

14 https://www.motorolasolutions.com/content/dam/msi/docs/en-xw/static_files/history-motorola-demonstrates-portable-telephone-605kb-3.pdf

(38)

38

interest the current market, as regards both the hardware and the software. The smartphone is a mobile phone with processing power, memory and data connection much more advanced than the older generation of mobile phones. Smartphones are based on operating systems for mobile devices which allow you to make calculations in old cell phones was not possible.

Many modern smartphones are using touch screens and web browser that can load both normal websites. In addition, smartphones also allow you to install additional features through the so-called web app, installed by the specific brand. On the other hand, tablets are portable devices that allow users to interface with the system directly via the screen using special pens or fingers. Tablet devices can be divided into three categories: the first generation of tablets are those based on personal computers, the second generation ones are those based on smartphones, and the third generation tablets are mixed of these two types.

Both smartphones and tablets over the years have incorporated more and more components such as Bluetooth modules, Wi-Fi and NFC connections, and sensors such as accelerometers, magnetometers, proximity sensors and sensors for atmospheric pressure that led to development of innovative applications oriented to exploit the data from these. A critical aspect of mobile devices is their energy consumption. In general the energy consumption of a mobile device is mainly due the capabilities of transmission and the display. For the first mobile devices most of the energy consumption was utilized for the transmission functionality. In modern mobile devices the energy consumption is much greater and is due to the power of processors and the execution of numerous multimedia activities such as playing games, and multimedia playback.

(39)

39

1.4.2 Mobile Operating Systems

A mobile operating system is an operating system that works on a mobile device. The nature of mobile devices makes some problems for these devices more critical than those for desktops and laptops. The operating systems for mobile devices, unlike the traditional operating ones, should handle the issues such as limited resources (memory, CPU), the absence of external power, and technologies to access to the Internet (WiFi, GPRS, HSDPA, etc.), new input methods (touch screen, minitastiere) and the size of the display. Currently there are several mobile operating systems are available on the market for mobile devices: Android, iOS, Windows Phone, BlackBerry, Firefox OS, Sailfish OS, Tizen and Ubuntu Touch OS. Despite this variety, there are three operating systems that have an important diffusion:

1.4.2.1 ANDROID

Android15 (based on Linux kernel) is an operating system of Google Inc. and is the most widespread on a worldwide basis on smartphones. Most of the Android softwares are free and open-source, but a large share of software on Android devices (Play Store, Google Search, Google Play Services, Google Music, and others) is proprietary and closed source. The first version of Android was made available in 2007. The Android versions prior to 2.0 were only usable on smartphones. The higher versions can also be used on tablets. The current version of Android is 5.0. In September 2014, the market share of Android was 85%.

(40)

40 1.4.2.2 iOS

iOS16 is the operating system of Apple Inc., and is the second in terms of diffusion-based smartphones in a worldwide basis. The operating system is proprietary and closed source, and is derived from Darwin OS. iOS was unveiled in 2007, initially for the iPhone. Now the products Apple iPhone, iPod Touch, iPad and Apple TV all use this operating system. The Third-party applications were not officially supported until the release of iOS 2.0 in July 2008. In September 2014, the market share of iOS was 11%

1.4.2.3 WINDOWS PHONE

Windows Phone17 is a Microsoft operating system like iOS, this is also proprietary and closed source. Windows Phone is the third in worldwide basis. The operating system was introduced in 2010. It includes a complete integration of services such as Microsoft OneDrive, Office, Xbox Music, Xbox Video, Xbox Live games and Bing, as well as other non-Microsoft services such as Facebook and Google accounts. The Windows Phone devices are built mainly by Nokia, as well as HTC and Samsung. In September 2014, the market share of Windows Phone was dell'3%.

1.4.3 Mobile Applications

Mobile applications are softwares that designed to run on smartphones, tablets and other mobile devices. The app is available through the distribution platform of the operating system. These platforms are generally managed by the operating system companies such as Google Play for Android, Apple's App Store for iOS

16_{http://www.apple.com/ios/}

(41)

41

and Windows Phone Store for Windows Phone. Some applications are free, while others must be purchased. Generally, these apps are downloaded directly from the platform on a device used. Mobile applications were first developed for the productivity including email, calendar, contacts, and weather. Over the years the great demand and the availability of development tools have made sure that the number of applications would increase along with the number of categories. Mobile applications are developed variously depend on the operating systems, and they have different programming languages.

1.4.4 Cross-platform Framework

There are two main methods to develop mobile applications. One is a native approach that the mobile app is developed in the native language of the targeted mobile OS. The other one is the cross-platform approach that is easier and faster. Cordova18 is a tool to create applications by writing code in HTML, CSS and JavaScript. Just through a layer in JS, Cordova allows interfacing with the most important features of mobile devices; from the camera to the storage, passing through the geo-location. Another tool that allows you to create cross-platform mobile application is Steroids19, a tool that aims to add a touch of native lacking. It does this by providing a set of objects and methods that allow to manage certain elements of the user interface natively with the promise of better performance and smooth running. One of the framework that is based on Cordova who is having the most success in the last period is Ionic. Ionic promises unprecedented performance, taking advantage of the lightness of the framework, minimal manipulation of the DOM and hardware acceleration. Another aspect that sets it

18_{https://cordova.apache.org/} 19_{http://www.appgyver.io/steroids}

(42)

42

apart is that it is an "Angular friendly" framework, i.e. specially designed to be used together with Angular JS which is the powerful frontend framework that Google is gaining more and more support among developers.

(43)

43

1.5 Application Frontend

Many years ago, in order to increase the performance of the applications, back-end structures were strengthened. Because all the operations were handled in the back-end of the system. On the other hand after the arrival of Web 2.0, the whole idea had changed. Web based applications became more dynamic than they have ever been. It was seen that frontend performances started to have more impact on user experience. Client-side development started to became more of an issue as server-side development. Former methods in testing and optimization phases has upgraded. The bottleneck of the system became the user itself. Therefore frontends were obliged to be more efficient and more effective.

Recently, reaching information by using web based applications has been easier than deciding whether the information is convincing and accurate. Especially in Web 2.0 era, the look and feel of the web based apps has been very influential. In order to present the information and communicate with the users in the most appropriate way, frontend development has gained more importance.

Nowadays, bad user experiences are not just arising due to the deficiencies in the back-end of the application or badly structured databases. Besides these, loading time of a page, display of the application on the end-user's screen and actions that the user takes to complete the task are the parts that highly affect the user experience grade.

Frontend is an interface that is used as a bridge between end-user and back-end for a direct interaction with user. This bridge sends the requests from users to back-end and delivers to users with the data coming from back-end. Ivan Codesido from The Guardian says about the role frontend “It is a hinge role that

(44)

44

requires both aesthetic sensitivity and programmatic rigor” Or in other words the front is an abstraction, simplifying the underlying component by providing a user-friendly interface20.

The main purpose of the frontend is to present the requested information as well-defined as possible while interacting directly with the users. If a website were a house, frontend web development would be the pretty exterior that gives the house character, or the host that invites guests in and makes them feel at home.

Frontend components are compiled, displayed and controlled by browsers. All the code developed are presented to the user as fonts, drop-down menus, sliders and etc. These can be viewed differently in different browsers on different devices. That's why while making the frontend visually attractive, sensitivity to the user shouldn't be underestimated.

Therefore for good user experience, it is essential to define and resolve the issues about frontend development of web based applications without damaging the look and feel of the application. Mandel [18] defined this general approach in 3 golden rules:

 Place users in control of the interface  Reduce users’ memory load

 Make the user interface consistent

(45)

45

1.5.1 Users

At critical points in the interface design process you’ll be asking the question, “What happens next?” The answer should be, “Whatever users want to do!” Remember—“Know thy users, for they are not you. [18]”

The main purpose in frontend development is how system interacts with user. In the frontend, whole interaction structure should look enough natural that users can feel comfortable while their needs are satisfied. Being in control by the system make them bothered. They want to be in charge of the system. They should feel that they initiate and finalize the actions by themselves. System should place the user in control. Frontend should be understandable, learnable and easy to use for all users with different skills. Frontend of the system should provide meaningful and relevant paths and exits to the user. System should interact with the users in a way that doesn't lead them to take unwanted actions. The interaction structure should take into account that users' attention can get distracted from one task to another in each step of the frontend. Functions and tasks are able to be postponed or interrupted at any time by the user's desire. Besides a well-structured navigation, system frontend should contain descriptive texts about where they are and which action they are about to take. For critical and irreversible actions, system should interact with the user by displaying necessary feedback and warning messages that inform users about the task. These messages must be in native language of the user and shouldn't include high level technical terms. If necessary, there should be an option to direct them to read full text.

(46)

46

1.5.2 Memory

People are not always able to remember things. In order to have efficient use of the system, it is necessary to reduce users' memory load. System shouldn't be designed in a way that forces people to memorize things while they are completing a task. First of all system should avoid retyping things and allow users to manage the part of information required in various places by supporting undo/redo and cut, copy and paste actions. Moreover, frontend should allow memory restore for users to recognize instead of recalling the information. Online aids such as messages, tooltips, and context-sensitive help are interface elements that support users in recognizing information, rather than trying to remember information they may or may not know or have learned [18]. Also users may not remember how they reach a point to complete a task or simply they may not want to explore again whole navigation structure. Frontend should help users (especially frequent ones) to find shortcuts in order to speed up some particular tasks.

1.5.3 Consistency

Interaction of the frontend of the system should be consistent and behave with a minimum number of surprises for users. Consistency in frontend development is highly subjective and strongly depends on the environment and the context of the app. In order to support consistency, frontend components such as navigation, content and visual design have to be presented in the same way and take the same actions with the other apps' frontends already in use for particular devices and platforms. Consistency may decrease the time spent for learning of the app, simplifies the processes and makes the whole frontend more predictable. Higher

(47)

47

learnability brings higher efficiency, better user satisfaction and ensures the conversation between the app and the users. Using inconsistent frontend items can produces the different and undesired outcomes which can discourage the navigation in the app.

1.5.4 Frontend Design Principles

Having thought of these 3 rules mentioned before, the frontend components and the interaction practices create the look and feel of the app which deals with the way that app works and the identity it is reflected to the user. The look and feel depends on 3 main frontend design principles;

 Audience,  Usability  Performance

Implementation of these principles depends on some factors such as frontend goals, environmental factors, the devices targeted and the operating system used. In the end, overall utilization can be determined by considering the priorities that are assigned to these principles according to the existing factors.

1.5.4.1 Audience

Keep your design efforts centered solely on your user. Knowing your audience answers almost all design questions—if it serves the audience, keep it; if it is potentially distracting or annoying, eliminate it [19].

(48)

48

Good user experience can be achieved by having good communication with the audience. Target audience shouldn't be anybody or everybody, otherwise the benefit of efficient and effective communication may be ruined. Main goal of application frontend is to determine the best practice for the target audience by understanding them so well and finding the best interaction mechanism that fits them.

Application frontend should be easy to use from the first moment the user starts interaction with it. The interaction mechanism should support convenient components for the users with different skills. For example, users can be old enough to have difficulties in reading small text fonts sizes, context based high level can be difficult to understand for the users from different majors and etc. In this case, the most important action to be taken is to examine the target audience by splitting into specific groups to define particular needs.

First and the basic group tries to answer the question "who" my target audience is. This group classifies the target audience with their demographical attributes such as their age, sex, education and their skills on the context such as learning preferences, existing knowledge and expectations in order to communicate well with end users by optimizing the interaction mechanism.

Moreover, another group deals with the question "how" my audience reach my website. The groups helps the accessibility and the performance principles of frontend development while deciding the platforms and devices the app will run on with respect to the connection speed.

Third group asks "where" people use the app and the response evaluates the users' possible locations and environmental factors to optimize client-side issues.

(49)

49

Additionally, another significant question is "why" people use the application. The reply tells us the mystery behind the solution that target audience should find by using the application. There can be various of purposes, e.g. being informed, shopping, entertaining and etc. According to the main user objectives, specific content can be highlighted to make the frontend more useful.

The last group helps to finalize the needs of target audience by asking "when" people use the application. Client-side can be customized according to the time that people use the app for particular actions.

In conclusion, the more target audience needs are well defined, the better frontend can meet those needs. Otherwise there is no meaningful way to start to meet their needs. After this phase, frontend components should be prioritized according to the target audience needs. This prioritization allows to optimize the customization of readability, memorability, visibility and learnability without losing the look and feel of the application frontend.

The clarification of end-users needs can be a strategic guide for the whole usability of frontend development process such as content development, visual organization, navigation structure and adequate helpfulness.

1.5.4.2 Usability

While developing an application frontend, it is very important to justify why people use the app, what their needs are and to which information they try to reach. By exploiting target audience needs, necessary customizations are optimized. Content becomes well-ordered and readable, navigation and the layout

(50)

50

turn to be more clear and understandable. Hence the whole interaction mechanism is structured to get high usability grade from application frontend.

Usability focuses on how well users can learn and use a product to achieve their goals. It also refers to how satisfied users are with that process21. In this context, usability can be described as the quality of the user experience when interacting with application frontend. Users should figure out how to use the frontend immediately. Otherwise, frontend designs which violate usability goals may mislead users and lose them.

Nielsen summarize the standard definition of usability as "the extent to which a product can be used by specified users within a specified usage context to achieve specified goals effectively, efficiently and satisfactorily [20]".

Efficiency

Efficiency is usually measured as the average amount of time spent on completing a task. Efficient frontends focus on user's actual actions and present only the necessary information. Also efficiency minimizes the number of steps such as clicks or taps to accomplish a task by having a proper navigation structure and highlighting desired actions. In frontend development, efficiency priority has to be figured out such that which task must be more efficient for the overall success.

Effectiveness

Effectiveness is the accuracy and completeness with which the users accomplish their goals when using the application. Application frontend shouldn't compel or allow users to walk in to traps that generates error states. Effective interfaces are

(51)

51

visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work.

User Satisfaction

User satisfaction is a notion that refers to the fulfillment that the user can acquire by using the app. This is highly subjective concept that depends on the issues a user has towards completing the task in the system. User satisfaction score can be be obtained positively not only by making the application frontend efficient and effective, but also by providing a freedom and comfort to user.

For the purpose of usability, it is crucial to make the right judgments by considering target audience needs for attracting users initially and convincing them to return. High usability grade is obtained with the combination of correct usability characteristics such as helpfulness, content, navigation, visual organization which positively affect user experience and trust to the system.

Navigation

Navigation approach within the application requires familiarity. If frontend structure misses requisite navigation needs, users can feel lost, take unnecessary actions, cannot accomplish their tasks and they may leave the application. Flauder's report on e-commerce found that “39 percent of test shoppers failed in their buying attempts because sites were too difficult to navigate” (Speigel, 1999). As Lohse (1999) says, “No amount of ‘sparkle’ in the presentation of products can overcome a site design with poor navigation features.” Poorly designed navigation structure damages the overall user experience. If almost one third of users of the application cannot acquire what they request, it can be said that good navigation is one the key concern for an application frontend.

(52)

52

Navigation components should be easy to find, easy to use and understandable. First of all, it should be clearly visible. Users shouldn't lose time to look for navigation block by providing it on the top or with the help sidebars in web application and with familiar symbols in mobile applications. List of functions available in the application should be classified into groups with the user action hierarchy.

Moreover, frontend navigation ensures how easily and efficiently audience can access the application content. Each item should have descriptive title. For the usability of navigation block, buttons should tell what happens next if a user touch or click on them, what functions are available. The main objective is to present the well-organized content as a relevant set of information. Navigation structure should include diversity of options that do not interrupt the user's desired action. Otherwise it shouldn't deceive the users by misleading them with unexpected results.

A part of the audience may use the app just to acquire quick information, others may access the app to use all the functionalities. For each type of users, number of steps to complete a task should be made as efficient as possible. Navigation structure should be designed by prospecting more probable user paths to complete actions that critical for users and provide direct links to reduce the number of interaction and increase the speed it takes to complete a task.

Additionally, navigation block should help users to understand their location in the application, where they are right now, where they have been before by providing a simple map which is easy to understand for users. Necessary indicators point out the active page or screen in the content hierarchy. Buttons