User testing for Grid/ Breakpoint UI

Breakpoints UI Usability Study Findings

This week, I conducted a usability study on the breakpoints prototype for Spark. The focus of the study was to get answer to “Do users understand how to edit the existing breakpoints and create new ones?”

In order to generate quick user data, the study was combined with the panelizer study. The combined study guide (with profile) can be found here.

This is a report of findings for the breakpoints UI only.

Key Findings:

Major Issues

• When participants were asked to create an additional breakpoint, the participants were surprised and it went against their mental model that the additional breakpoint appeared to the right and not to the left. This *did not* make sense to them. Refer to this skitch

• It wasn’t clear to participants that you have to move the shutter of the “Add breakpoint” and move it to “Phone/ Tablet/ Standard” to select the min and max for that particular breakpoint. When they did understand it, they found the interaction unintuitive.

• One participant was confused with two distinct actions appeared to be clubbed into one (visually). The two actions being: editing the min/max of a particular breakpoint and adding a breakpoint.

Minor Issues

• The visual emphasis that the min and max breakpoints are editable via the textfield wasn’t completely clear.
• Participants wanted tool-tips to inform them about the UI
• One participant was confused what the number of rows in the prototype meant.

Skitch of the prototype w/ minor issues.

Important Note
Although 6 participants were to be tested, the study was stopped after 2 participants. This is because dcmistry (usability guy) is confident that with additional participants we are not going to learn anything new and would also require more time/ money. This decision to descope the study was taken by dcmistry and tkoleary. The next steps for the team are to take the design back to the drawing board and re-test it.