Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

Note: This page presents options for how button navigation will work on the DIA kiosk. This page is a work in progress.

Background

On the Web, it is an accessibility best practice to make all the functionality of a Web page operable from the keyboard. Similarly with the Engage kiosk, we want to ensure that the kiosk is operable by a set of buttons. Button navigation could helps people who can't use the touch screen component of the kiosk (e.g. because they have a limited range of physical motion) operate the kiosk. Down the road, we need to make a design decision about what kind of screen reader option is required for the kiosk (e.g. do we use a commercial screen reader or canned MP3's? another option?) A current design assumption is that buttons will be a component that the kiosk's audio user will require and that they will use the buttons in concert with the screen reader feature to operate the kiosk. The options detailed on this page also assume that the physical design of the kiosk take into consideration the height of a seated visitor (e.g. the kiosk is positioned in such a way to be touchable by anyone). Another assumption is that providing button navigation does not preclude using the talking fingertip technique.

Options for button placement, look, and feel on the kiosk

The following are some options for button placement on the kiosk.

In Option 1 (image below) there is a reserved section of touch screen real estate dedicated for "buttons". The buttons themselves are not below the LCD monitor, but sit on the monitor in the reserved section. As this first image illustrates, the reserved section is approximately 8 inches wide and is located at the center bottom of the touch screen monitor. In this reserved section, 3 buttons are provided. Buttons are created as overlays that site atop the touch screen. They must be created out of a material that is forgiving both to the human user and to the kiosk monitor itself.  The size of the buttons are perhaps 1 to 2 inches in height and width; the buttons should also be raised and easily differentiated from the monitor itself. There are 3 buttons: back, forward, and enter. Each button is located in a reasonable proximity to the other buttons so that moving in between buttons doesn't strain the kiosk user. Each button is visually labeled "back", "forward" and "enter". Underneath this visual label there is braille lettering: "back", "forward", and "enter". The back button's shape is a rectangle with an 45 degree angled left site that points to the left. The right button's shape is a rectangle with a 45 degree angled right side pointing to the right. The enter button's shape is square. We could also make use of raised lines on the buttons to provide additional touch information. Finally, in the center below the touch screen is a headphone jack, labeled "headphone jack" visually and with braille lettering.

Option 1 image
Option 1 reserving the center bottom of the touch screen for buttons

In Option 2, (image below) there is a section below and separate from touch screen for buttons. As with Option 1, the zone for physical buttons is approximately 8 inches wide and is in a centered position. The buttons have many of the same characteristics as the buttons in Option 1:  The size of the buttons are perhaps 1 to 2 inches in height and width.; There are 3 buttons: back, forward, and enter. Each button is located in a reasonable proximity to the other buttons; Each button is visually labeled "back", "forward" and "enter" and braille lettering is included; the buttons are the same shape as in Option 1, etc. There is also a headphone jack labeled "headphone jack" visually and with braille lettering.

Option 2 Image
Option 2 buttons below the monitor

Button navigation - example walkthroughs of current kiosk wireframes

  • No labels