Advanced Human Computer Interaction Report

Arsalan Bhojani, Christopher Winstanley, Jools Chadwick, Nick Dimizas, Jonathan Elliot
CSM.003 Advanced Interactive System Design College Event Display System
CSM 003 Advanced Interactive System Design
THE COLLEGE EVENT DISPLAY SYSTEM
Christopher Winstanley Jools Chadwick Nick Dimizas Jonathan Elliot Arsalan Bhojani
Date of Submission: Friday, 28 October 2011

1
Contents
Table of Figures................................................................................................................................................. 4 Abstract.......................................................................................................................................................... 5 1 Introduction................................................................................................................................................. 6 1.1 Background Information ...................................................................................................................... 6 1.2 The College Event Display - Motivation ............................................................................................... 6 1.3 Overview of Existing Work ................................................................................................................... 7 1.3.1 The Story Telling System [1]......................................................................................................... 7 1.3.2 Nnub [2]........................................................................................................................................ 7 1.3.3 Plasma Poster Design [3] ............................................................................................................. 8 1.3.4 Frost Wall [4] ................................................................................................................................ 8 2 Overall Structure of the System .................................................................................................................. 9 2.1 Interface Overview............................................................................................................................... 9 2.1.1 The Main Events Screen .............................................................................................................. 9 2.1.2 The Individual College Screen .................................................................................................... 10 2.2 The Three Us ................................................................................................................................... 10 2.3 System Interactions ........................................................................................................................... 11 2.3.1 Active Interaction ........................................................................................................................ 11 2.3.2 Passive Interaction ..................................................................................................................... 11 2.3.3 Social Interaction ........................................................................................................................ 11 2.3.4 Historical Interaction ................................................................................................................... 11 2.4 Costs vs. Benefits The College Event Display System.................................................................... 12 3 Personas .................................................................................................................................................. 13 3.1 Undergraduate Student ..................................................................................................................... 13 3.2 Graduate Student .............................................................................................................................. 13 3.3 International Student ......................................................................................................................... 13 3.4 College Social Secretary Representative ........................................................................................... 14 3.5 University Visitor: ............................................................................................................................... 14 4 User Scenarios ......................................................................................................................................... 16 4.1 College Social Secretary Representative - Jane ................................................................................ 16 4.1.1 Janes Scenario with The College Event System ........................................................................ 16 4.1.2 User Scenario - Analysis ............................................................................................................ 19 4.2 International Student Lara from Zurich, Switzerland ....................................................................... 19 4.2.1 Laras Scenario with The College Event System ........................................................................ 19 4.2.2 User Scenario - Analysis ............................................................................................................ 23 4.3 Graduate Student Michael .............................................................................................................. 24 4.3.1 Michaels scenario with the College Event System ..................................................................... 24 4.3.2 User Scenario Analysis ........................................................................................................... 29 4.4 Behind the Scenarios ........................................................................................................................ 29 2
CSM.003 Advanced Interactive System Design College Event Display System 5 Hierarchical Task Analysis........................................................................................................................ 32 5.1 Task to be accomplished: Advertise a new Event .............................................................................. 32 5.2 Task to be accomplished: Interacting with the System ....................................................................... 34 6 Navigation Structure ................................................................................................................................. 37 7 Overall System Architecture - The College Event Display System ........................................................... 39 References .................................................................................................................................................... 411
Table of Figures
Figure . The Facebook Events Panel. ............................................................................................... 16 1 Figure . Creating a Facebook Event ................................................................................................. 17 2 Figure . Adding an Event Photo ....................................................................................................... 17 3 Figure . Picking a Date for the Event ............................................................................................... 18 4 Figure . Finalizing the Event Details................................................................................................. 18 5 Figure . Requesting New Pages ....................................................................................................... 20 6 Figure . Accessing Facebook for New Event Information. ................................................................ 20 7 Figure . FQL Query retrieves New Event Information....................................................................... 21 8 Figure . Display is updated with New Event Information ................................................................. 21 9 Figure 0. First Interaction with the College Event Display System .................................................... 22 1 Figure 1. Selecting the College Event .............................................................................................. 22 1 Figure 2. Accessing the Individual College Screen ............................................................................ 23 1 Figure 3. Clicking on the Individual College Event............................................................................ 24 1 Figure 4. Noting down Event Details ............................................................................................... 24 1 Figure 5. Commenting on an Individual College Event ..................................................................... 25 1 Figure 6. Onscreen Keyboard used to Enter Comments/Feedback................................................... 25 1 Figure 7. First Interaction with the College Event Display System .................................................... 26 1 Figure 8. Accessing the Help Section ............................................................................................... 26 1 Figure 9. Help Screen providing Interactive Tutorial for all System Functions .................................. 27 1 Figure 0. Returning to the Main Screen (from the Main Screen) ...................................................... 27 2 Figure 1. Accessing the Individual College Screen ............................................................................ 28 2 Figure 2. Clicking on the Individual College Event ............................................................................ 28 2 Figure 3. Accessing the Alumni Photo Album .................................................................................. 28 2 Figure 4. Viewing the Alumni Photo Album ..................................................................................... 29 2 Figure 5. Noting down Event Details ............................................................................................... 30 2 Figure 6. Selecting the Google Calendar Function ........................................................................... 30 2 Figure 7. Viewing the Different Calendar Events ............................................................................. 31 2 Figure 8. HTA Analysis Advertise a New Event .............................................................................. 34 2 Figure 9. HTA Analysis Interacting with the System ...................................................................... 36 2 Figure 0. The College Event Display System Overall Navigation Structure ..................................... 37 3 Figure 1. The College Event Display System Overall System Architecture ...................................... 39 3
Abstract
Interaction styles is a concept highlighted in Human Computer Interaction as the various methods in which users can interact or communicate with a particular computerized or digitized system. It involves the one-toone or collaborative interaction of the user/s with the various elements, functionality and designs of the computerized system. Within interaction styles, two of the most intuitive approaches available today are the GUI based menu-driven technique and the direct manipulation technique. In this project, The College Event Display, we focus on how the users involvement with the system increases his/her motivation and create a sense of belonging and attachment to his/her surroundings. The College Event Display aims to be a situated display that allows a variety of stakeholders to interact with it to learn about events and social gatherings that are happening around university and the city. We will explore the effectiveness of the system by allowing users to provide feedback and comments of the system and about the content displayed on the system.
1 Introduction
This section will discuss the motivation for producing the system, the problems that it aims to solve, a description of the kind of technologies that might be used to solve the stated problems and descriptions of related works relevant to this system.
1.1 Background Information

Situated Public Displays are a powerful tool of interaction as they provide two fundamental properties that complement each other in their execution, one refers to the fact that they can be situated or placed in any location as required by the problem. The second property reflects their ability to be placed in a public environment allowing access by varied users. The idea behind situated displays and interaction systems is to take advantage of human interaction skills by giving a digital representation to complex information as well as providing efficient controls for common computing tasks. Today, most of the human-computer interaction models are either GUI based systems or touch-sensor systems, which aim to utilize our natural human skills and sophisticated movements. The notion of interactive systems be it GUI based menu-driven or direct manipulation, exercises our cognitive intuition and our logical sense allowing us to grow intellectually and aiding our understanding of complex technological matter.
1.2 The College Event Display - Motivation

Lancaster University follows a collegiate structure whereby the university is divided into 8 undergraduate colleges and 1 graduate college. Despite being under one roof, these colleges are quite divided and remain distant from one and another. As much as one respects the loyalty and passion that each of these students have for their respective colleges, the university as a whole should appear as a united body to an outsider, whether it be a potential student, a trustee, a parent or a mere visitor. Each of these colleges are wholly committed to providing the best facilities, amenities, social events and exposures to their college residents, something that is agreed and observed unanimously by everyone on campus. Despite these great efforts and endeavors, the university as a whole may be suffering as many of these colleges maybe failing their duties. Having agreed upon this thought, we as a group have decided to unite these colleges and bring them together under one methodology and one platform which will serve towards their unique identity as well as the universitys vision. The methodology coincides with their commitment to the students of the university as mentioned earlier and the platform is our brainchild, The College Event Display System.
1.3 Overview of Existing Work

User systems, situated displays and interaction styles have been researched, developed and configured for long periods, bringing forth a variety of quality projects and implementations in its field. Most of these tools have been created to provide a sense of hands-on interaction that intrigues the user and lures them into learning and exploring. Several of these projects have been targeted at providing a sense of unity and togetherness amongst the people through means of public displays. A common theme that is seen clearly amongst all these projects is the need to build something that allows for collaborative interaction, sense of belonging and connectedness to one and another and a user-friendly environment to interact with. Several of these projects have proven significant due to their relevance with real-life objects and situations. The use of photo albums, the concept of message writing, the notion of leaving notes are but a few examples of why users can relate to these projects with such ease and convenience. Most of the studies mentioned below have some aspects of their design, methodology or implementation relating to our project allowing people to understand how similar conceptual techniques can be used in different design problems.
1.3.1 The Story Telling System [1]

The Story Telling System is a situated display system that allows grandparents and grandchildren that are living apart to interact and maintain a close relationship between them. It focuses on four key elements relating to this concept namely, Conversational Context, Facilitation, Diversified Interaction Forms and Supporting Grandparent Caring for Grandchild. The system incorporates the concept of shared storytelling between the grandparent and grandchild across 2 situated displays in each household. The content on both the screens are identical strengthening the idea of a shared visual console. The system has an audio attachment that allows both sides to communicate with each other. The system has inbuilt stories that could be shared between grandparents and grandchildren or a camera phone input that could both parties to take photos, add it to the display and use it as a means of communication and personal conversation. Input methods were also provided in the system, like pencils and erasers so both parties could draw or write on the screen as a part of interaction with the story and the opposite person.
1.3.2 Nnub [2]

Nnub is a situated display that works as a digital notice board for the Moggill community. With a touch-screen input system, the Nnub allows users to access photos and notices of information about the community and its events. The information is categorized to allow easy access for users plus the system boasts a web interface for uploading, editing, or commenting posts. Alongside, the Nnub interface is a desktop system that provides help for users with limited technology exposure. The system also has an administrator to moderate and block inappropriate content from going on the display. The Nnub is an effective tool to allow community residents
7
and outside visitors to learn about events, activities and gatherings around the local area. It helps to create a sense of belonging and understanding of each others interests and provides a good conversation starter.
1.3.3 Plasma Poster Design [3]

Situated public displays when extended to the professional environment can prove to be very convenient in ensuring that a positive work culture and ethos is developed. If the professionals of an organization find a common platform to relate to, it can help create a strong sense of camaraderie and trust amongst them. Plasma Poster Design is a tool aimed at social information sharing amongst the employees of a company providing them an informal platform to communicate with each other. Being a touch screen system, the poster provides a host of functionalities including sign-up options for interested users, information about company meetings and calendar events, posting multimedia content via emails or through the website interface. The system was developed and deployed as a means of allowing office workers to engage with it and in-turn learn about their surroundings.
1.3.4 Frost Wall [4]

Similar to the Plasma Poster Design, the Frost Wall is a double-sided situated display that was employed in the work environment between a private office workspace and the public corridor outside it. Aimed at providing yet another informal environment for work colleagues, the Frost Wall display shared informal content like pictures, videos and personal messages plus formal content such as calendar events etc. Being double-sided ensured that the screen was monitored for user rights, the public face was only meant for browsing while the private face could edit and manipulate data. The system allowed data input through an onscreen keyboard, digital pen or by sending an SMS to the display.
2 Overall Structure of the System

In this project, we aim to build a situated display that is similar to the many projects mentioned in the previous section but with a different problem at hand. The College Event Display will be a large, situated public display that will provide a hands-on interactive platform for all users. Situated at different spots around campus, these screens will be easily accessible and approachable by students, faculty, staff and university visitors.
2.1 Interface Overview

The College Event Display System is divided into two screens, the main screen and the individual college screen. The Main Screen is the first interaction/observation of the user with the system as it is always displayed when the screen is lying idle. Through the convenient navigational buttons on the main screen, potential users can access the individual college screens for further information. Each screen is dedicated in providing a host of functions to the user tailored and catered to their needs and expectations.
2.1.1 The Main Events Screen

The Main screen boasts a large, clear and colorful Whats On! feature that shows the upcoming/important events which is situated in the centre of the display and programmed to change/refresh repeatedly with other events. This immediately catches the attention of people passing by engaging them and luring them towards the display. The main idea of being able to promote these events to all potential people is perfectly addressed with this method. On the right side of the display, lies a running events ticker that keeps swapping with the large image in the Whats On! Panel. This allows multiple events to be displayed on the centre panel with fixed durations to attract people to the screen. On the left side of the screen, lies a column of individual college buttons, clearly displayed with their large fonts and college identity icons. This allows users to access the individual college screens and view the individual events and social gatherings that are held by the college. At the top of the screen resides the Breadcrumbs section providing contextual awareness to the users of where they are, what they are doing and what else they can do. This includes showing titles of which screen they are on, i.e. Main Events, or providing navigation buttons Back/Front to move between screens, or links to the Google Calendar where they can access a university-wide view of all the events of the colleges, or a link to the Alumni Photo Album where they can view pictures of past events similar to the event picture they are currently viewing on the screen. This section is held consistent throughout all the screens to allow ease of navigation and convenience to the user. At the bottom of the screen lies several functionality imperative to our display success. We have a Recommendations Panel displayed at the bottom that relates similar events of different colleges to the one displayed in the Whats On! Panel. This enables us to get users to visit events
9
that are hosted by their college as well as other colleges. This linking ensures that the user is informed of similar events from other colleges even if they choose not to view any more college screens apart from theirs. Below the recommendations bar, is a Contacts Information section that informs the user of the Facebook pages of individual colleges and events to allow them to post feedback, reviews and comments on them. At the base of the screen is an ongoing Social Events Ticker that frequently refreshes, updates and displays comments, feedback and reviews that people have left on the individual college or event Facebook pages. This provides an extra medium for people to get interested and connected with particular events if they see a large following of that college or event. At the top right corner of the screen, is a large Help button providing stepby-step instructions of how to interact with the system and retrieve the information that a potential user may want.
2.1.2 The Individual College Screen

The Individual College Screen is very similar to the main screen in its appearance but subtle changes to the system have created a new set of functionality for the user to explore. Similar to the Main Screens Whats on! feature, the individual college screens also showcase the upcoming events in the centre of the screen but these are specific to the college. On selection of one of the events, the event enlarges and provides the user a bigger surface to interact with. The Social Events Ticker at the base of the screen remains as it is on the main screen, but filters out comments, feedback and reviews specific to the college. The Recommendations Panel displayed at the bottom remains the same as the main screen providing information about similar events from other colleges. The screen also contains the Contact Information for the specific college but allows users to access the onscreen keyboard and post comments, feedbacks or reviews instantly with the system. Finally, the screen also poses a large Help button similar to the main screen.
2.2 The Three Us

The College Event Display System boasts a variety of features for its user but on a design front, one needs to ensure that it is designed and implemented in accordance with certain guidelines and standards. Scripted in literature, is the notion of having a system being useful, useable and used. The College Event Display System is a platform for displaying events, posting comments and feedback, and creating a sense of unity amongst all the colleges. The display is useful because it executes the functions that it is designed to perform. The display is useable because it allows convenient access and being fundamentally a 2-screen system, ensures that the user workload and memory requirements are reduced. Being a situated public display, it would be placed in several locations around campus to be accessible by people as well as be attractive in its presentation through bright colors, large pictures and big font sizes. This would enable us to put forward a display that is appreciated and used by people for its intended purpose.
10
2.3 System Interactions

The College Event Display System is designed to support several forms of interaction and system engagement methods. These are broadly classified as Active Interaction, Passive Interaction, Social Interaction and Historical Interaction.
2.3.1 Active Interaction

The College Event System is a user-centered, touch-screen system that allows the user to interact with it while at the location of the display. The user requires no additional means of technology to achieve this interaction. Since the display is designed for real-time responses, the user receives quick responses and effective access enhancing the user experience as a whole.
2.3.2 Passive Interaction

Since, the display will be placed at different locations around campus; people are bound to stumble across it during their day-to-day routines. Whether they pause and interact with the system or merely glance at it and move on, they are still passively absorbing information that is shown on the screen. Furthermore, users who overhear other users discussing the display system and its benefits will also indirectly gain benefits from it.
2.3.3 Social Interaction

With social networking on the rise and the constant move towards people wanting to stay connected, we had to ensure that the display incorporated this in its design. The feedback, reviews and comments section is directly linked to the Facebook page of each event allowing people to post and share their views with a larger audience. With the assumption that the majority of the audience are Facebook users, adapting or using this functionality on the display screen will not be new to them.
2.3.4 Historical Interaction

The rapid growth of technology and advancement in communications has always seen the past suffering as people are always focusing on the future. The College Event Display System takes into the account the historic significance of events and the mere effect it will have on the audience in bringing them together. If people can relate events and ideas to past occurrences, they are more likely to want and feel attached to it. This connection also provides a strong platform for external visitors and college authorities themselves to treasure past events, the social culture and community of the university.
11
2.4 Costs vs. Benefits The College Event Display System

Having these engagement techniques in mind, one is confident that The College Event System is adopted as it brings a functionality that the audience wants. There is a niche in the community for such a development and it will surely be absorbed. Having initialized the process with simple functions just to have people connect with the idea and the display system, it can always be developed further to ensure that it remains appropriate with market trends and user requirements. Concepts and ideas look very different from the drawing board when a substantial real element is attached to it. At that juncture, one needs to decide whether the system is worthy of implementation and executions. Cost vs. Benefits is a major criterion that needs to be considered when designing such situated displays. The notion of opportunity costs as described by Hans et al [5] is quite interesting in our scenario since we assume the maximum users of our display would be students. The question to ask is how many students will be willing to spend those few seconds at a screen whereas they could probably be somewhere else during that time period? The second thing to consider is the idea of opportunistic behavior, how many students would just view the Whats on!Panel on the main screen and immediately decide that they want to join the event? These questions are what make it viable to develop such a system and put it out in the environment to allow people to interact with it and absorb information that is interesting to them.
12
3 Personas
The following section describes an assortment of user archetypes or characters, useful for acting out hypothetical interactions with the system. They are extremely useful for highlighting some of the issues which may arise when a user comes to interact with the system, but before any kind prototype has been developed.
3.1 Undergraduate Student

Dave is an 18 year old first year fresher at Lancaster University. He is part of Pendle College and lives on campus in halls. Dave is enrolled on the Business Studies course. He is an only child from Derbyshire and frequently calls home to talk to his parents. Dave achieved 7 A*s at high school and received an ABB at A level studies to get into university. He has a few close friends from college with him at the university but they are not staying in Pendle with him. He is yet to socialize with his flat mates and he has not attended any of the college events. He is relatively confident with all areas of technology having many friends who play with computers as a hobby. He is looking to be involved in college activities but is unsure of where to find information about them. He attended the Freshers Fair in week 1 but found it too busy and intimidating.
3.2 Graduate Student

Michael is a 25 year old postgraduate student studying an MA in Human Resource and Consulting. Since he lives nearby, he is able to commute to Lancaster University for his classes. This is however his first year at Lancaster, having attained his previous degree from Stafford University. As his course choice would suggest, he has excellent interpersonal skills. Unfortunately he does not have any friends on his course and does not know a lot about the university, possibly due to him avoiding Freshers Fair, thinking that it was merely organized for first year undergraduate students. While he would not consider himself particularly computer proficient, he has spent a lot of time on social networking sites such as Facebook and he often uses the internet as a research tool for his course. Michael has seen several society posters around campus, but as of yet, none that take his interest and as he only visits a few small areas of campus, he worries that he may never see the fliers regarding the societies which may interest him, especially if they are hosted by specific colleges.
3.3 International Student

Lara is a 20 year old international student from Zurich, Switzerland. She studies the Accounting and Finance undergraduate course at Lancaster University, where she has only one year left to finish her studies. She lives on campus and is part of Cartmel College but spends a lot of time at Fylde College as she prefers the bar there and she has made several friends in Fylde. Lara has two elder brothers who are very protective of her so she is
13
a little anxious of being away from home. She loves music, dancing and also has a license to teach Latin dance. She is slightly myopic and always wears contact lenses. Her strong social background is reflected in the fact that she has a lot of friends, mostly from China, but none from her own country, Switzerland. Lara has not had any previous work experience, but she did decide to find a part-time job in her final year. Generally she likes technology, from the users perspective, but she is confused by complex interfaces, which she sometimes faces on websites while she is doing online research.
3.4 College Social Secretary Representative

Jane is a 20 year old student from Manchester. It is her 3rd year at Lancaster where she studies Psychology as her major. She lives off campus in a house with 2 friends and her sister, who is also studying at Lancaster. As her mum and dad live relatively close, they are able to visit regularly. She has been social secretary for Bowland College for the past two years and enjoys interacting with the freshers but also many of her friends, within her college, that she has known since first year. She is the Rowing Society Vice President and is involved in planning the social events and advertising them for the society. She has many friends at Lancaster and often likes to go out and socialize with friends from her college, her course and the rowing society. She is not particularly tech savvy, but uses Facebook to keep up with friends and likes to share photos/videos with them. The webmaster for Bowland updates the college web page and Jane finds it hard to convey the right message through him. As she does not update the website, she does not have much of a way to interact on a broad scale with all college or university students. Jane enjoys the freshers week thoroughly and participates heavily in the activities. Since, she was helping out at the freshers fair with the rowing society this year, she was unable to show college freshers around or to advertise the college events herself.
3.5 University Visitor

Mr. Ray Jefferson is in his mid 40s and is a parent of two adolescents, Mary, aged 14 and Kristy, aged 18. He has been working as a Chartered Accountant in a local auditing firm for the past 8 years. Ray graduated from his university in Leicester with a bachelors degree in Accounting & Finance. He has slogged hard in his initial years at university and work to ensure that he builds a life of comfort and joy for himself and his family. Ray has always kept himself away from community events and social gatherings as he believes that they are a waste of time and do not enhance his growth or personality in any way. Due to these views, Ray has had several rifts with his two girls who are still growing and exploring the world around them. Being a commerce professional, Ray is not very computer savvy as he has always worked on his accounting package at work and never found time to improve his technological skills. Stemming from his unsocial views, Ray also dislikes social media and networking as he finds them invading his privacy and personal boundaries. Ray's daughters have
14
repeatedly encouraged him to interact with these social networking tools describing the benefits to him but he has always shunned them away. Ray takes great interest in his daughters lives, from education to physical development but finds his lack of social awareness and connection as a form of hindrance between them.
15
4 User Scenarios
The following scenarios describe how the personas (in section 3) might interact with our proposed system.
4.1 College Social Secretary Representative - Jane

Jane has an upcoming Bowland College pub crawl on Friday that she would like to advertise. With the old system she would advertise on Bowland Colleges Facebook page, stick posters up around campus and pass this information by word of mouth. She is now going to use the College Event System to advertise the event.
4.1.1 Janes Scenario with The College Event System

1) Jane opens her laptop and waits for it to load. 2) She opens up her web browser and logs into Facebook. 3) She opens up the Bowland College Events Page of which she is an administrator. 4) She then goes to the Events page in the bar on the left hand side.
Figure 1. The Facebook Events Panel 5) She selects Create an Event. 6) This takes her to the create event page.
16
Figure 2. Creating a Facebook Event
6) She adds an Event Photo from her collection on the computer.
Figure 3. Adding an Event Photo
7) She picks a date from the calendar for the Pub Crawl.
17
Figure 4. Picking a Date for the Event 8) She fills in extra information for the event including a name and description. 9 For describing the location, Jane has two options: a) She can fill in a pre-tagged Facebook place for the location. As she starts to enter the places name, a tagged places appear, with a map provided by Bing and she selects one of the options. b) Jane can choose to describe the location herself. 10) Once this has been completed and she is happy with all options she chooses to create the event. Jane has now finished interacting with the system.
Figure 5. Finalizing the Event Details

18
4.1.2 User Scenario - Analysis

As she has had experience with creating events on Facebook before, she can do this with relative ease. Even for a user that does not have much experience, Facebook makes this process very quick and easy. This process is also accessible on the mobile version of Facebook allowing Jane to do this on the move. By separating the display from the input method it makes it more familiar to an average user and ensures privacy. Jane does not require entering information in front of people and can enter it in private or at a time that suits her liking making it more likely for her to engage with the system.
4.2 International Student Lara from Zurich, Switzerland

Lara has always been part of Cartmel College but due to her friends being in Fylde, she used to spend a lot of time in Fylde. Lara overhears a few students enthusiastically discussing the new party at Cartmel College that they viewed on the display screen while she was having a few drinks with her friends at Fyldes bar. In the past, Lara and her friends would just shun the idea, mock at it or laugh it off but in this case, Lara decides to head down to The College Event Display to check for herself.
4.2.1 Laras Scenario with The College Event System

1) Approaching the College Event Display System Lara approaches The College Event Display System that is situated just outside the learning zone adjacent to the flight of steps. As she comes closer, Lara notices all the college icons on the left hand side, a series of pictures in the center and lots of Twitter and Facebook comments sliding across the bottom
19
Figure 6. First Interaction with the College Event Display System 2) Observing the Cartmel College Party in the Whats On! Panel Lara notices the party event that those students were discussing on the display. Curious to know further, she looks around the screen to find a way to access the events information.
Figure 7. Selecting the College Event 3) Clicking on the Cartmel College Icon Lara scans the individual college buttons on the left pane, looking for the Cartmel icon. Lara selects the Cartmel college button and the screen immediately changes to the Cartmel College Display.
20
Figure 8. Accessing the Individual College Screen 4) Selecting the Cartmel College Party Event Lara focuses her attention to the center of the screen where she selects the Party Event. The screen enlarges and zooms in showing the event details and pictures. The panels around the screen disappear to pave way for the display.
Figure 9. Clicking on the Individual College Event 5) Making a note of the event details (date, time and location) on her mobile Lara reads the brief description about the event which is written below the event picture. She notes the event details including the date, time and event location on her mobile as a calendar reminder
21
Figure 10. Noting down Event Details 6) Observing the Feedback/Comments tab for data input/ Selecting the Onscreen Keyboard After typing down the event details on the phone, Lara observes the feedback/comments tab at the bottom that is used to leave a message on Facebook regarding the event. Lara clicks on the onscreen keyboard option to interact with the screen and input her message to be posted as a comment on the screen as well as on the Cartmel College Events Facebook Page. As the system is always logged in under The College Event Display User Profile, it does not request for any authentication details.
Figure 11. Commenting on an Individual College Event 7) Leaving a comment (Will be attending, didnt even know this was happening) Lara quickly types out her message, Will be attending, didnt even know this was happening!! on the touch screen keyboard. She clicks on Enter on the keyboard and the message is sent through the Social Secretary Representative for screening purposes to the Cartmel College Event Facebook Page as well as to the display screen.
22
Figure 12. Onscreen Keyboard used to Enter Comments/Feedback 8) Returning to the Main Screen Lara clicks the Back button placed on the top of the screen in the Breadcrumbs section to return back to the main page. The display immediately changes back the main screen.
4.2.2 User Scenario - Analysis

Laras interaction with the system was very intuitive and enlightening as it allowed her to attain all the information regarding the event within a few clicks. Despite her limited technology background, she finds it very easy to interact with system, search the information she is looking for, attain the information and return back to the initial starting point. In her past, she has always found it complicated and difficult to search for specific information but in this case, she finds the display screen extremely user-friendly and direct. Lara has always remained distant from Cartmel College despite living there, but now with this system, she can access all the events of the colleges and gather the information she wants. Prior to this, she would have to either visit all the individual college websites to search for upcoming events or walk around campus observing each and every wall, notice-board and column. The display screen is also helpful to Lara, as she is myopic, hence she can easily focus on the clear fonts, bright colors and large buttons during her interaction process.
23
4.3 Graduate Student Michael

On his way to class one morning, Michael stumbles across the display screen showing pictures of the new debate event that will be held at the university. On other occasions, he would ignore the event and move on, but on this instance interested in what he saw, he pauses and approaches The College Event Display to get more information.
4.3.1 Michaels scenario with the College Event System

1) Approaching The College Event Display System Michael approaches The College Event Display System that is situated just outside the Management Building. As he comes closer, he notices all the college icons on the left hand side, a series of pictures in the centre and lots of Facebook comments sliding across the bottom.
Figure 13. First Interaction with the College Event Display System 2) Accessing the Help button to understand the workings of the display Confused at the number of items on the screen, Michael heads for the Help button shown in the Breadcrumbs section. He knows that this would help him understand the way the system works.
Figure 14. Accessing the Help Section

24
3) Clicking on the Help Button Michael selects the Help button from the Breadcrumbs section which opens up a display of multiple screens with option links. He then scans through the many functions listed on the screen and understands how the system works.
Figure 15. Help Screen providing Interactive Tutorials for all System Functions 4) Returning to the main screen Once finished with all the sub-tutorials, Michael clicks the Back button on the Help screen and returns to the Main Screen
Figure 16. Returning to the Main Screen (from the Help Screen) 5) Clicking on the County College Icon Having understood the different functions and display screens of the system, Michael scans the individual
25
college buttons on the left pane, looking for the County college icon. He selects the County college button and the screen immediately changes to the County college display.
Figure 17. Accessing the Individual College Screen 6) Selecting the County College Debate Event Michael focuses his attention to the centre of the screen where he selects the Debate Event. The screen enlarges and zooms in showing the event details and pictures. The panels around the screen disappear to pave way for the display.
Figure 18. Clicking on the Individual College Event 7) Accessing the Alumni Photo Album of the Event Being his first year in university, Michael is confused as to whether the event will be worth attending or not. At
26
this point, he remembers his interaction with Alumni Photo Album function in the Help section, so he clicks on the Photo icon on the top right hand corner of the screen.
Figure 19. Accessing the Alumni Photo Album 8) Reviewing the pictures and captions in the Alumni Photo Album Michael flips through the various pictures that are displayed in the photo album about previous debate events. Convinced with the turnout, the atmosphere, the organization and the diversity of the events through the pictures, Michael hits the Back button on the screen, ready to note down some information.
Figure 20. Viewing the Alumni Photo Album 9) Noting down the event details Michael reads the brief description about the event which is written below the event picture. He notes the event details including the date, time and event location on his notepad.
27
Figure 21. Noting down Event Details 10) Launches the Google calendar to search for other similar events Intrigued by the functionality and efficiency of the system, Michael decides to access the Google calendar option in the Breadcrumbs section to check what other events he would like to participate in or attend.
Figure 22. Selecting the Google Calendar Function 11) Observing the Google Calendar Events Michael scans through the events for the rest of the year and identifies a couple of entries that he might be interested in. He quickly notes them down on his notepad for future reference.
Figure 23. Viewing the Different Calendar Events 12) Returns to the main screen Michael clicks the Back button placed on the top of the screen in the Breadcrumbs section to return back to the main page. The display immediately changes back to the main screen.
28
4.3.2 User Scenario Analysis

Michaels interaction with the system was quite exploratory as he moved through the process very systematically. Possessing the background that he has, Michael knew his limitations in technology, hence opted for the Help option immediately. Having been through the Help section, he found himself at ease and comfortable with the system in front of him. Having avoided Freshers Week, Michael wasnt aware of the different colleges and events that are held by them. Interested in the County College Debate event, he quickly accesses the corresponding individual college page for further details. Having used social networking sites in the past, he was well aware of how the events were posted on the screen and the social events ticker running at the bottom of the screen. In the past, Michael would barely get the time to access such information which would be displayed all across campus as he stays off-campus and hardly visits any other area except for the Management building. Plus, he would never bother to access the college websites to attain the information knowing that there are 9 of them that he needs to check. Hence, the College Event Display screen provides a one-stop platform for Michael to learn about the colleges, the university and the students. Also, the photo album provides great insight about the colleges and the university allowing new students like Michael to learn more about the past of these units.
4.4 Behind the Scenarios

This section describes what happens inside the College Event System for scenarios mentioned in 4.1-4.3. 1) At a scheduled time the displays running the College Event System will refresh their web pages, which in turn will use an AJAX call request to obtain the latest events from a PHP script. [6]
Figure 24. Requesting New Pages 2) The PHP script will access the Facebook page using the FB.api. [7][8]
29
Figure 25. Accessing Facebook for New Event Information 3) It will crawl through the most recent events using an FQL query and collect the latest events from Facebook.
Figure 26. FQL Query retrieves the New Event Information
4) Each event is given a unique identifier by Facebook e.g."id:194618640606119". This is used by the system as a unique identifier in the database so that no event is duplicated or deleted and will be displayed individually on our system. At this point it would be nice to store the events in an SQL database. This would mean that the system would only have to update the relevant information on every refresh call. It would also allow the College Event
30
System to add extra information such as type tags to help the recommendations function. This is not allowed by Facebooks privacy policy. (9) The system will take each event and run it through an online abusive content filter and delete it as appropriate. Although Facebook allows reporting of abusive content (10) (bullying, harassment, pornography etc.) our system will ensure that this is moderated by the social secretary representatives and it will not be an instant check. 5) The content is then sent back through an AJAX response.
Figure 27. Display is updated with New Event Information 6) The content will then be modified by JavaScript, it will be typed, appropriate recommendations of other events will be calculated and both the new event and recommendations will be displayed dynamically inside HTML tags. Janes event will be part of the new events received and will be displayed to users on the screen a short while after she has posted it. The system will need to be tested thoroughly to decide on an appropriate time for each display to refresh so it does not overload servers and other channels of data transfer.
31
5 Hierarchical Task Analysis

5.1 Task to be accomplished: Advertise a new Event
This task will be carried out by the College Social Secretary Representative - Jane. 0. Create Events 1. Access Facebook 1.1. Turn on PC 1.1.1. Press power button 1.1.2. Enter OS password 1.2. Logging on to Facebook 1.2.1 Open a browser 1.2.2 Enter Facebook URL 1.2.3 Provide login details 2. Navigate to Create Event Page 2.1. Click relevant college on Pages section. 2.2. Click to open event application 2.3. Click Create an Event 3. Input Event 3.1. Add Event Photo 3.1.1. Click Add Event Photo 3.1.2. Click Browse 3.1.3. Select image from file system 3.2. Enter Event Details 3.2.1. Enters the date of the Event 3.2.2 Set event times 3.2.2.1. Enter event start time 3.2.2.2. Click the Add end time 3.2.2.3. Enter end time and date 3.2.3. Fill description textbox 3.2.4. Enter event location 3.2.4.1. Fill the Where? textbox 3.2.4.2. Manually enter Address
32
3.2.4.2.1. Click Add street address 3.2.4.2.2. Fill Street textbox 3.2.4.2.3. Fill City/Town textbox 3.2.4.3. Select pretagged location 3.2.5. Fill More info? textbox 3.3. Add event guests 3.3.1. Click Select guests 3.3.2. Click desired guests in presented list 3.3.3. Click OK to confirm 4. Confirm Event Settings 4.1. Click Save and Close button 4.2. Select/unselect the Show the guest list on the event page checkbox 4.3. Select/unselect the Non-admins can write on the wall checkbox 4.4. Press the Create Event button
33
Figure 28. HTA Analysis Advertise a New Event
5.2 Task to be accomplished: Interacting with the System

This task will be carried out by the International Student - Lara. 0. User Interacting with the System 1. Reach the College Event Display 2. Click the relevant college button 3. Find the relevant event 3.1. Locate the Party Event Picture in the center of the screen and click it 3.2. Read the details for the Party Event on the details frame window
34
4. Note down the event details 4.1. Access mobile phone 4.1.1. Take phone out of pocket 4.1.2. Unlock phone 4.2. Access the calendar function 4.2.1. Click the calendar app 4.2.2. Create a new reminder at the date/time of the Event including the desired details. 4.2.2.1. Select the correct date of the event on mobile 4.2.2.2. Enter the time of the event 4.2.2.3. Add location details 5. Make a comment 5.1. Add comment on mobile phone 5.1.1. Access mobile phone 5.1.1.1. Take phone out of pocket 5.1.1.2. Unlock it 5.1.2. Logging on to Facebook 5.1.2.1. Open a browser 5.1.2.2. Enter Facebook URL 5.1.2.3. Provide login details 5.1.3. Search for the events page 5.1.3.1. Enter the event title in the search bar 5.1.3.2. Select the event from the returned searches 5.1.4. Write on wall 5.1.4.1. Type in your comment 5.1.4.2. Press enter to post on wall 5.1.5. Return to mobile main screen 5.1.5.1. Log out of Facebook 5.1.5.2. Close Browser 5.2. Add comment through on screen keyboard 5.2.1. Click the keyboard icon at the bottom of the screen 5.2.2. Write the comment 5.2.2.1. Decide what to write 5.2.2.2. Type it in 5.2.2.3. Press enter 6. Click Back button on the top of the screen to return to the main page
35
Figure 29. HTA Analysis Interacting with the System
36
6 Navigation Structure
Figure 30. The College Event Display System Overall Navigation Structure The navigation structure shows how one would navigate through our College Event Display System. Each rectangle represents an individual screen of the system except the Onscreen Keyboard which is overlaid on top of the Individual Event screen. Wherever a *College+ tag appears in the diagram, it means that there are individual screens for each of the 9 colleges. The Photo Gallery and the Calendar screens have a general view with all of the college photos for the Photo Gallery and events for the Calendar are displayed.
37
They can be individually accessed from the Main Events screen. There are also specifically filtered college versions of these 2 screens which are accessible from the *College+ Events screens. The Help screen can be accessed from the Main Events screen and the *College+ Events screens. When an event is selected the Individual Event screen is displayed with the specific event details. The Onscreen Keyboard is accessed from the Individual Event screen. Overall the system allows for easy navigation for the user as there are clearly visible icons and buttons on all the screens.
38
7 Overall System Architecture The College Event Display System
Figure 31. The College Event Display System Overall System Architecture The overall architecture of the system can be broken down into several facets namely, a back end to the system which is accessed over the internet and a front end to the system which is further divided into two areas, an administrator space and a user space. The administrators of the system are the college social representatives and staff that create, edit and screen content for inappropriate behavior. They can only access their administrator privileges through Facebook.
39
They can perform this task through their web browser on a computer or a mobile phone or through a mobile phone application. They are known to the Facebook page as an administrator which is checked at the time of login. A user is anyone that views events or comments on them via Facebook or through the public displays. In the user space, no one can edit events or details; they are only allowed to comment, like (upvote) and rsvp to events. They can do this by using the mobile phone application, a web browser on mobile phones or computers. There are multiple public displays around campus which will be placed in different colleges or main public areas. These can be any screens that possesses touch functionality. The screens will be purpose built to use minimum power and receive internet connection through power over Ethernet technology. They will display a web page that is received from the College Event System server which will contain the latest set of events and comments. Comments and feedback can be submitted to the server by an onscreen keyboard. The back end of the system consists of the College Event System server. No user data can be stored on the server as this would violate Facebooks privacy policy. The server stores the web pages (HTML, CSS, JavaScript, and PHP) that create the content seen on the public display. The browser on the public display will request the pages from the server which will send a request to the Facebook server. The Facebook server will return the relevant event information. This will then be sent back to the client browser and the content will be dynamically generated and displayed to the user. The screen can also input comments from the user and send the information to the Facebook servers. The Facebook servers store the event information using a cloud computing infrastructure. The structure stores the college event data as well as comments and pictures.
40
References
[1] Vutborg.R., Kjeldskov.J., Pedell.S., Vetere.F., 2010. Family storytelling for grandparents and grandchildren living apart. NordiCHI 2010: Extending Boundaries - Proceedings of the 6th Nordic Conference on HumanComputer Interaction, pp.531-540. [2] Redhead.F., Dekker.A., Brereton.M., 2010. NNUB the Neighbourhood nub digital noticeboard system www.nnub.net . ACM International Conference Proceeding Series, pp.418-419. [3] Churchill.E.F., Nelson.L., Denoue.L., Murphy.P., 2004. Sharing multimedia content with interactive public displays: A case study. DIS2004 - Designing Interactive Systems: Across the Spectrum, pp.7-16. [4] Kjeldskov.J., Paay.J., O'Hara.K., Smith.R., Thomas.B., 2009. FrostWall: A dual-sided situated display for informal collaboration in the corridor. Proceedings of the 21st Annual Conference of the Australian ComputerHuman Interaction Special Interest Group - Design: Open 24/7, OZCHI '09, pp.369-372. [5] Mller.J., Krger.A., 2006. Towards Situated Public Displays as Multicast Systems. UbiqUM 2006 Workshop on Ubiquitous User Modeling, The 17th European Conference on Artificial Intelligence. [6] Ajax.Request, 2006-2007. [online] Available at: <http://www.prototypejs.org/api/ajax/request> [Accessed 15 October 2011 ]. [7] Graph API, 2011. [online] Available at: <http://developers.facebook.com/docs/reference/api/> [Accessed 15 October 2011 ]. [8] API, 2011. [online] Available at: <http://developers.facebook.com/docs/reference/php/facebook-api/> [Accessed 17 October 2011 ]. [9] Facebook Platform Policies, 2011. [online] Available at: <http://developers.facebook.com/policy/> [Accessed 17 October 2011 ]. [10] Responding to Abuse Reports More Effectively, 2009. [online] Available at: <http://www.facebook.com/blog.php?post=144628037130> [Accessed 20 October 2011].
41

Advanced Human Computer Interaction Report

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Advanced Human Computer Interaction Report

Hochgeladen von

Copyright:

Verfügbare Formate

Arsalan Bhojani, Christopher Winstanley, Jools Chadwick, Nick Dimizas, Jonathan Elliot

CSM.003 Advanced Interactive System Design College Event Display System

CSM 003 Advanced Interactive System Design

THE COLLEGE EVENT DISPLAY SYSTEM

Date of Submission: Friday, 28 October 2011

CSM.003 Advanced Interactive System Design College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

1.1 Background Information

1.2 The College Event Display - Motivation

CSM.003 Advanced Interactive System Design College Event Display System

1.3 Overview of Existing Work

1.3.1 The Story Telling System [1]

1.3.2 Nnub [2]

CSM.003 Advanced Interactive System Design College Event Display System

1.3.3 Plasma Poster Design [3]

1.3.4 Frost Wall [4]

CSM.003 Advanced Interactive System Design College Event Display System

2 Overall Structure of the System

2.1 Interface Overview

2.1.1 The Main Events Screen

CSM.003 Advanced Interactive System Design College Event Display System

2.1.2 The Individual College Screen

2.2 The Three Us

CSM.003 Advanced Interactive System Design College Event Display System

2.3 System Interactions

2.3.1 Active Interaction

2.3.2 Passive Interaction

2.3.3 Social Interaction

2.3.4 Historical Interaction

CSM.003 Advanced Interactive System Design College Event Display System

2.4 Costs vs. Benefits The College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

3.1 Undergraduate Student

3.2 Graduate Student

3.3 International Student

CSM.003 Advanced Interactive System Design College Event Display System

3.4 College Social Secretary Representative

3.5 University Visitor

CSM.003 Advanced Interactive System Design College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

4.1 College Social Secretary Representative - Jane

4.1.1 Janes Scenario with The College Event System

CSM.003 Advanced Interactive System Design College Event Display System

Figure 2. Creating a Facebook Event

6) She adds an Event Photo from her collection on the computer.

Figure 3. Adding an Event Photo

CSM.003 Advanced Interactive System Design College Event Display System

Figure 5. Finalizing the Event Details

CSM.003 Advanced Interactive System Design College Event Display System

4.1.2 User Scenario - Analysis

4.2 International Student Lara from Zurich, Switzerland

4.2.1 Laras Scenario with The College Event System

CSM.003 Advanced Interactive System Design College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

CSM.003 Advanced Interactive System Design College Event Display System

4.2.2 User Scenario - Analysis

CSM.003 Advanced Interactive System Design College Event Display System

4.3 Graduate Student Michael

4.3.1 Michaels scenario with the College Event System

Figure 14. Accessing the Help Section

CSM.003 Advanced Interactive System Design College Event Display System