web-dev-qa-db-ja.com

このボタン/リンクを示す方法は新しいタブを開きます

これには外部リンクは含まれていませんが、「単一ページアプリ」内に、レポートを別のタブで論理的に開く必要のあるレポートボタンがあります(印刷、異なるレイアウトなどのため)。これらの理由の一部他のタブリンクは、特定の個人に対して5つの異なるレポートがある場合があることです。 1つのレポートをクリックしても、この人物のフォーカスフォームは変更されませんが、レポートを表示する必要があります。

ボタンがダイアログを開く場合、ボタンラベルに...があります。 「このリンク」が新しいタブ/ウィンドウを開くことを論理的に示すにはどうすればよいですか?実動システムでこれが行われたのを見たことのある場所は考えられません。

Example of the buttons/links

10
boatcoder

学びやすいものを見つける

これはアプリですので、ユーザーは少しの学習曲線の負担をいとわないと思います。それを念頭に置いて、規則を採用し、それと完全に一貫している。十分に明確であれば、彼らはすぐにそれを理解します。

私は(あなたがそうしていると確信しているように)テキストラベルがあなたのインターフェースを乱雑にすると思います。頭に浮かぶ最もコンパクトでありながら自明の表示は このアイコン(IconFinderの礼儀)

enter image description here

それは「新しいウィンドウ」を意味する場合がありますが、その悪い習慣はウェブ上ですぐに消えています。新しいタブまたは新しいウィンドウ内モーダルも意味します。アプリ全体でそれを使用して1つのことと1つだけを示す場合(新しいタブ)、ユーザーは何を期待するかを理解します。

他のアイコンオプション( IconFinderでこの検索を試す )がありますが、それらのどれも効率的または私には明白ではないようです。

16
plainclothes

Webアプリのコア機能としてnew window/tabリンクを使用しないことを強くお勧めします。 WebブラウザーとWebアプリは RESTアーキテクチャ と呼ばれる一連の原則に基づいて通信します。 RESTは主にエンジニアリングの原則ですが、相互作用の設計にも影響します。

たとえば、ブラウザの戻るボタンを考えてみてください。ブックマークと考えてください。リンクをメールでやり取りしている人々を想像してみてください。これらの機能は、Webアプリが永続ドキュメントを永続URLの背後に配置し、ナビゲーションが(ほとんど)ステートレスである場合にのみ機能します。

私はあなたの質問に答えていませんが、良いWebアプリでこの機能を見たことがない理由があります:それは悪い考えです新しいタブで開く/ウィンドウ機能はユーザーのドメインにあります。これは、ユーザーが彼女の裁量で自分の作業を管理するために使用する機能です。彼女は、ブラウザを開いている間、特定のレポートを保持する価値があると判断する場合があります。これはすべてのレポートに当てはまるわけではなく、sheが重要であると判断した特定のレポートに当てはまります。それをいじり始めると、人を困らせます。

アプリを再設計する必要があります。管理するタブが本当に必要な場合は、ブラウザのタブ内に配置します。それはあなたのドメインです。あなたがコントロールできる空間です。新しいウィンドウで開いた場合、そのウィンドウがどこに行き着くのか、ユーザーがそのウィンドウに対して何をするのか、彼女がそれを見るのかさえわかりません。

2
Peter

私服がアイコンで私に打ち負かされたように見えますが、要素にhtml属性を置くと:title="open in new tab"これはホバーにツールチップとして表示されるだけなので、スペースがあり、明確化の追加レイヤーを提供します。

さらに、ユーザーが新しいタブが開いていることにまだ気づいていない場合は、アニメーションの形でより適切なフィードバックを提供する必要があります。

Codropsの例を示します。これは最も適切なアイコンアニメーションではないかもしれませんが、単純なアニメーションが有用なフィードバックを提供する方法を示しています。

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

同じリンクで複数のタブを作成できるかどうかは完全には明らかではありませんが、その場合はアイコンに数を含めることができます。

2
glilley