표제지
국문 초록
목차
제1장 서론 10
1.1. 연구 배경 11
1.2. 연구 목적 13
1.3. 연구 범위 및 방법 13
제2장 모바일 환경의 변화 14
2.1. 변화하는 트렌드 15
2.2. 탭바(바텀 내비게이션)의 가이드라인 16
2.3. 탭바(바텀 내비게이션)와 정보구조 설계 19
2.3.1. 정보구조 설계 19
2.3.2. 모바일 앱의 복잡도 증가 24
2.3.3. 모바일 앱의 정보과부하 발생 25
2.4. 현용 모바일 앱의 탭바 유형 조사 28
제3장 유저 테스트 31
3.1. 실험 설계 32
3.1.1. 사용성 평가 원칙 수립 32
3.1.2. 탭바 유형 선별 33
3.1.3. 실험 앱 선정 35
3.1.4. 실험 테스크 설정 36
3.2. 리크루팅 38
3.3. Within-subject 38
3.4. 실험 방식 39
제4장 실험 결과 40
4.1. 분류별 결과값 차이 41
4.2. 응답 시간 42
4.3. 오류율 45
4.4. 만족도 46
4.5. 사용자 인터뷰 46
제5장 결론 48
5.1. 연구 결론 및 제언 49
참고 문헌 54
Abstract 55
[표 2-1] iOS 탭바와 Android 하단 내비게이션의 Guideline 정리 18
[표 2-2] 현용 앱 100 개 탭바 유형 분석 28
[표 2-3] 탭바 유형별 비교 30
[표 3-1] 사용성 원리 항목 비교 32
[표 3-2] 탭바 형태 분류 33
[표 3-3] 실험 테스크 목록 36
[표 3-4] 리크루팅 분류 38
[표 4-1] 전문성별 사용성 비교 41
[표 4-2] 운영체제별 사용성 비교 41
[표 4-3] 세부 그룹별 비교 42
[표 4-4] 응답 시간 비교 42
[표 4-5] 오류율 45
[표 4-6] 만족도 46
[그림 1-1] Tab bar, Apple, Human Interface Guidelines 12
[그림 1-2] Bottom navigation, Android, MATERIAL DESIGN 2 12
[그림 2-1] Drawer button 15
[그림 2-2] Top navigation bar 16
[그림 2-3] Bottom navigation 사용 시기, MATERIAL DESIGN 2 17
[그림 2-4] Bottom navigation 사용 금지 원칙, MATERIAL DESIGN 2 17
[그림 2-5] 웹 내비게이션영역의 이중메뉴분할방식 20
[그림 2-6] 유튜브 웹의 사이드 바 21
[그림 2-7] 유튜브 모바일 앱의 탭바 22
[그림 2-8] 모바일 앱의 정보구조 설계 (Information Architecture) 예시 23
[그림 2-9] 과거 인스타그램 앱의 탭바 23
[그림 2-10] 현재 인스타그램 앱의 탭바(Red) 및 로컬 내비게이션(Blue) 24
[그림 2-11] Toss app의 '전체'탭 25
[그림 2-12] 카카오톡(좌측), 다방(우측) 26
[그림 2-13] 페이스북 탭바의 과거(좌측)과 현재(우측) 27
[그림 2-14] 바텀 내비게이션 사용 금지 원칙, 목적지 3 개 미만의 경우 29
[그림 3-1] 페이스북 '더 보기' 탭의 기능들 35
[그림 3-2] 2021. 04. SNS/커뮤니티 앱 사용자 순위 36
[그림 3-3] 테스트 화면 일부 38
[그림 4-1] 5 Button 탭바 진입 뎁스 43
[그림 4-2] 6 Button 탭바 진입 뎁스 44
[그림 5-1] 기존 가이드라인의 규칙 준수하여 과부화가 된 정보구조 설계 50
[그림 5-2] 6 Button 탭바를 사용하여 비교적 단순화된 정보구조 설계 51
[그림 5-3] 각 탭에 종속된 로컬 내비게이션(우측 상단) 52