[Ewd]class05 0405

Expressive Web Application Design | WEEK 2 : FLEX.HTML5

익스프레시브 웹 응용 디자인Expressive Web Application Design

2012 KGIT [CLASS 05 | 0405]


01. Design Application

02. Content Display

TODAY WE WILL COVER,


| Design Application



001. Application Structure

Application Structure

InformationStructure

ProcessStructure

CreationStructure


- Online 상점 제품 Browsing- 경영 대시보드- 뉴스 리더기- 미디어 플레이어등

사용자 New Information

특별한 노력 없이도 적절한 정보를 바로 얻을수 있게 하는 것


001. Application StructureInformation

Structure

http://oakland.crimespotting.org/


- 데스크톱 저작 도구- 비디오 편집기- 음악 시퀀스 편집기 등

사용자 새로운 컨텐츠 생산 및 수정

자유로운 형태의 수정. 프로세스보다 선형적이지 않음



ProcessStructure Creation

Structure

특정업무 수행. 단계별 정보 제공. 정보 받는 것에 집중

http://kuler.adobe.com/


BUT,Multi Structure Application 가능





002. Apply Structure* Information Structure

= 사용자의 주요 목표가 각기 다른 정보를 브라우징하고 비교 이해하는데 사용컨텐츠가 주 화면을 차지함

Hub & Spoke Model보조기능

모든정보와 조절기능중앙 허브에통합



002. Apply Structure

Hub & Spoke Model

다양한 정보배열로사용자의니즈를 충족시키기위해

멀티 뷰제공

* Information Structure= 사용자의 주요 목표가 각기 다른 정보를 브라우징하고 비교 이해하는데 사용



002. Apply Structure* Process Structure

= 사용자의 기본 목표가 간단하고 능률적이고 구조화된 정보를 제공하는 것일 경우, 프로세스 구조가 적합하다.

! 주의하기1) 진정으로 필요한가? (선택 VS 필수)2) 자동적일수는 없을지?3) 반복적이지는 않은지?

*선택방법 = 작업의 단계가 어떻게 나누어 졌는지에 따라 변경즉, 한단계의 옵션을 변경하는 것이 다른 것에 어떤 영향을 미치는지 보여주는 것이 중요

**프로세스의 다른 단계를 네비게이션할수 있는 방법 제시잘못 입력한 부분 변경 및 아직 준비가 안된 정보 Skip 및 얼마나 남았는지 예측

***입력된 정보에 대한 유동성 제공유효하지 않은 정보 입력 가능/정보 저장/임시정보

***컨트롤가 위젯을 위한 공간 배정



002. Apply Structure* Creation Structure

= 사용자의 주 목표가 완전히 새로운 컨텐츠를 만들거나 기존 컨텐츠에 중요한 변화를 주는것에 적절

! 주의하기1) 한정된 업무에만 사용2) 목적 중심= Process Structure적합3) 컨텐츠=중앙 | 컨트롤=가장자리4) 직접 조작, 편집기능 우선시5) 기능의 수와 사용자 경험과는 반비례

PicniK=창작구조. 주된 기능만 제공.컨텍스트에서 옵션 제공. 사진 편집기능 간단히



003. Fluid NavigationFlow Experience

= 화면이 바뀔때 모션 사용 + 사용자의 업무 이해하여 목표를 Application에 끼워넣기

*불필요한 네비게이션 제거 : 더 많은 시간을 Contents와의 Interaction 또는 작업을 완성하는데 시간 투자

계층 구조나 사이트맵에서 페이지와 화면을 정리하는 것을 탈피 사용자의 주 업무화면으로 직접 플로우 매핑

디자이너의 목표 = 사용자들이 정확한 컨텐츠를 가능한 빠르고 쉽게 찾을수 있도록 Navigation을디자인





* * 사용자의 하나의 목표 = 하나의 화면 기능의 계층화가 아닌 사용자 업무와 유연한 경험을 바탕으로 Flex Application Navigitaion디자인 “집=Application”과 “방=화면과 Page”들이라고 생각 (Cooper & Reiman 2003)





* * * 와이어 프레임=구조 & 스토리보드=사용자 Task & 프로토타입 = 사용자 인터랙션* * * * 계층적 사이트맵이 아닌 허브와 바퀴살의 Navigation Model 참조



004. Entry PointGood Entry Point

= 첫 화면에서 사용자의 목표 달성 방법 제시 즉 좋은 대문, No Skip Intro

* 인터랙션 없이도 사용자 목표와 관련된 유용한 작업과 정보를 나타내는 Entry Point 디자인 Information Structure=의미있는 Contents, 관련 Contextual Contents, 유익한 정보 즉각적으로 보여줌 Process Structure = 사용자의 목표를 위해 지원하는 업무 명확히 나열 Creation Structure = 기존 작업에서 시작 No Login Process & No Loading Animation



005. Visual HierachyApplication의 주 원소(하급구조)

= 개별 화면 구조. 비주얼 계층을 효과적으로 활용하여 잘구조화된 화면 설계

* 견고한 비주얼 계층을 채택. 페이지의 중요한 요소와 소통 후 다음작업으로 인도 색, 모양, 질감, 방향, 크기, 위치등의 비쥬얼 변수를 적용하여 중요도에 대해 사용자와 Interaction 각 화면에 대한 명확한 이해 및 목적 확인

사용자가 어떻게 목표를 달성할 것인지 명확하게 인지. 색=유해한 작동 금지. 크기=가장 중요한 부분 부각. 위치=폼의 요소 순서대로 보게 유도


| Contents Display


02. Contents Display

001. Information Design

* 사용자가 컨텐츠에 가지는 “질문”에 맞게 Contents를 Display하자 다양한 질문이라면 Multi View로써 질문에 대한 해답을 다각화 하자

* * Contents Display를 제일 우선 그리고 나중에 Crome(Component) 먼저 정적 Contents Display에만족 후, 사용자의 질문에 답할수 있는 최소의 Navigation, Filter, Control 추가

1) 실제 Sample Display, 느슨한 정렬 2) 사용자 목적에 맞는 정렬 3) 동적 요소, Interactive한 Navigation요소 추가



001. Information Design* 관련 높은 정보 하나의 컨텐츠로 디스플레이 통합화. 정보를 몇가지 화면이나 상태로 나누지 말것

일반적인 작업 공간은 Master/Detail 또는 Organizer/Workspace로나뉘는데 이것을 하나로 통합 모든 컨텐츠를 한공간에 넣으려면 신중하고 기술력있는 커뮤니케이션 디자인 필요. 시각즉 계층 활용

1) 메세지와 목록의 통합화.



002. Contents Navigation Control* 전통적인 Content Organization Strategy 는 검색 찾는 것 뿐만 아니라 알아보기 쉽도록 만들자 전통적인 카테고리 중심의 컨텐츠 네비게이션은 소량의 정보일경우 오히려 부적합

특히 목적이 불분명 할 경우 네비게이션 혼돈으로 목표에서 이탈

* * 사용자가 변경하는 즉시 검색 및 필터 컨트롤을 응답하게끔 하여 컨텐츠 탐색 지원 전통적인 검색/네비게이션/결과페이지로 나누지 말것 간접적으로 컨텐츠를 조작하게 하라. (Drag & Drop, Affordance)



003. Feed Back & Contents* Modeless Feedback이컨텐츠와 통합되는 것이 팝업 대화상자보다 낫다 팝업 대화상자는 사용자들에게 성가신 경험이다. 시각적 방해뿐만 아니라 즉각적인 주목을 요한다. Modeless Feedback을통해 사용자의 흐름을 깨지 않고 정보를 통합화


02. Contents Dislay

004. Control & Contents* 어포던스를 이용해 컨텐츠의 어떤 아이템이 인터랙티브한지 명확히 보여주자. 호버(Hover), Click, Drag에 Interactive하게반응 Cromless Control의단점은 찾기 어렵다는 점.


02. Contents Dislay

004. Control & Contents* 사용자가 조작하는 컨텐츠의 컨텍스트에 컨트롤을 디스플레이하자 모든 컨트롤 대신 사용자가 흥미를 느끼는 기능을 중심으로 Mouse Overlay / Display In-Context Control


02. Contents Dislay

005. Control Design* 애플리케이션 컨텐츠의 시각적 스타일과 전반적인 웹 애플리케이션브랜드와 맞춰야 한다. Flex에서는 스타일링(styling) 과 스키닝(skinning) 매카니즘으로 쉽게 활용가능스타일링= 기본 컨트롤 모양의 속성을 변경해 표준 모양에 변화스키닝= Adobe Creative Suite 도구를 사용해 만든 모양을 표준 모양과 바꾸는 것

일반적인 컨트롤 라이브러리의 주된 장점 중 하나는 표준화 . 표준이 아닌 컨트롤은 사용자들이 인터페이스의 크롬을 어떻게 조작하는지에 집중하게 하므로 진정 원하는 컨텐츠와 업무에 집중하는데 방해

적절한 상용 컨트롤이 있을 경우 자신만의 컨트롤을 재구현하면 안된다. 대신 컨트롤을 필요에 맞게 커스터마이즈 하라.


| GUI SKINING http://www.adobe.com/cfusion/exchange/index.cfm?l=-1&loc=en_us&exc=15&event=productHome&Submit=Filter

http://fleksray.org/Flex_skin.html

http://www.scalenine.com/

http://ntt.cc/2010/05/11/40-beautiful-themes-skins-for-adobe-flex-apps.html

http://www.adobe.com/cfusion/exchange/index.cfm?l=-1&loc=en_us&exc=15&event=productHome&Submit=Filter




http://fleksray.org/Flex_skin.html


http://www.scalenine.com/


















Q&A


FOR Next Week** Skin연구

!! 다음주 부터 각각 자신이 디자인해온 Interface를 중심으로수업이 진행될 예정이니 꼭 Interface Design과 간단한 아이디어/와이어프레임을 준비해올 것.

Documents

[Ewd]class05 0405