14

This isn't involving external links, but rather within a "single page app", we have some report buttons that should logically open their report in another tab (for printing, different layout, etc...) Part of the reason for these other tab links is there might be 5 different reports for a particular person. Clicking on one report shouldn't change your focus form this person, but we need to display the report.

If a button opens a dialog we have ... in the button label. How could we logically indicate "this link" opens a new tab/window? I can't think of any place I've seen this done on a production system.

Example of the buttons/links

Improve this question
2
  • Just to clarify, the tabs are opened within the web app's view and are not opened in a new tab by the browser and you are looking for a new pattern beyond providing an icon and title="open in new tab"?
    – glilley
    Apr 8, 2014 at 17:10
  • Added a picture, and no, these are actually new browser tabs. There isn't room for open in new tab in the UI, and while I know I can right-click and do that, the feedback I'm getting is our users don't know about that.
    – boatcoder
    Apr 8, 2014 at 17:53

3 Answers 3

Reset to default
19

Find something easy to learn

This is an app so I assume your users are willing to take the burden of a little learning curve. With that in mind, adopt a convention and be totally consistent with it. They'll take to it quickly if it's clear enough.

I think (as I'm sure you do) that a text label would clutter your interface. The most compact yet self-evident indication that comes to mind is this icon (courtesy of IconFinder):

enter image description here

It can mean "new window" but that bad habit is quickly disappearing on the web. It can also mean new tab or new in-window modal. If you use it throughout your app to indicate one thing and one thing only (new tab), your user will know what to expect.

There are other icon options (try this search on IconFinder), but none of them seems as efficient or obvious to me.

Improve this answer
7
  • I like this idea.
    – boatcoder
    Apr 8, 2014 at 19:27
  • This is an app so I assume your users are willing to take the burden of a little learning curve Is this a complete assumption or some research you've done/read? If so; Can you show me?
    – SlaKrop
    Apr 9, 2014 at 13:52
  • "Complete assumption" is a little harsh. It's an "informed assumption" ;) I'd even go so far as to argue that it's common sense. It's comparative, of course. Users of apps are willing to learn more about the app's functionality and conventions than users of, for instance, ecomm sites.
    – plainclothes
    Apr 9, 2014 at 23:06
  • And it's also worth noting that the extra learning curve I'm suggesting here is quite small for anyone who's been on the web before.
    – plainclothes
    Apr 9, 2014 at 23:13
  • It can also mean "external" website.
    – brentonstrine
    Apr 10, 2014 at 17:49
3

Looks like plainclothes beat me to it with the icon, but if you put an html attribute on the element: title="open in new tab" that just shows on hover as a tooltip so there will likely be room and it provides an additional layer of clarification.

Additionally, if users are still having trouble noticing a new tab opening, it might be necessary to provide better feedback in the form of an animation.

Here's an example from Codrops. This may not be the most appropriate icon animation, but it illustrates how a simple animation can provide useful feedback.

http://tympanus.net/Development/AnimatedSVGIcons/

It's not entirely clear if the same link can produce multiple tabs or not, but in that case you could include a number count in the icon.

Improve this answer
1
  • 3
    Tooltips are never seen on mobile devices.
    – Flimm
    Oct 11, 2016 at 14:02
2

I strongly recommend against new window/tab links as core functionality of a web app. Web browsers and web apps communicate based on a set of principles called a REST architecture. REST is mainly an engineering principle, but it affects interaction design as well.

Think, for instance, of the back button in your browser. Think of bookmarks. Think of people e-mailing links to each other. These things only work if your web apps puts persistent documents behind persistent URLs and navigation is (largely) stateless.

I know I'm not answering your question, but there's a reason you haven't seen this function in good web apps: it's a bad idea. The open in new tab/window functionality is in the domain of the user. It's a feature the user uses at her discretion to manage her work. She may decide that a given report is worth holding on to while she browser on. This doesn't hold for all reports, it holds for specific reports that she finds important. If you start meddling with that, you will annoy people.

You should redesign your app. If you really need tabs that you control, put them inside the browser tab. That's your domain. It's a space you can control. If you open in a new window, you have no idea where it'll end up and what the user is going to do to that window, or if she's even going to see it.

Improve this answer
10
  • 1
    I agree that a new tab isn't the "ideal" solution for an app, but it is by no means unheard of. The OP has come to the determination that this flow is best for the context. The question is how to make the flow clear so users aren't surprised by it.
    – plainclothes
    Apr 8, 2014 at 18:21
  • That's a fair point, but my concern is that his difficulty is a symptom of a deeper problem. If you dig down, and fix that issue, all these things will fall in to place too. Of course, that's an expensive step so the OP should implement a quick solution first and then work to eliminate the deeper problem.
    – Peter
    Apr 8, 2014 at 18:25
  • 1
    This is a strange application of the REST idea which is much more server side oriented. The URLS are meaningful and book-markable. One part of the app is used to schedule people and requires a few seconds to load. By popping these reports in another window we save that time of coming back to the app and restoring the state that would be in the browser. I'll think about the idea of floating a div above the main app and displaying there, but that is probably going to play hell with printing. It's possible I could combine the two answers and make a clickable icon for "other" window
    – boatcoder
    Apr 8, 2014 at 19:26
  • I'd also add that Google Docs makes extensive use of multiple tabs to accomplish what they need. I don't see this use case as very different from that.
    – boatcoder
    Apr 8, 2014 at 19:27
  • @Mark0978, re-reading my answer I see that the point about REST interfaces is maybe not that apposite to this problem. But I would say that REST architecture is as much a client side principle as a server side one. It defines the contract that exists between the server and the client. All the functionality of the browser (back button, bookmarks etc.) breaks down if your app behaves in a stateless way. It doesn't really apply to your problem that much, but a new window does imply a new navigation context, so the back button stops working.
    – Peter
    Apr 9, 2014 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.