본문 바로가기

인포메이션디자인

PART_1_21. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 저작권 없는 푸터 (No copyright Notice On Footer) *** - 푸터영역은 저작권을 알리기위해 반드시 존재해야한다고 인식되었음 - 로고, 저작권공지, 회사연락처 등으로 구성되었으나 형식적 - 제공자에게 중요하지않다면 제공자체를 얼마든지 제고 할수 있음 - 공유의 활성화를 위해서는 저작권공지는 실용적인 치원에서 이루어질 필요가 있음 - 고객과의 비즈니스에서 실질적인 이익을 주지않는 요소는 과감히 제거해 성과(performance) 중심의 디자인을 달성할 수 있도록함 - 푸터 운영전략 1. 실질적 저작권 정보를 공지 . 'All right reserved'는 모든 저작물에 대한 배타적권리를 가진다는 의미 . 권.. 더보기
PART_1_20. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 사이드노트 (Sidenotes) *** - 특정단어 또는 문장을 쉽게 이해할 수 있도록 측면영역에 제공되는 설명문 - 마우스 키보드 조작없이 읽어 내려가면서 보충설명을 확인할 수 있는 편집기법 - 본문을 정확히 전달하기위한 목적을 갖는다 - 인쇄물의 각주(footnote), 미주(endnote)와 비슷 - 인쇠물은 정해진 페이지라 하단에 각주, 미주를 제공할 수 있지만 웹은 분문 하단의 길이가 일정치않고 길기때문에 별도의 설명문을 삽입하기 어렵다 - 별도의 설명문페이지로 이동시키거나 팝업을 이용해 처리할 수 있지만 마우스나 키보드를 사용하지않으면 확인할 수 없음 - 본문에대한 저관심일때는 적극정인 조작을 기대할수 없으므로 미리 .. 더보기
PART_1_19. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 최근 읽은 사람들 위젯 (Recent Readers Widget) *** - 네트워크(network)의 연결점(node)이 점점 다양해져 연결점이 주제중심에서 사람중심으로 이동하고있음 - 콘텐츠 창출(contents creation) 측면에서 필자(writer)가 중요하지만 콘텐츠 가공(contents modification)측면에서는 독자(reader)가 중요 = 독자의 위상이 필자에 필적 할만큼 중요 - 최근 읽은 사람들 위젯을 통해 특정주제를 읽은 사람들의 프로파일 페이지(profile page)로 이동하면 그사람의 사이트와 블로그, 친구들, 가입 커뮤니티, 소개, 최근 코멘트 등 다양한 정보를 볼수 있음 - 디자인에서 중.. 더보기
PART_1_18. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 순서 매기기 (Numbering) *** - 정보구조를 순서적(순차적)으로 배열로 설계하는것 - 일반적인 정보구조는 의미중심으로 묶고 사용자 니즈에 의해 열람이 진행되도록 설계 - 순서매기기는 제공자 중심의 정보구조 = 일방적 커뮤니케이션 - 누구나 공감하고 어떤상호아에서도 적용할 수 있는 객관성이 전제되어야 최종정보까지 열람이 가능함 - 순서강조를 위해 숫자를 크게 사용 - 숫자는 일상생활에서 자주 잡하는 명확한 개념이어서 쉽고 친근하게 느낄수 있고 주의를 집중 시킨다. - 수행부담(perfomance load)을 덜어줌 - 정해진 순서에 따라 과업을 수행하게 되면 과업단계마다 수행여부를 고민할 필요가 없고 항행을 위한 방향선.. 더보기
PART_1_17. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 스크린캐스트 (Screencast) *** - 캡처(capture) 소프트웨어를 사용해 컴퓨터 화면과 음성설명을 레코딩(recording)한 짧은 영상물 - 주로 데모용으로 사용 - 사용자에게 간접체험을 주어 소프트웨어의 용도와 특징을 보다 쉽게 이해시킴 - 사용자측면에서 일일이 조작해보지않아도 필요한 정보를 취득할수 있기때문에 편의성 향상 - 이야기구조를 가지기때문에 사용자 경험이 지속되지않으면 메시지를 전달하기 어려움 - 사용자의 시간을 얼마나 오랬동안 점유할 수 있는가(time share)에 따라 커뮤니케이션의 성과가 틀려짐 - 지루하지않도록 줄거리의 구성과 분량을 조정 - 도입부에서 관심을 끌지못하면 전개 될수 없으므로 .. 더보기
PART_1_16. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 스크린샷 (Screenshot) *** - 그래픽파일로 저장된 한 장의 화면내용 - 사용자에게 어떤 서비스인지 미리 체험시키기 위해 자주이용됨 - 웹브라우져까지 포함된 스크린샷은 단순한 비주얼이 아니라 서비스와 관련된 비주얼로 인식되어 커뮤니케이션하는데 효과적 - 인간의 두뇌는 시각 지향적 - 여러구절의 설명보다 서비스 특징을 훨씬 쉽게 전달 - 서비스의 주요특징(key features)을 스크린샷과 간략한 설명을 덧붙여 제공하면 소개를 읽지 않아도 됨 - 동영상이나 계임처럼 동적요소가 많은 서비스에서 효과적 - 사용자 기대와 일치할 수 있는 내용을 담아야함 - 시각적 관심과 특장점이 최대한 발휘되는 극적인 장면을 연출하면 효과.. 더보기
PART_1_15. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 썸샷 (Thumbshot) *** - 썸네일(Thumbnail)크기의 이미지 제공을 의미 - 스크린캐스터나 스크린샷에 비해작은 크기의 시각정보를 제공하기 때문에 정보전달에 있어서 보조적인 역할 수행 - 개념적이고 추상적인 텍스트만을 제공하는 것보다 썸샷의 이용으로 시각적 의미를 더하면 좀더 정보에대한 이해를 높을수 있다 - 최근 썸샷의 용도 1. 특정이미지 정보를 축소한 작은 이미지 . 작은 이미지 사용으로 공간과 페이지 용량의 절약 . 과도한 비주얼은 텍스트 읽기의 소홀을 야기하므로 디자이너가 의도한 대로 정보가 처리되지않을수 있음 2. 특정 사용자와 사물을 상징하는 아이콘 . 상징적 가치를 부여하기 위한 시각적 사고와 연결될.. 더보기
PART_1_14. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 대시보드 디자인 (Dashboard Design) *** - 명료한 커뮤니케이션(clear communication)을 위한 강력한 정보전달 도구 - 경영정보시스템(EIS, Executive Information System), 90년대의 데이터 웨어하우스(Data warehouse), OLAP(Online Analytical Processing). BPM(Business Process management) 등 의 IT시스템에서 이미구현되었던 방식 - 과거 기업고객에 한정된 것과 달리 현재는 비즈니스정보 소비자가 협력사, 고객, 이해관계자들을 포함하고 있기때문에 커뮤니케이션 전략이 강조되어 특별한 커뮤니케이션으로 등장한 개념이 .. 더보기
PART_1_13. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 블로그 타입의 초기화면 (Webblog-type Homepage) *** - 정보중심의 서비스(contents driven service)일 경우 적용고려 - 초기화면부터 주제를 강조(push) - 화면의 주제가 방문자의 니즈에 부합될경우 핵심메시지를 전달할 수 있으며로 강한 관계를 형성할 수 있음 - 주제 전달을 위해 제목(headline), 요약(overview), 부제목(sub headline), 내용(contents), 관련그림으로 구성된 메시지구조를 가짐 - 제목이 방문자의 주의와 관심을 얻지못하면 이후 순서는 기약하기어려움 - 제목이 방문자의 관심을 끌려면 충분히 커야하며 니즈에 부합되어야한다. - 관련그림을 같이 배.. 더보기
PART_1_12. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 드릴다운 네비게이션 (Drill-Down Navigation) *** - 계층적구조와 카테고리를 상위레벨에서 하위 레벨 또는 요약 레벨에서 상세레벨로 이동하는 네비게이션 ex)윈도우 탐색기 - 드릴다운기법은 계층적 정보구조를 쉽게 이해 시키며 효율적인 네비게이션을 지원 - 깊은 정보구조의 사이트에 적합 - 정보구조와 해당정보를 동시에 볼 수 있게 하여 정보구조속에서 미아현상(Lost-in-Space)을 방지 - 웹은 페이지단위로 정보를 호출하며 '새로고침(refresh)'에의해 다른 페이지를 호출하는 방식이어서 드릴다운 방식은 프레임 구조의 페이지에서 즐겨 사용되었으나 프레임구조의 효용가치가 떨어지면서 사용이 감소 하였지만 Aj.. 더보기
PART_1_11. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 정보 구성기 (Information Organizer) *** - 다양한 정보 검색 및 정렬 옵션을 손쉽게 조합할 수 있도록 마련된 기능을 의미 - 설정 가능한 검색 및 정렬 옵션을 비교 선택(comparison selection), 다중선택(multi selection)할 수 있다. - 주로 '파인더(finder)' 또는 '상세검색(narrow search)'이란 명칭으로 제공되기도 한다. - 옵션 카테고리, 컨트롤 레이블, 컨트롤 버튼, 검색필드 등으로 구성되는데 제공 옵션에 따라 구성전략이 결정된다.' - 성공요인은 제공 옵션에 달렸다. - 찾고자 하는 정보에 빨리 접근할 수 있도록 돕는 검색 및 정렬 옵션을 도출할 수 있.. 더보기
PART_1_10. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 맥락속의 핵심어 (KWIC, Key-word-In-Context) *** - 표제어가 맥락에 포함된 채 배열된 색인 - 검색엔진이 검색어의 위치를 알아낸 후 전문에 접근해 검색어를 포함한 문단이나 문구를 검색해내는데 이때 검색어가 표재어(핵심어)를 포함한다면 검색 결과의 적합성은 높아질것이다. 표제어가 내용을 그대로 반영한다는 전제가 필요 - 맥락(context)은 정보를 총체적으로 판단할 수 있게하는 중요한 정보 - 정보를 보다 쉽게 정확하게 이해하기위해 필요 - 핵심어와 맥락의 관계는 상호보완적 - 핵심어가 맥락에서 빠지면 의미가 모호해지고, 핵심어가 맥락을 떠나 존재하면 의미를 정확히 파악하기 어려움 - 맥락이 핵심어의 의.. 더보기
PART_1_9. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 검색과 브라우징의 결합 (Combining Searching & Browsing) *** - 정보탐색의 패턴은 크게 검색과 브라우징으로 구분 - 상호결합되기가 어렵다 - 대부분의 사용자는 검색으로 찾은 결과와 브라우징으로 찾은 결과를 비교평가하여 최종적으로 의사결정을 내린다 - 검색과 브라우징에 의한 검색결과는 차이가 존재 - 기술적으로 검색과 브라우징응ㄹ 같이 처리하는것은 어려움 - Ajax 기술이 등장하면서 일정부분 해결, 이로인해 검색과 브라우징이 결합된 UI를 구현할수 있게 됨 - 정보탐색의 시작은 검색과 브라우징 두가주중 하나를 선택할 수 있지만 최종선택는 브라우징 - 즉 직접 눈으로 확인하고 인지적으로 처리한 다음 선.. 더보기
PART_1_8. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 비주얼 서치 (Visual Search) *** - 시각적정보와 도구를 이용해 원하는 정보를 찾는 검색방식 - 시각적도구를 이용한 시각적인 기억전략(visual memory strategies)이라는 점에서 기존 검색 방식과 다름 - 주요검색과정은 시각적연결, 시각적관계, 시각적형태를 비교, 확인해 원하는 정보를 찾음 - 감성적 요소와 재미를 제공하며 텍스트검색에 비해 검색결과를 예측하기 쉬움 - 보편화되기위해서는 기계가 그림이나 영상정보를 이해할수 있어야함 - 메타데이터의 체계와 내용을 개선해야만 비주얼 서치가 정확도를 가질수 있음 - 메타데이터가 조더 인간중심적으로 기획, 설계되어야 가능 - 디자인관점에서 비주얼 서치는 화면.. 더보기
PART_1_7. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 탄성리스트 (Elastic Lists) *** - 다면적인 데이터(multi-faceted data)를 구조화하기위한 실험적인 인터페이스 기법으로 정보의 계층적 관계를 가시적으로 표현할 수 있다는 장점이있다. http://well-formed-data.net/experiments/elastic_lists - 특징 . 데이터에 따라 리스트 셀크기를 다르게 표현해 직관적인 판단 . 중요도에 따른 리스트색상변경으로 빠른선택, 중요도가 높은 데이터는 신속히 확인 할 수 있는 색상사용으로 판독성을 높임 . 데이터의 변화 인지를 위한 전환기법(animated transitions) 적용(플래시이기에 가능) . 유기적인 상호작용을 통해 데이.. 더보기
PART_1_6. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 높은 가시성 (High Visibility) *** - 시스템을 쉽게 이해할 수 있는 정도 - 휴대폰은 가시성이 낮은 대표적인 예 : 공간제약으로 인한 기능옵션의 제한, 하나의키에 여러기능의 중복 맵핑... - 새로운 개념이 등장하고 경쟁이 치열할 수록 가시성이 높은 사이트가 경쟁의 우위를 확보할 수 밖에 없다. - 시스템의 목적, 기능, 상태가 잘 드러나도록 섥하기 위해 다음사항을 고려해야한다. 1. 시스템목적 - 태그라인, 슬로건, 광고 카피, 특장점 설명문, 설명 그림 등 서비스에 대한 개념 모형(conceptual model)이 형성될 수 있는 정보 및 단서를 충분히 제공되어야함 - 제공되지않을시 사용자는 시스템내부를 직.. 더보기
PART_1_5. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 계층구조의 시각화 (Visualization of Hierarchical Stractures) *** - 계층적으로 분류된 정보를 어떻게 시각화(visualization)할 것인가 - 정보의 시각화(information visualization) 또는 데이터의 시각화(data visualization)라고 부르며 주로 계층 구조의 시각화에 초점을 둠 - 계층구조의 시각화는 정보를 효과적으로 전달하여 창의적인 지식 생성을 도모하여 시용자의 의사결정을 돕는 인지적 도구의 역할을 수행 - 계층구조의 시각화는 다음 세가지로 볼수 있다 1. 트리 다이어그램(tree diagram) 메뉴구조와 파일구조를 시각화 하는데 사용 부모-자식관계를.. 더보기
PART_1_4. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 태그 클라우드 (Tag Cloud) *** - 웹사이트내에서 사용된 태그를 시각적으로 표현한 태그 리스트 - 인기도, 빈도수, 최신성 등 중요도 산정 기준에 의해 시각적 비중이 높아진다. - 이는 서체 크기로 표현되며 크기차이를 인식시켜 얼마나 인기있는 태그(popular tags)인지 또는 얼마나 최근에 등장한 태그(recent tags)인지 시각적으로 판단할 수 있게한다. - 좁은영역에 많은 단어를 밀집시키기때문에 인식하기 쉽고 읽기 편한 구성이 요구 - 이를 위해 서체는 한가지 색상으로 사용하고 돌기가없는 산세리프체를 사용하는것이 좋다 - 일정한 태그 간격을 유지하고 최소 2개이상의 정렬 옵션(알파멧순, 가나다순, 중요도순.. 더보기
PART_1_3. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 마이크로 링크 (Microlink) *** - 링크는 크게 하이퍼링크(Hyperlink)와 마이크로링크(Microlink)로 구분 - 하이퍼링크 : 페이지 또는 사이트 단위로 연결되는 링크 - 마이크로링크 : 페이지간의 연결이 아니라 페이지 내에서의 연결, 열려진 페이지에서 새로운 콘텐츠를 불러오는것(콘텐츠간의 연결) - 마이크로링크의 등장은 정보의 최소단위가 페이지 단위에서 좀더 세분화되고 있음을 의미 - 마이크로링크는 기존 콘텐츠에 새로운 콘텐츠를 덧붙이는 방법과 기존 콘텐츠를 사라지게 하고 새로운 콘텐츠를 불러오는 방법의 두가지가있다. - 마이크로링크는 클릭하면 페이지의 일부분만 바뀌기 때문에 페이지의 변화를 눈치채지 못할.. 더보기
PART_1_2. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 빈 서판 (Blank Slate) *** - 인간의 마음은 아무것도 적히지않은 흰종이와 같은 상태로 시작해 경험을 토대로 이성과 지식의 모든 재료를 갖춘다는 존 로크의 학설 - 처음사용자(first time user)에게 최소한의 기능 요소만 있는 백지상태(blank state)를 보여줘야 할까? 아니면 완전히 채워진 상태(full state)를 보여주고 사용자가 임의로 조정하게 할것인가? - 빈 서판 전략은 사용자 스스로 결과를 예상할 수 있는지 여부에 따라 채택되어야 한다. - 최초화면이 백지상태로 제공되었을때 사용자 스스로 내용을 채웠을때의 모습을 상상하기 어렵다면 빈 서판 전략은 위험하다. - 그러나 백지상태는 사용자에게.. 더보기

티스토리툴바