Condensed components

[pascal-potvin]

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]

@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.

[andreagmann]

@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]

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

---

Here are designs with current Carbon components:

Same designs but with updated condensed components:

[pascal-potvin]

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

Examples

[andreagmann]

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

[pascal-potvin]

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

[andreagmann]

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

[aagonzales]

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

• List of all components that would need a condensed variant
• Design specs for each
• We should also convert this issue into an epic and open individual issues for each components.

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.