[글쓴이:] designmonster

아침의 혼란 속에서 반복되는 실수

우리 모두는 정신없이 바쁜 순간에 실수를 저지르기 마련입니다. 저에게 있어 하루 중 가장 정신없는 시간은 아침에 일어난 직후입니다. 이때는 잠을 더 자고 싶다는 강렬한 욕구와 잠이 부족한 상태로 인해 몸은 일어나 있지만, 정신은 아직 꿈속에 머물러 있는 것 같은 상태에 빠지곤 합니다. 이로 인해 아침 시간에는 평소보다 많은 실수가 발생하게 되는데, 이는 특히나 눈에 띄게 나의 하루를 시작하게 만듭니다.

실수의 주된 원인: 낮은 인지 상태

아침에 일어나 가장 먼저 하는 일 중 하나는 물로 얼굴을 씻으며 잠을 깨우는 것입니다. 그러나 이 과정에서 문제가 발생할 때가 있습니다. 저는 안경을 착용하고 있어 시야가 명확하지 않은 상태에서 정신도 맑지 않은 상황입니다. 이러한 상태에서 저지르는 가장 흔한 실수 중 하나는 폼 클렌징을 칫솔에 짜서 이를 닦으려는 것입니다. 폼 클렌징을 입에 넣고 이를 닦기 시작하면, 곧 이상한 맛과 과도하게 발생하는 거품 때문에 실수를 깨닫게 됩니다. 이때, 입안의 모든 것을 뱉어내고 혀를 닦아내며 잠이 완전히 깨어나는 경험을 하게 됩니다.

튜브형 제품의 디자인 문제점

이와 같은 실수는 단순히 저의 정신이 덜 깬 탓만은 아닙니다. 실수의 근본적인 원인 중 하나는 튜브형 제품들의 디자인에서 비롯됩니다. 물론, 튜브형 디자인이 중력을 이용하여 내용물을 쉽게 사용할 수 있도록 하는 점은 매우 훌륭합니다. 튜브형 제품들은 일반적으로 내용물을 끝까지 밀어 사용할 수 있게 해주는 구조적 이점이 있습니다. 그러나 문제는 이러한 튜브형 제품들이 비슷한 크기와 형태를 지니고 있어, 사용자가 아침같이 정신없는 상황에서는 쉽게 구별하기 어렵다는 점입니다.

사용자 환경의 다양성 고려 필요성

물론, 저는 아침에 정신이 덜 깬 상태였다는 점에서 이러한 실수를 저질렀습니다. 하지만 모든 사용자가 항상 명확한 판단을 내릴 수 있는 상황에 놓여 있다고 가정할 수 있을까요? 사용자의 상황과 환경은 각기 다르며, 특정 상황에서는 누구나 비슷한 실수를 저지를 가능성이 있습니다. 그렇기 때문에 제품 디자인에서는 사용자가 쉽게 구별할 수 있도록 형태적, 색상적, 혹은 촉감적인 차이를 명확하게 만들어줄 필요가 있습니다.

해결책: 명확한 구분을 위한 디자인

이 문제를 해결할 수 있는 방법은 몇 가지가 있습니다. 첫 번째는 두 제품의 색상을 명확히 구분하는 것입니다. 색상의 차이는 시각적으로 쉽게 구별할 수 있는 요소로, 아침같이 정신이 혼미한 상황에서도 실수를 줄일 수 있습니다. 두 번째는 제품의 형태를 달리하는 것입니다. 예를 들어, 폼 클렌징과 치약의 튜브 형태가 다르다면 사용자는 형태의 차이만으로도 쉽게 구분할 수 있습니다. 세 번째로, 제품의 질감을 다르게 만들어 사용자가 손으로 만졌을 때도 구분할 수 있게 하는 방법이 있습니다. 이러한 디자인적 접근은 사용자에게 혼란을 주지 않도록 하며, 실수를 줄이는 데 큰 도움이 될 것입니다.

디자인에서의 ‘형태는 기능을 따른다’ 원칙

이러한 사례는 디자인 원칙 중 하나인 ‘Form follows function(형태는 기능을 따른다)’의 중요성을 다시금 일깨워줍니다. 이 원칙은 제품의 형태가 그 기능을 충실히 반영해야 함을 의미합니다. 즉, 사용자는 제품의 형태만으로도 그 용도를 직관적으로 알 수 있어야 한다는 것입니다. 이 원칙을 무시하면 사용자는 제품의 용도를 혼동할 수 있으며, 이는 곧 실수로 이어질 가능성이 커집니다.

UI 디자인의 중요성: 모든 상황을 고려해야

UI 디자인에서도 이러한 원칙은 매우 중요합니다. 모든 사용자가 동일한 환경에서 제품을 사용하지 않는다는 점을 인식하고, 다양한 상황을 고려하여 디자인하는 것이 필요합니다. 사람마다 인지 능력, 시각적 취향, 사용 환경이 다르기 때문에 가장 명확한 구분을 통해 사용자와 소통할 수 있는 플랫폼을 구축하는 것이 바람직합니다.

용도에 따른 형태의 중요성

디자인에서 형태가 용도에 맞게 구분되는 것이 가장 중요합니다. 형태가 명확히 구분되어야 사용자는 혼동하지 않고 제품을 올바르게 사용할 수 있습니다. 형태의 구분이 어려운 경우, 색상을 통해 구분하는 것이 좋으며, 그 다음으로 그래픽 요소를 활용하는 방법이 있습니다. 만약 이러한 시각적 구분마저도 어려운 경우, 사용자는 혼란을 겪게 되며 이는 곧 사고로 이어질 수 있습니다.

곰표와의 컬래버레이션 사례

최근 유행했던 곰표와의 컬래버레이션 사례에서도 이러한 문제는 한 번 더 드러났습니다. 곰표 브랜드는 원래 밀가루로 유명했으나, 곰표와의 협업으로 만들어진 치약과 같은 제품들이 등장하면서 혼란을 초래할 수 있었습니다. 이와 같은 혼동은 사용자가 제품의 용도를 오인하게 할 가능성이 높았으며, 이는 매우 위험한 상황을 초래할 수도 있었습니다. 따라서 제품의 용도가 명확히 구분될 수 있도록 디자인하는 것이 무엇보다 중요합니다.

결론: 명확한 구분을 통한 디자인의 필요성

요약하자면, 제품의 용도에 따라 형태가 달라져야 합니다. 그래야만 사용자가 제품을 혼동하지 않고 올바르게 사용할 수 있기 때문입니다. 이는 디자인에서 기본적인 원칙이며, 이러한 원칙이 지켜질 때 사용자는 제품을 보다 안전하고 효과적으로 사용할 수 있습니다. 디자인의 역할은 단순히 시각적인 아름다움을 제공하는 것이 아니라, 사용자의 편의성과 안전을 보장하는 데 있습니다. 이를 위해 제품 디자이너들은 사용자의 다양한 상황을 고려하여 형태적, 색상적, 촉감적 요소를 세심하게 설계해야 합니다.

결국, 사용자의 삶을 보다 편리하고 안전하게 만드는 것이 디자인의 궁극적인 목표임을 다시 한 번 강조하며, 디자인 과정에서 이 목표를 항상 염두에 두어야 할 것입니다.

예측 가능성을 높이는 여섯 가지 방법

1. 사람들이 하려는 것이 무엇이든 시작하기 전에 무엇을 기대해야 하는지 알려 주어라.
2. 당신의 사람들에게 기대하는 바가 무엇인지 알게 하라
3. 사람들에게 다단계 프로세스 안에 얼마나 많은 단계가 있는지 알려주어라.
4. 실제로 진행 중인 과정에서 바라는 결과를 이해하고 있음을 명심하라.
5. 사람들이 찾기를 기대하는 곳에 그것을 두어라.
6. 보이지 않는 조건에 대한 주의를 주는 가시적 신호를 만들어라.

기대치 확인하기

기대하는 것을 안다는 것은 실제호 상호작용이 일어나기 전에 기대치를 설정하는 것이다.

기대치 설정 돕기

소셜미디어에서 나타나는 10가지 실수 목록

1. 거짓말하기
2. 무시하기
3. 부인하기
4. 논쟁하기
5. 과대 선전하기
6. 게임하기
7. 숨기기
8. 미워하기
9. 검열하기
10. 소셜미디어를 수용하지 못하는 것

만약 당신이 이러한 실수를 피할 수 있다면, 당신은 아마 의미 있고 신뢰할 수 있는 기대를 만들어내는 일을 훨씬 더 잘할 것이다.

중요한 정보를 보물처럼 숨기지 마라

내놓고 드러내기

당신이 기대하는 것을 말하기

• 사람들이 가질 필요가 있는 구체적인 지식이 있는가?
• 어떤 물리적이거나 기술적인 제약이 있는가?
• 어떤 지리적 제약이 있는가?
• 나이 제한이 있는가?
• 먼저 완료해야만 하는 사전적 격성 평가 절차가 있는가?
• 시간제한이 있는가?
• 사람들이 준비해야 할 필요가 있는 구체적 정보가 있는가?

예시

• 기본적인 스페인어 실력 필요함
• 마소 xp 이상 가능
• 미국 외에 배송 불가
• 구매자는 반드시 21세 이상이어야 함
• 처방전이 있어야 함
• 이 행사는 2015년 4월 30일까지만 유효합니다.
• 전화하실 때 미리 계좌 정보를 준비해주시기 바랍니다.

기대하는 바로 그곳에 두기

항목을 보일 수 있게끔 하라는 것은 쉽게 보이는 곳에 그 항목을 배치하라는 뜻이다. 예측 가능성의 측면에서, 사람들이 찾는 곳에 그 항목을 배치하는 것 역시 중요하다.

보이지 않는 조건들에 대한 경고

맥도날디제이 션에 대한 짧은 소개

• 효율성: 각 목표를 위해 가장 우수하면서 낭비는 최소화하는 방법 택하기
• 신용성: 질보다는 양을 강조
• 예측 가능성: 환경 및 시간을 아우르는 통일성
• 통제: 사람들로부터 기술을 없애기

---

사람들이 미래를 예측할 수 있도록 도와주는 10가지 방법

1. 당신은 과거 경험에 의존해 사람들을 돕고 있는가? 그렇지 않다면, 인지적 계기를 만들어낼 수 있는가?
2. 사람들이 미리 알아야 할 것들이 있는가? 그것들을 논리적이면서 지나치게 관심을 끌지 않는 방법으로 사람들에게 알릴 수 있는가?
3. 사람들에게 당신이 그들에게 무엇을 기대하는지 알려준 적이 있는가? 그들에게 특별한 재능이 필요하거나 어떠한 전제조건을 충족시켜야 하는가? 만약 그렇다면, 그 과정에 깊게 관여하기 전에 그 점에 관해 분명히 전달했는가?
4. 당신의 물건이 다단계의 과정을 포함하고 있는가? 그리고 사전에 사람들에게 그것이 몇 단계나 있는지 알려주었는, 혹은 당신의 커뮤니케이션 및 또는 디자인을 미세하게 조정할 필요가 있는가?
5. 실제로 당신의 욕구를 충족시키기 위해 사람들이 완전히 다른 과업을 해결하게끔 한다고 했을 때, 그 사람들은 하나의 구체적인 과업을 해결하고자 노력하는가? 두 개의 다른 과정을 분리시킬 수 있는가, 또는 제품이 적절하게 기능을 할 수 있도록 만들기 위해 사람들이 당신의 요청을 수행할 필요가 있음을 그들에게 알릴 수 있는가?
6. 당신의 디자인과 관련된 디자인 패턴을 본 적이 있는가? 당신은 그 모법 사례를 따르고 있는가? 만약 아니라면, 왜 그렇지 않은가?
7. 발생할 가능성이 높은 위험들 -특히 물리적 위험-을 나타내는 어떤 종류의 가시적 신호들을 제공할 수 있는가?
8. 만약 당신이 소셜미디어 도구들을 사용하고 있다면, 이 챕터의 앞에서 언급된 10가지 실수들 중 무언가를 범하고 있는가?
9. 당신은 디자인이 효과를 발휘하게 만들기 위해 지시문에 의존하고 있는가? 오직 필요할 때에만 나타나는 작업 관련 메시지들을 만듦으로써 전통적인 매뉴얼과 ‘사용상의 주의’ 등과 같은 설명을 제거할 수 있는가?
10. 당신이 어떤 물건을 사용하다가 예상치 못한 상황에 부딪히면 어떤 일이 일어나는가? 당신이 예상한 대로 온전히 작동하지 않은 부분이 있는가?

일관성의 부재: 반드시 서로 다르게 동작해야만 할 때 시각적으로 일관성이 없는 것은 어떤 것들이 똑같이 동작할 때 시각적으로도 동일하게 보이는 것과 마찬가지로 중요하다.

동의어의 유혹

창의성을 위한다거나 일을 대충 하지 않겠다는 등의 이유만으로 당신의 용어들을 마구 혼용하지는 마라. 나름의 언어 규칙을 수립한 후에는 그것을 고수하고, 특히 서식과 대화 상자와 관련된 사항에는 더욱 그렇게 해라.

환원적 추론의 중요성

환원적 추론은 우리가 어떤 상황에서 배운 것을 새롭지만 비슷한 또 다른 상황에 적용하는 논리적 사고의 과정이라 할 수 있다.

표준화는 일관성을 증진시킨다

창의성에 제동을 거는 것이 아니라, 해결책에 명확성을 세우는 것이다.

하나의 버튼에는 하나의 기능만

다기능 버튼은 정말 골칫거리가 될 수도 있다. 버튼이 알아보기 쉽게 잘 분류되어 있고 매번 다른 기능을 하지만 않는다면, 버튼이 많은 것이 꼭 나쁜 것만도 아니다. 일관성과 단숨함은 언제나 서로 밀접한 관련이 있다. 하지만 단순함과 사용의 편리성을 혼동하지는 말아라.

하나의 아이콘에는 한 가지 행동만

하나의 제품에는 한 가지 동작만

---

묻고 답해야 할 10가지 질문들

1. 똑같아 보이지만 실제로는 다르게 기능하는 것이 당신의 디자인에 존재하는가? 다르게 기능하면 서로 다르게 보이도록 하라.
2. 동일한 기능을 하지만 다르게 보이는 것이 당신의 디자인에 존재하는가? 동일한 기능이면 동일하게 보이도록하라.
3. 당신이 어딘가에서 보았던 유사 제품과 다르게 보이는 것이 당신의 제품에 존재하는가? 간과되었거나 무시되었던 모범적인 디자인사례 같은 것이 있나?
4. 어떤 대상이나 기능의 일관성이 창의성을 위해 희생되고 있지는 않은가? 이 기능과 대상은 무엇인가? 디자이너들을 대단히 불쾌하게 하지 않으면서도 효과가 빠른 해결책을 떠올릴 수 있는가?
5. 다른 시간에 다른 것을 하리라 예상되는 물리적 버튼이 손잡이 그리고 레버를 갖고 있느낙? 더 많은 버튼이나 레버를 추가하는 것이 괜찮을 수 있는가?
6. 다른 기능을 위해 재사용되고 있는 아이콘들이 있는 건 아닌가? 만약 그렇다면 그 아이콘들을 다시 디자인하거나 없애라.
7. 어떤 대상이나 과정의 일관성을 증진시킬 수 있는가? 다른 사람들에 의해 개발된 모범 사례를 채택하는 것과는 완전히 별도로 제품이나 서비스의 맥락 내에서 기능적인 통일성을 향상시키도록 시도하라.
8. 당신의 제품은 사용자들이 그것을 어떻게 사용하는지 이해하기 위해서 유하산 제품이나 서비스에 대한 사전 지식을 필요로 하지는 않은가? 만약 그렇다면 사용자들은 당신의 제품을 마주하면서 이 유사성을 인지할 것인가? 사용자들에게 그들이 어딘가에서 본 듯한 지식을 끌어낼 수 있는 강력한 시각적 단서를 주어야 함을 명심하라.
9. 버튼이나 다른 통제장치의 색상이나 물리적인 그룹화를 이용함으로써 사용자들이 직관적으로 그것들이 어떤 식으로 연관되어 있는지를 바로 확인할 수 있는가?
10. 근본적인 일관성 문제를 신속하게 고치키 위한 방편으로서 어떤 지침에서 뭔가를 ‘덧대었던’ 적이 있는가? 실제로 문제를 고치는 것이 가능하며 그 덧댄 부분을 업앨 수 있다면 아마 지금이 그렇게 할 때다.

---

자료 출처: UX 불변의 법칙 — 에릭 리스

논리적 추론의 세 가지 기본 유형

• 연역적 추론
• 우리가 어떻게 ‘참’-그것이 무엇이든-에 도달하는 가다. 이것은 A=B 그리고 B=C라면, A=C가 되는 것을 의미한다.
• 귀납적 추론
• 어떤 것이 반드시 참일 필요는 없으나, 참이 될 수 있는 가능성을 제시한다. 이는 우리의 관찰에 근거해 판단을 내리는 것을 도와준다.
• 환 원척 추론
• 한 상황에서 어떤 것을 배운 다음, 이것을 새로우면서도 유사한 상황에 적용하는 것을 말한다.
  이 세 가지 사고방식은 모두 ‘사용성’에 대한 우리의 지각에 영향을 미치는 ‘어떤 것’에 관한 것이다. 내가 말하는 ‘어떤 것’은 기본적으로 모든 것을 의미한다는 점을 명심하라. 물리적 개체, 상호작용 대상, 서비스 등이 모두 포함된다.

마법의 단어 ‘왜’

우리는 사람들이 직접 생각하게 하지 말고, 그들을 위해 될 수 있으면 앞서서 대신 생각해야 한다. 또한 언제든 누군가가 당신이 만들고 있는 것을 사용하면서 “왜 이렇게 만든 거야?”라고 묻는다면 사용성에 문제가 있음을 당신은 알고 있어야 한다.

디자인 부조화

디자인 부조화는 사물의 실제 기능과 조화를 이루지 못하는 어떤 종류의 인지적 신호를 보내는 것이라고 할 수 있겠다. 디자인은 사람들이 이미 가지고 있을 법한 심적 모형을 뒷받침하는 것이어야 한다. 당신은 사람들이 당신 제품을 처음 경험하면서 잘못된 방향으로 인도되기를 원하지는 않을 것이다.

유스 케이스

• 기본 작업 흐름은 표시하지만 세부 사항은 거의 보여주지 않는 일반적인 흐름
• 다양한 상호작용을 보여주는 터치포인트 및 서비스 디자인 흐름
• 통상적인 순서와 방법을 계획하는 데 사용될 수 있는 흐름도

선형 프로세스

흐름과 관련한 대다수의 논리적 문제가 사실선 선형적

---

묻고 답해야 할 10가지 질문들

1. 프로젝트를 검토하면서 “우리가 왜 그랬지?”라고 묻게 만드는 기능적인 문제가 있는가?
2. 왜 무언가가 일어났는지 궁금하게 만드는 대응성 질문이 있는가?
3. 인체공학성은 어떠한다? 불필요하게 스크롤하기를 강요받거나 무언가를 달성하는 데 너무 많은 도움이 필요한 것은 아닌가? 기억하라, 만약 당신이 “왜”라고 묻는다면, 중요한 것을 추적하고 있는 과정일 수 있다.
4. “왜 더 쉽게 만들 수 없지”라고 스스로 묻게 만드는 편의성과 관련된 어떤 상황을 발견할 수 있는가?
5. 당신은 실수한 순간이 있는가? 그랬다면, 그 실수를 피할 방법을 생각해낼 수 있는가? 가족 구성원, 친구, 또는 동료에게 같은 것을 보도록 부탁하고 그들이 어떻게 반응하는지 지켜보는 것은 어떤가?
6. 당신의 제품 중에 보이는 것과 실제로는 매우 다른 어떤 것이 존재하는가? 당신은 디자인 부조화를 줄일 수 있는 뭔가를 할 수 있는가?
7. 당신의 제품을 위해 서너 개의 맑은 날의 유스 케이스를 계획해보도록 하라. 이제 간단한 흐름들 만들어라. 불명확해 보이는 어떤 것이 존재하는가? 그 흐름은 펼쳐내기 어려운 것인가? 만약 그렇다면 사용성 결함을 발견한 건지도 모른다.
8. 흐름의 논리는 어떠한가? 당신의 목표에 가까이 다가갈 수 있는 각각의 단계가 있는가? 아니면 당신을 불필요한 접선으로 떨어트려 놓는 흐름이 있는가? 만약 그렇다면, 이런 우회로들을 제거할 수 있는가?
9. 공유 준거를 형성한다는 관점에서 당신의 제품을 보아라. 보이지 않는 프로세스에서의 더 나은 커뮤니케이션이 다른 사람들에게 더 논리적으로 보이게 만들도록 도움이 되는 곳이 있는가?
10. 인터넷 브라우저에 있는 뒤로 가기 버튼이 이미 진행 중인 루틴을 ‘차단’하지 않도록 항상 확실히 하라.

---

자료 출처: UX 불변의 법칙 — 에릭 리스

‘공유 준거’란 무엇인가?

가장 기본적으로 설명하면, 공유 준거는 어떤 것을 사용하는 사람이 그것을 만든 사람과 그것에 대한 기본적인 이해를 공유한다는 것을 의미한다. 인터랙티브 미디어에서는 당신이 마음대로 이용할 수 있는 다음의 세 가지 도구가 있다.

• 말
• 이미지
• 사운드

단어에 대한 약속

단어는 우리 주변을 둘러싼 세계를 이해하는 것을 돕는 데 여전히 매우 중요한 역할을 한다. 그래서 일반적으로 책에는 그림보다 단어가 더 많다. 심지어 아이폰의 멋진 아이콘들 역시 단어와 함께 조합되어 있다. 또한 단어는 대부분의 사용 설명서, 메뉴, 제품 설명서, 마케팅 자료, 홍보 자료 등의 기본을 이룬다. 식자율이 한 국가의 발전 수준을 나타내는 핵심 지표로 여겨질 만큼 단어를 사용하는 능력은 매우 중요하다.
사용자의 측면에서 기억할 것은 딱 2가지다

• 당신이 무엇을 말하든 그것을 명확하게 말하라.
• 모든 사람이 당신이 쓴 것을 그대로 읽으리라 생각하지 마라.

효과적인 ‘공유 준거’를 만드는 다섯 가지 열쇠

• 어떤 것도 당연시하지 마라.
• 사람들이 가질 만한 의문을 예상하라.
• 사람들이 물어볼 생각을 하지 않았던 질문에 답하라.
• 방문자의 상황에 대한 맥락 속에서 내용을 검토하라.
• 커뮤니케이션 환경 -경험을 둘러싼 시간과 공간- 은 주어진 시간에 필요한 정보의 성격에 영향을 미칠 것이다.

당신의 이야기를 하는 것을 두려워하지 마라

• ‘우리 고객들은 이걸 이미 알고 있어, 그러니 한 번 더 말할 필요가 없어.’
• ‘웹사이트의 텍스트는 10줄을 넘지 말아야 한다.’
• ‘사람들은 웹사이트에서 스크롤을 내리지 않는다.’

첫 번째 통념은 강력한 공유 준거를 만들 아주 많은 기회들을 놓치게 하는 원인이다. 명시하는 것을 잊어버리는 것이 이에 해당한다.
두 번째 지난 90년대 중반에 포키 컴퓨터가 포키 다이얼 접속 모뎀을 통해 장황한 텍스트를 다운로드하곤 할 무렵, 사용성 전문가 제이콥 닐슨이 한 말이다. 계속해서 변화해 긴 글을 더 많이 읽는 경우도 있다.
세 번째 발언은 틀렸다.
당신의 이야기를 간단명료하게 하라. 빈칸을 채워라. 세부 사항을 놓치지 마라. 견고한 공유 준거를 아우르는 컴포트 존을 구축하라.

사진과 기타 시각적 보조물들

때때로 한 장의 사진이 천 마디 말의 가치가 있다. 사진과 이미지만으로 당신이 전달하고자 하는 이야기를 충분히 설명할 수는 없다는 점을 기억하기 바란다. 메시지를 효과적으로 전달하기 위해 하나 이상의 공유 준거를 사용하는 것을 주저해서는 안된다.

아이콘을 포함한 다른 성가신 것들

사실 대부분의 사람들에게 제대로 인지될 가능성이 있는 아이콘은 오직 4개뿐이다.

• 돋보기
• 집
• 편지봉투
• 프린터

월드와이드 웹에는 해가 지지 않는다.

당신이 섬세하게 확인해야 하는 것들

• 이름과 성
• 측정 단위
• 통화와 세금

---

묻고 답해야 할 10 가지 질문들

1. 글로 표현한 당신의 서술은 어떠한가? 정확하고 포괄적인가? 아무 페이지나 고른 다음 그 페이지가 ‘전구’테스트를 통과하는지 보아라. 이 테스트를 당신의 회사와 관련이 없는 가족이나 이웃을 대상으로 시도해보라.
2. 제품이나 서비스를 주로 사용하는 3명을 규정하라. 그들 각각이 당신의 상품과 모든 경로에서 어떻게 상호작용하는지를 묘사하는 짧은 이야기를 만들어라. 개선될 수 있는 접점이 보이는가?
3. 축약어, 사내 용어, 또는 당신의 상품을 사용 한느 사람들이 이해하지 못할 수도 있는 어려운 단어를 사용하고 있는가? 이 언어를 없애거나 개선할 수 있는가?
4. 적절한 공유 준거를 만들어내지 못하는 이미지들을 찾아낼 수 있는가? 이 이미지들을 다시 조정해 더 나은 크기 감각, 기능 등을 제공하게 할 수 있는가?
5. 만약 가격이 표시되어 있다면 환율, 세금, 배송료,, 또는 레스토랑의 서비스료 등의 포함 여부를 사람들이 알 수 있는가?
6. 당신이 살고 있는 지방이나 지리적 지역 밖에 있는 사람들이 이해하기 어려운 온라인 페이지나 오프라인 프로세스가 있는가? 몇몇 단어를 추가해 그것들을 더 이해하기 쉽게 만들 수 있는가?
7. 서술적 표현을 동반하지 않는 아이콘을 갖고 있는가? 만약 그렇다면, Alt 속성을 포함해 단어를 조금 추가해 주어라.
8. 시각디자인의 관점에서 본격적인 공유 준거의 제작을 방해하는 물리적 제약이 있는가? 그와 같은 요소를 다시 디자인하는 것이 가능한가?
9. 사람들이 당신의 제품과 서비스를 이해하도록 돕기 위해 비교를 하거나 유추를 사용하고 있는가? 만약 그렇다면, 다른 사람들은 이 비교를 이해하는가?
10. 실제로 사람들은 속이는 글 또는 시각적 묘사가 있나? 사람들을 속이는 것이 아니라고 가정할 때, 더 유용한 방향으로 전환하기 위해 무엇을 할 수 있는가?

---

자료 출처: UX 불변의 법칙 — 에릭 리스

어떠한 물체가 보이거나 인정되지 않는다면, 그것은 간단한 존재하지 않는 것이다. 좀 더 직설적으로 말하자면, 링크가 링크로 인지되지 않으면, 대중들은 그것을 클릭하지 않을 것이고, 옵션이 누군가에 의해 인지되지 않으면, 그것은 존재하지 않는 것이라고 보면 된다.

---

가시성을 잃어버리게 되는 네 가지 경우

1. 사람들이 찾는 곳에서 필요한 정보를 이용할 수 없을 때
2. 필요한 정보가 다른 무언가에 의해 물리적으로 차단되어 있을 때
3. 심지어 필요한 정보가 잘 보이는 곳에 있더라도 인식되지 않을 때
4. 그냥 필요한 정보 자체가 존재하지 않을 때

사람들이 스크롤을 하고 있다!

대다수의 디자인팀은 사람들이 스크롤을 하지 않는다고 생각할 것이다. 하지만 1996년부터 이어져 온 연구 결과를 보면 ‘사람들은 분명히 스크롤을 한다!’ 대개 한 페이지에서 최소한 50% 정도를 스크롤한다.

접히는 부분을 정확히 보여줄 수 없는 이유

• 접히는 면의 위치는 브라우저 창의 크기에 따라 달라진다.
• 큰 스크린에서 브라우저 창을 최대화하면 어떠한 페이지든 많이 볼 수 있겠지만, 창을 작게 하면 그만큼 적게 보일 것이다. 그리고 스마트폰이나 넷북에서는 일반 컴퓨터 모니터의 크기보다 보이는 부분이 항상 작을 수밖에 없다.
• 새로운 툴바가 열릴 때마다 접히는 면은 점점 페이지의 위쪽으로 올라가게 된다.
• 툴바는 브라우저 창의 맨 위에 보이는 여러 가지 도움 되는 기능 아이콘들이 있는 줄이다. 여기서 인쇄하기나 저장하기 등 다양한 기능을 빠르게 수행할 수 있지만, 이 툴바가 많이 열려 있을수록 브라우저 창은 공간을 더욱 많이 차지하게 되며, 그에 따라 웹페이지는 더욱 아래 공간으로 밀릴 수밖에 없고, 이것이 접히는 면을 원래보다 위쪽에 오도록 만든다.
• 화면의 해상도가 낮을수록 접힌 면은 더 위쪽에 형성된다.
• 화면의 해상도는 브라우저 창에서 보이는 것을 엄청나게 바꿀 수 있다. 오늘날에는 표준 해상도가 1024X768 픽셀인 것이 일반적이지만, 시력이 좋지 않은 사람들은 해상도를 그보다 훨씬 낮게, 보통 800X600으로 설정하곤 한다. 이것이 브라우저 창에 표시되는 정보의 양을 줄이기도 한다.

접힌 면이 중요할 때

반드시 접힌 면에 있어야 할 것들

• 브랜딩과 메인 메뉴
• 고객센터의 연락처 정보
• 페이지 내 검색창
• 장바구니와 결제 링크
• 연락처 링크
• 언어 변경 기능
• 신속한 애플리케이션의 주요 입력창
• 주요 결과물 영역

페이지 가장 하단에 배치해도 문제가 없는 것들

• 법적 공지
• 개인정보 보호 정책
• 실제 주소와 전화번호

접힌 면이 중요하지 않을 때

1. 접힌 면을 정확히 찾아내는 것은 불가능하다. 당신이 아무리 훌륭한 예상을 한다고 해도, 방문자의 약 10% 정도만 만족시킬 수 있을 것이다.
2. 홈페이지는 ‘스크롤 친화적’으로 만들어야 한다. 그러면 페이지 윗부분에 가능한 한 많은 정보를 집어넣으려고 애쓰지 않아도 된다.
3. 여러분은 자신의 광고를 접힌 면 위에 배치해야 한다고 주장 한느 광고업자들을 많이 만나게 될 것이다. 그러나 사실 만약 페이지가 스크롤하기 좋은 데다 흥미로운 콘텐츠를 제공한다면, 긴 페이지의 하단에 있는 광고는 실제로 상단의 비싼 배너광고만큼 좋거나 혹은 더 나인 클릭 효과를 낼 수 있다.

스크롤 친화적 페이지 제작하기

스크롤 친화적인 환경을 만드는 요령은 하나는 그래픽적으로 따분한 곳의 내용을 잘라내 버리는 것이다. 보통 웹페이지 아래쪽 가장자리가 깔끔해 보일수록 스크롤 친화력은 더 떨어지는 경향이 있다.

불친절한 스크롤 친화적 페이지

1. 만약 화면에 어떠한 변화가 있다면 당신은 방문자들이 그것을 알아채기를 바랄 것이다. 하지만 이 변화가 ‘화면 바깥’, 즉 보이지 않는 곳에서 일어난다면 방문자들은 변화가 실제로 있었는지 알아챌 수 없을 것이므로 똑같은 정보를 계속 다시 제출했다가 포기하고 싶어질 것이다. 이는 내가 전에 언급했던 피드백 문제와 밀접한 연관이 있지만, 이 상황에서는 피드백이 없는 것은 아니다. 단지 피드백이 어디에 있는지 보이지 않을 뿐이다.
2. 스크롤 친화적인 페이지가 구축되어 있다 하더라도, 당신은 방문자들이 필요 이상으로 스크롤하는 것은 원하지 않을 것이다. 제출 버튼이 화면에서 살짝 벗어나 있는 것 때문에 스크롤을 아주 조금씩 내려야 하는 것은 엄청나게 짜증 나는 일이다. 스크린이 작아질수록 점점 더 많은, 입력창, 출력 창 등이 아마도 페이지의 상단과 하단에서 모두 반복되어야 할 필요가 있다고 유추할 수 있다.

스크롤, 메뉴 길이 그리고 모바일 폰

만약 당신이 어떠한 이유로든 사용자가 스크롤을 하도록 만들기 위해서는, 확실한 시각적 단서를 제공하라! 만약 작은 스크린을 사용할 때 볼 수 있는 메뉴 항목의 수가 제한되어 있다면 특정 범주의 총 메뉴 항목 수를 스크롤하지 않고 화면에 표시할 수 있는 개수까지로 제한 한느 것이 좋다. 사용자들이 스크롤을 하지 않는 것이 아니라, 스크롤해야 한다는 사실을 몰라서 안 할 뿐이다.

중요한 것을 광고처럼 보이게 만들지 마라

광고업체들은 광고를 콘텐츠처럼 만들어 사람들이 이를 클릭하게 만드는 다양한 트릭들을 개발해왔다. 이런 것은 실제로 효과가 있다. 그러므로 그 반대의 효과도 가능하다는 사실에 놀라지 마라. 만약 사용자들이 당신의 콘텐츠를 읽고 사용하기를 원한다면, 그 콘텐츠를 광고나 상황별 메뉴, 또는 완전히 새롭고 전혀 원하지 않은 방향으로 내모는 것처럼 보이는 어떤 것으로 만들지 마라.

맛보기 서비스의 함정

사용성 비즈니스에서 성공하려면 당신 역시 고객들에게 그 가치를 보여줘야 한다. 그러니, 무언가 숨기려고 하지 마라.

깨달음을 주는 엘리베이터 조사

가시성이라는 주제를 다루면서 내가 가장 선호하는 방법은 낯선 건물에서 막 엘리베이터를 타고 올라가 어떤 층에서 내렸다고 가정해보는 것이다. 엘리베이터에서 내린 다음에는 무엇을 해야 할지 알아봐야 한다. 내가 필요한 정보가 눈에 보이는가? 내가 어디로 가야 할지 알려줄 표지판이나 어떤 다른 단서가 있는가?
건축가들은 물리적 환경에서 표지판을 만들 때 ‘길 찾기(wayfinding)’에 대해 이야기한다. 하지만 그 원리는 웹사이트, 레스토랑 메뉴 그리고 다른 수많은 것들에 적용할 때에도 마찬가지다. 핵심은 바로 가시성이다.

셜록, 에드워드, 도널드 노먼 그리고 기

정보에 관해서는 정보의 ‘해상도’를 줄이는 것에 의존하면 안 된다.
‘우리는 단순함을 갈망하는 동시에 복잡성 또한 필요하다’

---

찾아봐야 할 10가지 비가시적 사항들

1. 당신의 제품 정보가 실제로 사용 불가능한 상태임에도 사용 가능하다는 신호를 보내지는 않은가? 아니면 당신이 사람들이 볼 수 없는 어딘가에 그것을 숨겼던 것은 아닌가?
2. 무언가가 물리적으로 사용자의 정보에 대한 시야를 가리지 있지는 않은가? 팝업창? 물리적 장애물? 아니면 그 밖의 것? 일단 제거하라!
3. 중요한 정보가 배너광고나 기타 관련성이 미심쩍은 그 밖의 무언가와 같이 무시해도 될 법한 것처럼 보이지 않는가?
4. 당신은 사용자들이 어떤 종류의 작업을 완료하는 데 필요한 중요한 정보를 포함하는 것을 잊어버리지는 않았는가?
5. 제품에 ‘접힘’ 속성이 있나? 만약 그렇다면 사용자가 필요로 하는 정보는 모두 접힌 면의 동일한 부분에 그룹화되어 있는가? 아니면 그 접힘 면이 이름과 주소, 입력과 출력 등을 따로 떨어뜨려 놓고 있지는 않은가? 또 주요 연락처 링크와 같이 중요한 것이 접힌 면 아래에 가려져 있지는 않은가?
6. 화면상의 기다란 페이지는 사용자들이 스크롤을 하게끔 강력한 신호를 보내고 있는가?
7. 인터넷에서 일정 금액을 지불해야 콘텐츠를 볼 수 있도록 한 것이 오히려 무료 콘텐츠에 대한 사용자 경험을 방해하고 있지는 않은가?
8. 웹사이트에 있는 모든 페이지, 빌딩에 있는 모든 문 그리고 당신의 제품에 대한 새로운 시각과 전망은 ‘깨달음을 주는 엘리베이터 조사’에 나오는 요구사항을 충족시킬 수 있는가?
9. 당신의 디자인팀이 제품을 더 나아지게 하려고 어수선함을 줄이고 있는가, 단지 더 예쁘게 만들려고 줄이고 있는가? 더 나아지는 게 더 낫다.
10. 사용자가 업무를 수행하는 데 도움이 되는 일반적인 용어 대신 내부에서 또는 독점 브랜드 용어를 사용하고 있지는 않은가? 예를 들어, ‘보험 가입하기’ 대신에 ‘토털 유연성(Total Flexibility Plan)에 가입하기’라고 말하지는 않는가?

---

자료 출처: UX 불변의 법칙 — 에릭 리스

인체공학의 12가지 기본 원칙이다.

1. 중립 자세로 작업하도록 하라.
2. 과도한 힘을 줄여라.
3. 모든 것을 쉽게 닿을 수 있는 곳에 두어라.
4. 적절한 높이에서 작업하라.
5. 과도한 움직임을 줄여라.
6. 피로도와 하중을 최소화하라.
7. 문제가 생길 수 있는 곳을 최소화하라.
8. 여유 공간을 제공하라.
9. 움직이게 하고, 운동을 시키고, 신충석이 있게 하라.
10. 편안한 환경을 유지하라.
11. 명료성과 이해도를 향상해라.
12. 작업 구조를 개선하라.

커서는 사용자의 전자 손가락 역할을 한다. 실제 손가락과 마찬가지로, 커서를 이용해 확실히 할 수 있는 행동과 확실히 할 수 없는 행동이 있다.

버튼: 대체로 클수록 좋다.

피츠의 법칙

MT = 운동시간, a, b — 실험 상수, A=운동 거리, W = 목표물의 폭이다. 목표물의 크기가 작고 움직이는 거리가 증가할수록 운동 시간(MT)은 증가한다는 것을 의미하는데, 속도가 증가할수록 정확성은 떨어짐

큰 버튼이 작은 버튼보다 찾기도 쉽고 클릭하기에도 빠르다.

• 모든 것을 쉽게 닿을 수 있는 곳에 둬라
• 명료함과 이해도를 향상해라

실제로, 클릭할 수 있는 링크는 크기가 클수록 더 누르기가 쉽다. 일반적으로 큰 스크린에서는 링크를 사용하는 것이 별 문제가 되지 않는다. 하지만 작은 터치스크린 기기에서 큰 손가락을 사용해 링크를 눌러야 한다면?

오늘날 우리는 인터랙티브 한 스마트 TV의 등장을 지켜보고 있다. 스마트 TV에서는 인터넷에 접속해서 원하는 동영상을 바로 스트리밍 할 수 있어서 전통적인 방송물에 대한 의존도가 감소한다.

1000분의 1초 계산

• 메뉴가 펼쳐지기 전에 커서가 0.5초 정도 랭크 위에서 머물 수 있게 하라. 이것은 내가 인터플로라 사이트에서 겪었던 ‘블루밍 플라워’의 문제를 피할 수 있게 해 준다.
• 애니메이션화 된 메뉴가 활성화되고 나면, 메뉴는 최대한 빨리 화면에 나타나야만 한다. 가능하다면 0.1 초도 안 되는 시간 내에 말이다.
• 방문자가 메뉴로부터 커서를 이동시키면 메뉴를 잘못 움직이더라도 메뉴 활성 영역에 커서를 반드시 두어야 할 필요가 없다.
• 그렇지만 메뉴가 사라질 때도 나타날 때만큼 빨리 없어져야 한다.

기능성의 관점에서, 엄처 나게 빠른 당신의 컴퓨터가 아닌 느린 기기에서도 이러한 동작들의 타이밍을 반드시 확인하도록 하라.

강조점 다음의 첫 단어

스크린에서 인체공학과 관련된 가장 중요한 연구 결과 중 하나는 긴 링크들의 리스트를 어떻게 잘 구성하는가에 관한 것이다. 사용성 전문가 제이콥 닐슨은 ‘F 패턴’에 대해 이야기한다. 기본적으로 사람들은 대충 리스트를 훑어볼 때 강조점 다음에 나온 첫 단어를 본다. 종종 이 첫 단어는 사람들이 링크 전체를 읽도록 유도한다.

리스트를 준비할 때 가장 중요한 단어가 끝이 아니라 시작되는 지점에 바로 나오도록 해야 한다는 것이다. 이것은 검색 결과의 리스트에서 특정 웹 페이지의 이름을 알려주는, 컴퓨터로 해독할 수 있는 메타 타이틀에도 적용된다. 그렇기에 가장 중요한 단어로 시작하지 않는 리스트, 메뉴, 혹은 링크는 그것이 무엇이든 비판적으로 보아라. 그리고 당신의 회사 이름이 아마도 리스트에서 가장 중요한 정보는 아니라는 것을 명심하라.

탭 키와 다른 키보드 단축키들

마우스의 출현에도 불구하고, 수많은 사용자들이 무언가를 할 때 키보드에서 손을 떼지 않는다. 호텔 룸을 예약하면서 한 영역으로 이동할 때 탭 키를 누르고, 작업하고 있던 문서를 저장하려고 키보드 단축키를 사용한다.

편안한 작업 환경을 유지하며, 피로함을 최소화하고, 모든 것이 쉽게 닿을 수 있는 데 있도록 해주었다.

여유 공간을 제공하라

인체공학의 기본 원칙에서 여유 공간을 제공하는 것은 두 대의 쇼핑 카트가 슈퍼마켓의 좁은 통로에서 부딪히지 않고 서로 지나칠 수 있게 하라는 것을 의미한다. 혹은 키 큰 사람들이 문틀에 머리를 부딪치지 않도록 하는 것을 의미하기도 한다. 또 버튼을 누르기 편하도록 크게 디자인하는 것도 해당된다.

‘다시 처음부터’

인풋에 다 넣고 실수로 뒤로 가기 할 때 날렸을 때 개 화남.

업무 구조를 향상해라

현실 세계에서 인체공학적 작업 구조 개선의 원칙은 합리적인 작업 흐름이 있음을 확인하는 것을 의미한다. 그 흐름이란, 프린터 옆에 프린터 용지를 두는 것, 제품이 조립라인에 따라 이동하는 것처럼 작업 프로세스가 시작되면 방해받지 않고 진행되는 것을 말한다.

범인은 늘 서식이다.

‘침묵의 안내자’

공연이 끝난 후 한꺼번에 내려오는 관중을 여러 갈래로 분산시키는 큰 기둥들이 있었다. 이 기둥들 중 대다수는 실제 지붕을 받쳐주는 것이 아니라 관중들을 통제하기 우회나 수동적인 장치였다.

나쁜 인체공학으로 인한 아픔과 고통을 피할 수 있게 도와주는 10가지 질문들

1. 마우스로 클릭하기 쉬울 만큼 버튼의 크기는 적당히 큰가?
2. 만약 손가락으로 터치스크린의 버튼을 눌러야 한다면 버튼의 크기는 충분한가?
3. 드롭다운 메뉴는 커서로 잡아내기 쉬운가? 검토할만한 타이밍 문제가 있는가?
4. 당신은 마우스를 대체할 수 있는 키보드 단축키를 제공하고 있는가?
5. 사용자들이 서식을 작성할 때 탭 키를 이용해서 다음으로 건너뛸 수 있는가?
6. 동시에 사용되어야 하는 요소들이 또한 동시에 보이는가?
7. 화면에 서로 방해되는 요소들이 있지는 않은가?
8. 사람들이 무엇을 해야 하는지 알려주는 ‘침묵의 안내자’에 해당하는 것을 제공할 수 있는가?
9. 시각적 장치들이 당신의 제품을 사용하기 어렵게 만들고 있지는 않은가?
10. 사용자가 작업을 더 쉽게 하도록 변경하거나 방지할 수 있는 비논리적 작업 순서 또는 작업 흐름의 방해물이 있는가?

---

자료 출처: UX 불변의 법칙 — 에릭 리스

누구나 실수 없이 제품을 사용할 수 있도록 하는 장치이다.

‘실패할 염려가 없는’ 제품을 만들고자 하는 노력을 멈추면 안 된다.

기본적으로 당신이 해야 할 일은 사람들이 뭔가를 할 때 실수하는 것을 막고 그들이 올바른 방향으로 가도록 가볍게 안내하는 것이다. 여기서 ‘가볍게’는 중요한 의미가 있다. 일반적으로 사람들은 무언가를 하도록 지시받는 것을 좋아하지 않기 때문이다. 이는 사람들이 뭔가를 하고 있을 때 절대로 중간에 끼어들어서는 안 된다는 것을 의미한다. 적어도 그들이 당신을 ‘지나치게 강요’한다거나 ‘거슬린다’라고 생각해서는 안된다. 반면 당신은 사람들이 너무 큰 문제에 계속 부딪히는 것은 원하지 않는다. 그러므로 당신의 안내는 최대한 섬세하면서도 효과적이어야 한다.

균형 있는 경험을 성취하는 것은 매우 어렵다는 것을 미리 알고 가자.

---

개선을 위한 비장의 무기 RAE

Remind

• 상기는 사람들이 문서를 닫기 전 저장하기나 이메일에 파일을 첨부하는 것과 같이 뭔가를 해야 할 것을 무심코 잊어버렸을 때 가볍게 알려준다.

Alert

• 사용자가 다음 단계로 넘어가기 전에 완료해야 하는 것을 구체적으로 표시하거나 태그 하는 것을 의미한다. 예를 들어 비밀번호를 입력한다거나 이용 약관에 동의하는 것이 이런 것들이다.

Force

• 이용할 수 없는 옵션들을 제거하는 것을 의미한다. 예를 들어 사용될 수 없거나 특정 시점에 적절하지 않은 메뉴 항목들을 비활성화 상태로 만드는 것이 이에 해당한다.

사람들은 해야 할 일을 잊어버린다. 그러니 상기시켜라.

일반적으로 내가 알고 있는 시스템 리마인더에는 두 가지 종류가 있다. 하나는 상당히 표준화된 것으로 “이 문서를 닫기 전 변경사항을 저장하시겠습니까?”와 같은 메시지가 있다. 참으로 유용한 메시지라고 생각한다. 다른 하나는 작업의 진행을 방해하며 많은 선택을 강요한다. “당신의 바탕화면에 사용하지 않는 아이콘들이 있습니다. 이것들을 삭제하시겠습니까?”

핵심은 사람들이 순조롭게 진행하는 일들을 방해하지 않으면서 도움이 되어야 한다는 것이다. 작업과 직접 관련이 없는 리마 인터는 사람들을 방해한다. 그러니, 당신의 앱이나 인터페이스 내에 리마인더가 있다면 그것들의 당신의 업무와 연관시키거나, 아니면 아예 제거해버리는 것이 좋다.

만약 도움이 필요 없는 상황이라면, 방해하지 말라.

주의와 그 밖의 다른 경고들

주의는 당신에게 오류, 상태 변화, 그 밖에 당신이 신경을 써야만 하는 것들을 알려준다. 하지만 불행히도 몇몇 종류의 주의는 나가 놀게 해달라고 끈질기게 허락을 구하는 어린아이처럼, 컴퓨터가 뭔가를 했다는 사실을 내가 인식하도록 고집을 부리기도 한다.

우리는 현실 세계에서 의미 있는 경고를 더 잘 만드는 것 같다. 내 경험에 근거한 규칙은 다음과 같다: 임무 수행에 필수적인 것일수록, 관련한 뭔가가 잘못되었을 때 사람들에게 이를 알려줄 효과적인 방법이 더 필요하다.

양치기 소년 신드롬

이는 관련성 없는 메시지들과 다른 공지문들이 너무 많아서 놓쳐서는 안 될 정말 중요한 메시지까지 습관적으로 무시해버리는 현상을 말한다. 나 또한 이런 실수를 주로 소프트웨어 설치할 때 여러 번 저질렀다. 설치 과정 완료까지 아무 생각 없이 ‘다음’ 버튼을 기계적으로 누른 것이다. 이 때문에 가끔 ‘새 프로그램이 설치될 위치’처럼 주의를 기울여야 하는 사항을 놓치고 만다.

만약 팝업창이 컴퓨터 시스템의 대화창과 똑같이 생겼다면, 많은 사람이 이것이 사이트의 팝업창인지 컴퓨터 자체의 대화창인지 혼란스러워할 것이다. 대화창은 대부분 어떤 종류의 오류를 나타내기 위해 등장하므로, 이런 형식의 팝업창은 사람들에게 괜한 불안감만 조성할 수 있다. 특히 이런 팝업창이 익숙하지 않은 사람들에게 더 그렇다.

결정을 강제하기

컴퓨터 세계에서, 선택의 기술을 사용할 수 없는 메뉴들을 비활성화-희미하게 보이도록 만드는 것이다.

모든 것을 고려해 볼 때, 메뉴를 희미하게 나타내는 것이 더 나은 선택인 것 같다. 하지만 앞으로는 이 옵션이 왜 비활성화 상태로 바뀌었는지에 대한 약간의 설명을 제공하는 프로그램이 생겼으면 좋겠다.

예건대, 마우스를 갖다 댔을 때 설명이 있는 작은 팝업창이 나타나는 프로그램 같은 것이다. 지금까지는 이런 걸 본 적이 없다. 그러나 분명히 훨씬 더 나은 해결책이 나올 것이다.

개인화의 위험

다음의 세 가지 사항을 기억하도록 노력해야 한다: 메인 메뉴는 일관성 있게 유지할 것, 개인화로 인해 선택지가 제한되지 않게 할 것, 방문자가 웹사이트나 앱에 이전에 방문했던 이력이 있다고 해도 각각의 방문은 그때마다 새로운 것임을 명심할 것.

가외성의 마법(Plan B)

가외성이란 사람들에게 상호 보완적 기능을 하는 여러 개의 유사한 선택지들을 제공하는 것을 의미한다. 예컨대 휴대폰 번호와 이메일 주소를 함께 제공하는 것이 그렇다. 이것은 또한 커다란 방의 양쪽 끝에 불을 끄고 켤 수 있는 스위치가 있는 것처럼 여러 군데의 편리한 장소에 같은 링크나 기능을 반복적으로 제공하는 것을 의미한다.

당신의 제품을 평가할 때, 위험을 분산할 수 있는 것이 전환 또한 개선할 수 있다는 것을 기억하도록 하라.

도움이 되는 오류 메시지를 적어라

서식에서 무언가가 없거나 잘못되었음을 알려주는 작은 경고 메시지는 상당히 도움이 된다. 일반적으로, 구체적일수록 더 유용하다.

사람들이 더 나은 결정을 하도록 돕기

화면상의 메시지 대부분은 어떤 종류의 결정을 하도록 요구하는 것들이다. 당신이 화면상의 메시지들을 평가할 때 스스로 할 수 있는 몇 가지 간단한 질문이 있다.

• 사용자들은 왜 그 메시지가 나타났는지 알고 있는가?
• 사용자들은 그 메시지를 이해하는가?
• 사용자들은 그 메시지에 현명하게 대응하는 법을 잘 알고 있는가?
• 그 메지시에 있는 정보는 유용한가, 아니면 혼란스럽게 하는가?
• 사용자들은 이 결정과 결과를 이해하는가?
• 경험이 부족한 사용자들이 내린 결정을 그 상황에 알맞은 것인가?

이 질문 중 어느 것 하나에도 ‘아니’라고 답한다면 손봐야 할 곳이 있다는 뜻이다. 만약 무언가가 미심쩍다면, 누군가에게 물어라.
나이 많은 사람들에게 질문하면 아마도 더 인지적인 문제들을 발견할 수 있을 것이고, 그냥 앱을 망가뜨리고 싶으면 10대들에게 물어보면 된다.

모든 사람이 맞춤법을 올바르게 쓰는 것은 아니다.

실수를 많이 없앨 수 있는 가장 가단 한 방법 하나는 철자를 맞게 쓰지 않는 사람이나 부주의하게 오타를 입력하는 사람들을 봐주는 것이다.
이 방법이 항상 내부 검색 엔진에 도움이 되지는 않겠지만, 적어도 구글은 사용자들이 실수했을 때 무엇을 해야 할지 알게 될 것이다. 만약 어떤 철자 오류가 발생하는지 확실히 알고 싶다면 쿼리 로그를 확인하라. 쿼리 로그에서는 사용자들이 가장 많이 검색한 키워드, 가장 실수한 키워드 모두를 찾아봄으로써 틀린 철자나 동의어들에게 최적화할 수 있을 것이다. 검색한 전문가 리치 위긴스는 이룰 ‘우연의 유의어 사전’이라고 부른다.

사람들은 안내문을 읽지 않는다.

사람들은 긴 메시지를 싫어한다. 그들은 처음 한두 문장을 읽은 다음, 낯선 단어, 약어, 전문용어를 보면 무시해버리는 경향이 있다. 그러니 메시지가 제대로 기능하기를 원한다면 짧고 간단한 게 구성하라.

사람들이 당신의 메시지를 기억하게 만들지 마라.

우리가 흔히 보는 경고문, 알림 그리고 기타 메시지들은 클릭하면 사라지는 팝업창 형태로 나타난다. 이것이 큰 문제가 되는 이유 중 하나는 이 팝업창에는 사이트의 다른 곳, 심지어 다른 장치에서 꼭 필요한 정보가 있다는 것이다. 그러므로 이런 메시지를 ‘이동이 쉽게’ 만들어라. 사용자들이 지시나 정보를 항상 기억하지는 않는다. 그러니 그런 기대를 해서는 안된다. 여기서 전형적인 실수 두 가지가 있다.

1. 서식과 관련이 있다.
2. 어떤 부분이 빠졌는지 알려주는 메시지가 없다.
3. 다른 곳에 기록해야 하거나 붙여 넣기를 해야 하는 정보를 팝업창에 넣는 것이다.

때로는 당연한 것도 말해줘야만 한다.

‘꼭 알아야 할 정보’를 추려서 간단히 인쇄한 ‘빠른 시작 안내서’에서 찾을 수 있는 종류의 것들이다.

사람들은 일일이 기억하지 않는다.

사람들은 일반적으로 지시사항을 읽지 않기 때문에, 디자인은 사람들이 언제라도 무엇을 해야 하는지 알려주는 강한 신호를 보낼 필요가 있다. 불운하게도 디자이너들은 그들이 만든 우아한 해결책이 종종 생각보다 더 명확한 시호를 준다고 여기는 것 같다. 결론은 다음과 같다. 사람들이 일단 어떤 것을 사용하는 법을 알아냈다 하더라도 다음에 사용할 때 그 방법을 기억한다는 보장은 없다.

웹사이트도 이와 동일한 방식으로 기능해야겠지만, 만약 ‘창의적’이거나 ‘혁신적’인 디자인팀이 새롭고 독특한 방식으로 다양한 문제를 해결하고자 한다면 그렇게 기능하지 못할 것이다. 사람들이 별난 디자인 해결책을 모두 기억할 것이라는 기대를 해서는 안된다.

물리적 제지 장치

• 사용자가 어떤 잘못된 행위를 하기 직전이라고 알려주는 것
• 사용자가 하고자 하는 잘못된 행동의 가치를 무효화하는 것
• 사용자가 올바른 행동을 하게 만드는 것
• 행동하지 않으면 사용자에게 불편함을 주는 것
• 행동하지 않으면 사용자에게 고통을 유발하는 것

제품을 꽤 쉽게 다룰 수 있게 만들어주는 10가지 간단한 방법들

1. 만약 어떤 것이 제대로 작동하지 않더라도 사용자들이 대응할 수 있는 몇 가지 다른 방법을 제공할 수 있나?
2. 이해하기 위해 두 번은 읽어야 하는 어떤 오류 메시지나 지시사항을 발견했는가? 만약 그렇다면 그것은 당신이 글로 하는 의사소통 능력을 향상할 수 있는 기회다!
3. 응답 시간의 속도를 높임으로써 사용자들이 동일한 행동을 반복하지 않도록 할 수 있는가?
4. 아이들이 열 수 없게 만든 뚜껑, 바리케이드, 또는 사용자들이 자신을 포함한 무언가에 손상을 입히지 않도록 막는 기술 등의 물리적 제지 장치를 구축할 수 있는가? 당신은 어떤 손상이 일어날 수 있는 방법을 알고 있나? 손상을 막으려면 먼저 그것이 어떤 것인지 이해해야 한다.
5. 시스템 경고문과 혼동될 수 있는 오류 메시지나 경보가 있는가? 만약 그렇다면 이것들을 쉽게 구분할 수 있는 좀 더 독창적인 디자인을 할 수 있나? 혹은 아예 이 메시들을 전부 없애는 건 어떤가?
6. 당신은 사용자들을 돕는다고 하는 일이 실제로 사용자들에겐 방해가 되는 일이 있지는 않은가?
7. 당신의 제품에는 다음에 사용할 때는 관련 없을 수 있는 행동을 기억함으로써 혼란을 일으키는 어댑티브 메뉴와 같은 개인화 기능이 포함되어 있는가?
8. 사용자가 당신의 제품과 상호작용하면서 유용한 방향으로 갈 수 있게 해주는 인지적 단서와 지표를 제공하고 있는가?
9. 지시사항을 최소한으로 유지하고 있는가? 예약 확인번호와 같은 정보를 사용자가 필요할 때 언제 어디서나 사용할 수 있게 만들었는가?
10. ‘풀 프루프 해결책’에 관한 누군가의 생각이 실제로는 문제를 해결하기 위해 디자인된 문제 자체보다 못한 것은 아닌가? 만약 그렇다면 문제점들을 수정하거나 아예 그 해결책을 삭제할 수 있는가?

---

자료 출처: UX 불변의 법칙 — 에릭 리스

사용자의 흐름을 만들어라

사용자를 관찰하면 사용자는 목적을 성취하기 위한 흐름에 몸을 맡길 준비가 되어있다. 하지만 그 중간에 흐름을 방해하는 것들이 산재한다. 옷을 사기 위해서 상품을 탐색하는 과정에 나오는 쓸 때 없는 상품들, 그리고 사용자에게 많은 인풋을 요구하는 것들은 다 장애물이다. 장애물을 넘어서 목적을 성취하는 끈기 있는 사용자가 몇 있다. 하지만 그것을 사용자에게 요구하면 안 된다. 사람들이 작업을 완료할 때까지 방해, 우회, 이탈은 최소한으로 줄이는 것이 좋다.

낯선 상황이 편의성을 부각한다

사용자의 관점에서, ‘편의성’ 문제는 고전적인 문제와 밀접한 관련이 있다. 비가 오기 전까지는 우산을 어디에 두고 왔는지 절대 알지 못한다.
우리는 낯선 영역에 들어갈 때, 컴포트 존을 찾는 경향이 있다. 그것은 이미 정립된 우리의 개인적인 일상에 맞는 것들이 분명 어떤 편안함을 제공해주기 때문이다. 어떤 것이 그에 부합하면 우리는 그것을 ‘편리하다’라고 생각한다. 우리는 익숙한 루틴을 좋아한다. 그래서 다른 사람을 위해 디자인하는 것은 무엇이든 익숙함을 제공해야 한다.
디자이너이자 디자인 평가자로서 우리는 개인적인 컴포트 존 바깥으로 나가야 한다. 사용성에 대해 논할 때 다른 사람들의 도움을 요청함으로써 그렇게 할 수 있다. 디자이너들은 자신의 니즈를 먼저 다루는 경향이 있지만 그렇게 하다가는 다른 사람들의 니즈를 놓칠 수도 있다. 평가자로서, 우리는 대안적 사용 패턴을 찾아내야만 한다.

페르소나와 다른 유용한 도구들

좋은 페르소나는 디자인 팀이 다음과 같은 것에 집중하는 것을 도와준다: ‘메리는 이 기능을 사용하고 싶을까?’ 만약 메리가 관심이 없다면 다른 페르소나 중 하나가 관심을 가지도록 해야 한다. 그렇지 않다면 당신은 문제를 해결하기보다는 상황을 더 악화시키는 결과를 초래할 수도 있다. 도입부에 있는 앨런 쿠퍼의 말을 기억하라. “당신이 ‘누군가가 이것을 원할 수도 있다’는 말을 들었을 때가 정말 나쁜 디자인 결정을 듣게 되는 순간이 있다.” 이 말은 마음에 새겨 둘 가치가 있다. 아무튼 페르소나 개념을 만든 사람이 바로 앨런이다.
새로운 작업에 매번 새로운 페르소나가 필요한 것은 아니다. 내 경험에 의하면, 8명 이상의 페르소나는 너무 구체적이라서 전형적인 특징이 덜 유용해질 것이다. 그러나 일단 훌륭한 페르소나 집합을 구성해둔다면, 특정 작업을 완료하고자 할 때 무슨 일이 일어날지 작성해보는 짧은 시나리오나 관련된 작업의 범위를 묘사하는 고객 여정 지도와 같은 다른 도구들을 개발하는 데 활용하기도 좋을 것이다.

맥락은 왕국이다.

몇 년 동안 전문가들은 “콘텐츠가 왕이다.”라는 말을 해오고 있다. 이 말은 절대적으로 진리다. 괜찮은 콘텐츠가 없다면 당신이 가진 제품이 무엇이든 그것들은 쓸모없는 것들이다. 훌륭하게 이용 가능한 웹사이트라 해도 페이지마다 질 낮은 내용으로 도배가 되어있다면 시장 점유율을 움직이지 못할 것이다. 아무리 근사한 호텔이라도 돌처럼 딱딱한 침대를 쓴다면 투숙객이 다시는 찾지 않을 것이다. 음식점이라면 고급스러운 식기보다는 음식의 맛이 성공을 보장하는 열쇠가 될 것이다.
하지만 개별적인 것들이 결합해 더욱 큰 가치를 만드는 방식인 맥락으로 한 단계 더 나아가 보자.
호텔 룸의 콘센트처럼, 맥락은 물리적 세계와 가상 세계 모두에서 실제 디자인의 가치가 존재한다는 것을 의미한다. 만약 콘텐츠가 왕이라면 맥락은 왕국임이 틀림없다.
오늘날 보편적으로 볼 수 있는 웹사이트 스타일은 페이지 상단에 메인 메뉴, 하단에는 검색 옵션들, 가운데 넓은 공간에는 콘텐츠 그리고 오른쪽 열에는 관련 콘텐츠의 리스트를 두는 것이다. 이러한 스타일은 화면이 작은 기기에는 잘 적용되지 않지만, 관련 콘텐츠를 강조하는 콘셉트는 엄청나게 중요하고 실질적인 가치를 제공한다. 많은 디자이너들이 이 레이아웃을 클라이언트에게 ‘판매’ 하고 있지만, 불행히도 이 중요한 기능을 활용하는 웹사이트 소유자는 별로 없다. 그 결과 웹사이트의 오른쪽에는 말도 안 되는 것들만 가득하다. 공간은 빈 채로 남아 있는 법이 없다.
더 최악인 것은, 명백하게 관련 있는 물건들, 가령 진공청소기와 여기에 사용되는 먼지봉투가 한 웹페이지에서 보이지 않는다는 것이다. 이것은 미친 짓이다. 만약 사용성 문제를 조사하고 있다면, 함께 묶어서 나타내야 하는 콘텐츠를 주의 깊게 살펴라. 온라인과 관련된 것들을 작업할 때 특히 그렇게 해야 한다. 서둘러서 웹사이트를 출시하려고 하는 과정에서 이런 문제들은 미루어지고 마침내 완전히 잊히기도 한다. 이처럼 맥락이 있는 크룹을 만드는 일은 당신이 무엇을 창조해내든 간에 편의성을 위해서 필수적으로 해야 한다.

사람들이 필요로 하는 모든 것을 사용할 수 있게 해라

만약 당신이 차를 수리한다면, 필요한 모든 도구와 부품을 가까이에 둘 것이다. 식사를 준비한다면 아마도 요리를 시작하기 전에 모든 필요한 모든 재료를 사서 준비할 것이다.
누군가 당신의 사이트 어딘가에 있는 콘텐츠를 필요로 한다면 그것에 접근하기 쉽게 만들어라.

클릭 세 번으로 끝내기

중요한 점은 사람들이 클릭할 때마다 그들이 원하는 콘텐츠에 가까이 다가갈 수 있게 해주어야 한다는 것이다. 그렇지 않다면 사람들은 시간 낭비를 하고 있다고 생각할 텐데, 이는 종종 있는 일이다.
만약 상담이 필요해 고객센터에 전화했는데 처음 상담원에서 다른 부서로 연결되고, 그렇게 연결된 전화가 당신이 상담을 받는 목적에 순조롭게 다가가는 것이라면 기분이 좋을 것이다. 연결된 전화에 다시 똑같은 이야기를 하고 또 해야 한다면 결국 참다못해 짜증이 날 것이다.

제품을 더 편리하게 만드는 10가지 방법들

1. 사용자들이 완료하고자 하는 작업을 고려하라. 당신의 제품은 보지 말고 각 작업의 완료에 필요한 세 가지 항목의 리스트를 작성하라. 그런 다음 당신의 제품을 확인하라. 사용자가 필요로 하는 모든 것을 이용할 수 있는가?
2. 서로 관련된 콘텐츠들을 묶어서 더 찾기 쉽게끔 만들 수 있는가?
3. 인터랙티브 한 페이지나 기기에 있는 영역들을 구분하기 위해 색깔이나 다른 시각적 신호를 사용할 수 있는가?
4. 만약 멀티모드 경험이 있는 제품이 있다면 각각의 프로세스가 서로 방해하지 않는다는 것을 보장할 수 있는가?
5. 당신의 제품을 사용하는 다양한 사용자들에 관해 얼마나 많이 알고 있는가? 눈을 감고 사용자 중 한 사람들 떠올려볼 수 있는가? 그럴 수 없다면 사용자들에 대해 더 알도록 해야 한다. 누군가가 떠오른다면 그 사람으로 페르소를 만들어 봐라. 주변에 알고 있는 사람으로부터 세부 사항을 더해가며 페르소나를 더 입체적으로 만들 수 있다. 이제 1번 질문으로 되돌아가서 이 사람이 어떤 것을 성취하고자 하는지 자신에게 물어라.
6. 온라인에서 오프라인으로 불필요하게 넘나들어야 하는 일이 있다면 그것을 제거할 수 있는가? 예를 들어, 사용자들에게 출력해서 팩스로 보낼 것을 요청하는 대신, 이메일로 보내라고 할 수 있는가?
7. 사용자가 당신의 제품을 좋아해야만 하는 이유를 다섯 가지만 적어 봐라. 다섯 가지를 대기가 힘들다면, 몇 가지 이유만이라도 만들어 낼 수 있는가? 이제 돌아가서 새로운 이유들을 실행할 수 있게 해 줄 콘텐츠 또는 맥락에서 빠진 것이 있는지 찾아봐라.
8. 당신의 제품은 유용한 내용을 제공하고 있는가? 그렇지 않다면 무엇이 빠져있는가? 영업시간? 연락처 정보? 상세한 제품 설명? 연관 링크? 그 밖의 무언가? 잘 떠오르지 않는다면 1번 질문을 참고하라.
9. “고객님의 편의를 위해~”라고 말하면서 그와 반대로 불편함만 제공하고 있지는 않은가? 많아야 그렇다면 그렇게 돌려 말하지 말고 당장 개선하라.
10. 사용자들이 동일한 정보를 여러 차례 제공하게 만드는 불편함을 없앨 수 있는가?

---

자료 출처: UX 불변의 법칙 — 에릭 리스

반응의 3 요소

1. 행동
2. 인지
3. 새로운 행동

행동은 수신이라고 생각을 하면 편하다. 전화를 받는 과정을 보면 수신 음 혹은 진동을 확인한다. 수동적인 과정으로 볼 수 있지만 전화를 보지 않겠다는 생각으로 전화를 껐다면 전화를 확인할 수 없다. 수신을 하는 과정도 행동이라고 보는 것이 좋을 것 같다. 이 관점이 어려우면 친구들과 카페에서 이야기하는 과정을 보면, 약속을 잡고 카페에 가게 된다. 그리고 카페에 앉아서 친구의 이야기를 듣는다면 이 과정도 행동이라고 까지 보는 것이 좋을 것 같다.

행동 이후에는 인지 과정이 있는데, 모든 행동 뒤에는 메시지가 있다. 무의미한 행동이라고 할지라고 무의미라는 메시지가 있고, 무의미를 전달하는 의도가 있다. 그래서 모든 행동의 과정에서는 메시지를 파악하게 된다. 이 메시지를 파악하게 되면 새로운 행동을 유발하게 되는데 그렇게 반응은 제공하는 사람에게도 듣는 사람에게도 서로 상호 간의 영향을 미친다고 할 수 있다.

---

반응성 높이는 고전적 3 가지 방법

어그로 끌기(초청의 비결)

눈길을 끌고, 뭔가 좋은 것이 있다는 신호를 주기 위해 설계된 것. 배너 광고, 혹은 정적이면서 고도로 맥락적인 ‘더 알아보기’ 링크 등이 이러한 예이다.

인터랙션(전환적 기법)

사용자가 행동 혹은 인풋에 대해 즉각적으로 반응하는 것 — 예를 들어 웹을 둘러보는 동안 화살표 모양 커서가 상호작용적인 요소에 놓이면 손 모양으로 변하는 것이 그런 것이다.

리액션(반응의 메커니증)

사용자가 한 어떤 의식적인 행동에 따른 진정한 ‘수신’을 나타내는 것. 예를 들면 화면이 새로운 페이지를 로딩하기 전에 공백상태로 있거나, 파일이 다운로드되고 있음 혹은 다운로드가 완료되었음을 나타내는 화면 성의 메시지가 이에 해당한다.

---

피드백 부족 = 렉 걸렸나?

스마트 폰 앱을 사용하다 보면 한 번씩 내 인풋에 반응을 보이지 않는다면 여러 번 선택을 하다가 결국 그 앱을 끄게 된다. 근데 그것이 피드백 설계를 잘못해서 그렇다면 설계에서 문제가 발생한 것이지 앱의 문제는 아니다. 그리고 더더욱 디바이스의 문제가 아닌데도 사용자는 스마트폰을 바꿀 생각을 하게 된다.

---

부정적 반응의 개노답 3형제 FUD(두려움 Fear, 불확실성 Uncertainty, 의심 Doubt)

두려움

사람들이 시스템을 망가트리거나, 또는 되돌릴 수 없는, 의도지 않은 행위가 시작될까 봐 무서워하는 것이다. 예를 들어, 정보를 전송하면 어떤 일이 일어날까? 단순히 정보를 수정한 것이다? 아니면 결제가 된 것은 아닐까? 하는 두려움이 그것이다.

불확실성

두려움과 연관된다. 하지만 이 경우, 당신이 비극적인 결정을 내리게 될 것이라고 꼭 두려워할 필요는 없다. 단지 당신은 애매하게 선택해서 잘못된 결정을 내리지 않을까 염려할 뿐이다.

의심

사람들이 자신이 무엇을 하든 성공적인 결론을 도출하지 못할 것이라는 확신이 들 때 일어난다. 예를 들어, 옵션들 중 그 어떤 것도 내가 고를 수 있는 것이 없을 때 말이다.

---

디지털 환경에서의 반응 메커니즘

• 명암: 현재 활성화되었음을 보여주기 위해 특정 부분을 밝게 하거나 조작이 완료될 때까지 화면의 일부를 어둡게 하는 것
• 줌: 특정 과정이 진행되는 동안 줌을 확대하거나 과정이 완료되면 줌을 축소하는 것
• 사운드: 특정 동작과 관련한 독특한 멜로디나 사운드. 우리는 아마 메일이나 문자가 왔음을 알려주는 휴대폰 알람이 가장 익숙할 것이다.

---

10가지 체크리스트

1. 버튼을 눌렀을 때 그것이 반응하는가?
2. 파일이 저장되었을 때, 그것이 잘 저장되었는지 볼 수 있는가?
3. 만약 커서를 링크나 다른 상호작용이 가능한 대상 위에 둘 때 커서는 그 대상이 클릭이 가능한 상태임을 표시하는 특정한 모양으로 바뀌는가?
4. 당신의 사이트는 컴퓨터 화면에 맞게 사이즈가 조절되는가?
5. 파일을 다운로드하거나 결제 과정을 클릭하는 것과 같은 기본 태스크를 완료해보도록 해라. 그 과정에서 당신이 행한 동작을 사이트가 인지하고 확인을 해주었으면 하고 바랄 때가 있는가?
6. 파일 다운로드같이 시간이 걸리는 절차들이 진행 상황에 대한 지속적인 피드백을 제공하는가?
7. 당신이 물리적 제품을 다루고 있다면 그것을 피드백을 제공하고 있는가? 어떤 물건이 언제 스위치가 켜지고 꺼지는지, 혹은 소리 등이 커지고 작아지는지 알 수 있는가?
8. 피드백은 제때 도착하는가? 아니면 동작이 실행되고 나서 한참 후인가?
9. 반응 메커니즘은 이해가 가능한 것인가? 아니면 사용자들이 아이콘을 비롯한 다른 신호들을 추측해서 알아내야 하는가? 정립된 모범 사례를 적용하고 있는가, 아니면 처음부터 개발 중인가? 당신의 옆집 이웃이나 당신의 가족들도 그것을 이해할 수 있는가?
10. 콘텐츠의 레이아웃과 품질은 그것이 출력되는 특정 기기의 한계를 반영하고 있는가? 만약 그 콘텐츠가 기기에 따라 달라진다면, 기기에 맞춰 적절하게 크기가 확대되거나 축소되는가? 일반적으로 확대하는 것이 더 낫다.

---

자료 출처: UX 불변의 법칙 — 에릭 리스