UX Planet에 게재된 Nick Babich의 글 Buttonsin UI Design: The Evolution of Style and Best Practices 소개하고자 합니다.
버튼은 우리가 매일 사용하는 상호작용 디자인의 기본 요소입니다. 겉보기에는 매우 간단한 UI 요소처럼 보이지만, 버튼 디자인은 지난 수십 년 동안 크게 변화해왔습니다. 그럼에도 불구하고 버튼의 UX 디자인은 여전히 인식과 명확성이 중요한 주제입니다.
이 글에서는 버튼 디자인의 발전 과정을 살펴보고, 효과적인 버튼을 만들기 위한 핵심 모범 사례를 소개하겠습니다
스타일의 진화
1) 3차원 버튼
초기 운영 체제의 버튼은 주변과 구별하기 위해 입체감과 그림자를 사용했습니다. 이 디자인 방식은 간단한 원칙에 기반하고 있습니다. 즉, 테두리, 그라데이션 등 활용하면 버튼이 배경과 콘텐츠에서 돋보여 클릭할 수 있는 요소로 쉽게 인식될 수 있습니다.
버튼이 튀어나와 보입니다
Windows 95에 대화 상자는 강한 그림자와 하이라이트를 활용해 3D 효과를 만들었습니다. 이는 사용자가 시각적 계층 구조를 이해하고 어떤 요소가 클릭할 수 있는지를 쉽게 파악하도록 돕기 위해 사용되었습니다.
버튼이 튀어나와 있어서 누를 수 있을 것 같은 인상을 갖게 합니다
2) 스큐어모픽 버튼
디지털 디자인에서 스큐어모픽은 UI 요소가 실제 물체처럼 보이게 만드는 것을 말합니다. 이는 실제 질감을 그대로 재현하거나 버튼을 실제 버튼처럼 디자인하는 방식입니다. 스큐어모픽 디자인은 사용자가 새로운 인터페이스를 이해하는 데 도움을 주기 위해, 이미 알고 있는 객체의 지식을 활용할 수 있도록 합니다. 아래의 계산기 예시는 사용자가 물리적 계산기에 대한 지식을 디지털 환경으로 쉽게 옮길 수 있도록 돕기 위해 만들어졌습니다.
이미지 출처: theultralinx
3) 플랫 디자인 버튼
최근 UI 디자인에서 큰 변화 중 하나는 스큐어모픽 요소에서 3D 효과가 없는 평면적인 요소로의 전환입니다. 스큐어모픽 디자인이 물리적 세계의 모습을 재현하려는 반면, 플랫 디자인은 디지털 매체를 탐구하는 방법으로 인식됩니다. 이로 인해 사용자가 클릭 가능성이나 터치 가능성을 이해하는 데 전통적으로 사용되던 복잡한 시각적 신호가 사라졌습니다.
일반 버튼과 플랫 버튼
애플 iOS의 계산기 앱
모든 것이 평면적으로 디자인되었을 때, 사용자는 어떤 요소가 버튼인지 어떻게 알까요?
사용자는 페이지에서 클릭하거나 터치할 수 있는 위치를 파악하기 위해 시각적 신호(시그니 파이어)가 필요합니다. 이러한 신호는 사용자가 인터페이스를 이해하는 데 도움을 줍니다. 그래서 플랫 디자인에서는 색상이 특히 중요합니다. 플랫 버튼에서 색상이 사용자가 버튼을 인식하는 데 중요한 역할을 하기 때문입니다.
4) 플랫에 가까운 디자인(almost flat design)과 플로팅 액션 버튼(floatingaction button)
플랫에 가까운 디자인은 플랫 디자인에서 발전한 형태로, 대부분 평면적이지만 약간의 그림자와 하이라이트, 레이어를 통해 UI에 깊이를 제공합니다. 구글의 머티리얼 디자인에서는 이런 플랫에 가까운 디자인과 함께 플로팅 액션 버튼이 등장합니다. 플로팅 액션 버튼은 화면에서 주요 사용자 행동에 주목하게 만드는 역할을 합니다.
구글 맵은 플로팅 액션 버튼 활용의 좋은 예입니다. 지도에서 사용자가 가장 자주 사용하는 ‘길 찾기’ 기능을 플로팅 액션 버튼으로 디자인하여 쉽게 접근할 수 있도록 했습니다.
또 다른 좋은 사례로 에버노트를 들 수 있습니다. 에버노트는 주로 플랫 디자인을 사용하지만, 상단 내비게이션 바에 미세한 그림자 효과를 추가했습니다. 또한, + 버튼을 플로팅 액션 버튼으로 디자인하여 사용자에게 더 눈에 띄게 만들었습니다.
5) 고스트 버튼
2014년, UI 디자인 분야에서 가장 유행했던 트렌드는 고스트 버튼이었습니다. 고스트 버튼은 기본적인 버튼 형태를 가지고 있지만, 배경이 투명하고 매우 얇은 테두리를 가진 버튼입니다.
노멀 상태(좌)와 포커스 상태(우)
고스트 버튼은 플랫 디자인에서 등장한 요소로, 애플이 iOS 7을 출시하면서 이 트렌드가 시작되었습니다.
Name’과 ‘ReleaseDate’ 과 ‘Featured’버튼이 유사 고스트 버튼이고, ‘GET’ 버튼이 고스트 버튼입니다.
고스트 버튼은 주로 행동 유도 버튼(Call to Action Button)과 함께 많이 사용됩니다. 이 버튼은 투명한 배경과 얇은 테두리로 디자인되어 있어 다른 버튼보다 덜 눈에 띌 수 있습니다. 그래서 고스트 버튼을 사용할 때는 주목성을 잘 고려해야 합니다. CTA 버튼으로서 효과를 극대화하려면 디자인 요소와 위치에 신중하게 접근해야 합니다.
Specular는 ‘Purchase Now’라는 주요 버튼을 플랫 버튼으로 만들고, ‘Take Tour’라는 부차적인 버튼을 고스트 버튼으로 사용하고 있습니다
버튼 디자인 모범 사례
버튼을 디자인하기 전에 어포던스(affordance)를 고려하는 것이 중요합니다. 즉, 사용자가 어떻게 특정 요소를 버튼으로 인식하는지를 이해해야 한다는 것입니다. 사람들은 버튼을 인식할 때 주로 네 가지 요소. 1) 모양, 2) 사이즈와 간격, 3) 레이블, 4) 색상을 바탕으로 판단합니다.
따라서 버튼은 버튼처럼 보여야 하고(모양), 사용자가 쉽게 상호작용할 수 있도록 크기와 간격을 적절히 조정해야 하며(사이즈와 간격), 버튼이 어떤 기능을 하는지 알 수 있도록 레이블을 달아야 합니다(레이블). 마지막으로, 사용자에게 행동을 유도하기 위해 대비되는 색상을 사용하는 것이 중요합니다(색상).
또한, 인터페이스 전반에서 일관성을 유지해야 각 페이지에서 사용자가 UI 요소를 버튼으로 쉽게 인식할 수 있습니다.
1) 모양
버튼의 모양은 사각형이나 모서리가 둥근 사각형으로 디자인하는 것이 안전합니다. 사각형 버튼은 오랫동안 디지털 환경에서 사용되어 왔기 때문에 사용자에게 익숙합니다. 연구에 따르면, 모서리가 둥근 사각형 버튼을 사용하면 정보 처리 능력이 향상되고 버튼 중심으로 시선이 더 잘 끌리게 합니다.
모서리가 둥근 사각형 버튼
동그라미나 세모와 같은 다른 모양도 버튼으로 사용할 수 있지만, 이 경우 사용자가 버튼으로 인식하지 못할 위험이 있으므로 주의해야 합니다.
모서리가 둥근 버튼은 시각적으로 더 편안합니다. 출처: UX 디자인 에이전시 Ramotion
2) 사이즈 및 간격
사이즈: MIT 터치 랩의 연구 결과를 바탕으로 적절한 버튼 크기를 정할 수 있습니다. MIT 연구에 따르면, 터치 타깃은 최소한 10mm x 10mm 크기로 만드는 것이 좋습니다.
물론, 이렇게 한다고 해서 오류를 완전히 없앨 수는 없지만, 현실적인 수준에서 오류를 최소화하는 데 도움이 됩니다.
간격: 버튼 사이의 간격은 각 버튼을 서로 분리해 주며, 사용자 인터페이스에 여유 공간을 만들어 줍니다.
머티리얼 디자인 다이얼로그에 나오는 플랫버튼 사이의 간격
3) 레이블
버튼에 적합한 레이블을 선택할 때는 사용자가 놀라거나 당황할 수 있는 요소가 포함되지 않도록 해야 합니다. 이를 위해 '놀람 최소화 원칙(principle of least astonishment)'에 따라 레이블을 정해야 합니다. 무엇보다도 버튼을 눌렀을 때 어떤 일이 일어나는지를 명확하게 전달하는 레이블을 사용하는 것이 중요합니다. 예를 들어, 아래의 드롭박스 사례에서 'Awesome!' 버튼은 일반 사용자가 이해하기 어려운 좋지 않은 사례입니다.
4) 색상
색상 팔레트를 선택할 때는 사용자가 해당 행동을 이해하고 쉽게 찾을 수 있도록 도와주는지를 고려해야 합니다.
앱의 내용을 잘 해석하고, 사용자가 액션을 이해할 수 있도록 적절한 색상을 선택하는 것이 중요합니다.
Uninstall(제거) 버튼에 강력한 색으로 대비를 주었습니다
가장 중요한 버튼, 특히 사용자의 행동을 유도하는 버튼은 눈에 잘 띄게 디자인해야 합니다.
아마존은 행동 유도 버튼인 ‘Add to Cart(장바구니에 담기)’ 버튼에 대비되는 색상을 사용했습니다.
결론
모든 버튼(전통적인 버튼, 고스트 버튼, 플로팅 액션 버튼 등)은 사용자가 원하는 행동을 하도록 유도하는 역할을 합니다. 웹이나 앱은 바쁜 사용자가 시작한 대화라고 볼 수 있습니다. 버튼은 이 대화에서 매우 중요한 역할을 합니다. 원활한 상호작용은 대화를 계속 이어가게 하지만, 버튼을 찾지 못하는 등의 오류는 방해가 될 수 있고, 최악의 경우 대화가 끊길 수 있습니다.
UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️
PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙
본 강의는UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!
UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.
이런걸 배워요
UX 디자인 원칙 가이드 정립
컴포넌트 UX 원칙
UX 문제 정의 / UX 분석 노하우
자사 제품 분석 / 경쟁사 제품 분석 노하우
[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항
플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)
[챌린지] UX 디자인 가이드라인 프로그램 소개
폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.
총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥 (1주차 Live 수업: 3시간) (2주차 Live 수업: 3시간) (3주차 Live 수업: 3시간) (4주차 Live 수업: 3시간) 매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.
개인 사정으로 인해 Live 수업 미참석를 위해 강의 종료 후 24시간 이내 녹화본 제공합니다.
수업 당일 라이브클래스에 강의 자료 PDF 제공합니다.
수강 정원: 선착순 10명입니다.
수강료 : 98,000원
VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다
[챌린지 혜택 !!!!]
챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다. (예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원)
[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다] 챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 챌린지 2. 사용성 테스트 (10월 오픈 예정) 챌린지 3. UX 리서치 (11월 오픈 예정) 챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정)
[챌린지 > 성공 기준]
아래 3가지 조건, 모두 충족되어야 합니다
1. VOD(총 209개) 80% 이상 수강
2. Live 수업 총 4회 중 3회 이상 출석 (사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정)
3. 총 4회 Live 수업 중 1회 이상 질문하신 분 (VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)
[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.
플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.
플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과
1) 기본 이해도 향상 VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.
2) 질문 준비 VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.
3) 시간 활용의 효율성 VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.
4) 개별 학습 속도 조절 수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.
5) 집중력 향상 미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.
6) 상호작용의 질 향상 미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.
이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?
댓글
의견을 남겨주세요