An idea for bridging the user interface gap between 5.6 and 5.7
Permalink 1 user found helpful
While following the development of version 5.7 I've seen a lot of excitement about all the new features, versatility, and clean, modern code. An incredible amount of work went into making 5.7. One thing I did notice though was how many people were unsure of and unhappy with some of the user interface changes. Developers are worried that clients will have a hard time adding and changing content.
It is enough of an issue that veteran developers (who are totally committed to concrete5) have said they will not upgrade to 5.7 in its current form.
Based on the comments from developers and users on the forums, I attempted to bring what people liked about 5.6 into 5.7 (while keeping what people liked about 5.7).
The mockups use the 5.7 design language with only slight changes and a small addition. I tried to include things that would not require a ton of new code to put in place. The goal was to remove confusion with clearly defined areas and blocks. I did some A/B testing with people who weren't tech savvy to see what versions they found easier to understand (to simulate a typical end user case).
Areas with existing blocks
http://imgur.com/a/Ne8wB
Areas without blocks
http://imgur.com/a/ACGjP
Update: revised colors based on excellent feedback from ChadStrat
- light blue and light green overlays
Areas with existing blocks
http://imgur.com/a/OZ8fH
Areas without blocks
http://imgur.com/a/krtB3
Update: the move arrow is visible on hovered blocks
http://imgur.com/qNNKOla
Also, because the outlines are thin and the colors are semi-transparent, I thought that being able to configure colors in the theme would be useful. In the way that 5.7 uses LESS files for the theme presets - you could configure the colors for the sitewide areas, page areas, overlay, and "block drag indicator". This way if someone has a theme using similar colors, they could choose other colors with better contrast.
It is enough of an issue that veteran developers (who are totally committed to concrete5) have said they will not upgrade to 5.7 in its current form.
Based on the comments from developers and users on the forums, I attempted to bring what people liked about 5.6 into 5.7 (while keeping what people liked about 5.7).
The mockups use the 5.7 design language with only slight changes and a small addition. I tried to include things that would not require a ton of new code to put in place. The goal was to remove confusion with clearly defined areas and blocks. I did some A/B testing with people who weren't tech savvy to see what versions they found easier to understand (to simulate a typical end user case).
Areas with existing blocks
http://imgur.com/a/Ne8wB
Areas without blocks
http://imgur.com/a/ACGjP
Update: revised colors based on excellent feedback from ChadStrat
- light blue and light green overlays
Areas with existing blocks
http://imgur.com/a/OZ8fH
Areas without blocks
http://imgur.com/a/krtB3
Update: the move arrow is visible on hovered blocks
http://imgur.com/qNNKOla
Also, because the outlines are thin and the colors are semi-transparent, I thought that being able to configure colors in the theme would be useful. In the way that 5.7 uses LESS files for the theme presets - you could configure the colors for the sitewide areas, page areas, overlay, and "block drag indicator". This way if someone has a theme using similar colors, they could choose other colors with better contrast.
This looks really promising.
At least this would be a must have add-on for 5.7. :)
At least this would be a must have add-on for 5.7. :)
Something like this is way overdue.
Like this. Particularly like the idea of it being available in the theme - that makes a lot of sense.
This is exactly the kind of critical and constructive review 5.7 desperately needs right now.
In the last week or so we've started to build a couple of sites on 5.7 and both my wife and I have found this aspect of adding blocks confusing and error-prone.
We've both added blocks to the wrong areas, struggled to find drop locations and overall found block adding quite tedious - and this is on a reasonably basic theme we've built ourselves, with only a few editable areas. We're not exactly beginners here!
To be positive though, I don't think these issues will be that hard to address, it's just a case of them being focused on.
Maybe I should start making some videos covering these issues...
In the last week or so we've started to build a couple of sites on 5.7 and both my wife and I have found this aspect of adding blocks confusing and error-prone.
We've both added blocks to the wrong areas, struggled to find drop locations and overall found block adding quite tedious - and this is on a reasonably basic theme we've built ourselves, with only a few editable areas. We're not exactly beginners here!
To be positive though, I don't think these issues will be that hard to address, it's just a case of them being focused on.
Maybe I should start making some videos covering these issues...
I have added the attached CS file to my theme (and called it in the header.php) and it helps me get around the 5.7 UX issues (including improving the contrast and shrinking the Add icon size) but this stuff absolutely needs to be configurable in the theme. Although the current trend is for sites to be styled like Elemental, one size does not fit all.
UPDATE: To get my CSS file to override the style in the core app.css, I actually had to call it in the footer.php file (certainly NOT ideal)
UPDATE: To get my CSS file to override the style in the core app.css, I actually had to call it in the footer.php file (certainly NOT ideal)
:mesuva
This was all discussed and point-blank rejected by the core team (like labels as well as icons in toolbar instead of just icons). An addon is your only hope.
What we really need is WISIWG so we can place them anywhere instead of just in certain areas..
This was all discussed and point-blank rejected by the core team (like labels as well as icons in toolbar instead of just icons). An addon is your only hope.
What we really need is WISIWG so we can place them anywhere instead of just in certain areas..
I wouldn't be so pessimistic, your example of the main toolbar is actually a good example of the core team actually taking on board the discussions.
There is now the option to turn on labels (and make the fonts on the buttons bigger), via an accessibility page:http://www.concrete5.org/documentation/using-concrete5-7/dashboard/... (new docs yo!)
This is a nice middle ground and I was really pleased to see the points about the buttons taken on board.
All these things are going to be a case of putting forward concerns with solid (and achievable) suggestions for improvement. Just because someone might say no initially doesn't mean you should completely give up debating your point - present a better argument.
There is now the option to turn on labels (and make the fonts on the buttons bigger), via an accessibility page:http://www.concrete5.org/documentation/using-concrete5-7/dashboard/... (new docs yo!)
This is a nice middle ground and I was really pleased to see the points about the buttons taken on board.
All these things are going to be a case of putting forward concerns with solid (and achievable) suggestions for improvement. Just because someone might say no initially doesn't mean you should completely give up debating your point - present a better argument.
@mesuva
That's the first positive sign so far in a sea of despair. Kudos must be given in this case even though it is a minor cosmetic (the docs out before release would have helped).
That's the first positive sign so far in a sea of despair. Kudos must be given in this case even though it is a minor cosmetic (the docs out before release would have helped).
ChadStrat