Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We have an application where pages are created/viewed. There is two modes for users of the application: live and draft. When the application is in draft mode, you can edit multiple changes and then collectively publish the changed pages. When in live mode, they only see the current set of "published" pages. Clicking between "Live" and "Draft" switches the state of all of the pages. For example, in live mode you might see pages A, B, C. But in draft mode, you might have made changes to B and C and added D - so you'd see A, B (with changes), C (with changes) and D.

I'm having difficulty with the UI elements when in draft mode. My current mock up is as follows:

Live Live Mode

Draft Draft Mode

I have a few issues with the current design:

  1. It's not very clear that "Review & Publish" is for this page or for all of the pages. When the link is clicked, a list of all of the changed pages is displayed and then the user can click the "Publish" button.

  2. On that note, "Review & Publish" is very wordy. I originally had "Publish", but, a user said that they weren't sure if they were publishing or being taken to a page to review the changes. I was going to use ellipsis ("Publish...") but wasn't sure if it made sense out of a menu context.

  3. It's not very clear, when in live mode, that you must switch to draft to do the editing.

Hopefully this isn't too broad, but is there anything specific that I can do to help clear up some of these issues?

share|improve this question
    
I'm still not clear on the scope that 'live' or 'draft' apply to. Could you please clarify that? –  JohnGB May 8 '13 at 18:31
    
@JohnGB - Sure - I updated the post, let me know if I didn't articulate it well enough. –  TheCloudlessSky May 8 '13 at 18:33
add comment

2 Answers 2

It's not very clear that "Review & Publish" is for this page or for all of the pages. When the link is clicked, a list of all of the changed pages is displayed and then the user can click the "Publish" button.

The hierarchy of pages and their state isn't communicated in your GUI. Simply reshuffling some elements should help here.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

On that note, "Review & Publish" is very wordy. I originally had "Publish", but, a user said that they weren't sure if they were publishing or being taken to a page to review the changes. I was going to use ellipsis ("Publish...") but wasn't sure if it made sense out of a menu context.

The ellipsis to indicate there will be some input required before the pages will become published is common enough and its use is certainly not limited to menu's. However, I'm doubtful every user will recognize this hint. Especially where the the end state is kinda critical, some extra confirmation that you will be able to review everything before it's done would be helpful. Consider a webshop for instance, there will always be a very clear indication you will be able to review the order before you have to pay.
So, I think being a bit wordy here is a good thing.

In fact, why not be even wordier? Put in some micro-copy that tells your user that "pages cannot be edited in live mode" or "you'll be able to review pages before publishing" or even "switch to draft mode to edit pages".

It's not very clear, when in live mode, that you must switch to draft to do the editing.

So, why isn't it the Edit mode then? As far as modes go, Live and Draft are not clearly opposites either. If the important thing is being able to switch to a mode where you can do editing, label the mode as such.

I'm also confused about how pages being Live and the act of Publishing relate to each other. If I publish a page, language wise it would make sense for the page to end up as "published".

share|improve this answer
add comment

You should use the same terms for the same things.

Can My First Page be Flow Charts?

Publish and live are in the same semantic field: why not saying Go live and Live or Publish and Published?

If you choose second option Draft can be Unpublished.

Review and Edit have a close meaning: why not using Preview instead ?


Why don't you granularize the edit mode to the chart level? So the complexity of the user's mental model is simplified.

  • Live and Draft should be Published and Unpublished (the user can switch a flow chart to one state or another)

  • Edit should be accessible when published or unpublished (according to the user role)

Différent steps of a chart flow:

1. Creation

2. Edition : When in edition mode the last version of the chart is displayed but the user can override it by the published content.

3. Preview

4. Published

Everything is autosaved.

Pages should not be considered by the user, it is just an aspect of the publishd formatting.

share|improve this answer
    
The problem with doing the two column layout is that our "pages" aren't actually "pages" - they're flow charts. And for this reason, maximizing screen real estate is really important. Also the reason 3 modes is required is because in Live, you're always "viewing" the flow charts, but in Draft you can "view" but also "edit" them. When you "view" a flow chart, it's a different experience than editing (think PowerPoint's "editor" and "presenter" modes). –  TheCloudlessSky May 9 '13 at 11:23
    
Okay for the layout and modes but you really should granularizing to the flow chart level. –  Gildas Frémont May 9 '13 at 16:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.