[UX] 가벼운 이야기2013.05.11 02:13


UI 기획을 하는데 있어서 UI 패턴과 원칙을 이해하는 것은 건축가가 구조를 이해하는 것과 같이 기본적이면서도 중요합니다. 또한 패턴과 원칙을 통해 일반적인 디자인 문제를 다루는 광범위한 해결방안으로 적용할 수 있습니다. UI 패턴과 원칙을 다룬(일부를 다룬 책도 포함) 도서 모음을 정리해 보았습니다. 본 도서는 pxd 라이브러리 에 구비되어 있으며, 제 유저스토리북에 모아두었습니다. :)

이 외에도 UI 패턴과 원칙을 다룬 도서가 있다면 공유 부탁드립니다. 업데이트 하도록 하겠습니다.


관련 글

 UI 패턴과 원칙을 다룬 도서 모음 20+ (현재 글)

▷ UI 패턴을 다룬 웹사이트 모음


UI 패턴과 원칙을 다룬 국내 도서 모음 (무작위순)

1. 웹 폼 디자인
루크 로블르스키 저 | 민은식, 김성은 역 | 인사이트 | 2009년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6028170



2. 리치 인터페이스 디자인
빌 스콧, 테레사 닐 저 | 이은아, 김기형, 구신애, 윤지혜 역 | 인사이트 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6255460




3. 소셜 인터페이스 디자인
크리스천 그림리시, 에린 멀론 저 | 윤지혜, 남보현, 신나리 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6764990



4. 검색 패턴
제프 칼렌더, 피터 모빌 저 | 김소영 역 | 한빛미디어 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6440010



5. 웹사이트 해부하기
로버트 후크만, 제라드 스풀 저 | 박지은, 정승녕 역 | 인사이트 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6792964



6. UX 디자인 7가지 비밀
박지수, 김현 저 | 안그라픽스 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7170392



7. Designing web navigation
제임스 콜백 저 | 김소영 역 | 한빛미디어 | 2008년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=4486815



8. 오래가는 UX 디자인
반준철 저 | 한빛미디어 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7131918



9. 퍼소나로 완성하는 인터랙션 디자인 About face 3
앨런 쿠퍼, 로버트 라이만, 데이비드 크로닌 저 | 김나영, 고태호, 유지선 역 | 에이콘출판사 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6401320



10. Designing interfaces
제니퍼 티드웰 저 | 김소영 역 | 한빛미디어 | 2007년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=2954032



11. 아이폰 앱 디자인 정석
조시 클라크 | 김은희, 신미원, 이청언 역 | 한빛미디어 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6831349



12. Human computer interaction 개론
김진우 저 | 안그라픽스 | 2012년 발행(개정판)
http://book.naver.com/bookdb/book_detail.nhn?bid=6863839



13. UI디자인을 잘 하기 위한 테크닉 80
노주환 저 | 비비컴 | 2002년 발행 (절판)
http://book.naver.com/bookdb/book_detail.nhn?bid=108792



14. 모바일 디자인 전략
조셉 카트먼, 리차드 팅 저 | 이재명, 이예나 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6459751



15. 모바일 애플리케이션 UI 라이브러리
노주환 저 | 멘토르출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6627677



16. The design of sites
더글러스 벤 듀인, 제임스 렌데이, 제이슨 홍 저 | 정유한, Yuna, 고태호 역 | 에이콘출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6656725



17. 웹 스타일 가이드
사라 호튼, 패트릭 린치 저 | 김노경 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6714944



18. 경험 디자인의 요소
제시 제임스 가렛 저 | 방수원 역 | 한솜미디어 | 2006년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=264361



19. 콘텐츠 UX 디자인
제니스 레디쉬 저 | 이지현, 이춘희 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6771017



20. 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실
수잔 웨인쉔크 저 | 이재명, 이예나 역 | 위키북스 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6827383


*이미지 출처 - 네이버 책 : http://book.naver.com/ 



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 독후감2009.11.14 18:05



책 소개

When a new technology – such as interactive digital television – is introduced to a wider audience, ease of use is often critical to success. By focusing on these usability issues with the aim of supporting user acceptance for interactive TV, Tibor Kunert provides clear guidelines for designing the user interfaces on interactive TV applications.

This guidance is presented in the form of design patterns, and a new approach is proposed that helps designers and developers to explore design alternatives and to evaluate the trade-offs that need to be made in order to maximise usability.

The 42 design patterns containing 185 guidelines provide comprehensive and empirically-validated guidance for designing interactive TV user interfaces. A pattern language is developed which can be used for designing specific applications, for enduring usability, and for defining corporate style guidelines and developing application templates that help streamline the process of production.




이 책은 인터랙티브 텔레비전 어플리케이션 디자인 패턴에 관한 책입니다. 인터랙티브 디자인 가이드라인을 수집하고, 대규모의 실험을 전개하였습니다. 185개의 인터랙티브 TV의 유저인터페이스 가이드라인을 포함한 42개의 디자인 패턴을 도출하였다고 하네요. 거의 인터랙티브 TV 가이드라인 백서라고 보시면 될듯 싶습니다.


영문으로 되어있는 책이라 전부 읽을 수는 없었지만 그중에서도 디자인 가이드라인 부분을 읽었습니다. 흥미롭더군요. 디자인 가이드라인은 크게 페이지 레이이아웃 이슈와, 네비게이션 이슈가 있었습니다.


인터랙티브 TV의 페이지 레이아웃 이슈는 Gawinski(2003) 의 논문과, British Broadcasting (2002), ARD Digital (2003) 의 가이드라인을 통해 도출하였습니다. 페이지 레이아웃 이슈는 다음과 같습니다.

[이미지를 클릭하시면 큰 이미지로 보실 수 있습니다.]

1. TV 프로그램
TV 프로그램은 항상 보여주는 방식을 사용하고 있습니다.

2. 오버레이 어플리케이션
오버레이 어플리케이션은 Semi-transparent 방식을 사용하거나,  화면의 크기를 줄이고 L-Shape 부분에 어플리케이션을 보여주는 방식을 사용할 수 있습니다.

3. 네비게이션 요소 표현
네비게이션 요소 표현은 관습적으로 페이지 하단에 컬러키를 수평적으로 처리하고 있습니다. 컨텍스트 네비게이션 요소는 상단에 표현하고 있습니다.

4. 정보의 표현
정보의 표현은 관습적으로 TV에서는 중요한 정보는 왼쪽 상단과 오른쪽 하단에 표현하고, 덜 중요한 정보는 오른쪽 상단과 왼쪽 하단에 표현하고 있습니다. 이는 시선의 흐름이 왼쪽 상단에서 오른쪽 대각선 아래 방향으로 이동하기 때문이라고 합니다. 프로그램의 질을 높이기 위해 비디오는 왼쪽 상단으로, 비디오의 오른쪽 상단은 텍스트 서비스로 사용하고 있습니다.


인터랙티브 TV의 네비게이션 이슈는 British Broadcasting Corporation (2002), ARD Digital (2003)의 가이드라인과, Gawinski(2003), Lu(2005), Rinnenmaki(2004) 의 논문을 통해 도출하였습니다. 네비게이션 이슈는 다음과 같습니다. 

[이미지를 클릭하시면 큰 이미지로 보실 수 있습니다.]

1. 어플리케이션 시작
어플리케이션 시작은 주로 빨강 컬러키를 사용하였습니다.

2. 가능한 리모콘 키
가능 리모콘 키는 숫자키, 화살표키, 컬러키, 확인/선택 키 였습니다. Rinnenmaki (2004)는 추가로 슈퍼텔레텍스트 키를 두었습니다.

3. 컬러키 사용
컬러키 사용은 다양하게 쓰고 있습니다만, 주로 빨강 컬러키를 중요한 부분에 사용하고, 파랑키는 도움말이나, 옵션에 주로 사용하였습니다. 녹색, 노랑은 부가적인 부분에 주로 사용하고 있었습니다.

4. 화살표 키 사용
화살표 키 사용은 주로 콘텐츠 네비게이션으로 사용하였습니다.

5. 확인 / 선택 키 사용
확인 선택 키는 하이라이트된 옵션을 선택하는데 사용하였습니다.

6. 숫자 키 사용
숫자 키는 10개 아이템보다 적은 메뉴 아이템을 선택할때 사용하였습니다.

7. 스탠다드 TV 키 사용 (볼륨 up/down, 채널 up/down)
스탠다드 TV키는 관습적으로 사용하는 방식을 그대로 쓰고 있습니다.

8. 컬러 키 항상 그룹으로 보여주기
컬러키 항상 그룹으로 보여주는 방식을 아직 고수하고 있으나 각각의 상황에서 4개의 컬러키가 유동적으로 보여집니다.

9. 네비게이션 도움말
네비게이션 도움말은 심플한 아이콘을 이용해서 표현하기도 합니다.

10. 페이징 vs 스크롤링
사용성으로 봤을때는 스크롤링이 페이징보다 직관적입니다 .그러나 페이징 방식이 기술적으로 부담이 덜하기 때문에 아직까지는 페이징 방식을 사용하고 있습니다. 



인터랙티브 TV의 텍스트 디자인 이는 British Broadcasting Corporation (2002), ARD Digital (2003)의 가이드라인과, Gawinski(2003), Lu(2005), Rinnenmaki(2004) 의 논문을 통해 도출하였습니다. 텍스트 디자인 이슈는 다음과 같습니다. 

[이미지를 클릭하시면 큰 이미지로 보실 수 있습니다.]

1. 폰트 타입
폰트 타입은 주로 산세리프 폰트(고딕 계열)를 사용합니다. 예) Tiresias, Book, Gill Sans

2. 폰트 사이즈
최소 폰트사이즈는 18포인트 ~ 26포인트를 사용해야 합니다. (영문기준) British Broadcasting Corporation (2002)은 최적의 본문 텍스트는 24포인트(영문기준) 라고 말하고 있습니다.

3. 폰트 컬러
폰트 컬러는 주로 어두운 배경에 밝은 글씨를 써야합니다. 파랑색 배경에 흰색, 다크 블루 또는 검은 배경에 흰색이나 노랑색을 사용합니다.

4. 읽기
TV에서의 읽기는 인쇄물보다 읽기가 떨어지기때문에, 이에따라 행간을 넓혀야 합니다.

5. 트랙킹 (자간?)
30퍼센트 이상 사용해야 합니다.

6. 텍스트 길이
90단어 미만(영문기준)을 사용하여야 합니다.

7. 텍스트 구조
텍스트 구조는 여러 작은 텍스트 단위(chunk)로 묶어야 합니다.

8. 텍스트 방향
텍스트의 방향은 왼쪽 상단에서 오른쪽 하단으로의 수직선을 그려야 합니다.




Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 댓글을 남겨주세요. ^^

    2010.05.21 09:55 신고 [ ADDR : EDIT/ DEL : REPLY ]