UI를 제작할 때 고려할 점 15가지

UI를 제작할 때 고려할 점과 UI 평가 기준을 정리했습니다.

 

어떤 기준으로 UI를 만들어야할지 막막하다면, 사용 편의성을 높여줄 수 있는 5가지 항목을 체크리스트로 활용할 수 있습니다.

 

또한 프로토타입 단계에서 UI를 평가하는 휴리스틱의 10요소를 확인해서, UI가 잘 제작되었는지 평가 후 보완할 수 있습니다.

 

먼저, 어떤 기준으로 UI가 좋은지를 평가할 수 있는지 알아보겠습니다.

 

0. UI 평가의 기준

 

UI 평가는 '사람과 사물 또는 시스템간의 소통이 잘 되는가'를 평가하는 것입니다.

핵심적으로는 '정보 자원을 디자인을 통해 쉽게 소통할 수 있는가'를 평가합니다. 여기서 디자인은 미술적인 것만을 얘기하는 게 아니라, 설계적인 부분도 포함합니다.

 

UI를 평가할 때 구체적인 판단 기준이 되는 것은 '사용성'입니다.

 

사용성은 UX(사용자 경험)을 포함하는 개념이며, UI의 효율성 및 만족도 목표를 달성하기 위해 사용자가 이용할 수 있는 범위라고 할 수 있습니다.

 

이 글에서는 이러한 사용성을 향상시키고, 판단할 수 있는 척도를 알아봅니다.

사용 편의성을 향상하는 5가지 방법

 

UI를 제작할 때 제이콥 닐슨이 제시하는 다음 5가지 요소를 참고하면, 사용 편의성을 향상시킬 수 있습니다. 

 

1. 용이성

 

처음 사용하는 사용자도 목적을 달성하기 위해 시스템을 빠르게 익힐 수 있어야 합니다.

 

2. 효율성

사용법을 익히고 있는 경우, 매번 높은 수준의 작업을 잘 할 수 있는가를 평가합니다.

 

 

3. 기억성

 

완전히 익히지 않거나 오랫동안 사용하지 않았어도, 능숙하게 사용할 수 있도록 사용 방식이 기억하기 좋아야 합니다. 

 

4. 오류 방지

 

실수하기 쉬운 등의 오류가 없어야 하고, 있다면 다시 되돌리거나 취소할 수 있어야 합니다. 

 

 

5. 만족성

 

사용자가 즐겁게 사용할 수 있어야 하며, 이는 주관적일 수 있으므로 사용자의 견해를 묻고 객관적인 수치로 기록합니다.

위의 5가지 기준을 생각하며 UI를 제작하되, 실제로 어떠한지 사용자 테스트를 하려면 프로토타입 단계 정도에서 아래의 휴리스틱 평가로 다시 한번 점검할 수 있습니다.

 

 

휴리스틱 평가

 

UI 평가 방식으로 휴리스틱 평가라는 게 있습니다. 시스템 개발의 초기 단계에서 주로 사용하며, 그리스어로 '발견하다'라는 뜻을 가지고 있습니다. 

 

이 방식은 직관이나 경험에 기반해서 시스템을 이용할 수 있는지를 측정합니다. UI를 이용하면서 사용자가 문제를 해결하거나, 학습하고 발견하는 등의 행동이 용이한지 평가합니다.

 
다음의 휴리스틱 10 요소를 얼마나 준수해야 했는지에 따라, 결과를 분석해서 UI가 잘 제작되었는지 판단할 수 있습니다.

 

1. 시스템의 시각화 

 

시스템이 진행 중인 상황을 사용자에게 제공하는지를 평가 합니다. 사용자가 집중할 수 있는 시간이 길지 않으므로, 별도의 노력 없이 즉각적인 피드백이 제공되어야 합니다.

10초 이상이 되는 파일 다운로드나 로딩 중에는 진행 바와 같은 것들을 두어서, 어떻게 되어가고 있는지 상태를 알려주어야 합니다.

 

구체적으로는 다음과 같은 항목을 평가해볼 수 있습니다.

 

• 피드백이 있는가
• 명확한가
• 즉시 반응하는가

 

 

2. 현실 세계와 일치하는 시스템

 

현실 세계와 동떨어진 느낌을 주면 안 되고, 친숙한 언어와 개념을 사용해야 합니다.

 

사용자는 텍스트, 아이콘, 메뉴, 명령어, 그루핑, 시각화, 형태 등을 직관적으로 이해할 수 있어야 합니다.

 

구체적으로는 다음과 같은 항목을 평가해볼 수 있습니다.

 

• 일반적인 상식과 일치하는지
• 실생활에서 사용하는 용어인지
• 아이콘은 실제랑 비슷하게 표현됐는지
• 상식적인 논리에 따라 관계성을 가지고 분류되어 있는지
• 항목·계층이 상식의 논리에 따라 분류되어 있는지
• 사용자가 행동 후에 일어날 상황을 예측하기 쉽게 했는지

 

 

3. 사용자에게 자유와 주도권 제공

사용자가 실수를 할 수 있게 되었을 때, 이를 취소하거나 재실행할 수 있게 해야합니다. 또한 자유롭게 시스템을 통제할 수 있어야 되고 상황을 논리적으로 이해할 수 있어야 합니다.

 

구체적으로는 다음과 같은 항목을 평가해볼 수 있습니다.

 

• 취소 기능을 제공했는지
• 자주 사용하지 않거나 생소한 기능에는 설명을 제공했는지
• 다양한 방식으로 작업을 수행할 수 있는 자유도를 제공했는지

 

 

4. 일관성과 표준성

 

시스템에서 사용하는 용어, 정보의 표현 방법, 인터페이스에는 일관성이 있어야 합니다. 사용자가 같은 행동을 했을 때 같은 피드백을 제공해야 하며, 특히 용어에 있어서 일관성을 유지해야 합니다.

 

일관성을 유지함으로써 시스템의 정체성을 구축할 수 있으며 이는 사용자가 익숙함을 시스템 사용에 있어서 익숙함을 느낄 수 있게 해줍니다. 

 

구체적으로는 다음과 같은 항목을 평가해볼 수 있습니다.

 

• 정보의 구조, 정보, 표현이 일관적인지
• 각 화면의 레이아웃이나 구조가 비슷한지
• 메뉴와 명령어의 이름, 약자 등이 일관적인지
• 메뉴와 오류 메시지등이 일관적인지
• 아이콘이나 스타일 구도 색감 등이 업계 표준에 부합하는지

 

5. 오류 예방

 

오류가 발생하면 안내 메시지를 주는 것도 중요하지만, 애초에 사용자가 실수할 수 있는 경우를 예측해서 오류를 예방하는 것이 더 중요합니다.

 

구체적으로는 다음과 같은 항목을 평가해볼 수 있습니다.

 

• 오류가 발생할 수 있는 조건을 제거했는지
• 혼동할 만한 요소를 최소화했는지
• 동작할 수 없는 요소를 숨겼는지
• 심각한 오류가 발생할 때는 결과를 경고하고 재확인했는지
• 오류가 발생하기 쉬운 입력 필드에 예시를 제공했는지

6. 직관적인 디자인

 

시스템을 사용하기 위해서 공부를 하거나 외우는 게 필요하다면 사용자는 부담스러울 것입니다. 그러므로 이해하거나 기억하려고 노력하지 않아도 사용할 수 있도록, 직관적인 디자인으로 시각화해야 합니다. 

 

구체적으로는 다음과 같은 항목을 평가해볼 수 있습니다.

 

• 필요한 정보를 쉽게 찾을 수 있는지
• 의미를 정확히 파악할 수 있는 명칭을 사용했는지
• 논리적으로 유사한 항목들끼리 그룹핑 했는지
• 그룹핑한 요소의 대표 이름을 알기쉽게 표기했는지
• 계층 구조와 요소를 탐색하기 쉽게 구분했는지
• 사용자의 시선에 따라 자연스럽게 구조화했는지
• 각 요소들이 시각적으로 명확하게 구분되는지

 

 

7. 유연성과 효율성

 

사용자의 숙련도나 환경에 따라서 더 심화적인 기능을 사용할 수 있게 하거나, 시스템의 기본 설정을 변경할 수 있어야 합니다.

 

이를 통해 다양한 사용자가 사용할 수 효과적으로 사용할 수 있도록 시스템을 유연하게해야 합니다. 

또한 어떤 위치에 있어도 중요한 작업을 빠르게 실행할 수 있어야 되고, 반복 작업은 자동적으로 하는 등 효율적이어야합니다. 

예를 들면, 텍스트 등을 입력할 때 다음 입력 필드로 커서가 자동으로 이동하는 등 작은 부분에서도 사용자의 불편을 없애줄 수 있습니다.

 

 

8. 간결하고 미학적인 디자인

 

UI에서 불필요한 정보를 제거해, 간결하면서도 아름다워야 합니다. 핵심은 중요하지 않은 것은 배제하고 중요한 것을 강조하는 것입니다.

 

구체적으로는 다음과 같은 항목을 평가해볼 수 있습니다.

 

• 최소한의 간결한 단어와 구조로 의미를 전달하는가
• 색, 폰트, 이미지, 메뉴가 심리적으로 조화로운가
• 불필요한 입력을 요구하지는 않는가

 

9. 오류 인식, 복구의 용이성

 

사용자가 스스로 오류의 원인을 진단하고, 복구할 수 있도록 해야합니다. 위에 5번에서 소개한 '오류 예방'이 되지 않았을 경우에, 발생한 오류에 대해서 사용자가 대처할 수 있는 방법이 안내되어야 합니다.

예를 들면, 검색창에 단어를 잘못 입력했을 때 단순히 결과가 나오지 않는 것보다는 적합한 단어를 제시하는 방법 등이 있습니다. 

 

10. 도움말 설명서

 

설명이 필요없이 모든 기능을 이용할 수 있으면 좋겠지만, 이해하지 못한 사람들과 더 자세히 알고싶은 사용자를 위해서 도움말이나 설명서가 필요합니다. 

사용자가 도움말이나 설명서를 통해, 자신이 하고 싶은 작업에 대한 정보를 쉽게 찾아서 수행할 수 있도록 해야 합니다. 

도움말을 구체적으로 나열하는 것도 좋지만, 지나치게 분량이 길어지면 부담스러울 수 있으니 적당히 하거나 순차적으로 제작해야합니다.

 

• 사용자가 도움말을 잘 찾을 수 있는가
• 실제 사용자가 이용하는 예시를 드는가
• 기능이나 문제해결을 검색하기가 쉬운가
• 원하는 작업을 하기 위해 따라 할 수 있는가
• 도움말과 작업 시스템 간에 전환이 잘 되는가

 

 

평가 내용 분석하기

 

피실험자들에게 자유롭게 의견을 듣되,  앞의 10가지 항목에 해당하는 항목에 임의로 점수를 매길 수 있습니다. 만약 피실험자가 전문가라면 바로 휴리스틱 평가 점수에 점수를 매겨서 작성할 수 있습니다. 

 

 

점수는 0점에서 4점까지 있습니다.

 

• 0점 : 문제가 없음
• 1점 : 외형적인 문제
• 2점 : 사소한 문제
• 3점 : 중요한 문제 (가급적 수정)
• 4점 : 심각한 문제 (반드시 수정)

 

산출된 점수를 우선순위에 따라 개선할 수 있습니다.

 

예를 들면, 도움말 부분에서 3점을 받았어도 대부분의 사용자는 도움말 없이도 수행이 가능하다면 후순위로 작업할 수 있습니다.

 

개선에 필요한 노력이 얼마나 드는지, 얼마나 자주 있는 문제인지, 영향력이 어떤지, 지속되는지 등에 따라 우선순위를 정하고 해결책을 논의합니다.

 

 

단, 휴리스틱 평가는 주관적인 평가이기 때문에 평가하는 사람의 지식이나 경험의 폭에 따라 결과가 달라질 수 있습니다.

 

하지만 많은 비용을 들이지 않고도 비교적 정확한 결과를 얻을 수 있다는 장점이 있어,  UI 평가 겸 개선 도구로 유용하게 사용할 수 있습니다.

 

 

UI를 사용성 좋게 만드는 것도 중요하지만, 제작하려는 UI가 어떤 인터페이스와 종류에 적합한지 확인해보는 것도 좋을 것 같습니다. 이에 대해 정리한 글이 있으니 참고해보세요.

 

UI 종류

 

 

이상으로 UI를 제작할 때 고려할 점과 UI 평가 기준인 휴리스틱 평가에 대해 정리해보았습니다. 읽어주셔서 감사합니다.