웹사이트(IA, Information Architecture) 기획
실용적인 웹사이트 구축 전략
- 합리적인 기준과 원칙에 따라 가장 실용적인 웹사이트 구축
- 웹사이트 구현을 위한 다섯 가지 지침(파이오니어 일렉트로닉의 윌리엄우드)
1) 높은 유용성 : 색인 가능성, 검색노출 기회의 확대(메타 태그 이용), 프린팅에 대한 고려, 네비게이션의 편리성
2) 폭 넓은 호환성 : 고정폭의 테이블 사용, 그래픽이미지는 가장 일반적인 색상을 유지, 다양한 인터넷 애플리케이션 지원
3) 유인성 : 읽기 쉽고 사용자들을 유인할 수 있도록 디자인
4) 유지관리의 편이성 : 사용자들에게 항상 새롭고, 시간적으로 적절한 시기를 놓치지 않는 콘텐츠 제공
5) 쌍방향적 영향력 : 즉각적인 쌍방향성을 극대화, 독자들이 이 사이트가 자신들을 위해 존재한다는 것을 느끼게 한다.
유저 인터페이스(User interface)
- 유저 인터페이스에서 시각적인 요소, 시각적인 전달이란 것은 대단히 중요한 위치를 차지
->( 행동을 위한 쌍방향적 반응을 위한 디자인)
웹의 유저 인터페이스 : 웹 사이트 유지 인터페이스 디자인에 있어 웹 사이트의 목적과 사용자의 컴퓨터 환경을 고려해야 하는 것 외에 간과해서는 않될 요소는 사용자의 습관이므로 공통적인 사용자 습관을 유저 인터페이스에 적용시켜야 한다.
성공적인 유저 인터페이스 : 성공적인 인터페이스를 구현할 때, 가장 중요한 것은 사용자와 쌍방향적 검증과정이다.
(사용자의 반응을 확인하고 사용자들의 요구에 귀기울여야 한다. 즉 고객 지향적이어야 한다. )
- 목적성(Objectivity) : 사이트의 목적에 맞게 인터페이스가 만들어져야 한다.
- 일관성(Consistency) : 전체적인 레이아웃이나 네비게이션 방법, 새강 등 일관성 유지
- 편리성(Convenience) : 표적대상이 되는 사용자들의 편리성을 도모
- 명료성(Clariy) : 혼란을 주지 않고 명확해야 한다.
- 유연성(Flexibility) : 사용자 컴퓨터 환경에 초점 즉, 대중화
- 직관적일 것(Intuitive): 사이트에 들어와 5~10초 이내에 무엇을 어떻게 해야할지 결정할 수 있도록 명확해야 한다.
- 지시적일 것(Guided) : 친절하게 안내하는 도우미처럼 친절하게 사이트의 기능과 콘텐츠에 대해 안내해야 한다.
- 단계적일 것(Step by Step) : 사용자들은 한꺼번에 많은 것이 제시되면 혼란스러워하므로 필요한 부분들만 제시해야 한다.
사이트 디자인 기획
- 새로운 매체, 발상의 전환 : 인터넷은 미친놈처럼 가파르게 성장하고 있고, 가치없이 변화하고 있다.
- 디자인의 핵심은 커뮤니케이션 : 문제를 발견하고 메시지를 전달할 수 있는 미적 요소와 순수한 정보의 균형을 이루는 해결책을 만들어 가는 것이 디자인이다.
기능중심의 사이트와 디자인 중심의 사이트
-> 기능중심의 사이트 : 호기심 많은 사람드리 찾고자 하는 정보를 가능한 손쉽게 찾을 수 있는데 목적
-> 디자인 중심의 사이트 : 동일한 정보를 제공할 때에도 경험적이고 미적인 요소를 사용
기반기술에 대한 이해 : 웹 기획자나 웹 마케터, 엔지니어 등은 모두 디자인 요소와 기술요소에 충분한 이해가 있어야 한다.
- 수준을 낮춰 관용을 베풀자 : 낙후된 시스템과 환경의 사용자들도 웹사이트를 보는데 어려움이 없도록 해야 한다.
- 속도, 웹 미학의 핵심 : CSS활용(그래픽을 사용하지 않아도 동일한 효과를 볼 수 있다.)
- 단순성, 웹 디자인의 핵심 : 일단 사용자가 웹사이트에 들어오면 대략 10초 이내에 느낌을 주고, 관심을 불러 일으키고, 웹사이트에서 떠나는 것을 막아야 한다.
-개성있는 분위기 : CSS활용(그래픽을 사용하지 않아도 동일한 효과를 볼 수 있다.)
- 웹사이트 디자인 팁 : 가장 중요한 원칙은 일관성을 유지하는 것이다.
-> 일관성 있게 로고를 배치하라.
-> 여러 페이지마다 같은 그래픽 이미지를 사용하라
-> 일관성, 일관성을 유지하라. (가능한 방법을 동원하여 웹 페이지마다 일관성을 유지)
-> 콘텐츠의 우선 순위를 피하라.(중첩 테이블대신 테이블을 여러 개로 쌓아 올리는 것이 좋다.)
-> 스크롤링 텍스트(scrolling text)를 피하라.(흐르는 문자열과 같은 트릭은 사용하지 않는 것이 좋다. )
-> 4GIF 법칙을 지켜라.( 한 페이지당 4개 이상의 GIF 파일을 사용하지 마라!)
-> 흰 여백을 활용하라.( 흰 여백을 잘 활용하는 것이 사이트의 혼란스러움을 피하는 데 도움이 된다. )
-> 기술적인 부담을 줄이도록 하라.(특정 브라우저에서만 지원하는 종속적인 특정 기술에 의존하지 않는 것이 좋다.)
-> 디자인 템플릿을 이용하라.(사이트 디자인의 일관성을 유지시키는 데 주요한 역할을 한다.)
-> HTML 문서 작성시 주석(Comments)을 달 것
-> 적절한 그래픽을 사용(Index color, GIF포멧 사용)
네비게이션 기획
텍스트 네비게이션(링크) : 문자로 만들어진 링크
아이콘 그래픽 : 상징적인 아이콘과 그래픽을 이용한 링크
사이트맵 : 사이트의 전체구조를 보옂는 사이트 계층도
풀다운 메뉴 : 버튼을 눌러 메뉴를 나타내는 기능
네비게이션 바 : 메뉴를 한 곳에 모아 놓은 그래픽 또는 문자열의 모음
메뉴 바 : 네비게이션 바와 같은 의미로 쓰이기도 한다.
라인 맵 : 이동 경로를 한 번에 보여주는 방식
사이드 메뉴 바 : 사이트의 좌우측에 메뉴와 링크들을 모아 놓은 형태
작동이동 : 시간적 경과에 따라 자동적으로 특정 페이지로 이동하게 하는 방식
디렉토리 : 주제나 항목별로 범주화 하고 계층저긍로 구조화한 네비게이션
네비게이션이란 ?
- 사용자들의 웹사이트에서의 이동과 관련된 개념
->사이트에에서의 이동 경로나 방법 또는 그것을 돕는 구조와 인터페이스 디자인 등을 포괄하는 표현이다.
-> 네비게이션은 범주화하여 다른 사이트 구조는 웹페이지들로 이동할 수 있게 한 링크일 수도 있다.
-> 다른 메뉴들로 연결된 메뉴 박스나 네비게이션 바, 좀 전에 보았던 페이지로 되돌아 갈 수 있는 버튼, 다음에 보아야 할 페이지로 이동하는 아이콘, 홈페이지로 돌아갈 수 있는 문자열 등을 의미
-> 네비게이션은 춤이나 물과 같은 것이므로 사람들이 자연스럽게 사이트내에서 물처럼 흘러갈 수 있도록 해야 한다.
- 목적과 요구에 맞출 것
-> 네비게이션 디자인은 사용자의 행동에 대한 예측과 사이트 이동을 지원하는 방식으로 사이트를 구축하는 것을 의미
-> 이 목적을 달성하기 위해서는 사이트 내에서 고객의 목적과 요구가 무엇인지 알아야 한다.
- 잘 된 네비게이션에서 배울 것
-> 쉽게 네비게이션을 만들어 놓은 사이트에서는 배울 것이 많다.
-> 성공적으로 네비게이션을 기획한 사이트를 주목해보면 적용하고 있는 네비게이션 방식에 상관없이 공통적인 요소가 있다.
공통점
-> 학습의 편리성
-> 일관성 유지
-> 사용자의 요구와 해동에 대한 피드백
-> 대안제시
-> 시간과 행동의 경제성
-> 목적 적합성
-> 명확한 시각적 메시지
-> 이해 가능한 라벨(명칭)
-> 사용자의 목적과 행동에 대한 보조
사용자의 요구와 행동을 피드백 하도록 할 것
-> 사용자의 요구와 행동에 대한 피드백 작업은 사용자들에게 대단한 영향을 끼친다.
-> 사용자들의 행동을 추적하고 기록과 통계로 만든다.
-> 때로는 사용자들의 네비게이션에 대한 요구 사항을 끌어내거나 불만을 말하게 한다.
-> 가장 기초적인 네비게이션 요소들을 수정하고 반영해나갈 수 있다.
전체 사이트의 네비게이션을 고려할 것
-> 사용자들이 주로 불평하게 되는 네비게이션의 문제는 하위 메뉴와 문서 사이트에서 다시 메인페이지로 나올 수 없는 경우 스토리보드를 이용하여 어디에서 메인페이지로의 링크를 만들어 둘지 예측하고 사용자들의 이동흐름을 읽을 수 있게 한다.
-> 우선 사이트 전체에 대한 사이트 맵을 완성
-> 내용적 연관성이나 메인 페이지로의 복귀 시점을 예측해서 선으로 연결해보는 것이 상당한 도움을 준다.
글로벌 네비게이션과 로컬 네비게이션
- 주메뉴(글로벌 네비게이션)의 수는 5~7정도로 제한하는 것이 좋다. (과학적인 실험을 통해 나온 수치)
- 로컬네비게이션 즉, 하위 메뉴는 여러가지 유형이 있다.
-> 주제별 목록의 형태이거나, 연관된 아이템의 목록이거나 메뉴박스나 메뉴 바 형태일 수 있다.
- 글로벌/ 로컬 네비이션 두 단계로 분리하여 네비게이션 시스템을 구성해야 명료하고 간명한 네비게이션을 만든다.
지름길을 만들어 둘 것
- 전체 사이트의 구조를 생각했다면, 다음으로 이 구조 내에서 지름길(Shortcut)을 만들어 두는데 시간을 투자해야 한다.
- 네비게이션 지름길의 기본개념은 사용자들의 빠르고 쉽게 정보를 얻도록 하는 데 있다.
다중 네비게이션을 지원할 것
- 전체 사이트의 구조를 생각했다면, 다음으로 이 구조 내에서의 지름길(shortcut)을 만들어 두는데 시간을 투자해야 한다.
- 네비게이션 지름길의 기본개념은 사용자들의 빠르고 쉽게 정보를 얻도록 하는데 있다.
모든 사람들이 다르다는 것을 이해할 것
- 네비게이션 기획이 매력적인 것은 매우 주관적이라는 것이다.
- 표적 대상에 맞는 네비게이션을 디자인 해야 한다.
텍스트 링크를 적절히 사용할 것
- 불필요한 긴 설명을 붙일 필요가 없다.
- 사용자들은 결코 긴 문장을 읽으려 하지 않는다.
- 동시에 사용자들이 클릭하기 전에 다음 내용을 예측할 수 있도록 적당한 낱말을 선택하는데 신중해야 한다.
직관적으로 파악할 수 있는 아이콘을 사용할 것
- 그래픽이나 아이콘 자체가 분명한 내용을 상징할 수 있는 것들을 사용한다.
- 쉽게 직관적으로 아이콘이나 그래픽이 유도하는 의미를 파악할 수 있게 해야 한다.
- 그래픽과 문자를 결합한 아이콘은 피하라.
디렉토리를 논리적으로 범주화 할 것
- 네비게이션에서 디렉토리는 메뉴와 항목, 웹 페이지, 다른 사이트 등을 범주화 하고, 계층적으로 분류한 체계를 말한다.
- 디렉토리의 적용여부는 무엇보다도 사이트의 규모와 정보와 콘텐츠의 양에 따라 판단할 수 있다.
- 기본적인 네비게이션 중의 하나인 디렉토리를 구성할 때, 가장 중요한 것은 논리적인 범주화 계층화이다.
3 클릭 5초
- 사이트 네비게이션을 기획할 때, 일반적으로 통용되는 법칙 중의 하나로 3클릭 5초 법칙이 있다.
- 3번 클릭 전에 원하는 정보나 콘텐츠를 찾을 수 있고 5초 이내에 어디로 이동할지, 이동할 목적지를 알 수 있도록 해야 한다.
- 사이트 전체의 구조도 가능하면 3단계 이상으로 확장하지 않도록 한다.
다양한 네비게이션의 구현
- 네비게이션을 구현하는 방법은 텍스트에서 아이콘, 디렉토리, 사이트맵 메뉴바 등등 매우 다양하다.
(단, 일관성을 유지할 것)
- 네비게이션의 주요한 목적은 사용자들이 이 사이트에 들어온 목적을 쉽게 달성하도록 돕는 데 있다는 점이다.
네비게이션 기획
- 비즈니스 사이트에서의 콘텐츠
-> 콘텐츠란 사이트의 관리자가 사용들에게 전달하고자 하는 내용이고, 사용자들 웹사이트로 끌어들이는 유인기제이다.
-> 웹 사이트의 목적이 무엇이고, 표적대상이 누구냐에 따라 콘텐츠는 다르게 기획되어야 한다.
-> 콘텐츠 기획의 핵심은 무엇보다도 목적에 부합되어야 하고, 고객지향적이어야 한다는 점이다.
-> 비즈니스 사이트에서 콘텐츠는 철저하게 마케팅적 차원에서 고려되어야 할 요소이다.
콘텐츠의 종류
-> 콘텐츠는 형태에 따라 문자 콘텐츠, 음악 콘텐츠, 그래픽, 동영상 콘텐츠, 소프트웨어 콘텐츠 등 다양하게 분류할 수 있다.
-> 사용자들은 자신이 직접 참가한 콘텐츠가 있는 사이트에 일반적으로 자주 접속하는 성향을 갖는다.
-> 사이트 구조 구성과 함께 가능하면 사이트 구조에 대응하는 디렉토리 구조와 생성될 소스파일과 그래픽 파일들의 이름을 붙이는 방식을 만들어 두면 보다 효율저그로 공동작업을 일관성이쎄 진행할 수 있다.
콘텐츠와 비용
웹사이트의 콘텐츠가 끊임없이 새롭게 업데이트되고 축적되지 않으면 사용자들에게 외면 당하기 쉽상이다.
웹사이트 운영면에서 콘텐츠 생산만큼 부담이 되는 것은 없다고 해도 과언이 아니다.
따라서 가능한 우수 회원을 유치하여 그들이 생성하는 사용자 참여 콘텐츠를 유치하려고 노력해야 한다.
콘텐츠의 다양성과 질
웹 사이트가 점차 발전하면서 보다 다양한 콘텐츠와 양질의 콘텐츠를 요구받게 된다.
그러나 사이트 본래의 목적과 개성, 또는 질을 해칠 정도로 확장된 콘텐츠는 오히려 경쟁력을 상실시키는 요인이 된다.
pr을 위해 만들어진 사이트가 확보된 사용자 정보를 기반으로 미팅 콘텐츠를 제공하면 그 사이트는 정체성을 상실하게 된다.
단지 사용자 확보를 지나치게 강조하다 보면 스스로 정체성을 읽어버리고 백화점식 콘텐츠만 죽 늘어놓는 경우가 많다.
'웝사이트전략 > 웹기획' 카테고리의 다른 글
웹사이트 정보설계 체크리스트 (0) | 2018.07.15 |
---|---|
웹사이트 구축 문서작업 (0) | 2018.07.13 |
네비게이션 웹사이트 평가 모형 (0) | 2018.07.12 |
창의적인 웹기획 설계 (0) | 2018.07.12 |
쇼핑몰 평가 모형 (0) | 2018.07.11 |