Designing Interfaces - 인터페이스 디자인 94가지 패턴 ★★★★☆

- 앞표지에 실린 좀 쌩뚱맞은 광고문구 ("여러분도 아이팟과 같은 감각적인 인터페이스를 디자인할 수 있습니다.")가 좀 당황(?)스럽긴 하지만, 전체적으로 PC와 웹, 모바일을 망라한, 여러가지 UI 패턴들이 잘 정리되어 있는 책이고, UI디자인의 다양한 요소들과 개념들을 명쾌하게 설명하고 있다. 소프트웨어개발자, 인터랙션 디자이너, UI/GUI 디자이너들에게 많은 도움을 줄 최고의 UI/UX 디자인 참고서...

- 활용법 : 지금 당면하고 있는 UI관련 문제가 있다면, 어떤 방식의 패턴을 적용하면 해결이 가능할지, 쉽게 몇가지 아이디어를 도출할 수 있을 것이고, 패턴과 구조의 이름을 명확하게 이해하는 것만으로도 디자이너간 커뮤니케이션 갭을 줄이는데 큰 도움이 될것이다. ★★★★☆ (아마존 별점 4/5)

- 다만, 1) 번역이 매끄럽지 못해서, 여러번 읽어도 도저히 무슨말인지 알기 힘든 문장이 많다는 것... ㅡ,.ㅡ;; 2) 내용도 꽤 많은 편 (416p)이어서... (심지어 무겁기까지...) 생각보다 매끄럽게 읽히지는 않지만, 두고 두고 생각날때마다 보는 것만으로도 여러모로 도움이 됨. 3) 현재 이 책은 품절상태임. 아마존에서 원서구입 --> http://astore.amazon.com/monsterdesign-20/detail/0596008031 (약 33불)

- 책관련 홈페이지 : http://designinginterfaces.com/ (많은 내용을 미리 볼 수 있다.)

17p : 디자이너들은 현재 어느 때보다 더 많은 선택의 폭을 가지고 있는데, 아이러니하게도 바로 이것이 디자인하는 것을 더욱 힘들게 만드는 원인이 되기도 한다. 그렇다면 사용하기 쉬운 인터페이스의 특성이란 무엇인가? 사용하기 쉬운 애플리케이션은 직관적으로 이해할 수 있도록 디자인되어 있어야 한다. 제프 라스킨은 사람들이 소프트웨어를 사용할때 "직관적이다"라고 말하는 것은 실제로 "친숙하다 (familiar)"라는 의미를 가지고 있다고 말한 바 있다.

18p : 제프 라스킨 (Jef Raskin) : 매킨토시의 아버지로 가장 잘 알려져 있는 매킨토시 최초 설계자. 라스킨은 별도의 교육없이도 사람들이 사용할 수 있는 User-friendly한 컴퓨터를 개발하는 데 힘을 쏟았다. 1978년부터 1982년까지 애플에서 일하는 동안 혁신적인 사용자 인터페이스를 가진 매킨토시 컨셉에 대한 최초의 아이디어를 내놓고, 드래그 앤 드롭 개념을 개발하는 등 매킨토시 제작에 큰 역할을 하였다. 그러나, 스티브 잡스와의 마찰로 인해 애플을 떠났으며 그를 대신해 팀장을 맡은 스티브 잡스가 1984년 매킨토시 컴퓨터를 시장에 출시하였다. 국내에는 "인간중심 인터페이스 (Humane Interface)"라는 그의 저서가 출간되어 있다. 모든 면에서 제프 라스킨은 전형적인 기인이자 천재였다. 그는 컴퓨터 과학분야가 다소 생소하던 1967년 당시 이 분야에서 석사학위를 받았고 평생 동안 컴퓨터 전문가였지만 음악가, 작곡가, 화가, 수학자로도 활동했다. 라스킨은 샌프란시스코 실내오페라 악단을 지휘하고 세 가지 악기를 연주하며 궁술과 사격의 전문가이자 항공기 날개 설계특허를 따내는 등 실로 다재다능하며 예술을 사랑하고 항상 즐거운 삶을 추구하는 인물이었다. 2005년, 라스킨은 61세의 아까운 나이로 타계하였다.

19p : 본질적으로 패턴이라는 것은 사용자 인터페이스, 웹사이트, 객체지향 프로그램, 심지어는 건축물까지도 "살기적합(Habitability)"하도록 개선시키는 구조적 특징인 동시에 인간 행동의 특색이다. 패턴은 사물을 더 이해하기 쉽고 더 아름답게 만들며, 툴을 더 유용하고 편리하게 사용할 수 있도록 한다.

31p : 좋은 인터페이스 디자인은 그림에서부터 시작하는 것이 아니라 사람들을 이해하는 것에서부터 시작한다. 사람들이 어떤 소프트웨어를 좋아하는지 그것을 왜 사용하는지, 그리고 소프트웨어와 어떻게 상호작용을 하는지를 알아야 한다. 사람을 더 잘 알게 되면 될수록, 더 중요하게 비중을 두면 둘수록, 사용자들을 위해 더욱 효과적으로 디자인할 수 있게 된다. 소프트웨어는 결국 그것을 사용하는 사람들에게 있어 단지 목적을 이루기 위한 수단에 지나지 않는다. 이 목적이 충족되는 만큼 사용자들은 성취감을 느낀다.

32p : 인터페이스를 디자인하는 첫 번째 단계는 사용자들이 정말로 성취하기 위해 노력하는 것이 무엇인지를 이해하는 것이다. 예를 들어 어떤 폼을 채우는 것은 절대로 그 안에 있는 내용을 모두 기입하기 위해서가 아니다. 대부분의 사람들은 온라인에서 무엇인가를 사기 위해서, 운전면허증을 갱신하기 위해서, 또는 네트워크 프린터를 인스톨하기 위해서 단지 이 작업을 하고 있을 뿐이다. 일종의 잡무를 처리하고 있는 것이다.

33p : 진정한 인터페이스 디자인은 멋지게 만드는 것보다 문제를 올바로 해결하는 데 있다.

34p : 디자인을 잘 하기 위해서는 사용자들의 본능적인 반응, 레퍼런스, 사회적 정황, 신념, 가치와 같이 애플리케이션이나 사이트 디자인에 영향을 줄 수 있는 "Softer factors"를 고려할 필요가 있다. 이것들을 통해 애플리케이션을 더욱 호소력 있고 성공적으로 만드는 결정적인 특징 혹은 디자인 요소를 찾을 수 있을 것이다.

40p : 앨런 쿠퍼 (Alan Cooper) --> 비주얼 베이직의 아버지로 잘 알려진 앨런 쿠퍼는 오랜기간 프로그램 개발을 통해 개발자의 눈높이에 맞춘 프로그램 개발이나 디자인이 아닌 실제 사용자들이 원하는 기능 개발과 디자인이 필요하다는 것을 깨닫고 인터랙션 디자인을 연구해 왔다. 앨런 쿠퍼가 쓴 사용자 중심의 제품 디자인이라는 혁신적인 아이디어를 담고 있는 유명한 책 "About face"가 최근 새로운 개정판이 나왔다. About face3 : The essentials of interaction design (Wiley, 2007년 5월). 국내에도 언젠가 이 훌륭한 저서가 소개되길 바란다. 현재 국내에서 출간된 앨런 쿠퍼의 책으로는 "정신병원에서 뛰쳐나온 디자인" 이 있다.

43p : 최소한의 충족 --> 사회 과학자인 허벌트 심슨이 1975년에 만들어낸 용어. 모든 선택에 시간과 노력이 든다는 것을 알게 되면 사람들은 "가장 좋은것 (Best)"대신에 "충분히 좋은것 (Good enough)"을 받아들이는 경향이 있다. 최소한의 충족은 실제로 매우 이성적인 행동이며, 사람들은 그들이 해야만 하는 것 그 이상으로 생각하기를 원치 않는다.

48p : 사람들은 오브젝트와 다큐먼트들을 찾을 때 이름을 생각하는 게 아니라 어디에 두었는지 위치에 대한 기억을 더듬어 본다. 대부분의 애플리케이션들이 사용자들이 예측할 수 있는 장소에 확인, 취소, 그리고 기타 버튼들을 둔다. 버튼에 대한 공간 기억이 굉장히 강하기 때문이다. 사람들은 복잡한 애플리케이션에서는 툴바에 있는 툴이나 우선순위를 가진 오브젝트, 기타 다른 것들과 비교해서 버튼이 어디에 있었는가를 기억하고 이를 찾아낸다. 일반적으로 인터페이스에 어떤 것을 추가하는 것은 문제를 일으키지 않는다. 그러나 이미 있던 컨트롤을 재배열하는 것은 공간 기억을 방해하고 사물들을 찾기 힘들게 만들 수 있다.

50p : 그 자체로 너무 완벽하거나 똑똑한 시스템을 디자인하려고 애쓰지 말라. 오랫동안 쓰이지 않은 윈도우를 아무도 사용하는 사람이 없다고 가정하고 자동으로 닫히게 하지 말고, 사용자들에게 "도움을 주기 위해서" 시스템이 필요없다고 생각하는 파일이나 오브젝트들을 지우지 말아야 한다. 누구도 그런 이유로 파일과 오브젝트들을 버리지 않는다. 또한 사용자들이 요청하기 전에는 자동으로 사물들을 구성하거나 분류해서는 안된다.

82p : 무엇을 하기 위해 매번 결정해야 한다는 것은 부담스럽기 때문에 사람들에게 환영받지 못한다. 따라서 디자이너가 대신 선택해주는 경우를 긍정적으로 생각하는 사람들도 많다. 사용자들이 고민하게 하지 말고 다음에 무엇을 해야되는지를 알려주자.

89p : 추가 콘텐츠로 들어가는 "문"을 매력적으로 보이도록 만들자. 언더라인 링크, 헤드라인, 버튼, 메뉴자체, 아이콘 혹은 클릭 가능한 이미지 영역 등이 추가 콘텐츠로 들어가는 문이 될 수 있다. 사용자의 호기심을 자극하는 이름을 붙이는 것 역시 디자이너에게 달려 있다. 네이밍은 일종의 예술이다. 네이밍에 대해 의심의 여지가 있을 때는 사용성 테스트를 해보자.

99p : 네비게이션은 최소화될수록 좋다.

101p : 디자이너가 저지르는 가장 난처한 실수 중 하나는 사용자가 태스크를 수행할 때마다 서브 페이지나 다이얼로그의 다층 레벨 안으로 들어가게 만드는 것이다. 그보다 더 안좋은 것은 사용자를 그 단계까지 끌고 간후, 앞에서 필요한 한가지 조건이 빠져있기 때문에 이 태스크를 수행할 수 없다고 하면서 출발점으로 되돌려보내는 것이다.

114p : 네비게이션 장치는 아무리 확실하게 나타낸다 하더라도 모든 사용자들이 사용하지는 않는다라는 사실을 기억하자. 엔지니어와 디자이너들이 쉽게 오인하게 되는 부분은 사용자들이 처음에 전체를 논리적으로 보고 나서 어디로 갈지를 결정한다고 생각하는 것이다. 실제로는 그렇지 않다. 대부분의 사용자들이 사이트나 UI가 어떻게 구성되어 있는지 알고자 하지 않고, 단지 필요한 것을 찾을 때까지 가장 가까이에 있는 명확해 보이는 사인을 따라갈 뿐이다.

136p : Animated transition --> 애니메이션은 빠르고 정확해야 하며, 사용자의 처음 동작과 애니메이션의 시작 사이에 지연시간이 전혀 없거나 있더라도 극히 짧게 만들어야 한다. 스크린에서 애니메이션될 영역을 제한하여 모든 윈도우 전체를 애니메이션시키지 않는다. 그리고 무엇보다 짧게 만든다. 참고문헌에는 부드러운 장면전환을 위해서 0.3초 정도가 이상적이라는 리서치 결과가 나와있다.

156p : 비주얼 프레임워크는 콘텐츠로부터 UI의 스타일적인 면을 분리시킨다. 프레임워크를 한 곳에서만 정의해 놓으면 (CSS스타일쉬트나 Java 클래스에서와 같이) 콘텐츠와 독립적으로 프레임워크를 변경할 수 있다. 즉 프레임워크를 쉽게 변경하거나 다시 되돌려 놓을 수 있게 된다.

165p : 탭은 훌륭한 방법이다. 하지만 일반적으로 카드는 6개 이하로 사용하는 것이 좋다. 그러나 탭을 "두줄(Double-row)"로 놓지 말자. 두줄배열은 대부분 사용하기 쉽지 않다. 만일 동시에 한 줄로 나타낼 수 없다면 가로로 스크롤할 수 있게 한다. 세로탭의 사용은 카드 스택의 가로폭을 좁고 세로 폭은 높게 만든다. 이것은 일반적인 탭 페이지의 형태가 아니다.

166p : 어떤 UI들은 페이지의 상단에 드랍다운 리스트가 있다. 이는 링크 컬럼보다 공간을 적게 차지하지만 그만큼 명확하진 못하다. 드랍다운 리스트는 일반적으로 컨트롤처럼 동작하는데 사용자들은 이를 네비게이션장치로 인식하지는 않는다.

175p : 대각선균형 (Diagonal balance) 페이지 요소들을 비대칭으로 배열하되 왼쪽 상단과 오른쪽 하단 구석 양쪽에 시각적 무게의 균형을 맞춘다. 대각선 균혀은 사용자들의 시선이 왼쪽 상단에서 오른쪽 하단으로 쉽게 이동할 수 있게 페이지를 바로 잡아주는 역할을 한다. 타이틀, 탭, 또는 다른 강력한 요소들을 페이지의 왼쪽 상단에, 버튼들을 오른쪽 하단에 위치시킨다.

188p : 그래픽 디자이너들은 글자를 쉽게 읽을 수 있게 최적의 행길이를 맞추어야 한다. 영문으로는 한줄에 평균 10 ~ 12 단어가 적절하다. 다른 수치로는 30 ~ 35em 폭이다. (em은 소문자 "m"의 폭 길이를 뜻함.)

194p : CLIs (Command-Line Interfaces) 무엇이 사용가능한지 일단 배우고 나면 굉장히 강력하게 사용할 수 있지만 처음에 사용하기는 그리 쉽지 않다. 잘 짜여진 단일 커맨드로 많은 작업을 완료할 수 있다. 이와 같이 CLIs는 소프트웨어를 잘 알고 있는 사용자에게 최상의 액션실행방법이 된다.

207p : 버튼에 라벨을 붙일 때는 아이콘보다 텍스트를 사용하라. 텍스트 라벨이 붙은 버튼이 훨씬 이해하기 쉬우며, 특히 대부분의 사용자들이 완료, 승인, 확인 라벨이 붙어있는 버튼을 찾는다. 라벨에 쓰이는 텍스트는 동사나 어떤 행위가 일어나는지를 기술하는 짧은 동사문장을 사용하되 사용자가 쓰는 일반적인 용어를 쓴다. 대부분 그냥 "완료"라는 단어보다는 "보내기", "Buy", "Change record"와 같이 보다 구체적인 단어를 사용하는 것이 훨씬 효과적으로 의미를 전달한다.

215p : 2초이상의 시간이 걸리는 작업은 UI의 흐름을 방해하기 때문에 Progress indicator를 사용한다. 사용자에게 알려줘야 할 것은 다음과 같다. 현재 무엇이 진행되고 있는가, 완료된 동작의 비율은 어느 정도인가, 남은 시간은 어느 정도인가, 어떻게 진행을 멈출 수 있는가

217p : Cancelability --> 파일을 프린트하거나 또는 데이터베이스를 요청하거나, 커다란 파일을 로딩하는 것처럼 2초이상의 시간이 걸릴경우에는 취소버튼을 제공해야 한다. 무엇이든 취소할 수 있다는 것을 사용자가 알게 되면, 사용자는 더욱 편안하게 인터페이스를 둘러보고 무엇인가 시도해 보게 된다.

221p : 멀티레벨 undo의 횟수는 제한하는 것이 바람직하다. 더 많은 단계의 undo를 제공하여도 사용자들은 이를 효과적으로 사용하기 힘들다. 일반적으로 12개 이상의 undo 횟수를 두는 것은 불필요하다.

324p : 컴퓨터 전문용어가 아닌 일반용어를 사용한다. "유효하지 않은 숫자 오류" 대신 "우편번호가 잘못되었습니다."라고 적어야 한다.

324p : 정중한 단어를 사용한다. "자바스크립트 오류 693"이나 "이 폼은 데이터를 포함하고 있지 않습니다." 대신 "죄송합니다만 무엇인가 잘못되었습니다. 다시 한번 Go를 클릭해주세요."라고 하자.

330p : 어떤 이들은 사용자들이 너무 쉽게 문제를 일으키게 되기 때문에 인터페이스에서 모드를 사용하는 것은 나쁘다고 말한다. 이 말이 항상 옳은 것은 아니다. 그래픽 편집기를 사용하는 사람들은 모드에 익숙해져있다. 사실 모드 없이 마우스와 키보드만을 가지고 어떻게 복잡한 그래픽 편집기를 디자인할 수 있을지 모르겠다. 서로 다른 드로잉 기능들을 많이 구현하기 위해서는 이 인풋 디바이스들에 기능적으로 과부하가 걸릴수밖에 없다.

342p : 모드에 있어서 가장 큰 문제점 중 하나는, 사용자가 현재 모드를 잊어버릴 수 있다는 것이다. 특정 마우스 커서처럼 명확한 상태를 알려주는 인디케이터가 없으면, 사용자가 실제로는 모드 B에 있으면서도 모드 A에 있다고 착각해서 엉뚱한 행동을 할수도 있다.

375p : 대부분의 애플리케이션과 웹에서 콘텐츠와 사용편의성은 스타일보다 훨씬 중요하다. 전체적으로 장식적인 이미지의 사용을 자제하고, GUI의 기능적인 면이 산만해지지 않도록 신중을 기해야만 한다.

394p : 헤어라인 질감은 매우 얇은 산세리프 폰트 옆에 놓여있을때 특히 효과적으로 보인다.

[이전글] 2009/03/16 - [bOOKS + mAGAZINES] - 더 나은 사용자 경험(UX)을 위한 인터랙션 디자인 (Designing for Interaction: Creating Smart Applications and Clever Devices) ★★★☆☆

[이전글] 2007/06/05 - [bOOKS + mAGAZINES] - Ambient Findability (검색2.0 발견의 진화) ★★★☆☆

[이전글] 2007/05/18 - [bOOKS + mAGAZINES] - Universal principles of design (디자인 불변의 법칙 100가지) ★★★★★