IT 474 – 1: Web Design and Development

Chapter 5 Discussion

1. URL of the website

https://www.opm.gov/telework/

2. Name of the website

U.S. Office of Personnel Management

3. Target audience

The website is meant for people who are interested in the human resources agency and

personnel policy management within the US Federal Government. The Office of Personnel

Management manages the civil service of the government and recruits employees, manages

their health insurance and retirement benefits packages. The office also hosts resources for

identifying scholarships, internships, student jobs and summer jobs.

4. Screenshot of the home page

The website features a header navigation bar which has top-level links displayed horizontally

with drop down menus for core resources.

The website also has a footer navigation menu which has a few important links displayed side

by side.

The website features inline links that have hyperlinked text within brief text paragraphs to

help users explore different topics related to the website.

6. Principles of

- Proximity

This refers to how closely related items across the website are placed close to each other so

that their relationship and contrast can be viewed at a glance (Juanéda, Sénécal & Léger,

2018). This is most evident with the header navigation bar which features closely related

links placed side by side.

- Contrast

The website features a primarily white background with black text and blue logos and icons

which contrast well against each other. All of the white text is set on a colored background to

introduce the website accompanied by a suitable image.

- Repetition

Very few elements are repeated across the page. One of them is the color blue which

represents the brand of the federal government. The “About” link appears to be the sole link

that is repeated at the top and bottom of the homepage.

- Alignment
All of the text, links and imagery across the homepage are aligned on common margins on

both the left and ride side, leaving an equal blank space on either side of the content. The

smaller imagery within the homepage are arranged along straight horizontal lines for

uniformity, legibility and a coherent visual theme.

7. Web Design Best Practices Checklist

URL

https://www.opm.gov/telework/

Target Audience

This website is designed for adults who are interested in information and working

opportunities from the US Office of Personnel Management. It has a formal tone and brief

pieces of information that are direct without any unnecessary details.

Purpose

The purpose of the website is to inform users about the US Office of Personnel Management

and what role they serve in the federal government. The website provides useful links to

relevant resources such as policy, services and general history to help guide users to the

information needed. The specific homepage provides information about Telework and how

teleworking employees can be managed and coordinated through the agency’s telework

policy.
Page Layout

Appealing to target audience

Consistent site logo

Consistent navigation area

Informative page title that includes the organization

Good use of basic design principles: repetition, contrast, proximity, and alignment

Displays without horizontal scrolling at 1024× 768 and higher resolutions

Balance of text/ graphics/white space on page

Good contrast between text and background

Header and nav occupy less than ¼ to ⅓ of the browser at 1024×768 resolution

Home page has compelling, interesting information above the fold at 1024× 768

Media queries configure responsive page layout for smartphone and tablet display

Browser Compatibility

Displays on popular/current versions of Internet Explorer

Displays on current versions of Google Chrome

Displays on current versions of Firefox

Displays on current versions of Opera

Displays on current versions of Safari

Displays on popular mobile devices (including tablets and smartphones)

Main navigation links are clearly and consistently labelled

Navigation is easy to use for target audience

Main navigation does not use Flash

All navigation hyperlinks "work" — are not broken

Notes

The website does not feature many navigational tools apart from the links in the header.

Color and Graphics

Color scheme is limited to a maximum of three or four colors plus neutrals

Color is used consistently

Text color has sufficient contrast with background color

Use of color and graphics enhances rather than distracts from the site

Graphics are optimized and do not significantly slow download

Each graphic used serves a clear purpose

Functionality

All internal hyperlinks work

All external hyperlinks work

All forms function as expected

Content Presentation

Common fonts such as Arial or Times New Roman are used

Demonstrates techniques of writing for the Web: headings, list, brief paragraphs

Fonts, font sizes, and font colors are consistently used

Content provides meaningful, useful information

Content is organized in a consistent manner

Information is easy to find (minimal clicks)

Timeliness: The date of the last revision and/or copyright date is accurate

Content does not include outdated material

Content provides links to other useful sites

Hyperlinks use a consistent set of colors to indicate visited/non-visited status

Accessibility

Color is not used alone to convey meaning

Text color has sufficient contrast with background color

Use attributes designed to improve accessibility such as title when appropriate

The html element's lang attribute indicates the spoken language of the page

The role attribute indicates ARIA landmark roles

The website is generally well designed and uses minimal colors to convey and formal and

business-like tone. All the text is uniformly aligned horizontal lines with no diagonal

elements, and a white space dominates the background of the home page. The header

navigation bar allows for quick access to resources and there are other links dispersed evenly

throughout the homepage in a way that does not make it appear crowded. The website uses

imagery, logos and icons sparingly to further denote the formal appearance, and it does not

contain a large volume of text. It is a website that is direct and does not feature any extra

information or additional details. Overall, it is effective, well-designed, balanced and directs

the user to accomplishing their objectives as best possible.

8. Recommendations

The website does not have many accessibility aids such as a function to read text aloud. This

should be implemented for the site to be in accordance with WCAG Guidelines (Gay, 2023).

The homepage is sparsely populated and does not seem to have much information on the

homepage. More relevant links and navigational breadcrumbs can be added to make the site

easier to explore.

The website has quite a lot of white space which can be put to better use. A formal watermark

or a piece of background imagery can bolster the recognizability of the organization behind

the website.
 References

Gay, G. (2023). Introduction to web accessibility.

Juanéda, C., Sénécal, S., & Léger, P. M. (2018). Product web page design: a

psychophysiological investigation of the influence of product similarity, visual

proximity on attention and performance. In HCI in Business, Government, and

Organizations: 5th International Conference, HCIBGO 2018, Held as Part of HCI

International 2018, Las Vegas, NV, USA, July 15-20, 2018, Proceedings 5 (pp. 327-

337). Springer International Publishing.