서울번드 메인 내비게이션 UX Writing 개선 과정
서울 번드를 통해 본 UX Writing 이해 시리즈
(2) 서울번드 메인 내비게이션 개선 UX Writing 과정
(3) 서울번드 제품 페이지 UX Writing 개선 과정(현재글)
지난 글에서 쇼핑몰 라이팅을 할 때 염두에 둬야 할 부분들을 살펴보았다. 이 글에서는 서울번드 메인 내비게이션의 현황을 살펴보고 유사한 성격의 쇼핑몰을 비교 분석 후 서울번드 메인 내비게이션의 개선안을 제안해 보려고 한다. 개선은 라이팅 측면에 초점을 맞추기로 한다.
1. 이 글의 초점
먼저 서울번드는 어떤 회사인가?
2018 서울 리빙 디자인페어 서울번드 전시부스서울번드는 한국의 수도 서울과 부두라는 뜻의 번드를 결합해 만든 쇼핑몰 브랜드이다. "동아시아의 보물"이라는 슬로건으로 한국을 비롯한 동아시아의 미가 담긴 리빙 제품을 발굴하거나, 장인, 디자이너와 협업해 직접 제품을 제작하기도 하는 리빙 큐레이터이다. (정보 출처: 서울 번드 홈페이지 ABOUT US)
리빙 디자이너 송승용과 대한민국 유기 명장 이종오와 함께 제작한 유기 커트러리 라륀이 대표적인 제품이다. 사라져가는 한국 유기의 전통을 지켜내면서 현대에 걸맞는 실용적인 디자인으로 재탄생시켜 서울번드의 주력 상품이 되었고, 2019 디자인포아시아 어워드에서 우수상을 수상하며 디자인적인 가치로도 인정받는 제품이다.
서울번드, 송승용 디자이너, 이종오 유기 장인이 기획하고 제작한 LA LUNE 유기 커트러리대만의 리빙 브랜드 지아JIA의 찜기도 서울번드의 주력 상품이다. 대만의 찜요리에 최적화되어 아름다운 디자인과 실용성으로 세계적으로 인정받는 제품이다.
서울번드에서 판매하는 대만 브랜드 지아(JIA) 찜기서울번드는 신장된 대한민국의 경제력과 국력을 바탕으로 우리의 전통에 대한 자부심을 고취시키고, 전통의 아름다움을 현대적으로 재해석하는 문화, 관광, 디자인 업계의 트렌드와 맥을 같이 하며 이를 뒷받침하는 훌륭한 제품으로 실력을 인정받고 있다. 매출 증가세도 인상적이지만 2019 벤처 투자자로부터 투자를 유치하는 데에도 성공했다.
서울번드의 온라인 쇼핑몰에서는 번드에서 큐레이션하고 제작한 훌륭한 제품을 살 수 있지만 아쉽게도 사이트 자체의 경험은 제품만큼 매력적이지 않다.
서울번드 홈페이지가장 큰 문제는 메인 내비게이션이 길잡이 역할을 해주지 못한다는 것이다. 메인 내비게이션은 말 그대로 사이트에서의 항해를 도와주는 주된 길잡이다. 메인 내비게이션은 기호로 숨겨져 있고 어찌된 일인지 클릭해서 펼쳐도 쉽게 눈에 들어오지 않는다. 제품을 보고 싶은데 제품 리스트가 보이지 않는다. 잠시 다른 컨텐츠를 보노라면 이내 메뉴가 사라져서 다시 기호를 클릭해야 한다. 왔다 갔다 할 때마다 똑같은 동작을 반복하려니 둘러볼 의욕이 사라진다. 사용자들은 어디로 가야 할 지를 모르거나, 알더라도 불편하게 쓰거나, 느리고 답답한 서비스를 견디고 있음에 틀림이 없어 보인다. 당연히 사용자는 훌륭한 제품을 충분히 감상하지 못할 것이고, 사업자는 기대한 만큼의 사용자 체류 시간과 매출을 올리지 못할 것이 쉽게 예상된다.
서울번드의 홈페이지와 메인 내비게이션여러 블로그와 기사를 통해 알게 된 서울번드의 소중한 가치와 자산을 사이트에서 전혀 느낄 수 없는 부분도 아쉽다. 분절되어 여기 저기에 정보가 흩뿌려지기는 했지만 서울번드의 특성을 모아주는 응집된 초점이 보이지 않는다. 매력적인 여성이 지저분한 옷에 미모와 성품이 가려진 것 같다.
이전 글에서 정의한 것처럼 쇼핑몰에 들어와서(온보드) -> 제품을 둘러보고 (참여) -> 질문에 답을 듣고(고객 지원) -> 구매 후에도 호감과 참여를 촉진하는(고객 전환) 고객 경험의 사이클 상에서 첫 부분이 막혀 있으니 그 이후의 경험이 원활할 리가 없다.
쇼핑몰의 경험에 따른 UX Writing 성격 규정 따라서 이번 글에서는 서울 번드 메인 내비게이션의 문제를 짚고 유사한 쇼핑몰들을 분석한 후 내비게이션의 개선 방향을 도출해 보려고 한다. 디자인, 사용자, 정보 설계의 등 다양한 시각이 존재하지만 이 글에서는 언어의 측면에 초점을 맞출 예정이다.
2. 서울 번드 메인 내비게이션의 문제
메인 내비게이션 기호를 클릭한 후 펼쳐진 메인 내비게이션을 다시 살펴보자.
서울번드의 홈페이지와 메인 내비게이션가장 큰 문제는 제품이 보이지 않는다는 것이다. 제품이 어딘가에 숨겨져 있다.
의미도 모호하다. SEOUL BUND Co-Work은 무슨 뜻일까? 함께 일하는 파트너일까? 함께 만들었다는 의미일까? 함께 만든 제품일까? 함께 만들었다는 것이 사용자에게 어떤 의미를 지닐까? JOURNAL 은 신문 기사, 전문 정보에 많이 쓰이는 단어인데 왜 쇼핑몰에서 쓰는지 모호하다. MAKERS, BRAND 도 의미를 한 번 더 생각하게 된다.
ABOUT, LOGIN/JOIN US, CART, ORDER 는 왜 메인 내비게이션에 있는가? 일반적인 쇼핑몰 메인 내비게이션에는 회사 소개나 개인화 기능이 들어가지 않는다. 일반적인 규칙에 어긋나면 사용자는 잠시 멈춰서 생각해야 하고, 당연히 몰입도가 깨어진다.(제이콥 닐슨의 Law of Internet UX 동영상을 참고하자. 사용자들은 기존에 형성된 습관을 가진 채로 당신의 사이트를 방문하기 때문에 일반적인 규칙이 적용되지 않으면 당신의 사이트에 들어와서 헤맬 것이다. 개성보다 더 중요한 것은 일반적인 사이트 규칙을 준수하는 것이다. 또래 선수들이 경기에서 화려한 실력을 발휘할 때 경기 한 번 나가지 못하고 청소년 시절까지 볼 컨트롤만 단내나게 훈련했다는 손흥민을 생각해 보라. 기본이 생명이다.)
한국어, 영어, 중국어, 일본어를 지원하는 것은 매우 훌륭하지만 아쉽게도 불완전하거나 작동하지 않는다. 기능이 완성될 때까지 노출을 보류하자.
주력 메뉴인 제품 분류를 찾아보자. 제품의 분류는 눈치챘겠지만 '스토어'에 들어간다. 스토어에 들어왔데 다시 스토어를 클릭해야 하는 것이다!
서울번드 글로벌 내비게이션과 하위 메뉴들찾았다고 생각하면 오산이다. 스토어에 들어가면 다시 여러 분류 체계를 만나야 한다. 여기에서 '용도별'이라는 메뉴를 눌러야 비로소 우리가 볼 법한 식기, 컵과 같은 익숙한 목록이 나온다. 글자가 작아 클릭이 용이하지 않다.
문제는 지금부터다. 이 중에서 한 제품을 보러 들어갔다. 그러면 메뉴판이 사라진다. 이전 페이지를 가거나 다른 상품을 보려면 처음부터 다시 메뉴를 펼치기 시작해야 한다. 몇 번 제품을 보고 나니 메뉴를 펼치는 지난한 작업이 무서워 제품을 다시 찾아보게 되지 않는다.
소재별 분류도 모호하다. 리빙 제품을 소재별로 검색해서 찾는 사용자가 주요 기능과 같은 위상을 차지할 정도로 많을까. 사용자 조사를 해야 정확히 파악되겠지만 그다지 일반적인 사용성으로 보이지는 않는다.
우측 상단과 우측 중앙에 있는 개인화 기능들도 아이콘의 의미가 모호하고 중복이 많다.
서울번드 개인화 내비게이션 영역일단 검색창 옆에 있는 자물쇠 모양의 아이콘.
마우스를 갖다 대도 설명이 나오지 않는다. 클릭을 해보니 장바구니 메뉴이다. 게다가 메인 내비게이션에서 CART라는 메뉴가 있었다.
오른쪽 중간 쯤에 위치한 또 다른 아이콘 세트. 보통 이 위치에 있는 기능들은 대개 쇼핑의 항해에서 꼭 필요한 기능 중 원클릭으로 갈 수 있는 빠른 길을 제공한다. 고객 지원 메뉴일 것이라고 짐작했다.
메인 메뉴와 비슷하게 생긴 아이콘과 검색 버튼, 그리고 알 수 없는 작은 아이콘들이 보인다. 마우스를 갖다 대었을 때 보이는 메뉴의 이름은 '열기'(기능의 이름이 열기... ), 검색, 배송 조회, 최근 본 상품, 장바구니. 언뜻 봐도 기능이 짐작되지 않고 중복된 것들이 있다.
꼭 메인 메뉴로 이동하는 단축키같은 아이콘을 클릭하면 이런 창이 오른쪽에 생긴다.
고객 지원 안내는 타당하다. 쇼핑몰에 필수이고 위치도 적절해 보인다. 그 외에 공지사항, 이벤트, 커뮤니티, 큰 이미지들이 거슬린다. 메뉴를 읽다 보니 쇼핑의 맥이 또 끊겼다.
사이트에 들어선 순간부터 쇼핑의 항해를 가로막는 암초들이 곳곳에 놓여 있다. 하지만 문제는 개선되라고 있는 법. 다른 사이트는 어떻게 하는지 살펴본 후 메인 내비게이션의 개선 방안을 도출해보자.
3. 비교 사이트 분석
먼저 유사한 성격의 쇼핑몰5개를 선정하여 비교해 보았다.
1. Collecion. B: 완성도 높은 라이프스타일 제품을 엄선하여 판매하는 셀렉트샵이다. 엄격한 기준에 따라 제품을 큐레이션하는 능력과 완성도 높은 홈페이지를 자랑한다.
2. 한샘몰: 명실공히 국내 최고의 토탈 홈 인테리어 쇼핑몰. 제품 판매 장소를 넘어 한샘 오프라인 매장의 경험과 서비스를 온라인으로 구현하려는 노력이 돋보인다.
3. 29CM: 트렌드세터라고 자부하는 사람들에게 성지와도 같은 쇼핑몰이다. 의류, 뷰티, 테크, 문화, 서비스 등 분야에 제한되지 않고 트렌드를 주도하는 제품을 큐레이션한다.
4. MADE.com: 능력 있는 중소 독립 가구 디자이너를 발굴하여 중간 상인을 거치지 않고 합리적인 가격에 좋은 디자인의 가구를 판매한다. 신진 디자이너의 가구 제작을 지원하는 소셜 펀딩 플랫폼의 역할도 겸한다.
5. 로얄디자인닷컴: 북유럽 유명 리빙 브랜드 제품을 판매한다. 세계 여러 나라로 직거래가 가능하며 우리 나라에서도 큰 인기를 끌고 있다.
표로 정리해 보면 다음과 같다.
비교 쇼핑몰 목록그럼 5개 사이트의 글로벌 내비게이션을 분석해보자. 위에서 언급한 대로 이 글에서는 라이팅 측면에 초점을 맞춘다.
1) Collection. B
COLLECTION B. 홈페이지총 13개의 메인 메뉴
기호 포함 글자수 최대 5자
영문 메뉴명 한 개를 제외하고 모두 한글
기호 포함 띄어쓰기 없음
한글 표기이나 영어를 한글로 옮긴 메뉴가 다수 존재(예. 리빙, 키친 등)
두 단어를 연결한 기호: 문구/사무, 패션&케어
모호한 의미: 라이팅은 올바른 표기인가, 가구, 키친, 라이팅 등의 리빙 제품과 어떤 차이가 있을까
카테고리를 클릭하면 그 제품의 전체 리스트 페이지로 이동
COLLECTION B. 제품 목록 페이지표기의 일관성 훼손, 동일한 의미의 중복: 전체제품 - All - 전체 -전체
개인 메뉴, 검색: 상단 우측
한글 영문 표기의 원칙: 내비게이션-한글 -> 목록 페이지 타이틀-첫 자를 대문자로 한 영어 -> 소분류 제목들: 한글
서브메뉴의 개수: 3개~ 최대 11개
회사 정보, 뉴스레터, 프라이버시 정책, SNS 링크 하단에 제공
해상도에 따른 내비게이션 방식의 변화
브랜드 리스트 페이지: 브랜드 고유의 로고를 사용하고 짧은 설명을 함께 제시
브랜드 검색: 한글과 영문 첫 자로 브랜드를 검색할 수 있지만 한글 표기로 시작되는 브랜드가 하나도 없다.
시사점)
- 한글이 영어보다 가독성이 높다.
- 띄어쓰기, 기호, 한글 영문 사용 규칙 등에서 일관성이 필요하다.
- 입점 브랜드가 중요한 쇼핑몰 특성상 브랜드 제시 방식이 직관적이다.
- 명료한 내비게이션으로 사이트 안을 효율적으로 항해할 수 있다.
2) 한샘몰
한샘몰 메인페이지주분류: 15개, 한글 메뉴, 기호 포함 최대 6자, 명확한 의미
이벤트성분류: 8개, 영어(대문자), 한글, 아이콘 혼용
띄어쓰기 없음
두 단어 연결 기호 주로 슬래시(/) 이용, 앤드(&)와 혼용
어떤 페이지에 있어도 전체 카테고리에 쉽게 접근
개인화 메뉴: 우측 상단, 6개, 띄어쓰기 없음, 영어(대소문자 혼용) 한글 혼용
한샘몰 2, 3번째 레벨 메뉴
한샘몰 2번째 메뉴 전시 화면한샘몰 2, : 3번째 레벨 메뉴: 3번째 메뉴의 개수가 많아질 때
3번째 메뉴 펼쳐질 때 2번째 메뉴명 진한 글씨체로 반복, 개수가 넘어가면 스크롤바 등장
같은 메뉴가 중복
한샘몰 2번째 레벨 메뉴 전체 화면
한샘몰, 사이트 항해 중 전체카테고리를 클릭하면 한 번에 펼쳐지는 2번째 메뉴들2번째 하위 메뉴의 개수가 7개로 제한, 7개 넘어가면 '더보기' 버튼(위 이미지), 더보기를 눌러 완전히 펼쳐진 후에는 '접기'버튼(아래 이미지)
엄격한 정렬 규칙
한샘몰 2번째 메뉴 전체 화면 중제품 페이지 안에 들어갔을 때 내비게이션
한샘몰 제품 페이지 내비게이션 화면브랜드 제시 방식
한샘몰 입점 브랜드 리스트 해당 업체의 로고 그대로 사용, 로고+브랜드명+짧은 설명
시사점)
- 어디에서도 길을 잃지 않는효율적인 내비게이션 설계
- 직관적이고 명확한 메뉴명
- 효과적인 분류와 디자인으로 메뉴의 개수가 과도하지 않도록 조절
- 가독성높은 한글 메뉴
- 의미가 명확할 때는 중복을 피하자.
- 일관성 필요: 글자수, 띄어쓰기, 기호 사용, 영문 사용 등
- 다양한 기회로 사용자를 다양한 곳으로 보내준다.
3) 29 CM
29CM 메인 페이지특화 메뉴 5개 + 카테고리 메뉴 6개 + 이벤트성 메뉴 4개 + 개인화 메뉴 4개 + 검색
모두 영어
크기, 서체, 띄어쓰기, 대소문자, 진하기, 자간이 모두 다름
Special-Order 로 시작되는 특화메뉴단은 의미가 모호
29CM 두 번째 메뉴, 개인화 메뉴 화면
29 CM 두 번째 메뉴, 개인화 메뉴 상세 화면2번째 메뉴분류에서 공통 요소: NEW, BEST, ONLY 29CM
2번째 메뉴 개수: 14개, 12개, 14개, 13개, 15개, 11개, 7개
2번째 메뉴 영어, 한글 혼용, 영어 표현을 한글 발음으로 옮긴 경우 다수(예, 스테이셔너리, 홈웨어 등)
띄어쓰기 없음, ONLY 29CM 제외, 쉼표로 연결된 경우에는 띄어씀
두 단어를 연결할 때는 쉼표 사용
개인화 메뉴: 아이콘 + 영어, 대문자
개인화 메뉴 중 MY HEART 의미 불명확
29CM 3번째 메뉴 1
세 번째 메뉴: 대부분 한글(드물게 영어 표현), 최대 11자, 띄어쓰기
세 번째 메뉴: 두 단어 연결은 주로 쉼표(슬래시(/)도 드물게 사용)
세 번째 메뉴: 메뉴의 개수가 공간을 넘어서면 열 확장(최대 4줄까지, 아래 이미지)
29CM 세 번째 메뉴 화면 2
세 번째 메뉴 첫 번째 디폴트: 전체, 세 번째 메뉴 마지막 디폴트: 순서 정렬 필터
세 번째 메뉴: 디폴트 메뉴를 제외하고 최대 23개
29CM 제품 페이지
제품 페이지에서 다양한 레벨의 카테고리로 이동할 수 있는 내비게이션 경로 제공
브랜드샵 경로: 이미지(브랜드 첫 알파벳을 모티브로 만들어짐) + 브랜드명 + 간단한 설명 + BRAND HOME 버튼
29 CM 브랜드 리스트
브랜드 리스트 1: 대표 브랜드 10개 브랜드 로고
브랜드 리스트 2: 분야별 브랜드 검색(ALL/WOMEN 등), 브랜드 검색창, 알파벳 첫 자 리스트(영문명 첫 자), 한글 첫 자 리스트(영문명을 한글로 변환한 한글 첫 자)
시사점)
- 매우 범용적인 영어 단어가 아닌 이상 영문명은 가독성이 떨어진다
- 특히 대문자로만 된 영어 단어는 더 가독성이 낮다.
- 통일되지 않은 서체, 진하기, 대소문자 사용은 가독성 뿐 아니라 의미의 명료함을 해친다.
- 일반적으로 사용하는 관습을 따라라(예. MY HEART)
- 메뉴명은 아무 생각하지 않아도 직관적으로 이해할 수 있는 쉬운 단어를 사용하라.
- 메뉴의 개수가 늘어날 때 공간을 벗어나지 않도록 영역을 지정하라.
- 입점 브랜드가 중요한 사이트에서는 브랜드에 대한 간단한 설명을 제공하라.
- 입점 브랜드 첫 자 검색은 영문, 한글 모두 가능하게 하라.
4) MADE.com
MADE 홈페이지메인 메뉴 14개 / 상단 검색창 / 로컬 메뉴 6개
모두 대문자, 띄어쓰기 있음
모두 대문자지만 누구나 알 수 있는 쉬운 단어, 글자 크기가 작지만 선명도가 높다 가독성이 높다.
주메뉴와 성격이 다르지만 주목할 필요가 있는 메뉴의 표현 방식MADE.com 2번째 메뉴 제시 방식
2번째 레벨 메뉴 제시 방식: 2번째 메뉴의 제목 + 항목
2번째 메뉴: 첫 자만 대문자(두 단어 이상 연결되었을 때도), 띄어쓰기 있음, 두 단어를 연결할 때에는 앤드(&) 기호 사용, 글자수가 다소 길어지는 경우가 있으나 서체의 선명도가 높아 가독성이 떨어지지 않는다.
2번째 메뉴 제시 방식: 4열로 구성, 기준 하나당 한 열을 사용하지만 항목이 많아지면 2열을 사용하기도 함 (아래 이미지)
MADE 제품 리스트 페이지
메뉴의 레벨별로 항해할 수 있는 내비게이션바 제공: 글자가 너무 작고 흐려 가독성이 낮다.
유형별로 세분화하여 볼 수 있는 내비게이션 아이콘 제공
다양한 소팅 기능: 영문 대문자, 간단하고 쉬운 단어라 쉽게 읽힌다.
MADE 사이트 하단 내비게이션
회사 소개, 고객 지원, 서비스, 메인 내비게이션과 다른 분류 방식, SNS 채널 하단에 제공
시사점)
- 글자수가 많고 크기가 작고 대문자로 이루어진 단어는 가독성이 떨어지지만 디자인이 적절하면 가독성을 해치지 않을 수 있다.
- 대략 눈으로 훑기만 해도 의미가 파악되도록 쉽고 일반적인 단어를 사용하라.
- 레벨과 성격이 다른 메뉴는 색상, 위치 등을 달리해서 같은 성격의 그룹이 묶여 있도록 하라.
- 메뉴가 들어가는 개수나 열, 또는 구역을 정해서 그 안에만 놓이도록 하라.
- 띄어쓰기, 기호 등에 일관성을 유지하라.
- 다양한 제품 탐색 방식을 지원하라
5) 로얄디자인닷컴
메인 메뉴 6개(한글) / 정보성 메뉴 4개(한글) / 개인화 메뉴 2개(영어)
기호 포함 최대 7자, 두 단어는 &로 연결, 띄어쓰기 없음
분류가 MECI(Mutually Exclusive Colletively Inclusive)하지 않음, 예를 들면, 주방과 서빙은 어떻게 다른가? 조명, 주방, 텍스타일 등도 인테리어이다.
마우스 롤오버하면 2번째 레벨의 메뉴가 보인다. (아래 이미지)
로얄디자인닷컴 2/3번째 레벨의 메뉴
두 단어는 –및-, 또는 -로 연결
3번째 레벨의 메뉴가 11개가 넘어가면 Show all 버튼이 나오고 이 버튼을 누르면 이 메뉴 카테고리 페이지로 넘어감
통일되지 않은 용어, 예) 램프, 등, 조명이 혼재
어려운 단어, 예) 광원
직관적이지 않은 분류, 예) 크리스탈 샹들리에와 샹들리에는 샹들리에로 통합할 수 있다
2 레벨과 3레벨 메뉴의 디자인 차이가 확연하지 않음(아래 이미지)
2,3 레벨의 메뉴는 4열까지, 4열이 넘어가면 행이 늘어난다. 최대 3행
정렬 기준을 맞추지 않아 메뉴 그룹이 아니라 글자 덩어리처럼 보인다
로얄디자인닷컴 제품 페이지
로얄디자인닷컴 제품 페이지내 사이트내 내비게이션과 브랜드스토어 버튼제품 페이지내 브랜드 스토어 표기는 브랜드 로고 사용
로얄디자인닷컴 브랜드리스트
8개 대표 브랜드 상위 제시, 대표 이미지 위에 브랜드 로고를 사용
브랜드 검색창, 알파벳 검색
영어 첫 자로 찾아보기
브랜드명 영문 한글 병기
로얄디자인닷컴 홈페이지 하단 내비게이션
뉴스레터, 회사 소개, 고객 지원, 소셜미디어 등은 하단에 배치
시사점)
- 명확한 의미, 명확한 분류
- 중복을 피하라
- 일관성을 지녀라
- 내비게이션의 구역을 정하거나, 정렬을 맞춰라
- 쉬운 단어를 쓰자
- 핵심 브랜드를 잘 보여주자
4. 서울번드의 메인 내비게이션 개선안
1) 개선되어야 할 부분
내비게이션 측면
내비게이션을 감추지 말고 드러내자: 언제 어디서도 잘 보이고, 원활히 이동할 수 있어야 한다.
가장 중요한 것을 가장 잘 보이게 하라. 덜 중요한 것은 덜 중요해 보이게 하라.
성격이 다른 메뉴는 레벨을 분리하라
중복을 피하라. 항상 보이는 위치 한 곳에서만 접근해도 충분하다.
작동되지 않는 것은 없애라
메인 메뉴 재정리컨텐츠 양을 줄여라
사업자와 사용자의 목표를 이룰 수 없고 제작비가 더 많이 든다.
굳이 필요하지 않으면 모두 삭제하라.
나중에 필요할 것에 대비한 컨텐츠를 자제하라
(출처. "웹 컨텐츠 전략을 말하라", 크리스티나 할버슨)
레이블의 의미를 분명히하라
재분류하라: MECI(Mutually Exclusive, Collectively Inclusive)하게
메뉴가 보여지는 공간을 제한하라
메뉴 개수의 상한선을 정하라
카피, 디자인 측면
한글이 가독성이 높다, 동아시아의 보물, 한국의 장인과 같은 브랜드 정체성과도 한글이 더 잘 어울린다
쉽고 간결하고 일반적인 용어(예. JOURNAL은 어렵고 일반적이지 않다)
용어를 통일하라 (예. CART-장바구니)
기호, 띄어쓰기, 용어, 영문 표기(영문을 꼭 써야 한다면)를 통일하라
명료함이 생명이다. 아이콘이 의미를 전달하지 못한다면? 글자로 써라.
의미를 전달하거나 증강시켜주는 목적으로만 비쥬얼 디자인을 활용하라.
브랜딩 측면
서울번드의 차별성을 부각시켜라
2) 개선안
서울번드 내비게이션 라이팅 원칙
모든 메뉴는 가독성과 의미 전달력을 높여 주는 한글 메뉴를 원칙으로 한다.
메뉴에서 띄어쓰기 없음
두 단어를 연결할 때는 띄어쓰기 없이 슬래시(/)기호 사용
원활한 이동을 위해 다양한 방식으로 제품을 노출하는 것은 좋지만 동일한 메뉴, 또는 유사한 메뉴를 내비게이션에 절대 추가하지 말자.
내비게이션 설계 개선안
가장 중요한 메뉴가 깊숙히 위치해 있고, 길잡이가 되는 내비게이션이 숨겨져 있으며, 위상이 다른 메뉴들이 한데 뭉쳐 있고 동일한 메뉴가 중복된 부분을 해결하기 위해 내비게이션을 재설계했다.
서울번드 메인 내비게이션 재설계 쇼핑 내비게이션: 상품 카테고리, 핵심이 되는 메뉴
쇼핑 보조 내비게이션: 세일, 신상품 등 상품을 찾아보는 다른 기준 제시, 중요하지만 핵심 메뉴보다 위상을 낮추는 것이 좋다.
검색, 개인화 메뉴: 검색 기능, 개인화 기능
고객 지원: 고객 지원, 회사 소개
위의 내비게이션을 가장 일반적인 내비게이션 자리에 대입시켜보면 아래 정도로 보일 것이다.
서울번드 메인 내비게이션 위치안2번째 레벨의 메뉴를 대략 정리해 보자. 단어 하나하나의 의미를 검증하는 일은 또 다른 지난한 작업이니 여기에서는 손대지 않기로 했고, 서울번드의 제품을 대략적으로 보며 정리해 보았다.
여기에서 새로워진 부분은 "장인의 작품", "브랜드/장인" 이라는 메뉴이다.
우리 나라와 동아시아의 문화를 현대적으로 재해석하여 장인과 협업해서 만들어낸 제품은 서울번드만의 차별점이다. 격이 다르고 품질이 다를 수밖에 없는 보석같은 제품과 스토리가 일반 제품과 다를 바 없어 서울번드의 장점을 부각할 수 없었다. 남다른 브랜드라는 점을 보여주기 위해 전통 방식에 따라 만든 작품들의 코너를 따로 만들자.
서울번드와 함께 한 유기 무형문화재 김수영
서울번드의 컨셉에 맞춰 제작한 제품 라인, 서울번드 和위의 메뉴 체계에 맞게 대략적으로 그려보면 다음과 같다.
또한 입점 브랜드 리스트가 중요한 쇼핑몰이니만큼 브랜드가 보여지는 방식도 좀더 효율적으로 고쳐보자. 위에서 제안한 바에 따라 브랜드의 리스트와 함께 서울번드에서만 볼 수 있는 장인의 리스트까지 제시된다면 고유성, 차별성이 높아질 것이다. 영문 첫 자 검색이 안되니 알파벳 리스트는 없애자. 브랜드 로그를 그대로 쓰고, 브랜드에 대한 간단한 설명을 덧붙이자. 대략적인 리스트는 아래와 같다.
그럼 다음 글에서는 제품 페이지의 라이팅을 개선해 보자.
서울 번드를 통해 본 UX Writing 이해 시리즈
(2) 서울번드 메인 내비게이션 개선 UX Writing 과정
(3) 서울번드 제품 페이지 UX Writing 개선 과정(현재글)
