UI COMPONENTS
UI COMPONENTS
Embedded Files
Canvas Home | Typography | UI Components | Visual Elements | Iconography | Images | Resources
Best Practices for UI components
Interactive UI components, such as buttons, accordions, sliders, and drop-downs, are essential for creating engaging and user-friendly web experiences. They should be clear, responsive, and consistent in design, behavior, and placement to help our users build familiarity with the interface, enhancing overall usability.
Best Practices for UI components
Interactive UI components, such as buttons, accordions, sliders, and drop-downs, are essential for creating engaging and user-friendly web experiences. They should be clear, responsive, and consistent in design, behavior, and placement to help our users build familiarity with the interface, enhancing overall usability.
Spacing
Spacing
Adequate spacing is crucial for enhancing the usability of interactive components, as it improves readability and prevents a cluttered appearance. Ensure there is sufficient padding around buttons, dropdowns, and links to create visual breathing room, making it easier for users to interact without accidentally selecting nearby elements.
Consistency
Consistency
Consistency in the design of interactive components is key to creating an intuitive user experience. Use uniform font styles, sizes, and weights for buttons and links, and establish a clear hierarchy for different interactive elements. This consistency helps users quickly recognize and understand their functionality.
Alignment
Alignment
Proper alignment of interactive components enhances order and usability in the interface. Ensure buttons, dropdowns, and links are consistently aligned within their containers, using left, center, or right alignment based on context. This approach not only improves aesthetics but also facilitates easier interaction and navigation for users.
Buttons/Links
Buttons/Links
Main Button
Color: #B31B1B
Font Size: 30
Style: Open Sans Semibold/Bold
Secondary Buttons
Color: #3A4048
Font Size: 20
Style: Open Sans Semibold/Bold
Links
Color: Use a standard link blue (#3A708B) or Cornell Red (#B31B1B) brand color for consistency.
Differentiate visited links with a darker or lighter tone.
Font Size: Depends upon what is being linked, i.e. if a title or body copy is being linked
Style: Links are underlined
Accordions
Use accordions to group related content and maintain a clear content hierarchy. This organization helps users find information quickly and improves the overall navigation experience.
Accordions
Use accordions to group related content and maintain a clear content hierarchy. This organization helps users find information quickly and improves the overall navigation experience.
Use visual indicators, such as plus (+) and minus (-) signs or arrows, to show the state of each section (collapsed or expanded). Ensure these indicators are easily recognizable and consistent throughout the design.
Ensure expanded content has adequate padding and spacing for readability.
Size: Similar size to text size | 35px
Color: Cornell Red (B31B1B) or Hyperlink Blue (#3A708B)
Drop Downs
Drop Downs
Group related options together within the dropdown to improve usability. Use visual separators or categories if necessary to help users navigate through the options easily.
Use visual indicators, such as a caret or arrow, to show the state of each section (collapsed or expanded).
Provide a default selection or placeholder text to guide users and indicate that an action is required. This can improve clarity and encourage interaction.
Maintain a consistent style for all dropdowns throughout the interface, including colors, fonts, and spacing. This consistency helps users recognize and understand their function across the site.
Caret/Arrow Size: 25px
Color: Cornell Red (B31B1B)
Page updated
Report abuse