Image for post
Image for post

UI/UX整容大改造!徹底砍掉重練AppStore評分1.5星的麥當勞App(下)

Monisa Kwan
Jul 20, 2018 · 6 min read

承接上一篇關於麥當勞App的UI謬誤,這次我們繼續仔細列出和解釋如何令這個App提供更貼心的用戶體驗。如果想要重溫上一篇的內容,請點按傳送門:

6. 購物車預覽

Image for post
Image for post
改造前(左)、改造後(右)
  • 預覽模式不夠美觀

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

  • 缺乏趣味的按鈕

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

Image for post
Image for post

7. 優惠劵使用

Image for post
Image for post
改造前(左)、改造後(右)
  • 不方便的優惠劵使用方式

目前如要使用優惠劵的話,需要手動選擇要使用的優惠劵。可是優惠劵頁面和訂餐頁面是分開的,令用家很容易會遺忘優惠劵,點選優惠時亦不順手。另外,優惠劵大部分都有使用的時間限制(例如只可以早上4時至11時使用),可是假如用家誤選了錯誤時間段的優惠劵,依然可以加進購物車,直到點按結算時才會顯示錯誤提示。重新設計後優惠劵會顯示在購物車的下方,系統會在用家在點餐後自動顯示用家可使用的優惠劵,也可以自行更換其他優惠劵。能夠快捷獲得折扣優惠,使用者買單的意欲就更高了。

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

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

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

8. 付款方式

Image for post
Image for post
改造前(左)、改造後(右)
  • 付款方式較少

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

  • 可增加圖標輔助

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

9. 新增功能 — 取餐時間

  • 用家可指定取餐時間

重新設計後的介面也新增了數個貼心的功能,其中一個便是用家可自訂取餐時間。現時就算用家已經透過網絡付費,還是需要抵達餐廳才會開始準備配餐。改良後,透過信用卡或其他網上付費方法的用家可在付費後,根據自己的需要選擇不同的取餐時間,例如餐廳在家樓下的用家可以選擇「儘快取餐」,距離比較遠或想提早點餐的用家則可選擇10、20或30分鐘後取餐。

Image for post
Image for post
Image for post
Image for post

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

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

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

Image for post
Image for post
  • 我的訂單

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

Image for post
Image for post
  • 我的優惠券

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

Image for post
Image for post

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

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

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

(以上改造前之原圖擷取自麥當勞應用程式©2018 McDonald’s版本4.8.5;文章及改造後之圖片均屬RedSo所有,未經授權不得轉載。)

RedSo

Technical Posts from our soldiers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store