티스토리 뷰

UI 제작하기

단위별 상세 체크리스트 작성

자가 검증을 위하여 단위별 상세 체크리스트를 작성할 수 있다.

체크리스트 작성하기

  • 체크리스트는 자가 검증을 통한 문제 해결 방법 중의 하나로, 디자인 문제의 평가나 UI 구현을 위한 판단의 기준이 되는 항목들을 조목별로 나열하여 구체화하는 작업이다.
  • 체크리스트를 통해 UI 구현을 위한 설계 단계에서, 개발자의 관점에서 소프트웨어 UI를 전반적으로 평가하고 사용편의성 문제점들을 효율적으로 찾아낼 수 있다.

체크리스트를 통한 UI 평가

  • 하나의 웹을 위한 설계 : 다양한 장비를 고려하여 설계한 콘텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다.
  • 웹 표준 준수 : 세계 곳곳의 제각기 다른 장비와 브라우저의 호환을 위해서는 표준을 준수해야한다.
  • 웹 네비게이션 최적화 : 작은 화면과 키보드, 제한된 대역폭에서는 단순한 네비게이션 과 입력이 매우 중요하다.
  • 그래픽과 색상 확인 : 이미지, 색상, 스타일은 콘텐츠를 빛나게 하지만 지원되는 포맷과 저사양의 화면 등을 유의하여야 한다.
  • 가볍고 간결한 사이트 : 가벼운 사이트는 효율성을 증대시키고 시간과 비용을 절약한다.
  • 사용자 입력 가이드 : 모바일 장비에서 키보드 및 각종 입력 방법은 비효율 적일 수 있 으며, 효과적인 설계는 이러한 입력을 최소화 할 수 있다.

단위별 상세 체크리스트 작성

  • 콘텐츠의 접근성(Contents Accessibility)
    1. 다른 기종(iOS, Android의 OS) 혹은 플랫폼(스마트폰, 테블릿 등) 사용에 대응할 수 있 는 한 벌의 UI로 제공하고 있는가?
    2. 다양한 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환성을 제공하는가?
    3. 인터넷 정보이용 취약계층(노인, 장애인 등)을 포함한 다양한 사용자 환경을 고려하여 동등한 접근을 보장하고 있는가?
    4. 개인인증이 있을 경우, 사용자에게 분명한 목적과 제한적 사용명시를 하고 있는가? 또한 개인인증의 절차와 방법이 적절한 예시와 함께 상세한 설명이 제공되고 있는가?
    5. 서비스 진입 후 특정 과업의 원활한 수행을 저해하는(재인증의 요구, 관련서비스 회 원가입이나 통합서비스로의 가입, 개인정보 마케팅활동 동의 등) 불필요한 제도적 요 소가 있는가?
  • 콘텐츠의 요소(Elements of Contents)
    1. 텍스트 제공 시, 콘텐츠의 위치 및 정렬(좌우, 가운데정렬 등) 기준을 제시하여 다양 한 크기의 디바이스에서 동일한 UI를 제공하고 있는가?
    2. 다양한 해상도의 디바이스에 맞게 제공할 수 있는 레이아웃, 컨포넌트, 목록 등의 정 보 간 간격이 크게 발생하지 않게 제공되고 있는가?
    3. 전체 서비스 내 공통적으로 적용되는 기본 Visual Framework(타이틀, 헤드라인(소제 목), 리스트, 내비게이션 바, 액션버튼 등)을 정의하여, 시각적 우선순위 및 다양한 화면을 구현하여도 기본적인 통일성을 유지하고 잘 맞게 설계되어 있는가?
    4. 페이지 구성과 요소의 배열이 정보구조를 추론할 수 있도록 사용자의 콘텐츠 사용목 적에 맞게 흐름에 맞게 결론에 도달할 수 있는가?
    5. 긴 내용의 페이지는 최대 D/P 라인 수 및 이후 처리방식으로 페이지 이동(번호, 다음 -이전버튼, 화살표)과 스크롤(자동 더 보기, 더보기 등)로 적절히 배분, 다음 행동을 명확히 제시하고 모든 디바이스에 공통적으로 적용하고 있는가?
    6. 글자크기와 폭, 자간과 높이, 요소간의 간격(터치영역의 간격)이 적절한 영역으로 설 정되어 있는가?
    7. 디바이스 화면 크기에 따라 버튼 간 정보 간 간격을 제공하되 지나치게 크게 발생하 지 않도록 제공하고 있는가?
    8. 모든 하이퍼링크 요소(아이콘, 메뉴, 텍스트 등)의 선택영역 표시(필수)과 비선택이 시 각적으로 구분되는가?
    9. 오류 발생 시, 오류의 원인과 발생위치를 사용자가 아닌 시스템을 알리고 대안을 명 확히 제시하고 있는가?
  • 디자인 요소 (Aesthetic Design)
    1. 텍스트 콘텐츠의 명도 대비 - 콘텐츠와 배경 간의 명도대비(4.5:1이상)는 높은 채도 군이나 극단적인 컬러 스팩트럼의 사용을 자재하여 정보의 판독성을 저해하지 않고 한도(피로감) 내에서 색채를 표현 하였는가?
    2. 브랜드 아이덴티티는 일관성이 있으며 통일성, 아이덴티티를 기준으로 궁극적인 그래 픽으로 서비스의 속성을 잘 전달하고 있는가?
    3. 주목을 끄는 기법(팝업, 배너, 플래시 등)의 최소화, 필요할 경우 제공시 주제와 부제 가 뒤바뀌지 않도록 제한적 사용하고 있는가?
  • 메뉴 네비게이션의 구조(Levels of Hierarchy for Contents)
    1. 메뉴의 개수와 무관하게 사용자가 메뉴구조와 원리를 파악하여 동선 계획을 세우기 쉬운 깊은 구성(많은 메뉴레벨)과 넓은 구성(많은 메뉴아이템)중 적합한 형태를 분명 하게 제시하고 있는가?
    2. 시스템이 중첩된 메뉴 레벨을 포함하고 있다면, 사용자로 하여금 ‘이전’ 메뉴로 돌 아가게 하는 매커니즘을 제공하는가?
    3. 서비스 내 주요화면은 사용자의 주 이용목적에 충실한 콘텐츠(빈번하고 중요한 것)를 우선으로 구성 되었는가?
    4. 메뉴 선택은 명확하고 단순한 언어로 설명하고 있으며, 사용자로 하여금 다음 행동을 유도하게끔 되어있는가?
  • 입력창 처리(Input Manipulation)
    1. 각각의 데이터 입력 화면은 짧고, 간단하고, 명확하게 제공하는가?
    2. 풀다운메뉴는 제한된 글자수 내에서 오해 없이 충분한 정보(말줄임표 혹은 생략된 표현, 알파벳 약자 등)를 보여주고 있는가?
    3. 사용자의 입력실수로 인해 양식을 벗어났을 때, 다음단계, 새로고침, 입력 취소, 완료 등에서 다시 작성중인 상태의 양식으로 돌아가기 등으로 되돌아 올 수 있는가?
  • 태스크 실행(Task execution)
    1. 과업시작을 알리는 메뉴(회원가입, 로그인, 시작하기, 설치하기 등)와 종료(로그아웃, 닫기)를 직관적으로 제시하고 있는가?
    2. 과업 완료 전까지 다수화면(회원가입)으로 구성된 경우 단계별 수정 및 이전 메뉴 선 택으로 변경이 가능한가?
    3. 중도에 시스템을 중단시킬 수 있는 ‘취소’ 기능을 제공하여 실행이전 상태로 되돌 아 갈 수 있는가?
    4. 과업수행을 위한 절차와 입력지시가 간편하고 명료하고, 입력내용이 길거나 어려운 경우 적절한 입력예시 및 지침을 제공하는가?
  • 문맥의 사용(Contexts of Use)
    • 서비스 내에서 쉽고 빠르고 효과적으로 수행할 수 있도록 순차적 이동경로(동선)를 제시하고 있는가?
    • 서비스가 사용자의 방문 목적 수행(창전환, 재인증 등)이 단절되지 않도록 돕고 있 는가?

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

TAG
댓글
댓글쓰기 폼