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地圖上標記下感興趣的位置。

vocus|新世代的創作平台

Step2:整理目前的流程

vocus|新世代的創作平台

Step3:低保真線框圖

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

1.學習性

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

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

2.可發現性

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

  • 輕鬆檢索已儲存的帖子

vocus|新世代的創作平台

Step4:設計迭代

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

vocus|新世代的創作平台

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
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
第 13 天:在專精的領域中,有沒有一個架構是可以分享給初學者學習的?以UI/UX設計師為例,如果你是一個完全門外的求職者,想要入門這行,今天分享一些簡略方法。
Thumbnail
第 13 天:在專精的領域中,有沒有一個架構是可以分享給初學者學習的?以UI/UX設計師為例,如果你是一個完全門外的求職者,想要入門這行,今天分享一些簡略方法。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News