Точки судьбы
Эффект маленькой точки, или как точки могут все испортить или починить.
Поставил точку, за точкой точка.
Над точкой точки, и вне ее.
Когда же точки, поставят точку.
Или за точкой, еще они?Размышления об удобном интерфейсе и хаосе.
Иногда ловишь себя на странной мысли: почему софт перестал эволюционировать? Казалось бы, технологии летят вперед с космической скоростью, нейросети пишут стихи, а мы всё еще взаимодействуем с компьютером так, как будто это 1984 год.
За последние два десятка лет я не увидел ни одного принципиально нового компонента интерфейса. Кое-где добавили анимации, где-то скруглили углы, но в целом и в частном — это всё те же кнопки, в которые мы тычим, это всё те же ползунки, за которые мы таскаем, и те же списки, которые мы прокручиваем. Где же тот самый “щелчок”, который должен перевернуть наше представление об UX? Неужели мы придумали всё возможное?
Когда Apple выпустила Freeform в 2022 году, у меня уже было своё небольшое приложение для структурирования мыслей. Я помню тот момент: я посмотрел на презентацию и подумал — “Ну всё, приехали”. Гиганты индустрии вступили в игру. Это, возможно, стало одной из причин, почему я тогда отложил свой проект. Но сейчас я понимаю, что зря.
В Freeform есть, безусловно, красивая идея — бесконечный канвас в любую сторону. Это именно то, чего мне всегда не хватало в остальных инструментах. Там действительно удобно делать быстрые заметки, разбрасывать картинки и стикеры. Холст большой, воздуха много, свобода…
Но свобода без структуры превращается в хаос. Инструмент отлично подходит для рисования на доске во время встречи, но дальше рукописного текста и схем “на коленке” оно, по большому счету, не пошло. И, конечно, бесшовная синхронизация между iPad и Mac — это мощно, само собой.
Однако, использовать его как серьезный инструмент для работы с большими объемами информации на Mac — мучение. Ты устанешь рисовать в нем хоть что-то, отдаленно напоминающее сложную brainmap. И самое главное — с клавиатуры там вообще ничего не получится сделать нормально. Это инструмент для пальца и стилуса, но не для мозга, настроенного на скорость печати.
А вот как это реализовано у меня. Может, это не так коммерчески красиво и “гладко”, как у Apple, но на момент разработки это казалось лучшим решением конкретных задач.
И как думаете, сколько раз я здесь “тыкал” мышкой, перетаскивая элементы?
Ну, пришлось, конечно. Но не так часто, как в обычных редакторах. Для создания большой карты логики обычно достаточно нажать Tab — появляется новый элемент, привязанный к текущему. Или Alt+D — дублируется выделенный фрагмент с сохранением связей. Это поток мысли, который не прерывается поиском кнопки на панели инструментов.
Проблема бесконечности и “Точки судьбы”
Но при чем тут точки? А точки возникли из классической проблемы навигации. Я долго думал: как на бесконечном канвасе показать пользователю, что здесь вообще есть что-то, и самое главное — где именно это находится?
Когда у тебя бесконечное пространство, очень легко потеряться. Тебе нужен ориентир, якорь. Они — точки — собственно, и показывают, где и сколько чего есть. Обычные полосы прокрутки (scrollbars) здесь бессильны: они показывают положение в документе, но не показывают “карту местности”.
Без точек ты просто плывешь в пустоте. Ты не знаешь, есть ли что-то справа или слева от тебя.
Добавляем точки снизу — и сразу появляется контекст. Ты видишь кластеры информации. Тебе не нужно прокручивать слепо, ты целенаправленно движешься к нужному сгустку.
Или слева. Это миникарта, которая не занимает лишнего места, но дает понимание масштаба. Маленькая точка может спасти часы бесполезного скроллинга. Это “эффект маленькой точки” — иногда ничтожно визуальное изменение кардинально меняет юзабилити целой системы.
В общем, родилось все это из потребности не потеряться в собственных мыслях. А дальше — немного “ИИ-слопа”, как я его называю. Я решил проверить себя: а не бред ли я несу? Не придумываю ли то, что уже сто раз сделали до меня? Решал поискать, а что вообще известно про эволюцию интерфейсов.
И ах да, ох да… Ничего сильно не приврал. Мы действительно застряли в прошлом.
Историческая справка — спасибо Perplexity.
Чтобы понять, куда двигаться дальше, стоит оглянуться назад. Я попросил ИИ собрать хронологию появления базовых элементов интерфейса. Результаты впечатляют и немного пугают. Оказывается, большинство того, чем мы пользуемся каждый день, было придумано до того, как многие из нас родились.
Список элементов управления пользовательского интерфейса и годы их появления
Вот подробный хронологический список основных элементов управления графического пользовательского интерфейса (GUI) с указанием годов их первого появления или массового внедрения:
Базовые элементы раннего GUI (1960-1980-е)
Окно — 1968 год
Впервые продемонстрировано Дугласом Энгельбартом в системе NLS (oN-Line System). Перекрывающиеся окна появились в 1973 году в системе DNLS. Это было начало конца командной строки.[1][2]Кнопка — 1973 год
Первые графические кнопки появились в Xerox Alto (1973). Концепция физических кнопок существовала с конца XIX века, но цифровые UI-кнопки стали стандартом с появлением GUI. Мы до сих пор на них “тыкаем”.[3][4][1]Метка (Label) — 1973 год
Текстовые метки появились вместе с первыми GUI в Xerox Alto и Smalltalk. Без них было бы совсем темно.[2][1]Поле ввода (Text Input Field) — 1973 год
Текстовые поля для ввода данных были реализованы в ранних GUI системах Xerox PARC. Окно в мир текста.[5][1]Полоса прокрутки (Scrollbar) — 1974 год
Первая скрытая полоса прокрутки была реализована в текстовом редакторе Bravo в Xerox PARC. Стабильная полоса прокрутки с пропорциональным ползунком (thumb) появилась в Smalltalk в 1977 году. В 1981 году Xerox Star переместила полосу прокрутки на правую сторону окна, что стало стандартом. А для бесконечных канвасов этого оказалось мало.[6][7][8]Иконка (Icon) — 1973-1975 годы
Первые иконки для GUI были созданы в Xerox Alto (1973), а в 1975 году Xerox продемонстрировала “первое использование иконок” в графическом интерфейсе. Потребительский компьютер с иконками — Xerox Star (1981). Мысль в картинке.[9][10][11][1]Меню (Menu) — 1973-1975 годы
Первое фиксированное выпадающее меню (drop-down menu) появилось в Smalltalk в Xerox PARC. Всплывающие меню (pop-up menus) были продемонстрированы Xerox в 1975 году и реализованы в Quantel Paintbox (1981).[12][13][1]Меню-бар (Menu Bar) — 1983 год
Универсальная строка меню в верхней части экрана была представлена в Apple Lisa (1983), хотя концепция была разработана ранее в Xerox PARC.[1][12]Чекбокс (Checkbox) — 1984 год
Чекбоксы в цифровом виде появились в Apple Macintosh (1984), используя маленькие квадраты с крестиками для обозначения выбора. Концепция заимствована из бумажных форм. “Галочки” стали цифровой реальностью.[14][15][16]Радиокнопка (Radio Button) — 1975 год
Впервые реализована Тедом Кэлером (Ted Kaehler) в BitRectEditor для Smalltalk. Название происходит от физических кнопок автомобильных радиоприёмников, где нажатие одной кнопки отменяло выбор других. Получили распространение в Xerox Star и Apple Lisa.[15][17][18][14]Слайдер (Slider) — 1980-е годы
Слайдеры появились в графических системах 1980-х годов, но точная дата первого появления не задокументирована. Широкое распространение получили с развитием мультимедийных приложений. Тянем-потянем.[19][2]Курсор мыши (Mouse Cursor) — 1968 год
Впервые продемонстрирован Дугласом Энгельбартом на “Матери всех демо” 9 декабря 1968 года с первой компьютерной мышью. Без него GUI был бы невозможен.[2][1]
Элементы эры персональных компьютеров (1980-1990-е)
Вкладки (Tabs) — 1990-е годы
Вкладки в интерфейсах приложений появились в 1990-х. Вкладки в веб-браузерах стали стандартом после 2000 года, когда все основные браузеры внедрили эту функцию. Internet Explorer 7 добавил вкладки в 2006 году. Спасение от десятков открытых окон.[20][21][22]Выпадающий список / Комбобокс (Dropdown Menu / Combobox) — 1980-е годы
Выпадающие списки стали стандартным элементом в GUI системах 1980-х годов, таких как Windows и Macintosh. Экономия места на экране.[23][24][25]Диалоговое окно (Dialog Box) — 1981 год
Диалоговые окна с кнопками подтверждения появились в Xerox Star (1981). Способ пообщаться с программой “на ты”.[26][1]Гамбургер-меню (Hamburger Menu) — 1981 год
Иконка с тремя горизонтальными линиями (≡) была разработана Нормом Коксом (Norm Cox) для Xerox Star в 1981 году. Широкое распространение в мобильных интерфейсах получила с 2009 года. Скрыть всё, чтобы показать ничего.[27][28][29][30]Панель инструментов (Toolbar) — 1983 год
Панели инструментов с иконками для быстрого доступа к функциям появились в Apple Lisa (1983). Самые часто нажимаемые кнопки под рукой.[31][1]Строка состояния (Status Bar) — 1980-е годы
Строки состояния для отображения информации о системе стали стандартом в GUI 1980-х. Что происходит у нас под капотом?[12]Контекстное меню (Context Menu) — 1987 год
Правой кнопкой мыши активируемые контекстные меню появились в Amiga Workbench и были популяризированы Windows 95. Всё, что нужно, прямо здесь и сейчас.[1][12]Всплывающая подсказка (Tooltip) — 1990-е годы
Всплывающие подсказки при наведении курсора стали распространённым элементом в 1990-х годах с развитием Windows 95 и более сложных GUI. “А что делает эта кнопка?”[32][33][34]
Элементы веб-эры (1990-2000-е)
Гиперссылка (Hyperlink) — 1990-1993 годы
Кликабельные ссылки стали стандартом с появлением первых веб-браузеров. Netscape был выпущен в 1993 году. Сеть связалась воедино.[35]Индикатор прогресса / Прогресс-бар (Progress Bar) — 1990-е годы
Графические индикаторы прогресса стали стандартом в 1990-х для отображения процесса загрузки или выполнения задач. Сколько еще ждать?[36][37][38][39][40]Тултип с стрелкой (Arrow Tooltip) — 2000-е годы
Продвинутые всплывающие подсказки со стрелками, указывающими на элемент, стали популярны в веб-дизайне 2000-х. Точность указания.[32]Хлебные крошки (Breadcrumbs) — 2000-е годы
Навигационные элементы для отображения пути пользователя стали стандартом веб-дизайна в начале 2000-х. Где я? В какой я папке?[41]Аккордеон (Accordion) — 2000-е годы
Раскрывающиеся секции контента стали популярны в веб-интерфейсах середины 2000-х. Спрятать лишнее, показать нужное.[41]
Элементы мобильной эры (2007-2015)
Pull-to-Refresh (Потянуть для обновления) — 2009 год
Разработан Лореном Брихтером (Loren Brichter) для приложения Tweetie (Twitter). Интуитивный жест, ставший стандартом.[42][43][44]Floating Action Button (FAB) — 2014-2015 годы
Представлен Google в Material Design в 2014 году, официально внедрён в Android 5.0 Lollipop (2014). Главная кнопка всегда на виду.[45][46][47]Бесконечная прокрутка (Infinite Scroll) — 2006-2010 годы
Популяризирована социальными сетями, особенно Twitter и Facebook в конце 2000-х. Ты никогда не доберешься до конца.[48][49][50]Жест свайпа (Swipe Gesture) — 2007 год
Жесты свайпа стали стандартом с выпуском первого iPhone в 2007 году. Управление одной рукой.[51][52][53]Нижняя панель навигации (Bottom Navigation Bar) — 2015 год
Apple представила концепцию Tab Bar в 2014 году на WWDC, Google представил Bottom Navigation в своих гайдлайнах Material Design в 2015 году. Снова экономия движения большого пальца.[54][55]Skeleton Screen (Скелетный экран загрузки) — 2013-2015 годы
Популяризирован Facebook в середине 2010-х как улучшение UX во время загрузки контента. Не пугай пользователя белым экраном.[56]Карточный интерфейс (Card-Based UI) — 2013 год
Google представил карточный дизайн как часть Material Design, хотя концепция использовалась и ранее. Информация порциями.[57][58][59]Toast-уведомление (Toast Notification) — 2000-е годы
Названы в честь всплывающих уведомлений, появляющихся как “тост из тостера”. Стали популярны в Android и веб-приложениях. Не прерывай поток, просто скажи “ок”.[60][61][62]
Современные элементы (2015-2025)
Темная тема (Dark Mode) — 2018-2019 годы
macOS Mojave (2018) и iOS 13 (2019) от Apple, Android 10 (2019) от Google официально внедрили системную поддержку темной темы. Глаза говорят спасибо.[63][64][65][66]Bento Grid (Бенто-сетка) — 2023-2024 годы
Модульные сетки в стиле японских коробок бенто стали трендом UI-дизайна, популяризированы Apple, Microsoft и другими в 2023-2024 годах. Порядок в хаосе виджетов.[67][68][69]AI Chatbot Interface (Интерфейс AI-чатбота) — 2022-2023 годы
С запуском ChatGPT (ноябрь 2022) интерфейсы AI-чатботов стали массовым элементом UI. Строчка ввода вместо галочки меню.[70][71]Glassmorphism (Глассморфизм) — 2020 год
Эффект матового стекла был переосмыслен и популяризирован в macOS Big Sur (2020) от Apple. Красота размытия.[72][73][74]Neumorphism (Неоморфизм) — 2019-2020 годы
Стиль дизайна с мягкими тенями появился в конце 2019 года, но к 2021-2022 потерял популярность из-за проблем с доступностью. Мягко, но неудобно.[75][76][72]Spatial UI (Пространственный интерфейс) — 2023 год
Представлен Apple с Vision Pro для работы с трёхмерными интерфейсами в дополненной и виртуальной реальности. Выход из плоскости экрана.[77][78][79][80]Voice Interface (Голосовой интерфейс) — 2011-2014 годы
Siri (2011), Google Now (2012), Alexa (2014) и другие голосовые ассистенты внедрили голосовое управление. Говори, а не тыкай.[81][82][83]Gesture Control (Управление жестами) — 2006 год
Nintendo Wii (2006) первой массово внедрила управление жестами, затем концепция перешла в смартфоны и другие устройства. Танцуй, чтобы управлял.[83][84][81]Progress Ring / Circular Progress (Круговой индикатор прогресса) — 2010-е годы
Круговые индикаторы прогресса стали популярны в мобильных интерфейсах как альтернатива линейным прогресс-барам. Крути-верти.[37][36]Snackbar — 2014 год
Введён Google в Material Design как альтернатива toast-уведомлениям с возможностью действий. Можно отменить действие.[60]Chip / Tag — 2014 год
Компактные элементы для отображения информации или фильтров, представленные в Material Design. Мишки теги.[41]Speed Dial FAB — 2014 год
Расширенная версия FAB с несколькими дополнительными кнопками, появляющимися при нажатии. Пирамида кнопок.[46][85]
Этот список демонстрирует удивительную историю: почти все базовые “кирпичики”, из которых состоит современный софт, были изобретены более 40 лет назад. За последние 10-15 лет мы в основном занимались адаптацией этих старых идей под сенсорные экраны и пытались сделать их “красивыми”.
И если это так, то, может быть, время вернуться к простым решениям? Время маленькой точки, которая может поставить точку в бесконечном хаосе информации.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125