文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
ソシオメディア | あるとよい機能はない方がよい
UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice
ソリッドとアウトライン、認識しやすいアイコンはどちら？
UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率
「大規模なUI改修」を行うとどうなるか
アプリケーションを実装していくと、「大規模なUI改修」に遭遇することがある。 あちこちで見聞きした結果、以下のようなパターンがあるように感じたのでまとめてみた。 （UI改修なので基本的にフロントエンドからみた内容） 機能実装を進めて行った結果、UIの実装が難しくなる。これは一般的に「技術的負債」と呼ばれることが多いが、デザインの負債（UIを置く場所が無くなったり無くなったり、同じ概念のUIが分散したり）である場合も多い。 （ちなみに、デザインの負債は「ダイアログを多用する」とか、「最小画面サイズが大きくなる」とかの形で現れやすい） そして、デザイン負債に対応するために実装の困難なUIが増えるため、技術的負債も高くなる傾向がある。 （サーバサイドの技術的負債がDBの負債に起因する場合が多いことと似ているかもしれない） 技術的負債の解消とデザイン負債の解消を目的とした「大規模なUI改修」が企画
Floating labels are problematic – Simple = Human – Medium
We are often seduced by novel patterns that save space but this pattern is problematic. Here’s why: 1. There is no space for a hintFloating labels start inside the text box leaving no space for an additional hint. 2. They are hard-to-readFloating labels typically have small text, so that as it floats, it takes up a small amount of space. But small text is hard-to-read. 3. They need space to move i
Animated page transitions with React Router 4, ReactTransitionGroup and Animated
Animated page transitions with React Router 4, ReactTransitionGroup and Animated by@martinhaagensli
カード：UIコンポーネントとしての定義
「カード」とは、トランプのカードに似た見た目の柔軟なサイズのコンテナに関連情報をまとめるUIデザインパターンのことである。 Cards: UI-Component Definition by Page Laubheimer on November 6, 2016 日本語版2017年3月10日公開 さまざまな画面やウィンドウのサイズに対してうまく機能するモジュール形式のUIパターンの作成に対する関心がここ数年、高まっている。こうした新しいUIコンポーネントの1つがカードだ。スナップ写真のような表示にする目的は、ユーザーにクリックやタップをさせ、さらに詳細を見てもらうことにある。 定義：カードとは、いくつかの短い関連情報を入れるためのコンテナのことである。トランプのカードのようなサイズと形をしていて、1つの概念的なひとまとまりの情報をリンクし、簡潔な表現で示すことを目的としている。 このカード
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Only Complete Swiss Army Knife - Hammacher Schlemmer
GitHub - emilk/egui: egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
motiontable
GitHub - virtualvivek/react-windows-ui: Build Windows native look & feel apps using ReactJS. Provides a set of accessible, reusable and composable react components that make it super easy to create websites and apps.
コグニカル
The 5 Planes of Content Strategy
Checkbox switch, input element only + CSS, crossbrowser
GoodUI
http://www.ogura.blog/entry/2017/02/28/190245
Android how to display 2 listviews in one activity one after the other
Design Tokens - Lightning Design System