Goals

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:
http://www.youtube.com/watch?feature=player_detailpage&v=LSzaswGl-BU#t=2...
http://www.youtube.com/watch?feature=player_popout&v=BOgL2O-2ANk#t=3351s

Other issues:

  • 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

Proposed solution:

  • 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

Interface mockups

New interface with save button and 2 sections

default interface

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"
advanced btn

Unsaved changes warning appears directly above configure section.

warning msg

Files: 
CommentFileSizeAuthor
#51 interdiff-51-48.txt469 bytesidebr
#51 1831894-views_ui_preview-51.patch3.31 KBidebr
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 83,361 pass(es). View
#51 1831894-51-after.png196.51 KBidebr
#51 1831894-51-after-rtl.png200.61 KBidebr
#44 1831894-before.png197.12 KBidebr

Comments

technicka’s picture

Issue summary: View changes

adding in images inline

technicka’s picture

Issue summary: View changes

got rid of big images

Bojhan’s picture

To append to this, we found this in two studies and it severely interrupted the process to the point that people exited the screen without actually saving and with that having the feeling it didn't work, and creating a new one.

I definitely think this is a major, it occurred in two studies and had a severe impact on the workflow. It is also a bug because it stopped people in their tracks, I am not sure if there was no guidance if people would have understood how to resolve this.

I helped technika in formulating this issue, this proposal outlines a idea on how to solve this. We think this is likely the direction it needs to take, to really create a noticeable save button and changing the layout is part of this as it requires a more holistic change.

technicka’s picture

FileSize
37.01 KB
25.38 KB
94.92 KB

cropped versions of original screenshots to show focus

technicka’s picture

Issue summary: View changes

copy

technicka’s picture

Issue summary: View changes

added back images

technicka’s picture

Issue summary: View changes

added explanation for advanced

Bojhan’s picture

Alright, so I have spend a bit talking this through with @dawhner and @damiankliop.

They mentioned that it will be hard to hide all of this functionality under "Advanced" as its a common thing to use if you have contextual filters and disabling/enabling preview is something you then do often.

I suggested the following:

  • We don't show contextual filters form, unless there actually are contextual filters in use.
  • We leave the "preview" last updated signaling issue for now, lets solve that in a followup.
  • We lose the "advanced" button, as that doesn't inform you about its contents anyway.

preview-without-contextual-links.png

  • When we do show them, they have an "Apply" button to clearly signal you are applying this filter to the preview

preview-with-contextual-links.png

Another thing for consideration is unchecking "Auto-preview" when you filled out a contextual filter value, since it won't auto update?

Bojhan’s picture

This could use some code! :) ?

dawehner’s picture

Status: Active » Needs work
FileSize
6 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch drupal-1831894-5.patch. Unable to apply patch. See the log in the details link for more information. View

Maybe i should have better stopped at the first contact with css, maybe this is still helpful for someone else :)

dead_arm’s picture

Status: Needs work » Postponed

Postponing on #1840896: Views UI CSS Cleanup which is almost, because it updates some of the preview styling. Once that is in I would be happy to work on the CSS portion dawehner!

tim.plunkett’s picture

This issue has two parts:

  1. Users miss "save" button
  2. Users can't distinguish "editable" and "preview" areas

The second one is blocked by #1840896: Views UI CSS Cleanup, but the first is separate, and unblocked.
It could be moved to a separate issue.

dead_arm’s picture

Status: Postponed » Needs work
dead_arm’s picture

Assigned: Unassigned » dead_arm

Self-assigning to finish up.

dead_arm’s picture

Assigned: dead_arm » Unassigned
Status: Needs work » Needs review
FileSize
27.47 KB
27.35 KB
5.43 KB
FAILED: [[SimpleTest]]: [MySQL] 49,413 pass(es), 21 fail(s), and 8 exception(s). View

Changes from #5 with CSS clean up.

Chrome preview

views-preview-chrome.png

Firefox preview

views-preview-firefox.png

Status: Needs review » Needs work

The last submitted patch, drupal-1831894-10.patch, failed testing.

dead_arm’s picture

Status: Needs work » Needs review
FileSize
25.55 KB
24.32 KB

For good measure adding before-patch screenshots.

Chrome preview before

views-preview-chrome before.png

Firefox preview before

views-preview-firefox-before.png

dead_arm’s picture

Assigned: Unassigned » dead_arm
Status: Needs review » Needs work

I'll update the patch to fix the test failures.

dead_arm’s picture

Assigned: dead_arm » Unassigned
Status: Needs work » Needs review
FileSize
3.28 KB
8.72 KB
PASSED: [[SimpleTest]]: [MySQL] 49,169 pass(es). View

Updated the tests to be able to find and click the preview button.

dawehner’s picture

FileSize
8.95 KB
PASSED: [[SimpleTest]]: [MySQL] 49,151 pass(es). View
994 bytes
6.62 KB

Can't review the css side of it, but especially the missing flickering is great!
From the PHP side it looks RTBC beside that single point here

+++ b/core/modules/views/views_ui/lib/Drupal/views_ui/ViewPreviewFormController.phpundefined
@@ -43,11 +50,20 @@ public function form(array $form, array &$form_state, EntityInterface $view) {
+    // Add a checkbox controlling whether or not this display auto-previews.
+    $form['controls']['live_preview'] = array(
+      '#weight' => 110,
+      '#type' => 'checkbox',
+      '#id' => 'edit-displays-live-preview',
+      '#title' => t('Auto preview'),
+      '#default_value' => config('views.settings')->get('ui.always_live_preview'),

This seems to duplicate just existing code.

Bojhan’s picture

This still needs the box like styling, the header of view config has.

jessebeach’s picture

xjm, tim.plunkett, dwehner, jessebeach and dmistry discussed and concluded that the Save button will be placed in the bottom left, following the standard Drupal pattern. The save button in the top right will be removed.

tim.plunkett’s picture

In addition, the Save button will be persistent. Currently it is only visible if the view has been modified.

Bojhan’s picture

I am +1 to this, keep in mind though that the "distinguish" part isn't solved by this.

Bojhan’s picture

Issue tags: +sprint

tagging

damiankloip’s picture

FileSize
8.86 KB
PASSED: [[SimpleTest]]: [MySQL] 56,766 pass(es). View

Rerolled. dead_arm - goodluck.

Status: Needs review » Needs work

The last submitted patch, 1831894-21.patch, failed testing.

klonos’s picture

huh?

tim.plunkett’s picture

Assigned: Unassigned » dead_arm

huh?

what?

klonos’s picture

#22 says the patch failed testing while the patch in #21 is green. ???

tim.plunkett’s picture

I retested it from qa.d.o

dead_arm’s picture

FileSize
2.53 KB
2.37 KB
FAILED: [[SimpleTest]]: [MySQL] Repository checkout: failed to checkout from [git://git.drupal.org/project/drupal.git]. View
14.45 KB
25.45 KB
21.5 KB

Patch attached includes styling (#16 and #19) on the preview section in order to address the visual differentiation portion of this task.

Currently:

Screen Shot 2013-05-24 at 11.08.57 AM.png

With patch applied:

Screen Shot 2013-05-24 at 11.09.44 AM.png

Screen Shot 2013-05-24 at 11.09.23 AM.png

dead_arm’s picture

Created a new issue, #2003440: Change the location of the save button, for the save button portion of this task, as #7 recommended it previously and the patches thus far have addressed the distinguishing areas portion only.

dead_arm’s picture

Status: Needs work » Needs review
FileSize
2.53 KB
2.37 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1831894-27.patch. Unable to apply patch. See the log in the details link for more information. View

Add #27 to queue for testing.

Status: Needs review » Needs work
Issue tags: -Usability, -sprint, -GoogleUX2012, -VDC, -BADCamp2012UX

The last submitted patch, 1831894-27.patch, failed testing.

dead_arm’s picture

Status: Needs work » Needs review

#29: 1831894-27.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, 1831894-27.patch, failed testing.

dead_arm’s picture

Status: Needs work » Needs review

#29: 1831894-27.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +Usability, +sprint, +GoogleUX2012, +VDC, +BADCamp2012UX

The last submitted patch, 1831894-27.patch, failed testing.

dead_arm’s picture

Status: Needs work » Needs review
FileSize
9.13 KB
PASSED: [[SimpleTest]]: [MySQL] 55,713 pass(es). View

Re-rolled patch.

dead_arm’s picture

Status: Needs review » Postponed

Postponing on #1983164: Entity Forms in ajax requests don't find the route until Preview is working again, as we need all of the elements present in order to apply new styling correctly.

dead_arm’s picture

Assigned: dead_arm » Unassigned
Status: Postponed » Needs review
FileSize
59.45 KB
53.41 KB
11.32 KB
PASSED: [[SimpleTest]]: [MySQL] 57,516 pass(es). View

Preview is working, so the changes can be tested. The patch needed to be re-rolled. I got some of the styling further along, but the form markup isn't ideal to make all the changes requested, namely aligning the preview button with the field and having both of those be part of the preview header.

Currently:

Screen Shot 2013-07-26 at 2.41.25 PM.png

With patch:

Screen Shot 2013-07-26 at 2.38.28 PM.png

Bojhan’s picture

This doesn't install on simplytest.me

It really looks good though, can we get a reroll?

dawehner’s picture

FileSize
11.58 KB
PASSED: [[SimpleTest]]: [MySQL] 59,765 pass(es). View

Rerolled.

Bojhan’s picture

@dawehner Did you check it? There are some wierd things happening.

Screen Shot 2013-10-28 at 08.20.15.png

Bojhan’s picture

Issue summary: View changes

relocate text

Bojhan’s picture

Assigned: Unassigned » dawehner
Issue summary: View changes
Status: Needs review » Needs work

Ok, needs a little bit of work

dawehner’s picture

Assigned: dawehner » Unassigned

Hei, everyone should be able to work on it :)

idebr’s picture

Assigned: Unassigned » idebr
FileSize
12.17 KB

Rerolled patch attached. Can confirm it does not look good.

idebr’s picture

Assigned: idebr » Unassigned
Status: Needs work » Needs review
FileSize
197.12 KB
199.07 KB
2.72 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 82,803 pass(es). View
13.07 KB

It appears the Views UI had some updates since the last patch:

  • There is a new line above the form actions: 'Click on an item to edit that item's details.' I'm not sure if this is the correct place for this line. Should this be at the top of the page, as it is an instruction for the editing user?
  • The css from views.exposed_form.css no longer applies to the exposed filters in the preview. This seems like a regression to me. Should this be a separate issue? Found relevant issue and added a patch there: #2396465: Views UI: Exposed Filter css is not applied

Screenshot before:
1831894 before

Screenshot after:
1831894 before

dawehner’s picture

These screenshots look alright for me.

@Bojhan @yoroy
Is it okay to not tackle the argument part for now but just care about the save button area?

Bojhan’s picture

Sure, we can go ahead and remove that silly text too "Click on an item... blababa"

dawehner’s picture

Sure, we can go ahead and remove that silly text too "Click on an item... blababa"

+1

idebr’s picture

FileSize
3.22 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 82,794 pass(es). View
196.91 KB
510 bytes

I have updated the Views edit form to remove the silly text. As mentioned in my previous comment, there is a separate issue for the exposed filter styling in the View preview: #2396465: Views UI: Exposed Filter css is not applied

Screenshot after:

dawehner’s picture

Status: Needs review » Reviewed & tested by the community

Looks fine for me.

jibran’s picture

Can we have a RTL screenshot?

idebr’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
200.61 KB
196.51 KB
3.31 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 83,361 pass(es). View
469 bytes

Thanks jibran for reminding me to add RTL css :)

Screenshot after (LTR):

Screenshot after (RTL):

dawehner’s picture

Status: Needs review » Reviewed & tested by the community

Still looks fine :)

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

This issue addresses a major bug and is a prioritised change (usability) as per https://www.drupal.org/core/beta-changes. Committed ab94733 and pushed to 8.0.x. Thanks!

  • alexpott committed ab94733 on 8.0.x
    Issue #1831894 by dead_arm, idebr, technicka, dawehner, Bojhan,...
Bojhan’s picture

Whooo!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Gábor Hojtsy’s picture

Version: 8.0.x-dev » 8.0.0
Issue tags: -sprint

Thanks, removing from UX sprint now.