search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
269 stars 156 forks source link

Component: lightbox (image viewer) study #324

Closed jeffchew closed 5 years ago

jeffchew commented 5 years ago

Wonil-Suh1 created the following on Aug 06:

User story

As a user of IBM.com, I'd like to see images such as product shots and diagrams in a larger format, and flip through multiple when there are multiple without opening a new window/tab or going to a new page.

This task

This task is to research how other companies are doing it, and explore potential design options, with the goal of identifying the final direction and to produce wireframes in order to tackle in the next task (#1455).

Notes

A typical interaction pattern is as follows:

  1. User reads description on a feature band with an image
  2. User clicks the embedded image in the band
  3. A lightbox opens with the image.
  4. The customer is able to cycle through multiple images when applicable.

This component will likely utilize the modal component, and implement mechanisms for slideshow, displaying descriptions, etc.

Component design folder

https://ibm.box.com/s/mpeo1wy0jogkwxn68fahlg62q799ixox

Example

Here is a lightly updated design from last year's Duo + STUF studies: lightbox--design--1 0 0

Original issue: https://github.ibm.com/webstandards/digital-design/issues/1385

jeffchew commented 5 years ago

On Sep 19, spbokma commented: User can see image count, image comments, move between similar topics of the offering, save/share and a primary CTA widget area. This is a full feature view, but could be easily simplified to just a few options.

imageoverylayviewer

Overlay in a 640px wide browser screen shot 2019-09-20 at 9 10 52 am

jeffchew commented 5 years ago

On Sep 19, spbokma commented: Zillow leverages a vertical scrolling overlay for their images will location details, things in that area, related items (schools, walk/transit scores, near by homes), request tours CTA, advertising and company site nav

zillow-locationdetails-overlay

Overlay in a 640px wide browser screen shot 2019-09-20 at 9 13 48 am

jeffchew commented 5 years ago

On Sep 19, spbokma commented: competitiveexamples

jeffchew commented 5 years ago

On Sep 19, spbokma commented: Cupcake features: • Images • Title and caption • Alt attributes/text • Image counter/number of images (EX: 1 of 5)

Wedding cake feature options: • Images and videos • Title and caption • Alt attributes/text • Image counter/number of images (EX: 1 of 5) • Sharing: email, linkedin, facebook, twitter, blog • Able to zoom in/out on images • CTA (EX: buy now / chat with a sales rep)

jeffchew commented 5 years ago

On Sep 23, spbokma commented: Option one 1280px wide lightbox-imageviewer_1280_v1

672px wide lightbox-imageviewer_672_v1-1 lightbox-imageviewer_672_v1-2 lightbox-imageviewer_672_v1-3

320px wide lightbox-imageviewer_320_v1-1 lightbox-imageviewer_320_v1-2

jeffchew commented 5 years ago

On Sep 23, spbokma commented: Options 2 1280px wide lightbox-imageviewer_1280_v2 lightbox-imageviewer_1280_v3

jeffchew commented 5 years ago

On Sep 23, spbokma commented: Option 3 1280px wide lightbox-imageviewer_1280_v4 lightbox-imageviewer_1280_v5

672px wide lightbox-imageviewer_672_v4-1 lightbox-imageviewer_672_v4-2

320px wide lightbox-imageviewer_320_v4-1

jeffchew commented 5 years ago

On Sep 23, spbokma commented: @Wonil-Suh1 Here are options for a cupcake version of the image viewer. Please let me know what you think/if you have questions.