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