Heuristic Review Intralinks Academy

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