Инклюзивный дизайн — это про заботу

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

Например, вы едете в трамвае, одной рукой держитесь, другой пытаетесь нажать кнопку или просто устали и глаза «замылились». А тут всё отлично видно и легко попасть пальцем.

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

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

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

Если вам тоже интересна эта тема, могу ещё написать пост про «принципы доступности WCAG».

❤️ — люблю понятные интерфейсы
🤚 — крупно не нравится
🔥 — давай пост про принципы доступности

Проектирование ремня безопасности

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

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

Изучив вопрос, вот несколько интересных фактов о ремне:

Возраст. Текущее решение ремня безопасности не менялось уже более 65 лет

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

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

Цвет. Сам цвет ремня может меняться, но по исследованиям, цветной ремень выглядит для пользователей ненадёжно, как что-то игрушечное и несерьезное. Поэтому ремень остаётся чёрным.

Интересный пример, когда текущее решение так хорошо реализовано и выполняет свою задачу, что создавать что-то новое не имеет смысла, к тому же есть много ограничений, которые нужно учитывать, всё как в проектирование интерфейсов 😁


❤️ — интересно
🔥 — устраивает текущий вид ремня
⭐️ — хотелось бы улучшить

Градиент в интрефейсе

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

Фон
Часто вижу в онбордингах или на фоне общего контента внутри интерфейса. Но нужно быть осторожным, чтобы не переборщить и не получить сложно воспринимаемую штуку.

Карточки
Хорошо смотрятся с крупным текстом и цифрами.

Кнопки
Опасная история, но если нужно выделить какую то очень важную кнопку, например, покупка подписки, то будет выглядеть эффектно и привлекать внимание.

Иконки
Обычно в крупных используют 40x40, где градиент идёт подложкой, а сама иконка монохромная.

Анимация
Понравился переливающийся текст в Airbnb, привлекает внимание к инфе. Так же классно градиент смотрится в loader при загрузке.

❤️ — полезно
🔥 — люблю градиенты
🤚 — не люблю градиенты

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

Такие пространства дизайнеры проектируют по схеме: сначала отрисовывают 3D модель тоннеля, чтобы встроить его в интерьер, затем делают развертку поверхности в плоскую 2D карту, примеряют на неё сделанную в After Effects анимацию, чтобы всё было чётко в размер. Готовую анимацию режут на части под каждый экран, учитывая разрешение и ориентацию.

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

❤️ — красиво
🔥 — интересно

Психологические эффекты в проектировании интерфейсов

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

Эффект Зейгарник
Люди лучше запоминают незавершённые действия или прерванные, чем завершённые.

Например, видят прогресс-бар в профиле и стремятся заполнить инфу на 100%; выполнить до конца все задания и получить приз. Везде, где будет что-то не завершённое, послужит триггером для пользователя довести начатое до конца.

Эффект IКЕА
Люди ценят больше то, что сделали самостоятельно или хотя бы чуть-чуть поучаствовали в создании.

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

Эффект ореола
Общее впечатление влияет на восприятие всего остального.

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

Эффект дефицита
Люди придают больше ценности труднодоступным и ограниченным вещам.

Наверняка встречали в интерфейсах, надписи в карточке товара «осталось 3 шт» или «акция проходит только сегодня», так вот это оно.

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

Какой эффект вам нравится больше всего?

❤️ — использую эти эффекты
🤚 — буду использовать
🔥 — полезно