以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー

Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて

October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやすいキーボードが表示されます。 しかし、この指定方法には副作用もありました。 例えば、type="number" を指定した場合、 <input type="number"> このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。 前者はCSSで後者はJava

無限ローディングや「さらに表示」ボタンを採用することで、商品の読み込み時にスムーズなインタラクションを提供することができる。 Alternatives to Pagination on Product-Listing Pages by Kate Moran on March 6, 2022 日本語版2022年8月4日公開 最近、従来のページネーションコントロールをやめて、インタラクションコストを少し下げることのできるデザインパターンを選択するECサイトが多くなってきた。これらのパターンを採用したほうがいいのだろうか。それは、提供している商品の数による。 従来からのページネーションでは、商品の一覧を複数のページに分割し、ページごとに一定の数の商品を配置していく。そのため、さらに商品を見るには、画面の上部または下部にある「次へ」ボタンをクリックかタップして、次のページに移動する必要がある。ペー

ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。

Threes! by Sirvo LLC (iOS | Android) Threes! の開発者 Sirvo LLC の Asher Vollmer (twitter: @AsherVo) が GDC 2014 のセッションで、「効果的なスマートフォンアプリのチュートリアルを作る方法」を語った。 講演のタイトルは "Prime, Teach, Observe: Tutorializing Innovative Mechanics" チュートリアルが達成すべき役割は以下の 4 つ。 Teach (教える) Comfort (心地よくさせる) Excite (興奮させる) Respect (気遣う) 従ってチュートリアルの各要素が、上記の役割をちゃんと果たしているかを意識して作るべきである。 Tell the player what to do (プレーヤーにやることを教える) Teach

上図は、note会員登録フローで提示される「関心のあるジャンル」選択画面です。今回はこの画面をレビューします。 問題「関心のあるジャンル」として提示されている選択肢の意味、互いの区別が、わかりませんでした： * 「カルチャー」と「エンタメ」の区別 * 「カルチャー」と「ライフスタイル」の区別 * 「カルチャー」と「モノ」の区別 利用のコンテキストスティーブ・ジョブス＆ウォズニアック伝記漫画『スティーブズ #01｜投げ銭版』に投げ銭するために会員登録しようとしました。 思考* このマンガは面白いし、続きに期待しているので、投げ銭したいから、会員登録しよう。 * こんなマンガなら、ほかにも読みたい。ここで選択したジャンルのコンテンツは、今後自動的に推薦されてくるだろうと期待できる。だから「関心のあるジャンル」を選択しておきたい。 * これらの選択肢が「ジャンル」と呼ばれるからには、相互に排他的

今回はnoteの記事公開ボタンをレビューします。 問題 -------------------------------------------- ユーザー・インターフェイスの意味論（セマンティクス）が理解できませんでした。択一式の選択肢で、チェックボックス動作をするかと思ったら、そうではなかったので混乱しました。 画面遷移 -------------------------------------------- 1. 初期状態 「無料ノート」がデフォルトで選択されているように見えます： 2. 「無料ノート」ボタンをクリックした状態 デフォルトで「無料ノート」が選択されているように見えましたが、それを確実にするため、念のため「無料ノート」ボタンをクリックしました。すると、期待を裏切って「有料ノート」が選択されてしまったように見える画面になりました： ※なぜか「無料ノート」の色が黒くなっている

UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice

デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

9. ○その1 - バックグラウンドで生き続ける必要があるアプリ ＜アプリが終了したタイミングでLocal通知＞ - (void)applicationWillTerminate:(UIApplication *)application { UILocalNotification *notification = [[UILocalNotification alloc] init]; if (notification) { notification.timeZone = [NSTimeZone defaultTimeZone]; notification.repeatInterval = 0; notification.alertBody = @"アプリを終了するとログがとれなくなります。再起動しますか？"; notification.alertAction = @"再起動する"; } }

11/28に東京（汐留）で開催された、D2CRさん主催のセミナー「ゲーム以外で！事業として成功させるアプリビジネス最前線！第２回目！」に参加してきました。 本記事では講演で参考になったポイントをまとめたいと思います。クックパッドさんの講演については後日別の記事にてお送りする予定です。 SmartNewsのビジョン ・世界中の良質な情報を集め、それを必要としている人へ送り届ける。 SmartNewsがUIに関して評価をいただいている3つの理由 １、ページめくりによる軽快なザッピング エンタメみたりスポーツみたりと、いろんなジャンルを簡単に切り替えて流し読みが出来る。 ２、独自のレイアウトアルゴリズムでアイキャッチと一覧性を両立 写真が大きく使えるということに加えて、1画面あたりの情報数が多く入る。 ３、形態素解析と長体圧縮を取り入れた見出し組版 文字のサイズが行によって変わる。一番読みやすい

学習というのはたいへんな作業なので、ユーザーのやりたいことではない。その結果、彼らはユーザーインタフェースの探索をすることもなく、ほとんどの機能について知らないままだ。 User Expertise Stagnates at Low Levels by Jakob Nielsen on September 28, 2013 日本語版2013年11月25日公開 コンピュータシステムを長期間利用しているユーザーでも、知っていて使っているのは利用可能なコマンドや機能のほんの一部だけであることは多い。デザインのユーザビリティが優れていれば、ユーザーはシステムを利用しはじめて間もなく、かなり容易に一連の基本機能を理解する。しかし、その後、彼らは伸び悩み、それ以上はたいしてスキルが上がらない。システムを頻繁に使っているユーザーですら、年にわずか1つか2つの新しい知識を身につけられるようになるまでには何

どの機能へのアクセスかに合わせて、以下のKey名を 〜-Info.plist に追加。 (2016/10/01 追加) 現在の Xcode でプロジェクトを新規作成した場合には Info.plist というファイル名で作成されます。 (追加ここまで) 値に指定した文字列が確認のアラートの文章に差し込まれる。 機能 Key名 対応OSバージョン Bluetooth NSBluetoothPeripheralUsageDescription iOS 6.0〜 カレンダー NSCalendarsUsageDescription iOS 6.0〜 カメラ NSCameraUsageDescription iOS 7.0〜 アドレス帳 NSContactsUsageDescription iOS 6.0〜 位置情報 NSLocationUsageDescription iOS 6.0〜 マイク NS

プレースホルダーをラベルにしたフォームや、コントラストが低いフォーム、余白がなかったりするフォームはそれぞれよく見る。特にプレースホルダーをラベル代わりにするのは、すっきりするので多用されている印象。使いたい気持ちはわからなくもない。けどこの3つが組み合わされると、なかなかひどい感じになるという実例をGoogleで見てしまった。 Internet Explorer 10ではこのような感じになる。ページの読み込み直後にメールアドレスを入力するフォームにフォーカスが当たり、プレースホルダーの文字列がその時点で消える。この状態だと、すぐ下のパスワードというプレースホルダーが、あたかもその上の入力ボックスらしきものに対するラベルのように見えないだろうか？　実際に「パスワードを入れたのにログイン出来ない！」などと言う人はいた。 ラベルのように見えてしまう大きな原因は、その低コントラストでフラットな入