Веб-дизайн

Дизайн интерфейса

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

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

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

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

Две основные технологии, HTML и Flash, применяемые для реализации интерфейсов во Всемирной паутине, имеют ес­тественные технические ограничения, сужающие круг до­ступных элементов интерфейса. Это и хорошо, и плохо.

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

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

Флажки позволяют пользователям выбирать опции, не за­висящие друг от друга.

Q Флажки независимы, поэтому ^ они могут быть организованы в группы

Или располагаться отдельно

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

С Переключатели О организованы в группы О и служат для выбора взаимоисключающих О опций

Текстовые поля позволяют пользователям (вы не повери­те!) вводить текст.

Текстовые поля позволяют вводить текст

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

Раскрывающиеся списки работают аналогично переключателям

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

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

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

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

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

Упаковка подарка І

У упаковка подарка блины пони

Дополнительные возможности:

3 упаковка подарка Q блины ^ пони

Раскры вающиеся списки могут затруднить действия пользовате­лей, скрывая важные варианты выбора (слева). Переключатели демонстрируют все доступные варианты, но занимают больше места в интерфейсе.

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

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