Simple Text Inline Edit User Testing - Round 2 Results

Summary

2 of 4 users had trouble when they tried to highlight specific text before the inline edit field was active, and were confused when after the field was opened on click *all* the text was highlighted.
3 of 4 users quickly found and used both the Undo and Redo icons.
3 of 4 users were very confident their edit had been saved. The one user that wasn't didn't see the "Edit Saved" message, though he did see the "Undo Saved" and "Redo Saved" messages.
4 of 4 users either did not read the message at the top of the screen or did not understand that it pertained to the inline edit tasks they were performing.
3 of 4 users discovered inline edit due to the highlight. One user discovered it when he was highlighting the text for us and inadvertently opened it.
4 of 4 users didn't appear to see the tooltip saying, "Click to edit."

Demographics

User Number	Location	Gender	Age	Role	Tech-savvy	Do you own a personal computer?
User 1 (BF)	Berkeley	Female	41-50	Staff	Medium	Yes, Macbook
User 2 (AL)	Berkeley	Male	19-24	Student	Medium-high	Yes, Toshiba laptop (PC)
User 3 (JV)	Berkeley	Female	19-24	Student	Medium-low	Yes, Windows XP laptop
User 4 (DB)	Berkeley	Female	51-60	Staff	Medium-low	Yes, a PC
User 5
User 6
User 7
User 8

Do you do any of the following and if so how often?

User	Checking email	Instant message	Shop online	Online banking	Internet research	Take class online	Social networking
User 1	All the time	All the time	All the time	All the time	N/A	A few times a month (webinar)	No answer
User 2	All the time	A few times a month	A few times a month	A few times a month	A few times a week	Hardly ever	A few times a week
User 3	All the time	A few times a month	Hardly ever	A few times a month	A few times a week	Never	A few times a week
User 4	All the time	Hardly ever	A few times a month	All the time	A few times a month	A few times a month	A few times a week
User 5
User 6
User 7
User 8
User 9
User 10

Do you upload files on the web and if so how often?

User	Pictures	Media	Docs to course site	Docs to soc. ntwkg	File to email
User 1	Hardly Ever	Never	Never	Hardly Ever	All the time
User 2	A few times a month	Hardly Ever	Never	Hardly Ever	A few times a week
User 3	A few times a week	A few times a month	Hardly ever	Never	All the time
User 4	A few times a week	Hardly ever	Never	Hardly Ever	All the time
User 5
User 6
User 7
User 8
User 9
User 10

Interaction Notes

User Number	Task 1 - Remove section	Task 2 - Edit from LEC to DISC	Task 3 - Edit from L to P	Task 4 - Edit from 104 to 105	Task 5 - Undo	Task 6 - Redo	General comments
User 1	User had no trouble realizing it was the "X" that she needed, but did have a slight bit of trouble physically clicking on the "X."	User looks at the screen for a while. She mouses over and tries to click on the "Click to edit" pop-up and since it isn't clickable, ends up clicking on "Assign Students" instead by mistake. She clicks on the field and edits it easily. She says, "Edit Saved" aloud as that message is shown. When the Undo icon appears, she mouses over it and also comments, "OK, so I can Undo this." She comments that the course names are normally automatically set up and wouldn't want to change them.	Easily performs editing task.	Easily performs editing task.	Quickly uses "Undo" icon.	Quickly uses "Redo" icon.	"The little buttons are great! they tell you exactly what they do - Undo, Redo." "I didn't have a question about things being saved because of the message saying it was saved." When Daphne mentions instruction box at the top of the screen, she says, "I looked at it but I didn't really read it. From this distance it's not legible without my glasses." She kept it up on the screen the whole time - didn't remove it.
User 2	Thinks about which to delete (interpreting scenario). Clicks "Assign Students." Asks, "Available, does that mean there are students in there (that section)? I can't reassign students." User worried about removing a section with students in it. When we reassure him, he clicks the red "X" easily.	Tries "Options." "'Add sections' (link) would be nice, but that sounds like adding (not renaming)." Mouses over lecture section name and doesn't notice highlight. Removes message about being able to edit items on the page. Tries refreshing the screen. Tries "Help" and Daphne explains there's not info on what he's trying to do and she could function as help. Still mousing over things but doesn't notice the mouseover highlight or the tool tip. In explaining what he was doing (we asked him to think aloud), he highlights the text with his mouse and then realizes he's in an edit window and performs the edit. Asks, "Is that it, or is there like a "Save" button?" We say, what do you think, and he says, "I think that's it.	As task is being read he's already mousing over "Undo." Easily completes task and points his mouse to "Edit saved" as the message comes up (but later says he never noticed it).	Easily performs editing task.	Quickly uses "Undo" icon.	Quickly uses "Redo" icon.	"I'm not even really sure that it was saved." To determine this, I'd change the page and come back to see if it was saved correctly.
User 3	Looks at screen for a second, hovers over, then clicks the red X.	Looks at screen without moving her mouse, then when she starts using the mouse sees the mouseover highlight of the inline editable fields. Easily brings up highlight then edits. "I didn't know you could do that." "I was thinking, 'how do you get there' and I just decided to click."	She has to click quite a few times to highlight the P, as the letters she highlighted before the field was activated aren't translated into a highlight in the editable field, but even with the problems easily makes the change.	Easily performs editing task.	Quickly uses "Undo" icon.	Quickly uses "Redo" icon.
User 4	Tries to highlight whole line, and asks, "why is the X there?" (she thinks it means you can't edit that line.) "Should I just be able to click it?" Clicks X. "Did I get rid of it? I did!"	Had moused over inline editable fields on previous task. Easily clicks to edit first line. On the second line she says, "huh" when the cursor is a bit hard to place (think she was trying to highlight just the text to change before the line was "open" and on click the highlight changes to the whole line. Says, "That was kinda good where it said "Edit saved."	Highlights the whole line and seems a bit frustrated, probably because she was just trying to highlight the "L", but still makes the change pretty quickly.	Clicks in and puts the cursor at the end of the field and easily arrows over.	Doesn't use "Undo" icon--instead edits the field directly.	Doesn't use "Redo" icon--instead edits the field directly.	User mouses over and sees the words "Undo" that are part of the icon flashing on the screen and still doesn't see it.
User 5
User 6
User 7
User 8
User 9
User 10

Post-test Questionnaire Responses

Question	User 1	User 2	User 3	User 4
How easy or difficult was it for you to realize you could edit directly on the page (inline)?	Very easy	Neutral - easy	Very easy	Very easy
How easy or difficult was it for you to edit text inline?	Very easy	Very easy	Very easy	Very easy
How easy or difficult was it for you save your edits?	Very easy/N/A	Neutral (not sure they were saved)	Very easy	Very easy
How easy or difficult was it to know your edit was successful?	Very easy	Very easy	Very easy	Very easy
How confident were you that your inline edit had been saved?	Very confident	Unsure	Very confident	Very confident
How easy or difficult was it to undo your changes (edit)?	Very easy	Very easy	Very easy	Easy
How easy or difficult was it to get your changes back (edit)?	Very easy	Very easy	Very easy	Easy

Post-test Question Responses (verbally asked)

Question	User 1	User 2	User 3	User 4
1) Did you see anything that told you you could edit the text directly on this page? How helpful was it to you?	"It highlights the box when dragging" (the cursor/mouse).	"I didn't realize you could edit until I moused over it. Kinda cool, but unexpected." Another idea: Have a button you click to make everything on the page editable, and then save afterwards. He saw the message about "editing elements on the page" but didn't realize what really said until he read it aloud. At first he thought it meant that the whole line would become editable (he misinterpreted the word "item") and would change color to show him that it was, and since he didn't see that he didn't think it was working. He tuned out the pop-up saying "Click to edit," and suggested that if it's color was totally different from the rest of the website he may have seen it.	"I don't read things, so I noticed the words right after I (told you) 'I don't know.'" "I have that type of personality...if I can't figure it out I read." (Otherwise I don't read.) She thought clicking on the editable text might open another page. The highlight indicated she could change the text, but she didn't notice anything else.	"When I went to it, it highlighted, then if I actually look, it says "Click to edit." There didn't seem to be an item in the menu to edit elsewhere.
2) Did you expect that clicking the highlighted area would edit the text directly on this page? If not, what did you expect?			"After it was highlighted and there was a box around it I assumed I could change the text."
3) Did you notice any indication that your edit was successful?	"The message that came up" (about the edit being saved).	He noticed "Undo saved" and "Redo saved" but hadn't noticed "Edit saved" until I asked him to do it again after the test was over. Until he saw that, he didn't think his changes were saved. "Selecting something and clicking off it doesn't feel like a final movement."	"There is a nice box that said, "Edit Saved."	"I think they're saved because every time I made a change it told me it was saved."
4) Did you think there was a way to "undo" your edit? Did you think there was a way to "redo" an edit that you'd undone?	"In ragging the mouse over it I saw that it said 'Undo.'"	"Undo is really nice actually." He discovered it when he moused over the icon and it said "Undo." "The arrows kinda look like 'refresh,' but the words help a lot and the colors make it more intuitive."	"It looked like it would Undo and if you hovered over it it said 'Undo." She noticed this quickly.	Finally sees Undo while answering question #1, says she didn't see it because "I'm so used to looking at tabs and stuff...it's great!"
5) Did you notice an "undo" or "redo" link?	Redo changed to undo.		She noticed it quickly too "because the 'Undo' arrow changed direction and it said 'Redo' when I hovered over it."	"That symbol is Undo in every program there is and it's colored and I still didn't get it! I saw it before but didn't think about what it was....I would use Undo." I read the info message at the top of the page after I did the first save, and I think it almost cemented in my mind that (clicking and editing) was the only way to edit (as opposed to using Undo & Redo).
6) Did you enjoy using inline edit? Is there anything you would improve?	"Yeah, it was easy. That was simple." No way to improve it, but wondering if you even want them to be editable as (professors) "like to edit things they shouldn't."	"Yes, it was really simple, but a little too simple. I don't know if it saved, and I'm (nervous because) I'm prone to typing mistakes."	"Yeah, I think it's pretty clear."

Potential Design Improvements (based on testing)

Is it possible for the text a user highlights before the inline edit field is active to become the selection when they "open" the inline edit field?
Either reword (hopefully shorten) the message at the top of the screen saying you can inline edit or remove it.
In our testing the Undo/Redo icons and Edit/Undo/Redo Saved messages were right next to the text in question (because all our tests were on small screens) and users understood the association. However, I just noticed that on the prototype if you have a larger screen, the icons & messages are much farther away--at the edge of the column and I'm worried the association won't be obvious enough.
Put a red border around the "Click to edit" tooltip to help users see it more easily. It will still have the same background color as the field on mouseover to reinforce the association between the two, but hopefully the red border will make it more obvious. If we keep the message at the top of the screen, we could use the same border color as is used there so there's a mapping between these two instructions.