brunch

You can make anything
by writing

C.S.Lewis

by 이새봄 May 24. 2021

기획 초짜가 기획할 때 참고해보면 좋을 UX 요소

이번 프로젝트를 진행하면서 기획할 때 참고하면 좋을 UX 요소들에 대해 정리해보는 시간을 가지게 되었다. 사실 글을 쓰고 있는 필자도 이제 막 1년이 채워지는 기획 초짜인데, 프로젝트를 진행하면서 배운 (?) 요소들을 기록하려 한다.

1. 동일한, 중복되는 데이터는 여러 번 노출하지 말고 한 번만 노출하자.

모바일에서는 작은 제한된 영역 안에서 정보를 제공해줘야 하기 때문에 불필요한 요소들은 최대한 빼고 설계를 진행하는 것이 좋다. 투썸플레이스 오더 앱을 보게 되면 홀케이크 예약 메뉴가 스티키 메뉴로 존재하는데, 목록 건마다 존재하는 '주문 예약'이라는 붉은 버튼이 눈을 피로하게 만든다.

만약 주문 예약이 바로 주문이라는 버튼으로 바뀌고 랜딩 되는 페이지가 다르다면 의미가 있을 수 있지만, 현재는 영역을 눌러도, 주문 예약 버튼을 눌러도 같은 상세 페이지로 랜딩 된다. 꼭 필요한 경우가 아니라면 의미 없이 중복되는 데이터는 한 번만 노출하거나 생략하도록 하자.

주문 예약 주문 예약 주문 예약 주문 예약 주문 예약 주문 예약........

2. 유저가 제일 먼저 봤으면 하는 중요한 정보는 가장 상단에 좌측으로 노출하자.

레이아웃을 읽는 리딩의 패턴은 몇 가지가 있는데 대표적으로 F-pattern과 Z-pattern이 있다. 두 패턴 모두 가장 중요한 요소를 좌측 상단에 배치하는데, 우리들이 책이나 기사를 읽을 때를 생각해보면 쉽다. 평생을 왼쪽에서 오른쪽으로, 위에서 아래로 콘텐츠를 읽어냈기 때문에 서비스에서도 동일한 패턴이 적용되어야 유저가 익숙하다. 이러한 이유로 기획자는 중요한 요소와 그렇지 않은 요소를 구분하여 콘텐츠의 우선순위를 먼저 정해야 한다. 우선순위를 정하고서는 제일 먼저 보여주고 싶은 중요한 정보를 Hot Place에 배치시키는 것이다.

F/Z Pattern, eye tracking : Where is the Hot Place, By rockcontent

이어서 투썸 앱 홀케이크 예약 상세 페이지로 콘텐츠를 재구성해보았다. 상세로 진입했다는 것은 곧 유저가 찾고자 하는 정보, 하고자 하는 '목적성'이 명확하다는 의미이다. 앞서 말했던 리딩의 패턴을 토대로 가장 상단에 중요한 정보들을 좌측부터 노출한다. 메뉴 정보 -> 요거 생크림 3호로 한 번 더 정보를 확인시켜준다.

내가 만약 홀케이크를 예약하려고 상세 페이지를 들어왔다면.. 케이크 이름, 사진, 가격을 가장 먼저 찾을 것 같기에 사진을 가장 상단에 크게 노출시키고 차례로 이름, 설명, 가격 정보를 노출하는 것으로 구성했다. 부가적으로 초의 대한 옵션이 일반초 0원, 숫자 초 700원으로 가격이 고정되어 있어서 동일한 가격 정보는 한 번만 노출되도록 수정해보았다! 같은 정보를 여러 번 노출할 경우, 같은 숫자 초도 가격이 다른가?! 하고 불필요한 생각 유도를 하게 되는 것 같다.

3. 옵션이 적을 경우 라디오, 옵션이 많을 경우 셀렉트 UI를 활용하자.

흔히 여러 옵션 중 유저가 딱 한 가지만을 선택하게 할 때 '라디오 버튼'을 쓰는데, 이렇게 이름 붙여진 유래에 대해 먼저 살펴보자. 라디오 버튼은 옵션 버튼이라고도 하고, 실제 라디오 버튼의 동작 방식에서 유래되었다고 한다. 어렸을 적 사용하던 (?) 라디오를 떠올려보면 여러 버튼 중에서 한 가지가 눌려져 있을 때 다른 버튼을 동시에 선택할 수 없는 게 특징이다. 만약 다른 버튼을 눌렀을 때에는 기존에 눌려져 있던 버튼은 튕겨져 나오게 된다.

Pick me Pick me! By pixabay

아래는 가정집에서 위탁 펫시터 서비스를 이용하는 펫 플래닛이라는 앱의 댕댕이 프로필을 수정하는 화면인데 라디오 버튼에 Default(기본) 값이 없다. 사실 라디오 버튼의 기본값이 꼭 필요한가? 의 여러 의견들이 분분하다. 기술적인 관점에서 꼭 필요하지 않더라도, 내가 구현하고자 하는 화면에서 해당 필드가 필수라면 기본값을 두는 것이 좋을 것 같다는 생각이다. 만약 그 사람이 꼭 필요한 필수 정보를 놓치고 넘어가려고 할 때, 라디오 버튼 기본 값에 시각적으로 디자인 구분을 주면 명확히 짚고 넘어갈 수 있게 될 것이기 때문이다.

펫 플래닛

예를 들어 회원가입 시에 국가를 선택하는 케이스를 살펴보자. 많은 국가 정보들을 셀렉트에 몽땅 담아버리면.. 유저 입장에서 가장 빠르고 명확하게 선택해서 넘길 수 있는 정보를, 보고 식별하는 것조차 어려운 UI로 만들어버린다. 이렇게 유저 본인이 찾고자 하는 것이 명확할 때는 자동 완성형 기능의 텍스트 필드 UI가 효과적일 수 있다. 정보를 직접 타이핑 (검색) 해서 자동 완성된 정보들 중에서 본인이 찾는 정보를 직접 선택할 수 있게 하는 것이다. 이렇게 했을 때 유저의 입장에서도 명확하고 빠르게 다음 스텝으로 넘어갈 수 있고, 제공하는 기업의 입장에서도 불필요한 이탈률 등을 방지할 수 있는 UI가 되는 것이다.