프론트엔드에서의 UI/UX

UI/UX란?

UI (User Interface)

디자인

• 사용자가 서비스를 사용할 때 마주하는 디자인
• 눈에 보이는 디자인적 요소!
• ex) 폰트, 컬러, 간격, 레이아웃, 애니메이션 등

 

UX (User Experience)

경험

• 서비스를 사용하는 사용자가 겪는 다양한 경험(감정)

목적

• 사용자가 편리하도록 UI를 디자인해서 더 나은 사용자 경험을 제공하기 위함

 

UI 디자인을 통해 만들어진 서비스를 사용하면서 느끼는 감정, 경험을 UX라고 할 수 있다!

 

하인즈 케첩 예시

• 유리병(UI) 으로 만들어져있었던 때에 아래에 남아있는 케첩을 사용하기 어려움(불편한 UX)
• 플라스틱으로 바꾸어서(UI 개선) 남아있는 케첩을 사용하기 편하게 됨(UX 개선)

 

UI/UX 의 심리학 법칙

제이콥의 법칙

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

 

사례 : 장바구니 위치

• 새로운 쇼핑몰에 들어갔을 때 장바구니를 찾는 것은 어렵지 않다. 왜냐하면 보통 오른쪽 상단에 장바구니가 위치해있기 때문이다.
• 새로운 서비스를 사용할 때 이전에 사용했던 서비스의 경험(오른쪽 상단에 장바구니 버튼이 있었던 경험)을 사용하기 때문에, 비슷한 서비스의 레이아웃을 따라간다면 좀 더 편리하게 다가갈 수 있다!

 

피츠의 법칙

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

 

사례 : input + label

• 레이블 영역을 클릭해도 입력할 수 있도록 해서 사용자가 입력에 집중할 수 있도록 함!

 

힉의 법칙

• 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.
• 의사 결정 시간이 반응 시간에 큰 영향을 받을 때는 선택지의 개수를 최소화하자!

 

사례 1 : 어르신 리모콘

• TV가 다양한 기능을 제공하게 되면서 리모콘의 버튼 또한 많아지고 복잡해지게 되었다.
• 사용하지 않는 버튼은 가리고 주로 사용하는 버튼만을 노출시켜서 복잡성을 낮춘 사례

 

사례 2 : 스마트TV 리모콘

• 요즘 스마트 리모콘은 꼭 필요한 버튼만으로 구성되어있다.
• 선택지가 적을 수록 사용성이 더 좋음!

 

피크엔드 법칙

• 끝이 좋아야 다 좋다.
• 사람들은 경험 전체의 평균이나 합계가 아니라 절정의 순간(peak)과 마지막 순간(end)에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다는 것
• 중요한 순간에 각별한 주의를 기울여 사용자가 전체 경험을 긍정적으로 평가하도록 하자는 것이다!

 

사례 : 부정적인 절정(404페이지)

• 404 페이지에 애니메이션이나 약간의 유머를 넣음으로써 오히려 즐거운 경험으로 바꾸는 사례'

 

폰 레스토프 효과

• 비슷한 사물이 여러개 있으면 그 중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
• 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 해야 한다.

 

사례 1 : 인터랙티브 요소 디자인

• 중요 버튼에 색을 입힘으로써 시각적으로 차별화
• 사용자의 실수를 막고 다음 동작에 대한 정보를 제공

 

사례 2 : 요금제

• 강조하려는 항목을 다른 항목들과 다르게 표현함으로써 차별화

 

사례 3 : 알림 뱃지

• 사용자가 확인해야 하는 항목에 대해 강조함과 동시에 정보 제공

 

도허티 임계

• 시스템의 반응 속도는 전체 사용자 경험을 좌우하는 중요한 요소이다.
• 도허티 임계가 규정한 시간(0.4초)보다 많이 걸려도 개선할 방법이 없을 때는 사용자에게 처리 시간에 관한 시각적인 피드백을 주는 것이 좋다.

 

사례 1 : 스켈레톤 스크린(뼈대 화면)

• 그냥 하얀 화면에서 모든 요소들이 렌더링되는 것보다 뼈대 화면이 먼저 나타나고 이후에 요소들이 렌더링 되는 것이 속도와 반응성이 더 낫다고 인지한다.

 

사례 2 : 블러업 이미지

• 텍스트와 같은 다른 요소들과 로딩이 오래 걸리는 이미지를 블러 처리하여 먼저 보여주고, 표시할 이미지 로딩이 완료되면 실제 이미지를 표시 -> 빠른 로딩 보장

 

사례 3 : 프로그레스바

• 시각적 피드백 제공
• 진행 표시줄 애니메이션에 관심이 집중되어 기다린다는 느낌을 줄여준다.
• 요청한 작업이 처리되고 있다는 사실을 분명히 알 수 있다.

---

참고자료

• 우아한테크 10분 테코톡, 위니의 프론트엔드 개발자에게 UX란
• Insight of Wave
• 피크엔드 법칙
• 폰 레스토프 효과
• 도허티 임계와 UX 디자인