Основные принципы разработки графического пользовательского интерфейса

Основные принципы разработки графического пользовательского интерфейса

• Введение
• Правила проектирования пользовательского интерфейса
• Правило 1: дать контроль пользователю
• Правило 2: уменьшить нагрузку на пользователя
• Правило 3: сделать интерфейс совместимым
• Руководящие принципы
• Программа "Tidy Start Menu"
• Заключение
• Литература

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

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

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

Три принципа разработки пользовательского интерфейса формулируются так:

1)контроль пользователем интерфейса;

2)уменьшение загрузки памяти пользователя;

3)последовательность пользовательского интерфейса.

Со временем у вас накопилось много программ в меню "Пуск", и каждый раз для запуска нужной программы вам нужно тратить время на поиски? Программа "Tidy Start Menu" поможет вам навести порядок в меню и сделать работу комфортной!

Для этого программа предлагает разбить все программы из меню на категории. Так, например, программы, которые используются для работы в Интернет, можно объединить в группу "Интернет", а все игры поместить в категорию "Игры".

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

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

program Man;

uses

Forms,Dialogs,Controls,

Viewing in 'Viewing.pas' {look},

Setuping in 'Setuping.pas' {setup},

Editing in 'Editing.pas' {Edit},

ADOTableofset in 'ADOTableofset.pas' {TabSheetset};

{$R *.res}

begin

try

Application.Initialize;

Application.Title := 'Programs';

Application.CreateForm(Tlook, look);

Application.CreateForm(Tsetup, setup);

Application.CreateForm(TEdit, Edit);

Application.CreateForm(TTabSheetset, TabSheetset);

Application.Run;

except

if MessageDlg('The software is not installed! You wish to instal it?',

mtInformation,[mbYes, mbCancel],0) = mryes then

begin

Application.Initialize;

Application.CreateForm(Tsetup, setup);

Application.Run;

end;end;

end.

unit Viewing;

interface

uses

Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,

Dialogs, Menus, ComCtrls, ShellCtrls, ToolWin, ImgList;

const

WM_MYICONNOTIFY = WM_USER + 123;

type

Tlook = class(TForm)

PageControl1: TPageControl;

TabSheet1: TTabSheet;

TabSheet2: TTabSheet;

TabSheet3: TTabSheet;

TabSheet4: TTabSheet;

TabSheet5: TTabSheet;

ShellListView1: TShellListView;

ShellListView2: TShellListView;

ShellListView3: TShellListView;

ShellListView4: TShellListView;

ShellListView5: TShellListView;

PopupMenu1: TPopupMenu;

N1: TMenuItem;

N2: TMenuItem;

N3: TMenuItem;

N4: TMenuItem;

MainMenu1: TMainMenu;

Services1: TMenuItem;

oreinstall1: TMenuItem;

Edit1: TMenuItem;

Exit1: TMenuItem;

ToolBar1: TToolBar;

ImageList1: TImageList;

ToolButton1: TToolButton;

ToolButton2: TToolButton;

ToolButton3: TToolButton;

ToolButton4: TToolButton;

ToolButton5: TToolButton;

procedure FormCreate(Sender: TObject);

procedure FormDestroy(Sender: TObject);

procedure N1Click(Sender: TObject);

procedure N2Click(Sender: TObject);

procedure N4Click(Sender: TObject);

procedure FormActivate(Sender: TObject);

procedure oreinstall1Click(Sender: TObject);

procedure Exit1Click(Sender: TObject);

procedure Edit1Click(Sender: TObject);

private

ShownOnce: Boolean;

public

procedure WMICON(var msg: TMessage); message WM_MYICONNOTIFY;

procedure WMSYSCOMMAND(var msg: TMessage);message WM_SYSCOMMAND;

procedure CreateTrayIcon(n:Integer);

procedure DeleteTrayIcon(n:Integer);

procedure RestoreMainForm;

procedure HideMainForm;

end;

var

look: Tlook;

implementation

{$R *.dfm}

uses

ComObj, activex, ShellApi,

registry,StdCtrls,ADOTableofset, Setuping;

procedure Tlook.CreateTrayIcon(n:Integer);

var

nidata : TNotifyIconData;

begin

with nidata do

begin

cbSize := SizeOf(TNotifyIconData);

Wnd := Self.Handle;

uID := 1;

uFlags := NIF_ICON or NIF_MESSAGE or NIF_TIP;

uCallBackMessage := WM_MYICONNOTIFY;

hIcon := Application.Icon.Handle;

StrPCopy(szTip,Application.Title);

end;

Shell_NotifyIcon(NIM_ADD, @nidata);

end;

procedure Tlook.DeleteTrayIcon(n: Integer);

var nidata : TNotifyIconData;

begin

with nidata do

begin

cbSize := SizeOf(TNotifyIconData);

Wnd := Self.Handle;

uID := 1;

end;

Shell_NotifyIcon(NIM_DELETE, @nidata);

end;

procedure Tlook.FormCreate(Sender: TObject);

begin

ShownOnce:= False;

CreateTrayIcon(1);

end;

procedure Tlook.FormDestroy(Sender: TObject);

begin

DeleteTrayIcon(1);

end;

procedure Tlook.HideMainForm;

begin

Application.ShowMainForm := False;

ShowWindow(Application.Handle, SW_HIDE);

ShowWindow(Application.MainForm.Handle, SW_HIDE);

end;

procedure Tlook.N1Click(Sender: TObject);

begin

RestoreMainForm;

DeleteTrayIcon(1);

N1.Enabled := False;

N2.Enabled := True;

end;

procedure Tlook.N2Click(Sender: TObject);

begin

HideMainForm;

CreateTrayIcon(1);

n2.Enabled := False;

n1.Enabled := True;

end;

procedure Tlook.N4Click(Sender: TObject);

begin

close;

end;

procedure Tlook.RestoreMainForm;

var i,j : Integer;

begin

Application.ShowMainForm := True;

ShowWindow(Application.Handle, SW_RESTORE);

ShowWindow(Application.MainForm.Handle, SW_RESTORE);

if not ShownOnce then

begin

for I := 0 to Application.MainForm.ComponentCount -1 do

if Application.MainForm.Components[I] is TWinControl then

with Application.MainForm.Components[I] as TWinControl do

if Visible then

begin

ShowWindow(Handle, SW_SHOWDEFAULT);

for J := 0 to ComponentCount -1 do

if Components[J] is TWinControl then

ShowWindow((Components[J] as TWinControl).Handle, SW_SHOWDEFAULT);

end;

ShownOnce := True;

end;end;

procedure Tlook.WMICON(var msg: TMessage);

var P : TPoint;

begin

case msg.LParam of

WM_LBUTTONDOWN:

begin

GetCursorPos(p);

SetForegroundWindow(Application.MainForm.Handle);

PopupMenu1.Popup(P.X, P.Y);

end;

WM_LBUTTONDBLCLK : n1Click(Self);

end;

end;

procedure Tlook.WMSYSCOMMAND(var msg: TMessage);

begin

inherited;

if (Msg.wParam=SC_MINIMIZE) then n2Click(Self);

end;

procedure Tlook.FormActivate(Sender: TObject);

begin

n2.Click;

end;

procedure Tlook.oreinstall1Click(Sender: TObject);

begin

setup.Show;

end;

procedure Tlook.Exit1Click(Sender: TObject);

begin

close;

end;

procedure Tlook.Edit1Click(Sender: TObject);

begin

hide;

TabSheetset.Show;

end;

end.

Модуль Setup:

unit setuping;

interface

uses

Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,

Dialogs, ComCtrls, StdCtrls, ShlObj, ComObj, ActiveX, DB, ADODB;

type

Tsetup = class(TForm)

ProgressBar1: TProgressBar;

Button1: TButton;

ListBox1: TListBox;

Label1: TLabel;

Button2: TButton;

DataSource1: TDataSource;

ADOConnection1: TADOConnection;

ADOTable1: TADOTable;

ADOTable2: TADOTable;

ADOTable3: TADOTable;

ADOTable4: TADOTable;

ADOTable5: TADOTable;

ADOTable1N: TAutoIncField;

ADOTable1Run: TWideStringField;

ADOTable1Program: TWideStringField;

ADOTable2N: TAutoIncField;

ADOTable2Run: TWideStringField;

ADOTable2Program: TWideStringField;

ADOTable3N: TAutoIncField;

ADOTable3Run: TWideStringField;

ADOTable3Program: TWideStringField;

ADOTable4N: TAutoIncField;

ADOTable4Run: TWideStringField;

ADOTable4Program: TWideStringField;

ADOTable5N: TAutoIncField;

ADOTable5Run: TWideStringField;

ADOTable5Program: TWideStringField;

procedure Button1Click(Sender: TObject);

procedure Button2Click(Sender: TObject);

procedure FormClose(Sender: TObject; var Action: TCloseAction);

end;

var

setup: Tsetup;

f:Text;

implementation

{$R *.dfm}

procedure Tsetup.Button1Click(Sender: TObject);

var

i:integer;

s1,s2:string;

procedure LookDir(StartDir, Mask : String;List : TStrings);

var

SearchRec : TSearchRec;

s,k:string;

begin

if StartDir[Length(StartDir)] <> '\' then StartDir := StartDir + '\';

if FindFirst(StartDir+'*.*', faAnyFile, SearchRec) = 0 then

begin

repeat

if (SearchRec.Attr and faDirectory) <> faDirectory then

begin

if ExtractFileExt(StartDir+SearchRec.Name) = Mask then

begin

List.Add(StartDir+SearchRec.Name);

s:=StartDir+SearchRec.Name;

k:=SearchRec.Name;

writeln(f,s);

writeln(f,k);i:=i+1;

ProgressBar1.Position:=i;

end;end

else

if (SearchRec.Name <> '..') and (SearchRec.Name <> '.') then

begin

LookDir(StartDir + SearchRec.Name + '', Mask,list);

end;

until FindNext(SearchRec) <> 0;

FindClose(SearchRec);

end;end;

procedure jarlik(const PathObj, PathLink, Desc, Param: string);

var

IObject: IUnknown;

SLink: IShellLink;

PFile: IPersistFile;

begin

IObject := CreateComObject(CLSID_ShellLink);

SLink := IObject as IShellLink;

PFile := IObject as IPersistFile;

with SLink do

begin

SetArguments(PChar(Param));

SetDescription(PChar(Desc));

SetPath(PChar(PathObj));

end;

PFile.Save(PWChar(WideString(PathLink)), FALSE);

end;

procedure setap;

begin

while not eof(f) do

begin i:=i+1;

ProgressBar1.Position:=i;

readln(f,s1);readln(f,s2);

ADOTable1.First;

ADOTable2.First;ADOTable3.First;

ADOTable4.First;ADOTable5.First;

while not ADOTable1.Eof do

begin

if s2=ADOTable1Run.AsString then

jarlik(s1,'C:\setup\Entertainments\'+ADOTable1Program.AsString+'.lnk','','')

ADOTable1.Next;

end;

while not ADOTable2.Eof do

begin

if s2=ADOTable2Run.AsString then

jarlik(s1,'C:\setup\Games\'+ADOTable2Program.AsString+'.lnk','','');

ADOTable2.Next;

end;

while not ADOTable3.Eof do

begin

if s2=ADOTable3Run.AsString then

jarlik(s1,'C:\setup\Internet\'+ADOTable3Program.AsString+'.lnk','','');

ADOTable3.Next;

end;

while not ADOTable4.Eof do

begin

if s2=ADOTable4Run.AsString then

jarlik(s1,'C:\setup\Office\'+ADOTable4Program.AsString+'.lnk','','');

ADOTable4.Next;

end;

while not ADOTable5.Eof do

begin

if s2=ADOTable5Run.AsString then

jarlik(s1,'C:\setup\Utilites\'+ADOTable5Program.AsString+'.lnk','','');

ADOTable5.Next;

end;end;end;

begin

ProgressBar1.Max:=5000;i:=0;

CreateDir('C:\setup');

CreateDir('C:\setup\Internet');

CreateDir('C:\setup\Entertainments');

CreateDir('C:\setup\Games');

CreateDir('C:\setup\Office');

CreateDir('C:\setup\Utilites');

assignfile(f,'REZ.txt');

rewrite(f);

LookDir('C:\Program Files', '.exe',ListBox1.Items);

reset(f);setap;

closefile(f);

ProgressBar1.Position:=ProgressBar1.Max;

Label1.Caption:='Installation is finished';

Button1.Visible:=False;

Button2.Visible:=true;

end;

procedure Tsetup.Button2Click(Sender: TObject);

begin

Close;

end;

procedure Tsetup.FormClose(Sender: TObject; var Action: TCloseAction);

begin

ADOTable1.Close;ADOTable2.Close;

ADOTable3.Close;ADOTable4.Close;

ADOTable5.Close;

end;

end.

unit ADOTableofset;

interface

uses

Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,

Dialogs, StdCtrls, ExtCtrls, DB, ADODB;

type

TTabSheetset = class(TForm)

RadioGroup1: TRadioGroup;

Button1: TButton;

DataSource1: TDataSource;

ADOTable1: TADOTable;

procedure Button1Click(Sender: TObject);

procedure FormClose(Sender: TObject; var Action: TCloseAction);

end;

var

TabSheetset: TTabSheetset;

implementation

{$R *.dfm}

uses Editing, Viewing, Setuping;

procedure TTabSheetset.Button1Click(Sender: TObject);

begin

edit.Show;

case TabSheetset.RadioGroup1.ItemIndex of

0:ADOTable1.TableName:='Entertainments';

1:ADOTable1.TableName:='Games';

2:ADOTable1.TableName:='Internet';

3:ADOTable1.TableName:='Office';

4:ADOTable1.TableName:='Utilites';

end;

ADOTable1.Open;

hide;

end;

procedure TTabSheetset.FormClose(Sender: TObject;

var Action: TCloseAction);

begin

ADOTable1.Close;

look.Show;

end;

end.

unit Editing;

interface

uses

Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,

Dialogs, Grids, DBGrids, DB, ADODB, Menus, ComCtrls, ToolWin, ExtCtrls,

DBCtrls;

type

TEdit = class(TForm)

DBGrid1: TDBGrid;

MainMenu1: TMainMenu;

abSheet1: TMenuItem;

choose1: TMenuItem;

N1: TMenuItem;

Close1: TMenuItem;

ToolBar1: TToolBar;

ToolButton1: TToolButton;

ToolButton2: TToolButton;

ToolButton5: TToolButton;

DBNavigator1: TDBNavigator;

procedure FormClose(Sender: TObject; var Action: TCloseAction);

procedure Close1Click(Sender: TObject);

procedure ToolButton1Click(Sender: TObject);

procedure choose1Click(Sender: TObject);

end;

var

Edit: TEdit;

implementation

uses Viewing, ADOTableofset;

{$R *.dfm}

procedure TEdit.FormClose(Sender: TObject; var Action: TCloseAction);

begin

TabSheetset.ADOTable1.Close;

look.Show;

end;

procedure TEdit.Close1Click(Sender: TObject);

begin

close;

end;

procedure TEdit.ToolButton1Click(Sender: TObject);

begin

TabSheetset.Show;close;

end;

procedure TEdit.choose1Click(Sender: TObject);

begin

TabSheetset.Show;close;

end;

end.

Заключение

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

Джонатан Грудин

Совместимость - одна из основных задач разработки пользовательского интерфейса. Совместимость очень сложно идентифицировать, определить и внедрить. Кроме того, она может и отвлекать от основных целей. Грудин делает предположение о том, что "когда совместимость пользовательского интерфейса становится первоочередной задачей, то это уводит наше внимание в сторону от главного -- пользователей и их работы" [14].

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

Исследователи занимались изучением того, как разработчики используют руководящие принципы. Одно исследование было проведено в рамках подготовки компанией IBM (1992) руководства по пользовательскому интерфейсу и справочнику. Тецлав и Шварц предложили разработчикам построить соответствующие интерфейсы на базе руководящих принципов по общему пользовательскому интерфейсу. Они выяснили, что были упущены несколько важных идей и деталей. Разработчики отдавали предпочтение графическим иллюстрациям и примерам, а не тексту, рассказывающему о концепциях разработки. Кроме того, они хотели иметь возможность исследовать предлагаемые примеры интерактивным способом. Полученные разработки в большой степени были признаны совместимыми, однако имели место и расхождения в интерпретации руководящих принципов [15]. Разработка интерфейса во многом похожа на нашу жизнь -- на конкретный вопрос не всегда есть однозначный ответ.

Другое исследование Товтрап и Нильсен принесло аналогичные результаты [16]. Только 71% разработок соответствовал стандартам. Большая часть отличий была обусловлена влияниям опыта разработчиков по созданию нестандартных проектов. Представленный для оценки интерфейс имел в среднем от 4 до 12 отклонений. Это было особенно удивительно, поскольку у участников теста интерес к удобству применения интерфейса был выше среднего. Разработка интерфейса -- больше искусство, чем наука. Конкретные примеры чрезвычайно полезны, поскольку демонстрируют, как надо следовать руководящим принципам по разработке. Чтобы обучить разработчиков использованию принципов, требуются продолжительные тренинги. Алан Зейчик удачно подвел итог по этой теме: "Мораль такова: при разработке программных инструментов и потребительских продуктов стоит следовать существующим руководящим принципам по пользовательскому интерфейсу. Следуйте им, даже если вам кажется, что они имеют дефекты. Возможно, ваш проект более высокого качества, но спросите себя: поможет ли эта высочайшего качества схема, отображающая функциональные клавиши, или усовершенствованная метафора меню моему приложению стать неотъемлемой частью рабочей среды пользователя? Или это станет постоянным источником раздражения, из-за которого мой совершенный продукт в итоге будет пылиться на полке?".