Unit 4, Section 1, Overview
Before moving on to the rest of the content head over to the Unit 4, Section 1, assessment page to answer a few quiz questions.
In Unit 3, we designed the preliminary design using WordPress. The intent was for you to emulate what we did using our own preliminary design so you have hands on practice designing and developing your own website. We also discussed both non-empirical and empirical ways in which to evaluate and test your site for overall usability. In this section, we’ll go into much more detail for how to conduct usability testing and evaluate data. Let’s begin.
The five non-empirical tests or analyses recommended are:
- site analytics
- performance metrics
- cognitive walk throughs
- heuristic testing
Let’s discuss each in depth.
So given this figure, Site analytics gives us data that we can use as information about our site.
Most popular pages. What pages are most visited and most, therefore, relevant to them. This will help inform how your site is organized and what quick links you need to push up to the front of the site via the home page and/or navigation. Most popular types of information. Again, this gives us what people are looking for and valuing.
Time on pages. This lets us know, again, what pages they are spending most of their time on. Another glimpse at relevance and important information your users are consuming.
The balance rate. Balance rate means that the user left the site without clicking on any more links on your site. A low balance rate on your home page means success as users have found something they’re interested in. In this case, a 39 percent balance rate is OK, although we would like to see that number go down further. Balance rates should increase as users dig deeper into your site as hopefully they have found the information they were looking for.
Geography. The geography of where your users are from, not shown in the figure, gives you an interesting glimpse of where your hits are coming from and could help you plan out your marketing strategy and where your users are coming from.
- This just lets you know what browsers you need to make sure your site works well in. Test using these browsers to make sure your site looks and works well.
- This helps with design and layout in terms of what resolution the majority of your users are viewing your site in.
You can design your site layout accordingly to make sure it accommodates the lowest resolution users, wider width, so they have a good browsing experience.
Certainly, mobile users and mobile versions are important considerations here, too, and much more.
Demographic analysis just comes back to who your users are, and this is a big deal. We’re dealing with the live site now. So some of your data can help you identify or approximate who your users might be, and, most importantly, what they’re expecting and the preferences that come with this. Let me share with you the three secrets of creating raving fans or customers whose expectations you have actually exceeded to the point they rave about how good you are.
According to Blanchard and Bowls, these three secrets are decide, discover, and deliver plus one. This applies to web design because websites are effectively information systems that people use for information and desirable transactions.
So Secret 1 is establishing an ideal vision of what you want your site to be. Cool, serious, eclectic, professional, looks like that site? The reason why this is so important is that without this foundation, this anchor, there’s no context in which to understand your user input or preferences, which is secret to discover. In these assessment terms, you cannot truly understand the need until you understand the gap between what is expected and what is actual reality. This is especially critical in web design because different age groups have different information-seeking preferences.
For example, in my research on age-appropriate youth websites, we developed a construct called concept actualization, which refers to the notion that we cannot possibly accurately conceptualize and operationalize subjective terms such as cool, good, exciting, etc., without a lot of help from the users themselves. What these terms mean to us as designers and developers are often not experienced the same way by the actual users, especially as the age group of the users, e.g. youth, differ significantly from the age of the designers and developers.
The “deliver plus one” concept means that you not only get it right in terms of the meeting the needs and actualize concepts of your users, but you add a plus one that serves as a symbolic hug where users have a built-in relationship with your site where they feel understood and cared for.
While I know this sounds like a lot, it is all about identifying and working with your target user group and not about trying to please everyone. Who do you want to use your site and make sure you build a constant feedback loop with them?
Performance metrics is a big favorite of mine. What does success look like and how do you measure it? Metrics represent the empirical or data-driven ways of measuring success. In other words, what your cycles are and in what way are you going to measure them? Many of the site analytics and other measures will inform your site’s overall performance.
Cognitive walk throughs represent the old adage walk a mile in someone else’s shoes. Use your user task analysis feature checklist. Let’s try it.
[Scenarios.] So with our Perspective Students: Course Information, Department Contact Information, Information About Faculty and Staff, Course Schedule, and Tuition. All seem to check out well with our new information architecture. How about Current Students? Course Information, Course Schedule, Information About Faculty and Staff, Department Contact Information, Calendar, and Events. Again, it seems to check out really well. How about Alumni? Department Contact Information, Calendar and Events, News, Careers, Department’s Social Media Contact Information, check.
Finally, for Faculty and Staff: Student Forms, Calendar and Events, Departmental Contact Information and Social Media, Faculty and Staff Information, Course Information. Again, looks well aligned.
There are ten usability standards of heuristics based on a combination of Nielson and Jordan recommendations.
1. Consistency. Designing a product so that similar tasks are done in similar ways. Users spend most of their time on other websites and expect yours to operate in a familiar and similar fashion.
2. Compatibility. Designing a product so that its method of operation is compatible with users’ expectations based on their knowledge of other types of products in the outside world. Again, your site needs to compare favorably in terms of how it functions, looks in terms of look and feel, and operates.
3. Consideration of User Resources. Designing a product so that its method of operation takes into account the demands placed on the user’s resources during interaction. Who’s using your site and for what purpose? What about bandwidth? Screen resolution? Performance environment they’ll be accessing your site in? Type of technology that they’re using? These are all considerations that are important for your user’s experience.
4. User Control. Designing a product to the extent to which the user has control of the actions taken by the product in the state that the product is in is maximized. Nothing happens without the user deciding it happens.
5. Visual Clarity. Designing a product so that information display can be read quickly and easily without causing confusion. Visual clarity in what people are looking for so they can find it effectively, efficiently, and with little mental effort.
6. Prioritization of Functionality and Information. Designing a product so that the most important functionality and information are easily accessible to the user. Organize your site around the highest priority functions and push them to the home page as much as possible. For example, using quick links, profiling, major initiatives, and information on the home page content area.
7. Explicitness. Designing a product so that cues are given as to the functionality and method of operation. It is clear how your site functions and what is available on your site.
8. Match Between System and Real World. The system should speak the user’s language with words, phrases, and concepts familiar to the user rather than system-oriented terms. Follow real-world conventions making information appear in a natural and logical order. Avoid jargon, acronyms, and other specialized language or functionality that may be unfamiliar or disorienting to first-time visitors or frequent users.
9. Recognition Rather Than Recall. Make objects, actions, and options visible. The users should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. This goes back to consistency and compatibility. Users have a mental model of how sites usually work, and they will come to your site expecting it functions similarly.
10. Aesthetic and Minimalistic Design. Dialogue should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Look and feel are still important, and remember the effect of feeling noted in the analysis stage. Aesthetics is important in terms of the emotional and initial reactions people have of your site. Also be minimalistic in your use of images, media, and, especially, information.
I know that ten usability heuristics are a lot to take in, but there are actually two that take precedence — Prioritization of Functionality and then Consistency.
Prioritization of functionality is the top priority as not all features of any service or system are of equal importance. What is most used gives your site goals and user preferences. Remember quick links? This is why they’re placed on the home page. The website’s most highly desired and used features can serve as the primary way in which your site is organized.
Consistency is priority #2, given the fact that your users will spend most of their time on other websites and, therefore, have formed a mental model for how your website should and is expected to operate. While it’s important to be innovative, it is essential this innovation takes places within the context of established norms and expectations.
OK. Let’s apply these to our mock up. Consistency. At our top navigation on a white background. Check. Compatibility. Nothing out of the ordinary here. The navigation does have hierarchal drop down menus as well. Check. Consideration of user resources. No heavy multimedia elements, although the images is a Java-based slideshow. Check. User control. The slideshow does move every ten seconds, but otherwise the user is in complete control and can see the whole site structure from the home page without being overwhelmed, hopefully, with too many choices. Visual clarity. Clean, clear, and obvious where the user’s main choices are for navigation.
Prioritization of functionality and information. The entire site is designed around the primary users and their primary information needs. We also added Quick Links area along with News and Department Calendar. So most high-priority information is a click away from the home page. Check. Explicitness. Links and navigation have been vetted for clarity and explicitness. Check. Match between system and real world. Nothing out of the ordinary here. Check. Recognition rather than recall. Again, the organizational structure and navigation have been designed to be familiar and easy to use. Check. Aesthetic and minimalistic design. Very much minimalistic design and images and some modest color is being used to stay out of the way of our users’ information seeking while still being a pleasant user experience. Check.
One other non-empirical test is ADA compliance. The American Disabilities Act was created in 1990 with the purpose of prohibiting discrimination on the basis of disability by public accommodations and requires places of public accommodation and commercial facilities to be designed, constructed, and altered in compliance with the accessibility standards established by this part.
In 1999, the Worldwide Web Consortium, W3C, created standards for exactly how to apply ADA standards to the Web. These guidelines explain how to make web content accessible to people with disabilities. The guidelines are intended for all web content developers and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility. See the link to the W3C accessibility guidelines in the text transcript below.
There are three priority levels. Priority 1: A web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in this document. Satisfying this checkpoint is a basic requirement for some groups to be able to use web documents.
Priority 2: A web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in this document. Satisfying this checkpoint will remove significant barriers to accessing web documents.
And, finally, Priority 3: A web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in this document. Satisfying this checkpoint will improve access to web documents.
There are 14 guidelines. The 14 guidelines are:
- Provide equivalent alternatives to auditory and visual content.
- Don’t rely color alone.
- Use markup and style sheets and do so properly.
- Clarify natural language usage.
- Create tables that transform gracefully.
- Ensure that pages featuring new technologies transform gracefullly.
- Ensure user control of time-sensitive content changes.
- Ensure direct accessibility of embedded user interfaces.
- Design for device independence.
- Use interim solutions.
- Use W3C technologies and guidelines.
- Provide context and orientation information.
- Provide clear navigation mechanisms.
- Ensure that documents are clear and simple.
Make sure all images have clear alt tag descriptions that are beyond a headshot or a picture of a mountain but are slightly more descriptive. For example, a head shot of Dr. Anthony Chow, a photo of snowcap mountains from the Rocky Mountains. Also make sure all video or audio sources have transcripts. Also here is W3’s web accessibility validator. Excellent.
I hope you’ve enjoyed our journey through non-empirical testing and the first part of evaluation, which is not dealing with actual users. Next section we’ll deal with users specifically. Remember to complete the review session, discuss this section in the discussion area, look at any readings, and do the hands-on activity. Take care, and hope to see you again soon. Cheers.