[UI/UX] 성공적인 산업 자동화 프로젝트를 위한 7가지 UI 팁

사내 CCR(Central Control Room) 구축 업무 중 CCR용 웹 애플리케이션 개발을 시작하기에 앞서 HMI Philosophy를 정립하던 도중 좋은 자료를 발견하여 직접 한국어로 해석하여 공유한다.

나는 Inductive Automation사의 Ignition이란 프로그램을 사용해 개발하는데 해당 소프트웨어의 주요 개발사 중 하나인 Vertech라는 자동화 솔루션 업체에서 '7 UI TIPS FOR SUCCESSFUL INDUSTRIAL AUTOMATION PROJECTS'라는 주제로 백서를 만들었다.

https://www.vertech.com/ui-tips-white-paper

7 UI Tips for Successful Industrial Automation Projects

Introduction

UI(User Interface)란?

• Device 및 Application과 상호 작용하기 위해 사용하는 시각적 요소를 디자인하는 인간 중심적 접근 방법
  → 모바일 앱, 소프트웨어, 웹 사이트, HMI 등이 포함
• Fully-functional한 프로젝트도 좋지만, UI가 좋지 않으면 클라이언트의 기대와 목표를 충족시키지 못할 것

왜 중요한가?

• 좋은 UI는 사용자가 새로운 시스템을 빠르고 원활하게 배울 수 있도록 도와준다.
  • 교육 시간 Down, 좌절 Down, 효율성 Up
• 세심함 UI 디자인은 Operator가 시스템을 사용할 맛 나게끔 해준다.
  • 시스템이 쉽게 질리지 않고 오래 사용할 수 있도록 해준다.
  • 시스템을 더 많이, 더 길게 사용할수록 해당 시스템을 구축한 기회 비용을 더 늘릴 수 있다.
• 좋은 UI 디자인은 개발 시간을 절약해준다.
  • Vitamin T의 연구에 따르면, 개발자들은 50%의 시간을 초기에 좋은 디자인에 집중함으로써 피할 수 있었던 문제를 해결하는데 사용합니다.
• 생각하는 것 보다 UI를 테스트하는데에 많은 시간이 소요되지 않는다.
  • 상당히 적은 인원(5명의 실제 타겟 사용자)으로도 사용성 테스트(Usability Test)를 통해 UX 관련 문제 중 85%를 감지할 수 있다.
• 좋은 UI/UX는 경쟁사를 앞설 수 있게 해준다.
  • 설문조사에 따르면 현재 55%의 기업만이 애플리케이션에 대한 사용자 경험 테스트를 수행하고 있다.
  • 이 사용자 경험 테스트는 늘 비용과 시간을 소모하고 있다.

 

Improving your industrial application’s UI

UI 점수 매기기

UI가 좋은지, 나쁜지를 평가하는 5가지 방법이 있다.

1. 학습성 - Learnablity
   : 사용자가 큰 어려움 없이 업무를 수행할 수 있는가?
2. 효율성 - Efficiency
   : 인터페이스가 사용자의 작업이 빠르게 완료될 수 있도록 해주는가?
3. 기억력 - Memorability
   : 사용자가 애플리케이션을 종료한 후, 다음 번 방문때도 사용법을 기억할 확률이 얼마나 높은가?
4. 오류 - Errors
   : 인터페이스가 인적 오류를 어떻게 수정할 수 있게 해주는가?
   : 인터페이스가 인적 오류의 발생률을 줄이기 위해 어떤 단계를 수행하고 있는가?
5. 만족도 - Satisfaction
   : 사용자가 디자인과 상호작용 하는 것을 만족하는가?

시작하기 전에

주의 : UI 모범 사례를 적용한다고 해서 매끄러운 UX가 보장되는 것은 아니다. UI 디자인은 많은 연구, 브랜딩, 실전 및 디자인 맥락에 대한 이해를 기반으로 하기 때문에 'UI'라는 단어의 뜻 자체를 먼저 이해해보자.

U (User) : 사용자 이해하기

디테일하게 들어가기 전에 UI의 ‘U(User)’에 대해 이해해야 한다.

• What is their role?
  → 사용자의 역할에 대해 생각해봐야 한다. 그들은 운영자, 관리자, 분석가 중 어떤 역할을 가지고 있는가?
• What part of their job responsibility requires the system?
  → 시스템이 사용자의 요구 사항을 만족시켜주지 못한다면 과연 어느 부분의 업무가 잘 이루어지지 않을까?
• How does the system help them with their responsibilities?
  → 사용자들이 중요하게 생각하는 것이 무엇인가? 어떤 액션들이 그들의 업무에 있어서 가장 필요한 것인가?
• How often do they user the system?
  → 사용자들이 시스템을 매일 이용하는가? 아니면 거의 이용하지 않는가?

I (Interface) : 상호작용 정의하기

이제 사용자를 알게 되었으니 UI의 ‘I(Interface)’에 대해 이해해보자. 사용자는 인터페이스와 어떻게 상호작용 하는가?

시스템을 어디서 사용하고, 얼마나 자주, 어떤 장치로 사용하는가? 사용자이 plant-floor에 있는가? 근무 환경이 시끄럽고 더럽고 혼잡한가? 휴대전화 서비스가 불안정하고 대역폭이 제한된 아무도 없는 곳에 있는가?

• What device are they using?
  → 현장에서 모바일 기기를 사용하는가? Plant-floor에서 터치스크린 HMI를 사용하는가? 편안한 사무실이나 집이라면 어떤 기기를 사용할 것인가?
• How long is a session?
  → 통계를 빠르개 스캔하기 위한 10분인가? 모니터링 근무를 위한 8시간인가?
• What is the frequency of their sessions?
  → 매일? 매주? 매월? 불규칙적인가?
• How many tasks?
  → 이 작업(task)에는 탐색, 버튼 클릭, 값 변경, 트렌드 변경, 보고서 실행 등이 포함될 수 있다.
• Are those tasks focused on controlling, monitoring, or analyzation?
  → 이 작업들의 목적이 무엇인가? 제어, 감시 혹은 분석 목적인가?

 

7 Tips to improve usability

UI Tip #1 : Communicate Clearly

Before : Unclear user placement indicators

After : Clear user placement indicators

색상, 글꼴, 아이콘, 마우스 도구를 잘 선택하여 사용자의 주의를 이끌어야 한다.

사용자는 현재 어떤 화면에 있는지, 어디를 클릭할 수 있는지, 현재 화면에서 어디로 이동할 수 있는지를 알아야 한다.

UI Tip #2 : Avoid Clutter

UI 디자인에서는 공백(whitespace)과 친해져야 한다.

화면에 정보가 너무 많거나, 정보가 서로 너무 가깝게 배치되어 있다면 사용자는 혼잡하다고 느낄 것이며 이는 크기가 작은 디스플레이에 매우 치명적이다. 눈에 편안함을 주는 방법은 페이지에 처음부터 공백을 과하게 잡고 이를 서서히 줄여가며 편안한 단계까지 줄이는 것이다.

UI Tip #3 : Give Context

Actionable Information

맥락(context), 즉 상황에 맞는 정보를 제공하는 방법 중 한 가지는 바로 실행 가능한 정보(actionable information)를 사용하는 것이다. 이는 결정을 내리고 행동할 수 있을 만큼 충분한 맥락을 가진 정보를 적절한 시기에 적절한 사람에게 제공하는 것을 의미한다.

Color-based Ditinction

맥락을 전달하는 또 다른 방법은 색을 통해 구분해주는 것이다. 색은 정보를 빠르고 명확하게 전달할 수 있으며 사용자에게 데이터가 정상인지 비정상인지에 대해 알릴 수도 있다.

첫 번째 Before 이미지를 보면 사용자는 이러한 의문들을 가질 것이다.

• 이 막대 그래프들은 서로 관련이 있는가?
• 70.4이란 값은 좋은 값인가? 혹은 나쁜 값인가?
• 이 값들의 목표가 도대체 무엇인가?

두 번째 After 이미지를 보면 색상 기반의 맥락과 추가적인 요소인 변동성(Volatility)을 제공하고 있다. 일부 공정에서 가스 변동성은 매우 시급한 요소일 수 있다. 사용자는 첫 번째 막대의 변동성이 즉각적인 조치를 요구하고 있다는 것을 명확하게 캐치해낼 수 있다. 이것이 Actionable information의 예시다.

사용자는 진공 레벨의 변동성도 볼 수 있지만, 경고는 없다. 사용자는 상승 화살표와 하락 화살표를 기반으로 숫자의 트렌드를 쉽게 파악할 수도 있다.

이 모든 정보는 맥락을 짚어줌으로서 더 쉽게 해석할 수 있고 대응할 수 있다.

UI Tip #4 : Consider Element Placement And Size

Before : Too much information, Few visual-based entries, Unclear title and entry relationship, Wasted space.

After : Broken-up information, progress bar, visual data entry, clear title and entry relationship

컴포넌트의 배치와 크기를 고려하는 좋은 방법은 어느 것이 좋은 디자인 양식인지를 평가하는 것과 같다.

• 글꼴 (fonts)
• 색상 (colors)
• 크기 (size)
• 제목 (headings)
• 자동 완성 (auto-fill)
• 진행 표시줄 (progress bar)

첫 번째 Before 이미지를 보면 모든 값과 입력 부분이 같은 화면에 존재하는 것을 볼 수 있다. 일부 사용자들은 이러한 양식을 혼란스럽다고 느끼거나 심리적으로 압도당할 수도 있다. 사용자들은 하나의 화면에서 모든 정보를 입력해야 하고 어떤 입력란이 어떤 제목에 대응되는 것인지도 알 수 없다.

반면 두 번째 After 이미지는 다단계 양식을 적용해 정보를 일정 크기의 덩어리로 나누어 보여주고 있다. 이것은 우리의 뇌가 자연스럽게 한 입 크기의 정보를 처리하는 것을 좋아하는 점을 이용한 것이다. 추가적으로 다양한 시각 기반의 필드(슬라이더 바, 라디오 버튼, 체크박스 등)이 있으며 입력란과 제목이 더 가깝게 배치되어 어떤 입력란이 어떤 제목에 속하는지 명확해졌으며 결과적으로 더 이상 이 양식이 압도적이지 않게 되었다.

UI Tip #5 : Consider UI Learnability

UI 학습성을 높이는 최고의 방법은 바로 일관성을 유지하는 것이다.

• 버튼의 위치, 크기, 모양
• 화면에서의 검색 위치
• 클릭 가능한 것들(색상, 마우스 오버, 위치)
• 네비게이션
• 맥락적인 정보 사용
• 아이콘 및 단어 사용

사용성(usability) 및 학습성(learnability)를 테스트하려면 화면을 한 번도 보지 못한 사람에게 테스트를 요청해야 한다. 그들에게 처음 화면을 보여주고 상호 작용하게 하고, UI 설계자에게 다시 그들이 보고 상호 작용한 화면을 읽어달라고 하면 된다. 디자인의 일관성과 학습성을 평가할 때, 스스로에게 물어봐야 한다: “사용자가 다음 번에 이 시스템에 다시 방문했을 때 얼마나 쉽게 사용 방법을 기억해낼 수 있을까?”

예를 들어 첫 번째 Before 이미지를 보면 네비게이션이 있는데, 과연 사용자가 지금 어느 페이지가 선택됐는지 알 수 있을까? 두 번째 After 이미지에서 볼 수 있는 것 처럼 색상, 굵기, 또는 다른 시각적 요소를 사용해 사용자가 어느 화면에 있는지를 명확하게 보여줘야 한다.

네비게이션의 위치도 UI 학습성에 기여하는 요소이며, 이는 특히 모바일 애플리케이션에서 매우 중요하다. 많은 모바일 애플리케이션의 디자인에서 메뉴를 앱 하단에 배치해 항상 접근할 수 있게 설계하는 것이 아니라 ‘햄버거’아이콘에 숨기고 있다. 위 이미지를 보면 Apple, Traeger, Google, Southwest 및 Nest 모두 화면 하단에 네비게이션을 배치하고 있다.

UI Tip #6 : Build in Action Feedback

버튼을 클릭하거나 양식을 제출했을 때 작업이 성공적으로 수행 되었는지를 알 수 없는 경우가 자주 있는가? 좋은 UI 디자인은 작업 피드백을 디자인에 포함시킨다.

이 예시에서 사용자는 양식을 채우고 저장 버튼을 클릭한다. 하지만 양식은 오류를 발생시켰으나 이 오류에 대한 정보를 나타내지 않고 있다. 따라서 사용자는 제출을 위해 어느 부분이 오류인지, 어느 부분을 변경해야 하는지 알 수 없다.

문맥(context)이 이 문제를 해결할 수 있다. 실시간 오류 검사 및 피드백을 제공해 사용자가 즉시 조치할 수 있도록 해준다.

피드백이 필수적인 또 다른 예시는 바로 로딩 시간이다. 사용자는 2~3초 내에 어떤 반응을 보고싶어 하는데 응답이 아예 없으면 사용자는 좌절할 것이다. 이 문제를 해결하기 위해 로딩 아이콘을 사용할 수 있다.

UI Tip #7 : Make Decision-making Simple

유용한 정보로 순서를 매겨라.

예시를 보면 사용자는 무엇이 잘못 되었는지, 상태는 어떤지, 우선순위 및 담당자에 대한 정보를 볼 수 있다. 여기서 문제는 카드 하단의 액션 버튼들에 있는데, 이들은 너무 가까이 배치되어 있고, 과하게 밝은 색상이며 문맥이 부족하다. 사용자가 가장 처음 볼 버튼을 알려줄 수 있는 시각적 계층 구조가 없는 것이다.

사용자는 “START”가 무엇을 시작하는 것인지 모르고 “DELETE”는 “START”와 너무 가까이 배치되어 있다. 부정적인 작업과 긍정적인 작업은 서로 옆에 있으면 안된다. 이는 색맹, 색약 사용자에게도 매우 나쁜 UI다.

두 번째 After 이미지를 보면 버튼들이 단일 색상을 가지고 있는 것을 볼 수 있다. “START” 대신 “START WORK”라고 표시해 해당 버튼에 대한 문맥을 설명해주고 있다. “EDIT” 버튼은 이제 색상 없이 존재해 “START” 버튼과 구별 가능하다. 마지막으로 “DELETE” 버튼은 정 반대 액션인 “START” 버튼과 멀리 떨어져있고 “DELETE ORDER”로 표기해 추가적인 문맥을 설명해주고 있다.

Tertiary 버튼은 화면에 존재하되, primary 및 secondary 버튼과 혼용될 수 있는 위치에 있어서는 안된다는 것을 기억해야 한다.

 

Conclusion

사용자들은 직관적이고, 효율적이며 기억에 남고 시각적으로 만족스러운 경험을 원한다는 것을 기억해야 한다. 이 백서에서 언급된 7가지 팁을 구현하려면 그러한 경험을 만들어 내는데 큰 도움이 될 것이다.

이러한 간단한 UI 디자인 팁들은 디자인의 품질과 사용성을 크게 향상시킬 것이다. 사용자는 애플리케이션을 더 즐겁게 사용하고 시스템을 더 효과적으로 구현할 가능성이 높아진다.