본문 바로가기

UX

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)를 보여주고 사용자가 임의로 조정하게 할것인가? - 빈 서판 전략은 사용자 스스로 결과를 예상할 수 있는지 여부에 따라 채택되어야 한다. - 최초화면이 백지상태로 제공되었을때 사용자 스스로 내용을 채웠을때의 모습을 상상하기 어렵다면 빈 서판 전략은 위험하다. - 그러나 백지상태는 사용자에게.. 더보기
PART_1_1. 인포메이션 디자인 (INFORMATION DESIGN) PART_1. 인포메이션 디자인 (INFORMATION DESIGN) *** 에피센터 디자인 (Epicenter Design) *** - '37시그널즈'의 제이슨 프라이드가 처음 사용 - 디자인 측면으로 보면 페이지의 핵심요소를 말한다. - 마케팅이 강조된 페이지(market-heavy page)보다는 내용중심의 페이지(contents driven page)에 적합한 설계 기법 - 디자인적 요소인 로로, 네비게이션, 비주얼이미지, 색상들의 시각적요소는 페이지의 핵심요소가 아니다. - 에피센터 디자인은 사용자가 가장 중요한 페이지영역에서 과업을 하도록 설계한다. - 기존의 디자인이 바깥쪽에서 안쪽으로 진행되었다면 에피센터 디자인은 안족에서 바깥족으로 진행(outward)된다. - 기존의 디자인은 네비게이션.. 더보기
웹 2.0 기획과 디자인 (2) 들어가기전에 1. 인포메이션 디자인 Information Design - 복잡하고 어려운 정보를 쉽게 이해할 수 있게 만드는 방법 또는 기술 - 커뮤니케이션기술, 인터페이스 디자인, 인터랙션디자인, 그래픽디자인을 포함 - Information design = Content + Writing Style + Layout - 누가 무엇을 어떻게 전달하고자 하며 또한 누가 무엇을 어떻게 얻고자 하는지 이해하여야한다. - 단순히 정보의 주고 받음을 위한 커뮤니케이션과정으로 보기보다는 비즈니스 니즈와 사용자니즈를 설계하는 과정임 - 정보의 구조화와 체계화를 이루어 이에대한 탐색방식과 표현방법을 결정 2. 인터페이스 디자인 Interface Design - 화면구조와 구성을 정의하는과정 - 편의성과 효율성을 높이기위.. 더보기
웹 2.0 기획과 디자인 (1) 2007년 9월 나온책 노주환씨가 썼음 플루토미디어주식회사에서 발행 회사 자개비로 구입 난잡하게 알고있는 지식의 정리차원에서 읽기 시작 ------------------------------ 목차 들어가기 전에 1. 인포메이션 디자인 2. 인터페이스 디자인 3. 인터랙션 디자인 4. 그래픽 디자인 5. 마케팅 디자인 Part 1. 인포메이션 디자인 1. 에피센터 디자인 2. 빈 서판 3. 마이크로링크 4. 태그 클라우드 5. 계층 구조의 시각화 6. 탄성 리스트 7. 비주얼 서치 8. 검색과 브라우징의 결합 9. 맥락 속의 핵심어 10. 정보 구성기 11. 드릴다운 네비게이션 12. 블로그 타입의 초기화면 13. 대시보드 디자인 14. 썸샷 15. 스크린샷 16. 스크린캐스트 17. 순서 매기기 18. .. 더보기

티스토리툴바