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

隨著智慧型手機越來越普及,網絡速度越來越快,使用外送 App 點餐的人也自然越來越多,其中一個最受歡迎的外送應用程式就是麥當勞 App

不過只要你用過麥當勞 App 點餐,想必你已經發現,從選擇點餐類別、定位餐廳、挑選餐飲、付款到真正下單,整個過程都不夠流暢。RedSo 的設計師今天就嘗試對 麥當勞 App UI 設計進行大改造,讓這個 App 更好看、更好用!

1. 主頁廣告及按鈕排列

  • 沒有品牌識別顏色
  • 凌亂的頁面結構
  • 方形風格缺乏新鮮感
  • 可有可無的目錄按鈕
  • 引起誤會的「我的最愛」按鈕

 

沒有品牌識別顏色

在介面顏色方面,原本採用的白色主題雖然簡潔清晰,但較為無趣、亦無法一看就知道是哪個品牌的 App。於是我們利用大眾對麥當勞熟知的品牌顏色 – 紅色和黃色,再配搭白色,讓整個介面看上去更鮮明,同時大幅提升了介面的品牌識別度。此外,將重點推廣資訊置於紅色底色之上,更能讓產品資訊更吸睛

凌亂的頁面結構

頁面凌亂的結構也是一個很顯著的問題。由於介面文字太多且大小、顏色都沒統一,加上頁面下半部放置了一系列的優惠劵詳情,導致整個畫面沒有一個可以讓眼睛聚焦的地方,看上去是凌亂不堪的。主頁的架構經過改造後脈絡分明,首先是該 App 最核心的功能 -「手機點餐」及「麥麥送」按鈕,採用紅、黃色背景和容易理解的配圖,讓它們在介面上顯得醒目又直觀。

 

其次,重新設計後只顯示最重要的文字,並使用大小統一的文字,閱覽時更為舒暢、易懂。

其三,「餐廳定位」功能有助輕易找到附近的分店,對於遙距點餐的用戶來說也是需要的,所以把「餐廳定位」按鈕放在主頁最底部。其白色背景減少了在畫面上的份量,避免分散使用者對於兩個點餐按鈕的注意力。

 

方形風格缺乏新鮮感

改造前的按鈕邊框風格是中規中矩的長方形,給人傳統古板的感覺,而且從左至右的閱讀按鈕上,文字需要較長的閱覽時間,尤其是「我的最愛」按鈕上的文字,幾乎擠滿整個按鈕。

改造後的按鈕使用圓角正方形風格,介面變得更活潑外,在照片的輔助下,可讓使用者更快分辨按鈕的用途,且經過簡化的按鈕文字,在介面視覺上更具空間感,閱覽時更舒適。

可有可無的目錄按鈕

原本目錄展開後的按鈕其實跟主頁的按鈕有很多重疊之處,如此只會徒增介面的複雜性,所以我們將目錄按鈕刪除,再把不重複而常用的功能放於底部的 tab bar,使用者無須再多按一下展開目錄,就可以馬上選擇想到達的頁面,方便又簡潔。

麥當勞 App 的 UI 設計

 

引起誤會的「我的最愛」按鈕

現在的麥當勞 App 首頁中「我的最愛」按鈕與「手機點餐」及「麥麥送」按鈕並列,可是實際上「我的最愛」功能只適用於手機點餐。

麥當勞 App 的 UI 設計

雖然「我的最愛」按鈕上有文字註明,但相信依然難免會造成某些使用者的困惑。所以改造後我們將「我的最愛」功能放置手機點餐的頁面內,這樣就能確保只有選擇手機點餐的用家才會使用到「我的最愛」功能。

 

2. 餐廳定位

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

 

不夠人性化的定位方法

目前的 App 只使用手機系統預設的定位權限對話框,一旦使用者拒絕定位存取,日後要再啟用GPS定位的話需要於手機設定內調整,過程略為繁複

改造後的介面會先有提示說明啟用定位功能的好處,增加獲得使用者權限的機會,使用者允許後才會開啟系統的詢問。假設使用者看完提示後依然點選「現在不允許」,提示將會暫時關閉,直到使用者下次登入再作詢問,而整個過程都不會影響到系統層面上的設定,日後回心轉意的話就不需要點進手機系統設定了。

 

3. 點餐頁面編排

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

 

頁面空間配置不當

目前的點餐介面一半位置也用以展示早餐 (breakfast) 或常餐 (regular) 的照片及各自的供應時間,而餐飲 MENU 的顯示只佔了下半的小部分。但點餐頁面的重點其實應該放在顯示餐飲選擇上,所以我們在空間配置上大部分改為展示餐點,並將早餐、常餐及我的最愛的顯示方式簡化為文字顯示,其下方則有註明該餐單的供應時間和是否供應中。

另外也將本來放置於中間阻礙了閱覽流暢度的餐廳位置移至最上方,顯著提升了介面的可讀性。

 

無法馬上瀏覽各款餐點

改造前,瀏覽不同 menu 的餐點需要按一下所選的餐點,才會展開下方的詳細目錄。舉例說,消費者想點「開心樂園餐」,必須按下「開心樂園餐」的按鈕,展開其 menu 細項,才能瀏覽和選擇想要的套餐。

 

目前這種圖片和文字並列的按鈕其實大大減少了展示餐點的空間,所以將標題文字移上,再把不同餐單的餐點圖片並列下方,如此一來,不但同樣清晰,更讓使用者馬上對不同 menu 的餐點一目了然,節省了挑選的時間。

 

4. 套餐切換方式

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

 

切換套餐方式缺乏直覺性

選好餐點進入套餐頁面後,可選擇套餐大小、配餐及飲料。在切換套餐大小方面,目前麥當勞的 App 採用了傳統的點選對應按鈕。不過既然按鈕都是並排在一橫線上,相信不少使用者會滑動左右去切換,所以改成可同時滑動及點選式的切換方法更能符合消費者的直覺,切換也更容易。

 

預設消費者必需搭配的配餐

挑選套餐的配餐和飲料後,不需加點其他點心的消費者自然會按下「加入購物車」按鈕。可是 麥當勞 App UI 卻預設了使用者需要額外加點其他點心,使得不需加點的消費者每次都要按進加點目錄裡的最下方,特地選擇「不需加點」,才可以繼續點餐流程,非常麻煩。

假如忽略加點點心的選項時,會顯示錯誤提示。

 

因為加點點心並不是強制性的,而需要的消費者勢必會自行加購,所以改造後移除這個多此一舉的做法,改成加點點心的部分可留空不填,當配餐和飲料有漏填才有提示,相信對於眾多不需加配點心的消費者而言,點餐流程會更加流暢!

 

價錢顯示更清楚

改造前的總價錢僅顯示在頁面底部,假使消費者點了好幾個套餐,則需滑動至介面最底部才能知道總價格。所以改造後直接將價錢標示在最下方的「加入購物車」按鈕文字旁邊,只要停留在點餐頁面上,價錢都可以一目了然。

 

意義不明的圖示(icon)

不知道各位是否知道餐點右方這 “廚師帽” icon 的含義?相信很多使用者都要點進去才會恍然大悟,原來這是客製化點餐的標誌,讓消費者可以自行決定漢堡要不要放生菜、薯條要不要加鹽 … 等。

因為客製化一詞比較抽象,當做成圖示時反而令使用者混淆或是忽略,所以重新設計後改用文字按鈕,讓每一位使用者都能清晰知道按鈕的意思。

改造前(上)、改造後(下)

 

5. 購物車提示

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

 

不起眼的購物車提示

將餐點加入購物車後返回主頁後,右下方會有一個非常小的購物車標誌,提示消費者購物車還有待結帳的餐點。可是圖示實在太小,而且其灰色的顏色也並不鮮豔,可能導致使用者花很多時間去找出、甚至找不到這個按鈕。

麥當勞 App UI

 

於是新設計採用鮮紅色長形大按鈕,並以文字顯示「我的購物車」,讓使用者可以快速看見並到達購物車頁面。即便使用者退回了 App 的主頁面,亦有綠色長形的提示條作提示,綠色和紅黃主題的顏色對比亦能確保提示夠顯眼。

麥當勞 App UI

 

麥當勞 App UI 大改造上篇就到這邊先告一段落,無論你是 UI/UX 設計師、或是對介面設計有興趣,都希望以上的內容能夠幫助大家更好了解 UI/UX 設計的重點。下篇將會繼續帶各位深入研究麥當勞 App 其他能夠改良的地方,如果你想要進一步了解我們的 UI/UX 設計、對文章有任何建議或者希望成為合作夥伴,隨時都可以透過 Facebook官方網站或 E-mail 聯繫我們~

感謝你的閱讀和支持~

 

本文經作者 Monisa Kwan 同意,轉載於 UI/UX整容大改造!徹底砍掉重練AppStore評分1.5星的麥當勞App(上)

 

公司名稱:Red Soldier Limited

 

 

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

分享此文: