1

Project Part 3: Understanding the Design Space TerpExplore Team: Carol Boston, Barbara Dickey Davis, Aria Ghanaat December 6, 2012

1. Project Description Many people consider the Mall to be literally and figuratively at the center of campus life

at the University of Maryland. As Scott Munroe, campus landscape architect, noted in his presentation on November 12, the Mall is where students go to experience active and passive recreation, events, and teaching-related activities. Because helping students find out about activities on the Mall and encouraging their participation contributes to student engagement, our team elected to focus on how technology might support such communications. During Phase 1 of the project, we conducted observations and interviews and analyzed information sources to determine how students currently find out about events on or near the Mall. We learned that while many students prefer to find out about events through spontaneous discovery or via in-person or Facebook recommendations from friends, they also pay attention to fliers taped to the ground and chalkings. In Part 2 of the project, we formalized requirements for an information system that would respond to student needs and preferences for communications and developed three very different prototypes based on them—an information kiosk, sidewalk screens, and a mobile app (see Figure 1).

After reviewing feedback from undergraduate testers, our classmates and instructor, and

students in the anthropology and architecture classes, we decided to focus on developing and evaluating the most technologically innovative and crowd-pleasing prototype—sidewalk screens—for Part 3 of the project. This paper is devoted to outlining the requirements, describing the prototype and its testing, and presenting evaluation results. We include the changes we made to the sidewalk screens prototype based on initial feedback, as well as the additional changes we consider advisable for the future.

2. Requirements Summary Based on data collected through observations, interviews with students and institutional

representatives, and analysis of existing information sources during the first stage of the project, we developed the following key requirements for the Mall-based communication/information system: Ambience

• Maintain the park-like, relaxing feeling of the Mall

User communication preferences ● Support recommendations from friends (in person or via social media) ● Allow spontaneous discovery, or happening upon events, rather than expecting students

to seek them out ● Support novelty, fun, and engagement ● Accommodate introverts and extroverts--those who watch and those who dive in

2

Usability features

● Be easy to use, both for contributing and accessing information ● Provide high readability ● Be accessible ● Be reliable

Quality of information

● Provide accurate, up-to-date information ● Offer a comprehensive view of activities (i.e., both student- and institution-sponsored

events)

Figure 1: Three prototypes for sharing information about Mall events

3. Prototype Description

3.1 Overview Having screens embedded into the sidewalks to convey information about Mall activities

serves as a highly engaging, durable alternative to chalking and taping down fliers as is currently the custom. There are two parts to the prototype:

1. The message input system, which enables students and institutional

representatives to create attractive, eye-catching messages on a tabletop display located in McKeldin Library (or alternatively, via a website), and

2. The sidewalk screens embedded within the Mall sidewalks through which moving messages may be displayed.

3

These two parts are introduced in the following subsections and then explored in greater detail, with screenshots, in Section 3.2. While the technology underlying the prototype may seem futuristic, we have found evidence that it is beginning to approach viability. (See sidebar—“Are We There Yet?”)

Both the message input system and the sidewalk screens are examples of digital habitats based on metaphor (Pohjola, 2011)—they are designed to remind users of the actual experience of chalking and viewing chalked messages while also taking advantage of opportunities provided by technology to address the limitations of chalking and increase engagement, novelty, and fun. We began prototype development by reviewing the questions and feedback we received during the second stage of the project from undergraduates in the Mall area, as well as our instructor, HCI classmates, and students from the anthropology and landscape architect classes. These included: Implementation questions

● Where will these be located? ● Will all areas display the same messages? Will the messages be rotating or will they be

stationary? ● Which direction will they be oriented?

Usability issues

● How will we prevent vandalism? ● Will the screens be sturdy enough to survive foot traffic? ● How will messages be seen in the dark or in bad weather (e.g., heavy rain or snow)? ● How will messages be read at busy times when there are 20 people walking over them?

It would jam up traffic if students stopped to read them.... ● How can we ensure that student submissions are not too messy and hard to read? ● What if students find information appearing to follow them around to be creepy? Will

there be a hand or foot gesture for students who wished to turn this feature off? Administration issues

● What University department would be in charge or control of this information system? ● Who will provide technical support? ● How can the same system be designed to work for both spontaneous student input and

messages from official channels? We worked out the implementation and usability issues as conveyed in the detailed descriptions that follow. Regarding the administration issues, which are beyond the immediate scope of our design project, we suspect that Student Affairs would be the logical choice to administer the system, providing whatever degree of oversight is necessary to ensure that messages do not devolve into obscenities or commercial advertisements. We further envision that students would sign in using their UID to create and submit an announcement, providing traceable accountability. University communications and marketing staff could provide an assist to ensure that the system is well-known and used among student groups and officials.

4

To inform prototype development, we also reviewed and made decisions about the additional features our participants recommended from Phase Two, namely:

● Kick-away gesture to bring in new message—Added ● Consider having the entry point for messages in McKeldin Library—Added ● Mount a multi-user, touch-input tabletop system (e.g., Samsung SUR40 with Microsoft

PixelSense) to motivate students or embed the input technology on tables in the McKeldin Plaza area—Added

● Foot-activated ability to tap on a message to save/sync it to a smartphone—Saved for future development

● Consider providing some additional place (website?) where students can go to see every event happening universitywide—Judged to be out of scope

● Consider projecting the messages in lights—Tabled, pending decision about lights on the redesigned Mall

● Consider having green directional areas to guide student bikers into the correct “lane” —Tabled, pending decision about bikes on the redesigned Mall

3.1.1 Overview of message input system

The message input interface will allow students to replicate the chalking experience by using special digital tools associated with a Samsung tabletop display with Microsoft Pixelsense (http://www.samsunglfd.com/product/feature.do?modelCd=SUR40 ) to create attractively lettered, colored, and even animated event announcements. (Students will also have the opportunity to do their input directly on a sidewalk screen.) As Figure 2 shows, the Samsung SUR 40 supports multi-user touch-based input on a high-definition screen that may be positioned vertically, like a TV, or horizontally, like a tabletop. The Human-Computer Interaction Lab now has two tabletops. We selected this platform for the message input system to be tested for the prototype because it is an innovative technology that improves on the chalking output while also staying true to its hands-on, creative nature. For those event sponsors who do not wish to create a freehand announcement on the tabletop (or directly on the sidewalk screen), we will offer a website that allows three different methods of input: 1) free-form via an online version of the tabletop interface, 2) text-driven via a form-based interface similar to that used to capture information about Stamp events (see http://stampunion.umd.edu/marketing/), and 3) pre-developed via upload of a PowerPoint, Paint, or Adobe Illustrator file. Because the interface for free-form creation of an announcement is the new and innovative application that spans both the tabletop and website platforms, we chose to focus on that for prototype development and testing.

5

Figure 2: Multi-user tabletop device allows touch input and supports drawing tasks

Because each announcement is allocated a display area of 9 square feet (3 feet by 3

feet) within a sidewalk screen; the tabletop interface (and the website interface) will provide an outline scaled to these dimensions for event sponsors to work with. Designers may embed a photo icon into each announcement to activate a QR-code-like feature that will enable students

6

who snap a picture of it to be linked to a website or Facebook page about the event and its sponsor for more information.

3.1.2 Overview of sidewalk screens The sidewalk screen concept constitutes a potentially important link in the use of visual communication to create connections and community on the University campus. The screens are a digitized iteration of the chalking tradition on the UMD campus, both preserving elements of the established rituals while providing varied options for input based on old and new models. The proposed system also addresses a number of problems with the chalking model, including the display of outdated information, the unseen cost and labor associated with cleaning up old chalkings, creating a weather-proofed system, and options for remote security and administration as needed. The ability to connect with mobile devices and social media is also key, as these elements are ubiquitous on today's campus.

3.2 Detailed Description In the section below, we describe and present the paper prototypes we used as the primary project representation for the testing phase and offer a detailed discussion of the user interaction.

3.2.1 Message input system The paper prototype for the message input system was designed in PhotoShop and

represented in 24 paper screens to provide a full Wizard of Oz experience during testing. This enabled evaluation participants to explore the various tools for creating and animating their messages and the interaction design. We followed the procedure described in Mathew (2011) of inviting a very experienced user (a professional chalker) to interact with the prototype first. While he didn’t “destroy” our prototype in order to improve on it, his practical suggestions for changes were immediately incorporated into the prototype shown to the others. The prototype discussed here reflects the second iteration to enable readers to see the current state of the design. See Section 4.3 for a look at what was changed from the first iteration and why. As noted above, this system can be used both directly outside on the sidewalk screens and on tabletops. A specialty pen, designated only for this system, is used to make selections such as the mouse, and create drawings, for example, with a brush. When a user first begins the message creation process, he or she is presented with a blank screen, which represents a blank canvas. To access the toolbar, the user taps the blank rectangle in the upper right-hand corner of the screen. This shortcut also hides the toolbar and is always present so the user can always access the toolbar. The other tools are, going counter-clockwise: pencil, brush, paint can, color wheel, text input, link to, animation, thickness selector, undo, and eraser. Below, we will go into further detail for each tool. (The description of each is presented first, followed by the relevant prototype screen. During actual testing, interaction was demonstrated by going back and forth between the first screen and the others as a simulated announcement was shown to emerge following use of various tools.)

7

The brush is a freeform tool that is meant to represent a thicker drawing tool by default. Brush thickness and color can be selected (both described in further detail below). Our intention for the brush is that it will be used for titles as shown here, important information, and drawings or decoration; however, users may find other uses.

The color wheel tool allows users to select color for the brush, pencil, paint can, and text tools. When users select the color wheel and eye dropper icon, a color wheel appears and users select the color they want by tapping it with the pen. The color wheel disappears after a selection is made and users can select which tool they want to work with. Order of color and tool selection does not matter, color can be selected first or the tool can be. This is possible because once a color is selected it is remembered by the system and is applied to any tool currently in use.

8

The other drawing tool is the pencil, and it is very similar to the brush tool; its main difference is the default thickness. Potential uses for the pencil are writing event details, underlining or emphasizing text, and drawing designs. We see the color wheel and the pencil in action below. There may be other applications of the tool as users experiment with it.

The text input tool is reached by selecting the “A” icon. When a user selects this tool, the pen turns into a textbox creation tool that determines where the text will be located. The user creates a rectangle by dragging the bottom right-hand corner until they are satisfied with the area. The keyboard appears once the user removes the pen from the screen, indicating they are done selecting the textbox size. Text input is similar to typing on a smartphone with exception being the use of a pen instead of fingers. Once they are finished typing text, they press the “done” key on the keyboard. This tool can be used by people who are not confident in their handwriting or to ensure that important information is legible for everyone.

9

The paint can tool is responsible for painting an entire area, such as a background, or an area within an enclosed space. Users can select a color from the color wheel and then, after selecting the paint can tool, simply tap the area they want to color. The most obvious use of this tool is for backgrounds, such as the green one shown here, but it can also be used when creating designs.

The animation tool is used to make messages dynamic and exciting by changing static elements into attention grabbing elements. Once a user selects the animation icon, he or she returns to the message and circles the element to be animated. The user is directed to the animation screen (shown next) after a complete ellipse is drawn around an element as indicated below.

10

Below is the animation screen users reach when they select which element they want to animate. For the actual software, instead of words like fade and wipe, the selected element will appear in the boxes and will be animated to show all the different options in action before the user chooses one. Once a user selects an animation, it will immediately be combined with the element.

The thickness selector tool (added based on feedback in first test session) is used to choose the thickness of the brush, pencil, eraser, and text tools. When it is selected, the user is presented with a selection of different thicknesses from which to choose. Thickness is tool-specific; choosing the thickness of the brush, for example, will not affect the thickness of the pencil. Selecting thickness for text is just the same as adjusting font size, and selecting thickness for the eraser determines its size.

11

The link-to tool allows for the embedding of a URL in a message to enable students who take a picture of the message to be linked to a website. Message creators can designate where the link should lead by selecting the link-to tool and specifying exactly where the picture should direct viewers. A keyboard appears for typing the web address; users press ‘OK’ once they are finished.

Other tools not illustrated here are undo and eraser. The undo tool allows users to go back up to five steps, similar to the undo feature in many computer applications. The eraser tool (added based on feedback from the first testing session) is used to clear mistakes. It can also be used to contribute effects to some designs. It acts like other eraser tools found in Microsoft Paint and

12

Adobe Photoshop. As previously mentioned, the eraser’s size can be adjusted using the thickness selector tool. When users are done creating their message, they select the Preview & Publish button found in the lower right-hand corner of the screen. The user is shown exactly how the message will look so he or she can confirm publishing or decline in order to make a change. Once confirmed, the message is entered into the database and the message will appear and be removed at times the user has designated.

3.2.2 Sidewalk screens The sidewalk screens are envisioned as being situated in the center of sidewalks located

around the perimeter of the Mall, which could encourage use of interstitial paths and travel to the less-busy end of the Mall near the administration building (see Figure 3 for suggested locations).

Three sidewalk screens will be embedded down the center of each selected 9’ x 10’

section of sidewalk (see Figure 4) to ensure that messages are easy to see but are not so large and ubiquitous as to be considered visual clutter. Having three screens per section of sidewalk allows messages to appear just in front of students and follow them as they walk along it. The screens will allow for the display of the majority of the messages at more than one location while also introducing novelty and discovery elements that students are seeking in the form of single-site pop-up messages. (As an interesting aside, we discovered while measuring the sidewalks for planning purposes that the slabs of concrete vary in size at various points around the Mall, which would require careful customization during actual implementation.)

13

Figure 3: Potential locations for sidewalk screens around the perimeter of the Mall

A motion sensor will detect whenever someone is on the screen and start the message

in motion so that it stays in front of people when they travel on the sidewalks. This functionality allows for display of longer messages that students are likely to absorb as they walk because they do not have to stop to fully digest each one. It also makes it easier for multiple messages to be displayed at once at different locations on the sidewalk screens.

Sample sidewalk screens were displayed in a PowerPoint presentation that opened with

an explanation of the camera “logo” that would enable students to take a picture of any screen and be directed to an event-sponsor-provided website or Facebook page for more information. This explanation was followed by five sample screens promoting such events as a fraternity social and a meeting of the Grill Club (see Figure 5 and Appendix B for the individual screens from the PowerPoint). The sample sidewalk screens are colorful, attractive, and tied to actual events on the Mall, such as Maryland Day and the Friday performances by the improv troupe. By taking care with the design of the individual sidewalk screens, and even simulating motion via PowerPoint transitions, we followed the guidance in the article, “The Role of Enticing Design in Usability” to arouse users’ interest in playing with new features by providing personally relevant information and examples (Siegel, 2012).

14

Figure 4: Layout of screens on the sidewalk

While the PowerPoint presentation of sidewalk screens allowed for convenient display testing, we discovered that developing a larger model on foam core was helpful in working out issues related to screen dimensions and positioning. Specifically, we had initially envisioned that each sidewalk would display side-by-side screens orienting in two different directions. Looking at the larger model helped us see that such a presentation could negatively affect readability; thus, we opted for a single line of screens on each sidewalk. As Beyer (2003) found: “... it was critical that the dimensions of the different parts be correct....the height and orientation of the mechanisms — these all sparked fruitful design discussions.” Finally, to concretize the prototype, we made plans to develop a scale model made out of clay, with the protected sidewalk screens illustrated via clear plastic to share during our presentation. Although we were unable to complete the 3-D model in the time available, we had a strong sense that it would have helped testers envision the concept better than paper prototyping alone because most of them asked follow-up questions to make sure they understood correctly that the screens would lie flat on the Mall sidewalks.

10’

9’

3’

3’

15

Figure 5: Sample sidewalk screens used in PowerPoint prototype

16

Are We There Yet? While sidewalk screens are not yet an off-the-shelf technology, we are encouraged by signs that they are forthcoming. A Danish firm called Dupont Lightstone (http://dupontlightstone.com/) has been working since 2006 to combine fiber optics with concrete to enable live images to appear on surfaces. In a promotional video (http://vimeo.com/3050000), they claim that this digital signage will be durable, interactive, and weather- and vandal-proof. Closer to home and more modest in scale, the Fuse music and television network building in New York uses LED technology for its blue “zippers” (a 6-inch-wide, 325-foot- long electronic messaging system running down the sides of the building and across the sidewalks as shown in the picture below). To protect the ticker from the elements and pedestrian traffic, sidewalks were removed and waterproof troughs were installed for the zipper cabinets. New sidewalks were then poured around the troughs, and the zipper was covered with one-inch thick structural glass. Pedestrians reportedly stop to read the sidewalk messages (http://www.signindustry.com/led/articles/2008-05-01-LB-House_That_FUSE_Built-LED_Displays_from_Sidewalk_to_Channel_Letters.php3)

17

3. 3. Scenarios Because our prototype has two components—the input system for information providers and the sidewalk screens for information seekers—our scenarios represent both input and output. Further, since the input system is envisioned as eventually being available both on a tabletop system and via a website, we discuss both platforms below.

3.3.1 Input system On a tabletop system: Kristen, a senior psychology major, is a member of Alpha Chi Omega sorority. She is the lead rush officer and is responsible for recruiting as many potential members as possible. Traditionally, her sorority has made use of chalking around campus, especially the Mall, and Kristen will do the same. This year, however, she will use virtual chalk instead after seeing the effectiveness of the virtual messages firsthand. Because it is February and she doesn’t want to kneel on the cold ground and use a pen directly on a sidewalk screen, she decides to use one of the virtual chalking tabletops that is located in McKeldin Library. After watching a demo of the available features, she uses the special writing pen to start drawing on the 3’ x 3’ tabletop screen. She copies a design she previously sketched on paper and makes use of many colors and brush thicknesses. She does not want to stray too far from traditional messages so she adds animation to the title only and does not include additional images, or an alternative background, though she notes these features for future use, perhaps to announce social events. She previews her work, then submits the message when she is done. The message will be displayed on the sidewalk screens during the one-week recruitment period she specifies. On computer:

Danny is secretary of the boxing club and wants to publicize the club beyond their First Look Fair table. He’s seen chalkings around campus and believes it would be a good way to inform students about the club, but he does not consider himself artistic enough to do a good job. After talking with the Stamp Marketing team he learns that he can make his own message in PowerPoint and publish it on message screens that will appear on McKeldin Mall. Danny has ample experience using PowerPoint for class projects and believes he could create an attractive informational message. He signs up for a time slot on the virtual chalking website and has one week to work on his message before submission. Before creating his message, he adjusts the design page to a square dimension to match the 3’ x 3’ configuration of the final message. Danny creates his message all in one page and includes image graphics, animation, and a gradient background. He finishes the message before the deadline and submits it to be displayed during the timeframe for which he signed up.

3.3.2 User interaction with sidewalk screens Beth is a junior biology major who enjoys spending her leisure time at the Mall with friends. She likes the Mall so much that she finds herself going out of her way to walk through it so she can see what events are happening and which friends might be hanging out. Beth has noticed that new virtual chalking displays are being installed and she can’t wait to see what they

18

will offer to her already favorable Mall experiences. Once the screens are ready for public use with messages, Beth once again goes out of her way while walking to class to experience for herself the new chalking feature everyone has been talking about. She’s not quite sure how they work so she walks up to the screen and sees a message at the base. She stops in front of the base and reads the virtual chalking, noting titles zooming into focus, many colors, and engaging 3-D text. Once the first message terminates, a new message appears, and Beth reads it while still standing at the base of the screen. After reading several messages, Beth realizes she must get to class and walks over the screen on her way. To her surprise, the displayed message follows her as she is walking. She slows down her pace and realizes the message slows down with her and speeds up as she walks again. Excited, Beth tells all her friends about her experience and they agree to meet together to explore what the screens have to offer. While playing with screens, one of Beth’s friends discovers that messages can be skipped by using a kicking motion toward the long sides of the screen. Beth is astonished there was a hidden feature and is intent on telling everyone about the Easter egg.

3.4 Rationale We decided to select the sidewalk screens to develop as a prototype because that concept consistently captivated our classmates, student interviewees, and colleagues in the anthropology and landscape architecture classes. It garnered more questions, comments, and enthusiasm than either the information kiosk or the mobile app, perhaps because it provides a technologically innovative twist to the campus tradition of chalking. As one anthropology student noted, “The ability to ‘chalk’ on a digital display provides a nice connection or continuity between the past and present.” We might add that it actually improves on the tradition of chalking. The screens allow event promoters to be even more creative with their designs than chalk does, which will capture student viewers’ attention more effectively. Furthermore, an easier delivery method, increased legibility, the ability to remove expired events, and protection against inclement weather means these screens have the potential to improve the current state of event announcements. Table 1 below summarizes the advantages and disadvantages of the sidewalk screens with respect to our requirements and our ability to evaluate it.

4. Initial Evaluation 4.1 Techniques and Procedures We used two methods to evaluate the prototype: requirements-based testing and expert stakeholder interviews. For the requirements-based testing, we basically treated ourselves as consultants tasked with reviewing the established requirements with an eye toward how well they were implemented in the prototype. We three team members separately reviewed the prototype against the requirements and recorded our assessments before combining them into the table above. This encouraged a degree of rigor and unbiased examination, although it would have been ideal to have someone completely neutral perform this task. We chose this as one of our methods of evaluation because we wanted to self-assess the extent to which we had remained true to what we had learned in the earlier stages of the project about what students value about McKeldin Mall and how they prefer to get information about events.

19

Table 1: Evaluating prototype against requirements

! !Requirement!

!!!!!!Sidewalk!Screens!

Ambiance! Maintain&the&park,like,&relaxing&feeling&of&the&Mall&

Yes—embedded&flat&within&existing&sidewalks;&centered&in&concrete&and&spaced&out&to&avoid&visual&clutter&

User!communication!preferences!

Support&recommendations&from&friends&(in&person&or&via&social&media)&

Partially—viewers&can&snap&picture&of&event&announcements&to&be&linked&to&an&event&web&page&or&Facebook&page,&which&can&then&be&shared&with&others&

! Allow&spontaneous&discovery/happening&upon&interesting&events&rather&than&seeking&them&&

Partially—listings&will&be&shown&just&in&time,&but&will&not&correspond&to&the&exact&location&of&an&event&on&the&Mall.&

! Support&novelty,&fun,&and&engagement&

Yes—input&system&allows&creative,&animated&announcements&to&engage&students;&functionality&such&as&moving&messages&and&the&ability&to&kick&away&a&message&add&fun&and&interaction&

! Accommodate&introverts&and&extroverts—those&who&watch&and&those&who&dive&in&

Not&directly&in&the&interface,&though&the&content&of&the&messages&will&appeal&diversely&to&introverts&and&extroverts&

Usability!features!

Easy&to&use,&both&for&contributing&and&accessing&information&

Yes—intuitive&input&system,&multiple&platforms&for&creating&messages&and&multiple&screens&for&displaying&them&

! Highly&readable&& Partially—depends&on&design&of&announcement&and&amount&of&foot&traffic&

! Accessible& Partially—multiple&screens&and&methods&of&input&allow&widespread&use&of&the&system;&however,&input&system&and&display&are&not&currently&accessible&to&visually&impaired&people&and&could&be&covered&by&snow&&

! Reliable& Yes—Dupont&&Lightstone&technology&demonstrations&suggest&durable&surface&

Quality!of!information!

Accurate,&up,to,date&information&

Depends&somewhat&on&information&provider,&though&having&a&link&to&a&website&or&Facebook&page&increases&information&quality&

! Comprehensive&view&of&activities&(both&student,&and&institution,sponsored&events)&&&

Will&depend&on&degree&of&system&usage&by&event&planners.&We&advise&monitoring&campus&awareness&of&system,&implementing&an&ad&campaign&for&the&system,&and&tracking&system&usage,&click,throughs&to&websites,&and&linked&Facebook&"likes"&and/or&"attending"&statuses.&

&

20

We also sought out three expert stakeholders to review, test, and provide feedback on the paper prototypes: David Jalali, a member of the Stamp Street Team of paid chalkers; Marsha Guenzler-Stevens, director of Stamp Student Union, and Scott Munroe, campus architect. We decided to enlist three experts at this stage to get a deep, well-grounded critique. Our sense was that eliciting another round of feedback from random students would be less helpful to us at this point because they would likely be generically encouraging and complimentary, and perhaps hesitant or not knowledgeable enough to dig down and point out areas that require further thinking within the context of real-world campus conditions. Our experts performed admirably in this regard, both in terms of identifying small, easy-to-fix things in the prototype that we were able to address in another iteration and in identifying larger issues that would require more resources to implement and are duly noted in the final section for future consideration. Although experts weren’t jointly engaged with us in design from the ground up, we feel that their participation in providing input and feedback at various stages of our project reflects good user-centered design principles. Our procedure for conducting each expert stakeholder testing was the same:

1. Provide some context about our course project and an overview of the problem space 2. Report briefly on findings from previous stages of the project (mostly because the

stakeholders were personally and professionally interested in knowing more about what we had learned)

3. Walk through both parts of the paper prototype, explaining features and inviting questions about the design and intended functionality

We used feedback from stakeholders to propose in-the-moment changes to prototypes, a strategy recommended in Holtzblatt and Beyer (2011): “When the user discovers problems, they and the designers redesign the prototype together to fit their needs.” An inspection/evaluation method we did not choose to use was heuristic evaluation, which is typically applicable to websites (Nielsen, 1994). While we could perhaps evaluate the interface based on some of Nielsen’s heuristics, such as match between the system and the real world (in the adaptation of chalking) and recognition rather than recall (in the highly visual input system interface), others would seem forced. For example, error prevention and helping users diagnose, recognize, and recover from errors are irrelevant in a student-focused, creatively driven communication system. 4.2 Results/Feedback from Participants On Thursday, November 29, we had a session with David Jalali, who serves as a professional chalker and member of the Stamp Street Team. Because of his specific expertise, we spent most of the time walking through the 24-screen prototype, using Wizard of Oz techniques to show what the interaction would be depending on the each selection of the tool bar (brush, pencil, color, animation, etc.). We all discussed how it would have been ideal to have a prototype that would actually have incorporated a demonstration of all the animation

21

effects planned for the system; however, this would have brought us into the territory of a medium- to high-fidelity prototype. As it is, we had David envision the appearance of the various animations described in words. David’s overall assessment of the prototype was that it was an “awesome idea.” In fact, he said he “couldn’t wait to use it.” He saw its chief advantages as replacing the troublesome aspects of chalk, including the fact that it gets obliterated in rain, sometimes making “all that work for nothing.” He also liked the ability to create without getting his hands dirty and the way the system would modernize his chosen art form, since “everything is digital anyway.” He looked forward to having a full palette of bright colors to help spread messages. Regarding suggestions for improving the input system side of the prototype, he encouraged us to add an eraser tool (in addition to or instead of the “Revert” icon), both to extend the chalking metaphor and to maintain the flexibility of removing an aspect of the design right up until the end, not just sequentially, as Revert encourages. He also advocated for the ability to select the thickness or thinness of a brush or pencil stroke, consistent with the flexibility available in the real-world tools. Finally, he confirmed that a text option would have a place for those who were not confident in their free-form lettering, noting that especially for long messages, use of text fonts would add uniformity and increase readability. He also had these practical questions/suggestions:

• Need to make sure that there is a way to prevent people from modifying others’ work. • Consider having a database of “approved” chalkers who could have priority on the input

system and/or could submit work without any review at all. Our interview with Marsha Guenzler-Stevens, head of Stamp, was held on Monday, December 3. She liked several aspects of the system and was very quotable. For example, she believes that virtual chalking would be both convenient and creative: “The system would be great because it keeps people from having to get down on their knees to chalk. I'd go to a place called Chalk Center where you don't have to kneel down!" and "How artistic! If fraternities and sororities and other groups can include their logos and symbols as an upload that will catch my eye more" and would be much quicker for them than chalking it. Marsha referred to chalking at UMD is "a piece of how we talk to each other" and much greener than flyers, but cautioned that Facilities Management "hates electrical pieces in cement and worries that ground water will get in it." However, she encouraged us to think even further outside of the box by planning to incorporate snippets of video and sound in the sidewalk announcements. For example, when it's a big game day, the screen could say "We play Duke tonight" and play a few bars of the fight song. In examining the paper prototype, Marsha appreciated that the input system allowed for selection of brush thickness (a change requested by the first tester), and suggested perhaps showing the range of color options for drawing tools from the first screen. She also said it would

22

be good to have an eraser that could either be used as a digital tool or would allow the finger to be used as an eraser upon touching it. She was intrigued by the idea that taking a photo of a sidewalk screen would facilitate a smartphone connection to a website, but noted that it could take a lot of time and hold up traffic for people to fish out their cell phones and take that photograph. She was happy to hear that we were considering a phone sync feature that would allow people to set notification preferences to respond to tags in announcements. Marsha offered one piece of feedback on a potential problem that had never occurred to us. She wondered if there was any possibility that people would be confused to see a camera logo on the sidewalk announcements and worry that that could mean a camera were embedded in the screen that could spy up someone’s clothing. That would be an important potential misunderstanding to explore with others, particularly women. Our interview with campus architect Scott Munroe took place on Tuesday, December 4. Scott believes virtual chalking is a tidier solution to the problem that chalking poses on the maintenance side of campus. (He reported that chalkers don’t ever remove expired messages, and it looks sloppy to wait for the rain to wash them off, so maintenance staff members are tasked with power washing the sidewalks or going over the chalkings with a broom and bucket of water.) Scott was interested in hearing about the real-world technology in the offing that could lead to fiber optics embedded in concrete because his main concern was durability of the screens to withstand the footsteps of thousands of students per day. He advised that serious consideration would have to be given to how well-protected the sidewalk screens are from the elements, and that consideration of long-term IT maintenance needs and technical support should be a definite part of the planning process. OIT should also be consulted about how to ensure that the tabletop system and website input interfaces could not be hacked by a rival school or disgruntled student. Scott also raised another practical issue when he asked how the system would (while respecting students’ free speech) ensure that announcements were not obscene or overtly commercial. He noted that providing a link from the announcement to a website or Facebook page posed similar risk—the link could be to something egregious. Therefore, he recommended some broad level of review before broadcast, perhaps by Student Affairs. He was happy to hear that the interface would require students to indicate how long a message should be displayed, so that the out-of-date problem would not be perpetuated in a new form. Interestingly, Scott proposed an even broader application for the system, perhaps tied in with the St. John Teaching and Learning Center. He said he had often pondered the possibility of using LED screen boards set into a retaining wall to provide snippets of real-time lectures going on inside the buildings around the Mall. The sidewalk screens could be another venue for displaying these.

23

Our stakeholder feedback converged on a few practical points related to adding an eraser and line width indicators to the input system screen, and again around the issue of ensuring a level of control over what types of messages are displayed. The amount of positive feedback also suggests that the design succeeds in addressing important affective issues of design, such as engagement, arousal, and pleasure, as described in Siegel’s “The Role of Enticing Design in Usability” (2012). 4.3 Screenshots Showing Resultant Changes Overall, interviewee feedback suggested that the input system’s user interface was easy and intuitive to use. As the screens below show, we also made a few immediate changes to the input system based on user feedback from the first tester—the professional chalker who was most familiar with the actual act of creating eye-catching, attractive announcements. An eraser has been added at the bottom right to allow any action to be deleted with a quick “rub,” and an option to select thickness of the pencil, brush, text, and eraser has been added to the toolbar on the right side. We considered including either an undo (revert) feature or eraser tool, but our interviewee stated that he saw uses for each one and that having both would probably be best. We also decided to include a thickness selector after learning that two thickness options – the brush and pencil – were not enough. Further, the mouse icon, which was primarily meant to designate an animation element or area, has been removed since the chosen interaction is drawing an ellipse around an area to be animated and then applying a particular type of animation as demonstrated on the screen. Going back out to an expert user (especially the member of the Stamp Street Team of paid chalkers), obtaining new user requirements, and implementing design changes are steps associated with agile usability (Lee, Judge & McCrickard, 2011).

ORIGINAL INPUT SYSTEM UI (shows mouse tool that was eliminated)

24

ADDITION OF THICKNESS INDICATOR (done after first testing session)

ADDITION OF ERASER TOOL (done after first testing session)

25

4.4 Discussion of Changes for the Future We have identified four desired changes for future implementation on the basis of expert stakeholder feedback and requirements testing. The first two address access to the input system and are based on expert feedback obtained during the evaluation stage; the third has to do with providing the ability for viewers to automatically sync information from individual sidewalk screens to their phones (moving beyond the interim step of QR-like photography we included in the prototype to a more smoothly integrated user experience); the fourth involves incorporating other media into the sidewalk screens. These changes are described in more detail below.

4.4.1 Authorized/preferential users Some organizations, such as the Stamp Street Team, habitually chalk and know exactly

what they are doing. Giving them priority or an easier sign-up process for the virtual medium would encourage them to take full creative advantage of it. All users would be required to sign up using their UID, and authorized users would be recognized by their UID. Under our current system, we envision that every chalker would visit a website to sign up for when their message would appear prior to preparing and submitting a design (UI yet to be developed). We anticipate that there could be a considerable delay, perhaps as much as 5 to 6 days, between when some novices signed up for a spot and when they actually created the message due to students’ tendencies to procrastinate. It might be prudent for the system itself to impose a short period of delay (perhaps 1-2 days) to give students time to carefully consider and design their announcements.

Seasoned chalkers would likely want to begin chalking immediately since they would

already have an idea of what they wanted to do and would be much less likely to procrastinate due to an artistic block. While at a tabletop or input screen, these chalkers would be able to choose when the message would appear and immediately begin chalking. Removing the time delay between signing up and creating a message will encourage those who routinely chalk because it will be very similar to traditional chalking methods – look for a spot to chalk and then start chalking once a good location has been found.

4.4.2 Different locations for tabletop input Another change would be to offer multiple input tabletops around campus. In addition to the McKeldin Library location, high-traffic areas such as Stamp Student Union and Hornbake Library would be suitable for accommodating additional input tabletops--an idea that arose during the prototype evaluation. The Stamp location would be particularly convenient for the Stamp Street Team, whom we foresee as among the most frequent users of the system. The third tabletop located at Hornbake Library would act as an alternative to the potentially more popular locations. We aim to make virtual chalking just as easy and autonomous as possible by providing multiple input tabletops. This will minimize overcrowding at the input tabletops and the potentially negative effects of missing a submission deadline.

26

4.4.3 Sync information to phone automatically On the side of information receivers, we would like to include a mobile application that syncs information found in the messages to students’ phones. We had previously discussed this idea, after a user feedback session, but it did not make it into our final prototype due to our decision to implement the more “realistic” option of a QR-code-like system of encouraging students to photograph announcements to be taken to a website or Facebook page for more information. Although an exact process was never formalized, we envision that while users walk over the screens, the application would allow important information – event name, location, and time – to be synced to their phones automatically.

At an earlier stage of the project, when we explored developing an application devoted

to the Mall, we included information syncing capability as one of its features. When we decided to work on virtual chalking, the Mall mobile application took a back seat, but the syncing feature remains on our minds. If an information syncing application were to come to fruition, several issues would have to be resolved. Would the application communicate with software in the screens? Would the application indiscriminately sync information or would users be able to opt in for notifications and/or select specific interests? Would information providers be required to use tags to help make the application more accurate in selecting messages that match users’ interests? These are intriguing questions that, once solved, will lead to an application that will augment the virtual chalking experience.

4.4.4 Add video and sound to sidewalk screens One of our stakeholder interviewees with event marketing experience encouraged us to think big by planning to incorporate not just animation in print announcements, but full-on multimedia, including sound and video. In her experience, students like to look at each other participating in activities—she said that can be the biggest attendance draw of them all. Sound, too, can draw students in and entice them to absorb the information about an event. (The Mall does have a no-amp policy, so sound settings would have to be at an appropriate decibel level and probably only activated at intervals to avoid disturbing the calm of the Mall.) Incorporating sound and video files would add somewhat to the complexity of the task of designing announcements, but today’s students are generally comfortable with multimedia and could do so if a web-based interface guided them through the process.

In mulling over additional features to improve the experience of virtual chalking, add multimedia, and extend its viewing to a mobile app, we are reminded of Christopher Le Dantec’s reflections (2012) that the means of participating are beginning to blur with the ends of participation. In other words, providing sidewalk screen technology on McKeldin Mall is both a way to ensure communication about an event and also potentially an event in itself, to the extent that creating announcements on it helps students express their creativity and reading the screens provides them with fun, novelty, and entertainment along with information.

27

References Beyer, H. (March 13, 2003). “Paper Prototyping in the Large” on InContext website. Downloaded from http://incontextdesign.com/articles/paper-prototyping-in-the-large/ on December 1, 2012. Holtzblatt, K., and Beyer, H. R. (2011). “Contextual Design.” In Soegaard, Mads and Dam, Rikke Friis (eds.). Encyclopedia of Human-Computer Interaction. Aarhus, Denmark: The Interaction Design Foundation. Available online at http://www.interaction-design.org/encyclopedia/contextual_design.html Le Dantec, C. (July-August 2012). “Considering the Rights (and Wrongs) of Community Technology.” Interactions, 19 (4): 24-27. Lee, J. C., Judge, T. K., McCrickard, D. S. (May 2011) “Evaluating EXtreme Scenario-Based Design in a Distributed Agile Team.” CHI Extended Abstracts 2011: 863-877 Mathew, A. P. (2011). Art Loop Open: Designing for the Intersection of Art and Technology in an Urban Public Exhibition Paper presented at CHI 2011, May 7–12, 2011, Vancouver, BC, Canada. Nielsen, J. (1994). Usability Engineering. San Diego: Academic Press. pp. 115–148. Pohjola, O-P. (2011). “Design Principles for a New Generic Habitat” CHI Extended Abstracts 2011: 107-116. Siegel, D. A. (July-August 2012). “The Role of Enticing Design in Usability.” Interactions, 19 (4): 82-85.

28

Appendix B: Additional Screen Designs