Google Drive, Dropbox, 115, and other cloud storage list interaction

A list of commonly used interactions: Thinking about cloud storage such as hover, click, double-click, right-click, MultiSelect, Gdrive, Dropbox, 115, and their comparison of the operations of the list.

Gdrive has followed the Google Docs style, using a terse icon instead of a text operation. Gdrive and Dropbox the overall interface style is fresh, concise type, but also minimalist design trend.

1, the gdrive hover state:

Note: Highlight when hover to help users locate and focus the current line.

Click state:

Note: If you click to select a row, the column header action will display the corresponding function according to the requirement.

Double-click does not support

Right-click state:

Note: The right mouse click provides the option to select the current row, the column header corresponding function operation and the right button operation menu, show the user too much and duplicate information, hinder the user's fluency and maintain the operation of the portal uniqueness. The user only wants to right-click on the current file, which provides too much information at this time than the user expects.

MultiSelect (multiple selection)

For advanced users with convenient multiple-selection operations, CTRL for noncontiguous file multiple selection, shift for continuous file selection, in line with the user's local operation of the custom file.

2, the Dropbox hover:

Note: Highlight when hover, and preset "Get connection" action at end of line.

Click state:

Note: When click, select Row, column header content transform to function operation and selection information, the transformation here somewhat exceeds the user's expectation.

Double-click for view action, for folder open action

Right-click state:

Note: Right-click function and the column header appears in the same function, the right mouse button to provide only right-click operation, while the Google Drive mouse right click provides the option to select the current row, column header corresponding function operation and right button operation menu, show the user too much and duplicate information, The sense of fluency that hinders the user's use and the uniqueness of keeping the operation entrance.

MultiSelect (multiple selection)

This is the same as the gdrive operation here

3, 115 of the hover:

Note: When the mouse hover, the "star", "Double-click preview file", background highlighting and other information; Double-clicking the preview file prompts you to interfere with the user's actions as additional information, which can be used as a user's education and prompt for initial use.

Click state:

Note: Click, the column header appears "Settings" icon, click to expand the Operation menu, where the icon is gray and ambiguous expression, operation hidden too deep.

Double-click for open file operations

Right-click state:

Note: When right-click, the select Row, column header appears the setting icon, as well as the right mouse action menu, here and gdrive operations are the same.

MultiSelect (multiple selection)

Supports CTRL for noncontiguous file selections, and does not support shift for multiple selections of consecutive files.

Summary:

What kind of list interaction can delight users ...

Gdrive hover (no need to display too much information to help users quickly locate the focus)

Gdrive Click (select Current line, show executable action)

Dropbox Right-click (only the operation of the current row)

Dropbox Double-click (open file or folder)

Gdrive MultiSelect (CTRL and SHIF operations, consistent with local operation file habits)

Focus, simple but not shabby design ...

Article source: simple but not shabby