The ‘Engaged’ Interaction: Important Considerations for the HCI Design and Development of a Web Application for Solving a Complex Combinatorial Optimization Problem

As the boundaries of aesthetics are broadening out to take on board and appreciate the experiences of new technologies, so too, the designers and developers of these new technologies are realising the power of aesthetics to create ‘intended’ human computer interaction (HCI) experiences. In this paper, the interest lies in the ‘engaged’ interaction and what actually needs to be harnessed between the aesthetic and the algorithm to ensure the ‘intended’ HCI experience is achieved. The paper will focus on the design and development of an interactive website for solving a real world combinatorial optimization problem. Its main contribution lies in its investigation into the ‘engaged’ interaction whilst highlighting how we really need to understand and appreciate the interface between the aesthetic and the algorithm in order to fully get to the heart of HCI experience.


Introduction
The fact that aesthetics has had a long and flowery history might suggest that it has had ample time for self definition, yet in truth, 'aesthetics has struggled to establish itself and its subject matter, its material and its methodology, its proper problems and its structure, its order of working and its order of work' [1].It is quite a perplexing phenomenon: when we take a general overview of the subject, we see that the concept firmly belongs within the field of philosophy, though at the same time, it has strongly defined ties within the fields of art (i.e.visual aesthetics), anthropology (i.e.aesthetic realism) and psychology (i.e.aesthetic perception).
So much so, aesthetics seems to take on many variations of meaning (and purposes) depending on what respective field (i.e.philosophy, art, anthropology, psychology etc.) is being investigated.Of interest to this paper, are the increasing number of new technologies (with new and improved functionalities) emerging which are enabling us to combine and blend aspects of these different and sometimes new disciplines to create an even richer aesthetic and meaning.The aim of this paper is to explore the field of aesthetics within the evolving world of technology in order to start to understand how we might design for the 'intended' HCI experiences [2].In particular, it is interested in investigating the new and richer 'engaged' interactions that can emerge from the tight consolidation of the aesthetic and the algorithm in the design and development of an interactive website for solving a real world combinatorial optimization problem.

The 'Engaged' Interaction
The terms 'engagement' and 'engaging' have appeared quite frequently in HCI literature over the last few years.In fact, as Peters et al. [3] point out 'engagement is a concept of the utmost importance in human computer interaction'.In their paper 'An Exploration of User Engagement in HCI' [3] they relate engagement to the action-cognition-perception loop where perception ties engagement with the decoding of basic cues.Cognition refers engagement to the user's actual state, interest, motivation, goal or tendency towards investing or being concerned with these cues and finally action refers to the further generation of cues and signals related to displays of engagement.In line with this, the authors of this paper, put forward the concept of an 'engaged' interaction (see [2]) implicating that the 'engaged' interaction which occurs between the application and the user (i.e.their feelings, past experiences, memories, and The 'Engaged' Interaction: Important Considerations for the HCI Design and Development of a Web Application for Solving a Complex Combinatorial Optimization Problem knowledge etc.) has the power to manipulate and guide the user towards the 'intended' user experience.Described by Dewey [10] as transformational, we are looking at the 'engaged' interaction as something where the user is no longer a passive spectator but instead an active and perceptually hardworking participant in control of their own 'engaging' experiences.In terms of application design and development, the authors envision it as the strategic grouping of elements which sensually attract, involve and engage the user in action (i.e.'doing').In his book 'Material culture in the social world : values, activities, lifestyles' Dant [4] writes about experiencing the inside of a thing which he describes as a 'pushiness' and by sensing and responding to this pushiness' we are able to collaborate and identify with objects and they become meaningful.He talks about meanings -in the aesthetics sense -that are created on the surfaces of objects and meanings -in the physical interactive or 'pushiness' sense -that are carried on the inside [4].Taking this further, Hassenzahl [5] writes extensively about user experience design as the consequence of pragmatic (those related to the practical usage and functions of a product) and hedonic (those relating to the user's psychological well-being) attributes.Focusing on this model, in conjunction with the 'engaged' interaction, the challenge lies in getting these meanings on the pragmatic 'inside' and the hedonic 'outside' to work together.As Hassenzahl [5] discusses each attribute/ property has its own individual agenda (i.e.problem or set of problems to solve) within the bigger agenda of building a user experience.However, when it comes to the nuts and bolts, how do we actually achieve this 'engaged' interaction, how do we build an interactive website for solving a real world combinatorial optimization problem (i.e. a wedding seating planner web application) and endow it with a unified meaning and purpose?As Melbourne [6] points out, the mindset of a developer and a designer is generally quite distinctly different.Focusing on code and on user needs are essentially two different and complex things.The algorithms that sit behind the functionality of a system can be very powerful and complex, however, as Bolt [7] notes this shouldn't be an excuse for designing a complex user interface (UI) or HCI experience.The 'engaged' interaction is about shaping the middle ground between these complex entities; harnessing the strengths of the aesthetic and the algorithm to engage the user in an 'intended' user experience.The quality of the interaction is not solely dependent on what the application can do but more about giving the user the power to engage in and feel a part of the 'intended' experience.

The Meanings on the 'Outside'?
Leath [8] describes an aesthetic experience as a 'pleasurable and desirable experience.'He says that 'among all people, at any time, the aesthetic experience involves concentration on some aspect of the environment' [8].It is about 'what the viewer brings to the experience as well as what the viewer can discover about the fixed meanings embedded in the work of art' [9].As Weddington [10] says (in reference to Dewey) 'we should never think of the aesthetic in terms of a reaction to some stimuli but rather as an interpenetration of energies shared between subject and object'.Dewey [11] himself goes on to say that when art is being experienced 'actuality and possibility or ideality, the new and the old, objective material and personal response, the individual and the universal, surface and depth, sense and meaning, are integrated in an experience in which they are all transfigured from the significance that belongs to them when isolated in reflection'.It is an experience which 'is guided by an intense focus, strong emotions and active reflection and results in stored knowledge within our cognitive framework' [12].Berleant calls this a participatory engagement in the appreciation of art (i.e.art entices us into intimate participation in its workings) and in doing so it joins the perceiver and the object into a perceptual unity.He sees this perceptual unity as being conditioned by cultural and personal influences and it is a unifying component of the aesthetic field [1].
From a psychological standpoint 'sensation is the datum of the aesthetic experience, the first thing there, while its power to express depends upon a further process which links up with thoughts and feelings' [13].For example, when a person first looks at a painting/ interface he-or-she is attracted to various colours which then embody further meanings and feelings.Csikszentmihalyi & Robinson [14] describe the aesthetic experience as 'when information coming from the artwork interacts with information already stored in the users mind.The result of this conjunction might be a sudden expansion, recombination or ordering of previously accumulated information, which in turn produces a variety of emotions such as delight, joy, or awe'.
Collinson [15] goes on to say an 'aesthetic experience is grounded or has its beginnings in sense experience'.She argues that through its forms, lines, colours, spaces, and textures, we come to the aesthetic experience of a work of art.As Shusterman [16] highlights: 'they [i.e. its forms, lines, colours, spaces, and textures] are not simply external causal conditions of the consummatory end of aesthetic experience; they are integral ingredients of it'.Collinson points out that it is the grouping of these art elements that establishes the distinctive character for the aesthetic experience.It is these arrangements of the elements that causes a connection between 'the art object and the stored visual images, personal feeling, past experiences, or formal knowledge of the spectator' [15].
From a visual perspective 'aesthetics is not an abstract concept but a process in which we examine a number of (media) elements such as lighting and picture composition and our perceptual reactions to them' [17].In Sight, Sound and Motion -Applied Media Aesthetics, Zettl describes applied aesthetics as the branch of aesthetics that deals with sense perceptions and he shows how we can influence aesthetic experiences through fundamental image elements such as colour, light, space, time, motion and sound.He believes that 'visual aesthetics influences the understanding of the viewer through manipulating their perceptions and intensifying and interpreting events' [18].
So what are these meanings on the 'outside'?Well, it is the author's understanding that it is about finding an object sensually attractive/ arousing in itself and then using these feelings to inform a greater sense of what the object is about and what it means.The challenge for the designer is how we might design for these experiences, these feelings, thoughts, emotions etc.The aesthetic object exists in itself (i.e. the colour white gives cool, peaceful and secure feelings) but also through the senses informs the meaning (i.e. a white room is cool and secure might represent a hospital room etc).It then becomes more about the strategic patterning of these aesthetic objects in accordance with the overall 'intended' user experience.As Walsh [18] says 'being an aesthetic object means functioning as an aesthetic object and any object so functions if and when it is an object of aesthetic attitude, interest or point of view'.She goes on to say that an aesthetic object must be an object in its own right, and its existence must be independent of our manner of considering it or of the attitude we adopt towards it.In other words, the aesthetic object needs to work closely with the functional object yet importantly, it is still very much an entity in itself.As Dewey [11] distinguishes science states meanings while art expresses them, science directs ones course to a new meaning while art supplies experience of that meaning.The aesthetic object does more than just represent something else, it exists and is valued in itself.It embodies and supplies feelings and sensations which then play an intrinsic part in the creation of the overall user experience.The aesthetic on the outside as distinct from the algorithm on the inside 'does something different from leading to an experience, it constitutes one' [11].

The Pushiness on the 'Inside'?
Karray et al. [20] define the functionality of a system by the set of actions or services that it provides to its users.They feel that the value of functionality is visible only when it becomes possible to be efficiently utilised by the user [20].Dant [4] sees function and functionality as extending or enhancing the human physical action of its user.The functions of a system can essentially make certain tasks easier for a human to undertake.When we look at computers and humans, functionality very quickly becomes entwined with a cognitive psychology theory (i.e. it becomes enthralled with finding out how fast or easily a user can cognitively interpret the interface in order to efficiently complete a task).However, inside that, is the algorithm which is arguably the foundation of computer science.As Cormen et al. [21] define, 'an algorithm is any well-defined computational procedure that takes some value, or set of values, as input and produces some value, or set of values as output.'In simple terms an algorithm is a step-by-step procedure for achieving a calculation; however depending on the problem being solved, these calculations can grow in size and complexity requiring more high levelled and complicated procedures to ensure the required functionality is achieved.Like designers working out their design patterns, a developer needs to design and implement a method which is essentially a series of patterns that doesn't just represent something but also does something [22].Generally, it is true to say, the more robust and efficient the algorithm the better it does that something.
Nowadays, efficient algorithms are used in a very wide variety of applications and as designers/ developers of these applications and experiences, it is becoming more and more crucial to understand where and how algorithms are used (i.e.what are the various considerations that make a good algorithm?)As Wakefield [23] notes, algorithms are getting more and more sophisticated reaching out their tentacles into all aspects of our lives, including our cultural preferences.So much so, she feels that algorithms are slowly taking control of our applications and our lives (i.e. they are spreading their influence beyond machines to shape the raw landscape around them) and as a result, she feels they are in need of taming [24].From a HCI perspective, it is becoming more and more important to appreciate the thinking behind the algorithm and more so, how this might be harnessed (tamed) into attaining the 'intended' HCI experience.As Betts [22] states the algorithm is the material that breathes life into a user experience, so as HCI designers and developers we need to get very familiar with their intricacies.

The Wedding Seat Planner (WSP)
Many people have pre-conceived ideas for what a wedding day should be like (i.e. the look of the wedding, the number of guests invited, the order of ceremonies, the importance and capacity of the venue etc.).Underlying these ideas, there may also be some quite computationally complex problems, one of which is organising the seating plan for the wedding dinner so that all guests have familiar and friendly faces around them.On a micro level, once the 'intended' user experience is agreed upon, both the developer and the designer are required to solve some very specific problems.
In essence, the developer's problem can be stated as a generalised version of two problems: the Weighted Graph Colouring problem and the Equal Piles problem -thus it can be seen as belonging to the set of NP-hard (computationally intractable) computing problems [24].The main implication of this feature is that exact algorithms will usually only be suitable for small problem instances; for larger, practical sized problems, approximation algorithms are thus required.
The problem is defined as follows.We are given a graph G = (V, E) comprising a vertex set V and an edge set E. Each vertex v∈V is used to represent a small group of people who are required to sit together, such as couples or a family with children.The size of each of these groups is denoted s v , and the total number of guests is thus simply: The 'Engaged' Interaction: Important Considerations for the HCI Design and Development of a Web Application for Solving a Complex Combinatorial Optimization Problem Note that guests that are pre-assigned to the top table do not need to be considered in this formulation.Each edge {u,v} ∈ E in the graph G defines the relationship between vertices u and v according to a weighting W u,v (where, in our case W u,v = W v,u ).If the weighting is greater than zero then the algorithm interprets this to mean that the guests associated with vertices u and v should be sat on different tables.Larger values reflect a strengthening of this requirement.Similarly, negative values for W u,v mean that we would rather u and v were on the same table.A value W u,v = 0 signifies no preference.
A valid solution to the wedding seat planning problem is thus defined as a partition of the vertices into k subsets Ø, where i, j∈{1,…,k}, and i≠j .The number of tables k is defined by the user and each subset U i therefore defines the guests that are assigned to a particular table i.
The quality of any particular solution can be then be evaluated via two objective functions, the first being: . The presence of this objective function makes the problem analogous to the weighted graph colouring problem, because we are seeking to partition the vertices in such a way that the sum of the weights of edges connecting vertices in the same groups is minimized.From the perspective of the seating plans, this objective function therefore reflects the extent to which the rules governing who sits with who are obeyed.The second objective function is as follows: This measures the extent to which the number of guests on each table deviates from the mean.
The aim is to find a valid solution U that minimizes these two objective functions.The method we use to produce these is an approximation algorithm based on graph colouring heuristics and tabu search (see [24] for more details).
For the designer, it is about understanding this problem in a visual sense; working out strategic patterns of design elements that will encourage the user to aesthetically interact with the content [25].For example, the designer needs to think about the visual cues that would essentially lend themselves to the construction of 'wedding' associations within the user's head To successfully implement the WSP web application, the Adobe Flash Professional platform was chosen to draw both the designer and developer into one design and development space.Indeed, on a macro level, the designer and developer needed to work together (see figure 1) to ensure that users are engaged in the efficient and enjoyable planning of their wedding seat arrangements.The Adobe Flash Professional environment was used to give the designer the opportunity yet flexibility to create, manipulate and strategically arrange the visual elements in a coherent and appropriate fashion whilst Flash's ActionScript 3 -object-oriented languageempowered the developer in the design and implementation of the algorithm.The crucial factor is how the two entwined; to achieve the 'intended' WSP experience, the designer needed to be very familiar with the capabilities of the algorithm and in this case, what type, arrangement and amount of data the algorithm needed in order for it to perform efficiently, what type of events it supported and what behaviours it strived for etc.These details influenced the design of the application interface (i.e.how the data was to be captured) and also the implementation and arrangement of the visual cues.Likewise the developer needed to know the possibilities/ constraints of the design.For example, any display issues on the amount of names that could be inputted at any one time, how many buttons could fit on the page, what was visually the best way to determine who sat at the top table etc.It is this close relationship between the designer and the developer -the inside and the outside -that needed to be fully nurtured in order to attempt to engage the user in the 'intended' user experience.A specific example lies in the interactive 'relationship grid' of the Wedding Seat Planner where the guest details are arranged along either side of a symmetric grid and seating preferences are chosen by the user at the 'engaged' interaction point (see figure 2).By 'engaged' interaction we mean the point where the designer and developer demonstrate a pulling together of the aesthetic and algorithm in order to generate the most effective HCI solution (i.e. the point where the user engages with and becomes involved with the application).The developer's problem was centred on the user being able to specify the weights Wu,v by indicating whether pairs of guests (and their companions) should be (a) definitely apart, (b) preferably apart, (c) preferably together, or (d) no preference.In theory, we could have many more preferences, but this might be overkill and could confuse the user.The designer's task -evolving from their understanding of this weight system -was to define visually (through appropriate visual icons) and audially (through distinct sound cues) the four preferences on the grid.Through this process, the main goal was to ensure the most efficient, intuitive yet engaging approach was taken, hiding the complexity of the algorithm whilst making the end functionality aesthetically accessible.The challenge lay in engaging the perceptions of the user whilst they pressed the appropriate buttons and built their wedding seat plans with the 'intended' wedding thoughts and feelings.This process required many detailed iterations and even with that it was not always a clear-cut process to achieving the right amount of 'inside' and 'outside' one needed to engage the user in the 'intended' user experience.

Study
The authors of this paper felt it would be interesting to hear the views of a collection of first year Web Design and Development students (eleven male and three female students) from the University of South Wales, UK who were currently going through the web design and development process themselves.A qualitative open ended questionnaire was used to gather data on their first interactions, thoughts and feelings of the Wedding Seat Planner application.All participants were given a scenario with a list of guests and designated seating arrangements.It was their task to use the application to formulate the appropriate wedding seat plan.In particular, the focus was on the algorithm and the aesthetic and their opinions (as young designers and developers) on whether or not, the 'inside' and the 'outside' had been sufficiently harnessed to engage the user in the 'intended' HCI experience.

Results
All the data gathered in this study has been individually analysed and then cross-referenced to identify themes that would best describe participants' overall experiences of the Wedding Seat Planner.The first impressions of the wedding seat planner show that the majority of participants embraced the application from an utilitarian stance (see figure 3).Nine out of the fourteen tested participants have used words like "useful" and "helpful" [three times], "easy to use" and "easy" [four times], "quick and fast" [three times], "effective" [twice].Alongside these, words like "manageable", "accessible", "simple", and "straightforward" also feature through much of the comments.However, despite the odd word describing it as "colourful" and "friendly", it is evident that in general the functionality took predominance over the aesthetic feel of the application.When asked if they thought the wedding seat planner was easy and enjoyable to use?Eight out of fourteen tested participants commented that the WSP was easy to use, intuitive and/ or clear.Interestingly, some of these did not find it enjoyable.Why?This could be the result of a number of different factors, but as some of the findings are highlighting, the nature of this particular task (i.e. a data driven entry task) strongly influenced the participants overall enjoyment of the overall WSP.
As one Participant summed it up: 'Easy but not enjoyable lots of boring text'.(Participant 1).
Focusing on some of the core and challenging areas of the WSP application design and development (i.e.how to visually and physically collect, organise and categorise the data?), we can see some interesting data emerging.The majority participants who used the data entry grid felt it was an effective way of gathering and organising the data.
 Yes, as the names organised in a grid format help you visualise who is going (Participant 3)  Yes because it allowed families/couples to be grouped together (Participant 4)  Yes because its laid out easily, information can be input easily, there is also an upload function (Participant 5)  Yes, only need to use first names to allocate tables, don't need to input large amount of data (Participant 11) Likewise, the interactive relationship grid, was felt by many to be the most intuitive way to specify the preferences.As we can see from the Figure 4, eight participants felt it was effective, intuitive and /or easy to use in specifying the seating preferences (i.e.definitely/rather apart, rather together, no preference).However, there was also a certain small number who found it confusing, time-consuming, and not clear.
Finally, when asked whether they thought the designer and the developer had successfully built an application that would engage the user in the 'intended' user experience (i.e.successfully managed to harness the aesthetic and algorithm of the web application into an engaging yet desired user experience), 36% of the participants confidently felt 'Yes', 36% confidently said 'No' and 21 % of the participants were not sure.One participant didn't answer.Analyzing the findings from this question, it was clear that the colour scheme was the most discussed issue, with many participants feeling that even though the functionality of the application was effective, more work was needed on the design to ensure a greater sense of user engagement.In light of this, the most significant outcome of this paper lies in the understanding that even though the aesthetic and the algorithm can be two very different yet complimentary entities, user engagement is not achieved by simply slapping one (aesthetic) onto the other (algorithm).As we have seen in this study, even with close discussions and several iterations, the designer and developer still did not quite capture the 'intended' user experience that they set out to achieve.Even though the algorithm has successfully managed to support the desired behaviour, there were several users who felt that the aesthetic could be further worked to engage the user in the 'intended' user experience.From this, we can affirm that it is not just about enhancing or even facilitating the functionality of a system but more about digging deep and creating an 'engaged' interaction where users deeply interact and become involved with both the aesthetic and algorithm of the application.It could be argued that composing a wedding seat plan is not an enjoyable task whether it is done on paper or on the computer however, the goal here is to channel the design so that it lifts the user out of the mundanity of data entry and in some way into their own happy and enjoyable wedding day thoughts.As we have seen, the focus lies mainly at the user interaction points where the two entities, algorithm and aesthetic, come face to face.These user interaction points shape the middle ground, the point where the designer and developer can bring their work together to tease out and evolve (afford and support) the 'engaged' interaction (i.e. the pulling of the user into the experience).As the designer and developer return to the drawing board, the final thought lies in the knowledge that the WSP web application needs to imbue and engage more wedding day feelings whilst the user partakes in the creation of their wedding day plan.Pushing the aesthetic design further (i.e.enhancing the visual cues in new and more engaging patterns etc) will inevitably open up a number of new possibilities and meanings that might even go beyond the current data grid structure.However, it is the harnessing of these new possibilities and meanings (i.e.identifying and strategically arranging the appropriate visual cues to afford the right emotions, thoughts and feelings) alongside the functionality (i.e.designing and implementing the appropriate algorithm to generate the desired behaviours/ events and ultimately the right emotions, thoughts and feelings), which offers the greatest possibilities for the creation of 'intended' HCI experiences.As McCarthy & Wright [26] point out: 'interaction with technology is now as much about what people feel as it is about what people do'

Conclusion
'The best designs are a result of friction between the designer and the developer, of divergent goals which combine into the optimal solution through discussion and iteration' [27].In attempting to get to the heart of HCI experience, it is crucial to appreciate the different sets of problems involved and more importantly, how the solutions to these problems can come together to form the bigger solution.As we have seen from this case study, it is one thing designing for (tapping into) those preconceived ideas that everyone seems to hold for their wedding day but quite another when it comes to solving the complex problems that underlie these ideas.The challenge documented here shows that even though the designer and the developer appreciate the task at hand, the actual harnessing of the 'engaged' interaction -the aesthetic (i.e.getting the right look and feel for the site) and the algorithm (i.e.formulating and solving the seating problem) -into a collective 'intended' HCI experience is not as easy as it seems.From this, we can conclude that is not so much a slapping of one against the other but initially an individual and then collaborative effort both affording and supporting the 'engaged' interaction.Looking at the bigger picture, it is this complex individual-yet-collaborative iterative approach that essentially enables the evolution of aesthetics within the field of technology and then our ability as designers and developers to nurture it to the 'intended' HCI experience.As Baskinger [28] states it 'is not just about problem finding and problem solving.It's about forming meaning from abstract situations and creating the future of the way people live, work, learn, and play'.As we have seen, it is something that might not happen straightway.In fact, it might take several efforts to break down the middle ground (i.e.'engaged' interaction) before the true harnessing of the 'outside' (i.e.aesthetic) and 'inside' (algorithm) can be achieved in order to afford and support the 'intended' HCI experience.

Figure 1 .
Figure 1.The 'engaged' interaction: inside and outside considerations

Figure 2 .
Figure 2. 'Engaged' Interaction point for the WSP

Figure 3 .
Figure 3.A list of positive (blue/ oval) and negative words (yellow/ rectangular) used to describe the Wedding Seat Planner experience