Избранное

Позднее Ctrl + ↑

Презентуйте простыми и точными словами

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

Объяснять-то может и не надо, но просто старайтесь выбирать точные и простые слова. Вот человек презентует дизайн и говорит: «Мы спроектировали новый флоу, чтобы улучшить пользовательский опыт». Допустим, у вас в компании все так говорят. Но кому станет хуже, если вы скажете по-русски: «Мы уменьшили число шагов, чтобы было проще купить цветы»? Не бывает, чтобы после такого слушатели испытали раздражение от того, что им слишком понятно объяснили. Тут речь не о том, что вы объясняете топам, что такое «флоу» (а они и так знают), а о том, что вы вообще не используете подобных слов.

Обратите внимание, что проблема не в том, что я как-то субъективно не люблю слова «флоу» и «пользовательский опыт». Я их, конечно, не люблю, и сам в жизни так не скажу, но дело тут в том, что эти слова размывают суть. Бывает много профессиональных терминов, без которых непонятно, о чём именно вы говорите, и в подготовленной аудитории резонно их и использовать, а не упрощать. Но тут простыми словами получается не просто проще, но точнее и однозначнее, чем с заумными.

Спроектировали вы «новый флоу», а начальство вам такое: «Так а почему вы говорите, что это новый флоу? Тут ведь то же самое: выбираешь букет, указываешь адрес, оплачиваешь». Что вы на это ответите? «Да, но мы уменьшили число шагов»? Ну так а фигли сразу так и не сказали, зачем этот обмен репликами вам?

Дважды двусмысленная навигация на Павелецкой

Иду на днях по переходу в Москве, вижу такое:

Читаю на бегу, сам продолжаю идти прямо. Уже пройдя, думаю: что я сейчас увидел? Во-первых, на красном фоне написано, что вход закрыт, но меня зачем-то всё равно в него ведут стрелкой вперёд. Во-вторых, меня ведут туда ещё и стрелкой вправо. Куда в итоге идти, прямо или направо? И зачем мне вообще туда идти, если вход закрыт, открытый-то где?

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

Но две стрелки по-прежнему противоречат друг другу. Я это называю итальянской навигацией. В Италии на дорогах я не раз встречал рядом знаки типа «Римини прямо» и «Римини направо» — можно ведь и так и так доехать! Это взрывает мозг.

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

Классическая проблема настройки пиццы

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

Вот первая попавшаяся работа. Это главная страница, меню пицц:

Здесь сразу можно убрать мешающие ингредиенты, добавить собственные, выбрать размер и тесто. Видите ли вы проблему?

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

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

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

Иногда бывает, что в таком же контексте кнопку «Добавить в корзину» превращают в какую-то считалку типа − 1 + после добавления первой пиццы. Тут мозг окончательно взрывается. Если нажимать плюс несколько раз попеременно с изменением начинки, а потом нажать пару раз минус, невозможно даже предположить, что в итоге окажется в заказе. При этом сценарий «заказать две пиццы с курицей, но одну из них без шампиньонов» — достаточно нормальный, чтобы про него подумать.

Эта проблема — пример незамкнутости интерфейса, то есть его логической дырявости.

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

Та же проблема встречается в недавнем интерфейсе с исчезновением при наведении

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

Не надо скрывать элементы при наведении

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

Тут тоже почти исчезла:

А тут пропала цена и название:

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

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

Вдвойне неочевидные столицы

Очевидно, что столица России — Москва, столица Франции — Париж, а столица Китая — Пекин.

Ещё есть страны, где самый известный город — это не столица. Столица Турции — не Стамбул, а Анкара. Столица Канады — не Торонто, а Оттава. Столица Бразилии — не Рио-де-Жанейро, а Бразилиа. Это неочевидные столицы, но вы всё равно в курсе.

Но есть вдвойне неочевидные столицы.

Скажем, все знают, что столица Нидерландов не Амстердам, а Гаага. Да вот только столица Нидерландов — как раз Амстердам, несмотря на то, что все органы государственной власти находятся в Гааге. Что же делает Амстердам столицей? А вот просто такая традиция, делать вид, что Амстердам — столица.

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

Кстати, ещё забавность. Столица США — не Нью-Йорк, а Вашингтон, это понятно. Но даже столица штата Нью-Йорк — не Нью-Йорк, а Олбани!

А какие вдвойне неочевидные столицы вы знаете?

Подкасты с «продакшеном»

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

Когда я начинал слушать подкасты лет пятнадцать назад, подкасты были устроены так: ровно в 0:00 начинает звучать голос героя, потом час или два идёт разговор, потом герой прощается и на этом аудио заканчивается. Зачем нужно всё остальное? На радио джингл привлекает внимание к моменту начала; перебивки и эффекты нужны, чтобы случайным слушателям было понятно, что это такое они слышат с середины.

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

Отдельный прикол — реклама. Как работает реклама в нормальных подкастах? Ведущий читает её прямо по ходу записи: тем же голосом в том же помещении. Она звучит органично, не бесит, при этом ты её слушаешь и запоминаешь. А в большинстве современных подкастов что? Либо реклама — это вообще отдельная аудиодорожка, выданная рекламодателем, либо тот же ведущий записывает её в другое время и с каким-нибудь там эффектом эха или фоновой музычкой. Тут надо сказать, что в этом есть своя польза: такую рекламу очень легко промотать прыжками по 15 секунд вперёд, потому что по доле секунды ты слышишь, когда всё ещё реклама, а когда уже нет. То есть эффект достигается обратный необходимому: реклама вызывает раздражение, хотя я её даже не слушаю!

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

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

На интерфейсном курсе: решение существует

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

Это фрагмент № 126 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 16 июня 2023 года.

До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января.

Дед Мороз принесёт вам мешок новых знаний!

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

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

Единицы на семисегментных индикаторах

Тема кернинга меня волновала с детства (как я вдруг понял). Каждый раз видя электронные часы я не мог понять, нафига единица, когда она стоит справа, отваливается на километр?

Что мешает поставить её на таком же расстоянии, как когда она стоит слева?

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

Тот же вопрос к светофорам.

Кстати, обратное решение, показывать в левом идикаторе левыми сегментами, а в правом правыми, не работает, потому что число «11» в нём вообще разваливается.

Обложка новости про усиление практики на курсе

К недавней новости про усиление практики на курсе я нарисовал нехитрую обложку:

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

Кажется, что у меня просто написано слово «практика» с переносом.

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

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

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

Получилось так:

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

Сверху, справа и снизу тоже хочется упереть:

Теперь напрягает, что крыша буквы Т почти, но не совсем совпадает по ширине с П, а вертикальный штрих от И проходит мимо Р, хотя мог бы и попадать:

Букве Т надо крышу нарисовать правильной длины, ну и букву И подвинуть правее. Диагонали от И и А могли бы плавнее друг в друга переходить, а потом от К и А. Вообще, заметно, что чем дальше от начала строки, тем сильнее расхождение, поэтому хочется просто нижнюю строку разредить до более плавного попадания:

Теперь замечаю, что левый штрих от К почти, но не совсем проходит через середину А:

Двигаю К чуток левее, чтобы попадало чётко:

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

Замечаю, что картинка получилась размера 439×241. Как минимум надо сделать 440×240, чтобы совесть была чиста, но я решаю сделать 480×240 — тогда получится прямоугольник пропорций 2:1. Мелочь, а приятно. Для этого нужно увеличить разрядку в обеих строках, но это и так неплохая идея. Аккуратно делаю, следя за тем, чтобы все выстроенные вертикали сохранились:

Перетекание И в А немного нарушилось — ну, значит не судьба. Отступ между строками пришлось на 1 пиксель уменьшить, сломав исходную затею с тем, чтобы это был ровно размер горизонтального штриха. Но кто ж это заметит?

Теперь буквы стоят нормально, но всё вместе выглядит дырявенько, да и непонятно, что практика-то? Добавляю надписи «×2» и «и сертификаты с отличием», а заодно ставлю сердечко из обложки курса на фон. Выравниваю надписи на глазок по среднему штриху К:

Готово:

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

А на курс «Пользовательский интерфейс и представление информации» с усиленной практикой и сертификатами с отличием не забудьте прийти!

На интерфейсном курсе: благодарности

Участники в конце курса рассказывают, как им понравилось. 3 минутки:

Это фрагмент № 123 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 19 мая 2023 года.

До 10 ноября идёт запись на курс, который пройдёт с 11 ноября по 10 декабря.

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

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

Ранее Ctrl + ↓