ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
世界初、オールフレキシブル電子ペーパー端末 ブリヂストン - ITmedia News
ブリヂストンは10月26日、世界初のオールフレキシブル電子ペーパー端末を開発したと発表した。独自の「電子粉流体」を使う方式で、厚さは5.8ミリと、電子ペーパー端末として世界最薄に抑えた。 「超薄型オールフレキシブル電子ペーパー端末」という名で、画面サイズは10.7インチ。電子ペーパーやタッチパネル、電子回路基板などをすべてフレキシブル化した。 書類や電子新聞などを閲覧できる「電子情報閲覧用電子ペーパー端末」も発表した。4096色表示に対応し、画面サイズは13.1インチ（A4）。ページ切り替えは0.8秒に高速化した。手書き入力性能も備えている。 電子情報閲覧用電子ペーパー端末は、関西アーバン銀行の渉外員業務支援システムへの採用が決まっており、来年春から試験運用を始める予定だ。 それぞれ、フラットパネルディスプレイ専門展示会「FPD International 2009」（10月28日から、パ
受託開発の限界を感じる - NullPointer's
ジュンク堂とか、三省堂書店とか、紀伊国屋書店とか文教堂とか有隣堂とか 店内(あるいは他の支店もふくめ)にある書籍の情報が検索できる端末を置いている 大型書店が結構増えてきたように思います。便利は便利なのですが、 使うたびにストレスやフラストレーションがたまる設計のシステムを使っているところがあります。 というかどこもそれなりに不満点があります。 特に XXX と YYY はシステムを設計した担当者を体育館裏に呼びつけて(以下略) ... システム作ったやつ、いっぺん自分で使ってみろよ。ほんとに。 いや、100人分くらいの検索を代理で入力させて、 それでもそのシステムのできが誇るに足るものか訊いてやりたいw 書店の検索システムって使いにくいですねえー。コンピュータのインターフェース部分だけでなく、売り場との連携もよくない。例えば新宿の紀伊国屋、検索結果で2FのC8の棚にあります、と場所を教え
Proxy型Tweenライブラリ ProxyTween at AS3S.ORG
対象オブジェクトのプロパティを直接変更する感覚でトゥイーンが実現できる Proxy型Tweenライブラリ ProxyTween ver.0.1を公開しました。 大量のオブジェクトを動かしたり、複雑なトゥイーンには向きませんが、 ボタンのロールオーバー時のちょっとした演出などを簡単に実現できます。 今のところ、Tween関数としては、 ・Tweener準拠の一般的なRobert Penner系 ・org.as3s.Tween準拠の物理的なイージング ・ユーザー定義のカスタム関数 をサポートしています。 ダウンロード Proxy型Tweenライブラリ ProxyTween ver.0.1 一番簡単な使い方 mct = new ProxyTween(mc); mct.x = 200; 動かしたい対象のプロパティを設定する代わりに、Proxyのプロパティを設定するだけです。 Sam
分裂勘違い君劇場 - エンジニアがUIデザインしたがる本当の理由
ハイライトピックアップ Web2.0を引き起こしているのと同じ時代の潮流が、エンジニアの地位の低下を引き起し、エンジニアがUIデザインをしたがる動機を創り出している。 Googleは、「エンジニアの会社」という皮をかぶった「企画・マーケティング・デザイン」の会社である。 エンジニアよりデザイン能力の低いダメデザイナーがうじゃうじゃでてくる構造。 優秀な人ならデザインスキルがなくてもいいデザインができるのは幻想。現実には、デザインスキルの差は容易には超えられない壁。 デザイナーに必要な技術的知識とエンジニアの技術的知識は別物なので、エンジニアの技術力はデザインをする上でそれほど強みにならない。したがって、技術力とデザイン力を兼ね備えた優秀なデザイナーはエンジニアとデザイナーのハイブリッドではない。 一人の人間がUIのデザインと実装を両方やると二兎を追うものになってUIの質が低下する。二兎を追
ブラウザはUIを隠して表示領域を広く--ウェブアプリケーション時代に向けた取り組み
個人的にブラウザメーカーに感謝をささげたい。筆者のスクリーンがあまり大きくないことに気付いてくれたのだから。 筆者は、ディスプレイの有効領域で使えるものはすべて使いたいと望む1人だ。文章を書いているとき、受信ボックスをチェックしているとき、写真を編集しているとき、見られる領域が増えれば増えるほど、満足感も増し、生産性も向上する。 最大化ボタンが筆者の味方。ツールバーは敵だ。 だから、ブラウザメーカーがこの問題に新たな関心を寄せていることを伝えることができるというのはうれしいことだ。筆者にとって、この問題はウェブサイトを読む上で重要なことだが、新世代のウェブアプリケーションのためには本当に重要なことだ。ブラウザで画素が1列節約されれば、それを各ウェブベースアプリケーションで使うことができる。 Mozilla Foundationの最終的な目標は、ユーザーインターフェースを可能な限り背景に退け
第1回 "IAって何するの？" がわかる「IA One Sheeter」 | gihyo.jp
「IA」という言葉が、Web業界の中で皆さんに認知されるまでにはまだまだ時間がかかりそうです。ここで言うIAとは「情報アーキテクチャ」のことを指します。 Webサイトを構築する上で、欠かせないのがこの情報アーキテクチャだと言われてます。簡単に言うと、Webサイト全体の設計図であり方針です。その設計図や方針を具現化するためには、やはり伝えるための手段が必要になります。 この連載では、伝えるための手段としてのツール紹介や、伝えるために必要なヒントを中心に、Webサイト構築に関わる方々に有益な情報をお届けします。 IAについて 「IA」そのものについての説明は割愛しますが、ひと口に「IA」と言っても以下の2つの意味があります。 Information Architecture：情報アーキテクチャ（分野） Information Architect：インフォメーションアーキテクト（スキル） とくに
Flexのリッチな画面遷移テクニック集（1/2） - ＠IT
AdobeからFlex3とAIR（Adobe Integrated Runtime、コードネーム“Apollo”）のパブリックベータ版が公開されました。 Flex1.5からFlex2になったときとは違い、Flex2とFlex3とで基本となる部分での大きな変更はないようです。つまり、Flex2での開発手法がそのまま適用できます。AIRの開発でも同様のことがいえますので、ここでFlexの開発手法をしっかりと理解しておくことが、次のステップへ進むためにきっと役立つでしょう。 前連載「Flex2でWebアプリ開発」では、Flex開発で基本となる特徴的な機能について紹介しました。本連載では一歩進んで、実開発の現場でよく使われる機能について、より実践的に解説します。 RIAと画面遷移 RIA（Rich Internet Application）の特徴として挙げられるのが、従来のWebアプリケーションの
究極のユーザビリティテスト Eye Tracking | 秋元@サイボウズラボ・プログラマー・ブログ
via del.icio.us/popular Eye Tracking がすごい。技術がすごい。 まだ自分で試せるわけじゃないので、「本当にこれ実現してるの?」という気持ちもあるのだが。 動画デモを見てもらうとわかるけれど、変な道具や特別なメガネをかぶったりすることなく、ディスプレイを見ている被験者の目の動きを追うことができるシステムを開発した、と言っている。 被験者をカメラで映し、その両目の動きを分析することで、画面上で何を見ているかを追尾できているのだそうだ。 動画デモでは、ユーザの視線が青い線で、ユーザの視線が何かに注目している間は、青い円で、注目時間が長ければ円を大きく、表示している。 また、複数のユーザの視線データを集め、視線が多く/長く滞留しているところを、温度表示してみるというのもデモではやっている。中央に目立つように置かれた広告がまったく視線に止まっていない(笑)のは、予
テレパシーのように無言で電話に応答できる技術のデモ | 秋元@サイボウズラボ・プログラマー・ブログ
NewscientistTechの記事で、ネックバンドで神経信号を拾うことで「しゃべらずにしゃべる」技術の紹介とデモ動画が載っていた。 さすがに使うための訓練は必要らしいが、声を出さなくてもしゃべっているように首を動かす(?)ことで、信号が伝達され、それを基にして音声合成するということ。 口まわりを動かさないと神経は動かないそうで、頭の中で考えたことが勝手に話されたりはしないらしい。タイトルに「テレパシーのように」と入れてしまったが、そういう意味では腹話術を機械化したようなものか。 今は首を動かしてから発話まで時間がかかり、認識できる語彙やフレーズも150程度だということだけれど、そのあたりは改善されていくそう。病気で声が出せない人への適用も検討されているということだ。 僕は、日本の携帯電話でブラウザやメールが普及し、米国では音声による自動応答が普及しているのは、電車などの公共機関で電話で
パイ型のメニューでFirefoxを簡単操作できる『easyGestures』 | POP*POP
マウスジェスチャーやショートカットキーがなかなか覚えられない、という人におすすめのFirefox用のランチャーがこちら。 easyGesturesを使えばパイ型のメニューを使ってマウスだけでさくさくFirefoxを操作することができます。マウスジェスチャーのGUI版といってもよいかもしれません。 ↑ マウスの真ん中のボタンをクリックして起動。 ↑ かなり細かいところまでカスタマイズ可能。 ↑ さらに設定画面。 うまく使えば普段のブラウジングではメニューバーでさえも不要になりそうです。画面を広く使いたい人にもおすすめですね。 インストール＆詳細は以下からどうぞ。 » easyGestures :: Firefox Add-ons
雨を予報する傘、米企業が開発 - ITmedia News
Expired：掲載期限切れです この記事は，ロイター・ジャパンとの契約の掲載期限（30日間）を過ぎましたので本サーバから削除しました。 このページは20秒後にNews トップページに自動的に切り替わります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
User Plus
TechCrunch | Startup and Technology News
ウェブサービスを作るときはBlank Slateを工夫しよう | IDEA*IDEA
ソシオメディア | 採用情報
『インタフェースからの発想』パネルディスカッション | 慶應義塾大学ORF2006
404 - gooラボ
Eribium Blog Archive Designing Apollo apps in Fireworks/Photoshop
livepipe.net - livepipe リソースおよび情報