모바일 경험을 위한 전자상거래 UX

"모바일 상거래"라는 용어는 20년 전 Kevin Duffey가 모바일 장치가 고객의 주머니에 있는 소매점으로 기능할 수 있다고 제안하면서 도입되었습니다. 당시의 기술적인 한계를 고려할 때, 우리가 언젠가는 주머니에 쏙 들어가는 작은 기기로 물건을 쉽게 탐색하고, 검토하고, 구매할 수 있을 거라고 누가 생각이나 했을까요?

모바일이 소비자와 상호 작용하는 방식을 어떻게 변화시키고 있는지 아무리 강조해도 지나치지 않습니다. 우리는 이러한 변화를 수용해야 합니다. – 조엘 앤더슨, 월마트 CEO

전자 상거래의 놀라운 성장은 또한 현재 거의 7천억 달러에 달하는 모바일 전자 상거래의 성장을 촉진했습니다. 모바일 전자 상거래는 현재 거대한 온라인 시장의 가장 큰 부분입니다. 미국인의 80% 이상이 지난 달 온라인에서 구매를 했습니다. 3년 전만 해도 그 수치는 11.6%였습니다.

Business Insider Intelligence 의 보고서에 따르면 모바일 상거래는 2020년까지 최대 45% 증가할 것이라고 합니다. ComScore 연구도 이에 동의했으며 2016년에는 모바일 장치를 통한 지출이 2015년에 비해 44% 증가했다고 보고했습니다.

높은 판매량에도 불구하고 60% 이상의 사용자는 여전히 휴대전화를 사용할 때 금융 정보가 해킹당하는 것을 우려하고 있습니다. 그럼에도 불구하고 고객 만족도는 여전히 상당히 높으며 Amazon 및 Apple과 같은 모바일 소매 대기업은 모두 80% 이상의 만족도를 받고 있습니다.

모바일 전자상거래 UX 성공을 위한 모범 사례

핀치 및 두 번 탭 제스처로 이미지 확대/축소 지원

사람들은 모바일에서 이미지를 확대하기 위해 두 번 탭하거나 핀치하는 것과 같은 제스처에 익숙합니다. 모바일 전자 상거래 사용성 연구에서 Baymard Institute는 매우 자연스럽게 쇼핑객이 제품을 철저히 검사할 수 있기를 원하고 작은 세부 사항에 대해 우려한다는 것을 발견했습니다. 제품 구매에 관심이 있었지만 확대하여 탐색할 수 없는 사용자는 구매하는 데 불편함을 느꼈고 종종 판매를 약속하지 않았습니다.

매출 상위 50개 모바일 전자 상거래 애플리케이션 중 40% 이상이 확대/축소 제스처를 지원하지 않는다는 것은 매우 놀라운 일입니다. 이미지의 클로즈업 버전을 제공한 사이트에서도 유사한 이탈률을 경험했으며, 이는 모바일 전자상거래 앱에서 제품 이미지 확대/축소 제스처를 지원하는 것이 기본임을 시사합니다.

모바일 기기의 작은 화면 크기를 고려할 때 이는 플랫폼별 문제입니다. 이러한 기능 중 하나 이상을 지원하면 전자 상거래 애플리케이션의 상위 50%, 즉 최고 매출 목록에 앱이 포함됩니다.

고려해야 할 몇 가지 요소:

• 저해상도 이미지는 확대/축소가 없는 이미지와 동일합니다. 사용자는 제품의 세부 사항을 명확하게 보는 데 관심이 있으며 이를 위해서는 고해상도 이미지가 필요합니다. 낮은 품질의 이미지를 확대하는 옵션은 사용자가 세부 정보를 볼 수 없도록 하기 때문에 거의 쓸모가 없습니다.
• Baymard Institute는 앱의 50%가 사용자에게 제품 이미지를 집거나 두 번 탭할 수 있다는 표시를 하지 않는다는 것을 발견했습니다. 이미지 확대/축소의 가용성을 나타내는 것은 중요합니다. 이러한 제스처는 일반적으로 모바일 사용자에게 알려져 있지만 여전히 사용할 수 있음을 표시해야 합니다. 이를 위해 아이콘이나 시각적 표현을 사용하는 것이 좋습니다.

장바구니에 "저장" 기능 제공

앞서 언급했듯이 모바일 장치의 작은 화면 크기는 모바일 전자 상거래와 관련하여 주요 장애물입니다. Baymard Institute는 모바일 사용자의 61% 이상이 휴대전화보다 데스크톱을 사용하여 구매를 완료하는 경우가 많다는 것을 관찰했습니다.

"장바구니 저장" 기능은 장바구니 포기 횟수를 줄이고 쇼핑객이 나중에 구매할 수 있도록 항목을 저장할 수 있도록 합니다. 영구 장바구니를 사용하면 고객이 반품할 때 원하는 제품을 검색할 필요 없이 쇼핑을 계속할 수 있습니다. 이 기능은 쇼핑객의 55%가 사용할 것입니다.

이러한 고객을 유지하는 방법은 다음과 같습니다.

1. 장바구니에 추가된 항목을 저장하여 장바구니를 위시리스트로 만드세요.
2. 구매자가 저장된 항목이 포함된 이메일을 수신할 수 있도록 하는 옵션을 만듭니다. 데스크탑을 사용하여 구매를 완료할 수 있다는 알림을 표시합니다.

설명적이고 레이블이 잘 지정된 양식 사용

모바일 양식에 모범 사례를 적용하는 것도 또 다른 고려 사항입니다. 전자 상거래 앱 또는 사이트의 UX 디자인은 혼동을 없애면서 사용자가 가능한 한 빨리 양식을 완성할 수 있도록 하는 것이 중요합니다.

다음은 모바일 양식 사용성을 위한 모범 사례입니다.

• 가독성, 사용 용이성 및 명확성을 향상시키기 위해 양식 위에 양식 레이블을 배치합니다. 특정 정보가 필요한 이유를 설명하면 모바일에서 양식을 작성할 때 사용자의 불안을 줄일 수 있습니다.
• 텍스트 입력을 적절한 키보드와 일치시키십시오. 전화번호와 신용카드 숫자를 입력할 때 다이얼 패드를 표시하고 주소와 텍스트를 입력할 때 텍스트 패드를 표시합니다. 이렇게 하면 사용자 실수가 줄어들고 양식 완성이 빨라집니다.
• 타이핑 노력을 줄이기 위해 입력 필드의 수를 제한하십시오. 입력 필드가 적을수록 로드된 양식이 덜 생성되고 UX 체크아웃 흐름이 향상됩니다.
• 완료되면 각 필드가 화면 위로 자동으로 이동합니다. 이렇게 하면 불완전한 필드를 보는 데 방해가 되지 않습니다.
• 드롭다운 메뉴 대신 스테퍼를 사용하여 쇼핑객의 노력을 줄이십시오. 스테퍼는 값을 일정하게 늘리거나 줄이는 데 사용되며 작업 속도가 더 빠르고 눈에 더 매력적인 솔루션입니다.

지능형 자동 제안, 자동 감지, 주소 조회 및 오류 제공

자동 제안의 주요 목적은 사용자가 양식을 더 쉽고 빠르게 작성할 수 있도록 하는 것입니다. 자동 제안은 일반적인 검색어를 예측하고 쇼핑객이 제품을 더 쉽게 찾을 수 있도록 도와줍니다.

신용카드 자동감지 기능을 이용하여 모바일 사용성을 더욱 향상시킬 수 있습니다. 자동 감지는 지원되는 카드 유형에 대한 즉각적인 피드백을 제공하여 구매 프로세스를 간소화합니다. 가능한 한 많은 데이터 입력 프로세스를 자동화하면 시각적 개체가 선호되며 사용자 경험이 향상되고 전환율에 긍정적인 영향을 미칩니다.

주소 조회 및 유효성 검사는 체크아웃 프로세스를 가속화합니다. 다양한 API(예: Google 지역 정보 및 USPS)를 통해 이 기능을 쉽게 구현할 수 있습니다.

오류에 대한 인라인 입력 유효성 검사를 제공하는 것도 모바일 UX 디자인의 모범 사례입니다. 빠른 성능의 부족은 전자 상거래 쇼핑객에게 큰 불만입니다. 이는 사용자에게 진행 상황(예: 체크아웃 중)에 대한 실시간 피드백을 제공함으로써 도움이 될 수 있습니다. 특히 실수로 실수를 했을 때 그렇습니다. 이를 통해 사용자는 실수를 즉시 수정할 수 있으며 이는 사용성에 긍정적인 영향을 미칩니다.

마이크로인터랙션을 사용하여 모바일 쇼핑 UX 개선

마이크로인터랙션은 자연스러운 제품 흐름을 개선하면서 단일 작업을 수행하기 위한 제품 인터페이스의 세부 정보입니다. 제품을 좋아하고 평가하고, 색상과 크기를 선택하고, 데이터를 새로고침하기 위해 아래로 스와이프하는 것은 모두 마이크로인터랙션의 예입니다.

얼마나 흔한지 고려하면 마이크로 인터랙션은 모바일 전자 상거래 애플리케이션의 UX를 만들거나 깨뜨릴 수 있습니다.

마이크로인터랙션은 다음과 같은 용도로 사용할 수 있습니다.

• 보다 직관적인 방식으로 애플리케이션을 통해 사용자를 안내합니다.
• 더 부드럽고 자연스러운 상호 작용을 통해 더 나은 신뢰감을 전달하고 쇼핑객의 불안을 줄이며 전반적인 심리적 편안함을 향상시킵니다.
• 향후 오류를 방지하고 완료한 활동을 기반으로 사용자에게 즉각적인 피드백을 제공합니다. 및/또는
• 알림에 응답하여 앱과의 사용자 상호 작용을 개선합니다.

손쉬운 엄지 기반 상호 작용 제공

쇼핑객이 모바일 장치를 잡는 가장 일반적인 방법을 이해하면 모바일 전자 상거래 사용자 경험과 사용성이 향상됩니다. 2013년 Steven Hoober는 "사용자가 실제로 모바일 장치를 어떻게 들고 있습니까?"라고 질문했습니다. 사람들이 스마트폰과 상호 작용하고 스마트폰을 잡는 방식을 관찰하고 모바일 UX 디자인을 안내해야 하는 세 가지 주요 행동 패턴을 발견했습니다.

사람들이 자연스럽게 휴대전화를 사용하는 방식에 인터페이스를 적용하면 사용자의 편안함이 향상되고 쇼핑객의 불안이 줄어듭니다. 모바일 장치와 화면 크기는 다양하지만 디자인 및 사용자 경험의 중요한 측면인 "엄지 영역"은 동일하게 유지됩니다.

"엄지 영역"을 중심으로 디자인:

• 탐색 및 탐색과 관련된 잠재적인 문제 해결
• 제스처와 손가락 도달을 더 잘 수용하여 상호 작용을 개선합니다.
• "접근하기 쉬운" 영역에 중요한 요소를 배치하여 더 나은 변환 및 사용성 향상

전환 지향 모바일 전자 상거래 디자인을 위한 고려 사항

모바일 전자 상거래 애플리케이션에 보안 느낌 전달

보안은 모바일 장치에서 쇼핑하는 동안 사용자에게 가장 큰 관심사 중 하나입니다. 거래가 안전하다는 의사 소통은 쇼핑객이 매장에 대해 갖는 긍정적인 인식에 많은 가치를 추가합니다.

다음은 사용자에게 보안을 전달하고 사용자 불안을 줄이는 몇 가지 UX 디자인 기술입니다.

• 버튼 레이블을 구매자가 어디로 가는지 암시적이고 명확하게 만드십시오. "진행", "보안", "암호화"와 같은 단어는 사용자의 심리적 편안함을 강화합니다.
• 잠금 기호를 사용하여 쇼핑객에게 거래가 안전하다는 보증을 제공합니다.
• McAfee Secure 및 Norton과 같은 보안 제공업체의 신뢰 배지를 사용하십시오. 이것은 사용자가 웹사이트를 긍정적으로 인식하는 데 도움이 됩니다(Baymard Institute 연구).
• 색상 심리학의 원리를 디자인에 적용하여 쇼핑객이 더 나은 신뢰를 느낄 수 있도록 합니다. 이러한 원칙 중 일부에는 청중 지향 및 성별에 따른 색상이 포함됩니다.

검색 우선 순위 지정(그리고 스크롤 없이 볼 수 있는 부분 위에 유지)

쇼핑객은 모바일 전자 상거래 사이트 또는 앱을 사용하여 제품을 탐색하거나 특정 제품을 구매합니다. 결과적으로 잘 설계된 검색은 모바일 전자 상거래 애플리케이션에 매우 중요합니다. eBay는 사이트 검색이 모바일 쇼핑객에게 가장 중요한 기능 중 하나라고 생각하고 인터페이스의 접힌 부분과 중앙에 배치하여 이를 강조합니다.

모바일 검색에 대한 중요 고려사항:

• 보이는지 확인하십시오! 검색 표시줄에 쉽게 액세스할 수 있고 스크롤 없이 볼 수 있는 부분에 유지하면 쇼핑객이 손쉽게 제품을 검색할 수 있습니다.
• 일반적인 검색 패턴에서 얻은 데이터를 활용하여 미리보기 검색을 제공하고 검색 결과 페이지에 관련 제품을 표시합니다.
• 고객이 원하는 제품을 쉽고 빠르게 찾을 수 있는 고급 필터링 옵션을 제공합니다.

검색 양식을 표시할 때 고려해야 할 중요한 측면은 사용자가 응용 프로그램과 상호 작용하는 첫 번째 단계에서만 가치가 있다는 것입니다. 사용자는 일반적으로 쇼핑 여정 초기에 애플리케이션을 검색하며, 여정 후반부에 검색 양식을 표시하는 경우가 UX에 해를 끼칠 수 있습니다.

예를 들어, 결제 과정에서 검색은 더 이상 유용하지 않으며 사용자가 초점을 잃고 구매에 대한 약속을 포기하게 만들 수 있기 때문에 주의를 산만하게 할 뿐입니다.

부드럽고 쉽고 빠른 체크아웃 제공

연구에 따르면 결제 과정은 온라인 구매를 완료하는 데 가장 스트레스를 받는 부분입니다. Baymard Institute는 구매하기 전에 계정을 만들어야 하기 때문에 장바구니 포기율이 35%라고 보고합니다. 장바구니 포기율을 줄이려면 쇼핑객이 먼저 등록하지 않아도 되는 쉽고 빠른 체크아웃 프로세스를 설계하는 것이 중요합니다.

사용성 연구에 따르면 사용자의 60% 이상이 게스트 체크아웃 옵션을 찾는 데 어려움을 겪었습니다. 따라서 게스트 체크아웃 옵션은 명확하게 볼 수 있고 접근하기 쉬워야 합니다.

다음은 향상된 전자 상거래 결제 흐름을 위한 몇 가지 제안 사항입니다.

• 사용자 참여를 촉진하려면 현재 활성 단계에 번호를 매기고 표시하여 결제 프로세스의 각 단계에 레이블을 지정합니다.
• 진행률 표시줄과 같은 시각적 표현을 사용하여 결제 프로세스에서 앞으로 나아가는 것을 표시합니다.
• 결제 과정에서 등록 및 로그인 옵션을 제공하되 선택은 하지 마세요.
• 불안과 이탈률을 줄이기 위해 사용자가 게스트로 체크아웃한 경우 체크아웃 후에 로그인하거나 등록할 것을 제안합니다.
• 점진적 공개 기술을 적용하여 사용자 초점을 개선하고 콘텐츠를 30% 더 빠르게 로드합니다.

요약: 성공적인 모바일 전자 상거래 디자인의 주요 특징은 무엇입니까?

• 빠르고 쉬운 가입 및 체크아웃 프로세스 흐름 제공
• 적절한 아이콘, 배지, 리뷰 및 사용 후기를 표시하여 안정감과 신뢰감을 심어줍니다.
• 엄지 친화적 인 영역을 중심으로 설계된 상호 작용 제공
• 일관되고 압축된 탐색 사용
• 빠른 검색 및 간편한 제품 필터링 통합
• 모바일 애플리케이션에 대한 사용자 스트레스, 불안 및 전환율 간의 직접적인 연관성 이해
• 모바일 사이트의 빠른 로딩, 반응형 경험 제공
• 제품 이미지 확대를 위한 제스처 지원

모바일 전자 상거래 공간은 점점 더 커질 것입니다

모바일 전자 상거래 동향은 모바일 전자 상거래 시장이 기하급수적으로 성장하고 있으며 업계의 성장이 판매자에게 많은 이점을 제공했음을 보여줍니다. 그러나 이에 따라 판매자가 성공하려면 따라야 하는 모바일 전자 상거래 디자인에 대한 많은 모범 사례와 표준이 생겼습니다.

쇼핑객은 잘 작동하고 아름답게 보이며 자신의 행동에 맞는 모바일 애플리케이션을 기대합니다. 모든 응용 프로그램은 고유한 한계와 목표가 다르지만 이 문서에 설명된 기본 원칙을 따르면 성공적인 모바일 전자 상거래 응용 프로그램을 만드는 데 도움이 됩니다.

모바일 전자상거래 UX 개선 치트 시트 다운로드

• • •

Toptal Design 블로그에 대한 추가 정보:

• 저명한 전자 상거래 동향 및 디자인에 대한 영향(인포그래픽 포함)
• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 전자 상거래 UX – 필수 디자인 전략 및 원칙
• 전자 상거래 웹 사이트 디자인에 대한 궁극적인 가이드
• 전자 상거래 재설계: 사소한 변경으로 인해 UX가 크게 개선된 방법