LoFi-Group:4Corners
From CS160 User Interfaces Fa06
Contents |
Team Members and Role
- Chen:
- Observer
- drafted consent form
- analyzing the observations
- conducted user testing
- worked on the wiki write-up
- Maksim:
- Observer
- creating Lo-fi prototype
- analyzing the observations
- conducted user testing
- worked on the wiki write-up
- Ramy:
- Human-Computer
- creating Lo-fi prototype
- finalized mission statement
- conducted user testing
- worked on the wiki write-up
- proofread the entire write-up
- Tabassum:
- Facilitator
- creating Lo-fi prototype
- created the demo script before the test
- conducted user testing
- upload pictures
- worked on the wiki write-up
Introduction and Mission Statement
Our project is an Anoto-enhanced blogging application. We are targeting personal bloggers who wish to share information about their lives and experiences with friends. We have found several such people who have over the years drastically reduced their blogging frequency. The most common reason given is not lack of ideas but a major convenience issue: by the time they get home, they have forgotten what they were thinking about during the day and cannot be bothered typing it up. Using Anoto paper would rectify this because of its inherent portability -- users can write down their thoughts whenever the mood strikes them, and then upload them once they get home.
Mission Statement: Our mission statement is hence to extend the usability and convenience of blogging for casual users, using an Anoto-driven, intuitive interface.
Protoype
The simplest way to describe our prototype is by going through our demo and chosen tasks and explaining the constituent lo-fi components for each. Note: we used cue cards to tell the users what was expected of them for each task. See the appendix for these.
Demo
Seen here are the four main interface screens, each of which is accessible from a simple tab menu at the top of the screen. These pictures show the default appearance of each screen when nothing is happening, i.e. the user has just clicked on a tab.
Your Blog: This is what other people see when looking at your blog. In other words, published blog entries appear here, sorted by date with the most recently published entries on top. Because entries are handwritten on Anoto paper, our system does not discriminate between writing and drawing. Each entry has small comments and edit buttons next to it, which allow you to write/view entry comments and edit the entry (see task 1), respectively.
Drafts: This tab shows all unpublished, saved drafts so far, sorted by date saved. As with published entries, there is an edit button next to each entry. Additionally, there is a publish button that uploads the draft to the blogging service for public viewing.
Friends: This is where you can see your friends' blogs. By default, all recent blog entries (for all your friends) are shown by order of date published. On the left is a menu where individual friends can be chosen; all that friend's entries will subsequently be shown on the right. This friends menu can be managed, to add, remove or rearrange friends.
Settings: This is where the user can manage his account, change the default appearance of his blog, edit security settings and upload a user picture his friends can identify him by (as shown in the friends screen).
Miscellaneous
These two screens show miscellaneous components that are used throughout the rest of the tasks.
Anoto interface: This is our paper UI. The user writes on the paper and ticks either the save as draft or publish box. Should he choose to publish, our program will take care of all the details so that he does not have to look at a screen. If the user edits the physical paper, the changes are automatically reflected in the GUI the next time the pen syncs up with the computer.
Odds and Ends: The top row of this picture shows assorted context menus, in order from left to right: the right click menu when editing an entry, the choose background color menu, the choose ink color menu, and the choose stroke width menu. These will offer more choices in the final program. The bottom row shows dog and cat pictures we used to illustrate our image embedding feature.
Task 1: Creating and modifying a blog entry
We allowed the user to write on our paper interface, then folded it up and placed in the empty first entry of screen 1. Clicking the "edit" button for that entry then brought up screen 2, where the user could edit the text (on the folded paper, which we moved between screens) by selecting it and right clicking (which brought up the right click menu shown in miscellaneous). We dealt with any possible user choice in creative ways, e.g. by quickly writing out copied text on little pieces of paper and pasting them wherever the user wished. Once the user was satisfied, pressing the publish button brought him to screen 3. If the user chose to publish the entry instead of saving it as a draft from the paper UI, screen 3 was the first screen shown instead, and the user could then edit the entry as normal; this gave us some graceful error recovery in one of our tests.
Task 2: Changing default appearance of the entire blog
We first showed the user screen 1, which represented a typical user blog page. Clicking on settings and then Change Default Appearance brought the user to screen 2 and then screen 3, where he could select background color or ink color (stroke width was not implemented for the purposes of this task). Changing ink color would result in a different piece of paper being placed in the preview pane (representing the first blog entry of screen 1 written in the desired color), and subsequently clicking on save would bring the user back to screen 1, except with all blog entries written in the desired color (we had prepared these variants beforehand, as in screen 4). Changing background color was accomplished with simple colored transparencies.
Task 3: Embedding an image
These screens show the image embedding process. The user wrote something on the anoto paper and drew an image hotspot, whereupon the computer took the paper and added click here to pick image inside the hotspot (screen 1). Clicking on this in the GUI allowed the user to pick an image to embed into the writing (screens 2-4), using the ubiquitous browsing popup menu.
Method
Participants
- Participant 1: The first particpant is a 4th year Berkeley student majoring in Electrical Engineering and Computer Science. He uses a Xanga blog (xanga.com), but only updates it once a month on average. He often thinks of great blog entry ideas when he is not near a computer, and many times these ideas are forgotten before he gets a chance to put them into an entry on his blog. Also, his busy schedule does not allow him to be at home for much of the day, so he is interested in carrying some sort of device that allows him to record his thoughts wherever he goes.
- Participant 2: The second participant is a 4th year UC Berkeley student. She was selected because she is a very regular blogger. She posts blog entries to her personal blog almost every week. She is very interested in posting hand-drawn images to her blog which is not possible with her current blogging service. She is also interested in posting blog entries in Chinese.
- Participant 3: The third participant is an international Egyptian student interning in San Francisco for the semester. She was selected because she used to be a regular blogger but has ceased all blogging activity, citing inconvenience and the inability to hold interesting thoughts throughout her busy workday until she gets the chance to write them down at home. She is also interested in writing in Arabic on her blog wherever possible.
Environment
All the three tests were carried out in Soda Hall. First two tests were done in 511 Soda and the third in the CSUA lounge on the 3rd floor. Both these sites are fully equipped with tables and chairs that were used to set up the tests. The low-fidelity prototypes of the demo and the three tasks were laid face down on a big table in front of the computer. The participants were seated on a chair across the computer. The facilitator sat next to the participant. The two observers took different positions in order to have an unobstructed view of both the participants and the interface on the table. Participants were given a pen which functioned as a mouse. The atmosphere was calm and the climate was comfortable.
Tasks
We wrote the goal of each of the task on index cards and presented them to the participants before beginning each task (see Appendix for these cards). The following are the three tasks that we conducted for the usability test of our low-fidelity prototype:
- Easy Task - Create and Modify a blog entry
The goal of this task was to create a blog entry on anoto paper and later modify the same entry on the provided user interface. The following steps were expected of the user in order to accomplish the goal of this task:
1. write a blog entry on anoto paper and check save as draft box.
2. dock the pen in the cradle.
3. fire up 4Corners application; a window will appear displaying the drafts tab which will have the most recent entry on the top of the page with date stamp.
4. click on EDIT button
5. select text to modify and right click; a drop down will appear with a number of options
6. choose one of the options; the selected text will be modified accordingly
7. click PUBLISH or SAVE
- Moderate Task - Change the default appearance of the entire blog
The goal of this task was to change the default appearance of the entire blog such as Background color, ink color and stroke width. Participants were provided with the front page of 4Corners application. The following steps were expected of the user in order to accomplish the goal of this task:
1. hit the SETTINGS tab; a screen will appear with four options: Manage Account, Change Default Appearances, Security Settings and Upload user pics
2. select the "Change Defualt Appearances" option; a screen will appear with the following options: Background Color, Ink Color and Stroke Width. This screen will also have a preview box where the most recent blog entry will be displayed. The purpose of this preview box is to provide the user with a instant feedback on the options being selected. The blog entry in the preview box will change based on the option selected by the user.
3. select one of the three options; as mentioned earlier the appearance of the blog entry in the preview box will change.
4. click on SAVE; the user will be taken to the "YOUR BLOG" page. The appearance of this page has been updated in accordance with the selections made my the user.
- Difficult Task - Embed an image in a blog entry
The goal of this task was to create a blog entry with the hotspot gesture and later add an image to this blog entry using 4Corners application. The participants were provided with the neccessary information for creating a hotspot on anoto paper. The following steps were expected of the user in order to accomplish the goal of this task:
1. write a blog entry and draw the hotspot gesture on the anoto paper using the digital pen.
2. dock the pen.
3. fire up 4Corners application; a window will appear displaying the drafts tab which will have the most recent entry on the top of the page with date stamp; the place where hotspot gesture was made will have the following text inside it: "Click here to insert an image"
4. click on the box; a pop-up to select image will appear.
5. select the BROWSE tab; a second pop-up will appear which will ask the user to select a file to open.
6. select an image file and click on the OPEN tab; the second pop-up will disappear.
7. click on the OK tab to save the selection; the selected image will appear in place of the hotspot gesture.
8. select the PUBLISH button.
Procedure
For the purpose of conducting the tests effectively and efficiently, we assigned specific tasks to each of the team members. Tabassum was the facilitator; Ramy was the computer; Maksim and Chen were the observers. All of us acted as greeters. We decided on keeping two observers in order to make sure that we get an exhaustive description of the tests. We decided against shuffling the roles and each one of team members gained expertise in the task assigned to him/her. This was done to avoid confusion and produce an efficient execution of the tests. All three tests were scheduled on the same day. On the day of the tests, we practiced the steps of the test with two of our friends playing participants.
Appointments were scheduled with the participants such that there was no time conflict between the appointments of the three participants. This was done to give uninterrupted and undivided attention to the participants, to protect the identity of the participants, and to avoid information leak.
Participants were cordially greeted by all the team members and were provided with a comfortable chair to sit on. We had light conversation with each of the paricipants to make them feel comfortable before beginning the tests. The facilitator presented the consent form to the participant and asked to read carefully and understand the text on the consent form. The participant was asked to place his/her signature on the space provided if he/she agree to participate in the usability test.
Next the facilitator explained the context of the test in the order mentioned below:
1. what is digital pen and paper technology and how does it work?
2. why and how are we involved in making an applicaiton for this technology?
3. what is the main idea behind our project?
The participants were asked to act naturally and were assured that they were not the ones being tested and none of the answers given by the participants would be considered incorrect. Furthermore, the facilitator made it clear that this was a usability test of our system. The main idea behind conducting such tests is to measure how well people can use our application for the intended purpose .
A DEMO was performed which showed each of the major user interfaces of 4Corners blogging application to the participants. Participants were encouraged to think aloud and state what comes to their mind when they look at each of the UIs. Furthermore, the facilitator asked questions whenever the participants seemed a little confused or stopped following the thinking aloud protocol.
The goal of each of the three tasks was written on separate index cards in bold text (see Appendix). Scenarios were created wherein the participant would perform the task naturally. At the beginning of each task the participants were presented with the corresponding index card and the facilitator described the corresponding scenario. Additional information was given to the participants for the third task i.e. embedding image in a blog entry. This information was also written on an index card in bold text. Participants were asked to think aloud. No reactions, facial or audible, were made by the team members while the tests were being performed.
At the end of the tests, the facilitator asked the participants regarding the choices that they made during the tests. The participants were also requested to give their overall opinion about the system and to suggest modifications to make the system more user friendly.
Test Measures
For each task in each session, we used several benchmarks to help us identify positive points of our design and possible areas of improvement to our design:
- Time on the task - We measured the time it took for each participant to complete each of the three tasks. Prior to the user testing, we thought of our expectations for times to complete each task by a casual blogger. The recorded times from the three sessions provided data that we could compare to our expectations and identify which task caused the user to be less productive than we expected.
- Number of unexpected behaviors - For each task in all three sessions, we noted the number of unexpected behaviors that the participants made (which represented areas we could improve on in our system). Prior to the user testing, we thought of a sequence of actions for each task that seemed the most logical for us to complete the particular task. An unexpected behavior occured whenever a participant tried to use a feature/option that did not directly help him/her achieve the specified task, or whenever they performed an action/sequence of actions that differed from our expectations. Whenever an unexpected behavior occured, we noted it in our observations, and added it to the participant's count for the particular task.
- Emotional Response - The quantitative statistics (task completion time, number of unexpected behaviors) only tell part of the story in regard to which areas of the desing need improvement; they give no indication of why a particular task took too long or why a user made so many errors while trying to accomplish it. For this reason, any interesting emotional responses made by the participants were noted, and we kept an eye out for any signs of frustration or uncertainty.
- The "Big Picture" - Lastly, we sought to collect as much information about each participant's actions as possible. The exact sequences of actions that each participant took to complete each task were recorded. All questions or requests for clarification from the participant were also written down. Any recommendations or comments about how the participant envisioned the interface to function were recorded. Finally, any observations regarding mistakes or misconceptions made by the user were recorded.
Results
Demo
All three subjects had little trouble moving through our demo as they correctly identified the overall interface including the date of entry, body entry itself, and the clickable comment links. The "drafts" tab was straightforward and easy to understand for all as the basic functionality of private not-yet-published entries was accurately conveyed to our user group. These entries would be stored and have the option to either be edited or published at a later time. Problems arose under the "friends" tab as each user was confused in his or her own way: Subject A was puzzled as to what links were clickable on the page but did get the main point across that it allowed him to view all the recent updates for all his friends in one location, Subject B had similar issues as to clickable links and also pointed out that the "friends" tab is unclear about what lies underneath in terms of functionality if the user didn't click on it to see, Subject C thought that the friends list on the left side represented all the people whom were registered and approved as a friend (this is true although not necessarily what we were looking for under this tab). Lastly, the "settings" tab went pretty smooth as all users were able to identify this tab to be where account settings could be changed ranging from colors and appearances to security settings.
Task 1: Creating and Modifying a Blog Entry
Overall our index card instructions were clear enough for the users to follow for this "easy" task and thus problems were few and far between. Despite clear instructions, our users still hesistated before making their first choices on the blog interface and were unsure of their selections. We are reasoning that this is because it is the first task and its reasonable for the user to feel a tad bit unsteady when making their first decisions and will get better once more accustomed to the interface.
Subject A directly published the entry he wrote on Anoto paper rather than saving it as a draft. Subsequently to keep to the directions, he clicked on the edit link to modify his recent entry. He decided to select all of his entry and then deleted it before questioning how to add text (the answer would be the keyboard since the pen is already docked and transferring data). He keyed in some text before saving the entry and finishing up the task.
Subject B was delighted to be tested and quickly generated a lengthy blog entry before publishing it. She then edited the entry by changing the color of a selected word to green and then changed the stroke order to the boldest option on a selected happy face. She was puzzled about what the "insert" function does but reasoned that a keyboard input was necessary. All changes were published and she completed the first task.
Subject C had the dilemma of directly publishing her entry or to save it as a draft and then edit it there. She chose to save it as a draft and then modified her text to be red in color before publishing the entry and completing the task.
| Participant A | Participant B | Participant C | |
|---|---|---|---|
| Task Completion Time | 5 min | 4 min | 5 min |
| # of Unexpected Behaviors | 2 | 0 | 1 |
Task 2: Changing Default Appearance
This "medium" task turned out to be simple and quick for the most part despite a misinterpretation of index card instructions exhibited by Subject A.
Subject A started out wrong by editing one entry rather than the default appearance of the entire blog interface through the settings tab. This led us to think that our directions on the index card weren't clear enough and thus resulted in the incorrect selection. However, this was an easy explanation and once clarified background color was successfully changed to green and resulting settings saved. (Note: We changed our cue card for this task between tests as a result, to the one shown in the Appendix).
Subject B breezed through this task by following the default appearance link and then changing the background color to red before saving her changes.
Subject C also had little trouble as she selected the settings tab and then clicked on the default appearance link to make the background color red before saving the changes.
| Participant A | Participant B | Participant C | |
|---|---|---|---|
| Task Completion Time | 3 min | 1 min | 1.5 min |
| # of Unexpected Behaviors | 1 | 0 | 0 |
Task 3: Embedding An Image
This "hard" task ended up being successful but we noted various possible methods of improving it ranging from the vocabulary we used to describe it to the clarity of the instructions. Being the most complex task, this one had 2 index cards for description: one depicting the task name just like the other two tasks but an additional one with instructions on how to draw the frame to box the region where the desired picture would be embedded. This was changed after the first test to just the one cue card shown in the Appendix, which led to smoother testing.
Subject A got off on the wrong foot as he draw an actual sketch on Anoto paper rather than the frame to box the area where an image would go. He admittingly didn't follow the directions on the second index card and agreed that they were clear enough to be understood. As soon as the correct procedure was explained to him, he understood what to do and consequently selected the existing cat image "cat.jpg" to be embedded into his blog entry.
Subject B decided to test the waters by going on unexplored territory with something we all didn't think of. She followed the directions by blogging an entry before drawing the frame to specify the area where an existing image was to be embedded. The remarkable facet comes from the frame residing inside a heart which she drew around it for decoration purposes and to represent her love for whatever the image would be. She selected the dog image "dog.jpg" and successfully published her entry.
Subject C commented that she has never heard of the "embed" term and therefore had some difficulty in grasping the task at the beginning. She drew the correct corners on the Anoto paper to designate the area where an image would get inserted. She didn't draw the box very big so that gave us the reasoning that she may have not grasped the fact that the corners specify the size of the image to be inserted. Regardless, she followed through the remaining steps correctly and selected the cat image "cat.jpg" before publishing her entry.
| Participant A | Participant B | Participant C | |
|---|---|---|---|
| Task Completion Time | 5 min | 3 min | 4 min |
| # of Unexpected Behaviors | 2 | 0 | 2 |
Discussion
Lessons
Several items came to our attention as a result of the experiment. All three participants commented that the user interface was for the most part easy to use, but there are still some imperfections in our design that need to be resolved. Technical background and general values were the biggest determinants of how each participant completed the task. Participants A and B had strong technical backgrounds and could easily understand the term "embed" for example, while participant C had never heard such a term before. As an example of a value, participant B pointed out that after she writes an entry, she doesn't expect to edit immediately and would rather just correct her written mistakes on the Anoto paper. Taking into account the participants' values and background, we learned the following about our design:
- The Friends tab content must be made clearer: Our application has four tabs, but the tab that caused the most confusion among the participants was the "Friends" tab. The caption of the tab seemed to confuse the participants with regard to what functionality was on this tab. The list of friends that is located on the left side of the "Friends" screen also caused confusion in that the list items did not give a clear indication that they were clickable. Although all three participants understood the purpose of the "Friends" tab after a little bit of time, they indicated that such minor details as hints of clickable entries would greatly improve usability.
- Task 2 was the easiest task for the participants: This task involved editing the global settings of the blog. Once the participants understood that they needed to edit the global settings (vs properties of one entry), they were able to accomplish this task quicker than the other two tasks. It was interesting to note that all three changed just the background color of the blog and did not edit properties of the text (stroke width, stroke color).
- Task 3 was easy after performing it once: This task involved embedding a digital image into the hand-drawn entry via the ButterflyNet photo insertion method. Although participant B quickly was able to accomplish this task, participants A and C were a little lost initially with this insertion method. Participant A did not understand the task at first and was confused about when he would have the opportunity to select an image for insertion. Meanwhile, participant C was confused with the terminology of the task - she had not heard the word "embed" before. However, after performing this task once, all three participants understood the reasoning behind all the steps for inserting the image. To make this task easier, directions for this task could be put in the application.
- Some captions seemed ambigous to the participants: Some of the ambigous captions were:
- "Friends" on the "Friends" tab
- "embed image"
- "upload user pictures", an option in the "Settings" tab
- "Manage Account" vs "Security Settings" - ambigous regarding which settings are in which option
Suggested Changes
The results will change the design of our interface in the following way (Note: in parantheses are the participants whose actions or answers suggested the particular change) :
- Add underlines under links in the friends list to make it seem that they are clickable (A, B, C)
- change name of the "Friends" tab to something more descriptive (A, B, C)
- Provide a description at the top of the Friends screen after clicking on the tab (A, B, C)
- Add keyboard input for the insert function (A, B)
- Differentiate between the "Manage Account" option in Settings tab and the "Security Settings" option in the Settings tab by providing descriptions of the settings available under the two options. (B)
- Add buttons for common tasks above editing frame in the editing mode (B)
- Add the ability to add hyperlinks to the blog entries to link to the Internet (B)
- Change dates of entries that the blogger has saved as a draft in the past to the date that the blogger publishes this entry (C)
- Change the name of "Upload User Pictures" option to something more descriptive like "Upload blog profile picture" (C)
- Make it obvious that the image placeholder needs to be clicked in order to insert an image into a handwritten entry (C)
- Change the name of task 3 from "embed image into entry" to "insert picture" (C)
Weaknesses of the Experiment
Although the experiment provided many pieces of useful data to suggest improvement to our design, there were several areas of the interface that the participants did not interact with and thus no information was revealed about these elements:
- For task 2, all three participants changed the background color of the blog only, so they did not try to change any of the text properties - stroke color and stroke thickness.
- In the "Settings" tab, the following options were not used: "Manage Account", "Security Settings", "Upload User Picture"
- The "Comments" feature was not used by the participants
- The participants did not interact with Friends tab, although they thought that it provided useful features
Appendix
Consent Form
4Corners CS160 User Interface Project Consent to Participate in Research
*Maksim Lirov
*Ramy Ghabrial
*Tabassum Khan
*Chen Chang
This session is for the purpose of testing team 4Corners’ low-fidelity prototype to gain an accurate assessment and user feedback of our blogging system user interface. There are no harms as you will be dealing with a paper interface and making various selections. All data collected from today’s session will remain strictly confidential and be used for the purposes of our project only. Your identity will be protected and secure within our group. At any time during this session should any discomfort or issues arise, you have the option of backing out of the testing for any reason. We thank you in advance for your time and commitment towards this test.
Please sign here if you agree to the above and consent to be tested: ______________________
Demo Script
Greeters: Welcome to 4Corners usability test. We appreciate your time. Facilitator: We are students of cs160, User Interface Design and Development, class. We are building an application using the digital pen and paper technology. I will begin by explaining you what exactly is digital pen and paper technology and how does it work. The concept is that of using pen and paper as an interface to the digital world. A faint pattern of dots is printed on the paper which provides unique information about what gets written on them. The digital pen is embedded with electronics capable of capturing and storing time-stamped content. The digital copy of the content can be transferred to your computer by connecting the pen to your computer. My team, 4Corners, is building a software application using this digital pen and paper technology. The main idea behind the project is to provide a portable and convenient interface to regular bloggers. We have created some paper prototypes of our user interface. Today we have gathered here to conduct our usability test. If you consent to participate, you will be asked to complete three different tasks using the paper prototype. Before asking for your consent, I would like to mention that this is not your test. We are the ones being tested here. None of the things you say or do will be considered incorrect. Here is the consent form. Please read carefully and place your signature on the space provided if you agree to participate in this usability test.
Facilitator: Thank you for your time. We appreciate it.
Facilitator: Before beginning the test, I would like you to get familiar with the application. The blog entry will be written on the digital paper using the digital pen. The digital pen will be docked in a cradle that comes with the pen and the content that it captured i.e. your blog entry will be transferred to 4Corners application running on your system. 4Corners will allow you to modify, save, publish and share this blog entry. For the purpose of demonstrations, I will present to you the four main user interfaces of our application one at a time. This is not a test; however, we would appreciate it you can think aloud and say what comes to your mind when you look at each interface. For example, what do you think each of the component of the UI should do, what do you think should happen if you click on something, etc.
Facilitator: Do you have any questions you would like to ask before beginning the usability test.
Facilitator: As I mentioned earlier, you will be asked to accomplish three tasks using the paper prototype of 4Corners blogging application. I will present one task at a time. The three tasks are written on individual index cards. I cannot give you detailed instructions to perform the tasks but if at any point of time you have questions or you are confused, please say so because that will show issues with our prototype. I would encourage you to think aloud if you feel comfortable doing so. Remember, nothing you do or say will be considered incorrect. Assume that this regular sheet of paper is the digital paper and this pen is digital pen, the paper prototypes are screens on your computer and this other pen is the mouse. Ramy will act as a computer and will present the user interfaces to you. Please be patient with him.
The test begins..
Please note that the facilitator repeatedly encouraged the participants to think aloud and asked questions in order to understand their thoughts. All our participants felt comfortable with this request and participated without any objections.
Cue Cards
Raw Observation Data with Notation of Critical Incidents
Subject A: 10/6/2006 3PM, 511 Soda
- Demo
-Had correct interpretation of the blog interface – date, entry, comment links
-He figured “settings” tab to contain privacy settings as well as options to change colors
-The “friends” tab caused some confusion although the main point went across: it’s the easiest way to view all updates in one page. After a little time completely understood how Friends tab works
-Thought entries in “drafts” tab were private entries that you have not made public yet (so thought that entries in “drafts” tab have already been published but made private)
-“friends” tab – is “manage friend list” a clickable link? To erase any confusion possibly add _ _ _ _ under all links to make sure the point goes across (Level 3. Minor usability problem)
- Task 1: Creating and Modifying a Blog Entry
-Checked “publish” instead of “save to drafts” on the Anoto paper (Level 2. Cosmetic problem)
-Clicked “edit” for the newest entry on the “Your Blog” tab
-In edit mode, selected all the strokes in the entry and deleted the selection
-Asked how he could type in text (where’s the keyboard?) (Level 1. I don’t agree this is a usability problem.)
-“typed in” (Tabassum said that whatever he writes now will be considered entry from the keyboard) some text and saved the entry
-Total Time: 5 minutes, Total Unexpected Behaviors: 2
- Task 2: Changing Default Appearance
-Started out wrong by clicking on the “edit” link to edit one entry rather than the “settings” tab as desired to change overall appearance
-Unclear instructions for this task lead to confusion as to what was supposed to be done (i.e. didn’t understand that he was supposed to edit global blog settings) (Level 3. Minor usability problem)
-Once it was explained what he needed to do, he clicked the “settings” tab
-Background color was changed to green successfully and settings saved
-Total Time: 3 minutes, Total Unexpected Behaviors: 1
- Task 3: Embedding an Image
-Drew an actual sketch on the Anoto paper rather than drawing a frame to box the area where an image would go (Level 1. I don’t agree this is a usability problem.)
-Didn’t follow the directions on the index card this time as they were clear enough to be understood
-Realized that he didn’t draw the two corners for where the picture should go as soon as he “docked the pen”
-Once it was explained that he needed to draw the corners and then would choose the image in the software interface, he understood what to do
-While writing on the paper, he was confused where he would have the opportunity to insert the image (should he “save as draft” or “publish”?) (Level 2. Cosmetic problem)
-Successfully chose an existing image – “cat.jpg” and embedded it into his blog entry
-Total Time: 5 minutes, Total Unexpected Behaviors: 2
- Overall
-Subject A brought up the suggestion to include support for inclusion of other file types to embed into a blog entry – say a youtube video plugin or extension
-Thought the UI was clear overall and would definitely use the software if it was available
Subject B: 10/6/2006 4:15PM, 511 Soda
- Demo
-Correctly identified the overall blog interface with the date, body entry, and clickable links
-Thought that “Friends” tab caption was unclear for what functionality is in this tab
-Pointed out that she didn’t completely understand what settings would be in “Manage Account” and what settings would be in “Security Settings”. Do some settings overlap in these two options?
-“friends” tab a little unclear as to what are clickable links – especially the side panel with all friends names listed (Level 3. Minor usability problem)
-Can she click on one of the people in the Friends list (such as Einstein?)
-Expects that she could click on each buddy in the list
- Task 1: Creating and Modifying a Blog Entry
-Wrote a lengthy entry on Anoto paper and then checked “publish”, then “edit” under the “your blog” tab
-Selected a word and changed the color of it to green
-A bit of confusion with what “insert” does after right-clicking on selected text, but figured to use a keyboard to support the function (Level 1. I don’t agree this is a usability problem.)
-Changed stroke order to be the thickest option and applied it to a selected happy face
-Published all the changes
-Total Time: 4 minutes (3 minutes went into writing the entry), Total Unexpected Behaviors: 0
- Task 2: Changing Default Appearance
-Settings --> “default appearance” --> changed background color to red --> saved changes --> smooth and flawless
-Total Time: 1 minute, Total Unexpected Behaviors: 0
- Task 3: Embedding an Image
-Followed the directions by writing an entry on the Anoto paper and then drawing a frame to specify the area to embed an image, the frame resided inside a heart which was drawn by subject B for decoration purposes
-Chose “dog.jpg” as the image to embed before publishing
-Total Time: 3 minutes (majority of the time spent designing the entry), Total Unexpected Behaviors: 0
- Overall
-Subject B thought the UI was very easy to understand
-“friends” section can be figured out in seconds even if its not made clearer than the way it currently is
-Believes that the ability to embed images opens up many possibilities for creativity
-Suggested adding bold, italics, underline and other commonly used buttons to the top of the edition interface for easy access rather than going through a menu to get to them
-Suggested ability to add hyperlinks to blog entries to link to the Internet
-Pointed out that after she writes an entry, she doesn’t expect to edit it immediately. Instead it is OK to her to just cross out the unneeded strokes on the paper and just publish that.
Subject C: 10/6/2006 8:15PM, 3rd Floor CSUA Lounge
- Demo
-Correctly identified functionality of the “Your Blog” tab
-Correctly identified functionality of the “Drafts” tab
-Thought that the display in “Friends” tab was the people who are registered on your blog
-Understood what she could do on the Settings tab
-Had a question: How can you publish entries with dates in the past (i.e. you save an entry as draft but don’t publish it until later. She assumes that the date would change if you publish such an entry.) (Level 2. Cosmetic problem)
-Confused about the “Upload User Pics” option in Settings tab: are these user drawn pictures or photos? (Level 2. Cosmetic problem)
- Task 1: Creating and Modifying a Blog Entry
-Was unsure if she could modify her hand-written entry later if she selected “publish” instead of “save as draft” (Level 1. I don’t agree this is a usability problem.)
-Wrote a long entry, then saved as draft
-Clicked edit on the Drafts tab for that entry
-Was not sure how she could select the text at first
-Chose red color for her text selection
-Published the entry
-Total Time: 5 minutes, Total Unexpected Behaviors: 1
- Task 2: Changing Default Appearance
-Correctly selected the Settings tab
-Changed Default Appearance – made background color to red and saved
-Seemed very easy for her
-Total Time: 1.5 minutes, Total Unexpected Behaviors: 0
- Task 3: Embedding an Image
-Made two small corners, saved as draft
-Not sure if she understood that the two corners should be the size of the desired pic to insert? (Level 2. Cosmetic problem)
-Clicked edit, and not the image placeholder in the entry
-Clicked on placeholder in the editing mode
-Selected cat.jpg
-Clicked publish
-Ramy’s drawn placeholder over her small two corners confused her. One of the corners looked like an L to her
-She never heard the term embed and suggested it should be called “insert picture” or “insert frame” (Level 3. Minor usability problem)
-Total Time: 4 minutes, Total Unexpected Behaviors: 2
- Overall
-She thought it was a good layout, most tasks were easy for her
-She assumed that she could click on one of her friends and it would go to friend’s blog
-Would buy our software if available
