웹사이트를 위한 시각적 디자인 최적화
사이트나 페이지의 내용을 시각적으로 이해하기 쉽게, 사용하기 쉽게, 읽기 쉽게 하고, 예쁘게 하는 것은 시각적 디자인이 담당하는 중요한 역할입니다. 특히, 검색결과를 통해 사이트에 방문하는 유저를 의식할 경우, 시각적으로 심플하거나 사용하기 편하게 하는 것이 중요합니다.
학습이 필요 없는 심플함을 실현해라
검색결과를 경유해서 사이트를 방문하는 유저는 그 사이트에 아직 적응되지 않았기 때문에 자연스럽게 정보를 취득하거나 기능을 이용하는데 곤란한 상황에 처하기 쉽습니다. 그 사이트에 적응하지 않은 유저라도 헤매지 않고 이용할 수 있도록 하기 위해 페이지 내의 정보를 알기 쉽게 배치하고 학습에 필요 없는 정보를 취득할 수 있도록 해두는 것이 중요합니다.
예를 들어, 표제에 작은 글자가 사용 되었을 경우에는 그 부분이 표제인 것을 이해하기 위해서 그 사이트의 구조에 대해 유저가 학습 할 필요가 있습니다. 또, 링크에 사용되는 글자에 밑줄이 없고 글자 색이 노란색일 경우, 마우스나 키보드를 조작하지 않는 한 유저는 그 부분이 링크라는 것을 알 수 없습니다. 내비게이션, 표제, 단락, 링크 등의 구성요소가 시각적으로도 논리적으로도 확실히 구별되어 많은 사람이 특별한 학습 없이도 그것을 알 수 있도록 디자인해 두는 것은 검색결과를 통해 액세스한 유저의 실수를 피하고, 검색엔진에 대해서도 정확한 정보 전달로 연결됩니다.
콘텐츠에 포커스를 맞춘 레이아웃을 한다
검색엔진을 통해 유저를 끌어들이기 위해서는, 랜딩페이지 방문 후 바로 필요한 정보를 찾을 수 있는 레이아웃을 만들어 놓는 것이 중요합니다. 검색 유저는 정보를 원해서 검색하고 있는 것이기 때문에, 그 목적이 되는 정보가 없거나, 또는 없을 것 같은 느낌이 들게 하는 것은 검색 유저의 활용 경험을 나쁘게 하고, 이탈률을 높이는 원인이 됩니다. 즉, 검색 유저에게 있어서는 「찾고 있는 정보가 있다」만으로는 부족하고, 「찾고 있는 정보를 발견하기 쉽다」는 느낌의 레이아웃이 되어 있는 것이 중요하다는 것입니다.
페이지의 윗 부분이 홍보나 각종 공지 등 콘텐츠의 주요 부분과는 상관없는 요소로 채워져 있어, 스크롤 하지 않으면 콘텐츠가 보이지 않는 레이아웃은 피해야 합니다. 이것은 단순히 검색 유저의 경험을 악화 시킬 뿐 아니라, 검색 결과 상위 노출로부터 제외 될 가능성이 있기 때문입니다. 특히 페이지의 윗 쪽이 홍보로 가득 차 있을 경우에, Google은 검색결과의 랭킹을 떨어뜨리는 처리(페이지 레이아웃 알고리즘)를 한다고 발표했습니다. Google은, 일반적인 브라우저에서 페이지를 표시할 때, 화면을 스크롤 없이 볼 수 있는 범위(Above the fold)에 콘텐츠가 표시되는지 안 되는지 테스트 하는 것을 추천하고 있고, 브라우저 사이즈를 확인하는 툴도 공개하고 있습니다.
표제나 중요부분을 강조한다
대부분의 유저는 웹 페이지를 속독하면서 보고, 자신에게 필요한 정보만을 찾아 읽습니다. 이 때, 자신에게 필요한 정보가 있는 부분을 찾는 표시가 되는 것은 표제, 단락의 앞머리, 강조된 문자열, 링크 문자열 등 입니다. 이것들이 알기 쉽게 쓰여 있으면 유저는 페이지 내의 정보를 정확하게, 헷갈리지 않고 얻을 수 있습니다. 검색엔진도 유저와 마찬가지로, 표제, 단락의 앞머리, 강조된 문자열, 링크에 쓰여져 있는 문자열을 바탕으로 그 페이지를 분석합니다. 이것들을 알기 쉽게함과 동시에 키워드를 적절히 포함해서 쓰면 검색엔진에 의해 올바른 평가를 받을 수 있습니다.
정리해 보면, 표제나 강조의 적절한 사용은 유저와 검색엔진 모두에게 있어 다음과 같은 효과를 가져옵니다.
- 어떤 정보가 페이지 내에 포함되어 있는가(또는 포함되어 있지 않은가)를 파악하기 쉬워진다.
- 유저가 페이지 내의 정보를 정확하게(일의적으로)이해하기가 쉬워진다.
- 검색엔진이 페이지 내의 중요 부분을 분석하기 쉬워진다.
또한, 표제에는 그 표제와 이어지는 내용을 정확하게 표시되어 있어야 하고, 동시에 내용을 상상하기 쉬워야 합니다. 그리고, 그 표제가 다음 항목까지 자연스럽게 읽어 나갈 수 있는 원동력이 되도록, 흥미를 끌 수 있을 정도로 매력적이라면 더할 나위가 없겠죠. 그런 의미에서 카피라이팅의 지식은 유용하게 쓰입니다.
문장을 읽기 쉽게 한다
웹 페이지 상의 문장을 읽기 쉽고, 이해하기 쉽게 하기 위해서는 문장 그 자체의 질을 향상 시키는 웹 라이팅이나 문단을 나눠 콘텐츠를 작성하는 방법이 유용합니다. 하지만 그것 뿐만 아니라 시각적인 디자인 면에도 신경 써야 할 점이 있습니다.
적절한 글자 사이즈를 지정한다
너무 크거나 너무 작은 글자 사이즈는 쉽게 읽는데 방해가 됩니다. 브라우저 표시 상에서의 글자사이즈는 유저가 조절 할 수 있는 것을 전제로 하지만, 모든 유저가 그런 조작에 능숙하다고는 단정지을 수 없다는 점에 유의해야 합니다. 보다 많은 유저들에게 있어 최적의 글자 사이즈는 포털 사이트나 신문사 사이트의 뉴스기사 페이지의 본문 사이즈를 참고하면 좋습니다.
적절한 행간을 지정한다
행간이 너무 붙어 있다거나 또는 너무 떨어져 있으면 읽기에 영향을 주게 됩니다. 보다 많은 유저에게 적절한 행간은 포털 사이트나 신문사 사이트의 뉴스기사 페이지의 행간을 참고하면 좋습니다.
배경색과 글자색의 명도를 확보한다
글자의 가독성을 확보하기 위해서는, 배경색과 글자색의 충분한 명도 차이와 색 차이가 확보 되어야 합니다. 구체적으로 명도차이는 125이상, 색 차이는 500이상이라는 것이 W3C의 추천 수치입니다. 이것은 Colour Contrast Analyser를 사용하면 온라인에서도 확인할 수 있습니다.
사진이나 그림, 영상을 적절히 사용한다
글자만으로는 전달하기 어려운 이미지를 전달하기 위해 사진을 사용하거나, 복잡한 것을 설명하기 위해 일러스트를 이용하거나, 대량의 데이터를 알기 쉽게 보여주기 위해 그래프를 사용하거나 기계 등의 조작 순서를 설명하기 위해 동영상을 사용하는 등의 방법은 내용을 이해하는데 더 알기 쉽게 도와줍니다. 한편, 콘텐츠와 관계 없는 Eye catch나 이미지 영상, 필요이상의 장식 등은 이용자가 잘못 이해하거나 이용자의 집중력을 떨어뜨리는 등 좋지 않은 영향을 줍니다. 사진이나 그림, 영상은 고품질로 의미 있게 사용하도록 합시다.
그 곳이 어떤 페이지인지, 어디로 이동 할 수 있는지를 설명한다
검색결과를 통해 액세스 한 유저에 대한 배려로써 필요한 것은 어떤 사이트의 어떤 페이지에 액세스했는가를 정확히 알려주는 것과, 그 페이지에서 어떤 페이지로 이동이 가능한지를 알기 쉽게 설명하는 것입니다. 사이트에 아직 적응하지 못한 유저라 하더라도 헤매지 않고 사이트를 돌아 볼 수 있도록 배려함으로써 유저의 혼란이 불러일으키는 기회의 상실을 최소한으로 억제합니다. 이를 위해서는 학습이 필요 없는 내비게이션을 만들어 놓는 것이 해결책이 됩니다. 구체적으로는 다음과 같습니다.
Topic pass를 배치한다
각 페이지에 Topic pass(사이트 이동경로)를 두고 유저가 언제나 자신이 있는 장소를 파악 할 수 있도록 디자인 합니다. 유저가 사이트의 어느 위치에 있는가를 항상 표시하는 배려는 검색결과를 통해 액세스 한 유저에게 특히 효과가 좋습니다. 또, 상위 계층으로 이동 할 수 있도록 하면, 관련정보를 원할 때 상위계층으로 이동하기 위한 동선을 확보할 수 있습니다.
탑 페이지의 링크를 배치한다
모든 페이지에 탑 페이지의 링크를 배치합니다. 이렇게 하면, 검색결과를 통해 사이트 내의 페이지에 액세스 한 유저가 탑 페이지에 이동하는 동선을 확보함과 동시에, 어떤 사이트에 액세스 했는지를 정확히 알려 줄 수 있습니다.
사이트 내의 모든 페이지에 공통 내비게이션을 둔다
사이트 내의 모든 페이지에 공통 Navigation을 두고, 유저가 사이트 내의 어떤 페이지에 있어도 중요한 콘텐츠에 한 번만의 클릭으로 이동 할 수 있도록 디자인 합니다. 이를 통해 유저의 이동을 도울 뿐만 아니라, 중요 콘텐츠에 Link popularity를 집중시킬 수 있습니다.
Anchor text는 링크 된 곳을 정확히 표시하게 한다
Anchor text에는 링크 된 곳의 페이지와 관련된 키워드를 포함하여 링크된 페이지를 정확히 나타내는 글자열을 사용합니다. 이것은 유저에게 링크 된 곳의 정보를 정확히 전달함과 동시에, 검색엔진에도 링크 된 곳의 정보를 전달하는 효과가 있습니다.
영상을 사용한 링크 사용에 주의한다
이미지로 된 링크를 사용 할 경우에는 링크에 사용하는 이미지의 border를 0으로 지정하면, 미방문 링크와 방문완료 링크의 구별이 힘들고 유저의 혼란을 불러일으킬 가능성이 있다는 것에 주의해야 합니다. 링크 이미지의 사용은 필요하더라도 최소한으로 줄이고, 링크에는 가능한 한 TEXT를 사용하도록 합시다.
링크 스타일을 표준에 가깝게 한다
대부분의 유저는 링크 스타일에 대한 예비 지식을 가지고 있습니다. 브라우저의 디폴트스타일로써 차용된 것이나, 많은 사이트에서 사용 되고 있는 것이 그것으로 다음과 같은 스타일입니다.
- 파란색 밑줄이 있는 문자열이 미방문 링크
- 붉은색 밑줄이 있는 문자열이 방문완료 링크
이러한 스타일에서 크게 벗어난 스타일을 링크에 적용한 경우, 그것이 링크인지 알기 어렵고, 유저를 혼란 시킬 가능성이 있습니다. 다음 항목을 가능한 한 지킨다면, 그러한 혼란을 최소한으로 줄이고, 유저의 이해와 페이지 이동을 도울 수 있습니다.
링크 밑줄은 지우지 않는다
그 문자열이 링크 라는 것을 명시하기 위해, 링크의 밑줄을 지우지 않도록 합니다.
미방문 링크에는 청색 계열의 글자 색을 사용한다
그 링크가 미방문 링크라는 것을 명시하기 위해 미방문 링크에는 청색 계열의 글자 색을 사용합니다.
방문완료 링크에는 붉은 계열의 글자 색을 사용한다
그 링크가 방문완료 링크인 것을 명시하기 위해 방문완료 링크에는 붉은 계열의 글자 색을 사용합니다.
링크 이외의 문자열에 청색 계열 또는, 붉은 계열의 글자 색을 사용하지 않는다
링크 이외의 부분에 청색 계열 또는 붉은 계열의 글자 색이 사용되면 유저가 그 부분을 링크라고 착각해 혼란을 불러일으킬 가능성이 있습니다. 이것을 피하기 위해, 링크 이외의 문자열에는 청색 계열이나 붉은색 계열의 글자 색은 사용하지 않도록 합니다.
링크 이외의 문자열에 밑줄을 사용하지 않는다
링크 이외의 부분을 꾸미는데 밑줄을 사용하면, 유저가 그 부분을 링크라고 착각해 혼란을 불러일으킬 가능성이 있습니다. 이것을 피하기 위해, 링크 이외의 문자열을 꾸밀 때, 밑줄을 사용하지 않도록 합니다.
미방문 링크와 방문완료 링크에 같은 색을 지정하지 않는다
방문 완료 링크와 미방문 링크의 글자 색에 같은 색을 지정하면 유저는 그것을 구별하지 못하고, 같은 페이지를 왔다 갔다 하는 등 혼란을 불러일으키는 원인이 됩니다. 미방문 링크와 방문완료 링크에는 반드시 다른 글자 색을 지정하고, 시각적으로 구별할 수 있도록 해야 합니다.
심플함을 명심해라
페이지 내의 정보를 찾기 쉽고, 알기 쉽게 하는 가장 간단하고 효과적인 방법은 「쓸데없는 요소・쓸데없는 장식을 줄인다」입니다. 화면 구성에서 쓸데없는 요소나 쓸데 없는 장식을 최대한 생략하면, 유저는 헤매지 않고 목적으로 하는 정보를 찾을 수 있고, 이해하기도 쉬워집니다. 반대로, 콘텐츠와 상관없는 요소가 많으면 많을수록, 유저는 중요한 부분을 찾기가 힘들어집니다. 페이지에서 쓸데없는 요소를 없애고, 페이지 내에서 중요한 부분의 비율을 높이는 것은 검색엔진이 읽어 들이는 쓸데없는 정보를 최대한 줄이는 것으로 이어지기 때문에 SEO의 시점에서 볼 때 효율적입니다. 여기서도 KISS(Keep It Simple, Stupid)는 살아 있습니다.
그리고 물론 미적인 부분도 챙겨라
시각적인 디자인의 역할은 콘텐츠를 보다 알기 쉽고 이해하기 쉽게 할 뿐만 아니라, 사이트나 콘텐츠의 신뢰성을 높인다는 역할도 담당하고 있습니다. 하지만, 이 신뢰성의 문제는 오히려 나쁜 디자인에 의해 받는 악영향을 피해야 한다는 문맥이 이해하기 쉬울지도 모릅니다. 안정감이 없는 레이아웃, 저렴해 보이고 개성이 강한 장식, 어수선한 배색, 퀄리티가 낮은 로고 등은 그 사이트나 콘텐츠의 제작자가 일반인이라는 것을 대변해 줍니다. 이런 경우, 아무리 콘텐츠가 우수하다고 하더라도 아무 소용이 없습니다.
시각적 디자인에 따라, 콘텐츠의 가치를 실제보다 그 이상으로 보이게 하는 것은 어려울지도 모르지만, 실제보다 가치가 낮아 보이게 하는 것은 훨씬 간단합니다. 이런 의미에서는 시각적인 면에서 좋은 인상을 주는 것은 콘텐츠 그 자체와 마찬가지로 중요한 것이라고 할 수 있습니다. 같은 정보를 가지고 있는 콘텐츠라 하더라도, 유저가 받는 인상은 시각적인 디자인에 따라 크게 달라집니다. 콘텐츠를 그 가치대로 받아들이게 하기 위해서 잘 정리 된 레이아웃, 개성이 너무 강하지 않은 장식, 잘 조합 된 배색, 퀄리티 높은 로고마크 등, 아름답고 신뢰감 있는 시각적 디자인을 적용해야 합니다.