Редизайн или немного больше?
Осенью 2016 года ко мне по рекомендации обратился заказчик с просьбой разработать iOS приложение для киноманов с достаточно обширным функционалом. На тот момент уже существовал готовый прототип с, мягко говоря, примитивным UI. Задача стояла следующим образом: сделать редизайн с доработкой “кое-какого” функционала. Уже тогда у меня закралась идея, что редизайном дело не обойдется, но на сколько объемный это проект я не осознавал. Но тем интереснее…
Приступив к работе, я начал поиск подходящих решений для UI. Конечно же, сначала был проведен обширный ресерча существующих приложений на рынке. Были пересмотрены десятки рекомендательных сервисов о кино, начиная от всем известных IMDb и Rotten Tomatoes и заканчивая новыми сервисами, которые в маркете появились совсем недавно.
Социальная сеть или рекомендательный сервис?
Итогом процесса ресерча стало два варианта UI, которые значительно разнились между собой как внешне, так и по смысловому предназначению.
Первая «юайка» представляла собой темный интерфейс проводящий аналогию с кинотеатром. Яркие управляющие элементы, напоминающие светящиеся в темноте зеленые вывески «Выход” в кинозалах, которые однозначно дают понять свое предназначение.
Второй вариант UI был кардинальным по цветовому решению: в качестве бекграундного цвета был выбран белый цвет, а светлые оттенки серого предназначались для отделения функциональных блоков друг от друга. Эта комбинация больше напоминала социальную сеть, с качественным контентом.
В этот момент стал вопрос “какое основное предназначение приложения: рекомендательный сервис или же полноценная социальная сеть для киноманов?”. Решение было принято в пользу социальной сети. В этот момент я однозначно понял, что ввязался в нешуточную историю. Но почему-то меня это не остановило, а наоборот подзадорило. Такую задачу я еще не решал.
Flow
Исходя из новых вводных данных, использовать имеющийся флоу было не совсем корректно: некоторые функции требовали нового решения, а некоторые и вовсе были не учтены в прототипе. Из опыта могу сделать выводы, что переделывать что-то существующее сложнее, нежели сделать с нуля. Так и вышло: в итоге мы использовали не более 15% существующего кода при разработке приложения, это же касается и интерфейса.
C учетом ориентира на социальную сеть, была доработана вторая версия UI. В пользу еще большего акцента на контент приложения, было принято решение отказаться от большинства цветов. Остался только акцентный синий цвет, похожий на системный цвет операционной системы Windows и несколько оттенков серого для текстов. В качестве основного шрифта остановились на универсальном общедоступном Open Suns, а для заголовков я выбрал один из моих любимых шрифтов Montserrat.
Я приступил к разработке интерфейса с одного из главных экранов – movie page.
Перечень элементов 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 и некоторые отсупы между элементами, по типу афиш фильмов.
Иконографика
Главное управляющее меню имеет простые понятные иконки, нажатием на которые осуществляется навигация между основными экранами:
- Timeline
- Search
- Notification
- Profile
Более объемные иллюстрации были созданы преимущественно для Landing Page, но также используются в Onboarding.
Иконка
Изначальным символом проекта была звезда — общепринятый символ для выставления рейтингов, используемый практически во всех рейтингах. Чтобы дать понять пользователям, что данное приложение имеет непосредственное отношение к фильмам, было принято решение об использовании какого-то из элементов ассоциирующихся с кинематографом. Я испробовал и киноленту и хлопушку-нумератор. Однако окончательным решением стала звезда стилизированная под кинопроектор.
Зачем нужен еще один сервис о кино, если есть Кинопоиск, IMDB и Rotten Tomatoes?
Этим вопросом задавался я на старте проекта. И скорее всего им же задаются и те, кто впервые слышит о Raters. Но после непродолжительного времени использования приложения, все становиться на свои места: КП, IMDB, Томаты и другие платформы ориентированы на рейтинги критиков или же зрителей, с которыми вы лично не знакомы. А философия Raters в следующем – мнение людей, чьи кино-вкусы совпадают с вашими, куда более релевантно, чем усредненное мнение десятков тысяч неизвестных вам пользователей. Raters позволяет не только ставить рейтинги и писать отзывы, но и следить за фильмо-активностью тех пользователей, чье мнение для вас интересно. Задача затащить в прилож как можно больше друзей с похожими вкусами кино, а дальше – получать релевантные Raters Friends.
Зачем приложению сайт?
После детальной проработки всех элементов интерфейса и всех лейаутов настало время для разработки Landing Page. Я считаю, что любое уважающее себя приложение обязано иметь посадочную страницу. Raters App не стал исключением. Во время разработки приложения основная задача лендинга заключалась в сборе эмейлов, для оповещения о релизе приложения. После релиза лендинг должен перенаправлять трафик на маркетплейсы: AppStore и GooglePlay. Но при этом сайт должен подробно рассказать об основных фичах приложения.
Приблизительно таким образом рекомендательный сервис перерос в социальную сеть. Конечно, данный проект никогда не будет полностью завершен, он как и любая „социалка“ должен итеративно обновляться и развиваться в ногу со временем. Уже на данный момент расписан график нескольких апдейтов. Но чтобы это произошло, Raters App нужны базовые пользователи, а как их получить уже совсем другая история.
Комментарии (45)
conturov
09.08.2017 17:40Мне кажется что на данный момент актуальней делать сервис по рекомендации «какой фильм посмотреть» исходя из истории просмотров и оценок фильмов.
У вас предусмотрена такая функциональность? Пока что я ни у кого такого не видел.
olegion Автор
09.08.2017 17:58О какой истории просмотров идет речь? Когда пользователь ставит рейтинг (оценка с ревью или без него) – это означает он посмотрел фильм.
Или я что-то неправильно понял?
redmanmale
09.08.2017 18:47У вас предусмотрены рекомендации «какой фильм посмотреть»?
olegion Автор
09.08.2017 19:00Данный раздел запланирован на ближайшие апдеты. В текущей версии есть только рекомендации друзей.
Mr_Edward
09.08.2017 18:59Иными словами, чем этот сервис лучше кинопоиска?
olegion Автор
09.08.2017 19:02+1Ничем не лучше. Не стояло задачи соревноваться с Кинопоиском, это глупо. Но в данном сервисе есть egn — рекомендации непосредственно друзей.
dom1n1k
09.08.2017 19:27Вопрос поставлен неудачно. Не лучше, а в чем ваша фишка? Ради чего я должен к вам прийти, ломая старые привычки?
olegion Автор
10.08.2017 02:04Не мне судить про утп, в данном случае я просто реализатор, хоть заказчики и прислушивались к моему мнению. Я бы рассматривал данный прилож в качестве функционального прототипа для апробации идей и получения фидбэка от пользователей. Кстати сайт уже работает и приложение на маркете:
http://ratersapp.com/
https://appsto.re/us/_68alb.i
timbag
10.08.2017 15:32В Raters вы, как правило, лично знаете людей, которых добавляете в друзья (ну или, по крайней мере, знаете об их вкусах и предпочтениях). На основе их рейтингов и ревью к фильму вы можете принять решение, смотреть фильм или нет. А средний рейтинг тысяч посторонних людей не всегда будут для вас релевантны, особенно если у вас специфичный вкус в кино.
dom1n1k
10.08.2017 16:43Звучит фантастично. Откуда в новой сети лично (ну или хотя бы заочно, но относительно близко) знакомые мне люди?
Ну вот возьмем например Хабр — аудитория очень большая, я тут зарегистрирован давно.
Много ли тут таких хорошо знакомых мне людей? Да по пальцам можно пересчитать.
Groundjke
09.08.2017 18:59Имелось ввиду, чтобы сервис предлагал новые фильмы (которые ты еще не посмотрел) основываясь на уже просмотренных тобой фильмах
olegion Автор
09.08.2017 19:01Функционал по рекомендации сервиса запланирован в будующих апдейтах. На данный момент реализована лента рекомендаций от друзей.
conturov
09.08.2017 21:08Но у друзей свои вкусы и предпочтения. Исходя из этого ничего путного они предложить не смогут. Совпадения по предпочтениям будут в основном по фильмам которые идут в кинотеатре, но о них и так всем известно.
Хочется открыть приложение, а оно тебе показывает на выбор фильмы которые могут тебе понравится.
bibliary
09.08.2017 19:51Вот попытка была на нейронной сети. Но как по мне получилось плохо
https://movix.ai/
madcat1991
10.08.2017 11:02Сервисов «машинно» рекомендующих фильмы на основе вашей истории просмотров/рейтингов/тегов/и т.д. очень много, вот вам три из них: Movielens, Netflix, ivi.ru.
Последние два, так вообще, предлагают посмотреть фильм прямо у них на сервисе :).
Идея приложения была именно в социальности.
Во-первых, есть люди, которым интересно наблюдать за тем, что посмотрели другие (конкретные) люди. Другие конкретные люди: кинокритики, ваш друг киноман, и т.д. В Raters можно подписаться на этих конкретных людей и следить за их обновлениями в ленте (этакий кино-инстаграм).
Во-вторых, людям интересно обсуждать фильмы, которые они посмотрели, с людьми, которых они знают (такая неавтоматизированная trust-based recommender system). При этом не хочется писать и читать длинные опусы как на KP или IMDB.
В-третьих, к моему разочарованию, не все люди готовы довериться машине. Поэтому мы и решили капнуть именно в эту сторону и посмотреть, что получиться.
BobJack
09.08.2017 17:46Вот для меня итоговая иконка приложения была непонятна, пока не прочитал описание. Я увидел звезду с тремя геометрическими фигурами. А в целом хотелось бы почитать какие-нибудь интересности по разработке проекта.
olegion Автор
09.08.2017 17:59Какие интересности вам интересны?
Oleh_M
10.08.2017 15:27+1Почему выбрали 5-ти бальную систему оценки для пользователей? Почему уделяется столько пространства для рецензий, но нет ддополнительных данных о фильме (сборах, стране, хронометраже)?
Кстати заметил что многие сервисы не пишут название фильмы, ибо дублируется он на постере.
И предложение: не хотите ранжировать рецензии на позитивные, негативные и нейтральные?madcat1991
10.08.2017 16:12- Кофаундер не захотел лайки/дизлайки :). Шутка. Мы хотели градацию оценок. Их существует 3 основных: 3, 5 и 10. 10 — плохо помещается на экран смартфона, 3 — лимитировано, поэтому 5
- Хотим, чтобы была только минимально нужная информация (для всего остального есть Wiki, IMDB, KP)
- Сложно когда франшиза. На постерах франшизы название серии обычно написано маленьким шрифтом (сложно увидеть)
- Не хотим, пусть пользователь видит и положительное и отрицательное
Oleh_M
10.08.2017 18:58Спасибо за ответы!
а рецензия следовательно важнее, а идет градация авторитетных рецензентов или новые просто сверху?
Не знаю, для похоже приложений всегда используем 10 и отлично помещается, и как по мне, дает большую адекватность оценок фильма =)
akaDuality
10.08.2017 15:27Спасибо за статью.
Почему таймлайн выглядит как Инстаграм? Это же промах в узнаваемости сервиса. В результате похоже на китайскую подделку.olegion Автор
10.08.2017 15:31Инстаграмм отличный пример для подражания. Если приложение похоже, значит все не так уж и плохо. Но на самом деле уже запланирован апдейт с изменением структуры поста, тогда скорее всего и Timeline видоизмениться.
akaDuality
10.08.2017 15:46Если приложения похожи до степени смешения это ужасно:
1. Нового опыта для пользователя нет, скучно.
2. Листаю сайт про приложение, а в середине Инстаграм почему-то.
3. Первый скриншот в Апсторе опять инста.
4. Скачал, зарегистрировался, открыл. 3 почти пустых окна, только в одном контент и он похож на Инстаграм.
В любом случае, стоило задать себе разумные вопросы:
1. Почему лайки слева
2. Достаточно ли удобно на них нажимать
3. Не близко ли кнопки лайка и комментариев
Ну, главное это релизнуться, а всё остальное поправите со временем.
akaDuality
10.08.2017 15:48Во время регистрации приходит ссылка на почту. Но я её открыл с компьютера и всё сломалось.
Можно в письме показывать код из 4-6 цифр что я мог бы ввести на телефоне.
master65
Нет. КП хватает.