N+1 тезисов
В посты с этим заголовом я буду выносить накопившиеся в записных книжках мысли об пользовательских интерфейсах -- какие они должны и/или могли бы быть. Заголовок, безусловно, эксплуатирует " 50 тезисов" Берка, но предполагается, что это все же самостоятельное произведение :) Кроме того, в отличие от тех 50, эти неорганизованы, ненумерованы (единственная возможная нумерация здесь была бы как в путешествиях Ийона Тихого), и поток их вряд ли закончится в ближайшее время (то есть это лишь малая часть). Такие дела.
Еще раз, важное уточнение: порядок пунктов говорит только о том, в каком порядке я их выдрал из записной книжки. Про многие из этих "тезисов" со временем я напишу подробнее.
Тема сегодняшнего занятия, милые друзья -- информационные карты поля и основные принципы работы с ними.
Определение: Информационное карта поле -- большое количество одновременно отображаемой информации, отображающее некие ее свойства, группирующее, сортирующее... Файловый менеджер, почтовик, онлайн-каталог, записная книжка, IDE с кодом, зачастую даже лист Excel -- все это информационные карты поля. Их основная цель -- позволять быстро находить 1 объект, понимать что-то о всех объектах и их группах, отбирать группы для проведения общих операций и т.п.
* Всякие возможности авто-сортировки объектов по названию, размеру, цвету, запаху -- это, конечно, хорошо; покуда создатель интерфейса понимает, что это лишь поддержка. Критерии "близости" и "дальности" разных объектов зачастую либо неформализуемы, либо формализация эта не воплощена в интерфейсе. Дайте мне сортировать руками. (Одна из причин, почему FeedReader -- самый-лучший-в-мире-ридер -- так это именно потому, что фиды можно сортировать руками, чисто перетаскиванием. При 300+ фидах за это можно отдать левую руку.)
* Сами группируйте объекты иерархически, по папочкам! Я пас.
* И теги, кстати, тоже сами вешайте. Если для того, чтобы потегать свои объекты (файлы, письма, что угодно), мне надо сделать это с каждым в отдельности -- тэги остаются отличным инструментом для выделения некоторых объектов (см. интерфейс Горбунова для The Bat, который, увы, похерен тупым Ritlabs'ом) или организации в процессе создания (см. теги в ЖЖ). Как основное средство организации тысяч документов -- увольте. Разве что мне будет позволено "оттащить в сторонку схожие объекты и повесить тег" (см. сортировка руками), но в этом случае достаточно и просто "оттащить в сторонку".
* От "просто оттащить в сторонку" логически приходим к необходимости "оттаскивать в разные сторонки" -- плоскость, а не список -- лучшая поверхность для организации информационного поля! Медитируйте BumpTop до просветления, заучите Раскина наизусть, потом возвращайтесь интерфейсы для людей делать.
* Как сгруппировать объекты, которые мне нужны, знаю только я. А вот чем мне может помочь хороший интерфейс -- отобразить их богато, используя весь свой (искуственный) интеллект. Пусть объекты разных типов (музыка и документы в случае файлового менеджера) выглядят совсем по-разному (да не тупо по расширению, а по смыслу). Пусть объекты одного типа не демонстрируют мне "системную иконку для такого типа объектов", а тож выглядят в соответствии со своим контентом. Почему бы иконку документа не рисовать хотя бы с отображением количества страниц в нем, картинки -- не просто тумбнейлами (спасибо, хоть до этого додумались) -- а тумбнейлами-с-увеличенной-четкостью областей (так даже на 16х16 иконке морду ребенка можно отличить от морского пейзажа), музыку -- тоже по результатам какого-нибудь анализа стиля... В более однородной среде (rss-читалка) -- чтоб мне по иконке отличался пост-с-фотками от поста-статьи, заметка в полабзаца от рассуждений на 8 страниц, а обрезок со ссылкой "дальше" от полноценной телеги. Это что, сложно понять?
* И, кстати -- почему это я до сих пор не могу поменять руками иконку для любого интересного мне объекта? Да не как в ярлыках Windows -- "выбери из предложенных или нарисуй руками" -- а "дописывай эти две буквы на дефолтную иконку", "обведи дефолтную иконку в красненький кружочек" и т.п. Эй, мы в каком веке живем? Примитивные графические операции до сих пор требуют уникальных специалистов?
* Разметка информационного поля должны быть привязана к его областям, а не конкретным объектам (хотя там, где это уместно, объекты-"якоря" разметки очень и очень правильная мысль!) Тут нам нужен простой как три копейки, графический редактор "поверх": вон в ту серую область выкинул старое, вот вокруг этого красного пятна накидал на посмотреть, вон в тех квадратах разложен код 8 проектов и будущие идеи... А градиентики? Вы думал, градиентики -- это чтоб иконки были красивше и заголовок окна? Хуй там! Это чтобы ткнуть две точки: "очень техническое" (синее) и "философское" (желтое) и все мои RSS-подписки размазать по градиенту между "техничностью" и "философскостью", во как. А то ишь, тоже им... 2008й год на дворе, а логика до сих пор бинарная "или файл лежит тут, или он лежит там". Мало вам Раскин про "карту местности" рассказывал? Мало приводил аналогий?
Мы можем находить нужные нам вещи в такой комнате потому, что имеем склонность запоминать их относительное местоположение и другие ориентиры. Эта способность иногда называется пси-эффектом (psi effect) и уже давно известна специалистам по психологии. Например, вам могут сказать: «Листок по сбыту товара находится в нижней части правой стены, ближе к дальнему углу». В другом случае вы идете прямо к какому-то документу, т.к. вы помните, что он находится сразу слева от оранжевого листка, вывешенного Авивой.
Ну и? Где оно все? Или, вон, смотри чего умные люди говорят.
* И вот как раз в разметке поля и узнаваемости областей пусть мне интерфейс не ленится. Выделять свежедобавленное и давно неиспользованное (да не 2мя градациями "прочитанное-непрочитанное", дубина!), instant search -- не изменить набор видимых данных, а просто сделать "то, что я ищу" намного ярче. Проведи тоооооненькие линеечки между объектами, которые я все время открываю одновременно.
* И вообще (про это будем повторять, и повторять, и повторять): современный графический интерфейс -- это, блять, ни хуя не полупрозрачные окна, свернутые в трубочку. Не можешь придумать, как применить мощь видеоакселератора и плюшки DirectX 10 для эффективного отображения информации -- стена рядом.
UPD: в процессе написания продолжения решил уточнить термины: большое количество информации, по которой мы бродим, все же правильнее назвать информационным полем. А вот карта этого поля -- будет, да, информационной картой. О чем в следующих сериях.
Еще раз, важное уточнение: порядок пунктов говорит только о том, в каком порядке я их выдрал из записной книжки. Про многие из этих "тезисов" со временем я напишу подробнее.
Тема сегодняшнего занятия, милые друзья -- информационные карты поля и основные принципы работы с ними.
Определение: Информационное карта поле -- большое количество одновременно отображаемой информации, отображающее некие ее свойства, группирующее, сортирующее... Файловый менеджер, почтовик, онлайн-каталог, записная книжка, IDE с кодом, зачастую даже лист Excel -- все это информационные карты поля. Их основная цель -- позволять быстро находить 1 объект, понимать что-то о всех объектах и их группах, отбирать группы для проведения общих операций и т.п.
* Всякие возможности авто-сортировки объектов по названию, размеру, цвету, запаху -- это, конечно, хорошо; покуда создатель интерфейса понимает, что это лишь поддержка. Критерии "близости" и "дальности" разных объектов зачастую либо неформализуемы, либо формализация эта не воплощена в интерфейсе. Дайте мне сортировать руками. (Одна из причин, почему FeedReader -- самый-лучший-в-мире-ридер -- так это именно потому, что фиды можно сортировать руками, чисто перетаскиванием. При 300+ фидах за это можно отдать левую руку.)
* Сами группируйте объекты иерархически, по папочкам! Я пас.
* И теги, кстати, тоже сами вешайте. Если для того, чтобы потегать свои объекты (файлы, письма, что угодно), мне надо сделать это с каждым в отдельности -- тэги остаются отличным инструментом для выделения некоторых объектов (см. интерфейс Горбунова для The Bat, который, увы, похерен тупым Ritlabs'ом) или организации в процессе создания (см. теги в ЖЖ). Как основное средство организации тысяч документов -- увольте. Разве что мне будет позволено "оттащить в сторонку схожие объекты и повесить тег" (см. сортировка руками), но в этом случае достаточно и просто "оттащить в сторонку".
* От "просто оттащить в сторонку" логически приходим к необходимости "оттаскивать в разные сторонки" -- плоскость, а не список -- лучшая поверхность для организации информационного поля! Медитируйте BumpTop до просветления, заучите Раскина наизусть, потом возвращайтесь интерфейсы для людей делать.
* Как сгруппировать объекты, которые мне нужны, знаю только я. А вот чем мне может помочь хороший интерфейс -- отобразить их богато, используя весь свой (искуственный) интеллект. Пусть объекты разных типов (музыка и документы в случае файлового менеджера) выглядят совсем по-разному (да не тупо по расширению, а по смыслу). Пусть объекты одного типа не демонстрируют мне "системную иконку для такого типа объектов", а тож выглядят в соответствии со своим контентом. Почему бы иконку документа не рисовать хотя бы с отображением количества страниц в нем, картинки -- не просто тумбнейлами (спасибо, хоть до этого додумались) -- а тумбнейлами-с-увеличенной-четкостью областей (так даже на 16х16 иконке морду ребенка можно отличить от морского пейзажа), музыку -- тоже по результатам какого-нибудь анализа стиля... В более однородной среде (rss-читалка) -- чтоб мне по иконке отличался пост-с-фотками от поста-статьи, заметка в полабзаца от рассуждений на 8 страниц, а обрезок со ссылкой "дальше" от полноценной телеги. Это что, сложно понять?
* И, кстати -- почему это я до сих пор не могу поменять руками иконку для любого интересного мне объекта? Да не как в ярлыках Windows -- "выбери из предложенных или нарисуй руками" -- а "дописывай эти две буквы на дефолтную иконку", "обведи дефолтную иконку в красненький кружочек" и т.п. Эй, мы в каком веке живем? Примитивные графические операции до сих пор требуют уникальных специалистов?
* Разметка информационного поля должны быть привязана к его областям, а не конкретным объектам (хотя там, где это уместно, объекты-"якоря" разметки очень и очень правильная мысль!) Тут нам нужен простой как три копейки, графический редактор "поверх": вон в ту серую область выкинул старое, вот вокруг этого красного пятна накидал на посмотреть, вон в тех квадратах разложен код 8 проектов и будущие идеи... А градиентики? Вы думал, градиентики -- это чтоб иконки были красивше и заголовок окна? Хуй там! Это чтобы ткнуть две точки: "очень техническое" (синее) и "философское" (желтое) и все мои RSS-подписки размазать по градиенту между "техничностью" и "философскостью", во как. А то ишь, тоже им... 2008й год на дворе, а логика до сих пор бинарная "или файл лежит тут, или он лежит там". Мало вам Раскин про "карту местности" рассказывал? Мало приводил аналогий?
Мы можем находить нужные нам вещи в такой комнате потому, что имеем склонность запоминать их относительное местоположение и другие ориентиры. Эта способность иногда называется пси-эффектом (psi effect) и уже давно известна специалистам по психологии. Например, вам могут сказать: «Листок по сбыту товара находится в нижней части правой стены, ближе к дальнему углу». В другом случае вы идете прямо к какому-то документу, т.к. вы помните, что он находится сразу слева от оранжевого листка, вывешенного Авивой.
Ну и? Где оно все? Или, вон, смотри чего умные люди говорят.
* И вот как раз в разметке поля и узнаваемости областей пусть мне интерфейс не ленится. Выделять свежедобавленное и давно неиспользованное (да не 2мя градациями "прочитанное-непрочитанное", дубина!), instant search -- не изменить набор видимых данных, а просто сделать "то, что я ищу" намного ярче. Проведи тоооооненькие линеечки между объектами, которые я все время открываю одновременно.
* И вообще (про это будем повторять, и повторять, и повторять): современный графический интерфейс -- это, блять, ни хуя не полупрозрачные окна, свернутые в трубочку. Не можешь придумать, как применить мощь видеоакселератора и плюшки DirectX 10 для эффективного отображения информации -- стена рядом.
UPD: в процессе написания продолжения решил уточнить термины: большое количество информации, по которой мы бродим, все же правильнее назвать информационным полем. А вот карта этого поля -- будет, да, информационной картой. О чем в следующих сериях.