0) 구글에서 제공하는 안드로이드 공식 디자인 사이트 : 안드로이드 UI에 대한 모든게 다 있다고 보면 된다. http://developer.android.com/design/index.html


1) 모바일 디자인 패턴 갤러리 : 동명의 책과 연계된 사이트, 책과 관련된 다양한 슬라이드와 각종 스텐실도 공유하고 있다. http://www.mobiledesignpatterngallery.com/mobile-patterns.php


2) 안드로이드 인터랙션 디자인 패턴스 : 무엇보다 자세한 설명이 굿~
http://www.androidpatterns.com


3) Inspired UI : 패턴 스크린샷이 가장 많다. http://inspired-ui.com


4) Mobile - Patterns : UI 패턴별 iOS 어플리케이션 스크린샷 모음 http://www.mobile-patterns.com


5) Mobile Patterns : 4번과 이름이 동일한 패턴 스크린샷 모음 사이트 
http://www.mobilepatterns.com


6) pttrns : 돋보기 기능으로 다른 패턴 사이트들과 차별화에 성공했다. http://pttrns.com


7) 안드로이드 pttrns : 6번 pttrns 사이트와 동일한 구조로 안드로이드 UI패턴을 제공한다. http://androidpttrns.com





8) 코코아 콘트롤스 : 다양한 커스텀 UI 콘트롤을 공유하고 판매한다. 
http://www.cocoacontrols.com


9) Patterns of Design : iPad UI 패턴도 볼 수 있다. http://www.patternsofdesign.co.uk


10) iOS Developer Library > Human Interface Guidelines : 애플 공식 iOS 디자인 가이드라인 https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556-CH1-SW1

--> 한글 번역 사이트 : http://www.xgenesis.org/index.php?mid=iOS_Human_Interface_Guidelines&act=dispWikiTreeIndex


11) 러블리 UI : 분류가 좀 더 세분화되어있다. http://www.lovelyui.com


12) UI Parade : 패턴도 다양하지만, 유용한 라이브툴도 제공한다. http://www.uiparade.com


13) 4ourth mobile patterns wiki : 일반 UI 패턴뿐만 아니라 하드키, 벨소리, 제스쳐, 햅틱 피드백, LED등 까지 무척 자세하게 설명하고 있다. http://4ourth.com/wiki/Index


14) 노키아 모바일 디자인 패턴스 wiki : 현재 98개 패턴 아티클 제공중...   
http://www.developer.nokia.com/Community/Wiki/Category:Mobile_Design_Patterns


15) UX Archive : 기능별, 카테고리별로 정리된 다양한 아이폰 앱 화면들을 볼 수 있다.
http://uxarchive.com/





★ 2014-02-19 추가


16) Android Niceties : 각종 안드로이드앱의 화면을 원하는 크기로 바꿔가며 볼 수 있다.
http://androidniceties.tumblr.com/


17) Pattern Tap : PC웹 화면의 다양한 패턴을 제공한다.
http://patterntap.com/


18) Little Big Details : 다양한 사례를 통해 깨알같은 UI 디테일들을 공유한다.
http://littlebigdetails.com/


19) Capptivate.co : 아이폰앱의 다양한 애니메이션효과를 그대로 볼 수 있다. (주의: PC느려짐)
http://capptivate.co/

신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2013.01.20 17:00 신고
    댓글 주소 수정/삭제 댓글
    좋은 정보네요

    잘 보고 갑니다
  2. thk
    2013.01.21 06:16 신고
    댓글 주소 수정/삭제 댓글
    안드로이드쪽은 여기도 자료많습니다. http://androidux.com/
  3. 2013.10.10 17:51 신고
    댓글 주소 수정/삭제 댓글
    좋은 정보 감사합니다.^^
  4. 2013.10.11 10:26 신고
    댓글 주소 수정/삭제 댓글
    좋은 자료 감사합니다!! ^-^
  5. g
    2013.10.14 11:14 신고
    댓글 주소 수정/삭제 댓글
    여기도 UI정보가 한가득 http://grafi.kr/ui
  6. 2014.09.03 09:29 신고
    댓글 주소 수정/삭제 댓글
    좋은 정보네요.. 잘 봤습니다.
  7. 2015.04.16 15:20 신고
    댓글 주소 수정/삭제 댓글
    완전 좋으네용 감사해요!

1) 더이상 입지 않는 헌옷을 구한다.

2) 원하는 부분의 패턴을 가위로 잘라 케이스 사이에 끼운다.

3) 독특한 커스텀 아이폰 케이스 완성...    

다만, 요즘은 입지않는 헌옷의 패턴이 케이스로 만들만큼 매력적이어야 한다는 점... ㅡ,.ㅡ;; 아니면, 멋진 패턴의 재활용 천들만 2-3개씩 모아 따로 팔아도 좋을 것 같다.

★ 디자인 : 데일리시너리 이지훈 (http://www.dailyscenery.com/)




신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 이두원
    2012.08.10 12:49 신고
    댓글 주소 수정/삭제 댓글
    저 케이스는 어디서 구하는 건가요?

사용자 삽입 이미지

도요타의 Glass of Water 아이폰 어플리케이션... 물한잔이 담긴 유리컵을 차에 두고 흘리지 않도록 운전하면 10% 정도 연료절약 효과가 있다고 한다. 이에 착안하여 도요타에서는 아예 Glass of Water라는 아이폰 어플리케이션을 만들었다. 아이폰의 가속도센서를 활용하여 실제 물을 얼마나 흘렸는지 계산해주고, 또 GPS와 연동하여 도로 어느지점에서 물을 흘렸는지까지 알려준다. 물론 현재속도와 연비도 자세하게 알려준다. 게다가 웹사이트에 그 결과를 업로드 할 수 있어 운전패턴을 분석할 수도 있고 친구들과 공유할 수도 있다.  

http://www.aglassofwater.org/



사용자 삽입 이미지




신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2011.02.06 17:20 신고
    댓글 주소 수정/삭제 댓글
    잘 보고 갑니다 ^^
  2. 2011.02.07 10:17 신고
    댓글 주소 수정/삭제 댓글
    도요다의 공돌 근성이 좀 완화되는 느낌? 좋은 캠페인 같습니다.

사용자 삽입 이미지

터치키패드를 대충 눌러도 제대로된 단어로 자동 변환되는 새로운 터치스크린 입력 기술 (블라인드 타입)이 등장하였다. 그동안의 자동완성기술보다 한단계 진보된 기술같은데, 스와이프처럼 입력 위치의 패턴을 분석한 알고리즘을 사용하는 것 같다. 아래 동영상들을 살펴보면, 안드로이드 뿐만 아니라, 아이폰, 아이패드용 데모버전도 준비가 되어있고, 키패드를 완전히 벗어난 위치에서도 입력이 가능하다. 구글에서 최근 인수했다고 하니, 조만간 안드로이드OS에 들어가길 기대해보자...

 





신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 육식공뇽
    2012.06.09 23:29 신고
    댓글 주소 수정/삭제 댓글
    와 소름돋네요;;
    좋은글 잘 보고 갑니다 ㅎㅎ

사용자 삽입 이미지

★ 멘탈모델이란? 어떤 사물을 디자인하려면, 사람들이 그 물건으로 무엇을 하려고 하는지 완전히 이해하고 있어야만 한다. 그 사람이 뭘 하려는지는 물론, 그 목적을 달성하기 위해 어떤 행동 절차와 사고방식을 따르는지도 알 필요가 있다. 단순하게 말하자면, 멘탈모델은 사람들의 행동 동기, 사고 과정뿐만 아니라 그들이 행동하는 감성적, 철학적 배경에 대해서도 깊이 이해할 수 있도록, 대표 사용자들에게서 수집된 에쓰노그래피 자료를 의미상 가까운 것끼리 모아 놓은 친화도 다이어그램(Affinity diagram) 정도라고 할수 있겠다. 멘탈모델을 만든다는 것은, 사람들이 하는 행동에 대해 그들과 이야기하고, 패턴을 찾고, 그 패턴을 포괄하는 하나의 모델로 정리하는 일이다...

1) 인터뷰를 통해 도출된 사용자들의 행동양식을 분류하고,
2) 행동들의 패턴을 찾아 기둥으로 쌓아올린다.
3) 이를 기반으로 인지공간을 구축하고, 실제 사용자들의 task map을 만들며,
4) 완성된 이 단순한(?) 도표를 가지고, 지금 제공하는 서비스나 기능이 사용자들에게 실제로 도움이 되는지 여부를 확인한다. --> 예를 들어, 웹사이트의 메뉴구조등을 뽑아낼 수 있음...
5) 이를 통해, 향후 회사의 제품/서비스 전략도 수립할 수 있게 도와주며, 심지어 경쟁사 분석까지도 가능하다.

바로 위 4, 5번이 이 책 최대의 장점이다. 뜬구름잡는 소리에 시간낭비 하지 않고, 실제 써먹을 수 있는, 꽤 프랙티컬한 관점에서의 멘탈모델이라는 도구를 차근차근 알려준다는 점... 그렇다고, 그 도구가 하늘에서 뚝 떨어진 것도 아니다. 그동안 우리가 알고 있고, 많이 해오고 있던것을 조금만 관점을 바꿔 좀 더 사용자의 입장에서 바라봐주고, 조금 더 체계적으로 분류해 보는 것 뿐이다. 그대로 따라하다보면, 어디에 어떻게 써먹으면 좋을지 딱 감이 온다. 상품기획, 디자인 전략, 디자인 기획, 서비스전략, 전략기획, 연구기획, 기술기획, 기술전략, 마케팅 전략등 "기획"이나 "전략"이 붙어있는 부서 종사자들의 필독서라고 할 수 있겠다. ★★★★☆

※ 저자인 인디 영 (Indi Young)이 Adaptive Path 창업자중 한사람이어서 그런지, 아무래도 책을 읽는 내내, "우리한테 프로젝트 주면, 멘탈 모델 도표 제대로 해서 가져올 수 있지롱..." 이라는 환청이 들린다. ㅡ,.ㅡ;;


ix : 그동안 UX분야의 실무자들에게 있어서 "멘탈모델"이라는 말은, "기존의 UI는 사용자의 멘탈모델과 맞지 않는다"는 식으로, 사용자가 생각하고 있는 무언가를 적당히 에둘러 말하기 좋은 용어 정도였다고 생각한다. 만일 누군가가 "그래서 그 멘탈모델에 따르면 사용자가 원하는 건 뭔가요?"라는 질문을 한다면, 직관적으로 떠오른 UI 디자인을 갖다 붙이지 않고 사실에만 근거해서 대답할 수 있는 무언가가 우리에게 있었던가? 이 책에서는 멘탈모델을 간단한 도표로 작성함으로써 확신을 갖고 "사용자의 멘탈모델은 이렇습니다."라고 말할 수 있는 방법을 다년간의 실무경험을 바탕으로 조목조목 설명해주고 있다.

xi : 어떤 경우에도 한 가지 방법으로 완벽한 제품을 만들어 낼수는 없다. 하지만 성공률을 높이는 방법은 여러가지다. 그중 하나가 우선 그 물건이 필요한 이유를 이해하는 것이다. 사람들이 무엇을 하려는지 깊이 탐구하고, 그 각각에 부합하는 기능들을 나열해 보라. 고객의 행동과 사고방식에서 큰 맥락을 파악하지 않고, 커다란 퍼즐에서 일부분만 풀려고 하고 있지는 않는가? 구축하려는 서비스에 너무 많은 기능이 있어서 무엇부터 개발해야 할지를 정하기가 어려운가?

xii : 멘탈모델은 사용자에 대해 깊이 이해한 정보를 시각화하고, 각기 다른 영역에 맞는 해결책을 나열하고, 장기적인 안목으로 개발계획을 세울 수 있게 해준다.

xvi : 멘탈모델을 이용하면 고객이 달성하려는 목적과 당신이 제공할 서비스 사이의 틈새를 명확하게 확인할 수 있다.

xix : 하나의 서비스를 만들어서 여러 종류의 사용자들을 두루 포괄하려고 하기보다, 그들의 행동과 사고방식에 정확하게 부합하는 서비스를 추구해야 한다.

2p : 멘탈모델은 사람들의 행동동기, 사고 과정뿐만 아니라 그들이 행동하는 감성적, 철학적 배경에 대해서도 깊이 이해할 수 있게 해준다.

4p : 멘탈모델을 만든다는 것은, 사람들이 하는 행동에 대해 그들과 이야기하고, 패턴을 찾고, 그 패턴을 모두 포괄하는 하나의 모델로 정리하는 일이다.

8p : 이 책에서 말하는 멘탈모델은 사람들이 왜 어떤 행동을 하는가에 대해서 한층 근원적인 이유를 모아 놓은 것으로 오랜 경험을 바탕으로 구축된 내적 표상의 집합체 같은 것이고, 따라서 쉽게 바뀌거나 사라지지 않는다. 이 멘탈모델은 어떤 사람이 하고자 하는 일을 커다란 맥락 안에서 이해되도록 표현한 것으로, 그 사람이 사용하는 도구 등에는 영향을 받지 않는다.

9p : 멘탈모델을 통해서 얻게되는 3가지 장점 : 디자인 자신감 (Confidence) - 서비스와 기능을 설계하는 지침이 된다. 방향의 명확성 (Clarity) - 사용자와 사업 측면에서 올바른 의사결정을 내릴 수 있게 한다. 전략의 연속성 (Continuity) - 비전과 사업 기회가 오래 지속되도록 해준다.

10p : "디자인 분야에서 우리가 감탄해 마지않는 업적들이 사실은 대부분 "전략"이라기보다 일상적인 상식과 취향 그리고 행운의 부산물이죠. 이건 공공연한 비밀입니다. 어떤 고객은 그 모호한 부분을 견디지 못해서 행운이라는 요소를 인정하지 않고, 성공하리라는 확고한 근거가 있다는 느낌이 들 때까지 어마어마한 양의 쓸데없는 정보를 잔뜩 쌓아올리기도 하지요." (시각 디자이너 Michael Bierut)

16p : 정보구조의 재설계에 시간을 탕진하지 말아라. --> 아직도 많은 회사가 순환적인 디자인 프로세스 (만들어 놓은 정보구조를 다시 고쳐 만드는 과정)에 얽매여 있다. 즉 디자인에서 고칠 부분을 정의하고, 수정한 다음, 다시 그 수정된 내용이 또 조금 잘못되었다는 것을 확인하는 것이다. 이제 더는 서비스를 새로 고안해 내고 정보구조를 재정의하는 일을 반복하지 말자. 멘탈모델을 이용해서 개발에 필요한 개념들을 처음부터 제대로 정의함으로써, 한 제품을 몇번씩 고쳐나가는 데 초점을 맞추기보다 중요한 사업적 목표를 달성하는 데 에너지를 쏟아라.

17p : 멘탈모델은 사용자의 맥락을 전반적으로 (한가지 측면이나 서비스 혹은 기능에만 초점을 맞추지 않고) 보여주기 때문에, 사용자의 관점에서 전체 경험을 시각화해 보는 유용한 방법이다.

18p : 어댑티브 패쓰의 창립자인 피터 머홀츠는 심지어 제품을 디자인하는 일 자체가 없어져야 한다고 주장하기도 한다. "일단 뭔가 물건을 만들어야 한다는 생각을 하면, 무엇을 만들어 낼까라는 고민에 의해서 제약을 받게 됩니다... 그리고 제품을 고객의 니즈에 그때그때 대응하는 요소로만 인식하게 되죠. 플리커, 코닥, 애플, 타겟같은 회사들은 모두 경험 자체가 바로 고객에게 전달할 제품이고, 사실 그게 고객이 유일하게 신경 쓰는 것임을 깨달았던 겁니다."

21p : 멘탈모델은 우리끼리 사용자에 대해서 이야기하는 게 아니라, 직접 사용자와 이야기하는 듯한 관점을 제공해준다.

21p : 이제 기업은 내부에서 뭔가 제품을 고안해 낸후에 고객들에게 그 제품을 사라고 설득할 마케팅 및 영업 인력을 채용하기 보다, 고객들에게 필요한 것이 무엇인지 파악하는데 노력을 기울이고 있다. 제품의 특장점이 자연스럽게 구매를 유도하는 제품을 디자인하는 것이다.

22p : 종종 나는 "고객 우선주의"철학을 받아들였으나, 거기에 맞는 소통방법은 갖추지 못한 사람들과 일하기도 한다. 그런 조직에 속한 직원들은 고객에 대한 질문을 받았을때 조직의 사업 목표 관점에서 대답하는 경향이 있다. "이 프로젝트를 수행하면 당신의 고객이 무엇을 얻게 될까요?" 라는 질문에 대략 다음과 같은 응답이 대표적이다. "지금 상태라면, 웹사이트의 메뉴는 좋지 않은 사용자 경험을 줄 뿐입니다. 우리는 훨씬 더 쉬운 경험을 제공하려 합니다. 콘텐츠를 양산해 내기보다, 좀더 머리를 써서 방문자들이 콘텐츠 중에서 원하는 것을 걸러낼 수 있게 만들 생각입니다. 고객만족도는 금세 쭉쭉 올라갈 겁니다." 이것은 회사 직원으로서 가지고 있는 관점의 메아리이고, 사업적 관점에서 적합한 응답일 뿐이다. 행동을 중심으로 사용자 그룹을 분류하고 멘탈모델을 구축하는 작업의 목적은, 이런 사람들을 설득해서 고객의 관점에서 말할 수 있도록 하는 것이다. 나는 직원들이 이런 식으로 말해 주길 바란다. "고객으로서, 나는 내 관심사에 맞는 적절한 콘텐츠를 얻을 수 있을 겁니다. 수많은 콘텐츠를 일일이 분류할 필요도 전혀 없죠. 내가 원하는 정보를 뭐든 순식간에 골라 낼 수 있을 테니까요."

23p : 고객의 관점에서 서술어를 사용하라.

31p : 개발자에게 선호도 조사 결과를 잔뜩 건네주고 제품을 만들라고 하는 것은, 건설업자에게 인테리어 잡지 스크랩을 주면서 부엌을 만들라고 하는 것과 같다.

36p : 잘못 작성된 시나리오란 무엇일까? 사용자가 누르는 버튼 하나하나, 온갖 극단적인 사례, 모든 가능한 오류 상황등을 불필요하게 상세히, 장황하게 묘사한 시나리오를 뜻한다.

50p : 리서치를 통해서 최종적으로 도출한 제품과 서비스가 각 부류의 사람들을 모두 만족시키려면, 대상 사용자를 그 행동의 차이에 의해 분류하는 것이 중요하다. 여러 분류에 속한 사람들을 엉성하게 지원하는 하나의 공통된 서비스보다, 특정 사용자 그룹의 행동과 사고방식에 딱 들어맞는 서비스를 도출하는 편이 훨씬 낫다.

51p : 일반적인 시장구분은 잊어도 좋다. 그 대신, 당신이 만들 서비스가 사용되는 순간 사람들이 어떻게 행동하는지의 차이점에 주목하라.

52p : 행동 기반 사용자 그룹 분류 방법 --> 1) 각각의 행동을 나열하기 (여러 유형의 사람들이 각각 다르게 행동하는 온갖 방식들을 대략 묘사해 본다.) 2) 행동 분류하기 (나열된 행동들을 들여다보면서 그룹으로 분류한다.) 3) 분류된 그룹에 이름 붙이기 (연구 과정에서 나타난 각 그룹을 임시로 부를 이름을 정한다.)

76p : 특정 사용자 그룹에 속하는 사람을 4명 정도 만나 보면 그 다음부터는 비슷한 이야기를 듣게 됨을 알 수 있다. 따라서 당연히 나는 그룹당 최소한 4명을 인터뷰하기를 권한다.

96p : 프로젝트의 책임자는 각 관련자와 만나서 조직의 목표와 장기적인 전략, 예상되는 상황과 당면 과제, 일이 원만하게 진행되지 않았던 사례, 내부 조직의 강점과 약점 그리고 의사결정을 하는 사람들은 누구인지를 파악해야 한다.

110p : 멘탈 모델 리서치는 만들어진 서비스를 평가하려는 목적이 아니기 때문에, 참가자가 도구에 어떻게 반응하는지를 직접 관찰할 필요는 없다.

113p : 멘탈모델 인터뷰의 6원칙 --> 1) 제품 선호도가 아닌 행동과 사고방식 중심으로 대화할것 2) 자유응답 질문만 사용할것 3) 참가자가 쓰지 않은 단어를 사용하지 말것 4) 대화의 흐름을 따라갈것 5) 도구에 대해서 이야기하지 말것 6) 직접적인 경험에 중점을 둘 것

114p : 인터뷰에 대한 내 첫 원칙은 제품 자체가 아니라 사람들이 하고 싶어하는 일에 집중하라는 것이 되었다. "좋아하는", "싫어하는", 혹은 "추가되었으면 하는"같은 표현을 사용하지 마라. --> 제품 선호도가 아닌 행동과 사고방식 중심으로 대화할것...

115p : 자유 응답 질문은 상대방에게 넓은 응답 범위를 제공해 준다. 이 방식은 예/아니오 질문이나 선택 가능한 보기를 제공하는 질문보다 많은 정보를 끌어낼 수 있다. 이를테면 "A나 B를 하려고 했나요?"라고 하기보다 "무엇을 하려고 했나요?"라고 물어보는 식이다. 이런 질문을 사용해서 응답에 선입견이 반영되지 않을 수 있고, 상대방이 당신의 생각을 알아내지 못하게 막는다. 그럼으로써 상대방은 자신에게 중요한 것에 대해 이야기하는 데에 집중할 수 있다. 대표적인 자유응답 질문은 "더 자세히 말해주세요"나 "그 부분을 잘 이해할 수 있도록 도와주십시오"등이 있을 수 있다.

116p : 인터뷰가 진행되는 동안 참가자가 대부분의 주도권을 쥐도록 해야 한다. 그렇게 참가자가 대화를 이끌어 나가도록 해야 편견없는 데이터를 얻게 된다.

117p : 어떻게 전화번호를 찾아서 통화하는지 알아내려고 하지 말고, 그 전화통화를 통해 뭘 하려고 하는지를 알아보는 것이다. 멘탈모델 인터뷰는 도구에 대해 알고자 함이 아니라, 그 사람이 어떤 목적을 이루기 위해서 어떤 과정들을 거치는지를 알기 위함이다.

120p : 인터뷰 업무는 결국 상식과 예의라는 범위 안에서 누군가를 상대로 세 살배기 아이 역할을 하는 것이다.

172p : 행동을 패턴에 따라 분류하기 --> 마음속에 미리 생각하고 있는 그룹들에 행동을 맞춰 넣는 것이 아니라, 행동들이 스스로 적합한 패턴을 형성하도록 해야 하는 것이다. 가장 작은 유사성부터 그룹을 짓고 그로부터 커가도록 한다. 절대로, 자기 마음속에 있는 체계를 반영하면 안된다. 행동 자체가 갖는 의미에 따라 그룹을 만들자.

200p : 인터뷰를 모두 마치기 전에 행동기둥이나 인지공간으로 분류하기 시작하는 것은 좋지 않다. 행동을 분류하면서 본 패턴과 구조가 인터뷰 질문에 영향을 미칠 위험이 있기 때문이다.

242p : 완성한 멘탈모델 도표를 어디에 적용해야 할까? 먼저 앞으로의 개발 로드맵으로 활용하는 방법이 있다. 멘탈모델은 사용자의 환경을 전반적으로 묘사하기 때문에, 서비스나 제품을 사용할 사람들이 겪을 완전한 경험을 설계하는 데 활용될 수 있다.

262p : 최종적으로, 결여 콘텐츠 분석은 전혀 반대 방향으로도 쓰일 수 있다. 경쟁사의 서비스를 콘텐츠 지도로 만들어서, 자사의 기존 멘탈모델에 겹쳐보자. 자사와 경쟁사의 서비스를 비교해보고, 어떤 기회가 있는지 점검한다.



신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. hello
    2012.02.24 16:51 신고
    댓글 주소 수정/삭제 댓글
    인간 행위에 기반한 디자인 전략, 멘탈모델
    http://ready.uxfactory.com/74

사용자 삽입 이미지

- 앞표지에 실린 좀 쌩뚱맞은 광고문구 ("여러분도 아이팟과 같은 감각적인 인터페이스를 디자인할 수 있습니다.")가 좀 당황(?)스럽긴 하지만, 전체적으로 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가지) ★★★★★

신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

Berber Soepboer (패션디자이너, 네덜란드)와 Michiel Schuurman (그라픽디자이너, 네덜란드)가 같이 만든 DIY 드레스 씨리즈...

http://www.berbersoepboer.nl/
http://www.michielschuurman.nl/

1) Colour-In Dress : 원하는 패턴에, 원하는 칼라를 칠하면 된다.
사용자 삽입 이미지

2) Replacement Dresses : 100개가 넘는 버튼시스템으로 3가지 드레스를 조합하여 입을 수 있다.
사용자 삽입 이미지




신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2009.05.01 10:34 신고
    댓글 주소 수정/삭제 댓글
    옷도 DIY가 되는군요. 개념이 무척 흥미롭네요.

사용자 삽입 이미지

T9 입력방식의 개발자인 Cliff Kushler가 새로 선보인 터치 방식의 쿼티 입력... Swipe... 입력하고자 하는 알파벳위에서 스타일러스나 손가락으로 라인을 긋기만 하면 된다. 이제 자판의 위치를 외는게 아니라, 특정 단어를 쿼티키로 연결하는 라인 패턴을 외우게 될수도... 조만간, 애플 App store 에서 구입이 가능할지도 모름...

※ 참고1 : 아래 동영상은 거의 동일한 방식의 구글 안드로이드용 ShapeWriter WritingPad...



※ 참고2 : 아래 동영상은 국내 모비언스라는 회사에서 개발한 Sokey... (한글도 사용가능한 소프트웨어를 여기서 다운로드 할 수 있음.) --> http://www.mobience.com/sokey/download.html



※ 참고3 : 2004년 IBM 연구소의 Shumin Zhai가 개발한 SHARK Shorthand 관련 웹페이지 --> http://domino.watson.ibm.com/comm/research.nsf/pages/r.hci.innovation.html


신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2008.09.11 11:11 신고
    댓글 주소 수정/삭제 댓글
    이거 좀 대단하군요;; www.clien.net 새로운소식 게시판에 링크하겠습니다. ^^;
  2. 노원
    2008.09.12 15:10 신고
    댓글 주소 수정/삭제 댓글
    아래 2개 링크에 볼만한 한글 입력 데모가 있네요.

    http://blog.joins.com/media/folderListSlide.asp?uid=zeehuitv&folder=109&list_id=9868423

    http://blog.joins.com/media/folderListSlide.asp?uid=zeehuitv&folder=109&list_id=9868434&page=

1) 우리를 놀라게 했던, 아이폰의 손가락 슬라이드를 통한 Touch unlock 아이디어에 이어, 구글 안드로이드는 한걸음 더 나아갔다. 선잇기를 통한 터치언락 기능... 9개 점을 통해, 터치언락뿐만 아니라, 선잇기 패턴을 통한, (숫자 비밀번호를 대체하는...) 보안기능까지 갖게 되어버렸다.

2) Indicator area의 터치 드래그 Drop down을 통해, 최근 Call, Messages, Alarm등의 이벤트 히스토리에 빠르게 접근하는 것도 재미있다.

3) HCI 논문에서나 볼수 있었던, 지자기센서를 활용한, 지도 네비게이션기능... 구글의 Street view 서비스에 딱맞는 기능이다. 사람들의 탄성!!!

현재 데모를 보여주고 있는 단말기는 대만 htc 제품인듯...



신고
Posted by 몬스터디자인

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절


BLOG main image
모든 포스트는 마음껏 퍼가고 재가공하셔도 됩니다. by 몬스터디자인

카테고리

분류 전체보기 (1627)
pRODUCT dESIGN (533)
tELECOMMUNICATION (144)
tRANSPORT (158)
LIFESTYLE kONTEXT (240)
tECH fARM (100)
fAIRS and eXHIBITS (38)
sHOPPING cART (6)
cOMIX (51)
bOOKS + mAGAZINES (85)
mOVIES (148)
gAMES (11)
iDLE tALK (113)
Statistics Graph
Total : 5,586,257
Today : 395 Yesterday : 931