[12장 인터랙션디자인 Part1](천윤서)

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

[12장 인터랙션디자인 – 천윤서]

 

 

 

 

“디자인은 단지 어떻게 보이나냐 또는 어떤 느낌을 주느냐에 관한 것이 아니다. 디자인은 어떻게 작동하느냐이다.” – 스티브잡스

 

 

 

 

 

 

 

1. 인터랙션 디자인이란

 

 

  • 디지털 제품이나 서비스를 디자인할 때 반드시 고려해야 할 네가지 : 콘셉트, 정보구조, 인터페이스, 인터랙션 디자인

 

  • 인터랙션 디자인은 그 중에서 사용자의 행위에 대한 시스템이 어떤 반응을 하는지를 전반적으로 디자인하는 단계

 

  • 최근 인터랙션 디자인의 중요성이 급속하게 커짐

 

  • 동일한 정보를 가지고 있다고 할지라도 그 정보를 어떤 순서와 방식으로 전달하느냐에 따라 사용자가 느끼는 사용성이나 유용성 그리고 감성이 달라질 수 밖에 없음

 

 

 

 

 

2. 인터랙션 디자인의 개념

 

 

  • 사람들이 디지털 시스템을 사용한다는 사실조차 인식하지 못하고 자연스럽게 자신이 원하는 일을 할 수 있도록 하는 것이 이상적인 인터랙션 방식임

 

  • 이런 무의식적이고 자연스러운 인터랙션을 위해서는 ‘플로우’와 ‘투명성’이라는 특성이 중요한 역할을 함

 

2.1 최적의 경험

 

 

플로우

 

 

  • 어떤 행동에 깊이 몰입된 상태

 

  • 게임, 스포츠에 집중하는 경우 오로지 대상과 나만이 존재한다는 느낌

 

  • 실제 일의 생산량을 높이는 데도 큰 효과가 있음 (글쓰기, 디자인 등의 업무)

 

  • 플로우 달성의 제반 조건
    – 개인이 수행하는 과업의 난이도가 일정 수준 이상의 도전을 요구하지만 개인의 능력 범위를 초과하지는 않는 수준이어야 함
    – 과업 목적이 명확하고 이 목적을 달성하기 위한 과정에서 신속한 피드백이 이루어져 진행 상황을 바로 확인할 수 있어야 함

 

  • 예시 : 영화 아바타에서 주인공이 아바타로서의 삶에 적응해가고 만족감을 느낌. 이 것의 직접적인 이유는 인간으로서의 신체에서 느끼는 오감을 아바타의 신체에서도 완벽히 재현하도록 한 시스템적 지원이 있었기 때문임

 

  • 투명성 : 위 사례와 같이 사용자를 기능적으로 충분히 지원하되 사용자를 방해하는 일이 없도록 스스로를 드러내지 않는 시스템의 특성

 

2.2 투명성

 

 

 

 

  • 사람이 시스템을 통해 과업을 달성하고자 할 때 시스템이라는 기계적 요소가 사람에게 느껴지지 않아서 사람이 자신의 목적을 직접 달성하고 있다고 생각나게 만드는 것

 

  • 예시 : 잘 쓴 소설에서 문체나 줄거리 전개에서 소설가의 존재를 느끼지 않고 독자와 주인공이 완전하게 일체화되거나 소설 속 상황에 독자가 실재하는 것 같은 몰입을 가능하게 함. 이 때 소설가의 존재가 느껴지지 않는 것처럼

 

  • 과업 수행의 과정에서 디지털 제품 및 서비스의 존재가 느껴지지 않으면, 디지털 제품 및 서비스와 사용자 간의 소통 과정이 투명하다고 할 수 있음

 

3. 인터랙션 디자인의 지침

 

 

디지털 서비스가 투명해 사용자에게 플로우의 경험을 보다 효과적으로 제공하기 위한 세 가지 조건

 

 

  • 첫째, 상충되는 요인들이 많은 여건 속에서 사용자가 자신이 원하는 과업을 조화롭게 수행하게 도와주는 것 (기본 지침)

 

  • 둘째, 과업을 수행하는 과정에서 사용자가 번거롭지 않도록 불필요한 행동을 최소화하는 것 (부정적인 요소들을 제거하기 위한 지침)

 

  • 셋째, 사용자가 과업을 수행하면서 불편을 겪을지도 모르는 사항에 대해 사려 깊게 행동하는 것 (긍정적인 요소들을 추가하기 위한 지침)

 

3.1 조화로운 행동을 위한 인터랙션 디자인 지침

 

 

제 1지침 : 간단하지만 유연한 인터랙션

 

 

 

 

  • 사람과 시스템이 상호작용할 때 그 과정에서 발생하는 단계의 수는 최대한 적을수록 좋음.

 

  • 그러나 동시에 사용자가 제품이나 서비스를 조정할 수 있는 여지를 주어야 하며 사용자가 제품의 목적을 분명히 파악할 수 있도록 해야 함

 

  • 예시1 : 마이너리티 리포트의 거미로봇. 인물 수색 및 탐지, 어디든 이동할 수 있고 여러개 사용 가능, 동시 다발적 탐지 가능하여 유연하게 사용

 

  • 예시2 : 아이폰의 앱스토어. 앱 설치 과정은 쉽고 간단.(검색-앱설명-가격Tap-설치 4단계로 마침). 무수히 많은 앱 존재하고 사용자 특성에 맞추어 조정 가능함

 

제 2지침 : 보편적이지만 예외적인 상황을 고려한 인터랙션

 

 

 

 

  • 사용상이 가장 높은 한두 개의 기능을 가장 두드러지고 알기 쉽게 제시하되, 나머지 기능들도 옵션으로 제공해야 함

 

  • 예시1 : 마이너리티 리포트의 거미로봇. 얼음물에 몸을 담궈 거미로봇이 적외선 탐지로 감지 불가했으나, 실수로 내뱉은 공기방울로 존재 알아내고 전기자극으로 탐색 수행. (보편적인 상황의 인터랙션: 적외선으로 탐지, 예외적인 상황의 인터랙션 : 전기 자극을 이용하여 탐지)

 

예시2 : 구글 크롬. 검색창과 상태표시줄 없이 주소창 하나만 배치 (사용 가능성이 가장 높은 것들을 우선적으로 디자인하라는 지침을 준수한 것) 그러나 동시에 옵션메뉴를 통해 다운로드 경로나 글꼴 등 세부 사항을 자신이 원하는 대로 커스터마이즈할 수 있음 (작은 가능성도 완전히 배제하지 않는다는 지침을 준수한 것)

 

 

제 3지침 : 즉각적이지만 지체를 감안한 인터랙션

 

 

 

 

  • 사용자의 행위에 즉각적으로 반은하도록 최적화하되 어쩔 수 없이 발생하는 지체를 감안해서 디자인하라는 것. 기술적으로 해결 불가능할 경우 프로세스가 지체되고 있다는 점을 사용자에게 분명히 알려야 함.
    -> 사용자가 시스템이 행동을 완료하기를 기다리던지 행동을 중간에 취소하던지 옵션 제공

 

  • 예시1 : 마이크로소프트 워드 2010. 2007에 비해 파일을 읽어들이는 속도를 획기적으로 단축시켰고, 현재 얼마나 읽어 들였는지 퍼센트로 정보를 제공해주고 창 하단에 사용자가 파일을 열고 있는 중에도 이를 취소할 수 있도록 메뉴 버튼 제공하고 있음

 

제 4지침 : 순응적이지만 대화가 가능한 인터랙션

 

 

 

 

  • 사용자의 명령에 일단 그대로 따르지만 필요한 경우 사용자가 원하면 다른 행동을 할 수 있는 가능성을 열어 둔 인터랙션

 

  • 예시1 : 구글맵, 차량용 네비게이션. 사용자가 출발지에서 목적지까지 가는 가장 빠른 길을 요청할 경우, 가장 빠른 길을 보여주며, 길이 막히는 상황에서 다시 물으면 몇 가지 대안을 제시하고 추가적인 대답 제공함

 

결론 : 조화로운 인터랙션을 위한 지침은 모두 두 가지 상반되는 사용성의 지침들 간의 조화를 강조함. 상반되는 두 가지 조건 사이에서 조화롭게 균형을 이룸으로써 사용자 입장에서는 균형을 맞추는 것에 신경 쓸 필요없이 자신이 하고자 하는 과업을 수행할 수 있도록 하는 것이 조화로운 인터랙션의 지침임

 

 

 

3.2 부정적인 요소를 줄여주는 인터랙션 디자인 지침

 

 

 

제 1지침 : 사용자에게 무엇인가를 암기하도록 요구하지 말 것

 

 

 

 

  • 힌트를 보고 재인(recognition)하는 것은 어렵지 않지만 완전하게 암기하는 것은 어려운 일. 파일을 어디 저장했는지 정확한 위치를 기억해야한다면 어려울 것임.

 

  • 예시1 : 초성검색 서비스(아이폰의 launchy)

 

 

 

제 2지침 : 사용자에게 세팅을 바꾸도록 강요하지 말 것

 

 

 

 

  • 설치나 실행 과정에서 설정을 재조정할 일이 생기면 몰입에 방해를 받고 이 빈도가 잦아지면 몰입이 불가능해짐

 

  • 예시1 : 캡쳐용 프리웨어 ‘안카메라’. 설치 과정 중 구성 요소 선택 단계에서 해당 프로그램의 스폰서 항목이 기본적으로 체크되어 있어서 이를 해제해야만 함 (나쁜예)

 

  • 예시2 : ppt의 ‘모두정렬’ 기능. 윈도우의 배치된 세팅을 바꾸지 않고 한번에 원하는 윈도우를 찾을 수 있음 (좋은예)

 

 

 

제 3지침 : 사용자가 오류를 범하게 유도하지 말 것

 

 

 

 

  • 조작법이 사용자의 직관과 달라 오류를 유발하는 경우

 

  • 예시1 : 아이폰의 버튼 위치. 국내 사용자가 지금까지 사용해 온 일반 휴대전화의 버튼과 반대로 배치되어있어, 오류 발생

 

  • 예시2 : ppt에서 대용량 문서 저장 시 ‘문서 저장을 취소하려면 esc 키를 누르십시오'[취소] 팝업. 화면에 갑자기 뜬 대화창을 닫아 버리는 것에 익숙한 사용자들이 무심코 엔터를 누르면 파일을 열거나 저장하는 작업이 취소되는 오류 발생

 

 

 

제 4지침 : 사용자에게 쓸데없는 정보를 받게 하지 말 것

 

 

 

 

  • 사용자 편의를 위한 것 이외의 목적을 위해 사용자에게 추가적인 정보를 보도록 강효하지 말아야 함.

 

  • 예시1 : 곰플레이어 설치 후 동일 제조사의 다른 소프트웨어 홍보 팝업 열림 (나쁜예)

 

  • 예시2 : 위키디피아의 경우, 작성자나 스폰서 등에 대한 정보 일체 없음 (좋은예)

 

 

 

제 5지침 : 사용자에게 선택을 강요하지 말 것

 

 

 

 

  • 일단 사용자가 원할만한 행동을 하고 나중에 복구할 수 있는 기능을 주는 것이 사용자에게 게속 ‘~을 해도 좋습니까’ ‘~하는게 괜찮겠습니까’ 하고 묻는 것보다 좋음

 

  • 이를 위해서는 사용자가 전반적으로 무엇을 원하는지 통계적으로 잘 파악하고 있어야 하며, 혹시 예상이 빗나가더라도 완벽하게 이전 상태로 되돌릴 수 있는 기능이 있어야 함

 

  • 예시1 : 종료할때마다 카탈로그 백업할 것인지 요청하는 시스템. 하던 일을 마치고 로그아웃 시 보가 요청하는 것은 사용자를 짜증스럽게 함 (나쁜예)

 

  • 예시2 : 구글독스는 자동 저장 및 이전 상태로 복구할 수 있는 목록 제공함.

 

 

결론 : 모두가 달성하고자 하는 목표와 직접적으로 관련이 없는 정보나 기능을 배제하도록 하는 것. 일방적으로 무엇을 하지 말라는 방향으로 지침을 제시하고 있음

 

 

 

3.3 긍정적인 요소를 증가시키는 인터랙션 디자인 지침

 

 

 

 

  • 시스템이 사려깊게 행동하면 사용자는 시스템에게 고마움을 느끼고 이러한 느낌은 사용자에게 앞으로의 상호작용에 몰입할 수 있는 여건을 제공함

 

제 1지침 : 사용자에게 관심을 가질 것

 

 

 

 

  • 사려깊은 인터랙션은 사용자가 입력하는 모든 정보뿐만 아니라 주변 정황까지도 기억할 정도로 사용자에 관한 모든 것에 관심을 가짐

 

  • 예시1 : 마이너리티리포트 이름을 말하는 옷가게의 가상점원 등

 

  • 예시2 : 다음지도. 사용자가 있는 지점 근처의 은행, 병원 등의 중요 지역 정보를 빠르게 제공. 지도 이상의 정보에 관심을 가짐으로써 사려깊은 행동 수행

 

제 2지침 : 한발 먼저 내다볼 것

 

 

 

 

  • 사용자가 요청하기 전에 사용자가 필요로 하는 것이 무엇인지 예측해서 제공하기 위해서는 사용자의 행동 패턴을 파악하고 그에 맞는 기능을 수행할 준비를 갖추어 놓는 것이 필요함

 

  • 예시1 : 마이너리티리포트 가상점원은 동공인식으로 고객 신분을 파악하고 고객의 구매 의도를 묻거나 관심을 가질 만한 상품 목록과 위치 알려줌.

 

  • 예시2 : 검색엔진의 검색창, 주소창 등의 이력창에서 자동완성 기능을 제공함.

 

  • 예시3 : 에버노트. 태그 자동완성. 태그 입력창에 태그 입력 시 기존에 사용자가 달았던 태그를 토대로 원하는 태그를 제공

 

  • 예시4 : 소니 MP3플레이어의 센스미. 사용자 보유곡을 자동 분석하여 카테고리 나누고 사용자 기분에 따라 테마분류 시, 그날 기분에 맞는 곡을 선택적으로 들을 수 있음

 

제 3지침 : 상식적으로 행동할 것

 

 

 

 

  • 상식적으로 행동하는 디지털 서비스는 적시적소에 맞는 행동을 해야함

 

  • 예시1 : 디자이어폰의 뒤집어 놓으면 진동으로 자동 전환해주는 기능. 사용자가 공공장소에서 상식적으로 행동할 수 있도록 함. (좋은예)

 

  • 예시2 : 구글 애드센스 : 블로그와 전혀 무관한 내용의 광고 게시. 사용자 의도나 상식에서 벗어남 (나쁜예)

 

제 4지침 : 융통성있게 반응할 것

 

 

 

 

  • 사용자가 특정행동을 지시할 때 디지털 제품 및 서비스에 내정된 순서나 조작법에서 약간 벗어나더라도 본래 목적하는 기능을 효과적으로 수행할 수 있도록 임시 변통하는 융통성을 가져야 함

 

  • 예시1 : 마이너리티리포트의 가상점원. 고객이 찾는 옷이 없을 때 DB를 검색해 해당 의류의 재고를 보유한 다른 상점 추천해줌

 

  • 예시2 : USIM카드 제거시에도 위급 상황에 처해 구조 요청이나 신고를 해야하는 경우는 긴급 통화 가능하도록 하는 서비스

 

  • 예시3 : 아이튠즈 동기화 시 파일 전부 소실되고 컴퓨터에 있는 파일만 동기화 되는 경우 발생. 융통성 없이 항성 동기화를 강요하기 때문에 발생하는 문제임

 

결론 : 디지털 제품이나 서비스가 사용자에게 더 많은 혜택을 주고자 사려 깊은 사람과 같이 행동하고자 할 때 어떻게 행동해야하는지에 대한 지침을 제시하였음

 

 

 

 

4. 인터랙션 디자인 방법론 : 스토리보드와 스토리텔링

 

 

  • 디지털 제품이나 서비스가 실제로 구현되었을 경우 그것이 어떻게 행동할지 스토리보드를 통해 구상해보고, 그 과정에서 시스템의 세부적 인터랙션 요소를 스토리텔링으로 도출해 내는 방법.

 

  • 즉 사용자가 디지털 제품이나 서비스를 사용하는 과정에 대한 이야기와 그 이야기를 다른 사람에게 전달하는 행위를 합쳐 표현하는 방법이 스토리보드 및 스토리텔링 기법

 

4.1 스토리보드 기법이 유효한 이유

 

 

  • 첫째, 이야기는 인류가 진화하면서 가장 오랜 기간 동안 사용해 왔던 수단이므로, 이야기 형식은 거의 모든 수준의 사용자에게 쉽게 전달되고 정확하게 이해될 수 있음

 

  • 둘째, 이야기는 실제 사물이나 현상을 단순화함에 따라 스토리보드를 그리거나 읽을 때 우리의 상상력이 개입하므로 디자인하고자 하는 디지털 제품 및 서비스의 행동을 보다 창의적으로 구상할 여지가 생김. 비형식적이고 미완성이므로 창의성이 개입될 여지 제공. (단, 스토리의 핵심은 정확하게 전달되도록 해야하므로 지나친 단순화는 피해야함)

 

  • 셋째, 유사한 목적을 달성하기 위해 사용되는 비디오나 애니메이션 제작 기법보다 시간 및 비용 측면에서 효율적임

 

4.2 좋은 스토리의 특성

 

 

  • 첫째, 좋은 스토리는 탄탄한 구조를 가지고 있어야 함. 디지털 서비스의 반응 간에 직접적인 연관 관계가 명확하게 드러나야 함

 

  • 둘째, 좋은 스토리는 그 중심에 사용자와 디지털 서비스가 주고받는 행위와 반응이 있어야 하며, 이 과정에서 사용자가 의미 있는 선택을 할 수 있도록 해야함. (여러 대안들 중에서 사용자가 어떤 선택을 하고 그 결과 시스템이 어떤 반응을 하고 그런 반응을 보고 사용자가 또 다른 의미 있는 선택을 한다는 연속적인 과정 중에서 사용자에게 계속해서 의미있는 선택을 하게 만드는 것)

 

  • 셋째, 좋은 스토리는 갈등을 해소하는 과정이 있어야 함. 디지털 서비스를 사사용함으로써 어려움이나 문제점을 극복하고 욕구를 충족시키는 내용을 포함하고 있어야 함

 

 

 

※ 카렌 호츠블랫의 방법론

 

1단계 : 디지털 서비스의 인터랙션 전반에 대한 통합적인 이야기를 만들어 내는 과정 (전반적 스토리 구축 단계)

 

2단계 : 디지털 제품 및 서비스가 수행하게 될 각 과업에 대해 보다 구체적인 스토리를 전달하는 단계 (구체적인 스토리텔링 단계)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

천 윤서 (29 Posts)


0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×