search icoico arrow

Проектирование интерфейсов программных средств

Проектирование интерфейсов программных средств

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

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

Проясним ситуацию с последней посылки. Творческие личности в большинстве своем ставят во главу угла полет фантазии, собственные ощущения и мировоззрение. Никто не отрицает, что Сальвадор Дали был гениальным творцом, но не все получают от его творенийэстетическое наслаждение. А теперь представьте, что он разработал интерфейс Microsoft Word! Буйство красок, пересекающиеся под неземным углом плоскости! Можно с таким работать?

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

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

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

Что такое эргономика

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

Эргономика и интерфейс

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

Интерфейс – средство взаимодействия между различными субъектами. В данном случае между человеком и машиной.

Что эргономика дала программным интерфейсам? Для ответа надо сделать небольшое отступление. Из чего состоит интерфейс? Прежде всего – экран, на который, собственно, отображается интерфейс. Значит, интерфейс состоит их некоторых активных зон экрана. Далее, в современном интерфейсе присутствует цвет. Значит надо определить идеальные или близкие к идеальным цветовые схемы. Шрифт. Ведь неотъемлемая часть современных интерфейсов – информационные надписи. Навигация. Навигация должна быть! Она важна в большом программном комплексе не меньше, чем в океане во время тумана в штормовую погоду!

По порядку

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

В общем

А общее требование к интерфейсу выразил американский специалист по эргономике интерфейсов (я сознательно не хочу использовать американский термин юзабилити) Стив Круг (Steve Krug) в заголовке своей замечательной книги. Книга озаглавлена так: «Не заставляйте меня думать». Это действительно квинтэссенция общих требований к интерфейсу. Интерфейс «не должно быть видно» до тех пор, пока он не понадобится, а когда он понадобился, в нем должно быть понятно абсолютно все! В том же Microsoft Word абсолютно непонятно, почему функция «Формат по образцу» обозначена пиктограммой с изображением малярной кисти. Если кому-то понятно, пишите по электронной почте. Сниму свои обвинения с Microsoft сразу же. И еще. Главный элемент любого программного обеспечения, будь то сайт в Интернете или мультимедийная энциклопедия – информация! Ничто не должно отвлекать пользователя от нее. Тем более элементы интерфейса. Интерфейс – всего лишь придаток к информации, система управления оной.

Одно из общих требований заключается в том, что хотим мы этого или нет, существует определенная целевая аудитория, потребляющая продукт. В данном случае - программный комплекс. Следовательно, дизайн должен соответствовать вкусам и чаяниям именно этой аудитории. И не надо говорить, что для определения целевой аудитории необходимо проводить сложные исследования! Мы ведем речь об образовательных ресурсах. Очевидно, что база данных правовых актов в области образования нужна только управленческому персоналу образовательных и смежных с ними учреждений. Электронный учебник по истории для 7 класса нужен только ученикам 7 класса, ну может быть еще 6, 8 классов и их родителям. Больше никому! Надо следовать привычкам этих аудиторий. Если продукт для управленца – строгий интерфейс, минимум изменений, идущих в разрез с общепринятыми правилами документооборота. Если это обучающий комплекс для детей младшего школьного комплекса, то надо делать красочные интерфейсы, похожие на мультфильмы. Известно, что дети старшего школьного возраста подвержены влиянию модных течений. Значит надо делать для них интерфейс с «кожами». Пришла новая мода – сменили.

Ни в коем случае нельзя делать «полностью настраиваемые» интерфейсы! Людей, незнакомых с компьютерами, они просто пугают! Их еще надо научить ими пользоваться!

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

Продолжаем разговор про общее. Уменьшите количество не значимых элементов до минимума или сделайте их почти незаметными. Будет лучше. Даже представить невозможно насколько! Яркий пример такого улучшения – исчезновение с просторов Интернета ярких анимированных разделителей в тексте. Вспомните, сколько их было еще 2-3 года назад. А теперь представьте: сидит девятиклассник, читает «Белую гвардию» в электронном виде. Весь захвачен переживаниями и душевными терзаниями Турбиных, а тут, после очередного нажатия на клавишу PgDown, на пол-экрана нечто яркое и мигающее! Б-р-р-р. Ужас!

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

Строгое соблюдение иерархии объектов в рамках интерфейса - один из элементов, который поможет людям меньше думать над интерфейсом. Обратите внимание на себя. Как вы определяете, что «это название главы в книге»? Наверное, по его отстраненности от основного текста и увеличенному шрифту. Вот это и есть соблюдение иерархии! Заголовок большой, подзаголовок поменьше, и вы понимаете, что большой - это название романа, поменьше – название главы.

В частном

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

Левый верхний угол первым попадает в поле зрения. Что мы говорим человеку, когда с ним встречаемся впервые? Правильно, говорим «здравствуйте!» и сообщаем цель визита. Следовательно, в левом верхнем углу должен быть расположен логотип (вместо здравствуйте), или верхний уровень иерархии элементов интерфейса (вместо цели визита). Также там может располагаться актуальная на текущий момент информация (например, время, оставшееся для прохождения теста, или личные данные тестируемого).

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

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

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

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

Что же у нас получается в итоге? Определились некоторые общие законы, по которым необходимо строить интерфейсы образовательных программных продуктов, определились некоторые законы отображения и считывания со средств отображения информации, которые необходимо учитывать при построении интерфейса. Не так уж и мало. В следующий раз будет интереснее и ближе к практике. А пока обдумывайте, спорьте, применяйте. До встречи!

Последние комментарии

    Комментариев не найдено, вы можете оставить первый комментарий!

Оставить комментарий

Ваше имя:

Почта:

Комментарий:

© 2000-2013 Academy.kiev.ua. Все права на любые материалы, опубликованные на сайте, защищены в соответствии с украинским и международным законодательством об авторском праве и смежных правах.