мяу-дизайн

Мой брат не только ведет канал о том, как покоряет Голливуд и снимает клипы для Арианы Гранде, но и иногда подкидывает материал для публикаций и в этот канал.

Так что небольшой сеанс гостевых наблюдений:

Это список отделений в приложении банка. При нажатии на пункт в списке ниже открывается уточняющий вопрос с кнопками NO и YES.

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

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

Обычные call-to-action-ссылки на сайте оформили как кругляши в шахте, причем на первой кнопке внутри круга еще и стрелка направо вдоль шахты, что вызывает четкое ощущение, будто их надо свайпать.

как говорится, жалкая пародия и неповторимый оригинал

например, в логотипе слева внизу закодировано MOCA, но это же расшифровывается как The Museum of Contemporary Art, то есть музей современного искусства, ему положено провоцировать и не париться об утилитарных материях.

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

Многие логотипы существуют на самой грани однозначной прочитываемости, а некоторые сознательно заглядывают за эту грань:

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

Но если всё же ставить перед собой такую задачу, то может стоит признать, что букву в этой закорючке не прочитать, и использовать ее как значок отдельно от текстовой части.

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

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

(только сейчас заметил, что на лого турецкой лиги какое-то время была чуть ли не звезда давида) 🤔

Эмблеме команды корпоративная солидность основного логотипа была некстати, поэтому тут я использовал более панковский-пацанский вариант с пляшущими буквами. За футбольность тут отвечают мелкие отсылки: кругляш-мяч возле ноги P и общая пятиугольная форма, намекающая на каноничный крой футбольного мяча (сам мяч, как я говорил, рисовать зашкварно, но отдельные его элементы — нет).

Ну а в завершение я сделал еще эмблему для сборной лиги:

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

Штош, вот поэтому логотип оказался таким. Как часто у меня бывает, финальный результат оказался решением системы ограничений-«уравнений».

Заданный логотипом стиль затем слегка разросся на вспомогательные носители:

4. Готовность логотипа существовать в одном цвете. Опять же, требование времени — почти у всех современных логотипов, если они не были изначально отрисованы в один цвет, есть монохромная версия для размещения на сложных фото- и видеофонах.

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

(для каноничности надо было, конечно, еще присыпать логотип черной крошкой)

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

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

Скажем, Panasonic с его длинным чисто текстовым логотипом справляется уже тяжеловато, в соцсетях его логотип превратился в белую палочку:

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


2. Следующее требования к логотипу — быть узнаваемым. Для многих современных компаний основная, а иногда и единственная среда обитания их логотипов — это аватарки в соцсетях и мессенджерах. И тут приходится выдерживать мощную конкуренцию за внимание, ведь каждая аватарка пользователей, чатов и каналов — это по сути логотипы-конкуренты, среди которых необходимо не затеряться.

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

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

Другой популярный способ добавить логотипу футбольности — использовать фрагмент разметки поля (хотя вот греческая лига пожадничала). Штрафная площадь не так графична, поэтому чаще обращаются к центральному кругу. Его же решил использовать и я в своем логотипе:

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

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

Такое поведение довольно распространено, поэтому приходится абстрагироваться, чтобы подсветить всю абсурдность такой реализации. Давайте еще раз:

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

Это не компьютерная игра «тир», не головоломка и не тест на умственные способности, это общепризнанная реализация интерфейса выбора даты. Зачем-то эпл решает наказать пользователей за попытку осмелиться выбрать дату вне объявленного месяца. Четыре года назад я тут уже жаловался на то, что эпл не признает непрерывное временное пространство и заставляет разглядывать его порциями, и с тех пор, как мы видим, стало только хуже.

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

Ну и главное: почему не выбрать сразу дату, в которую ткнул пользователь? Кому это помешает? За что вы наказываете пользователя? На кого вы работаете?

Чуть не зашел в женский туалет, и только в последний момент интуиция подсказала посмотреть еще на соседние двери.

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

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

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

(в прошлый раз я из-за дизайна случайно зашел не в тот туалет в Бургер Кинге: https://t.me/meow_design/1194)

(в предыдущей серии о мелких детялях дизайна айфона выяснял, как эпл совмещает необходимость размещать на корпусе всякие служебные маркировки с нежеланием их показывать на промо-материалах: https://t.me/meow_design/574)

Но, вероятно, для такого маневра внутри не хватает места для размещения матрицы — уж слишком близко к краю.

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

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

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

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

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

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

Неизменная тенденция: камеры незаметно, но неумолимо растут в размерах (на картинке выше масштабы четырех кропов согласованы!). Размер айфонов тоже увеличивается, но не так стремительно.

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

Интерактивные элементы не должны перемещаться по экрану или перекрываться другими интерактивными элементами кроме как в качестве реакции на действие пользователя.

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

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

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

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

Я уже неаднокарто писал на канале (раз, два) о важном принципе безупячности интерфейсостроения, но это повод повторить его еще раз, прям отдельным сообщением (спасибо что не капсом):

Как не надо делать листалку фотографий: маленькая кнопка (тяжело целиться), меняющая положение от кадра к кадру из-за смены их высоты (надо целиться заново каждый раз!) + отсутствие управления с клавиатуры (попасть пальцем в клавишу проще, чем курсором в кнопку). Просмотр галереи превращается в тир.

Тот случай, когда достаточно просто использовать безупречную Фотораму (R.I.P. Артём Поликарпов).

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