본문 바로가기

UX/웹 2.0 기획과 디자인

PART_4_5. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 본문중심의 레이아웃 (presenting Main Contents First) *** - 로컬 네비게이션은 주로 본문 좌측에 위치 - 보편화된 레이아웃을 다르다보면 내용(본문)보다 기능(네비게이션)을 먼제 보여주게됨 - 블로그는 시간 또는 주제중심의 정보구조였기 때문에 기존 웹사이트의 구조와 다른 정보구조를 가짐 - 블로그는 본문을 먼저 보여주는 레이아웃 - 블로그는 본론부터 예기하는것과 같다. 정보의 홍수속에서 살고있는 사용자는 본론만 듣는것고 쉽지않음 - 본문 중심의 레이아웃은 그리드 시스템보다는 본문을 먼제 보여즐 수 있는게 관건 - 본문보다 다른 구성요서가 먼저 보인다면 본문중심의 레이아웃으로 볼 수 없음 - 이는 읽기 시작점과 관.. 더보기
PART_4_4. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 투명한 컨트롤 패널 (Transparent Control Panel) *** - 투명도(opacity, transparence)를 이용한 디자인 - 투명도를 이용하는 목적은 2차원 공간을 마치 3차원 공간처럼 사용하게 하거나 보이게하는것 - 화면의 복층구조, 포토샵의 레이어와 같은 개념 - 인터랙티브 티비에서는 영상테이터 위에 다른 테이터를 겹쳐 놓기 위해 투명도를 많이 이용 - 투명재질은 그라데이션효과처럼 시각적인 답답함을 다소나마 해소해줌 - 단점은 전경과 배경의 대비가 명료하지않다는점 - 대비가 명료하지않으면 판독성이 떨어짐 - 컨트롤 패널은 배경역할을 하기때문에 투명도가 전체적으로 적용되면 패널상에 배치된 요소의 선명도가 떨어짐 -.. 더보기
PART_4_3. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 단순한 네비게이션 (Simple Navigation) *** - 웹 2.0의 개념과 기능들은 어렵고 복잡해 단순함을 추구하는 디자인전략이 필요 - 선행과제는 불필요한 정보를 줄여 정보량의 최적화를 시킴 - 정보를 체계적으로 구조화시켜 카테고리간의 베타성을 강화 시킴 - 네비게이션 영역은 일종의 의미 영역이기에 단순한 네비게이션은 본문에 집중할 수 있는 디자인 구현을 도움 - 구조적으로 단순하게 설계된 네비게이션이라도 표현에 따라 단순하게 보이지 않을수 도 있음 - 네비게이션의 그래픽처리는 중요도를 고려해야함에도 부지불식간에 가장 중요한 화면요소로 인식되었음 - ''네비게이션=가장중요한 화면요소'라는 인식때문에 시각정 비중(visual we.. 더보기
PART_4_2. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 단순한 레이아웃 (Simple Layout) *** - 레이아웃이 복잡하면 화면을 이해하는 속도는 느릴수 밖에 없다 - 일반적으로 화면전체를 먼저 인식한 후 세부 영역에 대한 인식이 이루어짐 - 복잡성(Complexity)은 디자이너가 반드시 해결해야할 과제 - 내용과 디자인요소를 담는 틀이 단순해질수 있도록함 - 틀(Grid), 기준은 컬럼(Column) - 화면분할은 3단 그리드 이하가 바람직 - 3단 그리드가 임계점(critical point) - 레이아웃은 디자인 컨셉트를 반영 - 단순함이라는 그랜드 컨셉트가 있어야 단순한레이아웃이라는 서브켄셉트가 나옴 - 반드시 단순해야하는것은 아님 - 오래도록 보게 유도해야하는 컨텐츠, 다양한정.. 더보기
PART_4_1. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 단순함 (Simplicity) *** - 마케터들은 복잡함을 감수하더라도 더 많은 정보를 제공하는것이 옳다고 믿는 노출 지상주의를 지향하고있음 - 디자인의 목적은 필요이상으로 복잡한 사물을 단순하고 간결한 사물로 디자인해 용도에 적합한 디자인을 만드는것 - MIT미디어랩의 존 마에다 교수가 쓴 '단순함의 법칙'에서 단순하게 만들수 없는것도 있다 했듯이 전략적인 목적에 의해 복잡할수 밖에 없는 경우는 얼마든지있음 - 디자이너는 마케팅 전략이 어떠하든지 주어진 상황에서 복잡성을 덜어내어 가능한 수준에서 최대한의 간결함을 이끌어 내는것 - 최근 온라인서비스는 여러가지능력보다는 한두가지 능력이라도 보다 확실한 경쟁우위를 가지는 선택과 집중을 추구.. 더보기
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명의 사람이 회사로 방문해주는것은 콘텐츠는 같지만 컨텍스트는 다름 - 일관된 사용자 컨텍스트를 제공할 수 있는지의 여부가 디자인의 초점이 될것임 - 신기술의 적합, 부적합을 따지는것보다 사용자 경험을 향상 시킬수 있는 적절한 .. 더보기
PART_2_20. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 원스톱 등록 (One-Stop Registration) *** - 디자인은 서비스의 전략적 방향성을 반영해야함 - 회원가입은 방문자가 해당 서비스에 대해 어떤 가치를 두고 있는지에 따라 결정될것임 - 가입할 만한 서비스라도 개인정보에 대한 우려와 가입절차에 대한 번거로움으로 인해 가입하지않는 경우도 있음 - 주민번호, 주소, 전화번호 등 사생활 침해가 우려되는 정보들은 가능한 등록 항목에서 제외 시킨다면 개인정보와 가입절차에 대한 신뢰도는 높아질것임 - 서비스전략 차원에서 결정할 문제 - 디자인은 전략적으로 회원가입을 위해 등록해야 할 항목이 적다는 점과 그 절차가 간편하다는 점을 수고할 필요가있음 - 원스톱 등록은 등록 절차가 간.. 더보기
PART_2_19. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 다이렉트 컨트롤 버튼 (Direct Control Button) *** - 오브젝트의 일부분으로 구성된 컨트롤 버튼 - 오브젝트와 컨트롤 버튼의 위치가 떨어져 잇으면 두 요소간의 연관성이 저하됨 - 오브젝트와 컨트롤버튼의 설꼐는 위치적 연관성이 먼저 고려되어야하며 그 다음 시각적 연관성이 고려되는것이 바람직함 - 직관적 디자인 구현이 가능 - 제어하는 오브젝트가 많거나 또는 오브젝트들이 분산배치되어 있는경우 마우스 궤적(mouse track)이 불필요하게 증가해 사용성이 저하될수 있는데 이 경우 리모트 컨트롤 버튼(remote control button)이 적합 - 다이렉트 컨트롤 버튼의 제공 여부가 결정되면 오브젝트가 어떤 조건일.. 더보기
PART_2_18. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 클릭 단서 (Clickability Cue) *** - 링크 여부를 직관적으로 판단할 수 있게 돕는 시각적 단서(visual cue)를 말함 - 색상(colored text), 밑줄(underlineed text), 그래픽 처리(graphic text) 등을 사용 - 좀더 강하게 유도하려면 아이콘을 곁들임 - 링크는 페이지 이동, 콘트롤 호출을 위해 사용되는 일종의 명령어(command)이므로 눈으로 보고 마우스로 클릭해야하는 대상 - 링크된 요소는 링크되지않은 요소와 구별 되어야 하며 그 기능성으 나타낼 수 있는 시각적 형태를 가져야 함 - 클릭단서를 제공하지않는다면 직관적이라 할 수 없음 - 클릭단서를 제공하지 않을경우 사용자는.. 더보기

티스토리툴바