DOCSLIB.ORG

Combobox User Experience Documentation

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Combobox User Experience Documentation ComboBox User Experience Documentation Author: Dusan Pavlica 1. Introduction This document is the user experience specification for the JavaFX ComboBox control. 2. Overview A ComboBox is a control that contains info part on the left side and drop down arrow on the right side. User can click the arrow to invoke the list of choices. If the list is too long then scrollbar appears. Currently selected item appears next to the drop down arrow and it can be editable or non editable. A "Drop Down List" UI control or "Non-editable Combo Box" terms are used instead of a Combo Box sometimes, so let's take a look at the following examples of Drop Down list/Combo Box UI control to get a general idea what types exist on web, TV and desktop platform: Figure 1: Combo Box in Swing. There is non editable Combo Box/ Drop Down list on the left hand side. Figure 2: JavaFX Drop Down List experimental implementation (Author calls it Combo Box) Figure 3: Editable Combo Box on Windows 7 platform 3. Interaction Design - Implemented Features 3.1 Introduction A combo box is a combination of a list box and a single-line textbox, allowing the user to either type a value directly into the control or choose from the list of existing options. Also it allows user to add a new value if it doesn't exist in the list. The term "combo box" is sometimes, incorrectly, used to mean "drop-down list". This distinction between "combo box" and "drop down list" is clarified with terms such as "non-editable combo box" (or something similar). Combo boxes are often applied to provide autocomplete or autotype functionality in a convenient way to the user. Let's look at the following basic UI elements of combo box: Figure 4: Basic look of Editable Combo Box There is editable text box area on the top left hand side and drop-down button placed next to it. If user clicks the button the drop-down list is invoked. User can choose an item from the list and it will be populated in the text field area. Or he can add a value into textfield manually. 3.2 Detailed Behavior Basic Features Combo Box - Combo Box can exist in the following different states: Normal state Focused User can get to the Focused state by Tab Traversal or by clicking the textfield state area. Then there is a focus indication around the Combo box Also a key cursor is displayed because the Combo box switches into Edit state right after it gets focus. Disabled User can't edit the text or expand dropdown list if the Combo Box is disabled. The state Combo Box isn't focusable in that state and user can't use it. Expanded Drop-down list appears when user clicks the button. Also there is selection and state hover indications visible in the drop down list. User confirms a selection in the dropdown list by mouse click or by dragging from the drop-down arrow to the selection and releasing the mouse button. Hover This visual indication appears when user points his mouse cursor above the drop (Mouse down button in the Combo Box. Over) state Pressed User clicks the drop down button. /Armed state Edit state - User can edit value in the Combo Box. User confirms the edited value by pressing different Enter key. position of the cursor Edit state - User can select the whole text in the textfield by pressing Ctrl+A or by double the whole click. value is selected Textfield - There has to be clear indication that textfield is editable in case of Combo Box and non-editable in case of Drop Down list. That distinction is typically expressed by showing the textfield as a separated UI element or by standard background color of the editable textfield (color of button in case of non-editable Combo Box). Some implementations of Combo Box display visual separator if user hovers the Combo Box (try to hover the Combo Box below): Prompt message inside the textfield area (a simple label or combined with a shortcut too) A prompt is a label or short instruction placed inside a textfield as its default value. It can be just static text in case of non-editable Combo Box: Or some kind of hint that disappears once users type something into the textfield or it gets focus. Then typical color of the text is grey instead of black one: Drop Down button Drop-down button is typically placed on the right hand side to textfield and clearly visually separated if the textfield is editable. We should allow to customize it (by CSS), so it can look more like a part of the textfield, e.g.: Or it can be placed on the left side of the textfield: Drop Down list area (preview, items in the list, separators, custom cells, scroll bar/arrows) Text items - There are just text items in the expanded Combo Box list and user can choose one item by U p/Down arrow keys or by mouse. The selected item is highlighted by different color then focused one and it's populated to the textfield area. User makes confirmation of the focused item by Space or Enter Key. He can cancel the drop down list by Esc key or upon clicking on the drop down button. Scroll Bar is being displayed when there are more items in the drop down list than the defined max. The maximum visible amount can be customized. We use Up & Down arrow buttons instead of Scrollbar for Choice Box UI control or for Menu UI control and it's ok because they are expected to contain only limited amount of items. Items with icons - There can be icons placed next to the items in the drop down list. Then the textfield typically contains only the text information. Complex Custom Cells - Items in the list can be visualized as complex custom cells instead of simple labels with icons. When an item is selected then just the main text information is populated into the textfield. Preview (Many items in the list, Simple Drop Down list, Editable textfield and Autocompletion, Simple text as a value) - The whole dropdown list area works as a preview for the value in the textfield or every item in the drop down list is showing a preview of items and their own values (e.g. Combo Box showing list of fonts). Autocomplete functionality (Many items in the list, Simple Drop Down list - Search results, Editable textfield, Simple text as a value. E.g. Google, Firefox, or Adobe tools) - Drop down list appears automatically when user starts to type a text in the textfield and it will display list of suggestions. Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Filed as a feature request RT-18130. 4. Navigation Mouse Support The following table describes actions that are performed when users click on: Button Action Drop Down icon Display/Hide the active list. Item that is displayed in the textfield is selected when the active list is open. TextField [Non-editable Combo box] Display/Hide the active list. Item that is displayed in the textfield is selected when the active list is open. [Editable Combo box] Place the I-beam cursor into the textfield. Item in the list Close the active list and commit the value. Outside the list [Active list is open] Close the active list. Touch Support The following table describes actions that are performed when users tap on: Button Action Drop Down icon Display/Hide the active list. Item that is displayed in the textfield is selected when the active list is open. TextField [Non-editable Combo box] Display/Hide the active list. Item that is displayed in the textfield is selected when the active list is open. [Editable Combo box] Place the I-beam cursor into the textfield. Item in the list Close the active list and commit the value. Outside the list [Active list is open] Close the active list. Directional Keys + OK/Select Support The following table describes actions that are performed when users navigate to the Combo box using the arrow keys and press: Keystroke Action OK/SELECT on Display the active list. Item that is displayed in the textfield is selected when the active list is open. Drop Down icon OK/SELECT on [Non-editable Combo box] Display the active list. Item that is displayed in the textfield is selected when the active list is open. TextField [Editable Combo box] Place the I-beam cursor into the textfield. OK/SELECT on Close the active list and commit the value. an item in the list UP/DOWN keys [Active list is open] Move the selection up/down one item. LEFT/RIGHT [Editable Combo box] Move the I-beam cursor left/right one character within the textfield. If the I-beam cursor is right behind the last keys character in the textfield, select Drop Down icon (assumption: Drop Down icon is placed on the right/left side of the textfield). Please note that Editable Combo box is not supported on platforms with lack of keyboard. Keyboard Support The following table describes how keystrokes should be processed in case Combo box has focus on Win and Mac platforms: Keystroke Action F4 Open/Close the active list. Item that is displayed in the field is selected when the active list is open. ALT-UP/DOWN Open/Close the active list. Item that is displayed in the field is selected when the active list is open.
Load more

Recommended publications
  • Effects of Scroll Bar Orientation and Item Justification in Using List Box Widgets
    Effects of scroll bar orientation and item justification in using list box widgets G. Michael Barnes Erik Kellener California State University Northridge Hollywood Online Inc. 18111 Nordhoff Street 1620 26th St., #370S Northridge, CA 91330-8281 USA Santa Monica, CA 90404 +1 818 677 2299 +1 310 586 2020 [email protected] [email protected] Abstract List boxes are a common user interface component in graphical user interfaces. In practice, most list boxes use right-oriented scroll bars to control left-justified text items. A two way interaction hypothesis favoring the use of a scroll bar orientation consistent with list box item justification was obtained for speed of use and user preference. Item selection was faster with a scroll bar orientation consistent with list item justification. Subjects preferred left- oriented scroll bars with left-justified items and right-oriented scroll bars with right-oriented items. These results support a design principle of locality for user interface controls and controlled objects. Keywords List widgets, scroll bar, graphical user interface design, usability study Introduction This electronic publication is an updated statistical analysis of Erik Kellener’s unpublished masters’ thesis, “Are GUI Ambidexterous” completed at California State University Northridge, CA. 1996. List boxes are used in many graphical user interfaces (GUI) today. Whether its a desktop P.C., a personal digital assistant (PDA) or an information kiosk at the grocery store, list boxes are integrated into most GUIs. The list box GUI component is usually present in an interface that asks a user to make a selection from a list of items. The size of the list of items can vary significantly, however the screen area required by a list box is usually fixed.
    [Show full text]
  • Software Manual IDEA – the Software
    Software Manual IDEA – The Software Version 1.1 Open Technologies Srl WWW.SCANINABOX.COM Copyright © 2016 Open Technologies Srl First printing, June 2016 Contents I Part One 1 IDEA - the application for Scan in a Box .........................7 1.1 Application Interface7 1.1.1 Project management panel..........................................8 1.1.2 3D view panel....................................................9 1.1.3 Toolbar......................................................... 10 1.1.3.1 Project management (orange)........................................... 10 1.1.3.2 Acquisition (bordeaux)................................................ 10 1.1.3.3 Alignment (light blue)................................................. 11 1.1.3.4 Selection (turquoise).................................................. 11 1.1.3.5 Rendering (pink).................................................... 12 1.1.3.6 General (purple).................................................... 12 1.1.3.7 Features specific to range images (blue)..................................... 13 1.1.3.8 Features specific to triangle meshes (light green)................................ 13 2 Using IDEA ................................................... 17 2.1 Optical set-up 17 2.1.1 Optical set-up mode................................................ 19 2.1.2 Calibration of the optical head........................................ 22 2.2 Capture and alignment 25 2.2.1 Free mode acquisition............................................... 26 2.2.2 Turn Table acquisition mode..........................................
    [Show full text]
  • How to Create and Maintain a Table of Contents
    How to Create and Maintain a Table of Contents How to Create and Maintain a Table of Contents Version 0.2 First edition: January 2004 First English edition: January 2004 Contents Contents Overview........................................................................................................................................ iii About this guide..........................................................................................................................iii Conventions used in this guide................................................................................................... iii Copyright and trademark information.........................................................................................iii Feedback.....................................................................................................................................iii Acknowledgments...................................................................................................................... iv Modifications and updates..........................................................................................................iv Creating a table of contents.......................................................................................................... 1 Opening Writer's table of contents feature.................................................................................. 1 Using the Index/Table tab ...........................................................................................................2 Setting
    [Show full text]
  • Screencreator Menus and Toolbars
    14 ScreenCreator Menus and Toolbars Chapter . Scr Menu Cr Menu Menu Librar Menu T Menu Menu Pr Menu Menu 4–2 The Menus and Toolbars ScreenCreator Menus The Screen Menu The Screen menu contains commands for creating a new screen, opening, closing or deleting screens, as well as printing a screen and editing all screen colors. If the Screen menu command can also be called by a Standard Toolbar tool, the tool is shown below the menu command. The large Screen menu on the near right is available when a screen is open. The small Screen menu on the Toolbars far right is available if no screen is open. The Menus and Screen > New creates and opens a new Untitled screen. Screen > Open... calls the Open Screen dialog box, allowing you to select and open a screen. Menus and Toolbars Selecting Simple Display is the opposite of Details in other Windows Open boxes and only shows the screen icons. 4–3 The Menus and Toolbars Screen > Open... Clicking Select... brings up the normal Windows Select Folder box. The Preview function can be The Menus and very useful for selecting the Toolbars right screen. All screens of the current project are shown. Screen > Close does just that, closes the selected screen. Screen > Save simply saves the current screen, with any changes you may have made. and Toolbars Menus 4–4 The Menus and Toolbars Screen > Save As... calls the Save Screen dialog box, allowing you to save the current screen (under a different name or under a different registration number). Compile When Saving can be deselected to allow creating and saving screens without assigning PLC addresses to parts.
    [Show full text]
  • Zoomtext Quick Reference Guide Version 10
    ZoomText Quick Reference Guide version 10 Contents Welcome to ZoomText 10 ................ 3 Cursor Enhancements ............................24 System Requirements ............................... 4 Focus Enhancements ..............................25 Installing ZoomText ................................. 5 Font Enhancements .................................26 Activating ZoomText ............................... 6 Desktop Finder ........................................27 Starting ZoomText .................................... 8 Web Finder ...............................................28 ZoomText User Interface ......................... 9 Text Finder ...............................................31 Enabling and Disabling ZoomText ...... 11 Smooth Panning ......................................33 Magnifier Toolbar .......................... 12 Reader Toolbar .............................. 35 Setting the Magnification level ............. 13 Turning Speech On and Off ...................36 Selecting a Zoom Window .................... 14 Adjusting the Speech Rate .....................37 Adjusting a Zoom Window ................... 16 Synthesizer Settings ................................38 Using the Freeze Window ..................... 17 Typing Echo .............................................39 Using View Mode ................................... 18 Mouse Echo ..............................................40 Dual Monitor Support ............................ 19 Verbosity...................................................41 Color Enhancements .............................
    [Show full text]
  • Horizontally Scrollable Listboxes for Windows 3.X, Using C++
    Horizontally Scrollable ListBoxes for Windows 3.x, using C++ Ted Faison Ted is a writer and developer, specializing in Windows and C++. He has authored two books on C++, and has been programming in C++ since 1988. He is president of Faison Computing, a firm which develops C++ class libraries for DOS and Windows. He can be reached at [email protected] List boxes are among the most commonly used child controls in Windows applications. List boxes are typically used to show lists of files, fonts, or other variable-length lists of textual information. To add a list box to a dialog box, you generally edit a resource file, using programs such as Microsoft's Dialog Editor or Borland's Resource Workshop. Windows handles most of the list box details transparently. For example, if you add strings to a list box, Windows will automatically put a scroll bar on the control when the list box contains more strings than can be displayed in the client area of the list box. Windows handles scroll bar events - such as moving the thumb or clicking the up/down arrows - without any need for user code. Displaying a list of files in a list box is a somewhat easy task, because filenames have a predefined maximum number of characters. When you create the list box resource, you will generally make the control wide enough to display the longest filename. But what if you use a list box to display strings of varying and unknown length, such as the names of people or the titles of your CD collection ? You could obviously make the list box wide enough to accommodate the widest string you expect, but that would not only look pretty bad, but also waste a great deal of space on the screen.
    [Show full text]
  • Listbox User Manual
    LISTBOX USER MANUAL (Version: 1.2, December2015) This guide explains how to use the basic functionalities of the ListBox v 4.2. www.athensa.tv Legal notice The information in this manual is furnished for informational use only. No part of this manual may be reproduced or transmitt ed in any form or by any means, electronic or mechanical, for any purpose, without the prior written permission of ATHENSA LLC. The software, described in this manual, is owned by DMT Ltd and ATHENSA LLC. It is protected by Bulgarian Copyright Law, as well as by international copyright treaties, and may be used or copied only in accordance with the license agreement. ATHENSA LLC provides this manual “as is” without any warranty, either express, or implied. This publication may contain typographical errors or technical inaccuracies. While every precaution has been taken in the preparation of this document, ATHENSA LLC assumes no responsibility for errors or omissions. Nor is any liability assumed for damages, resulting from the use of the information, contained herein. Changes are periodically made to the information herein. They will be incorporated in new versions of the manual. Please, check the ATHENSA website regularly for User Manual updates. DMT Ltd. and/or ATHENSA may introduce changes or improvements in the products, described in this manual at any time, without any special notice. Please, address your comments or questions to: ATHENSA LLC 2970 Clairmont Road NE, Suite 640, Atlanta, Georgia 30329, USA Tel. +1 (404) 424 9283 Fax +1 (404) 835 1705 [email protected] https://athensa.tv/ 2 Contents LEGAL NOTICE..............................
    [Show full text]
  • Manual – Remote Control Page 2 of 111 7.2 Authenticating on the Remote Computer Using a Windows User Account 28
    TeamViewer 10 Manual Remote Control Rev 10.3-201506 TeamViewer GmbH • Jahnstraße 30 D-73037 Göppingen www.teamviewer.com Table of contents 1 About TeamViewer 5 1.1 About the software 5 1.2 About the manual 5 2 Basics 7 2.1 How TeamViewer works 7 2.2 Description of the main TeamViewer window 7 3 Establishing a connection with TeamViewer 10 4 The Remote Control connection mode 11 4.1 Remote Control window options 11 4.2 Remote computer options in the TeamViewer Panel 18 5 The File Transfer connection mode 21 5.1 Options in File Transfer connection mode 21 5.2 Transferring files using drag and drop 23 5.3 File transfer via the Windows context menu 24 6 The VPN connection mode 25 6.1 Sample uses of TeamViewer VPN 25 6.2 Requirements for using TeamViewer VPN 25 6.3 VPN dialog box options 26 7 Other connection options 27 7.1 Establishing a LAN connection using the IP address 27 TeamViewer 10 Manual – Remote Control www.teamviewer.com Page 2 of 111 7.2 Authenticating on the Remote Computer using a Windows user account 28 7.3 Establish a connection via a Windows shortcut 29 7.4 Connections to your own computers without a password. 30 8 Computers & Contacts – Managing Contacts 32 8.1 The TeamViewer account 33 8.2 Computers & Contacts options 37 8.3 Service cases 53 8.4 Integrated system health checks 56 9 Multimedia functions 58 9.1 Options within the Session list 58 9.2 Transmitting webcam video to your partner 58 9.3 Talk to your partner via Voice over IP or conference call 59 9.4 Chatting with your partner during a TeamViewer session 61 9.5
    [Show full text]
  • IG7013-Toolbars.Pdf
    Impress Guide Appendix B Toolbars Copyright This document is Copyright © 2021 by the LibreOffice Documentation Team. Contributors are listed below. You may distribute it and/or modify it under the terms of either the GNU General Public License (http://www.gnu.org/licenses/gpl.html), version 3 or later, or the Creative Commons Attribution License (http://creativecommons.org/licenses/by/4.0/), version 4.0 or later. All trademarks within this guide belong to their legitimate owners. Contributors To this edition. Peter Schofield Dave Barton Feedback Please direct any comments or suggestions about this document to the Documentation Team’s mailing list: [email protected] Note Everything sent to a mailing list, including your email address and any other personal information that is written in the message, is publicly archived and cannot be deleted. Publication date and software version Published February 2021. Based on LibreOffice 7.0. Using LibreOffice on macOS Some keystrokes and menu items are different on macOS from those used in Windows and Linux. The table below gives some common substitutions for the instructions in this document. For a detailed list, see the application Help. Windows or Linux macOS equivalent Effect Tools > Options LibreOffice > Preferences Access setup options menu selection Right-click Control+click or right-click Open a context menu depending on computer setup Ctrl (Control) ⌘ (Command) Used with other keys F11 ⌘+T Open the Styles deck in the Sidebar Documentation for LibreOffice is available at
    [Show full text]
  • Quickly Customize Toolbars and Buttons Creating Custom Toolbars Is One of the Easiest Bar Will Be Saved
    Hands On User Level New/Casual Advanced Quickly Customize Toolbars and Buttons Creating custom toolbars is one of the easiest bar will be saved. ways to tailor ArcGIS desktop applications to 3. Under Categories, click the category contain- the way you work. In addition to positioning ing the command to add. Under Commands, toolbars in a specific area of the application, click the specific command. Drag the command Modify you can group commands on a custom toolbar. to the new toolbar and drop it. Alternately, click one of Save mouse clicks by creating a new toolbar the Add From File button and browse to the loca- the 200 that contains frequently used menu choices, tion of the code you would like to attach to the icons that new macros, or custom commands from an- button and drag the file to the toolbar. ship with other source. 4. Right-click on the new button and choose ArcGIS Change Button Image from the context menu or create Creating a Custom Toolbar to access the button icon palette. Select one of your own. 1. Choose Tools > Customize from the main the icons displayed or click the Browse button menu. to choose a custom image or another of the icon 2. In the Customize dialog box, click on the images that ship with ArcGIS. ArcGIS stores Make Your Own Icons Toolbars tab. icons in arcexe82\bin\incons. Click Open to add You can modify any of the 200 icon files that 3. Click the New button and type the name of the icon. ship with ArcGIS or create your own using the new toolbar.
    [Show full text]
  • Graphical User Interface Design Document
    EUROPEAN COMMISSION EUROPEAN MARITIME SAFETY AGENCY Cais Do Sodré 1249-206 Lisbon, Portugal SafeSeaNet Graphical User Interface Design Document NSW Prototype Document version: 1.78 Document release date: July 2015 NSW Prototype Version: 1.78 Graphical User Interface Design Document July 2015 Sa fe Se a N e t Document Approval NAME DATE SIGNATURE Prepared by: E. Thanasopoulos 03.07.2015 M. Ntirogianni C. Trigonis Checked by: A. Argyropoulos 07.07.2015 Quality control by: N. Karioti 07.07.2015 Approved by: G. Carayannis 07.07.2015 Distribution List COMPANY NAME FUNCTION FOR INFO / APPROVAL EMSA Duchesne Philippe EMSA Abela Carmelo Member States SSN central system contractor Change control History VERSION DATE AUTHOR DESCRIPTION 0.10 5 Aug 2013 Intrasoft First Draft submitted to internal QA for International Review. 0.90 12 Aug 2013 Intrasoft Submitted to EMSA for Review. International 1.00 05 Sep 2013 Intrasoft Incorporated EMSA review comments. International 1.10 18 Oct 2013 Intrasoft Defined the Consult Acknowledgement web International pages and updated the Authority Information Exchange web pages. 1.20 29 Nov 2013 Intrasoft Incorporated EMSA review comments. International 1.30 16 Dec 2013 Intrasoft Updated according to the SDD design review International teleconference on 09/12/2013. 1.40 18 Jan 2014 Intrasoft Updated to incorporate the additional International functionalities for the NSW prototype based on the SC#07 evolutive maintenance task. 1.45 17 Mar 2014 Intrasoft Updated to incorporate EMSA review International comments. 1.50 23 May 2014 Intrasoft Updated to incorporate design changes part International of SC#09. Submitted to EMSA for review 2 of 62 NSW Prototype Version: 1.78 Graphical User Interface Design Document July 2015 Sa fe Se a N e t 1.55 05 Jun 2014 Intrasoft Updated to incorporate EMSA review International comments.
    [Show full text]
  • An Interactive Toolkit Library for 3D Applications: It3d
    Eighth Eurographics Workshop on Virtual Environments (2002) S. Müller, W. Stürzlinger (Editors) An Interactive Toolkit Library for 3D Applications: it3d Noritaka OSAWA†∗, Kikuo ASAI†, and Fumihiko SAITO‡ †National Institute of Multimedia Education, JAPAN *The Graduate University of Advanced Studies, JAPAN ‡Solidray Co. Ltd, JAPAN Abstract An interactive toolkit library for developing 3D applications called “it3d” is described that utilize artificial reality (AR) technologies. It was implemented by using the Java language and the Java 3D class library to enhance its portability. It3d makes it easy to construct AR applications that are portable and adaptable. It3d consists of three sub-libraries: an input/output library for distributed devices, a 3D widget library for multimodal interfacing, and an interaction-recognition library. The input/output library for distributed devices has a uniform programming interface style for various types of devices. The interfaces are defined by using OMG IDL. The library utilizes multicast peer-to-peer communication to enable efficient device discovery and exchange of events and data. Multicast-capable CORBA functions have been developed and used. The 3D widget library for the multimodal interface has useful 3D widgets that support efficient and flexible customization based on prototype-based object orientation, or a delegation model. The attributes of a widget are used to customize it dynamically. The attributes constitute a hierarchical structure. The interaction-recognition library is used to recognize basic motions in a 3D space, such as pointing, selecting, pinching, grasping, and moving. The library is flexible, and the recognition conditions can be given as parameters. A new recognition engine can be developed by using a new circular event history buffer to efficiently manage and retrieve past events.
    [Show full text]