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
留言分享你的想法!
avatar-img
我是巧達
0會員
1內容數
我是一名 UI/UX 設計師,在這裡記錄工作與生活中的小事。這裡不只是設計心得,也有我嘗試各種科技的新鮮趣事——像最近在跟 AI 搭檔寫程式的奇妙歷程。生活、設計、科技。
你可能也想看
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News