タグ

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

  • そこそこユーザビリティの高いフォームを作った

    そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習&業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです(サーバ側スクリプト

    shokai
    shokai 2014/01/20
    郵便電話の全角文字見えない、市町村への自動移動に気づかない、フォーカス移動後じゃなく入力後に姓名よみ補完、電話番号1ずつ変更できる必要無い、カレンダー選択動かない、パスワード一致しない時の色は赤でいい
  • プレースホルダーがラベルで、コントラストが低く、余白がない入力フォーム

    プレースホルダーをラベルにしたフォームや、コントラストが低いフォーム、余白がなかったりするフォームはそれぞれよく見る。特にプレースホルダーをラベル代わりにするのは、すっきりするので多用されている印象。使いたい気持ちはわからなくもない。けどこの3つが組み合わされると、なかなかひどい感じになるという実例をGoogleで見てしまった。 Internet Explorer 10ではこのような感じになる。ページの読み込み直後にメールアドレスを入力するフォームにフォーカスが当たり、プレースホルダーの文字列がその時点で消える。この状態だと、すぐ下のパスワードというプレースホルダーが、あたかもその上の入力ボックスらしきものに対するラベルのように見えないだろうか? 実際に「パスワードを入れたのにログイン出来ない!」などと言う人はいた。 ラベルのように見えてしまう大きな原因は、その低コントラストでフラットな入

    プレースホルダーがラベルで、コントラストが低く、余白がない入力フォーム
  • 画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記

    ぼくはライフワークとして画面をチカチカさせる活動をしてるのだけど,周りの人にあまり理解してもらえなくて,まぶしいとか,そんな低俗なことをやって,みたいな反応をされる. けど,画面をチカチカさせるだけでも,いろいろと工夫できることとかある.今日はこれまでの活動の振り返りと,それで得たノウハウを共有しようと思います. 過去の活動 これまでに,いろいろ画面をチカチカさせるやつ作っているので,順に紹介します. コード残ってるのは2010年からだけど,一番古いのは中学生のときにRPGツクールで作った画面がチカチカするゲームで,途中まではRPGとして遊べるけどストーリーが進むと画面が高速で点滅し始めてそれ以降何もできなくなるというゲームでした. 古くはポケモンショックというイベントもあったけど,ぼくは関西に住んでて見れなかった. ウェブページをチカチカさせる このbookmarkletを起動するとウェ

    画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記
    shokai
    shokai 2012/11/17
  • 最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート

    ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa

    最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
  • Swype - Buy Automated Instagram Likes, Slow Dripped and Authentic

    BUY INSTAGRAM LIKES SLOW DRIPPED DELIVERY Never worry about your posts being seen on Instagram again. Work smarter not harder. Instantly receive likes to each and every post you make. Real likes delivered at a slow even rate.

    Swype - Buy Automated Instagram Likes, Slow Dripped and Authentic
  • 第38回 ユーザ評価の落とし穴 | WIRED VISION

    第38回 ユーザ評価の落とし穴 2009年12月16日 (これまでの増井俊之の「界面潮流」はこちら) 人間が利用するシステムを作るときは必ずユーザ評価が必要です。開発の初期段階において客観的な他人の目で見てもらうことにより、問題を早期発見することができますし、全くスジが悪いようであれば最初から考え直すこともできます。少人数のテストユーザに評価してもらうことによって劇的に問題点が減ることが知られています。 完成したシステムについてもユーザ評価は重要です。新しいユーザインタフェースシステムを開発した研究者は、学会で論文を発表することによってそのシステムを世に広めるのが普通ですが、論文を発表するためには、識者による論文査読を通過する必要があります。新規でないシステムや有用でないシステムなど、発表する価値が無いシステムは査読の段階で問題点が指摘され、論文として発表されないようになっています。 この

  • 1