Юрфак и журфак
Каждый раз, когда слышу эти слова, кажется, что это одно и то же слово, произнесённое по-разному в зависимости от того, кто как читает букву J.
Каждый раз, когда слышу эти слова, кажется, что это одно и то же слово, произнесённое по-разному в зависимости от того, кто как читает букву J.
Если значение в поле ввода нельзя изменить, его отображают бледным — задисейбленным. Приёму миллион лет, с ним всё нормально.
Но вот пример формы, в которую паспортные данные (вымышленные, любые совпадения случайны) подгрузились автоматически, а остальные данные нужно заполнить:
Паспортные данные показаны «на всякий случай», чтобы пользователь мог перепроверить. Если вдруг они неправильные, то значит где-то раньше что-то пошло не так, надо разбираться — просто так тут изменить нельзя. Просто полезно лишний раз увидеть.
Так вот для таких случаев задисейбленное поле ввода не очень подходит. Тут ведь дело не в том, что сейчас поле нельзя изменить почему-то. На самом деле это вообще не поле ввода: значение в принципе нельзя тут ввести. Мы его отображаем в виде поля просто чтобы вёрстка была похожа на вёрстку остальной формы.
Если в вашем продукте встречается такое использование, имеет смысл придумать отдельный компонент. Это как бы поле ввода без возможности ввода, поле ввода только для чтения или, если уж совсем честно, поле вывода. Его дизайн должен учитывать и требование удобства чтения, и требование «дружбы» с остальными элементами формы.
Например:
Выглядит шумновато, но зато передаёт ощущение, что это напечатано и неизменяемо.
Или можно так, если хочется поспокойнее:
Незадолго то эпловского жидкого стекла, Гугль выложил какую-то свою новую дизайн-систему или что-то. Я, честно, даже не понимаю, что это: это как бы статья про дизайн, представляющая собой бесконечную стену текста и глючный курсор мыши.
Я пару недель решался прочитать это для кругозора, но всё время откладывал, потому что этот текст всем своим видом говорит: «ничего интересного». В итоге дооткладывался до того, чтобы почитать сегодня в самолёте. Пристегнулся, стал читать и не смог дочитать. В этом тексте через слово написано «рисёрч» и сто раз сказано, как важен выразительный дизайн. Важность тоже обосновывается через рисёрч: столько-то процентов людей им сказали, что им нравится, когда дизайн выразительный и вызывает эмоции! Такую простыню мог бы написать ЧатГПТ, а может он её и написал.
Как бы донести до корпораций мысль, что если вы провели рисёрч, согласно которому люди любят эмоции, то публикация на все лады самого факта, что вы такой рисёрч провели, эмоций от интерфейса не вызовет? Ну типа, надо же чтобы в интерфейсе реально было чё-то клёвое (тогда и объяснять не придётся). А там просто полторы обычных картинки.
Я уже жду, что через пару лет через рисёрч будут обосновывать необходимость рисёрча, а если кому про дизайн интересно говорить, так ему будут говорить «дед пей таблетки».
Что касается Эпла, можно сколько угодно сомневаться в удобстве жидкого стекла, но нельзя отрицать, что живые рефракции, искажения и слияния-разделения капель выглядят клёво — это всё хочется поразглядывать и потрогать на своём телефоне!
Раньше Эплы не стеснялись этой радостью делиться впрямую: Стив Джобс скролил список контактов или листал музыкальные обложки на Айфоне и искренне кайфовал от того, как всё работало! Он прям говорил со сцены «смотрите, как клёво, щас ещё раз покажу». Теперь Эпл так не делает. Теперь надо уже обязательно дать обоснование, мол, благодаря стеклу ваш контент выходит на первый план. Причём все дизайнеры прекрасно знают, что во-первых, это неправда, а во-вторых, вообще не всегда именно к этому нужно стремиться. Но Эпл уже не может сказать «смотрите как клёво». Это печально, но по крайней мере радует, что у них хотя бы дизайнеры искренне развлекаются, а не полотна про рисёрча пишут.
Читатель Виталий задаёт вопросы о схеме метро Самары.
— Почему Алабинская с белым кружком, а Юнгородок нет?
Можно было бы объяснить, что типа там улица слева просвечивает, но на самом деле продолбали.
— Изгиб между Алабинской и Российской не «привязан» к улице...
Не уверен, что понял, о чём речь, но сам отрезок рядом с Алабинской надо будет подвинуть на каплю выше в следующей версии, да.
— Расположение латинских названий относительно оригинальных определялось по какому-то правилу?
По правилу «станция подписывается в первую очередь по-русски». Если отключить слой с латиницей, кириллица никуда не должна сдвинуться. Соответственно, если подпись над станцией, то латиница ещё выше, а если под, то ещё ниже.
— Названия улиц не всегда центрированы относительно «отрезка» улицы. Возможно, это направление нумерации домов?
Нет, они просто стоят там, где им свободнее всего стоится или достигается наилучшая читаемость и баланс. Кстати, «Авроры» подписана сверху вниз, а не снизу вверх, как требовала бы русская издательская традиция, потому что все остальные улицы с вертикальными надписями идут под таким \ углом и требуют подписи сверху вниз. Авроре пришлось подчиниться.
— Еле заметное «залезание» названий станций на линию метро — когда и почему такое допустимо, исходя из каких рассуждений можно себе такое позволить при разработке других макетов?
Ладно, объясню. Это просто мне очень всралось так сделать, чтобы было едва уловимое ощущение печати в несколько красок, которые не прям идеально попали куда целились. Тут же ещё и бумага такая жёлтая как бы. Короче, это для вайба.
С Мишей Нозиком обсуждаем скиминг, как понимать задачу с ЧатомГПТ и конечно же плохой дизайн по вине исследований.
Все выпуски подкаста:
Эпл · Ютюб · Я.Музыка · Мейв · РСС для подкастного приложения
0:00 | «Скиминг» в интерфейсе и Рэнди Убиллос |
5:09 | Просмотр платьев со спины и другие примеры для дизайнеров каталогов товаров |
13:16 | ИИ и роль с пониманием задачи |
23:24 | Как это соотносится с принципом «Исполнитель понимает задачу» |
29:57 | Пост Саши Реушкина и наём фиговых дизайнеров |
40:58 | Любить дизайн, а не методологии исследований |
43:57 | Как нанимают «37 сигналов» |
46:41 | Интерфейс ПВЗ Яндекс-маркета и интерфейсы в виде таблиц |
54:40 | Показать клиенту, как лучше — это часть работы |
58:28 | Атака банеров в приложении Т-Банка и как такое происходит в корпорациях |
1:06:48 | Почему Микрософт не может сделать хороший дизайн |
1:11:51 | Почему в Эпл-ТВ нельзя просто продолжить смотреть то, что смотрел в прошлый раз |
Виспер и ЧатГПТ послушали выпуск за вас и делятся выводами:
В выпуске обсуждают эволюцию и деградацию интерфейсов, дизайнерские принципы и подходы, а также роль исследовательских практик и искусственного интеллекта в работе над проектами. Илья вспоминает, как при создании сайтов внедрял приём «скиминг», вдохновившись Apple, и как этот интерфейсный ход распространился дальше. Миша приводит примеры из своей практики, где скиминг, «вид со спины» и другие приёмы позволяли сделать каталоги товаров удобнее и понятнее.
Разговор постепенно переходит к теме того, как дизайнеры могут использовать ChatGPT для подготовки текстов — особенно таких, как «понимание задачи». Илья рассказывает, как приучил модель на своих примерах и теперь получает черновики, которые проще редактировать, чем писать с нуля. При этом подчёркивает: использование ИИ не отменяет необходимости самому понимать суть задачи. Миша делится своими опасениями по поводу потери глубины участия, но соглашается, что подход с черновиком, написанным «разговорным джипегом», может быть продуктивным.
Затем затрагивается более широкая тема — кризис найма и профанация профессии дизайнера в крупных компаниях. Говорят о том, что дизайнеры, натасканные на прохождение собеседований, часто создают посредственный дизайн, который всё же считается «успешным», потому что совпадает с бизнес-метриками. Это приводит к абсурдным ситуациям: попапы в банках, неудобные интерфейсы с якобы «хорошими показателями» и культ исследований, не приводящих к улучшениям.
В конце обсуждают профессиональную гордость, вкус и осознанность в работе дизайнера. Критикуют подход, при котором графдизайн считается «вкусовщиной», а продуктовый дизайн — якобы «объективным». При этом призывают дизайнеров сохранять и развивать собственный взгляд, не боясь проявлять инициативу и эстетические предпочтения, если это не мешает задаче.
Основные идеи и выводы:
— Приём скиминга (наведение курсора и просмотр содержимого) — важное и недооценённое дизайнерское изобретение.
— ChatGPT можно эффективно использовать для подготовки черновиков «понимания задачи», снимая психологический барьер перед писательской работой.
— Само написание документа — важная часть процесса осмысления задачи, но рутину вполне можно делегировать ИИ.
— Современные корпорации часто нанимают «собеседуемых», а не действительно способных дизайнеров.
— Метрики часто подменяют собой понятие хорошего дизайна и становятся оправданием деградации интерфейсов.
— Критическое мышление и стремление к улучшению важно сохранять даже в условиях корпоративной рутины.
— Вкус и личная эстетика не противопоставляются практичности — они могут и должны сосуществовать в дизайнерской работе.
Выпуск будет интересен практикующим дизайнерам, особенно тем, кто устал от корпоративного формализма и ищет смысл в своей работе. Полезен тем, кто хочет лучше понять границы и возможности использования ИИ в дизайне, а также всем, кому не всё равно, как устроены интерфейсы вокруг.
Зимой опубликовал проект навигации для поставщиков «Вайлдберрис». Наконец-то снял видеообзор этого проекта. Рассказываю о сценарном подходе к навигационным проектам и что нужно было учесть именно в этом случае. Видео будет полезно дизайнерам и тем, кто думает, не заказать ли мне дизайн:
00:00 | Интро |
03:16 | Путь поставщика |
07:30 | Предыдущее светодиодное табло на складе |
09:24 | Табло.вб.ру |
12:50 | Портал поставщиков, инструкция для водителя и схемы складов |
17:35 | Банер и указатели ворот на складе |
19:59 | Улучшенное светодиодное табло |
22:30 | Аутро |
С дизайнером Николаем Романовым сделали схему метро Самары:
Спасибо Серёге Чикину за герб и Леониду Мотовских за советы. Если вы из Самары, напишите, что мы где напутали.
Сначала увеличиваем на виджете кружок, глядя на системный виджет часов, а потом ещё экспериментируем с иконкой внутри. 10 минут с Фотошопом в руках:
ЧатГПТ от моего лица: «В этом фрагменте я говорю о важности сверки с системными образцами. Когда рисуешь свой виджет или иконку, нужно не полагаться на глазомер, а прямо ставить рядом аналогичный элемент из интерфейса iOS — и сравнивать отступы, размеры, пропорции. Если делаешь по-другому, на это должна быть причина, а не просто „так получилось“. Часто именно мелкие отклонения по расстояниям, толщине линий или соотношению элементов делают макет „туповатым“ — словно он из другой системы. Чтобы избежать этого, полезно брать за ориентир реальные компоненты и адаптировать свой дизайн под их язык».
Это фрагмент № 173 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 23 февраля 2024 года.
Идёт запись на курс, который пройдёт 19 июля — 17 августа. Сейчас аж −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.
Программа, отзывы, запись
Разберём такую задачку.
На некоем сайте рекламодатели могут купить размещение своего логотипа в профилях пользователей. Например, условная фирма «Спотифай» хочет как бы стать «спонсором» всех пользователей, которые любят музыку. Если пользователь бесплатный, то назначение такого спонсора — предмет договорённостей сайта и самих спонсоров. А вот платный пользователь может сам выбрать себе спонсора (вдруг ему кто-то напрямую заплатил за размещение своего логотипа) или запретить отображение спонсора вовсе.
Нужно сделать интерфейс управления спонсорством в личном кабинете пользователя, заодно показав преимущества платной подписки.
Исходный интерфейс работает так. Пока ты бесплатный, ты видишь «навязанного» спонсора и кнопку апгрейда рядом:
Если проапгрейдился, то интерфейс становится более развесистым. Можно назначить своего спонсора или удалить спонсора:
Типа назначили своего:
Чтобы убрать спонсора вообще, жмём Remove sponsor сверху. А круглая стрелочка — это вернуть как было, то есть поставить назначенного «сверху» спонсора, хоть ты и платник.
Что здесь не так?
Во-первых, интерфейс выглядит запутанно и неэлегантно. Зачем кнопка Remove sponsor, если я могу просто не заполнять спонсора? Или это чем-то отличается? Крутилка тоже непонятная без объяснения. Да и даже если всё понять, всё равно выходит каша из состояний, полный перечень которых неочевиден. Эти все состояния ведь надо ещё запрограммировать. Если я удалю спонсора, то видимо должна будет появиться какая-то кнопка «указать своего спонсора»? Или ремув просто очистит поля?
Во-вторых, в интерфейсе очень легко случайно потерять данные. Нажал на крутилку или Remove из любопытства — и твой спонсор, которого ты внимательно заполнял, слетает. Никакого анду нет, а если бы было, то было бы ещё неэлегантнее: ещё больше каких-то полунамёков для переходов между вариантами.
В-третьих, кажется, интерфейс не очень хорошо продаёт платную подписку. В исходном состоянии она ярко выделена, но внимание направлено просто на само приглашение к апгрейду, а не на пользе от него. Чтобы врубиться в пользу, нужно прочитать текст. При беглом взгляде вообще не ясно, какая связь между спотифаем и апгрейдом.
А вот как можно было бы сделать. Впрямую обозначить доступные варианты спонсорства:
Теперь для всех пользователей и состояний конструкция одна и та же: переключатель из трёх вариантов. Вместо того, чтобы догадываться, что апгрейд тебе откроет новые возможности, ты их сразу видишь под замочком. Можно даже нажать, не жалко:
Ну а если проапгрейдился — все те же варианты доступны в тех же местах:
Можешь заполнить своего спонсора, переключиться в дефолтного или отключить, потом снова вернуться в своего — поля останутся заполненными безо всякого анду.
Приходите на мой курс «Пользовательский интерфейс и представление информации», что ли.
Рассказываю, почему в информационной графике цветные линии не должны быть тонкими, по крайней мере, если их цвет несёт смысловую нагрузку. 3 минутки:
ЧатГПТ от моего лица: «В этом фрагменте я объясняю, что цвет в интерфейсе должен передаваться через достаточно заметный носитель. Если делать очень тонкие линии, как в легендах или диаграммах, цвет в них сложно воспринимается — он теряется. Можно попробовать утолщать линии, но тогда они начинают мешать и выглядеть громоздко. Поэтому, если уже нужна цветовая маркировка, лучше использовать её там, где она имеет дополнительную функцию — например, покрасить сам текст, иконку или фон. Так цвет работает не сам по себе, а усиливает другой элемент.»
Это фрагмент № 172 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 19 февраля 2024 года.
Идёт запись на курс, который пройдёт 19 июля — 17 августа. Сейчас аж −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.
Программа, отзывы, запись