¯\_(ツ)_/¯, нататкі з тэгам: redesign

Информационные экраны на Минских остановках

Mon, 15 Jan 2018 17:20:17 +0300

Хотелось бы высказаться на больную для каждого честного человека тему — о «мультимедийных» экранах на остановках.

Почему они такие отвратительные
Мелкое попрание здравого смысла в начале разработке интерфейса повлияло на судьбу экранов чересчур значительно. Сначала в них вместо акцента на том, когда прибудет нужный автобус решили заострить внимание на том, где он сейчас. Потом от этой странноватой идеи отказались. Но менять заданное ею расположения элементов почему-то не стали. Кроме того, по привычке решили занять «свободное место» рекламой. Так вместо спорной первой концепции получился откровенный сюр.

Первоначальная идея и то, что имеем сейчас (использован фрагмент снимка с сайта citydog.by)

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

Табло

Концепт экрана для случая с большим количеством транспорта

Он же, ночной

Для случая, когда транспорта не так много

На остановке, на которой останавливается только один

Улучшения для футбольных таблиц Антона Иокова

Thu, 09 Mar 2017 17:54:03 +0300

Написал недавно Антон:

Привет! Видел, что тебе понравились таблицы спортивных результатов. Похвала — это здорово, спасибо :) Но ещё полезнее критика. Мы выкатили вторую версию с дрилдауном до результатов матчей. Будет здорово, если ты укажешь на провалы…

Да, таблицы хороши. В первую очередь тем, что в них сделана попытка показать больше, чем просто срез текущей ситуации. Как будто к стандартным табличным осям подключили ось времени. Круто. Не вижу, что можно было бы назвать громким словом «провалы». Но есть возможность улучшений, которые позволили бы быстрее ответить на исходные вопросы Антона.

Предлагаю

Первое улучшение, которое просится прямо из названия Replay Table — заменить в интерактивной части стрелки с дропдауном на более гуманный ползунок наподобие плеера:

Дальше не совсем понятно, почему те самые результаты матчей, которые добавили позже, вынесли в отдельную вкладку. Ведь проигрыш/победа/ничья характеризуется как раз количеством забитых и пропущенных мячей. Логичнее показать всё вместе, не заставляя пользователя переключаться туда-сюда. И ещё всё-таки неплохо было бы оставить возможность увидеть не только общую сумму, но и дельту — очки за конкретный матч:

Под впечатлением неудачных примеров из интернета Антон отбросил идею использования визуализации. Зря. Классический спарклайн возле каждой команды как раз отлично ответил бы на исходные вопросы. Разукрасив его область в цвета результатов матчей, получим вариант, который и без механизма «риплея» даст полное представление о том, как каждая из команд провела турнир:

А уж с механизмом должно получиться вообще прекрасно:

Идея посмотреть на турнир со стороны конкретной команды (третья вкладка) неплоха, но, кажется, не додумана. По-настоящему заиграла бы, если бы так можно было сравнить команду с соперниками:

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

Добиться этого поможет новая концепция: вместо того, чтобы идти как бы «вглубь» команды (переключать вкладку), предлагаю фильтровать таблицу по команде:

Эти улучшения — лишь теория, не знаю, удобно ли будет использовать результат на практике.

P.S. Все, кому нужен мой совет, мнение по вопросу или помощь, пишите на bootook@gmail.com. Обязательно отвечу.

UPD Реализованная Антоном библиотека для таких таблиц.

Редизайн электронного железнодорожного билета

Fri, 20 May 2016 16:00:00 +0300

Редизайн железнодорожного билета вызвал поток вопросов у публики. Возможно ли технически воплотить задуманное? Куда делись водяные знаки, атрибутика БелЖД, текстура бланка и вообще «оформление»? Можно ли так свободно обходиться со штрих-кодами? И так далее. Честно, я не знаю ответов. Поэтому, скажем так, беру пост о билете обратно. Начнём заново. С другим объектом.

Электронный билет. Вещь, не зависящая от принтера, установленного в кассе. Не требует специального бланка для печати. Можно верстать как угодно, с использованием каких угодно шрифтов и цветов. Кроме того, у БелЖД появился недавно, а значит, над ним думали наши современники, и он не обязан соответствовать старым канонам.

Будем переделывать электронный билет. Вот так он выглядит сейчас:

Сначала избавимся от мусорных элементов. Уберём неуместные иконки, линии обводок, странный перевод на английский язык (билет читает один человек, которому нужен только один язык) и абсурдные фразы «Подтверждаю…» и «Я согласен…». Если оставить только нужную пассажиру информацию, получим такое:

А теперь давайте подумаем о полезном действии этого объекта. Как ни странно, для проезда он не нужен. На самом деле у проводника список пассажиров, оплативших поездку через интернет. Чтобы он вас там нашёл, нужен только паспорт. Получается, это скорее не билет, а информационная памятка для пассажира. Полезное действие — ответить на как можно большее количество потенциальных вопросов. Значит, для переделки нам надо не только убрать лишнее, но и добавить то, чего не хватает.

Чтобы потом не возникло проблем, на вопросы пассажира будем отвечать только с помощью общедоступных средств и открытых источников. А значит, сможем ответить не на все :) Но, по крайней мере, можем предложить адреса вокзалов в точках отправления и прибытия, схему поезда с отмеченным местом пассажира и перечень станций на пути. Карты возьмём с Яндекс.Карт, а схему поезда и перечень станций — на сайте БелЖД. На него же ориентируемся в выборе стиля нового оформления.

Получается вот такая памятка:

С вёрсткой здесь не так очевидно, как в случае с обычным билетом: другой формат, больше разноплановых элементов, сложнее скомпоновать. Кроме того, перечитываю «Типографику и вёрстку» Артёма Горбунова, — от всей души пытался соответствовать. Старался соблюсти правила внутреннего и внешнего, модульность, якорные объекты и принцип «от крупного к мелкому» без ущерба для идеи максимальной информационной наполненности. Вкратце было так:

Но вёрстка тут не главная тема. Этим постом я хотел напомнить ещё один принцип редизайна: в основе всегда работа со смыслом объекта. Без этого никуда.

UPD. По совету уважаемых комментаторов из фейсбука добавил в билет прогноз погоды :)

Смерть моих иллюзий

Fri, 15 Apr 2016 18:00:00 +0300

Ещё год назад хотел рассказать, чем закончилось дело с посещением БАЭС. Но только теперь боль утихла, и способен без слёз вспомнить, как это было. Предысторию читайте в постах о расписание Антона Иокова, мини-теории инфостендов и ошибке дизайнера.

См. также пост в ЖЖ Саши Чеботарёва, как он сходил к руководству метро.

История оборвалась на том, что БАЭС не нужен был от нас новый стенд. Было плевать на теорию инфостендов и другие идеи. Оказалось, предложить «сотрудничество» побудила не вера в новую кровь, а своеобразный подход к отбору информации для плаката.

Так выглядел информационный плакат на тот момент

Подход БАЭС такой: берут ватман, делят на прямоугольники. Как в газете, выделяют места для «рубрик». Потом для этих прямоугольников-рубрик придумывают наполнение. В центре внимания создателя — не информация, а «пятнашки» из блоков. Если, например, слишком мало данных, — увеличивают декоративные элементы.

Почему-то подумали, что нужна новая «рубрика» — график движения транспорта. Расписание Антона захотели потому, что оно всегда вписывается в прямоугольник. И ответ на наш новый вариант инфоплаката был примерно такой: ребята, просто найдите место для расписания Антона в нашем прекрасном текущем инфоплакате, а о вашем забудьте.

Новый черновой вариант инфоплаката, который рассматривать не стали

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

Изначально мне расписание Антона казалось не очень удачным. Хотел придумать вариант, который так же вписывался бы в прямоугольник, но был более понятным. Однако, перепробовав несколько вариантов, ничего лучше родить не смог. Поэтому всё-таки вернулись к изначальной задумке Антона.

Один из рабочих вариантов расписания, подсмотренный у каких-то немцев. К сожалению, не помню, у каких

Форма расписания подсказала и концепцию «вписывания» в инфоплакат: отказываемся от прямоугольников-рубрик и вместо «пятнашек» пускаем всё одним потоком.

Газетный принцип наполнения остаётся, а информации помещается больше.

Благодаря этой находке вписали в плакат кроме расписания и маршрутов ещё и блок «Куда можно доехать». Заодно немного изменили блок заголовка и поменяли местами карту с информационной частью. Воодушевлённые, снова отправились в БАЭС.

Плакат в .pdf

Но нас ждало разочарование. Оказалось, у руководителя БАЭС уже нет времени разговаривать, он поручил нас помощнику. Тот посмотрел, послушал и обещал сам связаться с нами для дальнейших обсуждений. Естественно, никто не связывался. Сами раз пять пытались безрезультатно напроситься на новую встречу, пока наконец не поняли, что тогда нас просто вежливо послали подальше.

Итого

Урок этой истории такой: затевая переустройство мира, не забудь выяснить, как он устроен. То, что кажется недосягаемым, может оказаться гораздо ближе. Но и то, что кажется простым, — гораздо сложнее. Если тебя стали слушать, — тщательно подбирай слова, второй попытки может не быть.

Редизайн железнодорожного билета

Wed, 30 Mar 2016 12:00:00 +0300

На той неделе приснился Джесси Гарретт. Этот странный сон напомнил, что я ещё не предлагал вариант оформления железнодорожного билета. Давайте исправим это.

Фотография с сайта в-минске.рф

Сначала выясним, что вот это вот всё на билете значит. Обратимся к сайту железной дороги, где даётся расшифровка, и запишем всё подряд.

Сбор данных показывает, — главная проблема в том, что ничего не понятно. Нет акцентов. Нет логической последовательности. Вместо человеческого языка — аббревиатуры и условные обозначения. Нужно сделать яснее.

Начнём с того, что сформируем группы из этого потока элементов. Так как для примера взяли билет из Барановичей в Оршу, на нём нет данных о пассажире. Мы тоже делаем без них. Но будем помнить, что в общем случае возможны ситуации, когда на билете есть ещё имя человека и номер паспорта. Это будет у нас условной группой.

Перейдём к компоновке. Не меняем размеры и формат. Но учтём способ использования физического объекта билета: проводник сгибает его пополам и отрывает кусочек сверху (см. исходную картинку). Да и сами пассажиры часто складывают билет вдвое. Поэтому будем делать такой, который можно было бы прочитать в сложенном виде.

Первые три группы элементов сходу ложатся в красивые места. При этом, как и обещали, отказываемся от кодов и аббревиатур, расшифровку стоимости и класс обслуживания пишем человеческим языком.

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

Да, не забыли потенциальную группу имени пассажира и номера паспорта. Помним и линию сгиба. В подарок проводнику сделаем отрывной корешок и подправим типографику. Готово.

Спросите, при чём же тут Джесси Гарретт? Да особо ни при чём. Просто я именно через знакомство с ним узнал этот простой, но действенный принцип редизайна: 1) выписываем всё подряд, 2) группируем, 3) расставляем приоритеты внутри групп и между ними. Постоянно руководствуюсь. Рекомендую.

UPD: Оказывается, существуют ещё варианты редизайна похожих билетов. Интересно:

lookatme.ru/mag/live/experience-experiments/203403-redesign-s02-e02?medium=website

artgorbunov.ru/bb/soviet/20131028/

Редизайн электронного железнодорожного билета

Полезное действие

Thu, 02 Jul 2015 19:00:00 +0300

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

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

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

«В центре работоспособного дизайна — идея полезного действия… Полезное действие системы — это ради чего она существует… первая задача дизайнера — определить полезное действие продукта.» (Артём Горбунов, artgorbunov.ru)

Понял, что не так с таблицей. Размытое полезное действие. Я о нём даже не думал, рассуждая в категориях «чтобы стало понятнее», «красивее», «чище» и в таком духе. Это была ошибка.

Полезное действие таблицы — помочь запомнить, какое окончание у глагола должно быть в зависимости от окончания инфинитива. Если бы сразу определил это, сразу понял бы, что чтобы улучшить таблицу, надо её упростить. Отказаться от групп (I—V) и примеров — от всего, что не помогает запоминать правило. Сгруппировать по смыслу, а не по традиции. Так наконец получится работоспособный вариант.

С определённым полезным действием листок стал чем должен был стать — помощником. Рассказ о том, как переделывал листок, на Бехансе.

«Понятие полезного действия — это очень хороший способ сконцентрироваться на том, что действительно важно, и сказать „нет“ всему остальному» (из лекции Артёма в Студии Лебедева).

Мини-теория инфостендов

Fri, 08 May 2015 21:00:00 +0300

Пост критики расписания Антона Иокова и Анастасии Канунниковой стал поводом к тому, чтобы мы познакомились с ребятами лично. Они оказались хорошими и энергичными, с мечтами об улучшении информационной среды в Минске. Я очень рад этому знакомству.

Ещё оказалось, что помимо расписания у них есть и другая задача. После статей на Онлайнере с Антоном связался директор БАЭС Юрий Петрович Важник, и ребята побывали у него на приёме.

БАЭС — Белорусская ассоциация экспертов и сюрвейеров на транспорте, baes.by. Статьи на Онлайнере: первая, вторая.

Там выяснилось, что организация плавно внедряет информационные плакаты на остановки общественного транспорта Минска. И эти плакаты требуют доработки.

Юрий Петрович попросил у ребят предложить улучшения для таких плакатов. Не ставя никаких ограничений. Они, естественно, решили кардинально пересмотреть внешний вид инфоплакатов :). Получилась интересная задача.

Я не мог остаться безучастным. Мне всегда не давал покоя вопрос, как рождаются инфостенды, и почему они выглядят так как выглядят. Хотя бы в качестве упражнения захотелось попробовать решить такую задачу. Так получилось, что в результате родилась мини-теория.

Суть теории

Задача инфостенда: помочь пользователям попасть из точки А в точку Б. Где точка А — инфостенд, а точка Б — любое место в городе. При этом о самих пользователях и сценариях использования стенда мы ничего не знаем. И не можем использовать другие носители.

Так как получается некоторое множество одинаково ценных точек (точнее, мы не знаем, что ценно, а что — нет), то идеальным решением кажется дать всю максимально возможную информацию обо всех точках города. Но по условию мы ограничены форматом стенда. Поэтому вся теория состоит в том, по какому принципу фильтровать информацию, чтобы она оставалась и максимально полной, и умещалась в заданные рамки. Вот этот принцип:

Делим точки города на группы (в нашем случае их три — по способу достижения — пешком, на транспорте и все остальные). В зависимости от количества точек в группе выбираем максимально достаточный канал передачи информации: чем больше точек, тем шире канал используем. При этом варьируем приблизительность: чем ближе (физически) к нам точка, тем более точная о ней информация. Дополняем другими каналами по порядку. Повторяем это до тех пор, пока не достигнем границ формата.

Пример для точек, которых можно достичь на общественном траспорте

Так как точек в группе сравнительно мало, кажется, карта — слишком широкий канал для их отображения. Тогда начинаем со схемы. На ней отражаем:
— название остановок;
— район;
— способ, которым можно к точкам добраться;
— направление относительно стенда;
— время, за которое можно добраться.

Переходим к следующему каналу — тексту. С его помощью дополняем:
— ближайшие объекты, созданные людьми;
— ближайшие географические объекты;
— улицы.

Чуть более полный текст теории и коментарии к черновой реализации

Если по маршруту следования осталось мало (например, меньше 5) остановок, можно использовать ещё один канал — добавить фотографии того, как выглядят те места.

Черновой вариант стенда на примере остановки Универститет Физкультуры по ходу движения транспорта в сторону кольцевой» .pdf, 5,5 МБ.

С этим мы и отправились в БАЭС. Чем это закончилось, читайте в постах про ошибку дизайнера и смерть иллюзий.

P.S.: Придумывая теорию, сознательно не использовал никаких источников и не обращался к зарубежному опыту. Хотелось дойти самому. Но это тупиковый путь. Поэтому большая просьба ко всем, кто шарит. Посоветуйте книги и всякие другие ресурсы на тему городской навигации, инфостендов и вот этого всего.

Минское метро. Антисхема

Wed, 25 Feb 2015 13:00:00 +0300

Антисхема в pdf

Современный принцип рисования транспортных схем создали в Лондоне в 1933 году. До этого любая транспортная схема была совокупностью маршрутов, лежащих поверх географической карты населённого пункта. Ситуация кординально изменилась, когда инженер Генри Бек предложил рисовать схему лондонского метро по принципу электрической: все углу стали кратны 45°, расстояния между станциями на прямых участках уравнялись, появились пеньки вместо кружков для обозначения станций. Несмотря на то, что это было настоящей революцией, люди схему приняли. Оказалось, что связь между станциями и линиями для них важнее географии. Теперь похожий принцип используют все транспортные схемы мира.

Схема Фридерика Стингемора, которой пользовались в лондонском метро в 1932 году, и схема Генри Бека, которую он предложил в 1933 году

Но схема метро Лондона пережила ещё множество изменений, работа над ней не прекращается до сих пор. Есть мнение, что география все-таки играет роль — искажённые расстояния на схеме влияют на решения пассажиров о поездке. Поэтому лондонские дизайнеры продолжают работать над тем, чтобы схема формировала правильную картину города у пассажиров.

Схема, что висела в вагонах метро Минска приблизительно до 2012 года, и схема, которая предположительно висит теперь

Совершенно очевидно, что создатели схем минского метро избрали для себя путь, обратный принципу Бека, — от схематичности назад к «географичности». Что, на самом деле, вполне можно понять. Всего две линии, которые пересекаются в одном месте, всего 29 станций, и такое большое пространство вокруг. Слишком велик соблазн попытаться повысить информативность схемы. Например, добавив географию. Правда, дальше этого в Минске не пошли.

«Во-первых, Год гостеприимства в Беларуси заканчивается…»
Пресс-секретарь минского метрополитена Андрей Кузьмин

А мне показалось, что именно на примере минской схемы можно довести принцип Бека до кажущегося логическим завершения. Забыть про то, что метро — это железная дорога, и взглянуть на него как на своеобразный телепорт. Как бы выделить его суть: два списка станций, удалённых от друг друга во времени, с возможностью перейти (в переносном, но на самом деле и в прямом, смысле) из одного в другой список на станциях пересадки:

В таком случае средством повышения информативности получается не географическая привязка станций, а перечень мест, к которым можно «телепортироваться» на метро:

Но и «географичность», как видим, тоже присутствует. Никто не в обиде:

Как я мерял расстояния :)

Однако как любая антисхема, моя исповедует ряд антипринципов:

Немасштабируемость. Она утратит свою актуальность, когда запустят третюю линию метро.
Нетолерантность. Так как высота строки списка отложена на оси времени (как бы дико это не звучало), нельзя добавить перевод названия станций на саму схему. Можно сделать только отдельный иноязычный вариант.
Контринтуитивность. Большинство респондентов её не понимают.

Антисхема в большом размере

Обновление антисхемы

Антисхема после того, как построили третюю линию