Final Report & Presentation-Group:Team Good Lookin

From Cs160-sp08

Jump to: navigation, search

Contents

Team Members

  • Jonathan Liu - added icons to Contact List page, handled old status message views (server), worked on handling media rich content through the server, wrote about implementation in the final report
  • Richard Lo - added icons in the Contact List page, increased user feedback for editing entries on status list, handled old status message views (interface), wrote about implementation in the final report
  • Katy Tsai - wrote the final report (including Design Evolution and Final Interface description), created PowerPoint presentation, designed icons and other visual elements in interface
  • Jeffrey Wang - implemented animated page transitions, increased user feedback by creating more confirmations and feedback displays, wrote about implementation in the final report

Problem and Solution Overview

With the wave of social networking sites and the Internet as a dominant presence in our lives, there is, more than ever, a greater need to stay constantly connected and available. Our application achieves this by using the most accessible and personal tool available, our cell phones, to give people instant access to their social networks. Ultimately, our mobile application will change the way we use our mobile phones, allowing users to maximize their time by calling only those who are available without being intrusive to those who are busy. The application gives users complete control over their personal status by keeping friends updated while ensuring privacy when needed. By combining key trends in Internet communication with the convenience and accessibility of the mobile phone, users will remain connected, even on the go.

Target User Group

The technology is aimed towards the students and young adults of the 18-25 year old market, a group that has grown up in world immersed within the Internet and the social networking trend and needs to stay connected with their social worlds despite their busy schedules. These individuals are constantly meeting up with friends and different social circles and want to be able to check up on their friends. While they are always on the go with somewhere to be and someone to see, they want to stay connected to all their networks, wherever they are. In fact, college students have already shown their interest in similar applications such as Facebook and instant messaging; they are used to being connected to the world at the click of a button, and Statter makes this even easier for them. 18-25 year olds are always out, whether it’s meeting up with a campus organization or landing the perfect internship. With their environments constantly changing, Statter is the perfect application for 18-25 year olds to maintain their friendships and relationships while staying busy and involved.

Tasks

  1. Task 1 (Easy): Checking a contact’s text/picture/audio/video status
    • Description: Checking a contact’s status simply involves scrolling through one’s contact list and viewing each contact’s specific status message—a text, picture, audio, or video status message.
    • Purpose: The task allows users to quickly and easily browse through his or her list of contacts to see what people are up to, check their availability without being intrusive, and stay connected and informed with a tool that is direct and easily accessible.
    • Interaction: Within the main contact list, different icons indicate the type of status message the contact has up. Ways to check the contact’s status message from the contact list:
    1. Go to the Menu options, select “View Contact”, then select “View Status” to reach the contact’s status page
    2. Click the middle button or right button to shortcut to highlighted contact’s status page

  2. Task 2 (Medium): Accessing and deleting status messages in one’s personal history
    • Description: The application enables users to manage, delete, and edit past status messages.
    • Purpose: The task gives users control over what others see. The application saves the past 5 status messages in the user’s history, which the user can then go in to view, edit, or delete. This allows the user to edit a message without resetting the entire message, share more than one message at a time, or delete old or irrelevant messages.
    • Interaction: To edit one’s history, select "Your Profile” in the main Contact List to view both current and past status messages. To view and edit a message, simply select and press the “View” button. To delete, simply press the “Delete” button.

  3. Task 3 (Hard): Setting one’s personal text/picture/audio/video status
    • Description: The application also allows an individual to set his or her own status message, also in the form of text, picture, audio, or video. While this task involves more effort from the user, requiring one’s own content and personalized settings, the user can control personal availability as well as what is seen by others.
    • Purpose: The task allows users to express themselves and share moments of their lives with others. Even if users are unavailable, they can still remain accessible and keep people informed about what they are doing.
    • Interaction: While the prototype offers a standardized method to update one’s personal status, various shortcuts are also available to simplify the process for those who often update their statuses.
    1. Standard Process: From the main Contacts List, select “Your Profile” to access one’s personal status page. Within the Current Status section, highlight and select “Set New Status” to set a Text/Picture/Audio/Video status message.
    2. Instant Access: Because setting a personal status message is a key component of the Statter application, we wanted to make the process as easy and accessible as possible. Thus, from any page within the application, one can simply go to the Menu options to select “Set New Status”.

Design Evolution

Evolution from Sketches, Lo-Fi, and Pilot Study

  • Overall, the design has been simplified much more. We had a lot of ideas for features but we had to cut down the ones that were too difficult or unnecessary to implement
Image:evolution2.jpg
  • Icons are more visually appealing now, and we have cut down confusing by taking out the red/green colors
Image:evolution3.jpg
  • Animated transitions between pages and faded pages make certain usability functions more clear and obvious to the user
  • Certain features have been taken out: expanded view, presets, setting availability, temporary voicemail, ability to leave a comment
  • Personal profile page has been adjusted to match the typical status page layout, but features extra functionality
Image:evolution4.jpg
  • Tried to create clearer distinctions between sections that looked similar (e.g. separating current status from a contact’s history)
  • Made sure the core tasks were as easy to complete as possible (moved the contact info page into the menu options so there would be no confusion getting to the status pages)
  • The addition of user feedback pop-ups and notifications ensure that users understand exactly what’s going on when an action is carried out
  • Increased action flow: the user can now set a new status message from any page and move back and forth from page to page more easily

Major UI Changes

Making the process for each task faster by reducing number of keys pressed and number of intermediary pages:

  • Cut out the Contact Info page to get to Status page more quickly
  • Added more shortcuts (“Set New Status” menu option) to set a status message more quickly
Image:new2.jpg Image:new6.jpg
From initial iterations, people expressed that while certain processes were very clear and intuitive, they cared a lot about how fast they can set a message or view a message. Many users expressed that if it took too many steps to get to a certain point, it would greatly affect how much they used the application. With this in mind, it was important for us to find ways to really reduce the steps required for the user to set and view status messages.

Adding user feedback through confirmation buttons and loading messages:

  • “Confirm” button when setting a message
  • “Loading…” pop-ups when loading an image/audio/video file.
Image:new3.jpg Image:new9.jpg Image:new10.jpg
In general, this was a component that was greatly overlooked during the first phases of our application. Because it didn’t directly relate to the main functionality of the application, we had not thought to include the feedback we thought would be intuitive for the user. After testing it with a few users, however, we realized that they users needed to see confirmations that they were doing the right thing, especially when some tasks took longer to load than others.

Cutting down the use of the Menu options function:

From our observations, most users, particularly those within our target market, are not used to using the Menu option to complete core functionalities of an application. They generally see it as a tool that allows them to change certain settings or access item specific options. Thus, we made sure not to rely too heavily on the Menu button. Instead, we used the Menu option as an alternative method of completing various actions and accessing tools that were not a main focus of the Statter application.

Adding page transitions:

While a very simple feature of the application, animated page transitions have made features that were unclear more obvious to the user. A major issue of our original usability studies was that people didn’t notice the shortcut to the status page. Animated page transitions add a subtle visual cue, telling users that the right and left d-pad buttons correlate to the right and left sliding motion of the application pages.

Editing the layout of a contact’s status page:

This change significantly impacted the presentation of the Statter application. We had never considered this necessary until after the Interactive prototype when we realized that people didn’t notice a distinction between a user’s current status message and his old status messages. The page also looked cluttered and messy, which significantly affected the user experience. After spending some time rethinking the design of the page and finding different ways to divide and organize the information, we found the newest iteration of the Statter application was much more appealing and intuitive.
Image:evolution1.jpg

Cutting out excess information/functionality to reduce confusion:

  • Green/red icons for availability/unavailability
  • Cutting out shortcut access to a contact’s information page
In an effort to provide more information and more functionality to users, we ended up going overboard and confusing users with our overly complicated features. For instance, we had initially thought that by making the icons shades of green or red, we could provide more information to users about a person’s status. Instead of providing more information, the colored icons only confused users—they all came up with different meanings behind the colored icons that were not consistent with what we had intended. We also spent a significant amount of time figuring out ways for users to go to both a contact’s info page and a contact’s status page, all with the click of a button. In order to complement the functionality, we really tried to find a way to make it obvious to users. After all that, however, we realized that our idea was just too complicated. Users were confused and just didn’t understand the visual cues. As a result, we ended up simplifying the interface completing, allowing access to the contact info page only from the Statter menu options.

Evaluation Techniques

Of all the various usability tests we conducted, the Low-Fidelity Testing proved most valuable in contributing to our prototype’s usability. During this evaluation stage, we got very useful feedback from users, telling us what they liked and didn’t like about our application, as well as what features were important to them. For instance, we learned that it was important for our users to be able to view a status and set a new status message as quickly and easy as possible. Also, the original design did not have any user feedback. From them we realized how important it was to add something as simple as a confirmation button, leading to an overall increase in user feedback throughout the final interface.

Low-Fidelity Testing also allowed us to gather feedback on what was confusing about the application, especially things we assumed were pretty obvious. One of the main examples was when people misunderstood the meaning of green and red tinted icons. We thought it was a clever way for us to tell users the type of status message and a contact’s availability all at once. Users, however, thought it meant that the message capability was either available or unavailable based on the color of the icon. Another major issue was the left and right button page transitions that we wanted to demonstrate. Users did not perceive any of the original visual clues we had included. As a result, users were unable to separate the difference between the contact info page and the contact status page. Users were unaware of the subtleties we tried to include and were instead confused by the interface.

In general, the low-fidelity stage was a great time for us to get a sense of how users would be using the Statter application within their daily lives. We got a sense of which features they liked best, and we were even able to incorporate a lot of the suggestions they provided. We got a broad scope of information including different ideas that would make carrying out various tasks faster and easier. We found out how much people would enjoy having a favorites list to prioritize their contacts, and we even received suggestions as to how to market and package our final product. Through this evaluation technique, we were able to make pivotal interface changes early on in the process, saving us a significant amount of time later on.

Final Interface

Final UI Design

Functionality

  • View a contact’s current status message – text, audio, video, or image
  • View a contact’s history of old status messages – text, audio, video, or image
  • View old status messages in personal history
  • Delete old status messages in personal history
  • View current status message in personal profile
  • Delete current status message in personal profile
  • Set a text status message
  • Set a audio status message with text caption
  • Set a picture status message with text caption
  • Set a video status message with text caption
  • View a contact’s information page
  • Add a contact to the Statter contact list
  • Edit a contact’s contact information

Using the Functionality

  • Viewing status messages: This includes viewing a contact’s current status message and a contact’s history. In order to do this, the user can scroll through the main contact list page, select a contact whose status the user wants to view, and then press either the right or the center d-pad button. This would take the user to the contact’s Status page which displays both the contact’s current status message and the contact’s old status messages in the “History” section. Within the Status page, users also have the ability to view each status message in more detail by selecting the “View” button that corresponds to each status message. Pressing the left button or the back button will eventually take the user back to the main contact list.
Image:new7.jpg Image:new8.jpg


  • Managing History: This function encompasses viewing one’s personal status messages, including both the current and past ones, as well as deleting one’s personal history. This can be done by selecting “Your Profile” in the main contact list page. Pressing either the right or the center button will take the user to his or her personal Status page. The format of Your Profile” looks similar to that of the typical Status page with the addition of more personal functionality. The personal status page allows the user to view current and past status messages in detail as well as delete unwanted status messages by pressing the “delete” button.
Image:new1.jpg Image:new4.jpg Image:new9.jpg Image:new7.jpg


  • Setting Status Messages: From the user’s personal Status Page, the user can also select “set new status” to post a new status message. This function can also be accessed through the Menu options on any page that doesn’t directly correlate with setting a new message. This provides users instant access from anywhere within the application.
Image:new2.jpg Image:new4.jpg Image:new6.jpg
Once the user has selected this function, the user can then choose to set a text, audio, picture, or video status message. Any of these four options will take the user to another page that allows the user to create a new text status message, or add captions to pictures, videos, or audio files the user has taken, recorded, or selected as their new status message.
Image:new14.jpg Image:new15.jpg Image:new16.jpg


  • Managing Contact Information: Because our original intent was for the Statter application to be embedded into each user’s contact list, the user can manage their contacts by viewing, adding, editing, or deleting contacts and their contact information. From the main contact list page, the user can use the menu options to access a contact’s “Contact Info”, “Add Contact”, or “Delete Contact”. Once the user is on the page view of the contact’s contact info, the user can then use the Menu option to update the contact’s contact information.
Image:new13.jpg Image:new12.jpg Image:new11.jpg

Implementation

Server

We used a web server as a centralized hub to store every user's status. Therefore, every time a user requested to view a host of statuses or set their own status, the application makes a request to the server. The server responds with XML which the application then parses to display the pertinent data. The application can read statuses of a group of phone numbers, read histories from a certain phone number, set a status for a certain phone number, and delete a specific item of history in a phone number.

The server stores all statuses in MySQL tables and the server analyzes to HTTP POST requests in PHP.

Setting a Message

Users are allowed to set their own statuses. When choosing to set a new message, the user will be presented a ListView of choices. The four types of status messages are text, audio, picture, and video. Furthermore, if audio, picture or video is chosen, the user is again presented another ListView of whether to choose from a library or to record on the spot. Media files are currently stored in the res folder. A GridView is used to display the pictures, while a ListView will display the audio. The last view shows you a preview of the media file as well as text. We also support the playback of audio files. When user click the "play" button, the audio file is loaded into the MediaPlayer class, and called through the play() function. Similarly, the playback can be stopped through the stop() function.

When setting a message, a request is sent to the centralized web server, through the class TalkToWebServer. The function setStatus takes the phone number, status type and status data and makes an HTTP POST request. The program then redirects to the home page, which is the StatusList view.

Status List

The status list is the main interface of the program; all other functions branch off from this view. The list is a standard ListView that draws its information from a local SqLite database. However, since we want to keep the list up-to-date with the server, every time the StatusList view is refreshed, a request is first made to the server and the server returns the most current information of the status contacts. The local database is then updated to mirror the current information on the server. Finally, the local database is queried to return a cursor, which is then fed into the ListView by a SimpleCursorAdapter.

We had trouble figuring out how to bind information to specific views in the ListView. Text was easy enough, but having specific icons (ImageViews) for each row in a ListView stumped us for quite a while. This was unfortunately not built into Android. We tried many different things, including using different List Adapters and writing our own Adapter. Finally we posted the problem on Android Google Groups and were told about the ViewBinder function, which provided a very simple solution to the problem.

The detailed Status Page is called using a shortcut key from the StatusList. When this view is called, the server is once again queried, not only for the most current message and type of message, but also for the 5 most recent history messages. Depending on how many history messages are retrieved (could be less than 5), the Status Page hides unnecessary views and will show anywhere from 0 to 5 history messages on the bottom of the page. Also, if the Status Page being viewed is your own (which is signaled by a flag passed by StatusList), the Status Page will un-hide delete button views for each entry, allowing the user to easily delete any messages. In the history statuses contain a picture, audio, or video, the media can be viewed by selecting each history item.

View sliding

Another unique feature is the sliding animation between the status list and the individual status lists. This is intuitive because users are allowed to press right or left as short cuts to switch between these two screens. To support this, we import the Animation class included in andriod. Before starting the next activity, we load the entire current view into the animation translator, set the configurations, and call startAnimation(). When the next activity starts, we begin by loading the view into the Animation class and perform the same slide on the second activity.


What was left Unimplemented

In general we had a lot of ideas that we really liked, but given the time and the focus of our application, we had to leave some out and prioritize the usability of Statter’s core features. Given our main tasks, we wanted to make sure that setting a status, viewing a contact’s status, and managing personal history could be completed as easily as possible using the given interface. However, if we were to continue with the project or see a real version implemented, the following features could really complement the existing application. These features could potentially make the application a truly unique program that would significantly affect how users use their cell phones and our hope is to see these incorporated into everyone’s cell phones one day.

  • Favorites List – we have seen that people want to be able to customize on their cell phones, whether it is features or the people they talk to. While we recognized this as an important feature, we decided to leave it out in our final implementation because it didn’t help convey how Statter worked. A favorites list would definitely be a nice added bonus, but in terms of how significant it was in the application, we placed it at a lower priority.
  • Expanded View – The expanded view feature would also be a nice enhancement to the Statter application, but given the difficulty of the feature, it seemed unnecessary in getting the main point of the application across. Also, users seemed to be split on whether the expanded view would enhance the application or burden the process of scrolling through the list. What we envision for the future, however, is to incorporate the expanded view feature into a favorites contact list, enabling users to view more information for the people that matter most.
  • Temporary Voicemail – This was one of our original ideas, which we really liked, but as we came up with more and more ideas, the focus of the project continued to shift. Given our final project idea, temporary voicemail is no longer the primary focus of the project. However, we really feel that this would be a great feature to eventually add to the application. From talking to users, this would be a feature that several people would enjoy and use. Several of them mentioned they would rarely set an audio status message, but after we shared our idea of a temporary voicemail, they quickly changed their mind.
  • Presets – The presets feature was primarily intended for convenience. Although complementary to the application’s functions, it was unnecessary in demonstrating the main tasks of the application. We decided to prioritize our time by making the existing features more intuitive rather than adding the additional presets option.
  • Leave a Comment – While our eventual goal is to make the application as interactive as possible, the original “Leave a Comment” option confused users. There were too many features on the status page and as a result, users thought old status messages in the contact’s history were comments that others had left. We decided to choose the history feature as the priority feature and to save comments as a future enhancement.

Wizard of Oz Techniques

  • Playing a video – Currently, Statter only displays an image as a video file. We were unable to make the application actually play a video, so we can only Wizard of Oz this step as of now.
  • Setting an actual image, video, or audio file as a status message – while each will show up as the status when set, we only have certain files available that would work on the application. Statter also cannot record any video or audio files given the limitations of the Android appliacation.


Appendix

PowerPoint Presentation: Image:TGL-FinalPPT.zip
Link to Code: Code
Poster: Image:TGL-PosterSlide.zip



[add comment]
Personal tools