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

Monisa Kwan
Jul 13, 2018 · 8 min read

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

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


1. 主頁廣告及按鈕排列

改造前(左)、改造後(右)
  • 沒有品牌識別顏色

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

  • 凌亂的頁面結構

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

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

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

  • 方形風格缺乏新鮮感

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

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

  • 可有可無的目錄按鈕

原本目錄展開後的按鈕其實跟主頁的按鈕有很多重疊之處,如此只會徒增介面的複雜性,所以我們將目錄按鈕刪除,再把不重複而常用的功能放於在底部新增的按鈕列(tab bar)。

使用者無須再多按一下展開目錄,就可以馬上選擇想到達的頁面,方便又簡潔。

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

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

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


2. 餐廳定位

改造前(左)、改造後(右)
  • 不夠人性化的定位方法

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

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


3. 餐單頁面編排

改造前(左)、改造後(右)
  • 頁面空間配置不當

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

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

  • 無法馬上瀏覽各款餐點

改造前,瀏覽不同餐單的餐點需要按一下所選餐單,再展開下方的詳細目錄。舉例說,用家想點「開心樂園餐」,必須按下「開心樂園餐」的按鈕,展開了其餐單,才可以瀏覽和選擇想要的套餐。

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


4.套餐切換方式

改造前(左)、改造後(右)
  • 切換套餐方式缺乏直覺性

選好餐點進入套餐頁面後,可選擇套餐大小、餐配小吃及飲料。在切換套餐大小方面,目前麥當勞的App採用了傳統的點選對應按鈕。

不過既然按鈕都是並排一橫線上,相信不少用家會滑動左右去切換,所以改成可同時滑動及點選式的切換方法更能符合用家的直覺,切換也更容易。

  • 預設用家必需加配小吃

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

假若漏空加點小吃的話會顯示錯誤提示。

因為加點小吃並不是強制性的,而需要的使用者定必會自行按進去,所以改造後摒棄了這個多此一舉的做法,改成加點小吃可留空、餐配小吃和飲料才有漏填提示,相信眾多不需要加配小吃的用家點餐時會更加流暢!

  • 價錢顯示更清楚

改造前的總價錢僅顯示在頁面底部,假若用家點了好幾個套餐,便需要划動至最底部才可知道總價錢。所以改造後直接將價錢附加在固定在最下方的「加入購物車」按鈕文字旁邊,只要停留在點餐頁面上,價錢都可以一目了然。

  • 意義不明的圖示

不知道各位是否知道餐點右方的廚師帽標誌的含義?相信很多用家都要點進去才恍然大悟,原來那是客製化點餐的標誌,用家可以決定漢堡裡要不要放生菜、薯條要不要加鹽等。

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

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

5. 購物車提示

改造前(左)、改造後(右)
  • 不起眼的購物車提示

將餐點加入購物車後返回餐單主頁,右下方會有一個非常小的購物車標誌,提示用家購物車有待結帳的餐點。

可是圖示實在太小,而且其灰色的顏色也並不鮮豔,可能導致使用者花很多時間去找出、甚至找不到這個按鈕。

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


上篇到這邊先告一段落,無論你是UI/UX設計師、或是對介面設計有興趣,都希望以上的內容能夠幫助大家更好了解UI/UX設計的重點。

下篇將會繼續帶各位深究麥當勞App的其他能夠改良的地方,如果你想要進一步了解我們的UI/UX設計、對文章有任何建議或者希望成為合作夥伴,隨時都可以透過Facebook官方網站或電郵connect@redso.com.hk聯繫我們~

感謝你的閱讀和支持~



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

RedSo

Technical Posts from our soldiers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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