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 12 Next »

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

On this Page:
Background
Options for button placement, look, and feel on the kiosk
Button navigation - example walkthroughs of current kiosk wireframes
Audio options

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, button navigation could help people who can't use the touch screen component of the kiosk. I can also be used in concert with the screen reading or self-voicing features of the kiosk. 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

Buttons on a kiosk require some general considerations. It goes without saying that the look, feel, and function of the buttons is tightly connected to the interface design. But some following principles could work generally:
- height of buttons - need to be physically differentiated from surrounding area
- spacing of the buttons - shouldn't be too close together, easily differentiated spatially.

some broad options:
"back" "enter" "forward" or "back" "forward" "enter"
north south east west enter (see picture below)

north south east west enter button option

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

In Option 1 Overlay Buttons (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 illustrated in Option 1 image, "overlay buttons" have the following features:
- are easily differentiated from other parts of the touch screen
- provide some form of physical feedback when touched (you can tell when you press them)
- are gentle to the kiosk touch screen itself
- labelled with text and braille lettering
- order of buttons is (1) "back", "forward", "enter"  or (2) "back", "enter", "forward". Shape of buttons reflects purpose.
- headphone jack is below screen

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 illustrated in Option 1 image, physical button" have the following features:
- are easily differentiated from other parts of the kiosk
- provide some form of physical feedback when touched (you can tell when you press them)
- labelled with text and braille lettering

- order of buttons is (1) "back", "forward", "enter"  or (2) "back", "enter", "forward". Shape of buttons reflects purpose.
- 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

This section explores button navigation as applied to the Flow sketches inspired by playstation PS3, using the following keys: Backward; Enter: Forward.

Image 1 (see below) is the first "screen" that is shown on the kiosk. The DIA's themes are displayed as a grid of thumbnail-like images with titles. The title of this grid is: "Pick a tour theme". The themes displayed with a thumbnail are: Travel; Furniture; Identity; Morality; Spaces; Family; Power & Politics. Visually, we could give one of these thumnails visible keyboard focus. Navigating with the Backward and Forward keys would move between thumbnails, from left to right and top to bottom, and pressing enter would activate a theme.

image 1 the first screen where you pick a tour theme

Image 2 (see below) is the "screen" that appears after a user has selected the identity theme. It has the title: "Tour theme: Identity" and below this title, the instruction "Pick a gallery to view for more information". There are thumbnail like images with titles of all the galleries in the theme. Navigation works as in the previous screen, with focus visible at all times.

image 2 the second screen with images of each gallery

Audio options

Adopting a commerical screen reader

Desciption, pros, cons, assumptions

Custom self-voicing solution

Description, pros, cons, assumptions

Canned MP3 option

Description, pros, cons, asssumptions

  • No labels