— ISE CREAtive Manual

Tag "reference"

The Psychologist’s View of UX Design / UX디자인에 대한 심리학자의 관점

You may have heard this story about an elephant:

A king brings six men into a dark building. They cannot see anything. The king says to them, “I have bought this animal from the wild lands to the East. It is called an elephant.” “What is an elephant?” the men ask. The king says, “Feel the elephant and describe it to me.” The man who feels a leg says the elephant is like a pillar, the one who feels the tail says the elephant is like a rope, the one who feels the trunk says the elephant is like a tree branch, the one who feels the ear says the elephant is like a hand fan, the one who feels the belly says the elephant is like a wall, and the one who feels the tusk says the elephant is like a solid pipe. “You are all correct”, says the king, “You are each feeling just a part of the elephant.”

The story of the elephant reminds me of the different view of design that people of different backgrounds, education, and experience have. A visual designer approaches UX design from one point of view, the interaction designer from another, and the programmer from yet another. It can be helpful to understand and even experience the part of the elephant that others are experiencing.

I’m a psychologist by training and education. So the part of the elephant I experience applies what we know about people and how we apply that to UX design. I take research and knowledge about the brain , the visual system, memory, and motivation and extrapolate UX design principles from that.

This article is a snapshot of the psychologist’s view of the elephant.

1. People Don’t Want to Work or Think More Than They Have To  / 사람들은 그들이 해야하는 것 이상으로 일하거나 생각하고 싶어 하지 않는다

  • People will do the least amount of work possible to get a task done.
  • It is better to show people a little bit of information and let them choose if they want more details. The fancy term for this is progressive disclosure, which I wrote a blog post about recently.
  • Instead of just describing things, show people an example.
  • Pay attention to the affordance of objects on the screen, page, or device you are designing. If something is clickable make sure it looks like it is clickable.
  • Only provide the features that people really need. Don’t rely on your opinion of what you think they need; do user research to actually find out. Giving people more than they need just clutters up the experience.
  • Provide defaults. Defaults let people do less work to get the job done.

2. People Have Limitations / 사람들은 한계를 가지고 있다.

  • People can only look at so much information or read so much text on a screen without losing interest. Only provide the information that’s needed at the moment (see progressive disclosure above).
  • Make the information easy to scan.
  • Use headers and short blocks of info or text.
  • People can’t multi-taskThe research is very clear on this, so don’t expect them to.
  • People prefer short line lengths, but they read better with longer ones! It’s a conundrum, so decide whether preference or performance is more important in your case, but know that people are going to ask for things that actually aren’t best for them.

3. People Make Mistakes / 사람들은 실수를 저지른다

  • Assume people will make mistakes. Anticipate what they will be and try to prevent them.
  • If the results of an error are severe then use a confirmation before acting on the user’s action.
  • Make it easy to “undo.”
  • Preventing errors from occurring is always better than helping people correct them once they occur. The best error message is no message at all.
  • If a task is error-prone, break it up into smaller chunks.
  • If the user makes and error and you can correct it, then do so and show what you did.
  • Whoever is designing the UX makes errors too, so make sure that there is time and energy for iteration, user feedback , and testing.

4. Human Memory Is Complicated / 인간의 기억은 복잡하다

  • People reconstruct memories , which means they are always changing. You can trust what users say as the truth only a little bit. It is better to observe them in action than to take their word for it.
  • Memory is fragile. It degrades quickly and is subject to lots of errors. Don’t make people remember things from one task to another or one page to another.
  • People can only remember about 3-4 items at a time. The “7 plus or minus 2 ” rule is an urban legend . Research shows the real number is 3-4.

5. People are Social / 사람들은 사회적이다

  • People will always try to use technology to be social. This has been true for thousands of years.
  • People look to others for guidance on what they should do, especially if they are uncertain. This is called social validation. This is why, for example, ratings and reviews are so powerful on websites.
  • If people do something together at the same time (synchronous behaviorit bonds them together—there are actually chemical reactions in the brain. Laughter also bonds people.
  • If you do a favor for me then I will feel indebted to give you a favor back (reciprocity). Research shows that if you want people to fill out a form, give them something they want and then ask for them to fill out the form, not vice versa.
  • When you watch someone do something, the same parts in your brain light up as though you were doing it yourself (called mirror neurons ). We are programmed with our biology to imitate. If you want people to do something then show someone else doing it.
  • You can only have strong ties to 150 people. Strong ties are defined as ties that with people you are in close physical proximity to. But weak ties can be in the thousands and are very influential (à la Facebook).

6. Attention / 주목

  • I am beginning to think that the whole idea of attention is a key to designing an engaging UI. I’ll write more in future articles about that. Grabbing and holding onto attention, and not distracting someone when they are paying attention to something, are key concerns.
  • People are programmed to pay attention to anything that is different or novel. If you make something different it will stand out.
  • Having said that, people can actually miss changes in their visual field. This is called change blindness . There are some quite humorous videos of people who start talking to someone on the street (who has stopped them and asked for directions) and then don’t notice when the person actually changes!
  • You can use the senses to grab attention. Bright colors, large fonts, beeps, and tones will capture attention.
  • People are easily distracted. If you don’t want them to be distracted, don’t flash things on the page or start videos playing. If, however, you do want to grab their attention, do those things.

7. People Crave Information / 사람들은 정보에 갈급하다

  • Dopamine is a chemical that makes people seek… food, sex, information. Learning is dopaminergic—we can’t help but want more information.
  • People will often want more information than they can actually process. Having more information makes people feel that they have more choices. Having more choices makes people feel in control. Feeling in control makes people feel they will survive better.
  • People need feedback. The computer doesn’t need to tell the human that it is loading the file. The human needs to know what is going on.

8. Unconscious Processing / 무의식적인 처리

  • Most mental processing occurs unconsciously.
  • If you can get people to commit to a small action (sign up for a free membership), then it is much more likely that they will later commit to a larger action (e.g., upgrade to a premium account).
  • The old brain makes or at least has input into most of our decisions. The old brain cares about survival and propagation: food, sex, and danger. That is why these three messages can grab our attention.
  • The emotional brain is affected by pictures, especially pictures of people, as well as by stories. The emotional brain has a huge impact on our decisions.
  • People’s behavior is greatly affected by factors that they aren’t even aware of. The words “retired”, “Florida,” and “tired” can make even young people walk down the hall slower (called framing ).
  • Both the old brain and the emotional brain act without our conscious knowledge. We will always ascribe a rational, conscious-brain reason to our decision, but it’s never the whole reason why we take an action, and often the rational reason isn’t even part of the reason.

9. People Create Mental Models / 사람들은 멘탈모델을 만들어낸다

  • >People always have a mental model in place about a certain object or task (paying my bills, reading a book, using a remote control).
  • The mental model that people have about a particular task may make it easy or hard to use an interface that you have designed.
  • In order to create a positive UX, you can either match the conceptual model of your product or website to the users’ mental model , or you can figure out how to “teach” the users to have a different mental model.
  • Metaphors help users “get” a conceptual model. For example, “This is just like reading a book.”
  • The most important reason to do user research is to get information about users’ mental models.

10. Visual System / 비주얼 시스템

  • If pages are cluttered people can’t find information. Use grouping to help focus where the eye should look.
  • Things that are close together are believed to “go” together.
  • Make fonts large enough. Use fonts that are not too decorative so they are easy to read.
  • Research shows that people use peripheral vision to get the “gist” of what they are looking atEye tracking studies are interesting, but just because someone is looking at something straight on doesn’t mean they are paying attention to it.
  • The hardest colors to look at together are red and blue. Try to avoid red text on a blue background or vice versa.
  • People can recognize objects on a screen best when they are slightly angled and have the perspective of being slightly above (canonical perspective ).
  • Color can be used to show whether things go together. Be sure to use another way to show the same info since some people are colorblind.

So, what’s your description of the elephant?

Read More

Taking A Customer From Like To Love: The UX Of Long-Term Relationships


What do you mean “improve”? I charged him correctly, didn’t I? “향상시키다”니요, 그게 무슨 얘기예요? 고객으로부터 요금을 정확히 받았잖아요. 그러면 되는거 아니에요?

My manager looked at me, disappointed: 매니저가 실망스러운 눈으로 날 쳐다보았다.

Yes, Des, you charged him correctly. But a vending machine can do that, too. They show up on time; they’re more accurate; I don’t pay them by the hour; and they’re never hungover. Your job is to do something that a vending machine can’t do. Your job is to make our customers happy; give them a good experience; bring them back here again. Get it?

네~ 요금을 정확히 받았죠. 하지만 그건 자판기도 할 수 있는 일입니다. 자판기는 정시에 출근하고, 더 정확하고, 시간 당 페이를 안줘도 되죠. 게다가 절대 수다떨면서 놀지도 않죠. 당신의 일은 자판기가 하지 못하는 무언가를 하는 겁니다. 고객을 행복하게 하고, 좋은 경험을 주고, 다시 오게 만드는 겁니다. 알겠어요?

I started to wonder. This was a gas station; how could I deliver a “good experience”? Surely, customers just want to get in and get out. Nonetheless, if I wanted to keep the job, I’d have to try. I started chatting to customers and casually asking questions. Did they find everything they needed. Could we order in a particular newspaper for them? Do they have our phone number in case they need to check whether we carry something? Why did they stop buying from the bakery? Customers regard gasoline as a cost that they have no say about. They enter the store annoyed at having to spend fifty bucks. My job was to change that. I got it.

좀 의아했다. 여긴 단지 주유소일 뿐이다. “좋은 경험”을 어떻게 주라는 말인가? 확실히, 고객은 그냥 와서 기름 넣고 가고 싶어하는 것 뿐인데. 그럼에도 일을 계속 하고 싶다면 시도해봐야한다. 고객에게 일상적인 질문들과 함께 몇마디 건네기 시작했다. 필요한 것은 더 없는지. 특정 신문을 사고 싶지는 않은지? 우리 회사에 문의 사항이 있을 경우 연락할 전화번호를 고객이 가지고 있는지? 빵사려고 굳이 차를 세울 필요가 있나(여기서 그런 서비스를 줄 수 있다는 뜻)? 고객들은 휘발유를 딱히 얘기할 것 없는 소모품으로 여긴다. 고객들은 50불 정도 써야하는 것을 짜증내하면서 가게에 들어선다. 나의 일은 그러한 것들을 바꾸는 것이다. 알았다.

MBAs call this “customer experience,” although when it’s spelled out so plainly, it sounds more like common sense. And like most common sense, it’s rarely that common — especially in the world of subscription software, where we need customers to stick around.

MBA에서는 이를 그냥 평범한 단어일 뿐인 “고객 경험”이라 부른다. 그냥 상식과 같은 말로 들린다. 그리고 대부분의 상식들과 마찬가지로, 고객을 붙잡아두어야 하는 소프트웨어 업게 쪽에서는 특히, 그다지 평범하지는 않다.

User experience designers are great at making software friendly and usable for new customers. We design clean, clear sign-up forms, smooth on-boarding experiences, and even helpful blank slates once users are inside the app. Once customers have used the software for some time and have integrated it in their workflow, their relationship with the software becomes more complex. UX designers have no stencils for designing “how the customer feels about the software after six months.” This matters because the software-as-a-service (SaaS) model depends on loyalty, on the idea that customers won’t flinch when they see your monthly charge.

UX디자이너는 소프트웨어를 사용자 친화적으로 만들고 새로운 고객들이 사용하기 쉽게 만드는 능력이 뛰어나다. 깔끔하게 디자인하고, 로그인도 간결하게 만들고, 탑승절차를 부드럽게 하도록 한다.

[Editor’s note: A must-have for professional Web designers and developers: The Printed Smashing Books Bundle is full of practical insight for your daily work. Get the bundle right away!]

Competing On Service

Initially, all markets compete on price. However, competing on price simply isn’t relevant with Web apps, because they are all in the same $0 to $99 per month bracket. Think about it: what sane person would switch project management tools just to shave ten bucks off their monthly costs?

We have reached the point where the service part of SaaS is most relevant, the point where the experience your customers have with your company will determine whether they stick or switch. Say you’ve been paying $50 a month for your time-tracker for the last three years. Have you enjoyed the service? Have you ever been personally thanked for your loyalty? Do you feel that the provider values your $1,800?

Customers Who Don’t Feel Valued Leave

The Rockefeller Corporation studied why customers leave one company for a competitor and found the following:

Why do customers leave?

Look at what’s not here. No mention of price or quality. How you make customers feel is what drives their loyalty, and it’s here where website owners are in trouble. Website owners are disconnected from their customers, save for a conference party or survey each year. If you asked them to introduce you to 10 of their customers, most would struggle, grimace and then get a developer to break out the SQL. Imagine trying to run a bar, convenience store, hair salon — heck, any service — with that level of apathy towards the folks who pay your wages. It shouldn’t be surprising that your customers are willing to jump ship the second a competitor launches a sexy iPhone app. If you’ve never cared about your customers, why would they care about you?

Warren Buffett talks about building a moat around your business to make it untouchable. The strongest moat you can build is one based on strong relationships. Low prices can always be beaten. Stunning design ages quickly and can easily be copied. Impeccable uptime can be matched, and your features copied. However, a good customer relationship is unique, and loyal customers are hard to steal.

Some Things You Can’t Wireframe

Wireframes and mock-ups are excellent for figuring out and discussing screen layout. You can follow all the rules of wireframing to create a compelling user experience, but you can’t wireframe how a customer feels after 15 months of using your software. To deliver a compelling experience, you need to also consider “touchpoints” and “timepoints.”

Touchpoints Make It Holistic

Matrix showing different touchpoints

Touchpoint diagrams help you see the various ways in which customers come into contact with your software. The diagram above from a holiday home website shows that the mobile experience is bad for non-iPhone customers, and that email and phone support should be improved. An amazing website is of no use if your call-center staff is rude or your developer is a jerk to customers on Twitter. Great experiences are about getting everything right; it goes well beyond fancy sign-up forms, cute mails and game-ified tutorials. Sure, all those things help, but the customer experience has to be comprehensive. Quality is fractal. Your customers will judge your company based on all of the experiences they have with it, not just those dripping with CSS3 effects. Using a touchpoint matrix such as the one above will help ensure that you’re considering all of the experiences your customers will have.

Timepoints Make It Long Term

Acquisition funnel

Anyone who has relied on metrics for customer acquisition will be familiar with some variant of the funnel above. We start with a lot of visitors, and convert a small few of them into customers. While this scenario is rather contrived and rosy, it does provide a way to measure different parts of your Web app. It does not, however, look at what happens next. If you ignore your paying customers, and they hear from you only through their invoices, then you can expect the relationship to deteriorate over time. Here’s how that goes:

Happy customer gets sad

We need it to go more like this:

Like to Love

Improving Your Customer Experience

Achieving this requires that you put a plan in place and put someone in charge of customer communication. There is no universal method that works for all software; it’s an iterative process. Your customers need just enough personal communication to feel valued, while not feeling like they’re being nagged constantly. As a start, I’ve prepared the simple questions below; someone on your team should be able to answer yes to all of them.

Test Your Relationships

  • Do you greet new members, introduce yourself and let them know that they can contact you at any time?
  • Do you check in with them after they’re settled in to see how they’re doing and to see whether they’re making the most of your app?
  • Do you talk to your users about new features before and after implementing them?
  • Do you send them the right types of messages at the right time?
  • Do you check in with your customers after their first year to thank them for their loyalty?
  • Can you easily tell the difference between your most loyal customers and yesterday’s sign-ups?
  • Can you tailor your communications to different types of users?
  • Can you name 20 of your customers and tell me something about them?

There is no shortage of questions you could add to this, but I find this initial set is enough to distinguish those who genuinely care about their customers.

Cut The Excuses

There are plenty of reasons why one might believe that this change is too hard to make. App owners will argue that their time is better spent adding features and fixing bugs. This is only partially true. Your customers are with you now without those planned features and with those bugs. I’m not arguing that you should ignore these tasks, just that those tasks are not the only important ones. Recall why customers leave: it’s not likely just because your competitor has launched an iPhone app. That’s one straw, but the camel’s back is already overloaded.

What If I Don’t Have Time?

Do you not have time to invest in keeping customers happy? The rule of retention is that you must be willing to spend as much to keep a customer as you did to acquire them. Leaky buckets don’t fill up quickly. Software such as Intercom makes this degree of customer insight and communication far more manageable. (Disclaimer: I believe in this so strongly that I now work full time on Intercom.)

A screenshot of Intercom
Intercom is the first of a new wave of tools aimed at enabling Web app and website owners to get to know their customers.

Too Much Feedback?

No one can afford to ignore their customers. This doesn’t mean that you must do everything they say; it means you should listen and respond. Too much feedback is a good problem to have. Rather your customers tell you what’s on their mind than silently disengage, forgetting about you until their credit-card bill arrives. By that point, you’re already history.

Delivering Customer Experiences

For one year straight, I spent one day every week speaking with customers of one of our apps. Before I started this, they were simply rows in a database. By the time I was finished, I had had a conversation with over a thousand people. I heard about what we got right, what needed improvement, and why we were losing customers. Very useful stuff.

Users were delighted to hear from us, because it reminded them that we’re more than a set of pages and a monthly debit. We started a customer blog and featured a few customers each week. We also added their logos to our home page. To customers, this is the business equivalent of being taken home to meet the parents. It shows a real personal commitment. These actions persuaded our customers to give honest regular feedback and to let us know when we disappointed them. We’d rather they say it to us than run into the open arms of a competitor.

Wufoo sent all of its customers Christmas cards in its first year. That was a huge hit. It was hardly surprising that by the following year they had too many customers to do it again. As a start-up, you have to play to your strengths. A small customer base offers you a big opportunity to deliver amazing service. Scaling that experience can be tricky. There is software that will help, but, again, solving this is no small challenge.

Start It Today

As a simple next step, why not take your first 10 and most recent 10 users, drop them an email, and ask if they’ll take a phone call. Let them know you’re there and that you’d love to hear their thoughts. You’ll be amazed at what you learn, and I doubt you’ll stop at 20.

Additional Resources

  • Intercom
    A product aimed at solving the problems of talking to customers en masse.
  • What Happens With Feedback,” Contrast
    A post explaining how to ask for and act on feedback.
  • Customer Experience, Wikipedia
    A good overview of the field, including case studies of companies that invest in experience.


Des Traynor is the UX Lead at Intercom, a CRM & Messaging tool for web-apps. He speaks regularly at international conferences (such as FOWA, Lessconf, CS Forum, MIX etc) and writes about UX, design and the business of web software on the widely read Contrast blog.

Read More


Turning Small Projects Into Big Profit, A Case Study

작은 프로젝트를 큰 이윤으로 전환하기, 사례분석


In the Web world, hearing businesses and freelancers alike complain about low-budget projects is not too uncommon. Let’s say that a local coffee shop needs to update its Web presence and contacts you for a redesign. It also requires a blog so that it can announce new coffees, events and so on. However, during the course of the first meeting, the client mentions that they don’t have a budget.

웹 시장에서 관련 비즈니스 종사자나 프리랜서로 부터 적은 예산에 대한 불만을 듣는 것은 드문 일이 아니다. 로컬 커피샵에서 리뉴얼을 위해 당신에게 연락한다고 생각해보자. 사이트는 물론, 새로운 커피, 이벤트 등을 소개하는 블로그도 필요할 것이다. 하지만 첫 미팅 때 클라이언트로부터 “예산이 거의 없어요”라는 말을 듣게 된다.

Being the inquisitive businessperson that you are, you say, “Well, we work with budgets of almost any size. What price range were you thinking of?” The owner of the coffee shop reveals that he has only $1500 to spend on the website. Thinking it would be a waste of time, you walk away.

비즈니스맨으로서 당신은 “음.. 우리는 예산이 얼마든 거기에 맞춰서 일해드릴 수 있어요. 얼마 정도 생각하고 계세요?”라고 물어보고, 커피샵 주인은 웹사이트에 $1500밖에 쓸 수 없다고 솔직히 얘기한다. 더 고민하는 것은 시간낭비라 생각하고 당신은 그냥 자리에서 일어선다.

This is where our design studio found ourselves. We had potential projects all over the place, but the budgets were all smaller than we thought we could handle. In the Web world, demand for small websites is up. There are always start-up companies and small businesses around that need some form of a Web presence. And, as a Web design community, our job is to answer those needs in the most utilitarian way possible.

이것이 우리들 디자인 스튜디오의 현주소이다. 어디서든 잠재적인 프로젝트들이 널려있지만, 예산은 우리가 생각했던 것 보다 작은 것이 대부분이다. 웹 시장에서, 작은 웹사이트에 대한 수요는 항상 준비돼 있다. 웹사이트가 필요한 창업하는 회사들과 소규모비즈니스들은 항상 존재한다. 그리고 웹디자인 커뮤니티로서 가능한 최고의 방법으로 그들의 요구에 답해주는 것이 우리의 임무이다.

We began questioning our business practices. We knew that there was money to be made on smaller projects, but it wasn’t until we sat down and did some simple math that we realized the business opportunity we had been missing.

우리 비즈니스 사례들에 의문이 들기 시작한다. 우리는 작은 프로젝트 제작에 대한 수요가 있다는 것을 알고있지만, 이렇게 우리가 놓치고 있는 비즈니스 기회들에 대한 간단한 계산을 하기 전까지는 얼마나 많은 수익성이 있는지를 알지 못한다.

Here’s the simple premise on which we began to transform our business: if you turn away 10 to 15 small projects a year at $1500 per project, that’s declining between $15,000 and $22,500 every year.

그것을 실제 우리의 비즈니스로 만들기 전에 간단하게 전제해둘 사항이 있다: 개당 $1500 정도하는 소규모 프로젝트를 10~15개 정도 돌려보낸다고 가정하면, 매년 $15,000~22,500 정도의 매출을 거절하는 것이다.

Small budgets add up over time
Any amount of money adds up over time.

Our company was a start-up business once, too, and it still is. Perhaps we were delusional in our belief that big projects grow on trees. We were struggling to find work. It became clear to us that we needed to take a serious look at our business practices, our development and design processes, and ourselves. We needed to find a way to make money. Let’s take a few minutes to discuss how we overhauled our operations and started making a living off of small projects.

우리 회사도 한 때 창업을 시작한 작은 비즈니스였고, 물론 여전히 그렇다. 규모있는 프로젝트가 나무에서 자란다고 믿은 우리의 믿음이 망상이었을까. 우리는 일거리를 찾기 위해 고군분투했다. 그러면서 우리 개별 비즈니스들, 디자인 및 개발 프로세스, 그리고 우리 자신에 대해서 심각히 돌아볼 필요가 있다는 것이 명확해졌다. 우리는 돈을 벌 수 있는 방법을 꼭 찾아내야만 했다. 우리가 어떻게 운영방법을 작게 분배하고, 소규모 프로젝트를 통해 생계를 꾸려가기 시작했는지에 대해 잠깐 이야기를 해보겠다.

[Editor’s note: A must-have for professional Web designers and developers: The Printed Smashing Books Bundle is full of practical insight for your daily work. Get the bundle right away!]

It’s All About The Process(문제는 프로세스이다)

As a Web community, we are well equipped to handle any low-budget projects that come our way. We have more frameworks and streamlined solutions than we’ve ever had access to in the past, such as WordPress, HTML5 Boilerplate and ThemeForest. Learning how to leverage these tools is key to understanding how to make money on small projects. And mastering these tools gives us the flexibility to stray from cookie-cutter solutions.

웹커뮤니티로서 우리는 우리 나름의 방식대로 어떤 낮은 예산의 프로젝트라도 잘 핸들링 할 준비가 되어있다. 우리는 워드프레스나 HTML5 보일러플레이트, 띰포레스트 등 과거에 접근했던 방식보다 유연한 솔루션과 프레임워크를 가지고 있다. 이러한 도구들을 지렛대로 잘 활용하는 방법을 익히는 것이 작은 프로젝트에서 수익을 만들어내는 것을 이해하는 핵심이다. 그리고 이러한 툴을 마스터 하는 것은 쿠키커터솔루션(틀에 박힌 방법)으로부터 벗어나는 유연성을 제공한다.

However, before you decide to take on a workload filled with small projects, let’s stress a key point. Some clients are extremely demanding about their design process and the functionality of their websites. Be careful to set clear boundaries with the client so that you don’t end up working for less than minimum wage. We’ll cover a few techniques for this below.

그러나 소규모프로젝트로 가득찬 일더미를 가져가기로 결정하기 전에, 키 포인트를 짚어보자. 어떤 클라이언트들은 그들의 디자인 프로세스와 그들만의 기능이 있는 웹사이트를 만들어 줄 것을 강력히 요구하는 경우가 있다.  조심하라. 클라이언트와 일의 규모를 명확히 규정지어 최저임금보다 적게일하게 되는 상황을 예방하길 바란다. 이에 대한 몇가지 테크닉을 다룰 것이다.

Over the years, we’ve picked up knowledge from many different sources. One of the best summaries of how we try to systematize our own workflow comes from Bill Beachy over at Go Media. He recently released a short podcast episode discussing business systems, which I strongly encourage you to check out.

우리는 해를 거듭하면서 다양한 원천들에서 지식을 얻어낼 수 있었다. 우리 만의 워크플로우를 어떻게 시스템화 했는지에 대한 베스트 서머리 중 하나는 Go Media의 Bill Beachy로 부터 가져왔다. 그는 최근에 비즈니스 시스템에 대해 토론하는 짧은 팟캐스트 에피소드를 내놓았다. 한번 살펴볼 것을 강력히 추천한다.

But first, let’s look quickly at the various methods we use to cut down on our website build time.

하지만 먼저, 우리가 웹사이트 구축 시간을 줄인 다양한 방법들에 대해 먼저 살펴보자.

Write Down Your Processes(당신의 프로세스를 기록해가라)

During the course of working on projects, we’ve developed a master document that we call the Low-Budget Guide. It details every single step of building a website on a budget. We have sections on the fastest ways to deploy a test WordPress installation on various hosting providers, documentation on common WordPress settings, plugins and problems, as well our standard step-by-step process. We’ll review this process in a case study later in the article.

프로젝트를 진행하는 과정 중에, Low-Budget Guide라는 마스터 도큐먼트를 개발해냈다. 예산에 맞춰 웹사이트를 만들어가는 하나하나의 단계들이 상세히 기록되어 있다. 다양한 호스팅업체에 워드프레스 설치를 가장 빨리 하는 방법에 대한 섹션, 워드프레스 세팅, 플러그인, 문제점 등에 일반에 대한 도큐멘테이션, 단계별 설치법 등이 담겨 있다. 이는 이 글에서 케이스스터디를 통해 자세하게 다룰 것이다.

The Low-Budget Guide helps us address several important aspects of our work. First, it prevents us from forgetting to do anything. Having a step-by-step guide eliminates any errors that might cost several hours of development time.

Low-Budget Guide는 업무에서 몇가지 중요한 측면을 찾아내는데 도움을 주었다. 먼저, 그것은 우리가 어떤 일을 해낸 것을 잊지 않도록 해준다. 단계별 가이드를 가지고 있는 것은 개발과정에서 불필요한 시간을 소모하게 만드는 오류들을 제거해 준다.

Map out your processes
Mapping out your processes can save a lot of hassles down the road.

Secondly, by having the Low Budget Guide, we’re able to review which processes are efficient and which are time-consuming. Using this standard, we can minimize build time by adjusting our processes in certain areas. We’re basically fine-tuning ourselves into the fastest website builders we can be. And lowering build time directly increases the profit margin.

둘째로, Low Budget Guide를 가지고 있다는 것은, 어떤 과정이 시간을 소모하고 어떤 과정이 효율적인지에 대해 리뷰할 수 있게 해 준다. 이러한 표준을 이용해서 일정 영역에서의 프로세스를 조정함으로써 구축시간을 최소화 할 수 있게 된다. 우리는 기본적으로 가장 빨리 웹사이트를 구축할 수 있는 빌더에 적합하도록 우리자신을 세밀하게 맞춰간다. 그리고 이렇게 절약된 시간은 수익율을 증가시킨다.

Finally, it ensures quality. Having a repeatable process means that every time you follow the guide, you become more proficient. This not only increases the speed at which you work, but decreases deviation from a tried and true standard. Practice makes you a whole lot better.

마지막으로, 그러한 문서는 품질을 보장해준다. 반복 프로세스가 있다는 것은 가이드를 따를 때마다 좀 더 숙달되어 간다는 것을 의미한다. 이는 단지 업무의 속도가 증가되는 것 뿐만 아니라, 표준으로부터의 일탈을 줄여준다. 연습은 전반적인 발전을 가져올 것이다.

Choose a Framework(프레임워크를 선택하라)

… Or choose several frameworks and tailor them to specific website types. For example, if you want to quickly implement a custom design on a WordPress website, check out Carrington JAM (short for “just add markup”). It’s a blank slate for custom WordPress themes, with a lot of the heavy lifting already handled. I personally use a version of Carrington JAM that I’ve converted to HTML5.

한 가지 혹은 몇가지의 프레임워크를 선택하고 특정 웹사이트 형식에 맞추어 그것들을 재단하라. 예를 들어, 워드프레스 웹사이트에 고객맞춤형 디자인을 단시간 내에 입히고 싶다면,  Carrington JAM(Just Add Markup의 줄임말)을 확인해보기 바란다.

If you’re not using WordPress, I would recommend looking into the HTML5 Boilerplate. If you’re adventurous, you can apply the Boilerplate to a Drupal, Joomla or ExpressionEngine theme. Then, when you deploy the content management system, your front-end framework will already be in place. Django is another fantastic and fast framework, if you’re familiar with Python.

워드프레스를 사용하지 않는다면, HTML5 Boilerplate를 살펴볼 것을 추천한다. 새로운 것을 시도해보는 성격이라면, Boilerplate를 Drupal, Joomla 혹은 Expression Engine 테마에 적용해 볼 수 있을 것이다. 그리고,

Use a Theme(테마를 사용하라)

There’s no shame in using a pre-built theme to construct a website for a client. In fact, you should be proud of doing so if the budget demands it. Using a theme can cut build time by at least half, if not more. Instead of spending 30 hours coding a website, you would be spending 15 hours fine-tuning a theme, tailoring it to your client’s branding and inserting content. At $1500, you’d be getting paid $100 per hour. How, from a business perspective, would turning an opportunity like that down be considered a good decision?

That being said, always follow the licensing agreement that comes with your theme. Honest people put hours of effort into building themes. Never, never, never break the copyright, and always adhere to intellectual property laws.

Work in a Modular Fashion(모듈을 이용하라)

What exactly is modular coding? Looking at various websites, you’ll see that certain areas are common to all of them. WordPress serves as a good example of breaking a website down into “modules.”

At our studio, we have built a code library around modules. We have custom Twitter and Facebook widgets, custom post templates, image gallery widgets, the list goes on. When you write new code, think of it as a module that needs to be flexible enough to function on other websites with as little customization as possible. For example, instead of having to write an image slider from scratch, we’d be able to pop in a tiny PHP function, pass along a few variables, set a few styles in CSS, and we’d be done in less than 20 minutes.

Building a code library over months and years enables your business to cut down on major coding time. And if you refine the module every time you use it, you will ensure that the product grows ever higher in quality.

Get Familiar With Less(“Less-코드를 줄이는 양식 중 하나”에 익숙해져라)

Less, in simple terms, makes CSS more like a coding language. We could argue whether style sheets should even do that, semantically speaking. But the fact of the matter is that it has shaved off at least 10% of the time that I spend writing CSS.

Perhaps one of my favorite features of Less is Mixins. These allow you to embed the CSS from one class into another. You can also use them as functions and allow them to take arguments. An example of this from Less’ website would be:

01 .rounded-corners (@radius: 5px) {
02   border-radius: @radius;
03   -webkit-border-radius: @radius;
04   -moz-border-radius: @radius;
05 }
07 #header {
08   .rounded-corners;
09 }
11 #footer {
12   .rounded-corners(10px);
13 }

Preventive Measures Save Time And Money(시간과 돈을 절약할 수 있는 정확한 측정도구)

One of the bigger issues that we frequently ran into with clients was diverging expectations of what their money would get them. Business owners need to be honest and up front about everything, which we were.

Yet something still wasn’t clicking. We were seeing scope creep, delays in communication, hold-ups in payment, and clients who just weren’t satisfied. I was kept up nights thinking, “Is this seriously what the business world is like? I can’t do this for the rest of my life!”

And then I realized something: if this was a recurring problem, chances are it wasn’t the fault of my clients, but that I was to blame.

So, I started thinking. How could I prevent these problems from coming about?

Simply put, preventative measures turned out to be the key. Standardizing basic business practices for all of your clients will ensure that your projects run smoothly. By avoiding these headaches, businesses will be able to dedicate their time to what actually brings in money. The less time wasted on dealing with scope creep, bickering over payment, and addressing client dissatisfaction means more money saved and also a more enjoyable working environment.

Show Websites With Similar Budgets(비슷한 예산의 다른 사이트들을 보여주라)

This is one of the best ways to give clients a good idea of what their website will be. I’ve found that this method, more than any other, is the best way to prevent trouble down the road.

Have the Client Prioritize(우선순위를 정하라)

During your initial meeting with a client, help them to list all of the functionality they would like to see on the website. After the list has been generated, put each feature into one of three categories: “Essential,” “Highly desirable” or “Bell ’n’ whistles.” This way, you will be able not only to determine what needs to get done, but to trim the project to fit the budget.

Tell Them What You Can’t Do(할 수 없는 부분에 대해 명확히 이야기하라)

Be honest with the client. This will save countless hours of frustration if the client keeps changing their mind about a font or background color. Tell them up front that you cannot include a photo gallery for such a low price, or that a blog would simply take too much time for the budget. By stating it from the beginning, they won’t think they can just add it later on.

Sign a Contract, With an Accompanying Scope(범위를 명확히하여 계약하라)

Just. Do. It. By detailing what you will do and how long it will take, you’re again setting realistic expectations. A contract protects both you and the client. We strongly suggest “lawyering up” before you have to. Even if the lawyer is expensive, preparing a solid contract should cost between $300 and $1000. That’s a heck of a lot less than court fees; and having a lawyer on your side from the beginning tends to keep you out of court in the first place.

Charge for Missed Meetings(불발된 미팅에 대해 요금을 청구하라)

Ever since we started stating this clearly in the contract, do you know how many meetings our clients have missed? A grand total of zero! Over the course of six months, not a single person has missed a meeting. No more headaches, no more lost time. To top it off, our clients are even happier now because we’re not hassling them for having missed meetings. All we had to do was put a fee in the contract. It doesn’t have to be much: we charge $50 for the first missed meeting, and $100 for every one thereafter.

Handle Payments Better(더 좋은 지불방법을 이용하라)

For small projects, I strongly recommend requiring a down payment. Clients who have made a down payment are much more apt to pay on time and pay the right amount later on in the project when you’re hitting your milestones. So, save yourself some headaches and get a deposit.

Secondly, be clear in your contract and invoices about when payment is due. Inform clients of what will happen if they neglect to pay on time. Charge a late fee if a payment doesn’t come on schedule.

We strongly recommend late fees. However, if you do charge them, give clients a courtesy phone call a week before the due date to remind them of both the payment and the late fee. The fee doesn’t have to be much: ours is 10% of the remaining balance on the invoice.

Case Study: Menno Tea(사례 : Menno Tea)

Several months ago, we were approached by Hans and Niles, the founders of Menno Tea. Menno Tea is small tea company based in Goshen, Indiana. Hans and Niles came to us looking to redesign their bottle’s label. They were in the process of expanding their market and were ready to develop a more consistent brand. In working with them, we eventually developed a new bottle to fit the feel of their tea, as well as more solid branding that could be applied to other areas.

Menno Tea's new bottle design

As soon as the bottle was designed and the labels were off to be printed, we realized that the updated brand needed to be applied to Menno Tea’s website. They were running a standard installation of WordPress with a slightly customized theme.

It might be helpful to see the final website before reading this case study.

Planning Phase(기획 단계)

Hans and Niles requested that we look at their website and make a recommendation. They asked, though, that we keep the price relatively low. Being college students, Hans and Niles didn’t have much cash lying around for an extravagant solution. What they needed was a solid website that reinforced their brand’s identity and that provided key information to visitors.

Step 1: The proposal(1단계: 제안)
Our final proposal was for a five-page website that adopted the new branding requirements. After some negotiating, we settled on a final cost of $2000. At our standard rate of $100 per hour, that gave us 20 hours in which to complete the project. However, because Menno Tea was a frequent client of ours, we decided that we could provide up to 30 hours of work for $2000. We informed them that, beyond this number of hours, we would have to start billing above our estimate of $2000.

Step 2: The contract and down-payment(2단계: 계약 및 디스카운트)
After we agreed on the cost of the project, we pulled out our Low Budget Guide. Our first step was to sign a contract with Menno Tea and to get a down payment on the project.

Contract sample
A snapshot of our standard contract.

After the contract was signed and the down payment was processed, we headed off to start the design. We explained to Menno Tea that, because the project’s budget was low, we could offer only two conceptual designs, with one round of revisions. Hans and Niles understood our reasoning and were even pleased that we were going so far as to provide two concepts. This goes back to the main point of this article: be clear with your clients. By setting limitations and explaining constraints, you will avoid giving clients unrealistic expectations that lead to headaches.

Hours spent on the planning phase: 3

Creative Phase(디자인 단계)

Step 3: Mock-ups(3단계: 목업시안)
After three hours of work on Menno Tea’s design, we developed two significantly different directions.

The first option provided to Menno Tea
The first option had horizontal navigation.

Menno Tea's second design option
The second option had a vertical navigation banner and emphasized key messaging.

After presenting these two options to the client, they took some time to review them. We had some free time every so often over the course of the project while waiting for feedback. During that time, we scheduled several other projects, so that we would have very little downtime.

We found that by scheduling projects asynchronously, we are able to fill our days with work. Some businesses work better by having fewer, more spaced out projects. We’ve discovered that we produce higher-quality work when switching between projects during the week, because it enables us to draw inspiration from all of them.

Step 4: Address feedback(4단계 피드백적시)
After a few days, Hans and Niles provided some feedback. They wanted a mock-up that combined the horizontal navigation with the key messaging from the second option. We always ask our clients to provide specific feedback so that our changes are efficient and to their liking. Here’s an example of the type of feedback we require:

I really like it! Here are some thoughts:

  • Do we want the background to be that dark? What is your thinking behind that color gray?
  • What will those ticket stub-shaped buttons be used for?
  • Will our biographies be on the home page below the header? Or is that just an example of what the text will look like there.
  • Would putting the Facebook, Twitter and RSS feed buttons at the top or bottom of the page be better?
  • I like the format. Very fluid.
  • I’m pleased by how all of our marketing is coming together.


Having gotten all of the feedback we needed, we opened Photoshop and started working on the mock-up. In an hour, we produced a happy medium between the two designs.

The selected mockup for Menno Tea
This was the design chosen for Menno Tea’s home page.

The folks at Menno Tea reviewed the design and asked for a few minor changes, which took only a few minutes, and then we were on our way to code.

Hours spent on the creative phase: 5

Development Phase(개발단계)

Before moving into the development phase of the project, we sat down with Hans and Niles for a brainstorming session to determine what the rest of the website would look like. We sketched out the pages and determined every last piece of content that would be needed for launch. We provided them with the list of content and let them know that the website would be ready for the content in less than a week.

They started assembling the content as soon as we started coding. By doing this, we avoided any lag from having a coded website without any content. The process became even more streamlined as Hans and Niles provided us with content consistently throughout the development phase.

Step 5: Set up a test environment(5단계: 테스트환경구축)
For test environments, we simply create subdirectories on our local server. Because Menno Tea’s website was built on WordPress, we used our standard framework, which consists of Carrington JAM integrated with theHTML5 Boilerplate. We also uploaded several theme test packs so that we could test the blog quickly and easily. You can use the test pack provided by WordPress or the one developed by ThinkDesign. In addition, we use a set of reliable plugins to simplify common tasks, such as Contact Form 7 and WP-Blocks. Then, we go through and create the entire site map in WordPress’ Pages.

Code, code and more code

We did all of this — deployed a flexible framework with all of the required plugins and test content — in less than 45 minutes. This used to take us several hours just a year ago.

Step 6: Code the entire website(6단계: 전체 웹사이트 코딩)
The next step is fairly simple. We code the website in its entirety, checking cross-browser compatibility fairly often to avoid major hang-ups down the line. To save time, we always install the wonderful IE9.js by default. All of the pages are coded from top to bottom, and the client is notified once every page is complete. We ask that clients notify us of requests during this step of the process only if the changes are big. In general, we ask that they make a comprehensive list of all of the changes they would like to see and then send it to us at once at the end. This cuts down significantly on email and on time spent opening and closing files to make minor changes.

Menno Tea - Our Teas
We coded the entire website in under six hours, except for the blog, which took another four.

Step 7: Address feedback(7단계: 피드백 적시)
As mentioned, we ask clients to request revisions in bulk sets to save time. Hans and Niles loved the work we had done. Luckily for us, the revisions were small and cosmetic. We addressed them rather quickly, as well as a few typos and content-related issues.

Hours spent on the development phase: 13

Launch and Test Phase(런칭 및 테스트단계)

Step 8: Cross-browser and mobile compatibility(8단계: 다양한 브라우저 및 모바일 호환 테스트)
As we geared up to deploy the website, we needed to ensure compatibility with most browsers. Obviously, on smaller projects, not as much time is available to ensure pixel-perfect rendering, but we try to get as close as possible. We had a minor hiccup with the top banner for the menu being too wide on tablet browsers; we ended up just setting the banner as a background image, which we should have done in the first place. As part of the process, we always have fun looking at our websites in Internet Explorer 6.

How Menno Tea looks in IE 6
Needless to say, we did not support IE 6. Oh, the horror…

Step 9: Deploy the website(9단계: 웹사이트 배포)
Deploying websites is something that we’ve streamlined fairly well recently. We always back up the client’s current system. Luckily for us, in this case, Menno Tea was running WordPress. We backed up the current theme, their database and all of their WordPress posts. After updating their installation of WordPress, we moved the new theme over to their server and activated it. We already had a list of all of the plugins being used on the test website, and so we promptly installed them, configuring each one as we went. As soon as everything was set, we activated the theme and tested everything.

After an hour of testing in all major browsers, the website was ready to go live.

Step 10: Write the documentation(10단계: 문서 작성)
We feel that documentation for our clients is extremely important. If we’ve given them a content management system, they will inevitably have questions on how to use it, even if we’ve trained them. Over time, we’ve developed a solid set of instructions on how to use various aspects of WordPress. We’ve found that this works much better than just pointing clients to WordPress’ website. Now, we just go into our repository of instructions and pull out everything we need. For a small website running WordPress, we generally have to write only one or two paragraphs in addition.

Menno Tea's documentation
A quick shot of the documentation for Menno Tea. If we have time, we’ll match it to the client’s branding.

Step 11: Provide training(11단계: 교육)
Training saves time with clients who are not on retainer. And for small WordPress websites, it doesn’t take more than an hour. We go through our documentation step by step with clients and address any questions they have on the spot. Ever since we started using documentation and providing comprehensive training, our support calls and emails have dropped by over 80%. That amount is significant; I can’t believe we took almost 10 months of operating the business to figure that out.

Hours spent on the launch and test phase: 5

Case Study Wrap-Up

With the launch and training wrapped up, we declared the project finished and archived our files in case we ever needed them again. This process was fairly typical for our studio, but we still had a blast designing the website. With a total of 26 hours spent on the project, we came in under our 30-hour estimate. And if we hadn’t given the frequent-client discount, we would have made more than $100 per hour. With the discount, it worked out to $77 per hour — still not too shabby for a small project.

So, what did we learn from this project?

  • Custom design can still be done on small projects, but only if the client’s requests are minimal. This might not work with every client, so discuss it up front.
  • Good communication is the key to making rapid changes. We used bullet points in our emails with Menno Tea, which made discussions easier and faster.
  • If the client is able to, get content from them as you’re designing. Working a design around existing content is much easier than guessing what the content will be. This streamlines the process and makes it simpler and faster for everyone.
  • When sent in batches, revisions move along more quickly.
  • Designing on a budget can still be a ton of fun. We loved this project and can’t wait to work with Menno Tea in the future.

Final Thoughts And Considerations(결론 및 논의사항)

Obviously, we found these methods to work for us. Every project, client and situation is different. Use your judgment, and develop practices that fit your business’ style. If you’re a freelancer, do what fits your personality. Nothing is worse than trying to fit into someone else’s shoes.

Problems With a Streamlined Design Process(수월하도록 설계된 디자인 프로세스의 문제점)

Needless to say, this particular approach to streamlined design has plenty of problems. Our biggest concern is that it takes a lot of the personality and art out of the work. Our passion for design is what drives us. Small projects tend to be much more rigid in their process, and we have to supplement them with work that allows our creativity to breathe.

With this process, we could also encounter issues with addressing the particular needs of clients. With budgets that are so low, not much time can be spent identifying the target audience, developing a unique design for the brand, or addressing any other things that are particular to your client’s situation. But we have found that, in most small projects, the client is never so demanding that you don’t have at least some time to address their concerns. In the case of Menno Tea, we had plenty of time to address their particular needs.

Finally, by no means do we wish to represent Web design as a cookie-cutter process. We hope this article serves as an overview of ways to cut down on cost and time, but never sacrifice too much of the organic and innovative processes required to be a quality Web worker. Whatever you do, don’t strip the soul out of design. Do what feels right. If you don’t feel right about your processes or feel confident that the client will be getting the quality that they’re paying for, then chances are you’re doing something wrong. After all, in order to succeed, you have to be true to yourself.

What Are Your Thoughts?

More importantly, what do you think about small projects? Are they worth taking on, or are they just too much of a hassle? How does a business handle a budget that isn’t ideal? And do you believe that providing low-cost solutions cheapens our work as designers and developers?


Jon Savage and Simon Birky Hartmann are design professionals, collaboratively running a curious design studio named Studio Ace of Spade. Both having graduated from Goshen College, their skills cover four areas: Computer Science, Design, Business Information Systems, and Business. With backgrounds in project management, video games, and craft beers, they are building quite the interesting design business. Check out their work on FlickrDribbbleBehance, and Twitter.

Read More

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


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? / 긴 분량의 텍스트에서 맵, 다이어그램, 그래프, 플로우차트, 기타 비주얼 등을 제공하는가?


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.


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.


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.

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


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


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

Read More

sample Design(for Editorial) for e-Letters


E Letter_ver 01

Read More