UX / UI 분석 및 개선

코드스테이츠 PMB 8기

instagram

인스타그램은 온라인 사진 공유 및 소셜 네트워크 서비스이다. 사용자들은 인스타그램을 통해 사진 촬영과 동시에 다양한 디지털 효과를 적용하여 인스타그램에 업로드하거나 페이스북, 트위터 같은 다른 SNS 서비스에 사진을 공유할 수 있다.

인스타그램에서 게시물을 업로드하는 Flow에서 UX 개선의 가장 큰 필요성을 느꼈던 부분은 사진에 대한 수정이나 삭제가 불가능하다는 점이다. 여러 장의 사진을 하나의 게시물을 통해 업로드했을 때, 사진의 일부를 삭제하거나 순서를 변경할 수 있는 기능이 부재된 까닭에 마음에 들지 않는 사진을 없애기 위해서는 게시물을 삭제하고 재업로드하는 수밖에 없다.

때문에 대부분 수정이나 삭제를 포기하고 기존 게시물을 두거나 게시물을 아예 삭제하는 방법으로 피드 정리를 하고 있다.

이러한 불편함을 감수할 수 있는 UI 개선 사항에 대해 프로토타입을 제작해봤다. (페이퍼 프로토타입을 그리려다 Figma로 도전)

instagram prototype

Ⅰ. 피드 화면에서 수정하고 싶은 게시물을 선택한다.

Ⅱ. 게시물의 ellipsis icon을 누른다.

Ⅲ. 생략되어 있던 메뉴들이 노출되면, Edit 버튼을 눌러 편집 모드에 진입한다.

Ⅳ. 이미지 우측 상단에 새롭게 만들어진 삭제 아이콘을 통해 지우고 싶은 사진을 삭제한다.

Ⅴ. 이때 스와이프 제스처를 통해 삭제하고 싶은 사진을 선택할 수 있다.

figma file