스마트 UIUX/UI 구현

UI 설계 검토하기

eheheheheheh 2020. 11. 24. 09:33

UI 검토 의견서 작성

UI 구현 표준 수립을 위하여 UI 검토 의견서를 작성할 수 있다.

검토 대상 UI에 대한 이해

1. 검토 대상 UI의 서비스 목적 파악

목표 서비스의 사용 목적을 이해하기 위하여 타깃 사용자층(예: 연령, 성별)과 서비스 용 도(예: 전자상거래사이트, 검색포털)를 파악함으로써 UI의 검토 기준을 적절하게 수립한다.

2. UI의 주요 검토 대상에 대한 이해

  • 레이아웃
    한정된 UI 공간 내에서 각종 UI 리소스들(예: 버튼, 시스템 바, 텍스트 등)을 일관성과 가시성을 유지하면서 효율적으로 배치하는 화면 구조를 레이아웃이라고 한다. UI는 시스템을 시각적으로 바라봤을 때 좌 상단, 우 하단 부분을 보면서 전체적인 크 기를 인식한다. 그 다음으로 여백, 폰트, 색상, 위치, 배열 등을 인식한다. 레이아웃의 구조는 구현되는 시스템의 목적에 따라 구분된다.
  • Center Section 레이아웃 구조
    UI의 가장 중요한 부분을 시스템의 큰 섹션 안에 넣고, 부수적인 툴과 콘텐츠는 주 위의 작은 패널로 밀집시킨다. 테이블, 웹 페이지, 그래픽 편집기 등 대부분의 애플 리케이션이 사용하는 구조이며, 크기, 컬러, 내용 등 중요항목을 돋보이게 하는 구 조이다.
  • Title Section 레이아웃 구조
    콘텐츠 타이틀을 시각적으로 강하게 표현하여 섹션을 분리함으로써 많은 콘텐츠를 담고 있으면서도 쉽게 이해할 수 있다.
  • 컬러
    타이포그래피는 텍스트의 생김새를 구성하는 배열(출처: https://ko.wikipedia.org/wiki/타 이포그래피. 2019.11.09 검색)을 뜻한다. 폰트의 수, 여백 및 자간을 조절하여 가독성을 높였는지 검토한다.
  • 내비게이션
    내비게이션을 통해 사용자는 원하는 페이지를 탐색할 수 있다. UI 검토 시 내비게이션 이 사용자의 행동 흐름 및 패턴에 맞게 설계되고 구현되어 있는지 검토한다

UI 검토 기준 수립

UI 검토 기준 수립과 관련하여 사용자가 원하는 형태로 서비스가 적절하게 구현되었는지 검토하는 사용성 측면의 검토와, 텍스트, 색상 등이 직관적으로 적용되었는지 검토하는 디 자인 측면의 검토가 필요하다.

1. 사용성 측면의 UI 검토 기준 수립

‘야콥 닐슨(Jakob Nielsen)의 사용성 10가지 원칙’ 이용한 사용성 측면의 검토 기준

검토 기준 기준 설명
시스템 상태의 가시성 시스템은 적절한 시간 내 적절한 피드백을 통해서 사용자 에게 진행 중인 상황에 대한 정보를 제공하는가?
시스템과 실제 세계의 매칭 시스템은 시스템적인 용어가 아닌 사용자에게 익숙한 단 어, 문장 및 개념으로 용어를 설명하는가?
일관성 및 표준 준수 사용자를 향해 용어, 피드백, 문장 등이 일관성을 유지하 고, 표준을 준수하는가?
오류 예방 좋은 오류 메시지보다 처음부터 문제가 발생하지 않도록 주의 깊게 설계되어 있는가?
기억보다 직관적인 기능 사용자가 정보를 기억할 필요가 없고, 사용자가 필요할 때 마다 눈에 잘 띄게 검색할 수 있는가?
유연성과 효율성 시스템에 대해 숙련된 사용자와 초보 사용자 모두 원활하 게 상호작용이 가능한가?
심플하고 아름다운 디자인 시스템과 상관 없는 정보가 포함되어 있지는 않은가?
도움말 및 문서 도움말 및 문서가 검색하기 쉽고, 사용자의 작업에 초점이 맞춰져 있고, 구체적인 단계가 제시되어 있는가?

2. 디자인 측면의 UI 검토 기준 수립

‘게슈탈트의 원리’를 이용한 디자인 측면의 검토 기준

검토 기준 기준 설명
근접성의 원칙 유사한 정보를 그룹화하거나 삭제한 상태로 레이아웃이 구성되어 있 는가?
공통영역의 원칙 정보의 그룹화를 통해서 시각적 계층구조 및 정리가 가능하도록 공통 영역이 구성되어 있는가?
유사성의 원칙 그룹 내에 색상, 질감 등을 이용하여 유사한 요소를 그룹화하거나 패 턴으로 인식시켜 특정한 의미나 기능이 인식되는가?
폐쇄의 원칙 사용자가 이해할 수 있는 적절한 양의 정보를 전달하기 위하여 복잡 성을 줄여서 정보를 전달하는가?
대칭의 원칙 사용자에게 질서와 안정감을 주기 위하여 정보들이 단순하고 조화롭 게 대칭적으로 정보를 제공하는가?
연속성의 원칙 사용자들이 정보를 쉽게 파악할 수 있도록 정보의 방향과 움직임의 연속성이 있는가?
동시 이동의 원칙 정보의 관련성을 인식하기 위하여 정보가 같은 방향으로 이동하는가?

UI 검토의견서 작성

  • 일반사항 작성
    시스템명과 날짜를 기입하고 검토자의 정보를 입력하며, 검토 대상 UI의 목적, 검토 관 점에 대하여 작성한다.
  • 검토항목 작성
    UI의 검토 기준에 따라서 UI의 일관성, 직관성, 표준 준수 여부, 심미성 등의 항목을 작성한다.
  • 결과 및 개선방안 도출
    UI의 검토 결과를 분석한 후 문서화하여 구현된 UI에 수정·보완을 수행한다.