未來的 Mobile Web — PWA (1)

Miss A
8 min readJun 14, 2019

--

Progressive Web Apps The Future of the Mobile Web.

本文是來自 awwwards 的文章:Progressive Web Apps The Future of the Mobile Web.

我將自己翻譯的內容紀錄下來,一方面自我練習閱讀英文文章,並紀錄下閱讀時的想法。

前言 — p.3

近年來,人們使用移動裝置的時間已經是桌上型裝置的兩倍,而在許多國家,移動裝置是他們使用的唯一設備。 這已不是新聞,在你的網站分析中也會看到此趨勢。

隨著這種使用趨勢的蓬勃發展,使用者需要在 native app 和 mobile website 上保持良好的體驗,並依據他們的期望順暢地於兩者間切換。因此開發者與設計者開發 native app 時也需要和 mobile website 一樣依據各種不同 OS 開發各種版本並維護它,而這個過程需要大量的時間和精力。當 website 和 app 的體驗不同,用戶會感到沮喪。 難道沒有更好的辦法嗎?

現在有了 Progressive Web Apps,此概念最初於 2015 年提出。PWA 是採用現代技術讓「網站」擁有「類似 App」的使用體驗。本電子書探討了現在的mobile web 的使用體驗,以及為什麼 PWA 能提供革命性的解決方案來改善體驗它。我們將說明 PWA 提供的獨特功能、如何實作、以及如何評估結果。

Great Mobile Expectations (by Jenny Gove) — p.4

移動裝置的運用

消費者希望移動裝置滿足他們對購物、通信和娛樂等日常行為的需求,設計者與開發者的工作就是滿足這些需求的體驗。要做到這一點,移動體驗需要是快速的、可安裝的、可靠的和吸引人的,並且應該在安全及無障礙的環境中運行。

在過去幾年中,用戶使用的數位平台發生了巨大變化,現在移動裝置比桌上型裝置更加普遍。ComScore 報告提出,在大多數國家/地區,用戶花在移動裝置的時間是桌上型裝置的兩倍多。但桌上型裝置仍然很重要,仍持續為零售、入口網站、商業和金融、旅遊、汽車和教育貢獻 50%或更多的時間。然而,移動裝置用戶對某些類別擁有更大的影響力,並且使用最能滿足其需求的平台。

除此之外,第一次上網的人口大多來自 mobile。亞太地區的使用者,如印度和印尼等國家,僅通過 mobile 使用網路。2000 年代使用 mobile 比其他幾代人更多,儘管其中的採用率正在顯著增長,老一輩也是如此。

使用 mobile 時大多時間都是在使用 native app,ComScore報告提出,使用 mobile 時有 80%的時間都在用 native app 而 mobile website 則有 20%。但當時的 native app 非常有限 — 主要是社交網絡,音樂,遊戲和娛樂。 就觸及範圍而言,mobile website 往往會吸引更多的受眾:根據 ComScore 的數據,mobile website 每月獨立來訪者數量平均比 native app 多 2.2 倍。

User Research: Mobile Web and Native Apps — p.7

Mobile web 存在的重要性不容小覷,消費者經常轉往 Mobile web 來研究和探索他們的選擇。事實上,Mobile web 是搜尋的主要方法,因為 Google user research 的參與者說:

如果你覺得「我知道我有點想要這個」,那麼去 Mobile web 搜索可能更容易找到想要的東西… 我覺得 Mobile web 比 Native app 有更多的產品和內容可供選擇。

因為他們被認為擁有最好的搜索成效,所以用戶經常使用搜索在各種移動網站上找資訊,搜尋替代方案、價格和重複觀看。

Tip: Mobile websites 擁有搜尋排名與 SEO 的優勢。
Google’s Search Engine Optimization Starter Guide

雖然消費者使用 Mobile Web 來搜尋,但他們通常認為 Native App 是更好使用的。Native App 從一開始就是為 Mobile first 而創造的,它以用戶目標為主進行設計,並提供更流暢的體驗。雖然一些 Mobile Web 從一開始就設計得很好並且更有用,且設計不優的網站可能在搜索結果中排名較後面,但用戶仍會遇到許多提供糟糕體驗的網站。累積下來可能導致用戶得到「Native App 比較好用」的結論。

Native App 真的做到 user-friendly, 你可以自由的開啟使用和離開!

Tip: 去看看 Google’s Material Design Guidelines and components 創造出好的使用體驗,在 Native App 和 Mobile web 開發一致性的外觀。

由於 Native App 通常專為特定任務而設計,專門用於提供最重要的功能,因此與 Mobile Web 相比,感覺更加簡單且目標導向:

根據我的經驗,Native App 的功能少於 Web。因此,它們非常精簡並為達到最終結果量身定制整個使用流程。Native App 的功能較少,因為他的目標是盡快讓您完成任務。

Native App 通常允許用戶存儲付款資料、帳戶資料、設定偏好選項的功能,這讓購買流程更輕鬆、快捷。因此,它們被認為更加的個人化:

一個應用程序是以您為中心設計的。它有您的訂單歷史記錄方便查詢。它可能還有某種個人化的設定功能。

Tip: 以簡化登入與付款流程來減輕消費者的負擔。為您的移動網站提供更快捷的登錄體驗 (one tap sign-up and auto sign-in on websites)或 Native Android App(using Google sign-in)並使用 Google Pay 在 Native app 和 Mobile App 上實現無縫支付體驗。

Native App 也被認為是更好搜尋及進入使用的:

因為 App 在我手機桌面上,我知道它看起來像什麼樣子,很容易按下並進入。至於網站,除非加入書籤,而有時候我忘了做,這時我就需要記得網址或者去 Google.

Tip: 導入 progressive web app 技術,讓使用者從桌面進入你的網站,就像是他們使用 Native App 一樣 (see Add to homescreen).

使用者覺得 Native Apps 在初次使用感覺較快速:

我認為 Native App 幾乎比 Web 更快。

Tip: 使用 AMP (Accelerated Mobile Pages) 為網站建置開啟更快速的 landing pages.

另一方面,Native App 使用裝置的儲存空間,代表使用者只會安裝他們經常使用的 Apps:

我傾向不下載 App 除非我真的很需要它。我沒有我不常用的 App。如果我要做的事情是一次性的,我會使用網站。App 比較像是我會一直不斷使用的服務。

不管是 Website 或者 Native Apps 都要讓使用者體驗是無負擔的。廣告在使用流程上的干擾或者不重要的推播都會造成糟糕的使用體驗。使用者放棄使用 Web 的原因包含了擾人的廣告,他們有可能直接關閉推播通知:

我不想要滑過廣告,或者等待廣告載入,這些都會影響我手機的效能,我不想花時間在這上面。

如果所有事情都用推播通知我,那就代表沒有事情是重要的了。

Tip: 一個好的廣告體驗可以運用 Coalition for Better Ads, 和運用 Material Design guidelines 來傳送好的推播給使用者 Android notifications.

實際上 user 會依據需求切換平台,以便找到他們想要的訊息或服務。最近的一項研究發現,46%的 mobile shopping 在 mobile web 和 Native app 間至少有過一次切換。因此在支援的所有平台上都應該要高品質、快速、可靠、安全和吸引人。 此外,一些 Native App 可以將 Website 整合進去,像是 Trusted Web Activities 可以無縫接軌實現這目標,已提供擁有一致外觀的體驗。

一般而言,user 認為 Native app 提供更簡潔流暢的體驗,更個人化,並且仔入和使用速度更快。但是,mobile web 是探索主題、服務或產品以及尋求特定訊息的第一站。另外,它們不需要下載。隨著技術的進步,mobile web 可以像 native app 一樣快速和好用。 利用這些新技術可在線上提供出色的體驗 — 每次都能滿足 user 的各種需求。

兩者間最好的:Progressive Web Apps

Progressive Web Apps(PWA)是使用現代網頁技術,開發類似於 Native App 體驗的 Mobile Website。通過桌面上的鏈接,user 可以享受以前在 website 上具有挑戰性的功能:離線使用、接收通知、將收藏夾加到首頁上。 PWA有助於提高用戶參與度並實現無縫轉換 — 無論是電商、產品、出版品、遊戲還是媒體。

雖然移動設備一直是技術的主要驅動力之一,但桌上型設備是一個不斷增長的市場。 PWA 可為移動設備、平板電腦和桌上型設備用戶提供無接縫的使用旅程,因此無論使用何種平台,它們都可以發揮作用。

下一篇,讓我們更深入地了解 PWA 是什麼以及它們如何工作。

--

--