728x90
반응형
 


개요

스마트폰의 경우 웹서비스와는 다르게 좁은 화면과 제약된 기능을 고려하여 서비스를 설계하여야 한다. 특히 키보드나 별도의 스타일러스펜을 이용하지 않고 손가락으로 조작하는 정전식 터치폰이 보편화 되면서, 좁은 화면을 효율적으로 사용하는 설계와 인터렉티비티(Interactivity)를 어떻게 향상시키는가가 UI가 좋은 서비스를 판단하는 기준이 되고 있다.


스마트폰의 주요한 기능인 다양한 터치기능과 G센서를 이용한 자동 화면전환 UI설계에서도 이러한 모바일 기기만의 다양한 기능을 잘 적용하여야 한다.




1. 스마트폰의 주요한 기능을 활용하라

     1) 가로-세로 화면이동을 잘 활용하라

     G센서(중력/gravity 센서)는 중력 작용에 의해 물체의 움직임이나 기울어짐을 인식하는 센서를 말한다. 즉 휴대폰을 가로 세로로 회전 또는 기울이거나 흔들었을  경우 이용자의 행동을 감지하고 거기에 맞는 최적의 화면 또는 동작을 구현할 수 있게 해준다. 이를 활용하면 간단하게는 세로의 이미지를 가로로 보이게 하거나 가로의 이미지를 세로로 보이게 할 수 있다. 특히 좁은 화면으로 인하여 가로사진 이미지 등이 작게 보일 경우 아래의 예시와 같이 가로 전환을 통하여 좀 더 확대된 이미지를 볼 수 있도록 지원할 수 있다.




     또한 동일한 어플리케이션에서도 화면전환을 통하여, 어플리케이션의 기능을 간략 또는 복잡(상세)하게 변경할 수 있는 기능을 제공할 수 있다. 아이폰 계산기의 경우 세로 화면에서는 간략한 일반용 계산기 기능을, 가로화면에서는 공학용 계산기 기능을 제공하고 있다.




     이러한 기능을 적용하는데 있어서 가로와 세로전환의 경우 이용자가 큰 서비스의 변화를 느끼지 못할 경우 꼭 가로모드를 지원해야 할 이유는 없다. 또한 가로모드와 세로모드의 설계는 분명히 다르게 구성되어야 한다.
아래화면은 아이패드에서 note 어플리케이션의 가로와 세로 화면이다. 가로화면에서는 스플릿 뷰를 적용하여 세로화면에서는 숨긴처리된 note 리스트가 왼쪽에 배치되어 있다.





2) 정전식 터치패드의 장점을 활용하라

     최근 들어 대부분의 터치방식 폰에 사용되는 정전식(사람 몸에서 나오는 미세한 전류를 통하여 동작) 터치 스크린은 감압식 (좌표와 압력을 인지하여 동작)에 비하여 빠르고 적은 힘으로 섬세한 조작이 가능한 것이 특징이다. 이러한 특성을 활용하여, 좁은 화면에서도 이용자가 쉽게 정보를 입력하거나 수정할 수 있도록 화면을 설계한다.

     알람 서비스의 경우 이용자가 화면상의 휠을 이용하여 날자와 시간을 설정할 수 있으며 휠을 돌리는 방향에 따라 이전-다음으로 이동하며, 휠을 돌리는 속도에 따라 휠이 돌아가는 속도와 지속시간이 변경된다. 라디오 서비스의 경우 이러한 기능을 활용하여 상단에는 좌우로 채널을 이동할 수 있도록 함과 동시에 아래의 조그셔틀을 통하여 회전방식으로 채널을 변경할 수 있도록 지원하고 있다.

     이러한 기능은 좁은 화면에서 이용자가 별도의 학습 없이 직관적으로 편리하게 기기 및 프로그램을 이용할 수 있으며, 조작과정에서 발생할 수 있는 오류를 최소화 한다.




     3) 유사 기기와의 디자인 통일성을 고려하라

     최근 유행하는 스마트폰의 경우 오프라인의 상품 및 기기들이 디지털화 되어, 어플리케이션을 통하여 스마트폰 상에서 구현 되고 있다.
     아래의 이미지는 IP-TV 서비스인 KT의 QOOK TV의 리모컨을 어플리케이션으로 개발한 예시이다. 해당 어플리케이션에서는 리모컨의 가장 중요한 요소인 채널전환과 볼륨 조절 기능을 강조하였으며, 아날로그 리모컨에선는 구현할 수 없는 채널별 현재 방송하는 프로그램명 및 시간대를 표시하여 이용자에게 차별화된 서비스를 제공하고 있다.

     또한 기존의 복잡한 리모컨에서 벗어나 가장 많이 이용하는 최소한의 기능으로 구성하고 해당 요소들을 오프라인의 리모컨의 기호 및 구성과 유사하게 배열하여 기존 리모컨 사용자들이 별도의 학습 없이 직관적인 이용이 가능하도록 구성되어 있다. 이는 아이패드 가이드라인에서 제시된 'Add Physicality and Heightened Realism - 현실세계와 같이 디자인하라'와 일맥 상통한다.





2. 좁은 화면을 효율적으로 활용하는 몇가지 기능들

     1) 상하좌우 화면 공간을 활용하라

     좁은 화면에서 유선과 같이 모든 요소(메뉴바, 연관된 서비스, 공지 등)를 한 페이지에 구현하는 것은 불가능한 일이다. 메뉴를 구분하고 해당 메뉴별로 메뉴를 부여하여 화면간의 이동을 지원하고 있다. 그러나 공지 같은 중요하지만 간단한 기능의 경우 아래 게임화면의 상단 뉴스 탭처럼 이용자가 현재의 화면에서 전환 없이 보고 닫을 수 있도록 지원한다.



     위룰(we rule)게임의 경우 중요한 고지는 게임화면 상단에 news 형식으로 작은 탭을 배치하였다. 이 경우 이용자는 게임을 하는 도중에도 최신 공지사항을 게임의 중단 없이 쉽게 숙지하고 해당 내용을 닫을 수 있다





     2) 페이지의 전환을 최소화 하라

     유선의 웹사이트와는 다르게 작은 화면에서 세로운 페이지로의 이동은 이용자의 입장에서는 이전 화면을 모두 가리게 되어 당황하게 되며, 또한 진행 중에 이전 페이지로의 이동을 어렵게 한다. 이 경우 ‘팝오버’와 ‘스플릿뷰’등의 기능을 사용하게 된다.
아래와 같이 간략한 데이터를 입력 받거나, 간략한 오류메시지를 출력 할 경우 별도의 새 창이 아는 팝오버를 사용한다.



 

     아래 아이패드의 이메일 전송 페이지와 같이 좀 더 큰 화면에서는 메일리스트 화면에서 메일쓰기 페이지가 이전 페이지를 배으로 모달뷰가 되어 작업을 진행하고, 작업이 완료되면 입력 화면이 사라지고 이전 페이지가 다시 활성화 되는 구조를 취하고 있다. 이 경우 이용자는 갑작스런 화면의 변화를 겪지 않게 되고 자연스러운 상호 화면전환을 경험하게 된다.

이러한 구성을 통하여 이용자는 주어진 미션을 완료하면 이전의 작업으로 돌아갈 수 있다는 확신과 함께,페이지를 찾기 위한 추가 작업을 하지 않아도 된다.


또한 아이패드와 같이 조금 더 큰 화면의 경우 ‘스플릿뷰’ 구성을 제공한다. 이를 통하여 이용자는 이용자가 페이지의 뎁스(depth)를 판단하면서 별도의 페이지 전환 없이 진행이 가능하다.

728x90
반응형
728x90
반응형




3. 여러 서비스간 통일성을 유지하라


     (1) 동일한 기능에는 동일한 색상과 아이콘을 배치한다

     모바일 기기에서는 유선과 다르게 많은 설명이나 에러메시지, 심지어는 ‘alt tag’를 적용하기도 곤란하다. 이에 여러 어플리케이션간 공통된 아이콘과 색상으로 한번 학습이 이루어진 이후에는 다른 어플리케이션에서 유사한 기능을 사용할 경우에도 기존 학습한 내용을 바탕으로 큰 어려움이 없이 이용이 가능하게 된다. 아래 메모와 메일어플리케이션의 경우 공유/이동/보내기 등의 긍정적인 기능은 파란색 버튼으로, 삭제와 같은 중요한(부정적)기능의 경우에는 빨간색 버튼과 v아이콘으로 통일되어 제공된다.





      또한 모바일디바이스의 비밀번호 기능에서도 이용자가 잘못된 비밀번호를 입력하였을 경우에도 진동과 색상을 통한 경고메시지를 출력한다.




     2) 어플리케이션 아이콘의 통일성

     스마트폰 어플리케이션의 경우 이용자가 서비스별로 다운로드 받고 해당 어플리케이션의 아이콘이 스마트폰의 배경화면에 저장하게 된다. 이러한 경우 동일한브랜드에서도 세분화된 여러 개의 어플리케이션이 제공되게 된다. 이러한 경우 어플리케이션의 아이콘도 통일화된 색상 또는 모양으로 구성하여, 이용자가 아이콘만 보고도 어플리케이션의 제조사 또는 성격을 쉽게 파악할 수 있도록 구성한다.
     아래 네이버의 아이콘을 보더라도 일부 서비스를 제외하고는 네이버의 co-color인 초록색을 기조색으로 사용하여 여러 다른 어플리케이션 아이콘 속에서도 쉽게 구분할 수 있게 된다.





4. 고객 편의의 서비스 제공

     1) 자동완성 기능

     PC에서 사용하는 키보드 입력방식 보다, 모바일 기기에서의 문자 입력은 훨씬 많은 노력과 시간이 들어가게 된다. 따라서 모바일 기기에서 검색시 자동완성 기능은 이용자에게 더 높은 만족도와 오타로 인한 검색결과의 오류를 최소화한다.
왼쪽 이미지의 경우 통함검색기능 이용시 이용자가 입력한 단어가 포함된 인기 검색어를 보여준다. 오른쪽 사전의 경우 이용자가 단어를 입력하면 해당 단어가 포함된 용어들이 가나다 순으로 출력되고 있다.




      2) 로딩 타임에 대한 표시

      모바일 기기를 이용하여 데이터를 호출하거나 어플리케이션을 구동할 경우 보유한 장비와 네트웍의 속도에 따라 상단한 시간이 소요되기도 한다. 이 경우 아래와 같이 서비스 제공을 위하여 어플리케이션이 구동되고 있다는 것을 이용자에게 명확하게 설명해야 한다. 또한 애니메이션 등을 적용하여 정상적으로 진행되고 있다는 메시지를 이용자에게 전해주는 것도 하나의 방법이다.






    3) 잘못된 용어의 사용

     모바일 서비스도 마찬가지로 이용자에게 노출되는 언어는 이용자의 입장에서 작성되어야 한다. 특히 서비스 오류가 발생하였거나, 이용자의 행동을 요구하는 경우에는 더욱더 신경 써서 제공되어야 한다.
그러나 아래와 같이 서비스를 사용하는 과정에서 오류가 발생 할 경우 일반 이용자는 알 수 없는 기술적인 용어를 제공한다면, 이용자는 혼란을 겪게 될 것이다. 이 경우 이용자는 유선과 마찬가지로 다음 과정을 진행할 수 없으며, 결국 해당 어플리케이션을 종료하고 사용을 중단하게 된다.
     또 하나의 이미지는 어플리케이션 구동 과정에서 이용자에게 조작 안내를 영어로 제공하고 있다. 영어에 익숙하지 못한 이용자의 경우 이용에 어려움을 겪을 수 있다.




     4) 일부 기능의 오작동에 따른 서비스이용 곤란

     아래 서비스의 경우 어플리케이션 구동시 이용자 휴대폰의 GPS 정보를 기반으로 이용자가 있는 위치를 파악하고, 해당 위치정보를 기반으로 해당 지역의 업체 정보를 출력해 주는 서비스이다.
그러나 이용자가 어플을 구동하는 시점에서 어떠한 오류로 인하여 위치정보를 파악하지 못할 경우, 이미지와 같이 계속 위치정보를 찾는 기호가 출력되면서 다른 기능이 작동하지 못하도록 설계되어 있다. 결국 이용자는 프로그램 종료는 물론 해당 단말기를 재 부팅 해야 하는 불편을 줄 수 도 있다.
     이렇듯 어플리케이션이 구동하는 과정에서 보조적인 요소에 장애가 발생할 경우 이용자에게 해당 기능을 다시 한 번 시도할 것인지, 아니면 우회적인 방법을 이용하여 이용할 것인지를 확인하여야 한다.
아래 어플리케이션의 경우에는 일정시간이 지나면, 위치정보를 찾지 못하였음을 고지하고

① 다시 한 번 위치정보를 확인할 것인지?
② 수동으로 위치정보를 입력하거나, 검색기능을 이용할 것인지?
③ 서비스를 종료 할 것인지에 대하여 이용자의 선택을 요구해야 한다.


728x90
반응형
728x90
반응형




아이폰과 차별화 되는 안드로이드 폰의 UI 특징을 살펴보도록 한다.
해당 장에서는 아이폰과 중복되거나 큰 차이가 없는 부분을 제외하고 버튼과 위젯 중심으로 간략하게 소개 한다.
안드로이드 폰에는 다음과 같은 특징이 있다.

A. 4버튼 : 아이폰이 버튼은 한개의 버(홈버튼)으로 구성되어 있고 나머지 기능은 화면상에서 제어되는 반면
               안드로이드폰은 전면에 통상 4개 그리고 측면에 추가적인 버튼(사진찍기 등)이 배열되어 있다.
               이를 통하여 기존 PC 입력장치에서 이루어지는 일부 기능을 사용할 수 있다.
B. 위젯 : 아이폰은 배경에 바로가기 아이콘과 폴더로만 구성되어 있는 반면,
              안드로이드 폰의 경우에는 추가적으로 위젯을 설정 할 수 있다.
C. 페이지의 구성 : 안드로이드 폰의 경우 5 또는 7페이지만을 구성할 수 있다. 
                          아이폰의 경우에는 1, 2, 3, 4, 5, ....순으로 페이지가 구성되나, 안드로이드 폰의 경우 가운데 페이지가
                          메인(홈) 페이지로 정의된다.



1. 버튼 및 제어창

      아이폰의 1버튼과 다르게 안드로이드 폰에서는 통상 4개의 버튼을 지원한다. 또한 화면도 아이폰과 다르게 5 또는 7개의 페이지 구성만이 가능하다. 이러한 구성에서 각각의 버튼은 홈, 메뉴(옵션), 검색, 이전(backspace)의 역할을 수행하며, 배열은 제조사에 따라 상이하다. 또한 상단에 제어창을 제공하여 기기의 통신기능 제어 및 주요 어플리케이션의 모니터링이 가능하다.

      아래 왼쪽 이미지는 메뉴버튼을 실행한 화면이다. 메뉴 머튼의 경우 각각의 어플리케이션에서 제어 및 추가적인 기능을 호출하는 역할을 수행한다. 오른쪽 이미지는 상단 제어창을 호출한 경우이다. 이러한 다양한 기능과 버튼을 전면 배치하여, 아이폰에서는 현재 실행중인 화면을 닫고 여러 댑스를 이동하여 설정해야 하는 것에 비하여, 주요 기능에 대한 접근성을 극대화 한 UI를 제공하고 있다.






2. 위젯

     1) 개념

위젯은 대기화면을 마음대로 꾸밀 수 있는 일종의 미니 애플리케이션이다. 일정, 이메일 등의 개인화 정보는 물론, 날씨, 뉴스, 주식정보등의 개인화 서비스, 페이스북, 트위터 등의 SNS서비스 알림 등 이용자에게 지속적으로 데이터가 업데이트 되고 자주 확인하는 서비스를 위젯으로 설정하면 일일이 애플리케이션을 구동하지 않고 화면에서 곧바로 변하는 내용을 체크할 수 있는 장점을 가지고 있다. 또한 휴대폰 주요 기능의 제어 또는 리모컨 기능등을 적용할 수 있다.


     다만 위에서 언급한 위젯기능은 아이폰에서는 제공되지 않으며, 안드로이드 계열의 스마트폰과 태블릿PC에서만 제공되고 있다. 이번 장에서는 위젯에 대하여 간략하게 학습하도록 한다.






  
   2) 위젯의 특성 - 크기

     오른쪽 이미지와 같이 위젯은 좁은 공간에서 다양한 정보를 제공하는 역할을 수행한다.
     이에 이용자의 입장에서 좁은 공간에서 얼마나 효율적으로 공간을 분할하고 분할된 공간에 이용자가 원하는 정보(위젯)을 배치할 수 있게 지원되는지도 UI상에서 매우 중요한 역할을 하게 된다.














     아래 이미지는 동일한 위젯이라 하여도 이용자에게 다양한 사이즈와 옵션을 제공하는 예를 보여주고 있다.
캘린더 위젯의 경우에는 3가지 사이즈 (2X1, 2X2, 3X3)를 제공하고 있으며 캘린더의 배경색상은 물론 주별 출력방식, 글자별 색상(주말, 휴일, 오늘 등)까지도 이용자의 취향에 맞추어 설정이 가능하다.

     날씨 위젯의 경우에도 두가지의 사이즈를 제공하며, 또한 사이즈에 따라 제공되는 기능에 제한을 두었다.작은 사이즈의 경우에는 단순하게 지역의 날씨만을 큰 사이즈의 경우에는 해당 지역의 날짜와 시간까지도 표시가 가능하게 설계 되었다.
또한 그리드를 정확하게 지켜, 여러 지역의 날씨위젯을 적용하여도 화면상에서 안정적인 구성을 제공하게 된다.






     3) 위젯의 특성 - 검색형

       우측 위젯의 경우 주요 포털의 검색 위젯을 모아 놓았다.
검색 위젯의 경우 다른 위젯과 다르게 개인 맞춤형 또는 지정된 정보를 출력해 주는 것이 아닌 단순 아이콘의 역할만을 수행하는 위젯이다. 즉 이용자자 해당 위젯에 검색어를 입력하거나 음성 검색을 on하는 것이 아닌, 단순히 검색페이지 또는 어플리케이션을 구동하기 위한 아이콘 역할만을 수행하고 있다.

       그럼에도 불구하고 유선의 검색바와 유사한 UI를 취하여 성격을 명확하게 하고 여기서 문자검색과 음성검색을 이용자가 선택하여 호출할 수 있는 UI가 추가 되었다.

 



























     4) 위젯의 특성 - 정보 호출형

       아래 위젯의 경우에는 이용자가 등록한 SNS서비스의 최신 데이터를 호출 하거나, 이용자의 휴대폰에 저장된 일정 또는 메모를 호출하여 보여주는 위젯이다.이 경우에는 이용자가 조회하고자 하는 서비스의 성격을 반영하면서 글자에 대한 가독성을 중심으로 제작된다.
       아래 트위터 위젯의 경우에도 다양한 사이즈와 사이즈에 따른 추가 기능을 적용하여 이용자가 본인의 취향에 맞추어 세팅할 수 있도록 지원하고 있다.




      5) 위젯의 특성 - 제어형

       제어형의 경우 위젯에서 휴대폰의 기능을 제어하거나 (벨-진동, 화면 밝기 조정, 와이파이 on/off 등) 현재 세팅한 정보의 출력과 수정을 지원(알람 설정 등)하는 역할을 수행한다.이 경우 복합적인 기능을 어떻게 구현할지가 중요한 요소로 평가 된다. 

       오른쪽 이미지의 맨 상단에 위치한 위젯의 경우 휴대폰의 ‘벨-진동-무음’을 제어하는 위젯이다. 이 경우 이용자가 해당 위젯을 클릭 할 때마다 3가지의 기능이 순서를 가지고 전환 되도록 설계되었다. 물론 전환시마다 위젯의 디자인은 변경된다.

       또한 하단 위젯의 경우에는 다양한 휴대폰의 기능을 하나의 위젯에서 제어할 수 있도록 지원된다. (와이파이, 블루투스. GPS, Sync, 화면 밝기 조정)이 경우에는 각각의 기능이 다른 기능에 영향을 끼치지 않고 독립적으로 적용되는 성격을 가지고 있다.














728x90
반응형
728x90
반응형




개요

     최근 삼성전자의 갤럭시탭과 애플의 아이패드가 국내에 출시되면서 국내에서도 태블릿PC에 대한 관심이 높아지고 있다. 다만 태블릿 PC의 경우 새로운 OS가 적용된 것이 아니라, 기존 스마트폰에 적용된 OS를 기반으로 운용되어 스마트폰 UI와 큰 차이가 발생하지는 않는다.
     다만 스마트폰 대비 2배 이상의 해상도와 크기를 가지고 있어 어플리케이션상의 GUI에서는 많은 차이를 보이고 있다.
또한 이용자의 사용목적 또한 기존 스마트폰과는 다른 UI를 나타내기도 한다. 특히 E-Book등에서 많은 시도가 이루어지고 있어 이에 대한 스터디와 관심이 요구된다.

     이번 장에서는 사례 중심으로 태블릿PC의 UI를 학습하도록 한다.




     1) drugs.com Pill Identifier - 팝오버(Popover)

      팝오버는 사용자가 어플리케이션을 이용하는 과정에서 네비게이션 바의 컨트롤 버튼을 클릭하거나 화면에서 지정된 링크를 클릭 하였을 때 기존 화면위에 오버되어 출력되는 기능이다.

     팝오버는 기본적으로 한 개를 초과하여 출력하지 않으며 화면의 절반 이상을 차지하지 않는다. 또한 팝오버는 팝오버를 출력하게 만든 링크 또는 컨트롤 버튼을 가리키는 화살표를 가지고 있다. 이를 통하여 출처와 어떠한 액션을 취하고 있는지를 강조할 수 있다.

     아래는 'drugs.com Pill Identifier'어플리케이션에서 이용자가 소지한 약품을 조회하기 위하여 팝오버가 사용된 좋은 예를 보여준다. 특히 팝오버를 통하여 복수의 정보를 선택, 입력하여, 조회할 수 있는 기능을 학습할 수 있다.
아래와 이미지는 같이 이용자가 약품검색 클릭버튼(search)을 클릭하였을 때 출력되는 팝오버를 보여준다.



     아래 이미지와 같이 해당 어플리케이션에서는 세가지 방법으로 소지한 약품의 내용을 조회 할 수 있다.

     하나는 조회수가 높은 약품 list에서 찾는 방법 (popular searches) 이고 두 번재는 직접 약품명을 입력하여 찾는 방법이다.

     그리고 마지막이 약의 모양(shape)과 색상(color)을 선택하여 조회하는 방법이다.이 경우에도 조회 조건에 따라 계속 팝오버가 새로 출력되는 것이 아니라 해당 위치에서 다음 페이지로 전환되는 방식을 취한다. 이는 이용자의 입장에서 화면의 복잡함을 피할 수 있고, 또한 입력오류를 최소화 할 수 있는 장점이 있다.




















     아래 이미지는 이용자가 ‘모양’과 ‘색상’을 선택하는 팝오버 화면이다.



이용자가 모양과 컬러를 선택한 이후 이용자가 입력한 내용이 맞는지를 확인하는 과정을 거치고 이용자가 최종 컴펌(search)을 하게 되면, 아래와 같이 결과 데이터를 출력하게 된다. 이러한 복잡한 입력과정을 팝오버를 통하여 초보자도 큰 어려움 없이 원하는 결과를 얻을 수 있다.























     2) 트위터 - 스플릿뷰(split view)

     스플릿뷰(Split View)는 용어 그대로 화면을 좌우로 분할하려 두 개의 화면으로 구성한 것을 의미한다. 통상적으로 왼쪽이 영역에는 1) 메뉴 2) 목록 등의 고정된 내용을 출력해 주고, 오른쪽에는 왼쪽영역에선 선택된 대용에 따라 세부내용 (메모 등) 또는 하위 정보/메뉴를 보여준다. 또한 화면 분할 차원에서는 통상적으로 왼쪽영역이 오른쪽 영역보다는 폭이 좁으며 간략하고 정형화된 모양으로 구성된다.

     아래 메모서비스(왼쪽이미지)의 경우 스플릿뷰 왼쪽에는 메모장의 목록(list)을 출력해주며, 이용자가 해당 메모를 선택하였을 경우 오른쪽에 상세 내용으 출력하여 준다. 아이패드 세팅메뉴(오른쪽이미지)의 경우에는 왼쪽에는 세팅메뉴의 최상위 카테고리를 보여주며, 오른쪽에는 왼쪽메뉴 선택에 따라 하위메뉴 또는 상세세팅 내용이 출력된다.



     아래 이미지는 소셜 서비스인 트위터(twitter)의 아이패드 버전이다.스플릿뷰 왼쪽엔는 트위터의 최상위 메뉴가, 오른쪽에서는 해당 메뉴의 하위 서비스가 출력된다. 왼쪽메뉴를 잘 살펴보변 일반 웹사이트의 메인메뉴 역할을 하는 것을 볼 수 있다. 또한 해당 메뉴안에서 발생한 이벤트 (새 글이 올라옴, 새로운 메시지의 도착)를 표시하여 주기도 한다. (@Mentions와 Message 메뉴) 또한 효율적인 페이지의 활용을 위하여 메뉴 부분을 아이콘으로 처리하여 공간을 최소화 하고 메시지를 노출하는 3단 구성을 취하기도 한다.

 

 

 




     3) 오프라인의 경험을 온라인으로: 메모,연락처,캘린더

     아래의 서비스는 위에서 언급한 다른 서비스와 다르게 이미 이용자들은 오프라인에서 실 제품을 이용하고 학습하여 왔다. 이 경우 오프라인의 실 제품과 유사하게 디자인하여, 추가적인 학습 없이 바로 이용이 가능하게 된다.




728x90
반응형
728x90
반응형



개요

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) 컬리키의 가변기능

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

728x90
반응형
728x90
반응형




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



728x90
반응형
728x90
반응형



3. 사용 환경을 고려하라

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

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

① 생방송의 상황바

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



② VOD의 컨트롤바

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




     2) 이용자 편의기능 제공

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





     3) 로딩타임에 대한 표시

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

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

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


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

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


728x90
반응형
728x90
반응형




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

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

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

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




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



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

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

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



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


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


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


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


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




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

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



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




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

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


    - 카드사의 결제 내역조회

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


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




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


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

728x90
반응형

+ Recent posts