사용자 인터페이스(User Interface, UI) 디자인은 사용자가 할 작업을 예측해서 인터페이스의 엘리먼트에 쉽게 접근하고 이해할 수 있는가, 그리고 손쉽게 사용할 수 있는가에 중점을 둡니다. UI는 상호작용 디자인, 시각 디자인, 정보 아키텍처의 개념을 통합하고 있습니다.

인터페이스 엘리먼트 선택

사용자는 이미 특정 방식으로 동작하는 인터페이스 엘리먼트에 익숙합니다. 그러므로 그 사용자 경험에 일관성이 있어 사용자가 예측할 수 있는 엘리먼트와 레이아웃을 선택하도록 합니다. 그런 선택은 사용자가 업무를 능률적이고 만족스럽게 완료할 수 있는데 도움 됩니다.

인터페이스 엘리먼트는 다음과 같지만, 이 목록이 전부는 아닙니다.

• 입력 컨트롤: 버튼, 텍스트 필드, 체크박스, 라디오 버튼, 드롭다운 메뉴, 목록 박스, 토글, 날짜 필드
• 탐색 컴포넌트: 브레드크럼, 슬라이더, 검색 필드, 페이지네이션, 태그, 아이콘
• 정보성 컴포넌트: 툴팁, 아이콘, 프로그레스 바, 알림, 메시지 박스, 모달 윈도우
• 컨테이너: 아코디언

내용을 표시할 때 여러 엘리먼트를 사용해야 적절한 예도 있습니다. 그런 상황에서는 균형을 찾는 것이 중요합니다. 예를 들어서 엘리먼트를 사용했을 때 공간을 절약할 수 있는 예도 있지만, 사용자에게 드랍박스 메뉴 또는 해당 엘리먼트에 무엇이 있는지 추측하도록 강제하기 때문에 정신적인 부담감을 줄 수도 있습니다.

인터페이스 디자인의 모범 사례

모든 디자인은 사용자를 아는 것에 근간을 둡니다. 그 이해는 사용자의 목표, 기술 수준, 선호도와 경향도 포함합니다. 사용자를 이해한 다음에는 인터페이스를 디자인할 때 다음 항목을 염두에 둬야 합니다.

• 인터페이스를 단순하게 유지합니다. 모범적인 인터페이스는 사용자에게 거의 보이지 않습니다. 불필요한 엘리먼트는 피하고 명확한 언어로 레이블이나 안내를 넣어줍니다.
• 일관성을 유지하고 일반 UI 엘리먼트를 사용합니다. 일반 엘리먼트를 UI에서 사용하면 사용자는 더 편하게 느끼고 더 빨리 적응할 수 있습니다. 언어, 레이아웃, 디자인을 아우르는 일정한 패턴을 만드는 일도 중요합니다. 이런 패턴은 사용자가 더 효율적으로 도구를 사용하는 데 도움이 됩니다. 사용자가 한번 사용법을 습득하면 같은 프로덕트의 다른 부분에서도 그 사용법을 동일한 방식으로 쓸 수 있어야 합니다.
• 레이아웃의 목적이 명확해야 합니다. 항목과 페이지의 공간적 관계를 고려합니다. 그리고 중요도를 기준으로 페이지의 구조를 잡아야 합니다. 주의 깊게 배치된 항목은 사용자가 가장 중요한 정보 조각에 집중하는 데 도움이 됩니다. 또한 빠르게 살펴보는 일도 쉬워지고 가독성도 개선됩니다.
• 전략적으로 색상과 텍스처를 선택합니다. 사용자가 각 항목에 집중하거나 집중하지 않도록 색, 빛, 대조나 텍스처를 활용할 수 있습니다.
• 타이포그래피로 계층 구조를 만들고 명료성을 높입니다. 어떤 서체를 사용할지 유의합니다. 다양한 크기와 서체, 정렬 방식은 사용자가 쉽게 훑어보게 만들며 시인성과 가독성을 높일 수 있습니다.
• 시스템이 지금 일어나는 일을 파악할 수 있게 합니다. 항상 사용자에게 위치, 동작, 상태의 변화나 오류를 알려줍니다. 다양한 UI 엘리먼트를 사용하며 다양한 상태와 상호작용하게 되는데 사용자가 현재 상황을 쉽게 파악할 수 있게 되면 진행 과정에서 사용자가 겪는 불편함을 완화하는 데 도움 됩니다.
• 기본 설정에 대해 고려합니다. 사람들이 어떤 목표와 기대를 갖고 이 프로덕트를 사용하는지 주의깊게 생각하고 예측합니다. 이 과정에서 사용자의 수고를 덜어줄 수 있는 기본 설정을 만들 수 있습니다. 이 과정은 특히 폼 디자인에서 중요한데 일부 필드를 미리 선택된 항목으로 할지 아니면 직접 일일이 입력하도록 할지 등 사용자의 사용성을 고려해볼 수 있습니다.

참고 문헌

• Jesse James Garrett’s The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition).
• Peter Morville and Louis Rosenfeld’s Information Architecture for the World Wide Web: Designing Large-Scale Web Sites.
• 10 Interface Design Fundamentals
• Effective Visual Communication for Graphical User Interfaces
• Using Light, Color, and Contrast Effectively in UI Design