상호작용 설계의 기본

 

기획을 배우면서 "상호작용 설계"라는 말을 자주 접하는데, 처음에는 무슨 뜻인지 막연했습니다.
화면을 예쁘게 그리는 일과는 다른 것 같고, 그렇다고 개발 이야기도 아니었어요.
책을 읽고 선배들의 설명을 들으며 제 나름대로 정리한 기본 개념을 적어 봅니다.
아직 초보의 정리라는 점은 감안해 주세요.

 

제가 이해한 상호작용 설계는 사용자와 시스템이 주고받는 대화를 설계하는 일입니다.
사용자가 무엇인가를 하면 시스템이 응답하고, 그 응답을 보고 사용자가 다시 무엇인가를 하는 순환이에요.

대화라고 생각하면 좋은 점이 있습니다.
말을 걸었는데 상대가 아무 반응이 없으면 불안하고, 엉뚱한 대답이 돌아오면 당황하게 되잖아요.
화면도 마찬가지로 사용자의 행동에 알맞은 반응이 돌아와야 안심하고 다음 단계로 갑니다.

 

대화에는 목적이 있듯, 사용자가 화면을 여는 데에도 목표가 있습니다.
예를 들어 쇼핑몰이라면 "원하는 신발을 찾아서 사고 싶다"가 목표입니다.
이 목표를 먼저 한 문장으로 적어 두면, 화면에 올릴 요소를 고르기가 쉬워져요.

가정 예시를 하나 들어 볼게요.
영화 예매 화면의 목표가 "보고 싶은 영화를 원하는 시간에 예매한다"라고 해 봅니다.
그러면 영화 선택, 시간 선택, 좌석 선택, 결제가 중심 요소가 되고, 이벤트 배너나 관련 기사는 보조로 밀려납니다.
목표를 적어 두지 않으면 배너가 점점 커져서 정작 예매 버튼이 묻히는 일이 생기기 쉬워요.

목표와 관계없는 요소가 화면에 많아질수록 사용자는 길을 잃습니다.
제가 쓰는 방법은 화면의 요소를 하나씩 보면서 "이것이 목표에 도움이 되는가"를 묻는 것입니다.
도움이 되지 않는다면 줄이거나 뒤로 보내는 후보가 됩니다.

 

하나의 화면도 시점에 따라 여러 상태를 가집니다.
저는 아래처럼 나누어 보고 있어요.

• 초기 상태: 막 들어왔을 때 보이는 모습
• 입력 중 상태: 사용자가 무언가를 하는 중의 모습
• 처리 중 상태: 시스템이 일하는 동안의 모습
• 완료 상태: 일이 끝났을 때의 모습
• 오류 상태: 문제가 생겼을 때의 모습

가정 예시로 검색 화면을 보면 이렇습니다.
처음에는 검색창과 추천 검색어가 보입니다.
글자를 입력하면 자동완성 목록이 나타나고, 검색을 누르면 결과를 불러오는 동안 잠시 기다림 표시가 보입니다.
결과가 나오면 목록이 보이고, 결과가 없으면 "찾는 결과가 없습니다"와 함께 다른 검색어를 제안합니다.

이렇게 상태별로 그려 보면 기획서에 빠져 있던 장면이 드러납니다.
특히 결과가 없는 경우는 처음에 놓치기 쉬운 상태였어요.

상태를 나누어 보면 상태와 상태 사이의 이동도 보입니다.
검색 화면에서 입력 중 상태가 처리 중 상태로 넘어가는 순간은 사용자가 검색 버튼을 눌렀을 때이고, 처리 중 상태가 오류 상태로 넘어가는 순간은 서버가 응답하지 않을 때입니다.
이 이동 조건을 적어 두면 개발자가 어떤 신호에 화면이 바뀌어야 하는지 정확히 알 수 있어요.
그림 한 장보다 "언제 어떤 상태로 바뀌는가"를 적은 표가 더 쓸모 있을 때도 있습니다.

 

피드백이란 사용자의 행동에 대한 시스템의 응답입니다.
버튼을 누르면 눌린 모양이 바뀌거나, 저장이 끝나면 저장되었다는 문구가 보이는 것처럼요.

좋은 피드백의 조건은 세 가지로 정리했습니다.

• 빠를 것: 행동 직후에 바로 보일 것
• 분명할 것: 무슨 일이 일어났는지 알 수 있을 것
• 적당할 것: 중요하지 않은 일에 요란하게 반응하지 않을 것

마지막 조건이 의외로 중요합니다.
사소한 동작마다 팝업이 뜨면 사용자는 정말 중요한 경고도 무심코 넘기게 됩니다.

가정 예시로 장바구니에 상품을 담는 장면을 보겠습니다.
담는 순간 화면 위에 "장바구니에 담았습니다"라는 안내가 잠깐 보였다 사라지고, 장바구니 아이콘의 숫자가 하나 늘어납니다.
이 정도면 충분히 분명하면서 흐름을 막지도 않아요.
반대로 담을 때마다 확인 버튼을 눌러야 하는 창이 뜨면, 여러 개를 담고 싶은 사용자는 금방 지치게 됩니다.

 

같은 기능은 같은 모양과 같은 위치에서 같은 방식으로 동작해야 합니다.
어떤 화면에서는 저장 버튼이 오른쪽 위에 있고 다른 화면에서는 아래에 있으면, 사용자는 매번 새로 찾아야 해요.

그래서 기획할 때 이미 만든 다른 화면과 비교해 보는 습관을 들이려고 합니다.
비슷한 상황에는 비슷한 방식으로 답하는 것이 사용자에게는 가장 편한 대화입니다.

일관성은 이름과 문구에도 적용됩니다.
같은 동작을 어떤 곳에서는 "삭제", 다른 곳에서는 "지우기"라고 부르면 사용자는 둘이 다른 기능인지 의심하게 돼요.
기획서에 쓰는 문구를 한 곳에 모아 두고, 화면마다 같은 표현을 쓰는지 마지막에 한 번 훑어보려고 합니다.

 

상호작용 설계는 사용자의 목표를 알고, 상태를 나누어 보고, 알맞은 피드백을 주는 세 가지로 요약해 볼 수 있을 것 같아요.
화면을 그리기 전에 이 대화를 먼저 글로 써 보면 방향이 잡힌다고 느낍니다.

아직 잘 모르겠는 것은 사용자가 예상과 다르게 행동할 때의 대처입니다.
설계할 때는 정상적인 흐름을 따라가지만, 실제 사람은 엉뚱한 순서로 누르기도 하니까요.
그런 경우를 어디까지 미리 상상해 둘 수 있는지, 앞으로 실제 사용 장면을 관찰하며 배워 보겠습니다.