brunch

You can make anything
by writing

C.S.Lewis

by UX 컨설턴트 전민수 Jun 24. 2024

버튼 배치를 통한 사용자의 긍정적 행동 유도

UX 디자인 가이드라인 배우기 #11

버튼 배치를 통한 사용자의 긍정적 행동 유도


대화창에서 긍정적인 행동을 유도하는 버튼은 우측에, 부정적인 행동을 유도하는 버튼은 왼쪽에 배치하는 것이 효과적입니다.


대부분의 사람들이 오른손잡이이기 때문에, 오른쪽에 위치한 버튼을 누르는 것이 더 자연스럽고 편리합니다. 엄지손가락으로 오른쪽 버튼을 누르기 쉽기 때문에, 사용자는 긍정적인 행동을 유도하는 오른쪽 버튼을 더욱 잘 찾아 누르게 됩니다. 이는 사용자의 다음 과업 수행으로 이어질 수 있습니다.


사진: Unsplash의Oliur


반면, 왼쪽에 배치된 부정적인 행동 버튼은 사용자가 실수로 누르기 어려워집니다. 이처럼 버튼 배치를 통해 사용자의 긍정적인 행동을 효과적으로 유도할 수 있습니다.


예를 들어 쿠팡의 경우, 장바구니에서 상품을 삭제하고자 하는 경우 부정적 행동을 나타내는 취소 버튼은 왼쪽에, 긍정적 행동을 나타내는 확인 버튼은 오른쪽에 배치하였습니다.


쿠팡

이처럼 버튼 배치의 원칙은 사용자의 직관과 편의성을 고려하여 긍정적인 행동을 유도하는 것입니다.


감사합니다.




전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)

https://brunch.co.kr/@ebprux/1332


[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중

(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)

https://ebprux.liveklass.com/


[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중  

(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)

(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)

https://www.inflearn.com/users/196290


      

UX 컨설턴트 전민수


      (UX/PM/리서치) 라이브클래스 전민수 강사입니다. https://ebprux.liveklass.com/ UX 강의 문의: rojer70@ebpux.co.kr


구독자 1.1만


 하단 고정 영역 > 매거진 다른글 클릭" data-tiara-action-kind="ClickContent" style="-webkit-font-smoothing: antialiased; backface-visibility: hidden; font-family: "Noto Sans DemiLight", "Malgun Gothic", sans-serif; margin: 0px; padding: 0px; text-rendering: inherit; display: block; background: rgb(255, 255, 255); border-top: 1px solid rgb(238, 238, 238); bottom: 0px; height: 59px; position: fixed; width: 1215.36px; z-index: 100; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">

매거진의 이전글 시각적 무게감
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari