Page | 1

SmallWorld

Interactive Prototype #1

CSE 441Winter 2009| Assignment 10

OnlineURL|cs.washington.edu/education/courses/cse441/CurrentQtr/project_files/socialize/index.html

Prototype Developers|Jim George

|Sean Ren

|Thani Suchokand

Usability/Writers| DJ Ahn

|Linda Le

Problem and Solution Overview

With the explosion of smart phones, there has been a wave in the production of mobile social networking applications like Bright Kite and Loopt. However, these current location-based social networks do not put enough emphasis on user privacy and security. SmallWorld focuses on confidentiality by introducing a feature called Group Zones that allows the user to create areas of visibility that are linked to specified sets of people (i.e. Work, School, etc.). Group Zones are a dynamic approach to privacy that is dependent on the user’s location. This gives the user freedom to move between group zones while having their privacy settings follow them and change discretely in the background. By implementing zones, users can quickly assign, organize, and maintain their security preferences with little effort.

Tasks

  1. Find a friend nearest you and give them a call(easy)

Explain: This task tests one of the expected most common features of our application, map browsing and contact search. The user can use their current location to find friends closest to them, then research that friend’s contact information and get in touch.

  1. Organize your list of friends into different categories for easier indexing(medium)

Explain: This task exams the intuitiveness of Groups and people’s categorization patterns. The user can manage a huge list of friends by organizing them into a SmallWorld Group, like Co-workers, Family, Portland Posse, etc. Groups make searching easier and also supports the Group Zone feature by sorting friends into distinctive bins that can be associated with a location.

  1. Make yourself visible to only your school friends when you are on campus(hard)

Explain: This task tests the user’s comprehension and ease of use of the Group Zone feature. The user can manage their privacy by creating Group Zones – a specified area of interest – and linking a set of friends to that location. So when that user decides to travel into the highlighted jurisdiction only the people associated with that area can see the user.

Revised Interface Design

UI Changes

  1. Remove overlay on map, instead use a popup

Users, in general were frustrated with the map overlay describing it as “distracting” and “unnecessary”. Our solution to this problem was to completely remove the map overlay and replace it with small tag that appears above the person’s iconafter being tapped. The tag includes just the name and a link to the detail page to save on space and minimize clutter. By initializing tags, we get rid of the annoying overlay while still maintaining the necessary information.

  1. Make the “me” icon more obvious that it is “me”

From our online usability test, we received lots of feedback that users were having a hard time finding the icon that represented them. One participant commented that “Having the selected marker be the same color as my marker is kind of confusing”. So following the suggestion of our audience, we decided to drastically change the icons to something more obvious. Instead of merely altering the color, our team chose to make all the ‘friends’ icons be an actual image of the person while ‘me’ is still represented by the pin icon. By making all the ‘friends’ icons into small profile images and keeping the user as a pin, the contrast between self and others is observable whileprovidingthe user with additional information.

  1. Change this to previous/next friend arrows

Because we removed the map overlay, we needed to move the previous/next friend toggle. We chose to replace the show/hide overlay button with the toggle because the overlay feature was scrapped. Also, some users commented that the up and down arrows on our first UI were unclear, so this time around we chose to have the arrows pointing left and right to imply direction with ‘previous’ on the left and ‘next’ on the right similar to a browser.

  1. Interactivity: pinch to change size, don’t use the perimeter

The usability test revealed that our current method for resizing the Group Zone by pinning the center of the circle and dragging out the blue perimeter to scale was not intuitive. In fact, many of our participants suggested utilizing the iPhone method of “pinching” to resize an object, because it has become common practice on the platform. So in our latest prototype, we removed perimeter scaling and implemented pinching therefore making editing zones more intuitive.

  1. Additional information on the Friend’s page

Our team felt that much of the information users wanted to know could be better distributed to minimize the amount of time spent browsing through the application. So on the Friends list page, we added a link that will reveal the user’s location on the map. On a friend’s profile, we included status with current location information. By providing more places to find info, we hope to reduce the time it takes to search through our application.

  1. Groupslayout

We decided to change the way Groupsworkedby adoptinga more well-known iPhonedesign pattern, specifically from theiPhone Contact application. By emulating an existing Apple layout, we hope this will make our application more intuitive and consistent with other iPhone applications. Before we sorted by groups, but now you can navigate to a group view and select a specific group and it filters to that list. The default view is “All Friends”

  1. Make label more obviously attached to the zone

In the first installment of our application the zone’s label was incomplete and did not move with the zone. We received a lot of comments from participants expressing confusion over what the label was essentially labeling, either the map or zone. Our interactive prototype addresses this issue by making the label move along with the zone and having the text no longer be displayed beneath the zone’s overlay making it more adherent that the label belongs to the zone not the map.

  1. Completed functionality for Group Zone editing

In our current prototype, we were able to produce a context sensitive toolbar that presents controls for managing the currently selected region. This allows users to cancel changes they’ve made to a group zone, delete group zones, and change the name and Group associated with the Group Zone.

  1. Group management controls added

There is now added functionality to add new groups to the Groups page and add and remove friends from the Friend’s Detail page. These features weren’t implemented in the last prototype due a lack of time.

Scenarios for 3 Tasks

  1. Task 1: Find a friend nearest you and give them a call(easy)

Scenario: You are a student at the University of Washington that wants to grab a quick lunch before your next class starts. You recently purchased an iPhone along with an application called SmallWorld, which you have been told helps find people. You don’t want to eat alone but you don’t have enough time to wait for a friend, so you pull out SmallWorld and aim to find the closest available friend.

Mission: Find the nearest friend and call them to see if they can have lunch with you.

  1. Task 2: Organize your list of friends into different categories for easier indexing(medium)

Scenario:You recently got a new job at Café Allegro and discovered that many of your co-workers like to use SmallWorld to keep in touch. You added a few of your co-workers intoyour friends list, but would like to create a separate folder to place them in because it is a hassle locating them in your long list of contacts.

Mission:Organize your co-workers into a separate category so that finding them in the future will be easier

  1. Task 3: Make yourself visible to only your school friends when you are on campus(hard)

Scenario:You are a struggling student at the University of Washington nearing academic probation. Each time you try to start study in the library your phone rings with another party invitation from your friends which you can’t resist. You want to focus more on school when you are on campus, so you want to have only your school friends to be able to find you andpreventing your party friends from locating you.

Mission:Make yourself visible to only your classmates while you are on campus and not your party friends

Prototype Overview

Tools:

How the tools helped

The Interface Builder is anice design tool for people new to iPhone development. It allows developers to quickly mock-up displays according to the iPhone’s interface guidelines. InterfaceBuilder was essential in the assembly of the visual components of SmallWorld. Based on our rough sketches of the application's UI, we could easily layout and modify the complex views, containing multiple sub views according to the iPhone’s human interface guidelines. Using draggable preconfigured objects from a library into IB, we designed our UI of the application. We then repositioned those objects and changed its attributes as needed to achieve the desired look and feel for SmallWorld. The Interface Builder is a great tool for planning and prototyping and makes developing a lot faster!

How the tools did not help

Interface Builder itselfis not a coding environment; it is a visual design tool. Interface Builder does not let you add functionality directly in the interface. It only lets you attach actions to code segments (IBActions) or give your code reference to objects (IBOutlets). The preferred approach is to use Xcode for those tasks. So, if you are new to iPhone development and Object-C classes, it requires more background knowledge in Object-C. Because the Interface Builder uses preconfigured objects stored in its library; it did not quite help us to visualize the UI the way we wanted. So we used Xcode to manually program to modify those features to meet our design choices. Because the iPhone does not have a built in map support, we programmatically implemented the map from athird party library.

Overview of the implemented UI:

Navigation bar

For our application, we have adopted the conventional iPhone layout with a set of black buttons running across the bottom of the display. You will notice that the icons are no longer colored as seen in the last paper; this is because the software development kit does not support individual colors only silhouettes.

Map

The “Map” page is the home page of the application. The actual map is integrated to the application using Live Maps and displays the location of the user and their friends based on GPS coordinates. On the map, ‘friends’ are represented by a small profile image of the person, while the acting user is identified by a blue pin. Tapping on a SmallWorld user’s icon on the map, unleashes a small tab that floats above the icon which includes name and a link to the detail page. In the upper left-hand corner of the “Map” page you are able to enter the “Group Zones” page. While in the upper right-hand the left and right arrows allow you to toggle between friends visible on the map.

Me

The “Me” page serves as the profile page of the user, it displays the user’s image, status, location, and phone number. The user is only able to change their status from this page by tapping the status box which transforms into a keyboard.

Friends

Selecting the “Friends” button on the navigation takes you directly to a list of all of your friends;this is the contents of the All Friends group.From this page, you can see each friend’s name, status, and an arrow leading to the person’s details page. On the top menu bar, the ‘Groups’ button will take you to the ‘Groups’ page, while the segmented control in the middle will rearrange friends alphabetically or by proximity. In the upper right-hand corner, there is a ‘+’ button which allows put more friends into the current group.

Friend Details

The friend detail page displays the personal profile of the selected friend, which includes an image, status, current location, and which groups they are associated with. From the friend’s detail page, you also have the option of calling the individual, sending SMS, or locating the person on the map by just clicking the icons on the top of the page.

Groups

The ‘Groups’ page is a list of all the different categories that friends are organized into. ‘Groups’ function allows for faster search capabilities and supports the Group Zones feature. Selecting a group from the page takes you to list of friends filtered by the selected group (such as Co-worker, School Friend, etc).

Group Zones

Group Zones controls the visibility settings; the usercan define a region and then link it to agroup of friends on the Groups page. When you are found within that a particular region, only the people from those associated groups can see you. Otherwise you are hidden. If a user does not want to use regions, the default region is “everywhere” and they will always be visible (unless they explicitly hide from all). On the Group Zones page, users can either add a new zone by selecting the ‘+’ icon, edit a region by double tapping a circle, or exit the page by pressing ‘Done’.

Edit Group Zones

On the Group Zones page, if you double tap any circle overlay on the map it turns the circle red and puts you into an editing mode, where you adjust the location and size of a zone. To relocate the region on the map, simply press and drag the center of the circle. To resize the region, SmallWorld utilizes a pinch gesture made popular by Apple’s iPhone to resize objects. To exit editing mode, tap the circle again and it will turn blue to signify the departure from editing mode.

Settings

The Settings button on the navigation bar is now functional taking you to an empty page, where we hope to have language preferences, update frequency options, and other choices available in the future. For now, this page is simply a placeholder for more advanced features that we might not even be able to accomplish this quarter.

What was left out and why:

The features we chose not to implement this round, where made mainly because of the time constraint and a priority for task functionality.

Sorting friends

The ability to sort the Friends list by name and proximity remains non-functional, due to a lack of time and overall importance. This is a feature that adds value to the application but is not essential.

Friend toggle on map

You will notice two arrows in the upper right-hand corner of the application; they’re supposed to allow the user to move through the different friends on the map without having to individually poke each icon. Unfortunately, this feature remains incomplete but plans are underway for its development. This feature is another trivial function that is unnecessary for the main tasks of the app but adds value and convenience.

More context help for editing Group Zones

Almost every user during the usability test mentioned the need for further instructions or an example on editing zones. We wanted to address this issue by expanding beyond textual directions and instead include a pop-up that you can click on to help the user learn more about how to edit group zones. We have not yet expanded upon this because it was a lower priority than getting all the editing actually functional. The usability test will show us exactly where we need more help and where users get confused.