Page History

...

Task	Sub task	Description	Learnability	Efficiency	Safety
Find a Friend	Home page Open Application	This is the home screen of our application. it is in the form of a dashboard; all the different tasks offered by this UI can be initiated from this screen. For example: adding a friend, viewing and responding to event invitations, viewing and approving friend requests, viewing all friends on map and viewing all events on map.	This home screen displays all the functionalities offered by this application in one place. It encourages learning by doing, especially since all the task icons are labelled which facilitates a user who has a specific goal he/she wants to achieve. All the icons have a relevant picture to increase the information scent.	Because user can directly identify which icon is most relevant to the task they have in mind, they can directly got to the relevant page, instead of steering thorough multiple pages, making it a very efficient home page. Also because the icon and label puts all the information on screen, users do not need to memorize the exact position of button for a specific task.	Because of clearly labelled, discrete and task-specific menus, the user is less likely to select a wrong option to achieve his/her goal. Even in the event that the user does select a wrong option and leaves this view, the Home Icon located in the top left will allow recovery by returning the user back to the* Home Screen. *
	View Friend list	Upon tapping on the first icon, labelled "Friends", Alice, the user, is presented with this screen. It contains the list of existing friends of the user. The list is displayed in alphabetical order. user can scroll up and down by finger or use the fast-alphabetical-scroll bar on right for fast retrival in case the list is long. The home button, located in the top-left of the screen, allows Alice to return to the home screen. This screen has a "Groups" button and an "+" button on top right. The groups button will take user to a page where predefined categories of friends are displayed; All friends(the default list), recently contacted friends(list of 10 friends user recently attended an event with), pending friends(friends who haven’t accepted user’s friend request yet.).	This display is externally consistent with how the contact list is commonly displayed in smart-phones. By allowing flick-to-scroll, the user is able to make use of direct manipulation in interacting with the contact list.	If a user realize at this point that there is another person that they want to add, they dont need to go back to home page to add a new friend, because there exists a short cut on the top right of this window in shape of "+". this short cut increase the efficiency for frequent users.	The consistently placed Back Button located in the top-left always allows the user to return back to the previous menu.
		Tapping the name of a friend brings up this screen. This contains the name and details of the friend. and an "map" icon labeled "Map". It also contains a short cut for initiating event at the bottom of the page for labeled "Invite to a new event".	This page is simple and clearly labeled. The map icon has a label saying “show on map” which makes this feature easy to discover.	This page contains efficient direct links to find a friend on map, and also to create an event.	All the actions user perform on this page can be undone by navigating back. If the user accidentally creates an event, user can cancel it and return to this page.
	Find a friend pn map	Tapping the map button against friend's name opens this screen. This screen contains a map with a small dot on the location of that friend with a small speech bubble with the name of that friend in it.	This screen uses the same map interface as provided by Google Maps. This external consistency will allow users to be familiar with how to interact with the Map View without having to be trained due to their familiarity with the existing Google Maps interface.	It allows zooming in and out, the panning of the distance is based on the zoom level.	User complete control over how much zoom in they want the map to be, and zooming action can be undone by zooming out. The "Back" button on top of the screen takes user back to friends page.
Add Friend	Look up a person in common directory	When user taps on "add a friend" icon on home page of "+" button on friends' list screen this screen shows up. This is the screen where user looks up a person in the directory to add as friend. the search result contains all the matches for the searched name. It may contain people already added as friends, people whose friend request is pending for user's approval and friends who did not yet respond to user’s friend request. To distinguish between all these type of search results, there is a small word against each search result saying either "friend" "pending" "respond" for each of the type explained earlier respectively.	The terminology used is externally consistent with common vocabulary as well as other social networking media, therefore it is easy to learn.	The search is adaptive and shows inline results as the user types next letter of the name, making it efficient.	Users need not concern themselves with viewing out-dated search results from previous searches lingering.
	View Profile	When a user taps a name from the search result list this screen shows up. It displays the name and details of that person from the common directory, for user to review and decide if this is the person he/she is looking for. Notice the map is gray, showing that the map is disabled for that person because he/she is not added as friend yet. Alice proceeds to send a friend request by tapping the Add Button.			At any time user can cancel the friend request. and the buttons with long term effect are placed strategically away from navigation buttons.and size of buttons is increased if two buttons are adjacent to each other, minimizing the chances of accidently tapping the wrong one.
	Add as Friend	This screen contains a customized message to be sent with friend request. The contact details is auto-filled and the customized message contains fragile default message. User can change the customised message field and send request by tapping the button on the bottom of the page. Alice may choose to cancel with the Back Button, but in this case, knows that Bob is the correct person to be added and thus proceeds by tapping on the Add Button.	All the buttons are clearly labels and are internally consistent with the use of vocabulary.	the text fields are auto filled decreasing the users responsibility in the overall procedure, increasing the efficiency.	User can cancel friend request process at any time.
		If the person whose profile is being displayed is already a friend, this screen will show up instead. The map button is enabled now to allow Alice to view the users on the Map View. If that person already sent youa request and is waiting for a response, this screen will show up. The map button would be disabled, and is only enabled when the accept button is tapped .	all these three profile views are consistent with each other. therefore do not require users to learn or memorize the details. All he buttons and actions are appropriately labeled easing the learning process.		Initiate Event
Invite friends to an event	Create event	This is the screen where user can schedule an event. tapping on each property of an event will take user to a separate page where they can enter a value. Each edit view has a cancel and done buttons on the top, which are wide and clearly labeled. Edit start and end time page has a "ticker" for easily selecting date and time, with default set to 30 minutes added into current time. select invitees page takes the user to its friend list. user can select multiple invitees by tapping on their names. the friends already added in the list have a tick againt their names and those who are not added yet have a "+" inside a circle againt their names. there is also a search bar on the top. once all the properties are set, event can be broadcasted to all invitees by tapping the button on thebottom of the page.which pops out a confirmation message.	This screen is easy to learn because it is externally consistent with other smart phone applications such as Calender and Alarm.	features such as "Selecting multiple friends" and "ticker" for start and end time makes it efficient. search bar in the list of friends makes it faster to browse through a long list of friends.	A dialogue box pops up when the user tapps "send invite" button, asking for confirmation. making user to think twice before actually sending out the invite.
RSVP to an Event	View Event Invite list	This page contains the list of new event invitations. This page lists time and location against each event.		This page displays time and location of the event against each event making it faster for user to browse through for a specific event.	The user ser can undo all their actions by navigating back.
	View event details and location	Tapping the event name brings the user to even details screen. This screen displays the details just like a create event page did. except that the button on the bottom now says "send RSVP" the "event location" has a button against it saying "show on may".
	View event on Map	Tapping the map button against friend opens map and shows event on map.
	Send RSVP	RSVP page contains option "Accept" and "Reject" along with a optional field for "additional notes". user can send the reason for rejection or may be dietary restrictions with the acceptance and tap "send" to send response.
Reschedule	View list of events	This is the page user can view all the events. Each event has location and time againt its name. making it easier for the user to browse through the list for a specific event on a scpeicfic day and location. If the event is cancelled, the word +Cancelled +is shown instead of the location and place of the event. In case the location is changed by the organizer an *-asterisk graphic appears on the location and time. User can tap on the event name to view the full details. The page which displays the full details looks just like the create event page. except for the fact that it does not contain "Send invite" instead it has RSVP button. which takes the user to the RSVP page.
	View RSVPs	Since Alice was the creator of this event, the View RSVPs button is available and enabled for her in the Event Details page. This will bring up the View RSVPs screen as shown. This screen contains the list of invitees and a symbol representing there response. For the icon, a Tick symbolizes that a participant has accepted the invitation. The Cross icon symbolizes that a participant has rejected the invitation. The ?-question mark icon that a response has not yet been recorded by a user. Tapping on the arrow head against the response will take user to the window showing notes sent by the friends with their RSVP.	the arrowhead has the affordance of a link to details. the "tick" has connotation of acceptance, likewise "cross" has the connotation of "rejected" and "question mark" of "unknown". this makes it easy for a new user to learn and a frequent user to use it without memorizing it.	All the responses are on one page and user can easily scroll through the list.	User can only perform navigation actions and they can undo by using the "back" button.
	Edit details and broadcast send update.	The is a Edit Button exists at the top, which Alice taps on. This brings her to the Update Event page, which is similar to that of the Create Event page from earlier. The fields are automatically populated with the details from the event. Upon reviewing the change that have been made to the event, Alice is happy and decides to confirm the sending of the updated event. In order to do so, she taps on the Send Update button at the bottom.update the details and send updated by tapping the button located at the bottom of the screen.	This screen is internally consistent with the "Create Event" screen, therefore is easy to learn.	If there is a slight change in events' plan user can update the event details instead of canceling the event and creating a new event and filling out all the unchanged event details. This makes it efficient to use to frequent users.	A dialogue box pops up when the user tapps "send update" button, asking for confirmation. making user to think twice before actually updating the event.

Design #3

Subtask	Sub Taks	Description	Learnability	Efficiency	Safety
Add a Friend	Entering theHome Screen	This is the home page of out Application. Alice opens Discover.Me. Alice immediately sees list of friends. Alice can search for friends by tapping on the text bar near the top. On the bottom row are four buttons:* Friends (Home Screen): brings up the current homepage with a list of friends.* Events: shows the events that Alice has been invited to or will be attending.* Search: immediately pulls up the text box to search for friends.* Invites: shows the people that have invited Alice to be their friend.	The screen presents few details to Alice. She sees some of her Friends and quickly realizes that she can find more friends by scrolling down the list or by using the Search text bar.	Alice can immediately search for her friends by tapping the Search text bar near the top of the screen. She has one-tap access to a listing of her Events and Friend Invitations.	Buttons and selections are made large so that Alice can tap the right targets on the screen. Alice may accidentally hit the Exit button when she taps on the Search text bar.
	Searching Looking up for friends	Alice taps on the text search bar near the top of the screen. A keyboard pops up from the bottom of the screen allowing Alice to type her entry.	The Keyboard automatically appears telling Alice to begin typing. Alice is familiar with this feature from using other apps.	It isn't clear whether there are other option for Alice to find her friends besides searching for their names.	The keyboard is rather compact and Alice may find herself accidentally hitting the wrong key.
	Finding and Adding as Friends	Alice types "Bob" in the search bar. The Friends list updates to show friend names closely matching Alice's entry.* The list contains a directory of people (e.g. the MIT directory). Alice views the updated list of people. Next to their names are indicators:* Friend: indicates the person is already a friend.* Pending: indicates that Alice has invited the person to be her friend.* Add: allows Alice to invite the person to be her friend. Alice adds Bob as her friend. Bob quickly accepts Alice as a friend.	Alice sees the same list of friends as she saw on the home screen, so she is familiar with the user interface. The buttons to add a friend are colored brightly so that Alice knows she can perform an action by tapping the button.	As Alice types "Bob," the list updates to show close matches to her entry. For longer names, this could allow Alice to find her friend without typing in his entire name.	Alice may want to add Bob as a friend but accidentally hits Borat's "Add" button. We can ask Alice to confirm when she taps to add a friend, but this will increase the number of steps she has to perform.
Find a Friend	Viewing Friend's Location	Now that Alice and Bob are friends, they can view each other's locations on a map. Alice taps on Bob's name on the friends list. Bob's location is selected and a pop-up balloon shows the selected "dot" is Bob. Alice can also view her own location as a blue dot on the map.	Once Alice selects her friend, a map shows Bob's current location. Furthermore, a blue dot shows Alice's current location. Alice is familiar with the blue dot representing her location, since it is also used in the iPhone's Map app.	Depending on the level of zoom, Alice may need to further zoom in or zoom out of the map. There is a tradeoff between presenting a large map including most her friends' locations, or showing a detailed and smaller map.	If Alice "flicks" her finger past the screen, there is danger that the current map view will be lost. It will take her some steps recreate the map screen showing her and Bob's location.
	Viewing Friend's Profile	Alice clicks on the balloon with Bob's name to open Bob's profile. Bob's profile screen displays his email, phone number, and other details.* Alice can directly call or email Bob by selecting the contact info in Bob's profile.	Bob's profile includes his phone number and email appearing in blue with underlines. This provides Alice with an affordance to click these entries.	By selecting Bob on the map view, Alice immediately sees Bob's profile. She can click on Bob's email or phone number to contact Bob.	If Alice accidentally taps Bob's phone number, then she will begin making a call to him. We can ask Alice to confirm the call, although this will require her to make more selections to accomplish her tasks.
	Viewing the Events Screen	Alice sees a list of events she has been invited to or will be attending. Each event is colored green to indicate that she will attend. Other events awaiting her RSVP are colored yellow. Events are arranged so that upcoming events appear first in the list. On the top right, Alice can adjust the time range of events she wishes to display.* 1 day, 3 days, 1 week, or Custom setting. Alice enters the location of the event. Alice taps the Add an Event bar near the bottom of the list.	Alice will find this view similar to the earlier Friends view. However, she may not immediately realize that she can adjust the time range of events by tapping on the button on the top-right.	The Events tab allows Alice to immediately see the events she has been invited to or will be attending. Furthermore, she can add an event with one tap. However, if Alice has a longer list of events, there is no option for her to search for the events by keyword. However, Alice can choose to view only events happening in: 1 day, 3 days, 1 week.	Alice may accidentally select the wrong time-range on the top-right drop-down tab. The drop-down tab is rather small, compared to the other selection boxes on the screen.
Invite friends to an Event	Adding an Event	A New Event page opens allowing Alice to create a new event and invite friends. Alice types in the Event Name She selects the Start and End Time. Alice taps the Search button in the Invite Friends field.	The boxes to enter Event info is brightly colored, providing Alice with an affordance to click on the fields and enter new data.	When adding an event, Alice immediately sees the event info she needs to provide. She can select the time using a drop down box. The drop-down box may require longer time to fill in the information.	Alice can select the time using a drop-down box, which prevents her from typing in a wrong time (e.g. 10:70)
	Inviting Friends	Alice taps the Search text bar at the top of the Invite Friends page. She types in Bob's name. The Friends list updates to show friend names closely matching Alice's entry. Alice views the updated list of people. Next to their names are indicators:* Accepted: Friend has accepted invite.* Pending: Friend has been invited and Alice is waiting for their response.* Invite: Friend has not been invited. You can invite them by clicking this button. 5. Alice invites Bob and Christine by tapping on the invite button next to their names.	Alice is familiar with these interface from the Search Friends screen she used earlier. Furthermore, she recognizes that she can tap on certain users to invite them, just as she has previously tapped to add users as friends.	When Alice types the Search button in the Invite Firends field, she will encounter a list of her friends. Alice can also quickly search for friends she wants to invite.	Similar to the earlier Add Friends function, Alice may find herself accidentally inviting the wrong friend if she mistaps. To prevent this, we can ask Alice to confirm before sending invitations. However, this would slow down the task process for her.
RSVP to an Event	Receiving Event Notifications	Christine, whom Alice invited, received the invite and wishes to change the event to a later time. A pop up note appears on Alice's screen telling her that Christine has proposed a change to the event.* This notification appears even if Alice is not viewing the Discover.Me app.* If Alice has turned off her phone's screen, then the phone will vibrate or sound an alert. The screen will turn on briefly to show the notification.	If Alice encounters this notification when she is not using the Discover.Me app, she may not realize the notification relates to the Discover.Me app. Upon receiving the notification, she may try to look in another app, which has no information related to Discover.Me.	The notification concisely tells Alice about Christine's proposal to change the event. To present the notification concisely, no additional information is shown about the proposed event changes.	There is no safety issue because Alice cannot make any selections during the time the notfication box appears.
	Accepting a Changed Event	Alice sees the updated event info, including the time, location, and other details.* The updated entries are highlighted making it easier for Alice to see Christine's proposed changes. Alice accepts the updated event.	If Alice receives the notification while not using Discover.Me, we can immediately transition to this screen in Discover.Me. This will help Alice immediately realize the previous notification relates to Discover.Me	If the notification immediately transitions to this Discover.Me screen, then Alice may find the action disruptive. She may be using another app and find it difficult to return to the previous app she is using.	If the notification immediately transitions to this Discover.Me screen, then Alice may find the action harmful. For example, she may be in the middle of texting a friend. This might cause her to tap incorrectly and accidentally accept the updated event.
		A pop-up box appears telling Alice that she has accepted the changes and that updated invitations will be sent to all people she originally invited.	Alice is familiar with notifications because they are used in other smartphone apps.	The notification concisely tells Alice about Christine's proposal to change the event. To present the notification concisely, no additional information is shown about the event details which have been changed.	There is no safety issue because Alice cannot make any selections during the time the notfication box appears.
	Viewing Event Status	Alice can scroll down the event list to see the list of friends she has invited. The list of friends indicates whether a person has accepted the invite.	Alice views the event info recorded in the same format which she previously input info into. Therefore, she will know where to find certain fields containing info about the event.	If Alice has invited a lengthy list of friends to the event, then she must scroll further down to view the entire list. We can make the friends text shorter to fit more names in a page. However, doing so makes makes it more difficult for Alice to find and select certain friends on the list.	If Alice selects taps on any of the fields displayed on this page, she will be taken to a subpage. This makes navigation cumbersome, since Alice would have to hit back to return to the Events page.

Child pages

Versions Compared

Old Version 27

New Version 28

Key

Design #3