2016-2-15 用心設(shè)計(jì)
|
行動(dòng)唯一、行動(dòng)唯一、行動(dòng)唯一！
今年五月底 Google I/O 大會(huì)上，我們可以聽到 Google 一再重複這個(gè)概念「行動(dòng)唯一」。無(wú)獨(dú)有偶，整個(gè)臺(tái)灣市場(chǎng)也在今年掀起一股手上商城的風(fēng)潮，以幫店家打造行動(dòng)應(yīng)用聞名的 91 App 更是因此在今年獲投 900 萬(wàn)美金 A 輪融資；而被全球知名創(chuàng)投 500 Startups 投資的 SHOPLINE 也推出類似服務(wù)，更是在今年開始進(jìn)軍臺(tái)灣、開拓國(guó)際市場(chǎng) 。
其實(shí)自 2013 年開始風(fēng)行 App 后，許多廠商不管真懂假懂都有推出自家應(yīng)用。但想當(dāng)然耳，在這種一知半解、環(huán)境尚未成熟的狀況下，推出來(lái)的應(yīng)用能用的太少了；沒有響應(yīng)式設(shè)計(jì)（RWD）的網(wǎng)站、應(yīng)用提起都是一把辛酸淚，幾乎都是蚊子 App。
如今，風(fēng)水輪流轉(zhuǎn)，隨著行動(dòng)裝置黏著度越來(lái)越高，「移動(dòng)界面」越來(lái)越重要。致力推動(dòng)「行動(dòng)唯一」理念的 Google，現(xiàn)在也不遺馀力的跟全球的商家（廣告主）教育「到底什麼才是好的行動(dòng)界面？」
想要不成為時(shí)代的眼淚，追上科技的前沿，老板們你除了要會(huì)用 Line@ 和臉書，你也應(yīng)該懂得行動(dòng)的美、行動(dòng)的邏輯！這次剛好有機(jī)會(huì)聽 Google 行動(dòng)專家、UX 設(shè)計(jì)師 Stephen Griffiths 以行動(dòng)電商界面為主，來(lái)介紹行動(dòng)世界應(yīng)該謹(jǐn)記在心的「使用者體驗(yàn)」，就讓我們來(lái)聽聽專家怎麼說(shuō)？
Google 大神官方建議：好的電商行動(dòng)應(yīng)用你得考慮這四步驟！
一開頭，Stephen 就拋出一個(gè)問題：使用者經(jīng)驗(yàn)（User Experience）是什麼？接著，他又自顧解釋：UX 其實(shí)就是端到端的的體驗(yàn)、使用者怎麼使用，集合了外表、感受、使用三種表徵行為的專業(yè)。
對(duì)于 UX 設(shè)計(jì)師來(lái)說(shuō)，他們需要肩負(fù)的就是以消費(fèi)者的角度設(shè)計(jì)出一個(gè)「舒適、完整」的使用流程。Stephen 說(shuō)明每一個(gè)應(yīng)用都會(huì)有其使用的生命週期，在這個(gè)週期中，使用者會(huì)經(jīng)歷不同的任務(wù)導(dǎo)向階段（適應(yīng)、使用、轉(zhuǎn)換、再次造訪），而這些階段中使用者可能會(huì)有舒適抑或痛苦的體驗(yàn)。對(duì)于設(shè)計(jì)師來(lái)說(shuō)「一個(gè)負(fù)面的體驗(yàn)，需要三個(gè)正向的體驗(yàn)才能抵消」，UX 設(shè)計(jì)師必須很注意這些細(xì)節(jié)，才能做出一個(gè)使用者愿意長(zhǎng)久使用的應(yīng)用。
然而 Stephen 也提醒行動(dòng)應(yīng)用時(shí)代的來(lái)臨，同樣再次型塑了客戶期待，這也導(dǎo)致了設(shè)計(jì)與轉(zhuǎn)換變難。
以下是應(yīng)用設(shè)計(jì)時(shí)的四個(gè)步驟：適應(yīng)、使用、交易、回流
就讓我們一步步看，每一個(gè)步驟上應(yīng)該注意哪些使用者經(jīng)驗(yàn)設(shè)計(jì)吧。
第一，適應(yīng)
他提到，使用者經(jīng)驗(yàn)的設(shè)計(jì)在手機(jī)這種相對(duì)限制的螢?zāi)簧希兄鴰讉€(gè)簡(jiǎn)單的原則：
首先，品牌行銷必須要更加微型，例如：Airbnb 的品牌 Logo 就以一個(gè)不張揚(yáng)的方式嵌在應(yīng)用內(nèi)。這是因?yàn)榇蠹視?huì)來(lái)使用你的 App，就已經(jīng)知道你的品牌，因此沒必要讓品牌 Logo 重複出現(xiàn)在螢?zāi)恢小?
此外，讓使用者可以秒懂這個(gè)應(yīng)用的方式，就是將「基本需求呈現(xiàn)在使用者面前；換言之 UX 越簡(jiǎn)單明瞭越好」，最佳的準(zhǔn)則就是讓使用者不需要學(xué)習(xí)、只有主要內(nèi)容才需要出現(xiàn)在畫面上。
例如 YouTube 應(yīng)用一點(diǎn)開，你就知道這個(gè)應(yīng)用的基礎(chǔ)內(nèi)容是什麼了。下面有推薦的內(nèi)容，第一欄的 Home bar 則有明顯的查詢標(biāo)識(shí)，讓用戶可以馬上開始查他想看的影片。
第三，在應(yīng)用設(shè)計(jì)上，你必須要清楚這個(gè)應(yīng)用的用途以及目的，并以此規(guī)劃使用者體驗(yàn)的優(yōu)先順序。即便是設(shè)計(jì) Menu 也要儘量清楚先后順序；讓使用者可以輕易了解意圖（可以分門別類的排序等）。
第四，在提供使用者卷動(dòng)畫面時(shí)，永遠(yuǎn)不要有盡頭！也就是你必須要加上「顯示更多（Load more）」等功能，讓使用者覺得他擁有其他選項(xiàng)可以考慮。
第五，使用者使用你的應(yīng)用時(shí)，不一定要強(qiáng)迫對(duì)方登入；你可以選擇讓使用者直接進(jìn)入應(yīng)用，或是提供「登入／跳過」的二元選項(xiàng)；但如果你一定要大家給資料，那建議最好提供第三方登入，讓使用者有不止輸入資訊一種選項(xiàng)，然而一旦使用者選擇注冊(cè)登入，那也請(qǐng)你記得提供「顯示密碼」等功能，讓使用者可以看到他輸入的內(nèi)容。
例如，時(shí)尚購(gòu)物平臺(tái) ASOS 的應(yīng)用就不必登入即可使用。當(dāng)你逛到想要買的衣物時(shí)，那消費(fèi)者就會(huì)自然而然提供資訊，而這就不是平臺(tái)「強(qiáng)迫、要求」用戶提供的；此舉也讓平臺(tái)獲取用戶資訊顯得水到渠成，一點(diǎn)都不侵入式。
值得一提的是，在簡(jiǎn)易化流程上，另一電商平臺(tái) Zolando 更提供了一個(gè)超簡(jiǎn)便的方式，就是和 TouchID 結(jié)合，確認(rèn)訂單后，指紋一刷，購(gòu)買完成！
第二，使用
在這一階段，主要涉及應(yīng)用的主要功能。可以分為幾種來(lái)敘述。
1. 搜尋
一個(gè)使用經(jīng)驗(yàn)好的應(yīng)用它的搜尋很重要；特別是如果你是要做電商類的應(yīng)用。其中最重要的一點(diǎn)就是搜尋的欄位要好找，一定要讓大家可以一眼就看到，如同我們前面看過的 YouTube 應(yīng)用。
此外，你設(shè)計(jì)的搜尋工具也必須要附帶搜尋建議、自動(dòng)完成的功能，讓大家不必完全打完關(guān)鍵字就可以找到想找的內(nèi)容（前面說(shuō)過了減少使用者輸入資訊的程序是成功的要件！）。而且前面表列的幾點(diǎn)，一定是要高度相關(guān)的搜尋結(jié)果。
有了這些之后，好的搜尋工具也應(yīng)該提供可以讓使用者進(jìn)一步設(shè)定條件／排列／過濾的搜尋功能，例如：使用者可以輕易選擇將查詢品相按照價(jià)格高低排列。如果是訂房系統(tǒng)，也可以讓用戶先預(yù)填資料，例如住幾晚等等。
最后務(wù)必提供「歷史記錄」給用戶，讓他們可以輕易找到之前的搜尋記錄。畢竟有些人習(xí)慣猶豫、比價(jià)許久，讓他們可以輕易找到適才看過的商品，將有效提升成交的可能性。
不過剛剛講的這幾點(diǎn)，第一個(gè)讓我想到的就是 YouTube 的應(yīng)用啊！
2. 產(chǎn)品、服務(wù)本身
看完了搜尋相關(guān)的小撇步，我們來(lái)看一下其他 UX 設(shè)計(jì)師在設(shè)計(jì)應(yīng)用時(shí)應(yīng)該注意的重點(diǎn)。因?yàn)橹黝}關(guān)系，主要著重在電商類的內(nèi)容：
針對(duì)產(chǎn)品的呈現(xiàn)，有一個(gè)要訣就是讓使用者永遠(yuǎn)可以快速地掃是產(chǎn)品描述、一眼看到重點(diǎn)資訊（如：尺碼、價(jià)格等等）。而最重要的「購(gòu)買」鍵，更應(yīng)該不管使用者到哪裡，它都要夠醒目；另外，也應(yīng)該附上「放入愿望清單」的選項(xiàng)，供用戶可以管理他想要購(gòu)買的內(nèi)容；因?yàn)楹芏嘤脩舳际抢猛ㄇ诘攘闼闀r(shí)間使用應(yīng)用，通常這些時(shí)間并不夠支撐用戶完成一個(gè)購(gòu)物的流程，所以有欲望清單讓他可以先選好放著，是一個(gè)較佳的設(shè)計(jì)。
回到產(chǎn)品本身，隨著電商市場(chǎng)競(jìng)爭(zhēng)愈發(fā)激烈，要刺激購(gòu)物的最終行動(dòng)，相關(guān)的產(chǎn)品影像一定要夠大、品質(zhì)夠好，最好還要讓用戶可以放大、放小的研究。這之后，你也應(yīng)該讓顧客評(píng)價(jià)等資訊放在一目瞭然之處，因?yàn)楝F(xiàn)在人在網(wǎng)路上購(gòu)物不免俗的還是會(huì)想要聽聽他人的心得看法做參考。
另外，在任何產(chǎn)品標(biāo)示上，不管是庫(kù)存、運(yùn)費(fèi)等注意事項(xiàng)都應(yīng)該清楚明示，以免造成誤會(huì)引發(fā)衝突。最后，當(dāng)然別忘了推薦商品，這就跟延伸閱讀一樣，用戶對(duì)這篇文章感興趣，他就可能對(duì)其他相關(guān)的內(nèi)容有較高的興趣。
第三，交易
經(jīng)營(yíng)過電商的都知道，讓人來(lái)逛不難，但怎麼讓人走到最后「購(gòu)買」的步驟就不簡(jiǎn)單了。很多人都是在最后一不放棄的。所以該怎麼做呢？
首先，最重要的就是讓用戶不必多操心，一切操作要簡(jiǎn)單、直覺，要讓顧客能夠安心結(jié)帳。
而且為了以防顧客改變心意不買了，在進(jìn)入檢視購(gòu)買品項(xiàng)的頁(yè)面時(shí)，千萬(wàn)要讓用戶可以編輯購(gòu)物車內(nèi)產(chǎn)品相關(guān)資訊（數(shù)量、款式等等），避免因?yàn)檫@些小錯(cuò)誤讓消費(fèi)者從頭再用一次，這很可能惹惱了他們啊。同時(shí)，你還應(yīng)該不厭其煩的繼續(xù)再這些頁(yè)面中加入推薦品項(xiàng)，推薦他們加購(gòu)。
除此之外，還有：提供多種付費(fèi)方式、移除容易讓用戶分心的資訊、重要資訊輸入界面要友善、簡(jiǎn)單。Stephen 就舉例 Uber 的設(shè)計(jì)就很好，每一項(xiàng)資料輸入都有單獨(dú)一面，不會(huì)讓用戶在同一頁(yè)面待很久，一填得填個(gè)千萬(wàn)年這樣；最好還可以直接提供讓用戶掃描的選項(xiàng)，越方便越可以留住用戶。
第四，回流
看完了上述三大項(xiàng)應(yīng)用 UX 設(shè)計(jì)建議后。最后一環(huán)節(jié)，就是如何激發(fā)用戶愿意再回頭來(lái)你的應(yīng)用？
這是聽起來(lái)最簡(jiǎn)單也最難得部分，因?yàn)楦鶕?jù)調(diào)查很多人都是 App 下載用一兩次后就刪掉了。除了檢視自己前面幾點(diǎn)有沒有做到外，在刺激回頭客這邊也可以多做琢磨，以下就分享 Stephen 介紹的幾點(diǎn)祕(mì)訣：
Medium、Flipboard、Airbnb、YouTube 都做得很好，因?yàn)樗麄冇幸粋€(gè)共通點(diǎn)就是「直接用內(nèi)容代替主畫面，開門見山就提供用戶可能感興趣的內(nèi)容來(lái)吸引他點(diǎn)擊」；除此之外，Stephen 強(qiáng)調(diào)這些內(nèi)容最好也可以無(wú)盡的刷下去，讓用戶可以一直找一直看下去。
此外如果有一些擬人化、逗趣化的互動(dòng)也可以增加用戶回流，例如 Citymapper 像朋友間對(duì)話的內(nèi)容出現(xiàn)。又或是良好的視覺設(shè)計(jì)，讓整個(gè)應(yīng)用呈現(xiàn)一股好看、美到讓人捨不得刪掉的效果。
講完四種流程后，Stephen 說(shuō)面對(duì)智慧手機(jī)等載具上安裝越來(lái)越多感應(yīng)器，可以預(yù)想到未來(lái)在應(yīng)用的使用體驗(yàn)上將會(huì)有越來(lái)越多的可能性。像 TouchID 就是一個(gè)好例子。
最后，Stephen 提醒隨著行動(dòng)裝置占比越來(lái)越高，「行動(dòng)」越來(lái)越重要，行動(dòng)版官網(wǎng)更是基本盤，很重要！因?yàn)榫W(wǎng)站是面對(duì)廣大的用戶群，你絕對(duì)不能忽視這一塊；而 App 則是切向核心用戶。
不過不管你是在設(shè)計(jì)哪一種裝置上的頁(yè)面，Stephen 說(shuō)：第一準(zhǔn)則，就是讓用戶可以很簡(jiǎn)單的查到他們想要的東西！
|
藍(lán)藍(lán)設(shè)計(jì)( 91whvog3.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn
