В 2007 году я выпустил трек «Линкс» (прогрессив-хаус). У меня новая версия, с чуточку подтянутым звуком:
Для сравнения, как было:
Разница не настолько велика как при переделке «Карго» — «Линкс» сразу получился довольно чистым и звонким. Но всё-таки стало лучше. Особенно заметно на инструменте, которым играет основная тема (типа колокольчики) — он стал звучать ярче. Послушайте с 5:26 в обоих вариантах.
Обложка тоже претерпела ремастеринг.
В английском можно оставлять предлог без слова после него:
What are you talking about?
Where do you come from?
Предложение не обязано быть вопросительным:
London is the city I want to go to.
The review she insisted on has not been conducted.
Обычно по-русски это не нужно. У нас такая структура предложений, что есть, к чему приделать нормально предлог:
Лондон — это город, в который я хочу поехать.
Проверка, на которой она настаивала, не была проведена.
Но при этом есть ситуация, когда по-русски хочется оставить предлог висеть сам по себе: когда у нас общее дополнение к двум однородным сказуемым с разным управлением. Вот предложение, которое я только что написал:
Но главное в вашем случае — сделать так, чтобы страница рассказывала о, и показывала пользу валенок.
Так по-русски не бывает. Но я всё равно написал.
Правильно было бы так: «рассказала о пользе и показывала пользу валенок». Из-за того, что с одним глаголом дополнению нужен предлог, а с другим — нет, получается, что предлог надо оставить у глагола. Сначала кажется, что можно просто поменять глаголы местами:
Но главное в вашем случае — сделать так, чтобы страница показывала и рассказывала о пользе валенок.
Но это не работает: мы всё равно считаем предлог частью дополнения («о пользе»), и воспринимаем однородные сказуемые как относящиеся к нему в равной степени. Получается «показывала о пользе». Именно для того, чтобы так не получалось, и чтобы подчеркнуть, что предлог относится только к одному из сказуемых, я и ставлю их в том порядке, в котором ставлю:
Но главное в вашем случае — сделать так, чтобы страница рассказывала о, и показывала пользу валенок.
Сим постановляю, что так делать можно. И что после такого сиротствующего предлога ставится запятая.
Если посмотреть на это шире: отступления от правил, которые увеличивают выразительные возможности языка, я приветствую.
Есть такой дизайнерский спор: надо ли превращать курсор мыши в пальчик над кнопками на сайтах. Недавно у меня в очередной раз спросили, как правильно, а у меня нет мнения на этот счёт. Я даже не помню, как у меня сделано в Эгее. В общем, я стал думать, что надо бы разобраться в вопросе. Вот что успел надумать. Это одна из тех заметок, где в конце не будет правильного ответа или инструктажа «делай так».
Сам вопрос возникает вот из-за чего. Кажется непоследовательным, что пальчик есть у одних нажимаемых элементов, ссылок, но не у других, кнопок. И поэтому хочется сделать пальчик у кнопок. Но операционные системы не показывают пальчик над своими кнопками. И если сделать так на сайте, то снова получается непоследовательно: над кнопками на сайтах пальчик есть, а в программах — нет. И поэтому хочется не делать. Как ни крути, получается непоследовательно, людям от этого некомфортно.
Превращение курсора в пальчик — пример обратной связи в интерфейсе. Она подсказывает, что элемент под курсором действительно нажмётся, как ты и предположил.
В классических интерфейсах курсора-пальчика не было. Элементы управления были стандартизованы и сомнений в том, как они сработают, не оставалось:
Меню в каждой программе в одном месте и ведёт себя одинаково — можно дополнительно не подсказывать. Точно так же написанное слово File в другом месте уже никто не воспримет как что-то, что можно нажать. Кнопки передают нажимаемость выпуклостью — их можно поставить где угодно, и человек поймёт. Никакой обратной связи при наведении не требовалось.
Вдавленное белое поле наверняка белое из-за цвета бумаги («можно писать»). Возможно, это уже не работало так железобетонно: курсор приходилось всё же превращать в вертикальную «балку». Но балка ещё лучше стрелки помогает понять границы выделения — не исключено, что её добавили только для этого, а не ради обратной связи. Так или иначе, сегодня она настолько привычна, что без неё мы можем просто не догадаться, что текст вообще можно выделять.
Пальчик появился, насколько я понимаю, с изобретением ссылок. Нужно было как-то показать, что обычный текст — не меню и не кнопка — нажимается. Подчёркивания не хватало для передачи этого ощущения, вот и придумали менять ещё и курсор. И снова, без этого мы не представляем ссылки. Если мы где-то увидим синий подчёркнутый текст, мы, конечно, будем ожидать, что он нажмётся. Но если при наведении курсор останется стрелкой, мы можем сразу решить, что ссылка не работает, даже не попробовав нажать.
Наверняка вопрос о том, не нужно ли делать курсор пальчиком над всем, что нажимается, приходил в голову дизайнерам сразу, когда они его изобрели. Но если бы курсор мыши менялся на пальчик над кнопками, двигать курсор над тулбарами было бы довольно неприятно: он бы постоянно дёргался туда-сюда. Никакой пользы от такой обратной связи нет, это просто раздражающее мельтешение. Когда-то Опера (был такой браузер) всем кнопкам добавила лёгкую подсветку при наведении — это было отвратительно, просто весь тулбар «дрожал».
В одной из версий Виндоуса в тулбарах убрали выпуклость кнопок, оставили просто иконки:
Без лишний рамок тулбар выглядел чище и современнее. Но простых иконок было недостаточно, чтобы передать нажимаемость. Поэтому выпуклая рамка появлялась вокруг кнопки при наведении. В отличие от эффекта с подсветкой в Опере, тут это почему-то не раздражало. Курсор при этом оставался стрелкой.
Получается, у нас есть три варианта. Обратная связь при наведении:
Интересно, что сами ссылки очень долгое время ограничивались только изменением курсора, но сейчас почти все дизайнеры добавляют и изменение вида самой ссылки (обычно это изменение цвета; иногда что-то делают с подчёркиванием). И для меня совершенно точно ссылка, которая не подсвечивается при наведении, выглядит немножко сломанной.
Получается, что большое значение для нашего удобства и формирования ожиданий имеет привычка, а не «последовательность» в выборе обратной связи. От кнопки никто не ожидает пальчика, поэтому никто и не затупит, когда пальчика не будет — любой нажмёт с той же уверенностью. От ссылки все ожидают пальчика и очень многие — подсветки. Поэтому отсутствие этих признаков испортит ссылку.
По мере того, как интерфейсы перестают быть чисто техническим аспектом взаимодействия с машиной и становятся частью образа продукта, на их внешний вид начинают влиять не только соображения понятности и «знакомости» — их ещё хочется забрендировать и сделать уникальными. Чем дальше мы отклоняемся от проверенных десятилетиями образов, тем внимательнее нам приходится быть к тому, чтобы сохранить понятность и сформировать ожидания пользователя.
Подчёркивание текста, тени, блики, градиенты, скруглённые углы, подсветка, курсор-пальчик — это просто некоторые наши инструменты, которыми мы можем пользоваться для достижения нужного эффекта. И ни про один из них нельзя сказать «у любого нажимаемого элемента это должно быть».
В Эгее, кстати, оказалось так: у кнопок курсор — пальчик, но у чекбоксов и радиокнопок — стрелка. Получается как будто совсем уж непоследовательно: не подходит ни логика «всё, что нажимается — с пальчиком», ни логика «как в операционной системе». Но я не хочу ничего менять, как щас — лучше всего.
Ну и в связи со всем этим нужно ещё помнить, что никакого наведения нет на тач-экранах, поэтому надо рисовать элементы понятно изначально.
В предыдущей серии — общее ощущение от Дублина. Там среди прочего были двери:
Сегодня посмотрим на двери внимательнее.
Много где двери красят красивыми цветами, но нигде больше я не видел дублинского масштаба, размаха и разнообразия.
Иногда сочетания не очень:
А иногда — очень:
Если верить легенде, после непомерных попоек ирландцы регулярно путали двери и заваливались в невменяемом состоянии домой к соседям. Люди стали красить двери в разные яркие цвета, чтобы не путать свою дверь с соседской:
Не знаю, верить ли легенде — соседние двери порой красят одинаково:
Ещё фотография из предыдущей заметки:
Очень красиво:
Фотографии из поездки в мае-июне 2018 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Дублин!
Когда-то я писал совет, где сравнил присланный дизайн сайта с дизайном сайта Мерседеса. С тех пор сайт Мерседеса изменился, но как был, так и остался удивительной лажей:
В начале картинка с бессмысленным заголовком и текстом «Перейти к предложению». Сразу-то нельзя предложение сформулировать? В меню видим пункты «Модельный ряд» и «Купить». Куда мне идти, если я хочу купить, выбрав из модельного ряда? Снизу стоят четыре микроскопических машинки и больше ничего нет. Зачем прятать остальные за ссылку «Показать больше»?.. Ну да ладно, тут можно про каждую деталь писать отдельный пост о том, почему это всё бред.
В принципе, такая же история и у Ауди:
— В каком браузере вы проверяли вёрстку?
— В смысле, а её надо ещё в браузере проверять?
И у БМВ не лучше:
Удивительно, но все сайты производителей автомобилей сделаны отвратительно, причём чем круче автомобиль, тем хуже сайт.
Так плохо даже студенческие работы делать нельзя, а тут сайты главных автопроизводителей в мире. Такое ощущение, что они считают, что они выше всего этого веба.
Но вернёмся к Мерседесу, это же пост про его конфигуратор. Я хотел попытаться понять, сколько будет стоить подходящая мне машина, и пошёл в конфигуратор. Если вы уже имели дело с конфигураторами, вы уже почувствовали боль уже от одного слова. Автопроизводители делают всё, чтобы там нихрена нельзя было понять и покупатель максимально страдал, выбирая машину.
«Фильтр (0), Сортировать по..., Загрузить онлайн-код» — такое ощущение, что я попал в программу управления складом фанеры, написанную 15 лет назад и с тех пор ни разу не тронутую. Вёрстки нет нигде никакой, особенно посмотрите на прямоугольники с машинами! Полная жесть, основные характеристики вывалили просто из базы данных как есть, как будто это сайт для оптовой закупки метизов в Саратовской области. Хотя чего это я обижаю Саратовскую область? Там бы по-любому сделали сайт получше.
Ткнул в первую тачку, и попал сюда:
Специальная модель, Специальная модель, Специальная модель! Что специальная модель? Нихрена непонятно: три аббревиатуры, милипусечная картинка, 220 штук. Весь смысл спрятан хрен знает куда. Слева от большой тачки сверху неведомые иконки. Просто мрак какой-то.
Кручу ниже, и там начинается самый смак — опции:
Это безумие одинаковое у всех. Во-первых, у всех опций максимально тупые, бессмысленно «продающие» названия, из которых нереально понять, в чём суть опции. Во-вторых, картинки нихрена не иллюстрируют и не объясняют. В-третьих, опции уложены по-масонски, чтобы я в них заблудился. И там такой хреноты восемь экранов.
Имеется пакет курильщика, но не пакет здорового человека:
Видите, целая куча фигни, которая стоит 0. Казалось бы, надо брать? Ну, может, кроме «[SA-634] Отсутствие аптечки». Но нет, дело в том, что на самом деле все указанные тут цены ничего не значат. Вот ставлю я галочку у «[SA-B24] Пульта д. у.», а мне говорят:
То есть да, пульт-то бесплатный, но это потому что он входит в опцию «Стояночное отопление», которая стоит 117 штук. Ёлки, так нахрена вы мне тогда пульт отдельно предлагаете?
И оно всё так. После включения любой галочки сайт 5 секунд думает, и потом может её включить, а может сказать, что для её включения нужно выключить три других.
Я понимаю, что весь этот мир опций и пакетов — очень сложный. Чтобы всё это распутать и сделать нормальный интерфейс конфигуратора, который ещё и выдержит постоянные изменения, нужно несколько месяцев кропотливой работы. И это не считая разработки, к которой нужно привлекать квалифицированных программистов, которые не будут заставлять человека ждать после каждого клика.
Но я бы вот очень хотел такую задачу. Сделать конфигуратор Мерседеса. Чтобы он сам стал Мерседесом среди конфигураторов. Мне непонятно, почему выбор машины должен быть формой пытки. Я уверен, что с него уже должен начинаться кайф.
Мерседес, давай попробуем сделать?
С одной стороны, Мерседес, конечно, может себе позволить не думать о том, какой у него сайт. С другой стороны, Мерседес может себе позволить и сделать нормальный сайт.
В квартире, в которой я жил зимой в Тель-Авиве, был такой таймер водогрейки:
Я не сразу понял, как он работает. Попробуйте додуматься.
Переключалочка, где выбрано «Таймер», означает, что это водогрейка работает по таймеру. Можно выключить или включить вручную, но нас интересует именно режим таймера.
Часовая стрелка нарисована на внутреннем кружке, минутная — физически торчит над ним. Они указывают текущее время. Стрелки медленно крутятся, и там даже слышно некое тикание, то есть часы всегда показывают реальное время. А ещё за минутную стрелку можно крутить руками, чтобы настроить часы (кружок с часовой при этом будет сам крутиться в двенадцать раз медленнее). Треугольничек, который показывает примерно на 23-24 тоже указывает текущее время, хотя и чуток не попадает. Сам треугольничек неподвижен, но вокруг него крутится внешнее кольцо с отметками от 1 до 24 часов. Поэтому он всегда смотрит на нужное место в этом кольце.
Красные фигулины соответствуют пятнадцатиминуткам. Если фигулина включена (то есть сдвинута внутрь), то в её пятнадцатиминутку водогрейка греет воду. На фото таймер настроен греть воду с 4 до 5, с 7 до 8, с 14 до 15 и с 18 до 19. При этом включение и выключение водогрейки в нужное время происходит как-то механически. Всё же крутится, и вот, когда треугольничек оказывается на территории включенных красных фигулин, водогрейка включается. Об этом свидетельствует зажигающийся красный светодиод в ЛНУ.
Один из признаков человечного интерфейса — отсутствие технозависимости (читайте совет). А тут явная технозависимость. То есть вся эта штука устроена так, как устроена, только для того, чтобы использовать часовой механизм и всё дальше работало само собой.
Когда я это понял, мне в голову пришли две не очень-то связанные мысли.
Во-первых, эта штука показывает, что технозависимость — не то, чтобы совсем окончательное зло. Это скорее этап, через который проходит интерфейс. Скажем, переключение передач в автомобиле не нужно ни для чего с точки зрения смысла существования автомобиля, но долгое время никто не знал другого способа обойти то ограничение, что у ДВС максимальный крутящий момент достигается только на определённых оборотах. Со временем придумали костыль в виде автоматической коробки передач, но только с появлением электродвигателей в машинах удалось избавиться от передач в принципе (там крутящий момент на любых оборотах нормальный). Если бы люди не разрешили себе технозависимое решение, автомобили бы появились на сто лет позже.
Во-вторых, я стал думать, как бы выглядел нетехнозависимый интерфейс для настройки этого таймера. Вот, допустим, у нас тач-скрин вместо этой шайбы, и что тогда? Оказалось, что задача не такая уж простая. Все штуки, которые приходят в голову, требуют кучи элементов управления, навигации между экранами. При этом ни на одном из этих экранов не будет настолько же наглядной картины расписания, как есть на фото выше (когда ты уже понял, как работает эта штука). Если же всё-таки попытаться разместить всё на одном экране, то все элементы будут слишком мелкими, и всё равно вряд ли удастся добиться такой же пятнадцатиминутной гибкости. Так что, возможно, этот интерфейс не такой уж плохой — примерно как классическая ручка громкости, которая в сто раз удобнее кнопок − и + и сенсорных панелей.
Конечно, вся эта хрень вообще не нужна: из крана просто всегда должна идти вода выбранной температуры без дополнительного программирования водогрейки — именно так работали все краны, встречавшиеся в моей жизни до зимовки в Тель-Авиве.
Вспомнил одну штуку.
Во вчерашнем совете показал интерфейс с рядом чекбоксов:
Хорошо бы упростить человеку выделение ряда чекбоксов. Если я нажал клавишу мыши над чекбоксом и повёл мышь вертикально, не отпуская клавишу, то все чекбоксы, над которыми я «проехал», должны переключиться в то же состояние.
Уточнение про то же состояние — важное. Если первым нажатием я чекбокс включил, то все, по которым я потом веду, должны включиться, а не переключиться (как было бы, если бы я их прокликал по очереди). Если у вас есть под рукой Фотошоп, посмотрите, как там работают «глазики» в панели слоёв — вот так и надо.
Тут есть нюанс. Стандартный чекбокс включается при отпускании, а не при нажатии кнопки. Если нажать кнопку над чекбоксом, а потом отвести мышь и отпустить в другом месте, стандартный чекбокс не переключится. Чтобы реализовать описанную выше штуку, придётся поменять это стандартное поведение и включать чекбокс сразу при нажатии. Обычно это не страшно. Но если изменение состояния чекбокса влияет на что-то ещё, то, возможно, «применение» этого изменения стоит отложить до отпускания клавиши мыши.
Последнее время в том, как я публикую рассказы из путешествий, сложился бардак. Ну да ладно. Я недавно вернулся из Дублина, и вот вам некоторые фотки. До подробностей, надеюсь, доберусь позже.
Первое ощущение от Дублина — это обычный пригород Лондона:
Лук райт, вафельная разметка перекрёстков, двухэтажные автобусы:
Железные дороги проходят как попало и где попало:
Нижние этажи домов покрашены цветами магазинов и кафе:
Красивый градиент из кирпича в зелень на доме:
Дорожный знак (рассчитываю написать более подробно):
Дома на набережной:
Мост:
Другой мост:
Ещё тут есть трамвай:
Барная улица:
Имеется библиотека:
Через город протекает канал с невероятно чистой водой:
Шлюзы открываются и закрываются силой:
Это всё где-то в центре:
Если отойти минут на 15 пешком, начинаются бесконечные двухэтажные спальные кварталы:
Видите, в конце улицы жёлтая и синяя двери?
В Дублине какая-то невероятная разноцветность дверей:
Красота (рассчитываю написать более подробно):
Красивая уличная табличка (редкость):
А это уже если отъехать от центра 10 минут на машине:
Фотографии из поездки в мае-июне 2018 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Дублин!
На Ютюбе много интересных лекций и докладов.
Но найти время на то, чтобы смотреть их, я не в состоянии. Для меня вообще просмотр видео — дискомфортное занятие, потому что в это время трудно делать что-то ещё, а мозгу явно хватает ресурсов на это. Мне больше нравится слушать подкасты, потому что в это время можно бегать, гулять, рулить или хотя бы мыть посуду.
Поэтому вместо того, чтобы смотреть лекции и доклады, я их слушаю. Я скачиваю с Ютюба нужное аудио, заливаю его в Оверкаст (моё любимое подкастное приложение) и потом слушаю как обычный подкаст. Помимо того, что слушать теперь можно где угодно, я получаю другие бонусы Оверкаста: изменяемую скорость воспроизведения, выкусывание длинных пауз между словами, сохранение позиции, независимость от наличия интернета.
Конечно, бывает так, что у рассказчика слайды, и без картинки что-то, о чём он говорит, не имеет смысла. Но опыт показывает, что это большая редкость и смысл понятен и без них. В редчайших случаях, когда я чувствую, что упускаю что-то важное без картинки, я просто делаю скриншот экрана айфона на нужном месте — там как раз видно время, — а потом на компе открываю видос на нужной секунде и смотрю картинку.
Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне.
Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно:
Вместо оттенков серого в типографике используется разная жирность шрифта. Хочется сделать текст легче — возьми более тонкое начертание, но цвет оставь чёрным. Типографично:
Чёрный фон — это темнота, а текст на нём — это свет. Поэтому серый цвет — это просто приглушённый свет. Серый на чёрном выглядит естественно, потому что яркость света может быть совершенно любой:
Он как бы не «серый», а просто темнее. А вот жирность на чёрном работает плохо — разницы между заголовком и текстом почти не видно:
Я ещё в самом тексте одно из слов выделил жирным, но сделал бледнее на четверть — оно полностью растворилось среди соседних.
У меня на сайте на всех страницах на белом фоне заголовки жирные (пример: документация по Жуэлю). Но есть несколько страниц на тёмном, и там жирности недостаёт для выделения заголовков. Чтобы они зажглись, приходится делать текст «тусклее» (пример: Вайрлесс-диджей).
Итого: серый на белом — искусственно; тусклый на чёрном — естественно. Это полезное знание на случай, если вы делаете разные светлый и тёмный скины для какой-то программы или сайта. Нужно, чтобы ваша система скинов умела менять и цвета, и жирность.
Ещё про серый текст:
Не забледняй