티스토리 뷰

UI 설계 검토하기

UI 검토 의견서 작성

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

제이콥 닐슨(Jacob Neilson)의 UI 평가원칙

사용성 연구의 선구자이자 “사용성 공학(Usability Engineering)”의 저자 제이콥 닐슨 (Jacob Nielsen)은 그의 저서에서 다음의 UI 평가원칙을 제시하였다.

제이콥 닐슨의 UI 평가원칙

  • 메타포
    • 화면에 사용된 아이콘이 사용자들의 문화적,언어적 장벽들을 말보다 얼마나 더 잘 극복할 수있게 해주었는가
  • 직접조작
    • 사용자로 하여금 컴퓨터에 의해 묘사된 객체를 직접제어하고 있다는 느낌을 주는 정도로써 사용자가 자신의 행동으로부터 물리적인 결과를 기대할 뿐만 아니 라 요구된 행동이 실행되고 있음을 알려주는 방법에 관한 문제
  • 보고 선택하기
    • 사용자는 화면에 제공된 대안들을 선택함으로써 행동하게 되며 프로그램과의 상호작용에서 자신이 무엇을 하고 있는지를 직접 볼 수 있다.
  • 반응과 대응
    • 사용자에게 시스템이 무슨 일이 일어나고 있는지를 계속 알려주고 있는가, 작업을 수행할 때 반응을 가능한 즉각적으로 제공하여 시각적 혹은 청각적 신호를 제공하는가
  • 관대함
    • 사용자들이 편안하게 제품을 살펴볼 수 있는가, 시스템에 손상을 주지 않으면서 모든 일을 사용자가 갖도록 하는 것이 필요
  • 미적 완전함
    • 정보가 잘 조직되어 시각 디자인의 원칙에 일치하는가, 너무 많은 버튼이나 복잡한 아이콘으로 하여금 사용자에게 부담감을 주지 않는가
  • 사용자에 대한 이해
    • 대상을 삼고 있는 사용자에 대한 특성을 이해하고 제작되었는가
  • 접근 가능성
    • 불특정 다수를 사용자로 선정하지 않더라도 대상으로 삼고 있는 사용자 외에 다 가능성 른 대상층을 염두에 두고 있는가
  • 조직성
    • 일관성: 일관성 있는 시각요소들로 구성되어 있는가, 실세계와의 일관성을 유지하므로 사용자가 예측할 수 있도록 의미를 잘 전달하는가
    • 안정성: 일관성 있는 개념적 구조를 제공하는가
  • 경제성
    • 간결성: 커뮤니케이션을 위해 꼭 필요한 요소만을 디자인 하고 있는가
    • 명료성: 디자인된 모든 요소들의 의미가 애매하지 않은가
  • 의사 소통성
    • 보여줄 정보의 모습을 시각요소들을 사용하여 알기쉽게 조절하고 있는가

UI 검토 의견서 작성시

  • UI 검토 의견서 작성시 다음의 조건을 고려하여야 한다.
    1. 디자이너와 개발자 모두 쉽게 이해할 수 있도록 만들어졌는가
    2. 명시되어 있는 조건들은 디자이너와 개발자가 동의한 것인가
    3. 제안된 UI가 수행할 모든 기능이 명확하게 기술되어져 있는가
    4. 제안된 UI에 영향을 미치는 모든 제약 조건이 명시되어 있는가

검토 세부 사항

  • 화면해상도와 레이아웃
  • 그리드시스템 : 공간 규정에 대한 것으로, 페이지 구성 요소에 대한 기능 또는 내용에 의한 화면 영역 분할, 콘텐츠의 분할을 위한 기본 레이아웃 영역을 설정한다
    1. Top Area : 화면검색, 업무 메뉴 내비게이션, 단축 아이콘 툴바, 기능 및 설정 메뉴 등이 위치하는 영역
    2. Left Area : 업무메뉴, 처가 메뉴, 배너 등이 위치하는 영역.
    3. Content Area : 업무화면 영역
    4. Footer Area : 콘텐츠영역의 보조영역으로 필요에 따라 생성을 선택적으로 제공하는 영역
  • 메뉴구조 : 고정된 콘텐츠 영역을 확보하여 일관된 배치로 메뉴선택의 편의성을 제공하 고 각 업무를 위한 화면으로 원활한 이동이 가능하도록 하여 클릭수(터치수)를 최소화 하고 사용자의 편의성을 강화하는 효과적인 사용자 인터페이스로 메뉴구조를 제공하여 야 한다.
  • 컬러 : 컬러는 사용자 인터페이스에 있어서 기능적인 역할뿐 아니라 정체성의 중요한 역할을 수행한다. 일관성을 유지하기 위하여 모든 페이지에 발생하는 이미지 요소 및 시스템 컬러를 적용한다. 특별한 서비스나 콘텐츠의 강조 및 특별한 내용을 표현하기 위해서는 컬러 시스템의 강조 색상을 적용할 수 있다.
  • 타이포그래피 : 유형별로 일관성 있는 폰트 및 서식의 표준화가 필요한데 이는 명확한 가독성을 위한 폰트 스타일 즉, 자간, 장평, 패딩, 사이즈 등에 대한 표준이 정립되어야 한다.
  • 버튼 : 버튼의 세부가이드로 위치와 배치기준 그리고 레이블링 등의 디자인스타일에 대한 표준을 정립하여 사용자가 관리 인터페이스(MI)를 직관적으로 이해할 수 있도록 한다.
  • 아이콘 : 직관적인 아이콘을 사용하거나 중요정보는 텍스트와 아이콘을 병행하여 사용 한다.
  • 탭 : UI 화면에서 함께 구성되는 각각의 탭은 인과성, 일련순서, 종속 여부가 없어야 한 다. 기본적으로 선택되어 있는 탭은 사용빈도에 따라 혹은 작업 흐름에 준하여 선택되 어 있도록 한다.
  • 팝업 : 팝업은 메뉴화면을 보조하는 화면으로 상세 및 부가적 데이터 조회 및 연동데이 터 처리 등에 사용한다

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

TAG
댓글
댓글쓰기 폼