Справочник — сверхплотное описание терминов из области проектирования интерфейса, предназначенное для профессионалов. Такая подача помогает бывалому дизайнеру вспомнить о нюансах, которые он не держит в голове, а новичку — развить внимательность и любопытство. Но кроме этого мы рассчитываем, что в справочник можно будет отправить нейросеть примерно с таким промтом: «прочитай, что там написано про все используемые в нашем интерфейсе штуки, и скажи, что нужно исправить».
Это не просто перечень определений — их и так можно найти в интернете. К каждому термину в справочнике мы предъявляли простое требование: от его наличия должна быть польза. В редких случаях определение полезно само по себе, но чаще всего мы задавали вопрос к каждому термину так: что проектировщику нужно знать об этом? И старались дать качественный ответ.
Сегодня открывается предварительное издание. В нём уже больше двухсот терминов, но к первому изданию будет больше, часть ещё в работе. Мы приглашаем вас начать пользоваться справочником и сказать, в чём вы видите наши упущения, чего недостаёт или что вам представляется ошибкой.
Я начал думать над новым дизайном много лет назад, но в конце лета наконец сел доделывать, и вот — открываю. Работы ещё много, но я решил, что лучше докручивать по живому, чем тянуть много месяцев. Там внутри большой задел на будущее развитие.
Зацените адаптив от 320 до 3200 и хитрую навигацию по проектам.
Адаптив
Вот как ведёт себя адаптив на сегодняшний день (кое-что ещё буду допиливать постепенно):
Посмотрите, сколько всяких мелочей происходит, чтобы в каждом размере всё смотрелось хорошо и нигде нельзя было подумать, что это какой-то «неправильный» размер.
Обычно делают типа «телефон», «десктоп поуже» и «десктоп пошире», а что там между — ну как пойдёт. Особенно достаётся всяким ширинам типа 800, на них вообще никто не смотрит. А тут нет никакого «между», есть просто континуум. Смотришь на сайт на телефоне горизонтально? Ну ок, всё равно получай идеальный вариант.
Отдельно зацените меню:
Во-первых, при сужении экрана строки становятся выше, чтобы на мобиле пальцем было проще попадать. Причём там плавная кривая, чтобы нельзя было заметить, что вот с какой-то ширины они вдруг резко начали расти. И разумеется, если открыть даже на большом тач-экране, расстояния всё равно будут большими.
Во-вторых, зацените как пункт «Илья Бирман» залипает наполовину. Фотка остаётся, чтобы всегда была ссылка на главную, а остальное начинает прокручиваться под неё, чтобы на тесной ужине́ больше влезало.
На горизонтальном Айфоне в качестве полей используется место под камерой и такое же симметрично справа, чтобы максимум полезной ширины отдать контенту и не городить ещё дополнительные поля к этому (как делают почти все остальные). При этом всё, что прокручивается, спокойно вылезает в эти поля, не беда.
Оказывается, оно вмещается даже в часы:
Тоже всё прокручивается так же. Я сам удивился, это мне в комментариях показали. Прикольно! Правда, там не всё работает, и теперь появился соблазн докрутить. Но часы рендерят так, как если бы ширина была 320, так что никаких новых приёмов там не применяется.
Навигация
Что касается навигации, то проблема в том, что многообразие моих продуктов, проектов и затей ну никак не ложится в классическую древовидную структуру сайта. Вот есть какой-нибудь Вайрлесс-диджей:
Он вроде и продукт, но и как пример работы над интерфейсом его хочется показать. В то же время, у меня есть разные другие штуки про музыку, и хочется их всех как-то объединить в тему «штуки про музыку». Поэтому у меня страница может находиться сразу в нескольких разделах меню и состоять из нескольких строчек, провязывающих её с другими страницами. Это не говоря о том, что, как видите, она ещё сама может разделяться на подстраницы с версиями или подразделами.
Это, конечно, схема, и хочется её показать в контексте других схем. Но она ведь и одна из работ, что я делал для Челябинска, и хочется показать её среди других работ для Челябинска. И вот теперь я так могу сделать.
Зацените, что происходит при переключении между страницами, когда связи с другими меняются. Например, с этой страницы схемы трамваев можно уйти в адресные таблички, и тогда она уже провяжется с другими адресными табличками; а можно — в знак выделенки, и тогда она уже провяжется с другими знаками.
Ещё моментик на стыке адаптива и навигации: когда любой строчке меню не хватает ширины и она прокручиваеся, она всегда изначально подкручивается так, чтобы выбранный пункт меню был виден. Поэтому на телефоне всегда сразу видно, где ты.
Ну и в концах страниц проектов теперь тоже есть ссылки на связанные проекты:
Можно встретить утверждение, что формула Эйлера — самая красивая формула в математике. Это вот эта:
eiπ = −1
Формула прекрасная, спору нет. Но авторы утверждения о её предельной красоте иногда приводят её в таком виде:
eiπ + 1 = 0
А тут уже никакой красоты. Тут и лишнее действие, и лишняя константа. Как будто кому-то показалось, что с минусом некрасиво, и он решил «поправить», прибавив единицу. Очень плохой вкус и полное игнорирование смысла ради формы.
Еду сейчас в трамвае, а там объявляют: «Просим с пониманием отнестись, что...» Отнестись, что! Как у людей такое получается произнести даже, вот вопрос.
С Евгением Черновым обсуждаем теорию поля, также известную как векторный анализ, и обнаруживаем, что формула Остроградского-Гаусса — это теорема Ньютона-Лейбница на максималках.
Краем глаза посмотрел на Клод-дизайн. Дизайн Клод-дизайна явно делал Клод-дизайн: вроде выглядит миленько, но никакого порядка, смысла и логики нет ни в чём. Собственно, в последнее время то же самое происходит в большинстве дизайна, сделанного людьми, так что, думаю, Клод-дизайн — вполне достойная замена многим дизайнерам.
Один из способов исследования — это когда пользователей зовут проходить всякие опросы про продукт. Могут письмом зазвать «ответьте на несколько вопросов», а могут в самом приложении сказать «помогите нам стать лучше». Ясно, что сами эти опросы раздражают часть людей, но допустим, что это необходимое зло: как-то же надо изучать наших пользователей!
Вопрос в том, как интерпретировать результаты. Например, если по ответам вы судите о том, чем пользователи довольны, а чем нет, то важно понимать, что вы изучаете не всех пользователей, а только тех, кому настолько нехрен делать, что они пошли отвечать на ваш опрос. Возможно, в ходе опроса вы выясните, что их не бесят всякие попапы, но так их и опрос ваш не особо бесит. Они, похоже, готовы терпеть что угодно!
Получается, результаты у вас искажены: вы знаете только ответы самых нетребовательных пользователей. Более того, возможно, что ответы нетребовательных людей сами по себе низкого качества. Вряд ли они особенно старались и вдумчиво отвечали. Знаете же, как оставляют отзывы на маркетплейсах люди, которым нечего делать? «Отличная вещь, рекомендую, сами ещё не распаковывали». Ну вот.
Я не к тому, что опросы никогда не надо проводить (хотя я был бы счастлив). Я к тому, что если вы сначала решили использовать этот метод при всех недостатках, потому что лучше ничего не нет, то не стоит потом смотреть на его результаты так, будто они настоящие. Надо так и смотреть: «Ну вот, наш кривой метод дал какие-то такие кривые результаты. И что они значат на самом деле?»
В последнем выпуске АТП Джон Сиракьюса жалуется на то, как переезжал на Айфон 18 Про. Это в начале, где-то на восьмой минуте уже.
Проблема в том, что процесс переезда с телефона на телефон предельно хрупкий. На телефоны нельзя дышать, и малейшая неаккуратность приводит к тому, что весь многочасовой процесс отменяется. После этого новый телефон нужно сбрасывать до заводского состояния и начинать всё с начала.
Джон уже жаловался на этот процесс в прошлом или позапрошлом году. Тогда Джону удалось завершить переезд с третьего или четвёртого раза. Одна из «ошибок» была такой. Новый телефон предложил настроить Сири, и в ходе этого процесса надо было произнести «Hey, Siri». Джон так и поступил. Старый телефон среагировал и перешёл в режим Сири, что отменило весь процесс.
Такую ошибку проектирования можно допустить только если буквально ни разу не попробовать воспользоваться этой фичей. Как устроен процесс тестирования у Эпла остаётся только гадать.
В этом году ситуация не стала лучше, но у Джона-то опыт. Поэтому можно было бы предположить, что в этот раз всё получится. Но нет: он снова переехал с четвёртого раза. Вот одна из «ошибок»: Джону нужно было воткнуть в телефон зарядник, и он случайно нажал на кнопку камеры. А вот другая. Сначала оба телефона что-то напряжённо делали, а потом на старом загорелась надпись «Finish on the new iPhone» в шторке с крестиком. Джон, разумеется, воспринял это так, что всё, от этого телефона ничего больше не нужно, дальше уже новый сам что-то доделывает. Как только он закрыл шторку, весь процесс снова отменился.
Я не представляю, как это может с первого раза пройти обычный пользователь, если даже Джон запинается несколько раз. И это ведь не какая-то экзотическая ситуация, а самая обычная, причём на пути получения первого впечатления! Что происходит в Эпле, что они это выпускают?
Отдельно хочу обратить внимание проектировщиков на значение текста в интерфейсе. В последнем случае всё сломала именно неудачная формулировка. В некоторых компаниях бывает, что дизайнеры дизайнят как-то приблизительно, без текста, а текст пишут какие-то текстовые люди потом отдельно. Это очевидный бред: что это за дизайнер, если он не умеет писать текст? Это же главный инструмент ясной мысли. Если человек не может написать текст, как он может что-то задизайнить? И что за дизайн без текста? Это же главный инструмент коммуникации. Если вы дизайнер и не считаете текст предметом своей работы, стоит задуматься.
