좋은 인터페이스 디자인(UI디자인)의 8가지 법칙

메릴랜드 대학 HCI랩의 유명한 연구자, 벤 슈나이더맨(Ben Shneiderman) 교수

사용하기 편하면서도, 생산성이 있고, 전체적으로 훌륭한 인터페이스 디자인 결과물을 원한다면 벤 슈나이더맨(Ben Shneiderman)의 '인터페이스 디자인의 8가지 황금룰'을 참고해 보시기 바랍니다. 애플, 구글, 마이크로소프트는 이러한 벤 슈나이더맨의 황금룰을 가장 잘 반영하는 최고의 제품들을 만들어 내는 회사들로 볼 수 있습니다. 황금룰을 통해서 만들어진 특징들은 위에서 언급한 각 회사들이 가지고 있는 UI디자인 인터페이스 가이드라인을 통해서 확인할 수 있습니다. 이러한 황금룰들을 단순 컨셉이 아니라 시각적으로 실천하는 데에 성공하는 것은 각 회사의 제품을 더욱 성공할 수 있게 해주는 역할을 합니다. 이번 기사에서는 다음의 8가지 황금룰(법칙)들을 통합해서 수행함으로써 작업물의 결과를 높일 수 있는 방법을 소개하도록 합니다.

8가지 좋은 인터페이스 디자인의 법칙 (8 Golden Rules of Interface Design)

벤 슈나이더맨(Ben Shneiderman)(1947년 8월 21일 생)은 미국의 컴퓨터과학자이자 메릴랜드대학교 HCI연구소의 교수이기도 합니다. 그의 업적은 현대의 디자인 선구자인 도널드 노먼이나 제이콥 닐슨과 비견할만 합니다. 그가 저술한 유명한 책 "사용자 인터페이스 디자인하기:효과적인 HCI를 위한 전략(Designing the User Interface: Strategies for Effective Human-Computer Interaction)"에서 그는 8가지의 인터페이스 디자인 원칙을 소개한 바 있습니다.

더불어 아주 훌륭하게 벤 슈나이더맨(Ben Shneiderman)의 8가지 법칙을 반영함으로써 성공적인 제품을 만들어낸 애플 사의 케이스 스터디도 함께 참고하도록 합니다. 애플사는 그들이 만들어낸 제품들에서 찾을 수 있는 일관성과 직관성, 그리고 아름다운 디자인에 매우 큰 자부심을 가지고 있습니다. 2014년 부터 공개 중인 애플 사의 iOS 디자인 가이드라인은 이러한 벤 슈나이더맨(Ben Shneiderman)의 디자인 원칙을 어떻게 활용하고자 했는지에 대한 노력을 조금이나마 확인할 수 있는 결과물이라고 할 수 있습니다.

첫째. 일관성 (Consistency)

첫째는 일관성을 주기 위한 노력(Strive for consistency)입니다. 비슷한 상황이나 연속적으로 펼쳐지는 상황을 디자인할 때에 친숙한 아이콘이나 색상, 메뉴구조, 액션을 위한 이벤트(call-to-actioncs)와 그리고 사용자 흐름(user flows)를 활용해서 일관성을 확보하도록 노력해야 합니다. 정보가 전달되는 방식을 표준화하는 것은 사용자들이 한 번의 클릭이 아니라 계속적으로 상황을 지각하고 응용할 수 있게 해줍니다(새로운 액션에 대한 새로운 상징이나 기호를 학습하는 것 없이 말입니다.) 일관성은 사용자들에게 디지털 환경에 적응하고 목적을 달성하는 데에 매우 큰 도움을 주는 역할을 합니다.

애플의 개인용 컴퓨터 운영체제의 메뉴바는 80년대에도 있었고,
(Author/Copyright holder: StockSnap.io Copyright terms and licence: CC0)

이 메뉴바의 위치와 기본 디자인은 현재 2010년대 까지 이어져 오고 있습니다.
(Author/Copyright holder: StockSnap.io. Copyright terms and licence: CC0)

애플 사의 사례로는 애플 사가 맥킨토시 시절부터 유지해온 OS 최상단에 위치해 온 메뉴바를 들 수 있습니다. 80년대 부터 2010년대 까지 이어져 온 일관성이 우수하게 자리잡혀 사용자에게 친밀도와 사용성을 높여주는 좋은 디자인 사례라고 볼 수 있습니다.

둘째. 단축성 (Shortcuts)

숙련도가 높은 사용자에게는 단축키를 제공해야 합니다(Enable frequent users to use shortcuts).사용 횟수가 늘어나게 되면 과업(task)를 더 쉽게 수행하기 위한 더 빠른 방법이 필요하게 됩니다. 예를 들어, 윈도우와 맥 모두 복사/붙여넣기에 대한 단축키를 제공하고, 이를 통해 사용자들은 더욱 숙련된 사용자로 거듭날 수 있으며 보다 빠르고 쉽게 과업을 완료할 수 있습니다.

키보드 단축키는 사용자로 하여금 보다 빠르고 쉬운 과업 수행이 가능하게 합니다.
(Author/Copyright holder: StockSnap.io. Copyright terms and licence: CC0)

애플 사의 사례로는 마우스의 기능을 대체할 수 있는 키보드 단축키를 제공하는 것을 들 수 있습니다. 복사/붙여넣기/캡쳐 등의 맥OS에서 제공되는 단축키들은 사용자들이 보다 편리하게 시스템을 이용할 수 있게 해줍니다.

셋째. 유용한 피드백 (Informative Feedback)

유용한 피드백을 제공하라 (Offer informative feedback). 사용자들은 자신들이 어디에 위치해 있고, 무엇이 일어나고 있는지 반드시 알아야 합니다. 모든 액션들은 반드시 시기적절해야 하며, 사람이 읽을 수 있는(기계어가 아닌) 피드백이 예측 가능한 시간 안에 제공되어야 합니다. 이런 것의 좋은 사례로 여러 장의 설문지를 사용자가 작성할 때에 얼마나 많은 설문지를 작성했는지에 대한 과정 상의 피드백을 주는 것을 들 수 있습니다. 나쁜 사례로는 사람이 읽을 수 없는 에러코드를 표시하는 에러 메시지 팝업창을 들 수 있습니다.

이런 식의 에러코드는 사용자에게 아무런 의미를 지니지 못합니다.
(Author/Copyright holder: Google, Inc. Copyright terms and licence: Fair Use)

윈도우 미디어의 디자이너는 세번째 법칙을 준수했어야 합니다. 위와 같은 에러코드는 사용자들에게 무익한 정보만을 제공합니다. 읽을 수도 없고, 의미가 담겨 있지도 않습니다.

평상 시에의 폴더 선택 화면
(Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use)

파일을 드래그하여 옮길 때에 아이콘과 아이콘 이름 등의 그래픽에 변화가 생기는 피드백을 확인할 수 있습니다.
(Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use)

애플 사의 사례를 들면 파일을 폴더에 드래그하여 옮길 때에 폴더의 테두리 부분이 밝게 하이라이트되는 것을 확인할 수 있습니다. 이 같은 피드백을 통해서 파일의 이동 및 복사가 정상적으로 이루어질 수 있음을 사용자에게 알릴 수 있습니다. 더불어 파일을 드래그한 상태에서 클릭을 놓게 되면 폴더가 시각적으로 열리는 효과를 나타내면서 실제로 파일이 이동되는 것을 확인할 수 있습니다. 이를 통해 사용자는 다시 한 번 정상적으로 파일 이동이 완료됨을 확인할 수 있는 것입니다.

넷째. 대화 (Dialogue)

전달을 위해서 디자인으로 대화하십시오(Design dialogue to yield closure). 사용자들을 추측하게 하지 마십시오. 무엇을 해야 하는지 말하고, 그것을 하도록 유도하십시오. 예를 들면, 사용자들이 인터넷쇼핑을 할 때에 'Thank You'라는 말을 보게 되면 사용자들을 이를, 쇼핑이 마무리 됨과 동시에 정상적으로 구매가 되었다는 영수증처럼 인식하는 것을 들 수 있습니다.

작업 과정에서 지속적으로 사용자와 커뮤니케이션하여, 사용자에게 무슨 일이 일어나고 있는지 알게 합니다.
(Author/Copyright holder: Google, Inc. Copyright terms and licence: Fair Use)

애플 사의 사례를 보면, 프로그램을 설치할 떄에 나타나는 화면을 그 예로 들 수 있습니다. 우측의 움직이는 프로그레스 바는 설치가 진행 중임을 일종의 대화처럼 사용자에게 지속적으로 전달하는 역할을 합니다.

다섯째.  에러 대응성 (Error Handling)

간단하게 에러에 대응할 수 있게 하십시오(Offer simple error handling). 누구든 자기 자신이 틀렸다는 말을 듣고 싶어하지 않습니다. 특히 당신이 대상으로 하는 사용자들은 더욱 더 그렇습니다. 시스템은 반드시 멍청하지 않도록 최선을 다해 디자인될 필요가 있습니다만, 에러를 피할 수 없는 상황이라면, 사용자들에게 간단하면서도 직관적인 스탭-바이-스탭의 지침을 빠르고 쉬운 문제 해결을 위해 제공하도록 하십시오. 예를 들면 사용자가 입력하기를 깜빡하고 지나친 텍스트 필드에 빨간색 깃발을 표시하는 것과 같은 인터랙션을 들 수 있습니다.

무난한 톤으로 왜 에러가 일어났는지에 대해서 설명하고 있습니다. 거기에 더해 어떤 이유로 에러가 발생했는지에 대해 사람이 읽을 수 있는 문구로 서술함으로써 사용자에게 일종의 권한(control)이 있음을 전달하고 있습니다.
(Author/Copyright holder: Google, Inc. Copyright terms and licence: Fair Use)

안 좋은 사례로 윈도우의 오류 층은 '치명적인', '종결되어 버린' 등과 같은 부정적이고, 친숙하지 않은 언어들로 사용자들에게 겁을 주는 것을 확인할 수 있습니다.
(Author/Copyright holder: Manutencaonet Blogspot. Copyright terms and licence: CC BY 3.0)

사용자들은 대게 어떤 프로그램을 설치하면서 에러 메시지를 마주하곤 합니다. 이 떄에 어떤 톤으로 어느정도 지시적인 어투의 문구를 담아서 에러 메시지를 띄울 것인지는 매우 중요한 작업이라고 볼 수 있습니다. 왜냐하면 에러가 났다고 해서 사용자들을 처벌하는 듯한 메시지는 용납이 되지 않기 때문입니다. 그렇기 때문에 에러 메시지를 띄울 때에는 매우 신중한 작업이 필요하다고 할 수 있습니다. 무턱대로 에러코드를 날리면서 '알아서 해'라는 식의 메시지를 줄 수는 없는 노릇이기 때문입니다.

여섯째. 번복 가능성 (Permit reversal of actions)

액션을 쉽게 번복할 수 있게 하십시오 (Permit easy reversal of actions). 사용자들이 쉽게 자신들의 행동을 번복할 수 있게 해야 합니다. 이러한 '번복'은 다양한 시점에서 이루어질 수 있도록 하는 것이 중요하며, 간단한 하나의 동작이었든, 하나의 데이터 입력이든 여러가지의 행동이든 상관 없이 이루어질 수 있어야 합니다. Shneiderman이 말하기로는 이러한 '번복' 기능이 사용자들의 걱정을 완화하는 효과가 있으며 이를 통해 사용자들이 친숙하지 않은 기능들에 대해서도 더욱 쉽게 접근할 수 있게 돕는다고 합니다.

애플 사의 파인더를 보면 실행취소를 통해 해당 내용의 적용 사례를 확인할 수 있습니다.
(Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use)

일곱째. 권한 (Support internal locus of control)

내부적인 컨트롤 장소를 제공합니다 (Support internal locus of control). 사용자들이 액션(행동)의 시발점이 되도록 합니다. 사용자들이 디지털에서 벌어지는 일들에 대해서도 직접 컨트롤할 수 있다는 느낌을 주어야 합니다. 사용자들이 기대하는 대로 작동하는 시스템을 디자인함으로써 디자인에 대한 신뢰를 사용자들로부터 획득할 필요가 있습니다.

애플 사의 액티비티 모니터를 통해서 프로그램의 강제종료가 가능한 것을 적용 사례로 들 수 있습니다.
(Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use)

여덟째. 기억 보다는 인식 (Reduce short-term memory load)

단기기억에 대한 부담을 주지 마십시오 (Reduce short-term memory load). 사람의 주의력을 제한적이며 우리들은 대게 5개 정도의 항목에 대해서만 우리 뇌의 단기기억 저장장치에 저장할 수 있습니다. 그렇기 때문에 인터페이스는 최대한 단순해야 하며 적절한 정보 체계를 지니고 있어야 하며, 회상(recall) 보다는 인식(recognition)에 보다 초점을 맞추는 인터페이스가 디자인되어야 합니다. 사물을 인식하는 것은 회상하는 것 보다 언제나 더 쉬운 작용인데, 그것은 무엇을 인식한다는 것은 우리가 보다 확장적인 정보에 쉽게 접근하고 연관을 짓게 해주는 일종의 힌트를 인식하는 과정을 수반하기 때문입니다.

예를 들면 우리는 주관식 보다는 객관식 문제를 보다 쉽게 느끼는 경향이 있는데, 이것은 우리에게 인식과 연산만을 강요하지 무엇을 회상하는 것을 강요하지는 않기 때문입니다. 블룸버그지가 선정한 세계에서 가장 영향력 있는 디자이너인 제이콥 닐슨은 휴리스틱 평가법을 포함한 그의 여러가지 사용성 테스트 방법론으로 유명합니다. 회상 보다는 인식에 초점을 맞추는 것의 여부는 제이콥 닐슨의 휴리스틱 평가 기준에 들어있기도 합니다.

애플 사의 사례를 보면 아이폰의 아이콘 가로 배열을 들 수 있습니다. 일부 안드로이드 폰은 5~6개의 아이콘을 한 줄에 넣는 것을 확인할 수 있는 반면, 아이폰은 전통적으로 4개의 아이콘을 배치하는 것을 원칙으로 하고 있습니다. 이것은 인간의 단기기억의 한계가 5개 정도에 머무른다는 벤 슈나이더맨의 인터페이스 디자인 원칙을 반영한 것이라고도 볼 수 있습니다. 단기기억의 한계에 부담을 주지 않음으로써 쉽게 인식하고 사용할 수 있게 하는 인터페이스 디자인인 것입니다.
(Author/Copyright holder: Pixabay. Copyright terms and licence: CC0)

8가지 인터페이스 디자인 원칙 평가 문서

인터페이스 디자이너로서 위에 설명된 8가지 원칙에 대한 평가시트가 담긴 PDF파일입니다. 인터페이스에 대한 평가 지침서로 활용이 가능할 것입니다.

8가지 인터페이스 디자인 원칙 평가 문서 다운로드 : 
https://public-media.interaction-design.org/pdf/Shneiderman.s.Eight.Golden.Rules.Worksheet.pdf 

글을 마무리 지으면서

벤 슈나이더맨(Ben Shneiderman)의 8가지 인터페이스 디자인 원칙을 읽는 디자이너 분들 또한, 애플이나 구글, 마이크로소프트와 같은 훌륭한 인터페이스 디자인의 제품들을 만드는 디자이너로 거듭날 수 있기를 기대합니다. 매우 주요한 디자인 원리임과 동시에 디자인 과정 상에서 간과되서는 안 될 사항이라고 말씀 드리고 싶습니다. 

더 읽어 볼만한 글

벤 슈나이더맨(Ben Shneiderman)의 8가지 인터페이스 디자인 원칙에 대한 추가 글 :
바로가기

제이콥 닐슨의 10가지 사용성 휴리스틱에 대한 글 :
바로가기

애플의 iOS 인터페이스 디자인 가이드라인에 대한 링크 :

바로가기

레퍼런스

Author/Copyright holder: Marc Smith. Copyright terms and license: CC BY 2.0

*한국어 버전에서의 보다 효과적인 내용 전달을 위하여 원문 기사와는 저술 형식을 조금 달리하여 8가지 법칙과 애플의 수행 사례를 한꺼번에 소개했습니다. (For more effectively deliverying the content to Korean readers, I intergrated the 2 sections of the original post(8 rules section and Apple's case-study section). But I didn't change any inner-content. If it causes any problem, please let me know then I'll immediately fix it to the original content-layout.)

저작권 관련 정보 (License Info.)

원 저작 게시물 제목(Original Post Title) : Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces 원 저작 게시물 주소(Original Post URL) : URL Link 원 저작 게시물 제공(Original Post Provider) :  EUPHEMIA WONG, The Interaction Design Foundation 본 콘텐츠는 유용한 정보를 널리 알리려는 취지에서 해외 기사를 국문으로 번역하여 제공하는 포스트입니다. (This post is a translated content to Korean in purpose to spread good information more broadly over the globe.) 번역된 내용 상의 문제가 있거나, 저작권 침해 요소가 있다고 저작권자가 판단할 경우, 요청에 따라 언제든지 지워질 수 있습니다. (If the translated content has some problems itself or the original content provider/creator think posting the translated content here inappropriate, this can be removed immediately upon request.) 번역된 콘텐츠는 CC 4.0 기준을 따르며, 정보 공유 시 최초 저작자(원 저작 관련 내용)를 콘텐츠 내에 표기해 주어야 합니다. (The translated content follows CC 4.0 policy. When it's shared, the original content provider/creator has to be attributed in the content.)