威秀影城 App 如何在每個可以搞砸 UX 的地方全部搞砸

評論
評論

本文作者 Taylor 是經驗豐富的 UI 及產品設計師,專精於 iOS、Android 及 Web 等平台,前後曾經在國內外許多新創公司從事 UX 以及 UI 設計,也在各種組織、公司、學校裡協助管理與培訓,及擔任講師,目前開設了自有的工作室及設計課程,致力於將設計觀念變得更易觸及、理解。原文發表於 Medium,INSIDE 獲作者授權轉載。

讓我們一起欣賞,一個 App 如何在每個可以搞砸的地方全部搞砸,而毀掉使用者體驗。

在正文開始前,我想先打個預防針,我認為,有待改進的設計分兩種。

第一種是表面上有所不足,但可以「感覺」到設計者很努力地想把事情做好,有一種憨直可愛的笨拙感;第二種呢,就是擺明了在鬼混的類型。

我在以前非常喜歡取笑別人的差勁設計,尤其是第二種,而且是惡毒至極的取笑,什麼垃圾啊、狗屎、低能、ㄆㄨㄣ之類的字眼都會公開使用。不過我近年來已經很少做這種事了,一來是慢慢知道為人要謙虛,二來是浪費自己的時間,三是被取笑的對象根本不會聽進去(廢話)。

那麼今天我寫這篇文章要做什麼?

很多人嘴上說設計很重要——尤其是創業者——但真的要拿錢出來的時候,又誤用所謂的 MVP 精神,把設計擺第二(或三、四⋯⋯N)。 我想藉由這個產品來跟大家分享,一個產品的設計沒做好,能夠把使用者體驗搞砸到什麼地步。

威秀影城這個 App 有一些特點,讓我覺得特別適合當負面教材:

  • 它明明有資源做好,卻沒做好,這真的欠批評
  • 它在每個能犯錯的地方都犯錯了,能一次學習到很多
  • 它是很多人會用的服務,也剛好在台灣市場,大家比較熟悉

好了,預防針打完,讓我們來一步步探索這座垃圾山吧(本性難移啊我),在每個畫面我都會說明哪裡做錯、以及適當做法,並附上參考資料,讓大家一起從中學習。

App store 截圖

由於我本身幾乎從來不看也不參考別人的設計(怕自己無意間抄別人的東西,這是有點偏激的習慣,不建議仿效),因此這是朋友要我去下載來看看的,來到了 App Store⋯⋯

狂,一顆半⋯⋯反正 FB 也才三顆星嘛,能差到哪裡去呢——我對自己說著。

(順帶一提,Apple 近期釋出了新的 API,提供直接在 App 裡評等的機制)


第一印象

我們甚至可以說這 App 根本還沒開啟,就犯了第一個錯—— 不要在 App Icon 上放文字

An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name.

像這麼大的品牌,識別規範裡一定有純 Logo 的版本,正確示範:

 

好,那⋯⋯我要進去了喔⋯⋯ >///<

首先迎接我的是這個畫面:

NG!根據 iOS 的設計規範,這個所謂的歡迎畫面事實上叫做「Launch Screen」,它不是拿來放 Logo 的 ,而是應該準備一個假的、空有框架的 App 主畫面來讓使用者有「正在讀取中、開啟很快」的錯覺。(唯一容許的例外應該是遊戲類。)

Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.

好了,開啟完成,接著立刻會看到:

NG!UX 要做好,其中一個要素就是應該要 讓使用者有「掌控全局、了解狀況」的感覺 。在要求授權時沒有任何說明(下方文字可以用來說明為什麼要送推播,但這 App 沒利用),而且一打開就要,就會讓人在這個地方按下拒絕,進而損失後續的行銷機會,甚至影響功能的運作。

Explain why your app needs the information if it’s not obvious.

Request permission at launch only when necessary for your app to function.

我當然是按下拒絕了,然後⋯⋯

呃⋯⋯所以你不會放個 Loding 的小動畫嗎? 動不動就跳 Alert 來中斷使用者操作是大忌啊 !這樣子久了  使用者會養成看到 Alert 就按掉的習慣 ,萬一有什麼重要的大事,就無法通知到,NG!

Alerts disrupt the user experience and should only be used in important situations like confirming purchases and destructive actions.

在打開 App 的頭一秒就連續做錯四個地方,真不簡單,所以我們可以看到主畫面了吧?

NO!

緊接著是一系列貼心的使用教學: 

 讓我想到了...

NG!一般人的工作記憶或短期記憶能力根本無法負荷這種資訊量(順便附上一個有點相關的好文:幫 UI 分類,我們是如何記憶的?),一個良好的設計應該  直覺、處處埋好視覺暗示和適時引導 ,而不是吐一本說明書出來,強迫使用者「學」這個爛設計。就算真的要教學,也應該  要有可跳過的按鈕

It’s fine to provide guidance for beginners, but education isn’t a substitute for great app design. First and foremost, make your app intuitive. If too much guidance is needed, revisit the design of your app.


主畫面體驗

好了,折騰了一番,終於來到了主畫面:

 

NG 1!如果有東西要下載或讀取,就 應該讓使用者知道現在狀況如何 ,而不是 hang 在那裡。我的網路速度高達 1 Gbps,但這個空無一物的狀態還是持續了快一分鐘,像這種狀況不只設計差勁,連開發都該檢討。

When content is loading, a blank or static screen can make it seem like your app is frozen, resulting in confusion and frustration, and potentially causing people to leave your app.

NG 2!螢幕最上方顯示時間、電量等資訊的 狀態列(Status Bar) 攸關使用者對整個系統的掌控感和安全感,以非遊戲類型的 App 來說  無論如何都不該隱藏 ,威秀這個 App 根本就是以為這樣畫面會比較乾淨而隱藏,這是超級愚蠢、嚴重、且不替使用者著想的不良設計。

Avoid permanently hiding the status bar. Without a status bar, people must leave your app to check the time or see if they have a Wi-Fi connection.

好不容易讀取完了,讓我們欣賞一下:

我先不講視覺設計的品質,反正也糟到無話可說。

先來看主選單好了, 導航系統 擔負著在使用者腦裡建立資訊架構的重責大任,按下右上角的漢堡選單,我們會看到⋯⋯

 

⋯⋯我是真的如上圖那樣笑,這種設計就是標準的還不會走就想飛,連基本的邏輯都沒顧好,風格語彙也沒清晰定義、細節沒做,就想玩這種特別效果,只會讓 UI 有種 笨到不行 的感覺,這也是我在初學者身上最常看到的大頭症。NG!

另外,一個好的設計應該低調直覺;使用者打開 App 的目的是「完成某件事」,而不是反而被產品的外觀吸引過多的注意力而分心。老話一句:

你要花很多時間去雕琢,但要花更多時間想辦法讓它不引人注意。

Whenever possible, use standard navigation controls such as page controls, tab bars, segmented controls, table views, collection views, and split views. Users are already familiar with these controls, and will intuitively know how to get around your app.

切記,做設計之前,別逛太多 Dribbble,那真的只會把你害慘。

好了,剛剛打開出現的教學畫面有說往上滑動可以看到電影資訊(賭你沒記住),那就滑滑看好了:

 
 

這一瞬間就出現兩個嚴重設計失誤:

People are familiar with the standard gestures and don’t appreciate being forced to learn different ways to do the same thing.

雖然教學說往上滑可以看到資訊,但我用點的明明也可以,多加這雞肋手勢要幹什麼呢?而我原本預期可以看到詳細的電影資訊和介紹,結果兩個畫面的差別幾乎只是多了一顆按鈕:

然後猜猜看,你要撤掉電影資訊要怎麼做?應該是往下滑對吧?錯。你只能點最左上角的返回箭頭,這個地方有很多設計理論可以提,事實上這不叫畫面,而叫「狀態」,因此如何返回應該要有不同的設計。

順帶一提,點左上角的「熱售中」可以切換成「即將上映」(教學有講,賭你沒記住,again),這畫面展示了即將上映的電影,那「立即購票」的按鈕當然是不能按的,結果也沒趁機利用位置做個「提醒我」的功能,這產品的 PM 不曉得在混什麼。

OK,讓我們點一下「電影介紹」,然後又會再一次看到笨拙的、為了做而做的動畫:

 

老實說我當下真有種「這設計師是用 PowerPoint 在做設計嗎?」的感覺,然後最好笑的是,當你按下「電影介紹」按鈕的同時,那顆按鈕就⋯⋯

消失了!

消失了!

消失了!

 

然後你要按左上角的箭頭才能返回喔!而不是往下滑撤掉!

 

其他體驗

訂票

接著來看看訂票的流程:

 

視覺設計粗糙,像沒做完也就算了,上面的三個 icon 感覺是想做出步驟感,但沒有文字說明反而像選單,而且不能按,NG。

我在這個畫面選完電影和場次後,接著下一步是要登入進行確認:

 

照理說點第一個 icon 是回上一步,最左上角則是退出訂票流程,但 icon 不能點,要回上一步是按左上角,違反直覺和操作路線,NG。

(後來我發現,這件事情在一開始的第三個教學畫面有講!連我這麼仔細看都會忘掉,一般使用者怎麼可能會記住啦!XD)

票夾

 

一進入票夾,劈頭又是不帶說明的權限要求,NG。

 

由於我是初次使用,這個畫面沒東西很正常,但是這種「空狀態」應該要有適當的解釋 ,否則使用者易誤以為壞掉了,NG。

Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn’t available yet.

訊息

在主選單上有個功能叫做「我的訊息」,進去後長這樣:

 
 

我實在太傻眼了,這個訊息功能不知道是要傳訊息給誰,也不知道要幹嘛用的,還有個啟人疑竇的定位 icon,只好點了左下角的問號,然後就出現⋯⋯

 
 

最後是退票和會員設定,看到這裡我已經不知道該說什麼了。

 
 

結論 — — 我們能學到什麼

給初學者

UX 和 UI 的設計,除了外觀,更和功能如何發揮有著緊密的關係,如果只從表面做圖開始學習,罔顧背後的邏輯和互動,那麼你的設計將缺乏好理解、好操作的紮實感,建議參考我開設的課程:https://www.uxabc.net/

給有一定程度的設計師

你會發現,我上面提到的東西,全都是蘋果一開始就有給出指引的簡單觀念,我並未提到任何艱深的視覺構成與 UX 理論(真要講,光這篇都可以寫成一本書了);我們幾乎可以說,99% 的設計工作,都是基本功所堆疊而成的。

基本功代表簡單嗎?一點也不,蛋炒飯啊,最簡單也最困難。

 

現在就回頭想想,你是否花了太多時間在閱讀好像很營養的高階理論,但卻把最基本的東西給忽略了?

Bonus

以 Android 為例,就花 20 分鐘做個畫面簡單示範一下,光用一些最基本的元件,就能夠把上面提到的問題全解了:

 
 
 
 

相關文章

評論