‘Designing the Perfect Button’ 좋은 버튼 디자인을 위해 알아야 하는 모든 것

[ ‘Designing the Perfect Button’ 좋은 버튼 디자인을 위해 알아야 하는 모든 것]
#아티클공유 By @누워있는 하마 님 - 7월 스터디 결과물

(아티클 원문 : wix -ux)

💬 intro - 버튼? 

- 많은 기업들이 버튼 클릭수 /클릭율을 중요한 지표로 봄
- 버튼의 동작방식/결과물을 직관적으로 알 수 있어야 함.
- 버튼은 사용자가 제품을 조작해 목표를 달성할 수 있도록 돕는다. 
- 사용자는 버튼을 통해 인터페이스를 탐색 / 조작 혹은 둘 다 할 수 있게 된다. 

버튼은 다양한 역할을 수행합니다.

 

 

✅ Clear 버튼을 직관적으로 만들기

- 버튼의 역할을 분명히 알 수 있게 만들어야 한다. 
- 텍스트를 통해서는 버튼을 눌렀을 때 결과를 분명히 설명해야 한다. 

버튼은 명확히 디자인 되어야 합니다.

- 또한 때로는 버튼에 들어가야 할 메시지가 많아서 텍스트와 아이콘이 의미가 다를 때가 있다.

이렇게 말이죠

✅ Findable 버튼을 찾기 쉽게

- 액션들은 사용자가 찾을 수 있을거라고 기대하는 공간에 위치해있어야 한다. 
- Main 액션 은 잘 보이고 상단에 위치해있어야 한다. 
- Navigation 액션은 적당히 강조될 수는 있으나 가독성은 확보되어야 한다. 
- 메인 경로에 영향을 미치지 않는 ‘삭제’와 같은 가장 덜 중요한 액션정도만 팝오버 아래에 숨겨져도 괜찮다. 

버튼은 발견하기 쉬워야 하고, 여기 있겠거니~ 하고 편하게 쓸 수 있어야 합니다.

 

 

✅ identifiable 버튼을 구분할 수 있게

- 사용자는 클릭 가능한 영역 / 불가능한 영역을 쉽게 구분할 수 있어야 한다. 
- Wix의 경우 주요 액션에 파란색을 사용한다. 

버튼이 텍스트 등에 묻히지 않고, 눈에 띄게 디자인해주세요.

- 색칠된 배경에 있는 버튼의 경우 파란색이 눈에 띄지 않을 수 있다. 그 경우 텍스트, 대비, 모양 (및줄 등) 이 버튼을 식별가능하게 만들어줄 수 있다. 

이렇게 색칠된 배경이 있을 때 파란색이 눈에 덜 띌 수 있습니다 .밑줄 등이 대신 역항을 수행해줄거에요.

 

✅ Text 버튼 문구

- 텍스트는 버튼을 설명하는데 핵심적인 역할임. 
- 명확하고, 예측가능하고, 간단해야 한다. 
- 행동을 유도하는 동사를 쓰는 것도 좋다. (단, 눌렀을 때 결과물을 예측할 수 있는 단어여야 한다.)

다음 동작이나 결과를 예측할 수 있는, 직관적인 문구를 사용해보세요.

✅ Icon 아이콘

- 아이콘은 맥락을 파악하는데 도움이 된다. 
- 하지만 종종 잘못 해석되기 때문에 주의해서 써야 한다.
- 마우스 호버 시 툴팁으로 안내를 해주는 것도 좋다. 

✅ Hierarchy 위계 / 계층 설계

- 모든 버튼이 찾기 쉬워야 하고, 주의를 많이 끌어야 하는 것이 아니다. 중요도에 따라 잘 보이도록 계층을 잡자. 
- 좋은 Hierarchy란 “모든 액션이, 각각 필요할 때 쉽게 찾을 수 있도록 배치되어 있는 것.” 

📌 Hierarchy를 잘 형성하기 위한 방법들
- Emphasis. 핵심 버튼 (페이지 당 1개가 적절)을 잘 보이도록 강조해라. 모든 버튼이 같은 수준으로 강조될 필요가 없다. 
- Placement. 가장 중요한 버튼은 잘 보이는곳에 있어야 한다. Wix의 경우 페이지 우측 상단. 
- 마지막에 본 것을 잘 기억하기 떄문에 왼쪽부터 읽는 것을 고려해서 오른쪽에 중요한 버튼을 배치하면 기억되기 쉽다. 
- Size. 버튼에는 다양한 사이즈가 있다. 사이즈가 크고 여백이 많은 버튼도 있고, 작고 여백이 적은 버튼도 있다.

순서대로 Emphasis,, Size의 예시.이미지. 

 

 

🎯 '위클리 UX /UI 분석 챌린지' 스터디에 초대합니다. 

* 이 글은 스터디에서 @누워있는 하마 님이 챌린지 참여를 위해 작성한 내용을 바탕으로 작성되었습니다.

* 멤버 분들은 이렇게 매주 UX/UI리뷰, 북리뷰, 아티클공유 중 원하는 방식으로 챌린지에 참여하며 함께 성장하고 있습니다. 

*기획자,디자이너,취준생 등 직군 연차 관계없이 UX UI에 관심있다면 누구나 스터디에 참여할 수 있습니다. 스터디에 합류해보세요! 

https://holix.com/ch/bVaKQMNB

🐯 위클리 UX/UI 분석 챌린지 🐯 | 홀릭스(HOLIX)