[Design] 쿠팡 웹사이트 분석 및 Laws of UX 적용하기

 

 

 

쿠팡 웹사이트가 촌스럽다는 등 타 웹사이트와 비교했을 때 다소 아쉽다는 의견이 분분하다.

이에 일전에 학습한 Laws of UX 페이지에 표현된 UX의 핵심 원칙 몇 가지를

현 쿠팡 웹사이트를 직접 사용해보며 찾은 일부 요소에 적용해 개선점을 찾아보고자 한다.

 

정리 내용은 이곳에...

---

 

 

- 여행/티켓 페이지 - 지역 선택 시 오른편에 나타나는 구글 지도 API 컴포넌트

 

[ 현재 ]

지도상에서 특정 장소를 가리키는 핀 컴포넌트에 마우스를 드래그할 시,

해당 핀 컴포넌트가 지도의 정중앙이 되도록 지도가 즉시 이동한다.

 

[ 문제점 ]

유저가 지도상에 표시된 여러 개의 핀 컴포넌트 중 단 한 개의 장소를 알아보기 위해

마우스를 해당 핀으로 드래그하기만 해도 지도가 즉각적으로 해당 핀이 중심이 되도록 이동한다.

이는 다수의 유사한(근접한) 선택지 중 하나를 선택하는 유저 입장에서

다소 번잡하고 어지러운 느낌을 줄 수 있다.

또한, 근처에 여러 개의 핀 컴포넌트가 존재할 경우

유저가 목표한 핀 컴포넌트가 아닌 다른 컴포넌트로 onDrag 반응하여 거의 동시에 이동하는 문제가 발생한다.

UX 반응성을 낮추어도 될 것 같다는 생각이 든다. 

 

[ 적용 법칙 ]

제이콥의 법칙(Jakob's Law)

유저는 그들이 다른 사이트에서 이용한 이미 잘 알고 있는(기대하는) 방식으로 당신의 사이트를 이용하고자 한다.

 

[ 해결 ]

현재 구글에서 제공하는 지도 API의 경우, 지도상에 표시된 다수의 핀 컴포넌트에 대해

하나의 핀 컴포넌트로 onDrag 하면, 해당 핀으로 지도가 움직이는 대신

지도는 고정되어 있는 상태에서 해당 핀 컴포넌트의 색상만 변경되며 강조된다.

쿠팡 웹사이트의 구글 API 상에서도 이러한 방식을 동일하게 적용한다.

 

[ 기대 ]

유저는 보편적으로 알고 있는 구글 지도 웹사이트 상의 상호작용과 동일한 방식으로

쿠팡 웹사이트의 지도 API를 이용함으로써 향상된 UX적인 편의성을 제공받을 수 있다.

 

(왼) 쿠팡 웹사이트에서 제공하는 구글 API / (오) 구글 지도

 

 

 

 

- 메인페이지 - Footer Section

 

[ 현재 ]

쿠팡 웹사이트의 Footer 섹션은 보편적인 웹사이트에서 제공하는 Footer 섹션처럼

고객센터 연락처, 저작권 정보, 사이트맵, 연관 페이지 등을 제공하고 있다.

그중 최하단에 배치된 저작권 표시 박스 컴포넌트는 #000000에 근접한 어두운 색상으로 분리되어 있는데,

사진에서와 같이, 웹사이트를 하단 끝까지 스크롤해보면 해당 섹션의 하단 마진과 패딩이 거의 적용되어 있지 않다.

 

 

[ 문제점 ]

검은 색상의 박스 컴포넌트에 텍스트가 너무 빼곡하고, 하단 마진과 패딩이 적용되지 않아

텍스트의 끝 부분은 마치 잘린 듯한 느낌을 준다.

하단 패딩값이 작아 웹페이지 테두리에 여백 공간이 없기에

페이지 전반에 걸쳐 가독성이 떨어지며, 결국 유저에게 '예쁘지 않은 페이지'라는 인식을 제공한다. 

 

[ 적용 법칙 ]

심미적 사용성 효과(Aesthetic-Usability Effect)

유저는 예쁜 디자인을 사용성이 더 좋은 디자인으로 인식한다.

 

[ 해결 ]

여백 공간은 다른 컴포넌트와의 정렬 및 효율적인 상호작용을 위해 필수적이다.

웹페이지의 상/하/좌/우에 충분한(과하지 않은) 패딩 및 마진 값을 적용한다.

상/하, 좌/우에 대한 각각의 값은 서로 일치하거나 두 값 사이에 큰 차이가 나지 않도록 한다.

 

[ 기대 ]

적절한 여백 공간을 통해 유저는 웹페이지의 보다 안정적인 UI/UX를 제공받는다.

 

 

 

 

도움이 되셨다면운 좋아요만 눌러주세요!!!!!!!!!!!