Покерные чарты
Веб-приложение для обучения префлоп-игре в онлайн-покер.
Что сделал
Придумал идею
Разработал 2 десктопных и 2 мобильных веб-приложения
Собрал 2 демо-версии для промо-кампаний
Запрос и решение
Тренеры онлайн-школы покера нуждались в удобных интерактивных чартах — это шпаргалки, по которым новички в покере изучают диапазоны стартовых рук и оптимальное поведение в различных игровых ситуациях.
Изначально чарты тренеры делали кто как может. Как правило, это были таблицы, а часто даже не Гугл-таблицы, а Эксель. Ученикам школы было неудобно пользоваться чартами, прогресс в обучении на начальном этапе был медленным, мотивация падала.
Сначала проанализировал имеющиеся чарты в таблицах, чтобы понять ключевые проблемы.
Да кто такие эти ваши чарты?
Покерные чарты — это таблички, которые показывают какие карты на руках как разыгрывать. В чартах отражены часто встречающиеся ситуации, для которых заранее математически рассчитали диапазоны карманных карт. Начинающий игрок, попадая в игровую ситуацию, ищет нужную табличку и смотрит в ней, что делать со своими картами — сбрасывать или залетать на всю котлету.
Главная проблема — скорость поиска нужной таблички. В онлайн-покере время на ход строго ограничено, в среднем это 30 секунд. При этом даже начинающие играют одновременно от двух до четырёх игр. Чарты должны давать подсказку за несколько секунд.
А чарты школы имели от двух уровней вложенности. Для подсказки делалось минимум 3 клика и иногда ещё приходилось скроллить табличку, и это если знать, куда нажимать. Ученики не успевали найти подсказку. Примера в таблицах на момент написания кейса не нашёл. Но нашёл вот такое:
Результат
Десктопная версия. Первое, что я сделал — избавился от вложенности и вынес все кнопки на стартовый экран. Например, в половине случаев помимо игровой ситуации нужно выбрать количество фишек, и вместо двух этапов выбора я сделал кнопки на каждое количество.
Второе — сделал интерфейс без кликов. Приложение работает в браузере, кнопки реагируют на ховер, фокус на окно не требуется. Что даёт скорость получения подсказки в среднем 4 секунды.
Мобильная версия
На маленьких экранах пришлось вернуться к вложенности и кликам, так как столько кнопок разместить невозможно. На самом деле возможно обойтись без кликов, в конце я покажу концепт, который придумал при написании этого кейса спустя 2 года после проекта.
Удержание пальцем кнопки на экране сменило ховер курсором на десктопе. Вместо каскада кнопок на экране придумал большое колесо по центру и кнопки навигации вокруг.
Сначала пользователь выбирает игровую ситуацию на кнопках. А затем зажимает нужный сектор на колесе позиции за столом и получает подсказку. Область нажития сильно больше самого сектора, что сокращает количество промахов.
При удержании сектора, рядом с колесом есть подсказки, в каком чарте находится игрок, чтобы он мог убедиться в правильности кнопки, не отпуская палец.
На мой вкус десктопные чарты удобнее для использования, а опрос пользователей показал, что большинство предпочитает мобильную версию.
Как это сделано
Когда я показал первый интерактивный прототип на несколько экранов клиенту, тот удивился скорости выполнения работы и собрался принимать результат.
Тренеры и ученики, которые попробовали прототип, были ошеломлены простотой интрфейса и скоростью отклика. И тут я понял, что клиенту не нужно тратить деньги на разработку сайта или приложения. Режим просмотра в Фигме решает его задачу.
Вот так выглядит рисунок связей анимации в одном из готовых чартов:
Новый концепт
Пока писал этот кейс, подумал, что вложенность возможна на уровне жестов, а не на уровне кнопок. Напоминаю, сейчас первый уровень — нажать кнопку игровой ситуации, а второй — удерживать палец на нужном секторе позиции за столом.
А можно первым уровнем удерживать палец на кнопке игровой ситуации, а вторым смещать его немного в сторону нужной области.
Получается, что на начальном экране нам нужны только кнопки игровых ситуаций. Это даёт больше места, кнопки можно сделать крупнее и уменьшить количество ошибок.
Это всё, спасибо, что прочитали
Путь к финальному результату и промежуточные варианты можно посмотреть в архиве [в разработке, обещаю опубликовать в начале 2023 года]