상세 컨텐츠

본문 제목

[디자인 사용성] Laws of UX -03

디자인 Design/디자인

by tamm 2022. 2. 13. 00:11

본문

[알아 두면 좋은] > [웹사이트, 웹서비스] 글에서 UX 법칙을 정리한 좋은 사이트를 소개했다. 

 

 

Home | Laws of UX

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

lawsofux.com

 

이 사이트에 나와있는 UX 법칙을 간단하게 정리해보고자 한다. 

 

각 법칙은 법칙에 대한 개요와 함께 간략하게 법칙에 대해 소개하고 관련 아티클이나 관련 링크를 제공하여 법칙에 대한 근거들을 보여주도록 구성되어 있다. 직접 사이트에서 내용을 파악하며 관련 아티클들을 읽는 것이 제일 좋은 방법이지만 아래에 각 법칙들의 Summary를 정리해 보았으니 이 글을 통해 대략적인 내용을 파악할 수 있도록 글을 썼다. 

 

총 21개의 법칙을 한 글에 담기에 너무 많아 3개의 글로 나누어 정리하려 한다. 

Laws of UX - 01: https://tammist.tistory.com/44

Laws of UX - 02: https://tammist.tistory.com/45

 

마지막 7개 법칙에 대해 알아보자. 

 

 


Parkinson’s Law 파킨슨의 법칙 

Any task will inflate until all of the available time is spent.
어떤 작업은 사용할 수 있는 시간이 모두 끝날 때까지 확장된다. 

 

  1. Limit the time it takes to complete a task to what users expect it’ll take. 작업을 완료하는 데 걸리는 시간을 사용자가 예상하는 시간으로 제한하라. 
  2. Reducing the actual duration to complete a task from the expected duration will improve the overall user experience. 작업을 완료하는데 걸리는 실제적인 시간을 예상 시간보다 줄이면 모든 사용자 경험이 개선될 것이다. 
 

Parkinson’s Law: Why Constraints Are The Best Thing You Can Work With

“Work expands to fill the time available for its completion.”

medium.com


Summary

이 법칙은 Cyril Parkinson이 영국 공무원으로 근무하며 겪은 경험들을 바탕으로 도출한 명제로 표현했다. 사용자에게 너무 많은 시간을 준다면 사용자는 그 시간을 전부 사용해서 작업을 완료하게 된다는 것이다. 그러므로 사용자에게 적당한 제한을 주어 진행하도록 하는 것이 사용자 경험 개선이 도움이 된다는 것이다. 

 

이 법칙은 디자인적 관점에서도 중요하지만 삶을 살아가는 관점에서 더욱 유용한 법칙이 될 것 같아 위에 아티클 링크를 적어두었다. 마지막으로 Cyril Parkinson의 에세지에 나오는 좀 더 직접적이고 유머러스한 표현을 아래 덧붙인다. 

“Work expands to fill the time available for its completion.”
작업은 완료에 사용할 수 있는 시간을 채우기 위해 확장된다. 

Peak-End Rule 피크 엔드 규칙

People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
사람들은 경험의 총합이나, 그동안의 경험으로 알게 된 평균보다는 정점이었던 순간과 마지막 순간에 느꼈던 감정에 크게 근거해 경험을 판단한다. 
  1. Pay close attention to the most intense points and the final moments (the “end”) of the user journey. 사용자 여정 중에서 가장 강렬하게 집중되는 지점과 마지막 순간에 세심한 주의를 기울여라. 
  2. Identify the moments when your product is most helpful, valuable, or entertaining and design to delight the end user. 제품이 가장 도움이 되거나 가치가 있거나 재미있는 순간을 식별하고 최종 사용자를 기쁘게 하도록 디자인하라. 
  3. Remember that people recall negative experiences more vividly than positive ones. 사람들은 긍정적인 경험보다 부정적인 경험을 더 생생하게 기억한다는 것을 기억하라. 

Summary

다양한 실험을 통해 사람들이 강렬한 순간에 대한 기억을 더 오래 가지고 있는 현상을 발견하게 되었고 이로 인해 발생하는 현상들을 정리한 법칙이다. 처리 시간이 길고 처리하는 동안 기분이 나쁘게 진행된 상황에서도 마지막 순간에 사용자의 기분을 좋게 해 주며 끝이 나면 좋은 평가를 내릴 확률이 높았다고 한다. 

 

그래서 강렬한 체험을 통해 기억에 남게 만들거나 마지막 순간에 좋은 기억을 심어줄 수 있도록 노력해야 하는 것이다. 모든 사이트가 사용자에게 다 좋은 경험을 주기는 무척 어렵다. 그래서 결국 선택을 해야 한다. 그 선택을 위해서 이 법칙은 무척 좋은 기준점이 될 것이다. 제한적인 작업 시간 내에서 집중해야 하는 것을 선별하고 그 집중해야 하는 중요한 부분에 최선의 노력을 담아야 한다. 그리고 그 최선의 노력은 사용자의 기억에 남길 강렬하고 좋은 인상을 남기는 방법을 찾아야 한다는 것이다. 

 

언제나 작업은 시간적 제한이 가장 큰 어려움이다. 그 제한적인 시간 안에서 어디에 집중하여 더 좋은 결과물을 만드느냐에 대한 좋은 방향성을 알려주는 것이 바로 이 피크 엔드 규칙일 것이다. 


Postel’s Law 포스텔의 법칙

Be liberal in what you accept, and conservative in what you send.
받아들이는 것에는 관대하고 보내는 것에는 보수적이 돼라. 

 

  1. Be empathetic to, flexible about, and tolerant of any of the various actions the user could take or any input they might provide. 사용자가 취할 수 있는 다양한 행동이나 사용자가 제공할 수 있는 모든 입력에 대해 공감하고 유연하며 관대하라. 
  2. Anticipate virtually anything in terms of input, access, and capability while providing a reliable and accessible interface. 안정적이고 접근하기 쉬운 인터페이스를 제공하면서 입력, 접근 및 가능성 면에서 거의 모든 것을 예상하라. 
  3. The more we can anticipate and plan for in design, the more resilient the design will be. 디자인에서 더 많이 예상하고 계획할수록 디자인은 더 탄력적일 것이다. 
  4. Accept variable input from users, translating that input to meet your requirements, defining boundaries for input, and providing clear feedback to the user. 사용자의 다양한 입력을 받아들이고, 입력을 요구 사항에 맞게 번역하고, 입력을 위한 경계를 정의하고, 사용자에게 명확한 피드백을 제공하라. 

Summary

이 법칙은 실제 데이터를 기반으로 디자인 작업을 하고자 할 때 필요한 것이다. 사용자들은 공급자가 원하는 대로만 입력을 하지 않는다. 그러므로 다양한 데이터로 디자인에 유연성을 줄 수 있어야 한다

 

흔히 양산 디자인 작업 시 이런 부분들이 정말 중요하다. 시각적으로 가장 좋아 보이는 형태를 마련한 후에 그 형태에서 다양한 데이터들을 예시로 만들었을 때에도 괜찮아 보일 수 있는 지를 테스트하여 유연함을 고려해야 한다는 것이다. 무조건 디자인의 형태에 고정되는 것은 시각적으로는 안정적일 수 있으나 진짜 필요한 데이터를 보여주지 못하는 경우가 발생할 수 있기 때문이다. (타이틀의 길이가 짧은 경우가 가장 흔하게 일어날 수 있다.)

 

그리고 사용자에게 입력에 대한 가이드를 해주는 것이 필요하다. 글이라면 몇 글자가 가장 알맞은지, 이미지라면 사이즈나 이미지 형식 등등 사용자의 입력이 필요한 곳에 적절한 힌트를 주어 디자인의 의도대로 사용자를 잘 이끌어주는 것이 필요하다. 그리고 사용자에게 피드백을 명확하게 제공하는 것이 좋다. 이미지라면 미리 보여주는 것도 좋은 방법이 될 것이다. 

 

특히나 입력은 사용자가 적극적으로 행동하는 것인데 이때 사용자를 불편하고 불안하게 만들어 이탈을 발생시키지 말아야 한다. 처음 보는 사이트에서는 누구나 이걸 이렇게 쓰는 게 맞나라는 의심과 불안을 가질 수밖에 없다. 그러니 그런 심리를 잘 파악해 불안하지 않을 수 있게 해주어야 한다는 것을 이 법칙은 강조하고 있다. 

 


Serial Position Effect 서열 위치 효과

Users have a propensity to best remember the first and last items in a series.
사용자는 맨 처음과 가장 마지막 항목을 가장 잘 기억하는 경향을 가지고 있다. 

 

  1. Placing the least important items in the middle of lists can be helpful because these items tend to be stored less frequently in long-term and working memory. 목록의 중간에 있는 항목들은 장기 기억이나 작업 기억에서 저장되지 않는 일이 자주 일어나므로, 덜 중요한 항목들을 목록의 중간에 배치하는 것이 유용하다. 
  2. Positioning key actions on the far left and right within elements such as navigation can increase memorization. 내비게이션과 같은 요소 내에서 가장 오른쪽과 왼쪽에 주요 동작을 배치하면 더 잘 외워진다.

Summary

이 법칙은 사람의 단기 기억에 관한 특성을 바탕으로 만들어진 법칙이다. 대부분의 사람들은 맨 처음 보았던 정보와 마지막에 본 정보를 중간에 보았던 정보들보다 더 잘 기억한다. 그래서 이런 특성을 고려하여 정보를 배열하는 것은 무척 효과적이다. 

 

가장 중요한 항목을 처음이나 마지막에 보여주고 상대적으로 덜 중요한 정보들은 중간에 배치시키는 것이다. 이 법칙을 사용하기 위해서는 정보에 대한 위계가 확실하고 명확하게 드러나야 한다. 그리고 처음과 마지막이라는 것에 대한 범위가 확실한 때에 유용하다. 무한으로 돌아가는 배너에서는 처음은 확실할 수 있으나 마지막의 의미가 사라지게 될 수 있다. 

 

그러므로 정보를 담고 있는 기능적인 형태를 잘 기억하고 정보의 위계를 잘 파악해야 이 법칙을 더 유용하게 사용할 수 있을 것이다. 

 


Tesler’s Law 테슬러의 법칙

Tesler’s Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.
복잡성 보존의 법칙이라고도 알려진 테슬러의 법칙은 모든 시스템에는 감소할 수 없는 복잡성이 일정량 있다는 것을 나타낸다. 
  1. All processes have a core of complexity that cannot be designed away and therefore must be assumed by either the system or the user. 모든 프로세스에는 설계할 수 없는 복잡성의 핵심을 가지고 있으므로 시스템과 사용자에 의해 예측되어야 한다. 
  2. Ensure as much as possible of the burden is lifted from users by dealing with inherent complexity during design and development. 설계나 개발 과정에서 고유한 복잡성을 처리하여 사용자의 부담을 최대한 덜어준다. 
  3. Take care not to simplify interfaces to the point of abstraction. 인터페이스를 추상화처럼 단순화하지 않도록 주의하라. 

Summary

이 법칙은 사용자가 응용 프로그램과 상호 작용하는 방식이 중요하다는 것을 깨달은 Larry Tesler에 의해 주장되었다. 복잡성 보존 법칙의 기본은 응용프로그램의 복잡성을 줄이는데 더 노력해야 한다는 것이다. 사용자가 복잡함으로 인해 1분을 추가로 사용하게 하는 것보다 개발자가 1주일을 복잡성을 줄이는 데 사용하는 것이 낫다는 주장이다. 

 

하지만 이런 주장에 반대하는 입장도 있다. 사람들이 복잡성을 줄이는 것에 저항한다고 말하며 너무 단순한 경우 사용자들의 불만이 커질 것이라 주장한다. 사용자들은 어느 정도의 통제권을 가지고 싶어 하지만 너무 단순한 경우에는 자신이 컨트롤되는 느낌을 받을 수 있다는 주장이다. 

 

그리고 너무 단순하다는 것은 기능이 부족하다는 의미도 될 수 있다는 것이 이 법칙의 가장 큰 딜레마일 것이다. 그래서 이 법칙은 사용자에게 일정 수준의 복잡성을 가지면서 사용자의 부담을 최대한 덜어주는 단순함을 제안한다. 복잡한 것들을 사용자들이 더 단순하게 사용할 수 있는 방법을 찾아내는 것이 아마 이 법칙의 궁극적인 목적일 것이다.

 

무조건 단순화하는 것이 아닌, 복잡함을 단순하게 만드는 방법을 찾아야 할 것이다. 


Von Restorff Effect 폰 레스토프 효과

The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
고립 효과라고도 알려진 폰 레스토프 효과는 유사한 물체가 여러 개 존재할 때 그 유사한 물체들과 다른 물체가 가장 잘 기억될 것이라고 예측한다. 
  1. Make important information or key actions visually distinctive. 중요한 정보나 주요 작업은 시각적으로 구별될 수 있도록 한다. 
  2. Use restraint when placing emphasis on visual elements to avoid them competing with one another and to ensure salient items don’t get mistakenly identified as ads. 시각적 요소를 다른 요소들과 경쟁하지 않으면서 강조하고자 할 때, 눈에 띄는 항목이 광고로 보이지 않도록 자제하라. 
  3. Don’t exclude those with a color vision deficiency or low vision by relying exclusively on color to communicate contrast. 대비를 전달하기 위해 색상만을 사용하는 것은 색각 이상 또는 저시력을 가진 사람들이 배제하는 것이다. 
  4. Carefully consider users with motion sensitivity when using motion to communicate contrast. 모션을 사용하여 대비를 전달할 때 모션에 예민한 사용자를 신중하게 고려하라. 

Summary

이 법칙은 유사한 항목들 가운데 차별화된 시각적 요소를 가진 항목이 다른 항목들에 비해 더 잘 기억되는 것을 말한다. 그래서 중요한 정보, 기능은 다른 요소들과 차별화하는 방법을 가져야 한다

 

이 법칙을 가장 좋은 예가 아마 색상 가이드 일 것이다. 색상 가이드는 하나의 서비스가 일관성을 갖기 위해 색상의 규칙을 정하는 것을 의미하는데 이때, 서비스의 전체적인 인상을 나타내는 주조색(Primary color)과 이를 뒷받침해주는 보조색(Secondary color)을 정하고 주조색과 보조색에 반하는 강조색 (Point color)를 지정하여 사용하도록 한다. 비슷한 주조색과 보조색 사이에서 강조색이 등장하면 강조색을 가진 요소에 집중하게 되는 것이다. 물론 색상을 사용할 때에는 웹 접근성을 고려해야 한다. 강조하는 색상 외에도 텍스트인 경우에는 굵기를 굵게 하는 방법과 함께 사용하면 좋다. 

 

그렇지만 이 부분은 무척 조심스럽게 사용해야 한다. 전체 서비스와 어우러지며 강조가 되어야지, 안 그러면 그 요소가 광고처럼 보이거나 무언가를 강요하는 느낌이 들게 되어 반감을 줄 수 있기 때문이다. 

 

중요한 기능이나 정보를 강조할 때 중요한 것은 그 강조가 얼마나 다른 요소들과 잘 어우러지면서 강조되느냐 일 것이다. 그래야 서비스의 일관성을 유지할 수 있고 또한 자연스럽게 강조되어 사용자들에게 부담스럽지 않게 전달될 테니 말이다. 

 


Zeigarnik Effect 자이가르니크 효과

People remember uncompleted or interrupted tasks better than completed tasks.
사람들은 완료된 작업보다 완료되지 않았거나 중단된 작업을 더 잘 기억한다. 
  1. Invite content discovery by providing clear signifiers of additional content. 추가 콘텐츠에 명확한 기호를 제공하여 콘텐츠 탐색을 유도하라. 
  2. Providing artificial progress towards a goal will help to ensure users are more likely to have the motivation to complete that task. 목표를 향한 인위적인 진행을 제공하며 사용자가 해당 작업을 완료하려는 동기를 갖는데 도움이 된다. 
  3. Provide a clear indication of progress in order to motivate users to complete tasks. 사용자가 작업을 완료하도록 동기를 부여하기 위해 진행 상황을 명확하게 표시하라. 

Summary

이 법칙은 사용자가 작업을 완료할 수 있는 다양한 방법들을 제시해준다. Goal-Gradient Effect 목표 그라데이션 효과에서도 다룬 내용인데 목표 그라데이션 효과가 작업 완료의 상황을 안내하는 것에 집중되어 있다면, 이 법칙에서는 조금 더 명확하게 다음 콘텐츠를 알 수 있게 해주는 것에 더 집중된 법칙이라 할 수 있다. 

 

사용자가 진행해야 하는 다음 단계를 좀 더 명확하게 알리고 다음 단계 진행을 유도할 수 있는 명확한 신호를 주는 것이 필요하다. 작업 진행 중인 표시만큼이나 다음 단계 진행 유도 또한 중요하다. 

 

그리고 여기에서도 이야기하고 있는 인위적인 진행을 제공하는 것에 대해 어떻게 활용할 수 있을지 조금은 막막했는데, 여기 구체적인 예시가 있어 이야기하려 한다. 그리고 이 예시가 포함된 아티클을 아래 링크시킨다. 

 

Endowed progress effect: Give your users a head start

If you provide humans with artificial progress towards a goal, they will be more likely to have the motivation to complete that task.

uxdesign.cc

이 아티클에서 말하는 예시는 무척 단순했다. 한 세차장에서 8회 세차를 한 고객에서 무료 세차를 받을 수 있도록 쿠폰 카드를 주었다.

A그룹은 10회 중 2회 도장이 이미 찍혀있는 쿠폰카드를 주었고, B그룹은 8회가 빈칸인 쿠폰 카드를 주었다. 그리고 A그룹의 34%가 쿠폰카드를 사용한 반면 B그룹은 19%만 사용하는 결과를 보여주었다고 한다. 

 

같은 8개의 도장이라고 하더라도 어떻게 시작하느냐에 따라 사람들의 반응이 어떻게 달라질 수 있다는 것을 잘 알려주는 것이고 이런 부분은 서비스업이나 진행 완료가 중요한 때에 적용한다면 좋은 결과를 가져올 수 있을 것으로 생각한다. 


이로써, 21개의 법칙에 대해 알아보았다. 중간중간 겹치는 내용들도 있지만 각 법칙은 혼자 독립적일 수 없다는 것 또한 유념하기를 바란다. 이 외에도 다양한 사용성에 대한 이론들과 실험들이 많다. 

 

또 좋은 정보가 있을 때에 글로 만나기 바란다! 

모두 좋은 디자인, 멋진 디자인하기를! 

관련글 더보기

댓글 영역