OREGON STATE UNIVERSITY
Open search box
Marketing and Communications
College of Health
Webpages should be clear, brief and easy for users to scan. Essentially the opposite of typical "academic" writing.
Below are some do's and don'ts when editing college webpages. Let Alan know if there is something that should be added.
Also refer to University Relations and Marketing's Editorial Style. It is a great collection of information such as which words to capitalize, all the proper forms of alumni, everything anyone would want to know about punctuation ... and more.
Webpages should be written to easily scan to the content a user is looking for. Headings help with this.
Using the proper order of headings also follows best practices for the Web Accessibility Guidelines that Oregon State has pledged to follow. Users of assistive devices are able to scan pages for relevant content by skipping through headings. Headings also help with search engine optimization.
Don't have a heading also be a link.
Use a link within the text that follows a heading.
Keep H3 headings short. Avoid using full sentences as a heading. Headings are meant to be scanned. Full sentences take more cognitive effort to read.
Use H4 heading instead of bold text.
While H4 headings often look similar to bold type, they do not act the same for assistive devices. Users of assistive devices are able to skip to the next heading while interacting with a page. They are not able to do so with bold text. But also, minimize your use of bold text. (see below)
Do not use H3 just to have a larger font size. While there are ways of using inline CSS styles to make some text larger... please avoid doing so. Users can increase/decrease the font size on their devices if need be.
Avoid bolding words - and especially whole sentences and phrases. The more things are bolded - the less likely anything in particular stands out. If a sentence needs to stand out - place it on its own line. There are other ways to draw attention to it. If your writing is clear and efficient - there shouldn't be a need to bold anything.
Never use a url in your content. This isn't print.
Use this: For more information see OSU's Web Accessibility page on descriptive links.
Never this: For more information see http://oregonstate.edu/accessibility/descriptivelinks
Avoid using the words "click here". "click" is already implied by being a link. You shouldn't need to tell someone how to click a link and people on mobile devices don't "click".
Avoid using the word "here" to designate a link. Links should be descriptive of where they go.
Use this: For more information see OSU's Web Accessibility page on descriptive links.
Instead of this: For more information about descriptive links click here.
Users assume links go to another webpage. If it doesn't, you should let them know. I mostly see this for PDF files. Simply add the file type after the link.
Use this: To apply, fill out the Undergrad LIFE Scholars application (pdf).
Instead of this: To apply, fill out the Undergrad LIFE Scholars application.
Users assume links will open in the same window they are in. Please keep it that way. If a user wants to open a link in a new tab/window they can choose to do so on their own.
Yes. At some point it may have been a web practice to have any links to external sites open in a new tab. That is no longer the case.
Reduce the redundancy of contact info.
Ideally, just link to the person's profile page. All contact info is located there.
Use this: For more information contact Alan Calvert.
Instead of this: For more information email Alan Calvert at Alan.Calvert@oregonstate.edu.
Side note. It's really obvious Alan.Calvert@oregonstate.edu is an email address. Please don't label it in a contact form like in the following:
Alan Calvert
Drupal Architect
Email: alan.calvert@oregonstate.edu
Phone: 541-737-2315
Just don't.
It's similar to bolding. I've found that people that use exclamation points usually use them on every sentence. Don't yell at your audience. It's up to them to be excited by your words, not your punctuation.
Forcing users to browse PDF files causes frustration and slow task completion, compared to standard webpages. Use PDF only for documents that users will print. In those cases, following 10 basic guidelines will minimize usability problems.
Explore how to design with neurodiversity in mind, how to respect and consider dyslexia, ADHD, dyscalculia, and general do’s and don’ts to keep in mind.
(Blatantly copy/pasted from a Smashing Magazine newsletter)
How can we support neurodiverse users when creating digital experiences? In his Neurodiversity Design System, Will Soward details a set of standards and principles that combines neurodiversity and user experience design for Learning Management Systems. It covers everything from typography and color to buttons, links, inputs, interface, communication, and animation.
Although this example is for LMSs, the concepts can be applied to web interfaces.
The British Dyslexia Association estimates that ten percent of the population is dyslexic. Dyslexia not only affects the ability to read and write, but it can also have an effect on coordination, organization, and memory. To help you ensure your written material considers the difficulties experienced by dyslexic people, the British Dyslexia Association published a dyslexia-friendly style guide.
The style guide covers principles for readable fonts, heading and structure, color, and layout. They are not difficult to implement and will make all written communication easier on the eye for everyone, whether it’s emails, presentations, web pages, or printed material. Small tweaks that make a real difference
We all know those moments when we struggle to focus and a website bombards us with too many options or asks for too much of our attention, making it hard to concentrate and keep on track. While this might only be a momentary condition for most users, for users with ADHD, an extreme lack of focus is the normal state. So how can we design products to support them?
The post “Building for ADHD will make your product better for everyone” dives deeper into how to get users who struggle with focus to onboard and sustain interest in your product. As the post points out, by designing for ADHD, you can uncover areas of friction for everyone that may otherwise go unobserved. Maybe you were overwhelming users by giving them too many things to handle at once, maybe you asked them to remember too much information or created a false sense of urgency that resulted in anxiety. Again, a wonderful example of how inclusive design benefits everyone.
Dyscalculia makes it hard for someone to read, understand, and work with numbers. They might have difficulties handling money, managing time, understanding percentages, following instructions, or remembering PINs and phone numbers. But it’s not only people with dyscalculia who struggle with numbers. According to National Numeracy, low numeracy affects half of the working-age adults in the UK. So how can we convey numbers in a way that is easy for everyone to understand?
GOV.UK published an accessibility poster with practical design do’s and don’ts to help people make better sense of numbers. And again, it’s the small changes that make a significant difference: don’t use decimals unless it’s money, for example, leave space around numbers, and use sentences to add context about numbers instead of percentages.
When we talk about inclusive design, we often talk about physical disabilities like vision impairments or motor skill disorders. Psychological disorders or neurodiversity are often forgotten in the discussion. The team at Nomensa wanted to change that and published an introduction to inclusive design as seen from this perspective.
The guide describes some of the most common types of neurodiversity, psychological disorders, and learning difficulties and how to accommodate user experiences and products to them — with easy methods but also guidance on more difficult solutions. The focus of the guide lies on dyslexia, autism, ADHD, dyscalculia, and anxiety disorders. A helpful overview and a good reminder to not lose these conditions out of sight when designing inclusive experiences
While using bright contrast helps improve the experience for users with low vision, some users on the autistic spectrum would prefer simple colors. To get you more familiar with the different preferences and needs that different users have, Karwai Pun and the accessibility group at GOV.UK created a set of posters with accessibility dos and don’ts.
Each of the seven posters is dedicated to a different user group and includes five dos and five don’ts you should consider when designing for them. The posters cover the autistic spectrum, low vision, physical and motor disabilities, dyslexia, anxiety, screen reader users, and users who are deaf or hard of hearing. You can download them for free in a variety of languages.