이러한 성공적인 상호 작용 디자인 원칙으로 UX를 향상시키십시오.

작동하는 상호 작용과 사용할 수 없는 상호 작용 사이에는 미세한 선이 있습니다. 상호 작용 디자인 원칙은 격차를 해소하는 데 도움이 됩니다.

잘 실행된 인터랙션 디자인은 훌륭한 UX를 구현하는 데 큰 역할을 하며 UX 디자인 원칙의 기본 중 하나입니다.

"사용할 수 없음"은 "계속 진행 중입니다."를 의미하며, 시각 디자인이 아무리 "멋져도"(애니메이션이 얼마나 멋진지) 상호 작용 디자인을 엉망으로 만들고 UX를 엉망으로 만듭니다. 제대로 하면 미학이 부족하더라도 훨씬 더 나은 UX를 얻을 수 있을 것입니다. 제품은 성공할 가능성이 훨씬 높아져 결과적으로 수익에 기여합니다.

인터랙션 디자인(IxD)은 인터랙션 디자인 협회(IxDA)에서 "인터랙션 시스템의 구조와 동작"으로 정의됩니다. 인터랙션 디자이너는 컴퓨터에서 모바일 장치, 가전 제품에 이르기까지 사람들과 그들이 사용하는 제품 및 서비스 사이에 의미 있는 관계를 만들기 위해 노력합니다.”

경험은 사람들이 그들의 상호작용을 얼마나 좋게 기억하는지를 결정하기 때문에 중요합니다. —일상 사물의 디자인에서 돈 노먼.

인터랙션 디자인 원칙을 따르면 훌륭한 인터랙션 디자인에 엄청난 기여를 하고 경험에 기여할 것입니다.

오늘날의 모든 장치와 기술이 하룻밤 사이에 완전히 다른 것으로 대체될 수도 있지만, 지속되는 원칙 때문에 훌륭한 인터랙션 디자인은 여전히 ​​달성할 수 있습니다. 그 끊임없는 원칙은 사람들에게 동기를 부여하는 것, 행동, 생각하는 방법에 관한 것입니다.

모든 문의 모든 문 손잡이가 다르게 작동한다고 상상해보십시오. 하나의 경우 먼저 문으로 밀어 넣은 다음 아래로 밀어야 합니다. 다른 사람은 누르는 대신 위로 당겨야 하고 , 또 다른 사람은 두 번 위로 당긴 다음 아래로 당겨야 합니다 . 완전히 재앙입니다. 사실, "문 손잡이를 돌리십시오"라는 문구는 한 가지 방법이 있다고 가정합니다.

"규칙을 따르라"고 외치는 소리에 머리를 부딪히는 것을 좋아하는 사람은 아무도 없지만 진정으로 우수한 상호 작용 디자인은 일련의 표준, 모범 사례, 관례 및 경험 법칙(휴리스틱)에 의존합니다. 딱딱한 과학은 아니지만 IxD의 기반을 형성하고 마찰을 최소화하면서 상호 작용을 가능하게 합니다. 인터페이스 표준은 창의성을 억누르지 않습니다. 이는 어렵고 빠른 규칙이 아니라 디자이너가 혁신할 "사용 가능하고 친숙한 디자인" 기반을 구축하는 데 도움이 되는 기본 지침입니다.

인터랙션 디자인 원칙 및 모범 사례

인터랙션 디자인은 HCI(Human-Computer Interaction) 분야에 속하며, Interaction에서 정의한 "컴퓨터 기술, 특히 인간(사용자)과 컴퓨터 간의 상호 작용에 중점을 둔 연구의 다학문 분야"입니다. 디자인 재단.

훌륭한 UI 디자인은 기본 UI 디자인 원칙과 목표 중심의 상호 작용 디자인을 결합하여 순수한 사용자 기쁨을 달성합니다.

• 성공적인 상호 작용 디자인은 간단하고 명확하게 정의된 목표, 강력한 목적 및 직관적인 UI를 사용합니다.
• 상호 작용을 간단하고 쉽게 유지하기 위한 노력의 일환으로 목표 중심의 상호 작용 디자인 은 사용자가 작업을 완료하는 데 필요한 절대적인 최소값 이상을 사용자 앞에 표시하지 않습니다.

가장 중요한 몇 가지 원칙을 살펴보겠습니다(완전한 목록은 아님).

발견 가능성

기본적으로 사용자가 찾을 수 없으면 존재하지 않습니다. 예를 들어 모범 사례로 아이콘에 레이블을 지정하는 것과 같이 마이크로초 미만으로 UI에서 어떤 작업이 가능한지 종으로 명확하게 알려야 합니다. 레이블이 없는 아이콘은 의미를 해독하기 위해 멈춰야 하기 때문에 사용자의 경로에 장애물을 던지는 것과 같습니다. 당신은 "흐름"을 방해하고 있습니다. 그리고 여기 더 충격적인 사실이 있습니다. 그들은 당신의 UI를 배우는 데 관심이 없습니다.

기표

발견 가능성과 매우 밀접한 관련이 있는 기표의 효과적인 사용은 어포던스(객체에 대한 작업의 가능성)가 UI에 명확하게 표시되도록 합니다. 기표는 신호나 이정표와 같은 강력한 단서를 제공합니다. 사용 가능한 상호 작용을 나타내면 사용자에게 녹색 불빛이 깜박입니다. "여기 있습니다. 저를 탭(클릭, 스와이프 등)할 수 있습니다!" 어포던스는 UI에 존재할 수 있지만 기표가 없으면 보이지 않는 상태로 남아 있기 때문에 숨겨져 있을 수 있습니다. 예를 들어 사용자가 실수로 왼쪽 또는 오른쪽으로 스와이프하지 않는 한(예: 무언가를 삭제하기 위해) "숨겨진 제스처 상호 작용"이 표시되지 않을 수 있습니다.

Affordances는 가능한 작업을 정의합니다. 기표는 사람들이 그러한 가능성을 발견하는 방법을 지정합니다. 기표는 할 수 있는 일에 대한 지각 가능한 신호입니다. 기표는 어포던스보다 디자이너에게 훨씬 더 중요합니다. —돈 노먼(Norman, 2013)

피드백

기표 다음으로 사용자에게 가장 중요한 커뮤니케이션은 피드백입니다. 피드백 은 조치의 영향에 대한 명시적 정보를 의미합니다. 또한 시스템 상태에 대한 지속적인 가시성을 의미합니다. 즉, 시스템은 다음을 확인해야 합니다.

• 사용자는 무슨 일이 일어나고 있는지 계속 알려줍니다.
• 행동의 결과와 제품(시스템)의 현재 상태에 대한 지속적인 정보가 있습니다.
• 사용자의 마음에는 제품의 상태(처리, 로드, 검색, 업로드 등) 또는 기타 상태 변경에 대해 혼동이 없습니다.
• 작업이 실행된 후에는 새 상태를 쉽게 확인할 수 있습니다.

개념적 모델과 정신적 모델

훌륭한 상호작용 디자인은 사용자가 시스템의 좋은 개념적 모델을 만드는 데 필요한 모든 정보를 제공하여 사용자의 이해와 통제감을 유도합니다. 개념적 모델은 시스템을 사용할 때 검색 가능성과 결과 평가를 모두 향상시킵니다.

멘탈 모델 또는 인지 지도는 특정 상호 작용에 대한 기대와 실제 세계에서 작동하는 방식을 알려주는 사용자 마음의 이미지입니다. 인지 지도는 특히 공간 관계와 관련된 물리적 환경의 내부 표현입니다. 사용자의 멘탈 모델을 효과적으로 사용함으로써 인터랙션 디자이너는 직관적으로 "느끼는" 시스템을 만들 수 있습니다.

디자이너는 개념적 모델, 즉 디자인 모델을 발명하고 이것이 디자이너가 장치나 소프트웨어가 작동하도록 의도하는 방식입니다. 이 모델을 사용자에게 전달하는 유일한 방법은 UI를 통해 구현하는 것입니다. 그런 다음 사용자는 개념적 모델과 상호 작용하고 작동 방식에 대한 자신의 멘탈 모델을 만듭니다.

디자이너는 앱이 어떻게 작동하도록 의도했는지 사용자 에게 말할 수 없습니다. 앱의 목적을 명확하게 전달하기 위해 UI를 적절하게 디자인해야 합니다. 즉, 인터페이스를 이해하고 사용하기 쉽게 만드십시오. 잘못된 상호 작용 디자인은 사용자에게 잘못된 멘탈 모델을 생성할 위험이 있습니다. 이는 디자이너가 의도하지 않은 방식으로 앱을 작동시키려 하기 때문에 혼란과 사용자 오류로 이어집니다.

매핑

매핑은 컨트롤과 컨트롤이 세계에 미치는 영향 간의 관계입니다. 피드백 의 원칙은 두 가지 원칙이 함께 작동하여 원활한 경험을 제공하기 때문에 매핑의 가까운 사촌입니다. 거의 모든 아티팩트에는 컨트롤과 효과 간의 일종의 매핑이 필요합니다. 인터페이스 디자인의 경우 컨트롤과 결과 기능 간의 관계입니다.

물리적 유추와 문화적 표준을 활용하는 자연스러운 매핑은 즉각적인 이해로 이어집니다. 예를 들어 디자이너는 UI에서 공간 비유를 사용할 수 있습니다.

• 슬라이더 구성 요소로 값을 높이려면 슬라이더를 오른쪽으로 스와이프하고
• 줄이려면 왼쪽으로 살짝 밉니다.

일부 자연 매핑은 생물학적인 것입니다. 보편적인 기준에서 상승하는 수준은 더 많이, 감소하는 수준은 더 적게 나타냅니다.

제약

Constraints의 설계 개념은 주어진 순간에 발생할 수 있는 사용자 상호 작용의 종류를 제한하는 방법을 결정하는 방법입니다. 상호 작용 설계 제약 조건은 발생할 수 있는 상호 작용을 안내하는 핸드 스티어링과 거의 유사하게 사용자에게 "가이드 레일"을 제공하여 효율적인 상호 작용을 돕습니다.

디자인의 제약 조건은 사용자를 특정 상호 작용으로 안내하기 위해 특정 항목만 활성화되거나 심지어 표시되도록 합니다. 크기, 규모, 비율, 강조 및 상태를 고려하고 이들이 조화롭게 함께 작동하여 계층 구조를 만들고 결과적으로 사용자에게 영향을 미치는 방법을 고려합니다. 제약 조건을 올바르게 설정하면 사용자 오류 가능성을 줄이는 데도 도움이 됩니다.

제약의 반대는 모든 옵션이 사용자에게 제공되어 사용자가 다음에 무엇을 할지 결정하기 어렵게 만드는 것입니다. 선택 의 원칙입니다. 옵션이 많을수록 그 중 하나를 선택하기가 더 어려워집니다. 우리는 모든 가능성에 압도됩니다.

훌륭한 인터랙션 디자인 은 인터페이스에 사용 가능한 모든 옵션을 두는 것이 아니라 주어진 순간에 가장 중요한 것으로 제한합니다.

일관성, 표준 및 휴리스틱

원할 경우 패턴 (아래)과 모두 관련이 있습니다. 사용자 오류를 방지하고 응용 프로그램을 쉽게 배우려면 상호 작용 모델의 일관성이 필수적입니다. 일관성은 사용자가 디지털 제품을 사용할 수 있는 UX, 일반 사용성 및 효율성을 향상시킵니다.

일관성이란 유사한 요소를 사용하여 유사한 작업을 수행하고 전체적으로 유사한 기능과 동작을 갖는 것을 의미합니다. 일관된 인터페이스는 동일한 작업을 사용하여 무언가를 수행하는 것과 같은 규칙을 따르는 인터페이스입니다.

높은 사용성을 위해 노력하는 제품은 잘 정립된 규칙, 표준, 모범 사례 및 사용성 휴리스틱(특정 사용성 지침이 아닌 광범위한 경험 법칙)을 따릅니다.

예를 들어 규칙 을 준수하는 것은 페이지가 레이아웃되는 방식에 있을 수 있습니다. 웹 사용자는 페이지의 왼쪽 절반을 보는 데 시간의 69%, 오른쪽 절반을 보는 데 30%를 보냅니다. 따라서 사이트는 기존 레이아웃을 따르면 수익성이 더 높습니다.

표준 은 이동 경로(즉시 인식할 수 있는 방향 및 탐색 장치)이거나 BCC 사이트에서와 같이 페이지 상단의 전역 탐색 메뉴일 수 있습니다.

패턴 및 학습 가능성

새로운 사용자가 인터페이스 탐색을 얼마나 쉽게 배울 수 있습니까? 이전에 비해 상당한 이점을 제공하지 않는 한 새로운 작업 방식을 배우고 싶어하는 사람은 아무도 없습니다. 그러나 우리는 끊임없이 테스트되지 않고 틀에 얽매이지 않는 상호 작용으로 가득 차 있습니다.

공통 구성 요소 또는 패턴은 즉각적인 학습 가능성을 제공합니다. 숟가락 사용법을 배운 후에는 항상 숟가락 사용법을 알게 될 것입니다. 자전거 타기, 스케이트 타기와 동일하게… 버튼, 텍스트 필드, 드롭다운 메뉴, 체크박스, 라디오 버튼, 스피너, 슬라이더, 아이콘, 아코디언, 검색 상자 등 우리가 매일 사용하는 UI 구성요소에도 동일한 구성이 적용됩니다.

최고의 인터랙션 디자인은 바퀴를 재발명하려고 하지 않고 패턴을 새로운 방식으로 효율적이고 효과적으로 사용합니다.

패턴은 학습 가능성을 장려할 뿐만 아니라 일관성(위에서 설명한 또 다른 원칙)을 제공하고 작동 방식에 대한 사용자의 기대에 부합하도록 합니다.

시각적 계층 구조 및 강조

사이트나 앱과 상호작용하는 동안 사람들은 검색과 가장 관련성이 높은 정보를 찾습니다. 시각적 계층 구조는 중요도를 내포하는 방식으로 요소의 배열과 관련이 있습니다. 디자인의 시각적 계층 구조는 인간의 눈이 보는 것을 인식하는 순서에 영향을 미칩니다. 모든 것이 동일한 "가중치"로 주어지는 것은 아닙니다. 질서는 지각의 영역에서 물체 사이의 시각적 대조에 의해 만들어집니다. 시각적 대비(강조)는 요소 간의 크기, 근접성, 색상, 불투명도 및 실제 색조 대비로 얻을 수 있습니다.

시각적 계층 구조의 힘을 과소평가하지 마십시오. 그것은 건축과 산업 디자인뿐만 아니라 인쇄 디자인에서 영겁의 모든 종류의 디자인에서 매우 효과적으로 사용되었습니다. 멋진 포스터 디자인을 확인하세요. 이 기법을 인터랙션 디자인에 잘 활용하면 적절한 시기에 적절한 방식으로 적절한 것이 나타나는 것처럼 보입니다.

훌륭한 인터랙션 디자이너는 강조의 힘을 사용하여 마술처럼 작동하는 것처럼 보이는 "간단하고 의미 있는" 인터페이스 디자인을 성공적으로 달성합니다.

피츠의 법칙

믿거나 말거나, 이 법칙은 인간의 근육 움직임과 전신 운영자의 표적화 및 생산 라인 작업 수행에 대한 초기 연구에서 비롯되었으며 나중에 HCI(인간-컴퓨터 상호 작용)에 적용되었습니다. 기본적으로 "목표물을 획득하는 시간은 목표물까지의 거리와 크기의 함수입니다."라고 말합니다.

간단히 말해서 목표가 얼마나 멀리 있고 얼마나 큰지, 다른 목표와 관련하여 얼마나 가까운지에 관한 것입니다. 마우스를 더 짧게 움직이거나 탭하는 것이 더 좋습니다. 시작 위치에 더 가까우면 대상을 클릭하거나 스와이프하는 것이 항상 더 빠릅니다. 관련 작업은 또한 사용자가 UI와 상호 작용하는 화면 주위를 돌진할 필요가 없도록 서로 근접해야 합니다.

Fitts의 법칙은 대상으로 이동하고 선택하는 데 걸리는 시간을 정확하게 예측할 수 있습니다. 대상은 버튼, 드롭다운 또는 화면의 다른 대화형 요소일 수 있습니다. 너무 멀거나 너무 작거나 클릭 가능한 요소가 너무 가까이 있으면 UI의 효율성과 사용성이 크게 떨어집니다.

구텐베르크 다이어그램, Z 및 F 패턴 레이아웃

이러한 패턴은 콘텐츠에 따라 다양한 상황에 적용할 수 있으며 주로 서양인이 사용합니다. 구텐베르크 다이어그램은 블로그나 뉴스 사이트와 같이 주로 텍스트가 많은 사이트와 같이 균일하게 분포된 균일한 정보를 볼 때 눈이 움직이는 일반적인 패턴을 설명합니다. 구텐베르크 다이어그램은 강하고 약한 휴경 지역이 독서 중력 경로를 벗어나 어떤 식으로든 시각적으로 강조되지 않는 한 최소한의 관심을 받는다는 것을 암시합니다.

Z 패턴은 문자 Z의 모양을 따릅니다. 경우에 따라 이 패턴을 지그재그 패턴이라고도 합니다. 구텐베르크 다이어그램과의 주요 차이점은 Z 패턴이 시청자가 두 개의 휴경 영역을 통과할 것임을 시사한다는 것입니다. 그렇지 않으면 여전히 같은 위치에서 시작하고 끝나며 여전히 중간을 통과합니다. Gutenberg와 마찬가지로 디자이너는 Z 패턴의 경로를 따라 가장 중요한 정보를 배치합니다.

F는 빠르고 사용자가 콘텐츠를 읽는 방법을 나타냅니다. F 패턴은 웹에서 콘텐츠를 읽는 200명 이상의 사용자를 기록한 NNGroup 시선 추적 연구에 의해 대중화되었습니다. 사람들의 스캔 패턴이 다양한 유형의 사이트에서 매우 일관적이라는 것을 발견했습니다.

이것이 왜 중요한가? 예를 들어 전자 상거래 사이트에서 스캔을 최대화하기 위해 가장 중요한 콘텐츠를 F 패턴을 따르는 방식으로 정렬할 수 있습니다.

회상보다 인식

인식은 사건이나 정보를 친숙한 것으로 "인식"하는 우리의 능력을 말하며, 회상은 기억에서 관련 세부 사항을 끌어내는 것과 관련된 "인지 부담"에 훨씬 가깝습니다. 사용자에게 인식할 수 있는 항목을 표시하면 항목을 처음부터 다시 호출해야 하는 것보다 사용성이 향상됩니다.

예를 들어 UI에서 아이콘을 사용하면 기호를 즉시 인식할 수 있기 때문에 강력합니다. 우리의 뇌는 텍스트를 읽는 것보다 약 1000배 더 빠르게 기호를 처리(인식)합니다. 디자이너가 대화 상자에 표준 경고 표시 아이콘을 표시하면 다음 작업이 파괴적일 수 있으므로 사용자가 즉시 집중하고 주의를 기울이도록 합니다. 그러나 아이콘이 사용자가 의미를 기억하고 해독하도록 하는 방식으로 디자인되면(예: 경고 아이콘 대신 손을 들음) UI의 효율성과 사용성을 떨어뜨립니다.

미학 및 미니멀리즘 디자인

제품의 본질을 깊이 이해해야 본질적이지 않은 부분을 제거할 수 있습니다. — 조나단 아이브.

이것은 어렵기 때문에 가장 어려운 원칙 중 하나입니다. 디자이너와 제품 관리자는 태양 아래에서 가능한 모든 옵션을 추가하고 사용자가 원하는 경로를 결정하도록 하는 경향이 있습니다. 그것은 정말 게으른 접근 방식이며 불필요한 혼란으로 가득 찬 제품으로 이어집니다.

인터페이스는 사용자의 목표와 작업을 지원하지 않는 불필요한 요소와 콘텐츠를 제거해야 합니다. 디자이너는 미학적으로 보기 좋은 UI를 디자인할 뿐만 아니라 사용자 흐름에서 화면 간 정보의 우선 순위를 지정해야 합니다. 시각적 계층 구조와 강조의 마법을 사용하여 사용자가 작업을 완료하는 데 필요한 필수적이고 절대적인 최소한의 정보만 표시해야 합니다.

미켈란젤로는 자신의 작품에 대해 이렇게 말했습니다. “나는 대리석 속 천사를 보았고 그를 풀어줄 때까지 조각했습니다.

미니멀하고 미학적으로 즐겁고 단순한 상호 작용을 디자인하려면 디자이너가 사람들이 제품을 사용하는 순간에 정확히 무슨 일이 일어나고 있는지 이해하고 필요하지 않은 모든 것을 제거해야 합니다. 사용자가 제품을 사용하는 방법을 이해하기 위해 심층적인 사용자 조사 및 테스트를 수행하는 것이 일반적으로 가장 좋은 방법입니다.

오류 방지

사용자는 작업을 수행할 때 종종 주의가 산만하므로 시각적 강조를 통해 무의식적인 오류를 방지하고 제안을 제공하고 신중하게 설계된 제약 조건을 사용하는 것이 중요합니다. Poka-Yoke라고도 하는 오류 방지의 한 형태는 프로세스에서 오류가 발생하지 않도록 방지하기 위한 안전 장치 메커니즘의 구현을 나타냅니다.

오류를 방지하는 가장 좋은 방법 중 하나는 더 나은 멘탈 모델을 설계하는 것입니다. 많은 사용자 실수는 디자이너의 모델과 시스템 작동 방식에 대한 해석이 사용자의 멘탈 모델과 일치하지 않을 때 발생합니다.

표준 설계 규칙 은 사용자가 취할 수 있는 조치를 이해하는 데 도움이 되기 때문에 (위에 언급된 원칙 중 하나) 도움이 됩니다. 웹사이트 또는 애플리케이션과 상호 작용하는 사용자는 수천 개의 다른 사이트 및 앱을 사용해 왔으며 일반적인 상호 작용 요소가 특정 방식으로 표시되고 작동할 것으로 기대합니다. 제품이 이러한 규칙에서 벗어날 때 오류가 발생하기 쉬운 상황이 발생할 수 있습니다.

오류가 발생하기 전에 경고하고 파괴적인 조치를 취하기 전에 확인합니다. 잘 구현된 오류 메시지보다 더 나은 것은 처음부터 문제가 발생하지 않도록 방지하는 세심한 설계입니다. 오류가 발생하기 쉬운 상황을 제거하고 계속 확인하십시오.

인터랙션 디자인의 미래

새로운 장치, 환경 및 인터페이스는 새로운 상호 작용 가능성으로 계속 발전할 것입니다. 비디오 게임 컨트롤러는 지속적으로 발전하고 있으며 다양한 입력 컨트롤과 햅틱 피드백을 제공합니다. 제스처 인터페이스는 2D 및 3D 제스처를 지원하는 터치스크린(예: iOS 및 Android 장치의 제스처)에서 3D 공간에서 손 제스처를 사용하여 환경을 제어할 수 있는 가상 현실 공간, 게임 콘솔 및 IoT 장치와 상호 작용하는 것으로 성숙할 것입니다. .

Google의 Project Soli의 경우와 같이 마우스, 트랙패드, 조이스틱에 말을 하고 손과 손가락을 사용하여 장치를 제어하는 ​​보다 자연스러운 제스처 상호 작용으로 전환할 수 있습니다. 예를 들어 대화형 UI의 경우 입력 방법이 키보드에서 음성으로 변경될 수 있습니다. 그럼에도 불구하고 어떤 형태(음성, 촉각 및 시각)의 즉각적이고 지속적인 피드백의 원칙은 여전히 ​​필요합니다.

기본적인 인터랙션 디자인 원칙은 미래 시스템 디자인에서 항상 중심적인 역할을 할 것이며 UX/UI 디자이너가 이를 염두에 두는 것이 중요합니다. 그것들은 엄격하고 빠른 규칙이 아니지만 더 좋고 매력적인 제품과 서비스를 만들 것입니다. 성공적인 영화가 검증되고 진실되고 유서 깊은 구조를 따르는 고대의 스토리텔링 기술을 사용하는 것처럼, 상호 작용 디자인 원칙이 존재하는 데는 그만한 이유가 있습니다. 그것들을 따르는 것은 사용성을 개선하고 제품의 더 넓은 채택을 촉진함으로써 모든 제품 디자이너에게 도움이 될 것입니다.

Toptal Design 블로그에 대한 추가 정보:

• 디자인 원칙: 계층 소개
• UI 디자인 모범 사례 및 일반적인 실수
• 디자인의 게슈탈트 원리 탐구
• 정보 아키텍처에 대한 종합 가이드