ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言

Webサービスやアプリなど開発や運用に関わっている方であれば、こんなことを耳にしたことがあるのでは無いでしょうか？ 5人でテストを行えば、ユーザビリティ上の問題のうち85%を発見できるこれらは業界的にはある意味で常識ですが、色々話を聞いてみると、この常識の「出処」あるいは「根拠」ってあんまり知られていないようなのです。 もちろん、ちょっと知識のある人であれば、ユーザビリティ業界の第一人者であるヤコブ・ニールセン博士が提唱したというところまでは知識として知っているでしょう。しかしながら、その元ネタとなった論文を実際に読んだ人、あるいは85%という数字の根拠やその条件について理解されている方はどの程度居るのでしょうか。 ということで本記事では「ユーザテストは5人で85%」の元ネタである下記の論文について、解説、と言うとちょっと大げさかもですが、概要を紹介してみたいと思います。願わくば、この記事

UIのモーションを考える時、よく脳内でバレリーナの動きを再生する。 妹がバレエをやっていたため実家の居間では、ローザンヌ国際バレエコンクールのビデオがよく流れていた。 ローザンヌは世界最強の若手バレリーナを決める大会だ。この番組はクロード・ベッシー女史というコメンテーターの、辛口実況がウリだった。彼女はパリオペラ座学校の校長先生でもあり、それゆえに評価のハードルが非常に高い。コンテストの登壇者は、ほぼ確実にベッシー先生に滅多斬りにされる。TVカメラのまえで泣きだすこともある。ある意味、登竜門であると同時に公開処刑の場でもあった。 そんなベッシー先生が珍しく大絶賛していたのが、2001年だか2002年に出場したミレナ・シドロヴァだった。（追記、ベッシーさん2002年引退してますね。ビデオで見てたから時系列がメタメタだった。2002年のコメンテーターは別っぽい）。 バレエに特に興味のなかった僕

今や自動車に欠かせない、カーナビゲーションシステム（以下「カーナビ」）。近年ではスマホがそのままカーナビとして利用可能になるアプリも登場し、最新の地図情報が使える上に高機能ということで、徐々に普及しています。 こうしたスマホのカーナビアプリには、ドライバーが運転中でもハンズフリーで操作できるように、音声入力による受け応えが可能なものがあります。具体的には、目的地の指定や地図の表示切り替え機能が、声で指示を送るだけで操作できます。 入出力の方式がテキストか音声か異なるだけで、こうした音声対話機能も「チャットボット」の一種といえるでしょう。 前回のキャラクターチャットボットに続き、今回は音声対話を生かした新しい広告のプロトタイプ制作のプロセスを紹介します。 「しゃべる広告」をざっくり解説 今回はカーナビアプリ提供会社と共同でトライアルを実施しました。アプリを利用しているドライバーに対して、目的

PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス

Rent the RunwayやUber、Airbnbは、画面のUIデザインにとどまらない、奥深いところまで考え抜いたデザインによって、業界の昔ながらのエクスペリエンスに挑戦している。 Beyond Usability: 3 User Experiences Reshaping Their Industries by Sarah Gibbons on February 19, 2017 日本語版2017年6月5日公開 我々は今、新しいサービスで構成された世界に暮らしている。Seamless（訳注：オンライン経由の出前サービス）やBlue Apron（：食品の配達サービス）経由で食事をし、Alexaをとおして、Spotifyで音楽を聞き、UberやLyftで車を呼んでいるからだ。また、Airbnbで自分の家を人に貸すこともあるが、家ではTinder（：マッチングサイト）をスワイプしながら、N

2016/5/20 早稲田大学大学院ファイナンス総合研究所顧問の野口悠紀雄氏は、日本を代表する構造改革派の経済学者だ。 一方、1993年に刊行しベストセラーになった『「超」整理法』など、一般ビジネスマンの役に立つ仕事術の本を多数発表してきた、いわば「生産性アップの鬼」である。 そんな野口氏が次に着目したのは、スマートフォンの音声入力だ。iPhoneのSiriや、Androidに「OK Google」と語りかけるCMが有名だが、野口氏は「音声入力は文章を書く方法を劇的に変える」という。今月20日には「1冊まるまる話して書いた」という本『話すだけで書ける究極の文章法』を発刊した。 そこで今回、野口氏に、音声入力によって変わる仕事スタイルと、その具体的方法について聞いた。 野口 悠紀雄（のぐち・ゆきお） 早稲田大学大学院ファイナンス総合研究所顧問 1940年東京生まれ。1963年東京大学工学部卒

ホーム ニュース 『Overwatch』のアクセシビリティに脳性まひを患うファンから賞賛の声、障害に縛られないゲーム体験 Blizzard Entertainment（以下、Blizzard）から先日リリースされた『Overwatch』が、脳性まひを患ったファンのゲーム体験を一変させたとして、海外フォーラムを中心に賞賛されている。ゲーム本編が大いに評価されることは数あれど、オプションの内容が絶賛される例はそう多くないだろう。そんな中、細部までカスタマイズできる本作の操作設定が、一人のゲーマーの人生を変えた。 アクセシビリティに救われる全てのヒーロー体験 『Overwatch』をこよなく愛するZakさんは、生まれながらにして脳性まひを患っている。歩くことはおろか、手先の動きも制限される。しかし、そんな彼にとってゲームは人生を支え続けたかけがえのない趣味だという。初めてゲームを触ったのは3歳の

最近よく考えることに、人間を強制的に幸福にするユーザーインターフェースは作れないか、という着想がある。100万ユーザー級のアプリのUI改善に何本か関わった結論として、単に使いやすいインターフェースや、KPIアゲアゲの設計とかに飽きた。 むしろ統計、認知心理学、脳科学、行動経済学などをフル活用して、デザインで強制的に幸せを生産できないだろうかと考える。 幸せは生産できるか？ アメリカの哲学者、ウィリアム・ジェームズの言葉に、「私達は幸せだから笑うのではない。笑うから幸せなのだ」というものがある。日本にも類似の表現として、「笑う門には福来る」という諺がある。 両者で注目したいのは、因果関係の方向だ。どちらも方向として、「笑う」→「幸福」という因果関係を説いている。「幸福」→「笑う」ではない。 実は最近の脳の研究によると、とりあえず口角を持ち上げれば、人間の脳はドーパミンを生産するのだという。脳

管理画面を作ってると，「みだりに押されたくはないが，かといって無いと不便」みたいなボタン (或いはそれ以外の何か) を画面上に置きたくなる時があると思う． 例えばバッチで行うような処理を (なんらかの事情で) 即時実行するボタンのようなやつ．こういったボタンは便利だけれど，無闇に押されるとシステムに対する負荷が上がり，サービスの提供に悪影響を及ぼす場合があるのでなるべく押しにくくあるべきだと思う． そういった，おもてなしを目的とはせず，むしろ或る操作に対する敷居を高くするための，謂わば負の UI・負の UX をどうするべきかを軽く考えたのでここに記す． 警告を出す 例えばこの画像のような感じ． こうして注意を喚起することで精神に注意を促すくことで，みだりな利用を抑制するという方法．ボタンを赤くすることで危険な処理であることも表している． 加えてボタンが押された時に念を押すための confi

英文の速読術には、スキミング・スキャニングと呼ばれる技法がある。 スキミングとは「ざっと一覧して、全体を把握する」こと。各章のタイトルや、パラグラフの一文目、最終のまとめなど、要所要所だけをかいつまんでいく読み方だ。 一方、スキャニングは「特定の部分を熟読する」こと。こちらは一転して、一単語ずつ精査していく読み方である。 まず最初に全体をざっと見て（スキミング）、自分に必要な内容があるかをチェックする。その後に、必要な部分だけを選別してじっと見て（スキャニング）いく。英文速読では、この２つの読み方をペアにして扱う。つまり速読術とは全文を素早く読むことではない。細部を無視して、要点だけを拾い上げていく技法なのである。 この英文速読術の技法、スキミングとスキャニングは、画面の情報設計の大きなヒントとなる。情報を効率良く読むテクニックが確立されているのなら、それをロジック化すればよい。ロジックを

この記事は UI Design Advent Calendar 2015 の12日目です。 はじめまして！ 京都のwebサービスの会社で働いている2年目UIデザイナーの百合と申します。 今日は会社で行っている「リモートでのデザインレビュー制度」について書きたいと思います！ わたしが担当するサービスではデザイナー3人体制で開発を行っています。先輩デザイナーにアートディレクターとして付いて頂き、成果物がサービスで統一感のあるものになるよう配慮しています。 わたしの会社では、開発拠点が京都と東京の二箇所あります。わたしは京都で勤務していて先輩デザイナーは東京オフィスで勤務しているので、基本的にはリモートで見ていただいています。 同じ場所であれば気軽にデザインの相談や質問等できるのですが、遠隔になるとどうしても難しい部分があります。 そこで先輩デザイナーが考えてくださったのが「デザインレビュー制度

Crew Blog：デザイン業界で、「Less is more」（少ないことは豊かなこと）ほど、繰り返されている言葉はないでしょう。これは、建築家ミース・ファン・デル・ローエ氏の言葉です。 （ディーター・ラムス氏は、これを文字って、「Less but better」（より少なく、しかしより良く）と言いました） これは理解できます。 どんな商品であれ、売れるかどうかは、ユーザーがその使い方をすぐに理解できるかどうかにかかっています。私たち人間の集中力は驚くほど気まぐれなので、複雑な商品をわざわざ使おうとする人は、ほとんどいないのです。 つまり、売れる商品を創ることとは、使いやすくて美しいデザインの中に、複雑性と機能性を詰め込むことを意味します。つまり、不可能を可能にすることと同義です。 このように、プロダクトデザインの世界では、シンプルさの競争が行われています。 複雑になってしまう理由（とそ

「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」で発表したスライドです。 http://connpass.com/event/16187/

日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/

本コラムもこれで最終回となりました。そこで今回は、筆者がUIやUXについて学んできた中で、個人的に印象に残った書籍を紹介します。みなさんの今後の学びを広げていくための参考となれば幸いです。 学びを深めるための8冊の書籍 UIやUXを学ぶうえで、心理学的な考え方が重要になります。しかしエンジニアやデザイナからすれば、心理学は縁遠い分野だと思います。しかもUIで使われる心理学は、テレビで紹介されるような心理テストのようなものではなく、認知心理学や知覚心理学ですから、なかなかそういう本を手に取ろうとは思わないでしょうし、そもそも心理学という領域がどのようになっているかすらわからないと思います。 ここで紹介するのは「人は人工物や環境の前でどのような振る舞いをするのか」という、人の認知や行為についての書籍たちです。 デザインの生態学注1 アフォーダンス[2]を生んだJames Jerome Gibs