Button system Design

1. Choosing the tech platform and device type:

For this project, I'll design a button system for a mobile banking app on smartphones. I've chosen this because:

- Mobile banking is widely used and requires a clear hierarchy of actions

- Security and trust are paramount, so the design needs to convey reliability

- There's a mix of frequent and critical actions, allowing for a diverse button system

2. Developing the button system:

I'll create a system with four button priorities:

a) Primary

b) Secondary

c) Tertiary

d) Destructive

Each button type will have the following states:

- Rest

- Hover (for devices that support it)

- Active/Pressed

- Disabled

Button parameters:

- Height: 48dp (to ensure easy tapping on mobile)

- Horizontal padding: 16dp

- Corner radius: 8dp

- Font: Sans-serif, 16sp, Medium weight

3. Button priorities and states:

a) Primary buttons:

- Used for the main action on a screen (e.g., "Transfer Money", "Pay Bill")

- Default: Solid fill with brand primary color (#3F51B5)

- Hover: 10% darker shade of primary color

- Active: 20% darker shade of primary color

- Disabled: 50% opacity of default state

b) Secondary buttons:

- Used for important but not primary actions (e.g., "Add Payee", "Set Up Recurring Payment")

- Default: Outline with brand primary color, white fill

- Hover: 10% fill of primary color

- Active: 20% fill of primary color

- Disabled: 50% opacity of default state

c) Tertiary buttons:

- Used for less important actions (e.g., "View Statement", "Contact Support")

- Default: Text only in brand primary color

- Hover: Light gray background (#CCCCCC)

- Active: Slightly darker gray background (#E0E0E0)

- Disabled: 50% opacity of default state

d) Destructive buttons:

- Used for actions that need caution (e.g., "Delete Account", "Cancel Transfer")

- Default: Solid fill with red color (#D32F2F)

- Hover: 10% darker shade of red

- Active: 20% darker shade of red

- Disabled: 50% opacity of default state

4. Accessibility considerations:

- Color contrast: I've ensured that all buttons meet WCAG 2.1 Level AA standards for color contrast.

 - Primary and Destructive buttons: White text on colored backgrounds

 - Secondary and Tertiary buttons: Colored text on light backgrounds

- The 48dp height ensures buttons are easily tappable on mobile devices

- Clear, descriptive text on buttons to aid understanding

- Consistent styling across the app to improve learnability

5. Explanation of design choices:

a) Color scheme:

I've chosen a blue (#3F51BF) as the primary color to convey trust and reliability, which is crucial for a banking app. Red is used for destructive actions to signal caution.

b) Button hierarchy:

The four-tier system allows for clear differentiation between actions. Primary buttons stand out the most, guiding users to the main action on each screen. Secondary and tertiary buttons are less prominent but still easily accessible.

c) States:

- Hover and active states provide clear feedback to users, improving the perceived responsiveness of the app.

- Disabled states are at 50% opacity to clearly indicate when an action is unavailable without losing brand consistency.

d) Typography:

Sans-serif font at 16sp ensures legibility on mobile screens. Medium weight provides enough emphasis without being too heavy.

e) Shape:

The 8dp corner radius softens the buttons slightly, making them feel more approachable while maintaining a professional look.

f) Consistency:

By using the same color scheme and styling across all button types, we maintain a cohesive look throughout the app, improving user understanding and navigation.

This button system aims to provide a clear, accessible, and trustworthy user interface for the mobile banking app. It balances the need for prominent call-to-action buttons with more subtle options for secondary tasks, all while maintaining consistency and adhering to accessibility standards.