CCR(Central Control Room) 내부 구축 작업을 할 때 CCR용 웹 애플리케이션 개발을 시작하기 전 HMI 철학을 정립하면서 좋은 자료를 찾아 한국어로 번역해 공유했다.
저는 유도 자동화 프로그램인 Ignition으로 개발하고 있으며 소프트웨어의 주요 개발자 중 하나인 자동화 솔루션 회사인 Vertech에서 “성공적인 산업 자동화 프로젝트를 위한 7가지 UI 팁”이라는 제목의 백서를 만들었습니다.
https://www.vertech.com/ui-tips-white-paper
성공적인 산업 자동화 프로젝트를 위한 7가지 UI 팁
Ignition Perspective에서 애플리케이션을 개선하기 위한 간단하고 개발자 친화적인 팁으로 UI 디자인 학습 곡선을 단축하십시오.
www.vertech.com
소개
UI(사용자 인터페이스)란 무엇입니까?
- 장치 및 응용 프로그램과 상호 작용하는 데 사용되는 시각적 디자인에 대한 인간 중심 접근 방식입니다.
→ 모바일 앱, 소프트웨어, 웹사이트, HMI 등 포함 - 완전한 기능을 갖춘 프로젝트는 좋지만 UI가 좋지 않으면 고객의 기대와 목표를 충족하지 못할 것입니다.
왜 중요 함
- 좋은 사용자 인터페이스는 사용자가 새로운 시스템을 빠르고 원활하게 배울 수 있도록 도와줍니다.
- 교육 시간 단축, 좌절감 감소, 효율성 향상
- 신중한 UI 디자인은 운영자에게 시스템 사용의 맛을 제공합니다.
- 이를 통해 시스템을 빠르게 피로하지 않고 오랫동안 사용할 수 있습니다.
- 시스템을 오래 사용할수록 건설의 기회비용은 높아집니다.
- 좋은 UI 디자인은 개발 시간을 절약합니다.
- 비타민 T 연구에 따르면 개발자는 처음부터 좋은 디자인에 집중했다면 피할 수 있었던 문제를 해결하는 데 시간의 50%를 소비합니다.
- UI 테스트는 생각보다 시간이 덜 걸립니다.
- 상대적으로 적은 인원(실제 대상 사용자 5명)이라도 UX 관련 문제의 85%는 사용성 테스트를 통해 감지할 수 있습니다.
- 좋은 UI/UX로 경쟁사보다 한발 앞서 나갈 수 있습니다.
- 설문 조사에 따르면 현재 애플리케이션에 대한 사용자 경험 테스트를 수행하는 회사는 55%에 불과합니다.
- 이 사용자 경험 테스트는 항상 돈과 시간을 소모합니다.
산업용 애플리케이션의 사용자 인터페이스 개선
UI 등급
UI가 좋은지 나쁜지 평가하는 방법에는 5가지가 있습니다.
- 학습 가능성 – 학습 가능성
: 사용자가 큰 어려움 없이 작업을 완료할 수 있습니까? - 능률
: 사용자 인터페이스를 통해 사용자가 작업을 신속하게 완료할 수 있습니까? - 기억력 – 기억하는 능력
: 사용자가 애플리케이션을 종료한 후 다음에 방문할 때 사용 방법을 기억할 가능성은 얼마나 됩니까? - 오류 – 오류
: 인터페이스는 어떻게 인적 오류 수정을 허용합니까?
: 인터페이스는 휴먼에러 발생을 줄이기 위해 어떤 조치를 취합니까? - 만족 – 만족
: 사용자가 테마와의 상호 작용에 만족합니까?
시작하기 전에
참고: UI 모범 사례를 적용한다고 해서 원활한 UX가 보장되는 것은 아닙니다. UI 디자인은 많은 연구, 브랜딩, 실습 및 디자인 컨텍스트 이해를 기반으로 하므로 먼저 UI라는 단어의 의미를 이해합시다.
U(User): 사용자 이해
자세히 알아보기 전에 사용자 인터페이스의 “U(사용자)”를 이해해야 합니다.
- 그녀의 역할은 무엇입니까
→ 당신의 역할에 대해 생각하십시오. 운영자, 관리자 또는 분석가의 역할은 무엇입니까? - 시스템에서 요구하는 업무 책임은 무엇입니까?
→ 시스템이 사용자의 요구를 충족시키지 못하면 작업의 어떤 부분이 잘 작동하지 않습니까? - 시스템은 그들의 책임을 어떻게 돕습니까?
→ 사용자는 무엇을 높이 평가합니까? 그들의 업무에서 가장 시급히 필요한 조치는 무엇입니까? - 얼마나 자주 시스템을 사용합니까?
→ 사용자가 매일 시스템을 사용합니까? 아니면 거의 사용하지 않습니까?
I(인터페이스): 인터랙션 정의
이제 사용자를 알았으니 사용자 인터페이스의 “I(인터페이스)”를 이해해 봅시다. 사용자는 인터페이스와 어떻게 상호 작용합니까?
시스템을 어디에서, 얼마나 자주, 어떤 장치와 함께 사용합니까? 사용자가 작업 현장에 있습니까? 작업 환경이 시끄럽고 더럽고 혼잡합니까? 신뢰할 수 없는 셀 서비스와 제한된 대역폭으로 빈 공간에 있습니까?
- 그들은 어떤 장치를 사용하고 있습니까?
→ 현장에서 모바일 기기를 사용하시나요? 제조 현장에서 터치스크린 HMI를 사용하고 있습니까? 사무실이나 집에서 편안하다면 어떤 장치를 사용하시겠습니까? - 세션은 얼마나 걸립니까?
→ 빠르게 통계를 살펴보는 데 10분? 감시 교대에 8시간? - 귀하의 세션은 얼마나 자주 있습니까?
→ 매일? 매주? 월간 간행물? 불규칙한가요? - 얼마나 많은 작업?
→ 이 작업에는 탐색, 버튼 클릭, 값 변경, 추세 변경, 보고서 실행 등이 포함될 수 있습니다. - 이러한 작업이 제어, 모니터링 또는 분석에 초점을 맞추고 있습니까?
→ 이 작업의 목적은 무엇입니까? 제어, 모니터링 또는 분석 목적입니까?
사용자 경험을 개선하기 위한 7가지 팁
UI 팁 #1: 명확하게 의사소통
잘 선택된 색상, 글꼴, 아이콘 및 마우스 도구는 사용자의 관심을 끄는 것을 목표로 합니다.
사용자는 자신이 있는 화면, 클릭할 위치, 현재 화면에서 탐색할 위치를 알아야 합니다.
UI 팁 #2: 혼란 방지
UI 디자인은 공백과 친숙해야 합니다.
화면에 너무 많은 정보가 표시되거나 정보가 너무 가깝게 배치되면 사용자는 혼잡함을 느끼게 되어 작은 디스플레이에 치명적입니다. 눈이 편하도록 페이지의 여백을 처음부터 과도하게 두었다가 점차 편안한 수준으로 줄입니다.
UI 팁 #3: 컨텍스트 제공
실행 가능한 정보
컨텍스트, 즉 컨텍스트 정보를 제공하는 한 가지 방법은 실행 가능한 정보를 사용하는 것입니다. 즉, 의사 결정을 내리고 조치를 취할 수 있도록 충분한 컨텍스트 정보를 적시에 적절한 사람에게 제공하는 것을 의미합니다.
색상 기반 차별
맥락을 전달하는 또 다른 방법은 색상입니다. 색상은 정보를 빠르고 명확하게 전달할 수 있으며 데이터가 정상인지 비정상인지 사용자에게 알려줄 수도 있습니다.
첫 번째 비포 사진을 보면 유저들이 이런 질문을 할 것이다.
- 이 히스토그램은 서로 관련이 있습니까?
- 70.4가 가성비가 좋은가요? 아니면 나쁜 가치입니까?
- 이러한 가치의 목적은 무엇입니까?
두 번째 애프터 이미지를 보면 색상 기반 컨텍스트와 추가 요소인 변동성을 제공합니다. 가스 휘발성은 일부 공정에서 매우 중요한 요소가 될 수 있습니다. 사용자는 첫 번째 막대의 변동성이 즉각적인 조치가 필요함을 분명히 알 수 있습니다. 이것은 실행 가능한 정보의 예입니다.
사용자는 또한 진공 수준의 가변성을 볼 수 있지만 경고는 없습니다. 사용자는 상승 및 하강 화살표를 사용하여 숫자 추세를 쉽게 파악할 수도 있습니다.
이 모든 정보는 상황에 맞게 해석하고 응답하기가 더 쉽습니다.
UI 팁 #4: 요소 배치 및 크기 고려
구성 요소 배치 및 크기를 고려하는 좋은 방법은 좋은 설계 관행이 무엇인지 평가하는 것입니다.
- 글꼴
- 그림 물감
- 크기
- 헤드라인
- 자동으로 입력
- 진행 표시기
첫 번째 비포 이미지를 보면 모든 값과 입력이 같은 화면에 있는 것을 알 수 있습니다. 일부 사용자는 이러한 양식이 혼란스럽거나 심리적으로 압도적이라고 생각할 수 있습니다. 사용자는 한 화면에 모든 정보를 입력해야 하며 어떤 입력 필드가 어떤 제목에 해당하는지 알 수 없습니다.
반면, 2차 잔상은 계층화된 형식을 적용하여 정보를 특정 크기의 덩어리로 나누어 표시한다. 이것은 우리의 뇌가 자연스럽게 한 입 크기의 정보를 처리하는 것을 좋아한다는 사실을 이용합니다. 또한 다양한 시각적 필드(슬라이더, 라디오 버튼, 체크박스 등)가 있고 필드와 제목이 서로 가깝게 배치되어 어떤 필드가 어떤 제목에 속하는지 명확하게 하므로 양식이 더 이상 압도적이지 않습니다.
UI 팁 #5: UI 학습 가능성 고려
UI 학습성을 향상시키는 가장 좋은 방법은 일관성을 유지하는 것입니다.
- 버튼의 위치, 크기 및 모양
- 화면에서 검색 위치
- 클릭 가능 항목(색상, 마우스 오버, 위치)
- 항해
- 컨텍스트 정보 사용
- 기호 및 단어 사용
사용성과 학습성을 테스트하려면 화면을 본 적이 없는 사람에게 테스트를 요청하십시오. 그들에게 첫 번째 화면을 보여주고 상호 작용하게 하십시오. 그런 다음 UI 디자이너에게 보고 상호 작용한 내용을 검토하도록 요청합니다. 디자인의 일관성과 학습 가능성을 평가할 때 “다음에 사용자가 시스템을 방문할 때 사용 방법을 얼마나 쉽게 기억할 것인가?”라고 자문해 보십시오.
예를 들어 첫 번째 비포 이미지를 보면 탐색이 있습니다. 사용자는 지금 어느 쪽이 선택되었는지 알 수 있습니까? 두 번째 이미지에서 볼 수 있듯이 색상, 가중치 또는 기타 시각적 요소를 사용하여 사용자가 어떤 화면에 있는지 명확하게 보여줍니다.
내비게이션의 위치는 모바일 애플리케이션에서 특히 중요한 사용자 인터페이스의 학습 가능성에도 기여합니다. 많은 모바일 앱의 디자인은 항상 액세스할 수 있도록 메뉴를 앱 하단에 배치하는 대신 “햄버거” 아이콘에 숨깁니다. 위 이미지에서 Apple, Traeger, Google, Southwest 및 Nest는 모두 화면 하단에 내비게이션을 배치합니다.
UI 팁 #6: 작업 피드백 통합
버튼을 클릭하거나 양식을 제출할 때 작업이 성공했는지 여부를 알 수 없는 경우가 많습니다. 좋은 UI 디자인은 작업 피드백을 디자인에 통합합니다.
이 예에서 사용자는 양식을 채우고 저장 버튼을 클릭합니다. 그러나 양식에서 오류가 발생했지만 이 오류에 대한 정보는 표시되지 않습니다. 따라서 사용자는 어떤 부분이 오류인지, 어떤 부분을 변경해야 전송되는지 알 수 없습니다.
컨텍스트는 이 문제를 해결할 수 있습니다. 실시간 오류 확인 및 피드백을 제공하여 사용자가 즉각적인 조치를 취할 수 있습니다.
피드백이 중요한 또 다른 예는 로드 시간입니다. 사용자는 2~3초 안에 답을 보고 싶어하는데 답이 없으면 답답할 것입니다. 로딩 아이콘을 사용하여 이 문제를 해결할 수 있습니다.
UI 팁 #7: 의사 결정 간소화
유용한 정보에 따라 정리하세요.
이 예에서 사용자는 무엇이 잘못되었는지, 상태, 우선 순위 및 책임자에 대한 정보를 볼 수 있습니다. 여기서 문제는 지도 하단에 있는 작업 버튼이 서로 너무 가깝게 배치되고 색상이 너무 밝으며 컨텍스트가 부족하다는 것입니다. 사용자에게 어떤 버튼을 먼저 봐야 하는지 알려주는 시각적 계층 구조가 없습니다.
사용자는 “START”가 무엇으로 시작하는지 모르고 “DELETE”는 “START”에 너무 가깝습니다. 부정적인 작업과 긍정적인 작업이 나란히 있어서는 안 됩니다. 이것은 색맹 및 색맹 사용자에게 매우 나쁜 UI입니다.
두 번째 애프터 이미지를 보면 버튼이 단색인 것을 알 수 있습니다. 버튼에 대한 컨텍스트를 설명하기 위해 “START” 대신 “START WORK”가 표시됩니다. “EDIT” 버튼은 이제 “START” 버튼과 구별하기 위해 무색입니다. 마지막으로 DELETE 버튼은 반대 작업인 START 버튼과는 거리가 멀며 추가 컨텍스트를 제공하기 위해 “DELETE JOB” 레이블이 지정됩니다.
3차 버튼은 화면에 표시되지만 1차 및 2차 버튼과 혼합될 수 있는 위치에 있어서는 안 됩니다.
졸업 증서
기억하세요. 사용자는 직관적이고 효율적이며 기억하기 쉽고 시각적으로 매력적인 경험을 원합니다. 이 백서에 언급된 7가지 팁을 구현하면 이러한 경험을 만드는 데 큰 도움이 됩니다.
이러한 간단한 UI 디자인 팁은 디자인의 품질과 유용성을 크게 향상시킵니다. 사용자는 응용 프로그램을 사용하고 시스템을 보다 효과적으로 구현하는 것을 더 좋아할 것입니다.