company_banner

LightBox с точки зрения UX/UI и как он меняет продукты

    image

    В Экосистеме РСХБ мы создаем инновационные продукты для сельского хозяйства.
    Для их разработки мы решили использовать подход мировых компаний в области UX/UI.
    Чтобы не повторять ошибки конкурентов и создать полноценную экосистему.
    Основой всех продуктов экосистемы стал LightBox, который является сквозным функциональным дизайн-решением. Например, в проекте для фермеров, мы решаем насущные проблемы и вопросы фермера в одном окне и кроме маркетплейса товаров предоставляем большое число услуг
    и сервисов.
    Сложность проекта заключается в объединении в одном портале разных сценариев и ролей.

    Что такое LightBox и почему именно «LightBox», а не «LightWindow», в чем его отличие от Pop-up, как он способен изменить продукт. Все это я постараюсь рассказать ниже.

    1 — С точки зрения разработки LightBox представляет собой всплывающее окно с изображением.

    2 — Pop-up или модальное окно, представляет собой всплывающее окно с минимальным набором функционала не имеющего отдельного URL. Его основная задача информировать пользователя, спрашивать и уточнять, предупреждать, открывать просмотр и медиа контента.

    3 — Модальные окна занимают, как правило, менее 30% экрана. LightBox — это уже полноценная страница, с полноценным функционалом и имеющая отдельный URL и площадью покрытия от 70% до 90%.

    4 — Почему мы считаем данное решение ключевым и важным для UХ и UI большинства продуктов?
    Все просто. Все интерфейсы и дизайн решения имеют несколько целей и единый путь развития. Все меняется и имеет цикличность, так вот — если углубиться в историю первых интерфейсных решений, то все они были основаны на LightWindows, это были функциональные всплывающие окна. Сейчас же весь дизайн стремится к максимальному удобству, оптимизации времени и минимализму одного окна.
    Идеальный продуктовый интерфейс — это одно окно.
    Почему сейчас все больше продуктов используют осознанно или нет LightBox, и почему раньше они этого не делали. Пользователи не были готовы к кардинальным переменам, технологии не достигли соответствующего уровня.

    Почему мы стали применять LightBox, расскажу на одном примере ниже.
    Пользователь находится на портале, ищет необходимый товар или услугу, через поиск, получает страницу выдачи, добавляет фильтры и дополнительные критерии. Находит нужный товар, нажимает на карточку, совершает покупку, закрывает через браузер или «хлебные крошки», переходит на страницу списка, теряя контекст, фильтры и поиск который он делал ранее.

    Это порядка 7-10минут, а в сложных продуктах и более 25минут.
    Человек теряет время, теряет контекст и начинает свой путь заново.


    LightBox, помогает решить проблему потери контекста, фильтров, поиска и выдачи. Это страница с уникальным URL (всегда можно отследить переход на нее и поделиться ссылкой), открывается поверх страницы выдачи и позволяет вернуться в тот же экран откуда пользователь ушел. При тестировании данной технологии на пользователях еще на стадии прототипов и макетов 100 из 100 пользователей положительно оценили такое решение.
    Так же при большом количестве схожих продуктов или услуг, LightBox позволяет пользователю перелистывать страницу не закрывая ее.

    Преимущества LightBox:
    — Уникальный URL
    — Полноценная страница с сохранением функционала
    — Сохранение контекста
    — Интуитивность
    — Свобода реализации и дизайна
    — 70%-90% рабочего пространства с возможностью отображать интерфейс в полном объеме
    — Возможность блочного построения и интеграции внедренного скролла.

    image
    Экосистема для фермеров (Своё | Фермерство)

    Как в реальных проектах работает LightBox и каковы его преимущества.
    Во первых, время работы и переходов сокращается в среднем с 10 минут до 1 минуты.
    Во вторых, общее время и скорость взаимодействия до конечного действия, сокращается вдвое.

    Фермеры и пользователи положительно оценили это решение и мы стремимся к работе в одном окне.

    Меня зовут Кирилл Тагинцев, я возглавляю UI/UX экосистемы РСХБ, мы разрабатываем проекты и применяем LightBox в своих проектах. В статье представлены лишь часть из них.
    В одном из последних продуктов, для которого применялось данное решение, по рейтинг markswebb, заняло 1-е место, и LightBox был решающим с точки зрения удобства пользовательского взаимодействия.


    image
    Новостной портал, с социальными блогами для фермеров (Новости и Блоги)

    image
    Портал поиска сотрудников и работы в агро направлении (Подбор персонала)

    Какие компании используют LightBox:
    — Яндекс
    — Facebook
    — Mail.group
    — dribbble.com
    — Bechance.net
    — Сбербанк

    Комментарии 13

      +1

      Что такое LightWindow?
      Почему LightBox это не модальное окно?
      Почему модальное окно не может иметь URL(например, форма авторизации) и занимать 70% экрана(например, показывать лог)?


      Возможно в вашей компании это устоявшиеся термины, но на мой взгляд в статье много подмен понятий, из-за чего главный посыл теряется.

        0
        1. Хорошее описание что такое LightWindow — habr.com/ru/post/18748
        2. В статье описаны отличия.
        3. Модальное окно не подразумеваем отдельный URL ни функционально ни логически.
        Если у вас есть примеры таких модальных окон, поделитесь ссылкой.
          0

          Хорошо, LightWindow — это конкретный js скрипт, т.е. речь в статье про имя собственное LightBox(https://lokeshdhakar.com/projects/lightbox2/)?


          Под модальным окном я понимаю общее определение https://ru.wikipedia.org/wiki/Модальное_окно, которое не описывает взаимосвязь с URL и размером.

            0
            Все верно. LightBox — это модальное окно нового поколения, если так проще, замещающее собой внутренние страницы.
            По ссылке высланной вами, это типовое применение LightBox, мы же его расширили и это, как написано в статье, по факту LightWindow.
              0

              Где-то за 13 лет с появления LightBox, это стало общим названием, как Ксерокс, и называют лайтбоксами чаще всего скрипты которые открывают модальное окно с просмотром картинки или видео с возможностью перехода назад/вперед по списку элементов на странице, вероятно название пошло от лайтбоксов используемых для съемок. Возможность просмотра произвольного контента пришла вместе с распространением ajax, но за долго до появления возможности манипулирования адресами(History API), не долго думая поддержку внедрили в уже существующие решения с лайтбоксами, с этого момента частенько начали использовать скрипты-комбайны для реализации простеньких модальных окон, просто по тому что все лайбоксы реализуют модальные окна. LightBox не новое поколение модальных окон, это вариант использования концепции модальных окон для решения частной задачи.


              К сожалению с ходу хороших примеров не нашел, но возьмем для примера utkonos.ru, в списках товаров можно вызвать быстрый просмотр, а на странице товара открыть фото, в случае с фото есть все признаки лайтбокса, при этом скрипты вероятно самописные, а вот как классифицировать предпросмотр товара, переключения нет, скрола нет, занимает небольшую часть экрана, я бы сказал что это просто модальное окно и от того что в нем появится больше контента или я буду использовать меньший экран или разработчики добавят переключение оно не перестанет быть модальным окном.


              LightBox как скрипт в сегодняшнем стеке инструментов использовать просто не стоит, особенно не по назначению, кастомизация очень быстро аукнется.

                0

                Откуда пошло название не скажу, прижалась.
                Про utkonos.ru, и все магазины использующие быстрый просмотре, у них нет отдельного URL, так же они не являются полнофункциональной страницей, способной заменить собой основную карточку товара. LightBox же сейчас эту проблему решает и отрываясь как быстрый просмотре даёт полноценную страницу, которую модно так же закрыть.
                На счёт использования не везде согласен, все в дизайне должно быть оправдано. И просто гнаться за трендем не стоит. Но примеры о которых написано в статье, с точки зрения оптимизация пользовательского сценария и облегчения взаимодействия, отлично подошёл LightBox.

                  0

                  Без примеров вашей реализации дальнейшее обсуждение бессмысленно, LightBox(https://lokeshdhakar.com/projects/lightbox2/) поддерживает только картинки, более того, значительная часть кода отвечает за корректное позиционирование, ожидание загрузки картинок итд, нет ничего связанного с работой с URL(History API) и Ajax подгрузкой контента.


                  Не вижу технических ограничений добавить в быстрый просмотр всю информацию о товаре и менять адрес страницы на адрес детальной страницы о товаре или добавлять в hash идентификатор открытого товара, также добавить кнопки вперед/назад, то что этого нет, не значит что им надо использовать лайтбоксы.


                  В любом современном приложении/сайте для качественного исполнения требуется высокая интеграция frontend/backend, никакой скриптик аля LightBox не будет серебряной пулей, особенно когда речь заходит об обработке адресов и подгрузке контента.

                    0

                    Причину название описал в статье.
                    Примеры так же, в иллюстрациях.
                    Живое воплощение есть пока в предыдущем проекте Сбербанк Бизнес Онлайн.
                    Новые примеры, будут к осени, отправлю ссылку как запустим. )


                    Вы ссылайтесь на понятие LightBox с точки зрения кода, я же с точки зрения UI/UX и его применении. Если удобно это его новое воплощение, не только иллюстрации.
                    Все же описано в статье.

                    0

                    [del]

          0
          У нас это называется detail panel
            0
            Соглашусь, в свое время в модульбанке использовали схожее решение и оно называлось detail panel, но как я выше написал — у нас в обиходе LightBox. Кроме того LightBox — универсален и может выглядеть и открываться по разному, а detail panel как правило справа на лево и никогда не занимает более 60% экрана.
            +1
            А можно рассказать подробнее про сценарии использования/неиспользования LightBox. Например, для Интернет-магазина LightBox хорошо подходит, а для корпоративного портала с новостной лентой, LightBox, наверное и не нужен. Какие критерии использования LightBox?
              0
              Использование LightBox оправдано в высоко нагруженных сайтах и порталах, при использовании поиска и фильтрации, при необходимости уйти от большего количества страниц и переходов, от ухода в принципе от внутренних страниц. Основная проблематика и идея родилась когда пользователи что-то искали, потом добавляли в фильтр, а потом переходили в карточку или в новость (тут я не вижу разницы), и для возвращения использовали или кнопку в браузере или стрелочку в интерфейсе, либо хлебные крошки. Возвращаясь контекст, фильтр и выдача теряется и пользователю приходилось все начинать с начала. Цель — облегчить жизнь и пользовательский сценарий и уйти от внутренних страниц. 100% в интерфейсе мало кто может уйти от страниц, но все возможно. А новости это, личный кабинет, магазин или что то другое, не имеет значения. Главное в дизайне — все должно быть оправдано. Если бы LightBox, был не оправдан в проектах, его бы не применяли.

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое