brunch

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 정윤선 Dec 21. 2016

‘확인(Confirmation)’ 디자인

베스트 사례와 미래의 확인(confirmation) 액션

확인(confirmation) 디자인은 가볍게 디자인할 수 있는 항목이 아닙니다.

잘못 만들 경우 사용자가 의도하지 않은 혼란을 일으킬 수 있습니다.

이 기사는 효과적인 확인(Confirmation) 액션을 위한 가이드 라인과 베스트 사례를 공유합니다.

확인(confirmation) 디자인은 유저에게 작업을 계속 진행해도 정말 괜찮은지를 물어보는 선택의 마지막 요소일 뿐만 아니라 ‘사진 앨범 삭제’ 또는 ‘이 기사 게시’와 같은 되돌릴 수 없는 행위에도 사용됩니다.

Medium은 기사를 게시하려는 유저의 의사를 확인하기 위한 툴팁을 제공합니다.

하지만 확인이 항상 필요한 것은 아니며 실제로 잦은 확인 요구는 사용자가 서비스를 사용할 때 실수를 증가시킬 수 있습니다.

쉽게 결과를 바꿀수 있거나 중요하지 않은 행동에 대해서는 확인을 사용해서는 안됩니다.

1. 머리말에 유저가 하려는 행동을 질문으로 물어봅니다.

2. 이 액션을 취했을 때 어떤 결과를 얻을 수 있는지 본문에 설명해 줍니다.

3. 확인 버튼에서 액션에 대해 다시 한번 서술해 줍니다.

1. "정말입니까?”같은 애매모호한 질문을 사용하는 것

2. 본문에 액션에 대한 설명을 하지 않는 것

3. 예 / 아니오로만 버튼레이블을 지정하는 것

4. "취소"는 혼동을 일으킬 수 있습니다. ‘변경사항 무시’같은 등의 되돌릴 수 없는 행동을 저지른 경우, 사용자는 ‘취소’버튼이 들어있는 알럿을 취소한게 아니라 ‘변경사항 무시’라는 항목에 대해 "취소"를 누른다고 생각하는 실수를 할 수 있습니다.

확인은 결과를 명확하게 사용자에게 알리기 위해 여러 양식이나 인터렉션을 포함할 수 있습니다.

예를들면, 의도를 정확하게 파악하기 위해서 체크박스를 사용하거나, 폴더나 파일을 보기 위해 암호를 입력해야 하기도 합니다.

Invision의 확인 모달은 사용자가 프로토타입을 삭제할 때 어떤 일이 발생 할지를 알려주는 체크박스에 체크 해야합니다.

확인UI는 정렬방식, 모달 및 툴팁을 포함한 여러 가지 방법으로 제공 될 수 있습니다.

2014년, “Flat Design”이 유행하던 시기에 대해 더 나은 버튼을 만드는 방법에 대한 기사를 썼습니다. (기사링크: https://medium.com/designed-thought/building-a-better-button-18a49d066ce5#.eqgjn7gao)

버튼은 버튼처럼 보이지 않았고, 플랫한 디자인으로 인해 사용자가 버튼 설계자의 의도와 다른 행동을 취할 것이라고 많은 사람들이 걱정했기 때문에 클릭 또는 탭보다 밀도높은 상호 작용이 필요한 버튼을 만드는 것이 요즘의 아이디어로 떠올랐습니다.

이제 우리는 2017 년을 맞이합니다. 현재는 가상 현실, 증강 현실, 웨어러블 및 제스처 / 음성 기반 인터페이스가 주류를 이루고 있습니다.

여러 굵직한 인터페이스 방식의 발전으로 인해 예전처럼 손으로 버튼을 누르는 것과는 다른, 많은 고도화 되고 편한 요소를 사용하는 큰 미래로 확인UI는 발전 할 것입니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari