最高のPWA設計のためのUIに関する重要な考慮事項

PWAについてまだ聞いたことがない場合は、まずこれに飛び込む必要があります。 「PWAとは何ですか。 プログレッシブウェブアプリについて知っておくべきことすべて」 。 つまり、これらは、従来のものよりもはるかに優れたユーザーインターフェイスとエクスペリエンスを提供することを目的として作成されたWebアプリケーションです。

この記事では、PWAを設計する際のUI（ユーザーインターフェイス）の最大の懸念事項を提案します。 プログレッシブWebアプリケーションに最適なユーザーインターフェイスを使用する方法については、以下をお読みください。

システムフォント

プログレッシブウェブアプリ（PWA）の使用中にユーザーに快適に感じてもらいたい場合は、オペレーティングシステム（OS）に合わせてスタイルを少し改善する必要があります。 プラットフォームごとに異なるメニューとボタンを実装する前に、iOS、Android、Windows用に別々にシステムの優先フォントから始めることができます。

言い換えれば、Microsoft（Segoe）、Google（Roboto）、Apple（San Francisco）、さらにはMozilla（Fira Sans）の努力により、ユーザーのエクスペリエンスが向上し、仕事が楽になります。 結果として、システムフォントは、リストから除外してはならない1つの項目です。

 / * iOS * /
font-family：'Helvetica Neue'、Helvetica、Arial、sans-serif;

/ * Android * /
font-family：'RobotoRegular'、'Droid Sans'、sans-serif;

/* ウインドウズの電話 */
font-family：'Segoe UI'、Segoe、Tahoma、Geneva、sans-serif;

アプリのアイコン

モバイルアプリのデザイナーがアイコンのデザインに特別な注意を払っているのは事実です。 また、PWA（ホーム画面に追加することによる）は他のネイティブアプリの隣に配置されるため、アイコンのデザインについても考慮する必要があります。

これには正当な理由があります。 第一印象は常に非常に重要であり、アプリのアイコンはユーザーに与える第一印象です。 説明すると、ユーザーは自分の携帯電話のネイティブアプリアイコンの中で外観が異なるアイコンをタップするのをためらうかもしれません。

PWAアイコンをデバイス内の他のアプリと融合させるには、Android、iOS、Windowsなどのさまざまなプラットフォームに柔軟に適合し、スタイル要素（形状、背景の有無にかかわらず外観）に対応する必要があります。または異なる色など）。 これを行う良い方法は、PWAのアイコンのデザインを、ネイティブアプリアイコンの視覚的標準と一致させるか、少なくともそれに近づけることです。 インスピレーションの源の1つは、GoogleのマテリアルデザインガイドラインであるGoogleのマテリアルアイコンです。

 おすすめの読み物：PWAとネイティブアプリ：どちらが適していますか？

タッチインタラクション

タッチインタラクションは非常にうまく実装するか、まったく実装しないでください。

これは実際には不可能ではありませんが、「スワイプして閉じる」や「プルして更新する」などの高度なタッチ操作を組み込むことは非常に困難です。 そのような相互作用はユーザーを驚かせると思いますが、これはユーザーが期待どおりに機能する場合にのみ当てはまります。 そうでなければ、あなたは困っています。

PWAに高度なタッチ操作が必要な場合は、実際のデバイスで適切に機能することを確認してください。 通常、これは、素晴らしいreact-swappable-viewsのように、他の誰かが多大な努力を払って開発したこの機能の実装を見つけたことを意味します。

一方、デザインを変更することでこの問題を完全に回避できます。これにより、高度なタッチ操作が提案されなくなります。たとえば、タブの代わりに下部のナビゲーションタブを使用できます。

共有可能なコンテンツ

プログレッシブウェブアプリの場合、現在のURLに簡単にアクセスできないことがよくあります。 したがって、ユーザーが見ているものを簡単に共有できるようにする必要があります。 共有ボタンを統合して、ユーザーがURLをクリップボードにコピーして、著名なソーシャルネットワーキングサイトで共有できるようにすることができます。

この場合の小さなヒント：ソーシャル共有ボタンを実装している場合は、ページのプライマリコンテンツが読み込まれるまで、サードパーティのJavaScriptの読み込みを遅らせるようにしてください。

タッチフィードバック

まず、タップ可能な領域はタッチフィードバックを提供する必要があります。 ボタンまたはタップ可能な領域がタップされたときに、ユーザーはタップが認識されたかどうか疑問に思うままにしないでください。

タップが認識されたことをすぐに明確にすることを目指します。 たとえば、これは、タップされた領域を（明るい）灰色で強調表示したり、マテリアルリップルを表示したり、ページ遷移をすぐに開始したりすることで実行できます。

うまくいったタッチフィードバックの例：

Google I / O 2016 Webアプリは、トークがタップされ、デフォルトの青いタップの色が無効になっている場合、すぐに灰色のハイライトを提供します（デフォルトでは、一部のブラウザは要素がタップされたときに独自のハイライトを表示します。このデフォルトのスタイルは魅力的ではなく、ブランドの視覚的品質）。

次に、スクロール中に要素に触れても、タッチフィードバックがトリガーされないようにする必要があります。

タッチフィードバックを実装するときは常に、ユーザーがページをスクロールするために要素に触れているだけのときに誤ってトリガーされないようにすることが重要です。

間違った時間に与えられたタッチフィードバックの例：

人気のあるMaterial-UIライブラリの初期バージョンは、スクロール中にタッチ可能な要素に触れたときに、タッチ可能な要素に波紋を引き起こしました。

この問題は、ユーザーのタッチ位置が最初の数百ミリ秒以内にいずれかの方向に6ピクセルを超えて移動した場合に、リップルアニメーションを中止することで修正されました。

前のリストページのスクロール位置を保持します

詳細ページから戻ると、前のリストページのスクロール位置が保持されます。

ユーザーが詳細から戻ると、ページは前のリストページのスクロール位置を保持する必要があります。 ユーザーがリストからアイテムを選択してその詳細を表示するときに、タップして戻ると、それらがリストの一番上に表示されないようにする必要があります。 主な目的は、ユーザーがタップしている間、アイテムを押す前と同じスクロール位置でリストページに戻ることです。

結局のところ、押し戻すとユーザーがリストの一番上に戻ると、製品、記事、またはその他のアイテムのリストを閲覧するのが難しくなります。

明らかに、ユーザーにとってナビゲーションをより困難にすると、ユーザーは二度と戻ってこない傾向があります。

過度に「ウェブのような」デザインは避けてください

「クラシック」なWebデザインは、テキスト内のリンクと、ヘッダーやフッターなど、すべてのページで使用できる静的要素に大きく依存します。 実際、これらのデザイン要素はネイティブアプリではめったに見られないため、ユーザーのメンタルモデルと一致させるために、これらを避け、代わりにアプリのようなデザインを使用することをお勧めします。

たとえば、リンクは慎重に使用する必要があります。 ボタンまたはタップ可能な領域は慎重に配置する必要があります。

さらに、ナビゲーションリンクと著作権情報を含む静的なページフッターは避ける必要があります。 ネイティブアプリのデザインからインスピレーションを得て、同様の情報をメニューに移動したり、すべてのページに含めなかったりする方法を確認してください。

暗いテーマ

暗いテーマはここにとどまり、それらは良くなるだけです。

Android開発者によると、ダークテーマには多くの利点があります。電力使用量を大幅に削減できます（デバイスの画面テクノロジーによって異なります）。 視力の弱いユーザーや明るい光に敏感なユーザーの視認性を向上させます。 暗い環境で誰でも簡単にデバイスを使用できるようにします。

ダークUIのアクセシビリティとギラギラした色の感情的な反応のバランスを見つけることができる人は来年トップになります。 あなたを助けることができるGoogleマテリアルからのガイドがあります。

結論は

プログレッシブウェブアプリは、開発者が携帯電話でユーザーに直感的なウェブエクスペリエンスを提供できるようにするため、1時間の必要性があります。 これらの推奨事項を実装するだけで、ユーザーがPWAを使用している間、アプリのような優れたインターフェイスとエクスペリエンスをユーザーに簡単に提供できます。

SimiCartは、PWAに関連するすべての質問とニーズに答えるためにここにあります。 特に、eコマースウェブストア向けの万能で完璧なMagento PWAソリューションを探しているオンラインマーチャントのために、私たちはあなたとあなたのストアに完全で費用効果の高いソリューションを提供します。