WebBestPractices3

Web Best Practices
Building and maintaining a
user friendly website

The Four Concepts
1) Make it Usable
2) Stick to the Standards
3) Engage & Simplify
4) Keep it Consistent

Make it Usable
What is Usability?
 Usability refers to the quality of a user's experience when
interacting with the website; the effectiveness, efficiency and the
overall satisfaction of the user. It consists of a combination of
factors including:
 Intuitive design: a nearly effortless understanding for the user of the
architecture and navigation of the site.
 Ease of learning: how fast a user who has never seen the user interface
before can accomplish basic tasks.
 Efficiency of use: How fast an experienced user can accomplish tasks.
 Memorability: after visiting the site, if a user can remember enough to use it
effectively in future visits.
 Subjective satisfaction: If the user likes using the website.

Make it Usable
What are the Evaluation Methods?
 The key to developing highly usable sites is employing
user-centered design such as:
 Focus groups, surveys or interviews to establish user goals.
 Card Sort testing to assist with IA development.
 Wireframe & IA testing to evaluate navigation.
 Creating and testing engaging graphic elements (icons, workflow
diagrams, task driven infographics).
 First click testing to ensure users follow the right path.
 Usability testing to gauge user interaction end-to-end.
 Satisfaction surveys to see how the site fares.

Make it Usable
Information Architecture – What is it?
 IA is the art and science of organizing and labeling websites.
 IA makes finding and using information easier to support findability
and usability.
 An effective IA will assist users in understanding and interacting with
the site and can mean the difference between users quickly
embracing a site, or becoming frustrated and disengaged.
 IA is putting in place the organization required to connect people to
the content they need. Some methods of achieving this are:
 Card Sort testing to assist with IA development.
 Focus groups, surveys or interviews to
establish user goals.

Make it Usable
Information Architecture – How to make it usable?
 Sound IA methodology should focus on what users are trying to
accomplish and should speak to the following questions:
 Why are we doing this project? What is it’s Purpose?
It’s critical to understand the business goals & ensuring we are
helping the organization to achieve its larger goals.
 Who are we communicating with? Who are the users?
What makes them different? What makes them the same?
What does each audience need to achieve the goal?
What information do users need to meet their goals?
If you think in terms of these “Personas” rather than
one solid mass of users you can create navigation
and content that is specific to the end user’s need.

Make it Usable
Information Architecture – How to make it usable?
 Once you have determined your audiences and their
needs & goals you should:
 Determine the buckets or content groupings.
 Create a high level visual sitemap (2-3 levels).
 Work with the business stakeholders
to confirm / refine.
 Conduct high level IA testing to
evaluate the suggested navigation.
 Create a detailed sitemap to account
for needed sections and pages (all levels).

Make it Usable
Site Navigation – How is this different from IA?
 IA defines what will be part of the site; Site Navigation defines how the
user will navigate the site.
 Usability dictates that the user should never have to guess where they
are in a site and should always have a clear indication of what section
they are in and what page they are on. In order to achieve effective site
navigation there should be:
 Primary Navigation allows the user to navigate all the top levels of the site. It
is the same on all pages, no matter what! Various kinds exist such as: mega-
menus, fly-out menus and sub menus.
 Page Navigation is on every page and allows the user to access all pages in
a section or sub section. The page navigation should indicate what section
and page they are viewing in the navigation.
 Breadcrumbs are also on every page and allow the user to access all pages
in a section or sub section and should also indicate what section and page
they are viewing in the navigation.

Make it Usable
Information Architecture – How to maintain it?
 Ensure that new requests follow the same guidelines.
 Don’t add a section or page for it’s own sake.
 Make sure their is a valid reason for adding it and that it continues to
meet business goals and end user needs.
 Ensure that it is accessible.
 All pages* should be accessible from the site navigation.
 Do not use redirects or “one off” pages that aren’t accessible.
This compromises usability and findability.
 *One exception to this rule may be campaigns.
 Document it.
 Keep an up to date sitemap.

Stick to the Standards
 80% of Web usability insights from the 1990s are still current
or potential problems today.
 In 1995, the enemies of usability said that user testing might be a
good way to improve applications, but that it didn't work for websites.
 In 2000, the enemies of usability said that the usability guidelines
might be fine for static websites, but that I* was crazy in warning
against excessive use of Flash, which "obviously" made for more
exciting, dynamic sites.
 Now, the enemies of usability say that while I* was perhaps right
about the early Flash problems, it's not reasonable to apply
traditional usability guidelines to “Web 2.0”.
“He who laughs last, laughs best”
*Jacob Nielsen

So what are the Standards? The basics...
 Don’t use spaces in page names, documents/assets, if possible.
 Use full name or searchable terms in page and document naming.
 This helps with SEO and findability.
 Do not use acronyms, until they are commonly known (ex: WHO, UPS).
 Make it usable and readable.
 Use web friendly content and imagery.
 Stay away from unnecessary stock imagery, if possible.
 Be as consistent and quality driven as possible.
 Be matchy-matchy, but with context, contrast and purpose.

The basics cont...
 Always give an indication of future activity.
Users should always know where they are going and what to expect before
they do it.
 Add alt tags to links, images and images w /links (slideshow or banner).
 Videos (do not auto play); allow the user to play if desired.
 Calls to action: message of prescribed action.
 Buttons should be used very sparsely and only used when attached
to a form (submit, cancel) or type of action
where an action is required to submit information.
 Create landing page grids for area related topics.
 These should be planned in advance and there
should be a few options, depending on what level
of the site you are creating the grid.

Hypertext Links...
 To maximize the visibility and clickability of a link, make the
color obvious and distinct from the rest of the copy or underline the
link text. Users shouldn't have to guess or scrub the page to find out
where they can click.
 Underlined links are important for low-vision users' accessibility, so retain
underlines if accessibility is a priority.
 Click Here does not belong on a website. Ever! Instead:
 Embed the link in the content.
 Place it first or last part of a body of copy.
 Create a call to action such as Learn More >>
Download the Supportive Housing List >
(you can create emphasis using carrots (>, >>)).

Hypertext Links cont.
 If a link is going to an external location; open it in a new window.
 Indicate that link is for an external location; no surprises please.
 Strive to keep the user on the site. Don’t give them a reason to leave.
 Links intermingled or part of body text should have an emphasis
state (hover change ) and a visited state (already viewed).
 Do not create links to portions of content in a document.
 Documents are intended to be a full version or a takeaway.
 If a section of content exists in a document that needs
to be featured, create a treatment or a sub page,
depending on the length of the content.
 If a corresponding document exists, make it
available for download on related pages.

Use space wisely...
 White space is good for clarity, but too much of it can make a page look
empty.
 Choose a template that fits the purpose (2 or 3 column).
 If there is not much content on a page, you may want to opt for a 3 column
layout that has the ability to enter marketing content (calls to action).
 This will also create an opportunity to cross promote materials and concepts.
 If the content is long, you may want to use a 2 column layout.
You will have less of an opportunity for marketing,
but more white space makes the content seem less busy.
 If the content is exceptionally long, it may require the
use of content treatments such as tabs or expand/collapse
or new sub-pages to be created.

Use of Tables...
 Standardize the look and feel of tables.
 This creates consistency and adds to the aesthetic.
 Ensure tables are aligned nicely, and indicate rows & columns clearly.
 Table headings should be clearly visible and match the site branding.
 Tables should be no wider than the content area where it resides.
 Limit the amount of content that is entered for a description.
 Large buttons or marketing items should not compromise
the tables for their own sake.
 Anticipate needs for all table types and
create custom classes.
 This will reduce the difference in tables look & feel.

Document fundamentals...
 Ensure documents are displayed the same way others in the site, or in
pre-indicated style depending on location.
 Indicate that a link to a document is a document link, not a regular link
to a page or external site.
 Use a phrase such as: Download Report Now >>
 State type and size of document (use type icon if possible).
 Always open in a new window; so user not forced to click Back.
 If using an image; indicate if clickable. Make action clear.
 Ensure document aligns with branding standards.
 If document does not align with standards, send it back.
 Create balance when a list of documents is available.

List fundamentals...
 Ensure lists are displayed the same way others in the site, or in
pre-indicated style depending on location.
 Ordered lists & unordered lists should be programmed in the CSS.
 If a list was copied over from Word or Notepad, it will need to be stripped
and formatted correctly.
 If a list does not appear to be formatted, it likely isn’t.
 When using a list to link to content on the same page, assuming no
superior method exists, place Back to Top links in the page.
 The user should be able to navigate the page effectively.
 This is old functionality and should not be needed.

Engage & Simplify
Content is [still] king.
 Content is the smallest budget item but is just as important as design and
function.
 Approach the content emotionally:
 K.I.S.S.!
 Chunk the content! (clear headlines and delineation of ideas).
 Use images & video.
 Encourage engagement! (through conversation & sharing).
 A focussed page tells the user what we want
them to do and why.
 Find interesting ways to display information.
 Content treatments (Tabs / expand).
 Icons, infographics, flow imagery.

Engage & Simplify
User Experience Honeycomb
Factors that Influence UX
 Create content that
is valuable for the
end user and
applicable to the
audience type; client,
partner, applicant,
municipality etc.

Engage & Simplify
 Factors that Influence UX
 Useful: Your content should be original and fulfill a need.
 Usable: Site must be easy to use.
 Desirable: Image, identity, brand, and other design elements are used
to evoke emotion and appreciation.
 Findable: Content needs to be navigable
and locatable onsite and offsite.
 Accessible: Content needs to be
accessible to people with disabilities.
 Credible: Users must trust and believe
what you tell them.

Engage & Simplify
Creating Content for the Web…
 Get the message across as quickly …say as little as possible.
 Say LESS. This is the most important thing about writing for the web.
Because web users are generally scanning, not reading, the more
concise the content, the easier it is to scan. Be short and succinct.
 Use Headlines and headings; they are larger and high-contrast, so
they attract the eye, making relevant content more visible.
 Consider the user’s goals;
 The imperative voice (commanding) is attention-grabbing
and helpful, so it should go at the front of a phrase.
 Use the active voice. Active good, Passive bad.
This is because passive voice uses slightly more
words than Active, and takes slightly more decoding.

The Traditional Content Pyramid
 Consider the traditional format
 Now completely invert it.
 80% of the most important
info should be above the fold.
Audience
& Priority
TITLE
INTRODUCTION
Short, Simple,
“Above the Fold”
THE PROOF
Detailed reasons to believe
you’ve got me this far
CALLS TO ACTION
What’s next – How can I act on the info?

Engage & Simplify
 Areas Related to Building the User Experience
 User Research focuses on understanding user behaviors, needs, and motivations
through observation techniques, task analysis, and other feedback methodologies.
 Usability Evaluation focuses on how well users can learn and use a product to achieve
their goals. It also refers to how satisfied users are with that process.
 (IA) focuses on how information is organized, structured, and presented to users.
 User Interface Design focuses on anticipating what users might need to do and ensuring
that it has elements that are easy to access, understand, and facilitate.
 Interaction Design (IxD) focuses on creating engaging sites with well thought out
behaviors.
 Visual Design focuses on ensuring an aesthetically pleasing interface that is in line with
brand goals.
 Content Strategy focuses on writing and curating useful content by planning the
creation, delivery and governance behind it.
 Accessibility focuses on how a disabled individual accesses or benefits from a site.
 Web Analytics focuses on the collection, reporting, and analysis of website data.

Engage & Simplify
 Using compelling and engaging graphics:
 Use Icons related to the subject.
 Use Infographics that describe a topic or workflow.
 Add interactivity that makes the journey more engaging.
 Make graphics personal, personable, applicable and professional.
 Keep graphics styles consistent with others used on the site.
 Do not use graphics/imagery for it’s own sake.
 Using stock imagery takes away from the user experience.
 Make it relevant, make it aesthetic, make it real.

Keep it Consistent
Keep it Consistent, Keep it Consistent, Keep it Consistent!
 Use all elements mentioned above similarly throughout the site.
 No matter what, be consistent. If you do something once, do it throughout.
 The site styles should offer several options for each element such as
lists, tables, documents, calls to action etc.
 It is up to the content contributor to ensure that web guidelines are followed
to maintain consistency throughout the site and that correct styles are used
as they were intended.
 Ensure all images comply with the style guide.
 Size ratio, specific height & width parameters and optimization.
 Do not increase or decrease an image size falsely.
 All images of a certain type should have similar
treatments (border, shadow, neither).

Keep it Consistent
And some other things to watch for…
 Ensure all pages and tables have cell padding. Content that butts right
up against the edge of the content area looks unprofessional.
 These types of things should be set up
in the code/templates, but if it isn’t,
send it back (unless your waiter is a fly).
 Footers should be aligned to the bottom.
Sometimes the content in a page is not
enough to fill a page and footers float;
floating pages do not look good.
 Images that get cut off. Ensure that the
images fits the space intended.
 What else???

Sources
 http://www.usability.gov/what-and-why/index.html
 http://www.nngroup.com/articles/usability-101-introduction-to-
usability/
 http://www.nngroup.com/topic/accessibility/

WebBestPractices3

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to WebBestPractices3 (20)

WebBestPractices3

Editor's Notes