'이상하게 쓰기 편해' 학습 용이성 고려한 웹 UI 만들기

바퀴를 다시 발명하지 않는다 지난 20년 동안 발표된 학습 용이성에 관한 연구와 성공 사례를 보면, 고유의 규칙과 개념을 새로 고안할 필요가 없음을 알 수 있다. 사용자가 이미 잘 알고 있고, 제 기능을 발휘하는 디자인 패턴이 이미 존재한다는 것이다. 따라서 통상 요소나 기능을 재검토하는 것은 좋지 않다. 사용자는 친숙한 인터페이스를 선호하기 때문이다. 새 아이디어를 고안하는 대신 많은 사람이 편안하게 받아들이는 것을 활용하라.

막대 3개를 겹쳐 놓은 '햄버거' 아이콘을 이용한다 앞서 설명한 내용과 관련된 최근 사례 중 하나가 바로 '햄버거(hamburger)' 아이콘이다. 통상 모바일 기기에서 탐색 메뉴를 감추기 위해 사용한다. 사용자가 아이콘을 탭하면 탐색 메뉴 항목이 표시된다. 이 햄버거 아이콘은 '숨겨진 메뉴'의 동의어나 다름없다. A/B 테스트 결과를 보면, 대부분 모바일 사용자가 햄버거 아이콘의 의미를 알고 있다.

많이 쓰는 아이콘을 재사용한다 이에 대해 반대하는 사람들이 많다. 어느 정도 근거도 있지만 여전히 많은 모바일 앱과 반응형 웹사이트가 많은 사용하는 아이콘을 재사용한다. 이유는 단순하다. '아이콘의 기능을 이미 학습한 사람이 많다'는 것이다. 기존의 학습된 인식을 바꾸려 시도하다가 자칫 큰 저항에 부딪힐 수 있다. 학습 용이성이 목적이라면 단순성을 위해 많이 사용하는 흔한 아이콘을 재사용하는 것이 좋다.

자연스러운 페이지 흐름을 활용한다 자연스러운 페이지 흐름(Natural page flow)은 사용자가 이미 알고 있는 것을 이용하는 또 다른 방법이다. 기존 웹사이트 디자인에는 여러 가정이 적용돼 있다. 예를 들어 탐색 메뉴는 통상 페이지 최상단이나 그 근처에 있다. 양식에는 기능을 설명하는 라벨이 붙어있고 필드에는 사용자가 제공해야 하는 정보를 설명하는 플레이스홀더 텍스트가 있다. 이러한 자연스러운 페이지 흐름은 수십 년 인터넷 역사를 통해 축적된 사용자의 예상이 반영돼 있다. 이런 UI 패턴을 학습하는 가장 좋은 방법은 다른 웹사이트를 조사하는 것이다. 특히 가장 복잡한 기능을 눈여겨 봐야 한다. 직관적인가? 효과적으로 기능하는가? 자세히 조사해 보면 학습할 수 있는 인터페이스 구현 기법을 찾아 이를 자신의 사이트에서 모방할 수 있을 것이다.

인터랙티브한 양식을 구현한다 대부분 웹사이트에는 계약과 약관, 뉴스레터 가입, 전자상거래 결제 등의 내용과 기능이 포함돼 있다. 이때 레이아웃에 부합하도록 예쁘게 양식을 디자인해야 하고, 또 인터랙티브한 방식으로 디자인해야 한다. 어떤 화면 크기의 기기에서도 쉽게 읽을 수 있도록 입력 필드와 텍스트 사이에 충분한 여백을 둬야 한다는 의미이다.

양식 전환율에 주의한다 양식 전환율(form conversion rate)이란 양식을 작성한 총사용자 수이다. 양식의 꼬리표가 명확하다면, 사용자가 쉽게 이해하고 양식을 작성할 수 있다. 성패는 각 양식의 요구사항에 따라 크게 달라진다. 예를 들어, 프로필 정보 입력 양식 작성은 로그인보다 더 많은 시간이 소요된다. 양식은 요구사항에 따라 길이와 복잡성이 크게 다르다. 즉 '정답'은 없다.

진행 상태를 알려주는 브레드크럼(Breadcrumbs)을 추가한다 목적을 염두에 두고 프로세스를 간소화하면 시간을 줄이는 데 큰 도움이 된다. 가능한 입력 필드를 줄여, 사용자가 다음 단계로 이동하도록 만들어야 한다. 크기가 큰 양식에는 진행 상태를 알려주는 브레드크럼을 추가하는 것도 좋다. 이는 사용자를 안내하고 양식 작성을 완료하기까지 얼마나 남았는지 알려준다. 이는 학습 용이성에 도움을 준다. 사용자가 다음 단계에서 보게 될 내용을 예상할 수 있기 때문이다.

양식의 목적을 명확히 한다 양식 이용 방법을 모르는 사람은 없다. 그러나 콘텐츠와 디자인이 혼동될 수는 있다. 꼬리표와 설명을 이용해 사용자에게 양식 작성 이유와 필요한 정보를 알려주는 등 그 목적을 명확히 해야 한다. 양식의 꼬리표가 적절해야 사용자가 빨리 학습하고, 다음 단계로 이동할 수 있다.

UI 피드백을 제공한다 사용자가 실수할 때(또는 해야 할 일을 제대로 할 때) 화면으로 이를 알려주는 것이 좋다. 이는 UI 학습 용이성을 구현하는 데 매우 중요한 부분이다. 현재 웹사이트를 사용하는 사람 옆에 이용 방법을 알려 줄 사람이 없는 경우가 대부분이기 때문이다. 따라서 앵커 링크와 버튼에 ':active' 가짜 클래스(Pseudo class)를 이용해서 커서가 위에 위치하거나 클릭할 때, 관련 요소(Element)가 재배치 되도록 만드는 것이 좋다. 즉 '클릭해야 하는 요소입니다'라고 적극적으로 알려주는 것이다. 이는 사용자가 다른 요소도 자신감을 갖고 이용하도록 만들어준다.

사용자에게 잘못된 것과 그 해결책을 알려준다 사용자가 정보를 잘못 입력했을 때 이를 알려주고 해결책을 제시해야 한다. 가능한 모든 것을 사전에 제시 또는 제공한다. UI 응답 메시지를 추측하도록 만들어서는 안 된다. 예를 들어 메일침프(MailChimp)의 경우 로그인 페이지에서 오류(위 화면)가 발생하면 사용자에게 로그인이 실패한 이유를 알려주고(여기선 잘못된 사용자명), 이를 해결할 수 있는 방법(사용자명을 확인하는 링크)을 제공한다.

더 쉽게 학습할 수 있도록 '온-스크린' 프롬프트를 이용한다 메일침프는 각 키스트로크 이후 필수 문자를 자동 업데이트하는 라이브 비밀번호 필드를 갖고 있다. 이런 식으로 사용자 동작에 반응하면 학습에 도움을 줄 수 있다. 사람은 행위와 결과를 통해 배운다. 온-스크린 프롬프트는 학습 인터페이스를 훨씬 쉽게 만들어준다. 이런 '디테일'은 사용자와의 신뢰 구축에도 큰 도움이 된다.

가장 중요한 것은 일관성이다 인터넷 마케팅 분야에서는 '콘텐츠가 왕'이라는 말을 자주 하곤 한다. 마찬가지로 학습 용이성 측면에서는 '일관성이 왕'이다. 예측이 가능한 인터페이스가 일관된 인터페이스이다. 이런 예측성은 학습할 수 있는 패턴으로 이어진다. 웹사이트의 여러 페이지에 사이드바를 무작위로 배치했다고 가정하자. 이는 사이드바 링크를 이용하는 사용자에게 혼동을 초래한다. 탭 위젯에서 텍스트블록 사이의 공간에 이르기까지 모든 요소에 이 원칙을 적용해야 한다.

친숙한 레이아웃은 연결성(relatability)을 높인다 연결성은 사용자가 어떤 작업에 대한 확신을 갖도록 도와준다. 방문자가 링크나 버튼을 클릭했을 때 발생하는 동작을 예측할 수 있는 인터페이스가 이용 편의성이 높은 인터페이스이다. 사용자는 시간이 지나면서 자신의 예측이 맞다는 더 큰 확신을 갖게 된다. 그리고 이렇게 학습한 행동으로 웹사이트를 탐색한다.

워드프레스(WordPress)의 일관성을 참조한다 여러 버전에서 일관성을 유지하는 것도 중요하다. 색상, 크기, 공간 등을 조금 조정하는 것은 사용자에게 큰 혼란을 초래하지 않는다. 그러나 많이 바꾸면 낯설게 느끼고 이용 속도가 늦어진다. 대표적인 좋은 사례가 워드프레스다. 워드프레스 대시보드의 인터페이스는 버전 2.7 이후 계속 유사한 모양을 하고 있다. 덕분에 워드프레스를 계속 사용해 왔다면 관리자 패널의 기능을 다시 공부할 필요가 없다. 한 번만 학습하면 된다. 업데이트 이후에도 바뀌지 않기 때문이다. 이는 학습 용이성을 위한 디자인의 기본 원칙 중 하나이다. 친숙함을 유지하는 인터페이스를 구현해야 한다. 소셜 네트워크와 정적인 콘텐츠 사이트 모두에 적용되는 원칙이다. 학습 가능한 인터페이스를 디자인할 때 가장 중요한 것은 일관성이다.

'패턴 인식(Pattern Recognition)'을 믿는다 지금까지 소개한 팁은 모든 웹사이트의 모든 인터페이스에 적용할 수 있는 팁이다. 학습 용이성은 '상식'이다. 이는 학습 가능한 인터페이스에서 아주 중요한 요소 중 하나이기도 하다. 너무 간단하다. 상식을 제대로 이용하기만 하면 된다. 학습 용이성 기법은 모든 사이트에서 유용하다. 학습 용이성을 이해하는 가장 좋은 방법 중 하나는 '패턴 인식'이다. 우수한 웹사이트를 자주 방문하고 효과가 있는 부분과 없는 부분을 눈 여겨 본다. 이후 자신의 프로젝트에 적용해본다. 반복을 통해 효과적으로 기능하고 사용자의 학습에도 도움을 되는 인터페이스를 설계할 수 있다. ciokr@idg.co.kr