홈페이지 사용성 가이드라인
사이트의 목적을 알려라
- 회사 이름과 로고는 적당한 크기로 눈에 잘 띄는 위치에 배치하라. (좌측상단)
- 사이트나 회사에서 하는 일이 무엇인지 명확하게 요약한 태그라인을 포함시켜라.
- 회사 이름 자체가 회사가 하는 일을 설명하거나 아주 유명한 회사인 경우에는 생략 가능 - 사용자의 관점에서 가치가 있는 것이 무엇이고 주요 경쟁자들과의 차별성이 무엇인지를 강조하라.
- 간략하게 설명할 수 있다면 태그라인에 그 내용을 넣어라. - 최우선적인 임무를 강조해서 사용자들이 홈페이지에서 명확한 출발점을 알 수 있도록 하라.
[주의1] 모든 것을 강조하면 초점이 흐려진다.
[주의2] 사용자들의 관점에서 가장 중요한 임무가 무엇인지 파악하라. - 한 사이트에서 공식 홈페이지(Home)는 하나만 분명하게 지정하라.
- 회사의 웹사이트 전체를 지칭하는 것이 아니라면 '웹사이트'란 용어를 사용하지 마라.
- 홈페이지(Home)는 사이트의 다른 페이지와는 다르게 디자인하라.
회사에 대한 정보를 제공하라
- 회사소개, 투자자 홍보, 보도실, 채용과 같은 회사에 대한 정보는 한 장소에 묶어두라.
- About Us 섹션으로 연결되는 링크를 홈페이지에 마련하라.
- 링크명은 'About <회사명>'으로 하고, 이 섹션에서는 사용자들이 회사에 대해 전체적으로 파악할 수 있도록 회사의 제품, 서비스, 회사 가치, 비즈니스 제안, 관리팀 등 관련 정보를 제공하라. - 회사를 언론에 보도되도록 하려면 '보도실(Press Room)'이나 '기자실(News Room)' 링크를 홈페이지에 마련하라.
- 웹사이트를 회사와 분리되지 않도록 명칭 등에 있어서 통합된 포맷을 유지하라.
- 단, 웹에서만 가능한 서비스, 다른 매체에서만 가능한 서비스는 구별하라. - 회사의 연락처에 관한 모든 정보를 담은 페이지로 가는 'Contact Us' 링크를 홈페이지에 마련하라.
- '문의사항 처리(Feedback)' 링크를 제공하려면 링크의 목적과 문의에 대한 처리를 고객 서비스 부서에서 하는지, 웹마스터가 하는지를 명시하라.
- 직원들을 위한 정보(회사 내부 정보)는 대외용 웹사이트에 올리지 마라.
- 사이트에서 고객에 대한 정보를 수집한다면 '개인정보 보호정책(Privacy Policy)' 링크를 홈페이지에 마련하라.
- 말하지 않아도 알 수 있는 것이 아니라면 웹사이트에서 어떻게 수익을 올리는지 설명하라.
컨텐츠를 한눈에 파악하게 하라
- 사용자들이 사용하는 용어를 사용하라.
- 특히 섹션과 카테고리 라벨은 회사의 입장이 아닌, 고객의 입장에서 해야 한다. - 동일한 항목을 강조하기 위해 홈페이지에서 반복하지 마라.
[대안] 어떤 항목을 강조하려면 한 장소에서 명확하게 눈에 띄도록 처리하라.
[예외] 사용자들이 어떤 컨텐츠를 지칭하는 데 여러 단어를 사용한다면, 같은 페이지로 연결되는 여러 명칭의 링크가 도움을 줄 수도 있다. - 홈페이지에는 애매모호한 용어를 사용하지 마라.
- 홈페이지에서 가장 중요한 것은 정보 전달력이다. - 대문자 표기나 그외의 다른 스타일 표준을 일관되게 적용하라.
- 설명하지 않아도 알 수 있는 컨텐츠라면 따로 제목을 붙이지 마라.
- 세부 항목이 하나뿐인 카테고리는 피하라.
- 꼭 붙어있어야 할 필요가 있는 단어가 있는 문장은 의미에 따라 줄바꾸기 하라.
- 약자, 두문자 약어가 처음 나올 때는 철자를 풀어쓰고 바로 이어서 약어를 써준다.
[주의] 네비게이션 링크에 설명이 없는 약어 사용은 특히 피해야 한다.
[예외] DVD와 같이 일반화된 약어는 상관없다. - 감탄 부호는 사용하지 마라.
- 홈페이지에 있는 모든 항목들이 중요도가 높은 것이다. - 전부 대문자인 포맷 스타일의 글자는 가독성이 떨어지므로 되도록 사용하지 마라.
- 강조하기 위해 자간이나 구두점을 부적절하게 사용하지 마라.
- '성 경 퀴 즈', '성.경.퀴.즈', '/성/경/퀴/즈' 등은 '성경퀴즈'를 찾는 사용자들에게 검색이 안 될 수도 있다.
샘플 컨텐츠를 제시하라
- 제목으로만 카테고리를 설명하려하지 말고 샘플 컨텐츠를 제공하라.
- 각 샘플에는 그 샘플에 대한 상세 정보가 있는 페이지로 연결되는 링크를 제공하라.
- 샘플 링크가 (일반적인) 카테고리 목록 페이지로 연결된다면 사용자는 당황하게 된다. - 구체적인 샘플 옆에는 상위 카테고리 링크를 제공하라.
- 각 샘플에 대한 상세 정보로 연결되는 링크와 해당 카테고리에 대한 일반 정보로 연결되는 링크는 명확하게 구별하라.
- 샘플에 대한 상세 정보 링크는 샘플 정보 바로 옆에, 카테고리 링크는 흰여백을 경계로 구분한다.
자료실과 지난 컨텐츠를 제공하라
- 이전에 사이트에 있었으나 현재 홈페이지에서 제공하지 않는 정보를 쉽게 찾을 수 있도록 하라.
[대안] 자료실 제공, 지난 컨텐츠 링크 목록 제공, 영구적인 URL 링크 제공 등
링크의 가이드라인을 준수하라
- 링크는 정보를 담고 있는 단어로 시작하라.
- 가능한 구체적이고 짧게 하고, 뻔하거나 반복적인 정보(회사명과 같은)는 포함시키지 마라. - 링크 제목에는 '여기를 클릭하세요(Click Here)'처럼 일반적인 지시어를 사용하지 마라.
- 연결되는 페이지의 내용을 잘 설명해 주는 단어만을 사용하라. - 목록 아래에 'More...'와 같은 일반적인 링크는 사용하지 마라.
- 추가적인 내용이 무엇인지 구체적으로 설명하라. - 방문했는지 방문하지 않았는지 링크 색상으로 구별할 수 있도록 하라.
- 링크를 지칭하는 데 '링크'란 말을 사용하지 마라.
- 링크는 밑줄을 치고 청색으로 표시해서 설명하지 않아도 알 수 있게 하라. - 오디오, 비디오 파일 등 다른 애플리케이션이 필요한 링크에는 아이콘을 사용하여 표시하라.
네비게이션은 홈페이지의 얼굴이다
- 주요 네비게이션은 페이지의 본문 바로 위와 같이 아주 눈에 잘 띄는 곳에 배치하라.
- 배너 광고처럼 보이지 않도록 주의하라. - 네비게이션 항목에서 비슷한 항목은 한 곳으로 그룹화하라.
- 동일하거나 비슷한 유형의 링크를 여러 영역에 제공하지 마라.
- 홈페이지에서는 로고나 'Home' 등의 홈페이지로 연결되는 링크를 클릭할 수 없게 만들어라.
- 네비게이션 카테고리 제목에 조어를 사용하지 마라.
- 사이트에 쇼핑 카트(장바구니) 기능이 있다면 홈페이지에서 쇼핑 카트로 바로 연결되는 링크를 제공하라.
- 단순 텍스트 링크만으로도 카테고리 제목을 충분히 구별할 수 있다면 가급적 아이콘을 사용하지 마라.
- 아이콘은 즉시 컨텐츠를 파악할 수 있는 경우에만 사용하라.
검색 도구를 사용하라
- 홈페이지에는 검색 페이지로 연결되는 링크가 아니라 바로 검색어를 입력할 수 있는 입력창을 제공하라.
- 입력창은 충분히 넓어야 한다. (알파벳 기준 25~30자)
- 검색창 영역에 제목을 붙이지 말고, 입력창 오른쪽에 '검색(Search)' 버튼을 사용하라.
- 'Search'라는 제목에 'Go'라는 버튼보다, 제목없이 'Search' 버튼만 있는 것이 훨씬 간결하다. - 홈페이지에는 단순 검색 기능만 제공하라.
- 고급 검색 기능이나 검색 팁이 있을 경우에는 그에 대한 링크만 제공하라. - 홈페이지에서의 검색은 사이트 전체에 대한 검색으로 기본 설정되어 있어야 한다.
- 검색 범위가 제한되어 있을 경우에는 반드시 명시한다. - 사이트 검색 기능에는 '전체 웹 검색' 기능을 제공하지 마라.
- 사용자들이 전체 웹에서의 검색을 할 때 선호하는 검색엔진이 따로 있게 마련이다.
툴과 단축키는 신중히 사용하라
- 사용자들이 중요도가 높은 임무에 바로 접근할 수 있도록 구성하라.
- 아주 핵심적이고 우선순위가 높은 임무를 처리해주는 것이 아니라면 홈페이지에서 보여줄 필요가 없다.
- 사용자들이 필요해서가 아니라 제공할 수 있기 때문에 제공하는 서비스는 삼가한다. - 북마크하거나 브라우저의 '시작페이지'로 설정하는 것과 같이 브라우저에서 기본적으로 제공하는 기능을 사이트에서 별도로 제공할 필요는 없다.
그래픽과 애니메이션
- 그래픽은 장식적인 요소보다는 실제적인 컨텐츠로서의 가치를 가져야 한다.
- 컨텐츠와 관련성이 없는 그래픽은 중요한 컨텐츠로부터 사용자들의 관심을 빼앗는다. - 그래픽이나 사진이 관련 기사 내용의 의미를 명확히 전달하지 않는 경우에는 캡션을 달아라.
- 인물 사진에는 항상 캡션을 다는 것이 좋다. - 디스플레이 크기에 맞도록 사진과 다이어그램을 적절히 편집하라. (축소 & 잘라내기)
- 워터마크가 있는 그래픽을 사용하지 마라.
- 복잡하고 페이딩 아웃 처리된 그래픽, 배경 이미지 위에 텍스트가 있는 그래픽은 판독하기 어렵다. - 애니메이션을 홈페이지의 한 항목에 사용자들의 관심을 끌어들이기 위한 목적으로 사용하지 마라.
- 사용방법 설명 등을 위한 애니메이션처럼 컨텐츠로서 가치가 있는 것이라도 홈페이지에 사용하는 것은 부적절하다. 홈페이지에는 사용자들의 관심을 끌기 위한 것들이 많다. - 로고, 태그라인, 주요 헤드라인과 같은 페이지의 핵심적인 요소는 절대로 애니메이트시키지 마라.
- 플래시 인트로 페이지를 보여주고 싶은 경우는 그것을 디폴트로 설정하지 말고 사용자들이 선택할 수 있도록 배려하라.
그래픽 디자인은 사용자 중심이어야 한다
- 페이지상에서 크기, 색상 등과 같은 폰트 스타일과 기타 텍스트 포맷은 제한적으로 사용하라.
- 텍스트와 배경색이 선명하게 대비되도록 사용하여 글자의 가독성을 높여라.
- 800 x 600 화면 사이즈에서 좌우 스크롤을 사용하지 마라.
- 가장 핵심적인 페이지 요소는 800 x 600 스크린 크기를 기준으로 스크롤하지 않고 한 화면에 볼 수 있어야 한다.
- 아래로 스크롤해야 볼 수 있는 컨텐츠가 있다면 그 내용이 아래에 있다는 것을 알리는 시각적 장치를 넣어야 한다. - 홈페이지 크기가 다양한 해상도에 조절될 수 있도록 유동적인 레이아웃을 사용하라.
- 로고는 광고처럼 보이지 않도록 사려깊게 사용하라.
- 제품, 정책이나 프로그램을 위한 별도의 로고는 내부용으로만 사용하라.
유저 인터페이스(UI) 도구
- 불릿과 같은 도구는 반드시 클릭되도록 해야 한다.
- 사용자들이 검색 기능을 기대하는 홈페이지 상단 부분에 여러가지 텍스트 입력창을 사용하지 마라.
- 드롭다운 메뉴는 세부 항목을 보고 알 수 있는 것이 아니라면 함부로 사용하지 마라.
제목 표시줄의 역할
- 제목 표시줄은 회사 이름과 같은 정보 전달력이 있는 단어로 시작하라.
- 'Welcome', 'Homepage', 'a', 'the'와 같이 의미없는 단어로 시작되는 제목 표시줄은 북마크 목록이나 검색 결과 목록에서 차별적인 정보를 전달하지 못한다. 갖가지 도형으로 장식된 제목 표시줄도 마찬가지다. - '.com'과 같은 도메인의 기관 이름은 'Amazon.com'과 같이 회사명의 일부가 아닌 경우에는 제목 표시줄에 포함시키지 마라.
- '.com'과 같은 사이트 이름은 온라인과 오프라인에서의 회사 존재를 인위적으로 구별하게 만든다. - 제목 표시줄에 '홈페이지'라는 말을 포함시키지 마라.
- 사이트의 각 페이지는 서로 다른 제목 표시줄을 가지고 있어야 북마크나 검색 목록에서 다른 페이지들과 혼동되지 않는다. 홈페이지를 홈페이지라고 지정할 필요는 없다. - 제목 표시줄에 사이트에 대한 간단한 설명을 추가하라.
- 짥고 명확한 태그라인을 갖고 있다면 그것을 제목 표시줄에 사용해도 좋다. - 제목 표시줄은 알파벳 기준으로 7-8 단어 미만, 총 64자 미만으로 제한하라.
URL은 간단하게 하라
- 상업용 웹사이트의 홈페이지 URL은 "http://www.도메인.co.kr"로 되어야 한다.
[주의1] 도메인 이름 다음에 복잡한 코드나 'index.html'과 같은 것을 추가하지 마라.
[주의2] 사용자들이 입력한 URL이 유지되도록 하라.
[주의3] 'www.도메인.co.kr', '도메인.co.kr'에 모두 연결되도록 하라. - 외국(특히 미국)에 주요고객이 있지 않다면 국가 도메인(.kr)을 사용하라.
- 해외에도 주요고객이 있다면 '.co.kr', '.com' 모두 등록해 두는 것이 좋다. - 가능하다면 도메인 이름을 사이트의 대체 철자나 약어, 흔히 실수하는 철자로도 등록하라.
[사례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' - 대체 도메인 이름을 허용한다면 한 가지 도메인을 공식 버전으로 채택하고, 다른 도메인으로 접속한 사용자들은 공식 도메인 사이트로 보내주어라.
- 온라인, 오프라인 홍보에는 공식 도메인 이름만을 사용한다.
뉴스와 보도 자료
- 헤드라인은 최소한의 단어로 최대의 정보를 줄 수 있도록 간결하고 설명적이어야 한다.
- 헤드라인은 전체 기사보다는 바로 아래의 부제와 관련성이 높아야 한다. - 홈페이지에서 실어주는 뉴스 기사나 보도 자료에 대해 요약 내용을 작성하고 편집하라.
- 기사의 첫문장을 그냥 따서 사용하지 마라. 부제는 기사를 설명하지 말고 실제 내용의 요약이어야 한다. 사용자들의 클릭을 유도하기 위해 실제 내용을 감추는 것은 적절하지 못하다. - 부제보다는 헤드라인을 전체 기사로 링크시켜라.
- 헤드라인을 눈에 띄는 링크 표시로 하기 어려운 스타일이라면, 부제 아래에 별도의 '전체 기사(Full Story)' 링크를 첨가하라. - 홈페이지의 모든 뉴스 기사가 1주일 이내에 발생한 것이라면 각 기사의 부제 밑에 날짜와 시간을 표기할 필요는 없다.
[예외] 단, 전체 기사 페이지에는 날짜와 시간을 눈에 띄게 표기해야 한다. 기사는 '오늘'이니 '다음 주'니 하는 상대적인 시간으로 언급하면 안 된다.
팝업 창과 스플래시 페이지
- 메인 URL은 실제 홈페이지로 연결시켜주어야 한다.
[예외] 스플래시 화면은 미성년자와 같은 일부 사용자들에게 부적절한 컨텐츠를 취급할 경우에만 적절하다. - 팝업 창을 피하라.
[대안] 아주 중요한 정보는 홈페이지에서 눈에 잘 띄는 영역에 배치하라. - 제1의 언어가 없이 여러 언어로 된 웹사이트가 아니라면 경로 페이지를 사용하지 마라.
- 사이트의 제1의 언어가 있다면 그 언어로 된 홈페이지로 바로 연결시키고, 여러 언어의 국제 버전 링크를 포함시켜라.
광고를 광고답지 않게 만들어라
- 타사 광고는 페이지의 덜 중요한 장소에 배치하라.
- 홈페이지의 중요한 항목을 배너 광고 위쪽에 배치하지 마라. - 페이지 상단의 표준 배너 영역이 아닌 곳에 광고를 배치하는 경우에는 광고와 사이트 컨텐츠를 혼동하지 않도록 광고라는 라벨을 붙여주어라.
- 사이트의 일반적인 기사를 돋보이게 하기 위해 광고 형식을 사용하지 마라.
환영 메시지는 필요악이다
- 사이트의 사용자들에게 환영 인사를 할 필요는 없다.
[예외] 등록 회원의 로그인을 확인해 주는 환영 메시지는 적절히 잘 사용해야 한다.
기술적인 문제와 긴급 상황 대처법을 알려라
- 웹사이트가 다운되거나 웹사이트의 중요한 부분이 작동되지 않을 경우에는 홈페이지에서 명확하게 공고하라.
- 서비스 재개 시간을 명시하고, 대체 서비스를 제공하라. 준비 중인 서비스에서 '공사중' 메시지는 바람직하지 않다.
디자인에 대한 홍보를 하지 마라
- 검색 엔진, 디자인 회사, 선호하는 브라우저, 기반 기술에 대한 정보를 위해 홈페이지 공간을 낭비하지 마라.
[대안] 기술 지향적인 사이트에서는 'About Us'에 '사이트 운영기술(How We Run This Website)' 섹션을 포함하는 것이 적합하다. - 웹사이트로 상을 받은 경력은 홈페이지에서 자랑하지 않는 것이 좋다.
[대안] 디자인이나 웹사이트 자체의 다른 측면에 대한 상은 'About Us' 영역에서 다루어야 한다.
[예외] 제품, 서비스의 질, 고객과 관련된 분야로 받은 상은 홈페이지에 언급해도 좋다. 단, 너무 오래 공지하지는 마라.
페이지 리로드와 리프레시
- 업데이트 사항을 사용자들에게 알리기 위해 홈페이지를 자동으로 리프레시 하지 마라.
- 리프레시할 경우에는 뉴스 업데이트와 같이 실제로 변한 컨텐츠만 업데이트되도록 하라.
홈페이지의 개인화
- 개인화된 정보를 제공할 수 있는 영역이 있을 경우, 일반화된 컨텐츠를 제공하지 마라.
- 일반적인 환영 인사는 피하는 것이 좋다. 100명에게 똑같이 뿌려진 편지처럼 불쾌할 수도 있다. 어느 지역의 방문자인지도 모르면서 서울의 날씨를 보여주거나 하는 것도 좋지 않다. - 색상과 같은 유저 인터페이스의 기본적인 모양을 개인화하는 서비스를 제공하지 마라.
- 보편적으로 가장 읽기 좋은 최고의 디자인을 만들어내는 데 자원을 집중하라. 단, 폰트 크기는 상대적인 크기로 해서 사용자들의 브라우저 설정을 존중하라.
사용자 등록과 혜택
- 홈페이지에서 회원 등록을 위한 단순 링크를 제공하지 말고, 등록하면 얻게 되는 고객의 혜택을 설명하라.
- 이메일 주소를 요청할 경우에도 그에 따른 혜택을 설명하라.
커뮤니티 사용
- 채팅룸이나 토론방과 같은 사용자 커뮤니티는 단순 링크로 하지 말고, 홈페이지에 실제 토론 주제를 열거하거나 토론 스케줄을 제공하라.
- 상업용 사이트에는 '방명록(Guestbook)'을 제공하지 마라.
날짜와 시간 표시
- 뉴스나 실시간 채팅, 주가 등과 같이 시간이 중요한 정보에 대해서는 날짜와 시간을 표기한다.
- 홈페이지에 시간을 표시하려면 컴퓨터에서 생성된 현재 시간이 아니라 컨텐츠의 업데이트 시간을 사용자들에게 보여준다.
- P.M이나 p.m.처럼 표준화된 약어 표기를 사용하라.
- 날짜 표시는 애매하지 않게 하라.
- '01/02/03'과 같은 표기는 국가에 따라 다른 관습을 가지고 있어 애매하다. '2003년 1월 2일', '2003.1.2 (목)' 처럼 명확하게 표기해야 한다.
주가 지수와 숫자 표기
- 주가 포인트처럼 상승이나 하락폭이 중요한 컨텐츠는 변화율도 표기하라.
- 'IBM'과 같이 일반화된 약어가 아니라면 철자를 다 써준다.
- 4자리 이상의 숫자에는 천 단위마다 '쉼표(,)'로 구분하라.
- 숫자 컬럼은 소수점을 맞추어서 정리하라.
[참고서적] "성공적인 홈페이지 유저빌러티 가이드" (제이콥 닐슨 외/안그라픽스 역간)
댓글
댓글 쓰기