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
モバイルウェブの高速化は成果に直結する、スタバは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
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
モバイルWebサイトの３つの落とし穴と解決策
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 2016年、世界で初めてモバイルによるインターネットの使用率が、デスクトップによる使用率を上回りました。Google UKの調査では以下のように記述されています。 現在、英国の成人の65％がスマートフォンをインターネット利用の主要デバイスとして使用しています。 人々は情報を検索したり、購入したり、サービスに契約するためにモバイルデバイスを使用します。ユーザーの好みの変化は、ユーザーの期待に拍車をかけています。今日、ほとんどのユーザーは、ひどいパフォーマンスに耐えることはできなくなっています。ユーザーは必要な情報がすぐに手に入らないと、（文字通りワンタップして）別のオプションに切り替えてしまいます。 この記事では、ページ読み込みの遅さやサインインの壁、長い購入プロ
モバイル向けWebデザインのための基本的なガイドライン
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 モバイル向けにデザインをするなら、そのデバイスの使われ方とデバイスそのものの特性に配慮する必要があります。モバイルデザインを始める際に役立つ原則はいくつかありますが、これらはユーザーリサーチに取って代わるものではありません。絶対に厳守するべきガイドラインではないのです。 モバイルデザインでは、たくさんのことを考慮する必要があります。その多くは標準的なUXデザインでも踏まえる事項ですが、同時にモバイルデザイン特有のものも考慮しなければなりません。モバイルで提供するサービスを既存のものと統合する予定ですか？ そうであれば、レスポンシブデザインとアダプティブデザインのどちらを採用しますか？ 編注：レスポンシブデザインとは、デバイスに関係なく画面サイズに応じて表示を
覚えておきたいモバイルUXに関する17の統計・洞察
Jeff Sauro氏は、統計とユーサビリティに関するコンサルティング会社である、MeasuringU社の創設者であり、1,000社以上の顧客を抱えています。彼は、統計やUXに関する、20ケ以上の文献と５つの本を執筆しています。 モバイルでのUXは、もはやニッチな分野ではありません。モバイル端末の影響や体験を考慮せずに、ウェブサイトやソフトウェアのUXについて語ることは難しいです。 これまでに、2013年と2015年におけるいくつかの事実と洞察を紹介してきました。 今回は、ネット上の多くのソースから厳選した情報と、モバイルユーザビリティに関する我々の研究をご紹介します。 モバイル端末の利用者の増加 アメリカにおける成人の57%から68%（ソースによる）がスマートフォンを所有しています。この数値は、イギリスでは約64%、ドイツでは54%です。これは年齢によって異なっており、ミレニアル世代では
モバイルデザインで押さえておきたい６つの基礎テクニック
最近のインタラクションデザインの成功例を調べてみると、どれも基礎をしっかりとおさえたものとなっています。これらのデザインには共通して、人間の自然な行動をもとにし、私たちが気づかないところで障壁となるものを取り除いています。ビジュアルの表現やインタラクティブな体験が重視されており、中でも読みやすさ、理解しやすさは特に重視されます。 それでは、最も重要なデザインテクニック、およびそれがどのように機能するかについて簡単に見てみましょう。 効果的なタイポグラフィ サイトまたはアプリにおけるテキストの目的は、アプリとユーザーの間に明確なつながりを確立し、ユーザーが目標を達成できるようにすることです。そして、タイポグラフィはこのインタラクションにおいて重要な役割を果たしています。 テキストのサイズとレイアウトは、画面上でものを読むときの体験に大きな影響を与えます。小さな書体や狭い行間、余白の文字を処理
Is Mobile Affecting When We Read? | Pocket
Printed media used to allow us to read in the places we found most comfortable. When you imagine yourself reading the newspaper it’s probably in your favorite chair, at the breakfast table, or at the cafe with an orange mocha frappuccino in your hand. Unfortunately, as news and media moves online, it moves us away from these places and into our desk chairs. Even worse, consuming content is no lo
モバイルのためのUXデザイン①：情報アーキテクチャ編
Elaineは、13年以上Webデザインに携わっているベテランのWebデザイナーです。ユーザーエクスペリエンスやWebデザインに対する思い入れが強く、執筆活動も盛んに行っています。ロンドンを拠点としたUXデザイン事務所Foolproofで、ビジュアルデザイン部の部長を務めています。 モバイルデバイスは、デザインの全ての工程に影響を与えます。 Elaine McVicar氏によるモバイルのためのUXデザインシリーズ。第1回目は、モバイル用のウェブサイトとアプリケーションにおいて最も人気のある情報アーキテクチャを解説します。 1993年頃に、私の父は大きくて四角い携帯電話を購入しました。私たちは皆新しい携帯電話にわくわくしていましたが、携帯電話が私たちの生活に大きな影響を与えるとは思っていませんでした。数年後に何人かの友人が携帯電話の購入を決めたときも、私はまだ携帯電話を子供だましのおもちゃだ
モバイルユーザーエクスペリエンス：制約と長所
モバイル機器であるスマートフォンには、小さな画面や短いセッション、一度に見られるウィンドウが1つだけ、一定でない接続環境、といったもともとの制約がある。しかし、そうした特徴の中にはスマートフォンでしかできないことを与えることもある。モバイルデザインの原則は、こうした制約や長所を反映したものである。 Mobile User Experience: Limitations and Strengths by Raluca Budiu on April 19, 2015 日本語版2015年5月18日公開 モバイル機器によって、我々の暮らし方や日々の活動の仕方が変わってきている。モバイル機器によりほぼすべての種類のコンテンツにアクセスできるようになっただけでなく、今や、たいていのスマートフォンでは小切手の預金をはじめ、クレジットカードの利用、料理の注文、食料品の支払い、デジタル文書への署名、さらには
モバイルユーザーエクスペリエンスの現状
モバイルユーザビリティについての最新の調査から、モバイルのUXが改善していることが明らかになった。レスポンシブデザインの流行の影響により、サイトやアプリでUI要素よりコンテンツが重視されるようになり、重要なコンテンツや機能がモバイルにも取り入れられるようになってきている。 The State of Mobile User Experience by Raluca Budiu on March 22, 2015 日本語版2015年4月20日公開 モバイルのUXガイドラインについてのレポート第3版では、この分野が過去7年間でどう変化してきたかについて、深く考えさせられた。2009年当時、ニールセン博士はモバイルユーザビリティという言葉は表現として矛盾していると判断した。つまり、ほとんどのモバイルサイトのユーザビリティはひどいものだった。デザイナーがデザイン空間を探索して、さまざまな選択肢を試し
userflowpatterns.com - このウェブサイトは販売用です！ - userflowpatterns リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
LukeW | Designing for Large Screen Smartphones
Designing for Large Screen Smartphones by Luke Wroblewski October 26, 2014 As smartphones continue to get larger but our hands don’t, what kinds of design solutions can ensure mobile interactions remain comfortable, quick, and easy on our thumbs? Here's a few options to consider... Designing for Thumbs In his analysis of 1,333 observations of smartphones in use, Steven Hoober found about 75% of pe
モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル
レスポンシブWebデザインで成功するUI／UXのポイント5つ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に
MobifyのモバイルUXチェックリスト
2013年11月28日 著 25 Top Design Upgrades to Make Your Mobile Revenue Skyrocketという記事で紹介されていた、モバイルUXチェックリストがなかなか興味深かったので、ざっくり訳してみました。適当なので、訳には誤りが含まれている可能性があります。英語が読めるなら、個々の項目の詳細を確認していただく意味でも、元記事のほうを是非ご覧ください。 ボタンやタッチターゲットは44px四方より広い（Buttons and touch targets are at least 44px by 44px.） 本文の文字サイズは14px以上（The font size of body copy is at least 14px.） 本文の行の高さは1.5以上（The line height of paragraph text is at leas
Creative UI Design Examples for Great UX
UX (User Experience) is all those elements and factors related to the user's interaction with a particular environment or device which generate a positive or negative perception of the product, brand or device. UX is subjective and focused on use. The standard definition of UX is "a person's perceptions and responses that result from the use or anticipated use of a product, system or service". The
モバイルサイト vs. アプリ： 来るべき戦略の転換
現在のところ、モバイルアプリのユーザビリティはモバイルサイトに勝っている。しかし、来るべき変化によって、最終的にはモバイルサイトが優れた戦略になっていくだろう。 Mobile Sites vs. Apps: The Coming Strategy Shift by Jakob Nielsen on February 13, 2012 日本語版2012年3月2日公開 企業のモバイル戦略における一番重要な質問とは、モバイルに対してそもそも特別なことをするのかどうか、というものである。企業の中にはモバイルを決して大規模に利用しようとしないところもあり、そういうところは彼らのデスクトップサイトが小さな画面に耐えられるようになることに専念すべきだからである。 しかし、あなた方のサイトがモバイルユーザーに対するきちんとした魅力を持っているなら、2番目の戦略的質問は次のようになる。モバイルのウェブサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルアプリのブーム終焉と、その次に来るもの | アドビUX道場 #UXDojo - Adobe Blog
TechCrunch | Startup and Technology News
