This design pertains to the Advanced Views Interace. There are two main goals of this design:
1) make “Save” button easier to find
2) make it easier to distinguish between configurable and preview sections of interface
Both in the usability studies done at BADCamp and the Google studies, users had trouble locating the save button on the Views interface. Some examples:
- The save button will appear off screen if the preview becomes too wide
- Users think they can edit everything in the preview and don’t understand how it relates to the configurable section. The interface should be strictly divided between “configure” and “preview”.
- User doesn't understand when preview was updated
- The interface has 2 sections in the visual hierarchy: “Configure” and “Preview”. This will establish a pattern of “edit here”, “see results there”. Currently the user can edit options in the Preview section, which conflates these two functions. Until users can truly create Views with a WYSIWYG editor, “edit” and “see” should remain separate. For this reason, the editable quick menus in preview have been removed.
- Users are comfortable scrolling down in the Views interface to see a preview of their changes. The save button is placed in the bottom left of the Configure section to accommodate this workflow.
- Contextual filters and the checkbox for auto preview are moved under an Advanced button in the Preview section. This will prevent new users from getting confused by them.
- There are some copy changes to better communicate the interface (see screens).
- Added "last updated" message by preview to reinforce to user it reflects their latest changes
New interface with save button and 2 sections
After clicking the "advanced" button on the preview section
Placeholder text in field reads: "For multiple filters, separate values with a "/". Example: 89/9/7"