ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
ユーザビリティ実践メモ
スマートフォンとともにタブレット端末の普及率はますます上昇し、最近では街中や電車などでタブレット端末を利用している人を多く見かけるようになりました。 この記事の続きを読む
Mozilla Labの至宝が語る未来のFirefox
Mozilla LabでユーザーエクスペリエンスのリードとしてUbiquityを初めとするさまざまなプロジェクトを担当するエイザ・ラスキン。ユーザーインタフェース研究の第一人者として知られる彼が未来のFirefoxについてjune29に語った。 こんにちは、june29です。Mozilla LabsからUbiquityがリリースされて約3カ月が過ぎました。この間、Ubiquityを活用するさまざまな試みがなされ、筆者も紹介記事を書かせていただきました。 今回、Ubiquityの生みの親であるMozilla Labsのエイザ・ラスキン（Aza Raskin）さんが来日されているということで、お話を伺ってきました。Mozilla LabsでユーザーエクスペリエンスのリードとしてUbiquityを初めとするさまざまなプロジェクトを担当する彼は、何と1984年生まれ。筆者と同世代です。そんな彼がU
ユーザビリティ再考
ユーザビリティは誰の問題？ Web制作の現場で「ユーザビリティ」という言葉が注目され始めたのは2000年ごろからでしょうか。それ以来、Webデザインの専門誌では頻繁に取り上げられ、今ではWebサイトを評価する際の大きな指標の1つとなった感があります。しかし、その一方で、システム開発の現場では、ユーザビリティの概念はあまり浸透していない印象があります。 もちろん、多くのエンジニアが自分の開発するシステムに対して「どうすれば使いやすくなるだろうか」と日々考えています。しかし、「ユーザビリティ」という概念を自分の中でしっかり整理できているエンジニアは、まだまだ少ないように思います。また「ユーザビリティはデザイナーが考える問題だ」として、エンジニアがあまり積極的でないケースも見受けられます。 これは決して好ましい状況ではありません。なぜなら、高いユーザビリティを実現するには、デザインやコーディング
Ctrl+Enterでフォーム送信するGreasemonkeyスクリプト | 東京嫉妬
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
使いやすさ研究所 用語解説
アフォーダンス 我々はドアの扱いについて明示的に教わった事はない（と思う）にも関らず、無意識にドアを扱うこと... 対応付け 自然な対応付けとは、右のスイッチを押せば右の照明が点き、スライダーを上にあげれば音量が上がる... フィードバック キーボードをタイプすると画面に文字が出るのも、電話機のプッシュボタンを押すとピポパと音が鳴る... メンタルモデル メンタルモデルとは、実際の機器の振る舞いとの整合性に関らず、ユーザが心的に持っている機器の動... 時間圧 ユーザにとって厳しい時間制限があるなど精神的にかかるプレッシャー... 常識 我々は決して目に映るものを視て、耳から聞こえるものを聴いているわけではない... 先人の計算 代数幾何学で言えば、一定の証明過程は定理として分離して再利用ができること... 道具眼 使いやすい道具や使いにくい道具を見分ける眼力
ああ、新宿駅サイン計画 | 藤崎圭一郎の雑思録
JR新宿駅のサイン表示がひどいことになっている。だいぶ前から気になっていたが、名作が台無しです。1988年ＧＫグラフィックスがJR新宿駅のためにデザインしたサイン計画は素晴らしいものだった。（導入は89年だったと思う）。首都圏の駅のサイン計画は当時、黎デザインによる営団地下鉄［*注］が一歩先を行っていたのですが、ＧＫのサイン計画はとにかく美しかった。 山手線の黄緑、中央線のオレンジ、総武線のイエロー、埼京線のグリーンなどＪＲの財産である「色」が、GKグラフィックスによる抑制されたデザインの中に生かされていた。「抑制された」と表現したのは、サインボードが環境に溶け込むように配慮されていたからだ。プラットホームやコンコースの線名表示（番線標）はダークグレイでの文字が白抜き、サインボードばかりがごちゃごちゃある感じを少しでも抑えようとしていた。 ホームの駅名表示サインボードは丸みを帯びていて圧迫
Nitram+Nunca リアル・グラデーションの作法
写真を撮る機会は実に多くありますが、特に結婚写真は一生の記念になる大事な写真ですので、できるだけ良いものを残しておきたいものですね。 結婚前は何かと忙しくなりますが、疲れが残らないよう、写真撮影の前にはしっかり休息を取っておきたいですし、エステなども利用して、できるだけきれいな状態で撮影にのぞみたいものです。 そして、結婚写真は挙式当日に撮影されるカップルも多いですが、やはり慌しいこともあり、せっかくの写真も表情が硬くなってしまったという経験をお持ちの方もいらっしゃるのではないでしょうか。 結婚写真は最近は前撮りでゆとりを持って撮影される方も増えているようです。 メイクや着付けも時間をかけられますし、時間にも余裕がありますので、より自然な表情で撮影ができるのもメリットです。 そして、式当日とは違う衣装を選ぶことができるのも良いですね。 スタジオ撮影はもちろん、ロケーション撮影などで屋外での
どこでもサイト内検索 Greasemonkeyスクリプト 改造版 - AUSGANG SOFT
Greasemonkeyの解説本でとてもわかりやすいGreasemonkeyスクリプティング TIPS&SAMPLES。 本文で紹介されているスクリプトがサポートページに掲載されています。 その中でよく使っているのが中級編の「サイト内検索用のフォームを追加する AddsSiteSearchByGoogle.user.js」。 ページの右上にカーソルを持っていくと、Googleでサイト内検索できるフォームが表示されます。 サイト内検索のないページで、情報を探す時にとても便利です。 ただ、そのままだと使っていて少し不便に感じるところがあったので若干変更してみました。 AddsSiteSearchByGoogle.user.jsその他のGreasemonkeyスクリプト 変更点は2点 一度表示されると消えない →マウスアウトしたら消えるように変更表示されると邪魔なときがある(右上のリンクを押した
窓の杜 - 【NEWS】エクスプローラの右クリックメニューをスタイリッシュなリング型に変更
エクスプローラの右クリックメニューをスタイリッシュなリング型に変更できるソフト「Ring Menu」Beta1が、6日に公開された。Windows XP/Server 2003/Vistaに対応するフリーソフトで、現在ベクターのライブラリページからダウンロードできる。なお、Windows XP/Server 2003上で利用する場合は.NET Framework 3.0が必要。 「Ring Menu」は、エクスプローラの右クリックメニューをリング型のメニューへ変更できる常駐型ソフト。デスクトップやフォルダウィンドウを右クリックした際に、右クリックメニューの各項目をリング状に並んだアイコンとして表示できる。75×85ピクセルほどの大きさで背景が半透明のアイコンが、右クリックするたびにフェードインして現れるのが美しい。 リング状のアイコンはマウスホイールや左右のカーソルキーで回転させることが可
窓の杜 - 【NEWS】文字入力時にカーソルの色と幅を変化させIMEのON/OFFを確認「SetCaretColor」
キャレットの色と幅の違いでIMEのON/OFFを確認できるソフト「SetCaretColor」v0.03が公開された。Windows XPに対応するフリーソフトで、現在ベクターのライブラリページからダウンロードできる。 「SetCaretColor」は、文字の入力位置を示す点滅するカーソル、つまり“キャレット”の色や大きさを変化させてIMEのON/OFFを区別できるようにする常駐型ソフト。さまざまなアプリケーションを切り替えていると、URLを入力するつもりが日本語で“ｈっｔｐ”と入力してしまったり、反対に日本語を入力したつもりが半角英数文字になってしまったことはないだろうか。 そこで本ソフトを利用すると、IMEがONで“ひらがな入力”のときはキャレットが少し幅広い緑色になり、OFFで“半角英数文字入力”のときは幅の狭い赤色になる仕組み。これにより文字入力時の目線でIMEの状態を区別しやすく
コラム： やじうまミニレビューベネトン「キッチンエコバッグ」
環境問題には関心があるほうだ。スーパーなどで回収されている牛乳パックも生鮮食品が入っている白いトレーも洗って、リサイクルに出している。電気も水道も無駄な使用は避けたい。ただ、無駄だなぁと思いつつもやめられないことがあった。それがスーパーのレジ袋だ。 ここ数年、環境問題への関心の高まりもあって、スーパーのレジ袋をやめようという運動はますます盛んになってきている。レジ袋を使わない人にはスタンプカードを渡して、金券や商品と交換できるスーパーもたくさんある。スーパーでオリジナルのショッピングバックを出しているところも多い。 それでも私はスーパーのレジ袋を使い続けてきた。それには理由がある。まず、私が買い物に行くのは会社の帰りが多いということ。行くときにはまとめ買いをすることが多く、レジ袋2～3袋を使って自宅に持ち帰ると言うことだ。 職場に持って行くバックの中に忍ばせておける、小さくて収納力のあるシ
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
日暮里駅の修悦体
「理想のブログ」に思う（2007-07-18）の後日談、みたいな。 8月初め、日暮里駅を利用する機会があったので、噂の修悦体を見てきました。そのとき、アレッ!? と思うことがありました。 修悦体をフィーチャーする様々な写真と、何かが違うような感じがしませんか? そうなんです、佐藤修悦さんのテープ文字は、たくさんある案内標識の一部でしかない。日暮里駅の修悦体は、プリンター出力の文字に埋もれた形で存在しています。 君は修悦体を知っているか（Yasuhiro Tsuchiya さん）では暫定的に、必要にかられて、テープをつかって、まさにブリコラージュによってつくられたタイポグラフィと紹介されているのですが、テープを使う必然性はなさそう。もちろん、修悦体のパッと目に飛び込んでくるキャッチーさ、面白さは格別です。けれども、修悦体がなければないで、日暮里駅の利用者は困りそうにない。 佐藤さんのインタビ
h1要素に変な機能的要素いれるとナビゲーションが混乱する
h1要素に変な機能的要素いれるとナビゲーションが混乱する スポンサードリンク Tweet mixiだったかで、自治体のWebアクセシビリティ調査しているよ、みたいなニュースがあがってたので、早速アクセスしてみたよ。 自治体サイトWebアクセシビリティ調査｜有限会社ユニバーサルワークス [www.u-works.co.jp] そんで、たとえば千葉県あたりを選択。 ▲h1要素の中にa要素で自治体Webにリンクが張ってある、正直ここ選択出来るか微妙 h1要素の中に変な機能的要素をいれるとナビゲーションが混乱するという例だと思いました。アクセシビリティ調査のページがアクセシビリティ低下しているのでなんだかアレです。 送信フォームがあったので、さっそく文句いってみました、そしたら今朝メールが来て、なおしたので確認ください、て書いてあったので早速アクセス。 ▲a要素の自治体Webへのリンクがh1要素か
全てのブラウザで同じに見える必要はないし、それは不可能で間違ってる - 氾濫原
だって、ブラウザには、画像を表示できないブラウザとかがあるんだもんね。IE も Fx も Opera も、そういう意味では同じような違いで、Fx では先行実装を使って段組になってよみやすくなっていたり、IE ではのっぺりだったり、そういうのがあっていいはず。なのに、一個の表示に統一しないといけないみたいな、わけわかんないのに縛られたりする。別に違ってていいと思う。 あと Web と紙は違うから、違うアプローチの仕方 (可変レイアウト) をすべきなのに、紙と全く同じスタンスで作るから、問題になる。いろんな UA にむけてデザインするのがウェブデザインじゃないの？ 今のウェブデザイナーは殆どウェブデザイナーじゃないよね。そんなだから「ウェブデザイナー(笑)」みたいになるんだ。 しかし、ウェブデザイナーでもなんでもない自分がごたごたいうのもおかしいので、あれなんだけど、最近どうも甘く考え気味 (
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Information Architects Japan » webapp的死闘：Google vs Apple