irmeli sinkkonen tkl, tutkija irmeli.sinkkonen@hut.fi … · 2004. 5. 13. · responsibility for...
Post on 10-Oct-2020
1 Views
Preview:
TRANSCRIPT
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 1
GUI-developm entGUI-designIrmeli Sinkkonen
TkL, tutkija
irmeli.sinkkonen@hut.fi
irmeli.sinkkonen@adage.fi
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 2
GUI-developm entGUI types
Almost GUI
One-time GUI
Standard GUIGUIsApple Windows 3.1Windows 95 OS/2 Motif
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 3
GUI-developm entToday / Building GUIs
• (Select the applicationstructure)
• Build the navigation modeland evaluate
• Design the screens– Build the menus, evaluate– select the command
buttons– select the metaphors– select representations– create the fields, labels
and other controls– create the layout
– add the shortcuts andicons, evaluate
– check the colours,visibility, restrictions,conceptual model,mappings, symbollanguage, exits, andfeedback
• build the dialog boxesaccordingly
• build the helps• evaluate
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 4
GUI-developm entDesigning windows• A typical mistake doing the windows looking
database windows when it should look likethe tasks
• ask always:– why the user looks at this window?
– Can this window somehow make it easier todecide what to do…
• what they actually want is ...
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 5
GUI-developm entSummary• GUI- design is a creative process, with many
options
• Your design should reflect– the results of the interviews, task analysis
– existing conventions when applicable
– design guidelines when applicable
• Usability testing helps you decide which ofseveral options to pursue
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 6
GUI-developm ent(Select the application structure)Build the navigation model and evaluateDesign 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
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 7
GUI-developm entProductdevelopment
RequirementsRequirements
Initial designInitial design
Interactivedesign
andtesting
Interactivedesign
andtesting
Design the navigation model
Design the navigation model
Design the windows
Design the windows
TestTest
UseUse
User descriptions-identification and categorisationTask analysisContext analysisiUsability requirements
User descriptions-identification and categorisationTask analysisContext analysisiUsability requirements
PrototypesUnfinished parts ofthe productUser interfaces
PrototypesUnfinished parts ofthe productUser interfaces
Navigation maps(Interaction models etc.)
Navigation maps(Interaction models etc.)
Interviews, meetingsquestionaires,observationlogs, usability tests
Interviews, meetingsquestionaires,observationlogs, usability tests
Iteration,usability tests,walktroughs with use scenarios,heuristic walktroughscognitive walktroughguidelines, principleschecklists
Iteration,usability tests,walktroughs with use scenarios,heuristic walktroughscognitive walktroughguidelines, principleschecklists
usability tests(validating)
usability tests(validating)
interviewsquestionairesobservationlogs
interviewsquestionairesobservationlogs
Product+manuals
Product+manualsImplementing
and training
Implementing and training
Implementedproduct
Implementedproduct
Add the code here
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 8
GUI-developm ent2 important strategies
IterationTransforming
Analyse
Design Build
Evaluate
Scenarios
Mock-ups
Prototypes
Checking theusability
A product
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 9
GUI-developm entFrom scenarios (use cases)
to prototypes
Is it in loan?no
yes
Check the selves
Does he insist?
Change state of the book= seeking
Add the book of the seeking list of the customer
Result:...yes
Trigger:the borrower says that
he has returned a book that he seems
to have in loan
Check the book
Is it in loan?no
yes
Check the selves
Does he insist?
Change state of the book= seeking
Add the book of the seeking list of the customer
Result:...yes
1.1. Draw the flowcharts from the scenarios (Remember the PROBLEM SITUATIONS)
2. Search the (User’s)TASKobjects from the task-flows and scenarios
3. Search and describe objects, their functions, attributes, identifications, fathers and childs
Open Save Print Add new
edit
Borrower child or adult
customer of library, who has the card
name phonesaddress information in cardstreet address number postal address datum
I am in In me loansordersbooks in search
Identifies of task object
attributes of task object
action on task objects
containment relations among task objects
2, 3.
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 10
GUI-developm ent
s
4.
s
5.
Result:...yes
4.Build the navigation model Tell the use-scenarios, TEST THE MODEL AGAINST IT and MAKE CORRECTIONS
5. Transform the objects as GUI-objects, TEST!
…from scenarios (usecases) to prototypes
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 11
GUI-developm entObjects and user interface
Open Save Print Add new
edit
Borrower child or adult
customer of library, who has the card
name phonesaddress information in cardstreet address number postal address datum(Loans, orders, disappeared books) I am in In me
loansordersdisappeared books
Borrower
views
commands
identification
attributes
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 12
GUI-developm entLibrary system: navigationmap (partly)
Borrower
title (look only)
Borrowedbooks
Books in searchOrders
Fines
Guardian/ward
Borrower list or card number or
social security number
selectionselection
selection
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 13
GUI-developm ent Taking care of the usabilityIn step 4
Describe and test in details how the scenarios andtasks proceed using the new user interface.
Correct the (especially the critical / much used parts)tasks fluent
Those functions that must be easy, should also be checked here. (Check for instance all function names, are they comprehensable for novices
You can make a usability test using these charts!
s
4.
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 14
GUI-developm entAn exampleThe user searches for the customer,Alain Borrower, while mr. Borrower tells his problem: he has returned the book of which he has got a reminder
Mr Borrower ( in the customer object window) is found. The the user clicks“Loans” button on the screen to get to know his loans. There is the reminded book in loan list alright, but mr Borrower insists that he had returned the book 4 weeks ago...
…..
Search
BorrowerAlain Borrower
Loans
List of loansOK
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 15
GUI-developm entBuild 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
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 16
GUI-developm entApplication structures, (Arlov,1997)
Multiwindowinterfaces:
consist of many mainwindows. A main windowmay launch dialog boxes,usually modal. Eachnonmodal window mayhave its own pull-downmenu.
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 17
GUI-developm ent..applicationstructures Multidocument
interfaces (MDI):
one main window thatdisplays one menu. Closeor minimising of the mainwindow will close also thechild windows of that mainwindows. If you need tocontrol somehow the dialog,the MDI or if the user usesmany application at the sametime, or if the child windowshave very different menus, aMDI is not the solution. But ifyour application is builtaround documents, it is good.
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 18
GUI-developm ent..application structures
Multipane interfaces:
has a single main windowdivided into smaller panes,like Netscape mail. In it,some of the panes bossthe others around forinstance so that theselection it effects to whatis hown in the othes andso on. Good one, if you knowexactly which windows mustbe open at the same time.
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 19
GUI-developm ent..application structures
Multiscreen interfaces:
in this alternative, you designthe program to take care of allresponsibility for changing thedisplay. Old character-basedapplications 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.
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 20
GUI-developm entA tiny window dictionary
• Main window: User can minimise it. May have ownmenus. Typically launches other windows.
• Child window: Always launched from a main window(or other parent window)
• Dialog box asks response from a user. In WindowsGuide: any form window.
• Modal window / Modeless (or nonmodal) window:window that insists response by locking other part ofa system/ Windows that asks for response, butpermits the work go on in other windows
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 21
GUI-developm ent… a tiny window dictionary
• Home window: usually a main window, which startsa task and where a user comes a again in the end ofa task
• Primary window, secondary window: technicalnames for a main or object window, child oradditional window.
• Object window, Search window, Feedback box,windows for additional information: Semantic orlogical names that I like to use.s
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 22
GUI-developm entWindowsand 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
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 23
GUI-developm entDialog boxes
• Transactional gathering the details heeded tocomplete a command for instance, whichbook to open
• tools like numbering the book, property boxesetc.
• messages delivering messages and providingfeedback
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 24
GUI-developm entOne well-workingstructure
A spider or a star:
A home window
An additional window
An additional window
An additional 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.
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 25
GUI-developm entExample: An object windowwith additional windows
A borrower His loans, orders and unpaid bills
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 26
GUI-developm entModal and modeless dialogboxes
Modeless Modal
(Modaalinen, mooditon)
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 27
GUI-developm entModes
EJECTSTOP
VCR: STOP mode/Play mode
Photoshop draw with brush mode
Use modes only when needed
Insert/replacemodes in wordprocessor
In phones: callmode
(Toimintatilat)
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 28
GUI-developm ent…modes• Use modes consistently and do not initiate
modes unexpectedly. Do not trap the user ina required field.
• Make it clear how to escape
• Make the user very clear that he has entereda mode. Offer very visible feedback, colour orchanged cursor
Change Enter
Search Search
Enter
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 29
GUI-developm ent(Select the application structure)Build the navigation model and evaluateDesign the screens
Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the fields, labels and other controlsCreate the layoutAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol languageexits, and feedback
Build the dialog boxes accordinglyBuild the helpsEvaluate
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 30
GUI-developm ent Menus
Users should be able to see the conceptual model of the system from menus
The terminology is important !!!!!
Label-followingLabel-avoidance
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 31
GUI-developm entBuild the menus
Irmeli Sinkkonen, TKK, TAI-tutk imuslaitos/ Käytettävyys laborator io,
Usability GUI
Commands and subobjects tomenus
...
Do at first very rough menu, tune it laterput the names of subobjects (names, the users use)
and commands to menus,
Menus to first mockups (prototypes), evaluate!
Menu is a map, command buttons have best visibility andefficiency; tool buttons are shortcuts
Every command should be in the menu
Best for beginners
for experienced users
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 32
GUI-developm entMenus• A pull-down menu is a map,
A good map is complete
every function, feature and window should beaccessible via the menu bar
different places have different names
keep the menus stable, only disable (grayout) commands that do not work
group the commands semantically
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 33
GUI-developm entMenu selection Guidelines(Schneiderman 1998)
• Use task semantics to organise menus• prefer broad-shallow to narrow-deep• show position by graphics, numbers and titles• use items as titles for sub trees• group and sequence items meaningfully• use brief items, begin with keyword• use consistent grammar, layout, terminology• allow type ahead, jump ahead, or other shortcuts• enable jumps to previous and main menu• consider online help, novel selection mechanism, and
optimal response time, display rate screen size
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 34
GUI-developm ent..menu• Use instructions
identical to buttons,titles, other menus
• use consistentterminology
• ensure that items aredistinct from another
• transparency (wording)• keyword first
Size of type Set the type size
3 spaces ⌦Ruler
Menus are modalOnly one selection
Short, only one word
Maybe longer, 2 words
Header...
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 35
GUI-developm entMenus: ISO 9241-14/ grouping and order
• Conventional categories• if there is no order and groups that are easy to learn
(Logical order)• if it is not possible use some consistent grouping
(arbitrary groups) in groups g= ∂n where g is numberof groups and n is number of options in panel
• order:– Consistency– importance– conventional order– existing order
- order of use- frequency of use- alphabetical order
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 36
GUI-developm entSelect the command buttons
OKOK
CancelCancel
LoansLoans
Borrower
ID number:
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 37
GUI-developm entSelect the metaphora• In most GUI windows the metaphor is a form
• But there are other
possibilities
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 38
GUI-developm entSelect the representation
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 39
GUI-developm ent(Select the application structure)Build the navigation model and evaluateDesign the screens
Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the fields, labels and other controlsCreate the layoutAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol language, exits, and feedback
Build the dialog boxes accordinglyBuild the helpsEvaluate
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 40
GUI-developm entCreate the widgetsFieldsCombo-boxesListsDrop-down listsRadio-buttonsCheck-boxesCommand-buttonsTables and GridsSpin boxesSlidersTree views
Group boxesPanelsTabs
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 41
GUI-developm ent…or
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 42
GUI-developm entThe transformation of windows
Something Something
Tests between transformations
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 43
GUI-developm entA library customer
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 44
GUI-developm entAnd how much you can put...• How much information on a window?
– Early guidelines 25% density– Nasa 70% 5 sec to scan– 30% 3.4 sec to scan– but by improving labeling, grouping, using
indentation, task time reduced 31%– expert users prefer denser displays (up to 88-
90%), if data is familiar (traffic controllers,stock brokers etc.)
• If it is possible to see the grouping easily
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 45
GUI-developm entIf there is not enough room..?
• Try first grouping, ordering, then Childwindows or Tabs sometimes also Scrolling
• Leave empty space
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 46
GUI-developm entTask oriented or implementoriented (Arlov, 1998)
Pizza
Cheese: Mozzarella
Ham
Salami
Anchovie
Mushroom
Garlic
Visa-card
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 47
GUI-developm ent(Select the application structure)Build the navigation model and evaluateDesign the screens
Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the fields, labels and other controlsCreate the layoutAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol language, exits, and feedback
Build the dialog boxes accordinglyBuild the helpsEvaluate
Goal:
Effective VisualCommunication
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 48
GUI-developm entSelect the representations
Representation matters
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 49
GUI-developm entPlease, don’tSometimes designers invent something that they think is very sexy
Original: Saul Greenberg
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 50
GUI-developm ent…orJust unpleasant and difficult to interact
From Mullet and Sano
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 51
GUI-developm entSymbols and symbol language• Can work (depending on users skills) as:
– symbols
– signs
– signals
in reasoning how to act
to find proper rules
to control the automated acting
Note : Cultural Associations -Groups of people learn idioms red = danger, green = go
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 52
GUI-developm ent..writing symbol language
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 53
GUI-developm ent…symbol language
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 54
GUI-developm entLayout design in windows• Amount of data
– too little is notenough to múch istoo much
• Order– locig and serial– rhytmic, guiding the
eyes of the user– natural sequences
• Navigating (inside window)
• Control– from top left corner to
bottom right corner
• Aestetics– leave empty space
– balance, grouping
• What is the mostimportant
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 55
GUI-developm entScreen design elements (Mandel 1997)
5
1 3
Every line, every control, box piece of text,colour, and graphic on the screen impacts user not only singly, but also in combinationwith everything else on the screen T Mandel 1997
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 56
GUI-developm entVisual aestetics• balace
• regularity
• symmetry
• predictability
• serial
• economy
• grouping
• simplicity
In anything at all, perfection isfinally attained not when thereis no longer anything to add,but when there is no longeranythingto take away
- Antoine de Saint Exupery
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 57
GUI-developm entLayout
• Organization– contrast to bring out dominant elements
– grouping of elements by proximity
– show organizational structure
– alignment
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 58
GUI-developm entLayout
Two levelhierarchy:-indentation depth: M-letter
Semantic grouping to show relationshipsbetween screen elements
Logic of organisationalflow
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 59
GUI-developm entMapping: hierarchy and order in layout
Not like this
like this
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 60
GUI-developm entUse of grid
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 61
GUI-developm ent…use of grid
Ok No
Text 1:
Text 2:
Text 3:
Text 4:
Do not use vertical grids, they are toorestricting=> “ladders”
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 62
GUI-developm entExampleIBM's Aptiva Communication Center
No organisation,no order
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 63
GUI-developm entNavigating in window• Provide initial focus• direct attention to important, secondary, or
peripheral items as appropriate• assist in navigation through material
– Alignment to left– order of elements– grouping of elements– large initials– lines
• order should follow a user’s conceptual model ofsequences
• from top left corner to bottom right one
Form rivers
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 64
GUI-developm ent…navigating example
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 65
GUI-developm entA better layout
Label:
Label:
Label:
Label:
Label:
Label: Label:
Label:
Label: Label:
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 66
GUI-developm entBUT: the right navigation dependson the work
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 67
GUI-developm ent…BUT: ...(Layout design for efficiency)
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 68
GUI-developm entSemantic grouping
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 69
GUI-developm entX-test
Others: Squint-test
Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxx xxxxxx xxxxxx xxxxxx
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 70
GUI-developm entSmall differencies are difficult tonotice
hfhffgfgfghj
From:
To:
Subject:
ghjjhghjhghg
ghjjhghjhghg
Ghjjhghjhghgyiuyiuyiyuyiiu
Attachments 1 files
hhghg
khjkhjjjjh
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 71
GUI-developm entEmpty space
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 72
GUI-developm entExample
This field is difficult tonotice. If it is in “a wrongplace, it is more conspicuous
Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet
Usability GUI
Käyttöliittymät / GUI 73
GUI-developm entMeaningfulness(for a user!)
is an important prerequisiteof learning
top related