Properties Browser

14 Jun 2011 - 12:11pm
1 year ago
6 replies
871 reads
smitty777
2010

Hi IxDAers, 

I'm developing a screen which has a large number of attributes for an object.  Think of Dreamweaver, where you can select and change any number of object or page properties on the right hand side: 

http://nerdbusiness.com/articles/adobe-cs4-preview/dreamweaver-cs4_02_split.png

The workflow would also be similar to Dreamweaver in that it would be unlikely for anyone to have to change all the attributes at any one time - the system defaluts would already have been selected in most cases. 

Can anyone recommend a good design pattern for this type of interaction?  The Adobe pattern could work, but it would be a little cumbersome for this particular workflow.  

Thanks, 

 

Bill

Comments

14 Jun 2011 - 12:37pm
Leon Barnard
2008

Quince has some good examples of the "Property Sheet" pattern.

See http://quince.infragistics.com/#/Search$text=property+sheet/ViewPattern$pattern=Property+Sheet&lang=en/PatternExamples$guid=169a9d22-731c-4b22-97f8-a3e5c908f3bc

and http://quince.infragistics.com/#/Search$text=property+sheet/ViewPattern$pattern=Property+Sheet&lang=en

 

14 Jun 2011 - 1:29pm
pkdaly
2010

I like the Microsoft Expression Blend property panel. It is shown in the Quince pattern Leon shared. But if Dreamweaver is cumbersome for you Expression would be overkill. It is comprehensive, but if you don't have many properties you won't have the problems with progressive disclosure Expression does (~120 properties for an object).

Paul

14 Jun 2011 - 2:59pm
Juan Lanus
2005

IMO the issue is not that it is a properties editor but that it has many items.

Searching a long like-named items list is hideous, nobody does it.  But, you can mitigate the damage in two ways:

  1. Do some information architecture to cluster related items together, in a user-oriented fashion, and 
  2. Add a quick search artifact (like the one in this animation: http://tecnosol.com.ar/ui/excepciones/usable_by_design_how_and_why.html#L316 ).    
 
The IA part will help new users to find what thay want. The search part will help users who already know the name, or part of the name, of their target properties. Disregard developers suggestions about sorting on any column, unless there is a "this is what I want" column with "yes" and "no" values  :-)
Additionally, a nice touch is to render in bold text those properties that have been assigned a value (or tag them in other ways) as Firefoxdoes (entering about:config in the address)
If there is a Java developer near you ask her to show you the Eclipse´s properties editor (Window → Preferences). 
Avoid repeating initial words many times, as in:
  • Color of the additional screens in part #1
  • Color of the additional screens in part #2
  • Color of the additional screens in part  ...
albeit this issue is mitigated by the search feature. But, many look-alike entries lead users to errors. 

 

 

17 Jun 2011 - 2:16pm
Jochen Wolters
2010

Juan:

In addition to your excellent suggestions, another approach to making extensive sets of options more accessible is by laying out the controls in "irregular patterns" instead of plain lists.

As an example, compare this inspector window from OmniGraffle Pro with the top-most image on the Quince examples page that Leon mentioned.

The plain list may look tidier and more pleasing to the eye, but the use of color and icons, the differently-shaped widgets, and the visually distinct grouping of those widgets make it much easier to grasp functional groups of controls in the OmniGraffle inspector window.

Also, the patterns in which the UI controls are laid out in the inspector differ noticeably from page to page, so that, after some learning time, the user can make out which of the pages they are viewing with only a quick glance.

Greetings,

Jochen.

 

 

15 Jun 2011 - 10:11am
smitty777
2010

Hi all, 

Thanks for the great suggestions. The Quince examples are great - they have a nice clean look, and I like how the properties are directy accessible on the list. 

Juan, I think you really hit the nail on the head with the information architecture comment.  One of my goals is to avoid having the users scroll through endless lines of properties - so grouping them into categories will definitely help.  One UI I've been looking at closely is the way the XML tags are dealt with in Adobe Bridge.  For example, look at the way they deal with the picture metadata in the lower right hand corner of this image: 

http://images.amazon.com/images/G/01/software/detail-page/ps-ext-bridge.jpg

My only concern with using this or some type of windowshade/accordion UI is that it adds an additional navigation layer. I guess it's a tradeoff though - you either have to show everything or add layers, right? 

 

Thanks again, 

 

Bill

15 Jun 2011 - 12:05pm
Juan Lanus
2005

Hi Bill,It's a Good Thing to save the user the endless navigation, yes!The Good Thing that´s next to it is to save the user a lot of clicks to navigate a choices tree, like the one you brought in http://images.amazon.com/images/G/01/software/detail-page/ps-ext-bridge.jpg (looks nice!). 

The way I save my users from   those chores is by remembering the state, betheen <items> and sometimes across sessions. 
More details: when one dives into the design and development of something, one becomes an expert on that <something> which usually is not the case with the users. They most probably use the UI every now and then so they might not remember all the details, may be not even the names of the options and thus they might have to spend time to locate them again. 

That's why I think it's a Good Thing to redisplay the UI in the last state the user left it, probably with their preferred options visible. I'd choose a widget with state management included, and would save state on a per-user basis, better in a database (if there is one) than with cookies, to make it work as a roaming profile. 

--Juan Lanus

On Wed, Jun 15, 2011 at 12:30, smitty777 <wschmidt@nbme.org> wrote:

Hi all, 

Thanks for the great suggestions. The Quince examples are great - they have a nice clean look, and I like how the properties are directy accessible on the list. 

Juan, I think you really hit the nail on the head with the information architecture comment.  One of my goals is to avoid having the users scroll through endless lines of properties - so grouping them into categories will definitely help.  One UI I've been looking at closely is the way the XML tags are dealt with in Adobe Bridge.  For example, look at the way they deal with the picture metadata in the lower right hand corner of this image: 

http://images.amazon.com/images/G/01/software/detail-page/ps-ext-bridge.jpg [1]

My only concern with using this or some type of windowshade/accordion UI is that it adds an additional navigation layer. I guess it's a tradeoff though - you either have to show everything or add layers, right? 

 

Thanks again, 

 

Bill

(((Please leave al
Syndicate content Get the feed