Designing Confirmation
UX 디자인 배우기 #76
Today UX 아티클
MediumUXdesign.cc에 게재된 Andrew Coyle의 글 Designing Confirmation을 원저자의 허락을 받아 번역한 글입니다.
확인창 디자인 패턴은 가볍게 여길만 한 것이 아닙니다. 확인창 디자인 패턴을 잘못 적용하게 되거나, 혹은 전혀 적용하지 않게 되면, 유저는 의도치 않은 큰 혼란을 겪게 될 것입니다. 이번 글에서는 효과적인 확인 창을 디자인하는 가이드라인과 모범 사례를 나눠보고자 합니다.
확인창에서는 유저에게 요청한 액션을 계속 진행하고 싶은지 혹은 취소하고 싶은지 확인을 요청합니다. 확인창은 포토앨범 삭제와 같은 파괴적 액션이나 포스팅 올리기 같은 중대한 액션을 할 때 보통 사용됩니다.
Medium은 포스팅을 올릴 것인지 유저에게 확인하기 위해 툴팁을 보여줍니다.확인창이 항상 필요한 건 아니며, 있으면 오히려 실수가 늘어날 수 있습니다. 모든 액션마다 확인창으로 물어보게 되면, 유저는 무시하게 될 것입니다. 확인창은 쉽게 취소할 수 있거나 중대하지 않은 액션에 사용하면 안 됩니다.
모범사례
1. 헤더(header)에 액션을 질문형으로 보여줍니다.
2. 본문에 액션의 결과를 설명합니다.
3. 확인 버튼에서 액션을 다시 한 번 언급해줍니다.
피하기
1. “정말 하시겠습니까?” 같은 모호한 질문
2. 설명이 빈약한 본문 카피
3. 예/아니오로 만든 액션 버튼
4. “취소” 버튼 역시 혼란을 일으킬 수 있습니다. 변경 사항을 삭제하는 것과 같은 파괴적 액션을 할 때, 유저는 아마 “취소”를 확인 다이얼로그를 취소하는 것이 아니라 하려고 했던 액션을 “취소”하는 것이라고 잘못 이해할 수 있습니다.
유저에게 계속 진행하게 되면 발생할 결과를 명확히 알려주기 위해 여러 인터랙션을 확인창에 넣을 수도 있습니다. 예를 들면, 발생할 일을 나타내는 박스에 체크하기, 비밀번호 입력하기 등과 같은 인터랙션을 넣는 것입니다.
Invision의 확인 모달을 보면, 유저가 프로토타입을 삭제했을 때 발생할 수 있는 일을 보여주는 박스에 체크할 것을 요구합니다.확인창은 인라인, 모달, 툴팁 등 다양한 방법으로 보여줄 수 있습니다. 아래의 스케치 파일을 다운로드하여서 다음 프로젝트에 활용해보세요.
다이얼로그는 모달, 툴팁, 인라인 디자인 등의 형식으로 만든 확인창. Download Sketch File확인 액션의 미래
2014년, 저는 더 나은 버튼 만들기에 대한 글을 썼었습니다. 당시 “플랫 디자인” 트렌드에 응하는 글이었죠. 버튼은 덜 버튼처럼 보이고 있었기 때문에, 저는 유저가 의도치 않게 해가 되는 행동을 하게 될 수도 있다는 걱정을 했습니다. 그래서 클릭이나 탭보다는 더 많은 주의를 기울여야 하는 인터랙션을 요구하는 버튼을 만든다는 아이디어를 내놓았던 것입니다.
이제 저희는 2017년도를 눈앞에 두고 있습니다. 가상현실, 증강현실, 웨어러블, 제스처/보이스 기반 인터페이스 등이 주류가 되어가고 있습니다. 인터랙션의 맥락과 솜씨가 매우 다른 미래로 옮겨가고 있는 것이죠. 이러한 변화가 액션을 취하게 하는 것에 대해 우리가 생각하는 방식을 바꾸게 될까요?
여러분은 확인하는 방식이 바뀔 것이라고 생각하시나요?
이 글의 원 저자, Andrew Coyle은 Twitter 또는 Dribbble에서 만나볼 수 있습니다.
라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)
178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!!
