더 나은 UX를 위해 사용자의 인지부하 줄이기
인지 과부하의 원인과 솔루션
(출처 : [Reducing Cognitive Overload For A Better User Experience – Smashing Magazine]의 기사를 번역 및 가공한 콘텐츠입니다.)
최고의 사용자 경험은 배려에 대해 사용자가 알지 못하는 것입니다.
사용자에게 단순하고 부드러운 플로우를 타게 하려면, 그들이 눈치채지 못하게 문제를 예방하고 수백 가지 중요한 결정들이 설계 단계에서 이뤄져야 합니다.
인터페이스 또는 디자인에 대해 생각하는 사용자가 적을수록 웹 사이트에서 목표를 달성하는 데 더 집중할 수 있습니다. 디자이너들은 장애물을 제거하여 사용자들이 목표에 이르는 빠른 경로를 제공해야 합니다.
복잡하고 혼란스러운 인터페이스는 사용자에게 문제에 대한 해결책을 찾도록 강요합니다.
혼란스러운 옵션, 인터페이스 등으로 사용자는 끊임없이 문제 해결을 생각해내야 하는 압박을 받습니다.
이 과도한 생각을 ‘인지 과부하’라 부르며, 여기서는 이를 피할 수 있는 방법을 설명하겠습니다.
우선, 우리는 뇌의 어떤 부분이 과부하 위험에 처해 있는지 이해할 필요가 있습니다.
출처 : http://www.mindful.org/the-antidote-to-cognitive-overload/인지 과부하의 과학적 뿌리
인지 부하는 인간의 작업기억이 처리할 수 있는 총정보량을 나타내고, 인지 과부하는 작업기억이 처리할 수 있는 것보다 많은 정보를 받아들여 의사결정이 혼란스러워질 때 발생합니다.
하지만, 이 설명만으로는 한계가 있습니다.
'작업기억'이라는 것은 정확하게 어떤 것일까요? 또한 이런 것들이 UX설계와 어떤 관련이 있을까요?
인지 과부하를 정확하게 이해하고 설계에 응용하기 위해서 인지 부하 이론의 출발점을 알아봅시다.
존 스웰러와 인지부하 이론
인지에 관한 연구는 수 세기 동안 이어져 왔습니다. 호주의 교육 심리학자 존 스웰러 (John Sweller)는 교육 디자인에 이 연구를 적용한 사람입니다. Sweller는 학습자들이 그들이 배운 정보를 계속 기억하기 위한 최상의 조건을 알아내고자 했습니다.
즉, 수업을 진행하기 위한 최선의 조건을 찾은 것입니다.
Sweller의 연구는 1988년 "인지부하 이론, 학습 난이도 및 학습 설계"(PDF)에서 발표되었고, 1994년 후반에 재작업 및 재출판되었습니다. 그는 스키마로 알려진 데이터 조직 구조를 통합하는 방식의 선구자였습니다.
작업기억의 한계에 대한 그의 발견은 디자이너에게 가장 유용한 발견 중 하나입니다.
많은 면에서 Sweller의 연구는 단기 기억의 한계를 테스트 한 1950년대의 인지심리학자이자 언어학자인 George Miller의 정보 처리 이론을 확장한 것입니다.
Miller의 연구는 디지털 디자인, 특히 청킹 기술에 뿌리를 두고 있기 때문에 이 기사의 뒷부분에서 설명하겠습니다.
또한, 그는 메뉴 항목을 5개에서 9개 사이로 제한하는 "The Magical Number Seven, Plus or Minus Two"(PDF)를 만들었습니다. (현재 디자인에서는 중요하지 않아진 이론입니다)
이러한 전략은 원래 교육 분야에 적용되었지만, 사용자 경험 (UX) 설계에도 똑같이 적용됩니다.
기억력과 학습력을 향상하는 기술은 동일하게 사용자의 성가심을 감소시킵니다.
작업 기억
만약에 당신이 냉장고를 열어보고 싶을 때마다 수수께끼에 대답해야 한다면 어마어마한 스트레스를 받을 것입니다.
그러나 인지 부하 이론에 따르면, 이는 사용자가 열악한 UX 설계로 느끼는 좌절감과 같습니다.
출처 : Erika Wittlieb인지 부하 이론을 이해하려면 작업을 완료하는 순간에 사용되는 뇌 활동(=작업기억)을 이해해야 합니다.
작업기억은 모든 외부 자극 및 단기 기억을 분류하고 필요한 경우 장기기억에서 메모리들을 가져와야 합니다. 작업기억을 컴퓨터 RAM으로, 장기기억을 하드 드라이브로 생각하면 이해하기 쉽습니다.
작업기억(Working memory)과 단기 기억(Short-term memory)은 종종 같은 의미로 사용되지만 약간 다릅니다.
작업기억은 정보를 처리하지만, 단기 기억은 장기기억을 위해 중요하지 않은 정보를 걸러냅니다.
차이점을 설명하기 위해 바로 이 기사를 살펴보겠습니다. 이 기사를 읽는 동안 파란색 텍스트 링크로 생소한 개념들을 접할 수 있습니다.
작업기억은 기사의 더 큰 의미를 이해하기 위해 파란색 텍스트의 개념이 무엇을 의미하는지 알아야 합니다.
장기 기억은 파란색 텍스트가 링크라는 것을 알고 있고, 작업기억은 링크를 클릭하여 자세한 정보를 얻습니다.
동시에 단기 기억 장치는 기사의 위치를 기억하므로 시간이 어느 정도 흘러야 기사의 위치를 잊어버리게 됩니다.
출처 : Tim Gouw디자인에서의 응용
영향력 있는 작가인 스티브 크루그(Steve Krug)는 인지 기반 이론의 응용을 웹 디자인으로 대중화 한 사람입니다. 그의 책 “(사용자를) 생각하게 하지 마!"는 많은 디자이너에 의해 지침서로 여겨집니다.
이 책에 담긴 많은 교훈 중에서 다음과 같은 것들이 있습니다 :
1. 설명이 없어도 보자마자 알 수 있게끔 웹 사이트를 최대한 자명하게 만들어야 합니다. 알고 보면 사람들은 홈페이지에서 우리의 상상보다 훨씬 더 적은 시간을 소비하기 때문입니다.
2. 사용자는 최고의 선택을 하지 않습니다. 최소 조건만 충족되면 만족합니다. 즉, 가장 좋은 선택 대신 문제에 대한 가장 쉬운 해결책을 찾는 것입니다. 더욱이 습관적인 사용자는 더 나은 옵션을 고려하지 않고 동일한 솔루션을 반복해서 사용할 것입니다.
3. 사용성은 평균적인 능력이나 경험을 가진 사람이 시스템을 사용하여 목표를 달성할 수 있을 때 적합합니다.
4. 웹 사용의 대부분은 시간을 절약하고자 하는 열망으로 동기가 부여됩니다.
5. 뒤로 가기 버튼은 웹 브라우저에서 가장 많이 사용되는 기능입니다.
6. 홈 버튼이 시야에 들어오면 유저는 사이트 내부에서 길을 잃더라도 언제든 다시 시작할 수 있다는 안정감이 듭니다.
Krug 외에도 Nielsen Norman Group의 유용성 전문가를 비롯하여 많은 사람들이 디자인에서 인지 부하에 대해 자세히 설명했습니다.
요약하면, 사용자가 웹 사이트에서 잠시 멈출 때마다 (찰나의 순간이라도), 유저의 작업기억은 줄어듭니다.
'이 버튼을 클릭할 수 있는 건가?’, ‘홈버튼은 어디에 있나?’, '어떻게 저장하지?’와 같은 질문은 사용자의 경험을 망칠 수 있습니다.
인지 과부하의 가장 일반적인 원인
많은 디자인 변수는 사용자의 뇌에 무리를 줄 가능성이 있으며, 사이트뿐 아니라 사용자의 외부 생활과 환경에서도 많은 변수가 작용해 사용자를 통제 범위에서 벗어나게 합니다.
사용자는 다음날 회사에서 하는 프레젠테이션에 대해 걱정할 수도 있고, 그의 창문 밖에서 큰소리로 공사를 하고 있을 수도 있습니다. 이런 외부요인 또한 웹 사이트 디자인의 단순성과 상관없이 작업기억을 없앱니다.
게다가 모든 사용자는 서로 다른 용량의 작업기억을 가지고 있습니다. 태평한 사용자는 모든 디테일에 대해 집착하는 사람들보다 웹 사이트에 더 집중할 수 있습니다.
정기적으로 온라인에 접속하지 않는 사용자는 숙련된 사용자보다 웹을 사용할 때 더 많이 생각해야 합니다.
인지 과부하를 보편적으로 계량화 할 수는 없지만, 공통으로 발생하는 많은 수의 설계 실수를 방지할 수는 있습니다.
아래에서는 웹 디자인에서 발견되는 가장 보편적인 실수 유형을 피할 수 있는 모범 사례입니다.
1. 불필요한 작업
사용자가 겪는 모든 단계는 인지 부하에 추가됩니다. 불필요한 행동이 너무 많으면 사용자에게 짜증을 불러일으키게 됩니다. 사용자의 작업기억은 특정 목표를 달성하는 데 중점을 둡니다. 불필요한 작업으로 인해 사용자가 더 많은 노력을 하게 되고 작업기억이 소진되는 것은 좋지 않습니다.
속도는 인지 부하 최소화에 필수적인 고려 사항입니다. 사용자는 목적 달성까지 빠른 속도로 업무를 수행하기를 원하므로 사전에 지연될만한 시간을 제거해야 합니다.
출처 : Touch of Modern사용자는 자신의 이메일 주소를 제출하기 전에 어떤 것을 준비해야 하는지 알고 싶어 하지만 Touch of Modern의 사이트는 이메일 주소 제출 후에는 어떤 것을 요구할지 추측하기 어렵습니다. 이 화면은 잠재적인 사용자들을 상당 부분 이탈시킬 것입니다.
솔루션
다음은 불필요한 작업을 찾는 연습입니다.
사용자가 작업을 완료하기 위해 수행해야 하는 모든 단계를 나열해보는 것입니다. 예를 들어 이메일을 보내는 것은 다음과 같이 보일 수 있습니다.
— 이메일 아이콘을 클릭하십시오.
— “보내기 "입력 필드를 클릭하십시오.
— 이메일 주소를 입력하십시오.
— “제목 "입력 필드를 클릭하십시오.
— 등등.
이제 목록을 다시 스캔하여 중복성을 찾아야 합니다.
커서를 "보내기"필드에서 자동으로 시작하여 2단계를 완전히 제거할 수 있습니다.
이렇게 하면 사용자가 거쳐야 하는 단계를 줄일 수 있습니다. 당신이 제거하는 모든 단계가 인지 과부하를 줄이는 방법입니다.
출처 : googleGoogle의 홈페이지를 살펴보겠습니다. 커서가 검색 필드에서 시작되므로 사용자가 입력을 바로 시작할 수 있습니다. 이러한 마이크로 인터렉션들을 합산하면 전체 경험에서 큰 비중을 차지할 수 있습니다.
2. 지나친 자극
한 번에 여러 사람이 나에게 이야기할 때 집중하기 어려운 것처럼 혼란스럽고 산만한 인터페이스는 사용자를 목적에서 탈선하게 할 수 있습니다.
웹에서 너무 많은 이미지, 애니메이션, 아이콘, 광고, 텍스트 유형 및 밝은 색상이 주의를 끌기 위해 사용된 경우, 사용자는 본래 목적에 집중하기 어렵습니다.
모든 산만함, 특히 시각적으로 돋보이는 산만함은 사용자의 관심을 요구합니다.
출처 : LINGsCARSLINGsCARS는 극단적인 예일 수 있지만, 밝은 색과 움직이는 요소가 우리의 주의를 얼마나 빨리 빼앗는지 체감할 수 있습니다. 심지어 분할된 화면의 두 영역에서 동시에 일어나는 두 가지의 과장된 애니메이션이 사용자에게 위협적으로 보이기까지 합니다.
솔루션
우선, 필수적이지 않은 모든 것을 제거해야 합니다. 필요한 것만 유지하는 것이 유리하며, 로딩 시간을 줄이고 사용자 경험을 간소화합니다.
미학적인 디자인이 웹 사이트의 첫인상에 미치는 영향에 관한 연구(PDF)에서도 사용자들이 복잡한 웹 사이트보다 단순한 웹 사이트를 선호한다는 사실을 발견했습니다.
균형을 위해 콘텐츠를 다양화할 수도 있습니다.
하나의 유형(예 : 텍스트 또는 이미지)이 너무 많다면 위압적으로 보일 수 있습니다. 이미지, 비디오, 인포그래픽 등의 시각적 콘텐츠를 골고루 혼합하여 페이지에 조화를 이루고 사용자가 쉽게 이해할 수 있도록 해야 합니다.
영화와 TV 웹 사이트인 IMDb는 시각적인 콘텐츠에 의존하는 대신 텍스트 콘텐츠를 동등하게 구성해 사이트의 균형을 맞췄습니다.
출처 : imdb페이지를 뼈대만 남게 축소한 후 사용자가 바로 이해할 수 있는 방식으로 요소를 구성하는 것이 좋습니다.
대칭 또는 구조적 비대칭이 있는 레이아웃은 정보를 더 빨리 이해할 수 있는 방식입니다.
즉, 두뇌의 노력을 덜 요구하는 방식으로 정보를 표시해야 합니다. 대칭성과 스마트한 비대칭성은 눈을 즐겁게 할 뿐만 아니라 인터페이스와 폼의 구조가 서로 인터렉션 하기 쉽습니다.
Groupon은 추천된 냉동 요구르트 핫딜(가운데 오른쪽)에 대한 텍스트 설명과 텍스트 카테고리의 수직 메뉴(가운데 왼쪽)를 조화롭게 풀었습니다. 사진과 색상 블록을 사용하면 구조화되고 만족스러운 모래시계 모양이 만들어져 강조하고 싶은 텍스트를 중간에 넣을 수 있습니다.
출처 : Groupon대칭은 화면의 양쪽에 동일한 레이아웃을 배치하는 것 이상입니다. 그것은 시각적인 무게와 시선(방향성)의 조화에 관한 것입니다. OTHR같이 비대칭 스크린을 구성할 수도 있습니다.
출처 : OTHR단순하고 심플한 요소로 필요한 페이지만 그저 남겨두는 것은 자극적인 콘텐츠에 대한 전쟁의 시작에 불과합니다.
이러한 요소들을 간단한 레이아웃으로 제시하는 것을 잊으면 안 됩니다.
3. 너무 많은 옵션 (힉스의 법칙)
다소 역설적이지만, 사용자는 많은 옵션을 원합니다. 하지만 너무 많은 옵션은 그들의 뇌에 과부하를 일으킵니다.
Hick의 법칙 (또는 결정 마비)은 이런 현상에 대해 설명하고 있습니다. 사용자가 선택할 수 있는 옵션이 많을수록 결정을 내리는 데 더 많은 시간이 걸립니다.
윌리엄 힉 (William Hick)과 레이 하이 먼 (Ray Hyman)은 1950년대에 처음으로 이론을 테스트했고, 지난 10년 동안 그 발견은 디자인을 위해 재정의되었습니다.
우리는 행동 연구(PDF)에서 Hick의 법칙을 확인하였을 뿐 아니라 최근 MRI 연구를 통해 입증되었습니다.
디자이너로서의 힉스의 법칙을 이해하려면 각 옵션을 깜박이는 밝은 빛으로 생각해보면 됩니다. 위에 설명된 것처럼 너무 많은 불빛들은 사용자를 과도하게 자극할 것입니다.
출처 : RakutenRakuten과 같은 인기 있는 웹 사이트 디자이너조차도 이 원칙을 제대로 이해하지 못하기 때문에 이러한 실수를 저지릅니다.
솔루션
불필요하고 중복되는 옵션을 이미 제거했다고 가정하면 여러 옵션을 그룹화할 수 있습니다. 이런 방법은 광범위한 제품을 취급하는 백화점 웹 사이트에서 가장 많이 볼 수 있습니다.
이것은 옵션의 개수가 너무 많은 것뿐만 아니라 한 번에 너무 많은 옵션을 제공하는 것에 대한 이야기이기도 합니다. 숨겨진 히든 메뉴, 아코디언 및 풀아웃 UI로 이러한 항목 중 일부를 숨길 수 있습니다.
이러한 메가 메뉴는 사용자에게 다양한 옵션을 제공하지만 과도하지 않고 소화가 가능한 용량을 제공합니다.
.
출처 : amazon숨겨진 내비게이션 메뉴는 검색 가능성을 제한하므로 이커머스 및 뉴스와 같은 업계의 디자이너는 신중해야 합니다.
다른 제품 (예 : Amazon의 "관련 구매"배너)에 대한 링크를 통해 페이지를 보완함으로써 숨겨진 메뉴의 단점을 최소화할 수 있습니다. 또는 하나의 내비게이션 메뉴에 들어갈 때까지 헤더의 카테고리를 일반화하여 히든 메뉴를 피할 수 있습니다. (Apple과 CNN처럼)
출처 : cnn이 외에도 디자이너들은 웹 사이트 내비게이션을 구성하는 방법에 대해 주의해야 합니다.
Hick 's Law와 관련된 많은 문제는 정보 아키텍처 (IA)를 관리하여 처리할 수 있습니다. 정보 구조 (IA)는 아래에서 "찾기 어려운 페이지 및 기능"에서 설명합니다.
4. 너무 많은 콘텐츠
과도한 자극, 너무 많은 옵션과 마찬가지로 너무 많은 콘텐츠를 제공하면 사용자의 작업기억이 여러 방향으로 분산됩니다.
하지만 일부 웹 사이트의 경우 모든 것이 필수적인 정보일 수 있습니다.
콘텐츠가 너무 많으면 콘텐츠를 우선순위에 맞게 구성하여 사용자에게 부담을 주지 않도록 해야 합니다.
출처 : Arngren솔루션
위에서 설명한 바와 같이, George Miller의 청킹 전략은 많은 양의 콘텐츠를 보기 쉽게 제공하는 데 효과적입니다. 이는 기억하기 쉽도록 데이터를 그룹화하는 기술입니다.
전화번호는 지역번호 2자리, 3 ~4자리 숫자 및 4 자릿수 숫자로 나뉩니다.
11개 이상의 숫자 문자열은 기억하기가 어려울 수 있습니다.
홈페이지에 많은 제품 이미지를 전부 표시하는 그룹화 하는 것이 좋습니다. Etsy는 판매자별로 셀을 그룹화하여 홈페이지에 더 많은 제품을 표시했습니다.
출처 : Etsy텍스트를 청킹 하는 법에는 짧은 단락, 표제와 부제목의 적절한 사용, 충분한 여백이 포함되어야 합니다.
모든 데이터가 필요한 긴 폼의 경우 여러 단계의 폼을 사용하는 것이 좋습니다.
긴 양식은 위협적으로 보일 수 있으며 웹 사이트를 사용하다 중도에 포기하는 원인이 되기도 합니다. 폼의 정보를 별도의 페이지 또는 적어도 별도의 섹션으로 분리하여 만드는 것이 좋습니다. 진행률 표식을 포함시켜 사용자가 몇 페이지가 더 남았고, 현재 몇 페이지에 있는지 알 수 있게 디자인해야 합니다.
출처: Virgin Atlantic비행기 표를 사는 것은 항상 많은 양의 데이터를 입력해야 하며 그중 어느 것도 불필요한 정보가 아닙니다. Virgin Atlantic은 항공편 선택, 승객 정보 기입, 지불 세부 사항 입력 등을 개별 페이지와 개별 단계로 분리하여 지루한 경험을 향상합니다.
모든 것을 하나의 긴 페이지에 두면 일부 사용자는 폼에 압도당하고 포기합니다.
5. 애매모호한 인터페이스
인지 과부하에서 가장 큰 원인은 혼란스러운 UI입니다. 명료한 UI를 사용하면 사용자가 원하는 목적을 달성하기 위해 어떻게 해야 하는지를 한참을 고민하거나 아이콘을 해독하기 위해 사고를 낭비하지 않아도 됩니다.
출처: SpeedCrunch모든 사용자가 SpeedCrunch의 모호한 아이콘을 이해할 만큼 인터넷 환경에 숙련된 유저가 아닙니다. 컴퓨터에 대해 충분히 알고 있더라도 오른쪽 하단에 있는 두 개의 아이콘은 어떤 아이콘인지 알아보기 어렵습니다.
솔루션
너무 유니크하거나 표준을 어기는 디자인을 사용하면 안 됩니다.
사용자는 다른 웹 사이트에서 이미 알고 있는 시각적 단서를 사용해서 웹을 브라우징하고, 처음 사용해보는 웹 사이트에서도 공통의 기호를 사용하여 웹을 컨트롤합니다.
독특한 방식 대신에 친숙한 요소에 브랜드의 정체성을 부여할 수 있습니다. Home Depot은 일반적인 아이콘을 사용하지만 아이덴티티를 살린 오렌지 색상의 아이콘을 제공합니다.
출처 : Home Depot이는 레이블에도 동일하게 적용됩니다.
"연락처"및 "제출"과 같은 표준 레이블이 있는 버튼은 "주소"또는 "이동"과 같은 비 통상적인 레이블보다 더 쉽게 인식할 수 있습니다.
일반적이고 익숙한 레이블은 사용자의 브라우징 경험을 도와주지만 일반적이지 않은 레이블은 사용자를 멈추게 하고 이 버튼이 무엇인지 궁금해합니다. 지나치게 개성을 추구하면 안 됩니다.
만약에 이전에 없던 새로운 기능이 있다면, 실생활에서 쓰이는 표현을 사용하여 명료하게 만듭니다.
현실과 디지털 사이의 격차를 좁히는 스큐어모피즘처럼 말입니다.
초기 인터넷 개척자는 봉투가 메일 시스템의 명백한 상징이기 때문에 전자 메일을 나타내는 아이콘으로 봉투 모양을 선택했습니다.
모호한 기호는 피하고, 다른 기호로 오인되거나 혼동될 수 있는 경우에는 특히 주의해야 합니다. Issuu의 아이콘 중 일부는 익숙하지만 다른 아이콘은 익숙하지 않습니다. 사용자가 아이콘의 뜻을 모른 채 클릭하여 새로운 기능을 발견하면 그들이 본래 가졌던 목적성을 잃어버리게 됩니다.
출처 : Issuu마치 웹을 처음 접하는 것처럼 디자인을 만들어 명료함을 잃지 않도록 해야 합니다.
데니스 코르 투 노프 (Denis Kortunov)의 10가지 공통적인 아이콘 실수 목록을 확인하는 것도 좋습니다.
예를 들어, 아이콘이 서로 너무 유사하거나 너무 복잡하면 좋지 않습니다.
완전히 명확하지 않은 인터페이스에는 UI 작동 방식을 사용자에게 가이드하기 위해 온 보딩이 포함되어야 합니다.
새롭고 독창적인 인터페이스는 실용적인 가이드가 필요합니다.
예를 들어, 슬랙 (Slack)은 내레이션을 통해 사용법을 설명하는 완전한 비디오 투어를 제공합니다.
출처 : Slack6. 찾기 힘든 페이지 및 기능
사이트가 사용자가 필요한 모든 것을 가지고 있어도 사용자는 그 기능을 못 찾을 수도 있습니다.
이것은 기능이 손상된 것만큼이나 크리티컬 합니다. 사용자가 무엇을 해야 할지 파악하려고 두뇌를 낭비하게 되기 때문입니다.
모든 사용자 경험의 가장 중요한 구성 요소중 하나인 내비게이션은 쉽고 유저에게 스트레스를 주지 않는 방향으로 만들어져야 합니다. 웹 사이트 탐색은 직관적이어야 하며 사용자가 길을 잃는 것을 걱정하지 않고 자유롭게 돌아다닐 수 있도록 해야 합니다. 이렇게 만들려면 IA단에서 많은 작업이 필요할 뿐만 아니라 실제보다 더 단순하게 보이게 하기 위한 많은 노력이 필요합니다.
출처 : Mojo Yogurt햄버거 아이콘이 좋지 않다고 생각한 Mojo Yogurt는 왼쪽 상단 모서리에 있는 로고에 마우스를 가져다 대면 내비게이션이 나타나도록 만들었습니다.
출처 : Mojo Yogurt작은 애니메이션들이 로고를 따라 돌게 만들었지만, 화면의 움직임과 색상의 차별화 같은 추상적이고 막연한 단서 만으로는 충분하지 않습니다.
솔루션
사용자의 선호도에 따라 IA를 정리해야 합니다.
타깃 사용자가 디자이너의 생각대로 사이트를 사용하지 않을 수 있으므로 웹 사이트 구성 방법을 사용자 선호도에 따라 구체화시켜야 합니다. 카드 소팅은 사용자가 특정 페이지와 주제를 분류하는 방법을 보여줍니다. 또한 트리 테스트를 통해 실제 사용자가 현재 사용하고 있는 사이트의 구조를 얼마나 잘 이해하고 있는지 평가할 수 있습니다.
출처 : Rosenfeld MediaIA의 충돌 과정을 보려면 Dan Brown의 "정보 아키텍처의 8 가지 원칙"(PDF)을 읽어보길 추천합니다.
단 5 페이지로 구성된 이 문서는 다중 분류(사용자의 서로 다른 사고방식을 수용하기 위해 사용되는 여러 가지 분류 방법)나 공개 원칙(사용자가 무엇을 기대해야 하는지 알 수 있을 정도의 정보만 표시)등의 모든 디자이너가 IA에 대해 알아야 할 8 가지의 규칙을 설명합니다.
페이지 또는 메뉴 항목을 결합하여 중복을 없애는 것도 좋습니다.
예를 들어, 경영진용 소개 페이지와 팀 구성원 소개 페이지에 대해 각자의 페이지보다 동일한 페이지에서 함께 보여주는 것이 좋습니다. 디자인 스튜디오 Waaark는 스튜디오 소개, 팀원 및 연락처 정보를 한 페이지에 3 개의 화면으로 통합하여 브라우징을 간소화합니다.
출처 : Waaark특정 기능이 다른 기능보다 중요한 경우에는 시각적 요소를 사용하여 해당 기능에 사용자의 주의를 환기시킵니다. 크기를 늘리거나 애니메이션을 추가하거나 화려하고 대조적인 색상을 사용하면 사용자의 시선을 끌 수 있습니다. 그래픽을 사용할 때는 새로운 방식으로 정보를 표시하는 것도 좋지만 무엇보다도 유저가 직관적으로 이해할 수 있는지 확인해야 합니다.
출처 : paypalPayPal은 새로운 사용자보다 재방문하는 사용자가 많을 것으로 기대해서, 로그인 버튼을 주의를 집중시키는 흰색 블록 배경으로 분리하였습니다. 이는 로그인하려는 재방문 사용자의 만족감을 증가시킵니다.
7. 통일성 없는 요소
웹 사이트의 첫 번째 페이지가 파란색과 밑줄이 있는 텍스트를 사용하여 링크를 나타냈고, 두 번째 페이지는 링크를 나타낼 때 파란색만 사용하고 밑줄을 사용하지 않았다고 가정해 보겠습니다.
사용자가 다른 페이지에서 “밑줄이 그어진 텍스트를 보며 이게 링크일까?"라고 생각하면 사용자의 브라우징은 잠시 중단될 수 있습니다. 사용자를 학습시키는 방법이 통일되지 않고 제각각이라면 이로 인해 전체 UX가 손상될 것입니다.
오타 및 문법 오류도 같은 방식으로 작동합니다. 최고의 UX를 만들려면 눈에 보이는 실수가 없어야 합니다.
불일치 요소들이나 오타 및 문법 오류는 그 자체로는 마이너 한 실수일 수 있지만, 이 모든 경우에 사용자는 작업기억을 소모하며, 고려하고 처리하는 데 시간을 할애해야 하는 것이 크리티컬 한 요소입니다.
출처 : SIPhawaiiSIPhawaii는 모든 곳에 대문자, 정신없는 색상, 통일성 없는 폰트 사이즈가 함께 사용됩니다. 그리고 햄버거 아이콘은 클릭했을 때 어떤 일이 일어나는지 알고 싶지도 않게 생겼고, 표준 햄버거 아이콘과도 다르게 생겼습니다.
솔루션
웹 사이트 전체에 일관된 형식을 유지해야 합니다. 이러한 실수는 종종 의도치 않게 발생하는 것이기 때문에 고도의 집중력과 실행력을 요구합니다.
스타일 가이드는 일관성을 위해 놀라운 일을 할 수 있습니다.
디자이너가 필요로 할 때마다 신속하게 액세스 할 수 있는 곳에 모든 디자인 의사 결정을 수집하면 도움이 됩니다.
배경색, 이미지의 크기 또는 색상값과 같은 세부 정보는 쉽게 잊어버릴 수 있으므로 주로 작업하는 툴에 세팅하여두어 쉽게 사용할 수 있도록 하면 도움이 됩니다.
출처 : Lonely Planet스타일 가이드 제작에 대한 자세한 내용은 깊이 있는 자료와 실제 사례 연구를 참고하면 좋습니다.
오타 및 문법 오류에 대해서는 맞춤법 검사기에만 의존하지 않도록 합니다. 게시하기 전에 항상 한 번 마지막으로 콘텐츠를 검토해야 합니다.
시각적 및 기능적 일관성의 좋은 예는 Pinterest입니다. 피드의 그림 스타일과 상관없이 형식은 동일하게 유지됩니다.
출처 : Pinterest제목, 설명, 작성자, 웹 사이트, 핀 및 활동은 각 카드의 동일한 위치에 동일한 텍스트 크기로 모두 표시됩니다. 일관성에 대한 이러한 집착은 Pinterest에게 사용자를 혼란스럽게 하지 않을 뿐 아니라 사용성을 해치지 않으면서 행에 배치되는 카드의 수를 자유롭게 사용할 수 있게 합니다. 한 카드를 이해할 수 있다면 나머지 카드를 모두 이해할 수 있습니다.
정리하자면,
숙련된 UX 디자인은 공기 역학입니다. 과도한 인지 부하와 같은 충돌이 있으면 비행기 전체가 추락하게 됩니다. 디자이너는 더 적극적으로 사용자를 생각하게 하지 말아야 합니다.
다음은 과부하가 발생하지 않도록 해당 기사의 포인트를 요약한 것입니다.
1. 인지 부하는 작업기억에 부가되는 모든 정보입니다. 인지 과부하는 너무 많은 정보가 의사 결정과 사용자 경험을 방해할 때 발생합니다.
2. 시각적인 혼란을 피하기 위해 다양한 콘텐츠의 유형과 구조화된 페이지 구성을 사용해야 합니다.
3. 숨겨진 메뉴를 사용하면 한 번에 볼 수 있는 메뉴의 수를 관리할 수 있지만 사용자가 메뉴를 찾을 확률은 낮아집니다.
4. 청킹(기억하기 쉽도록 데이터를 그룹화) 및 스텝을 알려주는 다단계 양식 및 진행률 보여주기 같은 전략은 사용자를 인지 과부하로부터 보호합니다.
5. 명료하게 인식되는 UI 요소는 사용자의 기존 지식을 활용하므로 사용자가 많이 생각할 필요가 없습니다. 새롭고 독창적인 기능은 온 보딩을 통해 설명할 수 있습니다.
6. 실제로 사용자가 어떻게 생각하는지를 고민한 뒤 IA를 구성해야 합니다. 카드 소팅 및 트리 테스트와 같은 사용성 테스트를 통해 대상 그룹에 가장 직관적인 내비게이션을 제시할 수 있습니다.
7. 오타 및 문법적 실수뿐 아니라 비주얼 및 기능의 불일치로 인해 사용자는 전반적인 작업을 방해받게 됩니다.
8. 가능한 경우 중복을 제거하는 것이 좋습니다. 사용자가 거쳐야 할 단계의 수 또는 노력의 양을 최소화하는 방법을 세심하게 설계해야 합니다.
