DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
[JS]集中して、フォームのテキストを入力できるスクリプト -fullTextArea
テキストエリアにテキストを入力する際、集中してできるようにするスクリプトをwheresrhysから紹介します。
入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」:phpspot開発日誌
入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」 2009年07月24日- Input Limiter 入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」。 通常は、このフィールドは何文字以内などと書いておいて、サブミット後にチェックという方式だと思いますが、Input Limiter を使えば、入力が始まると同時にヒントが現れ、フィールドが何文字制限なのかというのをポップアップしてくれます。 デモページ 横にちょこっと表示するよりも、入力している人にとっては非常に分かりやすい見せ方ですね。 $(function() { $('textarea').inputlimiter({limit: 100}); }); jQueryプラグインということで初期化も上記のよ
クライアントの要望を満たすと、セキュリティ的に問題がある。どうしたらいい？ | ブログが続かないわけ
受託開発で困る部分のひとつ。 1. ログインに失敗したときのメッセージ簡単な例を出してみよう。ID/Password を入力させるようなログイン画面で認証に失敗した場合、「ID またはPassword が正しくありません。」というようなメッセージを出すのが通例だ。当然システム側では、ID が間違っているのか、Password が間違っているのか区別することはできるのだが、親切に「ID が正しくありません。」とか「Password が正しくありません。」とかというようなメッセージは出さない方がいいとされている。これは親切なメッセージを出すと、悪意の第3者になりすましログインのヒントを与えてしまうことになるからだ。適当なID/Password でログインを試みて、親切にエラーメッセージが出し分けされると、その適当に入れたID が存在するID かどうかを判定できてしまう。ひとたびID が判定でき
onsubmit で disable にするやつ
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？ そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
まとめてアップロードもできるすぐれもの jQueryプラグイン「uploadify」 - Ajax活用情報紹介サイト Recently Ajax by H2O Space.
Webブラウザ経由のファイルアップロードといえば、味気ないテキストフィールドに「参照」ボタンでファイルを指定し、送信時に一緒にアップロード・・ こんな手続きが一般的ですが、jQueryプラグイン「uploadify」を使えば、非常にスマートにアップロードができます。 「BROWSE」ボタンをクリックしてファイルを選び、アップロードしたいファイルを全部選んだら「Upload Files」リンクをクリック。すると、プログレスバーのアニメーションと共にアップロードしている様子が見て分かります。 これなら、ストレスなく美しく、アップロードが可能。是非使いたいですね。 JQuery File Upload Plugin Script - What is Uploadify - Uploadify JQuery File Upload Plugin Script - Demo - Uploadify(
複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」:phpspot開発日誌
James Smith ? loopj.com Blog Archive jQuery Plugin: Tokenizing Autocomplete Text Entry 複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」。 利用者に入力してもらいたい項目が多数ある場合、たとえば検索用のＵＩで、複数の検索文字列を投げたいような場合に使えそう 入力ボックスに文字列を入れると、サジェストが現れます。 Enterキーで、候補を１つのクエリにできます。で、続けて入力するとまた、サジェスト。 という感じでアイテムをどんどん追加していけるＵＩになっています。 デモページ 使いどころが難しいものかもしれませんが、使い方を考えれば、色々と使えそうですね。 jQueryプラグインなので実装も簡単です。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQuery
ドラッグ＆ドロップできるショッピングカート | SIMPLE*SIMPLE
これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
リロードせずにファイルアップロードができるフォームを作る『Ajax file upload with jquery』 - Recently Ajax
ユーザーが画像をアップロードできるフォームなどで、「参照」ボタンのあるフォームコントロールを使うことはよくあります。 しかし、なかなか見栄え良くならない上に、アップロードのためにフォームを送信しなければならず、いまいち素敵なフォームになりません。 そこで、「Ajax file upload with jquery」を使えば、素敵なアップロードページを作ることができます。 ライブラリを利用すると、大きなボタンが表示され、クリックするといつも通りファイル指定ダイアログが表示されます。 ファイルを選択すると、画面がリロードすることなくボタン上でアニメーションが展開されます。 利用には jQuery 1.2が必要だとか。素敵ですね。 Ajax file upload with jquery - valums.com
フォームにリセットボタンは必要か - ウェブユーザビリティ.JP
月曜日, 11 月 05th, 2007 | Author: sibsiv | (0) (0) (1) (0) Total: 1 最近は見かける回数が減ってきた気がしますが、フォームのリセットボタンは必要か？について考えてみたいと思います。 この話題は、だいぶ昔にJakob Nielsen氏のAlertboxでも取り上げられていますので、知っている人にとってはいまさらかもしれません。 まず、結論から言うと、「原則的に使わないほうが望ましい」です。 フォームにおけるリセットボタンは、ユーザーの入力を元に戻す手段を提供することを目的としています。 フォームにデフォルトの値が存在し、それが記憶しづらいもの、入力しづらいものであった場合には、ユーザーの処理をやり直すための貴重な手段となります。 しかし、一般的には以下の理由により、有効に活用されません。 多くのフォームのデフォルトが空白である
変更が保存されていない場合に確認ダイアログを出す - ウェブユーザビリティ.JP
木曜日, 11 月 20th, 2008 | Author: sibsiv | (0) (0) (0) (0) Total: 0 SNSやブログで力作の日記を書いて、いざ投稿しようと思ったら間違って×ボタンを押して閉じてしまったり、リンクをクリックして別ページに遷移してしまって、せっかく書いた内容がパーになってしまったというような経験は無いでしょうか？ 昔「フォームにリセットボタンは必要か」でも書きましたが、自分の行った作業が無駄になってしまうと多かれ少なかれフラストレーションが溜まります。毎日更新していた日記でも、「もう一度書き直す元気が無いし、また明日書こう」といって一旦間を空けてしまうと、それからずっと書かなくなってしまったりするかもしれません。 ウェブサイトをサービスとして提供する場合、そのような「利用を止められてしまうきっかけ」は出来るだけ少ないに越したことはありません。 そ
システムとユーザビリティ
サーバサイドでユーザビリティの向上を 今回も引き続き、「使い方」の観点からユーザビリティを考えます。前回（http://www.thinkit.co.jp/article/131/3/）はフォームの主にフロントエンドについての解説でした。今回もフォームの操作に関連する内容になりますが、よりシステム寄りなアプローチを中心に据えます。 システム開発においてユーザビリティを考える上で重要なことは、次の2点に集約されると筆者は考えています。 ・システムの都合をユーザーに押し付けない ・自動化できる処理は機械にやらせる そもそもユーザビリティとは「ユーザーがどれだけ効率的に目的を達成できるか」の指標ですから、システムの都合ではなくユーザー本意の設計がされていてしかるべきです。 また、可能な部分についてはシステムによる自動化を進め、「ユーザーから奪う時間を最小にする」ことが利便性を高めることにつながり
フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」:phpspot開発日誌
Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。 電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。 Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。 そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるＪＳライブラリがjQueryベースで開発され、公開されています。 実装は簡単で、まず必要なＪＳを読み込みます。 <script type="text/javascript" src="jquery
ソシオメディア | @IT連載：ウェブアプリケーションのユーザーインターフェース
@ITの人気連載「ウェブアプリケーションのユーザーインターフェース」。GUI の基礎的な概念の確認から、ハイパーメディアに適したデザイン、設計プロセスについてのメソッド、各種UIコントロールを利用する際に考慮すべきルールなどを順を追って解説しています。（執筆：上野） 第1回：ユーザーにとっては “ユーザーインターフェイス” こそが製品そのもの 第2回：ユーザーが選びやすいフォームのカタチを考えよう 第3回：UCD＝利用者中心設計のプロセスとは？ 第4回：お金を下ろせないATMの画面デザインを考える 第5回：入力情報を預かる責任を果たせる画面デザインとは？ 第6回：「戻る」で入力データが消えてしまうフォームはいらない 第7回：すでに入り口にいるのに、ホームに導くボタンは親切か 第8回：ユーザーが間違えても間違えずともエラーは回避せよ 最終回：売りたいなら、“販売” でなく “購入” ツールを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【レポート】【事例】取引システムのRIA化でユーザービリティを向上させたひまわり証券 (1) 成熟しはじめたRIA技術 | エンタープライズ | マイコミジャーナル
jQuery、長いドロップダウンリストをインクリメンタルに検索するものを書いた - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥
https://www.openvista.jp/archives/note/2008/your-daily-web-has-a-lot-imploements/?2008/your-daily-web-has-a-lot-imploements/
連載インデックス「Webアプリケーションのユーザーインターフェイス」 - ＠IT
IDEA * IDEA
