Poker UX/UI

Всем привет, меня зовут Дима. Всегда привлекала визуализация информации. В покере с этим все хорошо. С информацией то есть, ее много. А вот визуализация часто хромает.

Решил завести блог и делиться своими наблюдениями и идеями по опыту пользовательского взаимодействия в покерной индустрии.

Вот, например, никогда не нравился такой вид отображения хода раздачи:

Какие здесь проблемы? Да это же сплошная стена текста. Я не хочу сказать, что это плохой способ донесения информации, тем более, что все уже привыкли именно к такой подаче. Но акценты расставлены не верно.

Давайте подумаем для чего вообще нужна запись раздачи. Наиболее частое это поделиться с друзьями или сообществом интересным с вашей точки зрения розыгрышем. Или попросить прокомментировать свою игру и указать на ошибки. Еще вариант это сохранить для последующего самостоятельного разбора.

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

Уберем лишний текст и действия закодируем цветом:

Синий — ставка (bet). Сюда отнесем опен-рейзы и открытие торговли на новой улице

Красный — агрессивное действие. Рейзы, 3-беты, 4-беты и т.п.

Зеленый — колл.

Серый — все остальное. (Чеки, фолды)

Собственно, как это будет выглядеть:

Действие идет слева на право, сверху вниз.

Hero на баттоне, обозначен *

Размер стека игрока под его позицией (например, у Hero на момент начала раздачи 200 bb)

Карты игрока над его позицией. Думаю достаточно указать один раз и не дублировать на все улицы.

Флоп, терн и ривер идентифицируются по количеству карт на столе. 

Текущий банк слева от хода раздачи. Указан до первого действия в каждой строке.

Четыре точки под цифрой 93 (на ривере) означают, что игрок пошел all-in.

Можно еще сократить, убрав игроков не участвующих в раздаче:

Из плюсов такого формата — можно одним взглядом охватить весь ход раздачи. Причем, эту схему можно адаптировать для людей плохо различающих цвета. Добавив перед каждым действием соответствующую букву. b — bet, r — raise и т.д.

Пока все это существует только в виде картинок. Надеюсь когда-нибудь появится конвертер) Буду рад предложениям и замечаниям по улучшению.

Привет!

Согласен с тем, что оригинальный формат раздачи из Holdem Manager, к которому мы привыкли, явно перенасыщен текстом. Однако предложенный тобой вариант, как мне кажется, всё еще воспринимается немного тяжеловато, из-за сумбурности и разнообразия цветов. При этом, на мой взгляд, важнее выделить одним цветом действия одного человека, а не действия одного типа. В этом плане мне нравится формат hand2note, он близок к идеальному восприятию:

http://hand2note.com/Help/ru/pages/QuickHandView/

FreeBetRange, У hand2note интересное решение. У них цветом кодируется позиция, у меня действие. У обоих подходов есть минусы и плюсы.

Насчет выделить одного человека:  так-как все действия происходят в столбик легко отслеживать позицию. Можно конечно дополнительно выделять каким-нибудь символом. Например добавить звездочку ко всем действиям Hero.

Вспомнил одну безумную штуку. Когда-то был такой лэйаут для старзов, назывался shooter. Сейчас пробовал поискать хотя-бы картинку, но даже гугл про него не знает. Схематично выглядел так:

Играть за таким было непривычно и неудобно, но задумку я тогда оценил. А позже нашел идеальный с моей точки зрения лэйаут(для 6-max): Grinder.

К сожалению потом сайт, который его продавал закрылся и апдейты перестали выходить.

Самое клевое здесь это большая площадь под статы игроков слева и справа.

Продолжаю делиться находками. Сегодня более прикладная штука — поговорим про отображение статистики в хаде.

Пациент номер раз: 3-беты, позиция vs позиция. Для начала я бы визуально разделил на две смысловые группы: 3-бет в позиции и без позиции:

Следующим шагом избавляемся от визуального шума. Очевидно здесь это подписи к статам. На самом деле не так трудно запомнить, что сверху от линии это статистика по трибетам когда Hero в позиции, ниже линии соответственно без. Чем дальше цифровое значение от линии, тем больше "расстояние" между позициями на игровом столе.

И последний штрих. Поставим моноширинный шрифт, например, Roboto Mono. Это даст одинаковую ширину цифр, Как по мне, так удобнее считывать информацию из таблицы.

Пациент номер два: опен рейзы. Действуем по той-же схеме — вверху действия в позиции, внизу без позиции. По центру белым цветом стат опен рейза.

Фиолетовый — фолд на 3-бет; Зеленый — колл 3-бета; Красный — 4-бет.

Применив предыдущие правила можно сделать, например, таблицу реакции Hero на контбет.

Фиолетовый — фолд; Зеленый — колл; Красный — рейз.

Покер хороший источник вдохновения для инфографики