본문 바로가기

인터렉션디자인

04_디자인 리서치와 브레인스토밍_디자인리서치가 무엇인가 디자인 리서치는 제품/서비스의 가능성이나 현재의 사용자나 시장 환경을 여러가지 측면에서 조사하는 활동이다. 디자인 리서치는 문화인류학, 과학과 사화학 연구, 현장조사, 디자인 그 자체의 방법론들을 모두 섞어서 이용한다. 리서치의 방법론에는 숨죽이고 관찰하는것에서 부터 역할극이나 시제품 제작같이 특정한 활동의 장을 만들고 적극적으로 관계를 맺는 것까지 모두 포함된다 디자이너들이 제품이나 서비스가 존재하는 감성적, 문화적, 심리적인 컨텍스트를 이해하는 것은 무엇보다 중요하고 이는 제대로된 조사를 통해서만 얻어질 수 있다 왜 디자인 리서치를 해야 하는가? 대부분의 인터랙션 디자이너들은 리서치를 하지않는다. 자신의 본능과 지식과 경험을 믿는다. 작은 프로젝트에서는 제대로된 접근방법일수 있이나 프로젝트가 커지고 .. 더보기
PART_3_12. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 북마크릿과 파비콘 (Bookmarklet & Favicon) *** - 북마크릿은 웹브라우저의 URL바, 즐겨찾기 리스트 등에 설치되는 기능버튼으로써 링크기능 뿐만 아니라 해당 서비스의 특정기능을 수행할수 있는 작고 가벼운 프로그램이다 - 북마크릿이 설치되었다면 해당 서비스로의 접근은 용이 - 인간의 기억력은 우수한편이 아니므로 사용자의 외부기억을 지원할 수 있는 북마크릿을 제공해서 기억부담을 줄여줄 필요가있음 - 웹브라우져의 공간한정과 컴퓨터 자원을 아껴야하는 환경때문에 설치될수 있는 북마크릿의 개수는 한정적임 - 주의를 끌 목적으로 파비콘을 같이 사용 - favorite icon의 약자 - 북마크릿의 레이블은 버튼레이블처럼 텍.. 더보기
PART_3_11. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 피시아이메뉴 (Fisheye Menus) *** - 마우스 커서로 포인팅한 메뉴가 커지도록 설꼐된 메뉴로 시지각이갖는 조명 은유의 특성을 활용한 기법 - 돋보기효과 zoom-in effect - 주어진 공간에 보다 많은 메뉴를 담기위해 넘치는 부분을 스크롤 처리하던가 아니면 메뉴를 작게 만들어 더 많이 담을 수 밖에 없다. 피시아이 메뉴는 후자의 상황 - 예시 http://hcil.cs.umd.edu/trs/2000-12/2000-12.html - 스크롤이 생기지않고 보다 많은 메뉴를 제공하고자 착안된 기법 - 사용자로하여금 조작의 즐거움을 제공하여 몰입하도록만드는 효과가있음 - 마우스로만 조작해야하는 제약이 따름 - 인터랙티브 .. 더보기
PART_3_10. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 인터랙티브 모자이크 (Interactive Mosaic) *** - 아주 작은 이미지들로 이루어진 일종의 이미지 맵으로싸 특정 이미지에 마우스를 대거나 클릭하면 이미지가 확대 되면서 해당 정보를 보여주는 기법 - 새로운기법은 아니지만 태그 클라우드 처럼 새로운 정보 탐색패턴을 지원한다는 점에서 주목할만 함 - 1000개정도의 이미지를 보여줄수 있지만 개수가 많을수록 정보의 정확성은 덜어지므로 서비스의 용도와 목적에 맞게 적절히 조정해야함 - 시각적 정보가 다소 부정확해도 한눈에 보고자 한다면 인터랙티브 모자이크 기법이 유용함 - 정보탐색의 기능성 측면보다는 시각적 흥미를 위한 감성 측면을 더 강조함 - 기법의 채백 여부는 정보가 .. 더보기
PART_3_9. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 제약기법 (Constraints) *** - 웹은 어플리케이션처럼 기능이 강조 되고있음 - 급격한 정보의 증가는 보다많은 기능을 필요로하고있음 - 웹이 대중화된 원인은 어플리케이션보다 쉽다는 점 - 복잡한것을 더욱 단순하게 불편한것을 편리하게 어려운것을 보다 쉽게 사용할 수 있도록 시스템을 설계하기위해 가장 먼저 적용해야 하는 디자인 원칙이 제약기법이다. - Ajax 기반의 사이트는 한페이지내에서 여러 과업을 수행하기때문에 이질적인것들을 소화해야하므로 복잡하다는 단점이있음 - 이경우 이미 수행했거나 불필요한 디자인 요소는 사용자가 조작하지않도록 색상을 흐리게 하거나 표시를 제공하는 등의 시각적 효과에 의한 제약기법(constrai.. 더보기
PART_3_8. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 빠른 편집 (Instant Edit) *** - 사용자들은 정보의 소비하는 차우너을 넘어 생산, 참여, 공유까지 그 활동 영역을 넓히고 있음 - 사용자들은 콘텐츠 편집을 위해 보다 많은 시간과 노력을 기울임 - 잦은 편집이 요구되는 서비스라면 편집 인터랙션이 쉽고 편리해야함 - 한두글자를 바꾸려해도 편집화면으로 이동하며, 복잡한 편집화면에서 편집하려는 부분을 찾아야하는 번거로움 - AJAX의 사용은 원하는 부분만을 선택하여 페이지 이동 없이 편집할 수 있게 함 - 콘텐츠의 구조화를 통해 마이크로콘텐츠로 분할되어야 빠른 편집(instant edit, inline edit)이 가능 - 기술적으로 마이크로콘텐츠마다 개별 편집이 가능하다.. 더보기
PART_3_7. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 빠른 저장 (Instant Save) *** - 저장과정은 데이터 입력, 입력확인, 전송(submit) 단계로 구분 - 빠른 저장은 여러단계의 과정은 한 단계로 처리하는 기법으로 메시지박스와 컨트롤 버튼을 이용하지 안고 데이터를 저장시킴 - 클릭수를 줄임으로써 사용 효율성을 향상시키는 효과가 있음 - 실수로 원치않는 데이터를 저장시킬 수 있으니 채택여부는 데이터의 성격에 따라 결정 - 중요도가 높지않는 데이터를 자주 저장해야하는 경우 적합 - 확인과정이 필요한 비밀번호, 계좌번호, 금액 등 은 부적합 - 컨트롤 버튼을 누르는 단계가 생략되어 저장 여부를 인식 시키기 어려우므로 저장 상태를 확인시킬수 있는 시각적 단서를 제공하고 간.. 더보기
PART_3_6. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 미리보기 팝업 (Quick Read Pop-up) *** - 마우스 오버시 상세 정보를 팝업형식으로 보여줌으로써 제한된 공간 안에서 더 많은 정보를 제공 - 메뉴를 팝업시켜 컨트롤을 제어할 수 있는 기능을 제공 - 공간할용도를 높이고 사용자의 진로를 유지시켜줌 - 사용자의 조작에 의해서만 작동 - 소극적이거니 주의를 기울이지 않는 사용자를 고려해 핵심내용을 찹업으로 보여주는것은 바람직하지않음 - 기존내용 위에 튀어 오르는 방식이므로 입체적이어야함 - 3차원레이어기법(Three-dimensional Lavering) - 기존내용과 시각적으로 구별이 되도록 움직임, 배경색, 테두리 등의 시각효과가 필요 - 정보구조의 깊이를 조절할 수.. 더보기
PART_3_5. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 빠른 검색 (Instant Search) *** - 키워드를 입력한 동시에 결과값을 보여주는 기법으로 그 원리나 효과는 검색의 자동완성 기능과 비슷 - 사용자와 시스템이 동시에 상호작용해 즉각적인 피드백을 재공한다는 점과 검색결과 화면으로 이동하지않고 검색결과를 확인할 수 있음 - 브라우져와 서버 간의 상호작용을 의미하므로 서버 부하가 수반됨 - 쿼리가 많은 사이트에서는 채택하기 부담스러움 - 키워드 조합이나 철자 오류에 따른 결과값을 곧바로 확인해야하는 경우 유용 - 입력값과 결과값이 동시에 변화하므로 다음과같은 사항을 고려한다 . 입력값과 결과값 영역을 근접 배치 - 두 영역이 멀리 떨어져 있으면 시선의 분산으로 곧바로 확인이.. 더보기
PART_3_4. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 자동 완성 (Auto Complete) *** - 검색UI의 요구사항은 입력 편의성, 입력신속성, 입력 정확성 - 입력 신속성과 정확성을 위해 등장한것이 자동완성 기능임 - 같은 단어를 반복적으로 사용할 경우 단어를 기계적으로 저장해 사용자가 해당 단어와 관련된 글자를 입력하면 신속하게 관련 단어를 목록화해서 보여주는 기능 - 검색어 입력 이벤트(onkeypress, onblur, onchange)를 자바 스크립트를 이용해 목록화(indexing)된 유사어를 서버에 요청하는 방식 - 시스템 관점에서 보면 유사어 제안(suggest) 기능 - 얼마나 사용자 컨텍스트에 적합한 유사어를 제시할 수 있느냐가 관건 - 자동 완성 기능의 장.. 더보기
PART_3_3. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 로딩 표시기 (Loading Indicator) *** - 데이터 변화가 진행되고 있음을 알림 - YFT 기법이 넓은 영역적용을 위한거라면 로딩표시기는 좁은 영역을 위한것 - 사용자에게 즉각적인 피드백을 제공하여 과업의 순조로운 진행을 알림 - 데이터 로딩이 늦어지는데도 표시기가 제공되지않는다면 사용자는 기능 /도는 기술의 요류를 의심하게 됨 - 로딩 표시기 고려사항 . 데이터 변화가 이루어지는 영역에 적합한 아이콘을 제작 . 데이터 변화가 중요한 경우 시각적 효과를 강조 . 데이터 변화가 중요하지 않거나 일상적인 경우 시각적 자극을 최소화할 수 있는 표시기 사용 . Brand Identity의 형태와 색상을 반영 . 페이지상의 .. 더보기
PART_3_2. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** YFT (Yellow Fade Technique) *** - AJAX는 전체 페이지를 로딩 시키지 않고 일부 영역만 로딩할 수 있기때문에 페이지상의 데이터 변화를 눈치 채지 못할 수 있으므로 이를 보완하기위해 짧은 시간동안 시선을 집중 시킬 필요가 있음 - YFT는 이를 보완하기 위한 디자인 기법 - 페이지상의 변화된 영역을 처음엔 노랑색으로 강조하다가 시간의 흐름에 따라 서서히 원래의 배경색으로 바뀌는 기법(highlighting change) - 로딩 표시기(loading indicator) 기법에 비해 비교적 넓은 영역(area, sector, unit)의 데이터 변화를 확인시킬수 있는 장점이있음 - 데이터 변화로 인해 사용.. 더보기
PART_3_1. 인터렉션 디자인 (INTERACTION DESIGN) PART_3. 인터렉션 디자인 (INTERACTION DESIGN) *** 단일 컨텍스트 다중 작업 (Single Context Multi Tasking) *** - AJAX, FLEX의 등장으로 인해 가장 두드러진 변화는 페이지 이동없이 여러작업을 수행할 수 있다는 점 - AJAX기술을 사용하면 원하는곳에서 원하는 정보를 불러들일수 있음 - 한곳에서 머물면서 과업을 수행한 다는것은 사용자 컨텍스트(user context)의 지속을 의미함 - 10명의 사람을 일일이 방문하는것과 10명의 사람이 회사로 방문해주는것은 콘텐츠는 같지만 컨텍스트는 다름 - 일관된 사용자 컨텍스트를 제공할 수 있는지의 여부가 디자인의 초점이 될것임 - 신기술의 적합, 부적합을 따지는것보다 사용자 경험을 향상 시킬수 있는 적절한 .. 더보기

티스토리툴바