See what's cooking :)

Careful, it's just starting out and still super buggy. Needs Firefox. Updated: 02 Apr 2013

Cut & Paste

Saturday, December 5th, 2009
Download now or preview on posterous

24_cut&paste.pdf (255 KB)

User Story 24.

Posted by Pauric

Posted via email from fluidia’s posterous

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

13 Responses to “Cut & Paste”

  1. Thanks for this awesome deck! I have some initial thoughts. I was going to sketch something up, but I'll try to kick off with text in the interest of time.

    1) Could the clipboard popup be taller as to minimize scrolling. If the interaction to bring up the popup is a HOLD C, then it will appear and disappear very quickly. So perhaps it could be larger…

    2) I'm not sure what the difference is between paste and create instance. Is that the same functionality as on the existing CTRL V (paste) window .. with the "paste as new master" and "paste as instance" option?

    3) What is the "function" button?

    4) I like the ability to have multiple items in the clipboard. Is the list infinite? Or should we cap it to 10 items (or so), and then also clearly show which items are about to be overwritten with the next copy?

    5) I'd like to differentiate between what is inside the clipboard in terms of object or page, or maybe even instance?

    6) I don't know if layers abstracted on the right hand column is the right way to go. I was thinking of handling layers in some new way… such as that they would be handled in the context of the workspace somehow. Perhaps something like … the user select an object and specifies BELOW or ABOVE + selects another item. Or the layer pallete appears in the workspace on demand, and only the relevant objects appear in context.

    7) I like the popup approach better because it will allow for more items to be shown at once.

    • pauric says:

      1) yes, it certainly could be taller – I will redraw if we choose that route
      2) Paste creates an unlinked copy. Create instance (needs to be re-worded) creates a linked copy of the original. Modify any of the instances or the master and they all change.
      3)Function button is just a label – just space for feature creep (o;
      4)I do not imagine an infinite list is useful. Suggest following the 7 +/-2 rule, so 9 items. Suggest that when a 10th item is dropped in to the clipboard the least used item is dropped. If that's hard to figure out then I suggest a simple fifo rule.
      5)Agreed, some visual treatment that is coordinated with the rest of the UI framework. Lets say the canvas is white, the pages background is light blue then those icons in the clipboard have corresponding backgrounds. Instances could be highlighted an orange glow.
      6)Having used Omnigraffle's layer feature I have to say that the abstraction is proving very useful as they've evolved that design over the years. Two of the biggest plusses of this design are the ability to drag & drop (copy) entire layers from one page to another, this also affords very easy instantiation of groups of objects. Secondly the abstract representation allows me to more precisely select objects on a complex page. E.g.

      Lets say I have the following setup on a page

      4) Content
      3) A copied layer for the tabs. A different tab is highlighted on each page
      2) linked instance: the website header
      1) linked instance: the background – its my web page layout.

      Where I find the abstraction lends itself well to selection is the ability to Lock 1, 2, 3, and work on 4. This is especially the case where objects are directly on top of each other.

      Yes, the layers could be represented somewhere in the main window but I feel it a natural mental model to see layers as children of pages. I will create a video of how I use layers and post it up later.

      7)I have to disagree here. I tend to think of the clipboard as 'something off to the side' a little bucket where I throw stuff to reuse later. If I want an immediate copy I just do ctrl-c / crtl-v without any GUI. I have a strong dislike for pop-ups because they interrupt my flow. I agree with you that the docked clipboard makes it harder for people to see what is in the clipboard but I feel that the ability to see your content, the main window, far outweighs the need to see your clipboard. In the case of the pop-up it's either-or and the docked panel its an AND with preference given to the main window.

      Thanks! /pauric

      • Hey,

        7) Yes. CTRL C, and CTRL V already work without the need for the popup Although the user needs to press CTRL V twice to force the paste as the prompt for paste as instance or new master is important.

        My other big concern about showing layers in the page panel is that the pages would be pushed aside as the space would be used up by layers. I think we should move to a more direct approach by working on items by clicking them in the workspace (as opposed to trying to find them on the panel as text representations).

        The popup should be more immediate as it is controlled by a HOLD / RELEASE interaction. It also saves space by only appearing on demand very close to the cursor.

        Also the need for a "copy" multiple layers decreases as you can copy objects and their children. Plus, now multiple select and copy paste also works.

        Here is what I have been thinking about the layering controller http://fluidia.org/wp/2009/03/layering-controller...

  2. pauric says:

    That didn't work. Here's a quick video of me adding a new page. Then copying a linked layer and creating an alternate 2nd wireflow
    http://www.youtube.com/watch?v=8Pc97qAK0zo

    You can see how I lock layers not to be touched which eases selection.

  3. pauric says:

    I guess the video will HQ soon, still processing maybe?

  4. I like the video and my generic comment is: FluidIA moves away from traditional grouping to nesting of items. That is, placing items inside of each other as parent and children relationship. As items are nested in design time, the need to later select, reselect, deselect and lock multiple items diminishes. Selecting an encompassing parent item, also selects it's children. This is one way I'm trying to ease the activity of "refinement".

  5. pauric says:

    That sound like the way visio works, or used to when I worked with it back in the 90s. How do you solve the issue of selecting a child? How do you select a group below a group? How do you modify a child in a group (below a group) which is a instance of another master?

    I found it constraining in Visio and it still seems problematic. I'm not seeing how your Layer Controller affords this granularity.

  6. pauric says:

    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/8Pc97qAK0zo&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/8Pc97qAK0zo&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

  7. You just select a child. If you select a parent, it selects the parent + child. Group below a group = right click.

  8. pauric says:

    J: "You just select a child."

    example: checkbox in a groupbox – grouped
    on a popup window

    So selecting the checkbox requires the user to just click on the checkbox (if they want to move it or modify it in some other way)
    If they want to select the groupbox (which is a group of objects inc the checkbox) they must do what? click on some visable part of the groupbox?

    The issue I've found with this type of interaction (if I've understood you correctly) is that in cluttered design with lots of objects in close proximity it becomes difficult to select object. For example, I want to move the groupbox and all its children in the example above. I click inside the groupbox and accidentally select the popup window 'below'. Now it is in focus, I must click somewhere on the canvas to cancel focus and then more carefully (breaking fitz law) select some 'physical' part of the group to bring it in to focus.

    I do feel that while this is a more simple interaction it has not scaled to meet my needs with complex UIs. I get this interaction with Omnigraffle yet I still turn to the added functionalty of abstract layers to manage my complex layouts; objects over objects, grouped objects, common design elements (page headers)

    I would like you to further explain "Group below a group = right click." is this you layer widget?

    I think I see your layer widget as little different to presenting layers in the page panel, but without the ability to drag and drop object between pages.

  9. pauric says:

    apologies – fitts law, not the law of my friend Fitz which is to 'drink early and drink often'

  10. * says:

    The particular artical is so fantastic!

  11. My spouse and I stumbled over here by a different page and thought I might as well check things out. I like what I see so i am just following you. Look forward to looking into your web page repeatedly.

Leave a Reply