운영체제(OS) 플랫폼 기반 내비게이션 설계

운영체제(OS) 플랫폼 기반 내비게이션 설계

운영체제(OS) 플랫폼에 따른 UI 가이드라인에 따라 내비게이션을 설계할 수 있다

모바일 UI 디자인 가이드라인을 고려한 내비게이션의 설계

1. 모바일 사용자 경험 가이드라인

일반적으로 모바일 앱 사용자들은 작은 스크린에 대한 불편함과 이로 인해 생기는 입력의 문제, 화면 정보 인지의 어려움 등을 경험하게 된다. 앞서 학습을 통해 알아보았듯이 운영체제가 다른 모바일 화면의 UI 구조 차이는 사용자 입장에서 사용성의 차이로 느끼게 된다. 이러한 앱의 구조 차이는 서로 다른 사용자 경험을 만들게 된다. 따라서 최근에는 iOS와 안드로이드 앱 모두 거의 같은 UI 디자인을 적용할 수 있는 중립적인 형태의 앱이나 하이브리드 앱을 선택하는 추세이다. 제이콥 닐슨은 서로 다른 모바일 사용자 환경 차이를 고려하여 사용자 경험 디자인 시 고려해야 할 사항을 다음과 같이 제시하였다

• 작은 화면에 맞는 짧고 간단한 콘텐츠로 구성해야 한다.
• 부차적인 콘텐츠는 보조 페이지로 옮기도록 한다.
• 상호작용 방식은 손가락 터치 입력 방식에 맞게 변경해야 한다.
• 기능 설정의 복잡도를 낮춰야 한다.
• 모바일 문구는 데스크톱 문구보다 간결해야 한다
• 화면 영역에서 중요한 것은 크게 나타내 터치를 쉽게 한다.
• 입력 요구 시 약어, 기본 값, 사용자 이력을 참조하여 적절한 내용은 미리 제안하도록 한다.
• 간단한 서식으로 필수적인 정보만 요구해야 한다

2. iOS 휴먼 인터페이스 가이드라인(human interface guidelines)

iOS 휴먼 인터페이스 가이드라인을 제정한 목적은 iOS 영역에 들어선 앱 디자이너와 개발자에게 권위 있고 믿음직한 디자인의 기준을 제공하기 위한 것이며, 이러한 디자인 지침들은 대량의 iOS 기초 이론과 기술 지도를 제공하고 디자인 개발팀이나 개인을 도와 단시간 내에 iOS 응용을 확립하는 데 있다. 애플(Apple)사의 iOS 휴먼 인터페이스 가이드라인의 원칙과 내용은 다음과 같다.

(1) 미학적 조화(aesthetic integrity)

미학적 조화란 앱이 얼마나 아름다운가를 측정하는 것뿐만 아니라, 앱의 외관이 얼마나 그 기능과 일치되는지를 측정하는 것이다.

(2) 일관성(consistency)

일관성이란 사용자들이 지식과 숙련된 능력을 하나의 앱에서 다른 앱으로 전달하게 하는 것이다. 또 일관성을 지키는 앱은 앱 전체의 구성을 사용자에게 통일감을 부여한 것이다.

(3) 직접 조작(direct manipulation)

화면에서 오브젝트를 조작할 때, 몰입감을 더 높이고 조작에 대한 결과를 빠르게 이해할 수 있게 한다.

(4) 피드백(feedback)

피드백은 사용자의 동작을 알려주고 결과 작업이 진행 중이라는 것을 확인시켜 준다. 사람들은 제어 기능을 조작할 때 즉각적인 반응을 기대한다

(5) 메타포(metaphors)

앱에서 가상 물체와 조작이 현실에서의 물체와 조작에 대한 은유라면, 사용자는 그 앱 사용 방법을 즉시 이해할 수 있다. 적절한 은유는 현실의 물체나 동작의 한계를 넘어서 적절한 사용 경험을 줄 수 있다.

(6) 통제권(user control)

사용자는 동작이나 제어가 본인에게 친숙하거나 예상할 수 있을 때 앱의 통제를 감지한다. 조작이 간단하고 직접적이라면 사용자는 쉽게 이해하고 기억할 수 있다.

3. 구글의 안드로이드 디자인 가이드라인(android design guidelines)

구글의 안드로이드 디자인 가이드라인을 제정한 목적은 다양한 플랫폼들의 사용자 경험을 통합하여 일관성 있고 직관적인 경험을 제공하기 위한 것이다. 안드로이드 디자인의 원칙은 다음과 같다.

• 아름다운 표면, 애니메이션 효과, 음향 효과 등의 다양한 방법으로 사용자를 즐겁게 해야 한다.
• 실제 물건은 버튼이나 메뉴보다 흥미롭다.
• 사용자 스스로 조작할 수 있게 한다.
• 글을 간단히 작성해야 한다.
• 글보다 사진을 사용한다.
• 최적의 조건은 제시하되 마지막 선택은 사용자가 하도록 한다
• 필요한 경우에만 메뉴를 보여준다.
• 사용자들의 위치 파악이 간단해야 한다.
• 사용자들의 기록을 저장한다.
• 모양이 같으면 동작성도 같아야 한다.
• 중요한 경우에만 사용자를 중단시킨다
• 문제가 생긴 경우 복구 방법을 명확히 제시해야 한다.
• 복잡한 일은 쉽게 할 수 있는 작은 여러 단계로 나눈다.
• 초보자를 전문가처럼 느끼게 한다
• 중요한 것을 빠르게 실행할 수 있도록 한다.

4. UI 가이드라인을 고려한 내비게이션 설계

OS나 안드로이드, 또는 중립적 형태나 하이브리드 앱의 방식 중 앱 개발 방식을 선택하여 사용자 중심의 내비게이션을 설계한다. 내비게이션의 기본 원칙을 준수하여 사용자에게 기본적인 목표 달성, 사용성 외에 사용자가 기대하는 수준 이상의 사용자 경험을 제공하는 것이 UX/UI디자인의 목표라는 것을 숙지하도록 한다. 내비게이션의 기본 원칙은 다음의 질문에 대한 명확한 답변이 이루어져야 함을 이해하여 설계에 반영하도록 한다.

• 내가 지금 어디에 있나?(Where am I ?)
• 내가 어디에 간 적이 있나?(Where have I been ?)
• 내가 어디로 갈 수 있나?(Where can I go ?)

5. 사용자와 앱의 목적을 고려한 내비게이션 설계

내비게이션 설계의 목적은 사용자의 앱 이용을 편리하고 편안하게, 그리고 혼동하지 않게하는 것이 핵심이다. 따라서 타깃 사용자 그룹의 멘탈 모델을 염두에 두고 설계하는 것이 관건이 된다. 따라서 운영체제별 디자인 가이드를 완벽하게 따르기보다는 타깃의 환경, 행동 특성 등 사용자 중심으로 내비게이션 시스템을 구축하는 것이 바람직하다. 예를 들어 타깃의 연령대가 높은 경우 사이트 전체에 걸쳐 글로벌 내비게이션을 적용하는 방법도 바람직하다. 내비게이션 시스템이 사이트의 초기 화면에서부터 모든 페이지에 노출되어 있어서 언제든 상위 메뉴로 접근할 수 있게 도와주기 때문에 앱의 이용에 익숙하지 않은 사용자들도 쉽고 친숙하게 앱을 이용할 수 있게 된다.

6. 이상적인 내비게이션 시스템을 위한 검토사항

• 간결한가? :
  최대한 간결하게 하여 사용자들이 오래 보아도 질리지 않도록 조잡한 요소를 없앤다.
• 사이트 구조를 한눈에 알 수 있는가?
• 내비게이션 레이블이 선명하게 보이는가? :
  내비게이션에 텍스트 레이블을 사용할 경우 직관적인 정보 전달이 가능하다는 장점이 있으나, 좁은 공간에 사용된 텍스트 레이블이 깨져 보이는 현상이 빈번하게 발생한다. 이런 경우 내비게이션 메뉴의 디자인 과정에서 텍스트에 안티앨리어싱 옵션을 끄고 웹에서 지원 가능한 폰트의 선택을 하여야 한다.
• 일관성이 있는가? :
  내비게이션의 모든 요소가 디자인 콘셉트에 부합하는지, 일관성이 있는지 점검한다
• 현재 나의 위치를 알려 주는가? :
  현재 사용자가 위치해 있는 곳이 사이트의 어느 부분인지 일말의 단서를 제공해주어야 사용자는 방향을 잃지 않는다.
• 운영체제별 내비게이션 기본 기능과 혼동되지 않는가? :
  안드로이드 앱의 경우, 하단에 내비게이션이 항상 고정되어 있다. 이 때문에 안드로이드 앱 사용자들을 이미 뒤로 가기 버튼 사용이 익숙할 것임을 예측할 수 있다. 따라서 뒤로 가기나 앞으로 가기 버튼을 추가로 제공할 때에는 운영체제별 UI 구조를 고려하여 제공해야 하고 기능의 배치가 중복되지 않도록 디자인하여야 한다.
• 내비게이션 레이블의 길이가 적절한가? :
  사용자에게 지나치게 많은 선택지를 제공해서는 안 된다. 현재 페이지에서 특정 페이지로 연결되는 버튼 등을 오남용할 시 사용자는 혼란스러워하게 될 것이라는 점을 염두에 두고 내비게이션을 설계하여야 한다.

UI 디자인 가이드라인의 정의

1. UI 디자인 가이드 작성의 이해

UI 디자인 가이드는 UX/UI 기획, UI 상세 설계가 완료된 화면을 토대로 해당 프로젝트의 화면 구현과 실물 개발에 필요한 이미지 리소스, 기본 인터랙션 규칙, 텍스트 크기, 기타 컴포넌트의 속성 및 위치 등을 정리한 문서이다. UI 디자인 가이드는 사용성, 접근성, 심미성 등의 고려를 통해 사용자에게 사용의 편리성과 접근성을 높이는 데 있다.

• UI 디자인 가이드 작성의 기본 원칙
  • 효율적인 업무지원이 가능하도록 설계해야 한다
  • 입력의 사용성을 높여야 한다.
  • 이해하기 쉽게 작성해야 한다.
  • 시각적으로 간결하게 작성해야 한다.
• UI 디자인 가이드의 요소
  • 사용자 경험에 대한 정의
  • 서비스의 핵심 기능
  • 호환성과 확장성
  • 정보소외 계층의 접근성
  • UI 디자인과 레이아웃 일관성
  • 이미지 사용에 대한 지침

2. UI 디자인 가이드의 필요성

UI 디자인 가이드는 UI 디자인을 개발하기 위해 개발자와 디자이너를 연결해 의사소통을 도와주는 중요한 협업 도구이다. 나아가 이를 통하여 효율적인 UI 관리와 디자이너, 소프트웨어 개발자, 품질 관리자 등 다른 관계자들과 원활한 의사소통을 위한 것이다. UI디자인이 사용자에게 최상의 사용자 경험을 제공하기 위한 다양한 문제와 요구를 해결하는 창조적인 사고의 과정이라면, UI 디자인 가이드는 이를 위해 지켜야 할 공통의 규칙을 정의한 문서라고 할 수 있다.

3. UI 디자인 가이드 작성 시 유의사항

(1) 완전성(complete)

최대한 빠진 것이 없도록 가능한 한 상세하게 기술해야 한다.

(2) 일관성(consistent)

앱의 목표와 시스템 요구사항, 사용자 요구사항, 화면 레이아웃 간에 일관된 흐름이 연결되도록 작성해야 한다.

(3) 이해성(understandable)

UI 디자인 가이드를 처음 접하는 사람도 이해하기 쉽도록 추상적인 표현이나 모호한 표현을 자제하고 전문적인 용어의 사용을 지양해야 한다.

(4) 가독성(readable)

문서 내용을 쉽게 읽을 수 있게 작성해야 하고, 표준화된 문서 템플릿을 정의하여 이후 버전의 갱신 시 지속해서 사용할 수 있도록 작성해야 한다.

(5) 수정 용이성(modifiable)

UI 디자인 가이드를 변경하는데 쉽게 작성하여 추후 수정 및 개선 사항을 문서에 반영 하는 것이 가능해야 한다.

(6) 추적 용이성(traceable)

UI 디자인 가이드 변경 사항들이 언제, 어떤 부분에 대해, 왜 변경하였는지 추적이 가능하도록 구별하기 쉽게 작성해야 한다.