Захар Кириллов, менеджер проектов · 9 минут на чтение
Дизайн интерфейса электронной очереди в Сбербанке
А. Сундуков, «Очередь»
Сбербанк встретил меня привычным устройством, которое не без помощи специально обученного сотрудника выдало талон Б052. Отбросив мысли о составе этого коктейля, я оглянулся в поисках телевизора: скоро ли моя очередь? Похоже, впереди еще 10 человек. Достаточно времени, чтобы всё переделать.
* * *
Одно из отделений Сбербанка в Санкт-Петербурге. Фото автора
Фронт работ
Не нужно быть специалистом, чтобы понять — информация на дисплее представлена неоптимально, большая часть пространства занята бесполезной картинкой. Казалось бы, разверни экран вертикально — и проблема будет решена. Но не в этом отделении: экран висит над дверью, потому верхний ряд окажется слишком высоко и считывать новые вызовы будет сложно.
Сбербанк в г. Сысерть
К тому же вертикальная ориентация дисплея тоже нуждается в улучшении — как минимум потому, что 1/6 экрана занимает логотип. Даже если кто-то из посетителей забыл, где он находится и зачем пришел, ему напомнит логотип на талоне. А в некоторых отделениях на талоне напечатана длина очереди и среднее время ожидания.
Фотовыдача Google по запросу «Сбербанк талон»
Итак, решено: спроектируем Сбербанку новый информационный дисплей. Работать будем как принято в «Собаке Павловой» — коллективно в формате визуального мозгового штурма. Предлагаю коллегам в Slack подключиться к решению задачи, а коль скоро сама задача удачно совпала с выходом нашей почтовой рассылки — то и всех подписчиков.
Убрать лишнее
Начинаю думать над принципиальными изменениями: какие элементы должны остаться на экране, как они будут работать и выглядеть? Для этого составляю простейшую объектно-информационную модель — отправную точку используемой нами методологии.
Мой подход к редизайну: убрать бесполезные элементы и максимизировать пользу оставшихся.
Первое улучшение — освободить еще одну строку для данных, избавившись от логотипа. Если маркетологи будут недовольны, пусть прикрепят физический логотип над экраном. Кстати, до появления телевизоров именно такое решение использовалось на светодионых матричных табло, только вместо логотипа закреплены были названия столбцов.
Фото с сайта компании «Софт Центр С»
Есть ли необходимость в заголовках сейчас — нужно проверять экспериментально. И не на 30-летних офисных работниках из мегаполиса, а на 70-летней Варваре Степановне, работающей на полставки гардеробщицей в поликлинике уездного города N, страдающей ревматизмом и дальнозоркостью. Вдруг перепутает она номер окна с временем ожидания или длиной очереди?
Следующий элемент — содержимое столбцов. Похоже, что в названиях талонов фигурируют буквы от А до Я. Это дополнительная сложность для иностранцев, пришедших в Сбербанк обменять валюту (а их в этом году из-за футбола ожидается больше обычного), — для них буквы кириллицы выглядят как для нас иероглифы.
Гипотетический Сбербанк в Поднебесной
Поэтому предлагаю ограничить набор букв теми, которые имеют аналог в латинском алфавите: А, В, Е, К, М, Н, Р, С, Т, У, Х. Букву О из-за похожести на нуль использовать не буду (автомобильные номера, полагающиеся на этот же принцип, букву О разрешают). Возможно, придется ее вернуть, если 11 букв будет недостаточно для кодирования всех очередей. В некоторых отделениях используют даже букву «Ш». Неужели потому, что все остальные буквы до нее заняты?
Бывает даже очередь на букву «Ш»
Номера окон выводятся как-то хаотично: где-то с нулем впереди (01), где-то без (1). Смотрю в зал, гуглю фотографии других отделений: нигде на табличках окон нуля нет. Убираю. Заодно исправляю выключку: в столбце с окнами она будет всегда по правому краю.
Фотовыдача Google по запросу «Отделение Сбербанка»
Стрелка от талона к окну не несет пользы, скорее наоборот: она всегда указывает вправо, однако не все окна располагаются справа от дисплея. Не стоит вводить посетителей в заблуждение. Убираю стрелки и увеличиваю размер шрифта. Так на экран поместятся всё те же 6 строк, но более крупным шрифтом.
Осталось разобраться с бегущей строкой. Пусть она всегда показывает номер телефона контактного центра и текущее время. Уметь заодно показывать время вообще должно любое электронное устройство — это сродни принципу «кашу маслом не испортишь». Вспоминаю, что электронная очередь умеет рассчитывать прогнозируемое время ожидания для каждого талона. Использую эту информацию для небольшой геймификации ожидания: пусть посетители ищут свой номер внизу экрана и узнают, сколько минут осталось ждать.
Ведь, как известно, ожидание кажется короче, если ждущий чем-то занят.
Расчехляю Photoshop Elements и визуализирую свои идеи.
Было — стало. Трудозатраты: 1 час на решение и 1 день на этот текст
Нужно больше золота!
Участники мозгоштурма присылают свои решения. Автор первого пополнил копилку сразу 4 идеями.
Узнаваемость сохраняется даже без логотипа и фирменного зеленого
- Стрелки действительно могли бы указывать в сторону реального окна в конкретном отделении. Но в отделении может быть несколько информационных дисплеев, и, чтобы они давали верную информацию, придется закодировать местонахождение всех окон относительно каждого дисплея. И обновлять настройки в случае, если дисплей перевесят на другое место. Да и сколько у Сбербанка действительно больших отделений, нуждающихся во внутренней логистике? Вряд ли эта идея приживется.
- А вот годная идея — отказаться от «выворотки» в пользу белого фона. Принимается.
- Визуализация очереди — кажется еще одной здравой идеей, но пользы от нее при такой подаче немного. Логично, что за номером А-29 идет А-30, да только вот не факт, что между ними не встрянет какой-нибудь В-217, ведь одно окно вполне может обслуживать разные очереди.
- Крупное выделение верхнего номера — хорошая мысль. Можно развивать: выделение анимацией, цветом.
* * *
Другой участник прислал первую версию альбомного формата. Приятная особенность этого варианта — наглядность. Видно, сколько окон работают и какова длина очереди. Однако решение пока не универсальное: а что если в отделении больше 9 окон?
Автор устыдился повторяющихся элементов и вынужден остаться анонимным
Другой изъян: ждущим посетителям придется проявить внимательность, ведь находящийся сейчас последним в 4-м окне талон F002, возможно, будет приглашен в окно 6 или 9. Принимаю одну годную идею: подсвечивать контрастным цветом новоприглашенные талоны (Е010, С016).
* * *
Те же достоинства (и недостатки) у следующего варианта, присланного читателем рассылки Женей Софроновым. Как одновременно пригласить клиентов к окнам 2 и 7? Легко ли будет Варваре Степановне отслеживать всю плоскость экрана, ведь в этом дизайне номер ее талона может появиться в любой колонке и в любой строке?
Вариант Жени Софронова
Женя — единственный, кто попытался ответить на вопрос Варвары Степановны «А чего это у них не все окна работают?». Молодец, Женя!
* * *
Еще один присланный вариант хоть и не отличается изящностью, зато решает несколько насущных проблем: отвечает на вопрос «кто на ком стоял» и кому сколько ждать.
Решения мозгоштурма. Ответ на вопрос сколько ждать. Электронная очередь в Сбербанке | SobakaPav.ru Автор работает в «Собаке Павловой» менеджером проектов
Автор пытается избавить людей от букв в номерах талонов. Хорошая попытка — всем было бы так проще. Увы, в отделении, оказывающем услуги от обмена валюты до выдачи ипотеки, всех в одну очередь не поставишь. И если система вызовет клиента с талоном 106 перед 105 — не миновать скандала.
* * *
Для решения с картинки ниже потребуется как минимум два монитора. А кто сказал, что мы ограничены одним, раз уж задумали переделать всё? Зато Варвара Степановна точно не пропустит свой талон: движение очереди визуализировано, геймифицировано и цветокодировано. Шикарный ход с «появляющимися из тумана» номерами талонов!
Решения мозгоштурма. Вариант с двумя мониторами. Электронная очередь в Сбербанке | SobakaPav.ru Да, этот автор тоже уже работает в КБ «Собака Павлова»
* * *
А вот комикс про то, как у Сбербанка появился их нынешний дизайн дисплея с заглушкой для рекламы. Осторожно, ненормативная лексика!
Комикс про то, как у Сбербанка появился их нынешний дизайн дисплея с заглушкой для рекламы | SobakaPav.ru Угадайте, за что в «Собаке» отвечает автор комикса? За интерфейсные тексты, конечно же!
* * *
Следующий вариант прислал читатель рассылки Алексей Новиков.
Решения мозгоштурма. Крупно показанный номер вызываемого талона и часы | SobakaPav.ru Вариант Алексея Новикова
Алексей сопроводил картинку рассказом с обоснованием своего дизайн-решения. Варвара Степановна благодарит за крупно показанный номер вызываемого талона и часы. Спасибо, Алексей!
Стоп-дизайн
Последний из присланных вариантов заставил меня поломать голову над тем, как вписать его в этот рассказ. Решение, бесспорно, креативное. Только есть одно «но».
Решения мозгоштурма. Электронная очередь в Сбербанке | SobakaPav.ru Автор не ответил на запрос о публикации имени. Уверен, он никого не хотел обидеть
В творческом процессе рождаются самые безумные варианты: неполиткорректные и оскорбительные, остроумные и глупые, смешные и не очень — это нормально и не должно быть наказуемо. Однако почти все известные мне фрилансеры (и некоторые компании тоже) не умеют фильтровать креатив и «ничтоже сумняшеся» публикуют от своего имени все родившиеся идеи, отмахиваясь от критиков: «Ну это же шутка, чего тут такого?!» Для кого-то, может, и шутка, но в «Собаке» всё серьёзно.
Одна из задач дизайн-менеджера в «Собаке» — следить за тем, чтобы заказчик был изолирован от опасных для компании экспериментов, а автор — понимал, почему на пути его творческой фантазии встает корпоративная культура.
Впрочем, хватит морали. Что не так с присланной картинкой? Ну, она как минимум недостоверна: не все сотрудники в отделениях Сбербанка — девушки рубенсовских форм. По науке это называется объективацией женского тела. В России явление малоизученное, а на Западе такой ход может закончиться репутационным или даже материальным ущербом. Прецеденты были (1, 2, 3, 4, 5). Дискуссии регулярны (1, 2, 3). Британский комитет по рекламным стандартам подготовил 64-страничный отчет о ситуации в отрасли, в котором призывает избавляться от гендерных стереотипов и поощрять рекламу, изображающую героев без оскорбительного или двусмысленного контекста. В результате там скорее всего станет меньше стыдобы и позорища. А у нас? У нас победой можно считать ситуацию, когда смелая идея, уместная для федерации американского футбола, не пройдет цензуру менеджера, пекущегося о репутации своей компании и об отношениях с заказчиком.
Результат
«Какое же конечное решение вы предлагаете Сбербанку?» — спросит внимательный читатель. А вот такое, основанное на лучших идеях всех участников редизайна.
Результат редизайна альбомного формата экрана
Область полезного контента явно отделена от рекламного цветом. В момент, когда оператор вызывает следующего клиента, рекламная зона перекрывается крупным приглашением—так изменение состояния сложно не заметить. В нижней части экрана по-прежнему размещаются часы, телефон горячей линии и, возможно, бегущая строка с ориентировочным временем ожидания и другой полезной информацией.
Выживет ли этот вариант? Нужно проверять. В проектировании любых интерфейсов, а особенно — интерфейсов систем без обратной связи, полевое тестирование особенно важно. Не исключено, что оно опровергнет нынешние решения: мелькание экрана будет слишком навязчивым, пять строк для приглашений окажется недостаточно для больших отделений, а информация в бегущей строке — и вовсе вводящей в заблуждение. Тогда придется начинать всё сначала: анализ→гипотезы→дизайн→тестирование.
Пока же приглашаю читателей поделиться мнением об идеях участников редизайна, присылать свои варианты и комментарии на sobaka@pavlova.cc.
Вам нужен интерфейс?
Заказать дизайн
Напишите нам на we@sobakapav.ru
Что мы можем сделать?
Что угодно от исследования пользователей до дизайна интерфейса под ключ.
Примеры из практики
Мы наверняка уже делали интерфейс, пожожий на тот, который вам нужен. Проверьте.
