★ 솔직리뷰 ~ 여행 맛집 전시 공연

     4) 가로보기, 세로보기

     중앙일보의 경우 세로화면에서 가로화면으로 전환시, 별도의 추가적인 UI에는 변화가 없다. 이 경우 이용자의 입장에서는 각각의 화면 UI에 대하여 별도의 추가 학습 없이 이용이 가능하다. 

     다만 이 경우에는 이미지의 해상도가 큰 사이즈에 맞도록 제작되어야 하며, 때로는 두벌의 이미지를 지원한다.
     테블릿 PC의 경우에는 통상적으로 가로보기와 세로보기를 동시에 지원한다. 이 경우 동일한 서비스에서도 단순히 폭(width)을 조절하여 지원하기도 하지만 아래와 같이 가로-세로별 작은 UI의 변화를 준다.



 .













    중앙일보의 경우 세로화면에서 가로화면으로 전환시, 별도의 추가적인 UI에는 변화가 없다. 이 경우 이용자의 입장에서는 각각의 화면 UI에 대하여 별도의 추가 학습 없이 이용이 가능하다.

     다만 이 경우에는 이미지의 해상도가 큰 사이즈에 맞도록 제작되어야 하며, 때로는 두벌의 이미지를 지원한다.





 














     야후 꾸러기 서비스의 경우 가로-세로 전환시 한줄에 노출되는 콘텐츠의 개수에 변화를 주는 방식을 택하였다. 세로의 경우 한줄에 4개, 가로의 경우 5개를 적용하였는데, 이 경우 각각의 콘텐츠별 여러개의 아이콘(작은사이즈, 큰 사이즈)을 디자인해야 하는 부담이 없으며, 추후 다른 사이즈의 기기가 출시되어도 대응이 용이하다.
























     이번 예시는 오프라인 잡지를 온라인으로 전환한 경우이다. 추가적인 변환 없이 인쇄물의 레이아웃을 그데로 사용한 경우이며, 이 경우 세로의 경우에는 한 페이지를 가로의 경우에는 잡지를 펼쳐보듯 양면구성을 취하고 있다.






     5) 센서를 활용환 인터렉티비티 향상

     최근 출시된 테블릿 PC에는 중력센서가 탑제되어 디바이스의 XYZ축의 기울기를 측정할 수 있다.동화책 ‘이상한 나라의 엘리스’의 경우 디바이스의 기울기를 이용하여 아래와 같이 동적인 구성을 취하기도 한다.

개요

IP-TV는 최근 각광받기 시작한 서비스로 초고속 인터넷 망을 기반으로 셋탑박스를 이용하여 TV를 통해 동영상은 물론 게임, 검색 등의 부가서비스를 즐길 수 있는 쌍방향 뉴미디어 서비스이다.

특히 기본적으로는 컴퓨터와 유사한 구성을 취하고 있으며 (모니터=TV, PC본체=셋탑박스, 키보드+마우스=리모컨) 입력도구(리모컨)의 제한과 PC나 스마트폰등의 모바일 기기에 비하여 출력장치(TV)와 조작자간의 거리가 가장 먼 서비스이기도 하다. 또한 PC의 키보드에 비해서 리모컨은 입력에 많은 제약이 따르게 되어 이를 극복할 수 있는 UI 디자인이 요구된다.

KT의 ‘USER INTERFACE GUIDE’에서 말하는 일관되고 편리한 서비스를 시청자에게 제공하기 위한 세부사항은 아래와 같다.

① 화면은 심플하게 구성되어야 합니다.
② 서비스 진입을 위한 뎁스가 최소화되어야 합니다.
③ Key는 일관되게 사용되어야 합니다.
④ Navigation이 직관적이고 예측 가능해야 합니다.

KT QOOK TV, USER INTERFACE GUIDE / APPLICATION GUIDE - IP-TV 단말개요(KT)


1. 입력기기(리모컨)와의 호환성과 일관성을 유지하라

     1) 고유한 키값의 위치와 색상은 통일성을 유지

     IP-TV를 이용하기 위한 리모컨의 경우 일반 리모컨과는 다르게 셋탑박스를 제어할 수 있는 기능버튼과 함께, PC의 Function 기능과 유사한 컬러버튼을 가지고 있다. 또한 리모컨이 개량되어도 이러한 기본적인 골격은 일관성을 유지하고 진행된다.




     2) 컬러키의 활용 및 적용

     IP-TV를 이용하기 위한 리모컨의 경우 일반 리모컨과는 다르게 셋탑박스를 제어할 수 있는 기능버튼과 함께, PC의 Function 기능과 유사한 컬러버튼을 가지고 있다. 또한 리모컨이 개량되어도 기본적인 골격은 일관성을 유지하고 진행된다.
KT 컬러키 정책 : KT QOOK TV, USER INTERFACE GUIDE / APPLICATION GUIDE



     이러한 컬러키는 작은 리모컨에서 고정적으로 지정할 수 없는 다양한 기능들을 시청자가 보고 있는 화면의 성격에 맞추어 유연하게 운영이 가능하다.

     지금부터는 컬러키 적용의 몇 가지 예를 보기로 한다.



          (1) 바로보기 적용

          영화소개 또는 상품소개 화면에서 해당 영화를 바로 보거나, 상품구입 페이지로 이동하는 핫키의 역할을 수행한다.



          (2) 더이터 소팅(sorting)


          일반적인 웹페이지의 게시판의 조건별 검색(추천순, 조회순 등)기능이나 쇼핑몰 사이트에서 제품 검색시 볼 수 있는 간단한 소팅기능을 생각하면 된다. (신제품-중고제품,배송무료 등)

          아래와 같이 실시간 방송을 제공하는 900여개의 채널을 ‘전체’ ‘오픈’ ‘오디로’로 구분하여 검색의 폭을 축소할 수 있도록 제공되며, 간략하게 볼 수 있는 사이트맵 (채널안내) 기능까지 수행한다.




          (3) 북마크 등의 개인화 기능




         (4) 컬리키의 가변기능

          아래와 같이 서비스를 이용하면서 노출되는 공지사항 컬러키 (오른쪽 하단 노란색 ‘공지목록 보기’)의 경우 이용자가 노란색 컬러키를 클릭하여 공지사항 페이지로 이동하였을 경우, 해당 키의 기능은 ‘공지목록 닫기’로 기능이 전환된다.
이러한 일관된 키의 기능부여는 이용자가 간단하게 공지사항을 확인하고 키의 이동이나 추가적인 학습 없이 바로 이전 페이지로의 이동이 가능하게 지원한다.

2. TV에 맞는 네비게이션 룰(Navigation Rule)을 고려하라

     1) 현재 뎁스(depth)와 이전 뎁스를 효율적으로 배치하라

     TV를 시청하면서 이용자가 채널 검색을 시도 할 경우, 현재 시청하고 있는 화면을 최대한 보호하면서, 이용자가 원하는 목적(채널 검색 등)을 달성할 수 있도록 명확하고 깔끔한 메뉴를 제공하여야 한다. 또한 목록별로 분류된 VOD/실시간 영상 데이터를 제공하는 서비스의 성격상 트리(tree)와 폴더(Folder)형식의 구성을 취하고 있는데 이 경우 5뎁스 이상의 복잡한 구조를 가지게 된다.

     물론 전통적인 웹사이트의 경우 이용자가 메뉴를 클릭하여 하위뎁스로 이동하면 해당 뎁스(메뉴)에 맞는 페이지로 전환되는 방식이 반복되지만, IP-TV의 경우 현재 시청하고 있는 화면이 재생되는 상황에서 이용자가 원하는 최종 뎁스까지 이동하여야 한다. 또한 TV라는 성격상 원거리에서도 메뉴의 내용을 읽을 수 있는 가독성이 보장되어야 한다. 이러한 관계로 화면영역의 절반 이내에서 이동하는 가변 메뉴를 구성하여야 하는데,

이러한  UI를 적용하는 예를 보도록 하자.


① 시청하고 있는 화면에서 메뉴 버튼을 클릭할 경우, 우선 오른쪽에 1뎁스 메뉴를 출력한다.

② 이용자가 1뎁스의 메뉴를 선택하면 1뎁스의 메뉴 오른쪽으로 2뎁스의 메뉴를 출력한다.




③ 2뎁스를 선택하면 1뎁스의 메뉴가 사라지고 1뎁스의 위치에 2뎁스 메뉴가 위치하면서 기존 2뎁스의 위치에 3뎁스가 위치한다.
이러한 방식으로 이용자가 원하는 맨 마지막 뎁스까지 이동하게 된다.

④ 메뉴의 마지막 뎁스(5뎁스)의 화면, 뎁스를 거슬러 올라가기 위해서는 앞에서 반속한 과정을 역순으로 진행하거나, 초기로 이동하는 화면을 클릭하면 이동이 가능하다.

*** 해당 과정을 도식화 하면 아래와 같은 표로 정의 된다.

KT QOOK TV, USER INTERFACE GUIDE / APPLICATION GUIDE 




     2) 페이지 번호를 명확하게 표시하라

     이전단원에서 학습한 ‘제공하는 정보의 양과 위치를 명확하게 설명하라’의 예시는 웹페이지뿐만 아니라 대부분의 페이지 구성에서 적용된다. 앞에서도 말한 것과 같이 트리+폴더구조를 취하고 있는 IP-TV의 경우 최종 폴더에는 많은 양의 데이터가 존재하게 된다. 메뉴는 물론 최종 콘텐츠 페이지에서는 제공되는 콘텐츠의 수량 및 시청자가 위치한 페이지를 명확하게 표시해야 한다.


참고로 KT의 페이지 적용 원칙은 아래와 같다.

① 메뉴 목록의 경우는 ‘현재 포커스 항목의 순번 / 총 목록 수’로 표시합니다.
    이때 Page Number뒤에 ‘개’를 붙여줍니다. (예: 03/25개)
② 한 화면의 내용이 길어지는 경우는 ‘현재 페이지 수/ 총 페이지수’로 표시합니다.
    이때 Page Number뒤에 ‘개’를 붙이지 않습니다. (예: 03/06)
③ 좌우/상하 키 표시를 통해 페이지 이동 대한 가이드를 줍니다.
④ Video 컨트롤러의 건너뛰기키를 사용하여 페이지 이동에 대한 가이드를 제공할 수 있습니다.
    KT QOOK TV, USER INTERFACE GUIDE/APPLICATION GUIDE - Navigation Rule > Page Number




     3) 입력기능을 호출 할 경우 명확하게 표현하라

      IP-TV시청을 하기 위해서 때로는 검색, 유료서비스에 대한 결제, 성인인증 등의 과정이 수반되며, 이 경우 비밀번호 등의 개인정보를 입력받게 된다. 키보드가 없는 IP-TV의 경우 리모컨을 통하여 위치이동 및 정보를 입력하여야 하는 어려움이 있는데, 이용자의 편의를 위해서 아래와 같이 붉은색으로 입력이나 선택을 유도하는 커서표시 및 단계별 미션이 완료되면 다음 단계의 선택을 할 수 있도록 자동 이동이 가능한 기능을 제공한다.



참고로 KT의 비밀번호 입력 원칙은 아래와 같다.

① 입력필드에서 입력을 유도하는 커서를 표시하며, 1초에 한번씩 깜빡입니다.
② 왼쪽에서 오른쪽으로 입력되며 4개 모두 입력한 경우 입력필드의 중앙에 정렬됩니다.
③ 4자리 입력 후 포커스는 자동으로 확인버튼으로 이동합니다.
④ 입력필드 내에서 좌.우 방향키는 글자 내 포커스 이동으로 사용할 수 있습니다.
⑤ 비밀번호를 입력한 후 수정을 위해 다시 비밀번호 입력필드로 포커스를 이동해도 비밀번호는 새로고침 되지 않습니다.
    KT QOOK TV, USER INTERFACE GUIDE/APPLICATION GUIDE - Navigation Rule > Field Focus

3. 사용 환경을 고려하라

     1) 시청 정보의 정확한 제공

     VOD/생방송 서비스의 경우 이용자 편의를 위하여 아래와 같은 기능을 제공할 수 있다.이러한 요소들이 방송 화면을 최대한 가리지 않고 구현되는 UI를 보자

① 생방송의 상황바

생방송 시청중에 확인버튼을 선택시 아래와 같이 화면 하단에 현재 방송의 시작 종료 시간과 진행한 시간을 보여 준다. 또한 상하 채널이동 및 등록 기능을 제공한다.

② VOD의 컨트롤바

VOD 시청중 ‘확인버튼’ 또는 ‘VOD 재생버튼’을 선택하면 오른쪽 상단에 다음과 같은 정보가 출력된다.
확인버튼을 선택하면 현재 시청중인 VOD의 총시간과 시청시간이 표시된다. 또한 ‘VOD 재생버튼’을 선택하여 배속 변경 및 일시정지 기능등을 선택할 경우에도 해당 컨트롤바를 통하여 조작 상태를 고지한다.

     2) 이용자 편의기능 제공

      VOD 서비스의 경우 시청중인 방송을 중간에 종료하고 이후 다시 해당 VOD를 실행하였을 경우 아래와 같은 ‘이어보기’화면을 지원한다. 이러한 기능은 리모컨 조작의 실수로 시청하던 VOD를 종료하였거나, 방송 중에 불가피하게 종료 후 재접속 하였을 경우 시청자에게 꼭 필요한 요소이다.





     3) 로딩타임에 대한 표시

       VOD 서비스의 특성상 어플리케이션의 구동 또는 VOD 데이터를 호출하기 위해서는 짧지만 시간이 소요되게 된다. 이 경우 이용자에게 정상적으로 데이터가 호출되고 있으며, 잠시 후 원하는 서비스를 이용할 수 있다는 것을 알려준다.

① 어플리케이션 이동시 제공되는 화면

어플리케이션 이동시에는 해당 어플리케이션 또는 광고 화면이 배경으로 지정되고 가운데 로딩이미지가 애니메이션으로 구현된다. 또한 화면 하단에 구동중임을 표시하여 이용자에게 진행 상태를 알려주고 있다.

② 데이터 송수신시 로딩화면

데이터 송수신 시에는 아래와 같이 간략하게 데이터의 송수신 여부를 표현한다.

들어가며

User Interface가 훌륭한 디자인 사례는 특별한 것은 없다.

즉, 이용자가 유무선 인터넷 서비스를 이용 - 특히 이용자의  행위를 일으키며, 미션을 수행하는(검색, 글쓰기, 구매 등) -하면서 별다른 어려움을 느끼지 못하고, 목적을 완료하는 과정에서 큰 장애를 느끼지 못하였다면, 해당 사이트는 User Interface 차원에서 매우 잘 디자인된 사이트라 할 수  있다.
그러나 인터넷 사이트를 이용하면서 본인들이 겪었던 불편이나 경험을 생각해 보면, 안타깝게도 대부분의 사람들이 한두번도 아닌 상당히 많은 빈도로 불편을 겪었을 것이다.

심지어는 본인이 하고자 하는 바를 완료하지 못하고 중간에 포기하는 일도 경험했었을 것이다. 이러한 경우들은 기획과 UI의 문제에서 발생하기도 하지만, 페이지의 오작동, 불확실한 용어의 선택 및 제공, 이용자의 기대에 상반되는 잘못된 결과 출력 등에서 발생하기도 한다.
또한 고객이 잘못된 명령을 내리거나(검색창에 잘못된 검색어를 입력하는 등), 잘못된 경험을 기반으로 기획자가 예상할 수 없는 결과를 요구하기 때문에 발생하기도 한다. 잘된 UI디자인이란 위의 모든 경우에서 이용자가 중도에 포기하지 않고, 플로우(flow)를 종료할 수 있게 만드는 것을 의미한다. 이번 단원에서는 이러한 우수한 사례를 찾아보도록 한다. 



1. 이용자에게 친절하라

     1) 이용자가 미션을 수행하는 과정에서 충분한 안내를 제공하라

     기획자는 사이트를 이용하기 위하여 이용자가 어떠한 과정을 거쳐야 하는지 명확하게 알고 있다. 그러나 안타깝게도 이용자는 매번 새로운 시도를 하여야 하며, 기획자가 내는 퀴즈를 풀어가는 느낌으로 서비스를 이용하게 된다.
이 경우 기획자가 제시한 항목을 이용자가 모두 완수하게 하기 위하여, 충분한 안내를 제공하여야 한다. 
트위터(http://twitter.com)의 경우 각 항목별로 이용자의 실시간 반응에 대한 오류 메시지를 출력한다. 또한 미션의 달성 여부를 메시지와 함께 색체로 표시하여, 이용자가 쉽게 본인의 상황을 판단할 수 있는 메시지를 제공한다.

















트위터 (http://twitter.com)의 경우 회원가입시 고객의 실수를 최소화하는 UI를 제공한다.

이용자가 입력하기 전 해당 항목에서 요구하는 조건과 목정을 친절하게 표시하고 있다.

또한 고객이 정보를 입력하는 과정에서 실시간으로 진행안내를 제공하여 이용자의 혼란과 실수를 최소화 하였다. 또한 잘못된 입력에 대해서는 붉은 색을 사용하여 시각적으로 진행이 잘못되고 있음을 쉽게 알 수 있게 처리하였다















트위터보다는 가입 절차가 복잡한 또 다른 하나의 예를 보자.

     야후 코리아(http://kr.yahoo.com)에서 회원가입을 할 경우 이용자의 다양한 정보를 물어보게 된다. 이 경우 이용자는 더 많은 실수를 할 확률이 높아지게 되고 이에 따라 더욱 더 명확한 안내가 필요하게 된다.
야후의 경우 이용자가 잘못된 데이터를 입력할 경우 경고(alert)창을 출력한다. 또한 해당 창에서 이용자가 어떻한 실수를 하였고, 실수를 해결하기 위한 해결책을 제시하여 준다.또한 경고창에서 확인(OK) 버튼을 클릭하였을 경우 해당 오류항목으로 커서를 이동시켜 준다.

 

야후코리아(http://kr.yahoo.com)와 네이버(http://www.naver.com)의 회원가입 예

     다음의 경우에는 오류를 설명해 주는 과정에서 이용자가 취해야 할 다음 과정이 누락되었거나 배치가 잘못되어 있다. 이러한 페이지의 제공은 이용자를 당황하게 만들게 된다.

아래의 경우 회원가입을 위하여 실명인증을 하였으나, 해당 정보가 이미 가입한 회원으로 출력된 경우이다. 이 경우 이용자의 다음 플로우는 ‘ID찾기’를 진행해야 하나, 해당 서비스로의 링크 버튼은 페이지 하단에 작게 적용되어 있어 이용자가 쉽게 이동하지 못한다. 이 경우 확인버튼의 자리에 위치해야 한다.

아래의 경우에도 주민등록번호 입력 오류가 발생하였을 경우, 이용자의 플로우는 번호를 재입력 하거나, 고객센터에 문의를 하여야 한다. 그럼에도 불구하고 해당 서비스를 제공하는 페이지로 이동할 수 있는 링크는 어디에도 없다.

아래의 회원가입 페이지를 통하여 잘된 UI의 예를 보도록 하자




     2) 검색어 자동완성 및 오류수정

       인터넷사이트를 이용하면서 검색기능을 이용할 때 이용자는 종종 잘못된 검색어를 입력하곤 한다. 특히 한글을 영어로 입력하거나, 철자법이 잘못되거나, 또는 정확한 검색어를 알지 못하는 경우 (상품명 등)등이 있다. 이 경우에도 이용자를 위하여 편리한 UI 설계가 필요하다.

인터넷 서점의 예를 보자 ‘정의란 무엇인가’라는 책을 검색하기 위하여 ‘정의’라는 단어를 입력하였을 경우. 관련되는 제품(서적)의 목록이 지원된다. 이러한 기능을 통하여 이용자에게는 다음과 같은 편리함을 부여한다.

① 긴 검색어의 경우 입력시간을 단축할 수 있으며
② 이용자의 잘못된 검색어 입력을 최소화 할 수 있고
③ 상품명을 잘 모를 경우, 정확한 상품을 찾거나 입력할 수 있도록 지원




이번에는 포탈사이트 검색창에서 이용자가 잘못 입력한 검색어를 바로 잡아주는 구조를 보도록 한다.

 

[오타에 대한 교정]

맞춤법이 잘못 되었거나, 키보드배열에 따른 오차 (내이버) 등으로 잘못 입력되었을 경우 정상적인 검색어를 포함하여 출력

 

[외래어/외국어 교정]

외래어/외국어 의 경우 다양한 한글 입력이 이루어지게 된다. 이 경우 표준어 검색 결과로 연동

[한/영 전환]

입력시 이용자의 실수로 한/영 전환을 반대로 입력하는 경우가 있다. 이 경우에도 자동 전환된 검색어를 출력하여 준다.

     3) 문제를 알고 있을 경우 최우선 적으로 통보하라

      아래의 경우를 보자, 쇼핑몰에서 이용자가 제품을 구입하는 과정에서 재고부족 알림을 출력해 주는 과정을 설명하고 있다.

위의 경우에는 이용자가 구매과정을 모두 수행하고 결제 버튼을 클릭 한 이후에 재고 부속을 알려주며 첫페이지로 화면을 이동시킨다.이 경우 이용자의 입장에서는 처음부터 다시 제품을 검색하여 제품을 찾고 처음부터 다시 구매 프로세스를 진행하여야 하는 불편을 주고 있다. 심할 경우에는 이용자가 해당 구매를 포기하는 경우가 발생하기도 한다. 이는 이용자에게 나쁜 기억을 주게 되고 해당 사이트의 신뢰도를 떨어뜨리는 요인이 된다.

그러나 아래의 경우에는 이용자가 제품을 선택하는 첫 과정에서 재고 부족을 알려주고 있다. 이 경우 이용자는 처음부터 문제를 인지하고 다른 선택을 하게 된다.기획을 하는데 있어 이용자가 서비스를 이용하는 과정에서 서비스 또는 제품에 문제가 발생할 수 있는 경우를 인지할 수 있는 경우, 처음부터 이용자가 이를 인지하고 다른 선택을 할 수 있도록, user flow를 설계하여야 한다.




     4) 진행과정을 명확하게 설명하라

     아래는 여론조사 회사에서 패널을 대상으로 이메일을 보내고, 패널은 수신한 이메일에서 참여 링크를 통하여 접속하여 진행되는 여론조사 화면이다. 4사의 모든 페이지에 공통적으로 질문과 응답항목 그리고 진행과정을 알려주는 progress bar또는 문항수를 오른쪽 상단에 제공되고 있다. 그러나 4사 각각 상이한 UI의 Progress bar를 제공하고 있다.


① progress bar에서 구분 없이 진행 영역만을 표시하는 방법

대략의 잔여 문항을 파악할 수 있으나, 남은 항목에 대해서는 이용자가 명확하게 인식할 수 없다.
 

② progress bar에서 영역과 %를 제공하는 화면

 현재까지 진행한 항목의 개수와 남은 문항을 %로 제공하고 있으나, 이용자의 입장에서는 위의 경우와 같이, 남은 항목에 대하여 명확하게 인식할 수 없다.


③ progress bar에서 남은 항목을 block으로 표시한 경우

총 문항수를 각각의 block으로 표시하고 하나의 문항을 완료할 때마다, block이 하나씩 채워지는 방식을 취하고 있다. 이용자의 입장에서는 대략적으로 응답한 문항과 남은 항목을 인식할 수 있는 장점이 있다.



 ④ progress bar대신 문항수를 표시



     총 문항수와 지금까지 문항수를 응답한 예시, 진행과정에 대하여 명확하게 인지할 수 있으나, 직관성은 떨어진다.
     제공자의 입장에서는 여론조사 대략적인 진행과정만을 설명해도 된다고 생각하고 ‘%’ 또는 ‘대략적인 bar’의 영역을 표시하고 있으나, 막상 장시간 여론조사에 응하고 있는 패널의 입장에서는 정확하게 총 몇 개의 문항에 대하여 응답을 하여야 하고, 현재 몇 개의 문항에 응답을 하였으며, 앞으로 몇 개의 문항에 응답을 하여야 종료가 되는지에 대한 궁금증을 가지게 된다. 이러한 진행과정이 명확하게 공유되지 못할 경우에는 이용자가 설문에 응답하는 중간 과정에서 피로감을 느끼거나 중도에 설문을 포기는 최악의 경우가 발생하기도 한다.



     5) 제공하는 정보의 양과 위치를 명확하게 설명하라

       포털사이트나 쇼핑몰의 메인화면에서는 페이지의 면적에 비해서 많은 정보를 제공하게 되며, 모듈별로 적게는 2페이지 많게는 10페이지 이상의 정보를 제공한다. 이런 경우 좌우이동버튼(carrousel)을 통하여 페이지 이동이 이루어지게 되는데, 이 경우 아래와 같이 이용자에게 총 페이지와 현재 위치한 페이지를 제공하여 이용자에게 정보의 양과 현재 조회하고 있는 위치를 제공한다.



      아래와 같은 경우, 이전의 예시와는 다르게 좌우이동버튼(carrousel)만을 제공하고 있다. 이 경우 이용자는 과연 몇 페이지가 제공되고 있으며, 버튼을 클릭한 이후에는 전체 페이지 중 내가 어떤 위치에 있는지를 파악할 수 없게 된다.

2. 통일된 메시지와 UI를 통합하라

     1) 하나의 사이트에서는 동일한 용어를 사용하라

     ‘게시판-보드’, ‘댓글-리플-한마디’, ‘윗글/아랫글-이전글/다음글’ ‘메인-홈’ 등등 동일한 서비스에 대하여 사이트별로 다양한 용어를 사용하곤 한다.
     이 경우 하나의 사이트에서 동일한 서비스(기능)를 제공할 경우에는 통일된 용어와 기호를 사용하여 이용자의 혼란을 최소화 하고, 사이트의 통일성을 꾀할 수 있다. 또한 이용자의 입장에서는 해당 사이트에서 한번의 경험만으로도 다른 서비스의 동일한 기능를 이용할 경우에도 추가적인 학습없이 이용이 가능하게 된다. 

     아래는 다음(http://www.daum.net)의 아고라, 증권, 부동산의 게시판 페이지이다.
각기다른 3개의 서비스에 위치한 게시판임에도 불구하고, 글쓰기, 답글 버튼의 위치와 아이콘의 통일과 목록, 윗글, 아랫글 기능의 용어 및 위치 디자인의 통일화를 확인할 수 있다.

      반대로 네이트(http://www.nate.com)의  판, 증권, 부동산 게시판 서비스를 보자.
      동일한 서비스를 보자. 게시판 별로 용어 및 위치, 디자인이 각각 상이하다. 이 경우 이용자는 각각의 게시판을 이용할 때마다 추가적인 학습이 필요하게 된다.



      2) 사이트에서 공통적으로 사용하는 영역의 UI는 통일화 하라

      헤더(header)나 푸터(footer)처럼 사이트의 모든 영역에서 공통으로 사용하는 페지이의 경우 해당영역의 구성 요소들이 어느페이지에 적용되어도 통일감을 이루어야 한다. 공통영역의 UI가 통일되지 못한다면, 이용자의 입장에서는 다른 페이지에서 학습한 내용이 의미없어 지며, 페이지(서비스)를 이동할 때마다. 추가적인 학습을 하여야 하게 된다. 또한 페이지를 이동할 때마다. 통일된 결과를 기대할 수 없으며, 이용자의 입장에서는 엑션을 취할 때마다 결과를 예측할 수 없어 스트레스를 받게 된다.

     통상적으로 포털 사이트의 헤더는 브랜드 로고와 서비스 로고, 검색창, 주요 서비스, 로그인/로그아웃 등의 요소로 구성되게 된다. 이 경우 브랜도 로고와 서비스 로고는 이용자가 위치한 페이지의 서비스를 알려주기도 하지만, 해당 사이트의 메인화면(브랜드로고)과 접속해 있는 서비스의 메인 페이지로 이동(서비스 로고)하는 역할을 수행한다.



     야후 사이트의 경우 뉴스, 금융, 여행 등의 사이트에서는 ‘브랜드 로고와 서비스 로고의 링크를 분리하역 적용’하였으나, ‘소셜펄스’서비스의 경우 ‘브랜드 로고와 서비스 로고’가 분리되지 않고 하나로 적용되어 있으며, 클릭시 모두 소셜펄스 메인으로 이동한다. 또한 야후의 메인화면 이동을 위해서는 로고 상단에 있는 ‘yahoo'라는 글자를 클릭하여야 이동이 가능하다.


     이렇게 공통된 영역에 대하여 통일성이 없게 되면, 사이트이용에 대하여 이용자와 약속을 할수 없고, 궁극적으로 사이트를 이용하는 이용자에게는 계속적인 혼란을 제공하게 된다.


     반면 네이버의 경우에는 아래와 같이 대부분의 서비스 페이지에서 통일된 디자인과 일관된 링크를 적용하고 있다.


     네이버의 경우 크게 2가지 모양의 헤더를 제공하고 있다. 위의 경우에는 일반적인 헤더 구성이며, 아래의 경우에는 해당 서비스에 관련 서비스가 연결되어 있을 경우에 적용되는 헤더 구성이다. 그러나 여러 구성요소의 위치나 링크의 경우에는 최대한 유사한 위치와 동일한 방식의 링크를 제공하고 있어 이용자의 혼란을 최소화 하였다.


     또한 주니어 네이버와 같이 특정 연령대에만 제공되고 다른 서비스로의 접속을 최소화하기 위하여, 헤더를 별도로 운영하는 경우도 있다.

     3) 다양한 입력장치를 연동하라

     아래 동영상 플레이어의 경우 마우스를 이용하여 플레이어상의 제어버튼을 통하여 조작하기도 하지만 화면과 같이 키보드를 이용한 제어도 가능하다. 특히 설치형 어플리케이션의 경우에는 이와 같은 기능은 매우 중요한 요소로 적용된다.

최근에는 슬라이드쇼 서비스와 같이 설치형 어플리케이션이 아니어도 키보드를 통하여 제어가 가능하게 설계되기도 한다.

     4) 인터넷상에서 약속된 기호를 변형하여 사용하지 마라

     이용자의 정보를 입력받기 위해서 웹사이트에서는 입력창, 체크박스, 라디오버튼, 콤보박스, 드롭다운 등 다양한 기능을 이용하여 고객의 정보를 받고 이를 기반으로 다시 고객에게 고객이 원하는 정보를 출력해 준다. 또한 이러한 버튼 및 박스들은 각각의 고유한 기능이 부여되어 있으며, 각각 사용자와 기능에 대한 약속이 이루어져 있다. 그럼에도 불구하고 가끔씩 사용자와의 약속을 무시한 UI가 구성되게 되는데 이 경우 이용자는 평소에 사용하는 것과 다른 경험을 하게 되고 이로 인하여 심한 불편을 겪게 된다.


    - 카드사의 결제 내역조회

     아래와 같이 입력창이 제공되고 오른쪽에 카드검색 버튼이 있으면, 이용자의 입장에서는 결제내역 조회를 위해 카드번호를 입력하고 카드검색 버튼을 클릭 하여 카드번호의 유효성을 확인(또는 번호를 입력하고) 후 추가적인 정보를 선택 한 후 원하는 결제내역을 조회하는 프로세스를 진행하게 될 것이다.
그러나 이러한 구조는 이용자가 조회시마다 매번 카드번호를 입력하는 불편(로그인을 이미 했음에도)을 주게 되며, 카드를 소지하지 않았을 경우에는 사실상 조회가 불가능하게 된다.

     그러나 사실 입력창 오른쪽의 카드검색 버튼을 클릭하면 아래 이미지와 같이 보유한 카드 내역이 나오며, 번호를 클릭하면 자동으로 번호가 입력된다. 즉 별도의 카드번호를 입력할 필요가 전혀 없는 것이다. 그럼에도 불구하고 화면 앞부분에 입력박스를 배치하여 이용자에게 혼란을 주고 있는 것이다.




그러면 다른 카드사의 UI를 보자.
아래의 경우 사용내역 조회를 위해서는 드롭다운 메뉴를 선택하면 정보가 출력된 다는 것을 누구나 쉽게 예상할 수 있다.


     예상과 같이 메뉴를 활성화 하면 아래와 같이 조회자가 보유한 카드 내역이 출력된다. 이렇듯 이용자와의 약속에 기반한 직관적인 UI는 이용자의 실수와 혼란을 최소화 해준다.

 

3. 이용자의 눈높이에서 커뮤니케이션 하라

     1) 이용자와 소통이 가능한 언어를 사용하라

      이용자가 미션을 수행하는 과정에서 진행과정 또는 해당 과정에서 발생하는 오류를 이용자에게 알려주게 된다. 이러한 과정에서 이용자의 눈높이에 맞는 용어의 사용이 중요하다.특히 개발자만이 사용하는 기술적인 단어 또는 프로그래밍 언어가 수정없이 출력되는 것은 오히려 이용자에게 혼란만을 가중시킬 뿐이다.

      아래의 이미지는 인터넷쇼핑몰에서 결제를 하는 과정에서 출력되는 창이다. 고객에게 친절하게도 결제가 진행되는 과정을 알려주고 있으나, MPI(Merchant Plug In)라는 이용자에게는 생소한 단어를 사용하여 불편을 주고 있다.
우측의 경우에는 항공사의 메인페이지 화면이다. 비행기 표를 판매하는 안내문구에 ‘엠바고기간’이라는 전문적인 용어를 사용하고 있다. 또한 통상적으로 구매/예약으로 사용하는 문구를 ‘입수’라는 단어를 사용하여,일반인의 입장에서는 해당문구가 전혀 무엇을 의미하는 지 알 수 없게 되었다.

      아래의 경우 장애가 발생하여 이용자에게 장애발생 메시지를 출력하고 있다. 그러나 이러한 방식의 안내메시지는 이용자의 입장에서는 문제점에 대하여 전혀 인지할 수 없으며, 또한 어떠한 문제를 해결해야만 다음 과정으로의 이동이 가능한지 파악할 수 없다. 고객의 입장에서 서비스 제공업자의 실수로 장애가 발생하였다는 것만 이용자가 인지할 수 있을 뿐, 이후에 어떠한 해결 방법이 제공되고 이용자는 어떠한 액션을 취해야 하는지에 대한 안내는 없다.

심지어는 오른쪽과 같이 오류메시지를 영문으로 제공하기도 한다.
이 경우 해당 언어에 익숙하지 못하는 이용자의 경우에는 서비스 이용을 포기하는 경우까지 발생하기도 한다. 


















     2) 제공자가 지원하는 범위를 명확하게 제시하라

       최근 O/S(Windows, Mac O/S, Linux 등)와 인터넷 브라우져(Browser-Internet Explorer, Fire Fox, Opera 등)가 다양화 되고 나아가 동일한 O/S나 브라우져 에서도 여러개의 버전(version)이 이용되고 있다. 이로 인하여 서비스 제공자의 입장에서는 이용자의 모든 조건을 완벽하게 지원하지는 못하게 되었다. 이러한 관계로 어떤 이용자의 경우에는 화면이 정상적으로 출력되지 못하거나, 심지어는 아예 사용이 불가능한 경우가 발생하기도 한다. 이에 서비스 제공자는 이용자에게 충분한 고지를 하여야 한다.



     위 에어아시아(http://www.airasia.com/kr/ko/)의 경우 페이지 하단에 최적화 되어있는 브라우져와 버전, 화면해상도를 정의하고 있다. 또한 아래 야후의 경우에는 하위버전(상당히 오래된)의 브라우져로 접속하였을 경우 서비스를 제공하지 않고 아래와 같이 오류 메시지와 함께, 지원 가능한 최신 브라우져를 다운로드 받을 수 있는 사이트로 안내하고 있다.
이러한 과정을 통하여, 이용자의 혼란을 최소화 하고, 사이트에 대한 신뢰감을 강화할 수 있다.


구 브라우져를 통하여 접속 할 경우 보여주는 야후의 메인 페이지
잘못된 화면을 출력해 주는 것 보다는, 이용할 수 없음과 이유를 설명하고, 이를 해결해 줄 수 있는 방법(새로운 브라우져 다운로드)을 제시하여 주고 있다.




     3) 중요한 기능에는 한번 더 안전장치를 제공한다.

     다양한 이용자의 요구와 취향에 맞추어 서비스를 제공하는 것은 좋다. 다만 너무나도 친절한 나머지 인터넷 사용이 익숙하지 못한 이용자의 경우에는 친절이 문제를 일으키는 경우가 종종 발생하곤 한다. 특히 로그인 등 사이트 이용에 있어 매우 중요한 기능의 경우에는 다양한 서비스를 제공하되, 이용자가 중요한 기능을 충분히 인지하고 직접 선택하거나 취소할 수 있는 UI를 제공하여야 한다. 

      아래 MSN의 로그인 모듈의 경우, 아이디와 비밀번호를 한번만 입력하면 이후 재접속 할 경우 추가적인 입력 없이 자동으로 사이트에 로그인이 되는 ‘자동 로그인 기능’을 지원한다.(해당 기능은 공용 PC가 아닌 개인 PC를 사용하는 이용자의 입장에서는 매번 접속할 때마다 아이디와 비밀번호를 입력하여 로그인을 해야 하는 번거로움을 줄여준다.)

     이 경우에도 이용자가 어떠한 항목까지 저장할 것인지를 선택 할 수 있게 구성되어 있으며. 또한 기본 설정을 ‘메일 주소 저장‘으로 지정하여, 공용 PC 등에서 사용 후 다른 사람들이 접속 할 경우, 자동으로 로그인이 되어 이용자가 입을 수 있는 피해를 차단하고 있다.












     그러나 야후(http://kr.yahoo.com/)와 구글(http://www.google.co.kr/)의 경우에는 로그인 화면에서 ‘자동 로그인’기본설정으로 정해놓고 있다. 이 경우 인터넷 사용에 익숙하지 못한 이용자가 이를 인지하지 못하고 로그인을 하게 되면, PC방 같은 공용 PC에서 다른 이용자가 해당 계정을 이용하여 메일등의 개인정보를 열람하거나 심지어 타인의 이름으로 사이트에서 불건전한 활동을 할 수 있어, 선의의 피해자를 발생하기도 한다. 가끔 PC방등에서 타인의 메신저가 로그인 되어 있는 경우를 발견했을 것이다.
훌륭한 UI기획자는 이용자가 원하는 다양한 기능을 제공하면서도, 만약에 있을 수 있는 문제점을 최소화 하는 것에도 많은 시간을 투자해야 한다.



     참고로 국내 포털사이트인 네이버와 다음의 경우에는 자동 로그인 기능을 제공하지 않고, ID저장 기능만을 제공하고 있다. 이 경우에는 자동 로그인 기능을 원하는 이용자의 입장에서는 불편이 따르겠지만. 만약에 있을 수 있는 계정도용의 문제를 최소화하기 위한 차원에서는 고객의 편의를 축소하는 방향도 고려하여야 한다.

     또한 고객이 로그인을 하였어도 중요한 정보 (정보수정, 회원 탈퇴, 구매 등)에 접근 할 경우에는 다시 한 번 회원의 정보를 확인하여, 만약에 있을 수 있는 피해로부터 고객을 보호해야 한다.

     다음의 회원탈퇴(위)와 회원정보변경(아래) 페이지를 보면 탈퇴를 하거나 정보 수정 페이지에 접속하기 위하여 로그인을 하였다 하여도, 다시 한 번 비밀번호를 확인하고 있다. 특히 이러한 안전장치는 금융결제 등에서는 더욱 더 강화되어 제공되기도 한다.

     4) 고객의 디바이스(Device) 또는 개인정보를 제어하기 위해서는 고객의 동의를 먼저, 그리고 명확하게 받아라.

     최근 고객의 정보(위치정보 등)를 수집하거나, 프로그램 설치시에 다른 프로그램을 묶어서 설치하는 경우가 빈번하다. 이 경우 고객에게 설치의 목적에 대한 설명은 물론, 고객이 선택한 프로그램 이외의 프로그램을 추가로 설치하기 위해서는 고객에게 어떠한 프로그램을 추가로 설치할 것이며, 설치하는 목적에 대하여 고객이 동의하는지를 명확하게 확인하여야 한다. 또한 동의과정은 고객이 반드시 선택하게 하여야 한다.

     다음 설치형 동영상 플레이어인 그래텍의 곰플레이어(http://gom.gomtv.com/)를 설치하는 과정의 경우, 프로그램을 설치한 후 자사 제품인 ‘곰 오디오’의 설치를 고객에게 권장하는 프로세스를 진행한다. 이 경우에 고객이 선택한 프로그램(곰플레이어)의 설치가 완전히 완료되고, 전혀 별개의 과정(새창)으로 새로운 프로그램의 설치 작업을 진행하게 된다. 또한 설치전에 제품에 대한 간략한 소개와 함께 이용자가 해당 프로그램을 설치할 것인지, 설치하지 않을 것인지에 대하여 이용자에게 명확한 선택을 요구하고 있다.

ActiveX 설치가 완료된 이후, 추가적인 설치 및 정보변경 여부를 고지하고 고객이 확인하는 과정을 별도의 창으로 명확하게 전달하고 있다.

 

     아래의 경우 프로그램 설치 전 추가적인 프로그램의 설치를 설치 후에는 이용자 PC의 설정을 변경하는 기능을 삽입하였고, 해당 프로그램의 설치와 기능변경이 기본으로 설정되었다. 이 경우 PC의 활용능력이 떨어지는 이용자의 경우 의도하지 않은 선택이 이루어 질 수 있다.

     5) 복잡한 플래쉬(Flash) 메뉴를 사용 할 경우 좌표와 시간을 고려하라

     최근 헤더의 메뉴를 플래쉬로 구성하는 사이트 들이 늘어나고 있다. 이 경우 마우스 조작이 익숙하지 못한 이용자의 경우, 메뉴 조작 및 이동에 어려움을 겪게 된다. 아래 사이트에서 메뉴 이동시 발생하는 문제점을 알아보도록 하자.

   이용자가 3뎁스 메뉴에서 2뎁스의 다른 메뉴로 이동하기 위하여 메뉴를 벗어나면, 2뎁스 메뉴가 유지되는 것이 아니라, 아래 이미지와 같이 메뉴 초기화 상태가 된다.이 경우 이용자는 다시 1뎁스 메뉴부터 진행을 다시 시작하여야 한다.

   이러한 경우에는 마우스가 올라가거나 벗어날 경우 약간의 시간여유를 적용하여, 오작동을 방지할 수 있다.




     아래 3개 포털 사이트의 메인페이지 뉴스 모듈텝의 변화를 테스트 해 보면 차이점을 느낄 수 있다.
텝을 이동할 경우 0.x초의 지연시간을 부여한다. 이로 인하여 마우스 동작 중에 해당 텝을 무의식적으로 이동할 경우에는 페이지의 변화가 없다.


     아래 모듈의 경우에는 각각의 텝에 마우스가 올라갈 경우, 별도의 지연시간 없이 바로 해당 텝이 활성화 되게 된다. 이 경우 다른 마우스 작업을 하는 과정에서 해당 텝을 지나가기만 하여도 메뉴가 변경되는 문제점을 발생한다.



     아래 모듈의 경우에는 이용자가 해당 텝을 클릭할 경우에만 모듈이 변경된다.
     이용자의 오작동을 최소화 하는 가장 확실한 방법이다.

4. 이용자의 실수에 대한 적절한 가이드를 제공하라

     서비스를 제공하다 보면, 이용자가 사이트를 이용하는 과정에서 기획당시 전혀 예측하지 못한 이용자 실수가 발생하곤 한다.    
     이 경우 이용자는 물론 기획자 또한 당황하게 되는데, 훌륭한 UI기획자는 이러한 고객의 실수에 대해서도 고객이 이를 인지하고 다음 단계를 갈 수 있는 기획을 하게 된다.   
다음의 예시에서 고객중심의 UI 기획을 살펴 보도록 한다.  
  

     1) 고객의 잘못된 페이지 접속시도

     웹사이트에 접속하기 위하여, 이용자들은 기존에 저장해둔 북마크를 이용하거나 또는 해당 주소(URL)를 주소창에 입력하거나, 검색사이트에서 접속하고자 하는 사이트를 검색하여 검색결과를 클릭하여 접속하게 된다. 

      이러한 과정에서 이용자들은 아래와 같은 오류를 발생할 수 있다.

① 잘못된 주소(url)를 입력한다.
② .com, .co.kr, .net 등을 잘못 기억하고 잘못 입력한다.
③ 기존에 사용하던 주소가 변경되었거나 삭제되었다.
이러한 경우 이용자에게 어떠한 UI를 제공하여야 하는지 살펴본다.   


        (1) 존재하지 않는 페이지로의 접속 - 오류고지

        이용자의 키보드 조작미숙으로 존재하지 않는 URL을 입력하거나, 기존에는 존재하였으나 사용이 중지된 URL  을 입력 또는 기존의 북마크를 통하여 접속하였을 경우 페이지의 존재에 대한 알림이 필요하다.
        주요 포탈사이트의 주소뒤에 ‘/mirim’을 입력하였을 경우 출력되는 화면을 분석해 보자 (예: http://www.naver.com/mirim)

        이 경우 약간의 차이는 있으나, 모두 해당페이지가 존재하지 않는 것을 고지하며, 이용자에게 여기서 포기하지 않고 다음 단계로 이동을 유도하고 있다.(고객센터 신고, 검색, 메인페이지로 이동, 이전페이지로 이동 등) 본인 입장에서 어떠한 flow가 이용자가 다음에 취할 수 있는 행동인지 생각해 보자.

        (2) 존재하지 않는 페이지주소 입력 – 고지 후 자동이동

        위에서 학습한 것에서 나아가 일부 사이트에서는 이용자가 잘못된 주소를 입력하여 접속하였을 경우 일정시간 이후 초기페이지 또는 지정된 페이지로 자동 이동을 시키기도 한다. 사실상 이용자의 입장에서 존재하지 않는 페이지에 접속하였을 경우 다음flow를 결정할 수 없기 때문에, 이에 이용자를 자연스럽게 main페이지로 이동시켜, 새로운 flow를 진행시키는 것은 좋은 시도이다. 

      야후의 경우, 오류메시지를 출력하고, 10초 후에 자동으로 메인 페이지로 이동하게 하였다. 물론 10초 이전에도 이용자가 원하면 이동버튼을 통해 바로 메인페이지로 이동하거나 다른 작업을 할 수 있게 구성하였다.  
       파란의 경우, 오류 고지 후 2~3초 후에 자동으로 메인페이지로 이동한다. 이 경우 이용자는 왜 원하는 페이지가 출력되지 않으며, 그러한 이유가 무엇인지를 인지하지 못하게 된다.UI기획의 경우 페이지 전환의 경우에도 보편적인 이용자가 충분하게 인지할 수 있는 시간을 고려해야 한다.

    (3) 고객의 잘못된 페이지 접속         

     부동산 페이지의 경우 해당 사이트의 주소는 http://estate.dreamwiz.com/로 정의되어 있으나 이용자가 full name인 http://realestate.dreamwiz.com/로 입력하였을 경우에는 오류 페이지가 출력된다. 이 경우 이용자는 어떠한 생각을 가지게 되었을까?




위의 예시와는 반대로 다음 부동산 페이지를 보자,

해당 사이트의 주소는 ‘http://realestate.daum.net/’ 이다.
그러나 이용자가  http://estate.daum.net/을 입력하였을 경우에도, ‘http://realestate.daum.net/’주소로 자동 연결을 시켜준다. 서비스 기획에서 URL 선정또한 이용자가 쉽게 입력할 수 있는 짧은 URL을 제공하는 것도 중요하나. 또한 관련(유사)어를 입력하였을 경우에도 이용자가 원하는 페이지로 접속할 수 있게 구성하여야 한다. 또한 운영 과정에서 해당  URL이 변경되었을 경우에도 변경된 페이지로 안내를 제공하여야 한다.