UX 案例研究 | Apple 地圖:附近,并非在你身邊
本文是關(guān)于Apple 地圖的一個(gè)設(shè)計(jì)研究,去探討里面的圖標(biāo)、功能和按鈕為什么要這么設(shè)置,有什么可改進(jìn)的地方。
自從 Apple 對其導(dǎo)航服務(wù)優(yōu)化和改進(jìn)后,我就沒有去 AppStore 下載另一款類似的地圖軟件了。 Apple 地圖更新后變得更加簡潔易用,而且還結(jié)合了更多的功能以便于查找(附近或室內(nèi)地圖等)。例如: 使用附近功能,可以方便查看附近的位置(餐館、商店……),這多虧了使用了這些圖標(biāo)。
說實(shí)話,我喜歡將功能分類的方式。但是,Apple 地圖高度關(guān)注用戶當(dāng)前位置,使得附近這個(gè)功能更加復(fù)雜。雖然附近功能允許查詢?nèi)魏蔚胤?,但根?jù)我們自己的位置去進(jìn)行可視化,需要付出更多的努力。這與 Apple 地圖的簡潔性明顯不符,但在我看來,正是因?yàn)槿绱瞬攀沟肁pple 地圖在競爭對手中脫穎而出。
身為一個(gè)設(shè)計(jì)師,好奇心驅(qū)使我特別想知道:為什么不尋找機(jī)會改善附近功能,從而使體驗(yàn)變得更好呢?
角色
我是這個(gè)項(xiàng)目唯一的設(shè)計(jì)師。
我做了一些用戶研究,但是沒有根據(jù)我的個(gè)人假設(shè)去進(jìn)行設(shè)計(jì)。由于我無法獲得定量數(shù)據(jù),因此我進(jìn)行了一項(xiàng)基于定性的研究。我還繪制了草圖,咨詢反饋,再次繪制,并用了Adobe XD的“自動動畫”功能。
注釋:
- 我不在 Apple 工作,我不認(rèn)識這家公司的人,這個(gè)項(xiàng)目不是他們的觀點(diǎn),而是我自己的觀點(diǎn)。
- 這只是一個(gè)有趣的練習(xí),所以,我的目標(biāo)不是讓他人覺得我比 Apple 或設(shè)計(jì)界的任何人都厲害,我還有很多東西需要學(xué)習(xí)。
- 主要是為了運(yùn)用我在 UX 中學(xué)到的知識,和去提高我的設(shè)計(jì)水平和英語寫作技巧。
- 我對任何一種批評都持開放的態(tài)度,從“廢話”到“贊美”,甚至對一些建設(shè)性意見都會給予獎勵,請不吝賜教。
設(shè)計(jì)策略
開始前,用研相關(guān)的事
為了理解用戶如何了解 Apple 地圖,我選擇在上下文中進(jìn)行觀察,包括以下問題:
- 正在做什么?
- 為什么使用 Apple 地圖?
- 想要做什么?
- 如何查找餐館?
- 剛剛做了什么?為什么?
首先,我觀察他們?nèi)绾问褂?Apple 地圖,然后向他們詢問有關(guān)的特定功能——“附近功能”的問題。
這能夠讓我換位思考,他們使用Apple 地圖,并通過對他們的操作行為以及對系統(tǒng)響應(yīng)的下意識反應(yīng)的研究,去獲得一些見解。
列出“附近”相關(guān)的基礎(chǔ)概念
作為 Apple 地圖的用戶,我感到驚訝的是,基于我以外的位置使用附近功能所需的操作數(shù)量是多少。我對于用戶怎么在情景中去使用附近這個(gè)功能,以便于在我的假設(shè)中尋求安慰感到有興趣。
即便在一般情況下,對附近的使用是非常具有情境化的,但當(dāng)暴露時(shí),這種體驗(yàn)也會令人感到不舒服。用戶需要執(zhí)行中間操作,例如:將地圖集中在特定位置、調(diào)整縮放等,某些操作可能重復(fù),或要求從頭開始。
最重要的是,中間有的操作涉及高認(rèn)知負(fù)荷,不能直接訪問任何信息,還會導(dǎo)致其他操作。而這些操作有一個(gè)共同點(diǎn):都是直接在地圖上進(jìn)行的。
我思考這個(gè)問題:“問題的根源是在地圖上還是在菜單中呢?”
可以肯定的是,我將用戶與 Apple 地圖交互分為 3 種方式:輕車熟路(Confident)、小心探索(Explorer)以及因循守舊(Old-School)。
當(dāng)把它放到使用附近功能操作的背景中時(shí),感情和想法就會表達(dá)出來,古板的的做法可能會帶來更多的負(fù)面和不必要的麻煩。
大多數(shù)中間操作都屬于 Old-School,感情變得更加消極,想法往往更加以問題為導(dǎo)向。在這個(gè)階段,一些用戶可能會懷疑或不清楚,這樣的情況就會導(dǎo)致他們產(chǎn)生一些不必要的思考。
問題的根源更多地與缺乏背景和目的相關(guān),為了解決這個(gè)問題,用戶依賴他們熟悉的操作,基于所顯示的內(nèi)容進(jìn)行操作(Confident 與 Explorer 兩者的結(jié)合)。
為了提供一個(gè)潛在解決方案,這個(gè)方案能夠改善附近功能的體驗(yàn),并且不會破壞 Apple 地圖的工作方式,我將以下目標(biāo)設(shè)定為指導(dǎo)方針:
- 減少使用“附近”的操作數(shù)量;
- 減少認(rèn)知負(fù)荷;
- 為所執(zhí)行的操作提供更多背景信息。
創(chuàng)造性的進(jìn)行描述
為了實(shí)現(xiàn)這些目標(biāo),我遵循自己的直覺,探索 Apple 地圖功能,查閱 Apple 的 Human Interfaced Guidelines,詢問用戶反饋,當(dāng)然還有繪制線框圖、放棄、再次繪制……同時(shí)做了進(jìn)一步的研究。
在搜索地點(diǎn)前……
在深入了解線框圖前,我想著如何繼續(xù)簡化訪問附近功能。
我注意到,在 Apple 地圖中這些功能無法輕松訪問。并不是說這不好,但在某些情況下,可能顯得單調(diào)無趣,例如:從先前搜索的菜單到達(dá)附近界面,需要返回搜索欄并關(guān)閉至少一個(gè)菜單。
解決這個(gè)問題的一種方法是,從當(dāng)前所選地點(diǎn)給出訪問附近菜單的權(quán)力。
按鈕是來表示這一方法的有趣方式,只需要一個(gè)簡單的提示:點(diǎn)擊。通過添加這樣的組件,可以減少訪問附近功能的背后的復(fù)雜性。
無需打開菜單,也不需要關(guān)閉后重新打開另一個(gè)菜單。
“讓我們從一個(gè)簡單的按鈕開始?!?/p>
就像上面說的,應(yīng)該可以直接從搜索地點(diǎn)的菜單中找到附近功能,無論是地址、餐廳,還是酒店等。
如果我把這個(gè)按鈕放在“方向”附近會怎樣呢?
看起來很有意思……但也不能放到任何位置。例如:在美食場景下,可以有兩個(gè)按鈕:一個(gè)“預(yù)訂”,一個(gè)“方向”。因此,如果“搜索附近”按鈕出現(xiàn),則需要考慮在兩個(gè)級別組織按鈕:
菜單看起來很擁擠,如果想查詢某個(gè)地方的更多信息,就需要下滑瀏覽。水平模式下,這個(gè)體驗(yàn)并不十分友好:在這種情況下,三個(gè)按鈕將相互疊加。
此外,在商場和機(jī)場等地方,由于室內(nèi)地圖相關(guān)的圖標(biāo)已經(jīng)放置在按鈕下,因此添加更多組件就顯得無關(guān)緊要了。
順便說一句,這個(gè)功能的組織方式非常有趣。假設(shè)菜單是地方,圖標(biāo)就是里面的圖標(biāo),即使在界面中,在另一個(gè)中也會尊重當(dāng)前既有的概念。
我以為我應(yīng)該像處理附近功能一樣做后續(xù)的事情,按鈕應(yīng)位于菜單附近的某個(gè)位置,這樣就會……
“一個(gè)更好的簡單按鈕?!?/p>
那么,如果我將此按鈕放在菜單頂部會怎樣呢?
由于右側(cè)已經(jīng)有天氣標(biāo)簽,因此只能考慮左側(cè)和中間的位置了。
在查找解決方案時(shí),我發(fā)現(xiàn)了一篇非常有趣的帖子,是關(guān)于 iPhone 屏幕上拇指可達(dá)性及其對移動體驗(yàn)影響的文章。
這讓我覺得最好的選擇是:盡可能允許用戶以最自然的方式觸達(dá)按鈕,而不需要用戶界面。因此,我使用熱圖檢查了 Apple 地圖上的可達(dá)性。
雙方在可達(dá)性方面表現(xiàn)良好。
但是,如果設(shè)置在屏幕的中央,那么,按鈕在地圖上的組織方式看起來不太平衡。在地圖的右側(cè),可以看到它們占據(jù)了頂部和底部兩個(gè)位置。因此,水平設(shè)置相同的組織方式以保持一定的視覺平衡是有意義的。
我選擇在左邊設(shè)置“搜索附近”按鈕,在天氣標(biāo)簽的對側(cè)。
對于擅長用左手的用戶,即便他們不代表大多數(shù)智能手機(jī)用戶(根據(jù) Steven Hoober 的文章擅于用左手的用戶占比大約為 33%),我需要考慮他們的使用習(xí)慣,來確保我做出了更好的決定。
從上圖中可以看到,該按鈕仍可被觸達(dá)。三分之一處仍在安全區(qū),另外三分之一處于拉伸區(qū)。這意味著需要稍微多一些努力,但不能達(dá)到完全可用性的水平。這并沒有對我把它放在左邊的選擇產(chǎn)生影響。
有時(shí),需要做出妥協(xié),不是么?
現(xiàn)在關(guān)于按鈕的尺寸,我對它們進(jìn)行了調(diào)整,使它們適合所有可用的國家/地區(qū)的語言。
我不希望標(biāo)簽被切割,因?yàn)樗拇笮】赡軙鶕?jù)某些用戶設(shè)置的語言進(jìn)行變化。例如:在法語中,標(biāo)簽“Rechercher à proximité”(搜索附近)變?yōu)椤癛echercher…“(搜索)時(shí)會被誤解。
按鈕現(xiàn)在的設(shè)計(jì)方式與界面本身的接近概念相似,很方便觸及,并且“靠近”菜單。
為了在用戶與地圖交互時(shí)獲得最佳可見性,按鈕會消失……并且一旦將手指從屏幕上移開就會重新出現(xiàn)。
“那么,點(diǎn)擊這個(gè)按鈕會發(fā)生什么呢?“
會到達(dá)菜單界面,標(biāo)題明確地展示搜索的位置。我將搜索欄中的文本更改為“搜索位置”,以便更準(zhǔn)確地引導(dǎo)用戶可輸入的內(nèi)容是什么。
搜索欄下方的那行已被刪除,用以減少“附近”和“搜索”之間的界限,他們屬于同一目標(biāo):搜索。
這兩個(gè)功能在 Apple 地圖網(wǎng)站上的顯示方式已經(jīng)證實(shí)了這一點(diǎn),它們在同一部分中有所說明,與室內(nèi)地圖不同,后者有自己的特色。所以,我認(rèn)為讓它們在視覺上有更強(qiáng)的關(guān)聯(lián)系是有意的。此外,標(biāo)題位于頂部,界面也會產(chǎn)生信息過載(應(yīng)該不止信息,認(rèn)知也會)。
在子類別(例如:美食)中,我對標(biāo)簽做了一些小的調(diào)整,指定列出的熱門地點(diǎn)所在的區(qū)域。
讓我們回顧一下:有一個(gè)按鈕,它會引導(dǎo)我們到菜單去搜索附近的地方,這樣做怎么樣?
搜索地點(diǎn)
結(jié)果顯示時(shí),它們將在地圖和列表中進(jìn)行組織。也正是在這個(gè)時(shí)刻,會導(dǎo)致高認(rèn)知負(fù)荷的行為。
基本上,他們都要求用戶處理,為了讓最初選的地點(diǎn)位于結(jié)果中的位置變得更加可視化。一個(gè)有趣的選擇,更明確地呈現(xiàn)它們的展示方式。
讓我們從地圖開始。
在地圖上展示圖標(biāo)
我想在搜索結(jié)果中突顯所選地點(diǎn)的圖標(biāo),這樣,用戶不必重新定位地圖或隨機(jī)選擇地點(diǎn)來找到已執(zhí)行搜索的地圖。
“如果地圖上顯示的地點(diǎn)與之前選擇的地點(diǎn)屬于同一類別會怎樣?”
——來自一位富有洞察力的用戶的十分有趣反饋
我腦海中浮現(xiàn)出一個(gè)簡單的想法:讓最初選擇的圖標(biāo)比其他的大一些,使其脫穎而出。
為了加強(qiáng)圖標(biāo)之間的對比度和差異,我建議用一個(gè)圈圈出它,這是從“我的位置”圖標(biāo)中得到的靈感。
在了解這個(gè)想法如何適合應(yīng)用之前,讓我們看看列表。
在列表中:與搜索的背景保持一致
再次,確保根據(jù)某個(gè)地方定位,菜單中明確地顯示結(jié)果。
我在如下選項(xiàng)中猶豫不決:
- 保持搜索欄,然后添加搜索指定的標(biāo)題;
- 刪除它。
在這個(gè)階段,重點(diǎn)是搜索結(jié)果。其可見性應(yīng)是最佳的,用戶可以在不被太多信息淹沒的情況下查看結(jié)果。
此外,我收到了一些關(guān)于搜索欄的反饋:“不管怎樣我都無法恢復(fù)打字,這個(gè)建議消失了,而且只有結(jié)果中只顯示了列表。”
因此,我想刪除搜索欄,并將標(biāo)題放在搜索的位置。
讓我們看一下列表,以及來自同類型的搜索結(jié)果的點(diǎn)如何展示。
我選擇重現(xiàn)室內(nèi)地圖功能樣式,在標(biāo)題之前放置了所屬類別的圖標(biāo),來保持 Apple 地圖的視覺識別。我還希望減少頂部文本,讓菜單顯得更加令人愉悅。
如果某些用戶在搜索欄中輸入了品牌名稱,則該圖標(biāo)將成為搜索圖標(biāo)。列表的標(biāo)題用一些引號括起來表示起作為引用,表明結(jié)果來自特別聲明的內(nèi)容,而不是在附近圖標(biāo)中選擇的類別。
現(xiàn)在,回到有關(guān)搜索欄的反饋中,如果有些用戶想要返回后者,他們只需要關(guān)閉菜單,鍵盤自動調(diào)動并允許恢復(fù)輸入。這樣的話,不需要額外的操作,并且與原始版本不同,輸入時(shí)提示的建議仍然可見。
讓我們來看看上面所說的內(nèi)容的流程:
它似乎不像以前那么復(fù)雜,不需要猜測或估計(jì)搜索地點(diǎn)的位置。與原始流程相比,現(xiàn)在的流程擁有更少的步驟,沒有更多的決策階段和認(rèn)知負(fù)荷。此外,不再有循環(huán),并且遵循更精確的順序進(jìn)行操作。
但就這么結(jié)束這個(gè)案例研究還“太早”了,查看搜索結(jié)果會是怎樣呢?
在搜索后,進(jìn)行查看
考慮標(biāo)準(zhǔn)選擇(人氣、距離、價(jià)格)
通常,用戶根據(jù)不同的標(biāo)準(zhǔn)選擇地點(diǎn)。假設(shè)這些地方都是餐館,用戶可以考慮價(jià)格水平(\(、\)\(、\)$$)、受歡迎程度或距離。
“如果我打算在大學(xué)餐廳以外的地方吃午飯,我會考慮最近的餐廳,以免上課遲到?!?/p>
——某學(xué)生
問題是,如果他們想根據(jù)這些標(biāo)準(zhǔn)選擇餐館,可能需要他們查看整個(gè)列表:即使是列表底部的餐館也可能適合他們。不過,Apple 公司做得不錯,列表不長并且只列出了和該地區(qū)最相關(guān)的地方。但我很想探索如何使其更加簡化,就是:“排序”。
默認(rèn)情況下,我將結(jié)果按距離進(jìn)行排序以適合“附近”功能。使用“排序”,用戶還可以按人氣和價(jià)格對其進(jìn)行排序。如果某些地方?jīng)]有任何價(jià)格指示或評論,則將它們放在列表的末尾。通過這種方式,即使某些結(jié)果缺少此類信息,排序仍可奏效。
只有在列表完全展現(xiàn)時(shí)才可訪問,我認(rèn)為這兩者更為相關(guān)。對我來說,當(dāng)列表中只有兩個(gè)位置可見時(shí),沒有任何意義??臻g是珍貴的,必須不惜一切高效利用空間。
地址問題
另一件事是,有時(shí)一些地方屬于同一地址。
那么,如果其中一個(gè)是搜索結(jié)果所在的位置會怎樣呢?
無論發(fā)生什么,初始位置必須保持可見(搜索都是基于這個(gè)位置),我決定將其設(shè)置為該組的“起點(diǎn)”,這意味著其標(biāo)簽優(yōu)先于組中的其他位置顯示在地圖上。
除此之外,其工作方式與標(biāo)準(zhǔn)的場所群相同:點(diǎn)擊后,會展現(xiàn)一個(gè)列表,用戶可以選擇其中一個(gè)。
便于兩個(gè)地方之間的可視化操作
通常,當(dāng)用戶在地圖上查看搜索結(jié)果時(shí),他們會點(diǎn)擊每個(gè)地方的圖片。但是當(dāng)他們需要更多地了解搜索結(jié)果與最初選擇的位置的距離時(shí)(假設(shè)他們想知道的超過它們之間的距離),他們將面臨一個(gè)痛苦的過程。
看到兩個(gè)地方在屏幕上都可見,這可能會更令人沮喪。
你可能會說“這挺讓人意外的”,但確實(shí)發(fā)生了,你能想象用戶會經(jīng)歷什么嗎?為什么不用更簡單的方式使其可視化呢?
一個(gè)潛在的解決方案是使地圖能夠縮放,并顯示當(dāng)前地點(diǎn)和之前選擇地點(diǎn)之間的路線。
但最初,用戶可以選擇地圖上的任何位置而無需縮放或平移。通過這個(gè)提議,用戶需要習(xí)慣于在“選擇地點(diǎn)-關(guān)閉菜單-選擇地點(diǎn)-關(guān)閉菜單”等的時(shí)候自動更改縮放級別,這不斷重復(fù)這樣的操作時(shí)會很煩人。
因此,一個(gè)更高效的方案是——為用戶提供更多控制,以便他們在需要時(shí)調(diào)整地圖。
這樣就有了“查看”,允許用戶在不退出地點(diǎn)菜單的情況下切換路線。
開始,我想使用圖標(biāo)來表示“查看”模式,但在詢問反饋并研究這種可能性之后,我開始明白,當(dāng)面對一個(gè)能夠準(zhǔn)確解釋模式目標(biāo)而不是圖標(biāo)時(shí),用戶會更放心。所以,我提出了標(biāo)簽化“查看路線”。
激活該模式會放大地圖,以使路線查看足夠詳細(xì),取消激活將會使縮放和視圖重置為初始狀態(tài)。
縮放設(shè)置在允許用戶查看其他搜索結(jié)果的級別,尤其是位于當(dāng)前所選位置附近的結(jié)果。當(dāng)點(diǎn)擊其中一個(gè)時(shí),地圖會自動居中到其位置,并允許用戶在不費(fèi)力的情況下進(jìn)行查詢。此外,他們也可以查詢到不在結(jié)果中的地方的路線。
“方向”按鈕的標(biāo)簽已調(diào)整為更明確的標(biāo)簽,對于某些用戶來說,他們不認(rèn)為點(diǎn)擊按鈕會突顯路線菜單。為此,他們可以直接點(diǎn)擊屏幕上的路線。當(dāng)然,它要求我犧牲標(biāo)簽下的該路線所用時(shí)長信息。
這樣用戶不需要改變起始點(diǎn),默認(rèn)情況下,起始點(diǎn)是他們自己的位置,因此節(jié)省了很多努力。
調(diào)整附近功能
為了保持一致性,在整個(gè) Apple 地圖中,使所有功能看起來都一樣。
但是,我將“查看”只用于基于用戶之外的位置查詢。
為什么?因?yàn)楦鶕?jù)用戶的位置,查看路線很容易,只需要點(diǎn)擊“方向”。 使用“查看”,用戶將顯示路線,然后點(diǎn)擊它查看詳細(xì)信息,而點(diǎn)擊一次經(jīng)典的“方向”按鈕也能做到這個(gè)。
不要忘記附近不可見的區(qū)域
由于該功能尚未在世界各地使用,搜索欄是在這種情況下搜索附近地點(diǎn)的唯一方法。
此外,我沒有對此進(jìn)行驗(yàn)證,但我認(rèn)為使用搜索欄時(shí)的方法,是基于其對用戶的熟悉程度和可學(xué)習(xí)性(Confident 方式)。因此,這可以成為附近概念的一個(gè)受歡迎的捷徑。
例如:根據(jù) Palace Hotel 酒店的位置,輸入“Starbucks near Palace Hotel”或“Startbucks Palace Hotel”可以快速到達(dá)星巴克相關(guān)的列表。為了更直觀,確保在用戶輸入單詞后,搜索欄下會顯示一條建議。例如:一旦他們輸入了“Starbucks”,就會出現(xiàn)一個(gè)建議,即“地圖名稱附近的星巴克”,這可能暗示他們了解接下來要做什么。
結(jié)論
這是我的第一個(gè)案例研究小結(jié),這是一個(gè)很好的機(jī)會,讓我提高 UX 設(shè)計(jì)方面的知識。
我知道我提出的概念并沒有什么新內(nèi)容,如果 Apple 地圖團(tuán)隊(duì)之前已經(jīng)考慮過,我也不會感到驚訝。不過,我想體驗(yàn)一下如何基于研究和用戶反饋進(jìn)行設(shè)計(jì)。
即使這不是一些嚴(yán)苛的工作,我也把它當(dāng)成了工作并且沿途學(xué)到了很多新東西。我很感激我在整個(gè)用戶體驗(yàn)之旅中采取的錯誤方式,讓我發(fā)現(xiàn)了非常有趣的文章、博客和設(shè)計(jì)方面等的內(nèi)容。我相信,這些方面對我的職業(yè)生涯將有很大幫助。
順便說一句,這里列出了我在這次旅程中所經(jīng)歷的一切:
- 扔掉一個(gè)設(shè)計(jì)師花時(shí)間想的概念,是很痛苦的;
- 嘗試使用 Photoshop 和 AdobeXD 的“自動動畫”;
- 設(shè)計(jì)時(shí)考慮一些限制(Apple 地圖 UI以及地圖標(biāo)簽上的約束);
- 設(shè)計(jì)地圖應(yīng)用;
- 當(dāng)只需一個(gè)按鈕解決所有問題時(shí),結(jié)束復(fù)雜的概念。
就像我在介紹中所說的那樣,歡迎你你隨時(shí)可以對此案例研究提出任何反饋!
謝謝你的閱讀!
原文地址:https://uxdesign.cc/apple-maps-nearby-but-not-near-you-a-ux-case-study-97e499d79a2b
#專欄作家#
鄭幾塊,微信公眾號:PMJikuair,人人都是產(chǎn)品經(jīng)理專欄作家,前新浪微博產(chǎn)品經(jīng)理,寫的都是體驗(yàn)感受。
本文系作者@鄭幾塊 獨(dú)家授權(quán)發(fā)布,未經(jīng)本站許可,不得轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!