39. Адаптивные преимущества

В этом выпуске: статьи о формах на смартфонах, блоке с преимуществами на адаптивном сайте, историях появления 10 иконок, типографике и смысле, третьей ступени Школы редакторов, видео об изменении восприятия и поведения людей. Ссылки обновлены 14.06.2024.

Формы на смартфонах

В Mobiscroll составили рекомендации по дизайну форм на смартфонах.

  • Вместо выпадающих списков используйте сегментные контролы (если вариантов мало), переключатели (если варианта всего 2: да или нет) или кнопки «плюс» и «минус» (если варианты — это числа);
  • Выбор дня, месяца и года или часа и минуты делайте единым контролом;
  • Используйте слайдеры;
  • Избегайте нескольких колонок;
  • Показывайте сообщения об ошибках рядом с полями;
  • Если много обязательных полей, помечайте только необязательные;
  • Группируйте поля по смыслу;
  • Не делайте кнопки слишком маленькими;
  • Старайтесь придерживаться правил платформ.

Изменение восприятия и поведения людей

Рори Сазерленд снова рассказал, как небольшие изменения меняют восприятие и поведение людей. Например, возможность контролировать ситуацию (даже мнимая) повышает удовлетворение.

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

Обратный отсчёт красного света светофора снизил количество ДТП в Южной Корее, так как нетерпеливость и раздражительность снижаются, когда знаешь, сколько ещё ждать.

В Китае не поняли принцип и добавили обратный отсчёт на зелёный свет, что провоцировало ускорение, когда оставалось мало времени. Это привело к росту ДТП.

Блок с преимуществами на адаптивном сайте

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

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

Кевин предложил другие способы компоновки этого блока для отображения на смартфонах. In English.

Варианты компоновки блока с преимуществами
Варианты компоновки блока с преимуществами

(Самая популярная ссылка прошедшей недели, если судить по количеству лайков в ВК.)

Подписчиков UX Notes смутило слово «предложил». Конечно же, никакой научной новизны здесь нет. Однако, Кевин как минимум задумался о том, что простое перекидывание контента вниз и растягивание блока по вертикали — так себе решение, и можно поискать другие варианты.

Истории появления 10 иконок

Иконки в интерфейсах: 10 историй появления — символ включения-выключения, иконка на кнопке Command, порт Ethernet, Play, Pause, собака, вайфай, блютус и USB. Без знания этих историй можно обойтись. В статье есть ещё иконка «дом», но её истории нет, только высказывание Лебедева.

Типографика и смысл

Типографика как игра в смысл — больше про логотипы и плакатное дело. Отличный пример с логотипом Final Price: сначала студия предлагала формальные решения, объединяя буквы F и P, а клиент в итоге принял вариант со смыслом: F. (читается как «Ф и точка»).

Третья ступень Школы редакторов

Никита Ларионов написал о третьей ступени Школы редакторов. Про школу стажёров, редакторов и прочие образовательные проекты Бюро Артёма Горбунова написана уже куча отзывов, и вот ещё один.

Как я понял, 3-я ступень — это когда ты платишь 60 тысяч рублей, и преподаватели пинают тебя, пока ты делаешь свой проект. Осталось только понять, чем отличается школа редакторов от школы стажёров…