[UX 불변의 법칙 : 사용성 좋은 디자인의 10가지 비밀] - 우아함과 명료성

2022. 4. 28. 01:51Design/UX

 

 

이전 파트인 사용 용이성에 이어서 두번째이자 마지막 파트인 <우아함과 명료성>을 리뷰하고자 한다.

 


Part 2. 우아함과 명료성

<Part 1. 사용 용이성> 에서와 같이 모든 것이 실제로 어떤 물리적인 면에서 필요한 대로 작동한다고 가정했을 때, 이제 우리는 ‘발견의 여정'을 시작하는 것을 도와줘야 한다. 사용자들이 기대하는 것을 충족시켜야 한다는 것이다.

 


Chapter 6. 가시성 : 사용자가 실제로 대상을 볼 수 있는 것

사용자가 찾고 있는 것이나 어디 있는지 알아야 할 것은 항상 눈에 보여야 한다.

사용자는 중요한 정보를 찾기 위해 깨알같은 글씨를 찾지 않는다!

 

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

이러한 상황에서 물건들은 ‘비가시적'으로 변해 버린다.

 

웹페이지에서 가시성을 주의하며 디자인해야하는 팁은 '스크롤 친화적'으로 만들어야 한다는 것이다.

페이지 자체가 스크롤 하기 좋은 흥미로운 컨텐츠를 제공한다면, 자연스럽게 내리며 광고 등이 노출될 수 있으며 더 나은 클릭 효과를 낼 수 있기 때문이다.

 

화면에 보이는 페이지 레이아웃 너머로 스크롤하라는 강한 신호를 보내야 한다. '잘린 사진'이나 컨텐츠 레이아웃들이 신문의 접어진 면과 유사하게 밑에 내용이 더 있다고 생각하게 인지시키며 자연스럽게 내리게 될 것이다.

 

또 하나는, "Banner Blindness"라고, 중요한 것을 광고처럼 보이게 만들지 말라고 경고하고 있다.

사람들은 페이지에서 광고가 있을 법한 위치에 놓인 링크를 자주 놓치는 경향이 있기 때문에
무언가를 눈에 띄게 애쓰게 만드는 것이 오히려 역효과를 불러일으키는 경우도 종종 생긴다.

 

불가능한 것을 제거하고 나면, 남는 것이 무엇이든 그것이 아무리 사실 같지 않더라도틀림없이 진실이다.
- 셜록 홈즈

 

 

정보에 관해서는 정보의 해상도를 줄이는 것에 의존하면 안된다
- 애드워드 터프티

유명한 데이터 시각화계의 권위자인 애드워드 터프티에 따르면,  정보에 관해서는 무언가를 없애거나 설명을 단순화 함으로 정보의 해상도를 줄이는 것에 의존하면 안된다고 한다.

 

우리는 단순함을 갈망하는 동시에 복잡성 또한 필요하다
- 도널드 노먼

 

도널드 노먼은 우리는 단순함을 갈망하는 동시에, 복잡성도 필요하다고 말하기도 하였다.

 

무언가를 보이게 하기위해 관련없는 다른 무언가를 제거하거나, 또는 관련있는것도 삭제하지말고,

가장 적절한 선택으로 사용자를 이끌 있도록 해야한다.

 


Chapter 7. 이해가능성 : 사용자가 보고 있는 것에 대해 알고, 그것의 작동을 이해하는 것

이해가.. 잘 ..가시겄어요 ..?

단어 : 단어는 우리 주변을 둘러싼 세계를 이해하는 것을 돕는 데에 매우 중요한 역할을 한다.
당신이 무엇을 말하든 그것을 명확하게 말하라. 모든 사람이 당신이 쓴 것을 그대로 읽으리라 생각하지 마라.

공유 준거 (Shared Reference) :어떤 것을 사용하는 사람이 그것을 만든 사람과 그것에 대한 기본적인 이해를 공유한다는 것

 

효과적인 '공유 준거'를 만들기 위한 방법 5가를 소개한다.

  • 어떤 것도 당연시 하지 마라.
    : 사람들은 당신이 설명하는 것에 대해 같은 수준의 지식이나 관심을 가지고 있지않다고 생각하라.(뻔한 것을 반복하는 것은 곧. 확신을 심어주기 위함!)
    그러므로, 분명한 세부 사항을 포함한 모든 것을 구체화 해야 한다.
  • 사람들이 가질 만한 의문을 예상하라.
    : 설명서를 소리 내어 읽고, 당신의 친구들에게 물어보게 해라.
  • 사람들이 물어볼 생각을 하지 않았던 질문에 답하라.
    : 포함시키는 것을 간과할 뻔 했던 정보에 대해 많은 것을 알려준다. 설명서를 읽거나 사진을 보고도 답할 수 없는 질문이 있다면, 무언가가 빠졌다는 것
  • 방문자의 상황에 대한 맥락 속에서 내용을 검토하라.
    : 온라인이라면 아마도 더 상세한 설명과 더 정밀한 그래픽을 의미할 것이고, 오프라인이라면 사용자의 특정 상황을 관찰하거나 상상해야하는 경우가 많다.
  • 커뮤니케이션 환경 (경험을 둘러싼 시간과 공간)은 주어진 시간에 필요한 (혹은 제공되는) 정보의 성격에 영향을 미칠 것이다.
    :예를 들어, 한 번도 방문해본 적이 없는 레스토랑에서 식사 계획을 세우는 시나리오에서도 사용성 최적화에 고려할 것이 많다.
    온라인으로 레스토랑을 살펴본다면, 오프라인에서 얻을 수 있는 감각적 피드백 (오~ 맛있겠다.. 저 음식 뭐지..)을 얻을 수 없다.

 

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

“우리 고객들은 이걸 이미 알고 있어. 그러니 한 번 더 말할 필요 없어.” 등과 같은 통념은
강력한 공유 준거를 만들 아주 많은 기회들을 놓치게 하는 원인!


이렇게 공통된 <공유 준거>를 통해 이해가 쉽도록 도와줄 수 있다. 
몇가지 적용 사례를 예시로 들어보도록 하겠다!

출처: 마켓컬리 제주산 애플망고 1입

이렇게 가늠하기 어려운 인터넷 상의 상품같은 경우도, 사이즈와 더불어 일반적인 캔과의 비교를 통해 대충 가늠이 가능하도록 만들어준다. 470g 내외라고 적혀있을 때, 전혀 가늠이 안 가던 것이 우리가 쉽게 접할 수 있는 캔과의 사이즈 비교를 통해서는 어느정도 예상이 가능할 수 있게 된다.

출처 : SONY

비슷하게, "컴팩트 바디"라 했을 때도 가늠이 안가지만, 크기에 대한 기준인 "손"을 통해서 어느정도 크기인지 가늠할 수 있다.
이렇게 다 비슷비슷 해 보일 때 공유하고 있는 무언가를 통해 설명하면 훨씬 설명하기도, 이해하기도 쉽다.

출처 : Apple

애플의 아이폰의 경우, 자사 제품군을 모두 비교하여 한 눈에 볼 수 있다.
기존 자신의 아이폰과 신제품도 한 눈에 비교가 가능하여 더 신중한 구매를 도와준다.

이렇게 하나 이상의 공유 준거를 사용하는 것을 주저하지 말자!

 

그러나, 주의해야 할 점은 비교 대상이 필요하다면 신중하게 선정하는 것이다.

어떤 것의 크기, 무게, 색깔, 맛, 후각의 측면에서 참조할 것이 필요하다면 사용자의 마음에 두려움이나 불확실성, 또는 의심의 상태를 조성하지 말고 진정한 공유 준거를 만들어야 한다.

 

표현 수단 중 하나인 아이콘. 그러나 모두 다른 공유 준거를 가지고 있기 때문에 실제로는 그렇게 좋은 의사전달 도구는 아니라곤 한다. 너무 창의적으로 아이콘을 제작하는 것은 피하고, 

사람들은 어떤 사이트나 앱에서 무언가를 배운 것을 다른 사이트나 앱에서도 그대로 사용할 수 있을 것이라 기대한다는 점을 기억해야 한다.

 

준거를 공유한다.

사람들과 함께 공유하는 틀이 없다면, 잘못된 버튼을 누르고 목적 없이 클릭해대고, 식사는 예상보다 더 오래걸려 화가 날 것이다.

사물을 공유된 준거의 관점에서 보기 시작한다면, 수많은 사용성 문제를 피할 수 있을 것이다!

 


Chapter 8. 논리성 : 사용자가 보는 대상과 따라야 할 절차가 이치에 맞는 것

논리적이라는 것은 무언가를 이해하거나,

다른 사람이 이해해야 할 것을 디자인하는 데 도움을 주는 것에 상식과 이성을 이용하는 것을 말한다.

 

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

1. 연역적 추론 deductive reasoning
이미 알고 있는 판단(=전제)을 근거로 새로운 판단을 근거로 새로운 판단(=결론)을 유도하는 추론이다.
A=B 그리고,  B=C 라면, A=C가 되는 것을 의미 한다.

2. 귀납적 추론 induction
개별적인 특수한 사실이나 현상에서 그러한 사례들이 포함되는 일반적인 결론을 이끌어내는 추론형식의 추리 방법이다.

3. 환원적 추론 Reduction
현 상황에서 어떤 것을 배운 다음, 이것을 새로우면서도 유사한 상황에 적용하는 것을 말한다.
낯선 공항을 어떻게 돌아다니는지 이해하는 것처럼.

 

'왜 이렇게 만든거야?' 라고 묻는다면, 사용성에 문제가 있음을 알고 있어야 한다.

 


Chapter 9. 일관성 : 게임의 법칙이 사용자가 예상하지 못하게 바뀌지 않는 것

일관성은 기능적 디자인의 간결함과 명확성을 달성하는 열쇠 중 하나라고 한다.

우리는 무언가가 사용자가 예상한 대로 행동하도록 만들기 위해 그 무언가의 심리적 요소를 다루고 있다는 것을 기억해야 한다고 한다. 이로써 우리 주변의 세상을 조금 더 이해하기 쉽게 만들어 준다.

 

 

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

- 뛰어난 인터페이스 디자이너, 브루스 토그나지니 (Bruce Tognazzini) -


Disabled Toilet과 Handicap Toilet 이라는 용어를 동시에 사용한다면 ..?

웹사이트나 표지판에서 동일한 정보를 전달하는데 매번 다른 단어를 사용하는 것은 심각한 문제를 초래할 수 있다.

따라서 우리는 합리적인 규칙을 정하고, 갑자기 뜬금없는 비동질적인게 튀어나오지 않도록 주의해야 한다.

 

 

환원적 추론 : 어떤 상황에서 배운것을 새롭지만 비슷한 또 다른 상황에 적용하는 논리적 사고의 과정

제각기 다른 공유 아이콘

환원적 추론에 대한 사용자의 의존도는 사용성을 어떻게 경험하는지에 중대한 역할을 한다.

예를 들어 어떤 사이트에서 보고 사용했던 아이콘과 비슷한 아이콘을 다른곳에서 본다면,

어떤 기능인지 직관적으로 이해하는데 도움이 된다.

하지만 아이콘이 너무 다른 기능을 한다면, 방문자들은 놀람과 동시에 좌절하게 것이다.

 

따라서 이 모든 것들은 표준화의 필요성을 끄집어 내며, 표준화는 곧 일관성을 증진시킨다.

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

 

추가로, 이 챕터에서는 '하나의 아이콘에는 한가지 행동만''하나의 제품에는 한 가지 동작만' 이라는

중요한 규칙을 강조하고 있다.

각각 기능이 다르고, 흐름이 다른 것에 사람들이 불평이 예상된다면, 일관성 있게 만들어야 한다!


Chapter 10. 예측가능성 : 사용자가 무언가를 할 때 앞으로 어떤 일이 일어날지 분명히 알 수 있는 것

예측 가능성은 일관성과 유사해 보일 수 있으나, 일관성은 어떤 것이 항상 똑같은 작업을 하는 것이고
예측 가능성은 그것이 당신이 예상한 대로 작동하는 것이다.

 

다음은 예측 가능성을 높이는 몇가지 방법들이다.

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

먼저, 실제로 상호작용이 일어나기 전에 기대치를 설정하는 방법이 있다.

낯선 음식점, 도시로 가기 전 리뷰 / 가이드북을 찾아보는 것. 물건을 사기 전 평점 리뷰를 찾는 것
대기 중인 인원을 미리 알려주고, 개개인 혹은 서비스의 신뢰성을 확인할 수 있도록 해 주는 것.

또한, 아래와 같이 제품이나 서비스를 시장에 포지셔닝하며 기대치를 설정하는 방법 또한 있다.

그리고 요즘엔 소셜 미디어를 활용해서도 대화를 더 잘만들고 소통하며 사람들의 기대감을 더 잘 형성할 수도 있다.

 

반대로 서비스를 만드는 우리가 사용자에게 기대하는 바 또한 있을 것인데, 여기서 주의할 점은 어떤 것들이 있을까?

먼저 우리는 우리가 기대한 것들을 사용자에게 말해야 한다. 뭔가를 미리 알아야 한다면, 반드시 그 정보를 전달해야 한다.

 

 

필요들을 미리 잘 전달할 수록, 사람들은 좌절감을 덜 겪게될 것이다.

또한 앞으로 얼마나 더 많은 단계들이 남았는지 사용자들이 겪는 프로세스를 알려주는 것이 좋다. 얼마나 클릭하게 될 지 알려주는 것이다.

그리고 이와 유사하게 지금 있는 곳이 어디인지 알려줘야 한다. 나중에 알고보니 잘못 서 있었을 때의 상황을 미리 방지할 수 있다.

 

마지막으로, 일반적으로 있을 것으로 기대하는 바로 그 위치에 두는 것이다.

실생활 속에서 물건들도 마찬가지로 늘 있는 곳에 있을 것이라 기대한다. 마치 "냄비는 부엌에 있을 것"과 같이 말이다.

 

이를 디자인에 적용하자면, "디자인 패턴 라이브러리", 즉 '디자인 시스템'일 것이다.

과거의 경험이 만든 패턴을 인식해, 사용성 연구와 모범 사례들을 통해 수집된 시스템으로, 다른 이들이 어떻게 문제를 해결했는지 살펴보고 새로운 방향으로 나아갈 수 있다.

 

규격화된 요소들이 있다면, 본 적 없는 사이트를 방문할 때에도 화면 배치와 구성요소들의 움직임을 더 예측하기 쉬워질 것이다.