APPENDIX U GRAPHICAL USER INTERFACE STANDARDS FOR WEB APPLICATIONS GUI Standards for Web Applications for Legacy Modernization Pennsylvania Department of Transportation Bureau of Business Solutions & Services Data Administration Division User Interface Guide for Legacy Modernization Page: 2 Table of Contents TABLE OF CONTENTS ........................................................................................................................................................... 3 DOCUMENT INFORMATION ................................................................................................................................................. 5 REVISION HISTORY ........................................................................................................................................................................ 5 PURPOSE ..................................................................................................................................................................................... 6 INTENDED AUDIENCE ..................................................................................................................................................................... 6 INTRODUCTION ................................................................................................................................................................... 7 USER INTERFACE DESIGN ..................................................................................................................................................... 8 RESPONSIVE AND NON-RESPONSIVE DESIGN ...................................................................................................................................... 8 SELECTING AN APPROACH ............................................................................................................................................................... 9 TEMPLATES .................................................................................................................................................................................. 9 PAGE LAYOUT .................................................................................................................................................................... 11 REQUIRED CORE ELEMENTS .......................................................................................................................................................... 11 Top Navigation ................................................................................................................................................................... 11 Banner Header ................................................................................................................................................................... 11 Primary Display Area ......................................................................................................................................................... 12 Footer Area ........................................................................................................................................................................ 15 VERTICAL AND HORIZONTAL SCROLL BARS ....................................................................................................................................... 16 BODY GUTTER ............................................................................................................................................................................ 16 USABILITY AND FORMATTING ........................................................................................................................................... 17 BODY COLORS ............................................................................................................................................................................ 17 Multiple Rows .................................................................................................................................................................... 17 FONTS ...................................................................................................................................................................................... 17 Acceptable Font Families ................................................................................................................................................... 17 Font Styling ........................................................................................................................................................................ 17 Relative Font Size ............................................................................................................................................................... 17 TABBING ORDER ......................................................................................................................................................................... 18 LINK TREATMENT ........................................................................................................................................................................ 18 New Browser Windows ...................................................................................................................................................... 18 Link Clickability Cues .......................................................................................................................................................... 18 Text Links ........................................................................................................................................................................... 19 Link Names ......................................................................................................................................................................... 19 Embedded Links ................................................................................................................................................................. 19 Link Length ......................................................................................................................................................................... 19 Accessibility ........................................................................................................................................................................ 19 BUTTON TREATMENT................................................................................................................................................................... 20 User Interface Guide for Legacy Modernization Page: 3 Icons ................................................................................................................................................................................... 21 Accessibility ........................................................................................................................................................................ 21 WAIT TIME ................................................................................................................................................................................ 21 TABLES ..................................................................................................................................................................................... 22 Accessibility ........................................................................................................................................................................ 22 ACCORDIONS ............................................................................................................................................................................. 22 Accessibility ........................................................................................................................................................................ 22 FORM CONTROLS ........................................................................................................................................................................ 23 Text Input ........................................................................................................................................................................... 23 Dropdowns ......................................................................................................................................................................... 24 Checkboxes ........................................................................................................................................................................ 24 Radio Buttons ..................................................................................................................................................................... 25 ALERTS (MESSAGES) ................................................................................................................................................................... 25 Content .............................................................................................................................................................................. 26 Placement .......................................................................................................................................................................... 26 Accessibility .......................................................................................................................................................................