search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.88k stars 1.82k forks source link

Condensed components #6202

Open pascal-potvin opened 4 years ago

pascal-potvin commented 4 years ago

Summary

As we work on transitioning legacy UIs to Carbon X, or working in data driven products, we have identified components, spacing and type that are hard to implement in our products due size or functionality.

Both design and development.

Justification

While these Carbon components are airy and look really nice in the UI, our users need a more condensed layout than what Carbon currently provides. Our users are building complex pipelines, models, data modules, tables and rules which means that they need to make the most of their screen real estate to allow for referencing data that they need to complete a task. We are not able to fit a many elements as users are expecting.

We know that the geometry of the components also takes into account that web based UI’s are more likely to scroll or to have tasks take place across multiple pages compared to native apps like Sketch or Adobe products. However, some data modellers user our products the same way we use Sketch. They can't use pagination to browse data tables and content they want to see as much data as possible on the screen at once. It is their day to day tasks and flow

Desired UX and success metrics

The change to Carbon should not negatively impact how users actually perform their daily activities. If we already have some compact components, why not allow for every component to be used in compact mode?

"Must have" functionality

Provide the option for compact versions of every component. i.e. Overflow menu in a compact data table is not ideal. We should have a compact version.

This should not be a full list of functionality; the Carbon team will work with you to define functionality based on the desired UX.

Specific timeline issues / requests

As soon as possible. This will impact our next release by end of year. We are currently transitioning many legacy products to Carbon X.

NB: The Carbon team will try to work with your timeline, but it's not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!

Available extra resources

We can have designers ready to help out

Boxnote Information gathered for RegTech. If you required additional examples from other products, please let me know: https://ibm.box.com/s/ccjiklmt70iuqe7orfnryrlys2hje5bh Sketch file: https://ibm.box.com/s/ysg5abgsy15wwwpxsn1puv3kw3mw4eu5

Carbon is a collaborative system. We encourage teams to build components and submit them for integration as either add-ons or core components.

aagonzales commented 4 years ago

@pascal-potvin hello! Yes, we have heard a need for smaller components before and we are open to exploring the possibility of adding them to the library.

The images in the box file are not loading for me (box is so annoying with images), we'd love to see you usecase more and any product images you have would be great to see. You can slack them to me if need be.

image

andrea-island commented 4 years ago

@pascal-potvin the images are also not loading for me. I was wondering if you have a use case for condensed StructuredList, as we have a need for that in Cloud Pak for Data :)

pascal-potvin commented 4 years ago

Sorry for the boxnote issues around images. Here are some As-is legacy images image image image image

Here are designs with current Carbon components: image image

Same designs but with updated condensed components: image image

pascal-potvin commented 4 years ago

Hi! I just wanted to add additional supporting materials as we keep designing our products towards Carbon 10.

Examples image image image

andrea-island commented 4 years ago

Here's an example of where we would need a condensed StructuredList component in CPDS.

Screen Shot 2020-06-22 at 2 33 08 PM
pascal-potvin commented 3 years ago

There have been a lot of progress since I opened this ticket and I appreciate the efforts by all here :). Would it be possible to evaluate the implementation of 24 px components as well such as dropdowns? Many of the legacy products would actually benefit from this added space. Having that additional flexibility ensures we are not negatively impacting our users experiences

andrea-island commented 3 years ago

Information density is a topic that is still coming up in many conversations. What do we need to do to move this along?

aagonzales commented 3 years ago

@andrea-gm Here's what we would need to move forward

I see some of exploration in the Sketch file just need to make sure everything is there.

Also a great way to help move this along might be to look for developers to contribute these in a PR. It should be easier than a whole sale new component since its mostly only modifying one factor.

I can talk to the team about adding this work into our coming sprints as well. Let us know if someone on your side picks up any of these tasks otherwise we'll get them into our backlog.