— ISE CREAtive Manual

A Guide To Heuristic Website Reviews

A Guide To Heuristic Website Reviews(휴리스틱분석가이드)

Advertisement

In this article, we’ll explore a scoring system for rating and comparing websites, we’ll visualize those ratings using infographics, and we’ll see what data and structure this method provides for reviewing websites.

이 글에서는 사이트를 비교하고 평가하는 점수체계에 대해 탐구하고 그 정보를 어떻게 시각화 할 지, 웹사이트 리뷰를 위해 이러한 방법론에 어떤 데이터 및 구조가 제공되는 지 살펴볼 것이다.

How To Tell Whether A Website Is Junk(웹사이트에 대해 평가하는 법)

We are all reviewers. We review many websites every day without even realizing it. In fact, many of us are experts at it. We don’t realize it because the whole process occurs in moments.

That’s how it is. We use websites; we judge websites. Even if we don’t know we’re doing it, we make judgements about trustworthiness, credibility, competency, reliability, design and style within seconds of arriving on a Web page. After looking around, we also get a pretty good feel for the user experience and usability.

우리는 모두 리뷰를 하는 사람들이다. 인식하지 못하는 새, 우리는 매일 웹사이트를 리뷰하고 있다. 사실 우리는 대부분 이에 대한 전문가들이다. 단지 이러한 일련의 과정이 순간적으로 이루어지기 때문에 인식하지 못할 뿐이다.

이것이 평가하는 방식이다. 우리는 웹사이트를 사용하고, 웹사이트에 대해 판단한다. 우리가 알아채지 못하는 사이에도 가치, 신뢰도, 효율성, 안정성, 디자인, 스타일 등을 순간적으로 평가하고 있다. 웹사이트를 모두 둘러본 뒤에 사용자 경험과 사용성에 대해서 꽤 괜찮은 느낌을 받기도 한다.

Consultancy Reviews(컨설팅리뷰)

For many years, the agency I work for has conducted detailed reviews of its clients’ websites. As part of the consultancy process, we offer recommendations for any redesign or redevelopment work that is necessary.

Snap judgments may be useful and unavoidable, but when it comes to reviewing websites professionally, we need to be more organized and thorough, and we do this by using a review methodology. It also pays in both time and effort to be formulaic and consistent in our approach, because there are so many things to look at when considering a website.

To make this easier, we use a set of heuristics to score websites, along with a simple method to quickly visualize any weaknesses. I use a set of heuristics that I have worked with and edited and updated to suit the type of projects I work with, based on original work created by User Focus.

[Editor’s note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

다년간, 필자가 근무하는 에이전시에서는 클라이언트들의 웹사이트에 대한 세부적인 리뷰들을 실시해왔다. 컨설팅 프로세스의 한 과정으로서, 디자인과 개발이 필요할 경우 권고하게 된다.

훑어보기식의 리뷰는 아마 유용하고도 불가피한 일이다. 그러나 리뷰를 전문적으로 해야 할 때는 좀 더 체계적이고 전체적으로 바라보아야 하고 이를 할 때는 평가 방법론을 적용하게 된다. 이를 위해서는 일관되고 정형적인 결과물을 만들기 위한 시간과 노력이 당연히 필요할 수 밖에 없다.

이를 쉽게 하기 위해서 우리는 일련의 휴리스틱 평가툴을 이용한다. 웹사이트의 취약점에 대해 빨리 시각화를 할 수 있는 간단한 도구이다. 사용자 관점으로 만들어진 원본자료에 기초해서 우리가 작업한 프로젝트에 적합하게 수정 보완한 평가도구이다.

Heuristics(휴리스틱: 경험에 기초한 평가 방법)


Artistic Merit in ice dance.

(Image: Rick S.)

A heuristic is just a fancy word for a measurement of something that can’t readily be quantified (i.e. when there are no actual numbers to judge whether item A is better or worse than item B). In a 100 meter sprint, the winner is easily identified by concrete data. In ice dancing, the contestants are judged based on a set of technical and artistic criteria, giving them a set of scores.

휴리스틱이라는 말은 손쉽게 수치화하기 어려운 무언가를 측량할 때 사용하는 마법같은 단어이다(예를 들어, A가 B보다 낫다고 평가할 수 있는 정확한 숫자가 없는 경우). 100미터 경주의 경우 정확한 데이터를 가지고 승자를 결정할 수 있지만, 아이스 댄싱의 경우에는 평가단이 기술점수와 예술점수를 주고 승자를 가린다.

All That Glitters Is Not Gold(반짝인다고 해서 모두 금은 아니다)

We might be swayed by something that looks good, but we all know that beauty is only skin deep. As with everything that glitters, the job of the reviewer is to poke about and see if they really have struck gold.

Conversely, some websites that are judged harshly for their graphic design are successful beyond measure — I’m looking at you, Amazon, eBay, Craigslist and even Google. These websites aren’t much to look at, but functionally speaking, they do their job well and have evolved over the years to precisely meet their customers’ needs.

As designers, we’re asked to redesign websites that generally are getting to look better and better. It’s getting to the point that we find ourselves questioning the need for a redesign at all. But usually the problems are not immediately obvious in the visuals, layout or code. Sometimes a website is just wrong for the client’s brand; or the experience of performing tasks on it is unpleasant. Sometimes, a website just doesn’t work.

You can’t tell by looking. You need to dig deeper by really using the website, setting yourself tasks and trying things out. Only then will you experience what is really going on. Realizing just how much rethinking, redesigning and redeveloping a website needs often takes a while.

우리는 멋지게 보이는 것들에 쉽게 좌우되기도 한다. 하지만 미(beauty)라는 것이 종이 한 장의 차이라는 것도 알고 있다. 바로 평가자의 역할이 바로 반짝이는 것이 실제로 금인지 아닌지를 찔러보고 살펴보는 것이다.

반대로, 그래픽디자인에서는 혹평을 받은 웹사이트가 매우 성공적인 경우가 있다 – 아마존, 이베이, 크레이그리스트(벼룩시장), 구글 같은. 이 웹사이트들은 그다지 멋져보이지는 않지만 기능적으로 훌륭하며 고객의 니즈에 부합하며 해를 거듭하며 진화해 왔다.

디자이너로서, 우리는 웹사이트를 좀 더 멋져보이도록 리디자인 할 것을 요청받는다. 그리고 과연 전부 리디자인 할 필요가 있는가라고 고민하는 것부터 시작한다. 하지만 코드, 레이아웃, 비주얼 등의 문제점들이 바로 눈에 보이는 경우는 별로 없다. 브랜드와 웹사이트가 단지 맞지 않아 보일 수도 있고, 업무를 처리하는 경험이 만족스럽지 못한 경우도 있다. 혹은 웹사이트 자체가 별 이유없이 효과가 없는 경우도 있다.

보이는 것으로는 뭐라 말할 수 없을 것이다. 웹사이트를 실제로 사용해보면서, 태스크를 설정해 보면서, 문제점들을 끄집어 내기 위해 깊게 깊게 파들어가야 한다. 그래야지만 무엇이 어떤 식으로 돌아가는지에 대해 비로소 경험할 수 있을 것이다.

Metrics For Success(성공에 대한 통계수치)

The success of most websites can be measured by some metric, be it the number of sales, uploads, downloads, clicks, comments or sign-ups. But a website can be successful in sales and still have problems; for example, it might be successful because of excellent marketing, because of its offline reputation (as in the case of high-street brands) or from having cornered the market. That does not mean it is without problems. But many more websites have no quantifiable metrics by which we can determine how good or bad they actually are. Judging these websites is more difficult and requires a bit more leg work.

대부분의 웹사이트의 성공 여부는 매출, 업로드, 다운로드, 클릭 수, 댓글, 로그인 등 일련의 통계적인 결과에 의해 측정 된다. 하지만 매출이 뛰어난 웹사이트의 경우에도 여전히 문제점들을 안고 있을 수 있다. 예를 들어, 마케팅이 성공적이어서, 혹은 온라인이 아닌 오프라인에서의 기존 평판이 좋기 때문에, 아니면 시장 자체의 환경이 좋기 때문에 매출이 좋을 수 있다. 이러한 결과들이 문제점이 없다는 것을 뜻하지 않는다. 오히려 많은 웹사이트들은 좋다 나쁘다 정량화할 수 있는 통계수치가 없다. 웹사이트를 평가하는 것은 좀 더 어려운 일이고 좀 더 노력을 필요로 하는 일이다.

A Many-Layered Cake(층이 많이 진 케익)


A many layered cake.

(Image: Scheinwerfermann)

When reviewing a website in detail, we have to explore many layers, both on the surface and below, including the following:

디테일한 리뷰 시, 다음의 사항을 따라 안 팎 위 아래로 다양한 레이어들을 살펴보아야 한다.

  • Task orientation and website functionality, / 태스크에 대한 오리엔테이션(안내)과 웹사이트의 기능성
  • Navigation and information architecture, / 네비게이션과 인포메이션 아키텍쳐(정보구조)
  • Forms and data entry, / 입출력 폼과 데이터 구성 요소
  • Trust and credibility, / 신뢰성과 안정성
  • Quality of writing and content, / 컨텐츠와 글의 품질수준
  • Search, / 검색
  • Help, feedback and error tolerance, / 도움말, 피드백 및 에러 처리
  • Page layout and visual/aesthetic design, / 페이지 레이아웃, 비주얼(미학적) 디자인
  • Accessibility and technical design. / 접근성 및 기술적인 디자인

Taking these broad categories, we can devise a list of questions to explore each and get to the heart of the website. This formalizes the process and ensures that the same thought process can be repeated the next time. It also serves as a checklist, ensuring that nothing is forgotten. For example, when looking at the layout and visual design of a website, our questions could include these:

이러한 다양한 카테고리를 살펴보면서, 각각을 심도 깊게 경험하기 위한, 그리고 웹사이트의 중심부까지 다다르기 위한 일련의 설문조항을 만들어 낼 수 있다. 이는 다음에 같은 사고과정을 적용할 수 있도록 프로세스를 공식화 해 준다. 물론 빠진 부분이 없도록 확실히 해주는 체크리스트로의 역할도 해 준다. 일례로 어떤 웹사이트의 레이아웃과 비주얼 디자인을 살펴볼 때, 다음과 같은 질문을 할 수 있다.

  • Are standard elements (such as page titles, website navigation, page navigation and privacy policy) easy to locate? / 표준적인 요소들(페이지 제목, 웹사이트 네비게이션, 페이지 네비게이션, 개인정보보호정책 등)이 찾기 쉽게 위치해 있는가?
  • Is there a good balance between information density and white space? / 여백과 컨텐츠와의 균형있는 배치가 되어 있는가?
  • Does the website have a consistent and clearly recognizable look and feel that will engage users? / 사용자를 붙잡아 둘 만큼 일관성 있고 인지하기 좋은 룩앤필을 가지고 있는가?

For accessibility, we could formulate questions such as these:

접근성을 위해서는 다음과 같은 질문을 구성할 수도 있다.

  • Is the color contrast across the website enough to make all of the content accessible? / 컬러와 컨트라스트가 웹사이트 내 모든 컨텐츠에 접근하기 용이하도록 충분히 표현되어 있는가?
  • Does the website work comfortably at lower resolutions (e.g. 1024 × 768 pixels)? / 낮은 해상도(보통 1024*768픽셀)에서도 보기 좋게 되어 있는가?
  • Does the CSS validate with the W3C’s validation services? / CSS가 W3C 표준에 맞춰서 검증되었는가?

Regarding the written copy, our questions could include:

웹사이트에 쓰인 카피에 대해서는 다음의 질문을 할 수 있다.

  • Are the pages simple to scan on screen? Are they broken up by headings and subheadings? Are the paragraphs short? / 화면을 훑어보기에 간단한 구성인가? 헤드카피와 서브헤드에 의해 구분되어 있는가? 단락은 적절하게 짧게 구성이 되어 있는가?
  • Are acronyms and abbreviations defined when first used? / 약어가 처음 사용될 때 이에 대한 정의가 설명되어 있는가?
  • Does the website favor maps, diagrams, graphs, flow charts and other visuals over long blocks of text? / 긴 분량의 텍스트에서 맵, 다이어그램, 그래프, 플로우차트, 기타 비주얼 등을 제공하는가?

Depth(깊이)

Although relatively easy to conduct, a heuristic review is not quick to perform. However, we can decide just how much depth to go into and how many questions to ask in order to get a feel for the website. The more heuristic measures we use, the longer the process will take; the fewer we use, the less informative the results will be. It’s a matter of striking a balance between the time available and the quality of returns. Selecting heuristics that get to the heart of each category can significantly reduce the amount of effort you need to put in.

휴리스틱평가가 상대적으로 수행하기 쉽다 해도, 이를 실제로 하려면 빨리 되지 않는다. 하지만 웹사이트에 대해 어느정도 느낌을 갖기 위한 질문을 얼마나 많이 할 것인가에 대해 수준을 정할 수는 있다. 평가항목이 많을 수록 프로세스는 더 길어질 것이고, 적을 수록 그것이 가진 정보량은 적어질 것이다. 시간과 결과의 질에 대한 밸런스의 문제이다. 각 카테고리에 대한 휴리스틱 항목을 선택해서 사용하는 것은 많은 노력과 시간을 절감해 줄 것이다.

Devising A Scoring System(스코어 체계 만들기)

To get a yardstick score for each heuristic, a simple score can be given. For example, 0 points if it falls short of a metric, 1 point if it’s halfway there, and 2 points if it does the job. So, if acronyms or abbreviations are defined in some sections but not in others, then the heuristic would score only 1 point. If the website worked comfortably at 1024 × 768 pixels, then it would receive 2 points.

각각의 휴리스틱에서 점수를 만들어 내기 위해 간단한 점수체계를 만들어 줄 수 있다. 예를 들어, 평가기준에 못미칠 때 0포인트, 절반 정도의 수준일 때 1포인트, 기준에 부합할 때 2포인트를 줄 수 있다. 만약 약어를 사용할 때의 기준에 대해 어떤 섹션에서는 괜찮고 어떤 곳에서는 미흡할 때 1포인트를 줄 수 있다. 또한 예를 들어 1024×768픽셀에 적합하게 보여진다면 2포인트를 줄 수 있다.

These points can be totalled across each category to give a quantifiable sense of what’s going on across the website, as shown here:

웹사이트 전체에 걸쳐 정량화된 점수를 줄 경우 아래와 같이 총합을 정리할 수 있다.

Table showing heuristic totals
Totals of heuristic data across categories.

Visualization(시각화)

Representing this data visually helps us quickly identify problem areas and makes it easier to compare websites.

데이터를 시각화 하는 것은 문제를 빨리 파악하고 웹사이트 간의 비교를 쉽게 해 준다.

Radar diagrams are perfect for this kind of analysis, because they give a recognizable shape based on the score. The more circular the radar, the more balanced the score; the spikier the radar, the more variation in the score. The size of the radar plot on the axes indicates the score percentage itself, showing good and bad areas, as seen in the examples below:

레이더 다이어그램은 점수를 인지하기 쉬운 형태로 바꿔 보여주기 때문에 이러한 분석에 아주 적합하다. 점수가 조화롭다면 원에 가깝게 표현되고, 점수의 변화가 크면 레이다는 뾰족하게 표현된다. 레이더의 사이즈는 그 수치의 백분율을 표시해주며 아래의 예에서 보이듯이 좋고 나쁜 영역을 한 눈에 보여준다.

A radar plot showing heuristic data
A radar plot showing a website that performs well across all heuristic categories.

A radar plot showing heuristic data - poor
A radar plot showing poor performance across all heuristic categories.

A radar plot showing heuristic data - perform well
A radar plot showing a website that performs well in all areas but one.

A radar plot showing heuristic data - poor
A radar plot showing a website that performs poorly in all areas but one.

Competitor Reviews(경쟁자 분석)

By combining the heuristic results of different websites, we can create a visual comparison of competing websites in a market segment. This is particularly good for getting a feel for which websites fail and which succeed in certain respects. Analyzing multiple websites can, of course, take a lot of work, so stripping your heuristics down to the essentials is a good idea.

다른 몇가지 웹사이트에 대한 휴리스틱 분석을 조합함으로써, 어떤 세분화된 시장 영역(Market segment)에서의 경쟁자에 대한 시각적인 비교를 만들어 낼 수 있다. 이는 일정 관점에서 각각의 웹사이트가 성공하고 실패한 원인에 대한 감(정성적 지표)을 얻어내기에 좋다. 많은 웹사이트를 분석하는 것은 물론 업무도 많아지는 단점이 있지만, 휴리스틱 결과의 정수를 얻어내는 데는 효과적인 아이디어이다.

A Direct Comparison(직접적 비교)

As a real-world example, below is a comparison of two similar websites: Smashing Magazine and Webdesigner Depot. We can see that both lack a little in most of the categories, apart from quality of writing and content, which is what we would expect from content-rich blogs. (Please note that I work for neither website and stand as an impartial bystander!)

실제 현장에서의 예로, 아래는 두 개의 유사한 사이트 : “스매싱매거진”과 “웹디자이너디포”의 비교를 보여준다. 컨텐츠 중심의 블로그에서 예상했듯이 두 사이트 모두 “컨텐츠와 문장의 품질”영역을 제외하고 전반적으로 조금씩 부족한 것을 볼 수 있다.

Both websites score a little higher in page layout and visual design, but they have rather weak home pages, being in the format of a traditional, basic blog. Their calls to action score quite poorly (other than the advertising!). Smashing Magazine scores marginally better in navigation because it has the tabs on top to distinguish major content areas, whereas Webdesigner Depot almost loses the navigation below the advertising in the right-hand column. Smashing Magazine scores slightly higher in accessibility for a number of minor heuristics, such as the clarity of the text, spacing and contrast.

두 웹사이트 모두 “페이지 레이아웃과 비주얼디자인”영역에서는 조금 높은 점수를 보여주고 있지만, 전통적인 기본 블로그 형식을 취함으로써 다소 취약한 홈페이지 구성을 보여주고 있다. 특히 “Calls to action”(응답속도?)점수는 매우 낮다(심지어 광고배너보다도!). 스매싱매거진은 상단에 주요 컨텐츠 영역을 구분해주는 탭이 있어서 네비게이션 영역에서 조금 좋은 점수를 받고 있는 반면, 웹디자이너 디포는 우측 컬럼 광고배너 아래에 네비게이션이 위치하면서 그 역할을 거의 못하고 있다. 스매싱매거진은 텍스트의 가시성, 여백, 컨트라스트 같은 소소한 휴리스틱 영역에서 접근성에 대해 약간 더 좋은 점수를 받고 있다.

Webdesigner Depot falls behind a little on trust and credibility because of details such as the basic link to an email address in the footer (compared to the well-considered contact form on Smashing Magazine), and also for the very brief copy in the “About us” section. However, Webdesigner Depot picks up slightly more points in visual design for its colorful style. Of course, like the presentation scores in ice dancing, any process used to score aesthetics or design will always be subjective, so having a wide range of criteria for various aspects of design is a good idea.

웹디자이너디포는 (스매싱매거진의 사려깊게 설계된 컨택트 폼과 비교해 볼 때) 링크만 기본적으로 걸어놓은 이메일 주소라든지, “About us”섹션의 매우 간략한 설명문구라든지 몇몇 디테일한 요소에서 신뢰성이 약간 뒤쳐지는 모습을 보이고 있다. 반면에 웹디자이너디포는 컬러풀한 스타일의 비주얼 디자인으로 약간 앞서는 모습을 보여준다. 물론 아이스 댄싱에서의 표현력점수처럼 미학과 디자인 관련된 평가는 주관적일 수 밖에 없다. 따라서 디자인에 대한 다양한 관점에서의 평가요소를 갖춰놓는 것이 좋다.

A radar plot showing heuristic data - smashing
A heuristic analysis of Smashing Magazine.

A radar plot showing heuristic data - WDD
A heuristic analysis of Webdesigner Depot. Note that Webdesigner Depot does not really have or require form inputs, so it scores 0 by default in the “Forms and data entry” category; this score can be either ignored or removed altogether if so wished.

To emphasize the differences in the heuristic measurements, we can overlay one radar plot on the other:

휴리스틱 평가 결과에 대한 차이점을 더 부각시키기 위해, 이 두가지를 겹쳐서 보여줄 수 있다.

A radar plot showing heuristic data - Overlay
Overlaying one radar diagram on the other to enhance visualization.

Conclusion(결론)

When reviewing a website, subjective snap judgements are unwise. We can do justice to a website only with a detailed test drive. We need to perform tasks and look in detail at various components on and below the surface. Heuristic scoring is a useful process for quantifying and visualizing a website’s quality when other measures are not appropriate or available. This formal process reveals problem areas, while focusing the discussion at the start of a redevelopment phase.

웹사이트를 평가할 때 주관적인 훑어보기 식의 평가는 지혜롭지 못한 방식이다. 자세하고 꼼꼼한 테스트 후에야 공정한 평가를 내릴 수 있다. 안팎으로 다양한 요소들에 대한 자세한 관찰과 태스크를 해야할 필요가 있다. 다른 유용한 혹은 적합한 측정 방법이 없는 경우, 휴리스틱 스코어링은 웹사이트의 품질에 대해 정량화 하고 시각화 하는 유용한 수단이다. 리뉴얼 단계의 시작에서 여러가지 논의가 이루어질 때, 이러한 정형화된 프로세스로 문제가 되는 영역을 드러낼 수 있다.

Resources

Based on work done by UserfocusDiscover more and download a free template to get started in creating your own heuristic reviews.

(al)

Leigh is a designer with 15 years experience, now working in user experience. He’s been helping websites look better, be more organised and work better since grey backgrounds were the norm. He’s a jack of all trades, from video to music and still trying to master at least one of them. He survives on coffee and custard creams and blogs occasionally from his own planet; leighhowells.com

0 comments
Submit comment

You must be logged in to post a comment.