Избранное

Позднее Ctrl + ↑

Договорённости — без ссылок

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

Например:

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

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

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

Ну или записали ссылки на конкурентов. Дизайнер их посмотрел и составил какое-то своё впечатление; что-то захотел использовать, что-то нет. А клиент потом на любую вещь говорит: «Так а вы что, не посмотрели, как сделано у „Рогов и копыт“?» «Так а в чём проблема как у „Лютика“ нарисовать?» «Да зачем вы изобретаете велосипед, эту задачу отлично уже решили в „АКМЕ“, вы что, не смотрели ссылки, которые я вам давал?». Клиенту что-то понравилось у каждого из конкурентов, и он решил, что мы возьмём каждую из этих вещей (которые нигде не перечислены и ни разу даже не обсуждались) ровно в том виде, как ему понравилось.

Или вот поставили ссылку на страницу сайта «Доси», и написали, что ввод даты должен вести себя так же. Клиент замечает ссылку где-то в переписке о разработке, идёт по ней, ходит по сайту и запоминает: «ок, у нас будет как у „Доси“». Разработчик смотрит сайт и радуется: «о, там стандартный выпадающий календарик из знакомого фреймворка, тоже поставим его». Время проекта подходит к концу, а клиент вдруг спрашивает: «А когда уже заработает трекинг доставки заказов? И я думал мы хотели сделать красивое видеообъяснение работы сервиса» Дизайнеры недоумевают: откуда эти требования вообще взялись? А потом выясняется, что это есть у «Доси», а клиент считает, что мы договорились делать как у них.

Содержимое по любой ссылке ещё и может поменяться, но, как видите, даже без этого проблем хватает.

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

К: Там Маша и Федя собрали большую подборку материалов в Дропбоксе, надо, чтобы вы их изучили и тоже учли при работе. Давайте добавим ссылку в ваше Понимание задачи, чтобы не потерялось!
Д: Простите, я боюсь, что мы что-нибудь там не поймём или упустим. Как бы нам это с самими Машей и Федей обсудить, чтобы они нам рассказали всё, что накопали? И мы тогда в Понимании задачи сразу запишем всё то, что нам нужно сделать в связи с этим.
К: Хорошо, я вас свяжу. Я там вам потом ещё кстати скину ссылки на конкурентов наших.
Д: Насчёт Маши и Феди: давайте тогда быстрее это устроим, чтобы мы докрутили Понимание задачи с учётом всего важного. А про конкурентов — может, давайте вместе сейчас посмотрим? Покажете, что именно вам там нравится и не нравится, и мы выпишем, что там важно. А то вдруг мы там обратим внимание не на то.

Дизайнер и разработчик:

Д: Ещё ввод даты надо сделать как у «Доси».
Р: А в чём там особенность? Чем отличается от нашего обычного календаря из фреймворка, который мы использовали на прошлом проекте? Давай опишем в спеке.

На интерфейсном курсе: как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10

Сегодня срыв покровов — показываю кое-что из-под капота Эгеи 2.10. Пришло время выложить очередной фрагмент моего онлайн-курса, а там я рассказывал ребятам, как Эгея 2.10 автоматически верстает этаж рекомендаций (это то, что последние пару месяцев вы видите тут под заметками).

В общем, фрагмент № 14 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 31 июля 2020 года. Покажите дизайнерам и разработчикам.

00:00 Задача и примеры
01:35 Дизайн «раскладок» для разных случаев
04:29 Описание раскладок в коде
05:50 Автоматический выбор и оценка раскладок
07:47 Режим отладки

Почитать о курсе

Программа, отзывы, запись

Кстати, с тех пор, как я это рассказывал на курсе, Эгея стала ещё умнее. Думаю, уже скоро дам попробовать всем.

Оферта о совместной работе

Я выступил в роли арт-директора в нескольких особенных проектах. Это две схемы трамваев Челябинска, включая официальную, две схемы метро Екатеринбурга, а также схемы метро Минска и Санкт-Петербурга — обо всех них есть рассказы на моём сайте.

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

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

Насколько я понимаю, единственное место, где оферта пока была опубликована — рассказ Паши Омелёхина о первой версии схемы метро Екатеринбурга, причём там она называлась «сделкой». Вот её полный текст:

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

Понимаю, что это жёстко, но если ты согласишься, то я буду готов уделять этому время и силы.

Пусть теперь будет и тут для удобства.

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

На интерфейсном курсе: упаковка таблицы, симультанный контраст и борьба за красоту цветов

Фрагмент № 13 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 31 июля 2020 года. Покажите дизайнерам.

00:00 Боковик — по левому краю
00:36 Что не так с дизайном такой таблицы для этих данных. Убираем мусор — таблица разваливается. Плохой признак!
02:59 Упаковываем элементы вокруг таблицы внутрь самой таблицы
04:12 Подписываем элементы ячейки на примере одной из ячеек, а не отдельно
07:04 Как правильно забледнять чёрный на цветном фоне. Хуже всего делать серый, чуть лучше — прозрачный, ещё лучше — подкрашенный прозрачный.

Почитать о курсе

Программа, отзывы, запись

Бело-лунный

Есть такая шиза, что белый свет светофора (встречающийся на трамвайных светофорах и на железнодорожных переездах) называется «бело-лунным».

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

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

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

У меня муадон

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

Из последних трёх лет почти полтора я провёл в Израиле. Мне нравится иврит, но я стараюсь не захламлять свой русский. Тем не менее, русскоязычному кассиру в супермаркете я говорил:
— У меня муадон.

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

В Израиле физические карты может и бывают, но я их не видел; обычно нужно просто, чтобы ты был забит в какой-то базе, а находят тебя по номеру теудат зеута (типа «удостоверение личности», но так тоже никто никогда не говорит).

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

По-русски наличие скидочной карты ну никак не может называться «клубом», поэтому сказать «у меня клуб» просто язык не повернётся. Я не думаю, что кто-то такое вообще поймёт. Вот и получается, что обычное слово невозможно перевести на русский, не потеряв смысла.

На интерфейсном курсе: первое впечатление, синтаксис и язык формы заказа с доставкой

Фрагмент № 11 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам.

00:00 Из-за чего форма кажется сложной
02:05 Синтаксис и длина элемента интерфейса «Добавить ещё почту или телефон?»
07:40 Вместо отключенных полей — настоящую карту
08:55 «Платёжный шлюз». Чиним язык роботов

Почитать о курсе

Программа, отзывы, запись

Подробное видео о Типографской раскладке

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

00:00 Что такое Типографская раскладка?
01:30 Надо ставить парные кавычки, длинное тире, честный апостроф
07:40 Другие полезные символы
10:53 Как вводят символы без Типографской раскладки?
13:49 В Типографской раскладке всё удобнее и логичнее
14:19 Плакат купите
16:04 Кавычки русские и английские, апостроф — логика расположения, как вводить
19:45 Чёрточки: дефис, тире, короткое тире, минус  — логика расположения, как вводить, отступление про стандартную маковскую русскую раскладку
24:15 Другие символы и логика их расположения
30:32 Буквы с акцентами и комбинирующиеся акценты — как вводить и в чём разница между одним и другим

Расскажите о раскладке всем, кого вы знаете.

Бесполезная заставка в начале страницы

Бывает, сайт начинается с большой «красивой» заставки:

Или так:

Это учебные работы из школы бюро, не предназначенные для публикации, поэтому в них могут быть использованы какие-то картинки «из интернета». Но откуда бы ни были эти картинки, первое ощущение от них — это «клипарт», то есть просто левые стоковые фотки, не имеющие отношения к делу и стоящие тут оттого, что дизайнер пытался сделать нарядно.

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

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

Если снять фотографии специально для этого места на сайте, они не перестанут быть «клипартом» в этом смысле.

Чтобы сделать полезный этаж, нужно оживить продукт на фотографии: привлечь внимание к важным деталям, добавить кнопку «Купить». Даже простой текстовый ценник уже превращает заставку в карточку продукта:

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

На интерфейсном курсе: что не позволено базе данных, то позволено обычной таблице

Фрагмент № 10 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам.

Здесь про то, что в таблице можно поставить что угодно куда угодно, если так надо для передачи сообщения.

Почитать о курсе

Программа, отзывы, запись

Ранее Ctrl + ↓