S
S
Sergey Larionov2015-04-26 17:25:56
Design
Sergey Larionov, 2015-04-26 17:25:56

How to combine checkbox, expand/collapse and dropdown menu in list item?

I am developing a web application. In terms of design, I adhere to the Material Design concept from Google as much as possible. The interface will be focused on all types of devices: phones, tablets, desktops.
One of the functions of the application is a list of tasks with subtasks. For each task, you need to be able to:
1. put a mark on completion
2. collapse / expand subtasks
3. perform a set of additional actions hidden under the drop-down menu (opened by clicking on the icon to the right of the task name)
Classically, such a structure is displayed in the form of a tree
ef55f070a12742da9208623838a90be9.png
: In this case, this option is not suitable, because it: 1) does not agree well with Material Design, 2) involves the use of a mouse.
As controls for list itemsThe official guideline offers the following options:
ea9d860bd12f4668b4754085a872fdb3.png88f2f8d2e99a4ee5bdc7233158585956.png686870a6592e4af7956653b162c29dd0.png4771664a206e41e8bb1ecc6df2ae2647.png
Everywhere we see only 2 possible options : primary action on the left - let it be a checkbox for completing the task and secondary action on the right - expand/collapse OR an additional action button. Question: what is the right way to place all 3 controls at the same time
in terms of usability ?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nicolai G., 2015-04-30
@nicogold

Maybe try using something similar to self-learning sites like Udemy or Coursera?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question