symphonycms/symphony-2 — Issue #907: 2.3 UI: Duplicator styles
Author: eKoeS
Created: 2011-11-20 14:01:47+00:00
State: open
Labels: ux-ui

## Before you post

This document will be updated as the discussion evolves. **Please make sure to read the summary before posting.**

### Deadline
This issue must be marked as solved before **November 30, 2011**

### Contributing

1. Create a repo called `.github.com`. Your repo will be accessible by the following URL: `http://.github.com/`
2. Import all the files listed in this repo: https://github.com/nilshoerrmann/symphony-styles
3. Make your changes
4. Push your changes to your own repo and notify all the partecipants to this discussion, along with a **detailed explanation** of what has changed and why.

## Open questions

1. Two proposals out of three make use of a flat dark gray, which looks like Windows 95
2. Ordering in Symphony 2 has always been inconsequent: in lists or tables, Symphony 2.1 highlights the selected row by darkening its colour. In Duplicators, Symphony 2.1 darkens the unselected rows.

This is something we should solve in Symphony 2.3 – we should find a consistent way to highlight ordering processes.

If we consider the ordering style of tables as the canonical one, the Duplicator should just darken the active item. If this is done with enough contrast, I just works for me (it always has in Symphony).

If we consider the ordering style of tables as insufficient, I think we should have a look at the drag and drop concept for ordering as we know it from the OS world. Popping out elements doesn't feel very Symphony-like as it doesn't solve to main problem: highlighting the active object in a simple way.

If the majority doesn't agree and popping out element is the way to go, we have to make sure to use this concept consistently: ordering should work the same across the interface.

## Proposals

### 1. Active item is darkened (by @nilshoerrmann)

http://projekte.nilshoerrmann.de/symphony-styles/symphony.htm

@eKoeS:

> While I think that Nils' changes are definitely the way to go, I think that it's still too "dark" inside and doesn't sufficiently distinguish the selected element from the others while reordering.

@nickdunn:

> My suggestion is to increase contrast on each duplicator header ("Text Input") as they are totally lost right now (when I scan down the page it feels like one long form without any headings) and to increase the size of the actions/tools panel at the bottom of the footer, since the dropdown looks lit tight.

### 2. Active item is darkened + 3D effect via shadows (by @nilswerner)

http://nils-werner.github.com/symphony.htm

[**Likes**: @allen, @brendo, @nickdunn]

@allen:

> In my opinion it's the best implementation yet so far. It's very clear to the user which item they're reordering.

@nickdunn:

> I still feel the duplicator needs better header styling. I think it was addressed, but doesn't seem to be in Nil's version.

@eKoeS:

> I like the idea of shadows, but in my opinion they are too "bold" and big. Moreover, I think that the background color for each element is too dark/flat and makes the duplicator look like Windows 95.

### 3. Active item is darkened, unactive are half transparent (by @eKoeS)

http://ekoes.github.com/symphony-styles/symphony.htm

@eKoeS:

> The idea is to use shadows in a similar way as Nils W did, but in a less obtrusive way. I also tried to increase the contrast on each element header as Nick suggested. The main difference, however, is that when you select an item for reordering the others become half transparent, which is why in my previous post I said there isn't enough distinction between active/unactive items. Last but not least, the flat background colour has been replaced with a subtle gradient with a lighter grey.

@nils-werner:

> I was thinking about taking a similar route as Simone did: fading out/darkening the remaining elements when selecting/dragging one of them. Eventually I abandoned that idea because it worsens one of the problems with drag'n'drop interfaces: You need to find the element you're moving, select it and drag it around while knowing where you're dragging it to.

> Fading out the remaining elements was no option as it makes it unnecessarily difficult to see if the target location is actually the correct one.

@eKoeS:

> I can see your point, but the current duplicator darkens unactive elements and nobody ever complained. You can still see them, they just look a bit different. As I said, I like the idea of shadows, but in my opinion they are too "bold" and big. My idea is: using less obtrusive shadows, coupling them with half transparency ("half" doesn't necessarily mean 0.5 though) as a different type of visual clue.

@nils-werner:

> I was also thinking about using CSS transitions to make the pop-out-animation a bit smoother; I just didn't find the time to do so. Now that I've seen your draft I must say I don't like it too much: The current 2.1 interface itself feels clunky and slow already. I attribute this feeling to the huge size of the draggeable elements, the not immediately visible positioning and target area and the necessity to scroll around when you're dragging across more than just one position.

> Adding both an uninterruptible start- and stop-animation to that clunky process makes it feel even slower and more uncomfortable for the user and raises the fear of unintended clicks or premature releases.

@eKoeS:

> I must premise that I added transitions just for fun. They are not useful, but I find them elegant and fast enough not to break anything in my opinion. But as I said, I didn't get the whole "unintended clicks or premature releases" thing, can you explain?

@nilshoerrmann:

> In this context we have to acknowledge that Symphony 2 opted for special ordering concept: there is no drag helper as in most operating systems. The selected item just jumps/reorders while moving the mouse – we are not seeing a semi-transparent copy of the selected element that we can drag and drop to its new position. @nils-werner's idea to order the Duplicator seems to be something in between both concepts: it doesn't use a copy but it moves the selected element out of its container.