Избранное

Позднее Ctrl + ↑

Висит груша, нельзя скушать: проблема дизайна

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

Это фрагмент студенческой работы, дизайн сайта службы доставки. Написано: «Доставляем хрупкие вещи». Допустим, мне надо доставить хрупкую вещь. Текст идеально попадает в мою потребность, я ваш клиент! Но тут нет никакой кнопки или ссылки, это просто пассивый блок. Я должен сам разобраться, где и как оформить заявку. В данном случае в другом конце страницы есть кнопка «Рассчитать», которая открывает форму, где нужно будет указать, что вещь хрупкая.

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

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

Если вы показываете в одном месте, а даёте в другом, то вы теряете конверсию на ровном месте.

Садитесь, к вам подойдет официант

Бывает, придёшь в кафе, там всякие круассаны и пирожные лежат красиво. Поразглядывал, выбрал, обращаешься к девушке. А она такая: «Вам с собой?» Нет, здесь. «Садитесь, к вам подойдет официант».

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

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

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

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

См. также:

Не стать клиентом

Бизнесы ставят на своих сайтах кнопку «Стать клиентом». А надо ставить кнопки «Взять кредит», «Записаться на пробный урок», «Вызвать электрика» или «Заказать доставку». Потому что ни у одного человека в мире нет задачи «стать клиентом»! У людей есть задачи взять кредит, записаться на пробный урок, вызвать электрика или заказать доставку.

Это вы внутри себя называете людей «клиентами». Но люди так о себе не думают. Через надпись «Стать клиентом» вы транслируете людям безразличие к их задачам и сфокусированность на собственных.

Читаем по-корейски

Я провёл в Сеуле пять дней, но уже через сутки спокойно читал корейские слова. Кому рассказываю — считают, что я какой-то волшебник. А я просто смотрю внимательно по сторонам!

Вот прилетел я ночью и еду на метро из аэропорта, а передо мной мелькают какие-то названия станций. Их при этом объявляют голосом и они периодически дублируются по-английски:

Волей-неволей начинаешь замечать закономерности. Доехал до своей станции — на меня уставилась надпись «Мьенг-донг»:

Ну понятно же, что колечко — это «нг», квадратик — это «м». Квадратик «м» вообще запоминается мгновенно, это ж как в иврите!

А снизу слева, где «Хойхьен» ясно, что завитушка со шляпкой — это «х», а L-образная фигня в конце — это «н». И тогда уже видно, что вертикальная палка с двумя пеньками налево — это «е», как в Мьенгдонге сверху.

Так, ну а «Чунгмуро» справа снизу чего нам даёт? «Чунг-» заканчивается на колечко «нг», это понятно. Значит, лямбда-подобная хрень — это «ч», а Т-образная хрень — это «у». Ну да, вот же «-му-» как раз следом написано с уже знакомым нам квадратиком «м»! Получается, перевёрнутая Т — это «о»? А, видимо, 2-образная змейка — это «р».

Выхожу из метро:

«Мьенгдонг» понятен, а вот «гил» справа меня озадачил. Получается, уголок — это «г», вертикальная палка — это «и», а вот 2-образная змейка здесь — это уже вдруг «л». Вспоминаю, что что-то слышал про японский, что там «л» и «р» не различают. Решаю, что тут, видимо, тоже какой-то такой эффект. Заселился в час ночи, лёг спать.

Просыпаюсь с мыслью попробовать написать слово «Гимпо» — это название аэропорта, из которого мне вылетать. Без понятия на тот момент, как сделать «п», поэтому правый верхний угол пустует:

Нахожу в интернете правильный ответ: 김포. Ну, похоже. Заодно запоминаю «п». Иду на улицу, смотрю:

Надо понять, как тут написано «Самил-дэро». Три лучика — это «с», палка с пеньком вправо — это «а». Что квадратик — это «м», я с вечера в курсе. Это «Сам-», окей. А вот с «ил» чё-то сложное. С вертикальной палкой и 2-змейкой всё ясно, но там зачем-то колечко «нг» в начале. Просто принимаю как данность, пусть нейросеть обучается сама. Открывающая квадратная скобка — это, видимо, «д». С «ро» и «гил» всё понятно со вчера.

И вот целый указатель, а уже всё понятно — ну, кроме прикола с колечком «нг» в начале:

Сдаюсь и иду в интернет. Выясняю, что оно просто не читается в начале! Ну супер, тогда вопросов нет.

Удобно, когда рядом есть латиница:

«Сэнди» в целом уже понятно (крупно справа). Видимо, пенёк влево — это «э». Я долго не мог запомнить, какой из «а» и «э» пенёк вправо, а какой влево. Пытался запомнить через то, что двойной пенёк влево — это «е», значит логично, что «э» куда-то туда же. Но сейчас вот пишу это и вижу, что у русской буквы «э» ваще-то пенёк влево торчит, так и надо было запоминать.

В принципе латиница уже необязательна. «Бонг-бонг»:

Уже не помню, в какой момент я пронюхал, как будет «б».

В Гугле не все названия станций продублированы латиницей. Да и пофиг, видно же, что «Нонхьен» написано:

«Дэджангджику» (после 4103):

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

«Дансанг»:

О, точно:

О, «со»!

О, «да»!

Утром иду на завтрак. Иногда они вообще не парятся:

«Ха-ни-ма-с-тэ-д-д-рэ-синг»! Такой корейский язык я легко выучу.

«Мэй-мил-ча» (или мир?):

Видимо, «ча» — это чай!

В середине меню — «Кимчи манту»:

Клёво, «манту»! Такое слово я знаю из разных других языков тоже.

«Ганг-нам-ек»:


Видимо, «ек» — это станция.

«Би-санг-бэл»:

Видимо, «бэл» — это bell? Может, случайность.

О, такси по-корейски «тэк-си» !

«Стабакс»:

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

О, титан по-корейски «титан»!

Ну или «титаньюм» там спрятался, не суть.

Но как, Холмс? 
Я бы никогда в жизни не стал даже и пытаться это читать, если бы не знал один-единственный секрет: это не иероглифы. Это просто буквы, которые так причудливо собираются в слоги. Самая красивая раскладка клавиатуры в мире:

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


А на пути в аэропорт я уже не удивляюсь: «ди-джи-тал-ми-ди-а-си-ти». Палки — это эти «и» на концах слогов.

Скриншот с метаданными

Скриншот — самый быстрый способ сохранить то, что видишь. На почту пришёл билет на концерт с куаркодом? Скриншот, чтобы потом показать на входе. Не искать же заново в почте, стоя в очереди! Прямо сейчас интересное место в подкасте? Скриншот, чтобы потом найти момент по времени. Не записывать же название и таймкод руками в заметки!

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

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

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

А скриншот — мгновенный и универсальный. Есть аппаратная кнопка и не надо думать, куда сохранить. И лента скриншотов — вот она, одна, рано или поздно всё равно наткнёшься там на всё.

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

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

Ну и во всплывашке, которая вылезает на пару секунд, когда скриншот только сделал, можно было бы отдельно забрать только данные, а картинку удалить.

Чё думаете? Или такое АПИ и щас есть, но программы им не пользуются?

Управление

Существует такой вид учреждений как «управления»: главное управление МВД, управление делами президента и всё такое. Это вообще что? Это вообще как? Управление — это ж процесс! «Из этих кабинетов МВД ведёт управление» — это я могу синтаксически понять.

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

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

Умное анду и реду в Фигме

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

В Фотошопе иначе: можно в несколько шагов настроить выделение, используя объединения, пересечения, Transform Selection и прочий Quick Mask, и тогда анду последовательно пройдёт эти шаги в обратном порядке. Ну и если случайно потеряешь тщательно настроенное, тоже можно сделать анду, и выделение вернётся. Это умно.

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

В Фигме выделение тоже входит в стек анду, но там подумали об этой ситуации с откатом в прошлое. Если, находясь в прошлом, ты что-то выделяешь, то все операции «из будущего» остаются в стеке и реду их проделает как ни в чём не бывало. То есть, с одной стороны, Фигма знает о ценности и хрупкости выделения, и поэтому тоже даёт в нём анду, но с другой, она понимает, что выделение не меняет документ, а значит и пространственно-временной континуум в безопасности.

От таких решений душа дизайнера интерфейса поёт.

Дизайнерский гороскоп

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

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

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

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

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

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

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

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

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

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

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

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

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

Две позиции в длинном содержимом: прогресс и положение прокрутки

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

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

Компьютер должен отличать для себя две позиции в длинном содержимом: прогресс и положение прокрутки. Но как это должно работать? Пользователя этим обременять не стоит — компьютер должен сам всё понимать.

На первый взгляд, имеет значение непрерывность и длительность. Если я смотрю на страницы по очереди друг за другом и провожу на каждой более нескольких секунд, можно предположить, что я читаю книгу. Если непрерывно-длительную последовательность составляют страницы до 58-й, но кроме этого я ещё бывал на 158-й, а сейчас на 258-й, то можно считать, что дочитал я лишь до 58-й, и давать мне способ туда вернуться. Если я непрерывно смотрел видео от начала и до 58-й минуты, а сейчас на 25-й, то можно полагать, что я просто отмотал что-то пересмотреть, но глобально я всё ещё на 58-й минуте, и давать мне способ туда вернуться.

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

Лет десять назад Артём Горбунов придумал идею «термоскроллера». Типа лифт в полосе прокрутки «греет» шахту. Чем дольше мы находимся в какой-то месте, тем горячее она становится. Применим идею к визуализации положения в книге или видеоролике:

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

Глюки мозга

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

Ранее Ctrl + ↓