HEURISTIC REVIEW OF INTRALINKS ACADEMY BY: MAURA ROBINSON & RICH BUTTIGLIERI OVERVIEW User Experience reviews reveal major and minor aesthetic, usability, consistency, and credibility issues. While some of these issues may not result in significant usability problems in isolation, when combined they can significantly degrade the overall user experience of an application.
POSITIVE FINDINGS Redundancy On the homepage, links to the product pages are listed in both the top navigation and in shortcuts in the bottom section of the screen, giving users two ways to access product information and providing flexibility and ease of use. Left Edges The number of left edges present throughout the design provide an optimal amount of information for scanning by the eye. Quality of Content Tutorials and product reference PDFs provide rich information for each product category
SUMMARY OF ISSUES Confusing Information Architecture
Important content hidden deep within the website No easy way to browse or navigate to specific material, lacking transparency of content on higher pages Links that open in new tab invalidate the central navigation of the site and take the user out of the context of the site, making it difficult to navigate to related content
Visual Design and Layout
Inconsistent Corporate Branding Color Scheme Inconsistent design from page to page (ex. main site to individual course links) Different font families used Different number of font sizes used Important content appears below the fold Large images take up space that could be occupied by higher priority content
Terminology
Different language used to refer to the same content
Accessibility
Contrast below Web Accessibility Standards No or incorrect alternative text attached to images Several Links open in new tabs Video: o Controls: small size and low contrast o Lacking navigation throughout video (scrubber or fast-forward/rewind) o Video consumes screen as an overlay
Heuristic Review
Page 1
HOME SCREEN
HOME SCREEN IN COLOR CONTRAST ANALYZER: Contrast ratio below 3:1
Contrast ratio below 3:1 Contrast ratio below 3:1
Contrast ratio below 3:1
Heuristic Review
Page 2
#
Issue
Heuristic
1
Flexibility and Efficiency of Use
2
(+)Redundancy: The products are listed at both the top and the bottom section of the screen, giving users two ways to access product information The images used for shortcuts do not instantly communicate the content of that section to the user
Aesthetic and Minimalist Design
3
Consistency and standards Aesthetic and Minimalist Design
4
Consistency and standards Terminology
Use the same language when referring to the same content. For example: Consider changing the “Courses” section to “Tutorials”
5
The color and style of the webpage do not directly fit with the current Intralinks branded website The content of the introduction clearly communicates the function of the website, however it does not match the terminology used in other sections; tutorials are found in the “Courses” section, and guides are found in the “Resources” section. This can cause confusion for users because it orients them to search for the mentioned terms Users are not able to see or navigate to the content each tab contains without
Clarity Flexibility and Efficiency of use
Consider a drop down for each section of the primary navigation with links to its content
Heuristic Review
Recommendations
Page 3
Good job! Keep the shortcuts in the lower portion of the screen to ensure the user has access to these important areas Consider swapping out images that better communicate the content of that category (ex. Do other departments such as marketing have images or thumbnails commonly used to represent these products?) or using icons for action buttons Follow the Intralinks branding guidelines
6
7
8
9
clicking on it and entering the page The font in the main navigation is not visible enough due to low contrast, does not meet web accessibility standards , view Color contrast tracker ( see color analyzer) Visual Design & IA: most important information is displayed below the fold of the screen reducing visibility and making navigation to that area harder for user (Relevant on all pages of the site) Screen Reader: Images in the body/heading do not have alternate text attached to them Short cut images: reads the link to the picture instead of a text description (This is true on every page of the website) Titles at the top are not read together as one item and require the user to move their mouse/keyboard to hear individual word Font family and number of different font sizes are not consistent though the design *This issues occurs within several pages of the design
Heuristic Review
Accessibility Readability
Organization
Accessibility
Provide Alternative Text for images
Aesthetic and Minimalist Design
Keep to a simple number of font sizes to reinforce information architecture Do not mix font families except in special circumstances to keep sense of uniformity throughout the site
Page 4
Change font color or background color to increase contrast ; A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision. Move important information up to increase visibility
WHAT’S NEW SCREEN
Heuristic Review
Page 5
#
Issue
Heuristic
Recommendations
10
Organization Accessibility
Keep content in the context of page, not opened in a new tab
11
Opens in a New Tab, disorienting the user and removing them from the context of main site No way to navigate back to main site (even by clicking the back button) In IE: automated from opening image to subsequent video tutorial : No ability for user to control, hijacks the page , frustrated annoyed (in Chrome and Firefox VCR controls present) Closed captioning not present
Organization
Keep content in the context of page Provide access to main navigation of the site Give the user controls over the start and stop of the sequence Consider using other content to communicate new features for example text with images instead of automated video
No continuity in design from main website to What’s New page or within the actual page itself Date of October 2014 first image displayed: Does not align with the title “What’s new” as the content displayed is from October of 2014- Stale data – embarrassing The images do not purposefully communicate the content of the page In IE, the top portion of the screen is cut off, severing the logo
Consistency and standards Aesthetic and Minimalist Design
Follow the Intralinks branding guidelines
Clarity Consistency and Standards
Remove the date or update more frequently
Aesthetic and Minimalist Design
Consider using images that better represent the content
Aesthetic and Minimalist Design
Consider optimizing the visual design to ensure it is consistent in all browsers
12
13
14
15
16
User Freedom and Control Accessibility
*These issues occur within every “What’s new” link listed in the site
Heuristic Review
Page 6
INTRALINKS VIA HOME SCREEN
SCREEN IN COLOR CONTRAST ANALYZER:
Contrast ratio below 3:1
Heuristic Review
Page 7
SCREEN IN WAVE ACCESSIBILITY ANALYZER :
No Alternate Text Attached to Images
#
Issue
Heuristic
Recommendations
17
The introduction content is the same as the Intralinks Academy Home screen *Same issue occurs in all product home screens
Clarity Error Prevention
18
There is no way to view what content is contained in the Courses, Resources, or FAQ sections from this screen The content of the description under each category is generic and does not alert the user to the specific content contained in within each category *Same for every product page In the current format important content could remain hidden and does not aid user in finding specific content
Clarity Flexibility and Efficiency of Use
Heuristic Review
Page 8
Provide a small description or into specific to the product to inform users of what to expect and give more cues that differentiate this page from others (do the same for each individual product page) Consider a dropdown for each section that contains links to the information it holds so users can navigate efficiently to the intended material
19
20
The “Courses” tab contains video tutorials. This nomenclature assumes that the user will associate courses with video tutorials, and could be nonobvious to the user. (Would users assume that courses means video tutorials) Large image at the top takes up too much space, and the most important information is displayed below the fold
Terminology Organization
Aesthetic and Minimalist Design
21
22
The font used for the titles does not a reach a visible level of contrast Wording beneath the action items is small, verbose and difficult to read
Accessibility Readability
When the screen reader detects images, there are either no words attached or it reads the link for the image
Accessibility
Heuristic Review
Page 9
Consider changing the name of the courses tab to “Tutorials” Use the same term and make the term very clear
Move the most important content up above the fold to a more visible place that demonstrates it’s important Consider using images that better represent the content of the page or icons to represent the material Consider representing the action buttons in a different way ex. side navigation Optimize the content and increase size, consider choosing a more visible color or background color; A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision. Include Alternative Text for images
INTRALINKS VIA COURSES HOME SCREEN
Heuristic Review
Page 10
Contrast ratio below 3:1
SCREEN IN COLOR CONTRAST ANALYZER:
Contrast ratio below 3:1
Contrast ratio below 3:1, font size unreadable
#
Issue
Heuristic
Recommendations
23
Clarity Flexibility and efficiency of use
Include a visual way for users to view the content that each link contains without having to click and enter ex. dropdown menu
Aesthetic and minimalist design
Remove image or reduce the size to allow space for higher priority content
24
No indication that each of the links displayed under title (Intralinks Via Courses) contains its own set of important content Detrimental to quick search and browsing Hides content deeper within the website Reduces Findability Large framed image takes up valuable space and provides no functional value to the design
Heuristic Review
Page 11
25
26
27
28
The placement of the logo above the title distracts from the title’s importance and could affect the user’s understanding of their location within the site In the bottom navigation action items (Courses, Resources, FAQ) There is no visual indicator to tell the user what category they are currently viewing *This occurs on all product pages on the sit
Error Prevention Organization Clarity
Error Prevention Organization Clarity
The font used for the titles does not a reach a visible level of contrast Wording beneath the action items is small, verbose and difficult to read
Accessibility Readability
Screen Reader: No alternate text for images
Accessibility
Heuristic Review
Page 12
Place the logo in a different spot Make the title more visible to the inform the user about the content of the page Make a visual indicator to notify the user which page they are currently viewing ex. Change the font color of the section to indicate when opened (such as in the main navigation) or implement a tab visual that makes it appear as though the section is open Optimize the content and increase size, consider choosing a more visible color or background color; A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision. Include alternate text for images that can be detected by the screen reader
INTRALINKS VIA : COURSE TOPIC SCREEN
Heuristic Review
Page 13
SCREEN IN COLOR CONTRAST ANALYZER: Contrast ratio below 3:1
Contrast ratio below 3:1
#
Issue
Heuristic
Recommendations
29
Clarity Flexibility and Efficiency of Use
Open in the same webpage with primary navigation still visible
Clarity Help and documentation
Place topics in a more organized format to communicate clarity and order
User control and freedom Flexibility and Efficiency of use Organization Consistency and Standards
Bookmark specific content and link it to the corresponding titles Include links to the written resources on the topic
30
31
32
Opens in new tab No back button to navigate previous page No navigation to parts of the main site The contents of each module are listed as free text No indicators of organization No easy way for the user to skip to specific content No navigation to related or subsequent content for other courses, or written
Heuristic Review
Page 14
resources for the given topic 33
34
35
The color and style of the webpage do not directly fit with the current Intralinks branded website The font used for the titles does not a reach a visible level of contrast Wording beneath the action items is small, verbose and difficult to read
Consistency and standards
Accessibility Readability
Screen Reader: no alternate text for images When clicking into courses, no alternate text is provided on the introduction screen When switching between tabs the reader repeats the navigation path The watch video tutorial link reads “Tap Video Form”
Accessibility
Heuristic Review
Page 15
Include links to the next content in the course list Follow the Intralinks branding guidelines
Optimize the content and increase size, consider choosing a more visible color or background color; A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision. Include alternate text Provide smooth transitions from tab to tab Remove irrelevant information
INTRALINKS VIA : COURSE TUTORIAL VIDEO PLAYER
Heuristic Review
Page 16
SCREEN IN COLOR CONTRAST ANALYZER:
Contrast ratio below 3:1
#
Issue
Heuristic
Recommendations
36
Video covers screen as an overlay and makes the content behind fall away
Aesthetic and Minimal Design Flexibility and efficiency of use
Allow the video to play within the page to keep user in context
No Closed Captioning
Accessibility
Include closed captioning for videos Provide full transcript if closed captioning is not feasible Increase the contrast by changing the colors used in foreground and background; A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision. Increase the usability of controls: longer scroll
37
38
X out button and other controls such as full screen, volume, play button and scrubber fall to background due to low contrast
Accessibility Flexibility and efficiency of use
39
Video controls small, with no scrubber or fast
Accessibility
Heuristic Review
Page 17
40
forwards controls making it difficult to navigate Scroll Bar difficult to navigate Video controls not recognizable by a screen reader
bar, grabber to navigate through video, tag for content
Accessibility
INTRALINKS VIA : RESOURCES MAIN SCREEN
Heuristic Review
Page 18
Add alternate text to inform screen reader of function
Contrast ratio below 3:1
SCREEN IN COLOR CONTRAST ANALYZER:
Contrast ratio below 3:1
Contrast ratio below 3:1
#
Issue
Heuristic
Recommendations
41
Aesthetic and minimalist design
42
Error Prevention Organization Clarity
Large framed image takes up space and provides no functional value to the design The placement of the logo above the title distracts from the title’s importance and could impede the
Heuristic Review
Page 19
Remove image or reduce the size to allow space for higher priority content Place the logo in a different spot Make the title more visible to the user due to its importance
43
44
45
46
user’s concept of their location within the site The font in the Resources menu and underneath the action items is low contrast, small and difficult to read
Accessibility Readability
The use of the terms “Reference Guides and Resource Guides” assume the user knows the difference: could cause some confusion
Terminology
User Guide and Reference Guide links are PDF’s that bring the user into a new tab and outside of the website No built in way to search through content besides the find function in PDF Visual Design of PDF does not match the brand of the main site PDF’s not able to be read by screen reader
Organization Clarity
Heuristic Review
Accessibility
Page 20
Optimize the content and increase front size, for the font beneath action items consider choosing a more visible color or background color, A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision. Eliminate one of the terms and decide on one cohesive titles for the section
Create a page with the content instead of the PDF Place a pdf icon next to the link so the user knows what to expect when clicking it
Provide alternate text so content can be read by screen reader
INTRALINKS VIA FAQ SCREEN
FAQ SECTION IN COLOR CONTRAST ANALYZER:
Contrast ratio below 3:1, unreadable font size
Contrast ratio below 3:1 Heuristic Review
Page 21
#
Issue
Heuristic
Recommendations
47
Accessibility Readability
See Previous Heuristics
48
Font in menu and underneath the action items is small and difficult to read Blue font may be difficult for some users to see without strain Other issues addressed previously in Review: o Visual Indicator o Framed Image o Placement of Logo o Images with no alternate text o Visibility of Font
Heuristic Review
Page 22
Optimize the content and increase front size, for the font beneath action items consider choosing a more visible color or background color See Previous Recommendations
INTRALINKS VIA FAQ FULL LIST
SCREEN IN COLOR CONTRAST ANALYZER: Unreadable font size
Contrast ratio below 3:1
Heuristic Review
Page 23
#
Issue
Heuristic
Recommendations
49
Aesthetic and minimalist design
Consider displaying these options in a different way that takes up less page real estate for example a side navigation menu
50
The links and images for Courses, Resources, and FAQ separate the top of the page with links from the bottom of the page that lists the FAQ and take up valuable space Blue font on grey background is low contrast and difficult for users to read
Accessibility Readability
51
Readability Accessibility Clarity Error Prevention Organization
52
The text is small and difficult to read The questions are not easily discernible from the answers for quick search
Increase contrast by choosing a more visible color or background color, A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision. Increase the font size
Backlinks to return to top of page are hard to see due to low contrast
Accessibility Readability
53
Heuristic Review
Page 24
Make the question and answer fonts different through bold or italics Put a visual indicator in front of the question and answer to clearly mark them Increase contrast by choosing a more visible color or background color; A contrast ratio of 3:1 is the minimum level recommended by Web Accessibility Guidelines for standard text and vision.
HEURISTICS Accessibility Regardless of the abilities of the user or the environment in which the system is being used, there should be no barriers to prevent users from using the system. Aesthetic and minimalist design Screens should not contain information which is irrelevant or rarely needed. Every extra unit of information on a screen competes with the relevant units of information and diminishes their relative visibility. Business processes Ideally, business processes should be aligned with users’ needs. When misalignment occurs, back-end processes show through and constrain the user interface. When the business processes cannot be changed, there should be adequate performance support offered to users. Clarity Users should be able to read content and instructions and understand how they should proceed. Additionally, users should be able to orient themselves easily within a website or product interface. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Allow users to explore the interface without penalty, and support Undo and Redo. Flexibility and efficiency of use Accelerators and short-cuts may speed up interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow expert users to tailor frequent actions. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (without codes), precisely indicate the problem, and constructively suggest a solution. Help and documentation Online help and documentation should be easy to search, focused on the user's task, and list concrete steps to be carried out. Consider providing a glossary of terms. Organization Ensure that the interface supports the user’s expected workflow. Follow real-world conventions, making information appear in a natural and logical order within and among pages. Readability Ensure that all text is readable by choosing sufficient font sizes, resolution and/or contrasting colors. Avoid highly stylized fonts and all capitals. Break up long passages of text with bullets and white space to allow easy scanning. Recognition rather than recall Make objects, actions, and options visible to the user. The user should not have to remember information from one Heuristic Review
Page 25
screen to another. Instructions should be visible or easily retrievable whenever appropriate. Terminology The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms or jargon. User control and freedom Users often choose options by mistake and need a clearly marked "emergency exit" to leave the unwanted state or screen without making any changes. Also, provide users with the features and options that they require at the appropriate point in a process. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Heuristic Review
Page 26