最近スクロールバーを見かけなくなった気がします。ざっと調べてみると、スクロールバーはすでに消え始めており、今のスタンダードはスクロールインジケーターになってる様です。そうかと思えば、そのスクロールインジケーターすら消え始めている状況です。 ▼１．消えゆくスクロールインジケーター1.1 フェイスブックiOSアプリ フェイスブックのアプリでは、もはやスクロールインジケーターすら表示されていません。ご自身のスマートフォンで見てみると、画面右側には何も表示されないはずです。 1.2 電話帳 iOS 実は電話帳からもスクロールインジケーターが消えています。インデックスが表示されているので、スクロールインジケーターとインデックスが重なってしまうのを防ぐためと思われます。 1.3 メモ帳 iOS メモ帳ではスクロールをするまでインジケーターは表示されません。スクロール後は一定時間が経つとスクロールインジ
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
OPACの検索条件を選択する際などに使われる「チェックボックス」について、ふだんは意識しないけど、一度意識しちゃうと気になっちゃってしかたがないわ、ということについて書こうと思います。 例えば以下のように何もチェックをつけてない状態で検索をすると、 すべての種別の資料がヒットします。普通です。 で、次に以下のように「図書」にチェックボックスをつけた状態で検索すると、 種別が「図書」の資料しかヒットしません。これもまぁ普通の動きですが‥。 これよく考えると少し不思議（SF）で、チェックをつける前とあとで、チェックのついてないボックスのほうの意味が変わっちゃってるんですよね。 チェックをつけることで、チェックをしてない側が影響を受けるというミステリー。クエリに条件を加えてるんだと思えば、理性としては納得できるんですが、直感には反してるなぁと。。最初はみんな平等だったのに、一人を意識しだしたら他
「UX Timeline」は人気ウェブサービスのUXの歴史を振り返ることができるサイトです。ウェブサービスのUXは日々変化しており、気づいたら昔の面影はなく最新のモダンなUXに変わっていることが多いです。UX Timelineはどのようにその変化が行われてきたかを辿ることができますよ。昔のUXをみると少し懐かしく感じることも。 以下に使ってみた様子を載せておきます。まずUX Timelineへアクセスしましょう。ウェブサービスごとにタイムラインがまとめられています。Dropboxを見てみました。 縦にスクロールすることができ、サービス登場から最近のUXまでを振り返ることができますよ。年代も記載されているので、今から3年前のデザインを確認したり、新機能の登場がいつ頃だったのかも知ることができます。さまざまなウェブサービスが成長するにつれどのように変貌したかが分かるので見てて楽しいですね。サー
本コラムもこれで最終回となりました。そこで今回は、筆者がUIやUXについて学んできた中で、個人的に印象に残った書籍を紹介します。みなさんの今後の学びを広げていくための参考となれば幸いです。 学びを深めるための8冊の書籍 UIやUXを学ぶうえで、心理学的な考え方が重要になります。しかしエンジニアやデザイナからすれば、心理学は縁遠い分野だと思います。しかもUIで使われる心理学は、テレビで紹介されるような心理テストのようなものではなく、認知心理学や知覚心理学ですから、なかなかそういう本を手に取ろうとは思わないでしょうし、そもそも心理学という領域がどのようになっているかすらわからないと思います。 ここで紹介するのは「人は人工物や環境の前でどのような振る舞いをするのか」という、人の認知や行為についての書籍たちです。 デザインの生態学注1 アフォーダンス[2]を生んだJames Jerome Gibs
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 ＞ WebNAUT ＞ なめぱら という結
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
2013-04-13 CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ 4月4日に行われたCSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは！！と思い。テーマは「UIデザインのパターン化」。ちょうど「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」という本を出されたばかりだったので、本から抜粋された内容が紹介されました。以下Agenda。 UIのパターン化・ルール化とは プラットフォームの流儀 画面パターン UIコンポーネント 実践事例 パターンとルールがもたらすメリット 90分という短い時間だったけど、ワークショップ的なの
インタフェースデザインの実践的な解説書。使いやすいUIで優れたUXを提供するために必須な「リサーチ」「デザイン」「インプリメンテーション」という3つのフェーズを、初心者にもわかるようていねいに解説します。テクニックの章では、ストーリーボードやペーパープロトタイピング、ユーザビリティテストなど、優れたユーザビリティを実現するためのアプローチについて学びます。アイデアの章では、テキストの書き方、どのくらいリアルなデザインであるべきか、アニメーションを使うタイミングなどについて学びます。調査・設計・実装・検証・改善というワークフローに沿ってデザインすれば、ユーザビリティは驚くほど向上します。 翻訳者によるサポートページ。 サンプルPDF ● 「前付、1章と8章（I部）、23章（II部）、33章（III部）」（38MB） 賞賛の声 はじめに I部 リサーチ 1章 ユーザーリサーチ 2章 ジョブシャ
UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？ そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
先日リニューアルされた「はてなブックマーク」。 大幅なデザイン変更に対し、ネット上では賛否が分かれているようです。 【参考記事】 ・はてなブックマークのリニューアルがいけてない5つの理由 - enator's blog ・はてブリニューアル賛成論 個人的には「あぁ、見づらくなっちゃったな…」と感じましたが、何となく不満を訴えても仕方がないので、今回はその原因をマミオン得意の「アイトラッキング分析」を用いて考えてみることにしました。 綺麗な「F字型」を見せる旧デザインまずはリニューアル前のデザインについて分析ができればよかったのですが、時すでに遅し。代理として、以前のデザインに近い以下のサイトで分析を行ってみました。 Hatebu::Classic - 見慣れたデザインのはてなブックマーク 被験者は、30代男性である筆者1名です。いつものように、ホットエントリーをチェックする行動を行った結果
ソシオメディアは、良いUXを実現するためのアプローチとして、モードレス・ユーザーインターフェースを提唱しています。 モードレス・ユーザーインターフェースの考え方は新しいものではなく、皆さんが普段接している GUI や、その開発手法であるオブジェクト指向プログラミングのコンセプトにもともと備わっているものです。ただしこれまでUIデザインのノウハウとしてはあまり明文化されてきませんでした。そこで、私達が実践に努めているモードレスUIデザインの方法論をまとめてみます。ここに述べるUIデザインのノウハウは、実効性の計りにくいプロセス論ではなく、UIの成果物に直結する具体的なデザインパターンである点に着目してください。 モードレス・ユーザーインターフェースの利点 UXに関する様々なメソッドの中で、意思決定の上流における要求分析や、実装に直結した視覚表現等についての方法論は多く議論されてきました。しか
音声配信業界のニュースまとめ👇👇👇 無料ニュースレターを購読する Yoshihiko Yoshida フリーIT講師。「マツコの知らない世界」「王様のブランチ」「ZIP」などTV出演多数。教育システム情報学会会員。元立教大学/第等文化大学非常勤講師。主な著書「Googleアナリティクス基礎講座」（技術評論社）。 ＞＞もっと読む @creator_enewsをフォロー ＜＜お問い合わせはこちら＞＞ ・プライバシーについて 当ブログではGoogleアナリティクスとcookieを用い、個人を特定しない範囲でアクセス状況を記録しています。Google側ではその情報をGoogleアカウントと紐付けパーソナライズ広告に利用しています。その情報は取り扱いに注意しつつ、内容充実や企画立案など、皆様のお役に立てるよう活用しています。 パーソナライズド設定をオフにするには、Google公式ページを御覧く
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ソシオメディアは、国立国会図書館様が運営する「国立国会図書館サーチ（開発版）」について、2010年1月から2011年3月まで、国会図書館ご担当の皆様・株式会社NTTデータ様とともにUIデザインをさせていただきました。 （事例：「国立国会図書館サーチ（開発版）」のUIデザイン [国立国会図書館様]） 国立国会図書館は多くの文献検索サービスを運営しています。その中でも、この新しい国立国会図書館サーチは特別な位置づけにあると言えます。 国立国会図書館サーチは、国立国会図書館が所蔵する全ての図書、デジタルアーカイブ、レファレンス情報（探し方／調べ方の事例など）、都道府県立図書館、政令指定都市の市立図書館の蔵書を検索（非同期での横断検索）できるほか、書誌属性情報にもとづいた多段階での絞り込み、連想キーワード検索、翻訳表示、書誌同定、外部サービス（各種検索エンジン、ソーシャルサービス、所蔵機関サイト、
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く