入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
全日本＜label＞要素マークアップ検定
19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ 20. 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-t
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
手と指の動きを感知して奥行きまで含めた立体的な操作ができる「Leap Motion」は一体何がすごいのかまとめ
コンピューターへの入力装置と言えばマウスやキーボードが一般的ですが、新たなスタイルのデバイスとして注目を集めているのが「Leap Motion」です。Leap Motionは、ユーザーの手と指の動きを感知することでコンピューターを直感的に操作することが可能なデバイスです。マウスが上下左右という平面的な操作しかできないのに対し、Leap Motionは奥行きまで含めた立体的な操作が可能であり、百聞は一見にしかず、まずはLeap Motionを実際に操作したムービーを見ればどのようなものなのかというのがよくわかります。 Leap Motion https://www.leapmotion.com/ Introducing the Leap Motion - YouTube こちらがLeap Motion本体(Leap Motion Controller)。縦30mm、横80mmで厚みはわずかに
企業向けアプリのUIはどう設計されているの？――日立デザイン本部に聞いてみた
企業向けアプリのUIはどう設計されているの？――日立デザイン本部に聞いてみた：「モックアップを何十個も作る」 アプリケーションの使い勝手には、機能と同等にそのインタフェースが影響する。実際のデザイン業務はどのように進められているのだろうか？ デザイナーに聞いてみた。 「デザイン」という言葉に対して、どのようなイメージをお持ちだろうか。記者の場合は、雑誌編集を経験していることもあり、誌面やポスター、パンフレットなどのデザイン（いわゆるDTP）を連想する。もちろんインテリアや、あるいはファッションデザインを想起する人もいるだろう。 こういった分野では、プロダクトに占めるデザインの役割が明示的であり、分かりやすい。だが実際には、われわれが手にし、あるいは目に、耳にするプロダクトは（程度の差こそあれ）デザインされたものであり、そこに意匠を施した組織、人物が存在する。もちろん工業製品においても例外で
RedsAfi.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
Latest topics > Firefoxアドオンの開発を通じて考えるようになったインタラクションデザイン - outsider reflex
Latest topics > Firefoxアドオンの開発を通じて考えるようになったインタラクションデザイン 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « Fox Splitterを作りなおした Main ジム通いを始めた » Firefoxアドオンの開発を通じて考えるようになったインタラクションデザイン - Jun 30, 2011 あかつかだいすけさんのご紹介で、6月27日に慶応大学湘南藤沢キャンパスでインタラクションデザインについての講義を1時間ほどやらせていただきました。その際の発表資料はいつもの通り「高橋メソッド in XUL Returns」で作ったのですが、Remote XULがデフォルトで禁止されるようになったFirefox
どうしていいのかわからなくなるUI - ネコメシCEOブログ
そろそろ利用者のほとんどがこのフォームに出くわした頃であろうと思うが、Evernoteのパスワード変更のフォームがヤバかった。 これ。 なんぼなんでも、いくらやっつけだったとしてもこれはひどい。 「新しいパスワードを選択」っていうラベルも意味がわからないが、「リセット」「ログアウト」ってボタンはさすがに不親切すぎではないか。実行側を緑にしておけばいいってもんではなかろう。 加えて「クリア」とか「キャンセル」とか一緒に並んでたら傑作だったなあ。 ちなみにパスワードリセットに関するサポート FAQを見ると、僕が遭遇したフォーム（3月7日に遭遇）とは違うもので説明がなされている。さすがにアレだったから差し替えたのかもしれない。とりあえず「新しいパスワードを選択」が見出しに昇格しているなあと思った。
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
わかりやすい「エレベーターの開閉ボタン」ってどんなんだろうね？ | fladdict
Twitterで「ボタンと間違いやすいサイン」について呟いたら・・・ いつのまにか「間違いやすいエレベーターボタンのデザインの話」に巻き込まれてたでござる。 面白そうだったので、自分でも考えてみたり。コアコンセプトは以下のような感じ。 安全側にマージンを設ける 表現の為に安全を犠牲にしない 迷ったらコンサバに。チューニング芸で頑張る。 視覚的／言語的にハンディキャップがある人にリスクを負わせない。「ってか、そこは周囲の人で吸収する社会にしようぜ！」という思想を、そこはかとなく埋め込む。 ボタンの文言とか 「開く＆閉じる」や「開＆閉」は、漢字が似てて視認性が悪いのでボツ。「あける＆とじる」や「あける＆しめる」は、「る」が被るのでボツ。「Open & Close」は視認性が悪いし子供がわかんないのでボツ。 で「ひらく」と「しまる」に決定。 「とじる」や「しめる」じゃなくて「しまる」にした最大の
デザイナーに丸投げしちゃいがちなUIというもの - ぼくはまちちゃん！(Hatena)
こんにちはこんにちは！！ 今日はちょっとUIについて思うことのお話をしたいと思います。 ぼくは以前、ゲーム業界にいたんだけど、そこでは、 いわゆるグラフィックデザインを専門にしている人に 「この画面のUIおねがいね」と丸投げする光景をよく見ました。 だけど、見た目が綺麗なデザインを仕上げるのと 使い勝手を考慮したユーザーインターフェイスを設計するのとでは、 考え方も、必要なスキルもまるで違うものだと思う。 情報や機能を、どのようにユーザーに提供するか。 これは画面上の配置や見た目だけの話だけじゃなくって、 情報の階層化や、いつどのタイミングで見せるかといったことまで考えなきゃならない。 たとえばゲームなら、初めからボタンだらけの画面にするのではなくて、 ゲームの進み具合、ユーザーの習熟度に応じて段階的に機能を見せるとかね。 細かい話なら、ボタンを押した時に反応するのか、 離した時に反応する
俺式4.0 :: 方向キーとボタンが無い時代のゲームづくりについて
Created: 2012-12-30 Modified: 2012-12-30 Written by Tatsuya Koyama 0. 最近の僕は何を考えるか この文書は平行世界における 21 歳の僕へ向けたメッセージだ。 この記事では 就職して３年も経つと、人生について色々考えるようになる。 このまま行って最終的に僕は何が作れるのかなーとか、 これから先何年も満員電車で往復する朝晩でいいのかなー、とかね。 まあでも実際は、どうなるか予測のつかない未来のことを考えるのより、 今現在つくりたいゲームのことを考えることの方が僕は好きだ。 そう、どうなるかなんて予測がつかないんだ。 僕はウェブの勉強をしようと思って敢えてゲーム会社を選ばず今の会社に就職したのに、 結局今はゲームをつくっている。 今はまだ、自分がゲームをやるのと作るのを好きだと信じて疑っていないけど、 これから先、ゲームより魅
デザインは“世界観”を築くためにある ― WOW 鹿野護のUI・デザイン論。[1] | キャリアハック（CAREER HACK）
理想的なUIとは何か？ WEB業界でも常に議論の的となるこの問いを、世界にその名を知られるクリエイター集団 WOW を率いる鹿野護氏にぶつけてみた。UIとは“境界”であると定義する鹿野氏。UIの良し悪しは、そこに“世界観があるか”で決まるという。 ビジュアルデザインの新たな地平を切り拓く、トップクリエイター。 東京・仙台を活動の拠点として、ロンドン・フィレンツェなど国際的にも活動の場を広げている、ビジュアルデザインのトップクリエイター集団「WOW」。 その取締役兼チーフビジュアルアートディレクターを務める鹿野護氏に、このところWEB業界のキーワードとしても注目を集め続けている「UIとは何なのか？」を伺おうと、スタートした今回のインタビュー。 しかし話題は、細胞膜、認知科学、さらに禅の思想など幅広い領域を横断しながら、最終的には「今後のビジュアルデザイン」に関するヒントを示唆するような内容と
![デザインは“世界観”を築くためにある ― WOW 鹿野護のUI・デザイン論。[1] | キャリアハック（CAREER HACK）](https://cdn-ak-scissors.b.st-hatena.com/image/square/5bf4f9865fadcf5b64189de92d299f95395f4f8b/height=288;version=1;width=512/https%3A%2F%2Fimage-careerhack.en-japan.com%2Fold%2Fno_content%2Freport%2F20121108_d93a0428-4079-4e0b-85d7-015a388e6387.jpg)
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
開発者が知っておくべき、6つのUIアーキテクチャ・パターン - ＠IT
.NET開発者中心 厳選ブログ記事 開発者が知っておくべき、6つのUIアーキテクチャ・パターン ―― 「matarillo.com」より ―― 猪股 健太郎 2011/12/15 「.NET開発者中心 厳選ブログ記事」シリーズでは、世界中にある膨大なブログ・コンテンツの中から、特にInsider.NET／.NET開発者中心の読者に有用だと考えられるブログ記事を編集部が発掘・厳選し、そのブログ記事を執筆したブロガーの許可の下、その全文を転載・翻訳しています。この活動により、.NET開発者のブログ文化の価値と質を高め、より一層の盛り上げに貢献することを目指しています。 Martin Fowler氏の『GUI Architectures』を訳して公開しようと思ったのだが、FAQページに「PofEAAの続編などは商業出版する予定なので翻訳はしないでほしい」と書いてある。なので翻訳の公開はやめて、「
住所入力フォームなどで使う都道府県の並び順について調べてみました | えすたくぶろぐ
先日、某サイトの住所入力フォームで都道府県を選択する時に、都道府県の並び順がアイウエオ順になっていて驚きました。都道府県の項目の選択肢が「愛知県」から表示されていて最初全く意味がわかりませんでしたし。普段、北海道で始まって沖縄で終わる、北から南に並ぶ順序に慣れているので、かえって自分の住んでいる県を探すのが大変でした。 たぶん、サイト制作者さんはアイウエオ順に並べることで探しやすくなるだろうって思ったのかもしれませんが。なんというか、金額で4桁ごとにカンマが打ってあったり、タッチパネルキーボードでアイウエオ順に並んでいるのを見た時と同じような感覚を持ちました（笑） 他にも今まで見たフォームで違和感を覚えたのは、「北海道、青森県、岩手県…」と一応北から南へ順番に並んでいるんですが、福島県で東北地方が全部出た次は関東になるのかと思いきや新潟県になってたりした並び順とか。緯度を基準にすればそうな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アップルのUIデザイン、革新の兆しあり
宇宙での快適な生活、その先にある「きぼう」
ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 // Speaker Deck
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
