모바일웹 쇼핑몰 상품소개 화면 - 탭 메뉴 화면 상단 고정

모바일웹 쇼핑몰 상품소개 화면 - 탭 메뉴 화면 상단 고정

 

쇼핑몰 상품소개 화면에서 아래로 스크롤 시 앞단의 기본정보 다음에 상품관련 컨텐츠를 유형별로 구분해서 탭 메뉴 형태로 나누어 보여준다. 상품상세정보, 후기및평가, 질문답변, 판매자정보 등 3~4개 탭 메뉴로 구성된다. 

대게 탭 메뉴는 첫 등장 지점부터 화면의 끝까지 상단에 고정으로 위치한다. 위로 스크롤 해서 탭 메뉴 시작 지점보다 더 위로 올라가게 되면 화면에서 사라진다. 

 

스크롤 시 탭 메뉴 화면 상단 고정 사례

• 스토어팜
• 11번가
• 인터파크
• G마켓
• 옥션
• 롯데닷컴 

 

 

 

 

 

 

 

 

내비게이션 바와 탭 메뉴가 같이 고정되는 경우

• cjmall

 

 

 

탭 메뉴 화면 상단 고정 애니메이션 gif

 

스토어팜

 

 

11번가

 

 

인터파크

 

 

G마켓

 

 

옥션

 

 

롯데닷컴

 

 

cjmall

 

 

 

내비게이션 바 화면 타이틀 표시 관련

롯데닷컴과 cjmall은 화면 상단에 타이틀명을 포함한 내비게이션 바를 사용한다. 그런데 내비게이션 바에 표시되는 타이틀에 ‘상품상세정보’라는 페이지 유형을 표시하고 있다. 그 보다는 현재 보고 있는 내용이 무엇인지 알려주는 문구를 표시하는 편이 좋지 않을까? 

‘상품상세정보’라는 페이지 유형을 대표하는 문구보다 해당 '상품명'을 표시하면 좋을듯하다. 

이와 관련된 사례로 얼마 전 업데이트된 벅스뮤직 앱이 떠오른다. 

벅스뮤직 앱 업데이트 전, 후 - 앨범정보 화면

 

업데이트 후 앨범정보의 컨텐츠 구조와 내비게이션이 변경되었는데 바뀐 UI가 더 괜찮다는 생각이 들었다. 화면을 알뜰하게 썼다는 느낌이랄까. 쇼핑몰의 상품상세와 주제가 다르긴 하지만 컨텐츠를 유형별로 구분해 탭 메뉴로 제공하는 UI가 동일해서 비교가 되었다. 화면을 구성하는 데이터 유형까지 비슷하다. 

• 커버 이미지 = 상품사진
• 앨범명 = 상품명
• 앨범소개 = 상품상세정보
• 한마디 = 100자 후기

 

리뉴얼 후 2가지 변화. 

1. 상단 내비게이션 바의 타이틀의 유형이 바뀌었다. 페이지 유형을 대표하는 '앨범 정보'라는 문구에서 내가 보고 있는 '앨범명'으로. 
2. 탭 메뉴는 사라졌다. 

탭 메뉴가 제거되고, 앨범 커버 이미지는 전보다 더 크게 배치했다. 컨텐츠는 앨범 이미지 아래에 순서대로 나열되었다. 아래로 스크롤 해서 내용을 보는 와중에도 상단 내비게이션 바에 내가 보고 있는 정보의 제목(앨범명)이 표시돼서 내용 보기가 편한 느낌이다. 기억을 덜 해도 되기 때문인 듯 하다. 평소 잘 모르는 가수 또는 외국 가수의 앨범을 보는 경우 전보다 훨씬 편할 것 같다. 시각적으로는 배경색으로 구분되는 그룹이 2개 줄어서 인지 화면이 시원시원하다. 

 

벅스뮤직 앱 New

탭 메뉴 제거, 내비게이션 바에 앨범명 표시

  

 

벅스뮤직 앱 Before

컨텐츠를 유형별로 구분해서 탭 메뉴로 상단에 고정

 

 

 

주제에서 벗어난 이야기지만...

벅스뮤직 앱에서 탭 메뉴가 사라져서 불편한 느낌을 받지는 않았다. 이건 음악 플레이어용 애플리케이션 안의 음악정보라는 컨텐츠 특성이 영향을 미치는 것 같다. 쇼핑몰 상품상세 화면에서는 탭 메뉴가 있는 것이 편하지만 벅스뮤직 앨범정보에서는 없어도 아무 불편이 없었다. 사실 이런 부가정보를 읽을 목적으로 앱을 사용하진 않는다. 이런 정보는 자세히 알고 싶으면 검색을 이용하는 것이 편하다. 꼭 필요한 것은 아니지만 없으면 아쉬운 정도의 컨텐츠. 그리고 각 탭 마다 컨텐츠 분량이 많은 것도 아니고 해당 탭에 관련된 컨텐츠가 없는 경우도 있다. 고로 앨범정보 내에 굳이 컨텐츠 구조를 만들고, 탭 메뉴를 배치해서 시각화 하는 것이 오히려 불편하다. 공간 낭비다. 그래서 바뀐 디자인이 화면을 참 알뜰하게 썼다는 생각이 들었다.