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:
- If the title is really long, the edit button gets pushed over. Therefore, it's not in a consistent position.
- 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):
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.