View
718
Download
1
Category
Preview:
Citation preview
이동의 기술 ,내비게이션
웹기획 , 사용자를 배려하는 합리적인 생각발표자 : Eileen
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
정의 사람들이 원하는 정보를 쉽게 찾는 방법 제공 그 정보를 어떻게 경험할 것인지를 결정
기본 요소 사용자의 현재 위치 , 사이트의 전체 구조 정보 ,
원하는 곳으로 쉽게 이동 , 정보 탐색 용이
1. 웹 내비게이션
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
2. 예측 /컨트롤 가능한 내비게이션
(1) 예측 가능한 내비게이션
(2) 컨트롤 가능한 내비게이션
사용자의 의도된 행동에 따른 결과를 예측
(1) 예측 가능한 내비게이션
예측 불가능한 내비게이션 사례 - 한화 그룹 사이트
클릭시
한화그룹 사이트 - 일관성의 부재
클릭 시 계열사의 홈페이지로 링크
한화그룹 사이트 - 일관성의 부재
계열사의 홈페이지가 존재
어느 곳에서도 한화 쪽지를 찾아볼 수 없음
한화그룹 사이트 - 사업군 선택메뉴
한화의 메인 페이지에서 사업군의 메뉴 선택 불가 금융 사업군으로 이동한 후에야 가능 사업군을 클릭하면 맵이 이동될 것이라는 사용자의 예측에서 벗어남
정의 사용자가 정교하게 마우스를 이동하지 않아도
원활하게 이동할 수 있어야 함
(2) 컨트롤이 용이한 내비게이션
왜 이렇게 원하지 않는
메뉴가 열리는 거야 !!
컨트롤이 어려운 사이트 사례 - 롯데홈쇼핑 1
컨트롤이 어려운 사이트 사례 - 롯데홈쇼핑 2
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
원하는 곳으로 빠르게 이동 가능해야 함 로딩 속도로 인한 장시간 소요 메뉴 분류의 적절성
3. 효율적인 내비게이션
로딩으로 인한 시간 지연 사례 - 삼성에버랜드
복잡함이나 혼란함을 주어서는 안됨혼란함을 야기하는 내비게이션 사례 - 삼성에버랜드
하단에 메뉴바 존재
상단으로 메뉴바가 옮겨짐
혼란함을 야기하는 내비게이션 사례 - 삼성에버랜드
대분류의 메뉴를 클릭함에 따라 메뉴바가 계속 해서 바뀜
사용자가 클릭한 사항은 한번에 보여주어야 함중간단계를 둔 사이트 사례 - DAUM
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
한정적인 웹페이지 공간 페이지 스크롤 핵심만 요약
전체 내용의 페이지로 링크되는 경로 제공 링크를 제공하지 않을 시 문제점
사용자가 한참을 헤매게 됨 일부 요약된 내용에서 정보 탐색 정지
4. 일부 내용 제공 시 주의점
전체보기 , More 등의 버튼 제공
알아보기 어려운 ' 전체보기 ' 제공 사례 - 맥스무비
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
1. 웹 내비게이션
2. 예측 / 컨트롤 가능한 내비게이션
3. 효율적인 내비게이션
4. 일부 내용 제공 시 주의점
5. 지켜주면 좋은 사항들
CONTENTS
5. 지켜주면 좋은 사항들
(1) 페이지 내비게이션 기법
(2) ‘Top’, ‘맨위로’ 버튼의 사용
(3) 상단으로 이동하는 버튼의 사용
주의 사항 현재 사용자가 있는 페이지의 위치정보 다른 페이지로의 원활한 이동
(1) 페이지 내비게이션
마우스 오버로 어느 단계의 페이지로 이용할 것인지 정보를 알 수 있다
주의 사항이 무시된 사이트 사례 - 텐바이텐
사용자의 위치가 확실하게 보여지지 않음 화살표를 직접 클릭하기 전에는 어느 페이지로
이동될 지 알 수 없음
필요성 정보의 분량이 많아서 스크롤 발생 필요한 내용이 있는 곳으로 이동 용이
주의사항 페이지의 어느 위치에서도 상단으로 이동가능
해야 함
(2) 상단으로 이동하는 버튼의 사용
버튼이 하단에 고정되어 있는 사례 - Naver
버튼이 존재하지 않는 사이트 사례 - 네이트
주의사항 뒤로가기 버튼 사용 시 바로 이전 페이지 이동 목록 버튼 사용 시 보고 있던 목록 페이지 이동
주의사항의 부재 시 문제점 사이트의 메인 페이지로 이동 목록의 첫 페이지로 이동
(3) 뒤로가기 / 목록 버튼의 사용
목록보기 버튼의 문제 사례 - 디씨인사이드
예측 / 컨트롤 가능한 내비게이션창조성이나 예술성 보다는 효율성에 중점전체 내용을 볼 수 있는 버튼 제공간단하지만 지켜주면 좋은 방법
페이지 내비게이션 상단으로의 이동버튼 사용 뒤로가기 / 목록버튼의 사용
웹 내비게이션 기법
THANK YOU
Recommended