Comments on: Cut & Paste http://fluidia.org/wp/2009/12/cut-paste/ agile UI prototyping Thu, 29 Apr 2010 23:36:48 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: pauric http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-233 pauric Wed, 09 Dec 2009 18:42:20 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-233 apologies - fitts law, not the law of my friend Fitz which is to 'drink early and drink often' apologies – fitts law, not the law of my friend Fitz which is to 'drink early and drink often'

]]> By: pauric http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-232 pauric Wed, 09 Dec 2009 18:39:16 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-232 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. 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.

]]> By: Jakub Linowski http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-231 Jakub Linowski Wed, 09 Dec 2009 04:06:03 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-231 You just select a child. If you select a parent, it selects the parent + child. Group below a group = right click. You just select a child. If you select a parent, it selects the parent + child. Group below a group = right click.

]]> By: pauric http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-225 pauric Wed, 09 Dec 2009 00:56:40 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-225 <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> <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>

]]> By: pauric http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-230 pauric Tue, 08 Dec 2009 21:47:35 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-230 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. 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.

]]> By: Jakub Linowski http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-228 Jakub Linowski Tue, 08 Dec 2009 20:31:49 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-228 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". 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".

]]> By: pauric http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-227 pauric Tue, 08 Dec 2009 20:00:29 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-227 I guess the video will HQ soon, still processing maybe? I guess the video will HQ soon, still processing maybe?

]]> By: pauric http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-226 pauric Tue, 08 Dec 2009 20:00:03 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-226 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 <a href="http://www.youtube.com/watch?v=8Pc97qAK0zo" target="_blank">http://www.youtube.com/watch?v=8Pc97qAK0zo</a> You can see how I lock layers not to be touched which eases selection. 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.

]]> By: Jakub Linowski http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-223 Jakub Linowski Tue, 08 Dec 2009 19:16:15 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-223 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 <a href="http://fluidia.org/wp/2009/03/layering-controller/" target="_blank">http://fluidia.org/wp/2009/03/layering-controller...</a> 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...

]]> By: pauric http://fluidia.org/wp/2009/12/cut-paste/comment-page-1/#comment-222 pauric Tue, 08 Dec 2009 18:53:54 +0000 http://fluidia.org/wp/2009/12/cut-paste/#comment-222 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 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

]]>