Переверстка таблицы с расписанием врачей в Инвитро
Разбирать, конечно, будем не каждый вариант таблицы. На картинке показан ненасильственным способ работы, при котором я оставляю себе возможность вернуться к прошлой итерации. Иногда я забивал, но все же.
Зачастую даже изменение отступа между строками в 5 пикселей выносилось на новый экран. Потому что так можно сравнить два варианта. Если не было понятно какой выбрать, я оставлял оба. А если было очевидно лучше, то удалял первый
Начало
Любой информационный дизайн (двигаешь пиксели так, чтобы информация хорошо лежала) содержит в себе изначальное ограничение — сама информация. Поэтому надо понять как информационные кирпичики соотносятся между собой, а уже потом из них что-то строить.
Чтобы разобраться с кирпичками, я просто переписал таблицу, попутно убрав все линейки (обводка, подчеркивания и т.п.) и плашки (плашки это типа цветное выделение строки, как будто строку поставили на цветной прямоугольник).
А колонку с номером кабинета схлопнул вместе с названием врача, потому что слишком расточительно выделять отдельную колонку под номер кабинета. Тем более что они родственны по смыслу для пользователя. Если ты ищешь в таблице определенного врача, практически наверняка ты захочешь знать и его кабинет. На табличке на двери пишут же и то, и то. Так чем хуже таблица?
И сразу убрал колонку «примечание». Потому что там на всю таблицу одно примечание, под которую выделена отдельная колонка. Теперь оно выглядит как уменьшенный курс под именем врача. См. онколог Страхов В.Ю.
А названия дней недели я развернул, чтобы они накрывали частые прочерки в колонках «суббота» и «воскресенье». Помогло не очень. Но пока так.
Сократил названия врачей. В изначальной таблице была подпись «специалист», где все врачи начинались с «врач-». Во первых подпись специалист сама по себе избыточная, а во вторых приставка «врач-» мешает добраться до того, что это за врач.
Выделил жирным врачей, чтобы они визуально не слипались с другими колонками.
Вместе с этим заметил, что название врачей повторяется и решил их объединить, чтобы не пришлось искать двух разных гастроэнтерологов в таблице. А вместе с тем поставил табличные (моноширинные) цифры. С их помощью удобно сравнивать числа друг под другом. Допустим, тебе сказали записаться на прием к гастроэнтерологу. С такой таблицей тебе будет удобнее сравнивать время на прием.
Таблица вытянулась вниз, поэтому я сделал «заголовок» в двер строки, отбив время от даты, потому что это разные сущности.
Первая итерация
Потом я вспомнил, что в оригинале таблица была на телике. Замерил его в фотошопе и узнал, что формат экрана стандартные 16:9. И пока что держал это в голове.
Таблицу поделил на две части и засунул в экран.
Убрал за ненадобностью подписки колонок.
Отсортировал врачей по алфавиту, оставив терапевта на первом месте, т.к. это самый популярный врач. Тот же самый принцип, когда в отсортированном по алфавиту списке городов Москва стоит на первом месте. Ну и надо было подобрать такой отступ, чтобы колонки не слипались, но было понятно, что это не две разных таблицы.
Написал предположительное «в отпуске» для врачей, у которых в расписании во всех днях недели стояли прочерки. Понятно, что туда можно написать что захочешь.
И еще сильнее сократил названия врачей, для этого пришлось погуглить, но оказалось, что врач ультразвуковой диагностики это и есть узист.
А еще выяснилось, что нет отдельного врача «Эдоскопист», есть только эндоскопист. В таблице была опечатка, подозрения появились только из-за того, что эндо и эдоскописты работали в одном кабинете.
У нас есть расстояние между врачами одной профессии и расстояние между врачами разных направлений. Чтобы было понятно что к чему относится, надо делать эти расстояния заметно отличающимися друг от друга и от других похожих расстояний. Но не хочется растягивать вниз таблицу. Поэтому я добавил тоненькие линеечки и прижал их к началу строки.
Убрал плашку из-под терапевта и выделил его цветом, чтобы поддержать сине-оранжевую палитру «Инвитро»
Вы могли заметить, что на экране со всеми вариантами были какие-то красные прямоугольники. Ими я проверял, что таблица подходит под формат 16:9. И все таблицы до этого не подходили. Я их подгонял уже после того, как считал результат устаканившимся. Поэтому настало время прямоугольника.
Мне показалось, что такой ширины внутри таблицы достаточно, а в оставшееся место просто как пятно бахнул приглушенный логотип Инвитро. Чтобы сильно не шумел, но держал формат.
Вообще я не люблю делать такие штуки, но я слишком люблю большие буквы, так что я решился на это пятно.
Я не хотел делать больше поля, а если раздвигать таблицу так, чтобы она занимала всю рабочую площадь без отступа в 20 пкс справа, то дыра была реально огромной. Хз, кстати, почему я не пробовал увеличить шрифт, возможно было впадлу все менять.
Этот вариант я и отправил на проверку.
Вторая итерация
Вечером увидел превью сообщения и удивился, что зачли с первого раза. Потому что обычно роль условного артдиректора состоит в том, чтобы доебываться даже до мелочей.
На самом деле, ничего мне не зачли. За этой превьюшкой скрывалось сообщение на 442 слова и 4 картинки. Я приятно охуел от такого развернутого фидбэка. И видно, что человек его умеет давать. У меня не было ощущения, что я обосрался и все сделал не так (хотя там реально ничего масштабного переделывать не надо было). У меня не приняли работу, но я остался невероятно рад, что получил от курса ровно то, что хотел.
— логотип можно убрать, а освободившееся место использовать для раздвигания таблицы.
— «разделить таблицу на две части — хорошее решение. но сейчас общая визуальная структура выглядит так, будто это всё одна таблица и только при чтении доходит, как всё устроено. хорошо, когда понимать не нужно и структура видна сразу, без чтения. то есть вид должен работать вместе с содержанием»
— «выделенный цветом терапевт не совсем понятно что значит... если это сделано для того, чтобы показать «популярного» специалиста, то достаточно поставить его первым (где он и стоит)»
— «формат „пн–вт“» лучше заменить на „пн, вт“... в диапазоне, который записывается с тире, мы привыкли видеть что-то внутри, что и скрывает сам знак тире»
— «перечёркнутые нули довольно сильно шумят»
— «людей, которые в отпуске или не принимают по каким-либо причинам, можно не показывать»
— «„каб.“ тоже можно опустить»
— «время в разы полезнее, чем заголовок»
— «экран — не статичная картинка и подразумевает обновление информации. а это значит, что мы можем упростить человеку поиск»
- Нули меня тоже смущали, но я не знал, что в обычном пт-сансе уже табличные цифры (как у времени над таблицей). Просто поменял шрифт на обычный.
- Надпись «каб.» забыл убрать перед отправкой, я хотел оставить надпись «каб.» у первого врача, а все остальные стереть. А чтобы дополнительно отделить номер кабинета от врача, можно добавить какой-нибудь граф. стиль (это мне подсказал Михаил). Я выбрал курсив, уж больно он красивый и аккуратный. Да и плюс подписи курсивом привычны.
Теперь обо всем остальном.
Я обосновал «врача в отпуске» в таблице, на что получил ответ:
Я: «...А людей в отпуске я тоже изначально убрал, но затем вернул. Я особо не болею, а родом из небольшого города. Возможно в Москве такого нет, но у нас часто советовали конкретных врачей. Я могу представить сценарий, когда интересно расписание именно этого врача. В таком случае его отсутствие в таблице может запутать и придется идти на ресепшн. А если в таблице однозначно прописано что его нет, то вопросы отпадают (хотя может появиться вопрос когда он выйдет на работу).»
М: «такой вариант имеет место быть, но тут надо понимать, что это исключение. по умолчанию на табло (если мы говорим о табло как о формате) отображается только актуальная информация. ну, например, если представить табло вылетов в аэропорту, то странно будет увидеть там авиакомпанию, которая сейчас не летает. зачем она там? задержанный рейс — да. отменённый — тоже. но ту авиакомпанию, которая сейчас не совершает рейсы — нет.
это не мешает нам, конечно, подстраивать табло под себя. в нём всегда можно написать что-то полезное. и что дверь надо толкать сильнее, и что стены окрашены. это всё полезно, но выходит выходит за рамки формата. про такое можно писать только в конкретном случае, когда мы о нём точно знаем. в нашем задании мы не можем подтвердить (или опровергнуть) гипотезу, что врача, который в отпуске, нужно указывать по каким-то причинам, поэтому и убираем. если бы мы работали с этим экраном в реальном мире и для конкретного филиала инвитро, то надо было бы, конечно, поинтересоваться надо оно нам или нет.»
А еще время же реально важнее заголовка, более того, заголовок вообще можно убрать. Если ты в очереди в поликлинике видишь таблицу с расписанием, то это почти наверняка расписание врачей. А если ты решился прочитать хотя бы одно слово, то все становится совсем ясно.
Дальше пошел поиск формата шапки, меня очень сильно волновал вопрос написания даты. Грамматически было бы правильно поставить запятую, либо добавить окончание у слова. Но ни того ни другого не хотелось. А еще хорошо бы, чтобы заголовок таблицы ее накрывал.
И убрал год из основного варианта, потому что вряд ли кто-то не знает текущий год. А если не знает, то скорее всего ему с хождением по врачам кто-то помогает.
Убрал жирность с заголовка, потому что он и так сильно выделялся кеглем.
Добавил дню недели цвет, который намекает, что врачи покрашенные в этот же цвет работают сегодня (снизу подписано до скольки).
Убрал логотип и добавил дырень в середине, но как оказалось, Михаил не имел ввиду растянуть таблицу во всю ширину. Поэтому я и сделал вариант вариант без дырени, который и отправил. И очевидно, что-то такое он и имел ввиду. Никому из нас не нужна была таблица с дыркой на четверть экрана в середине.
Но чтобы не создавать дырень, пришлось центрировать таблицу.
И помимо этого я задал вопрос про оптическую компенсацию для цвета.
На второй итерации получилась такая штука:
Третья итерация
Фидбэк Михаила:
— «...можно компенсировать, да. классно, что вы задумываетесь о таких вещах. если что, компенсация может производиться разными средствами: насыщенностью шрифта, трекингом, цветом. цвет как раз — один из самых простых вариантов, потому что не каждый шрифт имеет вариативную жирность для таких тонких моментов. достаточно чуть опустить ползунок яркости, и уже становится лучше.»
— «да, дыру, конечно, делать не надо. редко бывает в дизайне так, что изменив что-то одно, можно остановиться. чаще, наоборот, приходится иметь дело с эффектом бабочки и поправлять в разных местах последствия.»
— «год действительно не нужен. не могу придумать случая, когда это пригодилось бы.день недели можно отбивать разными способами: запятой, цветом, положением, начертанием.в случае интерфейса правила помягче, чем в тексте, поэтому придумать можно массу вариантов (и ещё больше останется в запасе)»
увеличить основной шрифт;
уменьшить шрифт у даты-времени;
добавить линейку, которая немного, но будет говорить, что время относится не только к левой части таблицы;
отступы — везде одинаковые поставить
Отправил третью итерацию и спросил про то, надо ли раздвигать колонку с Ф.И.О. только из-за эндоскописта Сибагатуллиной.
Получил ответ и их вариант таблицы:
«если материал статичный, то можно не менять и смотреть на большую часть содержимого колонки.но если мы не знаем, какие там будут фамилии, то тут ничего не сделаешь, колонки должна адаптироваться по единым правилам.»
И это сходилось с моим представлением. Я уже почерпнул из книги Ильи Бирмана про транспортные схемы, что общее влияет на частное, а не наоборот. Поэтому лучше сделать незаметное локальное исключение, но сохранить желаемый облик в целом.
Они буквально перевернули телевизор! И как бы на это нет технических ограничений, но я даже не думал так делать. Было бы прикольно увидеть в очереди в поликлинике вертикально повешенные телек.
И как же она кайфово выглядит. Еще и это большие оранжевые цифры на черном фоне. И аккуратно затухающий к верху таблицы градиент... Крч приятно выглядит во всех аспектах. Еще и день недели подписывается прям над датой. А первой колонкой всегда идет текущий день недели.
И тут прям видно направление мысли. У меня таблица для сценария «вам надо сходить на узи», ты идешь и в таблице ищешь, когда тебе удобно записаться на узи.
А у них для сценарий «чтобы получить справку вам осталось пройти узиста и эндоскописта», идешь и смотришь в расписании когда сегодня принимают эти врачи.
То есть у них удобнее смотреть врачей на сегодня, а у меня на будущее. Потому что у них из-за дыр в таблице сложнее будет понять во сколько в понедельник принимает гастроэнтеролог Пупко.
Отдельно стоит понимать формат таблицы. Это не динамическая информация, новый врач не приходит каждый день. А количество подписей «примечания» не будет увеличиваться раз в два дня.
Но изменения моя таблица может держать, если надо будет подписать под каждым врачом информацию курсивом — чуть раздвину таблицу вниз.
Если появится новый врач — чуть увеличу расстояние между колонками, чтобы таблица осталась формата 16:9.