商品一覧ページにおけるページネーションの代替案
無限ローディングや「さらに表示」ボタンを採用することで、商品の読み込み時にスムーズなインタラクションを提供することができる。 Alternatives to Pagination on Product-Listing Pages by Kate Moran on March 6, 2022 日本語版2022年8月4日公開 最近、従来のページネーションコントロールをやめて、インタラクションコストを少し下げることのできるデザインパターンを選択するECサイトが多くなってきた。これらのパターンを採用したほうがいいのだろうか。それは、提供している商品の数による。 従来からのページネーションでは、商品の一覧を複数のページに分割し、ページごとに一定の数の商品を配置していく。そのため、さらに商品を見るには、画面の上部または下部にある「次へ」ボタンをクリックかタップして、次のページに移動する必要がある。ペー
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
The Android/Material Design Font Size Guidelines
The Android/Material Design Font Size Guidelines Erik D. Kennedy · Updated May 29, 2024 You’re reading Font Sizes in UI Design: The Complete Guide. Quickly navigate to other chapters: Intro · iOS · Android · Web · Principles So you’re designing an app in the Material Design style and want to know (roughly) what font size to use? Great. You’ve come to the right place. All font sizes listed below re
Font Sizes in UI Design: The Complete Guide
Font Sizes in UI Design: The Complete Guide Erik D. Kennedy · Updated May 29, 2024 One of the most common questions I receive from beginning UI designers is: what font size should I use for my project? Maybe it’s a website, maybe an Android app, maybe iPhone/iPad. Ever wish someone had compiled all the rules in one place? If you have, dear reader, bookmark the crap out of this page. These are up-t
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
6 Best Practices for Mobile App Search Filtering | raywenderlich.com
However, that is only one piece of the content discovery puzzle. Another huge component is search filtering: the ability to allow users to narrow down a huge set of results through a series of filters. In this article, I’ll share a few UX design patterns for implementing search filtering into your apps, and then share 6 best practices you can use to make a great app search filtering experience. 3
Filtering and Sorting Best Practices on Mobile
Whenever a designer faces the challenge of displaying vast amounts of data to users, filtering and sorting options become inevitable. Filtering and sorting help users narrow down the data that can be displayed according to what they are looking for. Currently I am working on a mobile experience for a large electronics retailer. A good navigational structure, thought-out filtering and sorting will
NativeBase: Universal Components for React & React Native
World’s largest React Native x Modern Web Conference - Berlin, 25 July | Powered by GeekyAnts If you are starting a new project, we recommend usinggluestack-ui. For your existing projects, you can utilize@gluestack-ui/themed-native-base(beta). Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
「らくらくスマホ」をスマホ“現役”世代が使ってみると……
NTTdocomoから登場したシニア向けスマホ、「らくらくスマートフォン3」。通信キャリア各社はそれぞれ、シニア層向けの“専用機”を用意している スマートフォンの普及が進むなか、いわゆる“シニア世代”のスマホ利用意向も増えているといいます。通信キャリア各社はシニア層に向けて、スマートフォンへの移行をスムーズにすべく、それぞれ“専用”の機種を用意しているのをご存じでしょうか。 もともと携帯電話は、どこでも電話をかけられるというコミュニケーションのツールでした。それが時代が進んでいくと、コミュニケーションの主役がメールになり、今ではLINEなどのチャットツールや、SNSサービスの利用がメインになりつつあるのは周知の事実でしょう。 私たちと同世代ならそれで構いませんが、親世代がそのコミュニケーションの輪から取り残されてしまっていないでしょうか。スマートフォンで撮影した写真を親に送ったら、フィーチ
ヤフー、6年ぶりにトップページ刷新--スマデバで「ポータルの進化形」目指す
ヤフーは2014年内に、ポータルサイト「Yahoo! JAPAN」のスマートデバイス版トップページを刷新する。これまでテキストを主体にしていたデザインを、画像を充実させたものに変更。ユーザーにあわせたコンテンツを表示させるパーソナライゼーション機能も改良する。なお、タブレット版の新トップページはすでに7月3日から一部のユーザーに対して試験的に表示させていたが、7月23日にはスマートフォン版でも試験提供を開始した。 トップページの上部に検索窓を配し、その下にYahoo!ニュースの主要記事を表示。そのさらに下には、各ユーザーにあわせた情報（従来の「あなたにおすすめの記事」）の掲載枠「ストリーム」を設置した。またタブレット版は画面左側にヤフーの主要サービスを縦に配置し、その並び順はユーザーが自由に設定できるようにした。 トップページに表示するYahoo!ニュースは画像を大きく扱う。並び順や情報量
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
スマートフォンのコンバージョン率を上げる秘策 from Conversion Conference Boston 2013
[対象: 中〜上級] 僕が所属するセルフデザイン・ホールディングスの海外遠征の一環で、昨年の秋に米ボストンで開催されたConversion Conference Boston 2013に参加しました。 僕が海外カンファレンスに参加したときはセッションレポートをこのブログで公開するのが通常です。 ところがConversion Conference Boston 2013に関しては、帰国後予想以上に忙しかったせいもありレポートをまとめる時間がとれませんでした。 時間がたちましたが、ようやくまとめることができたのでセッションレポートを公開します。 この記事でとりあげるセッションはモバイルサイトのコンバージョン率を上げるための秘策です。 スピーカーは、SeeWhyの創設者、Charles Nicholls（チャールズ・ニコルズ）氏です。 では行ってみましょう。 モバイルにおけるコンバージョンの問題
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
ユーザーテストサービスのUIscope | UIscope
ユーザーがどのようにサービスを使っているのか。 利用シーンが最短1日で届く、 ユーザーテストサービス。 いますぐ無料で試してみる UIscope とは？ 「高品質なユーザーテストを 最も安く・早く・簡単に」 ユーザーがサービスを使っている様子を 動画形式でお届けする、 ユーザーテストサービスです。 ユーザーテストとは
【第2回】仕事情報検索サイト【ジョブセンス】スマホユーザーテスト結果まとめ｜U-NOTE【ユーノート】-イベントまとめプラットフォーム
前回の【第１回】yahoo!天気とウェザーニュースタッチユーザテストの評判が良かったので、第二弾を実施致しました。 週一回実施を目標に頑張っていきます！ さて、今回も弊社のUIscopeというユーザーテストが早く・安く・簡単にできるサービスを利用して、お仕事情報検索サイト『アルバイト/求人情報【ジョブセンス】』のテストを勝手に実施しました。 サイト名：アルバイト/求人情報【ジョブセンス】 URL：http://j-sen.jp/ TOPページは下記のようなデザインです。 必要最低限の情報量にすっきりまとまっており、使いやすさが見て取れるシンプルなレイアウトになっています。明るい水色でキャラクターがいる事により、男女問わず親しみやすいデザインです。 ページ全体画面 全体的にもボタンのサイズも余裕がある為、誤打が少ないよう作られています。 一発検索とエリアから段階的に探す２通りの検索方法が
pickadate.js
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker. Some examples are displayed on Codepen. When using the “classic” theme, it is important to have a wrapper div with position: relative around the source input to ensure the picker is sized according to the input elem
ウィンドウサイズに合わせて自在にJavaScriptを実行する·Response MOONGIFT
ResponseはレスポンシブWebデザインを実現するのに必要な情報を取得できるJavaScriptライブラリです。 レスポンシブデザインを実現する際にスタイルシートだけで全てをこなすのは難しいかも知れません。ウィンドウの幅に応じて最適な見せ方を実現するためにJavaScriptの力が必要ならばResponseを使ってみましょう。 テストの画面です。ウィンドウや画面のサイズが出ています。 ウィンドウサイズを縮めると値がリアルタイムに変化します。 縦のスクロール値も出ます。 各種判定値が用意されています。 ウィンドウサイズによる簡易的な判定も可能です。 もちろんこのページ自体がレスポンシブです。 Responseを使えば現状のウィンドウサイズやスクロール位置などレスポンシブWebデザインを実現するのに必要な情報が一気に取得できます。さらにリサイズなどのコールバックにも対応しているので、表示し
PhoneGapを用いたHTML5/JavaScriptアプリの速度や機能を拡張する「Monacaフレームワーク」、オープンソースで公開
PhoneGapを用いたHTML5/JavaScriptアプリの速度や機能を拡張する「Monacaフレームワーク」、オープンソースで公開 HTML5/JavaScriptで開発したWebアプリは、PhoneGapを使うことでネイティブアプリ化できます。ただし、このネイティブアプリは基本的にHTML5/JavaScriptをラップしたものであるため、見かけや動作速度は基本的にWebアプリケーションのままです。 このPhoneGapを用いて開発されるアプリケーションに対してOSネイティブなコンポーネントなどを追加し、ネイティブアプリケーションと同等の高速な画面遷移やアニメーション、OSネイティブのツールバーやタブバーの利用、メニューボタンや戻るボタンなどのハードウェアキーの対応などを実現する「Monacaフレームワーク」をオープンソースとして公開することをアシアルが明らかにしました。iOSとA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cards Swipe Animation
事例紹介 | 株式会社インフォバーン
