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 14 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.

Broad characteristics of button navigation:

- wherever an element has focus, there is a visual (and corresponding, audio) indicator of focus.
- focus always begins with the top left element in a grid
- backward/forward buttons move focus, enter selects an element (e.g. a theme or gallery thumbnail)
- focus doesn't "wrap". I.E. there is no keyboard trap on kiosk screens. You can always "move in" or "move out" of a kiosk screen. 

Walkthrough of kiosk functions

Image 1 (see below) is the first "screen" that is shown on the kiosk. In the center of the screen is a lozenge/rectangle shape, where 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) depicts what occurs after a user has selected the identity theme. A lozenge/rectangle with the the title: "Tour theme: Identity" is foregrouned. It contains thumbnail-like images with titles of all the galleries in the theme. To the top right of this secction, there are "Print" and "Map" buttons  also visible. The previous lozenge/rectange entitled "Pick a tour theme" is no longer foregrounded, but is visibible in the lower right hand corner of the screen. Looping through all the thumbnails with the arrow keys would move the user back, first to the "Print" and "Map" options, and then back to the previous "Pick a tour theme" page.

image 2 the second screen with images of each gallery

Image 3 (see below) appears after a user has activated a gallery thumbnail from the previous "Tour theme: Identity" screen. A 360 degree map is shown of the selected gallery. The gallery could receive keyboard focus, and be navigatable with on screen buttons. A concern here would be how to avoid keyboard trap and facilitate an interaction with only back, forward, and enter keys.
Generally in Image 3, the 360 degree map view is foregrounded. The previous screens, "Tour theme: Identity" and "Pick a tour theme", are not foregrounded however they are visible.

image 3 panoramic gallery view

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