Webデザイン エンジニアリング 第16回 ボタンを押させるテクニック：ITpro
対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。 わかりやすいボタンの形状はユーザーによって違う まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。 上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。 しかし，PCに
画面レイアウトを考える その１モニターサイズとwebブラウザ可視領域について
実際にサイトをレイアウトする手始めの段階で必ず考えておかなければならないのが、ターゲットとするユーザーのサイト利用環境、ターゲットモニターサイズである。サイトを閲覧するために一般ユーザーが使っているPCのモニター表示解像度は、人によって大きく異なる。現在標準と言われている表示解像度は、XGA（1024×768ドット）だ。現在の標準的なPCがこの解像度を使っており、比較的古いタイプのPCでもこの程度のサイズをカバーしている。古いラップトップパソコンを使っているユーザーであれば表示解像度はSVGAの可能性があるが、PCの最小表示サイズVGAモード同様、新型のOSが対応するPCではあまり日常的に使われていないと考えてよい。また現在ではSXGA（1280×1024ドット）の解像度も優勢で、WindowsXPやMacOS X世代のOS対応機はこの環境に対応するものがほとんどだ（図１）。 モニターサイ
システムの「機能美」を考えたことがありますか？
情報システムのユーザー・インタフェース（UI）のデザインを専門に手がけている技術者（デザイナ）から筆者が聞いた話である。 そのデザイナが大学で講義を行うことになり，学生に協力してもらって，ある実験を行った。縦横の比率が異なる長方形の紙を何枚か生徒に見せ，「自分が最も美しいと思う長方形」を一つ選ぶように指示したのである。使った長方形は，縦横の比率が1:1から2:5までの10種類だった。 その結果，一番多く手が上がったのは，5:8の比率の長方形だったという。5:8と言えば，古くから多くの人が美しいと感じる比率として知られる「黄金比」とほぼ同じだ。 実験の被験者は情報システムを専攻する学生たち。このデザイナは「“理系”の学生たちのデザインに対する感性は，一般的な感性と大きくズレているかもしれないと思ったが，結果的には昔ながらの黄金比の長方形に人気が集まり，少しほっとした」と言う。 美しいもの。美
どうしてフリー・ソフトウェアのユーザビリティはアレなのか
Why Free Software usability tends to suck 2005年12月25日 Matthew Thomas さんの2002年4月13日のブログエントリ、“Why Free Software usability tends to suck” の日本語訳です（現在はリンク切れになってますが、Internet Archive でアーカイブが読めます）。僕はこれを Joel on Software の 「5つの世界」で（正確には書籍のほうを読んで）知りました。このエントリはいろいろと論争を巻き起こした有名なもののようですが、どうやら当時の日本ではあんまり言及されてなかったみたいなので（≒ Google で見つからなかったってことですけど）、いまさらながら日本語にしてみました。 お知らせ: Matthew Thomas さんは 2008 年に、この記事の続編ともいえる、
はてなブログ | 無料ブログを作成しよう
帰省、寿司、陶芸体験 8/13（火） 妻の実家の墓参りへ行き、俺の実家へ帰省。風呂に入る前に子供達と外で水鉄砲で水を掛け合いびしょ濡れになる。最後のほうはどうにでもなれと思い、ホースやバケツで直接水をかけ合う。久しぶりの大胆な遊び方に子供たちは大声をあげながら騒いでいるが、田…
デザイン能力を身につける方法 - 分裂勘違い君劇場 by ふろむだ
まず、この記事で紹介されていたUIの話。 あのUIは、オイラ的に解釈するなら、こんな感じ。 まず、いちばん最初に目につくのが、「レトリック」を使った導線設計をしているということ。 つまり、まず、確信犯的かつ計画的にユーザに「誤解」させる。 つまりこの「スクロールバーに見える」というのは、「釣り」なわけで。 ユーザは、それに釣られて、スクロールバーだと思って、使ってみる。 そこで、すかさずネタばらしの「釣り宣言」をする。 「スクロールバーだと思ったでしょーwww。うそぴょーん。」というわけだ。 しかし、「期待を裏切られたユーザ」は、その裏切りの価値を認めるわけだ。 「なんだ、これ、スクロールバーじゃないけど、スクロールバーよりも便利じゃん」というわけだ。 オイラがよくやるブログ記事の書き方と同じだ。唯一の違いは、このUIのレトリックは目論見どおりに成功し、オイラのレトリックは単にすべりまくっ
fladdict.net blog: 「本当に素晴らしいデザイン」とは、PICASAの変なスクロールバーみたいなものを言う
お気に入り巡回先の、羨望は無知の「なぜ「デザイン」という行為、「デザイナー」という職業は誤解されるのか」や、分裂勘違い君劇場の「エンジニアの方が優れたユーザインタフェースデザインができる理由」、F's Garageの「エンジニアがダメなUIデザインをする原因」 のあたりのデザイン論が、あんまりデザインと縁のない人にデザインをわかりやすく説明してて面白い。面白いのだけどちょっと抽象的なんで、具体例の話とか書いてみるテスト。 最近、これらのエントリーで言及されるようなよいデザインを身をもって体験をした。それは画像管理ソフトPICASAのヘンテコなスクロールバー。 今まで気付かなかったけど、あのヘンなスクロールバーは単なるアヴァンギャルドやオシャレじゃあなかった。実は合理性に裏打ちされた素晴らしく美しいデザインだということに気付いた。 まずPICASAを知らない人に説明すると、このソフトのスクロ
CMSとモバイルとフィードと四畳半社長: ユビキタスアプリケーションとユーザーインターフェース
CMSとモバイルとフィードと四畳半社長 東京都文京区本郷でとあるCMS開発会社を営む社長のブログ。さっきまで「越後のCMS問屋」だったのですが、会社が新潟に移転したと勘違いされたようなので変えました。 モバイル、ゲーム、フィード、Ajax、Flash、ハイテクグッズあたりのはやりモノが好きです。 最新作「メルルーの秘宝」がドワンゴから提供中 週刊アスキーで「2045年の週刊アスキーをつくる」連載中 さて、ZEKEを利用した開発を進めているとすぐにまた新しい問題がたちはだかりました。 それはユーザーインターフェースの問題です。 いまのところZEKEによるユビキタスアプリケーションの最も大きな成功例はコンテンツ管理システムです。 WYSIWYGで編集できる携帯電話サイト向けのコンテンツ管理システムで、クライアント様のご要望にあわせて新しい記事形式をどんどん追加していくことができます。
エンジニアがダメなUIデザインをする原因
ことビジュアルデザインに関しての経験論としては、 ・エンジニアは画面のオブジェクトや文字の単位で画面を見る。 ・デザイナーはピクセル単位で画面を見る。 そもそも見ている解像度が違う。 エンジニアは機能を見る。デザイナーは間隔を見る・・・って言ったら言い過ぎ？ そもそもインフォメーションデザイン、インタラクションデザイン、ビジュアルデザイン、システムデザインは、すべて別個の職能だと思います。このうち、どの範囲の能力を保有してるかで、戦士にも魔法使いにもなれるんじゃないでしょうか。まぁ全部を十分に持ってる人は滅多に見ませんけどね。そういう人は、yugoさんのような世界的なアーティストとして活躍してることでしょう。 Ajaxを作る場合は、いわゆる「エンジニア」と呼ばれる人が、システムデザインはもちろん、インフォメーションデザインとインタラクションデザインのかなりの部分を担当することにならざるを得
分裂勘違い君劇場 - エンジニアがUIデザインしたがる本当の理由
ハイライトピックアップ Web2.0を引き起こしているのと同じ時代の潮流が、エンジニアの地位の低下を引き起し、エンジニアがUIデザインをしたがる動機を創り出している。 Googleは、「エンジニアの会社」という皮をかぶった「企画・マーケティング・デザイン」の会社である。 エンジニアよりデザイン能力の低いダメデザイナーがうじゃうじゃでてくる構造。 優秀な人ならデザインスキルがなくてもいいデザインができるのは幻想。現実には、デザインスキルの差は容易には超えられない壁。 デザイナーに必要な技術的知識とエンジニアの技術的知識は別物なので、エンジニアの技術力はデザインをする上でそれほど強みにならない。したがって、技術力とデザイン力を兼ね備えた優秀なデザイナーはエンジニアとデザイナーのハイブリッドではない。 一人の人間がUIのデザインと実装を両方やると二兎を追うものになってUIの質が低下する。二兎を追
なぜ「デザイン」という行為、「デザイナー」という職業は誤解されるのか - 羨望は無知
私は個人的興味からゲームデザインについて色々と調査・研究を追いかけている。巷では「ゲームデザイン」という概念はあまりなじみが無いらしく、こういうことをしているんですよ、と説明が必要な機会は多々ある。 こういったときに感じるのが、「デザインは誤解されているな」ということである。たとえば、「ゲームデザインとはゲームのグラフィックやキャラクター、世界観などをつくる仕事である」、という誤解があったりする。このような誤解は、ゲームデザインが理解不足というよりも、デザインという概念そのものが一般的に誤解されているとしか考えられない。 「デザインであると同時に技術でもあるような、ある一つの行為」をすることでしか、真にすぐれたインタフェースというのを作れない場合っていうのが、けっこうあるからなんじゃないかと。(中略)技術を精密に認識できていないから、その技術で可能となるユーザインタフェースを十分にイメージ
The Yahoo! User Interface Library (YUI)
YUI Library Controls/Widgets: AutoComplete Button Calendar Charts [experimental] Color Picker Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog) DataTable ImageCropper Layout Manager Menu Rich Text Editor Slider TabView TreeView Uploader [experimental] YUI Library CSS Tools: CSS Reset (neutralizes browser CSS styles) CSS Base (applies consistent style foundation for c
分裂勘違い君劇場 - 見た瞬間に使い方の分かるユーザインタフェース
「初心者にわかりやすいGUI」については、この記事のid:naoya氏の気持ちは、分かる気がします。 まず、プロのGUIデザイナーと実プロダクトの仕様について議論すると、ほとんど必ずと言っていいほど議題に上がるのが、「とっつきやすや」と「機能性」のトレードオフ。 よく、回すべきなのかスライドべきさせるのか、押すんだか引くんだかよく分からないドアというのがある。ドアのどちら側を押すべきなのかも分かりにくいことも多い。それは、ユーザインタフェースが、self explanatory(自己説明的)じゃないからだ。これは、よくユーザインタフェースの設計ミスの事例としてやり玉にあげられるんだけど、ぼくは、それはそんなに単純な話じゃないと思うのだ。 たとえば、丸い取っ手のあるドアは、見た瞬間、「ああ、これはドアノブを回して引くんだな」ということが、直感的に分かる。つまり、そのドアノブは、「機能」を提供
Alertbox: 2005年 ウェブ・デザインの間違いトップ10（2005年10月3日）
2005年、ユーザをうんざりさせてきたWebデザインの間違いをリストアップしてみると、古くから言われているものがランクイン。悪さをし続けていることがわかった。 Top Ten Web Design Mistakes of 2005 by Jakob Nielsen on October 3, 2005 Webデザインの間違いをリストアップするにあたり、今年は趣向を凝らしてみることにした。私が発行しているニュースレターの読者にお願いして、今年、もっとも腹立たしいと思ったユーザビリティ上の問題点を投票してもらったのだ。 読者の参加によって、ユーザテストでは気付かなかった多くの課題が浮き彫りになるだろうと思っていたが、そうはならなかった。30位までにランクインした問題点は、ユーザビリティガイドラインの中で指摘済みのものばかりだったのだ。今年のトップ10を読んで、“聞き覚えがあるぞ！”と思われる方
Joel on Software - 環境をコントロールできれば楽しく感じるもの
Joel Spolsky ジョエル・スポルスキ 翻訳: Yasushi Aoki 青木靖 2000/10/24 私の知っている筋金入りのC++プログラマたちの多くは、ユーザインタフェースプログラミングを嫌っている。これは私にとっては驚くべきことだ 。それというのも、UIプログラミングが本質的にやさしく、直感的で、楽しいものだと知っているからだ。 それがやさしいというのは、どうやって矩形を別な矩形の真ん中に配置するか、という以上に複雑なアルゴリズムは、通常必要にならないからだ。それが直感的であるというのは、もしあなたが間違ったならたちどころにそのことがわかり、修正できるからだ。楽しいというのは、あなたの作業の結果を即座に見ることができるからだ。あなたは自分がプログラムを直接彫刻しているかのように感じるだろう。 私の考えでは、プログラマがUIプログラミングを怖れるのは、ほとんどの場合彼らのUI
使える GUI デザイン
EmptyPage.jp > Translations > 使える GUI デザイン 使える GUI デザイン: フリー／オープンソース・ソフトウェア開発者のための手引き 2004年11月28日 Benjamin Roe さんの、Usable GUI Design: A Quick Guide for F/OSS Developers の M.Shibata による日本語訳です。プロジェクト杉田玄白正式参加テキスト。 Update: この記事についてたくさんのコメントをいただいたので、FAQを作って、そのうちのいくつかについて回答することにしました（訳注: FAQ も翻訳しました！）。 イントロダクション オープンソース・ソフトウェアの世界は優れたソフトウェアでいっぱいです。ワードプロセッサから Web サービスにいたるまで、コンピュータでしたいと思うようなおおよそすべての作業において、高
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
void GraphicWizardsLair( void ); // プログラマとしてスゴすぎると、その美学によって優れたインターフェース設計者に成りがたい実例
Interaction Designer - New York