UX Cases Study|Save it! — An Instagram UI/UX redesign心得

更新 發佈閱讀 5 分鐘



寫在前言

這篇文章的產生主要是為了UX三刀流共學社群的期中心得,以我參與到現在來看,很推薦如果對UX感興趣的大家可以上網搜尋加入,除了共學課程本身有內容以外,群內有很多有經驗的設計師在,看大家討論蠻有趣的。

(這篇文章本身有在Medium發表過,只是搬過來)

文章背景

保存!— Instagram UI/UX 重新設計
保存的不僅僅是帖子。blog.prototypr.io

回歸正題先來講一下我選這篇文章的原因還有這篇文章大致的背景。在這次提供的文章列表中,我選擇的第一條件就是選我自己也有在使用的。所以我原本選擇的是另一篇Redesign Youtube的文章,但是那篇文章要開會員才能看全文,我的貧窮限制了我XD 所以我就換了這篇Redesign Instagram的文章。

關於這篇文章的源起,作者表示是在自己與朋友滑IG時看見了不錯的餐廳,想要保存下來以後規劃行程,卻看見朋友用螢幕截圖的方式保存,讓作者開始了思考。

Step1:使用者研究

首先作者藉由觀察使用者的操作統整出了在 Instagram 上發現新地點時的使用者旅程地圖,並且劃出了以下重點:

  • 使用者會自然點擊貼文中標記的位置查看他們感興趣的地點的更多圖片。但是沒有多少人點擊「更多資料」來獲取更多詳細資訊。
  • 使用者會離開平台來閱讀評論。
  • 使用者在記事本/筆記本/google地圖上標記下感興趣的位置。

raw-image

Step2:整理目前的流程

raw-image

Step3:低保真線框圖

考慮了痛點以後,作者快速畫出了新流程的粗略草圖。新流程基於兩個重要的使用者體驗原則來修改:

1.學習性

讓使用者更容易了解他們剛剛發現的新地點。

  • 從貼文導航到位置資訊螢幕
  • 向使用者呈現重要訊息

2.可發現性

讓使用者更容易返回他們之前感興趣的地方的貼文。

  • 輕鬆檢索已儲存的帖子

raw-image

Step4:設計迭代

利用低保真線框圖收集回饋,根據回饋更改流程並且勾勒出完整流程。

raw-image

Step5:使用者原型測試

作者向使用者提供任務場景來測試中保真原型,並觀察他們如何使用原型。

Step6:設立KPI

作者設立了一些KPI來衡量這個專案是否成功,作者認為如果有達成下面的成就,那麼這個更新就是成功的。

  1. 增加標記位置的觀看次數。
  2. 對於擁有 Instagram 的企業(餐廳、咖啡館、當地景點等),追蹤者數量的增加應該很好地反映了這種流量的可行性
  3. 企業評論數量的增加也應該是可行性的一個很好的指標。
  4. 增加搜尋出現次數和/或增加貼文或故事中的標籤數量

評論

先說一下我覺得的優點的部分,我覺得作者是有意識地在進行使用者體驗的設計,而不是純純自嗨的redesign。包括會去收集使用者的資料與回饋以及設立KPI,能夠看出作者有跨出個人思考去看。

但是我覺得整篇也指僅限於跨出個人去看,作者所有的資料及論點都很單薄,論證的部分只有提出自己的論點,卻沒有一個好的證明。比如設立KPI的部分,作者提出了一些KPI來衡量這個專案是否成功,但為什麼是這些指標呢?作者並沒有好好說明指標與成功之間的關聯。

此外有一點是我認為很大的問題,我認為作者沒有考慮到Instagram本身的性質。

我原本選擇的是另一篇Redesign Youtube的文章,那篇文章在開頭講到了一個我蠻同意的觀點,許多Redesign在設計上對產品現有品牌的考慮為零。

在看這篇Redesign Instagram時我也看了我自己手機裡的APP,發現我自己完全沒使用到書籤的功能。其原因一方面是現有APP(2023/11)的設計上,把貼文加進書籤很方便,但去找自己加入過的書籤藏很深。

另一個原因是Instagram對我來說是社群軟體,這也是我對這篇Redesign比較大的疑惑(?),這篇文章的作者他是默認了使用者會需要在不離開Instagram的情況下保存並且了解新發現的地點(甚至是在IG上留下/查看評論),然後去進行重新設計。但是一個社群軟體的使用者真的需要一個可以評論餐廳的功能嗎?

或許先改進現有的書籤流程,會比加一堆功能更適合Instagram。

留言
avatar-img
我是巧達
0會員
1內容數
我是一名 UI/UX 設計師,在這裡記錄工作與生活中的小事。這裡不只是設計心得,也有我嘗試各種科技的新鮮趣事——像最近在跟 AI 搭檔寫程式的奇妙歷程。生活、設計、科技。
你可能也想看
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News