Build the navigation model and evaluate (Select the application structure) Design the screens

Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet

Usability GUI

Käyttöliittymät / GUI 1

windowsBuild the navigation model and evaluate(Select the application structure)Design the screens

Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the layoutCreate the fields, labels and other controlsAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol language, exits, and feedback

Build the dialog boxes accordinglyBuild the helpsEvaluate

ViewsWindows structuresWindows typesTitlesModes


Usability GUI


windowsApplication structures, (Arlov,

1997)

Multiwindow interfaces:

consist of many main windows. A main window may launch dialog boxes, usually modal. Each nonmodal window may have its own pull-down menu.


Usability GUI


windows..application structures Multidocument interfaces

(MDI):

one main window that displays one menu. Close or minimising of the main window will close also the child windows of that main windows. If you need to control somehow the dialog, the MDI or if the user uses many application at the same time, or if the child windows have very different menus, a MDI is not the solution. But if your application is built around documents, it is good.


Usability GUI


windows..application structures

Multipane interfaces:

has a single main window divided into smaller panes, like Netscape mail. In it, some of the panes boss the others around for instance so that the selection it effects to what is hown in the othes and so on. Good one, if you know exactly which windows must be open at the same time.


Usability GUI


windows..application structures

Multiscreen interfaces:

in this alternative, you design the program to take care of all responsibility for changing the display. Old character-based applications was of this type.

This is not a real multiscreen window, buta wizard. The logic of multiscreen interface is however thesame as in typical multiscreen windows: a new window doesnot open until the old is put away. Windows are modal.


Usability GUI


windowsA tiny window dictionary

• Main window: User can minimise it. May have own menus. Typically launches other windows.

• Child window: Always launched from a main window (or other parent window)

• Dialog box asks response from a user. In Windows Guide: any form window.

• Modal window / Modeless (or nonmodal) window: window that insists response by locking other part of a system/ Windows that asks for response, but permits the work go on in other windows


Usability GUI


windows… a tiny window dictionary

• Home window: usually a main window, which starts a task and where a user comes a again in the end of a task

• Primary window, secondary window: technical names for a main or object window, child or additional window.

• Object window, Search window, Feedback box, windows for additional information: Semantic or logical names that I like to use.s


Usability GUI


windowsWindowsand titles

Primary window

Secondary Window

”Object window”

Dialog box

Titles:

The name of object maybe also the name of instance(Customer, book)

What happens(selection of customer)

Identification of the object

Whenever possible, name in the title bar should match the name of the menu option or bush button


Usability GUI


windowsDialog boxes

• Transactional gathering the details heeded to complete a command for instance, which book to open

• tools like numbering the book, property boxes etc.

• messages delivering messages and providing feedback


Usability GUI


windowsOne well-working structure

A spider or a star:

A home window

An additional window




Design dialogs to yield closure. Sequences of actions should be organised into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives operators the satisfaction of accomplishment, a sense of relief, the signalto drop contingency plans and options from their minds, and an indication that the way isclear to prepare for the next group of actions.


Usability GUI


windowsExample: An object window with additional windows

A borrower His loans, orders and unpaid bills


Usability GUI


windowsModal and modeless dialog boxes

Modeless Modal

(Modaalinen, mooditon)


Usability GUI


windowsModes

EJECTSTOP

VCR: STOP mode/Play mode

Photoshop draw with brush mode

Use modes only when needed

Insert/replacemodes in word processor

In phones: call mode

(Toimintatilat)


Usability GUI


windows…modes• Use modes consistently and do not initiate

modes unexpectedly. Do not trap the user in a required field.

• Make it clear how to escape • Make the user very clear that he has entered

a mode. Offer very visible feedback, colour or changed cursor

Change Change

EnterEnter

SearchSearch SearchSearch

EnterEnter

Build the navigation model and evaluate (Select the application structure) Design the screens

Documents

Transcript of Build the navigation model and evaluate (Select the application structure) Design the screens