第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点：ITpro
今回は，先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった，使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し，それをプログラミング言語であるところのJavaScriptを使って解決した，というお話です。 その問題とは，「文字の大きさ」に関するものです。 ブラウザには，文字のサイズを変更する機能が用意されています（図1）。例えばInternet Explorer（IE）なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが，「大きく」「小さく」というメニューになっており，より自由に表示サイズを変更することができます。 図1：ブラウザでは文字サイズを変更できる ちなみにOperaは
15Pub » ふりがなをフリガナで書かせるサイトの神経が理解できない
仕事柄、サイトのユーザー登録をすることが多いのだけども、登録のたびに気になることがある。 なんでふりがなをフリガナ（片仮名のふりがな）で書かせるサイトがあるのか。 おそらくシステムとしては平仮名でも片仮名でもかまわないだろうし、どうしても片仮名じゃないとまずいという理由があれば、ユーザーに平仮名で入力させたものをバックエンドで片仮名に変換すればいいだけの話である。 なのにも関わらず、なぜか巷には、ふりがなをフリガナで書かせるサイトがあふれかえっているのだ。 （もしかすると平仮名で書いてもOKにしているサイトも多いのかもしれないけれども、片仮名でフリガナと書いてあれば、やはり片仮名で入力してしまう。） おかげで自宅のATOKは自分の名前を変換すると勝手に片仮名になってしまうようになった。 会社のMS-IMEも同様である。 もちろん「F7キー」で入力中の文字が片仮名にするというテクニッ
シニアはログインでつまづく？！ - Trans
最近、シニア向けのあるWebサービスを構築している。その中で、シニア（特に、団塊世代、もしくはそれ以上）の方が、どういったところでWebサービスにてつまづくのかが少し分かってきたので、自分の備忘録も兼ねてメモしておく。 先に言っておくと、シニアはまずログイン、もしくは新規登録でつまづく。「中に入れない」「何かパスワード間違えているみたいなんだけど」そういった質問が、どんどん寄せられる。このWebサービスを構築する前に、できる限りネット上でシニアのネット行動特性みたいなものは調べてみたが、その多くは「ログイン後」、もしくは「ログインする必要がないサイト」のことだったと、今更ながら気が付いた。例えば、 ユーザビリティ研究所: シニア向けウェブサイト構築のための10のポイント 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から) そう、シニアのネット上の行動特性はある程度研究が進ん
antipop - livedoor Reader と GMal に見る、大量のチェックボックス処理 UI における革新的工夫について
HTML には、複数の項目を選択する UI として、たとえばチェックボックスがあります。こんなやつですね 好きなメンバを選択してください(複数可) 梅田えりか 矢島舞美 村上愛 中島早貴 鈴木愛理 岡井千聖 萩原舞 有原栞菜 これぐらいの量だったら、選択するにせよ解除するにせよ、まぁたいしたことはないかもしれませんが、もし、選択項目が数十あるいは数百あったらどうでしょうか。激しくめんどくさいですよね。 世界的に優れたフィードリーダである livedoor Reader は、フィードリーダとしての使い勝手は当然として、そんなところにも実は気を配っていたりします。 たとえば、LDR のおすすめフィード登録画面「アルファブロガーズ」を見てみると(livedoor ID でログインする必要があります)、アルファブロガーさんのブログが数十個表示されるのですが、これを選択または解除するに際して、チェッ
多くのユーザーは一度に1本しかジュースを買わない ― ＠IT
ユーザビリティのヒント（1） 多くのユーザーは 一度に1本しかジュースを買わない 「自動販売機での不要な動作から考える」 ソシオメディア 上野 学 2006/6/2 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。自動販売機でジュースを買うときの不要な動作から考える。（編集部） 今回からはWebアプリケーションのユーザーインターフェイスの続編の「Tips編」として、ウェブアプリケーションのユーザーインターフェイスをデザインするうえで役立つさまざまなヒントを、少し細かな視点から具体的に見ていきます。 複雑な構成物を作り上げるには、基本となるコンセプトやアーキテクチャといった抽象度の高い部分から考えていくトップダウン式のアプローチと、構成要素の細部から考えていくボトムアップ式のアプローチの両方が必要になりますが、前回までの経験則編はどちらかといえばトップダ
submit ボタン disable 技の罠 - naoyaのはてなダイアリー
昨日のonsubmit で submit ボタンを disable にしてユーザビリティを良くするにはちょっとした罠があって、それに気付かずに使うとはまってしまうかもしれないので、それもちょっと書いておく、というか今日僕自身がはまったわけだが。 罠というのは、type="submit" な input 要素、つまりは submit ボタンを onsubmit ハンドラで disable するまでは良いのですが、このとき <input type="submit" name="foo" value="bar">としていて、foo=bar という値が渡ってくることを期待し、それを内部の処理に使っていると嫌な目に逢う、という話です。先のやり方では input 要素が disable になって GET なり POST なりされるので、押したボタンに対応するパラメータが渡ってこない、というわけです。一
naoyaのはてなダイアリー - onsubmit で submit ボタンを disable にしてユーザビリティを良くする
先の Yahoo! Shopping のアプリケーションで、今度ちょっとやってみようと思ってたことを実装してみた。 http://bloghackers.net/~naoya/ys/app.cgi ボタンを押したときに、そのボタンが disable になります。この方法を使うとボタンが押されて次の処理に入ろうとしているというのが直感的に分かるのと、二重送信防止にもなるということでユーザビリティが改善できます。 仕掛けはすごく簡単で、form の onsubmit ハンドラに、その form に紐づく submit ボタンを disable になるような JavaScript を登録しておくだけ。 function disableSubmit(form) { var elements = form.elements; for (var i = 0; i < elements.length;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
