We're updating the issue view to help you get more done. 

PUI: digital object button not recognizable as a button or link to digital object instance

Description

Standing in a room of about 10 people it was not clear to us that the red digital object button when clicked takes me to the digital object. Moreover, when there is no preview image it is inconstant between the way it appears on the archival object page and the digital object page.

Even when there is a preview image, in no way is it alluded to that this element has something to do with the digital object instance nor that it is a link to said digital object instance.

Usability heuristics, i.e. best practice, say that if it's a link it should be styled as a link, and if it's a button it should be button shaped (https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4). In the current design the digital object button is neither of these (calling it a "button" is a stretch).

That it is red (when there is no preview image) does not fix the problem. Red is typically used to indicate danger to the user, or to notify them of an error (https://uxplanet.org/using-red-and-green-in-ui-design-66b39e13de91). Moreover accessibility best practice dictates "Don’t rely on color alone to convey the meaning" (https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html). However, this element is merely red, with no other indications that it is a link. I'm not even sure that the red indicates this, even for a color seeing user. Maybe it's red just to get my attention? However proper use of whitespace and value masses would make the element just as noticeable

Finally if this element is attempting to be a button, caution should be exercised in working toward this goal. Buttons are used to change state, not navigate the user to a new location. Good old hyperlinks are for navigation (https://medium.com/simple-human/but-sometimes-links-look-like-buttons-and-buttons-look-like-links-9b371c57b3d2). The recent prevalence of the Call To Action presents a grey area. That being said, the current design does not follow the call to action design pattern (https://www.usertesting.com/blog/11-characteristics-of-persuasive-call-to-action-buttons/).

Some possible solutions:

1. (hyperlink)
Stick with a regular old hyperlink design. This features the "media icon" or thumbnail with a title/description below it. Then a hyperlink that reads something like "view online". I recommend this one because users know what a link is. They will be more comfortable right clicking and selecting "open in new tab" or "copy link location".

2. (call to action button)
Use a proper call to action design pattern. This features the "media icon" with a title/description below it and a button that reads "view online". This approach will definitely get peoples' attention. But, on the down side, users will be less comfortable treating the button as a hyperlink to satisfy the use cases eluded to above.

Note how, though I removed the red from the design, proper use of whitespace and value masses makes the element no less noticeable (blue is heavier than red).

Environment

None

Status

Assignee

Unassigned

Reporter

Tristan Chambers

Priority

Major