UI 디자인을 위한 UX 원칙 10가지
UXUI 디자인은 선택의 연속이다.
왜 그러한 디자인 시안들이 나왔는지 디자이너로서 선택한 시안은 무엇인지 설명할 수 있어야 한다.
효율적인 선택, 효율적인 의사결정을 위해서는 팀원들과 합의한 'UX 원칙'이 필요하다.
UX 디자인은, UX 원칙의 핵심은 사용자에 대한 '배려'다.
01. 우리는 사용자가 아니다
본인의 경험과 취향을 바탕으로 한 생각이 스스로에게 '아주' 강한 설득력을 갖고 있기 때문에
'스스로 사용자라고 생각하는 것'은 위험하다.
사용자의 입장을 객관적으로 살펴볼 수 있는 것은 '데이터 관찰'이다.
데이터 기반 UXUI 디자인은 시대의 트렌드가 아니다. 좋은 디자인 경험을 주기 위함이다.
02. 각 화면에서 한 가지 행동에만 집중하게 한다
사용자가 UI를 쓰면서 망설이거나 혼란스러워하는 상황이 발생하면 안 된다.
사용자가 UI를 쓰기 위해 학습해야 하는 일이 있어서는 안 된다.
높은 사용 전환율은 사용자들이 끊임없이 매끄럽게 앱을 이용했다는 확실한 증거다.
03. 반응을 보여줘야 한다
UI가 사람의 행동에 반응이 없다면, 사용자가 건넨 말을 무시하는 것과 다르지 않다.
1) 로딩
[방법1] 버튼을 누른 화면을 어둡게 만들고 로딩 애니메이션
[방법2] 버튼 위에서 로딩 애니메이션 보여주기
[방법3] 다음 화면으로 일단 넘어간 뒤 로딩 애니메이션 보여주기 (가장 선호)
⇢ 실제 성능보다 빠르다는 인식을 줄 수 있게 됨
성능을 끌어올릴 수 있는 방법이나 트릭들을 개발자와 함께 구상하는 게 중요하다.
2) 토스트 메시지
사용자가 앱 내에서 어떤 일을 완수했을 때 반응을 보여주기에 적합한 아이템
[주의]
・토스트 메시지를 사용자가 버튼을 눌러야만 꺼지는 팝업을 써서는 안 된다.
・가볍게 인식시키는 것으로 충분하다.
・'확인'버튼을 눌러야만 하는 팝업은 사용자가 반드시 확인해야 하는 정보에만 사용하기
3) 마이크로 인터렉션(= 헬퍼 텍스트, 디자인의 꽃)
정의: 사용자에게 섬세하게 반응하여 사용자가 도달하는 목표까지 매끄럽게 가도록 돕는 디자인
회원가입&로그인 화면에서 플레이스 홀더에 입력할 때를 유의하기
04. 맥락 있는 흐름을 만든다 (ex 광고 활용)
좋은 UX/UI 디자인에는 '맥락'이 있다.
사용자가 UI를 이용하면서 뜬금없다고 느끼는 상황이 없다는 뜻이다.
05. 시각적 일관성을 유지한다
사용자가 무의식적으로 앱을 신뢰하게 만들어야 한다.
시각적으로 디자인에 일관성이 있어야 안정감을 준다.
고객에게 전달하고자 하는 명확한 핵심 가치 챙기기 ⇢ 그래픽 모티프 디자인
그래픽 모티브 디자인이란,
특정한 형태, 패턴, 상징, 아이콘, 일러스트 등을 중심으로 시각적 정체성을 만들어내는 디자인 기법.
모티브(Motive): 브랜드의 핵심 메시지, 정체성, 감성을 시각적으로 전달하는 도구.
브랜드 로고나 아이콘 등 시각적인 요소는 핵심가치가 명확해질수록 자연스럽게 만들어갈 수 있는 부분.
디자인 시스템 구축의 장점 2가지
1. 효율적인 개발 ⇢ 디자인 요소들을 코드로 정리해야 함 (ex 색, 타이포그래피, 공통적으로 쓰이는 것)
2. 시각적 일관성
06. 예상할 수 있어야 한다
"불필요한 행동을 사전에 차단하려고 한 행동이 사용자를 불편하게 하진 않았는가?"
'사용자가 기대하는 화면은 무엇이었을까?'에 대한 고민하기
같은 속성은 같은 색과 모양을 가져야 한다.
07. 의미 있는 움직임만 보여준다
움직임(Motion)은 '사용자의 눈길'을 끈다.
움직이는 UI 디자인은 선택이 아닌 '필수'가 되었다.
그러나, 요소마다 들어가는 모션들이 '좋은 사용자 경험을 제공하고 있는가?' 에 대한 고민하기
모션 자체가 목적이 되어서는 안 된다.
08. 누구나 이해하기 쉬운 글을 제공한다
독자가 이해할 수 없는 글에는 독자가 없다.
독자를 배려하지 않은 글은 읽지 않는다.
삭제처럼 되돌릴 수 없는 행동의 경우, 팝업을 띄워 한 번 더 확인시켜 주기09. 사용자의 익숙함을 존중한다
대부분의 사용자들은 익숙한 것을 좋아한다.
규모가 큰 서비스일수록 UX/UI 디자인을 바꾸는 건 경계해야 한다.
사용자가 적을 때 앱을 잘 설계해두어야 한다.
사용자가 많아지면 기존 앱에 익숙해진 사용자들을 위해 급격한 변화를 주는 것은 지양하는 것이 좋다.
사용자의 익숙함을 존중하고, 새로운 위치를 자연스럽게 익힐 수 있도록 디자인하기
변화가 발생하였을 때, 앱에 익숙해진 사용자들을 위해 일정 기간 안내하기
업데이트된 구글 지도10. 필요한 만큼만 단순하게 디자인한다
어떻게 하면 필요한 요소만 남길 수 있을지 고민하기
필요한 만큼만 단순하게 한 디자인은 전달하고자 하는 서비스가 '가치'에 집중한다는 이야기다.
해당 화면의 핵심 가치를 명확히 인식시키기
ex) 검색 화면 ⇢ 검색자체 or 화면 내에 존재하는 구체적인 핵심 기능에 집중할 수 있도록 구성하기
ex) 하단 네비게이션 바 구성 변경하기
