UX Analysis in Banking & Commerce Content service
4 likes441 views
[O2UX] 201809 UX_Trend Report 2 It is analysis and benchmarking report about how to apply various UI component in content service. Recently not only informational service but also banking and commercial service provide massive content in their service. We want to look over what is effective and intuitive user interface for users to make understand complex content well.
UX Analysis in Banking & Commerce Content service
- 1. 2018. 09 Banking & Commercial Content Service UX Trend & Analysis Report
- 2. 국내 1금융권 및 핀테크 서비스를 조사 및 현재 금융서비스가 보여주고 있는 메인 레이아웃이나 콘텐츠 표현방식에 대한 장단점을 분석해보고자 합니다. 우리은행 원터치개인 국민은행 KB스타뱅킹 기업은행 i-ONE 뱅크 핀크 Finnq BENCHMARKING 국내 금융 서비스 조사 신한은행 Fan 하나은행 1Q Bank Viva Republica Toss
- 3. | 우리은행 원터치개인 1 / 2 컨텐츠영역에 따라 상태가 바뀌는 메뉴들로 구성해 글로벌 메 뉴로써 GNB의 의미를 상실하고, 중복되는 메뉴도 있어 정보설 계의 재정의가 필요합니다. Floating GNB 이벤트배너의 영역의 정돈이 필요해 보이며, 실질적으로 많이 쓰여지는 메뉴영역과 강약이 바뀌어 보이는 단점 있는 것이 아쉽습니다. 레이아웃이 다소 산만해 보이며, 2뎁스에서의 레이어팝업 메뉴가 많아 사용자편의성을 해치고 있어 개선이 요구됩니다. Event Area 컨텐츠가 많아 스크롤링이 길어질 경우 좌우 슬라이드를 사용하면 레이아웃 간소화 효과 있습니다. 우측과 같이 배너스타일로 그룹핑하는 방식을 SOL 가이드 컨 텐츠에 적용 가능할 것으로 판단됩니다. 다만, 4개 영역 이상에서 좌우 슬라이드가 중복 사용되어 다소 산만한 느낌을 주고있습니다. Slide 메인 Banking Service
- 4. 하단 플로팅 메뉴중에 가장 효율적이면서 실용적으로 판단됨. 수많은 컨텐츠와 정보들 사이에서 나에게 필요하고 자주쓰는 메뉴들만 구 성해 편리하게 이용 가능할 것으로 보입니다. Menu Custom 최종뎁스까지의 안내가 사용자 친화적이지 않음. CTA(Call To Action-행동유도)의 역할이 크지 않고, + 아이콘만으로 어떤 정 보를 전달하는지 알기 어려운 단점이 있습니다. CTA’ s Roll 메인 > 마이메뉴 | 우리은행 원터치개인 2 / 2Banking Service
- 5. 하단 GNB에서는 부가서비스 및 많은 수요가 있는 메 뉴들로 구성, 마이메뉴를 통한 메뉴 커스텀도 가능하게 되어있어 편의성 높이고 있습니다. Floating GNB 딱딱하지 않은 느낌의 메인과 아이콘 메뉴의 배치, 주목해야 하는 메뉴에 명확하게 공간 활용을 하고 있는 점이 장점입니다. Icon > 버튼은 하단 GNB Dock을 숨기는 역할을 하고 있는데, 보편적으로 다른 메뉴를 확인하는 용도로 예측되어 사용자에게 다소 혼란을 줄 수 있는 점이 우려됩니다. Option Btn 메인 | 국민은행 KB스타뱅킹 1 / 2Banking Service
- 6. 전체적으로 충분히 여백을 활용하고 있어, 금융권 특유의 딱딱한 느낌을 주지 않고 있는 점이 돋보입니다. 메뉴 텍스트를 2컬럼 구성으로 강약을 주어, 정보 중요도를 간접적으로 잘 표현하고 있어 잔잔한 강약을 활용하고 있습니다. Column Menu 디바이더와 리스트를 블록으로 묶어 다양한 컨텐츠들 속에서 타 정보들과 명확하게 구분 가능하게 해줍니다. 아이콘으로 힌트를 주어, 가독성을 높일수도 있겠지만 텍스트로만 구성해 공간을 넓게 사용하여고 상단의 이미지와도 디자인 밸런스를 맞추어 조화를 유지하고 있습니다. Block List 메인 > 금융상품 | 국민은행 KB스타뱅킹 2 / 2Banking Service
- 7. 메인 서비스를 페이지 중하단에 위치시켜 가독성, 시각적 안정성을 높이고, 사용 빈도가 높은 메뉴로만 구성 해 효과적인 UI로 보입니다 Slide Tab 시니어들의 편의성을 고려한 UX. 대표적으로 큰글씨를 지원하고 스크롤없는 풀페이지 화면을 제공해 혼란을 최소화 하고 경로를 뚜렷하게 제시하여 접근성을 높이고 있습니다. 그러나 결정적으로 아이콘이나 글씨 자체가 작아 정보전달력이 떨어 지는 아쉬움 있습니다. Big Size Font 메인 | 기업은행 i-ONE뱅크 1 / 3Banking Service
- 8. 큰글씨뱅킹의 메인화면에서는 사용자편의 를 고려해 상대적으로 넓고 큰 버튼과, 글씨크기를 사용했지만 2뎁스부터 사용. 편의성 고려 미흡해 보이는 점이 아쉽습니다. Touch Size 리사이징이 아닌 새로운 타입의 화면전환으로 큰글씨 서비스 제공함. 시각적으로 다른 페이지임을 인식시키고, 메인페이지보다 더 플랫해져 시니어 타겟층을 확실하게 고려하고 있는 것으로 보입니다. Flat Design 메인 > 큰글씨뱅킹 메인 > 큰글씨뱅킹 > 휙송금(출금) | 기업은행 i-ONE뱅크 2 / 3Banking Service
- 9. LNB타입은 적절한 3단분리 레이아웃으로 가독성과 메 뉴에 대한 이해도를 높이고 있습니다. Left Navigation Bar 2뎁스에서 드롭앤다운방식이 아닌 페이지 자체가 바뀌는데 다른 메 뉴로의 이동이 불편해지고, 백키를 눌러야 다른 메뉴를 볼수 있는 단점이 있습니다. 신한 SOL도 같은 구성으로 되어있는데, SOL의 경우 1뎁스의 메뉴 가 많지 않기 때문에 상단 Slide Tab형태의 구성이나, 메뉴 우선순위에 따른 재배치도 고려해보는 것이 좋아 보입니다. Depth 메인 > 전체메뉴 | 기업은행 i-ONE뱅크 3 / 3Banking Service
- 10. 강점 및 서비스 구성을 자사만의 디자인 아이덴티티로 강 조하고, 이벤트,공지사항 하이로보 같은 서비스를 좌우연속된 화면 스크롤 방식으로 전면에 내세우고 있습니다. Extended View 심플한 아이콘과 중하단 포지션으로 상단 스와이핑 영역과 강 약을 조절하고 있으며, 가장 사용 빈도가 높고 사용자 시나리오의 첫 시작점인 계좌확인을 최상위 메뉴 접점으로 배치하여, 정보구조의 간소 화 추구하는 점이 돋보입니다. Hot Key 메인 | 하나은행 1Q Bank 1 / 3Banking Service
- 11. 텍스트와 아이콘 위주의 플랫 디자인으로 구성되어 있고 필요한 정보 컨텐츠와 하나 은행의 포인트 컬러를 적절히 사용하여 일관되면서도 주목성있는 디자인으로 보입니다. Block List 3컬럼을 사용하지만 서비수의 수가 제한적이거나 서비스의 가감이 있을 경우 공 간활용이 어려운 경우가 발생하고, 리스트의 균형감을 해칠 우려가 있어 철저한 계획하의 메뉴 구조화가 필요해 보입니다. . Block List 메인 > 하이로보 | 하나은행 1Q Bank 2 / 3Banking Service
- 12. 플랫 디자인에서 자주 쓰이는 카드타입의 리스트. 컬러 백그라운드와 면의 크기를 활용하여 영역의 중요도와 강약 크기를 에 강조하기 쉽고, 사용자 시선을 끄는데 활용이 가능합니다. 텍스트 컬러감을 통해 가독성을 높이고, 텍스트의 크기 조절만으로도 정보 의 강약 표현을 심플하고 명확하게 하고 있습니다. Card Type 메인 > 전체메뉴 > 추천상품 | 하나은행 1Q Bank 3 / 3Banking Service
- 13. 페이지 전환없는 선택형 인터랙션을 통해 페이지 이동없이 한 화면 내에서 핵심 콘텐츠까지 도달 가능. SOL운세 콘텐츠 구성에 적용 검토 가능할것으로 판단됩니다. Contents Area 메인 > 핀크마켓 | FinnqBanking Service
- 14. 앱 실행 시 자주쓰는 메뉴들을 그리드 레이아웃으로 보여주며 우측 하단의 메뉴 관 리 버튼을 통해 사용자가 원하는 메뉴로 커스 터마이징이 가능한 점이 장점입니다. 메뉴가 늘어날 경우에도 무리없이 확장가능합니다. Menu Custom 백그라운드 컬러를 그레이톤으로 사용하여 사용자로 하여금 편집이 불가해 보이는 인상을 줄 수 있는 점이 있습니다. 즐겨찾기 추가/해제에 대한 버튼 컬러와 스타일이 명확하지 않아 가시성이 떨어져 보완이 필요해 보입니다. Menu Edit 메인 메인 > 메뉴관리 | 신한 FAN (앱카드) 1 / 2Banking Service
- 15. 카드 영역 내에서 좌, 우로 스와이핑 시 설정한 카테고리 컨텐츠를 카드 형태로 보여주며, 테마별 포인트 컬러를 사용하여 각 페이지를 쉽게 인지 및 사용 가능함. 스와이프의 힌트가 없어 다른 테마 유무를 확인하기 어려워 보입니다. Contents Card 하단 영역에 해당 서비스에 맞는 부가적인 카테고리와 메뉴, 이벤트 배너 영역을 공통 스타일로 노출하여 사용자가 쉽게 인지할 수 있도록 구성되어 일관성있는 디자인으로 보입니다. Service Menu Area 메인 > 메뉴 > 페이 메인 > 메뉴 > FAN클럽 메인 > 메뉴 > 마이메인 > 메뉴 | 신한 FAN (앱카드) 2 / 2Banking Service
- 16. 간결하고 고객 니즈를 충족시키는 카테고리로만 구성. 여타 금융 서비스들과 서비스 성격이 다소 다르지만 사용자들의 니즈에 맞는 최적의 서비스로 간소화한 측면은 좋아 보입니다. Floating GNB 계좌정보를 별다른 로그인없이 확인가능. 민감한 개인계좌 데이터가 바로 노출되기에 하단으로 감춰놓음. 때 문에 필요로 하지 않는 데이터들로 화면을 채워 계좌 정보를 2뎁스나 다른 페이지에서 확인해야하는 번거로움을 줄여 주고 있습니다. Account 이벤트, 공지사항 및 소모성 데이터들을 기록, 스와이프로 삭제가 가능하지만 거래기록이나 송금내역등은 메시지는 기록에 남지 않아 불편한 점이 아쉽습니다. Notice, Data 메인 송금내역 확인을 동일페이지에서 메세지로 통 합하여 처리하는 것이 한눈에 정보확인이 가능 하여 편의성 높여줄 것으로 판단됩니다. | Viva Republica Toss 1 / 2Banking Service
- 17. 메인 > 전체 계좌, 카드조회, 신용관리를 제외한 기타 서비스로 구성. 추천서비스, 보험, 대출, 재테크 등 여러 상품들이 리스트형태로 존 재하며, 내 계좌확인을 제외한 모든 서비스를 제공하기 오히려 검색에 용이한 점이 있습니다. 아이콘 타입이 달라 오히려 가독성을 다소 해치고 있습니다. 나를 위한 추천서비스는 나의 활동내역을 기록해주며, 인기있는 상 품확인이 가능합니다. Service 고객들간 유저패턴을 분석해 실시간으로 Peer 비교를 통해 상품 소개에 객관성높이고 군중심리 잘 활용하고 있습니다. 서비스를 이용한 유저수와 금전적 수치를 직관적인 데이터로 보여주어 고객의 주목도를 높이고 있으며, 나도 한도 늘리기 같은 문구를 통해 개인화 및 동반 선택 심리 자극하여 마케팅 효과를 노리고 있습니다. Recommend | Viva Republica Toss 2 / 2Banking Service
- 18. 다양한 분야의 콘텐츠 서비스에서 정리가 잘된 레이아웃이나 그리드를 조사해 최적화된 화면구성을 위한 방법을 찾아 봅니다. 텐바이텐 E-commerce M-net 스트리밍 서비스 L-point 포인트 & 컨텐츠 카카오 뱅크 금융 서비스 REFERENCE 국내 모바일 콘텐츠 서비스 레퍼런스 카카오 페이지 콘텐츠 서비스 Syrup 월렛 온라인 적립 서비스 V LIVE 소통형 미디어채널
- 19. Teaser Scroll 방식 각 콘텐츠 마다 백그라운드 컬러의 차이를 두어 구분 가능하고 영역 사이에 텍스트를 배치하여 다음 정보를 쉽게 인지할 수 있는 장 점이 있습니다. Background Highlight 방식 톤 다운 된 배경 컬러를 활용하여 보다 차분하게 정보 노출 가능하며, 공통된 콘텐츠를 그룹핑하여 보여줄 수 있으며 카드형 레이아웃으로 주목성을 더 높일 수 있는 장점이 있습니다. Banner 구분 방식 포인트 컬러를 활용한 배너를 콘텐츠 사이에 배치 시 각 영역 구분을 명 확히 할 수 있어 보입니다. 대비되는 강한 컬러를 사용하여 주목성을 높일 수 있으며 돋보이고 싶은 콘텐츠를 구성할 시 더 효과적으로 보일 수 있으나, 정보가 많아지거나 개수가 늘어날수록 산만해지는 단점이 있습니다. | 컨텐츠 구분방식 01 상/하 스크롤 유형Content Service
- 20. 좌우 Flicking Main Event 방식 이미지와 텍스트 레이어를 겹쳐 레이아웃에 변화를 준 메인 배너 스타일로 화면 플리킹 시 이미지와 텍스트 노출 시간에 차이를 두어 주목성을 높일 수 있는 방식입니다. Flicking Banner 방식 1:1 비율로 이미지, 텍스트 영역을 구분하여 영역 내 1개의 콘 텐츠를 요약하여 보여줄 수 있는 레이아웃으로 보여주는 정보 에 비해 영역을 많이 차지하는 점이 단점으로 보입니다. Flicking List 방식 좌, 우 플리킹 가능한 리스트형 테이블 스타일로 정보 노출이 가능하며 한정된 영역 안에서 콘텐츠를 분할하여 보여줄 수 있습니다. 전체보기 버튼을 통해 상세 페이지에서 카테고리에 맞는 전체 정보 리스트를 한 눈에 확인 가능하다는 장점이 있습니다. 이미지 Card 방식 좌, 우 스크롤이 가능한 카드형 콘텐츠. 한정된 영역 안에서 일관된 레이아웃으로 정보 노출 가능합니다. | 컨텐츠 구분방식 02 좌우 스크롤 유형Content Service
- 21. 테마 Tab / Header 방식 메뉴 버튼 선택 시 상세 페이지 Top 영역에 선택한 컬러가 적용되며 하단에 리스트 형태로 콘텐츠 노출이 가능합니다. 명확한 카테고리 상세 페이지를 보여줄 수 있는 장점이 있지만 메인 페이지에서 사용 시 중요도가 너무 과해보이는 단점이 있습니다. 투명 이미지 Banner 방식 단색의 백그라운드 컬러와 실사 이미지를 오버랩하여 카테고리를 명 확히 구분 가능합니다. 메인 콘텐츠가 아닌 서브 컨텐츠 구성에 효과적인 방법입니다. | 컨텐츠 구분방식 03 테마 유형Content Service
- 22. 면분할 컬러 카드/버튼 조화 내 계좌, 총 사용금액, 버튼 등 중요한 콘텐츠 및 컴포넌트 요소에 포인트 컬러를 적용하여 강조하고자 하는 정보를 명확하게 보여주는 스타일입니다. 정보가 많지않은 레이아웃에 효과적이며 나이 상관없이 누구나 쉽게 정보를 인지할 수 있는 장점이 있어 보입니다. 면분할 컬러 카드 포인트 컬러를 사용하여 콘텐츠를 강조하는 것은 좋지만 과도하게 사용 시 혼란스러울 수 있으므로 브랜드 컬러와 전체적인 조화를 고려하는 것이 필요합니다. | 컨텐츠 구분방식 04 컬러 유형Content Service
- 23. 메시지 Indicator 타이틀 메시지 계좌정보 & 메뉴 제휴 이벤트 QR코드 결제 멤버십 제휴 업체 카카오페이 상세 정보 | 메인 레이아웃 01 카드형 스크롤 유형Main Screen 메인의 유형 중 카드형 스크롤 유형은 복잡한 컨텐츠가 많을 경우, 종류별로 그룹핑을 하여 카드의 그룹별로 컨텐츠 종류나, 기능을 명확히 구분하여 노출할 수 있다는 장점이 있습니다.
- 24. 하나은행 1Q Bank 타이틀 공지 Indicator 금융 서비스, 상품 확장 View 핫키 | 메인 레이아웃 02 좌우 플리킹 유형Main Screen 최근 유행처럼 번지고 있는 플리킹 유형의 메인으로, 대표적으로 어필하고자 하는 서비스와 기능을 화면단위로 광고하듯이 보여줌으로써, 일련의 스토리 라인을 구성하면서 인상적인 느낌을 줄 수 있다는 장점을 가지고 있습니다.
- 25. KB 리브 타이틀 리브뱅크페이 Indicator 금융 서비스, 상품 확장 View BTS 이벤트 | 메인 레이아웃 03 파노라마 유형Main Screen 좌우 플리킹 유형의 변형으로 각 좌우 화면별로 어필하는 서비스의 설명 슬로건과 함께 바로가기 버튼을 배치하여 서비스 소개를 보면서 바로 해당 서비스와 기능으로 이동할 수 있게 한 메인으로, 접근성을 높이는데 효과적인 UI입니다.
- 26. Indicator 타이틀 인사 메세지 계좌정보 상품신청 고객센터 / 푸 터 이벤트 핫키 K뱅크 공지 | 메인 레이아웃 04 One Screen 유형Main Screen 정형적인 화면내 스크롤을 이용한 한화면 배치 메인입니다. 달라진 점은 예전에는 단순히 메뉴의 나열로 한화면을 채웠다고 하면, 최근에는 카드나, 메뉴에 직접 사용자의 정보/데이터를 노출하여 직관성과 접근성을 높여 줌으로써, 효율적인 메인으로 활용되고 있습니다.
- 27. 국내 모바일 서비스 컨텐츠에서 개인화의 눈에 띄는 방식을 활용한 이마트 서비스를 벤치마킹하여 분석 E-Mart 쇼핑 REFERENCE 개인화 레퍼런스
- 28. 현재 진행되고 있는 이벤트 품목을 노출하여 직관적으로 확 인 가능하도록 구성하고 있습니다. Live Ticker 상품을 판매하는 마트임에도 불구하고 상품을 나열하지 않고 사용자가 받게 되는 혜택과 행사, 이벤트를 메인에 내세워 고객의 지갑을 절약하게 하는 느낌을 받게 해줍니다. 상품보다 혜택 | 이마트Personalization
- 29. 고객 Persona 현재 로그인 되어 있는 고객에게 환영 메세지 및 단골 지점, 포인트, 사용자 이미지를 노출하여 개인맞춤 이미지를 전달하고 있습니다. 상품 제안 상품 컨텐츠 노출 영역으로 각 카테고리별 사용자에게 제안하는 문구와 해당 카테고리별 콘텐츠가 노출되어 주목성을 크게 높이고 있습니다. 노출 메뉴 설정 기본 카테고리를 우선 제공하고 고객이 서비스 메뉴를 설정 가능하도록 구성하여 사용자의 편의성을 높이고 있습니다. | 이마트Personalization
- 30. 메뉴 탭 각 카테고리 선택 시 카테고리 영역이 상단에 붙어서 콘텐츠 확인 영역 확보가 용이한 UI입니다. 내 카드혜택! 메뉴 자주 사용하는 카드를 등록하여 카드에 맞는 혜택정보만 모아 제공 카드를 등록하더라도 다른 카드의 혜택을 확인할 수 있습니다. 찜 했어요! 메뉴 “좋아요” 추천을 선택 했던 상품을 모아 보여주는 카테고리 “좋아요” 추천을 하지 않더라도 빈영역으로 두는 것이 아니라 다른 사용자들의 추천을 가장 많이 받은 리스트를 노출하는 점이 돋보입니다. 자주사요! 메뉴 고객이 구매 했던 내역을 기반으로 자주, 최근 구매 했던 상품을 노출 하고 있는 점을 차별화로 내세우고 있습니다. 추천해요! 메뉴 할인 및 다른 사용자들의 좋아요 추천이 많은 상품 순서로 노출되며 상품을 추천해주고, 각 콘텐츠의 우측하단 + 버튼 선택 시 사용자들이 가장 중요하게 생 각하는 정보 우선 노출하여 사용성을 높이고 있습니다. | 이마트Personalization
- 31. Thx For Watching Written by O2UX : Question to sensyo@o2ux.com, hom5026@o2ux.com, Ahnleesa@O2UX.com