Лучший друг киномана: переделываем приложение CBS под Android


    Любите ли вы сериалы, так как люблю их я? У многих из нас есть друг, который подсаживает на долгоиграющие истории. Лично я не успеваю следить за бесконечным многообразием новинок кинорынка, но с удовольствием прожгу часок-другой у экрана, жаря овощные котлетки после напряженной дизайн-недели. Так о чем я? Каждому хотелось бы иметь верного друга, сообщающего про все киносвежести и эпизодики, чтобы забыть наконец про долгие и изнурительные поиски захватывающего фильма для вечера пятницы. Но что если его нет?

    Так как весь самый «вкусный» киноконтент производят за океаном, я отправилась на поиски приложения в американский Google Play. Но оказалось, что все не так просто. После многочасовых розысков пришлось признать, что дизайн и удобство многих приложений оставляет желать лучшего. Значит надо сделать его самой, подумала я. Почему бы не взять за основу апп CBS, американской сети телерадиовещания, которая производит много известных сериалов? Сказано — сделано.

    Решаем задачи


    Итак, цель — создать идеального помощника для поиска интересного TV-контента на примере приложения CBS для Android. Чтобы не превратить работу в перерисовывание красивых картинок, «на берегу» зафиксируем задачи, которые супер-приложение должно уметь решать.

    Задача №1. Персонализация. Приложение должно знать вкус зрителя и учитывать его. Я, например, обожаю острые и стильные детективные истории и не перевариваю милые комедии. Еще хотелось бы создавать несколько аккаунтов, чтобы собирать интересненькое для любимой младшей сестры. В детской учетной записи она не увидит контент, до которого еще не доросла. Количество категорий канала уменьшится, и из списка пропадут, например «Ужасы» и «Боевики».

    Задача №2. Помощь. Приложение должно запоминать номер серии и подсказывать время выхода в эфир любимой программы. Учитывать вкусы подписчиков и отслеживать самые популярные передачи, предлагая посмотреть их первыми.

    Задача №3. Простота и красота. Само собой, приложение должно удобно и быстро находить нужное. И при этом — быть стильным, чтобы на моем Nexus все выглядело свежо и в лучших традициях Material Design.

    Итак, к делу


    Что не так с приложением в его нынешней версии? Визуально оно чересчур скупо и сухо представляет все многообразие передач CBS. С точки зрения соответствия гайдлайнам Google все совсем печально. Не используются ни основные паттерны платформы, ни важные принципы.
    С точки зрения удобства на главном экране пользователю важно найти шоу по своему вкусу, без подсказок. В существующем приложении персонализация не предусмотрена. Более того, если вы счастливый обладатель старенького гаджета с маленькой диагональю, приготовьтесь долго скроллить в поисках понравившейся передачи.


    Скрин из Google Play

    Start


    Задача главного экрана — привлечь внимание и показать самое интересное. Для этого вынесем всю навигацию в Sidebar menu, разбив его на главные разделы и каталог передач. Все строго по делу, не отвлекаем пользователя мишурой. В соответствии с принципами Material освежаем дизайн при помощи ярких и притягательных изображений, насыщенных цветов и контраста элементов. Предлагаю выводить передачи исходя из предпочтений пользователя, основанных на сохраненных им в разделе My CBS шоу.


    Редизайн главного экрана и навигации

    The Series of my dreams


    На экране сериала приложение предложит запомнить его, расскажет про актеров, я легко найду кадры из фильма и трейлер, все награды и фото со съемок. А также — время эфира на Live TV, чтобы поскорее узнать, какой диагноз у Уилла Грема в новой серии 2-го сезона. При помощи Floating Action Button пользователь сохранит понравившийся сериал в раздел My CBS. По умолчанию выводим на экран все новые серии с возможностью выбрать любой сезон.


    Экран сериала

    My CBS


    Идеальное приложение должно давать возможность не только смотреть любимые фильмы и шоу, но и составлять собственные плейлисты. Так что этот раздел — самый интересный для зрителя. Все избранные и просмотренные фильмы и передачи будут жить здесь, их разделим на Мои шоу и Просмотренные. Логичное с точки зрения удобства решение — выводить последние вышедшие и еще не просмотренные эпизоды для каждой передачи.


    My CBS

    Live TV


    Посмотреть новую серию любимого сериала не выходя из машины — что может быть лучше, если стоишь в пробке? У многих из нас установлены приложения, помогающие скоротать время в дороге, для большого города они просто незаменимы. Поэтому раздел так важен, он должен показывать телепрограмму, напоминать об интересных шоу и давать возможность смотреть прямой эфир. Согласно принципам Material Design, я использую стандартный компонент Floating Action Button, давая возможность смотреть прямой эфир. Приложение напомнит о времени начала шоу при помощи Push-уведомлений. Для удобства программу передач покажем именно на тот час, когда пользователь войдет в приложение, с возможностью просмотра прошлого и будущего расписания.


    Live TV

    В итоге


    В Google Play приложение CBS имеет оценку 3,8. Что же не учли разработчики? Идеальное приложение экономит время и подстраивается под вкусы и желания пользователя, а для этого оно должно быть:
    • Умным. Предугадывать желания пользователя без подсказок.
    • Простым. Показывать только нужный контент, помогая удобно перемещаться по разделам.
    • Современным. Использовать все возможности и стандартные паттерны платформы. Push-уведомления для напоминания о времени выхода в эфир избранных шоу, Sidebar menu для навигации и Floating Action Button в качестве побуждения к действию на экране.

    Все это я постаралась учесть в своей концепции: приложение получило усовершенствованную логику и свежий дизайн. Навигация стала проще, раздел My CBS запоминает самое интересное, поиск контента стал интуитивным. Есть вопросы или идеи? Давайте это обсудим :)
    Redmadrobot
    108,00
    №1 в разработке мобильных решений для бизнеса
    Поделиться публикацией

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

      0
      Если не секрет, с помощью какого инструмента делали дизайн?
        +4
        При помощи Sketch. В связке с Zeplin – это самый удобный инструмент для разработки дизайна приложений.
          0
          Спасибо, подсознательно так и думал.
        0
        Подозреваю, что проблема будет в «гамбургер-меню». Раздел «My CBS» на то и My, чтобы им часто пользоваться. В вашем варианте его не видно и трудно найти. Я предложу использовать панель навигации внизу.
          0
          Дизайн делался с оглядкой на прежние гайдлайны Material design. Не исключаю, что новый Bottom navigation bar действительно был бы удобнее, но это требует обкатки временем, учитывая специфику Android c его наcлоением баров внизу.
          +1

          Рекомендую https://myshows.me. Очень удобный сервис.
          У него есть мобильное приложение, правда давно его не пользовал.

            0
            А в чем сделана верхняя картинка со стрелочками?
            Я рисую в фотошопе и не могу найти хорошее приложение для рисования карты со стрелочками ((
              0
              Верхняя картинка со стрелочками – это карта экранов. Стрелочки, тексты и мокапы iPhone делались в Illustrator.

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

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