Yelp iPhone 客戶端重設(shè)計

0 評論 9304 瀏覽 5 收藏 12 分鐘

Yelp 是一個發(fā)布時間超過十年的點評網(wǎng)站,起源于美國、發(fā)展至全球。Yelp 擁有各類商鋪的信息,如餐廳、咖啡店、加油站、購物廣場等,人們可以在上面找到各式各樣的商鋪,并為它們寫評價、簽到或上傳照片視頻。不僅如此,Yelp 也是一個生活社交平臺,人們可以在上面看到好友最近光顧的商鋪、寫出的評價。

由于擁有大量商鋪信息和用戶生成內(nèi)容,Yelp 體量不小。iPhone 客戶端在承載這些信息時,必須把信息架構(gòu)處理好,因為這很大程度上影響了用戶體驗的好壞。目前 Yelp iPhone 客戶端的功能框架相對復(fù)雜,主要分為附近商鋪(Nearby)、搜索(Search)、發(fā)布、關(guān)于我(About Me)、更多(More)五個基本頁面。

  • 附近商鋪(Nearby):展示附近商鋪、推薦類別,用戶可從此處快速查找商鋪。
  • 搜索(Search):用戶可以根據(jù)關(guān)鍵詞進行搜索,也可以添加篩選條件進行精確化搜索。
  • 發(fā)布:分點評、簽到、上傳照片視頻三類內(nèi)容。
  • 關(guān)于我(About Me):展示個人信息。
  • 更多(More):整合輔助功能,如書簽、信息流、曾瀏覽過的商鋪列表。

存在問題

1.功能入口散亂

當(dāng)用戶想尋找一家店鋪時,

  • 如果是曾經(jīng)瀏覽過/加過書簽的店鋪,則直接到更多(More)頁面中尋找,那里有曾瀏覽過的商鋪列表和書簽列表;
  • 如果是一家新店鋪(或瀏覽過但因時間太久難以檢索、沒加過書簽),知道名稱/關(guān)鍵詞,則在附近商鋪(Nearby)頁和搜索(Search)頁可輸入文字以搜索;
  • 如果不知道任何信息(或者忘記名稱/關(guān)鍵詞),要尋找附近的商鋪可根據(jù)地理位置搜索,否則就需要通過商鋪類別目錄進行尋找。

當(dāng)用戶想發(fā)布內(nèi)容時,

  • 可直接點擊 super tab,選擇一個類別后,頁面會先跳轉(zhuǎn)至搜索頁,加載附近商鋪或由用戶輸入文字,選擇商鋪后再填寫內(nèi)容;
  • 或先按上面的流程進入商鋪詳情頁,再選擇類別、填寫內(nèi)容。

無論是尋找店鋪還是發(fā)布內(nèi)容,入口有很多。這樣并非沒有好處,但容易讓用戶困惑。舉個例,如果我要為一家餐廳寫評語,會分為兩種場景:

  • 如果還沒離開餐廳,用戶可以直接在 super tab 選擇類別發(fā)布,應(yīng)用會自動加載附近商鋪,這時所在的餐廳肯定排序在最前;
  • 但如果用戶已離開餐廳才想起要評價,從歷史瀏覽列表進入商鋪詳情頁會更快,反而從 super tab 發(fā)布則還要手動輸入文字搜索。

不要僅僅依靠業(yè)務(wù)功能來劃分模塊,不然體驗設(shè)計會亂得一塌糊涂。

2.功能入口重復(fù)

除發(fā)布頁面外,其余頁面承載的信息很多并存在重復(fù)的情況。將功能框架局部放大則一目了然。Super tab 是讓用戶快速發(fā)布內(nèi)容的地方,而在關(guān)于我(About Me)頁面中又能找到相同的入口;書簽、事件等頁面不僅在關(guān)于我(About Me)頁面中出現(xiàn),又能在更多(More)頁面中找到。如果用戶習(xí)慣于使用一個入口,另一個便顯得多余,讓頁面增加不必要的復(fù)雜。

附近商鋪(Nearby)頁與搜索(Search)頁很雷同。在前者選擇其中一個類別,頁面會跳轉(zhuǎn)至后者的搜索結(jié)果頁(商鋪列表),相當(dāng)于只為用戶省去了輸入文字的過程;前者頁面上方的搜索框與后者中的搜索框完全相同;前者主目錄的商鋪類別和次級目錄的熱門類別存在重復(fù),相信不止我一個人會對此費解。

清晰、明確的邏輯是一個擁有復(fù)雜信息架構(gòu)的產(chǎn)品是否給用戶帶來良好體驗的關(guān)鍵。

3.信息流(Feed)被過分弱化

Yelp 除了擁有大量商鋪信息和優(yōu)質(zhì)的用戶生成內(nèi)容外,社交屬性也很強,人們能夠看到好友、附近用戶的動態(tài)。人們不僅僅把它當(dāng)作搜索工具、在外出時才打開,而是可以通過 Yelp 來交友互動。這有利于提高用戶的參與度和創(chuàng)造內(nèi)容的欲望。在 Web 端,Yelp 便是這么做的——登陸網(wǎng)站,好友的最新動態(tài)會顯示在主頁。而 iPhone 客戶端上,用戶生成內(nèi)容卻相對分散,除商鋪關(guān)聯(lián)起來的部分,其余分散到用戶頁、更多(More)頁里面,缺失獨立的信息流頁面。

重設(shè)計思考過程

Yelp 的信息架構(gòu)復(fù)雜、內(nèi)容繁多,我首先從最基礎(chǔ)的數(shù)據(jù)入手,重新規(guī)劃 Yelp 的頁面布局。Yelp 的數(shù)據(jù)主要分為三大類:商鋪、用戶生成內(nèi)容和用戶。商鋪數(shù)據(jù)包含名字、地址、類別等信息,用戶生成內(nèi)容數(shù)據(jù)分成點評、照片/視頻和簽到三類,每個用戶生成內(nèi)容的數(shù)據(jù)都關(guān)聯(lián)了一個店鋪和一個用戶。

用戶只關(guān)那些與他們有關(guān)的信息,比如好友、附近的人、那些他們感興趣的商鋪,這些才是有效的用戶生產(chǎn)內(nèi)容。因此,用戶生成內(nèi)容需要按照一定關(guān)聯(lián)性展示給用戶。最直觀的方式是建立獨立的信息流頁面,把好友、附近用戶的內(nèi)容整合到這里。用戶自己的內(nèi)容整合到個人頁面,在店鋪頁面中把與店鋪相關(guān)的用戶生成內(nèi)容歸類到一起。如下圖所示。

商鋪存在獨立的詳情頁,它仍需要經(jīng)過整理后才能展示給用戶。除了分類目錄(現(xiàn)在 Yelp 也確實這樣做了)外,地理位置、瀏覽記錄、書簽標(biāo)記也與用戶存在一定關(guān)聯(lián)性——它們能讓用戶快速找到附近、曾經(jīng)瀏覽過或標(biāo)記過的商鋪。而瀏覽記錄、書簽標(biāo)記屬于用戶的主動操作,它們應(yīng)當(dāng)被歸類到個人頁中。

但如果要發(fā)現(xiàn)新商鋪,瀏覽記錄、書簽標(biāo)記就無能為力了。這時必須利用地理位置或目錄進行分類。因此在用戶需要發(fā)起搜索時,需要讓用戶通過地理位置和目錄去發(fā)現(xiàn)這些未知的商鋪(或通過運營的方式推薦熱門商鋪)。到這里,功能模塊已經(jīng)基本清晰,如下圖所示。

最后是核心的發(fā)布功能。目前使用 super tab 發(fā)布內(nèi)容的方式是先搜索再填寫,這樣做忽略了對場景的考慮。除了加載附近商鋪或由輸入文字搜索,將書簽和歷史瀏覽記錄中的商鋪也整合進去,有利于簡化發(fā)布內(nèi)容流程、讓用戶更習(xí)慣于使用 super tab。

重設(shè)計

功能界面調(diào)整為附近商鋪(Nearby)、搜索(Search)、發(fā)布、動態(tài)(Feed)
、關(guān)于我(About Me)。附近商鋪(Nearby)頁中原先的目錄分類整合入搜索頁,增加動態(tài)(Feed)頁展示好友、附近的人、熱門的評價內(nèi)容,原先的更多(More)頁取消,功能整合進關(guān)于我(About Me)頁和設(shè)置中。

搜索(Search)頁展示商鋪的搜索結(jié)果,可添加篩選條件進行精確化搜索,可按商鋪分類搜索。點擊搜索框,展示推薦類別和熱門類別,次級頁面為全部類別。

點擊 super tab 選擇發(fā)布類別后,展示附近商鋪、最近瀏覽過的商鋪,提供書簽、全部附近商鋪的入口。

關(guān)于我(About Me)頁提供書簽、事件、好友列表、發(fā)表過的點評、發(fā)布過的照片的入口,展示最近瀏覽過的商鋪、我的動態(tài)(My Feed),詳細(xì)設(shè)置與消息分別位于 menu bar 的左右兩側(cè)。

source:ui.cn

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!