가끔 웹 서핑을 하다 보면 우리는 '불편한 경험'을 하곤 한다.
예를 들어 온라인 쇼핑몰에서 장바구니에 물건이 담기지 않는다거나, 상품에 대한 정보를 자세히 알 수 없다거나, 재고가 없음에도 있다고 표시가 되는 등의 상황을 겪었다고 가정해보자.
많은 사람들은 이 '불편한 경험'으로 인해 더 이상 해당 웹 페이지를 방문하지 않을 것이다.
우리는 인터넷의 방대함과 신속한 처리 속도에 익숙해져 있기 때문에 웹 페이지를 사용하면서 조금의 불편함이라도 느낀다면 현실에서 느끼는 불편함보다 더 강렬하게 와 닿는다.
그렇다면 어떻게 해야 사용자가 '불편한 경험'을 하지 않을 수 있을까?
UI와 UX
좋은 웹 페이지를 디자인하기 위해서 우리는 사용자 인터페이스(UI)와 사용자 경험(UX)이 무엇인지 명확히 알 필요가 있다.
위키백과의 정의에 따르면 인터페이스란 "두 개의 시스템 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면"이라고 정의한다.
위 정의에 따르면 모니터, 키보드, 마우스같은 하드웨어도 인터페이스가 될 수 있고, 맥, 윈도우, 우분투 등의 운영체제(소프트웨어)들도 인터페이스에 포함될 수 있다. 또한, 컴퓨터와 사람 간의 상호작용인 사용자 인터페이스도 인터페이스의 울타리 안에 있다. 물론, 인터페이스의 정의에 따라 모두 맞는 말이다.
이는 지나치게 포괄적이니 사용자 인터페이스에 대해서만 알아보도록 하자.
사용자 인터페이스(UI)는 "사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템"으로, 사람이 컴퓨터를 손 쉽게 사용(상호작용)할 수 있게 하는 '다리'의 역할이라고 말할 수 있다. 여기에서 '다리'를 이용하는 행위, 즉 사용자가 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 사용자 경험(UX)이라고 한다.
예를 들어 우리가 퇴근 후 집에 가기 위해서 다리를 건너야 한다고 가정해보자.
그런데 만약 우리가 건너는 '다리'가 낡고 안전하지 않으면 어떨까?
다리를 건너는 것 자체가 너무나도 불안하고 불편하게 느껴질 것이며, 설령 다리를 건넜다고 해도 다시는 그 다리를 건너고 싶지 않을 것이다. 이처럼 유저 경험은 인터넷 사용자의 행동에 매우 큰 영향을 미치는 요소이기 때문에 우리는 사용자에게 최대한 편안한 사용 경험(UX)을 제공해야 하고, 그에 걸맞는 편의 기능을 가진 사용자 인터페이스(UI)를 제공해야 한다.
그렇다면 편안한 사용 경험과 그에 걸맞는 사용자 인터페이스는 어떻게 제공할 수 있을까?
UI 디자인 패턴과 UI 레이아웃
사람들은 좋은 UX를 제공하기 위해 오랜 기간 다양한 노력을 해 왔는데, 그 중 UI 디자인 패턴과 UI 레이아웃을 통해 디자인을 할 수 있다.
UI 디자인 패턴이란 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 디자인 패턴이다.
UI 디자인 패턴은 고유한 디자인적 특성과 기능을 통해 우리에게 이미 친숙하고 익숙한 사용자 경험을 줄 수 있다.
1. 모달(Modal)
모달 창은 기존에 이용하던 화면 위에 오버레이 되는 창으로 모달을 닫기 전에는 기존 화면과 상호작용할 수 없는 특징을 가지고 있다. 이는 팝업 창과 모달 창을 구분하는 개념으로, 팝업은 브라우저에 의해 사전에 차단될 수 있지만 모달 창은 브라우저 설정에 영향을 받지 않는다.
모달 창을 닫기 위해서는 닫기 버튼, 혹은 모달 범위 밖을 클릭해 닫는 것이 일반적이다.
2. 토글(Toggle)
토글은 2개 이상의 상태를 켜고 끌 때 사용하는 스위치 버튼으로, 사용자가 현재 상태를 알 수 있게 시각적 효과를 주는 것이 일반적이다.
보통 On/Off같이 두 개의 옵션이 있을 때 사용하지만, 여러 개의 옵션이 있을 때에도 토글을 사용할 수 있다. 단, 옵션의 개수가 너무 많다면 다른 UI 디자인 패턴을 사용하는 것을 고려해야 한다.
3. 탭(Tab)
토글 버튼에서 언급했듯 두 개 이상의 콘텐츠를 사용자에게 보여줄 때, 나아가 콘텐츠를 분리해서 보여주고 싶을 때 탭 UI를 고려할 수 있다.
단, 각 탭의 이름은 너무 길지 않고 탭의 구분이 명확해야 하며, 현재 어떤 탭을 보고 있는지 표시해 주어야 한다.
4. 자동완성(Autocomplete)
자동완성은 사용자가 내용을 입력 중일 때 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 UI 디자인 패턴으로, 사용자가 정보를 직접 입력하는 시간을 줄여주어 검색을 할 때 많이 사용된다.
자동 완성 항목은 너무 많은 항목이 나오지 않도록 제한하는 것이 좋다. 또한, 키보드 방향 키나 클릭 등으로 접근하여 사용할 수 있는 것이 좋다.
5. 드롭다운(Dropdown)
드롭다운은 선택할 수 있는 항목들을 숨겨놓았다가, 클릭이나 마우스를 올려놓는 등 다양한 방식을 통해 숨겨진 항목들을 펼쳐서 선택할 수 있게 해주는 UI 디자인 패턴이다.
이 때 중요한 것은 사용자가 현재 선택한 항목을 명확히 하는 것이다.
이 외에도 태그(Tag), 캐러셀(Carousel), GNB(Global Navigation Bar) 등 다양하고 친숙한 UI 디자인 패턴을 통해 보다 효율적인 웹 페이지 디자인 작업이 가능하다. 링크를 통해 더 다양한 디자인 패턴들을 확인할 수 있다.
또한, UI 레이아웃을 통해 질서 있는 구조의 UI를 구성할 수 있다.
UI 레이아웃에는 대표적으로 그리드 시스템(Grid System)이 있다. 그리드(Grid)란 수직, 수평으로 분할된 격자무늬를 뜻하는데, 그리드 시스템은 화면을 그리드(격자)로 나눈 다음 격자에 맞춰 콘텐츠를 배치하는 방법이다.
웹 디자인 분야에서는 화면을 세로로 영역을 나누는 컬럼 그리드 시스템(Column Grid System)을 사용한다.
컬럼 그리드 시스템엔 세 가지 개념 마진Margin, 컬럼Column, 거터Gutter를 사용한다.
Margin은 화면 양쪽의 여백, Column은 콘텐츠가 위치하게 될 세로 영역, Gutter는 Column 사이의 공간을 지칭한다.
컬럼의 개수는 임의로 나눌 수도 있지만, 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다. 또한, 기기마다 화면의 크기가 조금씩 다르고 브라우저의 크기를 사용자 마음대로 바꿀 수 있기 때문에 컬럼은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다.
좋은 UX를 만드는 요소
좋은 UX를 만들기 위해 우리는 많은 고민을 해 왔다. 이에 대한 해답으로 디자이너 피터 모빌(Peter Morville)은 7가지 요소를 통해 UX를 정의하고 평가할 수 있다고 설명했다.
1. 유용성(Useful)
서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있어야 한다. 냉장고라면 본연에 맞는 냉장 기능을 가지고 있어야 한다. 여기서 말하는 "서비스"란 실용적이지 않더라도 제품에 알맞는 디자인을 제공하는 심미적 '기능'까지 판단의 영역에 포함이 된다.
2. 사용성(Usable)
제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬워야 한다. 아무리 좋은 냉장고라도 손잡이가 없으면 사용자는 문을 열 수 없다. 좋은 기능 이전에 좋은 UX를 제공하는가를 판단해야 되기 때문에, 단순하면서 직관적이고 사용하기 쉬운 제품이나 서비스인지 판단하는 영역이다.
이 안에는 이후 언급할 UI 디자인 패턴도 연관이 있다.
3. 매력성(Desirable)
말 그대로 제품이 얼마나 사용자들에게 매력적인가를 판단하는 부분이다. 보기 좋은 디자인, 이미지, 브랜딩 등의 여러 요소들이 사용자에게 긍정적인 피드백을 불러일으킬 수 있는지를 통해 제품에 매력성이 있는지 없는지 판단할 수 있다. 냉장고를 통해 예를 들자면 "백색가전(생활가전)은 LG"라는 말이 있을 정도로 브랜드 이미지가 좋은 점을 예로 들 수 있다.
4. 신뢰성(Credible)
신뢰성은 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소다. 상품 가치를 과대포장하거나, 사용자의 개인 정보가 유출되는 등 사용자의 신뢰성을 떨어뜨리는 일이 없어야 하며, 장기적으로 유지되어야 한다.
5. 접근성(Accessible)
누구든지 제품이나 서비스에 접근하고 사용할 수 있는가를 판단하는 부분이다. 냉장고가 지나치게 커서 고연령자 소비자가 여는데 어려움이 있거나, 문 손잡이가 너무 높은 곳에 위치해 어린 아이가 열지 못한다면 좋은 UX라고 말할 수 없기 때문이다.
6. 검색 가능성(Findable)
제품은 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있어야 한다. 냉장고의 경우 물건들이 잘 수납되었을 때 한 눈에 파악하기 쉽게 분류할 수 있는지를 판단할 수 있다. UX는 제품뿐이 아닌 서비스도 모두 포함하기 때문에 제품을 판매하는 웹 사이트의 경우 사용자가 페이지와 제품 관련 정보에 쉽게 접근할 수 있는가 등을 판단해야 한다.
7. 가치성(Valuable)
가치성은 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가 판단한다.
제품의 가치판단기준은 사용자마다 다르기 때문에 모든 사용자를 만족하는 UX를 제공하기란 매우 어렵다. 아무리 좋은 기능들을 탑재한 냉장고라도 누군가에겐 사용성이 떨어지는 제품일 수 있기 때문이다.
따라서 가능한 모든 요소를 고르게 고려하는 것이 좋고, 제품 사용자들이 공통적으로 중요하게 생각하는 요소를 알고 있는 것이 중요하다.
냉장고에 관한 예시를 종합해보면 냉장고를 쓸 때의 UX를 위와 같이 표현할 수 있을 것이다.
생각해보면 이미 우리가 사용하는 제품들은 대부분 피터모빌의 7가지 요소를 만족하고 있다. 반면 이를 지키지 못하는 제품들도 있다. 이러한 제품들을 보았을 때 우리는 '안 좋은 경험'을 토대로 눈살을 찌푸릴 수밖에 없다.
그만큼 좋은 소비자 경험(UX)을 위해서는 기본적이지만 위의 요소들을 필연적으로 고려하고 지켜야 한다.
사용자 흐름 (User Flow)
사용자 흐름(User Flow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 행동을 예측해 불편한 소비자 경험을 예방할 수 있다. 보통 사용자 흐름 다이어그램(User Flow Diagarm)을 그려서 정리하며, 세 가지 요소를 통해 구성한다.
- 직사각형: 사용자가 보게 될 화면
- 다이아몬드: 사용자가 취하게 될 행동
- 화살표: 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표
예를 들어 위와 같은 간단한 쇼핑몰 페이지를 만들어 본다고 가정하자.
예시를 잘 살펴보자. 뭔가 어색한 부분이 있다.
곰곰히 생각해보니 상품 리스트 페이지나 상품 상세 페이지에서 기존 페이지로 돌아갈 수 없게 웹 페이지를 구성해 놓았다. 만약 위의 사용자 흐름을 믿고 웹 페이지를 구성한다면 우리는 불편한 UX를 제공하게 되는 것이다.
이처럼 우리는 사용자 흐름 다이어그램을 구성하면서 사용자가 취하게 될 행동을 예측하고, 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있다. 또한, 사용자 경험을 개선할 수 있는 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 삭제할 수도 있다.
정리하자면, User flow 다이어그램을 구성하면서 사용자 흐름을 보다 편리하고 빈틈없이 다듬어 나가는 과정을 거쳐 UX를 개선할 수 있다. 따라서 필수적인 과정은 아니지만, 좋은 UX를 제공하고 싶다면 기획 단계에서 사용자 흐름을 구성해보는 것이 좋다.
UI/UX 사용성 평가
지금까지 좋은 UX를 제공하기 위한 다양한 요소들을 고려해 웹 페이지를 구성했다면, 이제는 우리가 얼마나 웹 페이지를 잘 구성했는지 평가해야할 시간이다.
많이 사용되는 사용성 평가 기준 중 하나인 제이콥 닐슨의 10가지 사용성 평가(Jakob’s Ten Usability Heuristics)에 대해 알아보자.
1. 시스템 상태의 가시성 (Visibility of system status)
먼저 디자인이 사용자에게 합리적인 시간 내에 적절한 피드백, 즉 눈에 보이는 진행 상황에 대한 정보를 항상 제공하는지 확인한다. 세부적으로는 현재 진행 상황을 볼 수 있는 피드백이 존재하는지, 즉시 제공되고 있는지, 피드백이 명확한지 확인해야 한다.
대표적인 예시로 결제 과정, 파일 첨부 등의 과정 중 진행 상황을 알려주는 것이 이에 해당한다.
2. 시스템과 현실 세계의 일치 (Match between system and the real world)
디자인이 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용하고 있는지 확인하는 항목이다.
온라인 쇼핑몰에서 장바구니 아이콘 등이 이에 해당된다.
3. 사용자 제어 및 자유 (User control and freedom)
만약 사용자가 실수를 했다면, 실수로 수행한 작업을 취소할 수 있는 방법이 있는지 확인하는 항목으로, 현재 진행 중인 작업에서 벗어날 수 있는 방법을 제공해야 한다.
대표적으로 "실행취소"버튼이 이에 해당된다.
4. 일관성 및 표준 (Consistency and standards)
일관성 및 표준 항목에서는 외부 일관성과 내부 일관성을 잘 지키고 있는지 확인한다.
외부 일관성이란 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따르는 등 사용자에게 익숙한 UI를 제공하거나 잘 알려진 UI 디자인 패턴을 사용하는 것 등이 이에 해당된다.
내부 일관성이란 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성을 유지하는 것을 말한다. 버튼의 모양, 위치, 아이콘 크기 등이 일정할 때 내부 일관성을 지켰다고 볼 수 있다.
5. 오류 방지 (Error prevention)
말 그대로 오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지하는지 확인하는 항목이다.
앞선 3번 항목 사용자 제어 및 자유와 다른 항목으로, 사용자의 실수를 방지하는 것에 더 집중하고 있다.
대표적으로 앞으로 수행할 행동을 진행할지 한 번 더 확인하는 알림 창(Alert)이 이에 해당한다.
6. 기억보다는 직관 (Recognition rather than recall)
인터페이스를 이동할 때 기존 정보를 외울 필요없이 사용자가 기억해야 하는 정보를 최소화하고 있는지 확인하는 항목이다.
포르투갈의 수도가 어디인가요? 라는 질문은 사용자가 기억해내기 힘들 수 있는 반면, 리스본이 포르투갈의 수도인가요? 라는 질문에는 쉽게 대답할 수 있는 원리와 같다.
대표적으로 최근 검색 목록이 항목에 해당된다.
7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)
모두에게 개별 맞춤 기능을 제공하는지 확인하는 항목이다.
음식에 기호가 있듯, 사용자 경험도 상대적으로 평가되는 부분들이 있다. 따라서 사용자에게 필요한 UX를 제공하기 위해서는 개인의 기준에 맞는 유연하고 효율적인 설정이 가능해야 한다.
대표적으로 운영시스템(OS)에서 키보드 키 설정, 마우스 민감도 설정 등이 있다.
8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
과유불급이란 말이 있듯, 기능이 많다고 무조건 좋은 것은 아니다.
사용자 기능을 평가하고 개선하기 위해선 현재 제품(또는 웹사이트)의 디자인이 사용자에게 불필요한 정보와 기능을 제공하고 있지는 않은지 확인이 필요하다. 클라이언트를 구성할 때 콘텐츠와 기능의 우선순위를 정하고 우선순위가 높은 정보와 기능을 효과적으로 전달해 미학적이고 미니멀한 디자인을 추구하는 것이 좋다.
9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고, 해결 방법을 제안하고 있는지 확인하는 항목이다.
회원 가입을 진행할 때 올바르지 못한 이메일을 입력했다는 경고 창 등이 이에 해당된다.
10. 도움말 및 설명 문서 (Help and documentation)
시스템적으로 추가적인 설명이 필요 없는 것이 가장 바람직하지만, 사용자에게 상황에 따라 기능을 수행하기 위한 도움말(또는 문서)를 제공하는 것도 UX 개선에 도움이 된다.
숙박 공유 서비스 에어비앤비에서는 해당 항목을 만족하는 사용자에게 도움이 될 수 있는 지표(가이드)를 제시하고 있다. 단, 제공되는 추가적인 도움말은 특정 '상황'(에어비앤비의 경우 여행지를 검색할 때)에서만 보이는 것이 좋다.
좋은 UI, UX
미국의 기업 세이퍼테크(SaferTech)의 연구 결과에 따르면 관성어 금붕어의 평균 집중 시간이 9초인데 반해, 인간은 평균적으로 8초 정도 집중을 한다고 밝혔다.
즉, 우리는 무엇을 보고 있던 8초 이내에 흥미를 느끼지 못하면 언제든지 새로운 것을 찾아 떠날 수 있다는 소리다.
앞서 언급한 '불쾌한 경험'은 곧 '흥미의 유실'로 이어질 수 있다. 흥미롭지 못하면 아무리 훌륭한 기능을 제공해도 사용자에게는 와 닿지 못할 수 있다는 얘기이다.
따라서 우리 개발자들은 소비자에게 좋은 사용자 경험을 주기 위해 항상 최선을 다할 필요가 있다.
이 점을 유의하고 잘 지키기 위해 사용자를 고려한 디자인, 계획적이고 실용적인 설계, 지속적인 사용성 평가를 꼭 유념하도록 하자.
참조
- TechWellness: Device Distraction
- 위키백과: 인터페이스
- Codepen: 모달 창, 토글 버튼, 탭, 드롭다운, 진행 과정, 알림 창, 검색 창
- Airbnb
'Front-End > 웹 (Web)' 카테고리의 다른 글
| React(SPA)에서 Next.js(SSR)를 써야하는 이유 (0) | 2023.07.21 |
|---|---|
| [Web] 웹 표준과 접근성 (0) | 2022.11.20 |
| [HTTP/네트워크] REST API (0) | 2022.11.05 |
| [HTTP/네트워크] HTTP와 브라우저 작동 원리 (0) | 2022.10.19 |
| [HTTP/네트워크] 웹 애플리케이션 구조 (0) | 2022.10.17 |
댓글