Friday
Dec112009
Rethinking the Inspector
Friday, December 11, 2009 at 11:43AM Smart Inspector — a mockup of a dynamic Inspector Palette from Keith Lang on Vimeo.
Floating inspector palettes have been around a long time, and for good reason. But I think we may now have the design tools to improve how they work. Have a watch of my short video and let me know what you think*:
The video demonstrates a current problem with floating inspector palettes: window management. At 2:00 in I show an interactive, animated mockup that demonstrates some tweaks to the Inspector window mechanism that may let us focus more on the content.
Notes:
- Although not demo'd, I believe this system could work well for multiple selection, using all the pieces that are there already
- Why animate (slide) between inspector positions? I believe this, if done right, provides a less-obtrusive experience then simply having the window appear out of nowhere.
- Yes, this idea is not a totally new one, for example iScrapbook has Smart Inspectors, but they are implemented in a different way
- You can find Matt Gemmell's Attatched Window subclass here
* Apologies to the hearing impaired, I'm looking into captioning solutions. You should still get the gist.
Reader Comments (25)
What happens when there is no space to show the little tear?
What about the possibility to move the inspector window to the other side of the inspected object?
I completely agree with you that motion blur and movement is a better solution than disappear and appear.
> What about the possibility to move the inspector window to the other side of the inspected object?
I was thinking there could be a (x) that appears on the tail on mouseover, if required. But some smart logic should make this work. You could drag it to either side of the object, within reason (beyond which it tears off)
Hey Keith, great idea and I agree that with the right execution it would be pretty elegant. I am not sold on the animation, I think it may be a bit too gimmicky. I think it would be better served with a straight jump to the relevant area? A quick fade out to fade in could make the jump more obvious what is happening.
Have you got thoughts on what the behaviour would be like when you select multiple items?
@ James re: The animation, maybe try out the iScrapbook application, which doesn't use animation. I actually find that more jarring than the smooth animation (which looks better in person). After a while, a smooth palette that slides around feels very natural, in my limited experience with this mockup.
@ Pete: Something like an additional Inspector Stub next to each selected item. Clicking on that would move the inspector next to that selected item. There may be other options, but I've been unable to think of them yet. Ideas are welcomed!
Interesting stuff, Keith; thanks for the demo. You might be interested in the Adobe "Rome" demo which shows some similar contextual inspection/editing ideas. Now, if only we could just click our heels and retrofit all this to Photoshop et al...
Cheers,
J.
Based on the video I would have to agree with James about the motion blur, flicking on and off the artificial blur in those milliseconds whilst the inspector is moving, to my eyes, draws attention to the inspector. The genie effect when minimising a window in OS X, grabs your attention for a reason - to show you where your window is going so that you know where to find it. With a contextual panel you may not even need to use the options it displays - it just needs to be availale, so I can't see that you would want it to grab your attention.
The other problem with the motion blur is if you are selecting a different type of object you'll be changing the options available in panel which I would imagine would happen with a some form of animation or transparency. I think in this case you would end up with a bit of a muddy mess inside the panel as the transitions occur.
My instinct would be would be to add either a light non motion blur to just soften the panel or to dip the transparency by, say, 50%. However having not actually tried these out as you have I am happy to believe that it looks better in reality.
In relation to multiple selections perhaps the panel is completely dettached by default, if I select 50 objects I'm not sure I'd want 50 stubs cluttering up the screen.
Anyway, fantastic demo thanks for sharing your great ideas.
Fantastic. I was a bit afraid you would lose something by having the window always moving based on the element that you're inspecting. One main reason I use inspectors is to inspect multiple files really quickly in the Finder just by selecting new folders. That way I never have to move where I'm looking on screen while I select the next file. I like how this retains that ability by tearing the inspector from the element.
This is very interesting, and I have been thinking along similar lines.
A general note is that some users really would want all UIs to behave like Apple's, good or bad, and while the inspector is worth improving at the cost of inconsistency, the timeframe for this is probably not ideal because Apple is likely on the verge of updating the UI in iLife/iWork 2010.
Anyway I go back and forth between docked and floating inspector (cssedit being a good example of the former), and "attached inspectors" seem to be an excellent compromise, also improving on inspector distance.
One problem I see is the inspector covering some other object you want to click, you have that problem in the demo too when around 2:40 in the video, with the inspector attached to "IN AUSTRALIA", you have to mouse all the way beyond the inspector to click the bottom left picture.
I wouldn't know what to suggest other than trying to be smart about which side of the object the stub should pop out of, but it's not really a solution, it's a shortcoming of the approach. Perhaps users with a crowded document (or large screen) will just drag the inspector out and leave it on a side, which is what they probably do with the current inspector.
In attempting to fix the inspector, changing its location is just one aspect, it will hopefully become more contextual and customized for each object. So motion blur to switch between two different inspectors is probably inappropriate -- it's not the same inspector, shape morphing recalls painful lightbox experiences and other animation effects I can think about feel a bit to busy and attention grabbing.
Finally power users with large screens are likely to be option-clicking the different inspector panels to have multiple on screen at the same time. This is a use case that should still be contemplated.
@John Thanks for the link — Rome looks brilliant and I'm amazed I've not seen it before. I'm also very glad that it seems to be a very similar approach, which seems to work well in *real code*
/me does research on Adobe Rome…
@Jamie Thanks for the well-thought out feedback.
RE: " flicking on and off the artificial blur in those milliseconds whilst the inspector is moving, to my eyes, draws attention to the inspector" Just for the record, it looks better in person because the motion blur is not just turning on and off. The effect is reasonably sophisticated:
1. Motion blur is scaled in and out smoothly to match the speed of travel, and distance between windows. So for example, for short distances, the window has little motion blur.
2. Motion blur is angled to the direction of travel
3. Opacity also scales in a similar way, meaning that over short distances there is less change in opacity
The genie effect kind of doesn't apply to transition out because the 'stub' is disappearing also…but maybe should.
re: Details chaning in the inspector: In this case, probably animating the movement of the elements would work well. Alternatively, a transition like Palette 1>>Grey>>Palette 2
As you noted, I had tried a few things (implementing a simple gaussian blur is much simpler than a dynamic motion blur) but the motion blur proved the best. If there's enough requests for it I'll try to put up an uncompressed video file for download, I don't think video compression handles these things very well.
re: 50 stubs of multiple selected items. It could be the stubs would be better integrated with the selection rectangles that normally appear. Alternatively, they may only appear on MouseOver.
Thanks for the kind words!
@ Duncan
", the timeframe for this is probably not ideal because Apple is likely on the verge of updating the UI in iLife/iWork 2010."
From my perspective, the UI for iLife/iWork seems pretty solid. Apple seems to be smart about updating a piece at a time (aside from one-man reworks like iMovie) so I'm not sure I agree
"One problem I see is the inspector covering some other object you want to click, you have that problem in the demo too when around 2:40 in the video, with the inspector attached to "IN AUSTRALIA", you have to mouse all the way beyond the inspector to click the bottom left picture."
I think the inspector could still be draggable, while connected, to some extent. You can see that happen slightly before I tear off the Inspector at about 3:43
"I wouldn't know what to suggest other than trying to be smart about which side of the object the stub should pop out of, but it's not really a solution, it's a shortcoming of the approach. Perhaps users with a crowded document (or large screen) will just drag the inspector out and leave it on a side, which is what they probably do with the current inspector."
I agree — this solution won't serve for everyone, hence the need for the old, detached way of working.
Completely agree with your other comment. The content of the inspectors themselves could be rethought, leading to a more intuitive properties controls. They'll also need to be rethought for multitouch on the desktop in the years to come.
Thanks again for the deep thoughts.
Thanks Kieth. You know after re-watching your video today I have to say I think I agree with your conclusion, the blur does look nice. Partially what threw me was the screen shot above that I looked at after watching the video, the screenshot shows the effect much more harshly than in the demo and I think in my minds eye that's how it looked in motion. Silly really.
However what I was referring to when I mentioned the genie effect (I think your current genie effect is spot on) is simply the idea that the genie effect is saying 'look, I've started at point A and moved to point B'. The panel's point A is always the stub and it's point B always it's position wherever that may be in relation to the stub, hence your use of the genie effect.
I think however that your motion blur is attempting to achieve the same effect and what I was trying to say (badly) is that the panel doesn't really need to let the user know that it started from selected object A and is now at selected object B as the user has just made that selection, it should just be there ready for use. Imagine for example clicking 3 or 4 objects in fairly quick succession to look for info as I often do in Photoshop. The movement would make you dizzy!
Finally the reason I suggested a fully detached panel for multiple selections is that the options in the panel are most likely to be combined options relating to multiple items so therefore attaching it so a specific item or having stubs on multiple items would be counter intuitive.
Thanks again.
Thanks Jamie for explaining that.
The motion blur I think is more for aesthetics. I talked a little about why motion blue is aesthetically attractive here: http://www.vimeo.com/6527897
And as we know, aesthetically attractive UIs are perceived to 'work better', so even if it's a placebo, it's an effective one!
Totally agree with you on multiple selection — don't want a inspector jumping around everywhere madly!
Generally it's a good idea. This would make the work with all the iWork Applications way more efficient. The one thing, that came to my mind was that is should only move if it was hovering above a selected object. With that much motion it makes me dizzy.
The motion blur itself is in my opinion nice, but should only be user for movements over greater distances.
Would buy a Plugin...
Beautifully elegant solution. Good work.
Really like this idea. I think the motion blur is fine - the kind of thing that gets tweaked in development but I'm totally with you on the need for aesthetic cues in user interfaces. Really like the 'stretch and snap off' nature of the inspectors for that very same reason.
I think for Keynote it would be a big change in the way users interact with the interface, though, as the Inspector has become used for setting lots of global properties (such as slide size). Probably not a killer and a global way of turning the inspector on or off would be enough.
One of my pet hates about Keynote / Illustrator etc. is the large number of floating inspectors and palettes that crop up and the window management this requires. I wonder if there's a way of applying this to that problem.
Thanks Sam and Giles for your feedback. I'm not sure how well this method might scale for PS or other interfaces with loads of floating palettes, to be honest. Probably works well with smaller palettes.
I like it. My only concern is confusion a user might have about to what object a torn-off inspector applies, since normally it is visually attached to the object it applies to. (This problem also exists sort of with the current floating window, but it only has that one mode, so once the user learns how it applies to the selected object, then it makes sense.) Consider for example a user that somehow accidentally tears-off the attached inspector (though with your way of tearing it off by pulling to some distance away, this would be unusual).
I would love to see the kinds of contextual popup windows you show in this video better integrated into GUI toolkits; it's really easy to make a simple popup menu, but it's usually a bit harder to construct and show a nice contextual popup with more gui elements and better layout that just a menu list.
Great demo - I really like your concept! However, after using this for a while, I could see myself reverting back to the always visible inspector simply because I might become annoyed at having to click on the stub to open the inspector each time I wanted to use it. A feature that I like about the new MS Office suite is the contextual editing controls that fade in as you move your mouse closer to them (screenshot here). I wonder if a similar technique could be used to get the best of both worlds?
Thanks for posting!
Thanks Kris. I really like the idea of distance-sensitive interfaces.
I don't have that version of Word. Can you describe a little more of how that works?
IPad Popovers, Man!
You predicted them 2 months in advance. Way to go! :-)
Thanks Vlad.
I'm pretty happy that I came to the same general solution as Apple. Apple's version look a lot cleaner, so that's something to aspire to. :-)
This is very similar to the new inspector in iCal... Even the tear away.
Great find mattyohe — I never picked that one. Which says a lot about how intuitive 'tearing off' might be.