애플 아이폰 UX 분석 (2)

이번 호에서는 먼저 분석 방향 및 방법에 대한 상세한 설명을 하고 본격적으로 아이폰의 외관 UI, 특히 하드웨어 버튼들의 UX에 대해 집중적으로 알아본다. 아이폰의 하드웨어 버튼에 대한 UX 전략은 "어떠한 화면에서든 동일한 기능 제공"으로 극도의 간결성과 학습의 용이성을 장점으로 내세운다.

 

분석에 들어가기에 앞서
본격적인 분석에 들어가기에 앞서 먼저 이 연재의 분석 방법을 자세하게 살펴 보기로 하겠다. 지난 회에 분석 방향에 대해 간단하게 소개할 때 크게 2가지 방법을 사용한다고 하였었다. 바로 체크리스트와 UX 케이스 기반의 walkthrough 이다.

 

체크리스트
아래 체크리스트는 벤 슈나이더맨(Ben Shneiderman)의 "8 Golden Rules"와 제콥 닐슨 (Jakob Nielsen)의 "10 Heuristics"를 합하여 휴대폰용으로 다시 만든 체크리스트이다. 이 체크리스트는 아래 설명한 UX walkthrough와 feature별 평가에서 세세한 UI의 품질을 평가할 때의 기준으로 활용된다.

 

    * 일관성 (Consistency): 전통적인 UI의 일관성 체크
          o 8 Golde Rules: strive for consistency
          o 10 Heuristics: consistency and standards
    * 인간의 기억력에 의존하지 말고 암기를 요구하지 말 것

          o 8 Golde Rules: reduce short-term memory load
          o 10 Heuristics: recognition rather than recall
    * 탐험의 자유를 제공: 실행 취소 등을 제공. 사용자가 실수를 해도 괜찮은 여유를 제공

          o 8 Golde Rules: permit easy reversal of actions
          o 10 Heuristics: user control and freedom
    * 에러 방지 및 쉬운 처리
          o 8 Golde Rules: offer simple error handling
          o 10 Heuristics: error prevention/Help users recognize, diagnose, and recover from errors:
    * 시스템의 상태를 사용자에게 적절하게 알릴 것
          o 8 Golde Rules: offer informative feedback
          o 10 Heuristics: Visibility of system status
    * 사용자의 진화를 보조: 고급 기능이나 효율적인 사용법 제공
          o 8 Golde Rules: enable frequent users to use shortcuts
          o 10 Heuristics: flexibility and efficiency of use
    * 적절한 도움의 제공
          o 10 Heuristiscs: Help  & Documentation 중 Help
    * 한 태스크의 UI 사용의 시작과 끝을 명확하게 알릴 것
          o 8 Golden Rules: design dialogue to yield closure
    * 익숙함의 편함을 제공
          o 10 Heuristics: match between system and the real world

    * 감성 디자인 / 간결정제한 느낌
          o 10 Heuristics: Aesthetic and Minimalistic Design

이 두가지 원칙 중에서 이번 분석에서 제외된 아이템들은 다음과 같다.

• 10 Heuristics 중 Documentation from Help & Documentation: iPhone은 종이 메뉴얼이 따로 없다. 따라서 documentation 부분은 제외하였다.
• 8 Golden Rules 중 support internal locus of control: 이 원칙은 사용자가 시스템을 주도하는 위치에 두라는 것이다. 바꿔 말하면 사용자가 시스템을 완전히 조종하는 파워를 가지고 있다는 생각을  들게끔 시스템을 디자인 하라는 것이다. 이는 특히 고급 사용자의 경우에 해당하는 원칙인데, 휴대폰 같이 일반 사용자들이 압도적으로 많은 제품에서는 적용하기가 애매하다. 일반 사용자들은 자신이 시스템을 완전히 조작하고 있다는 자신감보다는 시스템이 자기가 하고 싶은 것을 알아서 척척 해주고 뒤에서 어떻게 처리되었는지 골치 아프게 알고 싶은 마음이 없는 욕구가 더 크다. 즉 자신의 지시대로만 움직이는 로보트보다 알아서 일을 처리해 주는 서비스 제공자로서의 UX를 더 원하기 때문에 본 분석에서는 이 원칙을 제외하였다.

UX 케이스 Walkthrough
아래는 아이폰 분석을 위해 뽑아 본 UX 케이스들이다. 

 

    * 전화 걸기
          o 휴대폰을 꺼내어 외우고 있는 번호를 키패드에 쳐서 전화를 건다.
          o 주소록으로부터 사람/번호를 찾아 전화를 건다
          o 스피드 다이얼을 통해 전화를 건다.
          o 최근 수신 목록에서부터 사람/번호를 찾아 전화를 건다
          o 최근 송신 목록에서부터 사람/번호를 찾아 전화를 건다
          o 가장 최근에 걸었던 번호로 다시 건다.
          o sms 메시지로부터 전화를 건다.
    * 전화 받기
          o 전화가 와서 휴대폰을 꺼내 전화를 받는다.
          o 회의 도중 전화가 와 벨소리가 울려서 급하게 이를 막으려 한다.
    * 통화 중 상황
          o A와 통화 중 B에게 전화가 와서 A를 hold 해 놓고 B에게 "잠시 후에 내가 전화할께" 라고 말해두고 A와 다시 통화 한다
          o ARS에 전화를 했다. 통화 도중 번호를 입력해야 한다.
          o A와 통화 중에 A가 B의 전화번호를 물어봐서 주소록으로부터 이를 찾아 A에게 알려준다.
          o 통화 중에 문자가 날아와서 읽어보고 나서 다시 통화한다.
          o 통화 중에 메모 등에 기록을 해야 할 상황이 발생하였다.
    * 문자 보내기
          o 주소록에서 사람/번호를 찾아 문자를 보낸다.
          o 최근 수신/송신 목록에서 사람/번호를 찾아 문자를 보낸다.
          o 오늘 저녁에 만나기로 한 4명에게 변경된 만남의 장소를 알리려 문자를 보낸다.
    * 문자 보기
          o 문자가 와서 이를 읽는다.
          o 어제 받은 문자를 오늘 본다.
          o 회의 도중 문자가 왔는데 읽지는 않았다. 나중에 본다.
          o 통화 도중 온 문자를 읽지 않았다. 통화 후에 본다.
          o 수신자별로 문자를 본다.
    * 문자 관리
          o 받은 문자들 중 필요없는 문자들을 골라서 삭제한다.
          o 문자를 전체 삭제한다.
          o 주요 문자를 보관한다.
    * 음악 듣기
          o 아이튠즈로부터 음악을 다운로드 하여 음악을 청취한다.
          o 음악을 듣는 도중 전화가 와서 전화를 받는다.
    * 사진/비디오 촬영하기
          o 인물 사진을 촬영하고 주소록의 사진 정보 칸에 넣으려고 한다.
          o 촬영한 사진을 컴퓨터로 옮겨 둔다.
          o 앨범 등을 만들어 사진을 분리 보관한다 (휴대폰 자체 기능 또는 컴퓨터를 통해서)

이 UX 케이스와 체크리스트는 다음과 같이 콤비를 이루며 평가에 쓰인다.

• 전체적으로는 사용자의 체험을 체크하면서 장점, 단점 및 특이한 점을 기록
• 세세하게는 checklist를 기반으로 UX 케이스별로 사용자가 직면하게 되는 UI의 품질을 점검

 Feature별 점검
1회에서 분석 범주를 간단히 소개했었는데 여기서 자세하게 나열하면 아래와 같다.

• 외관 UI (Hardware UI): 버튼 & 스크린, 기타 제품 디자인 측면의 UX
• 대기 화면 (Idle Screen)
• 홈스크린 (Home Screen)
• 상태 바 (Status Bar 또는 Annunciator)
• 터치 인터랙션: 제스쳐, 터치 입력 등
• 내비게이션 스타일
• 텍스트 입력 (한/영)
• 기본 통화 기능: 폰 (Phone), SMS, 주소록 (Contacts)
• 기본 애플리케이션: 달력, 시간 애플리케이션 (Clock), 계산기, 메모 (Notes)
• 영상 관련 (Camera & Video): 카메라 (Camera), 사진 (Photos)
• 디지털 뮤직 서비스: 아이튠즈와 아이포드 (iTunes & iPod)
• 인터넷 애플리케이션: 사파리 (Safari), 유튜브, 주식 (Stocks), 날씨 (Weather), 이메일
• 기타: 지도 (Maps)
• 셋업: 설정 (Settings)
• 레이블 및 표현 (Wordings)
• 비주얼 UI 및 정보 가시화 (Visual UI & Information Visualization)

이 Feature별 점검과 체크리스트는 다음과 같이 콤비를 이루며 평가에 쓰인다.

• 각 feature 별로 그 목적을 규명하고 그 feature를 이용하는 UI의 전체적 품질을 평가
• 세세하게는 그 feature가 목적하는 바를 이루는 UI의 스텝 및 각 스텝에서의 UI의 사용성을 체크리스트로 점검

Walkthrough 가 아이폰의 feature를 한데 묶어놓고 가로지르며 전체적인 UX를 보는 것이라면 Feature별 점검에서는 아이폰의 feature들을 하나 하나 별도로 떼어넣고 각 feature를 상세하게 분석하는 방향을 취한다. 이를테면 walkthrough에서는 "SMS를 보낸 사람에게 전화를 건다"와 같이 SMS라는 feature와 전화통신이라는 feature가 하나로 엮인 UX case를 보는 반면 feature별 점검에서는 SMS는 SMS대로, 전화통신은 전화통신대로 각각의 UX를 분석하는 것이다.

 

이를 숲과 나무의 속담에 비유하여 정리해 보면 다음과 같다.

• 숲을 보는 방법: feature별 점검 / walkthrough
• 나무를 보는 방법: feature별 점검 또는 walkthrough 하면서 체크 리스트로 UI 점검
• 굳이 하나 더 붙이자면, 숲을 산책하면서 느낀 체험: UX walkthrough

Feature별 점검: 외관 UI
지금부터 본격적인 분석에 들어간다. 가장 먼저 아이폰의 외관 UI부터 보도록 하자.

 

아 이폰은 풀터치 스크린 (full touch-screen) 휴대폰답게 최소화된 하드웨어 UI로 구성되었다. 터치 스크린을 제외하고 사용자가 손가락으로 누를 수 있는 버튼은 4개이다. 심카드(SIM card)를 넣는 핀홀 (pin hole)을 굳이 버튼으로 보고 세어도 총 5개의 버튼만이 제공되는 것이다.  도표 1에 각 하드웨어 버튼의 인터랙션이 정리되어 있다. 사진 1과 함께 보기 바란다.
 

1	전원 On/Off 버튼	Sleep/Wake (소프트 전원) Sleep 상태에서 한 번 누르면 대기 화면으로 진입 Wake 상태에서 한 번 누르면 어느 화면에서든 Sleep으로 전환   전원 On/Off (하드 전원) 길게 누르면 어느 화면에서든 전원을 완전히 꺼버린다 전원이 완전 꺼져 있는 상태에서 한 번 누르면 켜진다.   전화 수신의 경우 전화가 올 때 한 번 누르면 벨소리를 소음시킨다 전화가 올 때 두 번 연속 누르면 보이스메일로 콜을 보낸다
2	홈 스크린 버튼	Sleep 상태에서 한 번 누르면 대기 화면으로 진입 어느 화면이든 Wake 상태에서 한 번 누르면 홈스크린으로 복귀
3	소리 조절 버튼	Vol+와 Vol-가 시소 형태로 구성된 하나의 버튼 wake 상태에서 대기 화면을 제외하고는 어느 화면에서든 소리 조절로만 사용됨
4	소음 및 진동 On/Off 버튼	똑딱이 형식의 버튼으로 어느 화면에서든 소음 (mute)과 현재 설정된 소리 크기를 토글 (toggle)하는 버튼
5	핀홀 (사실상 버튼이 아님)	SIM 카드 슬롯을 뺄 때 여기를 핀과 같이 뾰족한 물체로 찌르는 구멍

도표 1: 아이폰 하드웨어 버튼의 인터랙션 요약

     

사진 1: 아이폰의 외관 버튼들

 

Sleep/Wake는 소프트 파워라고도 하는데 전원을 완전히 끄는 것이 아니라 화면만 꺼두는 상태이다. 폴더형 휴대폰에서 폴더를 닫는 정도에 해당한다.

 

화 면이 따라오는 제품의 하드웨어 UI, 특히 물리적 버튼은 소프트 버튼처럼 경우에 따라 숨길 수 있는 것이 아니라 언제나 사용자에게 노출되어 있다. 하드웨어 버튼의 이러한 성격으로 인해 UX 기획을 할 때 하드웨어 버튼에 대해서는 대개 아래 세 가지 전략 중 하나를 취하게 되어 있다.

• 화면의 내용과 일치하는 않는 경우 아무런 기능을 하지 않음: 이를테면 TV 리모콘에서 DVD 영화를 보고 있는 상태에서 채널 변경 버튼을 누르면 TV는 그냥 IR 신호를 무시하고 아무런 피드백을 주지 않는다. 장점은 단순함에 사용자가 실수로 버튼을 눌렀을 때 예기치 않은 결과를 방지한다는 점이고 단점은 아래에 설명했듯 자원의 낭비가 발생한다.
• 모든 화면에서 어떠한 형태로든 기능 부여: 이는 하드웨어 UI 자원의 낭비를 피하는 전략이다. 위의 채널 변경 예와 같이 아무런 기능을 안하도록 만들면 사실상 그 버튼 자원은 활용되지 못한 것으로 낭비라고 봐야 한다. 이럴 때 흔히 1:N 형식으로 한 버튼에 다 기능을 부여한다. 장점은 자원의 철저한 활용이고 단점은 복잡도가 증가한다는 것이다. 참고로 "모든 화면"은 원칙상 그렇다는 것이고 실제 UX 프로젝트에서는 "대부분의 화면"에서 "최대한 기능 부여"가 보다 현실적인 접근 방식이다.
• 어떠한 화면이든 동일한 기능 부여: 일관성에 올인한 케이스이다. 어떤 화면에서는 동일한 하나의 기능만 수행하는 것이다. 장점은 극도의 단순함과 학습의 용이성 (easy-to-learn)이고 단점은 화면에서 돌아가는 상황과 전혀 일치하지 않았을 때 사용자에게 주어지는 혼동 및 사용자가 "이 화면에서는 이 버튼이 이렇게 작동할 듯 하다"며 조작했을 때 전혀 예상했던 것과 다른 행태를 보이는 것이다.       

아이폰의 하드웨어 버튼들은 적어도 필자가 확인한 범주 안에서는 어느 화면에서든 동일한 하나의 기능만을 수행한다. 이를테면 소리 조절 버튼의 경우 어느 애플리케이션의 어느 화면에서든 소리 조절에만 사용되는 것이다. 이런 철저한 일관성은 간단/명료/정제 라는 애플 제품군에 전반적으로 흐르는 UX의 철학을 잘 준수하는 전략이다.

 

이러한 일관성은 학습의 용이성을 높인다. 사실상 위에 설명한 세 번째 전략의 단점 - 혼동과 예상했던 것과 다른 행태 - 는 이러한 학습의 용이성으로 쉽게 극복할 수 있는 여지가 있다 (그렇다고 모든 사용자들이 꼭 쉽게 극복한다고 단정해서는 안된다.) 어째든 하나만 기억하면 되기 때문이며 몇 번 반복하면서 시행착오를 겪다보면 자연스레 학습이 된다.

 

이렇게만 말하면 세 번째 전략이 가장 효과적인 것처럼 보이지만 반드시 그런 것만은 아니며 주어진 제품의 성격과 사용 환경 그리고 대부분의 사용자들이 가지고 있는 멘탈 모델에 따라 결정해야 한다. 또한 세 번째 전략은 가장 극단적인 전략으로 말이 쉽지 진짜 그렇게 결정을 내리고 실천에 옮기에 데에는 많은 내부 저항에 부딪히는 것이 대부분의 케이스이다.

 

어떠한 화면에서든 동일한 기능을 제공하는 전략을 채택한 경우 의외로 화면에 버튼 조작에 따른 비주얼 피드백을 제공하지 않는 UX 케이스들을 보게 되는데 이는 적절하지 않은 practice이다. "어떤 화면에서든 동일한 기능을 하는데 무슨 화면에 부가적으로 알리는가?" 라고 생각할 수 있으나 화면에 적절한 피드백을 주는 것은 언제나 사용자들을 안심 - 즉 기능이 제대로 수행되었음을 확인 - 시키는 역할을 하기 때문에 가능하면 비주얼 피드백을 줘야 한다. 아이폰의 경우 다음과 같은 비주얼 피드백을 때에 따라 오디오 피드백과 함께 제공한다.

• 소리 조절: 사진 2 참조
• 소음<->소리 토글: 사진 3 참조
• sleep/wake 전환용 전원 on/off: 화면 전체가 즉시 꺼지거나 켜진다.
• 하드 전원 off: 길게 누르면 사진 4와 같은 화면을 디스플레이하면서 사용자에게 재확인한다.
• 하드 전원 on: 애플 로고가 화면 중앙에 나온면서 부팅이 시작된다. 
• 홈스크린 버튼: 화면 전체가 홈스크린으로 즉시 바뀌거나 켜진다.

 

사진 2: 소리 조절 비주얼 피드백

    

  

사진 3: 소리<->소음 토글 관련 비주얼 피드백

 

사진 4: 하드 전원 off용 재확인 화면

 

아 이폰의 하드웨어 버튼에 대한 전반적인 느낌은 간단명료하다는 것이다. 이는 앞서도 말했듯 세 번째 전략의 특징이기도 하다. 다만 너무 확고한 일관성을 밀어부치다보면 무리가 나오기 마련인데 아이폰에서도 이런 실수를 한 부분이 있다.

 

사진 5는 아이폰에 내장된 유튜브의 와이드 화면이다. 이 화면을 보면 소프트 볼륨 바 (volume bar)가 수평으로 놓여 있고 오른쪽으로 바의 동그란 썸(thumb)이 올라갈수록 소리가 커진다는 것을 알 수 있다. 실제 터치 스크린 상에서 이 썸을 드랙&드롭 (drag&drop)하여 소리 조절을 할 수도 있다. 문제는 이 볼륨 바와 하드웨어 소리 크기 조절 버튼과의 방향이 전혀 일치하지 않는다는 것이다. 수평으로 아이폰을 눕혔을 때 "소리 크기" 버튼은 왼쪽을 가리키고 "소리 작게" 버튼은 오른쪽을 가리키는데 이것이 소프트 볼륨 바의 방향과 완전히 반대이다. 과도한 일관성의 고집은 이러한 무리수를 두게 되는 것이다.

 

사진 5: 유튜브 와이드 화면에서 소리 크기 조절의 문제

 

이번 호에서는 외관 UI의 버튼들을 알아 보았다. 다음 호부터 아이폰의 화면 속으로 뛰어들어가 본격적인  해부를 해보겠다.
 

출처 : www.caerang.com , blog.caerang.com