현재 섹션 : 웹/인터넷

홈페이지 사용성 가이드라인

사이트의 목적을 알려라

  1. 회사 이름과 로고는 적당한 크기로 눈에 잘 띄는 위치에 배치하라. (좌측상단)
  2. 사이트나 회사에서 하는 일이 무엇인지 명확하게 요약한 태그라인을 포함시켜라.
    - 회사 이름 자체가 회사가 하는 일을 설명하거나 아주 유명한 회사인 경우에는 생략 가능
  3. 사용자의 관점에서 가치가 있는 것이 무엇이고 주요 경쟁자들과의 차별성이 무엇인지를 강조하라.
    - 간략하게 설명할 수 있다면 태그라인에 그 내용을 넣어라.
  4. 최우선적인 임무를 강조해서 사용자들이 홈페이지에서 명확한 출발점을 알 수 있도록 하라.
    [주의1] 모든 것을 강조하면 초점이 흐려진다.
    [주의2] 사용자들의 관점에서 가장 중요한 임무가 무엇인지 파악하라.
  5. 한 사이트에서 공식 홈페이지(Home)는 하나만 분명하게 지정하라.
  6. 회사의 웹사이트 전체를 지칭하는 것이 아니라면 '웹사이트'란 용어를 사용하지 마라.
  7. 홈페이지(Home)는 사이트의 다른 페이지와는 다르게 디자인하라.

회사에 대한 정보를 제공하라

  1. 회사소개, 투자자 홍보, 보도실, 채용과 같은 회사에 대한 정보는 한 장소에 묶어두라.
  2. About Us 섹션으로 연결되는 링크를 홈페이지에 마련하라.
    - 링크명은 'About <회사명>'으로 하고, 이 섹션에서는 사용자들이 회사에 대해 전체적으로 파악할 수 있도록 회사의 제품, 서비스, 회사 가치, 비즈니스 제안, 관리팀 등 관련 정보를 제공하라.
  3. 회사를 언론에 보도되도록 하려면 '보도실(Press Room)'이나 '기자실(News Room)' 링크를 홈페이지에 마련하라.
  4. 웹사이트를 회사와 분리되지 않도록 명칭 등에 있어서 통합된 포맷을 유지하라.
    - 단, 웹에서만 가능한 서비스, 다른 매체에서만 가능한 서비스는 구별하라.
  5. 회사의 연락처에 관한 모든 정보를 담은 페이지로 가는 'Contact Us' 링크를 홈페이지에 마련하라.
  6. '문의사항 처리(Feedback)' 링크를 제공하려면 링크의 목적과 문의에 대한 처리를 고객 서비스 부서에서 하는지, 웹마스터가 하는지를 명시하라.
  7. 직원들을 위한 정보(회사 내부 정보)는 대외용 웹사이트에 올리지 마라.
  8. 사이트에서 고객에 대한 정보를 수집한다면 '개인정보 보호정책(Privacy Policy)' 링크를 홈페이지에 마련하라.
  9. 말하지 않아도 알 수 있는 것이 아니라면 웹사이트에서 어떻게 수익을 올리는지 설명하라.

컨텐츠를 한눈에 파악하게 하라

  1. 사용자들이 사용하는 용어를 사용하라.
    - 특히 섹션과 카테고리 라벨은 회사의 입장이 아닌, 고객의 입장에서 해야 한다.
  2. 동일한 항목을 강조하기 위해 홈페이지에서 반복하지 마라.
    [대안] 어떤 항목을 강조하려면 한 장소에서 명확하게 눈에 띄도록 처리하라.
    [예외] 사용자들이 어떤 컨텐츠를 지칭하는 데 여러 단어를 사용한다면, 같은 페이지로 연결되는 여러 명칭의 링크가 도움을 줄 수도 있다.
  3. 홈페이지에는 애매모호한 용어를 사용하지 마라.
    - 홈페이지에서 가장 중요한 것은 정보 전달력이다.
  4. 대문자 표기나 그외의 다른 스타일 표준을 일관되게 적용하라.
  5. 설명하지 않아도 알 수 있는 컨텐츠라면 따로 제목을 붙이지 마라.
  6. 세부 항목이 하나뿐인 카테고리는 피하라.
  7. 꼭 붙어있어야 할 필요가 있는 단어가 있는 문장은 의미에 따라 줄바꾸기 하라.
  8. 약자, 두문자 약어가 처음 나올 때는 철자를 풀어쓰고 바로 이어서 약어를 써준다.
    [주의] 네비게이션 링크에 설명이 없는 약어 사용은 특히 피해야 한다.
    [예외] DVD와 같이 일반화된 약어는 상관없다.
  9. 감탄 부호는 사용하지 마라.
    - 홈페이지에 있는 모든 항목들이 중요도가 높은 것이다.
  10. 전부 대문자인 포맷 스타일의 글자는 가독성이 떨어지므로 되도록 사용하지 마라.
  11. 강조하기 위해 자간이나 구두점을 부적절하게 사용하지 마라.
    - '성 경 퀴 즈', '성.경.퀴.즈', '/성/경/퀴/즈' 등은 '성경퀴즈'를 찾는 사용자들에게 검색이 안 될 수도 있다.

샘플 컨텐츠를 제시하라

  1. 제목으로만 카테고리를 설명하려하지 말고 샘플 컨텐츠를 제공하라.
  2. 각 샘플에는 그 샘플에 대한 상세 정보가 있는 페이지로 연결되는 링크를 제공하라.
    - 샘플 링크가 (일반적인) 카테고리 목록 페이지로 연결된다면 사용자는 당황하게 된다.
  3. 구체적인 샘플 옆에는 상위 카테고리 링크를 제공하라.
  4. 각 샘플에 대한 상세 정보로 연결되는 링크와 해당 카테고리에 대한 일반 정보로 연결되는 링크는 명확하게 구별하라.
    - 샘플에 대한 상세 정보 링크는 샘플 정보 바로 옆에, 카테고리 링크는 흰여백을 경계로 구분한다.

자료실과 지난 컨텐츠를 제공하라

  1. 이전에 사이트에 있었으나 현재 홈페이지에서 제공하지 않는 정보를 쉽게 찾을 수 있도록 하라.
    [대안] 자료실 제공, 지난 컨텐츠 링크 목록 제공, 영구적인 URL 링크 제공 등

링크의 가이드라인을 준수하라

  1. 링크는 정보를 담고 있는 단어로 시작하라.
    - 가능한 구체적이고 짧게 하고, 뻔하거나 반복적인 정보(회사명과 같은)는 포함시키지 마라.
  2. 링크 제목에는 '여기를 클릭하세요(Click Here)'처럼 일반적인 지시어를 사용하지 마라.
    - 연결되는 페이지의 내용을 잘 설명해 주는 단어만을 사용하라.
  3. 목록 아래에 'More...'와 같은 일반적인 링크는 사용하지 마라.
    - 추가적인 내용이 무엇인지 구체적으로 설명하라.
  4. 방문했는지 방문하지 않았는지 링크 색상으로 구별할 수 있도록 하라.
  5. 링크를 지칭하는 데 '링크'란 말을 사용하지 마라.
    - 링크는 밑줄을 치고 청색으로 표시해서 설명하지 않아도 알 수 있게 하라.
  6. 오디오, 비디오 파일 등 다른 애플리케이션이 필요한 링크에는 아이콘을 사용하여 표시하라.

네비게이션은 홈페이지의 얼굴이다

  1. 주요 네비게이션은 페이지의 본문 바로 위와 같이 아주 눈에 잘 띄는 곳에 배치하라.
    - 배너 광고처럼 보이지 않도록 주의하라.
  2. 네비게이션 항목에서 비슷한 항목은 한 곳으로 그룹화하라.
  3. 동일하거나 비슷한 유형의 링크를 여러 영역에 제공하지 마라.
  4. 홈페이지에서는 로고나 'Home' 등의 홈페이지로 연결되는 링크를 클릭할 수 없게 만들어라.
  5. 네비게이션 카테고리 제목에 조어를 사용하지 마라.
  6. 사이트에 쇼핑 카트(장바구니) 기능이 있다면 홈페이지에서 쇼핑 카트로 바로 연결되는 링크를 제공하라.
  7. 단순 텍스트 링크만으로도 카테고리 제목을 충분히 구별할 수 있다면 가급적 아이콘을 사용하지 마라.
    - 아이콘은 즉시 컨텐츠를 파악할 수 있는 경우에만 사용하라.

검색 도구를 사용하라

  1. 홈페이지에는 검색 페이지로 연결되는 링크가 아니라 바로 검색어를 입력할 수 있는 입력창을 제공하라.
  2. 입력창은 충분히 넓어야 한다. (알파벳 기준 25~30자)
  3. 검색창 영역에 제목을 붙이지 말고, 입력창 오른쪽에 '검색(Search)' 버튼을 사용하라.
    - 'Search'라는 제목에 'Go'라는 버튼보다, 제목없이 'Search' 버튼만 있는 것이 훨씬 간결하다.
  4. 홈페이지에는 단순 검색 기능만 제공하라.
    - 고급 검색 기능이나 검색 팁이 있을 경우에는 그에 대한 링크만 제공하라.
  5. 홈페이지에서의 검색은 사이트 전체에 대한 검색으로 기본 설정되어 있어야 한다.
    - 검색 범위가 제한되어 있을 경우에는 반드시 명시한다.
  6. 사이트 검색 기능에는 '전체 웹 검색' 기능을 제공하지 마라.
    - 사용자들이 전체 웹에서의 검색을 할 때 선호하는 검색엔진이 따로 있게 마련이다.

툴과 단축키는 신중히 사용하라

  1. 사용자들이 중요도가 높은 임무에 바로 접근할 수 있도록 구성하라.
  2. 아주 핵심적이고 우선순위가 높은 임무를 처리해주는 것이 아니라면 홈페이지에서 보여줄 필요가 없다.
    - 사용자들이 필요해서가 아니라 제공할 수 있기 때문에 제공하는 서비스는 삼가한다.
  3. 북마크하거나 브라우저의 '시작페이지'로 설정하는 것과 같이 브라우저에서 기본적으로 제공하는 기능을 사이트에서 별도로 제공할 필요는 없다.

그래픽과 애니메이션

  1. 그래픽은 장식적인 요소보다는 실제적인 컨텐츠로서의 가치를 가져야 한다.
    - 컨텐츠와 관련성이 없는 그래픽은 중요한 컨텐츠로부터 사용자들의 관심을 빼앗는다.
  2. 그래픽이나 사진이 관련 기사 내용의 의미를 명확히 전달하지 않는 경우에는 캡션을 달아라.
    - 인물 사진에는 항상 캡션을 다는 것이 좋다.
  3. 디스플레이 크기에 맞도록 사진과 다이어그램을 적절히 편집하라. (축소 & 잘라내기)
  4. 워터마크가 있는 그래픽을 사용하지 마라.
    - 복잡하고 페이딩 아웃 처리된 그래픽, 배경 이미지 위에 텍스트가 있는 그래픽은 판독하기 어렵다.
  5. 애니메이션을 홈페이지의 한 항목에 사용자들의 관심을 끌어들이기 위한 목적으로 사용하지 마라.
    - 사용방법 설명 등을 위한 애니메이션처럼 컨텐츠로서 가치가 있는 것이라도 홈페이지에 사용하는 것은 부적절하다. 홈페이지에는 사용자들의 관심을 끌기 위한 것들이 많다.
  6. 로고, 태그라인, 주요 헤드라인과 같은 페이지의 핵심적인 요소는 절대로 애니메이트시키지 마라.
  7. 플래시 인트로 페이지를 보여주고 싶은 경우는 그것을 디폴트로 설정하지 말고 사용자들이 선택할 수 있도록 배려하라.

그래픽 디자인은 사용자 중심이어야 한다

  1. 페이지상에서 크기, 색상 등과 같은 폰트 스타일과 기타 텍스트 포맷은 제한적으로 사용하라.
  2. 텍스트와 배경색이 선명하게 대비되도록 사용하여 글자의 가독성을 높여라.
  3. 800 x 600 화면 사이즈에서 좌우 스크롤을 사용하지 마라.
  4. 가장 핵심적인 페이지 요소는 800 x 600 스크린 크기를 기준으로 스크롤하지 않고 한 화면에 볼 수 있어야 한다.
    - 아래로 스크롤해야 볼 수 있는 컨텐츠가 있다면 그 내용이 아래에 있다는 것을 알리는 시각적 장치를 넣어야 한다.
  5. 홈페이지 크기가 다양한 해상도에 조절될 수 있도록 유동적인 레이아웃을 사용하라.
  6. 로고는 광고처럼 보이지 않도록 사려깊게 사용하라.
    - 제품, 정책이나 프로그램을 위한 별도의 로고는 내부용으로만 사용하라.

유저 인터페이스(UI) 도구

  1. 불릿과 같은 도구는 반드시 클릭되도록 해야 한다.
  2. 사용자들이 검색 기능을 기대하는 홈페이지 상단 부분에 여러가지 텍스트 입력창을 사용하지 마라.
  3. 드롭다운 메뉴는 세부 항목을 보고 알 수 있는 것이 아니라면 함부로 사용하지 마라.

제목 표시줄의 역할

  1. 제목 표시줄은 회사 이름과 같은 정보 전달력이 있는 단어로 시작하라.
    - 'Welcome', 'Homepage', 'a', 'the'와 같이 의미없는 단어로 시작되는 제목 표시줄은 북마크 목록이나 검색 결과 목록에서 차별적인 정보를 전달하지 못한다. 갖가지 도형으로 장식된 제목 표시줄도 마찬가지다.
  2. '.com'과 같은 도메인의 기관 이름은 'Amazon.com'과 같이 회사명의 일부가 아닌 경우에는 제목 표시줄에 포함시키지 마라.
    - '.com'과 같은 사이트 이름은 온라인과 오프라인에서의 회사 존재를 인위적으로 구별하게 만든다.
  3. 제목 표시줄에 '홈페이지'라는 말을 포함시키지 마라.
    - 사이트의 각 페이지는 서로 다른 제목 표시줄을 가지고 있어야 북마크나 검색 목록에서 다른 페이지들과 혼동되지 않는다. 홈페이지를 홈페이지라고 지정할 필요는 없다.
  4. 제목 표시줄에 사이트에 대한 간단한 설명을 추가하라.
    - 짥고 명확한 태그라인을 갖고 있다면 그것을 제목 표시줄에 사용해도 좋다.
  5. 제목 표시줄은 알파벳 기준으로 7-8 단어 미만, 총 64자 미만으로 제한하라.

URL은 간단하게 하라

  1. 상업용 웹사이트의 홈페이지 URL은 "http://www.도메인.co.kr"로 되어야 한다.
    [주의1] 도메인 이름 다음에 복잡한 코드나 'index.html'과 같은 것을 추가하지 마라.
    [주의2] 사용자들이 입력한 URL이 유지되도록 하라.
    [주의3] 'www.도메인.co.kr', '도메인.co.kr'에 모두 연결되도록 하라.
  2. 외국(특히 미국)에 주요고객이 있지 않다면 국가 도메인(.kr)을 사용하라.
    - 해외에도 주요고객이 있다면 '.co.kr', '.com' 모두 등록해 두는 것이 좋다.
  3. 가능하다면 도메인 이름을 사이트의 대체 철자나 약어, 흔히 실수하는 철자로도 등록하라.
    [사례1] Wal-Mart('-'이 있는 경우) --> 'http://www.wal-mart.com' or 'http://walmart.com'
    [사례2] Victoria's Secret('s'가 중복되는 경우) -->'http://www.victoriassecret.com' or 'http://www.victoriasecret.com'
  4. 대체 도메인 이름을 허용한다면 한 가지 도메인을 공식 버전으로 채택하고, 다른 도메인으로 접속한 사용자들은 공식 도메인 사이트로 보내주어라.
    - 온라인, 오프라인 홍보에는 공식 도메인 이름만을 사용한다.

뉴스와 보도 자료

  1. 헤드라인은 최소한의 단어로 최대의 정보를 줄 수 있도록 간결하고 설명적이어야 한다.
    - 헤드라인은 전체 기사보다는 바로 아래의 부제와 관련성이 높아야 한다.
  2. 홈페이지에서 실어주는 뉴스 기사나 보도 자료에 대해 요약 내용을 작성하고 편집하라.
    - 기사의 첫문장을 그냥 따서 사용하지 마라. 부제는 기사를 설명하지 말고 실제 내용의 요약이어야 한다. 사용자들의 클릭을 유도하기 위해 실제 내용을 감추는 것은 적절하지 못하다.
  3. 부제보다는 헤드라인을 전체 기사로 링크시켜라.
    - 헤드라인을 눈에 띄는 링크 표시로 하기 어려운 스타일이라면, 부제 아래에 별도의 '전체 기사(Full Story)' 링크를 첨가하라.
  4. 홈페이지의 모든 뉴스 기사가 1주일 이내에 발생한 것이라면 각 기사의 부제 밑에 날짜와 시간을 표기할 필요는 없다.
    [예외] 단, 전체 기사 페이지에는 날짜와 시간을 눈에 띄게 표기해야 한다. 기사는 '오늘'이니 '다음 주'니 하는 상대적인 시간으로 언급하면 안 된다.

팝업 창과 스플래시 페이지

  1. 메인 URL은 실제 홈페이지로 연결시켜주어야 한다.
    [예외] 스플래시 화면은 미성년자와 같은 일부 사용자들에게 부적절한 컨텐츠를 취급할 경우에만 적절하다.
  2. 팝업 창을 피하라.
    [대안] 아주 중요한 정보는 홈페이지에서 눈에 잘 띄는 영역에 배치하라.
  3. 제1의 언어가 없이 여러 언어로 된 웹사이트가 아니라면 경로 페이지를 사용하지 마라.
    - 사이트의 제1의 언어가 있다면 그 언어로 된 홈페이지로 바로 연결시키고, 여러 언어의 국제 버전 링크를 포함시켜라.

광고를 광고답지 않게 만들어라

  1. 타사 광고는 페이지의 덜 중요한 장소에 배치하라.
    - 홈페이지의 중요한 항목을 배너 광고 위쪽에 배치하지 마라.
  2. 페이지 상단의 표준 배너 영역이 아닌 곳에 광고를 배치하는 경우에는 광고와 사이트 컨텐츠를 혼동하지 않도록 광고라는 라벨을 붙여주어라.
  3. 사이트의 일반적인 기사를 돋보이게 하기 위해 광고 형식을 사용하지 마라.

환영 메시지는 필요악이다

  1. 사이트의 사용자들에게 환영 인사를 할 필요는 없다.
    [예외] 등록 회원의 로그인을 확인해 주는 환영 메시지는 적절히 잘 사용해야 한다.

기술적인 문제와 긴급 상황 대처법을 알려라

  1. 웹사이트가 다운되거나 웹사이트의 중요한 부분이 작동되지 않을 경우에는 홈페이지에서 명확하게 공고하라.
    - 서비스 재개 시간을 명시하고, 대체 서비스를 제공하라. 준비 중인 서비스에서 '공사중' 메시지는 바람직하지 않다.

디자인에 대한 홍보를 하지 마라

  1. 검색 엔진, 디자인 회사, 선호하는 브라우저, 기반 기술에 대한 정보를 위해 홈페이지 공간을 낭비하지 마라.
    [대안] 기술 지향적인 사이트에서는 'About Us'에 '사이트 운영기술(How We Run This Website)' 섹션을 포함하는 것이 적합하다.
  2. 웹사이트로 상을 받은 경력은 홈페이지에서 자랑하지 않는 것이 좋다.
    [대안] 디자인이나 웹사이트 자체의 다른 측면에 대한 상은 'About Us' 영역에서 다루어야 한다.
    [예외] 제품, 서비스의 질, 고객과 관련된 분야로 받은 상은 홈페이지에 언급해도 좋다. 단, 너무 오래 공지하지는 마라.

페이지 리로드와 리프레시

  1. 업데이트 사항을 사용자들에게 알리기 위해 홈페이지를 자동으로 리프레시 하지 마라.
    - 리프레시할 경우에는 뉴스 업데이트와 같이 실제로 변한 컨텐츠만 업데이트되도록 하라.

홈페이지의 개인화

  1. 개인화된 정보를 제공할 수 있는 영역이 있을 경우, 일반화된 컨텐츠를 제공하지 마라.
    - 일반적인 환영 인사는 피하는 것이 좋다. 100명에게 똑같이 뿌려진 편지처럼 불쾌할 수도 있다. 어느 지역의 방문자인지도 모르면서 서울의 날씨를 보여주거나 하는 것도 좋지 않다.
  2. 색상과 같은 유저 인터페이스의 기본적인 모양을 개인화하는 서비스를 제공하지 마라.
    - 보편적으로 가장 읽기 좋은 최고의 디자인을 만들어내는 데 자원을 집중하라. 단, 폰트 크기는 상대적인 크기로 해서 사용자들의 브라우저 설정을 존중하라.

사용자 등록과 혜택

  1. 홈페이지에서 회원 등록을 위한 단순 링크를 제공하지 말고, 등록하면 얻게 되는 고객의 혜택을 설명하라.
    - 이메일 주소를 요청할 경우에도 그에 따른 혜택을 설명하라.

커뮤니티 사용

  1. 채팅룸이나 토론방과 같은 사용자 커뮤니티는 단순 링크로 하지 말고, 홈페이지에 실제 토론 주제를 열거하거나 토론 스케줄을 제공하라.
  2. 상업용 사이트에는 '방명록(Guestbook)'을 제공하지 마라.

날짜와 시간 표시

  1. 뉴스나 실시간 채팅, 주가 등과 같이 시간이 중요한 정보에 대해서는 날짜와 시간을 표기한다.
  2. 홈페이지에 시간을 표시하려면 컴퓨터에서 생성된 현재 시간이 아니라 컨텐츠의 업데이트 시간을 사용자들에게 보여준다.
  3. P.M이나 p.m.처럼 표준화된 약어 표기를 사용하라.
  4. 날짜 표시는 애매하지 않게 하라.
    - '01/02/03'과 같은 표기는 국가에 따라 다른 관습을 가지고 있어 애매하다. '2003년 1월 2일', '2003.1.2 (목)' 처럼 명확하게 표기해야 한다.

주가 지수와 숫자 표기

  1. 주가 포인트처럼 상승이나 하락폭이 중요한 컨텐츠는 변화율도 표기하라.
  2. 'IBM'과 같이 일반화된 약어가 아니라면 철자를 다 써준다.
  3. 4자리 이상의 숫자에는 천 단위마다 '쉼표(,)'로 구분하라.
  4. 숫자 컬럼은 소수점을 맞추어서 정리하라.

[참고서적] "성공적인 홈페이지 유저빌러티 가이드" (제이콥 닐슨 외/안그라픽스 역간)