ユーザーのためのデザインって？
2007年9月12日 ユーザビリティについて考え続けること 8月終わりに注文していた、 「ヒューメイン・インタフェース―人に優しいシステムへの新たな指針」 が届きました。 まだ少ししか読んではいません。 文字も小さいし、内容も少し読みにくいですが、 他の本とは少し視点が違うようです。 むしろ、インタフェースやデザインの専門家になるための本ではなく、 視野を広げるための本なのだと思います。 当たり前のように今あるデザインが最良なのか、考えさせられます。 さて、久しぶりの更新なのですが、 やはり現在、研究（本業）など、 やることが多すぎてインタフェースの勉強にまで頭が回りません。 そのため、しばらく無期限でこのブログをお休みしようかと思います。 ほとんどコンテンツが無いに等しい状況で、申し訳ありません。 ですが、プログラムもソフトウェア開発もほぼ経験したことのない素人が、 ユーザビリティについ
第24回 何かに似せたユーザー・インタフェース
今回は「何かに似せたユーザー・インタフェース」について考えてみたいと思います。何かに似せたインタフェースというのは，つまりすでにある何かによく似ている，もしくは同じように使えるインタフェースを用意する，ということです。 なんて書くと，「パクリ」や「インスパイヤ」と呼ばれる，流行っているサイトのデザインをそのままそっくりまねる手法を思い出してしまうかもしれません。流行っているサイトのデザインには，もしかしたら何らかの特長的ですばらしい点があるかも知れず，それをまねすることは，「まねただろう」といわれるデメリットを差し引いてもメリットがあるのかもしれませんし，もう少し意味を広げて，すでにあるサイトの良さをいかにうまく取り込むか，ということになれば，すごく意味があることだと思います。 でも今回の「まねる」はそういうほかのサイトのデザインをまねる，という話ではありません。もう少し広い意味であったり
第23回 URIの動的生成と使いやすさを考える -- ブログやWikiにおける生成ルールや日本語の扱い，リンクされやすいURIとは？
第23回 URIの動的生成と使いやすさを考える -- ブログやWikiにおける生成ルールや日本語の扱い，リンクされやすいURIとは？ 本連載でURIの話を取り上げ始めて，もう4回目になってしまいました。URIに関しては，いろいろ面白い話題もあり，興味は尽きないのですが，ほかに考えてみたい題材もありますし，あまりこの話ばかりを続けるのもなんですから，ひとまず今回で最後にしたいと思います。 今回は，動的生成されるURIの使いやすさ，という視点から考えてみます。ここでいう「動的生成されるURI」というのは，ブログのエントリ・ページやWikiのページのように，機械的に生成されるページのことです。また，商品情報を元に商品ページを自動生成するオンラインショップなども動的生成ですね。 新たにページやデータを追加できるようなツールやサービスでは，新しくデータが追加された際に，新たに生成されるページにURI
ブログのユーザビリティを高めるための20の秘策 | P O P * P O P
良いブログとそうでないブログの違いは何だろうか？そう思ったTomさんがまとめたのが今回ご紹介する「Twenty Usability Tips for Your Blog （ブログのユーザビリティを高めるための20の秘策）」です。 もちろんこれが100%正しいというわけではないですが（彼もそう言っています）、とても参考になりますね。ブログのリニューアルを検討されている方には役立つのではないでしょうか。 ではその20の秘策を以下に詳しくご紹介。 ブログのテーマを決めよう ブログのテーマを決めたらそれに関する投稿にフォーカスしよう。そしてロゴの近くにそのテーマが何であるかわかるようにしよう。またそのテーマに関する簡単な説明もすぐそばに置くようにしよう。 これは奇妙に思えるかもしれませんが、実際のところ、テーマを広くとるよりも、一つテーマを決めたほうがたくさん書くことができますよ。 コメントを推奨
Geekなぺーじ：選択肢を減らすことの重要性
Google TechTalksでBarry Schwartz博士による講演が公開されていました。 「The Paradox of Choice - Why More Is Less」というタイトルでした。 最初は、UNIXコマンドのmoreがlessよりも劣っている理由の事だと思って見始めましたが、そうではありませんでした。 何でも選べてベストじゃないと満足しないというのは、アメリカ人っぽい気もしましたが、かなり面白かったです。 ユーザビリティと機能の問題は良くある問題ですが、お店で展示されている商品の種類を減らした方が売り上げが上昇する話などが新鮮でした。 以下に要約してみました。 ここでは書いていない部分も多いので、詳細はビデオをご覧下さい。 字幕も入っていますし、ゆっくりと話してくれる人なので非常に見やすいと思います。 ただ、スライド(PPT?)が見られないので、何故観客が笑ってい
観的なインタフェースをめざして
現在使われている計算機のほとんどは ウィンドウやマウスを使った グラフィカルユーザインタフェース(GUI)で操作を行なうようになっているが、 GUIが一般に普及する前は キーボードを使った コマンドラインユーザインタフェース(CUI)で計算機に指示を与えたり 結果を表示させたりするのが普通であった。 CUIに比べるとGUIは圧倒的に操作が直観的になることが多いため、 GUIを持たない計算機は現在ほとんど考えられなくなっているといえる。 家電製品などあらゆる機器で計算機やネットワークの機能が利用されるように なりつつあるが、これらの世界では現在でもCUI的なインタフェースが利用されていることが多い。 たとえば テレビのチャンネルを変えるために リモコンの数字キーでチャンネル番号と決定ボタンを押すという方式はCUI的な操作といえるだろう。 ビデオの録画予約にしても電子レンジにしても 直観的でな
ユーザーの声を拾いあげる効果的な『お問い合わせフォーム』 | ランサーズ社長日記
いいね！ 0 ツイート B! はてブ 36 Pocket 2 ベータサービスはユーザー公開してからが勝負である。ユーザーの声に迅速に答え、最初に投入したコア機能部分にうまく「声」を肉付けしていけば、よりよいサービスへと近づいていく。 しかし、そもそもの【ユーザーの声】自体を拾い上げるのも難しい。そこで、今回は「お問い合わせフォーム」に絞って、非常に簡単だが意外と実践されていないいくつかの、ユーザーの声を拾いあげる効果的な『お問い合わせフォーム』を考える。 問い合わせフォームとその周辺のTIPSをまとめてみました。参考になればと思います。 １．お問い合わせフォームを設ける ２．お問い合わせフォームに不要な項目は付けない ３．すべてのページからお問い合わせフォームへリンクをする ４．お問い合わせをmailtoだけで行わない ５．しかし、mailtoのお問い合わせも用意する ６．問い合わせには必
住所欄の番地はなぜ全角？ ネットで買い物をしていて、住所を入力したら「住所欄には全角しか使えません」とエラーがでて腹がたったことありませんか？…
住所欄の番地はなぜ全角？ ネットで買い物をしていて、住所を入力したら「住所欄には全角しか使えません」とエラーがでて腹がたったことありませんか？ 僕はもう「数字=半角」（全角は単なる文字)というのに慣れすぎてるので、いつも番地やマンションの部屋番号はつい半角で入れちゃって毎回毎回エラーになります。どう考えても不親切なんですが、あれって何でなくならないのでしょうか？ 仮説1.半角数字を全角にシステム側で変換するのが難しい(Javaとかだと難しい？？) 仮説2.実はほとんどの人は住所のあとの番地を打つ時点で半角に切り替えないので、全角のままの方が自然？ そもそもあの全角チェックって何のエラー回避なんでしょうか
ユーザビリティ 実践メモ : 初心者ユーザの視線の動き アーカイブ
アイトラッキングシステムを利用したユーザビリティ調査から、パソコンスキルによってページ内の視線の動きが異なることが判明しています。 今回は、パソコン利用歴2年未満で、1日のインターネット利用時間が1〜3時間程度の初心者ユーザへの調査結果をご紹介します。 初心者がページ上部を中心に閲覧していく理由として、以下の初心者ユーザの心理・行動特性が挙げられます。 ページ上部ほど自分にとって必要な情報があると考えている サイト上の情報把握力・選別力が高くないため、どこまで見たかわからなくなってしまうことを避けようと、全体よりも一部を把握しようとする パソコン画面を閲覧することに疲れを覚えやすいため、1ページに費やす時間が短く、ページ下部まで目を通さない（スクロールをしようとしない） このような行動特性から、初心者ユーザの場合、ページ上部に必要な情報がないとサイトからの離脱に繋がる可能性があり
ユーザー・インターフェイスの設計に大切なのはデザイン・ポリシー
何かの「ユーザー・インターフェイス」を決める時に大切なことは、自分なりのはっきりとした「デザイン・ポリシー」を持って、誰が何と言おうと最後までそれをしっかりと押し通すこと。そういう「柱」をしっかりと持たないで作ったものは、往々にして「妥協の産物」になってしまう。 私が常に心がけていること（つまり、私のデザイン・ポリシー）は、「ユーザー・シナリオを８０：２０ルールで切り分け、常に８０の方（つまり多くの人が使うだろう機能）を最優先にした設計にし、２０の方（あった方が良いかもしれない機能、一部の人が必要とするかもしれない機能）は思い切って犠牲にする」こと。 典型的な良い例が、Youtubeを見るためのサービス、Rimo と oreseg。 機能的には、カテゴリー分けはしてくれているし、サムネールから自分で見たいものを選べるし、oresegの方が上である。しかし、「ただだらしなく面白そうなビデオを
ユーザビリティ設計メソッド一覧
週末にも関わらず、今日も自宅でお仕事（ホワイトカラーエグゼンプション実践中ですが何か？）。なのでコレといった記事も書けないのですが、先日のビジュアライゼーション周期表と同じ感覚の「ユーザビリティ設計メソッド一覧表」とでも呼ぶべきものがあったのでちょっとご紹介： ■ UsabilityNet: Methods table ユーザビリティとユーザー中心設計を促進することを目的として、EUからの資金援助を受け設立されたプロジェクト"UsabilityNet"の1コンテンツ。優れたユーザビリティを設計するのに役立つメソッドがテーブル形式で一覧されています： テーブルは「企画立案と実行性確認（Planning & Feasibility）」「要件定義（Requirements）」「デザイン（Design）」「実施（Implementation）」「テストと計測（Test & Measure）」「公開
第9回 どうすればユーザー登録してもらえるか：ITpro
この連載では，エンジニアの視点から使いやすさを考えています。今回はユーザー登録画面などに代表される，フォームを使った入力画面について考えてみたいと思います。 なぜこのテーマを選んだかというと，フォームを介して利用者からデータを受け取って処理をして返すという一連の処理が，ウェブサイトのバックエンドの処理やデータ形式などによって変化しやすく，プログラマやエンジニアの作業がもっとも使いやすさと関係しやすい分野ではないかなあ，と思っているからです。こうした部分はエンジニアが使いやすさに寄与しやすい部分であり，もっと言えば，使いやすさを向上させるに当たって，エンジニアにしかできない事柄がたくさんある部分だってことになると思います。 今回は「ユーザー登録ページ」を例に，フォームにおける使い勝手を考えていきたいと思っています。その理由としてまずは，筆者が勤務する株式会社はてなにもユーザー登録画面があり，
一行あたりの文字数を制限するリキッドレイアウト - 2xup.org
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
ユーザーの目線を考えることの重要性 | ユーザー視点のウェブデザインガイド | Web担当者Forum
第1回 サイト訪問者の目線で考える 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） ウェブサイトがビジネスとして成功するための要素は、コンセプト・デザインから細かな言葉遣いに至るまでさまざまであるが、その中でも「ユーザーにしっかりと（見てもらうべき）情報を見てもらう」ことは常に重要な要素の1つに挙げられるだろう。 いくらデザイン（見た目）がよく、コンテンツが充実しているサイトであっても、ユーザーは驚くほどすぐにサイトから離脱してしまうことが少なくない。この
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 [絵文録ことのは]2006/11/25
このブログの本文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも（狭すぎると困るが）はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/busnews/20070807/8.html
http://youmos.com/news/css_step_menu
youmos.com
ソシオメディア | UIデザインパターン
