Button System for Fintech

For this design challenge, I'll choose a banking app as the tech platform, and I'll be designing for smartphones (Web,iOS and Android). Mobile banking apps typically require a variety of button priorities to facilitate different user actions and account interactions.

Button Types:

1. Primary Button: Used for critical actions such as transferring money, paying bills, or confirming transactions.
2. Secondary Button: Used for less critical but still important actions such as editing profile information or adding beneficiaries.
3. Tertiary Button: Used for minor actions like navigating to additional information, accessing help sections, or canceling an action.
4. Disabled Button: Inactive state for buttons that cannot be interacted with, often due to incomplete form fields or unavailable features.

Button States:

1. Default State: The default appearance of the button when it's ready to be interacted with.
2. Hover State (for web): Visual feedback when the user hovers over the button.
3. Pressed State: Visual feedback when the user taps or clicks on the button.
4. Disabled State: Visual indication when the button is inactive and cannot be interacted with.

Button Parameters:

• Size: Buttons should have a minimum touch target size of 48x48 pixels to ensure they are easy to tap on mobile screens.
• Color Contrast: Buttons should meet accessibility guidelines for color contrast ratios, ensuring text is easily readable against the button background.
• Typography: Clear and legible typography should be used for button text to ensure easy comprehension.
• Spacing: Buttons should be appropriately spaced to avoid accidental taps and to maintain a visually pleasing layout.

Design Choices:

• Primary Button: Utilizes a bold color to draw attention and indicate critical actions. Text is white to ensure high contrast and readability.
• Secondary Button: Features a lighter color to differentiate it from primary actions while still maintaining visibility. Text color is slightly darker for contrast.
• Tertiary Button: Uses a subdued color to indicate minor actions without distracting from more critical elements on the screen. Text color is dark for readability.
• Disabled Button: Grayed out appearance with reduced opacity and no hover or pressed states to clearly communicate its inactive status.

Accessibility Considerations:

• Color Contrast: All button text colors are chosen to meet or exceed accessibility guidelines, ensuring they are readable against their respective backgrounds.
• Size and Spacing: Buttons are sized appropriately and spaced adequately to accommodate users with varying motor abilities.