サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
優れたユーザーインタフェース（UI）を実現するチェックリスト36項目
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
個人開発で即戦力になるツール・サイトまとめ - Qiita
はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
Obscure Mobile Design Techniques That Boost UX — Smashing Magazine
To inspire mobile designers, let’s look at how some clever design solutions tackle mobile navigation, confirmation dialogs, animations, and gamifying the waiting experience. It’s no secret that smartphone usage has doubled over the last five years, accounting for an estimated 3.8 billion users this year. This tells us clearly where people’s attention is and how important mobile web designers are t
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
【悪いUI・良いUI】発想の転換から打開したアイデアまで【デザイン思考】｜Angry Breakfa$t
※某まとめサイトにてまとめていた記事の転用です BASENAME: 2150782012031271001 STATUS: Publish ALLOW COMMENTS: 1 ALLOW PINGS: 1 CONVERT BREAKS: richtext DATE: 12/06/2018 00:54:50 良い・悪いと思ったデザイン例からデザイン思考、デザインに関した事例などを多数サイトやSNSでの投稿を参考・引用してまとめました。 ■はじめにデザインに関する疑問や、ここでの前提をまずまとめていきます。 ―――デザインとは？ （design）の語源は、デ（de：削る）・ザイン（sign：形作る）である。これはラテン語で「私欲を削り落とし、本質を磨き上げること」を意味する。 出典 なぜゴッホは貧乏で、ピカソは金持ちだったのか? | 山口 揚平 |本 | 通販 | Amazon デザイン（de
Disney Plus: Writing a Better Sign-Up Experience for iPhone
Unsolicited redesign of Disney Plus’ sign-up process by Jeff Shibasaki Part 1: The ChallengeBackgroundDisney+ is the on-demand, subscription streaming service that's home to movies, series and originals from Disney, Pixar, Marvel, Star Wars and National Geographic. ProblemUsers need a way to sign up to Disney+ that’s more benefit-driven and helpful at each step. If the sign-up process isn’t clear,
Muzli - Design inspiration hub
Designers' Secret SourceThe best design inspiration - expertly curated for you.Muzli is a new-tab browser extension that instantly delivers relevant design stories and inspiration to keep you in the loop. More about Muzli Get Muzli for Chrome Dennis SnellenbergFreelance Designer & Developer, Awwwards judge“When I just started with design Muzli helped me to get more reach and followers. The Paralla
The ultimate guide to proper use of animation in UX
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni
みんな声をあげないけれど実は不満に思っている「こと」：電車編｜おり
こんにちは、前回バッドデザイン賞の記事を書かせて頂いたUXデザイナーのおりです。 バッドデザイン賞の記事は予想以上の反響に正直びっくりしていますが、これまで首を傾げるようなデザインについて疑問を持ちつつも、意見のぶつけどころが無かったサイレントマジョリティが可視化した結果なのかなと思っています。 さて本題ですが、バッドデザイン賞ノミネート作品のような目に見える「もの」以外にも、みんなが疑問に思っていたり不便だなと思っていつつも、それが当然だと諦めて声を上げすらしないで放置している「こと」、ありませんか？ 「もの」のバッドデザインは比較的分かりやすいですし、使ってみて致命的であればクレームも入るので改善されやすい傾向にあります。では「こと」はどうでしょう？十中八九ほぼ全員がおかしい・不便だと感じていても『まぁこんなもんか』と思って諦め、誰も声をあげないのではないでしょうか。 改善が繰り返され
「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゲームUIブログ