UI Challenge #3 - Drag & Drop

 

Research

1. Drag & Drop Task


  • Purpose
    To arrange specific task to a specific position or arrangement

  • Function Allow users to drag and drop task easily and freely

  • Coherent There is no images or text that indicate users can do anything here, unless they try and error by themselves

  • Ease of Use Users just need to drag and drop the specific task that they want to move

  • Enjoyable The drag and drop is normal, it is smooth if users want to move a specific task in hurry

  • Visual aesthetic & communication The design style is minimalistic and simple, all task box has the same color, so it is uniform

  • Interactivity When user is moving the dragged task, the other task will be moved so give space for it

  • Usability and engagement
    The drag and drop would be confusing at first unless users try & error to move it


2. Drag & Drop Boards




  • Purpose
    To arrange the boards to a different position or arrangement

  • Function Allow users to drag and drop the boards easily and freely

  • Coherent When a specific board is dragged, there will be a space that is outlined. If the dragged board goes to other place, the outlined space will be appear too

  • Ease of Use The drag and drop is normal, it is smooth if users want to move a specific task in hurry

  • Enjoyable Users can change the size layout according to their liking, and the drag & drop animation is smooth

  • Visual aesthetic & communication The design style is minimalist, it is simple and clean. There is no excessive usage of colors that might make users feel confuse

  • Interactivity When user is moving the dragged board, the other board will be moved so give space for it. The space will have outlines, indicating that user can drop the board in that space

  • Usability and engagement
    Users will be easy to understand on how to use the drag & drop because of the empty space that has outline


3. Drag & Drop Layout


  • Purpose
    To arrange the layout to a different position or arrangement

  • Function Allow users to drag a layout from menu into the main content area

  • Coherent There is a menu of different layout at the left side, where users can choose which layout that they want for the main content

  • Ease of Use The users need to choose layout from the left menu and drag inside the main content. They can move to arrange the layout too

  • Enjoyable The animation when moving the dragged layout is smooth

  • Visual aesthetic & communication The design style is simple and minimal, icons used are also easy to recognize

  • Interactivity With a lot of different layouts in the left menu, users will have more freedom to drag and drop the layout inside the main content

  • Usability and engagement
    Users will be easy to understand on how to use the drag & drop because of the empty space that has outline




My Drag & Drop Design

Cake Customization


References








Sketches



Based on the references, I've sketched out my idea for my drag & drop design. I wanted to make a cake customization where users can choose what cake flavor, toppings & cream that they want to choose.



Flow Chart






Design Assets





These are design assets that I've made for my drag and drop



Final Outcome


This is a Cake Customization where users can drag and drop multiple things. The design style that I use for this is cute illustration with pastel colors. This is to establish a soft looking visuals for users.

Users can customize the cake flavor, cake topping and cake cream. All users have to do is the drag and drop the items in the drop box accordingly. After that, they will be able to see their customized cake at the right side.


Reflective Evaluation


For UI Challenge #3 - Drag & Drop, I feel like this challenge is a bit hard. I tried to come up with ideas as much as I can but it's hard. Maybe because I don't really see much drag & drop UI lately, so I'm having a little bit of problem at the start. I think I tried my best to make it happen, it took me awhile to finish coding for this challenge.

Comments

Post a Comment