Текст книги "Тайна отличного интерфейса вашего сайта"

Илья Мельников, Лариса Бялык
Тайна отличного интерфейса вашего сайта
Суперменеджер в Интернете за 30 минут

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

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

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

Ниже подробно рассмотрен процесс разработки пользовательского интерфейса.

Этап 1. Разработка эффективных форм

Согласно определения, формы – это строительные блоки интерфейса пользователя. При этом хороший дизайн форм будет включать в себя нечто большее, нежели просто добавление элементов управления и программирование процедур обработки событий. Для того, чтобы создать действительно хорошо спроектированную форму, нужно понять ее главное назначение, способ и время использования; а также связи с другими элементами программы. В создании приложения нужно учитывать тот факт, что вам придется создавать несколько форм, каждая из которых будет отображаться по мере необходимости. Все будет зависеть от того, какую задачу вы закладываете при создании. Так, одни пользователи стараются широко использовать многозадачность Windows, в то время как другие предпочитают работать только с одним приложением. При этом необходимо помнить об этом во время разработки интерфейса пользователя (UI), чтобы максимально реализовать все возможности Windows. Это позволит вашим пользователям с любыми навыками работы эффективно применять созданное вами приложение.

Этап 2. Проектирование форм ввода данных

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

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

2. Все элементы должны быть расположены так, чтобы они были согласованы с задачами пользователя. Вы не должны заставлять пользователя перепрыгивать из раздела в раздел. Тем более, что при вводе информации это вовсе и не обязательно.

3. Избавьте своего пользователя от выполнения лишней работы. Так, если информация, которая будет содержаться в полях со 2-го по 10-е, необходима только тогда, когда первое поле имеет определенное значение – потому специалисты и не рекомендуют «заставлять» пользователя заполнять все поля подряд. В тоже время не стоит определять работу формы в зависимости от содержимого отдельных полей; в противном случае работа пользователя будет снижена.

4. Специалисты рекомендуют использовать заметную, но ненавязчивую обратную связь с пользователем. В качестве примера можно использовать работу редактора программного кода Visual Basic, который проверяет правильное написание переменных и констант.

5. Рекомендация специалистов: выполнить добавление и редактирование записей в одной и той же форме. Это позволит пользователю не осваивать сразу несколько методов доступа к одним и тем данным.

Этап 3. Работа с несколькими формами

В случае, если интерфейс пользователя содержит несколько форм, то вам предстоит выбрать вид интерфейса, который будет использоваться. Он бывает однодокументный, обозначаемый SDI, или многодокументный – MDI. Так, в SDI-приложениях все окна форм должны появляться совершенно независимо друг от друга. При этом не имеет значения какой тип интерфейса (SDI или MDI) был выбран, так как взаимодействие пользователя с формами будет происходить одинаково, в результате обработки событий, которые будут поступать от элементов управления формы. Поэтому, если в вашем приложении будет предусмотрено несколько форм, программу необходимо написать таким образом, чтобы у пользователей не было возможности нарушить предписанный ход ее выполнения. Так, например, пользователь не должен иметь возможности вывести форму, для которой еще не была приготовлена информация.

Этап 4. Эффективные меню

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

1. Всегда следуйте стандартным соглашениям о расположении пунктов меню, которые были приняты в Windows File, Edit, View и т. д.

2. Все пункты меню должны быть сгруппированы в логическом порядке и по содержанию.

3. Используйте разделительные линии в процессе группировки пунктов в раскрывающихся меню.

4. Избегайте создания избыточных меню.

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

6. Не используйте символ троеточия при обозначении пунктов меню, которые активизируют диалоговые окна.

7. Применяйте клавиатурные эквиваленты команд и «горячие» клавиши.

8. На панели инструментов следует помещать часто используемые команды меню.

Этап 5. Ощущение скорости

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

Этап 6. Информирование пользователя о ходе процесса

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

Этап 7. Выводы по проектированию пользовательского интерфейса

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

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

Отличие 1. Стандартные элементы интерфейса

В процессе работы постарайтесь не использовать в своей программе нестандартные элементы интерфейса. Например, создавая командные кнопки не только с текстом, но и с рисунком, или комбинированные списки со сложной рамкой. И хотя их можно в изобилии найти в on-line-коллекциях VCL и ActiveX-компонентов, профессионалы стараются не пользоваться ими. Их девиз – «чем стандартнее компоненты, тем лучше и профессиональнее вид».

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

Отличие 2. Небольшая палитра инструментов

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

Отличие 3. Одинаковое расстояние между элементами управления

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

Отличие 4. TabOrder, или «правильный» порядок

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

Профессионалы рекомендуют по окончании проектирования формы обязательно проверять функцию TabOrder. В случае необходимости откорректировать ее; многие начинающие программисты довольно часто просто забывают сделать это.

Отличия 5. Выбор шрифтов

Специалисты в данном случае рекомендуют не выбирать никаких шрифтов. Их следует оставить такими, какими они определены по умолчанию. Для этого следует указать в свойстве Шрифт (Font) соответствующие глобальные переменные Windows: WindowText, MenuText и т. д. В результате смена пользователем стандартных шрифтов Windows по своему вкусу с помощью «Панели управления» отразится и на внешнем виде вашей программы. Кроме того, пользователь, запустив ваш продукт, сразу окажется в знакомом ему окружении. Некоторые специалисты затрагивают вопрос, относящийся к начертанию шрифтов. Так, современные системы программирования допускают указание для свойства Шрифт, помимо обычного (normal) начертания, имеет еще и полужирное (bold), курсивное (italic) и подчеркнутое (underlined), а также их сочетания. В результате многие начинающие авторы пользуются предоставленными возможностями и применяют различные комбинации шрифтовых начертании. Однако на самом деле в интерфейсах Windows-программ стандартом принято использовать всего два начертания: нормальное и полужирное. Причем последнее только для выделения какой-либо важной информации, заголовков и т. п. В то же время как курсив или подчеркивание применяется только для написания гиперссылок. Поэтому применение настроек, отличных от стандартных, может запутать пользователя.

Отличие 6. Масштабирование шрифтов

Профессионалы всегда берут в расчет тот факт, что на разных компьютерах могут быть установлены различные по масштабу шрифты. Так, у одних пользователей может быть установлен крупный шрифт, а у других – более мелкий. В результате текстовые подписи, расположенные на кнопках, панелях и т. п., которые программист поместил в своей программе, при запуске продукта пользователями могут увеличиваться в размерах. Конечно, многие элементы управления автоматически подстраивают свои размеры согласно содержимому, однако есть и такие (например, «Строка состояния» (SialusBar)), которые таким свойством не обладают, и в результате текст в этом случае может просто обрезаться.

Отличие 7. Выбор цветов

Профессионалы рекомендуют поступать точно также, как и в случае со шрифтами: не делать никакого выбора. А при проектировании пользовательского интерфейса нужно вообще забыть о свойстве «Цвет» (Color) элементов управления. Лучше оставить стандартные цвета, настроенные по умолчанию. Это позволит сделать так, чтобы программа выглядела таким образом, как этого хочет ее пользователь. А вообще будет лучше, если предусмотреть в программе возможность изменения цветовой гаммы различных частей интерфейса. Это связано с тем, что многие пользователи любят настраивать цвета «под себя». А так как подстроиться под каждого у вас вряд ли получится, то вариант со стандартным системным цветом будет лучшим выходом из положения.

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

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

Отличие 8. Альтернативное управление

Занимаясь разработкой и созданием программы, вы должны помнить о том, что ваша программа должна одинаково хорошо управляться как с помощью мыши, так и клавиатуры. Специалисты рекомендуют не допускать таких функций, которые можно выполнить только мышью. Исключение – традиционно «мышиные» операции (рисование в графических редакторах). Часто используемые функции необходимо снабдить так называемыми «горячими клавишами», позволяющими произвести их быстрый вызов. При этом, выбирая комбинации клавиш, не стоит забывать о возможных привычках и навыках пользователей. Профессионалы рекомендуют остановиться только на тех комбинациях, которые обычно используются в программах такого рода. Например, если вы разрабатываете файловый менеджер в стиле «Проводника Windows», то лучше создавать такие комбинации, которые будут традиционными для Windows-программ. Если же вы ориентируетесь на «Norton Commander», то лучше всего для функции обновления списка файлов присвоить «горячую клавишу» «Ctrl»+«R», а не «F5», как у Windows. Некоторые специалисты советуют использовать для функций своей программы две схемы «горячих клавиш», чтобы получилось удовлетворить потребности приверженцев обоих стилей работы с файлами.

При построении пользовательских интерфейсов необходимо знать некоторые основы, без которых просто никуда. Профессионалы, говоря о научных основах проектирования пользовательских интерфейсов, в первую очередь упоминают термин HCI. HCI – это аббревиатура английского термина Human-Computer Interaction, обозначающего «взаимодействие человека и компьютера». Из названия следует, что составными частями HCI являются человек (пользователь) и компьютер, их взаимодействие.

Создавая пользовательский интерфейс (англ. user interface, UI), помните о том, что вы создаете своеобразный коммуникационный канал, по средствам которого осуществляется взаимодействие пользователя и компьютера. Причем пользовательский интерфейс будет считаться удобным, если пользователь не уделяет ему много внимания, почти не замечает его. Ваша задача – сделать так, чтобы пользователь просто работал, а не размышлял, какую кнопку нажать или где щелкнуть мышью. Профессионалы называют такой интерфейс прозрачным, так как в данном случае пользователь как бы смотрит сквозь него на свою работу.

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

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

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

2. Пользователь не должен ощущать себя дураком, работая с вашей программой.

3. Ваша программа обязана работать таким образом, чтобы пользователь не считал свой компьютер «тормозом».

Как видите, такие формулировки верно отражают естественный ход вещей; но рассмотрим каждый принцип более подробно.

Принцип 1. Упоминавшаяся ранее прозрачность интерфейса. Созданный вами пользовательский интерфейс должен быть легким для освоения. Он не должен создавать для пользователя преграду, которую он должен будет преодолеть, чтобы приступить к работе.

Принцип 2. Его чаще всего нарушают те авторы программ, которые относятся к своим пользователям или как к толпе бестолковых болванов, или как к беспомощным и нерадивым созданиям, которые не способны самостоятельно разобраться в самых элементарных ситуациях. Интересно отметить, что до сих пор сохраняется традиционное, слегка высокомерное отношение программистов к простым пользователям, связанное с тем, что в восьмидесятых и начале девяностых годов XX века обычные персональные компьютеры еще не имели программных и аппаратных средств, доступных пользователям для построения привлекательных графических интерфейсов и работы с ними. И самой распространенной операционной системой в те времена была MS DOS, которая основывалась на интерфейсе командной строки. А потому становится понятно, что эффективно работать с персональным компьютером могли люди только с довольно серьезной подготовкой. Да и самих компьютеров было не так много. Но времена меняются – начиная работать с компьютером, пользователь получает начальную подготовку, так как интерфейсы компьютерных программ (и в первую очередь операционной системы Windows) становятся все проще и доступнее для понимания людей.

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

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

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

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