37
이이이 이이 , 이이이이이 웹웹웹 , 웹웹웹웹 웹웹웹웹 웹웹웹웹 웹웹 웹웹웹 : Eileen

내비게이션

Embed Size (px)

Citation preview

Page 1: 내비게이션

이동의 기술 ,내비게이션

웹기획 , 사용자를 배려하는 합리적인 생각발표자 : Eileen

Page 2: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 3: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 4: 내비게이션

정의 사람들이 원하는 정보를 쉽게 찾는 방법 제공 그 정보를 어떻게 경험할 것인지를 결정

기본 요소 사용자의 현재 위치 , 사이트의 전체 구조 정보 ,

원하는 곳으로 쉽게 이동 , 정보 탐색 용이

1. 웹 내비게이션

Page 5: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 6: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 7: 내비게이션

2. 예측 /컨트롤 가능한 내비게이션

(1) 예측 가능한 내비게이션

(2) 컨트롤 가능한 내비게이션

Page 8: 내비게이션

사용자의 의도된 행동에 따른 결과를 예측

(1) 예측 가능한 내비게이션

Page 9: 내비게이션

예측 불가능한 내비게이션 사례 - 한화 그룹 사이트

클릭시

Page 10: 내비게이션

한화그룹 사이트 - 일관성의 부재

클릭 시 계열사의 홈페이지로 링크

Page 11: 내비게이션

한화그룹 사이트 - 일관성의 부재

계열사의 홈페이지가 존재

어느 곳에서도 한화 쪽지를 찾아볼 수 없음

Page 12: 내비게이션

한화그룹 사이트 - 사업군 선택메뉴

한화의 메인 페이지에서 사업군의 메뉴 선택 불가 금융 사업군으로 이동한 후에야 가능 사업군을 클릭하면 맵이 이동될 것이라는 사용자의 예측에서 벗어남

Page 13: 내비게이션

정의 사용자가 정교하게 마우스를 이동하지 않아도

원활하게 이동할 수 있어야 함

(2) 컨트롤이 용이한 내비게이션

왜 이렇게 원하지 않는

메뉴가 열리는 거야 !!

Page 14: 내비게이션

컨트롤이 어려운 사이트 사례 - 롯데홈쇼핑 1

Page 15: 내비게이션

컨트롤이 어려운 사이트 사례 - 롯데홈쇼핑 2

Page 16: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 17: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 18: 내비게이션

원하는 곳으로 빠르게 이동 가능해야 함 로딩 속도로 인한 장시간 소요 메뉴 분류의 적절성

3. 효율적인 내비게이션

로딩으로 인한 시간 지연 사례 - 삼성에버랜드

Page 19: 내비게이션

복잡함이나 혼란함을 주어서는 안됨혼란함을 야기하는 내비게이션 사례 - 삼성에버랜드

하단에 메뉴바 존재

상단으로 메뉴바가 옮겨짐

Page 20: 내비게이션

혼란함을 야기하는 내비게이션 사례 - 삼성에버랜드

대분류의 메뉴를 클릭함에 따라 메뉴바가 계속 해서 바뀜

Page 21: 내비게이션

사용자가 클릭한 사항은 한번에 보여주어야 함중간단계를 둔 사이트 사례 - DAUM

Page 22: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 23: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 24: 내비게이션

한정적인 웹페이지 공간 페이지 스크롤 핵심만 요약

전체 내용의 페이지로 링크되는 경로 제공 링크를 제공하지 않을 시 문제점

사용자가 한참을 헤매게 됨 일부 요약된 내용에서 정보 탐색 정지

4. 일부 내용 제공 시 주의점

Page 25: 내비게이션

전체보기 , More 등의 버튼 제공

Page 26: 내비게이션

알아보기 어려운 ' 전체보기 ' 제공 사례 - 맥스무비

Page 27: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 28: 내비게이션

1. 웹 내비게이션

2. 예측 / 컨트롤 가능한 내비게이션

3. 효율적인 내비게이션

4. 일부 내용 제공 시 주의점

5. 지켜주면 좋은 사항들

CONTENTS

Page 29: 내비게이션

5. 지켜주면 좋은 사항들

(1) 페이지 내비게이션 기법

(2) ‘Top’, ‘맨위로’ 버튼의 사용

(3) 상단으로 이동하는 버튼의 사용

Page 30: 내비게이션

주의 사항 현재 사용자가 있는 페이지의 위치정보 다른 페이지로의 원활한 이동

(1) 페이지 내비게이션

마우스 오버로 어느 단계의 페이지로 이용할 것인지 정보를 알 수 있다

Page 31: 내비게이션

주의 사항이 무시된 사이트 사례 - 텐바이텐

사용자의 위치가 확실하게 보여지지 않음 화살표를 직접 클릭하기 전에는 어느 페이지로

이동될 지 알 수 없음

Page 32: 내비게이션

필요성 정보의 분량이 많아서 스크롤 발생 필요한 내용이 있는 곳으로 이동 용이

주의사항 페이지의 어느 위치에서도 상단으로 이동가능

해야 함

(2) 상단으로 이동하는 버튼의 사용

Page 33: 내비게이션

버튼이 하단에 고정되어 있는 사례 - Naver

버튼이 존재하지 않는 사이트 사례 - 네이트

Page 34: 내비게이션

주의사항 뒤로가기 버튼 사용 시 바로 이전 페이지 이동 목록 버튼 사용 시 보고 있던 목록 페이지 이동

주의사항의 부재 시 문제점 사이트의 메인 페이지로 이동 목록의 첫 페이지로 이동

(3) 뒤로가기 / 목록 버튼의 사용

Page 35: 내비게이션

목록보기 버튼의 문제 사례 - 디씨인사이드

Page 36: 내비게이션

예측 / 컨트롤 가능한 내비게이션창조성이나 예술성 보다는 효율성에 중점전체 내용을 볼 수 있는 버튼 제공간단하지만 지켜주면 좋은 방법

페이지 내비게이션 상단으로의 이동버튼 사용 뒤로가기 / 목록버튼의 사용

웹 내비게이션 기법

Page 37: 내비게이션

THANK YOU