Разбор дизайна навигации для поставщиков «Вайлдберрис»

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

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%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.

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

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

Что послушать — 82

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

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

  1. Sir Jony Ive, designer. Джони Айв в подкасте про музыку. Про музыку ничё интересного (мне), но вообще послушать Джони приятно.
  2. A conversation with Jony Ive. И ещё разговор с Джони Айвом вдруг. Что-то он разошёлся (видимо это был прогрев перед анонсом непонятно чего). Тут интересно про неизмеримые цифрами ценности дизайна.
  3. 639. А это выпуск, в котором подробно обсуждают, почему Тим Кук просрал Эпл и ему пора на пенсию.
  4. Диалог о дизайне: легко ли быть молодым. Какой-то разговор про дизайн. Идея, что нужно уметь делать по гайдлайнам — хорошая. Идея, что нужно много вариантов — плохая.
  5. Живые советы Ильи Синельникова по переговорам и отношениям с клиентами (18 февраля).

Интерфейс ПВЗ «Яндекс-маркета»

Случайно провёл аудит интерфейса пункта выдачи заказов «Яндекс-маркета», хотя я даже его не видел.

Дело было так: пришёл я возвращать покупку, говорю: «Добрый день, у меня возврат». Девушка работает первый день и не знает, что делать с возвратами. Извиняется, звонит кому-то. Говорит в телефон:

— Привет, а как делать возврат? Это мне надо в «Работу с клиентами»? А... хм, а это в каком разделе? Аааа. Щас открою...

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

Тут, конечно, всё не так плохо, как когда Нотр-дам сгорел, но причина проблемы ровно в том же.

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

Автосортировка почты

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

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

Эпл вот недавно тоже внедрил в своей почте такое же: какие-то primary, promotions. Разумеется, я понятия не имею, по какому принципу он там чё-то решает. Чтобы не потерять письмо, нужно пройтись по всем этим категориям, то есть количество работы увеличивается, а не уменьшается. «Если не получили наше письмо проверьте в папках „спам“, „второстепенное“, „необязательное“ и „низкоприоретитное“!» Ясное дело, я это сразу выключил.

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

Вместо раскладывания писем по папкам нужно майнить конкретную информацию из них.

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

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

Думаем дальше № 39 — «Даёшь команду компьютеру за тебя восхититься» с Артёмом Горбуновым

С Артёмом Горбуновым обсуждаем, как дополнить лекцию о синтаксисе элементов интерфейса.

Все выпуски подкаста:
Эпл · Ютюб · Я.Музыка · Мейв · РСС для подкастного приложения

0:00 Текст в интерфейсе и дизайн как язык
9:34 Взгляд на заголовок формы как на дополнение, и почему это неправильно
14:23 Подлежащее и сказуемое как тема и рема
17:42 Примеры радиокнопок
20:41 Форма это предложение, но не всегда
32:10 Артём против того, чтобы считать форму таблицей. Мысль про структурированный текст
41:15 Автономность
47:12 Предложение внутри предложения: перечни, текст с заголовком и картинка с подписью как примеры предложений
52:19 «Cмелый» синтаксис: что, если кнопка называется «а давайте» или «так-так-так»?
59:28 Первое лицо и два разных смысла начальной формы глагола
1:08:58 Манипулятивные формулировки
1:10:33 «Перезвонить мне» или повелительное наклонение?
1:13:40 Сценарный подход и расписание работы касс на вокзале
1:21:36 В применении к теме доступности

Виспер и ЧатГПТ послушали выпуск за вас и делятся выводами:

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

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

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

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

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

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

Шестой поход в Бергхайн

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

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

Что узнал

Цены в этот раз: € 28 вход, € 5 повторный (можно картой), € 2,5 гардероб, € 0,5 взять вещь на минутку и сдать обратно (только наличные).

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

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

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

Как сходил

Лайнап:

В этот раз главным для меня было выступление Амотика: я был в полном восторге от него в 4-й поход, и пропустить его же, когда меня не пустили в мае 2023-го, было обломно. Так уж совпало, что в этот раз снова выпал он. Кроме него из известных мне имён в эти выходные были Лен Факи и Фидель, но Лен Факи как диджей меня совершенно не устраивает, а Фиделя я не особо знал в этом качестве (но оказалось норм).

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

Часик потанцевал под Лена Факи, а потом пошёл спать (поселился неподалёку).

В воскресенье я освободился от других дел около пять вечера, и возникла дилемма. Фидель был с 16:30 до 20:30, а Амотик — с 24:30 до конца. А между ними неизвестный мне Джон Талабот, причём я послушал какие-то его сеты на Ютюбе и мягко говоря не заинтересовался. Я при этом хотел спать, потому что всю прошлую ночь я тусил, а всю позапрошлую летел из Мадрида. В общем, надо было решить, когда идти в клуб.

Один был вариант поехать спать, потом поужинать, и уже часам к 23 идти тусить на всю ночь, забив на Фиделя. Но жалко пропускать Фиделя, когда у тебя уже проход в кармане! Второй вариант — пойти сразу в Бергхайн, послушать остаток Фиделя, затем сходить домой поспать часа три, и уже потом к полуночи возвращаться на Амотика до конца. Но тут кривая логистика, лишние € 7,5 за вход-гардероб, да и спать вечером — такое себе.

В итоге я решил пойти сразу, а там видно будет. Пока собирался, добрался я до клуба где-то к 19:30... и протусил там до 6 утра. 10 с половиной часов безвылазно! Это мой новый рекорд. Когда заходил, на фейсе стоял сам Свен Марквардт.

Разные кусочки до того, как встал Амотик:

Последний фрагмент прям ух!

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

Вот встал Амотик. Записал непрерывно несколько минут вступления просто для примера того, как начинается сеты:

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

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

Вот нарезка разных кусочков Амотика с 0:30 до 6:00 утра с пометкой, во сколько записано:

0:00 На часах 0:55
0:35 На часах 1:00. Отлично!
1:27 На часах 1:38
2:51 На часах 1:51
3:16 На часах 2:30. Кайф!
4:24 На часах 2:41
4:54 На часах 2:58
5:23 На часах 3:35
6:20 На часах 3:38
6:42 На часах 4:12. Вещь, только на яме там бесячая девка свистела всё время
7:39 На часах 4:17
8:42 На часах 4:24 Опа-опа, это же Норбак и Темудо, I will guide thy hand! из «Аудио по четвергам»! Как приятно узнавать треки
9:20 На часах 4:57
10:11 На часах 5:23. Хе-хе!
11:03 На часах 5:30. Ууух.

Короче, устал не устал, но уйти было невозможно.

(Если 5-10 лет назад под видом техно в разных там местах любили играть текхаус, то последние пару лет вдруг наметилась новая тенденция — словом «техно» стали называть какое-то пластиковое молотилово на скорости 145 с пситрансовой бочкой и полным отсуствием содержания. Я стал было думать, что, может, неужели в какую-то такую сторону техно пошло? Но нет, это просто кое-кому кажется. Как слышим в Бергхайне, с техно всё в порядке.)

Я вот подумал, а как устал Амотик за это время? В Бергхайне и так сеты нещадные по 4 часа, но закрывающий-то вообще играет всю ночь с воскресенья на понедельник, и в отличие от остальных он не может пойти полежать-передохнуть где-то. У диджеев бывают иногда сеты на всю ночь, но это как правило не шесть часов нещадного рубилова, а какая-то многоплановая история со сменой настроения и интенсивности.

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

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

Ранее Ctrl + ↓