그 버튼, 꼭 필요한가요?
사용자를 위한 최소한의 액션만 남기기 (그런데 이제 맥락을 곁들인)
그 버튼, 꼭 필요한가요?
얼마 전에 정렬 순서를 변경하기 위한 UI를 그리다가, 입사 초기에 있었던 일이 떠올랐다. 당시에 나는 1) 상태값 변경 / 2) 변경값 적용이라는 두 단계를 거치도록 UI를 그렸다. 깊게 고민하지 않고, 당연히 변경할 상태값을 고른 다음에 [적용하기] 버튼이 있는 편이 자연스럽다고 생각했던 것 같다.
우리 팀에는 몇 가지 제품 제작 원칙이 있다. 그중에 하나가 최소한의 액션만 남기기다. 당시에 나의 사수는 와이어프레임을 리뷰하며, '이 버튼이 꼭 필요한가요?'하고 나에게 되물었다. 나는 사수가 나에게 질문을 던지는 이 순간이 참 고통스러우면서도 좋았다. 화면을 다시 올려다 보았다. 필요 없어 보였다. 앞뒤 맥락을 고려했을 때, 선택을 통해 단계를 이동하게 되는 상황이었으며, 이 맥락에서는 최소한의 액션만 남기는 것이 합당해 보였기 때문이다. 적용하기 버튼은 불필요한 액션만 하나 더 늘릴 뿐이었다.
(좌) 버튼을 생략한 바텀시트 / (우) 버튼을 표시한 바텀시트시간이 조금 흘러, 이번에는 정렬순서를 설정하는 바텀시트를 그리게 되었다. 그래서 이번에도 왼쪽의 바텀시트처럼 [적용하기] 버튼을 생략하려고 했다.
그런데, 이번에는 입사 초기 때와 조금 다른 측면에서의 고민이 필요해 보였다. 여전히 '이 버튼이 정말 필요한가?' 하는 동일한 질문에 부딪히긴 했는데, 바텀시트에 접근하기 전의 화면 UI에 따라서 버튼이 필요할 수도 필요 없을 수도 있어보였다.
(좌) [순서 변경하기] 버튼을 생략한 A안 / (우) [순서 변경하기] 버튼을 표시한 B안그래서 바텀시트를 두 가지 방향으로 그려보았다. 왼쪽의 UI는 [변경하기] 버튼이 필요 없다. 정렬 순서를 선택하는 동시에 설정값이 변경되기 때문이다.
오른쪽의 바텀시트에는 [변경하기] 버튼이 있다. 우리 유저는 연령대가 높은 편이며, IT 친숙도가 낮다. 이들의 특성을 고려해서 유저에게 아래의 단계를 차근차근 거치도록 만들어진 바텀시트다.
1) '현재 설정값'이 무엇인지 인지하고
2) '변경하려는 설정값'이 무엇인지 선택한 다음
3) [변경하기] 버튼을 누른다.
그렇다면, 우리 유저에게는 두 가지 UI 중에 어떤 UI가 더 적합할까? 항상 최소한의 액션만 제공하는 것이 옳을까?
최소한의 액션만
남기는 것이 항상 옳은가?
A - (좌) 리스트뷰 / (우) 바텀시트맥락에 따라 조금 다른 답이 필요할 것 같다. 위 UI의 경우, 바텀시트에서 현재 설정값을 알 수는 없지만 리스트뷰(좌)에서 현재 정렬순서가 무엇으로 되어있는지 알 수 있다. 따라서, 바텀시트에서 현재 설정값을 표시하지 않고 [변경하기] 버튼을 생략해도 유저 경험에 크게 문제를 일으키진 않지만, 리스트뷰의 레이아웃이 좀 지저분해진다. 게다가 IT친숙도가 낮은 우리 유저의 특성을 고려하면 위와 같은 상황에서 '이사일 순서'를 선택하는 즉시 설정값이 적용되며, 바텀시트가 사라지는 상황에서 길을 잃을 가능성이 있어 보였다.
1. 리스트뷰에서 현재 어떤 순서로 정렬되어 있는지 바로 알 수 있어요.
2. 그래서, 바텀시트에 현재 어떤 값으로 설정되어 있는지 생략할 수 있어요.
3. [정렬 순서 버튼 선택 = 순서 적용]으로 처리하여 [변경하기] 버튼을 생략할 수 있어요.
B - (좌) 리스트뷰 / (우) 바텀시트다음 B안의 경우에는 리스트뷰에서 현재 어떤 순서로 정렬되어 있는지 알 수 없다. 그래서 바텀시트에서 현재 설정값이 무엇인지 알려줘야 하며, [변경하기] 버튼이 필요해진다. 바텀시트의 UI가 다소 지저분해지긴 하지만, 리스트뷰에서 [주문 정렬] 버튼이 기존에 있던 버튼 패널과 같은 레이아웃에 위치하게 되어 앞의 A안보다는 정돈되어 보인다.
또한, IT친숙도가 낮은 우리 유저의 특성을 고려했을 때도 '서비스일 순서로 보기'를 선택하는 즉시 화면이 넘어가버리는 것보다는 [변경하기] 버튼을 직접 누르게 하는 것이 더 명확하게 상황을 인지시키기에 좋아 보였다.
1. 리스트뷰에서 현재 어떤 순서로 정렬되어 있는지 바로 알 수 없어요.
2. 그래서 바텀시트에서 현재 어떤 정렬로 적용되어 있는지 알려줘야 해요.
3. 순서를 변경할 때는 현재 적용 중인 값과 변경할 값을 구분할 수 있어야 해요.
4. [변경하기] 버튼을 통해 유저 스스로 맥락을 명확히 인지할 수 있도록 도와야 해요.
변경할 값만 선택하면 다음 단계로 넘어가는 A안에 비해서, 변경할 값을 선택하고 [변경하기] 버튼을 누르는 2번의 행동을 거치게 되지만, 리스트뷰의 레이아웃을 정돈하고 IT 친숙도가 낮은 우리 유저군의 특성을 고려하였을 때, B 안이 더 적합해 보였다.
우리 유저군의 IT 친숙도가 점차 높아지게 된다면 언젠가 과감하게 최소한의 액션만으로 명확하게 UX를 제공할 수 있는 화면을 그려내고 싶다. 혹은 IT 친숙도가 낮은 이들도 어려움 없이 사용할 수 있는 심플한 UX를 그릴 수 있는 능력을 내가 갖추거나.
끝.
