✔ 좋은 버튼 디자인을 위해 알아야 하는 모든 것

안녕하세요, 레오입니다. 운영 중인 UX 스터디에 참여 중인 멤버분이 좋은 아티클 공유해주셔서 내용을 정리해두었습니다. 공유드립니다 :) https://weeklyuxuichallenge.tistory.com/16 📚 목차 1. intro : 버튼? 2. Clear. 버튼을 직관적으로 만들기 3. Findable 버튼을 찾기 쉽게 만들기 4. identifiable 버튼을 구분할 수 있게 5. Text 버튼 문구 6. 버튼 아이콘 7. Hierarchy 위계 / 계층 설계 8. Good Hierarchy를 만드는 방법들 (강조, 배치, 사이즈 조정 등을 통해..) 💬 intro - 버튼? - 많은 기업들이 버튼 클릭수 /클릭율을 중요한 지표로 봄 - 버튼의 동작방식/결과물을 직관적으로 알 수 있어야 함. - 버튼은 사용자가 제품을 조작해 목표를 달성할 수 있도록 돕는다. - 사용자는 버튼을 통해 인터페이스를 탐색 / 조작 혹은 둘 다 할 수 있게 된다. ✅ Clear 버튼을 직관적으로 만들기 - 버튼의 역할을 분명히 알 수 있게 만들어야 한다. - 텍스트를 통해서는 버튼을 눌렀을 때 결과를 분명히 설명해야 한다. - 또한 때로는 버튼에 들어가야 할 메시지가 많아서 텍스트와 아이콘이 의미가 다를 때가 있다. ✅ Findable 버튼을 찾기 쉽게 - 액션들은 사용자가 찾을 수 있을거라고 기대하는 공간에 위치해있어야 한다. - Main 액션은 잘 보이고 상단에 위치해있어야 한다. - Navigation 액션은 적당히 강조될 수는 있으나 가독성은 확보되어야 한다. - 메인 경로에 영향을 미치지 않는 ‘삭제’와 같은 가장 덜 중요한 액션정도만 팝오버 아래에 숨겨져도 괜찮다. ✅ identifiable 버튼을 구분할 수 있게 - 사용자는 클릭 가능한 영역 / 불가능한 영역을 쉽게 구분할 수 있어야 한다. - Wix의 경우 주요 액션에 파란색을 사용한다. - 색칠된 배경에 있는 버튼의 경우 파란색이 눈에 띄지 않을 수 있다. 그 경우 텍스트, 대비, 모양 (및줄 등) 이 버튼을 식별가능하게 만들어줄 수 있다. ✅ Text 버튼 문구 - 텍스트는 버튼을 설명하는데 핵심적인 역할임. - 명확하고, 예측가능하고, 간단해야 한다. - 행동을 유도하는 동사를 쓰는 것도 좋다. (단, 눌렀을 때 결과물을 예측할 수 있는 단어여야 한다.) ✅ Icon 아이콘 - 아이콘은 맥락을 파악하는데 도움이 된다. - 하지만 종종 잘못 해석되기 때문에 주의해서 써야 한다. - 마우스 호버 시 툴팁으로 안내를 해주는 것도 좋다. ✅ Hierarchy 위계 / 계층 설계 - 모든 버튼이 찾기 쉬워야 하고, 주의를 많이 끌어야 하는 것이 아니다. 중요도에 따라 잘 보이도록 계층을 잡자. - 좋은 Hierarchy란 “모든 액션이, 각각 필요할 때 쉽게 찾을 수 있도록 배치되어 있는 것.” 📌 Hierarchy를 잘 형성하기 위한 방법들 - Emphasis. 핵심 버튼 (페이지 당 1개가 적절)을 잘 보이도록 강조해라. 모든 버튼이 같은 수준으로 강조될 필요가 없다. - Placement. 가장 중요한 버튼은 잘 보이는곳에 있어야 한다. Wix의 경우 페이지 우측 상단. - 마지막에 본 것을 잘 기억하기 떄문에 왼쪽부터 읽는 것을 고려해서 오른쪽에 중요한 버튼을 배치하면 기억되기 쉽다. - Size. 버튼에는 다양한 사이즈가 있다. 사이즈가 크고 여백이 많은 버튼도 있고, 작고 여백이 적은 버튼도 있다.