IBMEaseofUse. User Interface Architecture

Transcription

1 IBMEaseofse ser Interface Arcitecture

2

3 IBMEaseofse ser Interface Arcitecture

4 Note Before using tis information and te product it supports, read te information in Notices on page 33. Second Edition (December, 2001) Copyrigt International Business Macines Corporation All rigts resered. S Goernment sers Restricted Rigts se, duplication or disclosure restricted by GSA ADP Scedule Contract wit IBM Corp.

5 Preface Wy is te Web canging te world? It is simple; it connects eerybody to eeryting in a single interface. It is, oweer, not easy. Total connection requires uniersality and standards. You probably don t remember eworld. You probably neer used NoteCards or InterMedia, two of te great ypertext systems in 1980s. Wy? Tese systems failed to delier te promised uniersal networking. Tey migt connect somebody to someting or een ae better features tan te Web, but tey simply lacked te power of uniersality tat te Web possesses. Many people acknowledge and accept te standards for suc tings as power oltage, power plugs, and een eaders, but deny te need for standardizing user interfaces. Tey argue tat users are intelligent and instinctie indiiduals and can adapt to any gien design. It is true tat users can adapt to almost anyting. Tey surely ad to do so in te past. Wy sould users ae to adapt to macines? Do tey oluntarily or inoluntarily adapt to macines? Researc on uman factors in uman-computer interaction sows tat users of a new interface demonstrate a consistent desire to get started rigt away. Tis distinct desire or preference forces tem to figure out te interface witout te benefits of a user-friendly design. Tis ser Interface Arcitecture describes principles and guidelines for a user-centered design for IBM network-based products. Applying tis arcitecture in your project will proide te following main benefits: Te arcitecture embodies recognized principles of uman factors tat are proen to improe usability. Tese principles may appear obious or simple, but tey are often oerlooked by designers and, consequently, missing from consumer products, suc as computers, electronics, and Websites. Your design based on tese principles will become easier to use. In addition to fundamental principles, te arcitecture also proides guidelines for designing user interfaces. Tese guidelines are effectie, practical, and easy-to-follow. Specific conentions are also deried from te guidelines, telling you wat to do and wat to aoid during your design process. Tese guidelines and conentions will increase te efficiency of your work. More importantly, tey will elp you aoid common design blunders and ease te use of your product. Te principles and guidelines in te arcitecture are intended to set design standards for IBM network-based products. Te resulting uniersality in interfaces will allow users to transfer teir learning experience from one IBM network product to anoter and gie tem a sense of accomplisment and control oer a system. Tis will ultimately increase teir satisfaction and productiity. You may tink tat your product is special, and you can deiate from te recommended user interface arcitecture. You are not alone; all designers ae te same regard for teir products. Indeed, eery product as its unique features and design considerations. Howeer, if eery design sub-optimizes te interface for its own needs, te oerall usability of all IBM network products will diminis, and users will suffer from te increased inconenience. Just imagine tis: You designed a product, disregarding tis user interface arcitecture, and IBM or affiliates ad to pay for an extra amount of aluable Copyrigt IBM Corp iii

6 resources to train te users to use it. Your product migt be excellent in its own rigt, but witout uniersality or standards, it was not good enoug to your users or IBM. I urge you to comply wit te ser Interface Arcitecture described in tis document. You will sae yourself energy, IBM resources, and users muc assle and confusion. I bet tat you will sell more products as well. Jakob Nielsen Nielsen Norman Group ttp:// ttp:// i ser Interface Arcitecture

7 Contents Preface iii Introduction IA oeriew Design considerations Designer s model ser-centered design Writing systems Platforms or enabling enironments Product structure Notational conentions Typefaces Special caracters Diagrams Design principles Affinity: Bring objects to life troug good isual design Assistance: Proide proactie assistance Aailability: Make all objects aailable at any time Encouragement: Make actions predictable and reersible Familiarity: Build on te user s prior knowledge Obiousness: Make objects and controls isible and intuitie Personalization: Enable te user to customize an interface Safety: Keep te user out of trouble Satisfaction: Create a feeling of progress and acieement Simplicity: Do not compromise usability for functionality Support: Place te user in control Versatility: Support alternate interaction tecniques Design guidelines Controls Predefined actions Data transfer Message andling ser assistance Windows and layouts Portfolio Accessibility Notices Trademarks Glossary Index Copyrigt IBM Corp. 2001

8 i ser Interface Arcitecture

9 Introduction Tis section introduces te IBM ser Interface Arcitecture (IA) and defines its underlying design principles and guidelines. It also briefly describes oter design factors you need to take into consideration. Tese design factors include, but are not limited to, te following: Designer s model ser-centered design Writing systems Platforms or enabling enironments Product structure Finally, tis section explains te notational conentions used in te IA document. IA oeriew Te IA specifies rules by wic te user interface of IBM network-based products must be built. Te IA rules are intended to aciee furter consistency in design and ease of use of IBM network-based products. Te IA rules are categorized into principles and guidelines. Te terms principles and guidelines are defined as follows: Principles Guidelines Te fundamental ideals and beliefs tat guide your decision-making and courses of action to aciee a predefined goal. Principles are fairly abstract. You must ae extensie interface design knowledge and experience to understand and interpret tem. For example, a IA principle goerning user assistance reads like tis: Assist te user in performing a ariety of tasks. Te specific courses of action, based broadly on a set of principles. Guidelines can be construed as good practices witin a general design domain, suc as Windows GI or Jaa Swing. Tey are generally more specific tan principles and require less design knowledge and experience on your part to understand and interpret tem. For example, a guideline for implementing te IA user assistance principle reads like tis: Proide contextual elp for eac coice or object tat te cursor can be positioned on. Most platforms or enabling enironments deise specific guidelines to goern te design and production of teir component products. Tis IA draws on te most effectie guidelines currently adopted by tese platforms. Te principles and guidelines are applicable to all products for tese platforms. Copyrigt IBM Corp

10 Design considerations You need to take te following factors into consideration in your design of user interfaces. Designer s model Te following tree models are often used to describe a new interactie system: Implementor s model ser s model Designer s model Demonstrates ow a new system is implemented. Allows a user to try out and explain a new system. Te learning experience of eac user becomes a separate user s model. Is based on multiple user s models and describes te collectie experience of all users wit te same system. Tis IA presents a partial designer s model, wit its quintessence described in Design principles on page 7 and Design guidelines on page 13 and its elements, or objects, defined in Glossary on page 35. Tese objects are common to applications tat conform to te IA. It is critical tat you first deelop a designer s model wen you design a product. In te designer s model for te product, you define te way tat a group, or class, of objects will appear and beae. Tese specifications will elp create a common look and feel for te objects in an interface. Te resulting consistency will make te beaiors of te objects predictable and tus te interface intuitie and te product easy to use. Visit ttp://www-3.ibm.com/ibm/easy/eou_ext.nsf/publis/569 for a detailed description of te implementor s model, te user s model, and te designer s model. Te designer s model is often described in te context of te object iew and interaction design (OVID) metod wit te unified modeling language (ML). See Designing for te ser wit OVID: Bridging ser Interface Design and Software Engineering (ISBN: ) for more information about OVID and te designer s model. ser-centered design Tis IA assumes tat eac conforming product will be created to meet te requirements of te IBM user-centered design (CD) or its equialent. Te following table summarizes te CD process and te IA considerations releant to eac step. CD Process Description IA Considerations Market definition Define te target audience, identify te competitors, and determine te core user needs tat must be fulfilled. Decide weter te IA is an appropriate approac tor te product. Task analysis Identify and understand te user s goals and tasks, te strategies tey use to perform te tasks, te tools tey currently use, te problems tey experience, and te canges tey want to see in teir tasks and tools. Design your product using te identified tasks. Eac task will be embodied in te product as a sequence of iews. Analysis of te frequency of a task will elp you decide if you sould proide a wizard for tat task. 2 ser Interface Arcitecture

11 CD Process Description IA Considerations Competitie ealuation Design and walk-troug Ealuation and alidation Bencmark assessment Determine te design strengts and weaknesses of te competition. sing te results from task and competitie analyses, create alternatie solutions, solicit feedback troug design walk-troug sessions wit users, and coose a solution based on user input. Periodically solicit user feedback on te eoling design, and iterate te design based on analysis of users experiences wit it. Run a ead-to-ead bencmark assessment against te competition to erify tat te product as met its primary objecties. If a tird-party company conducts te bencmark study, positie results can become important selling points in product promotions. None Create one or more models of your product based on te Designer s model on page 2. Make sure tat all elements in your models correspond and comply wit tose in te IA. se design walk-troug sessions to see if te users understand te models and to coose a single model for implementation. Implement, ealuate, and alidate your design based on te IA Design guidelines on page 13 or platform-specific guidelines. None Writing systems Tis ersion of te IA guidelines is intended for user interfaces designed for te left-to-rigt, top-to-bottom writing systems. You may need to adjust te guidelines to accommodate te directionality of languages, suc as Arabic and Hebrew, tat ae different writing systems. Platforms or enabling enironments Toug te IA intends to proide a repertoire of rules, it does not normally repeat tose wic are already common to all platforms or enabling enironments. If you cannot find a rule for a particular user interface of a particular product, follow te platform-specific or enironment-based guidelines. Te ISO/IEC standards and guidelines for Windows, Jaa, and NIX are aailable on te Internet and in publications. Introduction 3

12 Product structure Te following diagram sows te structure of a typical product tat conforms to te IA. Make sure tat your design conforms to te IA. Renderer arcitecture conforms to Platform Renderer IA principles and guidelines conforms to implements Common renderer interface Model renderer IA Designers Model Renderable interface implements conforms to Exposed Implementation Model Implementation Model Business logic 4 ser Interface Arcitecture Te diagram includes te following elements of a typical product structure: A IA-conforming renderer is used to proide interaction between te system and te user. It implements te common renderer interface and proides layout tat conforms to te IA. It is also responsible for suc tasks as alidating user input and ensuring tat required properties are supplied. Te model renderer is a key element of te user experience. It controls te presentation of te exposed implementation model (EIM) to te user and responds to te user s actions by applying actions to te business logic troug te EIM. It also accesses te EIM using its renderable interface and te cosen renderer troug its common renderer interface. In addition, it defines te metods of interaction, suc as te coice between te caced and te instant update of te business logic. Business logic is te basic function of any product. Te elements of te business are stored witin databases or on oter media. Te implementation model represents te software tat proides access to te business logic. Te first stage of designing a user interface is to decide te parts of te business to be exposed to te user. Tis can be done by creating an EIM tat selects te elements to be presented. By implementing te renderable interface, te EIM conforms to te IA designer s model. An EIM proides access to te elements witin te business logic wit wic te user must work.

13 Notational conentions Tis section describes te notational conentions used in tis document. Typefaces Te following typefaces are used to indicate empases trougout tis document: boldface Text in boldface represents table column eadings and definition terms in a definition list. italics Text in italics indicates an important concept or term tat is usually defined witin te same sentence or paragrap. monospace Text wit monospace stands for te name of a menu item, pus button, or keyboard key, a sample output, or a sample system message. Special caracters Te following special caracters are used to indicate resered terms for IA designers and different types of IA design guidelines: small caps or brackets Terms in SMALL CAPS or [ ] are resered for use by te interface designers, not teir users. Te term ACTION CONTROL or [action control] is an example of te resered terms. Guidelines wit a ceck mark are fundamental to creating a user interface tat is compliant wit te IA and its underlying principles. You must follow tese guidelines in your design work. Guidelines wit a empty box are consistent wit te IA principles, but not mandatory to creating a user interface. You are strongly recommended to follow tese guidelines for te oerall ease of use of your product. Diagrams Te following diagrams or grapics are used to represent objects or iews and relationsips among objects or iews: Folder (from examples) Folder (from examples) 0..* Object (from IA) Symbolizes an object tat is stored by te system and sown as a rectangle containing te name of te object. A folder, for example, is an object. Symbolizes an aggregate relationsip in wic one object, suc as a folder, contains anoter object. Tis relationsip is sown as a line wit a diamond at one end and an arrow at te oter. Te folder contains zero-or-more objects. If te folder is deleted, te contained objects are also deleted. Introduction 5

14 Pointer Symbolizes a depends on or uses relationsip in wic one object, suc as te pointer, relies on anoter and is sown as a dotted line wit an arrow. In tis example, te pointer uses te screen. moes on Screen Icon (from IA) 1..* rendered by Symbolizes a rendered-by relationsip between a iew and te object being iewed. In tis example, a folder is rendered by one-or-more icons. Folder (from examples) [Action Control] Symbolizes a subclass relationsip in wic one object is a special form of anoter and is sown as a line wit a triangle. Te menu and pus button, for example, are bot special forms of ACTION CONTROL. Menu Pusbutton Information Area Symbolizes a iew or mecanism by wic te user can interact wit te system. It is sown as an object symbol wit <View> aboe te name. An information area is an interaction mecanism. 6 ser Interface Arcitecture

15 Design principles Tis section describes te following IA design principles: Affinity: Bring objects to life troug good isual design Assistance: Proide proactie assistance Aailability: Make all objects aailable at any time Encouragement: Make actions predictable and reersible Familiarity: Build on te user s prior knowledge Obiousness: Make objects and controls isible and intuitie Personalization: Enable te user to customize an interface Safety: Keep te user out of trouble Satisfaction: Create a feeling of progress and acieement Simplicity: Do not compromise usability for functionality Support: Place te user in control Versatility: Support alternate interaction tecniques. Affinity: Bring objects to life troug good isual design nderstand te principles of isual design. Te isual design in a user interface aims to embody all aspects of te IA principles. It sould support te user model and communicate its functions witout ambiguities. It sould not be seen as te icing on te cake, but an integral part of te entire design process. Follow te isual design principles below. Tese principles promote clarity and isual simplicity in a user interface: Subtractie design Eliminate any isual element tat does not contribute directly to te intended isual communication. Visual ierarcy Establis a isual ierarcy of te user s tasks in te order of importance. Gie extra isual prominence to a critical object. se relatie position and contrast in color and size to increase te isual prominence of an object. Affordance Ensure an object displays good affordance. Tat is, te user can easily determine te action to be taken wit te object. Objects wit good affordance often mimic tose in te real world. Visual sceme Design a isual sceme tat maps to te ser s Model and enables te user to customize te interface. Do not eliminate extra space in an image just to sae space. se wite space to proide isual breating room. Assistance: Proide proactie assistance Help te user perform a ariety of tasks. Te knowledge of te system and te ability to andle a task ary from one user to anoter. Enable te system to recognize te ability of an indiidual user and offer assistance as appropriate. Proide assistance in te forms of captions, ints, or system elp. Te assistance information sould be simple, concise, and task-oriented to allow te user to complete a task wit relatie ease and efficiency. It sould also be Copyrigt IBM Corp

16 flexible. Te system sould be able to adapt to te improed capability of te user and train te user to become independent. Aailability: Make all objects aailable at any time Enable te user to use all objects witin a iew in any sequence and at any time. For example, te Open dialog in te Windows platforms allows te user to access all objects in te iew of an open object. Aoid using modes in wic actions of an interface are no longer aailable or cause unexpected results. Modes restrict te user s ability to interact wit te system. For example, menu-drien systems use te modal dialog box, suc as Print and Sae As, for te user to request command parameters, but tis modal dialog tends to lock te user out of te system. Te user must complete or cancel te modal dialog to return to te system, creating tremendous inconenience. Encouragement: Make actions predictable and reersible Ensure tat an action produces te expected results. Try to understand te expectations, tasks, and goals of te user. se terms and images tat elp te user understand te objects and teir relationsips for completing a task. Encourage te user to explore te system, try out an action, iew te result, and undo or delete te action. Te user feels more comfortable wit and confident in an interface if te featured actions do not cause irreersible consequences. All user actions, including te seemingly triial deselection sould be reersible. For example, te user spends seeral minutes deliberating and selecting indiidual files to be arcied. It frustrates te user if te selections are accidentally deselected and te deselection cannot be undone. Aoid bundling actions togeter. Te user may not anticipate te impact of bundled actions. For example, do not group te Cancel and Delete functions togeter. If te user cooses to cancel a request for sending a note, only cancel te Send request; do not delete te note. Make actions independent and proide mecanisms, suc as wizards, to allow te user to combine actions for a certain use. Familiarity: Build on te user s prior knowledge Allow te user to build on prior knowledge of te system. A user-friendly system enables te user to learn new concepts and tecniques by accomplising one task and apply tem to a broad spectrum of tasks. In oter words, te user does not ae to learn different tecniques to perform similar tasks. Employ isual designs and interaction tecniques in an interface to represent and reinforce te user s experience wit oter systems for te same platform or enironment. A new interface is easy to understand, learn, and use if te required interaction tecniques are consistent wit wat te user already knows and expects. Try to discoer and understand te experiences and expectations of te user before you start your design. Obiousness: Make objects and controls isible and intuitie se realistic representations in te interface. Te objects and concepts in an object-oriented interface sould resemble tose in te real world. Weneer possible, aoid artificial representations of objects. Tras cans and telepones are good examples of realistic representations. In te real world, a tras can is a receptacle for people to deposit tras. An object 8 ser Interface Arcitecture

17 sown as a tras can on te desktop speaks olumes of its function; it clearly identifies itself as a place for te user to discard unwanted objects. Te same effectieness can be said about a telepone image on a desktop. Based on real-life experiences, te user instinctiely knows tat te object is intended for performing telepone-related tasks. Make te controls of te system clearly isible and teir functions easily identifiable. se isual or textual cues to elp users understand functions, remember relationsips, and recognize te current state of te system. For example, te numbered buttons on te telepone object indicate tat tey can be used to key in a telepone number. Encourage direct or natural interaction. Enable te user to interact directly wit objects and minimize te use of indirect tecniques or procedures. Identifying an object and performing a task wit it, suc as picking up te andset of a pone to answer it, are usually not separate actions in te real world. Wit direct action or interaction tecniques, te user of an interface does not ae to make explicitly separate selections for actions in a sequence. Real-world 3-D interfaces are especially conducie to direct interaction. Personalization: Enable te user to customize an interface Enable te user to tailor te interface to indiidual needs and desires. No two users are exactly alike; users ary in terms of teir background, interest, motiation, leel of experience, and pysical ability. Customization elps te user feel more comfortable wit an interface. Personalizing an interface can also lead to iger productiity and user satisfaction. For example, allowing users to cange default alues can sae tem time and assle wen accessing frequently-used functions. In an enironment were multiple users sare a single computer, enable eac user to create is or er own system personality and make it easy to reset te system. In an enironment were a single user uses multiple computers, make te personalized information portable; te user can carry tat personality from one system to anoter. Safety: Keep te user out of trouble Protect te user from making errors. Te burden of keeping te user out of trouble rests upon te designer. An interface sould proide isual cues, reminders, lists of coices, and oter aids, eiter automatically or on request. Contextual elp and agents can delier supplemental assistance. Help information sould be simple, concise, and task-oriented. Do not require te user to memorize information tat te system already knows, suc as preious settings, file names, and oter interface details. Proide suc information, if aailable, troug te system. Enable two-way communication between te user and te system. Tis actie communication capability allows te user to clarify or confirm a request, correct a problem, or make task-specific decisions. For instance, a spelling cecker, as designed in some systems, igligts potentially misspelled words wile te user works on te document. Tis allows te user to eiter correct a spelling error or continue te work. Te ability of two-way communication can also elp users define teir task objecties. It is not unusual tat users know wat tey want to accomplis, but find it difficult to describe. Te system sould be able to recognize te problem, encourage te user to proide releant information, and suggest possible solutions. Design principles 9

18 Satisfaction: Create a feeling of progress and acieement Allow te user to make uninterrupted progress and enjoy a sense of accomplisment. Report te results of actions immediately; any delay intrudes on te user s tasks and erodes is or er confidence in te system. Instant feedback allows te user to assess weter or not te results meet is or er expectations and, if not, to take alternatie actions immediately. For example, wen te user cooses a new font, te font cange to all applicable text sould take place instantaneously. Te user can ten decide weter or not to retain te cange. Preiew te results of an action so tat te user can ealuate tem. For example, if te user wants to use a Heletica font wit te bold and underscore effects for certain text in a large document, proide a sample wit te requested font cange. Te user can ealuate te cange and decide weter or not to implement it. In tis way, te user does not ae to spend time to reerse an undesirable cange. Instantly update information as te user makes canges to te system. Communicate to te user in te eent tat te results of a refres cannot be immediately displayed. Tis becomes especially important in networked enironments were it is more difficult to maintain te dynamic state between networked systems. For example, most Web browsers display a completion percentage in te information area so tat te user knows te status of te page-loading progress. Simplicity: Do not compromise usability for functionality Keep te interface simple and straigtforward. Te user benefits from intuitie and usable functions. Make sure tat basic functions are apparent to te user and adanced functions are easy to learn. Minimize te number of objects and actions in an interface, but enable te user to accomplis eeryday tasks. Include a function only if a task analysis sows te need for it. Organize te functions for easy access and use. Aoid designing an interface cluttered wit functions. A well-organized interface fades into te background and allows te user to work efficiently. Support: Place te user in control Gie te user control oer te system. Enable te user to apply self-defined procedures to accomplis tasks. Do not impose your own notion of te correct way of doing tings and limit te coices tat sould be aailable to te user. Ensure tat te system permits te user to establis and maintain a constant working context or a frame of reference. Make obious te current state of te system and te actions for te user to perform. If te user leaes te system for a moment or longer, te state of te system sould remain current or stable at te time of is or er return. Tis contextual framework contributes to is or er feeling of stability. Versatility: Support alternate interaction tecniques Enable te user to coose an interaction metod appropriate for a specific situation. Eac interaction deice is optimized for certain uses or users, and no single interaction metod is best for eery situation. For example, a micropone wit oice-recognition software can be elpful for a fast text entry or in a ands-free enironment, and pen input is elpful for people wo sketc. 10 ser Interface Arcitecture

19 Terefore, an interface wit coices of interaction tecniques accommodates a wide range of user skills, pysical abilities, interaction approaces, and work enironments. Enable te user to switc between metods to accomplis a single interaction. For example, allow te user to swipe-select wit te mouse and adjust te selection wit te keyboard. Do not require te user to alternate between input deices to accomplis a single step or a series of related steps in a task. Te user sould be able to complete an entire sequence of task steps wit te same input deice. For example, it is tedious and insufficient for te user to scroll wit te mouse wile editing text from te keyboard. Proide a broad range of interaction tecniques for users wit different abilities and in different work enironments. Increase interaction efficiency by allowing te user to create sortcuts for frequently-used actions. For example, enable te user to print a document on is or er default printer by clicking a single button. Preiew te content of an object wen te user selects it. Tis preiew facilitates te user s scanning and decision-making. Enable te user to group objects based on a ariety of task-deried criteria. For example, te user sould be able to group messages by categories of te sender, subject matter, and so on. Design principles 11

20 12 ser Interface Arcitecture

21 Design guidelines Controls Tis section describes specific IA guidelines for designing te following features of a user interface: Controls Predefined actions Data transfer Message andling ser assistance Windows and layouts Portfolio Accessibility Te IA guidelines are caracterized as fundamental and recommended. You are required to follow te fundamental guidelines so tat your design or product conforms to te IA. You are also urged to implement te recommended guidelines to aciee te oerall ease of use of your product. As described in Special caracters on page 5, fundamental guidelines are identified wit a mark and recommended guidelines are prefixed wit a mark. Controls are predefined iews tat proide standard ways for iewing and manipulating data. Proide a control witin a iew to allow user interactions. Implementing controls Proide a isual indication for a field tat requires a user-specified alue and a default alue weneer possible. Proide a isual indication for a field wit an inalid user-specified alue. se int text to describe te range of alid alues for te field. se a wite X symbol placed on a red background to indicate an inalid user-specified alue. se isual cues for te user to distinguis different types of fields on monocrome screens and ensure tat te isual cues are readable to screen readers. se a CAPTION, suc as a label, a column eading, or a window title, of te associated object or property to identify eac control or group of controls. Copyrigt IBM Corp

22 Instantaneously update a control wen te alue it represents canges. For example, if bot a slider and an entry field are proided to represent te same numerical alue, immediately cange te slider to represent te new alue in te entry field. se te controls proided by te operating enironment rater tan creating new ones. Do not cange te function, interaction tecnique, or appearance of a control proided by te operating enironment. Automatically adjust te size of a control wen a window is resized. For example, make te entry field longer or sorter as te window is enlarged or srunk. Set a size minimum, and wen reaced, clip, instead of resizing, te control. se text-entry, non-text-entry, and notebook controls as recommended in te following table: Number of Controls coices Text-entry controls Entry field (single line) Entry field (multiple line) Combo box (wit first letter naigation Combo box (wit type aead) Drop-down combo box (wit first letter naigation) Drop-down combo box (wit type aead) Spin button wit an entry field (or spin box) Not applicable Not applicable Types of coices 100 or fewer Variable settings coices or objects 1,000 or fewer Sown as Relatie space used None Alpanumeric Low Text None Alpanumeric Medium ig Text Variable settings coices or objects 100 or fewer Variable settings coices or objects 1,000 or fewer Non-text-entry controls Pus button 1 for eac pus button; 6 or fewer coices per field Variable settings coices or objects 20 or fewer Settings coices from an ordered list Fixed action or routing Selection type Alpanumeric Hig Single coice in list and text in entry field Alpanumeric Medium ig Single coice in list and text in entry field Alpanumeric Low Single coice in list and text in entry field Alpanumeric Low Single coice in list and text in entry field Alpanumeric Low Single coice in list and text in entry field Alpanumeric, grapic Low Single 14 ser Interface Arcitecture

23 Controls Radio button Number of coices 1 for eac radio button; 6 or fewer per field Types of coices Fixed settings coices Value set 20 or fewer Fixed settings coices List box Any number Variable settings coices or objects Drop-down list Ceck box Any number 1 for eac ceck box; 6 or fewer per field Variable settings coices or objects Fixed settings coices Menu bar 6 or fewer Fixed routing coices Pull-down menu Cascaded menu 10 or fewer Fixed action or routing coices 10 or fewer Fixed action or routing coices Pop-up menu 10 or fewer Fixed action or routing coices Slider Spin button witout an entry field 60 or fewer isible increments Fixed setting in a range 20 or fewer Setting coices from an ordered list Sown as Relatie space used Selection type Alpanumeric Medium Single Alpabetic, numeric, grapic Alpanumeric, grapic Alpanumeric, grapic Alpanumeric, grapic Alpanumeric, grapic Alpanumeric, grapic Alpanumeric, grapic Alpanumeric, grapic Numeric, grapic Container Any number Objects Alpanumeric, grapic Tree Any number Objects (particularly folders) Notebook controls Notebook Any number Any (except anoter notebook) Medium Medium-ig Low medium Low Low Low Low Low Single Single, multiple Single multiple Single Single Single Single Single Alpanumeric Low Single Alpanumeric, grapic Alpanumeric, grapic Hig Hig Medium-ig Extended Single As appropriate for eac object or control Design guidelines 15

24 Predefined actions Predefined actions are set functions tat are often proided on pus buttons. Implementing predefined actions Proide te following user assistance mecanisms and define teir beaiors troug te Help menu. Help menu item Table of contents Index Searc Description Opens to te table of contents of te elp system Opens to te topic index of te elp system Opens to te searc engine of te elp system se an action coice for any of te following functions wit te predefined label. Label Open Open in new window Properties OK Apply Reset Cancel Close Stop Pause Resume Retry Continue Back Next Finis Refres Reload Help Function Sows te default iew of an object Opens an object or task in a new window troug te menu bar or an icon sortcut on te tool bar Sows a iew of an object tat contains te properties of te object For settings, accepts any canges made by te user in te window and remoes te window; for messages, allows te user to indicate tat tey ae read te message Applies canges to setting coices witout remoing te window Restores te saed-state alues of te canged setting coices Remoes te window witout applying any canges in te window Remoes te window witout resetting a process or canging any data Remoes te window witout resetting a process or canging any data Temporarily suspends a process Continues a process tat as been paused by te user Tries to restart a process tat was interrupted by te operating enironment because of a correctable situation Resumes a process requested by te user but interrupted by te operating enironment Returns to te preious page in a browser or in a wizard-styled dialog Moes to te next page in a wizard-styled dialog Completes in a wizard-styled dialog pdates te content display in a iew Refreses te display of a page in a browser by fetcing its content again from te serer Displays a window containing contextual elp information Add an ellipsis (...) to te end of an action name if an action window is used to collect parameters before te action is started. Place te Cancel and Help pus buttons, if proided, to te rigt of all oter buttons. 16 ser Interface Arcitecture

25 Place te OK and Apply pus buttons, if proided, to te left of all oter buttons. Proide a Reset pus button weneer you proide an Apply pus button. Return te saed-state alues of te canged settings only in te window were Reset or Cancel is selected. Return te object to te original saed-state wen Reset is selected. Canges tat ae been preiously committed, for example, using Apply or OK, are not reset. Do not use bot te Close and Cancel pus buttons in te same window. se te OK button on property dialogs. Do not use it were a more explicit term is aailable. For example, on a dialog for a Print request, use a Print button instead of an OK button. se standard pus buttons and te corresponding functions for te Close coice (on a system menu), te Enter key, and te Esc key based on te following information. Window type Object iews Settings (in a caced update iew) Settings (in an immediate update iew) Action window Progress indicator Information message Warning message Pus buttons Any action (e.g., print or undo) OK, Apply 1, Reset 2, Cancel, Help Close coice result Close (wit an optional message for saing or discarding outstanding canges) Cancel (resets and closes) Enter key result Te action wit default empasis Close, Help Close Close Close Window action name 3, Cancel or Close, Help Close, Stop (optional), Pause and Resume (bot optional), Help Cancel or Close 4 (witdraws te request) Close OK Default action 5 Pause (if supported; oterwise Close) OK, Help OK OK OK Action name 3 (optional), Continue 6, Cancel, Help Cancel (if supported; oterwise a non-destructie action) Non-destructie action Esc key result Close (if used, wit an optional message for saing or discarding canges) Cancel (resets and closes) Cancel or Close 4 (witdraws te request) Stop (if supported; oterwise Close) Cancel (if supported; oterwise a non-destructie action) Design guidelines 17

26 Window type Pus buttons Close coice result Enter key result Esc key result Action message (general use) Action name (optional), Retry 7, Cancel 8, Help 9 Cancel (if supported; oterwise a non-destructie action) Retry (if supported; oterwise a non-destructie action) Cancel (if supported; oterwise a non-destructie action) Action message (simple case) Yes, No 10, Help Coice of Yes or No (does not lose data) Coice of Yes or No (does not lose data) Coice of Yes or No (does not lose data) Notes: 1. Apply is used wen te user wants to apply canges to a few of te many aailable settings at a time. 2. Bot Reset and Apply are proided in te same window. 3. One or more pus buttons wit te names of te actions must be aailable. 4. Cancel must remoe te action window and return to te window from wic te action was requested. 5. Tis assignment is optional and proided for a useful, non-destructie action. 6. Te window must ae at least one action tat continues te request and one action tat cancels te request. 7. se Retry if necessary. 8. se Cancel if necessary. Te affected user data must be returned to its original state or left in a useful state. 9. Te window must ae at least two from te set: [Action], Retry, Cancel. 10. Yes or No represents an action. Data transfer Data transfer refers to te transmission of data from one object to anoter. Data transfer operations include clipboard operations, suc as Cut, Copy, and Paste, and direct manipulation tecniques, suc as dragging. Do not cange te date or te selected-state empasis wen te user selects and copies data. If te source and target objects are of different types, add, insert, or combine te source object into te target object or group of objects. Transfer bot a simple container, suc as a folder, and its content wen te container is dragged as a data transfer operation. For example, wen te user moes or copies a folder to anoter container, moe or copy bot te folder and its content to te receiing container. Proiding direct manipulation Direct manipulation is a set of tecniques tat enable te user to drag an object wit a pointing deice, interact wit its pop-up menu, or make direct alterations, suc as canging its name. Proide direct manipulation for all objects represented by icons in te work or naigator area. 18 ser Interface Arcitecture

27 Proide direct manipulation for as many items as possible. For example, enable direct manipulation for text. Supply direct manipulation tecniques oter tan drag and drop. For example, make it possible to moe items using cut and paste tecniques. Proide alternatie direct manipulation tecniques as described in Accessibility on page 30. Implementing direct manipulation Cancel a direct manipulation operation if te user presses te Cancel (Esc) key or drops an object onto its current position. Aoid canging te input focus (cursor position) as a result of a direct manipulation operation. Do not cange te status of an actie window wen a direct manipulation operation is performed. Proide contextual elp for a direct manipulation operation. Enable te user to display contextual elp, if proided, about a direct manipulation operation by pressing te Help button. Enable te user to transfer data troug direct manipulation. For example, wen te user drags a document to a printer, prepare and scedule te document for print. Display te target empasis on te target object and cange te pointer wen it is oer te object. In tis case, te target object is in a state to receie data as a result of a direct manipulation operation, but cannot receie te object being directly manipulated. For example, cange te pointer to te do-not pointer. Display te source empasis, as defined by platform-specific conentions, on te target object wen it is in a state to receie data as a result of a direct manipulation operation. Display source empasis, as defined by platform-specific conentions, on te source object during a direct manipulation operation. Enable te user to oerride te default of data transfer by pressing a set of keys, including te following, during a direct manipulation operation. Operation name Moe Copy Link, sortcut Key set Sift + Mouse manipulation button Ctrl + Mouse manipulation button Ctrl + Sift + Mouse manipulation button Message andling Messages are displayed in a window, responding to an unexpected eent, suc as an error, or proiding additional information on te status of a process. Tere are tree types of messages: information messages, warning messages, and action messages. Design guidelines 19

28 se a message to report unexpected or undesirable situations. Display a message to indicate te successful completion of a process and to proide additional information about te status of te completion. Implementing message andling Display a warning message to indicate tat an undesirable situation in a process could occur but te user can coose to continue. Display an action message to indicate tat a condition as occurred and te user must correct te situation and retry, coose an alternatie action, or witdraw te request. Display an urgent action message to indicate tat a condition as occurred in a process wic as not been stopped and te user must correct te situation immediately and retry, coose an alternatie action, or witdraw te request. Display an information message to indicate tat a condition beyond te user s control as occurred or tat te user must see additional information about te status of a completed process. Display a message in te progress indicator window to sow te completion stage of a process. For example, sow Printed page 12 of 40 during a printing job. Display a busy-pointer oer a iew wen a process starts. Restore a normal pointer wen te process completes or wen te user is allowed to interact wit te iew again. If te busy-pointer is sown for 2 seconds or longer, display te status information about te process wit a progress indicator. se te following categories of progress indicators according to your design need. Category se wen Display Control Comments Normal processing Pointer cange Expected system response time is <0.5 second System response time may be sligtly delayed; estimated time is 0.5 > 2 seconds N/A N/A No special need Display our-glass pointer on te affected object or window; do not disable non-affected components Non-modal; allow te user to work on oter tasks Non-modal wait or ready pointer preferred; usually used for local processing, suc as console operations or user actions tat do not require extensie data refres or update 20 ser Interface Arcitecture

29 Category se wen Display Control Comments Information area indicator Dedicated process window System response time may be >2 seconds; oter operations can continue as te processing completes; te user can use te primary console and secondary dialogs Processing preents te user from performing normal operations; complex operations may take seeral minutes to complete Display our-glass pointer on affected objects or windows; display indicator in te information area; coose one of tree progress indicator types based on status information aailable to te program Proide Stop and Refres buttons, if possible, to te user Status displayed in te primary window 1 or fewer tables; sow te status indicator in te console information area 2 or more tables in te primary window; sow status indicators at te bottom of eac table Moe te Stop or Refres buttons to te Tool bar; do not sow te buttons next to te control If more tan one component is displaying status, proide menu and toolbar coices on actie te actie components Status displayed in te secondary window Place status indicators and te Stop control in te status area across te bottom of eac dialog Dedicated process window wit a progress indicator If a Refres button is proided, place it as a pus button on te dialog Dedicated process window wit Stop and Close buttons Only sow te Stop button if aailable Prase a message clearly and concisely so tat te user can easily understand te cause of a situation and, if necessary, quickly take correctie actions. Design guidelines 21

30 Aoid prasing a message for a Yes or No response from te user. For example, do not use te message, Are you sure you don't want to sae te file? Instead, use File as been modified. Select 'Discard Canges' to ignore canges or select 'Sae Canges' to sae canges. If pus buttons are used for Yes and No responses, aoid using negaties in te message text. Proide access to Help information from eac message window troug a Help pus button or a symbol defined by platform-specific conentions. Display a message for an associated window in a secondary window. Augment te icon of an object wit a sort ersion of te message symbol if no associated window is open for wic a message must be displayed. For example, if a note cannot be successfully sent and no associated window is open, augment te mail basket icon wit an appropriate message symbol, suc as an i or?. Augment te container wit a small ersion of te message symbol if no associated window is open for wic a message must be displayed and te object s icon is currently not isible. For example, if an object s icon is contained in a currently isible folder, augment te folder s icon wit an appropriate message symbol. If te folder s icon is not isible, augment te work area s icon wit an appropriate message symbol. Determine an appropriate symbol for a specific type of message. Display a message symbol to te left of te message text. Message Symbols Classification Information Symbol Windows NIX Swing Warning Action!? rgent Action Include in te window title te name of te object and te action or situation tat caused te message to appear. For example, Drie A: - Format Diskette as a message title may be displayed during a format operation. Make messages as modaless as possible. For example, if a message is associated wit an entry field in a window, make te message modaless for te user to enter data. Place a message identifier, if proided, in te bottom rigtmost corner of te message and display it in a font smaller tan tat for te message text. se additional modalities to alert te user to an action message, particularly wen immediate attention is required. For example, sound an alarm or send a message to a ibrating pager. 22 ser Interface Arcitecture

31 Wen using additional modalities to alert te user, follow platform-specific settings to allow te user to cange or disable tese modalities. ser assistance ser assistance refers to te alpabetic, grapic, or audible element tat elps te user to perform a task. Proide contextual elp for eac coice or object on wic te cursor can be positioned. Describe in contextual elp wy a coice, displayed wit unaailable-state empasis, is unaailable and ow te user can make it aailable. Display contextual elp, if proided, wen te cursor is on a coice or object and te user presses te Help key designated by te implementation platform. Proide access to a Help index from eery Help window. Follow te indexing conentions for IBM publications to create a Help index. Arrange index entries in a ierarcical order. Proide synonyms for eac Help index entry. Allow te user to searc te Help index by specifying searc criteria. For example, proide a Searc routing coice in a menu or on a pus button. Do not include te prase Help for in index entries. Proide a Help coice in te menu bar of a window. Allow te user to launc Help into a separate window by selecting te Open in new window command. Proide a Help coice in any window wic is modal, preenting te user from accessing oter application windows. Place a Help coice on a pus button in a window tat does not ae a menu bar or in a window, suc as a browser, in wic te menu bar is not aailable to te product. Help? Do not cange te state or appearance of an object on wic te user is requesting assistance by selecting a Help coice or pressing te Help key. For example, do not select te ceck-box coice if te user is requesting elp about tat coice. Reuse elp and message text exactly. Text ariations may cause confusion. se simple, concise screen text or instructions so tat te user does not ae to request assistance for clarification. List all key assignments in te Help for te window and indicate to te user te keys tat are aailable in te current state of te window. Design guidelines 23

32 List sortcut key assignments in te Help menu. If te user adds or canges key assignments, list te new or canged assignments in te Help menu. Proide links to wizards or oter types of assistance to elp te user complete a task. Weneer necessary, refer te user to additional resources troug document links. Proide a sort int text for eac control. Te int text sould be a declaratie prase tat answers suc questions as Wy is tis field needed? or Wat type of alues can be entered in tis field? Wen te cursor is on a control, display te int for te control in te information area. Wen te pointer pauses oer a control for a sort time, display te int for te control in a popup window. Proide a wizard to assist te user in completing a less frequently-performed task, suc as partitioning a ard drie. se te same caption for an element tat appears in bot te wizard and elsewere in te interface. Ensure tat te user as access to te wizard from te Help menu for te interface. Proide default alues, wen applicable, for all elements of a wizard. Do not require te user to isit all te pages in a wizard if default alues are proided. Ask te user to isit only tose pages wit elements tat require user input. Place Back, Next, Finis, Cancel, and Help pus buttons on all pages of a wizard. se unaailable-state empasis for tose pus buttons tat do not apply. For example, sow te Back button wit unaailable-state empasis on te first page. Renting a car Original Help Area Coose a car Select te car you require Class of car required Coice Caption Type of transmission Economy Compact Mid-size Full-size Van Step Caption Step Hint Automatic Manual No preference Back Next Finis Cancel Help 24 ser Interface Arcitecture

33 Sow te elp for te current element in te optional Help area of te wizard. Sow te int for te current step just below te step caption area of te wizard. Do not require te user to memorize information for one step of completing a task and apply it for te next in a wizard-assisted sequence. Weneer necessary, repeat te information for te user to moe troug te sequence wit ease. Windows and layouts A window is a isible area wit defined boundaries witin a screen. A window presents a iew of an object and allows te user to interact wit a computer system. Implementing windows and layouts Size and lay out a window so tat te user does not ae to scroll to see its entirety. Position te most important information in te left side of a resizable window for prominent display. For example, place te object s identifier as te leftmost element in te window title. An application window clips in te rigt side wen te user adjusts its size; srinking te window often ides te information in te rigt side. Place controls of less frequent use out of te iew if te initial size of an action window is not large enoug to display all te controls. Ensure a logical or natural break between te isible and idden portions of a large window. For example, aoid clipping an entry field wit a portion idden from te initial iew. Clearly indicate te idden information, if any, to te user. For example, sow scroll bars. Left-align all te controls witin a column to te rigt of te longest field prompt. Proide te user wit te option to scale or clip te scalable content witin a resizable window. Follow platform-specific conentions for te alignment and order of pus buttons. For example, left-align pus buttons in a browser-based application at te bottom of te page or window. Left-align pus buttons in a Windows-based or GI-based application at te bottom of te window. For applications wit a large number of similar dialogs or pages, place dialog-specific pus buttons to te rigt of tose tat appear on all dialogs or pages. For applications running witin MMC, repeat te actions from any pus button in te Action menu. Aoid arranging pus buttons in more tan two rows. Place pus buttons at te bottom of te window if tey affect te entire window. Place a pus button next to a component tat is adjusted by, or associated wit, te action of te pus button. For example, if a pus button restores te initial alue in an entry field, place te pus button beside tat entry field. Design guidelines 25

34 Aoid using a pus button to cange te size of a window; instead, allow te user to resize te window using te size borders or te Maximize pus button. For example, do not proide a pus button labeled More>> for te user to enlarge a window. Keep pus buttons isible if tey affect te entire window tat can be scrolled ertically. Allow te user to scroll to te area aboe te pus buttons. For example, place pus buttons in a browser-based application on a bar at te bottom of te window. se a notebook to organize groups of controls if tey do not fit in a single window. Aoid placing related controls in separate windows connected by routing coices on pus buttons. Edit^ Create^ Print Eit x pdate user Reset Cancel Ready Rigt-align field prompts next to left-aligned entry fields in a ig-olume data entry window. Te alignments create a narrow ertical column of space between te field prompts and te entry fields. Tis space elps te user quickly scan te coices in te window. Enable te user to adjust te size of eac column in a window, as appropriate. For example, proide column borders for te user to resize a column. Ensure tat te widt of a column, if not adjustable, is sligtly greater tan te lengt of te column eading or items. Make a column, wit an adjustable widt, initially wide enoug to display coices allowed by te aerage column widt. Enable te user to directly manipulate eac column if te order of columns can be canged. For example, allow te user to drag eadings to reorder te columns in te table or click eadings to sort te data in te columns. Group controls in a window. For example, group te controls associated wit te recipient of a memo. To Name Organization Pone Number Fax Number se wite space and indentation to group controls. For example, group te controls associated wit te recipient of a memo under To and indent tem 2 3 caracters from te left margin. 26 ser Interface Arcitecture

35 se a group box only wen a group eading or wite space does not isually distinguis groups of fields in a window. Aoid using a group box around a field of pus buttons or a single field. For example, do not use a group box around a single list box. Place an information area, if proided, at te bottom of a window. Place an information area below te scroll bar and aboe te window border. Place a status area, if proided, between te title bar or te menu bar, if aailable, and te rest of te window. For example, place a status area below te menu bar and aboe column eadings in a window. Proide a mnemonic for eac coice in a window. Select a pus button wen te user presses te Alt key and types in te mnemonic assigned to tat pus button. Wen te cursor is positioned on one of te pus buttons in a group, allow te user to select tat pus button by pressing te mnemonic caracter witout te Alt key. Wen te user presses a key to moe te cursor for selecting a coice in a field, place te cursor on te selected coice; oterwise, place te cursor on te first coice or te default coice. Place te cursor on te default pus button wen te user presses te Tab or Backtab key to moe te cursor to a group of pus buttons. In browser-based applications, make sure tat te default button is te one were te browser normally starts. Wen te cursor is on a pus button and te user presses te Tab or Backtab key in non-browser-based applications, moe te cursor to te next field in te window, not anoter pus button in te same field. Moe te cursor between te fields, from left to rigt and top to bottom, in te window wen te user presses te Tab key. Moe te cursor to te top leftmost field in te window wen te cursor is on te bottom rigtmost field and te user presses te Tab key. Note tat te cursor moement is implemented by te browser in browser-based applications. Moe te cursor between te fields, from rigt to left and bottom to top, in te window wen te user presses te Backtab key. Moe te cursor to te bottom rigtmost field in te window wen te cursor is on te top leftmost field and te user presses te Backtab key. Note tat te cursor moement is implemented by te browser in browser-based applications. Reset to te default pus button wen te cursor is moed away from a field of pus buttons. For example, if te user moes te cursor away from te OK pus button (te default) to te Help pus button and ten to a field of radio buttons, reset to te OK pus button. Do not implement unaailable-state empasis for browser-based applications; continue to display coices or fields. Enable te user to interact wit a field tat is displayed wit unaailable-state empasis. If te user canges a setting to make te field aailable, apply te content of tat field. Design guidelines 27

36 Always proide product identification information. Include te product identification at te top left of te naigation area in browser-based applications. For applications wit menu bars, proide te product identification troug te About coice on te Help menu. se te following fonts or font families for textual elements on a Web page: Arial or Heletica, usually te default sans-serif font of a system, for messages and naigation and orientation elements, suc as labels and titles. Times New Roman, usually te default serif font of a system, for suc elements as task descriptions, entry field labels, tips, and introductory text. Wen proiding grapical user interfaces on suc platforms as Windows, use te fonts selected by te user in te control panel. Proide a splitter bar for te user to adjust te widt or eigt of a pane witin a window. Wen te user moes te pointer oer a splitter bar, cange te pointer to a orizontal or ertical arrow to indicate tat te user can slide te bar to resize a pane. Proide a Task bar on te bottom of te console and a Window menu on te Menu bar if te console supports multiple actie tasks at te same time. List or display of all actie tasks on te Task bar and te Window menu on te Menu bar in te order as eac task is opened. Truncate eac task title and add an ellipsis (...) as more tasks are listed on te Task bar. Display te full title of eac task as te user moes te mouse oer eac truncated task title. Enable te user to easily switc between tasks by clicking on a task on te Task bar or selecting from te Window menu on te Menu bar. Proide a Close sortcut (x) next to te title of eac task on te Task bar. 28 ser Interface Arcitecture

37 Proide a Close all tasks option on te Window menu or on te Task bar. Proide a confirmation dialog before closing all actie tasks. Do not place document links in te caption or oter text between te fields of a form in browser-based applications. Placing a document link in te caption of a form, for example, may cause te Tab or Sift-Tab key to beae in an unexpected manner. Proide te following items troug te Context menu for eac task on te Task bar: Context menu item Sow task Close task Open in new window Description Displays a task in te console (te task window becomes actie) Closes a task after confirmation from te user Starts a new console window for te selected task and remoes te selected task from te existing console Portfolio A portfolio is a customizable iew area tat displays role-based and category-based tasks. Te content of te task list aries depending on te roles tat te administrator as assigned to a user. A portfolio is not intended as a naigation mecanism; it is designed for te user to initiate, perform, and manage tasks in an efficient manner. You can include a portfolio as an optional feature of your design. Implementing portfolio Proide a portfolio on te left side of te console for te user to manage, initiate, and conduct frequently-performed tasks. Make a portfolio pane retractable by allowing te user to open or close it. By default, te portfolio is locked open. Design guidelines 29

38 Enable te user to close te portfolio by clicking on te Close icon (X) onte upper-rigt corner of te portfolio pane. Enable te portfolio in transient state to automatically close after te user selects a task. Proide a portfolio andle on te left edge of te console window after te user closes te portfolio. Te user can reopen te portfolio by left-clicking on or simply moing te mouse oer te andle. In tis case, te portfolio is in transient state. Allow te user to lock open te portfolio by clicking on te pus-pin icon on te upper-rigt corner of te transient portfolio pane. Enable te user to customize te portfolio based on assigned roles. Proide meaningful category eadings for te user to organize and group tasks. se te rigt-pointing triangle to represent a collapsed or closed task group and te upside-down triangle to indicate an expanded or opened task group. Replace te pus-pin icon wit a Close icon on te upper-rigt corner of te portfolio pane after te user locks open te portfolio. Accessibility Accessibility is te capability of an application tat makes all information and tecnology accessible to users wit disabilities. For compreensie accessibility guidelines and cecklists, isit te IBM Accessibility Center at te following Web address: ttp:// Implementing accessibility se te ALT="text" attribute for all isual aids, including grapics, tables, and carts, and concisely describe teir functions. se te ALT="text" attribute for isuals tat do not coney important information or coney redundant information. Clearly associate form labels wit te corresponding elements. Define te content of a Web page in terms of its function and control te presentation wit cascading style seets. se caracter sizes rater tan pixels to design and size te layout of a window. Te user can cange te size of caracters on a Web page, but not te number of pixels, for specific iewing needs. Summarize te content of a grapic or cart or use te Longdesc attribute to link to te description or data. Proide a title for eac frame so tat te user can track frames by teir titles. 30 ser Interface Arcitecture

39 se a descriptie text for links; aoid just saying Clickere or Go. pdate te descriptions and text alternaties as you cange te dynamic content of a Web page. se te eader, caption, and summary attributes for tabular data. se te ID, row, column, or group attributes to enance cell-by-cell reading. Do not rely solely on colors to coney information to te user. Ensure tat te screen does not flicker. Design guidelines 31

40 32 ser Interface Arcitecture

41 Notices Tis information was deeloped for products and serices offered in te.s.a. IBM may not offer te products, serices, or features discussed in tis document in oter countries. Consult your local IBM representatie for information on te products and serices currently aailable in your area. Any reference to an IBM product, program, or serice is not intended to state or imply tat only tat IBM product, program, or serice may be used. Any functionally equialent product, program, or serice tat does not infringe any IBM intellectual property rigt may be used instead. Howeer, it is te user s responsibility to ealuate and erify te operation of any non-ibm product, program, or serice. IBM may ae patents or pending patent applications coering subject matter described in tis document. Te furnising of tis document does not gie you any license to tese patents. You can send license inquiries, in writing, to: IBM Director of Licensing IBM Corporation Nort Castle Drie Armonk, NY S.A Te following paragrap does not apply to te nited Kingdom or any oter country were suc proisions are inconsistent wit local law: INTERNATIONAL BSINESS MACHINES CORPORATION PROVIDES THIS PBLICATIONS AS IS WITHOT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLDING, BT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICLAR PRPOSE. Some states do not allow disclaimer of express or implied warranties in certain transactions, terefore, tis statement may not apply to you. Tis information could include tecnical inaccuracies or typograpical errors. Canges are periodically made to te information erein; tese canges will be incorporated in new editions of te publications. IBM may make improements and/or canges in te product(s) and/or program(s) described in tis publication at any time witout notice. IBM may use or distribute any of te information you supply in any way it beliees appropriate witout incurring any obligation to you. Information concerning non-ibm products was obtained from te suppliers of tose products, teir publised announcements or oter publicly aailable sources. IBM as not tested tose products and cannot confirm te accuracy of performance, compatibility or any oter claims related to non-ibm products. Questions on te capabilities of non-ibm products sould be addressed to te suppliers of tose products. Copyrigt IBM Corp

42 Trademarks IBM is a registered trademark of International Business Macines Corporation in te nited States, oter countries, or bot. Jaa and all Jaa-based trademarks are trademarks of Sun Microsystems, Inc. in te nited States, oter countries, or bot. Microsoft, Windows, Windows NT, and te Windows logo are trademarks of Microsoft Corporation in te nited States and oter countries. NIX is a registered trademark of Te Open Group in te nited States and oter countries Oter company, product, and serice names may be trademarks or serice marks of oters. 34 ser Interface Arcitecture

43 Glossary Tis glossary defines te terms and concepts used or referenced in te IA. A accessibility. Te capability of an application tat makes all information and tecnology accessible to users wit disabilities ACTION CONTROL. A control, suc as a pus button or menu, for immediately processing a user request or applying new settings to an object. action message. Information tat indicates tat a condition as occurred and te user must correct te situation by retrying, coosing an alternatie action, or witdrawing a request. application element. An element in te iew tat is created by te application. C CAPTION. A sort text tat identifies a field, suc as an entry field or a field of ceck boxes. clipboard. A data storage area used for transferring information witin an object or between objects. A clipboard is typically proided by te operating enironment. console. A isual integration mecanism tat proides common actions applicable to te objects it manages. CONSOLE naigator area. A iew used to find objects aailable to te user witin a console. Te CONSOLE naigator generally contains te iews of objects, faorites, and tasks for te console. CONSOLE work area. Te area of a console used to display te iews of te objects identified in te CONSOLE naigator area. Any aailable iew of an object, including icons, controls, or application elements, can be displayed in te CONSOLE work area. It is troug tese iews tat te user creates, modifies, or inspects any aailable object. CONTAINER. An object for olding oter objects. A folder is an example of a container. control. A isual user interface component tat allows te user to interact wit data. Typical controls are pus buttons, radio buttons, notebooks, and entry fields. Controls are often identified by text, suc as eadings, labels in pus buttons, field prompts, and titles in windows. [Action Control] [Control] [Setting Control] [Naigation Controls] combination box. A control, often referred to as a combo box, tat combines te functions of an entry field and a list box. A combination box contains a list of objects for te user to scroll and select for completing te entry field. Alternatiely, te user can type input directly into te entry field. Menu Pusbutton Tree [View] Scroll Bar Notebook <<iew>> Console List Box Ceck Box Radio Button Entry Field Combo Box 1 [Console] Naigator Area 1..* [Console] Work Area switces to Task Bar control box. A square box wit associated text to represent a BINARY coice tat toggles on and off. An X or a appears in te box if te user selects te control. Te user can cancel te selection by selecting te control again. Tree [View] (from Controls) base for 1 1..* 1..* rendered by rendered by rendered by Root (from examples) 0..* Icon (from IA) Folder (from examples) 0..* <<iew>> View (from IA) Object (from IA) conentions. Specific, widely accepted, or prescriptie practices, typically in support of a set of guidelines and principles. Conentions spell out te design details of a user interface, suc as te number of pixels for an image. In fact, conentions are generally so specific and understandable tat tey do not require any interpretation on your part. copy. An action coice for copying a selected object onto te clipboard. Copyrigt IBM Corp

44 cursor. A isible indication of te position were te user interacts wit te keyboard. Te keyboard cursor can be eiter te selection cursor or te text cursor. cut. An action coice for remoing a selected object and placing it onto te clipboard. D data entry field. A specialized ersion of an entry field wit specific requirements for te input. For example, a data entry field may restrict te input alue to be numeric or in a fixed pattern, suc as a date or a telepone number. data transfer. Te transmission of data from one object to anoter, including clipboard operations, suc as Cut, Copy, and Paste, and direct manipulation tecniques, suc as dragging. E entry field. A control, wit clearly-defined boundaries, for te user to enter certain data. EIM. F Exposed Implementation Model. FAVORITES LIST. A list of stored objects tat te user as identified for frequent use. faorites iew. A iew sowing objects tat te user as identified for frequent use. Te user can add any object in te console to te faorites list. file. A data object stored by te system. Te file menu proides access to action coices related to te current file. folder. A container used to old and organize objects. Typically, a folder contains files and folders. G guidelines. Specific courses of action, based broadly on a set of principles. Guidelines can be construed as good practices witin a general design domain, suc as Windows GI or Jaa Swing. Tey are generally more specific tan principles and require less design knowledge and experience on your part to understand and interpret tem. H HELP. One or more sort paragraps tat explain in detail te function of an object or attribute. Help can also be a grapical or audible element. 1..* [Hint] (from RenderableInterface) [Hint] (from RenderableInterface) [Renderable] (from RenderableInterface) [Caption] (from RenderableInterface) rendered by rendered by rendered by [Platform Help System] [Quick Help View] Tool Tip <<iew>> View Help is aailable wen te user requests it troug standard Help mecanisms. For example, on Windows, te user can access to Help by pressing te Help key (F1) or selecting a coice from te Help menu. HINT. A simple sentence tat describes te function of an object or attribute. Hint elp is aailable wen requested. Howeer, it may automatically be displayed. For example, int text may be sown as a tool tip, oer elp, or a message in te information area of a window. I icon. A grapic representation of an object, consisting of an image, te background of te image, and a label. information area. A part of te [console] work area for displaying messages associated wit te object or task witin te work area. information message. Information tat indicates tat a condition beyond te user s control as occurred or tat te user must see additional information about te status of a completed process. L list box. A control tat contains a list of objects or settings controls for te user to select. M menu. A list of coices applicable to an object. A menu may contain actions, settings, or bot. menu bar. A menu tat contains coices for access to pull-down menus. message. Information displayed in a window responding to an unexpected eent, suc as an error, or proiding additional information on te status of a process. Tere are tree types of messages: information messages, warning messages, and action messages. 36 ser Interface Arcitecture

45 mouse. A commonly-used pointing deice wit one or more buttons for te user to interact wit a computer system. N NAVIGATION CONTROL. A control tat allows te user to adjust a iew or present a new iew. Naigation controls do not cause canges to te objects. Tree iews, notebooks, and scroll bars are all naigation controls. notebook. A grapical representation of a tabbed page in a notebook. Tabbed diider pages separate te sections of te notebook. O object. A user interface component tat enables te user to perform a task. An object can appear as text or an icon. objects iew. Te main component of te naigator. An objects iew is based on te root object for te console. Te objects are displayed in a tree iew. Te icons in te tree iew represent te folders, files, and resources tat te user is administering. Te user selects an object from te iews in te naigator, and a iew of tat object is generated in te work area. If te user subsequently selects anoter object, te iew for te new object replaces te current one in te work area. Te user ten as an option to start a new console wit te selected object in te naigator as its root. P paste. An action coice for copying te content of te clipboard and placing it into a target object. Input pointer. A isible cue, typically in te sape of an arrow, indicating te position of a pointing deice. Te sape of te pointer canges as te user moes it for special functions, suc as sizing a window, positioning te text cursor, or following a yper-link. pointing deice. A deice, suc as a mouse, trackball, or joystick, used to moe a pointer on te screen. pop-up menu. A menu tat, wen requested, is displayed next to te associated object. A pop-up menu contains coices appropriate for a gien object or set of objects in te current context. It is terefore also referred to as a context menu or contextual menu. portfolio. A customizable iew area tat displays role-based and category-based tasks. predefined actions. Set functions tat are often proided on pus buttons. principles. Fundamental ideals and beliefs tat guide your decision-making and courses of action in acieing a predefined goal. Principles are fairly abstract. You must ae extensie interface design knowledge and experience to understand and interpret tem. pull-down menu. A menu extended from a selected coice on a menu bar or from te system menu symbol. Te coices in a pull-down menu are related in some manner. pus button. A button, labeled wit text, grapics, or bot, tat represents an action to be initiated by te user. R radio button. A button, often sown as a circle wit text beside it. Two or more radio buttons are usually combined to represent a fixed set of coices. Te user can only select one coice. If selected, te circle representing te coice becomes partially filled. Pointing Deice Keyboard is deliered to RENDERABLE ATTRIBTES. Te primitie data alues associated wit a RENDERABLE OBJECT by name. Eac RENDERABLE ATTRIBTE is associated wit a RENDERABLE ATTRIBTE TYPE, wit te latter representing a constraint on te alues allowed for te former. is represented by Pointer is represented by Cursor RENDERABLE OBJECT. Te entities for te user to manipulate. RENDERABLE objects appear in many places in te interface. For example, a file is a RENDERABLE object in most operating systems. moes on moes witin Screen Screen Glossary 37

46 An action tat te user may coose to inoke upon te RENDERABLE OBJECT. RENDERABLE OPERATION. [Renderable] user assistance and elp. Textual, grapical, or audible elements tat describe te functions or properties of an object and elp te user perform a task. It includes CAPTION, HINT, and HELP. 0..* [RenderableModel] [RenderableOperation] Action [RenderableObject] Object 0..* 0..* 0..* [RenderableAttribute] Property V iew. An interactie element tat facilitates te interaction between te system and te user. A iew may be isual or multimedia-based, suc as an audio stream troug a telepone. 0..* 1 [RenderableAttributeType] root. A base object for a group of objects organized by a console. W window. A isible area wit defined boundaries witin a screen. A window presents a iew of an object and allows te user to interact wit a computer system. S screen. Te pysical surface of a display deice upon wic information is sown to te user. SETTING CONTROL. A control tat sets or displays te caracteristics of an object. Typical setting controls include ceck boxes, list boxes, radio buttons, entry fields, and combo boxes. Window is displayed on 0..* Screen contains <<iew>> View T 0..n task. A facility, suc as a procedure or wizard, tat elps te user complete a piece of work. task bar. An interactie elements tat contains sortcuts to all actie tasks. Te user can easily naigate from one task to anoter troug te task bar. task iew. Te representation of a procedure for te user to complete a task. tree VIEW. A control for a ierarcical display of a group of related objects. 38 ser Interface Arcitecture

47 Index Special Caracters ALT attribute 30 A accessibility 30 action coices 16, 17 menu 25 message 18, 20 window 16 affinity affordance 7 subtractie design 7 isual ierarcy 7 isual sceme 7 affordance 7 alarm 22 assistance captions, ints, system elp 7 tasks, performing 7 aailability objects in sequence 8 use of modes, aoiding 8 B bar, menu 15 bencmark assessment 2 box, ceck 15 box, combo 14 box, list 15 business logic 4 busy-pointer 20 button, pus 14 button, radio 15 button, spin 14, 15 C caption 14, 24 cascaded menu 15 cascading style seets 30 caracter sizes 30 ceck box 15 ceck-box coice 23 column eading 14 column widt 26 combo box 14 combo box, drop-down 14 common renderer interface 4 competitie ealuation 2 completion of a process 20 consistency design 1 ease of use 1 container 15, 18 contextual elp 19, 23 controls proiding 13 current state of te window 23 D data transfer direct manipulation 18 default alue for a field 13 design and walk-troug 2 design considerations designer s model 2 implementor s model 2 platforms or enabling enironments 3 product structure 4 CD process 2 user s model 2 writing systems 3 designer s model 2, 4 direct manipulation canceling 19 implementing 19 proiding 18 tecniques 19 directionality 3 drop-down combo box 14 drop-down list 15 E edition notice ii elements of a wizard 25 ellipsis 16 enabling enironments 1 guidelines Jaa 3 NIX 3 Windows 3 ISO/IEC standards 3 encouragement interfaces, exploring 8 user s expectations and goals, understanding 8 entry field 14, 22, 25 ealuation and alidation 2 exposed implementation model 4 F familiarity prior knowledge of te system 8 user-friendly system 8 isual designs and interaction tecniques 8 field prompt 25 field, entry 14 fonts for textual elements 28 form labels 30 Copyrigt IBM Corp

48 fundamental guidelines 13 G group box 26 grouping te controls 27 guidelines accessibility 13, 30 controls 13 data transfer 13, 18 definition 1 fundamental 5, 13 guidelines marked wit a 5 guidelines marked wit a 5 message andling 13, 19 portfolio 13, 29 predefined actions 13, 16 recommended 5, 13 user assistance 13, 23 windows and layouts 13, 25 H Help area 24 Help coice 23 Help index 23 idden information 25 int text 13, 24 I IBM network-based products 1 identification information 27 implementor s model 2 indexing conentions 23 indicator window 20 information area 24, 26 information message 20 inalid user-specified alue 13 K key assignments 23 L list box 15 list, drop-down 15 M market definition 2 menu bar 15, 23, 27 menu bars 27 menu, cascaded 15 menu, pop-up 15 menu, pull-down 15 message andling 19 message identifier 22 message symbol 22 message text 22 mnemonic 27 model renderer 4 monocrome screens 13 N network-based products 1 non-text-entry controls 14 notation conentions diagrams 5 special caracters 5 typefaces 5 notebook 15, 26 notebook controls 14 notices edition ii legal 33 O obiousness direct or natural interaction 8 object-oriented interfaces 8 realistic representations 8 isual or textual cues 8 P partitioning a ard drie 24 personalization indiidual needs and desires 9 system personality 9 platform-specific conentions 19, 25 platforms 1 guidelines Jaa 3 NIX 3 Windows 3 ISO/IEC standards 3 pop-up menu 15 portfolio 29 portfolio andle 30 portfolio pane 29 predefined actions 16 preface iii principles affinity 7 assistance 7 aailability 7, 8 definition 1 encouragement 7, 8 familiarity 7, 8 obiousness 7, 8 personalization 7, 9 safety 7, 9 satisfaction 7, 10 simplicity 7, 10 support 7, 10 ersatility 7, ser Interface Arcitecture

49 product structure 4 progress indicator 20 progress indicators 20 property dialogs 17 pull-down menu 15 pus button 14 pus-pin 30 R radio button 15 recommended guidelines 13 renderable interface 4 renderer 4 resizable window 25 routing coice 26 S safety actie communication capability 9 contextual elp 9 keeping te user of trouble 9 isual cues 9 satisfaction instant feedback 10 results of user actions, preiewing 10 uninterrupted progress 10 saed-state alues 17 screen readers 13 screen text 23 scroll bars 25, 27 searc criteria 23 secondary window 22 selected-state empasis 18 sortcut keys 23 simplicity functions for easy access, organizing 10 intuitie and usable functions 10 number of objects and actions, minimizing 10 size of a control 14 slider 14, 15 source and target objects 18 source empasis 19 special caracters small caps brackets 5 ceck marks 5 empty-boxes 5 spin button 14, 15 splitter bar 28 status area 27 subtractie design 7 support constant working context, maintaining 10 user control oer te system, ensuring 10 system menu 17 T tabular data 31 target empasis 19 task analysis 2 task bar 28 text-entry controls 14 trademark 34 transfer data direct manipulation 19 transient state 30 tree 15 typefaces boldface 5 italics 5 monospace 5 CD process bencmark assessment 2 competitie ealuation 2 design and walk-troug 2 ealuation and alidation 2 market definition 2 task analysis 2 IA consistency 1 design considerations 1 guidelines 1 introduction 1 notation conentions 1, 5 principles 1 unaailable-state empasis 23, 24, 27 user assistance 16, 23 user s model 2 V ersatility interaction tecniques, proiding 10 situation-specific interaction metods 10 isual cues 13 isual ierarcy 7 isual indication 13 isual sceme 7 W warning message 20 wite space and indentation 26 window menu 28 window title 14 windows and layouts 25 wizards 24 work or naigator area 19 writing systems 3 Index 41

50 42 ser Interface Arcitecture

51

52 Printed in te nited States of America on recycled paper containing 10% recoered post-consumer fiber.