DataLife Engine > Блог > Азбука вкуса и баланс восприятия

Азбука вкуса и баланс восприятия


9-03-2015, 08:22. Разместил: admin Нравится вам конфигурация программы 1с, в которой вы работаете? Или вы настолько привыкли к ней, что просто не замечаете в ней изъянов? Возможно вы не знаете, что можно сделать интерфейс форм в программе гораздо удобнее.
 
Пользователям важно, чтобы работа в системе была, с одной стороны, максимально удобной: чтобы все необходимые функции были «под рукой» и работали по системе «в один клик». С другой стороны, избыток пунктов меню и кнопок способен запутать даже опытных пользователей. Многие ли хотят именно читать меню?

 
 
Пределы человеческой кратковременной памяти не беспредельны. Существует предельное количество предметов, которые мы способны удержать в нашей кратковременной памяти, а также охватить глазами на экране монитора. Как думаете это 5, 10 или 29? Если хаотично нарисовать несколько десятков кругов и попросить любого назвать их количество на глаз, то это сделать не получиться. А вот если разбить эти круги на группы, то вы сразу сможете охватить сколько этих групп. Главное чтобы этих групп было немного.
 


Навигация по меню

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

Быстрое развитие платформы 1с взвалило неимоверную нагрузку на плечи тех, кто занимается разработкой поддержкой конфигураций. Естественно, что разработчики программы готовы ухватиться за любую мысль, похожую на стандарт, чтобы как-то ускорить свою работу и работу пользователей. Но многие ли стандарты действительно позволяют облегчить работу?

Одним из таких методов, на который стоит обратить пристальное внимание,  — это принцип, очень часто применяющийся для того, чтобы определить количество пунктов в меню навигации в программе. Что это за принцип?

Например, главное меню «Полное» в конфигурации Управление производственным предприятием 1.3 (УПП) показывает полную структуру всех объектов, находящихся в конфигурации. Вот только работать по нашему мнению с ним крайне тяжело. Зачем во-обще тогда такое меню? Для того, чтобы показать пользователю насколько разнообразна та программа, которую он приобрел? Или все-таки лучше, чтобы изначально меню пользователю давало ответ, что и где находится для быстрейшего перехода в этот пункт. Вместо этого оно показывает структуру программы, а не рабочий инструмент. Надо сказать, что в конфигурации также присутствуют для более удобной и комфортной работы небольшие меню интерфейсов с меньшим уровнем вложенности информации для определенных участков работы. И вот они как раз отвечают этим требованиям. «Заваливать» пользователей сотней записей в меню безответственно. А если это сделать еще и с трех-четырех кратной вложенностью, то это вдвойне-тройне безответственно.

Проблема с путаницей и информационной перегруженностью существует в 1с в типовых решениях. Наверняка есть определенное число пунктов меню, которые можно показать пользователю на экране, при этом не вызвать у него потерянности! И здесь лучшим примером выступает конфигурация Бухгалтерия 2.0. Меню становится достаточно дружелюбно, разбито на подсистемы и не выглядит уже таким уж запутанным, хотя вложенность тоже достаточно большая. Все же восприятие в нем гораздо лучше чем полное меню в УПП 1.3.

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

 


Баланс восприятия  — это не бухгалтерский термин

 
Баланс между глубиной и широтой – это баланс между числом иерархического уровня вашего меню (глубина) и пунктами меню, видимыми на странице (широта). Здесь в каждом случае надо искать компромисс: чем меньше пунктов меню вы показываете на экране, тем глубже вам придется делать структуру. И наоборот, чем больше пунктов меню присутствует на экране, тем меньше иерархических уровней вам придется создавать. В общем случае «широкие» структуры работают лучше, чем «глубокие». Пользователи лучше работают и быстрее находят информацию в «неглубоких» структурах.

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

 

 
 

Возьмем, к примеру, управляемые формы на платформе 1С8.2. Определенно нравится верхнее меню. Оно изобилует большими крупными кнопками и подписями под ними, говорящие о том, в какой подсистеме в данный момент мы работаем. Однако дальше меню слева и чуть ниже поражает своей насыщенностью текста с подчеркнутыми гиперссылками. При этом совсем не уделено внимание хоть как-то разбить на несколько блоков хотя бы цветовыми решениями. В лучшем случае разделено разделителем. В результате у интерфейса получается перегруженность экрана абсолютно не читабельным монотонным меню. Приходится вчитываться (!) в него, чтобы наконец понять что нам нужно. В итоге пользователь как бы заучивает наизусть, где и куда ему нужно нажать. К тому же оно постоянно находится на экране, тем самым уменьшая пространство для вывода самой информации. Зачем это постоянно на экране видеть? Меню на то и «меню», чтобы работать по принципу вызвать когда потребуется, например с помощью выпадающего списка.

В большом списке найти нужный пункт становится проблематично: иногда отчаянно ищешь и вчитываешься в названия, чтобы сформировать нужный, допустим, отчет. Удовлетворения от такого подхода не наступит никогда. Зачем загромождать это все таким образом? Почему бы не выделить это через выпадающие списки? Почему бы не выделить еще дополнительными рисунками или цветовыми блоками? Почему это все должно быть на форме постоянно? Где, извините, самой информации место найти на экране? На управляемых формах чуть ли не добрая половина экрана занята постоянной информацией. Зачем? Если это меню сверху занимает пару сантиметров, то это никому и никак не мешает.

Разработчики уже в новом интерфейсе 1с8.3 «Такси» эти вещи стали возвращаться в выпадающее меню  — и это более чем правильно!

 


Структура информации на экране

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

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

На сегодня увеличение скорости сильно востребовано на рынке. Затруднение доступа к информации тоже не лучшим образом сказывается на это. Не важно, сколько у вас информации в программе, главное  — как она представлена!

Запутанность и сложность свидетельствуют лишь о плохом дизайне, а не о качестве самой информации. Создать такую систему навигации, которая будет при всей сложности понятной и удобной для пользователя  — поистине важная задача! Эта задача не из легких. Мало кто их технических специалистов (программистов) понимают, как иной раз рядовому пользователю бывает трудно найти нужную информацию. Потому что это не они (!) каждый день к ней обращаются.


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

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

Группировка элементов реквизитов

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

 

Наглядность

 
Наглядное представление информации – это способ показать на форме важную информацию, для получения которой требуется в программе производить еще не одно действие. А иной раз и очень много действий. В типовых решениях такой способ имеется, допустим, в документе «Реализация товаров и услуг». В диалоговом окне формы документа можно увидеть гиперссылку на подчиненный документ счет-фактура. При этом по этому документу представлена информация еще и по дополнительным реквизитам: входящие номер и дата. В нашем случае способ немного расширился и стал представлять возможность еще и получать данные в отдельный реквизит. Например, в документе «Реализация товаров и услуг» мы добавили реквизит «Сумма оплаты», в котором можно указать сумму оплаты по этой накладной и по гиперссылке справа создается документ оплаты с предустановленным этим значением. Но не только это. При закрытии и открытии накладной сумма оплаты в этот реквизит встанет из документа оплаты. Этот реквизит не принадлежит документу «Реализация». Он всего-лишь визуально отражает состояние оплаты подчиненного документа. Оплата в данном случае могла быть произведена и самостоятельно в журнале кассовых документов, либо через другие обработки. Но если есть связка реализации и оплаты, то она здесь визуально даст ответ очень быстро – на какую сумму оплачена накладная. Плюс позволит ее здесь же и оплатить, немного удобным способом. Весьма уместный использован прием визуализации. 

 

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

 

Инфографика

 
Не забудем упомянуть про инфографику. Графический способ подачи информации, данных и знаний называется инфографикой. В программе 1с ее используют, с нашей точки зрения, в очень малых количествах и представляет собой иконки. Дальше использование инфографики практически отсутствует. А между тем инфографика используется в повседневной жизни везде: реклама, газеты, телевидение. Она способна не только организовать большие объёмы информации, но и более наглядно показать соотношение меню программы, действий в формах отчетов, документах и обработках.

Вот скажите вы будете читать книжку, если в ней нет картинок?… Вам все равно? А спросите об этом ребенка. Что он вам ответит?
Что именно дети воспринимают быстрее всего? И запоминают быстрее всего? А Вы сами?
Конечно же картинки!

А все почему? Потому что наш мозг так устроен. Исследования мозга, в области физиологии зрения и способов обработки зрительной информации, подтверждают целесообразность включения инфографики в арсенал средств бизнес-коммуникаций. Около 50% нашего мозга принимает участие в процессе визуализации, так как в этом процессе задействованы глаза, в которых задействованы более 70% сенсорных рецепторов. Целая сеть клеток, волокон и нейронов, обеспечивают нам этот процесс. Способность человека воспринимать визуальную сцену (картину, действие) оценивается в малую долю времени. И эта доля равна 1/10 секунды. Тогда как человеческому мозгу необходимо не менее 150 миллисекунд, чтобы прочитать слово, а чтобы понять его значение  — еще 100. Одна сетчатка глаза состоит из более чем 150-ти миллионов клеток. Плюс нейроны, ответственные за зрительное восприятие, занимают около 30% всего серого вещества. 8% отвечают за осязание, 3% за слуховое восприятие.

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

Артемий Лебедев прав: «дизайн является решением задач, а не творчеством. Дизайнер, который считает, что дизайн — это когда надо сделать красиво, просто не понимает смысла профессии». Любая конфигурация чем она больше, тем она сложнее. Она перегружена информацией. И если в конфигурации присутствует только буквенное представление, то эта конфигурация не может считаться юзабельной, то есть удобной. А если визуальное представление помогает "закрытыми глазами" находить нужное в программе, то прибавляет вес программе в нужную сторону.

 
 


Правильная визуализация  — это целая наука

 
Яркий пример. Пользователи, осваивающие по инструкции с текстом и иллюстрациями, справляются с освоением нового более чем на 300% лучше, чем те, кто следует инструкции без иллюстраций. А все почему? Потому что каждая буква  — это отдельный символ. Чтобы осознать прочитанное, мозгу приходится сначала поработать над расшифровкой прочитанного, сопоставить буквы, слова с хранящимися в памяти и к тому же еще определить куда эту информацию положить. Да так положить, чтобы потом вспомнить куда положено и как это применить. И все это происходит в доли секунды времени. Но даже при этом мозг больше затрачивает умственных усилий чем воспринять изображение. Рисунок воспринимается сразу, а текст  — последовательно.

 

 
 

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

А дорожные знаки? Вот представьте себе что на них будет не картинки, а написано что-то. В два-три слова. Разве сможете так быстро прочитать? А если они будут все как один на друг-друга похожи…

Человеческий мозг запоминает:
10% — из того, что услышал;
20% — из того, прочитал;
80% — что видел и делал.

Инфографика очень полезна. Она легко воспринимается и усваивается, ей хочется делиться и она очень интересна. Это подтверждается исследованиями. Визуальное сопровождение увеличивает желание читать текст на 80%.

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

 


 


Вывод

 
В заключении хотим сказать, что в дизайне навигации для любой программы главное  — это баланс между широтой и глубиной, а также четкое визуальное представление навигации. Не перегружайте интерфейс «широкими» структурами. Много ссылок будут некрасиво выглядеть с эстетической точки зрения. А также не перегружайте пользователя информацией: показывайте на форме только то, что действительно необходимо для пользователя и часто используемое, при этом, не забывая о ясности, четкости и привлекательности. Не загромождайте экран монитора не нужной информацией. Это отвлекает. Очень отвлекает. Заставляет нас по многу раз перечитывать меню и постоянно искать то, что нужно.

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

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

Ну и напоследок. Делайте то, что любите больше всего! Это единственный способ преуспеть в любом деле. Потому как любимым делом можно заниматься часами и не чувствовать себя как на работе. А если это дело приносит радость другим  — этому можно посвятить и всю жизнь.

 

 

Хаки для Dle 10.4
скачать форекс советники Ilan

Вернуться назад