全栈工程师?
嗯.....目前并不是!

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 地圖中這些功能無法輕鬆訪問。並不是說這不好,但在某些情況下,可能顯得單調無趣,例如:從先前搜索的菜單到達附近界面,需要返回搜索欄並關閉至少一個菜單。

解決這個問題的一種方法是,從當前所選地點給出訪問附近菜單的權力。

按鈕是來表示這一方法的有趣方式,只需要一個簡單的提示:點擊。通過添加這樣的組件,可以減少訪問附近功能的背後的複雜性。

無需打開菜單,也不需要關閉后重新打開另一個菜單。

“讓我們從一個簡單的按鈕開始。”

就像上面說的,應該可以直接從搜索地點的菜單中找到附近功能,無論是地址、餐廳,還是酒店等。

如果我把這個按鈕放在“方向”附近會怎樣呢?

看起來很有意思……但也不能放到任何位置。例如:在美食場景下,可以有兩個按鈕:一個“預訂”,一個“方向”。因此,如果“搜索附近”按鈕出現,則需要考慮在兩個級別組織按鈕:

菜單看起來很擁擠,如果想查詢某個地方的更多信息,就需要下滑瀏覽。水平模式下,這個體驗並不十分友好:在這種情況下,三個按鈕將相互疊加。

此外,在商場和機場等地方,由於室內地圖相關的圖標已經放置在按鈕下,因此添加更多組件就顯得無關緊要了。

順便說一句,這個功能的組織方式非常有趣。假設菜單是地方,圖標就是裡面的圖標,即使在界面中,在另一個中也會尊重當前既有的概念

我以為我應該像處理附近功能一樣做後續的事情,按鈕應位於菜單附近的某個位置,這樣就會……

“一個更好的簡單按鈕。”

那麼,如果我將此按鈕放在菜單頂部會怎樣呢?

由於右側已經有天氣標籤,因此只能考慮左側和中間的位置了。

在查找解決方案時,我發現了一篇非常有趣的帖子,是關於 iPhone 屏幕上拇指可達性及其對移動體驗影響的文章。

這讓我覺得最好的選擇是:儘可能允許用戶以最自然的方式觸達按鈕,而不需要用戶界面。因此,我使用熱圖檢查了 Apple 地圖上的可達性。

雙方在可達性方面表現良好。

但是,如果設置在屏幕的中央,那麼,按鈕在地圖上的組織方式看起來不太平衡。在地圖的右側,可以看到它們佔據了頂部和底部兩個位置。因此,水平設置相同的組織方式以保持一定的視覺平衡是有意義的。

我選擇在左邊設置“搜索附近”按鈕,在天氣標籤的對側。

對於擅長用左手的用戶,即便他們不代表大多數智能手機用戶(根據 Steven Hoober 的文章擅於用左手的用戶佔比大約為 33%),我需要考慮他們的使用習慣,來確保我做出了更好的決定。

從上圖中可以看到,該按鈕仍可被觸達。三分之一處仍在安全區,另外三分之一處於拉伸區。這意味着需要稍微多一些努力,但不能達到完全可用性的水平。這並沒有對我把它放在左邊的選擇產生影響。

有時,需要做出妥協,不是么?

現在關於按鈕的尺寸,我對它們進行了調整,使它們適合所有可用的國家/地區的語言。

我不希望標籤被切割,因為它的大小可能會根據某些用戶設置的語言進行變化。例如:在法語中,標籤“Rechercher à proximité”(搜索附近)變為“Rechercher…“(搜索)時會被誤解。

按鈕現在的設計方式與界面本身的接近概念相似,很方便觸及,並且“靠近”菜單。

為了在用戶與地圖交互時獲得最佳可見性,按鈕會消失……並且一旦將手指從屏幕上移開就會重新出現。

“那麼,點擊這個按鈕會發生什麼呢?“

會到達菜單界面,標題明確地展示搜索的位置。我將搜索欄中的文本更改為“搜索位置”,以便更準確地引導用戶可輸入的內容是什麼。

搜索欄下方的那行已被刪除,用以減少“附近”和“搜索”之間的界限,他們屬於同一目標:搜索

這兩個功能在 Apple 地圖網站上的顯示方式已經證實了這一點,它們在同一部分中有所說明,與室內地圖不同,後者有自己的特色。所以,我認為讓它們在視覺上有更強的關聯繫是有意的。此外,標題位於頂部,界面也會產生信息過載(應該不止信息,認知也會)。

在子類別(例如:美食)中,我對標籤做了一些小的調整,指定列出的熱門地點所在的區域。

讓我們回顧一下:有一個按鈕,它會引導我們到菜單去搜索附近的地方,這樣做怎麼樣?

搜索地點

結果顯示時,它們將在地圖和列表中進行組織。也正是在這個時刻,會導致高認知負荷的行為。

基本上,他們都要求用戶處理,為了讓最初選的地點位於結果中的位置變得更加可視化。一個有趣的選擇,更明確地呈現它們的展示方式。

讓我們從地圖開始。

在地圖上展示圖標

我想在搜索結果中突顯所選地點的圖標,這樣,用戶不必重新定位地圖或隨機選擇地點來找到已執行搜索的地圖。

“如果地圖上顯示的地點與之前選擇的地點屬於同一類別會怎樣?”

——來自一位富有洞察力的用戶的十分有趣反饋

我腦海中浮現出一個簡單的想法:讓最初選擇的圖標比其他的大一些,使其脫穎而出。

為了加強圖標之間的對比度和差異,我建議用一個圈圈出它,這是從“我的位置”圖標中得到的靈感。

在了解這個想法如何適合應用之前,讓我們看看列表。

在列表中:與搜索的背景保持一致

再次,確保根據某個地方定位,菜單中明確地顯示結果。

我在如下選項中猶豫不決:

  • 保持搜索欄,然後添加搜索指定的標題;
  • 刪除它。

在這個階段,重點是搜索結果。其可見性應是最佳的,用戶可以在不被太多信息淹沒的情況下查看結果。

此外,我收到了一些關於搜索欄的反饋:“不管怎樣我都無法恢復打字,這個建議消失了,而且只有結果中只顯示了列表。”

因此,我想刪除搜索欄,並將標題放在搜索的位置。

讓我們看一下列表,以及來自同類型的搜索結果的點如何展示。

我選擇重現室內地圖功能樣式,在標題之前放置了所屬類別的圖標,來保持 Apple 地圖的視覺識別。我還希望減少頂部文本,讓菜單顯得更加令人愉悅。

如果某些用戶在搜索欄中輸入了品牌名稱,則該圖標將成為搜索圖標。列表的標題用一些引號括起來表示起作為引用,表明結果來自特別聲明的內容,而不是在附近圖標中選擇的類別。

現在,回到有關搜索欄的反饋中,如果有些用戶想要返回後者,他們只需要關閉菜單,鍵盤自動調動並允許恢復輸入。這樣的話,不需要額外的操作,並且與原始版本不同,輸入時提示的建議仍然可見。

讓我們來看看上面所說的內容的流程:

它似乎不像以前那麼複雜,不需要猜測或估計搜索地點的位置。與原始流程相比,現在的流程擁有更少的步驟,沒有更多的決策階段和認知負荷。此外,不再有循環,並且遵循更精確的順序進行操作。

但就這麼結束這個案例研究還“太早”了,查看搜索結果會是怎樣呢?

在搜索后,進行查看

考慮標準選擇(人氣、距離、價格)

通常,用戶根據不同的標準選擇地點。假設這些地方都是餐館,用戶可以考慮價格水平(/(、/)/(、/)$$)、受歡迎程度或距離。

“如果我打算在大學餐廳以外的地方吃午飯,我會考慮最近的餐廳,以免上課遲到。”

——某學生

問題是,如果他們想根據這些標準選擇餐館,可能需要他們查看整個列表:即使是列表底部的餐館也可能適合他們。不過,Apple 公司做得不錯,列表不長並且只列出了和該地區最相關的地方。但我很想探索如何使其更加簡化,就是:“排序”。

默認情況下,我將結果按距離進行排序以適合“附近”功能。使用“排序”,用戶還可以按人氣和價格對其進行排序。如果某些地方沒有任何價格指示或評論,則將它們放在列表的末尾。通過這種方式,即使某些結果缺少此類信息,排序仍可奏效。

只有在列表完全展現時才可訪問,我認為這兩者更為相關。對我來說,當列表中只有兩個位置可見時,沒有任何意義。空間是珍貴的,必須不惜一切高效利用空間。

地址問題

另一件事是,有時一些地方屬於同一地址。

那麼,如果其中一個是搜索結果所在的位置會怎樣呢?

無論發生什麼,初始位置必須保持可見(搜索都是基於這個位置),我決定將其設置為該組的“起點”,這意味着其標籤優先於組中的其他位置顯示在地圖上。

除此之外,其工作方式與標準的場所群相同:點擊后,會展現一個列表,用戶可以選擇其中一個。

便於兩個地方之間的可視化操作

通常,當用戶在地圖上查看搜索結果時,他們會點擊每個地方的圖片。但是當他們需要更多地了解搜索結果與最初選擇的位置的距離時(假設他們想知道的超過它們之間的距離),他們將面臨一個痛苦的過程。

看到兩個地方在屏幕上都可見,這可能會更令人沮喪。

你可能會說“這挺讓人意外的”,但確實發生了,你能想象用戶會經歷什麼嗎?為什麼不用更簡單的方式使其可視化呢?

一個潛在的解決方案是使地圖能夠縮放,並顯示當前地點和之前選擇地點之間的路線。

但最初,用戶可以選擇地圖上的任何位置而無需縮放或平移。通過這個提議,用戶需要習慣於在“選擇地點-關閉菜單-選擇地點-關閉菜單”等的時候自動更改縮放級別,這不斷重複這樣的操作時會很煩人。

因此,一個更高效的方案是——為用戶提供更多控制,以便他們在需要時調整地圖。

這樣就有了“查看”,允許用戶在不退出地點菜單的情況下切換路線。

開始,我想使用圖標來表示“查看”模式,但在詢問反饋並研究這種可能性之後,我開始明白,當面對一個能夠準確解釋模式目標而不是圖標時,用戶會更放心。所以,我提出了標籤化“查看路線”。

激活該模式會放大地圖,以使路線查看足夠詳細,取消激活將會使縮放和視圖重置為初始狀態。

縮放設置在允許用戶查看其他搜索結果的級別,尤其是位於當前所選位置附近的結果。當點擊其中一個時,地圖會自動居中到其位置,並允許用戶在不費力的情況下進行查詢。此外,他們也可以查詢到不在結果中的地方的路線。

“方向”按鈕的標籤已調整為更明確的標籤,對於某些用戶來說,他們不認為點擊按鈕會突顯路線菜單。為此,他們可以直接點擊屏幕上的路線。當然,它要求我犧牲標籤下的該路線所用時長信息。

這樣用戶不需要改變起始點,默認情況下,起始點是他們自己的位置,因此節省了很多努力。

調整附近功能

為了保持一致性,在整個 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協議

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《UX 案例研究 | Apple 地圖:附近,並非在你身邊》
文章链接:https://www.pmbear.com/archives/9311
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们