search

enjalot / blockbuilder

Create, fork and edit d3.js code snippets for use with bl.ocks.org right in the browser, no terminal required.
Other
325 stars 58 forks source link

Some minor design suggestions #28

Closed erikhazzard closed 9 years ago

erikhazzard commented 9 years ago

From a discussion with Nils: 1) Some sort of different background color / subtle indicator for the mouseover area when the code is fullscreen to provide affordance to the user that something will happen if they mouse over it 2) Immediately showing / hiding the block is slightly jarring - perhaps a quick transition would make it so when the block canvas area appears, it's not as jarring 3) different icon / symbol / text for the side-by-side. Perhaps we can start off by using more labels, and then imrpove over time reducing the number of labels (explict vs. implict - try to keep the UI as unambigious as possible). At a bare minimum, all labels / images should have a title tag and images an alt tag

enjalot commented 9 years ago

these are all fine suggestions! The only thing I don't readily know how to do is #2 since I'm using z-index to pop it up... any ideas how to accomplish it technically?

erikhazzard commented 9 years ago

Couple potential solutions I've used for similar things: 1) Transition the height property from 0 to whatever the normal value should be. Alternatively, have some sort of additional div that sits on top of the block area and this div gets the heigh transitioned, so it's acting a sort of "blocker" element which would allow the height of the block itself to remain unchanged 2) Transition the transform to have it slide up off the screen and come back in (translate to negative height)

The second solution might not work very well in this case, but the first solution could potentially work. The first thing that comes to mind is changing the height on scroll, so it does add a bit of complexity. Not sure how quick of a solution it would be...Nils and I can hack on some ideas for a potential solution later

enjalot commented 9 years ago

that would be awesome! I'm already modifying the files tab on scroll (and that code could probably use a refactoring to be more "reactlike" if you guys take a look).

the first solution definitely makes sense to me. let me know what you try!

shobhitg commented 9 years ago

2) Immediately showing / hiding the block is slightly jarring - perhaps a quick transition would make it so when the block canvas area appears, it's not as jarring

Its jarring only when you were scrolling and it comes in your way. User's mind wasn't ready for that. In addition to whatever we have already, I propose to use 'escape' key as a shortkey for a toggle system.

Here is how I am hoping interactions to be:

enjalot commented 9 years ago

I like the idea of the escape key being equivalent to clicking. very reminiscent of vim mode switching. happy to add it soon, or if anyone wants to take a shot at binding the key to the react component in /public/js/components/renderer.js it shouldn't be too hard, as the function to pop up and down the renderer is already in place :)

On Mon, Aug 31, 2015 at 10:05 AM, Shobhit Gupta notifications@github.com wrote:

2) Immediately showing / hiding the block is slightly jarring - perhaps a quick transition would make it so when the block canvas area appears, it's not as jarring

Its jarring only when you were scrolling and it comes in your way. User's mind wasn't ready for that. In addition to whatever we have already, I propose to use 'escape' key as a shortkey for a toggle system.

Here is how I am hoping interactions to be:

  • Coding... coding...
  • escape
  • visulization pops up
  • escape again
  • viz goes back in z-index.
  • code more code more.
  • escape (viz shows up)
  • quick escape again within a split second (viz goes away, it was just a sneak peak before you continue coding)

— Reply to this email directly or view it on GitHub https://github.com/enjalot/building-blocks/issues/28#issuecomment-136429684 .

Ian Johnson - 周彦 http://enja.org

enjalot commented 9 years ago

I've just pushed several design iterations. This covers most issues except adding the text for side-by-side icon (I added tooltips a while back which help). I'm ok with some features remaining power-user and being a little harder to discover. The trick is to balance smooth first time use vs. a clean interface for power users. I did get some interesting feedback to add more annotations for the first use in the sidelines, I think I will add a new issue to cover that and close this one. Thanks for the help so far!