오늘은 잘 된 디자인, Good Design의 대표! 좋은 디자인의 대표적인 사례인 '에어비앤비(airbnb)'의 앱 디자인을 공부해볼 겁니다. 에어비앤비는 창업자 두 명이 디자이너들인만큼, 디자인이 아주 잘 된 기업으로 유명합니다.
본 포스팅은 패스트캠퍼스 강의를 듣고 작성하는 포스팅입니다. 저는 현재 강사님께서 예제로 에어비앤비와 밀리의서재를 가져와서 분석해주시는 4-1, 4-2 회차를 듣고 있습니다. 4-1 에서는 잘 된 디자인을 분석하며 에어비앤비 앱 구조를, 4-2 에서는 개선이 필요한 디자인을 분석하며 밀리의서재 앱 구조를 분석합니다. 그리고 4-3 부터는 유튜브와 클럽하우스 앱을 심도 있게 분석하고 카피해보는 시간을 가집니다. 오늘은 4-1 강의를 수강하고 작성하는 공부기록입니다. (참고로 광고 아닙니다! 그냥 제가 혼자 기록해두고 계속 보려고 올리는 겁니다)
에어비앤비 UI, 구글 디자이너가 분석하는 잘 된 디자인
강사님께서 에어비앤비를 자세히 뜯어보며 분석해주셨는데요, 그 내용을 잘 정리해보겠습니다.
이전 강의에서 강사님이 좋은 UX 디자인 = 심플한 UX 디자인을 구성하는 네 가지 요소를 설명해주셨습니다
지난 포스팅에 자세히 적어놨던 네 가지 요소들. Targeted, Intuitive, Harmonious, Beautiful 입니다. 구글에서도 디자이너들이 작업하는 모든 과정에서 이 네 가지 측면을 정말 많이 생각한다고 하죠. 포스팅에 들어가시면 해당 내용을 더 자세히 볼 수 있습니다
2021.11.03 - [서비스 기획·디자인/패스트캠퍼스 챌린지] - 좋은 UX 디자인이란? (패스트캠퍼스 챌린지 3일차)
좋은 UX 디자인이란? (패스트캠퍼스 챌린지 3일차)
본 글은 패스트캠퍼스 챌린지를 신청하고 수강한 실리콘밸리 시리즈 구글 프로덕트 디자이너의 강의 후기입니다. 구글 프로덕트 디자이너의 강의 (패스트캠퍼스 챌린지 1일차) ⬆️ 위 글 ⬆
cogt.tistory.com
그렇다면 이 네 가지 요소가 제대로 지켜지지 않은 디자인이 나쁜 디자인이라고 할 수 있겠죠?
먼저 어떤 디자인이든 타겟팅(targeted)이 되려면 core user journey를 알아야합니다.
에어비앤비는 Core User Journey (CUJ) 에 잘 맞는 화면들을 가지고 있었습니다.
Core User Journey는 유저들이 서비스를 이용하는 목적을 정의하는 과정이에요.
그럼 에어비앤비의 CUJ는 뭘까요?
1. 내가 관심 있는 지역에 어떤 숙소들이 있는지 알고싶다.
2. 특정한 숙소가 어떤 퀄리티를 가지고 있는지 알고싶다.
3. 예약 완료를 손쉽게 하고싶다.
이걸 Targeted 된 형태로 풀면 이 앱은 심플한(=좋은 디자인인) 앱이 되는 겁니다! 심플한 UX가 좋은 UX 디자인이라는 것을 아셔야 합니다.
이렇게 에어비앤비의 코어 유저 journey를 정리한 뒤에 유저 데이터 분석을 하고, 유저가 어떤 것을 중요하게 느끼는지 그 계층에 따라 정보계층을 나눠서 각각의 페이지를 목적성 있게 디자인해야합니다. 그러면 사용성이 좋은 앱이 되겠죠?
이제 각 페이지를 자세히 분석해봅시다.
처음에 바로 보이는 페이지입니다.
첫 페이지에서 2/3 정도를 차지하는 큰 배너를 사용하면서 유저가 여행을 가고싶게끔 만들어줍니다.
그리고 검색 페이지로 넘어가서 지역명을 치면 자동완성이 됩니다. 첫 페이지에서 아래로 스크롤하면 검색하면서 (농장/ 해변근처/ 멋진수영장/ 캠핑카 ...) 등의 키워드로 원하는 숙소를 찾을 수 있는 파트도 있습니다. 사용자의 검색을 용이하게 만들어주는 것이죠.
이제 지역명을 검색하면서 강릉시를 선택했다고 칩시다. 왼쪽 사진을 보면 굉장히 흥미로운 것을 알 수 있는데요.
우리는 에어비앤비가 숙소만 제공하는 회사라고 알고 있지만, 에어비앤비가 '체험 찾기(find an experience)'라며 사용자들에게 discovery 효과를 줍니다. 유저는 이 부분을 보고 '어? 에어비앤비가 체험이나 강의나 서핑 같은 상품도 판매를 하는구나'라는 걸 아주 자연스럽게 (discovery 할 수 있게)알 수 있게 되는 것이죠. 이 체험 상품이 광고처럼 느껴져서 거부감이 들도록 하는 게 아니라, 예약하는 flow 안에서 자연스럽게 알 수 있도록 도와줍니다.
숙소 찾기를 선택하면 ( 달력 / 유연한일정 ) 두 가지를 선택할 수 있게 나옵니다. 특정 날짜를 선택할 수도 있고 유연하게 일정을 선택할 수 있게끔 도와줍니다. 사용자 입장에서 아주 좋은 기능인데 이조차 강요하지 않고 자연스럽게 선택할 수 있도록 만들었습니다.
다음 페이지에 들어가면 숙소 리스트가 쭉 있는데, 인터렉션을 두 가지 할 수 있습니다. 지도 안의 태그를 선택해서 숙소를 볼 수도 있고 스크롤업해서 숙소 리스트를 볼 수 있습니다. 이로써 두가지 core user journey를 달성한 건데요- 위치가 중요하다고 생각하는 사람은 지도에서 선택할 수 있게끔 하고, 위치가 중요하지 않은 사람들은 스크롤업해서 listing들을 보게 됩니다.
그럼 이제 자연스럽게 사진이 아주 크게 나오고, 별점 나오고, 숙소 종류와 특징, 가격이 나옵니다. 여기서도 사용자가 사진을 중요하게 여긴다는 것, 타이틀을 중요하지 않게 여긴다는 것을 알고 그렇게 디자인한 겁니다. 굳이 들어갔다 나왔다 하지 않고 바로바로 스와이프해서 사진을 볼 수 있게 경험을 제공해주는 것이죠.
그리고 오른쪽을 보면 리스트 중 하나를 선택한 것인데요, 상세 정보를 확인하려고 들어가면 그 숙소만의 특징을 알 수 있도록 incentive 같은 걸 제공합니다. '흔치 않은 기회입니다. 정애님의 숙소는 보통 예약이 가득 차 있습니다.' 같은 문구를 적어두는 것이죠.
그리고 이제부터 사진은 이미 봤으니 다른 세부 정보들을 알 수 있도록 정보계층을 명확하게 하여 정보를 제공합니다.
지금까지만 봐도 스크린 하나하나가 targeted 목적성이 있게 디자인되었기 때문에 simpe = 좋은 ux design이라는 것을 알 수 있죠.
예약하기 페이지를 보면, 이 페이지에서는 꼭 끝까지 스크롤을 해야 결제 팝업이 떠서 결제할 수 있도록 만들었습니다.
일부러 이렇게 버튼을 배치해서, 에어비앤비 측에서 모든 detail 정보를 확인하고 최종 결제를 하라는 메세지를 전달하고 있는 거죠.
그리고 나중에 앱을 다시 켜면 3번째 사진처럼 전에 알아보던 숙소를 하단에 팝업으로 띄워줍니다.
예전에 exit-out 했던 경험을 잡아주고 유저 리텐션retention을 부드럽게 이어주는 것이죠.
그럼 오늘의 공부 여기서 마치겠습니다.
오늘 강의에서는 사용성이 좋은 잘 된 디자인인 '에어비앤비'의 디자인 요소들을 자세히 분석하며 공부해보았습니다. 실제 앱의 각 페이지별 특성과 그 페이지의 각 컴포넌트를 구성한 이유, 어떤 점에서 이 디자인이 좋은지에 대해 자세히 설명해주시는 강사님 덕분에 UX 디자인을 논리적으로 만들어나갈 수 있는 기초를 쌓을 수 있었어요.
내일은 다음 회차 강의 수강 후기를 가져와보겠습니다!
어제보다 더 나은 오늘을 위해! 오늘도 열심히 달려봅시다.
해당 포스팅은 현재 수강 중인 실리콘밸리 시리즈 구글 프로덕트 디자이너의 강의를 듣고 작성한 공부 기록입니다.
구글 프로덕트 디자이너의 강의 (패스트캠퍼스 챌린지 1일차)
⬆️ 위 글 ⬆️ 을 보시면 더 자세한 설명이 나와있습니다 🤓
해당 포스팅은 패스트캠퍼스 챌린지에는 포함되지 않는, 혼자 복습하면서 작성한 글입니다.
'서비스 기획·디자인 > UI, UX 디자인' 카테고리의 다른 글
| 피그마는 무료? 피그마 무료 기능 알아보기 (0) | 2021.11.04 |
|---|