유저 인터페이스는 모든 소프트웨어 제품에서 없어서는 안 될 매우 중요한 요소입니다. 잘 설계된 유저 인터페이스는 사용자가 제품을 효율적으로 사용하도록 돕지만, 그렇지 않은 경우 사용자에게 불편을 초래할 수 있습니다.

탁월한 유저 인터페이스를 만들기 위해 대부분 디자이너가 인터페이스 디자인 원칙을 따릅니다. 인터페이스 디자인 원칙에는 소프트웨어 디자인을 가이드하는 데 사용되는 높은 차원의 콘셉트가 포함됩니다. 본 게시글에서는 이러한 기본 원칙을 몇 가지 소개합니다. 제이콥 닐슨(Jakob Nielsen)의 유저 인터페이스 디자인을 위한 10가지 사용성 휴리스틱스, 벤 슈나이더만(Ben Shneiderman)의 인터페이스 디자인의 8가지 황금률, 브루스 토그나치니(Bruce Tognazzini)의 인터랙션 디자인 원칙의 내용을 바탕으로 살펴보겠습니다. 이러한 원칙 대부분은 기존의 GUI 환경(예: 데스크탑 및 모바일 앱, 웹 사이트)과 비 GUI 인터페이스(예: 음성 기반 인터랙션 시스템)를 포함하는 모든 인터랙티브 시스템에 적용됩니다.

기본 원칙은 다음과 같습니다.

1. 사용자 제어 방식의 인터페이스
2. 제품과의 간편한 상호 작용
3. 인지 부하 최소화
4. 일관된 유저 인터페이스

1. 사용자 제어 방식의 인터페이스

효과적인 인터페이스는 사용자에게 통제감을 제공해 줍니다. 통제감은 사용자에게 편안함을 제공하고 사용자가 인터페이스를 빠르게 습득하도록 도와줍니다.

원활한 제어를 위한 작업 취소 기능

사용자가 작업을 언제든지 빠르게 취소할 수 있어야 합니다. 그러면 사용자가 작업을 진행할 때 부담 없이 제품을 탐색할 수 있습니다. 사용자가 오류를 손쉽게 실행 취소할 수 있다면 익숙하지 않은 옵션도 부담 없이 사용할 수 있게 됩니다. 이와 반대로 사용자가 오류에 대한 부담이 느껴진다면 항상 주의를 기울여야 하므로, 탐색 속도가 느려지게 됩니다.

사용자가 “실행 취소/다시 실행” 옵션을 제공하는 가장 일반적인 인터페이스는 텍스트 및 그래픽 편집 툴입니다. 텍스트를 작성하거나 그래픽을 만드는 동안 “실행 취소”를 누르면 사용자가 작업 내용을 변경할 수 있고, 마지막 변경 사항이 적용된 이전 단계로 한 단계씩 되돌아갈 수 있기 때문입니다. 또한 “다시 실행”을 누르면 사용자가 실행 취소한 작업을 다시 실행할 수 있습니다. 즉, 몇 단계 이전으로 되돌아가서 변경 사항을 적용하기 전의 단계로 다시 돌아갈 수 있습니다.

실행 취소 및 다시 실행 옵션 – 어도비 XD

“실행 취소” 기능은 사용자가 실수로 시스템 기능을 잘못 선택한 경우 특히 유용합니다. 그러한 경우 “해결책”으로 작용하여 사용자가 원하는 상태로 되돌려주기 때문입니다. 이에 대한 예시로는 사용자가 실수로 이메일을 삭제했을 때 실행 취소 옵션을 제공하는 지메일(Gmail)의 통보 메시지입니다.

지메일 인터페이스의 실행 취소 옵션

간편한 내비게이션 인터페이스 제작

내비게이션은 항상 명확하고 사용자가 쉽게 알아볼 수 있어야 합니다. 즉, 사용자가 모든 소프트웨어 제품의 인터페이스를 손쉽게 탐색할 수 있어야 합니다. 많은 기능이 포함된 복잡한 B2B 제품일지라도 최대한 간결하고 사용자가 손쉽게 이용할 수 있도록 만들어야 합니다. 사용자의 현재 위치와 이전 위치, 그다음으로 이동할 위치에 대한 전후 관계의 컨텍스트를 제공함으로써 사용자가 편안하게 제품을 이용할 수 있도록 해야 합니다.

• 시각적 단서를 제공합니다. 시각적 단서는 사용자에게 현 위치를 상기시키는 역할을 합니다. 사용자가 제품 인터페이스를 이동하는 과정에서 참조 지점을 제공함으로써 사용자가 인터페이스를 손쉽게 이동할 수 있게 도와줍니다. 인터페이스 내에서 페이지 제목, 현재 선택된 내비게이션 옵션 강조 표시, 기타 시각적 보조 수단을 통해 사용자의 현 위치를 즉시 알려줍니다. 이로써 사용자는 자신이 현재 어디에 있는지 또는 어떠한 경로를 통해 현재의 화면으로 유입되었는지 쉽게 알 수 있게 됩니다.
• 예측 가능한 단서를 제공합니다. 사용자에게 동작의 결과를 예측할 수 있는 단서를 제공해야 합니다. 사용자는 원하는 작업을 하기 위해 눌러야 하는 버튼과 각 버튼에 대한 기능을 쉽게 알 수 있어야 합니다.

명확하고 가시적인 워크플로우를 제공하면 사용자가 프로세스의 어느 단계에 있는지 쉽게 파악할 수 있습니다. 이미지 출처: 디자인모도(Designmodo)

정보를 기반으로 한 피드백 제공

피드백은 보통 동작 지점과 연결되어 있습니다. 즉, 사용자의 동작마다 시스템은 의미 있고 명확한 반응을 보여야 합니다. 사용자의 모든 동작마다 피드백을 제공하는 시스템은 사용자가 프로세스를 원활하게 마치도록 도와줍니다.

자주 발생하는 동작에 대해서는 반응을 간단하게 제공할 수 있습니다. 예를 들어 사용자가 인터랙티브한 개체(예: 버튼)와 상호 작용할 때 동작이 적용되었다는 표식을 제공하는 것이 좋습니다. 표식은 버튼을 누르면 색상이 변하는 방식 등의 간단한 요소가 될 수 있습니다. 색상의 변화가 사용자에게 상호 작용을 알리는 역할을 하는 것입니다. 이러한 피드백이 제공되지 않는다면 사용자는 의도된 동작이 제대로 적용되었는지 재차 확인해야 하는 번거로움을 경험할 수 있습니다.

피드백은 동작이 성공적으로 적용되었다는 것을 사용자에게 알려줍니다. 이미지 출처: 콜린 가빈(Colin Garven)

드물게 발생하지만 중요한 동작인 경우 반응은 더욱 명확해야 합니다. 예를 들어 로그인 양식에서 암호 필드를 작성할 때 인터페이스는 사용자에게 암호 조건을 알릴 수 있습니다.

암호 생성: 암호 조건이 충족되면 녹색 체크 표시가 표시됩니다.

시스템 상태에 대한 표시 알림

사용자는 현재 상태에 대한 정보와 프로세스의 상태에 대한 피드백이 주기적으로 제공되기를 바랍니다. 사용자가 약간의 시간이 소요되는 동작을 시작할 때 시스템 상태를 가시적으로 표시해야 합니다. 앱에서 특정 작업이 수행될 때 디바이스의 화면에는 시스템 상태가 표시되어야 합니다. 진행 상태 표시기는 사용자에게 편의성을 제공하는 유저 인터페이스 디자인 요소 중 하나입니다.

잘 설계된 인터페이스는 시스템이 작업을 완료하는 동안 진행 상태를 표시함으로써 사용자에게 편의를 제공합니다. 드롭박스(Dropbox)는 현재 진행 상태와 남은 시간을 제공함으로써 문서 업로드 상태를 표시합니다.

사용 수준이 각기 다른 사용자를 위한 편의 제공

사용 수준이 각기 다른 사용자들이 각 수준에 맞게 제품과 상호 작용할 수 있어야 합니다. 초급자에서부터 일회성 방문자, 시스템 사용이 익숙한 전문가까지 모든 사용자가 손쉽게 이용할 수 있는 인터페이스를 제공해야 합니다. 따라서 다양한 사용자의 요구를 충족하는 인터페이스를 디자인해야 합니다.

초급자를 위해 튜토리얼 및 설명과 같은 기능을 추가하면 도움이 될 수 있습니다.(이 경우 숙련된 사용자가 필요에 따라 이 부분을 건너뛸 수 있는 옵션을 제공해야 합니다.)

사용자가 처음으로 어도비 XD를 실행하면 이 앱의 사용 방법이 포함된 튜토리얼을 시작할 수 있는 옵션이 화면에 표시됩니다.

사용자가 제품에 익숙해지면 일반적으로 사용되는 동작을 빠르게 수행하기 위해 단축키를 찾게 됩니다. 숙련된 사용자가 단축키를 사용할 수 있는 빠른 방법을 제공해야 합니다.

전문 사용자가 보다 효율적으로 사용할 수 있는 작업 시간 단축 기능(단축키 및 핫키)을 제공해야 합니다.

2. 제품과의 간편한 상호작용

사용자에게 불필요한 모든 요소 제거

인터페이스에는 연관성이 없는 정보나 불필요한 정보를 포함해서는 안 됩니다. UI에서 연관성 없는 정보가 표시될 경우 상대적으로 연관성 있는 정보의 가시성을 저하할 수 있기 때문입니다. 사용자 작업과 직접적인 관련이 없는 불필요한 요소 또는 콘텐츠를 제거하여 인터페이스를 간소화합니다. 또한 효과적이고 연관성 높은 UI를 제공하려면 모든 정보가 화면에 표시되도록 디자인해야 합니다. 이를 위해서는 모든 요소를 자세히 살펴보면서 불필요한 요소를 제거합니다.

아이에이 라이터(iA Writer)는 인터페이스에 콘텐츠 또는 기능을 과도하게 추가하는 것을 피하고 “미니멀리즘”의 접근 방식에 의거하여 만들어진 탁월한 앱입니다.

아이에이 라이터 앱의 인터페이스는 아무런 방해 요소가 없는 직관적인 입력 시트를 제공합니다. 필요한 기능 이외의 다른 모든 기능이 숨겨지므로 사용자는 자신이 작성하는 내용에만 집중할 수 있습니다.

사용자에게 요구하는 데이터 최소화

사용자가 이미 입력한 데이터를 다시 입력하도록 요청해서는 안 됩니다. 특히 사용자가 이전에 모든 필수 정보를 제공한 경우, 시간이 오래 소요되는 데이터 입력 시퀀스는 사용자에게 불쾌감을 줄 수 있습니다. 가장 효과적인 앱은 최소한의 사용자 정보량으로 필요한 모든 작업을 수행하는 앱입니다.

전문 용어 및 시스템 기반의 용어 사용 자제

제품을 디자인할 때 쉽게 읽고 이해할 수 있는 언어를 사용하는 것이 중요합니다. 전문 용어 또는 시스템 기반의 용어 사용을 자제하고 사용자에게 익숙한 단어, 문구 및 개념을 이용해야 합니다.

이 인터페이스는 시스템 또는 개발자 언어가 아니라 사용자가 이해하기 쉬운 용어를 사용하고 있습니다. 이미지 출처: 싱크위드구글(Thinkwithgoogle)

인터랙티브 요소에 피츠의 법칙 적용

피츠의 법칙은 목표를 달성하기까지 걸리는 시간은 해당 목표까지의 거리와 크기에 따라 달라진다는 개념을 갖고 있습니다. 즉, 중요한 기능일수록 사용자가 손쉽게 액세스할 수 있도록 크게 디자인하는 것이 좋습니다. 버튼의 크기가 클수록 사용자가 상호 작용하기가 더 쉽기 때문입니다.

위 그림은 피츠의 법칙을 설명한 것으로, D는 커서의 출발점을 기준으로 한 거리를 나타내며 W는 목표의 폭을 나타냅니다.

여러 목표를 달성하는 데 소요되는 시간은 각 목표를 달성하기까지 소요되는 시간의 총합이라는 점이 중요합니다. 따라서 상호 작용의 효율성을 향상하기 위해서는 해당 목표까지의 거리를 줄이고, 목표의 크기를 늘려야 할 뿐만 아니라 해당 작업을 완료하기 위해 사용자가 상호 작용하는 목표의 총수를 줄여야 합니다.

간편한 액세스를 제공하는 인터페이스 디자인

제품을 디자인할 때에는 저시력 또는 실명 증상이 있는 사용자나 청각 장애, 인지 장애 또는 운동 장애가 있는 사용자 등 다양한 사용자가 손쉽게 액세스할 수 있게 만들어야 합니다. 제품의 액세서빌러티를 개선하면 사용성이 높아집니다.

색상은 액세서빌러티에 강력한 영향을 주는 인터페이스의 요소 중 하나입니다. 하지만 색상은 보는 사람마다 각각 다르게 인지할 수 있습니다. 일부 사용자는 전체 범위의 색상을 볼 수 있지만 많은 사람이 제한된 범위의 색상만을 인지합니다. 남성의 약 10%와 여성의 1%는 색맹 증상이 있습니다. 따라서 인터페이스를 디자인할 때 색상만으로 정보를 전달하는 방식은 피하는 것이 좋습니다. 인터페이스에 색상을 사용할 경우 색상을 잘 보지 못하는 사람들을 위해 다른 방식을 통해 해당 정보를 전달해야 합니다.

안 좋은 예: 이 양식은 오류가 있으면 빨간색을 표시하고, 오류가 없으면 녹색을 표시합니다. 제2색맹(빨간색-녹색 색맹)이 있는 사용자는 이 필드를 식별하지 못합니다.

좋은 예: 이 양식은 아이콘과 레이블을 통해 유효하지 않은 필드를 표시합니다. 이를 통해 색맹이 있는 사용자에게도 정보를 전달할 수 있습니다.

메타포 사용

디자인에서 메타포를 사용하면 실제 세상과 디지털 경험을 서로 연결할 수 있습니다. 또한 사용자가 생각하지 못한 방식으로 디자인 요소를 표시하고 작동하게 할 수 있으며, 사용자에게 더욱 친숙한 느낌을 전달할 수 있습니다. 데스크탑에서 삭제된 파일이 보관되는 휴지통을 예로 들면, 이는 실제 휴지통에 대한 메타포를 적용하여 사용자가 콘셉트를 보다 쉽게 이해할 수 있도록 시각적으로 표시한 것입니다.

훌륭한 메타포는 사용자의 의식 속에 있는 실제 경험과 긴밀한 관계를 지니게 됩니다. 맥(Mac)의 휴지통은 실제 휴지통과 매우 흡사하며, 파일 보관 여부를 표시해 줍니다.

UI의 메타포를 선택할 때에는 사용자가 콘셉트 모델을 가장 잘 이해할 수 있는 메타포를 고려합니다. 예를 들어 결제 처리를 위해 신용카드 세부 정보를 묻는 경우 실제 물리적 카드를 예로 참조할 수 있습니다.

요청된 신용카드 세부 정보는 실제 신용카드의 세부 정보와 일치합니다. 이미지 출처: 라마크리시(Ramakrish)

명확한 오류 메시지 제공

사용자 여정에서 오류는 불가피하게 발생합니다. 쓸모없는 오류 메시지와 부적절한 오류 처리는 사용자의 불만을 초래하고 결국 앱 사용을 포기하게 만듭니다. 하지만 잘 만들어진 오류 메시지는 사용자에게 문제를 해결할 수 있는 기회를 제공합니다. 따라서 오류 알림 메시지를 통해 사용자에게 문제 해결을 위한 힌트를 명시적으로 제공해야 합니다.

훌륭한 오류 메시지는 사용자에게 불쾌감을 주지 않으면서도 정확하고 효율적입니다. 메일침프(MailChimp)는 부정확한 암호 시나리오를 효과적으로 처리합니다.

무엇보다 중요한 것은 훌륭한 오류 메시지를 만드는 것보다 문제가 처음부터 발생하지 않도록 디자인하는 것입니다. 오류가 발생하기 쉬운 조건을 제거하거나 오류가 발생한 경우 사용자가 다음 작업을 수행하기 전에 확인 대화 상자를 제공해야 합니다. 예를 들어 지메일은 사용자가 첨부 파일을 삽입하지 않으면 이를 알리는 메시지를 표시합니다.

최고의 UI 디자인은 오류를 최소화하고 오류가 발생한 경우 신속하게 해결할 수 있게 만드는 것입니다. 지메일의 오류 방지 기능은 사용자가 첨부 파일을 참조하는 내용을 작성한 후 삽입하는 것을 잊어버린 경우 팝업 창을 표시합니다.

사용자 작업 보호

사용자의 작업 손실을 보호합니다. 사용자 쪽에서의 오류, 시스템 오류, 인터넷 연결 문제, 예상치 못한 정전 등 기타 모든 이유로부터 사용자의 작업을 보호해야 합니다.

구글 크롬(Google Chrome)에서는 올바르게 종료되지 않은 세션의 경우 열려 있는 모든 탭을 복구할 수 있습니다.

3. 인지 부하 최소화

인지 부하는 제품 사용 시 필요한 사용자의 정신적 처리 역량을 의미합니다. 즉, 사용자가 제품 사용을 위해 많은 생각이나 노력을 하지 않고도 손쉽게 사용할 수 있게 해야 합니다.

정보 또는 동작 시퀀스 분할

1956년 심리학자 조지 밀러(George Miller)가 분할 이론을 처음 소개했습니다. 밀러는 자신의 책에서 인간의 작업 기억은 정보를 처리하는 동안 7±2의 정보를 처리할 수 있다고 밝혔습니다.

이 규칙은 UI 디자인 시 항목을 구성하고 그룹으로 지정할 때 적용될 수 있습니다. 예를 들어 간격 없이 전화번호를 입력하도록 디자인된 UI의 경우, 사용자가 번호를 부정확하게 입력할 가능성이 큽니다. 사람들은 보통 열 자리 이상의 숫자를 한 번에 인지하지 못합니다. 전화번호가 작은 단위로 분할된 이유가 바로 이 때문입니다.

숫자 사이에 간격을 두면 사용자의 숫자 인지와 입력이 훨씬 빨라집니다.

작업 완료에 필요한 동작 수 최소화

유저 인터페이스를 디자인할 때 사용자가 목표를 달성하는 데 필요한 동작의 수를 최소화하십시오. 사용자가 정보를 찾는 데 마우스 버튼을 세 번 이상 클릭해서는 안 된다는 세 번의 클릭 규칙을 적용하십시오.

사용자의 기억이 아닌 인식 촉진

제이콥 닐슨의 10가지 사용성 휴리스틱스 중 하나에 따르면 유저 인터페이스 디자인에서 기억이 아닌 인식을 촉진하라고 조언합니다. 인간의 뇌에서 인식은 기억보다 더 많은 신호를 작동시키기 때문에 무언가를 인식하는 것이 기억해내는 것보다 훨씬 더 쉽습니다. 인식에 의한 뇌의 신호는 기억 속에서 관련 정보를 활성화하고 정보를 기억하는 데 도움을 줍니다.

유저 인터페이스의 인식률을 높이려면 디자이너는 정보와 기능성을 가시화하고 더욱 간편한 액세스를 제공해야 합니다. 툴팁과 컨텍스트 기반의 세부 정보와 같은 시각적 툴도 사용자의 정보 인식을 도울 수 있습니다.

구글 행아웃(Google Hangouts)의 툴팁

시각적 명확성 향상

뛰어난 시각적 구성을 통해 사용성과 가독성을 향상하여 사용자가 정보를 신속하게 찾고 더욱 효율적으로 인터페이스를 사용할 수 있게 합니다.

레이아웃 디자인 시 다음과 같은 사항을 유념합니다.

• 한 번에 너무 많은 정보를 화면에 제공해서는 안 됩니다. 그럴 경우 복잡성이 증가하게 됩니다.
• “형식은 기능을 따른다”라는 원칙에 의거하여 제대로 작동하도록 만듭니다.
• 유사한 항목을 하나의 그룹으로 지정하여 항목에 번호를 부여하고, 머리글 및 메시지 창의 텍스트를 사용하는 등 일반적인 콘텐츠 구성을 적용합니다.

4. 일관된 유저 인터페이스

일관된 디자인은 직관적 디자인으로부터 나오며, 일관성이 높을 경우 사용성과 습득성도 향상됩니다. 일관된 유저 인터페이스란 사용자가 자신이 보유한 지식과 스킬을 모든 앱과 UI 전반에서 활용할 수 있도록 디자인된 것을 말합니다.

시각적 일관성(룩의 일관성)

사용자가 제품에 대한 신뢰를 갖고 사용할 수 있게 해야 합니다. 색상, 글꼴 및 아이콘은 제품 전체에 일관적으로 적용되어야 합니다. 아무런 명백한 이유 없이 제품 내 시각 스타일을 변경하지 마십시오. 예를 들어 사이트의 한 페이지에서 표시되는 ‘제출’ 버튼은 다른 모든 페이지에서도 동일하게 표시되어야 합니다.

사이트의 서로 다른 페이지에서 각기 다른 스타일을 적용하는 것을 삼가야 합니다. 즉, 위 사례와 같이 사용자가 두 개 버튼이 동일한 버튼인지 의문을 품게 해서는 안 됩니다.

기능적 일관성(동작의 일관성)

동작의 일관성은 인터페이스 전체에서 개체가 동일한 방식으로 작동해야 한다는 것을 의미합니다. 즉, 버튼 및 메뉴 항목과 같은 인터페이스 컨트롤의 동작은 변경되지 않아야 합니다. 사용자는 예상하지 못한 것을 경험하거나 기존 동작이 바뀌는 것을 꺼립니다. 사용자의 예상대로 기능이 작동하지 않을 경우 사용자는 불편함을 느낄 수 있습니다. 이는 사용자의 습득성을 저하할 뿐만 아니라 인터페이스의 일관성도 떨어트립니다. 사용자에게 혼란을 주지 않기 위해 “동작의 변화를 최소화” 하여 인터페이스의 일관성을 유지해야 합니다.

지속적인 사용자 기대

사람들은 사용하는 앱/웹 사이트에 대한 특정한 기대를 하고 있습니다. 따라서 인터페이스를 디자인할 때에는 이러한 사용자의 기대에 부응하도록 해야 합니다. 인터페이스의 작동 또는 표시 방식에 대한 정답은 없습니다. 다만 사용자의 기대에 부응하는 인터페이스를 만드는 것이 중요합니다. 인터페이스 디자인 방식에 명확한 이점이 없다면 사용자의 요구를 바탕으로 디자인하십시오.

• 플랫폼 표준을 준수합니다. 제품은 플랫폼 가이드라인의 표준을 준수하여 개발되어야 합니다. 가이드라인은 사용자가 개별 인터페이스의 요소를 이해할 수 있도록 돕습니다.
• 패턴을 처음부터 만들지 마십시오. 대부분의 디자인 문제를 해결할 수 있는 솔루션은 이미 존재합니다. 바로 패턴을 사용하는 것입니다. 널리 이용되는 패턴은 표준이 되고, 대부분 사용자는 이러한 표준화된 패턴에 익숙합니다. 이러한 패턴 등의 다양한 방식을 고려하지 않고 자신만의 방식을 고수한다면 디자이너로서 엄청난 실수를 범하게 될 수도 있습니다. 일반적으로 디자인 규범을 지키지 않는 경우 좋지 않은 사용자 경험을 제공하게 되며, 사용자에게 친숙하지 않은 제품을 제공하게 되어 사용성 문제에 직면할 수 있습니다.
• 용어를 새로 만들지 마십시오. 즉, 기존에 사용하던 용어를 바꾸지 마십시오. 사용자는 여러 앱과 사이트를 이용하므로 가능한 표준화된 용어를 사용하는 것이 좋습니다. 일반적으로 사용되지 않는 용어를 사용할 경우 사용자에게 혼란을 줄 수 있습니다.

대부분의 온라인 쇼핑 고객에게 익숙한 용어인 ‘장바구니’라는 용어를 ‘쇼핑센터’로 바꾼다면 사용자가 그 의미를 쉽게 이해하지 못하게 됩니다.

결론

오늘날 UI 디자이너의 목표는 사용자에게 친화적이고 사용자가 자유롭게 탐색할 수 있도록 돕는 인터페이스를 제작하는 것입니다. 미래에는 더욱 직관적이고 매력적이며 예측 가능한 인터페이스가 탄생하겠지만, 본 게시글에 소개된 대부분의 인터페이스 디자인 원칙은 분명 미래의 인터페이스에도 적용될 것이라 확신합니다.

출처 : 어도비블로그(https://blogs.adobe.com/creativedialogue/ko/design-ko/4-golden-rules-ui-design/)