Child pages
  • Layout Reorderer User Testing - Round 2 Results

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Summary

Excerpt
  • 1 User was never able to drag and drop a portlet
  • The dragging metaphor breaks down if there are performance issues (which may be an issue over slow internet connections as well). Firefox 2.0 has much longer lag time that Firefox 3.0.  The lag time made it really difficult to drag and drop.  1 user was never sure it was even allowed because the portlet kept jumping back to place when she didn't drag it far enough.
  • Ghosting to show dragging was a well understood cue, but this metaphor broke down in a big way when performance was slow (jerky movement didn't translate).
  • Green drop target box confused users.  2 users weren't sure what it was supposed to indicate (firefox 2.0), but thought it had to do with where the portlet was picked up from (this may have been due to the slow movement when dragging and drop target not showing up quickly).
  • Long scrolling while dragging was a problem.  1 user had to get out of her seat in order to keep scrolling to try to drag a portlet from the bottom to the top.
  • Most users had trouble distinguishing locked portlets from movable portlets

  • 1 user said she really likes the idea of personalizing her spaces.
  • 1 user thought the icon in front of portlet title was the indicator that you could drag
  • 1 user noticed the 'you can't drag here' message but was confused about when and why she couldn't.  Because of earlier problems she took it as another indication that you couldn't really drag and drop.

Demographics

User Number

Location

Gender

Age

Role

Tech-savvy

Do you own a personal computer?

User 1 (RL)

Berkeley

Female

51-60

Staff

N/A

Mac

User 2 (JH)

Berkeley

Male

35-40

Staff

high

Mac laptop

User 3

Toronto

Female

35-40

Student

Low

HP Desktop

User 4

Toronto

Male

25-30

Grad Student

Low

Dell Laptop

User 5

Toronto

Male

25-30

Student

High

mac laptop

User 6

Toronto

Male

19-24

Student

High

IBM Laptop

User 7 (MS)

Berkeley

Male

35-40

Staff

medium

Customized PC

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 (RL)

all the time

hardly ever

a few times a month

all the time

all the time

hardly ever

hardly ever

User 2 (JH)

all the time

all the time

a few times a week

a few times a week

all the time

hardly ever

all the time

User 3

a few times a week

a few times a week

never

never

hardly ever

never

a few times a month

User 4

all the time

hardly ever

never

a few times a week

all the time

never

never

User 5

all the time

hardly ever

a few times a month

a few times a month

all the time

hardly ever

hardly ever

User 6

all the time

all the time

hardly ever

a few times a week

a few times a week

a few times a month

a few times a week

User 7 (MS)

all the time

hardly ever

a few times a month

never

N/A (Never)

a few times a month

a few times a week

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

User

Pictures

Media

Documents to course site

Documents to social networking site

Attach a file in email

User 1 (RL)

Hardly ever

A few times a week

A few times a month

Hardly ever

All the time

User 2 (JH)

a few times a month

a few times a month

all the time

a few times a week

all the time

User 3

hardly ever

hardly ever

hardly ever

hardly ever

hardly ever

User 4

hardly ever

never

all the time

a few times a week

all the time

User 5

a few times a month

a few times a week

a few times a week

hardly ever

all the time

User 6

hardly ever

a few times a week

a few times a week

a few times a month

a few times a week

User 7 (MS)

a few times a month

a few times a month

N/A (never)

hardly ever

all the time

Interaction Notes

User Number

Previous LMS Experience

Task 1 - Move a particular box/portlet

Task 2 - Change the placement of other boxes/portlets

Task 3 -  Deal with a Locked box

Task 4 (if not done already) - drag and drop a portlet

General comments

User 1


  • Took a minute to find announcements
  • What I would do is click & drag but I don't think you can
  • She accidentally moved announcements to the left so when she went to move to the top there was a lot of whitespace before the next portlet.  She tried to drag to the right but the portlet kept popping back to the left.
  • This threw the rest of the test off.
  • "I would have taken it to top but it just doesn't go there"
  • User was never able to drag and drop.  She was successful with moving announcements to the top by "canceling" (removing) portlets.
  • I've done this with yahoo. 
  • I'll just start canceling the ones I don't want until I get them up there
  • Wasn't seeing the green box move to the drop target - slowness, couldn't drop in right bottom of column & lots of scrolling then can't lose sight of green box.
  • She noticed the you can't drag her message but never noticed the lock icon.
  • She wasn't sure why she couldn't drop there and took it as an indication that she couldn't drop it at all.
  • Finally told her she could drag and drop and asked her to try again.   This is when she was scrolling forever and had to get out of her seat to scroll far enough.
  •  "I would have taken it to top but it just doesn't go there"
  • Lag time was also throwing off the test.  It's just pretty clunky moving things around
  • Long scrolling was a problem trying to drag things from the bottom all the way to the top - she could barely reach her arms up long enough.
  • "The way I do things is click around "I'm clicker".
  • She blamed the misbehavior on the mouse but it was the slow, jerkiness of the system.
  • While filling out the questionnaire she said, I think the mouse wasn't work well or it would have been easy as she started to mark easy.  I encouraged her to take the mouse factor as is and assume it was working the way it should - that it was not the problem.  She still answered "easy".

User 2 (JH)

Moodle, bSpace

  • first clicked Change Layout but quickly realized that this was for column layout
  • moused around screen and noticed that the pointer changed to a hand over the pane header for each portlet, then easily dragged the Announcements portlet to the correct position.
  • easily started to make changes
  • noticed that the Welcome portlet was locked by the locked icon on the portlet
  • also noticed the rollover text

n/a

  • expects things like this to configurable from his experience with social networking sites and Moodle. 
  • Very comfortable with drag and drop
  • the change in cursor was the key indicator for this user

User 3


  • When asked how do you move a box? Answer: no idea. "you mean click on something and move it?"
  • clicked the X to move the box
  • clicked the window icon to drag
  • eventually saw a green box and figured how to drag a portlet
  • moved portal vertically on right column, drop marker showed on left column but bounced back
  • tried to drag portal down to empty vertical space below the portlet.
  • Surprised when it doesn't stick.
  • Why are you moving it there? "Because it's empty space"
  • did not notice the help text
  • help text sometimes flashes quickly
  • tried multiple times to drag portlet, not sure why it wasn't moving

n/a

  • user was dragged the icons thinking that was how to accomplish the task.
  • warning text when dragging over locked portlet not obvious and missed by user.

User Number

Previous LMS Experience

Task 1 - Move a particular box/portlet

Task 2 - Change the placement of other boxes/portlets

Task 3 -  Deal with a Locked box

Task 4 (if not done already) - drag and drop a portlet

General comments

User 4


  • instead of repositioning, he says he would scroll down to view instead of moving it.
  • not sure how to reposition a box. mouse exploring, but not noticing the change in mouse cursor
  • clicked on the announcement box and it took him to the announcement page.
  • multiple times could not notice the change in mouse icon to a "grab" hand
  • Said he is usually not expecting this kind of behaviour
  • had no problems moving a portal up and down column once he figured it out.
  • did not notice warning several times
  • thinks the portal did not stick because the portlet was too big. despite seeing a green box below the locked portlet.
  • not sure why the portlet is "locked". "So you can't place anything above this?"

n/a

  • kept looking at the icons on the top bar, but none of them made sense to move an object
  • would like to see an icon to show that it is movable.

User 5


  • dragged and dropped "there you go. cool!" * dragged and dropped a bunch of other ones
  • "this one's locked i guess"
  • went to welcome page, came back, everything was on the left column
    tries to move the announcement to the top of right column, unsuccessful
  • "locked i guess. it wouldn't go there"
    (because of the lock, and because it told me it's locked)

n/a

  • Upon visiting the page he immediately began giving feedback on the site's layout and design.
  • "I wouldn't have the weather here, because it's not as important"
  • scrolled up and down
  • "would switch the announcement and weather"

User 6


  • hovers over announcements, grab and move up.
  • moved other boxes, no problems.
  • clicked on the locked box, but then quickly released it.
  • he was asked "what did you just do there?" "nothing". Then asked "Why didn't you move it?" "Because it's where I like it." (Didn't discover it was locked)
  • grabbed and moved on top of the locked portlet, moving didn't work.
  • made sense to him because other sites have ads that can't be moved (the box looks like an ad, I guess. -JH)

n/a


User 7
(see attached Word version of results with screenshots)

 

  • User says he would like an anchor he could jump down to at the bottom of the page to see Announcements (e.g. maybe an "On this page" list at the top)
  • User tries drag and drop and the performance is poor---it's hard to see where the portlet is going because it jumps around a lot. He says, "You can't move it yourself."
  • After more effort, user moves Announcements to the top right corner. At times he has trouble seeing the drop target as it gets lost when dragging over a large portlet. (Note: Much of the users' problem following the portlets' movements I think was tied to performance problems.)
  • User has less trouble moving portlets left to right, but more trouble moving them up and down, in part because it's difficult to see the drop target among the large portlets. User comments that he's unsure whether the green box represents where the portlet is coming from or where it's going.
  • User has trouble moving portlets up and down "across" the page fold because the interaction is so slow, and the page doesn't scroll properly when he tries to move the portlet across the "fold."

  • Bug: User tries to drag the Announcements portlet from the top of the right column directly over the orange "Welcome" and doesn't receive any message (he should receive one saying that the portlet below is locked).  When he drops the portlet and it goes back to where it was he says, "I guess I cannot move it" but does not appear to understand why.

n/a

  •  In general this user had a lots of problems understanding how portlets were moving around due to performance issues. Tested on FF2 on Mac OS 10.5.
  • Visual cue for picking up a box?
    • We are looking for the cursor change to hand here, but the user talks about the lock.
    • "I didn't pay attention." Then he looks around a bit and notices the lock. He says, "I wonder if there's a tutorial" and looks in Customize. He sees the interface for moving portlets around without drag and drop, and at a quick glance seems to think this is a tutorial rather than another interface for moving portlets. He says, "it gives you all the clues about what you can do."
  • Visual cue for dropping a box? (looking for green drop target)
    • "I didn't notice anything, but I now I guess the color shows this."
    • User commented that it was hard to see the visual cue for where the box would go.
    • Commented at one point on the size of the avatar, saying "is this the right size?" (Note: Currently the avatar size doesn't match the portlet size.)
    • He said it was clear at the bottom of the page (basically when he was moving into blank space) where things would move, but harder to tell when moving a portlet to the top through other portlets.

Post-test Questionnaire Responses

Question

User 1 (RL)

User 2 (JH)

User 3

User 4 

User 5

User 6

User  7 (MS)

How easy or difficult was it for you to realize you could move boxes in the portal by dragging a box from one location and dropping it in a new location?

very easy

very easy

very easy

neutral

very easy

easy

neutral

How easy or difficult was it for you to actually move a box in the portal (by dragging and dropping) to a specific location?

easy

very easy

easy

very easy

very easy

easy

difficult

How easy or difficult was it for you to distinguish between boxes in the portal that could be moved and those that were locked in place?

neutral

easy

neutral

neutral

very easy

difficult

neutral (but it was difficult to realize this at first)

Potential Design Improvements (based on testing)

  • (DO)Performance improvements
  • (DO)You can't drop here message should say something about why you can't drop here that allows the user to know why.  Needs to be concise.
    • (AB) Gary and I had come up with: "This box cannot be moved here. The box currently located here is locked."
  • (DO)The green box could look different when it appears where you picked up the portlet than it does when it shows you where it will be dragged?
  • (DO)Allow dragging into anyplace in the column and drop it underneath the last portlet in that column.
  • (AB) Update the Layout Preview design pattern to explain the difficulties of using it with large portlets, and give guidelines for when it should not be used. Also talk about performance requirements and the difficulties of dragging large portlets across the page 'fold' (e.g. perhaps drag and drop may not be appropriate to use with large portlets which must be dragged across a fold.)
  • (AB) Allow dragging and dropping into the region above or below of a column of portlets (e.g. don't require that the user get right next to the portlet above it to drop. This may mean dragging into an empty region at the bottom of a column, or dragging on top of the Welcome message at the top.).
    • (AB) "This box cannot be moved here" warning message should appear if it appears to the user that they are dragging on top of a locked portlet, even if user initially drags the top of the portlet above an area which is not droppable (e.g. the orange "Welcome" text in the testing prototype).
  • (AB) uPortal advice: there are so many links to "Customize" the portal and users aren't sure what they do--try to consolidate them. Perhaps explain how portlets can also be dragged and dropped on the Customize page, as well as how this relates the activities that are performed on this page.
  • Portlet title bar should indicate somehow it can be moved. (Already has other icons that indicate functionality).
  • Warning message not obvious. Could be hard to see against 2 different portlets.