Placement of edit link beside long title?

Question

I'm working on an web application that is flow-chart like. Each page has a star to "bookmark" the page, a title and below it is the actual flow chart/shapes. The flow area takes up the remaining vertical/horizontal space. In the application there are two modes: viewing and editing the flows. In view-mode, users with permission need to be able to switch contexts and edit the flow.

However, I'm having a difficult time coming up with a good placement for the edit button that is intuitive to the user. Right now, the edit button is beside the title. I see a couple of problems with this:

1. If the title is really long, the edit button gets pushed over. Therefore, it's not in a consistent position.
2. Having it beside the title seems as though it means to edit the title and not the actual flow.

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

The second idea I had was to place the edit button to the far right. However, doing so might cause some long mouse distances on larger monitors (the layout is fluid):

^{download bmml source}

Finally, I was thinking of having the edit button inside the rectangle of the flow area... maybe in the top right hand corner? Maybe a cog wheel icon in the top right that displays a dropdown?

Most blog systems usually have the edit button below the title. And this makes sense because there are other elements normally below the title such as comment count, date posted etc.

All of these mockups still feel wrong to me, so I'd really appreciate an experts input for making this feel right.

Answer 1

You are definitely on the right track here, and it feels wrong since you lack the context. Placing edit next to the title makes you think you only edit the title. Placing the edit-link to the right makes you wonder what you can edit. Placing the edit-link inside the workflow makes you think you are editing the workflow (and not the title). So there’s something missing in your design, something very important . . context.

Your edit link doesn’t have context. You need to place some sort of wrapper to the entire workflow, such as a background color or a line. Anything that distinguish your workflow from the rest of the application. When that context is made you should make clear that it is what’s inside the context that you’re actually editing.

One example of this could be the following mockup:

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

The edit-link is placed to the top right corner of the wrapper, telling the user that when you hit edit within this context – you can edit both title and workflow, since the edit-link is not in line with neither the title nor the workflow itself.

---

Edited mockup (to respond to comments made):

^{download bmml source}

Answer 2

I would look into putting the edit link in the visual hierarchy of the UI it would impact, e.g. below (although you can probably come up with better)

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

Answer 3

I would put "Edit flowchart" instead of just "Edit" and put it beside the title.

The new link label is less ambiguous and putting it beside the most visually prominent element (ie the title) ensures that the link will be seen.