1990년대 인터넷 디자인 초창기부터 내려온 유명한 격언이 있습니다.
"버튼은 액션을 위한 것이고, 링크는 이동을 위한 것이다."
이 격언은 좋은 출발점이지만, 항상 그렇게 단순하지는 않습니다.
먼저, 버튼과 링크의 정의를 명확히 해보겠습니다.
링크(Link): 클릭 또는 터치할 수 있는 텍스트
버튼(Button): 클릭 또는 터치할 수 있는 박스형 영역
버튼은 다양한 스타일을 가질 수 있지만, 버튼의 텍스트뿐만 아니라 주변 영역도 클릭할 수 있다는 점 을 기억하는 것이 중요합니다.
올바른 요소를 선택하려면, 화면에서 이루어지는 액션의 계층 구조(action hierarchy) 를 고려해야 합니다.
1. 화면에서 사용자가 수행해야 하는 가장 중요한 작업
버튼으로 만들어야 합니다.
가장 중요한 액션은 Primary Call to Action(주요 실행 버튼) 이 되어야 하며, 한 화면에 하나만 존재 해야 합니다.
2. 보조적인 작업
버튼으로 만들 수 있지만, 너무 많은 버튼은 피해야 합니다.
3순위 이상의 작업은 링크로 처리하는 것이 좋습니다.
링크는 애플리케이션의 상태를 변경하는 데 사용하면 안 됩니다.
데이터를 추가, 변경, 삭제하는 등의 액션은 버튼으로 처리해야 합니다.
예를 들어, "삭제(Delete)" 또는 "저장(Save)" 기능은 절대 링크로 만들지 말아야 합니다.
가장 중요한 "구매(Buy)" 버튼 은 황금색, 아이콘 포함, 가장 눈에 띄게 배치
이후에 등장하는 두 개의 버튼 → 다른 색상으로 처리하여 주요 버튼보다 시각적으로 덜 강조
데스크톱 환경에서의 버튼 상태
1)기본(Default, 클릭 전)
2)호버(Hover, 마우스 오버 시)
3)클릭/선택(Clicked/Selected)
4) 비활성화(Disabled)
데스크톱 환경에서의 링크 상태
1) 기본(Default, 클릭 전)
2)호버(Hover, 마우스 오버 시)
3)방문 후(Visited)
4) 비활성화(Disabled)
모바일 환경에서의 버튼 상태
1)기본(Default)
2)터치/선택(Tapped/Selected)
3)비활성화(Disabled)
모바일 환경에서의 링크 상태
1)기본(Default)
2)방문 후(Visited)
3)비활성화(Disabled)
버튼의 스타일은 단순한 박스 형태일 수도 있고, 창의적인 디자인이 적용될 수도 있습니다.
✔ 우리가 흔히 보는 잘못된 링크 및 버튼 예시
"여기를 클릭하세요(Click Here)"
"더보기(Read More)"
"자세히 알아보기(Learn More)"
이러한 표현은 좋지 않은 이유는
1) 사용자에게 맥락을 제공하지 않음
2) 스크린 리더 사용자(시각장애인)에게 혼란을 줄 수 있음
3) SEO(Search Engine Optimization)에 부정적인 영향
✔ 좋은 버튼 예시
"장바구니에 추가(Add to Cart)"
"이메일로 데이터 보내기(Send Data via Email)" → "Send Data"보다 구체적이고 직관적
메뉴는 버튼 또는 링크를 모아 웹사이트나 앱을 탐색하는 주요 역할 을 합니다.
한 개의 버튼 + 여러 개의 링크
링크 옆에 아이콘이 배치되어 가독성 향상
⚠ 아이콘만 있는 메뉴는 사용자 이해도와 사용성을 저하시킬 수 있음
아이콘 + 텍스트 조합이 가장 효과적
아래내용은 원문을 번역 및 재가공한 내용입니다. 원문은 아래에서 확인하실 수 있습니다.