[W4D3] 브런치의 UX를 개선해보자 - PMB 코드스테이츠 11기

 

[W4D1] '브런치'의 UX를 분석해보자 - 코드스테이츠 PMB 11기

 

앞서 분석한 브런치의 UX의 포인트는 아래와 같습니다.

 

개인적으로 느낀 좋은 UX

 

1. 애니메이션을 통한 자연스러운 인터렉션

2. 데스크톱, 모바일, 테블릿 PC 앱 모두에 적용된 통일성 있는 디자인

3. 작가와 독자 모두에게 제공되는 연동성

4. 글을 작품으로 만들어주는 공간

 

 

개인적으로 아쉬웠던 UX

 

1. 인디케이터가 없는 브런치 홈 화면

2. 다소 불편한 햄버거 메뉴

3. 작가의 서랍과 글쓰기 기능의 간결화

4. 모호한 기준의 브런치 나우

 

 

 

해당 문제점을 바탕으로 Flow 측면에서 어떠한 UX 개선안을 도출해야할지
서비스 이용자의 관점으로 조금 더 분석해보도록 하겠습니다.

---

브런치 나우

 

문제해결의 우선순위로 두었던 브런치 나우부터 보자면

해당 메뉴는 실시간 트렌드에 맞춰 글을 카테고리로 나눠 추천해주는 기능입니다.

따라서 어떠한 시점에 브런치 나우에 접속하느냐에 따라 접근할 수 있는 카테고리가 달라집니다.

 

브런치 나우에서 제가 아쉬웠던 UX로 뽑은 부분은 카테고리 명칭이 부족하고

순서 역시 어떠한 기준이 없이 나열되어 있기 때문에

새로운 글을 추천하는 기능으로서 사용자에게 편의를 제공하지 못하고 있다고 판단하였습니다.

 

하지만 브런치 나우가 카테고리를 나열하는데 있어 특정한 기준이 있다고 하더라도

실시간으로 바뀌는 콘텐츠라면 어차피 이 기준에 맞춰 순서가 실시간으로 반영되어야하기 때문에

여전히 사용성이 떨어지는 것은 매한가지입니다.

 

예를 들어 카테고리 나열 기준이 가나다순이라서

'그림 작가 >> 디자인 스토리 >> 알수록 좋은 경제 >> 패션 디자인'의 순서로 리스트업되었다고 합시다.

이후 실시간 콘텐츠를 반영하여 디자인 스토리와 알수록 좋은 경제가 빠지고

강아지와 한국 축구 분석이 트렌드로 떠서 이를 반영하며 가다나순으로 나열한다면

'강아지 >> 그림 작가 >> 패션 디자인 >> 한국 축구 분석'의 순서로 리스트업될 것입니다.

이는 결국 '가다다순'이라는 명백한 기준이 있음에도 불구하고

사용자 입장에서는 첫번째 카테고리였던 그림 작가 카테고리의 위치가 두번째로 바뀌는 것이기 때문에

사용성 입장에서는 그리 좋은 영향을 주지 못하는 것입니다.

 

따라서 저는 카테고리의 순서에 대한 기준으로 나열하는 것이 아니라

마이크로카피를 통해 카테고리의 큰 틀을 잡는 방향으로 개선하고 싶습니다.

 

카테고리의 그룹화

W4D1에 분석글 작성 시 제게 떴던 카테고리를 비슷한 틀로 그룹화해보았습니다.

사실 조금 동떨어지는 주제라 그룹화 자체가 쉽진 않았지만

어느 정도 틀의 기준을 만들어 사용자에게 제시하고

이를 마이크로카피로 그 틀을 짧게 설명한다면 사용성이 더 올라갈 것이라 생각했습니다.

 

 

 

브런치 홈

브런치 홈의 경우 세로로된 캐러셀에 인디케이터를 추가할 필요가 있습니다.

해당 문제점에 대해서 토론과 발표를 통해 동기님들의 의견을 들을 기회가 생겼는데

브런치 홈이 세로로 스와이프가 가능하다는 점을 인지하지 못한 저의 경험에

공감해주시는 분들이 생각보다 많아서 이 점을 꼭 개선해야겠다고 마음 먹게 되었습니다. (감사해욤..❤)

 

브런치 홈을 스와이프할 경우 제공되는 콘텐츠는 대략적으로 아래와 같이 이루어져있습니다.

<브런치가 추천하는 글> <브런치 독자들이 사랑한 글> <오늘의 브런치북을 만나보세요>
<brunch book> <오후 2시, 브런치 인기글> <do you like it?>

해당 콘텐츠 역시 큰 카테고리를 기준으로 제공하되

인디케이터가 포함되어 조금 개선된 디자인으로 제공하고 싶습니다.

 

 

햄버거 메뉴와 작가의 서랍 및 글쓰기

해당 사항이 갖고 있던 UX 문제는

햄버거 메뉴의 인터렉션을 개선하고 아이콘과 버튼 위치 등의 UI를 수정하는 방향으로 개선할 것입니다.

 

 

 

이를 바탕으로 페이퍼 프로토타입을 제작해 봅니다.

페이퍼 프로토타입을 구체적으로 제작하기에 앞서 간단하게 앱을 이용해 와이어프레임을 그려봤습니다.
이후 작업한 페이퍼 프로토타입은 아래와 같습니다.

이게 맞나

와이어프레임에 추가적으로 플로우를 그려봤습니다.
브런치 홈의 경우 두가지의 디자인 시안을 생각해보았습니다.
브런치 앱 자체의 프로토타입을 구현하면 좋겠지만 그러면 일이 너무 커질 것 같기 때문에
우선적으로 개선하고 싶었던 UX 위주로 제작해보았습니다.

해당 프로토타입을 분석한 '서비스 기획 산출물'을 작성해 봅니다.

요구사항정의서