웹기획 v090402
TRANSCRIPT
![Page 2: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/2.jpg)
STORY
02
이동의 기술 , 네비게이션
내비게이션은 예측가능하고 컨트롤할 수 있어야 한다 .
내비게이션은 효율적이지 않으면 거추장스러울 뿐이다 .
사용자가 클릭하면 가급적 한번에 보여주자 .
일부 내용만 제공한다면 ‘move’나 ‘전체보기’ 버튼을 제공하자 .
2009-04-02 [email protected] 2
간단하지만 지켜주면 좋을 몇 가지 내비게이션 사항들 .
![Page 3: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/3.jpg)
사용자가 예측 가능하게 내비게이션을 하자 .
한화 메인 페이지어디를 클릭하든 금융 사업군 페이지로 연결된다 .
2009-04-02
![Page 4: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/4.jpg)
내비게이션은 사용자가 쉽게 컨트롤 할 수 있게 하자 .
롯데 아이몰 카테고리 내비게이션다른 카테고리의 대중소 분류가 활성화사용자가 조심스레 마우스를 컨트롤
2009-04-02 [email protected] 4
![Page 5: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/5.jpg)
STORY
02
이동의 기술 , 네비게이션
내비게이션은 예측가능하고 컨트롤할 수 있어야 한다 .
내비게이션은 효율적이지 않으면 거추장스러울 뿐이다 .
사용자가 클릭하면 가급적 한번에 보여주자 .
일부 내용만 제공한다면 ‘move’나 ‘전체보기’ 버튼을 제공하자 .
2009-04-02 [email protected] 5
간단하지만 지켜주면 좋을 몇 가지 내비게이션 사항들 .
![Page 6: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/6.jpg)
내비게이션은 원하는 곳을 빠르게 이동 가능하게 해야 한다 .
11 번가의 즐거운 쇼핑
특정 지역 가게를 선택하면 로딩시간도 길게 걸리지만 상품 분류도 잘 이해되지 않는다 .
2009-04-02 [email protected] 6
![Page 7: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/7.jpg)
내비게이션은 복잡함이나 혼란함을 불러일으키게 하지 말아야 한다 .
삼성에버랜드 홈페이지처음 접속한 사용자는 무조건 이 애니메이션을 끝까지 봐야 한다 .
2009-04-02 [email protected] 7
![Page 8: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/8.jpg)
STORY
02
이동의 기술 , 네비게이션
내비게이션은 예측가능하고 컨트롤할 수 있어야 한다 .
내비게이션은 효율적이지 않으면 거추장스러울 뿐이다 .
사용자가 클릭하면 가급적 한번에 보여주자 .
일부 내용만 제공한다면 ‘move’나 ‘전체보기’ 버튼을 제공하자 .
2009-04-02 [email protected] 8
간단하지만 지켜주면 좋을 몇 가지 내비게이션 사항들 .
![Page 9: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/9.jpg)
사용자가 클릭한 사항은 중간단계를 두지 말고 바로 목적한 곳으로 갈 수 있게 처리하자 .
네이버 뉴스 페이지메인 페이지의 첫 번째 기사를 클릭하면 해당 기사의 최종 페이지로 가지 않고 관련 뉴스들이 있는 리스팅 페이지로 연결된다 .
2009-04-02 [email protected] 9
![Page 10: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/10.jpg)
사용자가 클릭한 정보는 찾기 쉽게 도와주자 .
G 마켓 베스트셀러 페이지메인에서 클릭하고 온 상품 위치가 바로 뜨도록 되어 있어 사용자가 별도로 앞단에서 클릭한 상품을 찾지 않아도 된다 .
2009-04-02 [email protected] 10
![Page 11: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/11.jpg)
비즈니스 목표를 위해 사용자의 의도를 왜곡시키지 말자 .
야후 USA 뉴스 페이지메인에서 클릭한 뉴스가 중간 단계 없이 바로 연결된다 .
2009-04-02 [email protected] 11
![Page 12: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/12.jpg)
STORY
02
이동의 기술 , 네비게이션
내비게이션은 예측가능하고 컨트롤할 수 있어야 한다 .
내비게이션은 효율적이지 않으면 거추장스러울 뿐이다 .
사용자가 클릭하면 가급적 한번에 보여주자 .
일부 내용만 제공한다면 ‘move’나 ‘전체보기’ 버튼을 제공하자 .
2009-04-02 [email protected] 12
간단하지만 지켜주면 좋을 몇 가지 내비게이션 사항들 .
![Page 13: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/13.jpg)
맥스무비 , 인터파크 , CGV, 네이버 등의 상영정보 코너
2009-04-02 [email protected] 13
전체가 아닌 일부 내용을 제공한다면 ‘더보기’나 ‘전체보기’ 버튼을 제공하자 .
![Page 14: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/14.jpg)
맥스무비 상영정보 코너탭에 마우스를 오버할 때마다 내용이 바뀌고 탭을 클릭하면 해당 정보의 전체 리스트 페이지로 이동한다 .
전체보기를 제공할 때는 알아보기 쉽게 하자 .
2009-04-02 [email protected] 14
![Page 15: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/15.jpg)
STORY
02
이동의 기술 , 네비게이션
내비게이션은 예측가능하고 컨트롤할 수 있어야 한다 .
내비게이션은 효율적이지 않으면 거추장스러울 뿐이다 .
사용자가 클릭하면 가급적 한번에 보여주자 .
일부 내용만 제공한다면 ‘move’나 ‘전체보기’ 버튼을 제공하자 .
2009-04-02 [email protected] 15
간단하지만 지켜주면 좋을 몇 가지 내비게이션 사항들 .
![Page 16: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/16.jpg)
페이지 내비게이션에서 숫자는 명확하게 표시하고 이동 방식을 다양하게 제공하자 .
GS 이숍의 페이지 내비게이션페이지 내비게이션이 편리하게 되어 있다 .
2009-04-02 [email protected] 16
![Page 17: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/17.jpg)
페이지의 제일 처음으로 가는 ‘Top’이나 ‘맨위로’ 버튼은 어디에서나 클릭 가능한 위치에 두어 사용자가 사용하기 편하게 하자 .
삼성몰 리스트 페이지
2009-04-02 [email protected] 17
![Page 18: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/18.jpg)
브라우저의 뒤로가기 버튼 , 목록 버튼은 사이트의 메인이나 목록의 첫 페이지가 아닌 바로 이전 페이지나 보고 있던 목록 페이지로 보내주자 .
페이지 리스트 중 3 페이지에 있던 토씨 도움말 내용 페이지목록 버튼을 누르면 도움말 제일 첫 페이지로 이동한다 .
2009-04-02 [email protected] 18
![Page 19: 웹기획 V090402](https://reader036.vdocuments.pub/reader036/viewer/2022062514/5588f979d8b42a04688b4672/html5/thumbnails/19.jpg)
Q & A