UX는 경험, UI는 그 경험을 제공하기 위한 수단이기 때문

예전부터 UI/UX라는 단어 자체는 알고 있었다.
코드스테이츠도 애초에 프론트랑 UI/UX 1기를 같이 붙었었는데
무슨 전생 같네... 고작 두 달 전인데

UI

user interface
interface는 장소, 방법이라는 단어다.
그렇다면 클릭하고 터치하는 접점도 인터페이스,
디바이스와의 소통 방법(double-tap, button)도 인터페이스다.
그럼 결국 사용자가 서비스를 사용할 때 마주하는 디자인이라는 건데.

폰트, 컬러, 간격, 레이아웃, 애니메이션 효과 등이 다 UI인 거구나.
사용자 경험을 제공하기 위한 수단이라는 말이 맞다.

UX

user experience
서비스를 사용하는 사용자가 겪는 다양한 경험, 감정이다.
사용자가 편리하도록 UI를 디자인해서,
더 나은 사용자 경험을 제공하는 것이라는 의미라고 한다.

근데 UX라는 단어가 유저 경험과 사용성을 뜻하는 게 웃기다.
개인적으로 사용성이 고려되지 않은 약어라고 생각함...
헷갈려하는 사람은 당연히 많고
블로그 읽다 보면 틀린 개념으로 이해한 사람도 적지 않음
있어보이기 위해서 지은 단어 같다... 이미 고착됐으니 어쩔 수 없다만

아무튼?

그래서 왜 고려해야 하는가?

복잡한 웹은 사용자가 느끼기에 복잡하고 불편할 수 있기 때문.
프론트엔드는 성능을 최적화해 사용성을 개선한다.

서비스와 사용자간 커뮤니케이션을 최우선으로 고려해야 한다.
학습된 기존 경험과 암묵적으로 약속된 아이콘과 위치 등을 사용할 것.

UX rules

제이콥의 법칙

개념

사용자는 새로운 경험을 이해하기 위해 기존 경험을 활용한다.

사례

• 장바구니 위치: 우측 상단
• 사이트 로고: 홈
• 돋보기: 검색

피츠의 법칙

개념

터치 대상의 크기는
사용자가 정확하게 선택할 수 있도록 충분히 커야 하며,
터치 대상 사이에 충분한 거리를 확보해야 한다.

크기가 작으면 문제없이 선택했을 때조차
사용성이 떨어진다는 인상을 줌

회사 / 조직	권장 규격
Human Interface Guideline (Apple)	44 * 44 pt
Material Design Guideline (Google)	48* 48 dp
웹 콘텐츠 접근성 가이드라인 (WCAG)	44 * 44 css px

사례

input + label

label 영역을 클릭해도 입력이 가능하게.
클릭 영역을 확대시켜 조준 정확도가 떨어져도
사용자는 입력에 집중할 수 있다.

힉의 법칙

개념

의사 결정에 걸리는 시간은
선택지의 개수와 복잡성에 비례해 늘어난다.

의사 결정 시간이 반응 시간에 큰 영향을 받을 때는
선택지의 개수를 최소화할 것.

피크엔드 법칙

개념

인간은 경험 전체의 평균이나 합계가 아니라,
절정의 순간과 마지막 순간에 느낀 감정을 바탕으로
경험을 판단하는 경향이 있다.

따라서 사용자 여정 중
절정의 순간과 마지막 순간을 세심하게 신경쓸 것.

• 서비스가 사용자에게 가장 도움을 주는 순간
• 가장 중요하게 여겨지는 순간
• 가장 큰 즐거움을 주는 순간
  

사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다.

사례

404 페이지 - 부정적인 절정
: 약간의 유머를 활용해 오히려 즐거운 경험으로 바꿀 것.

폰 레스토프 효과

개념

비슷한 사물이 여러개 있으면
그중 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
→ 중요한 정보나 핵심 동작은 시각적으로 강조할 것

단, 특정 요소를 강조할 때 색상에만 의존하면
색맹이나 저시력 사용자가 배제될 수 있음.
안 하느니만 못한 경험은 도움이 되지 않음. 대비를 확실히 줄 것.

사례

버튼 색상 차이, 구독 요금제 중 추천 요금제 표시 등

도허티 임계

개념

시스템의 반응 속도는 전체 사용자 경험을 좌우하는 중요한 요소다.
처리 시간이 도허티 임계 규정 시간(0.4s)보다
오래 걸려도 개선할 방법이 없을 때

필요한 프로세싱이 수행되는 동안
사용자에게 처리 시간에 대한 시각적 피드백
-> 대기시간에 관대해지고, 웹이 더 빠르게 작동한다고 느낀다.

사례

Skeleton screen

뼈대 화면이
텍스트, 이미지가 로딩되며 차츰 채워지면
상대적으로 느려도
사용자는 기다리는 느낌을 덜 받아
속도와 반응성이 실제보다 더 낫다고 판단

Blur-up img

이미지는 웹 로딩 시간을 지나치게 증가시킨다.
이미지를 사전에 블러 처리해 로딩이 완료되었을 때
실제 이미지가 표시되도록 한다.

빠른 로딩을 보장하고,
콘텐츠가 먼저 표시되어 기다리는 느낌 감소

Progress Bar

작업 처리에 따른 대기 시간 회피가 불가피하다면,
시각적 피드백을 제공할 것

진행 표시줄 애니메이션에 관심이 집중되어
기다린다는 느낌을 줄여 준다.

요청한 작업이 처리되고 있다는 사실을 분명히 할 수 있음.

사용자 기대보다 반응이 너무 빠를 경우
변화가 너무 빨리 일어나면 사용자가 눈치채지 못할 수 있다.
보안 점검의 경우 오히려 신뢰도가 떨어질 수 있으므로
의도적으로 완료를 늦게 노티하는 등 적절한 조절도 굿.

그래서 왜 UI/UX?

UI UX 관계성

다시 한번,
UX는 경험, UI는 경험을 제공하기 위한 수단이다.

차이

UI: 인간 공학에서 다루는 인지적인 파트
UX: 그 결과로 생기는 감성적인, 감정적인 파트

보기 좋다와 쓰기 좋다는 게 접목되고 있다.

애초에 인간은 아름다운 것을 보게 되면 기분이 좋아짐.
기분이 좋다는 건 Positive emotion 상태이고,
그럼 Depth-first thinking보다 Width-first thinking을 한다.

폭 넓게 생각하고, 여유로워지고, 관대해진다.
예상치 않은 난관에 봉착했을 때
빠져나가는 방법을 찾기가 더 쉬워지기 때문에
사용성 평가도는 자연히 높아진다.

사례

유리병 케첩통의 UX 개선점을 고려한 게
플라스틱, 튜브형 케첩통이라는 예시를 봤다.

근데... 고급화가 목적인 프로젝트라면 유리병 패키지가 맞지 않나?
무조건 편한 것만… 좋은 UX인 것인가??
misson과 vision을 고려하지 않은 디자인은
결국 양산형이 되는 게 아닌가…
라는 질문만 남기고 UI/UX 블로깅 마무리합니다.