UI & UX Design Tips by Jim Raptis.
Social LoginSocial login boosts conversion since users can easily join your platform. Then, it's a good practice to put your social login on top of the page and place the email password authentication below. Beware that privacy-oriented people prefer not to use social login then it's always good to have another option for them.
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
サンフランシスコのUXデザイナーが体験した日本から学ぶべきUXとは デザイン会社 ビートラックス: ブログ
筆者は普段btraxのサンフランシスコオフィスで働くUXデザイナーだ。これまでに日本を訪れたことはまだ1度しかないのだが、今年の6月、日本に出張するチャンスが巡ってきた。 Suicaへのチャージからフードトラックでお弁当を買うことに至るまで、日本ではあらゆる購買体験の設計がとても優れていることを感じた。 また、普段生活しているサンフランシスコでの自然で気にすることのないようなやりとりが、いかに自分が「当然物事はこうなるだろう」と期待するメンタルモデルにいかに引っ張られていたかもわかった。 日本での体験はサンフランシスコでよりもはるかにスムーズ日本の人は明らかにサンフランシスコの人とは異なる独自のメンタルモデルを持っている。 滞在中に時々不便な思いをすることはあったが、地下鉄に乗ったりレストランで食事をしたりすることはサンフランシスコでの同じ体験よりもはるかにスムーズで気持ちのよいものだった
検索機能におけるベストプラクティス | UX MILK
Nick Babichはエンジニアであり、ＵＸの愛好者です。テクノロジーに対して情熱をもっています。彼は10年間ソフトウェア業界にて、開発を専門として仕事をしてきました。彼は数々の興味の中で、宣伝や心理学、シネマなどを重視しています。 検索は、ユーザーとアプリ/Webサイト同士の会話のようなものです。ユーザー側は必要な情報を問い合わせ、アプリやWebサイト側は検索結果をもってそれに対応します。 ユーザーは検索をするとき、作業がスムーズに行われることを期待します。そして大抵、１、２回ほど検索した結果の質によって、アプリやWebサイトを即座に評価してしまいます。 検索とその裏側のUIをデザインするとき、考慮すべきたくさんの事柄があります。みなさんが読みやすいように、この記事では検索のベストプラクティスを検索ボックスのデザインと結果ページの配置の２つの領域に分けて紹介しています。 Webサイトご
【UX向上まとめ】UX（ユーザー体験）向上の4つのポイント | ソフトウェアテスト・第三者検証ならウェブレッジ
webサイトやアプリの日常的な利用は、今や多くの人にとって当たり前となっています。競合する情報やアプリが数多く提供され、どのツールを利用するかをユーザーが選ぶことができる時代です。 そんな競争の中、ユーザーから選ばれるサービス・製品を提供するため、ぜひ押さえておきたいキーワードが「UX（ユーザー体験）」です。そこで今回は「UX」とは何かから、UX向上に必要なポイント、効率的にUX向上を行うためのツールをまとめてご紹介します。 ユーザー満足度に直結！UX（ユーザー体験）とは？ ユーザーエクスペリエンスを略した「UX」は、体験や経験の意味を持つ「エクスペリエンス」の言葉通り、サービスや製品の利用によりユーザーが得た体験を指しています。 「アプリの使用により、これまで時間のかかっていた作業が簡単に終えられた」「webサイトのおかげで欲しかった情報が手に入った」といった体験はもちろん、「説明が読み
完璧なテキストフィールドのための14のルール
アプリやウェブアプリケーションは、ユーザーからの入力がなければ何も変化しません。プロダクトデザイナー、開発者、そしてプロダクトマネージャーがそれを理解することはとても重要です。 テキストフィールドは、ユーザーが短いテキストを入力するための基本パーツです。どのようなアプリでも、個人情報の入力を求める小さなテキストフィールドを必ず目にします。 この記事では、テキストフィールドを中心にデータ入力を改善する重要な要素について見ていきたいと思います。ただし、すべてのルールには例外があるということを念頭に置いておいてください。 わかりやすさ わかりやすいテキストラベル ユーザーはどんな種類のデータをフィールドに入力するべきか知りたいと考えます。明確なラベルテキストはユーザーにそれを伝えるメインの手段になります。もちろん、アイコンを頼りにフィールドの意味を理解することもあります。例えば、ユーザーが虫眼鏡
ECサイトでデザイントレンドを取り入れるときの７つのポイント
メディア業界でのデザイン、編集、及び印刷出版物とオンライン出版物のライティングに10年以上の経験を持ちます。スポーツが好きで、サッカーとバスケットボールの旅を計画に多大な時間をかけ、また統計学にものめり込んでいます。 ECにおけるデザインと、デザイナーが実際にやりたいデザインは必ずしも一致しません。 ミニマリズムなどに代表されるシンプルですっきりとしたデザインは、最近のトレンドではありますが、販売サイトではあまり実用的ではない場合もあります。 ECにおけるデザインの最終的な目標は、ユーザーとの対話です。もっと直接的に言うのであれば、ユーザーにより多くの商品を買ってもらうように気を引くことです。 その目的を達成するという点では、最近のWebデザインのトレンドは逆効果になる恐れがあります。 デザイン vs 機能 機能性はECをデザインするときに最重要なものです。オンラインショッピングのサイトは
まいにちUX - 新年からはじめる１DAY１UXの習慣 - | UX MILK
この記事は、 connehito Engineer’s Blog からの再掲記事です。「ゆるく学ぶUXイベント UX JAM ４- UX Girls Special -」にてお話いただいた内容のまとめとなっています。 あけましておめでとうございます！ 新年１発目の記事は、connehitoデザイナーのきよえし( @kiyoe_furuichi )が担当いたします。今年もどうぞよろしくお願いします！ さて、前回の私の記事では「 チーム開発でのおもてなし 」について触れましたが、今回は12月に登壇させていただいたUX MILKさん主催の「ゆるく学ぶUXイベント UX JAM ４- UX Girls Special -」にてお話した内容をまとめてご紹介したいと思います。 UXことはじめ 突然ですが、みなさん 「共感力 (Empathic ability)」 という言葉をご存知でしょうか？ U
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
最前線IT企業のデザイナーたちが参考にしてきた「UI・UXの良書」とは | nanapi [ナナピ]
便利なシステムを生み出し、ユーザーの感動体験に欠かせない「UI/UX」。デザイナーとしてお勤めの方はもちろんのこと、IT業界に関わっている・関心があるなら積極的に学んでいきたい分野です。 今回話をうかがったのは、人気IT企業におつとめのデザイナーの方々。「UI/UX」について学び考える上で、おすすめの書籍を教えていただきました。 ご回答いただいた企業はこちら 1 グリー株式会社 2 GMOインターネット株式会社 3 GMOペパボ株式会社 4 ピクスタ株式会社 5 株式会社ブラケット 6 ヤフー株式会社 7 株式会社リブセンス グリー株式会社 細川菜々恵さん スマートフォン向けアプリ開発を担うスタジオ「Wright Flyer Studios」にて、Art UI UXチームのUI/UXディレクターを務める細川菜々恵さん（以下、細川さん）。UI/UXを学ぶにあたり、おすすめを教えていただきまし
![最前線IT企業のデザイナーたちが参考にしてきた「UI・UXの良書」とは | nanapi [ナナピ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f819e6fb65420c2b090598b7c6ca5eefd67194b/height=288;version=1;width=512/https%3A%2F%2Fp.cdnanapi.com%2Fr%2F2015%2F11%2F05%2F16%2F5dd1174c-ae44-4a73-aa5b-9b981c8e5b1e.jpg)
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか？ 閑歳： 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか？ 閑歳： 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。 データ
Material Designの目指すところとAndroid側の変更点 - クックパッド開発者ブログ
モバイルファースト室の @rejasupotaro です。 今年のGoogle I/OではAndroid One、Android L、Material Design、Android Ware、Android Auto、Android TV、Google Cloud Platform、Google Fitなどの発表がありました。弊社からは私と @sys1yagi と @__gfx__ が参加したので、何回かに分けてGoogle I/Oの発表の内容を紹介します。 今回のテーマはMaterial Designです。内容は公式ドキュメントやセッション動画の要約や参考リンクからの引用を含みますが、筆者の考察や主観も含まれます。 Material Designとは Material Designとは、Googleが発表したビジュアル、モーション、インタラクションのプラットフォームやデバイス間の包括的な
Ptengineウェブ運営All-in-Oneプラットフォーム | ウェブの改善や改善業務はこれひとつで完結
サイト強化はこれひとつ はやく、大きな成果へ ヒートマップ、サイト解析、ページ編集、A/Bテスト、WEB接客、パーソナライゼーション 1つのタグ設置だけで、全てノーコードで使えます。
2時間で作るカスタマージャーニーマップ――実例とともに考える新しい「おもてなし」のカタチ | 顧客の行動パターンを理解するためのカスタマージャーニーマップ入門
カスタマージャーニーマップを使う3つのメリット顧客体験の分析にカスタマージャーニーマップを使うメリットとして、次の3つが挙げられます。 視野が広がるWeb担当者が考える施策は、PCやモバイルなどの媒体に視線が向きがちです。しかし、顧客の行動文脈から施策を考えるようにすると、もっと広い視野で施策を検討できるようになります。PCやモバイルだけにとどまらないリアルとの連携や、普段はあまり思いつかないような施策の立案が可能になります。 複雑なデータが直感的に把握できる顧客の体験は、「目的」「行動」「タッチポイント」「思考・感情」など、さまざまな要素の集合として構成されています。これらのすべてを把握することは非常に困難ですが、カスタマージャーニーマップを活用することで全体を見渡せるシンプルな形に整理できます。 施策立案が考えやすくなるカスタマージャーニーマップは、顧客の体験の中でも特に「行動と媒体」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選