Социальная сеть для киноманов или как не закопаться, разрабатывая еще одну соцсеть

Редизайн или немного больше?


Осенью 2016 года ко мне по рекомендации обратился заказчик с просьбой разработать iOS приложение для киноманов с достаточно обширным функционалом. На тот момент уже существовал готовый прототип с, мягко говоря, примитивным UI. Задача стояла следующим образом: сделать редизайн с доработкой “кое-какого” функционала. Уже тогда у меня закралась идея, что редизайном дело не обойдется, но на сколько объемный это проект я не осознавал. Но тем интереснее…


Приступив к работе, я начал поиск подходящих решений для UI. Конечно же, сначала был проведен обширный ресерча существующих приложений на рынке. Были пересмотрены десятки рекомендательных сервисов о кино, начиная от всем известных IMDb и Rotten Tomatoes и заканчивая новыми сервисами, которые в маркете появились совсем недавно.

Социальная сеть или рекомендательный сервис?


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

Первая «юайка» представляла собой темный интерфейс проводящий аналогию с кинотеатром. Яркие управляющие элементы, напоминающие светящиеся в темноте зеленые вывески «Выход” в кинозалах, которые однозначно дают понять свое предназначение.

Второй вариант UI был кардинальным по цветовому решению: в качестве бекграундного цвета был выбран белый цвет, а светлые оттенки серого предназначались для отделения функциональных блоков друг от друга. Эта комбинация больше напоминала социальную сеть, с качественным контентом.

В этот момент стал вопрос “какое основное предназначение приложения: рекомендательный сервис или же полноценная социальная сеть для киноманов?”. Решение было принято в пользу социальной сети. В этот момент я однозначно понял, что ввязался в нешуточную историю. Но почему-то меня это не остановило, а наоборот подзадорило. Такую задачу я еще не решал.

Flow


Исходя из новых вводных данных, использовать имеющийся флоу было не совсем корректно: некоторые функции требовали нового решения, а некоторые и вовсе были не учтены в прототипе. Из опыта могу сделать выводы, что переделывать что-то существующее сложнее, нежели сделать с нуля. Так и вышло: в итоге мы использовали не более 15% существующего кода при разработке приложения, это же касается и интерфейса.


C учетом ориентира на социальную сеть, была доработана вторая версия UI. В пользу еще большего акцента на контент приложения, было принято решение отказаться от большинства цветов. Остался только акцентный синий цвет, похожий на системный цвет операционной системы Windows и несколько оттенков серого для текстов. В качестве основного шрифта остановились на универсальном общедоступном Open Suns, а для заголовков я выбрал один из моих любимых шрифтов Montserrat.


Я приступил к разработке интерфейса с одного из главных экранов – movie page.

Данный screen содержит полную информацию о фильме.

Перечень элементов Movie Page:


  • название,
  • продолжительность,
  • дата релиза,
  • жанры,
  • описание,
  • режиссер,
  • актеры

А также на movie page выводятся рейтинги авторитетных ресурсов о кино:

  • IMDB
  • Rotten Tomatoes
  • Raters Friends – рейтинг друзей, собственный рейтинг приложения, который формируется по формуле среднего арифметического рейтинга исключительно друзей пользователя. Данный рейтинг собственно является одним из главных УТП (уникальное торговое предложение) приложения.

Кроме этого на movie page должны присутствовать основные управляющие элементы – кнопки Rate и To Watch List. С помощью первой выставляется рейтинг фильм, вторая кнопка добавляет фильм в To watch list. Оба действия взаимоисключающие, а это значит, что после нажатия одной из них, вторая кнопка должна стать недоступной.

Разместить такое количество информации на одном экране, да так, чтобы не загромоздить его, задача не из простых. Вот какое решение появилось в итоге:

Далее последовали остальные экраны, такие как Timeline, Raters Friends, Comment page, все экраны Login/Registration, экраны имеющие отношение к Profile и еще несколько десятков скринов.

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

Структурная сетка приложения получилась достаточно сложной. Каждый экран имеет разные элементы, поэтому общими оставались отступы от края, размеры header и menu и некоторые отсупы между элементами, по типу афиш фильмов.


Иконографика


Главное управляющее меню имеет простые понятные иконки, нажатием на которые осуществляется навигация между основными экранами:

  1. Timeline
  2. Search
  3. Notification
  4. Profile

Более объемные иллюстрации были созданы преимущественно для Landing Page, но также используются в Onboarding.



Иконка


Изначальным символом проекта была звезда — общепринятый символ для выставления рейтингов, используемый практически во всех рейтингах. Чтобы дать понять пользователям, что данное приложение имеет непосредственное отношение к фильмам, было принято решение об использовании какого-то из элементов ассоциирующихся с кинематографом. Я испробовал и киноленту и хлопушку-нумератор. Однако окончательным решением стала звезда стилизированная под кинопроектор.


Зачем нужен еще один сервис о кино, если есть Кинопоиск, IMDB и Rotten Tomatoes?


Этим вопросом задавался я на старте проекта. И скорее всего им же задаются и те, кто впервые слышит о Raters. Но после непродолжительного времени использования приложения, все становиться на свои места: КП, IMDB, Томаты и другие платформы ориентированы на рейтинги критиков или же зрителей, с которыми вы лично не знакомы. А философия Raters в следующем – мнение людей, чьи кино-вкусы совпадают с вашими, куда более релевантно, чем усредненное мнение десятков тысяч неизвестных вам пользователей. Raters позволяет не только ставить рейтинги и писать отзывы, но и следить за фильмо-активностью тех пользователей, чье мнение для вас интересно. Задача затащить в прилож как можно больше друзей с похожими вкусами кино, а дальше – получать релевантные Raters Friends.

Зачем приложению сайт?


После детальной проработки всех элементов интерфейса и всех лейаутов настало время для разработки Landing Page. Я считаю, что любое уважающее себя приложение обязано иметь посадочную страницу. Raters App не стал исключением. Во время разработки приложения основная задача лендинга заключалась в сборе эмейлов, для оповещения о релизе приложения. После релиза лендинг должен перенаправлять трафик на маркетплейсы: AppStore и GooglePlay. Но при этом сайт должен подробно рассказать об основных фичах приложения.


Приблизительно таким образом рекомендательный сервис перерос в социальную сеть. Конечно, данный проект никогда не будет полностью завершен, он как и любая „социалка“ должен итеративно обновляться и развиваться в ногу со временем. Уже на данный момент расписан график нескольких апдейтов. Но чтобы это произошло, Raters App нужны базовые пользователи, а как их получить уже совсем другая история.

Метки:
Поделиться публикацией
Комментарии 46
  • 0
    Нет. КП хватает.
    • 0
      Мне кажется что на данный момент актуальней делать сервис по рекомендации «какой фильм посмотреть» исходя из истории просмотров и оценок фильмов.

      У вас предусмотрена такая функциональность? Пока что я ни у кого такого не видел.
      • 0
        О какой истории просмотров идет речь? Когда пользователь ставит рейтинг (оценка с ревью или без него) – это означает он посмотрел фильм.

        Или я что-то неправильно понял?
        • 0
          У вас предусмотрены рекомендации «какой фильм посмотреть»?
          • 0
            Данный раздел запланирован на ближайшие апдеты. В текущей версии есть только рекомендации друзей.
          • 0
            Иными словами, чем этот сервис лучше кинопоиска?
            • +1
              Ничем не лучше. Не стояло задачи соревноваться с Кинопоиском, это глупо. Но в данном сервисе есть egn — рекомендации непосредственно друзей.
              • 0
                Вопрос поставлен неудачно. Не лучше, а в чем ваша фишка? Ради чего я должен к вам прийти, ломая старые привычки?
                • 0
                  Не мне судить про утп, в данном случае я просто реализатор, хоть заказчики и прислушивались к моему мнению. Я бы рассматривал данный прилож в качестве функционального прототипа для апробации идей и получения фидбэка от пользователей. Кстати сайт уже работает и приложение на маркете:
                  http://ratersapp.com/
                  https://appsto.re/us/_68alb.i
                  • 0
                    http://ksoftware.livejournal.com/227417.html
                  • 0

                    В Raters вы, как правило, лично знаете людей, которых добавляете в друзья (ну или, по крайней мере, знаете об их вкусах и предпочтениях). На основе их рейтингов и ревью к фильму вы можете принять решение, смотреть фильм или нет. А средний рейтинг тысяч посторонних людей не всегда будут для вас релевантны, особенно если у вас специфичный вкус в кино.

                    • 0
                      Звучит фантастично. Откуда в новой сети лично (ну или хотя бы заочно, но относительно близко) знакомые мне люди?
                      Ну вот возьмем например Хабр — аудитория очень большая, я тут зарегистрирован давно.
                      Много ли тут таких хорошо знакомых мне людей? Да по пальцам можно пересчитать.
                      • 0
                        Можно их пригласить напрямую, ну или из других социальных сетей :)
                        • 0
                          Пригласить-то можно, но они зададут тот же самый вопрос несколькими строками выше (это в лучшем случае; в худшем просто отправят приглашение в корзину). И пока что ответ не найден.
              • 0
                Имелось ввиду, чтобы сервис предлагал новые фильмы (которые ты еще не посмотрел) основываясь на уже просмотренных тобой фильмах
                • 0
                  Функционал по рекомендации сервиса запланирован в будующих апдейтах. На данный момент реализована лента рекомендаций от друзей.
                  • 0
                    Но у друзей свои вкусы и предпочтения. Исходя из этого ничего путного они предложить не смогут. Совпадения по предпочтениям будут в основном по фильмам которые идут в кинотеатре, но о них и так всем известно.

                    Хочется открыть приложение, а оно тебе показывает на выбор фильмы которые могут тебе понравится.
              • 0
                Вот попытка была на нейронной сети. Но как по мне получилось плохо
                https://movix.ai/
                • 0
                  Сервисов «машинно» рекомендующих фильмы на основе вашей истории просмотров/рейтингов/тегов/и т.д. очень много, вот вам три из них: Movielens, Netflix, ivi.ru.
                  Последние два, так вообще, предлагают посмотреть фильм прямо у них на сервисе :).

                  Идея приложения была именно в социальности.
                  Во-первых, есть люди, которым интересно наблюдать за тем, что посмотрели другие (конкретные) люди. Другие конкретные люди: кинокритики, ваш друг киноман, и т.д. В Raters можно подписаться на этих конкретных людей и следить за их обновлениями в ленте (этакий кино-инстаграм).

                  Во-вторых, людям интересно обсуждать фильмы, которые они посмотрели, с людьми, которых они знают (такая неавтоматизированная trust-based recommender system). При этом не хочется писать и читать длинные опусы как на KP или IMDB.

                  В-третьих, к моему разочарованию, не все люди готовы довериться машине. Поэтому мы и решили капнуть именно в эту сторону и посмотреть, что получиться.
                  • 0
                    IMDB умеет показывать такие рекомендации.
                  • 0
                    Вот для меня итоговая иконка приложения была непонятна, пока не прочитал описание. Я увидел звезду с тремя геометрическими фигурами. А в целом хотелось бы почитать какие-нибудь интересности по разработке проекта.
                    • 0
                      Какие интересности вам интересны?
                      • 0
                        «Огласите весь список, пжалста» © Операция Ы
                        • +1
                          Вот более подробный кейс на Behance. Постараюсь добавить какие-то технические ньюансы разработки в данный материал.
                          • 0
                            https://www.behance.net/gallery/55444949/Raters-App-Social-Network-for-Movie-Lovers
                    • +2

                      Иконка дивно как хороша. Просто и со смыслом.

                      • 0
                        Спасибо большое! Такая задача и стояла.
                        • 0

                          Согласен. Иконка что надо!

                      • 0
                        О, Ваши эпитеты… Они меня убивают. А опыт, достаточно, интересен.
                        • 0
                          А в чем нарисована картинка в разделе Flow?
                          • 0
                            Конкретно данная картинка была сделана в Sketch. Для проектирования использовались другие инструсменты.
                          • 0
                            Пойду напишу свою социалочку
                            • +1
                              Почему выбрали 5-ти бальную систему оценки для пользователей? Почему уделяется столько пространства для рецензий, но нет ддополнительных данных о фильме (сборах, стране, хронометраже)?
                              Кстати заметил что многие сервисы не пишут название фильмы, ибо дублируется он на постере.
                              И предложение: не хотите ранжировать рецензии на позитивные, негативные и нейтральные?
                              • 0
                                1. Кофаундер не захотел лайки/дизлайки :). Шутка. Мы хотели градацию оценок. Их существует 3 основных: 3, 5 и 10. 10 — плохо помещается на экран смартфона, 3 — лимитировано, поэтому 5
                                2. Хотим, чтобы была только минимально нужная информация (для всего остального есть Wiki, IMDB, KP)
                                3. Сложно когда франшиза. На постерах франшизы название серии обычно написано маленьким шрифтом (сложно увидеть)
                                4. Не хотим, пусть пользователь видит и положительное и отрицательное
                                • 0
                                  Спасибо за ответы!
                                  а рецензия следовательно важнее, а идет градация авторитетных рецензентов или новые просто сверху?
                                  Не знаю, для похоже приложений всегда используем 10 и отлично помещается, и как по мне, дает большую адекватность оценок фильма =)
                              • 0
                                Спасибо за статью.
                                Почему таймлайн выглядит как Инстаграм? Это же промах в узнаваемости сервиса. В результате похоже на китайскую подделку.
                                • 0
                                  Инстаграмм отличный пример для подражания. Если приложение похоже, значит все не так уж и плохо. Но на самом деле уже запланирован апдейт с изменением структуры поста, тогда скорее всего и Timeline видоизмениться.
                                  • 0
                                    Если приложения похожи до степени смешения это ужасно:
                                    1. Нового опыта для пользователя нет, скучно.
                                    2. Листаю сайт про приложение, а в середине Инстаграм почему-то.
                                    3. Первый скриншот в Апсторе опять инста.
                                    4. Скачал, зарегистрировался, открыл. 3 почти пустых окна, только в одном контент и он похож на Инстаграм.

                                    В любом случае, стоило задать себе разумные вопросы:
                                    1. Почему лайки слева
                                    2. Достаточно ли удобно на них нажимать
                                    3. Не близко ли кнопки лайка и комментариев

                                    Ну, главное это релизнуться, а всё остальное поправите со временем.
                                • 0
                                  Во время регистрации приходит ссылка на почту. Но я её открыл с компьютера и всё сломалось.
                                  Можно в письме показывать код из 4-6 цифр что я мог бы ввести на телефоне.
                                  • 0
                                    Приятно видеть скопированные решения с моего https://mustapp.com :—D
                                    • 0
                                      спаведливости ради скажу, похожих концептов на дрибле вагон и маленькая тележка
                                    • 0
                                      Пишу комменты и вы просто палите мою почту D:
                                      https://www.dropbox.com/s/h2fgbnzl60w12kl/2017-08-15%2023.55.52.jpg?dl=0
                                      • 0
                                        Перед тем как изобретать гениальный велосипед с уникальной и главное нужной каждому фишкой, стоило изучить Кинопоиск. Там всё это есть — и друзья, и оценки друзей, и рекомендации.
                                        Правда все это немножко бесполезно. Работать будет только если друзей будет очень много и они будут активно ставить оценки.
                                        Но в итоге что мы получим? Мы получим просто список новых фильмов, который и так выводится везде под заголовком «Что посмотреть сегодня?», висит в качестве рекламы везде и т.д.
                                        Всякие рекомендации на самом деле работают через одно место, в том числе и подборки по тегам.
                                        И потом, друг другом, а если 500 человек на Кинопоиске поставили двойку — оно как-то понятнее.
                                        Сколько у вас друзей? Мнение скольких из них вас реально интересует? И конкретно по кино — наверняка не так много людей, чье мнение заставит вас пойти в кино, которому уже ВСЕ поставили двойку :)
                                        Втопку.
                                        • 0
                                          Сейчас бы в 2017 приложение нативное пилить вместо web версии…
                                          • 0
                                            Экспертов и критиков много, но далеко не каждый из них делал хоть что-то в реалии. Данное приложение нативное.
                                          • 0
                                            А в чем рисовали флоу?

                                            Вообще, посоветуйте плиз хорошую тулзу для прототипирования

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