Welie.com - Patterns in Interaction Designインタラクション集
A Pattern Library for Interaction Design This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this. So there is really no 'original' design to be found here, sorry. It has all been done before... See it as a reference or basic 'toolkit' you can use when design user experiences. It
直感的なUIとhand-eye-cordinationの話
下のビデオは一歳度児がiPhoneのフォト・アルバムの機能を使っている姿を撮影したものだが、これを見ると「直感的なUI」とは、まさに人間が赤ん坊のうちにマスターする"hand eye cordination（目からフィードバックを受けながら手先を動かして物をコントロールする能力）"に合致したものなのだということが良く分かる。 【追記】参考までに、私が特に好きなUI関連の書物二冊へのリンクを張っておく。特に「誰のためのデザイン」はUIが単なるソフトウェアやウェブ・サイトのUIデザインの問題ではないことに目を開かせてくれる良書だ。 ・誰のためのデザイン?—認知科学者のデザイン原論 ・Envision Information
Wiiで見るなら、音が欲しい。 【Wiiインターフェース考】
PC向けサイトであれば、ページを開いた瞬間に音が鳴り出すような作りは避けられていますが、Wii向けサイトでは、音があった方がいいんじゃないか、という話をしてみます。 先日、会社購入のWiiを、同じ案件のメンバー数人で、あーだこーだ言いながら、いろいろといじってみる機会がありました。 「お天気チャンネル」とか「ニュースチャンネル」とかをひと通り見て、最後に一番気になる「インターネットチャンネル」へ。 まずはDOGGAWiiとかRimoを見た後に、次どこへ行こうか？とYahooへ移動したとたん・・・ 「寂しい・・・・」 という声がメンバーの間から出てきました。 要素がたくさん詰まったYahooのサイトなので、画面が寂しいということはないのですが、それまで見ていたWiiチャンネルや動画サイトと比べると、ひどく静かに感じられます。 TV画面に向かっているからなのか、複数人で見ていたからなの
CNET Japan
人気の記事 1「ラブライブ！」の合同ライブ「ユニット甲子園」で見た“新たな可能性や夢も広がるステージ” 2024年03月16日 2新型「iPad」、2024年モデルなど--週間人気記事をナナメ読み（3月8日～3月14日） 2024年03月15日 3［ブックレビュー］話しかけるのは苦手でもできる--「どこへ行っても『顔見知り』ができる人、できない人」 2024年03月16日 4新型「iPad Air」「iPad Pro」、3月末～4月に発売か 2024年03月12日 5主流になりつつある「自分でデバイスを修理」--iFixitが大いに貢献 2024年03月15日 6トヨタとポケモン、ほぼ実物大かつ変形可能で動く「ミライドン」--日比谷で展示試乗も 2024年03月15日 7「iPad」2024年モデルはどうなる？これまでの予想と個人的な期待 2024年03月11日 8サムスン、ミッドレンジの
iPhoneの割り切りと次の一手 - 雑種路線でいこう
ユーザー体験を軸にニュースを探していた私にとって，CES期間中で一番の衝撃は皮肉なことに同時期に開催されたMac World ExpoでのiPhoneの発表だった．iPod以来Appleはデバイスからユーザーに分かりにくい機能は全て省き，連携するパソコン側に持たせる戦略を取ってきた． これはデバイスに詰め込める機能は全て詰め込むという日本の家電メーカーや世界のITベンダの姿勢と対照的である．利用者から分かりにくい機能とは，単に煩雑な操作だけでなく，意識しなければ困ったことの起る状態や一貫性の欠如を含む． 中島氏は「アップルはいったい全体、なんでiPhoneを使って直接iTune Music Storeから購入できるようにしなかったのだろうか？」と謎かけしているが，この割り切りはAppleの戦略を端的に示している． まず操作の煩雑さ．小さな画面と指を使った操作は既存コンテンツを快適にブラウズ
ハイクオリティサイトのワイヤーフレーム分析 (1) 他サイトのワイヤーフレームから学べること
ワイヤーフレームとは「ページの大まかな見取り図」のことであり、この部分にはこのコンテンツ、というページ構成を示したものである。Web制作の案件では、比較的上流の工程でワイヤーフレームづくりを行い、その後にビジュアルデザインやインタフェース制作、(X)HTML+CSSページへの落とし込みの作業に入る。 コンテンツそれぞれをどこに配置するかという判断、いわゆる「情報アーキテクチャ」は、限られたスペースを有効活用するのに重要なだけでなく、ユーザービリティ(使いやすさ)やファインダビリティ(発見しやすさ)にも大きく関わってくる。ユーザー中心デザイン(User-Centered Design: UCD)という言葉を借りなくとも、Webサイトはユーザーに使ってもらってはじめて意味があるのであって、運営者とユーザー双方の満足が、車の両輪のようにサイトを動かし、発展させるのである。 特にトップページのワイ
第0回 その気になった客を逃さないフォーム設計術 | Web担当者Forum
第0回 その気になった客を逃さないフォーム設計術 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） ウェブサイトの「ユーザビリティー」という言葉は、当たり前のように耳にする機会が増えてきた。しかし、その知名度の広まりとは裏腹に、「何をどうすれば成果に結びつくのか」「実践に落とし込むにはどうしたらよいのか」について具体的に取り上げられることは少ないようだ。 この連載では、主に「会員登録による顧客獲得を行う企業サイト」をモデルとして、想定される次のようなユーザー
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
hail2u.net - Weblog - Pure JavaScriptなサイト内検索アプリケーション
ここのところいろいろやっていた、動的にscript要素を追加してクロス・ドメインのJavaSriptファイルを読み込むという手法を使ったYahoo!によるサイト内検索アプリケーション、labs.hail2u.net/yahoo/を作った。Amazon Web Servicesと違い、Yahoo! Search Web ServicesではJSONを出力する機能及びコールバック関数名を指定できる機能(JSONP)を備えているので、HTMLファイル単体で機能するようにすることができた。 hail2u.net から rss を検索した結果の4ページ目 hail2u.net から blosxom kit を検索した結果 といったように、URLのハッシュにドメイン・キーワード・ページ数を指定して検索を行う。 実装において特にややこしいところはなく、コード的にもややこしいところは無いと思う。 強いて言
今日のUI - koyachiの日記
cnet.jpでインタビュー記事等で複数ページになった場合に現れるページャ。リンクしてないならアンダーラインやめて欲しい。Page 1/2に、いつもだまされている。
Webデザイン エンジニアリング 第16回 ボタンを押させるテクニック：ITpro
対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。 わかりやすいボタンの形状はユーザーによって違う まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。 上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。 しかし，PCに
B2Bのユーザビリティ
ユーザテストは、ビジネス対ビジネス用Webサイトのユーザビリティが、一般的な消費者向けサイトよりも、かなり低いことを示している。もっと顧客転換率を上げたければ、ガイドラインに従って、商材を見込み客たちが楽にリサーチできるよう手助けするべきだ。 B2B Usability by Jakob Nielsen on June 1, 2006 多くのビジネス対ビジネス（ B2B ）サイトは、ユーザ体験の観念が 1990 年代で止まってしまっている。顧客たちのよくある疑問や関心に応えることに失敗し、彼らが取引先候補を探す作業の障碍となってしまっているのだ。 これらのサイトは、ウェブが企業と顧客の関係を逆転させたことに気づいていない。オンライン上でのインタラクションのほとんどは、要求主導型だ。訪問者の要求を満たすことができなければ、彼らが貴方のサイトを見捨てて競合サイトへ流れていくのを、眺めているしか
フォーム vs. アプリケーション
オンライン・フォームも２画面を超える分量になると、機能を滞りなく支援するには、よりインタラクティブなユーザ・エクスペリエンスを提供するアプリケーションに切り替えた方が良い場合が多くなる。 Forms vs. Applications by Jakob Nielsen on September 19, 2005 フォームが、コンピュータとの複雑なインタラクションを表す最良のメタファとなることは稀だ。にも関わらず、多くの大企業が、紙ベースのフォームを受け継いでいる。結果として、イントラネットには、ニーズに応えようとするオンライン・フォームが散乱している。アプリケーションを使えば、リアルな対話と本格的なGUIで、そのニーズはもっと上手く満たされるというのに。 最近、ある人から１本の電話があった。イントラネット用のフォームを見て、ユーザビリティ上の問題点を指摘して欲しいと言うのだ。単独のページにフ
「ユーザビリティーは攻めの部門」――サイボウズ、ユーザビリティーテストを公開
サイボウズ(株)は26日、東京・飯田橋の同社オフィスにおいて同社のビジネスソフトウェアの開発現場、およびユーザビリティーテストの様子をプレス関係者に公開するプレスツアーを開催した。 同社では昨年から2～3件の製品開発において、社外のコンサルティング企業に委託する形でユーザビリティーテストを行なってきたが、今年3月より社内でユーザビリティーテストを行なう体制を整え、実施しているという。現状では今年入社した新入社員など10名を対象に実施し、1人あたり3～4日/1日あたり2時間(ウォーミングアップの時間を含むため、テスト対象のアプリを操作するのは1時間程度)のテストを行なっているという。 同社のユーザビリティーテストは「まだテスト段階」(開発本部UI/HPグループの香村信二郎(かむらしんじろう)氏)というように、会議室を時間借りして機材を臨時に設置しながら行なっている。部屋には被験者のほか、モデ
【どう変わる？Office 2007（1）】UI編---膨大な機能をより使いやすく
マイクロソフトは5月30日，次期版オフィス・スイート「2007 Microsoft Office system（以下Office 2007）」に関する説明会「Reviewers Workshop」を開催した。ITproでは8回に分けて，Reviewers Workshopで紹介されたOfficeの新機能を紹介する。今回は，Word，Excel，PowerPoint，Accessで採用される新しいユーザー・インターフェース（UI）について説明しよう。 マイクロソフトOffice製品マーケティンググループの田中道明マネージャは「Office 2007では，過去10年のOfficeで最大の変化がある」と強調する。これまでのOfficeの歴史は，機能追加の歴史であった。例えば，1989年に登場した「Word for Windows 1.0」には，わずか100個のコマンドしか搭載されておらず，ツール
snippets from shinichitomita’s journal - Google Spreadsheet と UI as commons（あるいは UI as a Service）
さて、Googleがオンラインスプレッドシートを出したのだけど、まあ機能の充実度はさておき、実際に企業内で使うとして、重要なデータをGoogle様に預けてよいものかどうかという話がある。たとえば個人情報が関わるようなデータも預けてしまっていいのか。きっとちゃんとしたエンタープライズ環境に適応するには、データ流出／漏洩が怖すぎて使えない。 まあそもそもGoogle Spreadsheetがそんな使い方を想定していない／推奨していないのでは？といわれればそれまでなんだけど、Webでスプレッドシートを共有したいという欲求はそもそもファイアーウォールの内側にこそ多い欲求だったように思う。そこで「○○のデータに関しては使えないよー」となってしまうと、ちょっともったいない。 これはSalesforce.comのようなSaaS (Software as a Service)形式のオンラインサービスにも共
クリックできる場所でマウスカーソルを変化させる - F.Ko-Jiの「一秒後は未来」
Google Calendarでは、カレンダー部分をクリックすると吹き出し形のレイヤーが表示されて、スケジュールを入力できるようになっています。しかし、カレンダー上にマウスカーソルを置いてもカーソルのスタイルが変化しないため、最初に使うときに「カレンダー上をクリックできる」ということが分からないかもしれません。 ある部分にマウスカーソルが乗ったときにマウスカーソルのスタイルを変化させるには、JavaScriptを使って次のようにします。
人机交互論: イラスト２案
本を書いてからセミナーや講演を依頼される機会が増えてきました。本では内容を丁寧に伝えたかったので、なるべく文章で表現して図表は補助的に使ったのですが、プレゼンテーションでは文字よりも図表の方がインパクトがあります。そこで、最近は、本に収録した図表のほかにプレゼンテーション用の図表を新たに作成して使っています。 今回はその中から、実際にプレゼンテーションで使ってみて聴衆の皆さんの反応が良かったイラストを２点ご紹介します。まだ下書きレベルですがイメージは伝わると思います。もし著書の改訂版を書く機会があれば、この２点は追加したいなと思っています。（もちろん、プロのイラストレータに書き直してもらいますが。） 効果・効率・満足度 効果・効率・満足度とはユーザビリティの３要素です。『効果』とはユーザが正確に目的を達成できること、『効率』とは無駄な手順を踏まずに目的を達成できること、『満足度』とはイライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dynamic Drive CSS Library- Practical CSS codes and examples
Nine Tips for Designing Rich Internet Applications