web-dev-qa-db-ja.com

「元に戻す」と「やり直し」の矢印アイコンが通常丸いのはなぜですか?

単純な Google画像検索 を使用すると、「元に戻す&やり直し」に関連する多くのアイコンが表示されます。興味深いことに、すべてではないにしても、ほとんどのアイコンが円形です。 Microsoft Officeが使用するものを見てください。

Microsoft Office undo/redo

そして、グーグルからの他のいくつか:

Random Undo/redo icons from Google

タイトルは質問を示していますが、ここではさらに詳しく説明します。

元に戻す/やり直しが曲線/丸い矢印として標準化されているのはなぜですか?

rewindが左向きの直線矢印に関連付けられている および forwardが関連付けられていない右向きの1つの直線矢印元に戻す/やり直しが異なるのはなぜですか?

最後に、元に戻す/やり直しのアイコンを直線の矢印にすると、理解しにくくなりますか?

私の5000ユーザーの誰もまだそれについて不満を言っていませんが、そのうちの1人は私に曲がりくねるように提案し、私は考えさせられました。

これが私のコンテキストのスクリーンショットです。

Pixly app

33
Gustavo Maciel

特定の結果なしで検索を行ったので、ユーザビリティの原則とソフトウェアの履歴を考慮して回答します。

レガシー

元に戻す機能は 70年代にすでにここにあります でしたが、グラフィカルインターフェイスの出現と拡張、およびデスクトップコンピューターの人気の高まりまでは、アイコンのアイデンティティがありませんでした。

当時、ユーザーは多くのアプリケーションを使用せず、最も人気のあるテキストプロセッサでした。間違いなく、当時最も人気のあったソフトウェアの1つはMicrosoft Wordでした。

1993年のアイコンを見てみましょう: enter image description here

これは、アイコン(およびその他のソフトウェアコンポーネント)の一般的な問題です。アイコンが確立され、ほとんどのユーザーが認識できるようになれば、時間の経過とともに変化することはほとんどありません。これは、パフォーマンスを向上させる別のレイアウトのキーボードではなく、QWERTYキーボードを使い続ける理由と同じです:Familiarity
これにより、ユーザーは新しいシステムを苦労せずに使い続けることができ、企業は「難しいでしょう」という質問に答えることができます。

独自性

直線矢印は主にナビゲーションに使用され、その単純さのために、元に戻すアクションを含む多くの「移動」アクションに使用でき、編集中の状態を以前の状態に戻すことができます。

しかし、それは逆に機能しません。 曲線矢印はそれほど頻繁には使用されません。

完全に丸い[元に戻す]ボタンをブラウザバーに配置すると、アイコンがほとんど同じであるため、[更新]ボタンとして誤って解釈される可能性があります。したがって、ユーザーの頭の中で更新アクションが可能なコンテキストでの私の推奨事項は、ユーザーの混乱を避けるために、丸みを帯びたものではなく完全な丸みを帯びたものにとどまることです。もちろん、特定の状況ではこれは問題になりませんが、[元に戻す]アイコンの外観は明確に湾曲した矢印のままです。 enter image description here

38

これはアナログ時計を表すためのものだと思います。Undo機能は時間の逆方向のスイープを示し、Redoは時間の経過を示します。

21
Steve Jones

「戻るボタン」と「まっすぐ矢印」でよく表される「進むボタン」を区別することだと思います。

enter image description here

戻るボタン(および進む)は、別の場所、つまり現在のページの前にいたページに戻るナビゲートを行うアクションを表します。

元に戻すボタンは丸いです。前の状態にロールバックしていますが、新しい場所に移動していないので、同じ場所に戻ります以前の時点。 360度の円は、ユーザーが戻ったが、最初と同じポイントに戻ったことを表します。

enter image description here

その他の理由:

ここ Googleの双方向ミラーリングガイドラインenter image description here

時々、時間の水平方向と循環方向の両方がアイコンに示されます。たとえば、Googleドキュメントのやり直しボタンと元に戻すボタンには、水平方向と円形方向があります。

LTRでは、これらは時間の循環表現と水平表現の両方で同じ方向を指します。 RTLで、円形または水平方向のどちらを表示するかを選択します。

ウィーブルズのコメントごとに例を提供する:

火口:

enter image description here

Font Awesome:(多くのサイトで使用されています)

http://fortawesome.github.io/Font-Awesome/icon/undo/

enter image description here

Adobe Ideas Iphone:

注:一部のバージョンではアイコンの丸みが少ないように見えますが、それが新旧のバージョンなのかデスクトップバージョンなのかはわかりませんが、変更された理由を調べるのは興味深いでしょう。

enter image description here

18
DasBeasto

元に戻すボタンは通常、それ自体に戻る矢印のようなスタイルです。交差点で間違った方向に曲がったことがある場合、最初の反応はUターンして交差点に戻り、再試行することです。やり直しボタンは、取り消しとは正反対のスタイルであると考えられます。基本的にUターンボタンです。左または右のまっすぐなボタンは、前のページ/次のページと簡単に混同されます。これはWebブラウザーでのみ使用され、更新ボタンと混同される可能性があります(360なので、どこからでもアクセスできますが、誤って使用するのに十分似ています)。

6
YoshiBoy13

これらのアイコンの背後にあるアイデアは、円で戻ってくるものを視覚的に表すことです。現在、アイコンは主にMicrosoftによって普及しており、Officeパッケージの人気で主流になりました。使いやすさの観点からは、アイコンはそれほど悪くありませんが、「元に戻す」と「やり直し」という単語を明確に示すラベルを付ける必要があります。そうしないと、UXに気づき、殺すことが難しくなります。

実際、Appleには人気のiWorkスイートに2つのアイコンがなく、キャプションを使用して「取り消し」と「やり直し」を説明しています。

enter image description here

4
Noah