We have a responsive website that uses Bootstrap. One of the pages is for approving a pending message for an email group. There are a lot of options available, currently displayed as a series of buttons. This first screenshot is the typical desktop view:

enter image description here

This second screenshot is the mobile view, with the More button pressed.

enter image description here

Like I said, that's a lot of buttons. How can I improve this?

1 Answer 1


I think you have at least two problems: a UI issue that causes high cognitive load and an information architecture issue with a mix of related and unrelated actions.

From what I can see, the UI has two basic elements: message and user. However, some actions are specific to the message while others are specific to the user, leading to confusion. Additionally, there are unclear actions like "Skip" and "Cancel" . Maybe they are OK, but without some context (like : what is this system for?), their purpose is unclear.

To resolve these issues, the first step is to clearly separate what belongs to the user and what belongs to the message. Then, you can improve the UI. For example, you can include user-related actions as icons next to the name.

Secondly, be more explicit with your actions and affordances. For example, clarify what "Skip," "Cancel," and "Delete" mean. Additionally, consider if there is a reason for having both "Reject" and "Delete."

Finally, there may be a third element to the UI that I haven't mentioned yet because actions are unclear: navigation. If "Skip" and "Cancel" are navigational elements, then the UI has three components: user, email, and navigation. And in this case, you should group the actions according to each component

Your Answer

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

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