brunch

매거진 UX Writing프로젝트

라이킷 42 댓글 7

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX Writing Lab Aug 19. 2020

서울번드 제품 페이지 UX Writing 개선 과정

서울 번드를 통해 본 UX Writing 이해 시리즈

(1) 쇼핑몰 UX Writing 유형과 성격 정의

(2) 서울번드 메인 내비게이션 개선 UX Writing 과정

(3) 서울번드 제품 페이지 UX Writing 개선 과정(현재글)

서울번드 내비게이션의 변화

서울번드 메인 내비게이션에 대해 분석한 지난 글을 읽은 서울번드 담당자분들께서 공감과 감사를 주셨다. 몇 일 지나 홈페이지에 들어가 보니 변화가 있었다. 영어와 한글이 통일되지 않고, 영문 대문자의 가독성이 떨어진다는 부분을 언급했는데 메뉴가 다 한글로 바뀌었다.

서울번드 내비게이션 변경 전후 화면

한글로 바꾼 것만으로도 정말 가독성이 높아졌다.

한글의 힘이다.

쉬운 언어, 사용자 친화적인 언어의 시작은 한글 사용이다.

사용자 친화적인 웹사이트의 발걸음에 박수를 보낸다. 서울번드의 훌륭한 제품이 더욱 돋보이는 웹사이트가 될 수 있도록 지지와 응원을 보낸다.

그럼 이번 글의 주제인 제품 페이지로 들어가 보자.

1. 쇼핑몰 제품 페이지에서의 UX Writing 초점

서울번드 UX Writing 시리즈의 첫 번째 글인 (1) 쇼핑몰 UX Writing 유형과 성격 정의에서 고객의 경험 단계마다 UX Writing 의 초점이 어떻게 변하는지를 살펴보았다. 제품 페이지에 대해서 정리한 도표를 다시 한번 살펴보자.

이미지 출처. UX Writing Lab. 제품 페이지에서의 UX Writing

정리를 해보자면

1. 쇼핑몰 내에서 원활히 이동하기

2. 쇼핑몰만의 색깔과 특징을 녹여내기

3. 제품을 매력적으로 부각시키기

4. 정확하고 상세한 설명

5. 좋은 판매 기회를 강조하기

6. 다른 사람들이 어떻게 사용하는지 보여주기

7. 문의나 도움이 필요할 때 언제든 도와주기

제품 페이지에서의 글은 위의 7가지 역할을 수행하는 데에 기여해야 한다.

닐슨 노먼 그룹에서 발행한 Ecommerce 사용자 경험 보고서에서는 다음과 같이 말한다.

제품 페이지의 정보는
완전하고,
포괄적이고,
기대를 불러 일으키고,
사용자의 질문에 답해야 한다

이 보고서에서는 내용이 충분하지 않으면 사용자들은 검색이나 유사한 레벨의 다른 상품으로 이동한다고 말한다. 판매 기회의 상실이다. 그렇다고 정보가 너무 많은 것도 최선은 아니다. 필요한 정보를, 필요한 만큼 제공하는 것이 핵심이다.

제품 페이지에 대해서 이 보고서에서 강조한 내용을 좀더 상세하게 살펴보면

사진

다양한 각도, 실제 사용 환경에서의 사진,

확대 사진, 디테일 사진 등

제품 가격과 재고 현황

가격이 얼마인지,

할인을 한다면 얼마 만큼, 왜 할인되는지,

할인 가격은 얼마인지,

배송비나 기타 비용이 있는지,

재고가 넉넉한지,

구매 한도가 있는지 등

일관성

정보의 내용, 구조, 제시 방식이 일관되어야 한다.

리뷰

제품의 특징 뿐만 아니라 신뢰, 정확한 기대감을 제공할 수 있다.

사업자의 포괄적인 정보를 선호하는 사람도 있지만 실생활에서 다른 사용자들이 사용하는 구체적인 정보를 선호하는 사용자가 있다.

선택 표시

찜을 했는지, 장바구니에 넣었는지, 구매를 했는지 등을 쉽게 확인할 수 있어야 한다.

여기까지 제품 페이지의 역할을 개념적으로 정리했다. 이제 다른 쇼핑몰은 라이팅의 측면에서 어떻게 이 역할을 수행하고 있는지 분석해 보자. 분석 대상은 메인 내비게이션 분석에 이용한 5개의 쇼핑몰을 그대로 이용했다.

2. 쇼핑몰 제품 페이지 라이팅 분석

1) Collection. B

이미지. Collection B 페이지

선명한 사진이 상단에서 여러 장 전시된다. 하단 상세 페이지까지 가지 않아도 상품을 파악할 수 있다. 제품 설명이 짧게 제공되어 제품들 사이를 빠르게 훑어보거나 이미 상세 정보를 확인한 후 구매 결정을 고려하는 사용자들의 빠른 결정을 돕는다.

이미지. Collection B 페이지

제품의 달라지는 옵션에 따라 유동적으로 변하는 디자인이 맞춤처럼 딱 떨어진다.

이미지. Collection B 페이지

디자인 틀을 크게 방해하지 않고 할인, 쿠폰, 한정 상품 등의 특별 기회를 잘 부각시킨다.

이미지. Collection B 페이지

상세 정보는 4개의 탭으로 구성되어 있는데 각 탭은 분리된 페이지를 이룬다.

이미지. Collection B 페이지

제품 상세 정보를 일관된 포맷에 담았다. 브랜드 소개를 위한 통일된 템플릿이 제공된다. 디폴트로 접혀 있지만 더 보고 싶은 사람은 클릭하면 펼쳐볼 수 있다.

이미지. Collection B 닫혀진 브랜드 소개

이미지. Collection B 펼쳐진 브랜드 소개

제품 설명에도 일정한 디자인을 적용했다. 꼭 필요한 내용만 너무 길지도, 짧지도 않게 정리했다.

이미지. Collection B 페이지

제품명은 주로 영어를 썼지만 엄격하지는 않다. 제품명은 제품의 종류이기도, 특성이기도, 고유한 이름이기도, 느낌이기도 하다.

이미지. Collection B 페이지

Collection B 의 제품 페이지를 평가해 보면

좋은 점

깔끔한 디자인

일관된 포맷과 대체적인 준수

가독성 높은 제품명과 제품 설명

상단에 제시된 짧은 제품 설명

퀄리티 높고 다양한 이미지

브랜드, 디자이너 소개 템플릿

특별 판매 기회 알림: 히트 상품, 세일 가격, 쿠폰 적용 등

개선점

브레드크럼 내비게이션 필요

정갈한 디자인을 위해 강조될 부분들이 희생

2) 한샘몰

한샘몰은 대한민국을 대표하는 리빙 브랜드인 만큼 방대한 제품군과 입점 업체를 자랑한다. 상품별로 부각하거나 주의할 부분이 달라지는데 다양성을 포섭하는 유동적인 구조가 눈에 띈다.

제품 페이지 상단에는 제품 이미지보다 구매 관련 정보를 상세하게 제공한다.

이미지. 한샘몰

특히 배송, 설치가 중요한 가구가 주력이다 보니 배송 관련 정보가 상당히 상세하다.

배송비, 배송 가능 지역, 배송 예정일 정도는 쇼핑몰마다 보편적으로 제공되지만 한샘몰은 그보다 한층 더 구체적이다. 배송의 위치 기준점, 예상 도착일, 배송 불가능 지역 등...

할인이나 쿠폰이 적용된 가격도 확연히 구분되고 쿠폰의 제한 조건 등도 자세히 파악할 수 있다.

이미지. 한샘몰 배송, 쿠폰 관련 상세 정보

페이지 하단 배송탭에서 제공하는 배송 안내는 더욱 상세하다. 미리 준비해야 할 사항, 우천시, 추가 비용, 지역별 배송 요일 등 상당한 양의 궁금증과 걱정을 해결해 준다. 중요 궁금증을 상세히 안내함으로써 인터넷에서의 구매 결정에 큰 역할을 수행한다.

제품이 품절되면 장바구니 담기, 구매하기 버튼 대신 일시품절 버튼이 드러난다.

이미지. 한샘몰 일시 품절 버튼

제품 정보는 포괄적이고 상세하다. 배송에 대한 정보 뿐만 아니라 안전과 건강에 대한 안심, 인테리어 정보, 제품의 특장점, 시공, 함께 매치하면 좋은 상품 등 상세한 정보가 보인다. 이미지로 정성스럽게 제품 설명을 제시하지만 일관된 포맷은 없다.

이미지. 한샘몰, 상세 제품 정보

정보가 자세하다 보니 중복이 많다. 일관되고 깔끔한 포맷 없이 설명마다 저마다의 디자인을 적용해 제품을 찾아볼 때마다 동일한 기대감을 주지 못한다.

제품의 이름에는 일련의 규칙이 존재한다: [브랜드 이름(또는 이벤트)] 수식어 + 종류 + 사이즈(또는 모델명, 옵션, 특징 등)

이미지. 한샘몰, 제품명

폭넓은 제품군을 포괄하기 위해 제품명의 규칙을 정한 것은 좋으나 엄격하게 지키지 않아 상황이 생길 때마다 제품 이름에 들어간다. 점점 제품명이 길어져 핵심을 포착할 수 없고, 디자인이 지저분하다.

한샘몰의 제품 페이지를 평가해 보면

좋은 점

상세한 제품 정보: 배송, 할인, 설치, 제품 관련 정보 등, 고객의 근심, 궁금증, 질문을 해결

브레드크럼 내비게이션

상세한 제품명

다양한 판매 기회 안내: 할인, 쿠폰, 이벤트, 특가 등

리뷰, 연관 상품 링크

개선점

과도한 정보: 제품명, 제품 정보 등 정보의 양이 과도하여 중복이 많고 핵심이 눈에 들어오지 않는다.

복잡한 디자인: 핵심에 집중하는 힘이 떨어진다. 간소해야 중요한 부분이 부각된다.

제품명 원칙의 엄격한 적용

3. 29 CM

이미지 29cm 쇼핑몰

싱단에 브레드크럼과 브랜드이동 링크가 보인다. 짤막한 브랜드 설명이 있어 유용하다.

이미지 29cm 쇼핑몰

할인 내역이 명료하게 부각되어 혜택의 느낌이 확연하다.

얼마나 많은 사용자들이 구매하고 관심을 가지는지를 잘 볼 수 있다.

배송 정보가 미흡하다.

이미지 29cm 쇼핑몰

이미지 아래 탭에 배송 정보가 작게 보인다.

탭을 클릭하면 탭이 닫히면서 배송 정보가 사라진다.

제품 이름

이미지 29cm 쇼핑몰

몇 개를 뽑아 확대해 보자.

이미지 29cm 쇼핑몰, 제품이름 목록

한글, 영어가 혼재되어 있다. 브랜드가 있기도, 없기도 하다, 대문자 소문자도 혼재한다. 제품 이름의 일관된 원칙이 아쉽다.

좋은점

쇼핑몰을 원활히 돌아다닐 수 있는 명료한 브레드크럼

할인, 쿠폰, 적립 내역이 명확

용이한 브랜드쇼핑

사용자들의 관심을 확인하기 용이

개선점

가독성 높은 한글 사용

배송 정보 드러내기

상품명과 상품 정보의 엄격한 포맷

4. MADE.COM

제품 이름부터 살펴보자.

이미지 MADE.COM 제품 이름 목록

제품 이름만으로도 상품의 특징을 알 수 있다. 제품 이름은 고유명 + 제품의 종류 + 사이즈 또는 색상 또는 소재 로 정해진다. 제품 페이지에서는 고유명으로 짧게 노출하고 제품 목록에서 전체 이름이 길게 표시된다.

이미지 MADE.COM 제품 이름 짧은 버전

이미지 MADE.COM 제품 이름 긴 버전

제품의 주요한 특징이 이름 안에 들어가기 때문에 짧은 제품 설명을 대체한다. 제품명 규칙을 엄격하게 준수한다.

제품 페이지를 살펴보자.

이미지 MADE.COM

브레드크럼 위치가 직관적이다.

이미지 MADE.COM

제품 분류가 일원화되어 있어 브레드크럼 내비게이션은 글로벌 내비게이션과 동일하다. 따라서 브레드크럼의 흔적만으로도 분류, 위치를 쉽게 파악할 수 있다. 당연한 말 아니냐고?

당연하지 않다. 대부분의 쇼핑몰은 브레드 크럼이 없거나, 메인 내비게이션의 분류와 다르거나, 분류 체계가 불명확하다. 한샘몰의 브레드크럼과 비교해 보자.

이미지. 한샘몰 브레드크럼

수납/정리> 한샘 수납용품 > 의류수납 > 의류수납

제품 분류가 어딘가에서 중복된 것같다. 더구나 메인 내비게이션에서는 한샘 수납용품 아래 '의류수납'이라는 메뉴가 없다. '옷장수납'이다. 분류 체계 관리가 일원화되지 않은 결과이다.

MADE.COM은 상단 구매 영역의 포맷도 엄격한 포맷이 존재하고, 엄격하게 준수한다.

이미지 MADE.COM

제품명, 찜 , 디자이너, 제품 설명, 가격, 할부 조건, 배송 기간, 장바구니 담기, 원단 샘플 요청

상단 이미지바에서 제품의 다양한 각도, 인테리어컷, 동영상, 360 뷰, 사이즈 규격까지 다양하게 볼 수 있다.

이미지 MADE.COM

이미지 하단에 제작 기간, 보증 기간, 배송, 환불 정보가 깔끔하게 제시된다.

제품이 달라지면 포맷은 동일하지만 그 제품에만 해당되는 정보로 디자인이 유동적으로 변경된다.

이미지 MADE.COM

색상이 다양한 경우 다른 색상을 클릭하면 이미지바의 이미지가 모두 클릭한 색상의 이미지로 전환된다.

이미지 MADE.COM

제품별로 달라지는 특성을 설명하는최적화된 디자인이 제시되고, 기존의 템플릿에 잘 들어맞는다.

이미지 MADE.COM

깔끔한 디자인을 위해 관련 정보가 너무 축약된 듯한 느낌이 잠시 들기도 했지만 자세히 살펴보니 구매에 필요한 정보들이 모두 담겨있다. 중복없이, 불필요한 내용을 생략하고, 핵심만 간결하게 정리한 결과이다. 제품 상단만 보아도 구매에 필요한 내용들을 대부분 알 수 있다.

제품의 상세 정보는 일정한 순서와 내용으로 템플릿화되어 있다.

이미지 MADE.COM

이미지 MADE.COM 제품 소개 템플릿

분류, 제품명, 디자인 포맷, 내용, 순서까지 모두 일관된 포맷에 엄격하게 제시된다.

깔끔한 디자인은 디테일을 포기한 결과가 아니다. 컨텐트를 완벽히 분석하고 규칙을 세우는 데에 많은 공을 들이고, 상황에 흔들리지 않고 원칙을 고수한 노력의 결과이다.

좋은점

철저한 컨텐츠 분석을 통한 컨텐츠 포맷화

포맷의 일관된 적용

심플하나 포괄적인 제품, 구매 정보

페이지 상단 다양한 시각 자료

정보의 종류가 달라져도 어색하지 않게 잘 맞춰진 유동적인 디자인

같은 페이지에 같은 정보가 중복되지 않음

페이지 상단만으로도 구매와 관련된 정보를 상당 부분 확인할 수 있다.

체계적인 제품명 규칙, 제품명만 보고도 제품의 특징을 알 수 있다.

배송 기간, 배송비, 환불 정보, 보증 정보 등을 쉽게 확인할 수 있다.

5. 로얄디자인닷컴

이미지. 로얄디자인닷컴

할인 정보와 찜 기능이 직관적이다. 정보의 위계에 따른 구분이 명확하고 중요한 내용들이 부각되어 있다. 연관태그가 있어 해당 제품과 관련된 다양한 키워드를 알 수 있다.

이미지. 로얄디자인닷컴, 연관 태그

제품명 상단에 브랜드가 선명히여 브랜드를 직관적으로 파악할 수 있다.

이미지. 로얄디자인닷컴

제품 이름에는 엄격한 규칙이 없다. 소재이기도, 종류이기도, 형용사이기도 하고, 사이즈, 특징, 색상을 덧붙이기도 한다.

제품 설명 영역에는 간단한 포맷이 존재한다: 연관 상품, 제품 정보, 브랜드 정보, 규격, 최근 본 상품, 인스타그램 이미지

이미지. 로얄디자인닷컴

좋은점

제품을 상세하게 알기 보다 제품 목록, 연관 제품, 구매에 최적화된 포맷: 이미 제품을 알고 있는 사람들이 제품을 자세히 살펴보는 과정 없이 빨리 구매할 수 있다.

포맷이 일관되게 적용되어 어떤 제품에서도 동일한 기대를 가질 수 있다.

빠른 속도

크고 선명한 사진

할인 정보가 선명하다, 좋은 딜이라는 인상을 준다.

찜, 장바구니 넣기 용이

캠페인, 재고 현황을 가시적으로 확인

단순하고 규격화된 정보: 다국적 서비스에 용이

개선점

사진과 설명 부족

브랜드, 쇼핑몰, 디자이너, 사용자 후기 등 상세 정보를 보여주는데 친절하지 않다

동일한 설명과 정보의 반복

불충분한 배송 정보

3. 서울번드 제품 페이지 라이팅 분석

그럼 이 글의 목적인 서울번드의 제품 페이지를 본격적으로 살펴보자.

이미지. 서울번드

1) 브랜드 이동 버튼, 네이버 페이 버튼

실제 역할에 비해 지나치게 부각되었다. 따라서 중요한 정보들이 상대적으로 축소되어 보인다. 컨텐츠의 우선 순위를 결정해 우선 순위에 맞게 디자인하자.

2) 이미지 퀄리티

이미지가 선명하고 훌륭하다. 하지만 하단 상세 설명까지 이동하지 않아도 상단에서 이미지를 다양하게 감상할 수 있어야 한다.

3) SNS 상품 홍보

SNS 홍보는 유용한 기능이나 제품 구매 과정을 가로막을 정도로 중요하지는 않다.

4) 배송, 주문 정보 관련

이미지. 서울번드

- 서울번드 배송: 카피의 의미가 모호하다. 택배의 주체를 보여주려는 것인가? 배송비의 과금 기준을 보여주려는 것인가, 그렇다면 서울번드 배송 제품이 5만원 이상일 때 과금되는가? 해당 브랜드(현재의 경우 SB REPUBLICA) 제품이 5만원 이상을 의미하는가. 모든 카피는 고객에게 어떤 의미인지를 알려줘야 한다. 고객에게 어떤 의미도 없다면 보여주지 말자.

- 최소주문수량 1개 이상: 불필요한 문장

- 최대주문수량 5개 이하: 이유를 제시하라. 대량 생산이 불가능한 제작의 특수성 때문이라면 개수 제한이라는 약점을 소규모 고품질 생산이라는 철저함과 고유함이라는 장점으로 어필하면 어떨까.

- 수량을 선택해주세요: 수량 선택 옵션창으로 충분하다. 불필요한 문장이니 제거하자.

5) 어려운 표현: 2 EA는 어렵다. 2개라는 좋은 표현이 있다.

6) 우선 순위의 조정: 구매하기와 장바구니는 동등한 우선 순위, 또는 장바구니가 좀더 우선순위가 높다. 여기에서는 구매하기가 훨씬 중요하게 보인다.

7) 관심 상품: 관심 상품 등록은 구매 과정 중이 아니라 제품 탐색 과정에 필요하다. 제품 이미지 근처에 위치하는 것이 더 적당하다.

8) 불필요한 정보

이미지. 서울번드

색상이 하나 밖에 없을 때 굳이 색상 정보를 보여줄 필요가 없다. 색상을 충분히 알 수 있도록 이미지를 여러 장 제시하거나, 색상 이름을 꼭 알려줘야 한다면 상세 설명에서 알려주자.

9) 선명하지 않은 할인 정보

할인가와 할인 내역이 흐리다. 좋은 기회라는 인상을 전혀 주지 못한다.

10) 불필요한 문장

'옵션박스를 선택하시면 아래의 상품이 추가됩니다'는 문장은 불필요하다. 옵션 박스창만으로도 이 메시지가 전달된다.

11) 배송일정 확인 옵션창

배송 일정은 없는데 구매자는 배송 일정 확인 여부를 반드시 체크해야 한다. 배송 일정 확인창보다 언제까지 배송되는지 적어만 줘도 충분하다. 배송 지연에 대한 소비자의 항의가 걱정된다면 친절하게 이유를 알려주자. 그래도 구매자의 확인이 필요하다면 왜 확인을 요구하는지 이유를 알려주자.

이미지. 서울번드

12) 어려운 표현

사이즈와 단위가 어렵다. 소비자가 한 눈에 파악할 수 있는 쉬운 용어가 필요하다.

이미지. 서울번드

13) 브랜드명 통일

SEOULBUND Co-Work, 서울번드 화, 서울번드 화 리퍼브 등, 서울번드 제작 브랜드를 통일하자.

이미지. 서울번드

14) 제품 이름

- 규칙: [브랜드명] 제품 이름 + 특징, 번호, 색상, 사이즈 등

이미지. 서울번드 제품 이름 목록

- 제품 이름 규칙을 정하고 엄격하게 적용하자: 영문/한글, 대문자/소문자, 띄어쓰기 규칙, 제품명 표기 내용과 순서, 사이즈나 색상 등 부가 설명 표기 방식

- 쉽고 간결한 사용자 중심의 표기: 엠버, 001, 2EA, #01 등은 사업자의 분류 원칙으로 사용자에게 큰 의미를 주지 못한다.

- (아래 이미지) [비젼글래스] 와이드 S 는 사업자의 분류 기준이지 소비자가 제품을 파악하는 데에 도움을 주지 못하는 제품명이다.

이미지. 서울번드 제품 이름 목록

15) 제품 상세 설명

설명이 상세한 것은 좋으나 순서와 구성에 일관성이 필요하다. 일관된 포맷이 있다면 사용자들은 필요한 정보를 더 빨리, 쉽게 찾을 수 있다.

4. 서울번드 제품 페이지 라이팅 개선 원칙

1) 대원칙

사용자의 시간을 존중하자

원칙을 세우자

원칙을 엄격하게 지키자.

언어는 쉽고 간결하고 명료하게

2) 세부 규칙

일관된 원칙

포맷을 만들자

(포맷에 담길 내용)

- 내용: 사업자가 제공해야 하는 정보는? 사용자에게 필요한 정보는?

들어갈 할 정보, 들어가지 말아야 할 정보, 시즌, 이벤트, 특가 등 모든 경우와 컨텐츠를 분석하자

- 순서: 순서가 동일하면 서울번드에서 정보를 탐색하는 사람들이 더 빨리 정보를 찾을 수 있다.

- 우선 순위: 중요도와 우선 순위를 결정하여 크기, 폰트 종류, 색상 등이 우선 순위대로 보이게 하자.

- 위치: 구성 요소들의 위치를 결정할 때 사용자의 시선, 기대, 사업자의 고려 사항을 고려하여 사용자의 시선과 시간을 절약시키는 위치를 선정하자.

브레드크럼 내비게이션: 위치, 분류 방식

제품 이름: 예를 들면 브랜드 표기 여부, 한글/ 영문, 띄어쓰기, 요소와 순서, 색상 사이즈 표기 방식 등

원칙 고수하기

- 팔요가 생길 때마다 틀을 바꾸지 말자. 문제가 되는 부분을 그 때 그 때 추가하지 말고 근본적인 원인과 대책을 생각해 틀 안에서 해결하자. 예를 들면 "배송 일정을 확인했습니다"라는 옵션창은 일반적이지 않은 배송 일정때문인 것으로 보인다. 이 때 사용자에게 필요한 내용은 다른 제품과는 다른 배송 기간이지, 배송 일정을 확인했음을 약속하는 것이 아니다.

- 상황이 생길 때마다 제품 이름에 내용을 추가하거나 임의로 바꾸지 말자.

쉽고 간결하고 명료한 언어

- 한글이 가독성이 높다. 같은 정보를 더 빨리 훑어볼 수 있다.

- 불필요한 내용은 없애자.

- 중복된 정보는 하나로 통일하자.

- 불분명한 의미는 명확하게 바꾸자.

- 어려운 용어는 사용자 친화적인 표현으로 바꾸자.

기타: 기분 좋은 쇼핑 경험

- 상단에 이미지 더 많이 넣기

- 후기, 다른 사용자의 증언 등

- 서울번드의 특징과 품질과 정신을 느끼게 하기

- 할인, 리퍼브 할인, 프로모션 등이 더 확연히 보이게 하기 (좋은 딜에 참여한다는 느낌주기)