タグ

webデザインとユーザビリティに関するpefusanのブックマーク (7)

  • サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ

    デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

    サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
  • レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name

    デザインには意味があります。物を配置するにしても、なぜそれを配置するのか?なぜその色味なのか?なぜそこに置くのか?など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真

    レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name
  • なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密

    Amazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日Amazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な

    なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
  • もうユーザーを迷わせない!ナビゲーションメニュー設置のコツ

    2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト! ナビゲーションメニューの設置ポイント すべてのページに 基中の基ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン

    もうユーザーを迷わせない!ナビゲーションメニュー設置のコツ
  • ユーザーインターフェイスデザインのアイデア帳

    どうしたらユーザーに使ってもらいやすいかなと悩む事があります。 そんなときの為のネタをメモしておきます。 ▼Yahoo's Design Stencil Kit http://developer.yahoo.com/ypatterns/wireframes/ ・GUIの設計に必要なものがほとんど揃っている。 カレンダー、カーソル、グラフや表、UIコントロール フォーム要素、グリッド、メニューやボタン、モバイル用UI iPhoneUI、ナビゲーション、タブなど ファイル形式は、OmniGraffle 、Visio (XML)、PDFファイル 、 PNG形式 、SVG の形式で配布されている。 ※OmniGraffle ってなに?って方はこちらを参照。 ※Visioってなに?って方はこちらを参照。 ▼Web Form Elements http://sniperyu.deviantart

  • ユーザーインターフェイスデザインの参考になるサイト集

    MICROKIDのエントリー「11の偉大なユーザーインターフェイスデザインのリソース」で紹介しているUIデザインの参考になるサイトのリンク集です。 11 Great User Interface Design Resources パターン ライブラリ

  • 優れたユーザインタフェースを設計する際に考慮する8つのポイント

    ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが

  • 1