© ISO 2016 Ergonomics of human system interaction — Part 161 Guidance on visual user interface elements Ergonomie de l’interaction homme système — Partie 161 Éléments de l’interface utilisateur INTERN[.]
INTERNATIONAL STANDARD ISO 92 41 -1 61 First edition 01 6-02 -1 Ergonomics of human-system interaction — Part 61 : Guidance on visual user-interface elements Ergon om ie de l’in teraction h om m e-systèm e — Partie 61 : Élém en ts de l’in terface utilisateur Reference number ISO 92 41 -1 61 : 01 6(E) © ISO 01 ISO 92 41-161:2 016(E) COPYRIGHT PROTECTED DOCUMENT © ISO 2016, Published in Switzerland All rights reserved Unless otherwise speci fied, no part of this publication may be reproduced or utilized otherwise in any form or by any means, electronic or mechanical, including photocopying, or posting on the internet or an intranet, without prior written permission Permission can be requested from either ISO at the address below or ISO’s member body in the country of the requester ISO copyright office Ch de Blandonnet • CP 401 CH-1214 Vernier, Geneva, Switzerland Tel +41 22 749 01 11 Fax +41 22 749 09 47 copyright@iso.org www.iso.org ii © ISO 2016 – All rights reserved ISO 92 41-161:2 016(E) Contents Foreword Page Introduction Scope Normative references f Accessibility Relationship of input methods and visual user-interface elements States of visual user-interface elements Describing visual user-interface elements Visual user-interface elements 8.2 8.3 8.4 8.5 8.6 8.7 xi Terms and de initions 8.1 ix 1 4 5 Acco rd i o n 8.1 D e s cri p ti o n 8.1 C o m p o n e n ts 8.1 S tate s 8.1 Wh e n to u s e an acc o rd i o n 8.1 H o w to u s e an acco rd i o n An al o gu e fo rm e l e m e n t/ s l i d e r 8.2 D e s cri p ti o n 8.2 C o m p o n e n ts 8.2 S tate s 8.2 Wh e n to u s e an an al o gu e fo rm e l e m e n t 8.2 H o w to u s e an an al o gu e fo rm e l e m e n t C aro u s e l / C arro u s e l 8.3 D e s cri p ti o n 8.3 C o m p o n e n ts 8.3 S tate s 8.3 Wh e n to u s e a caro u s e l 8.3 H o w to u s e a caro u s e l C h e ck b o x/ ch e ck b u tto n D e s cri p ti o n C o m p o n e n ts S tate s 1 4 Wh e n to u s e a ch e ck b o x 1 H o w to u s e a ch e ck b o x 1 C o l l ap s i b l e co n tai n e r 8.5 D e s cri p ti o n 8.5 C o m p o n e n ts 8.5 S tate s 8.5 Wh e n to u s e a co l l ap s i b l e co n tai n e r 8.5 H o w to u s e a co l l ap s i b l e co n tai n e r C o l o u r p i cke r 8.6.1 D e s cri p ti o n 8.6.2 C o m p o n e n ts 8.6.3 S tate s 8.6.4 Wh e n to u s e a co l o u r p i cke r 8.6.5 H o w to u s e a co l o u r p i cke r C o m b i n ati o n b o x/co m b o b o x 8.7.1 D e s cri p ti o n 8.7.2 C o m p o n e n ts 8.7.3 S tate s 8.7.4 Wh e n to u s e a co m b i n ati o n b o x © I S O – Al l ri gh ts re s e rve d iii ISO 92 41-161:2 016(E) 8.7.5 8.8 8.9 8.1 8.1 8.12 8.13 H o w to u s e a co m b i n ati o n b o x C u rs o r 8.8.1 D e s cri p ti o n 8.8.2 C o m p o n e n ts 8.8.3 S tate s 8.8.4 Wh e n to u s e a cu rs o r 8.8.5 H o w to u s e a cu rs o r D ate p i cke r 8.9.1 D e s cri p ti o n 8.9.2 C o m p o n e n ts 8.9.3 S tate s 8.9.4 Wh e n to u s e a d ate p i cke r 8.9.5 H o w to u s e a d ate p i cke r D i al o gu e b o x 8.1 0.1 D e s cri p ti o n 8.1 0.2 C o m p o n e n ts 8.1 0.3 S tate s 8.1 0.4 Wh e n to u s e a d i al o gu e b o x 8.1 0.5 H o w to u s e a d i al o gu e b o x D ro p d o wn l i s t b o x 8.1 1 D e s cri p ti o n 8.1 C o m p o n e n ts 8.1 Wh e n to u s e a d ro p d o wn l i s t b o x 8.1 H o w to u s e a d ro p d o wn l i s t b o x Entry field/input field 8.1 D e s cri p ti o n 8.1 2 C o m p o n e n ts 8.1 S tate s 8.12.4 When to use an entry field 8.12.5 How to use an entry field Entry field with dialogue button 22 22 22 8.1 D e s cri p ti o n 2 8.1 C o m p o n e n ts 2 8.1 3 S tate s 2 8.13.4 When to use an entry field with dialogue button 8.13.5 How to use an entry field with dialogue button 8.1 8.1 8.1 8.1 iv 21 22 23 G e o grap h i cal m ap D e s cri p ti o n C o m p o n e n ts S tate s 4 Wh e n to u s e a ge o grap h i cal m ap H o w to u s e a ge o grap h i cal m ap G ro u p / gro u p b o x 8.1 D e s cri p ti o n 8.1 C o m p o n e n ts 8.1 S tate s 8.1 Wh e n to u s e a gro u p 8.1 5 H o w to u s e a gro u p H an d l e 8.1 6.1 D e s cri p ti o n 8.1 6.2 C o m p o n e n ts 8.1 6.3 S tate s 8.1 6.4 Wh e n to u s e a h an d l e 8.1 6.5 H o w to u s e a h an d l e H i e rarch i cal l i s t/ tre e vi e w/ tre e l i s ts 8.1 7.1 D e s cri p ti o n 8.1 7.2 C o m p o n e n ts 8.1 7.3 S tate s © I S O – Al l ri gh ts re s e rve d ISO 92 41-161:2 016(E) 8.1 8.1 8.2 8.2 8.22 8.23 8.2 8.2 8.2 8.2 8.1 7.4 Wh e n to u s e a h i e rarch i cal l i s t 8.1 7.5 H o w to u s e a h i e rarch i cal l i s t I m p l i ci t d e s i gn ato r 8.1 8.1 D e s cri p ti o n 8.1 8.2 C o m p o n e n ts 8.1 8.3 S tate s 8.1 8.4 Wh e n to u s e an i m p l i ci t d e s i gn ato r 8.1 8.5 H o w to u s e an i m p l i ci t d e s i gn ato r I n s tru ctive i n fo rm ati o n 8.1 9.1 D e s cri p ti o n 8.1 9.2 C o m p o n e n ts 8.1 9.3 S tate s 8.1 9.4 Wh e n to u s e i n s tru ctive i n fo rm ati o n 8.1 9.5 H o w to u s e i n s tru ctive i n fo rm ati o n I n p u t to ke n i z e r 8.2 0.1 D e s cri p ti o n 8.2 0.2 C o m p o n e n ts 8.2 0.3 S tate s 8.2 0.4 Wh e n to u s e an i n p u t to ke n i z e r 8.2 0.5 H o w to u s e an i n p u t to ke n i z e r Lab e l 8.2 1 D e s cri p ti o n 8.2 C o m p o n e n ts 8.2 S tate s 8.2 Wh e n to u s e a l ab e l 8.2 H o w to u s e a l ab e l Legend/chart key 31 8.2 D e s cri p ti o n 8.2 2 C o m p o n e n ts 8.2 S tate s 8.2 Wh e n to u s e a l e ge n d 8.2 H o w to u s e a l e ge n d Link/hyperlink 32 8.2 D e s cri p ti o n 8.2 C o m p o n e n ts 3 8.2 3 S tate s 3 8.2 Wh e n to u s e a l i n k 3 8.2 H o w to u s e a l i n k 3 Li s t b o x D e s cri p ti o n C o m p o n e n ts S tate s 4 Wh e n to u s e a l i s t b o x H o w to u s e a l i s t b o x Li s t b u tto n / m e n u b u tto n 8.2 D e s cri p ti o n 8.2 C o m p o n e n ts 8.2 S tate s 8.2 Wh e n to u s e a l i s t b u tto n 8.2 5 H o w to u s e a l i s t b u tto n M e n u / m e n u b ar 8.2 6.1 D e s cri p ti o n 8.2 6.2 C o m p o n e n ts 8.2 6.3 S tate s 8.2 6.4 Wh e n to u s e a m e n u 8.2 6.5 H o w to u s e a m e n u O u u t p an e 8.2 7.1 D e s cri p ti o n © I S O – Al l ri gh ts re s e rve d v ISO 92 41-161:2 016(E) 8.2 8.2 8.3 8.3 8.3 8.3 8.34 8.2 7.2 Components 8.2 7.3 States 8.2 7.4 When to use an output pane 8.2 7.5 H ow to use an output pane Pointer 8.2 8.1 D escription 8.2 8.2 Components 8.2 8.3 States 8.2 8.4 When to use a pointer 8.2 8.5 H ow to use a pointer Pop-up menu/contextual menu 40 8.2 D escription 40 8.2 Components 40 8.2 States 40 8.2 When to use a pop- up menu 40 8.2 H ow to use a pop-up menu 40 Progress indicator 41 8.3 D escription 41 8.3 Components 41 8.3 States 41 8.3 When to use a progress indicator 41 8.3 H ow to use a progress indicator 41 Prompt 41 8.3 1 D escription 41 8.3 Components 41 8.3 States 42 8.3 When to use a prompt 42 8.3 H ow to use a prompt 42 Push button/command button 42 8.3 D escription 42 8.3 2 Components 42 8.3 States 43 8.3 When to use a push button 43 8.3 H ow to use a push button 43 Radio button 43 8.3 D escription 43 8.3 Components 44 8.3 3 States 44 8.3 When to use a radio button 44 8.3 H ow to use a radio button 45 8.3 4.1 D escription 45 8.3 4.2 Components 45 8.3 4.3 States 46 Read only field/protected field 8.34.4 When to use a read only field 8.34.5 How to use a read only field 8.3 8.3 vi 45 46 46 Scroll bar 46 8.3 D escription 46 8.3 Components 46 8.3 States 47 8.3 When to use a scroll bar 47 8.3 5 H ow to use a scroll bar 47 Scroll handle/elevator/scroll box/thumb 47 8.3 6.1 D escription 47 8.3 6.2 Components 48 8.3 6.3 States 48 8.3 6.4 When to use scroll handle 48 8.3 6.5 H ow to use scroll handle 48 © I SO – All rights reserved ISO 92 41-161:2 016(E) 8.3 8.3 8.3 40 41 8.42 S e l e cti o n cu rs o r 8.3 7.1 D e s cri p ti o n 8.3 7.2 C o m p o n e n ts 8.3 7.3 S tate s 8.3 7.4 Wh e n to u s e a s e l e cti o n cu rs o r 8.3 7.5 H o w to u s e a s e l e cti o n cu rs o r S e l e cti o n i n d i c ati o n 8.3 8.1 D e s cri p ti o n 8.3 8.2 C o m p o n e n ts 8.3 8.3 S tate s 8.3 8.4 Wh e n to u s e a s e l e cti o n i n d i cati o n 8.3 8.5 H o w to u s e a s e l e cti o n i n d i cati o n S e l e cti o n l i s t/ ch o i ce l i s t 8.3 9.1 D e s cri p ti o n 8.3 9.2 C o m p o n e n ts 8.3 9.3 S tate s 8.3 9.4 Wh e n to u s e a s e l e cti o n l i s t 8.3 9.5 H o w to u s e a s e l e cti o n l i s t S tatu s i n fo rm ati o n 40 D e s cri p ti o n 40 C o m p o n e n ts 40 S tate s 40 Wh e n to u s e s tatu s i n fo rm ati o n 40 H o w to u s e s tatu s i n fo rm ati o n S te p p e r/ s p i n b u tto n 41 D e s cri p ti o n 41 C o m p o n e n ts 41 S tate s 41 Wh e n to u s e a s te p p e r 41 H o w to u s e a s te p p e r 42 D e s cri p ti o n 42 C o m p o n e n ts 42 S tate s System message 8.42.4 When to use a system message 8.42.5 How to use system message 43 44 8.45 54 54 Tab s e t 5 43 D e s cri p ti o n 5 43 C o m p o n e n ts 5 43 S tate s 5 43 Wh e n to u s e a tab s e t 5 43 H o w to u s e a tab s e t Tab l e 44 D e s cri p ti o n 44 C o m p o n e n ts 44 S tate s 44 Wh e n to u s e a tab l e 44 H o w to u s e a tab l e 45 D e s cri p ti o n 45 C o m p o n e n ts 8 45 S tate s Text field 8.45.4 When to use a text field 8.45.5 How to use a text field 46 53 57 58 58 T i m e p i cke r 8 46 D e s cri p ti o n 8 46 C o m p o n e n ts 8 46 S tate s © I S O – Al l ri gh ts re s e rve d vi i ISO 92 41-161:2 016(E) 8.47 8.48 8.49 8.5 8.5 8.46.4 When to use a time picker 8.46.5 How to use a time picker 60 Title 60 8.47.1 Description 60 8.47.2 Components 60 8.47.3 States 60 8.47.4 When to use a title 60 8.47.5 How to use title 61 Toggle button 61 8.48.1 Description 61 8.48.2 Components 61 8.48.3 States 61 8.48.4 When to use a toggle button 61 8.48.5 How to use a toggle button 61 Tool bar 62 8.49.1 Description 62 8.49.2 Components 62 8.49.3 States 62 8.49.4 When to use a tool bar 62 8.49.5 How to use a tool bar 62 Tool tip 62 8.5 0.1 Description 62 8.5 0.2 Components 63 8.5 0.3 States 63 8.5 0.4 When to use a tool tip 63 8.5 0.5 How to use a tool tip 63 Window 63 8.5 1 Description 63 8.5 Components 63 8.5 States 64 8.5 When to use a window 64 8.5 How to use window 64 Annex A (informative) Choosing visual user interface elements 65 Bibliography 69 viii © ISO 01 – All rights reserved ISO 92 41-161:2 016(E) Foreword ISO (the International Organization for Standardization) is a worldwide federation of national standards bodies (ISO member bodies) The work of preparing International Standards is normally carried out through ISO technical committees Each member body interested in a subject for which a technical committee has been established has the right to be represented on that committee International organizations, governmental and non-governmental, in liaison with ISO, also take part in the work ISO collaborates closely with the International Electrotechnical Commission (IEC) on all matters of electrotechnical standardization The procedures used to develop this document and those intended for its further maintenance are described in the ISO/IEC Directives, Part In particular the different approval criteria needed for the different types of ISO documents should be noted This document was drafted in accordance with the editorial rules of the ISO/IEC Directives, Part (see www.iso.org/directives) Attention is drawn to the possibility that some of the elements of this document may be the subject of patent rights ISO shall not be held responsible for identifying any or all such patent rights Details of any patent rights identi fied during the development of the document will be in the Introduction and/or on the ISO list of patent declarations received (see www.iso.org/patents) Any trade name used in this document is information given for the convenience of users and does not constitute an endorsement For an explanation on the meaning of ISO speci fic terms and expressions related to conformity assessment, as well as information about ISO’s adherence to the WTO principles in the Technical Barriers to Trade (TBT) see the following URL: Foreword - Supplementary information The committee responsible for this document is ISO/TC 159, Ergon omics, Subcommittee SC 4, Ergon omics of hum an –system interaction ISO 9241 consists of the following parts, under the general title with visual display terminals (VDTs) : — Part : Gen eral introduction — Part 2: Guidance on task requirements — Part 5: Workstation layout and postural requirements — Part 6: Guidance on the work environment — Part 1 : Guidan ce on usability — Part 2: Presentation of inform ation — Part 3: User guidan ce — Part 14: Menu dialogues — Part 5: Comm an d dialogues — Part 16: Direct manipulation dialogues Ergonomic requirements for office work ISO 9241 also consists of the following parts, under the general title Ergon om ics of hum an-system interaction : technology (ICT) equipment and services — Part 20: Accessibility guidelines for information/communication — Part 100: Introduction to standards related to software ergonomics [Technical Report] — Part 110: Dialogue principles © ISO 01 – All rights reserved ix ISO 92 41-161:2 016(E) — Part 129: Guidance on software individualization — Part 143: Forms — Part 151: Guidance on World Wide Web user interfaces — Part 154: Interactive voice response (IVR) applications — Part 161: Guidance on visual user-interface elements — Part 171: Guidance on software accessibility — Part 210: Human-centred design for interactive systems — Part 300: Introduction to electronic visual display requirements — Part 302: Terminology for electronic visual displays — Part 303: Requirements for electronic visual displays — Part 304: User performance test methods for electronic visual displays — Part 305: Optical laboratory test methods for electronic visual displays — Part 306: Field assessment methods for electronic visual displays — Part 307: Analysis and compliance test methods for electronic visual displays — Part 308: Surface-conduction electron-emitter displays (SED) [Technical Report] — Part 309: Organic light-emitting diode (OLED) displays [Technical Report] — Part 310: Visibility, aesthetics and ergonomics of pixel defects [Technical Report] — Part 331: Optical characteristics of autosterescopic displays [Technical Report] — Part 391: Requirements, analysis and compliance test methods for the reduction ofphotosensitive seizures — Part 392: Ergonomic recommendations for the reduction of visual fatigue from stereoscopic images — Part 400: Principles and requirements for physical input devices — Part 410: Design criteria for physical input devices — Part 411: Evaluation methods for the design of physical input devices [Technical Speci fication] — Part 420: Selection of physical input devices — Part 910: Framework for tactile and haptic interaction — Part 920: Guidance on tactile and haptic interactions — Part 940: Evaluation of tactile and haptic interactions — Part 960: Framework and guidance for gesture interactions x © ISO 2016 – All rights reserved ISO 92 41-161:2 016(E) I n c a s e th at o ne o r mu l tip le c o nd i tio n s a re no t me t: — s p ace i s no t l i m i te d — c o n s ide r groups ; — there is not sufficient space to clearly identify each tab accordion ; — c o n s ide r — c o n s ide r o the r me ch a n i s m s to s e le c t fro m a s e t o f v ie ws Us e r – i n te r fac e e le me n ts fo r s e le c tio n a re c o mb i n ati o n b o x , check boxes , radio buttons , a nd toggle buttons 8.43 How to use a tab set Tabs that belong to the same tab set shall be presented in a way that clearly depicts that shared association T he l i s t o f t ab s i n a t ab s e t s ho u ld no t s c ro l l , i n s te ad co n s i de r mo re ro ws T he nu mb e r o f ro ws o f tab s p re s e n te d i n a t ab b e d d i a lo g ue s ho u ld b e m i n i m i z e d A t ab s h a l l no t co n ta i n a no the r tab s e t An active tab shall be realized in a way that clearly indicates the active state NO TE Re fe r to I S O 41-143 fo r g u i d a n c e o n d e s i g n a n d u s e o f tab s e t 8.44 Table 8.44.1 Description A table is a user-interface element that provides an ordered combination of fields, arranged in c o l u m n s a n d r o ws 8.44.2 Components A tab le c o n s i s ts o f the fo l lo w i n g co mp o ne n ts : a) title; b) labels; c) f ields NO TE F i e l d s a r e a r r a n ge d i n c o l u m n s a n d r o ws , wh ic h c a n b e l ab e l l e d ac c o r d i n g to th e s tr u c tu r e o f th e d at a i n the t ab l e 56 © I S O – Al l ri gh ts re s e rve d ISO 92 41-161:2 016(E) a b c b Key a title b labels c f ields Figure 43 — Example of a table with four rows and four columns, where one row is used to label the data in columns and one column is used to label the data in rows 8.44.3 States A table can b e — filled/empty NOTE Fields, buttons, selection indicators, and other user-interface elements arranged in a table may have the s tates as s igned to thos e elements 8.44.4 When to use a table A table is an applicable des ign solution when one or more of the fol lowing conditions are true: — data objects/items consist of more than one information per object; — a large number of data are to be displayed 8.44.5 How to use a table A label of a row or a column should be presented in a way that clearly differentiates it from data of the table If a keyboard is available, it should be possible to navigate in the table with arrow keys A table shall be realized in a way that enables assistive technologies access to its data 8.45 Text ield f 8.45.1 Description A text field is a user-interface element that allows the user to enter character based data NOTE A label can be used to indicate the type of information to be provided in the field [S OURC E: I SO 92 41-143 : 01 ] © I SO – All rights reserved 57 ISO 92 41-161:2 016(E) 8.45.2 Components A text field consists of the following components: a) label; b) entry field; c) indicator that shows how much characters can be entered (optional) a b c Key a b c label entry field indicator that shows how many characters can be entered (optional) Figure 44 — Example of a text ield with multiple lines and an indicator that shows the amount of entered characters and the maximal count of characters that can be entered in this ield f f 8.45.3 States A text field can have the following states: — focused/unfocused; — active/deactivated; — filled/empty 8.45.4 When to use a text ield f User needs to input alphanumeric information in various length 8.45.5 How to use a text ield f The boundaries of a text field shall be clearly visualized (e.g by contrast, colour or box) The size of the text field should indicate the amount of information that can be entered 8.46 Time picker 8.46.1 Description A time picker is an element that enables the user to select a speci fic time 8.46.2 Components A time picker consists of the following components: a) label; b) list of hours; 58 © ISO 01 – All rights reserved ISO 92 41-161:2 016(E) c) list of minutes; d) means to select the hours, minutes (and optional: seconds); e) list of seconds (optional) a c d d b Key a label b list of hours c list of minutes d select hours, minutes Figure 45 — Example of a time picker in h format 8.46.3 States A time picker can have the following states: — active/deactivated; — focused/unfocused Hours and Minutes displayed in the time picker can have the following states: — active/deactivated; — focused/unfocused; — selected/unselected 8.46.4 When to use a time picker A time picker is an applicable solution when the following conditions are true: — a speci fic time is to be identi fied by the user; — only one time is to be identi fied by the user Alternative user-interface elements in case of more dates to be identi fied entry ield f — consider , — consider combination of list boxes © ISO 01 – All rights reserved 59 ISO 92 41-161:2 016(E) 8.46.5 How to use a time picker When designing a time picker, the provision of appropriate increments for the task should be considered Cultural preferences in presenting time should be considered (e.g 24 h format vs 12 h format) 8.47 Title 8.47.1 Description A title is a text that headlines the user interface of a part of the user interface NOTE A title is often connected to the title of the application, the user and the location of the user inside of the application or otherwise contextual 8.47.2 Components A title consists of the following component: a) text a Key a text Figure 46 — Example of a title, used as a title of an application window 8.47.3 States A title can be visible or invisible A title should only be invisible if enough context is presented in the user-interface to make it obvious Invisible titles shall be accessible to assistive technology, such as screenreaders 8.47.4 When to use a title A title is an appropriate design solution if one or the following conditions are true: — user interface uses windows; — 60 content presentation is making use of the full screen © ISO 01 – All rights reserved ISO 92 41-161:2 016(E) 8.47.5 How to use title The position of a title information should be “before” the content/data It shall be presented in a way that indicates the difference to other user-interface elements 8.48 Toggle button 8.48.1 Description A toggle button is a user-interface element that provides a choice between two states [SOURCE: ISO 9241-143: 2012] 8.48.2 Components A toggle button consists of the following components: a) push button; b) visual indicator to communicate two status: not toggled (toggle off) , toggled (toggle on) a b a b Key a push button b visual indicator Figure 47 — Example of a toggle button, showing status (not toggeled) and status (toggled) 8.48.3 States A toggle button can have the following states: — focused/unfocused; — active/deactivated; — pressed/not-pressed 8.48.4 When to use a toggle button A toggle button is an applicable design solution if the following condition is true: — a property of a system is either true or false 8.48.5 How to use a toggle button A toggle button should be presented in a way that the visual indication of the two states are clearly distinguishable The user shall be able to determine the state of a toggle button (toggled or not toggeled), e.g by tool tip Within a design solution, the representation of a toggle button shall be consistent © ISO 01 – All rights reserved 61 ISO 92 41-161:2 016(E) 8.49 Tool bar 8.49.1 Description A tool bar is a collection of actions of the interactive system that enables the user the manipulation of content within the interactive system 8.49.2 Components A tool bar consists of the following components: a) list of actions; b) canvas to present the list of actions; c) means to hide or remove the tool bar (optional) a b Key a push button b visual indicator Figure 48 — Example of a tool bar for text editing tools 8.49.3 States A toolbar can be used to control states of all toolbar elements simultaneously A toolbar can appear deactivated if all its elements are deactivated 8.49.4 When to use a tool bar A toolbar is an applicable design solution if the following conditions are true: — a set of actions is used frequently to manipulate content; — the set of actions is limited 8.49.5 How to use a tool bar If the user may need to use the display space occupied by the tool bar for other purposes, a means of hiding or removing the tool palette should be provided Where feasible, the application should allow users to choose where to position the tool bar 8.50 Tool tip 8.50.1 Description A tool tip is additional textual information or a label on a speci fic user-interface element that is accessed by the user by a speci fic user interaction 62 © ISO 01 – All rights reserved ISO 92 41-161:2 016(E) 8.50.2 Components A tool tip consists of the following components: a) text; b) canvas to display the text a b Key a text b canvas Figure 49 — Example of a tool tip that explains the function of a push button (below the tool tip) 8.50.3 States A tool tip can be visible or invisible 8.50.4 When to use a tool tip A tool tip is an applicable design solution if one or all of the following conditions are true: — UI Elements not have a visible label; — additional description of a UI Element improves use of the system Alternative user-interface elements: — Consider Label 8.50.5 How to use a tool tip A tool tip shall not obstruct the related visual user-interface element A tool tip should be able to be activated by all available input methods E XAMPLE A detailed description of a menu item appears when a pointer is moved on top of the item (hovering) E XAMPLE A detailed description of a push button appears when the user touches and holds the push button 8.51 Window 8.51.1 Description A window is a dedicated rectangular pane containing other user-interface elements A window can overlap with the area of other windows 8.51.2 Components A window consists of the following components: a) title; © ISO 01 – All rights reserved 63 ISO 92 41-161:2 016(E) b) canvas to display content of a windows; c) frame (indicator that visualizes the borders of a window); d) means to minimize, maximize or close a window (optional) a b c Key a title b canvas c frame Figure 50 — Example of two overlapping windows 8.51.3 States A window can have the following states: — active/deactivated; — focused/unfocused; — collapsed/expanded/maximized 8.51.4 When to use a window In a platform that uses the paradigm to present applications and dialogues in windows (also known as Graphical User Interfaces) , windows are used for interaction design and information presentation 8.51.5 How to use window Clicking on a canvas or title of a window shall move that window to the top layer of the user interface and that window shall be active and ready for input 64 © ISO 01 – All rights reserved ISO 92 41-161:2 016(E) Annex A (informative) Choosing visual user interface elements Consuming Information Describing User Interface Elements Describing exactly one element Label Describing one or more elements Title Supporting information Content Information For one element or a group of elements Tool tip For graphs, geographical information Legend For guidance in a dialogue Ins tructive Information Supporting Input For data input Cursor For data selection Input tokenizer For form submit Selection cursor System State Event, triggered by the system System message Process that requires time Progress indicator Unspeci fied Status information Application data Data cannot be changed (due to context, rights, s tatus of application) Read only field Displaying Text, Video, Graphs, Images, misc Information Output pane Maps Geographical map © ISO 01 – All rights reserved 65 ISO 92 41-161:2 016(E) B undeling of visual user interface elements Bundeling data Dynamic number of items Lis t box Items each with the same set of properties Table Semantic sets of user-interface elements Group Application and Dialogue Windowing Environment Window Dialogue with a special context Dialogue box Acces to function and objects Set of actions is limited (and not too large) e g according to frequency of use Tool bar Access to functions and objects, navigation Menu Access to contextual subset of functions and objects, navigation Pop-up menu Access to a semantic set of functions or objects Lis t button Access to containers Multiple containers, Limited screen display space available Tab set Containers in a semantic group with limited screen display space available Accordion One container with limited display space Collapsible container Selecting Data set is stable/not variable Selecting an action Activate a function Push button Navigate to another page or system Link Selecting a boolean s tate One element with boolean s tate Toggle button 66 © ISO 01 – All rights reserved ISO 92 41-161:2 016(E) Multiple elements (