ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
ボタンのクリックレートが低い、ボタンを配置したページにユーザーが長い時間を費やしている、これはボタンが直感的でなく、分かりにくいボタンが原因かもしれません。 コンテンツにおけるボタンの配置、ボタンの形状、導線に基づいた配色など、ユーザーに直感的で分かりやすいボタンをUXの観点から詳しく解説します。 5 Techniques to Make Mobile Call to Action Buttons Intuitive by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーが分かりやすいボタンとは 1. スキャンパターンに従ってボタンを配置する 2. 形を使って、ボタンをテキストから区別する 3. プログレッシブアクションにカラーを追加する 4. ラベルにあるテキストの太さを変える 5. 優先度の高
言葉の使い方、少しの違いが大きな成果に！WebのUXを劇的に改善するライティングの解説書 -ザ・マイクロコピー
言葉って面白いですよね。言葉を少し付け加えたり、入れ替えたりするだけで、その言葉の印象が大きく変わることがあります。WebページやスマホアプリのUXに特化されたコピーライティングの解説書を紹介します。 思わずクリックしたくなるタイトル、迷わずクリックできるボタンなど、見かけませんか？ ボタンに書かれているラベル、ボタンに添えられたテキスト、これらに使われている文言はほんの少し工夫を加えるだけで、劇的な効果を発揮します。 本書の帯にある「たった2文字を変えただけで、売上が1.5倍になった！」というような宣伝文句に私は懐疑的なのですが、本書には良い意味で裏切られました。 当ブログのビジター全員にお勧めします！ Webページやブログ、そしてスマホアプリなどで使用する言葉、ボタン、フォーム、ナビゲーションなどに使用する文言など、言葉の魅力でWebのUXを改善するためのライティングについて詳しく解説
UI/UX design guide with terms, explanations, tips and trends
A longread aimed to gather all the theory about UX and UI design processes for creating web and mobile application design Originally I shared this guide to Syndicode blog to describe UI and UX design processes we use in the agency. Since this material appeared to be quite informative and guide-alike, I decided to share it. So, you know that design defines the success of most software products. And
知っておきたい「認知的バイアス講座」 *015*【ユニット効果】｜こびー
人は「やり遂げること」に快感を感じる。 ユニット効果与えられたタスクやモノをその量や大きさにかかわらず、とにかく終わらせようとすること人はどんなに小さいことでも達成する体験に満足を感じる。 例えばアプリのオンボーディング画面では登録内容が最小限でになっている。さらに必要な要素が多い場合、ページネーションが入ることで「登録が進んでいる」達成感を与えることができる。 言語学習アプリのDuolingoはこの効果を有効に活かし、継続的にユーザーに学習を促している。 ユニット効果は「食べ過ぎに関する研究」から来ている。コンビニなどに売っている６００mlのペットボトルを飲んだ時、飲みすぎてしまったとは感じない。 実は器の大きさやフォークのサイズを変えるだけで（１ユニットが変わるため）食べる量をコントロールできるらしい。 参考：AlleyDog 参考：Lifehacker
アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語（基本編） | DevelopersIO
こんにちは。2016年もあと3週間を切り、迫る年の瀬にしんみりとしている宮嶋です。 クリスマス？知らない子ですね……。 はじめに 私がUIデザイナーになって5ヶ月、iOSとAndroidどちらの作業をしていてもよく出てきた用語の中でも 覚えておくと周りとの認識の共有がスムーズになるかな？と思うことについて書いていきます。 用語集 UI ユーザーインターフェース（User Interface） 機器やシステムと利用者間で情報をやり取りするための仕組み。 ここではよくアプリやWEBの画面構成として使われている……ような気がします。 UX ユーザーエクスペリエンス（User Experience） ユーザー体験とも言います。システムやサービスを利用したことにより、利用者が受ける影響を 動作や感情、知覚など様々な面から予期したものであったり、実際に利用者が体験したことであったり、定義が広いです。
Adobe XD: putting auto-animate to the test – UX Collective
Adobe recently announced their updated version of Adobe XD at Adobe Max in October and introduced a new feature called ‘Auto-Animate’. As Adobe describes it — Adobe XD has evolved from a basic click-through application to providing you divergent prototyping options such as Time, Tap, Drag, and Voice. Designers can use auto-animate combined with drag gestures to create micro-interactions across art
ウェブデザインの前線に居続ける。小山敬介のデザイナーとしての心構えやで | A.C.O. Journal
Page not found.
ビジネス構造 , 実装方法まで探る徹底したUI/UXトレース分析 〜Ubereats編〜｜yusuke
今年ももうすぐ終わりですね。 昨日が仕事納めで落ち着いたので、noteを更新したいと思います！ 今回は、入社直後の会社の研修でやらせていただいたUI/UXトレース分析についてです。この研修をやらせていただいたことで個人的に凄く知見が増えました。 そこで、会社にnoteで発信していいか聞いたところ快く承諾してくださったのでまとめてみました。 私が就職前にやっていたUIトレースでは、画面のトレースをして、UIデザインの考察で終わっていました。しかし、このトレースではUXの部分や実装する上での知識も学んでいけるようになっています。 分析手順 1. 画面数と遷移を確認 2. コンセプトメイキング 3. リーンキャンパス 4. メイン画面をトレース 5. デバイス間での変化を確認 6. UI/UXの特徴を考察 7. ダウンロード数で現状の人気をチェック 1. 画面数と遷移を確認最近特に
資料ダウンロード｜Goodpatch グッドパッチ
サービスを成功に導く、短期集中型価値検証フレームワーク、デザインスプリントとは？ - グッドパッチ では、さまざまな企業様とデザイン思考をベースとしたプロセスでアプリやWEBなどのUI/UXデザインの制作を行なっています。 その中一つとして、短期間での価値検証を行うDesignSprintをお客様といっし … デザイン思考を組織にインストールできる、デザインプロセスワークショップとは？ - グッドパッチでは、さまざまな企業様とデザイン思考やUI/UXの考え方に基づいたワークショップを実施しています。 グッドパッチの開発現場で培われたプロセスを体験するワークショップを通じて、UI/UXに欠かせないユーザーを中 …
UXデザイナーになるために必要な５つの基礎スキル｜TSUYOSHI KANEKO / GOGEN株式会社CXO
UXデザイナーになろうとしたとき、基礎を得るためにはどのような学習から初めたらいいのでしょうか？ ユーザージャーニーの作り方やペルソナ・シナリオ法のようなフレームワークを覚えたくなるかもしれませんが、それは少し待ってほしいと思っています。 いきなりフレームワークを覚えるのは、掛け算の仕組みを知らないのに九九を暗記するようなものです、「9x9=81」と答えられても、「りんごを９個持った人が、９人いた時のりんごの数は？」と問われて答えられないのでは本末転倒です。 (グラフィックデザイナーで例えるならば、「レイアウトの基礎がないのにフォトショップチュートリアルを覚えるようなもの」と言うとわかりやすいでしょうか？） 以下に、UXを学ぶ際にまず習得してほしい5つのスキルとその参考書をご紹介します。 ロジカルに思考する力UXデザイナーの最初の仕事は、「ユーザーの複雑な問題を噛み砕いて理解する力」です。
魅力的なマテリアルデザインのコードスニペット10選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 マテリアルデザインがWebの世界で大流行しています。フレームワークやカスタムUIキットを使ったマテリアルスタイルの新しいサイトが毎月いくつも登場しています。 しかし、これは悪いことではありません。むしろその逆です。Googleが自ら好ましいデザイン言語であると認めた、お墨付きのトレンドを用いることによって、デザインプロセスを簡略化できるからです。 もしマテリアルデザインに関心があるのならば、これから紹介するコードスニペットはうってつけです。私のお気に入りの中から、10のスニペットを紹介していきます。 レスポンシブテーブル See the Pen Material Desig
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
みんな声をあげないけれど実は不満に思っている「こと」：電車編｜おり
こんにちは、前回バッドデザイン賞の記事を書かせて頂いたUXデザイナーのおりです。 バッドデザイン賞の記事は予想以上の反響に正直びっくりしていますが、これまで首を傾げるようなデザインについて疑問を持ちつつも、意見のぶつけどころが無かったサイレントマジョリティが可視化した結果なのかなと思っています。 さて本題ですが、バッドデザイン賞ノミネート作品のような目に見える「もの」以外にも、みんなが疑問に思っていたり不便だなと思っていつつも、それが当然だと諦めて声を上げすらしないで放置している「こと」、ありませんか？ 「もの」のバッドデザインは比較的分かりやすいですし、使ってみて致命的であればクレームも入るので改善されやすい傾向にあります。では「こと」はどうでしょう？十中八九ほぼ全員がおかしい・不便だと感じていても『まぁこんなもんか』と思って諦め、誰も声をあげないのではないでしょうか。 改善が繰り返され
2017年に注目されたインターフェイスデザインのトレンドを解説
2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。 2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。 Review of Popular Interface Design Trends in 2017 by Marina Yalanska 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 機能的なミニマリズム ブルータリズム 画像に統合されたタイポグラフィ アニメーションするヒーローイメージ オリジナルのイラスト 枠線がないレイアウト さまざまなインターフェースのアニメーション UIに優しいブランディング 単色のUI 進化した暗い背景の使い方 文字を読ませるためのスペース コントラストを
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
ブックマークしておきたい！UIデザインのアイデアに困った時、参考になるサイトのまとめ | コリス
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。 ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。 UI Patterns ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。 ローンチして間もないサイトですが、内容は非常に充実しています。 Collect UI DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。 このサイトもローンチしたばかり、登録数は2,000
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
人にうれしいAIのためのUXデザインガイド（People + AI Guidebook）
CSSで実装出来るフリップカードアニメーション集【回転・反転など、タイルデザインなど様々】
UI Movement - The best UI design inspiration, every day
ZURB U | Library