Archive for » 5 月, 2008 «

火曜日, 5 月 27th, 2008 | Author: sibsiv |  add to hatena hatena.comment (3) add to del.icio.us (0) add to livedoor.clip (1) add to Yahoo!Bookmark (0) Total: 4

最近あまり時間が取れないこともあり、便利なJavaScriptの紹介記事が多くなってしまっているので、自分なりの見解を書いておこうと思います。

JavaScirptを使って視覚的に効果のある演出を行ったり、ユーザビリティを向上させるということに対しては、どちらかと言うと肯定的な考えを持っています。
一方、ブラウザ依存があることや、Webの操作に慣れていない人・ハンディを持つ方などには敷居が高くなるということも、充分に理解しなければいけないと思っています。
便利だから何でも使うというのではなく、何かしらのポリシーを持った上で効果的に使わないと意味が無いものになってしまいます。

最終的な判断基準としては、

  • そのシステムの対象ユーザーとして想定されるペルソナはどんな人か?
  • この機能が使えない(または代替手段を使わざるを得ない)場合に、どれくらいのロスが発生するか?

というようなことを考える必要がありますが、とりあえずの判断材料として、次のどちらかを満たす場合には検討の余地があるのではないかと思います。

  • JavaScriptがOFFでも機能自体は使えるが、ONだとより便利で使いやすくなる
  • JavaScriptを使わない場合と比べて、飛躍的にユーザビリティの高いUIを提供できる

more…

Category: 理論  | Leave a Comment
月曜日, 5 月 26th, 2008 | Author: sibsiv |  add to hatena hatena.comment (9) add to del.icio.us (0) add to livedoor.clip (1) add to Yahoo!Bookmark (0) Total: 10

製品のシリアルナンバーや、郵便番号など、あらかじめ決まっている桁数の文字を連続で入力する場合に便利な「Autotab: jQuery auto-tabbing and filter plugin」の紹介です。

Autotab image

ユーザーに連続した数字や記号を入力させる場合には、ルールに基づいて固まりに分けて入力させると入力がスムーズになります。
そのような、データを固まりに分けてユーザーの記憶や理解を助ける手法のことをチャンキング(chunking)と言います。
入力する際にも「CDケースの裏に書いてあるシリアルナンバーをサイトの入力フォームに書き移す」などの際に短期記憶を使うので、この手法が有効です。

しかし、入力エリアを分けた場合のデメリットとしては、全て入力するための手間が増えるということが挙げられます。
通常の場合には、文字を入力した後に次に入力したい領域をクリックし、また文字を入力するというような作業になります。
少しPCに詳しい人であれば、タブキーを使うかもしれませんが、どちらにしても次の領域に移るのが面倒です。

more…

Category: 実践  | Leave a Comment
火曜日, 5 月 13th, 2008 | Author: sibsiv |  add to hatena hatena.comment (1) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 1

PopBoxはブラウザ上で画面遷移することなく、リアルタイムに画像を拡大・縮小・変形・移動などを行うJavaScriptです。

image

利用するシチュエーションについては「画像やhtmlの内部ウインドウ実装:highslideJS」のような、画像の拡大表示くらいしか思いつきませんが、拡大・縮小されるエフェクトが分かりやすいため、気に入りました。

サンプルを見ているだけでもいろいろできて楽しいですよ。

以下のサイトに詳しい日本語の説明があります。

PopBoxの使い方 /ARK-Web

more…

Category: 実践  | 6 Comments
月曜日, 5 月 12th, 2008 | Author: sibsiv |  add to hatena hatena.comment (4) add to del.icio.us (1) add to livedoor.clip (1) add to Yahoo!Bookmark (0) Total: 6

Proto.IPSはテキスト入力欄(input=text)に選択肢を追加することができるJavaScriptウィジェットです。

image

単純に入力よりは選択のほうが楽ですし、どのようなものを書けばよいのかイメージが付くので、うまく使えばユーザビリティの向上につながると思います。

テキスト入力欄に選択肢をつけるという視点でも便利ですが、今までラジオボタンで入力させていたものをテキスト入力で代用することも考えられます。

よくある以下のような選択肢の場合、サッカー、バレー、バスケットボール以外にしたければ、ラジオボタンで「その他」を選び、右のテキスト入力欄に入力するということを行います。

image

このような場合に、システムで厳密に管理する必要がなく、「その他」が割合的に多くなりそうなものであれば、Proto.IPSのような仕組みを使って代用すると、シンプルに実現することが可能です。

?(2008/5/26追記) ただし、セレクトボックスのような見た目になっているため、自由に入力できることに気づきづらいなど、そのまま使うには問題も出てきそうです。UIの発想としてこんなのもある程度でとらえて貰えるとよいかと思います・・・。

more…

Category: 実践  | Leave a Comment
金曜日, 5 月 09th, 2008 | Author: sibsiv |  add to hatena hatena.comment (2) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 2

少し前のことですが、今年入社した新人さん達に、前提知識が無い状態で自社プロダクトを使ってもらい、色々指摘してもらうということを行いました。

ユーザビリティテスト」と言えるようなかしこまったものでも無いですし、あまり準備もしませんでしたが、何もないと何をどう指摘したらよいのか分からないだろうということで、以下のような事を書いたシートを渡しました。

■ユーザビリティテストとは?
    ・ウェブサイト(製品)の使いやすさ(ユーザビリティ)を改善するために行うテストのこと
    ・テストによって問題や課題を見つけ、それを解決することで使いやすいウェブサイトにしていく
    ・実際に利用する人、状況、目的などを想定してテストを行う(当事者にテストしてもらうのが最適)

more…

Category: 雑記  | Leave a Comment