Схема метро Самары
С дизайнером Николаем Романовым сделали схему метро Самары:
Спасибо Серёге Чикину за герб и Леониду Мотовских за советы. Если вы из Самары, напишите, что мы где напутали.
С дизайнером Николаем Романовым сделали схему метро Самары:
Спасибо Серёге Чикину за герб и Леониду Мотовских за советы. Если вы из Самары, напишите, что мы где напутали.
Сначала увеличиваем на виджете кружок, глядя на системный виджет часов, а потом ещё экспериментируем с иконкой внутри. 10 минут с Фотошопом в руках:
ЧатГПТ от моего лица: «В этом фрагменте я говорю о важности сверки с системными образцами. Когда рисуешь свой виджет или иконку, нужно не полагаться на глазомер, а прямо ставить рядом аналогичный элемент из интерфейса iOS — и сравнивать отступы, размеры, пропорции. Если делаешь по-другому, на это должна быть причина, а не просто „так получилось“. Часто именно мелкие отклонения по расстояниям, толщине линий или соотношению элементов делают макет „туповатым“ — словно он из другой системы. Чтобы избежать этого, полезно брать за ориентир реальные компоненты и адаптировать свой дизайн под их язык».
Это фрагмент № 173 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 23 февраля 2024 года.
Идёт запись на курс, который пройдёт 19 июля — 17 августа. Сейчас аж −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.
Программа, отзывы, запись
Разберём такую задачку.
На некоем сайте рекламодатели могут купить размещение своего логотипа в профилях пользователей. Например, условная фирма «Спотифай» хочет как бы стать «спонсором» всех пользователей, которые любят музыку. Если пользователь бесплатный, то назначение такого спонсора — предмет договорённостей сайта и самих спонсоров. А вот платный пользователь может сам выбрать себе спонсора (вдруг ему кто-то напрямую заплатил за размещение своего логотипа) или запретить отображение спонсора вовсе.
Нужно сделать интерфейс управления спонсорством в личном кабинете пользователя, заодно показав преимущества платной подписки.
Исходный интерфейс работает так. Пока ты бесплатный, ты видишь «навязанного» спонсора и кнопку апгрейда рядом:
Если проапгрейдился, то интерфейс становится более развесистым. Можно назначить своего спонсора или удалить спонсора:
Типа назначили своего:
Чтобы убрать спонсора вообще, жмём Remove sponsor сверху. А круглая стрелочка — это вернуть как было, то есть поставить назначенного «сверху» спонсора, хоть ты и платник.
Что здесь не так?
Во-первых, интерфейс выглядит запутанно и неэлегантно. Зачем кнопка Remove sponsor, если я могу просто не заполнять спонсора? Или это чем-то отличается? Крутилка тоже непонятная без объяснения. Да и даже если всё понять, всё равно выходит каша из состояний, полный перечень которых неочевиден. Эти все состояния ведь надо ещё запрограммировать. Если я удалю спонсора, то видимо должна будет появиться какая-то кнопка «указать своего спонсора»? Или ремув просто очистит поля?
Во-вторых, в интерфейсе очень легко случайно потерять данные. Нажал на крутилку или Remove из любопытства — и твой спонсор, которого ты внимательно заполнял, слетает. Никакого анду нет, а если бы было, то было бы ещё неэлегантнее: ещё больше каких-то полунамёков для переходов между вариантами.
В-третьих, кажется, интерфейс не очень хорошо продаёт платную подписку. В исходном состоянии она ярко выделена, но внимание направлено просто на само приглашение к апгрейду, а не на пользе от него. Чтобы врубиться в пользу, нужно прочитать текст. При беглом взгляде вообще не ясно, какая связь между спотифаем и апгрейдом.
А вот как можно было бы сделать. Впрямую обозначить доступные варианты спонсорства:
Теперь для всех пользователей и состояний конструкция одна и та же: переключатель из трёх вариантов. Вместо того, чтобы догадываться, что апгрейд тебе откроет новые возможности, ты их сразу видишь под замочком. Можно даже нажать, не жалко:
Ну а если проапгрейдился — все те же варианты доступны в тех же местах:
Можешь заполнить своего спонсора, переключиться в дефолтного или отключить, потом снова вернуться в своего — поля останутся заполненными безо всякого анду.
Приходите на мой курс «Пользовательский интерфейс и представление информации», что ли.
Рассказываю, почему в информационной графике цветные линии не должны быть тонкими, по крайней мере, если их цвет несёт смысловую нагрузку. 3 минутки:
ЧатГПТ от моего лица: «В этом фрагменте я объясняю, что цвет в интерфейсе должен передаваться через достаточно заметный носитель. Если делать очень тонкие линии, как в легендах или диаграммах, цвет в них сложно воспринимается — он теряется. Можно попробовать утолщать линии, но тогда они начинают мешать и выглядеть громоздко. Поэтому, если уже нужна цветовая маркировка, лучше использовать её там, где она имеет дополнительную функцию — например, покрасить сам текст, иконку или фон. Так цвет работает не сам по себе, а усиливает другой элемент.»
Это фрагмент № 172 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 19 февраля 2024 года.
Идёт запись на курс, который пройдёт 19 июля — 17 августа. Сейчас аж −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.
Программа, отзывы, запись
Всё, что можно слушать, я стараюсь слушать, а не читать и не смотреть. Потому что когда у меня свободны глаза, я предпочитаю делать что-то более полезное.
Вот что я слушал в последнее время, что мне понравилось:
Случайно провёл аудит интерфейса пункта выдачи заказов «Яндекс-маркета», хотя я даже его не видел.
Дело было так: пришёл я возвращать покупку, говорю: «Добрый день, у меня возврат». Девушка работает первый день и не знает, что делать с возвратами. Извиняется, звонит кому-то. Говорит в телефон:
— Привет, а как делать возврат? Это мне надо в «Работу с клиентами»? А... хм, а это в каком разделе? Аааа. Щас открою...
Вот просто интересно, как представляет свою работу дизайнер того интерфейса, с которым работает сотрудница пункта выдачи заказов? Мне просто сразу приходят в голову такие сценарии: человек пришёл за заказом, человек пришёл с возвратом, курьер привёз новые товары. Наверное есть какие-то ещё, но как можно умудриться спроектировать интерфейс таким образом, что самые первые приходящие в голову сценарии в нём требуют звонка другу? Это какие исследования должен был провести отдел исследователей, чтобы такой результат получился?
Тут, конечно, всё не так плохо, как когда Нотр-дам сгорел, но причина проблемы ровно в том же.
Ой, чуть не забыл, вы же спросите, а как надо было. Блин, ну это же очевидно. Нужно сделать кнопки «человек пришёл за заказом», «человек пришёл с возвратом» и «курьер привёз новые товары» на главном экране. Но при этом если сотрудник сканирует штрихкод получения с телефона клиента или штрихкод поставки с телефона курьера (ну или с коробки, не знаю, чё-то такое должно быть), то нужный сценарий запускается и без кнопок.
Выходят всё новые и новые почтовики, пытающиеся организовать твою почту. Папки в почте придумали чуть ли не пятьдесят лет назад, а потом добавлялись всё новые способы автоматизировать раскладывание по ним: фильтры, правила, теперь вот ИИ.
Некоторые ещё и называют это не «папками», а например «категориями», что дополнительно взрывает мозг. Разработчики соревнуются в том, кто лучше классифицирует: «входящие», «важное», «рассылки», «соцсети», «покупки».
Эпл вот недавно тоже внедрил в своей почте такое же: какие-то primary, promotions. Разумеется, я понятия не имею, по какому принципу он там чё-то решает. Чтобы не потерять письмо, нужно пройтись по всем этим категориям, то есть количество работы увеличивается, а не уменьшается. «Если не получили наше письмо проверьте в папках „спам“, „второстепенное“, „необязательное“ и „низкоприоретитное“!» Ясное дело, я это сразу выключил.
Почему-то дизайнеры почтовиков не врубаются, что папки работают только когда ты сам их себе создал и сам по ним раскладываешь. Если в твоей голове есть система и ты её придерживаешься, ты можешь на неё положиться, а вот чужая система лишает чувства контроля и заставляет во всём сомневаться.
Вместо раскладывания писем по папкам нужно майнить конкретную информацию из них.
Да, коды бронирования и куаркоды посадочных бесит искать в почте. Но их бесит искать даже в конкретном письме когда ты его уже открыл! Я хочу не просто письма с ними видеть в отдельной папке, я хочу саму эту информации перед глазами, вообще безо всяких писем. А уж если мне не хватит чего-то, то пусть будет шорткат в письмо-источник, и тогда уж пофиг, в какой оно там папке.
Если в каком-то письме меня зовут на конференцию и просят ответить до 25 числа, то я хочу видеть явную пометку об этом рядом с письмом. И покажите, что в моём инбоксе есть вот эти три письма, на которые нужно ответить сегодня исходя из смысла написанного в них. А папки оставьте для ручной раскладки тем, кому такое нравится.
С Артёмом Горбуновым обсуждаем, как дополнить лекцию о синтаксисе элементов интерфейса.
Все выпуски подкаста:
Эпл · Ютюб · Я.Музыка · Мейв · РСС для подкастного приложения
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 утра понедельника, когда вечеринка подходила к концу. Света в среднем становилось всё больше — то и дело вспыхивали, а иногда и подолгу горели, разные яркие прожекторы. Оказалось, что в режиме полной иллюминации светотехника там легко перешибает солнце в солнечный день — в некоторые моменты всё пространство просто заливало щедрым светом, и это производило очень мощный эффект на контрасте с изредка прерываемой тьмой предыдущих многих часов.
Например, пишешь кому-то просьбу, он читает сообщение, но не отвечает день, второй, третий. Тогда ты идёшь и напоминаешь о себе:
— М?
Но Айфон не понимает такого слова и упорно пытается исправить «М?» на «И?» Ну не козёл ли? Вместо нежного напоминания получается пассивно-агрессивное.
И никакие апдейты Ай-ОСа, обещающие сделать клавиатуру умнее и эй-айнее, не решают это проблему.