3

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.

mockup

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):

mockup

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.

Improve this question

3 Answers 3

Reset to default
6

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:

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):

mockup

download bmml source

Improve this answer
6
  • Could placing the edit button on the far right cause discoverability issues? It's placed in peripheral vision which can't read the text-based link description. Do you think that could cause problems?
    – Jimmy Breck-McKye
    Oct 31, 2012 at 13:17
  • @JimmyBreck-McKye Absolutely. At first I placed a full blown button which was very prominent. But I thought it was too much since (I'm guessing here) these are probably a limited number of experienced users who have the access right to edit workflows - and could easely be tought where to find the edit-link. But I'm having an argument with myself here - and would have to do an A/B-test to get it exactly right.
    – Benny Skogberg
    Oct 31, 2012 at 13:21
  • Thanks Benny. Having more details about the application might be beneficial to you. The "flow" panel takes up the rest of the page (vertical and horizontal), and therefore wrapping everything doesn't make sense since the context is the whole page. I also agree with @JimmyBreck-McKye, having the button on the right really feels like a discovery issues. Thanks!
    – TheCloudlessSky
    Oct 31, 2012 at 13:27
  • I think using a button rather than a link (as per @BennySkogberg's suggestion) would mitigate some discoverability issues. It would also work better because the tradition is for hyperlinks to point to content, buttons for actions within the current page. Though repeated buttons on a page could be quite odd.
    – Jimmy Breck-McKye
    Oct 31, 2012 at 13:30
  • 1
    Well, the the link is actually a link to the edit page. For example: pages/1/edit.
    – TheCloudlessSky
    Oct 31, 2012 at 13:40
1

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)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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