I have never used the pen tool on Adobe Illustrator. Actually to be honest, I once did try but failed miserably…but why? Well, for one it was an extremely overwhelming process that I found could be entirely avoided if I instead used the option of shapes and figures to create designs. It was only a matter of time that I became irritated as to why ‘the one proclaimed solution’ to seamlessly create digital designs was neither user friendly nor convenient.
I had almost about given up, but then Sketch and Figma happened, and once again I gathered some courage and tried using their respective Pen Tool, and voila!
What can I say? I was in love.
I’ll be honest, by no means are they perfect and of course still take some time to master. But I felt that I could finally tap into the power of the pen tool.
My interesting journey to discovering my own comfort zone has led me to want to find out what exactly is required for the pen tool to become extremely intuitive and easy to use. (I’m talking using shapes on our dear PowerPoint easy)
Driven by this curiosity, I along with 3 fellow HCIM classmates decided to conduct an exploratory study to understand the problems related to the use of the pen tool, and with my observations and results finally offer some recommendations to the design tool gurus to make “the ultimate pen tool”. Or at least until something even more easy comes along.
Adobe Illustrator way back in 1987 created the ‘pen tool’ which claimed to be the one stop solution for designers, but many novice designers till date do not yet utilize the powerful pen tool.
But what’s the reason you may ask. If it’s actually *that good*, why is it still so unpopular?
Well, the two most commonly cited reasons are:
- The pen tool tool hasn’t changed much since its inception in 1987, and does not address the problems of modern-day designers.
- The pen tool is not intuitive to a beginner/novice user and the steep learning curve involved is often discouraging.
USABILITY TEST OBJECTIVES
This usability study was a combination of a verification and an exploratory test. Verification because it was validating how users currently using the pen tool in two existing design tools: Sketch & Figma. Exploratory because we wanted to throw in some recommendations that might be able to create a better pen tool independent of the design tool.
The following were the main test objectives:
- Identify adaptive tasks that will enable the participant to draw shapes using the pen tool regardless of their experience and background.
- Create tasks that invoke natural interactions with the pen tool to draw and manipulate shapes.
- Execute the test plan in an appropriate test environment.
- Record usability test sessions in such a way that it captures all needed gestures and comments from the participant.
- Observe and analyze session results thoroughly and without bias.
- Generate insights in the form of the main key results of the usability tests.
- Formulate design recommendations to improve the user experience of the pen tool for designers and non-designers alike.
The following timeline summarizes the methodology used in this usability study:
Prior to participant recruitment, a screening questionnaire via qualtrics was created which was to find out the participant’s educational background, their experience with design tools, the duration of time they have been using them, the tool that they had the most experience on and their self assessment of their proficiency on the said tool. Furthermore, they were also asked if they have experience with the two tools we targeted to use: Sketch or Figma.
Our final participant list comprised of eight (8) people — 2 for the pilot (marked with *) and 6 for the actual usability tests. The participants were assigned into two groups: Sketch and Figma.
The following is a list of the test participants:
Prior to the recruitment, the team created a preliminary test plan that was used in the Pilot test with the two participants. The team patterned the pilot test after the Do-It-Yourself (DIY) usability testing methods by Steve Krug. The following were the key findings from the pilot test:
- The participants struggled with the tasks and needed a lot of prompts from the moderator.
- The tasks were not adaptive as the participants didn’t show signs of learnability as they progressed with the tasks.
- There were not much insight on some of the tasks as the participants used existing shape tools and manipulated them.
From these findings, the team revamped the list of tasks to make it more adaptive at the same time, provided visual guides that they can work on to do the tasks.
The sessions were done in a usability lab with one facilitator. The screen of the laptop that the participants were using was broadcasted live and recorded via WebEx. Two observers were in another room watching and listening via WebEx. Inside the room, a video camera recorded the participants gestures ( usage of mouse / trackpad / keyboard and their facial expressions). Moreover, the participant was continuously encouraged to think at loud while performing each task.
The usability test started with a test space that had a shape that the participant can essentially experiment with. The participants were asked to do a narrative of the pen tool menu and think out loud about the possible actions s/he can do on pen tool menu.
The participants were encouraged to test the different functions on the shape available on the test space. While the participants were doing their narrative, follow-up questions were asked if necessary to probe on interesting comments said by the user on their first impression of the tool. Once the participants were ready to move on, the moderator removed the test space and started with a list of tasks.
The 5 tasks had two boxes side by side. The box on the left was the shape they were tasked to copy and the “Test” boxes on the right showed a faint visual guide in the background that the participants could follow to complete the given task.
TASK-1: Draw a Rhombus
TASK-2: Create this shape using a Triangle
TASK-3: Create a Circle using a Square
TASK-4: Create a nike logo using the pen tool
TASK-5: Create one of the following logos from memory
DATA COLLECTION & ANALYSIS
All the video recordings were synced so that the participant’s screen, audio and video were in one file. Then the team divided the transcribing of the usability test per participant along with the observer’s notes. When all the transcriptions and data recording were done, a different team member (who didn’t transcribe for that particular participant) did the qualitative coding to ensure that there was no bias. The converging of the codes to make categories and themes were done finally as a team.
All participants were able to complete all five tasks 100%. Apart from the guides given, the adaptive tasks made the participants more skilled in using the design tool as they progressed. In our particular study, 100% task success does not indicate the usability issues while using the pen tool because of the visual guides and the adaptive tasks were deliberately designed for the participants to learn and complete the tasks. What’s pivotal to this study is how they did the task and that was reflected in the qualitative results.
There were 86 initial codes with duplicates and 40 codes without duplicates. These 40 codes were grouped into 10 categories (see below) and ultimately converged into 2 main themes to be discussed in the key findings.
The categories can be defined as follows:
- Control Points / Anchor Points — Problems with selecting or manipulating the points that define a curve.
- Adding/Deleting Points — Problems with adding or deleting extra points from an existing curve.
- Fill / Coloring — Problems with coloring enclosed profiles.
- Dragging Gestures — Problems faced by users while dragging selected features owing to a mental model mismatch.
- Feelings — Points where the user mentioned how they were feeling about the tasks outright.
- Bezier Handles — Problems with manipulating bezier handles independently of each other.
- Selection / Move tool — Problems with selecting or moving one or more points at a time.
- Lack of Control — Problems faced by users while trying to understand the interface owing to a mental model mismatch.
- Info / Tool Hierarchy — Problems with how menus are structured.
- Habits / Ways of doing things — Problems users faced due to prior experience in other design tools.
- General Lack of Control
The test participants were struggling with a lack of control over the pen tool while trying to complete all the tasks. The anchor points on the Bezier curve were not behaving according to the requirements of the participants. They failed to move the anchor points as expected and could not control the curvature of the Bezier curve required for the usability test tasks. The participants were more comfortable to add more points on the Bezier path rather than using the control points to manipulate the curve according to the task shape.
2. Mismatch between Design Tool’s Conceptual Model & User’s Mental Model
Test participants without any prior experience with the pen tool expected the pen tool to draw straight lines while dragging from one point to another. This comes from the mental model of physically drawing something on a paper that involves dragging the pen and forming straight lines. However, this is in stark contrast to the conceptual model of the interface design tool which involves creating a straight line when you click one point and click on another point without any dragging involved.
Additionally, while attempting to select a shape drawn by the pen tool, users expected to select the shape by clicking on the center of the shape, but failed. The shape created by the pen tool is actually a path and hence the design tool enables the user to only select the path and not the shape. This is a reiteration of the fact that there is a mismatch between the conceptual model of the interface design tools and the test participant’s mental model while working with the pen tool.
Improving interactions with Anchor Points
- Using color to denote selected points
The tools tested use single colors to denote both selected and unselected points, relying on using a solid circle and an empty circle with a border to denote selected and unselected points. A difference in color will make it easier to establish the two states at a glance removing any confusion.
2. Using increased size to denote selected points
The tools tested use similarly sized points to denote selected and unselected points. A difference in size will make it easier to establish the two states at a glance removing and confusion.
3. Using shading to denote open vs closed path
Both tools allow for open paths to be filled with color, this leads to confusion when a group of open paths are filled as opposed to a single closed path. Not allowing open paths to be filled and denoting closed paths with a hatching or color overlay will help denote the status of the path more clearly.
4. Adding animations to anchor and control points
Having the anchor point expand in size and control points move on hover provides the user with feedback that the point can be manipulated.
5. Allow clicking and dragging to form lines and curves intelligently based on the which direction the line is dragged in.
Clicking twice, once at the beginning and once at the end to create a line does not come naturally to a user and requires time to get used to.
For the design tools tested and the tasks selected, all participants were able to complete the test in good time, this shows to tell that the tools themselves are easy to grasp with a little bit of practice. The problems that arose stemmed from how the tools are designed to be used compared to how humans are used to designing or drawing, which gives the tools a learning curve that must be repeated every time a new tool is introduced.
There needs to be a major shift in how design tools fundamentally work to make them accessible to everyone, but it’s a good sign that even in their current iteration, they do not offer a large enough hindrance to make them impossible to use without training.
If you made it this far, you are a champion! Self-five yourself!
That was a lot of reading and I hope all the gifs loaded for you and didn’t make your browser die. I hope this study brings some value for yourself and some of the new or existing design tools might leverage my recommendations in the coming future to create an all-star pen tool, possibly reducing the learning time for pen tools from a bazillion years to may be an hour.
Source link https://uxplanet.org/pen-tool-to-use-or-not-to-use-a5ae5f75f24?source=rss—-819cc2aaeee0—4