|
Hi there, I definitely believe that we should support the i-Google style preview that our 'drag and drop layout preview' pattern supports. However, I had also not noticed before that (as Eli pointed out) the iGoogle portlets are all the same size. If this pattern is used for columns with different widths, I'm guessing this may complicate things from both a coding and user perspective. For instance, how do you clearly tell a user that they cannot drag a portlet from a wider column into a narrow column? It may be that there would be enough feedback with the fact that a drop target did not appear, but that would be something I think we should user test. Another question would be whether we even want to prevent that interaction...should users be able to drag portlets around without worrying about column width? I'm guessing the coding for this could be complicated. This could result in a page like this:  ...but perhaps there *may* be contexts where this would make sense (e.g. users organizing piles of photos if the Gallery every implements this). I did a bit of searching on the web and it seems like not too many portals (or design patterns) are dealing with at least *moveable* portlets of differing widths yet, so this is probably something that deserves more thinking and then inclusion in our design patterns. I had also been a bit confused by what was described as the more "Yahoo!-style" interaction our Layout Customizer displayed, as I hadn't been too involved in the Layout Customizer design process and actually hadn't seen a (in the process of being dragged) portlet avatar represented as a very small box before. Today I realized why--Yahoo! has apparently recently changed this interaction in their portal, though their drag-and-drop modules Design Pattern has *not* been updated to reflect it: http://developer.yahoo.com/ypatterns/pattern.php?pattern=dragdropmodules#. If you hit "play" you will see that a half tone avatar is still used here, as opposed to the very small box representing the portlet which Layout Customizer (and My Yahoo!) is currently using. This is the interaction I was more familiar with, and is represented by our Drag-and-drop List Ordering Pattern (http://wiki.fluidproject.org/display/fluid/Drag+and+Drop+-+List+Ordering). I had a short conversation with Gary about this a few weeks ago, and he said that after the usability testing done on a more i-Google-like implementation: "One of the main concerns was keeping the drag avatar the same size as the original portlet. With potentially very large portlets, there were usability issues with having such a huge drag avatar, jerk-like shifting in the page contents on drag, and sometimes obscuring the drop target indicator with the drag avatar." It sounds like this could be a real concern, but I'm wondering if using a full-size half-tone avatar (which you can see through, so the drop target is visible), which both Yahoo!'s *design pattern* (not portal) and iGoogle use, might mitigate this problem in a more effective way. This could be backed up by user testing, but I am worried that users will not be able to see or understand the interaction of a very small avatar, which they may not clearly be able to understand is a representation of the portlet they are dragging (because it is difficulty to make that mapping and is likely not in accord with the user's mental model of what a portlet looks like). With an avatar that is the same size which immediately moves from the original spot when the user begins to drag it, the mapping is much more clear. I had also suggested to Gary that we make our drop target color very different from the portal's theme colors (e.g. make it green) to ensure users could see it. I would also recommend including this info in the design pattern. Also, I thought the way the drop target is placed right next to a portlet without any padding makes it harder to see. I'd like to see it spaced about halfway between the portlets in between which it is indicating a drop target. After we figure out what to do with the portlet avatar styling for the Layout Customizer if anyone is up for thinking through some of this and updating the design patterns with me, let me know. Thanks! Allison On Apr 16, 2008, at 4:54 PM, Daphne Ogle wrote:
Allison Bloodworth Senior User Interaction Designer Educational Technology Services University of California, Berkeley (415) 377-8243 |
_______________________________________________ fluid-work mailing list [email protected] http://fluidproject.org/mailman/listinfo/fluid-work
