エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
UIデザインガイドラインのまとめ : could
UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
【IT Japan 2007】「デザインに凝ったウェブサイトほど予約率は低かった」，星野リゾート社長が講演：ITpro
「我々はついつい旅館やホテルのウェブサイトを格好良くしよう、きれいにしようと思ってしまうが、それが必ずしも予約率向上にはつながっていなかった」 リゾート施設運営を手掛ける星野リゾート（長野県軽井沢町）の星野佳路社長は7月9日、東京都千代田区のホテルニューオータニで開催中の「IT Japan 2007」で講演し、こう語った。講演の題名は「収益向上を狙うネット・マーケティング戦略 『科学的仕組み作り』で顧客数を拡大」というものだ。 星野リゾートは、本拠地である軽井沢の温泉旅館「星のや」をはじめとして、大型スキーリゾートから小規模温泉旅館まで12施設の運営を手掛ける。星野社長は、前近代的な日本の旅館・ホテル経営の世界に、顧客満足度調査やシックスシグマによる業務改善など科学的手法を持ち込み、不振に陥ったリゾート施設の再生を実現してきた。 最近、力を入れているのが、ウェブサイトを経由した予約獲得だと
アップル ヒューマンインタフェースガイドライン
アップル ヒューマンインタフェースガイドライン 原文：Apple Computer Inc. 訳：かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
第4回 予想外の行動をするユーザーの心をつかまえるデザイン術 | ユーザー視点のウェブデザインガイド
第4回 予想外の行動をするユーザーの心をつかまえる ～ユーザー中心設計実践のコツ～ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 「情報構造が整理されていればよい」と思ったら大間違いこれまで、「ウェブページのフォーム」や「ユーザーの目線」といったテーマを採り上げて、ユーザーにとって使いやすい（≒ビジネスに貢献する）サイト設計のコツについて書いてきた。今回は、実際にユーザビリティテストを行った結果わかった特徴的な行動パターンを具体的に交え、ユーザーの行動や
第18回 検索結果のページ・ナビゲーションで考えた：ITpro
今回は，「検索結果」のインタフェースについて考えてみたいと思います。「検索結果」とはその名のとおり，検索エンジンやそのほか様々なサービスで利用されている検索機能において，ユーザーが指定した検索条件に引っかかる結果を一覧したページのことです。 自分が知りたい情報になかなかアクセスできなくて，いらいらさせられることってありますよね。検索結果のページ・ナビゲーションは，そうしたストレスを軽減させるだけでなく，逆にそれを増加させてしまう力も持っていると思います。 図1：Googleの検索結果ページ 図1はいわずと知れたGoogleの検索結果ページです。検索エンジンは，筆者も含めて多くの人にとって極めて利用頻度の高いサービスになっています。こうした検索機能は普段なにげなく利用されていますが，サイト利用者が自分の必要な情報にアクセスするための重要な経路の一つです。したがって，検索エンジンのような「検索
アイトラッキング: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 昨年末、会社のほうでアイトラッキング用のツールを導入しました。ユーザビリティ関連のサービスをより強化するために、導入したんです。 ものが届いたのが年末ギリギリだったり、ソフトのインストール用のPCの準備がとまどったりで、ようやく昨日から触れるようになりました。それで、さっそく今日の午後、数時間かけて、いくつかのWebサイトを対象に、社内の人間にモニターになってもらい、調査の練習を行なってみました。 ニュースサイトをアイトラッキングモニターテストを行なう中で、ニュースサイトの記事閲覧、検索というタスクを与えた調査を実施してみたのですが、これがなかなか興味深かったですね。 まず記事閲覧時の目の動き。 これが見事に記事の書かれたエリアだけをテキストの流れに沿って視点が動き、サイド
第35回 画面設計書はどう作られるべきか
Webサイトを構築する場合，通常は「設計書」を作成します。サイト全体の設計書であったり，ページ単体の設計書であったりするわけですが，今回は後者である「画面設計書」について考えてみましょう。 画面設計書を読むのは誰か Webサイトの構築では，対象ユーザーをできる限り具体的に決めてから開発を進めていきます。同様に，画面設計書にも「対象読者」を見定める必要があります。結論から言えば，かなり属性の異なる二種類の読者が存在します。 まず，発注者である「クライアント」です。クライアントは，技術的な難易度ではなく，自分たちのビジネス要件を満たすものが作られるかどうかを確認するために画面設計書を読みます。開発（プロジェクト）のゴールや，プロジェクトのメリット/デメリット，リリース後の顧客満足の予想などを，その設計書から読み取ろうとします。したがって，できる限り具体的なイメージが伝わるものが要求されます。
安心感を与えるフォームページ (ユーザビリティ実践メモ)
個人情報の取り扱いに厳しい目が向けられる昨今、入力フォームはセキュアなサーバに置くなどの配慮をしているウェブサイトも多いかと思います。 安心感を与えるフォームページを実現するために弊社が考えるのは、「ユーザが不安に思うタイミングに、明示的に安心要素を配置する」ということです。 ユーザは、個人情報などを入力するページにアクセスした途端にセキュリティに関して気にする傾向があります。そこで、ページ上部にセキュアであることを証明するマークを配置することが検討できます。 また、一通り入力をし終えたユーザは、次に画面に移動する際に「次へ」ボタンなどのリンクをクリックする際にも、「本当にこのウェブサイトはセキュリティがしっかりしているのだろうか」という不安に駆られます。 次のページに遷移するアクションボタンの近くにも「セキュリティ保護のためSSL（暗号化通信）を使用しています」などの文言や、セキュリティ
第2回 視線の動きからユーザーの行動を読み解く「アイトラッキング分析」 | Web担当者Forum
第2回 視線の動きからユーザーの行動を読み解く 「アイトラッキング分析」 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 見えなかった「ページ内の」ユーザーの動きが見えるユーザビリティテストやアクセス解析を行うことによって、ユーザーが何を考えて、どのような流れでサイト内を行動しているか、かなりの部分を知ることができる。しかし、次のような疑問については、正確な答えを得るのは難しいことが多い。 本当に今のページで見せたいと思った情報を、ユーザーは読んでくれたの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイスデザインの参考になるサイト集