[아티클리뷰] 복잡할 때 꺼내 읽기 좋은 UX이야기

복잡함과 혼란스러움 구별하기/지나친 배려 경계하기

UXUI 스터디의 내용을 기록해 둔 글입니다. :-)

#HOLIX  #위클리UXUI분석스터디

*부족한 부분이 많을 수 있어 피드백은 언제나 환영합니다 :-D

리뷰할 아티클 :

화면이 복잡할 때 꺼내 읽기 좋은 UX 이야기    by. 우디

https://brunch.co.kr/@cliche-cliche/140

02화 화면이 복잡할 때 꺼내 읽기 좋은 UX 이야기

혹시 나도 과잉 부모형 UX 디자이너?    by.민근

https://brunch.co.kr/@dhalsrms3994/40

혹시 나도 과잉 부모형 UX 디자이너?

Intro.

현재의 복잡함

 할 일이 많을 때, 머릿속이 복잡하고 정리가 안 되면 가끔 현재의 행동이 멈추고 진전이 안 되고는 합니다.  

생각을 정리하기 위해서는 글로 쭉 적기도 하고, 잘게 쪼개보기도 하고, 몇 가지의 생각은 접어두는 등 여러 방법으로 내가 감당할 수 있을 만큼 단순화해야 하죠.

 저는 디터 람스의 Less is More라는 말을 참 좋아하는데, 어떨 때는 복잡한 일이 복잡할 필요가 있어서 복잡한 게 아닐까 하는 생각이 따라붙기도 해서 어지럽습니다.

 요즘처럼 Generative AI 등이 등장하고, 발전한 기술이 나의 여러 복잡다단한 일들을 대신 처리해 줄 수 있는 이 시대는 편리하기도 하면서, 인간의 발전을 위해 자신의 힘으로 생각해야 할 일과 단순화해서 빨리 넣어둘 일을 구분해야 길을 잃지 않을 것 같다는 생각도 듭니다.

복잡함과 혼란스러움

● 복잡하다

1. 일이나 감정 따위가 갈피를 잡기 어려울 만큼 여러 가지가 얽혀 있다.

2. 복작거리어 혼잡스럽다.

complicated, complex, intricate, tangled

● 혼란스럽다

1. 보기에 뒤죽박죽이 되어 어지럽고 질서가 없는 데가 있다.

confused, chaotic, disordered

● 테슬러의 법칙 (Tesler's Law)

'복잡성 보존의 법칙'이라고도 알려진 심리학 법칙 (Tesler's Law)

모든 프로세스에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재. (= 내재된 복잡성)

디자인과 개발 과정에서 감당함으로써 사용자 부담을 최소화할 수 있다.

단, 추상적으로 느껴질 정도로 인터페이스를 단순화해서는 안 된다.

 ● 어포던스 (Affordance)

 행동유도성 (UX용어). 어떤 행동을 유도하게끔 하는 요소.

 ex. 손잡이는 문을 열게끔 유도하고, 회원가입의 인풋 창은 정보를 입력하게 한다.

✔️ PICK한 이유:

프로덕트 디자인은 정제되고 정리되어야 하나, 무조건 단순화가 능사는 아니라고 합니다.

'복잡함'과 '혼란스러움'을 구분하고 다룰 줄 알아야 한다고 하니, 이들을 어떻게 다뤄야 할지 생각해 보고, Too much 함을 판단할 기준을 정할 때의 힌트를 얻기 위해 이 아티클을 리뷰하게 되었습니다.

✔️주요 내용

1. 제거해야 할 대상은 복잡함 자체가 아닌 혼란스러움

1) 모든 것에는 일정 수준의 복잡성이 존재한다.

복잡함은 완벽히 제거되지 않으며, 좋지도 나쁘지도 않은 자연스러운 현상이므로 잘 다스려야 한다.

2) 복잡함 자체가 아닌, 이것이 유발하는 '혼란스러움'을 제거하자.

사용자 경험 디자인에서 단순성이 목표가 되어서는 안 된다.

서비스에 남길 최소 기능을 고려한 뒤 혼란스러움을 야기하는 요소를 하나 둘 제거해 보자.

2. 복잡함을 다스릴 수 있는 수단, 질서

1) 많은 양의 정보도 익숙한 질서로 받아들이면 어렵게 느껴지지 않는다.

aka. 규칙성

2) 인간은 완벽히 단순한 것보다 약간의 복잡성을 바라는 경향이 있다.

ex. 많은 이들이 좋아하는 야구는 단순해 보이나, 규칙이 책으로 약 200페이지 분량.  사람은 표면의 단순함 밑 수많은 규칙이 부딪히며 만들어내는 관계의 미묘성을 즐긴다.

3. 사회적 기표(질서)로 복잡함 다스리기

1) 사회적 기표: 세상이 보내오는 신호. 의미를 전달하고, 다음 할 일을 지시해 준다.

ex. 신호등의 빨간불은 사람을 멈추게 하고, 녹색불은 움직이게 한다.

2) 낯선 환경에서 사회적 기표를 쉽게 체득하는 법 : 다른 사람의 행동(선례)을 유심히 관찰하는 것.

세상에는 수많은 사회적 약속이 존재. 문화에 따라 다르게 해석될 여지도 있음.

따라서, 새로운 시스템을 받아들이는 것은 매우 어려운 일이다.

3) 어포던스 Affordance : 행동유도성 (UX용어)

사회적 기표를 고려해 적당한 시점에 정확한 강도의 어포던스를 배치하자.

혼란스러움이 느껴지는 사용자 경험이 있다면, 어포던스의 강도가 맥락에 맞게 배치되었는지부터 확인해 보자.

4. 익숙한 경험을 활용한 UX 설계

1) UX에서의 혼란은 대부분 실제세계의 규칙과 어포던스의 불일치 사이에서 발생.

혼란스러움은 대부분 실제 세계의 규칙들을 통해 해결가능하므로, 평소 세상의 작동방식에 대해 집중해 보자.

2) 개념적 모델 (Conceptual Model)

사회적 기표와 사용자 경험을 맵핑하는 과정 by. 도널드 노먼.

현실의 복잡 미묘한 질서는 디지털에서 새로운 경험을 만들 때 좋은 소재가 될 수 있다.

5. 개념적 모델로, 혼란을 줄인 사례

- 대중성을 이미 획득한 앱들의 경우, 사용자 경험 자체가 하나의 개념적 모델을 형성.

사용자는 새로운 앱 설치 전 자신에게 익숙한 사용자 경험을 예상할 가능성이 높기에 카테고리 선두주자들의 사용자 경험부터 살펴보는 것도 중요.

1) 오프라인의 익숙함을 본 따기

○ 구글맵과 지도

익숙한 종이지도 모습을 본 따 시작한 온라인 지도 화면과 사용방식은 이제 또 다른 개념모델로 자리 잡은 듯하다. 

○ 감정스티커와 무다

감정을 시각화한 오프라인의 감정 스티커를 온라인에 옮겨와 감정일기 앱에 활용. (마치, 이모티콘처럼)

2) 카드놀이와 틴더의  Card Swipe UI

: 마음에 들면 오른쪽, 마음에 들지 않으면 왼쪽. 

사람이 고민하고 결정을 할 때 최소 2가지의 대척점으로 분류를 하는 익숙한 행태를 이용하여 UX의 혼란을 최소화.

3) 비교상 만들어주기
: 비교 대상을 함께 배치해 주인공의 가치를 더 명확히 느끼게 하고, 가치비교와 선택을 할 때 혼란을 줄여줌.

○ 커머스의 상품 크기 비교 이미지

상품의 실제 크기를 짐작할 수 있게 일상에서 자주 접하는 소품을 상품 옆에 이미지로 제시하여, 텍스트로 기재된 사이즈에 대한 불필요한 혼란과 상상을 줄여준다.

○ 사회적 증명 심리(Social Proof)를 반영한 CTA버튼

CTA 버튼 아래에 '일정 시간 동안 몇 명의 구매자들이 구매했는지' 등의 정보를 추가해서 혼자 선택할 때의 막막함을 줄여줌.

4) 슬롯머신과 당겨서 새로고침

인스타그램, 페이스북, 메일링 서비스 등에서 이용되는 대중적인 인터페이스.

피드를 아래로 당기는 간단한 행동이 새로운 피드라는 가변적인 보상(긍정적 감정)으로 연결.

사람은 동일하고 간단한 행동을 반복할 때 주어지는 보상이 랜덤 할수록 중독되기 쉬우므로, 디자인 윤리와도 연결된다. (*사람의 심리를 이용해 악의적으로 UX를 설계하지 않도록 유의하자.)

6. 지나친 사용자 배려와 개선 방안

사용자가 마주치는 모든 문제를 해결해 줄 수는 없다는 점은 지극히 자연스럽다.

한계가 있다고 해서 수많은 경고 알림과 사소한 행동들까지 팝업으로 안내하면 사용자의 부정적 반응을 얻게 된다.

1)'빗나간 배려'와 개선방안

- 유저 리서치로 진짜 문제 물어보기

○ 문제 상황 A

: 전문툴을 다룰 수 없는 초보자도 3D 증강현실 콘텐츠를 구현할 수 있도록, 웹 3D 캔버스에 공간을 만들 수 있는 모든 기능을 GUI로 제공.

-> 테스터가 3D 공간을 맞닥뜨리는 것에서부터 좌절

○ 개선 과정 A

: 리서치로 사용자가 문서 작업 툴 등에는 익숙하다는 결과를 얻음  -> 2D 편집 및 제작 툴에는 익숙하다는 인사이트 도출 -> 3D기능과 함께 여러 장을 추가할 수 있는 2D 레이아웃을 동시 제공

2) '과잉 배려'와 개선방안

- 적정 수준에서는 사용자가 좌절할 수 있게 놓아두고, 선택적 기능으로 부분적인 대안 제시하기

- 할 수 없는 것보다는, 할 수 있는 일을 긍정문으로 알려주기

○ 문제상황 B

ios에서 여러 개의 동영상 추가 시, 자동재생이나 소리재생에 오류, 겹침 등 불편함이 있는 상황

-> 비디오 추가 전, 패널마다 장문의 메시지를 추가/ 클릭할 때마다 경고 메시지를 띄워 사용자를 질리게 한다.

○ 개선 과정 B

동영상을 추가할 때, 모든 상황이 아닌 특정 상황에서만 불편함이 있다.

->다시 말하면, 특정 상황이 아니면 기능적용이 자유로운 상황임을 인식하고 최소한의 문제상황에만 알림 띄우기

○ 문제 상황 C

'여러 개의 비디오를 추가하면 ios에서 소리가 정상적으로 나오지 않을 수 있습니다' 팝업 메시지로 띄우기

-> 잔소리처럼 느껴지고 경고 문구라서 위압적임.

○개선 과정 C

메인 비디오 개념을 도입하여, 여러 개의 비디오 중 메인이 선택되었을 때는 이것 하나만 정상 재생되도록 선택적 기능을 추가.

-> '여러 개의 비디오 중 메인 비디오가 있으면 소리 겹침 문제를 해결할 수 있습니다.'라는 긍정문 팝업 메시지 띄우기.

3) 적당한 배려의 예시

최종 목적을 잃지 않고(긍정적인 사용자 경험),

사용 환경과 개발 상황에 대한 이해를 바탕으로

사용자에게 유리한, 조용한 배려.

예시)

하나하나 세세하게 안내하기보다는,

사용자보다 먼저 깊게 고민해서 최소한의 동작으로 최종 목적을 이룰 수 있게, 

태스크 단계를 한 단계 줄여줌. 

  

최종 목적: 사용자의 긍정적이고 매끄러운 증강현실 경험.

제약상황: iOS에서는 자동재생 동영상도 사용자가 터치를 해야만 소리가 재생됨.

배려: 정책과 사용환경상, 서비스 이용을 위해서 반드시 동의해야 하는

권한 허용 시스템 팝업창을 터치하는 동작을 이용해

자연스럽게 iOS환경의 소리재생을 이끌어냄.

(여러 번 안내 팝업창을 내보내지 않고 태스크 단계를 한 단계 줄여준다.)

✔️ 느낀점

 '복잡함'은 문제해결의 대상으로 보이는데, 무조건 단순화시키면 지나치게 생략되어 내용 전달이 안 되는 경우가 있습니다. 아마, 이유가 있는 복잡함이었기 때문인 것 같습니다.

 반대로 미니멀한 서비스나 프로덕트에 좀 더 편리하게 무언가를 더 추가해서 사용자에게 친절하게 대하고 싶지만 사족이 되어 오히려 불편함을 초래할 것 같기도 합니다.

 이때, 최소기능이나(MVP), 사용자에게 반드시 전달하고 싶은 가치의 최소단위(최우선순위)를 생각해서 항상 기준점에 포커스를 맞추어야 혼란스러움이 덜할 것 같습니다.

  

 무엇보다, 프로덕트를 통해 내가 생각한 해결책을 사용자에게 강요하거나, 사용자의 자율성을 해치지는 않았는지 경계해야 할 필요가 있는 것 같습니다. 

  프로덕트의 목표는 사용자에게 긍정적인 경험과 도움을 주고 서비스의 가치를 전달하는 것이지만, 

당연하게도 프로덕트가 사용자의 모든 문제를 해결할 수는 없다는 점이 자연스럽다는 것을 인정하고 상기해야 할 것 같아요.

 사용자를 관찰하고 직접 물어보아서 가장 긴급하거나 가장 도와주고 싶은 부분, 혹은 가장 효과적으로 도와줄 수 있는 부분을 하나라도 해결해 주는 프로덕트를 만들 수 있다면, 그것이 성공적이고 좋은 프로덕트가 아닐까 합니다.