Interface for managing public and private profile fields

Question

I realized that my previous question was somewhat confusing and a bit hard to answer. I have thought about the situation and decided to delete that question and ask this one (which is better set out).

I am building a system where users have access to a Profile page and an Account Settings page.

The site administrator can create and edit custom fields in the system. For example, if I run a website about linux, then in additional to the default field of Display name, I can add fields such as Favorite linux distribution, Years using favorite linux distribution, Country, Linux conferences attended, etc.

Each custom field can be marked as public or private by the system administrator. For example, I could have these fields:

• Favorite linux distribution (PUBLIC)
• Years using favorite linux distribution (PUBLIC)
• Country (PUBLIC)
• Linux conferences attended (PUBLIC)
• Number of children (PRIVATE)
• Relationship status (PRIVATE)

This is what the profile page looks like

^{download bmml source – Wireframes created with Balsamiq Mockups}

Questions:

Should there be seperate interfaces for editing public and private fields?

Here's a mockup that combines editing public and private fields into 1 interface:

^{download bmml source}

Here's what it might look like if we use separate interfaces:

^{download bmml source}

How should the administrator manage those fields if I have separate interfaces for editing public and private fields? Currently, I have a form editor for just managing public fields:

^{download bmml source}

The editor is what you see is what you get. If you order the fields a certain way, and edit each field to be a certain way, they are exactly what the user will see when they use the edit profile form.

Problem: If I have separate interfaces for editing public and private fields, I need have an interface that allows me to easily change a field from public to private and vice versa. I should be able to define seperate ordering for public and private fields.

I have thought about an interface like so:

• Users can drag fields within the scrolling list to reorder them.
• Users can drag fields between the scrolling lists to turn them into public or private fields.

^{download bmml source}

The problem with the above interface is that is is much inferior to the What you see is what you get interface I have outlined earlier. It is also more abstract and harder to visualize the fields.

Is there a better way to do this?

Finally, what should the private fields be called? The term private fields by itself does not really tell the user how the site owner will use that information and merely states that it won't be visible to public.

Answer 1

Should there be seperate interfaces for editing public and private fields?

No, I like the approach of having an explanation under. Perhaps you could steal the icons from facebook (eg, globe from facebook), but a hover for that icon wouldn't be that effective. Perhaps hover for the field (but hover, not focus). So, private fields with different visuals, on hover explanation appears underside about privateness.

As for the separate interfaces, I don't believe that all people would actually read that line between menu and form, usually they do miss such, as marketing can put so much bullshit at the beginnings of the forms...

How should the administrator manage those fields if I have separate interfaces for editing public and private fields?

I think making the editor with a List inlay pattern, and using the same visual distinction as you use on the frontend would do. I'm pretty sure you'll need other 'meta-data' fields as well, make it simply a dropdown combobox in the edit panel, called "visibility", and have the same visual distinction when being in list view.

As for scrolling, either add draggable affordances to the edge of the question list, or an up-down pair of buttons, exactly like what you see here as the "voting system".

Finally, what should the private fields be called? The term private fields by itself does not really tell the user how the site owner will use that information and merely states that it won't be visible to public.

What would be the user goal with telling something JUST to the site owner? Especially marriage status, do single girls expect the site owner to call them? What would be the benefit of the user to tell this to the site while keeping it private from everyone else?

(I can understand what would be the benefit of showing something only for logged-in members, or friends on social networks, or to people you've accepted subscription of, but that's not "private")

Take clues from online formbuilders like Wufoo or Google Forms (part of Google Docs)

And don't be shy, these are pretty good designs so far!

Answer 2

How about something along these lines?

^{download bmml source – Wireframes created with Balsamiq Mockups}