User Interface Design

The Button Interface

Button Interface

For an interface which fits unobtrusively into your website while maintaining full functionality, try the Button Interface. All KeymanWeb's functions are displayed in a menu appearing whenever the user hovers over the button, which can be placed anywhere on the website.

To keep this interface as compact as possible, it is controlled through a single menu. While there is technically no limit to the number of keyboards that can be used, the Button interface works best on sites using up to 20 different keyboards, which are listed alphabetically.

The include for this interface is <script src="kmwuibutton.js">.

To select where the interface will be displayed on your page, add the following element where desired: <div id="KeymanWebControl" display="block"></div>

The property display may take two values: block and none, the latter of which temporarily hides the element.

For information on how your site users will interact with the Button Interface, click here.

The Floating Interface

Floating Interface

The Floating Interface provides a clear, menu-based approach to selecting from a list of keyboards. This interface can be incorporated without changing the layout of your existing site, as it automatically appears when users click in a a supported control (such as a textbox) and disappears again when they click outside. You can choose to have the interface float below (DefaultBelow) or to the right of (DefaultRight) the active control.

This interface is simple to use, and with its single alphabetical list of keyboards, works most effectively on sites supporting up to around 20 keyboards.

The include for this interface is <script src="kmwuifloat.js">.

For information on how your site users will interact with the Floating Interface, click here.

The Toggle Interface

Toggle Interface

For a website incorporating KeymanWeb to support a single keyboard, the Toggle is the ideal solution. The interface floats at the right of the active control, and is hidden when the mouse is clicked outside, which means that no changes have to be made to your site design. A simple on-off interface makes it easy for users to switch between their default language and the supported keyboard.

The include for this interface is <script src="kmwuitoggle.js">.

For information on how your site users will interact with the Toggle Interface, click here.

The Toolbar Interface

Toolbar Interface

The standard interface for many sites incorporating KeymanWeb is the Toolbar. This interface, which can be positioned anywhere on a website by inserting the HTML code provided, provides an instant visual indication that the site allows users to type in a range of languages.

The Toolbar's map-based menu, displayed whenever a user clicks on the Keyboards button, works particularly well with multilingual sites integrating languages from all over the world. The most recently-used keyboard is remembered in a cookie, making it as easy to switch between English and another language as the Toggle interface, while maintaining full functionality and support for an essentially unlimited number of keyboards.

The include for this interface is <script src="kmwuitoolbar.js">.

To select where the interface will be displayed on your page, add the following element where desired: <div id="KeymanWebControl" display="block"></div>, as with the Button Interface above.

A live example of the KeymanWeb Toolbar Interface is available on the KeymanWeb Demo Site. For information on how your site users will interact with the Toolbar Interface, click here.