UIデザイナーの周りにある"設計"について、Human-Computer Interactionからヒトとコンピュータの仕組み、エンジニアの設計手法、コミュニケーションの方法などをまとめました。
皆さんは下記のような経験はありませんか? ドアを開けたいんだけど、パッと見て押したらいいのか引いたらいいのか、はたまた横に滑るのかがわからない 蛇口をどっちに倒したり捻れば水が出るのか、温水/冷水の切り替えはどうすればいいのかわからない オフィスの入り口にある電源スイッチのどれを押せばどこの電気が点灯するのかわからない リモコンでプロジェクターに投影されているスライドの進行をしたいのだけど、間違ってバックしたり変なメニューが表示されたりする これは全てそのような誤りをしたユーザが悪いのではありません。デザインが悪いのです。受け売りですが。。 一つ前のブログに書いたように、ビジネスや問題解決の文脈におけるデザインの可能性について書籍などをあたりながら考えを深めています。その一環で読んだのがD.A.ノーマンの『誰のためのデザイン? 認知科学者のデザイン原論』です。1990年ごろの古い作品ですが
ノーマン先生の「誰のためのデザイン?」を読んだ。 この本では、身の回りの物の「使いにくさ」が人の認知構造も踏まえながら考察されている。最後には、その成果が「デザインの7原則」としてまとめられている。豊富な例のおかげで読み易くかつ理解し易い作りになっているが、決して平易なだけでは無く学びの多い内容となっている。 古い本ではあるが、今でも色あせる事の無い良書だと思う。 デザインの7原則 外界にある知識 と頭の中にある知識の両者を利用する 作業の構造を 単純化 する 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける( 可視性 ) 対応づけ を正しくする 自然の制約や人工的な制約などの 制約 の力を活用する エラー に備えたデザインをする 以上のすべてがうまくいかないときには 標準化 をする 以上7つがデザインの7原則としてまとめられていた。それぞれの原則の意味については、以
Bucknell Universityのサイトの、型破りなレスポンシブデザインへの変更は話題を呼んだが、それによってユーザビリティがかなり犠牲になっていることが、学生と保護者によるテストで明らかになった。 Breaking Web Design Conventions = Breaking the User Experience by Katie Sherwin on July 20, 2014 日本語版2014年10月6日公開 大学のWebサイトのトップページを頭に思い浮かべてほしいと言われたら、どのようなイメージが浮かぶだろうか。浮かぶのはSUNY Cortlandのトップページのようなもの、つまり、芝生の上に学生がいる画像があって、ページの上部にはナビゲーションがあり、そこにAcademics(:学部・大学院)、Admissions(:入学案内)、Prospective Studen
GoodUIというサイトでは、サイトのコンバージョンを上げるときに参考にしたい34のアイデアを紹介しています(どんどん追加されるようです)。とても参考になったので、タイトルだけ日本語訳してお伝えしたいと思います。あえて意訳しているところもありますが、英語的に完全に間違っている部分があれば、ご指摘下さい。 マルチカラムレイアウトにするより、シングルカラムレイアウトにしてみよう。 すぐにクロージングするより、プレゼントを与えてみよう。 UIを断片化させるより、似たような機能を統合してみよう。 自分で自分自身を語るより、ブランドのある誰かに語らせてみよう。 重要なアクションは1回だけ見せるより、何回も繰り返して表示してみよう。 クリックできる・選択できるアイテムは、ぼかさず明確にスタイルしてみよう。 選んで欲しいものを並列で並べるより、オススメを強調してみよう。 いちいち確認を取るより、Undo
モノづくりをテーマに行われた『TechLION vol.18』。登壇者は左から寺薗淳也氏、瀬尾浩二郎氏、増井俊之氏 コンピュータはこの30年、まったく進歩していない――。 有名エンジニアによるトークライブの場としてすっかりおなじみになった『TechLION』の壇上で、慶應大学環境情報学部の増井俊之教授は業界の現状を憂えた。 2014年9月に開催された『vol.18』のテーマは「モノづくり」。小惑星探査機『はやぶさ』プロジェクトチームの一員としても知られる会津大の寺薗淳也准教授、面白法人カヤックから独立しフリーのエンジニア/クリエイティブ・ディレクターとして活躍中の瀬尾浩二郎氏とともに、UI研究の第一人者、増井教授は登壇した。 時々刻々と性能が上がっているように見えるコンピュータ(編集部注:増井氏の発言では「計算機」)が、30年にわたってまったく進歩していないと指摘する増井氏の真意とは? 『
携帯ってどの機種でもだいたい同じようなもんなのに、変更すると使えなくなる年寄りがいるけど、あれはアーキテクチャを理解しないで操作を手順で覚えてるからだって指摘を見たことある。 実際、親に携帯の使い方を教えると「このボタンをおして、次にこのボタンをおして、間違えたときにはこのボタンをおして・・・」みたいな感じで必死に暗記しようとしてるのな。 そんな覚え方してたら俺でも使えないわ。 で、Windowsがバージョンアップしたとか、OfficeがリボンUIになったとかでUIの変更があると、ネット上はすごい使いにくなったって声であふれるわけじゃん。 リボンとか、たしかに最初は「あの機能はどこにあるんだよ」って探してイライラする場面があったけど、ちょっと使ったらすぐなれて、かえって探しやすいって思うようになったわ。 俺は多少UIの変更があっても何とも思わない人間だから「使いにくくなった」ってすごい剣幕
迷ったらシンプルな方— 片手間以上 (@mizchi) 2014, 7月 19 僕は主にUIを作るエンジニアなのだけど、以下の話題について。 時間をかけて、つまらないものを作りたいか? - futoase.hatenablog.com ニコニコ動画はSynvieプロジェクトが原型 - はてな村定点観測所 UIの有効性を証明する仮説とその検証において、ほとんどの場合において次の二つが根源的な問題となる。 だいたいのものはシンプルな方が勝つ 人間はシンプルではない 二点間の距離を求める三平方の定理は、(ディスプレイが歪んでいない限り)簡潔でシンプルだが、二点のボタンを順番に押すときのマウスの軌道、そのあいだのユーザーのメンタルモデルの変化は、まったくもってシンプルではない。 人間はシンプルなものの価値を認めたがらない、というバイアスがある。金を産まないといけないソフトウェア開発の現場は、コアフ
クックパッドのユーザーファースト推進部 部長でデザイナーの池田拓司さん。多摩美術大学を卒業後、ニフティに入社。その後、はてな を経て2012年にクックパッドへ入社しました。 社内のメンバーから、「新規事業が増える中で、クックパッドらしさを守る“クックパッドの良心”」と表される池田さん。彼が言語化し、社内外に対して守り抜く「クックパッドらしさ」とは。 生活に近いサービスをつくりたい デザイナーとして新卒入社したニフティで3年間働いた後、まだ当時10名ほどだった はてなに転職した池田さん。より生活に近いサービスをつくりたいという思いで、7年間勤めた はてなからクックパッドに転職しました。 2014年4月に「デザイン部」は名前を変え「ユーザーファースト推進部」に。社長直轄の部署であるため、お客様の声が経営陣にも届きやすい体制が出来ています。現在はデザイナーを中心とする8人のメンバーで構成されるチ
8/9(土)、ついに産業技術大学院大学の履修証明プログラム「人間中心デザイン」が開講! 2013年度に参加したかったけど開講されず涙をのんだプログラムゆえ、無事合格して授業へ参加できるのは嬉しい限りでした。 産業技術大学院大学「人間中心デザイン」は、以下3つのユニットに分かれています。 人間中心デザインデザインリテラシー編 人間中心デザイン方法論編 人間中心デザイン応用演習 人間中心デザインと関連分野の理論・知識を習得した後、具体的な手法を学び、演習で技術を習得していくという流れです。 初日の今日は、人間中心デザインデザインリテラシー編の「人間中心デザイン入門」でした。 講師は千葉工業大の安藤昌也准教授。内容もりもり。 未だ消化できってはないですが、もぐもぐ反芻するために気になったトピックについて記録を残していこうとおもいます。 たぶん次の授業までずっともぐもぐしてる予定。 授業の参加者に
プログラマのためのユーザインタフェースデザイン 第 1 章 第 2 章 第 3 章 第 4 章 第 5 章 第 6 章 第 7 章 第 8 章 第 9 章 ストラテジーレターV 2002年6月12日 ミクロ経済学の補完財の原理について考えていて、私はオープンソースソフトウェアに関する興味深いあることに気がついた。それが何かというと、オープンソースソフトウェア開発に多額の資金を使っている企業の多くは、それが彼らにとって良いビジネス戦略だからそうしているのであって、突然資本主義を信じるのをやめて、「言論の自由と言うときの自由」に浮かれるようになったわけではないということだ。ストラテジーレターⅤ 5つの世界 2002年5月6日 5つの世界:すべてのソフトウェア開発が同じではない。 追記:インターナルシステム、コンサルウェア、パッケージソフトの間には大きなグレーゾーンがあり、この3つの世界はしばし
http://www.aldnoahzero.com/ とにかく見て実際に試して欲しい.一発でこのUIを使いこなせたなら貴方は凄い,この記事読まなくても良いと思います. さてUIに係る問題点で感じたことは以下.まあもっとあるとは思う. JSについてはJS諸賢にお任せします. 問題点 そもそもメインコンテンツへの入り口が「LOGIN」なのヤバい. こんなかんじ.ハイコンテキスト!!! LOGINでメインコンテンツに入れると思うのおかしい感じがする.会員制ページと勘違いしてしまう. 「LOGIN」しか提示されてないと,その時点でログインしたくないおじさんとかログイン面倒くさいおじさんとかが去ってしまう可能性が高まる 放送後,トップページがこういう感じになるんだけど,まさか「LOGIN」がメインコンテンツへの入り口だとは思うまい.多くの人がどうやって普段のページに飛ぶのか迷うと思う. pic.t
ユーザの主体的経験を指すUXと、ユーザが製品やシステムとインタラクションする場であるUIは、言葉の次元が異なり、同列に議論できるものではない。この併記には、UIデザイナの多くがUXデザイナに変身したということと、UXというキーワードが「流行語」であったということが関係しているというべきだろう。 黒須教授 2014年5月7日 タイトルのようにUX/UIと二つの概念を併記することが流行しているようだ。Googleで検索したところ、なんと719,000件もヒットした。ちょっとそういう流行に疎かった僕は、先日UXに関する講演を行ったときの質疑で、UX/UIについてどう思うかと聞かれ、ん、何のことを聞きたいのだ、と戸惑ってしまった。こうした背景のあることに思い至らなかったのである。 なぜなら、UIはユーザが製品やシステムと相互作用(インタラクション)する場のことであり、UXはユーザの主体的経験のこと
作業してる息抜きにブログ UI/UX言うな論は、あたかもUIがUX全体を規定してしまうが故に起きる意識の齟齬にあると思っている。 あたかもwikipediaをwikiと言ってしまったり、JavaScriptをJavaと言ってしまいエンジニアの不安を掻き立てる人たちへの不安に近いものだろうか。 まぁそもそもUXという言葉が非常にわかりにくい。わかりにくいと言えば、その昔は「システム」という日本語が日本にはなかったと、芝浦工業大学で初めてのカタカナ学部である「システム工学部」と言う名前を日本に持ち込んだ時の話を聞いたことが有る。 僕に認知だと芝浦工大のシステム工学部は言うほど古い学部ではなかったが、なんとその時代の手前まで「システム」という言葉がなかったというのは驚きだ。そりゃソフトウエアで日本が勝てないわけだ。物質主義とでも言うのだろうか。僕が製造業にいたとき、ソフトウエアはオマケみたいなも
「Empty Data(またはEmpty Status)」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります(Webでの404に近いですが、少し違います)。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
15. • Click • Double click • Triple click • Hover • Press and hold • Drag / Drop 15 マウスを動かす クリックする/離す キーを押す/離す 画面を押す/離す 画面上で指を滑らす 複数の指で押す/滑らす ユーザーの操作 コマンド • Press • Long press • multiple press (ショートカット キー操作など) • Tap • Double tap • Press and hold • Flick • Swipe / Pan • Drag / Drop • Pinch in / Out どう操作するか - ユーザーの操作 (入力) マウス キー タッチパネル
ユーザー体験(ユーザーエクスペリエンス/User Experience: UX)という言葉が広く聞かれるようになってきた。半ばバズワードのように、特にウェブデザインやマーケティングの記事などの中では、この言葉を見ない日はない。しかしながら、多くの場合、UXという言葉の真意や可能性を取り違えてしまっている。本稿では、いくつかの観点からUXの本質を考えてみる。 1.UI/UXという誤用 1.1. UIとUX まず、多くの記事や講演などで見られる「UI/UX」という表現からとりあげてみたい。 UI/UXとは、もちろん、User Interface / User Experience(ユーザーインターフェイス/ユーザーエクスペリエンス)の省略形であるが、多くの記事などで「すぐれたUI/UXデザイン事例」、「UI/UX講座」などの表現が用いられている。 「ユーザー」という共通項があるため、共通でくく
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
知り合いのデザイナーさんから「iOS&Androidアプリをデザインする時に何か知っておくべき事ってありますか?」と質問を受けたので、思い浮かんだ事をずらっと書いてみました。他にも何かありましたらコメントお願いします!ツッコミも歓迎(´ロ`) モバイルアプリデザインの原則とiOS 量が少し多いが、公式のiOSヒューマンインターフェイス ガイドラインは必読。(※ダウンロードに時間かかるので注意) iOSだけに限らず、モバイルアプリのデザインをするにあたって重要な事がまとまっている。 載っていること ヒューマンインターフェイスの原則 アプリケーション設計戦略 iOSテクノロジーの使用に関するガイドライン 標準で用意されている各UI要素(タブやツールバー等)の使い方 マルチスクリーン対応 どのような違いがあるのかを把握する 画面密度(ppi)や画面サイズなど 参考:iPhone, iPod to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く