Button System Design

Design Task:

Social Media Platform: Mastodon Social Network

Develop a button system that features varying button priorities and showcases button states.

Make sure the button system clearly outlines button parameters.

Ensure the buttons meet the accessibility color contrast requirements.

Offer an explanation for your design choices.

Prioritising User Actions in Digital Products

Effective digital products hinge on understanding which user actions are most critical. Since actions within a product hold varying levels of importance, I prioritise analysing this hierarchy first when designing.

This analysis led to the following conclusion:

Primary CTAs (Calls to Action):

Compose: This is the main action users take to create and share new posts (toots) on the Mastodon social network. This should be a primary button.

For the button colour I’ve chose brand primary colours and created a vertical gradient. This way the button was given a depth and a slight 3d look and feel, elevating it a bit and making it prominent on a screen. The padding gave the label a space to breathe within a button boundaries. Adding a relevant icon to the label increased the understanding of the button’s purpose thus reducing the users cognitive load.

Finally the colour contrast has been tested using a Figma plugin ‘Able’. This ensured that the colour contrast of a button’s label and icon against its background meet the WCAG standards with AA & AAA levels.

Secondary CTAs

Boost: This action allows users to amplify existing posts from their feed by sharing them with their followers.

Bookmark: This lets users save posts for future reference. The button might be located near the original post or within the post itself.

Follow: This action allows users to subscribe to the updates of other Mastodon accounts. The button is typically located on the profile page of the user you want to follow.

Direct Message: This initiates a private conversation with another user on Mastodon. The button might be located on the profile page of the user you want to message.

Tertiary CTAs

Edit Profile: This allows users to modify their profile information, avatar, and other settings. The button might be located in the account settings section.

Explore: This could be a secondary CTA depending on the app's design. It might take users to a curated feed or discovery tools to find new people and communities to follow.

Destructive Actions

Delete Toot: This permanently removes a user's own post from the Mastodon server. Confirmation is usually required to prevent accidental deletion.

Block User: This prevents another user from seeing your posts or interacting with you on Mastodon.

Report Post: This flags a post for the server moderators to review if it violates Mastodon's community guidelines.

Log Out: This ends the user's current session and requires them to re-enter their login credentials to access their account again.

Delete Account: This action permanently deletes user’s account and thus the confirmation is mandatory.

Icon Only Buttons

Sometimes icon is enough. If it’s a well-known icon and a well-known action users can recognise with no effort and are already very familiar with, just an icon in a button can suffice.

Automations

Making a great design is awesome but making great design fast and efficiently is a whole another level.

Thank you!