サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
藤田晋『ユーザー目線の勘違い』
ネットサービスのプロデューサーや 開発陣と仕事をしていると、 最初はユーザー目線で創っていた 筈なのに、いつの間にか そうではなくなっていくパターンは 大きく分けると二つあります。 （１）収益を稼ぐことを優先する。 （２）運営側が使わせたいサービスを 全面に押し出す。 そして、実感値として圧倒的に（２）の ケースのほうが多いです。 昨日も新規サービスをチェックしていて、 「それは我々が使わせたい機能の ゴリ押しでしょ」 「ユーザーが使いたいものではなくて、 自分が使わせたいんでしょ」 などと指摘したのですが、この話、 今まで本当に数えきれないくらい同じ 話を多くのプロデューサーにしてきました。 「ユーザーに対するデリカシーが お前は足りないんだよ！」 とか、 「おもてなしの心がないのか！」 などと口汚く罵ったこともあるのですが、 大抵の場合、それを指摘された側は、 怒ってる私をみてキョトン
HTML の a 要素に target=”_blank” をつけるのはもうやめよう
HTML の a 要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。 デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。 一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。 これ、以前はよくつかってました。ルールとして サイト内リンクは target 指定なし 外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。 でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。 もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた
Private Presentation
Private content!This content has been marked as private by the uploader.
やってられるか！！蹴りたいフォームの１２要素 | WP-E (仮)
UXとか難しいことはよくわかんないですが こんにちわ！@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる！ 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 （1）要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「？」って感じる。
webデザインの賞味期限(もしくは技術的負債の話)
「技術的負債」という話が、はてな村大字テクノロジー周辺を賑わせている。 技術的負債という(非エンジニアにとっての)隠しパラメータが生産性100倍を起こす- mizchi’s blog 出来る人からみたら超絶無駄なレビューとテストの存在意義 – novtan別館 プログラマの生産性と報酬 – アスペ日記 あたりがにぎわっているエリアだろうか。 私はエンジニアではないから全ての話の理解はできないんだけど。『見えづらい技術的負債が発生し積み重なった結果、誰かが尻ぬぐいをしている』という状況はwebデザイン、特にUIデザインの現場でも同じだなーと思ってる。 糞コードならぬ糞UIデザイン。webディレクター、webデザイナー、コーダー、フロントエンジニア皆が想定しえない余計な工数をとられてしまうUIデザイン。そしてえてして「なんでそんなに工数かかるの？」と言われ、挙句ちゃんと状況説明を上司に怠ると「
優れたユーザーインタフェース（UI）を実現するチェックリスト36項目
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
planBCD - Growth Platform
planBCD is a crowd powered, automatic web page A/B testing service.Watch our 1 minute demo planBCD is the ideal service for all customers who want to improve the performance of their website w/o high price tags. Without using their brain or resources, clients can manage their A/B tests effectively. Only what they need to tell us are 1) pages to improve 2) performance objectives. Then, we can manag
ナビゲーション/メニューのiPhoneアプリデザイン集22選
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
こんなUI/UXはイヤだ
業務中にメモっていた、イヤなUI/UXのメモを公開。（スマホ中心） こう見てみると、多少はチェックリスト的に使えるかも知れないです。各事例の画像が貼られていないのはご勘弁を。 思ってたのと違う。。△ 入力フォームなのにその場で入力できない 見た目は入力フォームなのに、タップするとモーダルで入力画面が立ち上がってしまうと違和感がある。そのままその画面で入力できるようにするか、どうしても別画面を立ち上げる必要があれば、入力フォームをボタンに変えた方が自然なUIになる。 △ 押せそうなのに押せない 立体感があったり囲まれていたりしてボタンのように見えるUIなのに、実際には押すことができないとストレス。遷移先の画面が存在しないのであれば、ボタンに見えるような紛らわしいデザインにしない。 △戻るボタンなのに1つ前に戻らない アプリ内ブラウザで外部サイトを立ち上げる際、画面の上部（ナビゲーションバー）
すてきな入力フォームを作るために調べてみたこと - console.blog(self);
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。 旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
HCD-Net
人間中心設計（HCD）専門家制度は、人間中心設計推進機構（HCD-Net）が実施する専門家認定制度です。 人間中心設計専門家とは 受験応募要領 資格更新手続き HCD認定ニュース 認定者一覧 認定専門家インタビュー
ユーザエクスペリエンス・デザイン・ガイド (User Experience Design Guide) - UXploration
世界で一番売れているカメラをご存知でしょうか？ 人づてで伺った話なので既にご存知の方もいらっしゃると思いますが、正解は Flickr でも利用されているカメラで1位を独占している iPhone です（2013年7月時点）。 （参照：Flickr: Camera Finder） iPhone がカメラ機器として分類されるべきか否かはさておき、その理由を紐解いていくことがユーザエクスペリエンスを理解する上では重要だと考えています。 ユーザエクスペリエンス・デザイン・ガイド（User Experience Design Guide） これは先日開催された JTF: July Tech Festa 2013 で担当させていただいた「ユーザエクスペリエンス・デザイン・ガイド」と題したデベロッパー向けセッションの冒頭でお話させていただいたトピックです。 あくまでも自論ですが、これまでのカメラは「写真を
UI/UXが学べる神スライド7選 | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
UIとUXとの違い、そしてビジネスUXとは何か？
突然ですが、皆さんはビジネスUXという言葉をご存じですか？ 筆者が所属するトゥービーソフト社は韓国でトップシェアを持つUXソリューションプロバイダーです。3年前に日本に上陸後、日本を代表する大手企業を中心に業務システムでUX（ユーザー・エクスペリエンス）を実現してきました。 当社では、UX開発プラットフォーム「XPLATFORM」を開発・販売していますが、既に20,000社を超える法人で稼働するまでに至りました。さらに、昨年開催したビジネスUXカンファレンス2013では、460名もの申し込みを頂き、盛会にて終了することができました。 このように市場ではUXの注目度が向上し、ビジネスも本格的に動き始めたといえます。 そこで、日本のエンジニアの皆さまに情報システム部門の方にビジネスUXの概要、プロジェクトの運営方法、国内外の事例や検討のポイントなどをお伝えしたく、本コラムを連載させて頂くことに
UI/UX設計の教科書、About Face 3輪講の資料を公開します - ninjinkun's diary
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
UX に真面目に取り組める組織づくりについてのスライドを公開しました - つきあたりを右に
と、いうわけで転職しました 本来の職種は相変わらず 「前例の無い事をなんとか形にして」をなんとかするデベロッパとしてですが、 「UX Developer として組織的に UX とかそういうの強くして」というのも兼任しております で、入社して1週間経って、早々と「じゃあ、出来る UX デザイナー/ディレクター/エンジニア を社外から引っ張るとか、採用募るとか、属人性の高い他力本願にしないで、組織として体制を整える方向で行きましょうよ」ということで作ったのがこのスライドです このスライドについて 昨今、割とどのソフトウェア・Webサービス開発の現場でも「UI/UX デザイナーを募集します」と求人出しています。 しかし、求人出してるところって、そもそもそういう人材が不在で、受け入れ態勢整ってない事多いのが実情です。 そして、その後どうなるかというと、その人の属人性に大きく依存した働きのみが期待さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザエクスペリエンス・デザイン・ガイド（User Experience Design Guide）
Like to Death - The FWA