Open PDF files in the same tab/window

Quoting usability experts Jakob Nielsen and Anna Kaley [1]:

> [Opening PDF files in new tabs] is problematic, because it assumes
> users will always do the exact same things with certain file formats,
> which isn’t always the case.

There are many examples of this situation. For example, some people
(myself included) configure their browser so it downloads PDF files
instead of opening them in the browser. In this situation, a new tab is
opened, a blank page is displayed, the file is downloaded, and then
either the tab is closed or the blank page needs to be manually closed.
The end result is really annoying.

Other situations include people who use a mobile phone browser, where
navigating through tabs is generally much harder than doing so on a
desktop browser.

But IMHO the most important point is: every browser already provides a
way to open "regular" links in a new tab, so people can choose what to
do, but if we decide to open the link in a new tab, we take control away
from them, and people who'd like to open the link in the same tab might
feel frustrated.

In these cases, the links either say "download" or include the word
"PDF", so people know in advance that they're going to download/open a
PDF file, and so we're giving them information and, by removing the
`target` attribute, we're giving them control over their browser so they
can choose what's convenient for them.

[1] https://www.nngroup.com/articles/new-browser-windows-and-tabs
This commit is contained in:
Javi Martín
2023-10-13 13:02:19 +02:00
parent 7c6134fdee
commit cdc5e05d48
7 changed files with 7 additions and 11 deletions

View File

@@ -3,6 +3,5 @@
<%= actions.action(:download,
text: t("documents.buttons.download_document"),
path: document.attachment,
target: "_blank",
rel: "nofollow") %>
<% end %>

View File

@@ -1,5 +1,5 @@
<div id="<%= dom_id(document) %>" class="document">
<%= link_to document.attachment, target: "_blank", rel: "nofollow" do %>
<%= link_to document.attachment, rel: "nofollow" do %>
<strong class="document-title"><%= document.title %></strong>
<small class="document-metadata">
<span class="document-content-type"><%= document.humanized_content_type %></span>

View File

@@ -48,7 +48,6 @@
<% milestone.documents.each do |document| %>
<%= link_to document.title,
document.attachment,
target: "_blank",
rel: "nofollow" %><br>
<% end %>
<% end %>

View File

@@ -31,7 +31,6 @@
<%= actions.action(:download,
text: t("documents.buttons.download_document"),
path: document.attachment,
target: "_blank",
rel: "nofollow") %>
<% end %>
</td>

View File

@@ -7,6 +7,5 @@
<%= link_to t("dashboard.poster.options.download"),
proposal_dashboard_poster_index_path(proposal, format: :pdf),
target: "_blank",
class: "button expanded" %>
</div>

View File

@@ -11,13 +11,13 @@ shared_examples "documentable" do |documentable_factory_name, documentable_path,
end
context "Show documents" do
scenario "Download action should be availabe to anyone and open in a new window" do
scenario "Download action should be availabe to anyone and open in the same tab" do
visit send(documentable_path, arguments)
within "#documents" do
expect(page).to have_link text: document.title
expect(page).to have_selector "a[target=_blank]", text: document.title
expect(page).to have_selector "a[rel=nofollow]", text: document.title
expect(page).not_to have_selector "a[target=_blank]"
end
end

View File

@@ -31,9 +31,9 @@ describe "Poster" do
end
scenario "PDF contains the proposal details" do
within_window(window_opened_by { click_link "Download" }) do
click_link "Download"
expect(page).to have_content(proposal.title)
expect(page).to have_content(proposal.code)
end
end
end