Skip to Content Skip to Navigation
NY.gov Portal State Agency Listing

New York State Department of Labor User Experience (UX) Guide

username@domain.com | logout

A to Z Index

A B C D E F G H I J K L M N O P Q R S T U V W X Y #

A

There are no keywords for this option.

B

There are no keywords for this option.

C

There are no keywords for this option.

D

There are no keywords for this option.

E

There are no keywords for this option.

F

There are no keywords for this option.

G

There are no keywords for this option.

H

There are no keywords for this option.

I

There are no keywords for this option.

J

There are no keywords for this option.

K

There are no keywords for this option.

L

There are no keywords for this option.

M

There are no keywords for this option.

N

There are no keywords for this option.

O

There are no keywords for this option.

P

There are no keywords for this option.

Q

There are no keywords for this option.

R

There are no keywords for this option.

S

There are no keywords for this option.

T

There are no keywords for this option.

U

There are no keywords for this option.

V

There are no keywords for this option.

W

There are no keywords for this option.

X

There are no keywords for this option.

Y

There are no keywords for this option.

#

There are no keywords for this option.

Overview

A to Z Indexes provides users a form of self-guided navigation based on common keywords used in an alphabetical order. The benefit of these indexes is harnessed with large sets of keywords which users can browse to provide direct access to the content they are expecting to find. When linked to appropriate content, A to Z Indexes can prevent user frustration from arising when a user is unsure of what keywords a topic would be listed under. Multiple keywords can be linked to the same topic if they are related.

Demo on main DOL website

Implementation

Prerequisites

A large set of common keywords, simple descriptive words, or short phrases, which a user should be able to self identify with, is an essential part of A to Z Indexing. The best way to discover these keywords are by looking at search history and information requests, if available. Once this list is constructed, such keywords should be linked to the correct information and destination determined by the appropriate content owners.

Best practices suggests that A to Z Indexing only be used when at least 50 individual keywords/phrases exist. It can be more frustrating to user if they attempt to use an index, and find it half empty.

Structure

The following anchor links must first be created and should appear at the top of the page. A-Z indexes typically exist as their own stand alone page, but can be incorporated in additional pages if needed.

	<div class="ux-a-z-index">
		<a class="selected" href="#A" id="A-index">A</a>
		<a href="#B" id="B-index">B</a>
		<a href="#C" id="C-index">C</a>
		...				
		<a href="#Y" id="Y-index">Y</a>
		<a href="#Z" id="Z-index">Z</a>
		<a href="#numbers" id="numbers-index">#</a> 
	</div>

After the anchor section, each individual letter and number # have their own defined container as shown below. The contents of these containers should either be an unordered list ul with individual links for each list item li, or a the message stating that there are no keywords beginning with the chosen letter.

	<div class="ux-a-z-item-container selected" id="A-container">
		<h3 class="ux-hide-js"><a id="A">A</a></h3>
			<ul>
				<li><a href="##url##">abc</a></li>
				<li><a href="##url##">abd</a></li>
				<li><a href="##url##">apple</a></li>
				<li><a href="##url##">applicable</a></li>
			</ul>
	</div>
	<div class="ux-a-z-item-container" id="B-container">
		<h3 class="ux-hide-js"><a id="B">B</a></h3>
		<p class="ux-weak">
		There are no keywords for this option.
		</p>
	</div>
		... ### omiting redundant repeats for example's sake ### ...
	<div class="ux-a-z-item-container" id="Z-container">
		<h3 class="ux-hide-js"><a id="Z">Z</a></h3>
		<p class="ux-weak">
		There are no keywords for this option.
		</p>
	</div>
	<div class="ux-a-z-item-container" id="numbers-container">
		<h3 class="ux-hide-js"><a id="numbers">#</a></h3>
		<p class="ux-weak">
		There are no keywords for this option.  
		</p>
	</div>

In both examples, a single content container and an anchor row option has a class of selected. This class is put in place by default and serves to set the opening container and the corresponding letter to be marked as active.