Руководящие принципы по разработке интерфейса на макро- и микроуровне

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

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

Разработка интерфейса на макроуровне представляет собой шаблон пользовательского интерфейса — продукт собирается весь целиком и его концепция становится ясна пользователям по мере взаимодействия с ним.

Программа " Tidy Start Menu"

 

Со временем у вас накопилось много программ в меню " Пуск", и каждый раз для запуска нужной программы вам нужно тратить время на поиски? Программа " 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 отклонений. Это было особенно удивительно, поскольку у участников теста интерес к удобству применения интерфейса был выше среднего. Разработка интерфейса — больше искусство, чем наука. Конкретные примеры чрезвычайно полезны, поскольку демонстрируют, как надо следовать руководящим принципам по разработке. Чтобы обучить разработчиков использованию принципов, требуются продолжительные тренинги. Алан Зейчик удачно подвел итог по этой теме: " Мораль такова: при разработке программных инструментов и потребительских продуктов стоит следовать существующим руководящим принципам по пользовательскому интерфейсу. Следуйте им, даже если вам кажется, что они имеют дефекты. Возможно, ваш проект более высокого качества, но спросите себя: поможет ли эта высочайшего качества схема, отображающая функциональные клавиши, или усовершенствованная метафора меню моему приложению стать неотъемлемой частью рабочей среды пользователя? Или это станет постоянным источником раздражения, из-за которого мой совершенный продукт в итоге будет пылиться на полке? ".

Литература

 

1. Apple Computer, Inc. 1992. Macintosh Human Interface Guidelines. Reading. MA: Addison-Wesley.

2. Hansen, W. 1971. User engineering principles for interactive systems. AFIPS Conference Proceedings 39. AFIPS Press, pp. 523-532.

3. Heckel, Paul. 1984. The Elements of Friendly Software Design. New York: Warner Books.

4. IBM Corporation. 1992. Object-Oriented Interface Design: IBM Common User Access Cuidelines. New York: QUE.

5. Johnson, Jeff, Teresa Roberts, William Verplank, David Smith, Charles Irby, Marian Beard, and Kevin Mackey. 1989. The Xerox Star: A Retrospective. IEEE Computer 22(9): pp. 11-29.

6. Mayhew, Deborah. 1992. Principles and Guidelines in Software User Interface Design. Englewood Cliffs, NJ: Prentice-Hall.

7. Microsoft Corporation. 1995. The Windows Interface Cuidelines for Software Design. Redmond, WA: Microsoft Press.

8. Nielsen, Jakob. 1990. Traditional dialogue design applied to modern user interfaces. Communication of the ACM 33(10), pp. 109-118.

9. Open Software Foundation. 1993. OSF/Motif Style Guide, Revision 1.2. Englewood Cliffs, Prentice-Hall.

10. Rubenstein, R. and H. Hersch. 1984. The Human Factor: Designing Computer System for People, Newton, MA: Digital Press.

11. Shneiderman, Ben. 1992. Designing the User Interface: Strategies for Effective Human-Computer Interaction. Reading. MA: Addison-Wesley.

12. Bellcore. 1996. Design Guide for Multiplatform Graphical User Interfaces. LP-R13, Piscataway, NJ: Bellcore (http: //www.bellcore.com).

13. Gould, Jonh D. 1988. How to design usable systems. In Helander, M. (Ed.), Handbook of Human-Computer Interaction. Amsterdam, Holland: Elsevier Science Publishers.

14. Grudin, Jonathan. 1989. The case against user interface consistency. Communications of the ACM 32(10).

15. Tetzlaff, Linda and David R. Schwartz. 1991. The use of guidelines in interface design. Proceeding of ACM CHI’91, New Orleans, LA.

16. Smith, Sidney and Jane Mosier. 1986. Guidelines for Designing User Interface Software. Report ESD-TR-86-278 MTR-10090. Bedford, MA: MITRE Corporation.

⇐ Предыдущая12

Поделиться: