Efficient Interactions
HUMAN CENTERED DESIGN • Project
Tools ~ Figma, Canva, TypeScript, Adobe Photoshop
Creating more efficient and intuitive designs for human and technological interactions
Problem statement
When we are creating applications and softwares, designs can often get lost in translation. Whether it may be game or web applications, all kinds of softwares must have straightforward details that users can easily understand. Our goal of this project was to mitigate any confusion in designs, creating an intuitive and efficient interaction between humans and softwares.
Problem statement
Problem statement
right arrow
right arrow
right arrow
left arrow
right arrow
right arrow
left arrow
right arrow
right arrow
Ideation
Responsive image
Main Problems We Noticed
  • Submission method was inaccurate
  • Buttons for each movement wasn't efficient
Brainstormed Ideas:
  • Square changes colors when it's the right orientation, size, and location
  • Add an enter button on screen so user has more of a visual cue
  • Press the middle of each box as a form of submission
  • Right/two-finger click to submit
  • Resize & scale with sliders
  • Move square with mouse pad
  • Rotate/scale square by dragging corners
  • Reset square to center after submission
Prototype V.1
Prototype V.1 Features:
  • Having the square change colors when it's the right orientation, size, and location (lighter green when fewer are correct, dark green when all are correct)
  • Right/two-finger click to submit
  • Moving the square by dragging it (or teleporting it to where the user clicked)
  • Scaling by dragging the corner of the square
  • Resetting the square to the default rotation/scale/position (center) after each submission
User Testing V.1 Results
User Testing 1
Comments:
  • Users would prefer turning the shape with the box, not the upper hand buttons
  • Users liked the submission method - found it easy and intuitive
  • Users found resize a little confusing and wished resize was a little smoother (seemed glitchy)
Prototype V.1 - Refinement 1
How did we Morph and Narrow Down our Ideas?
The main issues our users had was with the way the resizing was working; from our first version, it was very glitchy and would sometimes go a lot larger or smaller than the user wanted it to be. For our second prototype that we tested, our main focus was improving the resize code so that it was much more responsive and intuitive. With the deadline approaching, we also needed to create a method for the rotational buttons to be more efficient.
Prototype V.2
Prototype V.2 Features:
  • An improved version of the drag to resize. The initial version did not take into account if the user changed the direction they were dragging, so when users made the square a little smaller or larger than intended and tried to just drag the other direction, it would keep making the square larger or smaller based off of the initial input and not any corrections.
User Testing V.2 Results
User Testing 1
Comments:
  • Users like how easy the drag and resize is - still wants the rotate to be a part of the box
  • Users realized that they can teleport the box to wherever they click
  • Thought that rotate should be part of the box (again)
Prototype V.2 - Refinement 2
How did we Morph and Narrow Down our Ideas?
While coding Prototype 1, we had had an idea to resize and scale the box using sliders that would be beside the box (see bottom left). This never became its own prototype, but morphed into the idea that circle sliders would be better for rotation (see bottom right), since it's intuitive to the user; so that ended up being what we added to Prototype 3, along with the improved scaling from Prototype 2, as the scale slider wouldn't have fit along with the rotation circle.
User Testing 1
User Testing 1
User Testing 1
Prototype V.3
Prototype V.3 Features:
  • The slider circle around the box that can be used to rotate the box was added
  • One of the dragging spots was removed, as in certain configurations it frequently ended up overlapping with the slider for rotation
User Testing V.3 Results
User Testing 1
Comments:
  • Users really liked the resize and rotational features, but would like to have seen them combined in the end
  • Some got confused when the rotational circle was outside of the frame
  • Overall, time and speed were decreased significantly from the original version!
Reflection
While coding Prototype 1, we had had an idea to resize and scale the box using sliders that would be beside the box (see bottom left). This never became its own prototype, but morphed into the idea that a circle would be better for rotation (see bottom right), since it's intuitive to the user; so that ended up being what we added to Prototype 3, along with the improved scaling from Prototype 2, as the scale slider wouldn't have fit along with the rotation circle.
This project was extremely valuable to me because I learned how to create meaningful designs and iterate through them with a strong team. Through each and every iteration and user testing, I learned something new about the controls and improved an aspect each time through Processing code and design choices.
In the future, if my team and I were to further the complexity of this project, we would combine the resize and rotate buttons int one and try to account for more unique and unforeseen cases such as smaller boxes or when the box was outside of the screen. I was able to understand how we could improve each iteration through creative thinking in unconventional ways and collaboration through clear, stable communication.


SWIPE