UX guidelines for placing edit buttons?

Question

I am working on finding the best placement for the edit button for a company website already in existence (used for internal staff & clients). This is a review page after a Client has filled out a Grant form and has 2 sections that will be editable. First, the user will have the option to add Special Instructions if desired (optional). Once they enter the Special Instructions and have saved them, they will have the option to edit them if desired. The second option will be to change the percentage of allocation of assets. So, for instance, if they originally had 2 assets, and wanted to reallocate divestments, let's say instead of 40%/60% they wanted to change it to 50%/50%, they have the option to change it. Once they choose to change it, input boxes appear to enter the new percentage. From there, they will cancel, clear, or save their input. After saving, they will have an edit button there as well in case they want to edit again.

The question is, where do edit buttons typically go? I've read about the direction of the eye based on the information present on the page (Z path vs. F path for example). I've gotten feedback that Windows users might want to see it in upper right corner (not sure if I follow that as I've tried to find examples of this but I am open to this being valid). The current pattern is all over the place within the UI. Sometimes upper right corner, sometimes upper left, sometimes outside of the container, sometimes within... And I've found examples of several patterns online that differ widely based on use case. I want to find out from other UXers what their experience is in where to best place the edit button, and if it is just up to the particular use case or if there is a standard pattern that is typically followed.

This was my original wireframe:

However, currently the "edit remove" buttons for the Special Instructions are in the upper right corner, and if I am following that pattern, that would mean I would have to place it upper right for the reallocations section as well, which to me, doesn't look right. But I am open to any feedback!

I am a newer UX/UI designer to the field, so feel free to educate me!

Answer 1

There are two types of hierarchy patterns:

Z Pattern - This pattern is best used for content that is not text or content-heavy.

Gif credit Apple

F Pattern - The F pattern for viewing is more prominently used on text-heavy pages such as articles and blog posts.

Gif credit The Verge

Your design best fits in Z pattern.

But you are not following consistency, consistency is one of the key principles of UX.

Check the below example of Stack Exchange profile page: The page as a whole has the F pattern but if you see the section in the above image, it is following Z pattern and is consistent in its design and pattern.

As per your question about edit buttons, there is no fixed position for placing such buttons.

Your placement is proper but you need to be consistent, either by placing them inside the box or outside of the box.

Hope this helps!

Answer 2

It's less important to position a button based on how another UI does it and make sure your users understand the positioning. UIs are all different, users learn various UIs, memorize and expect positioning to be consistent within them. Find a pattern you like or have already adopted, and keep it consistent.

What I see here is a confusing for a few reasons:

• Edit Grant (at the top), although explicit, is proximal to the top of the entire form so expecting what will happen is ambiguous. It almost looks to me like an 'edit mode' that allows me to change everything in the grant. Will this allow me to change the grant purpose, or that entire section, or the entire form?
• Edit within the section is not explicit ('edit') but is proximal to the group, so I would expect this button to edit that section, but it's always better to describe exactly what this is doing: "edit [section/group/category etc.]"
• additionally what I see missing, that is critical, is interaction of the form elements when editing, and how does the user submit or cancel those changes.

To your main question buttons that are important often exist at the top of a relative section or page, or they are directly proximal to the object that requires the action.