전자 상거래 모바일 사이트의 UX를 개선하는 방법

누군가가 공유한 모범 사례가 다른 사람들에게는 최선이 아닐 수 있다는 점을 항상 기억하십시오. 이러한 모범 사례는 동등하게 생성된 것이 아니라 시작점일 뿐입니다. 이 기사 시리즈에서는 고도로 연구된 모바일 사이트 모범 사례 또는 지침을 살펴보겠습니다. 우리의 목표는 놀라운 모바일 사이트 개발에 대한 지식을 확장하고 사용자가 모양, 명확성, 신뢰성 및 사용성의 특정 차원에서 모바일 사이트를 인식하는 방식에 대한 정량적 데이터로 모범 사례를 검증하는 것입니다.

이 문서 지침을 실습에 사용하는 것이 가장 좋지만 결국에는 그렇지 않습니다. 여기에서 최적화를 시작해야 합니다. 최소한 이 지침만큼은 잘해야 합니다. 이것이 현재 웹 관행임을 기억하십시오. 2년 전에는 작동하던 것이 더 이상 작동하지 않을 수도 있습니다. 전술 그림은 실제입니다. 사람, 웹 기술 및 마케팅 트렌드는 항상 변화하고 승리는 항상 부패하기 쉽습니다.

이러한 가이드라인을 고려하는 것이 좋지만 특정 웹사이트가 가이드라인과 어떻게 부합하는지 또는 차별화되는지도 고려하는 것이 좋습니다. 이러한 방법을 모바일 사이트에 즉시 적용할 수 있지만 먼저 테스트하는 것이 좋습니다. 모든 경우에 적용되지 않을 수 있습니다. "전자상거래 매장 모바일 사이트의 UX를 개선하는 방법"의 첫 번째 부분을 살펴보겠습니다.

1. 모바일 사이트를 먼저 디자인해 보십시오(즉, 데스크탑 사이트를 디자인하기 전에).

우리 모두는 판매에서 모바일 장치의 중요성을 알고 있습니다. 매출의 50% 이상이 모바일에서 발생합니다. 모바일 사이트를 디자인하는 것은 재미도 없고 쉽지도 않습니다. 사이트 디자인을 시작하는 가장 현명한 방법입니다. 이유를 알아보자:

제한 사항은 모바일 장치가 다른 플랫폼보다 높다는 것입니다. 화면 크기가 더 작고 대역폭이 낮으며 기타 많은 제한 사항이 있습니다. 모바일 사이트에서 처음부터 시작하는 경우 정상적인 성능 저하로 인한 합병증(예: 플랫폼 간에 변환되지 않는 기능 또는 로드하는 데 더 많은 시간이 걸리는 원치 않는 데이터)을 피할 수 있습니다.

다음으로, 사용자 친화적인 모바일 사이트는 깨끗하고 직관적이며 로드가 빨라야 합니다. 이러한 요구 사항으로 인해 디자이너는 사용자가 사이트를 방문하는 이유와 필수적인 콘텐츠 및 기능을 이해해야 합니다.
모바일 플랫폼의 더 나은 UX는 사용자가 원하는 모든 것을 쉽게 찾을 수 있다는 것을 의미합니다. 이 외에도 우선 순위가 지정된 콘텐츠에 대한 명확한 프레임워크를 개발하면 데스크톱 사이트를 설계하는 데 필요한 작업량이 줄어듭니다.

2. 모바일 사이트를 자동으로 리디렉션하고 페이지는 모바일에 최적화되어야 합니다.

모바일 사용자의 수는 여전히 증가하고 있으며 모바일 쇼핑객도 증가하고 있습니다. 사람들은 휴대전화로 자주 구매하며 간편할 것으로 기대합니다. 따라가지 않으면 뒤쳐집니다.

이를 유지하려면 전자 상거래 사이트가 모든 장치에 최적화되어야 합니다. 최적화된 모바일 사이트, 즉 완전 반응형 모바일 사이트를 통해 더 나은 모바일 경험을 제공합니다.

반응형 디자인은 웹 페이지가 보고 있는 화면에 맞게 조정되는 방식입니다. 웹 페이지 콘텐츠는 랩톱, 스마트폰, 태블릿, 데스크톱 등과 같은 다양한 장치의 화면에 자동으로 적응합니다. 이 접근 방식에서는 콘텐츠와 기능이 변경되지 않습니다.

반응형 사이트에서는 동일한 URL이 모든 플랫폼에 해당합니다. 이는 단순히 모바일 장치에 대해 별도의 URL이 없으며 사용자가 이러한 URL로 리디렉션될 때까지 기다릴 필요가 없다는 것을 의미합니다. 로드 시간 단축 = 모바일 환경 개선 또한 모든 SEO는 하나의 URL로 이동합니다.

적응형 사이트는 반응형 사이트와 비슷하지만 모든 화면 크기에 맞는 단일 레이아웃이 없습니다. 대신 다양한 화면 크기에 대한 여러 레이아웃이 있습니다. 사이트는 사용 중인 장치를 감지하고 해당 레이아웃을 표시합니다.

반응형 모바일 사이트를 개발하면 이 가이드라인을 쉽게 달성할 수 있습니다. 다양한 플랫폼과 기기(다양한 브라우저 사용)에서 사이트를 QA해야 합니다. 또한 사이트의 모든 페이지가 모바일에 최적화되어 있는지 확인하십시오. 여기서 핵심은 모바일 사용자에게 최적의 사용자 경험을 제공하는 것입니다.

3. 더 부드러운 UX를 위해 다양한 플랫폼에서 일관된 디자인

사용성을 보장하려면 모든 플랫폼과 장치에서 일관성과 표준을 유지해야 합니다. 이는 사용자가 사용하는 장치에 관계없이 전자 상거래 상점에서 동일한 비주얼, 패턴 및 흐름을 접하게 됨을 의미합니다. 간단히 말해서 모바일 장치나 데스크톱 브라우저를 통해 전자 상거래 상점에 액세스하는 사용자는 동일한 경험을 하게 됩니다.

화면 크기가 다르기 때문에 다른 레이아웃이 필요할 수 있지만 일관되게 설계된 경험에서 사용자는 친숙한 기능을 인식할 것입니다.

많은 신생 기업과 기업가는 데스크탑과 모바일 사이트를 서로 다른 제품으로 취급하는 실수를 범합니다. 이 접근 방식은 불일치를 생성하여 UX를 저하시키고 회사 브랜드를 오해할 가능성이 있습니다.

이 문제를 피할 수 있습니다. 다음은 몇 가지 권장 사항입니다.

A. 시각적 아이덴티티

동일한 색상, 모양, 글꼴 스타일, 시각적 요소 등을 사용하십시오.

B. 일관된 도상학

앱과 웹 아이콘은 동일한 기능을 나타내야 합니다.

C. 문구

버튼, 링크 및 메뉴 옵션의 이름은 모바일 및 데스크톱 웹사이트 모두에서 동일해야 합니다.

D. 상호작용 및 흐름

각 기능에 대한 탐색 프로세스는 동일해야 합니다(예: 제품 찾기 또는 결제 방법)

E. 디자이너, 개발자 및 테스터 간의 조정

팀의 모든 사람은 배포된 모든 기능에 대해 비슷한 이해를 갖고 있어야 합니다.

사용자가 웹과 모바일 서비스를 모두 어려움 없이 편안하게 사용할 수 있도록 이러한 기본 개념을 적용합니다.

4. 분석을 활용하여 모바일 사이트를 디자인하는 동안 장치의 우선 순위를 지정하십시오.

우리 모두는 적어도 한 번 이상 모바일 장치를 통해 웹 사이트에 액세스합니다. 그러나 어떤 모바일 장치나 플랫폼이 매장 검색에 가장 많이 사용되는지 알고 있다면 해당 장치에 가장 잘 맞는 사이트를 최적화할 수 있습니다.

Google Analytics와 같은 분석 도구는 사용자가 웹사이트에 액세스하는 방법을 정확하게 결정하기 위해 효율적이고 빠르고 명확한 통계 통찰력을 제공할 수 있습니다. Google Analytics를 사용하면 다음 질문에 대한 답변을 얻을 수 있습니다.

• 웹사이트를 방문한 사용자는 Android 또는 iOS 커뮤니티에서 몇 명입니까?
• 방문자의 몇 퍼센트가 저해상도 화면이 있는 기기를 사용하고 있습니까?
• 최신 안드로이드 버전과 2년 된 사용자의 페이지 방문 횟수에 차이가 있나요?
• iOS 모바일 사용자는 Android 모바일 사용자와 비교하여 스토어에서 얼마나 오래 소비합니까?
• 어떤 유형의 연결이 사용되었습니까? Wi-Fi 또는 모바일 데이터?

이와 같은 데이터는 제품 전략에 중요하며 기업은 타겟 고객에게 집중할 수 있습니다. 그들은 사용자의 실제 요구에 맞는 제품을 만들 수 있습니다.

예를 들어 , 전자 상거래 상점에는 화면에서 스크롤해야 하는 많은 이미지, 콘텐츠 및 긴 목록이 있습니다. 그들은 대부분의 사용자가 몇 초 동안 사이트에 머문다는 것을 깨달을 수 있습니다. 회사는 자신의 사이트에 접속한 기기의 프로필을 확인할 수 있습니다. 떠나는 유저들이 화면이 작고 해상도가 낮은 기기를 사용한다면 UX가 좋지 않아 유저들이 사이트를 떠날 수 있다. 따라서 우리가 취할 수 있는 다음 단계는 UX를 개선하는 것입니다.

간단히 말해서 사용자에 대해 더 많이 알수록 액세스 가능하고 효율적이며 즐거운 제품을 더 많이 보장할 수 있습니다.

5. 사이트의 모바일 버전 테스트

다양한 모바일 장치에서 웹사이트가 어떻게 보이고 작동하는지 확인해야 합니다. 웹사이트를 테스트하는 데 사용할 수 있는 특정 도구가 있습니다.

A. Google의 모바일 친화적

이것은 간단한 도구입니다. 사이트 URL을 입력해야 Google에서 "사용자 친화적인" 리뷰를 생성합니다. 리뷰는 다음과 같을 수 있습니다.
"이 페이지는 모바일 장치에서 사용하기 쉽습니다."
또는
"페이지가 모바일 친화적이지 않습니다. 이 페이지는 모바일 장치에서 사용하기 어려울 수 있습니다. 다음 문제를 해결하세요.

• 텍스트가 너무 작아 읽을 수 없습니다.
• 뷰포트가 설정되지 않음
• 클릭 가능한 요소가 너무 가깝습니다.
• 호환되지 않는 플러그인을 사용합니다."

B. 모바일 테스트. 나

모바일 test.me에서 확인하려는 웹사이트 URL을 입력하고 기기와 운영체제를 선택해야 합니다. 거기에서 모든 모바일 장치에서 전체 웹 사이트 보기를 얻을 수 있습니다. 테스트를 통해 출시 전에 오류를 수정할 수 있습니다.

6. 유연하고 유동적인 디자인 레이아웃 만들기

오늘날의 시장에는 디자이너의 노력을 증가시키는 모바일 해상도와 화면 크기가 많이 있습니다. 많은 장치의 밀도도 다양합니다. 저밀도 화면(360픽셀)에서 고밀도 화면(4K)까지 밀도를 설명하는 일반적인 방법은 다음과 같습니다.

• 저밀도(ldpi)
• 중간 밀도(mdpi)
• 고밀도(HDPI)
• xhdpi(초고밀도)
• xxhdpi(초고밀도)
• xxxhdpi(초초초밀도)

다음은 밀도와 관련된 몇 가지 간단한 용어입니다.

가. 결의

화면의 픽셀 수

B. 밀도 독립 픽셀(DP)

가상 픽셀 단위는 UI 레이아웃을 정의합니다. DP는 밀도 독립적인 방식으로 레이아웃 치수 또는 위치를 표현합니다. DP는 160dpi 화면에서 1개의 물리적 픽셀과 같습니다.

다. 화면 크기

화면의 크기는 화면 대각선 길이로 측정됩니다.

D. 화면 밀도

일반적으로 인치당 도트로 표시되는 화면의 물리적 영역 내의 픽셀 수입니다.

이 모든 개념은 모바일 사이트를 개발하는 동안 적용될 수 있습니다. 인터페이스가 모든 장치에서 적응할 수 있는지 확인합니다. 이것을 유체 인터페이스라고 합니다. 간단히 말해 유체 인터페이스는 치수가 백분율로 정의된 인터페이스입니다.

7. 반응형 디자인을 사용하지 않는 경우 일관성 유지를 위해 별도의 URL 생성

전자 상거래 상점의 UI를 디자인하는 동안 디자이너는 콘텐츠가 표시되는 방식과 다양한 장치를 사용하는 사용자가 콘텐츠에 액세스하는 방식에 대해 생각해야 합니다. 특정 시나리오에서는 비율과 레이아웃이 원래 디자인 사양과 많이 다릅니다. 웹 사이트가 여러 장치에 맞도록 설계되지 않은 경우 "반응형"이 아닙니다.
반응형 디자인은 클라이언트 장치 유형을 감지하고 표시되는 화면 크기에 맞게 디자인을 조정하는 개발 기술입니다. 따라서 데스크톱에서는 3열 형식, 태블릿에서는 2열 형식, 스마트폰에서는 1열 형식으로 동일한 콘텐츠가 표시될 수 있습니다.

반응이 없는 디자인은 잘못된 글꼴 크기, 클릭할 수 없는 버튼 등과 같은 여러 문제를 일으킬 수 있습니다. 모두가 반응이 좋은 디자인을 만들 수 있는 것은 아닙니다. 그러나 개발자와 디자이너가 반응형 웹 디자인을 관리할 수 있는 대안이 있습니다. 그들은 (HTML 태그를 통해) 장치 유형을 자동으로 인식하는 URL을 생성할 수 있습니다. 장치를 감지한 후 콘텐츠를 최적으로 표시할 수 있습니다.

생성된 URL의 몇 가지 예는 다음과 같습니다.

• www.website.com(데스크톱 액세스)
• m.website.com(모바일 액세스)
• www.website.com(기본 HTML이 포함된 더 가벼운 버전)(기능 전화 액세스)

8. "뷰포트 메타 태그"를 사용하여 모바일 화면에 페이지 맞추기

Google에 따르면 "뷰포트는 모바일 장치에서 홈페이지가 표시되는 방식을 제어할 수 있습니다." 즉, 디자이너가 뷰포트를 고려하지 않으면 모바일 장치의 UI가 데스크톱 사이트처럼 나타납니다. 이 시나리오에서 시스템은 모바일 사용을 위해 화면을 조정하지만 일반적으로 작동하지 않습니다. 어떤 경우에는 이미지가 왜곡되어 좋지 않은 사용자 경험을 제공합니다. 뷰포트를 적용한 후 디자이너는 디스플레이 모드를 제어하고 UX를 개선할 수 있습니다.

뷰포트를 어떻게 고려합니까?

CSS Device Adaptation 사양에 포함된 "viewport 메타 태그"라는 CSS 태그를 사용할 수 있습니다.
이 태그의 구문은 다음과 같습니다. <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. 모바일 디자인을 시작하면서 웹사이트 "핵심"을 결정하십시오.

모바일 사이트 디자인을 만드는 동안 디자이너는 사이트의 주요 기능이 명확하게 표시되도록 해야 합니다. 요컨대, 모바일 장치용으로 설계된 모든 웹사이트에서 CTA가 명확하기 때문에 모바일 웹사이트는 완전한 기능을 허용해야 합니다.

그러나 포함할 다른 기능을 결정하는 방법은 무엇입니까? 웹사이트의 핵심에 대해 생각해 보십시오. 웹사이트의 주요 기둥은 무엇입니까? 웹사이트의 주요 기능은 무엇입니까? 사소하지만 UX를 향상시키는 기능(예: 검색, 필터 등)은 무엇입니까?

핵심개념을 음식배달 전자상거래 사이트에 적용한 예를 살펴보자. 이 사이트의 주요 기둥은 다음과 같습니다.

• 로그인 및 가입
• 상품검색
• 제품 목록
• 장바구니에 추가
• 점검

데스크톱 사이트에는 더 많은 기능이 있지만 필요한 기능을 필터링하여 모바일 사이트에 포함할 수 있습니다. 또한 사용자가 작은 화면에서 너무 많은 옵션에 압도될 가능성을 제거합니다.

10. 간단한 양식 및 입력 필드 사용

사용자가 지원 팀에 연락하거나 뉴스레터 및 기타 목적을 얻기 위해 많은 사이트에서 작성할 수 있는 양식이 있습니다. 모바일 사용자는 이러한 양식이 제대로 설계되지 않은 경우 큰 문제가 될 수 있습니다. 양식이 길고 복잡할수록 사용자가 정보를 입력하기가 더 어렵습니다.

모바일 장치에 맞게 양식을 최적화하는 방법은 무엇입니까?

• 사용자가 반드시 입력해야 하는 필수 필드만 포함합니다. 필수 필드가 너무 많으면 사용자가 등록 프로세스를 포기할 가능성이 높아집니다.
• 필드를 너무 많은 필드로 분할하지 마십시오. 예를 들어, 이름/성은 간단한 이름으로 간주될 수 있습니다.
• 연락처 번호와 같은 숫자 필드에 대해 숫자 키보드가 자동으로 활성화되어 있는지 확인하십시오. , 우편번호 등
• 오류 메시지를 간결하게 만드십시오.
• 필드에 자동화를 포함시키십시오. 예를 들어 사용자의 주소를 묻는 동안 GPS 기능을 활용하고 핀 코드, 주, 도시 등과 같은 필드를 미리 채웁니다.

이러한 기본 개념을 적용하면 모바일 사이트의 UX가 향상됩니다. 이러한 응용 프로그램은 사용자가 양식이나 사이트를 포기할 가능성을 제한합니다.

마무리

이 시리즈의 첫 번째 단계에서는 전자 상거래 상점의 모바일 사이트 UX를 개선하기 위한 10가지 지침을 살펴보았습니다. 인도 최고의 전자 상거래 개발 회사인 Emizentech는 반응이 빠른 전자 상거래 상점을 개발하는 전문 지식을 보유하고 있습니다. 귀하의 요구 사항을 알려주십시오.