Computer Science and Engineering Craig Panthen Industrial Design Professor Landay CSE 440 Human-Computer Interaction Philip Kuo Computer Science and Engineering Craig Panthen Industrial Design Heidi Tanumulia Chris White Philip: Hi, I’m Philip Kuo. Heidi: And I’m Heidi Tanumulia. Philip: Our group mates are Craig Panthen and Chris White, and we’re the Buddy Map team.

The Problem Easy to lose track of friends Easy to get separated Easy to take the wrong turn Philip: Imagine for a moment, you’re out skiing. You’re halfway through the run when you stop to take a breather. You can’t see your friends anywhere. Are they behind you? Or are they down below, waiting for you to catch up? It you take a wrong turn, it can mean a lot of pain finding your friends again. That’s the problem. The solution? BuddyMap!

The Problem The Solution: Buddy Map! Easy to lose track of friends Easy to get separated Easy to take the wrong turn The Solution: Buddy Map! Philip: Imagine for a moment, you’re out skiing. You’re halfway through the run when you stop to take a breather. You look up and down the run, but you can’t see your friends. Are they behind you? Or are they down below, waiting for you to catch up? When you hit a fork, you wonder which way your friend went. And once you go down one way, there’s no changing your mind. The solution? BuddyMap!

What is BuddyMap? Skiers and snowboarders Personal map Friend locator device Organize a group Heidi: So what is BuddyMap? BuddyMap is a device designed specifically for skiers and snowboarders. It can be a personal map, and help you find your friends out on the mountain. The BuddyMap also has features that support group organization, for people who go skiing or boarding with friends.

Video Prototype Clip Heidi: This next clip is from our video prototyping stage, which we’ll talk about later. It’ll show you the Buddy Map in action and the context in which it’s used.

Outline Tasks Prototyping Stages Evolution of Design Demo Zooming Dots Menu Demo Heuristic Evaluation Summary and Questions

Tasks Purpose: concrete process flows for design decisions Three tasks Alert – Crash! Follow Me Meet Up Philip: We focused on three specific tasks we wanted the user to be able to perform with out device. These tasks gave us concrete examples of our device in use for us to base design decisions off of. The first task is the Alert scenario, which we just saw in the video clip. When your friend disappears into the trees, you don’t know whether they’re just taking their time or in trouble. Safety is a big issue in the backcountry, an issue we wanted the BuddyMap to address. The second is the Follow Me scenario. It’s easy to get separated from your friends, even if it’s by 10 or 20 seconds. But if you don’t know where they went, those seconds can turn into hours. In this task, BuddyMap is used to track a friend that has taken off and just out of sight. - From our contextual interviews, we learned that our users wanted to be able to coordinate large groups of people. Thus, we created the Meet Up scenario. In this task, a group of friends has separated over the course of the day, but want to meet up for lunch. One of them uses the BuddyMap to arrange a meeting.

Prototyping Video Prototyping Paper Prototype High Fidelity Prototype Determining the context Paper Prototype In-depth UI design Get user feedback High Fidelity Prototype Interactive and online Heidi: Our prototyping had three phases. The first was a video prototype, which you saw a portion of. It was mostly for setting the context that our device would be used in and testing basic UI concepts. After that, we moved on to paper prototypes, where we more fully fleshed out the UI and ran user tests. Finally, we took the feedback and created the last iteration of our device using Adobe Flash, which you can find on our website.

Zooming with Gloves Two finger drag – but users with mittens? Added zooming buttons instead Heidi: The most basic component of our device was the map. At first, we wanted to keep the screen as uncluttered as possible because of its small size. Zooming was done by placing two fingers on the screen, and pulling them farther apart or closer together to zoom in or out. However, nearly all of our users would be wearing gloves while using this device, making this operation very awkward, so we added zoom in and zoom out buttons.

Dot Identification Unlabelled initially – but too confusing Added labels Added 3D affordance to indicate it was pressable Heidi: On our map, we identified people using dots. We started with these dots unlabelled, but decided that would be far too confusing, and added names to them later. User testing during our paper prototype showed that people didn’t know they could actually click on the dots, so for our final prototype, we added a three dimensional effect as an affordance to the dots.

Menu and Mittens Started with radial menu and stylus Stylus kept stabbing face Radial menu on screen edge would appear inconsistent Philip: For our video prototype, we used a radial menu and a stylus taped to Craig’s glove. During the filming, though, Craig kept stabbing himself whenever he scratched his face. Not only that, if a user selected something on the edge of the screen, the radial menu would appear differently and violate consistency heuristics.

Menu Moved to large buttons Easy target for large digits Flush against screen edge Philip: We moved from that to creating the largest buttons possible, making it easy to click on with gloves. The buttons extended to the edges of the screen, expanding the target without using more screen space.

Demo Philip: So now, we’d like to show a demo of our Buddy Map. This was done in about a week in Flash, all the images were made in Illustrator by Craig, our Industrial Designer.

Heuristic Evaluation “Next” button not in a consistent location solution: redesigning short of the larger parts of the UI Indication of current step out of total steps of process solution: add boxes or circles at the title bars, shade in subsequent shape as the users are progress through the steps Heidi: After we completed the high fidelity prototype, other members of our class did a heuristic evaluation on it. A problem they brought up was that the “Next” button was not consistent from step to step. We did discuss this during our meetings, but couldn’t come up with a decision short of redesigning large parts of the UI. Another concern they had was not knowing how close they were to completing a task. We can easily add boxes or dots to the title bars, then shade in the subsequent shape as they progress through the steps.

Summary – Buddy Map Social device connecting friends Iterating designs through prototyping Still improvements to be made Buddy Map can save your life! Heidi: So now you know a bit more about Buddy Map, what we’ve been working on in the past 10 weeks. It’s a social device that keeps friends in communication while on the mountain. You’ve seen our prototypes, how we made each iteration of the device a little better than the one before it. And of course, as our heuristic evaluation shows, there’s still progress to be made. And remember, Buddy Map could save your life! Philip: Thank you for listening, we’ll be available afterwards if you’d like to see more screenshots or hear more about our project.

Questions ? Philip: Meanwhile, we’ve got a few minutes for questions.