UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
SmartHR UI を中心としたエコシステムのすすめ - SmartHR Tech Blog
こんにちは、プロダクトデザイナーの @uknmr です。昨日に続き SmartHR UI に関する話を書きます。ええ、そう。今日はやや社内に向けて書きます。アドベントカレンダー14日目? 知らない子ですね。我が家にクリスマスの概念はないので、そんなものはありません。 SmartHR UI の目的とは? ブランド観点から UI を揃えたい、一貫したユーザー体験*1を提供したい、という気持ちから生まれた SmartHR UI ですが、本当ですか? 我々は本当に UI を揃えるためだけにコンポーネント集を手入れしていますか? 共通コンポーネント集があれば、それを使い続けさえすれば UI が揃っていくのは必然です。「揃えたい」という気持ちは「誕生した瞬間に達成された」とも言えます*2。 では、何のために自前でコンポーネント集を手入れし続けているのでしょうか? 私はそれを「SmartHR というプロ
マイクロフロントエンド | Yakst
原文 Micro-Frontends – Paul Sweeney – Medium (English) 原文公開日 2019-05-26 翻訳依頼者 翻訳者 meiq 翻訳レビュアー doublemarket 原著者への翻訳報告 1781日前 原文へのコメントで報告済み 編集 あなたの現場には、リビルドに時間がかかって仕方がない、大規模なUIはありませんか？ 複数のチームで作業していてしょっちゅうコードがコンフリクトするなど、インテグレーションに問題が発生することはありませんか？ ひとつのアプリが、あまりにも多くの機能を抱えすぎていませんか？ そんなとき、きっとマイクロフロントエンドが役に立つでしょう。 マイクロフロントエンドは、バックエンドのエンジニアリングにおけるマイクロサービスアーキテクチャの概念を、フロントエンド開発に適用したものです。 しかしUIを複数のフロントエンドへ分割する
登録フォームにおけるパスワード確認用の入力欄は必要か | UX MILK
登録フォームは、Webページの中でもいちばんデザインが難しいもののうちの一つです。あるフォーム要素を入れるか入れないかといったことが、コンバージョン率に影響を与えます。どの要素を入れるか入れないか考えることもデザイナーの仕事です。 パスワード確認はコンバージョン率を下げる たいていのWebクリエイタ―は、パスワードを初めて作る場合にはパスワード確認用の入力欄を表示させなければいけないと考えています。 これは、パスワードを入力する欄がユーザーの入力をマスキングするためです。ユーザーはミスタイプしてもそれに気づきません。パスワード確認で、ユーザーに２回パスワードを入力させることにより、ミスタイプを発見します。 パスワード確認欄は理にかなったものに思えますが、それを表示させることはコンバージョン率を下げる可能性があります。ある調査によると、登録フォームを離脱した全ての人のうち、４分の１以上が、パ
フロントエンドエンジニアが意識しておきたいユーザビリティ14選 - tatsuyankmura
デザイナー向けに書かれたユーザビリティの書籍や記事はたくさんありますが、実装者向けはあまりありません。そこで、これまでに私が実装をして、デザイナーに受けた指摘、配慮すべきと感じた点を中心にまとめてみました。 リンク・機能など 1. リンクや押せる箇所は気づいてもらえるようにする 便利な機能を実装しても、気づかれなくては意味がありません。リンクや押せる箇所などは、色が変わる、動くなどの変化を加えてユーザに気づいてもらえるよう配慮しましょう。 プロバスケットボールリーグ、Bリーグのサイト。タブですが、マウスオーバーしてもポインターが変わらず、反応もないので押せることに気づかないユーザもいるのではないでしょうか。 2. 画面最上部へ戻るボタンの設置 特に読み物系のサイトなど、画面が長くなる場合はページトップへ戻るリンクがあると便利です。スクロールで戻るのは意外と大変で手間がかかります。PCはブラ
CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA
マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ
英語のUIにおける「Your」と「My」の使い分け
英語におけるUIのラベリングでは「Your」や「My」という言葉がよく使われ、UI要素とユーザーの関係性が直感的にわかるようになっています。言わずもがな、日本語と英語では表現は違ってきますが、この英語の使い分けの考え方は、UIをよりユーザーにわかりやすく整理するヒントにもなるかもしれません。 UIはユーザーの身体の拡張という位置づけなのでしょうか？ それとも全く別の立ち位置からユーザーに対して語りかける存在でしょうか？ これは、デザイナーがメニューなどでラベルを付ける際に、悩む問題です。 もしユーザーの拡張であるならば、ラベルは「My（私の）」という言葉が使われるでしょうし、離れた存在ならば「Your（あなたの）」という言葉が使われるでしょう。 正しい言葉で説明文を付けることで、ユーザーは探しているものを見つけやすくなります。同時に、サイトにより集められたコンテンツと、ユーザーにより作成さ
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimisti
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
Prott Blog - 待望の画面遷移図機能をベータリリースしました！😂🎉✨
待望の画面遷移図機能をベータリリースしました！😂🎉✨画面にリンクを設定するだけで、画面遷移図が自動作成されます みなさまから多くのご要望をいただいていた、画面遷移図機能をついにリリースしました！ Prottの画面遷移図機能を使うと、プロトタイプの遷移やデザインがそのまま反映された画面遷移図を簡単に生成できます。そしてプロトタイプを変更すると、画面遷移図も自動的にアップデートされます。 今日からはプロトタイプと画面遷移図を別々のツールで作成する必要はありません！ 機能：遷移線の編集 画面遷移図は自動で生成されるだけでなく、遷移線の表示・非表示を変更することも可能です。これによって、必要な遷移だけを見せることができます！ 編集した内容は自動的に保存されます。 機能：PNGとPDFで書き出し 作成した画面遷移図はPDFとPNGで書き出すことができます。 チームメンバーに共有したり、打ち合わせ
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
Sketchブームに終止符！？ついにAdobeがUXデザインツール「Adobe XD」を公開！ - Tortoise Shell
Adobeが、ついにUXデザインに特化したツール「Adobe XD」を公開しました。 下の動画を見てみてください。 Adobe XD (Preview): Quick Demo これまでのAdobeらしからぬ、大変シンプルなUIですね。 UIデザインのツールといえば… PrototypeモードはUIデザイナー待望の機能 Sketchの運命やいかに 当ブログのおすすめ記事 UIデザインのツールといえば… ところでUIデザインのツールといえば、ここ数年で「Sketch」がブームになっていますね。 最近はデザイナーの求人などを見ていても、東京のIT企業を中心に「Photoshop, Illustrator, Sketchを利用したUIデザインの実務経験を有すること」という表記を目にするようになりました。 Sketchは、確実にUIデザインのツールとして普及してきています。 そんな中で、Adobe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
shadcn/ui
ページネーションのベストプラクティス | POSTD
Progress Button Styles
Open Color
MUI: The React component library you always wanted
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
