デザインPI：他人の間違いから学ぶ

記事のサイクルについて簡単に

この記事から、一連の記事「Design PI」を開始します。 それらは、アプリケーションの外観、ユーザーに対する振る舞いに関心がある人、つまり、デザイナー、プログラマ、デザイナー、この世界を少し良くしたい人に役立ちます:)

サイクルの序文

機能性と品質が優れている（それ以上ではないにしても）一部のソフトウェア製品が成功しないのに、他のソフトウェア製品が逆にスナップされる理由を疑問に思ったことはありませんか？ このパラドックスの理由は、多くの場合、単純な事実です。ほとんどの場合、これは、最初のソフトウェア製品がユーザーインターフェイスとユーザビリティとして2番目に失われるために起こります 。 最も顕著な例は、Google Chromeブラウザーと他のすべてのブラウザーです。 彼の誕生以来、それほど多くの時間は経過していません-これはすべてのブラウザの「最年少」ですが、これは彼が現在「ブラウザパレード」の3行目をしっかり保持し、自信を持ってMozilla Foundationの発案を「名誉ある」第2位から押し出すことを妨げるものではありません。 この成功は非常に簡単に説明できます。ブラウザがリリースされた瞬間から、最大限の使いやすさ、最小限の設定（現在はその数は着実に増加しています）、最大限の使いやすさを目指していました。 そしてもちろん、Googleのエンジニアは、他のブラウザのユーザーがユーザビリティとユーザーインターフェースの面で不足しているもの、およびブラウザの「ショット」を理解するために、長い間ブラウザ市場を研究しました。 彼は自信を持ってユーザーを魅了し続け、より安定した、より美しく、使いやすいバージョンからバージョンになりました。

朱珠は「広告を表示します！」とm笑で答えました。

球形の馬から正方形のブロックに移動して、デザインの悪さの実際的な例を見てみましょう。 今日は、LiveJournalに新しいエントリを作成するためのフォームを準備します（ 誰もが私が言っていることを理解してくれることを願っています ）。 もちろん、LiveJournalで投稿を作成する方法は他にもたくさんあるため、この例は合成ですが、多くの設計エラーやユーザビリティルールの違反が含まれているため、この例を解析したいと思います。 ここに私たちが取り組む必要がある元のフォームがあります：







数字は問題のある領域を示しています。 それらを分析して、リストに書きましょう。 だから、順番に：



1）ナビゲーションチェーン（ 「パンくずリスト」 ）のように動作するコントロールは、実際にはそうではありません。ほとんどすべてのモードで、チェーンの先頭にリンクを1つだけ追加し、常にメインページにつながるためです。 さらに、新しいレコード作成モードでメインメニューが使用可能な場合、ナビゲーションチェーンのこの退化したケースの存在は明確ではありません（ 「新規レコード」アイテムは「ジャーナル」メニューにあります ）。





1 '）情報の複製。 この設計要素を使用する意味は、一般に明確ではありません。



2）認識の完全性の違反、サイトの使用シナリオの違反、アクションの複製。 そのような場所でのそのようなコントロールの表示（ 新しいレコードの作成 ）は、一般に受け入れられません。 それらはユーザーを混乱させ、一般に、ユーザーの現在の作業コンテキストを変更するリスクをもたらします。 別のユーザーの下に投稿を書きたいですか？ 典型的なシナリオに従ってください-ログアウト->別のユーザーとしてログイン->新規エントリ。 複数のアカウントを持つユーザーの生活をもっと楽にしたかったLJ開発者によって、ユーザーインターフェイスがわずかに非正規化された可能性があります。 現在のレコードの下から別のユーザーの下に新しいレコードを作成しても、グローバルな作業コンテキストが変更されない場合（ 実際のユーザーの変更につながらない場合 ）でも、これは間違った決定です。 この非正規化の問題を解決してから、開発者はアクションとスクリプトが重複する「広大な」ユーザーインターフェイスを手に入れました。



3）四角い車輪の自転車。 これまでに、Web用の日付 セレクターコントロールと時間ピッカーコントロールの実装の数え切れないほどのセットがあります。 ところで、この要素を変更するためにリンクをクリックすると、その外観が変わります：



そして、ユーザーが別の日付を選択し、同時に何曜日になるかを見る必要がある場合はどうなりますか？ 一般的に-コメントはありません。



4）コンテキストから外れたリンクのブロック。 状況は、ポーリングの作成を除くリンクブロック内のほとんどすべてのアクションがユーザーの現在のコンテキストを変更するという事実によって悪化します。 最後のアクションは、さらに詳しく説明する価値があります。 実際、これは一般に異なる編集モードです 。 そして、このモードは、新しいレコードを作成するモードから利用でき、他のどこにもありません（ そうでない場合は修正してください ）。 これは、使いやすさに対する強力な打撃です。調査を作成するには、最初に新しいレコードを作成する必要があります。



5）組み込みエディターの理解できないインデント。 エディターは、知覚の整合性を侵害し、外観を損なう不可解なインデントを備えたワークスペースに組み込まれています。 さらに、メッセージエディターのツールバーの[ 元に戻す]および[ やり直し]アクションが次の行で「左」になっている理由もあります。



ツールバーの左側にあるエキスパンダーでも質問が発生します。 彼はなぜですか？ ツールバーを最小化してもスペースはあまり節約されず、この要素は視覚的なノイズのみをもたらします。



6）追加情報ブロックの単なるうんざりするレイアウト。 コメントなし-これは明らかだと思います。



7）このパネルのコンテキスト外のボタン。 これらのボタンはレコード（投稿）のアクションのグループに含まれているため、これらのボタンを[ 送信 ]ボタンでグループ化することは論理的です。



8）情報の重複、冗長性、要素の喪失パネルのコンテキストからこのエントリへのアクセス 。 このレコードのアクセス制御には、ラベルに冗長な情報が含まれています。したがって、現在編集しているのは1つの（ this ）レコードだけであることは明らかです。 この情報を複製する必要はありません（ これは翻訳の難しさでしょうか？ ）。

袖をまくり上げて......

このフォームは修正できますか？ もちろん、できます-結局、一方が壊れたものがもう一方を修正できます。 だから、私たちはLJたちがこの世界を少し良くするのを手伝います。 新しいレコードを作成するためのフォームは次のようになります。

このソリューションの利点：

1） 日付/時刻選択制御を修正しました。 より便利で使い慣れたユーザーコントロールに置き換えられます。

2） 特別な日付コントロールは、日付編集モードだけでなく使用可能になりました。 ユーザーからコントロールを隠すのは非常に悪いことです。 それらは常に見えるはず ですが、利用できない場合があります 。 さらに、ロックされたコントロールにアクセスできない理由をユーザーに何らかの形で説明することが望ましいです。

3）Controls Mood 、 どこにいるのか 、 音楽はより論理的にグループ化されています-見出しの他の主要なパラメーターの横にあります。

4）不要なアイテムの見出しから削除されました。これは、ユーザーコンテキストを変更する脅威をもたらすためです。

5）より便利なラベル編集エディター。 私は何も発明しなかったことに注意する必要があります-私はこのエディターを別のフォーム- ラベル編集フォームから取りました 。

6）記録コントロールスペルチェック 、 プレビュー 、および送信は1つのパネルにグループ化されており、元のバージョンよりも論理的に見えます。 スペルチェックアクションは、視覚的な一連のアクションに負担をかけないようにリンクとして設計されています。また、他の2つのアクションよりもはるかに小さい補助的なオプションアクションであるためです。

7）ツールのすべてのボタンが1つのパネルに収まり、視覚ノイズのソースとしてのみ機能するエキスパンダーを削除したため、組み込みエディターはより魅力的に見えます。

8）形状の高さが少し小さくなりました。これにより、1280x1024の解像度でモニター画面に完全に収まります。 必要に応じて、1440x900の解像度でモニターに完全に収まるように、エディターとタグエディターが配置されているパネルの高さを減らすことにより、サイズを小さくすることができます。

9）ユーザーインターフェイスが若干改善されました。

このソリューションの欠点：

1）論争の的になっている音楽コントロールの調整。 誰かがより美しいソリューションを提供できれば大歓迎です。 タイトルのボイドを避けようとしたためにこれをしました。 この見出しは、「空きスペースを恐れないで」というルールが機能しない場合に当てはまると思います

2）情報の流れの密度を下げることができませんでした-フォームはまだ混乱のように見えます。 今は少し整然としたおridgeのように見えます:)

あとがき

デザイン、色、コンテンツを試すことを恐れないでください。 あなたがあなたの期待に合わない何かをしたと感じたら-リメイク、改善するために怠beにならないでください。 繰り返し移動します-自分の一歩先に進もうとしないでください。 とにかく、より良い方法（ または期限がすでに切れているのでそこで止める価値があるということ ）の理解は、現在のステップの不完全さの実現から来ます。