モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
Modern iOS Navigation Patterns · Frank Rausch
This page collects all the familiar navigation patterns for structuring iOS apps, like drill-downs, modals, pyramids, sequences, and more! Think of it as an unofficial bonus chapter for Apple’s Human Interface Guidelines, written by someone who cares deeply about well-crafted user interfaces. A typical iOS application has a fixed architecture—often a hierarchical tree with multiple levels. This ri
The large, small, and dynamic viewport units | Blog | web.dev
The large, small, and dynamic viewport units Stay organized with collections Save and categorize content based on your preferences. The viewport and its units To size something as tall as the viewport, you can use the vw and vh units. vw = 1% of the width of the viewport size. vh = 1% of the height of the viewport size. Give an element a width of 100vw and a height of 100vh, and it will cover the
Designing Navigation for Mobile: Design Patterns and Best Practices — Smashing Magazine
When designing navigation on mobile, we don’t have to rely on slide-in-menus or nested accordions. We can also use the curtain and billboard design patterns, and show multiple levels of navigation at once. When it comes to complex navigation on mobile, we often think about hamburger menus, full-page overlays, animated slide-in-menus, and a wide range of nested accordions. Not all of these options
グーテンベルグの法則から考えるモバイルのCTA
ユーザーがどれだけ速くタスクを完了できるかは、ボタンの置き方次第で大きく変わります。タスクが速く完了すれば、より満足できる体験が生まれます。もしそれを望むのなら、ユーザーがそこにあってほしいと思う場所にボタンを置くべきです。 これは、あなたが使うであろうすべてのボタンの配置についての包括的な分析です。ユーザーが時間を無駄にすることが無いように、どの置き方があなたのアプリに最適なのかを学びましょう。 ユーザーは行動を起こす前に、画面をざっと見なければなりません。画面上にあるコンテンツが、どのアクションを行うべきかについて決断するための情報を与えるのです。画面を見終わるとすぐに、CTA（Call to Action＝行動喚起）が現れなければなりません。画面を見終わったとき、ユーザーはどこを見ているでしょうか？ ユーザーの視線は、左上の隅から右下の隅までジグザグに移動することがわかります。著名な
モバイルウェブで優れたユーザー エクスペリエンスを強調表示する
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative? — Smashing Magazine
As our phones are getting bigger, we need to adjust how we build and design our websites. Is there something to learn from app design and tap bars? Can we fix the mobile navigation of our websites to have a lower interaction cost? In this article, we’ll find out. Whenever you hear of “mobile navigation”, what’s the first thing that comes to mind? My guess would be the hamburger slide-out menu. Thi
モバイルアプリに最適なボタンサイズと間隔とは
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な
モバイルデザインのために再確認すべきヒューリスティック原則
Jordanはビジュアルコミュニケーションに注目し、戦略やサービスデザイン、UX/UIを担当するアメリカのデザイナーです。 Jacob Nielsen氏は多くのデザインパターンを収集し、人間とコンピューターのインタラクションにおけるユーザビリティの構築を指導していました。そして1994年には、それまで学んできたことをユーザビリティヒューリスティックに反映し、それを用いた評価の原則を集めて公開しました。それから25年が経ち、コンピューターがスマートフォンに変わった現在においても、Nielsen氏の唱えた原則はいまだ揺るぎません。 人間中心デザインによってユーザーの重要性に対する認識が高まり、それに応じてデザインプロセスも形を変えてきました。Nielsen氏の唱える原則はあらゆるスクリーンにおいても普遍的ですが、モバイルデバイスの人気が高まり続ける現在、強調すべきはモバイルインターフェイスです
「Windows 10 Mobile」12月10日にサポート終了「AndroidまたはiOSへの移行をお勧め」とMicrosoft
Windows 10 Mobileについては、2017年10月にWindows 10担当副社長（当時）のジョー・ベルフィオーレ氏が「新機能や新端末の開発には注力しない」とツイートしたことで、終了を予告していた。その後、2018年1月にWindows Insider Programチームのシニアプログラムマネジャーであるブランドン・ルブラン氏がプレビュー版の新ビルド提供終了をツイートした。サポート終了については、米Thurrotが18日に最初に報じた。 12月10日以降、Windows 10 Mobileではセキュリティアップデート、サポート、オンラインテクニカルコンテンツの更新がなくなる。最終日までサポートされるのはバージョン1709。 2020年3月10日までは、デバイスバックアップの作成が可能だ。写真のアップロードや既存のデバイスバックアップを使った端末の復元などの一部のサービスは、少
モバイルウェブの高速化は成果に直結する、スタバはRewards登録が65%⬆ #ChromeDevSummit
[レベル: 中〜上級] この記事では、昨日に続いて Chrome Dev Summit 2018 のセッションをレポートします。 セッションタイトルは “Get Down to Business: Why the Web Matters” 、モバイルウェブ、特にモバイルウェブの高速化が重要な理由をケーススタディとともに解説するセッションです。 モバイルウェブとスピード 回線速度が速い 4G がまだ普及していない国、地域がある。 ※暖色になるほど、4G が普及していない パフォーマンス改善で成果を上げたサイトが世界中に存在する。 wayfair: CV 10 % ⬆ ClickBus: 売上 15 % ⬆ Stylelight: クリックアウト CV 6.5 % ⬆ JD.ID: CV 43 % ⬆ LinkedIn: 求人応募 4 倍 ⬆ Spotify 事例 2107 年の時点では Sp
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
スマートフォンのディスプレイ巨大化に伴う、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まで
ユーザビリティを考慮するためのタブレットファーストという考え方 – YATのblog
近年スマートフォンでWebサイトを閲覧・利用する人が増え、制作現場ではモバイルのユーザビリティに着目したモバイルファーストが広く認知されました。 Webサイト制作ではレスポンシブウェブデザインが浸透しているため、スマートフォン向けのデザインをベースにタブレットサイズ、PCサイズにそれぞれ調整しながら最適化していくのが基本的なデザインフローです。 現場で困るのは、モバイルファーストを単にスマートフォンのデザインを先に作ることと捉えてしまい、効率化を図った結果スマートフォンのデザインができたらそれを次の工程となるコーダーに渡し、それのコーディングに平行してPCやタブレットのデザインを行うといった無茶が発生することです。 このやり方は一見効率的に見えるのですが、実際にやってみると現場では混乱を招いた結果、結局ムダな工数が発生するということになりかねません。 なぜなら、モバイルファーストであればス
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1｜Takumi Hasegawa (unshift)
基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じることはないのかなと、疑問に思いました。 結局はデザイナーさんと実装者との間で、あらゆる画面サイズにどのように対応するかのルールがしっかり共有できればいいですが、口頭や文字だけだったりすると、なかなかわかりにくかったりするものです。 なので、デザインデータに入れてもらったほうが、実機に近い形での見え方がイメージできるのでデザイナーさんもエンジニアも幸せになれるのでは、と思いました。 スマートフォンの画面サイズはさまざまですが、基本的にはiPhoneを基準につくるデザイナーさんが多いかと思うので、少なくとも多くのユーザを占めるiPhoneの見え方は担保できるかな、という感じです。 まぁそんなデザイナーさんの手助けになればと思いま
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mobile Accessibility Target Sizes Cheatsheet — Smart Interface Design Patterns
Screen Sizes
Mobbin - The world’s largest mobile & web app design reference library
最近の10～20代は欲しい情報を都度、検索しない。若年層の中で流行っている情報収集術とは？｜【公式】ModuleApps 2.0
