주제 선택 이유
우리 서비스에도 ‘인터랙션'요소가 필요할 때 → 논거를 바탕으로 설득한 후, 추가하고 싶다. 그래서 ‘필요한 그 순간을 위해, 미리 공부해 둬야지’라는 생각으로 선택했다.
읽고 난 후, → 인터랙션이 단순히 움직이는 디자인이라 생각했는데 아니었음. 멈춰있는 디자인 요소?도 사용자와 상호작용하는 과정 중 하나? 이라면 IxD(Interation Design)라 말함.
그래서, (움직이는)인터랙션을 이해하려 했지만(?) 디자인의 본질 및 기본을 정리함. (오히려 좋아 ‘3’-*)
︎ 핵심 한 줄 정리
•
사용자에게 사용하기 쉽고 친숙한 제품 경험을 제공하기 위해서 기억해야 할 디자인 기본 원칙 14가지
: 발견하게 하고 → 의미를 이해하게 하고 → 다음 프로세스를 인지하게 하고 → 작동 방법을 이해하게 하고 → 선택적 제약사항을 제공하여 효율적으로 제품을 사용하게 하고 → 일관성 있게 제품 경험 설계하고 → 패턴을 적용하여 당황하지 않게 하고 → 시각 계층구조로 정보 더 쉽게 인지하게 하고 → 사용자의 제품 목표 도달을 위해서 효율적인 UX 설계하고 → 시선 흐름에 기반하여 정보제공하고 → 이해할 수 있게 시각화하고 → 간결하게 알려주고 → 오류를 최소화하기
→ 이것만 잘하면 됨! ^_ㅠ
︎ 내용 정리
intro
•
인터랙션이 중요한 이유
: 좋은 인터랙션은 더 나은 UX를 만들고 → 제품 성공 가능성을 높여서 → 비즈니스 수익에 기여함
•
인터랙션 디자이너가 하는 일
: 사람들과 제품/서비스 사이의 ‘의미 있는 관계’를 만들기 위해 노력함
갑자기 왠, 관계? →
Experience is critical, for it determines how fondly people remember their interactions. — Don Norman in The Design of Everyday Things.
•
인터랙션 디자인의 원칙은?
: 사람들에게 동기부여하는 것 / 행동-생각하게 하는 것
•
좋은 인터랙션의 기준은?
: "사용 가능하고 친숙한 디자인"기반으로 도움 주고 경험을 혁신하기
이를 위해서 구체적으로 →
•
간단하고 명확하게 정의된 목표, 목적 및 직관적인 UI를 사용하기
•
목표 중심의 IxD를 위해, 사용자에게 작업 과정에서 꼭 필요한 것만 노출하기
가장 중요한 14가지 원칙 정리
•
Discoverability | (목적을) 찾을 수 있는지
: 사용자가 찾을 수 없고, 이해할 수 없으면 존재할 이유가 없음 → 오히려 방해만 됨
e.g) 레이블 없는 ‘아이콘’
그래서 → 하단 네비게이션에 아이콘+레이블이 있음
•
Signifiers(기표) | 의미가 전달되고 있는지
: IxD에는 어포던스가 전달되고 있어야 함
e.g) 사용 가능함을 알려주는 ‘녹색 표시등' 깜박임 → ‘탭(클리/ 스와이프 등) 가능함’ 전달
하지만, 반대로 의도적으로 어포던스와 기표를 숨길 때도 있음 → ‘삭제 시 스와이프 기능 노출’
Indicating an available interaction, they flash green lights at the user shouting, “Here I am, you can tap (click, swipe, etc.) me!” (→ 귀여워…)
)어포던스 = 가능한 행동 → 기표가 중요한 이유
signifiers are signs, perceptible signals of what can be done. Signifiers are of far more importance to designers than are affordances. —Don Norman (Norman, 2013)
what’s signifier(googling)
Apple mail(어포던스를 숨겨둔 사례)
•
Feedback | 프로세스의 다음을 알려주기
HOW to →
•
사용자에게 진행 상황을 알려주세요.
•
사용자가 행동하면, → 제품이 현재 어떤 상태인지 공유해 주세요.
•
제품의 상태 (진행 중, 로딩 중, 검색 중, 업로드 중 등…)와 몇가지 다른 상태 변화에 혼란이 없어야 해요.
•
행동하면, 다음 상태를 쉽게 보여줘야 해요.
(by. jokubas)
•
Conceptual Models and Mental Models | 어떻게 작동할지 알려주기
Conceptual Models (개념적모델) : 좋은 IxD 은 사용자에게 이해와 통제감을 전하는 개념적모델과 연결됨.
▪
개념적 모델이 뭔데? → 어떻게 작동할지, 어떤 결과를 보여줄 지 등 과정 간의 관계(?)
Mental Models 멘탈 모델 (인지 지도) : 어떻게 작동할 지 생각할 수 있게 하는 것.
멘탈모델을 효과적으로 사용한 Ix는 “느끼는 feel" 시스템을 만들 수 있음
아 의자가 시원하겠구나 / 아 의자가 따뜻하겠구나 의 인지가 가능함
예시처럼 인터페이스를 이해하기 쉽고, 사용하기 쉽게 만드는 것이 중요함
만약, 잘못 인지하게 만드는 IxD는 혼란과 행동 오류를 야기함
•
Mappings | 프로세스의 다음을 알려주기
: 컨트롤과 결과와 기능의 관계를 연결하는 것
자동차 인터랙션 디자인 : 볼륨 기능과 현재 상태 작동 방법 등이 맵핑됨.
: 자연스러운 맵핑을 제공하는 방법 → 유추가능하고, 표준적으로 만들기
•
← 왼쪽으로가면 줄어들고, → 오른쪽으로 가면 늘어나도록
By Anton Kudin
•
Constraints | 제약 요건 만들기
: 제약을 둠으로서 더 효율적인 IxD제공하기
: 디자인 제약은 특정한 기능만 가능하게 하거나 보여줌
•
왜? → 사용자를 원하는 곳으로 안내하기 위해서!
•
어떻게? → 크기, 규모, 비율, 강조 및 상태를 고려하고 이들이 조화롭게 작동하여 계층 구조를 만들고 결과적으로 사용자에게 영향을 미치는 방법으로!
•
어떤 효과를 만들어? → 좋은 제약 조건을 가진 디자인은, 사용자의 오류 가능성을 줄일 수 있어!
•
Consistency, Standards, and Heuristics | 일관성, 기준 및 휴리스틱
: 일관성은 디자인에서 필연적임
•
왜? →
◦
사용자의 오류를 방지하고, 제품을 쉽게 배우게 하거든!
◦
UX, 일반 사용성 및 효율성을 향상시키거든!
•
일관성을 디자인은 어떤 모습을 보여? →
◦
이전에 사용하던 운영방식과 동일한 규칙을 가짐
e.g) 공유하기 아이콘,… (이전 경험을 토대로 쉽게 이해할 수 있는 인터페이스…)
•
일관성을 기반해서 좋은 사용성 가지려면 어떻게 해야 해?
◦
규칙, 표준, 모범 사례 및 사용성 휴리스틱에 기반해서 디자인하면 됨.
e.g) 왼쪽에서 오른쪽으로 이동하는 시선 흐름에 기반한 웹사이트 디자인, 탐색 메뉴 위치 설정…
•
Patterns and Learnability | 패턴 및 학습 가능성
: 새로운 인터페이스를 배우고 싶어하는 사람은 드물지만, 실험은 끊임없이 진행되어야 함.
•
어떻게? →
◦
이전에 배웠던 것을 패턴화해서 UI에 적용. (번역 틀린 것 같기도…8-8 ?)
e.g) 버튼, 텍스트 필드, 드롭다운 메뉴, 체크박스, 라디오 버튼, 스피너, 슬라이더, 아이콘, 아코디언, 검색 상자 등… (이전 경험을 토대로 발전한 UI…?)
•
Visual Hierarchy and Emphasis | 시각 계층 및 강조
: 시각 계층 구조로 정보의 중요도 및 우선 순위를 설정할 수 있음
•
어떻게? →
◦
요소 간의 크기, 근접성, 색상, 불투명도 및 실제 색조 대비를 통해서-!
•
Fitts’ Law | 피츠의 법칙
: "목표물을 획득하는 시간은 목표물까지의 거리와 크기의 함수”
•
쉽게 말해죠! → 목표가 얼마나 멀리 있고 얼마나 큰지, 다른 목표와 관련하여 얼마나 가까운지에 관한 것!!
◦
Scroll, Tab, Swipe 는 더 짧게 움직이는 것이 좋음
◦
A작업과 B작업이 동시에 이루어져야 하는 경우, 두개가 근접해 있는 게 좋음
▪
WHY? → 사용성과 효율성을 위해서-!!
Large buttons 누르기 쉽게 하고, 취소 버튼을 멀리 배치해서 실수를 최소화 함.
•
Gutenberg Diagram, Z- and F-Pattern Layouts
:
•
Gutenberg Diagram : 정보를 읽을 때의 시선 흐름 및 패턴
자세히
Gutenberg Diagram : 대부분의 정보는 읽힌다는 주장
•
Z-Pattern : Z 흐름으로 정보를 읽는 패턴
•
F-Pattern : 빠른 속도로 콘텐츠를 훑는 패턴
아이트래킹 (출처 : NNGroup)
•
Recognition Rather than Recall | 인식의 중요성
: 사용자는 정보를 받아들일 때, 친숙한 것으로 인식하곤 하는데,
•
이를 잘 활용하면? → 사용성이 향상됨
인식이 활용된 아이콘
•
아이콘과 인식은 무슨 관계일까? → 사람은 글보다 이미지를 1000배 더 빠르게 받아들이는데,
→ 이때! 아이콘이 정보를 인식하기 어려운 형태라면? → UI의 효율성, 사용성이 급감함
•
Aesthetic and Minimalist Design | 미적, 미니멀리즘 디자인
:
You have to deeply understand the essence of a product in order to be able to get rid of the parts that are not essential. —Jonathan Ive. (아멘. 믿어요. )
)•
지양해야 하는 디자인 : 모든 선택지를 다 넣고, 사용자가 원하는 대로 이동하게 하는 것 (^_ㅠ)
◦
그럼 어떻게 디자인해야 할까? →
사용자의 목표와 작업을 지원하지 않는 불필요한 요소와 콘텐츠를 제거해야 함
+ 사용자 흐름에서 화면 간 정보의 우선 순위를 지정해야 함
결론, → 사용자가 작업을 완료하는 데 필요한 필수적이고 절대적인 최소한의 정보만 표시해야 함.
Q. 어떤 게 더 정보를 인지하기 수월한가요? → A. 답정
미니멀 + 미학적으로 즐겁고 + 단순한 IxD를 위해선,
→ 사람들이 제품을 사용하는 순간에 정확히 무슨 일이 일어나고 있는지 이해하고 필요하지 않은 모든 것을 제거해야 함
◦
어떻게 사용하는지 이해하려면? → 사용자 심층 조사 및 테스트 수행으로-!
•
Error Prevention | 오류 방지
:
•
왜 오류를 방지해야 해? →
사용자가 제품 사용할 때, 100% 집중하는 게 아니거든. 그래서 무의식 중에 사용하더라도 오류를 방지할 수 있도록 해야 함.
•
어떻게 해야 해? →
더 나은 멘탈 모델을 설계하기 → 조금 더 구체적으로 알려죠! →
사용자가 오류를 범하는 경우는 보통, 설계된 디자인 시스템의 작동방식과 사용자의 멘탈 모델과 일치하지 않을 때이므로 → 더 사용자 관점에서 적합한 멘탈모델을 발굴해야 함
•
무엇보다 꼭 해야 하는 것은! →
◦
처음 부터 잘 설계하는 것 ^_^ → 근데, 이게 쉽지 않으니까- 계속 확인하면서 오류를 제거해 나가야 함
◦
오류가 발생하기 전, 한 번 더 경고하는 UX Flow도 중요함!
앞으로의 IxD는? →
새로운 제품, 환경 및 인터페이스의 발전으로, 새로운 상호작용의 과정이 필요할 것이라 예상됨
2D → 3D로 우리가 제품을 사용하는 터치 제스처 환경이 바뀐 것처럼…
(e.g iOS 및 Android 장치의 제스처)
하지만, 결국 기본적인 인터랙션 디자인 원칙에 기반할 것이기 때문에, UXUI 디자이너라면 오늘 나열된 것들을 계속 기억하는 것이 중요함.
왜? → 사용자가 제품을 사용할 때 어려움을 최소화하고 → 더 좋고 매력적인 제품을 사용할 수 있으니까!
나의 생각/관점
의미 전달 / 선택적 제약 / 일관성 / 행동 패턴 / 시각 계층 구조-강조 / 쉬운 인지 / 간결함 / 오류 최소화…
너무 기본적이고 당연한 내용인데, 다시 볼 때마다 반성하게 된다.
결국 디자인이 사용자와 상호작용하기 위해서는 더 쉽게 말하고, 더 이해하기 쉽게 보여주고, 더 상대를 잘 알아야 한다는 당연하지만 어렵고, 마음이 찔리는 아티클이었다. (에휴…)
용어•
heuristics (휴리스틱)
불충분한 시간이나 정보로 인하여 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않은 상황에서 사람들이 빠르게 사용할 수 있게 보다 용이하게 구성된 간편추론의 방법
(출처 : 위키백과)
•
Gutenberg Diagram
단어단어 | 뜻 | 예문 |
kaput | not working correctly | The radio's kaput. |
strive | 노력하다 (make great efforts to achieve or obtain something.) | we must strive
to secure steady growth |
inundate | 넘쳐나다
overwhelm (someone) with things or people to be dealt with. | we've been inundated with complaints from listeners |