[2편] 그러나 때로는 링크가 버튼처럼 보입니다 (버튼은 링크처럼 보입니다) - But sometimes links look like buttons (and buttons look like links)

이 글은 번역 글입니다.
원본 링크 -But sometimes links look like buttons (and buttons look like links)- 입니다.
presentation
가끔 우리는 링크를 버튼처럼 보이게 만듭니다. 가끔 우리는 버튼을 링크처럼 보이게 만듭니다. 불행한 일입니다. 아마도 우리가 이것에 대해 할 수 있는 일이 있을 것입니다. 버튼/링크의 4가지 유형에 대해 이야기해 봅시다.

1. Submit buttons 제출 버튼

로그인하거나, 등록하거나, 바구니에 추가할 때 양식(form)을 사용합니다. 이러한 버튼은 제출 버튼(submit buttons)입니다.
presentation
'Sign in'은 제출 버튼(submit button)입니다.

1. Links 링크

링크를 사용하여 페이지 내의 페이지 또는 위치로 이동할 수 있습니다. 어느 쪽이든, 그들은 눈에 띄기 위해 밑줄이 그어져 있습니다. 아니면 그들은 인지를 돕기 위한 머리글과 같은 특별한 장소에 살고 있을지도 모릅니다.
presentation
링크는 밑줄로 표시되어 두드러집니다.

3. Buttons 버튼

유형이 버튼 (type = "button")인 버튼은 제출 버튼(submit buttons)이 아닙니다. 버튼은 자바 스크립트에 의존하는 기능을 만드는 데 사용됩니다. 메뉴를 열거나 날짜 선택 도구(date picker)를 표시하는 등의 작업을 수행합니다.
presentation
사람 아이콘이 계정 메뉴(account menu)를 나타냅니다.

4. Call to action buttons 클릭 유도 문안 버튼 [CTA]

클릭 유도 문안 버튼(Call to action buttons)은 인터페이스에서 눈에 띄게 하기 위해 버튼처럼 보이는 경우가 많습니다. 전용 요소가 없습니다. 그것들은 사용자에게 행동을 요구하는 스타일이 적용된 보통 링크일 뿐입니다.
presentation
"Checkout"은 사용자에게 행동을 유도하는 스타일이 적용된 링크입니다.

무엇이 문제입니까?

"탄력 있는 웹 디자인"에서 Jeremy Keith(Resilient Web Design Jeremy Keith)는 재료의 정직에 대한 아이디어를 논의합니다. 그는 "하나의 재료를 다른 재료의 대체 재료로 사용해서는 안되며, 그렇지 않으면 최종 결과는 기만적이다"고 말합니다.
버튼처럼 보이는 링크를 만드는 것은 상당히 부정직한 행위입니다. 사용자에게 링크와 버튼이 동일하지 않다고 알려 줍니다.
"디자인 시스템의 버튼"에서 Nathan Curtis(Buttons In Design Systems Nathan Curtis)는 버튼 동작을 통해 단순한 앵커 태그에 대한 명확한 고려 사항을 모두 파악할 수 있기 때문에 버튼과 링크를 구분해야 한다고 말합니다.
예를 들어, 새 탭에서 링크를 열거나, 주소를 복사하거나, 나중에 즐겨찾기에 추가할 수 있습니다. 이 모든 것들을 버튼으로는 할 수 없습니다.
클릭 유도 문안 버튼(Call to action buttons) - 다시 말하지만, 링크일 뿐 - 은 기만적입니다. 이러한 스타일링이 그들의 자연스러운 편안함을 제거하고 그들의 행동을 방해하기 때문에 사용자들은 행복하게 인식하지 못합니다.
클릭 유도 문안 버튼을 일반 링크처럼 보이게 할 수 있습니다. 하지만 이것은 그들을 눈에 띄지 않게 하는 약한 인상을 줍니다. 그러므로 문제입니다.
때로는 버튼 옆에 같은 메뉴의 일부로 링크를 표시하는 것이 좋습니다. 이전에 표시된 Kidly의 계정 메뉴 버튼*은 바구니 링크 옆에 있습니다. 둘 다 iconography 같은 방식으로 되어 있기 때문에 당신은 그것을 알지 못할 것입니다.
다음은 동일한 문제를 보여 주는 또 다른 예입니다 :
presentation
"Previous day"와 "Next day"은 링크입니다. "Choose day"는 링크 형식의 버튼입니다.
'Choose day'가 실제로 버튼인데도 메뉴의 세 항목 모두 링크처럼 보이도록 스타일이 지정되었습니다.
'Choose day'를 클릭하면 달력이 열리지 만, 'Previous day'와 'Next day'와 같은 다른 페이지로 이동하게 됩니다. 그리고 다른 링크와 마찬가지로 새 탭에서 마우스 오른쪽 버튼을 클릭하여 열 수 있는 것처럼 보입니다.
어쩌면 새로운 페이지에서 열어야 하고 그것이 문제를 해결할 수 있을까요? 어쩌면 그것은 원하는 경험이 아닐까요? 어쨌든 우리는 일관성이 좋은 것이 디자인의 품질을 높이기 때문에 이러한 항목의 스타일을 동일하게 지정했습니다.
그러나 이 경우에 우리는 너무 일관성을 취했습니다. 우리는 차이점들을 지워 버리고, 행동 유도성(affordance)을 제거하고 부정직 한 인터페이스를 만들었습니다. 일관성은 다른 것들을 동일하게 만드는 것이 아닙니다. 그것은 같은 것을 똑같이 만드는 것입니다.

클릭 유도 문안 버튼(call to action buttons)을 어떻게 구분할 수 있습니까?

지금까지 고개를 끄덕였다면 클릭 유도 문안(Call to action)이 두드러질 필요가 있음에 동의할 것입니다. 그러나 이것은 링크의 행동을 유도하기 위해 버튼과 다르게 보일 필요가 있습니다.
한 예로 Government Digital Service’s의 'start buttons'이 있습니다.
presentation
"Start now"는 사용자에게 행동을 유도하는 스타일의 링크입니다.
시작 버튼이 눈에 띕니다. 또한 GDS의 표준 제출 버튼과 다르게 보입니다. 시작 버튼은 약간 더 크고 화살표가 있습니다. 화살표는 사용자가 새로운 흐름으로 넘어갈 것임을 나타냅니다.
차이점이 있지만, 미묘한 차이로 사용자에게 도움이 되지 않을 수 있습니다. 먼저 제출 버튼에는 손 모양 커서가 없어야 합니다(submit buttons shouldn’t have a hand cursor). 이렇게 할 때, 손(또는 포인터)은 포인팅 장치를 가진 사람들이 링크의 합리성을 촉진하도록 돕습니다.
둘째로, 우리는 버튼 사용을 줄이고 링크를 더 사용해야 합니다. 이렇게 하기 위해 우리는 공백, 크기 및 기타 다른 시각적 처리를 조합하여 눈에 띄도록 할 수 있습니다. 오른쪽 커서를 사용하는 것처럼 밑줄이 도움이 될 것입니다.
또한 도움이 될 수 있는 것은 페이지에 다른 것들이 가득 차 있지 않다는 것입니다. 물건이 많을수록 주의력을 높이기 위해 싸우며 행동 유도(Call to action)의 중요성을 감소시킵니다.
어쨌든 하나의 기본 링크 / 동작 / 버튼만 있는 것이 좋습니다. 물론 이것이 항상 가능한 것은 아니지만, 심지어는 옳은 일이기도 하지만, 우리는 접근 방식을 사례별로 검토할 수 있습니다.

동일한 메뉴의 일부인 버튼과 링크를 어떻게 구별할 수 있을까요?

여기서 문제는 행동 유도성(affordance)을 제거하지 않고 항목에 균등하게 가중되도록 하는 것입니다. 버튼이 자연스럽게 링크를 지배합니다!
Kidly의 메뉴는 iconography 사용으로 인해 일관되고 똑같이 가중치가 있습니다. 그러나 이렇게 할 때 (미묘하거나 다르게) 의미는 상실됩니다.
스케줄 페이지에서 'Choose day'은 'Previous day'또는'Next day'보다 중요하지 않습니다. 어쩌면 우리는 링크를 너무 압도 하지 않고도 'Choose day'를 더 적은 링크와 더 많은 버튼을 보이게 해야 할지도 모르겠습니다.
그들을 같은 장소에 배치하는 것은 쉬운 일이 아닙니다. 아마 우리는 공백과 구분을 사용할 수 있을 것입니다. 어쩌면 우리는 더 작은 버튼이 필요할 것입니다. 우리가 절대로 하지 말아야 할 한 가지는 버튼에 밑줄을 치는 것입니다. 이것은 기만적일 것입니다.

사용자가 관심을 가지고 있습니까? 그들이 신경을 쓸까요?

링크를 "링크 버튼"처럼 보이게 만들었고 버튼을 링크처럼 만들었습니다. 포인터 커서를 잘못 사용하여 문제를 악화시켰기 때문에 사용자가 누적되었고 구분이 모호해졌습니다.
아마도 사용자가 새로운 창에서 클릭 유도 문안(Call to action)을 열 수 있다는 것을 알고 있다면 그렇게 할 수 있습니까? 저는 확실히 했습니다. 그러나 다른 사람들은 그렇지 않을 수도 있습니다. 하지만 그게 중요합니까? 선택은 포괄적인 디자인의 행위입니다.(Choice is an act of inclusive design)
라벨도 마찬가지입니다. 많은 사이트에서 레이블을 라디오 버튼에 연결하지 않습니다. 이 사람들은 레이블을 클릭하면 (종종 더 쉬움) 라디오 버튼을 선택 표시로 신뢰하지 않습니다. 대부분의 사이트에서 올바르게 사용했다면 사용자는 이 기능을 사용하여 이점을 얻을 수 있습니다.
사용자는 디자인을 결정하고 디자인은 사용자를 결정합니다. 즉, 사이트의 대다수가 링크와 버튼을 구별하면 사용자가 아래에 있는 기능에 관심을 갖고 가치를 발견하게 됩니다.
고착되어서 우리는 이것을 작은 문제로 생각할 수 있습니다. 그러나 다른 많은 작은 문제들과 함께 경험은 두드러지게 저하될 수 있습니다. 말하자면, 1,000개의 상처로 죽을 수도 있습니다.
작은 세부 사항을 올바르게 말하는 것에 대해 이야기할 때, 이런 생각이 떠오릅니다.

이것은 목적지가 아니라 여행입니다.

다른 사람들은 이것이 회색 지대가 되었다고 말합니다. 이는 양식과 링크가 모두 사용자를 동일한 대상으로 이동시킬 수 있기 때문입니다.
사실이지만, 여행은 목적지와 다릅니다. 제 말은, 목적지가 미국일지도 모른다는 겁니다. 하지만 그 여행은 비행기 여행이나 수영으로 이루어져 있을 수도 있습니다. 비행기가 물로 가득 차야 할까요? 오, 이건 좋지 않은 비유였습니다...
여기 더 좋은 예가 있습니다. TV와 함께 제공되는 리모컨에는 전원 버튼이 있습니다. 리모컨에 있는 것은 고무 재질이고, 작고, 빨간색이며, 오른쪽 상단 모서리에 있습니다. 가까운 거리에 버튼이 추가로 많이 있습니다.
TV에 있는 것은 견고하고 훨씬 더 크고 숨겨져 있습니다. 디자인이 반대로 적용되거나 디자인이 사용될 컨텍스트를 무시하여'일관성'을 유지하는 경우에는 이상한 경험이 될 수 있습니다.
양식(Forms)과 링크로 인해 사용자가 같은 장소로 이동할 수 있습니다. 하지만 목적지가 같아도 여행(상호 작용)은 다를 수 있습니다.
그것들을 동일하다고 주장하는 것과 그 과정에서 행동 유도성(affordance)을 제거하는 것은 유용할 수 없습니다. 우연한 의미도 존재하는 데에는 이유가 있는데, 왜 심미적인 미니멀리즘으로 인해 구성 요소의 의미를 왜 디자인해야 합니까?

마치며

나는 종종 실제 문제를 해결하는 방법으로 계속 작업을 합니다. 문제가 아닌 문제를 해결하기 위해 시간을 할애하면 좌절감을 느낍니다. 결국, 디자인은 문제를 해결하는 것입니다.
이것은 분명히 세계에서 가장 큰 문제는 아닙니다. 그러나 저는 이것이 뭔가 있다고 생각합니다. 우리가 할 수 있는 일이 있다고 생각합니다. 정직하게 만들어서 애정을 고취시키고 경험을 향상시키는 것입니다.
고착되면 이것은 큰 문제처럼 보이지 않을 수도 있지만, 다른 작은 이득과 함께 이것은 큰 차이를 만들 수 있습니다. 어떻게 생각하시나요?
*비공식적으로 말하면, Kidly의 계정 메뉴 버튼은 앵커를 잘못 사용합니다. 저는 버튼 요소를 사용해야 했습니다.
presentation
이 글은 번역 글입니다. 원본 링크입니다.

presentation

presentation
안녕하세요! Early adopter입니다.
제 번역 블로그를 자주 찾아 주셔서 감사드립니다.저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
페이스북의 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
혹시나 저랑 함께 "보버"에서 디자인 번역 공장 연재를 해주실 유저분 계시면 리뷰나, 페북 어디에서든 메시지 주세요!!! 외롭습니다
함께 작업했으면 좋겠습니다^^ 연락 간절히 기다립니다.

presentation
번역 글 추천(신청) 받습니다.
안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.