Category: Interactive Design

대부분의 사용자는 무언가 잘못되었을 때만 앱이나 소프트웨어의 UI 디자인을 알아차린다. 이러한 이유로 좋은 UI 디자인은 거의 눈에 띄지 않고 사용자가 중단 없이 작업에 착수할 수 있도록 해준다고 말할 수 있다. 그리고 UI 디자인 프로젝트가 다양한 만큼 UI 디자인의 모든 좋은 예는 동일한 기본 황금률을 따르는 경향이 있다.

본 내용에서는 완전히 매끄럽고 사실상 감지할 수 없는 사용자 경험을 위해 따라야 할 가장 중요한 UI 디자인 원칙을 살펴보도록 하겠다.

10가지 필수 UI 디자인 원칙

효과적인 사용자 인터페이스 디자인은 사용자 경험에서 가능한 많은 장애물, 병목 현상, 걸림돌 및 잠재적인 혼란 원인을 제거하는 것이다. 무엇보다도 목표는 모든 사용자가 탐색하기에 유연하고 직관적인 환경을 만드는 것이다. 최소한의 노력으로 목표를 달성할 수 있도록 한다.

물론 모든 UI 디자인 프로젝트는 다를 수 있다. 특히 세부 사항에 관해서는 더욱더 그렇다. 예를 들어 모바일 앱에서 작동하는 것이 데스크톱 소프트웨어나 웹사이트에 반드시 적합한 솔루션은 아니다. 그러나 좋은 UI 디자인의 일반적인 원칙은 모든 플랫폼과 프로젝트에서 일관되게 유지된다.

다음은 작업 중인 거의 모든 UI 디자인 프로젝트에 적용할 수 있는(실제로 그래야 하는) 일련의 기본 UI 디자인 원칙이다. 위험을 무릅쓰고 이 황금률을 무시하십시오!

• UI 디자인을 단순하게 유지(Keep the UI design simple)
• 예측 및 선점(Predict and preempt)
• 사용자를 운전석에 ~(Put the user in the driving seat)
• 체계적인 일관성 유지(Be methodical and consistent)
• 불필요한 복잡성 피하기(Avoid unnecessary complexity)
• 명확한 이정표 제공(Provide clear signposts)
• 실수에 관대하라(Be tolerant of mistakes)
• 관련 피드백 제공(Give relevant feedback)
• 기능의 우선순위 지정(Prioritize functions)
• 접근성을 위한 UI 디자인(Design the UI for accessibility)

1. UI 디자인을 단순하게 유지

UI 디자인 과정은 종종 재미있다. 그러나 목표를 주시하는 것이 중요하며 디자이너의 개인적인 만족도는 항상 이 목록의 맨 나중에 있어야 한다.

아마도 모든 주요 UI 디자인 원칙 중 가장 중요한 것은 디자인 대상과 이유를 잊지 않는 것이다. 좋은 UI 디자인은 실용적이다. 결코 장식적이지 않다. 방종하거나 지나치게 형식주의적인 디자인은 불필요한 소음만 생성한다. 사용자와 진정으로 관련이 있는 요소에서 주의를 산만하게 한다.

“UI 디자인의 일부가 사용자에게 실용적인 목적을 제공하지 않는다면, 거기에 있어서는 안 됩니다.”

가장 기본적인 요소로 디자인을 정리해보자. 불필요한 과정은 모두 제거하고 절대적으로 필요한 요소만 남겨 두어야 한다. UI 디자인의 일부가 사용자에게 실질적인 목적을 제공하지 않고 자신의 독창적인 환상만 충족한다면 그런 요인은 없애야 한다.

2. 예측 및 선점

그러나 사용자와 관련된 것이 무엇인지 어떻게 알 수 있을까? 가장 먼저 취해야 할 UI 디자인 단계 중 하나는 사용자와 사용자의 요구를 완전히 이해하는 것이다. 이것을 달성하면 사용자가 다음에 무엇을 하고 싶어 할지 예측할 수 있는 위치에 있게 된다.

이제 사용자에게 필요한 도구, 정보 및 리소스를 정확하게 제공할 수 있다. 그리고 그들이 필요할 때 정확히, 또는 이것이 사용자가 원하는 것과 일치하지 않는 경우 디자인의 초기 부분을 변경하여 처음부터 완전히 다른 방향으로 유도하도록 행동을 선점할 수 있다.

3. 사용자를 운전석에~

사용자는 자신이 실제로 제어하고 있는지와 관계없이 완전히 제어할 수 있다고 느껴야 한다. 이것은 UI를 배경으로 페이드 하게 만드는 것을 의미한다. 물론 사용자가 필요할 때 항상 있어야 한다. 그리고 그들이 기대하는 바로 그곳에 있어야 한다. 그러나 아무도 인터페이스가 특정 행동을 강요하거나 결정을 내리는 것처럼 느껴서는 안 된다. 어떤 경우에는 이것이 정확히 진행되고 있는 것일 수도 있다.

4. 체계적인 일관성 유지

마스터해야 할 가장 기본적인 UI 디자인 개념 중 하나는 단순히 일관성을 유지하는 것이다. 내부적으로(즉, 자체 플랫폼 전반에 걸쳐)뿐만 아니라 다른 곳에서 사용되는 업계 표준에서도 마찬가지다. 좋은 UI 디자인 프로젝트는 바퀴를 재발명하지 않는다. 그들은 그것을 개선한다. 우리는 모두 필요한 곳에서 혁신을 추구한다. 그러나 그들이 말했듯이 “고장난 것이 아니라면 고치지 마십시오!”

사실 고장나더라도 고치고 싶지 않을 수도 있다. 이걸 고려하세요; 당신의 아이디어가 객관적으로 “더 나은” 즉, 더 논리적일 수 있지만 사용자가 찾을 것으로 기대하는 것이 아니라면 혼란스러울 뿐이다. 그리고 실제로는 전혀 “더 나은” 것이 아니게 된다.

이 규칙은 패턴에서 용어에 이르기까지 모든 것에 적용된다. 확실하지 않았을 때 가장 널리 알려진 내용을 따르기를 바란다.

즉, 새롭거나 특이한 기능이 도입되면 이전 기능과 차별화하는 것도 마찬가지로 중요할 수 있다. 그리고 아마도 이것을 달성하는 가장 좋은 방법은 실제로 우리 고유의 신성한 UI 디자인 원칙 중 하나를 깨는 것이다. 중요하고 새로운 기능을 돋보이게 하는 방법으로 불일치를 사용한다. 그러나 의도적인 불일치는 조잡하거나 변덕스러운 행동과 매우 다르다는 점을 명심하기 바란다.

5. UI 디자인에서 불필요한 복잡성 피하기

항상 가능한 최소한의 단계와 화면을 목표로 하자. 하단 시트 및 모달 창(modal windows)과 같은 오버레이를 사용하여 데이터를 압축하고 앱의 공간을 줄인다.

동시에 논리적이고 자율적이며 독립적인 방식으로 정보를 구성해야 한다. 사실 UI 디자인의 황금률 중 하나는 항상 작업과 하위 작업을 주제별로 그룹화할 뿐만 아니라 완전히 실용적인 방식으로 그룹화하는 것이다.

무엇보다도, 아무도 찾을 생각을 하지 않는 페이지에 하위 작업을 숨기지 않는다. 아무도 부엌에 샤워실이 있고, 욕실에 TV가 있고, 마당에 옷장이 있을 거라고 기대하지 않는다. 명확하고 논리적인 분류에 따라 화면과 콘텐츠를 구성한다.

항상 가능한 최소한의 단계와 화면을 목표로 하십시오.

마찬가지로 작업을 완료하는 데 필요한 단계 수를 항상 최소로 줄인다. 한두 가지 작업만 수행할 때 클릭이라는 지루한 장애물 과정을 통해 사용자를 보내지 않는다. 가장 실용적인 UI 디자인 원칙 중 하나인 Three-click rule 은 사용자가 앱 내 어디에서든 세 번 이상 클릭하지 않아 필요한 모든 작업을 수행하거나 필요한 정보에 액세스할 수 있어야 한다고 명시한다.

무엇보다도 사용자에게 이미 제공한 정보를 다시 입력하도록 요청하지 않는다. 단지 한 필드에 잘못된 입력을 제공했기 때문에 양식에서 모든 정보를 삭제하고 처음부터 다시 시작해야 하는 경험을 한 적이 있다면 사용자가 기기를 던지게 할 가능성이 더 크다는 것을 알게 될 것이다. 꽉 막힌 벽처럼 완전한 총체적 난국에 포기하게 된다.

6. 명확한 이정표 제공

우리의 필수 UI 디자인 원칙 중 여섯 번째는 직관적인 레이아웃과 정보의 명확한 레이블 지정에 관한 것이다. 앱을 탐색하는 것은 처음 사용하는 사용자에게도 겁이 나거나 혼란스러워서는 안 된다. 대신 인터페이스 탐색은 재미있어야 하며 거의 무의식적으로 이루어져야 한다.

페이지 아키텍처가 단순하고 논리적이며 명확하게 표시되어 있는지 확인하라. 사용자는 소프트웨어 내에서 자신이 어디에 있는지, 원하는 다른 곳으로 이동하기 위해 무엇을 해야 하는지에 대해 결코 의심해서는 안 된다.

그러나 사용자가 현재 위치에 어떻게 왔는지 기억할 것으로 기대하는 부담을 주지 않아야 한다. 대신, 필요한 경우 탐색에 대한 시각적 단서를 제공한다. 이렇게 하면 꼬마 빨간 망토는 큰 나쁜 늑대를 만날까 봐 두려워하지 않고 숲에서 쉽게 빠져나갈 수 있다.

7. 실수에 관대하라

실수는 흔히 발생한다. 그리고 사용자는 마음을 바꾸기도 한다. 사실, 그들이 앱을 처음 사용한다면 처음부터 자신의 행동에 대해 완전히 확신하지 못했을 가능성이 클 수도 있다.

사용자에 대해 이것을 기대하지 않는 것이 좋다. 빠르고 관대한 실행 취소/다시 실행 기능을 구현하여 필요할 때마다 쉽게 되돌릴 수 있다. 이는 데이터 손실과 시간 낭비로 인한 좌절감을 피하는 데 도움이 될 뿐만 아니라 사용자가 부정적인 결과에 대한 두려움 없이 앱을 탐색하고 변경할 수 있다는 자신감을 주게 된다.

8. 관련 피드백 제공

사용자에게 진행 상황에 대한 정보를 제공한다. 그들의 행동이 접수되었음을 확인하게 한다. 일이 제대로 진행되고 있음을 알리는 것은 매우 중요하다. 중요하거나 희귀한 행동에는 크고 중요한 형태의 피드백이 필요하다. 한편, 더 작고 빈번한 조치는 더 작은 형태의 승인을 받을 가치가 있다.

사용자에게 진행 상황에 대한 정보를 제공하고 작업이 수신되었음을 확인합니다.

우리는 이미 가장 중요한 UI 디자인 기본 중 하나가 정보를 최소한으로 줄이는 것임을 강조했다. 그러나 상태 정보보다 더 중요한 것은 거의 없으므로 사용자에게 그것을 찾도록 강요하지 않는다. 상태 정보는 항상 쉽게 액세스할 수 있고 완전히 정확해야 한다.

사용자는 의도적으로 이 정보를 찾거나 앱이 응답하지 않는지 궁금해하지 않고 항상 무슨 일이 일어나고 있는지 정확히 알아야 한다.

물론 때때로 오류가 발생한다. 그리고 그러한 경우 사용자에게 명확하고 이해하기 쉬운 방식으로 정보를 제공해야 한다. “오류 코드”라는 메시지 뒤에 불투명한 심각한 숫자가 오는 것은 이 설명을 충족하지 않을 수 있다.

대신 문제가 무엇인지 설명하는 것이 좋다. 사용자에게 무엇을 해야 하는지 알려주며, 그리고 오류 메시지를 작성할 때 오류가 사용자의 잘못이 아닌 시스템 오작동으로 인해 발생했을 가능성을 배제하지 않아야 한다.

9. 기능의 우선순위 지정

명확한 계층 구조를 만들지 못하는 것은 사람들이 진정으로 최소한의 간소화된 UI를 디자인하는 데 방해가 되는 가장 일반적인 장애물 중 하나이다.

이미 강조했듯이 모든 화면의 모든 항목은 사용자 경험에 절대적으로 필수적이어야 하며 불필요한 것은 모두 프로토타입 단계에서 제거돼야 한다. 그러나 이러한 필수 항목 중 일부는 필연적으로 다른 항목보다 더 중요한 경우가 있다. 그리고 우리의 UI 디자인 원칙 중 아홉 번째는 이 계층 구조가 UI 디자인에 명확하게 반영되어야 한다고 명시되어 있다.

아마도 사용자가 대부분 X를 원할 것이라는 사실을 이미 알고 있습니까? 그리고 그들도 Y를 하도록 격려하고 싶습니까? 쉬운; 이 두 기능을 Z보다 더 두드러지게 만든다. 이것은 버튼, 텍스트 또는 기타 요소의 크기를 변경하는 것처럼 간단할 수 있다.

10. 접근성을 위한 UI 디자인

모든 사용자가 귀하와 귀하가 아는 사람들과 같다고 가정하지 않는다. 이것은 기술적 지식과 능력에서부터 세계관에 이르기까지 모든 것에 적용된다.

앱은 매우 다른 문화적 배경을 가진 사람들이 사용한다. 현실적으로는 사회적, 문화적 규칙에서 가능한 모든 변화를 계정에 예상할 수는 없지만, 자동으로 길을 가정하지 않는 당신이 일을 그들에게 일을 유일한 논리적 방법이다. 예를 들어, 세계의 많은 지역에서 사람들은 오른쪽에서 왼쪽으로 읽음으로 왼쪽에서 오른쪽으로 물건을 배치한다고 해서 모든 사용자가 반드시 왼쪽에서 오른쪽으로 물건을 만나는 것은 아니다. 답이 아닌 질문을 염두에 두고 디자인하기 바란다.

당신이 사용하는 색상과 같은 아주 단순한 것들조차도 사람들에 따라 다르게 보일 것이다. 그리고 이것은 주관적이거나 문화적인 차이의 경우만이 아니다. 결국 세계 인구의 상당 부분이 색맹이기 때문이다.

사실, 색상이 UI 디자인 요소와 기능을 구별하는 유효한 방법이지만 이를 달성하기 위해 색상에만 의존해서는 안 된다. 대신 모든 사용자에게 유효한 방식으로 중요한 기능을 구별하는 데 도움이 되도록 색상을 양식 또는 기타 변수와 결합하는 것이 좋다.

UI 디자인의 황금률

우리가 숨 쉬는 공기가 오염되거나 공기가 완전히 부족할 때까지 그것을 알아차리지 못하는 경향이 있는 것처럼, 좋은 UI 디자인은 사용자가 번성할 수 있지만 디자인 자체는 거의 시야에서 사라지는 마찰 없는 환경을 만든다.

최고의 디자이너는 위에서 살펴본 것과 같은 간단한 UI 디자인 원칙을 따르면 사용자가 UI를 거의 눈치채지 못할 정도로 상호 작용을 촉진하여 보다 효과적인 사용자 인터페이스를 만드는 데 도움이 될 수 있다는 것을 알고 있다. 다음 10가지 UI 디자인 기본 사항을 다음 프로젝트에 적용하고 성공적인 UI 디자인이 얼마나 강력한지 직접 확인하기 바란다.

참고자료:
10 fundamental UI design principles you need to know