모든 디자인 분야에는 항상 특정 트렌드가 있습니다. 이러한 추세 중 하나는 이제 버튼이 멋지지 않은 것으로 간주된다는 것입니다. 물리적 객체의 버튼인지 그래픽 사용자 인터페이스의 버튼인지는 중요하지 않습니다. 버튼은 새로운 것이 아닙니다. 그리고 바로 그 이유 때문에 그들은 쿨하지 않습니다. 망치나 클립처럼 그것들은 오랫동안 사용되어 왔으며 작동합니다. 사실 그들은 일을 하기 때문에 오랫동안 주변에 있었습니다 . 만약 당신이 부정직한 디자이너라면 그것은 문제입니다. 결국, 당신이 방금 바퀴를 재창조했다는 것을 고객에게 어떻게 알릴 수 있습니까? 반짝이는 새 제품에 지루하고 오래된 버튼을 사용할 수는 없습니다. 그럼 당신은 무엇을 합니까? 버튼의 모양이나 기능(또는 둘 다)을 다시 디자인하고 이를 "디자인의 최신 개발"이라고 판매합니다. 이는 사용자의 요구를 완전히 무시하고 디자이너로서의 성실성을 손상시키는 것입니다. 화면의 버튼 그래픽 사용자 인터페이스에서는 명확하고 눈에 띄는 버튼 모양이 없이 텍스트나 아이콘만으로 구성된 버튼이 최근 증가했습니다. Google의 "머티리얼 디자인" 또는 더 나쁜 IBM의 "카본 디자인 시스템"으로 대표되는 이 재미없고 영감이 없는 평범함은 Apple의 iOS 7과 그에 못지않게 비참한 "플랫 디자인" 미학을 통해 대중화되었습니다. 이 게으른 미니멀리즘은 종종 현대적이고 능률적인 것으로 간주되지만, 우리는 질문해야 합니다. 이것이 사용자 친화적이기도 합니까? 대답은 분명합니다. 아니요, 그렇지 않습니다! 아래 이미지를 살펴보세요. 첫 번째 행에는 버튼으로 추정되는 일련의 아이콘이 있습니다. 그러나 잠재적으로 이를 인식할 수 있는 유일한 방법은 사용자 인터페이스에서 구현되는 경우입니다. 따라서 실제로 버튼을 버튼으로 인식할 수 있는 것은 컨텍스트 일 뿐이지 그 자체의 모양은 아닙니다. 두 줄의 버튼. 첫 번째는 아이콘처럼 보이고 두 번째는 실제 버튼처럼 보입니다. 두 줄의 버튼. 어느 쪽이 상호작용에 더 매력적으로 보이나요? 위쪽 행의 아이콘을 아래쪽 행의 해당 아이콘과 비교하세요. 여기에서는 동일한 아이콘이 버튼 모양에 포함되어 있습니다. 이는 여러 가지 작업을 동시에 수행합니다. 첫째, 버튼 모양은 기호 역할을 합니다 . 이는 사용자에게 해당 작업이 발생할 수 있음을 알려준다는 의미입니다. 위쪽 행의 아이콘에는 그런 기능이 없습니다. 그들은 어떤 방식으로든 자신의 압박 능력(실제로 사용되는 능력)을 전달하지 않습니다 . 주변의 물리적인 물체를 보면 상징이 얼마나 중요한지 분명해집니다. 아래 사진의 Swiss Army Knife를 예로 들어 보겠습니다. 주 칼날(및 Swiss Army Knife의 거의 모든 힌지 도구)에 보이는 작은 홈을 "네일 닉"이라고 합니다. 이 손톱 자국을 사용하면 손톱을 삽입하고 도구를 꺼낼 수 있을 뿐만 아니라 정확하게 그렇게 할 수도 있습니다. 정확한 모양에도 주의하세요. 이는 손톱의 약간의 곡률을 반영합니다. 그리고 여기서 끝나지 않습니다. 홈 내부 벽의 각도 는 손톱이 손톱 흠집 안으로 더 깊이 들어가도록 윤곽이 잡혀 있어 잡아당길 때 안전하게 고정됩니다. 주 칼날에 못 자국이 있는 스위스 군용 칼. 이것은 Swiss Army Knife의 주 칼날에 있는 못 자국입니다. 이는 사용자에게 여기에서 작업이 발생할 수 있으며 이 작업에는 손톱이 포함될 수 있다는 단서를 제공합니다. 이를 통해 그래픽 사용자 인터페이스의 가상 버튼이 실제로 버튼처럼 보이는 이유가 분명해집니다. 즉, 사용할 수 있다는 점을 전달해야 합니다. 단지 아이콘처럼 보일 때는 그렇게 하지 않습니다. 버튼의 이미지를 다시 한 번 보시고, 이번에는 함께 속한 그룹을 찾아보세요. 예를 들어 플러스와 마이너스, 왼쪽과 오른쪽에 대한 아이콘은 두 그룹을 형성하고 돋보기는 분리되어 있습니다. 버튼의 모양이 균일한 아래쪽 행에서는 버튼 사이의 간격 차이를 더 쉽게 확인할 수 있습니다. 고려해야 할 또 다른 사항이 있습니다. 다음 사진을 살펴보세요. 두 줄의 버튼이 다시 나타납니다. 이제 각각 클릭하거나 터치할 수 있는 위치를 분홍색 강조 표시로 표시합니다. 위쪽 행에 있는 버튼은 잘못된 기능을 전달할 뿐만 아니라 제대로 작동하지도 않습니다 . 분홍색은 버튼이 실제로 클릭되거나 터치될 수 있는 위치, 즉 소프트웨어가 입력을 등록하는 영역을 나타냅니다. 윗줄의 경우 정사각형 픽셀 기준으로 생각하면 꽤 작은 영역입니다. 즉, 마우스 인터페이스의 클릭 가능한 영역은 때때로 위쪽 행과 아래쪽 행 1 과 동일할 수 있습니다 . 그러나 터치 인터페이스에서는 그렇지 않은 경우가 많습니다. 거기에서 그래픽의 실제 윤곽선(마이너스라고 가정)만 만질 수 있는 유일한 경우가 많습니다. 따라서 화면을 빠르게 탭하고 목표물을 정확하게 맞추지 못하면 버튼을 완전히 놓칠 수도 있습니다. 버튼의 텍스트 버튼이 실제로 아이콘이 아닌 단어일 때 버튼 모양의 중요성은 더욱 분명해집니다. 아래 예는 iOS 업데이트의 이용 약관을 보여줍니다. 이미 텍스트가 많은 환경에서는 "동의"와 "반대"라는 두 단어가 너무 많이 눈에 띄지 않는 것을 볼 수 있습니다. 두 단어가 실제로 버튼이라는 것을 사용자에게 보여주는 Apple의 방식은 오로지 색상만을 사용하여 수행됩니다. 동의하는 기본 옵션도 동의하지 않는 옵션과 그 자체로 충분히 차별화되지 않습니다. 유일한 차이점은 약간 더 굵은(그러나 실제로는 굵은 것은 아님) 서체입니다. 마지막으로, Apple이 선택한 서체(실제로는 특별히 디자인한 서체)도 사용자 인터페이스에 가장 적합하지 않습니다. iOS 16에 표시되는 이용 약관 잘못될 수 있는 모든 것은 잘못될 것입니다. 이것을 디자인한 사람들은 장식적인 것으로 인식된 모든 것을 제거하면 단순함이 될 것이라는 개념을 맹목적으로 따랐습니다. 이제 위의 Apple 예와 아래의 재설계를 비교해 보세요. 버튼 모양과 더 나은 서체 선택에 따라 달라지는 차이점을 살펴보세요. 문제의 서체는 'FF 유닛(FF Unit)'으로 애플의 '샌프란시스코(San Francisco)'보다 글자 모양이 덜 모호하다. 물론 이것은 개별 단어보다 긴 텍스트에서 덜 중요하지만 버튼과 법률 텍스트 모두에 동일한 서체를 원하기 때문에 FF Unit 과 같은 서체를 선택하는 것이 다소 분명해집니다. 마지막으로 스크롤 가능한 이용 약관 텍스트를 주변 인터페이스와 구분하기 위해 약간의 그림자를 사용했습니다. 이 역시 화면의 다양한 요소를 시각적으로 더 잘 구분할 수 있게 해줍니다. 새롭게 디자인된 이용약관 사용자 인터페이스가 3D 버튼과 일부 음영을 사용한다고 해서 그것이 촌스러워 보여야 한다는 의미는 아닙니다. 실제로, 끈적하지만 사용하기 쉬운 것과 미니멀하지만 사용하기 어려운 것 중에서 선택해야 한다면 끈적한 것이 좋습니다. 하지만 꼭 그런 선택을 할 필요는 없습니다. 보기에도 좋고 사용하기 쉬운 제품을 만드는 것은 완벽하게 가능 합니다 . 직접 조작 우리가 진화한 물리적 세계는 모든 행동이 영향을 미치는 세계입니다. 책상 위에 커피잔을 밀면 커피잔이 멀어지면 소리가 납니다. 책상 위에서 미끄러지는 머그의 작은 진동이 액체에 전달되면서 커피에 작은 파도가 형성되는 것을 볼 수도 있습니다. 이 모든 피드백은 우리 두뇌가 다양한 감각을 통해 우리에게 전달될 것으로 기대합니다. 이것이 무엇을 의미하는지 생각해 보십시오. 손가락 끝을 통해 촉각 피드백을 받게 되며 무게, 온도 및 질감에 대한 정보를 제공하게 됩니다. 책상 위의 세라믹 슬라이딩에서 음향 피드백이 발생합니다. 그리고 손가락과 머그의 움직임, 커피 표면의 작은 물결을 통해 시각적 피드백을 얻을 수 있습니다. 우리의 두뇌는 세계의 모델을 구축한 다음 현실을 그것과 비교하기 때문에 ² 이러한 다양한 피드백은 예상 되고 상호 연결 됩니다 . 예를 들어, 머그가 테이블을 가로질러 미끄러지는 동안 전혀 소리가 나지 않거나 액체가 머그 안에서 움직이지 않는다면 매우 이상할 것입니다 ³ . 버튼 모양이 없는 그래픽 사용자 인터페이스의 버튼은 피드백을 제공하지 않을 가능성이 높습니다. 실제로 터치하면 활성화되는 대체 상태(예: 색상 변경)가 있을 수 있지만 손가락으로 이를 방해할 가능성이 높습니다. 이것은 버튼처럼 보이는 버튼의 또 다른 장점입니다. 일반적으로 손가락 끝에서 튀어나오기 때문에 누르는 애니메이션을 명확하게 볼 수 있습니다. 직접적인 조작을 통한 직접적인 피드백. 아래 애니메이션을 참조하세요. 사용자는 위쪽 화살표를 탭한 것이 장치에 의해 등록되었는지 확신할 수 없지만(따라서 여러 번 시도할 수 있음) 3D 버튼의 "버튼이 눌려진" 상태는 해당 작업이 성공했다는 신호를 보냅니다. 이것이 왜 중요합니까? 우선, 우리의 두뇌가 진화한 세계의 특징, 즉 피드백이 단순히 유행하는 트렌드를 만족시키기 위해 제거되어서는 안 된다는 것은 자명합니다. 위에서 언급했듯이 우리는 전 세계의 거의 모든 것으로부터 일종의 피드백을 기대합니다. 하지만 고려해야 할 또 다른 사항이 있습니다. 방금 누른 버튼으로 인해 웹페이지가 로드되거나 효과가 나타나기까지 1초 이상이 걸릴 수 있습니다. 그런 일이 일어나기를 기다리는 동안 버튼이 눌렸음을 알려주는 버튼(피드백 제공)은 실제로 올바르게 탭했다는 확신을 줄 것입니다. 물론 시각적 피드백은 이 문제를 해결하는 한 가지 방법일 뿐입니다. 음향 또는 촉각 피드백도 잘 작동합니다. 더 좋은 것은 이것들의 조합이다. 무게와 진동을 느낄 수 있는 커피 머그를 기억하는 동시에 그것이 움직이는 것을 보고 테이블을 가로질러 미끄러지는 소리도 듣습니다. 이러한 종류의 다감각적 피드백은 상황이 허락한다면 당신이 추구해야 할 것입니다. 마지막 예: 이 비디오에서는 iOS 17에 나타나는 사진 앱과 제가 다시 디자인한 모습을 번갈아 볼 수 있습니다. Apple은 "선택"에 게으른 버튼 모양과 오른쪽에 줄임표 문자(…)를 사용하고 있습니다. 그러나 왼쪽에는 앨범으로 이동하기 위한 버튼이 "앨범"이라는 단어와 작은 화살표 모양으로 되어 있습니다. 왜 같은 화면에 두 가지 다른 개념이 있습니까? 새로운 디자인에서는 버튼처럼 작동하는 모든 것이 버튼처럼 보입니다. 제 생각에는 이것이 이루어져야 한다고 생각합니다. 잘못된 감상주의? 내 입장을 비판하는 사람들은 내 입장에서 볼 때 오래된 사용자 인터페이스에 대한 일종의 감상주의라고 생각한다고 지적할 수 있습니다. 이 글에서 내가 지적한 문제는 이전의 많은 사용자 인터페이스에서 해결되었다고 생각하는 종류의 문제라는 것은 사실입니다. 그러나 그것은 감상적인 것과는 아무런 관련이 없습니다. 제품은 제대로 작동해야 합니다. 버튼이 올바른 선택이라면 버튼을 사용하세요. 그렇지 않다면 하지 마십시오. 하지만 버튼처럼 작동하는 디자인 요소를 구현하려면 버튼도 버튼처럼 보여야 합니다.