テキスト選択後のアクションをポップアップしてくれユーザビリティ向上に使える「Search And Share」
2009年12月25日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2009/12/search_and_shar.html)
スポンサード リンク
テキスト選択後のアクションをポップアップしてくれユーザビリティ向上に使える「Search And Share」。
ページ内のテキストを選択するとポップアップメニューが出てクリックで任意のページを開くなどのアクションが設定できます。
動作を説明すると、まず、ページ内のテキストを選択します。
![](http://phpspot.net/php/webimager/admin3/data/bcacc9bef0f1650cbee6563941ab0b6d.png)
すると、ポップアップが現れて、コピーの他、各種検索サイトに誘導させることができます。
![](http://phpspot.net/php/webimager/admin3/data/a61b8282dd3b40c413b0a2da9a3a9cbe.png)
拡大すると以下のような感じです。
ブラウザのコンテキストメニュー拡張みたいですが、これならどんなブラウザでも同じものを見せられます。サイトの内容によっては大きくユーザビリティを上げられそうです。
![](http://phpspot.net/php/webimager/admin3/data/eea088d204a1f2193f7f9b4dcdf6cbc9.png)
で、クリックすると、ここからが面白くて、ページの上部からIFRAMEが現れてアニメーションしながら広がって次のようになります。
画面遷移がないので、戻る手間が省けます。これは、辞書等、そのワードに関連する情報を出してあげるとユーザビリティ的にとてもよくできる可能性がありますね。
![](http://phpspot.net/php/webimager/admin3/data/cc17224612afac9743c1c0921115073d.png)
乱用しても使いにくいサイトになるリスクがありますが、適切に使えば便利に使えそうですね。
以下のエントリを参照してください。
Search And Share | Latent Motion
ページ内のテキストを選択するとポップアップメニューが出てクリックで任意のページを開くなどのアクションが設定できます。
動作を説明すると、まず、ページ内のテキストを選択します。
![](http://phpspot.net/php/webimager/admin3/data/bcacc9bef0f1650cbee6563941ab0b6d.png)
すると、ポップアップが現れて、コピーの他、各種検索サイトに誘導させることができます。
![](http://phpspot.net/php/webimager/admin3/data/a61b8282dd3b40c413b0a2da9a3a9cbe.png)
拡大すると以下のような感じです。
ブラウザのコンテキストメニュー拡張みたいですが、これならどんなブラウザでも同じものを見せられます。サイトの内容によっては大きくユーザビリティを上げられそうです。
![](http://phpspot.net/php/webimager/admin3/data/eea088d204a1f2193f7f9b4dcdf6cbc9.png)
で、クリックすると、ここからが面白くて、ページの上部からIFRAMEが現れてアニメーションしながら広がって次のようになります。
画面遷移がないので、戻る手間が省けます。これは、辞書等、そのワードに関連する情報を出してあげるとユーザビリティ的にとてもよくできる可能性がありますね。
![](http://phpspot.net/php/webimager/admin3/data/cc17224612afac9743c1c0921115073d.png)
乱用しても使いにくいサイトになるリスクがありますが、適切に使えば便利に使えそうですね。
以下のエントリを参照してください。
Search And Share | Latent Motion
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- 過去のエントリ