* При перепечатке материалов ссылка на www.SeoLiga.ru обязательна!
Принципы дизайна интерфейса
7 февраля 2009
Дизайн пользовательского интерфейса во многом определяет впечатление от рабо- ты с приложением. От него зависит, примут ли пользователи приложение и как быстро они освоят его. Основных принципов дизайна немного:
• простота; • оптимальное размещение элементов управления; • логика и последовательность; • эстетика внешнего вида. Простота Простота пользовательского интерфейса — это одна из важнейших его характерис- тик. Освоение и использование программы с запутанным или чересчур сложным интерфейсом весьма затруднительно и требует много времени. Пользовательский интерфейс должен помогать быстро исполнять любые операции, необходимые для взаимодействия с программой, предоставляя ровно столько возможностей, сколь- ко требуется на данном этапе работы. Конструировать интерфейс следует с учетом логики работы приложении. Эле- менты управления, отображающие логически связанные данные, следует размещать на формах группами. То же касается списков, полей и флажков для выбора и уста- новки предопределенных параметров. Корректная передача фокуса позволяет быс- тро перемещаться между элементами управления, составляющими группу, нажи- мая клавишу Tab. При разработке интерфейса часто допускают ошибку, пытаясь точно воспроиз- вести объект из реального мира. Например, при конструировании формы для заме- ны бумажного бланка возникает естественное желание воспроизвести этот бланк «один к одному». Иногда такой подход оправдан, но чаще он лишь ограничивает возможности приложения, не принося реальной выгоды. В любом случае следует хорошо обдумать ситуацию и попытаться расширить функциональность приложе- ния за счет дополнительных возможностей, которые предоставляет компьютер, Применение значений по умолчанию также позволяет упростить пользователь- ский интерфейс. Если большинство клиентов выбирают значение «Вашингтон» для поля «Штат», имеет смысл назначить «Вашингтон» значением по умолчанию для этого поля. Однако следует позаботиться о том, чтобы при необходимости пользо- ватель смог без труда указать другое значение. Пользовательский интерфейс рекомендуется создавать на основе данных опро- са целевой аудитории. Узнайте, как пользователи хотят работать с приложением, и постарайтесь спроектировать интерфейс так, чтобы упростить решение наиболее типовых задач. Результаты опросов также пригодятся для совершенствования гото- вых приложений. Композиция формы При размещении элементов управления следует учитывать, насколько они важны и как часто они требуются. Предположим, есть форма для ввода обязательной и нео- бязательной информацию. Ясно, что элементы управления для ввода обязательной информации важнее и поэтому должны выделяться среди остальных элементов формы. Как правило, предполагают, что пользовательский интерфейс просматри- вают слева направо и сверху вниз, поэтому считается, что наиболее важные и вос- требованные элементы управления лучше размещать в верхней части формы. Эле- менты управления, с которыми пользователь работает после завершения основных действий на форме (такие, как кнопка Submit), логично разместить в нижней части формы. Следующий вопрос — согласованность отображаемой информации. Элементы управления, показывающие логически связанные данные, следует группировать. Допустим, вы создаете форму для публикации сведений о клиенте, товаре или слу- жашем. Для ее создания можно сгруппировать необходимые элементы управления средствами элемента Tab, чтобы пользователь легко перемешался между ними. Наконец, позаботьтесь об эстетике размещения элементов управления на фор- ме. Избегайте перегруженных форм, содержащих больше данных, чем можно усво- ить с первого взгляда. Старайтесь оставлять достаточно свободного места между элементами управления — так вы придадите форме привлекательный вид и облег- чите ее чтение. Согласованность Облик интерфейса должен гармонировать с содержанием приложения, в против- ном случае интерфейс раздражает взгляд, а приложение кажется нелогичным и де- зорганизованным, что затрудняет его освоение. Согласованность следует закладывать в проекте. Для этого необходимо еще до разработки создать стройную и логичную схему внешнего вида приложения. Опре- деляя облик интерфейса, продумайте цвета, шрифты, размеры и тип используемых элементов управления. Не поддавайтесь искушению сделать интерфейс броским — применяйте лишь то, что требуется для решения поставленной задачи. Перегрузка элементами управления и множество броских, но неуместных эффектов лишь от- влекает пользователя и в конечном счете снижает производительность его труда. Все формы приложения необходимо создавать по единой схеме. Позаботьтесь о том, чтобы пользователю не пришлось заново привыкать к размещению элементов интерфейса каждый раз, когда он открывает новую форму. Эстетика внешнего вида По возможности сделайте внешний вид приложения привлекательным и приятным, однако ни в коем случае не приносите ясность и простоту интерфейса в жертву при- влекательности. Достаточно, чтобы интерфейс не был отталкивающим. Выбор цветов Грамотное использование цветов — один из действенных способов улучшить вне- шний вид интерфейса, однако берегитесь излишеств. Яркие кричащие цвета при- влекают одних пользователей, но вызывают дискомфорт у других, поэтому в каче- стве фона лучше выбирать приглушенные тона. При разработке цветовой схемы приложения также важно ориентироваться на целевую аудиторию. Если вы выполняете заказ компании, стоит воспользоваться ее фирменными цветами, а если программа предназначена для многонациональ- ной аудитории, учитывайте смысловую нагрузку тех или иных цветов в различных культурах. Стремитесь к последовательности в оформлении интерфейса, но в ра- зумных пределах. Подумайте, будут ли выбранные цвета удобными для пользователей, в том числе для людей с дефектами зрения. Например, голубой цвет на черном фоне читается очень плохо. Не забывайте также о цветовой слепоте: некоторые люди не ра:шича- ют красный и зеленый цвета, поэтому они не увидят красный текст на зеленом фоне. Сделайте важные элементы приложения контрастными, но не полагайтесь при вы- делении информации исключительно на цвет. Подбор шрифта Основным критерием выбора шрифта является его удобство, причем схема приме- нения шрифтов должна быть единой для всего приложения. Избегайте трудно чи- таемых и вычурных гарнитур, старайтесь применять простые, легко читаемые шрифты вроде Palatine или Times New Roman. Шрифты, имитирующие рукопис- ный текст, а также декоративные допускаются для визуального выделения, напри- мер, заголовков страниц, но только там, где это уместно. Никогда не оформляйте такими шрифтами важный текст. Изображения и значки Изображения и значки делают интерфейс более привлекательным, но при этом важ- но тщательно продумать их применение. Излишние и отвлекающие изображения затрудняют работу с приложением. Хотя значки успешно применяются во многих приложениях как альтернативный способ представления информации, это не от- меняет необходимость их тщательного выбора с учетом потребностей конечного пользователя. Например, значок в виде дорожного знака «stop», запрещающего дви- жение, подходит для предупреждения пользователя о возможных нежелательных последствиях их действий. Однако дорожные знаки одинаковы не во всех странах, и вполне вероятно, что для некоторых ваших пользователей такой значок окажется бессмысленным. Изучайте целевую аудиторию и выбирайте значки и другие графи- ческие элементы, исходя из ее особенностей. Лучше для значков применять простые изображения, которые легко передаются квадратом размеров 16x16 пикселов. Более сложные значки сильно искажаются при просмотре с низким разрешением. Фигурные и прозрачные элементы управления .NET Framework предоставляет инструменты для создания элементов управления разной прозрачности и формы, отличной от традиционного прямоугольника. Хотя это чрезвычайно мощное средство создания визуальных эффектов для интерфейса, пользуйтесь им в меру. Например, текстовое поле в форме пончика выглядит за- бавно и оригинально, но едва ли оно повысит эффективность приложения или сде- лает его удобнее. Применяя подобные эффекты, всегда помните об интересах ко- нечного пользователя. Разнообразные элементы управления и формы (например круглые кнопки) делают пользовательский интерфейс привлекательным и не вы- биваются из стиля приложения, только когда применены со вкусом. Полупрозрач- ные формы хороши тем, что позволяют держать в поле зрения форму, расположен- ную на заднем плане. Эстетика повышает удобство работы с приложением.
