[B! UI] ittancmのブックマーク

ittancm id:ittancm

UIに関するittancmのブックマーク (6)

IDEA * IDEA
ドットインストール代表のライフハックブログ
ittancm 2009/01/15
UI
リンク
IDEA * IDEA
ドットインストール代表のライフハックブログ
ittancm 2008/12/17
UI
リンク
サイトのUIに関するテストを手軽に作れる『Five Second Test』 | 100SHIKI
サイトを作ったら試してみたいのがFive Second Testだ。このサイトではあなたが作ったサイトのスクリーンショットをアップするだけで、簡単なUIに関するテストを作ることができる。テストを受ける人はアップされた画像を5秒間だけ見せられて、そのあとに何を覚えていたかを書かされる、という仕組みだ。このテストを実施することで、あなたのデザインで何が印象に残るか、もしくは残らないかを知ることができるのだ。自分が意図したとおりにユーザーに情報が伝わっているか、きちんと確かめるのは大事だ。こうしたテストはお手軽でいいかもしれないですな。
ittancm 2008/10/04
webサービス

test

ui
リンク
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;
ittancm 2008/03/05
開発

UI
リンク
クリック後の説明文を凄くオシャレに表示できる「mooSlide」:phpspot開発日誌
mooSlide - ajax based slider - lightbox replacement The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common "lightbox" that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox. クリック後の説明文を凄くオシャレに表示できる「mooSlide」。 LightBoxの一種になると思うのですが、表示の仕方がかなりオシャレなmooSlide。クリックしたところ、ページ下部からブロックがアニメーションして説明が表示されます。仕組みはLightBoxでも、みせ方次第でこれだけ印象って変
ittancm 2008/02/21
UI
リンク
タブの制作で注意すべきこと (ユーザビリティ実践メモ)
このエリアで迷ったユーザの典型的な行動例を以下(1)から(4)のステップでご説明します。（下図とあわせてご覧ください。） (1)　初期状態の「タブA」から、「タブB」をクリックした。 (2)　「タブB」内に表示された「リンク４」をクリックし、ページ遷移した。 (3)　遷移先ページを閲覧した後、(2)で見えていた「リンク５」や「リンク６」も気になっていたため、ブラウザの「戻る」ボタンをクリックした。 (4)　戻ったページでは、タブが初期状態の「タブA」になっていたが、ユーザは気付かずに「リンク１」や「リンク２」をクリックしてしまった。 (4)の場面で、ユーザはさきほど選択した「タブB」の内容が表示されていると思っていたため、実際にどのタブが選択されているかということに注意を払っていませんでした。上記例のような混乱を防ぐためには、切り替えたタブをページ遷移後も記憶するように制作した方が良いで
ittancm 2008/02/20
UI
リンク
1