anke boeker, dr. tanja schaetz user experience, accessibility, sap ag csun, los angeles march 14,...

Anke Boeker, Dr. Tanja SchaetzUser Experience, Accessibility, SAP AG

CSUN, Los Angeles March 14, 2008

BENEFIT OF GOOD UI DESIGN IN WEB-APPLICATIONS FOR DISABLED AND NON-DISABLED USERS

© SAP 2008 / © SAP 2008 / Page 2

Presentation overview

Accessibility@SAP

Special Challenge with Business Web Applications

UI Design in SAP‘s Development Lifecycle

SAP’s approach: Accessibility by Design

SAP’s Experience about good UI Design: Examples

Introduction to Accessibility@SAP

… SAP provides business software solutions for large, mid-size and small companies world-wide

… SAP’s product portfolio covers applications for financial accounting, enterprise resource planning, product lifecycle management, supply chain management, customer relationship management, specific industry solutions, etc.

… More than 43,000 companies run SAP software

… 12 million users in 120+ countries

… SAP established a global accessibility program to support business professionals with disabilities to participate fully in today’s business environment

© SAP 2008 /

The SAP Accessibility Competence Center

2001: Established in Palo Alto, later moved to Walldorf/Germany (2003)

Maintains and develops SAP’s Accessibility standard

Supports the development teams with guidelines and check tools

Supports the Accessibility Testlab in Bangalore

First contact point for customer requests

SAP‘s first book about Accessibility („Developing accessible software with SAP NetWeaver“) published

The Special Challenge with Business Web Applications

1. High complexity of screens Editable tables Large forms Complex elements (e.g. hierarchies, interactive graphics etc)

2. High interactivity (mass data entries)

3. Professional web applications need to be highly efficient (average working time of business users: 8 hours/day)

Hot keys, access keys, short navigation path

Characteristics about business web applications :

Examples for Business Web Application Screens I

Complex search functionsComplex search functions

editable tableeditable table

editable detail vieweditable detail view


Examples for Business Web Application Screens II

Examples for Business Web Application Screens III

hierarchyhierarchy

editable detail vieweditable detail view


Examples for Business Web Application Screens IV

complex and large formscomplex and large forms

Examples for Business Web Application Screens V

tablestables

graphicsgraphics

subscreenssubscreens

The Special Challenge with Business Web Applications

1. High complexity of screens Editable tables Large forms Complex elements (e.g. hierarchies, interactive graphics etc)

2. High interactivity (mass data entries)

3. Professional web applications need to be highly efficient (average working time of business users: 8 hours/day)

Hot keys, access keys, short navigation path

Characteristics about business web applications :

UI Design in the Development Lifecycle

InventInvent Define

PILMilestone: begin of development

VPAT

AccessibilityTest

2

5

3

SAP Accessibility

Standard

1

Section 508

WCAG 1.0

Milestone: end of development/test

4

UI Design SpecificationsUI Design Specifications

Accessibility Report

Accessibility Report

All accessibility requirements are described in SAP’s internal accessibility standard

All accessibility requirements are described in SAP’s internal accessibility standard

UI Design specs created based on SAP’s standard and reviewed by the ACC

UI Design specs created based on SAP’s standard and reviewed by the ACC

performed by educated experts in SAP’s accessibility testlab

performed by educated experts in SAP’s accessibility testlab

OptimizeDeployDevelop

SAP‘s Approach: Accessibility by Design

Provide Accessibility in an early stage of development

Maximum coverage of accessibility requirements by frameworks/technologies Easy to fix bugs in software solutions Minimize overall development efforts

Fulfill instructions about good UI design in four categories: Identification of UI elements Usage of colors Contrasts Keyboard access and navigation

Accessibility by design: additional development effort: < 1%

© SAP 2008 / PIL Learning Map Accessibility: ABAP Dynpro – Basic /

Proposal: One Design for all Users I

Provide a solution that offers both the graphic and the text alternative.

Examples:

Graphic and its text alternative e.g. a table are placed alongside each other on the same screen


Proposal: One Design for all Users II

If the two alternatives cannot be displayed side by side for layout reasons, you can place them on separate tab pages


Proposal: One Design for all Users III

In this dialog the user can use a button to toggle between the graphical display and its text alternative


Some Proposals for Dialogs I

Make a dialog easy to use.

Dialog title: verb + noun e.g. „Change Record Values“, „Download Update“

Text: clearest and simplest language

Labels of buttons: Not „OK“ or „Yes“ or „No“. Instead „Save“, „Send“, „Print“, „Disconnect“


Some Proposals for Dialogs II

Order of buttons: most important button is farthest left

Default button: user can choose ENTER to activate even if it does not have the focus

Accelerator keys: quick way to navigate the focus to a target. ALT + underlined character key.


Some Proposals for Dialogs III

Tool tips for buttons needed:

if button only has icon and no text

if icon on button contains additional information not included in the text

if keyboard command exists such as CTRL + s for a „Save“ button

if button is default button e.g. [Enter]

if button text includes abbreviations


Some Proposals Concerning Keyboard Navigation I

Different user types: users who

like to use the mouse as often as possible

use keyboard and mouse

like to use the keyboard as often as possible or can only use the keyboard

want to reach all user interface elements via keyboard

only want to reach interactive elements via keyboard

Sometimes want to reach only interactive elements and sometimes want to reach all user interface elements


Some Proposals Concerning Keyboard Navigation II

User can customize which UI elements can be reached via keyboard

either reach via TAB key only interactive elements (e.g. buttons, editable fields, editable drop down boxes)

or reach via TAB key all UI elements

provide additional key combination e.g. CTRL + n to set focus to the next UI element in tab order and e.g. CTRL + b for previous UI element in tab order


Some Proposals Concerning Keyboard Navigation III

Provide accelerator keys.

Navigation with accelerator keys offers a quick way to navigate the focus to a target user interface element

ALT + underlined character key

if same character key is used more than one time on the screen than ALT + underlined character key will set the focus to the next field following the tab order with the same accelerator key


Some Proposals for Tables I

Make a table easy to use.

Title for every table

Column header for every column

Column header focusable by keyboard to open context menu e.g. for sorting the column or moving the column to right

Avoid abbreviations

Tool tip for every icon. Sometimes it is a good idea to add the same infomation in a textual way in an additional column.

in this column you can sort information

and you can search for this information


Some Proposals for Tables II

In tables rows and columns are often colored according their meaning e.g. row with a total sum, row with a sub total sum, row that shows a grouping, key columns. All colors with semantical meaning must be customizable.

Search in a table is very important.

Easy to start e.g. CTRL + f or type ahead

Immediate feedback

Explanation how to search. E.g. Can I use „%“ or „*“ or „?“?


Some Proposals for Tables Concerning Navigation and Selection

Efficient navigation in tables is important. Often a table has many columns and thousands of rows.

HOME, END, CTRL HOME, CTRL END

PAGE UP, PAGE DOWN

SHIFT + Space to select a row

CTRL + Space to select a cloumn

Inside the table concerning the customized navigation type. (Either only cells with interactive UI elements are reached via TAB or all cells are reached via tab.) The arrow keys work as well for navigation from cell to cell.


Some Proposals for Icons I

Partially sighted users often find it difficult to identify icons. Blind users do not benefit from icons at all and always need a text equivalent.

Despite this, even users without visual impairments can have trouble understanding a picture.

Each icon must be explained in a text equivalent, usually a tool tip.

An icon cannot be used to represent different functions on a single screen. Each icon must be associated with one function only.


Some Proposals for Icons II

The differences between icons on an screen must also be perceptible to users with color vision deficiencies. This means that icons must show differences in shape as well as in color.

Green traffic lights are square when switched on.

Yellow traffic lights are triangles when switched on.

Red traffic lights are round when switched on, and also show four beams of light.


Some Proposals for Tab Strips I

Meaningful title for each tab page, such as „Adresses“, „Invoices“, Logistics. Avoid using tab page titles such as „Miscellaneous“, „More“, „Details“ or „Extras“.

A minimum of two tab strips and a maximum of seven.

Most important page is the farthest left.

Do not include any mandatory input fields on tab pages. Place them above the tab page.


Some Proposals for Tab Strips II

Do not use tab strips if the content of one tab page depends on the information on a preceding tab page. Split the users actions into steps instead.

Two to seven steps: implement a wizard

More than seven steps: place tha data that governs the rest of the data above the tab strip.

Do not nest tab strips within each other.

anke boeker, dr. tanja schaetz user experience, accessibility, sap ag csun, los angeles march 14,...

Documents

sap sap

sap accessibility standard

saps accessibility standard

professional web applications

business professionals

accessibility requirements

accessibility testlab

sap software