RobertaJHahn
commented
5 years ago Issue 893 from the old board was not merged to prevent duplicate issues. The Drupal information provided by scarnes9 is important input for the new design.
The problem
Blocklinks are recently available in Drupal, and they are helpful because we see how often users click on the general card area as well as the specific button links. However, the Drupal blocklink implementation is clunky and rough, with only two options on rollover, to change the background color or use a stroke outline. These designs are functional but also awkward, dated, and inelegant, including the following issues:
1) Too few color options from the IBM palette for the solid background color rollover
2) The rollover snaps instantly between colors on rollover / rolloff, which is jarring for the user.
3) The rollover on text links is dated and awkward with no animation option like the button
4) No workable option to simply make the entire blocklink and card active, but only have the text link animate on rollover
We want to use blocklinks to capture more engagement, but the current Drupal setup for blocklinks doesn't meet our design standards, the style of our Industries Design Library, or the aesthetic we'd like to deliver to end users.
EXAMPLE
The issues above and proposed solutions are shown in our "Industries: Interaction Standards" page of the Design Library. The top of the page shows our current solution, where we are forced to use the outline rollover on block links because it's the only option with a range of color options in IBM palette. There are links and visual examples of how the palette is too limited for the solid background rollovers. And there are examples and links showing examples of the design and interaction we'd prefer:
https://ibm.invisionapp.com/share/Q4GVGW2A82D#/319071090_Standards_-_Interaction
The solution
Implement improved, elegant, ideally customizable rollover effects for blocklinks. There are many good examples all over the internet, but considering v18 and v19 upcoming, here are a few simple ideas we feel match up to the direction of IBM design:
https://www.ibm.com/industries/assets/demo/card-rollover/ user: staging pass: IBM19Jul
Relevant changes to consider:
- Add the full range of IBM color palette as options for both the outline and solid color background rollover options. This will allow a range of subtle tone on tone rollovers, or higher contrast rollovers.
- Add animated fade transition for rollover on both the outline and solid color background rollover. This will change the current version from jarring to more elegant, smooth, and contemporary.
- Add a subtle animation for text links where the color fades to active state and the link slides to the right, showing the user that the link is active.
- Allow a range of control in these options above, where the Drupal user is able to set the card rollover to only use the text link animation, the outline animation, or the solid color background animation rollovers.
These changes will allow us to create a minimum of elegance and contemporary design look / feel for our rollover states that match the branding of our pages.
These changes will likely cause an increase in engagement across all IBM pages, because user testing shows clicks all over our cards. So if we can improve the rollovers by enchanting users with the look / feel of block links, we will likely see more clicks.
Additional information
This is a Design Systems feature to review, not as much for the rollover fade aspects of this change, but the rollover on text links, where the icon and / or text link animates slightly to right, showing the user that this is the action / direction the click will take them towards. We are not sure if this fits into the future Carbon + ibm direction, and would like to make sure changes like this fit towards the future. And if blocklinks have not yet been improved for Carbon + ibm, since v18, we'd like to request that these kind of changes are included there as well, because the current blocklinks fall far short of contemporary design and interaction.
stale[bot]
ghost
Wonil-Suh1 created the following on Jun 23:
As a IBM dot com user, I need a way to understand and identify the right item from a long list of links on a page, such as the search result page.
Additional information
In 2019, this is one of the main components used by the Product Discovery team. They just started their redesign effort - this work will be done in collaboration with them - they will do the research and propose UX, and visual design, we will co-design with them when necessary, and/or approve their design.
Tasks
Acceptance criteria
Original issue: https://github.ibm.com/webstandards/digital-design/issues/1095