AppStore 評分1.5星的麥當勞 App UI 怎麼救?UI/UX 大改造 (下)

承接上一篇關於麥當勞 App 的 UI 謬誤,這次我們繼續仔細列出和解釋如何讓這個 App 提供更貼心的用戶體驗。如果想要重溫上一篇的內容,請點按傳送門:AppStore 評分1.5星的麥當勞 App UI 怎麼救?UI/UX 大改造 (上)

AppStore 評分1.5星的麥當勞 App UI 怎麼救?UI/UX 大改造 (上)

6. 購物車預覽

mcdonalds app ui redesign

改造前(左)、改造後(右)

預覽模式不夠美觀

進入購物車後雖然可以清楚預覽挑選的每一項餐點,可是顯示方式較為枯燥無味。重新設計後使用較大的字體顯示套餐或餐點名字,再以圓角邊框包圍了套餐的包含餐點和餐點詳情,看上去更美觀,而且當點多於一個套餐時會更清晰。

缺乏趣味的按鈕

目前外帶(take away)和內用(dine in)的選擇按鈕僅以顏色做區分,而且採用的顏色偏深,缺乏生氣。所以改造後加入了圖案元素,給人感覺更有趣。

mcdonalds app ui redesign

 

7. 優惠劵使用

mcdonalds app ui redesign

改造前(左)、改造後(右)

不方便的優惠劵使用方式

目前如要需要使用優惠劵的話,則需手動選擇要使用的優惠劵。可是優惠劵頁面和訂餐頁面是分開的,讓使用者很容易會遺忘優惠劵,點選優惠時亦不順手。另外,優惠劵大部分都有使用的時間限制(例如只可以早上4 時至 11 時使用),如果使用者誤選了錯誤時段的優惠劵,卻依然可以加進購物車,直到點結算才會顯示錯誤提示。

重新設計後優惠劵會顯示在購物車的下方,當使用者點餐後,系統會自動顯示可使用的優惠劵,也可以自行更換其他優惠劵。能夠快速獲得折扣優惠,使用者買單的意願就更高了。

選餐後無法快速切換優惠劵

另一個使用上的困難是無法隨意切換優惠劵。比如選好優惠劵後要更換成其他優惠,必須手動刪除現有優惠劵,再退回首頁重新選擇。重新設計後的介面則省卻了這些繁複之處。

如在選好優惠劵後要更換其他優惠,必須手動刪除現有優惠卷,再退回首頁重新選擇。

 

8. 付款方式

改造前(左)、改造後(右)

付款方式較少

使用者要結帳的時候或許會發現只能選擇信用卡或是現金付款,重新設計後加添了 Apple Pay 付費,亦添加了「新增付款方式」按鈕,讓使用者可以加入最適合自己的付款方法。

可增加圖標輔助

改造後的頁面在付款方式旁邊新增了對應的圖標,使用者在選擇時更清晰,亦增加了介面的美觀性。

 

9. 新增功能 — 取餐時間

使用者可指定取餐時間

重新設計後的介面也新增了數個貼心的功能,其中一個便是使用者可自訂取餐時間。目前的版本就算使用者已經透過線上支付付費,但還是需要抵達餐廳才會開始準備配餐。

改良後,透過信用卡或其他線上付費方法的消費者可在付費後,根據自己的需要選擇不同的取餐時間,例如餐廳在家樓下的使用者可以選擇「快速取餐」,距離比較遠或想提早點餐的使用者則可選擇 10、20 或 30 分鐘後取餐。

 

當使用者到達餐廳時,餐點便會剛好準備好,確保取餐時的餐點都是最新鮮的狀態之餘,還節省在店面的等候時間,最適合趕時間的使用者!至於選擇到店付款的用戶,一旦付費後亦會馬上開始準備餐點。

 

10. 新增功能 – 底部導航列 (Tab bar)

目前的 App 介面並沒有底部導航列,僅有一個需要點擊展開的目錄按鈕。而如文初所説,改造後將常用的功能放置新增的底部導航按鈕列,當中包括「主頁」、「我的訂單」、「優惠券」及「我的帳號」功能按鈕。

我的訂單

在「我的訂單」內,使用者可清楚瀏覽已經下單並結帳的餐點圖示、取餐地址、輪候號碼,更顯示了餐點的製作進度,方便使用者安排最適當的時間前往取餐。下方更展示了過往全部的訂單詳細資料如餐點內容、日期和價錢等,用家只需點擊「再點一次」按鈕,即可快速下單。

mcdonalds app ui redesign

我的優惠券

目前優惠券並沒有一個獨立頁面,而是主頁下方,需要滑動向下才可見全部優惠券。由於如此的頁面排版會令單頁資訊量過多,降低可讀性,而且使用者不一定知道需要滑向下方才可以查看優惠券,所以重新設計後我們為優惠券設立了一個獨立頁面。優惠券形狀採用擬物化設計,增添介面趣味,加上充滿質感和動態的餐點照片作背景更美觀、更能引起食慾。

由此可見,App 的 UI 設計不僅要美觀、更要人性化和注重用戶體驗,只有細緻入微的介面設計才能讓 App 使用得更流暢和有效率!

 

– 非常感謝閱讀到這裡的你!ヽ(●´∀`●)ノ –

 

如果你想要進一步了解我們的 UI/UX 設計、對文章有任何建議或者希望成為合作夥伴,隨時都可以透過 Facebook官方網站E-mail – connect@redso.com.hk 聯繫我們~

本文經作者 Monisa Kwan 同意,轉載於 UI/UX整容大改造!徹底砍掉重練AppStore評分1.5星的麥當勞App(下) / (以上改造前之原圖擷取自麥當勞應用程式 ©2018 McDonald’s 版本 4.8.5;文章及改造後之圖片均屬 RedSo 所有,未經授權不得轉載。)

 

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

分享此文: