Предложение: Тир Листы

Приветствую, пользователь! Что если однажды на сайте появятся собственные тир-листы с охватом на уже существующие работы? К примеру, возьмем «Тесты-Турниры». В новом воображаемом режиме вы можете пройти их быстро, так как у вариантов не будет повторных матчапов; без рероллов, так как варианты выдаются целыми группами; с установкой самой точной позиции для вариантов в своем топе и, с личными, приватными заметками по ходу работы, а под конец – не с ленточной, а с табличной статистикой, показывающей вам все возможные картинки и их позиции в окошках. 
Думаете, это всё? Различные части получившегося топа вы можете экспортировать в пост и переключить ползунок, делая заметки не личными, а публичными. Похоже на очень хорошую сказку, но давайте её представим. Приятного полёта!

Для начала, давайте определимся, что из себя представляет наш объект. Зададим вопрос: «Что такое тир-листы?». 
– «Тир листы – это рейтинговая система, которую используют для оценки чего угодно от лучшего к худшему в виде таблицы с градацией от S до F, где S (заголовок высшей строки) – лучший результат, а F (заголовок низшей строки) – худший. В каждой строке таблицы вариант, что находится левее, будет немного лучше того, что правее». Пример самого примитивного тир листа (без таблицы) выглядит так:

Вместо букв, идущих по алфавитному порядку (кроме S), могут быть свои наименования. Также публично заявляю: я подписан только на Кента. Кент харош, не то что этот Доши в "B"-тире 🥰🥰🥰

На данный момент тир-листы делаются только через сторонние сайты. Готовые работы могут выглядеть *так* или так, как ниже.

Давайте сделаем ставку, что тир-листы на нашем сайте – это не новая диаграмма или "другой вид теста". Тир листы по своей идее очень похожи на текущие существующие турниры, разве что принимают иную форму. Так если они так похожи, то почему бы не сказать, что тир листы – это новенький режим для прохождения тестов-турниров с возможностями экспорта? Давайте представим, что так оно и есть.

[ Предпоказ карточки теста-турнира, пока без анимации ]

[ Пример тестов, варианты которых было бы интересно раскидывать по таблице ]

[ Ситуативный пример, нацеленный на локальное коммьюнити. В определенных кругах это может быть интересно ]

* * *

Основные нововведения:

1. Новый режим для прохождения тестов типа "Тест-Турнир".
   В данном посте особенно рассматриваются первые два варианта ( 1 + 2 ,  3 ,  4 ). Нажав по номеру, вы можете ознакомиться с видом идеи. Читать «v3» и «v4» не обязательно.
   – – – w – – –
   📒 v1. Идея: «Тир-Лист #1» [найдет реализацию на пк].
   Первый вариант предполагает моментальную выдачу 32х вариантов для их распределения по таблице. Незнакомые варианты можно откинуть в категорию "не знаю" кнопкой "распределить". Минус «v1» в том, что для мобильных юзеров ячейки таблицы выдающихся вариантов слишком малы.
   📒✔ v2. Идея: «Тир-Лист #2» [реализация на мобильных устройствах].
   Второй вариант предполагает выдачу вариантов для мобильных юзеров по 4-8 штук. (В зависимости от разрешения экрана и конечного решения число может быть больше). В отличие от «v1», в «v2» выдающиеся картинки в два с половиной раза отчетливее для мобильных юзеров. Минус этого варианта в том, что для тех же мобильных юзеров такой вид выдачи слишком похож на уже существующий у конкурентов с тир-мейкера и практически копирует их главной недостаток: «мобильный пользователь не может охватить глазами все варианты выдачи». Однако, этого недостатка нет на пк версии. То есть, идея работает как в «v1».
   📒 v3. Идея: «Тир-Диаграмма с переходом в Турнир».
   Третий вариант предполагает выдачу вариантов последовательно (как в типе диаграмма или идентификация). Для каждого варианта вы выбираете в выпадающей менюшке тир-группу.
   Так выглядит процесс «v3»:
    • Вы идентифицируете варианты в группы качества, например, в "S" / "A" / "B" / "C" / "D" / "F"  (тира E в нашей концепции не существует. Худшая буква ever. Уверен, каждый закинул бы её в тир-F);
    • Когда вы отсортируете варианты по группам, вам будет предложено расставить качественный порядок внутри этих групп. Для начала, вы выбираете саму тир-группу, элементы которой вы хотели бы упорядочить. Вы также можете пропустить группу или группы, отметив их крестиком. Все позиции вариантов у исключенных групп будут случайны, но не будут выходить за пределы своей тир-категории (общая тир-иерархия будет сохранена);
    • После выбора тиров для уточнения вам будет предложено выбрать режим: «классический» или «тир-лист v2». В варианте "классический" количество вариантов может быть нечетным, потому будет добавлен один скип. После создания топа выбранного тира, вам предложат выбрать следующий тир для сортировки из списка ранее отмеченных галочкой. Минус этого варианта в том, что в половине времени мы обыгрываем скорее новую диаграмму, нежели механику перемещения карточек по таблице.
   📒 v4. Идея: «Десятибалльный Турнир». 
   Четвертый вариант сокращает идею третьего варианта:
   • Вы идентифицируете варианты в группы по десятибалльной шкале;
   • После, для вариантов с высшей оценкой запускается режим «турнир» для уточнения позиций верхнего топа. Количество подбираемого в уточнение = 25% от размера пака. (Из 32 пройдет 8; Из 64 -> 16; Из 128 -> 32. Для больших паков берется фиксированное количество. Для 256 -> 48; 512 -> 64; 1024 -> 80);
   Остальные позиции топа авто-формируются, опираясь на оценку по десятибалльной. Минус «v4» похож на «v3». Также, оценка по десятибалльной неудобна для мобильных юзеров, так как им приходится скроллить вниз для выбора крайне-негативной оценки.
   – – – Мы остановимся на том, что возьмём «v2» за основной пример – – –
2. Новая табличная статистика после заполнения тир-листа;
   
3. Экспорт пользовательских результатов в блок поста;
   3.1. Экспорт результатов на внешние social media в виде целой картинки с вотермаркой Pikuco.
4. Сохранение результатов таблицы в категорию "Тир Листы". Эта категория будет находиться в профиле, правее от интересов;
   4.1. Сохранённые элементы таблицы должны иметь возможность редактирования (путём перехода обратно в редактор). Первостепенно из-за того, что со временем пользователь может изменить своё мнение на положение тех или иных вариантов в таблице. Также, это нужно из-за пунктов 5.3, «пользовательские комментарии к варианту», 6 «пользовательские названия тиров» и 7, «конвертация и правки».
5. Раскрытие информационных карточек при прохождении, просмотре статистики или при просмотре поста. Структура идеи:
    5.1. раскрытие полной картинки от миниатюры 85х85 до значений исходной подгрузки. || У многим известного tier list maker нельзя раскрыть миниатюру, однако, варианты можно приблизить дэфолтной для устройств операцией, лупой [ ctrl + "+" ] или [ windows + "+" ] или [ жестами пальцев ].; 
    5.2. просмотр описания и названия картинки. В тестах-турнирах такие вещи заполняются по-умолчанию || ... В то время как на сайтах конкурентов такой особенности нет, однако, некоторые авторы делают на относительно небольших картинках текстовые обозначения. || Я считаю, что названия и описания это очень важная вещь в огромном разнообразии вариантов. Ты не можешь быть знаком со всеми вещами в мире;
    5.3. короткие комментарии к вариантам. Заметки – это хорошая привычка. Их очень приятно иметь под рукой при аргументации позиций топа после прохождения, к примеру, если вы пишите пост. Индикатор заметки в прохождении/статистике/посте – звёздочка (по этой ссылке можно развидеть форму звезды. Это буквально текстовая « * »).
       5.4. экспорт таблицы (3) с встроенными карточками (5) в пост. Вероятно, это самая приятная и уникальная часть для авторов после всего процесса. При вставке в пост, на ту или иную пикчу таблицы можно кликнуть, раскрыв этим действием карточку с информацией, включающей в себя картинку, название, описание и возможный комментарий к этому варианту (если вы сделали его публичным при переключении ползунка).
   Небольшая ремарка по конфликтной работе при публичных заметках: если пользователь оставлял заметку на выбранный вами для поста вариант, то "этот вариант (эта карточка)", не будет отображать пользователю его собственную заметку, вместо этого пользователю покажет вашу, даже если у вас нет заметки по этому персонажу. Во избежания недопониманий – пользовательские заметки в посте убираются или как-то помечаются). 
   
6. Изменение названия тиров при и после прохождения. Возможно, в этой бочке мёда есть и дополнительная работа для модераторов с новыми уникальными кейсами. Вот представьте: тир "Главная шабо.. распутница тайтла" с единственной героиней N внутри. Думаю, вы догадываетесь на сколько глубоко будут работать модераторы и редакторы. Суть вопроса: должны ли модераторы дать пользователю по шее, мут, удалить наименование мемного искусства или пользователь просто получит скрытую метку чёртика? (Т.е. пост автоматически получит метку чертика при включении в него тир-лист с такой заметкой). Подумаем об этом позже;
7. Конвертация результатов классического режима в тир лист таблицу (4.1, переход в редактор «v2» / «v1»). Мы не отказываемся от классических режимов, а поддерживаем любой подход пользователя к прохождению теста. Пройдя работу в классике и получив результаты списком, можно кликнуть на кнопку просмотра результатов в тир-лист таблице (даже спустя время). Это действие распределит порядковые номера получившегося ленточного топа по тирам (у которых тоже есть порядковый номер), закидывая по 8 элементов на каждый, заполняя от левого-верхнего угла до правого-нижнего. || Так вот, пункт 4.1 «редактирование» был бы в таком сценарии очень кстати.

   Плюсы первого пункта:

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

Прервёмся на этом, так как всё начинает выглядеть обескураживающим и, быть может, непонятным. Разберем всё по порядку.

* * *

В точку начала.

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

Примерная реализация. Мы видим недостаток: надпись "Классический" вылезает за свои рамки и перекрывает два важных дизайн-элемента, первое – стрелочку; второе – разделитель. Чтобы решить эти проблемы, предлагаю переименовать "Классический" в "Турнир". Понимаю, для олдов это может быть болезненно, но для новых юзеров, вероятно, режим станет с ходу более понятен. || Кстати, для pikuco.com, быть может, будет схожая проблема, но с вариантом «King of the hill». Варианты переименования режима: «King mode» или «Crown Fall» (второй вариант мне субъективно нравится больше).

* * *

Итак, мы нажали на кнопку «Тир Лист», что произошло?

При нажатии нас перекинуло в новое окно прохождения теста. На пк, ноутбуках и планшетах в окне выдается 32 варианта в разрешении 85*85 (Если технически возможно, то для планшетов и ноутбуков – вариант 60*60. Пока остановимся на 85*85 по-умолчанию). Это сделано для того, чтобы вы сразу могли увидеть знакомые варианты и перетащить их драг энд дропом в соответствующие категории.
После первых распределений вы можете воспользоваться кнопкой "перемешать" (в данном режиме она называется "распределить"). Кнопка распределит оставшиеся незнакомые или не столь важные варианты в категорию "не знаю" (данный тир находится на дне).  Элементам категории "не знаю" не назначаются порядковые номера личного топа (может и назначаются, но не показываются пользователю... об этом позже, в разделе «статистика»).
По истечению 32-х вариантов вам выдаются следующие 32 варианта. Раздача происходит до тех пор, пока всё содержимое теста не будет распределено по таблице. Когда это произойдет, – таблица с вариантами растянется во всю ширину, убирая менюшку раздачи. Растяжение не буквально. Ячейки снизу просто переместятся выше, заполняя место, которое больше не нужно (место раздачи).
На последнем этапе, центрированно-сверху, будет висеть желтая кнопка "Завершить", нажатие по которой даст уведомление "Желаете завершить создание тир-листа?". Жмем "Да". Уведомление нужно по той причине, что человек может жмакнуть по этой кнопке случайно. На мобильных устройствах кнопка появляется вместо надписи «раздача 1 / n ». На пк версии замена не нужна. После этого действия тест завершится.

Перейдем к картинкам.

[ Теле... Кхм. Планшеты. Ошибочный вариант разрешения ]

[ Телефоны, почти исправленный вид ]

[ Телефоны, проверка размера ]

[ Телефоны, проверка размера ]. Хочу поделиться черновыми размышлениями по этой теме. Читать всё написанное далее необязательно, я бы даже сказал – не нужно || 30х30 для мобильных юзеров – это невероятно маленький размер, требующий от автора четкой обрезки головы или самой выразительной детали изображения. Цель не всегда "персонаж", у работы могут быть сложные коллажи, текстовое оформление, сдвинутый центр... Данную проблему можно исправить разве что новым редактором для пикч, если развивать идею уже имеющегося функционала просмотра фотографий, как в альбоме (все ведь кликали по пикчам в статистике, верно?)... По идее, редактор может работать как обрезка на giphy, CROP. Однако, в отличии от функции представленного сервиса, это действие не заменит картинку, а сохранит её доп.образ. Данную миниатюру можно использовать не только для таблицы, но и для небольших карточек результатов, в статистике. Если найти пример поприкольнее и добавить к возможности обрезки масштабирование, то мы придём к чему-то похожему на обрезание превью аватарки из социальных сетей, как в ВКонтакте. Процесс, как вам известно, таков: мы выбираем место и нужную форму, наводим, увеличиваем/уменьшаем, сохраняем. Done. Минус в том, что такие приколы, вероятно, громоздкие и сложные (не знаю, я не программист, не смешарик) Быть может, было бы достаточно и расположения якорной точки на картинке, а дальше как карта ляжет, как Ракузан скажет || Стоит понимать, что на мобильных устройствах ситуация со всем этим (тир-листом) немного страшна. На одних экранах, в раздаче - 85*85, для других – 60*60 (в 60*60 я не уверен). А затем это и вовсе в таблицу до 30*30 жмыхается (передаю привет мобильным юзерам). И вопрос вот в чем: будет ли пользователь ЧАСТО увеличивать вариант после его распределения? Забудет или он его образ? Потеряет ли сам этот образ человек, проведя в подобном редакторе небольшое количество времени? Достаточно ли будет этих крошечных пикселей для создания визуальной ассоциации с оригинальным изображением? Perhaps~perhaps. Многие пикчи пользователь может увеличивать, пользуясь тэпом и вызывая полноразмерную карточку, но не хотелось бы делать ситуативную фишку обязательной. Но... Стоит признать, такие моменты просто могут быть. || Единственное в чем я уверен насчет интерфейсов у мобилок, это то, что 30*30 – это необходимость. Я ни в коем случае не хотел бы повторять ошибку ребят с тир-листа. Ни в одной временной линии где я существую или мог бы существовать как инкарнация. Проблема конкурентов в том, что варианты очень быстро забивают интерфейс таблицы и после 20-ти раскидок таблицу придется многократно скроллить, прилагая очень много усилий лишь для того, чтобы долистать до нужного тира и дропнуть в него объект (который еще и ищется не сразу). С каждым баскетбольным данком в группы, их тир-лист превращается в симулятор новостной ленты в которой ты потерял фотокарточку мема (будь он в раздаче или уже в таблице). Как итог - ты ищешь те или иные изображения снова и снова вместо того, чтобы заниматься активным процессом сортировки. Потрясающий gaming опыт. || Ладно, вычеркиваем этот черновик.

[ Телефоны, не лучшая идея по взаимодействию ]

[ Телефоны, идея по взаимодействию ]. По стечению обстоятельств мы пришли к решению сайта-конкурента. После распределения варианты падают вниз. Также их можно скроллить.

[ При нажатии по миниатюре отображается подобная карточка ]

После добавления комментария картинка получает небольшую звездочку. Так пользователь не потеряет место, где он оставил комментарий. Подобные звёздочки сохраняются и отображаются при прохождении / в статистике / в посте.

[ А что там с пк? Возьмём тест Блэйка для примера ]. Данное размещение картинок сделано в декоративных целях.

[ Пк, редактор, вид при появлении второй раздачи (пока без редактирования кнопок сверху) ] 

[ Пк, редактор, общий вид, раздача, размещение ].

[ Пк, редактор, редактирование тиров, два примера ]

[ Пк, редактор, раскрытие карточки, второй вариант карточки ]

[ Пк, редактор, раскрытие карточки (третий вариант карточки) ]. Также здесь вы можете заметить кнопку «Завершить» и расположение всех вариантов по окончанию всех раздач (в нашем случае раздача была одна. 32 варианта). 

* * *

Мы завершили тест, нам выдает статистику

[ Статистика, табличный вид на телефонах ]

[ Статистика, ленточный вид ]. Слева старый вид, справа – новый 

[ Пк, без редактирования кнопок с очками ]

[ Пройденные тир-листы хранятся в отдельной вкладке ]

[ Как и в интересах, здесь пред-отображается наш лучший вариант ]. Тест появляется в тир-листах только в том случае, если мы проходили в режиме «Тир лист» или редактировали (п4.1) получившийся результат другого режима. || Обычный просмотр статистики в виде таблицы не переводит тест в данную вкладку.

* * *

В редакторе поста мы можем разместить табличку статистики

Разглядеть можно здесь: https://drive.google.com/file/d/1BpHK55g8DsIpaJamy5Ds4gmxsgR1z9s5/view?usp=drive_link. В редакторе поста мы также можем открывать элементы таблицы, добавляя или изменяя комментарии (они же "заметки") к вариантам. Как вы помните, метки-звёздочки отвечают за индикацию

[ Первоначальный черновой вариант по картинке выше]

Похоже, это всё. Блоки закончились и у меня остается ощущение, что я навалил каши, то запихивая сжатый текст под картинки, то имея текст на картинках, то стараясь вывалить всё и сразу в отдельных текстовых блоках, то засовывая всё это в структуру из кубического спойлера с ссылками (это уже убрано), то пытаясь понять, нужен ли в месте разделитель информации "||" или я обойдусь переносом строки. Я уже не знаю, сколько раз я стирал или переносил текст и на сколько он стал читаемый (если какая-та часть подачи вам не нравится, то пожалуйста, напишите об этом). Н-да. Как-то так. Надеюсь, в этом всём есть доля понятных вещей. По-моему, единственное что я не показал – это вид готового поста с таблицей и "тот самый переключатель, позволяющий сделать все заметки публичными".

• Здесь вы можете взглянуть на исходники в фуллсайз качестве •