UI Placement in Content

It comes up sometimes in my work about where to place UI within content. There are some simple guiding principles that we should adhere to when placing UI within the content. These are best practices, as with all best practices, there are sometimes rare exceptions to the rule.

1. Place UI that controls or interacts with content prior to or after the content it controls.
   1. Don’t place UI somewhere sandwiched in the middle of the content it controls. This will be confusing to the end user about the scope of the control. (see point 3 for exceptions)
   2. Do place UI at the beginning of the content when it changes content following.
   3. Do place UI at the end of the content when it submits content.
   4. Sometimes it may be more clear to place UI at the end and the beginning of the content. This might look like a close button that appears as an “X” at the beginning of the content and a “close” or “dismiss” button at the end of the content.
2. Label the UI clearly. (wait… I thought you said this was placement???) Since placement may impact meaning or the presence of multiple similar UI may need unique clarification, labeling is important.
   1. Do label repeated UI in a unique way or ensure that the scope of the UI is clear.
      1. example: If there are multiple “edit” buttons on a page and it’s not clear which content is being edited, then you may need to add some alternate text, such as the aria-label attribute, to provide additional information to the user.
   2. Do label groups of controls.
      1. example: It is a common practice to have controls that edit content (WYSIWYG editors). It makes sense that these controls would be preceded by a label or heading. In this case, it’s important that the purpose and scope of the controls is clear.
3. Place UI in context when it is meaningful to do so.
   1. Do place your UI contextually if it is only interacting with a discrete portion of the content. Care must be taken to let the user know the scope of the content the user is interacting with.

While this is not an exhaustive list, it should help guide you when you are making a decision about where to place UI.