8 заметок с тегом

дизайн

Почему я люблю аналоговые часы


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

Минуты

На аналоговом циферблате я не считаю минуты, я просто вижу, сколько прошло с предыдущего часа и сколько осталось до следующего. Для этого я вообще не вербализирую это в цифры или слова, даже про себя, я просто вижу: «вот такой кусок прошел с пяти часов» или «еще вот чуть-чуть и шесть». На цифровых мне надо сделать пусть мизерное, но всё-таки когнитивное усилие и перевести какие-нибудь абстрактные 46 минут в долю от часа. Такие понятия как «полчаса» и «четверть часа» тоже моментально без усилий визуализируются на циферблате, нежели переводятся в 30 и 15 минут соответственно.

Часы

Ещё с восприятием часов работает та же схема которой пользуются продавцы. 399 рублей воспринимаются как «триста с чем-то», а не «без рубля четыреста». То же самое с цифровой записью времени — 16:54 для меня «четыре с чем-то», а не «без шести пять». Чтобы это скорректировать опять же, нужно пусть небольшое, но усилие. На аналоговых я просто вижу, что до пяти осталось совсем чуть-чуть.

И да, еще 24-часовая форма записи. Понятно, что она вроде как должна быть более нативна, ведь в сутках именно 24 часа, но никто никогда не говорит «встреча в двадцать часов» или там «обед в тринадцать тридцать». То есть услышав «встреча в восемь» приходится перевести это в 20:00 и уже отслеживать на своих цифровых часах. Как я уже сказал, усилие конечно ничтожное, но у интерфейса которым пользуешься несколько десятков раз в сутки такие лаги складываются в хуёвый юзер экспириенс (которого вы можете и не замечать, пока не попробуете альтернативу, где таких проблем нет). Аналоговые часы лишены такой проблемы, если встреча назначается устно, а лично у меня это куда более частый сценарий. В восемь так в восемь, окей. Но, конечно, увидев в календаре запись «встреча в 20:00» приходится проделывать аналогичный процесс в обратную сторону, тут уж ничего не поделаешь ¯\_(ツ)_/¯

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

2018   Apple   дизайн   интерфейс   часы

Метроплакат с указателем. Часть 3

Часть 1
Часть 2

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

Узнаю в гугле, что Окружная будет огромным ТПУ с теплыми пересадками и одним (слава богу!) названием. Значит обозначение должно быть аналогично пересадке «Владыкино», одним кружком. Проделываю нехитрые манипуляции:

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

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

Чудом ничего не рушится. Хвалю себя, скидываю Илье итоговые пдф-ки и пнг-шки, и вдруг:

С выравниванием цифр действительно начинает выглядеть опрятнее и эстетичнее.

Вздыхаю и трачу ещё пару часов на муторное выравнивание стрелочек ручками, ибо геометрический и визуальный центры стрелочек при разных поворотах не совпадают.

Кидаю ещё один взгляд на схему. Вижу, что подписи Лихобор (Лихоборов?) тесно внутри МЦК, а вокруг Коптево много места. Пишу Илье:

Как видите, Илья не только руководит, но и сам иногда берёт в руки мышь и фотошоп. Пришлось, конечно, переделывать самому:

Вродё всё. Анонсируем, выкладываем. Выдыхаем.
...
...
...
НАГАТИНСКАЯ

Оказывается, с 1 января 2017 года есть холодная пересадка с «Нагатинской» на «Верхние Котлы». Тут всё оказалось не так сложно, но опять же, волна подвижек прокатилось по всему югу серой и зелёной веток и сдвинула с места Каховскую линию:

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

Ну и под конец — итоговое сравнение схемы до и после.

Метроплакат с указателем. Часть 2

Часть 1

У нас было 2 алфавита, 207 станций, 13 линий всех сортов и расцветок, а ещё монорельс, четыре аэропорта и полдюжины планируемых станций. Не то, чтобы это всё было нужно для алфавитного указателя, но раз начал верстать, становится трудно остановиться. Единственное, что меня беспокоило — это станция «Улица Старокачаловская». В мире нет ничего более неудобного и несокращаемого, чем «улица Старокачаловская». И я знал, что довольно скоро мы в это окунёмся.

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

Когда я решил взяться за указатель, задача для меня выглядела довольно просто — взять указатель Ильи пятилетней давности и просто добавить в него новые станции. Выглядел он, если вы не помните, так:

Казалось, всего-то и делов — определиться с тем, как показывать станции МЦК и вперёд. На схеме Ильи МЦК отличается от остальных линий толщиной. Ещё у меня были опасения, что цвет будет путаться с коричневой Кольцевой, поэтому я решил, что стоит сделать её стрелку аутлайном. Скинул Илье варианты:

Тут я понял, что всё будет не так просто. Добавляю цифры

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

Пытаюсь расположить схему и указатель на формате 70×50. В левом нижнем углу остаётся пустота, но я сразу придумываю чем её забить и заодно предлагаю Илье ещё один путь монетизации :-)

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

Выделение болдом — шляпа. Илья не унимается:

Что я показал тогда Илье вы можете узнать у него в телеграм-канале, но стрелочки с кружочками по правому краю я выровнял. В процессе случайно получилась красота :-)

Где-то в этой же итерации решили закрасить стрелку МЦК — всё-таки оттенок у неё легко идентифицируемый, да и номер рядом есть.

Следующий, довольно логичный и очевидный шаг доходит до нас только сейчас — зачем мусорить несколькими стрелочками и тем более кружками, ведь во всех случаях (даже с разными Деловыми центрами) направление у них одно и то же. Ищем варианты, в итоге останавливаемся на перечислении номеров через запятую и одной стрелочкой в цвет последней линии. Номера сортируем по убыванию, чтобы последней не оказалась МЦК. Почему? Потому что линии метро «важнее» чем МЦК и на них найти станцию проще, а значит лучше чтобы последняя стрелочка красилась в цвет одной из метрошный линий.

Всё это я пытаюсь вписать в формат своей икеевской рамки 70×50, а Илья в свою очередь настойчиво просит сделать набор ещё плотнее, а в идеале впихнуть указатель в две колонки. Я сопротивляюсь как могу, но потом узнаю, что в ПринтДиректе, где Илья печатал прошлый плакат, есть только форматы 3:2 и 5:4. Решив, что себе я потом сделаю отдельную версию, беру формат 5:4 и начинаю исполнять мечту Бирмана о двух плотных колонках.

Илья предлагает заверстать заголовок в колонку. Получается сильно многострочно.

Исходим из того, что потенциальные покупатели плаката в курсе как работает указатель, поэтому оставляем просто заголовки «Алфавитный указатель» и Station Index. Чтобы сравнять высоту колонок добавляем в указатель ещё одну станцию ;-) Я откладываю указатель, и решаю пока открыть строящиеся участки, что б распечатанный плакат чуть подольше побыл актуальным.

Но об этом в следующей, заключительной серии. Оставайтесь с нами!

Метроплакат с указателем. Часть 1

Чтобы понять о чем вообще речь, читайте пост в блоге Ильи Бирмана

Начало

В ноябре 2016 года я получил оффер в Рокет и собрался переезжать в Москву (жил я тогда в Питере). Среди моих вещей завалялась пустующая белая икеевская рамка. Тогда я написал Илье Бирману в Телеграме:

Я написал письмо. Илья ответил, скинул аишку со схемой и попросил подготовить её для печати, в частности убрать артефакты на стыках линий и поправить прочие технические детали.

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

было/стало

После того как Илья залил новую пдф-ку и написал пост, у нас состоялся такой диалог:

Я: Слушай, у меня рама 50×70, а у тебя пропорции схемы более квадратные. Не охота оставлять сверху-снизу поля большие. Я подумал, может твой легендарный алфавитный указатель вниз воткнуть? Он у тебя в каком состоянии?

Бирман: О, если бы ты его допилил, было бы офигенно, но там работы много будет. Его же надо будет переверстать и дополнить станциями Окружной. Я его делал в Иллюстраторе, и это был ад. Вроде бы надо сверстать в ИД уж нормально.

Прошёл год

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

Я исправил это за три минуты, но Илья почему-то остался недоволен :-(

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

Становится ясно, что участки МЦК и фиолетовой ветки между Панфиловской и Октябрьским полем идут рядом. И на этом участке МЦК имеет ещё одну станцию — Зорге. На схеме Яндекс.Метро это показано максимально наглядно:

Понимаю, что без изменения формы МЦК не обойтись, и нужно сделать также, только разумеется аккуратнее и эстетичнее. Двигаю прямой параллельный участок МЦК вплотную к фиолетовой.

Пересадка выглядит вроде ок, но теперь между фиолетовой и зелёной ветками жутко тесно. Отодвигаю изиб фиолетовой вместе с МЦК обратно, примерно в среднее положение между текущим и изначальным. Уточняем расстояние между станциями, добавляю еще точку. Почти все станции в округе тоже двигаются туда-сюда на миллиметры, в итоге всё вроде устаканивается.

Параллельно с этим решаем проблемы в другой части схемы.

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

От лишних изгибов избавились и в итоге пришли к такому:

Каруселька с изменениями, для тех кто любит сравнивать:

В следующем посте мы наконец доберёмся до указателя. Не переключайтесь )

Не знаешь что делать — уменьшай


См. «Не знаешь что делать — увеличивай»

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

Увидеть берёзу в лесу трудно, не увидеть одинокую берёзу посреди чистого поля — невозможно (не знаю почему я выбрал для метафоры берёзу, придумайте что-нибудь более удачное). Об этом стоит помнить — элемент посреди пустоты привлекает много внимания. Иногда слишком.

На этом банере небольшой логотип Мвидео на красном фоне привлекает больше внимания, чем вся композиция про скидки справа, хотя должно быть наоборот )

Резюмируем:
1) Берёте
2) Уменьшаете
3) Следите, чтобы акценты были на нужных местах
4) Готово! Вы великолепны!

Не знаешь что делать — увеличивай


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

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

Например, есть у тебя статья на разворот, а текста там — кот наплакал. Или есть задача сделать плакат, а иллюстрации или фото — нет. Или есть, но какая-то невыразительная. В общем, ты в затруднении, а дедлайн — завтра.

Решение такое. Берёшь чё-нидь из того что есть — заголовок, дату, невнятную иллюстрацию — и УВЕЛИЧИВАЕШЬ! Прям жми в своём блядском фотошопе cmd+t, или че там у тебя, хватай курсором за уголок и резким движением отправляй мышь куда-нибудь на околоземную орбиту. Главное — не ссать. В результате у тебя получится что-то такое:

Может показаться, что это хорошо работает только в плакатах и постерах (там сам бог велел ебашить покрупнее), но это довольно универсальная штука.

Примеры журнальной вёрстке. Особенно выручает когда нужно добить материал до определенного количества полос, а нечем :-)
Ну а на сайте ёбнуть в шапку огромный заголовок — вообще милое дело
Или на банковской карте )

Естественно, просто тупо увеличив что-то, ты не сделаешь хороший макет. Дальше надо найти композицию, цвета́, может добавить паттернов, деталей, переколбасить объекты между собой. Главное — это подтолкнёт фантазию и сдвинет макет с мёртвой точки. Возможно итоговый вариант вообще не будет содержать ничего гипертрофированно большого. Как я уже сказал — это рецепт на случай, если ничего в голову не приходит.

Резюмируем:
1) Берёте
2) Увеличиваете
3) Декорируете всё это дерьмо
4) Готово! Вы великолепны!

См. «Не знаешь что делать — уменьшай»

Цвета диаграмм в Яндекс.Метрике

Возьмем, например, экран с источниками переходов.

На одну неподписанную диаграмму аж две, по-разному выглядящие легенды

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

Тут бинго случайно выпало «Переходам из поисковых систем», цвет на диаграмме совпадает с красным цветом иконки.

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

И так везде. Даже смешно становится :)

2015   дизайн   интерфейс   цвет   Яндекс

Гугл, что ты делаешь, прекрати!

Это даже не ахаха, просто прекрати!

Вы замечали, что Гулг, в зависимости от запроса, меняет порядок пунктов в меню фильтров выдачи?

В Гугле, разумеется хотели как лучше. Мол, если в моем запросе «фото» или «картинки», лучше мне подсунуть сразу картинки, а если «новости» — то соответственно новости. Но получилась жопа.

Начать с того, что порядок непредсказуем. Если я ввёл «Воронеж», я еще могу спрогнозировать, что первыми будут стоять «Карты» (хотя это уже лишнее усилие, пытаться классифицировать свой запрос), а если я ищу «фото сёрфинг Украина»? Я для эксперимента попробовал предположить порядок пунктов, не угадал :-)

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

В идеале, порядок пунктов должен быть неизменным. Люди не читают пункты меню, которым пользуются постоянно. Они запоминают в первую очередь расположение, ну там «третий слева», «предпоследний» или «в верхнем левом углу». Я, например, привык, что в большинстве запросов «Картинки» идут сразу после «Поиска», и каждый раз когда там оказывается что-то другое жутко бешусь. Худшее, что можно сделать с меню — это менять порядок пунктов.

Когда я сегодня, в очередной раз тыкнув не туда, разразился гневным твитом, оказалось что некоторые люди даже не замечали, что это не они тупят, а Гугл своевольничает:

Гугл, не надо так.

2015   Google   дизайн   интерфейс