そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
ユーザーの知識は低いレベルで停滞する
学習というのはたいへんな作業なので、ユーザーのやりたいことではない。その結果、彼らはユーザーインタフェースの探索をすることもなく、ほとんどの機能について知らないままだ。 User Expertise Stagnates at Low Levels by Jakob Nielsen on September 28, 2013 日本語版2013年11月25日公開 コンピュータシステムを長期間利用しているユーザーでも、知っていて使っているのは利用可能なコマンドや機能のほんの一部だけであることは多い。デザインのユーザビリティが優れていれば、ユーザーはシステムを利用しはじめて間もなく、かなり容易に一連の基本機能を理解する。しかし、その後、彼らは伸び悩み、それ以上はたいしてスキルが上がらない。システムを頻繁に使っているユーザーですら、年にわずか1つか2つの新しい知識を身につけられるようになるまでには何
深津貴之氏が語る、「fladdict流・使ってもらえるアプリのUIデザイン」 - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -
スマホコンテンツ市場が成長期、そして成熟期に向かうなかで、競合他社と差別化を図るための要素として、デザインの重要性が高まっているのではないだろうか？ ユーザーに心地よく使ってもらうためのデザイン、ユーザーがワクワクするようなデザインなど、スマホという独特のインタラクティブ性を持ったプラットフォームでは、今まで以上にUI、UCD、UXといった要素が大切になってきた。 そこで今回は、iPhoneアプリ「TiltShift Generator」や「SuperPopCam」など、先進的なデザインのアプリを企画、開発、設計まですべてひとりで担当し、生み出しつづける深津貴之氏から、fladdict流のUIデザインについて共有していただく。
![深津貴之氏が語る、「fladdict流・使ってもらえるアプリのUIデザイン」 - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/fca790190c506ea1816d8178f27433e67f2c6be6/height=288;version=1;width=512/https%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F950.jpg)
Graphical User Interface Gallery
On these pages you will find many screen shots of various desktop computer Graphical User Interfaces and operating systems. Many different people have had different ideas of how a GUI should work and these screen shots show many of the more popular ones. Yes, an actual update: New: Microsoft Windows 11 - Some quick screen grabs of Windows 11. Yuck. New: Apple II Desktop 1.2 Prealpha - Some enthusi
Android Interaction Design Patterns |
Add a pattern! Missing a pattern? We invite you to add your patterns. Read more This is androidpatterns.com, a set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a design solution that has proven to work more than once. Please be inspired: use them as a guide, not as a law.
iOSの分断化がよ〜くわかる写真 - masayang's diary
Engadget: Android の分断化問題がよく分かる一枚の写真 (あほくさいので略) 開発者は別にして、一人で何台もAndroid携帯を保有する人はいないでしょ。なので、ボタン配置で悩むのってのは機種変更の時くらいではなかろうか。むしろ重視したいのは「同じハードの上で走るアプリケーションの操作一貫性」なわけでしょ。 で、iPhone/iPadでケチつけたいのはまさにそこなんよね。 YouTube →Shareボタンがあるので押してみる。 →メールでリンクを送る、ことしかできない。 Bloomberg →この矢印がついたアイコンを押すと... →メールでリンクを送る、ことしかできない。 Telegraph →共有機能はない。というか、見つけることができない。 Reuters News Pro →矢印アイコンを押すと... →メール、Twitter、Facebookで共有できるよ、とい
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
第44回 例示システムの逆襲 | WIRED VISION
第44回 例示システムの逆襲 2010年6月17日 ITハッキングデザイン コメント： トラックバック (0) フィードITハッキングデザイン （これまでの増井俊之の「界面潮流」はこちら） ブラウザ上でのプログラミング Web上のサービスが増えてきた結果、多くの仕事をブラウザ上で実行できるようになってきました。Webブラウザ上での作業が増えてくると、様々なサイトを利用してルーチンワークを行なう機会が増え、ブラウザで上の作業を自動化したくなることが多くなると思われます。 JavaScriptを利用するとブラウザ上の作業の自動化を行なうことができます。例えばYahoo! Japanのページで以下のようなJavaScriptプログラムをブラウザのURLフィールドに入力すると、wiredvisionという文字列を検索文字列としてセットすることができます。 javascript:(functio
iPadのユーザビリティ： ユーザーテストからの最初の所見 – U-Site
iPadのアプリは一貫性に欠け、機能の発見しやすさの点で劣るため、ユーザーの偶然のジェスチャーによって、エラーが頻繁に起きてしまう。あからさまな印刷物のメタファーと奇妙なインタラクションスタイルはさらなるユーザビリティ上の問題を引き起こす。 iPad Usability: First Findings From User Testing by Jakob Nielsen 2010年5月10日 「巨大なiPhoneみたい」というのがiPadをテストするように依頼されたユーザー達が最初に言ったセリフである。（2番目に言ったこと？ それは「うわっ、重いね」だった）。 しかし、インタラクションデザインの観点からいうと、iPadのユーザーインタフェースは iPhoneのUIを大きくしたものであってはならない。 実際、今回の調査から得られた発見の1つは、画面最下部にあるタブバーはiPhone上よりもi
realtimeweb.jp
realtimeweb.jp 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
Flash：99％有害
マルチメディアはウェブの役割のひとつではあるが、現在のFlash技術は以下の3つの点でユーザビリティを損ねる傾向がある。まず、デザインがダメになる可能性が高い。また、ウェブの基本的なインタラクションスタイルからも逸脱している。さらに、本来ならサイトの核となる値打ちを高めるために利用すべき資源を無駄使いしてしまう。 Flash: 99% Bad by Jakob Nielsen on October 29, 2000 ウェブサイトにFlashを利用すると、おおむね99％の確率でユーザビリティにとって病弊となる。めったにないことだが、よいFlashデザインというものも存在する（時にはサイトの価値を高めるのに役立っていることさえある）。だが通常は、Flashを利用するとユーザビリティは低下する。こういったマルチメディア・オブジェクトは、ほとんどの場合、削除した方がいい結果が得られる。 Flash
全てのIT・Web関係者に見つめなおして欲しい「Don’t Make Me Think」 - Feel Like A Fallinstar
”Don't Make Me Think” 訳すと、「いちいち私に考えさせるな！ボケ！」といったところでしょうか。 これは、2001年にSteve Krugが出した書籍の名前なのですが、この「ユーザにいちいち考えさせない」ことを忘れているか、いないかがソフトウェア・Webサイトの勝負を分ける最も大きな分岐点の1つです。 人間は日々の生活の中で、いちいち物を操作したり情報を見るたびにあれこれ考えたくなんてありません。 ユーザをつまらない操作やナビゲーションで考えされればさせるほどストレスは増大し、企業への信用は急激に失われます。 今日は、この”Don't Make Me Think”について、 如何にユーザが考えることを嫌うか 「考えさせない」とはどういうことか を、これまで見てきたユーザ検証の結果なども交えて、少しばかり書いてみようと思います。 あらゆる「無駄な」思考が、ユーザを苛立たせ、
アップル ヒューマンインタフェースガイドライン
アップル ヒューマンインタフェースガイドライン 原文：Apple Computer Inc. 訳：かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer
数年前に「日本語でケアナビ」プロジェクトに加わったことをきっかけに、「カテゴリとタグというナビゲーション要素をどう扱うか」は僕の問題意識のひとつになっています。で、１月ちょっと前に公開され話題になったライフレシピ提供サイト nanapi [ナナピ] のナビゲーションは、この問題に対するひとつの解を示しているように思いました。せっかくなので考えたことを以下まとめてみます。 カテゴリという（階層構造も含む）分類の仕方は、サイト利用者の多くがスムーズに理解できる一般的な概念といえるのですが、タグという概念の認知度はまだまだ「Webに詳しい人は知っている」の域を出ていないのではないかと思います。タグという属性のラベルを使い、複数のタグを使って「AかつB」という条件でモノを絞り込んでいく手法は、とても便利で面白いものです。でも知らない人にとっては、タグを用いたナビゲーションは難しいものに映るのが現状
![nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bfac3b933cc6d724ac32a64f3bcd1b289ae1176/height=288;version=1;width=512/http%3A%2F%2Fwithcomputer.jp%2Fthemes%2Fwc%2Fimages%2Ffacebook%2Fogp200.png)
kishin Design | Macとデザインと美しいモノのブログ | エレベータの「閉」は不用
X8.cn ￥52888 秀吧/小8 8P.cn ￥36888 八品/8铺 5Z.Net ￥45888 五洲 6i.Net ￥36888 乐爱 7H.com.cn ￥8888 七禾 8H.com.cn ￥8888 8号 E51.com ￥28888 医无忧 51P.com ￥48888 我要拍 C7C.com ￥28888 c7c 3BW.com ￥48888 3百万 BW1.com ￥23888 百万 82W.com ￥48888 八二网 82P.com ￥38888 P=PJ 81P.com ￥38888 P=PJ 81K.com ￥38888 K=K3 65D.com ￥38888 D=DF 59D.com ￥38888 D=DF U76.com ￥38888 U=游戏 U71.com ￥25888 游企业 U91.com ￥28888 91系 W61.com ￥38888 W=WN
第36回 手品とインタフェース | WIRED VISION
第36回 手品とインタフェース 2009年10月14日 （これまでの増井俊之の「界面潮流」はこちら） 奇術や手品は人間の錯覚や勘違いを最大限に利用したエンターテインメントです。人間は錯覚や勘違いの固まりですから、突然何かが変化しても気付かなかったり/慣れたものを見逃すことが多かったり/手品の達人は観客の目前でも易々とイリュージョンを見せることができ、観客はそれを見て驚き楽しむことができます。人間の知覚能力や認識能力がたいしたものではないという事実は多くの場合は不利だと思われますが、そのおかげで未熟な技術でも実用的に使えて都合が良いこともあります。テレビや映画は1秒間に30枚以下しか画面を表示していないにもかかわらず、動画がなめらかに動くように見えるのは人間の知覚能力が低いおかげといえるでしょう。 勘違いをしやすいという点は、逆に考えるとイリュージョンを見る能力があるという長所だと考えること
きまぐれ日記: sudo のGUIダイアログはセキュリティ的に大丈夫なのか?
UbuntuやMac OSXを使っていると、権限の高いオペレーションを実行しようとしたときに、ユーザのパスワードを要求するダイアログが起動します。毎回ハイハイと思いつつ入力しているのですが、ふと考えるとこのセキュリティモデルというかユーザビリティー的に大丈夫なのかどうかと思うようになりました。 例えば、インストーラーでダミーのパスワードダイアログを表示させればマルウェア作者はユーザのパスワードを取り放題だし、OSのファイル保存ダイアログをクラックして、適当なファイル保存のタイミングで同ダイアログを出せば、無知なユーザはホイホイパスワードを入力してしまうのではないでしょうか。Webサイトのフィッシングと全く同じ話です。 このダイアログはそもそも CUIプログラム sudo のラッパーにすぎません。しかし、話はそんなに単純ではありません。CUIの場合は、ほとんどの操作が「能動的」なために、su
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhone HIGチェックシート
iPadユーザーインターフェース講座 | fladdict