UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Загадочное многоточие – и почему мы видим его в каждом интерфейсе
Редакція
Редакція

Опубліковано

Загадочное многоточие – и почему мы видим его в каждом интерфейсе

#ux

Этот маленький символ стал популярным, но помним ли мы, откуда он взялся?

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

На письме

Три горизонтальные точки известны как многоточие и в основном используются для обозначения «в устной или письменной речи пропуска слова или слов, которые являются излишними или могут быть поняты из контекстных подсказок» (dictionary.com). Многоточие является настолько важным знаком препинания, что в спецификацию Unicode включено не менее восьми вариантов.

Unicode включает 8 вариантов символа многоточия (источник: раздел)

Его можно аналогично использовать при проектировании программного обеспечения, указывая, что имя файла или текст были усечены. Вы можете встретить его повсюду, от ОС вашего компьютера до фрагментов текста, за которыми следует аффорданс «читать дальше». В CSS есть свойство , которое автоматически отображает многоточие (UnicodeU+2026), когда текст выходит за пределы выделенной области.

.truncate {

width: 320px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

Но оно используется не только для усечения текста. Википедия разъясняет литературное использование многоточия:

«В зависимости от контекста и места в предложении, многоточие может указывать на незавершенную мысль, небольшую паузу, эхо голоса, нервное или неловкое молчание»

— Wikipedia

Одно из первых заметных применений многоточия в письменной форме встречается в романе Джейн Остин 1811 года «Чувство и чувствительность». В нем многоточие представляет прерывание речи:

Мы так и не кончили «Гамлета», Марианна! Наш милый Уиллоби уехал прежде, чем мы дошли до последнего акта. Но отложим книгу до его возвращения… Хотя ждать, возможно, придется многие месяцы…

— Джейн Остин «Чувство и чувствительность» (источник)

Ребрендинг Medium в 2020 году

Недавний ребрендинг Medium коснулся и логотипа, который представляет собой стилизованное многоточие, явно отсылающее к призыву в режиме написания статей, который гласит: «Расскажите свою историю…».

Medium начинает каждую историю с многоточия

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

Первое появление в интерфейсе

От пользователя требуются дополнительные действия или ​​информация

Насколько мне известно, самое первое использование многоточия в графическом интерфейсе пользователя восходит к первым операционным системам Apple и Windows, выпущенным в 1984 и 1985 годах соответственно (поправьте меня, если я ошибаюсь). В обоих случаях оно использовалось, чтобы указать, что клик по пункту меню приведет к появлению дополнительной информации или необходимых действий.

Точки в интерфейсе Macintosh System 1 в 1984 (источник: winworldpc.com)

Точки в Windows 1.0 в 1985 (кстати, с иконкой гамбургер-меню) (источник: PCMag, Diancheng Hu)

Эта закономерность сохраняется и в нынешней ОС Apple. В этом примере при выборе пунктов «Системные настройки…», «App Store…» или «Перезагрузить…» будет показано дополнительное окно, в котором пользователю необходимо выполнить действие. Напротив, выбор пунктов «Режим сна» или «Об этом Mac» просто немедленно выполнит действие.

Многоточие в операционной системе MacOS Big Sur

Согласно Apple,

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

Microsoft также рассмотрел варианты использования многоточия. (см. здесь, здесь и здесь):

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

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

Microsoft также предупреждает:

«Это не означает, что вы должны использовать многоточие, когда действие отображает другое окно – только, когда для выполнения действия требуется дополнительная информация. Следовательно, любая командная кнопка, неявная команда которой – «показать другое окно», не имеет многоточия. Например, команды «О программе», «Дополнительно», «Справка» (или любой другой командой, связанной с разделом справки), «Параметры», «Свойства» или «Настройки».

Подсказки для ввода текста

Как и Medium, многие сайты и приложения используют многоточия в местах, где пользователя просят ввести текст, например, в комментариях, обновлении статуса или поисковом запросе. Фактически, Salesforce рекомендует использовать точки для всех запросов, в которых пользователь может ввести текст:

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

— Руководство по стилю Salesforce

Точки в комментариях на Facebook и LinkedIn

Точки в запросах поиска на CNN и Wayfair (John Saito)

Анимированные точки появляются, когда кто-то набирает сообщение в мессенджере

Раскрытие меню

SDK для iOS автоматически создает кнопку «More» при необходимости

Точки также можно найти в автономном контексте, где при взаимодействии с ними отображается все меню. Помню, что впервые увидел подобное использование в iOS 1 для iPhone, в частности, как часть элемента «UITabBar» (эта большая полоса иконок в нижней части экрана). Причина, по которой этот паттерн был обнаружен во многих ранних приложениях для iPhone: при создании приложения с использованием Apple SKD многоточие автоматически появлялось каждый раз, когда на панели вкладок было больше пяти элементов. Если бы элементов было шесть, пятый и шестой были бы сгруппированы под кнопкой «More». Это поведение по умолчанию все еще присутствует в SDK, и результаты по-прежнему можно увидеть во многих приложениях, использующих нативный UITabBar, включая приложение iTunes Store. (источник: Apple HIG)

Фактически, помимо того, что точки появляются в меню, их использование для запуска меню стало настолько распространенным как в приложениях, так и в Интернете, что Google и Microsoft включили его в качестве основного паттерна пользовательского интерфейса в свою документацию.

Вольности в использовании

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

LinkedIn не стесняется использовать многоточие

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

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

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

Многоточия на «панели действий» Android и на «панели приложений» в Material Design

Юзабилити

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

Точки никуда не исчезнут

Думаю, что они достаточно понятны, чтобы быть эффективными, хотя так было не всегда. Я также считаю, что они достаточно гибкие, чтобы их можно было понять во многих контекстах. Можно ли с ними переборщить? Возможно (я имею ввиду LinkedIn), но я буду использовать их в своей работе. Поэтому в следующий раз, когда вы столкнетесь с точками или добавите их в один из своих дизайнов, просто вспомните, откуда они взялись.

Ссылки


Перевод статьи uxdesign.cc

Топ коментарі (0)